added current state from hippie main repo
commit state 175816 source/style/hippie
This commit is contained in:
Stephan
parent
58147a8e95
commit
b60dd80cd5
36 changed files with 2990 additions and 0 deletions
64
elements/_embedded.scss
Normal file
64
elements/_embedded.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
// Embedded content
|
||||
// -----------------------------------------------------------------------------
|
||||
// picture
|
||||
// source
|
||||
// img
|
||||
// iframe
|
||||
// embed
|
||||
// object
|
||||
// param
|
||||
// video
|
||||
// audio
|
||||
// track
|
||||
// map
|
||||
// area
|
||||
|
||||
|
||||
|
||||
picture {
|
||||
|
||||
}
|
||||
|
||||
source {
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
iframe {
|
||||
|
||||
}
|
||||
|
||||
embed {
|
||||
|
||||
}
|
||||
|
||||
object {
|
||||
|
||||
}
|
||||
|
||||
param {
|
||||
|
||||
}
|
||||
|
||||
video {
|
||||
|
||||
}
|
||||
|
||||
audio {
|
||||
|
||||
}
|
||||
|
||||
track {
|
||||
|
||||
}
|
||||
|
||||
map {
|
||||
|
||||
}
|
||||
|
||||
area {
|
||||
|
||||
}
|
||||
330
elements/_grouping.scss
Normal file
330
elements/_grouping.scss
Normal file
|
|
@ -0,0 +1,330 @@
|
|||
// Grouping content
|
||||
// -----------------------------------------------------------------------------
|
||||
// p
|
||||
// address
|
||||
// hr
|
||||
// pre
|
||||
// blockquote
|
||||
// ol
|
||||
// ul
|
||||
// li
|
||||
// dl
|
||||
// dt
|
||||
// dd
|
||||
// figure
|
||||
// figcaption
|
||||
// main
|
||||
// div
|
||||
|
||||
|
||||
|
||||
// Paragraph
|
||||
// -----------------------------------------------------------------------------
|
||||
p {
|
||||
@extend %basic;
|
||||
margin-top: $space_basic;
|
||||
margin-bottom: $space_basic;
|
||||
code {
|
||||
padding: $space_tiny $space_half;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.column_line {
|
||||
column-rule: $border_basic;
|
||||
}
|
||||
.column_2, .column_3 {
|
||||
@extend p;
|
||||
}
|
||||
.column_2 {
|
||||
column-count: 2;
|
||||
column-gap: $space_small;
|
||||
}
|
||||
.column_3 {
|
||||
column-count: 3;
|
||||
column-gap: $space_medium;
|
||||
}
|
||||
|
||||
// Address
|
||||
// -----------------------------------------------------------------------------
|
||||
address {
|
||||
// @extend %basic;
|
||||
margin-top: $space_double;
|
||||
margin-bottom: $space_double;
|
||||
}
|
||||
|
||||
// Line
|
||||
// -----------------------------------------------------------------------------
|
||||
hr {
|
||||
margin-top: $space_small;
|
||||
margin-bottom: $space_small;
|
||||
border-width: $width_border_basic 0 0;
|
||||
border-style: solid;
|
||||
border-color: $color_border_basic;
|
||||
}
|
||||
|
||||
.hr_hidden {
|
||||
@extend hr;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.hr_dotted {
|
||||
@extend hr;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
// Preformat
|
||||
// -----------------------------------------------------------------------------
|
||||
pre {
|
||||
@extend %basic_mono;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.pre_code {
|
||||
overflow-x: auto;
|
||||
border-color: darken($color_back_basic, $color_diff_tiny);
|
||||
border-style: dotted;
|
||||
border-width: 0 0 0 $width_border_4;
|
||||
border-radius: $radius_basic;
|
||||
padding: $space_basic;
|
||||
background-color: lighten($color_back_basic, $color_diff_tiny);
|
||||
code {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Quote
|
||||
// -----------------------------------------------------------------------------
|
||||
blockquote {
|
||||
margin: $space_basic 0;
|
||||
padding-right: $indent_basic;
|
||||
padding-left: $indent_basic;
|
||||
}
|
||||
|
||||
.quote_mark {
|
||||
p::before {
|
||||
content: "\201E \0020";
|
||||
}
|
||||
p::after {
|
||||
content: "\0020 \201C";
|
||||
}
|
||||
.quote_source {
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List
|
||||
// -----------------------------------------------------------------------------
|
||||
dl, ul, ol {
|
||||
margin: $space_double 0;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: $indent_basic;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin-left: $indent_basic;
|
||||
}
|
||||
|
||||
li, dt, dd {
|
||||
@extend %basic;
|
||||
}
|
||||
|
||||
dd, .list_basic li {
|
||||
margin-bottom: $space_basic;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: $indent_basic;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
list-style: square;
|
||||
}
|
||||
}
|
||||
|
||||
.list_dash {
|
||||
li {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "_";
|
||||
position: absolute;
|
||||
left: -1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list_link {
|
||||
li {
|
||||
margin-bottom: $space_tiny * 2;
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
display: block;
|
||||
padding: $padding_basic;
|
||||
color: $color_text_basic;
|
||||
img {
|
||||
margin-right: $space_basic;
|
||||
padding-bottom: 0.2em;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $color_action_basic;
|
||||
color: $color_highlight_basic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list_horizontal {
|
||||
overflow: auto;
|
||||
li {
|
||||
@extend .float_space_left;
|
||||
}
|
||||
}
|
||||
|
||||
// Embedded
|
||||
// -----------------------------------------------------------------------------
|
||||
figure {
|
||||
margin: $space_double $indent_basic;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@extend %basic;
|
||||
color: $color_darker;
|
||||
}
|
||||
|
||||
// Main content
|
||||
// -----------------------------------------------------------------------------
|
||||
main {
|
||||
|
||||
}
|
||||
|
||||
// Div
|
||||
// -----------------------------------------------------------------------------
|
||||
div {
|
||||
|
||||
}
|
||||
|
||||
.div_info {
|
||||
padding: $space_double $indent_basic;
|
||||
border-right: $space_basic solid rgba($echo_color, 0.6);
|
||||
background-color: rgba($echo_color, 0.1) !important;
|
||||
}
|
||||
|
||||
.box_space {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box_cube {
|
||||
float: left;
|
||||
display: table;
|
||||
width: $space_medium;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
span {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
.box_placeholder {
|
||||
width: 100%;
|
||||
height: $space_medium;
|
||||
border: $width_border_4 solid transparentize($alpha_color, 0.1);
|
||||
border-radius: $radius_basic;
|
||||
background-color: transparentize($alpha_color, 0.2);
|
||||
}
|
||||
|
||||
.box_placeholder_bkg {
|
||||
width: 100%;
|
||||
height: $space_medium * 2;
|
||||
border: $width_border_4 solid transparentize($color_front_basic, 0.1);
|
||||
border-radius: $radius_basic;
|
||||
padding: $space_basic;
|
||||
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
|
||||
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat;
|
||||
background-color: transparentize($color_front_basic, 0.1);
|
||||
}
|
||||
|
||||
.box_file_tile {
|
||||
@extend .float_space_left;
|
||||
}
|
||||
|
||||
// Flex
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex_wrap {
|
||||
@extend .flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
@extend .flex;
|
||||
flex-direction: column;
|
||||
// align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.flex_child {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.flex_child_one {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex_child_end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.flex_column_wrap {
|
||||
@extend .flex_wrap;
|
||||
|
||||
.flex_column {
|
||||
@extend .flex_child;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Grid
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: $space_basic;
|
||||
|
||||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > label {
|
||||
margin: $width_border_io;
|
||||
padding: $space_half;
|
||||
}
|
||||
}
|
||||
|
||||
.grid_column_2 {
|
||||
grid-template-columns: max-content max-content;
|
||||
|
||||
}
|
||||
|
||||
.grid_column_4 {
|
||||
grid-template-columns: max-content max-content max-content max-content;
|
||||
}
|
||||
|
||||
// Sprites
|
||||
.sprite_img {
|
||||
display: inline-block;
|
||||
}
|
||||
259
elements/_interactive.scss
Normal file
259
elements/_interactive.scss
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
// Forms
|
||||
// -----------------------------------------------------------------------------
|
||||
// form
|
||||
// label
|
||||
// input
|
||||
// button
|
||||
// select
|
||||
// datalist
|
||||
// optgroup
|
||||
// option
|
||||
// textarea
|
||||
// output
|
||||
// progress
|
||||
// meter
|
||||
// fieldset
|
||||
// legend
|
||||
|
||||
|
||||
|
||||
// Form
|
||||
// -----------------------------------------------------------------------------
|
||||
form {
|
||||
|
||||
}
|
||||
|
||||
// Label
|
||||
// -----------------------------------------------------------------------------
|
||||
label {
|
||||
@extend %basic;
|
||||
|
||||
input, button, textarea, select {
|
||||
margin-left: $space_basic;
|
||||
}
|
||||
}
|
||||
|
||||
input + label {
|
||||
margin-left: $space_basic;
|
||||
}
|
||||
|
||||
.label {
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
.label > input,
|
||||
.label > textarea,
|
||||
.label > select {
|
||||
margin: 0 $space_basic;
|
||||
}
|
||||
|
||||
// Input
|
||||
// -----------------------------------------------------------------------------
|
||||
input {
|
||||
}
|
||||
|
||||
label + input {
|
||||
margin-left: $space_basic;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
margin: $margin_io;
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
td > input,
|
||||
td > button,
|
||||
td > select,
|
||||
td > textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@each $input in $io_input_list, textarea, select {
|
||||
#{$input} {
|
||||
@extend %basic_mono;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.io_input, .io_textarea, .io_select {
|
||||
padding: $space_half;
|
||||
color: $color_text_io;
|
||||
background-color: $color_back_io;
|
||||
|
||||
&:hover {
|
||||
background-color: $color_highlight_basic;
|
||||
}
|
||||
|
||||
&[readonly="readonly"],
|
||||
&[readonly] {
|
||||
background-color: darken($color_back_io, $color_diff_double);
|
||||
}
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
&:hover {
|
||||
background-color: $color_back_io;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $input in $io_date_list {
|
||||
#{$input} {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@each $input in $io_input_list, textarea {
|
||||
#{$input} {
|
||||
// border: $border_io;
|
||||
}
|
||||
}
|
||||
|
||||
.io_input, .io_textarea {
|
||||
border: $border_io;
|
||||
|
||||
&[readonly="readonly"],
|
||||
&[readonly] {
|
||||
border-color: darken($color_border_io, $color_diff_double);
|
||||
}
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
// -----------------------------------------------------------------------------
|
||||
fieldset {
|
||||
margin: $margin_double;
|
||||
padding: $space_basic;
|
||||
border: $border_basic;
|
||||
}
|
||||
|
||||
// Legend
|
||||
// -----------------------------------------------------------------------------
|
||||
legend {
|
||||
@extend %basic;
|
||||
padding: 0 $space_half;
|
||||
}
|
||||
|
||||
// Button
|
||||
// -----------------------------------------------------------------------------
|
||||
button {
|
||||
|
||||
}
|
||||
|
||||
.io_button {
|
||||
@extend %basic_button;
|
||||
border: $width_border_io solid $color_border_button;
|
||||
padding: $padding_basic;
|
||||
color: $color_text_button;
|
||||
background-color: $color_back_button;
|
||||
|
||||
&:hover {
|
||||
// border-color: #0059F6;
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
background-color: $foxtrot_color;
|
||||
}
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
border-color: transparent;
|
||||
color: lighten($color_text_button, $color_diff_double);
|
||||
|
||||
&:hover {
|
||||
background-color: $color_back_button;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Selection
|
||||
// -----------------------------------------------------------------------------
|
||||
select {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// Datalist
|
||||
// -----------------------------------------------------------------------------
|
||||
datalist {
|
||||
|
||||
}
|
||||
|
||||
// Options
|
||||
// -----------------------------------------------------------------------------
|
||||
optgroup {
|
||||
|
||||
}
|
||||
|
||||
option {
|
||||
|
||||
}
|
||||
|
||||
// Textarea
|
||||
// -----------------------------------------------------------------------------
|
||||
textarea {
|
||||
}
|
||||
|
||||
.io_textarea {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
// Output
|
||||
// -----------------------------------------------------------------------------
|
||||
output {
|
||||
|
||||
}
|
||||
|
||||
// Progress
|
||||
// -----------------------------------------------------------------------------
|
||||
progress {
|
||||
|
||||
}
|
||||
|
||||
meter {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Interactive elements
|
||||
// -----------------------------------------------------------------------------
|
||||
// details
|
||||
// summary
|
||||
// dialog
|
||||
|
||||
|
||||
|
||||
details {
|
||||
|
||||
}
|
||||
|
||||
summary {
|
||||
|
||||
}
|
||||
|
||||
dialog {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Scripting
|
||||
// -----------------------------------------------------------------------------
|
||||
// script
|
||||
// noscript
|
||||
// template
|
||||
// canvas
|
||||
|
||||
|
||||
|
||||
canvas {
|
||||
|
||||
}
|
||||
189
elements/_sections.scss
Normal file
189
elements/_sections.scss
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
// Root
|
||||
// -----------------------------------------------------------------------------
|
||||
html {
|
||||
// height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Sections
|
||||
// -----------------------------------------------------------------------------
|
||||
// body
|
||||
// article
|
||||
// section
|
||||
// nav
|
||||
// aside
|
||||
// h1-h6
|
||||
// header
|
||||
// footer
|
||||
|
||||
|
||||
|
||||
// Body
|
||||
// -----------------------------------------------------------------------------
|
||||
body {
|
||||
position: relative;
|
||||
box-sizing: $box_sizing;
|
||||
margin: 0;
|
||||
font-family: $family_text_basic;
|
||||
font-size: $size_text_basic;
|
||||
line-height: $line_basic;
|
||||
line-height: $line_text_basic;
|
||||
color: $color_text_basic;
|
||||
background-color: $color_back_basic;
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.mouse_over {
|
||||
background-color: transparent !important;
|
||||
transition: background-color $duration_double $timing_basic 0s !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Article
|
||||
// -----------------------------------------------------------------------------
|
||||
article {
|
||||
|
||||
}
|
||||
|
||||
// Section
|
||||
// -----------------------------------------------------------------------------
|
||||
section {
|
||||
|
||||
}
|
||||
|
||||
.sec_main_center {
|
||||
width: $width_basic;
|
||||
margin: 0 auto;
|
||||
padding-top: $space_small;
|
||||
|
||||
@include forTabletPortraitUp {
|
||||
width: $width_small;
|
||||
}
|
||||
@include forTabletLandscapeUp {
|
||||
width: $width_medium;
|
||||
}
|
||||
@include forBigDesktopUp {
|
||||
width: $width_large;
|
||||
}
|
||||
}
|
||||
|
||||
.sec_main_status {
|
||||
border-top-width: $width_border_8;
|
||||
border-top-style: solid;
|
||||
border-color: $color_border_basic;
|
||||
padding-top: $space_small;
|
||||
}
|
||||
|
||||
// Navigation
|
||||
// -----------------------------------------------------------------------------
|
||||
nav {
|
||||
|
||||
}
|
||||
|
||||
// Aside element
|
||||
// -----------------------------------------------------------------------------
|
||||
aside {
|
||||
width: $width_aside_basic;
|
||||
|
||||
&.right + .bside {
|
||||
margin-right: calc(#{$width_aside_basic} + #{$space_basic});
|
||||
}
|
||||
|
||||
&.left + .bside {
|
||||
margin-left: calc(#{$width_aside_basic} + #{$space_basic});
|
||||
}
|
||||
|
||||
&.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
*:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
// -----------------------------------------------------------------------------
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@extend %head_all;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %head_1;
|
||||
margin: $space_large 0 $space_small;
|
||||
}
|
||||
|
||||
h1 + h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %head_2;
|
||||
margin: $space_medium 0 $space_small;
|
||||
}
|
||||
|
||||
h2 + h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %head_3;
|
||||
margin: $space_double 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend %head_3;
|
||||
margin: $space_double 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@extend %head_4;
|
||||
margin: $space_double 0 $space_basic;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@extend %basic;
|
||||
margin: $space_basic 0;
|
||||
text-transform: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Header
|
||||
// -----------------------------------------------------------------------------
|
||||
header {
|
||||
|
||||
}
|
||||
|
||||
.header_page {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.header_txt {
|
||||
margin-bottom: $space_small;
|
||||
border-bottom: $border_dotted;
|
||||
|
||||
h1 {
|
||||
border-top: $border_basic;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
// -----------------------------------------------------------------------------
|
||||
footer {
|
||||
|
||||
}
|
||||
130
elements/_tables.scss
Normal file
130
elements/_tables.scss
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
// Tabular data
|
||||
// -----------------------------------------------------------------------------
|
||||
// table
|
||||
// caption
|
||||
// colgroup
|
||||
// col
|
||||
// tbody
|
||||
// thead
|
||||
// tfoot
|
||||
// tr
|
||||
// td
|
||||
// th
|
||||
|
||||
|
||||
|
||||
// Table
|
||||
// -----------------------------------------------------------------------------
|
||||
table {
|
||||
margin: $margin_double;
|
||||
border: $border_basic;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table_blank {
|
||||
border: $width_border_basic solid transparent;
|
||||
|
||||
th, td {
|
||||
border: $width_border_basic solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.table_free {
|
||||
border: $width_border_basic solid transparent;
|
||||
}
|
||||
|
||||
.table_stripe {
|
||||
td {
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background-color: lighten($color_back_basic, $color_diff_tiny);
|
||||
}
|
||||
}
|
||||
|
||||
.table_fix {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.table_file_simple {
|
||||
@extend .width_full;
|
||||
}
|
||||
|
||||
// Caption
|
||||
// -----------------------------------------------------------------------------
|
||||
caption {
|
||||
@extend p;
|
||||
padding: $space_half 0;
|
||||
border: $border_dotted;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Columns
|
||||
// -----------------------------------------------------------------------------
|
||||
colgroup {
|
||||
|
||||
}
|
||||
|
||||
col {
|
||||
|
||||
}
|
||||
|
||||
// Table body
|
||||
// -----------------------------------------------------------------------------
|
||||
tbody {
|
||||
|
||||
}
|
||||
|
||||
// Table head
|
||||
// -----------------------------------------------------------------------------
|
||||
thead {
|
||||
|
||||
}
|
||||
|
||||
// Table foot
|
||||
// -----------------------------------------------------------------------------
|
||||
tfoot {
|
||||
|
||||
tr:first-child td {
|
||||
border-top: $border_basic;
|
||||
}
|
||||
}
|
||||
|
||||
// Row
|
||||
// -----------------------------------------------------------------------------
|
||||
tr {
|
||||
|
||||
}
|
||||
|
||||
// Cells
|
||||
// -----------------------------------------------------------------------------
|
||||
th, td {
|
||||
@extend %basic;
|
||||
padding: $space_half;
|
||||
}
|
||||
|
||||
th {
|
||||
border: $border_basic;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
border-right: $border_basic;
|
||||
border-bottom: $border_basic;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
border-right: 0;
|
||||
|
||||
td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cell_pre {
|
||||
// border-right-width: $width_border_4;
|
||||
// border-right-color: lighten($color_back_basic, $color_diff_basic);
|
||||
background-color: lighten($color_back_basic, $color_diff_tiny);
|
||||
}
|
||||
303
elements/_textlevel.scss
Normal file
303
elements/_textlevel.scss
Normal file
|
|
@ -0,0 +1,303 @@
|
|||
// Text-Level semantics
|
||||
// -----------------------------------------------------------------------------
|
||||
// a
|
||||
// em
|
||||
// strong
|
||||
// small
|
||||
// s
|
||||
// cite
|
||||
// q
|
||||
// dfn
|
||||
// abbr
|
||||
// ruby
|
||||
// rb
|
||||
// rt
|
||||
// rtc
|
||||
// rp
|
||||
// data
|
||||
// time
|
||||
// code
|
||||
// var
|
||||
// samp
|
||||
// kbd
|
||||
// sub
|
||||
// sup
|
||||
// i
|
||||
// b
|
||||
// u
|
||||
// mark
|
||||
// bdi
|
||||
// bdo
|
||||
// span
|
||||
// br
|
||||
// wbr
|
||||
|
||||
|
||||
|
||||
// Links
|
||||
// -----------------------------------------------------------------------------
|
||||
a {
|
||||
color: $color_link_basic;
|
||||
// color: lighten($color_action_basic, 20%);
|
||||
text-decoration: none;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $color_highlight_basic;
|
||||
}
|
||||
}
|
||||
|
||||
.a_internal {
|
||||
color: $charlie_color;
|
||||
}
|
||||
|
||||
.a_external {
|
||||
color: $delta_color;
|
||||
}
|
||||
|
||||
.a_line {
|
||||
border-bottom-width: $space_tiny;
|
||||
border-bottom-style: dotted;
|
||||
border-color: $color_border_basic;
|
||||
color: $color_text_basic;
|
||||
background-color: transparent;
|
||||
transition: color $duration_basic $timing_basic;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $color_highlight_basic;
|
||||
background-color: $color_action_basic;
|
||||
}
|
||||
}
|
||||
|
||||
.a_button {
|
||||
display: inline-block;
|
||||
padding: $padding_basic;
|
||||
border-radius: $radius_basic;
|
||||
background-color: transparentize($color_link_basic, 0.8);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
background-color: transparentize($color_highlight_basic, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.a_button_text {
|
||||
@extend .a_button;
|
||||
padding: $padding_link;
|
||||
color: $color_text_basic;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.a_button_border {
|
||||
@extend .a_button_text;
|
||||
border: $border_basic;
|
||||
}
|
||||
|
||||
|
||||
// Italic, Emphasis
|
||||
// -----------------------------------------------------------------------------
|
||||
i, em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.i_bright {
|
||||
color: $color_highlight_basic;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Bold, Strong
|
||||
// -----------------------------------------------------------------------------
|
||||
b, strong {
|
||||
font-weight: 500; // TODO maybe bolder
|
||||
}
|
||||
|
||||
// Small
|
||||
// -----------------------------------------------------------------------------
|
||||
small {
|
||||
|
||||
}
|
||||
|
||||
// No longer accurate or no longer relevant
|
||||
// -----------------------------------------------------------------------------
|
||||
s {
|
||||
|
||||
}
|
||||
|
||||
// Citation
|
||||
// -----------------------------------------------------------------------------
|
||||
cite {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Phrasing content, quoted
|
||||
// -----------------------------------------------------------------------------
|
||||
q {
|
||||
|
||||
}
|
||||
|
||||
// Definition
|
||||
// -----------------------------------------------------------------------------
|
||||
dfn {
|
||||
|
||||
}
|
||||
|
||||
// Abbreviation
|
||||
// -----------------------------------------------------------------------------
|
||||
abbr {
|
||||
|
||||
}
|
||||
|
||||
// Ruby annotations
|
||||
// -----------------------------------------------------------------------------
|
||||
ruby {
|
||||
|
||||
}
|
||||
|
||||
rb {
|
||||
|
||||
}
|
||||
|
||||
rt {
|
||||
|
||||
}
|
||||
|
||||
rtc {
|
||||
|
||||
}
|
||||
|
||||
rp {
|
||||
|
||||
}
|
||||
|
||||
// Machine readable data
|
||||
// -----------------------------------------------------------------------------
|
||||
data {
|
||||
|
||||
}
|
||||
|
||||
// Machine readable time
|
||||
// -----------------------------------------------------------------------------
|
||||
time {
|
||||
|
||||
}
|
||||
|
||||
// Code
|
||||
// -----------------------------------------------------------------------------
|
||||
code {
|
||||
@extend %basic_mono;
|
||||
color: lighten($color_text_basic, $color_diff_basic);
|
||||
background-color: lighten($color_back_basic, $color_diff_tiny);
|
||||
}
|
||||
|
||||
.code_solo {
|
||||
@extend %basic_mono;
|
||||
padding: $space_tiny $space_half;
|
||||
color: $color_text_basic;
|
||||
}
|
||||
|
||||
// Variable
|
||||
// -----------------------------------------------------------------------------
|
||||
var {
|
||||
|
||||
}
|
||||
|
||||
// Sample
|
||||
// -----------------------------------------------------------------------------
|
||||
samp {
|
||||
@extend %basic_mono;
|
||||
}
|
||||
|
||||
// Keyboard input
|
||||
// -----------------------------------------------------------------------------
|
||||
kbd {
|
||||
@extend %basic_mono;
|
||||
// font-size: .9em;
|
||||
// font-weight: bold;
|
||||
padding: 0 $space_half;
|
||||
border-width: $width_border_basic;
|
||||
border-style: solid;
|
||||
border-color: $color_darker;
|
||||
border-radius: $radius_basic;
|
||||
color: lighten($color_text_basic, $color_diff_basic);
|
||||
}
|
||||
|
||||
// Sub- and superscript
|
||||
// -----------------------------------------------------------------------------
|
||||
sub, sup {
|
||||
|
||||
}
|
||||
|
||||
// Unarticulated, non-textual annotation
|
||||
// -----------------------------------------------------------------------------
|
||||
u {
|
||||
|
||||
}
|
||||
|
||||
// Marks
|
||||
// -----------------------------------------------------------------------------
|
||||
mark {
|
||||
background-color: $alpha_color;
|
||||
}
|
||||
|
||||
.mark_cursor {
|
||||
color: invert($color_text_basic);
|
||||
background-color: $color_text_basic;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: invert($color_text_basic);
|
||||
background-color: $color_text_basic;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: invert($color_text_basic);
|
||||
background-color: $color_text_basic;
|
||||
}
|
||||
|
||||
// Text direction
|
||||
// -----------------------------------------------------------------------------
|
||||
bdi, bdo {
|
||||
|
||||
}
|
||||
|
||||
// Span
|
||||
// -----------------------------------------------------------------------------
|
||||
span {
|
||||
|
||||
}
|
||||
|
||||
.span_solo {
|
||||
@extend %solo;
|
||||
}
|
||||
|
||||
// Linebreaks
|
||||
// -----------------------------------------------------------------------------
|
||||
br {
|
||||
|
||||
}
|
||||
|
||||
wbr {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Edits
|
||||
// -----------------------------------------------------------------------------
|
||||
// ins
|
||||
// del
|
||||
|
||||
|
||||
|
||||
ins {
|
||||
|
||||
}
|
||||
|
||||
del {
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue