Atoms
Table of content
What are Atoms?
Atoms are the very basic elements of the stylesheet. Imagine every single-class element or selector rules as an atom. Examples could be buttons, links, headlines, inputs ... you get it, right?
To mark an element as an atom, annotate it with the @atom tag, followed by the name of the component. Special atoms are @icons.
Button
sc-fillbutton
塗り潰しボタン。 NOTE：経験上、前後に何か入れたる事が多いので、テキストは必ずネストする。
通常
前後にアイコンあり
dolor
非活性状態
sc-fillbutton Modifiers
Modifier
Description
.-disabled
非活性状態
<p>通常</p>
<div class="sc-fillbutton">
<div class="title">nisi</div>
</div>
<p>前後にアイコンあり</p>
<div class="sc-fillbutton">
<div class="prefix"><img src="https://unsplash.it/15/15?random=0.36714681517942593"></div>
<div class="title">dolor</div>
<div class="suffix"><img src="https://unsplash.it/15/15?random=0.05131295839601302"></div>
</div>
<p>非活性状態</p>
<div class="sc-fillbutton -disabled">
<div class="title">ullamco</div>
</div>sc-borderbutton
枠線ボタン。 NOTE：経験上、前後に何か入れたる事が多いので、テキストは必ずネストする。
通常
前後にアイコンあり
eu
非活性状態
sc-borderbutton Modifiers
Modifier
Description
.-disabled
非活性状態
<p>通常</p>
<div class="sc-borderbutton">
<div class="title">et</div>
</div>
<p>前後にアイコンあり</p>
<div class="sc-borderbutton">
<div class="prefix"><img src="https://unsplash.it/15/15?random=0.6258702972381753"></div>
<div class="title">eu</div>
<div class="suffix"><img src="https://unsplash.it/15/15?random=0.26099341083612093"></div>
</div>
<p>非活性状態</p>
<div class="sc-borderbutton -disabled">
<div class="title">eiusmod</div>
</div>