/*! * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with * this work for additional information regarding copyright ownership. * The ASF licenses this file to You under the Apache License, Version 2.0 * (the "License"); you may not use this file except in compliance with * the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* * Component: Button * ----------------- */ .btn { .border-radius(@btn-border-radius); .box-shadow(@btn-boxshadow); border: 1px solid transparent; &.uppercase { text-transform: uppercase } // Flat buttons &.btn-flat { .border-radius(0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-width: 1px; } // Active state &:active { -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125); -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.125); box-shadow: inset 0 3px 5px rgba(0,0,0,.125); } &:focus { outline: none; } // input file btn &.btn-file { position: relative; overflow: hidden; > input[type='file'] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; .opacity(0); outline: none; background: white; cursor: inherit; display: block; } } } //Button color variations .btn-default { color: #444; border-color: #ddd; &:hover, &:active, &.hover { background-color:darken(#f4f4f4, 5%)!important; } } .btn-primary { .button-variant(@btn-primary-color; @light-blue; darken(@light-blue, 5%)); } .btn-success { .button-variant(@btn-primary-color; @green; darken(@green, 5%)); } .btn-info { .button-variant(@btn-primary-color; @aqua; darken(@aqua, 5%)); } .btn-danger { .button-variant(@btn-primary-color; @red; darken(@red, 5%)); } .btn-warning { .button-variant(@btn-primary-color; @yellow; darken(@yellow, 5%)); } .btn-outline { border: 1px solid #fff; background: transparent; color: #fff; &:hover, &:focus, &:active { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.7); } } .btn-link { .box-shadow(none); } //General .btn with bg class .btn[class*='bg-']:hover { .box-shadow(inset 0 0 100px rgba(0,0,0,0.2)); } // Application buttons .btn-app { .border-radius(3px); position: relative; padding: 15px 5px; margin: 0 0 10px 10px; min-width: 80px; height: 60px; text-align: center; color: #666; border: 1px solid #ddd; background-color: #f4f4f4; font-size: 12px; //Icons within the btn > .fa { font-size: 20px; display: block; } &:hover { background: #f4f4f4; color: #444; border-color: #aaa; } &:active, &:focus { -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125); -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.125); box-shadow: inset 0 3px 5px rgba(0,0,0,.125); } //The badge > .badge { position: absolute; top: -3px; right: -10px; font-size: 10px; font-weight: 400; } }