diff --git a/components/00_Global/_alignment.scss b/components/00_Global/_alignment.scss index d8f8ef2..75b9154 100644 --- a/components/00_Global/_alignment.scss +++ b/components/00_Global/_alignment.scss @@ -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 { margin: 0; padding: 0; diff --git a/components/01_Layouts/alignment/_alignment.scss b/components/01_Layouts/alignment/_alignment.scss new file mode 100644 index 0000000..c24e5e4 --- /dev/null +++ b/components/01_Layouts/alignment/_alignment.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/components/01_Layouts/alignment/alignment.config.json b/components/01_Layouts/alignment/alignment.config.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/components/01_Layouts/alignment/alignment.config.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/components/01_Layouts/alignment/alignment.hbs b/components/01_Layouts/alignment/alignment.hbs new file mode 100644 index 0000000..28c03c0 --- /dev/null +++ b/components/01_Layouts/alignment/alignment.hbs @@ -0,0 +1,20 @@ +
+
+
Im a text
+
+ + + + + +
+
+
\ No newline at end of file