Skip to content

Commit

Permalink
feat(fab): update styles to match the latest design
Browse files Browse the repository at this point in the history
  • Loading branch information
@silviyaboteva @joneff
silviyaboteva authored and joneff committed Oct 12, 2021
1 parent cf1ac55 commit 31c1615
Show file tree
Hide file tree
Showing 9 changed files with 146 additions and 152 deletions.
59 changes: 29 additions & 30 deletions packages/bootstrap/scss/fab/_theme.scss
View file
@@ -1,12 +1,11 @@
@include exports( "fab/theme/bootstrap" ) {
// FAB
.k-fab {
@include box-shadow($fab-shadow);
}

// Normal state
@each $name, $color in $fab-theme-colors {
.k-fab-#{$name} {
@include box-shadow($fab-shadow);
outline: $fab-border-width solid $color;
outline-offset: -$fab-border-width;
border-color: $color;
color: contrast-wcag( $color );
background-color: $color;
Expand All @@ -25,47 +24,36 @@
}

// Focus state
.k-fab.k-state-focus,
.k-fab.k-state-focused,
.k-fab:focus {
@include box-shadow($fab-focus-shadow);
@each $name, $color in $fab-theme-colors {
.k-fab-#{$name}.k-state-focus,
.k-fab-#{$name}.k-state-focused,
.k-fab-#{$name}:focus {
outline-style: solid;
outline-width: 3px;
outline-color: rgba( $color, .5 );
}
}

// Active state
@each $name, $color in $fab-theme-colors {
.k-state-active.k-fab-#{$name},
.k-state-selected.k-fab-#{$name},
.k-fab-#{$name}:active {
@include box-shadow($fab-active-shadow);
border-color: try-darken( $color, 12.5% );
color: contrast-wcag( try-darken( $color, 10% ) );
background-color: try-darken( $color, 10% );
}
}

// Disabled state
.k-fab.k-state-disabled,
.k-fab:disabled {
@include box-shadow($fab-disabled-shadow);
opacity: 1;
}

@each $name, $color in $fab-theme-colors {
.k-state-disabled.k-fab-#{$name},
.k-fab-#{$name}:disabled {
background-color: tint( $color, 5 );
}
}

// Disabled + Focus state
.k-fab-item:focus,
.k-fab-item.k-state-focus,
.k-fab-item.k-state-focused {
&:disabled,
&.k-state-disabled {
.k-fab-item-text,
.k-fab-item-icon {
@include box-shadow($fab-item-disabled-focus-shadow);
}
@include box-shadow($fab-disabled-shadow);
background-color: try-tint( $color, 4.5 );
color: try-tint( contrast-wcag( $color ), 5 );
opacity: 1;
}
}

Expand All @@ -85,12 +73,17 @@
$fab-item-icon-border
);
@include box-shadow($fab-item-shadow);
outline: $fab-border-width solid $button-bg;
outline-offset: -$fab-border-width;
}

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

// Active state
.k-fab-item.k-state-active .k-fab-item-icon,
.k-fab-item:active .k-fab-item-icon {
@include box-shadow($fab-item-active-shadow);
outline: $fab-border-width solid try-darken( $fab-item-icon-border, 12.5% );
outline-offset: -$fab-border-width;
border-color: try-darken( $fab-item-icon-border, 12.5% );
color: contrast-wcag( try-darken( $fab-item-icon-bg, 10% ) );
background-color: try-darken( $fab-item-icon-bg, 10% );
Expand All @@ -121,8 +119,9 @@

.k-fab-item-text,
.k-fab-item-icon {
color: tint( $fab-item-text, 8 );
@include box-shadow($fab-item-disabled-shadow);
background-color: try-tint( $fab-item-bg, 8 );
color: try-tint( $fab-item-text, 8 );
}
}

