Using Variants
This commit is contained in:
parent
d070cc07bf
commit
7b54ad4c42
@ -1 +1,30 @@
|
|||||||
{}
|
{
|
||||||
|
"title": "Fan",
|
||||||
|
"variants": [
|
||||||
|
{
|
||||||
|
"name": "Horizontal",
|
||||||
|
"context": {
|
||||||
|
"modifier": "--horizontal"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Vertical",
|
||||||
|
"context": {
|
||||||
|
"modifier": "--vertical"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Auto",
|
||||||
|
"context": {
|
||||||
|
"modifier": "--auto"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "FullWidth",
|
||||||
|
"context": {
|
||||||
|
"modifier": "--fullWidth"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,90 +1,25 @@
|
|||||||
<div class="RV-Fan RV-Fan--horizontal">
|
<div class="RV-FlexRow__Item">
|
||||||
<div class="red RV-Fan__Base"></div>
|
<div class="RV-Fan RV-Fan{{modifier}}">
|
||||||
<div class="green RV-Fan__Surface">
|
<div class="RV-Fan__Base RV-Spacing__Inner--small">
|
||||||
<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.
|
<div class="RV-ContentCrop">
|
||||||
|
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
|
||||||
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>
|
||||||
</div>
|
</div>
|
||||||
<br><br>
|
<div class="green RV-Fan__Surface RV-Spacing__Outer--small">
|
||||||
<div class="RV-Fan RV-Fan--auto">
|
|
||||||
<div class="red RV-Fan__Base"></div>
|
|
||||||
<div class="green RV-Fan__Surface">
|
|
||||||
<div class="RV-Text">
|
<div class="RV-Text">
|
||||||
<p>Some content here</p>
|
<p>
|
||||||
<p>More conthent over here</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.
|
||||||
<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.
|
</p>
|
||||||
|
<p>
|
||||||
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
|
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
|
||||||
|
</p>
|
||||||
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>
|
<p>
|
||||||
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
<div class="RV-Fan RV-Fan--fullWidth">
|
|
||||||
<div class="red RV-Fan__Base"></div>
|
|
||||||
<div class="green RV-Fan__Surface">
|
|
||||||
<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--vertical">
|
|
||||||
<div class="red RV-Fan__Base"></div>
|
|
||||||
<div class="green RV-Fan__Surface">
|
|
||||||
<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--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>
|
|
||||||
</div>
|
|
||||||
@ -1 +1,23 @@
|
|||||||
{}
|
{
|
||||||
|
"title": "FlexGRid",
|
||||||
|
"variants": [
|
||||||
|
{
|
||||||
|
"name": "AutoWidth",
|
||||||
|
"context": {
|
||||||
|
"modifier": "--autoWidth"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "FixedSize",
|
||||||
|
"context": {
|
||||||
|
"modifier": "--fixedSize"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Masonry",
|
||||||
|
"context": {
|
||||||
|
"modifier": "--masonry"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,48 +1,52 @@
|
|||||||
<div class="RV-FlexGrid RV-FlexGrid--autoWidth">
|
<div class="RV-FlexGrid RV-FlexGrid{{modifier}} RV-Spacing__Inner--medium">
|
||||||
<div class="red RV-FlexGrid__Item">Heres</div>
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
||||||
<div class="green RV-FlexGrid__Item">some</div>
|
<div class="RV-ContentCrop">
|
||||||
<div class="red RV-FlexGrid__Item">totally</div>
|
<img class="RV-Image" src="{{path '/images/square.jpeg'}}"/>
|
||||||
<div class="green RV-FlexGrid__Item">awesome</div>
|
</div>
|
||||||
<div class="red RV-FlexGrid__Item">content</div>
|
</div>
|
||||||
<div class="green RV-FlexGrid__Item">for</div>
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
||||||
<div class="red RV-FlexGrid__Item">you</div>
|
<div class="RV-ContentCrop">
|
||||||
<div class="green RV-FlexGrid__Item">only</div>
|
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
||||||
<div class="red RV-FlexGrid__Item">for</div>
|
</div>
|
||||||
<div class="green RV-FlexGrid__Item">you</div>
|
</div>
|
||||||
<div class="red RV-FlexGrid__Item">to</div>
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
||||||
<div class="green RV-FlexGrid__Item">enjoy</div>
|
<div class="RV-ContentCrop">
|
||||||
</div>
|
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
||||||
|
</div>
|
||||||
<br><br>
|
</div>
|
||||||
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
||||||
<div class="RV-FlexGrid RV-FlexGrid--fixedSize">
|
<div class="RV-ContentCrop">
|
||||||
<div class="red RV-FlexGrid__Item">Heres</div>
|
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
|
||||||
<div class="green RV-FlexGrid__Item">some</div>
|
</div>
|
||||||
<div class="red RV-FlexGrid__Item">totally</div>
|
</div>
|
||||||
<div class="green RV-FlexGrid__Item">awesome</div>
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
||||||
<div class="red RV-FlexGrid__Item">content</div>
|
<div class="RV-ContentCrop">
|
||||||
<div class="green RV-FlexGrid__Item">for</div>
|
<img class="RV-Image" src="{{path '/images/square.jpeg'}}"/>
|
||||||
<div class="red RV-FlexGrid__Item">you</div>
|
</div>
|
||||||
<div class="green RV-FlexGrid__Item">only</div>
|
</div>
|
||||||
<div class="red RV-FlexGrid__Item">for</div>
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
||||||
<div class="green RV-FlexGrid__Item">you</div>
|
<div class="RV-ContentCrop">
|
||||||
<div class="red RV-FlexGrid__Item">to</div>
|
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
|
||||||
<div class="green RV-FlexGrid__Item">enjoy</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
||||||
<br><br>
|
<div class="RV-ContentCrop">
|
||||||
|
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
|
||||||
<div class="RV-FlexGrid RV-FlexGrid--masonry">
|
</div>
|
||||||
<div class="red RV-FlexGrid__Item">Heres</div>
|
</div>
|
||||||
<div class="green RV-FlexGrid__Item">some</div>
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
||||||
<div class="red RV-FlexGrid__Item RV-FlexGrid__Item--right">totally (right)</div>
|
<div class="RV-ContentCrop">
|
||||||
<div class="green RV-FlexGrid__Item RV-FlexGrid__Item--center">awesome</div>
|
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
||||||
<div class="red RV-FlexGrid__Item">content</div>
|
</div>
|
||||||
<div class="green RV-FlexGrid__Item">for</div>
|
</div>
|
||||||
<div class="red RV-FlexGrid__Item">you <br>(im sneaking in some height)</div>
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
||||||
<div class="green RV-FlexGrid__Item">only</div>
|
<div class="RV-ContentCrop">
|
||||||
<div class="red RV-FlexGrid__Item RV-FlexGrid__Item--fixedSize">fixed for</div>
|
<img class="RV-Image" src="{{path '/images/square.jpeg'}}"/>
|
||||||
<div class="green RV-FlexGrid__Item">you</div>
|
</div>
|
||||||
<div class="red RV-FlexGrid__Item">to</div>
|
</div>
|
||||||
<div class="green RV-FlexGrid__Item">enjoy</div>
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
||||||
|
<div class="RV-ContentCrop">
|
||||||
|
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user