You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1094 lines
21 KiB
CSS
1094 lines
21 KiB
CSS
/*
|
|
|
|
Core
|
|
|
|
The core of Cutestrap is a large set of Custom Properties. Some are set on an
|
|
`html {}` ruleset and will be inherited by all children. Others are set on an
|
|
`* {}` ruleset and are used as mixins, which are special because they rely on
|
|
formulas. The only explicit styling performed here is setting `font-size` and
|
|
`line-height` on a `body {}` ruleset.
|
|
|
|
Markup:
|
|
<p>
|
|
Example paragraph
|
|
</p>
|
|
|
|
Styleguide 1.0
|
|
|
|
*/
|
|
|
|
* {
|
|
--rhythm: 2rem;
|
|
--rhythm-quadruple: calc(4 * var(--rhythm));
|
|
--rhythm-triple: calc(3 * var(--rhythm));
|
|
--rhythm-double: calc(2 * var(--rhythm));
|
|
--rhythm-half: calc((1/2) * var(--rhythm));
|
|
--rhythm-third: calc((1/3) * var(--rhythm));
|
|
--rhythm-fourth: calc((1/4) * var(--rhythm));
|
|
--rhythm-sixth: calc((1/6) * var(--rhythm));
|
|
--rhythm-eighth: calc((1/8) * var(--rhythm));
|
|
--rhythm-twelfth: calc((1/12) * var(--rhythm));
|
|
--rhythm-sixteenth: calc((1/16) * var(--rhythm));
|
|
--line-height: var(--sub-rhythm, var(--rhythm));
|
|
--line-height-ratio: 1.4;
|
|
--font-size: calc(var(--line-height) / var(--line-height-ratio));
|
|
}
|
|
|
|
html {
|
|
--border-radius: 4px;
|
|
--color-primary-tint1: hsl(350, 80%, 60%);
|
|
--color-primary: hsl(350, 80%, 45%);
|
|
--color-primary-shade1: hsl(350, 80%, 35%);
|
|
--color-accent-tint1: hsl(170, 80%, 60%);
|
|
--color-accent: hsl(170, 80%, 45%);
|
|
--color-accent-shade1: hsl(170, 80%, 35%);
|
|
--color-link: hsl(230, 60%, 50%);
|
|
--color-link-visited: hsl(290, 60%, 50%);
|
|
--color-link-hover: hsl(230, 80%, 60%);
|
|
--color-link-active: hsl(350, 60%, 50%);
|
|
--color-neutral-tint4: hsl(170, 10%, 98%);
|
|
--color-neutral-tint3: hsl(170, 10%, 94%);
|
|
--color-neutral-tint2: hsl(170, 10%, 85%);
|
|
--color-neutral-tint1: hsl(170, 10%, 68%);
|
|
--color-neutral: hsl(170, 10%, 55%);
|
|
--color-neutral-shade1: hsl(170, 10%, 41%);
|
|
--color-neutral-shade2: hsl(170, 10%, 30%);
|
|
--color-neutral-shade3: hsl(170, 10%, 18%);
|
|
--color-neutral-shade4: hsl(170, 10%, 2%);
|
|
--focus-outline: var(--rhythm-twelfth) dotted var(--color-primary-tint1);
|
|
--focus-outline-offset: var(--rhythm-twelfth);
|
|
--font-family: 'Avenir', 'Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Verdana', sans-serif;
|
|
--font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
|
|
--font-heading: var(--font-family);
|
|
--font-body: var(--font-family);
|
|
}
|
|
|
|
body {
|
|
font-size: var(--font-size);
|
|
line-height: var(--line-height);
|
|
}
|
|
|
|
/*
|
|
|
|
Base
|
|
|
|
The base stylesheet requires `core.css` and uses it to set all html elements
|
|
to adhere to the Baseline Grid and gives them default styles.
|
|
|
|
Markup:
|
|
<div>
|
|
<h1>Headline 1</h1>
|
|
<p>
|
|
Paragraph
|
|
</p>
|
|
<h2>Headline 2</h2>
|
|
<ul>
|
|
<li>Unordered item</li>
|
|
<li>Unordered item</li>
|
|
</ul>
|
|
<h3>Headline 3</h3>
|
|
<ol>
|
|
<li>Ordered item</li>
|
|
<li>Ordered item</li>
|
|
</ol>
|
|
<h4>Headline 4</h4>
|
|
<pre>
|
|
Preformatted
|
|
</pre>
|
|
<h5>Headline 5</h5>
|
|
<blockquote>
|
|
Blockquote
|
|
</blockquote>
|
|
<h6>Headline 6</h6>
|
|
<table>
|
|
<tr>
|
|
<th>Table Header</th>
|
|
<th>Table Header</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Table Cell</td>
|
|
<td>Table Cell</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
Styleguide 2.0
|
|
|
|
*/
|
|
|
|
* {
|
|
border: 0;
|
|
font: inherit;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-rendering: geometricPrecision;
|
|
}
|
|
|
|
:focus {
|
|
outline: var(--focus-outline);
|
|
outline-offset: var(--focus-outline-offset);
|
|
}
|
|
|
|
html {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
box-sizing: border-box;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-neutral-tint4);
|
|
color: var(--color-neutral-shade4);
|
|
font-family: var(--font-body);
|
|
position: relative;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: var(--font-heading);
|
|
font-size: var(--font-size);
|
|
line-height: var(--line-height);
|
|
margin: var(--rhythm) 0;
|
|
}
|
|
|
|
h1 {
|
|
--line-height-ratio: 1.1;
|
|
--sub-rhythm: var(--rhythm-triple);
|
|
|
|
font-weight: 700;
|
|
margin-bottom: var(--rhythm-double);
|
|
}
|
|
|
|
h2 {
|
|
--line-height-ratio: 1.2;
|
|
--sub-rhythm: var(--rhythm-triple);
|
|
}
|
|
|
|
h3 {
|
|
--line-height-ratio: 1.3;
|
|
--sub-rhythm: var(--rhythm-double);
|
|
|
|
font-weight: 700;
|
|
}
|
|
|
|
h4 {
|
|
--sub-rhythm: var(--rhythm-double);
|
|
}
|
|
|
|
h5 {
|
|
font-weight: 700;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: var(--rhythm);
|
|
}
|
|
|
|
form {
|
|
margin: var(--rhythm) 0;
|
|
}
|
|
|
|
pre,
|
|
code,
|
|
samp,
|
|
kbd {
|
|
background-color: var(--color-neutral-tint3);
|
|
font-size: var(--font-size);
|
|
color: var(--color-primary-shade1);
|
|
font-family: var(--font-mono);
|
|
line-height: 1;
|
|
}
|
|
|
|
code,
|
|
samp,
|
|
kbd {
|
|
border-radius: var(--border-radius);
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
padding: var(--rhythm-sixth);
|
|
}
|
|
|
|
pre {
|
|
border-radius: var(--border-radius);
|
|
line-height: var(--line-height);
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
padding: var(--rhythm-half);
|
|
margin: 0 0 var(--rhythm);
|
|
}
|
|
|
|
pre code,
|
|
pre samp,
|
|
pre kbd {
|
|
background-color: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a:link {
|
|
color: var(--color-link);
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--color-link-visited);
|
|
}
|
|
|
|
a:hover,
|
|
a:focus {
|
|
color: var(--color-link-hover);
|
|
}
|
|
|
|
a:active {
|
|
color: var(--color-link-active);
|
|
}
|
|
|
|
img,
|
|
video {
|
|
max-width: 100%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
hr {
|
|
height: var(--rhythm-double);
|
|
margin-bottom: var(--rhythm);
|
|
position: relative;
|
|
}
|
|
|
|
hr::before {
|
|
background-color: var(--color-neutral-tint1);
|
|
content: '';
|
|
height: 1px;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 100%;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
margin: 0 0 var(--rhythm) var(--rhythm);
|
|
}
|
|
|
|
ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
ol ol {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
ul ul {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
dt {
|
|
font-style: italic;
|
|
}
|
|
|
|
dd {
|
|
margin-left: var(--rhythm);
|
|
}
|
|
|
|
blockquote {
|
|
margin: 0 0 var(--rhythm) var(--rhythm-half);
|
|
border-left: var(--rhythm-eighth) solid var(--color-neutral-tint1);
|
|
padding: var(--rhythm) var(--rhythm-half);
|
|
}
|
|
|
|
blockquote p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
figure {
|
|
margin: 0 auto var(--rhythm);
|
|
}
|
|
|
|
small,
|
|
sub,
|
|
sup,
|
|
caption,
|
|
figcaption {
|
|
font-size: calc(2 * var(--rhythm-third));
|
|
vertical-align: top;
|
|
}
|
|
|
|
sub,
|
|
sup {
|
|
position: relative;
|
|
}
|
|
|
|
sub {
|
|
top: var(--rhythm-third);
|
|
}
|
|
|
|
sup {
|
|
bottom: var(--rhythm-third);
|
|
}
|
|
|
|
caption,
|
|
figcaption {
|
|
font-style: italic;
|
|
text-align: center;
|
|
}
|
|
|
|
em,
|
|
cite,
|
|
i {
|
|
font-style: italic;
|
|
}
|
|
|
|
strong,
|
|
var,
|
|
b {
|
|
font-weight: bold;
|
|
}
|
|
|
|
q::before {
|
|
content: "'";
|
|
}
|
|
|
|
q::after {
|
|
content: "'";
|
|
}
|
|
|
|
q > q {
|
|
font-style: italic;
|
|
}
|
|
|
|
dfn,
|
|
abbr {
|
|
border-bottom: var(--rhythm-sixteenth) dotted var(--color-neutral-shade2);
|
|
cursor: default;
|
|
}
|
|
|
|
table {
|
|
border-radius: var(--border-radius);
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
margin-bottom: var(--rhythm);
|
|
width: 100%;
|
|
}
|
|
|
|
table th {
|
|
text-align: left;
|
|
}
|
|
|
|
table th,
|
|
table td {
|
|
padding: 0 var(--rhythm-fourth);
|
|
}
|
|
|
|
input,
|
|
label,
|
|
select,
|
|
button,
|
|
textarea {
|
|
color: var(--color-neutral-shade4);
|
|
display: block;
|
|
padding: var(--rhythm-half);
|
|
resize: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
/* Firefox detection for keeping exact rhythm */
|
|
@-moz-document url-prefix() {
|
|
select {
|
|
line-height: calc(var(--rhythm) - 2px);
|
|
}
|
|
}
|
|
|
|
label {
|
|
color: var(--color-neutral-shade1);
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
|
|
Buttons
|
|
|
|
Buttons and their variations
|
|
|
|
Markup:
|
|
<button class="button {{modifier_class}}">Button</button>
|
|
|
|
.-secondary - A button with secondary colors
|
|
.-outlined - An outlined button
|
|
.-link - A button that looks like a link
|
|
.-block - Block level button
|
|
.-large - A large button
|
|
.-small - A small button
|
|
.-small.-outlined - A small, outlined button
|
|
|
|
Styleguide 3.0
|
|
|
|
*/
|
|
|
|
.button {
|
|
--border-color: transparent;
|
|
--border-color-hover: transparent;
|
|
--border-thickness: var(--rhythm-twelfth);
|
|
--background-color: var(--color-primary);
|
|
--background-color-hover: var(--color-primary-shade1);
|
|
--text-color: var(--color-neutral-tint4);
|
|
--text-color-hover: var(--color-neutral-tint4);
|
|
|
|
align-items: center;
|
|
align-content: center;
|
|
background-color: var(--background-color);
|
|
border: var(--border-thickness) solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
box-sizing: border-box;
|
|
color: var(--text-color);
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-size: var(--font-size);
|
|
justify-content: center;
|
|
line-height: var(--rhythm);
|
|
max-width: 100%;
|
|
min-height: calc(2 * var(--rhythm));
|
|
padding: calc(5 * var(--rhythm-twelfth)) var(--rhythm);
|
|
text-align: center;
|
|
transition-duration: 250ms;
|
|
transition-property: all;
|
|
user-select: none;
|
|
width: auto;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.button::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
.button:link,
|
|
.button:visited {
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.button:focus,
|
|
.button:hover {
|
|
background-color: var(--background-color-hover);
|
|
border-color: var(--border-color-hover);
|
|
color: var(--text-color-hover);
|
|
}
|
|
|
|
.button:active {
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.button:disabled {
|
|
opacity: .5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.button.-outlined {
|
|
--background-color: transparent;
|
|
--background-color-hover: var(--color-primary-shade1);
|
|
--border-color: var(--color-primary);
|
|
--border-color-hover: var(--color-primary-shade1);
|
|
--text-color: var(--color-primary);
|
|
}
|
|
|
|
.button.-secondary {
|
|
--background-color: var(--color-neutral-tint2);
|
|
--background-color-hover: var(--color-neutral-tint1);
|
|
--border-color: var(--color-neutral-tint2);
|
|
--border-color-hover: var(--color-neutral-tint1);
|
|
--text-color: var(--color-neutral-shade3);
|
|
--text-color-hover: var(--color-neutral-shade3);
|
|
}
|
|
|
|
.button.-link {
|
|
--background-color: transparent;
|
|
--background-color-hover: transparent;
|
|
--border-color: transparent;
|
|
--border-color-hover: transparent;
|
|
--text-color: var(--color-link);
|
|
--text-color-hover: var(--color-link-hover);
|
|
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.button.-block {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.button.-small {
|
|
--sub-rhythm: calc(14 * var(--rhythm-sixteenth));
|
|
--border-thickness: var(--rhythm-sixteenth);
|
|
|
|
font-size: var(--font-size);
|
|
line-height: var(--line-height);
|
|
margin-top: calc(-2 * var(--rhythm-sixteenth));
|
|
min-height: var(--sub-rhythm);
|
|
padding: 0 var(--rhythm-half);
|
|
}
|
|
|
|
.button.-large {
|
|
--sub-rhythm: calc(1.5 * var(--rhythm));
|
|
--border-thickness: var(--rhythm-eighth);
|
|
|
|
font-size: var(--font-size);
|
|
line-height: var(--line-height);
|
|
min-height: calc(3 * var(--rhythm));
|
|
padding: calc(3 * var(--rhythm-eighth)) calc(2 * var(--rhythm));
|
|
}
|
|
|
|
/*
|
|
|
|
Forms
|
|
|
|
Markup:
|
|
<form>
|
|
<label class="field">
|
|
<input type="text" />
|
|
<span class="label">Name</span>
|
|
</label>
|
|
<label class="field -inline">
|
|
<input type="radio" name="example" />
|
|
<span class="label">Cone</span>
|
|
</label>
|
|
<label class="field -inline">
|
|
<input type="radio" name="example" />
|
|
<span class="label">Bowl</span>
|
|
</label>
|
|
<label for="select" class="field">
|
|
<select name="select">
|
|
<option disabled="disabled" selected="selected">Flavors</option>
|
|
<option>Chocolate</option>
|
|
<option>Vanilla</option>
|
|
</select>
|
|
<span class="label">Favorite Ice Cream</span>
|
|
</label>
|
|
<label class="field">
|
|
<textarea></textarea>
|
|
<span class="label">Comments</span>
|
|
</label>
|
|
<label class="field">
|
|
<input type="checkbox" />
|
|
<span class="label">
|
|
I consent to my ice cream flavors being saved into a database for
|
|
eternity and understand and acknowledge this will have consequences
|
|
for all of my decendants for decades to come.
|
|
</span>
|
|
</label>
|
|
</form>
|
|
|
|
Styleguide 4.0
|
|
|
|
*/
|
|
|
|
.field [disabled] + *,
|
|
[disabled] {
|
|
cursor: default;
|
|
opacity: .5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
margin-bottom: var(--rhythm);
|
|
position: relative;
|
|
text-align: left;
|
|
}
|
|
|
|
.field .label {
|
|
z-index: 2;
|
|
}
|
|
|
|
.field [type=checkbox] + .label,
|
|
.field [type=radio] + .label {
|
|
color: var(--color-neutral-shade4);
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
padding-left: var(--rhythm);
|
|
}
|
|
|
|
.field *:not([type=radio]):not([type=checkbox]) + .label {
|
|
font-size: var(--rhythm-half);
|
|
position: absolute;
|
|
left: var(--rhythm-sixteenth);
|
|
line-height: 1;
|
|
padding: var(--rhythm-fourth) var(--rhythm-fourth) 0;
|
|
right: var(--rhythm-sixteenth);
|
|
top: 0;
|
|
}
|
|
|
|
.field input,
|
|
.field textarea,
|
|
.field select {
|
|
background-color: var(--color-neutral-tint4);
|
|
border: 1px solid var(--color-neutral-shade1);
|
|
border-radius: var(--border-radius);
|
|
box-sizing: border-box;
|
|
margin-top: -2px;
|
|
padding: calc(7 * var(--rhythm-eighth)) var(--rhythm-fourth) var(--rhythm-eighth);
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.field select {
|
|
z-index: 1;
|
|
}
|
|
|
|
/*
|
|
|
|
Select
|
|
|
|
Markup:
|
|
<label class="field {{modifier_class}}">
|
|
<select>
|
|
<option disabled="disabled" selected="selected">Select</option>
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
<option>Option 3</option>
|
|
</select>
|
|
<span class="label">Select Label</span>
|
|
</label>
|
|
|
|
Styleguide 4.1
|
|
|
|
*/
|
|
|
|
.field select + .label::after {
|
|
content: '';
|
|
border-left: var(--rhythm-fourth) solid transparent;
|
|
border-right: var(--rhythm-fourth) solid transparent;
|
|
border-top: var(--rhythm-fourth) solid var(--color-neutral-shade1);
|
|
bottom: calc(-2 * var(--rhythm-third));
|
|
height: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: var(--rhythm-half);
|
|
width: 0;
|
|
}
|
|
|
|
.field option[disabled] {
|
|
background-color: var(--color-neutral-tint3);
|
|
color: var(--color-neutral-shade2);
|
|
}
|
|
|
|
.field.-inline {
|
|
display: inline-block;
|
|
margin-right: var(--rhythm-half);
|
|
}
|
|
|
|
.field [type=checkbox],
|
|
.field [type=radio] {
|
|
opacity: 0;
|
|
position: absolute;
|
|
z-index: 0;
|
|
}
|
|
|
|
.field [type=checkbox] + .label::before,
|
|
.field [type=radio] + .label::before {
|
|
background-color: var(--color-neutral-tint4);
|
|
border: 2px solid var(--color-neutral-shade1);
|
|
content: '';
|
|
height: var(--rhythm-half);
|
|
left: 0;
|
|
position: absolute;
|
|
top: var(--rhythm-eighth);
|
|
transform: translateY(var(--rhythm-sixteenth));
|
|
width: var(--rhythm-half);
|
|
}
|
|
|
|
.field [type=checkbox] + .label::after,
|
|
.field [type=radio] + .label::after {
|
|
background-color: var(--color-primary);
|
|
border: 2px solid transparent;
|
|
color: var(--color-neutral-tint4);
|
|
height: var(--rhythm-fourth);
|
|
left: var(--rhythm-eighth);
|
|
position: absolute;
|
|
top: var(--rhythm-fourth);
|
|
transform: translateY(var(--rhythm-sixteenth));
|
|
width: var(--rhythm-fourth);
|
|
}
|
|
|
|
/*
|
|
|
|
Checkbox
|
|
|
|
Markup:
|
|
<label class="field {{modifier_class}}">
|
|
<input type="checkbox" />
|
|
<span class="label">Checkbox</span>
|
|
</label>
|
|
|
|
Styleguide 4.2
|
|
|
|
*/
|
|
|
|
.field [type=checkbox] + .label::before,
|
|
.field [type=checkbox] + .label::after {
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
/*
|
|
|
|
Radio
|
|
|
|
Markup:
|
|
<label class="field {{modifier_class}}">
|
|
<input type="radio" />
|
|
<span class="label">Radio</span>
|
|
</label>
|
|
|
|
Styleguide 4.3
|
|
|
|
*/
|
|
|
|
.field [type=radio] + .label::before,
|
|
.field [type=radio] + .label::after {
|
|
border-radius: var(--rhythm);
|
|
}
|
|
|
|
.field [type=radio]:focus + .label::before,
|
|
.field [type=checkbox]:focus + .label::before {
|
|
outline: var(--focus-outline);
|
|
outline-offset: var(--focus-outline-offset);
|
|
}
|
|
|
|
.field [type=checkbox]:checked + .label::after,
|
|
.field [type=radio]:checked + .label::after {
|
|
content: '';
|
|
}
|
|
|
|
/*
|
|
|
|
Input and text areas
|
|
|
|
Markup:
|
|
<label class="field {{modifier_class}}">
|
|
<input type="text" />
|
|
<span class="label">Input</span>
|
|
</label>
|
|
<label class="field {{modifier_class}}">
|
|
<textarea></textarea>
|
|
<span class="label">Textarea</span>
|
|
</label>
|
|
|
|
Styleguide 4.4
|
|
|
|
*/
|
|
|
|
.field textarea {
|
|
margin-top: 0;
|
|
min-height: calc(4 * var(--rhythm));
|
|
}
|
|
|
|
/*
|
|
|
|
Disabled Fields
|
|
|
|
Markup:
|
|
<form>
|
|
<label class="field">
|
|
<input type="text" value="Someone" disabled />
|
|
<span class="label">Name</span>
|
|
</label>
|
|
<label class="field -inline">
|
|
<input type="radio" name="example" disabled />
|
|
<span class="label">Cone</span>
|
|
</label>
|
|
<label class="field -inline">
|
|
<input type="radio" name="example" disabled />
|
|
<span class="label">Bowl</span>
|
|
</label>
|
|
<label for="select" class="field">
|
|
<select name="select" disabled>
|
|
<option disabled="disabled" selected="selected">Flavors</option>
|
|
<option>Chocolate</option>
|
|
<option>Vanilla</option>
|
|
</select>
|
|
<span class="label">Favorite Ice Cream</span>
|
|
</label>
|
|
<label class="field">
|
|
<textarea disabled>I am some comments</textarea>
|
|
<span class="label">Comments</span>
|
|
</label>
|
|
<label class="field">
|
|
<input type="checkbox" disabled />
|
|
<span class="label">
|
|
I consent to my ice cream flavors being saved into a database for
|
|
eternity and understand and acknowledge this will have consequences
|
|
for all of my decendants for decades to come.
|
|
</span>
|
|
</label>
|
|
</form>
|
|
|
|
Styleguide 4.5
|
|
|
|
*/
|
|
|
|
/*
|
|
|
|
Grid
|
|
|
|
A simple grid with automatic columns
|
|
|
|
Markup:
|
|
<div class="grid {{modifier_class}}">
|
|
<div>Column</div>
|
|
<div>Column</div>
|
|
<div>Column</div>
|
|
<div>Column</div>
|
|
<div>Column</div>
|
|
<div>Column</div>
|
|
</div>
|
|
|
|
.-medium - start at 45rem
|
|
.-large - start at 80rem
|
|
|
|
Styleguide 5.0
|
|
|
|
*/
|
|
|
|
.grid {
|
|
--columns: auto-fit;
|
|
|
|
display: grid;
|
|
column-gap: var(--rhythm);
|
|
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
|
|
}
|
|
|
|
@media (max-width: 45rem) {
|
|
.grid.-medium {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 80rem) {
|
|
.grid.-large {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
Columns
|
|
|
|
Manually set column widths (Note: the syntax is passing a custom property with
|
|
a number value. KSS Docs only support modified classes, so ignore the term
|
|
[modifier class] and the dot before the number in the examples below).
|
|
|
|
Markup:
|
|
<div class="grid" style="--columns: {{modifier_class}}">
|
|
<div>Column</div>
|
|
<div>Column</div>
|
|
<div>Column</div>
|
|
<div>Column</div>
|
|
<div>Column</div>
|
|
<div>Column</div>
|
|
</div>
|
|
|
|
.2 - Two columns
|
|
.3 - Three columns
|
|
.4 - Four columns
|
|
|
|
Styleguide 5.1
|
|
|
|
*/
|
|
|
|
/*
|
|
|
|
Wrappers
|
|
|
|
Elements with max widths and paddings that can be used to separate content
|
|
|
|
Markup:
|
|
<div class="wrapper {{modifier_class}}">
|
|
Wrapper
|
|
</div>
|
|
|
|
.-thin - A max-width of 45rem
|
|
.-wide - A max-width of 80rem
|
|
.-flush - No vertical or horizontal spacing
|
|
|
|
Styleguide 6.0
|
|
|
|
*/
|
|
|
|
.wrapper {
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
max-width: 60rem;
|
|
padding: var(--rhythm-double) var(--rhythm-half);
|
|
width: 100%;
|
|
}
|
|
|
|
.wrapper.-thin {
|
|
max-width: 45rem;
|
|
padding: var(--rhythm) var(--rhythm-half);
|
|
}
|
|
|
|
.wrapper.-wide {
|
|
max-width: 80rem;
|
|
padding: var(--rhythm-triple) var(--rhythm-half);
|
|
}
|
|
|
|
.wrapper.-flush {
|
|
padding: 0 var(--rhythm-half);
|
|
}
|
|
|
|
/*
|
|
|
|
Utilities
|
|
|
|
These utility classes have one or two CSS properties that are meant to save you from creating several identical classes to do the same thing, like just centering some text.
|
|
|
|
Markup:
|
|
<div class="{{modifier_class}}">
|
|
Example Text
|
|
</div>
|
|
|
|
.disabled - Disable an Element
|
|
.clearfix - Clear floats to keep the parent container in shape
|
|
.f-none - float: none;
|
|
.f-left - float: left;
|
|
.f-right - float: right;
|
|
.ta-left - text-align: left;
|
|
.ta-center - text-align: center;
|
|
.ta-right - text-align: right;
|
|
|
|
Styleguide 7.0
|
|
|
|
*/
|
|
|
|
.disabled {
|
|
cursor: default;
|
|
opacity: .5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.f-none {
|
|
float: none;
|
|
}
|
|
|
|
.f-left {
|
|
float: left;
|
|
}
|
|
|
|
.f-right {
|
|
float: right;
|
|
}
|
|
|
|
.clearfix {
|
|
clear: both;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ta-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.ta-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.ta-right {
|
|
text-align: right;
|
|
}
|
|
|
|
/*
|
|
|
|
Type Utilities
|
|
|
|
These are specific typography related utilities
|
|
|
|
Markup:
|
|
<div class="type {{modifier_class}}">
|
|
The quick<br />
|
|
brown fox<br />
|
|
jumps over<br />
|
|
the lazy dog.
|
|
</div>
|
|
|
|
.fw-light - Changes the type to be 300 weight
|
|
.fw-normal - Changes the type to be 400 weight
|
|
.fw-bold - Changes the type to be 700 weight
|
|
.fs-small - Small font-size
|
|
.fs-base - Base font-size
|
|
.fs-large - Large font-size
|
|
|
|
Styleguide 7.1
|
|
|
|
*/
|
|
|
|
.fw-light {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.fw-normal {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.fw-bold {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.fs-small,
|
|
.fs-base,
|
|
.fs-large {
|
|
font-size: var(--font-size);
|
|
line-height: var(--line-height);
|
|
}
|
|
|
|
.fs-small {
|
|
--sub-rhythm: calc(.75 * var(--rhythm));
|
|
}
|
|
|
|
.fs-base {
|
|
--sub-rhythm: initial;
|
|
}
|
|
|
|
.fs-large {
|
|
--sub-rhythm: calc(1.25 * var(--rhythm));
|
|
}
|
|
|
|
/*
|
|
|
|
Margin Utilities
|
|
|
|
These utilities allow you to easily remove margins that you don't want
|
|
|
|
Markup:
|
|
<h1 class="{{modifier_class}}">
|
|
Do you like margins?
|
|
</h1>
|
|
|
|
.m-zero - Remove margins
|
|
.mt-zero - Remove top margin only
|
|
.mb-zero - Remove bottom margin only
|
|
|
|
Styleguide 7.2
|
|
|
|
*/
|
|
|
|
.m-zero {
|
|
margin: 0;
|
|
}
|
|
|
|
.mt-zero {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.mb-zero {
|
|
margin-bottom: 0;
|
|
}
|