interaktionsweise/hippie-style
1
1
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fixes to SASS

Browse source 
- Changes to sass:math
- Mediaqueries not working anymore
This commit is contained in:
Stephan Hagedorn 2022-08-08 21:45:53 +02:00
parent 5e667371e6
commit 0214054c81
4 changed files with 27 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
global/_common.scss
View file

@ -1,8 +1,11 @@
// Common styles for global usage
// -----------------------------------------------------------------------------
@use "sass:math";
// General classes
// -----------------------------------------------------------------------------
%size_content {
box-sizing: content-box;
}
@ -94,20 +97,20 @@
.wrap_center {
& > * {
margin-right: (100% - $width_basic) / 2;
margin-left: (100% - $width_basic) / 2;
margin-right: math.div((100% - $width_basic), 2);
margin-left: math.div((100% - $width_basic), 2);
@include forTabletPortraitUp {
margin-right: (100% - $width_small) / 2;
margin-left: (100% - $width_small) / 2;
margin-right: math.div((100% - $width_small), 2);
margin-left: math.div((100% - $width_small), 2);
}
@include forTabletLandscapeUp {
margin-right: (100% - $width_medium) / 2;
margin-left: (100% - $width_medium) / 2;
margin-right: math.div((100% - $width_medium), 2);
margin-left: math.div((100% - $width_medium), 2);
}
@include forBigDesktopUp {
margin-right: (100% - $width_large) / 2;
margin-left: (100% - $width_large) / 2;
margin-right: math.div((100% - $width_large), 2);
margin-left: math.div((100% - $width_large), 2);
}
}
}

3
global/_config.scss
View file

@ -1,5 +1,6 @@
// Default configuration
// ------------------------------------------------------------------------------
@use "sass:math";
@ -131,7 +132,7 @@ $width_aside_basic: 20% !default;
$space_tiny: 1px !default;
$space_basic: $space_tiny * 8 !default;
$space_half: $space_basic / 2;
$space_half: math.div($space_basic, 2);
$space_double: $space_basic * 2;
$space_small: $space_basic * 4;
$space_medium: $space_basic * 8;

8
mixins/_media_query.scss
View file

@ -1,3 +1,5 @@
@use "sass:math";
//Sections for Media Queries
@mixin forPhoneUp {
@media (min-width: #{$screen_tiny - 1}) { @content; } //599px
@ -29,10 +31,12 @@
//Mobile-first Media Query
@mixin goingLarge($width) {
@media (min-width: $width/16+em) { @content; }
// @media (min-width: $width/16+em) { @content; }
// @media (min-width: (math.div($width, 16)+em)) { @content; }
@media (min-width: (math.div($width, 16))) { @content; }
}
//Desktop-first Media Query
@mixin goingSmall($width) {
@media (max-width: $width/16+em) { @content; }
@media (max-width: (math.div($width, 16)+em)) { @content; }
}

11
modules/explanation/_explanation_module.scss
View file

@ -1,5 +1,4 @@
// Explanation module styles
// ------------------------------------------------------------------------------
@use "sass:math";
%expose_after {
&::after {
@ -25,8 +24,8 @@
background-color: rgba($delta_color, 0.1) !important;
}
}
%exp {
}
// %exp {
// }
%exp_hidden {
display: none;
}
@ -54,8 +53,8 @@
}
.exp_marker_pop {
position: absolute;
top: -$size_text_basic / 4 * 3;
right: -$size_text_basic / 2;
top: math.div(-$size_text_basic, 4) * 3;
right: math.div(-$size_text_basic, 2);
width: $size_text_basic;
height: $size_text_basic;
border: $space_tiny solid $color_highlight_basic;