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

Tweaks

Browse source
This commit is contained in:
Stephan Hagedorn 2017-08-22 00:09:50 +02:00
parent 9ae96ba419
commit db96a298fb
9 changed files with 1111 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

12
basic/_common.scss
View file

@ -43,6 +43,18 @@
.txt_center {
text-align: center !important;
}
.txt_right {
text-align: right !important;
}
.txt_left {
text-align: left !important;
}
// Clearing and floating
// ------------------------------------------------------------------------------
.clear {

10
basic/_demo.scss
View file

@ -58,9 +58,17 @@
.demo__footer {
width: 100%;
height: 128px;
// height: 128px;
padding: $space_2 0;
background-color: $dark_color;
color: $bright_color;
nav {
a {
color: $bright_color;
}
}
}
.demo__avatar {

1
basic/_grouping.scss
View file

@ -5,7 +5,6 @@
p {
@extend %basic;
margin: $basic_space 0;
color: $basic_font_color;
code {
padding: $tiny_space $half_space;
font-size: 1em;

7
basic/_textlevel.scss
View file

@ -33,14 +33,17 @@ a {
@extend %default_button;
}
.a__button_border {
.a__button_text {
@extend %default_button;
padding: $wide_padding;
background-color: transparent;
color: $basic_font_color;
border: $cell_border;
}
.a__button_border {
@extend .a__button_text;
border: $cell_border;
}
// Other elements

15
basic/_typography.scss
View file

@ -61,18 +61,3 @@
text-overflow: ellipsis;
-o-text-overflow: ellipsis; // vendor
}
// Specific styles
// -----------------------------------------------------------------------------
.txt_center {
text-align: center !important;
}
.txt_right {
text-align: right !important;
}
.txt_left {
text-align: left !important;
}

2
code/variables.js
View file

@ -1,7 +1,7 @@
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
var full_view_hover = true;
var full_view_hover = false;
var doc_pos_y = 0;
var basic_ease = 600;

1096
example.css
View file

File diff suppressed because it is too large Load diff

18
example.html
View file

@ -396,7 +396,7 @@
<p>Aufbau, Standardwerte</p>
</header>
<article>
<p>&ellip;</p>
<p>&hellip;</p>
</article>
</section>
@ -486,12 +486,22 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
<header id="js_demo_fix" class="header__page demo__header header__fix">
<nav class="nav__right">
<ul>
<li><a href="" class="a__button">One</a></li>
<li><a href="" class="a__button">Two</a></li>
<li><a href="" class="a__button">Eins</a></li>
<li><a href="" class="a__button">Zwei</a></li>
</ul>
</nav>
</header>
<footer class="pos_abs pos_bottom demo__footer"></footer>
<footer class="pos_abs pos_bottom demo__footer">
<nav class="nav__column">
<ul>
<li><a href="" class="a__button_text">Alpha</a></li>
<li><a href="" class="a__button_text">Bravo</a></li>
<li><a href="" class="a__button_text">Charlie</a></li>
<li><a href="" class="a__button_text">Delta</a></li>
</ul>
</nav>
<p class="txt_center">👨‍💻 mit ❤ von <a href="https://interaktionsweise.de">Interaktionsweise</a></p>
</footer>
</div>
<div class="flex">
<div class="flex_child"></div>

99
modules/navigation/_nav_module.scss
View file

@ -14,10 +14,49 @@ nav {
ul {
@extend .overflow;
ul {
margin: $basic_space 0;
}
li {
@extend .float_left;
margin-right: $basic_space;
margin-bottom: 0;
&:last-child {
margin-right: 0;
}
}
}
}
.nav__right {
float: right;
margin-left: $basic_space;
.align_parent {
margin-right: $basic_space * -1;
}
}
.nav__separate_right {
float: right;
li {
position: relative;
&:first-child {
padding-left: $basic_space * 2 + $tiny_space;
&::before {
content: "";
position: absolute;
width: $tiny_space;
height: 100%;
left: 0;
top: 0;
background-color: $bright_color;
margin: 0 $basic_space;
}
}
}
}
@ -35,6 +74,27 @@ nav {
}
}
.nav__column {
position: relative;
margin: $basic_space 0;
ul {
@extend .flex;
margin: 0 $space_5;
li {
@extend .flex_child;
flex-grow: 1;
margin: 0;
text-align: center;
a {
display: block;
}
}
}
}
.nav__page_meta {
position: fixed;
// display: table;
@ -69,14 +129,6 @@ nav {
nav {
@extend .nav__horizontal;
ul {
margin: $basic_space 0;
}
li:last-child {
margin-right: 0;
}
a {
&:active,
@ -87,35 +139,4 @@ nav {
}
}
}
.nav__right {
float: right;
margin-left: $basic_space;
.align_parent {
margin-right: $basic_space * -1;
}
}
.nav__separate_right {
float: right;
li {
position: relative;
&:first-child {
padding-left: $basic_space * 2 + $tiny_space;
&::before {
content: "";
position: absolute;
width: $tiny_space;
height: 100%;
left: 0;
top: 0;
background-color: $bright_color;
margin: 0 $basic_space;
}
}
}
}
}