@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
280 lines (254 loc) • 9.78 kB
text/less
/*!
* Copyright 2018 Telerik EAD
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
// Colorpicker
.k-colorpicker {
.k-picker-wrap {
line-height: calc(@input-height + @input-padding-y*2);
}
.k-selected-color {
vertical-align: top;
display: inline-block;
height: calc(@input-height + .35em);
width: calc(@input-height + .35em);
.k-i-line {
font-size: 2em;
color: #FF525E;
display: inline-block;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.k-i-line:before {
content: "\e510";
}
}
.k-tool-icon {
position: relative;
top: -2px;
display: inline-block;
padding: 3px 3px 2px;
margin-right: 3px;
margin-left: 2px;
margin-bottom: 3px;
background-repeat: no-repeat;
vertical-align: middle;
width: @grid-size;
height: @grid-size;
.disable-high-contrast();
.k-selected-color {
display: block;
height: 3px;
width: @grid-size;
position: absolute;
left: 3px;
bottom: -3px;
border-radius: 0 ;
}
}
.k-select {
cursor: pointer;
}
.k-picker-wrap .k-icon {
overflow:visible;
}
}
// Flat color picker
.k-flatcolorpicker {
position: relative;
display: inline-block;
width: 265px;
padding-bottom: 5px;
& {
background-color: transparent;
background-image: none;
}
.k-selected-color {
background-image: url("../textures/transtexture.png");
background-position: 50% 50%;
text-align: right;
input.k-color-value {
font-family: Consolas,"Ubuntu Mono","Lucida Console","Courier New",monospace;
padding: .75em .1em .65em .65em;
border: 0;
margin: 0;
width: 82%;
}
.k-color-input {
background-color: #fff;
display: inline-block;
width: 84%;
text-align: left;
}
.k-clear-color {
padding: .4em;
line-height: 0;
.k-i-reset-color:before {
color: #000;
opacity: 0.8;
}
.k-i-reset-color:hover,
.k-i-reset-color:active {
opacity: 1;
}
}
}
.k-clear-color-container .k-clear-color.k-state-focused:active {
color: inherit;
}
.k-clear-color-container .k-clear-color:active {
color: #000;
opacity: 1;
}
.k-selected-color .k-clear-color,
.k-clear-color-container .k-clear-color {
.k-i-reset-color {
background-image: none;
}
}
.k-clear-color-container {
text-align: left;
}
.k-hsv-rectangle {
position: relative;
.prohibit-selection;
-ms-touch-action: pinch-zoom double-tap-zoom;
.k-draghandle {
cursor: pointer;
position: absolute;
z-index: 10;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
border: 1px solid #eee;
margin-left: -5px;
margin-top: -5px;
border-radius: 6px;
.box-shadow(0, 1px, 2px, #444);
background: transparent;
&:hover, &:focus {
background: transparent;
border-color: #fff;
.box-shadow(0 1px 5px #000);
}
}
&.k-dragging, &.k-dragging * {
cursor: none;
}
}
.k-slider-horizontal {
height: 20px;
width: 90%;
margin: 0 5%;
.k-slider-track {
.box-shadow(~"0 1px 0 #fff, 0 -1px 0 #999");
}
}
.k-hue-slider, .k-transparency-slider {
display: block;
.k-slider-selection {
background: transparent;
}
.k-draghandle {
background: transparent;
border: 3px solid #eee;
margin-top: 1px;
height: 8px;
width: 8px;
.box-shadow(0 1px 4px #444);
&:hover, &:focus {
background: transparent;
border-color: #fff;
.box-shadow(0 1px 5px #000);
border-width: 2px;
padding: 1px;
}
}
}
.k-hue-slider {
.k-slider-track {
background: linear-gradient(to right, #ff0000 0%, #ffff00 16%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 84%, #ff0004 100%);
}
}
.k-transparency-slider {
.k-slider-track {
background-image: url("../textures/transparency.png");
background-size: 100% auto;
background-position: 100% 50%;
background-repeat: no-repeat;
}
}
.k-controls {
margin-top: 10px;
margin-bottom: 5px;
text-align: center;
font-size: 90%;
.k-button {
width: 6em;
}
}
.k-hsv-gradient {
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%), linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
height: 180px;
margin-bottom: 5px;
}
.k-ie9 & {
.k-hue-slider {
.k-slider-track {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE2JSIgc3RvcC1jb2xvcj0iI2ZmZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzAwZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iI2ZmMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
}
.k-hsv-gradient {
background:
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+),
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
}
}
// Color palette
.k-colorpalette {
position: relative;
line-height: 0;
border-width: 0;
display: inline-block;
.k-palette {
border-collapse: collapse;
position: relative;
width: 100%;
height: 100%;
}
.k-item {
width: 14px;
height: 14px;
overflow: hidden;
.disable-high-contrast();
&.k-state-selected,
&.k-state-selected:hover {
z-index: 100;
background: transparent;
box-shadow: 0 1px 3px 1px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.45);
position: relative;
}
}
.k-item:hover {
z-index: 101;
position: relative;
box-shadow: 0 1px 3px 1px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.3);
}
}