@progress/kendo-theme-default 5.0.0-beta.2 → 5.0.0-beta.3

package/scss/fab/_layout.scss

@@ -9,9 +9,9 @@
         box-sizing: border-box;
         color: inherit;
         background-color: transparent;
-        font-size: $fab-font-size;
-        line-height: $fab-line-height;
-        font-family: $fab-font-family;
+        font-size: $kendo-fab-font-size;
+        line-height: $kendo-fab-line-height;
+        font-family: $kendo-fab-font-family;
         text-align: center;
         white-space: nowrap;
         display: inline-flex;
@@ -30,73 +30,39 @@
 
     // FAB Icon
     .k-fab-icon {
-        width: $fab-icon-width;
-        height: $fab-icon-height;
+        width: $kendo-fab-icon-width;
+        height: $kendo-fab-icon-height;
 
         &:not(:only-child) {
-            margin-right: $fab-icon-spacing;
-            margin-left: -$fab-icon-spacing;
+            margin-right: $kendo-fab-icon-spacing;
+            margin-left: -$kendo-fab-icon-spacing;
         }
     }
 
 
     // Sizes
     .k-fab-sm {
-        padding: $fab-padding-y-sm $fab-padding-x-sm;
+        padding: $kendo-fab-padding-y-sm $kendo-fab-padding-x-sm;
     }
     .k-fab-md {
-        padding: $fab-padding-y $fab-padding-x;
+        padding: $kendo-fab-padding-y $kendo-fab-padding-x;
     }
     .k-fab-lg {
-        padding: $fab-padding-y-lg $fab-padding-x-lg;
+        padding: $kendo-fab-padding-y-lg $kendo-fab-padding-x-lg;
     }
 
-
     // Shapes
-    .k-fab-square {
-        border-radius: 0;
-
-        &.k-fab-sm {
-            width: $fab-size-sm;
-            height: $fab-size-sm;
-        }
-        &.k-fab-md {
-            width: $fab-size-md;
-            height: $fab-size-md;
-        }
-        &.k-fab-lg {
-            width: $fab-size-lg;
-            height: $fab-size-lg;
-        }
-    }
-    .k-fab-circle {
-        border-radius: 50%;
+    .k-fab-rectangle { }
 
-        &.k-fab-sm {
-            width: $fab-size-sm;
-            height: $fab-size-sm;
-        }
-        &.k-fab-md {
-            width: $fab-size-md;
-            height: $fab-size-md;
-        }
-        &.k-fab-lg {
-            width: $fab-size-lg;
-            height: $fab-size-lg;
-        }
-    }
-    .k-fab-pill {
-        border-radius: 5rem;
-    }
-    .k-fab-rounded {
-        @include border-radius( $fab-border-radius );
+    .k-fab-square {
+        aspect-ratio: 1;
     }
 
 
     // Items
     .k-fab-items {
         margin: 0;
-        padding: $fab-items-padding-y $fab-items-padding-x;
+        padding: $kendo-fab-items-padding-y $kendo-fab-items-padding-x;
         display: flex;
     }
 
@@ -141,19 +107,19 @@
     }
 
     .k-fab-item-text {
-        padding: $fab-item-text-padding-y $fab-item-text-padding-x;
-        border-width: $fab-item-text-border-width;
-        border-radius: $fab-item-text-border-radius;
-        font-size: $fab-item-text-font-size;
-        line-height: $fab-item-text-line-height;
+        padding: $kendo-fab-item-text-padding-y $kendo-fab-item-text-padding-x;
+        border-width: $kendo-fab-item-text-border-width;
+        border-radius: $kendo-fab-item-text-border-radius;
+        font-size: $kendo-fab-item-text-font-size;
+        line-height: $kendo-fab-item-text-line-height;
     }
 
     .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;
+        width: $kendo-fab-item-icon-width;
+        height: $kendo-fab-item-icon-height;
+        padding: $kendo-fab-item-icon-padding-y $kendo-fab-item-icon-padding-x;
+        border-width: $kendo-fab-item-icon-border-width;
+        border-radius: $kendo-fab-item-icon-border-radius;
         box-sizing: content-box;
         outline: none;
     }

package/scss/fab/_theme.scss

@@ -1,11 +1,11 @@
 @include exports( "fab/theme" ) {
 
     // 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;
+    @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-offset: -$kendo-fab-border-width;
             border-color: $color;
             color: contrast-wcag( $color );
             background-color: $color;
@@ -13,20 +13,18 @@
     }
 
     // Hover state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-hover.k-fab-#{$name},
-        .k-state-hovered.k-fab-#{$name},
-        .k-fab-#{$name}:hover {
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-hover.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:hover {
             border-color: try-shade( $color, .5 );
             background-color: try-shade( $color, .5 );
         }
     }
 
     // Focus state
