Beispiel-Datei strukturiert
This commit is contained in:
Stephan Hagedorn
parent
9c03fb44cc
commit
e7ca01dd40
12 changed files with 5023 additions and 170 deletions
18
.gitignore
vendored
18
.gitignore
vendored
|
|
@ -1,4 +1,6 @@
|
|||
# https://gist.github.com/octocat/9257657
|
||||
###################
|
||||
###################
|
||||
|
||||
# Compiled source #
|
||||
###################
|
||||
|
|
@ -41,6 +43,8 @@ Thumbs.db
|
|||
|
||||
|
||||
# https://github.com/github/gitignore
|
||||
###################
|
||||
###################
|
||||
|
||||
# https://github.com/github/gitignore/blob/master/Global/Windows.gitignore
|
||||
###################
|
||||
|
|
@ -173,13 +177,13 @@ typings/
|
|||
# dotenv environment variables file
|
||||
.env
|
||||
|
||||
# https://github.com/github/gitignore/blob/master/Sass.gitignore
|
||||
###################
|
||||
.sass-cache/
|
||||
*.css.map
|
||||
|
||||
|
||||
|
||||
# https://interaktionsweise.de/
|
||||
|
||||
# =========================
|
||||
# Other files
|
||||
# =========================
|
||||
|
||||
.sass-cache/
|
||||
*.css.map
|
||||
###################
|
||||
###################
|
||||
|
|
|
|||
|
|
@ -9,3 +9,9 @@ Copy the source folder to your projects style folder.
|
|||
Compile the SCSS files, for example like a so `sass --watch source/:./`.
|
||||
|
||||
Load the screen.css file within the head section of your HTML document. `<link rel="stylesheet" type="text/css" media="all" href="./{your projects style folder}/screen.css"/>`
|
||||
|
||||
## LOGIC
|
||||
|
||||
Klassennamen enthalten Objektnamen und Funktionen
|
||||
Sie sind mit `-` und `_` unterteilt.
|
||||
Der Bindestrich `-` trennt Objektnamen von Funktionen. Der Unterstrich `_` wiederum unterteilt Funktionsbezeichnungen.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
// TEXT
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$default_font_size: 15px !default;
|
||||
$default_font_size: 16px !default;
|
||||
$basic_size: $default_font_size;
|
||||
|
||||
$default_print_font_size: 10pt !default;
|
||||
|
|
@ -79,6 +79,9 @@ $basic_border_color: $black;
|
|||
// LAYOUT
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$default_box_sizing: box-sizing !default;
|
||||
$box_sizing: $default_box_sizing;
|
||||
|
||||
$basic_width: 96%;
|
||||
$width_2: 80%;
|
||||
$width_3: 60%;
|
||||
|
|
@ -333,4 +336,3 @@ $webkit_ms_support: -webkit- -ms- '';
|
|||
// $iv-shadow: 2; // inset vertical shaddow settings
|
||||
// $is-shadow: 2; // inset spread shaddow settings
|
||||
// $iblur: 3; // inset blur settings
|
||||
|
||||
|
|
|
|||
10
_hippie.scss
10
_hippie.scss
|
|
@ -23,6 +23,7 @@
|
|||
// Use a file outside of hippie i.e. other/normalize.css
|
||||
// -----------------------------------------------------------------------------
|
||||
@import "other/normalize.css";
|
||||
// @import "other/YOUR-FILES.css";
|
||||
|
||||
|
||||
|
||||
|
|
@ -48,8 +49,7 @@
|
|||
// -----------------------------------------------------------------------------
|
||||
@import "modules/vendor";
|
||||
//@import modules/all deprecated because of the new vendor mixin
|
||||
//@import modules/*/* needs sass-glob
|
||||
// ADD HERE // @import "modules/example";
|
||||
// @import "modules/YOUR-MODULE/YOUR-FILES";
|
||||
|
||||
// Basic styles - this is the core of definitions
|
||||
// Individual styles can be added her
|
||||
|
|
@ -64,18 +64,22 @@
|
|||
@import "basic/embedded";
|
||||
@import "basic/tables";
|
||||
@import "basic/interactive";
|
||||
// ADD HERE // @import "{name}/example";
|
||||
// @import "YOU-NAME-IT";
|
||||
|
||||
// Individual Modules and variables
|
||||
// in dependency to other styles
|
||||
// Additional modules can be defined here
|
||||
// -----------------------------------------------------------------------------
|
||||
@import "modules/tables/tables_module";
|
||||
@import "modules/card/card_module";
|
||||
@import "modules/editor/editor_module";
|
||||
@import "modules/explanation/explanation_module";
|
||||
@import "modules/print/print_module";
|
||||
// @import "modules/YOUR-MODULE/YOUR-FILES";
|
||||
|
||||
|
||||
|
||||
// Not yet sorted
|
||||
@import "basic/new";
|
||||
|
||||
// NOTE // No css rules allowed in here
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
box-sizing: $box_sizing;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -82,8 +82,7 @@
|
|||
background-color: transparentize($alpha_color, .5);
|
||||
}
|
||||
|
||||
.viewport-hover-body {
|
||||
@extend %full_viewport;
|
||||
.hover_background_change {
|
||||
background-color: darken($basic_background_color, 20%);
|
||||
transition: background-color .2s ease-in-out;
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ html {
|
|||
// -----------------------------------------------------------------------------
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
box-sizing: $box_sizing;
|
||||
font-family: $primary_font_family;
|
||||
font-size: $basic_size;
|
||||
line-height: $basic_line;
|
||||
|
|
@ -108,4 +108,3 @@ h6 {
|
|||
text-transform: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -74,74 +74,3 @@ caption {
|
|||
border: $basic_border_width dotted $basic_border_color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table_link {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
table-layout: auto;
|
||||
|
||||
tbody {
|
||||
border-bottom: $cell_border;
|
||||
|
||||
&:hover {
|
||||
background-color: $light_color;
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.cell_icon {
|
||||
width: 48px;
|
||||
text-align: center;
|
||||
img {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
|
||||
.cell_link {
|
||||
padding-right: $basic_space;
|
||||
padding-left: $basic_space;
|
||||
|
||||
&:hover {
|
||||
background-color: $foxtrot_color;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.link_url {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .link_url {
|
||||
display: block;
|
||||
color: $basic_highlight_color;
|
||||
}
|
||||
|
||||
&:hover .link_text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cell_date {
|
||||
width: 12%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cell_text {
|
||||
padding-right: $basic_space;
|
||||
padding-left: $basic_space;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shorten {
|
||||
@extend %short;
|
||||
max-height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
108
example.css
108
example.css
|
|
@ -59,7 +59,7 @@
|
|||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
|
||||
.viewport-full-body, .viewport-hover-body {
|
||||
.viewport-full-body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -78,10 +78,10 @@
|
|||
.viewport-full-body {
|
||||
background-color: rgba(250, 216, 3, 0.5); }
|
||||
|
||||
.viewport-hover-body {
|
||||
.hover_background_change {
|
||||
background-color: #4d4d4d;
|
||||
transition: background-color .2s ease-in-out; }
|
||||
.viewport-hover-body:hover {
|
||||
.hover_background_change:hover {
|
||||
background-color: gray; }
|
||||
|
||||
.space_box {
|
||||
|
|
@ -160,7 +160,7 @@ h5 {
|
|||
.span_solo {
|
||||
color: black; }
|
||||
|
||||
.table_link .cell_text .shorten {
|
||||
.table-link_list .cell_text .shorten {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis; }
|
||||
|
|
@ -178,9 +178,9 @@ html {
|
|||
height: 100%; }
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
box-sizing: box-sizing;
|
||||
font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
color: black;
|
||||
background-color: gray; }
|
||||
|
|
@ -428,46 +428,6 @@ caption {
|
|||
border: 1px dotted black;
|
||||
text-align: center; }
|
||||
|
||||
.table_link {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
table-layout: auto; }
|
||||
.table_link tbody {
|
||||
border-bottom: 1px solid #666666; }
|
||||
.table_link tbody:hover {
|
||||
background-color: #8c8c8c; }
|
||||
.table_link th, .table_link td {
|
||||
border: 0; }
|
||||
.table_link .cell_icon {
|
||||
width: 48px;
|
||||
text-align: center; }
|
||||
.table_link .cell_icon img {
|
||||
vertical-align: text-top; }
|
||||
.table_link .cell_link {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px; }
|
||||
.table_link .cell_link:hover {
|
||||
background-color: #0c85ff; }
|
||||
.table_link .cell_link a {
|
||||
display: block; }
|
||||
.table_link .cell_link .link_url {
|
||||
display: none; }
|
||||
.table_link .cell_link:hover .link_url {
|
||||
display: block;
|
||||
color: white; }
|
||||
.table_link .cell_link:hover .link_text {
|
||||
display: none; }
|
||||
.table_link .cell_date {
|
||||
width: 12%;
|
||||
text-align: center; }
|
||||
.table_link .cell_text {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px; }
|
||||
.table_link .cell_text div {
|
||||
width: 100%; }
|
||||
.table_link .cell_text .shorten {
|
||||
max-height: 44px; }
|
||||
|
||||
fieldset {
|
||||
margin: 8px 0;
|
||||
border: 1px solid black; }
|
||||
|
|
@ -490,6 +450,46 @@ legend {
|
|||
background-color: black;
|
||||
color: white; }
|
||||
|
||||
.table-link_list {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
table-layout: auto; }
|
||||
.table-link_list tbody {
|
||||
border-bottom: 1px solid #666666; }
|
||||
.table-link_list tbody:hover {
|
||||
background-color: #8c8c8c; }
|
||||
.table-link_list th, .table-link_list td {
|
||||
border: 0; }
|
||||
.table-link_list .cell_icon {
|
||||
width: 48px;
|
||||
text-align: center; }
|
||||
.table-link_list .cell_icon img {
|
||||
vertical-align: text-top; }
|
||||
.table-link_list .cell_link {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px; }
|
||||
.table-link_list .cell_link:hover {
|
||||
background-color: #0c85ff; }
|
||||
.table-link_list .cell_link a {
|
||||
display: block; }
|
||||
.table-link_list .cell_link .link_url {
|
||||
display: none; }
|
||||
.table-link_list .cell_link:hover .link_url {
|
||||
display: block;
|
||||
color: white; }
|
||||
.table-link_list .cell_link:hover .link_text {
|
||||
display: none; }
|
||||
.table-link_list .cell_date {
|
||||
width: 12%;
|
||||
text-align: center; }
|
||||
.table-link_list .cell_text {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px; }
|
||||
.table-link_list .cell_text div {
|
||||
width: 100%; }
|
||||
.table-link_list .cell_text .shorten {
|
||||
max-height: 44px; }
|
||||
|
||||
.card_body .bkg_box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -617,19 +617,19 @@ legend {
|
|||
|
||||
.exp_marker_pop {
|
||||
position: absolute;
|
||||
top: -11.25px;
|
||||
right: -7.5px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
top: -12px;
|
||||
right: -8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid white;
|
||||
border-radius: 15px;
|
||||
border-radius: 16px;
|
||||
color: white;
|
||||
background-color: black; }
|
||||
|
||||
.exp_overlay_btn {
|
||||
position: fixed;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
cursor: pointer; }
|
||||
|
||||
.exp_help_btn {
|
||||
|
|
@ -804,4 +804,6 @@ legend {
|
|||
.label_1, .label_2, .label_3 {
|
||||
padding: 0 4px; }
|
||||
|
||||
|
||||
|
||||
/*# sourceMappingURL=example.css.map */
|
||||
|
|
|
|||
102
example.html
102
example.html
|
|
@ -14,7 +14,7 @@
|
|||
<link rel="stylesheet" type="text/css" media="all" href="./example.css"/>
|
||||
</head>
|
||||
|
||||
<body class="viewport-hover-body">
|
||||
<body class="hover_background_change">
|
||||
|
||||
<div class="layer">
|
||||
<div class="exp_overlay_btn exp_help_btn"><span class="span_solo">?</span></div>
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
<p>Eine sehr klar definierte Gruppierung stellt das Element <code><main></code> dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.</p>
|
||||
<h1 id="textlevel">Textebene</h1>
|
||||
<h2>Verweise</h2>
|
||||
<p>Ein wesentlicher Bestandteil von Hypertext sind Verweise <code><a></code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. <a class="link_line js_pop" href="#links">Interne Verweise</a><span class="exp_pop"><code class="code_solo">table>tbody>tr>td*2^tr>td[colspan=2]</code></span> können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. <a class="link_line" href="http://de.wikipedia.org">Externe Verweise</a> verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können auch auf E-Mail Adressen oder Dateien zeigen.</p>
|
||||
<p>Ein wesentlicher Bestandteil von Hypertext sind Verweise <code><a></code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. <a class="link_line js_pop" href="#links">Interne Verweise</a><span class="exp_pop"><code class="code_solo">a.link_line</code></span> können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. <a class="link_line" href="http://de.wikipedia.org">Externe Verweise</a> verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können auch auf E-Mail Adressen oder Dateien zeigen.</p>
|
||||
<p>Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden. Abhängig von ihrer Funktion und ihrem Zweck, werden Verweise unterschiedlich formatiert. <a href="#">Farbige</a> oder <a class="link_line" href="#">unterstrichene Varianten</a> sind möglich.</p>
|
||||
<p>Wird der Verweis innerhalb eines <code><nav></code> Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Auf diese Verwendung wird im Folgenden genauer eingegangen <span class="wip_txt">...</span></p>
|
||||
<h2>Formatierungen</h2>
|
||||
|
|
@ -292,42 +292,41 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="table_link js_pop">
|
||||
<table class="table_fix">
|
||||
<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th>Ab / Zy</th>
|
||||
<th> Neu / Alt</th>
|
||||
<th>Kopfzeile</th>
|
||||
<th>1</th>
|
||||
<th>>9000</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Fußzeile</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" class="link_text" target="_blank">Name</a><a href="" class="link_url" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
<td>Alpha</td>
|
||||
<td>0</td>
|
||||
<td>9000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" class="link_text" target="_blank">Name</a><a href="" class="link_url" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
<td>Bravo</td>
|
||||
<td>1</td>
|
||||
<td>9001</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
<td>Charlie</td>
|
||||
<td>0</td>
|
||||
<td>9000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="exp_pop"><code class="code_solo">table.table_link>thead>tr>th*3^^(tbody>tr>td.cell_icon[rowspan=2]>img[width=16 height=16]^+td.cell_link>a.link_text[target=_blank]+a.link_url[target=_blank]^+td.cell_date[rowspan=2]{YYYY-MM-DD}^tr>td.cell_text>div.shorten)*2</code></div>
|
||||
|
||||
<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. Sie sind in ihrer unveränderten Gestalt, System- bzw. Browser-Abhängig. <span class="wip_txt">(Vielleicht ist das auch scheiße, hier darauf einzugehen) ...</span></p>
|
||||
<input/>
|
||||
|
|
@ -369,6 +368,61 @@
|
|||
<div class="div_placeholder_bkg"></div>
|
||||
<h1>Medien</h1>
|
||||
<h1>Druck</h1>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h1>Ende der Einführung</h1>
|
||||
</header>
|
||||
<article>
|
||||
<p>Dies war eine Übersicht der grundlegenden Elemente. Nun folgen weitere Elemente mit besonderen Formatierungen.</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h1>Einzelene Elemente</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Tabellen</h2>
|
||||
<table class="table-link_list js_pop">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th>Ab / Zy</th>
|
||||
<th> Neu / Alt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" class="link_text" target="_blank">Name</a><a href="" class="link_url" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" class="link_text" target="_blank">Name</a><a href="" class="link_url" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="exp_pop"><code class="code_solo">table.table-link_list>thead>tr>th*3^^(tbody>tr>td.cell_icon[rowspan=2]>img[width=16 height=16]^+td.cell_link>a.link_text[target=_blank]+a.link_url[target=_blank]^+td.cell_date[rowspan=2]{YYYY-MM-DD}^tr>td.cell_text>div.shorten)*2</code></div>
|
||||
|
||||
|
||||
</article>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.1.1.min.js"
|
||||
|
|
|
|||
70
modules/tables/_tables_module.scss
Normal file
70
modules/tables/_tables_module.scss
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
.table-link_list {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
table-layout: auto;
|
||||
|
||||
tbody {
|
||||
border-bottom: $cell_border;
|
||||
|
||||
&:hover {
|
||||
background-color: $light_color;
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.cell_icon {
|
||||
width: 48px;
|
||||
text-align: center;
|
||||
img {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
|
||||
.cell_link {
|
||||
padding-right: $basic_space;
|
||||
padding-left: $basic_space;
|
||||
|
||||
&:hover {
|
||||
background-color: $foxtrot_color;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.link_url {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .link_url {
|
||||
display: block;
|
||||
color: $basic_highlight_color;
|
||||
}
|
||||
|
||||
&:hover .link_text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cell_date {
|
||||
width: 12%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cell_text {
|
||||
padding-right: $basic_space;
|
||||
padding-left: $basic_space;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shorten {
|
||||
@extend %short;
|
||||
max-height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
4778
package-lock.json
generated
Normal file
4778
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
10
package.json
10
package.json
|
|
@ -17,6 +17,12 @@
|
|||
},
|
||||
"homepage": "https://github.com/sthag/hippie#readme",
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.1"
|
||||
}
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-livereload": "^3.8.1",
|
||||
"gulp-notify": "^3.0.0",
|
||||
"gulp-plumber": "^1.1.0",
|
||||
"gulp-ruby-sass": "^2.1.1",
|
||||
"gulp-sourcemaps": "^2.6.0"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue