Converting Layouts to Stylus
This commit is contained in:
parent
3f3874427c
commit
333aa9d1b5
@ -1,9 +0,0 @@
|
||||
@mixin RV-Reset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border: none;
|
||||
}
|
||||
8
components/00_Global/_alignment.styl
Normal file
8
components/00_Global/_alignment.styl
Normal file
@ -0,0 +1,8 @@
|
||||
RV-Reset()
|
||||
margin 0
|
||||
padding 0
|
||||
top 0
|
||||
bottom 0
|
||||
left 0
|
||||
right 0
|
||||
border none
|
||||
@ -1,9 +0,0 @@
|
||||
@mixin RV-Utils__ElementAmount($-up-to: 20) {
|
||||
@for $i from 1 through $-up-to {
|
||||
|
||||
*:first-child:nth-last-child(#{$i}),
|
||||
*:first-child:nth-last-child(#{$i})~* {
|
||||
@content($i);
|
||||
}
|
||||
}
|
||||
}
|
||||
6
components/00_Global/_elementAmount.styl
Normal file
6
components/00_Global/_elementAmount.styl
Normal file
@ -0,0 +1,6 @@
|
||||
RV-Utils__ElementAmount(callback, up-to=20)
|
||||
for i in (1..up-to)
|
||||
|
||||
*:first-child:nth-last-child({i}),
|
||||
*:first-child:nth-last-child({i})~*
|
||||
callback(i, up-to)
|
||||
@ -1,4 +0,0 @@
|
||||
@import './selectorHook';
|
||||
@import './elementAmount';
|
||||
|
||||
@import './alignment';
|
||||
4
components/00_Global/_global.styl
Normal file
4
components/00_Global/_global.styl
Normal file
@ -0,0 +1,4 @@
|
||||
@import './_selectorHook'
|
||||
|
||||
@import './_elementAmount'
|
||||
@import './_alignment'
|
||||
@ -1,90 +0,0 @@
|
||||
$-hooks: ();
|
||||
@use "sass:meta";
|
||||
|
||||
|
||||
/*
|
||||
* A system to store a context for a CSS-Selector.
|
||||
* Can be used to apply speacial rules when mixins are combined
|
||||
*/
|
||||
|
||||
@function str-replace($string, $search, $replace: '') {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
/*
|
||||
* Generates a key-safe version of the selector
|
||||
*/
|
||||
@function _generate_selector_identifier() {
|
||||
$-path: str-replace(#{&}, '.', '');
|
||||
$-path: str-replace(#{$-path}, ' ', '');
|
||||
|
||||
@return $-path;
|
||||
}
|
||||
|
||||
@function hook($-key, $-value) {
|
||||
|
||||
$-path: _generate_selector_identifier();
|
||||
|
||||
$-context: ();
|
||||
|
||||
@if map-has-key($-hooks, $-path) {
|
||||
$-context: map-get($-hooks, $-path);
|
||||
}
|
||||
|
||||
$-context: map-merge($-context, ($-key: $-value));
|
||||
|
||||
$-hooks: map-merge($-hooks, ($-path: $-context)) !global;
|
||||
|
||||
@return 'Creating Hook for '+#{&}+' with '+#{$-key}+': '+#{$-value};
|
||||
}
|
||||
|
||||
@function append-hook($-kwargs) {
|
||||
$-path: _generate_selector_identifier();
|
||||
|
||||
$-hooks: map-merge($-hooks, ($-path: map-merge(get-hook(), $-kwargs))) !global;
|
||||
@return 'Added '+inspect($-kwargs)+' to the hook of '+#{&};
|
||||
}
|
||||
|
||||
@function has-hook() {
|
||||
@return map-has-key($-hooks, _generate_selector_identifier());
|
||||
}
|
||||
|
||||
@function get-hook() {
|
||||
$-map: map-get($-hooks, _generate_selector_identifier());
|
||||
|
||||
@if $-map !=null {
|
||||
@return $-map;
|
||||
}
|
||||
|
||||
@return ('selectors': ());
|
||||
}
|
||||
|
||||
@function get-hook-value($-key) {
|
||||
|
||||
$-hook: get-hook();
|
||||
|
||||
@if $-hook !=null {
|
||||
@if map-has-key($-hook, $-key) {
|
||||
@return map-get($-hook, $-key);
|
||||
}
|
||||
}
|
||||
|
||||
@return null;
|
||||
}
|
||||
|
||||
@mixin RV-Utils__Hook--catch {
|
||||
|
||||
@if has-hook() {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin RV-Utils__Hook--throw($-kwargs, $-css-selectors...) {
|
||||
@debug append-hook($-kwargs);
|
||||
}
|
||||
32
components/00_Global/_selectorHook.styl
Normal file
32
components/00_Global/_selectorHook.styl
Normal file
@ -0,0 +1,32 @@
|
||||
_thrown_hooks = {}
|
||||
_caught_hooks = {}
|
||||
|
||||
RV-Utils__Hook--throw(name, callback)
|
||||
if name in _thrown_hooks
|
||||
hook = _thrown_hooks[name]
|
||||
else
|
||||
hook = {}
|
||||
|
||||
hook[selector()] = callback
|
||||
_thrown_hooks[name] = hook
|
||||
|
||||
RV-Utils__Hook--catch(name, context)
|
||||
if selector() in _caught_hooks
|
||||
_catches = _caught_hooks[selector()]
|
||||
else
|
||||
_catches = {}
|
||||
_catches[name] = context
|
||||
_caught_hooks[selector()] = _catches
|
||||
|
||||
for name, hook in _thrown_hooks
|
||||
if selector() in hook
|
||||
hook[selector()](context)
|
||||
|
||||
_generate_hooks()
|
||||
for catched_selector, catches in _caught_hooks
|
||||
for name, context in catches
|
||||
if name in _thrown_hooks
|
||||
hook = _thrown_hooks[name]
|
||||
for thrown_selector, callback in hook
|
||||
{thrown_selector}{catched_selector}
|
||||
callback(context)
|
||||
@ -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
7
components/01_Layouts/_layouts.styl
Normal 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'
|
||||
@ -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
55
components/01_Layouts/alignment/_alignment.styl
Normal 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()
|
||||
@ -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
154
components/01_Layouts/contentCrop/_contentCrop.styl
Normal 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()
|
||||
@ -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
53
components/01_Layouts/fan/_fan.styl
Normal 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)
|
||||
@ -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
44
components/01_Layouts/flexGrid/_flexGrid.styl
Normal 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()
|
||||
@ -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
182
components/01_Layouts/flexRow/_flexRow.styl
Normal 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()
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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()
|
||||
@ -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
49
components/01_Layouts/sizes/_sizes.styl
Normal 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()
|
||||
@ -1,3 +0,0 @@
|
||||
@import 'boxShadow/boxShadow';
|
||||
@import 'spacing/spacing';
|
||||
@import 'iconized/iconized';
|
||||
6
components/02_Styles/_styles.styl
Normal file
6
components/02_Styles/_styles.styl
Normal file
@ -0,0 +1,6 @@
|
||||
@import 'spacing/_spacing'
|
||||
|
||||
/*
|
||||
@import 'boxShadow/boxShadow';
|
||||
@import 'iconized/iconized';
|
||||
*/
|
||||
@ -1,99 +0,0 @@
|
||||
@use "sass:meta";
|
||||
|
||||
@mixin RV-Spacing__Outer--small {
|
||||
margin: $-spacing-small;
|
||||
}
|
||||
|
||||
@mixin RV-Spacing__Outer--medium {
|
||||
margin: $-spacing-medium;
|
||||
}
|
||||
|
||||
@mixin RV-Spacing__Outer--large {
|
||||
margin: $-spacing-large;
|
||||
}
|
||||
|
||||
@mixin _flexrow_breakpoint_min_width($-gap) {
|
||||
|
||||
@include RV-Utils__Hook--catch {
|
||||
$-breakpoint: get-hook-value('breakPoint');
|
||||
|
||||
@include RV-Utils__ElementAmount using($-index) {
|
||||
min-width: calc((#{$-breakpoint} - (#{$-gap} * (#{$-index} - 1))) / #{$-index} - (2 * #{$-gap}));
|
||||
|
||||
* {
|
||||
min-width: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _flexgrid_masonry_column_gap($-gap) {
|
||||
|
||||
@include RV-Utils__Hook--catch {
|
||||
* {
|
||||
margin: $-gap/2 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin RV-Spacing__Inner--small() {
|
||||
padding: $-spacing-small;
|
||||
gap: $-spacing-small;
|
||||
column-gap: $-spacing-small;
|
||||
|
||||
@include _flexrow_breakpoint_min_width($-spacing-small);
|
||||
@include _flexgrid_masonry_column_gap($-spacing-small);
|
||||
}
|
||||
|
||||
@mixin RV-Spacing__Inner--medium() {
|
||||
padding: $-spacing-medium;
|
||||
gap: $-spacing-medium;
|
||||
column-gap: $-spacing-medium;
|
||||
|
||||
@include _flexrow_breakpoint_min_width($-spacing-medium);
|
||||
@include _flexgrid_masonry_column_gap($-spacing-medium);
|
||||
}
|
||||
|
||||
@mixin RV-Spacing__Inner--large() {
|
||||
padding: $-spacing-large;
|
||||
gap: $-spacing-large;
|
||||
column-gap: $-spacing-large;
|
||||
|
||||
@include _flexrow_breakpoint_min_width($-spacing-large);
|
||||
@include _flexgrid_masonry_column_gap($-spacing-medium);
|
||||
}
|
||||
|
||||
@mixin RV-Spacing {
|
||||
&__Outer {
|
||||
&--small {
|
||||
@include RV-Spacing__Outer--small;
|
||||
}
|
||||
|
||||
&--medium {
|
||||
@include RV-Spacing__Outer--medium;
|
||||
}
|
||||
|
||||
&--large {
|
||||
@include RV-Spacing__Outer--large;
|
||||
}
|
||||
}
|
||||
|
||||
&__Inner {
|
||||
&--small {
|
||||
@include RV-Spacing__Inner--small;
|
||||
}
|
||||
|
||||
&--medium {
|
||||
@include RV-Spacing__Inner--medium;
|
||||
}
|
||||
|
||||
&--large {
|
||||
@include RV-Spacing__Inner--large;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.RV-Spacing {
|
||||
@include RV-Spacing;
|
||||
}
|
||||
56
components/02_Styles/spacing/_spacing.styl
Normal file
56
components/02_Styles/spacing/_spacing.styl
Normal file
@ -0,0 +1,56 @@
|
||||
|
||||
RV-Spacing__Outer--small()
|
||||
margin spacing-small
|
||||
|
||||
RV-Spacing__Outer--medium()
|
||||
margin spacing-medium
|
||||
|
||||
RV-Spacing__Outer--large()
|
||||
margin spacing-large
|
||||
|
||||
|
||||
RV-Spacing__Inner--small()
|
||||
padding spacing-small
|
||||
gap spacing-small
|
||||
column-gap spacing-small
|
||||
|
||||
RV-Utils__Hook--catch('masonry_grid', spacing-small)
|
||||
|
||||
RV-Spacing__Inner--medium()
|
||||
padding spacing-medium
|
||||
gap spacing-medium
|
||||
column-gap spacing-medium
|
||||
|
||||
RV-Utils__Hook--catch('masonry_grid', spacing-medium)
|
||||
|
||||
RV-Spacing__Inner--large()
|
||||
padding spacing-large
|
||||
gap spacing-large
|
||||
column-gap spacing-large
|
||||
|
||||
RV-Utils__Hook--catch('masonry_grid', spacing-large)
|
||||
|
||||
RV-Spacing(prefix='&')
|
||||
{prefix}__Outer
|
||||
&--small
|
||||
RV-Spacing__Outer--small()
|
||||
|
||||
&--medium
|
||||
RV-Spacing__Outer--medium()
|
||||
|
||||
&--large
|
||||
RV-Spacing__Outer--large()
|
||||
|
||||
{prefix}__Inner
|
||||
&--small
|
||||
RV-Spacing__Inner--small()
|
||||
|
||||
&--medium
|
||||
RV-Spacing__Inner--medium()
|
||||
|
||||
&--large
|
||||
RV-Spacing__Inner--large()
|
||||
|
||||
.RV-Spacing
|
||||
RV-Spacing()
|
||||
test()
|
||||
@ -1,9 +0,0 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import '00_Global/global';
|
||||
@import '01_Layouts/layouts';
|
||||
@import '02_Styles/styles';
|
||||
@import '04_Molecules/molecules';
|
||||
@import '05_Components/components';
|
||||
|
||||
@import '10_Examples/examples';
|
||||
9
components/_components.styl
Normal file
9
components/_components.styl
Normal file
@ -0,0 +1,9 @@
|
||||
@import '00_Global/_global'
|
||||
|
||||
@import '02_Styles/_styles'
|
||||
|
||||
@import '01_Layouts/_layouts'
|
||||
//@import '04_Molecules/_molecules'
|
||||
//@import '05_Components/_components'
|
||||
|
||||
//@import '10_Examples/_examples'
|
||||
@ -3,19 +3,18 @@
|
||||
<head>
|
||||
<meta contentType="text/html; charset=UTF-8"/>
|
||||
<link rel="stylesheet" href="{{ path '/rcss.css' }}">
|
||||
<link rel="stylesheet" href="{{ path '/playground.css' }}">
|
||||
<title>Preview</title>
|
||||
|
||||
<style>
|
||||
.red{
|
||||
background-color: firebrick;
|
||||
margin: -2px;
|
||||
padding: -2px;
|
||||
border: 1px black solid;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: forestgreen;
|
||||
margin: -2px;
|
||||
padding: -2px;
|
||||
border: 1px black solid;
|
||||
}
|
||||
|
||||
|
||||
10
components/rcss.styl
Normal file
10
components/rcss.styl
Normal file
@ -0,0 +1,10 @@
|
||||
// Padding and Margin sizes
|
||||
|
||||
spacing-small = 10px
|
||||
spacing-medium = 25px
|
||||
spacing-large = 35px
|
||||
|
||||
@import './pink.css'
|
||||
@import './_components'
|
||||
|
||||
_generate_hooks()
|
||||
@ -12,7 +12,7 @@
|
||||
"scripts": {
|
||||
"sass": "sass components/rcss.scss public/rcss.css --watch",
|
||||
"styleguide": "fractal start --sync",
|
||||
"stylus": "stylus -w components/* -o public/playground.css",
|
||||
"stylus": "stylus -w components/rcss.styl -o public/rcss.css",
|
||||
"suite": "npm run sass & npm run styleguide",
|
||||
"suiteStylus": "npm run stylus & npm run styleguide",
|
||||
"bundle": "scss-bundel"
|
||||
|
||||
@ -1,73 +1,169 @@
|
||||
.bluebutton {
|
||||
color: red;
|
||||
padding: 5px;
|
||||
background-color: #ffa500;
|
||||
border: 1px solid #000;
|
||||
display: inline;
|
||||
@import './pink.css';
|
||||
.RV-Alignment displaygrid,
|
||||
.RV-Alignment .RV-Alignment--top {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
}
|
||||
.button {
|
||||
padding: 5px;
|
||||
background-color: #ffa500;
|
||||
border: 1px solid #000;
|
||||
display: inline;
|
||||
.RV-Alignment .RV-Alignment--bottom {
|
||||
display: grid;
|
||||
align-content: end;
|
||||
}
|
||||
.wred {
|
||||
color: red;
|
||||
.RV-Alignment .RV-Alignment--left {
|
||||
display: grid;
|
||||
justify-content: start;
|
||||
}
|
||||
.field {
|
||||
display: inline;
|
||||
padding: 10px;
|
||||
border-bottom: 2px solid #00f;
|
||||
.RV-Alignment .RV-Alignment--right {
|
||||
display: grid;
|
||||
justify-content: end;
|
||||
}
|
||||
.wurst .field {
|
||||
display: inline;
|
||||
padding: 10px;
|
||||
border-bottom: 2px solid #00f;
|
||||
color: red;
|
||||
.RV-Alignment .RV-Alignment--horizontalCenter {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
}
|
||||
.debug {
|
||||
--one: {"button":"({\".bluebutton\":\"(anonymous(c))\",\".button\":\"(anonymous(c))\"})","field":"({\".field\":\"(anonymous())\",\".wurst .field\":\"(anonymous())\"})"};
|
||||
--two: {".bluebutton":"({\"button\":\"(#008000)\",\"field\":\"(red())\"})",".wred":"({\"button\":\"(#008000)\",\"field\":\"(red())\"})",".wurst .field":"({\"button\":\"(#008000)\",\"field\":\"(red())\"})"};
|
||||
.RV-Alignment .RV-Alignment--verticalCenter {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
}
|
||||
.bluebutton.bluebutton {
|
||||
color: #008000;
|
||||
.RV-Alignment .RV-Alignment--center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
}
|
||||
.button.bluebutton {
|
||||
color: #008000;
|
||||
.RV-ContentCrop {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.field.bluebutton {
|
||||
border-bottom: 2px solid red;
|
||||
color: #00f;
|
||||
.RV-ContentCrop img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.wurst .field.bluebutton {
|
||||
border-bottom: 2px solid red;
|
||||
color: #00f;
|
||||
.RV-ContentCrop p {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 1.21;
|
||||
z-index: -20;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
height: 96.80000000000001%;
|
||||
}
|
||||
.bluebutton.wred {
|
||||
color: #008000;
|
||||
.RV-ContentCrop--fade--fade:after {
|
||||
background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff);
|
||||
display: block;
|
||||
content: ' ';
|
||||
opacity: 0.8;
|
||||
position: relative;
|
||||
top: -25%;
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
z-index: -10;
|
||||
}
|
||||
.button.wred {
|
||||
color: #008000;
|
||||
.RV-ContentCrop--ellipsis--ellipsis:after {
|
||||
position: relative;
|
||||
display: block;
|
||||
bottom: 1.2em;
|
||||
left: calc(100% - 3ch);
|
||||
content: '...';
|
||||
font-size: 1.2em;
|
||||
min-width: 2em;
|
||||
background-color: #fff;
|
||||
padding: 0 2px;
|
||||
}
|
||||
.field.wred {
|
||||
border-bottom: 2px solid red;
|
||||
color: #00f;
|
||||
.RV-ContentCrop--square {
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.wurst .field.wred {
|
||||
border-bottom: 2px solid red;
|
||||
color: #00f;
|
||||
.RV-ContentCrop--square img,
|
||||
.RV-ContentCrop--square div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.bluebutton.wurst .field {
|
||||
color: #008000;
|
||||
.RV-ContentCrop--1to2 {
|
||||
width: 100%;
|
||||
padding-top: 200%;
|
||||
position: relative;
|
||||
}
|
||||
.button.wurst .field {
|
||||
color: #008000;
|
||||
.RV-ContentCrop--1to2 img {
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.field.wurst .field {
|
||||
border-bottom: 2px solid red;
|
||||
color: #00f;
|
||||
.RV-ContentCrop--2to1 {
|
||||
width: 100%;
|
||||
padding-top: 50%;
|
||||
position: relative;
|
||||
}
|
||||
.wurst .field.wurst .field {
|
||||
border-bottom: 2px solid red;
|
||||
color: #00f;
|
||||
.RV-ContentCrop--2to1 img {
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.RV-ContentCrop--4to3 {
|
||||
width: 100%;
|
||||
padding-top: 75%;
|
||||
position: relative;
|
||||
}
|
||||
.RV-ContentCrop--4to3 img {
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.RV-ContentCrop--16to9 {
|
||||
width: 100%;
|
||||
padding-top: 56.25%;
|
||||
position: relative;
|
||||
}
|
||||
.RV-ContentCrop--16to9 img {
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.RV-ContentCrop--3to2 {
|
||||
width: 100%;
|
||||
padding-top: 66.66666666666666%;
|
||||
position: relative;
|
||||
}
|
||||
.RV-ContentCrop--3to2 img {
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.RV-ContentCrop--left img {
|
||||
object-position: left;
|
||||
}
|
||||
.RV-ContentCrop--center img {
|
||||
object-position: center;
|
||||
}
|
||||
.RV-ContentCrop--top img {
|
||||
object-position: top;
|
||||
}
|
||||
.RV-ContentCrop--bottom img {
|
||||
object-position: bottom;
|
||||
}
|
||||
.RV-ContentCrop--center img {
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
1043
public/rcss.css
1043
public/rcss.css
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user