Code - jhpark/cms

//colors $white: #fff !default; $black: #000 !default; $gray: #8E8E8E !default; $primary: #246BEB !default; $secondary: #003675 !default; $point: #E71825 !default; $danger: #EB003B !default; $warning: #FFB724 !default; $success: #008A1E !default; $information: #2768FF !default; $colors: ( "white": $white, "black": $black, "primary": $primary, "secondary": $secondary, "point": $point, "danger": $danger, "warning": $warning, "success": $success, "information": $information, ); //primary colors $primary-5: #EFF5FF !default; $primary-10: #D3E1FB !default; $primary-20: #A7C4F7 !default; $primary-30: #7CA6F3 !default; $primary-40: #5089EF !default; $primary-60: #1D56BC !default; $primary-70: #16408D !default; $primary-80: #0E2B5E !default; $primary-90: #07152F !default; $primary-colors: ( "5": $primary-5, "10": $primary-10, "20": $primary-20, "30": $primary-30, "40": $primary-40, "60": $primary-60, "70": $primary-70, "80": $primary-80, "90": $primary-90, ) !default; //secondary colors $secondary-5: #EDF1F5 !default; $secondary-10: #CDD7E4 !default; $secondary-20: #B4C4D6 !default; $secondary-30: #99B0CB !default; $secondary-40: #2A5C96 !default; $secondary-60: #002B5E !default; $secondary-70: #002046 !default; $secondary-80: #00162F !default; $secondary-90: #000B17 !default; $secondary-colors: ( "5": $secondary-5, "10": $secondary-10, "20": $secondary-20, "30": $secondary-30, "40": $secondary-40, "60": $secondary-60, "70": $secondary-70, "80": $secondary-80, "90": $secondary-90, ) !default; //point colors $point-5: #FDF2F3 !default; $point-10: #FAD1D3 !default; $point-20: #F5A3A8 !default; $point-30: #F1747C !default; $point-40: #EC4651 !default; $point-60: #B9131E !default; $point-70: #8B0E16 !default; $point-80: #5C0A0F !default; $point-90: #2E0507 !default; $point-colors: ( "5": $point-5, "10": $point-10, "20": $point-20, "30": $point-30, "40": $point-40, "60": $point-60, "70": $point-70, "80": $point-80, "90": $point-90, ) !default; //gray colors $gray-5: #F8F8F8 !default; $gray-10: #F0F0F0 !default; $gray-20: #E4E4E4 !default; $gray-30: #D8D8D8 !default; $gray-40: #C6C6C6 !default; $gray-50: #8E8E8E !default; $gray-60: #717171 !default; $gray-70: #555555 !default; $gray-80: #2D2D2D !default; $gray-90: #1D1D1D !default; $gray-colors: ( "5": $gray-5, "10": $gray-10, "20": $gray-20, "30": $gray-30, "40": $gray-40, "50": $gray-50, "60": $gray-60, "70": $gray-70, "80": $gray-80, "90": $gray-90, ) !default; //main colors $main-5: #EAF6EC !default; $main-10: #D8EEDD !default; $main-20: #A9DAB4 !default; $main-30: #7EC88E !default; $main-40: #3FA654 !default; $main-50: #228738 !default; $main-60: #1E5C2C !default; $main-70: #204A29 !default; $main-80: #1F4727 !default; $main-90: #122B18 !default; $main-colors: ( "5": $main-5, "10": $main-10, "20": $main-20, "30": $main-30, "40": $main-40, "50": $main-50, "60": $main-60, "70": $main-70, "80": $main-80, "90": $main-90, ) !default; //prefix $prefix: tk- !default; //breakpoints $breakpoint-sm: 600px !default; $breakpoint-md: 1024px !default; $breakpoint-lg: 1920px !default; $breakpoints: ( "sm": $breakpoint-sm, "md": $breakpoint-md, "lg": $breakpoint-lg, ) !default; //spacers $spacers: ( "0": "0", "default": ".1rem", "default2": ".2rem", "full": "100%", ) !default; //font style $font-family-base: "Pretendard GOV", sans-serif !default; $font-size-root: 62.5% !default; //10px 1rem으로 설정 //$font-size-base: 1rem !default; $font-size: ( sizes: ( display: ( "sm": "4rem", "md": "5rem", "lg": "6.6rem", ), heading: ( "sm": "3.2rem", "md": "4rem", "lg": "5rem", ), title: ( "xsm": "1.5rem", "sm": "1.7rem", "md": "1.9rem", "lg": "2.1rem", "xlg": "2.5rem", "xxlg": "3.2rem", ), body: ( "sm": "1.5rem", "md": "1.7rem", "lg": "1.9rem", ), link: ( "sm": "1.5rem", "md": "1.7rem", "lg": "1.9rem", ), detail: ( "sm": "1.3rem", "md": "1.5rem", "lg": "1.7rem", ), label: ( "xsm": "1.3rem", "sm": "1.5rem", "md": "1.7rem", "lg": "1.9rem", ), ), ) !default; $fws: ( "light": 300, "normal": 400, "medium": 500, "bold": 700, "bolder": 800, ) !default; //line height style $line-height-none: 1 !default; $line-height-base: 1.5 !default; //border radius $border-radius: ( "1": ".1rem", "2": ".2rem", "4": ".4rem", "6": ".6rem", "8": ".8rem", "10": "1rem", "12": "1.2rem", "full": "100%", ) !default; //btn setting $btns: ( setting: ( //height h: ( "xsm": "3.2rem", "sm": "4rem", "md": "4.8rem", "lg": "5.6rem", "xlg": "6.4rem", ), //padding-x px: ( "xsm": "1rem", "sm": "1.2rem", "md": "1.6rem", "lg": "2rem", "xlg": "2.4rem", ), //border radius rd: ( "xsm": ".6rem", "sm": ".6rem", "md": ".8rem", "lg": ".8rem", "xlg": ".8rem", ), //font size fz: ( "xsm": "1.5rem", "sm": "1.7rem", "md": "1.7rem", "lg": "1.9rem", "xlg": "1.9rem", ), ), ) !default; //btn chips $btnChipOutline: ( setting: ( h: ( "md": "3.2rem", "lg": "3.6rem", ), pd: ( "md": "0rem 1.2rem", "lg": "0rem 1.2rem", ), rd: ( "md": "10rem", "lg": "10rem", ), fz: ( "md": "1.5rem", "lg": "1.7rem", ), gap:( "md": ".2rem", "lg": ".2rem", ), size:( "md": "1.2rem", "lg": "1.6rem", ), ), ) !default; $btnChipFill: ( setting: ( h: ( "md": "3.2rem", "lg": "3.6rem", ), pd: ( "md": "0rem 1.2rem", "lg": "0rem 1.2rem", ), rd: ( "md": ".6rem", "lg": ".6rem", ), fz: ( "md": "1.5rem", "lg": "1.7rem", ), ), ) !default; //input setting $inputs: ( setting: ( h: ( "sm": "4rem", "md": "4.8rem", "lg": "5.6rem", "xlg": "8rem", ), px: ( "sm": "1.6rem", "md": "1.6rem", "lg": "1.6rem", "xlg": "2.4rem", ), rd: ( "sm": ".6rem", "md": ".8rem", "lg": ".8rem", "xlg": "1.2rem", ), fz: ( "sm": "1.5rem", "md": "1.7rem", "lg": "1.9rem", "xlg": "2.5rem", ), ), ) !default; //radio checkbox setting $radios: ( setting: ( size: ( "sm": "1.6rem", "md": "2rem", "lg": "2.4rem", ), chk: ( "sm": ".8rem", "md": "1rem", "lg": "1.4rem", ), pos: ( "sm": ".2rem", "md": ".5rem", "lg": "1rem", ), fz: ( "sm": "1.5rem", "md": "1.7rem", "lg": "1.9rem", ), ), ) !default; //form chips $rdoChipOutline: ( setting: ( h: ( "sm": "3.2rem", "md": "4rem", "lg": "4.8rem", ), pd: ( "sm": "0 1rem", "md": "0 1.2rem", "lg": "0 1.6rem", ), rd: ( "sm": ".6rem", "md": ".6rem", "lg": ".8rem", ), fz: ( "sm": "1.5rem", "md": "1.7rem", "lg": "1.7rem", ), ), ) !default; $chkChipOutline: ( setting: ( h: ( "sm": "3.2rem", "md": "4rem", "lg": "4.8rem", ), pd: ( "sm": "0 1rem 0 .8rem", "md": "0 1.2rem 0 1rem", "lg": "0 1.6rem 0 1.2rem", ), rd: ( "sm": ".6rem", "md": ".6rem", "lg": ".8rem", ), fz: ( "sm": "1.5rem", "md": "1.7rem", "lg": "1.7rem", ), gap:( "sm": ".4rem", "md": ".4rem", "lg": ".4rem", ), ico:( "sm": "1.6rem", "md": "2rem", "lg": "2rem", ), ), ) !default; // checkbox $checkboxes: ( setting: ( size: ( "sm": "1.6rem", "md": "2rem", "lg": "2.4rem", ), primary-chk: ( "sm": "1.2rem", "md": "1.6rem", "lg": "2rem", ), secondary-chk: ( "md": "2rem", ), pos: ( "md": ".5rem", ), fz: ( "sm": "1.5rem", "md": "1.7rem", "lg": "1.9rem", ), ), ) !default; //select setting $select: ( setting: ( h: ( "sm": "4rem", "md": "4.8rem", "lg": "5.6rem", ), pd: ( "sm": "0 5.2rem 0 1.6rem", "md": "0 5.2rem 0 1.6rem", "lg": "0 5.2rem 0 1.6rem", ), rd: ( "sm": ".6rem", "md": ".8rem", "lg": ".8rem", ), fz: ( "sm": "1.5rem", "md": "1.7rem", "lg": "1.9rem", ), rn: ( "sm": "1.6rem", "md": "1.6rem", "lg": "1.6rem", ), bgs : ( "sm": "2rem", "md": "2rem", "lg": "2.4rem", ) ), ) !default; //switch setting $switch: ( setting: ( h: ( "md": "2rem", "lg": "2.4rem", ), w: ( "md": "3.2rem", "lg": "4rem", ), b: ( "md": "1.6rem", "lg": "2rem", ), br: ( "md": "0.2rem", "lg": "0.2rem", ), pd: ( "md": "0.8rem", "lg": "0.8rem", ), rd: ( "md": "4rem", "lg": "4rem", ), fz: ( "md": "1.7rem", "lg": "1.9rem", ), ), ) !default; //tab setting $tabs: ( setting: ( h: ( full: "5.6rem", fill: "4.8rem", line: "4.8rem", ), fz: ( full: "1.9rem", fill: "1.9rem", ilne: "1.9rem", ), px: ( full: "0", fill: "1.6rem", line: ".2rem", ), ml: ( full: "0", fill: ".8rem", line: "1.6rem", ), rd: ( full: ".8rem", fill: ".8rem", line: "0", ), ), ) !default; //table setting //form control setting //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; //box shadow $box-shadow-base: 2px 2px 2px 0px rgba(0, 0, 0, 0.15) !default; //img url 대치 $url: "../img" !default; //position 종류 $position-type: (x, y, both);