git.roojs.org Git - bootswatch/blob - material-kit/sass/material-kit/_buttons.scss

   1 .btn,
   2 .navbar .navbar-nav > li > a.btn{
   3     border: none;
   4     border-radius: $border-radius-base;
   5     position: relative;
   6     padding: 12px 30px;
   7     margin: 10px 1px;
   8
   9     font-size: $mdb-btn-font-size-base;
  10     font-weight: 400;
  11     text-transform: uppercase;
  12     letter-spacing: 0;
  13
  14     will-change: box-shadow, transform;
  15     transition: box-shadow 0.2s $mdb-animation-curve-fast-out-linear-in,
  16     background-color 0.2s $mdb-animation-curve-default;
  17
  18     &::-moz-focus-inner {
  19     border: 0;
  20     }
  21
  22     &,
  23     &.btn-default{
  24         @include btn-styles($gray-light);
  25     }
  26
  27     &.btn-primary{
  28       @include btn-styles($brand-primary);
  29     }
  30     &.btn-info{
  31       @include btn-styles($brand-info);
  32     }
  33     &.btn-success{
  34       @include btn-styles($brand-success);
  35     }
  36     &.btn-warning{
  37       @include btn-styles($brand-warning);
  38     }
  39     &.btn-danger{
  40       @include btn-styles($brand-danger);
  41     }
  42     &.btn-upgrade{
  43       @include btn-styles($brand-rose);
  44     }
  45     &.btn-white{
  46         &,
  47         &:focus,
  48         &:hover{
  49             background-color: $white-color;
  50             color: $gray-light;
  51         }
  52         &.btn-simple{
  53             color: #FFFFFF;
  54             background: transparent;
  55             box-shadow: none;
  56         }
  57     }
  58
  59     &:focus,
  60     &:active,
  61     &:active:focus{
  62       outline: 0;
  63     }
  64
  65     &.btn-round{
  66       border-radius: $border-radius-extreme;
  67     }
  68
  69     &:not(.btn-just-icon):not(.btn-fab){
  70       .fa{
  71           font-size: 18px;
  72           margin-top: -2px;
  73           position: relative;
  74           top: 2px;
  75       }
  76     }
  77
  78
  79     &.btn-fab {
  80         // see above for color variations
  81         border-radius: 50%;
  82         font-size: $mdb-btn-fab-font-size;
  83         height: $mdb-btn-fab-size;
  84         margin: auto;
  85         min-width: $mdb-btn-fab-size;
  86         width: $mdb-btn-fab-size;
  87         padding: 0;
  88         overflow: hidden;
  89         position: relative;
  90         line-height: normal;
  91
  92         .ripple-container {
  93           border-radius: 50%;
  94         }
  95
  96         &.btn-fab-mini,
  97         .btn-group-sm & {
  98             height: $mdb-btn-fab-size-mini;
  99             min-width: $mdb-btn-fab-size-mini;
 100             width: $mdb-btn-fab-size-mini;
 101
 102             &.material-icons {
 103                 top: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
 104                 left: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
 105             }
 106
 107             .material-icons{
 108                 font-size: $mdb-btn-icon-size-mini;
 109             }
 110         }
 111
 112         i.material-icons {
 113           position: absolute;
 114           top: 50%;
 115           left: 50%;
 116           transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
 117           line-height: $mdb-btn-fab-font-size;
 118           width: $mdb-btn-fab-font-size;
 119           font-size: $mdb-btn-fab-font-size;
 120         }
 121     }
 122
 123     // Size variations
 124     &.btn-lg,
 125     .btn-group-lg & {
 126         font-size: $mdb-btn-font-size-lg;
 127         padding: 18px 36px;
 128     }
 129     &.btn-sm,
 130     .btn-group-sm & {
 131         padding: 5px 20px;
 132         font-size: $mdb-btn-font-size-sm;
 133     }
 134     &.btn-xs,
 135     .btn-group-xs & {
 136         padding: 4px 15px;
 137         font-size: $mdb-btn-font-size-xs;
 138     }
 139
 140     &.btn-just-icon{
 141         font-size: 18px;
 142         padding: 10px 10px;
 143         line-height: 1em;
 144
 145         i{
 146             width: 20px;
 147         }
 148         &.btn-lg{
 149             font-size: 22px;
 150             padding: 13px 18px;
 151         }
 152     }
 153 }
 154
 155 .btn{
 156     // Align icons inside buttons with text
 157     .material-icons{
 158         vertical-align: middle;
 159         font-size: $mdb-btn-icon-size-mini;
 160         top: -1px;
 161         position: relative;
 162     }
 163
 164 }
 165
 166 .navbar .navbar-nav > li > {
 167     a.btn{
 168         margin-top: 2px;
 169         margin-bottom: 2px;
 170
 171         &.btn-fab{
 172             margin: 5px 2px;
 173         }
 174     }
 175     a:not(.btn){
 176         .material-icons{
 177             margin-top: -3px;
 178             top: 0px;
 179             position: relative;
 180             margin-right: 3px;
 181         }
 182     }
 183     .profile-photo{
 184         margin: 5px 2px;
 185     }
 186 }
 187
 188 .navbar-default:not(.navbar-transparent) .navbar-nav > li > {
 189     a.btn{
 190         &.btn-white.btn-simple{
 191             color: $gray;
 192         }
 193     }
 194 }
 195
 196 // btn-group variations
 197 .btn-group,
 198 .btn-group-vertical {
 199
 200   position: relative;
 201   //border-radius: 2px;
 202   margin: 10px 1px;
 203
 204   &.open {
 205     .dropdown-toggle {
 206       //box-shadow: none;
 207     }
 208
 209     & > .dropdown-toggle.btn {
 210       @include variations(unquote(".btn"), unquote(""), background-color, $mdb-btn-background-color);
 211     }
 212   }
 213
 214   .dropdown-menu {
 215     border-radius: 0 0 $border-radius-base $border-radius-base;
 216   }
 217
 218   &.btn-group-raised {
 219     @include shadow-2dp();
 220   }
 221
 222   & .btn + .btn,
 223   .btn,
 224   .btn:active,
 225   .btn-group {
 226     margin: 0;
 227   }
 228 }
 229
 230 .close{
 231     font-size: inherit;
 232     color: $white-color;
 233     opacity: .9;
 234     text-shadow: none;
 235
 236     &:hover,
 237     &:focus{
 238         opacity: 1;
 239         color: $white-color;
 240     }
 241
 242     i{
 243         font-size: 20px;
 244     }
 245 }