File manager - Edit - /home/aissorg/public_html/fonts/qzfcvsedcv/werwcwsfs/_buttons.scss.tar
Back
home/aissorg/public_html/scss/bootstrap/_buttons.scss 0000644 00000005451 15116240650 0017174 0 ustar 00 // 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%; } } home/aissorg/public_html/scss/custom-styles/components/_buttons.scss 0000644 00000013610 15116256124 0022176 0 ustar 00 /* * * Buttons */ // Button General Styles .button { position: relative; overflow: hidden; display: inline-block; @include btn-size($input-btn-padding-y, $input-btn-padding-x, $input-btn-font-size, $input-btn-line-height); border: 2px solid; border-radius: $btn-border-radius; font-family: $btn-font-family; font-weight: $btn-font-weight; letter-spacing: $btn-letter-spacing; text-transform: $btn-text-transform; white-space: nowrap; text-overflow: ellipsis; text-align: center; cursor: pointer; vertical-align: middle; user-select: none; transition: 0.25s cubic-bezier(0.2, 1, 0.3, 1); } .button-block { display: block; width: 100%; } // // Appearance style // .button-default { @include btn-variant($gray-300, $gray-700, $gray-700, $white, $primary, $primary); } .button.button-primary { @include btn-variant($white, $primary, $primary, $white, $primary-darken, $primary-darken); } html .button.button-primary-lighten { @include btn-variant($white, $primary, $primary, $white, $primary-lighten, $primary-lighten); } // Outline .button-primary-outline { @include btn-variant($gray-700, transparent, $primary, $white, $primary, $primary); } // Social .button.button-facebook { @include btn-variant($white, $facebook, $facebook, $white, lighten($facebook, 5%), lighten($facebook, 5%)); } .button.button-twitter { @include btn-variant($white, $twitter, $twitter, $white, lighten($twitter, 5%), lighten($twitter, 5%)); } .button.button-google { @include btn-variant($white, $google, $google, $white, lighten($google, 5%), lighten($google, 5%)); } // // Button effects // .button-winona { position: relative; overflow: hidden; display: inline-block; vertical-align: middle; text-align: center; .content-original, .content-dubbed { vertical-align: middle; transition: transform 0.35s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.35s cubic-bezier(0.2, 1, 0.3, 1); } .content-original { display: block; } .content-dubbed { position: absolute; width: 100%; top: 50%; left: 0; opacity: 0; transform: translate3d(0, 0, 0); } &:hover { .content-original { opacity: 0; transform: translate3d(0, -30%, 0); } .content-dubbed { opacity: 1; transform: translate3d(0, 0, 0) translateY(-50%); } } } // // Button Sizes // .button-sm { @include btn-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, 12px, $input-btn-line-height-sm); } .button-lg { @include btn-size($input-btn-padding-y-lg, 35px, 15px, $input-btn-line-height-lg); @include media-breakpoint-up(sm) { font-size: 16px; padding-left: $input-btn-padding-x-lg; padding-right: $input-btn-padding-x-lg; } } .button-lg--smaller { padding-left: 35px; padding-right: 35px; } // // Button Icon styles // html .button.button-icon { display: inline-flex; } .button-icon { justify-content: center; align-items: center; vertical-align: middle; .icon { position: relative; top: -1px; display: inline-block; vertical-align: middle; color: inherit; font-size: 1.55em; line-height: 1em; transition: none; } &:hover,&:active { .icon { color: inherit; &:before{ color: inherit; } } } &-left { .icon { padding-right: 5px; } } &-right { flex-direction: row-reverse; .icon { padding-left: 8px; } } &.button-icon-only { padding-left: 20px; padding-right: 20px; } &.button-lg { .icon { padding-right: 8px; } &.button-icon-right { .icon { padding: 0 0 0 8px; } } } &.button-sm { .icon { padding-right: 3px; font-size: 1.33em; } &.button-icon-right { .icon { padding: 0 0 0 3px; } } } } // // Bootstrap buttons // .btn-primary { border-radius: 3px; font-family: $btn-font-family; font-weight: $btn-font-weight; letter-spacing: .05em; text-transform: uppercase; transition: .33s; &, &:active, &:focus { color: $white; background: $primary; border-color: $primary; } &:hover { color: $white; background: $black; border-color: $black; } } // // Button Group // .button-group { display: flex; .button { margin: 0; flex-grow: 1; } .button:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .button:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } } // // Custom types // .button-video { position: relative; display: block; border-radius: 50%; transition: .33s; color: $gray-700; &::before, &:after { display: block; content: '\f4fc'; font-family: 'Material Design Icons'; font-size: 64px; line-height: 1; border-radius: 50%; } &::before { z-index: -1; pointer-events: none; } &::after { position: absolute; width: 100%; top: 50%; left: 0; opacity: 0; transform: translate3d(0, -50%, 0); transition: opacity 0.3s cubic-bezier(0.2, 1, 0.3, 1); } &:hover { color: $primary; } &:hover { &::before { opacity: 0; transition: transform 0.9s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 1, 0.3, 1); transform: scale3d(1.5, 1.5, 1.5); } &::after { opacity: 1; } } } .button-video-lg { &::before, &:after { font-size: 90px; } } %context-dark { .button-video { color: $white; } } .btn-lg{ padding: 19px 14px; min-width: 316px; display: inline-flex; justify-content: center; align-self: center; line-height: 1; .box-cta-medium &{ min-width: 297px; } } .btn-md{ padding: 15px 14px; min-width: 221px; display: inline-flex; justify-content: center; align-self: center; line-height: 1; } .btn-md-1{ padding: 15px 14px; min-width: 196px; display: inline-flex; justify-content: center; align-self: center; line-height: 1; } home/aissorg/public_html/scss/bootstrap/mixins/_buttons.scss 0000644 00000006333 15116264733 0020513 0 ustar 00 // Button variants // // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) { color: color-yiq($background); @include gradient-bg($background); border-color: $border; @include box-shadow($btn-box-shadow); @include hover { color: color-yiq($hover-background); @include gradient-bg($hover-background); border-color: $hover-border; } &:focus, &.focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); } @else { box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); } } // Disabled comes first so active can properly restyle &.disabled, &:disabled { color: color-yiq($background); background-color: $background; border-color: $border; } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { color: color-yiq($active-background); background-color: $active-background; @if $enable-gradients { background-image: none; // Remove the gradient for the pressed/active state } border-color: $active-border; &:focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); } @else { box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); } } } } @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { color: $color; background-color: transparent; background-image: none; border-color: $color; &:hover { color: $color-hover; background-color: $active-background; border-color: $active-border; } &:focus, &.focus { box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); } &.disabled, &:disabled { color: $color; background-color: transparent; } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { color: color-yiq($active-background); background-color: $active-background; border-color: $active-border; &:focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows and $btn-active-box-shadow != none { box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5); } @else { box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); } } } } // Button sizes @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { padding: $padding-y $padding-x; font-size: $font-size; line-height: $line-height; // Manually declare to provide an override to the browser default @if $enable-rounded { border-radius: $border-radius; } @else { border-radius: 0; } } home/aissorg/public_html/scss/custom-styles/mixins/_buttons.scss 0000644 00000001413 15116265354 0021323 0 ustar 00 // Custom button variants @mixin btn-variant($clr, $bg, $bd, $clr-hover, $bg-hover, $bd-hover) { &, &:focus { color: $clr; background-color: $bg; border-color: $bd; } &:hover, &:active { color: $clr-hover; background-color: $bg-hover; border-color: $bd-hover; } } // Button sizes @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $line-height) { padding: $padding-vertical $padding-horizontal; font-size: $font-size; line-height: $line-height; } // Reset Button @mixin reset-button() { background: none; border: none; display: inline-block; padding: 0; outline: none; outline-offset: 0; cursor: pointer; -webkit-appearance: none; &::-moz-focus-inner { border: none; padding: 0; } }
| ver. 1.4 |
Github
|
.
| PHP 8.0.30 | Generation time: 0.02 |
proxy
|
phpinfo
|
Settings