806 строки
14 KiB
CSS
806 строки
14 KiB
CSS
/*!
|
||
------------------------------------------- START OF THIRD PARTY NOTICE -----------------------------------------
|
||
|
||
This file is based on or incorporates material from the projects listed below (Third Party IP). The original copyright notice and the license under which Microsoft received such Third Party IP, are set forth below. Such licenses and notices are provided for informational purposes only. Microsoft licenses the Third Party IP to you under the licensing terms for the Microsoft product. Microsoft reserves all other rights not expressly granted under this agreement, whether by implication, estoppel or otherwise.
|
||
|
||
//-----------------------------------------------------------------------------
|
||
twbs-bootstrap-sass (3.3.0)
|
||
//-----------------------------------------------------------------------------
|
||
|
||
The MIT License (MIT)
|
||
|
||
Copyright (c) 2013 Twitter, Inc
|
||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||
of this software and associated documentation files (the "Software"), to deal
|
||
in the Software without restriction, including without limitation the rights
|
||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||
copies of the Software, and to permit persons to whom the Software is
|
||
furnished to do so, subject to the following conditions:
|
||
|
||
The above copyright notice and this permission notice shall be included in
|
||
all copies or substantial portions of the Software.
|
||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||
THE SOFTWARE.
|
||
*/
|
||
|
||
/*
|
||
Reset
|
||
*/
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
button, input {
|
||
font: inherit;
|
||
}
|
||
/*
|
||
Colours
|
||
*/
|
||
|
||
/*
|
||
Colours
|
||
*/
|
||
|
||
a,
|
||
a:visited {
|
||
color: #0078D7; /* Blue highlight colour */
|
||
}
|
||
|
||
a:hover {
|
||
color: #666;
|
||
}
|
||
|
||
a:active {
|
||
color: #999;
|
||
}
|
||
|
||
.section-header .subtitle {
|
||
color: #767676;
|
||
}
|
||
|
||
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
|
||
textarea {
|
||
border-color: hsla(0, 0%, 0%, .4);
|
||
background-color: hsla(0, 0%, 100%, .4);
|
||
}
|
||
|
||
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):hover, textarea:hover {
|
||
border-color: hsla(0, 0%, 0%, .6);
|
||
}
|
||
|
||
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:focus {
|
||
border-color: #0078D7;
|
||
background-color: #fff;
|
||
}
|
||
|
||
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"])[disabled],
|
||
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],
|
||
fieldset[disabled] input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
|
||
textarea[disabled], textarea[readonly], fieldset[disabled] textarea {
|
||
border-color: transparent;
|
||
background-color: hsla(0, 0%, 0%, .2);
|
||
}
|
||
|
||
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,
|
||
textarea:invalid {
|
||
border-color: #E81123;
|
||
}
|
||
|
||
button,
|
||
input[type="button"], input[type="submit"], input[type="reset"],
|
||
.button {
|
||
background-color: hsla(0, 0%, 0%, .2);
|
||
}
|
||
|
||
.button,
|
||
.button:hover,
|
||
.button:active {
|
||
color: #000; /* needed if .button is on an a element */
|
||
}
|
||
|
||
button:hover, button:focus,
|
||
input[type="button"]:hover, input[type="button"]:focus,
|
||
input[type="submit"]:hover, input[type="submit"]:focus,
|
||
input[type="reset"]:hover, input[type="reset"]:focus,
|
||
.button:hover, .button:focus {
|
||
border-color: hsla(0, 0%, 0%, .4);
|
||
}
|
||
|
||
button:active,
|
||
input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active,
|
||
.button:active,
|
||
button.primary:active,
|
||
input[type="button"].primary:active, input[type="submit"].primary:active, input[type="reset"].primary:active,
|
||
.button.primary:active {
|
||
background-color: hsla(0, 0%, 0%, .4);
|
||
border-color: transparent;
|
||
}
|
||
|
||
button.primary,
|
||
input[type="button"].primary, input[type="submit"].primary, input[type="reset"].primary,
|
||
.button.primary {
|
||
background-color: #0078D7;
|
||
color: #fff;
|
||
}
|
||
|
||
button[disabled], button.disabled,
|
||
input[type="button"][disabled], input[type="button"].disabled,
|
||
input[type="submit"][disabled], input[type="submit"].disabled,
|
||
input[type="reset"][disabled], input[type="reset"].disabled,
|
||
.button[disabled], .button.disabled,
|
||
fieldset[disabled] button,
|
||
fieldset[disabled] input[type="button"],
|
||
fieldset[disabled] input[type="submit"],
|
||
fieldset[disabled] input[type="reset"],
|
||
fieldset[disabled] .button {
|
||
color: hsla(0, 0%, 0%, .2);
|
||
background-color: hsla(0, 0%, 0%, 0.2);
|
||
}
|
||
|
||
/*
|
||
Base fonts
|
||
*/
|
||
|
||
@font-face {
|
||
font-family: "Segoe UI Webfont";
|
||
src: local("Segoe UI Light"),
|
||
url("https://i.s-microsoft.com/fonts/segoe-ui/west-european/light/latest.woff") format("woff"),
|
||
url("https://i.s-microsoft.com/fonts/segoe-ui/west-european/light/latest.ttf") format("truetype");
|
||
font-weight: 200;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "Segoe UI Webfont";
|
||
src: local("Segoe UI Semilight"),
|
||
url("https://i.s-microsoft.com/fonts/segoe-ui/west-european/semilight/latest.woff") format("woff"),
|
||
url("https://i.s-microsoft.com/fonts/segoe-ui/west-european/semilight/latest.ttf") format("truetype");
|
||
font-weight: 300;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "Segoe UI Webfont";
|
||
src: local("Segoe UI"),
|
||
url("https://i.s-microsoft.com/fonts/segoe-ui/west-european/normal/latest.woff") format("woff"),
|
||
url("https://i.s-microsoft.com/fonts/segoe-ui/west-european/normal/latest.ttf") format("truetype");
|
||
font-weight: 400;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "Segoe UI Webfont";
|
||
src: local("Segoe UI Semibold"),
|
||
url("https://i.s-microsoft.com/fonts/segoe-ui/west-european/semibold/latest.woff") format("woff"),
|
||
url("https://i.s-microsoft.com/fonts/segoe-ui/west-european/semibold/latest.ttf") format("truetype");
|
||
font-weight: 600;
|
||
}
|
||
|
||
/*
|
||
Base font size: 10px for easy rem to px conversion.
|
||
Use % so if user increases their default font-size, it doesn’t wipe that out
|
||
*/
|
||
html {
|
||
font-size: 62.5%;
|
||
}
|
||
|
||
body {
|
||
font: 15px/20px "Segoe UI Webfont", "Segoe UI", sans-serif;
|
||
}
|
||
|
||
/*
|
||
Headings and Captions
|
||
*/
|
||
|
||
/* Issues
|
||
* What should the letter spacing value be?
|
||
*/
|
||
|
||
h2, h3, h4, h5, h6,
|
||
figure,
|
||
caption,
|
||
thead th,
|
||
.subheading,
|
||
.title,
|
||
.subtitle,
|
||
.caption,
|
||
.caption-alt {
|
||
line-height: 1.2;
|
||
}
|
||
|
||
h1, h2,
|
||
.headline,
|
||
.heading,
|
||
.subheading {
|
||
font-weight: 200;
|
||
}
|
||
|
||
h4, h5, h6,
|
||
.subtitle,
|
||
.caption,
|
||
.caption-alt,
|
||
.subcaption,
|
||
thead th {
|
||
font-weight: 400;
|
||
}
|
||
|
||
.item-section .title {
|
||
font-weight: 600;
|
||
}
|
||
|
||
h1,
|
||
.headline,
|
||
.heading {
|
||
letter-spacing: -.03em;
|
||
}
|
||
|
||
.headline {
|
||
font-size: 6.2rem;
|
||
line-height: 8rem;
|
||
}
|
||
|
||
h1,
|
||
.heading {
|
||
font-size: 4.6rem;
|
||
line-height: 5.6rem;
|
||
}
|
||
|
||
h2,
|
||
.subheading {
|
||
font-size: 3.4rem;
|
||
}
|
||
|
||
h3,
|
||
.title {
|
||
font-weight: 300;
|
||
font-size: 2.4rem;
|
||
}
|
||
|
||
h4,
|
||
caption,
|
||
.subtitle {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.item-section .title,
|
||
.subsection-header .subtitle {
|
||
font-size: 1.5rem;
|
||
line-height: 2rem;
|
||
}
|
||
|
||
h5,
|
||
.caption,
|
||
thead th {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
h6,
|
||
.caption-alt {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.subcaption {
|
||
font-size: .8rem;
|
||
line-height: 1rem;
|
||
}
|
||
|
||
/*
|
||
Vertical margins between textual elements
|
||
*/
|
||
|
||
/* Issues
|
||
* Should this be in type? Spacing between text kind of counts, but also kinda layout
|
||
* Should `figure` be included or does the caption handle that?
|
||
*/
|
||
|
||
li {
|
||
margin-bottom: 1.2rem;
|
||
}
|
||
|
||
h1, h2, h3, h4, h5, h6,
|
||
dl, ol, ul,
|
||
p,
|
||
figure,
|
||
table,
|
||
.headline,
|
||
.heading,
|
||
.subheading,
|
||
.title,
|
||
.subtitle,
|
||
.caption,
|
||
.caption-alt,
|
||
.subcaption {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.subsection-header .title,
|
||
.subsection-header .subtitle {
|
||
margin: 0;
|
||
}
|
||
|
||
.section-header .subtitle {
|
||
color: #767676;
|
||
}
|
||
|
||
.container,
|
||
.container-fluid {
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
width: 92.5%;
|
||
max-width: 160rem;
|
||
}
|
||
.container:before,
|
||
.container:after,
|
||
.container-fluid:before,
|
||
.container-fluid:after {
|
||
content: " ";
|
||
display: table;
|
||
}
|
||
.container:after,
|
||
.container-fluid:after {
|
||
clear: both;
|
||
}
|
||
.container .container,
|
||
.container-fluid .container {
|
||
width: auto;
|
||
}
|
||
|
||
.row:before,
|
||
.row:after {
|
||
content: " ";
|
||
display: table;
|
||
}
|
||
.row:after {
|
||
clear: both;
|
||
}
|
||
|
||
[class^="col"] {
|
||
position: relative;
|
||
min-height: 1px;
|
||
width: 100%;
|
||
}
|
||
|
||
@media (min-width: 32rem) {
|
||
|
||
.container,
|
||
.container-fluid {
|
||
width: 91.1%;
|
||
padding-left: 1.2rem;
|
||
padding-right: 1.2rem;
|
||
}
|
||
|
||
.row {
|
||
margin-left: -1.2rem;
|
||
margin-right: -1.2rem;
|
||
}
|
||
|
||
[class^="col"] {
|
||
float: left;
|
||
padding-left: 1.2rem;
|
||
padding-right: 1.2rem;
|
||
}
|
||
.col-xs-1 {
|
||
width: 4.1666666667%;
|
||
}
|
||
.col-xs-2 {
|
||
width: 8.3333333333%;
|
||
}
|
||
.col-xs-3 {
|
||
width: 12.5%;
|
||
}
|
||
.col-xs-4 {
|
||
width: 16.6666666667%;
|
||
}
|
||
.col-xs-5 {
|
||
width: 20.8333333333%;
|
||
}
|
||
.col-xs-6 {
|
||
width: 25%;
|
||
}
|
||
.col-xs-7 {
|
||
width: 29.1666666667%;
|
||
}
|
||
.col-xs-8 {
|
||
width: 33.3333333333%;
|
||
}
|
||
.col-xs-9 {
|
||
width: 37.5%;
|
||
}
|
||
.col-xs-10 {
|
||
width: 41.6666666667%;
|
||
}
|
||
.col-xs-11 {
|
||
width: 45.8333333333%;
|
||
}
|
||
.col-xs-12 {
|
||
width: 50%;
|
||
}
|
||
.col-xs-13 {
|
||
width: 54.1666666667%;
|
||
}
|
||
.col-xs-14 {
|
||
width: 58.3333333333%;
|
||
}
|
||
.col-xs-15 {
|
||
width: 62.5%;
|
||
}
|
||
.col-xs-16 {
|
||
width: 66.6666666667%;
|
||
}
|
||
.col-xs-17 {
|
||
width: 70.8333333333%;
|
||
}
|
||
.col-xs-18 {
|
||
width: 75%;
|
||
}
|
||
.col-xs-19 {
|
||
width: 79.1666666667%;
|
||
}
|
||
.col-xs-20 {
|
||
width: 83.3333333333%;
|
||
}
|
||
.col-xs-21 {
|
||
width: 87.5%;
|
||
}
|
||
.col-xs-22 {
|
||
width: 91.6666666667%;
|
||
}
|
||
.col-xs-23 {
|
||
width: 95.8333333333%;
|
||
}
|
||
.col-xs-24 {
|
||
width: 100%;
|
||
}
|
||
}
|
||
@media (min-width: 54rem) {
|
||
.container,
|
||
.container-fluid {
|
||
width: 87.5%;
|
||
}
|
||
|
||
.col-sm-1 {
|
||
width: 4.1666666667%;
|
||
}
|
||
.col-sm-2 {
|
||
width: 8.3333333333%;
|
||
}
|
||
.col-sm-3 {
|
||
width: 12.5%;
|
||
}
|
||
.col-sm-4 {
|
||
width: 16.6666666667%;
|
||
}
|
||
.col-sm-5 {
|
||
width: 20.8333333333%;
|
||
}
|
||
.col-sm-6 {
|
||
width: 25%;
|
||
}
|
||
.col-sm-7 {
|
||
width: 29.1666666667%;
|
||
}
|
||
.col-sm-8 {
|
||
width: 33.3333333333%;
|
||
}
|
||
.col-sm-9 {
|
||
width: 37.5%;
|
||
}
|
||
.col-sm-10 {
|
||
width: 41.6666666667%;
|
||
}
|
||
.col-sm-11 {
|
||
width: 45.8333333333%;
|
||
}
|
||
.col-sm-12 {
|
||
width: 50%;
|
||
}
|
||
.col-sm-13 {
|
||
width: 54.1666666667%;
|
||
}
|
||
.col-sm-14 {
|
||
width: 58.3333333333%;
|
||
}
|
||
.col-sm-15 {
|
||
width: 62.5%;
|
||
}
|
||
.col-sm-16 {
|
||
width: 66.6666666667%;
|
||
}
|
||
.col-sm-17 {
|
||
width: 70.8333333333%;
|
||
}
|
||
.col-sm-18 {
|
||
width: 75%;
|
||
}
|
||
.col-sm-19 {
|
||
width: 79.1666666667%;
|
||
}
|
||
.col-sm-20 {
|
||
width: 83.3333333333%;
|
||
}
|
||
.col-sm-21 {
|
||
width: 87.5%;
|
||
}
|
||
.col-sm-22 {
|
||
width: 91.6666666667%;
|
||
}
|
||
.col-sm-23 {
|
||
width: 95.8333333333%;
|
||
}
|
||
.col-sm-24 {
|
||
width: 100%;
|
||
}
|
||
}
|
||
@media (min-width: 76.8rem) {
|
||
.container,
|
||
.container-fluid {
|
||
width: 90%;
|
||
padding-left: 1.6rem;
|
||
padding-right: 1.6rem;
|
||
}
|
||
|
||
.row {
|
||
margin-left: -1.6rem;
|
||
margin-right: -1.6rem;
|
||
}
|
||
|
||
[class^="col"] {
|
||
padding-left: 1.6rem;
|
||
padding-right: 1.6rem;
|
||
}
|
||
.col-md-1 {
|
||
width: 4.1666666667%;
|
||
}
|
||
.col-md-2 {
|
||
width: 8.3333333333%;
|
||
}
|
||
.col-md-3 {
|
||
width: 12.5%;
|
||
}
|
||
.col-md-4 {
|
||
width: 16.6666666667%;
|
||
}
|
||
.col-md-5 {
|
||
width: 20.8333333333%;
|
||
}
|
||
.col-md-6 {
|
||
width: 25%;
|
||
}
|
||
.col-md-7 {
|
||
width: 29.1666666667%;
|
||
}
|
||
.col-md-8 {
|
||
width: 33.3333333333%;
|
||
}
|
||
.col-md-9 {
|
||
width: 37.5%;
|
||
}
|
||
.col-md-10 {
|
||
width: 41.6666666667%;
|
||
}
|
||
.col-md-11 {
|
||
width: 45.8333333333%;
|
||
}
|
||
.col-md-12 {
|
||
width: 50%;
|
||
}
|
||
.col-md-13 {
|
||
width: 54.1666666667%;
|
||
}
|
||
.col-md-14 {
|
||
width: 58.3333333333%;
|
||
}
|
||
.col-md-15 {
|
||
width: 62.5%;
|
||
}
|
||
.col-md-16 {
|
||
width: 66.6666666667%;
|
||
}
|
||
.col-md-17 {
|
||
width: 70.8333333333%;
|
||
}
|
||
.col-md-18 {
|
||
width: 75%;
|
||
}
|
||
.col-md-19 {
|
||
width: 79.1666666667%;
|
||
}
|
||
.col-md-20 {
|
||
width: 83.3333333333%;
|
||
}
|
||
.col-md-21 {
|
||
width: 87.5%;
|
||
}
|
||
.col-md-22 {
|
||
width: 91.6666666667%;
|
||
}
|
||
.col-md-23 {
|
||
width: 95.8333333333%;
|
||
}
|
||
.col-md-24 {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/*
|
||
Sections
|
||
|
||
Requires:
|
||
base.css
|
||
type.css
|
||
color.css
|
||
*/
|
||
|
||
/*
|
||
Issues:
|
||
* Should border be in color file?
|
||
* I've put headings in type file Correct?
|
||
* No class on <section> for normal sections. Ok?
|
||
* Needs margins or handled by grid? .item-section should have smaller vertical margins
|
||
*/
|
||
|
||
.section {
|
||
margin-top: 6.4rem;
|
||
}
|
||
|
||
.section-header {
|
||
margin-bottom: 3.2rem;
|
||
}
|
||
|
||
.subsection {
|
||
margin-top: 2.8rem;
|
||
}
|
||
|
||
.item-subsection,
|
||
.page-header {
|
||
margin-top: 4.8rem;
|
||
}
|
||
|
||
/* TEMP. Need to make sure where margin goes */
|
||
.page-header {
|
||
margin-bottom: 4.8rem;
|
||
}
|
||
|
||
.page-header .heading,
|
||
.subsection-header {
|
||
display: block;
|
||
margin-bottom: 3.2rem;
|
||
border-bottom: 1px solid hsla(0, 0%, 0%, .1);
|
||
padding-bottom: 1rem;
|
||
}
|
||
|
||
.item-section .subsection-header {
|
||
margin-bottom: 1.6rem;
|
||
border-width: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
/*
|
||
Tables
|
||
|
||
Requires:
|
||
base.css
|
||
type.css
|
||
*/
|
||
|
||
/*
|
||
Issues:
|
||
* What are the exact values for padding/margin? Guessed for caption
|
||
* Set colours here or in color.css? They’re transparent greys, so put here for now
|
||
* What colour should text in tables be? Guide says 60% but that is much darker than in exmpls
|
||
*/
|
||
|
||
table {
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
th,
|
||
caption {
|
||
text-align: left;
|
||
}
|
||
|
||
caption {
|
||
margin-bottom: 3.2rem;
|
||
border-bottom: 1px solid hsla(0, 0%, 0%, .1);
|
||
padding-bottom: 1rem;
|
||
}
|
||
|
||
th, td {
|
||
padding: 1.6rem;
|
||
vertical-align: top;
|
||
|
||
color: hsla(0, 0%, 0%, .6)
|
||
}
|
||
|
||
thead th {
|
||
padding: 0 1.6rem 1rem 1.6rem;
|
||
vertical-align: bottom;
|
||
}
|
||
|
||
td:first-child {
|
||
color: inherit; /* back to black (or base colour) */
|
||
}
|
||
|
||
tbody tr:nth-child(odd) {
|
||
background-color: hsla(0, 0%, 0%, .05);
|
||
}
|
||
|
||
/*
|
||
Lists
|
||
*/
|
||
|
||
ul, ol {
|
||
margin-left: 2.5em;
|
||
}
|
||
|
||
/* Controls */
|
||
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
|
||
textarea {
|
||
height: 3.2rem;
|
||
|
||
border: 2px solid;
|
||
padding: .4rem .8rem;
|
||
}
|
||
|
||
button,
|
||
input[type="button"], input[type="submit"], input[type="reset"],
|
||
.button {
|
||
min-width: 10rem;
|
||
max-width: 100%;
|
||
|
||
margin: .4rem 0;
|
||
border: 2px solid transparent;
|
||
padding: .4rem 1.2rem;
|
||
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
|
||
/* needed for .button as doesn’t always get default control behaviours */
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
button[disabled], button.disabled,
|
||
input[type="button"][disabled], input[type="button"].disabled,
|
||
input[type="submit"][disabled], input[type="submit"].disabled,
|
||
input[type="reset"][disabled], input[type="reset"].disabled,
|
||
.button[disabled], .button.disabled,
|
||
fieldset[disabled] button,
|
||
fieldset[disabled] input[type="button"],
|
||
fieldset[disabled] input[type="submit"],
|
||
fieldset[disabled] input[type="reset"],
|
||
fieldset[disabled] .button {
|
||
cursor: not-allowed;
|
||
pointer-events: none;
|
||
outline: none;
|
||
}
|
||
|
||
/* Style Guide Helper Styles */
|
||
.grid-block {
|
||
display: block;
|
||
margin-bottom: 2rem;
|
||
padding: 1rem;
|
||
background: #f4fe99;
|
||
}
|
||
|
||
/* Demo-Specific Styles */
|
||
.demo-wrap {
|
||
margin: 4.8rem auto 6.4em;
|
||
}
|