Expand Down
31 changes: 16 additions & 15 deletions packages/bootstrap/scss/fab/_variables.scss
View file
@@ -1,11 +1,11 @@
// Floating Action Button
$fab-padding-x: $padding-x !default;
$fab-padding-y: $fab-padding-x !default;
$fab-border-width: 0px !default;
$fab-border-radius: $border-radius !default;
$fab-border-width: 1px !default;
$fab-border-radius: $border-radius / 2 !default;
$fab-font-family: $font-family !default;
$fab-font-size: $font-size !default;
$fab-line-height: (20 / 16) !default;
$fab-line-height: $line-height !default;

$fab-padding-x-sm: ( $fab-padding-x / 2 ) !default;
$fab-padding-y-sm: ( $fab-padding-y / 2 ) !default;
Expand All @@ -16,24 +16,26 @@ $fab-padding-y-md: $fab-padding-y !default;
$fab-padding-x-lg: ( $fab-padding-x * 1.5 ) !default;
$fab-padding-y-lg: ( $fab-padding-y * 1.5 ) !default;

$fab-icon-width: 20px !default;
$fab-icon-width: 24px !default;
$fab-icon-height: $fab-icon-width !default;
$fab-icon-spacing: map-get( $spacing, 1 ) !default;
$fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;

$fab-items-padding-x: 0px !default;
$fab-items-padding-y: map-get( $spacing, 4 ) !default;

$fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
$fab-item-text-padding-y: $fab-item-text-padding-x !default;
$fab-item-text-border-width: 1px !default;
$fab-item-text-border-radius: 2px !default;
$fab-item-text-border-radius: 4px !default;
$fab-item-text-font-size: $font-size-xs !default;
$fab-item-text-line-height: 1 !default;
$fab-item-text-line-height: 14px !default;

$fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
$fab-item-icon-padding-y: $fab-item-icon-padding-x !default;
$fab-item-icon-border-width: 0 !default;
$fab-item-icon-border-radius: 50% !default;
$fab-item-icon-width: 24px !default;
$fab-item-icon-height: $fab-item-icon-width !default;

