General push forward with more content (interactive elements)
- added list for deprecated packages - removed deprecated node packages - reactivated gulp vendor task - work on intro page - redefined interactive styles - better variables in config
This commit is contained in:
Stephan
parent
8b81ed92e1
commit
c391799d02
20 changed files with 4134 additions and 5147 deletions
10
DEPRECATED.md
Normal file
10
DEPRECATED.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
# Deprecated stuff
|
||||
|
||||
## Packages
|
||||
|
||||
"gulp-ruby-sass": "^2.1.1",
|
||||
"gulp-cssnano": "^2.1.3",
|
||||
"gulp-rename": "^1.2.3",
|
||||
"gulp-changed": "^3.2.0",
|
||||
"gulp-newer": "^1.4.0",
|
||||
"gulp-useref": "^3.1.5",
|
||||
11
gulpfile.js
11
gulpfile.js
|
|
@ -139,6 +139,13 @@ gulp.task('sprites', function() {
|
|||
.pipe(gulpif('*.scss', gulp.dest('source/style/hippie/modules/media')));
|
||||
});
|
||||
|
||||
// copy vendor files
|
||||
gulp.task('vendor', function() {
|
||||
return gulp.src(source_folder.vendor)
|
||||
.pipe(plumbError())
|
||||
.pipe(gulp.dest(build_folder.vendor))
|
||||
;
|
||||
});
|
||||
|
||||
// linting ...
|
||||
gulp.task('lint:js', function() {
|
||||
|
|
@ -196,7 +203,7 @@ gulp.task('overwatch', function() {
|
|||
gulp.task('default', function(callback) {
|
||||
sequencer(
|
||||
'clean:dev',
|
||||
['sprites', 'lint:js', 'lint:scss'],
|
||||
['sprites', 'vendor', 'lint:js', 'lint:scss'],
|
||||
['sass', 'js', 'nunjucks'],
|
||||
['syncreload', 'overwatch'],
|
||||
callback
|
||||
|
|
@ -294,7 +301,7 @@ gulp.task('images', function() {
|
|||
});
|
||||
|
||||
// Task - Vendor
|
||||
gulp.task('vendor', function() {
|
||||
gulp.task('oldvendor', function() {
|
||||
return gulp.src(oldsource.vendor)
|
||||
.pipe(plumbError())
|
||||
.pipe(gulp.dest(oldbuild.vendor))
|
||||
|
|
|
|||
8327
package-lock.json
generated
8327
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -22,25 +22,19 @@
|
|||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^4.1.0",
|
||||
"gulp-cached": "^1.1.1",
|
||||
"gulp-changed": "^3.2.0",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-cssnano": "^2.1.3",
|
||||
"gulp-data": "^1.3.1",
|
||||
"gulp-if": "^2.0.2",
|
||||
"gulp-jscs": "^4.1.0",
|
||||
"gulp-jshint": "^2.1.0",
|
||||
"gulp-newer": "^1.4.0",
|
||||
"gulp-notify": "^3.2.0",
|
||||
"gulp-nunjucks-render": "^2.2.2",
|
||||
"gulp-plumber": "^1.2.0",
|
||||
"gulp-remember": "^0.3.1",
|
||||
"gulp-rename": "^1.2.3",
|
||||
"gulp-ruby-sass": "^2.1.1",
|
||||
"gulp-sass": "^4.0.1",
|
||||
"gulp-sass-lint": "^1.4.0",
|
||||
"gulp-sourcemaps": "^2.6.4",
|
||||
"gulp-uglify": "^3.0.0",
|
||||
"gulp-useref": "^3.1.5",
|
||||
"gulp.spritesmith": "^6.9.0",
|
||||
"jshint": "^2.9.5",
|
||||
"jshint-stylish": "^2.2.1",
|
||||
|
|
|
|||
|
|
@ -153,6 +153,31 @@
|
|||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
||||
<div class="flex_column"><input type="submit" value="Senden" disabled/></div>
|
||||
</div>
|
||||
<form action="" method="get">
|
||||
<p class="label">
|
||||
Show me a <select name="F">
|
||||
<option value="0"> Plain list</option>
|
||||
<option value="1" selected="selected"> Fancy list</option>
|
||||
<option value="2"> Table list</option>
|
||||
</select>
|
||||
Sorted by <select name="C">
|
||||
<option value="N" selected="selected"> Name</option>
|
||||
<option value="M"> Date Modified</option>
|
||||
<option value="S"> Size</option>
|
||||
<option value="D"> Description</option>
|
||||
</select>
|
||||
<select name="O">
|
||||
<option value="A" selected="selected"> Ascending</option>
|
||||
<option value="D"> Descending</option>
|
||||
</select>
|
||||
<select name="V">
|
||||
<option value="0" selected="selected"> in Normal order</option>
|
||||
<option value="1"> in Version order</option>
|
||||
</select>
|
||||
Matching <input type="text" name="P" value="*" />
|
||||
<input type="submit" name="X" value="Go" />
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<h2>Gruppierung</h2>
|
||||
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@
|
|||
</article>
|
||||
<article>
|
||||
<h1>Tabellen</h1>
|
||||
<p>Tabellen bieten besonders geordnete Struktur. Häufig werden in ihnen Text und Daten kombiniert dargestellt. Dies erfordert individuelle Formatierungen. Einige grundlegende Eigenschaften werden im folgenden aufgezeigt. Tabellen sind in ihrer Größe entweder vordefiniert oder richten sich nach ihrem Inhalt. Das gilt auch für die einzelnen Zellen.<span class="wip_txt">...</span></p>
|
||||
<p>Tabellen bieten besonders geordnete Struktur. Häufig werden in ihnen Text und Daten kombiniert dargestellt. Dies erfordert individuelle Formatierungen. Einige grundlegende Eigenschaften werden im folgenden aufgezeigt. Tabellen sind in ihrer Größe entweder vordefiniert (fixiert) oder richten sich nach ihrem Inhalt. Das bedeutet, die Spaltenbreite entspricht der breitesten ihrer Zellen.</p>
|
||||
<table class="width_full js_pop">
|
||||
<tbody>
|
||||
<tr>
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
<tbody>
|
||||
<tr>
|
||||
<td>Eine</td>
|
||||
<td>fließende</td>
|
||||
<td>freie (nicht fixierte)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">Tabelle</td>
|
||||
|
|
@ -249,11 +249,11 @@
|
|||
</table>
|
||||
<div class="exp_pop"><code class="code_solo">table.width_full.table_fix>caption+thead>tr>th*3^^tfoot>tr>td*3^^tbody>(tr>td*3)*3</code></div>
|
||||
<hr class="hr_hidden">
|
||||
<p>Viele weitere Formate sind möglich <span class="wip_txt">...</span></p>
|
||||
<table class="width_full js_pop">
|
||||
<p>Viele weitere Formate sind möglich. Hier nur einige typische Beispiele:</p>
|
||||
<table class="width_full table_fix js_pop">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="precol"></th>
|
||||
<th class="cell_pre"></th>
|
||||
<th>Kopfzeile</th>
|
||||
<th>A</th>
|
||||
<th>B</th>
|
||||
|
|
@ -261,34 +261,27 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="precol">Vorspalte</td>
|
||||
<td class="cell_pre">Vorspalte</td>
|
||||
<td>Eine</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="precol">1</td>
|
||||
<td class="cell_pre">1</td>
|
||||
<td></td>
|
||||
<td>erweiterte</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="precol">2</td>
|
||||
<td class="cell_pre">2</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Tabelle</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="exp_pop"><code class="code_solo">table.width_full>thead>tr>th.precol+th[colspan=2]^^tbody>tr>td.precol+td*2^tr>td.precol+td[colspan=2]</code></div>
|
||||
<table class="width_full table_stripe table_free">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Kopfzeile</th>
|
||||
<th>A</th>
|
||||
<th>B</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<div class="exp_pop"><code class="code_solo">table.width_full.table_stripe.table_free>tbody>tr>td*3</code></div>
|
||||
<table class="width_full table_stripe table_fix table_free">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tabelle</td>
|
||||
|
|
@ -312,119 +305,169 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="table_fix">
|
||||
<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
|
||||
<table>
|
||||
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Kopfzeile</th>
|
||||
<th>1</th>
|
||||
<th>Bezeichnung</th>
|
||||
<th>Menge</th>
|
||||
<th>>9000</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Fußzeile</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>Summe</td>
|
||||
<td></td>
|
||||
<td>9001</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Alpha</td>
|
||||
<td>0</td>
|
||||
<td>9000</td>
|
||||
<td>1</td>
|
||||
<td>8990</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bravo</td>
|
||||
<td>10</td>
|
||||
<td>1</td>
|
||||
<td>9001</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charlie</td>
|
||||
<td>0</td>
|
||||
<td>9000</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</article>
|
||||
<article>
|
||||
<h1>Formulare</h1>
|
||||
<p>Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Werden sie nicht explizit gestaltet, ist ihre Erscheinung system- bzw. browserabhängig. <span class="wip_txt">(Vielleicht ist das auch scheiße, hier darauf einzugehen) ...</span> Üblicherweise stehen alle Formularelemente innerhalb eines <code><form></code> Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise keine gestalterische Funktion.</p>
|
||||
<p>Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Werden sie nicht explizit gestaltet, ist ihre Erscheinung system- bzw. browserabhängig.<br>Üblicherweise stehen alle Bedienelemente innerhalb eines <code><form></code> Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise keine gestalterische Funktion.</p>
|
||||
<p>Grundlegend ist das Element <code><input></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>Ein spezieller Typ des Eingabefeldes verändert seine Funktion zu einer Schaltfläche <code><input[type="button"]></code>. Es gibt allerdings auch ein eigenes Element <code><button></code> dafür.</p>
|
||||
<p><input value="Undefiniert"/><input class="io_input" value="Undefiniert mit Stil"/></p>
|
||||
<p>Ein spezieller Typ des Eingabefeldes hat die Funktion einer Schaltfläche <code><input[type="button"]></code>. Es gibt allerdings auch ein eigenes Element <code><button></code> dafür.</p>
|
||||
<p><input type="button" value="Input Button"><button>Button</button></p>
|
||||
<p><input class="io_button" type="button" value="Input Button"><button class="io_button">Button</button></p>
|
||||
<p>Interaktive Elemente können durch das Attribut <code><readonly></code> nur lesbar gemacht werden oder mittels <code><disabled></code> gänzlich deaktiviert werden.</p>
|
||||
<p><input type="text" value="Read Only Text" readonly><input type="text" value="Disabled Text" disabled><button disabled>Button</button></p>
|
||||
<p><input type="text" value="Nur lesbare Eingabe" readonly><input type="text" value="Deaktivierte Eingabe" size="21" disabled><button disabled>Deaktivierte Schaltfläche</button></p>
|
||||
<p><input class="io_input" type="text" value="Nur lesbare Eingabe" readonly><input class="io_input" type="text" value="Deaktivierte Eingabe" size="21" disabled><button class="io_button" disabled>Deaktivierte Schaltfläche</button></p>
|
||||
<p>Das Element <code><label></code> ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente zu einander deutlich ist.</p>
|
||||
<p>
|
||||
<label>Beschriftung:<input type="text"></label>
|
||||
</p>
|
||||
<div class="overflow">
|
||||
<div class="float_half_size">
|
||||
<label for="demo__input">Beschriftung:</label><input type="text" id="demo__input">
|
||||
</div>
|
||||
<div class="float_half_size txt_right">
|
||||
<input type="text" id="demo__input" class="input_label_right"><label for="demo__input">Beschriftung</label>
|
||||
<div class="float_left">
|
||||
<table class="table_fix table_blank">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><label for="demo__raw_a">Alpha:</label></td>
|
||||
<td><input type="text" id="demo__raw_a"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="demo__raw_b">Beta:</label></td>
|
||||
<td><input type="text" id="demo__raw_b"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table class="float_right">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_d" value="11.966504" size="10"></td>
|
||||
<td class="demo__td_pr"><label for="demo__io_a">x</label></td>
|
||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_a" value="10" min="0" max="1000"></td>
|
||||
<td class="demo__td_pr"><label for="demo__io_a">Breite</label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_e" value="51.503491" size="10"></td>
|
||||
<td class="demo__td_pr"><label for="demo__io_b">y</label></td>
|
||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_b" value="10" min="0" max="1000"></td>
|
||||
<td class="demo__td_pr"><label for="demo__io_b">Tiefe</label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_f" value="88" size="10"></td>
|
||||
<td class="demo__td_pr"><label for="demo__io_c">z</label></td>
|
||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_c" value="48" min="0" max="1000"></td>
|
||||
<td class="demo__td_pr"><label for="demo__io_c">Höhe</label></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p>Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese werden mit <code><fieldset></code> realisiert.</p>
|
||||
<fieldset>
|
||||
<label for="demo__output">Beschriftung:</label><input type="text" readonly id="demo__output">
|
||||
<div class="grid grid_column_2">
|
||||
<label for="demo__input">Input:</label><input class="io_input" type="text" value="love" readonly id="demo__input">
|
||||
<label for="demo__output">Output:</label><input class="io_input" type="text" value="happiness" readonly id="demo__output">
|
||||
</div>
|
||||
</fieldset>
|
||||
<p>Sie können mittels <code><legend></code> auch eine eigene Beschriftung erhalten.</p>
|
||||
<fieldset>
|
||||
<legend>Einfache Eingabefelder</legend>
|
||||
<label>Texteingabe<input type="text" placeholder="Text"></label>
|
||||
<label>Schaltfläche<input type="button" value="Senden"></label>
|
||||
<legend>Einfache Eingabeelemente</legend>
|
||||
<div class="grid grid_column_2">
|
||||
<label>Schaltflächen:</label><div><button>Senden</button><input type="reset" value="Abbrechen"></div>
|
||||
<label>Zeicheneingaben:</label><div><input type="text" placeholder="Text"><input type="number" value="0815"></div>
|
||||
<label>Einzelauswahl:</label><div><input type="radio" name="direction" value="up" checked="checked"/><input type="radio" name="direction" value="down"/></div>
|
||||
<label>Mehrfachauswahl:</label><div><input type="checkbox" name="speed" value="slow" checked="checked"/><input type="checkbox" name="speed" value="fast"/></div>
|
||||
<label>Auswahllisten:</label>
|
||||
<div>
|
||||
<select class="txt_top">
|
||||
<option value="A" selected="selected">Option A</option>
|
||||
<option value="B">Option B</option>
|
||||
</select>
|
||||
<select class="txt_top" size="3">
|
||||
<option value="red" selected="selected">Rot</option>
|
||||
<option value="green">Grün</option>
|
||||
<option value="blue">Blau</option>
|
||||
</select>
|
||||
</div>
|
||||
<label>Textfeld:</label>
|
||||
<textarea rows="3">Dies ist ein Eingabefeld für Fließtext. Es bildet auch Zeilenumbrüche ab und hat häufig variable Größen.</textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Einfache Eingabeelemente mit Stil</legend>
|
||||
<div class="grid grid_column_2">
|
||||
<label>Schaltflächen:</label><div><button class="io_button">Senden</button><input class="io_button" type="reset" value="Abbrechen"></div>
|
||||
<label>Zeicheneingaben:</label><div><input class="io_input" type="text" placeholder="Text"><input class="io_input" type="number" value="0815"></div>
|
||||
<label>Einzelauswahl:</label><div><input class="io_radio" type="radio" name="direction" value="up" checked="checked"/><input class="io_radio" type="radio" name="direction" value="down"/></div>
|
||||
<label>Mehrfachauswahl:</label><div><input class="io_check" type="checkbox" name="speed" value="slow" checked="checked"/><input class="io_check" type="checkbox" name="speed" value="fast"/></div>
|
||||
<label>Auswahllisten:</label>
|
||||
<div>
|
||||
<select class="io_select txt_top">
|
||||
<option value="A" selected="selected">Option A</option>
|
||||
<option value="B">Option B</option>
|
||||
</select>
|
||||
<select class="io_select txt_top" size="3">
|
||||
<option value="red" selected="selected">Rot</option>
|
||||
<option value="green">Grün</option>
|
||||
<option value="blue">Blau</option>
|
||||
</select>
|
||||
</div>
|
||||
<label>Textfeld:</label>
|
||||
<textarea class="io_textarea" rows="3">Dies ist ein Eingabefeld für Fließtext. Es bildet auch Zeilenumbrüche ab und hat häufig variable Größen.</textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Weitere Eingabemöglichkeiten</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 möglicher Arten von Eingabefeldern.</p>
|
||||
<pre class="pre_code"><code>ul>(li>label>input[type="text"])</code></pre>
|
||||
<ul class="list_basic">
|
||||
<li><label for="">Einfache Datumseingabe<input type="date"></label></li>
|
||||
<li><label for="">Einfache Zahleneingabe<input type="number"></label></li>
|
||||
<li><label for="">Einfache @dresseingabe<input type="email" placeholder="@"></label></li>
|
||||
<li><label for="">Einfache Farbauswahl<input type="color"></label></li>
|
||||
<li><label for="">Einfache Dateiauswahl<input type="file"></label></li>
|
||||
</ul>
|
||||
<div class="overflow">
|
||||
<aside class="left">
|
||||
<p>Dies ist ein Eingabefeld für Fließtext. Es bildet auch Zeilenumbrüche ab und hat häufig variable Größen.</p>
|
||||
</aside>
|
||||
<section class="bside">
|
||||
<label>Mehrzeilige Texteingabe</label>
|
||||
<textarea rows="10"></textarea>
|
||||
</section>
|
||||
<p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen Information oder lockern das Erscheinungsbild auf.</p>
|
||||
<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
|
||||
<div class="grid grid_column_2">
|
||||
<label for="" class="">Farbauswahl<br><code><input[type="color"]></code></label><div><input class="" type="color"></div>
|
||||
<label for="" class="">Bereichsauswahl<br><code><input[type="range"]></code></label><div><input class="" type="range"></div>
|
||||
<label for="" class="">Datum<br><code><input[type="date"]></code></label><div><input class="io_input" type="date"></div>
|
||||
<label for="" class="">Uhrzeit<br><code><input[type="time"]></code></label><div><input class="io_input" type="time"></div>
|
||||
<label for="" class="">Datum und Zeit<br><code><input[type="datetime-local"]></code></label><div><input class="io_input" type="datetime-local"></div>
|
||||
<label for="" class="">Kalendermonat<br><code><input[type="month"]></code></label><div><input class="io_input" type="month"></div>
|
||||
<label for="" class="">Kalenderwoche<br><code><input[type="week"]></code></label><div><input class="io_input" type="week"></div>
|
||||
<label for="" class="">@dresse<br><code><input[type="email"]></code></label><div><input class="io_input" type="email" placeholder="@"></div>
|
||||
<label for="" class="">Passwort<br><code><input[type="password"]></code></label><div><input class="io_input" type="password" value="admin"></div>
|
||||
<label for="" class="">Telefonnummer<br><code><input[type="tel"]></code></label><div><input class="io_input" type="tel" value="0190123456"></div>
|
||||
<label for="" class="">URL<br><code><input[type="url"]></code></label><div><input class="io_input" type="url" placeholder="url://"></div>
|
||||
<label for="" class="">Suche<br><code><input[type="search"]></code></label><div><input class="io_input" type="search"></div>
|
||||
<label for="" class="">Datei<br><code><input[type="file"]></code></label><div><input class="" type="file"></div>
|
||||
<label for="" class="">Bild</label><input class="" type="image" value="Alternativer Text"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<input type="checkbox"/>
|
||||
<input type="datetime"/>
|
||||
<input type="image"/>
|
||||
<input type="month"/>
|
||||
<form action="" method="get">
|
||||
<p class="label">
|
||||
Show me a <select name="F">
|
||||
<option value="0"> Plain list</option>
|
||||
<option value="1" selected="selected"> Fancy list</option>
|
||||
<option value="2"> Table list</option>
|
||||
</select>
|
||||
Sorted by <select name="C">
|
||||
<option value="N" selected="selected"> Name</option>
|
||||
<option value="M"> Date Modified</option>
|
||||
<option value="S"> Size</option>
|
||||
<option value="D"> Description</option>
|
||||
</select>
|
||||
<select name="O">
|
||||
<option value="A" selected="selected"> Ascending</option>
|
||||
<option value="D"> Descending</option>
|
||||
</select>
|
||||
<select name="V">
|
||||
<option value="0" selected="selected"> in Normal order</option>
|
||||
<option value="1"> in Version order</option>
|
||||
</select>
|
||||
Matching <input type="text" name="P" value="*" />
|
||||
<input type="submit" name="X" value="Go" />
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<h2>Interaktive Elemente</h2>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -39,10 +39,10 @@ address {
|
|||
|
||||
// Line
|
||||
hr {
|
||||
margin: $space_3 auto;
|
||||
margin: $space_small auto;
|
||||
border-width: $basic_border_width 0 0;
|
||||
border-style: solid;
|
||||
border-color: $darkest_color;
|
||||
border-color: $basic_border_color;
|
||||
}
|
||||
|
||||
.hr_hidden {
|
||||
|
|
@ -62,12 +62,12 @@ pre {
|
|||
|
||||
.pre_code {
|
||||
overflow-x: auto;
|
||||
border-color: rgba($brightest_color,.1);
|
||||
border-color: darken($basic_back_color, $tiny_color_diff);
|
||||
border-style: dotted;
|
||||
border-width: 0 0 0 $border_width_4;
|
||||
border-radius: $basic_corner;
|
||||
padding: $basic_space;
|
||||
background-color: rgba($brightest_color,.1);
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
code {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
@ -212,11 +212,11 @@ div {
|
|||
}
|
||||
.column_2 {
|
||||
column-count: 2;
|
||||
column-gap: $space_3;
|
||||
column-gap: $space_small;
|
||||
}
|
||||
.column_3 {
|
||||
column-count: 3;
|
||||
column-gap: $space_4;
|
||||
column-gap: $space_medium;
|
||||
}
|
||||
|
||||
// Space and placeholders
|
||||
|
|
@ -228,7 +228,7 @@ div {
|
|||
.box_cube {
|
||||
float: left;
|
||||
display: table;
|
||||
width: $space_4;
|
||||
width: $space_medium;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
span {
|
||||
|
|
@ -238,21 +238,21 @@ div {
|
|||
|
||||
.box_placeholder {
|
||||
width: 100%;
|
||||
height: $space_4;
|
||||
border: $border_width_4 solid rgba($alpha_color,.1);
|
||||
height: $space_medium;
|
||||
border: $border_width_4 solid transparentize($alpha_color, 0.1);
|
||||
border-radius: $basic_corner;
|
||||
background-color: rgba($alpha_color,.2);
|
||||
background-color: transparentize($alpha_color, 0.2);
|
||||
}
|
||||
|
||||
.box_placeholder_bkg {
|
||||
width: 100%;
|
||||
height: $space_4 * 2;
|
||||
border: $border_width_4 solid rgba($brightest_color,.1);
|
||||
height: $space_medium * 2;
|
||||
border: $border_width_4 solid transparentize($basic_front_color, 0.1);
|
||||
border-radius: $basic_corner;
|
||||
padding: $basic_space;
|
||||
/*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: rgba($brightest_color,.1);
|
||||
background-color: transparentize($basic_front_color, 0.1);
|
||||
}
|
||||
|
||||
// Data
|
||||
|
|
|
|||
|
|
@ -24,17 +24,12 @@ form {
|
|||
label {
|
||||
@extend %basic;
|
||||
|
||||
input, textarea {
|
||||
input, button, textarea, select {
|
||||
margin-left: $basic_space;
|
||||
}
|
||||
}
|
||||
|
||||
label + textarea {
|
||||
@extend %solo;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button, textarea {
|
||||
input, button, textarea, select {
|
||||
margin: $io_margin;
|
||||
|
||||
&[disabled="disabled"],
|
||||
|
|
@ -45,16 +40,16 @@ input, button, textarea {
|
|||
|
||||
input {
|
||||
color: $basic_io_font_color;
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@each $input in $basic_input_list, textarea, select {
|
||||
@each $input in $io_input_list, textarea, select {
|
||||
#{$input} {
|
||||
@extend %basic_mono;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.io_input, .io_textarea, .io_select {
|
||||
padding: $half_space;
|
||||
background-color: $basic_io_back_color;
|
||||
|
||||
|
|
@ -64,32 +59,41 @@ input {
|
|||
|
||||
&[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;
|
||||
&:hover {
|
||||
background-color: $basic_io_back_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $input in $basic_input_list, textarea {
|
||||
@each $input in $io_date_list {
|
||||
#{$input} {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@each $input in $io_input_list, textarea {
|
||||
#{$input} {
|
||||
// border: $basic_io_border;
|
||||
}
|
||||
}
|
||||
|
||||
.io_input, .io_textarea {
|
||||
border: $basic_io_border;
|
||||
}
|
||||
|
||||
&[readonly="readonly"],
|
||||
&[readonly] {
|
||||
border-color: darken($basic_io_border_color, 30%);
|
||||
}
|
||||
|
||||
@each $input in $basic_input_list {
|
||||
#{$input} {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@each $input in $basic_button_list {
|
||||
#{$input} {
|
||||
padding: $basic_padding;
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -104,17 +108,35 @@ legend {
|
|||
padding: 0 $half_space;
|
||||
}
|
||||
|
||||
label + input,
|
||||
.input_label_right,
|
||||
.label > input,
|
||||
.label > select {
|
||||
margin: 0 $basic_space;
|
||||
}
|
||||
|
||||
button {
|
||||
|
||||
}
|
||||
|
||||
.io_button {
|
||||
@extend %basic_button;
|
||||
border: $basic_io_border_width solid $oi_border_color;
|
||||
padding: $basic_padding;
|
||||
color: $oi_font_color;
|
||||
background-color: $oi_back_color;
|
||||
|
||||
&:hover {
|
||||
// border-color: #0059F6;
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
background-color: $foxtrot_color;
|
||||
}
|
||||
|
||||
&[disabled="disabled"],
|
||||
&[disabled] {
|
||||
border-color: transparent;
|
||||
color: $oi_border_color;
|
||||
|
||||
&:hover {
|
||||
background-color: $oi_back_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -132,7 +154,10 @@ option {
|
|||
}
|
||||
|
||||
textarea {
|
||||
}
|
||||
|
||||
.io_textarea {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
output {
|
||||
|
|
@ -192,6 +217,12 @@ canvas {
|
|||
line-height: 2.5;
|
||||
}
|
||||
|
||||
.label > input,
|
||||
.label > textarea,
|
||||
.label > select {
|
||||
margin: 0 $basic_space;
|
||||
}
|
||||
|
||||
.label_table {
|
||||
display: table;
|
||||
|
||||
|
|
@ -200,23 +231,45 @@ canvas {
|
|||
}
|
||||
}
|
||||
|
||||
.input_default {
|
||||
label + input {
|
||||
margin-left: $basic_space;
|
||||
}
|
||||
|
||||
label {
|
||||
@extend .label_table;
|
||||
margin: $half_space 0;
|
||||
input + label {
|
||||
margin-left: $basic_space;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: $half_space ($half_space + 1);
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
background-color: $basic_io_back_color;
|
||||
color: $basic_io_font_color;
|
||||
td > input,
|
||||
td > button,
|
||||
td > select,
|
||||
td > textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $darkest_color;
|
||||
color: $brightest_color;
|
||||
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: $basic_space;
|
||||
|
||||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > label {
|
||||
display: inline-block;
|
||||
margin: $basic_io_border_width;
|
||||
padding: $half_space;
|
||||
}
|
||||
}
|
||||
|
||||
.grid_column_2 {
|
||||
grid-template-columns: max-content max-content;
|
||||
|
||||
}
|
||||
|
||||
.grid_column_4 {
|
||||
grid-template-columns: max-content max-content max-content max-content;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ html {
|
|||
body {
|
||||
position: relative;
|
||||
box-sizing: $box_sizing;
|
||||
margin: 0;
|
||||
font-family: $primary_font_family;
|
||||
font-size: $basic_size;
|
||||
line-height: $basic_line;
|
||||
|
|
@ -59,7 +60,7 @@ section {
|
|||
.sec_main_center {
|
||||
width: $basic_width;
|
||||
margin: 0 auto;
|
||||
padding-top: $space_3;
|
||||
padding-top: $space_small;
|
||||
|
||||
@include forTabletPortraitUp {
|
||||
width: $width_small;
|
||||
|
|
@ -76,7 +77,7 @@ section {
|
|||
border-top-width: $border_width_8;
|
||||
border-top-style: solid;
|
||||
border-color: $basic_border_color;
|
||||
padding-top: $space_3;
|
||||
padding-top: $space_small;
|
||||
}
|
||||
|
||||
// Navigation
|
||||
|
|
@ -111,12 +112,12 @@ aside {
|
|||
|
||||
// Headings
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
@extend %head_all;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %head_1;
|
||||
margin: $space_5 0 $space_3;
|
||||
margin: $space_large 0 $space_small;
|
||||
}
|
||||
|
||||
h1 + h1 {
|
||||
|
|
@ -125,7 +126,7 @@ h1 + h1 {
|
|||
|
||||
h2 {
|
||||
@extend %head_2;
|
||||
margin: $space_4 0 $space_3;
|
||||
margin: $space_medium 0 $space_small;
|
||||
}
|
||||
|
||||
h2 + h2 {
|
||||
|
|
@ -167,7 +168,7 @@ header {
|
|||
}
|
||||
|
||||
.header_txt {
|
||||
margin-bottom: $space_3;
|
||||
margin-bottom: $space_small;
|
||||
border-bottom: $dotted_border;
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -76,8 +76,10 @@ td:last-child {
|
|||
|
||||
// General Classes
|
||||
// ------------------------------------------------------------------------------
|
||||
.precol {
|
||||
border-right: $basic_border;
|
||||
.cell_pre {
|
||||
// border-right-width: $border_width_4;
|
||||
// border-right-color: lighten($basic_back_color, $basic_color_diff);
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
}
|
||||
|
||||
.table_blank {
|
||||
|
|
@ -99,7 +101,7 @@ td:last-child {
|
|||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background-color: rgba($brightest_color, 0.1);
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ i, em {
|
|||
|
||||
.i_bright {
|
||||
font-style: normal;
|
||||
color: $brightest_color;
|
||||
color: $basic_highlight_color;
|
||||
}
|
||||
|
||||
// Bold, Strong
|
||||
|
|
@ -160,7 +160,7 @@ time {
|
|||
code {
|
||||
@extend %basic_mono;
|
||||
color: lighten($basic_font_color, $basic_color_diff);
|
||||
background-color: rgba($brightest_color,.1);
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
}
|
||||
.code_solo {
|
||||
@extend %basic_mono;
|
||||
|
|
@ -200,17 +200,9 @@ u {
|
|||
mark {
|
||||
background-color: $alpha_color;
|
||||
}
|
||||
.mark_cursor {
|
||||
color: $basic_highlight_color;
|
||||
background-color: $darkest_color;
|
||||
}
|
||||
::-moz-selection {
|
||||
color: $basic_highlight_color;
|
||||
background-color: $darkest_color;
|
||||
}
|
||||
::selection {
|
||||
color: $basic_highlight_color;
|
||||
background-color: $darkest_color;
|
||||
.mark_cursor, ::-moz-selection, ::selection {
|
||||
color: invert($basic_font_color);
|
||||
background-color: $basic_font_color;
|
||||
}
|
||||
|
||||
bdi, bdo {
|
||||
|
|
@ -281,6 +273,14 @@ del {
|
|||
text-align: left !important;
|
||||
}
|
||||
|
||||
.txt_top {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
.txt_bottom {
|
||||
vertical-align: bottom !important;
|
||||
}
|
||||
|
||||
.txt_white {
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,10 +22,16 @@
|
|||
@extend %hidden;
|
||||
}
|
||||
|
||||
.center_auto {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.center_50 {
|
||||
margin-right: 25%;
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.center_25 {
|
||||
margin-right: 37.5%;
|
||||
margin-left: 37.5%;
|
||||
|
|
@ -58,7 +64,7 @@
|
|||
}
|
||||
|
||||
.space_right {
|
||||
margin-right: $space_3;
|
||||
margin-right: $space_small;
|
||||
}
|
||||
|
||||
.wrap_center {
|
||||
|
|
@ -108,7 +114,7 @@
|
|||
|
||||
.float_space_left {
|
||||
@extend .float_left;
|
||||
margin-right: $space_3;
|
||||
margin-right: $space_small;
|
||||
}
|
||||
|
||||
.float_half_size {
|
||||
|
|
|
|||
|
|
@ -86,28 +86,30 @@ $color_palette: (
|
|||
|
||||
@include addDefaultColors;
|
||||
|
||||
$basic_color_diff: 12% !default;
|
||||
$tiny_color_diff: 4% !default;
|
||||
$double_color_diff: $basic_color_diff * 2;
|
||||
|
||||
$darkest_color: black !default;
|
||||
$brightest_color: white !default;
|
||||
$medium_color: lighten($darkest_color, 50%) !default;
|
||||
$dark_color: lighten($darkest_color, 20%) !default;
|
||||
$bright_color: darken($brightest_color, 20%) !default;
|
||||
|
||||
$basic_front_color: $darkest_color !default;
|
||||
$basic_back_color: $medium_color !default;
|
||||
$basic_font_color: $basic_front_color !default;
|
||||
$basic_head_color: $basic_front_color !default;
|
||||
$basic_font_color: black !default;
|
||||
$basic_back_color: #808080 !default;
|
||||
$basic_border_color: lighten($basic_font_color, $basic_color_diff) !default;
|
||||
$basic_front_color: white !default;
|
||||
|
||||
$medium_color: lighten($darkest_color, 50%);
|
||||
$dark_color: lighten($darkest_color, $double_color_diff);
|
||||
$bright_color: darken($brightest_color, $double_color_diff);
|
||||
|
||||
$basic_head_color: $basic_font_color !default;
|
||||
$basic_link_color: $echo_color !default;
|
||||
$basic_highlight_color: $brightest_color !default;
|
||||
$basic_highlight_color: $basic_front_color !default;
|
||||
$basic_action_color: $foxtrot_color !default;
|
||||
|
||||
$basic_border_color: $basic_front_color !default;
|
||||
|
||||
// default shadow colors
|
||||
// $shadow_color: fade-out($medium_color, 0.5);
|
||||
|
||||
$basic_color_diff: 12% !default;
|
||||
|
||||
$basic_color_list: ();
|
||||
|
||||
@each $key, $value in $color_palette {
|
||||
|
|
@ -132,17 +134,17 @@ $width_small: 80% !default;
|
|||
$width_medium: 60% !default;
|
||||
$width_large: 48% !default;
|
||||
|
||||
$basic_space: 8px !default;
|
||||
$tiny_space: 1px !default;
|
||||
$half_space: $basic_space / 2 !default;
|
||||
$double_space: $basic_space * 2 !default;
|
||||
$space_3: $basic_space * 4;
|
||||
$space_4: $basic_space * 8;
|
||||
$space_5: $basic_space * 16;
|
||||
$basic_space: $tiny_space * 8 !default;
|
||||
$half_space: $basic_space / 2;
|
||||
$double_space: $basic_space * 2;
|
||||
$space_small: $basic_space * 4;
|
||||
$space_medium: $basic_space * 8;
|
||||
$space_large: $basic_space * 16;
|
||||
|
||||
$basic_margin: $basic_space 0 !default;
|
||||
$high_margin: $double_space 0 !default;
|
||||
$io_margin: 0 $space_3 !default;
|
||||
$io_margin: 0 $space_small 0 0 !default;
|
||||
|
||||
$basic_padding: calc(#{$basic_space} - 3px) $basic_space !default;
|
||||
$wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2) !default;
|
||||
|
|
@ -151,8 +153,8 @@ $basic_corner: $tiny_space * 2;
|
|||
|
||||
// Borders
|
||||
$basic_border_width: $tiny_space !default;
|
||||
$border_width_4: $tiny_space * 4;
|
||||
$border_width_8: $tiny_space * 8;
|
||||
$border_width_4: $basic_border_width * 4;
|
||||
$border_width_8: $basic_border_width * 8;
|
||||
$basic_border: $tiny_space solid $basic_border_color;
|
||||
$dotted_border: $tiny_space dotted $basic_border_color;
|
||||
$cell_border: $tiny_space solid $darkest_color;
|
||||
|
|
@ -165,31 +167,39 @@ $basic_aside_width: 20%;
|
|||
// IO
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$basic_input_list:
|
||||
'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"]',
|
||||
$io_input_list:
|
||||
'input[type="text"]',
|
||||
'input[type="number"]',
|
||||
'input[type="color"]',
|
||||
'input[type="range"]',
|
||||
'input[type="date"]',
|
||||
'input[type="time"]',
|
||||
'input[type="url"]',
|
||||
'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])';
|
||||
|
||||
$basic_button_list:
|
||||
$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"]';
|
||||
|
||||
$basic_focus_list:
|
||||
$io_focus_list:
|
||||
'a[href]',
|
||||
'area[href]',
|
||||
'button:not([disabled])',
|
||||
|
|
@ -199,12 +209,16 @@ $basic_focus_list:
|
|||
'*[tabindex]';
|
||||
|
||||
$basic_io_font_color: lighten($basic_font_color, $basic_color_diff);
|
||||
$basic_io_back_color: darken($brightest_color, $basic_color_diff);
|
||||
$basic_io_border_color: $brightest_color;
|
||||
$basic_io_back_color: darken($basic_front_color, $basic_color_diff);
|
||||
$basic_io_border_color: $basic_front_color;
|
||||
|
||||
$oi_font_color: $basic_font_color;
|
||||
$oi_back_color: darken($basic_back_color, $basic_color_diff);
|
||||
$oi_border_color: darken($oi_back_color, $basic_color_diff);
|
||||
|
||||
$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;
|
||||
$dotted_io_border: $basic_io_border_width dotted $basic_io_border_color;
|
||||
|
||||
$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);
|
||||
|
|
|
|||
|
|
@ -51,6 +51,10 @@
|
|||
line-height: $head_line_4;
|
||||
}
|
||||
|
||||
%basic_button {
|
||||
@extend %basic;
|
||||
}
|
||||
|
||||
%solo {
|
||||
@extend %basic;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@mixin overrideUserAgent() {
|
||||
@if $no_agent_focus == true {
|
||||
@each $el in $basic_focus_list {
|
||||
@each $el in $io_focus_list {
|
||||
#{$el}:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,8 +44,8 @@
|
|||
@extend %exp_hidden !optional;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: $space_5;
|
||||
left: $space_5;
|
||||
top: $space_large;
|
||||
left: $space_large;
|
||||
padding: $half_space;
|
||||
border: 4px solid $basic_back_color;
|
||||
border-radius: 4px;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
& > h1 + h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: $space_3;
|
||||
margin-bottom: $space_small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ nav {
|
|||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: $darkest_color;
|
||||
background-color: $basic_border_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -74,7 +74,7 @@ nav {
|
|||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: $brightest_color;
|
||||
background-color: $basic_front_color;
|
||||
margin: 0 $basic_space;
|
||||
}
|
||||
}
|
||||
|
|
@ -100,7 +100,7 @@ nav {
|
|||
|
||||
ul {
|
||||
@extend .flex;
|
||||
margin: 0 $space_5;
|
||||
margin: 0 $space_large;
|
||||
|
||||
li {
|
||||
@extend .flex_child;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
// ------------------------------------------------------------------------------
|
||||
|
||||
%paper {
|
||||
background-color: $brightest_color;
|
||||
background-color: $basic_front_color;
|
||||
}
|
||||
|
||||
$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
|
||||
|
|
@ -97,7 +97,7 @@ $din: $a4, $a5, $a6;
|
|||
margin-top: 10cm;
|
||||
margin-bottom: 2cm;
|
||||
}
|
||||
margin: $space_3 auto;
|
||||
margin: $space_small auto;
|
||||
}
|
||||
|
||||
.page_title, .page_date {
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@
|
|||
}
|
||||
|
||||
.demo__credits {
|
||||
margin: $space_3 0 $basic_space 0;
|
||||
margin: $space_small 0 $basic_space 0;
|
||||
}
|
||||
|
||||
.demo__button_32 {
|
||||
|
|
@ -141,39 +141,39 @@
|
|||
}
|
||||
|
||||
.query_phoneUp {
|
||||
@include forPhoneUp {background-color: rgba($basic_front_color, 0.2)};
|
||||
@include forPhoneUp {background-color: rgba($basic_font_color, 0.2)};
|
||||
}
|
||||
|
||||
.query_phoneOnly {
|
||||
@include forPhoneOnly { background-color: rgba($basic_front_color, 0.2); }
|
||||
@include forPhoneOnly { background-color: rgba($basic_font_color, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletPortaitOnly {
|
||||
@include forTabletPortraitOnly { background-color: rgba($basic_front_color, 0.2); }
|
||||
@include forTabletPortraitOnly { background-color: rgba($basic_font_color, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletPortraitUp {
|
||||
@include forTabletPortraitUp { background-color: rgba($basic_front_color, 0.2); }
|
||||
@include forTabletPortraitUp { background-color: rgba($basic_font_color, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletLandscapeOnly {
|
||||
@include forTabletLandscapeOnly { background-color: rgba($basic_front_color, 0.2); }
|
||||
@include forTabletLandscapeOnly { background-color: rgba($basic_font_color, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletLandscapeUp {
|
||||
@include forTabletLandscapeUp { background-color: rgba($basic_front_color, 0.2); }
|
||||
@include forTabletLandscapeUp { background-color: rgba($basic_font_color, 0.2); }
|
||||
}
|
||||
|
||||
.query_desktopOnly {
|
||||
@include forDesktopOnly { background-color: rgba($basic_front_color, 0.2); }
|
||||
@include forDesktopOnly { background-color: rgba($basic_font_color, 0.2); }
|
||||
}
|
||||
|
||||
.query_desktopUp {
|
||||
@include forDesktopUp { background-color: rgba($basic_front_color, 0.2); }
|
||||
@include forDesktopUp { background-color: rgba($basic_font_color, 0.2); }
|
||||
}
|
||||
|
||||
.query_bigDesktopUp {
|
||||
@include forBigDesktopUp { background-color: rgba($basic_front_color, 0.2); }
|
||||
@include forBigDesktopUp { background-color: rgba($basic_font_color, 0.2); }
|
||||
}
|
||||
|
||||
.demo__query_example {
|
||||
|
|
@ -183,8 +183,8 @@
|
|||
@include goingLarge($screen_large/1px) {background-color: $delta_color; }
|
||||
@include goingLarge($screen_huge/1px) {background-color: $echo_color; }
|
||||
@include goingLarge($screen_gigantic/1px) {background-color: $foxtrot_color; }
|
||||
margin-bottom: $space_3;
|
||||
padding: $space_3;
|
||||
margin-bottom: $space_small;
|
||||
padding: $space_small;
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
|
|
@ -212,6 +212,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
.demo__td_no_bl {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.demo__td_no_br {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.demo__td_pr {
|
||||
padding-right: $double_space;
|
||||
}
|
||||
|
||||
.demo__td_pl {
|
||||
padding-left: $double_space;
|
||||
}
|
||||
|
||||
// Index
|
||||
// -----------------------------------------------------------------------------
|
||||
.wrap {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue