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

style: Add editorconfig for css

Browse source 
Change indentation for CSS and SCSS to 2 instead of the default which is 4.
This commit is contained in:
sthag 2025-10-25 09:15:41 +02:00
parent 50b0d864c2
commit 65d80fcbc4
3 changed files with 68 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.editorconfig
View file

@ -7,3 +7,7 @@ indent_size = 4
indent_style = tab
insert_final_newline = false
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
// Then import your config and hippie
// NOTE // No css rules allowed in here
// NOTE: No css rules allowed in here
// ------------------------------------------------------------------------------
@import "demo_config";
@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;
}
.demo__button_32 {
width: 32px;
height: 32px;
}
.demo__queries > p {
padding: $padding_basic;
}
.query_phoneUp {
@include forPhoneUp {background-color: rgba($color_text_basic, 0.2)};
@include forPhoneUp {
background-color: rgba($color_text_basic, 0.2)
}
;
}
.query_phoneOnly {
@include forPhoneOnly { background-color: rgba($color_text_basic, 0.2); }
@include forPhoneOnly {
background-color: rgba($color_text_basic, 0.2);
}
}
.query_tabletPortaitOnly {
@include forTabletPortraitOnly { background-color: rgba($color_text_basic, 0.2); }
@include forTabletPortraitOnly {
background-color: rgba($color_text_basic, 0.2);
}
}
.query_tabletPortraitUp {
@include forTabletPortraitUp { background-color: rgba($color_text_basic, 0.2); }
@include forTabletPortraitUp {
background-color: rgba($color_text_basic, 0.2);
}
}
.query_tabletLandscapeOnly {
@include forTabletLandscapeOnly { background-color: rgba($color_text_basic, 0.2); }
@include forTabletLandscapeOnly {
background-color: rgba($color_text_basic, 0.2);
}
}
.query_tabletLandscapeUp {
@include forTabletLandscapeUp { background-color: rgba($color_text_basic, 0.2); }
@include forTabletLandscapeUp {
background-color: rgba($color_text_basic, 0.2);
}
}
.query_desktopOnly {
@include forDesktopOnly { background-color: rgba($color_text_basic, 0.2); }
@include forDesktopOnly {
background-color: rgba($color_text_basic, 0.2);
}
}
.query_desktopUp {
@include forDesktopUp { background-color: rgba($color_text_basic, 0.2); }
@include forDesktopUp {
background-color: rgba($color_text_basic, 0.2);
}
}
.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 {
@include goingLarge($screen_tiny) {background-color: $alpha_color; }
@include goingLarge($screen_small) {background-color: $bravo_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; }
@include goingLarge($screen_tiny) {
background-color: $alpha_color;
}
@include goingLarge($screen_small) {
background-color: $bravo_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;
padding: $space_small;
text-align: center;
@ -195,19 +219,29 @@
&:after {
@extend code;
@include goingLarge($screen_tiny) {
& { content: '768px'; }
& {
content: '768px';
}
}
@include goingLarge($screen_small) {
& { content: '1024px'; }
& {
content: '1024px';
}
}
@include goingLarge($screen_medium) {
& { content: '1280px'; }
& {
content: '1280px';
}
}
@include goingLarge($screen_huge) {
& { content: '1680px'; }
& {
content: '1680px';
}
}
@include goingLarge($screen_gigantic) {
& { content: '1920px'; }
& {
content: '1920px';
}
}
content: '< 768px';
padding: $padding_basic;