File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
@charset "utf-8";
@import 'common/abstracts/variables';
@import 'common/abstracts/mixins';
//@import 'common/component/colouredPenciles';
//@import 'abstracts_responsive/variables';
// 스타일가이드 전용 스타일시트
@mixin container {
max-width: $size-wrap;
padding: 0 $size-wrap-spacing;
margin: 0 auto;
}
body {
user-select:initial;
}
section.g-section {
padding-bottom: 8rem;
> header {
display: flex;
height: 5rem;
@include container;
align-items: center;
justify-content: flex-start;
background-color: $color-gray5;
h1 {
@include typo('tit-sm');
}
h2 {
@include typo('body-md');
&::before {
content: '';
display: inline-block;
width: 0.1rem;
height: 1rem;
vertical-align: baseline;
background-color: $color-font-default-tertiary;
margin: 0 1rem;
}
}
h1,
h2 {
color: $color-font-default-tertiary;
}
em {
font-style: normal;
margin-left: auto;
}
}
> article {
@include container;
margin-top: 4rem;
> h3 {
@include typo('tit-md');
+p {
margin-top: 0.8rem;
color: $color-gray50;
}
}
> h4 {
margin-top: 1.6rem;
@include typo('tit-sm');
}
> h5 {
margin-top: 1.6rem;
@include typo('tit-sm');
}
> ul, > table, > div:not(.dim) {
margin-top: 1.6rem;
&:nth-of-type(1) {
margin-top: 2.4rem;
}
}
ul.color {
display: grid;
li {
padding: 3.6rem 1rem 1.6rem;
word-break:break-all;
&::before,
&::after {
display: block;
}
&::after {
opacity: 0.5;
}
}
&.gray-color {
grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
li {
color: $color-gray80;
&:nth-of-type(5)~li {
color: $color-white;
}
$i: 0;
$grayColors : (
"white" : $color-white,
"grayColor1" : $color-gray5,
"grayColor2" : $color-gray20,
"grayColor3" : $color-gray30,
"grayColor4" : $color-gray40,
"grayColor5" : $color-gray50,
"grayColor6" : $color-gray60,
"grayColor7" : $color-gray70,
"grayColor8" : $color-gray80,
"black" : $color-black
);
@each $code, $color in $grayColors {
$i: $i + 1;
&:nth-of-type(#{$i}) {
background-color: $color;
&::before {
content: #{'"$'+$code+'"'};
}
&::after {
content: #{'"'+$color+'"'};
}
}
}
}
}
// &.brand-color {
// grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
// &.sub-color {
// grid-template-columns: repeat(auto-fill, minmax(33.33%, 1fr));
// }
// li {
// color: $color-white;
// &:nth-of-type(4) {
// color: $color-gray80;
// }
// }
// &.yellow li {
// color: $color-gray80;
// }
// $blueColor : (
// $color-blue70,
// $color-blue50,
// $blueL,
// $color-blue10
// );
// $greenColor : (
// $color-green70,
// $color-green50,
// $greenL,
// $color-green10
// );
// $pinkColor : (
// $color-orange70,
// $color-orange50,
// $orangeL,
// $color-orange10
// );
// $orangeColor : (
// $color-pink70,
// $color-pink50,
// $pinkL,
// $color-pink10
// );
// $yellowColor : (
// $color-yellow70,
// $color-yellow50,
// $color-yellow10,
// $color-yellow10
// );
// $redColor : (
// $color-red70,
// $color-red50,
// $color-red10
// );
// $brandColors : (
// "blue": $blueColor,
// "green": $greenColor,
// "pink": $orangeColor,
// "orange": $orangeColor,
// "yellow": $yellowColor,
// "red": $redColor
// );
// $brandColorCls : (
// "D", "0", "L", "LL"
// );
// @each $cls, $val in $brandColors {
// &.#{$cls} {
// li {
// @for $j from 1 through length($val) {
// &:nth-of-type(#{$j}){
// &::before {
// content:#{'"$'+$cls+nth($brandColorCls,$j)+'"'};
// }
// &::after {
// content: #{'"'+nth($val, $j)+'"'};
// }
// background-color: nth($val, $j);
// }
// }
// }
// }
// }
// }
}
table.typography {
td {
padding: $spacing-xsm $spacing-md;
height: 8rem;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.title {
padding: $spacing-xsm $spacing-md $spacing-xsm $spacing-2xlg;
text-align: left;
}
&:first-child {
padding: 0.8rem 1rem 0.8rem 4rem;
text-align: left;
}
}
thead {
background-color: $color-gray80;
color: $color-white;
td {
height: 4rem;
}
}
tbody tr {
&:nth-of-type(odd) {
background-color: $color-gray5;
}
}
&:nth-of-type(1) {
tbody {
tr {
$typeHd:('tit-xlg', 'tit-lg', 'tit-md', 'tit-sm', 'tit-xsm');
@for $i from 1 through length($typeHd) {
&:nth-of-type(#{$i}) td:first-child {
@include typo(nth($typeHd,$i));
}
}
}
}
}
&:nth-of-type(2) {
tbody {
tr {
$typeHd:('PrL', 'PrM', 'PrS');
@for $i from 1 through length($typeHd) {
&:nth-of-type(#{$i}) td:first-child {
@include typo(nth($typeHd,$i));
}
}
}
}
}
}
ul.button {
display: flex;
flex-wrap: wrap;
gap: 1.6rem;
li {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
}
&.size {
flex-direction: column;
li {
flex-direction: row;
flex-wrap: wrap;
h5 {
width: 6rem;
}
}
}
button:not(.btn-like) {
&::after {
content: 'Normal';
}
&:hover::after {
content: 'Hover';
}
&:disabled::after {
content: 'Inactive';
}
}
}
ul.input {
display: flex;
flex-wrap: wrap;
gap: 1.6rem;
}
ul.badge-ul {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
ul.icon-wrap {
display: flex;
flex-wrap: wrap;
gap: 1.6rem;
li {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
}
}
ul.profile-wrap {
display: flex;
flex-wrap: wrap;
gap: 1.6rem;
// li {
// display: flex;
// flex-direction: column;
// align-items: center;
// gap: 0.8rem;
// }
}
.paint-target {
position: relative;
}
}
}