1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- /*
- * Component: Button
- * -----------------
- */
- .btn {
- // Flat buttons
- &.btn-flat {
- @include border-radius(0);
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
- border-width: 1px;
- }
- // 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 {
- background-color: #f4f4f4;
- color: #444;
- border-color: #ddd;
- &:hover,
- &:active,
- &.hover {
- background-color: darken(#f4f4f4, 5%);
- }
- }
- // Application buttons
- .btn-app {
- @include 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,
- > .glyphicon,
- > .ion {
- font-size: 20px;
- display: block;
- }
- &:hover {
- background: #f4f4f4;
- color: #444;
- border-color: #aaa;
- }
- &:active,
- &:focus {
- box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
- }
- // The badge
- > .badge {
- position: absolute;
- top: -3px;
- right: -10px;
- font-size: 10px;
- font-weight: 400;
- }
- }
|