lixin-web
Version:
vue and bootstrap
675 lines (407 loc) • 9.64 kB
CSS
:root {
/* Transition
-------------------------- */
/* Colors
-------------------------- */
/* Link
-------------------------- */
/* Border
-------------------------- */
/* Box-shadow
-------------------------- */
/* Fill
-------------------------- */
/* Font
-------------------------- */
/* Size
-------------------------- */
/* z-index
-------------------------- */
/* Disable base
-------------------------- */
/* Icon
-------------------------- */
/* Checkbox
-------------------------- */
/* Radio
-------------------------- */
/* Select
-------------------------- */
/* Alert
-------------------------- */
/* Message Box
-------------------------- */
/* Message
-------------------------- */
/* Notification
-------------------------- */
/* Input
-------------------------- */
/* Cascader
-------------------------- */
/* Group
-------------------------- */
/* Tab
-------------------------- */
/* Button
-------------------------- */
/* cascader
-------------------------- */
/* Switch
-------------------------- */
/* Dialog
-------------------------- */
/* Table
-------------------------- */
/* Pagination
-------------------------- */
/* Popover
-------------------------- */
/* Tooltip
-------------------------- */
/* Tag
-------------------------- */
/* Dropdown
-------------------------- */
/* Badge
-------------------------- */
/* Card
--------------------------*/
/* Slider
--------------------------*/
/* Steps
--------------------------*/
/* Menu
--------------------------*/
/* Rate
--------------------------*/
/* DatePicker
--------------------------*/
/* Loading
--------------------------*/
/* Scrollbar
--------------------------*/
/* Carousel
--------------------------*/
/* Collapse
--------------------------*/
/* Transfer
--------------------------*/
}
.el-color-hue-slider {
position: relative;
box-sizing: border-box;
width: 280px;
height: 12px;
background-color: #f00;
padding: 0 2px;
}
.el-color-hue-slider.is-vertical {
width: 12px;
height: 180px;
padding: 2px 0;
}
.el-color-hue-slider.is-vertical .el-color-hue-slider__bar {
background: linear-gradient(
to bottom, #f00 0%,
#ff0 17%, #0f0 33%,
#0ff 50%, #00f 67%,
#f0f 83%, #f00 100%);
}
.el-color-hue-slider.is-vertical .el-color-hue-slider__thumb {
left: 0;
top: 0;
width: 100%;
height: 4px;
}
.el-color-hue-slider__bar {
position: relative;
background: linear-gradient(
to right, #f00 0%,
#ff0 17%, #0f0 33%,
#0ff 50%, #00f 67%,
#f0f 83%, #f00 100%);
height: 100%;
}
.el-color-hue-slider__thumb {
position: absolute;
cursor: pointer;
box-sizing: border-box;
left: 0;
top: 0;
width: 4px;
height: 100%;
border-radius: 1px;
background: #fff;
border: 1px solid #f0f0f0;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
z-index: 1;
}
.el-color-svpanel {
position: relative;
width: 280px;
height: 180px;
}
.el-color-svpanel__white, .el-color-svpanel__black {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.el-color-svpanel__white {
background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}
.el-color-svpanel__black {
background: linear-gradient(to top, #000, rgba(0,0,0,0));
}
.el-color-svpanel__cursor {
position: absolute;
}
.el-color-svpanel__cursor > div {
cursor: head;
width: 4px;
height: 4px;
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4);
border-radius: 50%;
transform: translate(-2px, -2px);
}
.el-color-alpha-slider {
position: relative;
box-sizing: border-box;
width: 280px;
height: 12px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.el-color-alpha-slider.is-vertical {
width: 20px;
height: 180px;
}
.el-color-alpha-slider.is-vertical .el-color-alpha-slider__bar {
background: linear-gradient(
to bottom, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
}
.el-color-alpha-slider.is-vertical .el-color-alpha-slider__thumb {
left: 0;
top: 0;
width: 100%;
height: 4px;
}
.el-color-alpha-slider__bar {
position: relative;
background: linear-gradient(
to right, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
height: 100%;
}
.el-color-alpha-slider__thumb {
position: absolute;
cursor: pointer;
box-sizing: border-box;
left: 0;
top: 0;
width: 4px;
height: 100%;
border-radius: 1px;
background: #fff;
border: 1px solid #f0f0f0;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
z-index: 1;
}
.el-color-dropdown {
width: 300px;
}
.el-color-dropdown__main-wrapper {
margin-bottom: 6px;
}
.el-color-dropdown__main-wrapper::after {
content: "";
display: table;
clear: both;
}
.el-color-dropdown__btns {
margin-top: 6px;
text-align: right;
}
.el-color-dropdown__value {
float: left;
line-height: 26px;
font-size: 12px;
color: rgb(31, 48, 61);
}
.el-color-dropdown__btn {
border: 1px solid #dcdcdc;
color: #333;
line-height: 24px;
border-radius: 2px;
padding: 0 20px;
cursor: pointer;
background-color: transparent;
outline: none;
font-size: 12px;
}
.el-color-dropdown__btn[disabled] {
color: #cccccc;
cursor: not-allowed;
}
.el-color-dropdown__btn:hover {
color: #2ba7e7;
border-color: #2ba7e7;
}
.el-color-dropdown__link-btn {
cursor: pointer;
color: #2ba7e7;
text-decoration: none;
padding: 15px;
font-size: 12px;
}
.el-color-dropdown__link-btn:hover {
color: rgb(85, 185, 236);
}
.el-color-picker {
display: inline-block;
position: relative;
line-height: normal;
}
.el-color-picker__trigger {
display: inline-block;
box-sizing: border-box;
height: 36px;
padding: 6px;
border: 1px solid #bfcbd9;
border-radius: 4px;
font-size: 0;
}
.el-color-picker__color {
position: relative;
display: inline-block;
box-sizing: border-box;
border: 1px solid #666;
width: 22px;
height: 22px;
text-align: center;
}
.el-color-picker__color.is-alpha {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.el-color-picker__color-inner {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.el-color-picker__empty {
font-size: 12px;
vertical-align: middle;
color: #666;
position: absolute;
top: 4px;
left: 4px;
}
.el-color-picker__icon {
display: inline-block;
position: relative;
top: -6px;
margin-left: 8px;
width: 12px;
color: #888;
font-size: 12px;
}
.el-color-picker__panel {
position: absolute;
z-index: 10;
padding: 6px;
background-color: #fff;
border: 1px solid rgb(209, 221, 229);
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
}
:root {
/* Transition
-------------------------- */
/* Colors
-------------------------- */
/* Link
-------------------------- */
/* Border
-------------------------- */
/* Box-shadow
-------------------------- */
/* Fill
-------------------------- */
/* Font
-------------------------- */
/* Size
-------------------------- */
/* z-index
-------------------------- */
/* Disable base
-------------------------- */
/* Icon
-------------------------- */
/* Checkbox
-------------------------- */
/* Radio
-------------------------- */
/* Select
-------------------------- */
/* Alert
-------------------------- */
/* Message Box
-------------------------- */
/* Message
-------------------------- */
/* Notification
-------------------------- */
/* Input
-------------------------- */
/* Cascader
-------------------------- */
/* Group
-------------------------- */
/* Tab
-------------------------- */
/* Button
-------------------------- */
/* cascader
-------------------------- */
/* Switch
-------------------------- */
/* Dialog
-------------------------- */
/* Table
-------------------------- */
/* Pagination
-------------------------- */
/* Popover
-------------------------- */
/* Tooltip
-------------------------- */
/* Tag
-------------------------- */
/* Dropdown
-------------------------- */
/* Badge
-------------------------- */
/* Card
--------------------------*/
/* Slider
--------------------------*/
/* Steps
--------------------------*/
/* Steps
--------------------------*/
/* Rate
--------------------------*/
/* DatePicker
--------------------------*/
/* Loading
--------------------------*/
/* Scrollbar
--------------------------*/
/* Carousel
--------------------------*/
/* Collapse
--------------------------*/
}