Converting to styl
This commit is contained in:
parent
a1c4a6f883
commit
bb2e89e7b3
@ -1,5 +1,5 @@
|
||||
@import './_bemGenerator'
|
||||
@import './_selectorHook'
|
||||
|
||||
@import './_cssParameter'
|
||||
@import './_elementAmount'
|
||||
@import './_alignment'
|
||||
|
||||
@ -1,53 +1,162 @@
|
||||
RV-Fan--horizontal(base_height, base_width, prefix='&', suffix= '')
|
||||
/*
|
||||
* A Fan is a layout that consists of two parts:
|
||||
* The base and the surface, named after a hand fan.
|
||||
* The base is always left handed, where as the surface
|
||||
* can be right of the base or below.
|
||||
*/
|
||||
|
||||
{prefix}__Container{suffix}
|
||||
/* ######################
|
||||
* Block Modifiers Mixins
|
||||
* ###################### */
|
||||
|
||||
/*
|
||||
* Base on the left, Surface on the right
|
||||
* Base is fixed, given size, Surface is given height
|
||||
* but will fill the parent's width
|
||||
*/
|
||||
RV-Fan--horizontal(base-height, base-width)
|
||||
+RV-Block__Modifier('horizontal')
|
||||
flex-direction row
|
||||
|
||||
+RV-Element('Surface')
|
||||
min-width base-width
|
||||
height base-height
|
||||
|
||||
{prefix}__Container{suffix} {prefix}__Surface
|
||||
min-width base_width
|
||||
height base_height
|
||||
|
||||
RV-Fan--vertical(base_height, base_width, prefix='&', suffix='')
|
||||
{prefix}__Container{suffix}
|
||||
/*
|
||||
* Base above, Surfce below
|
||||
* Base is fixed, given size, base is given width
|
||||
* minimal height is given height, will grow with content
|
||||
*/
|
||||
RV-Fan--vertical(base-height, base-width)
|
||||
+RV-Block__Modifier('vertical')
|
||||
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='')
|
||||
+RV-Element('Surface')
|
||||
width base-width
|
||||
min-height base-height
|
||||
|
||||
{prefix}__Container{suffix}
|
||||
/*
|
||||
* Initialy horizontal, changes to vertical when
|
||||
* the width of the parent is less than 2 x base-width
|
||||
* Width of the base and surface in vertical are base-width
|
||||
*/
|
||||
RV-Fan--auto(base-height, base-width)
|
||||
+RV-Block__Modifier('auto')
|
||||
flex-flow row wrap
|
||||
|
||||
{prefix}__Container{suffix} {prefix}__Surface
|
||||
width 'calc(100% - %s)' % base_width
|
||||
min-width base_width
|
||||
height base_height
|
||||
+RV-Element('Surface')
|
||||
width 'calc(100% - %s)' % base-width
|
||||
min-width base-width
|
||||
height base-height
|
||||
|
||||
RV-Fan--fullWidth(base_height, base_width, prefix='&', suffix='')
|
||||
/*
|
||||
* Also initialy horizontal, changes to vertical when
|
||||
* the width of the parent is less than 2 x base-width
|
||||
* Width of the base and the surface in vertical mode
|
||||
* are 100% of the parent width
|
||||
*/
|
||||
RV-Fan--fullWidth(base-height, base-width)
|
||||
+RV-Block__Modifier('fullWidth')
|
||||
RV-Fan--auto(base-height, base-width)
|
||||
|
||||
+RV-Element('Base')
|
||||
flex-grow 1
|
||||
|
||||
+RV-Element('Surface')
|
||||
flex-grow 1
|
||||
|
||||
{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
|
||||
/* ###############
|
||||
* Element Mixins
|
||||
* ############### */
|
||||
|
||||
RV-Fan__Base(base-height, base-width)
|
||||
+RV-Element('Base')
|
||||
height base-height
|
||||
width base-width
|
||||
flex 0 0 auto
|
||||
|
||||
{prefix}__Surface
|
||||
RV-ContentCrop()
|
||||
RV-Fan__Surface--fixedHeight(height)
|
||||
+RV-Element__Modifier('fixedHeight')
|
||||
height height
|
||||
|
||||
RV-Fan__Surface--fixedWidth(width)
|
||||
+RV-Element__Modifier('fixedWidth')
|
||||
|
||||
max-width width
|
||||
|
||||
RV-Fan__Surface()
|
||||
+RV-Element('Surface')
|
||||
RV-ContentCrop()
|
||||
|
||||
RV-Fan__Surface--fixedWidth(width)
|
||||
RV-Fan__Surface--fixedHeight(height)
|
||||
|
||||
RV-Fan__Surface-Pack(width, height)
|
||||
RV-Fan__Surface()
|
||||
|
||||
+RV-Element('Surface')
|
||||
RV-Fan__Surface--fixedWidth(width)
|
||||
RV-Fan__Surface--fixedHeight(height)
|
||||
|
||||
/* ############
|
||||
* Block Mixin
|
||||
* ############ */
|
||||
RV-Fan()
|
||||
display flex
|
||||
|
||||
RV-Fan__()
|
||||
RV-Fan()
|
||||
RV-Fan__Base()
|
||||
RV-Fan__Surface()
|
||||
|
||||
RV-Fan--(base-height, base-width)
|
||||
RV-Fan()
|
||||
|
||||
RV-Fan--fullWidth(base-height, base-width)
|
||||
RV-Fan--vertical(base-height, base-width)
|
||||
RV-Fan--horizontal(base-height, base-width)
|
||||
RV-Fan--auto(base-height, base-width)
|
||||
|
||||
RV-Fan__Surface()
|
||||
|
||||
RV-Fan__Surface--()
|
||||
|
||||
RV-Fan__Base()
|
||||
|
||||
RV-Fan__Base--()
|
||||
|
||||
RV-Fan__--()
|
||||
|
||||
RV-Fan-Pack(base-height, base-width)
|
||||
RV-Fan()
|
||||
|
||||
RV-Fan__Surface-Pack(base-height, base-width)
|
||||
RV-Fan__Base(base-height, base-width)
|
||||
|
||||
|
||||
|
||||
/* #########
|
||||
* CSS-Class
|
||||
* ######### */
|
||||
.RV-Fan
|
||||
RV-Fan(280px, 320px)
|
||||
RV-CSSParameter({
|
||||
base-height: 280px,
|
||||
base-width: 320px
|
||||
})
|
||||
|
||||
RV-Fan-Pack(base-height, base-width)
|
||||
/*
|
||||
.tollecomponent
|
||||
RV-Fan()
|
||||
+RV-Element('Square')
|
||||
RV-Fan__Base(50px, 50px)
|
||||
|
||||
+RV-Element__Modifier('color')
|
||||
RV-Fan__Base--blue()
|
||||
+/
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="RV-Fan__Container RV-Fan__Container--horizontal">
|
||||
<div class="RV-Fan RV-Fan--horizontal">
|
||||
<div class="red RV-Fan__Base"></div>
|
||||
<div class="green RV-Fan__Surface">
|
||||
<div class="RV-Text"> <p>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.
|
||||
@ -10,7 +10,7 @@ Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repelle
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="RV-Fan__Container RV-Fan__Container--auto">
|
||||
<div class="RV-Fan RV-Fan--auto">
|
||||
<div class="red RV-Fan__Base"></div>
|
||||
<div class="green RV-Fan__Surface">
|
||||
<div class="RV-Text">
|
||||
@ -27,7 +27,7 @@ Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repelle
|
||||
|
||||
|
||||
<br><br>
|
||||
<div class="RV-Fan__Container RV-Fan__Container--auto RV-Fan__Container--fullWidth">
|
||||
<div class="RV-Fan RV-Fan--fullWidth">
|
||||
<div class="red RV-Fan__Base"></div>
|
||||
<div class="green RV-Fan__Surface">
|
||||
<div class="RV-Text">
|
||||
@ -42,7 +42,7 @@ Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repelle
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="RV-Fan__Container RV-Fan__Container--vertical">
|
||||
<div class="RV-Fan RV-Fan--vertical">
|
||||
<div class="red RV-Fan__Base"></div>
|
||||
<div class="green RV-Fan__Surface">
|
||||
<div class="RV-Text">
|
||||
@ -52,6 +52,38 @@ Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repelle
|
||||
|
||||
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
|
||||
|
||||
Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
<div class="RV-Fan RV-Fan--vertical">
|
||||
<div class="red RV-Fan__Base"></div>
|
||||
<div class="green RV-Fan__Surface RV-Fan__Surface--fixedHeight">
|
||||
<div class="RV-Text">
|
||||
<p>Some content here</p>
|
||||
<p>More conthent over here</p>
|
||||
<p>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.
|
||||
|
||||
Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
<div class="RV-Fan RV-Fan--horizontal">
|
||||
<div class="red RV-Fan__Base"></div>
|
||||
<div class="green RV-Fan__Surface RV-Fan__Surface--fixedWidth">
|
||||
<div class="RV-Text">
|
||||
<p>Some content here</p>
|
||||
<p>More conthent over here</p>
|
||||
<p>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.
|
||||
|
||||
Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p></div>
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user