Skip to content

Commit

Permalink
feat(fab): extract outline variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@epetrow @Juveniel
epetrow authored and Juveniel committed Mar 28, 2023
1 parent 1a99f9c commit cd2dac4
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 15 deletions.
14 changes: 7 additions & 7 deletions packages/bootstrap/scss/fab/_theme.scss
View file
Expand Up @@ -4,7 +4,7 @@
@each $name, $color in $kendo-fab-theme-colors {
.k-fab-solid-#{$name} {
@include box-shadow( $kendo-fab-shadow );
outline: $kendo-fab-border-width solid $color;
outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
outline-offset: -$kendo-fab-border-width;
border-color: $color;
color: k-contrast-color( $color );
Expand All @@ -26,8 +26,8 @@
@each $name, $color in $kendo-fab-theme-colors {
.k-fab-solid-#{$name}:focus,
.k-fab-solid-#{$name}.k-focus {
outline-style: solid;
outline-width: 3px;
outline-style: $kendo-fab-outline-style;
outline-width: $kendo-fab-outline-width;
outline-color: rgba( $color, .5 );
}
}
Expand Down Expand Up @@ -71,15 +71,15 @@
$kendo-fab-item-icon-border
);
@include box-shadow( $kendo-fab-item-shadow );
outline: $kendo-fab-border-width solid $kendo-button-bg;
outline: $kendo-fab-border-width $kendo-fab-item-outline-style $kendo-fab-item-outline-color;
outline-offset: -$kendo-fab-border-width;
}

// Hover state
.k-fab-item:hover .k-fab-item-icon,
.k-fab-item.k-hover .k-fab-item-icon {
@include box-shadow( $kendo-fab-item-shadow );
outline: $kendo-fab-border-width solid k-color-darken( $kendo-fab-item-icon-border, 10% );
outline: $kendo-fab-border-width $kendo-fab-item-outline-style k-try-darken( $kendo-fab-item-icon-border, 10% );
outline-offset: -$kendo-fab-border-width;
border-color: k-color-darken( $kendo-fab-item-icon-border, 10% );
color: k-contrast-color( k-color-darken( $kendo-fab-item-icon-bg, 7.5% ) );
Expand All @@ -91,8 +91,8 @@
.k-fab-item.k-focus .k-fab-item-text,
.k-fab-item:focus .k-fab-item-icon,
.k-fab-item.k-focus .k-fab-item-icon {
outline-style: solid;
outline-width: 3px;
outline-style: $kendo-fab-item-outline-style;
outline-width: $kendo-fab-item-outline-width;
outline-color: rgba( $kendo-fab-item-icon-border, .5 );
}

Expand Down
15 changes: 15 additions & 0 deletions packages/bootstrap/scss/fab/_variables.scss
View file
Expand Up @@ -98,6 +98,12 @@ $kendo-fab-disabled-shadow: 0px 6px 10px k-try-tint( rgba( black, .14 ), .5 ), 0
/// The active shadow of the FAB.
/// @group floating-action-button
$kendo-fab-active-shadow: null !default;
/// The outline style of the FAB.
/// @group floating-action-button
$kendo-fab-outline-style: solid !default;
/// The outline width of the FAB.
/// @group floating-action-button
$kendo-fab-outline-width: 3px !default;

/// The base text color of the FAB item.
/// @group floating-action-button
Expand Down Expand Up @@ -128,3 +134,12 @@ $kendo-fab-item-disabled-shadow: $kendo-fab-disabled-shadow !default;
/// The active shadow of the FAB item.
/// @group floating-action-button
$kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
/// The outline style of the FAB item.
/// @group floating-action-button
$kendo-fab-item-outline-style: solid !default;
/// The outline width of the FAB item.
/// @group floating-action-button
$kendo-fab-item-outline-width: 3px !default;
/// The outline color of the FAB item.
/// @group floating-action-button
$kendo-fab-item-outline-color: $kendo-button-bg !default;
16 changes: 16 additions & 0 deletions packages/classic/scss/fab/_variables.scss
View file
Expand Up @@ -99,6 +99,13 @@ $kendo-fab-disabled-shadow: 0 6px 10px k-try-tint( rgba( black, .14 ), .5 ), 0 1
/// The active shadow of the FAB.
/// @group floating-action-button
$kendo-fab-active-shadow: null !default;
/// The outline style of the FAB.
/// @group floating-action-button
$kendo-fab-outline-style: solid !default;
/// The outline width of the FAB.
/// @group floating-action-button
$kendo-fab-outline-width: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero


/// The base text color of the FAB item.
/// @group floating-action-button
Expand Down Expand Up @@ -129,3 +136,12 @@ $kendo-fab-item-disabled-shadow: $kendo-fab-disabled-shadow !default;
/// The active shadow of the FAB item.
/// @group floating-action-button
$kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
/// The outline style of the FAB item.
/// @group floating-action-button
$kendo-fab-item-outline-style: solid !default;
/// The outline width of the FAB item.
/// @group floating-action-button
$kendo-fab-item-outline-width: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
/// The outline color of the FAB item.
/// @group floating-action-button
$kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
12 changes: 4 additions & 8 deletions packages/default/scss/fab/_theme.scss
View file
Expand Up @@ -4,7 +4,7 @@
@each $name, $color in $kendo-fab-theme-colors {
.k-fab-solid-#{$name} {
@include box-shadow($kendo-fab-shadow);
outline: $kendo-fab-border-width solid $color;
outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
outline-offset: -$kendo-fab-border-width;
border-color: $color;
color: k-contrast-legacy( $color );
Expand All @@ -28,9 +28,7 @@
@if $kendo-enable-focus-contrast {
@include box-shadow( inset 0 0 0 2px currentColor );
} @else {
outline-style: solid;
outline-width: 2px;
outline-color: rgba( $color, .3 );
outline: $kendo-fab-outline-style $kendo-fab-outline-width rgba( $color, .3 );
}
}
}
Expand Down Expand Up @@ -74,7 +72,7 @@
$kendo-fab-item-icon-border
);
@include box-shadow($kendo-fab-item-shadow);
outline: $kendo-fab-border-width solid rgba(0, 0, 0, .08);
outline: $kendo-fab-border-width $kendo-fab-item-outline-style $kendo-fab-item-outline-color;
outline-offset: -$kendo-fab-border-width;
}