-    @each $name, $color in $fab-theme-colors {
-        .k-fab-#{$name}.k-state-focus,
-        .k-fab-#{$name}.k-state-focused,
-        .k-fab-#{$name}:focus {
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-fab-solid-#{$name}.k-focus,
+        .k-fab-solid-#{$name}:focus {
             outline-style: solid;
             outline-width: 2px;
             outline-color: rgba( $color, .3 );
@@ -34,21 +32,21 @@
     }
 
     // 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);
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-active.k-fab-solid-#{$name},
+        .k-selected.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:active {
+            @include box-shadow($kendo-fab-active-shadow);
             border-color: try-shade( $color, 1.5);
             background-color: try-shade( $color, 1.5);
         }
     }
 
     // Disabled state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-disabled.k-fab-#{$name},
-        .k-fab-#{$name}:disabled {
-            @include box-shadow($fab-disabled-shadow);
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-disabled.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:disabled {
+            @include box-shadow($kendo-fab-disabled-shadow);
             background-color: try-tint( $color, 5 );
             color: try-tint( contrast-wcag( $color ), 5 );
             opacity: 1;
@@ -58,62 +56,59 @@
     // Items
     .k-fab-item-text {
         @include fill(
-            $fab-item-text,
-            $fab-item-bg,
-            $fab-item-border
+            $kendo-fab-item-text,
+            $kendo-fab-item-bg,
+            $kendo-fab-item-border
         );
-        @include box-shadow($fab-item-shadow);
+        @include box-shadow($kendo-fab-item-shadow);
 
     }
     .k-fab-item-icon {
         @include fill(
-            $fab-item-icon-text,
-            $fab-item-icon-bg,
-            $fab-item-icon-border
+            $kendo-fab-item-icon-text,
+            $kendo-fab-item-icon-bg,
+            $kendo-fab-item-icon-border
         );
-        @include box-shadow($fab-item-shadow);
-        outline: $fab-border-width solid rgba(0, 0, 0, .08);
-        outline-offset: -$fab-border-width;
+        @include box-shadow($kendo-fab-item-shadow);
+        outline: $kendo-fab-border-width solid rgba(0, 0, 0, .08);
+        outline-offset: -$kendo-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.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        border-color: try-shade( $fab-item-icon-border, .5 );
-        background-color: try-shade( $fab-item-icon-bg, .5 );
+        border-color: try-shade( $kendo-fab-item-icon-border, .5 );
+        background-color: try-shade( $kendo-fab-item-icon-bg, .5 );
     }
 
     // Focus state
     .k-fab-item:focus .k-fab-item-text,
     .k-fab-item:focus .k-fab-item-icon,
-    .k-fab-item.k-state-focus .k-fab-item-text,
-    .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 {
+    .k-fab-item.k-focus .k-fab-item-text,
+    .k-fab-item.k-focus .k-fab-item-icon {
         outline-style: solid;
         outline-width: 2px;
         outline-color: rgba(0, 0, 0, .08);
     }
 
     // Active state
-    .k-fab-item.k-state-active .k-fab-item-icon,
+    .k-fab-item.k-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
-        @include box-shadow($fab-item-active-shadow);
-        border-color: try-shade( $fab-item-icon-border, 1);
-        background-color: try-shade( $fab-item-icon-bg, 1);
+        @include box-shadow($kendo-fab-item-active-shadow);
+        border-color: try-shade( $kendo-fab-item-icon-border, 1);
+        background-color: try-shade( $kendo-fab-item-icon-bg, 1);
     }
 
     // Disabled state
-    .k-fab-item.k-state-disabled,
+    .k-fab-item.k-disabled,
     .k-fab-item:disabled {
         opacity: 1;
 
         .k-fab-item-text,
         .k-fab-item-icon {
-            @include box-shadow($fab-item-disabled-shadow);
-            background-color: try-tint( $fab-item-bg, 5 );
-            color: try-tint( $fab-item-text, 5 );
+            @include box-shadow($kendo-fab-item-disabled-shadow);
+            background-color: try-tint( $kendo-fab-item-bg, 5 );
+            color: try-tint( $kendo-fab-item-text, 5 );
         }
     }
 

package/scss/fab/_variables.scss

@@ -1,74 +1,131 @@
 // Floating Action Button
-$fab-padding-x: map-get( $spacing, 4 ) !default;
-$fab-padding-y: $fab-padding-x !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 !default;
 
-$fab-padding-x-sm: ( $fab-padding-x / 2 ) !default;
-$fab-padding-y-sm: ( $fab-padding-y / 2 ) !default;
-
-$fab-padding-x-md: $fab-padding-x !default;
-$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-height: $fab-icon-width !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-font-size: $font-size-xs !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 ),
-    md: map-get( $spacing, 8 ),
-    lg: map-get( $spacing, 16 )
-) !default;
-
-$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-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: $kendo-button-text !default;
-$fab-item-icon-bg: $kendo-button-bg !default;
-$fab-item-icon-border: $kendo-button-border !default;
-
-$fab-item-shadow: $fab-shadow !default;
-$fab-item-disabled-shadow: $fab-disabled-shadow !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;
-$fab-size-sm: calc( #{$fab-line-height-sm * 1em} + #{$fab-padding-y-sm * 2} + #{$fab-border-width-sm * 2} ) !default;
-
-$fab-border-width-md: $fab-border-width !default;
-$fab-line-height-md: $fab-line-height !default;
-$fab-size-md: calc( #{$fab-line-height-md * 1em} + #{$fab-padding-y-md * 2} + #{$fab-border-width-md * 2} ) !default;
-
-$fab-border-width-lg: $fab-border-width !default;
-$fab-line-height-lg: $fab-line-height !default;
-$fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{$fab-border-width-lg * 2} ) !default;
+/// Width of the border around the FAB.
+/// @group floating-action-button
+$kendo-fab-border-width: 1px !default;
+/// Border radius of the FAB.
+/// @group floating-action-button
+$kendo-fab-border-radius: $border-radius !default;
+
+/// Font family of the FAB.
+/// @group floating-action-button
+$kendo-fab-font-family: $font-family !default;
+/// Font size of the FAB.
+/// @group floating-action-button
+$kendo-fab-font-size: $font-size !default;
+/// Line height of the FAB.
+/// @group floating-action-button
+$kendo-fab-line-height: $line-height !default;
+
+/// Horizontal padding of the FAB.
+/// @group floating-action-button
+$kendo-fab-padding-x: map-get( $spacing, 4 ) !default;
+$kendo-fab-padding-x-sm: ( $kendo-fab-padding-x / 2 ) !default;
+$kendo-fab-padding-x-md: $kendo-fab-padding-x !default;
+$kendo-fab-padding-x-lg: ( $kendo-fab-padding-x * 1.5 ) !default;
+
+/// Vertical padding of the FAB.
+/// @group floating-action-button
+$kendo-fab-padding-y: $kendo-fab-padding-x !default;
+$kendo-fab-padding-y-sm: ( $kendo-fab-padding-y / 2 ) !default;
+$kendo-fab-padding-y-md: $kendo-fab-padding-y !default;
+$kendo-fab-padding-y-lg: ( $kendo-fab-padding-y * 1.5 ) !default;
+
+/// FAB icon width.
+/// @group floating-action-button
+$kendo-fab-icon-width: 20px !default;
+/// FAB icon height.
+/// @group floating-action-button
+$kendo-fab-icon-height: $kendo-fab-icon-width !default;
+/// FAB icon spacing.
+/// @group floating-action-button
+$kendo-fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;
+
+/// FAB items horizontal padding.
+/// @group floating-action-button
+$kendo-fab-items-padding-x: 0px !default;
+/// FAB items vertical padding.
+/// @group floating-action-button
+$kendo-fab-items-padding-y: map-get( $spacing, 4 ) !default;
+
+/// FAB item text horizontal padding.
+/// @group floating-action-button
+$kendo-fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
+/// FAB item text vertical padding.
+/// @group floating-action-button
+$kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-x !default;
+/// Width of the FAB item text border.
+/// @group floating-action-button
+$kendo-fab-item-text-border-width: 1px !default;
+/// Border radius of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-border-radius: 2px !default;
+/// Font size of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-font-size: $font-size-xs !default;
+/// Line height of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-line-height: 1.2 !default;
+
+/// FAB item icon horizontal padding.
+/// @group floating-action-button
+$kendo-fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
+/// FAB item icon vertical padding.
+/// @group floating-action-button
+$kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
+/// Width of the FAB item icon border.
+/// @group floating-action-button
+$kendo-fab-item-icon-border-width: 0 !default;
+/// Border radius of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-border-radius: 50% !default;
+/// Width of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-width: 20px !default;
+/// Height of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
+
+/// Theme colors map for the FAB.
+/// @group floating-action-button
+$kendo-fab-theme-colors: $theme-colors !default;
+
+/// The base shadow of the FAB.
+/// @group floating-action-button
+$kendo-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;
+/// The disabled shadow of the FAB.
+/// @group floating-action-button
+$kendo-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;
+/// The active shadow of the FAB.
+/// @group floating-action-button
+$kendo-fab-active-shadow: null !default;
+
+/// The base text color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-text: $component-text !default;
+/// The base background color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-bg: $component-bg !default;
+/// The base border color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-border: $component-border !default;
+
+/// The base text color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-text: $kendo-button-text !default;
+/// The base background color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-bg: $kendo-button-bg !default;
+/// The base border color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-border: $kendo-button-border !default;
+
+/// The base shadow of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-shadow: $kendo-fab-shadow !default;
+/// The disabled shadow of the FAB item.
+/// @group floating-action-button
+$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;

package/scss/forms/_layout.scss

@@ -83,7 +83,8 @@
             border: 0;
 
             > * {
-                &:first-child {
+                &:not(.k-hidden):first-child,
+                &.k-hidden + :not(.k-hidden) {
                     margin-top: 0;
                 }
             }
@@ -112,7 +113,8 @@
 
         > *,
         .k-daterangepicker .k-textbox-container {
-            &:first-child {
+            &:not(.k-hidden):first-child,
+            &.k-hidden + :not(.k-hidden) {
                 margin-top: 0;
             }
         }