From 80bed0b6c7aa64b04c6cab2d47a6d570383b5afb Mon Sep 17 00:00:00 2001 From: reverend Date: Sun, 3 Jan 2021 15:33:36 +0100 Subject: [PATCH] Converting the rest to stylus --- .../01_Layouts/contentCrop/_contentCrop.styl | 34 +- .../01_Layouts/contentCrop/contentCrop.hbs | 50 +- components/01_Layouts/fan/fan.hbs | 2 - components/01_Layouts/flexGrid/_flexGrid.styl | 11 +- components/04_Molecules/_molecules.scss | 1 - components/04_Molecules/_molecules.styl | 1 + .../elementList/_elementList.scss | 19 - .../elementList/_elementList.styl | 15 + components/05_Components/_components.scss | 1 - components/05_Components/_components.styl | 2 + .../05_Components/imageGrid/_imageGrid.styl | 13 + .../imageGrid/imageGrid.config.json | 0 .../imageGrid/imageGrid.hbs | 0 components/05_Components/menu/_menu.scss | 35 -- components/05_Components/menu/_menu.styl | 26 + .../10_Examples/imageGrid/_imageGrid.scss | 26 - components/_components.styl | 8 +- components/_preview.hbs | 4 - components/rcss.styl | 2 +- public/rcss.css | 553 +++++++++++++++--- 20 files changed, 609 insertions(+), 194 deletions(-) delete mode 100644 components/04_Molecules/_molecules.scss create mode 100644 components/04_Molecules/_molecules.styl delete mode 100644 components/04_Molecules/elementList/_elementList.scss create mode 100644 components/04_Molecules/elementList/_elementList.styl delete mode 100644 components/05_Components/_components.scss create mode 100644 components/05_Components/_components.styl create mode 100644 components/05_Components/imageGrid/_imageGrid.styl rename components/{10_Examples => 05_Components}/imageGrid/imageGrid.config.json (100%) rename components/{10_Examples => 05_Components}/imageGrid/imageGrid.hbs (100%) delete mode 100644 components/05_Components/menu/_menu.scss create mode 100644 components/05_Components/menu/_menu.styl delete mode 100644 components/10_Examples/imageGrid/_imageGrid.scss diff --git a/components/01_Layouts/contentCrop/_contentCrop.styl b/components/01_Layouts/contentCrop/_contentCrop.styl index 74dd833..bc7ea93 100644 --- a/components/01_Layouts/contentCrop/_contentCrop.styl +++ b/components/01_Layouts/contentCrop/_contentCrop.styl @@ -1,21 +1,21 @@ RV-ContentCrop--bottom() - img + .RV-Image * object-position bottom RV-ContentCrop--top() - img + .RV-Image * object-position top RV-ContentCrop--right() - img + .RV-Image * object-position right RV-ContentCrop--left() - img + .RV-Image * object-position left RV-ContentCrop--center() - img + .RV-Image * object-position center RV-ContentCrop__Text--fade(background-color=white) @@ -43,18 +43,26 @@ RV-ContentCrop__Text--ellipsis(background-color=white) padding 0 2px RV-ContentCrop__Text(line-height=1.1, background-color=white) - p + .RV-Text overflow hidden display block text-overflow ellipsis - padding 0 - margin 0 - line-height line-height // Determining the max line count and caclulating the height + line-height line-height z-index -20 position relative background-color background-color - height floor(100% / line-height / 16) * line-height * 16 + max-height floor(100% / line-height / 16) * line-height * 16 + + padding 0 + margin 0 + + * + margin 0 + padding-bottom line-height * 16px + + *:last-child + padding-bottom unset &--fade RV-ContentCrop__Text--fade(background-color) @@ -67,7 +75,7 @@ RV-ContentCrop__Shapes--square() padding-top 100% position relative - img, + .RV-Image *, div position absolute top 0 @@ -84,7 +92,7 @@ RV-ContentCrop__Shapes--xtoy(-x, -y) padding-top 100% * (-y / -x) position relative - img + .RV-Image * object-fit cover position absolute top 0 @@ -116,7 +124,7 @@ RV-ContentCrop__Shapes() RV-ContentCrop__Shapes--xtoy(3, 2) RV-ContentCrop__Image() - img + .RV-Image *, .RV-Image width 100% height 100% object-fit cover diff --git a/components/01_Layouts/contentCrop/contentCrop.hbs b/components/01_Layouts/contentCrop/contentCrop.hbs index 2b77838..4fb1557 100644 --- a/components/01_Layouts/contentCrop/contentCrop.hbs +++ b/components/01_Layouts/contentCrop/contentCrop.hbs @@ -1,10 +1,13 @@

Square

- +
+

-

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. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.

+
+

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. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.

+

@@ -14,11 +17,14 @@

Landscape

- +
+
-

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. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.

+
+

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. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.

+

@@ -27,11 +33,16 @@

Portrait

- +
+

-

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. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.

+
+

Some Text

+

More Text

+

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. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.

+

@@ -40,7 +51,9 @@

Full width

- +
+ +

@@ -52,13 +65,15 @@
- +
+


- +
+
@@ -68,30 +83,37 @@
- +
+
- +
+
- +
+
- +
+
- +
+ +
+
\ No newline at end of file diff --git a/components/01_Layouts/fan/fan.hbs b/components/01_Layouts/fan/fan.hbs index 2fe5859..a04318b 100644 --- a/components/01_Layouts/fan/fan.hbs +++ b/components/01_Layouts/fan/fan.hbs @@ -1,8 +1,6 @@
-

Some content here

-

More conthent over here

Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur. Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam. diff --git a/components/01_Layouts/flexGrid/_flexGrid.styl b/components/01_Layouts/flexGrid/_flexGrid.styl index 65588c8..968c27a 100644 --- a/components/01_Layouts/flexGrid/_flexGrid.styl +++ b/components/01_Layouts/flexGrid/_flexGrid.styl @@ -24,10 +24,8 @@ RV-FlexGrid__Container--masonry(item-width=300px) ) -RV-FlexGrid(prefix='&') +RV-FlexGrid--shorthands(prefix='&') {prefix}__Container - RV-FlexGrid__Container() - &--autoWidth RV-FlexGrid__Container--autoWidth() @@ -37,8 +35,13 @@ RV-FlexGrid(prefix='&') &--masonry RV-FlexGrid__Container--masonry() +RV-FlexGrid(prefix='&') + {prefix}__Container + RV-FlexGrid__Container() + {prefix}__Item RV-Alignment() .RV-FlexGrid - RV-FlexGrid() \ No newline at end of file + RV-FlexGrid() + RV-FlexGrid--shorthands() \ No newline at end of file diff --git a/components/04_Molecules/_molecules.scss b/components/04_Molecules/_molecules.scss deleted file mode 100644 index 381c40a..0000000 --- a/components/04_Molecules/_molecules.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'elementList/elementList'; \ No newline at end of file diff --git a/components/04_Molecules/_molecules.styl b/components/04_Molecules/_molecules.styl new file mode 100644 index 0000000..02b4b4e --- /dev/null +++ b/components/04_Molecules/_molecules.styl @@ -0,0 +1 @@ +@import 'elementList/_elementList' \ No newline at end of file diff --git a/components/04_Molecules/elementList/_elementList.scss b/components/04_Molecules/elementList/_elementList.scss deleted file mode 100644 index 2907da4..0000000 --- a/components/04_Molecules/elementList/_elementList.scss +++ /dev/null @@ -1,19 +0,0 @@ -@mixin RV-ElementList__Item { - @include RV-FlexRow__Item; -} - -@mixin RV-ElementList($-break_width: 500px, $prefix: '&') { - @include RV-FlexRow__Container; - @include RV-FlexRow__Container--shorthands; - @include RV-Reset; - - list-style-type: none; - - #{$prefix}__Item { - @include RV-ElementList__Item; - } -} - -.RV-ElementList { - @include RV-ElementList; -} \ No newline at end of file diff --git a/components/04_Molecules/elementList/_elementList.styl b/components/04_Molecules/elementList/_elementList.styl new file mode 100644 index 0000000..4d9734d --- /dev/null +++ b/components/04_Molecules/elementList/_elementList.styl @@ -0,0 +1,15 @@ +RV-ElementList__Item() + @include RV-FlexRow__Item + +RV-ElementList(break_width=500px, prefix='&') + RV-FlexRow__Container() + RV-FlexRow__Container--shorthands() + RV-Reset() + + list-style-type none + + {prefix}__Item + RV-ElementList__Item() + +.RV-ElementList + RV-ElementList() \ No newline at end of file diff --git a/components/05_Components/_components.scss b/components/05_Components/_components.scss deleted file mode 100644 index 6141c8a..0000000 --- a/components/05_Components/_components.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'menu/menu'; \ No newline at end of file diff --git a/components/05_Components/_components.styl b/components/05_Components/_components.styl new file mode 100644 index 0000000..2c2ad6d --- /dev/null +++ b/components/05_Components/_components.styl @@ -0,0 +1,2 @@ +@import 'menu/_menu' +@import 'imageGrid/_imageGrid' \ No newline at end of file diff --git a/components/05_Components/imageGrid/_imageGrid.styl b/components/05_Components/imageGrid/_imageGrid.styl new file mode 100644 index 0000000..23f1392 --- /dev/null +++ b/components/05_Components/imageGrid/_imageGrid.styl @@ -0,0 +1,13 @@ +RV-ImageGrid() + RV-FlexGrid() + + &__Container + RV-Spacing__Inner--small() + RV-FlexGrid__Container--autoWidth() + + &__Item + RV-ContentCrop() + RV-ContentCrop--center() + +.RV-ImageGrid + RV-ImageGrid() \ No newline at end of file diff --git a/components/10_Examples/imageGrid/imageGrid.config.json b/components/05_Components/imageGrid/imageGrid.config.json similarity index 100% rename from components/10_Examples/imageGrid/imageGrid.config.json rename to components/05_Components/imageGrid/imageGrid.config.json diff --git a/components/10_Examples/imageGrid/imageGrid.hbs b/components/05_Components/imageGrid/imageGrid.hbs similarity index 100% rename from components/10_Examples/imageGrid/imageGrid.hbs rename to components/05_Components/imageGrid/imageGrid.hbs diff --git a/components/05_Components/menu/_menu.scss b/components/05_Components/menu/_menu.scss deleted file mode 100644 index 1bf5ca8..0000000 --- a/components/05_Components/menu/_menu.scss +++ /dev/null @@ -1,35 +0,0 @@ -@mixin RV-Menu { - - &--vertical &__List { - @include RV-FlexRow__Container--vertical; - width: 100%; - } - - &--horizontal &__List { - @include RV-FlexRow__Container--horizontal; - @include RV-FlexRow__Container--breakPoint(400px); - } - - &__List { - @include RV-FlexRow__Container($-prefix: '.RV-Menu'); - @include RV-ElementList; - } - - &__Item { - @include RV-FlexRow__Item; - @include RV-FlexRow__Item--shorthands; - width: 100px; - - .RV-Link { - padding: $-spacing-small; - background-color: beige; - display: block; - white-space: nowrap; - } - } - -} - -.RV-Menu { - @include RV-Menu; -} \ No newline at end of file diff --git a/components/05_Components/menu/_menu.styl b/components/05_Components/menu/_menu.styl new file mode 100644 index 0000000..c3153c8 --- /dev/null +++ b/components/05_Components/menu/_menu.styl @@ -0,0 +1,26 @@ +RV-Menu() + &--vertical &__List + RV-FlexRow__Container--vertical() + width 100% + + &--horizontal &__List + RV-FlexRow__Container--horizontal() + RV-FlexRow__Container--breakPoint(400px) + + &__List + RV-FlexRow__Container(prefix='.RV-Menu') + RV-ElementList() + + &__Item + RV-FlexRow__Item() + RV-FlexRow__Item--shorthands() + width 100px + + .RV-Link + padding spacing-small + background-color beige + display block + white-space nowrap + +.RV-Menu + RV-Menu() \ No newline at end of file diff --git a/components/10_Examples/imageGrid/_imageGrid.scss b/components/10_Examples/imageGrid/_imageGrid.scss deleted file mode 100644 index 9657b03..0000000 --- a/components/10_Examples/imageGrid/_imageGrid.scss +++ /dev/null @@ -1,26 +0,0 @@ -@mixin RV-ImageGrid { - @include RV-FlexGrid; - - &__Container { - @include RV-Spacing__Inner--medium; - } - - &__Item { - @include RV-ContentCrop; - @include RV-ContentCrop--center; - - &--square { - height: 0; - width: 100%; - padding-bottom: 100%; - - * { - height: initial; - } - } - } -} - -.RV-ImageGrid { - @include RV-ImageGrid; -} \ No newline at end of file diff --git a/components/_components.styl b/components/_components.styl index 55666df..cb1dac2 100644 --- a/components/_components.styl +++ b/components/_components.styl @@ -1,9 +1,5 @@ @import '00_Global/_global' - @import '02_Styles/_styles' - @import '01_Layouts/_layouts' -//@import '04_Molecules/_molecules' -//@import '05_Components/_components' - -//@import '10_Examples/_examples' \ No newline at end of file +@import '04_Molecules/_molecules' +@import '05_Components/_components' \ No newline at end of file diff --git a/components/_preview.hbs b/components/_preview.hbs index 2338b66..7925099 100644 --- a/components/_preview.hbs +++ b/components/_preview.hbs @@ -8,14 +8,10 @@