kisa 퍼블리싱 스타일가이드 - 다크, 라이트모드 (html, scss)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

151 lines
7.1 KiB

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>KISA</title>
<meta name="keywords" content="KISA" />
<meta name="author" content="KISA" />
<meta name="descripption" content="KISA" />
<link rel="shortcut icon" href="../assets/images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="../assets/css/index.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" />
</head>
<body>
<div class="guide_back">
<div class="guide_wrap two_line">
<header class="two_line">
<article class="header_in">
<div class="header_left">
<h1 class="header_logo">
<a href="../template/Main.html">
<span class="sp_logo_uniplus"></span>
</a>
</h1>
</div>
<nav class="gnb two_line w500">
<ul class="col_gap40 w500">
<li>
<a href="Button.html" class="on">Button</a>
</li>
<li class="m-t-36">
<div class="lightmode">
<div class="inner">
<input type="radio" name="toggle" id="toggle-radio-light" />
<label for="toggle-radio-light" class="tolight">
<i class="fas fa-sun tolight"></i>
</label>
<input type="radio" name="toggle" id="toggle-radio-dark" checked />
<label for="toggle-radio-dark" class="todark">
<i class="fas fa-moon todark"></i>
</label>
</div>
</div>
</li>
</ul>
</nav>
</article>
</header>
<div class="guide_center width1720">
<article class="guide_top">
<h1>Button</h1>
</article>
<article class="Gr_contents m-t-100">
<section class="comp_conts">
<dl class="comp_dl m-0">
<dt class="comp_dt w120 m-r-100">Box</dt>
<dd class="comp_dd">
<div class="compline m-b-20">
<div class="components">
<button class="btn_primary btn_l w160" type="button">Button</button>
<button class="btn_primary btn_l w160 disabled" type="button">Button</button>
<button class="btn_primary btn_l w160 disabled" type="button">Button</button>
</div>
</div>
<div class="compline m-b-20">
<div class="components">
<button class="btn_secondary btn_l w160" type="button">Button</button>
<button class="btn_secondary btn_l w160 disabled" type="button">Button</button>
<button class="btn_secondary btn_l w160 disabled" type="button">Button</button>
</div>
</div>
<div class="compline">
<div class="components">
<button class="btn_line btn_l w160" type="button">Button</button>
<button class="btn_line btn_l disabled w160" type="button">Button</button>
<button class="btn_line btn_l disabled w160" type="button">Button</button>
</div>
</div>
</dd>
</dl>
</section>
<section class="comp_conts m-t-50">
<dl class="comp_dl m-0">
<dt class="comp_dt w120 m-r-100"></dt>
<dd class="comp_dd">
<div class="compline m-b-20">
<div class="components">
<button class="btn_primary btn_l" type="button">Button</button>
</div>
</div>
<div class="compline m-b-20">
<div class="components">
<button class="btn_secondary btn_l" type="button">Button</button>
</div>
</div>
<div class="compline">
<div class="components">
<button class="btn_line btn_l" type="button">Button</button>
</div>
</div>
</dd>
</dl>
</section>
<section class="comp_conts m-t-50">
<dl class="comp_dl m-0">
<dt class="comp_dt w120 m-r-100"></dt>
<dd class="comp_dd">
<div class="compline m-b-20">
<div class="components">
<button class="btn_primary btn_l" type="button">Button</button>
</div>
</div>
<div class="compline m-b-20">
<div class="components">
<button class="btn_secondary btn_l" type="button">Button</button>
</div>
</div>
<div class="compline">
<div class="components">
<button class="btn_line btn_l" type="button">Button</button>
</div>
</div>
</dd>
</dl>
</section>
</article>
</div>
</div>
</div>
<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
<script type="text/javascript" src="../assets/js/common.js"></script>
<script>
$('.ch_radio').click(function(){
$('.ch_radio').removeClass('on');
$(this).addClass('on');
});
</script>
</body>
</html>