1265 lines
48 KiB
Plaintext
1265 lines
48 KiB
Plaintext
<beginfold id='1'>/*</beginfold id='1'>*
|
|
* This is a pseudo SCSS file to test Kate's SCSS syntax highlighting.
|
|
<endfold id='1'>*/</endfold id='1'>
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> Properties <endfold id='1'>*/</endfold id='1'>
|
|
|
|
body <beginfold id='2'>{</beginfold id='2'>
|
|
font-size: 15pt;
|
|
font-family: Verdana, Helvetica, "Bitstream Vera Sans", sans-serif;
|
|
margin-top: 0px; <beginfold id='1'>/*</beginfold id='1'> yet another comment <endfold id='1'>*/</endfold id='1'>
|
|
margin-bottom: 0px;
|
|
// this is no comment, it's just broken!
|
|
background-color: hsl(0, 0%, calc(95% - 3%));
|
|
font-family: "Droid Sans", Arial, sans-serif;
|
|
font-size: 11pt;
|
|
line-height: 1.5em;
|
|
background: #fff000;
|
|
text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
|
box-sizing: border-box;
|
|
font-variant-alternates: styleset(nice-style);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> Selectors <endfold id='1'>*/</endfold id='1'>
|
|
|
|
body, blockquote <beginfold id='2'>{</beginfold id='2'>
|
|
margin: 0;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
header #logo <beginfold id='2'>{</beginfold id='2'>
|
|
width: 100px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
div#footer .link <beginfold id='2'>{</beginfold id='2'>
|
|
color: blue;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
.something
|
|
<beginfold id='2'>{</beginfold id='2'>
|
|
margin-right: 0px;
|
|
color: #cdd;
|
|
color: #AAFE04;
|
|
color: rgb(10%,30%,43%);
|
|
background: maroon;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
sidebar #subscribe .subscribe_form input[type="text"] <beginfold id='2'>{</beginfold id='2'>
|
|
font-size: 20px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] <beginfold id='2'>{</beginfold id='2'>
|
|
font-weight: bold;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
input[value=text]
|
|
input[value= text ]
|
|
input[value= text i]
|
|
input[value= "text" i]
|
|
input[value=i]
|
|
input[value= i] <beginfold id='2'>{</beginfold id='2'>
|
|
font-size: 20px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
#header,
|
|
a:hover,
|
|
p.intro:first-letter,
|
|
p:lang(nl),
|
|
img[align="right"]
|
|
<beginfold id='2'>{</beginfold id='2'>
|
|
border: 1px solid Qt::red !important;
|
|
-moz-border-radius: 15px; <beginfold id='1'>/*</beginfold id='1'> unknown properties render italic <endfold id='1'>*/</endfold id='1'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
.nice-look <beginfold id='2'>{</beginfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
ul <beginfold id='2'>{</beginfold id='2'>
|
|
list-style: thumbs;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> SVG <a> <endfold id='1'>*/</endfold id='1'>
|
|
svg|a <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> XHTML and SVG <a> <endfold id='1'>*/</endfold id='1'>
|
|
*|a <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
|
|
*<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
.class<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
#id<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
:hover<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
:lang(fr)<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E>F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E > F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E~F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E ~ F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E:first-child<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E:visited<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E::after<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E:lang(c)<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E:lang(fr-ca)<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E + F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E+F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E[foo]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E[foo=warning]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E[foo="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E[foo~="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E[foo^="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E[foo$="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E[foo*="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E[lang|="en"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
DIV.warning<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
DIV .warning<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E#myid<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E #myid<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E,E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E, E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E ,E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
E , E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
|
|
p:nth-child(2) <beginfold id='2'>{</beginfold id='2'>
|
|
background: red;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> Elements that are not <div> or <span> elements <endfold id='1'>*/</endfold id='1'>
|
|
body :not(div):not(span) <beginfold id='2'>{</beginfold id='2'>
|
|
font-weight: bold;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> Elements that are not `.crazy` or `.fancy` <endfold id='1'>*/</endfold id='1'>
|
|
<beginfold id='1'>/*</beginfold id='1'> Note that this syntax is not well supported yet. <endfold id='1'>*/</endfold id='1'>
|
|
body :not(.crazy, .fancy) <beginfold id='2'>{</beginfold id='2'>
|
|
font-family: sans-serif;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
:nth-child(odd) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
|
|
:nth-child(even) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
|
|
:nth-child(4) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
|
|
:nth-child(4n) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
|
|
:nth-child(3n+4) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
|
|
:nth-child(-n+3) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
|
|
:nth-child(n+8):nth-child(-n+15) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
|
|
|
|
.first span:nth-child(2n+1),
|
|
.second span:nth-child(2n+1),
|
|
.third span:nth-of-type(2n+1) <beginfold id='2'>{</beginfold id='2'>
|
|
background-color: lime;
|
|
unknown-property: lime;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
:root<beginfold id='2'>{</beginfold id='2'>
|
|
--foo: if(x > 5) this.width = 10; <beginfold id='1'>/*</beginfold id='1'> valid custom property, invalid in any normal property <endfold id='1'>*/</endfold id='1'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
:root,
|
|
:root:lang(en) <beginfold id='2'>{</beginfold id='2'>--external-link: "external link";<endfold id='2'>}</endfold id='2'>
|
|
:root:lang(de) <beginfold id='2'>{</beginfold id='2'>--external-link: "externer Link";<endfold id='2'>}</endfold id='2'>
|
|
|
|
a[href^="http"]::after <beginfold id='2'>{</beginfold id='2'>content: " (" var(--external-link) ")"<endfold id='2'>}</endfold id='2'>
|
|
|
|
one <beginfold id='2'>{</beginfold id='2'> --foo: 10px; <endfold id='2'>}</endfold id='2'>
|
|
two <beginfold id='2'>{</beginfold id='2'> --bar: calc(var(--foo) + 10px); <endfold id='2'>}</endfold id='2'>
|
|
three <beginfold id='2'>{</beginfold id='2'> --foo: calc(var(--bar) + 10px); <endfold id='2'>}</endfold id='2'>
|
|
.foo <beginfold id='2'>{</beginfold id='2'>
|
|
--gap: 20;
|
|
margin-top: var(--gap)px; <beginfold id='1'>/*</beginfold id='1'>20 px<endfold id='1'>*/</endfold id='1'>
|
|
margin-top: calc(var(--gap) * 1px); <beginfold id='1'>/*</beginfold id='1'>20px<endfold id='1'>*/</endfold id='1'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
foo <beginfold id='2'>{</beginfold id='2'>
|
|
width: calc(50% -8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
|
|
width: calc(50%- 8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
|
|
width: calc(50% +8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
|
|
width: calc(50%+ 8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
|
|
width: calc(2px -var(--a)); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
|
|
width: calc(50%*-8px);
|
|
width: calc(50% - 8px);
|
|
width: calc(50% + -8px);
|
|
width: calc(50% +(8px));
|
|
width: calc(2px -(var(--a)));
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
sweet-alert input:focus::-moz-placeholder <beginfold id='2'>{</beginfold id='2'>
|
|
-webkit-transition: opacity 0.3s 0.03s ease;
|
|
transition: opacity 0.3s 0.03s ease;
|
|
opacity: 0.5;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
@font-feature-values Font One <beginfold id='2'>{</beginfold id='2'>
|
|
@styleset <beginfold id='2'>{</beginfold id='2'>
|
|
nice-style: 12;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@font-feature-values Font Two <beginfold id='2'>{</beginfold id='2'>
|
|
@styleset <beginfold id='2'>{</beginfold id='2'>
|
|
nice-style: 4;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@font-palette-values --identifier <beginfold id='2'>{</beginfold id='2'>
|
|
font-family: Bixa;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@counter-style thumbs <beginfold id='2'>{</beginfold id='2'>
|
|
system: cyclic;
|
|
symbols: "\1F44D";
|
|
suffix: " ";
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@font-face <beginfold id='2'>{</beginfold id='2'>
|
|
font-family: "Open Sans";
|
|
<beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
|
|
unknown: 2px;
|
|
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
|
|
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@page <beginfold id='2'>{</beginfold id='2'>
|
|
margin: 1cm;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@page :first <beginfold id='2'>{</beginfold id='2'>
|
|
margin: 2cm;
|
|
<beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
|
|
marks: crop cross;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@page :unknown <beginfold id='2'>{</beginfold id='2'>
|
|
margin: 2cm;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@document url("https://www.example.com/") <beginfold id='2'>{</beginfold id='2'>
|
|
h1 <beginfold id='2'>{</beginfold id='2'>
|
|
color: green;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@charset "UTF-8";
|
|
|
|
@import 'custom.css';
|
|
@import "common.css" screen;
|
|
@import url("fineprint.css") print;
|
|
@import url(fineprint.css) print;
|
|
@import url('bluish.css') speech;
|
|
@import url("chrome://communicator/skin/");
|
|
@import url('landscape.css') screen and (orientation:landscape);
|
|
@import url("othersheet.css") screen, print;
|
|
|
|
@namespace url(http://www.w3.org/1999/xhtml);
|
|
@namespace svg url(http://www.w3.org/2000/svg);
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> Animation (Keyframes) <endfold id='1'>*/</endfold id='1'>
|
|
|
|
@keyframes important1 <beginfold id='2'>{</beginfold id='2'>
|
|
from <beginfold id='2'>{</beginfold id='2'> margin-top: 50px; <endfold id='2'>}</endfold id='2'>
|
|
50% <beginfold id='2'>{</beginfold id='2'> margin-top: 150px !important; <endfold id='2'>}</endfold id='2'> <beginfold id='1'>/*</beginfold id='1'> ignored <endfold id='1'>*/</endfold id='1'>
|
|
to <beginfold id='2'>{</beginfold id='2'> margin-top: 100px; <endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@keyframes important2 <beginfold id='2'>{</beginfold id='2'>
|
|
from <beginfold id='2'>{</beginfold id='2'> margin-top: 50px;
|
|
margin-bottom: 100px; <endfold id='2'>}</endfold id='2'>
|
|
to <beginfold id='2'>{</beginfold id='2'> margin-top: 150px !important; <beginfold id='1'>/*</beginfold id='1'> ignored <endfold id='1'>*/</endfold id='1'>
|
|
margin-bottom: 50px; <endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@keyframes slidein <beginfold id='2'>{</beginfold id='2'>
|
|
from <beginfold id='2'>{</beginfold id='2'>
|
|
margin-left: 100%;
|
|
width: 300%;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
to <beginfold id='2'>{</beginfold id='2'>
|
|
margin-left: 0%;
|
|
width: 100%;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> Media Queries <endfold id='1'>*/</endfold id='1'>
|
|
|
|
@media print <beginfold id='2'>{</beginfold id='2'>
|
|
.container <beginfold id='2'>{</beginfold id='2'>
|
|
width: 100%;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
a:hover <beginfold id='2'>{</beginfold id='2'> color: red <endfold id='2'>}</endfold id='2'>
|
|
<beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
|
|
a:hover <beginfold id='2'>{</beginfold id='2'> color: red <endfold id='2'>}</endfold id='2'>
|
|
|
|
#header
|
|
<beginfold id='2'>{</beginfold id='2'>
|
|
display: none;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@media screen and (orientation: landscape) <beginfold id='2'>{</beginfold id='2'>
|
|
.sidebar <beginfold id='2'>{</beginfold id='2'>
|
|
width: 500px; <endfold id='2'>}</endfold id='2'> <endfold id='2'>}</endfold id='2'>
|
|
|
|
@media screen and (min-width: 768px) and (max-width: 960px) <beginfold id='2'>{</beginfold id='2'>
|
|
.container <beginfold id='2'>{</beginfold id='2'>
|
|
width: 720px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@media (max-width: 600px) <beginfold id='2'>{</beginfold id='2'>
|
|
.sidebar <beginfold id='2'>{</beginfold id='2'>
|
|
display: none;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@media print <beginfold id='2'>{</beginfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@media (height > 600px) <beginfold id='2'>{</beginfold id='2'>
|
|
body <beginfold id='2'>{</beginfold id='2'>
|
|
line-height: 1.4;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@media (400px <= width <= 700px) <beginfold id='2'>{</beginfold id='2'>
|
|
body <beginfold id='2'>{</beginfold id='2'>
|
|
line-height: 1.4;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@supports (display: grid) <beginfold id='2'>{</beginfold id='2'>
|
|
div <beginfold id='2'>{</beginfold id='2'>
|
|
display: grid;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@supports font-tech(color-COLRv1) <beginfold id='2'>{</beginfold id='2'>
|
|
div <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@supports not (not (transform-origin: 2px)) <beginfold id='2'>{</beginfold id='2'>
|
|
div <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@supports (display: grid) and (not (display: inline-grid)) <beginfold id='2'>{</beginfold id='2'>
|
|
div <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'>
|
|
* CSS Syntax Highlight Sample File (Standard)
|
|
*
|
|
* This file contains most CSS syntax, CSS3 properties, @media, @font-face and
|
|
* @keyframes annotations.
|
|
*
|
|
* @author Guo Yunhe guoyunhebrave@gmail.com
|
|
* @date 2016-09-16
|
|
<endfold id='1'>*/</endfold id='1'>
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'>
|
|
* Block comment
|
|
*
|
|
* Alert keywords:
|
|
* TODO BUG FIXME
|
|
<endfold id='1'>*/</endfold id='1'>
|
|
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> Region markers <endfold id='1'>*/</endfold id='1'>
|
|
|
|
<beginfold id='3'>/*BEGIN Comment */</beginfold id='3'>
|
|
|
|
|
|
<endfold id='3'>/*END Comment */</endfold id='3'>
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'>
|
|
* CSS Syntax Highlight Sample File (Complex)
|
|
*
|
|
* This file contains complex CSS syntax that can test unexpected situations.
|
|
*
|
|
* @author Guo Yunhe guoyunhebrave@gmail.com
|
|
* @date 2016-09-16
|
|
<endfold id='1'>*/</endfold id='1'>
|
|
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> Comments with special content <endfold id='1'>*/</endfold id='1'>
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'>
|
|
* .class-selector #id "string" 'comment' // comment {} [] () /* comment
|
|
* TODO BUG DEBUG
|
|
* body {
|
|
* margin: 0 !important;
|
|
* }
|
|
<endfold id='1'>*/</endfold id='1'>
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> Comments in special positions <endfold id='1'>*/</endfold id='1'>
|
|
|
|
header<beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>.active <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'> <beginfold id='2'>{</beginfold id='2'>
|
|
<beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'> color : <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'> blue<beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>;
|
|
font-family: Arial <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>,
|
|
"Droid Sans", <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>
|
|
sans-serif<beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@media screen <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'> and (max-width: 300px <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>) <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'> <beginfold id='2'>{</beginfold id='2'><beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'><endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> Strings with special content <endfold id='1'>*/</endfold id='1'>
|
|
|
|
@import url("{} $variable /* comment */");
|
|
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> Without extra breaklines and spaces <endfold id='1'>*/</endfold id='1'>
|
|
|
|
pre.primary:hover.large:nth-child(2n-1)<beginfold id='2'>{</beginfold id='2'>font-size:17px;font-family:"Noto Sans";-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.3)<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> With unnecessary breaklines and spaces <endfold id='1'>*/</endfold id='1'>
|
|
|
|
blockquote .ref
|
|
<beginfold id='2'>{</beginfold id='2'>
|
|
flex : 0 1 30%;
|
|
flex-wrap : wrap;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@media screen and (orientation: landscape) <beginfold id='2'>{</beginfold id='2'>
|
|
.sidebar <beginfold id='2'>{</beginfold id='2'>
|
|
width: 500px; <endfold id='2'>}</endfold id='2'> <endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> Special selectors: HTML5 allows user defined tags <endfold id='1'>*/</endfold id='1'>
|
|
|
|
header <beginfold id='2'>{</beginfold id='2'>
|
|
flex <beginfold id='2'>{</beginfold id='2'>
|
|
width: 300px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'> CSS Nesting <endfold id='1'>*/</endfold id='1'>
|
|
|
|
header <beginfold id='2'>{</beginfold id='2'>
|
|
.abc <beginfold id='2'>{</beginfold id='2'>
|
|
width: 300px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
width: 300px;
|
|
& width:hover <beginfold id='2'>{</beginfold id='2'>
|
|
width: 300px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
width: 300px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
<beginfold id='1'>/*</beginfold id='1'>*
|
|
* SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html
|
|
<endfold id='1'>*/</endfold id='1'>
|
|
// These comments are only one line long each.
|
|
// They won't appear in the CSS output,
|
|
// since they use the single-line comment syntax.
|
|
|
|
#sidebar <beginfold id='2'>{</beginfold id='2'> width: grid-width(5); <endfold id='2'>}</endfold id='2'>
|
|
|
|
#main <beginfold id='2'>{</beginfold id='2'>
|
|
content: $content;
|
|
new-content: $new_content;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
#main <beginfold id='2'>{</beginfold id='2'>
|
|
$width: 5em !global;
|
|
width: $width;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
#main <beginfold id='2'>{</beginfold id='2'>
|
|
@import "example";
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
#main <beginfold id='2'>{</beginfold id='2'>
|
|
color: black;
|
|
&-sidebar <beginfold id='2'>{</beginfold id='2'> border: 1px solid; <endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
#main p <beginfold id='2'>{</beginfold id='2'>
|
|
color: #00ff00;
|
|
width: 97%;
|
|
|
|
.redbox <beginfold id='2'>{</beginfold id='2'>
|
|
background-color: #ff0000;
|
|
color: #000000;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
#main <beginfold id='2'>{</beginfold id='2'>
|
|
color: black;
|
|
a <beginfold id='2'>{</beginfold id='2'>
|
|
font-weight: bold;
|
|
&:hover <beginfold id='2'>{</beginfold id='2'> color: red; <endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
.sidebar <beginfold id='2'>{</beginfold id='2'>
|
|
float: left;
|
|
margin-left: pow(4, 3) * 1px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
.banner <beginfold id='2'>{</beginfold id='2'>
|
|
background-color: $primary-color;
|
|
color: scale-color($primary-color, $lightness: +40%);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
.micro <beginfold id='2'>{</beginfold id='2'>
|
|
width: sum(50px, 30px, 100px);
|
|
width: min($widths...);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
a.funky:hover <beginfold id='2'>{</beginfold id='2'>
|
|
font: 20px/24px fantasy <beginfold id='2'>{</beginfold id='2'>
|
|
weight: bold;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
.foo.bar .baz.bang, .bip.qux <beginfold id='2'>{</beginfold id='2'>
|
|
$selector: &;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
ul, ol <beginfold id='2'>{</beginfold id='2'>
|
|
text-align: left;
|
|
|
|
& & <beginfold id='2'>{</beginfold id='2'>
|
|
padding: <beginfold id='2'>{</beginfold id='2'>
|
|
bottom: 0;
|
|
left: 0;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
font-size: scale-below(20px, 16px);
|
|
border-radius: $border-radius;
|
|
box-shadow: $box-shadow;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
ul li <beginfold id='2'>{</beginfold id='2'>
|
|
$padding: 16px;
|
|
padding-left: $padding;
|
|
[dir=rtl] & <beginfold id='2'>{</beginfold id='2'>
|
|
padding: <beginfold id='2'>{</beginfold id='2'>
|
|
left: 0;
|
|
right: $padding;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
div <beginfold id='2'>{</beginfold id='2'>
|
|
background-image: url("/icons/#{$name}.svg");
|
|
font: #{"string"};
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
p <beginfold id='2'>{</beginfold id='2'>
|
|
font: 10px/8px; // Plain CSS, no division
|
|
$width: 1000px;
|
|
width: $width/2; // Uses a variable, does division
|
|
width: round(1.5)/2; // Uses a function, does division
|
|
height: (500px/2); // Uses parentheses, does division
|
|
margin-left: 5px + 8px/2px; // Uses +, does division
|
|
font: (italic bold 10px/8px); // In a list, parentheses don't count
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
p <beginfold id='2'>{</beginfold id='2'>
|
|
$font-size: 12px;
|
|
$line-height: 30px;
|
|
font: #{$font-size}/#{$line-height};
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
p <beginfold id='2'>{</beginfold id='2'>
|
|
color: #010203 + #040506;
|
|
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
p <beginfold id='2'>{</beginfold id='2'>
|
|
color: opacify($translucent-red, 0.3);
|
|
background-color: transparentize($translucent-red, 0.25);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
div <beginfold id='2'>{</beginfold id='2'>
|
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
p <beginfold id='2'>{</beginfold id='2'>
|
|
cursor: e + -resize;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
p <beginfold id='2'>{</beginfold id='2'>
|
|
width: 1em + (2em * 3);
|
|
width: #{$n}px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
p <beginfold id='2'>{</beginfold id='2'>
|
|
color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
:root <beginfold id='2'>{</beginfold id='2'>
|
|
--font-family-sans-serif: #{inspect($font-family-sans-serif)};
|
|
--font-family-monospace: #{inspect($font-family-monospace)};
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
p:before <beginfold id='2'>{</beginfold id='2'>
|
|
font-family: sans- + "serif";
|
|
content: "Foo " + Bar;
|
|
content: "I ate #{5 + 10} pies!";
|
|
content: "I ate #{$value} pies!";
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
a <beginfold id='2'>{</beginfold id='2'>
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
&:hover <beginfold id='2'>{</beginfold id='2'> text-decoration: underline; <endfold id='2'>}</endfold id='2'>
|
|
body.firefox & <beginfold id='2'>{</beginfold id='2'> font-weight: normal; <endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
#context a%extreme a %extreme <beginfold id='2'>{</beginfold id='2'>
|
|
color: blue;
|
|
font-weight: bold;
|
|
font-size: 2em;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
%strong-alert:hover <beginfold id='2'>{</beginfold id='2'>
|
|
color: red;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
.alert:hover, %strong-alert <beginfold id='2'>{</beginfold id='2'>
|
|
font-weight: bold;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
p.#{$name} <beginfold id='2'>{</beginfold id='2'>
|
|
#{$attr}-color: blue;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
p <beginfold id='2'>{</beginfold id='2'>
|
|
background: <beginfold id='2'>{</beginfold id='2'>
|
|
color: red;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
background-#{prop}: red;
|
|
#{prop}-color: red;
|
|
|
|
#a#{""}c .a#{""}c a#{""}c <beginfold id='2'>{</beginfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
.icon-#{$name} <beginfold id='2'>{</beginfold id='2'>
|
|
position: absolute;
|
|
#{$top-or-bottom}: 0;
|
|
-#{$prefix}-#{$property}: $value;
|
|
.icon-#{$name} <beginfold id='2'>{</beginfold id='2'>
|
|
position: absolute;
|
|
#{$top-or-bottom}: 0;
|
|
-#{$prefix}-#{$property}-image: $value
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
@mixin firefox-message($selector) <beginfold id='2'>{</beginfold id='2'>
|
|
body.firefox #{$selector}:before <beginfold id='2'>{</beginfold id='2'>
|
|
content: "Hi, Firefox users!";
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin clearfix <beginfold id='2'>{</beginfold id='2'>
|
|
display: inline-block;
|
|
&:after <beginfold id='2'>{</beginfold id='2'>
|
|
content: ".";
|
|
display: block;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
* html & <beginfold id='2'>{</beginfold id='2'> height: 1px <endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin apply-to-ie6-only <beginfold id='2'>{</beginfold id='2'>
|
|
* html <beginfold id='2'>{</beginfold id='2'>
|
|
@content;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin highlighted-background <beginfold id='2'>{</beginfold id='2'> background-color: #fc0; <endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin sexy-border($color, $width) <beginfold id='2'>{</beginfold id='2'>
|
|
border: <beginfold id='2'>{</beginfold id='2'>
|
|
color: $color;
|
|
width: $width;
|
|
style: dashed;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
color: #ff0000;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin border-radius($radius) <beginfold id='2'>{</beginfold id='2'>
|
|
-webkit-border-radius: $radius;
|
|
-moz-border-radius: $radius;
|
|
-ms-border-radius: $radius;
|
|
border-radius: $radius;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin define-emoji($name, $glyph) <beginfold id='2'>{</beginfold id='2'>
|
|
span.emoji-#{$name} <beginfold id='2'>{</beginfold id='2'>
|
|
font-family: IconFont;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin styles <beginfold id='2'>{</beginfold id='2'>
|
|
code <beginfold id='2'>{</beginfold id='2'>
|
|
border-radius: $-border-radius;
|
|
box-shadow: -box-shadow();
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin rtl($property, $ltr-value, $rtl-value) <beginfold id='2'>{</beginfold id='2'>
|
|
#{$property}: $ltr-value;
|
|
|
|
[dir=rtl] & <beginfold id='2'>{</beginfold id='2'>
|
|
#{$property}: $rtl-value;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin replace-text($image, $x: 50%, $y: 50%) <beginfold id='2'>{</beginfold id='2'>
|
|
text-indent: -99999em;
|
|
overflow: hidden;
|
|
text-align: left;
|
|
|
|
background: <beginfold id='2'>{</beginfold id='2'>
|
|
image: $image;
|
|
repeat: no-repeat;
|
|
position: $x $y;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin btn($args...) <beginfold id='2'>{</beginfold id='2'>
|
|
@warn "The btn() mixin is deprecated. Include button() instead.";
|
|
@import url("http://fonts.googleapis.com/css?family=#{$family}");
|
|
@include button($args...);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin hover <beginfold id='2'>{</beginfold id='2'>
|
|
&:not([disabled]):hover <beginfold id='2'>{</beginfold id='2'>
|
|
@content;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin adjust-location($x, $y) <beginfold id='2'>{</beginfold id='2'>
|
|
@if unitless($x) <beginfold id='2'>{</beginfold id='2'>
|
|
@error "$x may not be unitless, was #{$x}.";
|
|
@warn "Assuming #{$x} to be in pixels";
|
|
$x: 1px * $x;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
@if unitless($y) <beginfold id='2'>{</beginfold id='2'>
|
|
@error "$y may not be unitless, was #{$y}.";
|
|
@warn "Assuming #{$y} to be in pixels";
|
|
$y: 1px * $y;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
position: relative; left: $x; top: $y;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin avatar($size, $circle: false) <beginfold id='2'>{</beginfold id='2'>
|
|
width: $size;
|
|
height: $size;
|
|
|
|
@if $circle != 0 <beginfold id='2'>{</beginfold id='2'>
|
|
border-radius: math.div($size, 2);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin theme-colors($light-theme: true) <beginfold id='2'>{</beginfold id='2'>
|
|
@if $light-theme <beginfold id='2'>{</beginfold id='2'>
|
|
background-color: $light-background;
|
|
color: $light-text;
|
|
<endfold id='2'>}</endfold id='2'> @else <beginfold id='2'>{</beginfold id='2'>
|
|
background-color: $dark-background;
|
|
color: $dark-text;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin configure($black: null, $border-radius: null, $box-shadow: null) <beginfold id='2'>{</beginfold id='2'>
|
|
@if $black <beginfold id='2'>{</beginfold id='2'>
|
|
$-black: $black !global;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
@if $border-radius <beginfold id='2'>{</beginfold id='2'>
|
|
$-border-radius: $border-radius !global;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin does-parent-exist <beginfold id='2'>{</beginfold id='2'>
|
|
@if & <beginfold id='2'>{</beginfold id='2'>
|
|
&:hover <beginfold id='2'>{</beginfold id='2'>
|
|
color: red;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'> @else <beginfold id='2'>{</beginfold id='2'>
|
|
a <beginfold id='2'>{</beginfold id='2'>
|
|
color: red;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin order($height, $selectors...) <beginfold id='2'>{</beginfold id='2'>
|
|
@for $i from 0 to length($selectors) <beginfold id='2'>{</beginfold id='2'>
|
|
#{nth($selectors, $i + 1)} <beginfold id='2'>{</beginfold id='2'>
|
|
position: absolute;
|
|
height: $height;
|
|
margin-top: $i * $height;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin syntax-colors($args...) <beginfold id='2'>{</beginfold id='2'>
|
|
@debug meta.keywords($args);
|
|
// (string: #080, comment: #800, variable: #60b)
|
|
|
|
@each $name, $color in meta.keywords($args) <beginfold id='2'>{</beginfold id='2'>
|
|
pre span.stx-#{$name} <beginfold id='2'>{</beginfold id='2'>
|
|
color: $color;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin media($types...) <beginfold id='2'>{</beginfold id='2'>
|
|
@each $type in $types <beginfold id='2'>{</beginfold id='2'>
|
|
@media #{$type} <beginfold id='2'>{</beginfold id='2'>
|
|
@content($type);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin reflexive-position($property, $value) <beginfold id='2'>{</beginfold id='2'>
|
|
@if $property != left and $property != right <beginfold id='2'>{</beginfold id='2'>
|
|
@error "Property #{$property} must be either left or right.";
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
$left-value: if($property == right, initial, $value);
|
|
$right-value: if($property == right, $value, initial);
|
|
|
|
left: $left-value;
|
|
right: $right-value;
|
|
[dir=rtl] & <beginfold id='2'>{</beginfold id='2'>
|
|
left: $right-value;
|
|
right: $left-value;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin prefix($property, $value, $prefixes) <beginfold id='2'>{</beginfold id='2'>
|
|
@each $prefix in $prefixes <beginfold id='2'>{</beginfold id='2'>
|
|
@if not index($known-prefixes, $prefix) <beginfold id='2'>{</beginfold id='2'>
|
|
@warn "Unknown prefix #{$prefix}.";
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
-#{$prefix}-#{$property}: $value;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
#{$property}: $value;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin inset-divider-offset($offset, $padding) <beginfold id='2'>{</beginfold id='2'>
|
|
$divider-offset: (2 * $padding) + $offset;
|
|
@debug "divider offset: #{$divider-offset}";
|
|
|
|
margin-left: $divider-offset;
|
|
width: calc(100% - #{$divider-offset});
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
@mixin sticky-position <beginfold id='2'>{</beginfold id='2'>
|
|
position: fixed;
|
|
@supports (position: sticky) <beginfold id='2'>{</beginfold id='2'>
|
|
position: sticky;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
@at-root (without: media) {
|
|
color: #111;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
@at-root (with: rule) {
|
|
font-size: 1.2em;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@mixin unify-parent($child) <beginfold id='2'>{</beginfold id='2'>
|
|
@at-root #<beginfold id='2'>{</beginfold id='2'>selector.unify(&, $child)<endfold id='2'>}</endfold id='2'> <beginfold id='2'>{</beginfold id='2'>
|
|
@content;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
@at-root #<beginfold id='2'>{</beginfold id='2'>selector-unify(&, $child)<endfold id='2'>}</endfold id='2'> <beginfold id='2'>{</beginfold id='2'>
|
|
@content;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@media print <beginfold id='2'>{</beginfold id='2'>
|
|
.page <beginfold id='2'>{</beginfold id='2'>
|
|
width: 8in;
|
|
@at-root (without: media) {
|
|
color: red;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
.sidebar <beginfold id='2'>{</beginfold id='2'>
|
|
width: 300px;
|
|
@media screen and (orientation: landscape) <beginfold id='2'>{</beginfold id='2'>
|
|
width: 500px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@media screen <beginfold id='2'>{</beginfold id='2'>
|
|
.sidebar <beginfold id='2'>{</beginfold id='2'>
|
|
@media (orientation: landscape) <beginfold id='2'>{</beginfold id='2'>
|
|
width: 500px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@media (min-width: $layout-breakpoint-small) <beginfold id='2'>{</beginfold id='2'>
|
|
.hide-extra-small <beginfold id='2'>{</beginfold id='2'>
|
|
display: none;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@media (hover: hover) <beginfold id='2'>{</beginfold id='2'>
|
|
.button:hover <beginfold id='2'>{</beginfold id='2'>
|
|
border: 2px solid black;
|
|
|
|
@media (color) <beginfold id='2'>{</beginfold id='2'>
|
|
border-color: #036;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@media #{$media} and ($feature: $value) <beginfold id='2'>{</beginfold id='2'>
|
|
.sidebar <beginfold id='2'>{</beginfold id='2'>
|
|
width: 500px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
@extend .error;
|
|
|
|
.hoverlink <beginfold id='2'>{</beginfold id='2'>
|
|
@extend a:hover;
|
|
@extend %extreme;
|
|
@extend .message;
|
|
@extend .notice !optional;
|
|
border-width: 3px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
.error <beginfold id='2'>{</beginfold id='2'>
|
|
border: 1px #f00;
|
|
background-color: #fdd;
|
|
|
|
&--serious <beginfold id='2'>{</beginfold id='2'>
|
|
@extend .error;
|
|
border-width: 3px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
p <beginfold id='2'>{</beginfold id='2'>
|
|
@if 1 + 1 == 2 <beginfold id='2'>{</beginfold id='2'> border: 1px solid; <endfold id='2'>}</endfold id='2'>
|
|
@if 5 < 3 <beginfold id='2'>{</beginfold id='2'> border: 2px dotted; <endfold id='2'>}</endfold id='2'>
|
|
@if null <beginfold id='2'>{</beginfold id='2'> border: 3px double; <endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
p <beginfold id='2'>{</beginfold id='2'>
|
|
@if $type == ocean <beginfold id='2'>{</beginfold id='2'>
|
|
color: blue;
|
|
<endfold id='2'>}</endfold id='2'> @else if $type == matador <beginfold id='2'>{</beginfold id='2'>
|
|
color: red;
|
|
<endfold id='2'>}</endfold id='2'> @else if $type == monster <beginfold id='2'>{</beginfold id='2'>
|
|
color: green;
|
|
<endfold id='2'>}</endfold id='2'> @else <beginfold id='2'>{</beginfold id='2'>
|
|
color: black;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
@each $animal in puma, sea-slug, egret, salamander <beginfold id='2'>{</beginfold id='2'>
|
|
.#{$animal}-icon <beginfold id='2'>{</beginfold id='2'>
|
|
background-image: url('/images/#{$animal}.png');
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@each $name, $glyph in $icons <beginfold id='2'>{</beginfold id='2'>
|
|
.icon-#{$name}:before <beginfold id='2'>{</beginfold id='2'>
|
|
display: inline-block;
|
|
font-family: "Icon Font";
|
|
content: $glyph;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@each $size in $sizes <beginfold id='2'>{</beginfold id='2'>
|
|
.icon-#{$size} <beginfold id='2'>{</beginfold id='2'>
|
|
font-size: $size;
|
|
height: $size;
|
|
width: $size;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@each $animal, $color, $cursor in (puma, black, default),
|
|
(sea-slug, blue, pointer),
|
|
(egret, white, move) <beginfold id='2'>{</beginfold id='2'>
|
|
.#{$animal}-icon <beginfold id='2'>{</beginfold id='2'>
|
|
background-image: url('/images/#{$animal}.png');
|
|
border: 2px solid $color;
|
|
cursor: $cursor;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) <beginfold id='2'>{</beginfold id='2'>
|
|
#{$header} <beginfold id='2'>{</beginfold id='2'>
|
|
font-size: $size;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
@for $i from 1 through 3 <beginfold id='2'>{</beginfold id='2'>
|
|
.item-#{$i} <beginfold id='2'>{</beginfold id='2'> width: 2em * $i; <endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@for $i from 1 to 3 <beginfold id='2'>{</beginfold id='2'>
|
|
ul:nth-child(3n + #{$i}) <beginfold id='2'>{</beginfold id='2'>
|
|
background-color: lighten($base-color, $i * 5%);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
@while $i > 0 <beginfold id='2'>{</beginfold id='2'>
|
|
.item-#{$i} <beginfold id='2'>{</beginfold id='2'> width: 2em * $i; <endfold id='2'>}</endfold id='2'>
|
|
$i: $i - 2;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
@include order(150px, $form-selectors...);
|
|
@include order(150px, "input.name", "input.address", "input.zip");
|
|
@include unify-parent("input") <beginfold id='2'>{</beginfold id='2'> <endfold id='2'>}</endfold id='2'>
|
|
@include google-font("Droid Sans");
|
|
@include library.styles;
|
|
@include library.configure(
|
|
$black: #222,
|
|
$border-radius: 0.1rem
|
|
);
|
|
@include firefox-message(".header");
|
|
@include apply-to-ie6-only <beginfold id='2'>{</beginfold id='2'>
|
|
#logo <beginfold id='2'>{</beginfold id='2'>
|
|
background-image: url(/logo.gif);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@include media(screen, print) using ($type) <beginfold id='2'>{</beginfold id='2'>
|
|
h1 <beginfold id='2'>{</beginfold id='2'>
|
|
font-size: 40px;
|
|
@if $type == print <beginfold id='2'>{</beginfold id='2'>
|
|
font-family: Calluna;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
p <beginfold id='2'>{</beginfold id='2'> @include sexy-border(blue, 1in); <endfold id='2'>}</endfold id='2'>
|
|
h1 <beginfold id='2'>{</beginfold id='2'> @include sexy-border($color: blue, $width: 2in); <endfold id='2'>}</endfold id='2'>
|
|
nav ul <beginfold id='2'>{</beginfold id='2'>
|
|
@include corners.rounded;
|
|
padding: 5px + corners.$radius;
|
|
@include horizontal-list;
|
|
@include rtl(float, left, right);
|
|
@include hover <beginfold id='2'>{</beginfold id='2'>
|
|
border-width: 2px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
@include replace-text(url("/images/mail.svg"), 0);
|
|
@include square(100px, $radius: 4px);
|
|
// Oops, we typo'd "webkit" as "wekbit"!
|
|
@include prefix(transform, rotate(15deg), wekbit ms);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
.primary <beginfold id='2'>{</beginfold id='2'>
|
|
@include colors($value-map...);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
.box <beginfold id='2'>{</beginfold id='2'> @include border-radius(10px); <endfold id='2'>}</endfold id='2'>
|
|
|
|
.wrapper .field <beginfold id='2'>{</beginfold id='2'>
|
|
@include unify-parent("input") <beginfold id='2'>{</beginfold id='2'>
|
|
<beginfold id='1'>/*</beginfold id='1'> ... <endfold id='1'>*/</endfold id='1'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
@include unify-parent("select") <beginfold id='2'>{</beginfold id='2'>
|
|
<beginfold id='1'>/*</beginfold id='1'> ... <endfold id='1'>*/</endfold id='1'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
.banner <beginfold id='2'>{</beginfold id='2'>
|
|
@include theme-colors($light-theme: true);
|
|
body.dark & <beginfold id='2'>{</beginfold id='2'>
|
|
@include theme-colors($light-theme: false);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
|
|
@function grid-width($n) <beginfold id='2'>{</beginfold id='2'>
|
|
@return $n * $grid-width + ($n - 1) * $gutter-width;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@function scale-below($value, $base, $ratio: 1.618) <beginfold id='2'>{</beginfold id='2'>
|
|
@while $value > $base <beginfold id='2'>{</beginfold id='2'>
|
|
$value: math.div($value, $ratio);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
@return $value;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
/// If the user has configured `$-box-shadow`, returns their configured value.
|
|
/// Otherwise returns a value derived from `$-black`.
|
|
@function -box-shadow() <beginfold id='2'>{</beginfold id='2'>
|
|
@return $-box-shadow or (0 0.5rem 1rem rgba($-black, 0.15));
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@function pow($base, $exponent) <beginfold id='2'>{</beginfold id='2'>
|
|
$result: 1;
|
|
@for $_ from 1 through $exponent <beginfold id='2'>{</beginfold id='2'>
|
|
$result: $result * $base;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
@return $result;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@function invert($color, $amount: 100%) <beginfold id='2'>{</beginfold id='2'>
|
|
$inverse: change-color($color, $hue: hue($color) + 180);
|
|
@return mix($inverse, $color, $amount);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@function sum($numbers...) <beginfold id='2'>{</beginfold id='2'>
|
|
$sum: 0;
|
|
@each $number in $numbers <beginfold id='2'>{</beginfold id='2'>
|
|
$sum: $sum + $number;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
@return $sum;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@function fg($args...) <beginfold id='2'>{</beginfold id='2'>
|
|
@warn "The fg() function is deprecated. Call foreground() instead.";
|
|
@return foreground($args...);
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@function str-insert($string, $insert, $index) <beginfold id='2'>{</beginfold id='2'>
|
|
// Avoid making new strings if we don't need to.
|
|
@if string.length($string) == 0 <beginfold id='2'>{</beginfold id='2'>
|
|
@return $insert;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
$before: string.slice($string, 0, $index);
|
|
$after: string.slice($string, $index);
|
|
@return $before + $insert + $after;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
// Variable define
|
|
|
|
$image-path: "../../static/images";
|
|
$-text-color: #333 !default; // Default can be overrided
|
|
$default-font-size: 16px !default;
|
|
$default-font-family: Roboto, "Droid Sans", sans-serif;
|
|
$default-font-weight: 400;
|
|
$default-line-height: $default-font-size * 1.8;
|
|
$shadow-transparence: 0.25;
|
|
$box-shadow: 0 0 3px rgba(0,0,0,$shadow-transparence);
|
|
$page-width: 100rem; // kabab-case
|
|
$gapOfArticle: 20px; // camelCase
|
|
$body_background_color: white; // snake_case
|
|
$-box-shadow: null;
|
|
$sizes: 40px, 50px, 80px;
|
|
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
|
|
$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
|
|
$map: (key1: value1, key2: value2, key3: value3);
|
|
$icons:
|
|
"eye" "\f112" 12px,
|
|
"start" "\f12e" 16px,
|
|
"stop" "\f12f" 10px;
|
|
$known-prefixes: webkit, moz, ms, o;
|
|
$primary-color: #036;
|
|
$form-selectors: "input.name", "input.address", "input.zip" !default;
|
|
$color1: hsl(120deg, 100%, 50%);
|
|
$color2: rgb($red, $green, blue($color1));
|
|
$color3: mix($color1, $color2, [$weight]);
|
|
$translucent-red: rgba(255, 0, 0, 0.5);
|
|
$name: foo;
|
|
$attr: border;
|
|
$media: screen;
|
|
$feature: -webkit-min-device-pixel-ratio;
|
|
$value: 1.5;
|
|
$values: #ff0000, #00ff00, #0000ff;
|
|
library.$color: blue;
|
|
|
|
|
|
// Nesting
|
|
|
|
#home-page <beginfold id='2'>{</beginfold id='2'>
|
|
|
|
header <beginfold id='2'>{</beginfold id='2'>
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
|
|
.cover <beginfold id='2'>{</beginfold id='2'>
|
|
@include border-radius(20px);
|
|
max-width: 100%;
|
|
|
|
&:hover <beginfold id='2'>{</beginfold id='2'>
|
|
background: #ffffff;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
.like-button <beginfold id='2'>{</beginfold id='2'>
|
|
font-size: $default-font-size * 0.8;
|
|
|
|
@media (max-width: 300px) and (min-width: 200px) <beginfold id='2'>{</beginfold id='2'>
|
|
font-size: $default-font-size * 0.8;
|
|
|
|
.icon <beginfold id='2'>{</beginfold id='2'>
|
|
width: 20px;
|
|
height: 20px;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
@media print <beginfold id='2'>{</beginfold id='2'>
|
|
display: none;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
|
|
@use "sass:selector";
|
|
@use 'library';
|
|
@use "src/corners" as *;
|
|
@use "src/corners" as c;
|
|
@use 'opinionated' with ($black: #333);
|
|
@use 'library' with (
|
|
$black: #222,
|
|
$border-radius: 0.1rem
|
|
);
|
|
|
|
@forward "src/list" hide list-reset, $horizontal-list-gap;
|
|
@forward "src/list" as list-*;
|
|
@forward 'library' with (
|
|
$black: #222 !default,
|
|
$border-radius: 0.1rem !default
|
|
);
|
|
|
|
@import url("http://fonts.googleapis.com/css?family=#{$family}");
|
|
@import 'foundation/code', 'foundation/lists';
|
|
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
|
|
|
|
@error "Property #{$property} must be either left or right.";
|
|
@error var(--abcd);
|
|
|
|
@debug 10em + 12em;
|
|
@debug library.$color; //=> blue
|
|
@debug radial-gradient($primary, $accent); // radial-gradient(#f2ece4, #e1d7d2)
|
|
@debug -webkit-flex; // -webkit-flex
|
|
|
|
|
|
@keyframes slide-in <beginfold id='2'>{</beginfold id='2'>
|
|
from <beginfold id='2'>{</beginfold id='2'>
|
|
margin-left: 100%;
|
|
width: 300%;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
#{$x}% <beginfold id='2'>{</beginfold id='2'>
|
|
margin-left: 90%;
|
|
width: 150%;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
|
|
70% <beginfold id='2'>{</beginfold id='2'>
|
|
margin-left: 90%;
|
|
width: 150%;
|
|
<endfold id='2'>}</endfold id='2'>
|
|
<endfold id='2'>}</endfold id='2'>
|