`
This commit is contained in:
CNERC-SD-010\kyu
+1091
File diff suppressed because it is too large
Load Diff
+875
@@ -0,0 +1,875 @@
|
||||
@import "tokens";
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.d-block{
|
||||
display: block !important;
|
||||
}
|
||||
/* Body 스크롤 비활성화 */
|
||||
.no-scroll {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Content 스크롤 활성화 */
|
||||
.scrollable {
|
||||
overflow-y: auto;
|
||||
scroll-behavior: smooth; /* 부드러운 스크롤 */
|
||||
-webkit-overflow-scrolling: touch; /* iOS 스크롤 동작 개선 */
|
||||
}
|
||||
|
||||
.w-100{
|
||||
width:100%;
|
||||
}
|
||||
.justify-end{
|
||||
justify-content: end;
|
||||
}
|
||||
.gap-2{
|
||||
gap: .5rem;
|
||||
}
|
||||
.btn-wrap .k-button{
|
||||
min-width: 9.375rem !important;
|
||||
}
|
||||
.k-input-flat, .k-dropdownlist {
|
||||
border-bottom: 1px solid #cdcdcd !important;
|
||||
min-height: 2.1875rem;
|
||||
}
|
||||
.k-input-md .k-input-inner, .k-picker-md .k-input-inner{
|
||||
max-height: 9.375rem;
|
||||
width:100%;
|
||||
border:none;
|
||||
padding: $tb-figma-semantic-padding-metric-3
|
||||
}
|
||||
.wrap {
|
||||
align-items: flex-start;
|
||||
background-color: $tb-figma-primitive-color-light-gray-color-0-1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
row-gap: $tb-figma-spacing-w-bspacing-0;
|
||||
width: 100%;
|
||||
height:100%;
|
||||
}
|
||||
.k-static{
|
||||
position: static !important;
|
||||
}
|
||||
.wrap .alarm {
|
||||
border : .0625rem solid $tb-figma-primitive-color-light-danger-color-50-1;
|
||||
border-radius: $tb-figma-spacing-w-bspacing-3;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
column-gap: $tb-figma-spacing-w-bspacing-2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: $tb-figma-spacing-w-bspacing-3;
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
top: 82px;
|
||||
}
|
||||
.wrap .text {
|
||||
font-weight: 700;
|
||||
line-height: 150%;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.wrap .Container {
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
column-gap: $tb-figma-spacing-w-bspacing-0;
|
||||
display: grid;
|
||||
grid-template-columns: 90px 1fr;
|
||||
height: 100%;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.wrap .Content {
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
flex-direction: column;
|
||||
padding: $tb-figma-spacing-w-bspacing-9 $tb-figma-spacing-w-bspacing-8;
|
||||
row-gap: $tb-figma-spacing-w-bspacing-7;
|
||||
}
|
||||
.wrap .Section {
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: $tb-figma-spacing-w-bspacing-4;
|
||||
}
|
||||
.wrap .tit-import{
|
||||
color: $tb-figma-primitive-color-light-danger-color-60-1;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
position: absolute;
|
||||
right:0;
|
||||
}
|
||||
.wrap .frame-3465198-1 {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 2px;
|
||||
}
|
||||
.wrap .grid-area {
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
background-color: $tb-figma-primitive-color-light-secondary-color-10-1;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: $tb-figma-spacing-w-bspacing-4;
|
||||
border-bottom-right-radius: $tb-figma-spacing-w-bspacing-4;
|
||||
border-top-left-radius: $tb-figma-spacing-w-bspacing-4;
|
||||
border-top-right-radius: $tb-figma-spacing-w-bspacing-4;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: $tb-figma-spacing-w-bspacing-6;
|
||||
padding-left: $tb-figma-spacing-w-bspacing-7;
|
||||
padding-right: $tb-figma-spacing-w-bspacing-7;
|
||||
padding-top: $tb-figma-spacing-w-bspacing-8;
|
||||
row-gap: $tb-figma-spacing-w-bspacing-5;
|
||||
}
|
||||
.ico-title-be{
|
||||
width: .5rem !important;
|
||||
height: 1.5rem !important;
|
||||
}
|
||||
.wrap .grid {
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: $tb-figma-spacing-w-bspacing-3;
|
||||
border-bottom-right-radius: $tb-figma-spacing-w-bspacing-3;
|
||||
border-top-left-radius: $tb-figma-spacing-w-bspacing-3;
|
||||
border-top-right-radius: $tb-figma-spacing-w-bspacing-3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 360px;
|
||||
overflow: hidden;
|
||||
row-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
.k-grid.k-grid-md{
|
||||
background-color: transparent;
|
||||
border:none;
|
||||
.k-grid-pager{
|
||||
background: none;
|
||||
border:none;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wrap .header-row {
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
}
|
||||
.wrap .header-cell-7 {
|
||||
align-items: flex-start;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-30-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
}
|
||||
.wrap .base-grid-header-cell-7 {
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
background-color: $tb-figma-primitive-color-light-graphic-color-50-2;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-40-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
}
|
||||
.wrap .content-7 {
|
||||
align-items: center;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-1-2;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
.wrap .text-21 {
|
||||
color: $tb-figma-primitive-color-light-gray-color-5-1;
|
||||
font-family: "Pretendard GOV";
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
font-size: 13px;
|
||||
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap .header-cell-6 {
|
||||
align-items: flex-start;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-30-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
}
|
||||
.wrap .base-grid-header-cell-6 {
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
background-color: $tb-figma-primitive-color-light-graphic-color-50-2;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-40-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
}
|
||||
.wrap .content-6 {
|
||||
align-items: center;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-1-2;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
.wrap .text-20 {
|
||||
color: $tb-figma-primitive-color-light-gray-color-5-1;
|
||||
font-family: "Pretendard GOV";
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
font-size: 13px;
|
||||
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap .header-cell-5 {
|
||||
align-items: flex-start;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-30-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
width: 150px;
|
||||
}
|
||||
.wrap .base-grid-header-cell-5 {
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
background-color: $tb-figma-primitive-color-light-graphic-color-50-2;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-40-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
width: 150px;
|
||||
}
|
||||
.wrap .content-5 {
|
||||
align-items: center;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-1-2;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
.wrap .text-19 {
|
||||
color: $tb-figma-primitive-color-light-gray-color-5-1;
|
||||
font-family: "Pretendard GOV";
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
font-size: 13px;
|
||||
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap .header-cell-4 {
|
||||
align-items: flex-start;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-30-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
width: 150px;
|
||||
}
|
||||
.wrap .base-grid-header-cell-4 {
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
background-color: $tb-figma-primitive-color-light-graphic-color-50-2;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-40-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
width: 150px;
|
||||
}
|
||||
.wrap .content-4 {
|
||||
align-items: center;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-1-2;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
.wrap .text-18 {
|
||||
color: $tb-figma-primitive-color-light-gray-color-5-1;
|
||||
font-family: "Pretendard GOV";
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
font-size: 13px;
|
||||
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap .header-cell-3 {
|
||||
align-items: flex-start;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-30-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
width: 250px;
|
||||
}
|
||||
.wrap .base-grid-header-cell-3 {
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
background-color: $tb-figma-primitive-color-light-graphic-color-50-2;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-40-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
width: 250px;
|
||||
}
|
||||
.wrap .content-3 {
|
||||
align-items: center;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-1-2;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
.wrap .text-17 {
|
||||
color: $tb-figma-primitive-color-light-gray-color-5-1;
|
||||
font-family: "Pretendard GOV";
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
font-size: 13px;
|
||||
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap .header-cell-2 {
|
||||
align-items: flex-start;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-30-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
}
|
||||
.wrap .base-grid-header-cell-2 {
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
background-color: $tb-figma-primitive-color-light-graphic-color-50-2;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-40-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
}
|
||||
.wrap .content-2 {
|
||||
align-items: center;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-1-2;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
.wrap .text-16 {
|
||||
color: $tb-figma-primitive-color-light-gray-color-5-1;
|
||||
font-family: "Pretendard GOV";
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
font-size: 13px;
|
||||
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap .header-cell-1 {
|
||||
align-items: flex-start;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-30-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
width: 170px;
|
||||
}
|
||||
.wrap .base-grid-header-cell-1 {
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
background-color: $tb-figma-primitive-color-light-graphic-color-50-2;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-40-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
width: 170px;
|
||||
}
|
||||
.wrap .content-1 {
|
||||
align-items: center;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-1-2;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
.wrap .text-15 {
|
||||
color: $tb-figma-primitive-color-light-gray-color-5-1;
|
||||
font-family: "Pretendard GOV";
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
font-size: 13px;
|
||||
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap .header-cell {
|
||||
align-items: flex-start;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-30-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
width: 53px;
|
||||
}
|
||||
.wrap .base-grid-header-cell {
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
background-color: $tb-figma-primitive-color-light-graphic-color-50-2;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-bottom-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-40-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-left-radius: $tb-figma-border-radii-border-radius-null;
|
||||
border-top-right-radius: $tb-figma-border-radii-border-radius-null;
|
||||
box-sizing: border-box;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
padding-left: $tb-figma-spacing-w-bspacing-5;
|
||||
padding-right: $tb-figma-spacing-w-bspacing-5;
|
||||
width: 53px;
|
||||
}
|
||||
.wrap .content {
|
||||
align-items: center;
|
||||
column-gap: $tb-figma-spacing-kendo-spacing-1-2;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
.wrap .text-14 {
|
||||
color: $tb-figma-primitive-color-light-gray-color-5-1;
|
||||
font-family: "Pretendard GOV";
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
font-size: 13px;
|
||||
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap .column-num {
|
||||
align-items: flex-start;
|
||||
column-gap: $tb-figma-spacing-w-bspacing-1;
|
||||
display: flex;
|
||||
}
|
||||
.wrap .frame-3465173 {
|
||||
align-items: flex-start;
|
||||
column-gap: $tb-figma-spacing-w-bspacing-1;
|
||||
display: flex;
|
||||
}
|
||||
.wrap .text-13 {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
column-gap: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 1px;
|
||||
padding-right: 1px;
|
||||
}
|
||||
.wrap .caption-10 {
|
||||
color: $tb-figma-primitive-color-light-gray-color-90-1;
|
||||
font-family: "Pretendard GOV";
|
||||
font-size: 13px;
|
||||
|
||||
font-weight: 400;
|
||||
line-height: 150%;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap .text-12 {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
column-gap: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 1px;
|
||||
padding-right: 1px;
|
||||
}
|
||||
.column-num .num {
|
||||
color: $tb-figma-primitive-color-light-danger-color-50-1;
|
||||
}
|
||||
.k-radio{
|
||||
width: 1.8rem !important;
|
||||
height: 1.8rem !important;
|
||||
}
|
||||
.wrap .cont-area {
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
border-bottom-color: $tb-figma-primitive-color-light-gray-color-30-1;
|
||||
border-bottom-left-radius: $tb-figma-spacing-w-bspacing-4;
|
||||
border-bottom-right-radius: $tb-figma-spacing-w-bspacing-4;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-left-color: $tb-figma-primitive-color-light-gray-color-30-1;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-30-1;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-color: $tb-figma-primitive-color-light-gray-color-30-1;
|
||||
border-top-left-radius: $tb-figma-spacing-w-bspacing-4;
|
||||
border-top-right-radius: $tb-figma-spacing-w-bspacing-4;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: $tb-figma-spacing-w-bspacing-6;
|
||||
padding-left: $tb-figma-spacing-w-bspacing-7;
|
||||
padding-right: $tb-figma-spacing-w-bspacing-7;
|
||||
padding-top: $tb-figma-spacing-w-bspacing-8;
|
||||
row-gap: $tb-figma-spacing-w-bspacing-5;
|
||||
}
|
||||
.wrap .form-sec {
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: $tb-figma-spacing-w-bspacing-3;
|
||||
}
|
||||
.wrap .label {
|
||||
color: $tb-figma-primitive-color-light-gray-color-70-1;
|
||||
font-weight: 700;
|
||||
}
|
||||
.wrap .area-title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
column-gap: $tb-figma-spacing-w-bspacing-2;
|
||||
display: flex;
|
||||
}
|
||||
.wrap .h-6-title {
|
||||
color: $tb-figma-primitive-color-light-gray-color-100-1;
|
||||
font-size: 21px;
|
||||
font-weight: 700;
|
||||
line-height: 150%;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap .title {
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
column-gap: $tb-figma-spacing-w-bspacing-4;
|
||||
display: flex;
|
||||
}
|
||||
.wrap .h-5-title{
|
||||
color: $tb-figma-primitive-color-light-gray-color-100-1;
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
line-height: 150%;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap .h-7-title {
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
color:$tb-figma-primitive-color-high-contrast-gray-color-50;
|
||||
}
|
||||
.wrap .head {
|
||||
align-items: flex-start;
|
||||
background-color: #fff;
|
||||
border-bottom-left-radius: $tb-figma-spacing-w-bspacing-0;
|
||||
border-bottom-right-radius: $tb-figma-spacing-w-bspacing-0;
|
||||
border-top-left-radius: $tb-figma-spacing-w-bspacing-0;
|
||||
border-top-right-radius: $tb-figma-spacing-w-bspacing-0;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
.wrap .header {
|
||||
@extend %tb-effects-figma-effects-shadow-y-12;
|
||||
align-items: center;
|
||||
border-bottom-left-radius: $tb-figma-spacing-w-bspacing-0;
|
||||
border-bottom-right-radius: $tb-figma-spacing-w-bspacing-0;
|
||||
border-top-left-radius: $tb-figma-spacing-w-bspacing-0;
|
||||
border-top-right-radius: $tb-figma-spacing-w-bspacing-0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
justify-content: space-between;
|
||||
padding-bottom: $tb-figma-spacing-w-bspacing-4;
|
||||
padding-left: $tb-figma-spacing-w-bspacing-4;
|
||||
padding-right: $tb-figma-spacing-w-bspacing-4;
|
||||
padding-top: $tb-figma-spacing-w-bspacing-4;
|
||||
width: 100%;
|
||||
}
|
||||
.wrap .user-info-container {
|
||||
align-items: center;
|
||||
column-gap: $tb-figma-spacing-w-bspacing-3;
|
||||
display: flex;
|
||||
}
|
||||
.wrap .button-group {
|
||||
align-items: center;
|
||||
column-gap: $tb-figma-spacing-w-bspacing-3;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.wrap .text-2 {
|
||||
align-items: center;
|
||||
border-bottom-color: $tb-figma-primitive-color-light-gray-color-50-3;
|
||||
border-bottom-left-radius: $tb-figma-semantic-radius-small-1-1;
|
||||
border-bottom-right-radius: $tb-figma-semantic-radius-small-1-1;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-left-color: $tb-figma-primitive-color-light-gray-color-50-3;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-50-3;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-color: $tb-figma-primitive-color-light-gray-color-50-3;
|
||||
border-top-left-radius: $tb-figma-semantic-radius-small-1-1;
|
||||
border-top-right-radius: $tb-figma-semantic-radius-small-1-1;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
box-sizing: border-box;
|
||||
column-gap: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-width: 110px;
|
||||
min-width: 100px;
|
||||
padding-bottom: $tb-figma-spacing-w-bspacing-3;
|
||||
padding-left: $tb-figma-spacing-w-bspacing-3;
|
||||
padding-right: $tb-figma-spacing-w-bspacing-3;
|
||||
padding-top: $tb-figma-spacing-w-bspacing-3;
|
||||
}
|
||||
.wrap .logout-text {
|
||||
color: $tb-figma-primitive-color-light-gray-color-60-2;
|
||||
font-size: 15px;
|
||||
|
||||
font-weight: 700;
|
||||
line-height: 150%;
|
||||
}
|
||||
.wrap .text-1 {
|
||||
align-items: center;
|
||||
border-bottom-color: $tb-figma-primitive-color-light-gray-color-50-3;
|
||||
border-bottom-left-radius: $tb-figma-semantic-radius-small-1-1;
|
||||
border-bottom-right-radius: $tb-figma-semantic-radius-small-1-1;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-left-color: $tb-figma-primitive-color-light-gray-color-50-3;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
border-right-color: $tb-figma-primitive-color-light-gray-color-50-3;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-color: $tb-figma-primitive-color-light-gray-color-50-3;
|
||||
border-top-left-radius: $tb-figma-semantic-radius-small-1-1;
|
||||
border-top-right-radius: $tb-figma-semantic-radius-small-1-1;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
box-sizing: border-box;
|
||||
column-gap: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-width: 110px;
|
||||
min-width: 100px;
|
||||
padding-bottom: $tb-figma-spacing-w-bspacing-3;
|
||||
padding-left: $tb-figma-spacing-w-bspacing-3;
|
||||
padding-right: $tb-figma-spacing-w-bspacing-3;
|
||||
padding-top: $tb-figma-spacing-w-bspacing-3;
|
||||
}
|
||||
.wrap .mobile-text {
|
||||
color: $tb-figma-primitive-color-light-gray-color-60-2;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 150%;
|
||||
}
|
||||
.head-user{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $tb-figma-spacing-w-bspacing-2;
|
||||
margin-right: $tb-figma-spacing-w-bspacing-4;
|
||||
}
|
||||
.wrap .text {
|
||||
align-items: center;
|
||||
border-radius: $tb-figma-spacing-w-bspacing-4;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: $tb-figma-spacing-w-bspacing-2;
|
||||
i{
|
||||
color:var(--wb-color-light-point-50);
|
||||
}
|
||||
}
|
||||
.wrap .text-group {
|
||||
align-items: center;
|
||||
column-gap: $tb-figma-spacing-w-bspacing-2;
|
||||
display: flex;
|
||||
}
|
||||
.wrap .name {
|
||||
color: $tb-figma-primitive-color-light-primary-color-50-4;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 150%;
|
||||
}
|
||||
.wrap .department {
|
||||
color: $tb-figma-primitive-color-light-gray-color-95-1;
|
||||
font-size: 15px;
|
||||
|
||||
font-weight: 700;
|
||||
line-height: 150%;
|
||||
}
|
||||
.wrap .proicons-person-circle {
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
width: 32px;
|
||||
}
|
||||
.wrap .logo-container {
|
||||
height: 49px;
|
||||
position: relative;
|
||||
width: 341px;
|
||||
}
|
||||
.wrap .mask-group {
|
||||
flex-shrink: 0;
|
||||
height: 47px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 341px;
|
||||
}
|
||||
.wrap .image {
|
||||
flex-shrink: 0;
|
||||
height: 44px;
|
||||
left: 6px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 335px;
|
||||
}
|
||||
.wrap .system-name {
|
||||
color: $tb-figma-primitive-color-light-primary-color-95-2;
|
||||
font-size: 20px;
|
||||
|
||||
font-weight: 700;
|
||||
left: 60px;
|
||||
line-height: 150%;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
+929
@@ -0,0 +1,929 @@
|
||||
// Compatible with @progress/kendo-theme-default v.10.0.0
|
||||
|
||||
$tb-figma-primitive-number-metric-5: 8px;
|
||||
$tb-figma-primitive-number-metric-3: 4px;
|
||||
$tb-kendo-input-border-width: 1px;
|
||||
$tb-figma-mode-border-width-static-medium: 2px;
|
||||
$tb-figma-mode-border-width-static-regular: 1px;
|
||||
$tb-figma-mode-border-width-variable-medium: 3px;
|
||||
$tb-figma-mode-border-width-variable-regular: 2px;
|
||||
$tb-figma-mode-shadow-blur-3: 16px;
|
||||
$tb-figma-mode-shadow-blur-4: 24px;
|
||||
$tb-figma-mode-shadow-y-3: 8px;
|
||||
$tb-figma-mode-shadow-y-4: 16px;
|
||||
$tb-figma-primitive-number-metric-0: 0px;
|
||||
$tb-figma-primitive-number-metric-1: 1px;
|
||||
$tb-figma-primitive-number-metric-10: 24px;
|
||||
$tb-figma-primitive-number-metric-11: 28px;
|
||||
$tb-figma-primitive-number-metric-12: 32px;
|
||||
$tb-figma-primitive-number-metric-13: 36px;
|
||||
$tb-figma-primitive-number-metric-14: 40px;
|
||||
$tb-figma-primitive-number-metric-15: 44px;
|
||||
$tb-figma-primitive-number-metric-16: 48px;
|
||||
$tb-figma-primitive-number-metric-17: 56px;
|
||||
$tb-figma-primitive-number-metric-18: 64px;
|
||||
$tb-figma-primitive-number-metric-19: 72px;
|
||||
$tb-figma-primitive-number-metric-2: 2px;
|
||||
$tb-figma-primitive-number-metric-20: 80px;
|
||||
$tb-figma-primitive-number-metric-21: 96px;
|
||||
$tb-figma-primitive-number-metric-4: 6px;
|
||||
$tb-figma-primitive-number-metric-6: 10px;
|
||||
$tb-figma-primitive-number-metric-7: 12px;
|
||||
$tb-figma-primitive-number-metric-8: 16px;
|
||||
$tb-figma-primitive-number-metric-9: 20px;
|
||||
$tb-figma-primitive-number-max: 1000px;
|
||||
$tb-figma-primitive-typo-letter-spacing-metric-0: 0px;
|
||||
$tb-figma-primitive-typo-letter-spacing-metric-1: 1px;
|
||||
$tb-figma-responsive-font-size-body-large: 19px;
|
||||
$tb-figma-responsive-font-size-body-medium: 17px;
|
||||
$tb-figma-responsive-font-size-body-small: 15px;
|
||||
$tb-figma-responsive-font-size-body-xsmall: 13px;
|
||||
$tb-figma-responsive-font-size-display-large: 60px;
|
||||
$tb-figma-responsive-font-size-display-medium: 44px;
|
||||
$tb-figma-responsive-font-size-display-small: 36px;
|
||||
$tb-figma-responsive-font-size-heading-large: 32px;
|
||||
$tb-figma-responsive-font-size-heading-medium: 24px;
|
||||
$tb-figma-responsive-font-size-heading-small: 19px;
|
||||
$tb-figma-responsive-font-size-heading-xlarge: 40px;
|
||||
$tb-figma-responsive-font-size-heading-xsmall: 17px;
|
||||
$tb-figma-responsive-font-size-heading-xxsmall: 15px;
|
||||
$tb-figma-responsive-font-size-label-large: 19px;
|
||||
$tb-figma-responsive-font-size-label-medium: 17px;
|
||||
$tb-figma-responsive-font-size-label-small: 15px;
|
||||
$tb-figma-responsive-font-size-label-xsmall: 13px;
|
||||
$tb-figma-responsive-font-size-navigation-depth-medium: 17px;
|
||||
$tb-figma-responsive-font-size-navigation-depth-medium-bold: 17px;
|
||||
$tb-figma-responsive-font-size-navigation-depth-small: 15px;
|
||||
$tb-figma-responsive-font-size-navigation-depth-small-bold: 15px;
|
||||
$tb-figma-responsive-font-size-navigation-title-medium: 24px;
|
||||
$tb-figma-responsive-font-size-navigation-title-small: 19px;
|
||||
$tb-figma-border-radii-border-radius-full: 9999px;
|
||||
$tb-figma-spacing-kendo-spacing-1-1: 4px;
|
||||
$tb-figma-spacing-kendo-spacing-0-1: 0px;
|
||||
$tb-figma-primitive-number-metric-3-1: 4px;
|
||||
$tb-figma-primitive-number-metric-5-1: 8px;
|
||||
$tb-figma-size-space-metric-100: 4px;
|
||||
$tb-figma-spacing-kendo-spacing-1-2: 12px;
|
||||
$tb-figma-spacing-kendo-spacing-15: 6px;
|
||||
$tb-figma-spacing-kendo-spacing-2-1: 8px;
|
||||
$tb-figma-spacing-kendo-spacing-2-2: 8px;
|
||||
$tb-figma-spacing-kendo-spacing-7: 28px;
|
||||
$tb-figma-spacing-kendo-spacing-0-2: 0px;
|
||||
$tb-figma-spacing-w-bspacing-0: 0px;
|
||||
$tb-figma-spacing-w-bspacing-1: 2px;
|
||||
$tb-figma-spacing-w-bspacing-11: 56px;
|
||||
$tb-figma-spacing-w-bspacing-2: 4px;
|
||||
$tb-figma-spacing-w-bspacing-3: 8px;
|
||||
$tb-figma-spacing-w-bspacing-4: 12px;
|
||||
$tb-figma-spacing-w-bspacing-5: 16px;
|
||||
$tb-figma-spacing-w-bspacing-6: 20px;
|
||||
$tb-figma-spacing-w-bspacing-7: 24px;
|
||||
$tb-figma-spacing-w-bspacing-8: 32px;
|
||||
$tb-figma-spacing-w-bspacing-9: 40px;
|
||||
$tb-figma-typography-letter-spacing-null-6: 1.25px;
|
||||
$tb-figma-semantic-padding-metric-3: $tb-figma-primitive-number-metric-5;
|
||||
$tb-kendo-button-padding-x: $tb-figma-semantic-padding-metric-3;
|
||||
$tb-kendo-button-padding-y: $tb-figma-primitive-number-metric-3;
|
||||
$tb-figma-responsive-gap-layout-breadcrumb-h-1: $tb-figma-primitive-number-metric-14;
|
||||
$tb-figma-responsive-gap-layout-contents-footer: $tb-figma-primitive-number-metric-18;
|
||||
$tb-figma-responsive-gap-layout-contents-right: $tb-figma-primitive-number-metric-14;
|
||||
$tb-figma-responsive-gap-layout-h-1-h-2: $tb-figma-primitive-number-metric-16;
|
||||
$tb-figma-responsive-gap-layout-h-2-h-2: $tb-figma-primitive-number-metric-20;
|
||||
$tb-figma-responsive-gap-layout-h-2-h-3: $tb-figma-primitive-number-metric-14;
|
||||
$tb-figma-responsive-gap-layout-h-3-h-3: $tb-figma-primitive-number-metric-18;
|
||||
$tb-figma-responsive-gap-layout-h-3-h-4: $tb-figma-primitive-number-metric-10;
|
||||
$tb-figma-responsive-gap-layout-h-4-h-4: $tb-figma-primitive-number-metric-14;
|
||||
$tb-figma-responsive-gap-layout-h-4-h-5: $tb-figma-primitive-number-metric-8;
|
||||
$tb-figma-responsive-gap-layout-h-5-h-5: $tb-figma-primitive-number-metric-12;
|
||||
$tb-figma-responsive-gap-layout-header-breadcrumb: $tb-figma-primitive-number-metric-10;
|
||||
$tb-figma-responsive-gap-layout-image-text-large: $tb-figma-primitive-number-metric-12;
|
||||
$tb-figma-responsive-gap-layout-image-text-medium: $tb-figma-primitive-number-metric-10;
|
||||
$tb-figma-responsive-gap-layout-image-text-small: $tb-figma-primitive-number-metric-9;
|
||||
$tb-figma-responsive-gap-layout-left-contents: $tb-figma-primitive-number-metric-18;
|
||||
$tb-figma-responsive-gap-layout-text-text-large: $tb-figma-primitive-number-metric-9;
|
||||
$tb-figma-responsive-gap-layout-text-text-medium: $tb-figma-primitive-number-metric-8;
|
||||
$tb-figma-responsive-gap-layout-text-text-small: $tb-figma-primitive-number-metric-7;
|
||||
$tb-figma-responsive-gap-layout-title-body-large: $tb-figma-primitive-number-metric-10;
|
||||
$tb-figma-responsive-gap-layout-title-body-medium: $tb-figma-primitive-number-metric-9;
|
||||
$tb-figma-responsive-gap-layout-title-body-small: $tb-figma-primitive-number-metric-8;
|
||||
$tb-figma-responsive-padding-card-large: $tb-figma-primitive-number-metric-14;
|
||||
$tb-figma-responsive-padding-card-medium: $tb-figma-primitive-number-metric-12;
|
||||
$tb-figma-responsive-padding-card-small: $tb-figma-primitive-number-metric-10;
|
||||
$tb-figma-responsive-padding-card-xsmall: $tb-figma-primitive-number-metric-8;
|
||||
$tb-figma-semantic-gap-metric-1: $tb-figma-primitive-number-metric-2;
|
||||
$tb-figma-semantic-gap-metric-10: $tb-figma-primitive-number-metric-16;
|
||||
$tb-figma-semantic-gap-metric-11: $tb-figma-primitive-number-metric-18;
|
||||
$tb-figma-semantic-gap-metric-12: $tb-figma-primitive-number-metric-20;
|
||||
$tb-figma-semantic-gap-metric-2: $tb-figma-primitive-number-metric-3;
|
||||
$tb-figma-semantic-gap-metric-3: $tb-figma-primitive-number-metric-5;
|
||||
$tb-figma-semantic-gap-metric-4: $tb-figma-primitive-number-metric-7;
|
||||
$tb-figma-semantic-gap-metric-5: $tb-figma-primitive-number-metric-8;
|
||||
$tb-figma-semantic-gap-metric-6: $tb-figma-primitive-number-metric-9;
|
||||
$tb-figma-semantic-gap-metric-7: $tb-figma-primitive-number-metric-10;
|
||||
$tb-figma-semantic-gap-metric-8: $tb-figma-primitive-number-metric-12;
|
||||
$tb-figma-semantic-gap-metric-9: $tb-figma-primitive-number-metric-14;
|
||||
$tb-figma-semantic-padding-metric-1: $tb-figma-primitive-number-metric-2;
|
||||
$tb-figma-semantic-padding-metric-10: $tb-figma-primitive-number-metric-14;
|
||||
$tb-figma-semantic-padding-metric-2: $tb-figma-primitive-number-metric-3;
|
||||
$tb-figma-semantic-padding-metric-4: $tb-figma-primitive-number-metric-6;
|
||||
$tb-figma-semantic-padding-metric-5: $tb-figma-primitive-number-metric-7;
|
||||
$tb-figma-semantic-padding-metric-6: $tb-figma-primitive-number-metric-8;
|
||||
$tb-figma-semantic-padding-metric-7: $tb-figma-primitive-number-metric-9;
|
||||
$tb-figma-semantic-padding-metric-8: $tb-figma-primitive-number-metric-10;
|
||||
$tb-figma-semantic-padding-metric-9: $tb-figma-primitive-number-metric-12;
|
||||
$tb-figma-semantic-radius-large-1: $tb-figma-primitive-number-metric-6;
|
||||
$tb-figma-semantic-radius-large-2: $tb-figma-primitive-number-metric-6;
|
||||
$tb-figma-semantic-radius-max: $tb-figma-primitive-number-max;
|
||||
$tb-figma-semantic-radius-medium-1: $tb-figma-primitive-number-metric-4;
|
||||
$tb-figma-semantic-radius-medium-2: $tb-figma-primitive-number-metric-4;
|
||||
$tb-figma-semantic-radius-medium-3: $tb-figma-primitive-number-metric-5;
|
||||
$tb-figma-semantic-radius-medium-4: $tb-figma-primitive-number-metric-5;
|
||||
$tb-figma-semantic-radius-small-1: $tb-figma-primitive-number-metric-3;
|
||||
$tb-figma-semantic-radius-small-2: $tb-figma-primitive-number-metric-3;
|
||||
$tb-figma-semantic-radius-small-3: $tb-figma-primitive-number-metric-3;
|
||||
$tb-figma-semantic-radius-xlarge-1: $tb-figma-primitive-number-metric-7;
|
||||
$tb-figma-semantic-radius-xlarge-2: $tb-figma-primitive-number-metric-7;
|
||||
$tb-figma-semantic-radius-xsmall-1: $tb-figma-primitive-number-metric-2;
|
||||
$tb-figma-semantic-radius-xsmall-2: $tb-figma-primitive-number-metric-2;
|
||||
$tb-figma-semantic-radius-xsmall-3: $tb-figma-primitive-number-metric-2;
|
||||
$tb-figma-semantic-size-height-metric-1: $tb-figma-primitive-number-metric-5;
|
||||
$tb-figma-semantic-size-height-metric-10: $tb-figma-primitive-number-metric-19;
|
||||
$tb-figma-semantic-size-height-metric-11: $tb-figma-primitive-number-metric-20;
|
||||
$tb-figma-semantic-size-height-metric-2: $tb-figma-primitive-number-metric-8;
|
||||
$tb-figma-semantic-size-height-metric-3: $tb-figma-primitive-number-metric-9;
|
||||
$tb-figma-semantic-size-height-metric-4: $tb-figma-primitive-number-metric-10;
|
||||
$tb-figma-semantic-size-height-metric-5: $tb-figma-primitive-number-metric-12;
|
||||
$tb-figma-semantic-size-height-metric-6: $tb-figma-primitive-number-metric-14;
|
||||
$tb-figma-semantic-size-height-metric-7: $tb-figma-primitive-number-metric-16;
|
||||
$tb-figma-semantic-size-height-metric-8: $tb-figma-primitive-number-metric-17;
|
||||
$tb-figma-semantic-size-height-metric-9: $tb-figma-primitive-number-metric-18;
|
||||
$tb-figma-border-radii-border-radius-md: $tb-figma-spacing-kendo-spacing-1-1;
|
||||
$tb-figma-border-radii-border-radius-null: $tb-figma-spacing-kendo-spacing-0-1;
|
||||
$tb-figma-semantic-radius-medium-3-1: $tb-figma-primitive-number-metric-5-1;
|
||||
$tb-figma-semantic-radius-small-1-1: $tb-figma-primitive-number-metric-3-1;
|
||||
$tb-on-app-surface: #3d3d3d;
|
||||
$tb-surface-alt: #ffffff;
|
||||
$tb-border: rgba(0, 0, 0, 0.08);
|
||||
$tb-figma-primitive-color-high-contrast-primary-color-50: #256ef4;
|
||||
$tb-figma-primitive-color-high-contrast-primary-color-60: #0b50d0;
|
||||
$tb-figma-primitive-color-high-contrast-gray-color-5: #f4f5f6;
|
||||
$tb-figma-primitive-color-high-contrast-gray-color-90: #1e2124;
|
||||
$tb-on-primary: #ffffff;
|
||||
$tb-error: #f31700;
|
||||
$tb-figma-primitive-color-high-contrast-gray-color-50: #6d7882;
|
||||
$tb-base: #f5f5f5;
|
||||
$tb-figma-primitive-color-light-primary-color-10: #d8e5fd;
|
||||
$tb-figma-primitive-color-light-gray-color-50: #6d7882;
|
||||
$tb-figma-primitive-color-high-contrast-gray-color-30: #b1b8be;
|
||||
$tb-figma-primitive-color-high-contrast-primary-color-70: #083891;
|
||||
$tb-app-surface: #ffffff;
|
||||
$tb-kendo-scrollview-navigation-color: white;
|
||||
$tb-figma-primitive-color-light-gray-color-20: #cdd1d5;
|
||||
$tb-figma-primitive-color-light-alpha-white-0: rgba(255, 255, 255, 0);
|
||||
$tb-figma-primitive-color-light-primary-color-50: #256ef4;
|
||||
$tb-figma-primitive-color-light-primary-color-5: #ecf2fe;
|
||||
$tb-figma-primitive-color-light-secondary-color-70: #063a74;
|
||||
$tb-figma-primitive-color-light-secondary-color-5: #eef2f7;
|
||||
$tb-figma-primitive-color-light-gray-color-0: #ffffff;
|
||||
$tb-figma-primitive-color-light-secondary-color-10: #d6e0eb;
|
||||
$tb-figma-primitive-color-high-contrast-alpha-white-10: rgba(255, 255, 255, 0.1);
|
||||
$tb-figma-primitive-color-light-alpha-white-100: #ffffff;
|
||||
$tb-figma-primitive-color-high-contrast-alpha-white-25: rgba(255, 255, 255, 0.25);
|
||||
$tb-figma-primitive-color-light-alpha-white-50: rgba(255, 255, 255, 0.5);
|
||||
$tb-figma-primitive-color-light-alpha-white-75: rgba(255, 255, 255, 0.75);
|
||||
$tb-figma-primitive-color-light-alpha-black-0: rgba(0, 0, 0, 0);
|
||||
$tb-figma-primitive-color-light-alpha-black-10: rgba(0, 0, 0, 0.1);
|
||||
$tb-figma-primitive-color-light-alpha-black-100: #000000;
|
||||
$tb-figma-primitive-color-light-alpha-black-25: rgba(0, 0, 0, 0.25);
|
||||
$tb-figma-primitive-color-light-alpha-black-50: rgba(0, 0, 0, 0.5);
|
||||
$tb-figma-primitive-color-light-alpha-black-75: rgba(0, 0, 0, 0.75);
|
||||
$tb-figma-mode-color-alpha-shadow-1: rgba(0, 0, 0, 0.12);
|
||||
$tb-figma-mode-color-alpha-shadow-2: rgba(0, 0, 0, 0.2);
|
||||
$tb-figma-mode-color-alpha-shadow-3: rgba(0, 0, 0, 0.4);
|
||||
$tb-figma-primitive-color-light-gray-color-10: #e6e8ea;
|
||||
$tb-figma-primitive-color-light-gray-color-5: #f4f5f6;
|
||||
$tb-figma-primitive-color-light-gray-color-90: #1e2124;
|
||||
$tb-figma-primitive-color-light-danger-color-50: #de3412;
|
||||
$tb-figma-primitive-color-light-danger-color-10: #fcdfd9;
|
||||
$tb-figma-primitive-color-light-gray-color-30: #b1b8be;
|
||||
$tb-figma-primitive-color-light-gray-color-60: #58616a;
|
||||
$tb-figma-primitive-color-light-information-color-50: #0b78cb;
|
||||
$tb-figma-primitive-color-light-information-color-10: #d3ebfd;
|
||||
$tb-figma-primitive-color-light-point-color-50: #d63d4a;
|
||||
$tb-figma-primitive-color-light-point-color-10: #f5d6d9;
|
||||
$tb-figma-primitive-color-light-success-color-50: #228738;
|
||||
$tb-figma-primitive-color-light-success-color-10: #d8eedd;
|
||||
$tb-figma-primitive-color-light-warning-color-50: #9e6a00;
|
||||
$tb-figma-primitive-color-light-warning-color-10: #ffe0a3;
|
||||
$tb-figma-primitive-color-light-primary-color-60: #0b50d0;
|
||||
$tb-figma-primitive-color-light-primary-color-70: #083891;
|
||||
$tb-figma-primitive-color-light-primary-color-20: #b1cefb;
|
||||
$tb-figma-primitive-color-light-gray-color-40: #8a949e;
|
||||
$tb-figma-primitive-color-light-danger-color-5: #fdefec;
|
||||
$tb-figma-primitive-color-light-information-color-5: #e7f4fe;
|
||||
$tb-figma-mode-color-element-logo-text: #ffffff;
|
||||
$tb-figma-primitive-color-light-point-color-5: #fbeff0;
|
||||
$tb-figma-primitive-color-light-success-color-5: #eaf6ec;
|
||||
$tb-figma-primitive-color-light-warning-color-30: #ffb114;
|
||||
$tb-figma-primitive-color-light-warning-color-5: #fff3db;
|
||||
$tb-figma-primitive-color-light-graphic-color-50: #61758f;
|
||||
$tb-figma-primitive-color-light-graphic-color-70: #39506c;
|
||||
$tb-figma-primitive-color-light-graphic-color-90: #223a58;
|
||||
$tb-figma-primitive-color-light-graphic-color-30: #98acc5;
|
||||
$tb-figma-primitive-color-light-graphic-color-10: #e5ecf9;
|
||||
$tb-figma-primitive-color-high-contrast-point-color-20: #ebadb2;
|
||||
$tb-figma-primitive-color-high-contrast-point-color-40: #d65c66;
|
||||
$tb-figma-primitive-color-high-contrast-point-color-70: #7a1f26;
|
||||
$tb-figma-primitive-color-light-gray-color-80: #33363d;
|
||||
$tb-figma-primitive-color-light-gray-color-70: #464c53;
|
||||
$tb-figma-primitive-color-light-secondary-color-80: #052b57;
|
||||
$tb-figma-mode-color-link-visited: #c49ff9;
|
||||
$tb-figma-primitive-color-light-gray-color-95: #131416;
|
||||
$tb-figma-primitive-color-light-danger-color-60: #bd2c0f;
|
||||
$tb-figma-primitive-color-light-information-color-60: #096ab3;
|
||||
$tb-figma-primitive-color-light-point-color-60: #ab2b36;
|
||||
$tb-figma-primitive-color-light-success-color-60: #267337;
|
||||
$tb-figma-primitive-color-light-warning-color-60: #8a5c00;
|
||||
$tb-figma-primitive-color-high-contrast-alpha-black-0: rgba(0, 0, 0, 0);
|
||||
$tb-figma-primitive-color-high-contrast-alpha-black-10: rgba(0, 0, 0, 0.1);
|
||||
$tb-figma-primitive-color-high-contrast-alpha-black-100: #000000;
|
||||
$tb-figma-primitive-color-high-contrast-alpha-black-25: rgba(0, 0, 0, 0.25);
|
||||
$tb-figma-primitive-color-high-contrast-alpha-black-50: rgba(0, 0, 0, 0.5);
|
||||
$tb-figma-primitive-color-high-contrast-alpha-black-75: rgba(0, 0, 0, 0.75);
|
||||
$tb-figma-primitive-color-high-contrast-alpha-white-0: rgba(255, 255, 255, 0);
|
||||
$tb-figma-primitive-color-high-contrast-alpha-white-100: #ffffff;
|
||||
$tb-figma-primitive-color-high-contrast-alpha-white-50: rgba(255, 255, 255, 0.5);
|
||||
$tb-figma-primitive-color-high-contrast-alpha-white-75: rgba(255, 255, 255, 0.75);
|
||||
$tb-figma-primitive-color-high-contrast-danger-color-10: #fcdfd9;
|
||||
$tb-figma-primitive-color-high-contrast-danger-color-20: #f7afa1;
|
||||
$tb-figma-primitive-color-high-contrast-danger-color-30: #f48771;
|
||||
$tb-figma-primitive-color-high-contrast-danger-color-40: #f05f42;
|
||||
$tb-figma-primitive-color-high-contrast-danger-color-5: #fdefec;
|
||||
$tb-figma-primitive-color-high-contrast-danger-color-50: #de3412;
|
||||
$tb-figma-primitive-color-high-contrast-danger-color-60: #bd2c0f;
|
||||
$tb-figma-primitive-color-high-contrast-danger-color-70: #8a240f;
|
||||
$tb-figma-primitive-color-high-contrast-danger-color-80: #5c180a;
|
||||
$tb-figma-primitive-color-high-contrast-danger-color-90: #390d05;
|
||||
$tb-figma-primitive-color-high-contrast-danger-color-95: #260903;
|
||||
$tb-figma-primitive-color-high-contrast-graphic-color-10: #e5ecf9;
|
||||
$tb-figma-primitive-color-high-contrast-graphic-color-30: #98acc5;
|
||||
$tb-figma-primitive-color-high-contrast-graphic-color-50: #61758f;
|
||||
$tb-figma-primitive-color-high-contrast-graphic-color-70: #39506c;
|
||||
$tb-figma-primitive-color-high-contrast-graphic-color-90: #223a58;
|
||||
$tb-figma-primitive-color-high-contrast-gray-color-0: #ffffff;
|
||||
$tb-figma-primitive-color-high-contrast-gray-color-10: #e6e8ea;
|
||||
$tb-figma-primitive-color-high-contrast-gray-color-100: #000000;
|
||||
$tb-figma-primitive-color-high-contrast-gray-color-20: #cdd1d5;
|
||||
$tb-figma-primitive-color-high-contrast-gray-color-40: #8a949e;
|
||||
$tb-figma-primitive-color-high-contrast-gray-color-60: #58616a;
|
||||
$tb-figma-primitive-color-high-contrast-gray-color-70: #464c53;
|
||||
$tb-figma-primitive-color-high-contrast-gray-color-80: #33363d;
|
||||
$tb-figma-primitive-color-high-contrast-gray-color-95: #131416;
|
||||
$tb-figma-primitive-color-high-contrast-information-color-10: #d3ebfd;
|
||||
$tb-figma-primitive-color-high-contrast-information-color-20: #9ed2fa;
|
||||
$tb-figma-primitive-color-high-contrast-information-color-30: #5fb5f7;
|
||||
$tb-figma-primitive-color-high-contrast-information-color-40: #2098f3;
|
||||
$tb-figma-primitive-color-high-contrast-information-color-5: #e7f4fe;
|
||||
$tb-figma-primitive-color-high-contrast-information-color-50: #0b78cb;
|
||||
$tb-figma-primitive-color-high-contrast-information-color-60: #096ab3;
|
||||
$tb-figma-primitive-color-high-contrast-information-color-70: #085691;
|
||||
$tb-figma-primitive-color-high-contrast-information-color-80: #053961;
|
||||
$tb-figma-primitive-color-high-contrast-information-color-90: #03253f;
|
||||
$tb-figma-primitive-color-high-contrast-information-color-95: #021a2c;
|
||||
$tb-figma-primitive-color-high-contrast-point-color-10: #f5d6d9;
|
||||
$tb-figma-primitive-color-high-contrast-point-color-30: #e0858c;
|
||||
$tb-figma-primitive-color-high-contrast-point-color-5: #fbeff0;
|
||||
$tb-figma-primitive-color-high-contrast-point-color-50: #d63d4a;
|
||||
$tb-figma-primitive-color-high-contrast-point-color-60: #ab2b36;
|
||||
$tb-figma-primitive-color-high-contrast-point-color-80: #521419;
|
||||
$tb-figma-primitive-color-high-contrast-point-color-90: #310c0f;
|
||||
$tb-figma-primitive-color-high-contrast-point-color-95: #21080a;
|
||||
$tb-figma-primitive-color-high-contrast-primary-color-10: #d8e5fd;
|
||||
$tb-figma-primitive-color-high-contrast-primary-color-20: #b1cefb;
|
||||
$tb-figma-primitive-color-high-contrast-primary-color-30: #86aff9;
|
||||
$tb-figma-primitive-color-high-contrast-primary-color-40: #4c87f6;
|
||||
$tb-figma-primitive-color-high-contrast-primary-color-5: #ecf2fe;
|
||||
$tb-figma-primitive-color-high-contrast-primary-color-80: #052561;
|
||||
$tb-figma-primitive-color-high-contrast-primary-color-90: #03163a;
|
||||
$tb-figma-primitive-color-high-contrast-primary-color-95: #020f27;
|
||||
$tb-figma-primitive-color-high-contrast-secondary-color-10: #d5ebf1;
|
||||
$tb-figma-primitive-color-high-contrast-secondary-color-20: #abd8e3;
|
||||
$tb-figma-primitive-color-high-contrast-secondary-color-30: #75c0d1;
|
||||
$tb-figma-primitive-color-high-contrast-secondary-color-40: #3d9fb8;
|
||||
$tb-figma-primitive-color-high-contrast-secondary-color-5: #edf6f8;
|
||||
$tb-figma-primitive-color-high-contrast-secondary-color-50: #268097;
|
||||
$tb-figma-primitive-color-high-contrast-secondary-color-60: #1f687a;
|
||||
$tb-figma-primitive-color-high-contrast-secondary-color-70: #17505e;
|
||||
$tb-figma-primitive-color-high-contrast-secondary-color-80: #113b45;
|
||||
$tb-figma-primitive-color-high-contrast-secondary-color-90: #0e3139;
|
||||
$tb-figma-primitive-color-high-contrast-secondary-color-95: #091f25;
|
||||
$tb-figma-primitive-color-high-contrast-success-color-10: #d8eedd;
|
||||
$tb-figma-primitive-color-high-contrast-success-color-20: #a9dab4;
|
||||
$tb-figma-primitive-color-high-contrast-success-color-30: #7ec88e;
|
||||
$tb-figma-primitive-color-high-contrast-success-color-40: #3fa654;
|
||||
$tb-figma-primitive-color-high-contrast-success-color-5: #eaf6ec;
|
||||
$tb-figma-primitive-color-high-contrast-success-color-50: #228738;
|
||||
$tb-figma-primitive-color-high-contrast-success-color-60: #267337;
|
||||
$tb-figma-primitive-color-high-contrast-success-color-70: #285d33;
|
||||
$tb-figma-primitive-color-high-contrast-success-color-80: #1f4727;
|
||||
$tb-figma-primitive-color-high-contrast-success-color-90: #122b18;
|
||||
$tb-figma-primitive-color-high-contrast-success-color-95: #0e2012;
|
||||
$tb-figma-primitive-color-high-contrast-warning-color-10: #ffe0a3;
|
||||
$tb-figma-primitive-color-high-contrast-warning-color-20: #ffc95c;
|
||||
$tb-figma-primitive-color-high-contrast-warning-color-30: #ffb114;
|
||||
$tb-figma-primitive-color-high-contrast-warning-color-40: #c78500;
|
||||
$tb-figma-primitive-color-high-contrast-warning-color-5: #fff3db;
|
||||
$tb-figma-primitive-color-high-contrast-warning-color-50: #9e6a00;
|
||||
$tb-figma-primitive-color-high-contrast-warning-color-60: #8a5c00;
|
||||
$tb-figma-primitive-color-high-contrast-warning-color-70: #614100;
|
||||
$tb-figma-primitive-color-high-contrast-warning-color-80: #422c00;
|
||||
$tb-figma-primitive-color-high-contrast-warning-color-90: #2e1f00;
|
||||
$tb-figma-primitive-color-high-contrast-warning-color-95: #241800;
|
||||
$tb-figma-primitive-color-light-alpha-white-10: rgba(255, 255, 255, 0.1);
|
||||
$tb-figma-primitive-color-light-alpha-white-25: rgba(255, 255, 255, 0.25);
|
||||
$tb-figma-primitive-color-light-danger-color-20: #f7afa1;
|
||||
$tb-figma-primitive-color-light-danger-color-30: #f48771;
|
||||
$tb-figma-primitive-color-light-danger-color-40: #f05f42;
|
||||
$tb-figma-primitive-color-light-danger-color-70: #8a240f;
|
||||
$tb-figma-primitive-color-light-danger-color-80: #5c180a;
|
||||
$tb-figma-primitive-color-light-danger-color-90: #390d05;
|
||||
$tb-figma-primitive-color-light-danger-color-95: #260903;
|
||||
$tb-figma-primitive-color-light-gray-color-100: #000000;
|
||||
$tb-figma-primitive-color-light-information-color-20: #9ed2fa;
|
||||
$tb-figma-primitive-color-light-information-color-30: #5fb5f7;
|
||||
$tb-figma-primitive-color-light-information-color-40: #2098f3;
|
||||
$tb-figma-primitive-color-light-information-color-70: #085691;
|
||||
$tb-figma-primitive-color-light-information-color-80: #053961;
|
||||
$tb-figma-primitive-color-light-information-color-90: #03253f;
|
||||
$tb-figma-primitive-color-light-information-color-95: #021a2c;
|
||||
$tb-figma-primitive-color-light-point-color-20: #ebadb2;
|
||||
$tb-figma-primitive-color-light-point-color-30: #e0858c;
|
||||
$tb-figma-primitive-color-light-point-color-40: #d65c66;
|
||||
$tb-figma-primitive-color-light-point-color-70: #7a1f26;
|
||||
$tb-figma-primitive-color-light-point-color-80: #521419;
|
||||
$tb-figma-primitive-color-light-point-color-90: #310c0f;
|
||||
$tb-figma-primitive-color-light-point-color-95: #21080a;
|
||||
$tb-figma-primitive-color-light-primary-color-30: #86aff9;
|
||||
$tb-figma-primitive-color-light-primary-color-40: #4c87f6;
|
||||
$tb-figma-primitive-color-light-primary-color-80: #052561;
|
||||
$tb-figma-primitive-color-light-primary-color-90: #03163a;
|
||||
$tb-figma-primitive-color-light-primary-color-95: #020f27;
|
||||
$tb-figma-primitive-color-light-secondary-color-20: #bacbde;
|
||||
$tb-figma-primitive-color-light-secondary-color-30: #90b0d5;
|
||||
$tb-figma-primitive-color-light-secondary-color-40: #6b96c7;
|
||||
$tb-figma-primitive-color-light-secondary-color-50: #346fb2;
|
||||
$tb-figma-primitive-color-light-secondary-color-60: #1c589c;
|
||||
$tb-figma-primitive-color-light-secondary-color-90: #031f3f;
|
||||
$tb-figma-primitive-color-light-secondary-color-95: #02162c;
|
||||
$tb-figma-primitive-color-light-success-color-20: #a9dab4;
|
||||
$tb-figma-primitive-color-light-success-color-30: #7ec88e;
|
||||
$tb-figma-primitive-color-light-success-color-40: #3fa654;
|
||||
$tb-figma-primitive-color-light-success-color-70: #285d33;
|
||||
$tb-figma-primitive-color-light-success-color-80: #1f4727;
|
||||
$tb-figma-primitive-color-light-success-color-90: #122b18;
|
||||
$tb-figma-primitive-color-light-success-color-95: #0e2012;
|
||||
$tb-figma-primitive-color-light-warning-color-20: #ffc95c;
|
||||
$tb-figma-primitive-color-light-warning-color-40: #c78500;
|
||||
$tb-figma-primitive-color-light-warning-color-70: #614100;
|
||||
$tb-figma-primitive-color-light-warning-color-80: #422c00;
|
||||
$tb-figma-primitive-color-light-warning-color-90: #2e1f00;
|
||||
$tb-figma-primitive-color-light-warning-color-95: #241800;
|
||||
$tb-figma-colors-gray: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, #f4f5f6 100%);
|
||||
$tb-figma-colors-secondary: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, #eef2f7 100%);
|
||||
$tb-figma-colors-white: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 25%, #ffffff 100%);
|
||||
$tb-figma-primitive-color-light-alpha-white-10-1: rgba(255, 255, 255, 0.1);
|
||||
$tb-figma-primitive-color-light-danger-color-50-1: #de3412;
|
||||
$tb-figma-primitive-color-light-danger-color-60-1: #bd2c0f;
|
||||
$tb-figma-primitive-color-light-graphic-color-50-2: #61758f;
|
||||
$tb-figma-primitive-color-light-gray-color-0-1: #ffffff;
|
||||
$tb-figma-primitive-color-light-gray-color-100-1: #000000;
|
||||
$tb-figma-primitive-color-light-gray-color-20-1: #cdd1d5;
|
||||
$tb-figma-primitive-color-light-gray-color-30-1: #b1b8be;
|
||||
$tb-figma-primitive-color-light-gray-color-40-1: #8a949e;
|
||||
$tb-figma-primitive-color-light-gray-color-5-1: #f4f5f6;
|
||||
$tb-figma-primitive-color-light-gray-color-50-3: #6d7882;
|
||||
$tb-figma-primitive-color-light-gray-color-60-2: #58616a;
|
||||
$tb-figma-primitive-color-light-gray-color-70-1: #464c53;
|
||||
$tb-figma-primitive-color-light-gray-color-90-1: #1e2124;
|
||||
$tb-figma-primitive-color-light-gray-color-95-1: #131416;
|
||||
$tb-figma-primitive-color-light-primary-color-50-4: #256ef4;
|
||||
$tb-figma-primitive-color-light-primary-color-60-3: #0b50d0;
|
||||
$tb-figma-primitive-color-light-primary-color-80-1: #052561;
|
||||
$tb-figma-primitive-color-light-primary-color-95-2: #020f27;
|
||||
$tb-figma-primitive-color-light-secondary-color-10-1: #d6e0eb;
|
||||
$tb-figma-primitive-color-light-secondary-color-80-2: #052b57;
|
||||
$tb-figma-tailwindcss-blue-color-600: #2563eb;
|
||||
$tb-figma-mode-color-button-primary-fill: $tb-figma-primitive-color-high-contrast-primary-color-50;
|
||||
$tb-primary: $tb-figma-mode-color-button-primary-fill;
|
||||
$tb-figma-mode-color-button-primary-fill-hover: $tb-figma-primitive-color-high-contrast-primary-color-60;
|
||||
$tb-primary-hover: $tb-figma-mode-color-button-primary-fill-hover;
|
||||
$tb-kendo-button-bg: $tb-figma-primitive-color-high-contrast-gray-color-5;
|
||||
$tb-kendo-button-text: $tb-figma-primitive-color-high-contrast-gray-color-90;
|
||||
$tb-base-on-surface: $tb-figma-primitive-color-high-contrast-gray-color-50;
|
||||
$tb-kendo-chip-outline-hover-text: $tb-base;
|
||||
$tb-kendo-chip-outline-selected-text: $tb-kendo-chip-outline-hover-text;
|
||||
$tb-primary-subtle: $tb-figma-primitive-color-light-primary-color-10;
|
||||
$tb-kendo-input-text: $tb-figma-primitive-color-light-gray-color-50;
|
||||
$tb-kendo-input-border: $tb-figma-primitive-color-high-contrast-gray-color-30;
|
||||
$tb-kendo-input-hover-border: $tb-figma-primitive-color-high-contrast-gray-color-5;
|
||||
$tb-kendo-input-flat-border: $tb-kendo-input-border;
|
||||
$tb-kendo-input-invalid-border: $tb-error;
|
||||
$tb-kendo-listbox-text: $tb-on-app-surface;
|
||||
$tb-kendo-panelbar-item-selected-text: $tb-on-primary;
|
||||
$tb-figma-mode-color-button-primary-fill-pressed: $tb-figma-primitive-color-high-contrast-primary-color-70;
|
||||
$tb-primary-active: $tb-figma-mode-color-button-primary-fill-pressed;
|
||||
$tb-kendo-splitter-border: $tb-border;
|
||||
$tb-on-base: $tb-base-on-surface;
|
||||
$tb-figma-disabled: $tb-figma-primitive-color-high-contrast-gray-color-80;
|
||||
$tb-figma-primary: $tb-figma-primitive-color-high-contrast-alpha-black-0;
|
||||
$tb-figma-primary-active: $tb-figma-primitive-color-high-contrast-primary-color-50;
|
||||
$tb-figma-primary-hover: $tb-figma-primitive-color-high-contrast-primary-color-95;
|
||||
$tb-figma-primary-pressed: $tb-figma-primitive-color-high-contrast-primary-color-90;
|
||||
$tb-figma-primary-selected: $tb-figma-primitive-color-high-contrast-primary-color-95;
|
||||
$tb-figma-secondary: $tb-figma-primitive-color-light-alpha-black-0;
|
||||
$tb-figma-secondary-active: $tb-figma-primitive-color-high-contrast-secondary-color-60;
|
||||
$tb-figma-secondary-hover: $tb-figma-primitive-color-high-contrast-secondary-color-95;
|
||||
$tb-figma-secondary-on: $tb-figma-primitive-color-high-contrast-alpha-black-0;
|
||||
$tb-figma-secondary-on-hover: $tb-figma-primitive-color-high-contrast-gray-color-100;
|
||||
$tb-figma-secondary-on-pressed: $tb-figma-primitive-color-high-contrast-secondary-color-90;
|
||||
$tb-figma-secondary-on-selected: $tb-figma-primitive-color-high-contrast-gray-color-95;
|
||||
$tb-figma-secondary-pressed: $tb-figma-primitive-color-high-contrast-secondary-color-90;
|
||||
$tb-figma-secondary-selected: $tb-figma-primitive-color-high-contrast-secondary-color-95;
|
||||
$tb-figma-white: $tb-figma-primitive-color-light-gray-color-100;
|
||||
$tb-figma-mode-color-alpha-base-0: $tb-figma-primitive-color-light-alpha-black-0;
|
||||
$tb-figma-mode-color-alpha-base-10: $tb-figma-primitive-color-high-contrast-alpha-black-10;
|
||||
$tb-figma-mode-color-alpha-base-100: $tb-figma-primitive-color-high-contrast-alpha-black-100;
|
||||
$tb-figma-mode-color-alpha-base-25: $tb-figma-primitive-color-high-contrast-alpha-black-25;
|
||||
$tb-figma-mode-color-alpha-base-50: $tb-figma-primitive-color-high-contrast-alpha-black-50;
|
||||
$tb-figma-mode-color-alpha-base-75: $tb-figma-primitive-color-high-contrast-alpha-black-75;
|
||||
$tb-figma-mode-color-alpha-inverse-0: $tb-figma-primitive-color-high-contrast-alpha-white-0;
|
||||
$tb-figma-mode-color-alpha-inverse-10: $tb-figma-primitive-color-high-contrast-alpha-black-25;
|
||||
$tb-figma-mode-color-alpha-inverse-100: $tb-figma-primitive-color-high-contrast-alpha-white-100;
|
||||
$tb-figma-mode-color-alpha-inverse-25: $tb-figma-primitive-color-high-contrast-alpha-white-25;
|
||||
$tb-figma-mode-color-alpha-inverse-50: $tb-figma-primitive-color-high-contrast-alpha-white-50;
|
||||
$tb-figma-mode-color-alpha-inverse-75: $tb-figma-primitive-color-high-contrast-alpha-white-75;
|
||||
$tb-figma-mode-color-background-dim: $tb-figma-primitive-color-high-contrast-alpha-black-75;
|
||||
$tb-figma-mode-color-background-gray-subtle: $tb-figma-primitive-color-high-contrast-gray-color-90;
|
||||
$tb-figma-mode-color-background-gray-subtler: $tb-figma-primitive-color-high-contrast-gray-color-95;
|
||||
$tb-figma-mode-color-background-inverse: $tb-figma-primitive-color-high-contrast-gray-color-10;
|
||||
$tb-figma-mode-color-background-white: $tb-figma-primitive-color-high-contrast-gray-color-100;
|
||||
$tb-figma-mode-color-border-danger: $tb-figma-primitive-color-high-contrast-danger-color-50;
|
||||
$tb-figma-mode-color-border-danger-light: $tb-figma-primitive-color-high-contrast-danger-color-90;
|
||||
$tb-figma-mode-color-border-disabled: $tb-figma-primitive-color-high-contrast-gray-color-70;
|
||||
$tb-figma-mode-color-border-gray: $tb-figma-primitive-color-high-contrast-gray-color-70;
|
||||
$tb-figma-mode-color-border-gray-dark: $tb-figma-primitive-color-high-contrast-gray-color-40;
|
||||
$tb-figma-mode-color-border-gray-darker: $tb-figma-primitive-color-high-contrast-gray-color-10;
|
||||
$tb-figma-mode-color-border-gray-light: $tb-figma-primitive-color-high-contrast-gray-color-80;
|
||||
$tb-figma-mode-color-border-information: $tb-figma-primitive-color-high-contrast-information-color-50;
|
||||
$tb-figma-mode-color-border-information-light: $tb-figma-primitive-color-high-contrast-information-color-90;
|
||||
$tb-figma-mode-color-border-inverse: $tb-figma-primitive-color-high-contrast-gray-color-100;
|
||||
$tb-figma-mode-color-border-point: $tb-figma-primitive-color-high-contrast-point-color-50;
|
||||
$tb-figma-mode-color-border-point-light: $tb-figma-primitive-color-high-contrast-point-color-90;
|
||||
$tb-figma-mode-color-border-primary: $tb-figma-primitive-color-high-contrast-primary-color-50;
|
||||
$tb-figma-mode-color-border-primary-light: $tb-figma-primitive-color-high-contrast-primary-color-90;
|
||||
$tb-figma-mode-color-border-secondary: $tb-figma-primitive-color-high-contrast-secondary-color-60;
|
||||
$tb-figma-mode-color-border-secondary-light: $tb-figma-primitive-color-high-contrast-secondary-color-90;
|
||||
$tb-figma-mode-color-border-success: $tb-figma-primitive-color-high-contrast-success-color-50;
|
||||
$tb-figma-mode-color-border-success-light: $tb-figma-primitive-color-high-contrast-success-color-90;
|
||||
$tb-figma-mode-color-border-transparency: $tb-figma-primitive-color-high-contrast-alpha-white-25;
|
||||
$tb-figma-mode-color-border-warning: $tb-figma-primitive-color-high-contrast-warning-color-50;
|
||||
$tb-figma-mode-color-border-warning-light: $tb-figma-primitive-color-high-contrast-warning-color-90;
|
||||
$tb-figma-mode-color-button-disabled-border: $tb-figma-primitive-color-high-contrast-gray-color-70;
|
||||
$tb-figma-mode-color-button-disabled-fill: $tb-figma-primitive-color-high-contrast-gray-color-80;
|
||||
$tb-figma-mode-color-button-secondary-border: $tb-figma-primitive-color-high-contrast-primary-color-50;
|
||||
$tb-figma-mode-color-button-secondary-fill: $tb-figma-primitive-color-high-contrast-primary-color-95;
|
||||
$tb-figma-mode-color-button-secondary-fill-hover: $tb-figma-primitive-color-high-contrast-primary-color-90;
|
||||
$tb-figma-mode-color-button-secondary-fill-pressed: $tb-figma-primitive-color-high-contrast-primary-color-80;
|
||||
$tb-figma-mode-color-button-tertiary-border: $tb-figma-primitive-color-high-contrast-gray-color-40;
|
||||
$tb-figma-mode-color-button-tertiary-fill: $tb-figma-primitive-color-high-contrast-alpha-black-0;
|
||||
$tb-figma-mode-color-button-tertiary-fill-hover: $tb-figma-primitive-color-high-contrast-gray-color-95;
|
||||
$tb-figma-mode-color-button-tertiary-fill-pressed: $tb-figma-primitive-color-high-contrast-gray-color-80;
|
||||
$tb-figma-mode-color-button-text-border: $tb-figma-primitive-color-high-contrast-alpha-white-50;
|
||||
$tb-figma-mode-color-button-text-fill: $tb-figma-primitive-color-high-contrast-alpha-black-0;
|
||||
$tb-figma-mode-color-button-text-fill-hover: $tb-figma-primitive-color-high-contrast-secondary-color-95;
|
||||
$tb-figma-mode-color-button-text-fill-pressed: $tb-figma-primitive-color-high-contrast-secondary-color-90;
|
||||
$tb-figma-mode-color-divider-error: $tb-figma-primitive-color-high-contrast-danger-color-50;
|
||||
$tb-figma-mode-color-divider-gray: $tb-figma-primitive-color-high-contrast-gray-color-70;
|
||||
$tb-figma-mode-color-divider-gray-dark: $tb-figma-primitive-color-high-contrast-gray-color-50;
|
||||
$tb-figma-mode-color-divider-gray-darker: $tb-figma-primitive-color-high-contrast-gray-color-10;
|
||||
$tb-figma-mode-color-divider-gray-light: $tb-figma-primitive-color-high-contrast-gray-color-80;
|
||||
$tb-figma-mode-color-divider-inverse: $tb-figma-primitive-color-high-contrast-gray-color-100;
|
||||
$tb-figma-mode-color-divider-point: $tb-figma-primitive-color-high-contrast-point-color-50;
|
||||
$tb-figma-mode-color-divider-primary: $tb-figma-primitive-color-high-contrast-primary-color-50;
|
||||
$tb-figma-mode-color-divider-primary-light: $tb-figma-primitive-color-high-contrast-primary-color-90;
|
||||
$tb-figma-mode-color-divider-secondary: $tb-figma-primitive-color-high-contrast-secondary-color-60;
|
||||
$tb-figma-mode-color-divider-secondary-light: $tb-figma-primitive-color-high-contrast-secondary-color-90;
|
||||
$tb-figma-mode-color-element-danger: $tb-figma-primitive-color-high-contrast-danger-color-50;
|
||||
$tb-figma-mode-color-element-danger-lighter: $tb-figma-primitive-color-high-contrast-danger-color-95;
|
||||
$tb-figma-mode-color-element-disabled-dark: $tb-figma-primitive-color-high-contrast-gray-color-60;
|
||||
$tb-figma-mode-color-element-disabled-light: $tb-figma-primitive-color-high-contrast-gray-color-80;
|
||||
$tb-figma-mode-color-element-gray: $tb-figma-primitive-color-high-contrast-gray-color-50;
|
||||
$tb-figma-mode-color-element-gray-dark: $tb-figma-primitive-color-high-contrast-gray-color-40;
|
||||
$tb-figma-mode-color-element-gray-light: $tb-figma-primitive-color-high-contrast-gray-color-90;
|
||||
$tb-figma-mode-color-element-gray-lighter: $tb-figma-primitive-color-high-contrast-gray-color-95;
|
||||
$tb-figma-mode-color-element-information: $tb-figma-primitive-color-high-contrast-information-color-50;
|
||||
$tb-figma-mode-color-element-information-lighter: $tb-figma-primitive-color-high-contrast-information-color-95;
|
||||
$tb-figma-mode-color-element-inverse: $tb-figma-primitive-color-high-contrast-gray-color-95;
|
||||
$tb-figma-mode-color-element-inverse-static: $tb-figma-primitive-color-high-contrast-gray-color-0;
|
||||
$tb-figma-mode-color-element-point: $tb-figma-primitive-color-high-contrast-point-color-50;
|
||||
$tb-figma-mode-color-element-point-light: $tb-figma-primitive-color-high-contrast-point-color-90;
|
||||
$tb-figma-mode-color-element-point-lighter: $tb-figma-primitive-color-high-contrast-point-color-95;
|
||||
$tb-figma-mode-color-element-primary: $tb-figma-primitive-color-high-contrast-primary-color-50;
|
||||
$tb-figma-mode-color-element-primary-light: $tb-figma-primitive-color-high-contrast-primary-color-90;
|
||||
$tb-figma-mode-color-element-primary-lighter: $tb-figma-primitive-color-high-contrast-primary-color-95;
|
||||
$tb-figma-mode-color-element-secondary: $tb-figma-primitive-color-high-contrast-secondary-color-60;
|
||||
$tb-figma-mode-color-element-secondary-light: $tb-figma-primitive-color-high-contrast-secondary-color-90;
|
||||
$tb-figma-mode-color-element-secondary-lighter: $tb-figma-primitive-color-high-contrast-secondary-color-95;
|
||||
$tb-figma-mode-color-element-success: $tb-figma-primitive-color-high-contrast-success-color-50;
|
||||
$tb-figma-mode-color-element-success-lighter: $tb-figma-primitive-color-high-contrast-success-color-95;
|
||||
$tb-figma-mode-color-element-warning: $tb-figma-primitive-color-high-contrast-warning-color-30;
|
||||
$tb-figma-mode-color-element-warning-lighter: $tb-figma-primitive-color-high-contrast-warning-color-95;
|
||||
$tb-figma-mode-color-graphic-blue: $tb-figma-primitive-color-high-contrast-graphic-color-50;
|
||||
$tb-figma-mode-color-graphic-blue-dark: $tb-figma-primitive-color-high-contrast-graphic-color-70;
|
||||
$tb-figma-mode-color-graphic-blue-darker: $tb-figma-primitive-color-high-contrast-graphic-color-90;
|
||||
$tb-figma-mode-color-graphic-blue-subtle: $tb-figma-primitive-color-high-contrast-graphic-color-30;
|
||||
$tb-figma-mode-color-graphic-blue-subtler: $tb-figma-primitive-color-high-contrast-graphic-color-10;
|
||||
$tb-figma-mode-color-graphic-brand: $tb-figma-primitive-color-high-contrast-primary-color-50;
|
||||
$tb-figma-mode-color-graphic-red: $tb-figma-primitive-color-high-contrast-point-color-20;
|
||||
$tb-figma-mode-color-graphic-red-dark: $tb-figma-primitive-color-high-contrast-point-color-40;
|
||||
$tb-figma-mode-color-graphic-red-darker: $tb-figma-primitive-color-high-contrast-point-color-70;
|
||||
$tb-figma-mode-color-graphic-red-subtle: $tb-figma-primitive-color-high-contrast-point-color-10;
|
||||
$tb-figma-mode-color-graphic-red-subtler: $tb-figma-primitive-color-high-contrast-point-color-5;
|
||||
$tb-figma-mode-color-icon-danger: $tb-figma-primitive-color-high-contrast-danger-color-20;
|
||||
$tb-figma-mode-color-icon-danger-static: $tb-figma-primitive-color-high-contrast-danger-color-50;
|
||||
$tb-figma-mode-color-icon-disabled: $tb-figma-primitive-color-high-contrast-gray-color-60;
|
||||
$tb-figma-mode-color-icon-disabled-on: $tb-figma-primitive-color-high-contrast-gray-color-50;
|
||||
$tb-figma-mode-color-icon-gray: $tb-figma-primitive-color-high-contrast-gray-color-5;
|
||||
$tb-figma-mode-color-icon-gray-fill: $tb-figma-primitive-color-high-contrast-gray-color-70;
|
||||
$tb-figma-mode-color-icon-gray-light: $tb-figma-primitive-color-high-contrast-gray-color-20;
|
||||
$tb-figma-mode-color-icon-gray-static: $tb-figma-primitive-color-high-contrast-gray-color-80;
|
||||
$tb-figma-mode-color-icon-information: $tb-figma-primitive-color-high-contrast-information-color-20;
|
||||
$tb-figma-mode-color-icon-information-static: $tb-figma-primitive-color-high-contrast-information-color-50;
|
||||
$tb-figma-mode-color-icon-inverse: $tb-figma-primitive-color-high-contrast-gray-color-90;
|
||||
$tb-figma-mode-color-icon-inverse-static: $tb-figma-primitive-color-high-contrast-gray-color-0;
|
||||
$tb-figma-mode-color-icon-point: $tb-figma-primitive-color-high-contrast-point-color-20;
|
||||
$tb-figma-mode-color-icon-point-static: $tb-figma-primitive-color-high-contrast-point-color-50;
|
||||
$tb-figma-mode-color-icon-primary: $tb-figma-primitive-color-high-contrast-primary-color-20;
|
||||
$tb-figma-mode-color-icon-primary-static: $tb-figma-primitive-color-high-contrast-primary-color-50;
|
||||
$tb-figma-mode-color-icon-secondary: $tb-figma-primitive-color-high-contrast-secondary-color-20;
|
||||
$tb-figma-mode-color-icon-secondary-static: $tb-figma-primitive-color-high-contrast-secondary-color-80;
|
||||
$tb-figma-mode-color-icon-success: $tb-figma-primitive-color-high-contrast-success-color-20;
|
||||
$tb-figma-mode-color-icon-success-static: $tb-figma-primitive-color-high-contrast-success-color-50;
|
||||
$tb-figma-mode-color-icon-warning: $tb-figma-primitive-color-high-contrast-warning-color-20;
|
||||
$tb-figma-mode-color-icon-warning-static: $tb-figma-primitive-color-high-contrast-warning-color-50;
|
||||
$tb-figma-mode-color-input-border: $tb-figma-primitive-color-high-contrast-gray-color-40;
|
||||
$tb-figma-mode-color-input-border-active: $tb-figma-primitive-color-high-contrast-primary-color-50;
|
||||
$tb-figma-mode-color-input-border-disabled: $tb-figma-primitive-color-high-contrast-gray-color-70;
|
||||
$tb-figma-mode-color-input-border-error: $tb-figma-primitive-color-high-contrast-danger-color-50;
|
||||
$tb-figma-mode-color-input-surface: $tb-figma-primitive-color-high-contrast-gray-color-90;
|
||||
$tb-figma-mode-color-input-surface-disabled: $tb-figma-primitive-color-high-contrast-gray-color-95;
|
||||
$tb-figma-mode-color-link-default: $tb-figma-primitive-color-high-contrast-primary-color-30;
|
||||
$tb-figma-mode-color-link-hover: $tb-figma-primitive-color-high-contrast-primary-color-20;
|
||||
$tb-figma-mode-color-link-pressed: $tb-figma-primitive-color-high-contrast-primary-color-10;
|
||||
$tb-figma-mode-color-surface-danger-subtler: $tb-figma-primitive-color-high-contrast-danger-color-95;
|
||||
$tb-figma-mode-color-surface-disabled: $tb-figma-primitive-color-high-contrast-gray-color-70;
|
||||
$tb-figma-mode-color-surface-gray-subtle: $tb-figma-primitive-color-high-contrast-gray-color-90;
|
||||
$tb-figma-mode-color-surface-gray-subtler: $tb-figma-primitive-color-high-contrast-gray-color-95;
|
||||
$tb-figma-mode-color-surface-information-subtler: $tb-figma-primitive-color-high-contrast-information-color-95;
|
||||
$tb-figma-mode-color-surface-inverse: $tb-figma-primitive-color-high-contrast-gray-color-10;
|
||||
$tb-figma-mode-color-surface-inverse-static: $tb-figma-primitive-color-high-contrast-gray-color-90;
|
||||
$tb-figma-mode-color-surface-point-subtler: $tb-figma-primitive-color-high-contrast-point-color-95;
|
||||
$tb-figma-mode-color-surface-primary-subtler: $tb-figma-primitive-color-high-contrast-primary-color-95;
|
||||
$tb-figma-mode-color-surface-secondary-subtler: $tb-figma-primitive-color-high-contrast-secondary-color-95;
|
||||
$tb-figma-mode-color-surface-success-subtler: $tb-figma-primitive-color-high-contrast-success-color-95;
|
||||
$tb-figma-mode-color-surface-warning-subtler: $tb-figma-primitive-color-high-contrast-warning-color-95;
|
||||
$tb-figma-mode-color-surface-white: $tb-figma-primitive-color-high-contrast-gray-color-100;
|
||||
$tb-figma-mode-color-surface-white-static: $tb-figma-primitive-color-high-contrast-gray-color-0;
|
||||
$tb-figma-mode-color-surface-white-subtle: $tb-figma-primitive-color-high-contrast-gray-color-95;
|
||||
$tb-figma-mode-color-surface-white-subtler: $tb-figma-primitive-color-high-contrast-gray-color-90;
|
||||
$tb-figma-mode-color-text-basic: $tb-figma-primitive-color-high-contrast-gray-color-5;
|
||||
$tb-figma-mode-color-text-basic-inverse: $tb-figma-primitive-color-high-contrast-gray-color-90;
|
||||
$tb-figma-mode-color-text-bolder: $tb-figma-primitive-color-high-contrast-gray-color-10;
|
||||
$tb-figma-mode-color-text-bolder-inverse: $tb-figma-primitive-color-high-contrast-gray-color-95;
|
||||
$tb-figma-mode-color-text-danger: $tb-figma-primitive-color-high-contrast-danger-color-20;
|
||||
$tb-figma-mode-color-text-disabled: $tb-figma-primitive-color-high-contrast-gray-color-60;
|
||||
$tb-figma-mode-color-text-disabled-on: $tb-figma-primitive-color-high-contrast-gray-color-50;
|
||||
$tb-figma-mode-color-text-information: $tb-figma-primitive-color-high-contrast-information-color-20;
|
||||
$tb-figma-mode-color-text-inverse-static: $tb-figma-primitive-color-high-contrast-gray-color-0;
|
||||
$tb-figma-mode-color-text-point: $tb-figma-primitive-color-high-contrast-point-color-20;
|
||||
$tb-figma-mode-color-text-primary: $tb-figma-primitive-color-high-contrast-primary-color-20;
|
||||
$tb-figma-mode-color-text-secondary: $tb-figma-primitive-color-high-contrast-secondary-color-20;
|
||||
$tb-figma-mode-color-text-static: $tb-figma-primitive-color-high-contrast-gray-color-90;
|
||||
$tb-figma-mode-color-text-subtle: $tb-figma-primitive-color-high-contrast-gray-color-20;
|
||||
$tb-figma-mode-color-text-subtle-inverse: $tb-figma-primitive-color-high-contrast-gray-color-70;
|
||||
$tb-figma-mode-color-text-success: $tb-figma-primitive-color-high-contrast-success-color-20;
|
||||
$tb-figma-mode-color-text-warning: $tb-figma-primitive-color-high-contrast-warning-color-20;
|
||||
$tb-primary-subtle-hover: $tb-figma-primitive-color-high-contrast-information-color-20;
|
||||
$tb-primary-subtle-active: $tb-figma-primitive-color-high-contrast-primary-color-30;
|
||||
$tb-primary-emphasis: $tb-figma-primitive-color-high-contrast-primary-color-30;
|
||||
$tb-primary-on-subtle: $tb-figma-primitive-color-high-contrast-primary-color-70;
|
||||
$tb-primary-on-surface: $tb-figma-primitive-color-high-contrast-primary-color-40;
|
||||
$tb-secondary-subtle: $tb-figma-primitive-color-high-contrast-gray-color-5;
|
||||
$tb-secondary-subtle-hover: $tb-figma-primitive-color-high-contrast-gray-color-10;
|
||||
$tb-secondary-subtle-active: $tb-figma-primitive-color-high-contrast-gray-color-20;
|
||||
$tb-secondary: $tb-figma-primitive-color-high-contrast-gray-color-50;
|
||||
$tb-secondary-hover: $tb-figma-primitive-color-high-contrast-gray-color-60;
|
||||
$tb-secondary-active: $tb-figma-primitive-color-high-contrast-gray-color-70;
|
||||
$tb-secondary-emphasis: $tb-figma-primitive-color-high-contrast-gray-color-10;
|
||||
$tb-secondary-on-subtle: $tb-figma-primitive-color-high-contrast-gray-color-80;
|
||||
$tb-on-secondary: $tb-figma-primitive-color-high-contrast-gray-color-0;
|
||||
$tb-secondary-on-surface: $tb-figma-primitive-color-high-contrast-gray-color-90;
|
||||
$tb-tertiary-subtle: $tb-figma-primitive-color-high-contrast-graphic-color-30;
|
||||
$tb-tertiary-subtle-hover: $tb-figma-primitive-color-high-contrast-graphic-color-30;
|
||||
$tb-tertiary-subtle-active: $tb-figma-primitive-color-high-contrast-graphic-color-50;
|
||||
$tb-tertiary: $tb-figma-primitive-color-high-contrast-gray-color-10;
|
||||
$tb-tertiary-hover: $tb-figma-primitive-color-high-contrast-gray-color-20;
|
||||
$tb-tertiary-active: $tb-figma-primitive-color-high-contrast-gray-color-30;
|
||||
$tb-tertiary-emphasis: $tb-figma-primitive-color-high-contrast-graphic-color-10;
|
||||
$tb-tertiary-on-subtle: $tb-figma-primitive-color-high-contrast-graphic-color-70;
|
||||
$tb-on-tertiary: $tb-figma-primitive-color-high-contrast-gray-color-100;
|
||||
$tb-tertiary-on-surface: $tb-figma-primitive-color-high-contrast-graphic-color-30;
|
||||
|
||||
|
||||
$tb-kendo-font-family: inherit;
|
||||
$tb-kendo-font-size: 14px;
|
||||
$tb-kendo-font-weight-normal: 400;
|
||||
$tb-kendo-line-height: 1.4285714286;
|
||||
$enable-gradients: true;
|
||||
|
||||
$tb-typography: (
|
||||
kendo-default-typography: (
|
||||
font-family: 'inherit',
|
||||
font-size: 14px,
|
||||
font-weight: 400,
|
||||
line-height: 1.4285714286,
|
||||
),
|
||||
figma-typography-body-large: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 19px,
|
||||
font-weight: normal,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-body-large-bold: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 19px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-body-medium: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 17px,
|
||||
font-weight: normal,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-body-medium-bold: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 17px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-body-small: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 15px,
|
||||
font-weight: normal,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-body-small-bold: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 15px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-body-xsmall: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 13px,
|
||||
font-weight: normal,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-body-xsmall-bold: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 13px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-display-large: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 60px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
letter-spacing: 1px,
|
||||
),
|
||||
figma-typography-display-medium: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 44px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
letter-spacing: 1px,
|
||||
),
|
||||
figma-typography-display-small: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 36px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
letter-spacing: 1px,
|
||||
),
|
||||
figma-typography-heading-large: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 32px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
letter-spacing: 1px,
|
||||
),
|
||||
figma-typography-heading-medium: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 24px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-heading-small: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 19px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-heading-xlarge: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 40px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
letter-spacing: 1px,
|
||||
),
|
||||
figma-typography-heading-xsmall: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 17px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-heading-xxsmall: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 15px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-label-large: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 19px,
|
||||
font-weight: normal,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-label-medium: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 17px,
|
||||
font-weight: normal,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-label-small: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 15px,
|
||||
font-weight: normal,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-label-xsmall: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 13px,
|
||||
font-weight: normal,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-navigation-depth-medium: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 17px,
|
||||
font-weight: normal,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-navigation-depth-medium-bold: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 17px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-navigation-depth-small: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 15px,
|
||||
font-weight: normal,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-navigation-depth-small-bold: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 15px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-navigation-title-medium: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 24px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-navigation-title-small: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 19px,
|
||||
font-weight: bold,
|
||||
line-height: 150%,
|
||||
),
|
||||
figma-typography-underline-large: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 19px,
|
||||
font-weight: normal,
|
||||
line-height: 150%,
|
||||
text-decoration-line: underline,
|
||||
),
|
||||
figma-typography-underline-medium: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 17px,
|
||||
font-weight: normal,
|
||||
line-height: 150%,
|
||||
text-decoration-line: underline,
|
||||
),
|
||||
figma-typography-underline-small: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 15px,
|
||||
font-weight: normal,
|
||||
line-height: 150%,
|
||||
text-decoration-line: underline,
|
||||
),
|
||||
figma-typography-underline-xsmall: (
|
||||
font-family: 'Pretendard GOV',
|
||||
font-size: 13px,
|
||||
font-weight: normal,
|
||||
line-height: 150%,
|
||||
text-decoration-line: underline,
|
||||
),
|
||||
figma-typography-base-text-md-default-body-2-grid-grid-cell-text: (
|
||||
font-family: 'Roboto',
|
||||
font-size: 14px,
|
||||
font-weight: normal,
|
||||
line-height: 28px,
|
||||
),
|
||||
);
|
||||
|
||||
@mixin typography-classes ($typography) {
|
||||
@each $selector, $property in $typography {
|
||||
&-#{$selector} {
|
||||
@each $propName, $propValue in $property {
|
||||
#{$propName}: #{$propValue};
|
||||
}
|
||||
} &-#{$selector}-important {
|
||||
@each $propName, $propValue in $property {
|
||||
#{$propName}: $propValue !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$tb-effects: (
|
||||
tb-internal-none-effects: (
|
||||
box-shadow: (none), filter: (none), backdrop-filter: (none), ),
|
||||
figma-effects-shadow-1: (
|
||||
box-shadow: (0px 0px 2px 0 rgba(0, 0, 0, 0.05000000074505806), 0px 1px 2px 0 rgba(0, 0, 0, 0.05000000074505806)), ),
|
||||
figma-effects-shadow-2: (
|
||||
box-shadow: (0px 4px 8px 0 rgba(0, 0, 0, 0.07999999821186066), 0px 0px 2px 0 rgba(0, 0, 0, 0.05000000074505806)), ),
|
||||
figma-effects-shadow-3: (
|
||||
box-shadow: (0px 8px 16px 0 rgba(0, 0, 0, 0.11999999731779099), 0px 0px 2px 0 rgba(0, 0, 0, 0.07999999821186066)), ),
|
||||
figma-effects-shadow-4: (
|
||||
box-shadow: (0px 16px 24px 0 rgba(0, 0, 0, 0.11999999731779099), 0px 0px 2px 0 rgba(0, 0, 0, 0.07999999821186066)), ),
|
||||
figma-effects-shadow-out: (
|
||||
box-shadow: (0px 4px 5px 0 rgba(0, 0, 0, 0.07999999821186066)), ),
|
||||
figma-effects-shadow-y-12: (
|
||||
box-shadow: (0px 4px 15px 0 rgba(0, 0, 0, 0.10000000149011612)), ),
|
||||
);
|
||||
@mixin tb-effect($effect-name, $default: null) {
|
||||
$effect: map-get($tb-effects, $effect-name);
|
||||
@if $effect != null {
|
||||
@if map-has-key($effect, box-shadow) {
|
||||
box-shadow: map-get($effect, box-shadow);
|
||||
}
|
||||
@if map-has-key($effect, filter) {
|
||||
filter: map-get($effect, filter);
|
||||
}
|
||||
@if map-has-key($effect, backdrop-filter) {
|
||||
backdrop-filter: map-get($effect, backdrop-filter);
|
||||
}
|
||||
} @else if $default != null {
|
||||
@warn "Warning: Effect #{$effect-name} not found. Applying default.";
|
||||
box-shadow: $default;
|
||||
} @else {
|
||||
@error "Error: Effect #{$effect-name} not found in \$tb-effects map.";
|
||||
}
|
||||
}
|
||||
|
||||
@mixin effects-classes ($effects) {
|
||||
@each $selector, $property in $effects {
|
||||
&-#{$selector} {
|
||||
@each $propName, $propValue in $property {
|
||||
#{$propName}: $propValue;
|
||||
}
|
||||
} &-#{$selector}-important {
|
||||
@each $propName, $propValue in $property {
|
||||
#{$propName}: $propValue !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%tb-typography {
|
||||
@include typography-classes($tb-typography);
|
||||
}
|
||||
|
||||
%tb-effects {
|
||||
@include effects-classes($tb-effects);
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
//사이즈 정의
|
||||
@mixin dropdown-size-variable() {
|
||||
--wb-dropdown--menu-radius: var(--wb-radius-medium4);
|
||||
--wb-dropdown--menu-padding: var(--wb-padding-3);
|
||||
--wb-dropdown--menu-margin-top: var(--wb-padding-6);
|
||||
--wb-dropdown--menu-gap: var(--wb-gap-3);
|
||||
--wb-dropdown--list-item-radius: var(--wb-radius-medium2);
|
||||
--wb-dropdown--list-item-height: var(--wb-size-height-7);
|
||||
--wb-dropdown--list-item-pc-font-size: var(--wb-pc-font-size-navigation-depth-medium);
|
||||
--wb-dropdown--list-item-mobile-font-size: var(--wb-mobile-font-size-navigation-depth-medium);
|
||||
}
|
||||
|
||||
//컬러 정의
|
||||
@mixin dropdown-color-variable($mode: light) {
|
||||
--wb-dropdown--menu-color-border: var(--wb-#{$mode}-color-border-gray-light);
|
||||
--wb-dropdown--menu-color-surface: var(--wb-#{$mode}-color-surface-white-subtler);
|
||||
--wb-dropdown--menu-color-alpha-shadow: 0 0 0.2rem 0 var(--wb-#{$mode}-color-alpha-shadow1), 0 0.4rem 0.8rem 0 var(--wb-#{$mode}-color-alpha-shadow2);
|
||||
--wb-dropdown--list-item-color-action-hover: var(--wb-#{$mode}-color-action-secondary-hover);
|
||||
--wb-dropdown--list-item-color-action-pressed: var(--wb-#{$mode}-color-action-secondary-pressed);
|
||||
--wb-dropdown--list-item-color-action-selected: var(--wb-#{$mode}-color-action-secondary-selected);
|
||||
--wb-dropdown--list-item-color-text-selected: var(--wb-#{$mode}-color-text-secondary);
|
||||
}
|
||||
|
||||
//모드 설정
|
||||
$mode-setting: light;
|
||||
/* wb-drop-wrap */
|
||||
.wb-drop-wrap {
|
||||
@include dropdown-size-variable();
|
||||
@include dropdown-color-variable(#{$mode-setting});
|
||||
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
.drop-menu {
|
||||
@include position($t: 100%, $l: 50%);
|
||||
display: none;
|
||||
z-index: 6;
|
||||
min-width: 13rem;
|
||||
border-radius: var(--wb-dropdown--menu-radius);
|
||||
padding: var(--wb-dropdown--menu-padding);
|
||||
margin-top: var(--wb-dropdown--menu-margin-top);
|
||||
background-color: var(--wb-dropdown--menu-color-surface);
|
||||
border: 0.1rem solid var(--wb-dropdown--menu-color-border);
|
||||
box-shadow: var(--wb-dropdown--menu-color-alpha-shadow);
|
||||
transform: translateX(-50%);
|
||||
&::before {
|
||||
@include pseudo();
|
||||
@include square(1.2rem);
|
||||
@include position($b: 100%, $l: 50%);
|
||||
display: block;
|
||||
margin-bottom: -0.5rem;
|
||||
margin-left: -0.6rem;
|
||||
transform: rotate(-135deg);
|
||||
background-color: var(--wb-dropdown--menu-color-surface);
|
||||
border: 0.1rem solid var(--wb-dropdown--menu-color-border);
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.drop-in {
|
||||
// @include flex-layout($fd: column, $ai: flex-start);
|
||||
gap: var(--wb-dropdown--menu-gap);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.drop-top {
|
||||
width: 100%;
|
||||
padding: var(--wb-padding-3) var(--wb-padding-6);
|
||||
border-bottom: 0.1rem solid var(--wb-dropdown--menu-color-border);
|
||||
}
|
||||
.drop-bottom {
|
||||
// @include flex-layout($jc: center);
|
||||
width: 100%;
|
||||
padding: var(--wb-padding-3) 0;
|
||||
border-top: 0.1rem solid var(--wb-dropdown--menu-color-border);
|
||||
}
|
||||
.drop-list {
|
||||
width: 100%;
|
||||
.item-link {
|
||||
// @include flex-layout($jc: flex-start, $ai: center);
|
||||
width: 100%;
|
||||
gap: var(--wb-gap-3);
|
||||
padding: 0 var(--wb-padding-6);
|
||||
font-size: var(--wb-dropdown--list-item-pc-font-size);
|
||||
border-radius: var(--wb-dropdown--list-item-radius);
|
||||
height: var(--wb-dropdown--list-item-height);
|
||||
background-color: var(--wb-dropdown--menu-color-surface);
|
||||
.ico-go {
|
||||
@include svg-icon($size: var(--wb-icon--size-medium), $mode: #{$mode-setting});
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--wb-dropdown--list-item-color-action-hover);
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--wb-dropdown--list-item-color-action-pressed);
|
||||
}
|
||||
&.active {
|
||||
font-weight: var(--wb-font-weight-bold);
|
||||
color: var(--wb-dropdown--list-item-color-text-selected);
|
||||
background-color: var(--wb-dropdown--list-item-color-action-selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.drop-left {
|
||||
.drop-menu {
|
||||
left: 0;
|
||||
right: unset;
|
||||
transform: none;
|
||||
&::before {
|
||||
left: 2.4rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.drop-right {
|
||||
.drop-menu {
|
||||
left: unset;
|
||||
right: 0;
|
||||
transform: none;
|
||||
&::before {
|
||||
left: unset;
|
||||
right: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//고대비모드
|
||||
@include color-mode($mode: high-contrast) {
|
||||
//모드 설정
|
||||
$mode-setting: high-contrast;
|
||||
|
||||
/* wb-drop-wrap */
|
||||
.wb-drop-wrap {
|
||||
@include dropdown-color-variable(#{$mode-setting});
|
||||
.drop-list {
|
||||
.item-link {
|
||||
.ico-go {
|
||||
@include svg-icon($size: var(--wb-icon--size-medium), $mode: #{$mode-setting});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/utils";
|
||||
@import "mixins/icons";
|
||||
@import "mixins/form";
|
||||
@@ -0,0 +1,3 @@
|
||||
//@use 'sass:map';
|
||||
//scss variables 모음
|
||||
@import "variables_for_code";
|
||||
@@ -0,0 +1,50 @@
|
||||
.svg-icon {
|
||||
&.ico-angle { //꺽쇠모양
|
||||
@include icon-set(ico-angle, pure);
|
||||
//disabled (for selectbox)
|
||||
&.disabled {
|
||||
@include icon-set(ico_angle_disabled, $effect: pure);
|
||||
}
|
||||
//default: down
|
||||
&.up {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&.left {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
&.right {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
&.ico-user{
|
||||
@include icon-set(ico-user, pure);
|
||||
}
|
||||
&.ico-mark {
|
||||
@include icon-set(ico-mark, pure);
|
||||
}
|
||||
|
||||
&.ico-title-be {
|
||||
@include icon-set(ico-title-be, pure);
|
||||
}
|
||||
&.ico-menu01 {
|
||||
@include icon-set(ico-menu01, pure);
|
||||
}
|
||||
&.ico-menu02 {
|
||||
@include icon-set(ico-menu02, pure);
|
||||
}
|
||||
&.ico-menu03 {
|
||||
@include icon-set(ico-menu03, pure);
|
||||
}
|
||||
&.ico-menu04 {
|
||||
@include icon-set(ico-menu04, pure);
|
||||
}
|
||||
&.ico-menu05 {
|
||||
@include icon-set(ico-menu05, pure);
|
||||
}
|
||||
&.ico-menu06 {
|
||||
@include icon-set(ico-menu06, pure);
|
||||
}
|
||||
&.ico-menu07 {
|
||||
@include icon-set(ico-menu07, pure);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
//@use 'sass:map';
|
||||
//*** mixin
|
||||
|
||||
//mixin
|
||||
@import "group_mixins";
|
||||
|
||||
|
||||
@@ -0,0 +1,115 @@
|
||||
@import "../tokens";
|
||||
.menu{
|
||||
height:100%;
|
||||
background-color: $tb-figma-primitive-color-light-secondary-color-80-2;
|
||||
.menu-container {
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
background-image: none;
|
||||
column-gap: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: none;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
padding-bottom: $tb-figma-spacing-w-bspacing-8;
|
||||
padding-top: $tb-figma-spacing-w-bspacing-8;
|
||||
row-gap: $tb-figma-spacing-w-bspacing-7;
|
||||
}
|
||||
}
|
||||
|
||||
.group {
|
||||
left: 15.58px;
|
||||
position: absolute;
|
||||
top: 15.58px;
|
||||
}
|
||||
.menu-item-container {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
border-bottom-left-radius: $tb-figma-semantic-radius-medium-3-1;
|
||||
border-bottom-right-radius: $tb-figma-semantic-radius-medium-3-1;
|
||||
border-top-left-radius: $tb-figma-semantic-radius-medium-3-1;
|
||||
border-top-right-radius: $tb-figma-semantic-radius-medium-3-1;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-bottom: $tb-figma-spacing-w-bspacing-4;
|
||||
padding-left: $tb-figma-spacing-w-bspacing-2;
|
||||
padding-right: $tb-figma-spacing-w-bspacing-2;
|
||||
padding-top: $tb-figma-spacing-w-bspacing-4;
|
||||
row-gap: $tb-figma-spacing-w-bspacing-0;
|
||||
&.active .menu-sub {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $tb-figma-primitive-color-light-alpha-white-10;
|
||||
}
|
||||
&:focus{
|
||||
background-color: $tb-figma-primitive-color-light-alpha-white-25;
|
||||
}
|
||||
.menu-sub{
|
||||
position: absolute;
|
||||
top:0;
|
||||
right: -234px;
|
||||
background: #fff;
|
||||
@include tb-effect('figma-effects-shadow-3');
|
||||
border-radius: 0 $tb-figma-spacing-w-bspacing-2 $tb-figma-spacing-w-bspacing-2 0;
|
||||
padding: $tb-figma-spacing-w-bspacing-7;
|
||||
z-index: 9;
|
||||
width: 21.875rem;
|
||||
display: none;
|
||||
transition: max-height 0.3s ease, opacity 0.3s ease;
|
||||
opacity: 0;
|
||||
.container{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(45%, auto));
|
||||
gap: $tb-figma-semantic-padding-metric-5;
|
||||
li{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $tb-figma-semantic-gap-metric-3;
|
||||
flex: 1 1 50%;
|
||||
.element-2-depth{
|
||||
border: 1px solid $tb-figma-primitive-color-light-primary-color-30;
|
||||
border-radius: $tb-figma-spacing-w-bspacing-2;
|
||||
text-align: center;
|
||||
padding: $tb-figma-spacing-w-bspacing-2;
|
||||
font-weight: 600;
|
||||
}
|
||||
ul{
|
||||
li{
|
||||
a{
|
||||
text-align: center;
|
||||
&:hover{
|
||||
color: $tb-figma-primitive-color-light-primary-color-60-3
|
||||
}
|
||||
&:focus{
|
||||
color: $tb-figma-primitive-color-light-primary-color-80
|
||||
}
|
||||
}
|
||||
~li{
|
||||
margin-top: $tb-figma-semantic-gap-metric-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.wrap .element-1-depth {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
}
|
||||
.wrap .menu-item-text {
|
||||
color: $tb-figma-primitive-color-light-gray-color-30-1;
|
||||
|
||||
font-size: 15px;
|
||||
|
||||
font-weight: 700;
|
||||
line-height: 150%;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
// Spacing (4의 배수)
|
||||
$spacing-0: 0;
|
||||
$spacing-4: 0.25rem;
|
||||
$spacing-8: 0.5rem;
|
||||
$spacing-12: 0.75rem;
|
||||
$spacing-16: 1rem;
|
||||
$spacing-20: 1.25rem;
|
||||
$spacing-24: 1.5rem;
|
||||
$spacing-28: 1.75rem;
|
||||
$spacing-32: 2rem;
|
||||
$spacing-36: 2.25rem;
|
||||
$spacing-40: 2.5rem;
|
||||
$spacing-44: 2.75rem;
|
||||
$spacing-48: 3rem;
|
||||
$spacing-52: 3.25rem;
|
||||
$spacing-56: 3.5rem;
|
||||
$spacing-60: 3.75rem;
|
||||
$spacing-64: 4rem;
|
||||
|
||||
// Font Size (4의 배수)
|
||||
$font-12: 0.75rem;
|
||||
$font-16: 1rem;
|
||||
$font-14: 0.875rem;
|
||||
$font-18: 1.125rem;
|
||||
$font-20: 1.25rem;
|
||||
$font-24: 1.5rem;
|
||||
$font-28: 1.75rem;
|
||||
$font-32: 2rem;
|
||||
$font-36: 2.25rem;
|
||||
$font-40: 2.5rem;
|
||||
|
||||
// Border Radius (4의 배수)
|
||||
$radius-4: 0.25rem;
|
||||
$radius-8: 0.5rem;
|
||||
$radius-12: 0.75rem;
|
||||
$radius-16: 1rem;
|
||||
$radius-20: 1.25rem;
|
||||
$radius-24: 1.5rem;
|
||||
$radius-28: 1.75rem;
|
||||
$radius-32: 2rem;
|
||||
|
||||
// Line Height (4의 배수)
|
||||
$line-16: 1rem;
|
||||
$line-20: 1.25rem;
|
||||
$line-24: 1.5rem;
|
||||
$line-28: 1.75rem;
|
||||
$line-32: 2rem;
|
||||
$line-36: 2.25rem;
|
||||
$line-40: 2.5rem;
|
||||
@@ -0,0 +1,2 @@
|
||||
//*** path setting
|
||||
$url: "../.." !default; //img
|
||||
@@ -0,0 +1,318 @@
|
||||
/* reset */
|
||||
//모드 설정
|
||||
$mode-setting: light;
|
||||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: var(--wb-font-family-base);
|
||||
color: var(--wb-#{$mode-setting}-color-text-basic);
|
||||
font-weight: var(--wb-font-weight-regular);
|
||||
line-height: var(--wb-line-height-base);
|
||||
word-break: keep-all;
|
||||
word-wrap: break-word;
|
||||
-webkit-tap-highlight-color : transparent;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
html {
|
||||
font-size: var(--wb-font-size-base);
|
||||
}
|
||||
body {
|
||||
background-color: var(--wb-#{$mode-setting}-color-background-white);
|
||||
font-size: var(--wb-pc-font-size-body-xsmall);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
//시스템 고대비모드 켜도 우리 style 적용되도록
|
||||
* {
|
||||
//forced-color-adjust: none;
|
||||
}
|
||||
|
||||
//고대비모드
|
||||
@include color-mode(high-contrast) {
|
||||
//모드 설정
|
||||
$mode-setting: high-contrast;
|
||||
html, body {
|
||||
color: var(--wb-#{$mode-setting}-color-text-basic);
|
||||
}
|
||||
body {
|
||||
background-color: var(--wb-#{$mode-setting}-color-background-white);
|
||||
}
|
||||
}
|
||||
*:focus {
|
||||
//@include focus();
|
||||
outline: 0.2rem solid var(--wb-light-color-border-inverse);
|
||||
outline-offset: 0;
|
||||
box-shadow: var(--wb-box-shadow-outline);
|
||||
transition: outline 0s, box-shadow 0s !important;
|
||||
}
|
||||
::-moz-selection {
|
||||
background: var(--wb-color-light-secondary-50);
|
||||
color: var(--wb-color-light-gray-0);
|
||||
}
|
||||
::selection {
|
||||
background: var(--wb-color-light-secondary-50);
|
||||
color: var(--wb-color-light-gray-0);
|
||||
}
|
||||
|
||||
body,
|
||||
div,
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
table,
|
||||
th,
|
||||
td,
|
||||
form,
|
||||
fieldset,
|
||||
legend,
|
||||
input,
|
||||
textarea,
|
||||
a,
|
||||
button,
|
||||
select,
|
||||
ul,
|
||||
li,
|
||||
span,
|
||||
em,
|
||||
label,
|
||||
:before,
|
||||
:after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-text-size-adjust: none;
|
||||
font-family: inherit;
|
||||
line-height: var(--wb-line-height-base);
|
||||
letter-spacing: inherit;
|
||||
}
|
||||
pre {
|
||||
font-family: inherit;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
a,
|
||||
button,
|
||||
select,
|
||||
span,
|
||||
label,
|
||||
:before,
|
||||
:after {
|
||||
font: {
|
||||
size: inherit;
|
||||
weight: inherit;
|
||||
}
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
strong {
|
||||
font-weight: var(--wb-font-weight-bold);
|
||||
}
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
img,
|
||||
fieldset {
|
||||
border: 0
|
||||
}
|
||||
fieldset {
|
||||
min-width: 100%;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
em,
|
||||
address,
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
a,
|
||||
button {
|
||||
transition: var(--wb-transition-base);
|
||||
}
|
||||
a,
|
||||
a:hover,
|
||||
a:active,
|
||||
a:focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"] {
|
||||
overflow: visible;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="password"],
|
||||
input[type="file"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="date"],
|
||||
input[type="search"],
|
||||
textarea {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
margin: 0;
|
||||
}
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type='text']::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
caption {
|
||||
position: static !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
max-width: none;
|
||||
width: auto;
|
||||
min-width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.img img {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.img.bg-img {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.blind,
|
||||
hr,
|
||||
.sr-only,
|
||||
legend,
|
||||
caption {
|
||||
@include sr-only;
|
||||
}
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.al {
|
||||
text-align: left !important;
|
||||
}
|
||||
.ac {
|
||||
text-align: center !important;
|
||||
}
|
||||
.ar {
|
||||
text-align: right !important;
|
||||
}
|
||||
.underline {
|
||||
@include underline();
|
||||
}
|
||||
.break-all {
|
||||
word-break: break-all;
|
||||
}
|
||||
//svg icon
|
||||
.svg-icon {
|
||||
@include svg-icon();
|
||||
&.pure {
|
||||
@include svg-icon($effect: pure);
|
||||
}
|
||||
}
|
||||
|
||||
.inner {
|
||||
max-width: var(--wb-contents-wrap-size);
|
||||
padding-left: var(--wb-contents-padding-x);
|
||||
padding-right: var(--wb-contents-padding-x);
|
||||
}
|
||||
|
||||
//responsive mobile
|
||||
@include size-medium {
|
||||
body {
|
||||
font-size: var(--wb-mobile-font-size-body-medium);
|
||||
}
|
||||
.pc-only {
|
||||
display: none !important;
|
||||
}
|
||||
.pc-only.read {
|
||||
@include sr-only;
|
||||
}
|
||||
.mob-line {
|
||||
display: block;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
@import "group_variables";
|
||||
|
||||
//모드 설정
|
||||
$mode-setting: light;
|
||||
:root {
|
||||
//* PRIMITIVE *
|
||||
--wb-font-family-base: var(--wb-typo-font-type);
|
||||
--wb-font-size-base: #{$font-size-base};
|
||||
|
||||
//line heights
|
||||
@each $type, $value in $font-line-heights {
|
||||
--wb-line-height-#{$type}: #{$value};
|
||||
}
|
||||
|
||||
//letter spacings
|
||||
@each $type, $value in $font-letter-spacings {
|
||||
--wb-letter-spacing-#{$type}: #{$value};
|
||||
}
|
||||
|
||||
//font weight
|
||||
@each $type, $value in $font-weights {
|
||||
--wb-font-weight-#{$type}: #{$value};
|
||||
}
|
||||
|
||||
//transition
|
||||
--wb-transition-base: #{$transition-base};
|
||||
--wb-transition-fade: #{$transition-fade};
|
||||
--wb-transition-collapse: #{$transition-collapse};
|
||||
--wb-transition-collapse-width: #{$transition-collapse-width};
|
||||
|
||||
//contents size
|
||||
--wb-contents-size: #{$contents-size};
|
||||
--wb-contents-padding-x: #{$contents-padding-x-pc};
|
||||
--wb-contents-wrap-size: #{$contents-wrap-size};
|
||||
|
||||
//box shadow (only for focus outline)
|
||||
--wb-box-shadow-outline: 0 0 0 0.4rem var(--wb-#{$mode-setting}-color-border-primary);
|
||||
--wb-box-shadow-outline-inset: inset 0 0 0 0.2rem var(--wb-#{$mode-setting}-color-border-primary);
|
||||
|
||||
//screen zoom sizes
|
||||
@each $type, $value in $screen-zoom-sizes {
|
||||
--wb-zoom-#{$type}: #{$value};
|
||||
}
|
||||
|
||||
//text underline offset
|
||||
--wb-font-underline-offset: #{$font-underline-offset-default};
|
||||
|
||||
//svg icon size
|
||||
@each $size, $value in $icon-sizes {
|
||||
--wb-icon--size-#{$size}: #{$value};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//고대비모드
|
||||
@include color-mode($mode: high-contrast) {
|
||||
//모드 설정
|
||||
$mode-setting: high-contrast;
|
||||
|
||||
:root {
|
||||
//box shadow (only for focus outline)
|
||||
--wb-box-shadow-outline: 0 0 0 0.4rem var(--wb-#{$mode-setting}-color-border-primary);
|
||||
--wb-box-shadow-outline-inset: inset 0 0 0 0.2rem var(--wb-#{$mode-setting}-color-border-primary);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
//CONTENTS MAX WIDTH
|
||||
$contents-size: 1200px !default;
|
||||
$contents-padding-x-pc: 28px !default;
|
||||
$contents-padding-x-mobile: 16px !default;
|
||||
$contents-wrap-size: $contents-size + ($contents-padding-x-pc * 2) !default;
|
||||
|
||||
//BREAK POINTS
|
||||
$breakpoint-small: 360px !default;
|
||||
$breakpoint-medium: 768px !default;
|
||||
$breakpoint-large: 1024px !default;
|
||||
$breakpoint-xlarge: 1280px !default;
|
||||
$breakpoint-xxlarge: 1440px !default;
|
||||
|
||||
//TYPO CUSTOM
|
||||
$font-family-base: "Pretendard GOV", sans-serif !default;
|
||||
$font-size-base: 62.5% !default; //10px 1rem으로 설정
|
||||
|
||||
$font-letter-spacings: (
|
||||
none: var(--wb-typo-letter-spacing-0),
|
||||
wide: var(--wb-typo-letter-spacing-1),
|
||||
) !default;
|
||||
|
||||
//font weight
|
||||
$font-weight-regular: 400 !default;
|
||||
$font-weight-bold: 700 !default;
|
||||
$font-weights: (
|
||||
regular: $font-weight-regular,
|
||||
bold: $font-weight-bold,
|
||||
) !default;
|
||||
|
||||
//line height style
|
||||
$font-line-height-none: 1 !default;
|
||||
$font-line-height-base: 1.5 !default;
|
||||
$font-line-heights: (
|
||||
none: $font-line-height-none,
|
||||
base: $font-line-height-base,
|
||||
) !default;
|
||||
|
||||
//TYPO UNDERLINE OFFESET
|
||||
$font-underline-offset-default: 0.3rem !default;
|
||||
|
||||
//IMG BACKGROUND URL
|
||||
$url: "../../img" !default;
|
||||
|
||||
//TRANSITION
|
||||
$transition-base: .4s ease-in-out !default;
|
||||
$transition-fade: opacity .4s linear !default;
|
||||
$transition-collapse: max-height .4s ease !default;
|
||||
$transition-collapse-width: width .4s ease !default;
|
||||
|
||||
//SVG ICON SIZE
|
||||
$icon-sizes: (
|
||||
xsmall: var(--wb-size-height-2),
|
||||
small: var(--wb-size-height-2),
|
||||
medium: var(--wb-size-height-3),
|
||||
large: var(--wb-size-height-4),
|
||||
xlarge: var(--wb-size-height-4),
|
||||
) !default;
|
||||
|
||||
//SCREEN ZOOM
|
||||
$screen-zoom-sizes: (
|
||||
small: 0.9,
|
||||
medium: 1,
|
||||
large: 1.1,
|
||||
xlarge: 1.3,
|
||||
xxlarge: 1.5,
|
||||
) !default;
|
||||
|
||||
/////////////////////////////////// variable group setting ///////////////////////////////////////////////////
|
||||
@@ -0,0 +1,782 @@
|
||||
|
||||
:root {
|
||||
/* PRIMITIVE */
|
||||
--wb-color-light-primary-5: #ecf2fe;
|
||||
--wb-color-light-primary-10: #d8e5fd;
|
||||
--wb-color-light-primary-20: #b1cefb;
|
||||
--wb-color-light-primary-30: #86aff9;
|
||||
--wb-color-light-primary-40: #4c87f6;
|
||||
--wb-color-light-primary-50: #256ef4;
|
||||
--wb-color-light-primary-60: #0b50d0;
|
||||
--wb-color-light-primary-70: #083891;
|
||||
--wb-color-light-primary-80: #052561;
|
||||
--wb-color-light-primary-90: #03163a;
|
||||
--wb-color-light-primary-95: #020f27;
|
||||
--wb-color-light-secondary-5: #eef2f7;
|
||||
--wb-color-light-secondary-10: #d6e0eb;
|
||||
--wb-color-light-secondary-20: #bacbde;
|
||||
--wb-color-light-secondary-30: #90b0d5;
|
||||
--wb-color-light-secondary-40: #6b96c7;
|
||||
--wb-color-light-secondary-50: #346fb2;
|
||||
--wb-color-light-secondary-60: #1c589c;
|
||||
--wb-color-light-secondary-70: #063a74;
|
||||
--wb-color-light-secondary-80: #052b57;
|
||||
--wb-color-light-secondary-90: #031f3f;
|
||||
--wb-color-light-secondary-95: #02162c;
|
||||
--wb-color-light-gray-0: #ffffff;
|
||||
--wb-color-light-gray-5: #f4f5f6;
|
||||
--wb-color-light-gray-10: #e6e8ea;
|
||||
--wb-color-light-gray-20: #cdd1d5;
|
||||
--wb-color-light-gray-30: #b1b8be;
|
||||
--wb-color-light-gray-40: #8a949e;
|
||||
--wb-color-light-gray-50: #6d7882;
|
||||
--wb-color-light-gray-60: #58616a;
|
||||
--wb-color-light-gray-70: #464c53;
|
||||
--wb-color-light-gray-80: #33363d;
|
||||
--wb-color-light-gray-90: #1e2124;
|
||||
--wb-color-light-gray-95: #131416;
|
||||
--wb-color-light-gray-100: #000000;
|
||||
--wb-color-light-alpha-black100: #000000;
|
||||
--wb-color-light-alpha-black75: #000000bf;
|
||||
--wb-color-light-alpha-black50: #00000080;
|
||||
--wb-color-light-alpha-black25: #00000040;
|
||||
--wb-color-light-alpha-black10: #0000001a;
|
||||
--wb-color-light-alpha-black0: #00000000;
|
||||
--wb-color-light-alpha-white100: #ffffff;
|
||||
--wb-color-light-alpha-white75: #ffffffbf;
|
||||
--wb-color-light-alpha-white50: #ffffff80;
|
||||
--wb-color-light-alpha-white25: #ffffff40;
|
||||
--wb-color-light-alpha-white10: #ffffff1a;
|
||||
--wb-color-light-alpha-white0: #ffffff00;
|
||||
--wb-color-light-danger-5: #fdefec;
|
||||
--wb-color-light-danger-10: #fcdfd9;
|
||||
--wb-color-light-danger-20: #f7afa1;
|
||||
--wb-color-light-danger-30: #f48771;
|
||||
--wb-color-light-danger-40: #f05f42;
|
||||
--wb-color-light-danger-50: #de3412;
|
||||
--wb-color-light-danger-60: #bd2c0f;
|
||||
--wb-color-light-danger-70: #8a240f;
|
||||
--wb-color-light-danger-80: #5c180a;
|
||||
--wb-color-light-danger-90: #390d05;
|
||||
--wb-color-light-danger-95: #260903;
|
||||
--wb-color-light-information-5: #e7f4fe;
|
||||
--wb-color-light-information-10: #d3ebfd;
|
||||
--wb-color-light-information-20: #9ed2fa;
|
||||
--wb-color-light-information-30: #5fb5f7;
|
||||
--wb-color-light-information-40: #2098f3;
|
||||
--wb-color-light-information-50: #0b78cb;
|
||||
--wb-color-light-information-60: #096ab3;
|
||||
--wb-color-light-information-70: #085691;
|
||||
--wb-color-light-information-80: #053961;
|
||||
--wb-color-light-information-90: #03253f;
|
||||
--wb-color-light-information-95: #021a2c;
|
||||
--wb-color-light-warning-5: #fff3db;
|
||||
--wb-color-light-warning-10: #ffe0a3;
|
||||
--wb-color-light-warning-20: #ffc95c;
|
||||
--wb-color-light-warning-30: #ffb114;
|
||||
--wb-color-light-warning-40: #c78500;
|
||||
--wb-color-light-warning-50: #9e6a00;
|
||||
--wb-color-light-warning-60: #8a5c00;
|
||||
--wb-color-light-warning-70: #614100;
|
||||
--wb-color-light-warning-80: #422c00;
|
||||
--wb-color-light-warning-90: #2e1f00;
|
||||
--wb-color-light-warning-95: #241800;
|
||||
--wb-color-light-success-5: #eaf6ec;
|
||||
--wb-color-light-success-10: #d8eedd;
|
||||
--wb-color-light-success-20: #a9dab4;
|
||||
--wb-color-light-success-30: #7ec88e;
|
||||
--wb-color-light-success-40: #3fa654;
|
||||
--wb-color-light-success-50: #228738;
|
||||
--wb-color-light-success-60: #267337;
|
||||
--wb-color-light-success-70: #285d33;
|
||||
--wb-color-light-success-80: #1f4727;
|
||||
--wb-color-light-success-90: #122b18;
|
||||
--wb-color-light-success-95: #0e2012;
|
||||
--wb-color-light-point-5: #fbeff0;
|
||||
--wb-color-light-point-10: #f5d6d9;
|
||||
--wb-color-light-point-20: #ebadb2;
|
||||
--wb-color-light-point-30: #e0858c;
|
||||
--wb-color-light-point-40: #d65c66;
|
||||
--wb-color-light-point-50: #d63d4a;
|
||||
--wb-color-light-point-60: #ab2b36;
|
||||
--wb-color-light-point-70: #7a1f26;
|
||||
--wb-color-light-point-80: #521419;
|
||||
--wb-color-light-point-90: #310c0f;
|
||||
--wb-color-light-point-95: #21080a;
|
||||
--wb-color-light-graphic-10: #e5ecf9;
|
||||
--wb-color-light-graphic-30: #98acc5;
|
||||
--wb-color-light-graphic-50: #61758f;
|
||||
--wb-color-light-graphic-70: #39506c;
|
||||
--wb-color-light-graphic-90: #223a58;
|
||||
--wb-color-high-contrast-gray-0: #ffffff;
|
||||
--wb-color-high-contrast-gray-5: #f4f5f6;
|
||||
--wb-color-high-contrast-gray-10: #e6e8ea;
|
||||
--wb-color-high-contrast-gray-20: #cdd1d5;
|
||||
--wb-color-high-contrast-gray-30: #b1b8be;
|
||||
--wb-color-high-contrast-gray-40: #8a949e;
|
||||
--wb-color-high-contrast-gray-50: #6d7882;
|
||||
--wb-color-high-contrast-gray-60: #58616a;
|
||||
--wb-color-high-contrast-gray-70: #464c53;
|
||||
--wb-color-high-contrast-gray-80: #33363d;
|
||||
--wb-color-high-contrast-gray-90: #1e2124;
|
||||
--wb-color-high-contrast-gray-95: #131416;
|
||||
--wb-color-high-contrast-gray-100: #000000;
|
||||
--wb-color-high-contrast-primary-5: #ecf2fe;
|
||||
--wb-color-high-contrast-primary-10: #d8e5fd;
|
||||
--wb-color-high-contrast-primary-20: #b1cefb;
|
||||
--wb-color-high-contrast-primary-30: #86aff9;
|
||||
--wb-color-high-contrast-primary-40: #4c87f6;
|
||||
--wb-color-high-contrast-primary-50: #256ef4;
|
||||
--wb-color-high-contrast-primary-60: #0b50d0;
|
||||
--wb-color-high-contrast-primary-70: #083891;
|
||||
--wb-color-high-contrast-primary-80: #052561;
|
||||
--wb-color-high-contrast-primary-90: #03163a;
|
||||
--wb-color-high-contrast-primary-95: #020f27;
|
||||
--wb-color-high-contrast-secondary-5: #edf6f8;
|
||||
--wb-color-high-contrast-secondary-10: #d5ebf1;
|
||||
--wb-color-high-contrast-secondary-20: #abd8e3;
|
||||
--wb-color-high-contrast-secondary-30: #75c0d1;
|
||||
--wb-color-high-contrast-secondary-40: #3d9fb8;
|
||||
--wb-color-high-contrast-secondary-50: #268097;
|
||||
--wb-color-high-contrast-secondary-60: #1f687a;
|
||||
--wb-color-high-contrast-secondary-70: #17505e;
|
||||
--wb-color-high-contrast-secondary-80: #113b45;
|
||||
--wb-color-high-contrast-secondary-90: #0e3139;
|
||||
--wb-color-high-contrast-secondary-95: #091f25;
|
||||
--wb-color-high-contrast-point-5: #fbeff0;
|
||||
--wb-color-high-contrast-point-10: #f5d6d9;
|
||||
--wb-color-high-contrast-point-20: #ebadb2;
|
||||
--wb-color-high-contrast-point-30: #e0858c;
|
||||
--wb-color-high-contrast-point-40: #d65c66;
|
||||
--wb-color-high-contrast-point-50: #d63d4a;
|
||||
--wb-color-high-contrast-point-60: #ab2b36;
|
||||
--wb-color-high-contrast-point-70: #7a1f26;
|
||||
--wb-color-high-contrast-point-80: #521419;
|
||||
--wb-color-high-contrast-point-90: #310c0f;
|
||||
--wb-color-high-contrast-point-95: #21080a;
|
||||
--wb-color-high-contrast-danger-5: #fdefec;
|
||||
--wb-color-high-contrast-danger-10: #fcdfd9;
|
||||
--wb-color-high-contrast-danger-20: #f7afa1;
|
||||
--wb-color-high-contrast-danger-30: #f48771;
|
||||
--wb-color-high-contrast-danger-40: #f05f42;
|
||||
--wb-color-high-contrast-danger-50: #de3412;
|
||||
--wb-color-high-contrast-danger-60: #bd2c0f;
|
||||
--wb-color-high-contrast-danger-70: #8a240f;
|
||||
--wb-color-high-contrast-danger-80: #5c180a;
|
||||
--wb-color-high-contrast-danger-90: #390d05;
|
||||
--wb-color-high-contrast-danger-95: #260903;
|
||||
--wb-color-high-contrast-warning-5: #fff3db;
|
||||
--wb-color-high-contrast-warning-10: #ffe0a3;
|
||||
--wb-color-high-contrast-warning-20: #ffc95c;
|
||||
--wb-color-high-contrast-warning-30: #ffb114;
|
||||
--wb-color-high-contrast-warning-40: #c78500;
|
||||
--wb-color-high-contrast-warning-50: #9e6a00;
|
||||
--wb-color-high-contrast-warning-60: #8a5c00;
|
||||
--wb-color-high-contrast-warning-70: #614100;
|
||||
--wb-color-high-contrast-warning-80: #422c00;
|
||||
--wb-color-high-contrast-warning-90: #2e1f00;
|
||||
--wb-color-high-contrast-warning-95: #241800;
|
||||
--wb-color-high-contrast-success-5: #eaf6ec;
|
||||
--wb-color-high-contrast-success-10: #d8eedd;
|
||||
--wb-color-high-contrast-success-20: #a9dab4;
|
||||
--wb-color-high-contrast-success-30: #7ec88e;
|
||||
--wb-color-high-contrast-success-40: #3fa654;
|
||||
--wb-color-high-contrast-success-50: #228738;
|
||||
--wb-color-high-contrast-success-60: #267337;
|
||||
--wb-color-high-contrast-success-70: #285d33;
|
||||
--wb-color-high-contrast-success-80: #1f4727;
|
||||
--wb-color-high-contrast-success-90: #122b18;
|
||||
--wb-color-high-contrast-success-95: #0e2012;
|
||||
--wb-color-high-contrast-information-5: #e7f4fe;
|
||||
--wb-color-high-contrast-information-10: #d3ebfd;
|
||||
--wb-color-high-contrast-information-20: #9ed2fa;
|
||||
--wb-color-high-contrast-information-30: #5fb5f7;
|
||||
--wb-color-high-contrast-information-40: #2098f3;
|
||||
--wb-color-high-contrast-information-50: #0b78cb;
|
||||
--wb-color-high-contrast-information-60: #096ab3;
|
||||
--wb-color-high-contrast-information-70: #085691;
|
||||
--wb-color-high-contrast-information-80: #053961;
|
||||
--wb-color-high-contrast-information-90: #03253f;
|
||||
--wb-color-high-contrast-information-95: #021a2c;
|
||||
--wb-color-high-contrast-alpha-black100: #000000;
|
||||
--wb-color-high-contrast-alpha-black75: #000000bf;
|
||||
--wb-color-high-contrast-alpha-black50: #00000080;
|
||||
--wb-color-high-contrast-alpha-black25: #00000040;
|
||||
--wb-color-high-contrast-alpha-black10: #0000001a;
|
||||
--wb-color-high-contrast-alpha-black0: #00000000;
|
||||
--wb-color-high-contrast-alpha-white100: #ffffff;
|
||||
--wb-color-high-contrast-alpha-white75: #ffffffbf;
|
||||
--wb-color-high-contrast-alpha-white50: #ffffff80;
|
||||
--wb-color-high-contrast-alpha-white25: #ffffff40;
|
||||
--wb-color-high-contrast-alpha-white10: #ffffff1a;
|
||||
--wb-color-high-contrast-alpha-white0: #ffffff00;
|
||||
--wb-color-high-contrast-graphic-10: #e5ecf9;
|
||||
--wb-color-high-contrast-graphic-30: #98acc5;
|
||||
--wb-color-high-contrast-graphic-50: #61758f;
|
||||
--wb-color-high-contrast-graphic-70: #39506c;
|
||||
--wb-color-high-contrast-graphic-90: #223a58;
|
||||
--wb-typo-font-type: Pretendard GOV;
|
||||
--wb-typo-font-weight-regular: Regular;
|
||||
--wb-typo-font-weight-bold: Bold;
|
||||
--wb-typo-letter-spacing-0: 0rem;
|
||||
--wb-typo-letter-spacing-1: 0.1rem;
|
||||
--wb-number-0: 0rem;
|
||||
--wb-number-1: 0.1rem;
|
||||
--wb-number-2: 0.2rem;
|
||||
--wb-number-3: 0.4rem;
|
||||
--wb-number-4: 0.6rem;
|
||||
--wb-number-5: 0.8rem;
|
||||
--wb-number-6: 1rem;
|
||||
--wb-number-7: 1.2rem;
|
||||
--wb-number-8: 1.6rem;
|
||||
--wb-number-9: 2rem;
|
||||
--wb-number-10: 2.4rem;
|
||||
--wb-number-11: 2.8rem;
|
||||
--wb-number-12: 3.2rem;
|
||||
--wb-number-13: 3.6rem;
|
||||
--wb-number-14: 4rem;
|
||||
--wb-number-15: 4.4rem;
|
||||
--wb-number-16: 4.8rem;
|
||||
--wb-number-17: 5.6rem;
|
||||
--wb-number-18: 6.4rem;
|
||||
--wb-number-19: 7.2rem;
|
||||
--wb-number-20: 8rem;
|
||||
--wb-number-21: 9.6rem;
|
||||
--wb-number-max: 100rem;
|
||||
|
||||
/* MODE-LIGHT */
|
||||
--wb-light-color-surface-gray-subtler: var(--wb-color-light-gray-5);
|
||||
--wb-light-color-surface-gray-subtle: var(--wb-color-light-gray-10);
|
||||
--wb-light-color-surface-disabled: var(--wb-color-light-gray-20);
|
||||
--wb-light-color-surface-primary-subtler: var(--wb-color-light-primary-5);
|
||||
--wb-light-color-surface-secondary-subtler: var(--wb-color-light-secondary-5);
|
||||
--wb-light-color-surface-danger-subtler: var(--wb-color-light-danger-5);
|
||||
--wb-light-color-surface-warning-subtler: var(--wb-color-light-warning-5);
|
||||
--wb-light-color-surface-success-subtler: var(--wb-color-light-success-5);
|
||||
--wb-light-color-surface-information-subtler: var(--wb-color-light-information-5);
|
||||
--wb-light-color-surface-point-subtler: var(--wb-color-light-point-5);
|
||||
--wb-light-color-surface-white: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-surface-inverse: var(--wb-color-light-gray-90);
|
||||
--wb-light-color-surface-white-static: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-surface-inverse-static: var(--wb-color-light-gray-90);
|
||||
--wb-light-color-surface-white-subtle: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-surface-white-subtler: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-border-gray-light: var(--wb-color-light-gray-20);
|
||||
--wb-light-color-border-gray: var(--wb-color-light-gray-30);
|
||||
--wb-light-color-border-secondary-light: var(--wb-color-light-secondary-10);
|
||||
--wb-light-color-border-danger-light: var(--wb-color-light-danger-10);
|
||||
--wb-light-color-border-danger: var(--wb-color-light-danger-50);
|
||||
--wb-light-color-border-warning-light: var(--wb-color-light-warning-10);
|
||||
--wb-light-color-border-warning: var(--wb-color-light-warning-50);
|
||||
--wb-light-color-border-success-light: var(--wb-color-light-success-10);
|
||||
--wb-light-color-border-success: var(--wb-color-light-success-50);
|
||||
--wb-light-color-border-information-light: var(--wb-color-light-information-10);
|
||||
--wb-light-color-border-information: var(--wb-color-light-information-50);
|
||||
--wb-light-color-border-gray-dark: var(--wb-color-light-gray-60);
|
||||
--wb-light-color-border-primary: var(--wb-color-light-primary-50);
|
||||
--wb-light-color-border-disabled: var(--wb-color-light-gray-30);
|
||||
--wb-light-color-border-gray-darker: var(--wb-color-light-gray-90);
|
||||
--wb-light-color-border-secondary: var(--wb-color-light-secondary-70);
|
||||
--wb-light-color-border-inverse: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-border-transparency: var(--wb-color-light-alpha-black0);
|
||||
--wb-light-color-border-primary-light: var(--wb-color-light-primary-10);
|
||||
--wb-light-color-border-point: var(--wb-color-light-point-50);
|
||||
--wb-light-color-border-point-light: var(--wb-color-light-point-10);
|
||||
--wb-light-color-divider-gray-light: var(--wb-color-light-gray-20);
|
||||
--wb-light-color-divider-gray: var(--wb-color-light-gray-40);
|
||||
--wb-light-color-divider-gray-dark: var(--wb-color-light-gray-50);
|
||||
--wb-light-color-divider-primary: var(--wb-color-light-primary-50);
|
||||
--wb-light-color-divider-secondary-light: var(--wb-color-light-secondary-10);
|
||||
--wb-light-color-divider-secondary: var(--wb-color-light-secondary-70);
|
||||
--wb-light-color-divider-error: var(--wb-color-light-danger-50);
|
||||
--wb-light-color-divider-primary-light: var(--wb-color-light-primary-10);
|
||||
--wb-light-color-divider-inverse: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-divider-gray-darker: var(--wb-color-light-gray-90);
|
||||
--wb-light-color-divider-point: var(--wb-color-light-point-50);
|
||||
--wb-light-color-text-bolder: var(--wb-color-light-gray-95);
|
||||
--wb-light-color-text-subtle: var(--wb-color-light-gray-70);
|
||||
--wb-light-color-text-disabled: var(--wb-color-light-gray-40);
|
||||
--wb-light-color-text-disabled-on: var(--wb-color-light-gray-50);
|
||||
--wb-light-color-text-primary: var(--wb-color-light-primary-60);
|
||||
--wb-light-color-text-secondary: var(--wb-color-light-secondary-80);
|
||||
--wb-light-color-text-danger: var(--wb-color-light-danger-60);
|
||||
--wb-light-color-text-warning: var(--wb-color-light-warning-60);
|
||||
--wb-light-color-text-success: var(--wb-color-light-success-60);
|
||||
--wb-light-color-text-information: var(--wb-color-light-information-60);
|
||||
--wb-light-color-text-basic: var(--wb-color-light-gray-90);
|
||||
--wb-light-color-text-point: var(--wb-color-light-point-60);
|
||||
--wb-light-color-text-bolder-inverse: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-text-basic-inverse: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-text-subtle-inverse: var(--wb-color-light-gray-30);
|
||||
--wb-light-color-text-inverse-static: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-text-static: var(--wb-color-light-gray-90);
|
||||
--wb-light-color-icon-gray: var(--wb-color-light-gray-80);
|
||||
--wb-light-color-icon-gray-fill: var(--wb-color-light-gray-20);
|
||||
--wb-light-color-icon-inverse: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-icon-primary: var(--wb-color-light-primary-50);
|
||||
--wb-light-color-icon-secondary: var(--wb-color-light-secondary-80);
|
||||
--wb-light-color-icon-point: var(--wb-color-light-point-50);
|
||||
--wb-light-color-icon-danger: var(--wb-color-light-danger-50);
|
||||
--wb-light-color-icon-warning: var(--wb-color-light-warning-50);
|
||||
--wb-light-color-icon-success: var(--wb-color-light-success-50);
|
||||
--wb-light-color-icon-information: var(--wb-color-light-information-50);
|
||||
--wb-light-color-icon-gray-light: var(--wb-color-light-gray-70);
|
||||
--wb-light-color-icon-disabled: var(--wb-color-light-gray-40);
|
||||
--wb-light-color-icon-disabled-on: var(--wb-color-light-gray-50);
|
||||
--wb-light-color-icon-inverse-static: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-icon-primary-static: var(--wb-color-light-primary-50);
|
||||
--wb-light-color-icon-secondary-static: var(--wb-color-light-secondary-80);
|
||||
--wb-light-color-icon-point-static: var(--wb-color-light-point-50);
|
||||
--wb-light-color-icon-danger-static: var(--wb-color-light-danger-50);
|
||||
--wb-light-color-icon-warning-static: var(--wb-color-light-warning-50);
|
||||
--wb-light-color-icon-success-static: var(--wb-color-light-success-50);
|
||||
--wb-light-color-icon-information-static: var(--wb-color-light-information-50);
|
||||
--wb-light-color-icon-gray-static: var(--wb-color-light-gray-80);
|
||||
--wb-light-color-link-default: var(--wb-color-light-primary-50);
|
||||
--wb-light-color-link-hover: var(--wb-color-light-primary-60);
|
||||
--wb-light-color-link-pressed: var(--wb-color-light-primary-70);
|
||||
--wb-light-color-link-visited: #5917b8;
|
||||
--wb-light-color-button-primary-fill: var(--wb-color-light-primary-50);
|
||||
--wb-light-color-button-primary-fill-hover: var(--wb-color-light-primary-60);
|
||||
--wb-light-color-button-primary-fill-pressed: var(--wb-color-light-primary-70);
|
||||
--wb-light-color-button-secondary-fill: var(--wb-color-light-primary-5);
|
||||
--wb-light-color-button-secondary-fill-hover: var(--wb-color-light-primary-10);
|
||||
--wb-light-color-button-secondary-fill-pressed: var(--wb-color-light-primary-20);
|
||||
--wb-light-color-button-secondary-border: var(--wb-color-light-primary-50);
|
||||
--wb-light-color-button-tertiary-fill: var(--wb-color-light-alpha-white0);
|
||||
--wb-light-color-button-tertiary-fill-hover: var(--wb-color-light-gray-5);
|
||||
--wb-light-color-button-tertiary-fill-pressed: var(--wb-color-light-gray-10);
|
||||
--wb-light-color-button-tertiary-border: var(--wb-color-light-gray-60);
|
||||
--wb-light-color-button-disabled-fill: var(--wb-color-light-gray-20);
|
||||
--wb-light-color-button-text-fill-hover: var(--wb-color-light-secondary-5);
|
||||
--wb-light-color-button-text-fill-pressed: var(--wb-color-light-secondary-10);
|
||||
--wb-light-color-button-text-fill: var(--wb-color-light-alpha-white0);
|
||||
--wb-light-color-button-text-border: var(--wb-color-light-alpha-black0);
|
||||
--wb-light-color-button-disabled-border: var(--wb-color-light-gray-30);
|
||||
--wb-light-color-background-white: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-background-inverse: var(--wb-color-light-gray-90);
|
||||
--wb-light-color-background-gray-subtler: var(--wb-color-light-gray-5);
|
||||
--wb-light-color-background-gray-subtle: var(--wb-color-light-gray-10);
|
||||
--wb-light-color-background-dim: var(--wb-color-light-alpha-black75);
|
||||
--wb-light-color-element-disabled-light: var(--wb-color-light-gray-20);
|
||||
--wb-light-color-element-disabled-dark: var(--wb-color-light-gray-40);
|
||||
--wb-light-color-element-gray-lighter: var(--wb-color-light-gray-5);
|
||||
--wb-light-color-element-gray-light: var(--wb-color-light-gray-10);
|
||||
--wb-light-color-element-gray: var(--wb-color-light-gray-50);
|
||||
--wb-light-color-element-primary-lighter: var(--wb-color-light-primary-5);
|
||||
--wb-light-color-element-primary-light: var(--wb-color-light-primary-10);
|
||||
--wb-light-color-element-primary: var(--wb-color-light-primary-50);
|
||||
--wb-light-color-element-secondary-lighter: var(--wb-color-light-secondary-5);
|
||||
--wb-light-color-element-secondary-light: var(--wb-color-light-secondary-10);
|
||||
--wb-light-color-element-secondary: var(--wb-color-light-secondary-70);
|
||||
--wb-light-color-element-point-lighter: var(--wb-color-light-point-5);
|
||||
--wb-light-color-element-point-light: var(--wb-color-light-point-10);
|
||||
--wb-light-color-element-point: var(--wb-color-light-point-50);
|
||||
--wb-light-color-element-danger-lighter: var(--wb-color-light-danger-5);
|
||||
--wb-light-color-element-danger: var(--wb-color-light-danger-50);
|
||||
--wb-light-color-element-warning-lighter: var(--wb-color-light-warning-5);
|
||||
--wb-light-color-element-warning: var(--wb-color-light-warning-30);
|
||||
--wb-light-color-element-success-lighter: var(--wb-color-light-success-5);
|
||||
--wb-light-color-element-success: var(--wb-color-light-success-50);
|
||||
--wb-light-color-element-information-lighter: var(--wb-color-light-information-5);
|
||||
--wb-light-color-element-information: var(--wb-color-light-information-50);
|
||||
--wb-light-color-element-inverse: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-element-gray-dark: var(--wb-color-light-gray-60);
|
||||
--wb-light-color-element-inverse-static: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-action-white: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-action-primary: var(--wb-color-light-alpha-white0);
|
||||
--wb-light-color-action-primary-hover: var(--wb-color-light-primary-5);
|
||||
--wb-light-color-action-primary-pressed: var(--wb-color-light-primary-10);
|
||||
--wb-light-color-action-secondary: var(--wb-color-light-alpha-white0);
|
||||
--wb-light-color-action-secondary-hover: var(--wb-color-light-secondary-5);
|
||||
--wb-light-color-action-secondary-pressed: var(--wb-color-light-secondary-10);
|
||||
--wb-light-color-action-secondary-selected: var(--wb-color-light-secondary-5);
|
||||
--wb-light-color-action-secondary-on: var(--wb-color-light-alpha-white0);
|
||||
--wb-light-color-action-secondary-on-hover: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-action-secondary-on-pressed: var(--wb-color-light-secondary-10);
|
||||
--wb-light-color-action-secondary-on-selected: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-action-secondary-active: var(--wb-color-light-secondary-70);
|
||||
--wb-light-color-action-primary-active: var(--wb-color-light-primary-50);
|
||||
--wb-light-color-action-disabled: var(--wb-color-light-gray-20);
|
||||
--wb-light-color-action-primary-selected: var(--wb-color-light-primary-5);
|
||||
--wb-light-color-input-border: var(--wb-color-light-gray-60);
|
||||
--wb-light-color-input-border-disabled: var(--wb-color-light-gray-30);
|
||||
--wb-light-color-input-border-active: var(--wb-color-light-primary-50);
|
||||
--wb-light-color-input-border-error: var(--wb-color-light-danger-50);
|
||||
--wb-light-color-input-surface: var(--wb-color-light-gray-0);
|
||||
--wb-light-color-input-surface-disabled: var(--wb-color-light-gray-20);
|
||||
--wb-light-color-graphic-blue-subtler: var(--wb-color-light-graphic-10);
|
||||
--wb-light-color-graphic-blue-subtle: var(--wb-color-light-graphic-30);
|
||||
--wb-light-color-graphic-blue: var(--wb-color-light-graphic-50);
|
||||
--wb-light-color-graphic-blue-dark: var(--wb-color-light-graphic-70);
|
||||
--wb-light-color-graphic-blue-darker: var(--wb-color-light-graphic-90);
|
||||
--wb-light-color-graphic-red-subtler: var(--wb-color-light-point-5);
|
||||
--wb-light-color-graphic-red-subtle: var(--wb-color-light-point-10);
|
||||
--wb-light-color-graphic-red: var(--wb-color-high-contrast-point-20);
|
||||
--wb-light-color-graphic-red-dark: var(--wb-color-high-contrast-point-40);
|
||||
--wb-light-color-graphic-red-darker: var(--wb-color-high-contrast-point-70);
|
||||
--wb-light-color-graphic-brand: var(--wb-color-light-primary-50);
|
||||
--wb-light-color-alpha-base100: var(--wb-color-light-alpha-white100);
|
||||
--wb-light-color-alpha-base50: var(--wb-color-light-alpha-white50);
|
||||
--wb-light-color-alpha-base25: var(--wb-color-high-contrast-alpha-white25);
|
||||
--wb-light-color-alpha-base0: var(--wb-color-light-alpha-white0);
|
||||
--wb-light-color-alpha-inverse100: var(--wb-color-light-alpha-black100);
|
||||
--wb-light-color-alpha-inverse50: var(--wb-color-light-alpha-black50);
|
||||
--wb-light-color-alpha-inverse25: var(--wb-color-light-alpha-black25);
|
||||
--wb-light-color-alpha-inverse0: var(--wb-color-light-alpha-black0);
|
||||
--wb-light-color-alpha-base75: var(--wb-color-light-alpha-white75);
|
||||
--wb-light-color-alpha-inverse75: var(--wb-color-light-alpha-black75);
|
||||
--wb-light-color-alpha-inverse10: var(--wb-color-light-alpha-black10);
|
||||
--wb-light-color-alpha-base10: var(--wb-color-high-contrast-alpha-white10);
|
||||
--wb-light-color-alpha-shadow1: #0000000d;
|
||||
--wb-light-color-alpha-shadow2: #00000014;
|
||||
--wb-light-color-alpha-shadow3: #0000001f;
|
||||
--wb-light-border-width-variable-regular: 0.1rem;
|
||||
--wb-light-border-width-variable-medium: 0.2rem;
|
||||
--wb-light-border-width-static-regular: 0.1rem;
|
||||
--wb-light-border-width-static-medium: 0.2rem;
|
||||
|
||||
/* MODE-HIGH-CONTRAST */
|
||||
--wb-high-contrast-color-surface-gray-subtler: var(--wb-color-high-contrast-gray-95);
|
||||
--wb-high-contrast-color-surface-gray-subtle: var(--wb-color-high-contrast-gray-90);
|
||||
--wb-high-contrast-color-surface-disabled: var(--wb-color-high-contrast-gray-70);
|
||||
--wb-high-contrast-color-surface-primary-subtler: var(--wb-color-high-contrast-primary-95);
|
||||
--wb-high-contrast-color-surface-secondary-subtler: var(--wb-color-high-contrast-secondary-95);
|
||||
--wb-high-contrast-color-surface-danger-subtler: var(--wb-color-high-contrast-danger-95);
|
||||
--wb-high-contrast-color-surface-warning-subtler: var(--wb-color-high-contrast-warning-95);
|
||||
--wb-high-contrast-color-surface-success-subtler: var(--wb-color-high-contrast-success-95);
|
||||
--wb-high-contrast-color-surface-information-subtler: var(--wb-color-high-contrast-information-95);
|
||||
--wb-high-contrast-color-surface-point-subtler: var(--wb-color-high-contrast-point-95);
|
||||
--wb-high-contrast-color-surface-white: var(--wb-color-high-contrast-gray-100);
|
||||
--wb-high-contrast-color-surface-inverse: var(--wb-color-high-contrast-gray-10);
|
||||
--wb-high-contrast-color-surface-white-static: var(--wb-color-high-contrast-gray-0);
|
||||
--wb-high-contrast-color-surface-inverse-static: var(--wb-color-high-contrast-gray-90);
|
||||
--wb-high-contrast-color-surface-white-subtle: var(--wb-color-high-contrast-gray-95);
|
||||
--wb-high-contrast-color-surface-white-subtler: var(--wb-color-high-contrast-gray-90);
|
||||
--wb-high-contrast-color-border-gray-light: var(--wb-color-high-contrast-gray-80);
|
||||
--wb-high-contrast-color-border-gray: var(--wb-color-high-contrast-gray-70);
|
||||
--wb-high-contrast-color-border-secondary-light: var(--wb-color-high-contrast-secondary-90);
|
||||
--wb-high-contrast-color-border-danger-light: var(--wb-color-high-contrast-danger-90);
|
||||
--wb-high-contrast-color-border-danger: var(--wb-color-high-contrast-danger-50);
|
||||
--wb-high-contrast-color-border-warning-light: var(--wb-color-high-contrast-warning-90);
|
||||
--wb-high-contrast-color-border-warning: var(--wb-color-high-contrast-warning-50);
|
||||
--wb-high-contrast-color-border-success-light: var(--wb-color-high-contrast-success-90);
|
||||
--wb-high-contrast-color-border-success: var(--wb-color-high-contrast-success-50);
|
||||
--wb-high-contrast-color-border-information-light: var(--wb-color-high-contrast-information-90);
|
||||
--wb-high-contrast-color-border-information: var(--wb-color-high-contrast-information-50);
|
||||
--wb-high-contrast-color-border-gray-dark: var(--wb-color-high-contrast-gray-40);
|
||||
--wb-high-contrast-color-border-primary: var(--wb-color-high-contrast-primary-50);
|
||||
--wb-high-contrast-color-border-disabled: var(--wb-color-high-contrast-gray-70);
|
||||
--wb-high-contrast-color-border-gray-darker: var(--wb-color-high-contrast-gray-10);
|
||||
--wb-high-contrast-color-border-secondary: var(--wb-color-high-contrast-secondary-60);
|
||||
--wb-high-contrast-color-border-inverse: var(--wb-color-high-contrast-gray-100);
|
||||
--wb-high-contrast-color-border-transparency: var(--wb-color-high-contrast-alpha-white25);
|
||||
--wb-high-contrast-color-border-primary-light: var(--wb-color-high-contrast-primary-90);
|
||||
--wb-high-contrast-color-border-point: var(--wb-color-high-contrast-point-50);
|
||||
--wb-high-contrast-color-border-point-light: var(--wb-color-high-contrast-point-90);
|
||||
--wb-high-contrast-color-divider-gray-light: var(--wb-color-high-contrast-gray-80);
|
||||
--wb-high-contrast-color-divider-gray: var(--wb-color-high-contrast-gray-70);
|
||||
--wb-high-contrast-color-divider-gray-dark: var(--wb-color-high-contrast-gray-50);
|
||||
--wb-high-contrast-color-divider-primary: var(--wb-color-high-contrast-primary-50);
|
||||
--wb-high-contrast-color-divider-secondary-light: var(--wb-color-high-contrast-secondary-90);
|
||||
--wb-high-contrast-color-divider-secondary: var(--wb-color-high-contrast-secondary-60);
|
||||
--wb-high-contrast-color-divider-error: var(--wb-color-high-contrast-danger-50);
|
||||
--wb-high-contrast-color-divider-primary-light: var(--wb-color-high-contrast-primary-90);
|
||||
--wb-high-contrast-color-divider-inverse: var(--wb-color-high-contrast-gray-100);
|
||||
--wb-high-contrast-color-divider-gray-darker: var(--wb-color-high-contrast-gray-10);
|
||||
--wb-high-contrast-color-divider-point: var(--wb-color-high-contrast-point-50);
|
||||
--wb-high-contrast-color-text-bolder: var(--wb-color-high-contrast-gray-10);
|
||||
--wb-high-contrast-color-text-subtle: var(--wb-color-high-contrast-gray-20);
|
||||
--wb-high-contrast-color-text-disabled: var(--wb-color-high-contrast-gray-60);
|
||||
--wb-high-contrast-color-text-disabled-on: var(--wb-color-high-contrast-gray-50);
|
||||
--wb-high-contrast-color-text-primary: var(--wb-color-high-contrast-primary-20);
|
||||
--wb-high-contrast-color-text-secondary: var(--wb-color-high-contrast-secondary-20);
|
||||
--wb-high-contrast-color-text-danger: var(--wb-color-high-contrast-danger-20);
|
||||
--wb-high-contrast-color-text-warning: var(--wb-color-high-contrast-warning-20);
|
||||
--wb-high-contrast-color-text-success: var(--wb-color-high-contrast-success-20);
|
||||
--wb-high-contrast-color-text-information: var(--wb-color-high-contrast-information-20);
|
||||
--wb-high-contrast-color-text-basic: var(--wb-color-high-contrast-gray-5);
|
||||
--wb-high-contrast-color-text-point: var(--wb-color-high-contrast-point-20);
|
||||
--wb-high-contrast-color-text-bolder-inverse: var(--wb-color-high-contrast-gray-95);
|
||||
--wb-high-contrast-color-text-basic-inverse: var(--wb-color-high-contrast-gray-90);
|
||||
--wb-high-contrast-color-text-subtle-inverse: var(--wb-color-high-contrast-gray-70);
|
||||
--wb-high-contrast-color-text-inverse-static: var(--wb-color-high-contrast-gray-0);
|
||||
--wb-high-contrast-color-text-static: var(--wb-color-high-contrast-gray-90);
|
||||
--wb-high-contrast-color-icon-gray: var(--wb-color-high-contrast-gray-5);
|
||||
--wb-high-contrast-color-icon-gray-fill: var(--wb-color-high-contrast-gray-70);
|
||||
--wb-high-contrast-color-icon-inverse: var(--wb-color-high-contrast-gray-90);
|
||||
--wb-high-contrast-color-icon-primary: var(--wb-color-high-contrast-primary-20);
|
||||
--wb-high-contrast-color-icon-secondary: var(--wb-color-high-contrast-secondary-20);
|
||||
--wb-high-contrast-color-icon-point: var(--wb-color-high-contrast-point-20);
|
||||
--wb-high-contrast-color-icon-danger: var(--wb-color-high-contrast-danger-20);
|
||||
--wb-high-contrast-color-icon-warning: var(--wb-color-high-contrast-warning-20);
|
||||
--wb-high-contrast-color-icon-success: var(--wb-color-high-contrast-success-20);
|
||||
--wb-high-contrast-color-icon-information: var(--wb-color-high-contrast-information-20);
|
||||
--wb-high-contrast-color-icon-gray-light: var(--wb-color-high-contrast-gray-20);
|
||||
--wb-high-contrast-color-icon-disabled: var(--wb-color-high-contrast-gray-60);
|
||||
--wb-high-contrast-color-icon-disabled-on: var(--wb-color-high-contrast-gray-50);
|
||||
--wb-high-contrast-color-icon-inverse-static: var(--wb-color-high-contrast-gray-0);
|
||||
--wb-high-contrast-color-icon-primary-static: var(--wb-color-high-contrast-primary-50);
|
||||
--wb-high-contrast-color-icon-secondary-static: var(--wb-color-high-contrast-secondary-80);
|
||||
--wb-high-contrast-color-icon-point-static: var(--wb-color-high-contrast-point-50);
|
||||
--wb-high-contrast-color-icon-danger-static: var(--wb-color-high-contrast-danger-50);
|
||||
--wb-high-contrast-color-icon-warning-static: var(--wb-color-high-contrast-warning-50);
|
||||
--wb-high-contrast-color-icon-success-static: var(--wb-color-high-contrast-success-50);
|
||||
--wb-high-contrast-color-icon-information-static: var(--wb-color-high-contrast-information-50);
|
||||
--wb-high-contrast-color-icon-gray-static: var(--wb-color-high-contrast-gray-80);
|
||||
--wb-high-contrast-color-link-default: var(--wb-color-high-contrast-primary-30);
|
||||
--wb-high-contrast-color-link-hover: var(--wb-color-high-contrast-primary-20);
|
||||
--wb-high-contrast-color-link-pressed: var(--wb-color-high-contrast-primary-10);
|
||||
--wb-high-contrast-color-link-visited: #c49ff9;
|
||||
--wb-high-contrast-color-button-primary-fill: var(--wb-color-high-contrast-primary-50);
|
||||
--wb-high-contrast-color-button-primary-fill-hover: var(--wb-color-high-contrast-primary-60);
|
||||
--wb-high-contrast-color-button-primary-fill-pressed: var(--wb-color-high-contrast-primary-70);
|
||||
--wb-high-contrast-color-button-secondary-fill: var(--wb-color-high-contrast-primary-95);
|
||||
--wb-high-contrast-color-button-secondary-fill-hover: var(--wb-color-high-contrast-primary-90);
|
||||
--wb-high-contrast-color-button-secondary-fill-pressed: var(--wb-color-high-contrast-primary-80);
|
||||
--wb-high-contrast-color-button-secondary-border: var(--wb-color-high-contrast-primary-50);
|
||||
--wb-high-contrast-color-button-tertiary-fill: var(--wb-color-high-contrast-alpha-black0);
|
||||
--wb-high-contrast-color-button-tertiary-fill-hover: var(--wb-color-high-contrast-gray-95);
|
||||
--wb-high-contrast-color-button-tertiary-fill-pressed: var(--wb-color-high-contrast-gray-80);
|
||||
--wb-high-contrast-color-button-tertiary-border: var(--wb-color-high-contrast-gray-40);
|
||||
--wb-high-contrast-color-button-disabled-fill: var(--wb-color-high-contrast-gray-80);
|
||||
--wb-high-contrast-color-button-text-fill-hover: var(--wb-color-high-contrast-secondary-95);
|
||||
--wb-high-contrast-color-button-text-fill-pressed: var(--wb-color-high-contrast-secondary-90);
|
||||
--wb-high-contrast-color-button-text-fill: var(--wb-color-high-contrast-alpha-black0);
|
||||
--wb-high-contrast-color-button-text-border: var(--wb-color-high-contrast-alpha-white50);
|
||||
--wb-high-contrast-color-button-disabled-border: var(--wb-color-high-contrast-gray-70);
|
||||
--wb-high-contrast-color-background-white: var(--wb-color-high-contrast-gray-100);
|
||||
--wb-high-contrast-color-background-inverse: var(--wb-color-high-contrast-gray-10);
|
||||
--wb-high-contrast-color-background-gray-subtler: var(--wb-color-high-contrast-gray-95);
|
||||
--wb-high-contrast-color-background-gray-subtle: var(--wb-color-high-contrast-gray-90);
|
||||
--wb-high-contrast-color-background-dim: var(--wb-color-high-contrast-alpha-black75);
|
||||
--wb-high-contrast-color-element-disabled-light: var(--wb-color-high-contrast-gray-80);
|
||||
--wb-high-contrast-color-element-disabled-dark: var(--wb-color-high-contrast-gray-60);
|
||||
--wb-high-contrast-color-element-gray-lighter: var(--wb-color-high-contrast-gray-95);
|
||||
--wb-high-contrast-color-element-gray-light: var(--wb-color-high-contrast-gray-90);
|
||||
--wb-high-contrast-color-element-gray: var(--wb-color-high-contrast-gray-50);
|
||||
--wb-high-contrast-color-element-primary-lighter: var(--wb-color-high-contrast-primary-95);
|
||||
--wb-high-contrast-color-element-primary-light: var(--wb-color-high-contrast-primary-90);
|
||||
--wb-high-contrast-color-element-primary: var(--wb-color-high-contrast-primary-50);
|
||||
--wb-high-contrast-color-element-secondary-lighter: var(--wb-color-high-contrast-secondary-95);
|
||||
--wb-high-contrast-color-element-secondary-light: var(--wb-color-high-contrast-secondary-90);
|
||||
--wb-high-contrast-color-element-secondary: var(--wb-color-high-contrast-secondary-60);
|
||||
--wb-high-contrast-color-element-point-lighter: var(--wb-color-high-contrast-point-95);
|
||||
--wb-high-contrast-color-element-point-light: var(--wb-color-high-contrast-point-90);
|
||||
--wb-high-contrast-color-element-point: var(--wb-color-high-contrast-point-50);
|
||||
--wb-high-contrast-color-element-danger-lighter: var(--wb-color-high-contrast-danger-95);
|
||||
--wb-high-contrast-color-element-danger: var(--wb-color-high-contrast-danger-50);
|
||||
--wb-high-contrast-color-element-warning-lighter: var(--wb-color-high-contrast-warning-95);
|
||||
--wb-high-contrast-color-element-warning: var(--wb-color-high-contrast-warning-30);
|
||||
--wb-high-contrast-color-element-success-lighter: var(--wb-color-high-contrast-success-95);
|
||||
--wb-high-contrast-color-element-success: var(--wb-color-high-contrast-success-50);
|
||||
--wb-high-contrast-color-element-information-lighter: var(--wb-color-high-contrast-information-95);
|
||||
--wb-high-contrast-color-element-information: var(--wb-color-high-contrast-information-50);
|
||||
--wb-high-contrast-color-element-inverse: var(--wb-color-high-contrast-gray-95);
|
||||
--wb-high-contrast-color-element-gray-dark: var(--wb-color-high-contrast-gray-40);
|
||||
--wb-high-contrast-color-element-inverse-static: var(--wb-color-high-contrast-gray-0);
|
||||
--wb-high-contrast-color-action-white: var(--wb-color-light-gray-100);
|
||||
--wb-high-contrast-color-action-primary: var(--wb-color-high-contrast-alpha-black0);
|
||||
--wb-high-contrast-color-action-primary-hover: var(--wb-color-high-contrast-primary-95);
|
||||
--wb-high-contrast-color-action-primary-pressed: var(--wb-color-high-contrast-primary-90);
|
||||
--wb-high-contrast-color-action-secondary: var(--wb-color-light-alpha-black0);
|
||||
--wb-high-contrast-color-action-secondary-hover: var(--wb-color-high-contrast-secondary-95);
|
||||
--wb-high-contrast-color-action-secondary-pressed: var(--wb-color-high-contrast-secondary-90);
|
||||
--wb-high-contrast-color-action-secondary-selected: var(--wb-color-high-contrast-secondary-95);
|
||||
--wb-high-contrast-color-action-secondary-on: var(--wb-color-high-contrast-alpha-black0);
|
||||
--wb-high-contrast-color-action-secondary-on-hover: var(--wb-color-high-contrast-gray-100);
|
||||
--wb-high-contrast-color-action-secondary-on-pressed: var(--wb-color-high-contrast-secondary-90);
|
||||
--wb-high-contrast-color-action-secondary-on-selected: var(--wb-color-high-contrast-gray-95);
|
||||
--wb-high-contrast-color-action-secondary-active: var(--wb-color-high-contrast-secondary-60);
|
||||
--wb-high-contrast-color-action-primary-active: var(--wb-color-high-contrast-primary-50);
|
||||
--wb-high-contrast-color-action-disabled: var(--wb-color-high-contrast-gray-80);
|
||||
--wb-high-contrast-color-action-primary-selected: var(--wb-color-high-contrast-primary-95);
|
||||
--wb-high-contrast-color-input-border: var(--wb-color-high-contrast-gray-40);
|
||||
--wb-high-contrast-color-input-border-disabled: var(--wb-color-high-contrast-gray-70);
|
||||
--wb-high-contrast-color-input-border-active: var(--wb-color-high-contrast-primary-50);
|
||||
--wb-high-contrast-color-input-border-error: var(--wb-color-high-contrast-danger-50);
|
||||
--wb-high-contrast-color-input-surface: var(--wb-color-high-contrast-gray-90);
|
||||
--wb-high-contrast-color-input-surface-disabled: var(--wb-color-high-contrast-gray-95);
|
||||
--wb-high-contrast-color-graphic-blue-subtler: var(--wb-color-high-contrast-graphic-10);
|
||||
--wb-high-contrast-color-graphic-blue-subtle: var(--wb-color-high-contrast-graphic-30);
|
||||
--wb-high-contrast-color-graphic-blue: var(--wb-color-high-contrast-graphic-50);
|
||||
--wb-high-contrast-color-graphic-blue-dark: var(--wb-color-high-contrast-graphic-70);
|
||||
--wb-high-contrast-color-graphic-blue-darker: var(--wb-color-high-contrast-graphic-90);
|
||||
--wb-high-contrast-color-graphic-red-subtler: var(--wb-color-high-contrast-point-5);
|
||||
--wb-high-contrast-color-graphic-red-subtle: var(--wb-color-high-contrast-point-10);
|
||||
--wb-high-contrast-color-graphic-red: var(--wb-color-high-contrast-point-20);
|
||||
--wb-high-contrast-color-graphic-red-dark: var(--wb-color-high-contrast-point-40);
|
||||
--wb-high-contrast-color-graphic-red-darker: var(--wb-color-high-contrast-point-70);
|
||||
--wb-high-contrast-color-graphic-brand: var(--wb-color-high-contrast-primary-50);
|
||||
--wb-high-contrast-color-alpha-base100: var(--wb-color-high-contrast-alpha-black100);
|
||||
--wb-high-contrast-color-alpha-base50: var(--wb-color-high-contrast-alpha-black50);
|
||||
--wb-high-contrast-color-alpha-base25: var(--wb-color-high-contrast-alpha-black25);
|
||||
--wb-high-contrast-color-alpha-base0: var(--wb-color-light-alpha-black0);
|
||||
--wb-high-contrast-color-alpha-inverse100: var(--wb-color-high-contrast-alpha-white100);
|
||||
--wb-high-contrast-color-alpha-inverse50: var(--wb-color-high-contrast-alpha-white50);
|
||||
--wb-high-contrast-color-alpha-inverse25: var(--wb-color-high-contrast-alpha-white25);
|
||||
--wb-high-contrast-color-alpha-inverse0: var(--wb-color-high-contrast-alpha-white0);
|
||||
--wb-high-contrast-color-alpha-base75: var(--wb-color-high-contrast-alpha-black75);
|
||||
--wb-high-contrast-color-alpha-inverse75: var(--wb-color-high-contrast-alpha-white75);
|
||||
--wb-high-contrast-color-alpha-inverse10: var(--wb-color-high-contrast-alpha-black25);
|
||||
--wb-high-contrast-color-alpha-base10: var(--wb-color-high-contrast-alpha-black10);
|
||||
--wb-high-contrast-color-alpha-shadow1: #0000001f;
|
||||
--wb-high-contrast-color-alpha-shadow2: #00000033;
|
||||
--wb-high-contrast-color-alpha-shadow3: #00000066;
|
||||
--wb-high-contrast-border-width-variable-regular: 0.2rem;
|
||||
--wb-high-contrast-border-width-variable-medium: 0.3rem;
|
||||
--wb-high-contrast-border-width-static-regular: 0.1rem;
|
||||
--wb-high-contrast-border-width-static-medium: 0.2rem;
|
||||
|
||||
/* RESPONSIVE-PC */
|
||||
--wb-pc-font-size-display-large: 6rem;
|
||||
--wb-pc-font-size-display-medium: 4.4rem;
|
||||
--wb-pc-font-size-display-small: 3.6rem;
|
||||
--wb-pc-font-size-body-large: 1.9rem;
|
||||
--wb-pc-font-size-body-medium: 1.7rem;
|
||||
--wb-pc-font-size-body-small: 1.5rem;
|
||||
--wb-pc-font-size-body-xsmall: 1.3rem;
|
||||
--wb-pc-font-size-label-large: 1.9rem;
|
||||
--wb-pc-font-size-label-medium: 1.7rem;
|
||||
--wb-pc-font-size-label-small: 1.5rem;
|
||||
--wb-pc-font-size-label-xsmall: 1.3rem;
|
||||
--wb-pc-font-size-heading-large: 3.2rem;
|
||||
--wb-pc-font-size-heading-medium: 2.4rem;
|
||||
--wb-pc-font-size-heading-small: 1.9rem;
|
||||
--wb-pc-font-size-heading-xsmall: 1.7rem;
|
||||
--wb-pc-font-size-heading-xxsmall: 1.5rem;
|
||||
--wb-pc-font-size-heading-xlarge: 4rem;
|
||||
--wb-pc-font-size-navigation-title-medium: 2.4rem;
|
||||
--wb-pc-font-size-navigation-title-small: 1.9rem;
|
||||
--wb-pc-font-size-navigation-depth-medium-bold: 1.7rem;
|
||||
--wb-pc-font-size-navigation-depth-medium: 1.7rem;
|
||||
--wb-pc-font-size-navigation-depth-small-bold: 1.5rem;
|
||||
--wb-pc-font-size-navigation-depth-small: 1.5rem;
|
||||
--wb-pc-gap-layout-header-breadcrumb: var(--wb-number-10);
|
||||
--wb-pc-gap-layout-left-contents: var(--wb-number-18);
|
||||
--wb-pc-gap-layout-contents-right: var(--wb-number-14);
|
||||
--wb-pc-gap-layout-h1-h2: var(--wb-number-16);
|
||||
--wb-pc-gap-layout-h2-h2: var(--wb-number-20);
|
||||
--wb-pc-gap-layout-h2-h3: var(--wb-number-14);
|
||||
--wb-pc-gap-layout-h3-h3: var(--wb-number-18);
|
||||
--wb-pc-gap-layout-h3-h4: var(--wb-number-10);
|
||||
--wb-pc-gap-layout-h4-h4: var(--wb-number-14);
|
||||
--wb-pc-gap-layout-h4-h5: var(--wb-number-8);
|
||||
--wb-pc-gap-layout-h5-h5: var(--wb-number-12);
|
||||
--wb-pc-gap-layout-title-body-small: var(--wb-number-8);
|
||||
--wb-pc-gap-layout-title-body-medium: var(--wb-number-9);
|
||||
--wb-pc-gap-layout-title-body-large: var(--wb-number-10);
|
||||
--wb-pc-gap-layout-breadcrumb-h1: var(--wb-number-14);
|
||||
--wb-pc-gap-layout-contents-footer: var(--wb-number-18);
|
||||
--wb-pc-gap-layout-text-text-large: var(--wb-number-9);
|
||||
--wb-pc-gap-layout-text-text-medium: var(--wb-number-8);
|
||||
--wb-pc-gap-layout-text-text-small: var(--wb-number-7);
|
||||
--wb-pc-gap-layout-image-text-small: var(--wb-number-9);
|
||||
--wb-pc-gap-layout-image-text-medium: var(--wb-number-10);
|
||||
--wb-pc-gap-layout-image-text-large: var(--wb-number-12);
|
||||
--wb-pc-padding-card-large: var(--wb-number-14);
|
||||
--wb-pc-padding-card-medium: var(--wb-number-12);
|
||||
--wb-pc-padding-card-small: var(--wb-number-10);
|
||||
--wb-pc-padding-card-xsmall: var(--wb-number-8);
|
||||
|
||||
/* RESPONSIVE-MOBILE */
|
||||
--wb-mobile-font-size-display-large: 4.4rem;
|
||||
--wb-mobile-font-size-display-medium: 3.2rem;
|
||||
--wb-mobile-font-size-display-small: 2.8rem;
|
||||
--wb-mobile-font-size-body-large: 1.9rem;
|
||||
--wb-mobile-font-size-body-medium: 1.7rem;
|
||||
--wb-mobile-font-size-body-small: 1.5rem;
|
||||
--wb-mobile-font-size-body-xsmall: 1.3rem;
|
||||
--wb-mobile-font-size-label-large: 1.9rem;
|
||||
--wb-mobile-font-size-label-medium: 1.7rem;
|
||||
--wb-mobile-font-size-label-small: 1.5rem;
|
||||
--wb-mobile-font-size-label-xsmall: 1.3rem;
|
||||
--wb-mobile-font-size-heading-large: 2.4rem;
|
||||
--wb-mobile-font-size-heading-medium: 2.2rem;
|
||||
--wb-mobile-font-size-heading-small: 1.9rem;
|
||||
--wb-mobile-font-size-heading-xsmall: 1.7rem;
|
||||
--wb-mobile-font-size-heading-xxsmall: 1.5rem;
|
||||
--wb-mobile-font-size-heading-xlarge: 2.8rem;
|
||||
--wb-mobile-font-size-navigation-title-medium: 2.2rem;
|
||||
--wb-mobile-font-size-navigation-title-small: 1.9rem;
|
||||
--wb-mobile-font-size-navigation-depth-medium-bold: 1.7rem;
|
||||
--wb-mobile-font-size-navigation-depth-medium: 1.7rem;
|
||||
--wb-mobile-font-size-navigation-depth-small-bold: 1.5rem;
|
||||
--wb-mobile-font-size-navigation-depth-small: 1.5rem;
|
||||
--wb-mobile-gap-layout-header-breadcrumb: var(--wb-number-8);
|
||||
--wb-mobile-gap-layout-left-contents: 0rem;
|
||||
--wb-mobile-gap-layout-contents-right: 0rem;
|
||||
--wb-mobile-gap-layout-h1-h2: var(--wb-number-12);
|
||||
--wb-mobile-gap-layout-h2-h2: var(--wb-number-14);
|
||||
--wb-mobile-gap-layout-h2-h3: var(--wb-number-10);
|
||||
--wb-mobile-gap-layout-h3-h3: var(--wb-number-12);
|
||||
--wb-mobile-gap-layout-h3-h4: var(--wb-number-8);
|
||||
--wb-mobile-gap-layout-h4-h4: var(--wb-number-10);
|
||||
--wb-mobile-gap-layout-h4-h5: var(--wb-number-7);
|
||||
--wb-mobile-gap-layout-h5-h5: var(--wb-number-8);
|
||||
--wb-mobile-gap-layout-title-body-small: var(--wb-number-5);
|
||||
--wb-mobile-gap-layout-title-body-medium: var(--wb-number-7);
|
||||
--wb-mobile-gap-layout-title-body-large: var(--wb-number-9);
|
||||
--wb-mobile-gap-layout-breadcrumb-h1: var(--wb-number-12);
|
||||
--wb-mobile-gap-layout-contents-footer: var(--wb-number-14);
|
||||
--wb-mobile-gap-layout-text-text-large: var(--wb-number-8);
|
||||
--wb-mobile-gap-layout-text-text-medium: var(--wb-number-7);
|
||||
--wb-mobile-gap-layout-text-text-small: var(--wb-number-6);
|
||||
--wb-mobile-gap-layout-image-text-small: var(--wb-number-8);
|
||||
--wb-mobile-gap-layout-image-text-medium: var(--wb-number-9);
|
||||
--wb-mobile-gap-layout-image-text-large: var(--wb-number-10);
|
||||
--wb-mobile-padding-card-large: var(--wb-number-10);
|
||||
--wb-mobile-padding-card-medium: var(--wb-number-10);
|
||||
--wb-mobile-padding-card-small: var(--wb-number-9);
|
||||
--wb-mobile-padding-card-xsmall: var(--wb-number-7);
|
||||
|
||||
/* SEMANTIC */
|
||||
--wb-gap-1: var(--wb-number-2);
|
||||
--wb-gap-2: var(--wb-number-3);
|
||||
--wb-gap-3: var(--wb-number-5);
|
||||
--wb-gap-4: var(--wb-number-7);
|
||||
--wb-gap-5: var(--wb-number-8);
|
||||
--wb-gap-6: var(--wb-number-9);
|
||||
--wb-gap-7: var(--wb-number-10);
|
||||
--wb-gap-8: var(--wb-number-12);
|
||||
--wb-gap-9: var(--wb-number-14);
|
||||
--wb-gap-10: var(--wb-number-16);
|
||||
--wb-gap-11: var(--wb-number-18);
|
||||
--wb-gap-12: var(--wb-number-20);
|
||||
--wb-padding-1: var(--wb-number-2);
|
||||
--wb-padding-2: var(--wb-number-3);
|
||||
--wb-padding-3: var(--wb-number-5);
|
||||
--wb-padding-4: var(--wb-number-6);
|
||||
--wb-padding-5: var(--wb-number-7);
|
||||
--wb-padding-6: var(--wb-number-8);
|
||||
--wb-padding-7: var(--wb-number-9);
|
||||
--wb-padding-8: var(--wb-number-10);
|
||||
--wb-padding-9: var(--wb-number-12);
|
||||
--wb-padding-10: var(--wb-number-14);
|
||||
--wb-size-height-1: var(--wb-number-5);
|
||||
--wb-size-height-2: var(--wb-number-8);
|
||||
--wb-size-height-3: var(--wb-number-9);
|
||||
--wb-size-height-4: var(--wb-number-10);
|
||||
--wb-size-height-5: var(--wb-number-12);
|
||||
--wb-size-height-6: var(--wb-number-14);
|
||||
--wb-size-height-7: var(--wb-number-16);
|
||||
--wb-size-height-8: var(--wb-number-17);
|
||||
--wb-size-height-9: var(--wb-number-18);
|
||||
--wb-size-height-10: var(--wb-number-19);
|
||||
--wb-size-height-11: var(--wb-number-20);
|
||||
--wb-radius-xsmall1: var(--wb-number-2);
|
||||
--wb-radius-xsmall2: var(--wb-number-2);
|
||||
--wb-radius-xsmall3: var(--wb-number-2);
|
||||
--wb-radius-small1: var(--wb-number-3);
|
||||
--wb-radius-small2: var(--wb-number-3);
|
||||
--wb-radius-small3: var(--wb-number-3);
|
||||
--wb-radius-medium1: var(--wb-number-4);
|
||||
--wb-radius-medium2: var(--wb-number-4);
|
||||
--wb-radius-medium3: var(--wb-number-5);
|
||||
--wb-radius-medium4: var(--wb-number-5);
|
||||
--wb-radius-large1: var(--wb-number-6);
|
||||
--wb-radius-large2: var(--wb-number-6);
|
||||
--wb-radius-xlarge1: var(--wb-number-7);
|
||||
--wb-radius-xlarge2: var(--wb-number-7);
|
||||
--wb-radius-max: var(--wb-number-max);
|
||||
}
|
||||
+2065
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,13 @@
|
||||
//공통
|
||||
|
||||
@import "path";
|
||||
@import "wb_tokens";
|
||||
@import "include";
|
||||
|
||||
@import "root";
|
||||
@import "icon";
|
||||
|
||||
@import "dropdown";
|
||||
@import "menu";
|
||||
|
||||
@import "reset";
|
||||
@@ -0,0 +1,45 @@
|
||||
@import "../group_variables";
|
||||
|
||||
@mixin size-medium { // 767까지
|
||||
@media (max-width: ($breakpoint-medium - 1px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin size-medium-more { // 768이상
|
||||
@media (min-width: calc($breakpoint-medium)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin size-medium-to-large { // 768 ~ 1023
|
||||
@media (min-width: calc($breakpoint-medium)) and (max-width: ($breakpoint-large - 1px)) {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
//tablet size 이하
|
||||
@mixin size-large-less { // 1023까지
|
||||
@media (max-width: ($breakpoint-large - 1px)) {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
//tablet size 이상
|
||||
@mixin size-large-more { // 1024이상
|
||||
@media (min-width: calc($breakpoint-large)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
//소형 데스크톱
|
||||
@mixin size-large-to-xlarge { // 1024 ~ 1279
|
||||
@media (min-width: calc($breakpoint-large)) and (max-width: calc($breakpoint-xlarge - 1px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin size-xlarge { // 1280 이상
|
||||
@media (min-width: $breakpoint-xlarge) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
@import 'mixin';
|
||||
// Grid 설정 변수
|
||||
$prefix: "grid"; // 변수 프리픽스
|
||||
$grid-columns: 12; // 기본 컬럼 수
|
||||
$grid-gutter-width: 1rem; // 기본 컬럼 간격
|
||||
$grid-breakpoints: ( // 반응형 브레이크포인트
|
||||
xs: 1200px,
|
||||
);
|
||||
$gutters: (sm: 0.5rem, md: 1rem, lg: 2rem); // Gutter 유틸리티
|
||||
|
||||
// Grid 클래스 활성화 여부
|
||||
$enable-grid-classes: true !default; // Grid 클래스를 생성할지 여부
|
||||
$enable-cssgrid: true !default; // CSS Grid 지원 활성화 여부
|
||||
|
||||
// Breakpoint Helper Mixin
|
||||
@mixin media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
$value: map-get($breakpoints, $breakpoint);
|
||||
|
||||
@if $value != null {
|
||||
@media (min-width: $value) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@error "Error: Breakpoint '#{$breakpoint}' not found in map.";
|
||||
}
|
||||
}
|
||||
|
||||
// Row Mixin
|
||||
@mixin make-row($gutter: $grid-gutter-width) {
|
||||
--#{$prefix}-gutter-x: #{$gutter};
|
||||
--#{$prefix}-gutter-y: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: calc(-0.5 * var(--#{$prefix}-gutter-x));
|
||||
margin-right: calc(-0.5 * var(--#{$prefix}-gutter-x));
|
||||
margin-top: calc(-1 * var(--#{$prefix}-gutter-y));
|
||||
}
|
||||
|
||||
// Column Ready Mixin
|
||||
@mixin make-col-ready() {
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-left: calc(var(--#{$prefix}-gutter-x) / 2);
|
||||
padding-right: calc(var(--#{$prefix}-gutter-x) / 2);
|
||||
margin-top: var(--#{$prefix}-gutter-y);
|
||||
}
|
||||
|
||||
// Flexbox Column Mixin
|
||||
@mixin make-col($size: null, $columns: $grid-columns) {
|
||||
@if $size == null {
|
||||
flex: 1 1 0;
|
||||
max-width: 100%;
|
||||
} @else if type-of($size) == 'number' and type-of($columns) == 'number' and $columns > 0 {
|
||||
flex: 0 0 percentage($size / $columns);
|
||||
max-width: percentage($size / $columns);
|
||||
} @else {
|
||||
@error "Error: Invalid $size or $columns value. Received: Size=#{$size}, Columns=#{$columns}";
|
||||
}
|
||||
}
|
||||
|
||||
// CSS Grid Mixin
|
||||
@mixin make-cssgrid($columns: $grid-columns) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat($columns, 1fr);
|
||||
gap: var(--#{$prefix}-gutter-x) var(--#{$prefix}-gutter-y);
|
||||
}
|
||||
|
||||
// Generate Columns for Flexbox and Grid
|
||||
@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
|
||||
@each $breakpoint, $value in $breakpoints {
|
||||
$infix: if($breakpoint == "xs", "", "-#{$breakpoint}");
|
||||
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
// Flexbox Columns
|
||||
@for $i from 1 through $columns {
|
||||
.col#{$infix}-#{$i} {
|
||||
@include make-col($i, $columns);
|
||||
}
|
||||
}
|
||||
|
||||
// CSS Grid Columns
|
||||
@for $i from 1 through $columns {
|
||||
.g-col#{$infix}-#{$i} {
|
||||
grid-column: span $i;
|
||||
}
|
||||
}
|
||||
// Gutter Utilities
|
||||
@each $key, $gutter in $gutters {
|
||||
.g#{$infix}-#{$key} {
|
||||
--#{$prefix}-gutter-x: #{$gutter};
|
||||
--#{$prefix}-gutter-y: #{$gutter};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Row Styles
|
||||
.row {
|
||||
@include make-row();
|
||||
|
||||
> * {
|
||||
@include make-col-ready();
|
||||
}
|
||||
}
|
||||
|
||||
// Generate All Grid Classes
|
||||
@if $enable-grid-classes {
|
||||
@include make-grid-columns();
|
||||
}
|
||||
|
||||
// CSS Grid Container
|
||||
@if $enable-cssgrid {
|
||||
.grid {
|
||||
@include make-cssgrid($grid-columns);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Base Styles
|
||||
.filter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem; // 각 row 간의 간격 설정
|
||||
width: 100%;
|
||||
|
||||
|
||||
// Common Input Styles
|
||||
.sec-input {
|
||||
@include flex(row, center, start, center);
|
||||
gap: 1.25rem;
|
||||
.input-label{
|
||||
@include flex(row, center, start, center);
|
||||
font-size: var(--wb-pc-font-size-body-xsmall);
|
||||
color: var(--wb-color-light-gray-70);
|
||||
font-weight: var(--wb-typo-font-weight-bold);
|
||||
text-align: left;
|
||||
&.w-lg{
|
||||
flex: 100px 0 0;
|
||||
}
|
||||
&.w-m{
|
||||
flex: 70px 0 0;
|
||||
}
|
||||
&.w-auto{
|
||||
flex: 0;
|
||||
}
|
||||
}
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .75rem;
|
||||
height:100%;
|
||||
flex: 1;
|
||||
.input{
|
||||
width:100%;
|
||||
height:100%;
|
||||
input{
|
||||
font-size: var(--wb-pc-font-size-body-small);
|
||||
height:100%;
|
||||
}
|
||||
span{
|
||||
@include flex(row, center, start, center);
|
||||
height:100%;
|
||||
font-size: var(--wb-pc-font-size-body-small);
|
||||
color: var(--wb-color-light-gray-70);
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button Group Styles
|
||||
.btn-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
height:100%;
|
||||
button {
|
||||
flex-shrink: 0; // 버튼 크기 고정
|
||||
flex:1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.k-list-md .k-list-item, .k-list-md .k-list-optionlabel{
|
||||
font-size: var(--wb-pc-font-size-body-small);
|
||||
}
|
||||
|
||||
table{
|
||||
th,td{
|
||||
font-size: 1.25rem !important
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
//svg img
|
||||
@mixin svg-icon($size: var(--wb-icon--size-large), $mode: light, $effect: null) {
|
||||
display: inline-flex;
|
||||
@include square($size);
|
||||
background-color: var(--wb-#{$mode}-color-text-basic);
|
||||
@if ($effect == 'pure') { //mask 효과 없이 디자인된 svg 그대로 사용
|
||||
background-color: transparent !important;
|
||||
}
|
||||
forced-color-adjust: none;
|
||||
// @media (forced-colors: active) {
|
||||
// }
|
||||
}
|
||||
|
||||
//svg icon setting
|
||||
@mixin icon-set ($name, $effect: null) {
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center center;
|
||||
mask-size: contain;
|
||||
-webkit-mask-image: url(#{$url}/dist/images/#{$name}.svg);
|
||||
mask-image: url(#{$url}/dist/images/#{$name}.svg);
|
||||
@if ($effect == 'pure') { //mask 효과 없이 디자인된 svg 그대로 사용
|
||||
-webkit-mask-image: none;
|
||||
mask-image: none;
|
||||
background-image: url(#{$url}/dist/images/#{$name}.svg);
|
||||
background-color: transparent !important;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-mask: none;
|
||||
mask: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
@mixin resetLayout {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
@content;
|
||||
}
|
||||
|
||||
@mixin flex($direction, $wrap: nowrap, $justify: flex-start, $align: stretch) {
|
||||
display: flex;
|
||||
flex-direction: $direction;
|
||||
flex-wrap: $wrap;
|
||||
justify-content: $justify;
|
||||
align-items: $align;
|
||||
}
|
||||
|
||||
@mixin grid($columns, $rows: auto, $flow: row) {
|
||||
display: grid;
|
||||
grid-template-columns: $columns;
|
||||
grid-template-rows: $rows;
|
||||
grid-auto-flow: $flow;
|
||||
}
|
||||
|
||||
@mixin transition {
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
|
||||
@mixin border-radius($radius: 0.75rem) {
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin transform($trans, $num) {
|
||||
transform: #{$trans}(#{$num});
|
||||
}
|
||||
|
||||
// Spacing Utilities
|
||||
@mixin spacing-utilities {
|
||||
@each $direction in (t, r, b, l) {
|
||||
$i: 2; // 초기 값
|
||||
@while $i <= 100 {
|
||||
.m#{$direction}-#{$i} {
|
||||
margin-#{$direction}: #{$i / 16}rem;
|
||||
}
|
||||
|
||||
.p#{$direction}-#{$i} {
|
||||
padding-#{$direction}: #{$i / 16}rem;
|
||||
}
|
||||
|
||||
$i: $i + 2; // 루프 증가
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flex-utilities {
|
||||
.flex {
|
||||
display: flex;
|
||||
|
||||
&-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
&-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-auto {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
&-initial {
|
||||
flex: initial;
|
||||
}
|
||||
|
||||
&-none {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Justify Content Utilities
|
||||
@each $value, $cssValue in (start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, evenly: space-evenly) {
|
||||
.justify-#{$value} {
|
||||
justify-content: #{$cssValue};
|
||||
}
|
||||
}
|
||||
|
||||
// Align Items Utilities
|
||||
@each $value in (start, end, center, baseline, stretch) {
|
||||
.items-#{$value} {
|
||||
align-items: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
// Align Self Utilities
|
||||
@each $value in (auto, start, end, center, stretch) {
|
||||
.self-#{$value} {
|
||||
align-self: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid Utilities
|
||||
@mixin grid-utilities {
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
// Grid Columns
|
||||
@for $i from 1 through 12 {
|
||||
.grid-cols-#{$i} {
|
||||
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
// Grid Rows
|
||||
@for $i from 1 through 6 {
|
||||
.grid-rows-#{$i} {
|
||||
grid-template-rows: repeat(#{$i}, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.grid-flow-row {
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
|
||||
.grid-flow-col {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.grid-flow-row-dense {
|
||||
grid-auto-flow: row dense;
|
||||
}
|
||||
|
||||
.grid-flow-col-dense {
|
||||
grid-auto-flow: column dense;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
//focus color
|
||||
//추후삭제
|
||||
@mixin focus($offset: -.4rem, $color: var(--wb-light-color-border-primary), $alpha: .8) {
|
||||
box-shadow: var(--wb-box-shadow-outline-inset);
|
||||
outline-offset: $offset;
|
||||
}
|
||||
|
||||
//flex 확대 축소
|
||||
@mixin flex-size($shrink, $grow) {
|
||||
flex-shrink: $shrink;
|
||||
flex-grow: $grow;
|
||||
}
|
||||
|
||||
//position
|
||||
@mixin position($p: absolute, $t: null, $b: null, $l: null, $r: null) {
|
||||
position: $p;
|
||||
top: $t;
|
||||
bottom: $b;
|
||||
left: $l;
|
||||
right: $r;
|
||||
}
|
||||
|
||||
//square rectangle
|
||||
@mixin square($w, $h: $w) {
|
||||
width: $w;
|
||||
height: $h;
|
||||
}
|
||||
|
||||
//pseudo element wb
|
||||
@mixin pseudo($c: null) {
|
||||
@if $c != null {
|
||||
content: "" + $c + "";
|
||||
} @else {
|
||||
content: "";
|
||||
}
|
||||
};
|
||||
|
||||
// //flex layout
|
||||
// @mixin flex-layout($d: flex, $ai: flex-start, $jc: flex-start, $fd: row) {
|
||||
// display: $d;
|
||||
// align-items: $ai;
|
||||
// justify-content: $jc;
|
||||
// flex-direction: $fd;
|
||||
// }
|
||||
|
||||
//group contents
|
||||
@mixin group-wrap() {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
@mixin group() {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
width: 1%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
//flex item equal width
|
||||
@mixin equal-width() {
|
||||
flex: 1 1 0px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
//position 중앙 정렬
|
||||
@mixin position-center($type: both) {
|
||||
//좌우중앙
|
||||
@if ($type == 'x') {
|
||||
left: 50%;
|
||||
transform: translateX(-50%)
|
||||
}
|
||||
//상하중앙
|
||||
@else if ($type == 'y') {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
//상하좌우중앙
|
||||
@else if ($type == 'both') {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
//transform 기준점 중앙 정렬
|
||||
@mixin transform-origin($x: 50%, $y: 50%) {
|
||||
transform-origin: $x $y;
|
||||
}
|
||||
|
||||
|
||||
// **** text attr **** //
|
||||
//text ellipsis
|
||||
@mixin ellipsis($line) {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: $line;
|
||||
}
|
||||
|
||||
//sr-only
|
||||
@mixin sr-only {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
//reset text : popover/tooltip
|
||||
@mixin reset-text {
|
||||
font-size: var(--wb-pc-font-size-body-medium);
|
||||
font-style: normal;
|
||||
font-weight: var(--wb-font-weight-regular);
|
||||
line-height: var(--wb-line-height-base);
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
//word-break: normal;
|
||||
white-space: normal;
|
||||
word-spacing: normal;
|
||||
line-break: auto;
|
||||
}
|
||||
|
||||
//css animation visibility
|
||||
@mixin visibility($v) {
|
||||
@if ($v == hidden) {
|
||||
visibility: hidden;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
@else if ($v == visible) {
|
||||
visibility: visible;
|
||||
z-index: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// **** scroll **** //
|
||||
@mixin scrollbar-mode($mode: light) {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--wb-#{$mode}-color-element-secondary-light);
|
||||
border-radius: .8rem;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--wb-#{$mode}-color-element-secondary-lighter);
|
||||
}
|
||||
}
|
||||
@mixin scrollbar($mode: light) {
|
||||
$mode-wb: $mode;
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.8rem;
|
||||
}
|
||||
@include scrollbar-mode(#{$mode-wb});
|
||||
}
|
||||
|
||||
//text underline
|
||||
@mixin underline($offset: var(--wb-font-underline-offset)) {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: $offset;
|
||||
}
|
||||
|
||||
//color mode wb
|
||||
@mixin color-mode($mode: light) {
|
||||
[data-wb-mode="#{$mode}"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
//사이즈별 variable
|
||||
@mixin btn-size($unit) {
|
||||
//unit value: xsmall small medium larger xlarge
|
||||
gap: var(--wb-button--gap-#{$unit});
|
||||
height: var(--wb-button--size-height-#{$unit});
|
||||
padding: var(--wb-button--padding-y-#{$unit}) var(--wb-button--padding-x-#{$unit});
|
||||
border-radius: var(--wb-button--radius-#{$unit});
|
||||
font-size: var(--wb-button--pc-font-size-#{$unit});
|
||||
font-weight: var(--wb-button--font-weight-#{$unit});
|
||||
& {
|
||||
.svg-icon {
|
||||
@include square(var(--wb-icon--size-#{$unit}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//고대비모드인경우 border-width가 두꺼워짐
|
||||
@mixin border-size-mode ($mode: light, $size: regular) {
|
||||
border-width: var(--wb-#{$mode}-border-width-variable-#{$size});
|
||||
}
|
||||
@@ -0,0 +1,586 @@
|
||||
//사이즈 정의
|
||||
@mixin button-size-variable() {
|
||||
//변수 배열 설정
|
||||
$button-size: (
|
||||
xsmall: (
|
||||
size-height: var(--wb-size-height-5),
|
||||
padding-x: var(--wb-padding-4),
|
||||
padding-y: 0,
|
||||
gap: var(--wb-gap-1),
|
||||
radius: var(--wb-radius-small3),
|
||||
pc-font-size: var(--wb-pc-font-size-label-small),
|
||||
mobile-font-size: var(--wb-mobile-font-size-label-small),
|
||||
font-weight: var(--wb-font-weight-regular),
|
||||
),
|
||||
small: (
|
||||
size-height: var(--wb-size-height-6),
|
||||
padding-x: var(--wb-padding-5),
|
||||
padding-y: 0,
|
||||
gap: var(--wb-gap-1),
|
||||
radius: var(--wb-radius-medium1),
|
||||
pc-font-size: var(--wb-pc-font-size-label-small),
|
||||
mobile-font-size: var(--wb-mobile-font-size-label-small),
|
||||
font-weight: var(--wb-font-weight-regular),
|
||||
),
|
||||
medium: (
|
||||
size-height: var(--wb-size-height-7),
|
||||
padding-x: var(--wb-padding-6),
|
||||
padding-y: 0,
|
||||
gap: var(--wb-gap-2),
|
||||
radius: var(--wb-radius-medium2),
|
||||
pc-font-size: var(--wb-pc-font-size-label-medium),
|
||||
mobile-font-size: var(--wb-mobile-font-size-label-medium),
|
||||
font-weight: var(--wb-font-weight-regular),
|
||||
),
|
||||
large: (
|
||||
size-height: var(--wb-size-height-8),
|
||||
padding-x: var(--wb-padding-7),
|
||||
padding-y: 0,
|
||||
gap: var(--wb-gap-2),
|
||||
radius: var(--wb-radius-medium3),
|
||||
pc-font-size: var(--wb-pc-font-size-label-large),
|
||||
mobile-font-size: var(--wb-mobile-font-size-label-large),
|
||||
font-weight: var(--wb-font-weight-regular),
|
||||
),
|
||||
xlarge: (
|
||||
size-height: var(--wb-size-height-9),
|
||||
padding-x: var(--wb-padding-8),
|
||||
padding-y: 0,
|
||||
gap: var(--wb-gap-2),
|
||||
radius: var(--wb-radius-medium4),
|
||||
pc-font-size: var(--wb-pc-font-size-label-large),
|
||||
mobile-font-size: var(--wb-mobile-font-size-label-large),
|
||||
font-weight: var(--wb-font-weight-regular),
|
||||
),
|
||||
) !default;
|
||||
|
||||
//css variable 생성
|
||||
@each $size, $types in $button-size {
|
||||
@each $type, $value in $types {
|
||||
//css variable 생성
|
||||
--wb-button--#{$type}-#{$size}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
//class 정의
|
||||
& {
|
||||
@include btn-size(large);
|
||||
& {
|
||||
@each $size, $types in $button-size {
|
||||
&.#{$size} {
|
||||
@include btn-size(#{$size});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//컬러 정의
|
||||
@mixin button-color-variable($mode) {
|
||||
//변수 배열 정의
|
||||
$button-color-variable: (
|
||||
primary: (
|
||||
fill: var(--wb-#{$mode}-color-button-primary-fill),
|
||||
fill-hover: var(--wb-#{$mode}-color-button-primary-fill-hover),
|
||||
fill-pressed: var(--wb-#{$mode}-color-button-primary-fill-pressed),
|
||||
fill-disabled: var(--wb-#{$mode}-color-button-disabled-fill),
|
||||
border: var(--wb-#{$mode}-color-button-primary-fill),
|
||||
border-disabled: var(--wb-#{$mode}-color-button-disabled-border),
|
||||
text: var(--wb-#{$mode}-color-text-inverse-static),
|
||||
text-disabled: var(--wb-#{$mode}-color-text-disabled-on),
|
||||
),
|
||||
secondary: (
|
||||
fill: var(--wb-#{$mode}-color-button-secondary-fill),
|
||||
fill-hover: var(--wb-#{$mode}-color-button-secondary-fill-hover),
|
||||
fill-pressed: var(--wb-#{$mode}-color-button-secondary-fill-pressed),
|
||||
fill-disabled: var(--wb-#{$mode}-color-button-disabled-fill),
|
||||
border: var(--wb-#{$mode}-color-button-secondary-border),
|
||||
border-disabled: var(--wb-#{$mode}-color-button-disabled-border),
|
||||
text: var(--wb-#{$mode}-color-text-primary),
|
||||
text-disabled: var(--wb-#{$mode}-color-text-disabled-on),
|
||||
),
|
||||
tertiary: (
|
||||
fill: var(--wb-#{$mode}-color-button-tertiary-fill),
|
||||
fill-hover: var(--wb-#{$mode}-color-button-tertiary-fill-hover),
|
||||
fill-pressed: var(--wb-#{$mode}-color-button-tertiary-fill-pressed),
|
||||
fill-disabled: var(--wb-#{$mode}-color-button-disabled-fill),
|
||||
border: var(--wb-#{$mode}-color-button-tertiary-border),
|
||||
border-disabled: var(--wb-#{$mode}-color-button-disabled-border),
|
||||
text: var(--wb-#{$mode}-color-text-basic),
|
||||
text-disabled: var(--wb-#{$mode}-color-text-disabled-on),
|
||||
),
|
||||
text: (
|
||||
fill: var(--wb-#{$mode}-color-button-text-fill),
|
||||
fill-hover: var(--wb-#{$mode}-color-button-text-fill-hover),
|
||||
fill-pressed: var(--wb-#{$mode}-color-button-text-fill-pressed),
|
||||
fill-disabled: var(--wb-#{$mode}-color-button-text-fill),
|
||||
border: var(--wb-#{$mode}-color-button-text-border),
|
||||
border-disabled: var(--wb-#{$mode}-color-border-transparency),
|
||||
text: var(--wb-#{$mode}-color-text-basic),
|
||||
text-disabled: var(--wb-#{$mode}-color-text-disabled),
|
||||
),
|
||||
link: (
|
||||
fill: var(--wb-#{$mode}-color-button-text-fill),
|
||||
fill-hover: var(--wb-#{$mode}-color-button-text-fill),
|
||||
fill-pressed: var(--wb-#{$mode}-color-button-text-fill),
|
||||
fill-disabled: var(--wb-#{$mode}-color-button-text-fill),
|
||||
border: var(--wb-#{$mode}-color-button-text-border),
|
||||
border-disabled: var(--wb-#{$mode}-color-border-transparency),
|
||||
text: var(--wb-#{$mode}-color-link-default),
|
||||
text-disabled: var(--wb-#{$mode}-color-text-disabled),
|
||||
),
|
||||
) !default;
|
||||
|
||||
//css variable 생성
|
||||
@each $color, $types in $button-color-variable {
|
||||
@each $type, $value in $types {
|
||||
--wb-button--color-#{$color}-#{$type}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
//class 생성
|
||||
& {
|
||||
@include btn-color(primary);
|
||||
|
||||
& {
|
||||
//컬러 별 class
|
||||
@each $color, $types in $button-color-variable {
|
||||
&.#{$color} {
|
||||
@include btn-color(#{$color});
|
||||
&:not(.icon) {
|
||||
.svg-icon {
|
||||
@include btn-color-icon(#{$color});
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include btn-color-hover(#{$color});
|
||||
}
|
||||
&:active,
|
||||
&:focus {
|
||||
@include btn-color-pressed(#{$color});
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
@include btn-color-disabled(#{$color});
|
||||
&:not(.icon) {
|
||||
.svg-icon {
|
||||
background-color: var(--wb-button--color-#{$color}-text-disabled);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
@include btn-color-disabled(#{$color});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* icon 버튼 사이즈 */
|
||||
$button-icon-size: (
|
||||
xsmall: var(--wb-size-height-2),
|
||||
small: var(--wb-size-height-3),
|
||||
medium: var(--wb-size-height-4),
|
||||
large: var(--wb-size-height-5),
|
||||
xlarge: var(--wb-size-height-6),
|
||||
) !default;
|
||||
|
||||
//text버튼은 높이와 좌우 padding값이 달라 재정의 함
|
||||
@mixin btn-text-variable() {
|
||||
//text버튼은 높이와 좌우 padding값이 달라 재정의 함
|
||||
--wb-button--size-height-xsmall: var(--wb-size-height-3);
|
||||
--wb-button--padding-x-xsmall: var(--wb-padding-1);
|
||||
--wb-button--padding-y-xsmall: var(--wb-number-0);
|
||||
--wb-button--size-height-small: var(--wb-size-height-4);
|
||||
--wb-button--padding-x-small: var(--wb-padding-1);
|
||||
--wb-button--padding-y-small: var(--wb-number-0);
|
||||
--wb-button--size-height-medium: var(--wb-size-height-5);
|
||||
--wb-button--padding-x-medium: var(--wb-padding-1);
|
||||
--wb-button--padding-y-medium: var(--wb-number-2);
|
||||
--wb-button--size-height-large: var(--wb-size-height-6);
|
||||
--wb-button--padding-x-large: var(--wb-padding-1);
|
||||
--wb-button--padding-y-large: 0.5rem;
|
||||
--wb-button--size-height-xlarge: var(--wb-size-height-7);
|
||||
--wb-button--padding-x-xlarge: var(--wb-padding-1);
|
||||
--wb-button--padding-y-xlarge: 0.9rem;
|
||||
}
|
||||
//link버튼은 font size와 좌우 padding값이 달라 재정의 함
|
||||
@mixin btn-link-variable() {
|
||||
--wb-button--pc-font-size-xsmall: var(--wb-pc-font-size-label-small);
|
||||
--wb-button--mobile-font-size-xsmall: var(--wb-mobile-font-size-label-small);
|
||||
--wb-button--padding-x-xsmall: var(--wb-padding-1);
|
||||
--wb-button--pc-font-size-small: var(--wb-pc-font-size-label-small);
|
||||
--wb-button--mobile-font-size-small: var(--wb-mobile-font-size-label-small);
|
||||
--wb-button--padding-x-small: var(--wb-padding-1);
|
||||
--wb-button--pc-font-size-medium: var(--wb-pc-font-size-label-medium);
|
||||
--wb-button--mobile-font-size-medium: var(--wb-mobile-font-size-label-medium);
|
||||
--wb-button--padding-x-medium: var(--wb-padding-1);
|
||||
--wb-button--pc-font-size-large: var(--wb-pc-font-size-label-large);
|
||||
--wb-button--mobile-font-size-large: var(--wb-mobile-font-size-label-large);
|
||||
--wb-button--padding-x-large: var(--wb-padding-1);
|
||||
--wb-button--pc-font-size-xlarge: var(--wb-pc-font-size-label-large);
|
||||
--wb-button--mobile-font-size-xlarge: var(--wb-mobile-font-size-label-large);
|
||||
--wb-button--padding-x-xlarge: var(--wb-padding-1);
|
||||
}
|
||||
|
||||
//컬러별 variable
|
||||
@mixin btn-color($color) {
|
||||
background-color: var(--wb-button--color-#{$color}-fill);
|
||||
border-color: var(--wb-button--color-#{$color}-border);
|
||||
color: var(--wb-button--color-#{$color}-text);
|
||||
}
|
||||
@mixin btn-color-hover($color) {
|
||||
background-color: var(--wb-button--color-#{$color}-fill-hover);
|
||||
}
|
||||
@mixin btn-color-pressed($color) {
|
||||
background-color: var(--wb-button--color-#{$color}-fill-pressed);
|
||||
}
|
||||
@mixin btn-color-disabled($color) {
|
||||
background-color: var(--wb-button--color-#{$color}-fill-disabled);
|
||||
border-color: var(--wb-button--color-#{$color}-border-disabled);
|
||||
color: var(--wb-button--color-#{$color}-text-disabled);
|
||||
}
|
||||
@mixin btn-color-icon($color) {
|
||||
background-color: var(--wb-button--color-#{$color}-text);
|
||||
}
|
||||
|
||||
//모드 설정
|
||||
$mode-setting: light;
|
||||
.wb-btn {
|
||||
@include button-size-variable();
|
||||
}
|
||||
.wb-btn {
|
||||
@include button-color-variable(#{$mode-setting});
|
||||
|
||||
& {
|
||||
//기본버튼: primary large
|
||||
// @include flex-layout($d: inline-flex, $ai: center, $jc: center);
|
||||
width: auto;
|
||||
border-style: solid;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: var(--wb-transition-base);
|
||||
@include border-size-mode(#{$mode-setting});
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
@include btn-color-icon(primary);
|
||||
transition: var(--wb-transition-base);
|
||||
}
|
||||
&:hover {
|
||||
@include btn-color-hover(primary);
|
||||
}
|
||||
// &:active,
|
||||
// &:focus {
|
||||
// @include btn-color-pressed(primary);
|
||||
// }
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
@include btn-color-disabled(primary);
|
||||
cursor: default;
|
||||
&:hover {
|
||||
@include btn-color-disabled(primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.text { //높이를 가짐
|
||||
@include btn-text-variable();
|
||||
|
||||
//large 사이즈 기준 기본 세팅수정
|
||||
display: inline-block;
|
||||
height: auto !important;
|
||||
padding: var(--wb-button--padding-y-large) var(--wb-button--padding-x-large);
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
&.xsmall {
|
||||
min-height: var(--wb-button--size-height-xsmall);
|
||||
padding: var(--wb-button--padding-y-xsmall) var(--wb-button--padding-x-xsmall);
|
||||
.svg-icon {
|
||||
margin-bottom: -0.3rem;
|
||||
}
|
||||
}
|
||||
&.small {
|
||||
padding: var(--wb-button--padding-y-small) var(--wb-button--padding-x-small);
|
||||
.svg-icon {
|
||||
margin-bottom: -0.3rem;
|
||||
}
|
||||
}
|
||||
&.medium {
|
||||
padding: var(--wb-button--padding-y-medium) var(--wb-button--padding-x-medium);
|
||||
.svg-icon {
|
||||
margin-bottom: -0.4rem;
|
||||
}
|
||||
}
|
||||
&.large {
|
||||
padding: var(--wb-button--padding-y-large) var(--wb-button--padding-x-large);
|
||||
.svg-icon {
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
}
|
||||
&.xlarge {
|
||||
padding: var(--wb-button--padding-y-xlarge) var(--wb-button--padding-x-xlarge);
|
||||
.svg-icon {
|
||||
margin-bottom: -0.6rem;
|
||||
}
|
||||
}
|
||||
&.h-auto {
|
||||
height: auto;
|
||||
padding: var(--wb-padding-1) !important;
|
||||
}
|
||||
.svg-icon {
|
||||
display: inline-block;
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
}
|
||||
&.link { //링크인 경우 (텍스트 버튼과 비슷해보이지만 높이값 없음)
|
||||
@include btn-link-variable();
|
||||
//large 사이즈 기준 기본 세팅수정
|
||||
display: inline-block;
|
||||
height: auto !important;
|
||||
padding: 0 var(--wb-button--padding-x-large);
|
||||
font-size: var(--wb-button--pc-font-size-large);
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
@include size-medium {
|
||||
font-size: var(--wb-button--mobile-font-size-large);
|
||||
}
|
||||
&.xsmall {
|
||||
padding: 0 var(--wb-button--padding-x-xsmall);
|
||||
font-size: var(--wb-button--pc-font-size-xsmall);
|
||||
@include size-medium {
|
||||
font-size: var(--wb-button--mobile-font-size-xsmall);
|
||||
}
|
||||
.svg-icon {
|
||||
margin-bottom: -0.3rem;
|
||||
}
|
||||
}
|
||||
&.small {
|
||||
padding: 0 var(--wb-button--padding-x-small);
|
||||
font-size: var(--wb-button--pc-font-size-small);
|
||||
@include size-medium {
|
||||
font-size: var(--wb-button--mobile-font-size-small);
|
||||
}
|
||||
.svg-icon {
|
||||
margin-bottom: -0.3rem;
|
||||
}
|
||||
}
|
||||
&.medium {
|
||||
padding: 0 var(--wb-button--padding-x-medium);
|
||||
font-size: var(--wb-button--pc-font-size-medium);
|
||||
@include size-medium {
|
||||
font-size: var(--wb-button--mobile-font-size-medium);
|
||||
}
|
||||
.svg-icon {
|
||||
margin-bottom: -0.4rem;
|
||||
}
|
||||
}
|
||||
&.large {
|
||||
padding: 0 var(--wb-button--padding-x-large);
|
||||
font-size: var(--wb-button--pc-font-size-large);
|
||||
@include size-medium {
|
||||
font-size: var(--wb-button--mobile-font-size-large);
|
||||
}
|
||||
.svg-icon {
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
}
|
||||
&.xlarge {
|
||||
padding: 0 var(--wb-button--padding-x-xlarge);
|
||||
font-size: var(--wb-button--pc-font-size-xlarge);
|
||||
@include size-medium {
|
||||
font-size: var(--wb-button--mobile-font-size-xlarge);
|
||||
}
|
||||
.svg-icon {
|
||||
margin-bottom: -0.6rem;
|
||||
}
|
||||
}
|
||||
&.basic {
|
||||
$color: var(--wb-#{$mode-setting}-color-text-basic);
|
||||
color: $color;
|
||||
@include underline();
|
||||
text-decoration-color: var(--wb-#{$mode-setting}-color-border-transparency);
|
||||
.svg-icon {
|
||||
background-color: $color;
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
text-decoration-color: inherit;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
$color: var(--wb-#{$mode-setting}-color-link-hover);
|
||||
color: $color;
|
||||
.svg-icon {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
&:active,
|
||||
&:focus {
|
||||
$color: var(--wb-#{$mode-setting}-color-link-pressed);
|
||||
color: $color;
|
||||
.svg-icon {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
&:visited {
|
||||
$color: var(--wb-#{$mode-setting}-color-link-visited);
|
||||
color: $color;
|
||||
text-decoration: none;
|
||||
.svg-icon {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.svg-icon {
|
||||
display: inline-block;
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* icon 버튼 (텍스트 없음) */
|
||||
&.icon {
|
||||
@each $size, $value in $button-icon-size {
|
||||
--wb-button--icon-size-#{$size}: #{$value};
|
||||
}
|
||||
|
||||
//기본 세팅
|
||||
@include square(var(--wb-button--icon-size-medium));
|
||||
padding: 0 !important;
|
||||
background-color: transparent;
|
||||
border-color: var(--wb-#{$mode-setting}-color-border-transparency);
|
||||
color: inherit;
|
||||
border: 0;
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
& {
|
||||
@each $size, $value in $button-icon-size {
|
||||
&.#{$size} {
|
||||
@include square(var(--wb-button--icon-size-#{$size}));
|
||||
//icon size
|
||||
.svg-icon {
|
||||
@include square(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
background-color: var(--wb-#{$mode-setting}-color-text-basic);
|
||||
}
|
||||
&.pure {
|
||||
.svg-icon {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
//새로고침, 토글 등 보더 아이콘 버튼 형태
|
||||
&.border {
|
||||
background-color: var(--wb-#{$mode-setting}-color-background-white);
|
||||
border: 0.1rem solid var(--wb-#{$mode-setting}-color-border-gray);
|
||||
border-radius: var(--wb-radius-max);
|
||||
|
||||
//icon size 1.6rem
|
||||
&.large {
|
||||
.svg-icon {
|
||||
@include square(var(--wb-icon--size-xsmall));
|
||||
}
|
||||
}
|
||||
&.xlarge {
|
||||
.svg-icon {
|
||||
@include square(var(--wb-icon--size-xlarge));
|
||||
}
|
||||
}
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
background-color: var(--wb-#{$mode-setting}-color-button-disabled-fill);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//고대비모드
|
||||
@include color-mode($mode: high-contrast) {
|
||||
//모드 설정
|
||||
$mode-setting: high-contrast;
|
||||
.wb-btn {
|
||||
@include border-size-mode(#{$mode-setting});
|
||||
@include button-color-variable(#{$mode-setting});
|
||||
|
||||
|
||||
&.text {
|
||||
//class명 검토
|
||||
&.ico-filter {
|
||||
.num {
|
||||
color: var(--wb-#{$mode-setting}-color-text-basic-inverse);
|
||||
background-color: var(--wb-#{$mode-setting}-color-element-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.link {
|
||||
&.basic {
|
||||
$color: var(--wb-#{$mode-setting}-color-text-basic);
|
||||
color: $color;
|
||||
&:not(.icon) {
|
||||
.svg-icon {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
$color: var(--wb-#{$mode-setting}-color-link-hover);
|
||||
color: $color;
|
||||
&:not(.icon) {
|
||||
.svg-icon {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:active,
|
||||
&:focus {
|
||||
$color: var(--wb-#{$mode-setting}-color-link-pressed);
|
||||
color: $color;
|
||||
&:not(.icon) {
|
||||
.svg-icon {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:visited {
|
||||
$color: var(--wb-#{$mode-setting}-color-link-visited);
|
||||
color: $color;
|
||||
&:not(.icon) {
|
||||
.svg-icon {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
/* icon 버튼 (텍스트 없음) */
|
||||
&.icon {
|
||||
background-color: transparent;
|
||||
border-color: var(--wb-#{$mode-setting}-color-border-transparency);
|
||||
|
||||
.svg-icon {
|
||||
background-color: var(--wb-#{$mode-setting}-color-text-basic);
|
||||
}
|
||||
//새로고침, 토글 등 보더 아이콘 버튼 형태
|
||||
&.border {
|
||||
background-color: var(--wb-#{$mode-setting}-color-background-white);
|
||||
border-color: var(--wb-#{$mode-setting}-color-border-gray);
|
||||
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
background-color: var(--wb-#{$mode-setting}-color-button-disabled-fill);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,44 @@
|
||||
//only component
|
||||
|
||||
//공통
|
||||
@import "../common/include";
|
||||
|
||||
//component
|
||||
@import "button";
|
||||
// @import "tab";
|
||||
// @import "table";
|
||||
// @import "text_list";
|
||||
// @import "modal";
|
||||
// @import "help_panel";
|
||||
// @import "accordion";
|
||||
// @import "spinner";
|
||||
// @import "contextual_help";
|
||||
// @import "tooltip";
|
||||
// @import "file_upload";
|
||||
// @import "coach_mark";
|
||||
// @import "disclosure";
|
||||
// @import "skip_link";
|
||||
// @import "masthead";
|
||||
// @import "header";
|
||||
// @import "main_menu";
|
||||
// @import "footer";
|
||||
// @import "identifier";
|
||||
// @import "side_navigation";
|
||||
// @import "structured_list";
|
||||
// @import "critical_alerts";
|
||||
// @import "in_page_navigation";
|
||||
// @import "carousel";
|
||||
// @import "pagination";
|
||||
// @import "breadcrumb";
|
||||
// @import "step_indicator";
|
||||
// @import "badge";
|
||||
// @import "tag";
|
||||
// @import "form_layout";
|
||||
// @import "input";
|
||||
// @import "select";
|
||||
// @import "form_check";
|
||||
// @import "form_chip";
|
||||
// @import "switch";
|
||||
// @import "calendar";
|
||||
// @import "resize";
|
||||
// @import "language_switcher";
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
//component with common setting file
|
||||
|
||||
//common
|
||||
@import "../common/common";
|
||||
|
||||
//component
|
||||
@import "component";
|
||||
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
@use '@progress/kendo-theme-bootstrap/scss/all.scss' as *;
|
||||
@use 'tokens' as *;
|
||||
|
||||
.m-login .wrap-container-group-158{
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
top: 253px;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,474 @@
|
||||
@use '@progress/kendo-theme-bootstrap/scss/all.scss' as *;
|
||||
@use 'tokens' as *;
|
||||
|
||||
.m-login{
|
||||
background-color: #ffffff;
|
||||
background-image: none;
|
||||
height: 800px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 360px;
|
||||
|
||||
}
|
||||
.m-login .frame-164{
|
||||
align-items: flex-start;
|
||||
background-color: #f3f9ff;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: 7px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 29px;
|
||||
padding-left: 10px;
|
||||
padding-right: 39px;
|
||||
padding-top: 29px;
|
||||
position: absolute;
|
||||
row-gap: 10px;
|
||||
top: 586px;
|
||||
width: 345px;
|
||||
|
||||
}
|
||||
.m-login .group-169{
|
||||
height: 146.17px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
|
||||
}
|
||||
.m-login .frame-163{
|
||||
align-items: flex-start;
|
||||
background-color: #ffffff;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: 0px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 15px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 15px;
|
||||
position: absolute;
|
||||
row-gap: 10px;
|
||||
top: 101.4px;
|
||||
width: 320px;
|
||||
|
||||
}
|
||||
.m-login .group-168-2{
|
||||
height: 14.77px;
|
||||
position: relative;
|
||||
width: 275.25px;
|
||||
|
||||
}
|
||||
.m-login .vector-2{
|
||||
left: 270px;
|
||||
position: absolute;
|
||||
top: 0.6px;
|
||||
|
||||
}
|
||||
.m-login .group-167-2{
|
||||
height: 14.77px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 242px;
|
||||
|
||||
}
|
||||
.m-login .가스계소화설비-안전관리-메뉴얼-및-경고문{
|
||||
color: #000000;
|
||||
font-family: NanumSquare;
|
||||
font-size: font-size-12;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
left: 24px;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
.m-login .group-166-2{
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0.64px;
|
||||
|
||||
}
|
||||
.m-login .frame-162{
|
||||
align-items: flex-start;
|
||||
background-color: #ffffff;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: 0px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 15px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 15px;
|
||||
position: absolute;
|
||||
row-gap: 10px;
|
||||
top: 50.7px;
|
||||
width: 320px;
|
||||
|
||||
}
|
||||
.m-login .group-168-1{
|
||||
height: 14.77px;
|
||||
position: relative;
|
||||
width: 275.25px;
|
||||
|
||||
}
|
||||
.m-login .vector-1{
|
||||
left: 270px;
|
||||
position: absolute;
|
||||
top: 1.3px;
|
||||
|
||||
}
|
||||
.m-login .group-167-1{
|
||||
height: 14.77px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 244px;
|
||||
|
||||
}
|
||||
.m-login .제-1-회-위험물-안전관리-우수사례-경진대회{
|
||||
color: #000000;
|
||||
font-family: NanumSquare;
|
||||
font-size: font-size-12;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
left: 24px;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
.m-login .group-166-1{
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0.64px;
|
||||
|
||||
}
|
||||
.m-login .frame-161{
|
||||
align-items: flex-start;
|
||||
background-color: #ffffff;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: 0px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 15px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 15px;
|
||||
position: absolute;
|
||||
row-gap: 10px;
|
||||
top: 0px;
|
||||
width: 320px;
|
||||
|
||||
}
|
||||
.m-login .group-168{
|
||||
height: 14.77px;
|
||||
position: relative;
|
||||
width: 275.25px;
|
||||
|
||||
}
|
||||
.m-login .group-167{
|
||||
flex-shrink: 0;
|
||||
height: 14.77px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 275.25px;
|
||||
|
||||
}
|
||||
.m-login .vector{
|
||||
left: 270px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
|
||||
}
|
||||
.m-login .겨울철-화재안전대책-공동주택-정책홍보{
|
||||
color: #000000;
|
||||
font-family: NanumSquare;
|
||||
font-size: font-size-12;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
left: 24px;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
.m-login .group-166{
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0.64px;
|
||||
|
||||
}
|
||||
.m-login .소방안전지도{
|
||||
color: #000000;
|
||||
font-family: NanumSquare;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
left: 130px;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
top: 201px;
|
||||
|
||||
}
|
||||
.m-login .mask-group-1{
|
||||
flex-shrink: 0;
|
||||
height: 180px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 360px;
|
||||
|
||||
}
|
||||
.m-login .group-158{
|
||||
height: 300.8px;
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
top: 253px;
|
||||
width: 343.33px;
|
||||
|
||||
}
|
||||
.m-login .frame-165{
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
background-image: none;
|
||||
border-bottom-color: #d3d3d3;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-left-color: #d3d3d3;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
border-right-color: #d3d3d3;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-color: #d3d3d3;
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: 0px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 39px;
|
||||
padding-left: 31px;
|
||||
padding-right: 31px;
|
||||
padding-top: 39px;
|
||||
position: absolute;
|
||||
row-gap: 10px;
|
||||
top: 66px;
|
||||
width: 343px;
|
||||
|
||||
}
|
||||
.m-login .frame-158{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 34.8px;
|
||||
|
||||
}
|
||||
.m-login .group-165{
|
||||
background-color: #002e64;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
width: 280px;
|
||||
|
||||
}
|
||||
.m-login .로그인{
|
||||
color: #ffffff;
|
||||
font-family: NanumSquare;
|
||||
font-size: font-size-12;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
left: 124px;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
|
||||
}
|
||||
.m-login .group-164{
|
||||
height: 72px;
|
||||
position: relative;
|
||||
width: 280px;
|
||||
|
||||
}
|
||||
.m-login .group-163{
|
||||
height: 30px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
width: 280px;
|
||||
|
||||
}
|
||||
.m-login .rectangle-22{
|
||||
border-bottom-color: #d0d0d0;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.6px;
|
||||
flex-shrink: 0;
|
||||
height: 30px;
|
||||
left: 64.9px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 215.1px;
|
||||
|
||||
}
|
||||
.m-login .비밀번호{
|
||||
color: #1a1a1a;
|
||||
font-family: NanumSquare;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
left: 0px;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
width: 46.67px;
|
||||
|
||||
}
|
||||
.m-login .group-162{
|
||||
height: 30px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 280px;
|
||||
|
||||
}
|
||||
.m-login .rectangle-21{
|
||||
border-bottom-color: #d0d0d0;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.6px;
|
||||
flex-shrink: 0;
|
||||
height: 30px;
|
||||
left: 64.9px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 215.1px;
|
||||
|
||||
}
|
||||
.m-login .아이디{
|
||||
color: #1a1a1a;
|
||||
font-family: NanumSquare;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
left: 0px;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
width: 35px;
|
||||
|
||||
}
|
||||
.m-login .frame-166{
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
.m-login .frame-157{
|
||||
align-items: center;
|
||||
border-bottom-left-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
column-gap: 10px;
|
||||
display: flex;
|
||||
height: 66px;
|
||||
justify-content: center;
|
||||
width: 114px;
|
||||
|
||||
}
|
||||
.m-login .모바일공무원증-로그인{
|
||||
color: $tb-figma-gray-color-02;
|
||||
font-family: NanumSquare;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.m-login .frame-156{
|
||||
align-items: center;
|
||||
border-bottom-left-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
column-gap: 10px;
|
||||
display: flex;
|
||||
height: 66px;
|
||||
justify-content: center;
|
||||
width: 115px;
|
||||
|
||||
}
|
||||
.m-login .gpki-인중서-로그인{
|
||||
color: $tb-figma-gray-color-02;
|
||||
font-family: NanumSquare;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.m-login .frame-155{
|
||||
align-items: center;
|
||||
background-color: #005dca;
|
||||
background-image: none;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
column-gap: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 26px;
|
||||
padding-top: 26px;
|
||||
width: 114.33px;
|
||||
|
||||
}
|
||||
.m-login .아이디-로그인{
|
||||
color: #ffffff;
|
||||
font-family: NanumSquare;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
|
||||
@use 'common-styles-overrides' as *;
|
||||
@use 'login' as *;
|
||||
+5817
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,4 @@
|
||||
@import 'tokens';
|
||||
@import 'overrides';
|
||||
@import 'page';
|
||||
@import './componants/output';
|
||||
Reference in New Issue
Block a user