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

Converting Layouts to Stylus

Browse Source
This commit is contained in:
reverend
2021-01-03 12:36:12 +01:00
parent 3f3874427c
commit 333aa9d1b5
36 changed files with 1088 additions and 1773 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/01_Layouts/_layouts.scss
View File

@@ -1,8 +0,0 @@
@import 'alignment/alignment';
@import 'flexRow/flexRow';
@import 'flexGrid/flexGrid';
@import 'contentCrop/contentCrop';
@import 'fan/fan';
@import 'fullWidthContent/fullWidthContent';
@import 'sizes/sizes';

7
components/01_Layouts/_layouts.styl Normal file
View File

@@ -0,0 +1,7 @@
@import 'sizes/_sizes'
@import 'alignment/_alignment'
@import 'contentCrop/_contentCrop'
@import 'fan/_fan'
@import 'flexGrid/_flexGrid'
@import 'flexRow/_flexRow'
@import 'fullWidthContent/_fullWidthContent'

70
components/01_Layouts/alignment/_alignment.scss
View File

@@ -1,70 +0,0 @@
@mixin RV-Alignment--top {
display: grid;
align-content: start;
}
@mixin RV-Alignment--bottom {
display: grid;
align-content: end;
}
@mixin RV-Alignment--left {
display: grid;
justify-content: start;
}
@mixin RV-Alignment--right {
display: grid;
justify-content: end;
}
@mixin RV-Alignment--horizontalCenter {
display: grid;
justify-content: center;
}
@mixin RV-Alignment--verticalCenter {
display: grid;
align-items: center;
}
@mixin RV-Alignment--center {
@include RV-Alignment--horizontalCenter;
@include RV-Alignment--verticalCenter;
}
@mixin RV-Alignment($-prefix: '&') {
display: grid;
#{$-prefix}--top {
@include RV-Alignment--top;
}
#{$-prefix}--bottom {
@include RV-Alignment--bottom;
}
#{$-prefix}--left {
@include RV-Alignment--left;
}
#{$-prefix}--right {
@include RV-Alignment--right;
}
#{$-prefix}--horizontalCenter {
@include RV-Alignment--horizontalCenter;
}
#{$-prefix}--verticalCenter {
@include RV-Alignment--verticalCenter;
}
#{$-prefix}--center {
@include RV-Alignment--center;
}
}
.RV-Alignment {
@include RV-Alignment;
}

55
components/01_Layouts/alignment/_alignment.styl Normal file
View File

@@ -0,0 +1,55 @@
RV-Alignment--top()
display grid
align-content start
RV-Alignment--bottom()
display grid
align-content end
RV-Alignment--left()
display grid
justify-content start
RV-Alignment--right()
display grid
justify-content: end
RV-Alignment--horizontalCenter()
display grid
justify-content center
RV-Alignment--verticalCenter()
display grid
align-items center
RV-Alignment--center()
RV-Alignment--horizontalCenter()
RV-Alignment--verticalCenter()
RV-Alignment(prefix='&')
display grid
{prefix}--top
RV-Alignment--top()
{prefix}--bottom
RV-Alignment--bottom()
{prefix}--left
RV-Alignment--left()
{prefix}--right
RV-Alignment--right()
{prefix}--horizontalCenter
RV-Alignment--horizontalCenter()
{prefix}--verticalCenter
RV-Alignment--verticalCenter()
{prefix}--center
RV-Alignment--center()
.RV-Alignment
RV-Alignment()

200
components/01_Layouts/contentCrop/_contentCrop.scss
View File

