867 lines
23 KiB
CSS
867 lines
23 KiB
CSS
#frame_contents #mtop_title_block {
|
|
display: flex;
|
|
height: var(--main_title_height);
|
|
justify-content: space-between;
|
|
}
|
|
|
|
|
|
#frame_contents #mtop_title_block #mtop_title {
|
|
line-height: var(--main_title_height);
|
|
vertical-align: bottom;
|
|
}
|
|
#frame_contents #mtop_title_block #mtop_title .title {
|
|
flex: 1;
|
|
display: inline-block;
|
|
color: var(--color_text_title);
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
margin-left: 0;
|
|
}
|
|
|
|
#frame_contents #mtop_title_block #mtop_title .top_breadcrumb {
|
|
flex: 1;
|
|
display: inline-block;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
#frame_contents #mtop_title_block #mtop_btn_group {
|
|
line-height: var(--main_title_height);
|
|
}
|
|
#frame_contents #mtop_title_block #mtop_btn_group * {
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
|
|
#frame_contents #mtop_search {
|
|
height: var(--main_search_height);
|
|
border-radius: 6px;
|
|
background-color: #f8f8f8;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
#frame_contents #mtop_search .search_item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
margin-bottom: 0px;
|
|
margin-left: 1em;
|
|
}
|
|
#frame_contents #mtop_search .search_item .label_title {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
min-width: 5em;
|
|
text-align: right;
|
|
padding-right: 10px;
|
|
}
|
|
#frame_contents #mtop_search .search_item input:not([type=radio]):not([type=checkbox]),
|
|
#frame_contents #mtop_search .search_item select {
|
|
min-width: 100px;
|
|
}
|
|
|
|
#frame_contents #main_content {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 25px;
|
|
}
|
|
#frame_contents #main_content.dashboard {
|
|
background-image: url(/inc/img/main_bg.png);
|
|
border-radius: 3px;
|
|
height: calc(100vh - 160px);
|
|
background-size: cover;
|
|
}
|
|
#frame_contents #main_content .ctop_title, .ctop_title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
#frame_contents #main_content .ctop_title .content_title, .ctop_title .content_title {
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
color: #666;
|
|
padding-left: 10px;
|
|
min-height: 30px;
|
|
}
|
|
#frame_contents #main_content .tbl_block {
|
|
width:100%;
|
|
overflow: auto;
|
|
margin-top: 6px;
|
|
/*height: 500px;*/
|
|
}
|
|
#frame_contents #main_content .tbl_block .tabulator-tableholder::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
background-color: var(--color_bg_scroll_main);
|
|
}
|
|
#frame_contents #main_content .tbl_block .tabulator-tableholder::-webkit-scrollbar-thumb {
|
|
background-color: var(--color_bg_scroll_float);
|
|
}
|
|
|
|
|
|
|
|
#frame_body #hamburger_icon {
|
|
position: absolute;
|
|
display: block;
|
|
background: var(--frame_main_bg);
|
|
top: 1px;
|
|
left: 0;
|
|
height: 2em;
|
|
z-index: 1000;
|
|
border: 1px solid var(--frame_bgcolor_sidebar);
|
|
border-left: none;
|
|
border-start-end-radius: 5px;
|
|
border-end-end-radius: 5px;
|
|
padding: 2px 3px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#frame_body #hamburger_icon .icon {
|
|
width: 0.8em;
|
|
font-size: 1.5em;
|
|
text-align: center;
|
|
color: var(--color_border_table_top);
|
|
font-family: "Font Awesome 6 Free";
|
|
font-weight: 900;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
display: var(--fa-display,inline-block);
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
line-height: 1;
|
|
text-rendering: auto;
|
|
-webkit-transition: all 0.5s;
|
|
transition: left 0.5s;
|
|
}
|
|
#frame_body #hamburger_icon .icon::before {
|
|
content: "\f0d9";
|
|
}
|
|
.full_width #frame_body #hamburger_icon .icon::before {
|
|
content: "\f0da";
|
|
}
|
|
|
|
#frame_body .dashboard{
|
|
background-image: url(/ksvc/img/main_bg.png);
|
|
}
|
|
|
|
.pop_top_title {
|
|
line-height: 1.6em;
|
|
vertical-align: bottom;
|
|
padding: 0px 10px 24px 10px;
|
|
}
|
|
.pop_top_title .title {
|
|
flex: 1;
|
|
display: inline-block;
|
|
color: #666;
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
margin-left: 0;
|
|
}
|
|
|
|
|
|
.contents_multi_column {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
}
|
|
.contents_multi_column .contents_column_list {
|
|
display: grid;
|
|
/*overflow: auto; 재고현황 문제*/
|
|
overflow: hidden;
|
|
align-content: stretch;
|
|
}
|
|
.contents_multi_column .has_full {
|
|
grid-template-rows: 100%;
|
|
}
|
|
.contents_multi_column .has_title {
|
|
grid-template-rows: 20px 100%;
|
|
}
|
|
.contents_multi_column .has_title_sk {
|
|
grid-template-rows: 30px calc(100% - 40px);
|
|
}
|
|
.contents_multi_column .contents_column_list:not(:first-child).has_title_sk {
|
|
grid-template-rows: 30px calc(100% - 50px);
|
|
}
|
|
.contents_multi_column .has_title .article_title + div {
|
|
height: calc(100% - 30px);
|
|
}
|
|
.contents_multi_column .contents_column_list:not(:first-child) {
|
|
margin-top: 10px;
|
|
}
|
|
.contents_multi_column .column_size_0{
|
|
height:0;
|
|
}
|
|
.contents_multi_column .column_size_1{
|
|
height:10%;
|
|
}
|
|
.contents_multi_column .column_size_2{
|
|
height:20%;
|
|
}
|
|
.contents_multi_column .column_size_3{
|
|
height:30%;
|
|
}
|
|
.contents_multi_column .column_size_4{
|
|
height:40%;
|
|
}
|
|
.contents_multi_column .column_size_5{
|
|
height:50%;
|
|
}
|
|
.contents_multi_column .column_size_5_1{
|
|
height: calc(50% - 20px);
|
|
}
|
|
.contents_multi_column .column_size_6{
|
|
height:60%;
|
|
}
|
|
.contents_multi_column .column_size_7{
|
|
height:70%;
|
|
}
|
|
.contents_multi_column .column_size_8{
|
|
height:80%;
|
|
}
|
|
.contents_multi_column .column_size_9{
|
|
height:90%;
|
|
}
|
|
.contents_multi_column .column_size_10{
|
|
height:100%;
|
|
}
|
|
.contents_multi_column .contents_column_list .column_tb_lator {
|
|
margin-top: 6px;
|
|
height:100%;
|
|
}
|
|
.tb_mh_5 {
|
|
min-height: calc(50vh - 147px); /* 200 + 각title 20 */
|
|
}
|
|
|
|
|
|
.contents_multi_block {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
overflow: auto;
|
|
}
|
|
.contents_multi_block.wrap{
|
|
flex-wrap: wrap;
|
|
}
|
|
.contents_multi_block .cotents_multi_list {
|
|
flex: 1;
|
|
}
|
|
.contents_column_list .cotents_multi_list {
|
|
display: grid;
|
|
}
|
|
.contents_multi_block .cotents_multi_list:not(:first-child) {
|
|
margin-left: 20px;
|
|
}
|
|
.contents_multi_block .block_size_0 {
|
|
flex: 0;
|
|
}
|
|
.contents_multi_block .block_size_1 {
|
|
flex: 1;
|
|
}
|
|
.contents_multi_block .block_size_2 {
|
|
flex: 2;
|
|
}
|
|
.contents_multi_block .block_size_3 {
|
|
flex: 3;
|
|
}
|
|
.contents_multi_block .block_size_4 {
|
|
flex: 4;
|
|
}
|
|
.contents_multi_block .block_size_5 {
|
|
flex: 5;
|
|
}
|
|
.contents_multi_block .block_size_6 {
|
|
flex: 6;
|
|
}
|
|
.contents_multi_block .block_size_7 {
|
|
flex: 7;
|
|
}
|
|
.contents_multi_block .block_size_8 {
|
|
flex: 8;
|
|
}
|
|
.contents_multi_block .block_size_9 {
|
|
flex: 9;
|
|
}
|
|
.contents_multi_block .block_size_10 {
|
|
flex: 10;
|
|
}
|
|
.contents_multi_block .block_size_11 {
|
|
flex: 11;
|
|
}
|
|
.contents_multi_block .block_size_12 {
|
|
flex: 12;
|
|
}
|
|
|
|
|
|
/* 조업시간 캘린더 */
|
|
#scalendar {
|
|
|
|
}
|
|
#scalendar .calTable {
|
|
width: 100%;
|
|
height: calc( 100% - 100px );
|
|
}
|
|
#scalendar .calTable th,
|
|
#scalendar .calTable td {
|
|
width: calc( 100% / 7 );
|
|
}
|
|
#scalendar .calTable thead {
|
|
background-color: var(--color_bg_table_title);
|
|
border-right: 1px solid var(--color_border_table_hright);
|
|
}
|
|
#scalendar .calTable thead th,
|
|
#scalendar .calTable thead td {
|
|
line-height: 200%;
|
|
text-align: center;
|
|
border-top: 1px solid var(--color_border_table_top);
|
|
border-left: 1px solid var(--color_border_table_hright);
|
|
}
|
|
#scalendar .calTable tbody {
|
|
border-bottom: 1px solid var(--color_border_table_bottom);
|
|
border-right: 1px solid var(--color_border_table_rline);
|
|
}
|
|
#scalendar .calTable tbody th,
|
|
#scalendar .calTable tbody td {
|
|
min-height: calc( 100% / 6 );
|
|
border-top: 1px solid var(--color_border_table_bline);
|
|
border-left: 1px solid var(--color_border_table_rline);
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
#scalendar .calTable tbody td .calcls {
|
|
display: block;
|
|
padding: 6px 0 0 6px;
|
|
font-weight: bold;
|
|
}
|
|
#scalendar .calTable tbody tr th:first-child .calcls,
|
|
#scalendar .calTable tbody tr td:first-child .calcls {
|
|
color: var(--color_text_tsub);
|
|
}
|
|
#scalendar .calTable tbody tr th:last-child .calcls,
|
|
#scalendar .calTable tbody tr td:last-child .calcls {
|
|
color: var(--color_text_title);
|
|
}
|
|
#scalendar .calTable tbody tr th .caltext label,
|
|
#scalendar .calTable tbody tr td .caltext label {
|
|
/*display: block;*/
|
|
padding-left: 10px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
#scalendar .selDiv {
|
|
text-align: center;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
#scalendar .selDiv a i {
|
|
display: inline-block;
|
|
font-size: 1.6em;
|
|
margin: 0 0.5em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#main_content .float-btn {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
}
|
|
|
|
|
|
/* 기본테이블 */
|
|
.basetable {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-bottom: 1px solid var(--color_border_table_bottom);
|
|
}
|
|
.basetable th {
|
|
text-align: center;
|
|
background-color: var(--color_bg_table_title);
|
|
border-top: 1px solid var(--color_border_table_top);
|
|
border-bottom: 1px solid var(--color_border_table_hbottom);
|
|
color: var(--color_text_dsub); font-weight: normal;
|
|
height: 26px;
|
|
}
|
|
.basetable th:not(:first-child) {
|
|
border-left: 1px solid var(--color_border_table_hright);
|
|
}
|
|
.basetable td {
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
border-bottom: 1px solid var(--color_border_table_bline);
|
|
height: 26px;
|
|
}
|
|
.basetable td:not(:last-child:first-child) {
|
|
border-left: 1px solid var(--color_border_table_rline);
|
|
}
|
|
.basetable td:last-child:first-child {
|
|
border-right: 1px solid var(--color_border_table_rline);
|
|
}
|
|
.basetable thead.top_sticky, .basetable thead.top_sticky th {
|
|
position: sticky;
|
|
top:0;
|
|
left:0;
|
|
}
|
|
|
|
|
|
/* 타임라인 챠트용 */
|
|
.sg-gantt {
|
|
border-top: 1px solid var(--color_border_table_top);
|
|
border-bottom: 1px solid var(--color_border_table_bottom);
|
|
}
|
|
.sg-gantt .sg-header,
|
|
.sg-gantt .sg-table-header {
|
|
background-color: var(--color_bg_table_title);
|
|
}
|
|
.sg-gantt .column-header-cell.svelte-1eoeq9j.svelte-1eoeq9j {
|
|
border-right: 1px solid var(--color_border_table_hright);
|
|
border-bottom: 1px solid var(--color_border_table_hbottom);
|
|
}
|
|
.sg-gantt .sg-task {
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
border: solid 1px #424242;
|
|
cursor: all-scroll;
|
|
text-shadow: 1px 1px 3px black;
|
|
}
|
|
.sg-gantt .sg-task.selected.svelte-6l5eiz {
|
|
outline: none;
|
|
}
|
|
|
|
.sg-gantt .sg-task.color1 {
|
|
color: #212121;
|
|
background-color: #eceff1;
|
|
}
|
|
.sg-gantt .sg-task.color1.selected {
|
|
color: #212121;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.sg-gantt .sg-task.color2 {
|
|
color: #212121;
|
|
background-color: #cfd8dc;
|
|
}
|
|
.sg-gantt .sg-task.color2.selected {
|
|
color: #212121;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.sg-gantt .sg-task.color3 {
|
|
color: #212121;
|
|
background-color: #b0bec5;
|
|
}
|
|
.sg-gantt .sg-task.color3.selected {
|
|
color: #212121;
|
|
background-color: #eeeeee;
|
|
}
|
|
|
|
.sg-gantt .sg-task.color4 {
|
|
color: #212121;
|
|
background-color: #90a4ae;
|
|
}
|
|
.sg-gantt .sg-task.color4.selected {
|
|
color: #212121;
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
.sg-gantt .sg-task.color5 {
|
|
background-color: #78909c;
|
|
}
|
|
.sg-gantt .sg-task.color5.selected {
|
|
background-color: #bdbdbd;
|
|
}
|
|
|
|
.sg-gantt .sg-task.color6 {
|
|
background-color: #607d8b;
|
|
}
|
|
.sg-gantt .sg-task.color6.selected {
|
|
background-color: #9e9e9e;
|
|
}
|
|
|
|
.sg-gantt .sg-task.color7 {
|
|
background-color: #546e7a;
|
|
}
|
|
.sg-gantt .sg-task.color7.selected {
|
|
background-color: #757575;
|
|
}
|
|
|
|
.sg-gantt .sg-task.color8 {
|
|
background-color: #455a64;
|
|
}
|
|
.sg-gantt .sg-task.color8.selected {
|
|
background-color: #616161;
|
|
}
|
|
|
|
.sg-gantt .sg-task.color9 {
|
|
background-color: #37474f;
|
|
}
|
|
.sg-gantt .sg-task.color9.selected {
|
|
background-color: #424242;
|
|
}
|
|
|
|
.sg-gantt .sg-task.color10, .sg-gantt .sg-task.color0 {
|
|
background-color: #263238;
|
|
}
|
|
.sg-gantt .sg-task.color10.selected, .sg-gantt .sg-task.color0.selected {
|
|
background-color: #212121;
|
|
}
|
|
|
|
.sg-gantt .sg-task.selected {
|
|
/*
|
|
border-top-width: 2px;
|
|
border-bottom-width: 2px;*/
|
|
}
|
|
|
|
.sg-task.selected.svelte-6l5eiz {
|
|
z-index: 3;
|
|
}
|
|
|
|
.sg-gantt .sg-task.dragging-enabled {
|
|
z-index: 2;
|
|
}
|
|
|
|
.sg-gantt .sg-task.dragging-enabled.svelte-6l5eiz:hover::after,
|
|
.sg-gantt .sg-task.dragging-enabled.svelte-6l5eiz:hover::before {
|
|
border-color: #666;
|
|
}
|
|
|
|
.sg-gantt .sg-time-range-control {
|
|
display: none;
|
|
}
|
|
|
|
.off_hours {
|
|
background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0) 46%, #666666 49%, #595858 51%, rgba(0, 0, 0, 0) 55%) !important;
|
|
}
|
|
|
|
.main_form, .main_box {
|
|
position: relative;
|
|
background-color: #fff;
|
|
padding: 10px;
|
|
height: 100%;
|
|
overflow: auto;
|
|
margin-top: 6px;
|
|
border-top: 1px solid var(--color_border_table_top);
|
|
}
|
|
.main_form .fld-block {
|
|
display: flex;
|
|
border-bottom: solid 1px #e4e4e4;
|
|
padding-bottom: 6px;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.main_form .fld-block .btn-group label {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.main_form label.title {
|
|
min-width: 100px;
|
|
border-right: solid 1px gray;
|
|
padding-right: 12px;
|
|
margin-right: 12px;
|
|
text-align: right;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.main_form .fld-bottom {
|
|
position: sticky;
|
|
bottom:0;
|
|
left:0;
|
|
text-align: center;
|
|
padding: 6px;
|
|
margin-top: 6px;
|
|
background-color: #E8E8E8;
|
|
z-index: 1;
|
|
}
|
|
|
|
.main_form .btnClose {
|
|
position: sticky;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
.main_form .btn-group > .btn {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.main_form.member_info {
|
|
padding: 20px;
|
|
}
|
|
.main_form .disabled {
|
|
background-color: #F0f0f0;
|
|
border: none;
|
|
}
|
|
|
|
#attfilepond, #rdrawfilepond{
|
|
position: absolute;
|
|
top: -10000px;
|
|
left: -10000px;
|
|
}
|
|
|
|
|
|
/* 기타 ETC ... ??? */
|
|
|
|
input.cals {
|
|
background-image: url(/ksvc/inc/img/cals.png);
|
|
background-repeat: no-repeat;
|
|
background-position: right;
|
|
}
|
|
|
|
.s_exp {
|
|
font-size: 0.8em;
|
|
color: darkcyan;
|
|
}
|
|
|
|
.d-hide {
|
|
display: none !important;
|
|
}
|
|
|
|
#loading_div {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
line-height: 100vh;
|
|
top: 0px;
|
|
left: 0px;
|
|
background: #00000055;
|
|
z-index: 1000;
|
|
text-align: center;
|
|
}
|
|
|
|
/*.sg-gantt .sg-task.color1 {*/
|
|
/* background-color: #d32f2f;*/
|
|
/*}*/
|
|
/*.sg-gantt .sg-task.color1.selected {*/
|
|
/* background-color: #b71c1c;*/
|
|
/*}*/
|
|
|
|
/*.sg-gantt .sg-task.color2 {*/
|
|
/* background-color: #7b1fa2;*/
|
|
/*}*/
|
|
/*.sg-gantt .sg-task.color2.selected {*/
|
|
/* background-color: #4a148c;*/
|
|
/*}*/
|
|
|
|
/*.sg-gantt .sg-task.color3 {*/
|
|
/* background-color: #303f9f;*/
|
|
/*}*/
|
|
/*.sg-gantt .sg-task.color3.selected {*/
|
|
/* background-color: #1a237e;*/
|
|
/*}*/
|
|
|
|
/*.sg-gantt .sg-task.color4 {*/
|
|
/* background-color: #0288d1;*/
|
|
/*}*/
|
|
/*.sg-gantt .sg-task.color4.selected {*/
|
|
/* background-color: #01579b;*/
|
|
/*}*/
|
|
|
|
/*.sg-gantt .sg-task.color5 {*/
|
|
/* background-color: #00796b;*/
|
|
/*}*/
|
|
/*.sg-gantt .sg-task.color5.selected {*/
|
|
/* background-color: #004d40;*/
|
|
/*}*/
|
|
|
|
/*.sg-gantt .sg-task.color6 {*/
|
|
/* background-color: #689f38;*/
|
|
/*}*/
|
|
/*.sg-gantt .sg-task.color6.selected {*/
|
|
/* background-color: #33691e;*/
|
|
/*}*/
|
|
|
|
/*.sg-gantt .sg-task.color7 {*/
|
|
/* background-color: #fbc02d;*/
|
|
/*}*/
|
|
/*.sg-gantt .sg-task.color7.selected {*/
|
|
/* background-color: #f57f17;*/
|
|
/*}*/
|
|
|
|
/*.sg-gantt .sg-task.color8 {*/
|
|
/* background-color: #f57c00;*/
|
|
/*}*/
|
|
/*.sg-gantt .sg-task.color8.selected {*/
|
|
/* background-color: #e65100;*/
|
|
/*}*/
|
|
|
|
/*.sg-gantt .sg-task.color9 {*/
|
|
/* background-color: #5d4037;*/
|
|
/*}*/
|
|
/*.sg-gantt .sg-task.color9.selected {*/
|
|
/* background-color: #3e2723;*/
|
|
/*}*/
|
|
|
|
/*.sg-gantt .sg-task.color10 {*/
|
|
/* background-color: #455a64;*/
|
|
/*}*/
|
|
/*.sg-gantt .sg-task.color10.selected {*/
|
|
/* background-color: #263238;*/
|
|
/*}*/
|
|
|
|
|
|
/*
|
|
Project: Toggle Switchy
|
|
Version: 1.14
|
|
Updated: 8/20/2020
|
|
Author: Adam Culpepper | @adamculpepper
|
|
Website: https://toggleswitchy.com
|
|
Docs: https://github.com/adamculpepper/toggle-switchy
|
|
Issues: https://github.com/adamculpepper/toggle-switchy/issues
|
|
Releases: https://github.com/adamculpepper/toggle-switchy/releases
|
|
*/
|
|
|
|
/* Customizable styles */
|
|
|
|
/* Colors: Default (blue) */
|
|
.toggle-switchy {color:#fff;}
|
|
.toggle-switchy > .toggle:before {content:attr(on);}
|
|
.toggle-switchy > .toggle:after {content:attr(off);}
|
|
.toggle-switchy > .toggle > .switch {background:#fff;}
|
|
.toggle-switchy > .toggle + .label {color:#000;}
|
|
.toggle-switchy > input:checked + .toggle,
|
|
.toggle-switchy > .checked.toggle {background:var(--btn_bg_numG);}
|
|
.toggle-switchy > input:not(:checked) + .toggle,
|
|
.toggle-switchy > .notchecked.toggle {background:var(--color_check_table_label);}
|
|
.toggle-switchy > input:checked + .toggle > .switch,
|
|
.toggle-switchy > .checked.toggle > .switch {border:2px solid var(--btn_bg_numG);}
|
|
.toggle-switchy > input:not(:checked) + .toggle > .switch,
|
|
.toggle-switchy > .notchecked.toggle > .switch {border:2px solid var(--color_check_table_label);}
|
|
|
|
/* Rounded switch corners */
|
|
.toggle-switchy > .toggle {border-radius:4px;}
|
|
.toggle-switchy > .toggle .switch {border-radius:6px;}
|
|
|
|
/* //////////////////////////
|
|
CORE STYLES BELOW - NO TOUCHY
|
|
////////////////////////// */
|
|
.toggle-switchy {display:inline-flex; align-items:center; user-select:none; position:relative; vertical-align:middle; margin-bottom:0;}
|
|
.toggle-switchy:hover {cursor:pointer;}
|
|
.toggle-switchy > input {position:absolute; opacity:0;}
|
|
.toggle-switchy > .toggle {align-items:center; position:relative;}
|
|
.toggle-switchy > .toggle {overflow:hidden; position:relative; flex-shrink:0;}
|
|
.toggle-switchy > input[disabled] + .toggle,
|
|
.toggle-switchy > .disabled.toggle{opacity:0.5;}
|
|
.toggle-switchy > input[disabled] + .toggle:hover,
|
|
.toggle-switchy > .disabled.toggle:hover {cursor:not-allowed;}
|
|
.toggle-switchy > .toggle {width:100%; height:100%; margin:0; cursor:pointer;}
|
|
.toggle-switchy > .toggle > .switch {display:block; height:100%; position:absolute; right:0; z-index:3; box-sizing:border-box;}
|
|
|
|
/* Labels */
|
|
.toggle-switchy > .toggle:before,
|
|
.toggle-switchy > .toggle:after {display:flex; align-items:center; position:absolute; z-index:2; height:100%;}
|
|
.toggle-switchy > .toggle:before {right:55%;}
|
|
.toggle-switchy > .toggle:after {left:50%;}
|
|
.toggle-switchy > .toggle + .label {margin-left:10px;}
|
|
.toggle-switchy[data-label='left'] > .toggle {order:2;}
|
|
.toggle-switchy[data-label='left'] > .toggle + .label {order:1; margin-left:0; margin-right:10px;}
|
|
|
|
/* Show / Hide */
|
|
.toggle-switchy > .toggle:before {opacity:0;}
|
|
.toggle-switchy > input:checked + .toggle:before,
|
|
.toggle-switchy > .checked.toggle:before {opacity:1;}
|
|
.toggle-switchy > input:checked + .toggle:after,
|
|
.toggle-switchy > .checked.toggle:after {opacity:0;}
|
|
|
|
/* Transitions */
|
|
.toggle-switchy > .toggle {transition:background 30ms linear, box-shadow 30ms linear;}
|
|
.toggle-switchy > .toggle:before,
|
|
.toggle-switchy > .toggle:after {transition:all 30ms linear;}
|
|
.toggle-switchy > .toggle > .switch {transition:right 30ms linear, border-color 30ms linear;}
|
|
/* //////////////////////////
|
|
CORE STYLES ABOVE - NO TOUCHY
|
|
////////////////////////// */
|
|
|
|
/* Size: Extra Large */
|
|
.toggle-switchy[data-size='xl'] > .toggle {width:85px; height:40px;}
|
|
.toggle-switchy[data-size='xl'] > .toggle > .switch {width:40px;}
|
|
.toggle-switchy[data-size='xl'] > .toggle:before,
|
|
.toggle-switchy[data-size='xl'] > .toggle:after {font-size:1.2rem;}
|
|
.toggle-switchy[data-size='xl'] > input:not(:checked) + .toggle > .switch,
|
|
.toggle-switchy[data-size='xl'] > .notchecked.toggle > .switch {right:calc(100% - 40px);}
|
|
|
|
/* Size: Large */
|
|
.toggle-switchy[data-size='lg'] > .toggle {width:75px; height:35px;}
|
|
.toggle-switchy[data-size='lg'] > .toggle > .switch {width:35px;}
|
|
.toggle-switchy[data-size='lg'] > .toggle:before,
|
|
.toggle-switchy[data-size='lg'] > .toggle:after {font-size:1rem;}
|
|
.toggle-switchy[data-size='lg'] > input:not(:checked) + .toggle > .switch,
|
|
.toggle-switchy[data-size='lg'] > .notchecked.toggle > .switch {right:calc(100% - 35px);}
|
|
|
|
/* Size: Default (Medium) */
|
|
.toggle-switchy > .toggle {width:65px; height:30px;}
|
|
.toggle-switchy > .toggle > .switch {width:30px;}
|
|
.toggle-switchy > .toggle:before,
|
|
.toggle-switchy > .toggle:after {font-size:0.8rem;}
|
|
.toggle-switchy > input:not(:checked) + .toggle > .switch,
|
|
.toggle-switchy > .notchecked.toggle > .switch {right:calc(100% - 30px);}
|
|
|
|
/* Size: Small */
|
|
.toggle-switchy[data-size='sm'] > .toggle {width:55px; height:22px;}
|
|
.toggle-switchy[data-size='sm'] > .toggle > .switch {width:22px;}
|
|
.toggle-switchy[data-size='sm'] > .toggle:before,
|
|
.toggle-switchy[data-size='sm'] > .toggle:after {font-size:0.75rem;}
|
|
.toggle-switchy[data-size='sm'] > input:not(:checked) + .toggle > .switch,
|
|
.toggle-switchy[data-size='sm'] > .notchecked.toggle > .switch {right:calc(100% - 22px);}
|
|
|
|
/* Size: Extra Small */
|
|
.toggle-switchy[data-size='xs'] > .toggle {width:45px; height:18px;}
|
|
.toggle-switchy[data-size='xs'] > .toggle > .switch {width:18px;}
|
|
.toggle-switchy[data-size='xs'] > .toggle:before,
|
|
.toggle-switchy[data-size='xs'] > .toggle:after {font-size:0.7rem;}
|
|
.toggle-switchy[data-size='xs'] > input:not(:checked) + .toggle > .switch,
|
|
.toggle-switchy[data-size='xs'] > .notchecked.toggle > .switch {right:calc(100% - 18px);}
|
|
|
|
/* Style: Rounded */
|
|
.toggle-switchy[data-style='rounded'] > .toggle,
|
|
.toggle-switchy[data-style='rounded'] > .toggle > .switch {border-radius:50px;}
|
|
.toggle-switchy[data-style='rounded'] > .toggle:before {right:42%;}
|
|
.toggle-switchy[data-style='rounded'] > .toggle:after {left:42%;}
|
|
|
|
/* Style: Square */
|
|
.toggle-switchy[data-style='square'] > .toggle {border-radius:0;}
|
|
.toggle-switchy[data-style='square'] > .toggle .switch {border-radius:0;}
|
|
|
|
/* Text: Off */
|
|
.toggle-switchy[data-text='false'] > .toggle:before,
|
|
.toggle-switchy[data-text='false'] > .toggle:after {content:'';}
|
|
.toggle-switchy[data-text='false'][data-size='xl'] > .toggle {width:80px;}
|
|
.toggle-switchy[data-text='false'][data-size='lg'] > .toggle {width:70px;}
|
|
.toggle-switchy[data-text='false'] > .toggle {width:60px;}
|
|
.toggle-switchy[data-text='false'][data-size='sm'] > .toggle {width:50px;}
|
|
.toggle-switchy[data-text='false'][data-size='xs'] > .toggle {width:40px;}
|
|
|
|
/* Color: Red */
|
|
.toggle-switchy[data-color='red'] > input:checked + .toggle,
|
|
.toggle-switchy[data-color='red'] > .checked.toggle {background:#e74c3c;}
|
|
.toggle-switchy[data-color='red'] > input:checked + .toggle > .switch,
|
|
.toggle-switchy[data-color='red'] > .checked.toggle > .switch {border-color:#e74c3c;}
|
|
|
|
/* Color: Orange */
|
|
.toggle-switchy[data-color='orange'] > input:checked + .toggle,
|
|
.toggle-switchy[data-color='orange'] > .checked.toggle {background:#e67e22;}
|
|
.toggle-switchy[data-color='orange'] > input:checked + .toggle > .switch,
|
|
.toggle-switchy[data-color='orange'] > .checked.toggle > .switch {border-color:#e67e22;}
|
|
|
|
/* Color: Yellow */
|
|
.toggle-switchy[data-color='yellow'] > input:checked + .toggle,
|
|
.toggle-switchy[data-color='yellow'] > .checked.toggle {background:#f1c40f;}
|
|
.toggle-switchy[data-color='yellow'] > input:checked + .toggle > .switch,
|
|
.toggle-switchy[data-color='yellow'] > .checked.toggle > .switch {border-color:#f1c40f;}
|
|
|
|
/* Color: Green */
|
|
.toggle-switchy[data-color='green'] > input:checked + .toggle,
|
|
.toggle-switchy[data-color='green'] > .checked.toggle {background:#2ecc71;}
|
|
.toggle-switchy[data-color='green'] > input:checked + .toggle > .switch,
|
|
.toggle-switchy[data-color='green'] > .checked.toggle > .switch {border-color:#2ecc71;}
|
|
|
|
/* Color: Blue */
|
|
.toggle-switchy[data-color='blue'] > input:checked + .toggle,
|
|
.toggle-switchy[data-color='blue'] > .checked.toggle {background:#3498db;}
|
|
.toggle-switchy[data-color='blue'] > input:checked + .toggle > .switch,
|
|
.toggle-switchy[data-color='blue'] > .checked.toggle > .switch{border-color:#3498db;}
|
|
|
|
/* Color: Purple */
|
|
.toggle-switchy[data-color='purple'] > input:checked + .toggle,
|
|
.toggle-switchy[data-color='purple'] > .checked.toggle {background:#9b59b6;}
|
|
.toggle-switchy[data-color='purple'] > input:checked + .toggle > .switch,
|
|
.toggle-switchy[data-color='purple'] > .checked.toggle > .switch {border-color:#9b59b6;}
|
|
|
|
/* Color: Gray */
|
|
.toggle-switchy[data-color='gray'] > input:checked + .toggle,
|
|
.toggle-switchy[data-color='gray'] > .checked.toggle {background:#555;}
|
|
.toggle-switchy[data-color='gray'] > input:checked + .toggle > .switch,
|
|
.toggle-switchy[data-color='gray'] > .checked.toggle > .switch {border-color:#555;} |