third_party/ot-br-posix/repo/third_party/mdl/repo/src/button/_button.scss

   1 /**
   2  * Copyright 2015 Google Inc. All Rights Reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16
  17 @import "../variables";
  18 @import "../mixins";
  19
  20 // The button component. Defaults to a flat button.
  21 .mdl-button {
  22   background: transparent;
  23   border: none;
  24   border-radius: $button-border-radius;
  25   color: $button-secondary-color;
  26   position: relative;
  27   height: $button-height;
  28   margin: 0;
  29   min-width: $button-min-width;
  30   padding: 0 $button-padding;
  31   display: inline-block;
  32   @include typo-button();
  33   overflow: hidden;
  34   will-change: box-shadow;
  35   transition: box-shadow 0.2s $animation-curve-fast-out-linear-in,
  36               background-color 0.2s $animation-curve-default,
  37               color 0.2s $animation-curve-default;
  38   outline: none;
  39   cursor: pointer;
  40   text-decoration: none;
  41   text-align: center;
  42   line-height: $button-height;
  43   vertical-align: middle;
  44
  45   &::-moz-focus-inner {
  46     border: 0;
  47   }
  48
  49   &:hover {
  50     background-color: $button-hover-color;
  51   }
  52
  53   &:focus:not(:active) {
  54     background-color: $button-focus-color;
  55   }
  56
  57   &:active {
  58     background-color: $button-active-color;
  59   }
  60
  61   &.mdl-button--colored {
  62     color: $button-primary-color-alt;
  63
  64     &:focus:not(:active) {
  65       background-color: $button-focus-color-alt;
  66     }
  67   }
  68 }
  69
  70 input.mdl-button[type="submit"] {
  71   -webkit-appearance:none;
  72 }
  73
  74   // Raised buttons
  75   .mdl-button--raised {
  76     background: $button-primary-color;
  77     @include shadow-2dp();
  78
  79     &:active {
  80       @include shadow-4dp();
  81       background-color: $button-active-color;
  82     }
  83
  84     &:focus:not(:active) {
  85       @include focus-shadow();
  86       background-color: $button-active-color;
  87     }
  88
  89     &.mdl-button--colored {
  90       background: $button-primary-color-alt;
  91       color: $button-secondary-color-alt;
  92
  93       &:hover {
  94         background-color: $button-hover-color-alt;
  95       }
  96
  97       &:active {
  98         background-color: $button-active-color-alt;
  99       }
 100
 101       &:focus:not(:active) {
 102         background-color: $button-active-color-alt;
 103       }
 104
 105       & .mdl-ripple {
 106         background: $button-ripple-color-alt;
 107       }
 108     }
 109   }
 110
 111
 112   // FABs
 113   .mdl-button--fab {
 114     border-radius: 50%;
 115     font-size: $button-fab-font-size;
 116     height: $button-fab-size;
 117     margin: auto;
 118     min-width: $button-fab-size;
 119     width: $button-fab-size;
 120     padding: 0;
 121     overflow: hidden;
 122     background: $button-primary-color;
 123     box-shadow: 0 1px 1.5px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
 124     position: relative;
 125     line-height: normal;
 126
 127     & .material-icons {
 128       position: absolute;
 129       top: 50%;
 130       left: 50%;
 131       transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2);
 132       line-height: $button-fab-font-size;
 133       width: $button-fab-font-size;
 134     }
 135
 136     &.mdl-button--mini-fab {
 137       height: $button-fab-size-mini;
 138       min-width: $button-fab-size-mini;
 139       width: $button-fab-size-mini;
 140     }
 141
 142     & .mdl-button__ripple-container {
 143       border-radius: 50%;
 144       // Fixes clipping bug in Safari.
 145       -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
 146     }
 147
 148     &:active {
 149       @include shadow-4dp();
 150       background-color: $button-active-color;
 151     }
 152
 153     &:focus:not(:active) {
 154       @include focus-shadow();
 155       background-color: $button-active-color;
 156     }
 157
 158     &.mdl-button--colored {
 159       background: $button-fab-color-alt;
 160       color: $button-fab-text-color-alt;
 161
 162       &:hover {
 163         background-color: $button-fab-hover-color-alt;
 164       }
 165
 166       &:focus:not(:active) {
 167         background-color: $button-fab-active-color-alt;
 168       }
 169
 170       &:active {
 171         background-color: $button-fab-active-color-alt;
 172       }
 173
 174       & .mdl-ripple {
 175         background: $button-fab-ripple-color-alt;
 176       }
 177     }
 178   }
 179
 180
 181   // Icon buttons
 182   .mdl-button--icon {
 183     border-radius: 50%;
 184     font-size: $button-fab-font-size;
 185     height: $button-icon-size;
 186     margin-left: 0;
 187     margin-right: 0;
 188     min-width: $button-icon-size;
 189     width: $button-icon-size;
 190     padding: 0;
 191     overflow: hidden;
 192     color: inherit;
 193     line-height: normal;
 194
 195     & .material-icons {
 196       position: absolute;
 197       top: 50%;
 198       left: 50%;
 199       transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2);
 200       line-height: $button-fab-font-size;
 201       width: $button-fab-font-size;
 202     }
 203
 204     &.mdl-button--mini-icon {
 205       height: $button-icon-size-mini;
 206       min-width: $button-icon-size-mini;
 207       width: $button-icon-size-mini;
 208
 209       & .material-icons {
 210         top: ($button-icon-size-mini - $button-fab-font-size) / 2;
 211         left: ($button-icon-size-mini - $button-fab-font-size) / 2;
 212       }
 213     }
 214
 215     & .mdl-button__ripple-container {
 216       border-radius: 50%;
 217       // Fixes clipping bug in Safari.
 218       -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
 219     }
 220   }
 221
 222
 223   // Ripples
 224   .mdl-button__ripple-container {
 225     display: block;
 226     height: 100%;
 227     left: 0px;
 228     position: absolute;
 229     top: 0px;
 230     width: 100%;
 231     z-index: 0;
 232     overflow: hidden;
 233
 234     .mdl-button[disabled] & .mdl-ripple,
 235     .mdl-button.mdl-button--disabled & .mdl-ripple {
 236       background-color: transparent;
 237     }
 238   }
 239
 240 // Colorized buttons
 241
 242 .mdl-button--primary.mdl-button--primary {
 243   color: $button-primary-color-alt;
 244   & .mdl-ripple {
 245     background: $button-secondary-color-alt;
 246   }
 247   &.mdl-button--raised, &.mdl-button--fab {
 248     color: $button-secondary-color-alt;
 249     background-color: $button-primary-color-alt;
 250   }
 251 }
 252
 253 .mdl-button--accent.mdl-button--accent {
 254   color: $button-fab-color-alt;
 255   & .mdl-ripple {
 256     background: $button-fab-text-color-alt;
 257   }
 258   &.mdl-button--raised, &.mdl-button--fab {
 259     color: $button-fab-text-color-alt;
 260     background-color: $button-fab-color-alt;
 261   }
 262 }
 263
 264 // Disabled buttons
 265
 266 .mdl-button {
 267   // Bump up specificity by using [disabled] twice.
 268   &[disabled][disabled],
 269   &.mdl-button--disabled.mdl-button--disabled {
 270     color: $button-secondary-color-disabled;
 271     cursor: default;
 272     background-color: transparent;
 273   }
 274
 275   &--fab {
 276     // Bump up specificity by using [disabled] twice.
 277     &[disabled][disabled],
 278     &.mdl-button--disabled.mdl-button--disabled {
 279       background-color: $button-primary-color-disabled;
 280       color: $button-secondary-color-disabled;
 281     }
 282   }
 283
 284   &--raised {
 285     // Bump up specificity by using [disabled] twice.
 286     &[disabled][disabled],
 287     &.mdl-button--disabled.mdl-button--disabled {
 288       background-color: $button-primary-color-disabled;
 289       color: $button-secondary-color-disabled;
 290       box-shadow: none;
 291     }
 292   }
 293   &--colored {
 294     // Bump up specificity by using [disabled] twice.
 295     &[disabled][disabled],
 296     &.mdl-button--disabled.mdl-button--disabled {
 297       color: $button-secondary-color-disabled;
 298     }
 299   }
 300 }
 301
 302 // Align icons inside buttons with text
 303 .mdl-button .material-icons {
 304   vertical-align: middle;
 305 }