2017-05-29 01:01:47 +03:00
|
|
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
|
2017-06-22 01:45:55 +03:00
|
|
|
exports[`import_comma.css 1`] = `
|
|
|
|
@import "rounded-corners", "text-shadow";
|
|
|
|
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
|
@import "rounded-corners", "text-shadow";
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
2017-05-29 01:01:47 +03:00
|
|
|
exports[`scss.css 1`] = `
|
|
|
|
@media #{$g-breakpoint-tiny} {}
|
|
|
|
.#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
|
|
|
|
a {height: calc(#{$foo} + 1);}
|
|
|
|
div {
|
|
|
|
background: {
|
|
|
|
size: auto 60%;
|
|
|
|
position: bottom 2px left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
a { margin: 0 { left: 10px; } }
|
2018-01-24 18:48:54 +03:00
|
|
|
|
2018-01-12 14:12:02 +03:00
|
|
|
$default: #111111 !default;
|
|
|
|
$default: #111111 !default;
|
|
|
|
$default: #111111
|
|
|
|
!default;
|
|
|
|
$default: "very-long-long-long-long-long-long-long-long-long-long-long-value" !default;
|
|
|
|
$default: "very-long-long-long-long-long-long-long-long-long-long-long-value" !default;
|
|
|
|
$default: "very-long-long-long-long-long-long-long-long-long-long-long-value"
|
|
|
|
!default;
|
2018-01-19 17:39:44 +03:00
|
|
|
|
2018-01-30 17:53:37 +03:00
|
|
|
$global: #111111 !global;
|
|
|
|
$global: #111111 !global;
|
|
|
|
$global: #111111
|
|
|
|
!global;
|
|
|
|
$global: "very-long-long-long-long-long-long-long-long-long-long-long-value" !global;
|
|
|
|
$global: "very-long-long-long-long-long-long-long-long-long-long-long-value" !global;
|
|
|
|
$global: "very-long-long-long-long-long-long-long-long-long-long-long-value"
|
|
|
|
!global;
|
|
|
|
|
2018-01-24 18:48:54 +03:00
|
|
|
$map: (key: value, other-key: other-value);
|
|
|
|
$map: (key: value, other-key: other-value) !default;
|
|
|
|
$map: (key: value, other-key: other-value) !default;
|
|
|
|
$map: (key: value, other-key: other-value)
|
|
|
|
!default;
|
|
|
|
$map:
|
|
|
|
(key: value, other-key: other-value)
|
|
|
|
!default;
|
|
|
|
$map: ( key : value , other-key : other-value);
|
|
|
|
$map: ( key : value , other-key : other-value );
|
|
|
|
$map: (
|
|
|
|
key: value,
|
|
|
|
other-key: other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key: value,
|
|
|
|
other-key: other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key
|
|
|
|
:
|
|
|
|
value,
|
|
|
|
other-key
|
|
|
|
:
|
|
|
|
other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key
|
|
|
|
:
|
|
|
|
value
|
|
|
|
,
|
|
|
|
other-key
|
|
|
|
:
|
|
|
|
other-value
|
|
|
|
);
|
|
|
|
$map: (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-key: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-value, very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-key: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-value);
|
|
|
|
$map: ( very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-key : very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-value , very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-key : very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-value );
|
|
|
|
$map: ( very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-key : very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-value , very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-key: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-value );
|
|
|
|
$map: (
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-key: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-value,
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-key: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-key: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-value,
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-key: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-value
|
|
|
|
);
|
|
|
|
$map:
|
|
|
|
(
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-key
|
|
|
|
:
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-value
|
|
|
|
,
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-key
|
|
|
|
:
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key: (#d82d2d, #666),
|
|
|
|
other-key: (#52bf4a, #fff),
|
|
|
|
other-other-key: (#c23435, #fff)
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key: (#d82d2d, #666),
|
|
|
|
other-key: (#52bf4a, #fff),
|
|
|
|
other-other-key: (#c23435, #fff)
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key : ( #d82d2d , #666 ),
|
|
|
|
other-key : ( #52bf4a , #fff ),
|
|
|
|
other-other-key : ( #c23435 , #fff )
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key : ( #d82d2d , #666 ) ,
|
|
|
|
other-key : ( #52bf4a , #fff ),
|
|
|
|
other-other-key : ( #c23435 , #fff )
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key
|
|
|
|
:
|
|
|
|
(
|
|
|
|
#d82d2d,
|
|
|
|
#666
|
|
|
|
)
|
|
|
|
,
|
|
|
|
other-key
|
|
|
|
:
|
|
|
|
(
|
|
|
|
#52bf4a,
|
|
|
|
#fff
|
|
|
|
)
|
|
|
|
,
|
|
|
|
other-other-key
|
|
|
|
:
|
|
|
|
(
|
|
|
|
#c23435
|
|
|
|
,
|
|
|
|
#fff
|
|
|
|
)
|
|
|
|
);
|
|
|
|
$map: map-merge($map, ($key: $value));
|
|
|
|
$map: map-merge( $map , ( $key : $value ) );
|
|
|
|
$map: map-merge( $map , ( $key : $value ) );
|
|
|
|
$map: map-merge(
|
|
|
|
$map,
|
|
|
|
($key: $value)
|
|
|
|
);
|
|
|
|
$map: map-merge(
|
|
|
|
$map,
|
|
|
|
($key: $value)
|
|
|
|
);
|
|
|
|
$map:
|
|
|
|
map-merge(
|
|
|
|
$map
|
|
|
|
,
|
|
|
|
(
|
|
|
|
$key
|
|
|
|
:
|
|
|
|
$value
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
2018-02-09 15:28:55 +03:00
|
|
|
$longVariable: (
|
|
|
|
(mobile $mobile) (tablet $tablet) (desktop $desktop) (wide $wide)
|
|
|
|
);
|
|
|
|
|
|
|
|
$list-space: "item-1" "item-2" "item-3";
|
|
|
|
$list-space:"item-1""item-2""item-3";
|
|
|
|
$list-space: "item-1" "item-2" "item-3" ;
|
|
|
|
$list-space: "item-1"
|
|
|
|
"item-2"
|
|
|
|
"item-3";
|
|
|
|
$list-space
|
|
|
|
:
|
|
|
|
"item-1"
|
|
|
|
"item-2"
|
|
|
|
"item-3"
|
|
|
|
;
|
|
|
|
$list-space
|
|
|
|
|
|
|
|
:
|
|
|
|
|
|
|
|
"item-1"
|
|
|
|
|
|
|
|
"item-2"
|
|
|
|
|
|
|
|
"item-3"
|
|
|
|
|
|
|
|
;
|
|
|
|
$list-comma: "item-1", "item-2", "item-3";
|
|
|
|
$list-comma:"item-1","item-2","item-3";
|
|
|
|
$list-comma: "item-1" , "item-2" , "item-3" ;
|
|
|
|
$list-comma: "item-1",
|
|
|
|
"item-2",
|
|
|
|
"item-3";
|
|
|
|
$list-comma
|
|
|
|
:
|
|
|
|
"item-1"
|
|
|
|
,
|
|
|
|
"item-2"
|
|
|
|
,
|
|
|
|
"item-3"
|
|
|
|
;
|
|
|
|
$list-comma
|
|
|
|
|
|
|
|
:
|
|
|
|
|
|
|
|
"item-1"
|
|
|
|
|
|
|
|
,
|
|
|
|
|
|
|
|
"item-2"
|
|
|
|
|
|
|
|
,
|
|
|
|
|
|
|
|
"item-3"
|
|
|
|
|
|
|
|
;
|
|
|
|
$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3", "item-3.1" "item-3.2" "item-3.3";
|
|
|
|
$list:"item-1.1""item-1.2""item-1.3","item-2.1""item-2.2""item-2.3","item-3.1""item-3.2""item-3.3";
|
|
|
|
$list: "item-1.1" "item-1.2" "item-1.3" , "item-2.1" "item-2.2" "item-2.3" , "item-3.1" "item-3.2" "item-3.3" ;
|
|
|
|
$list: "item-1.1" "item-1.2" "item-1.3",
|
|
|
|
"item-2.1" "item-2.2" "item-2.3",
|
|
|
|
"item-3.1" "item-3.2" "item-3.3";
|
|
|
|
$list
|
|
|
|
:
|
|
|
|
"item-1.1"
|
|
|
|
"item-1.2"
|
|
|
|
"item-1.3"
|
|
|
|
,
|
|
|
|
"item-2.1"
|
|
|
|
"item-2.2"
|
|
|
|
"item-2.3"
|
|
|
|
,
|
|
|
|
"item-3.1"
|
|
|
|
"item-3.2"
|
|
|
|
"item-3.3"
|
|
|
|
;
|
|
|
|
$list
|
|
|
|
|
|
|
|
:
|
|
|
|
|
|
|
|
"item-1.1"
|
|
|
|
|
|
|
|
"item-1.2"
|
|
|
|
|
|
|
|
"item-1.3"
|
|
|
|
|
|
|
|
,
|
|
|
|
|
|
|
|
"item-2.1"
|
|
|
|
|
|
|
|
"item-2.2"
|
|
|
|
|
|
|
|
"item-2.3"
|
|
|
|
|
|
|
|
,
|
|
|
|
|
|
|
|
"item-3.1"
|
|
|
|
|
|
|
|
"item-3.2"
|
|
|
|
|
|
|
|
"item-3.3"
|
|
|
|
|
|
|
|
;
|
|
|
|
$list: (("item-1.1", "item-1.2", "item-1.3"), ("item-2.1", "item-2.2", "item-2.3"), ("item-3.1", "item-3.2", "item-3.3"));
|
|
|
|
$list:(("item-1.1","item-1.2","item-1.3"),("item-2.1","item-2.2","item-2.3"),("item-3.1","item-3.2","item-3.3"));
|
|
|
|
$list: ( ( "item-1.1" , "item-1.2" , "item-1.3" ) , ( "item-2.1" , "item-2.2" , "item-2.3" ) , ( "item-3.1" , "item-3.2" , "item-3.3" ) ) ;
|
|
|
|
$list: (
|
|
|
|
("item-1.1", "item-1.2", "item-1.3"),
|
|
|
|
("item-2.1", "item-2.2", "item-2.3"),
|
|
|
|
("item-3.1", "item-3.2", "item-3.3")
|
|
|
|
);
|
|
|
|
$list
|
|
|
|
:
|
|
|
|
(
|
|
|
|
(
|
|
|
|
"item-1.1"
|
|
|
|
,
|
|
|
|
"item-1.2"
|
|
|
|
,
|
|
|
|
"item-1.3"
|
|
|
|
)
|
|
|
|
,
|
|
|
|
(
|
|
|
|
"item-2.1"
|
|
|
|
,
|
|
|
|
"item-2.2"
|
|
|
|
,
|
|
|
|
"item-2.3"
|
|
|
|
)
|
|
|
|
,
|
|
|
|
(
|
|
|
|
"item-3.1"
|
|
|
|
,
|
|
|
|
"item-3.2"
|
|
|
|
,
|
|
|
|
"item-3.3"
|
|
|
|
)
|
|
|
|
)
|
|
|
|
;
|
|
|
|
$list
|
|
|
|
|
|
|
|
:
|
|
|
|
|
|
|
|
(
|
|
|
|
|
|
|
|
(
|
|
|
|
|
|
|
|
"item-1.1"
|
|
|
|
|
|
|
|
,
|
|
|
|
|
|
|
|
"item-1.2"
|
|
|
|
|
|
|
|
,
|
|
|
|
|
|
|
|
"item-1.3"
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
,
|
|
|
|
|
|
|
|
(
|
|
|
|
|
|
|
|
"item-2.1"
|
|
|
|
|
|
|
|
,
|
|
|
|
|
|
|
|
"item-2.2"
|
|
|
|
|
|
|
|
,
|
|
|
|
|
|
|
|
"item-2.3"
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
,
|
|
|
|
|
|
|
|
(
|
|
|
|
|
|
|
|
"item-3.1"
|
|
|
|
|
|
|
|
,
|
|
|
|
|
|
|
|
"item-3.2"
|
|
|
|
|
|
|
|
,
|
|
|
|
|
|
|
|
"item-3.3"
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
;
|
|
|
|
|
|
|
|
$var: (0 0) (0 0) (0 0) (0 0) (0 0) (0 0) (0 0) (0 0) (0 0) (0 0) (0 0) (0 0) (0 0) (0 0);
|
|
|
|
$space-scale: (0, "0") (0.25, "0-25") (0.5, "0-5") (0.75, "0-75") (1, "1") (1.25, "1-25") (1.5, "1-5") (1.75, "1-75") (2, "2") (2.25, "2-25") (2.5, "2-5") (2.75, "2-75") (3, "3") (3.25, "3-25") (3.5, "3-5") (3.75, "3-75") (4, "4");
|
|
|
|
|
2018-01-19 17:39:44 +03:00
|
|
|
.card-column-simple {
|
|
|
|
@include breakpoint( getBp( md ) ) {
|
|
|
|
padding: $spacing_content-sm $spacing_content-md;
|
|
|
|
}
|
|
|
|
|
|
|
|
@include breakpoint (getBp(md)) {
|
|
|
|
&:nth-child(2n + 3) {
|
|
|
|
clear: both;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@include breakpoint (getBp(xl)) {
|
|
|
|
&:nth-child(2n + 3) {
|
|
|
|
clear: none;
|
|
|
|
}
|
|
|
|
&:nth-child(3n + 4) {
|
|
|
|
clear: both;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2018-01-20 03:00:06 +03:00
|
|
|
|
|
|
|
@warn "Warn (#{$message}).";
|
|
|
|
@warn "Warn (#{$message}).";
|
|
|
|
@warn "Warn (#{$message}).";
|
|
|
|
@warn #{$message};
|
|
|
|
@warn "Very long long long long long long long long long long long long long line (#{$message}).";
|
|
|
|
@warn
|
|
|
|
"Very long long long long long long long long long long long long long line (#{$message}).";
|
|
|
|
@error "Error (#{$message}).";
|
|
|
|
@error "Error (#{$message}).";
|
|
|
|
@error "Error (#{$message}).";
|
|
|
|
@error #{$message};
|
|
|
|
@error "Very long long long long long long long long long long long long long line Error (#{$message}).";
|
|
|
|
@error
|
|
|
|
"Very long long long long long long long long long long long long long line Error (#{$message}).";
|
2018-01-23 14:33:18 +03:00
|
|
|
|
|
|
|
$buttonConfig: "save" 50px, 'cancel' 50px, "help" 100PX;
|
|
|
|
|
|
|
|
$locale: "en_us";
|
|
|
|
html[lang=#{$locale}] {
|
|
|
|
font-size: 10px;
|
|
|
|
}
|
|
|
|
$alertClass: "error";
|
|
|
|
p.message-#{$alertClass} {
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
$mediumBreakpoint: 768px;
|
|
|
|
@media (max-width: #{$mediumBreakpoint}) {
|
|
|
|
a {
|
|
|
|
font-size: 18px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
font-size: 150%;
|
|
|
|
|
|
|
|
@media (orientation: landscape) {
|
|
|
|
line-height: 75%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.popularAnimal {
|
|
|
|
background: gray;
|
|
|
|
}
|
|
|
|
.GoodBoy {
|
|
|
|
color: green;
|
|
|
|
}
|
|
|
|
.dog {
|
|
|
|
@extend .popularAnimal;
|
|
|
|
@extend .GoodBoy;
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
|
|
|
%animal {
|
|
|
|
background: gray;
|
|
|
|
}
|
|
|
|
.cat {
|
|
|
|
@extend %animal;
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
.dog {
|
|
|
|
@extend %animal;
|
|
|
|
color: black;
|
|
|
|
}
|
|
|
|
|
|
|
|
%mfw-standing-out {
|
|
|
|
font-size: 150%;
|
|
|
|
font-style: italic;
|
|
|
|
padding: 25px;
|
|
|
|
}
|
|
|
|
%mfwSlightlyShadowed {
|
|
|
|
@include box-shadow(black 2px 2px 10px); // from Compass
|
|
|
|
}
|
|
|
|
%MFWRounded {
|
|
|
|
@include border-radius(25px); // from Compass
|
|
|
|
}
|
|
|
|
#join-button {
|
|
|
|
@extend %mfw-standing-out;
|
|
|
|
@extend %mfwSlightlyShadowed;
|
|
|
|
@extend %MFWRounded;
|
|
|
|
background: green;
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
&:hover {
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
p {
|
|
|
|
body.no-touch & {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.foo.bar .baz.bang, .bip.qux {
|
|
|
|
$selector: &;
|
|
|
|
}
|
|
|
|
@mixin does-parent-exist {
|
|
|
|
@if & {
|
|
|
|
&:hover {
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
} @else {
|
|
|
|
a {
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
@if 1 + 1 == 2 {
|
|
|
|
border: 1px solid;
|
|
|
|
}
|
|
|
|
@if 5 < 3 {
|
|
|
|
border: 2px dotted;
|
|
|
|
}
|
|
|
|
@if null {
|
|
|
|
border: 3px double;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$mosterType: monster;
|
|
|
|
p {
|
|
|
|
@if $mosterType == ocean {
|
|
|
|
color: blue;
|
|
|
|
} @else if $mosterType == matador {
|
|
|
|
color: red;
|
|
|
|
} @else if $mosterType == monster {
|
|
|
|
color: green;
|
|
|
|
} @else if $mosterType == nightKing {
|
|
|
|
color: green;
|
|
|
|
} @else if $mosterType == VeryWickedWolf {
|
|
|
|
color: green;
|
|
|
|
} @else {
|
|
|
|
color: black;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@for $i from 1 through 3 {
|
|
|
|
.item-#{$i} {
|
|
|
|
width: 2em * $i;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@each $animal in puma, sea-slug, cheerfulDog, BigSalamander, "string", 'another-string', "camelCaseString", "PascalCaseString" {
|
|
|
|
.#{$animal}-icon {
|
|
|
|
background-image: url('/images/#{$animal}.png');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$i: 6;
|
|
|
|
@while $i > 0 {
|
|
|
|
.item-#{$i} {
|
|
|
|
width: 2em * $i;
|
|
|
|
}
|
|
|
|
$i: $i - 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin cool-border($width: 10px, $coolStyle: 'solid', $AwesomeColor: "black") {
|
|
|
|
border: $width $coolStyle $AwesomeColor;
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
@include cool-border(1px, "solid", $fff);
|
|
|
|
}
|
|
|
|
p {
|
|
|
|
@include cool-border($width: 1px, $coolStyle: 'solid', $AwesomeColor: #fff);
|
|
|
|
}
|
|
|
|
p {
|
|
|
|
@include coolBorder();
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin coolBorder() {
|
|
|
|
border: 10px solid #fff;
|
|
|
|
}
|
|
|
|
p {
|
|
|
|
@include coolBorder(1px, "solid", $fff);
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin CoolBorder() {
|
|
|
|
border: 10px solid #fff;
|
|
|
|
}
|
|
|
|
p {
|
|
|
|
@include CoolBorder(1px, "solid", $fff);
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin box-shadow($shadows...) {
|
|
|
|
-moz-box-shadow: $shadows;
|
|
|
|
-webkit-box-shadow: $shadows;
|
|
|
|
box-shadow: $shadows;
|
|
|
|
}
|
|
|
|
.shadows {
|
|
|
|
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin apply-to-ie6-only {
|
|
|
|
* html {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include apply-to-ie6-only {
|
|
|
|
#logo {
|
|
|
|
background-image: url(/logo.gif);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin applyToIe6Only {
|
|
|
|
* html {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include applyToIe6Only {
|
|
|
|
#logo {
|
|
|
|
background-image: url(/logo.gif);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin ApplyToIe6Only {
|
|
|
|
* html {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include ApplyToIe6Only {
|
|
|
|
#logo {
|
|
|
|
background-image: url(/logo.gif);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin config-icon-colors($prefix, $colors...) {
|
|
|
|
@each $i in $colors {
|
|
|
|
.#{$prefix}#{nth($i, 1)} {
|
|
|
|
color: nth($i, 2);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include config-icon-colors(
|
|
|
|
"icon-",
|
|
|
|
"save" green,
|
|
|
|
"cancel" gray,
|
|
|
|
"delete" red,
|
|
|
|
'wait' blue
|
|
|
|
);
|
|
|
|
|
|
|
|
@function my-calculation-function($some-number, $anotherNumber, $BigNumber){
|
|
|
|
@return $some-number + $anotherNumber + $BigNumber;
|
|
|
|
}
|
|
|
|
@function myCalculationFunction($some-number, $anotherNumber, $BigNumber){
|
|
|
|
@return $some-number + $anotherNumber + $BigNumber;
|
|
|
|
}
|
|
|
|
@function AnotherMyCalculationFunction($some-number, $anotherNumber, $BigNumber: 100px){
|
|
|
|
@return $some-number + $anotherNumber + $BigNumber;
|
|
|
|
}
|
|
|
|
@function border($borders...) {
|
|
|
|
@return $borders;
|
|
|
|
}
|
|
|
|
.foo {
|
|
|
|
padding: my-calculation-function(10px, 5px, 100px);
|
|
|
|
margin: myCalculationFunction($some-number: 10px, $anotherNumber: 5px, $BigNumber: 100px);
|
|
|
|
width: AnotherMyCalculationFunction(10px, 5px);
|
|
|
|
border: border(25px, 35px);
|
|
|
|
}
|
2018-01-24 12:31:30 +03:00
|
|
|
|
|
|
|
$sm-only: '(min-width: 768px) and (max-width: 991px)';
|
|
|
|
$lg-and-up: '(min-width: 1200px)';
|
|
|
|
|
|
|
|
@media screen and #{$sm-only, $lg-and-up} {
|
|
|
|
color: #000;
|
|
|
|
}
|
2018-02-10 02:05:48 +03:00
|
|
|
|
|
|
|
.class-#{$var} {
|
|
|
|
#{$var}: #7b3d66;
|
|
|
|
#{$attr}-color: blue;
|
2018-02-10 20:57:06 +03:00
|
|
|
#{$prop}-#{$side}: $value;
|
2018-02-10 02:05:48 +03:00
|
|
|
background-#{$var}: #7b3d66;
|
|
|
|
animation-name: #{var};
|
|
|
|
line-height: #{strip-unit($line-height)}em;
|
|
|
|
height: 1#{$var};
|
|
|
|
width: calc(100% - #{$sidebar-width});
|
|
|
|
max-width: calc(#{$m*100}vw #{$sign} #{$b});
|
|
|
|
font: #{$font-size}/#{$line-height};
|
|
|
|
content: "I have #{8 + 2} books on SASS!";
|
|
|
|
border: #{$var} #{$var} #{$var};
|
|
|
|
filter: #{$var}#{$var}#{$var};
|
|
|
|
prop: #{ $var + $var } #{ $var + $var } #{ $var + $var };
|
|
|
|
prop2:
|
|
|
|
#{
|
|
|
|
$var
|
|
|
|
+
|
|
|
|
$var
|
|
|
|
}
|
|
|
|
|
|
|
|
#{
|
|
|
|
$var
|
|
|
|
+
|
|
|
|
$var
|
|
|
|
}
|
|
|
|
|
|
|
|
#{
|
|
|
|
$var
|
|
|
|
+
|
|
|
|
$var
|
|
|
|
}
|
|
|
|
;
|
|
|
|
prop3:
|
|
|
|
|
|
|
|
#{
|
|
|
|
|
|
|
|
$var
|
|
|
|
|
|
|
|
+
|
|
|
|
|
|
|
|
$var
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
#{
|
|
|
|
|
|
|
|
$var
|
|
|
|
|
|
|
|
+
|
|
|
|
|
|
|
|
$var
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
#{
|
|
|
|
|
|
|
|
$var
|
|
|
|
|
|
|
|
+
|
|
|
|
|
|
|
|
$var
|
|
|
|
|
|
|
|
}
|
|
|
|
;
|
|
|
|
prop4: -#{$loader-icon-duration};
|
|
|
|
prop5: +#{$loader-icon-duration};
|
|
|
|
prop6: calc(-#{$loader-icon-duration} + 10);
|
|
|
|
prop7: calc(10 + -#{$loader-icon-duration});
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Framework version for the generated CSS is #{$version}. */
|
|
|
|
|
|
|
|
.selector {
|
|
|
|
foo: bar;
|
|
|
|
#{$active} {
|
|
|
|
baz: qux;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.el:nth-of-type(#{$i}) {}
|
|
|
|
|
|
|
|
@media #{$value} {}
|
|
|
|
|
|
|
|
@import url(#{$foundation-dir}/foundation/components/grid);
|
|
|
|
|
|
|
|
@keyframes loader {
|
|
|
|
0% {
|
|
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
#{50% - $loader-icon-duration} {
|
|
|
|
transform: translate3d(0, $bounce-height, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
50% {
|
|
|
|
transform: translate3d(0, $bounce-height, 0) scale($loader-bounce-horizontal-expansion, $loader-bounce-vertical-compression);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$icons: wifi "\\600", wifi-hotspot "\\601", weather "\\602";
|
|
|
|
|
|
|
|
@each $icon in $icons {
|
|
|
|
.icon-#{nth($icon, 1)}, %icon-#{nth($icon, 1)} {
|
|
|
|
content: "#{nth($icon, 2)}";
|
|
|
|
}
|
|
|
|
}
|
2018-02-10 20:57:06 +03:00
|
|
|
|
|
|
|
.foo {
|
|
|
|
prop: -($grid-gutter-width / 2);
|
|
|
|
prop1: -( $grid-gutter-width / 2 );
|
|
|
|
prop2: -$grid-gutter-width / 2;
|
|
|
|
prop3: +($grid-gutter-width / 2);
|
|
|
|
prop4: 10px/8px; /* Plain CSS, no division */
|
|
|
|
prop5: $width / 2; /* Uses a variable, does division */
|
|
|
|
prop6: round(1.5) / 2; /* Uses a function, does division */
|
|
|
|
prop7: (500px / 2); /* Uses parentheses, does division */
|
|
|
|
prop8: 5px + 8px / 2px; //* Uses +, does division */
|
|
|
|
prop9: (italic bold 10px/8px); /* In a list, parentheses don't count */
|
|
|
|
prop10: #010203 + #040506;
|
|
|
|
prop11: #010203 * 2;
|
|
|
|
prop12: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
|
|
|
|
prop13: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
|
|
|
|
prop14: e + -resize;
|
|
|
|
prop15: sans- + "serif";
|
|
|
|
prop16: 1em + (2em * 3);
|
|
|
|
prop17: rotate(-2deg);
|
|
|
|
prop18: rotate( -2deg ) ;
|
|
|
|
_:_;
|
|
|
|
prop19: 10 - ($grid-gutter-width / 2);
|
|
|
|
prop20: 10 + -($grid-gutter-width / 2);
|
|
|
|
prop21: 10 + - ( $grid-gutter-width / 2 ) ;
|
|
|
|
prop22: - ( $grid-gutter-width / 2 ) ;
|
|
|
|
prop23: - ( $grid-gutter-width / 2 ) ;
|
|
|
|
prop24: -$grid-gutter-width;
|
|
|
|
prop25: + ( $grid-gutter-width / 2 ) ;
|
|
|
|
prop26: + ( $grid-gutter-width / 2 ) ;
|
|
|
|
prop27: +$grid-gutter-width;
|
|
|
|
prop28: --($grid-gutter-width / 2);
|
|
|
|
prop28: ++($grid-gutter-width / 2);
|
|
|
|
prop29: rotate( - 2deg ) ;
|
|
|
|
}
|
|
|
|
|
|
|
|
$last:nth($juggler,length($juggler));
|
|
|
|
$x:if($last%2==0,1/2,3/2);
|
|
|
|
$new:pow($last,$x);
|
|
|
|
$sequence:1,1 1,2 1,1 2 1 1, 1 1 1 2 2 1;
|
|
|
|
$new-entry:();
|
|
|
|
$new-entry : ( ) ;
|
|
|
|
$new-entry : ( ) ;
|
|
|
|
$new-entry
|
|
|
|
:
|
|
|
|
(
|
|
|
|
)
|
|
|
|
;
|
|
|
|
|
|
|
|
body:before {
|
|
|
|
content: quote(to-string(fibonacci(100), ' \\A '));
|
|
|
|
white-space: pre-wrap;
|
|
|
|
}
|
|
|
|
|
|
|
|
width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);
|
|
|
|
width
|
|
|
|
:
|
|
|
|
(
|
|
|
|
(
|
|
|
|
100%
|
|
|
|
-
|
|
|
|
(
|
|
|
|
(
|
|
|
|
$numPerRow
|
|
|
|
-
|
|
|
|
1
|
|
|
|
)
|
|
|
|
*
|
|
|
|
$margin
|
|
|
|
)
|
|
|
|
)
|
|
|
|
/
|
|
|
|
$numPerRow
|
|
|
|
)
|
|
|
|
;
|
|
|
|
|
|
|
|
a:nth-child(#{$numPerRow}n) {
|
|
|
|
margin-right: 0;
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
@function em($pixels, $context: $browser-context) {
|
|
|
|
@return #{ $pixels / $context }em
|
|
|
|
}
|
|
|
|
|
|
|
|
.navigation {
|
|
|
|
@extend %updated-#{$flag};
|
|
|
|
@extend .selected-#{$flag};
|
|
|
|
@extend %#{$item};
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon-#{$icon-name} {
|
|
|
|
background-image: '/images/#{$icon-name}.svg';
|
|
|
|
}
|
|
|
|
|
|
|
|
$extmods:(eot:"?",svg:"#" + str-replace($name," ","_"));
|
|
|
|
|
|
|
|
@mixin keyframes {@-moz-keyframes{@content;}@-webkit-keyframes{@content;}}
|
|
|
|
|
|
|
|
@function gcd($a,$b){
|
|
|
|
// From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript
|
|
|
|
@if ($b != 0) {
|
|
|
|
@return gcd($b,$a % $b);
|
|
|
|
}@else{
|
|
|
|
@return abs($a);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$colors: (
|
|
|
|
primary: (
|
|
|
|
base: #00abc9,
|
|
|
|
light: #daf1f6,
|
|
|
|
dark: #12799a
|
|
|
|
),
|
|
|
|
secondary: (
|
|
|
|
base: #424d55,
|
|
|
|
light: #ccc,
|
|
|
|
lightest: #efefef,
|
|
|
|
dark: #404247
|
|
|
|
),
|
|
|
|
success: (
|
|
|
|
base: #bbd33e,
|
|
|
|
light: #eaf0c6
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
|
|
|
@function color($color, $tone: "base") {
|
|
|
|
@return map-get(map-get($colors, $color), $tone);
|
|
|
|
}
|
2017-05-29 01:01:47 +03:00
|
|
|
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
|
@media #{$g-breakpoint-tiny} {
|
|
|
|
}
|
|
|
|
.#{$fa-css-prefix}-glass:before {
|
|
|
|
content: $fa-var-glass;
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
height: calc(#{$foo} + 1);
|
|
|
|
}
|
|
|
|
div {
|
|
|
|
background: {
|
|
|
|
size: auto 60%;
|
|
|
|
position: bottom 2px left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
margin: 0 {
|
|
|
|
left: 10px;
|
|
|
|
}
|
|
|
|
}
|
2018-01-24 18:48:54 +03:00
|
|
|
|
2018-01-12 14:12:02 +03:00
|
|
|
$default: #111111 !default;
|
|
|
|
$default: #111111 !default;
|
|
|
|
$default: #111111 !default;
|
|
|
|
$default: "very-long-long-long-long-long-long-long-long-long-long-long-value" !default;
|
|
|
|
$default: "very-long-long-long-long-long-long-long-long-long-long-long-value" !default;
|
|
|
|
$default: "very-long-long-long-long-long-long-long-long-long-long-long-value" !default;
|
2017-05-29 01:01:47 +03:00
|
|
|
|
2018-01-30 17:53:37 +03:00
|
|
|
$global: #111111 !global;
|
|
|
|
$global: #111111 !global;
|
|
|
|
$global: #111111 !global;
|
|
|
|
$global: "very-long-long-long-long-long-long-long-long-long-long-long-value" !global;
|
|
|
|
$global: "very-long-long-long-long-long-long-long-long-long-long-long-value" !global;
|
|
|
|
$global: "very-long-long-long-long-long-long-long-long-long-long-long-value" !global;
|
|
|
|
|
2018-01-24 18:48:54 +03:00
|
|
|
$map: (
|
|
|
|
key: value,
|
|
|
|
other-key: other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key: value,
|
|
|
|
other-key: other-value
|
|
|
|
) !default;
|
|
|
|
$map: (
|
|
|
|
key: value,
|
|
|
|
other-key: other-value
|
|
|
|
) !default;
|
|
|
|
$map: (
|
|
|
|
key: value,
|
|
|
|
other-key: other-value
|
|
|
|
) !default;
|
|
|
|
$map: (
|
|
|
|
key: value,
|
|
|
|
other-key: other-value
|
|
|
|
) !default;
|
|
|
|
$map: (
|
|
|
|
key: value,
|
|
|
|
other-key: other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key: value,
|
|
|
|
other-key: other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key: value,
|
|
|
|
other-key: other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key: value,
|
|
|
|
other-key: other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key: value,
|
|
|
|
other-key: other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key: value,
|
|
|
|
other-key: other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-key:
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-value,
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-key:
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-key:
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-value,
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-key:
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-key:
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-value,
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-key:
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-key:
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-value,
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-key:
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-key:
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-value,
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-key:
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-key:
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-value,
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-key:
|
|
|
|
very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-value
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key: (#d82d2d, #666),
|
|
|
|
other-key: (#52bf4a, #fff),
|
|
|
|
other-other-key: (#c23435, #fff)
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key: (#d82d2d, #666),
|
|
|
|
other-key: (#52bf4a, #fff),
|
|
|
|
other-other-key: (#c23435, #fff)
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key: (#d82d2d, #666),
|
|
|
|
other-key: (#52bf4a, #fff),
|
|
|
|
other-other-key: (#c23435, #fff)
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key: (#d82d2d, #666),
|
|
|
|
other-key: (#52bf4a, #fff),
|
|
|
|
other-other-key: (#c23435, #fff)
|
|
|
|
);
|
|
|
|
$map: (
|
|
|
|
key: (#d82d2d, #666),
|
|
|
|
other-key: (#52bf4a, #fff),
|
|
|
|
other-other-key: (#c23435, #fff)
|
|
|
|
);
|
|
|
|
$map: map-merge($map, ($key: $value));
|
|
|
|
$map: map-merge($map, ($key: $value));
|
|
|
|
$map: map-merge($map, ($key: $value));
|
|
|
|
$map: map-merge($map, ($key: $value));
|
|
|
|
$map: map-merge($map, ($key: $value));
|
|
|
|
$map: map-merge($map, ($key: $value));
|
|
|
|
|
2018-02-09 15:28:55 +03:00
|
|
|
$longVariable: (
|
|
|
|
(mobile $mobile) (tablet $tablet) (desktop $desktop) (wide $wide)
|
|
|
|
);
|
|
|
|
|
|
|
|
$list-space: "item-1" "item-2" "item-3";
|
|
|
|
$list-space: "item-1" "item-2" "item-3";
|
|
|
|
$list-space: "item-1" "item-2" "item-3";
|
|
|
|
$list-space: "item-1" "item-2" "item-3";
|
|
|
|
$list-space: "item-1" "item-2" "item-3";
|
|
|
|
$list-space: "item-1" "item-2" "item-3";
|
|
|
|
$list-comma: "item-1", "item-2", "item-3";
|
|
|
|
$list-comma: "item-1", "item-2", "item-3";
|
|
|
|
$list-comma: "item-1", "item-2", "item-3";
|
|
|
|
$list-comma: "item-1", "item-2", "item-3";
|
|
|
|
$list-comma: "item-1", "item-2", "item-3";
|
|
|
|
$list-comma: "item-1", "item-2", "item-3";
|
|
|
|
$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
|
|
|
|
"item-3.1" "item-3.2" "item-3.3";
|
|
|
|
$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
|
|
|
|
"item-3.1" "item-3.2" "item-3.3";
|
|
|
|
$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
|
|
|
|
"item-3.1" "item-3.2" "item-3.3";
|
|
|
|
$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
|
|
|
|
"item-3.1" "item-3.2" "item-3.3";
|
|
|
|
$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
|
|
|
|
"item-3.1" "item-3.2" "item-3.3";
|
|
|
|
$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
|
|
|
|
"item-3.1" "item-3.2" "item-3.3";
|
|
|
|
$list: (
|
|
|
|
("item-1.1", "item-1.2", "item-1.3"),
|
|
|
|
("item-2.1", "item-2.2", "item-2.3"),
|
|
|
|
("item-3.1", "item-3.2", "item-3.3")
|
|
|
|
);
|
|
|
|
$list: (
|
|
|
|
("item-1.1", "item-1.2", "item-1.3"),
|
|
|
|
("item-2.1", "item-2.2", "item-2.3"),
|
|
|
|
("item-3.1", "item-3.2", "item-3.3")
|
|
|
|
);
|
|
|
|
$list: (
|
|
|
|
("item-1.1", "item-1.2", "item-1.3"),
|
|
|
|
("item-2.1", "item-2.2", "item-2.3"),
|
|
|
|
("item-3.1", "item-3.2", "item-3.3")
|
|
|
|
);
|
|
|
|
$list: (
|
|
|
|
("item-1.1", "item-1.2", "item-1.3"),
|
|
|
|
("item-2.1", "item-2.2", "item-2.3"),
|
|
|
|
("item-3.1", "item-3.2", "item-3.3")
|
|
|
|
);
|
|
|
|
$list: (
|
|
|
|
("item-1.1", "item-1.2", "item-1.3"),
|
|
|
|
("item-2.1", "item-2.2", "item-2.3"),
|
|
|
|
("item-3.1", "item-3.2", "item-3.3")
|
|
|
|
);
|
|
|
|
$list: (
|
|
|
|
("item-1.1", "item-1.2", "item-1.3"),
|
|
|
|
("item-2.1", "item-2.2", "item-2.3"),
|
|
|
|
("item-3.1", "item-3.2", "item-3.3")
|
|
|
|
);
|
|
|
|
|
|
|
|
$var: (0 0) (0 0) (0 0) (0 0) (0 0) (0 0) (0 0) (0 0) (0 0) (0 0) (0 0) (0 0)
|
|
|
|
(0 0) (0 0);
|
|
|
|
$space-scale: (0, "0") (0.25, "0-25") (0.5, "0-5") (0.75, "0-75") (1, "1")
|
|
|
|
(1.25, "1-25") (1.5, "1-5") (1.75, "1-75") (2, "2") (2.25, "2-25")
|
|
|
|
(2.5, "2-5") (2.75, "2-75") (3, "3") (3.25, "3-25") (3.5, "3-5")
|
|
|
|
(3.75, "3-75") (4, "4");
|
|
|
|
|
2018-01-19 17:39:44 +03:00
|
|
|
.card-column-simple {
|
2018-02-02 18:06:47 +03:00
|
|
|
@include breakpoint(getBp(md)) {
|
2018-01-19 17:39:44 +03:00
|
|
|
padding: $spacing_content-sm $spacing_content-md;
|
|
|
|
}
|
|
|
|
|
2018-02-02 18:06:47 +03:00
|
|
|
@include breakpoint(getBp(md)) {
|
2018-01-19 17:39:44 +03:00
|
|
|
&:nth-child(2n + 3) {
|
|
|
|
clear: both;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-02-02 18:06:47 +03:00
|
|
|
@include breakpoint(getBp(xl)) {
|
2018-01-19 17:39:44 +03:00
|
|
|
&:nth-child(2n + 3) {
|
|
|
|
clear: none;
|
|
|
|
}
|
|
|
|
&:nth-child(3n + 4) {
|
|
|
|
clear: both;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-01-20 03:00:06 +03:00
|
|
|
@warn "Warn (#{$message}).";
|
|
|
|
@warn "Warn (#{$message}).";
|
|
|
|
@warn "Warn (#{$message}).";
|
|
|
|
@warn #{$message};
|
|
|
|
@warn "Very long long long long long long long long long long long long long line (#{$message}).";
|
|
|
|
@warn "Very long long long long long long long long long long long long long line (#{$message}).";
|
|
|
|
@error "Error (#{$message}).";
|
|
|
|
@error "Error (#{$message}).";
|
|
|
|
@error "Error (#{$message}).";
|
|
|
|
@error #{$message};
|
|
|
|
@error "Very long long long long long long long long long long long long long line Error (#{$message}).";
|
|
|
|
@error "Very long long long long long long long long long long long long long line Error (#{$message}).";
|
|
|
|
|
2018-01-23 14:33:18 +03:00
|
|
|
$buttonConfig: "save" 50px, "cancel" 50px, "help" 100px;
|
|
|
|
|
|
|
|
$locale: "en_us";
|
|
|
|
html[lang="#{$locale}"] {
|
|
|
|
font-size: 10px;
|
|
|
|
}
|
|
|
|
$alertClass: "error";
|
|
|
|
p.message-#{$alertClass} {
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
$mediumBreakpoint: 768px;
|
|
|
|
@media (max-width: #{$mediumBreakpoint}) {
|
|
|
|
a {
|
|
|
|
font-size: 18px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
font-size: 150%;
|
|
|
|
|
|
|
|
@media (orientation: landscape) {
|
|
|
|
line-height: 75%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.popularAnimal {
|
|
|
|
background: gray;
|
|
|
|
}
|
|
|
|
.GoodBoy {
|
|
|
|
color: green;
|
|
|
|
}
|
|
|
|
.dog {
|
|
|
|
@extend .popularAnimal;
|
|
|
|
@extend .GoodBoy;
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
|
|
|
%animal {
|
|
|
|
background: gray;
|
|
|
|
}
|
|
|
|
.cat {
|
|
|
|
@extend %animal;
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
.dog {
|
|
|
|
@extend %animal;
|
|
|
|
color: black;
|
|
|
|
}
|
|
|
|
|
|
|
|
%mfw-standing-out {
|
|
|
|
font-size: 150%;
|
|
|
|
font-style: italic;
|
|
|
|
padding: 25px;
|
|
|
|
}
|
|
|
|
%mfwSlightlyShadowed {
|
|
|
|
@include box-shadow(black 2px 2px 10px); // from Compass
|
|
|
|
}
|
|
|
|
%MFWRounded {
|
|
|
|
@include border-radius(25px); // from Compass
|
|
|
|
}
|
|
|
|
#join-button {
|
|
|
|
@extend %mfw-standing-out;
|
|
|
|
@extend %mfwSlightlyShadowed;
|
|
|
|
@extend %MFWRounded;
|
|
|
|
background: green;
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
&:hover {
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
p {
|
|
|
|
body.no-touch & {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.foo.bar .baz.bang,
|
|
|
|
.bip.qux {
|
|
|
|
$selector: &;
|
|
|
|
}
|
|
|
|
@mixin does-parent-exist {
|
|
|
|
@if & {
|
|
|
|
&:hover {
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
} @else {
|
|
|
|
a {
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
@if 1 + 1 == 2 {
|
|
|
|
border: 1px solid;
|
|
|
|
}
|
|
|
|
@if 5 < 3 {
|
|
|
|
border: 2px dotted;
|
|
|
|
}
|
|
|
|
@if null {
|
|
|
|
border: 3px double;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$mosterType: monster;
|
|
|
|
p {
|
|
|
|
@if $mosterType == ocean {
|
|
|
|
color: blue;
|
|
|
|
} @else if $mosterType == matador {
|
|
|
|
color: red;
|
|
|
|
} @else if $mosterType == monster {
|
|
|
|
color: green;
|
|
|
|
} @else if $mosterType == nightKing {
|
|
|
|
color: green;
|
|
|
|
} @else if $mosterType == VeryWickedWolf {
|
|
|
|
color: green;
|
|
|
|
} @else {
|
|
|
|
color: black;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@for $i from 1 through 3 {
|
|
|
|
.item-#{$i} {
|
|
|
|
width: 2em * $i;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-02-02 18:06:47 +03:00
|
|
|
@each $animal in puma, sea-slug, cheerfulDog, BigSalamander, "string",
|
|
|
|
"another-string", "camelCaseString", "PascalCaseString"
|
|
|
|
{
|
2018-01-23 14:33:18 +03:00
|
|
|
.#{$animal}-icon {
|
|
|
|
background-image: url("/images/#{$animal}.png");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$i: 6;
|
|
|
|
@while $i > 0 {
|
|
|
|
.item-#{$i} {
|
|
|
|
width: 2em * $i;
|
|
|
|
}
|
|
|
|
$i: $i - 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin cool-border($width: 10px, $coolStyle: "solid", $AwesomeColor: "black") {
|
|
|
|
border: $width $coolStyle $AwesomeColor;
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
@include cool-border(1px, "solid", $fff);
|
|
|
|
}
|
|
|
|
p {
|
|
|
|
@include cool-border($width: 1px, $coolStyle: "solid", $AwesomeColor: #fff);
|
|
|
|
}
|
|
|
|
p {
|
|
|
|
@include coolBorder();
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin coolBorder() {
|
|
|
|
border: 10px solid #fff;
|
|
|
|
}
|
|
|
|
p {
|
|
|
|
@include coolBorder(1px, "solid", $fff);
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin CoolBorder() {
|
|
|
|
border: 10px solid #fff;
|
|
|
|
}
|
|
|
|
p {
|
|
|
|
@include CoolBorder(1px, "solid", $fff);
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin box-shadow($shadows...) {
|
|
|
|
-moz-box-shadow: $shadows;
|
|
|
|
-webkit-box-shadow: $shadows;
|
|
|
|
box-shadow: $shadows;
|
|
|
|
}
|
|
|
|
.shadows {
|
|
|
|
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin apply-to-ie6-only {
|
|
|
|
* html {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include apply-to-ie6-only {
|
|
|
|
#logo {
|
|
|
|
background-image: url(/logo.gif);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin applyToIe6Only {
|
|
|
|
* html {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include applyToIe6Only {
|
|
|
|
#logo {
|
|
|
|
background-image: url(/logo.gif);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin ApplyToIe6Only {
|
|
|
|
* html {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include ApplyToIe6Only {
|
|
|
|
#logo {
|
|
|
|
background-image: url(/logo.gif);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin config-icon-colors($prefix, $colors...) {
|
|
|
|
@each $i in $colors {
|
|
|
|
.#{$prefix}#{nth($i, 1)} {
|
|
|
|
color: nth($i, 2);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include config-icon-colors(
|
|
|
|
"icon-",
|
|
|
|
"save" green,
|
|
|
|
"cancel" gray,
|
|
|
|
"delete" red,
|
|
|
|
"wait" blue
|
|
|
|
);
|
|
|
|
|
|
|
|
@function my-calculation-function($some-number, $anotherNumber, $BigNumber) {
|
|
|
|
@return $some-number + $anotherNumber + $BigNumber;
|
|
|
|
}
|
|
|
|
@function myCalculationFunction($some-number, $anotherNumber, $BigNumber) {
|
|
|
|
@return $some-number + $anotherNumber + $BigNumber;
|
|
|
|
}
|
2018-02-02 18:06:47 +03:00
|
|
|
@function AnotherMyCalculationFunction(
|
|
|
|
$some-number,
|
|
|
|
$anotherNumber,
|
|
|
|
$BigNumber: 100px
|
|
|
|
) {
|
2018-01-23 14:33:18 +03:00
|
|
|
@return $some-number + $anotherNumber + $BigNumber;
|
|
|
|
}
|
|
|
|
@function border($borders...) {
|
|
|
|
@return $borders;
|
|
|
|
}
|
|
|
|
.foo {
|
|
|
|
padding: my-calculation-function(10px, 5px, 100px);
|
|
|
|
margin: myCalculationFunction(
|
|
|
|
$some-number: 10px,
|
|
|
|
$anotherNumber: 5px,
|
|
|
|
$BigNumber: 100px
|
|
|
|
);
|
|
|
|
width: AnotherMyCalculationFunction(10px, 5px);
|
|
|
|
border: border(25px, 35px);
|
|
|
|
}
|
|
|
|
|
2018-01-24 12:31:30 +03:00
|
|
|
$sm-only: "(min-width: 768px) and (max-width: 991px)";
|
|
|
|
$lg-and-up: "(min-width: 1200px)";
|
|
|
|
|
|
|
|
@media screen and #{$sm-only, $lg-and-up} {
|
|
|
|
color: #000;
|
|
|
|
}
|
|
|
|
|
2018-02-10 02:05:48 +03:00
|
|
|
.class-#{$var} {
|
|
|
|
#{$var}: #7b3d66;
|
|
|
|
#{$attr}-color: blue;
|
2018-02-10 20:57:06 +03:00
|
|
|
#{$prop}-#{$side}: $value;
|
2018-02-10 02:05:48 +03:00
|
|
|
background-#{$var}: #7b3d66;
|
|
|
|
animation-name: #{var};
|
|
|
|
line-height: #{strip-unit($line-height)}em;
|
|
|
|
height: 1#{$var};
|
|
|
|
width: calc(100% - #{$sidebar-width});
|
2018-02-16 21:58:21 +03:00
|
|
|
max-width: calc(#{$m * 100}vw #{$sign} #{$b});
|
2018-02-10 02:05:48 +03:00
|
|
|
font: #{$font-size}/#{$line-height};
|
|
|
|
content: "I have #{8 + 2} books on SASS!";
|
|
|
|
border: #{$var} #{$var} #{$var};
|
|
|
|
filter: #{$var}#{$var}#{$var};
|
|
|
|
prop: #{$var + $var} #{$var + $var} #{$var + $var};
|
|
|
|
prop2: #{$var + $var} #{$var + $var} #{$var + $var};
|
|
|
|
prop3: #{$var + $var} #{$var + $var} #{$var + $var};
|
|
|
|
prop4: -#{$loader-icon-duration};
|
|
|
|
prop5: +#{$loader-icon-duration};
|
|
|
|
prop6: calc(-#{$loader-icon-duration} + 10);
|
|
|
|
prop7: calc(10 + -#{$loader-icon-duration});
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Framework version for the generated CSS is #{$version}. */
|
|
|
|
|
|
|
|
.selector {
|
|
|
|
foo: bar;
|
|
|
|
#{$active} {
|
|
|
|
baz: qux;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.el:nth-of-type(#{$i}) {
|
|
|
|
}
|
|
|
|
|
|
|
|
@media #{$value} {
|
|
|
|
}
|
|
|
|
|
|
|
|
@import url(#{$foundation-dir}/foundation/components/grid);
|
|
|
|
|
|
|
|
@keyframes loader {
|
|
|
|
0% {
|
|
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
#{50% - $loader-icon-duration} {
|
|
|
|
transform: translate3d(0, $bounce-height, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
50% {
|
|
|
|
transform: translate3d(0, $bounce-height, 0)
|
|
|
|
scale(
|
|
|
|
$loader-bounce-horizontal-expansion,
|
|
|
|
$loader-bounce-vertical-compression
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$icons: wifi "\\600", wifi-hotspot "\\601", weather "\\602";
|
|
|
|
|
|
|
|
@each $icon in $icons {
|
|
|
|
.icon-#{nth($icon, 1)},
|
|
|
|
%icon-#{nth($icon, 1)} {
|
|
|
|
content: "#{nth($icon, 2)}";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-02-10 20:57:06 +03:00
|
|
|
.foo {
|
|
|
|
prop: -($grid-gutter-width / 2);
|
|
|
|
prop1: -($grid-gutter-width / 2);
|
|
|
|
prop2: -$grid-gutter-width / 2;
|
|
|
|
prop3: +($grid-gutter-width / 2);
|
|
|
|
prop4: 10px/8px; /* Plain CSS, no division */
|
|
|
|
prop5: $width / 2; /* Uses a variable, does division */
|
|
|
|
prop6: round(1.5) / 2; /* Uses a function, does division */
|
|
|
|
prop7: (500px / 2); /* Uses parentheses, does division */
|
|
|
|
prop8: 5px + 8px / 2px; //* Uses +, does division */
|
|
|
|
prop9: (italic bold 10px/8px); /* In a list, parentheses don't count */
|
|
|
|
prop10: #010203 + #040506;
|
|
|
|
prop11: #010203 * 2;
|
|
|
|
prop12: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
|
2018-02-26 14:58:38 +03:00
|
|
|
prop13: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
|
2018-02-10 20:57:06 +03:00
|
|
|
prop14: e + -resize;
|
|
|
|
prop15: sans- + "serif";
|
|
|
|
prop16: 1em + (2em * 3);
|
|
|
|
prop17: rotate(-2deg);
|
|
|
|
prop18: rotate(-2deg);
|
|
|
|
_: _;
|
|
|
|
prop19: 10 - ($grid-gutter-width / 2);
|
|
|
|
prop20: 10 + -($grid-gutter-width / 2);
|
|
|
|
prop21: 10 + -($grid-gutter-width / 2);
|
|
|
|
prop22: -($grid-gutter-width / 2);
|
|
|
|
prop23: -($grid-gutter-width / 2);
|
|
|
|
prop24: -$grid-gutter-width;
|
|
|
|
prop25: +($grid-gutter-width / 2);
|
|
|
|
prop26: +($grid-gutter-width / 2);
|
|
|
|
prop27: +$grid-gutter-width;
|
|
|
|
prop28: --($grid-gutter-width / 2);
|
|
|
|
prop28: ++($grid-gutter-width / 2);
|
|
|
|
prop29: rotate(-2deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
$last: nth($juggler, length($juggler));
|
|
|
|
$x: if($last%2==0, 1/2, 3/2);
|
|
|
|
$new: pow($last, $x);
|
|
|
|
$sequence: 1, 1 1, 2 1, 1 2 1 1, 1 1 1 2 2 1;
|
|
|
|
$new-entry: ();
|
|
|
|
$new-entry: ();
|
|
|
|
$new-entry: ();
|
|
|
|
$new-entry: ();
|
|
|
|
|
|
|
|
body:before {
|
|
|
|
content: quote(to-string(fibonacci(100), " \\A "));
|
|
|
|
white-space: pre-wrap;
|
|
|
|
}
|
|
|
|
|
|
|
|
width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);
|
|
|
|
width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);
|
|
|
|
|
|
|
|
a:nth-child(#{$numPerRow}n) {
|
|
|
|
margin-right: 0;
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
@function em($pixels, $context: $browser-context) {
|
|
|
|
@return #{$pixels / $context}em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.navigation {
|
|
|
|
@extend %updated-#{$flag};
|
|
|
|
@extend .selected-#{$flag};
|
|
|
|
@extend %#{$item};
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon-#{$icon-name} {
|
|
|
|
background-image: "/images/#{$icon-name}.svg";
|
|
|
|
}
|
|
|
|
|
|
|
|
$extmods: (
|
|
|
|
eot: "?",
|
|
|
|
svg: "#" + str-replace($name, " ", "_")
|
|
|
|
);
|
|
|
|
|
|
|
|
@mixin keyframes {
|
|
|
|
@-moz-keyframes {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
@-webkit-keyframes {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@function gcd($a, $b) {
|
|
|
|
// From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript
|
|
|
|
@if ($b != 0) {
|
|
|
|
@return gcd($b, $a % $b);
|
|
|
|
} @else {
|
|
|
|
@return abs($a);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$colors: (
|
|
|
|
primary: (base: #00abc9, light: #daf1f6, dark: #12799a),
|
|
|
|
secondary: (base: #424d55, light: #ccc, lightest: #efefef, dark: #404247),
|
|
|
|
success: (base: #bbd33e, light: #eaf0c6)
|
|
|
|
);
|
|
|
|
|
|
|
|
@function color($color, $tone: "base") {
|
|
|
|
@return map-get(map-get($colors, $color), $tone);
|
|
|
|
}
|
|
|
|
|
2017-05-29 01:01:47 +03:00
|
|
|
`;
|