diff options
Diffstat (limited to 'scss/_buttons.scss')
-rwxr-xr-x | scss/_buttons.scss | 181 |
1 files changed, 0 insertions, 181 deletions
diff --git a/scss/_buttons.scss b/scss/_buttons.scss deleted file mode 100755 index 54abe6b..0000000 --- a/scss/_buttons.scss +++ /dev/null @@ -1,181 +0,0 @@ -// stylelint-disable selector-no-qualifying-type - -// -// Base styles -// - -.btn { - display: inline-block; - font-weight: $btn-font-weight; - text-align: center; - white-space: nowrap; - vertical-align: middle; - user-select: none; - border: $btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius); - @include transition($btn-transition); - - // Share hover and focus styles - @include hover-focus { - text-decoration: none; - } - - &:focus, - &.focus { - outline: 0; - box-shadow: $btn-focus-box-shadow; - } - - // Disabled comes first so active can properly restyle - &.disabled, - &:disabled { - opacity: $btn-disabled-opacity; - @include box-shadow(none); - } - - // Opinionated: add "hand" cursor to non-disabled .btn elements - &:not(:disabled):not(.disabled) { - cursor: pointer; - } - - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active { - background-image: none; - @include box-shadow($btn-active-box-shadow); - - &:focus { - @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); - } - } -} - -// Future-proof disabling of clicks on `<a>` elements -a.btn.disabled, -fieldset:disabled a.btn { - pointer-events: none; -} - - -// -// Alternate buttons -// - -@each $color, $value in $theme-colors { - .btn-#{$color} { - @include button-variant($value, $value); - } -} - -@each $color, $value in $theme-colors { - .btn-outline-#{$color} { - @include button-outline-variant($value); - } -} - - -// -// Link buttons -// - -// Make a button look and behave like a link -.btn-link { - font-weight: $font-weight-normal; - color: $link-color; - background-color: transparent; - - @include hover { - color: $link-hover-color; - text-decoration: $link-hover-decoration; - background-color: transparent; - border-color: transparent; - } - - &:focus, - &.focus { - text-decoration: $link-hover-decoration; - border-color: transparent; - box-shadow: none; - } - - &:disabled, - &.disabled { - color: $btn-link-disabled-color; - } - - // No need for an active state here -} - - -// -// Button Sizes -// - -.btn-lg { - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); -} - -.btn-sm { - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); -} - - -// -// Block button -// - -.btn-block { - display: block; - width: 100%; - - // Vertically space out multiple block buttons - + .btn-block { - margin-top: $btn-block-spacing-y; - } -} - -// Specificity overrides -input[type="submit"], -input[type="reset"], -input[type="button"] { - &.btn-block { - width: 100%; - } -} - -.navbar-light{ - - background-color: #fff; - box-shadow: 0 3px 10px #0000001a; - - .btn-facebook{ - color: #3b5998 !important; - } - - .btn-instagram{ - color: #fd5d58 !important; - } - .btn-linkedin{ - color: #0077b5 !important; - } - .btn-twitter{ - color: #1da1f3 !important; - } - .btn-snapchat{ - color: #000 !important; - } - .btn-google-plus{ - color: #dd483c !important; - } - .btn-google{ - color: #4c8cf6 !important; - } - .btn-dribbble{ - color: #eb4c88 !important; - } - .btn-youtube{ - color: #dd483c !important; - } - .btn-behance{ - color: #1669ff !important; - } -} |