diff --git a/components/01_Layouts/alignment/_alignment.scss b/components/01_Layouts/alignment/_alignment.scss index 1997587..b5dccae 100644 --- a/components/01_Layouts/alignment/_alignment.scss +++ b/components/01_Layouts/alignment/_alignment.scss @@ -25,7 +25,7 @@ @mixin RV-Alignment--verticalCenter { display: grid; - align-content: center; + align-items: center; } @mixin RV-Alignment--center { diff --git a/components/01_Layouts/flexRow/_flexRow.scss b/components/01_Layouts/flexRow/_flexRow.scss index 77c551d..d50661d 100644 --- a/components/01_Layouts/flexRow/_flexRow.scss +++ b/components/01_Layouts/flexRow/_flexRow.scss @@ -11,7 +11,7 @@ @mixin RV-FlexRow__Container { display: flex; flex-direction: row; - justify-content: space-around; + height: 100%; &--multiRow { @include RV-FlexRow__Container--multiRow; @@ -83,6 +83,12 @@ } } +@mixin RV-FlexRow--multiRow { + &__Container { + @include RV-FlexRow__Container--multiRow; + } +} + @mixin RV-FlexRow { &__Container { @include RV-FlexRow__Container; diff --git a/components/02_Styles/boxShadow/_boxShadow.scss b/components/02_Styles/boxShadow/_boxShadow.scss index 05d2e5e..164de89 100644 --- a/components/02_Styles/boxShadow/_boxShadow.scss +++ b/components/02_Styles/boxShadow/_boxShadow.scss @@ -1,11 +1,11 @@ -@mixin RV-BoxShadow($color) { +@mixin RV-BoxShadow--simple($-color) { + box-shadow: 0 0 10px $-color; +} + +@mixin RV-BoxShadow($-color) { position:relative; float:left; - width:40%; - margin:2em 10px 4em; - background:#fff; - box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; &:before, &:after { content:""; @@ -14,7 +14,7 @@ } &--simple { - box-shadow: 0 0 20px $color; + @include RV-BoxShadow--simple($-color); } &--raised { diff --git a/components/02_Styles/iconized/_iconized.scss b/components/02_Styles/iconized/_iconized.scss index 446864f..bb31336 100644 --- a/components/02_Styles/iconized/_iconized.scss +++ b/components/02_Styles/iconized/_iconized.scss @@ -2,6 +2,10 @@ &__Container { position: relative; + &--small { + top: -.25em; + } + &--medium { top: -.5em; } @@ -19,12 +23,20 @@ @include RV-Reset; } - &__Container--small &__Icon{ + &__Container--extraSmall &__Icon{ width: 1em; height: 1em; position: relative; top: .125em; } + + &__Container--small &__Icon{ + width: 1.5em; + height: 1.5em; + position: relative; + top: .45em; + } + &__Container--medium &__Icon{ width: 2em; height: 2em; diff --git a/components/02_Styles/iconized/iconized.hbs b/components/02_Styles/iconized/iconized.hbs index 9a292e7..bb78b9e 100644 --- a/components/02_Styles/iconized/iconized.hbs +++ b/components/02_Styles/iconized/iconized.hbs @@ -1,7 +1,23 @@ + + + + + + + This is a text + +
- - - + + + + This is a text @@ -26,19 +42,15 @@ You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. - - - - - + + + + + + Wurstwasser You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. diff --git a/public/rcss.css b/public/rcss.css index dd18dbf..441049c 100644 --- a/public/rcss.css +++ b/public/rcss.css @@ -18,76 +18,77 @@ justify-content: center; } .RV-Alignment__Container--verticalCenter { display: grid; - align-content: center; } + align-items: center; } .RV-Alignment__Container--center { display: grid; justify-content: center; display: grid; - align-content: center; } + align-items: center; } .RV-FlexRow__Container { display: flex; flex-direction: row; - justify-content: space-around; } + height: 100%; } .RV-FlexRow__Container--multiRow { flex-wrap: wrap; } + .RV-FlexRow__Container--column { + display: flex; + flex-direction: column; } -.RV-FlexRow__Item__Container { - display: grid; } - .RV-FlexRow__Item__Container--top { - display: grid; - align-content: start; } - .RV-FlexRow__Item__Container--bottom { - display: grid; - align-content: end; } - .RV-FlexRow__Item__Container--left { - display: grid; - justify-content: start; } - .RV-FlexRow__Item__Container--right { - display: grid; - justify-content: end; } - .RV-FlexRow__Item__Container--horizontalCenter { - display: grid; - justify-content: center; } - .RV-FlexRow__Item__Container--verticalCenter { - display: grid; - align-content: center; } - .RV-FlexRow__Item__Container--center { - display: grid; - justify-content: center; - display: grid; - align-content: center; } - -.RV-FlexRow__Item, .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; } - -.RV-FlexRow__Item--fixedSize { - flex-grow: 0; - flex-shrink: 0; - width: min-content; } +.RV-FlexRow__Item { + min-width: min-content; + width: 100%; } + .RV-FlexRow__Item__Container { + display: grid; } + .RV-FlexRow__Item__Container--top { + display: grid; + align-content: start; } + .RV-FlexRow__Item__Container--bottom { + display: grid; + align-content: end; } + .RV-FlexRow__Item__Container--left { + display: grid; + justify-content: start; } + .RV-FlexRow__Item__Container--right { + display: grid; + justify-content: end; } + .RV-FlexRow__Item__Container--horizontalCenter { + display: grid; + justify-content: center; } + .RV-FlexRow__Item__Container--verticalCenter { + display: grid; + align-items: center; } + .RV-FlexRow__Item__Container--center { + display: grid; + justify-content: center; + display: grid; + align-items: center; } + .RV-FlexRow__Item, .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; } + .RV-FlexRow__Item--fixedSize { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: 100px; } .RV-FlexGrid__Container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-template-rows: repeat(auto-fill, 300px); - grid-auto-rows: 300px; } + grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); + grid-auto-rows: minmax(300px, 1fr); } .RV-FlexGrid__Item__Container { display: grid; } @@ -108,12 +109,12 @@ justify-content: center; } .RV-FlexGrid__Item__Container--verticalCenter { display: grid; - align-content: center; } + align-items: center; } .RV-FlexGrid__Item__Container--center { display: grid; justify-content: center; display: grid; - align-content: center; } + align-items: center; } .RV-ContentCrop__Container, .RV-ContentCrop__Container * { overflow: hidden; @@ -293,6 +294,8 @@ .RV-Iconized__Container { position: relative; } + .RV-Iconized__Container--small { + top: -.25em; } .RV-Iconized__Container--medium { top: -.5em; } .RV-Iconized__Container--large { @@ -309,12 +312,18 @@ right: 0; border: none; } -.RV-Iconized__Container--small .RV-Iconized__Icon { +.RV-Iconized__Container--extraSmall .RV-Iconized__Icon { width: 1em; height: 1em; position: relative; top: .125em; } +.RV-Iconized__Container--small .RV-Iconized__Icon { + width: 1.5em; + height: 1.5em; + position: relative; + top: .45em; } + .RV-Iconized__Container--medium .RV-Iconized__Icon { width: 2em; height: 2em; @@ -355,8 +364,8 @@ .RV-ImageGrid__Container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-template-rows: repeat(auto-fill, 300px); - grid-auto-rows: 300px; } + grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); + grid-auto-rows: minmax(300px, 1fr); } .RV-ImageGrid__Item__Container { display: grid; } @@ -377,12 +386,12 @@ justify-content: center; } .RV-ImageGrid__Item__Container--verticalCenter { display: grid; - align-content: center; } + align-items: center; } .RV-ImageGrid__Item__Container--center { display: grid; justify-content: center; display: grid; - align-content: center; } + align-items: center; } .RV-ImageGrid__Container { padding: 25px; }