diff options
Diffstat (limited to 'minionlivesmatter/templates/assets/bootstrap-material-design/scss/_buttons.scss')
| -rw-r--r-- | minionlivesmatter/templates/assets/bootstrap-material-design/scss/_buttons.scss | 233 |
1 files changed, 0 insertions, 233 deletions
diff --git a/minionlivesmatter/templates/assets/bootstrap-material-design/scss/_buttons.scss b/minionlivesmatter/templates/assets/bootstrap-material-design/scss/_buttons.scss deleted file mode 100644 index ee3defc..0000000 --- a/minionlivesmatter/templates/assets/bootstrap-material-design/scss/_buttons.scss +++ /dev/null @@ -1,233 +0,0 @@ -// specification: https://www.google.com/design/spec/components/buttons.html - -// bmd default buttons are flat by default -.btn { - position: relative; - margin-bottom: $bmd-btn-margin-bottom; // just enough room so that focus shadows aren't covered up - font-size: $bmd-btn-font-size; - text-decoration: none; - text-transform: uppercase; - letter-spacing: 0; - cursor: pointer; - background-color: transparent; - border: 0; - outline: 0; - transition: box-shadow 0.2s $bmd-animation-curve-fast-out-linear-in, background-color 0.2s $bmd-animation-curve-default, color 0.2s $bmd-animation-curve-default; - will-change: box-shadow, transform; - - @include undo-bs-tab-focus(); - - //-- - // Colors - - // flat removes bg, add color variations to text - @include bmd-flat-button-color(); - - // fab and raised - // - colored, add their text and bg - // - hover color contrasted - // - shared shadow state on hover/active/focus - &.bmd-btn-fab, - &.btn-raised, - .btn-group-raised & { - @include bmd-raised-button-color(); - - // enlarged shadow on hover, focus - @include hover-focus() { - //border: 1px solid $blue; - z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button - @include box-shadow($bmd-shadow-4dp); - } - - // :active - momentary press: big shadow, release and it is gone - // .active - persistent big shadow - &.active, - &:active { - z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button - @include box-shadow($bmd-shadow-focus); - //border: 1px solid $green; - } - } - - //--- - // btn-raised - &.btn-raised, - .btn-group-raised & { - - // baseline shadow - @include box-shadow($bmd-shadow-2dp); - - // reverse any of the above for links - &.btn-link { - box-shadow: none; - @include bmd-hover-focus-active() { - box-shadow: none; - } - } - - @include bmd-disabled() { - box-shadow: none; - } - } - - //--- - // btn-outline - @include bmd-outline-button-color(); - - // https://www.google.com/design/spec/components/buttons-floating-action-button.html - &.bmd-btn-fab, - &.bmd-btn-icon { - overflow: hidden; - font-size: $bmd-btn-fab-font-size; - line-height: normal; - - .btn-group-lg &, - .btn-group-sm &, - & { - padding: 0; // need specificity - border-radius: 50%; - } - - .material-icons { - position: absolute; - top: 50%; - left: 50%; - width: $bmd-btn-fab-font-size; - line-height: $bmd-btn-fab-font-size; - transform: translate(-($bmd-btn-fab-font-size / 2), -($bmd-btn-fab-font-size / 2)); - } - } - - &.bmd-btn-fab { - // see above for color variations - width: $bmd-btn-fab-size; - min-width: $bmd-btn-fab-size; - height: $bmd-btn-fab-size; - //margin: auto; - //margin: 2px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have. - box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light; - - .ripple-container { - border-radius: 50%; - } - - &.bmd-btn-fab-sm, - .btn-group-sm & { - width: $bmd-btn-fab-size-sm; - min-width: $bmd-btn-fab-size-sm; - height: $bmd-btn-fab-size-sm; - //margin: 1px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have. - - //.material-icons { - // top: ($bmd-btn-icon-size-sm - $bmd-btn-fab-font-size) / 2; - // left: ($bmd-btn-icon-size-sm - $bmd-btn-fab-font-size) / 2; - //} - } - } - - // Icon buttons - &.bmd-btn-icon { - width: $bmd-btn-icon-size; - min-width: $bmd-btn-icon-size; - height: $bmd-btn-icon-size; - margin: 0; - color: inherit; - - &.bmd-btn-icon-sm, - .btn-group-sm & { - width: $bmd-btn-icon-size-sm; - min-width: $bmd-btn-icon-size-sm; - height: $bmd-btn-icon-size-sm; - font-size: $bmd-btn-icon-font-size-sm; - - .material-icons { - //$position: ($bmd-btn-icon-size-sm - $bmd-btn-icon-font-size-sm) / 2; - //top: $position; - //left: $position; - width: $bmd-btn-icon-font-size-sm; - font-size: $bmd-btn-icon-font-size-sm; - line-height: 1; - transform: translate(-($bmd-btn-icon-font-size-sm / 2), -($bmd-btn-icon-font-size-sm / 2)); - } - } - } - - // Align icons inside buttons with text - .material-icons { - position: relative; - top: .25em; - margin-top: -1em; - margin-bottom: -1em; - font-size: 1.5em; - } - - // Size variations - &.btn-lg, - .btn-group-lg & { - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $bmd-btn-font-size-lg, $btn-border-radius-lg); - } - &.btn-sm, - .btn-group-sm & { - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $bmd-btn-font-size-sm, $btn-border-radius-sm); - font-size: $bmd-btn-font-size-sm; - } -} - -// Disabled buttons and button groups -.btn, -.input-group-btn .btn, -.btn-group, -.btn-group-vertical { - // have to ratchet up the specificity to kill drop shadows on disabled raised buttons - @include bmd-disabled() { - color: $bmd-btn-disabled; - .bg-inverse & { - color: $bmd-inverse-btn-disabled; - } - - // flat buttons shouldn't lose transparency on disabled hover/focus - &, - &:hover, - &:focus { - background: transparent; - } - } -} - -// btn-group variations -.btn-group, -.btn-group-vertical { - - position: relative; - margin: 10px 1px; - - // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons - //&.open { - // .dropdown-toggle { - // } - // - // > .dropdown-toggle.btn { - // @include bmd-raised-button-color-bg(); - // } - //} - - .dropdown-menu { - border-radius: 0 0 $border-radius $border-radius; - } - - &.btn-group-raised { - @include box-shadow($bmd-shadow-2dp); - } - - .btn + .btn, - .btn, - .btn:active, - .btn-group { - margin: 0; - } - - // remove margin from nested btn-group(s) to properly align them with the outer buttons - > .btn-group { - margin: 0; - } -} |