Relative Sizes
This commit is contained in:
parent
fb826216b0
commit
96d47dc56a
@ -4,4 +4,5 @@
|
||||
@import 'flexGrid/flexGrid';
|
||||
@import 'contentCrop/contentCrop';
|
||||
@import 'fan/fan';
|
||||
@import 'fullWidthContent/fullWidthContent';
|
||||
@import 'fullWidthContent/fullWidthContent';
|
||||
@import 'sizes/sizes';
|
39
components/01_Layouts/sizes/_sizes.scss
Normal file
39
components/01_Layouts/sizes/_sizes.scss
Normal 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
1
components/01_Layouts/sizes/sizes.config.json
Normal file
@ -0,0 +1 @@
|
||||
{}
|
96
components/01_Layouts/sizes/sizes.hbs
Normal file
96
components/01_Layouts/sizes/sizes.hbs
Normal 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>
|
||||
|
Loading…
Reference in New Issue
Block a user