@@ -1,200 +0,0 @@
@mixin RV-ContentCrop--bottom {
img {
object-position: bottom;
}
}
@mixin RV-ContentCrop--top {
img {
object-position: top;
}
}
@mixin RV-ContentCrop--right {
img {
object-position: right;
}
}
@mixin RV-ContentCrop--left {
img {
object-position: left;
}
}
@mixin RV-ContentCrop--center {
img {
object-position: center;
}
}
@mixin RV-ContentCrop__Text--fade($-background-color: white) {
&--fade {
&:after {
background: linear-gradient(180deg, rgba(255, 255, 255, 0), #{$-background-color});
display: block;
content: ' ';
opacity: 0.8;
position: relative;
top: -25%;
width: 100%;
height: 25%;
z-index: -10;
}
}
}
@mixin RV-ContentCrop__Text--ellipsis($-background-color: white) {
&--ellipsis {
&:after {
position: relative;
display: block;
bottom: 1.2em;
left: calc(100% - 3ch);
content: '...';
font-size: 1.2em;
min-width: 2em;
background-color: $-background-color;
padding: 0 2px;
}
}
}
@mixin RV-ContentCrop__Text($-line-height: 1.1, $-background-color: white) {
p {
overflow: hidden;
display: block;
text-overflow: ellipsis;
padding: 0;
margin: 0;
line-height: #{$-line-height};
// Determining the max line count and caclulating the height
z-index: -20;
position: relative;
background-color: #{$-background-color};
height: floor(100% / $-line-height / 16) * $-line-height * 16;
}
&--fade {
@include RV-ContentCrop__Text--fade($-background-color);
}
&--ellipsis {
@include RV-ContentCrop__Text--ellipsis($-background-color);
}
}
@mixin RV-ContentCrop__Shapes--square {
width: 100%;
padding-top: 100%;
position: relative;
img,
div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
@mixin RV-ContentCrop__Shapes--circle {
@include RV-ContentCrop__Shapes--square;
border-radius: 50%;
}
@mixin RV-ContentCrop__Shapes--xtoy($-x, $-y) {
width: 100%;
padding-top: 100% * ($-y / $-x);
position: relative;
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
@mixin RV-ContentCrop__Shapes {
&--square {
@include RV-ContentCrop__Shapes--square;
}
&--circle {
@include RV_ContentCrop__Shapes--circle;
}
&--1to2 {
@include RV-ContentCrop__Shapes--xtoy(1, 2);
}
&--2to1 {
@include RV-ContentCrop__Shapes--xtoy(2, 1);
}
&--4to3 {
@include RV-ContentCrop__Shapes--xtoy(4, 3);
}
&--16to9 {
@include RV-ContentCrop__Shapes--xtoy(16, 9);
}
&--3to2 {
@include RV-ContentCrop__Shapes--xtoy(3, 2);
}
}
@mixin RV-ContentCrop__Image {
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
@mixin RV-ContentCrop($-line-height: 1.1, $-prefix: '&') {
// Heuristic, just to be safe
$-line-height: $-line-height * 1.1;
$-background-color: white;
display: block;
overflow: hidden;
@include RV-ContentCrop__Image;
@include RV-ContentCrop__Text($-line-height);
@include RV-ContentCrop__Shapes;
&--left {
@include RV-ContentCrop--left;
}
&--center {
@include RV-ContentCrop--center;
}
&--top {
@include RV-ContentCrop--top;
}
&--bottom {
@include RV-ContentCrop--bottom;
}
&--center {
@include RV-ContentCrop--center;
}
}
.RV-ContentCrop {
@include RV-ContentCrop;
}

154
components/01_Layouts/contentCrop/_contentCrop.styl Normal file
View File

@@ -0,0 +1,154 @@
RV-ContentCrop--bottom()
img
object-position bottom
RV-ContentCrop--top()
img
object-position top
RV-ContentCrop--right()
img
object-position right
RV-ContentCrop--left()
img
object-position left
RV-ContentCrop--center()
img
object-position center
RV-ContentCrop__Text--fade(background-color=white)
&:after
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
display block
content ' '
opacity 0.8
position relative
top -25%
width 100%
height 25%
z-index -10
RV-ContentCrop__Text--ellipsis(background-color=white)
&:after
position relative
display block
bottom 1.2em
left calc(100% - 3ch)
content '...'
font-size 1.2em
min-width 2em
background-color background-color
padding 0 2px
RV-ContentCrop__Text(line-height=1.1, background-color=white)
p
overflow hidden
display block
text-overflow ellipsis
padding 0
margin 0
line-height line-height
// Determining the max line count and caclulating the height
z-index -20
position relative
background-color background-color
height floor(100% / line-height / 16) * line-height * 16
&--fade
RV-ContentCrop__Text--fade(background-color)
&--ellipsis
RV-ContentCrop__Text--ellipsis(background-color)
RV-ContentCrop__Shapes--square()
width 100%
padding-top 100%
position relative
img,
div
position absolute
top 0
left 0
bottom 0
right 0
RV_ContentCrop__Shapes--circle()
RV-ContentCrop__Shapes--square()
border-radius 50%
RV-ContentCrop__Shapes--xtoy(-x, -y)
width 100%
padding-top 100% * (-y / -x)
position relative
img
object-fit cover
position absolute
top 0
left 0
bottom 0
right 0
RV-ContentCrop__Shapes()
&--square
RV-ContentCrop__Shapes--square()
&--circle
RV_ContentCrop__Shapes--circle()
&--1to2
RV-ContentCrop__Shapes--xtoy(1, 2)
&--2to1
RV-ContentCrop__Shapes--xtoy(2, 1)
&--4to3
RV-ContentCrop__Shapes--xtoy(4, 3)
&--16to9
RV-ContentCrop__Shapes--xtoy(16, 9)
&--3to2
RV-ContentCrop__Shapes--xtoy(3, 2)
RV-ContentCrop__Image()
img
width 100%
height 100%
object-fit cover
display block
RV-ContentCrop(line-height=1.1, prefix='&')
// Heuristic, just to be safe
line-height = line-height * 1.1
background-color = white
display block
overflow hidden
RV-ContentCrop__Image()
RV-ContentCrop__Text(line-height)
RV-ContentCrop__Shapes()
&--left
RV-ContentCrop--left()
&--center
RV-ContentCrop--center()
&--top
RV-ContentCrop--top()
&--bottom
RV-ContentCrop--bottom()
&--center
RV-ContentCrop--center()
.RV-ContentCrop
RV-ContentCrop()

69
components/01_Layouts/fan/_fan.scss
View File

@@ -1,69 +0,0 @@
@mixin RV-Fan--horizontal($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
#{$-prefix}__Container#{$-suffix} {
flex-direction: row;
}
#{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
min-width: $-base_width;
height: $-base_height;
}
}
@mixin RV-Fan--vertical($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
#{$-prefix}__Container#{$-suffix} {
flex-direction: column;
width: max-content;
}
#{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
width: $-base_width;
min-height: $-base_height;
}
}
@mixin RV-Fan--auto($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
#{$-prefix}__Container#{$-suffix} {
flex-flow: row wrap;
}
#{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
width: calc(100% - #{$-base_width});
min-width: $-base-width;
height: $-base_height;
}
}
@mixin RV-Fan--fullWidth($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
#{$-prefix}__Container#{$-suffix} #{$-prefix}__Base,
#{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
flex-grow: 1;
}
}
@mixin RV-Fan ($-base_height, $-base_width, $-prefix: '&') {
@include RV-Fan--vertical($-base_height, $-base_width, $-prefix, '--vertical');
@include RV-Fan--horizontal($-base_height, $-base_width, $-prefix, '--horizontal');
@include RV-Fan--auto($-base_height, $-base_width, $-prefix, '--auto');
@include RV-Fan--fullWidth($-base_height, $-base_width, $-prefix, '--fullWidth');
#{$-prefix}__Container {
display: flex;
}
#{$-prefix}__Base {
height: $-base_height;
width: $-base_width;
flex: 0 0 auto;
}
#{$-prefix}__Surface {
@include RV-ContentCrop;
}
}
.RV-Fan {
@include RV-Fan(280px, 320px);
}

