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

feat: New io module

Browse source 
- Add module for io
- Move common io parts to new module
This commit is contained in:
sthag 2025-06-22 15:48:01 +02:00
parent c7179c7a3d
commit 3d23ba55d4
3 changed files with 106 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

1
_hippie.scss
View file

@ -26,6 +26,7 @@
// Additional Modules and variables
// in dependency to other basic styles
// -----------------------------------------------------------------------------
@import "modules/io/io_module";
@import "modules/navigation/nav_module";
@import "modules/editor/editor_module";
@import "modules/explanation/explanation_module";

96
elements/_sections.scss
View file

@ -144,6 +144,18 @@ aside {
button {
@extend .button_io;
}
.a_button {
display: flex;
}
ul.vertical li {
margin-bottom: $space_half;
.a_button > *:last-child {
margin-left: auto;
}
}
}
}
@ -203,69 +215,8 @@ h6 {
// Header
// -----------------------------------------------------------------------------
header {}
.header_page {
overflow: auto;
}
.header_txt {
margin-bottom: $space_small;
border-bottom: $border_dotted;
h1 {
border-top: $border_basic;
}
}
header,
aside,
footer {
header {
&.io {
.span_solo {
border: $width_border_io solid transparent;
padding: $padding_basic;
}
}
}
header.io,
aside.io {
padding: $space_basic;
input,
button,
textarea,
select {
margin-inline: $space_half;
}
input {
@extend .input_io;
}
textarea {
@extend .io_textarea;
}
select {
@extend .io_select;
}
button {
@extend .button_io;
}
}
header,
footer {
&.io {
@extend %flex-inline;
align-items: stretch;
}
}
header.io {
z-index: map.get($z-indexes, "content-top");
&>*:last-child *:last-child {
@ -282,10 +233,6 @@ header.io {
align-items: stretch;
}
nav li {
margin: 0;
}
nav:last-child {
margin-left: auto;
}
@ -294,8 +241,23 @@ header.io {
margin: 0;
}
}
}
.header_page {
overflow: auto;
}
.header_txt {
margin-bottom: $space_small;
border-bottom: $border_dotted;
h1 {
border-top: $border_basic;
}
}
header // Footer
// Footer
// -----------------------------------------------------------------------------
footer {
&.io {

65
modules/io/_io_module.scss Normal file
View file

@ -0,0 +1,65 @@
header,
aside,
footer {
&.io {
nav li {
margin: 0;
}
nav > div:not(.spacer),
nav > span,
.a_button {
@extend %basic;
@extend %size_io_button;
}
.a_button {
color: $color_text_io;
background-color: $color_back_io;
&:active,
&:focus,
&:hover {
background-color: transparentize($color_highlight_basic, 0.8);
}
}
}
}
header,
aside {
&.io {
padding: $space_basic;
input,
button,
textarea,
select {
margin-inline: $space_half;
}
input {
@extend .input_io;
}
textarea {
@extend .io_textarea;
}
select {
@extend .io_select;
}
button {
@extend .button_io;
}
}
}
header,
footer {
&.io {
@extend %flex-inline;
align-items: stretch;
}
}