427 lines
7.3 KiB
SCSS
427 lines
7.3 KiB
SCSS
@import 'base';
|
|
@import 'open-iconic';
|
|
@import 'compass/reset';
|
|
@import 'compass/typography/lists/inline-block-list';
|
|
@import 'compass/typography/vertical_rhythm';
|
|
@import 'compass/css3/box-shadow';
|
|
@import 'compass/css3/border-radius';
|
|
@import 'compass/css3/user-interface';
|
|
@import 'compass/css3/animation';
|
|
@import 'compass/css3/transform';
|
|
@import 'compass/css3/images';
|
|
@import 'compass/typography/links/unstyled-link';
|
|
@import 'compass/utilities/general/clearfix';
|
|
|
|
@include establish-baseline;
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
background: $gray;
|
|
margin-bottom: rhythm(1);
|
|
}
|
|
|
|
a {
|
|
color: $black;
|
|
}
|
|
|
|
.oi.with-text[data-glyph]:before {
|
|
margin-right: rhythm(1/4);
|
|
}
|
|
|
|
ul.inline-list {
|
|
@include adjust-font-size-to(14px, 2/3);
|
|
@include inline-block-list;
|
|
|
|
li {
|
|
&::after {
|
|
content: '//';
|
|
padding: 0 rhythm(1/4);
|
|
}
|
|
|
|
&:last-child::after {
|
|
content: '';
|
|
}
|
|
}
|
|
}
|
|
|
|
header {
|
|
@include background(linear-gradient(to bottom, $green, $dark-green));
|
|
background-color: $green;
|
|
padding: rhythm(1);
|
|
@include box-shadow;
|
|
@include clearfix;
|
|
|
|
.logo {
|
|
float: left;
|
|
|
|
a {
|
|
@include unstyled-link;
|
|
}
|
|
|
|
h1 {
|
|
@include adjust-font-size-to(48px, 2);
|
|
font-family: 'Bangers', 'cursive';
|
|
}
|
|
|
|
span {
|
|
color: $gray;
|
|
}
|
|
}
|
|
|
|
nav {
|
|
overflow: hidden;
|
|
|
|
ul {
|
|
display: inline-block;
|
|
|
|
li {
|
|
margin: 0 0 rhythm(1/4) rhythm(1);
|
|
padding: 0 rhythm(1/4);
|
|
|
|
&::before {
|
|
content: '\00BB';
|
|
font-weight: bold;
|
|
margin-right: rhythm(1/4);
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
@include adjust-font-size-to($base-font-size, 1);
|
|
@include unstyled-link;
|
|
}
|
|
|
|
.source {
|
|
@include adjust-font-size-to($base-font-size, 2);
|
|
float: right;
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
margin-right: rhythm(1/4);
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.spinner {
|
|
margin: 0 auto;
|
|
width: rhythm(2);
|
|
height: rhythm(2);
|
|
position: relative;
|
|
text-align: center;
|
|
|
|
@include animation(rotate 3.0s infinite linear);
|
|
|
|
div {
|
|
width: 40%;
|
|
height: 40%;
|
|
display: inline-block;
|
|
position: absolute;
|
|
border: 3px solid $green;
|
|
@include border-radius(50%);
|
|
|
|
@include animation(bounce 2.0s infinite ease-in-out);
|
|
}
|
|
|
|
:first-child {
|
|
top: 0;
|
|
}
|
|
|
|
:last-child {
|
|
bottom: 0px;
|
|
@include animation-delay(-1.0s);
|
|
}
|
|
}
|
|
|
|
@include keyframes(rotate) {
|
|
100% { @include transform(rotate(360deg)); }
|
|
}
|
|
|
|
@include keyframes(bounce) {
|
|
0%, 100% { @include transform(scale(0.0)); }
|
|
50% { @include transform(scale(1.0)); }
|
|
}
|
|
|
|
#content {
|
|
padding: rhythm(1);
|
|
|
|
.copy {
|
|
background-color: $tan;
|
|
padding: rhythm(1/2);
|
|
}
|
|
|
|
.changelog {
|
|
dt {
|
|
font-weight: bold;
|
|
}
|
|
|
|
dd {
|
|
&::before {
|
|
content: '\00BB';
|
|
font-weight: bold;
|
|
margin-right: rhythm(1/2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.error {
|
|
overflow: hidden;
|
|
|
|
h1 {
|
|
@include adjust-font-size-to($base-font-size * 2);
|
|
font-weight: bold;
|
|
float: left;
|
|
}
|
|
|
|
blockquote {
|
|
background-color: $green;
|
|
position: relative;
|
|
padding: rhythm(1);
|
|
display: inline-block;
|
|
font-style: italic;
|
|
float: right;
|
|
|
|
&::before {
|
|
@include adjust-font-size-to($base-font-size * 4);
|
|
content: '\201c';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
font-style: normal;
|
|
}
|
|
|
|
&::after {
|
|
@include adjust-font-size-to($base-font-size * 4);
|
|
content: '\201d';
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: -0.5em;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
p {
|
|
clear: left;
|
|
}
|
|
}
|
|
|
|
.documentation {
|
|
h1 {
|
|
@include adjust-font-size-to($base-font-size * 2);
|
|
font-weight: bold;
|
|
}
|
|
|
|
h2 {
|
|
@include adjust-font-size-to($base-font-size);
|
|
font-weight: bold;
|
|
}
|
|
|
|
h3 {
|
|
@include adjust-font-size-to($base-font-size);
|
|
|
|
&::before {
|
|
content: '\00BB';
|
|
font-weight: bold;
|
|
margin-right: rhythm(1/4);
|
|
}
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
clear: both;
|
|
}
|
|
|
|
h2, h3 {
|
|
margin-bottom: rhythm(1);
|
|
}
|
|
|
|
section, div, p {
|
|
margin: rhythm(1) 0;
|
|
}
|
|
|
|
figure {
|
|
line-height: 0;
|
|
background: $white;
|
|
margin: rhythm(1/4);
|
|
@include box-shadow;
|
|
|
|
&.shift-right {
|
|
float: right;
|
|
margin-left: rhythm(1/2);
|
|
}
|
|
|
|
&.shift-left {
|
|
float: left;
|
|
margin-right: rhythm(1/2);
|
|
}
|
|
|
|
&.loading {
|
|
min-width: 100px;
|
|
|
|
.spinner {
|
|
left: 50%;
|
|
margin-left: -24px;
|
|
}
|
|
|
|
.svg {
|
|
position: absolute;
|
|
top: -10000px;
|
|
}
|
|
}
|
|
|
|
.svg {
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
figcaption {
|
|
@include adjust-font-size-to($base-font-size);
|
|
background: $green;
|
|
font-weight: bold;
|
|
padding: 0 rhythm(1/4);
|
|
}
|
|
}
|
|
|
|
section, div {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.application {
|
|
position: relative;
|
|
@include clearfix;
|
|
|
|
textarea {
|
|
@include adjust-font-size-to($base-font-size);
|
|
border: 0 none;
|
|
outline: none;
|
|
background: $tan;
|
|
padding: 0 0.5em;
|
|
width: 100% !important; // "!important" prevents user changing width
|
|
box-sizing: border-box;
|
|
font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
|
|
|
|
@include input-placeholder {
|
|
color: $gray;
|
|
}
|
|
}
|
|
|
|
button {
|
|
@include adjust-font-size-to($base-font-size);
|
|
width: 100px;
|
|
border: 0 none;
|
|
@include background(linear-gradient(to bottom right, $green, $dark-green));
|
|
background-color: $green;
|
|
float: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
ul {
|
|
float: right;
|
|
display: none;
|
|
|
|
body.has-results & {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.results {
|
|
margin-top: rhythm(1);
|
|
display: none;
|
|
|
|
body.has-results &, body.has-error &, body.is-loading & {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
#loading {
|
|
background: $white;
|
|
padding: rhythm(1/2) 0;
|
|
display: none;
|
|
|
|
body.is-loading & {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
#progress {
|
|
width: rhythm(20);
|
|
height: rhythm(1/2);
|
|
border: 1px solid $dark-green;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
margin-top: rhythm(1);
|
|
|
|
div {
|
|
background: $green;
|
|
@include background-image(linear-gradient(
|
|
-45deg,
|
|
$green 25%,
|
|
$light-green 25%,
|
|
$light-green 50%,
|
|
$green 50%,
|
|
$green 75%,
|
|
$light-green 75%,
|
|
$light-green 100%
|
|
));
|
|
background-size: rhythm(2) rhythm(2);
|
|
background-repeat: repeat-x;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
#error {
|
|
background: $red;
|
|
color: $white;
|
|
padding: 0 0.5em;
|
|
white-space: pre;
|
|
font-family: monospace;
|
|
font-weight: bold;
|
|
display: none;
|
|
overflow-x: auto;
|
|
|
|
body.has-error & {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
#warnings {
|
|
@include adjust-font-size-to($base-font-size, 1);
|
|
font-weight: bold;
|
|
background-color: $yellow;
|
|
display: none;
|
|
|
|
li {
|
|
margin: rhythm(1/4);
|
|
}
|
|
|
|
body.has-results & {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
#regexp-render {
|
|
background: $white;
|
|
width: 100%;
|
|
overflow: auto;
|
|
text-align: center;
|
|
|
|
body.is-loading &, body.has-error & {
|
|
position: absolute;
|
|
top: -10000px;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
padding: 0 rhythm(1);
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
width: 80px;
|
|
height: 15px;
|
|
}
|
|
}
|