(Re)Moving Sizes/Add Dummy sizes
This commit is contained in:
parent
3dfc19111b
commit
d070cc07bf
@ -1,7 +1,7 @@
|
||||
@import 'sizes/_sizes'
|
||||
@import 'contentCrop/_contentCrop'
|
||||
@import 'fullWidthContent/_fullWidthContent'
|
||||
@import 'flexRow/_flexRow'
|
||||
@import 'flexGrid/_flexGrid'
|
||||
@import 'fan/_fan'
|
||||
@import 'alignment/_alignment'
|
||||
@import 'alignment/_alignment'
|
||||
@import 'dummy/_dummy'
|
15
components/01_Layouts/dummy/_dummy.styl
Normal file
15
components/01_Layouts/dummy/_dummy.styl
Normal file
@ -0,0 +1,15 @@
|
||||
+RV-Block('RV-Dummy')
|
||||
+RV-Block__Modifier('square')
|
||||
height 350px
|
||||
width 350px
|
||||
|
||||
+RV-Block__Modifier('portrait')
|
||||
height 350px
|
||||
width 150px
|
||||
|
||||
+RV-Block__Modifier('landscape')
|
||||
width 350px
|
||||
height 150px
|
||||
|
||||
+RV-Block__Modifier('red')
|
||||
background-color #d8583e
|
0
components/01_Layouts/dummy/dummy.hbs
Normal file
0
components/01_Layouts/dummy/dummy.hbs
Normal file
@ -90,19 +90,27 @@ RV-FlexRow__Item--fixedSize(width)
|
||||
*/
|
||||
RV-FlexRow__Item--half()
|
||||
+RV-Element__Modifier--name('half')
|
||||
RV-Sizes--half()
|
||||
flex-grow 0
|
||||
flex-shrink 0
|
||||
flex-basis 50%
|
||||
|
||||
RV-FlexRow__Item--third()
|
||||
+RV-Element__Modifier--name('third')
|
||||
RV-Sizes--third()
|
||||
flex-grow 0
|
||||
flex-shrink 0
|
||||
flex-basis (100/3)%
|
||||
|
||||
RV-FlexRow__Item--quarter()
|
||||
+RV-Element__Modifier--name('quarter')
|
||||
RV-Sizes--quarter()
|
||||
flex-grow 0
|
||||
flex-shrink 0
|
||||
flex-basis 25%
|
||||
|
||||
RV-FlexRow__Item--content()
|
||||
+RV-Element__Modifier--name('content')
|
||||
RV-Sizes--content()
|
||||
flex-grow 0
|
||||
flex-shrink 0
|
||||
flex-basis max-content
|
||||
|
||||
/* ##########
|
||||
* Block
|
||||
|
@ -1,51 +0,0 @@
|
||||
RV-Sizes--half()
|
||||
+RV-Block__Modifier--name('half')
|
||||
flex-grow 0
|
||||
flex-shrink 0
|
||||
flex-basis 50%
|
||||
width 50%
|
||||
|
||||
RV-Sizes--third()
|
||||
+RV-Block__Modifier--name('third')
|
||||
flex-grow 0
|
||||
flex-shrink 0
|
||||
flex-basis (100/3)%
|
||||
width (100/3)%
|
||||
|
||||
RV-Sizes--quarter()
|
||||
+RV-Block__Modifier--name('quarter')
|
||||
flex-grow 0
|
||||
flex-shrink 0
|
||||
flex-basis 25%
|
||||
width 25%
|
||||
|
||||
RV-Sizes--fixedSize(width=100px)
|
||||
+RV-Block__Modifier--name('fixedSize')
|
||||
flex-grow 0
|
||||
flex-shrink 0
|
||||
width min-content
|
||||
flex-basis width
|
||||
|
||||
RV-Sizes--content()
|
||||
+RV-Block__Modifier--name('content')
|
||||
flex-grow 0
|
||||
flex-shrink 0
|
||||
width max-content
|
||||
flex-basis max-content
|
||||
|
||||
+RV-Block('RV-Sizes')
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-Sizes--half()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-Sizes--third()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-Sizes--quarter()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-Sizes--fixedSize()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-Sizes--content()
|
@ -1,96 +0,0 @@
|
||||
<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