interaktionsweise/hippie-style
1
1
Fork 0
Code Pull requests Releases Activity

added current state from hippie main repo

Browse source 
commit state 175816
source/style/hippie
This commit is contained in:
Stephan 2019-11-12 20:18:02 +01:00
parent 58147a8e95
commit b60dd80cd5
36 changed files with 2990 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

316
global/_common.scss Normal file
View file

@ -0,0 +1,316 @@
// General classes
// -----------------------------------------------------------------------------
%size_content {
box-sizing: content-box;
}
%size_content_solo {
@extend %size_content;
*,
::before,
::after {
box-sizing: $box_sizing;
}
}
%h_content_full {
height: 100%;
body {
min-height: 100%;
}
}
%hidden {
display: none;
}
.hide {
@extend %hidden;
}
.space_even_auto {
margin-right: auto;
margin-left: auto;
}
.space_even_half {
margin-right: 25%;
margin-left: 25%;
}
.space_even_fourth {
margin-right: 37.5%;
margin-left: 37.5%;
}
@each $size, $variable in (basic, #{$space_basic}),
(small, #{$space_small}),
(medium, #{$space_medium}),
(large, #{$space_large}) {
.space_top_#{$size} {
margin-top: $variable;
}
.space_right_#{$size} {
margin-right: $variable;
}
.space_bottom_#{$size} {
margin-bottom: $variable;
}
.space_left_#{$size} {
margin-left: $variable;
}
}
.space_left_fourth {
margin-left: 25%;
}
.width_full {
width: 100%;
margin-right: 0;
margin-left: 0;
}
.width_half {
width: 50%;
margin-right: 0;
margin-left: 0;
}
.width_third {
width: 33.3%;
margin-right: 0;
margin-left: 0;
}
.h_basic {
height: 1024px;
}
.h_full_view {
height: 100vh;
}
.h_100 {
height: 100%;
}
.wrap_center {
& > * {
margin-right: (100% - $width_basic) / 2;
margin-left: (100% - $width_basic) / 2;
@include forTabletPortraitUp {
margin-right: (100% - $width_small) / 2;
margin-left: (100% - $width_small) / 2;
}
@include forTabletLandscapeUp {
margin-right: (100% - $width_medium) / 2;
margin-left: (100% - $width_medium) / 2;
}
@include forBigDesktopUp {
margin-right: (100% - $width_large) / 2;
margin-left: (100% - $width_large) / 2;
}
}
}
// Clearing and floating
// -----------------------------------------------------------------------------
.clear {
clear: both;
&::before,
&::after {
clear: both;
}
}
.overflow {
overflow: auto;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.float_space_left {
@extend .float_left;
margin-right: $space_small;
}
.float_half_size {
float: left;
width: 50%;
}
.x_long {
overflow-x: scroll;
}
// Inlining
// -----------------------------------------------------------------------------
.inline {
display: inline-block;
}
// Positioned elements
// -----------------------------------------------------------------------------
%viewport_fixed {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
%full_parent {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
// width: 100%;
// height: 100%;
}
.pos_abs {
position: absolute;
}
.pos_rel {
position: relative;
}
.pos_fix {
position: fixed;
}
.pin_top {
top: 0;
}
.pin_right {
right: 0;
}
.pin_bottom {
bottom: 0;
}
.pin_left {
left: 0;
}
.pos_full_view {
@extend %viewport_fixed;
background-color: rgba($alpha_color, 0.5);
}
.pos_full_page {
@extend %full_parent;
background-color: rgba($charlie_color, 0.25);
}
.hover_back_change {
background-color: $color_darker;
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: $color_back_basic;
}
}
.mouse_over {
@extend %viewport_fixed;
z-index: $z_heaven;
background-color: transparentize($color_darkest, 0.5);
transition: background-color $duration_long $timing_basic $duration_long;
pointer-events: none;
}
// Colors
// -----------------------------------------------------------------------------
.txt_color_light {
color: $color_brighter;
}
.txt_color_dark {
color: $color_darker;
}
// Text
// -----------------------------------------------------------------------------
.txt_tiny {
font-size: .5em !important;
}
.txt_smaller {
font-size: .75em !important;
}
.txt_larger {
font-size: 1.2em !important;
}
.txt_huge {
font-size: 3em !important;
}
.txt_hero {
font-size: $size_hero;
}
.txt_center {
text-align: center !important;
}
.txt_right {
text-align: right !important;
}
.txt_left {
text-align: left !important;
}
.txt_top {
vertical-align: top !important;
}
.txt_bottom {
vertical-align: bottom !important;
}
.txt_white {
color: white;
}
.txt_black {
color: black;
}
.txt_gradient {
background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}