Compare commits
No commits in common. "84ddbceb9a130943c3833b3d937bd7beac2e71d3" and "58147a8e95821c1fa57d5304389ffe0252437d8c" have entirely different histories.
84ddbceb9a
...
58147a8e95
38 changed files with 1 additions and 2975 deletions
8
.gitignore
vendored
8
.gitignore
vendored
|
|
@ -1,10 +1,2 @@
|
||||||
# HIPPIE
|
|
||||||
###################
|
|
||||||
mixins/_sprite.scss
|
|
||||||
|
|
||||||
# Sass
|
|
||||||
###################
|
|
||||||
.sass-cache/
|
.sass-cache/
|
||||||
*.css.map
|
*.css.map
|
||||||
*.sass.map
|
|
||||||
*.scss.map
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
MIT License
|
MIT License
|
||||||
|
|
||||||
Copyright (c) 2016 till today Stephan Hagedorn
|
Copyright (c) 2019 Stephan
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
53
README.md
53
README.md
|
|
@ -1,53 +0,0 @@
|
||||||
# HIPPIE styles
|
|
||||||
|
|
||||||
Collection of CSS styles, mainly for the use with HIPPIE, written in SASS language.
|
|
||||||
|
|
||||||
## Getting Started
|
|
||||||
|
|
||||||
These instructions will get you a copy of the project up and running on your local machine.
|
|
||||||
|
|
||||||
### Prerequisites
|
|
||||||
|
|
||||||
All styles in this project are written in the [Sass](https://sass-lang.com/) language. So a preprocessor may be needed to form Cascading Style Sheets (CSS).
|
|
||||||
|
|
||||||
Please choose a implementation suitable for your needs from the [Install Sass document](https://sass-lang.com/install).
|
|
||||||
|
|
||||||
For example in a [Node.js](https://nodejs.org/) environment you can install Sass with the Node package manager:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install -g sass
|
|
||||||
```
|
|
||||||
|
|
||||||
### Installing
|
|
||||||
|
|
||||||
Clone the repository `https://quelltext.interaktionsweise.de/interaktionsweise/hippie-style.git` to a folder to get all source files.
|
|
||||||
|
|
||||||
To include HIPPIE styles to a Sass workflow, just import the main file at the appropriate position. Usually this would be at the beginning of your stylesheet:
|
|
||||||
|
|
||||||
```scss
|
|
||||||
@import "hippie/hippie";
|
|
||||||
```
|
|
||||||
|
|
||||||
It is also possible to link to the resulting CSS file. First the file needs to be compiled:
|
|
||||||
|
|
||||||
```
|
|
||||||
sass hippie/_hippie.scss stylesheets/hippie.css
|
|
||||||
```
|
|
||||||
|
|
||||||
Now the stylesheet can be included into the HTML document:
|
|
||||||
|
|
||||||
```
|
|
||||||
<link rel="stylesheet" type="text/css" href="stylesheets/hippie.css"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Versioning
|
|
||||||
|
|
||||||
This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://quelltext.interaktionsweise.de/interaktionsweise/hippie-style/tags).
|
|
||||||
|
|
||||||
## Authors
|
|
||||||
|
|
||||||
**Stephan Hagedorn** - *Initial work* - [Interaktionsweise](https://interaktionsweise.de)
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
/*
|
|
||||||
* # TABLE OF CONTENTS
|
|
||||||
*
|
|
||||||
* - Reset
|
|
||||||
* - Priority CSS Rules
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
// Reset
|
|
||||||
// Use a file outside of hippie i.e. vendor/normalize.css
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
// @import "vendor/normalize.css";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* # NOTE
|
|
||||||
*
|
|
||||||
* CSS rules for content which is presented immediately
|
|
||||||
* to the screen and needs priority loading
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
50
_basic.scss
50
_basic.scss
|
|
@ -1,50 +0,0 @@
|
||||||
// Reset
|
|
||||||
// Use a file outside of hippie i.e. vendor/normalize.css
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
// @import "../../vendor/normalizecss/normalize.css";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Functions and Mixins
|
|
||||||
// Important code constructions
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
@import "functions/all";
|
|
||||||
@import "mixins/all";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Fonts
|
|
||||||
// Use a central file outside of hippie for font definitions with @font-face
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
// @import "../../vendor/fonts.css";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Global configuration with default values
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
@import "global/config";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Basic styles - this is the core of definitions
|
|
||||||
// Individual styles can be added her
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
@import "global/common";
|
|
||||||
@import "global/typography";
|
|
||||||
// Following the w3c document element structure
|
|
||||||
// https://w3c.github.io/html/index.html#contents
|
|
||||||
@import "elements/sections";
|
|
||||||
@import "elements/grouping";
|
|
||||||
@import "elements/textlevel";
|
|
||||||
@import "elements/embedded";
|
|
||||||
@import "elements/tables";
|
|
||||||
@import "elements/interactive";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Individual Modules and variables
|
|
||||||
// in dependency to other styles
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
@import "modules/breakpoint/breakpoint_module";
|
|
||||||
@import "modules/tables/tables_module";
|
|
||||||
@import "modules/maintenance/maintenance_module";
|
|
||||||
32
_hippie.scss
32
_hippie.scss
|
|
@ -1,32 +0,0 @@
|
||||||
/*
|
|
||||||
* # TABLE OF CONTENTS
|
|
||||||
*
|
|
||||||
* - Reset
|
|
||||||
* - Global functions and mixins
|
|
||||||
* - Configuration
|
|
||||||
* - Special modules
|
|
||||||
* - Basic styles
|
|
||||||
* - Common
|
|
||||||
* - Typography
|
|
||||||
*
|
|
||||||
* - Sections
|
|
||||||
* - Grouping
|
|
||||||
* - Textlevel
|
|
||||||
* - Embedded
|
|
||||||
* - Tables
|
|
||||||
* - Interactive
|
|
||||||
* - Modules
|
|
||||||
- Breakpoint
|
|
||||||
- Tables
|
|
||||||
- Maintenance
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
@import "basic";
|
|
||||||
|
|
||||||
// Additional Modules and variables
|
|
||||||
// in dependency to other basic styles
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
@import "modules/navigation/nav_module";
|
|
||||||
@import "modules/editor/editor_module";
|
|
||||||
@import "modules/explanation/explanation_module";
|
|
||||||
@import "modules/print/print_module";
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
// 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 {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,330 +0,0 @@
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,259 +0,0 @@
|
||||||
// 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 {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,189 +0,0 @@
|
||||||
// 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 {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,130 +0,0 @@
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
|
|
@ -1,307 +0,0 @@
|
||||||
// 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_discreet {
|
|
||||||
color: $color_text_basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
@import "color";
|
|
||||||
@import "shade";
|
|
||||||
@import "tint";
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
@function createColorMap($color, $percentage, $opacity) {
|
|
||||||
$map: (
|
|
||||||
base: $color,
|
|
||||||
light: lighten($color, $percentage),
|
|
||||||
dark: darken($color, $percentage),
|
|
||||||
trans: transparentize($color, $opacity)
|
|
||||||
);
|
|
||||||
@return $map;
|
|
||||||
}
|
|
||||||
|
|
||||||
@function basic_color($key: 'alpha') {
|
|
||||||
@return map-get($color_palette, $key);
|
|
||||||
}
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
// Mixes a color with black.
|
|
||||||
//
|
|
||||||
// @param {Color} $color
|
|
||||||
//
|
|
||||||
// @param {Number (Percentage)} $percent
|
|
||||||
// The amount of black to be mixed in.
|
|
||||||
//
|
|
||||||
// @example scss - Usage
|
|
||||||
// .element {
|
|
||||||
// background-color: shade(#0c85ff, 60%);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// @example css - CSS Output
|
|
||||||
// .element {
|
|
||||||
// background-color: #074f99;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// @return {Color}
|
|
||||||
|
|
||||||
@function shade($color, $percent) {
|
|
||||||
@return mix(#000, $color, $percent);
|
|
||||||
}
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
// Mixes a color with white.
|
|
||||||
//
|
|
||||||
// @param {Color} $color
|
|
||||||
//
|
|
||||||
// @param {Number (Percentage)} $percent
|
|
||||||
// The amount of white to be mixed in.
|
|
||||||
//
|
|
||||||
// @example scss - Usage
|
|
||||||
// .element {
|
|
||||||
// background-color: tint(#0c85ff, 40%);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// @example css - CSS Output
|
|
||||||
// .element {
|
|
||||||
// background-color: #9dceff;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// @return {Color}
|
|
||||||
|
|
||||||
@function tint($color, $percent) {
|
|
||||||
@return mix(#fff, $color, $percent);
|
|
||||||
}
|
|
||||||
|
|
@ -1,311 +0,0 @@
|
||||||
// Common styles for global usage
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
@use "sass:math";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// General classes
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
%size_content {
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
%size_content_solo {
|
|
||||||
@extend %size_content;
|
|
||||||
|
|
||||||
*,
|
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
box-sizing: $box_sizing;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hide {
|
|
||||||
@extend %hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.space_even_auto {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.space_even_half {
|
|
||||||
margin-right: 25%;
|
|
||||||
margin-left: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.space_even_fourth {
|
|
||||||
margin-right: 37.5%;
|
|
||||||
margin-left: 37.5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $size, $variable in (basic, #{$space_basic}),
|
|
||||||
(small, #{$space_small}),
|
|
||||||
(medium, #{$space_medium}),
|
|
||||||
(large, #{$space_large}) {
|
|
||||||
.space_top_#{$size} {
|
|
||||||
margin-top: $variable;
|
|
||||||
}
|
|
||||||
.space_right_#{$size} {
|
|
||||||
margin-right: $variable;
|
|
||||||
}
|
|
||||||
.space_bottom_#{$size} {
|
|
||||||
margin-bottom: $variable;
|
|
||||||
}
|
|
||||||
.space_left_#{$size} {
|
|
||||||
margin-left: $variable;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.space_left_fourth {
|
|
||||||
margin-left: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.width_full {
|
|
||||||
width: 100%;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.width_half {
|
|
||||||
width: 50%;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.width_third {
|
|
||||||
width: 33.3%;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h_basic {
|
|
||||||
height: 1024px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h_full_view {
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h_100 {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrap_center {
|
|
||||||
& > * {
|
|
||||||
margin-right: math.div((100% - $width_basic), 2);
|
|
||||||
margin-left: math.div((100% - $width_basic), 2);
|
|
||||||
|
|
||||||
@include forTabletPortraitUp {
|
|
||||||
margin-right: math.div((100% - $width_small), 2);
|
|
||||||
margin-left: math.div((100% - $width_small), 2);
|
|
||||||
}
|
|
||||||
@include forTabletLandscapeUp {
|
|
||||||
margin-right: math.div((100% - $width_medium), 2);
|
|
||||||
margin-left: math.div((100% - $width_medium), 2);
|
|
||||||
}
|
|
||||||
@include forBigDesktopUp {
|
|
||||||
margin-right: math.div((100% - $width_large), 2);
|
|
||||||
margin-left: math.div((100% - $width_large), 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Clearing and floating
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
.clear {
|
|
||||||
clear: both;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.overflow {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.float_left {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.float_right {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.float_space_left {
|
|
||||||
@extend .float_left;
|
|
||||||
margin-right: $space_small;
|
|
||||||
}
|
|
||||||
|
|
||||||
.float_half_size {
|
|
||||||
float: left;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x_long {
|
|
||||||
overflow-x: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Inlining
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
.inline {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Positioned elements
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
%viewport_fixed {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
%full_parent {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
// width: 100%;
|
|
||||||
// height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pos_abs {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pos_rel {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pos_fix {
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pin_top {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pin_right {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pin_bottom {
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pin_left {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pos_full_view {
|
|
||||||
@extend %viewport_fixed;
|
|
||||||
background-color: rgba($alpha_color, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pos_full_page {
|
|
||||||
@extend %full_parent;
|
|
||||||
background-color: rgba($charlie_color, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover_back_change {
|
|
||||||
background-color: $color_darker;
|
|
||||||
transition: background-color 0.2s ease-in-out;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color_back_basic;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mouse_over {
|
|
||||||
@extend %viewport_fixed;
|
|
||||||
z-index: $z_heaven;
|
|
||||||
background-color: transparentize($color_darkest, 0.5);
|
|
||||||
transition: background-color $duration_long $timing_basic $duration_long;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
.txt_color_light {
|
|
||||||
color: $color_brighter;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txt_color_dark {
|
|
||||||
color: $color_darker;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Text
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
.txt_tiny {
|
|
||||||
font-size: .5em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txt_smaller {
|
|
||||||
font-size: .75em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txt_larger {
|
|
||||||
font-size: 1.2em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txt_huge {
|
|
||||||
font-size: 3em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txt_hero {
|
|
||||||
font-size: $size_hero;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txt_center {
|
|
||||||
text-align: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txt_right {
|
|
||||||
text-align: right !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txt_left {
|
|
||||||
text-align: left !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txt_top {
|
|
||||||
vertical-align: top !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txt_bottom {
|
|
||||||
vertical-align: bottom !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txt_white {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txt_black {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txt_gradient {
|
|
||||||
background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color);
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
@ -1,273 +0,0 @@
|
||||||
// Default configuration
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
@use "sass:math";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// TEXT
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
$size_text_basic: 17px !default;
|
|
||||||
$size_text_print: 10pt !default;
|
|
||||||
|
|
||||||
$line_basic: 1;
|
|
||||||
|
|
||||||
// $i: 1;
|
|
||||||
// @while $i < 7 {
|
|
||||||
// %head_#{$i} { width: 2em * $i; }
|
|
||||||
// $i: $i + 1;
|
|
||||||
// }
|
|
||||||
// $head_sizes: (h1: 3.1em, h2: 2.5em, h3: 1.8em, h4: 1.35em);
|
|
||||||
//
|
|
||||||
// @each $head, $size in $head_sizes {
|
|
||||||
// #{$head} {
|
|
||||||
// font-size: $size;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// $head_sizes: (
|
|
||||||
// basic: (
|
|
||||||
// 'h1': ('font-size': 24),
|
|
||||||
// 'h2': ('font-size': 20),
|
|
||||||
// 'h3': ('font-size': 19),
|
|
||||||
// 'h4': ('font-size': 18),
|
|
||||||
// 'h5': ('font-size': 17),
|
|
||||||
// 'h6': ('font-size': 16),
|
|
||||||
// ),
|
|
||||||
// print: (
|
|
||||||
// 'h1': ('font-size': 48),
|
|
||||||
// 'h2': ('font-size': 40),
|
|
||||||
// 'h3': ('font-size': 31),
|
|
||||||
// 'h4': ('font-size': 25),
|
|
||||||
// 'h5': ('font-size': 20),
|
|
||||||
// 'h6': ('font-size': 16),
|
|
||||||
// ),
|
|
||||||
// );
|
|
||||||
|
|
||||||
$size_head_1: 3.1em !default;
|
|
||||||
$size_head_2: 2.5em !default;
|
|
||||||
$size_head_3: 1.8em !default;
|
|
||||||
$size_head_4: 1.35em !default;
|
|
||||||
|
|
||||||
$size_text_1: 1em;
|
|
||||||
$size_text_2: 20;
|
|
||||||
|
|
||||||
$size_hero: $size_head_1 * 3;
|
|
||||||
|
|
||||||
$line_text_basic: 1.28 !default;
|
|
||||||
$line_text_mono: 1.1 !default;
|
|
||||||
$line_head_basic: $line_text_basic !default;
|
|
||||||
|
|
||||||
$family_text_basic: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
|
|
||||||
$family_text_print: #{'Times New Roman', times} !default;
|
|
||||||
$family_text_mono: #{'Courier New', monospace} !default;
|
|
||||||
$family_text_card: #{'Trebuchet MS', 'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
|
|
||||||
$family_head_basic: $family_text_basic !default;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// COLORS
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
$color_palette: (
|
|
||||||
alpha: #fad803,
|
|
||||||
bravo: #d30a51,
|
|
||||||
charlie: #273f8b,
|
|
||||||
delta: #b7e0f0,
|
|
||||||
echo: #52bed1,
|
|
||||||
foxtrot: #0c85ff
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
@include addDefaultColors;
|
|
||||||
|
|
||||||
$color_diff_basic: 12% !default;
|
|
||||||
$color_diff_tiny: 4% !default;
|
|
||||||
$color_diff_double: $color_diff_basic * 2;
|
|
||||||
|
|
||||||
$color_darkest: black !default;
|
|
||||||
$color_brightest: white !default;
|
|
||||||
|
|
||||||
$color_text_basic: black !default;
|
|
||||||
$color_back_basic: #808080 !default;
|
|
||||||
$color_border_basic: lighten($color_text_basic, $color_diff_basic) !default;
|
|
||||||
$color_front_basic: white !default;
|
|
||||||
|
|
||||||
$color_medium: lighten($color_darkest, 50%);
|
|
||||||
$color_dark: lighten($color_darkest, $color_diff_double);
|
|
||||||
$color_darker: darken($color_back_basic, $color_diff_basic);
|
|
||||||
$color_brighter: lighten($color_back_basic, $color_diff_basic);
|
|
||||||
$color_bright: darken($color_brightest, $color_diff_double);
|
|
||||||
|
|
||||||
$color_head_basic: $color_text_basic !default;
|
|
||||||
$color_link_basic: $delta_color !default;
|
|
||||||
$color_highlight_basic: $color_front_basic !default;
|
|
||||||
$color_action_basic: $foxtrot_color !default;
|
|
||||||
|
|
||||||
|
|
||||||
// default shadow colors
|
|
||||||
// $shadow_color: fade-out($color_medium, 0.5);
|
|
||||||
|
|
||||||
$color_list: ();
|
|
||||||
|
|
||||||
@each $key, $value in $color_palette {
|
|
||||||
$map: ();
|
|
||||||
$map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)) );
|
|
||||||
$color_list: map-merge($color_list, $map);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// LAYOUT
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
$box_sizing: border-box !default;
|
|
||||||
|
|
||||||
$z_heaven: 100 !default;
|
|
||||||
$z_top: 10 !default;
|
|
||||||
$z_basic: 1 !default;
|
|
||||||
$z_earth: -100 !default;
|
|
||||||
|
|
||||||
$width_basic: 96% !default;
|
|
||||||
$width_small: 80% !default;
|
|
||||||
$width_medium: 60% !default;
|
|
||||||
$width_large: 48% !default;
|
|
||||||
$width_aside_basic: 20% !default;
|
|
||||||
|
|
||||||
$space_tiny: 1px !default;
|
|
||||||
$space_basic: $space_tiny * 8 !default;
|
|
||||||
$space_half: math.div($space_basic, 2);
|
|
||||||
$space_double: $space_basic * 2;
|
|
||||||
$space_small: $space_basic * 4;
|
|
||||||
$space_medium: $space_basic * 8;
|
|
||||||
$space_large: $space_basic * 16;
|
|
||||||
|
|
||||||
$margin_basic: $space_basic 0 !default;
|
|
||||||
$margin_double: $space_double 0 !default;
|
|
||||||
$margin_io: 0 $space_small 0 0 !default;
|
|
||||||
|
|
||||||
$padding_basic: calc(#{$space_basic} - 3px) $space_basic !default;
|
|
||||||
$padding_link: calc(#{$space_basic} - 1px) calc(#{$space_basic} * 2) !default;
|
|
||||||
|
|
||||||
$indent_basic: 2em !default;
|
|
||||||
|
|
||||||
$border_basic: $space_tiny solid $color_border_basic;
|
|
||||||
$border_dotted: $space_tiny dotted $color_border_basic;
|
|
||||||
$width_border_basic: $space_tiny !default;
|
|
||||||
$width_border_4: $width_border_basic * 4;
|
|
||||||
$width_border_8: $width_border_basic * 8;
|
|
||||||
|
|
||||||
$radius_basic: $space_tiny * 2 !default;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// IO
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
$io_input_list:
|
|
||||||
'input[type="text"]',
|
|
||||||
'input[type="number"]',
|
|
||||||
'input[type="color"]',
|
|
||||||
'input[type="range"]',
|
|
||||||
'input[type="date"]',
|
|
||||||
'input[type="time"]',
|
|
||||||
'input[type="datetime-local"]',
|
|
||||||
'input[type="month"]',
|
|
||||||
'input[type="week"]',
|
|
||||||
'input[type="email"]',
|
|
||||||
'input[type="password"]',
|
|
||||||
'input[type="tel"]',
|
|
||||||
'input[type="url"]',
|
|
||||||
'input[type="search"]',
|
|
||||||
'input:not([type])';
|
|
||||||
|
|
||||||
$io_date_list:
|
|
||||||
'.io_input[type="date"]',
|
|
||||||
'.io_input[type="time"]',
|
|
||||||
'.io_input[type="datetime-local"]',
|
|
||||||
'.io_input[type="month"]',
|
|
||||||
'.io_input[type="week"]';
|
|
||||||
|
|
||||||
$io_button_list:
|
|
||||||
'button',
|
|
||||||
'input[type="button"]',
|
|
||||||
// 'input[type="file"]',
|
|
||||||
'input[type="reset"]',
|
|
||||||
'input[type="image"]',
|
|
||||||
'input[type="submit"]';
|
|
||||||
|
|
||||||
$io_focus_list:
|
|
||||||
'a[href]',
|
|
||||||
'area[href]',
|
|
||||||
'button:not([disabled])',
|
|
||||||
'input:not([disabled])',
|
|
||||||
'select:not([disabled])',
|
|
||||||
'textarea:not([disabled])',
|
|
||||||
'*[tabindex]';
|
|
||||||
|
|
||||||
$color_text_io: lighten($color_text_basic, $color_diff_basic) !default;
|
|
||||||
$color_text_button: $color_text_basic !default;
|
|
||||||
$color_back_io: darken($color_front_basic, $color_diff_basic) !default;
|
|
||||||
$color_back_button: $color_darker !default;
|
|
||||||
$color_border_io: $color_front_basic !default;
|
|
||||||
$color_border_button: $color_dark !default;
|
|
||||||
|
|
||||||
$width_border_io: $space_tiny * 2 !default;
|
|
||||||
$border_io: $width_border_io solid $color_border_io;
|
|
||||||
$border_io_dotted: $width_border_io dotted $color_border_io;
|
|
||||||
|
|
||||||
$shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06);
|
|
||||||
$shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightness: -5%, $alpha: -0.3);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ANIMATIONS
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
$duration_basic: 250ms !default;
|
|
||||||
$duration_double: $duration_basic * 2;
|
|
||||||
$duration_long: 2s !default;
|
|
||||||
$timing_basic: ease-out !default;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// HARDWARE BREAKPOINTS
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
$screen_tiny: 768px;
|
|
||||||
$screen_small: 1024px;
|
|
||||||
$screen_medium: 1280px;
|
|
||||||
$screen_large: 1440px;
|
|
||||||
$screen_huge: 1680px;
|
|
||||||
$screen_gigantic: 1920px;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// VENDOR PREFIX
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
$prefix_defaults: -moz- -webkit- -o- -ms- '';
|
|
||||||
$webkit_support: -webkit- '';
|
|
||||||
$moz_support: -moz- '';
|
|
||||||
$ms_support: -ms- '';
|
|
||||||
$moz_webkit_support: -moz- -webkit- '';
|
|
||||||
$moz_ms_support: -moz- -ms- '';
|
|
||||||
$webkit_ms_support: -webkit- -ms- '';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// SYMBOLS
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
$icons: (
|
|
||||||
glass: "\f000",
|
|
||||||
music: "\f001",
|
|
||||||
search: "\f002",
|
|
||||||
envelope-o: "\f003",
|
|
||||||
heart: "\f004"
|
|
||||||
);
|
|
||||||
|
|
||||||
@each $name, $icon in $icons {
|
|
||||||
.sym_#{$name}::before {
|
|
||||||
content: $icon;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// USER AGENT
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
$no_agent_focus: true;
|
|
||||||
|
|
||||||
@include overrideUserAgent;
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
// Basic styles
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
|
|
||||||
%basic {
|
|
||||||
font-family: $family_text_basic;
|
|
||||||
font-size: $size_text_1;
|
|
||||||
line-height: $line_text_basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
%basic_mono {
|
|
||||||
font-family: $family_text_mono;
|
|
||||||
font-size: $size_text_1;
|
|
||||||
line-height: $line_text_mono;
|
|
||||||
}
|
|
||||||
|
|
||||||
%basic_print {
|
|
||||||
font-family: $family_text_print;
|
|
||||||
font-size: $size_text_1;
|
|
||||||
line-height: $line_text_basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
%head_all {
|
|
||||||
font-family: $family_head_basic;
|
|
||||||
line-height: $line_head_basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
%head_1 {
|
|
||||||
font-size: $size_head_1;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
%head_2 {
|
|
||||||
font-size: $size_head_2;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
%head_3 {
|
|
||||||
font-size: $size_head_3;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
%head_4 {
|
|
||||||
font-size: $size_head_4;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
%basic_button {
|
|
||||||
@extend %basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
%solo {
|
|
||||||
@extend %basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
%short {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
-o-text-overflow: ellipsis; // vendor
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
@import "media_query";
|
|
||||||
@import "sprite";
|
|
||||||
@import "flow";
|
|
||||||
@import "color";
|
|
||||||
@import "user_agent";
|
|
||||||
@import "vendor";
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
@mixin addDefaultColors() {
|
|
||||||
@if map-has-key($color_palette, alpha) {
|
|
||||||
$alpha_color: map-get($color_palette, alpha) !global;
|
|
||||||
}
|
|
||||||
@if map-has-key($color_palette, bravo) {
|
|
||||||
$bravo_color: map-get($color_palette, bravo) !global;
|
|
||||||
}
|
|
||||||
@if map-has-key($color_palette, charlie) {
|
|
||||||
$charlie_color: map-get($color_palette, charlie) !global;
|
|
||||||
}
|
|
||||||
@if map-has-key($color_palette, delta) {
|
|
||||||
$delta_color: map-get($color_palette, delta) !global;
|
|
||||||
}
|
|
||||||
@if map-has-key($color_palette, echo) {
|
|
||||||
$echo_color: map-get($color_palette, echo) !global;
|
|
||||||
}
|
|
||||||
@if map-has-key($color_palette, foxtrot) {
|
|
||||||
$foxtrot_color: map-get($color_palette, foxtrot) !global;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
// Provides an easy way to include a clearflow for containing floats.
|
|
||||||
//
|
|
||||||
// @link http://cssmojo.com/latest_new_clearfix_so_far/
|
|
||||||
//
|
|
||||||
// @example scss - Usage
|
|
||||||
// .element {
|
|
||||||
// @include clearFlow;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// @example css - CSS Output
|
|
||||||
// .element::after {
|
|
||||||
// content: "";
|
|
||||||
// clear: both;
|
|
||||||
// display: table;
|
|
||||||
// }
|
|
||||||
|
|
||||||
@mixin clearFlow {
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
clear: both;
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
@use "sass:math";
|
|
||||||
|
|
||||||
//Sections for Media Queries
|
|
||||||
@mixin forPhoneUp {
|
|
||||||
@media (min-width: #{$screen_tiny - 1}) { @content; } //599px
|
|
||||||
}
|
|
||||||
@mixin forPhoneOnly {
|
|
||||||
@media (max-width: #{$screen_tiny - 1}) { @content; } //599px
|
|
||||||
}
|
|
||||||
@mixin forTabletPortraitUp {
|
|
||||||
@media (min-width: $screen_small) { @content; } //600px
|
|
||||||
}
|
|
||||||
@mixin forTabletPortraitOnly {
|
|
||||||
@media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
|
|
||||||
}
|
|
||||||
@mixin forTabletLandscapeUp {
|
|
||||||
@media (min-width: $screen_small) { @content; } //900px
|
|
||||||
}
|
|
||||||
@mixin forTabletLandscapeOnly {
|
|
||||||
@media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
|
|
||||||
}
|
|
||||||
@mixin forDesktopUp {
|
|
||||||
@media (min-width: $screen_medium) { @content; } //1200px
|
|
||||||
}
|
|
||||||
@mixin forDesktopOnly {
|
|
||||||
@media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
|
|
||||||
}
|
|
||||||
@mixin forBigDesktopUp {
|
|
||||||
@media (min-width: $screen_huge) { @content; } //1800px
|
|
||||||
}
|
|
||||||
|
|
||||||
//Mobile-first Media Query
|
|
||||||
@mixin goingLarge($width) {
|
|
||||||
// @media (min-width: $width/16+em) { @content; }
|
|
||||||
// @media (min-width: (math.div($width, 16)+em)) { @content; }
|
|
||||||
@media (min-width: ($width)) { @content; }
|
|
||||||
}
|
|
||||||
|
|
||||||
//Desktop-first Media Query
|
|
||||||
@mixin goingSmall($width) {
|
|
||||||
@media (max-width: ($width)) { @content; }
|
|
||||||
}
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
// SCSS variables are information about icon's compiled state, stored under its original file name
|
|
||||||
//
|
|
||||||
// .icon-home {
|
|
||||||
// width: $icon-home-width;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// The large array-like variables contain all information about a single icon
|
|
||||||
// $icon-home: x y offset_x offset_y width height total_width total_height image_path;
|
|
||||||
//
|
|
||||||
// At the bottom of this section, we provide information about the spritesheet itself
|
|
||||||
// $spritesheet: width height image $spritesheet-sprites;
|
|
||||||
$down-name: 'down';
|
|
||||||
$down-x: 64px;
|
|
||||||
$down-y: 0px;
|
|
||||||
$down-offset-x: -64px;
|
|
||||||
$down-offset-y: 0px;
|
|
||||||
$down-width: 32px;
|
|
||||||
$down-height: 32px;
|
|
||||||
$down-total-width: 96px;
|
|
||||||
$down-total-height: 64px;
|
|
||||||
$down-image: '../art/sprite.png';
|
|
||||||
$down: (64px, 0px, -64px, 0px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'down', );
|
|
||||||
$meta-name: 'meta';
|
|
||||||
$meta-x: 64px;
|
|
||||||
$meta-y: 32px;
|
|
||||||
$meta-offset-x: -64px;
|
|
||||||
$meta-offset-y: -32px;
|
|
||||||
$meta-width: 32px;
|
|
||||||
$meta-height: 32px;
|
|
||||||
$meta-total-width: 96px;
|
|
||||||
$meta-total-height: 64px;
|
|
||||||
$meta-image: '../art/sprite.png';
|
|
||||||
$meta: (64px, 32px, -64px, -32px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'meta', );
|
|
||||||
$up-name: 'up';
|
|
||||||
$up-x: 0px;
|
|
||||||
$up-y: 0px;
|
|
||||||
$up-offset-x: 0px;
|
|
||||||
$up-offset-y: 0px;
|
|
||||||
$up-width: 32px;
|
|
||||||
$up-height: 64px;
|
|
||||||
$up-total-width: 96px;
|
|
||||||
$up-total-height: 64px;
|
|
||||||
$up-image: '../art/sprite.png';
|
|
||||||
$up: (0px, 0px, 0px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up', );
|
|
||||||
$up2-name: 'up2';
|
|
||||||
$up2-x: 32px;
|
|
||||||
$up2-y: 0px;
|
|
||||||
$up2-offset-x: -32px;
|
|
||||||
$up2-offset-y: 0px;
|
|
||||||
$up2-width: 32px;
|
|
||||||
$up2-height: 64px;
|
|
||||||
$up2-total-width: 96px;
|
|
||||||
$up2-total-height: 64px;
|
|
||||||
$up2-image: '../art/sprite.png';
|
|
||||||
$up2: (32px, 0px, -32px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up2', );
|
|
||||||
$spritesheet-width: 96px;
|
|
||||||
$spritesheet-height: 64px;
|
|
||||||
$spritesheet-image: '../art/sprite.png';
|
|
||||||
$spritesheet-sprites: ($down, $meta, $up, $up2, );
|
|
||||||
$spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
|
|
||||||
|
|
||||||
// The provided mixins are intended to be used with the array-like variables
|
|
||||||
//
|
|
||||||
// .icon-home {
|
|
||||||
// @include sprite-width($icon-home);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// .icon-email {
|
|
||||||
// @include sprite($icon-email);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// Example usage in HTML:
|
|
||||||
//
|
|
||||||
// `display: block` sprite:
|
|
||||||
// <div class="icon-home"></div>
|
|
||||||
//
|
|
||||||
// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
|
|
||||||
//
|
|
||||||
// // CSS
|
|
||||||
// .icon {
|
|
||||||
// display: inline-block;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// // HTML
|
|
||||||
// <i class="icon icon-home"></i>
|
|
||||||
@mixin sprite-width($sprite) {
|
|
||||||
width: nth($sprite, 5);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin sprite-height($sprite) {
|
|
||||||
height: nth($sprite, 6);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin sprite-position($sprite) {
|
|
||||||
$sprite-offset-x: nth($sprite, 3);
|
|
||||||
$sprite-offset-y: nth($sprite, 4);
|
|
||||||
background-position: $sprite-offset-x $sprite-offset-y;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin sprite-image($sprite) {
|
|
||||||
$sprite-image: nth($sprite, 9);
|
|
||||||
background-image: url(#{$sprite-image});
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin sprite($sprite) {
|
|
||||||
@include sprite-image($sprite);
|
|
||||||
@include sprite-position($sprite);
|
|
||||||
@include sprite-width($sprite);
|
|
||||||
@include sprite-height($sprite);
|
|
||||||
}
|
|
||||||
|
|
||||||
// The `sprites` mixin generates identical output to the CSS template
|
|
||||||
// but can be overridden inside of SCSS
|
|
||||||
//
|
|
||||||
// @include sprites($spritesheet-sprites);
|
|
||||||
@mixin sprites($sprites) {
|
|
||||||
@each $sprite in $sprites {
|
|
||||||
$sprite-name: nth($sprite, 10);
|
|
||||||
.#{$sprite-name} {
|
|
||||||
@include sprite($sprite);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
@mixin overrideUserAgent() {
|
|
||||||
@if $no_agent_focus == true {
|
|
||||||
@each $el in $io_focus_list {
|
|
||||||
#{$el}:focus {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
/**
|
|
||||||
* @description
|
|
||||||
* Generates cross-browser-compatible output for a given element with its value.
|
|
||||||
*
|
|
||||||
* @author sthag
|
|
||||||
*
|
|
||||||
* @param values
|
|
||||||
* @returns
|
|
||||||
* -webkit-<name>: <values>
|
|
||||||
* ...-<name>: <values>
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* .selector
|
|
||||||
* @include vendor-prefix(hyphens, auto)
|
|
||||||
*/
|
|
||||||
@mixin vendor-prefix($name, $argument) {
|
|
||||||
-webkit-#{$name}: #{$argument};
|
|
||||||
-ms-#{$name}: #{$argument};
|
|
||||||
-moz-#{$name}: #{$argument};
|
|
||||||
-o-#{$name}: #{$argument};
|
|
||||||
#{$name}: #{$argument};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
.query_goingLarge {
|
|
||||||
@include goingLarge($screen_tiny) {};
|
|
||||||
}
|
|
||||||
|
|
||||||
.query_goingSmall {
|
|
||||||
@include goingSmall($screen_gigantic) {};
|
|
||||||
}
|
|
||||||
|
|
||||||
.query_phoneUp {
|
|
||||||
@include forPhoneUp {}
|
|
||||||
}
|
|
||||||
|
|
||||||
.query_phoneOnly {
|
|
||||||
@include forPhoneOnly {}
|
|
||||||
}
|
|
||||||
|
|
||||||
.query_tabletPortaitOnly {
|
|
||||||
@include forTabletPortraitOnly {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.query_tabletPortraitUp {
|
|
||||||
@include forTabletPortraitUp {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.query_tabletLandscapeOnly {
|
|
||||||
@include forTabletLandscapeOnly {}
|
|
||||||
}
|
|
||||||
|
|
||||||
.query_tabletLandscapeUp {
|
|
||||||
@include forTabletLandscapeUp {}
|
|
||||||
}
|
|
||||||
|
|
||||||
.query_desktopOnly {
|
|
||||||
@include forDesktopOnly {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.query_desktopUp {
|
|
||||||
@include forDesktopUp {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.query_bigDesktopUp {
|
|
||||||
@include forBigDesktopUp {}
|
|
||||||
}
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
// Custom extends and mixins
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
@import "mixins";
|
|
||||||
@import "extends";
|
|
||||||
|
|
||||||
// Editor module styles
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
%wip {
|
|
||||||
border-right: $space_basic solid rgba(crimson, 0.8);
|
|
||||||
background-color: rgba(crimson, 0.1) !important;
|
|
||||||
}
|
|
||||||
.wip {
|
|
||||||
@extend %wip;
|
|
||||||
&::before, &::after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.wip_txt {
|
|
||||||
@extend %wip;
|
|
||||||
}
|
|
||||||
|
|
@ -1,114 +0,0 @@
|
||||||
@use "sass:math";
|
|
||||||
|
|
||||||
%expose_after {
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
height: 48px;
|
|
||||||
background-color: rgba($delta_color, 0.1) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
%expose_before {
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
height: 48px;
|
|
||||||
background-color: rgba($delta_color, 0.1) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
%expose {
|
|
||||||
&::before, &::after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
height: 48px;
|
|
||||||
background-color: rgba($delta_color, 0.1) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// %exp {
|
|
||||||
// }
|
|
||||||
%exp_hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.exp_wrap {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.exp_overlay {
|
|
||||||
@extend %full_parent;
|
|
||||||
background-color: transparentize($alpha_color, .6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.exp_pop {
|
|
||||||
@extend %exp_hidden !optional;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 100;
|
|
||||||
top: $space_large;
|
|
||||||
left: $space_large;
|
|
||||||
padding: $space_half;
|
|
||||||
border: 4px solid $color_back_basic;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: $color_back_basic;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.exp_marker_pop {
|
|
||||||
position: absolute;
|
|
||||||
top: math.div(-$size_text_basic, 4) * 3;
|
|
||||||
right: math.div(-$size_text_basic, 2);
|
|
||||||
width: $size_text_basic;
|
|
||||||
height: $size_text_basic;
|
|
||||||
border: $space_tiny solid $color_highlight_basic;
|
|
||||||
border-radius: $size_text_basic;
|
|
||||||
color: $color_highlight_basic;
|
|
||||||
background-color: $color_darkest;
|
|
||||||
}
|
|
||||||
|
|
||||||
.exp_expose {
|
|
||||||
@extend %expose !optional;
|
|
||||||
}
|
|
||||||
.exp_expose_pre {
|
|
||||||
@extend %expose_after;
|
|
||||||
}
|
|
||||||
.exp_expose_post {
|
|
||||||
@extend %expose_before;
|
|
||||||
}
|
|
||||||
|
|
||||||
.exp_overlay_btn {
|
|
||||||
position: fixed;
|
|
||||||
width: 3em;
|
|
||||||
height: 2em;
|
|
||||||
// padding: $space_basic $space_basic * 2;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.exp_help_btn {
|
|
||||||
display: table;
|
|
||||||
right: $space_double;
|
|
||||||
bottom: $space_double;
|
|
||||||
background-color: rgba($color_darkest, 0.4);
|
|
||||||
&:hover {
|
|
||||||
background-color: $color_brightest;
|
|
||||||
> .span_solo {
|
|
||||||
color: $color_darkest;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.span_solo {
|
|
||||||
display: table-cell;
|
|
||||||
color: rgba($color_brightest, 0.8);
|
|
||||||
font-family: $family_text_mono;
|
|
||||||
font-size: 1.4em;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.expose_height {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
background-color: rgba($delta_color, 0.1) !important;
|
|
||||||
@include vendor-prefix(transition, height 0.5s ease);
|
|
||||||
}
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
.body_status {
|
|
||||||
@extend .sec_main_status;
|
|
||||||
height: 100vh;
|
|
||||||
border-color: $foxtrot_color;
|
|
||||||
|
|
||||||
.main_site {
|
|
||||||
@extend .wrap_center;
|
|
||||||
& > h1:first-of-type {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
& > h1 + h3 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: $space_small;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
.nomedia {
|
|
||||||
@extend .box_placeholder;
|
|
||||||
height: inherit;
|
|
||||||
}
|
|
||||||
|
|
@ -1,171 +0,0 @@
|
||||||
nav {
|
|
||||||
|
|
||||||
ul {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: $space_basic;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav_horizontal {
|
|
||||||
ul {
|
|
||||||
@extend .overflow;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin: $space_basic 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
@extend .float_space_left;
|
|
||||||
margin-right: $space_basic;
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav_right {
|
|
||||||
float: right;
|
|
||||||
margin-left: $space_basic;
|
|
||||||
|
|
||||||
.align_parent {
|
|
||||||
margin-right: $space_basic * -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav_separate {
|
|
||||||
li {
|
|
||||||
position: relative;
|
|
||||||
padding-left: $space_tiny;
|
|
||||||
|
|
||||||
&:not(:first-child) {
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: $space_tiny;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
background-color: $color_border_basic;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav_separate_right {
|
|
||||||
float: right;
|
|
||||||
li {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
padding-left: $space_basic * 2 + $space_tiny;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: $space_tiny;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
background-color: $color_front_basic;
|
|
||||||
margin: 0 $space_basic;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav_center_old {
|
|
||||||
@extend .nav_horizontal;
|
|
||||||
float: right;
|
|
||||||
position: relative;
|
|
||||||
left: -50%;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
position: relative;
|
|
||||||
left: 50%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav_column {
|
|
||||||
position: relative;
|
|
||||||
margin: $space_basic 0;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
@extend .flex;
|
|
||||||
margin: 0 $space_large;
|
|
||||||
|
|
||||||
li {
|
|
||||||
@extend .flex_child;
|
|
||||||
flex-grow: 1;
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav_page_meta {
|
|
||||||
position: fixed;
|
|
||||||
// display: table;
|
|
||||||
// width: 3em;
|
|
||||||
right: $space_half;
|
|
||||||
bottom: $space_double;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin: $space_basic 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: 0;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
width: 32px;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
.a_button_meta {
|
|
||||||
// display: table-cell;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color_action_basic;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sprite_img {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header_page {
|
|
||||||
|
|
||||||
nav {
|
|
||||||
@extend .nav_horizontal;
|
|
||||||
|
|
||||||
a {
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba($color_text_basic, 0.2);
|
|
||||||
color: $color_text_basic;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,128 +0,0 @@
|
||||||
// Custom extends and mixins
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
@import "mixins";
|
|
||||||
@import "extends";
|
|
||||||
|
|
||||||
// Print module styles
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
%paper {
|
|
||||||
background-color: $color_front_basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
|
|
||||||
$a5: ".dina5" 0 0 0 1.2cm;
|
|
||||||
$a6: ".dina6" 0 0 0 1.2cm;
|
|
||||||
|
|
||||||
$din: $a4, $a5, $a6;
|
|
||||||
|
|
||||||
.print_body {
|
|
||||||
font-size: $size_text_print;
|
|
||||||
margin: 10vh 20vw;
|
|
||||||
|
|
||||||
@page {
|
|
||||||
size: A4;
|
|
||||||
margin: 1.2cm;
|
|
||||||
}
|
|
||||||
|
|
||||||
@page:first {
|
|
||||||
size: A4;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $space in $din {
|
|
||||||
#{nth($space, 1)} {
|
|
||||||
padding-top: nth($space, 2);
|
|
||||||
padding-right: nth($space, 3);
|
|
||||||
padding-bottom: nth($space, 4);
|
|
||||||
padding-left: nth($space, 5);
|
|
||||||
|
|
||||||
.page_head, .page_foot {
|
|
||||||
right: nth($space, 3);
|
|
||||||
left: nth($space, 5);
|
|
||||||
}
|
|
||||||
.page_head {
|
|
||||||
top: nth($space, 2);
|
|
||||||
}
|
|
||||||
.page_foot {
|
|
||||||
bottom: nth($space, 4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
*[class^="din"] {
|
|
||||||
@extend %paper;
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
p {
|
|
||||||
@extend %basic_print;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page_head, .page_foot {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page_head {
|
|
||||||
page: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page_foot {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
*:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
margin: 0;
|
|
||||||
font-size: 8pt;
|
|
||||||
line-height: 10pt;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page_no {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
font-size: 20pt;
|
|
||||||
line-height: 1;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
p:first-child {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.page_content {
|
|
||||||
margin-top: 10cm;
|
|
||||||
margin-bottom: 2cm;
|
|
||||||
}
|
|
||||||
margin: $space_small auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page_title, .page_date {
|
|
||||||
font-size: 14pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page_title {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page_date, .page_no {
|
|
||||||
@extend %head_1;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page_author {
|
|
||||||
position: absolute;
|
|
||||||
top: 5cm;
|
|
||||||
right: 0;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page_recipient {
|
|
||||||
position: absolute;
|
|
||||||
top: 5cm;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
.table_link {
|
|
||||||
width: 100%;
|
|
||||||
border: 0;
|
|
||||||
table-layout: auto;
|
|
||||||
|
|
||||||
tbody {
|
|
||||||
border-bottom: $border_basic;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color_bright;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell_icon {
|
|
||||||
width: 48px;
|
|
||||||
text-align: center;
|
|
||||||
img {
|
|
||||||
vertical-align: text-top;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell_link {
|
|
||||||
padding-right: $space_basic;
|
|
||||||
padding-left: $space_basic;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $foxtrot_color;
|
|
||||||
a:first-child {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
a:last-child {
|
|
||||||
display: block;
|
|
||||||
color: $color_highlight_basic;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:last-child {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
th:last-child, .cell_date {
|
|
||||||
width: 16%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell_text {
|
|
||||||
padding-right: $space_basic;
|
|
||||||
padding-left: $space_basic;
|
|
||||||
|
|
||||||
div {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shorten {
|
|
||||||
@extend %short;
|
|
||||||
max-height: 44px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue