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

Compare commits

base: interaktionsweise:b739ddefda35962192aadfc2ca86a11d996ab7c9
Branches Tags
interaktionsweise:development
interaktionsweise:main
..
compare: interaktionsweise:54f1de579c3709db1f785997884a2e3e9861e0bc
Branches Tags
interaktionsweise:development
interaktionsweise:main

No commits in common. "b739ddefda35962192aadfc2ca86a11d996ab7c9" and "54f1de579c3709db1f785997884a2e3e9861e0bc" have entirely different histories.
b739ddefda ... 54f1de579c

14 changed files with 104 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

15
elements/_grouping.scss
View file

@ -1,5 +1,3 @@
@use "sass:color";
// Grouping content // Grouping content
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// p // p
@ -73,6 +71,7 @@ hr {
&.vertical { &.vertical {
display: inline; display: inline;
height: $space_tiny;
margin: 0 $space_double; margin: 0 $space_double;
border-width: 0 $width_border_basic 0 0; border-width: 0 $width_border_basic 0 0;
} }
@ -103,12 +102,12 @@ pre {
.pre_code { .pre_code {
overflow-x: auto; overflow-x: auto;
border-color: color.scale($color_back_basic, $lightness: -$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: color.scale($color_back_basic, $lightness: $color_diff_tiny); background-color: lighten($color_back_basic, $color_diff_tiny);
code { code {
background-color: transparent; background-color: transparent;
@ -276,20 +275,20 @@ div {}
.box_placeholder { .box_placeholder {
width: 100%; width: 100%;
height: $space_medium; height: $space_medium;
border: $width_border_4 solid color.adjust($alpha_color, $alpha: -0.1); border: $width_border_4 solid transparentize($alpha_color, 0.1);
border-radius: $radius_basic; border-radius: $radius_basic;
background-color: color.adjust($alpha_color, $alpha: -0.2); background-color: transparentize($alpha_color, 0.2);
} }
.box_placeholder_bkg { .box_placeholder_bkg {
width: 100%; width: 100%;
height: $space_medium * 2; height: $space_medium * 2;
border: $width_border_4 solid color.adjust($color_front_basic, $alpha: -0.1); border: $width_border_4 solid transparentize($color_front_basic, 0.1);
border-radius: $radius_basic; border-radius: $radius_basic;
padding: $space_basic; padding: $space_basic;
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/ /*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: 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: color.adjust($color_front_basic, $alpha: -0.1); background-color: transparentize($color_front_basic, 0.1);
} }
.box_file_tile { .box_file_tile {

24
elements/_interactive.scss
View file

@ -1,5 +1,3 @@
@use "sass:color";
// Forms // Forms
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// form // form
@ -29,12 +27,9 @@ form {
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
label { label {
@extend %basic; @extend %basic;
}
label,
p {
input, button, textarea, select { input, button, textarea, select {
margin: 0 $space_basic; margin-left: $space_basic;
} }
} }
@ -42,6 +37,16 @@ input + label {
margin-left: $space_basic; margin-left: $space_basic;
} }
.label {
line-height: 2.5;
}
.label > input,
.label > textarea,
.label > select {
margin: 0 $space_basic;
}
// Input // Input
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
input { input {
@ -74,7 +79,6 @@ td > textarea {
} }
} }
// TODO: Move to io_module
.input_io, .button_io, .io_textarea, .io_select { .input_io, .button_io, .io_textarea, .io_select {
margin: $margin_io; margin: $margin_io;
} }
@ -90,7 +94,7 @@ td > textarea {
&[readonly="readonly"], &[readonly="readonly"],
&[readonly] { &[readonly] {
background-color: color.scale($color_back_io, $lightness: -$color_diff_double); background-color: darken($color_back_io, $color_diff_double);
} }
&[disabled="disabled"], &[disabled="disabled"],
@ -119,7 +123,7 @@ td > textarea {
&[readonly="readonly"], &[readonly="readonly"],
&[readonly] { &[readonly] {
border-color: color.scale($color_border_io, $lightness: -$color_diff_double); border-color: darken($color_border_io, $color_diff_double);
} }
&[disabled="disabled"], &[disabled="disabled"],
@ -167,7 +171,7 @@ button {
&[disabled="disabled"], &[disabled="disabled"],
&[disabled] { &[disabled] {
border-color: transparent; border-color: transparent;
color: color.scale($color_text_button, $lightness: $color_diff_double); color: lighten($color_text_button, $color_diff_double);
&:hover { &:hover {
background-color: $color_back_button; background-color: $color_back_button;

8
elements/_tables.scss
View file

@ -1,5 +1,3 @@
@use "sass:color";
// Tabular data // Tabular data
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// table // table
@ -42,7 +40,7 @@ table {
} }
tr:nth-child(even) td { tr:nth-child(even) td {
background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny); background-color: lighten($color_back_basic, $color_diff_tiny);
} }
} }
@ -127,6 +125,6 @@ td:last-child {
.cell_pre { .cell_pre {
// border-right-width: $width_border_4; // border-right-width: $width_border_4;
// border-right-color: color.scale($color_back_basic, $lightness: $color_diff_basic); // border-right-color: lighten($color_back_basic, $color_diff_basic);
background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny); background-color: lighten($color_back_basic, $color_diff_tiny);
} }

20
elements/_textlevel.scss
View file

@ -1,5 +1,3 @@
@use "sass:color";
// Text-Level semantics // Text-Level semantics
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// a // a
@ -40,7 +38,7 @@
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
a { a {
color: $color_link_basic; color: $color_link_basic;
// color: color.scale($color_action_basic, $lightness: 20%); // color: lighten($color_action_basic, 20%);
text-decoration: none; text-decoration: none;
&:active, &:active,
@ -82,13 +80,13 @@ a {
display: inline-block; display: inline-block;
padding: $padding_basic; padding: $padding_basic;
border-radius: $radius_basic; border-radius: $radius_basic;
background-color: color.adjust($color_link_basic, $alpha: -0.8); background-color: transparentize($color_link_basic, 0.8);
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
border-color: transparent; border-color: transparent;
background-color: color.adjust($color_highlight_basic, $alpha: -0.8); background-color: transparentize($color_highlight_basic, 0.8);
} }
} }
@ -196,8 +194,8 @@ time {
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
code { code {
@extend %basic_mono; @extend %basic_mono;
color: color.scale($color_text_basic, $lightness: $color_diff_basic); color: lighten($color_text_basic, $color_diff_basic);
background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny); background-color: lighten($color_back_basic, $color_diff_tiny);
} }
.code_solo { .code_solo {
@ -229,7 +227,7 @@ kbd {
border-style: solid; border-style: solid;
border-color: $color_darker; border-color: $color_darker;
border-radius: $radius_basic; border-radius: $radius_basic;
color: color.scale($color_text_basic, $lightness: $color_diff_basic); color: lighten($color_text_basic, $color_diff_basic);
} }
// Sub- and superscript // Sub- and superscript
@ -251,17 +249,17 @@ mark {
} }
.mark_cursor { .mark_cursor {
color: color.invert($color_text_basic); color: invert($color_text_basic);
background-color: $color_text_basic; background-color: $color_text_basic;
} }
::-moz-selection { ::-moz-selection {
color: color.invert($color_text_basic); color: invert($color_text_basic);
background-color: $color_text_basic; background-color: $color_text_basic;
} }
::selection { ::selection {
color: color.invert($color_text_basic); color: invert($color_text_basic);
background-color: $color_text_basic; background-color: $color_text_basic;
} }

11
functions/_color.scss
View file

@ -1,16 +1,13 @@
@use "sass:map";
@use "sass:color";
@function createColorMap($color, $percentage, $opacity) { @function createColorMap($color, $percentage, $opacity) {
$map: ( $map: (
base: $color, base: $color,
light: color.scale($color, $lightness: $percentage), light: lighten($color, $percentage),
dark: color.scale($color, $lightness: -$percentage), dark: darken($color, $percentage),
trans: color.adjust($color, $alpha: -$opacity) trans: transparentize($color, $opacity)
); );
@return $map; @return $map;
} }
@function basic_color($key: 'alpha') { @function basic_color($key: 'alpha') {
@return map.get($color_palette, $key); @return map-get($color_palette, $key);
} }

4
functions/_shade.scss
View file

@ -1,4 +1,4 @@
@use "sass:color"; @charset "UTF-8";
// Mixes a color with black. // Mixes a color with black.
// //
@ -20,5 +20,5 @@
// @return {Color} // @return {Color}
@function shade($color, $percent) { @function shade($color, $percent) {
@return color.mix(#000, $color, $percent); @return mix(#000, $color, $percent);
} }

4
functions/_tint.scss
View file

@ -1,4 +1,4 @@
@use "sass:color"; @charset "UTF-8";
// Mixes a color with white. // Mixes a color with white.
// //
@ -20,5 +20,5 @@
// @return {Color} // @return {Color}
@function tint($color, $percent) { @function tint($color, $percent) {
@return color.mix(#fff, $color, $percent); @return mix(#fff, $color, $percent);
} }

13
global/_common.scss
View file

@ -1,7 +1,7 @@
// Common styles for global usage // Common styles for global usage
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@use "sass:math"; @use "sass:math";
@use "sass:color";
// General classes // General classes
@ -130,6 +130,7 @@
} }
// Clearing and floating // Clearing and floating
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
.clear { .clear {
@ -168,6 +169,7 @@
} }
// Inlining // Inlining
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
.inline { .inline {
@ -175,6 +177,7 @@
} }
// Flex & grid // Flex & grid
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
%flex-inline { %flex-inline {
@ -202,6 +205,7 @@
} }
// Positioned elements // Positioned elements
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
%viewport_fixed { %viewport_fixed {
@ -272,13 +276,11 @@
.mouse_over { .mouse_over {
@extend %viewport_fixed; @extend %viewport_fixed;
z-index: $z_heaven; z-index: $z_heaven;
background-color: transparentize($color_darkest, 0.5);
transition: background-color $duration_long $timing_basic $duration_long; transition: background-color $duration_long $timing_basic $duration_long;
pointer-events: none; pointer-events: none;
}
&.active {
background-color: color.adjust($color_darkest, $alpha: -0.5);
}
}
// Colors // Colors
@ -292,6 +294,7 @@
} }
// Text // Text
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
.txt_tiny { .txt_tiny {

28
global/_config.scss
View file

@ -1,9 +1,6 @@
@use "sass:color";
@use "sass:map";
@use "sass:math";
// Default configuration // Default configuration
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
@use "sass:math";
@ -89,14 +86,15 @@ $color_brightest: white !default;
$color_text_basic: black !default; $color_text_basic: black !default;
$color_back_basic: #808080 !default; $color_back_basic: #808080 !default;
$color_border_basic: color.scale($color_text_basic, $lightness: 12%) !default; $color_border_basic: lighten($color_text_basic, $color_diff_basic) !default;
$color_front_basic: white !default; $color_front_basic: white !default;
$color_medium: color.scale($color_darkest, $lightness: 50%); $color_medium: lighten($color_darkest, 50%
$color_dark: color.scale($color_darkest, $lightness: $color_diff_double); );
$color_darker: color.scale($color_back_basic, $lightness: -$color_diff_basic); $color_dark: lighten($color_darkest, $color_diff_double);
$color_brighter: color.scale($color_back_basic, $lightness: $color_diff_basic); $color_darker: darken($color_back_basic, $color_diff_basic);
$color_bright: color.scale($color_brightest, $lightness: -$color_diff_double); $color_brighter: lighten($color_back_basic, $color_diff_basic);
$color_bright: darken($color_brightest, $color_diff_double);
$color_head_basic: $color_text_basic !default; $color_head_basic: $color_text_basic !default;
$color_link_basic: $delta_color !default; $color_link_basic: $delta_color !default;
@ -113,8 +111,8 @@ $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))); $map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)));
$color_list: map.merge($color_list, $map); $color_list: map-merge($color_list, $map);
} }
@ -214,9 +212,9 @@ $io_focus_list: 'a[href]',
'textarea:not([disabled])', 'textarea:not([disabled])',
'*[tabindex]'; '*[tabindex]';
$color_text_io: color.scale($color_text_basic, $lightness: $color_diff_basic) !default; $color_text_io: lighten($color_text_basic, $color_diff_basic) !default;
$color_text_button: $color_text_basic !default; $color_text_button: $color_text_basic !default;
$color_back_io: color.scale($color_front_basic, $lightness: -$color_diff_basic) !default; $color_back_io: darken($color_front_basic, $color_diff_basic) !default;
$color_back_button: $color_darker !default; $color_back_button: $color_darker !default;
$color_border_io: $color_front_basic !default; $color_border_io: $color_front_basic !default;
$color_border_button: $color_dark !default; $color_border_button: $color_dark !default;
@ -226,7 +224,7 @@ $border_io: $width_border_io solid $color_border_io;
$border_io_dotted: $width_border_io dotted $color_border_io; $border_io_dotted: $width_border_io dotted $color_border_io;
$shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06); $shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06);
$shadow_focus: $shadow_basic, 0 0 5px color.adjust($color_action_basic, $lightness: -5%, $alpha: -0.3); $shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightness: -5%, $alpha: -0.3);

26
mixins/_color.scss
View file

@ -1,22 +1,20 @@
@use "sass:map";
@mixin addDefaultColors() { @mixin addDefaultColors() {
@if map.has-key($color_palette, alpha) { @if map-has-key($color_palette, alpha) {
$alpha_color: map.get($color_palette, alpha) !global; $alpha_color: map-get($color_palette, alpha) !global;
} }
@if map.has-key($color_palette, bravo) { @if map-has-key($color_palette, bravo) {
$bravo_color: map.get($color_palette, bravo) !global; $bravo_color: map-get($color_palette, bravo) !global;
} }
@if map.has-key($color_palette, charlie) { @if map-has-key($color_palette, charlie) {
$charlie_color: map.get($color_palette, charlie) !global; $charlie_color: map-get($color_palette, charlie) !global;
} }
@if map.has-key($color_palette, delta) { @if map-has-key($color_palette, delta) {
$delta_color: map.get($color_palette, delta) !global; $delta_color: map-get($color_palette, delta) !global;
} }
@if map.has-key($color_palette, echo) { @if map-has-key($color_palette, echo) {
$echo_color: map.get($color_palette, echo) !global; $echo_color: map-get($color_palette, echo) !global;
} }
@if map.has-key($color_palette, foxtrot) { @if map-has-key($color_palette, foxtrot) {
$foxtrot_color: map.get($color_palette, foxtrot) !global; $foxtrot_color: map-get($color_palette, foxtrot) !global;
} }
} }

14
mixins/_sprite.scss
View file

@ -1,5 +1,3 @@
@use "sass:list";
// SCSS variables are information about icon's compiled state, stored under its original file name // SCSS variables are information about icon's compiled state, stored under its original file name
// //
// .icon-home { // .icon-home {
@ -86,21 +84,21 @@ $spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
// // HTML // // HTML
// <i class="icon icon-home"></i> // <i class="icon icon-home"></i>
@mixin sprite-width($sprite) { @mixin sprite-width($sprite) {
width: list.nth($sprite, 5); width: nth($sprite, 5);
} }
@mixin sprite-height($sprite) { @mixin sprite-height($sprite) {
height: list.nth($sprite, 6); height: nth($sprite, 6);
} }
@mixin sprite-position($sprite) { @mixin sprite-position($sprite) {
$sprite-offset-x: list.nth($sprite, 3); $sprite-offset-x: nth($sprite, 3);
$sprite-offset-y: list.nth($sprite, 4); $sprite-offset-y: nth($sprite, 4);
background-position: $sprite-offset-x $sprite-offset-y; background-position: $sprite-offset-x $sprite-offset-y;
} }
@mixin sprite-image($sprite) { @mixin sprite-image($sprite) {
$sprite-image: list.nth($sprite, 9); $sprite-image: nth($sprite, 9);
background-image: url(#{$sprite-image}); background-image: url(#{$sprite-image});
} }
@ -117,7 +115,7 @@ $spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
// @include sprites($spritesheet-sprites); // @include sprites($spritesheet-sprites);
@mixin sprites($sprites) { @mixin sprites($sprites) {
@each $sprite in $sprites { @each $sprite in $sprites {
$sprite-name: list.nth($sprite, 10); $sprite-name: nth($sprite, 10);
.#{$sprite-name} { .#{$sprite-name} {
@include sprite($sprite); @include sprite($sprite);
} }

3
modules/explanation/_explanation_module.scss
View file

@ -1,4 +1,3 @@
@use "sass:color";
@use "sass:math"; @use "sass:math";
%expose_after { %expose_after {
@ -37,7 +36,7 @@
.exp_overlay { .exp_overlay {
@extend %full_parent; @extend %full_parent;
background-color: color.adjust($alpha_color, $alpha: -0.6); background-color: transparentize($alpha_color, .6);
} }
.exp_pop { .exp_pop {

26
modules/io/_io_module.scss
View file

@ -1,21 +1,13 @@
input[type="range"] {
accent-color: $color_text_io;
}
header, header,
aside, aside,
footer { footer {
&.io { &.io {
nav { nav li {
li,
label,
input[type="range"] {
margin: 0; margin: 0;
} }
}
nav>div:not(.spacer),
nav>span, nav>span,
nav label,
.a_button { .a_button {
@extend %basic; @extend %basic;
@extend %size_io_button; @extend %size_io_button;
@ -25,12 +17,7 @@ footer {
@extend .button_io; @extend .button_io;
} }
.group { input {
display: flex;
flex-flow: row nowrap;
}
input:not([type="range"]) {
@extend .input_io; @extend .input_io;
} }
@ -53,6 +40,13 @@ aside {
&.io { &.io {
padding: $space_basic; padding: $space_basic;
input,
button,
textarea,
select {
margin-inline: $space_half;
}
textarea { textarea {
@extend .io_textarea; @extend .io_textarea;
} }

16
modules/print/_print_module.scss
View file

@ -1,5 +1,5 @@
@use "sass:list"; // Custom extends and mixins
// ------------------------------------------------------------------------------
@import "mixins"; @import "mixins";
@import "extends"; @import "extends";
@ -31,18 +31,18 @@ $din: $a4, $a5, $a6;
} }
@each $space in $din { @each $space in $din {
#{list.nth($space, 1)} { #{nth($space, 1)} {
padding-top: list.nth($space, 2) list.nth($space, 3) list.nth($space, 4) list.nth($space, 5); padding-top: nth($space, 2) nth($space, 3) nth($space, 4) nth($space, 5);
.page_head, .page_foot { .page_head, .page_foot {
right: list.nth($space, 3); right: nth($space, 3);
left: list.nth($space, 5); left: nth($space, 5);
} }
.page_head { .page_head {
top: list.nth($space, 2); top: nth($space, 2);
} }
.page_foot { .page_foot {
bottom: list.nth($space, 4); bottom: nth($space, 4);
} }
} }
} }