53
components/01_Layouts/fan/_fan.styl Normal file
View File

@@ -0,0 +1,53 @@
RV-Fan--horizontal(base_height, base_width, prefix='&', suffix= '')
{prefix}__Container{suffix}
flex-direction row
{prefix}__Container{suffix} {prefix}__Surface
min-width base_width
height base_height
RV-Fan--vertical(base_height, base_width, prefix='&', suffix='')
{prefix}__Container{suffix}
flex-direction column
width max-content
{prefix}__Container{suffix} {prefix}__Surface
width base_width
min-height base_height
RV-Fan--auto(base_height, base_width, prefix='&', suffix='')
{prefix}__Container{suffix}
flex-flow row wrap
{prefix}__Container{suffix} {prefix}__Surface
width 'calc(100% - %s)' % base_width
min-width base_width
height base_height
RV-Fan--fullWidth(base_height, base_width, prefix='&', suffix='')
{prefix}__Container{suffix} {prefix}__Base,
{prefix}__Container{suffix} {prefix}__Surface
flex-grow 1
RV-Fan(base_height, base_width, prefix='&')
RV-Fan--vertical(base_height, base_width, prefix, '--vertical')
RV-Fan--horizontal(base_height, base_width, prefix, '--horizontal')
RV-Fan--auto(base_height, base_width, prefix, '--auto')
RV-Fan--fullWidth(base_height, base_width, prefix, '--fullWidth')
{prefix}__Container
display flex
{prefix}__Base
height base_height
width base_width
flex 0 0 auto
{prefix}__Surface
RV-ContentCrop()
.RV-Fan
RV-Fan(280px, 320px)

