mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
10 years ago
6 changed files with 345 additions and 383 deletions
@ -0,0 +1,290 @@ |
|||
/********* Input style **********/ |
|||
$inputFontColor: $mainLhlColor; /* #d5d5d5 */ |
|||
$arrowColor: $mainLhlColor; /* b1b1b1 */ |
|||
$darkTextShadow: $mainDkColor; /* #252525 */ |
|||
$darkBorder: rgba(0, 0, 0, 0.15); /* 303030 */ |
|||
$colorpSize: 22px; |
|||
|
|||
@mixin rangeThumbStyle() { |
|||
height: 10px; |
|||
width: 10px; |
|||
border: 1px solid $mainDkColor; |
|||
border-radius: 100%; |
|||
background-color: $fontColor; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
@mixin rangeTrackStyle() { |
|||
background-color: $mainDkColor; |
|||
border: 1px solid $darkBorder; |
|||
border-radius: 1px; |
|||
height: 2px; |
|||
} |
|||
|
|||
.#{$app-prefix}label { |
|||
line-height: 18px; |
|||
} |
|||
|
|||
.#{$app-prefix}field { |
|||
background-color: $mainDkColor; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
box-shadow: 1px 1px 0 $mainLhColor; |
|||
border-radius: 2px; |
|||
box-sizing: border-box; |
|||
padding: 0; |
|||
position: relative; |
|||
|
|||
input, |
|||
select { |
|||
@include appearance(none); |
|||
|
|||
color: $inputFontColor; |
|||
border: none; |
|||
background-color: transparent; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
position: relative; |
|||
padding: 3px 4px 4px; |
|||
z-index: 1; |
|||
} |
|||
|
|||
select { |
|||
height: 20px; |
|||
padding-right: 12px; |
|||
} |
|||
|
|||
option { |
|||
padding: 3px 0; |
|||
} |
|||
|
|||
.#{$app-prefix}sel-arrow { |
|||
height: 100%; |
|||
width: 9px; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
z-index: 0; |
|||
} |
|||
|
|||
.#{$app-prefix}d-s-arrow { |
|||
bottom: 7px; |
|||
border-top: 4px solid $arrowColor; |
|||
position: absolute; |
|||
height: 0; |
|||
width: 0; |
|||
border-left: 3px solid transparent; |
|||
border-right: 4px solid transparent; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.#{$app-prefix}field-color { |
|||
input { |
|||
padding-right: $colorpSize; |
|||
box-sizing: border-box; |
|||
} |
|||
} |
|||
|
|||
.#{$app-prefix}field-colorp { |
|||
border-left: 1px solid $mainDklColor; |
|||
box-sizing: border-box; |
|||
height: 100%; |
|||
padding: 2px; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
width: $colorpSize; |
|||
z-index: 10; |
|||
|
|||
.#{$app-prefix}checker-bg { |
|||
height: 100%; |
|||
width: 100%; |
|||
border-radius: 1px; |
|||
} |
|||
} |
|||
|
|||
.#{$app-prefix}field-colorp-c { |
|||
height: 100%; |
|||
position: relative; |
|||
width: 100%; |
|||
} |
|||
|
|||
.#{$app-prefix}field-color-picker { |
|||
background-color: $fontColor; |
|||
cursor: pointer; |
|||
height: 100%; |
|||
width: 100%; |
|||
box-shadow: 0 0 1px $mainDkColor; |
|||
border-radius: 1px; |
|||
position: absolute; |
|||
top: 0; |
|||
} |
|||
|
|||
.#{$app-prefix}field-radio { |
|||
float: left; |
|||
overflow: hidden; |
|||
padding: 0; |
|||
width: auto; |
|||
} |
|||
|
|||
/* ??? */ |
|||
.#{$app-prefix}field-checkbox { |
|||
padding: 0; |
|||
width: auto !important; |
|||
|
|||
input { |
|||
display: none; |
|||
} |
|||
|
|||
input:checked + .#{$app-prefix}chk-icon { |
|||
border-color: rgba(255, 255, 255, 0.5); |
|||
border-width: 0 2px 2px 0; |
|||
border-style: solid; |
|||
} |
|||
} |
|||
|
|||
.#{$app-prefix}radio-item { |
|||
float: left; |
|||
border-left: 1px solid $darkTextShadow; |
|||
|
|||
&:first-child { |
|||
border: none; |
|||
} |
|||
|
|||
&:hover { |
|||
background: $mainDkColor; |
|||
} |
|||
|
|||
input { |
|||
display: none; |
|||
} |
|||
|
|||
input:checked + .#{$app-prefix}radio-item-label { |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
} |
|||
|
|||
.#{$app-prefix}radio-item-label { |
|||
cursor: pointer; |
|||
display: block; |
|||
padding: 5px; |
|||
} |
|||
|
|||
.#{$app-prefix}field-units { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
|
|||
select { |
|||
padding: 0 12px 0 0; |
|||
} |
|||
} |
|||
|
|||
.#{$app-prefix}field-unit { |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 3px; |
|||
font-size: 10px; |
|||
color: $arrowColor; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.#{$app-prefix}field-arrows { |
|||
z-index: 10; |
|||
cursor: ns-resize; |
|||
height: 100%; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
width: 9px; |
|||
} |
|||
|
|||
.#{$app-prefix}field-arrow-u, |
|||
.#{$app-prefix}field-arrow-d { |
|||
position: absolute; |
|||
height: 0; |
|||
width: 0; |
|||
border-left: 3px solid transparent; |
|||
border-right: 4px solid transparent; |
|||
border-top: 4px solid $arrowColor; |
|||
bottom: 4px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.#{$app-prefix}field-arrow-u { |
|||
border-bottom: 4px solid $arrowColor; |
|||
border-top: none; |
|||
top: 4px; |
|||
} |
|||
|
|||
.#{$app-prefix}field-select { |
|||
padding: 0; |
|||
} |
|||
|
|||
.#{$app-prefix}field-range { |
|||
background-color: transparent; |
|||
border: none; |
|||
box-shadow: none; |
|||
padding: 0; |
|||
|
|||
input { |
|||
margin: 0; |
|||
} |
|||
|
|||
input::-moz-range-thumb { |
|||
@include rangeThumbStyle(); |
|||
} |
|||
|
|||
input::-webkit-slider-thumb { |
|||
-webkit-appearance: none; |
|||
margin-top: -5px; |
|||
|
|||
@include rangeThumbStyle(); |
|||
} |
|||
|
|||
input::-ms-thumb { |
|||
@include rangeThumbStyle(); |
|||
} |
|||
|
|||
input::-moz-range-track { |
|||
@include rangeTrackStyle(); |
|||
} |
|||
|
|||
input::-webkit-slider-runnable-track { |
|||
@include rangeTrackStyle(); |
|||
} |
|||
|
|||
input::-ms-track { |
|||
@include rangeTrackStyle(); |
|||
} |
|||
} |
|||
|
|||
.#{$app-prefix}chk-icon { |
|||
@include transform(rotate(45deg)); |
|||
|
|||
box-sizing: border-box; |
|||
display: block; |
|||
height: 14px; |
|||
margin: 0 5px; |
|||
width: 6px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.#{$app-prefix}add-trasp { |
|||
background: none; |
|||
border: none; |
|||
color: $fontColor; |
|||
cursor: pointer; |
|||
font-size: 1em; |
|||
border-radius: 2px; |
|||
|
|||
@include opacity(0.75); |
|||
|
|||
&:hover { |
|||
@include opacity(1); |
|||
} |
|||
|
|||
&:active { |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue