337 lines
No EOL
6.9 KiB
SCSS
337 lines
No EOL
6.9 KiB
SCSS
@import "mymixins";
|
|
$custom-elements-sprite-bg: url('../images/custom-elements-sprite.png') no-repeat;
|
|
.jcf-hidden {
|
|
display: block !important;
|
|
position: absolute !important;
|
|
left: -9999px !important; /* change to right: -9999px on RTL sites */
|
|
}
|
|
/* custom checkbox styles */
|
|
.chk-area {
|
|
margin: 0 10px 0 0;
|
|
float: left;
|
|
width: 22px;
|
|
height: 22px;
|
|
background: $custom-elements-sprite-bg -253px -14px;
|
|
}
|
|
.chk-checked {
|
|
background-position: -253px -45px;
|
|
}
|
|
.chk-focus {
|
|
//border-color: #f00;
|
|
}
|
|
.chk-disabled {
|
|
background-position: -253px -75px;
|
|
}
|
|
|
|
// no yes
|
|
.no-yes .chk-area{
|
|
margin: 0 0px 0 0;
|
|
float: left;
|
|
width: 67px;
|
|
height: 30px;
|
|
background: $custom-elements-sprite-bg -11px -11px;
|
|
}
|
|
.no-yes .chk-checked {
|
|
background-position: -11px -44px;
|
|
}
|
|
.no-yes .chk-disabled {
|
|
background-position: -11px -77px;
|
|
}
|
|
|
|
// on off
|
|
.check-out .chk-area{
|
|
margin: 0 0px 0 0;
|
|
float: left;
|
|
width: 67px;
|
|
height: 30px;
|
|
background: $custom-elements-sprite-bg -88px -11px;
|
|
}
|
|
.check-out .chk-checked {
|
|
background-position: -88px -44px;
|
|
}
|
|
.check-out .chk-disabled {
|
|
background-position: -88px -77px;
|
|
}
|
|
|
|
// on off
|
|
.on-off .chk-area{
|
|
margin: 0 10px 0 0;
|
|
float: left;
|
|
width: 67px;
|
|
height: 30px;
|
|
background: $custom-elements-sprite-bg -165px -11px;
|
|
}
|
|
.on-off .chk-checked {
|
|
background-position: -165px -44px;
|
|
}
|
|
.on-off .chk-disabled {
|
|
background-position: -165px -77px;
|
|
}
|
|
|
|
|
|
.jcf-label-disabled {
|
|
color: #ccc;
|
|
}
|
|
/* custom radio styles */
|
|
.rad-area {
|
|
margin: 0 10px 0 0;
|
|
float: left;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 11px;
|
|
font: 22px/22px $font-icon;
|
|
background:$input-bg;
|
|
color: darken($input-bg,22%);
|
|
&:after{
|
|
content: "\e909";
|
|
}
|
|
//background: $custom-elements-sprite-bg -283px -15px;
|
|
}
|
|
|
|
.rad-checked {
|
|
//background-position: -283px -48px;
|
|
background:$input-bg;
|
|
color:$blue;
|
|
&:after{
|
|
content: "\e90a";
|
|
}
|
|
}
|
|
.rad-focus {
|
|
//border-color: #f00;
|
|
}
|
|
.rad-disabled {
|
|
//background-position: -283px -80px;
|
|
}
|
|
/* custom select styles */
|
|
.select-area {
|
|
background-color: #fff;
|
|
background-image: none;
|
|
border: 1px solid #e7e9e9;
|
|
border-radius: 4px;
|
|
color: #555;
|
|
position: relative;
|
|
overflow: hidden;
|
|
cursor: default;
|
|
display: block;
|
|
float: left;
|
|
font-size: 14px;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
padding: 0px 12px;
|
|
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
|
|
width: 100% !important;
|
|
}
|
|
.select-focus {
|
|
border-color: #2c3e50;
|
|
color: #2c3e50;
|
|
}
|
|
.select-area .center {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.select-disabled {
|
|
background: #eee;
|
|
}
|
|
.select-area .select-opener {
|
|
background: $custom-elements-sprite-bg -18px -119px;
|
|
position: absolute;
|
|
width: 22px;
|
|
height: 12px;
|
|
right: 15px;
|
|
top: 16px;
|
|
}
|
|
.select-options {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
z-index: 2000;
|
|
}
|
|
.select-options .opt-disabled a {
|
|
background: #fff !important;
|
|
color: #aaa !important;
|
|
}
|
|
.select-options .drop-holder {
|
|
border: 1px solid #ededed;
|
|
overflow: hidden;
|
|
height: 1%;
|
|
}
|
|
.select-options .drop-holder .drop-list {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
max-height: 240px;
|
|
}
|
|
.select-options ul {
|
|
list-style: none;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.select-options ul li {
|
|
width: 100%;
|
|
float: left;
|
|
}
|
|
.select-options ul a {
|
|
text-decoration: none;
|
|
padding: 5px 10px;
|
|
display: block;
|
|
cursor: default;
|
|
color: #555;
|
|
height: 1%;
|
|
}
|
|
.select-options .item-selected a {
|
|
text-decoration: none;
|
|
background: #eff7ff;
|
|
color: #3498db;
|
|
}
|
|
/* select options optgroup example styles */
|
|
.select-options .optgroup {
|
|
clear: both;
|
|
}
|
|
.select-options .optgroup strong {
|
|
display: block;
|
|
padding: 5px;
|
|
}
|
|
.select-options .optgroup ul a {
|
|
padding-left: 30px;
|
|
}
|
|
/* textarea example styles (optional) */
|
|
.text-block .control-wrapper {
|
|
border: 1px solid #777;
|
|
float: left;
|
|
}
|
|
.text-block textarea {
|
|
font-size: 12px;
|
|
width: 500px;
|
|
height: 150px;
|
|
float: left;
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
/* custom file input */
|
|
.file-area .jcf-input-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin: 0 !important;
|
|
display: block;
|
|
float: left !important;
|
|
width: 90px !important;
|
|
height: 30px !important;
|
|
}
|
|
.file-area .jcf-upload-button {
|
|
border: 0;
|
|
padding: 0px 0px;
|
|
background: #24a235;
|
|
color: #fff;
|
|
text-align: center;
|
|
float: left;
|
|
width: 90px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
border-radius: 4px;
|
|
}
|
|
.select-circle .file-area .jcf-input-wrapper {
|
|
width: 42px !important;
|
|
height: 42px !important;
|
|
}
|
|
.select-circle .jcf-upload-button {
|
|
background: $custom-elements-sprite-bg -241px -103px;
|
|
width: 42px;
|
|
height: 42px;
|
|
font-size: 0;
|
|
}
|
|
|
|
|
|
|
|
.file-area .jcf-fake-input {
|
|
// border: 1px solid #777;
|
|
// padding: 10px 15px;
|
|
// float: left;
|
|
// margin: 0 5px;
|
|
// width: 200px;
|
|
// height: 20px;
|
|
display: none !important;
|
|
}
|
|
.file-disabled .jcf-upload-button {
|
|
border-color: #eee;
|
|
background-color: #eee;
|
|
color: #777;
|
|
}
|
|
.file-disabled .jcf-fake-input {
|
|
border-color: #eee;
|
|
color: #aaa;
|
|
}
|
|
/* custom scrollbars styles */
|
|
.scrollable-area-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100% !important;
|
|
}
|
|
.scrollable-area-wrapper .hscrollbar,
|
|
.scrollable-area-wrapper .vscrollbar {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0;
|
|
width: 10px;
|
|
}
|
|
.scrollable-area-wrapper .hscroll-left,
|
|
.scrollable-area-wrapper .vscroll-up,
|
|
.scrollable-area-wrapper .hscroll-right,
|
|
.scrollable-area-wrapper .vscroll-down {
|
|
background: #777;
|
|
width: 20px;
|
|
height: 20px;
|
|
float: left;
|
|
display: none;
|
|
}
|
|
.scrollable-area-wrapper .hscroll-line,
|
|
.scrollable-area-wrapper .vscroll-line {
|
|
background: #ecf0f1;
|
|
width: 11px;
|
|
float: left;
|
|
}
|
|
.scrollable-area-wrapper .hscroll-slider,
|
|
.scrollable-area-wrapper .vscroll-slider {
|
|
background: #34495e;
|
|
width: 11px;
|
|
height: 20px;
|
|
}
|
|
.scrollable-area-wrapper .hscrollbar {
|
|
position: static;
|
|
height: 20px;
|
|
top: auto;
|
|
}
|
|
.scrollable-area-wrapper .hscroll-line {
|
|
height: 20px;
|
|
width: auto;
|
|
}
|
|
/* Retian Sprite */
|
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 100dpi) {
|
|
/*logo sprite*/
|
|
// .chk-area,
|
|
// .chk-checked,
|
|
// .chk-disabled,
|
|
// .rad-area,
|
|
// .rad-checked,
|
|
// .rad-disabled,
|
|
// .no-yes .chk-area,
|
|
// .no-yes .chk-checked,
|
|
// .no-yes .chk-disabled,
|
|
// .check-out .chk-area,
|
|
// .check-out .chk-checked,
|
|
// .check-out .chk-disabled,
|
|
// .on-off .chk-area,
|
|
// .on-off .chk-checked,
|
|
// .on-off .chk-disabled,
|
|
// .select-area .select-opener,
|
|
// .select-circle .jcf-upload-button
|
|
// {
|
|
// /* Reference the @2x Sprite */
|
|
// background-image:url('../images/custom-elements-sprite@2x.png') !important;
|
|
// /* Translate the @2x sprite's dimensions back to 1x */
|
|
// background-size: 320px 150px !important;
|
|
// }
|
|
} |