49
components/01_Layouts/flexGrid/_flexGrid.scss
View File

@@ -1,49 +0,0 @@
@mixin RV-FlexGrid__Container {
display: grid;
}
@mixin RV-FlexGrid__Container--autoWidth($-item-height: 300px, $-item-min-width: 300px) {
grid-template-columns: repeat(auto-fill, minmax($-item-min-width, 1fr));
grid-template-rows: repeat(auto-fill, minmax($-item-height, 1fr));
grid-auto-rows: minmax($-item-height, 1fr);
}
@mixin RV-FlexGrid__Container--fixedSize($-item-height: 300px, $-item-width: 300px) {
@include RV-FlexGrid__Container--autoWidth($-item-height, $-item-width);
grid-template-columns: repeat(auto-fill, $-item-width);
justify-content: space-between;
}
@mixin RV-FlexGrid__Container--masonry($-item-width: 300px) {
display: block;
column-count: auto;
column-width: $-item-width;
@include RV-Utils__Hook--throw(());
}
@mixin RV-FlexGrid($-prefix: '&') {
#{$-prefix}__Container {
@include RV-FlexGrid__Container;
&--autoWidth {
@include RV-FlexGrid__Container--autoWidth;
}
&--fixedSize {
@include RV-FlexGrid__Container--fixedSize;
}
&--masonry {
@include RV-FlexGrid__Container--masonry;
}
}
#{$-prefix}__Item {
@include RV-Alignment;
}
}
.RV-FlexGrid {
@include RV-FlexGrid;
}

44
components/01_Layouts/flexGrid/_flexGrid.styl Normal file
View File

@@ -0,0 +1,44 @@
RV-FlexGrid__Container()
display grid
RV-FlexGrid__Container--autoWidth(item-height=300px, item-min-width=300px)
grid-template-columns repeat(auto-fill, minmax(item-min-width, 1fr))
grid-template-rows repeat(auto-fill, minmax(item-height, 1fr))
grid-auto-rows minmax(item-height, 1fr)
RV-FlexGrid__Container--fixedSize(item-height=300px, item-width=300px)
RV-FlexGrid__Container--autoWidth(item-height, item-width)
grid-template-columns repeat(auto-fill, item-width)
justify-content space-between
RV-FlexGrid__Container--masonry(item-width=300px)
display unquote(block)
column-count auto
column-width item-width
RV-Utils__Hook--throw('masonry_grid', @(gap){
*{
margin-bottom: gap;
}
}
)
RV-FlexGrid(prefix='&')
{prefix}__Container
RV-FlexGrid__Container()
&--autoWidth
RV-FlexGrid__Container--autoWidth()
&--fixedSize
RV-FlexGrid__Container--fixedSize()
&--masonry
RV-FlexGrid__Container--masonry()
{prefix}__Item
RV-Alignment()
.RV-FlexGrid
RV-FlexGrid()