$fab-sizes: (
sm: map-get( $spacing, 4 ),
Expand All @@ -43,22 +45,21 @@ $fab-sizes: (

$fab-theme-colors: $theme-colors !default;

$fab-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2) !default;
$fab-focus-shadow: 0 1px 10px rgba(#000000, .22), 0 4px 5px rgba(#000000, .24), 0 2px 4px rgba(#000000, .2) !default;
$fab-disabled-shadow: 0 6px 10px rgba(0, 0, 0, .06), 0 1px 18px rgba(0, 0, 0, .06), 0 3px 5px rgba(0, 0, 0, .08) !default;
$fab-shadow: 0px 6px 10px rgba(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12), 0px 3px 5px rgba(0, 0, 0, .2) !default;
$fab-disabled-shadow: 0px 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0px 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0px 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
$fab-active-shadow: null !default;

$fab-item-text: $component-text !default;
$fab-item-bg: $component-bg !default;
$fab-item-border: $component-border !default;

$fab-item-icon-text: contrast-wcag( $light ) !default;
$fab-item-icon-bg: $light !default;
$fab-item-icon-border: $light !default;
$fab-item-icon-text: $button-text !default;
$fab-item-icon-bg: $button-bg !default;
$fab-item-icon-border: $button-border !default;

$fab-item-shadow: $fab-shadow !default;
$fab-item-focus-shadow: $fab-focus-shadow !default;
$fab-item-disabled-shadow: $fab-disabled-shadow !default;
$fab-item-disabled-focus-shadow: 0 1px 10px rgba(#000000, .12), 0 4px 5px rgba(#000000, .12), 0 2px 4px rgba(#000000, .08) !default;
$fab-item-active-shadow: $fab-active-shadow !default;

$fab-border-width-sm: $fab-border-width !default;
$fab-line-height-sm: $fab-line-height !default;
Expand Down
26 changes: 13 additions & 13 deletions packages/classic/scss/fab/_variables.scss
View file
@@ -1,11 +1,11 @@
// Floating Action Button
$fab-padding-x: $padding-x !default;
$fab-padding-x: map-get( $spacing, 4 ) !default;
$fab-padding-y: $fab-padding-x !default;
$fab-border-width: 0px !default;
$fab-border-width: 1px !default;
$fab-border-radius: $border-radius !default;
$fab-font-family: $font-family !default;
$fab-font-size: $font-size !default;
$fab-line-height: $line-height-xs !default;
$fab-line-height: $line-height !default;

$fab-padding-x-sm: ( $fab-padding-x / 2 ) !default;
$fab-padding-y-sm: ( $fab-padding-y / 2 ) !default;
Expand All @@ -18,7 +18,7 @@ $fab-padding-y-lg: ( $fab-padding-y * 1.5 ) !default;

$fab-icon-width: 20px !default;
$fab-icon-height: $fab-icon-width !default;
$fab-icon-spacing: map-get( $spacing, 1 ) !default;
$fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;

$fab-items-padding-x: 0px !default;
$fab-items-padding-y: map-get( $spacing, 4 ) !default;
Expand All @@ -28,12 +28,14 @@ $fab-item-text-padding-y: $fab-item-text-padding-x !default;
$fab-item-text-border-width: 1px !default;
$fab-item-text-border-radius: 2px !default;
$fab-item-text-font-size: $font-size-xs !default;
$fab-item-text-line-height: 1 !default;
$fab-item-text-line-height: 1.2 !default;

$fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
$fab-item-icon-padding-y: $fab-item-icon-padding-x !default;
$fab-item-icon-border-width: 0 !default;
$fab-item-icon-border-radius: 50% !default;
$fab-item-icon-width: 20px !default;
$fab-item-icon-height: $fab-item-icon-width !default;

$fab-sizes: (
sm: map-get( $spacing, 4 ),
Expand All @@ -44,22 +46,20 @@ $fab-sizes: (
$fab-theme-colors: $theme-colors !default;

$fab-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2) !default;
$fab-focus-shadow: 0 1px 10px rgba(#000000, .22), 0 4px 5px rgba(#000000, .24), 0 2px 4px rgba(#000000, .2) !default;
$fab-disabled-shadow: 0 6px 10px rgba(0, 0, 0, .06), 0 1px 18px rgba(0, 0, 0, .06), 0 3px 5px rgba(0, 0, 0, .08) !default;
$fab-disabled-shadow: 0 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
$fab-active-shadow: null !default;

$fab-item-text: $component-text !default;
$fab-item-bg: $component-bg !default;
$fab-item-border: $component-border !default;

$fab-item-icon-text: contrast-wcag( $light ) !default;
$fab-item-icon-bg: $light !default;
$fab-item-icon-border: $light !default;
$fab-item-icon-gradient: null !default;
$fab-item-icon-text: $button-text !default;
$fab-item-icon-bg: $button-bg !default;
$fab-item-icon-border: $button-border !default;

$fab-item-shadow: $fab-shadow !default;
$fab-item-focus-shadow: $fab-focus-shadow !default;
$fab-item-disabled-shadow: $fab-disabled-shadow !default;
$fab-item-disabled-focus-shadow: 0 1px 10px rgba(#000000, .12), 0 4px 5px rgba(#000000, .12), 0 2px 4px rgba(#000000, .08) !default;
$fab-item-active-shadow: $fab-active-shadow !default;

$fab-border-width-sm: $fab-border-width !default;
$fab-line-height-sm: $fab-line-height !default;
Expand Down
2 changes: 2 additions & 0 deletions packages/default/scss/fab/_layout.scss
View file
Expand Up @@ -149,6 +149,8 @@
}

.k-fab-item-icon {
width: $fab-item-icon-width;
height: $fab-item-icon-height;
padding: $fab-item-icon-padding-y $fab-item-icon-padding-x;
border-width: $fab-item-icon-border-width;
border-radius: $fab-item-icon-border-radius;
Expand Down

0 comments on commit 31c1615

Please sign in to comment.