Alignment as Layout Feature
This commit is contained in:
parent
97164e6acc
commit
0da890ddb7
@ -1,40 +1,3 @@
|
|||||||
@mixin RV-AlignContent {
|
|
||||||
* {
|
|
||||||
text-align: unset;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--fixedSize {
|
|
||||||
flex: 0 0;
|
|
||||||
width: min-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--center {
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
* {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--left {
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
* {
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--right {
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
* {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin RV-Reset {
|
@mixin RV-Reset {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
72
components/01_Layouts/alignment/_alignment.scss
Normal file
72
components/01_Layouts/alignment/_alignment.scss
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
@mixin RV-Alignment--top {
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin RV-Alignment--bottom {
|
||||||
|
align-content: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin RV-Alignment--left {
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin RV-Alignment--right {
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin RV-Alignment--horizontalCenter {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin RV-Alignment--verticalCenter {
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin RV-Alignment--center {
|
||||||
|
@include RV-Alignment--horizontalCenter;
|
||||||
|
@include RV-Alignment--verticalCenter;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin RV-Alignment {
|
||||||
|
&__Container {
|
||||||
|
display: grid;
|
||||||
|
|
||||||
|
&--top {
|
||||||
|
@include RV-Alignment--top;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--bottom {
|
||||||
|
@include RV-Alignment--bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--left {
|
||||||
|
@include RV-Alignment--left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--right {
|
||||||
|
@include RV-Alignment--right;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--horizontalCenter {
|
||||||
|
@include RV-Alignment--horizontalCenter;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--verticalCenter {
|
||||||
|
@include RV-Alignment--verticalCenter;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--center {
|
||||||
|
@include RV-Alignment--center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.RV-Alignment {
|
||||||
|
@include RV-Alignment;
|
||||||
|
|
||||||
|
&__Item {
|
||||||
|
&--right {
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
1
components/01_Layouts/alignment/alignment.config.json
Normal file
1
components/01_Layouts/alignment/alignment.config.json
Normal file
@ -0,0 +1 @@
|
|||||||
|
{}
|
20
components/01_Layouts/alignment/alignment.hbs
Normal file
20
components/01_Layouts/alignment/alignment.hbs
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<div class="RV-Alignment__Container RV-Alignment__Container--verticalCenter RV-Spacing__Outer--medium">
|
||||||
|
<div class="RV-FlexRow__Container">
|
||||||
|
<div class="RV-FlexRow__Item">Im a text</div>
|
||||||
|
<div class="RV-FlexRow__Item RV-FlexRow__Item--fixedSize"><span class="RV-Iconized__Container">
|
||||||
|
<svg class="RV-Iconized__Icon--small" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 482.136 482.135" style="enable-background:new 0 0 482.136 482.135;"
|
||||||
|
xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path d="M455.482,198.184L326.829,326.832c-35.535,35.54-93.108,35.54-128.646,0l-42.881-42.886l42.881-42.876l42.884,42.876
|
||||||
|
c11.845,11.822,31.064,11.846,42.886,0l128.644-128.643c11.816-11.831,11.816-31.066,0-42.9l-42.881-42.881
|
||||||
|
c-11.822-11.814-31.064-11.814-42.887,0l-45.928,45.936c-21.292-12.531-45.491-17.905-69.449-16.291l72.501-72.526
|
||||||
|
c35.535-35.521,93.136-35.521,128.644,0l42.886,42.881C491.018,105.045,491.018,162.663,455.482,198.184z M201.206,366.698
|
||||||
|
l-45.903,45.9c-11.845,11.846-31.064,11.817-42.881,0l-42.884-42.881c-11.845-11.821-11.845-31.041,0-42.886l128.646-128.648
|
||||||
|
c11.819-11.814,31.069-11.814,42.884,0l42.886,42.886l42.876-42.886l-42.876-42.881c-35.54-35.521-93.113-35.521-128.65,0
|
||||||
|
L26.655,283.946c-35.538,35.545-35.538,93.146,0,128.652l42.883,42.882c35.51,35.54,93.11,35.54,128.646,0l72.496-72.499
|
||||||
|
C246.724,384.578,222.588,379.197,201.206,366.698z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
Loading…
Reference in New Issue
Block a user