232
components/01_Layouts/flexRow/_flexRow.scss
View File

@@ -1,232 +0,0 @@
/*
* Classes for easy flexrow usage
*/
/* ##########
* Container class
########### */
@mixin RV-FlexRow__Container($-prefix: '&') {
display: flex;
height: 100%;
}
/*
* Orientation
*/
@mixin RV-FlexRow__Container--horizontal {
flex-direction: row;
}
@mixin RV-FlexRow__Container--vertical {
flex-direction: column;
}
/*
* Breaks from row to column orientation at the given breakpoint
* breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint.
*/
@mixin RV-FlexRow__Container--breakPoint($-localBreakPoint: 500px, $-mediaBreakPoint: null) {
flex-wrap: wrap;
@include RV-Reset;
gap: 0px;
@include RV-Utils__Hook--throw(('breakPoint': $-localBreakPoint),
'RV-Spacing__Inner--small',
'RV-Spacing__Inner--medium',
'RV-Spacing__Inner--large'
);
* {
flex-basis: calc(#{$-localBreakPoint} * 999 - 100% * 999);
}
@if ($-mediaBreakPoint !=null) {
@media(max-width: $-mediaBreakPoint) {
@include RV-FlexRow__Container--column;
}
}
}
/*
* Flexbox behavior, Row is horizontal, but item are wraped individualy
*/
@mixin RV-FlexRow__Container--auto {
@include RV-FlexRow__Container--horizontal;
flex-wrap: wrap;
}
/*
* Shorthand for the modifiers above
*/
@mixin RV-FlexRow__Container--shorthands($-break_width: 500px) {
&--breakPoint {
@include RV-FlexRow__Container--breakPoint(#{$-break_width});
}
&--horizontal {
@include RV-FlexRow__Container--horizontal;
}
&--vertical {
@include RV-FlexRow__Container--vertical;
}
&--auto {
@include RV-FlexRow__Container--auto;
}
}
/* ##########
* Item class
########### */
@mixin RV-FlexRow__Item {
flex-basis: max-content;
@include RV-FlexRow__Item--normal;
}
/*
* Varios relative width of items to each other
*/
@mixin RV-FlexRow__Item--normal {
flex-grow: 3;
flex-shrink: 3;
}
@mixin RV-FlexRow__Item--narrower {
flex-grow: 1;
flex-shrink: 5;
}
@mixin RV-FlexRow__Item--narrow {
flex-grow: 2;
flex-shrink: 4;
}
@mixin RV-FlexRow__Item--wide {
flex-grow: 4;
flex-shrink: 2;
}
@mixin RV-FlexRow__Item--wider {
flex-grow: 5;
flex-shrink: 1;
}
/*
* Item has always the given width
*/
@mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
flex-grow: 0;
flex-shrink: 0;
width: min-content;
flex-basis: $-width;
}
/*
* Item width relativ to the container
*/
@mixin RV-FlexRow__Item--half {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
width: 50%;
}
@mixin RV-FlexRow__Item--third {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 33.33%;
width: 33.33%;
}
@mixin RV-FlexRow__Item--quarter {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 25%;
width: 25%;
}
@mixin RV-FlexRow__Item--content {
flex-grow: 0;
flex-shrink: 0;
width: max-content;
flex-basis: max-content;
}
/*
* Shorthand for the modifiers above
*/
@mixin RV-FlexRow__Item--shorthands() {
@include RV-Alignment;
&--narrower {
@include RV-FlexRow__Item--narrower;
}
&--narrow {
@include RV-FlexRow__Item--narrow;
}
&--wide {
@include RV-FlexRow__Item--wide;
}
&--wider {
@include RV-FlexRow__Item--wider;
}
&--fixedSize {
@include RV-FlexRow__Item--fixedSize;
}
&--half {
@include RV-FlexRow__Item--half;
}
&--third {
@include RV-FlexRow__Item--third;
}
&--quarter {
@include RV-FlexRow__Item--quarter;
}
&--content {
@include RV-FlexRow__Item--content;
}
}
/*
* Combining basic classes
*/
@mixin RV-FlexRow($-prefix: '&') {
#{$-prefix}__Container {
@include RV-FlexRow__Container($-prefix: $-prefix);
}
#{$-prefix}__Item {
@include RV-FlexRow__Item;
}
}
/*
* Combining shorthands
*/
@mixin RV-FlexRow--shorthands($-break_width: 500px, $-prefix: '&') {
#{$-prefix}__Container {
@include RV-FlexRow__Container--shorthands($-break_width);
}
#{$-prefix}__Item {
@include RV-FlexRow__Item--shorthands;
}
}
/*
* Final CSS Class
*/
.RV-FlexRow {
@include RV-FlexRow;
@include RV-FlexRow--shorthands;
}

