462 lines
6.7 KiB
SCSS
462 lines
6.7 KiB
SCSS
@import "desktop-helper";
|
|
|
|
.noSelect {
|
|
@include no-select;
|
|
}
|
|
|
|
/* tinygrid */
|
|
.s_grid_row {
|
|
overflow: hidden;
|
|
position: relative;
|
|
margin-bottom: 12px;
|
|
|
|
.s_grid {
|
|
float: left;
|
|
margin: 0 0 0 12px;
|
|
@include box-sizing;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
// fixed width column with 12px gutter
|
|
// 276px width for 8 columns
|
|
// 420px width for 12 columns
|
|
// 564px width for 16 columns
|
|
@for $i from 1 through 16 {
|
|
.s_grid_#{$i} {
|
|
width: 36px * $i - 12px;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// fixed height row
|
|
// full height 428px
|
|
@for $j from 1 through 10 {
|
|
.s_grid_h_#{$j} {
|
|
height: 44px * $j - 12px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/* simple dropdown menu */
|
|
.sdm {
|
|
position: relative;
|
|
}
|
|
.sdm_t {
|
|
cursor: default;
|
|
@include transition-type(all, 0.3);
|
|
}
|
|
.sdm:hover .sdm_o {
|
|
display: block;
|
|
}
|
|
.sdm_o {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 9;
|
|
left: 0;
|
|
top: 60px;
|
|
font-size: 15px;
|
|
min-width: 120px;
|
|
border: solid 2px $gray;
|
|
@include box-sizing;
|
|
|
|
li {
|
|
border-top: solid 1px lighten( $gray, 10% );
|
|
}
|
|
li:first-child {
|
|
border: none;
|
|
}
|
|
a {
|
|
display: block;
|
|
}
|
|
.admtxt {
|
|
display: block;
|
|
line-height: 36px;
|
|
}
|
|
}
|
|
|
|
/* simple dropdown menu with indicator */
|
|
.sdm_mdr .sdm_t {
|
|
padding-right: 12px;
|
|
}
|
|
.sdm_mdr .mdr {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
/* simple menu */
|
|
.s_menu {
|
|
font-size: 15px;
|
|
line-height: 36px;
|
|
|
|
li {
|
|
border-top: solid 1px lighten($gray, 5%);
|
|
}
|
|
li:first-child {
|
|
border: none;
|
|
}
|
|
a {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* simple tabs */
|
|
.s_tab {
|
|
font-size: 15px;
|
|
line-height: 36px;
|
|
|
|
ul {
|
|
overflow: hidden;
|
|
}
|
|
li {
|
|
float: left;
|
|
}
|
|
a {
|
|
display: block;
|
|
}
|
|
.admbg {
|
|
background-color: #f0f0f0;
|
|
}
|
|
}
|
|
.stb_h {}
|
|
.stb_v {}
|
|
.st_c {
|
|
display: none;
|
|
|
|
&:first-child {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* simple form */
|
|
.s_form {
|
|
font-size: 15px;
|
|
|
|
// basic style
|
|
label {
|
|
font-size: 13px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 100px;
|
|
margin-right: 24px;
|
|
color: #777;
|
|
|
|
&.s_grid {
|
|
line-height: 32px;
|
|
}
|
|
}
|
|
input[type=text],
|
|
input[type=password],
|
|
input[type=submit],
|
|
input[type=reset],
|
|
input[type=button],
|
|
select {
|
|
height: 32px;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
input[type=file] {
|
|
// margin: 0px;
|
|
vertical-align: baseline;
|
|
}
|
|
input[type=text],
|
|
input[type=password],
|
|
textarea {
|
|
border: solid 1px $gray;
|
|
font-size: 15px;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding: 6px;
|
|
@include transition-type(all, 0.3);
|
|
@include box-sizing;
|
|
|
|
&:focus {
|
|
// background-color: lighten($gray, 10%);
|
|
border-color: darken($gray, 10%);
|
|
}
|
|
}
|
|
textarea {
|
|
resize: none;
|
|
|
|
&.full_height {
|
|
height: 456px;
|
|
}
|
|
}
|
|
.s_table {
|
|
width: 100%;
|
|
}
|
|
.s_table th,
|
|
.s_table td {
|
|
padding: 6px 0;
|
|
}
|
|
.s_table th {
|
|
text-align: left;
|
|
}
|
|
.s_table td {
|
|
vertical-align: middle;
|
|
}
|
|
.s_table thead th {
|
|
border-bottom: solid 1px #eee;
|
|
}
|
|
}
|
|
|
|
/* simple select */
|
|
.s_select_g {
|
|
padding: 4px 8px;
|
|
// border: solid 1px $gray;
|
|
@include box-sizing;
|
|
|
|
li {
|
|
margin: 0 6px 6px 0;
|
|
padding: 0;
|
|
}
|
|
li,
|
|
li > * {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
label {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
> label {
|
|
font-size: 15px;
|
|
display: block;
|
|
padding: 4px 0;
|
|
}
|
|
li label {
|
|
padding-left: 4px;
|
|
cursor: pointer;
|
|
|
|
&:before {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 14px;
|
|
height: 14px;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
margin-right: 6px;
|
|
content: '';
|
|
border: solid 1px darken($gray, 10%);
|
|
}
|
|
}
|
|
input[type=checkbox],
|
|
input[type=radio]
|
|
{
|
|
display: none;
|
|
}
|
|
input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before {
|
|
background-color: darken($gray, 60%);
|
|
border-color: darken($gray, 60%);
|
|
color: #fff;
|
|
@include font-icon(12);
|
|
}
|
|
input[type=checkbox]:checked + label:before {
|
|
content: "\f00c";
|
|
}
|
|
input[type=radio] + label:before {
|
|
border-radius: 8px;
|
|
}
|
|
input[type=radio]:checked + label:before {
|
|
content: "\f111";
|
|
font-size: 9px;
|
|
-webkit-text-size-adjust: none;
|
|
}
|
|
}
|
|
|
|
/* simple switch */
|
|
.s_switch {
|
|
overflow: hidden;
|
|
|
|
.s_switch_status {
|
|
font-size: 1.5em;
|
|
line-height: 20px;
|
|
height: 20px;
|
|
float: left;
|
|
margin-right: 60px;
|
|
}
|
|
.s_switch_switcher {
|
|
display: block;
|
|
float: right;
|
|
position: relative;
|
|
width: 48px;
|
|
height: 20px;
|
|
overflow: hidden;
|
|
|
|
input[type=checkbox] {
|
|
width: 144px;
|
|
height: 20px;
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: -96px;
|
|
|
|
+ .s_switch_toggle {
|
|
display: block;
|
|
position: absolute;
|
|
left: -2px;
|
|
top: -2px;
|
|
width: 16px;
|
|
height: 20px;
|
|
background-color: #000;
|
|
border: solid 2px #fff;
|
|
cursor: pointer;
|
|
@include transition-type(left,0.3);
|
|
}
|
|
&:checked + .s_switch_toggle {
|
|
left: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* tool bar */
|
|
.toolbar {
|
|
background-color: #f0f0f0;
|
|
font-size: 15px;
|
|
line-height: 36px;
|
|
position: relative;
|
|
z-index: 99;
|
|
|
|
.sdm, .fn_g {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
.sdm_o {
|
|
top: 36px;
|
|
}
|
|
button {
|
|
border: none;
|
|
outline: none;
|
|
padding: 0 16px;
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: 15px;
|
|
vertical-align: top;
|
|
}
|
|
.fn_btn {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
/* tiny scrollbar */
|
|
.tinycanvas {
|
|
overflow: hidden;
|
|
position: relative;
|
|
height: 100%;
|
|
|
|
.viewport {
|
|
width: auto;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
.overview {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
|
|
> .column {
|
|
float: left;
|
|
border-right: solid 1px #eee;
|
|
padding: 0 12px 0 0;
|
|
margin: 0 12px 0 0;
|
|
height: 100%;
|
|
|
|
&:last-child {
|
|
padding-right: 0;
|
|
margin-right: 0;
|
|
border-right: 0;
|
|
}
|
|
> ul {
|
|
height: 100%;
|
|
}
|
|
.datalist_item {
|
|
overflow: hidden;
|
|
padding-top: 3px;
|
|
@include box-sizing;
|
|
|
|
&:first-child {
|
|
padding-top: 0;
|
|
}
|
|
.inner {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
@include box-sizing;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.track {
|
|
height: 100%;
|
|
width: 6px;
|
|
position: relative;
|
|
}
|
|
.thumb {
|
|
height: 6px;
|
|
width: 6px;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
|
|
.end {
|
|
overflow: hidden;
|
|
height: 6px;
|
|
width: 6px;
|
|
}
|
|
}
|
|
.scrollbar {
|
|
position: absolute;
|
|
z-index: 9;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
@include transition-type(opacity, 0.3);
|
|
|
|
&.dragging {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
&.sb_h {
|
|
left: 0;
|
|
bottom: -6px;
|
|
height: 6px;
|
|
}
|
|
&.sb_v {
|
|
right: 0;
|
|
top: 0;
|
|
width: 6px;
|
|
}
|
|
}
|
|
.scrollbar.disable,
|
|
&:hover .scrollbar.disable {
|
|
visibility: hidden !important;
|
|
}
|
|
&:hover .scrollbar {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
.toolbar + &,
|
|
.s_tab + & {
|
|
height: 480px;
|
|
}
|
|
#panel_r & {
|
|
padding: 12px 0;
|
|
}
|
|
} |