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

10 years later #1

Merged
sthag merged 374 commits from development into main 2026-03-07 00:18:59 +01:00
Conversation 0 Commits 374 Files changed 135 +68 -30
3 changed files with 68 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 65d80fcbc4 - Show all commits

4
.editorconfig
View file

@ -7,3 +7,7 @@ indent_size = 4
indent_style = tab indent_style = tab
insert_final_newline = false insert_final_newline = false
max_line_length = 120 max_line_length = 120
[*.{css,scss}]
tab_width = 2
indent_size = tab

2
source/style/demo.scss
View file

@ -1,6 +1,6 @@
// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss // Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss
// Then import your config and hippie // Then import your config and hippie
// NOTE // No css rules allowed in here // NOTE: No css rules allowed in here
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
@import "demo_config"; @import "demo_config";
@import "hippie-style/hippie"; @import "hippie-style/hippie";

88
source/style/modules/demo/_demo_module.scss
View file

@ -134,60 +134,84 @@
margin: $space_small 0 $space_basic 0; margin: $space_small 0 $space_basic 0;
} }
.demo__button_32 {
width: 32px;
height: 32px;
}
.demo__queries > p { .demo__queries > p {
padding: $padding_basic; padding: $padding_basic;
} }
.query_phoneUp { .query_phoneUp {
@include forPhoneUp {background-color: rgba($color_text_basic, 0.2)}; @include forPhoneUp {
background-color: rgba($color_text_basic, 0.2)
}
;
} }
.query_phoneOnly { .query_phoneOnly {
@include forPhoneOnly { background-color: rgba($color_text_basic, 0.2); } @include forPhoneOnly {
background-color: rgba($color_text_basic, 0.2);
}
} }
.query_tabletPortaitOnly { .query_tabletPortaitOnly {
@include forTabletPortraitOnly { background-color: rgba($color_text_basic, 0.2); } @include forTabletPortraitOnly {
background-color: rgba($color_text_basic, 0.2);
}
} }
.query_tabletPortraitUp { .query_tabletPortraitUp {
@include forTabletPortraitUp { background-color: rgba($color_text_basic, 0.2); } @include forTabletPortraitUp {
background-color: rgba($color_text_basic, 0.2);
}
} }
.query_tabletLandscapeOnly { .query_tabletLandscapeOnly {
@include forTabletLandscapeOnly { background-color: rgba($color_text_basic, 0.2); } @include forTabletLandscapeOnly {
background-color: rgba($color_text_basic, 0.2);
}
} }
.query_tabletLandscapeUp { .query_tabletLandscapeUp {
@include forTabletLandscapeUp { background-color: rgba($color_text_basic, 0.2); } @include forTabletLandscapeUp {
background-color: rgba($color_text_basic, 0.2);
}
} }
.query_desktopOnly { .query_desktopOnly {
@include forDesktopOnly { background-color: rgba($color_text_basic, 0.2); } @include forDesktopOnly {
background-color: rgba($color_text_basic, 0.2);
}
} }
.query_desktopUp { .query_desktopUp {
@include forDesktopUp { background-color: rgba($color_text_basic, 0.2); } @include forDesktopUp {
background-color: rgba($color_text_basic, 0.2);
}
} }
.query_bigDesktopUp { .query_bigDesktopUp {
@include forBigDesktopUp { background-color: rgba($color_text_basic, 0.2); } @include forBigDesktopUp {
background-color: rgba($color_text_basic, 0.2);
}
} }
.demo__query_example { .demo__query_example {
@include goingLarge($screen_tiny) {background-color: $alpha_color; } @include goingLarge($screen_tiny) {
@include goingLarge($screen_small) {background-color: $bravo_color; } background-color: $alpha_color;
@include goingLarge($screen_medium) {background-color: $charlie_color; } }
@include goingLarge($screen_large) {background-color: $delta_color; } @include goingLarge($screen_small) {
@include goingLarge($screen_huge) {background-color: $echo_color; } background-color: $bravo_color;
@include goingLarge($screen_gigantic) {background-color: $foxtrot_color; } }
@include goingLarge($screen_medium) {
background-color: $charlie_color;
}
@include goingLarge($screen_large) {
background-color: $delta_color;
}
@include goingLarge($screen_huge) {
background-color: $echo_color;
}
@include goingLarge($screen_gigantic) {
background-color: $foxtrot_color;
}
margin-bottom: $space_small; margin-bottom: $space_small;
padding: $space_small; padding: $space_small;
text-align: center; text-align: center;
@ -195,19 +219,29 @@
&:after { &:after {
@extend code; @extend code;
@include goingLarge($screen_tiny) { @include goingLarge($screen_tiny) {
& { content: '768px'; } & {
content: '768px';
}
} }
@include goingLarge($screen_small) { @include goingLarge($screen_small) {
& { content: '1024px'; } & {
content: '1024px';
}
} }
@include goingLarge($screen_medium) { @include goingLarge($screen_medium) {
& { content: '1280px'; } & {
content: '1280px';
}
} }
@include goingLarge($screen_huge) { @include goingLarge($screen_huge) {
& { content: '1680px'; } & {
content: '1680px';
}
} }
@include goingLarge($screen_gigantic) { @include goingLarge($screen_gigantic) {
& { content: '1920px'; } & {
content: '1920px';
}
} }
content: '< 768px'; content: '< 768px';
padding: $padding_basic; padding: $padding_basic;