Jaybe
206 lines
6.4 KiB
SCSS
206 lines
6.4 KiB
SCSS
//bootstrap color
|
|
:root{
|
|
// red & pink
|
|
--bs-red:220, 53, 69; //#dc3545
|
|
--bs-red-primary:206, 25, 34; //#ce1922
|
|
--bs-red-danger:220, 53, 69; //#dc3545
|
|
--bs-red-lava:233, 27, 37; //#e91b25
|
|
--bs-red-chili:205, 22, 38; //#cd1626
|
|
--bs-red-origin:255, 0, 0; //#ff0000
|
|
--bs-red-bright:253, 13, 13; //#FD0D0D
|
|
--bs-red-rose-madder:223, 23, 43; //#DF172B
|
|
--bs-red-cornell:177, 31, 31; //#B11F1F
|
|
--bs-pink:214, 51, 132; //#d63384
|
|
--bs-pink-peach:255, 147, 147; //#ff9393
|
|
--bs-pink-pearl:255, 235, 235; //#ffebeb
|
|
--bs-pink-salmon:248, 126, 126; //#f87e7e
|
|
--bs-pink-magenta:255, 0, 255; //#FF00FF
|
|
--bs-pink-limited:243, 108, 214; //#f36cd6
|
|
--bs-pink-light-rose:255, 199, 209; //#FFC7D1
|
|
// orange & yellow
|
|
--bs-coral-light:229, 132, 137; //#E58489
|
|
--bs-orange:253, 126, 20; //#fd7e14
|
|
--bs-orange-mango:255, 139, 51; //#FF8B33
|
|
--bs-orange-tahiti:255, 128, 0;//#FF8000
|
|
--bs-orange-sand:226, 148, 117;//#E29475
|
|
--bs-yellow:255, 193, 7; //#ffc107
|
|
--bs-yellow-orange:255, 165, 0; //#FFA500
|
|
--bs-yellow-beer:255, 179, 16; //#FFB310
|
|
// green & blue & purple
|
|
--bs-green:25, 135, 84; //#198754
|
|
--bs-green-teal:32, 201, 151; //#20c997
|
|
--bs-green-clover:40, 167, 69; //#28A745
|
|
--bs-green-mid:60, 166, 91; //#3CA65B
|
|
--bs-green-olive:172, 221, 109;//#acdd6d
|
|
--bs-blue:13, 110, 253; //#0d6efd
|
|
--bs-blue-powder:192, 219, 234; //#C0DBEA
|
|
--bs-blue-biloba-flower:153, 170, 238; //#99AAEE
|
|
--bs-blue-light-steel:114, 134, 211; //#7286D3
|
|
--bs-blue-cyan:13, 202, 240; //#0dcaf0
|
|
--bs-blue-info:13, 202, 240; //#0dcaf0
|
|
--bs-blue-azure:0, 157, 255; //#009dff
|
|
--bs-blue-kashmir:78, 108, 163; //#4E6CA3
|
|
--bs-blue-science:2, 98, 205; //#0262cd
|
|
--bs-blue-crystal:110, 168, 254; //#6EA8FE
|
|
--bs-blue-origin:0, 0, 255; //#0000ff
|
|
--bs-blue-cobalt:28, 28, 205; //#1c1ccd
|
|
--bs-blue-deep-sky:0, 123, 255;//#007BFF
|
|
--bs-blue-royal-azure:1, 67, 163;//0143a3
|
|
--bs-blue-dodger-blue:61, 136, 250;//#3D88FA
|
|
--bs-blue-soft:95, 145, 251;//#5f91fb
|
|
--bs-purple:111, 66, 193; //#6f42c1
|
|
--bs-purple-indigo:102, 16, 242; //#6610f2
|
|
//brown
|
|
--bs-brown-quicksand:177, 155, 143;//#B19B8F
|
|
--bs-brown-taupe:107, 82, 69;//#6B5245
|
|
// white
|
|
--bs-white:255, 255, 255; //#ffffff
|
|
--bs-white-smoke:245, 245, 245; //#F5F5F5
|
|
--bs-white-spring:247, 247, 247; //#f7f7f7
|
|
--bs-white-snow:249, 249, 249; //#f9f9f9
|
|
--bs-white-porcelain:242, 242, 242; //#f2f2f2
|
|
--bs-white-baja:255, 250, 209; //#fffad1
|
|
--bs-white-seaShell:240, 240, 240;//##F0F0F0
|
|
--bs-white-smoke:245, 245, 247;//#F5F5F7
|
|
--bs-white-green:223, 240, 216;//#DFF0D8
|
|
// silver & gray
|
|
--bs-silver:199, 199, 199; //#c7c7c7
|
|
--bs-silver-chalice:172, 174, 175; //#ACAEAF
|
|
--bs-silver-aluminium:170, 170, 170; //#AAAAAA
|
|
--bs-gray:108, 117, 125; //#6c757d
|
|
--bs-gray-100:248, 249, 250; //#f8f9fa
|
|
--bs-gray-200:233, 236, 239; //#e9ecef
|
|
--bs-gray-250:233, 233, 233; //#e9e9e9
|
|
--bs-gray-300:222, 226, 230; //#dee2e6
|
|
--bs-gray-400:206, 212, 218; //#ced4da
|
|
--bs-gray-500:173, 181, 189; //#adb5bd
|
|
--bs-gray-600:146, 146, 146; //#929292
|
|
--bs-gray-700:73, 80, 87; //#495057
|
|
--bs-gray-800:52, 58, 64; //#343a40
|
|
--bs-gray-dust:209, 209, 209; //#D1D1D1
|
|
--bs-gray-cloud:181, 181, 181; //#B5B5B5
|
|
--bs-gray-pastel:204, 204, 204; //#CCCCCC
|
|
--bs-gray-ghost:203, 203, 203; //#CBCBCB
|
|
--bs-gray-pastel-lavender:206, 206, 206; //#CECECE
|
|
--bs-gray-dust-storm:207, 207, 207;//#cfcfcf
|
|
--bs-gray-iron-sky:203, 211, 218;//#CBD3DA
|
|
--bs-gray-cottonSeed:193, 185, 185;//#C1B9B9
|
|
--bs-gray-dawn:162, 162, 162; //#A2A2A2
|
|
--bs-gray-ash:187, 187, 187; //#bbbbbb
|
|
--bs-gray-ashPink:186, 186, 186; //#bababa
|
|
--bs-gray-softPeach:237, 237, 237; //#ededed
|
|
--bs-gray-platinum:226, 226, 226; //#E2E2E2
|
|
--bs-gray-soft:235, 235, 235; //#EBEBEB
|
|
--bs-gray-soft-peach:239, 239, 239;//#efefef
|
|
--bs-gray-gainsBoro:219, 219, 219; //#DBDBDB
|
|
--bs-gray-moon-mist:221, 221, 221; //#DDDDDD
|
|
--bs-gray-pearl:223, 223, 223; //#dfdfdf
|
|
--bs-gray-gunsmoke:135, 135, 135; //#878787
|
|
--bs-gray-border:195, 195, 195; //#c3c3c3
|
|
--bs-gray-wenge:85, 85, 85; //#555555
|
|
--bs-gray-charcoal:64, 69, 73; //#404549
|
|
--bs-gray-gravel:64, 67, 70; //#404346
|
|
--bs-gray-boulder:119, 119, 119; //#787676
|
|
--bs-gray-quill:213, 213, 213;//#D5D5D5
|
|
--bs-gray-granite:124, 124, 124;//#C7C7C7C
|
|
--bs-gray-medium:127, 127, 127;//#7F7F7F
|
|
--bs-gray-monsoon:136, 136, 136;//#888888
|
|
//dark & black
|
|
--bs-dark:33, 37, 41; //#212529
|
|
--bs-dark-dune:51, 51, 51; //#333333
|
|
--bs-dark-mirage:34, 34, 34; //#222222
|
|
--bs-dark-metal:45, 46, 52; //#2d2e34
|
|
--bs-dark-charcoal:47, 52, 56; //#2F3438
|
|
--bs-dark-onyx: 14, 14, 14; //#0E0E0E
|
|
--bs-dark-night: 9, 10, 11; //#090A0B
|
|
--bs-dark-sea:40, 40, 40; //#282828
|
|
--bs-dark-deep:33, 33, 33; //#212121
|
|
--bs-dark-green:24, 22, 19;//#181613
|
|
--bs-black:0, 0, 0; //#000000
|
|
--bs-black-eel:68, 68, 68; //#444444
|
|
--bs-black-cement:45, 46, 52; //#2D2E34
|
|
}
|
|
|
|
|
|
|
|
//mixin
|
|
@mixin bold{
|
|
font-weight:600;
|
|
font-variation-settings:"wght" 600;
|
|
}
|
|
@mixin clear{
|
|
&:after{clear:both; display:block; content:'';}
|
|
}
|
|
// $pos는 배경 이미지의 반복 방향을 지정. $x와 $y는 배경 이미지의 위치를 지정.
|
|
@mixin repeat-bg($imgpath, $pos, $x, $y){
|
|
background:url('/img/'+$imgpath) repeat-#{$pos} $x $y;
|
|
}
|
|
@mixin color-bg($bg-color, $imgpath, $x, $y){
|
|
background:$bg-color url('/img/'+$imgpath) no-repeat $x $y;
|
|
}
|
|
@mixin bg($imgpath, $x, $y){
|
|
background:url('/img/'+$imgpath) no-repeat $x $y;
|
|
}
|
|
@mixin ellipsis($line-cnt){
|
|
display:-webkit-box; overflow:hidden; text-overflow: ellipsis; -webkit-line-clamp: $line-cnt; -webkit-box-orient:vertical;
|
|
}
|
|
|
|
|
|
//reponsive
|
|
$breakpoint-sm-mobile:300px;
|
|
$breakpoint-md-mobile:415px;
|
|
$breakpoint-lg-mobile:500px;
|
|
|
|
$small: 768px;
|
|
$medium: 1024px;
|
|
$breakpoint-tablet:1024px;
|
|
$large: 1200px;
|
|
$x-large: 1400px;
|
|
//$breakpoint-desktop:1920px;
|
|
|
|
|
|
@mixin mobile-375{
|
|
@media screen and (max-width : #{$breakpoint-sm-mobile}){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin mobile-415{
|
|
@media screen and (max-width : #{$breakpoint-md-mobile}){
|
|
$input-pd:0.93rem !global; //먹히지 않음
|
|
$icon-pd:3.43rem !global; //먹히지 않음
|
|
@content;
|
|
}
|
|
}
|
|
@mixin mobile-500{
|
|
@media screen and (max-width : #{$breakpoint-lg-mobile}){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin small{
|
|
@media screen and (max-width:$small){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin medium{
|
|
@media screen and (max-width: $medium){
|
|
@content;
|
|
}
|
|
}
|
|
//medium과 동일함
|
|
@mixin tablet-1024{
|
|
@media screen and (max-width : #{$breakpoint-tablet}){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin large{
|
|
@media screen and (max-width: $large){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin x-large{
|
|
@media screen and (max-width: $x-large){
|
|
@content;
|
|
}
|
|
}
|
|
|