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

Moving alignment to contentshape

Browse Source
This commit is contained in:
reverend
2021-03-09 17:47:07 +01:00
parent 232ac04942
commit 4bbf3cb17b
6 changed files with 3 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/02_ContentShape/_contentShape.styl
View File

@@ -1,4 +1,5 @@
@import 'aspectRatio/_aspectRatio'
@import 'focalPoint/_focalPoint'
@import 'shape/_shape'
@import 'truncation/_truncation'
@import 'truncation/_truncation'
@import 'alignment/_alignment'

42
components/02_ContentShape/alignment/_alignment.styl Normal file
View File

@@ -0,0 +1,42 @@
RV-Alignment()
display grid
RV-Alignment--top()
+RV-Block--modifier()
align-content start
RV-Alignment--bottom()
+RV-Block--modifier()
align-content end
RV-Alignment--left()
+RV-Block--modifier()
justify-content start
RV-Alignment--right()
+RV-Block--modifier()
justify-content: end
RV-Alignment--horizontalCenter()
+RV-Block--modifier()
justify-content center
RV-Alignment--verticalCenter()
+RV-Block--modifier()
align-items center
RV-Alignment--center()
+RV-Block--modifier()
align-items center
justify-content center
+RV-Block('RV-Alignment')
RV-Alignment()
RV-Alignment--top()
RV-Alignment--bottom()
RV-Alignment--left()
RV-Alignment--right()
RV-Alignment--horizontalCenter()
RV-Alignment--verticalCenter()
RV-Alignment--center()

1
components/02_ContentShape/alignment/alignment.config.json Normal file
View File

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

46
components/02_ContentShape/alignment/alignment.hbs Normal file
View File

@@ -0,0 +1,46 @@
<style>
.RV-FlexGrid {
--item-height: 150px;
--item-width: 150px;
}
</style>
<div class="RV-FlexGrid RV-FlexGrid--fixedSize RV-Spacing__Inner--medium">
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
<div class="RV-Alignment RV-Alignment--top">
<p>Aligned Top</p>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
<div class="RV-Alignment RV-Alignment--left">
<p>Aligned Left</p>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
<div class="RV-Alignment RV-Alignment--bottom">
<p>Aligned Bottom</p>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
<div class="RV-Alignment RV-Alignment--right">
<p>Aligned Right</p>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
<div class="RV-Alignment RV-Alignment--verticalCenter">
<p>Aligned v center</p>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
<div class="RV-Alignment RV-Alignment--horizontalCenter">
<p>Aligned</p>
<p>h</p>
<p>center</p>
</div>
</div>
</div>