From 1ba6723fc1dc8d03cf5db4912a4ffa1da284af41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Tue, 17 Oct 2023 16:12:07 +0200 Subject: [PATCH] use css vars --- .../Resources/public/scss/_buttons.scss | 13 +++-- .../Resources/public/scss/_dropdown.scss | 12 ++-- src/bundle/Resources/public/scss/_inputs.scss | 55 ++++++++++++++----- .../Resources/public/scss/mixins/_inputs.scss | 26 --------- 4 files changed, 55 insertions(+), 51 deletions(-) diff --git a/src/bundle/Resources/public/scss/_buttons.scss b/src/bundle/Resources/public/scss/_buttons.scss index 5ef0f20e55..b2732f2aa9 100644 --- a/src/bundle/Resources/public/scss/_buttons.scss +++ b/src/bundle/Resources/public/scss/_buttons.scss @@ -124,23 +124,26 @@ } &--ghost.ibexa-btn { + --ibexa-btn-primary-color: var(--ibexa-primary-color, #{$ibexa-color-primary}); + color: $ibexa-color-dark; fill: $ibexa-color-dark; &:hover { - color: $ibexa-color-primary; + color: var(--ibexa-btn-primary-color); .ibexa-icon { - fill: $ibexa-color-primary; + fill: var(--ibexa-btn-primary-color); } } &:focus { - color: $ibexa-color-primary; - border-color: $ibexa-color-primary; + color: var(--ibexa-btn-primary-color); + border-color: var(--ibexa-btn-primary-color); + box-shadow: 0 0 0 calculateRem(3px) var(--ibexa-btn-shadow-box-primary-color); .ibexa-icon { - fill: $ibexa-color-primary; + fill: var(--ibexa-btn-primary-color); } } diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss index d226bb4dba..b9b6d44d4a 100644 --- a/src/bundle/Resources/public/scss/_dropdown.scss +++ b/src/bundle/Resources/public/scss/_dropdown.scss @@ -1,4 +1,6 @@ .ibexa-dropdown { + --ibexa-dropdown-primary-color: var(--ibexa-primary-color, #{$ibexa-color-primary}); + position: relative; font-size: $ibexa-text-font-size-medium; min-width: calculateRem(200px); @@ -298,8 +300,8 @@ &--focused { .ibexa-dropdown { &__selection-info { - border-color: $ibexa-color-primary; - box-shadow: 0 0 0 calculateRem(2px) rgba($ibexa-color-primary, 0.2); + border-color: var(--ibexa-dropdown-primary-color); + box-shadow: 0 0 0 calculateRem(2px) var(--ibexa-dropdown-shadow-box-primary-color, rgba($ibexa-color-primary, 0.2)); } } } @@ -382,11 +384,11 @@ .ibexa-dropdown { &__selection-info { &:hover { - border-color: $ibexa-color-primary; + border-color: var(--ibexa-dropdown-primary-color); &::before, &::after { - background-color: $ibexa-color-primary; + background-color: var(--ibexa-dropdown-primary-color); } } } @@ -475,7 +477,7 @@ &:hover { .ibexa-dropdown__selected-item { - color: $ibexa-color-primary; + color: var(--ibexa-primary-color); } } } diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss index d4b10e38bd..8f9f406c64 100644 --- a/src/bundle/Resources/public/scss/_inputs.scss +++ b/src/bundle/Resources/public/scss/_inputs.scss @@ -19,11 +19,27 @@ } .ibexa-input { + --ibexa-input-primary-color: var(--ibexa-primary-color, #{$ibexa-color-primary}); + outline: none; transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; border: calculateRem(1px) solid $ibexa-color-dark-300; - @include ibexa-input-hover-and-focus($ibexa-color-primary); + &:hover { + border-color: var(--ibexa-input-primary-color); + } + + &:focus, + &.ibexa-input--text.form-control:focus, + &.ibexa-input--date.form-control:focus { + border-color: var(--ibexa-input-primary-color); + box-shadow: 0 0 calculateRem(3px) 0 var(--ibexa-input-shadow-box-primary-color); + } + + &:disabled { + cursor: not-allowed; + border-color: $ibexa-color-dark-200; + } &--text, &--textarea, @@ -35,6 +51,15 @@ border-radius: $ibexa-border-radius; position: relative; + &:focus, + &.form-control:focus { + color: $ibexa-color-dark; + } + + &:hover:not(:disabled) { + border-color: var(--ibexa-input-primary-color); + } + &:active:not(:disabled) { border-color: $ibexa-color-dark; } @@ -129,12 +154,12 @@ } &:checked { - border-color: $ibexa-color-primary; - background-color: $ibexa-color-primary; + border-color: var(--ibexa-input-primary-color); + background-color: var(--ibexa-input-primary-color); &:disabled { - border-color: $ibexa-color-primary-300; - background-color: $ibexa-color-primary-300; + border-color: var(--ibexa-input-checkbox-disabled-primary-color, #{$ibexa-color-primary-300}); + background-color: var(--ibexa-input-checkbox-disabled-primary-color, #{$ibexa-color-primary-300}); } &::after { @@ -143,12 +168,12 @@ } &:indeterminate { - border-color: $ibexa-color-primary; - background-color: $ibexa-color-primary; + border-color: var(--ibexa-input-primary-color); + background-color: var(--ibexa-input-primary-color); &:disabled { - border-color: $ibexa-color-primary-300; - background-color: $ibexa-color-primary-300; + border-color: var(--ibexa-input-checkbox-disabled-primary-color, #{$ibexa-color-primary-300}); + background-color: var(--ibexa-input-checkbox-disabled-primary-color, #{$ibexa-color-primary-300}); } &::after { @@ -168,12 +193,12 @@ margin-bottom: calculateRem(2px); &:checked { - border-color: $ibexa-color-primary; - box-shadow: inset 0 0 0 calculateRem(4px) $ibexa-color-primary; + border-color: var(--ibexa-input-primary-color); + box-shadow: inset 0 0 0 calculateRem(4px) var(--ibexa-input-primary-color); &:disabled { - border-color: $ibexa-color-primary-300; - box-shadow: inset 0 0 0 calculateRem(4px) $ibexa-color-primary-300; + border-color: var(--ibexa-primary-disabled-color); + box-shadow: inset 0 0 0 calculateRem(4px) var(--ibexa-primary-disabled-color); } &:focus { @@ -187,7 +212,7 @@ height: calculateRem(16px); border-radius: calculateRem(8px); background: transparent; - box-shadow: 0 0 calculateRem(3px) 0 rgba($ibexa-color-primary, 0.75); + box-shadow: 0 0 calculateRem(3px) 0 var(--ibexa-input-shadow-box-primary-color); } } } @@ -418,7 +443,7 @@ &:hover { .ibexa-input { - border-color: $ibexa-color-primary; + border-color: var(--ibexa-input-primary-color); } } } diff --git a/src/bundle/Resources/public/scss/mixins/_inputs.scss b/src/bundle/Resources/public/scss/mixins/_inputs.scss index b8f8c295c8..c0a5b31322 100644 --- a/src/bundle/Resources/public/scss/mixins/_inputs.scss +++ b/src/bundle/Resources/public/scss/mixins/_inputs.scss @@ -41,29 +41,3 @@ flex-basis: 100%; margin: 0 0 calculateRem(10px) calculateRem(2px); } - -@mixin ibexa-input-hover-and-focus($color) { - &:hover { - border-color: $color; - } - - &:focus, - &.ibexa-input--text.form-control:focus, - &.ibexa-input--date.form-control:focus { - border-color: $color; - box-shadow: 0 0 calculateRem(3px) 0 rgba($color, 0.75); - } - - &--text, - &--textarea, - &--date { - &:focus, - &.form-control:focus { - color: $ibexa-color-dark; - } - - &:hover:not(:disabled) { - border-color: $color; - } - } -}