Expand All @@ -93,9 +91,7 @@
@if $kendo-enable-focus-contrast {
@include box-shadow( inset 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) );
} @else {
outline-style: solid;
outline-width: 2px;
outline-color: rgba(0, 0, 0, .08);
outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color;
}
}

Expand Down
15 changes: 15 additions & 0 deletions packages/default/scss/fab/_variables.scss
View file
Expand Up @@ -99,6 +99,12 @@ $kendo-fab-disabled-shadow: 0 6px 10px k-try-tint( rgba(0, 0, 0, .14), .5 ), 0 1
/// The active shadow of the FAB.
/// @group floating-action-button
$kendo-fab-active-shadow: null !default;
/// The outline style of the FAB.
/// @group floating-action-button
$kendo-fab-outline-style: solid !default;
/// The outline width of the FAB.
/// @group floating-action-button
$kendo-fab-outline-width: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero

/// The base text color of the FAB item.
/// @group floating-action-button
Expand Down Expand Up @@ -129,3 +135,12 @@ $kendo-fab-item-disabled-shadow: $kendo-fab-disabled-shadow !default;
/// The active shadow of the FAB item.
/// @group floating-action-button
$kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
/// The outline style of the FAB item.
/// @group floating-action-button
$kendo-fab-item-outline-style: solid !default;
/// The outline width of the FAB item.
/// @group floating-action-button
$kendo-fab-item-outline-width: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
/// The outline color of the FAB item.
/// @group floating-action-button
$kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;

0 comments on commit cd2dac4

Please sign in to comment.