Skip to content

Commit

Permalink
chore: refactor disabled
Browse files Browse the repository at this point in the history
  • Loading branch information
@epetrow
epetrow committed Jun 12, 2024
1 parent 76c2307 commit 746956b
Show file tree
Hide file tree
Showing 24 changed files with 103 additions and 65 deletions.
10 changes: 0 additions & 10 deletions packages/bootstrap/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,16 +34,6 @@ $kendo-focus-shadow: null !default;
$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;


// Disabled mixin variables
$kendo-disabled-filter: grayscale(.1) !default;
$kendo-disabled-opacity: .65 !default;

$kendo-disabled-styling: (
opacity: $kendo-disabled-opacity,
filter: $kendo-disabled-filter
) !default;


// Generic styles

// TODO: refactor once we extract drag drop as separate module
12 changes: 12 additions & 0 deletions packages/bootstrap/scss/core/color-system/_swatch-legacy.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@
$kendo-selected-hover-border: $kendo-base-border;
$kendo-selected-hover-gradient: $kendo-base-gradient;
$kendo-disabled-text: k-color( on-app-surface );
$kendo-disabled-bg: null;
$kendo-disabled-border: null;
$kendo-disabled-opacity: .65;
$kendo-disabled-filter: grayscale(.1);
$kendo-component-header-bg: $kendo-base-bg;
$kendo-component-header-text: $kendo-component-text;
$kendo-component-header-border: $kendo-component-border;
Expand All @@ -67,4 +71,12 @@
"light": $kendo-color-light,
"inverse": $kendo-color-inverse,
);

$kendo-disabled-styling: (
bg: $kendo-disabled-bg,
color: $kendo-disabled-text,
border: $kendo-disabled-border,
opacity: $kendo-disabled-opacity,
filter: $kendo-disabled-filter
);
}
12 changes: 0 additions & 12 deletions packages/classic/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,3 @@ $kendo-is-dark-theme: false !default;
$kendo-focus-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;

$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;


// Disabled mixin variables
$kendo-disabled-filter: grayscale(.1) !default;
$kendo-disabled-opacity: .6 !default;

$kendo-disabled-styling: (
opacity: $kendo-disabled-opacity,
filter: $kendo-disabled-filter
) !default;


12 changes: 12 additions & 0 deletions packages/classic/scss/core/color-system/_swatch-legacy.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@
$kendo-selected-hover-border: k-color( primary-hover );
$kendo-selected-hover-gradient: $kendo-base-gradient;
$kendo-disabled-text: k-color( on-app-surface );
$kendo-disabled-bg: null;
$kendo-disabled-border: null;
$kendo-disabled-opacity: .6;
$kendo-disabled-filter: grayscale(.1);
$kendo-component-header-bg: $kendo-base-bg;
$kendo-component-header-text: $kendo-base-text;
$kendo-component-header-border: $kendo-base-border;
Expand All @@ -59,4 +63,12 @@
"light": $kendo-color-light,
"inverse": $kendo-color-inverse,
);

$kendo-disabled-styling: (
bg: $kendo-disabled-bg,
color: $kendo-disabled-text,
border: $kendo-disabled-border,
opacity: $kendo-disabled-opacity,
filter: $kendo-disabled-filter
);
}
10 changes: 10 additions & 0 deletions packages/core/scss/color-system/_swatch-legacy.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,16 @@ $kendo-invalid-shadow: null !default;
$kendo-disabled-bg: null !default;
$kendo-disabled-text: null !default;
$kendo-disabled-border: null !default;
$kendo-disabled-opacity: null !default;
$kendo-disabled-filter: null !default;

$kendo-disabled-styling: (
bg: $kendo-disabled-bg,
text: $kendo-disabled-text,
border: $kendo-disabled-border,
opacity: $kendo-disabled-opacity,
filter: $kendo-disabled-filter
) !default;


$kendo-palettes: () !default;
Expand Down
14 changes: 4 additions & 10 deletions packages/core/scss/mixins/_disabled.scss
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,13 @@
// Disabled
@mixin disabled( $kendo-disabled-styling ) {
outline: none;
cursor: default;
opacity: k-map-get($kendo-disabled-styling, opacity);
filter: k-map-get($kendo-disabled-styling, filter);
pointer-events: none;
box-shadow: none;
}

@mixin disabled-color( $color: null, $bg: null, $border: null ) {
@mixin disabled( $color: null, $bg: null, $border: null, $opacity: null, $filter: null ) {
outline: none;
cursor: default;
background-color: $bg;
color: $color;
background-color: $bg;
border-color: $border;
opacity: $opacity;
filter: $filter;
pointer-events: none;
box-shadow: none;
}
9 changes: 6 additions & 3 deletions packages/core/scss/styles/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,12 @@
.k-disabled,
.k-widget[disabled],
.k-disabled {
@include disabled-color(
$color: var( --kendo-disabled-text, #{$kendo-disabled-text}, inherit ),
$border: var( --kendo-disabled-border, #{$kendo-disabled-border}, inherit )
@include disabled(
$color: var( --kendo-disabled-text, #{$kendo-disabled-text}),
$bg: var( --kendo-disabled-bg, #{$kendo-disabled-bg}),
$border: var( --kendo-disabled-border, #{$kendo-disabled-border}),
$opacity: var( --kendo-disabled-opacity, #{$kendo-disabled-opacity}),
$filter: var( --kendo-disabled-filter, #{$kendo-disabled-filter})
);

.k-link {
Expand Down
9 changes: 0 additions & 9 deletions packages/default/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,4 @@ $kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
/// Transition used across all components.
$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;

/// Filter used for disabled items.
$kendo-disabled-filter: grayscale(.1) !default;
/// Opacity used for disabled items.
$kendo-disabled-opacity: .6 !default;

$kendo-disabled-styling: (
opacity: $kendo-disabled-opacity,
filter: $kendo-disabled-filter
) !default;

2 changes: 1 addition & 1 deletion packages/default/scss/button/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@

&:disabled,
&.k-disabled {
@include disabled( $kendo-disabled-styling );
@include disabled( $kendo-disabled-styling... );
}

&::-moz-focus-inner {
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/checkbox/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
// Disabled state
.k-checkbox:disabled,
.k-checkbox.k-disabled {
@include disabled( $kendo-disabled-styling );
@include disabled( $kendo-disabled-styling... );
}


Expand Down
12 changes: 12 additions & 0 deletions packages/default/scss/core/color-system/_swatch-legacy.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@
$kendo-selected-hover-border: $kendo-base-border;
$kendo-selected-hover-gradient: $kendo-base-gradient;
$kendo-disabled-text: k-color( on-app-surface );
$kendo-disabled-bg: null;
$kendo-disabled-border: null;
$kendo-disabled-opacity: .6;
$kendo-disabled-filter: grayscale(.1);
$kendo-component-header-bg: $kendo-base-bg;
$kendo-component-header-text: $kendo-base-text;
$kendo-component-header-border: $kendo-base-border;
Expand All @@ -59,4 +63,12 @@
"light": $kendo-color-light,
"inverse": $kendo-color-inverse,
);

$kendo-disabled-styling: (
bg: $kendo-disabled-bg,
color: $kendo-disabled-text,
border: $kendo-disabled-border,
opacity: $kendo-disabled-opacity,
filter: $kendo-disabled-filter
);
}
2 changes: 1 addition & 1 deletion packages/default/scss/forms/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
.k-form-field-disabled {
.k-label,
.k-form-label {
@include disabled( $kendo-disabled-styling );
@include disabled( $kendo-disabled-styling... );
}
}

Expand Down
4 changes: 2 additions & 2 deletions packages/default/scss/input/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@

&:disabled,
&[disabled] {
@include disabled( $kendo-disabled-styling );
@include disabled( $kendo-disabled-styling... );

[disabled] &,
.k-disabled & {
Expand All @@ -89,7 +89,7 @@

&:disabled,
&[disabled] {
@include disabled( $kendo-disabled-styling );
@include disabled( $kendo-disabled-styling... );

[disabled] &,
.k-disabled & {
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/radio/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
// Disabled state
.k-radio:disabled,
.k-radio.k-disabled {
@include disabled( $kendo-disabled-styling );
@include disabled( $kendo-disabled-styling... );
}
.k-radio:disabled:checked,
.k-radio.k-disabled.k-checked {
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/taskboard/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
}

&.k-disabled {
@include disabled( $kendo-disabled-styling );
@include disabled( $kendo-disabled-styling... );
}
}

Expand Down
3 changes: 3 additions & 0 deletions packages/fluent/scss/core/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,9 @@
$kendo-disabled-bg: $kendo-disabled-bg !default,
$kendo-disabled-text: $kendo-disabled-text !default,
$kendo-disabled-border: $kendo-disabled-border !default,
$kendo-disabled-opacity: $kendo-disabled-opacity !default,
$kendo-disabled-filter: $kendo-disabled-filter !default,
$kendo-disabled-styling: $kendo-disabled-styling !default,
// Elevation
$_default-elevation: $kendo-elevation,
$kendo-elevation: $kendo-elevation !default,
Expand Down
10 changes: 10 additions & 0 deletions packages/fluent/scss/core/color-system/_swatch-legacy.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,14 @@
border: core.k-color( error-subtle ),
),
);

core.$kendo-disabled-styling: (
bg: core.$kendo-disabled-bg,
text: core.$kendo-disabled-text,
border: core.$kendo-disabled-border,
opacity: core.$kendo-disabled-opacity,
filter: core.$kendo-disabled-filter,
);
}

:root {
Expand All @@ -70,6 +78,8 @@
--kendo-disabled-bg: #{core.$kendo-disabled-bg};
--kendo-disabled-text: #{core.$kendo-disabled-text};
--kendo-disabled-border: #{core.$kendo-disabled-border};
--kendo-disabled-opacity: #{core.$kendo-disabled-opacity};
--kendo-disabled-filter: #{core.$kendo-disabled-filter};

--kendo-hover-bg: #{core.$kendo-hover-bg};
--kendo-hover-text: #{core.$kendo-hover-text};
Expand Down
10 changes: 10 additions & 0 deletions packages/fluent/scss/core/color-system/_swatch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,16 @@ $kendo-valid-shadow: null !default;
$kendo-disabled-bg: functions.k-get-theme-color-var(neutral-20) !default;
$kendo-disabled-text: functions.k-get-theme-color-var(neutral-90) !default;
$kendo-disabled-border: transparent !default;
$kendo-disabled-opacity: null !default;
$kendo-disabled-filter: null !default;

$kendo-disabled-styling: (
bg: $kendo-disabled-bg,
color: $kendo-disabled-text,
border: $kendo-disabled-border,
opacity: $kendo-disabled-opacity,
filter: $kendo-disabled-filter,
) !default;

$kendo-theme-colors: (
primary: (
Expand Down
2 changes: 1 addition & 1 deletion packages/fluent/scss/daterangepicker/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
&:disabled,
&[disabled],
&.k-disabled {
@include disabled-color(
@include disabled(
$color: var( --kendo-daterange-picker-disabled-text, var( --kendo-disabled-text, inherit ) ),
$bg: var( --kendo-daterange-picker-disabled-bg, transparent ),
$border: var( --kendo-daterange-picker-disabled-border, currentColor )
Expand Down
2 changes: 1 addition & 1 deletion packages/fluent/scss/fab/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@
&.k-disabled .k-fab-item-icon,
&:disabled .k-fab-item-text,
&.k-disabled .k-fab-item-text {
@include disabled-color(
@include disabled(
var( --kendo-disabled-text, inherit ),
var( --kendo-disabled-bg, inherit ),
var( --kendo-disabled-border, inherit )
Expand Down
4 changes: 2 additions & 2 deletions packages/fluent/scss/grid/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -541,7 +541,7 @@

&.k-disabled .k-link,
&.k-disabled .k-icon {
@include disabled-color(
@include disabled(
var( --kendo-disabled-text, inherit )
);
}
Expand All @@ -561,7 +561,7 @@

.k-listgroup-item {
&.k-disabled {
@include disabled-color(
@include disabled(
$bg: var( --kendo-disabled-bg, inherit )
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/fluent/scss/rating/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
}

&.k-disabled {
@include disabled-color(
@include disabled(
var( --kendo-disabled-text, inherit ),
inherit,
var( --kendo-disabled-border, inherit )
Expand Down
9 changes: 0 additions & 9 deletions packages/material/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,12 +78,3 @@ $kendo-zindex-popup: 1 !default;
$kendo-zindex-window: 2 !default;

$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;

// Disabled mixin variables
$kendo-disabled-filter: grayscale(.1) !default;
$kendo-disabled-opacity: .6 !default;

$kendo-disabled-styling: (
opacity: $kendo-disabled-opacity,
filter: $kendo-disabled-filter
) !default;
12 changes: 12 additions & 0 deletions packages/material/scss/core/color-system/_swatch-legacy.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@
$kendo-selected-hover-border: $kendo-base-border;
$kendo-selected-hover-gradient: null;
$kendo-disabled-text: k-color( on-app-surface );
$kendo-disabled-bg: null;
$kendo-disabled-border: null;
$kendo-disabled-opacity: .6;
$kendo-disabled-filter: grayscale(.1);
$kendo-component-header-bg: $kendo-base-bg;
$kendo-component-header-text: $kendo-base-text;
$kendo-component-header-border: $kendo-base-border;
Expand All @@ -62,4 +66,12 @@
"inverse": $kendo-color-inverse,
);

$kendo-disabled-styling: (
bg: $kendo-disabled-bg,
color: $kendo-disabled-text,
border: $kendo-disabled-border,
opacity: $kendo-disabled-opacity,
filter: $kendo-disabled-filter
);

}

0 comments on commit 746956b

Please sign in to comment.