182
components/01_Layouts/flexRow/_flexRow.styl Normal file
View File

@@ -0,0 +1,182 @@
/*
* Classes for easy flexrow usage
*/
/* ##########
* Container class
########### */
RV-FlexRow__Container(prefix='&')
display flex
height 100%
/*
* Orientation
*/
RV-FlexRow__Container--horizontal()
flex-direction row
RV-FlexRow__Container--vertical()
flex-direction column
/*
* Breaks from row to column orientation at the given breakpoint
* breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint.
*/
RV-FlexRow__Container--breakPoint(localBreakPoint=500px, mediaBreakPoint=null)
flex-wrap wrap
RV-Reset()
gap 0px
RV-Utils__Hook--throw('flexrow_breakpoint_gap', @(gap){
RV-Utils__ElementAmount(@(index, total){
min-width "calc((%s - (%s * (%s - 1))) / %s - (2 * %s))" % (localBreakPoint gap index index gap)
*{
min-width initial
}
}
)
}
)
*{
flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
}
if mediaBreakPoint !=null
@media(max-width mediaBreakPoint)
RV-FlexRow__Container--column()
/*
* Flexbox behavior, Row is horizontal, but item are wraped individualy
*/
RV-FlexRow__Container--auto()
RV-FlexRow__Container--horizontal()
flex-wrap wrap
/*
* Shorthand for the modifiers above
*/
RV-FlexRow__Container--shorthands(break_width=500px)
&--breakPoint
RV-FlexRow__Container--breakPoint(break_width)
&--horizontal
RV-FlexRow__Container--horizontal()
&--vertical
RV-FlexRow__Container--vertical()
&--auto
RV-FlexRow__Container--auto()
/* ##########
* Item class
########### */
RV-FlexRow__Item()
flex-basis max-content
RV-FlexRow__Item--normal()
/*
* Varios relative width of items to each other
*/
RV-FlexRow__Item--normal()
flex-grow 3
flex-shrink 3
RV-FlexRow__Item--narrower()
flex-grow 1
flex-shrink 5
RV-FlexRow__Item--narrow()
flex-grow 2
flex-shrink 4
RV-FlexRow__Item--wide()
flex-grow 4
flex-shrink 2
RV-FlexRow__Item--wider()
flex-grow 5
flex-shrink 1
/*
* Item has always the given width
*/
RV-FlexRow__Item--fixedSize(width=100px)
RV-Sizes--fixedSize(width)
/*
* Item width relativ to the container
*/
RV-FlexRow__Item--half()
RV-Sizes--half()
RV-FlexRow__Item--third()
RV-Sizes--third()
RV-FlexRow__Item--quarter()
RV-Sizes--quarter()
RV-FlexRow__Item--content()
RV-Sizes--content()
/*
* Shorthand for the modifiers above
*/
RV-FlexRow__Item--shorthands()
RV-Alignment()
&--narrower
RV-FlexRow__Item--narrower()
&--narrow
RV-FlexRow__Item--narrow()
&--wide()
RV-FlexRow__Item--wide()
&--wider
RV-FlexRow__Item--wider()
&--fixedSize
RV-FlexRow__Item--fixedSize()
&--half
RV-FlexRow__Item--half()
&--third
RV-FlexRow__Item--third()
&--quarter
RV-FlexRow__Item--quarter()
&--content
RV-FlexRow__Item--content()
/*
* Combining basic classes
*/
RV-FlexRow(prefix='&')
{prefix}__Container
RV-FlexRow__Container(prefix=prefix)
{prefix}__Item
RV-FlexRow__Item()
/*
* Combining shorthands
*/
RV-FlexRow--shorthands(break_width=500px, prefix='&')
{prefix}__Container
RV-FlexRow__Container--shorthands(break_width)
{prefix}__Item
RV-FlexRow__Item--shorthands()
/*
* Final CSS Class
*/
.RV-FlexRow
RV-FlexRow()
RV-FlexRow--shorthands()

