1 // Button

     2 

     3 .@{prefix}-btn {

     4 	border: 1px solid mix(rgb(red(@btn-border-right), green(@btn-border-right), blue(@btn-border-right)), @panel-bg, 30%);

     5 	border-color: @btn-border-top @btn-border-right @btn-border-bottom @btn-border-left;

     6 	position: relative;

     7 	text-shadow: @text-shadow;

     8 

     9 	.inline-block();

    10 	.border-radius(3px);

    11 	.box-shadow(@btn-box-shadow);

    12 	.vertical-gradient(@btn-bg, @btn-bg-hlight);

    13 

    14 	&:hover, &:focus {

    15 		color: @btn-text;

    16 		.vertical-gradient(darken(@btn-bg, 5%), darken(@btn-bg-hlight, 5%));

    17 	}

    18 

    19 	&.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {

    20 		cursor: default;

    21 		.box-shadow(none);

    22 		.opacity(@btn-box-disabled-opacity);

    23 	}

    24 

    25 	&.@{prefix}-active, &.@{prefix}-active:hover {

    26 		.vertical-gradient(darken(@btn-bg, 10%), darken(@btn-bg-hlight, 10%));

    27 		.box-shadow(@btn-box-shadow-active);

    28 	}

    29 

    30 	&:active {

    31 		.vertical-gradient(darken(@btn-bg, 10%), darken(@btn-bg-hlight, 10%));

    32 		.box-shadow(@btn-box-shadow-active);

    33 	}

    34 }

    35 

    36 .@{prefix}-btn button {

    37 	padding: 4px 10px;

    38 	font-size: @font-size;

    39 	line-height: @line-height;

    40 	*line-height: @line-height - 4px;

    41 	cursor: pointer;

    42 	color: @btn-text;

    43 	text-align: center;

    44 

    45 	// Fixes for default inner padding of button

    46 	overflow: visible; // IE7

    47 	-webkit-appearance: none; // WebKit

    48 	&::-moz-focus-inner { // Gecko

    49 		border: 0;

    50 		padding: 0;

    51 	}

    52 }

    53 

    54 .@{prefix}-btn i {

    55 	text-shadow: 1px 1px @btn-text-shadow;

    56 }

    57 

    58 .@{prefix}-primary {

    59 	min-width: 50px;

    60 	color: @btn-primary-text;

    61 	border: 1px solid mix(rgb(red(@btn-border-right), green(@btn-border-right), blue(@btn-border-right)), @panel-bg, 30%);

    62 	border-color: @btn-border-top @btn-border-right @btn-border-bottom @btn-border-left;

    63 	.vertical-gradient(@btn-primary-bg, @btn-primary-bg-hlight);

    64 

    65 	&:hover, &:focus {

    66 		.vertical-gradient(darken(@btn-primary-bg, 5%), darken(@btn-primary-bg-hlight, 5%));

    67 	}

    68 

    69 	&.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {

    70 		cursor: default;

    71 		.box-shadow(none);

    72 		.opacity(@btn-box-disabled-opacity);

    73 	}

    74 

    75 	&.@{prefix}-active, &.@{prefix}-active:hover, &:not(.@{prefix}-disabled):active {

    76 		.vertical-gradient(darken(@btn-primary-bg, 10%), darken(@btn-primary-bg-hlight, 10%));

    77 		.box-shadow(@btn-box-shadow-active);

    78 	}

    79 }

    80 

    81 .@{prefix}-primary button, .@{prefix}-primary button i {

    82 	color: @btn-primary-text;

    83 	text-shadow: 1px 1px @btn-primary-text-shadow;

    84 }

    85 

    86 .@{prefix}-btn-large button {

    87 	padding: 9px 14px;

    88 	font-size: @font-size + 2px;

    89 	line-height: normal;

    90 	.border-radius(5px);

    91 }

    92 

    93 .@{prefix}-btn-large i {

    94 	margin-top: 2px;

    95 }

    96 

    97 .@{prefix}-btn-small button {

    98 	padding: 1px 5px;

    99 	font-size: @font-size - 2px;

   100 	*padding-bottom: 2px;

   101 }

   102 

   103 .@{prefix}-btn-small i {

   104 	line-height: 20px;

   105 	vertical-align: top;

   106 	*line-height: 18px;

   107 }

   108 

   109 .@{prefix}-btn .@{prefix}-caret {

   110 	margin-top: 8px;

   111 	margin-left: 0;

   112 }

   113 

   114 .@{prefix}-btn-small .@{prefix}-caret {

   115 	margin-top: 8px;

   116 	margin-left: 0;

   117 }

   118 

   119 .@{prefix}-caret {

   120 	.inline-block();

   121 	width: 0; height: 0;

   122 	vertical-align: top;

   123 	border-top: 4px solid @btn-caret-border;

   124 	border-right: 4px solid transparent;

   125 	border-left: 4px solid transparent;

   126 	content: "";

   127 }

   128 

   129 .@{prefix}-disabled .@{prefix}-caret {

   130 	border-top-color: @text-disabled;

   131 }

   132 

   133 .@{prefix}-caret.@{prefix}-up {

   134 	border-bottom: 4px solid @btn-caret-border;

   135 	border-top: 0;

   136 }

   137 

   138 .@{prefix}-btn-flat {

   139 	border: 0;

   140 	background: transparent;

   141 	.border-radius(0);

   142 	.box-shadow(none);

   143 	filter: none;

   144 }

   145 

   146 .@{prefix}-btn-flat:hover, .@{prefix}-btn-flat.@{prefix}-active, .@{prefix}-btn-flat:focus, .@{prefix}-btn-flat:active {

   147 	border: 0;

   148 	background: @menubar-bg-active;

   149 	filter: none;

   150 	.box-shadow(none);

   151 }

   152 

   153 // RTL

   154 

   155 .@{prefix}-rtl .@{prefix}-btn button {

   156 	direction: rtl;

   157 }