@axa-fr/react-toolkit-button
Version:
### Get started
1 lines • 11.7 kB
Source Map (JSON)
{"version":3,"sources":["button.scss"],"names":[],"mappings":"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","file":"af-button.css","sourcesContent":["@import \"theme\";\n@import \"bootstrap/scss/mixins\";\n\n@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';\n\n$active-sort-table-th: $color-table-sorting !default;\n\n@mixin hasIcon($direction) {\n @if $direction == 'left' {\n padding-left: 3rem;\n\n .glyphicon {\n left: 1rem;\n }\n } @else {\n padding-right: 3rem;\n\n .glyphicon {\n right: 1rem;\n }\n }\n}\n\n.af-btn {\n font-family: $font-family-base;\n background-color: $color-azur;\n color: $table-inverse-color;\n border: 0;\n border-radius: 0;\n min-width: 10rem;\n cursor: pointer;\n font-weight: 100;\n position: relative;\n font-size: 1em;\n padding: 0.8rem 1.2rem 0.8rem 1.2rem;\n box-shadow: inset 0 -3px $color-axa;\n transition: all 0.2s linear;\n\n &:hover,\n &:focus {\n color: $white;\n background-color: $color-axa;\n }\n\n &:focus {\n box-shadow: 0 0 3px 3px $color-azur-focused;\n }\n @include generate-universes() {\n background-color: $color;\n color: $white;\n border-radius: 0;\n min-width: 10rem;\n cursor: pointer;\n font-size: 1em;\n box-shadow: inset 0 -3px darken($color, 20%);\n transition: all 0.2s linear;\n\n &:hover {\n box-shadow: inset 0 -3px darken($color, 20%);\n background-color: darken($color, 20%);\n }\n }\n\n &--hasiconLeft {\n @include hasIcon('left');\n }\n\n &--hasiconRight {\n @include hasIcon('right');\n }\n\n &--disabled {\n cursor: not-allowed;\n background-color: $color-mercury;\n box-shadow: inset 0 -3px $color-silver;\n color: $color-btn-disabled;\n\n &:hover,\n &:focus {\n background-color: $color-mercury;\n box-shadow: inset 0 -3px $color-silver;\n color: $color-btn-disabled;\n border-color: transparent;\n }\n }\n\n &--success {\n background-color: $color-btn-success;\n box-shadow: inset 0 -3px $color-btn-success-dark;\n\n &:hover {\n background-color: $color-btn-success;\n box-shadow: inset 0 -3px $color-btn-success;\n }\n\n &:focus {\n background-color: $color-btn-success;\n box-shadow: 0 0 3px 3px $color-btn-success-focused;\n }\n }\n\n &--danger {\n background-color: $color-btn-danger;\n box-shadow: inset 0 -3px $color-btn-danger-dark;\n\n &:hover {\n background-color: $color-btn-danger;\n box-shadow: inset 0 -3px $color-btn-danger;\n }\n\n &:focus {\n background-color: $color-btn-danger;\n box-shadow: 0 0 3px 3px $color-btn-danger-focused;\n }\n }\n\n &--reverse {\n color: $color-azur;\n background-color: $table-inverse-color;\n box-shadow: inset 0 -3px $color-azur;\n border: 2px solid $color-azur;\n border-bottom: none;\n padding: 0.625rem 0.3125rem 0.8125rem 0.3125rem;\n\n &:hover,\n &:focus {\n color: $white;\n background-color: $color-axa;\n box-shadow: inset 0 -3px $color-axa;\n border-color: $color-axa;\n }\n\n &:focus {\n box-shadow: 0 0 3px 3px $color-azur-focused;\n }\n }\n\n &--reverse.af-btn--disabled {\n cursor: not-allowed;\n background-color: $white;\n box-shadow: inset 0 -3px $color-silver;\n color: $color-btn-disabled;\n border-color: $color-silver;\n border-bottom: none;\n }\n\n &--reverse.af-btn--hasiconLeft {\n @include hasIcon('left');\n\n padding-right: 1.2rem;\n }\n\n &--reverse.af-btn--hasiconRight {\n @include hasIcon('right');\n\n padding-left: 1.2rem;\n }\n\n &--small {\n padding: 0.625rem 0.3125rem;\n min-width: 3rem;\n }\n\n &--circle {\n display: inline-block;\n width: 2.5rem;\n height: 2.5rem;\n padding: 0;\n border: 1px solid $white;\n background: $color-azur;\n border-radius: 50%;\n text-align: center;\n color: $white;\n box-sizing: border-box;\n position: relative;\n\n &:hover {\n background-color: $white;\n color: $brand-primary;\n border-color: $brand-primary;\n }\n\n &:focus {\n color: $white;\n outline: none;\n\n &:hover {\n color: $brand-primary;\n }\n }\n\n .glyphicon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n\n &--circle-small {\n @extend .af-btn--circle;\n\n width: 1.5rem;\n height: 1.5rem;\n font-size: 0.625rem;\n cursor: pointer;\n\n .af-more-help {\n font-weight: 900;\n }\n }\n\n &__wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n }\n\n &--circle-reverse {\n background: $white;\n border-color: $brand-primary;\n color: $brand-primary;\n\n &:focus {\n color: $brand-primary;\n box-shadow: $btn-focus-box-shadow;\n outline: none;\n\n &:hover {\n color: $white;\n }\n }\n\n &:hover {\n background: $brand-primary;\n color: $white;\n }\n }\n\n &--circle-menu {\n @include media-breakpoint-down(sm) {\n height: $menu-button-size;\n width: $menu-button-size;\n line-height: $menu-button-size;\n color: $white;\n border-color: $white;\n background: transparent;\n\n &:hover {\n color: $brand-primary;\n background: $white;\n }\n }\n }\n\n &--table-sorting {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n font-weight: 200;\n text-align: inherit;\n justify-content: space-between;\n cursor: pointer;\n color: inherit;\n padding: 0.881em 1rem 0.881em 1rem;\n box-shadow: inherit;\n\n &:focus,\n &:hover {\n box-shadow: none;\n }\n\n &:hover {\n background-color: $color-table-sorting;\n }\n\n &--active {\n background: $active-sort-table-th;\n\n &:focus {\n background-color: $active-sort-table-th;\n }\n }\n }\n\n .glyphicon {\n position: absolute;\n top: 50%;\n transform: translate(0, -50%);\n }\n\n .af-badge {\n margin-left: 2rem;\n }\n}\n\n.af-more-help {\n font: italic normal 0.9375rem/16px $font-family-sans-serif;\n cursor: pointer;\n}\n"]}