600 lines
9.8 KiB
Text
600 lines
9.8 KiB
Text
/** buttons */
|
|
.btn {
|
|
display:inline-block;
|
|
|
|
color:#FFF !important;
|
|
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25) !important;
|
|
|
|
background-image:none !important;
|
|
border:5px solid #FFF;
|
|
border-radius:0;
|
|
box-shadow:none !important;
|
|
|
|
.transition(~"all ease .15s");
|
|
|
|
cursor:pointer;
|
|
|
|
vertical-align:middle;
|
|
margin:0;
|
|
|
|
position:relative;
|
|
|
|
}
|
|
|
|
.btn-lg {
|
|
border-width:5px;
|
|
line-height: 1.35;
|
|
padding: 7px 16px;
|
|
}
|
|
.btn-sm {
|
|
border-width:4px;
|
|
font-size:13px;
|
|
padding: 4px 9px;
|
|
line-height:1.39;
|
|
}
|
|
.btn-xs {
|
|
border-width:3px;
|
|
}
|
|
.btn-minier {
|
|
padding: 0 4px;
|
|
line-height: 18px;
|
|
border-width: 2px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
button.btn:active {
|
|
top: 1px;
|
|
left: 1px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//button color
|
|
.btn-color(@color1, @color2) {
|
|
& , &:focus {
|
|
background-color:@color1 !important;
|
|
border-color:@color1;
|
|
}
|
|
|
|
&:hover , .open &.dropdown-toggle {
|
|
background-color:@color2 !important;
|
|
border-color:@color1;
|
|
}
|
|
&.no-border:hover {
|
|
border-color:@color2;
|
|
}
|
|
&.no-hover:hover {
|
|
background-color:@color1 !important;
|
|
}
|
|
&.active {
|
|
background-color: mix(@color1,@color2) !important;
|
|
border-color: darken(mix(@color1,@color2),7%);
|
|
}
|
|
&.no-border.active {
|
|
background-color: darken(mix(@color1,@color2),3%) !important;
|
|
border-color: darken(mix(@color1,@color2),3%);
|
|
}
|
|
&.disabled, &[disabled], fieldset[disabled] & {
|
|
&,
|
|
&:hover,
|
|
&:focus,
|
|
&:active,
|
|
&.active {
|
|
background-color:@color1 !important;
|
|
border-color:@color1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-color(@color-name) {
|
|
@color1-name : ~`"btn-@{color-name}"`;
|
|
@color2-name : ~`"btn-@{color-name}-hover"`;
|
|
|
|
.btn-color(@@color1-name, @@color2-name);
|
|
}
|
|
|
|
|
|
.btn , .btn-default {
|
|
.btn-color(~"default");
|
|
}
|
|
.btn-primary {
|
|
.btn-color(~"primary");
|
|
}
|
|
.btn-info {
|
|
.btn-color(~"info");
|
|
}
|
|
.btn-success {
|
|
.btn-color(~"success");
|
|
}
|
|
.btn-warning {
|
|
.btn-color(~"warning");
|
|
}
|
|
.btn-danger {
|
|
.btn-color(~"danger");
|
|
}
|
|
.btn-inverse {
|
|
.btn-color(~"inverse");
|
|
}
|
|
.btn-pink {
|
|
.btn-color(~"pink");
|
|
}
|
|
.btn-purple {
|
|
.btn-color(~"purple");
|
|
}
|
|
.btn-grey {
|
|
.btn-color(~"grey");
|
|
}
|
|
|
|
.btn-yellow {
|
|
.btn-color(~"yellow");
|
|
color:@btn-yellow-color !important;
|
|
text-shadow:0 -1px 0 rgba(255, 255, 255, 0.4) !important;
|
|
}
|
|
|
|
.btn-light {
|
|
.btn-color(~"light");
|
|
color:@btn-light-color !important;
|
|
text-shadow:0 -1px 0 rgba(250, 250, 250, 0.25) !important;
|
|
}
|
|
|
|
.btn-light.btn-xs:after {
|
|
left:-2px; right:-2px; top:-2px; bottom:-2px;
|
|
}
|
|
.btn-light.btn-sm:after {
|
|
left:-4px; right:-4px; top:-4px; bottom:-4px;
|
|
}
|
|
.btn-light.btn-large:after {
|
|
left:-6px; right:-6px; top:-6px; bottom:-6px;
|
|
}
|
|
|
|
.btn.btn-white {
|
|
border-width:1px;
|
|
border-color:#CCC;
|
|
color:#444 !important;
|
|
text-shadow:none !important;
|
|
background-color:#FFF !important;
|
|
|
|
&:hover, &:focus {
|
|
background-color:#EBEBEB !important;
|
|
}
|
|
&.no-border {
|
|
border-color: #CCC;
|
|
}
|
|
}
|
|
|
|
|
|
.btn.disabled, .btn[disabled] {
|
|
&.active, &:focus, &:active {
|
|
outline:none;
|
|
}
|
|
&:active {
|
|
top:0; left:0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* active buttons */
|
|
.btn.active {
|
|
color:@btn-active-color;
|
|
&:after {
|
|
display:inline-block;
|
|
content:"";
|
|
position:absolute;
|
|
border-bottom:1px solid @btn-active-color;
|
|
left:-4px; right:-4px; bottom:-4px;
|
|
}
|
|
&.btn-sm:after {
|
|
left:-3px; right:-3px; bottom:-3px;
|
|
//border-bottom-width:1px;
|
|
}
|
|
&.btn-large:after {
|
|
left:-5px; right:-5px; bottom:-5px;
|
|
//border-bottom-width:1px;
|
|
}
|
|
&.btn-xs:after , &.btn-minier:after {
|
|
left:-1px; right:-1px; bottom:-2px;
|
|
//border-bottom-width:1px;
|
|
}
|
|
&.btn-minier:after {
|
|
bottom:-1px;
|
|
}
|
|
|
|
&.btn-yellow:after {
|
|
border-bottom-color:@btn-yellow-active-border;
|
|
}
|
|
&.btn-light {
|
|
color:#515151;
|
|
&:after {
|
|
border-bottom-color:#B5B5B5;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
/* icons inside buttons */
|
|
.btn {
|
|
> [class*="icon-"] {
|
|
display:inline;
|
|
margin-right:4px;
|
|
//min-width:12px;
|
|
|
|
&.icon-on-right {
|
|
margin-right:0;
|
|
margin-left:4px;
|
|
}
|
|
}
|
|
> .icon-only[class*="icon-"] {
|
|
margin:0;
|
|
vertical-align:middle;
|
|
text-align:center;
|
|
padding:0;
|
|
//min-width:24px;
|
|
}
|
|
}
|
|
|
|
.btn-large > [class*="icon-"] {
|
|
margin-right:6px;
|
|
|
|
&.icon-on-right {
|
|
margin-right:0;
|
|
margin-left:6px;
|
|
}
|
|
}
|
|
.btn-sm > [class*="icon-"] {
|
|
margin-right:3px;
|
|
|
|
&.icon-on-right {
|
|
margin-right:0;
|
|
margin-left:3px;
|
|
}
|
|
}
|
|
.btn-xs > [class*="icon-"] , &.btn-minier > [class*="icon-"] {
|
|
margin-right:2px;
|
|
|
|
&.icon-on-right {
|
|
margin-right:0;
|
|
margin-left:2px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.btn.btn-link {
|
|
border:none !important;
|
|
background:transparent none !important;
|
|
color:@btn-link-color !important;
|
|
text-shadow:none !important;
|
|
padding:4px 12px !important;
|
|
line-height:20px !important;
|
|
|
|
&:hover {
|
|
background:none !important;
|
|
text-shadow:none !important;
|
|
}
|
|
&.active {
|
|
background:none !important;
|
|
text-decoration:underline;
|
|
color:lighten(@btn-link-color , 6%) !important;
|
|
&:after {
|
|
display:none;
|
|
}
|
|
}
|
|
&.disabled , &[disabled]{
|
|
background:none;
|
|
.opacity(0.65);
|
|
&:hover {
|
|
background:none !important;
|
|
text-decoration:none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn.btn-no-border {
|
|
border-width:0 !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* button groups */
|
|
.btn-group {
|
|
> .btn {
|
|
& , + .btn {
|
|
margin:0 1px 0 0;
|
|
}
|
|
&:first-child {
|
|
margin:0 1px 0 0;
|
|
}
|
|
&:first-child , &:last-child {
|
|
border-radius:0;
|
|
}
|
|
|
|
/* caret inside buttons */
|
|
> .caret {
|
|
margin-top:15px;
|
|
margin-left:1px;
|
|
border-width:5px;
|
|
border-top-color:#FFF;
|
|
}
|
|
|
|
&.btn-sm > .caret {
|
|
margin-top:10px;
|
|
border-width:4px;
|
|
}
|
|
&.btn-large > .caret {
|
|
margin-top:18px;
|
|
border-width:6px;
|
|
}
|
|
&.btn-xs > .caret {
|
|
margin-top:9px;
|
|
border-width:4px;
|
|
}
|
|
&.btn-minier > .caret {
|
|
margin-top:7px;
|
|
border-width:3px;
|
|
}
|
|
|
|
/* dropdown toggle */
|
|
+ .btn.dropdown-toggle {
|
|
padding-right:3px;
|
|
padding-left:3px;
|
|
}
|
|
+ .btn-large.dropdown-toggle {
|
|
padding-right:4px;
|
|
padding-left:4px;
|
|
}
|
|
|
|
}
|
|
.dropdown-toggle {
|
|
border-radius:0;
|
|
}
|
|
|
|
|
|
|
|
.btn-group-active-state(@left, @right, @bottom, @width) {/* the border under an active button in button groups */
|
|
&.active:after {
|
|
left:unit(@left, px); right:unit(@right, px); bottom:unit(@bottom, px);
|
|
border-bottom-width:unit(@width, px);
|
|
}
|
|
}
|
|
> .btn , + .btn{
|
|
margin:0 1px 0 0;
|
|
border-width:3px;// !important;
|
|
.btn-group-active-state(-2, -2, -2, 1);
|
|
}
|
|
> .btn-large , + .btn-large{
|
|
border-width:4px;// !important;
|
|
.btn-group-active-state(-3, -3, -3, 1);
|
|
}
|
|
> .btn-sm , + .btn-sm{
|
|
border-width:2px;// !important;
|
|
.btn-group-active-state(-1, -1, -1, 1);
|
|
}
|
|
> .btn-xs , + .btn-xs{
|
|
border-width:1px;// !important;
|
|
.btn-group-active-state(0, 0, 0, 1);
|
|
}
|
|
> .btn-minier , + .btn-minier{
|
|
border-width:1px;// !important;
|
|
.btn-group-active-state(0, 0, 0, 1);
|
|
}
|
|
}
|
|
|
|
.btn-group > .btn {
|
|
border-radius:0 !important;
|
|
}
|
|
.btn-group-vertical > .btn , .btn-group-vertical > .btn + .btn {
|
|
margin:1px 0 0;
|
|
}
|
|
.btn-group-vertical > .btn:first-child {
|
|
margin-right:0;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* application buttons */
|
|
.btn.btn-app {
|
|
display: inline-block;
|
|
width: 100px;
|
|
|
|
font-size: 18px;
|
|
font-weight: normal;
|
|
color: #FFF;
|
|
|
|
text-align: center;
|
|
text-shadow: 0 -1px -1px rgba(0,0,0,0.2) !important;
|
|
|
|
border: none;
|
|
border-radius: 12px;
|
|
|
|
padding: 12px 0 8px;
|
|
margin: 2px;
|
|
|
|
line-height: 1.7;
|
|
|
|
position: relative;
|
|
}
|
|
|
|
|
|
//button color
|
|
.btn-app-color(@color1, @color2, @percent) {
|
|
& , &.no-hover:hover , &.disabled:hover {
|
|
background: average(@color1, @color2) !important;
|
|
#gradient > .vertical(@color1 , @color2) !important;
|
|
}
|
|
&:hover {
|
|
background: average(darken(@color1,@percent), darken(@color2,@percent)) !important;
|
|
#gradient > .vertical(darken(@color1,@percent) , darken(@color2,@percent)) !important;
|
|
}
|
|
}
|
|
|
|
.btn-app-color(@color-name, @percent:10%) {
|
|
@color1-name : ~`"btn-app-@{color-name}-1"`;
|
|
@color2-name : ~`"btn-app-@{color-name}-2"`;
|
|
|
|
.btn-app-color(@@color1-name, @@color2-name , @percent);
|
|
}
|
|
|
|
.btn-app, .btn-app.btn-default {
|
|
.btn-app-color(~"default" , 8%);
|
|
}
|
|
.btn-app.btn-primary {
|
|
.btn-app-color(~"primary");
|
|
}
|
|
.btn-app.btn-info {
|
|
.btn-app-color(~"info");
|
|
}
|
|
.btn-app.btn-success {
|
|
.btn-app-color(~"success");
|
|
}
|
|
.btn-app.btn-danger {
|
|
.btn-app-color(~"danger");
|
|
}
|
|
.btn-app.btn-warning {
|
|
.btn-app-color(~"warning");
|
|
}
|
|
.btn-app.btn-purple {
|
|
.btn-app-color(~"purple");
|
|
}
|
|
.btn-app.btn-pink {
|
|
.btn-app-color(~"pink");
|
|
}
|
|
.btn-app.btn-inverse {
|
|
.btn-app-color(~"inverse");
|
|
}
|
|
.btn-app.btn-grey {
|
|
.btn-app-color(~"grey" , 5%);
|
|
}
|
|
|
|
.btn.btn-app.btn-light {
|
|
.btn-app-color(~"light" , 5%);
|
|
|
|
color: @btn-app-light-color !important;
|
|
text-shadow: 0 1px 1px #EEE !important;
|
|
}
|
|
|
|
.btn.btn-app.btn-yellow {
|
|
.btn-app-color(~"yellow" , 5%);
|
|
|
|
color:@btn-app-yellow-color !important;
|
|
text-shadow:0 -1px 0 rgba(255, 255, 255, 0.4) !important;
|
|
}
|
|
|
|
|
|
.btn.btn-app {
|
|
&.btn-sm {
|
|
width:80px;
|
|
font-size:16px;
|
|
border-radius:10px ;
|
|
|
|
line-height: 1.5;
|
|
}
|
|
&.btn-xs {
|
|
width:64px;
|
|
font-size:15px;
|
|
border-radius:8px;
|
|
padding-bottom:7px;
|
|
padding-top:8px;
|
|
|
|
line-height: 1.45;
|
|
}
|
|
|
|
|
|
|
|
> [class*=icon] {
|
|
display:block;
|
|
font-size:42px;
|
|
|
|
margin:0 0 4px;
|
|
line-height:36px;
|
|
min-width:0;
|
|
|
|
padding:0;
|
|
}
|
|
&.btn-sm > [class*=icon] {
|
|
display:block;
|
|
font-size:32px;
|
|
line-height:30px;
|
|
margin:0 0 3px;
|
|
}
|
|
&.btn-xs > [class*=icon] {
|
|
display:block;
|
|
font-size:24px;
|
|
line-height:24px;
|
|
margin:0;
|
|
}
|
|
|
|
&.no-radius {
|
|
border-radius:0;
|
|
}
|
|
&.radius-4 {
|
|
border-radius:4px;
|
|
}
|
|
|
|
/* badge & label inside buttons */
|
|
> .badge , > .label {
|
|
position:absolute !important;
|
|
top:-2px; right:-2px;
|
|
padding:1px 3px;
|
|
text-align:center;
|
|
font-size:12px;
|
|
|
|
&.badge-left , &.label-left{
|
|
right:auto;
|
|
left:-2px;
|
|
}
|
|
}
|
|
> .label {
|
|
padding:1px 6px 3px;
|
|
font-size:13px;
|
|
}
|
|
&.radius-4 , &.no-radius {
|
|
> .badge {
|
|
border-radius:3px;
|
|
&.no-radius {// > .badge.no-radius
|
|
border-radius:0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* active state */
|
|
&.active {
|
|
color:@btn-app-active;
|
|
&:after {
|
|
display:none;
|
|
}
|
|
&.btn-yellow {
|
|
color:@btn-app-yellow-color;
|
|
border-color:@btn-app-yellow-border;
|
|
}
|
|
&.btn-light {
|
|
color:@btn-app-light-active;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.btn.btn-app {
|
|
&.btn-light, &.btn-yellow {
|
|
.box-shadow(~"0 0 0 1px rgba(0, 0, 0, 0.08) inset") !important;
|
|
}
|
|
}
|
|
|
|
|
|
|