Merge pull request #4216 from mozilla/optimise-homepage-4211
fix: Reduce homepage CSS (fix #4211)
This commit is contained in:
Matthew Riley MacPherson
GitHub
Коммит
4a86a7defe
|
|
@ -23,7 +23,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
|
|||
<HeroSection
|
||||
key="wikipedia-context-menu-search"
|
||||
linkTo="/addon/wikipedia-context-menu-search/"
|
||||
styleName="Home-wikipedia-context-menu-search"
|
||||
>
|
||||
<h3>{i18n.gettext('Wikipedia Context Menu Search')}</h3>
|
||||
|
||||
|
|
@ -36,7 +35,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
|
|||
<HeroSection
|
||||
key="momentumdash"
|
||||
linkTo="/addon/momentumdash/"
|
||||
styleName="Home-momentumdash"
|
||||
>
|
||||
<h3>{i18n.gettext('Momentum')}</h3>
|
||||
|
||||
|
|
@ -50,7 +48,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
|
|||
<HeroSection
|
||||
key="undo-close-tab-button"
|
||||
linkTo="/addon/undo-close-tab-button/"
|
||||
styleName="Home-undo-close-tab-button"
|
||||
>
|
||||
<h3>{i18n.gettext('Undo Close Tab Button')}</h3>
|
||||
|
||||
|
|
@ -61,7 +58,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
|
|||
<HeroSection
|
||||
key="grammarly"
|
||||
linkTo="/addon/grammarly-1/"
|
||||
styleName="Home-grammarly"
|
||||
>
|
||||
<h3>{i18n.gettext('Grammarly')}</h3>
|
||||
<p>
|
||||
|
|
@ -74,7 +70,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
|
|||
<HeroSection
|
||||
key="facebook-filter"
|
||||
linkTo="/addon/facebook-filter/"
|
||||
styleName="Home-facebook-filter"
|
||||
>
|
||||
<h3>{i18n.gettext('Facebook Filter')}</h3>
|
||||
<p>
|
||||
|
|
@ -87,7 +82,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
|
|||
<HeroSection
|
||||
key="gesturefy"
|
||||
linkTo="/addon/gesturefy/"
|
||||
styleName="Home-gesturefy"
|
||||
>
|
||||
<h3>{i18n.gettext('Gesturefy')}</h3>
|
||||
|
||||
|
|
@ -98,7 +92,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
|
|||
<HeroSection
|
||||
key="lastpass"
|
||||
linkTo="/addon/lastpass-password-manager/"
|
||||
styleName="Home-lastpass"
|
||||
>
|
||||
<h3>{i18n.gettext('LastPass Password Manager')}</h3>
|
||||
|
||||
|
|
@ -112,7 +105,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
|
|||
<HeroSection
|
||||
key="multi-account-containers"
|
||||
linkTo="/addon/multi-account-containers/"
|
||||
styleName="Home-multi-account-containers"
|
||||
>
|
||||
<h3>{i18n.gettext('Multi-Account Containers')}</h3>
|
||||
|
||||
|
|
@ -126,7 +118,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
|
|||
<HeroSection
|
||||
key="tree-style-tab"
|
||||
linkTo="/addon/tree-style-tab/"
|
||||
styleName="Home-tree-style-tab"
|
||||
>
|
||||
<h3>{i18n.gettext('Tree Style Tab')}</h3>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,25 +1,12 @@
|
|||
@import "~core/css/inc/vars";
|
||||
|
||||
/* stylelint-disable indentation */
|
||||
$colors: ("blue", #228ae6, #1b6ec2)
|
||||
("cyan", #15aabf, #1098ad)
|
||||
("grape", #be4bdb, #ae3ec9)
|
||||
("indigo", #4c6ef5, #3b5bdb)
|
||||
("pink", #e64980, #d6336c)
|
||||
("violet", #7950f2, #6741d9)
|
||||
("teal", #12b886, #0ca678)
|
||||
("grape", #be4bdb, #ae3ec9)
|
||||
("cyan", #15aabf, #1098ad)
|
||||
("blue", #228ae6, #1b6ec2)
|
||||
("indigo", #4c6ef5, #3b5bdb)
|
||||
("pink", #e64980, #d6336c)
|
||||
("violet", #7950f2, #6741d9)
|
||||
("cyan", #15aabf, #1098ad)
|
||||
("blue", #228ae6, #1b6ec2)
|
||||
("teal", #12b886, #0ca678)
|
||||
("indigo", #4c6ef5, #3b5bdb)
|
||||
("pink", #e64980, #d6336c)
|
||||
("violet", #7950f2, #6741d9);
|
||||
$colors-first-item: ("violet", #7950f2, #6741d9)
|
||||
("grape", #be4bdb, #ae3ec9);
|
||||
$colors-second-item: ("indigo", #4c6ef5, #3b5bdb)
|
||||
("blue", #228ae6, #1b6ec2);
|
||||
$colors-third-item: ("cyan", #15aabf, #1098ad)
|
||||
("teal", #12b886, #0ca678);
|
||||
|
||||
/* stylelint-enable indentation */
|
||||
|
||||
|
|
@ -34,16 +21,6 @@ $colors: ("blue", #228ae6, #1b6ec2)
|
|||
@return $string;
|
||||
}
|
||||
|
||||
@mixin four-point-stars($foreground, $background) {
|
||||
background-color: $background;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='#{encodeColor($foreground)}' fill-opacity='0.4'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@mixin wiggle($foreground, $background) {
|
||||
background-color: $background;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='#{encodeColor($foreground)}' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@mixin bubbles($foreground, $background) {
|
||||
background-color: $background;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='#{encodeColor($foreground)}' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
|
||||
|
|
@ -59,11 +36,6 @@ $colors: ("blue", #228ae6, #1b6ec2)
|
|||
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10h10v10H0V10zM10 0h10v10H10V0z' fill='#{encodeColor($foreground)}' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@mixin tic-tac-toe($foreground, $background) {
|
||||
background-color: $background;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='#{encodeColor($foreground)}' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@mixin hover($background) {
|
||||
transition: background-color $transition-short ease-in-out;
|
||||
|
||||
|
|
@ -72,285 +44,34 @@ $colors: ("blue", #228ae6, #1b6ec2)
|
|||
}
|
||||
}
|
||||
|
||||
// Generate CSS classes depending on the order (indexes) of the Hero sections.
|
||||
@for $x from 0 through 9 {
|
||||
@for $y from 0 through 9 {
|
||||
@for $z from 0 through 9 {
|
||||
// It is not possible to have the same values for two (or more) different
|
||||
// indexes.
|
||||
@if ($x != $y and $y != $z and $z != $x) {
|
||||
.Hero-order-#{$x}-#{$y}-#{$z} {
|
||||
.HeroSection-styleName--Home-wikipedia-context-menu-search {
|
||||
$color: nth($colors, $y + 1);
|
||||
$bg-color: nth($color, 2);
|
||||
$fg-color: nth($color, 3);
|
||||
.HeroSection {
|
||||
&:nth-child(1) {
|
||||
$color: nth($colors-first-item, random(length($colors-first-item)));
|
||||
$bg-color: nth($color, 2);
|
||||
$fg-color: nth($color, 3);
|
||||
|
||||
@include hover($bg-color);
|
||||
@include hover($bg-color);
|
||||
|
||||
@if $x == 0 {
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
} @else if $x == 1 {
|
||||
@include floor-tile($fg-color, $bg-color);
|
||||
} @else if $x == 2 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 3 {
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
} @else if $x == 4 {
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
} @else if $x == 5 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 6 {
|
||||
@include wiggle($fg-color, $bg-color);
|
||||
} @else if $x == 7 {
|
||||
@include floor-tile($fg-color, $bg-color);
|
||||
} @else if $x == 8 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 9 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
}
|
||||
}
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
}
|
||||
|
||||
.HeroSection-styleName--Home-momentumdash {
|
||||
$color: nth($colors, $y + 2);
|
||||
$bg-color: nth($color, 2);
|
||||
$fg-color: nth($color, 3);
|
||||
&:nth-child(2) {
|
||||
$color: nth($colors-second-item, random(length($colors-second-item)));
|
||||
$bg-color: nth($color, 2);
|
||||
$fg-color: nth($color, 3);
|
||||
|
||||
@include hover($bg-color);
|
||||
@include hover($bg-color);
|
||||
|
||||
@if $x == 0 {
|
||||
@include tic-tac-toe($fg-color, $bg-color);
|
||||
} @else if $x == 1 {
|
||||
@include wiggle($fg-color, $bg-color);
|
||||
} @else if $x == 2 {
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
} @else if $x == 3 {
|
||||
@include floor-tile($fg-color, $bg-color);
|
||||
} @else if $x == 4 {
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
} @else if $x == 5 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 6 {
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
} @else if $x == 7 {
|
||||
@include wiggle($fg-color, $bg-color);
|
||||
} @else if $x == 8 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 9 {
|
||||
@include floor-tile($fg-color, $bg-color);
|
||||
}
|
||||
}
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
}
|
||||
|
||||
.HeroSection-styleName--Home-undo-close-tab-button {
|
||||
$color: nth($colors, $y + 3);
|
||||
$bg-color: nth($color, 2);
|
||||
$fg-color: nth($color, 3);
|
||||
&:nth-child(3) {
|
||||
$color: nth($colors-third-item, random(length($colors-third-item)));
|
||||
$bg-color: nth($color, 2);
|
||||
$fg-color: nth($color, 3);
|
||||
|
||||
@include hover($bg-color);
|
||||
@include hover($bg-color);
|
||||
|
||||
@if $x == 0 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 1 {
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
} @else if $x == 2 {
|
||||
@include tic-tac-toe($fg-color, $bg-color);
|
||||
} @else if $x == 3 {
|
||||
@include wiggle($fg-color, $bg-color);
|
||||
} @else if $x == 4 {
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
} @else if $x == 5 {
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
} @else if $x == 6 {
|
||||
@include tic-tac-toe($fg-color, $bg-color);
|
||||
} @else if $x == 7 {
|
||||
@include floor-tile($fg-color, $bg-color);
|
||||
} @else if $x == 8 {
|
||||
@include floor-tile($fg-color, $bg-color);
|
||||
} @else if $x == 9 {
|
||||
@include wiggle($fg-color, $bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.HeroSection-styleName--Home-grammarly {
|
||||
$color: nth($colors, $y + 4);
|
||||
$bg-color: nth($color, 2);
|
||||
$fg-color: nth($color, 3);
|
||||
|
||||
@include hover($bg-color);
|
||||
|
||||
@if $x == 0 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 1 {
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
} @else if $x == 2 {
|
||||
@include tic-tac-toe($fg-color, $bg-color);
|
||||
} @else if $x == 3 {
|
||||
@include wiggle($fg-color, $bg-color);
|
||||
} @else if $x == 4 {
|
||||
@include tic-tac-toe($fg-color, $bg-color);
|
||||
} @else if $x == 5 {
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
} @else if $x == 6 {
|
||||
@include floor-tile($fg-color, $bg-color);
|
||||
} @else if $x == 7 {
|
||||
@include tic-tac-toe($fg-color, $bg-color);
|
||||
} @else if $x == 8 {
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
} @else if $x == 9 {
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.HeroSection-styleName--Home-facebook-filter {
|
||||
$color: nth($colors, $y + 5);
|
||||
$bg-color: nth($color, 2);
|
||||
$fg-color: nth($color, 3);
|
||||
|
||||
@include hover($bg-color);
|
||||
|
||||
@if $x == 0 {
|
||||
@include floor-tile($fg-color, $bg-color);
|
||||
} @else if $x == 1 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 2 {
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
} @else if $x == 3 {
|
||||
@include tic-tac-toe($fg-color, $bg-color);
|
||||
} @else if $x == 4 {
|
||||
@include floor-tile($fg-color, $bg-color);
|
||||
} @else if $x == 5 {
|
||||
@include wiggle($fg-color, $bg-color);
|
||||
} @else if $x == 6 {
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
} @else if $x == 7 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 8 {
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
} @else if $x == 9 {
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.HeroSection-styleName--Home-gesturefy {
|
||||
$color: nth($colors, $y + 6);
|
||||
$bg-color: nth($color, 2);
|
||||
$fg-color: nth($color, 3);
|
||||
|
||||
@include hover($bg-color);
|
||||
|
||||
@if $x == 0 {
|
||||
@include floor-tile($fg-color, $bg-color);
|
||||
} @else if $x == 1 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 2 {
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
} @else if $x == 3 {
|
||||
@include tic-tac-toe($fg-color, $bg-color);
|
||||
} @else if $x == 4 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 5 {
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
} @else if $x == 6 {
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
} @else if $x == 7 {
|
||||
@include tic-tac-toe($fg-color, $bg-color);
|
||||
} @else if $x == 8 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 9 {
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.HeroSection-styleName--Home-lastpass {
|
||||
$color: nth($colors, $y + 7);
|
||||
$bg-color: nth($color, 2);
|
||||
$fg-color: nth($color, 3);
|
||||
|
||||
@include hover($bg-color);
|
||||
|
||||
@if $x == 0 {
|
||||
@include floor-tile($fg-color, $bg-color);
|
||||
} @else if $x == 1 {
|
||||
@include tic-tac-toe($fg-color, $bg-color);
|
||||
} @else if $x == 2 {
|
||||
@include wiggle($fg-color, $bg-color);
|
||||
} @else if $x == 3 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 4 {
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
} @else if $x == 5 {
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
} @else if $x == 6 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 7 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 8 {
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
} @else if $x == 9 {
|
||||
@include wiggle($fg-color, $bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.HeroSection-styleName--Home-multi-account-containers {
|
||||
$color: nth($colors, $y + 8);
|
||||
$bg-color: nth($color, 2);
|
||||
$fg-color: nth($color, 3);
|
||||
|
||||
@include hover($bg-color);
|
||||
|
||||
@if $x == 0 {
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
} @else if $x == 1 {
|
||||
@include tic-tac-toe($fg-color, $bg-color);
|
||||
} @else if $x == 2 {
|
||||
@include wiggle($fg-color, $bg-color);
|
||||
} @else if $x == 3 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 4 {
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
} @else if $x == 5 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 6 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 7 {
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
} @else if $x == 8 {
|
||||
@include wiggle($fg-color, $bg-color);
|
||||
} @else if $x == 9 {
|
||||
@include tic-tac-toe($fg-color, $bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.HeroSection-styleName--Home-tree-style-tab {
|
||||
$color: nth($colors, $y + 9);
|
||||
$bg-color: nth($color, 2);
|
||||
$fg-color: nth($color, 3);
|
||||
|
||||
@include hover($bg-color);
|
||||
|
||||
@if $x == 0 {
|
||||
@include tic-tac-toe($fg-color, $bg-color);
|
||||
} @else if $x == 1 {
|
||||
@include wiggle($fg-color, $bg-color);
|
||||
} @else if $x == 2 {
|
||||
@include wiggle($fg-color, $bg-color);
|
||||
} @else if $x == 3 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 4 {
|
||||
@include four-point-stars($fg-color, $bg-color);
|
||||
} @else if $x == 5 {
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
} @else if $x == 6 {
|
||||
@include polka-dots($fg-color, $bg-color);
|
||||
} @else if $x == 7 {
|
||||
@include wiggle($fg-color, $bg-color);
|
||||
} @else if $x == 8 {
|
||||
@include bubbles($fg-color, $bg-color);
|
||||
} @else if $x == 9 {
|
||||
@include tic-tac-toe($fg-color, $bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include floor-tile($fg-color, $bg-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче