interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

Mainly work on interactive elements

Browse source
This commit is contained in:
Stephan Hagedorn 2017-09-01 00:16:21 +02:00
parent 483d9b0bd8
commit e8ab9a51d7
7 changed files with 250 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

37
demo-index.html
View file

@ -33,14 +33,14 @@
<div id="begin" class="demo__intro"> <div id="begin" class="demo__intro">
Dies ist einfach nur Text.<br/>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen. Dies ist einfach nur Text.<br>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
<p>Es wirken nur die Eigenschaften des <code>&lt;body&gt;</code> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.</p> <p>Es wirken nur die Eigenschaften des <code>&lt;body&gt;</code> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.</p>
<h1>Bereiche</h1> <h1>Bereiche</h1>
<article> <article>
<section> <section>
<p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <code>&lt;article&gt;</code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p> <p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <code>&lt;article&gt;</code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p>
<p>Noch allgemeiner ist das <code>&lt;section&gt;</code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p> <p>Noch allgemeiner ist das <code>&lt;section&gt;</code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p>
<p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br/>Folgende Bereiche sind vorgegeben:</p> <p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br>Folgende Bereiche sind vorgegeben:</p>
</section> </section>
<!-- <div class="overflow"> --> <!-- <div class="overflow"> -->
<aside class="left"> <aside class="left">
@ -71,7 +71,7 @@
<p>Schließlich eine Überschrift in der Größe des Fließtextes. Allerdings in fett.</p> <p>Schließlich eine Überschrift in der Größe des Fließtextes. Allerdings in fett.</p>
<h1>Gruppierung</h1> <h1>Gruppierung</h1>
<p>Ein Absatz <code>&lt;p&gt;</code>. Zugegeben ein kurzer.</p> <p>Ein Absatz <code>&lt;p&gt;</code>. Zugegeben ein kurzer.</p>
<p>Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder unterhaltsamen Charakter.<br/>Einfache Zeilenumbrüche werden darin mit <code>&lt;br&gt;</code> erreicht.</p> <p>Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder unterhaltsamen Charakter.<br>Einfache Zeilenumbrüche werden darin mit <code>&lt;br&gt;</code> erreicht.</p>
<p>Die Unterteilung in Absätze ist eine von vielen Möglichkeiten Texte zu gruppieren und ihnen Struktur zu verleihen. In diesem Dokument flattert Text normalerweise von Links daher. Er ist schwarz und in einer serifenlosen Schrift gesetzt. Zu weiteren Formatierungen, die eher auf einer Ebene der Zeichen einzuordnen ist, wird im Verlauf näher eingegangen. Zunächst die Struktur:</p> <p>Die Unterteilung in Absätze ist eine von vielen Möglichkeiten Texte zu gruppieren und ihnen Struktur zu verleihen. In diesem Dokument flattert Text normalerweise von Links daher. Er ist schwarz und in einer serifenlosen Schrift gesetzt. Zu weiteren Formatierungen, die eher auf einer Ebene der Zeichen einzuordnen ist, wird im Verlauf näher eingegangen. Zunächst die Struktur:</p>
<p class="txt_center js_pop">Text sitzt gerne auch mal zentriert.</p><div class="exp_pop"><code class="code__solo">p.txt_center</code></div> <p class="txt_center js_pop">Text sitzt gerne auch mal zentriert.</p><div class="exp_pop"><code class="code__solo">p.txt_center</code></div>
<p class="txt_right js_pop">Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.</p><div class="exp_pop"><code class="code__solo">p.txt_right</code></div> <p class="txt_right js_pop">Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.</p><div class="exp_pop"><code class="code__solo">p.txt_right</code></div>
@ -85,9 +85,9 @@
<hr class="hr__dotted center_25 js_pop"/><div class="exp_pop"><code class="code__solo">hr.hr__dotted.center_25</code></div> <hr class="hr__dotted center_25 js_pop"/><div class="exp_pop"><code class="code__solo">hr.hr__dotted.center_25</code></div>
<p class="p__column_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code__solo">p.p__column_2</code></div> <p class="p__column_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code__solo">p.p__column_2</code></div>
<p class="p__column_3 p__column_line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p><div class="exp_pop"><code class="code__solo">p.p__column_3.p__column_line</code></div> <p class="p__column_3 p__column_line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p><div class="exp_pop"><code class="code__solo">p.p__column_3.p__column_line</code></div>
<p class="p__column_3 p__column_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br/>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.</p> <p class="p__column_3 p__column_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.</p>
<p>Es gibt die Möglichkeit vorformatierten Text darzustellen <code>&lt;pre&gt;</code>.</p> <p>Es gibt die Möglichkeit vorformatierten Text darzustellen <code>&lt;pre&gt;</code>.</p>
<pre>Dadurch<br/> bleiben<br/> Einrückungen<br/> durch<br/> Tabulatoren<br/> erhalten.</pre> <pre>Dadurch<br> bleiben<br> Einrückungen<br> durch<br> Tabulatoren<br> erhalten.</pre>
<p>Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete <code>&lt;ul&gt;</code> und geordnete Listen <code>&lt;ol&gt;</code> sowie Beschreibungslisten <code>&lt;dl&gt;</code>. Die beiden ersten Varianten beinhalten das Listenelement <code>&lt;li&gt;</code>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck <code>&lt;dt&gt;</code> und Beschreibung <code>&lt;dd&gt;</code>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:</p> <p>Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete <code>&lt;ul&gt;</code> und geordnete Listen <code>&lt;ol&gt;</code> sowie Beschreibungslisten <code>&lt;dl&gt;</code>. Die beiden ersten Varianten beinhalten das Listenelement <code>&lt;li&gt;</code>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck <code>&lt;dt&gt;</code> und Beschreibung <code>&lt;dd&gt;</code>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:</p>
<ul> <ul>
<li>Ungeordnete</li> <li>Ungeordnete</li>
@ -147,7 +147,7 @@
<div class="exp_pop"><code class="code__solo">blockquote.quote__mark>p+p.quote__source</code></div> <div class="exp_pop"><code class="code__solo">blockquote.quote__mark>p+p.quote__source</code></div>
<p>Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit <code>&lt;cite&gt;</code> ausgezeichnet werden. <cite>Pulp Fiction</cite>, super Film - zum Beispiel.</p> <p>Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit <code>&lt;cite&gt;</code> ausgezeichnet werden. <cite>Pulp Fiction</cite>, super Film - zum Beispiel.</p>
<p>Auch die Auszeichnung <code>&lt;code&gt;</code> wurde bis hier hin schon verwendet. Sie markiert Maschinensprache. Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element <code>&lt;pre&gt;</code> verwendet:</p> <p>Auch die Auszeichnung <code>&lt;code&gt;</code> wurde bis hier hin schon verwendet. Sie markiert Maschinensprache. Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element <code>&lt;pre&gt;</code> verwendet:</p>
<pre class="pre__code"><code>&lt;html&gt;<br/> &lt;head&gt;<br/> &lt;title&gt;Hyper Text Markup Language&lt;/title&gt;<br/> &lt;/head&gt;<br/> &lt;body id="root"&gt;<br/> &lt;!-- Content goes here --&gt;<br/> &lt;p class="example"&gt;Just like this.&lt;/p&gt;<br/> &lt;/body&gt;<br/>&lt;/html&gt;</code></pre> <pre class="pre__code"><code>&lt;html&gt;<br> &lt;head&gt;<br> &lt;title&gt;Hyper Text Markup Language&lt;/title&gt;<br> &lt;/head&gt;<br> &lt;body id="root"&gt;<br> &lt;!-- Content goes here --&gt;<br> &lt;p class="example"&gt;Just like this.&lt;/p&gt;<br> &lt;/body&gt;<br>&lt;/html&gt;</code></pre>
<p>Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.</p> <p>Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.</p>
<p>Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden. Dies stellt sich wie folgt dar:</p> <p>Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden. Dies stellt sich wie folgt dar:</p>
<p class="txt_center">Bei<mark class="mark__cursor">spiel zum mark</mark>ieren ^^.</p> <p class="txt_center">Bei<mark class="mark__cursor">spiel zum mark</mark>ieren ^^.</p>
@ -344,11 +344,18 @@
<p>Grundlegend ist das Element <code>&lt;input&gt;</code>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.</p> <p>Grundlegend ist das Element <code>&lt;input&gt;</code>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.</p>
<p><input value="Undefiniert"/></p> <p><input value="Undefiniert"/></p>
<p>Ein spezieller Typ des Eingabefeldes verändert seine Funktion zu einer Schaltfläche <code>&lt;input[type="button"]&gt;</code>. Es gibt allerdings auch ein eigenes Element <code>&lt;button&gt;</code> dafür. <p>Ein spezieller Typ des Eingabefeldes verändert seine Funktion zu einer Schaltfläche <code>&lt;input[type="button"]&gt;</code>. Es gibt allerdings auch ein eigenes Element <code>&lt;button&gt;</code> dafür.
<p><input type="button" value="Input Button" class="space_right"><button>Button</button></p> <p><input type="button" value="Input Button"><button>Button</button></p>
<p>Interaktive Elemente können durch das Attribut <code>&lt;readonly&gt;</code> nur lesbar gemacht werden oder mittels <code>&lt;disabled&gt;</code> gänzlich deaktiviert werden.</p> <p>Interaktive Elemente können durch das Attribut <code>&lt;readonly&gt;</code> nur lesbar gemacht werden oder mittels <code>&lt;disabled&gt;</code> gänzlich deaktiviert werden.</p>
<p><input type="text" value="Read Only Text" readonly class="space_right"><input type="text" value="Disabled Text" disabled class="space_right"><button disabled>Button</button></p> <p><input type="text" value="Read Only Text" readonly><input type="text" value="Disabled Text" disabled><button disabled>Button</button></p>
<p>Das Element <code>&lt;label&gt;</code> ergänzt interaktive Elemente um eine Beschriftung.</p> <p>Das Element <code>&lt;label&gt;</code> ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente zu einander deutlich ist.</p>
<label for="demo__input">Beschriftung:</label><input type="text" id="demo__input"> <div class="box__column_old">
<div class="column_old">
<label for="demo__input">Beschriftung:</label><input type="text" id="demo__input">
</div>
<div class="column_old">
<input type="text" id="demo__input" class="input__label_right"><label for="demo__input">Beschriftung</label>
</div>
</div>
<p>Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese werden mit <code>&lt;fieldset&gt;</code> realisiert.</p> <p>Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese werden mit <code>&lt;fieldset&gt;</code> realisiert.</p>
<fieldset> <fieldset>
<label for="demo__output">Beschriftung:</label><input type="text" readonly id="demo__output"> <label for="demo__output">Beschriftung:</label><input type="text" readonly id="demo__output">
@ -356,16 +363,16 @@
<p>Sie können mittels <code>&lt;legend&gt;</code> auch eine eigene Beschriftung erhalten.</p> <p>Sie können mittels <code>&lt;legend&gt;</code> auch eine eigene Beschriftung erhalten.</p>
<fieldset> <fieldset>
<legend>Einfache Eingabefelder</legend> <legend>Einfache Eingabefelder</legend>
<label>Texteingabe<input type="text" placeholder="Text"/></label> <label>Texteingabe<input type="text" placeholder="Text"></label>
<label>Schaltfläche<input type="button" value="Senden"/></label> <label>Schaltfläche<input type="button" value="Senden"></label>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Weitere Zeicheneingabefelder</legend> <legend>Weitere Zeicheneingabefelder</legend>
<p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen Information oder lockern das Erscheinungsbild auf. Hier nun eine Liste aller möglichen Arten von Eingabefeldern.</p> <p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen Information oder lockern das Erscheinungsbild auf. Hier nun eine Liste aller möglichen Arten von Eingabefeldern.</p>
<pre class="pre__code"><code>ul>(li>label>input[type="text"])</code></pre> <pre class="pre__code"><code>ul>(li>label>input[type="text"])</code></pre>
</fieldset> </fieldset>
<label>Einfache Datumseingabe<input type="date"/></label> <label>Einfache Datumseingabe<input type="date"></label>
<label>Einfache Zahleneingabe<input type="number"/></label> <label>Einfache Zahleneingabe<input type="number"></label>
<input type="checkbox"/> <input type="checkbox"/>
<input type="color"/> <input type="color"/>
<input type="datetime"/> <input type="datetime"/>
@ -481,7 +488,7 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
</div> </div>
<pre class="pre__code x_long"><code>header.header__page>h1+p+nav.nav__separate_right>ul>(li>a.a__button{Nav $})*4^+nav.nav__right>ul>(li>a.a__button{Nav $})*4</code></pre> <pre class="pre__code x_long"><code>header.header__page>h1+p+nav.nav__separate_right>ul>(li>a.a__button{Nav $})*4^+nav.nav__right>ul>(li>a.a__button{Nav $})*4</code></pre>
<header class="header__page demo__header header__fancy"> <header class="header__page demo__header header__fancy">
<h1>Fancy Pants</h1> <h1>Aufmacher</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
<nav class="nav__separate_right"> <nav class="nav__separate_right">
<ul> <ul>

9
elements/_grouping.scss
View file

@ -251,6 +251,15 @@ div {
} }
// Flex // Flex
.box__column_old {
overflow: auto;
.column_old {
float: left;
width: 50%;
}
}
.box__column { .box__column {
@extend .flex; @extend .flex;

76
elements/_interactive.scss
View file

@ -20,24 +20,72 @@ legend {
// Common // Common
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
input, button, textarea {
margin: $io_margin;
&[disabled="disabled"],
&[disabled] {
cursor: not-allowed;
}
}
label { label {
@extend %basic; @extend %basic;
& + input {
margin-left: $basic_space;
}
input + & {
margin-left: $basic_space;
}
input { input {
margin-left: $basic_space; margin-left: $basic_space;
} }
} }
input { input {
color: $basic_io_font_color;
&[disabled="disabled"],
&[disabled] {
cursor: not-allowed;
}
}
@each $input in $basic_input_list, textarea {
#{$input} {
@extend %basic_mono;
border: $basic_io_border;
padding: $half_space;
background-color: $basic_io_back_color;
&:hover {
background-color: $basic_highlight_color;
}
&[readonly="readonly"],
&[readonly] {
border-color: darken($basic_io_border_color, 30%);
background-color: darken($basic_io_back_color, 30%);
}
&[disabled="disabled"],
&[disabled] {
border-color: transparent;
}
}
}
@each $input in $basic_input_list {
#{$input} {
line-height: 1;
}
}
@each $input in $basic_button_list {
#{$input} {
padding: $basic_padding;
}
}
label + input,
.input__label_right {
margin: 0 $basic_space;
} }
.label__table { .label__table {
@ -48,7 +96,9 @@ input {
} }
} }
.input_default {
.input__default {
label { label {
@extend .label__table; @extend .label__table;
@ -74,6 +124,10 @@ input {
// More // More
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
textarea {
}
button { button {
} }
@ -94,10 +148,6 @@ option {
} }
textarea {
}
output { output {
} }

4
elements/_tables.scss
View file

@ -59,7 +59,7 @@ tfoot {
} }
tr:nth-child(even) td { tr:nth-child(even) td {
background-color: $bright_color; background-color: rgba($brightest_color, .1);
} }
} }
@ -70,7 +70,7 @@ tfoot {
caption { caption {
@extend p; @extend p;
padding: $half_space 0; padding: $half_space 0;
border: $basic_border_width dotted $basic_border_color; border: $dotted_border;
text-align: center; text-align: center;
} }

126
example.css
View file

@ -162,8 +162,7 @@ textarea:not([disabled]):focus {
pointer-events: none; } pointer-events: none; }
.flex, .flex__wrap, .flex__row, .box__column, .nav__column ul { .flex, .flex__wrap, .flex__row, .box__column, .nav__column ul {
display: flex; display: flex; }
background-color: rgba(250, 216, 3, 0.1); }
.flex__wrap { .flex__wrap {
flex-wrap: wrap; } flex-wrap: wrap; }
@ -199,7 +198,7 @@ textarea:not([disabled]):focus {
font-size: 1em; font-size: 1em;
line-height: 1.5; } line-height: 1.5; }
pre, code, .code__solo { pre, code, .code__solo, input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea {
font-family: Courier New, monospace; font-family: Courier New, monospace;
font-size: 1em; font-size: 1em;
line-height: 1.5; } line-height: 1.5; }
@ -449,6 +448,12 @@ figure {
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='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat; 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='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
background-color: rgba(0, 0, 0, 0.1); } background-color: rgba(0, 0, 0, 0.1); }
.box__column_old {
overflow: auto; }
.box__column_old .column_old {
float: left;
width: 50%; }
.box__column .column { .box__column .column {
flex-grow: 1; } flex-grow: 1; }
@ -556,7 +561,7 @@ tfoot tr:first-child td {
border-top: 0; border-top: 0;
border-bottom: 0; } border-bottom: 0; }
.table__stripe tr:nth-child(even) td { .table__stripe tr:nth-child(even) td {
background-color: #cccccc; } background-color: rgba(255, 255, 255, 0.1); }
.table__fix { .table__fix {
table-layout: fixed; } table-layout: fixed; }
@ -574,27 +579,118 @@ fieldset {
legend { legend {
padding: 0 4px; } padding: 0 4px; }
label + input { input, button, textarea {
margin-left: 8px; } margin: 0 32px; }
input + label { input[disabled="disabled"], input[disabled], button[disabled="disabled"], button[disabled], textarea[disabled="disabled"], textarea[disabled] {
margin-left: 8px; } cursor: not-allowed; }
label input { label input {
margin-left: 8px; } margin-left: 8px; }
.label__table, .input_default label { input {
color: #1a1a1a; }
input[disabled="disabled"], input[disabled] {
cursor: not-allowed; }
input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
border: 2px solid white;
padding: 4px;
background-color: #e6e6e6; }
input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover, input:not([type]):hover {
background-color: white; }
input[type="color"][readonly="readonly"], input[type="color"][readonly], input[type="date"][readonly="readonly"], input[type="date"][readonly], input[type="datetime"][readonly="readonly"], input[type="datetime"][readonly], input[type="datetime-local"][readonly="readonly"], input[type="datetime-local"][readonly], input[type="email"][readonly="readonly"], input[type="email"][readonly], input[type="month"][readonly="readonly"], input[type="month"][readonly], input[type="number"][readonly="readonly"], input[type="number"][readonly], input[type="password"][readonly="readonly"], input[type="password"][readonly], input[type="search"][readonly="readonly"], input[type="search"][readonly], input[type="tel"][readonly="readonly"], input[type="tel"][readonly], input[type="text"][readonly="readonly"], input[type="text"][readonly], input[type="time"][readonly="readonly"], input[type="time"][readonly], input[type="url"][readonly="readonly"], input[type="url"][readonly], input[type="week"][readonly="readonly"], input[type="week"][readonly], input:not([type])[readonly="readonly"], input:not([type])[readonly] {
border-color: #b3b3b3;
background-color: #999999; }
input[type="color"][disabled="disabled"], input[type="color"][disabled], input[type="date"][disabled="disabled"], input[type="date"][disabled], input[type="datetime"][disabled="disabled"], input[type="datetime"][disabled], input[type="datetime-local"][disabled="disabled"], input[type="datetime-local"][disabled], input[type="email"][disabled="disabled"], input[type="email"][disabled], input[type="month"][disabled="disabled"], input[type="month"][disabled], input[type="number"][disabled="disabled"], input[type="number"][disabled], input[type="password"][disabled="disabled"], input[type="password"][disabled], input[type="search"][disabled="disabled"], input[type="search"][disabled], input[type="tel"][disabled="disabled"], input[type="tel"][disabled], input[type="text"][disabled="disabled"], input[type="text"][disabled], input[type="time"][disabled="disabled"], input[type="time"][disabled], input[type="url"][disabled="disabled"], input[type="url"][disabled], input[type="week"][disabled="disabled"], input[type="week"][disabled], input:not([type])[disabled="disabled"], input:not([type])[disabled] {
border-color: transparent; }
textarea {
border: 2px solid white;
padding: 4px;
background-color: #e6e6e6; }
textarea:hover {
background-color: white; }
textarea[readonly="readonly"], textarea[readonly] {
border-color: #b3b3b3;
background-color: #999999; }
textarea[disabled="disabled"], textarea[disabled] {
border-color: transparent; }
input[type="color"] {
line-height: 1; }
input[type="date"] {
line-height: 1; }
input[type="datetime"] {
line-height: 1; }
input[type="datetime-local"] {
line-height: 1; }
input[type="email"] {
line-height: 1; }
input[type="month"] {
line-height: 1; }
input[type="number"] {
line-height: 1; }
input[type="password"] {
line-height: 1; }
input[type="search"] {
line-height: 1; }
input[type="tel"] {
line-height: 1; }
input[type="text"] {
line-height: 1; }
input[type="time"] {
line-height: 1; }
input[type="url"] {
line-height: 1; }
input[type="week"] {
line-height: 1; }
input:not([type]) {
line-height: 1; }
button {
padding: calc(8px - 3px) 8px; }
input[type="button"] {
padding: calc(8px - 3px) 8px; }
input[type="reset"] {
padding: calc(8px - 3px) 8px; }
input[type="submit"] {
padding: calc(8px - 3px) 8px; }
label + input,
.input__label_right {
margin: 0 8px; }
.label__table, .input__default label {
display: table; } display: table; }
.label__table input, .input_default label input { .label__table input, .input__default label input {
display: table-cell; } display: table-cell; }
.input_default label { .input__default label {
margin: 4px 0; } margin: 4px 0; }
.input_default label input { .input__default label input {
padding: 4px 5px; padding: 4px 5px;
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
background-color: #404040; background-color: #e6e6e6;
color: #e6e6e6; } color: #1a1a1a; }
.input_default label input:hover { .input__default label input:hover {
background-color: black; background-color: black;
color: white; } color: white; }

73
global/_config.scss
View file

@ -105,12 +105,12 @@ $basic_border_color: $basic_front_color !default;
// default shadow colors // default shadow colors
// $shadow_color: fade-out($medium_color, .5); // $shadow_color: fade-out($medium_color, .5);
$basic_color_map: (); $basic_color_list: ();
@each $key, $value in $color_palette { @each $key, $value in $color_palette {
$map: (); $map: ();
$map: map-merge($map, ($key: createColorMap($value, 15%, .5)) ); $map: map-merge($map, ($key: createColorMap($value, 15%, .5)) );
$basic_color_map: map-merge($basic_color_map, $map); $basic_color_list: map-merge($basic_color_list, $map);
} }
@ -139,6 +139,7 @@ $space_5: $basic_space * 16;
$basic_margin: $basic_space 0 !default; $basic_margin: $basic_space 0 !default;
$high_margin: $double_space 0 !default; $high_margin: $double_space 0 !default;
$io_margin: 0 $space_3 !default;
$basic_padding: calc(#{$basic_space} - 3px) $basic_space !default; $basic_padding: calc(#{$basic_space} - 3px) $basic_space !default;
$wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2) !default; $wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2) !default;
@ -149,6 +150,7 @@ $basic_border_width: $tiny_space !default;
$border_width_4: $tiny_space * 4; $border_width_4: $tiny_space * 4;
$border_width_8: $tiny_space * 8; $border_width_8: $tiny_space * 8;
$basic_border: $tiny_space solid $basic_border_color; $basic_border: $tiny_space solid $basic_border_color;
$dotted_border: $tiny_space dotted $basic_border_color;
$cell_border: $tiny_space solid $darkest_color; $cell_border: $tiny_space solid $darkest_color;
$basic_aside_width: 20%; $basic_aside_width: 20%;
@ -157,38 +159,47 @@ $basic_aside_width: 20%;
// IO // IO
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$basic_text_input_map: 'input[type="color"]', $basic_input_list:
'input[type="date"]', 'input[type="color"]',
'input[type="datetime"]', 'input[type="date"]',
'input[type="datetime-local"]', 'input[type="datetime"]',
'input[type="email"]', 'input[type="datetime-local"]',
'input[type="month"]', 'input[type="email"]',
'input[type="number"]', 'input[type="month"]',
'input[type="password"]', 'input[type="number"]',
'input[type="search"]', 'input[type="password"]',
'input[type="tel"]', 'input[type="search"]',
'input[type="text"]', 'input[type="tel"]',
'input[type="time"]', 'input[type="text"]',
'input[type="url"]', 'input[type="time"]',
'input[type="week"]', 'input[type="url"]',
'input:not([type])', 'input[type="week"]',
'textarea'; 'input:not([type])';
$basic_button_map: 'button', $basic_button_list:
'input[type="button"]', 'button',
'input[type="reset"]', 'input[type="button"]',
'input[type="submit"]'; // 'input[type="file"]',
'input[type="reset"]',
'input[type="submit"]';
$basic_focus_map: 'a[href]', $basic_focus_list:
'area[href]', 'a[href]',
'button:not([disabled])', 'area[href]',
'input:not([disabled])', 'button:not([disabled])',
'select:not([disabled])', 'input:not([disabled])',
'textarea:not([disabled])', 'select:not([disabled])',
'*[tabindex]'; 'textarea:not([disabled])',
'*[tabindex]';
$basic_io_font_color: lighten($basic_font_color, 10%);
$basic_io_back_color: darken($brightest_color, 10%);
$basic_io_border_color: $brightest_color;
$basic_io_border_width: $tiny_space * 2 !default;
$basic_io_border: $basic_io_border_width solid $basic_io_border_color;
$dotted_io_border: $tiny_space dotted $basic_io_border_color;
$basic_io_font_color: darken($brightest_color, 10%);
$basic_io_back_color: lighten($darkest_color, 25%);
$basic_shadow: inset 0 1px 3px rgba($darkest_color, 0.06); $basic_shadow: inset 0 1px 3px rgba($darkest_color, 0.06);
$basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3); $basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3);

2
mixins/_user_agent.scss
View file

@ -1,6 +1,6 @@
@mixin overrideUserAgent() { @mixin overrideUserAgent() {
@if $no_agent_focus == true { @if $no_agent_focus == true {
@each $el in $basic_focus_map { @each $el in $basic_focus_list {
#{$el}:focus { #{$el}:focus {
outline: 0; outline: 0;
} }