Skip to content

Commit

Permalink
fix(colorpicker): boot and mat inherit default
Browse files Browse the repository at this point in the history
  • Loading branch information
JoomFX authored and joneff committed Mar 6, 2020
1 parent 0ee0837 commit b86a098
Show file tree
Hide file tree
Showing 6 changed files with 24 additions and 241 deletions.
2 changes: 2 additions & 0 deletions packages/bootstrap/scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -970,6 +970,8 @@ $colorpicker-select-focused-gradient: $button-pressed-gradient !default;
$colorpicker-select-pressed-shadow: $button-pressed-shadow !default;
$colorpicker-select-focused-shadow: $button-focused-shadow !default;

$colorpicker-tool-icon-hovered-border: $colorpicker-select-hovered-border;

$colorpalette-hovered-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
$colorpalette-focused-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;

Expand Down
142 changes: 1 addition & 141 deletions packages/bootstrap/scss/colorpicker/_theme.scss
Original file line number Diff line number Diff line change
@@ -1,141 +1 @@
@include exports("colorpicker/theme") {

// Theme
.k-colorpicker {

// Normal state
.k-picker-wrap {
@include fill(
$colorpicker-select-text,
$colorpicker-select-bg,
$colorpicker-select-border,
$colorpicker-select-gradient
);
}

// Hovered state
.k-tool-icon:hover,
.k-select:hover,
.k-tool-icon.k-state-hover,
.k-select.k-state-hover,
.k-state-hover {
@include fill(
$colorpicker-select-hovered-text,
$colorpicker-select-hovered-bg,
$colorpicker-select-hovered-border,
$colorpicker-select-hovered-gradient
);
}

// Focused state
.k-state-focused {}

// Active state
.k-state-active {
@include fill(
$colorpicker-select-focused-text,
$colorpicker-select-focused-bg,
$colorpicker-select-focused-border,
$colorpicker-select-focused-gradient
);
@include box-shadow( $colorpicker-select-pressed-shadow );
}
}

}




@include exports( "flatcolorpicker/theme" ) {

.k-flatcolorpicker {

.k-hsv-gradient {
background: linear-gradient( to bottom, $gradient-transparent-to-black ), linear-gradient( to right, $gradient-white-to-transparent );
}


// Sliders
.k-slider {

// Draghandle
.k-draghandle {
box-shadow: 0 1px 4px rgba(0, 0, 0, .9);
// sass-lint:enable no-color-literals no-color-keywords
background-color: transparent;
}
.k-draghandle:hover,
.k-draghandle:focus {
// sass-lint:disable no-color-literals no-color-keywords
border-color: white;
box-shadow: 0 1px 4px black;
// sass-lint:enable no-color-literals no-color-keywords
background-color: transparent;
}

}


// Slider type
.k-hue-slider {
&.k-slider-horizontal {
.k-slider-track {
background: linear-gradient( to right, $gradient-rainbow );
}
}
&.k-slider-vertical {
.k-slider-track {
background: linear-gradient( to top, $gradient-rainbow );
}
}
}
.k-alpha-slider {
.k-slider-track {
background: url(map-get($data-uris, "alpha-slider-bgr.png")) center;
}
}


.k-draghandle {
border-color: rgba(255, 255, 255, .8);
box-shadow: 0 1px 4px rgba(0, 0, 0, .21);
}

}


.k-rtl,
[dir="rtl"] {
.k-flatcolorpicker {

.k-hue-slider.k-slider-horizontal .k-slider-track {
background: linear-gradient( to left, $gradient-rainbow );
}

.k-alpha-slider .k-slider-track {
background: url(map-get($data-uris, "alpha-slider-bgr-reversed.png")) center;
}

}
}

}




@include exports( "colorpalette/theme" ) {
.k-colorpalette {
.k-item:hover,
.k-item.k-state-hover {
box-shadow: $colorpalette-hovered-shadow;
}
.k-item.k-state-selected,
.k-item.k-state-selected:hover,
.k-item.k-state-focused,
.k-item:focus {
box-shadow: $colorpalette-focused-shadow;
}
}
}
@import "~@progress/kendo-theme-default/scss/colorpicker/_theme.scss";
3 changes: 3 additions & 0 deletions packages/default/scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -973,10 +973,13 @@ $colorpicker-select-focused-gradient: $button-pressed-gradient !default;
$colorpicker-select-pressed-shadow: $button-pressed-shadow !default;
$colorpicker-select-focused-shadow: $button-focused-shadow !default;

$colorpicker-tool-icon-hovered-border: rgba(0, 0, 0, .08) !default;

$colorpalette-hovered-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
$colorpalette-focused-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;



// Comboboxes
$combobox-select-padding-x: 0 !default;
$combobox-select-padding-y: 0 !default;
Expand Down
8 changes: 6 additions & 2 deletions packages/default/scss/colorpicker/_theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@

.k-tool-icon:hover,
.k-tool-icon.k-state-hover {
border-color: rgba(0, 0, 0, .08);
border-color: $colorpicker-tool-icon-hovered-border;
}

// Selected state
Expand Down Expand Up @@ -71,7 +71,11 @@
@include exports( "flatcolorpicker/theme" ) {

.k-flatcolorpicker {
@include appearance( panel );
@include fill(
$panel-text,
$panel-bg,
$panel-border
);

.k-color-value {
@include fill(
Expand Down
2 changes: 2 additions & 0 deletions packages/material/scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1021,6 +1021,8 @@ $colorpicker-select-focused-gradient: $button-pressed-gradient !default;
$colorpicker-select-pressed-shadow: $button-pressed-shadow !default;
$colorpicker-select-focused-shadow: $button-focused-shadow !default;

$colorpicker-tool-icon-hovered-border: rgba(0, 0, 0, .08) !default;

$colorpalette-hovered-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
$colorpalette-focused-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;

Expand Down
108 changes: 10 additions & 98 deletions packages/material/scss/colorpicker/_theme.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
@include exports( "colorpicker/theme" ) {
@import "~@progress/kendo-theme-default/scss/colorpicker/_theme.scss";

@include exports( "colorpicker/theme/material" ) {

.k-colorpicker {
background-color: transparent;

.k-selected-color {
border-color: rgba( 0, 0, 0, .08 );
Expand All @@ -14,6 +15,13 @@
.k-tool-icon:hover,
.k-tool-icon.k-state-hover {
color: rgba(0, 0, 0, .87);
background-color: transparent;
}

.k-select:hover,
.k-select.k-state-hover {
border-color: transparent;
background-color: transparent;
}

.k-picker-wrap {
Expand Down Expand Up @@ -51,99 +59,3 @@
}

}




@include exports( "flatcolorpicker/theme" ) {

.k-flatcolorpicker {

.k-hsv-gradient {
background: linear-gradient( to bottom, $gradient-transparent-to-black ), linear-gradient( to right, $gradient-white-to-transparent );
}


// Sliders
.k-slider {

// Draghandle
.k-draghandle {
box-shadow: 0 1px 4px rgba(0, 0, 0, .9);
// sass-lint:enable no-color-literals no-color-keywords
background-color: transparent;
}
.k-draghandle:hover,
.k-draghandle:focus {
// sass-lint:disable no-color-literals no-color-keywords
border-color: white;
box-shadow: 0 1px 4px black;
// sass-lint:enable no-color-literals no-color-keywords
background-color: transparent;
}

}


// Slider type
.k-hue-slider {
&.k-slider-horizontal {
.k-slider-track {
background: linear-gradient( to right, $gradient-rainbow );
}
}
&.k-slider-vertical {
.k-slider-track {
background: linear-gradient( to top, $gradient-rainbow );
}
}
}
.k-alpha-slider {
.k-slider-track {
background: url(map-get($data-uris, "alpha-slider-bgr.png")) center;
}
}


.k-draghandle {
border-color: rgba(255, 255, 255, .8);
box-shadow: 0 1px 4px rgba(0, 0, 0, .21);
}

}


.k-rtl,
[dir="rtl"] {
.k-flatcolorpicker {

.k-hue-slider.k-slider-horizontal .k-slider-track {
background: linear-gradient( to left, $gradient-rainbow );
}

.k-alpha-slider .k-slider-track {
background: url(map-get($data-uris, "alpha-slider-bgr-reversed.png")) center;
}

}
}

}




@include exports( "colorpalette/theme" ) {
.k-colorpalette {
.k-item:hover,
.k-item.k-state-hover {
box-shadow: $colorpalette-hovered-shadow;
}
.k-item.k-state-selected,
.k-item.k-state-selected:hover,
.k-item.k-state-focused,
.k-item:focus {
box-shadow: $colorpalette-focused-shadow;
}
}
}

0 comments on commit b86a098

Please sign in to comment.