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

Compare commits

base: interaktionsweise:9f3797f6516a63101fb8ebd23ab8229053ec57b6
Branches Tags
interaktionsweise:development
interaktionsweise:main
...
compare: interaktionsweise:a1a4bd408bedaa11f5e1aacca630d0b1bbbe7aa2
Branches Tags
interaktionsweise:development
interaktionsweise:main

2 commits
9f3797f651 ... a1a4bd408b

Author SHA1 Message Date
sthag
a1a4bd408b feat: Rename class 
- Rename sub class to horizontal and bound to ul and ol elements
- Reformat files
 2025-06-19 14:18:45 +02:00
sthag
d17f966794 feat: Change default timings 
- Change mouse over time
- Change default duration
- Format with tabs
- Reindent
 2025-05-18 11:12:00 +02:00
4 changed files with 123 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

69
elements/_grouping.scss
View file

@ -24,6 +24,7 @@ p {
@extend %basic; @extend %basic;
margin-top: $space_basic; margin-top: $space_basic;
margin-bottom: $space_basic; margin-bottom: $space_basic;
code { code {
padding: $space_tiny $space_half; padding: $space_tiny $space_half;
font-size: 1em; font-size: 1em;
@ -34,13 +35,17 @@ p {
.column_line { .column_line {
column-rule: $border_basic; column-rule: $border_basic;
} }
.column_2, .column_3 {
.column_2,
.column_3 {
@extend p; @extend p;
} }
.column_2 { .column_2 {
column-count: 2; column-count: 2;
column-gap: $space_small; column-gap: $space_small;
} }
.column_3 { .column_3 {
column-count: 3; column-count: 3;
column-gap: $space_medium; column-gap: $space_medium;
@ -91,10 +96,11 @@ pre {
overflow-x: auto; overflow-x: auto;
border-color: darken($color_back_basic, $color_diff_tiny); border-color: darken($color_back_basic, $color_diff_tiny);
border-style: dotted; border-style: dotted;
border-width: 0 0 0 $width_border_4; border-width: 0 0 0 $width_border_4;
border-radius: $radius_basic; border-radius: $radius_basic;
padding: $space_basic; padding: $space_basic;
background-color: lighten($color_back_basic, $color_diff_tiny); background-color: lighten($color_back_basic, $color_diff_tiny);
code { code {
background-color: transparent; background-color: transparent;
} }
@ -112,11 +118,15 @@ blockquote {
p::before { p::before {
content: "\201E \0020"; content: "\201E \0020";
} }
p::after { p::after {
content: "\0020 \201C"; content: "\0020 \201C";
} }
.quote_source { .quote_source {
&::before, &::after {
&::before,
&::after {
content: ""; content: "";
} }
} }
@ -124,23 +134,37 @@ blockquote {
// List // List
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
dl, ul, ol { dl,
ul,
ol {
margin: $space_double 0; margin: $space_double 0;
} }
ul, ol { ul,
ol {
padding-left: $indent_basic; padding-left: $indent_basic;
&.horizontal {
overflow: auto;
li {
@extend .float_space_left;
}
}
} }
dl { dl {
margin-left: $indent_basic; margin-left: $indent_basic;
} }
li, dt, dd { li,
dt,
dd {
@extend %basic; @extend %basic;
} }
dd, .list_basic li { dd,
.list_basic li {
margin-bottom: $space_basic; margin-bottom: $space_basic;
} }
@ -171,15 +195,18 @@ ul {
li { li {
margin-bottom: $space_tiny * 2; margin-bottom: $space_tiny * 2;
text-transform: uppercase; text-transform: uppercase;
a { a {
display: block; display: block;
padding: $padding_basic; padding: $padding_basic;
color: $color_text_basic; color: $color_text_basic;
img { img {
margin-right: $space_basic; margin-right: $space_basic;
padding-bottom: 0.2em; padding-bottom: 0.2em;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
@ -190,13 +217,6 @@ ul {
} }
} }
.list_horizontal {
overflow: auto;
li {
@extend .float_space_left;
}
}
// Embedded // Embedded
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
figure { figure {
@ -210,15 +230,11 @@ figcaption {
// Main content // Main content
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
main { main {}
}
// Div // Div
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
div { div {}
}
.div_info { .div_info {
padding: $space_double $indent_basic; padding: $space_double $indent_basic;
@ -228,6 +244,7 @@ div {
.box_space { .box_space {
position: relative; position: relative;
overflow: auto;
width: 100%; width: 100%;
} }
@ -309,13 +326,13 @@ div {
display: grid; display: grid;
grid-gap: $space_basic; grid-gap: $space_basic;
& > input, &>input,
& > select, &>select,
& > textarea { &>textarea {
margin: 0; margin: 0;
} }
& > label { &>label {
margin: $width_border_io; margin: $width_border_io;
padding: $space_half; padding: $space_half;
} }
@ -333,4 +350,4 @@ div {
// Sprites // Sprites
.sprite_img { .sprite_img {
display: inline-block; display: inline-block;
} }

40
elements/_sections.scss
View file

@ -39,25 +39,20 @@ body {
} }
&:hover { &:hover {
.mouse_over { .mouse_over {
background-color: transparent !important; background-color: transparent !important;
transition: background-color $duration_double $timing_basic 0s !important; transition: background-color $duration_basic $timing_basic 0s !important;
} }
} }
} }
// Article // Article
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
article { article {}
}
// Section // Section
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
section { section {}
}
.sec_main_center { .sec_main_center {
width: $width_basic; width: $width_basic;
@ -67,9 +62,11 @@ section {
@include forTabletPortraitUp { @include forTabletPortraitUp {
width: $width_small; width: $width_small;
} }
@include forTabletLandscapeUp { @include forTabletLandscapeUp {
width: $width_medium; width: $width_medium;
} }
@include forBigDesktopUp { @include forBigDesktopUp {
width: $width_large; width: $width_large;
} }
@ -84,20 +81,18 @@ section {
// Navigation // Navigation
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
nav { nav {}
}
// Aside element // Aside element
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
aside { aside {
width: $width_aside_basic; width: $width_aside_basic;
&.right + .bside { &.right+.bside {
margin-right: calc(#{$width_aside_basic} + #{$space_basic}); margin-right: calc(#{$width_aside_basic} + #{$space_basic});
} }
&.left + .bside { &.left+.bside {
margin-left: calc(#{$width_aside_basic} + #{$space_basic}); margin-left: calc(#{$width_aside_basic} + #{$space_basic});
} }
@ -116,7 +111,12 @@ aside {
// Headings // Headings
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
@extend %head_all; @extend %head_all;
} }
@ -125,7 +125,7 @@ h1 {
margin: $space_large 0 $space_small; margin: $space_large 0 $space_small;
} }
h1 + h1 { h1+h1 {
margin-top: 0; margin-top: 0;
} }
@ -134,7 +134,7 @@ h2 {
margin: $space_medium 0 $space_small; margin: $space_medium 0 $space_small;
} }
h2 + h2 { h2+h2 {
margin-top: 0; margin-top: 0;
} }
@ -165,9 +165,7 @@ h6 {
// Header // Header
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
header { header {}
}
.header_page { .header_page {
overflow: auto; overflow: auto;
@ -184,6 +182,4 @@ header {
// Footer // Footer
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
footer { footer {}
}

41
global/_common.scss
View file

@ -48,21 +48,24 @@
} }
@each $size, $variable in (basic, #{$space_basic}), @each $size, $variable in (basic, #{$space_basic}),
(small, #{$space_small}), (small, #{$space_small}),
(medium, #{$space_medium}), (medium, #{$space_medium}),
(large, #{$space_large}) { (large, #{$space_large}) {
.space_top_#{$size} { .space_top_#{$size} {
margin-top: $variable; margin-top: $variable;
} }
.space_right_#{$size} {
margin-right: $variable; .space_right_#{$size} {
} margin-right: $variable;
.space_bottom_#{$size} { }
margin-bottom: $variable;
} .space_bottom_#{$size} {
.space_left_#{$size} { margin-bottom: $variable;
margin-left: $variable; }
}
.space_left_#{$size} {
margin-left: $variable;
}
} }
.space_left_fourth { .space_left_fourth {
@ -100,7 +103,7 @@
} }
.wrap_center { .wrap_center {
& > * { &>* {
margin-right: math.div((100% - $width_basic), 2); margin-right: math.div((100% - $width_basic), 2);
margin-left: math.div((100% - $width_basic), 2); margin-left: math.div((100% - $width_basic), 2);
@ -108,10 +111,12 @@
margin-right: math.div((100% - $width_small), 2); margin-right: math.div((100% - $width_small), 2);
margin-left: math.div((100% - $width_small), 2); margin-left: math.div((100% - $width_small), 2);
} }
@include forTabletLandscapeUp { @include forTabletLandscapeUp {
margin-right: math.div((100% - $width_medium), 2); margin-right: math.div((100% - $width_medium), 2);
margin-left: math.div((100% - $width_medium), 2); margin-left: math.div((100% - $width_medium), 2);
} }
@include forBigDesktopUp { @include forBigDesktopUp {
margin-right: math.div((100% - $width_large), 2); margin-right: math.div((100% - $width_large), 2);
margin-left: math.div((100% - $width_large), 2); margin-left: math.div((100% - $width_large), 2);
@ -145,7 +150,7 @@
} }
.float_space_left { .float_space_left {
@extend .float_left; float: left;
margin-right: $space_small; margin-right: $space_small;
} }
@ -312,4 +317,4 @@
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }

80
global/_config.scss
View file

@ -68,13 +68,12 @@ $family_head_basic: $family_text_basic !default;
// COLORS // COLORS
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$color_palette: ( $color_palette: (
alpha: #fad803, alpha: #fad803,
bravo: #d30a51, bravo: #d30a51,
charlie: #273f8b, charlie: #273f8b,
delta: #b7e0f0, delta: #b7e0f0,
echo: #52bed1, echo: #52bed1,
foxtrot: #0c85ff foxtrot: #0c85ff) !default;
) !default;
@include addDefaultColors; @include addDefaultColors;
@ -90,7 +89,8 @@ $color_back_basic: #808080 !default;
$color_border_basic: lighten($color_text_basic, $color_diff_basic) !default; $color_border_basic: lighten($color_text_basic, $color_diff_basic) !default;
$color_front_basic: white !default; $color_front_basic: white !default;
$color_medium: lighten($color_darkest, 50%); $color_medium: lighten($color_darkest, 50%
);
$color_dark: lighten($color_darkest, $color_diff_double); $color_dark: lighten($color_darkest, $color_diff_double);
$color_darker: darken($color_back_basic, $color_diff_basic); $color_darker: darken($color_back_basic, $color_diff_basic);
$color_brighter: lighten($color_back_basic, $color_diff_basic); $color_brighter: lighten($color_back_basic, $color_diff_basic);
@ -105,12 +105,14 @@ $color_action_basic: $foxtrot_color !default;
// default shadow colors // default shadow colors
// $shadow_color: fade-out($color_medium, 0.5); // $shadow_color: fade-out($color_medium, 0.5);
$color_list: (); $color_list: (
);
@each $key, $value in $color_palette { @each $key, $value in $color_palette {
$map: (); $map: (
$map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)) ); );
$color_list: map-merge($color_list, $map); $map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)));
$color_list: map-merge($color_list, $map);
} }
@ -159,40 +161,36 @@ $radius_basic: $space_tiny * 2 !default;
// IO // IO
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$io_input_list: $io_input_list: 'input[type="text"]',
'input[type="text"]', 'input[type="number"]',
'input[type="number"]',
'input[type="color"]', 'input[type="color"]',
'input[type="range"]', 'input[type="range"]',
'input[type="date"]', 'input[type="date"]',
'input[type="time"]', 'input[type="time"]',
'input[type="datetime-local"]', 'input[type="datetime-local"]',
'input[type="month"]', 'input[type="month"]',
'input[type="week"]', 'input[type="week"]',
'input[type="email"]', 'input[type="email"]',
'input[type="password"]', 'input[type="password"]',
'input[type="tel"]', 'input[type="tel"]',
'input[type="url"]', 'input[type="url"]',
'input[type="search"]', 'input[type="search"]',
'input:not([type])'; 'input:not([type])';
$io_date_list: $io_date_list: '.io_input[type="date"]',
'.io_input[type="date"]', '.io_input[type="time"]',
'.io_input[type="time"]', '.io_input[type="datetime-local"]',
'.io_input[type="datetime-local"]', '.io_input[type="month"]',
'.io_input[type="month"]', '.io_input[type="week"]';
'.io_input[type="week"]';
$io_button_list: $io_button_list: 'button',
'button',
'input[type="button"]', 'input[type="button"]',
// 'input[type="file"]', // 'input[type="file"]',
'input[type="reset"]', 'input[type="reset"]',
'input[type="image"]', 'input[type="image"]',
'input[type="submit"]'; 'input[type="submit"]';
$io_focus_list: $io_focus_list: 'a[href]',
'a[href]',
'area[href]', 'area[href]',
'button:not([disabled])', 'button:not([disabled])',
'input:not([disabled])', 'input:not([disabled])',
@ -218,7 +216,7 @@ $shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightne
// ANIMATIONS // ANIMATIONS
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$duration_basic: 250ms !default; $duration_basic: 200ms !default;
$duration_double: $duration_basic * 2; $duration_double: $duration_basic * 2;
$duration_long: 2s !default; $duration_long: 2s !default;
$timing_basic: ease-out !default; $timing_basic: ease-out !default;
@ -254,17 +252,17 @@ $webkit_ms_support: -webkit- -ms- '';
// SYMBOLS // SYMBOLS
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$icons: ( $icons: (
glass: "\f000", glass: "\f000",
music: "\f001", music: "\f001",
search: "\f002", search: "\f002",
envelope-o: "\f003", envelope-o: "\f003",
heart: "\f004" heart: "\f004"
); );
@each $name, $icon in $icons { @each $name, $icon in $icons {
.sym_#{$name}::before { .sym_#{$name}::before {
content: $icon; content: $icon;
} }
} }
@ -273,4 +271,4 @@ $icons: (
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$no_agent_focus: true; $no_agent_focus: true;
@include overrideUserAgent; @include overrideUserAgent;