forked from Git/hugo-story
Delete 'assets/sass/components/_items.scss'
This commit is contained in:
parent
2777e0b45b
commit
a98907ada0
@ -1,339 +0,0 @@
|
||||
/*
|
||||
Hugo Story by CaressOfSteel
|
||||
A (modular, highly tweakable) responsive one-page theme for Hugo.
|
||||
Ported from Story by HTML5UP.
|
||||
This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
|
||||
*/
|
||||
|
||||
/* Items (transitions) */
|
||||
|
||||
.items {
|
||||
|
||||
// Mixin.
|
||||
@mixin transition-items($event) {
|
||||
$x: null;
|
||||
$y: null;
|
||||
|
||||
@if ($event == 'load') {
|
||||
$x: 'body.is-preload &';
|
||||
$y: _duration(on-load);
|
||||
}
|
||||
@else if ($event == 'scroll') {
|
||||
$x: '&.is-inactive';
|
||||
$y: _duration(on-scroll);
|
||||
}
|
||||
|
||||
&.on#{$event}-fade-in {
|
||||
> * {
|
||||
> .inner {
|
||||
@include vendor('transition', 'opacity #{$y} ease-in-out');
|
||||
@include vendor('transition-delay', '#{_misc(items-limit) * _duration(items-delay)}');
|
||||
}
|
||||
|
||||
@for $i from 0 through _misc(items-limit) {
|
||||
&:nth-child(#{$i + 1}) {
|
||||
> .inner {
|
||||
@include vendor('transition-delay', '#{$i * _duration(items-delay)}');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$x} {
|
||||
> * {
|
||||
> .inner {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// On Load.
|
||||
@include transition-items('load');
|
||||
|
||||
// On Scroll.
|
||||
@include transition-items('scroll');
|
||||
|
||||
}
|
||||
|
||||
/* Items (style1) */
|
||||
|
||||
@mixin items-style1-size($name, $size, $padding) {
|
||||
&.#{$name} {
|
||||
> * {
|
||||
@include padding($padding, $padding);
|
||||
width: #{100% / $size};
|
||||
|
||||
&:nth-child(-n + #{$size}) {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
&:nth-child(#{$size}n + 1) {
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin items-style1-size-reset($name, $size) {
|
||||
&.#{$name} {
|
||||
> * {
|
||||
&:nth-child(-n + #{$size}) {
|
||||
border-top-width: _size(border-width);
|
||||
}
|
||||
|
||||
&:nth-child(#{$size}n + 1) {
|
||||
border-left-width: _size(border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.items.style1 {
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-wrap', 'wrap');
|
||||
@include vendor('justify-content', 'center');
|
||||
margin: (_size(element-margin) * 1.5) 0;
|
||||
position: relative;
|
||||
|
||||
> * {
|
||||
@include vendor('flex-grow', '0');
|
||||
@include vendor('flex-shrink', '0');
|
||||
border-style: solid;
|
||||
border-left-width: _size(border-width);
|
||||
border-top-width: _size(border-width);
|
||||
}
|
||||
|
||||
// Modifiers.
|
||||
|
||||
// Size.
|
||||
@include items-style1-size(big, 2, _size(gutter));
|
||||
@include items-style1-size(medium, 3, _size(gutter) * 0.625);
|
||||
@include items-style1-size(small, 4, _size(gutter) * 0.375);
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
@include items-style1-size-reset(small, 4);
|
||||
@include items-style1-size(small, 3, _size(gutter) * 0.625);
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
@include items-style1-size-reset(medium, 3);
|
||||
@include items-style1-size(medium, 2, _size(gutter));
|
||||
|
||||
@include items-style1-size-reset(small, 3);
|
||||
@include items-style1-size(small, 2, _size(gutter));
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
@include items-style1-size-reset(big, 2);
|
||||
@include items-style1-size(big, 1, _size(gutter) * 0.75);
|
||||
|
||||
@include items-style1-size-reset(medium, 2);
|
||||
@include items-style1-size(medium, 1, _size(gutter) * 0.75);
|
||||
|
||||
@include items-style1-size-reset(small, 2);
|
||||
@include items-style1-size(small, 1, _size(gutter) * 0.75);
|
||||
|
||||
&.big,
|
||||
&.medium,
|
||||
&.small {
|
||||
> * {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
padding-bottom: 0;
|
||||
|
||||
> .inner {
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Items (style2) */
|
||||
|
||||
@mixin items-style2-size($name, $size, $padding) {
|
||||
&.#{$name} {
|
||||
> * {
|
||||
@include padding($padding, $padding);
|
||||
width: #{100% / $size};
|
||||
|
||||
&:nth-child(-n + #{$size}) {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
&:nth-child(#{$size}n + 1) {
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin items-style2-size-reset($name, $size) {
|
||||
&.#{$name} {
|
||||
> * {
|
||||
&:nth-child(-n + #{$size}) {
|
||||
border-top-width: _size(border-width);
|
||||
}
|
||||
|
||||
&:nth-child(#{$size}n + 1) {
|
||||
border-left-width: _size(border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.items.style2 {
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-wrap', 'wrap');
|
||||
@include vendor('justify-content', 'center');
|
||||
margin: (_size(element-margin) * 1.5) 0;
|
||||
position: relative;
|
||||
border: solid _size(border-width);
|
||||
border-radius: _size(border-radius);
|
||||
|
||||
> * {
|
||||
@include vendor('flex-grow', '0');
|
||||
@include vendor('flex-shrink', '0');
|
||||
border-style: solid;
|
||||
border-left-width: _size(border-width);
|
||||
border-top-width: _size(border-width);
|
||||
}
|
||||
|
||||
// Modifiers.
|
||||
|
||||
// Size.
|
||||
@include items-style2-size(big, 2, _size(gutter));
|
||||
@include items-style2-size(medium, 3, _size(gutter) * 0.625);
|
||||
@include items-style2-size(small, 4, _size(gutter) * 0.375);
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
@include items-style2-size-reset(small, 4);
|
||||
@include items-style2-size(small, 3, _size(gutter) * 0.625);
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
@include items-style2-size-reset(medium, 3);
|
||||
@include items-style2-size(medium, 2, _size(gutter));
|
||||
|
||||
@include items-style2-size-reset(small, 3);
|
||||
@include items-style2-size(small, 2, _size(gutter));
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
@include items-style2-size-reset(big, 2);
|
||||
@include items-style2-size(big, 1, _size(gutter) * 0.75);
|
||||
|
||||
@include items-style2-size-reset(medium, 2);
|
||||
@include items-style2-size(medium, 1, _size(gutter) * 0.75);
|
||||
|
||||
@include items-style2-size-reset(small, 2);
|
||||
@include items-style2-size(small, 1, _size(gutter) * 0.75);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Items (style3) */
|
||||
|
||||
@mixin items-style3-size($name, $size, $padding) {
|
||||
&.#{$name} {
|
||||
> * {
|
||||
@include padding($padding, $padding);
|
||||
width: #{100% / $size};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.items.style3 {
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-wrap', 'wrap');
|
||||
@include vendor('justify-content', 'center');
|
||||
margin: (_size(element-margin) * 1.5) 0;
|
||||
position: relative;
|
||||
|
||||
> * {
|
||||
@include vendor('flex-grow', '0');
|
||||
@include vendor('flex-shrink', '0');
|
||||
}
|
||||
|
||||
// Modifiers.
|
||||
|
||||
// Size.
|
||||
@include items-style3-size(big, 2, _size(gutter) * 0.5);
|
||||
@include items-style3-size(medium, 3, _size(gutter) * 0.5 * 0.625);
|
||||
@include items-style3-size(small, 4, _size(gutter) * 0.5 * 0.375);
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
@include items-style3-size(small, 3, _size(gutter) * 0.5 * 0.625);
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
@include items-style3-size(medium, 2, _size(gutter) * 0.5);
|
||||
@include items-style3-size(small, 2, _size(gutter) * 0.5);
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
margin: _size(element-margin) 0;
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
@include items-style3-size(big, 1, _size(gutter) * 0.5 * 0.75);
|
||||
@include items-style3-size(medium, 1, _size(gutter) * 0.5 * 0.75);
|
||||
@include items-style3-size(small, 1, _size(gutter) * 0.5 * 0.75);
|
||||
|
||||
&.big,
|
||||
&.medium,
|
||||
&.small {
|
||||
> * {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
padding-bottom: 0;
|
||||
|
||||
> .inner {
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Mixin
|
||||
|
||||
@mixin color-items($p: null) {
|
||||
.items.style1 {
|
||||
> * {
|
||||
border-color: _palette($p, border);
|
||||
}
|
||||
}
|
||||
|
||||
.items.style2 {
|
||||
border-color: _palette($p, border);
|
||||
|
||||
> * {
|
||||
border-color: _palette($p, border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include color-items;
|
Loading…
Reference in New Issue
Block a user