reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Relative Sizes

Browse Source
This commit is contained in:
reverend
2020-12-27 15:59:43 +01:00
parent fb826216b0
commit 96d47dc56a
4 changed files with 138 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/01_Layouts/_layouts.scss
View File

@@ -5,3 +5,4 @@
@import 'contentCrop/contentCrop';
@import 'fan/fan';
@import 'fullWidthContent/fullWidthContent';
@import 'sizes/sizes';

39
components/01_Layouts/sizes/_sizes.scss Normal file
View File

@@ -0,0 +1,39 @@
@mixin RV-Sizes($-prefix: '&') {
#{$-prefix}--half {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
width: 50%;
}
#{$-prefix}--third {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 33.33%;
width: 33.33%;
}
#{$-prefix}--quarter {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 25%;
width: 25%;
}
#{$-prefix}--fixedSize {
flex-grow: 0;
flex-shrink: 0;
}
#{$-prefix}--content {
flex-grow: 0;
flex-shrink: 0;
width: max-content;
flex-basis: max-content;
}
}
.RV-Sizes {
@include RV-Sizes;
}

1
components/01_Layouts/sizes/sizes.config.json Normal file
View File

@@ -0,0 +1 @@
{}

96
components/01_Layouts/sizes/sizes.hbs Normal file
View File

@@ -0,0 +1,96 @@
<div class="grid">
<div>
<div class="red RV-Sizes--half">
non flexbox, half size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br>
<div>
<div class="red RV-Sizes--third">
non flexbox, third size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br>
<div>
<div class="red RV-Sizes--quarter">
non flexbox, quarter size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br>
<div>
<div class="red RV-Sizes--fixedSize" style="width: 150px;">
non flexbox, fixed size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br>
<div>
<div class="red RV-Sizes--content">
non flexbox, content size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br><br>
using flexbox<br>
<div class="RV-FlexRow__Container">
<div class="red RV-Sizes--half">
non flexbox, half size
</div>
<div class="green RV-Sizes--quarter">
non flexbox, quarter size
</div>
<inline class="red">
other, no class
</inline>
</div>
<br>
<div class="RV-FlexRow__Container">
<div class="red RV-Sizes--third">
non flexbox, third size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br>
<div class="RV-FlexRow__Container">
<div class="red RV-Sizes--quarter">
non flexbox, quarter size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br>
<div class="RV-FlexRow__Container">
<div class="red RV-Sizes--fixedSize" style="width: 150px;">
non flexbox, fixed size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br>
<div class="RV-FlexRow__Container">
<div class="red RV-Sizes--content">
non flexbox, content size
</div>
<inline class="green">
other, no class
</inline>
</div>
</div>