2
components/01_Layouts/flexRow/flexRow.hbs
View File

@@ -29,7 +29,7 @@
</div>
<br><br>
<div class="RV-FlexRow__Container RV-FlexRow__Container--auto">
<div class="RV-FlexRow__Container RV-FlexRow__Container--breakPoint">
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">sdfkjsakfjsdök</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">adfasfsd</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">asfsdfasd</div>

22
components/01_Layouts/fullWidthContent/_fullWidthContent.scss
View File

@@ -1,22 +0,0 @@
@mixin RV-FullWidthContent__Container {
width: 100%;
}
@mixin RV-FullWidthContent__Item {
width: 100%;
@include RV-ContentCrop;
}
@mixin RV-FullWidthContent($-prefix: '&') {
#{$-prefix}__Container {
@include RV-FullWidthContent__Container;
}
#{$-prefix}__Item {
@include RV-FullWidthContent__Item;
}
}
.RV-FullWidthContent {
@include RV-FullWidthContent;
}

16
components/01_Layouts/fullWidthContent/_fullWidthContent.styl Normal file
View File

@@ -0,0 +1,16 @@
RV-FullWidthContent__Container()
width 100%
RV-FullWidthContent__Item()
width 100%
RV-ContentCrop()
RV-FullWidthContent(prefix='&')
{prefix}__Container
RV-FullWidthContent__Container()
{prefix}__Item
RV-FullWidthContent__Item()
.RV-FullWidthContent
RV-FullWidthContent()

39
components/01_Layouts/sizes/_sizes.scss
View File

@@ -1,39 +0,0 @@
@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;
}

49
components/01_Layouts/sizes/_sizes.styl Normal file
View File

@@ -0,0 +1,49 @@
RV-Sizes--half()
flex-grow 0
flex-shrink 0
flex-basis 50%
width 50%
RV-Sizes--third()
flex-grow 0
flex-shrink 0
flex-basis (100/3)%
width (100/3)%
RV-Sizes--quarter()
flex-grow 0
flex-shrink 0
flex-basis 25%
width 25%
RV-Sizes--fixedSize(width=100px)
flex-grow 0
flex-shrink 0
width min-content
flex-basis width
RV-Sizes--content()
flex-grow 0
flex-shrink 0
width max-content
flex-basis max-content
RV-Sizes(prefix='&')
{prefix}--half
RV-Sizes--half()
{prefix}--third
RV-Sizes--third()
{prefix}--quarter
RV-Sizes--quarter()
{prefix}--fixedSize
RV-Sizes--fixedSize
{prefix}--content
RV-Sizes--content
.RV-Sizes
RV-Sizes()