10820 lines
253 KiB
CSS
10820 lines
253 KiB
CSS
/**
|
|
* material-design-lite - Material Design Components in CSS, JS and HTML
|
|
* @version v1.0.0
|
|
* @link https://github.com/google/material-design-lite
|
|
* @license Apache-2
|
|
*/
|
|
@charset "UTF-8";
|
|
/* Material Design Lite */
|
|
/*
|
|
* What follows is the result of much research on cross-browser styling.
|
|
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
|
|
* Kroc Camen, and the H5BP dev community and team.
|
|
*/
|
|
/* ==========================================================================
|
|
Base styles: opinionated defaults
|
|
========================================================================== */
|
|
html {
|
|
color: #222;
|
|
font-size: 1em;
|
|
line-height: 1.4; }
|
|
|
|
/*
|
|
* Remove text-shadow in selection highlight: h5bp.com/i
|
|
* These selection rule sets have to be separate.
|
|
* Customize the background color to match your design.
|
|
*/
|
|
::-moz-selection {
|
|
background: #b3d4fc;
|
|
text-shadow: none; }
|
|
|
|
::selection {
|
|
background: #b3d4fc;
|
|
text-shadow: none; }
|
|
|
|
/*
|
|
* A better looking default horizontal rule
|
|
*/
|
|
hr {
|
|
display: block;
|
|
height: 1px;
|
|
border: 0;
|
|
border-top: 1px solid #ccc;
|
|
margin: 1em 0;
|
|
padding: 0; }
|
|
|
|
/*
|
|
* Remove the gap between images, videos, audio and canvas and the bottom of
|
|
* their containers: h5bp.com/i/440
|
|
*/
|
|
audio, canvas, img, svg, video {
|
|
vertical-align: middle; }
|
|
|
|
/*
|
|
* Remove default fieldset styles.
|
|
*/
|
|
fieldset {
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
/*
|
|
* Allow only vertical resizing of textareas.
|
|
*/
|
|
textarea {
|
|
resize: vertical; }
|
|
|
|
/* ==========================================================================
|
|
Browse Happy prompt
|
|
========================================================================== */
|
|
.browsehappy {
|
|
margin: 0.2em 0;
|
|
background: #ccc;
|
|
color: #000;
|
|
padding: 0.2em 0; }
|
|
|
|
/* ==========================================================================
|
|
Author's custom styles
|
|
========================================================================== */
|
|
/* ==========================================================================
|
|
Helper classes
|
|
========================================================================== */
|
|
/*
|
|
* Hide visually and from screen readers: h5bp.com/u
|
|
*/
|
|
.hidden {
|
|
display: none !important;
|
|
visibility: hidden; }
|
|
|
|
/*
|
|
* Hide only visually, but have it available for screen readers: h5bp.com/v
|
|
*/
|
|
.visuallyhidden {
|
|
border: 0;
|
|
clip: rect(0 0 0 0);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: 1px; }
|
|
|
|
/*
|
|
* Extends the .visuallyhidden class to allow the element to be focusable
|
|
* when navigated to via the keyboard: h5bp.com/p
|
|
*/
|
|
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
|
|
clip: auto;
|
|
height: auto;
|
|
margin: 0;
|
|
overflow: visible;
|
|
position: static;
|
|
width: auto; }
|
|
|
|
/*
|
|
* Hide visually and from screen readers, but maintain layout
|
|
*/
|
|
.invisible {
|
|
visibility: hidden; }
|
|
|
|
/*
|
|
* Clearfix: contain floats
|
|
*
|
|
* For modern browsers
|
|
* 1. The space content is one way to avoid an Opera bug when the
|
|
* `contenteditable` attribute is included anywhere else in the document.
|
|
* Otherwise it causes space to appear at the top and bottom of elements
|
|
* that receive the `clearfix` class.
|
|
* 2. The use of `table` rather than `block` is only necessary if using
|
|
* `:before` to contain the top-margins of child elements.
|
|
*/
|
|
.clearfix:before, .clearfix:after {
|
|
content: " ";
|
|
/* 1 */
|
|
display: table;
|
|
/* 2 */ }
|
|
|
|
.clearfix:after {
|
|
clear: both; }
|
|
|
|
/* ==========================================================================
|
|
EXAMPLE Media Queries for Responsive Design.
|
|
These examples override the primary ('mobile first') styles.
|
|
Modify as content requires.
|
|
========================================================================== */
|
|
/* ==========================================================================
|
|
Print styles.
|
|
Inlined to avoid the additional HTTP request: h5bp.com/r
|
|
========================================================================== */
|
|
@media print {
|
|
*, *:before, *:after {
|
|
background: transparent !important;
|
|
color: #000 !important;
|
|
/* Black prints faster: h5bp.com/s */
|
|
box-shadow: none !important;
|
|
text-shadow: none !important; }
|
|
a, a:visited {
|
|
text-decoration: underline; }
|
|
a[href]:after {
|
|
content: " (" attr(href) ")"; }
|
|
abbr[title]:after {
|
|
content: " (" attr(title) ")"; }
|
|
/*
|
|
* Don't show links that are fragment identifiers,
|
|
* or use the `javascript:` pseudo protocol
|
|
*/
|
|
a[href^="#"]:after, a[href^="javascript:"]:after {
|
|
content: ""; }
|
|
pre, blockquote {
|
|
border: 1px solid #999;
|
|
page-break-inside: avoid; }
|
|
thead {
|
|
display: table-header-group;
|
|
/* h5bp.com/t */ }
|
|
tr, img {
|
|
page-break-inside: avoid; }
|
|
img {
|
|
max-width: 100% !important; }
|
|
p, h2, h3 {
|
|
orphans: 3;
|
|
widows: 3; }
|
|
h2, h3 {
|
|
page-break-after: avoid; } }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
/* We're splitting fonts into "preferred" and "performance" in order to optimize
|
|
page loading. For important text, such as the body, we want it to load
|
|
immediately and not wait for the web font load, whereas for other sections,
|
|
such as headers and titles, we're OK with things taking a bit longer to load.
|
|
We do have some optional classes and parameters in the mixins, in case you
|
|
definitely want to make sure you're using the preferred font and don't mind
|
|
the performance hit.
|
|
We should be able to improve on this once CSS Font Loading L3 becomes more
|
|
widely available.
|
|
*/
|
|
html, body {
|
|
font-family: 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 20px; }
|
|
|
|
h1, h2, h3, h4, h5, h6, p {
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
/**
|
|
* Styles for HTML elements
|
|
*/
|
|
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
opacity: 0.54;
|
|
font-size: 0.6em; }
|
|
|
|
h1 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em; }
|
|
|
|
h2 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px; }
|
|
|
|
h3 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px; }
|
|
|
|
h4 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
h5 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em; }
|
|
|
|
h6 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
p {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
margin: 0 0 16px 0; }
|
|
|
|
a {
|
|
font-weight: bold; }
|
|
|
|
blockquote {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
blockquote:before {
|
|
content: '“';
|
|
opacity: 0.54; }
|
|
blockquote:after {
|
|
content: '”';
|
|
opacity: 0.54; }
|
|
|
|
mark {
|
|
background-color: #f4ff81; }
|
|
|
|
dt {
|
|
font-weight: 700; }
|
|
|
|
/**
|
|
* Class Name Styles
|
|
*/
|
|
.wsk-typography--display-4 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 112px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em; }
|
|
|
|
.wsk-typography--display-4-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 112px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-3 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em; }
|
|
|
|
.wsk-typography--display-3-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-2 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px; }
|
|
|
|
.wsk-typography--display-2-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-1 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px; }
|
|
|
|
.wsk-typography--display-1-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--headline {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
.wsk-typography--headline-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--title {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em; }
|
|
|
|
.wsk-typography--title-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--subhead {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--subhead-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-2 {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-2-color-contrast {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-1 {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-1-color-contrast {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-2-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-2-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-1-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-1-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--caption {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
|
|
.wsk-typography--caption-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
|
|
.wsk-typography--caption-color-contrast {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--caption-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--menu {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--menu-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--button {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--button-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--text-left {
|
|
text-align: left; }
|
|
|
|
.wsk-typography--text-right {
|
|
text-align: right; }
|
|
|
|
.wsk-typography--text-center {
|
|
text-align: center; }
|
|
|
|
.wsk-typography--text-justify {
|
|
text-align: justify; }
|
|
|
|
.wsk-typography--text-nowrap {
|
|
white-space: nowrap; }
|
|
|
|
.wsk-typography--text-lowercase {
|
|
text-transform: lowercase; }
|
|
|
|
.wsk-typography--text-uppercase {
|
|
text-transform: uppercase; }
|
|
|
|
.wsk-typography--text-capitalize {
|
|
text-transform: capitalize; }
|
|
|
|
.wsk-typography--table-striped > tbody > tr:nth-child(odd) > td, .wsk-typography--table-striped > tbody > tr:nth-child(odd) > th {
|
|
background-color: #f9f9f9; }
|
|
|
|
.wsk-typography--table-striped > tbody > tr:nth-child(odd) > td, .wsk-typography--table-striped > tbody > tr:nth-child(odd) > th {
|
|
background-color: #f9f9f9; }
|
|
|
|
.wsk-typography--font-thin {
|
|
font-weight: 200 !important; }
|
|
|
|
.wsk-typography--font-light {
|
|
font-weight: 300 !important; }
|
|
|
|
.wsk-typography--font-regular {
|
|
font-weight: 400 !important; }
|
|
|
|
.wsk-typography--font-medium {
|
|
font-weight: 500 !important; }
|
|
|
|
.wsk-typography--font-bold {
|
|
font-weight: 700 !important; }
|
|
|
|
.wsk-typography--font-black {
|
|
font-weight: 900 !important; }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
.wsk-shadow--z1 {
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
|
|
|
|
.wsk-shadow--z2 {
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.23); }
|
|
|
|
.wsk-shadow--z3 {
|
|
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.19), 0 6px 3px 0 rgba(0, 0, 0, 0.23); }
|
|
|
|
.wsk-shadow--z4 {
|
|
box-shadow: 0 14px 14px 0 rgba(0, 0, 0, 0.25), 0 10px 5px 0 rgba(0, 0, 0, 0.22); }
|
|
|
|
.wsk-shadow--z5 {
|
|
box-shadow: 0 19px 19px 0 rgba(0, 0, 0, 0.3), 0 15px 6px 0 rgba(0, 0, 0, 0.22); }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
.wsk-ripple {
|
|
background: rgb(33,33,33);
|
|
border-radius: 50%;
|
|
height: 50px;
|
|
left: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
width: 50px;
|
|
overflow: hidden; }
|
|
.wsk-ripple.is-animating {
|
|
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
|
|
transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1); }
|
|
|
|
/* We're splitting fonts into "preferred" and "performance" in order to optimize
|
|
page loading. For important text, such as the body, we want it to load
|
|
immediately and not wait for the web font load, whereas for other sections,
|
|
such as headers and titles, we're OK with things taking a bit longer to load.
|
|
We do have some optional classes and parameters in the mixins, in case you
|
|
definitely want to make sure you're using the preferred font and don't mind
|
|
the performance hit.
|
|
We should be able to improve on this once CSS Font Loading L3 becomes more
|
|
widely available.
|
|
*/
|
|
html, body {
|
|
font-family: 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 20px; }
|
|
|
|
h1, h2, h3, h4, h5, h6, p {
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
/**
|
|
* Styles for HTML elements
|
|
*/
|
|
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
opacity: 0.54;
|
|
font-size: 0.6em; }
|
|
|
|
h1 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em; }
|
|
|
|
h2 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px; }
|
|
|
|
h3 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px; }
|
|
|
|
h4 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
h5 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em; }
|
|
|
|
h6 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
p {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
margin: 0 0 16px 0; }
|
|
|
|
a {
|
|
font-weight: bold; }
|
|
|
|
blockquote {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
blockquote:before {
|
|
content: '“';
|
|
opacity: 0.54; }
|
|
blockquote:after {
|
|
content: '”';
|
|
opacity: 0.54; }
|
|
|
|
mark {
|
|
background-color: #f4ff81; }
|
|
|
|
dt {
|
|
font-weight: 700; }
|
|
|
|
/**
|
|
* Class Name Styles
|
|
*/
|
|
.wsk-typography--display-4 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 112px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em; }
|
|
|
|
.wsk-typography--display-4-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 112px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-3 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em; }
|
|
|
|
.wsk-typography--display-3-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-2 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px; }
|
|
|
|
.wsk-typography--display-2-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-1 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px; }
|
|
|
|
.wsk-typography--display-1-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--headline {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
.wsk-typography--headline-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--title {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em; }
|
|
|
|
.wsk-typography--title-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--subhead {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--subhead-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-2 {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-2-color-contrast {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-1 {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-1-color-contrast {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-2-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-2-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-1-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-1-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--caption {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
|
|
.wsk-typography--caption-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
|
|
.wsk-typography--caption-color-contrast {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--caption-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--menu {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--menu-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--button {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--button-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--text-left {
|
|
text-align: left; }
|
|
|
|
.wsk-typography--text-right {
|
|
text-align: right; }
|
|
|
|
.wsk-typography--text-center {
|
|
text-align: center; }
|
|
|
|
.wsk-typography--text-justify {
|
|
text-align: justify; }
|
|
|
|
.wsk-typography--text-nowrap {
|
|
white-space: nowrap; }
|
|
|
|
.wsk-typography--text-lowercase {
|
|
text-transform: lowercase; }
|
|
|
|
.wsk-typography--text-uppercase {
|
|
text-transform: uppercase; }
|
|
|
|
.wsk-typography--text-capitalize {
|
|
text-transform: capitalize; }
|
|
|
|
.wsk-typography--table-striped > tbody > tr:nth-child(odd) > td, .wsk-typography--table-striped > tbody > tr:nth-child(odd) > th {
|
|
background-color: #f9f9f9; }
|
|
|
|
.wsk-typography--table-striped > tbody > tr:nth-child(odd) > td, .wsk-typography--table-striped > tbody > tr:nth-child(odd) > th {
|
|
background-color: #f9f9f9; }
|
|
|
|
.wsk-typography--font-thin {
|
|
font-weight: 200 !important; }
|
|
|
|
.wsk-typography--font-light {
|
|
font-weight: 300 !important; }
|
|
|
|
.wsk-typography--font-regular {
|
|
font-weight: 400 !important; }
|
|
|
|
.wsk-typography--font-medium {
|
|
font-weight: 500 !important; }
|
|
|
|
.wsk-typography--font-bold {
|
|
font-weight: 700 !important; }
|
|
|
|
.wsk-typography--font-black {
|
|
font-weight: 900 !important; }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
.wsk-shadow--z1 {
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
|
|
|
|
.wsk-shadow--z2 {
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.23); }
|
|
|
|
.wsk-shadow--z3 {
|
|
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.19), 0 6px 3px 0 rgba(0, 0, 0, 0.23); }
|
|
|
|
.wsk-shadow--z4 {
|
|
box-shadow: 0 14px 14px 0 rgba(0, 0, 0, 0.25), 0 10px 5px 0 rgba(0, 0, 0, 0.22); }
|
|
|
|
.wsk-shadow--z5 {
|
|
box-shadow: 0 19px 19px 0 rgba(0, 0, 0, 0.3), 0 15px 6px 0 rgba(0, 0, 0, 0.22); }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
.wsk-ripple {
|
|
background: rgb(33,33,33);
|
|
border-radius: 50%;
|
|
height: 50px;
|
|
left: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
width: 50px;
|
|
overflow: hidden; }
|
|
.wsk-ripple.is-animating {
|
|
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
|
|
transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1); }
|
|
|
|
/**
|
|
*
|
|
* Dimensions
|
|
*
|
|
*/
|
|
.wsk-button {
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 2px;
|
|
color: #000;
|
|
display: block;
|
|
position: relative;
|
|
height: 36px;
|
|
min-width: 64px;
|
|
padding: 0 8px;
|
|
margin: 0 4px;
|
|
display: inline-block;
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
overflow: hidden;
|
|
will-change: box-shadow, transform;
|
|
-webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
outline: none;
|
|
cursor: pointer; }
|
|
.wsk-button::-moz-focus-inner {
|
|
border: 0; }
|
|
.wsk-button:hover {
|
|
background-color: rgba(153, 153, 153, 0.2); }
|
|
.wsk-button:focus:not(:active) {
|
|
background-color: rgba(0, 0, 0, 0.12); }
|
|
.wsk-button:active {
|
|
background-color: rgba(153, 153, 153, 0.4); }
|
|
.wsk-button[disabled][disabled] {
|
|
color: rgba(0, 0, 0, 0.26);
|
|
cursor: auto;
|
|
background-color: transparent; }
|
|
.wsk-button.wsk-button--colored {
|
|
color: rgb(63,81,181); }
|
|
.wsk-button.wsk-button--colored:focus:not(:active) {
|
|
background-color: rgba(0, 0, 0, 0.12); }
|
|
|
|
.wsk-button--raised {
|
|
background: rgba(153, 153, 153, 0.2);
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
|
|
.wsk-button--raised:active {
|
|
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.19), 0 6px 3px 0 rgba(0, 0, 0, 0.23);
|
|
background-color: rgba(153, 153, 153, 0.4); }
|
|
.wsk-button--raised:focus:not(:active) {
|
|
box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
|
|
background-color: rgba(153, 153, 153, 0.4); }
|
|
.wsk-button--raised.wsk-button--colored {
|
|
background: rgb(63,81,181);
|
|
color: rgb(255,255,255); }
|
|
.wsk-button--raised.wsk-button--colored:hover {
|
|
background-color: rgb(57,73,171); }
|
|
.wsk-button--raised.wsk-button--colored:active {
|
|
background-color: rgb(57,73,171); }
|
|
.wsk-button--raised.wsk-button--colored:focus:not(:active) {
|
|
background-color: rgb(57,73,171); }
|
|
.wsk-button--raised.wsk-button--colored .wsk-ripple {
|
|
background: white; }
|
|
.wsk-button--raised[disabled][disabled] {
|
|
background-color: rgba(0, 0, 0, 0.12);
|
|
color: rgba(0, 0, 0, 0.26);
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
|
|
|
|
.wsk-button--fab {
|
|
border-radius: 50%;
|
|
font-size: 24px;
|
|
height: 56px;
|
|
margin: auto;
|
|
min-width: 56px;
|
|
width: 56px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background: rgba(153, 153, 153, 0.2);
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
|
|
position: relative; }
|
|
.wsk-button--fab .wsk-icon {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 16px; }
|
|
.wsk-button--fab.wsk-button--mini-fab {
|
|
height: 40px;
|
|
min-width: 40px;
|
|
width: 40px; }
|
|
.wsk-button--fab.wsk-button--mini-fab .wsk-icon {
|
|
top: 8px;
|
|
left: 8px; }
|
|
.wsk-button--fab .wsk-button__ripple-container {
|
|
border-radius: 50%;
|
|
-webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
|
|
.wsk-button--fab:active {
|
|
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.19), 0 6px 3px 0 rgba(0, 0, 0, 0.23);
|
|
background-color: rgba(153, 153, 153, 0.4); }
|
|
.wsk-button--fab:focus:not(:active) {
|
|
box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
|
|
background-color: rgba(153, 153, 153, 0.4); }
|
|
.wsk-button--fab.wsk-button--colored {
|
|
background: rgb(236,64,122);
|
|
color: rgb(255,255,255); }
|
|
.wsk-button--fab.wsk-button--colored:hover {
|
|
background-color: rgb(233,30,99); }
|
|
.wsk-button--fab.wsk-button--colored:focus:not(:active) {
|
|
background-color: rgb(216,27,96); }
|
|
.wsk-button--fab.wsk-button--colored:active {
|
|
background-color: rgb(216,27,96); }
|
|
.wsk-button--fab.wsk-button--colored .wsk-ripple {
|
|
background: white; }
|
|
.wsk-button--fab[disabled][disabled] {
|
|
background-color: rgba(0, 0, 0, 0.12);
|
|
color: rgba(0, 0, 0, 0.26);
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
|
|
|
|
.wsk-button--icon {
|
|
border-radius: 50%;
|
|
font-size: 24px;
|
|
height: 32px;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
min-width: 32px;
|
|
width: 32px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
color: inherit; }
|
|
.wsk-button--icon .wsk-icon {
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 4px; }
|
|
.wsk-button--icon.wsk-button--mini-icon {
|
|
height: 24px;
|
|
min-width: 24px;
|
|
width: 24px; }
|
|
.wsk-button--icon.wsk-button--mini-icon .wsk-icon {
|
|
top: 0px;
|
|
left: 0px; }
|
|
.wsk-button--icon .wsk-button__ripple-container {
|
|
border-radius: 50%;
|
|
-webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
|
|
|
|
.wsk-button__ripple-container {
|
|
display: block;
|
|
height: 100%;
|
|
left: 0px;
|
|
position: absolute;
|
|
top: 0px;
|
|
width: 100%;
|
|
z-index: 0;
|
|
overflow: hidden; }
|
|
.wsk-button[disabled] .wsk-button__ripple-container .wsk-ripple {
|
|
background-color: transparent; }
|
|
|
|
/* We're splitting fonts into "preferred" and "performance" in order to optimize
|
|
page loading. For important text, such as the body, we want it to load
|
|
immediately and not wait for the web font load, whereas for other sections,
|
|
such as headers and titles, we're OK with things taking a bit longer to load.
|
|
We do have some optional classes and parameters in the mixins, in case you
|
|
definitely want to make sure you're using the preferred font and don't mind
|
|
the performance hit.
|
|
We should be able to improve on this once CSS Font Loading L3 becomes more
|
|
widely available.
|
|
*/
|
|
html, body {
|
|
font-family: 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 20px; }
|
|
|
|
h1, h2, h3, h4, h5, h6, p {
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
/**
|
|
* Styles for HTML elements
|
|
*/
|
|
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
opacity: 0.54;
|
|
font-size: 0.6em; }
|
|
|
|
h1 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em; }
|
|
|
|
h2 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px; }
|
|
|
|
h3 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px; }
|
|
|
|
h4 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
h5 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em; }
|
|
|
|
h6 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
p {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
margin: 0 0 16px 0; }
|
|
|
|
a {
|
|
font-weight: bold; }
|
|
|
|
blockquote {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
blockquote:before {
|
|
content: '“';
|
|
opacity: 0.54; }
|
|
blockquote:after {
|
|
content: '”';
|
|
opacity: 0.54; }
|
|
|
|
mark {
|
|
background-color: #f4ff81; }
|
|
|
|
dt {
|
|
font-weight: 700; }
|
|
|
|
/**
|
|
* Class Name Styles
|
|
*/
|
|
.wsk-typography--display-4 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 112px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em; }
|
|
|
|
.wsk-typography--display-4-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 112px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-3 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em; }
|
|
|
|
.wsk-typography--display-3-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-2 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px; }
|
|
|
|
.wsk-typography--display-2-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-1 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px; }
|
|
|
|
.wsk-typography--display-1-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--headline {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
.wsk-typography--headline-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--title {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em; }
|
|
|
|
.wsk-typography--title-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--subhead {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--subhead-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-2 {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-2-color-contrast {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-1 {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-1-color-contrast {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-2-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-2-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-1-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-1-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--caption {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
|
|
.wsk-typography--caption-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
|
|
.wsk-typography--caption-color-contrast {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--caption-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--menu {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--menu-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--button {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--button-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--text-left {
|
|
text-align: left; }
|
|
|
|
.wsk-typography--text-right {
|
|
text-align: right; }
|
|
|
|
.wsk-typography--text-center {
|
|
text-align: center; }
|
|
|
|
.wsk-typography--text-justify {
|
|
text-align: justify; }
|
|
|
|
.wsk-typography--text-nowrap {
|
|
white-space: nowrap; }
|
|
|
|
.wsk-typography--text-lowercase {
|
|
text-transform: lowercase; }
|
|
|
|
.wsk-typography--text-uppercase {
|
|
text-transform: uppercase; }
|
|
|
|
.wsk-typography--text-capitalize {
|
|
text-transform: capitalize; }
|
|
|
|
.wsk-typography--table-striped > tbody > tr:nth-child(odd) > td, .wsk-typography--table-striped > tbody > tr:nth-child(odd) > th {
|
|
background-color: #f9f9f9; }
|
|
|
|
.wsk-typography--table-striped > tbody > tr:nth-child(odd) > td, .wsk-typography--table-striped > tbody > tr:nth-child(odd) > th {
|
|
background-color: #f9f9f9; }
|
|
|
|
.wsk-typography--font-thin {
|
|
font-weight: 200 !important; }
|
|
|
|
.wsk-typography--font-light {
|
|
font-weight: 300 !important; }
|
|
|
|
.wsk-typography--font-regular {
|
|
font-weight: 400 !important; }
|
|
|
|
.wsk-typography--font-medium {
|
|
font-weight: 500 !important; }
|
|
|
|
.wsk-typography--font-bold {
|
|
font-weight: 700 !important; }
|
|
|
|
.wsk-typography--font-black {
|
|
font-weight: 900 !important; }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
.wsk-shadow--z1 {
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
|
|
|
|
.wsk-shadow--z2 {
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.23); }
|
|
|
|
.wsk-shadow--z3 {
|
|
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.19), 0 6px 3px 0 rgba(0, 0, 0, 0.23); }
|
|
|
|
.wsk-shadow--z4 {
|
|
box-shadow: 0 14px 14px 0 rgba(0, 0, 0, 0.25), 0 10px 5px 0 rgba(0, 0, 0, 0.22); }
|
|
|
|
.wsk-shadow--z5 {
|
|
box-shadow: 0 19px 19px 0 rgba(0, 0, 0, 0.3), 0 15px 6px 0 rgba(0, 0, 0, 0.22); }
|
|
|
|
/* Card dimensions */
|
|
/* Cover image */
|
|
.wsk-card {
|
|
font-size: 16px;
|
|
height: 508px;
|
|
overflow: hidden;
|
|
width: 330px;
|
|
z-index: 1;
|
|
position: relative;
|
|
background: white;
|
|
border-radius: 2px; }
|
|
|
|
.wsk-card--img-container {
|
|
background-color: rgb(236,64,122);
|
|
background-repeat: repeat;
|
|
background-position: 50% 50%;
|
|
background-size: cover;
|
|
background-origin: padding-box;
|
|
background-attachment: scroll;
|
|
height: 186px; }
|
|
|
|
.wsk-card--heading {
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
background: rgb(48,63,159) none repeat scroll 0 0/auto padding-box border-box;
|
|
border: 0 none white;
|
|
color: white;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
font-size: 24px;
|
|
height: 96px;
|
|
justify-items: stretch;
|
|
line-height: normal;
|
|
outline: white none 0;
|
|
padding: 8px 16px;
|
|
-webkit-perspective-origin: 165px 56px;
|
|
perspective-origin: 165px 56px;
|
|
text-decoration: none solid white;
|
|
-webkit-transform-origin: 165px 56px;
|
|
-ms-transform-origin: 165px 56px;
|
|
transform-origin: 165px 56px;
|
|
width: 100%; }
|
|
|
|
.wsk-card--heading-text {
|
|
-webkit-align-self: center;
|
|
-ms-flex-item-align: center;
|
|
align-self: center;
|
|
border: 0 none white;
|
|
color: white;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
font-size: inherit;
|
|
font-weight: 300;
|
|
height: 96px;
|
|
justify-self: stretch;
|
|
line-height: normal;
|
|
outline: white none 0;
|
|
overflow: hidden;
|
|
text-decoration: none solid white;
|
|
-webkit-transform-origin: 149px 48px;
|
|
-ms-transform-origin: 149px 48px;
|
|
transform-origin: 149px 48px;
|
|
width: 90%; }
|
|
|
|
.wsk-card--caption {
|
|
background: rgb(26,35,126) none repeat scroll 0 0/auto padding-box border-box;
|
|
border: 0 none white;
|
|
color: white;
|
|
font-size: 12px;
|
|
height: 16px;
|
|
line-height: normal;
|
|
outline: white none 0;
|
|
padding: 8px 16px;
|
|
-webkit-perspective-origin: 165px 16px;
|
|
perspective-origin: 165px 16px;
|
|
text-decoration: none solid white;
|
|
width: 100%; }
|
|
|
|
.wsk-card--lower {
|
|
border: 0 none #444444;
|
|
color: rgb(26,35,126);
|
|
font-size: 13px;
|
|
height: 108px;
|
|
line-height: 18px;
|
|
margin: 10px 0;
|
|
outline: #444444 none 0;
|
|
overflow: hidden;
|
|
padding: 0 16px;
|
|
text-decoration: none solid #444444;
|
|
width: 90%; }
|
|
|
|
.wsk-card--bottom {
|
|
font-size: 16px;
|
|
height: 50px;
|
|
line-height: normal;
|
|
width: 100%; }
|
|
|
|
.wsk-card--bottom a {
|
|
border-bottom: 0 none #303f9f;
|
|
border-left: 0 none #303f9f;
|
|
border-right: 0 none #303f9f;
|
|
border-top: 1px solid #ebebeb;
|
|
box-sizing: border-box;
|
|
color: rgb(26,35,126);
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
font-weight: normal;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
outline: #303f9f none 0;
|
|
padding: 0 16px;
|
|
-webkit-perspective-origin: 165px 25px;
|
|
perspective-origin: 165px 25px;
|
|
text-decoration: none solid #303f9f;
|
|
text-transform: uppercase;
|
|
-webkit-transform-origin: 165px 25px;
|
|
-ms-transform-origin: 165px 25px;
|
|
transform-origin: 165px 25px;
|
|
width: 100%; }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
.wsk-ripple {
|
|
background: rgb(33,33,33);
|
|
border-radius: 50%;
|
|
height: 50px;
|
|
left: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
width: 50px;
|
|
overflow: hidden; }
|
|
.wsk-ripple.is-animating {
|
|
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
|
|
transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1); }
|
|
|
|
.wsk-checkbox {
|
|
position: relative;
|
|
z-index: 1;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 24px;
|
|
margin: 12px 0;
|
|
padding: 0; }
|
|
.wsk-checkbox.is-upgraded {
|
|
padding-left: 24px; }
|
|
|
|
.wsk-checkbox__input {
|
|
line-height: 24px; }
|
|
.wsk-checkbox.is-upgraded .wsk-checkbox__input {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
opacity: 0;
|
|
-ms-appearance: none;
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
border: none; }
|
|
|
|
.wsk-checkbox__box-outline {
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 0;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
border: 2px solid rgba(0, 0, 0, 0.54);
|
|
border-radius: 2px;
|
|
z-index: 2; }
|
|
.wsk-checkbox.is-checked .wsk-checkbox__box-outline {
|
|
border: 2px solid rgb(63,81,181); }
|
|
.wsk-checkbox.is-disabled .wsk-checkbox__box-outline {
|
|
border: 2px solid rgba(0, 0, 0, 0.26);
|
|
cursor: auto; }
|
|
|
|
.wsk-checkbox__focus-helper {
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 0;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background-color: transparent; }
|
|
.wsk-checkbox.is-focused .wsk-checkbox__focus-helper {
|
|
box-shadow: 0 0 0px 8px rgba(0, 0, 0, 0.1);
|
|
background-color: rgba(0, 0, 0, 0.1); }
|
|
.wsk-checkbox.is-focused.is-checked .wsk-checkbox__focus-helper {
|
|
box-shadow: 0 0 0px 8px rgba(63,81,181, 0.26);
|
|
background-color: rgba(63,81,181, 0.26); }
|
|
|
|
.wsk-checkbox__tick-outline {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
-webkit-mask: url("../images/tick-mask.svg#mask");
|
|
mask: url("../images/tick-mask.svg#mask");
|
|
background: transparent;
|
|
-webkit-transition-duration: 0.28s;
|
|
transition-duration: 0.28s;
|
|
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
-webkit-transition-property: background;
|
|
transition-property: background; }
|
|
.wsk-checkbox.is-checked .wsk-checkbox__tick-outline {
|
|
background: rgb(63,81,181) url("../images/tick.svg"); }
|
|
.wsk-checkbox.is-checked.is-disabled .wsk-checkbox__tick-outline {
|
|
background: rgba(0, 0, 0, 0.26) url("../images/tick.svg"); }
|
|
|
|
.wsk-checkbox__label {
|
|
position: relative;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
margin: 0; }
|
|
.wsk-checkbox.is-disabled .wsk-checkbox__label {
|
|
color: rgba(0, 0, 0, 0.26);
|
|
cursor: auto; }
|
|
|
|
.wsk-checkbox__ripple-container {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: -6px;
|
|
left: -10px;
|
|
box-sizing: border-box;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
-webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
|
|
.wsk-checkbox__ripple-container .wsk-ripple {
|
|
background: rgb(63,81,181); }
|
|
.wsk-checkbox.is-disabled .wsk-checkbox__ripple-container {
|
|
cursor: auto; }
|
|
.wsk-checkbox.is-disabled .wsk-checkbox__ripple-container .wsk-ripple {
|
|
background: transparent; }
|
|
|
|
.wsk-column-layout {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: row;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-webkit-flex-wrap: wrap;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-webkit-box-pack: center;
|
|
-webkit-justify-content: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
padding: 20px; }
|
|
@media screen and (min-width: 1600px) {
|
|
.wsk-column-layout {
|
|
padding-left: calc(50% - 600px);
|
|
padding-right: calc(50% - 600px); } }
|
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
|
.wsk-column-layout {
|
|
padding: 12px; } }
|
|
@media screen and (max-width: 767px) {
|
|
.wsk-column-layout {
|
|
padding: 8px; } }
|
|
|
|
.wsk-column-layout__child {
|
|
min-width: 360px;
|
|
width: 360px;
|
|
margin: 20px;
|
|
box-sizing: border-box; }
|
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
|
.wsk-column-layout__child {
|
|
margin: 12px;
|
|
min-width: calc(50% - 24px);
|
|
width: calc(50% - 24px); } }
|
|
@media screen and (max-width: 767px) {
|
|
.wsk-column-layout__child {
|
|
margin: 8px;
|
|
width: calc(100% - 16px);
|
|
min-width: calc(100% - 16px); } }
|
|
|
|
.wsk-column-layout__wrap-hack {
|
|
min-width: 360px;
|
|
width: 360px;
|
|
margin: 20px;
|
|
box-sizing: border-box;
|
|
height: 0;
|
|
min-height: 0;
|
|
max-height: 0;
|
|
border: none;
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
opacity: 0; }
|
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
|
.wsk-column-layout__wrap-hack {
|
|
margin: 12px;
|
|
min-width: calc(50% - 24px);
|
|
width: calc(50% - 24px); } }
|
|
@media screen and (max-width: 767px) {
|
|
.wsk-column-layout__wrap-hack {
|
|
margin: 8px;
|
|
width: calc(100% - 16px);
|
|
min-width: calc(100% - 16px); } }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
@font-face {
|
|
font-family: 'Material-Design-Iconic-Font';
|
|
src: url('../fonts/Material-Design-Iconic-Font.eot?v=1.1.1');
|
|
src: url('../fonts/Material-Design-Iconic-Font.eot?#iefix&v=1.1.1') format('embedded-opentype'), url('../fonts/Material-Design-Iconic-Font.woff?v=1.1.1') format('woff'), url('../fonts/Material-Design-Iconic-Font.ttf?v=1.1.1') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal; }
|
|
|
|
.wsk-icon {
|
|
font-family: 'Material-Design-Iconic-Font';
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
.wsk-icon--3d-rotation:before {
|
|
content: "\f000"; }
|
|
|
|
.wsk-icon--accessibility:before {
|
|
content: "\f001"; }
|
|
|
|
.wsk-icon--account-balance:before {
|
|
content: "\f002"; }
|
|
|
|
.wsk-icon--account-balance-wallet:before {
|
|
content: "\f003"; }
|
|
|
|
.wsk-icon--account-box:before {
|
|
content: "\f004"; }
|
|
|
|
.wsk-icon--account-child:before {
|
|
content: "\f005"; }
|
|
|
|
.wsk-icon--account-circle:before {
|
|
content: "\f006"; }
|
|
|
|
.wsk-icon--add-shopping-cart:before {
|
|
content: "\f007"; }
|
|
|
|
.wsk-icon--alarm:before {
|
|
content: "\f008"; }
|
|
|
|
.wsk-icon--alarm-add:before {
|
|
content: "\f009"; }
|
|
|
|
.wsk-icon--alarm-off:before {
|
|
content: "\f00a"; }
|
|
|
|
.wsk-icon--alarm-on:before {
|
|
content: "\f00b"; }
|
|
|
|
.wsk-icon--android:before {
|
|
content: "\f00c"; }
|
|
|
|
.wsk-icon--announcement:before {
|
|
content: "\f00d"; }
|
|
|
|
.wsk-icon--aspect-ratio:before {
|
|
content: "\f00e"; }
|
|
|
|
.wsk-icon--assessment:before {
|
|
content: "\f00f"; }
|
|
|
|
.wsk-icon--assignment:before {
|
|
content: "\f010"; }
|
|
|
|
.wsk-icon--assignment-ind:before {
|
|
content: "\f011"; }
|
|
|
|
.wsk-icon--assignment-late:before {
|
|
content: "\f012"; }
|
|
|
|
.wsk-icon--assignment-return:before {
|
|
content: "\f013"; }
|
|
|
|
.wsk-icon--assignment-returned:before {
|
|
content: "\f014"; }
|
|
|
|
.wsk-icon--assignment-turned-in:before {
|
|
content: "\f015"; }
|
|
|
|
.wsk-icon--autorenew:before {
|
|
content: "\f016"; }
|
|
|
|
.wsk-icon--backup:before {
|
|
content: "\f017"; }
|
|
|
|
.wsk-icon--book:before {
|
|
content: "\f018"; }
|
|
|
|
.wsk-icon--bookmark:before {
|
|
content: "\f019"; }
|
|
|
|
.wsk-icon--bookmark-outline:before {
|
|
content: "\f01a"; }
|
|
|
|
.wsk-icon--bug-report:before {
|
|
content: "\f01b"; }
|
|
|
|
.wsk-icon--cached:before {
|
|
content: "\f01c"; }
|
|
|
|
.wsk-icon--class:before {
|
|
content: "\f01d"; }
|
|
|
|
.wsk-icon--credit-card:before {
|
|
content: "\f01e"; }
|
|
|
|
.wsk-icon--dashboard:before {
|
|
content: "\f01f"; }
|
|
|
|
.wsk-icon--delete:before {
|
|
content: "\f020"; }
|
|
|
|
.wsk-icon--description:before {
|
|
content: "\f021"; }
|
|
|
|
.wsk-icon--dns:before {
|
|
content: "\f022"; }
|
|
|
|
.wsk-icon--done:before {
|
|
content: "\f023"; }
|
|
|
|
.wsk-icon--done-all:before {
|
|
content: "\f024"; }
|
|
|
|
.wsk-icon--event:before {
|
|
content: "\f025"; }
|
|
|
|
.wsk-icon--exit-to-app:before {
|
|
content: "\f026"; }
|
|
|
|
.wsk-icon--explore:before {
|
|
content: "\f027"; }
|
|
|
|
.wsk-icon--extension:before {
|
|
content: "\f028"; }
|
|
|
|
.wsk-icon--face-unlock:before {
|
|
content: "\f029"; }
|
|
|
|
.wsk-icon--favorite:before {
|
|
content: "\f02a"; }
|
|
|
|
.wsk-icon--favorite-outline:before {
|
|
content: "\f02b"; }
|
|
|
|
.wsk-icon--find-in-page:before {
|
|
content: "\f02c"; }
|
|
|
|
.wsk-icon--find-replace:before {
|
|
content: "\f02d"; }
|
|
|
|
.wsk-icon--flip-to-back:before {
|
|
content: "\f02e"; }
|
|
|
|
.wsk-icon--flip-to-front:before {
|
|
content: "\f02f"; }
|
|
|
|
.wsk-icon--get-app:before {
|
|
content: "\f030"; }
|
|
|
|
.wsk-icon--grade:before {
|
|
content: "\f031"; }
|
|
|
|
.wsk-icon--group-work:before {
|
|
content: "\f032"; }
|
|
|
|
.wsk-icon--help:before {
|
|
content: "\f033"; }
|
|
|
|
.wsk-icon--highlight-remove:before {
|
|
content: "\f034"; }
|
|
|
|
.wsk-icon--history:before {
|
|
content: "\f035"; }
|
|
|
|
.wsk-icon--home:before {
|
|
content: "\f036"; }
|
|
|
|
.wsk-icon--https:before {
|
|
content: "\f037"; }
|
|
|
|
.wsk-icon--info:before {
|
|
content: "\f038"; }
|
|
|
|
.wsk-icon--info-outline:before {
|
|
content: "\f039"; }
|
|
|
|
.wsk-icon--input:before {
|
|
content: "\f03a"; }
|
|
|
|
.wsk-icon--invert-colors:before {
|
|
content: "\f03b"; }
|
|
|
|
.wsk-icon--label:before {
|
|
content: "\f03c"; }
|
|
|
|
.wsk-icon--label-outline:before {
|
|
content: "\f03d"; }
|
|
|
|
.wsk-icon--language:before {
|
|
content: "\f03e"; }
|
|
|
|
.wsk-icon--launch:before {
|
|
content: "\f03f"; }
|
|
|
|
.wsk-icon--list:before {
|
|
content: "\f040"; }
|
|
|
|
.wsk-icon--lock:before {
|
|
content: "\f041"; }
|
|
|
|
.wsk-icon--lock-open:before {
|
|
content: "\f042"; }
|
|
|
|
.wsk-icon--lock-outline:before {
|
|
content: "\f043"; }
|
|
|
|
.wsk-icon--loyalty:before {
|
|
content: "\f044"; }
|
|
|
|
.wsk-icon--markunread-mailbox:before {
|
|
content: "\f045"; }
|
|
|
|
.wsk-icon--note-add:before {
|
|
content: "\f046"; }
|
|
|
|
.wsk-icon--open-in-browser:before {
|
|
content: "\f047"; }
|
|
|
|
.wsk-icon--open-in-new:before {
|
|
content: "\f048"; }
|
|
|
|
.wsk-icon--open-with:before {
|
|
content: "\f049"; }
|
|
|
|
.wsk-icon--pageview:before {
|
|
content: "\f04a"; }
|
|
|
|
.wsk-icon--payment:before {
|
|
content: "\f04b"; }
|
|
|
|
.wsk-icon--perm-camera-mic:before {
|
|
content: "\f04c"; }
|
|
|
|
.wsk-icon--perm-contact-cal:before {
|
|
content: "\f04d"; }
|
|
|
|
.wsk-icon--perm-data-setting:before {
|
|
content: "\f04e"; }
|
|
|
|
.wsk-icon--perm-device-info:before {
|
|
content: "\f04f"; }
|
|
|
|
.wsk-icon--perm-identity:before {
|
|
content: "\f050"; }
|
|
|
|
.wsk-icon--perm-media:before {
|
|
content: "\f051"; }
|
|
|
|
.wsk-icon--perm-phone-msg:before {
|
|
content: "\f052"; }
|
|
|
|
.wsk-icon--perm-scan-wifi:before {
|
|
content: "\f053"; }
|
|
|
|
.wsk-icon--picture-in-picture:before {
|
|
content: "\f054"; }
|
|
|
|
.wsk-icon--polymer:before {
|
|
content: "\f055"; }
|
|
|
|
.wsk-icon--print:before {
|
|
content: "\f056"; }
|
|
|
|
.wsk-icon--query-builder:before {
|
|
content: "\f057"; }
|
|
|
|
.wsk-icon--question-answer:before {
|
|
content: "\f058"; }
|
|
|
|
.wsk-icon--receipt:before {
|
|
content: "\f059"; }
|
|
|
|
.wsk-icon--redeem:before {
|
|
content: "\f05a"; }
|
|
|
|
.wsk-icon--reorder:before {
|
|
content: "\f094"; }
|
|
|
|
.wsk-icon--report-problem:before {
|
|
content: "\f05b"; }
|
|
|
|
.wsk-icon--restore:before {
|
|
content: "\f05c"; }
|
|
|
|
.wsk-icon--room:before {
|
|
content: "\f05d"; }
|
|
|
|
.wsk-icon--schedule:before {
|
|
content: "\f05e"; }
|
|
|
|
.wsk-icon--search:before {
|
|
content: "\f05f"; }
|
|
|
|
.wsk-icon--settings:before {
|
|
content: "\f060"; }
|
|
|
|
.wsk-icon--settings-applications:before {
|
|
content: "\f061"; }
|
|
|
|
.wsk-icon--settings-backup-restore:before {
|
|
content: "\f062"; }
|
|
|
|
.wsk-icon--settings-bluetooth:before {
|
|
content: "\f063"; }
|
|
|
|
.wsk-icon--settings-cell:before {
|
|
content: "\f064"; }
|
|
|
|
.wsk-icon--settings-display:before {
|
|
content: "\f065"; }
|
|
|
|
.wsk-icon--settings-ethernet:before {
|
|
content: "\f066"; }
|
|
|
|
.wsk-icon--settings-input-antenna:before {
|
|
content: "\f067"; }
|
|
|
|
.wsk-icon--settings-input-component:before {
|
|
content: "\f068"; }
|
|
|
|
.wsk-icon--settings-input-composite:before {
|
|
content: "\f069"; }
|
|
|
|
.wsk-icon--settings-input-hdmi:before {
|
|
content: "\f06a"; }
|
|
|
|
.wsk-icon--settings-input-svideo:before {
|
|
content: "\f06b"; }
|
|
|
|
.wsk-icon--settings-overscan:before {
|
|
content: "\f06c"; }
|
|
|
|
.wsk-icon--settings-phone:before {
|
|
content: "\f06d"; }
|
|
|
|
.wsk-icon--settings-power:before {
|
|
content: "\f06e"; }
|
|
|
|
.wsk-icon--settings-remote:before {
|
|
content: "\f06f"; }
|
|
|
|
.wsk-icon--settings-voice:before {
|
|
content: "\f070"; }
|
|
|
|
.wsk-icon--shop:before {
|
|
content: "\f071"; }
|
|
|
|
.wsk-icon--shopping-basket:before {
|
|
content: "\f072"; }
|
|
|
|
.wsk-icon--shopping-cart:before {
|
|
content: "\f073"; }
|
|
|
|
.wsk-icon--shop-two:before {
|
|
content: "\f074"; }
|
|
|
|
.wsk-icon--speaker-notes:before {
|
|
content: "\f075"; }
|
|
|
|
.wsk-icon--spellcheck:before {
|
|
content: "\f076"; }
|
|
|
|
.wsk-icon--star-rate:before {
|
|
content: "\f077"; }
|
|
|
|
.wsk-icon--stars:before {
|
|
content: "\f078"; }
|
|
|
|
.wsk-icon--store:before {
|
|
content: "\f079"; }
|
|
|
|
.wsk-icon--subject:before {
|
|
content: "\f07a"; }
|
|
|
|
.wsk-icon--supervisor-account:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--swap-horiz:before {
|
|
content: "\f07b"; }
|
|
|
|
.wsk-icon--swap-vert:before {
|
|
content: "\f07c"; }
|
|
|
|
.wsk-icon--swap-vert-circle:before {
|
|
content: "\f07d"; }
|
|
|
|
.wsk-icon--system-update-tv:before {
|
|
content: "\f07e"; }
|
|
|
|
.wsk-icon--tab:before {
|
|
content: "\f07f"; }
|
|
|
|
.wsk-icon--tab-unselected:before {
|
|
content: "\f080"; }
|
|
|
|
.wsk-icon--theaters:before {
|
|
content: "\f081"; }
|
|
|
|
.wsk-icon--thumb-down:before {
|
|
content: "\f082"; }
|
|
|
|
.wsk-icon--thumbs-up-down:before {
|
|
content: "\f083"; }
|
|
|
|
.wsk-icon--thumb-up:before {
|
|
content: "\f084"; }
|
|
|
|
.wsk-icon--toc:before {
|
|
content: "\f085"; }
|
|
|
|
.wsk-icon--today:before {
|
|
content: "\f086"; }
|
|
|
|
.wsk-icon--track-changes:before {
|
|
content: "\f087"; }
|
|
|
|
.wsk-icon--translate:before {
|
|
content: "\f088"; }
|
|
|
|
.wsk-icon--trending-down:before {
|
|
content: "\f089"; }
|
|
|
|
.wsk-icon--trending-neutral:before {
|
|
content: "\f08a"; }
|
|
|
|
.wsk-icon--trending-up:before {
|
|
content: "\f08b"; }
|
|
|
|
.wsk-icon--turned-in:before {
|
|
content: "\f08c"; }
|
|
|
|
.wsk-icon--turned-in-not:before {
|
|
content: "\f08d"; }
|
|
|
|
.wsk-icon--verified-user:before {
|
|
content: "\f08e"; }
|
|
|
|
.wsk-icon--view-agenda:before {
|
|
content: "\f08f"; }
|
|
|
|
.wsk-icon--view-array:before {
|
|
content: "\f090"; }
|
|
|
|
.wsk-icon--view-carousel:before {
|
|
content: "\f091"; }
|
|
|
|
.wsk-icon--view-column:before {
|
|
content: "\f092"; }
|
|
|
|
.wsk-icon--view-day:before {
|
|
content: "\f093"; }
|
|
|
|
.wsk-icon--view-headline:before {
|
|
content: "\f094"; }
|
|
|
|
.wsk-icon--view-list:before {
|
|
content: "\f095"; }
|
|
|
|
.wsk-icon--view-module:before {
|
|
content: "\f096"; }
|
|
|
|
.wsk-icon--view-quilt:before {
|
|
content: "\f097"; }
|
|
|
|
.wsk-icon--view-stream:before {
|
|
content: "\f098"; }
|
|
|
|
.wsk-icon--view-week:before {
|
|
content: "\f099"; }
|
|
|
|
.wsk-icon--visibility:before {
|
|
content: "\f09a"; }
|
|
|
|
.wsk-icon--visibility-off:before {
|
|
content: "\f09b"; }
|
|
|
|
.wsk-icon--wallet-giftcard:before {
|
|
content: "\f09c"; }
|
|
|
|
.wsk-icon--wallet-membership:before {
|
|
content: "\f09d"; }
|
|
|
|
.wsk-icon--wallet-travel:before {
|
|
content: "\f09e"; }
|
|
|
|
.wsk-icon--work:before {
|
|
content: "\f09f"; }
|
|
|
|
.wsk-icon--error:before {
|
|
content: "\f0a0"; }
|
|
|
|
.wsk-icon--warning:before {
|
|
content: "\f0a1"; }
|
|
|
|
.wsk-icon--album:before {
|
|
content: "\f0a2"; }
|
|
|
|
.wsk-icon--av-timer:before {
|
|
content: "\f0a3"; }
|
|
|
|
.wsk-icon--closed-caption:before {
|
|
content: "\f0a4"; }
|
|
|
|
.wsk-icon--equalizer:before {
|
|
content: "\f0a5"; }
|
|
|
|
.wsk-icon--explicit:before {
|
|
content: "\f0a6"; }
|
|
|
|
.wsk-icon--fast-forward:before {
|
|
content: "\f0a7"; }
|
|
|
|
.wsk-icon--fast-rewind:before {
|
|
content: "\f0a8"; }
|
|
|
|
.wsk-icon--games:before {
|
|
content: "\f0a9"; }
|
|
|
|
.wsk-icon--hearing:before {
|
|
content: "\f0aa"; }
|
|
|
|
.wsk-icon--high-quality:before {
|
|
content: "\f0ab"; }
|
|
|
|
.wsk-icon--loop:before {
|
|
content: "\f0ac"; }
|
|
|
|
.wsk-icon--mic:before {
|
|
content: "\f0ad"; }
|
|
|
|
.wsk-icon--mic-none:before {
|
|
content: "\f0ae"; }
|
|
|
|
.wsk-icon--mic-off:before {
|
|
content: "\f0af"; }
|
|
|
|
.wsk-icon--movie:before {
|
|
content: "\f0b0"; }
|
|
|
|
.wsk-icon--my-library-add:before {
|
|
content: "\f0b1"; }
|
|
|
|
.wsk-icon--my-library-books:before {
|
|
content: "\f0b2"; }
|
|
|
|
.wsk-icon--my-library-music:before {
|
|
content: "\f0b3"; }
|
|
|
|
.wsk-icon--new-releases:before {
|
|
content: "\f0b4"; }
|
|
|
|
.wsk-icon--not-interested:before {
|
|
content: "\f0b5"; }
|
|
|
|
.wsk-icon--pause:before {
|
|
content: "\f0b6"; }
|
|
|
|
.wsk-icon--pause-circle-fill:before {
|
|
content: "\f0b7"; }
|
|
|
|
.wsk-icon--pause-circle-outline:before {
|
|
content: "\f0b8"; }
|
|
|
|
.wsk-icon--play-arrow:before {
|
|
content: "\f0b9"; }
|
|
|
|
.wsk-icon--play-circle-fill:before {
|
|
content: "\f0ba"; }
|
|
|
|
.wsk-icon--play-circle-outline:before {
|
|
content: "\f0bb"; }
|
|
|
|
.wsk-icon--playlist-add:before {
|
|
content: "\f0bc"; }
|
|
|
|
.wsk-icon--play-shopping-bag:before {
|
|
content: "\f0bd"; }
|
|
|
|
.wsk-icon--queue:before {
|
|
content: "\f0be"; }
|
|
|
|
.wsk-icon--queue-music:before {
|
|
content: "\f0bf"; }
|
|
|
|
.wsk-icon--radio:before {
|
|
content: "\f0c0"; }
|
|
|
|
.wsk-icon--recent-actors:before {
|
|
content: "\f0c1"; }
|
|
|
|
.wsk-icon--repeat:before {
|
|
content: "\f0c2"; }
|
|
|
|
.wsk-icon--repeat-one:before {
|
|
content: "\f0c3"; }
|
|
|
|
.wsk-icon--replay:before {
|
|
content: "\f0c4"; }
|
|
|
|
.wsk-icon--shuffle:before {
|
|
content: "\f0c5"; }
|
|
|
|
.wsk-icon--skip-next:before {
|
|
content: "\f0c6"; }
|
|
|
|
.wsk-icon--skip-previous:before {
|
|
content: "\f0c7"; }
|
|
|
|
.wsk-icon--snooze:before {
|
|
content: "\f0c8"; }
|
|
|
|
.wsk-icon--stop:before {
|
|
content: "\f0c9"; }
|
|
|
|
.wsk-icon--subtitles:before {
|
|
content: "\f0ca"; }
|
|
|
|
.wsk-icon--surround-sound:before {
|
|
content: "\f0cb"; }
|
|
|
|
.wsk-icon--videocam:before {
|
|
content: "\f0cc"; }
|
|
|
|
.wsk-icon--videocam-off:before {
|
|
content: "\f0cd"; }
|
|
|
|
.wsk-icon--video-collection:before {
|
|
content: "\f0ce"; }
|
|
|
|
.wsk-icon--volume-down:before {
|
|
content: "\f0cf"; }
|
|
|
|
.wsk-icon--volume-mute:before {
|
|
content: "\f0d0"; }
|
|
|
|
.wsk-icon--volume-off:before {
|
|
content: "\f0d1"; }
|
|
|
|
.wsk-icon--volume-up:before {
|
|
content: "\f0d2"; }
|
|
|
|
.wsk-icon--web:before {
|
|
content: "\f0d3"; }
|
|
|
|
.wsk-icon--business:before {
|
|
content: "\f0d4"; }
|
|
|
|
.wsk-icon--call:before {
|
|
content: "\f0d5"; }
|
|
|
|
.wsk-icon--call-end:before {
|
|
content: "\f0d6"; }
|
|
|
|
.wsk-icon--call-made:before {
|
|
content: "\f0d7"; }
|
|
|
|
.wsk-icon--call-merge:before {
|
|
content: "\f0d8"; }
|
|
|
|
.wsk-icon--call-missed:before {
|
|
content: "\f0d9"; }
|
|
|
|
.wsk-icon--call-received:before {
|
|
content: "\f0da"; }
|
|
|
|
.wsk-icon--call-split:before {
|
|
content: "\f0db"; }
|
|
|
|
.wsk-icon--chat:before {
|
|
content: "\f0dc"; }
|
|
|
|
.wsk-icon--clear-all:before {
|
|
content: "\f0dd"; }
|
|
|
|
.wsk-icon--comment:before {
|
|
content: "\f0de"; }
|
|
|
|
.wsk-icon--contacts:before {
|
|
content: "\f0df"; }
|
|
|
|
.wsk-icon--dialer-sip:before {
|
|
content: "\f0e0"; }
|
|
|
|
.wsk-icon--dialpad:before {
|
|
content: "\f0e1"; }
|
|
|
|
.wsk-icon--dnd-on:before {
|
|
content: "\f0e2"; }
|
|
|
|
.wsk-icon--email:before {
|
|
content: "\f0e3"; }
|
|
|
|
.wsk-icon--forum:before {
|
|
content: "\f0e4"; }
|
|
|
|
.wsk-icon--import-export:before {
|
|
content: "\f0e5"; }
|
|
|
|
.wsk-icon--invert-colors-off:before {
|
|
content: "\f0e6"; }
|
|
|
|
.wsk-icon--invert-colors-on:before {
|
|
content: "\f0e7"; }
|
|
|
|
.wsk-icon--live-help:before {
|
|
content: "\f0e8"; }
|
|
|
|
.wsk-icon--location-off:before {
|
|
content: "\f0e9"; }
|
|
|
|
.wsk-icon--location-on:before {
|
|
content: "\f0ea"; }
|
|
|
|
.wsk-icon--message:before {
|
|
content: "\f0eb"; }
|
|
|
|
.wsk-icon--messenger:before {
|
|
content: "\f0ec"; }
|
|
|
|
.wsk-icon--no-sim:before {
|
|
content: "\f0ed"; }
|
|
|
|
.wsk-icon--phone:before {
|
|
content: "\f0ee"; }
|
|
|
|
.wsk-icon--portable-wifi-off:before {
|
|
content: "\f0ef"; }
|
|
|
|
.wsk-icon--quick-contacts-dialer:before {
|
|
content: "\f0f0"; }
|
|
|
|
.wsk-icon--quick-contacts-mail:before {
|
|
content: "\f0f1"; }
|
|
|
|
.wsk-icon--ring-volume:before {
|
|
content: "\f0f2"; }
|
|
|
|
.wsk-icon--stay-current-landscape:before {
|
|
content: "\f0f3"; }
|
|
|
|
.wsk-icon--stay-current-portrait:before {
|
|
content: "\f0f4"; }
|
|
|
|
.wsk-icon--stay-primary-landscape:before {
|
|
content: "\f0f5"; }
|
|
|
|
.wsk-icon--stay-primary-portrait:before {
|
|
content: "\f0f6"; }
|
|
|
|
.wsk-icon--swap-calls:before {
|
|
content: "\f0f7"; }
|
|
|
|
.wsk-icon--textsms:before {
|
|
content: "\f0f8"; }
|
|
|
|
.wsk-icon--voicemail:before {
|
|
content: "\f0f9"; }
|
|
|
|
.wsk-icon--vpn-key:before {
|
|
content: "\f0fa"; }
|
|
|
|
.wsk-icon--add:before {
|
|
content: "\f0fb"; }
|
|
|
|
.wsk-icon--add-box:before {
|
|
content: "\f0fc"; }
|
|
|
|
.wsk-icon--add-circle:before {
|
|
content: "\f0fd"; }
|
|
|
|
.wsk-icon--add-circle-outline:before {
|
|
content: "\f0fe"; }
|
|
|
|
.wsk-icon--archive:before {
|
|
content: "\f0ff"; }
|
|
|
|
.wsk-icon--backspace:before {
|
|
content: "\f100"; }
|
|
|
|
.wsk-icon--block:before {
|
|
content: "\f101"; }
|
|
|
|
.wsk-icon--clear:before {
|
|
content: "\f102"; }
|
|
|
|
.wsk-icon--content-copy:before {
|
|
content: "\f103"; }
|
|
|
|
.wsk-icon--content-cut:before {
|
|
content: "\f104"; }
|
|
|
|
.wsk-icon--content-paste:before {
|
|
content: "\f105"; }
|
|
|
|
.wsk-icon--create:before {
|
|
content: "\f106"; }
|
|
|
|
.wsk-icon--drafts:before {
|
|
content: "\f107"; }
|
|
|
|
.wsk-icon--filter-list:before {
|
|
content: "\f108"; }
|
|
|
|
.wsk-icon--flag:before {
|
|
content: "\f109"; }
|
|
|
|
.wsk-icon--forward:before {
|
|
content: "\f10a"; }
|
|
|
|
.wsk-icon--gesture:before {
|
|
content: "\f10b"; }
|
|
|
|
.wsk-icon--inbox:before {
|
|
content: "\f10c"; }
|
|
|
|
.wsk-icon--link:before {
|
|
content: "\f10d"; }
|
|
|
|
.wsk-icon--mail:before {
|
|
content: "\f10e"; }
|
|
|
|
.wsk-icon--markunread:before {
|
|
content: "\f10f"; }
|
|
|
|
.wsk-icon--redo:before {
|
|
content: "\f110"; }
|
|
|
|
.wsk-icon--remove:before {
|
|
content: "\f111"; }
|
|
|
|
.wsk-icon--remove-circle:before {
|
|
content: "\f112"; }
|
|
|
|
.wsk-icon--remove-circle-outline:before {
|
|
content: "\f113"; }
|
|
|
|
.wsk-icon--reply:before {
|
|
content: "\f114"; }
|
|
|
|
.wsk-icon--reply-all:before {
|
|
content: "\f115"; }
|
|
|
|
.wsk-icon--report:before {
|
|
content: "\f116"; }
|
|
|
|
.wsk-icon--save:before {
|
|
content: "\f117"; }
|
|
|
|
.wsk-icon--select-all:before {
|
|
content: "\f118"; }
|
|
|
|
.wsk-icon--send:before {
|
|
content: "\f119"; }
|
|
|
|
.wsk-icon--sort:before {
|
|
content: "\f11a"; }
|
|
|
|
.wsk-icon--text-format:before {
|
|
content: "\f11b"; }
|
|
|
|
.wsk-icon--undo:before {
|
|
content: "\f11c"; }
|
|
|
|
.wsk-icon--access-alarm:before {
|
|
content: "\f11d"; }
|
|
|
|
.wsk-icon--access-alarms:before {
|
|
content: "\f11e"; }
|
|
|
|
.wsk-icon--access-time:before {
|
|
content: "\f11f"; }
|
|
|
|
.wsk-icon--add-alarm:before {
|
|
content: "\f120"; }
|
|
|
|
.wsk-icon--airplanemode-off:before {
|
|
content: "\f121"; }
|
|
|
|
.wsk-icon--airplanemode-on:before {
|
|
content: "\f122"; }
|
|
|
|
.wsk-icon--battery-20:before {
|
|
content: "\f123"; }
|
|
|
|
.wsk-icon--battery-30:before {
|
|
content: "\f124"; }
|
|
|
|
.wsk-icon--battery-50:before {
|
|
content: "\f125"; }
|
|
|
|
.wsk-icon--battery-60:before {
|
|
content: "\f126"; }
|
|
|
|
.wsk-icon--battery-80:before {
|
|
content: "\f127"; }
|
|
|
|
.wsk-icon--battery-90:before {
|
|
content: "\f128"; }
|
|
|
|
.wsk-icon--battery-alert:before {
|
|
content: "\f129"; }
|
|
|
|
.wsk-icon--battery-charging-20:before {
|
|
content: "\f12a"; }
|
|
|
|
.wsk-icon--battery-charging-30:before {
|
|
content: "\f12b"; }
|
|
|
|
.wsk-icon--battery-charging-50:before {
|
|
content: "\f12c"; }
|
|
|
|
.wsk-icon--battery-charging-60:before {
|
|
content: "\f12d"; }
|
|
|
|
.wsk-icon--battery-charging-80:before {
|
|
content: "\f12e"; }
|
|
|
|
.wsk-icon--battery-charging-90:before {
|
|
content: "\f12f"; }
|
|
|
|
.wsk-icon--battery-charging-full:before {
|
|
content: "\f130"; }
|
|
|
|
.wsk-icon--battery-full:before {
|
|
content: "\f131"; }
|
|
|
|
.wsk-icon--battery-std:before {
|
|
content: "\f132"; }
|
|
|
|
.wsk-icon--battery-unknown:before {
|
|
content: "\f133"; }
|
|
|
|
.wsk-icon--bluetooth:before {
|
|
content: "\f134"; }
|
|
|
|
.wsk-icon--bluetooth-connected:before {
|
|
content: "\f135"; }
|
|
|
|
.wsk-icon--bluetooth-disabled:before {
|
|
content: "\f136"; }
|
|
|
|
.wsk-icon--bluetooth-searching:before {
|
|
content: "\f137"; }
|
|
|
|
.wsk-icon--brightness-auto:before {
|
|
content: "\f138"; }
|
|
|
|
.wsk-icon--brightness-high:before {
|
|
content: "\f139"; }
|
|
|
|
.wsk-icon--brightness-low:before {
|
|
content: "\f13a"; }
|
|
|
|
.wsk-icon--brightness-medium:before {
|
|
content: "\f13b"; }
|
|
|
|
.wsk-icon--data-usage:before {
|
|
content: "\f13c"; }
|
|
|
|
.wsk-icon--developer-mode:before {
|
|
content: "\f13d"; }
|
|
|
|
.wsk-icon--devices:before {
|
|
content: "\f13e"; }
|
|
|
|
.wsk-icon--dvr:before {
|
|
content: "\f13f"; }
|
|
|
|
.wsk-icon--gps-fixed:before {
|
|
content: "\f140"; }
|
|
|
|
.wsk-icon--gps-not-fixed:before {
|
|
content: "\f141"; }
|
|
|
|
.wsk-icon--gps-off:before {
|
|
content: "\f142"; }
|
|
|
|
.wsk-icon--location-disabled:before {
|
|
content: "\f143"; }
|
|
|
|
.wsk-icon--location-searching:before {
|
|
content: "\f144"; }
|
|
|
|
.wsk-icon--multitrack-audio:before {
|
|
content: "\f145"; }
|
|
|
|
.wsk-icon--network-cell:before {
|
|
content: "\f146"; }
|
|
|
|
.wsk-icon--network-wifi:before {
|
|
content: "\f147"; }
|
|
|
|
.wsk-icon--nfc:before {
|
|
content: "\f148"; }
|
|
|
|
.wsk-icon--now-wallpaper:before {
|
|
content: "\f149"; }
|
|
|
|
.wsk-icon--now-widgets:before {
|
|
content: "\f14a"; }
|
|
|
|
.wsk-icon--screen-lock-landscape:before {
|
|
content: "\f14b"; }
|
|
|
|
.wsk-icon--screen-lock-portrait:before {
|
|
content: "\f14c"; }
|
|
|
|
.wsk-icon--screen-lock-rotation:before {
|
|
content: "\f14d"; }
|
|
|
|
.wsk-icon--screen-rotation:before {
|
|
content: "\f14e"; }
|
|
|
|
.wsk-icon--sd-storage:before {
|
|
content: "\f14f"; }
|
|
|
|
.wsk-icon--settings-system-daydream:before {
|
|
content: "\f150"; }
|
|
|
|
.wsk-icon--signal-cellular-0-bar:before {
|
|
content: "\f151"; }
|
|
|
|
.wsk-icon--signal-cellular-1-bar:before {
|
|
content: "\f152"; }
|
|
|
|
.wsk-icon--signal-cellular-2-bar:before {
|
|
content: "\f153"; }
|
|
|
|
.wsk-icon--signal-cellular-3-bar:before {
|
|
content: "\f154"; }
|
|
|
|
.wsk-icon--signal-cellular-4-bar:before {
|
|
content: "\f155"; }
|
|
|
|
.wsk-icon--signal-cellular-connected-no-internet-0-bar:before {
|
|
content: "\f156"; }
|
|
|
|
.wsk-icon--signal-cellular-connected-no-internet-1-bar:before {
|
|
content: "\f157"; }
|
|
|
|
.wsk-icon--signal-cellular-connected-no-internet-2-bar:before {
|
|
content: "\f158"; }
|
|
|
|
.wsk-icon--signal-cellular-connected-no-internet-3-bar:before {
|
|
content: "\f159"; }
|
|
|
|
.wsk-icon--signal-cellular-connected-no-internet-4-bar:before {
|
|
content: "\f15a"; }
|
|
|
|
.wsk-icon--signal-cellular-no-sim:before {
|
|
content: "\f15b"; }
|
|
|
|
.wsk-icon--signal-cellular-null:before {
|
|
content: "\f15c"; }
|
|
|
|
.wsk-icon--signal-cellular-off:before {
|
|
content: "\f15d"; }
|
|
|
|
.wsk-icon--signal-wifi-0-bar:before {
|
|
content: "\f15e"; }
|
|
|
|
.wsk-icon--signal-wifi-1-bar:before {
|
|
content: "\f15f"; }
|
|
|
|
.wsk-icon--signal-wifi-2-bar:before {
|
|
content: "\f160"; }
|
|
|
|
.wsk-icon--signal-wifi-3-bar:before {
|
|
content: "\f161"; }
|
|
|
|
.wsk-icon--signal-wifi-4-bar:before {
|
|
content: "\f162"; }
|
|
|
|
.wsk-icon--signal-wifi-off:before {
|
|
content: "\f163"; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-1-bar:before {
|
|
content: "\f15f"; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-2-bar:before {
|
|
content: "\f160"; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-3-bar:before {
|
|
content: "\f161"; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-4-bar:before {
|
|
content: "\f162"; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-connected-no-internet:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-connected-no-internet-1:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-connected-no-internet-2:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-connected-no-internet-3:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-connected-no-internet-4:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-not-connected:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-null:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--storage:before {
|
|
content: "\f164"; }
|
|
|
|
.wsk-icon--usb:before {
|
|
content: "\f165"; }
|
|
|
|
.wsk-icon--wifi-lock:before {
|
|
content: "\f166"; }
|
|
|
|
.wsk-icon--wifi-tethering:before {
|
|
content: "\f167"; }
|
|
|
|
.wsk-icon--attach-file:before {
|
|
content: "\f168"; }
|
|
|
|
.wsk-icon--attach-money:before {
|
|
content: "\f169"; }
|
|
|
|
.wsk-icon--border-all:before {
|
|
content: "\f16a"; }
|
|
|
|
.wsk-icon--border-bottom:before {
|
|
content: "\f16b"; }
|
|
|
|
.wsk-icon--border-clear:before {
|
|
content: "\f16c"; }
|
|
|
|
.wsk-icon--border-color:before {
|
|
content: "\f16d"; }
|
|
|
|
.wsk-icon--border-horizontal:before {
|
|
content: "\f16e"; }
|
|
|
|
.wsk-icon--border-inner:before {
|
|
content: "\f16f"; }
|
|
|
|
.wsk-icon--border-left:before {
|
|
content: "\f170"; }
|
|
|
|
.wsk-icon--border-outer:before {
|
|
content: "\f171"; }
|
|
|
|
.wsk-icon--border-right:before {
|
|
content: "\f172"; }
|
|
|
|
.wsk-icon--border-style:before {
|
|
content: "\f173"; }
|
|
|
|
.wsk-icon--border-top:before {
|
|
content: "\f174"; }
|
|
|
|
.wsk-icon--border-vertical:before {
|
|
content: "\f175"; }
|
|
|
|
.wsk-icon--format-align-center:before {
|
|
content: "\f176"; }
|
|
|
|
.wsk-icon--format-align-justify:before {
|
|
content: "\f177"; }
|
|
|
|
.wsk-icon--format-align-left:before {
|
|
content: "\f178"; }
|
|
|
|
.wsk-icon--format-align-right:before {
|
|
content: "\f179"; }
|
|
|
|
.wsk-icon--format-bold:before {
|
|
content: "\f17a"; }
|
|
|
|
.wsk-icon--format-clear:before {
|
|
content: "\f17b"; }
|
|
|
|
.wsk-icon--format-color-fill:before {
|
|
content: "\f17c"; }
|
|
|
|
.wsk-icon--format-color-reset:before {
|
|
content: "\f17d"; }
|
|
|
|
.wsk-icon--format-color-text:before {
|
|
content: "\f17e"; }
|
|
|
|
.wsk-icon--format-indent-decrease:before {
|
|
content: "\f17f"; }
|
|
|
|
.wsk-icon--format-indent-increase:before {
|
|
content: "\f180"; }
|
|
|
|
.wsk-icon--format-italic:before {
|
|
content: "\f181"; }
|
|
|
|
.wsk-icon--format-line-spacing:before {
|
|
content: "\f182"; }
|
|
|
|
.wsk-icon--format-list-bulleted:before {
|
|
content: "\f183"; }
|
|
|
|
.wsk-icon--format-list-numbered:before {
|
|
content: "\f184"; }
|
|
|
|
.wsk-icon--format-paint:before {
|
|
content: "\f185"; }
|
|
|
|
.wsk-icon--format-quote:before {
|
|
content: "\f186"; }
|
|
|
|
.wsk-icon--format-size:before {
|
|
content: "\f187"; }
|
|
|
|
.wsk-icon--format-strikethrough:before {
|
|
content: "\f188"; }
|
|
|
|
.wsk-icon--format-textdirection-l-to-r:before {
|
|
content: "\f189"; }
|
|
|
|
.wsk-icon--format-textdirection-r-to-l:before {
|
|
content: "\f18a"; }
|
|
|
|
.wsk-icon--format-underline:before {
|
|
content: "\f18b"; }
|
|
|
|
.wsk-icon--functions:before {
|
|
content: "\f18c"; }
|
|
|
|
.wsk-icon--insert-chart:before {
|
|
content: "\f18d"; }
|
|
|
|
.wsk-icon--insert-comment:before {
|
|
content: "\f18e"; }
|
|
|
|
.wsk-icon--insert-drive-file:before {
|
|
content: "\f18f"; }
|
|
|
|
.wsk-icon--insert-emoticon:before {
|
|
content: "\f190"; }
|
|
|
|
.wsk-icon--insert-invitation:before {
|
|
content: "\f191"; }
|
|
|
|
.wsk-icon--insert-link:before {
|
|
content: "\f192"; }
|
|
|
|
.wsk-icon--insert-photo:before {
|
|
content: "\f193"; }
|
|
|
|
.wsk-icon--merge-type:before {
|
|
content: "\f194"; }
|
|
|
|
.wsk-icon--mode-comment:before {
|
|
content: "\f195"; }
|
|
|
|
.wsk-icon--mode-edit:before {
|
|
content: "\f196"; }
|
|
|
|
.wsk-icon--publish:before {
|
|
content: "\f197"; }
|
|
|
|
.wsk-icon--vertical-align-bottom:before {
|
|
content: "\f198"; }
|
|
|
|
.wsk-icon--vertical-align-center:before {
|
|
content: "\f199"; }
|
|
|
|
.wsk-icon--vertical-align-top:before {
|
|
content: "\f19a"; }
|
|
|
|
.wsk-icon--wrap-text:before {
|
|
content: "\f19b"; }
|
|
|
|
.wsk-icon--attachment:before {
|
|
content: "\f19c"; }
|
|
|
|
.wsk-icon--cloud:before {
|
|
content: "\f19d"; }
|
|
|
|
.wsk-icon--cloud-circle:before {
|
|
content: "\f19e"; }
|
|
|
|
.wsk-icon--cloud-done:before {
|
|
content: "\f19f"; }
|
|
|
|
.wsk-icon--cloud-download:before {
|
|
content: "\f1a0"; }
|
|
|
|
.wsk-icon--cloud-off:before {
|
|
content: "\f1a1"; }
|
|
|
|
.wsk-icon--cloud-queue:before {
|
|
content: "\f1a2"; }
|
|
|
|
.wsk-icon--cloud-upload:before {
|
|
content: "\f1a3"; }
|
|
|
|
.wsk-icon--file-download:before {
|
|
content: "\f1a4"; }
|
|
|
|
.wsk-icon--file-upload:before {
|
|
content: "\f1a5"; }
|
|
|
|
.wsk-icon--folder:before {
|
|
content: "\f1a6"; }
|
|
|
|
.wsk-icon--folder-open:before {
|
|
content: "\f1a7"; }
|
|
|
|
.wsk-icon--folder-shared:before {
|
|
content: "\f1a8"; }
|
|
|
|
.wsk-icon--cast:before {
|
|
content: "\f1a9"; }
|
|
|
|
.wsk-icon--cast-connected:before {
|
|
content: "\f1aa"; }
|
|
|
|
.wsk-icon--computer:before {
|
|
content: "\f1ab"; }
|
|
|
|
.wsk-icon--desktop-mac:before {
|
|
content: "\f1ac"; }
|
|
|
|
.wsk-icon--desktop-windows:before {
|
|
content: "\f1ad"; }
|
|
|
|
.wsk-icon--dock:before {
|
|
content: "\f1ae"; }
|
|
|
|
.wsk-icon--gamepad:before {
|
|
content: "\f1af"; }
|
|
|
|
.wsk-icon--headset:before {
|
|
content: "\f1b0"; }
|
|
|
|
.wsk-icon--headset-mic:before {
|
|
content: "\f1b1"; }
|
|
|
|
.wsk-icon--keyboard:before {
|
|
content: "\f1b2"; }
|
|
|
|
.wsk-icon--keyboard-alt:before {
|
|
content: "\f1b3"; }
|
|
|
|
.wsk-icon--keyboard-arrow-down:before {
|
|
content: "\f1b4"; }
|
|
|
|
.wsk-icon--keyboard-arrow-left:before {
|
|
content: "\f1b5"; }
|
|
|
|
.wsk-icon--keyboard-arrow-right:before {
|
|
content: "\f1b6"; }
|
|
|
|
.wsk-icon--keyboard-arrow-up:before {
|
|
content: "\f1b7"; }
|
|
|
|
.wsk-icon--keyboard-backspace:before {
|
|
content: "\f1b8"; }
|
|
|
|
.wsk-icon--keyboard-capslock:before {
|
|
content: "\f1b9"; }
|
|
|
|
.wsk-icon--keyboard-control:before {
|
|
content: "\f1ba"; }
|
|
|
|
.wsk-icon--keyboard-hide:before {
|
|
content: "\f1bb"; }
|
|
|
|
.wsk-icon--keyboard-return:before {
|
|
content: "\f1bc"; }
|
|
|
|
.wsk-icon--keyboard-tab:before {
|
|
content: "\f1bd"; }
|
|
|
|
.wsk-icon--keyboard-voice:before {
|
|
content: "\f1be"; }
|
|
|
|
.wsk-icon--laptop:before {
|
|
content: "\f1bf"; }
|
|
|
|
.wsk-icon--laptop-chromebook:before {
|
|
content: "\f1c0"; }
|
|
|
|
.wsk-icon--laptop-mac:before {
|
|
content: "\f1c1"; }
|
|
|
|
.wsk-icon--laptop-windows:before {
|
|
content: "\f1c2"; }
|
|
|
|
.wsk-icon--memory:before {
|
|
content: "\f1c3"; }
|
|
|
|
.wsk-icon--mouse:before {
|
|
content: "\f1c4"; }
|
|
|
|
.wsk-icon--phone-android:before {
|
|
content: "\f1c5"; }
|
|
|
|
.wsk-icon--phone-iphone:before {
|
|
content: "\f1c6"; }
|
|
|
|
.wsk-icon--phonelink:before {
|
|
content: "\f1c7"; }
|
|
|
|
.wsk-icon--phonelink-off:before {
|
|
content: "\f1c8"; }
|
|
|
|
.wsk-icon--security:before {
|
|
content: "\f1c9"; }
|
|
|
|
.wsk-icon--sim-card:before {
|
|
content: "\f1ca"; }
|
|
|
|
.wsk-icon--smartphone:before {
|
|
content: "\f1cb"; }
|
|
|
|
.wsk-icon--speaker:before {
|
|
content: "\f1cc"; }
|
|
|
|
.wsk-icon--tablet:before {
|
|
content: "\f1cd"; }
|
|
|
|
.wsk-icon--tablet-android:before {
|
|
content: "\f1ce"; }
|
|
|
|
.wsk-icon--tablet-mac:before {
|
|
content: "\f1cf"; }
|
|
|
|
.wsk-icon--tv:before {
|
|
content: "\f1d0"; }
|
|
|
|
.wsk-icon--watch:before {
|
|
content: "\f1d1"; }
|
|
|
|
.wsk-icon--add-to-photos:before {
|
|
content: "\f1d2"; }
|
|
|
|
.wsk-icon--adjust:before {
|
|
content: "\f1d3"; }
|
|
|
|
.wsk-icon--assistant-photo:before {
|
|
content: "\f1d4"; }
|
|
|
|
.wsk-icon--audiotrack:before {
|
|
content: "\f1d5"; }
|
|
|
|
.wsk-icon--blur-circular:before {
|
|
content: "\f1d6"; }
|
|
|
|
.wsk-icon--blur-linear:before {
|
|
content: "\f1d7"; }
|
|
|
|
.wsk-icon--blur-off:before {
|
|
content: "\f1d8"; }
|
|
|
|
.wsk-icon--blur-on:before {
|
|
content: "\f1d9"; }
|
|
|
|
.wsk-icon--brightness-1:before {
|
|
content: "\f1da"; }
|
|
|
|
.wsk-icon--brightness-2:before {
|
|
content: "\f1db"; }
|
|
|
|
.wsk-icon--brightness-3:before {
|
|
content: "\f1dc"; }
|
|
|
|
.wsk-icon--brightness-4:before {
|
|
content: "\f1dd"; }
|
|
|
|
.wsk-icon--brightness-5:before {
|
|
content: "\f1de"; }
|
|
|
|
.wsk-icon--brightness-6:before {
|
|
content: "\f1df"; }
|
|
|
|
.wsk-icon--brightness-7:before {
|
|
content: "\f1e0"; }
|
|
|
|
.wsk-icon--brush:before {
|
|
content: "\f1e1"; }
|
|
|
|
.wsk-icon--camera:before {
|
|
content: "\f1e2"; }
|
|
|
|
.wsk-icon--camera-alt:before {
|
|
content: "\f1e3"; }
|
|
|
|
.wsk-icon--camera-front:before {
|
|
content: "\f1e4"; }
|
|
|
|
.wsk-icon--camera-rear:before {
|
|
content: "\f1e5"; }
|
|
|
|
.wsk-icon--camera-roll:before {
|
|
content: "\f1e6"; }
|
|
|
|
.wsk-icon--center-focus-strong:before {
|
|
content: "\f1e7"; }
|
|
|
|
.wsk-icon--center-focus-weak:before {
|
|
content: "\f1e8"; }
|
|
|
|
.wsk-icon--collections:before {
|
|
content: "\f1e9"; }
|
|
|
|
.wsk-icon--colorize:before {
|
|
content: "\f1ea"; }
|
|
|
|
.wsk-icon--color-lens:before {
|
|
content: "\f1eb"; }
|
|
|
|
.wsk-icon--compare:before {
|
|
content: "\f1ec"; }
|
|
|
|
.wsk-icon--control-point:before {
|
|
content: "\f1ed"; }
|
|
|
|
.wsk-icon--control-point-duplicate:before {
|
|
content: "\f1ee"; }
|
|
|
|
.wsk-icon--crop:before {
|
|
content: "\f1ef"; }
|
|
|
|
.wsk-icon--crop-3-2:before {
|
|
content: "\f1f0"; }
|
|
|
|
.wsk-icon--crop-5-4:before {
|
|
content: "\f1f1"; }
|
|
|
|
.wsk-icon--crop-7-5:before {
|
|
content: "\f1f2"; }
|
|
|
|
.wsk-icon--crop-16-9:before {
|
|
content: "\f1f3"; }
|
|
|
|
.wsk-icon--crop-din:before {
|
|
content: "\f1f4"; }
|
|
|
|
.wsk-icon--crop-free:before {
|
|
content: "\f1f5"; }
|
|
|
|
.wsk-icon--crop-landscape:before {
|
|
content: "\f1f6"; }
|
|
|
|
.wsk-icon--crop-original:before {
|
|
content: "\f1f7"; }
|
|
|
|
.wsk-icon--crop-portrait:before {
|
|
content: "\f1f8"; }
|
|
|
|
.wsk-icon--crop-square:before {
|
|
content: "\f1f9"; }
|
|
|
|
.wsk-icon--dehaze:before {
|
|
content: "\f1fa"; }
|
|
|
|
.wsk-icon--details:before {
|
|
content: "\f1fb"; }
|
|
|
|
.wsk-icon--edit:before {
|
|
content: "\f1fc"; }
|
|
|
|
.wsk-icon--exposure:before {
|
|
content: "\f1fd"; }
|
|
|
|
.wsk-icon--exposure-minus-1:before {
|
|
content: "\f1fe"; }
|
|
|
|
.wsk-icon--exposure-minus-2:before {
|
|
content: "\f1ff"; }
|
|
|
|
.wsk-icon--exposure-zero:before {
|
|
content: "\f200"; }
|
|
|
|
.wsk-icon--exposure-plus-1:before {
|
|
content: "\f201"; }
|
|
|
|
.wsk-icon--exposure-plus-2:before {
|
|
content: "\f202"; }
|
|
|
|
.wsk-icon--filter:before {
|
|
content: "\f203"; }
|
|
|
|
.wsk-icon--filter-1:before {
|
|
content: "\f204"; }
|
|
|
|
.wsk-icon--filter-2:before {
|
|
content: "\f205"; }
|
|
|
|
.wsk-icon--filter-3:before {
|
|
content: "\f206"; }
|
|
|
|
.wsk-icon--filter-4:before {
|
|
content: "\f207"; }
|
|
|
|
.wsk-icon--filter-5:before {
|
|
content: "\f208"; }
|
|
|
|
.wsk-icon--filter-6:before {
|
|
content: "\f209"; }
|
|
|
|
.wsk-icon--filter-7:before {
|
|
content: "\f20a"; }
|
|
|
|
.wsk-icon--filter-8:before {
|
|
content: "\f20b"; }
|
|
|
|
.wsk-icon--filter-9:before {
|
|
content: "\f20c"; }
|
|
|
|
.wsk-icon--filter-9-plus:before {
|
|
content: "\f20d"; }
|
|
|
|
.wsk-icon--filter-b-and-w:before {
|
|
content: "\f20e"; }
|
|
|
|
.wsk-icon--filter-center-focus:before {
|
|
content: "\f20f"; }
|
|
|
|
.wsk-icon--filter-drama:before {
|
|
content: "\f210"; }
|
|
|
|
.wsk-icon--filter-frames:before {
|
|
content: "\f211"; }
|
|
|
|
.wsk-icon--filter-hdr:before {
|
|
content: "\f212"; }
|
|
|
|
.wsk-icon--filter-none:before {
|
|
content: "\f213"; }
|
|
|
|
.wsk-icon--filter-tilt-shift:before {
|
|
content: "\f214"; }
|
|
|
|
.wsk-icon--filter-vintage:before {
|
|
content: "\f215"; }
|
|
|
|
.wsk-icon--flare:before {
|
|
content: "\f216"; }
|
|
|
|
.wsk-icon--flash-auto:before {
|
|
content: "\f217"; }
|
|
|
|
.wsk-icon--flash-off:before {
|
|
content: "\f218"; }
|
|
|
|
.wsk-icon--flash-on:before {
|
|
content: "\f219"; }
|
|
|
|
.wsk-icon--flip:before {
|
|
content: "\f21a"; }
|
|
|
|
.wsk-icon--gradient:before {
|
|
content: "\f21b"; }
|
|
|
|
.wsk-icon--grain:before {
|
|
content: "\f21c"; }
|
|
|
|
.wsk-icon--grid-off:before {
|
|
content: "\f21d"; }
|
|
|
|
.wsk-icon--grid-on:before {
|
|
content: "\f21e"; }
|
|
|
|
.wsk-icon--hdr-off:before {
|
|
content: "\f21f"; }
|
|
|
|
.wsk-icon--hdr-on:before {
|
|
content: "\f220"; }
|
|
|
|
.wsk-icon--hdr-strong:before {
|
|
content: "\f221"; }
|
|
|
|
.wsk-icon--hdr-weak:before {
|
|
content: "\f222"; }
|
|
|
|
.wsk-icon--healing:before {
|
|
content: "\f223"; }
|
|
|
|
.wsk-icon--image:before {
|
|
content: "\f224"; }
|
|
|
|
.wsk-icon--image-aspect-ratio:before {
|
|
content: "\f225"; }
|
|
|
|
.wsk-icon--iso:before {
|
|
content: "\f226"; }
|
|
|
|
.wsk-icon--landscape:before {
|
|
content: "\f227"; }
|
|
|
|
.wsk-icon--leak-add:before {
|
|
content: "\f228"; }
|
|
|
|
.wsk-icon--leak-remove:before {
|
|
content: "\f229"; }
|
|
|
|
.wsk-icon--lens:before {
|
|
content: "\f22a"; }
|
|
|
|
.wsk-icon--looks:before {
|
|
content: "\f22b"; }
|
|
|
|
.wsk-icon--looks-1:before {
|
|
content: "\f22c"; }
|
|
|
|
.wsk-icon--looks-2:before {
|
|
content: "\f22d"; }
|
|
|
|
.wsk-icon--looks-3:before {
|
|
content: "\f22e"; }
|
|
|
|
.wsk-icon--looks-4:before {
|
|
content: "\f22f"; }
|
|
|
|
.wsk-icon--looks-5:before {
|
|
content: "\f230"; }
|
|
|
|
.wsk-icon--looks-6:before {
|
|
content: "\f231"; }
|
|
|
|
.wsk-icon--looks-one:before {
|
|
content: "\f22c"; }
|
|
|
|
.wsk-icon--looks-two:before {
|
|
content: "\f22d"; }
|
|
|
|
.wsk-icon--loupe:before {
|
|
content: "\f232"; }
|
|
|
|
.wsk-icon--movie-creation:before {
|
|
content: "\f233"; }
|
|
|
|
.wsk-icon--nature:before {
|
|
content: "\f234"; }
|
|
|
|
.wsk-icon--nature-people:before {
|
|
content: "\f235"; }
|
|
|
|
.wsk-icon--navigate-before:before {
|
|
content: "\f236"; }
|
|
|
|
.wsk-icon--navigate-next:before {
|
|
content: "\f237"; }
|
|
|
|
.wsk-icon--palette:before {
|
|
content: "\f238"; }
|
|
|
|
.wsk-icon--panorama:before {
|
|
content: "\f239"; }
|
|
|
|
.wsk-icon--panorama-fisheye:before {
|
|
content: "\f23a"; }
|
|
|
|
.wsk-icon--panorama-horizontal:before {
|
|
content: "\f23b"; }
|
|
|
|
.wsk-icon--panorama-vertical:before {
|
|
content: "\f23c"; }
|
|
|
|
.wsk-icon--panorama-wide-angle:before {
|
|
content: "\f23d"; }
|
|
|
|
.wsk-icon--photo:before {
|
|
content: "\f23e"; }
|
|
|
|
.wsk-icon--photo-album:before {
|
|
content: "\f23f"; }
|
|
|
|
.wsk-icon--photo-camera:before {
|
|
content: "\f240"; }
|
|
|
|
.wsk-icon--photo-library:before {
|
|
content: "\f241"; }
|
|
|
|
.wsk-icon--portrait:before {
|
|
content: "\f242"; }
|
|
|
|
.wsk-icon--remove-red-eye:before {
|
|
content: "\f243"; }
|
|
|
|
.wsk-icon--rotate-left:before {
|
|
content: "\f244"; }
|
|
|
|
.wsk-icon--rotate-right:before {
|
|
content: "\f245"; }
|
|
|
|
.wsk-icon--slideshow:before {
|
|
content: "\f246"; }
|
|
|
|
.wsk-icon--straighten:before {
|
|
content: "\f247"; }
|
|
|
|
.wsk-icon--style:before {
|
|
content: "\f248"; }
|
|
|
|
.wsk-icon--switch-camera:before {
|
|
content: "\f249"; }
|
|
|
|
.wsk-icon--switch-video:before {
|
|
content: "\f24a"; }
|
|
|
|
.wsk-icon--tag-faces:before {
|
|
content: "\f24b"; }
|
|
|
|
.wsk-icon--texture:before {
|
|
content: "\f24c"; }
|
|
|
|
.wsk-icon--timelapse:before {
|
|
content: "\f24d"; }
|
|
|
|
.wsk-icon--timer:before {
|
|
content: "\f24e"; }
|
|
|
|
.wsk-icon--timer-3:before {
|
|
content: "\f24f"; }
|
|
|
|
.wsk-icon--timer-10:before {
|
|
content: "\f250"; }
|
|
|
|
.wsk-icon--timer-auto:before {
|
|
content: "\f251"; }
|
|
|
|
.wsk-icon--timer-off:before {
|
|
content: "\f252"; }
|
|
|
|
.wsk-icon--tonality:before {
|
|
content: "\f253"; }
|
|
|
|
.wsk-icon--transform:before {
|
|
content: "\f254"; }
|
|
|
|
.wsk-icon--tune:before {
|
|
content: "\f255"; }
|
|
|
|
.wsk-icon--wb-auto:before {
|
|
content: "\f256"; }
|
|
|
|
.wsk-icon--wb-cloudy:before {
|
|
content: "\f257"; }
|
|
|
|
.wsk-icon--wb-incandescent:before {
|
|
content: "\f258"; }
|
|
|
|
.wsk-icon--wb-irradescent:before {
|
|
content: "\f259"; }
|
|
|
|
.wsk-icon--wb-sunny:before {
|
|
content: "\f25a"; }
|
|
|
|
.wsk-icon--beenhere:before {
|
|
content: "\f25b"; }
|
|
|
|
.wsk-icon--directions:before {
|
|
content: "\f25c"; }
|
|
|
|
.wsk-icon--directions-bike:before {
|
|
content: "\f25d"; }
|
|
|
|
.wsk-icon--directions-bus:before {
|
|
content: "\f25e"; }
|
|
|
|
.wsk-icon--directions-car:before {
|
|
content: "\f25f"; }
|
|
|
|
.wsk-icon--directions-ferry:before {
|
|
content: "\f260"; }
|
|
|
|
.wsk-icon--directions-subway:before {
|
|
content: "\f261"; }
|
|
|
|
.wsk-icon--directions-train:before {
|
|
content: "\f262"; }
|
|
|
|
.wsk-icon--directions-transit:before {
|
|
content: "\f263"; }
|
|
|
|
.wsk-icon--directions-walk:before {
|
|
content: "\f264"; }
|
|
|
|
.wsk-icon--flight:before {
|
|
content: "\f265"; }
|
|
|
|
.wsk-icon--hotel:before {
|
|
content: "\f266"; }
|
|
|
|
.wsk-icon--layers:before {
|
|
content: "\f267"; }
|
|
|
|
.wsk-icon--layers-clear:before {
|
|
content: "\f268"; }
|
|
|
|
.wsk-icon--local-airport:before {
|
|
content: "\f269"; }
|
|
|
|
.wsk-icon--local-atm:before {
|
|
content: "\f26a"; }
|
|
|
|
.wsk-icon--local-attraction:before {
|
|
content: "\f26b"; }
|
|
|
|
.wsk-icon--local-bar:before {
|
|
content: "\f26c"; }
|
|
|
|
.wsk-icon--local-cafe:before {
|
|
content: "\f26d"; }
|
|
|
|
.wsk-icon--local-car-wash:before {
|
|
content: "\f26e"; }
|
|
|
|
.wsk-icon--local-convenience-store:before {
|
|
content: "\f26f"; }
|
|
|
|
.wsk-icon--local-drink:before {
|
|
content: "\f270"; }
|
|
|
|
.wsk-icon--local-florist:before {
|
|
content: "\f271"; }
|
|
|
|
.wsk-icon--local-gas-station:before {
|
|
content: "\f272"; }
|
|
|
|
.wsk-icon--local-grocery-store:before {
|
|
content: "\f273"; }
|
|
|
|
.wsk-icon--local-hospital:before {
|
|
content: "\f274"; }
|
|
|
|
.wsk-icon--local-hotel:before {
|
|
content: "\f275"; }
|
|
|
|
.wsk-icon--local-laundry-service:before {
|
|
content: "\f276"; }
|
|
|
|
.wsk-icon--local-library:before {
|
|
content: "\f277"; }
|
|
|
|
.wsk-icon--local-mall:before {
|
|
content: "\f278"; }
|
|
|
|
.wsk-icon--local-movies:before {
|
|
content: "\f279"; }
|
|
|
|
.wsk-icon--local-offer:before {
|
|
content: "\f27a"; }
|
|
|
|
.wsk-icon--local-parking:before {
|
|
content: "\f27b"; }
|
|
|
|
.wsk-icon--local-pharmacy:before {
|
|
content: "\f27c"; }
|
|
|
|
.wsk-icon--local-phone:before {
|
|
content: "\f27d"; }
|
|
|
|
.wsk-icon--local-pizza:before {
|
|
content: "\f27e"; }
|
|
|
|
.wsk-icon--local-play:before {
|
|
content: "\f27f"; }
|
|
|
|
.wsk-icon--local-post-office:before {
|
|
content: "\f280"; }
|
|
|
|
.wsk-icon--local-print-shop:before {
|
|
content: "\f281"; }
|
|
|
|
.wsk-icon--local-restaurant:before {
|
|
content: "\f282"; }
|
|
|
|
.wsk-icon--local-see:before {
|
|
content: "\f283"; }
|
|
|
|
.wsk-icon--local-shipping:before {
|
|
content: "\f284"; }
|
|
|
|
.wsk-icon--local-taxi:before {
|
|
content: "\f285"; }
|
|
|
|
.wsk-icon--location-history:before {
|
|
content: "\f286"; }
|
|
|
|
.wsk-icon--map:before {
|
|
content: "\f287"; }
|
|
|
|
.wsk-icon--my-location:before {
|
|
content: "\f288"; }
|
|
|
|
.wsk-icon--navigation:before {
|
|
content: "\f289"; }
|
|
|
|
.wsk-icon--pin-drop:before {
|
|
content: "\f28a"; }
|
|
|
|
.wsk-icon--place:before {
|
|
content: "\f28b"; }
|
|
|
|
.wsk-icon--rate-review:before {
|
|
content: "\f28c"; }
|
|
|
|
.wsk-icon--restaurant-menu:before {
|
|
content: "\f28d"; }
|
|
|
|
.wsk-icon--satellite:before {
|
|
content: "\f28e"; }
|
|
|
|
.wsk-icon--store-mall-directory:before {
|
|
content: "\f28f"; }
|
|
|
|
.wsk-icon--terrain:before {
|
|
content: "\f290"; }
|
|
|
|
.wsk-icon--traffic:before {
|
|
content: "\f291"; }
|
|
|
|
.wsk-icon--apps:before {
|
|
content: "\f292"; }
|
|
|
|
.wsk-icon--cancel:before {
|
|
content: "\f293"; }
|
|
|
|
.wsk-icon--arrow-drop-down-circle:before {
|
|
content: "\f294"; }
|
|
|
|
.wsk-icon--arrow-drop-down:before {
|
|
content: "\f295"; }
|
|
|
|
.wsk-icon--arrow-drop-up:before {
|
|
content: "\f296"; }
|
|
|
|
.wsk-icon--arrow-back:before {
|
|
content: "\f297"; }
|
|
|
|
.wsk-icon--arrow-forward:before {
|
|
content: "\f298"; }
|
|
|
|
.wsk-icon--check:before {
|
|
content: "\f299"; }
|
|
|
|
.wsk-icon--close:before {
|
|
content: "\f29a"; }
|
|
|
|
.wsk-icon--chevron-left:before {
|
|
content: "\f29b"; }
|
|
|
|
.wsk-icon--chevron-right:before {
|
|
content: "\f29c"; }
|
|
|
|
.wsk-icon--expand-less:before {
|
|
content: "\f29d"; }
|
|
|
|
.wsk-icon--expand-more:before {
|
|
content: "\f29e"; }
|
|
|
|
.wsk-icon--fullscreen:before {
|
|
content: "\f29f"; }
|
|
|
|
.wsk-icon--fullscreen-exit:before {
|
|
content: "\f2a0"; }
|
|
|
|
.wsk-icon--menu:before {
|
|
content: "\f2a1"; }
|
|
|
|
.wsk-icon--more-horiz:before {
|
|
content: "\f2a2"; }
|
|
|
|
.wsk-icon--more-vert:before {
|
|
content: "\f2a3"; }
|
|
|
|
.wsk-icon--refresh:before {
|
|
content: "\f2a4"; }
|
|
|
|
.wsk-icon--unfold-less:before {
|
|
content: "\f2a5"; }
|
|
|
|
.wsk-icon--unfold-more:before {
|
|
content: "\f2a6"; }
|
|
|
|
.wsk-icon--adb:before {
|
|
content: "\f2a7"; }
|
|
|
|
.wsk-icon--bluetooth-audio:before {
|
|
content: "\f2a8"; }
|
|
|
|
.wsk-icon--disc-full:before {
|
|
content: "\f2a9"; }
|
|
|
|
.wsk-icon--dnd-forwardslash:before {
|
|
content: "\f2aa"; }
|
|
|
|
.wsk-icon--do-not-disturb:before {
|
|
content: "\f2ab"; }
|
|
|
|
.wsk-icon--drive-eta:before {
|
|
content: "\f2ac"; }
|
|
|
|
.wsk-icon--event-available:before {
|
|
content: "\f2ad"; }
|
|
|
|
.wsk-icon--event-busy:before {
|
|
content: "\f2ae"; }
|
|
|
|
.wsk-icon--event-note:before {
|
|
content: "\f2af"; }
|
|
|
|
.wsk-icon--folder-special:before {
|
|
content: "\f2b0"; }
|
|
|
|
.wsk-icon--mms:before {
|
|
content: "\f2b1"; }
|
|
|
|
.wsk-icon--more:before {
|
|
content: "\f2b2"; }
|
|
|
|
.wsk-icon--network-locked:before {
|
|
content: "\f2b3"; }
|
|
|
|
.wsk-icon--phone-bluetooth-speaker:before {
|
|
content: "\f2b4"; }
|
|
|
|
.wsk-icon--phone-forwarded:before {
|
|
content: "\f2b5"; }
|
|
|
|
.wsk-icon--phone-in-talk:before {
|
|
content: "\f2b6"; }
|
|
|
|
.wsk-icon--phone-locked:before {
|
|
content: "\f2b7"; }
|
|
|
|
.wsk-icon--phone-missed:before {
|
|
content: "\f2b8"; }
|
|
|
|
.wsk-icon--phone-paused:before {
|
|
content: "\f2b9"; }
|
|
|
|
.wsk-icon--play-download:before {
|
|
content: "\f2ba"; }
|
|
|
|
.wsk-icon--play-install:before {
|
|
content: "\f2bb"; }
|
|
|
|
.wsk-icon--sd-card:before {
|
|
content: "\f2bc"; }
|
|
|
|
.wsk-icon--sim-card-alert:before {
|
|
content: "\f2bd"; }
|
|
|
|
.wsk-icon--sms:before {
|
|
content: "\f2be"; }
|
|
|
|
.wsk-icon--sms-failed:before {
|
|
content: "\f2bf"; }
|
|
|
|
.wsk-icon--sync:before {
|
|
content: "\f2c0"; }
|
|
|
|
.wsk-icon--sync-disabled:before {
|
|
content: "\f2c1"; }
|
|
|
|
.wsk-icon--sync-problem:before {
|
|
content: "\f2c2"; }
|
|
|
|
.wsk-icon--system-update:before {
|
|
content: "\f2c3"; }
|
|
|
|
.wsk-icon--tap-and-play:before {
|
|
content: "\f2c4"; }
|
|
|
|
.wsk-icon--time-to-leave:before {
|
|
content: "\f2c5"; }
|
|
|
|
.wsk-icon--vibration:before {
|
|
content: "\f2c6"; }
|
|
|
|
.wsk-icon--voice-chat:before {
|
|
content: "\f2c7"; }
|
|
|
|
.wsk-icon--vpn-lock:before {
|
|
content: "\f2c8"; }
|
|
|
|
.wsk-icon--cake:before {
|
|
content: "\f2c9"; }
|
|
|
|
.wsk-icon--domain:before {
|
|
content: "\f2ca"; }
|
|
|
|
.wsk-icon--location-city:before {
|
|
content: "\f2cb"; }
|
|
|
|
.wsk-icon--mood:before {
|
|
content: "\f2cc"; }
|
|
|
|
.wsk-icon--notifications-none:before {
|
|
content: "\f2cd"; }
|
|
|
|
.wsk-icon--notifications:before {
|
|
content: "\f2ce"; }
|
|
|
|
.wsk-icon--notifications-off:before {
|
|
content: "\f2cf"; }
|
|
|
|
.wsk-icon--notifications-on:before {
|
|
content: "\f2d0"; }
|
|
|
|
.wsk-icon--notifications-paused:before {
|
|
content: "\f2d1"; }
|
|
|
|
.wsk-icon--pages:before {
|
|
content: "\f2d2"; }
|
|
|
|
.wsk-icon--party-mode:before {
|
|
content: "\f2d3"; }
|
|
|
|
.wsk-icon--group:before {
|
|
content: "\f2d4"; }
|
|
|
|
.wsk-icon--group-add:before {
|
|
content: "\f2d5"; }
|
|
|
|
.wsk-icon--people:before {
|
|
content: "\f2d6"; }
|
|
|
|
.wsk-icon--people-outline:before {
|
|
content: "\f2d7"; }
|
|
|
|
.wsk-icon--person:before {
|
|
content: "\f2d8"; }
|
|
|
|
.wsk-icon--person-add:before {
|
|
content: "\f2d9"; }
|
|
|
|
.wsk-icon--person-outline:before {
|
|
content: "\f2da"; }
|
|
|
|
.wsk-icon--plus-one:before {
|
|
content: "\f2db"; }
|
|
|
|
.wsk-icon--poll:before {
|
|
content: "\f2dc"; }
|
|
|
|
.wsk-icon--public:before {
|
|
content: "\f2dd"; }
|
|
|
|
.wsk-icon--school:before {
|
|
content: "\f2de"; }
|
|
|
|
.wsk-icon--share:before {
|
|
content: "\f2df"; }
|
|
|
|
.wsk-icon--whatshot:before {
|
|
content: "\f2e0"; }
|
|
|
|
.wsk-icon--check-box:before {
|
|
content: "\f2e1"; }
|
|
|
|
.wsk-icon--check-box-outline-blank:before {
|
|
content: "\f2e2"; }
|
|
|
|
.wsk-icon--radio-button-off:before {
|
|
content: "\f2e3"; }
|
|
|
|
.wsk-icon--radio-button-on:before {
|
|
content: "\f2e4"; }
|
|
|
|
.wsk-icon--star:before {
|
|
content: "\f2e5"; }
|
|
|
|
.wsk-icon--star-half:before {
|
|
content: "\f2e6"; }
|
|
|
|
.wsk-icon--star-outline:before {
|
|
content: "\f2e7"; }
|
|
|
|
/**************
|
|
*
|
|
* Sizes
|
|
*
|
|
*************/
|
|
.wsk-mega-footer {
|
|
padding: 32px 16px;
|
|
color: #A0A0A0;
|
|
background-color: #454545; }
|
|
|
|
.wsk-mega-footer--top-section:after, .wsk-mega-footer--middle-section:after {
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
margin-bottom: 16px;
|
|
border-color: #A0A0A0;
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
clear: both; }
|
|
|
|
.wsk-mega-footer--left-section {
|
|
margin-bottom: 16px; }
|
|
|
|
.wsk-mega-footer--right-section {
|
|
margin-bottom: 16px; }
|
|
|
|
.wsk-mega-footer--right-section a {
|
|
display: block;
|
|
margin-bottom: 16px;
|
|
color: inherit;
|
|
text-decoration: none; }
|
|
|
|
@media screen and (min-width: 760px) {
|
|
.wsk-mega-footer--left-section {
|
|
float: left; }
|
|
.wsk-mega-footer--right-section {
|
|
float: right; }
|
|
.wsk-mega-footer--right-section a {
|
|
display: inline-block;
|
|
margin-left: 16px;
|
|
line-height: 36px;
|
|
vertical-align: middle; } }
|
|
|
|
.wsk-mega-footer--social-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: #A0A0A0;
|
|
border: none; }
|
|
|
|
.wsk-mega-footer--drop-down-section {
|
|
display: block;
|
|
position: relative; }
|
|
|
|
@media screen and (min-width: 760px) {
|
|
.wsk-mega-footer--drop-down-section {
|
|
width: 33%; }
|
|
.wsk-mega-footer--drop-down-section:nth-child(1), .wsk-mega-footer--drop-down-section:nth-child(2) {
|
|
float: left; }
|
|
.wsk-mega-footer--drop-down-section:nth-child(3) {
|
|
float: right; }
|
|
.wsk-mega-footer--drop-down-section:nth-child(3):after {
|
|
clear: right; }
|
|
.wsk-mega-footer--drop-down-section:nth-child(4) {
|
|
float: right; }
|
|
.wsk-mega-footer--middle-section:after {
|
|
content: '';
|
|
display: block;
|
|
clear: both; } }
|
|
|
|
@media screen and (min-width: 1024px) {
|
|
.wsk-mega-footer--drop-down-section, .wsk-mega-footer--drop-down-section:nth-child(3), .wsk-mega-footer--drop-down-section:nth-child(4) {
|
|
width: 24%;
|
|
float: left; } }
|
|
|
|
.wsk-mega-footer--heading-checkbox {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 68px;
|
|
padding: 32px;
|
|
margin: 0;
|
|
margin-top: -16px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
opacity: 0; }
|
|
.wsk-mega-footer--heading-checkbox ~ .wsk-mega-footer--heading:after {
|
|
font-family: 'Material-Design-Iconic-Font';
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
content: "\f29d"; }
|
|
|
|
.wsk-mega-footer--heading-checkbox:checked ~ ul {
|
|
display: none; }
|
|
.wsk-mega-footer--heading-checkbox:checked ~ .wsk-mega-footer--heading:after {
|
|
font-family: 'Material-Design-Iconic-Font';
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
content: "\f29e"; }
|
|
|
|
.wsk-mega-footer--heading {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-right: 52px;
|
|
margin-bottom: 32px;
|
|
box-sizing: border-box;
|
|
font-size: 24px;
|
|
line-height: 36px;
|
|
font-weight: 300;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
color: #E2E2E2; }
|
|
|
|
.wsk-mega-footer--heading:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: block;
|
|
width: 36px;
|
|
height: 36px;
|
|
background-size: cover; }
|
|
|
|
.wsk-mega-footer--link-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
margin-bottom: 32px; }
|
|
|
|
.wsk-mega-footer--link-list li {
|
|
margin-bottom: 16px; }
|
|
|
|
.wsk-mega-footer--link-list a {
|
|
color: inherit;
|
|
text-decoration: none; }
|
|
|
|
@media screen and (min-width: 760px) {
|
|
.wsk-mega-footer--heading-checkbox {
|
|
display: none; }
|
|
.wsk-mega-footer--heading-checkbox ~ .wsk-mega-footer--heading:after {
|
|
background-image: none; }
|
|
.wsk-mega-footer--heading-checkbox:checked ~ ul {
|
|
display: block; }
|
|
.wsk-mega-footer--heading-checkbox:checked ~ .wsk-mega-footer--heading:after {
|
|
content: ''; } }
|
|
|
|
.wsk-mega-footer--bottom-section {
|
|
margin-bottom: 16px; }
|
|
|
|
.wsk-mega-footer--bottom-section:after {
|
|
content: '';
|
|
display: block;
|
|
clear: both; }
|
|
|
|
.wsk-logo {
|
|
margin-bottom: 16px;
|
|
font-size: 24px; }
|
|
|
|
.wsk-mega-footer--bottom-section .wsk-mega-footer--link-list li {
|
|
float: left;
|
|
margin-bottom: 0;
|
|
margin-right: 16px; }
|
|
|
|
@media screen and (min-width: 760px) {
|
|
.wsk-logo {
|
|
float: left;
|
|
margin-bottom: 0;
|
|
margin-right: 16px; } }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
/**************
|
|
*
|
|
* Sizes
|
|
*
|
|
*************/
|
|
.wsk-mini-footer {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-flex-flow: row wrap;
|
|
-ms-flex-flow: row wrap;
|
|
flex-flow: row wrap;
|
|
-webkit-box-pack: justify;
|
|
-webkit-justify-content: space-between;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
padding: 32px 16px;
|
|
color: #A0A0A0;
|
|
background-color: #454545; }
|
|
.wsk-mini-footer:after {
|
|
content: '';
|
|
display: block; }
|
|
.wsk-mini-footer .wsk-logo {
|
|
line-height: 36px; }
|
|
|
|
.wsk-mini-footer--link-list {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-flex-flow: row nowrap;
|
|
-ms-flex-flow: row nowrap;
|
|
flex-flow: row nowrap;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0; }
|
|
.wsk-mini-footer--link-list li {
|
|
margin-bottom: 0;
|
|
margin-right: 16px; }
|
|
@media screen and (min-width: 760px) {
|
|
.wsk-mini-footer--link-list li {
|
|
line-height: 36px; } }
|
|
.wsk-mini-footer--link-list a {
|
|
color: inherit;
|
|
text-decoration: none; }
|
|
|
|
.wsk-mini-footer--left-section {
|
|
display: inline-block;
|
|
-webkit-box-ordinal-group: 1;
|
|
-webkit-order: 0;
|
|
-ms-flex-order: 0;
|
|
order: 0; }
|
|
|
|
.wsk-mini-footer--right-section {
|
|
display: inline-block;
|
|
-webkit-box-ordinal-group: 2;
|
|
-webkit-order: 1;
|
|
-ms-flex-order: 1;
|
|
order: 1; }
|
|
|
|
.wsk-mini-footer--social-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: #A0A0A0;
|
|
border: none; }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
.wsk-shadow--z1 {
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
|
|
|
|
.wsk-shadow--z2 {
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.23); }
|
|
|
|
.wsk-shadow--z3 {
|
|
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.19), 0 6px 3px 0 rgba(0, 0, 0, 0.23); }
|
|
|
|
.wsk-shadow--z4 {
|
|
box-shadow: 0 14px 14px 0 rgba(0, 0, 0, 0.25), 0 10px 5px 0 rgba(0, 0, 0, 0.22); }
|
|
|
|
.wsk-shadow--z5 {
|
|
box-shadow: 0 19px 19px 0 rgba(0, 0, 0, 0.3), 0 15px 6px 0 rgba(0, 0, 0, 0.22); }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
.wsk-ripple {
|
|
background: rgb(33,33,33);
|
|
border-radius: 50%;
|
|
height: 50px;
|
|
left: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
width: 50px;
|
|
overflow: hidden; }
|
|
.wsk-ripple.is-animating {
|
|
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
|
|
transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1); }
|
|
|
|
.wsk-icon-toggle {
|
|
position: relative;
|
|
z-index: 1;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
height: 32px;
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
.wsk-icon-toggle__input {
|
|
line-height: 32px; }
|
|
.wsk-icon-toggle.is-upgraded .wsk-icon-toggle__input {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
opacity: 0;
|
|
-ms-appearance: none;
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
border: none; }
|
|
|
|
.wsk-icon-toggle__label {
|
|
display: inline-block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
height: 32px;
|
|
width: 32px;
|
|
min-width: 32px;
|
|
line-height: 32px;
|
|
color: rgb(97,97,97);
|
|
border-radius: 50%;
|
|
font-size: 24px;
|
|
padding: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
text-align: center;
|
|
background-color: transparent;
|
|
will-change: background-color;
|
|
-webkit-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.wsk-icon-toggle.is-checked .wsk-icon-toggle__label {
|
|
color: rgb(63,81,181); }
|
|
.wsk-icon-toggle.is-disabled .wsk-icon-toggle__label {
|
|
color: rgba(0, 0, 0, 0.26);
|
|
cursor: auto;
|
|
-webkit-transition: none;
|
|
transition: none; }
|
|
.wsk-icon-toggle.is-focused .wsk-icon-toggle__label {
|
|
background-color: rgba(0, 0, 0, 0.12); }
|
|
.wsk-icon-toggle.is-focused.is-checked .wsk-icon-toggle__label {
|
|
background-color: rgba(63,81,181, 0.26); }
|
|
|
|
.wsk-icon-toggle__ripple-container {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: -2px;
|
|
left: -2px;
|
|
box-sizing: border-box;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
-webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
|
|
.wsk-icon-toggle__ripple-container .wsk-ripple {
|
|
background: rgb(97,97,97); }
|
|
.wsk-icon-toggle.is-disabled .wsk-icon-toggle__ripple-container {
|
|
cursor: auto; }
|
|
.wsk-icon-toggle.is-disabled .wsk-icon-toggle__ripple-container .wsk-ripple {
|
|
background: transparent; }
|
|
|
|
/* We're splitting fonts into "preferred" and "performance" in order to optimize
|
|
page loading. For important text, such as the body, we want it to load
|
|
immediately and not wait for the web font load, whereas for other sections,
|
|
such as headers and titles, we're OK with things taking a bit longer to load.
|
|
We do have some optional classes and parameters in the mixins, in case you
|
|
definitely want to make sure you're using the preferred font and don't mind
|
|
the performance hit.
|
|
We should be able to improve on this once CSS Font Loading L3 becomes more
|
|
widely available.
|
|
*/
|
|
html, body {
|
|
font-family: 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 20px; }
|
|
|
|
h1, h2, h3, h4, h5, h6, p {
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
/**
|
|
* Styles for HTML elements
|
|
*/
|
|
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
opacity: 0.54;
|
|
font-size: 0.6em; }
|
|
|
|
h1 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em; }
|
|
|
|
h2 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px; }
|
|
|
|
h3 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px; }
|
|
|
|
h4 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
h5 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em; }
|
|
|
|
h6 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
p {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
margin: 0 0 16px 0; }
|
|
|
|
a {
|
|
font-weight: bold; }
|
|
|
|
blockquote {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
blockquote:before {
|
|
content: '“';
|
|
opacity: 0.54; }
|
|
blockquote:after {
|
|
content: '”';
|
|
opacity: 0.54; }
|
|
|
|
mark {
|
|
background-color: #f4ff81; }
|
|
|
|
dt {
|
|
font-weight: 700; }
|
|
|
|
/**
|
|
* Class Name Styles
|
|
*/
|
|
.wsk-typography--display-4 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 112px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em; }
|
|
|
|
.wsk-typography--display-4-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 112px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-3 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em; }
|
|
|
|
.wsk-typography--display-3-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-2 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px; }
|
|
|
|
.wsk-typography--display-2-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-1 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px; }
|
|
|
|
.wsk-typography--display-1-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--headline {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
.wsk-typography--headline-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--title {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em; }
|
|
|
|
.wsk-typography--title-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--subhead {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--subhead-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-2 {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-2-color-contrast {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-1 {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-1-color-contrast {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-2-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-2-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-1-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-1-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--caption {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
|
|
.wsk-typography--caption-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
|
|
.wsk-typography--caption-color-contrast {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--caption-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--menu {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--menu-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--button {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--button-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--text-left {
|
|
text-align: left; }
|
|
|
|
.wsk-typography--text-right {
|
|
text-align: right; }
|
|
|
|
.wsk-typography--text-center {
|
|
text-align: center; }
|
|
|
|
.wsk-typography--text-justify {
|
|
text-align: justify; }
|
|
|
|
.wsk-typography--text-nowrap {
|
|
white-space: nowrap; }
|
|
|
|
.wsk-typography--text-lowercase {
|
|
text-transform: lowercase; }
|
|
|
|
.wsk-typography--text-uppercase {
|
|
text-transform: uppercase; }
|
|
|
|
.wsk-typography--text-capitalize {
|
|
text-transform: capitalize; }
|
|
|
|
.wsk-typography--table-striped > tbody > tr:nth-child(odd) > td, .wsk-typography--table-striped > tbody > tr:nth-child(odd) > th {
|
|
background-color: #f9f9f9; }
|
|
|
|
.wsk-typography--table-striped > tbody > tr:nth-child(odd) > td, .wsk-typography--table-striped > tbody > tr:nth-child(odd) > th {
|
|
background-color: #f9f9f9; }
|
|
|
|
.wsk-typography--font-thin {
|
|
font-weight: 200 !important; }
|
|
|
|
.wsk-typography--font-light {
|
|
font-weight: 300 !important; }
|
|
|
|
.wsk-typography--font-regular {
|
|
font-weight: 400 !important; }
|
|
|
|
.wsk-typography--font-medium {
|
|
font-weight: 500 !important; }
|
|
|
|
.wsk-typography--font-bold {
|
|
font-weight: 700 !important; }
|
|
|
|
.wsk-typography--font-black {
|
|
font-weight: 900 !important; }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
.wsk-shadow--z1 {
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
|
|
|
|
.wsk-shadow--z2 {
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.23); }
|
|
|
|
.wsk-shadow--z3 {
|
|
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.19), 0 6px 3px 0 rgba(0, 0, 0, 0.23); }
|
|
|
|
.wsk-shadow--z4 {
|
|
box-shadow: 0 14px 14px 0 rgba(0, 0, 0, 0.25), 0 10px 5px 0 rgba(0, 0, 0, 0.22); }
|
|
|
|
.wsk-shadow--z5 {
|
|
box-shadow: 0 19px 19px 0 rgba(0, 0, 0, 0.3), 0 15px 6px 0 rgba(0, 0, 0, 0.22); }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
.wsk-ripple {
|
|
background: rgb(33,33,33);
|
|
border-radius: 50%;
|
|
height: 50px;
|
|
left: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
width: 50px;
|
|
overflow: hidden; }
|
|
.wsk-ripple.is-animating {
|
|
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
|
|
transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1); }
|
|
|
|
.wsk-menu__container {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
position: absolute;
|
|
overflow: visible;
|
|
height: 0;
|
|
width: 0; }
|
|
|
|
.wsk-menu__outline {
|
|
display: block;
|
|
background: #fff;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 2px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
-webkit-transform: scale(0);
|
|
-ms-transform: scale(0);
|
|
transform: scale(0);
|
|
-webkit-transform-origin: 0 0;
|
|
-ms-transform-origin: 0 0;
|
|
transform-origin: 0 0;
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
|
|
will-change: transform;
|
|
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.wsk-menu__container.is-visible .wsk-menu__outline {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
-ms-transform: scale(1);
|
|
transform: scale(1); }
|
|
.wsk-menu__outline.wsk-menu--bottom-right {
|
|
-webkit-transform-origin: 100% 0;
|
|
-ms-transform-origin: 100% 0;
|
|
transform-origin: 100% 0; }
|
|
.wsk-menu__outline.wsk-menu--top-left {
|
|
-webkit-transform-origin: 0 100%;
|
|
-ms-transform-origin: 0 100%;
|
|
transform-origin: 0 100%; }
|
|
.wsk-menu__outline.wsk-menu--top-right {
|
|
-webkit-transform-origin: 100% 100%;
|
|
-ms-transform-origin: 100% 100%;
|
|
transform-origin: 100% 100%; }
|
|
|
|
.wsk-menu {
|
|
position: absolute;
|
|
list-style: none;
|
|
top: 0;
|
|
left: 0;
|
|
height: auto;
|
|
width: auto;
|
|
min-width: 124px;
|
|
padding: 8px 0;
|
|
margin: 0;
|
|
opacity: 0;
|
|
clip: rect(0 0 0 0); }
|
|
.wsk-menu__container.is-visible .wsk-menu {
|
|
opacity: 1; }
|
|
.wsk-menu.is-animating {
|
|
-webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), clip 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), clip 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.wsk-menu.wsk-menu--bottom-right {
|
|
left: auto;
|
|
right: 0; }
|
|
.wsk-menu.wsk-menu--top-left {
|
|
top: auto;
|
|
bottom: 0; }
|
|
.wsk-menu.wsk-menu--top-right {
|
|
top: auto;
|
|
left: auto;
|
|
bottom: 0;
|
|
right: 0; }
|
|
.wsk-menu.wsk-menu--unaligned {
|
|
top: auto;
|
|
left: auto; }
|
|
|
|
.wsk-menu__item {
|
|
display: block;
|
|
border: none;
|
|
color: #000;
|
|
background-color: transparent;
|
|
text-align: left;
|
|
margin: 0;
|
|
padding: 0 16px;
|
|
outline-color: rgb(189,189,189);
|
|
position: relative;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none; }
|
|
.wsk-menu__container.is-visible .wsk-menu__item {
|
|
opacity: 1; }
|
|
.wsk-menu__item::-moz-focus-inner {
|
|
border: 0; }
|
|
.wsk-menu__item[disabled] {
|
|
color: rgb(189,189,189);
|
|
background-color: transparent;
|
|
cursor: auto; }
|
|
.wsk-menu__item[disabled]:hover {
|
|
background-color: transparent; }
|
|
.wsk-menu__item[disabled]:focus {
|
|
background-color: transparent; }
|
|
.wsk-menu__item[disabled] .wsk-ripple {
|
|
background: transparent; }
|
|
.wsk-menu__item:hover {
|
|
background-color: rgb(238,238,238); }
|
|
.wsk-menu__item:focus {
|
|
outline: none;
|
|
background-color: rgb(238,238,238); }
|
|
.wsk-menu__item:active {
|
|
background-color: rgb(224,224,224); }
|
|
|
|
.wsk-menu__item--ripple-container {
|
|
display: block;
|
|
height: 100%;
|
|
left: 0px;
|
|
position: absolute;
|
|
top: 0px;
|
|
width: 100%;
|
|
z-index: 0;
|
|
overflow: hidden; }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
.wsk-shadow--z1 {
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
|
|
|
|
.wsk-shadow--z2 {
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.23); }
|
|
|
|
.wsk-shadow--z3 {
|
|
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.19), 0 6px 3px 0 rgba(0, 0, 0, 0.23); }
|
|
|
|
.wsk-shadow--z4 {
|
|
box-shadow: 0 14px 14px 0 rgba(0, 0, 0, 0.25), 0 10px 5px 0 rgba(0, 0, 0, 0.22); }
|
|
|
|
.wsk-shadow--z5 {
|
|
box-shadow: 0 19px 19px 0 rgba(0, 0, 0, 0.3), 0 15px 6px 0 rgba(0, 0, 0, 0.22); }
|
|
|
|
/* We're splitting fonts into "preferred" and "performance" in order to optimize
|
|
page loading. For important text, such as the body, we want it to load
|
|
immediately and not wait for the web font load, whereas for other sections,
|
|
such as headers and titles, we're OK with things taking a bit longer to load.
|
|
We do have some optional classes and parameters in the mixins, in case you
|
|
definitely want to make sure you're using the preferred font and don't mind
|
|
the performance hit.
|
|
We should be able to improve on this once CSS Font Loading L3 becomes more
|
|
widely available.
|
|
*/
|
|
html, body {
|
|
font-family: 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 20px; }
|
|
|
|
h1, h2, h3, h4, h5, h6, p {
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
/**
|
|
* Styles for HTML elements
|
|
*/
|
|
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
opacity: 0.54;
|
|
font-size: 0.6em; }
|
|
|
|
h1 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em; }
|
|
|
|
h2 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px; }
|
|
|
|
h3 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px; }
|
|
|
|
h4 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
h5 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em; }
|
|
|
|
h6 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
p {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
margin: 0 0 16px 0; }
|
|
|
|
a {
|
|
font-weight: bold; }
|
|
|
|
blockquote {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
blockquote:before {
|
|
content: '“';
|
|
opacity: 0.54; }
|
|
blockquote:after {
|
|
content: '”';
|
|
opacity: 0.54; }
|
|
|
|
mark {
|
|
background-color: #f4ff81; }
|
|
|
|
dt {
|
|
font-weight: 700; }
|
|
|
|
/**
|
|
* Class Name Styles
|
|
*/
|
|
.wsk-typography--display-4 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 112px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em; }
|
|
|
|
.wsk-typography--display-4-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 112px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-3 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em; }
|
|
|
|
.wsk-typography--display-3-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-2 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px; }
|
|
|
|
.wsk-typography--display-2-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-1 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px; }
|
|
|
|
.wsk-typography--display-1-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--headline {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
.wsk-typography--headline-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--title {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em; }
|
|
|
|
.wsk-typography--title-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--subhead {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--subhead-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-2 {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-2-color-contrast {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-1 {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-1-color-contrast {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-2-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-2-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-1-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-1-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--caption {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
|
|
.wsk-typography--caption-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
|
|
.wsk-typography--caption-color-contrast {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--caption-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--menu {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--menu-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--button {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--button-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--text-left {
|
|
text-align: left; }
|
|
|
|
.wsk-typography--text-right {
|
|
text-align: right; }
|
|
|
|
.wsk-typography--text-center {
|
|
text-align: center; }
|
|
|
|
.wsk-typography--text-justify {
|
|
text-align: justify; }
|
|
|
|
.wsk-typography--text-nowrap {
|
|
white-space: nowrap; }
|
|
|
|
.wsk-typography--text-lowercase {
|
|
text-transform: lowercase; }
|
|
|
|
.wsk-typography--text-uppercase {
|
|
text-transform: uppercase; }
|
|
|
|
.wsk-typography--text-capitalize {
|
|
text-transform: capitalize; }
|
|
|
|
.wsk-typography--table-striped > tbody > tr:nth-child(odd) > td, .wsk-typography--table-striped > tbody > tr:nth-child(odd) > th {
|
|
background-color: #f9f9f9; }
|
|
|
|
.wsk-typography--table-striped > tbody > tr:nth-child(odd) > td, .wsk-typography--table-striped > tbody > tr:nth-child(odd) > th {
|
|
background-color: #f9f9f9; }
|
|
|
|
.wsk-typography--font-thin {
|
|
font-weight: 200 !important; }
|
|
|
|
.wsk-typography--font-light {
|
|
font-weight: 300 !important; }
|
|
|
|
.wsk-typography--font-regular {
|
|
font-weight: 400 !important; }
|
|
|
|
.wsk-typography--font-medium {
|
|
font-weight: 500 !important; }
|
|
|
|
.wsk-typography--font-bold {
|
|
font-weight: 700 !important; }
|
|
|
|
.wsk-typography--font-black {
|
|
font-weight: 900 !important; }
|
|
|
|
@font-face {
|
|
font-family: 'Material-Design-Iconic-Font';
|
|
src: url('../fonts/Material-Design-Iconic-Font.eot?v=1.1.1');
|
|
src: url('../fonts/Material-Design-Iconic-Font.eot?#iefix&v=1.1.1') format('embedded-opentype'), url('../fonts/Material-Design-Iconic-Font.woff?v=1.1.1') format('woff'), url('../fonts/Material-Design-Iconic-Font.ttf?v=1.1.1') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal; }
|
|
|
|
.wsk-icon {
|
|
font-family: 'Material-Design-Iconic-Font';
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
.wsk-icon--3d-rotation:before {
|
|
content: "\f000"; }
|
|
|
|
.wsk-icon--accessibility:before {
|
|
content: "\f001"; }
|
|
|
|
.wsk-icon--account-balance:before {
|
|
content: "\f002"; }
|
|
|
|
.wsk-icon--account-balance-wallet:before {
|
|
content: "\f003"; }
|
|
|
|
.wsk-icon--account-box:before {
|
|
content: "\f004"; }
|
|
|
|
.wsk-icon--account-child:before {
|
|
content: "\f005"; }
|
|
|
|
.wsk-icon--account-circle:before {
|
|
content: "\f006"; }
|
|
|
|
.wsk-icon--add-shopping-cart:before {
|
|
content: "\f007"; }
|
|
|
|
.wsk-icon--alarm:before {
|
|
content: "\f008"; }
|
|
|
|
.wsk-icon--alarm-add:before {
|
|
content: "\f009"; }
|
|
|
|
.wsk-icon--alarm-off:before {
|
|
content: "\f00a"; }
|
|
|
|
.wsk-icon--alarm-on:before {
|
|
content: "\f00b"; }
|
|
|
|
.wsk-icon--android:before {
|
|
content: "\f00c"; }
|
|
|
|
.wsk-icon--announcement:before {
|
|
content: "\f00d"; }
|
|
|
|
.wsk-icon--aspect-ratio:before {
|
|
content: "\f00e"; }
|
|
|
|
.wsk-icon--assessment:before {
|
|
content: "\f00f"; }
|
|
|
|
.wsk-icon--assignment:before {
|
|
content: "\f010"; }
|
|
|
|
.wsk-icon--assignment-ind:before {
|
|
content: "\f011"; }
|
|
|
|
.wsk-icon--assignment-late:before {
|
|
content: "\f012"; }
|
|
|
|
.wsk-icon--assignment-return:before {
|
|
content: "\f013"; }
|
|
|
|
.wsk-icon--assignment-returned:before {
|
|
content: "\f014"; }
|
|
|
|
.wsk-icon--assignment-turned-in:before {
|
|
content: "\f015"; }
|
|
|
|
.wsk-icon--autorenew:before {
|
|
content: "\f016"; }
|
|
|
|
.wsk-icon--backup:before {
|
|
content: "\f017"; }
|
|
|
|
.wsk-icon--book:before {
|
|
content: "\f018"; }
|
|
|
|
.wsk-icon--bookmark:before {
|
|
content: "\f019"; }
|
|
|
|
.wsk-icon--bookmark-outline:before {
|
|
content: "\f01a"; }
|
|
|
|
.wsk-icon--bug-report:before {
|
|
content: "\f01b"; }
|
|
|
|
.wsk-icon--cached:before {
|
|
content: "\f01c"; }
|
|
|
|
.wsk-icon--class:before {
|
|
content: "\f01d"; }
|
|
|
|
.wsk-icon--credit-card:before {
|
|
content: "\f01e"; }
|
|
|
|
.wsk-icon--dashboard:before {
|
|
content: "\f01f"; }
|
|
|
|
.wsk-icon--delete:before {
|
|
content: "\f020"; }
|
|
|
|
.wsk-icon--description:before {
|
|
content: "\f021"; }
|
|
|
|
.wsk-icon--dns:before {
|
|
content: "\f022"; }
|
|
|
|
.wsk-icon--done:before {
|
|
content: "\f023"; }
|
|
|
|
.wsk-icon--done-all:before {
|
|
content: "\f024"; }
|
|
|
|
.wsk-icon--event:before {
|
|
content: "\f025"; }
|
|
|
|
.wsk-icon--exit-to-app:before {
|
|
content: "\f026"; }
|
|
|
|
.wsk-icon--explore:before {
|
|
content: "\f027"; }
|
|
|
|
.wsk-icon--extension:before {
|
|
content: "\f028"; }
|
|
|
|
.wsk-icon--face-unlock:before {
|
|
content: "\f029"; }
|
|
|
|
.wsk-icon--favorite:before {
|
|
content: "\f02a"; }
|
|
|
|
.wsk-icon--favorite-outline:before {
|
|
content: "\f02b"; }
|
|
|
|
.wsk-icon--find-in-page:before {
|
|
content: "\f02c"; }
|
|
|
|
.wsk-icon--find-replace:before {
|
|
content: "\f02d"; }
|
|
|
|
.wsk-icon--flip-to-back:before {
|
|
content: "\f02e"; }
|
|
|
|
.wsk-icon--flip-to-front:before {
|
|
content: "\f02f"; }
|
|
|
|
.wsk-icon--get-app:before {
|
|
content: "\f030"; }
|
|
|
|
.wsk-icon--grade:before {
|
|
content: "\f031"; }
|
|
|
|
.wsk-icon--group-work:before {
|
|
content: "\f032"; }
|
|
|
|
.wsk-icon--help:before {
|
|
content: "\f033"; }
|
|
|
|
.wsk-icon--highlight-remove:before {
|
|
content: "\f034"; }
|
|
|
|
.wsk-icon--history:before {
|
|
content: "\f035"; }
|
|
|
|
.wsk-icon--home:before {
|
|
content: "\f036"; }
|
|
|
|
.wsk-icon--https:before {
|
|
content: "\f037"; }
|
|
|
|
.wsk-icon--info:before {
|
|
content: "\f038"; }
|
|
|
|
.wsk-icon--info-outline:before {
|
|
content: "\f039"; }
|
|
|
|
.wsk-icon--input:before {
|
|
content: "\f03a"; }
|
|
|
|
.wsk-icon--invert-colors:before {
|
|
content: "\f03b"; }
|
|
|
|
.wsk-icon--label:before {
|
|
content: "\f03c"; }
|
|
|
|
.wsk-icon--label-outline:before {
|
|
content: "\f03d"; }
|
|
|
|
.wsk-icon--language:before {
|
|
content: "\f03e"; }
|
|
|
|
.wsk-icon--launch:before {
|
|
content: "\f03f"; }
|
|
|
|
.wsk-icon--list:before {
|
|
content: "\f040"; }
|
|
|
|
.wsk-icon--lock:before {
|
|
content: "\f041"; }
|
|
|
|
.wsk-icon--lock-open:before {
|
|
content: "\f042"; }
|
|
|
|
.wsk-icon--lock-outline:before {
|
|
content: "\f043"; }
|
|
|
|
.wsk-icon--loyalty:before {
|
|
content: "\f044"; }
|
|
|
|
.wsk-icon--markunread-mailbox:before {
|
|
content: "\f045"; }
|
|
|
|
.wsk-icon--note-add:before {
|
|
content: "\f046"; }
|
|
|
|
.wsk-icon--open-in-browser:before {
|
|
content: "\f047"; }
|
|
|
|
.wsk-icon--open-in-new:before {
|
|
content: "\f048"; }
|
|
|
|
.wsk-icon--open-with:before {
|
|
content: "\f049"; }
|
|
|
|
.wsk-icon--pageview:before {
|
|
content: "\f04a"; }
|
|
|
|
.wsk-icon--payment:before {
|
|
content: "\f04b"; }
|
|
|
|
.wsk-icon--perm-camera-mic:before {
|
|
content: "\f04c"; }
|
|
|
|
.wsk-icon--perm-contact-cal:before {
|
|
content: "\f04d"; }
|
|
|
|
.wsk-icon--perm-data-setting:before {
|
|
content: "\f04e"; }
|
|
|
|
.wsk-icon--perm-device-info:before {
|
|
content: "\f04f"; }
|
|
|
|
.wsk-icon--perm-identity:before {
|
|
content: "\f050"; }
|
|
|
|
.wsk-icon--perm-media:before {
|
|
content: "\f051"; }
|
|
|
|
.wsk-icon--perm-phone-msg:before {
|
|
content: "\f052"; }
|
|
|
|
.wsk-icon--perm-scan-wifi:before {
|
|
content: "\f053"; }
|
|
|
|
.wsk-icon--picture-in-picture:before {
|
|
content: "\f054"; }
|
|
|
|
.wsk-icon--polymer:before {
|
|
content: "\f055"; }
|
|
|
|
.wsk-icon--print:before {
|
|
content: "\f056"; }
|
|
|
|
.wsk-icon--query-builder:before {
|
|
content: "\f057"; }
|
|
|
|
.wsk-icon--question-answer:before {
|
|
content: "\f058"; }
|
|
|
|
.wsk-icon--receipt:before {
|
|
content: "\f059"; }
|
|
|
|
.wsk-icon--redeem:before {
|
|
content: "\f05a"; }
|
|
|
|
.wsk-icon--reorder:before {
|
|
content: "\f094"; }
|
|
|
|
.wsk-icon--report-problem:before {
|
|
content: "\f05b"; }
|
|
|
|
.wsk-icon--restore:before {
|
|
content: "\f05c"; }
|
|
|
|
.wsk-icon--room:before {
|
|
content: "\f05d"; }
|
|
|
|
.wsk-icon--schedule:before {
|
|
content: "\f05e"; }
|
|
|
|
.wsk-icon--search:before {
|
|
content: "\f05f"; }
|
|
|
|
.wsk-icon--settings:before {
|
|
content: "\f060"; }
|
|
|
|
.wsk-icon--settings-applications:before {
|
|
content: "\f061"; }
|
|
|
|
.wsk-icon--settings-backup-restore:before {
|
|
content: "\f062"; }
|
|
|
|
.wsk-icon--settings-bluetooth:before {
|
|
content: "\f063"; }
|
|
|
|
.wsk-icon--settings-cell:before {
|
|
content: "\f064"; }
|
|
|
|
.wsk-icon--settings-display:before {
|
|
content: "\f065"; }
|
|
|
|
.wsk-icon--settings-ethernet:before {
|
|
content: "\f066"; }
|
|
|
|
.wsk-icon--settings-input-antenna:before {
|
|
content: "\f067"; }
|
|
|
|
.wsk-icon--settings-input-component:before {
|
|
content: "\f068"; }
|
|
|
|
.wsk-icon--settings-input-composite:before {
|
|
content: "\f069"; }
|
|
|
|
.wsk-icon--settings-input-hdmi:before {
|
|
content: "\f06a"; }
|
|
|
|
.wsk-icon--settings-input-svideo:before {
|
|
content: "\f06b"; }
|
|
|
|
.wsk-icon--settings-overscan:before {
|
|
content: "\f06c"; }
|
|
|
|
.wsk-icon--settings-phone:before {
|
|
content: "\f06d"; }
|
|
|
|
.wsk-icon--settings-power:before {
|
|
content: "\f06e"; }
|
|
|
|
.wsk-icon--settings-remote:before {
|
|
content: "\f06f"; }
|
|
|
|
.wsk-icon--settings-voice:before {
|
|
content: "\f070"; }
|
|
|
|
.wsk-icon--shop:before {
|
|
content: "\f071"; }
|
|
|
|
.wsk-icon--shopping-basket:before {
|
|
content: "\f072"; }
|
|
|
|
.wsk-icon--shopping-cart:before {
|
|
content: "\f073"; }
|
|
|
|
.wsk-icon--shop-two:before {
|
|
content: "\f074"; }
|
|
|
|
.wsk-icon--speaker-notes:before {
|
|
content: "\f075"; }
|
|
|
|
.wsk-icon--spellcheck:before {
|
|
content: "\f076"; }
|
|
|
|
.wsk-icon--star-rate:before {
|
|
content: "\f077"; }
|
|
|
|
.wsk-icon--stars:before {
|
|
content: "\f078"; }
|
|
|
|
.wsk-icon--store:before {
|
|
content: "\f079"; }
|
|
|
|
.wsk-icon--subject:before {
|
|
content: "\f07a"; }
|
|
|
|
.wsk-icon--supervisor-account:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--swap-horiz:before {
|
|
content: "\f07b"; }
|
|
|
|
.wsk-icon--swap-vert:before {
|
|
content: "\f07c"; }
|
|
|
|
.wsk-icon--swap-vert-circle:before {
|
|
content: "\f07d"; }
|
|
|
|
.wsk-icon--system-update-tv:before {
|
|
content: "\f07e"; }
|
|
|
|
.wsk-icon--tab:before {
|
|
content: "\f07f"; }
|
|
|
|
.wsk-icon--tab-unselected:before {
|
|
content: "\f080"; }
|
|
|
|
.wsk-icon--theaters:before {
|
|
content: "\f081"; }
|
|
|
|
.wsk-icon--thumb-down:before {
|
|
content: "\f082"; }
|
|
|
|
.wsk-icon--thumbs-up-down:before {
|
|
content: "\f083"; }
|
|
|
|
.wsk-icon--thumb-up:before {
|
|
content: "\f084"; }
|
|
|
|
.wsk-icon--toc:before {
|
|
content: "\f085"; }
|
|
|
|
.wsk-icon--today:before {
|
|
content: "\f086"; }
|
|
|
|
.wsk-icon--track-changes:before {
|
|
content: "\f087"; }
|
|
|
|
.wsk-icon--translate:before {
|
|
content: "\f088"; }
|
|
|
|
.wsk-icon--trending-down:before {
|
|
content: "\f089"; }
|
|
|
|
.wsk-icon--trending-neutral:before {
|
|
content: "\f08a"; }
|
|
|
|
.wsk-icon--trending-up:before {
|
|
content: "\f08b"; }
|
|
|
|
.wsk-icon--turned-in:before {
|
|
content: "\f08c"; }
|
|
|
|
.wsk-icon--turned-in-not:before {
|
|
content: "\f08d"; }
|
|
|
|
.wsk-icon--verified-user:before {
|
|
content: "\f08e"; }
|
|
|
|
.wsk-icon--view-agenda:before {
|
|
content: "\f08f"; }
|
|
|
|
.wsk-icon--view-array:before {
|
|
content: "\f090"; }
|
|
|
|
.wsk-icon--view-carousel:before {
|
|
content: "\f091"; }
|
|
|
|
.wsk-icon--view-column:before {
|
|
content: "\f092"; }
|
|
|
|
.wsk-icon--view-day:before {
|
|
content: "\f093"; }
|
|
|
|
.wsk-icon--view-headline:before {
|
|
content: "\f094"; }
|
|
|
|
.wsk-icon--view-list:before {
|
|
content: "\f095"; }
|
|
|
|
.wsk-icon--view-module:before {
|
|
content: "\f096"; }
|
|
|
|
.wsk-icon--view-quilt:before {
|
|
content: "\f097"; }
|
|
|
|
.wsk-icon--view-stream:before {
|
|
content: "\f098"; }
|
|
|
|
.wsk-icon--view-week:before {
|
|
content: "\f099"; }
|
|
|
|
.wsk-icon--visibility:before {
|
|
content: "\f09a"; }
|
|
|
|
.wsk-icon--visibility-off:before {
|
|
content: "\f09b"; }
|
|
|
|
.wsk-icon--wallet-giftcard:before {
|
|
content: "\f09c"; }
|
|
|
|
.wsk-icon--wallet-membership:before {
|
|
content: "\f09d"; }
|
|
|
|
.wsk-icon--wallet-travel:before {
|
|
content: "\f09e"; }
|
|
|
|
.wsk-icon--work:before {
|
|
content: "\f09f"; }
|
|
|
|
.wsk-icon--error:before {
|
|
content: "\f0a0"; }
|
|
|
|
.wsk-icon--warning:before {
|
|
content: "\f0a1"; }
|
|
|
|
.wsk-icon--album:before {
|
|
content: "\f0a2"; }
|
|
|
|
.wsk-icon--av-timer:before {
|
|
content: "\f0a3"; }
|
|
|
|
.wsk-icon--closed-caption:before {
|
|
content: "\f0a4"; }
|
|
|
|
.wsk-icon--equalizer:before {
|
|
content: "\f0a5"; }
|
|
|
|
.wsk-icon--explicit:before {
|
|
content: "\f0a6"; }
|
|
|
|
.wsk-icon--fast-forward:before {
|
|
content: "\f0a7"; }
|
|
|
|
.wsk-icon--fast-rewind:before {
|
|
content: "\f0a8"; }
|
|
|
|
.wsk-icon--games:before {
|
|
content: "\f0a9"; }
|
|
|
|
.wsk-icon--hearing:before {
|
|
content: "\f0aa"; }
|
|
|
|
.wsk-icon--high-quality:before {
|
|
content: "\f0ab"; }
|
|
|
|
.wsk-icon--loop:before {
|
|
content: "\f0ac"; }
|
|
|
|
.wsk-icon--mic:before {
|
|
content: "\f0ad"; }
|
|
|
|
.wsk-icon--mic-none:before {
|
|
content: "\f0ae"; }
|
|
|
|
.wsk-icon--mic-off:before {
|
|
content: "\f0af"; }
|
|
|
|
.wsk-icon--movie:before {
|
|
content: "\f0b0"; }
|
|
|
|
.wsk-icon--my-library-add:before {
|
|
content: "\f0b1"; }
|
|
|
|
.wsk-icon--my-library-books:before {
|
|
content: "\f0b2"; }
|
|
|
|
.wsk-icon--my-library-music:before {
|
|
content: "\f0b3"; }
|
|
|
|
.wsk-icon--new-releases:before {
|
|
content: "\f0b4"; }
|
|
|
|
.wsk-icon--not-interested:before {
|
|
content: "\f0b5"; }
|
|
|
|
.wsk-icon--pause:before {
|
|
content: "\f0b6"; }
|
|
|
|
.wsk-icon--pause-circle-fill:before {
|
|
content: "\f0b7"; }
|
|
|
|
.wsk-icon--pause-circle-outline:before {
|
|
content: "\f0b8"; }
|
|
|
|
.wsk-icon--play-arrow:before {
|
|
content: "\f0b9"; }
|
|
|
|
.wsk-icon--play-circle-fill:before {
|
|
content: "\f0ba"; }
|
|
|
|
.wsk-icon--play-circle-outline:before {
|
|
content: "\f0bb"; }
|
|
|
|
.wsk-icon--playlist-add:before {
|
|
content: "\f0bc"; }
|
|
|
|
.wsk-icon--play-shopping-bag:before {
|
|
content: "\f0bd"; }
|
|
|
|
.wsk-icon--queue:before {
|
|
content: "\f0be"; }
|
|
|
|
.wsk-icon--queue-music:before {
|
|
content: "\f0bf"; }
|
|
|
|
.wsk-icon--radio:before {
|
|
content: "\f0c0"; }
|
|
|
|
.wsk-icon--recent-actors:before {
|
|
content: "\f0c1"; }
|
|
|
|
.wsk-icon--repeat:before {
|
|
content: "\f0c2"; }
|
|
|
|
.wsk-icon--repeat-one:before {
|
|
content: "\f0c3"; }
|
|
|
|
.wsk-icon--replay:before {
|
|
content: "\f0c4"; }
|
|
|
|
.wsk-icon--shuffle:before {
|
|
content: "\f0c5"; }
|
|
|
|
.wsk-icon--skip-next:before {
|
|
content: "\f0c6"; }
|
|
|
|
.wsk-icon--skip-previous:before {
|
|
content: "\f0c7"; }
|
|
|
|
.wsk-icon--snooze:before {
|
|
content: "\f0c8"; }
|
|
|
|
.wsk-icon--stop:before {
|
|
content: "\f0c9"; }
|
|
|
|
.wsk-icon--subtitles:before {
|
|
content: "\f0ca"; }
|
|
|
|
.wsk-icon--surround-sound:before {
|
|
content: "\f0cb"; }
|
|
|
|
.wsk-icon--videocam:before {
|
|
content: "\f0cc"; }
|
|
|
|
.wsk-icon--videocam-off:before {
|
|
content: "\f0cd"; }
|
|
|
|
.wsk-icon--video-collection:before {
|
|
content: "\f0ce"; }
|
|
|
|
.wsk-icon--volume-down:before {
|
|
content: "\f0cf"; }
|
|
|
|
.wsk-icon--volume-mute:before {
|
|
content: "\f0d0"; }
|
|
|
|
.wsk-icon--volume-off:before {
|
|
content: "\f0d1"; }
|
|
|
|
.wsk-icon--volume-up:before {
|
|
content: "\f0d2"; }
|
|
|
|
.wsk-icon--web:before {
|
|
content: "\f0d3"; }
|
|
|
|
.wsk-icon--business:before {
|
|
content: "\f0d4"; }
|
|
|
|
.wsk-icon--call:before {
|
|
content: "\f0d5"; }
|
|
|
|
.wsk-icon--call-end:before {
|
|
content: "\f0d6"; }
|
|
|
|
.wsk-icon--call-made:before {
|
|
content: "\f0d7"; }
|
|
|
|
.wsk-icon--call-merge:before {
|
|
content: "\f0d8"; }
|
|
|
|
.wsk-icon--call-missed:before {
|
|
content: "\f0d9"; }
|
|
|
|
.wsk-icon--call-received:before {
|
|
content: "\f0da"; }
|
|
|
|
.wsk-icon--call-split:before {
|
|
content: "\f0db"; }
|
|
|
|
.wsk-icon--chat:before {
|
|
content: "\f0dc"; }
|
|
|
|
.wsk-icon--clear-all:before {
|
|
content: "\f0dd"; }
|
|
|
|
.wsk-icon--comment:before {
|
|
content: "\f0de"; }
|
|
|
|
.wsk-icon--contacts:before {
|
|
content: "\f0df"; }
|
|
|
|
.wsk-icon--dialer-sip:before {
|
|
content: "\f0e0"; }
|
|
|
|
.wsk-icon--dialpad:before {
|
|
content: "\f0e1"; }
|
|
|
|
.wsk-icon--dnd-on:before {
|
|
content: "\f0e2"; }
|
|
|
|
.wsk-icon--email:before {
|
|
content: "\f0e3"; }
|
|
|
|
.wsk-icon--forum:before {
|
|
content: "\f0e4"; }
|
|
|
|
.wsk-icon--import-export:before {
|
|
content: "\f0e5"; }
|
|
|
|
.wsk-icon--invert-colors-off:before {
|
|
content: "\f0e6"; }
|
|
|
|
.wsk-icon--invert-colors-on:before {
|
|
content: "\f0e7"; }
|
|
|
|
.wsk-icon--live-help:before {
|
|
content: "\f0e8"; }
|
|
|
|
.wsk-icon--location-off:before {
|
|
content: "\f0e9"; }
|
|
|
|
.wsk-icon--location-on:before {
|
|
content: "\f0ea"; }
|
|
|
|
.wsk-icon--message:before {
|
|
content: "\f0eb"; }
|
|
|
|
.wsk-icon--messenger:before {
|
|
content: "\f0ec"; }
|
|
|
|
.wsk-icon--no-sim:before {
|
|
content: "\f0ed"; }
|
|
|
|
.wsk-icon--phone:before {
|
|
content: "\f0ee"; }
|
|
|
|
.wsk-icon--portable-wifi-off:before {
|
|
content: "\f0ef"; }
|
|
|
|
.wsk-icon--quick-contacts-dialer:before {
|
|
content: "\f0f0"; }
|
|
|
|
.wsk-icon--quick-contacts-mail:before {
|
|
content: "\f0f1"; }
|
|
|
|
.wsk-icon--ring-volume:before {
|
|
content: "\f0f2"; }
|
|
|
|
.wsk-icon--stay-current-landscape:before {
|
|
content: "\f0f3"; }
|
|
|
|
.wsk-icon--stay-current-portrait:before {
|
|
content: "\f0f4"; }
|
|
|
|
.wsk-icon--stay-primary-landscape:before {
|
|
content: "\f0f5"; }
|
|
|
|
.wsk-icon--stay-primary-portrait:before {
|
|
content: "\f0f6"; }
|
|
|
|
.wsk-icon--swap-calls:before {
|
|
content: "\f0f7"; }
|
|
|
|
.wsk-icon--textsms:before {
|
|
content: "\f0f8"; }
|
|
|
|
.wsk-icon--voicemail:before {
|
|
content: "\f0f9"; }
|
|
|
|
.wsk-icon--vpn-key:before {
|
|
content: "\f0fa"; }
|
|
|
|
.wsk-icon--add:before {
|
|
content: "\f0fb"; }
|
|
|
|
.wsk-icon--add-box:before {
|
|
content: "\f0fc"; }
|
|
|
|
.wsk-icon--add-circle:before {
|
|
content: "\f0fd"; }
|
|
|
|
.wsk-icon--add-circle-outline:before {
|
|
content: "\f0fe"; }
|
|
|
|
.wsk-icon--archive:before {
|
|
content: "\f0ff"; }
|
|
|
|
.wsk-icon--backspace:before {
|
|
content: "\f100"; }
|
|
|
|
.wsk-icon--block:before {
|
|
content: "\f101"; }
|
|
|
|
.wsk-icon--clear:before {
|
|
content: "\f102"; }
|
|
|
|
.wsk-icon--content-copy:before {
|
|
content: "\f103"; }
|
|
|
|
.wsk-icon--content-cut:before {
|
|
content: "\f104"; }
|
|
|
|
.wsk-icon--content-paste:before {
|
|
content: "\f105"; }
|
|
|
|
.wsk-icon--create:before {
|
|
content: "\f106"; }
|
|
|
|
.wsk-icon--drafts:before {
|
|
content: "\f107"; }
|
|
|
|
.wsk-icon--filter-list:before {
|
|
content: "\f108"; }
|
|
|
|
.wsk-icon--flag:before {
|
|
content: "\f109"; }
|
|
|
|
.wsk-icon--forward:before {
|
|
content: "\f10a"; }
|
|
|
|
.wsk-icon--gesture:before {
|
|
content: "\f10b"; }
|
|
|
|
.wsk-icon--inbox:before {
|
|
content: "\f10c"; }
|
|
|
|
.wsk-icon--link:before {
|
|
content: "\f10d"; }
|
|
|
|
.wsk-icon--mail:before {
|
|
content: "\f10e"; }
|
|
|
|
.wsk-icon--markunread:before {
|
|
content: "\f10f"; }
|
|
|
|
.wsk-icon--redo:before {
|
|
content: "\f110"; }
|
|
|
|
.wsk-icon--remove:before {
|
|
content: "\f111"; }
|
|
|
|
.wsk-icon--remove-circle:before {
|
|
content: "\f112"; }
|
|
|
|
.wsk-icon--remove-circle-outline:before {
|
|
content: "\f113"; }
|
|
|
|
.wsk-icon--reply:before {
|
|
content: "\f114"; }
|
|
|
|
.wsk-icon--reply-all:before {
|
|
content: "\f115"; }
|
|
|
|
.wsk-icon--report:before {
|
|
content: "\f116"; }
|
|
|
|
.wsk-icon--save:before {
|
|
content: "\f117"; }
|
|
|
|
.wsk-icon--select-all:before {
|
|
content: "\f118"; }
|
|
|
|
.wsk-icon--send:before {
|
|
content: "\f119"; }
|
|
|
|
.wsk-icon--sort:before {
|
|
content: "\f11a"; }
|
|
|
|
.wsk-icon--text-format:before {
|
|
content: "\f11b"; }
|
|
|
|
.wsk-icon--undo:before {
|
|
content: "\f11c"; }
|
|
|
|
.wsk-icon--access-alarm:before {
|
|
content: "\f11d"; }
|
|
|
|
.wsk-icon--access-alarms:before {
|
|
content: "\f11e"; }
|
|
|
|
.wsk-icon--access-time:before {
|
|
content: "\f11f"; }
|
|
|
|
.wsk-icon--add-alarm:before {
|
|
content: "\f120"; }
|
|
|
|
.wsk-icon--airplanemode-off:before {
|
|
content: "\f121"; }
|
|
|
|
.wsk-icon--airplanemode-on:before {
|
|
content: "\f122"; }
|
|
|
|
.wsk-icon--battery-20:before {
|
|
content: "\f123"; }
|
|
|
|
.wsk-icon--battery-30:before {
|
|
content: "\f124"; }
|
|
|
|
.wsk-icon--battery-50:before {
|
|
content: "\f125"; }
|
|
|
|
.wsk-icon--battery-60:before {
|
|
content: "\f126"; }
|
|
|
|
.wsk-icon--battery-80:before {
|
|
content: "\f127"; }
|
|
|
|
.wsk-icon--battery-90:before {
|
|
content: "\f128"; }
|
|
|
|
.wsk-icon--battery-alert:before {
|
|
content: "\f129"; }
|
|
|
|
.wsk-icon--battery-charging-20:before {
|
|
content: "\f12a"; }
|
|
|
|
.wsk-icon--battery-charging-30:before {
|
|
content: "\f12b"; }
|
|
|
|
.wsk-icon--battery-charging-50:before {
|
|
content: "\f12c"; }
|
|
|
|
.wsk-icon--battery-charging-60:before {
|
|
content: "\f12d"; }
|
|
|
|
.wsk-icon--battery-charging-80:before {
|
|
content: "\f12e"; }
|
|
|
|
.wsk-icon--battery-charging-90:before {
|
|
content: "\f12f"; }
|
|
|
|
.wsk-icon--battery-charging-full:before {
|
|
content: "\f130"; }
|
|
|
|
.wsk-icon--battery-full:before {
|
|
content: "\f131"; }
|
|
|
|
.wsk-icon--battery-std:before {
|
|
content: "\f132"; }
|
|
|
|
.wsk-icon--battery-unknown:before {
|
|
content: "\f133"; }
|
|
|
|
.wsk-icon--bluetooth:before {
|
|
content: "\f134"; }
|
|
|
|
.wsk-icon--bluetooth-connected:before {
|
|
content: "\f135"; }
|
|
|
|
.wsk-icon--bluetooth-disabled:before {
|
|
content: "\f136"; }
|
|
|
|
.wsk-icon--bluetooth-searching:before {
|
|
content: "\f137"; }
|
|
|
|
.wsk-icon--brightness-auto:before {
|
|
content: "\f138"; }
|
|
|
|
.wsk-icon--brightness-high:before {
|
|
content: "\f139"; }
|
|
|
|
.wsk-icon--brightness-low:before {
|
|
content: "\f13a"; }
|
|
|
|
.wsk-icon--brightness-medium:before {
|
|
content: "\f13b"; }
|
|
|
|
.wsk-icon--data-usage:before {
|
|
content: "\f13c"; }
|
|
|
|
.wsk-icon--developer-mode:before {
|
|
content: "\f13d"; }
|
|
|
|
.wsk-icon--devices:before {
|
|
content: "\f13e"; }
|
|
|
|
.wsk-icon--dvr:before {
|
|
content: "\f13f"; }
|
|
|
|
.wsk-icon--gps-fixed:before {
|
|
content: "\f140"; }
|
|
|
|
.wsk-icon--gps-not-fixed:before {
|
|
content: "\f141"; }
|
|
|
|
.wsk-icon--gps-off:before {
|
|
content: "\f142"; }
|
|
|
|
.wsk-icon--location-disabled:before {
|
|
content: "\f143"; }
|
|
|
|
.wsk-icon--location-searching:before {
|
|
content: "\f144"; }
|
|
|
|
.wsk-icon--multitrack-audio:before {
|
|
content: "\f145"; }
|
|
|
|
.wsk-icon--network-cell:before {
|
|
content: "\f146"; }
|
|
|
|
.wsk-icon--network-wifi:before {
|
|
content: "\f147"; }
|
|
|
|
.wsk-icon--nfc:before {
|
|
content: "\f148"; }
|
|
|
|
.wsk-icon--now-wallpaper:before {
|
|
content: "\f149"; }
|
|
|
|
.wsk-icon--now-widgets:before {
|
|
content: "\f14a"; }
|
|
|
|
.wsk-icon--screen-lock-landscape:before {
|
|
content: "\f14b"; }
|
|
|
|
.wsk-icon--screen-lock-portrait:before {
|
|
content: "\f14c"; }
|
|
|
|
.wsk-icon--screen-lock-rotation:before {
|
|
content: "\f14d"; }
|
|
|
|
.wsk-icon--screen-rotation:before {
|
|
content: "\f14e"; }
|
|
|
|
.wsk-icon--sd-storage:before {
|
|
content: "\f14f"; }
|
|
|
|
.wsk-icon--settings-system-daydream:before {
|
|
content: "\f150"; }
|
|
|
|
.wsk-icon--signal-cellular-0-bar:before {
|
|
content: "\f151"; }
|
|
|
|
.wsk-icon--signal-cellular-1-bar:before {
|
|
content: "\f152"; }
|
|
|
|
.wsk-icon--signal-cellular-2-bar:before {
|
|
content: "\f153"; }
|
|
|
|
.wsk-icon--signal-cellular-3-bar:before {
|
|
content: "\f154"; }
|
|
|
|
.wsk-icon--signal-cellular-4-bar:before {
|
|
content: "\f155"; }
|
|
|
|
.wsk-icon--signal-cellular-connected-no-internet-0-bar:before {
|
|
content: "\f156"; }
|
|
|
|
.wsk-icon--signal-cellular-connected-no-internet-1-bar:before {
|
|
content: "\f157"; }
|
|
|
|
.wsk-icon--signal-cellular-connected-no-internet-2-bar:before {
|
|
content: "\f158"; }
|
|
|
|
.wsk-icon--signal-cellular-connected-no-internet-3-bar:before {
|
|
content: "\f159"; }
|
|
|
|
.wsk-icon--signal-cellular-connected-no-internet-4-bar:before {
|
|
content: "\f15a"; }
|
|
|
|
.wsk-icon--signal-cellular-no-sim:before {
|
|
content: "\f15b"; }
|
|
|
|
.wsk-icon--signal-cellular-null:before {
|
|
content: "\f15c"; }
|
|
|
|
.wsk-icon--signal-cellular-off:before {
|
|
content: "\f15d"; }
|
|
|
|
.wsk-icon--signal-wifi-0-bar:before {
|
|
content: "\f15e"; }
|
|
|
|
.wsk-icon--signal-wifi-1-bar:before {
|
|
content: "\f15f"; }
|
|
|
|
.wsk-icon--signal-wifi-2-bar:before {
|
|
content: "\f160"; }
|
|
|
|
.wsk-icon--signal-wifi-3-bar:before {
|
|
content: "\f161"; }
|
|
|
|
.wsk-icon--signal-wifi-4-bar:before {
|
|
content: "\f162"; }
|
|
|
|
.wsk-icon--signal-wifi-off:before {
|
|
content: "\f163"; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-1-bar:before {
|
|
content: "\f15f"; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-2-bar:before {
|
|
content: "\f160"; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-3-bar:before {
|
|
content: "\f161"; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-4-bar:before {
|
|
content: "\f162"; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-connected-no-internet:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-connected-no-internet-1:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-connected-no-internet-2:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-connected-no-internet-3:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-connected-no-internet-4:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-not-connected:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--signal-wifi-statusbar-null:before {
|
|
content: ""; }
|
|
|
|
.wsk-icon--storage:before {
|
|
content: "\f164"; }
|
|
|
|
.wsk-icon--usb:before {
|
|
content: "\f165"; }
|
|
|
|
.wsk-icon--wifi-lock:before {
|
|
content: "\f166"; }
|
|
|
|
.wsk-icon--wifi-tethering:before {
|
|
content: "\f167"; }
|
|
|
|
.wsk-icon--attach-file:before {
|
|
content: "\f168"; }
|
|
|
|
.wsk-icon--attach-money:before {
|
|
content: "\f169"; }
|
|
|
|
.wsk-icon--border-all:before {
|
|
content: "\f16a"; }
|
|
|
|
.wsk-icon--border-bottom:before {
|
|
content: "\f16b"; }
|
|
|
|
.wsk-icon--border-clear:before {
|
|
content: "\f16c"; }
|
|
|
|
.wsk-icon--border-color:before {
|
|
content: "\f16d"; }
|
|
|
|
.wsk-icon--border-horizontal:before {
|
|
content: "\f16e"; }
|
|
|
|
.wsk-icon--border-inner:before {
|
|
content: "\f16f"; }
|
|
|
|
.wsk-icon--border-left:before {
|
|
content: "\f170"; }
|
|
|
|
.wsk-icon--border-outer:before {
|
|
content: "\f171"; }
|
|
|
|
.wsk-icon--border-right:before {
|
|
content: "\f172"; }
|
|
|
|
.wsk-icon--border-style:before {
|
|
content: "\f173"; }
|
|
|
|
.wsk-icon--border-top:before {
|
|
content: "\f174"; }
|
|
|
|
.wsk-icon--border-vertical:before {
|
|
content: "\f175"; }
|
|
|
|
.wsk-icon--format-align-center:before {
|
|
content: "\f176"; }
|
|
|
|
.wsk-icon--format-align-justify:before {
|
|
content: "\f177"; }
|
|
|
|
.wsk-icon--format-align-left:before {
|
|
content: "\f178"; }
|
|
|
|
.wsk-icon--format-align-right:before {
|
|
content: "\f179"; }
|
|
|
|
.wsk-icon--format-bold:before {
|
|
content: "\f17a"; }
|
|
|
|
.wsk-icon--format-clear:before {
|
|
content: "\f17b"; }
|
|
|
|
.wsk-icon--format-color-fill:before {
|
|
content: "\f17c"; }
|
|
|
|
.wsk-icon--format-color-reset:before {
|
|
content: "\f17d"; }
|
|
|
|
.wsk-icon--format-color-text:before {
|
|
content: "\f17e"; }
|
|
|
|
.wsk-icon--format-indent-decrease:before {
|
|
content: "\f17f"; }
|
|
|
|
.wsk-icon--format-indent-increase:before {
|
|
content: "\f180"; }
|
|
|
|
.wsk-icon--format-italic:before {
|
|
content: "\f181"; }
|
|
|
|
.wsk-icon--format-line-spacing:before {
|
|
content: "\f182"; }
|
|
|
|
.wsk-icon--format-list-bulleted:before {
|
|
content: "\f183"; }
|
|
|
|
.wsk-icon--format-list-numbered:before {
|
|
content: "\f184"; }
|
|
|
|
.wsk-icon--format-paint:before {
|
|
content: "\f185"; }
|
|
|
|
.wsk-icon--format-quote:before {
|
|
content: "\f186"; }
|
|
|
|
.wsk-icon--format-size:before {
|
|
content: "\f187"; }
|
|
|
|
.wsk-icon--format-strikethrough:before {
|
|
content: "\f188"; }
|
|
|
|
.wsk-icon--format-textdirection-l-to-r:before {
|
|
content: "\f189"; }
|
|
|
|
.wsk-icon--format-textdirection-r-to-l:before {
|
|
content: "\f18a"; }
|
|
|
|
.wsk-icon--format-underline:before {
|
|
content: "\f18b"; }
|
|
|
|
.wsk-icon--functions:before {
|
|
content: "\f18c"; }
|
|
|
|
.wsk-icon--insert-chart:before {
|
|
content: "\f18d"; }
|
|
|
|
.wsk-icon--insert-comment:before {
|
|
content: "\f18e"; }
|
|
|
|
.wsk-icon--insert-drive-file:before {
|
|
content: "\f18f"; }
|
|
|
|
.wsk-icon--insert-emoticon:before {
|
|
content: "\f190"; }
|
|
|
|
.wsk-icon--insert-invitation:before {
|
|
content: "\f191"; }
|
|
|
|
.wsk-icon--insert-link:before {
|
|
content: "\f192"; }
|
|
|
|
.wsk-icon--insert-photo:before {
|
|
content: "\f193"; }
|
|
|
|
.wsk-icon--merge-type:before {
|
|
content: "\f194"; }
|
|
|
|
.wsk-icon--mode-comment:before {
|
|
content: "\f195"; }
|
|
|
|
.wsk-icon--mode-edit:before {
|
|
content: "\f196"; }
|
|
|
|
.wsk-icon--publish:before {
|
|
content: "\f197"; }
|
|
|
|
.wsk-icon--vertical-align-bottom:before {
|
|
content: "\f198"; }
|
|
|
|
.wsk-icon--vertical-align-center:before {
|
|
content: "\f199"; }
|
|
|
|
.wsk-icon--vertical-align-top:before {
|
|
content: "\f19a"; }
|
|
|
|
.wsk-icon--wrap-text:before {
|
|
content: "\f19b"; }
|
|
|
|
.wsk-icon--attachment:before {
|
|
content: "\f19c"; }
|
|
|
|
.wsk-icon--cloud:before {
|
|
content: "\f19d"; }
|
|
|
|
.wsk-icon--cloud-circle:before {
|
|
content: "\f19e"; }
|
|
|
|
.wsk-icon--cloud-done:before {
|
|
content: "\f19f"; }
|
|
|
|
.wsk-icon--cloud-download:before {
|
|
content: "\f1a0"; }
|
|
|
|
.wsk-icon--cloud-off:before {
|
|
content: "\f1a1"; }
|
|
|
|
.wsk-icon--cloud-queue:before {
|
|
content: "\f1a2"; }
|
|
|
|
.wsk-icon--cloud-upload:before {
|
|
content: "\f1a3"; }
|
|
|
|
.wsk-icon--file-download:before {
|
|
content: "\f1a4"; }
|
|
|
|
.wsk-icon--file-upload:before {
|
|
content: "\f1a5"; }
|
|
|
|
.wsk-icon--folder:before {
|
|
content: "\f1a6"; }
|
|
|
|
.wsk-icon--folder-open:before {
|
|
content: "\f1a7"; }
|
|
|
|
.wsk-icon--folder-shared:before {
|
|
content: "\f1a8"; }
|
|
|
|
.wsk-icon--cast:before {
|
|
content: "\f1a9"; }
|
|
|
|
.wsk-icon--cast-connected:before {
|
|
content: "\f1aa"; }
|
|
|
|
.wsk-icon--computer:before {
|
|
content: "\f1ab"; }
|
|
|
|
.wsk-icon--desktop-mac:before {
|
|
content: "\f1ac"; }
|
|
|
|
.wsk-icon--desktop-windows:before {
|
|
content: "\f1ad"; }
|
|
|
|
.wsk-icon--dock:before {
|
|
content: "\f1ae"; }
|
|
|
|
.wsk-icon--gamepad:before {
|
|
content: "\f1af"; }
|
|
|
|
.wsk-icon--headset:before {
|
|
content: "\f1b0"; }
|
|
|
|
.wsk-icon--headset-mic:before {
|
|
content: "\f1b1"; }
|
|
|
|
.wsk-icon--keyboard:before {
|
|
content: "\f1b2"; }
|
|
|
|
.wsk-icon--keyboard-alt:before {
|
|
content: "\f1b3"; }
|
|
|
|
.wsk-icon--keyboard-arrow-down:before {
|
|
content: "\f1b4"; }
|
|
|
|
.wsk-icon--keyboard-arrow-left:before {
|
|
content: "\f1b5"; }
|
|
|
|
.wsk-icon--keyboard-arrow-right:before {
|
|
content: "\f1b6"; }
|
|
|
|
.wsk-icon--keyboard-arrow-up:before {
|
|
content: "\f1b7"; }
|
|
|
|
.wsk-icon--keyboard-backspace:before {
|
|
content: "\f1b8"; }
|
|
|
|
.wsk-icon--keyboard-capslock:before {
|
|
content: "\f1b9"; }
|
|
|
|
.wsk-icon--keyboard-control:before {
|
|
content: "\f1ba"; }
|
|
|
|
.wsk-icon--keyboard-hide:before {
|
|
content: "\f1bb"; }
|
|
|
|
.wsk-icon--keyboard-return:before {
|
|
content: "\f1bc"; }
|
|
|
|
.wsk-icon--keyboard-tab:before {
|
|
content: "\f1bd"; }
|
|
|
|
.wsk-icon--keyboard-voice:before {
|
|
content: "\f1be"; }
|
|
|
|
.wsk-icon--laptop:before {
|
|
content: "\f1bf"; }
|
|
|
|
.wsk-icon--laptop-chromebook:before {
|
|
content: "\f1c0"; }
|
|
|
|
.wsk-icon--laptop-mac:before {
|
|
content: "\f1c1"; }
|
|
|
|
.wsk-icon--laptop-windows:before {
|
|
content: "\f1c2"; }
|
|
|
|
.wsk-icon--memory:before {
|
|
content: "\f1c3"; }
|
|
|
|
.wsk-icon--mouse:before {
|
|
content: "\f1c4"; }
|
|
|
|
.wsk-icon--phone-android:before {
|
|
content: "\f1c5"; }
|
|
|
|
.wsk-icon--phone-iphone:before {
|
|
content: "\f1c6"; }
|
|
|
|
.wsk-icon--phonelink:before {
|
|
content: "\f1c7"; }
|
|
|
|
.wsk-icon--phonelink-off:before {
|
|
content: "\f1c8"; }
|
|
|
|
.wsk-icon--security:before {
|
|
content: "\f1c9"; }
|
|
|
|
.wsk-icon--sim-card:before {
|
|
content: "\f1ca"; }
|
|
|
|
.wsk-icon--smartphone:before {
|
|
content: "\f1cb"; }
|
|
|
|
.wsk-icon--speaker:before {
|
|
content: "\f1cc"; }
|
|
|
|
.wsk-icon--tablet:before {
|
|
content: "\f1cd"; }
|
|
|
|
.wsk-icon--tablet-android:before {
|
|
content: "\f1ce"; }
|
|
|
|
.wsk-icon--tablet-mac:before {
|
|
content: "\f1cf"; }
|
|
|
|
.wsk-icon--tv:before {
|
|
content: "\f1d0"; }
|
|
|
|
.wsk-icon--watch:before {
|
|
content: "\f1d1"; }
|
|
|
|
.wsk-icon--add-to-photos:before {
|
|
content: "\f1d2"; }
|
|
|
|
.wsk-icon--adjust:before {
|
|
content: "\f1d3"; }
|
|
|
|
.wsk-icon--assistant-photo:before {
|
|
content: "\f1d4"; }
|
|
|
|
.wsk-icon--audiotrack:before {
|
|
content: "\f1d5"; }
|
|
|
|
.wsk-icon--blur-circular:before {
|
|
content: "\f1d6"; }
|
|
|
|
.wsk-icon--blur-linear:before {
|
|
content: "\f1d7"; }
|
|
|
|
.wsk-icon--blur-off:before {
|
|
content: "\f1d8"; }
|
|
|
|
.wsk-icon--blur-on:before {
|
|
content: "\f1d9"; }
|
|
|
|
.wsk-icon--brightness-1:before {
|
|
content: "\f1da"; }
|
|
|
|
.wsk-icon--brightness-2:before {
|
|
content: "\f1db"; }
|
|
|
|
.wsk-icon--brightness-3:before {
|
|
content: "\f1dc"; }
|
|
|
|
.wsk-icon--brightness-4:before {
|
|
content: "\f1dd"; }
|
|
|
|
.wsk-icon--brightness-5:before {
|
|
content: "\f1de"; }
|
|
|
|
.wsk-icon--brightness-6:before {
|
|
content: "\f1df"; }
|
|
|
|
.wsk-icon--brightness-7:before {
|
|
content: "\f1e0"; }
|
|
|
|
.wsk-icon--brush:before {
|
|
content: "\f1e1"; }
|
|
|
|
.wsk-icon--camera:before {
|
|
content: "\f1e2"; }
|
|
|
|
.wsk-icon--camera-alt:before {
|
|
content: "\f1e3"; }
|
|
|
|
.wsk-icon--camera-front:before {
|
|
content: "\f1e4"; }
|
|
|
|
.wsk-icon--camera-rear:before {
|
|
content: "\f1e5"; }
|
|
|
|
.wsk-icon--camera-roll:before {
|
|
content: "\f1e6"; }
|
|
|
|
.wsk-icon--center-focus-strong:before {
|
|
content: "\f1e7"; }
|
|
|
|
.wsk-icon--center-focus-weak:before {
|
|
content: "\f1e8"; }
|
|
|
|
.wsk-icon--collections:before {
|
|
content: "\f1e9"; }
|
|
|
|
.wsk-icon--colorize:before {
|
|
content: "\f1ea"; }
|
|
|
|
.wsk-icon--color-lens:before {
|
|
content: "\f1eb"; }
|
|
|
|
.wsk-icon--compare:before {
|
|
content: "\f1ec"; }
|
|
|
|
.wsk-icon--control-point:before {
|
|
content: "\f1ed"; }
|
|
|
|
.wsk-icon--control-point-duplicate:before {
|
|
content: "\f1ee"; }
|
|
|
|
.wsk-icon--crop:before {
|
|
content: "\f1ef"; }
|
|
|
|
.wsk-icon--crop-3-2:before {
|
|
content: "\f1f0"; }
|
|
|
|
.wsk-icon--crop-5-4:before {
|
|
content: "\f1f1"; }
|
|
|
|
.wsk-icon--crop-7-5:before {
|
|
content: "\f1f2"; }
|
|
|
|
.wsk-icon--crop-16-9:before {
|
|
content: "\f1f3"; }
|
|
|
|
.wsk-icon--crop-din:before {
|
|
content: "\f1f4"; }
|
|
|
|
.wsk-icon--crop-free:before {
|
|
content: "\f1f5"; }
|
|
|
|
.wsk-icon--crop-landscape:before {
|
|
content: "\f1f6"; }
|
|
|
|
.wsk-icon--crop-original:before {
|
|
content: "\f1f7"; }
|
|
|
|
.wsk-icon--crop-portrait:before {
|
|
content: "\f1f8"; }
|
|
|
|
.wsk-icon--crop-square:before {
|
|
content: "\f1f9"; }
|
|
|
|
.wsk-icon--dehaze:before {
|
|
content: "\f1fa"; }
|
|
|
|
.wsk-icon--details:before {
|
|
content: "\f1fb"; }
|
|
|
|
.wsk-icon--edit:before {
|
|
content: "\f1fc"; }
|
|
|
|
.wsk-icon--exposure:before {
|
|
content: "\f1fd"; }
|
|
|
|
.wsk-icon--exposure-minus-1:before {
|
|
content: "\f1fe"; }
|
|
|
|
.wsk-icon--exposure-minus-2:before {
|
|
content: "\f1ff"; }
|
|
|
|
.wsk-icon--exposure-zero:before {
|
|
content: "\f200"; }
|
|
|
|
.wsk-icon--exposure-plus-1:before {
|
|
content: "\f201"; }
|
|
|
|
.wsk-icon--exposure-plus-2:before {
|
|
content: "\f202"; }
|
|
|
|
.wsk-icon--filter:before {
|
|
content: "\f203"; }
|
|
|
|
.wsk-icon--filter-1:before {
|
|
content: "\f204"; }
|
|
|
|
.wsk-icon--filter-2:before {
|
|
content: "\f205"; }
|
|
|
|
.wsk-icon--filter-3:before {
|
|
content: "\f206"; }
|
|
|
|
.wsk-icon--filter-4:before {
|
|
content: "\f207"; }
|
|
|
|
.wsk-icon--filter-5:before {
|
|
content: "\f208"; }
|
|
|
|
.wsk-icon--filter-6:before {
|
|
content: "\f209"; }
|
|
|
|
.wsk-icon--filter-7:before {
|
|
content: "\f20a"; }
|
|
|
|
.wsk-icon--filter-8:before {
|
|
content: "\f20b"; }
|
|
|
|
.wsk-icon--filter-9:before {
|
|
content: "\f20c"; }
|
|
|
|
.wsk-icon--filter-9-plus:before {
|
|
content: "\f20d"; }
|
|
|
|
.wsk-icon--filter-b-and-w:before {
|
|
content: "\f20e"; }
|
|
|
|
.wsk-icon--filter-center-focus:before {
|
|
content: "\f20f"; }
|
|
|
|
.wsk-icon--filter-drama:before {
|
|
content: "\f210"; }
|
|
|
|
.wsk-icon--filter-frames:before {
|
|
content: "\f211"; }
|
|
|
|
.wsk-icon--filter-hdr:before {
|
|
content: "\f212"; }
|
|
|
|
.wsk-icon--filter-none:before {
|
|
content: "\f213"; }
|
|
|
|
.wsk-icon--filter-tilt-shift:before {
|
|
content: "\f214"; }
|
|
|
|
.wsk-icon--filter-vintage:before {
|
|
content: "\f215"; }
|
|
|
|
.wsk-icon--flare:before {
|
|
content: "\f216"; }
|
|
|
|
.wsk-icon--flash-auto:before {
|
|
content: "\f217"; }
|
|
|
|
.wsk-icon--flash-off:before {
|
|
content: "\f218"; }
|
|
|
|
.wsk-icon--flash-on:before {
|
|
content: "\f219"; }
|
|
|
|
.wsk-icon--flip:before {
|
|
content: "\f21a"; }
|
|
|
|
.wsk-icon--gradient:before {
|
|
content: "\f21b"; }
|
|
|
|
.wsk-icon--grain:before {
|
|
content: "\f21c"; }
|
|
|
|
.wsk-icon--grid-off:before {
|
|
content: "\f21d"; }
|
|
|
|
.wsk-icon--grid-on:before {
|
|
content: "\f21e"; }
|
|
|
|
.wsk-icon--hdr-off:before {
|
|
content: "\f21f"; }
|
|
|
|
.wsk-icon--hdr-on:before {
|
|
content: "\f220"; }
|
|
|
|
.wsk-icon--hdr-strong:before {
|
|
content: "\f221"; }
|
|
|
|
.wsk-icon--hdr-weak:before {
|
|
content: "\f222"; }
|
|
|
|
.wsk-icon--healing:before {
|
|
content: "\f223"; }
|
|
|
|
.wsk-icon--image:before {
|
|
content: "\f224"; }
|
|
|
|
.wsk-icon--image-aspect-ratio:before {
|
|
content: "\f225"; }
|
|
|
|
.wsk-icon--iso:before {
|
|
content: "\f226"; }
|
|
|
|
.wsk-icon--landscape:before {
|
|
content: "\f227"; }
|
|
|
|
.wsk-icon--leak-add:before {
|
|
content: "\f228"; }
|
|
|
|
.wsk-icon--leak-remove:before {
|
|
content: "\f229"; }
|
|
|
|
.wsk-icon--lens:before {
|
|
content: "\f22a"; }
|
|
|
|
.wsk-icon--looks:before {
|
|
content: "\f22b"; }
|
|
|
|
.wsk-icon--looks-1:before {
|
|
content: "\f22c"; }
|
|
|
|
.wsk-icon--looks-2:before {
|
|
content: "\f22d"; }
|
|
|
|
.wsk-icon--looks-3:before {
|
|
content: "\f22e"; }
|
|
|
|
.wsk-icon--looks-4:before {
|
|
content: "\f22f"; }
|
|
|
|
.wsk-icon--looks-5:before {
|
|
content: "\f230"; }
|
|
|
|
.wsk-icon--looks-6:before {
|
|
content: "\f231"; }
|
|
|
|
.wsk-icon--looks-one:before {
|
|
content: "\f22c"; }
|
|
|
|
.wsk-icon--looks-two:before {
|
|
content: "\f22d"; }
|
|
|
|
.wsk-icon--loupe:before {
|
|
content: "\f232"; }
|
|
|
|
.wsk-icon--movie-creation:before {
|
|
content: "\f233"; }
|
|
|
|
.wsk-icon--nature:before {
|
|
content: "\f234"; }
|
|
|
|
.wsk-icon--nature-people:before {
|
|
content: "\f235"; }
|
|
|
|
.wsk-icon--navigate-before:before {
|
|
content: "\f236"; }
|
|
|
|
.wsk-icon--navigate-next:before {
|
|
content: "\f237"; }
|
|
|
|
.wsk-icon--palette:before {
|
|
content: "\f238"; }
|
|
|
|
.wsk-icon--panorama:before {
|
|
content: "\f239"; }
|
|
|
|
.wsk-icon--panorama-fisheye:before {
|
|
content: "\f23a"; }
|
|
|
|
.wsk-icon--panorama-horizontal:before {
|
|
content: "\f23b"; }
|
|
|
|
.wsk-icon--panorama-vertical:before {
|
|
content: "\f23c"; }
|
|
|
|
.wsk-icon--panorama-wide-angle:before {
|
|
content: "\f23d"; }
|
|
|
|
.wsk-icon--photo:before {
|
|
content: "\f23e"; }
|
|
|
|
.wsk-icon--photo-album:before {
|
|
content: "\f23f"; }
|
|
|
|
.wsk-icon--photo-camera:before {
|
|
content: "\f240"; }
|
|
|
|
.wsk-icon--photo-library:before {
|
|
content: "\f241"; }
|
|
|
|
.wsk-icon--portrait:before {
|
|
content: "\f242"; }
|
|
|
|
.wsk-icon--remove-red-eye:before {
|
|
content: "\f243"; }
|
|
|
|
.wsk-icon--rotate-left:before {
|
|
content: "\f244"; }
|
|
|
|
.wsk-icon--rotate-right:before {
|
|
content: "\f245"; }
|
|
|
|
.wsk-icon--slideshow:before {
|
|
content: "\f246"; }
|
|
|
|
.wsk-icon--straighten:before {
|
|
content: "\f247"; }
|
|
|
|
.wsk-icon--style:before {
|
|
content: "\f248"; }
|
|
|
|
.wsk-icon--switch-camera:before {
|
|
content: "\f249"; }
|
|
|
|
.wsk-icon--switch-video:before {
|
|
content: "\f24a"; }
|
|
|
|
.wsk-icon--tag-faces:before {
|
|
content: "\f24b"; }
|
|
|
|
.wsk-icon--texture:before {
|
|
content: "\f24c"; }
|
|
|
|
.wsk-icon--timelapse:before {
|
|
content: "\f24d"; }
|
|
|
|
.wsk-icon--timer:before {
|
|
content: "\f24e"; }
|
|
|
|
.wsk-icon--timer-3:before {
|
|
content: "\f24f"; }
|
|
|
|
.wsk-icon--timer-10:before {
|
|
content: "\f250"; }
|
|
|
|
.wsk-icon--timer-auto:before {
|
|
content: "\f251"; }
|
|
|
|
.wsk-icon--timer-off:before {
|
|
content: "\f252"; }
|
|
|
|
.wsk-icon--tonality:before {
|
|
content: "\f253"; }
|
|
|
|
.wsk-icon--transform:before {
|
|
content: "\f254"; }
|
|
|
|
.wsk-icon--tune:before {
|
|
content: "\f255"; }
|
|
|
|
.wsk-icon--wb-auto:before {
|
|
content: "\f256"; }
|
|
|
|
.wsk-icon--wb-cloudy:before {
|
|
content: "\f257"; }
|
|
|
|
.wsk-icon--wb-incandescent:before {
|
|
content: "\f258"; }
|
|
|
|
.wsk-icon--wb-irradescent:before {
|
|
content: "\f259"; }
|
|
|
|
.wsk-icon--wb-sunny:before {
|
|
content: "\f25a"; }
|
|
|
|
.wsk-icon--beenhere:before {
|
|
content: "\f25b"; }
|
|
|
|
.wsk-icon--directions:before {
|
|
content: "\f25c"; }
|
|
|
|
.wsk-icon--directions-bike:before {
|
|
content: "\f25d"; }
|
|
|
|
.wsk-icon--directions-bus:before {
|
|
content: "\f25e"; }
|
|
|
|
.wsk-icon--directions-car:before {
|
|
content: "\f25f"; }
|
|
|
|
.wsk-icon--directions-ferry:before {
|
|
content: "\f260"; }
|
|
|
|
.wsk-icon--directions-subway:before {
|
|
content: "\f261"; }
|
|
|
|
.wsk-icon--directions-train:before {
|
|
content: "\f262"; }
|
|
|
|
.wsk-icon--directions-transit:before {
|
|
content: "\f263"; }
|
|
|
|
.wsk-icon--directions-walk:before {
|
|
content: "\f264"; }
|
|
|
|
.wsk-icon--flight:before {
|
|
content: "\f265"; }
|
|
|
|
.wsk-icon--hotel:before {
|
|
content: "\f266"; }
|
|
|
|
.wsk-icon--layers:before {
|
|
content: "\f267"; }
|
|
|
|
.wsk-icon--layers-clear:before {
|
|
content: "\f268"; }
|
|
|
|
.wsk-icon--local-airport:before {
|
|
content: "\f269"; }
|
|
|
|
.wsk-icon--local-atm:before {
|
|
content: "\f26a"; }
|
|
|
|
.wsk-icon--local-attraction:before {
|
|
content: "\f26b"; }
|
|
|
|
.wsk-icon--local-bar:before {
|
|
content: "\f26c"; }
|
|
|
|
.wsk-icon--local-cafe:before {
|
|
content: "\f26d"; }
|
|
|
|
.wsk-icon--local-car-wash:before {
|
|
content: "\f26e"; }
|
|
|
|
.wsk-icon--local-convenience-store:before {
|
|
content: "\f26f"; }
|
|
|
|
.wsk-icon--local-drink:before {
|
|
content: "\f270"; }
|
|
|
|
.wsk-icon--local-florist:before {
|
|
content: "\f271"; }
|
|
|
|
.wsk-icon--local-gas-station:before {
|
|
content: "\f272"; }
|
|
|
|
.wsk-icon--local-grocery-store:before {
|
|
content: "\f273"; }
|
|
|
|
.wsk-icon--local-hospital:before {
|
|
content: "\f274"; }
|
|
|
|
.wsk-icon--local-hotel:before {
|
|
content: "\f275"; }
|
|
|
|
.wsk-icon--local-laundry-service:before {
|
|
content: "\f276"; }
|
|
|
|
.wsk-icon--local-library:before {
|
|
content: "\f277"; }
|
|
|
|
.wsk-icon--local-mall:before {
|
|
content: "\f278"; }
|
|
|
|
.wsk-icon--local-movies:before {
|
|
content: "\f279"; }
|
|
|
|
.wsk-icon--local-offer:before {
|
|
content: "\f27a"; }
|
|
|
|
.wsk-icon--local-parking:before {
|
|
content: "\f27b"; }
|
|
|
|
.wsk-icon--local-pharmacy:before {
|
|
content: "\f27c"; }
|
|
|
|
.wsk-icon--local-phone:before {
|
|
content: "\f27d"; }
|
|
|
|
.wsk-icon--local-pizza:before {
|
|
content: "\f27e"; }
|
|
|
|
.wsk-icon--local-play:before {
|
|
content: "\f27f"; }
|
|
|
|
.wsk-icon--local-post-office:before {
|
|
content: "\f280"; }
|
|
|
|
.wsk-icon--local-print-shop:before {
|
|
content: "\f281"; }
|
|
|
|
.wsk-icon--local-restaurant:before {
|
|
content: "\f282"; }
|
|
|
|
.wsk-icon--local-see:before {
|
|
content: "\f283"; }
|
|
|
|
.wsk-icon--local-shipping:before {
|
|
content: "\f284"; }
|
|
|
|
.wsk-icon--local-taxi:before {
|
|
content: "\f285"; }
|
|
|
|
.wsk-icon--location-history:before {
|
|
content: "\f286"; }
|
|
|
|
.wsk-icon--map:before {
|
|
content: "\f287"; }
|
|
|
|
.wsk-icon--my-location:before {
|
|
content: "\f288"; }
|
|
|
|
.wsk-icon--navigation:before {
|
|
content: "\f289"; }
|
|
|
|
.wsk-icon--pin-drop:before {
|
|
content: "\f28a"; }
|
|
|
|
.wsk-icon--place:before {
|
|
content: "\f28b"; }
|
|
|
|
.wsk-icon--rate-review:before {
|
|
content: "\f28c"; }
|
|
|
|
.wsk-icon--restaurant-menu:before {
|
|
content: "\f28d"; }
|
|
|
|
.wsk-icon--satellite:before {
|
|
content: "\f28e"; }
|
|
|
|
.wsk-icon--store-mall-directory:before {
|
|
content: "\f28f"; }
|
|
|
|
.wsk-icon--terrain:before {
|
|
content: "\f290"; }
|
|
|
|
.wsk-icon--traffic:before {
|
|
content: "\f291"; }
|
|
|
|
.wsk-icon--apps:before {
|
|
content: "\f292"; }
|
|
|
|
.wsk-icon--cancel:before {
|
|
content: "\f293"; }
|
|
|
|
.wsk-icon--arrow-drop-down-circle:before {
|
|
content: "\f294"; }
|
|
|
|
.wsk-icon--arrow-drop-down:before {
|
|
content: "\f295"; }
|
|
|
|
.wsk-icon--arrow-drop-up:before {
|
|
content: "\f296"; }
|
|
|
|
.wsk-icon--arrow-back:before {
|
|
content: "\f297"; }
|
|
|
|
.wsk-icon--arrow-forward:before {
|
|
content: "\f298"; }
|
|
|
|
.wsk-icon--check:before {
|
|
content: "\f299"; }
|
|
|
|
.wsk-icon--close:before {
|
|
content: "\f29a"; }
|
|
|
|
.wsk-icon--chevron-left:before {
|
|
content: "\f29b"; }
|
|
|
|
.wsk-icon--chevron-right:before {
|
|
content: "\f29c"; }
|
|
|
|
.wsk-icon--expand-less:before {
|
|
content: "\f29d"; }
|
|
|
|
.wsk-icon--expand-more:before {
|
|
content: "\f29e"; }
|
|
|
|
.wsk-icon--fullscreen:before {
|
|
content: "\f29f"; }
|
|
|
|
.wsk-icon--fullscreen-exit:before {
|
|
content: "\f2a0"; }
|
|
|
|
.wsk-icon--menu:before {
|
|
content: "\f2a1"; }
|
|
|
|
.wsk-icon--more-horiz:before {
|
|
content: "\f2a2"; }
|
|
|
|
.wsk-icon--more-vert:before {
|
|
content: "\f2a3"; }
|
|
|
|
.wsk-icon--refresh:before {
|
|
content: "\f2a4"; }
|
|
|
|
.wsk-icon--unfold-less:before {
|
|
content: "\f2a5"; }
|
|
|
|
.wsk-icon--unfold-more:before {
|
|
content: "\f2a6"; }
|
|
|
|
.wsk-icon--adb:before {
|
|
content: "\f2a7"; }
|
|
|
|
.wsk-icon--bluetooth-audio:before {
|
|
content: "\f2a8"; }
|
|
|
|
.wsk-icon--disc-full:before {
|
|
content: "\f2a9"; }
|
|
|
|
.wsk-icon--dnd-forwardslash:before {
|
|
content: "\f2aa"; }
|
|
|
|
.wsk-icon--do-not-disturb:before {
|
|
content: "\f2ab"; }
|
|
|
|
.wsk-icon--drive-eta:before {
|
|
content: "\f2ac"; }
|
|
|
|
.wsk-icon--event-available:before {
|
|
content: "\f2ad"; }
|
|
|
|
.wsk-icon--event-busy:before {
|
|
content: "\f2ae"; }
|
|
|
|
.wsk-icon--event-note:before {
|
|
content: "\f2af"; }
|
|
|
|
.wsk-icon--folder-special:before {
|
|
content: "\f2b0"; }
|
|
|
|
.wsk-icon--mms:before {
|
|
content: "\f2b1"; }
|
|
|
|
.wsk-icon--more:before {
|
|
content: "\f2b2"; }
|
|
|
|
.wsk-icon--network-locked:before {
|
|
content: "\f2b3"; }
|
|
|
|
.wsk-icon--phone-bluetooth-speaker:before {
|
|
content: "\f2b4"; }
|
|
|
|
.wsk-icon--phone-forwarded:before {
|
|
content: "\f2b5"; }
|
|
|
|
.wsk-icon--phone-in-talk:before {
|
|
content: "\f2b6"; }
|
|
|
|
.wsk-icon--phone-locked:before {
|
|
content: "\f2b7"; }
|
|
|
|
.wsk-icon--phone-missed:before {
|
|
content: "\f2b8"; }
|
|
|
|
.wsk-icon--phone-paused:before {
|
|
content: "\f2b9"; }
|
|
|
|
.wsk-icon--play-download:before {
|
|
content: "\f2ba"; }
|
|
|
|
.wsk-icon--play-install:before {
|
|
content: "\f2bb"; }
|
|
|
|
.wsk-icon--sd-card:before {
|
|
content: "\f2bc"; }
|
|
|
|
.wsk-icon--sim-card-alert:before {
|
|
content: "\f2bd"; }
|
|
|
|
.wsk-icon--sms:before {
|
|
content: "\f2be"; }
|
|
|
|
.wsk-icon--sms-failed:before {
|
|
content: "\f2bf"; }
|
|
|
|
.wsk-icon--sync:before {
|
|
content: "\f2c0"; }
|
|
|
|
.wsk-icon--sync-disabled:before {
|
|
content: "\f2c1"; }
|
|
|
|
.wsk-icon--sync-problem:before {
|
|
content: "\f2c2"; }
|
|
|
|
.wsk-icon--system-update:before {
|
|
content: "\f2c3"; }
|
|
|
|
.wsk-icon--tap-and-play:before {
|
|
content: "\f2c4"; }
|
|
|
|
.wsk-icon--time-to-leave:before {
|
|
content: "\f2c5"; }
|
|
|
|
.wsk-icon--vibration:before {
|
|
content: "\f2c6"; }
|
|
|
|
.wsk-icon--voice-chat:before {
|
|
content: "\f2c7"; }
|
|
|
|
.wsk-icon--vpn-lock:before {
|
|
content: "\f2c8"; }
|
|
|
|
.wsk-icon--cake:before {
|
|
content: "\f2c9"; }
|
|
|
|
.wsk-icon--domain:before {
|
|
content: "\f2ca"; }
|
|
|
|
.wsk-icon--location-city:before {
|
|
content: "\f2cb"; }
|
|
|
|
.wsk-icon--mood:before {
|
|
content: "\f2cc"; }
|
|
|
|
.wsk-icon--notifications-none:before {
|
|
content: "\f2cd"; }
|
|
|
|
.wsk-icon--notifications:before {
|
|
content: "\f2ce"; }
|
|
|
|
.wsk-icon--notifications-off:before {
|
|
content: "\f2cf"; }
|
|
|
|
.wsk-icon--notifications-on:before {
|
|
content: "\f2d0"; }
|
|
|
|
.wsk-icon--notifications-paused:before {
|
|
content: "\f2d1"; }
|
|
|
|
.wsk-icon--pages:before {
|
|
content: "\f2d2"; }
|
|
|
|
.wsk-icon--party-mode:before {
|
|
content: "\f2d3"; }
|
|
|
|
.wsk-icon--group:before {
|
|
content: "\f2d4"; }
|
|
|
|
.wsk-icon--group-add:before {
|
|
content: "\f2d5"; }
|
|
|
|
.wsk-icon--people:before {
|
|
content: "\f2d6"; }
|
|
|
|
.wsk-icon--people-outline:before {
|
|
content: "\f2d7"; }
|
|
|
|
.wsk-icon--person:before {
|
|
content: "\f2d8"; }
|
|
|
|
.wsk-icon--person-add:before {
|
|
content: "\f2d9"; }
|
|
|
|
.wsk-icon--person-outline:before {
|
|
content: "\f2da"; }
|
|
|
|
.wsk-icon--plus-one:before {
|
|
content: "\f2db"; }
|
|
|
|
.wsk-icon--poll:before {
|
|
content: "\f2dc"; }
|
|
|
|
.wsk-icon--public:before {
|
|
content: "\f2dd"; }
|
|
|
|
.wsk-icon--school:before {
|
|
content: "\f2de"; }
|
|
|
|
.wsk-icon--share:before {
|
|
content: "\f2df"; }
|
|
|
|
.wsk-icon--whatshot:before {
|
|
content: "\f2e0"; }
|
|
|
|
.wsk-icon--check-box:before {
|
|
content: "\f2e1"; }
|
|
|
|
.wsk-icon--check-box-outline-blank:before {
|
|
content: "\f2e2"; }
|
|
|
|
.wsk-icon--radio-button-off:before {
|
|
content: "\f2e3"; }
|
|
|
|
.wsk-icon--radio-button-on:before {
|
|
content: "\f2e4"; }
|
|
|
|
.wsk-icon--star:before {
|
|
content: "\f2e5"; }
|
|
|
|
.wsk-icon--star-half:before {
|
|
content: "\f2e6"; }
|
|
|
|
.wsk-icon--star-outline:before {
|
|
content: "\f2e7"; }
|
|
|
|
.wsk-navigation {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-flex-wrap: nowrap;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap; }
|
|
|
|
.wsk-navigation__link {
|
|
color: rgb(66,66,66);
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
margin: 0; }
|
|
|
|
.wsk-navigation__link:hover {
|
|
background-color: rgb(224,224,224); }
|
|
|
|
.wsk-layout {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
position: relative; }
|
|
|
|
.wsk-layout__container {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%; }
|
|
|
|
.wsk-layout-title {
|
|
display: block;
|
|
position: relative;
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em;
|
|
box-sizing: border-box; }
|
|
|
|
.wsk-layout-spacer {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex-grow: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1; }
|
|
|
|
.wsk-layout__drawer {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-flex-wrap: nowrap;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
width: 240px;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
|
|
box-sizing: border-box;
|
|
border-right: 1px solid rgb(224,224,224);
|
|
background: rgb(250,250,250);
|
|
-webkit-transform: translateX(-250px);
|
|
-ms-transform: translateX(-250px);
|
|
transform: translateX(-250px);
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
will-change: transform;
|
|
-webkit-transition-duration: 0.2s;
|
|
transition-duration: 0.2s;
|
|
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
-webkit-transition-property: -webkit-transform;
|
|
transition-property: transform;
|
|
color: rgb(66,66,66);
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
z-index: 5; }
|
|
.wsk-layout__drawer.is-visible {
|
|
-webkit-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
transform: translateX(0); }
|
|
.wsk-layout__drawer > * {
|
|
-webkit-flex-shrink: 0;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0; }
|
|
.wsk-layout__drawer > .wsk-layout-title {
|
|
line-height: 64px;
|
|
padding-left: 24px;
|
|
border-bottom: 1px solid rgb(224,224,224); }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__drawer > .wsk-layout-title {
|
|
line-height: 56px;
|
|
padding-left: 16px; } }
|
|
.wsk-layout__drawer .wsk-navigation {
|
|
width: 100%;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column; }
|
|
.wsk-layout__drawer .wsk-navigation__link {
|
|
padding: 16px 24px;
|
|
margin: 0; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__drawer .wsk-navigation__link {
|
|
padding: 16px 16px; } }
|
|
@media screen and (min-width: 851px) {
|
|
.wsk-layout--fixed-drawer > .wsk-layout__drawer {
|
|
-webkit-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
transform: translateX(0);
|
|
z-index: 2; } }
|
|
|
|
.wsk-layout__drawer-button {
|
|
display: block;
|
|
position: relative;
|
|
height: 32px;
|
|
width: 32px;
|
|
border: 0;
|
|
-webkit-flex-shrink: 0;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
font-size: 26px;
|
|
line-height: 32px;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
margin: 8px;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
z-index: 3; }
|
|
.wsk-layout__drawer-button::after {
|
|
font-family: 'Material-Design-Iconic-Font';
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
content: "\f2a1"; }
|
|
.wsk-layout--overlay-drawer-button > .wsk-layout__drawer-button {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0; }
|
|
.wsk-layout__header .wsk-layout__drawer-button {
|
|
position: absolute;
|
|
left: 24px;
|
|
top: 16px;
|
|
height: 32px;
|
|
margin: 0;
|
|
width: 32px;
|
|
color: rgb(255,255,255);
|
|
background-color: inherit;
|
|
z-index: 5; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__header .wsk-layout__drawer-button {
|
|
left: 16px;
|
|
top: 12px; } }
|
|
@media screen and (min-width: 851px) {
|
|
.wsk-layout__drawer-button {
|
|
display: none; } }
|
|
|
|
.wsk-layout__header {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: row;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-webkit-flex-wrap: nowrap;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
margin: 0;
|
|
border: none;
|
|
height: 64px;
|
|
min-height: 64px;
|
|
background-color: rgb(63,81,181);
|
|
color: rgb(255,255,255);
|
|
z-index: 3;
|
|
-webkit-transition-duration: 0.2s;
|
|
transition-duration: 0.2s;
|
|
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
|
|
-webkit-transition-property: min-height, box-shadow;
|
|
transition-property: min-height, box-shadow;
|
|
padding-left: 80px;
|
|
overflow: hidden; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__header {
|
|
height: 56px;
|
|
min-height: 56px;
|
|
padding-left: 72px; } }
|
|
.wsk-layout--fixed-drawer:not(.is-small-screen) > .wsk-layout__header {
|
|
padding-left: 24px; }
|
|
.wsk-layout__header > .wsk-layout-icon {
|
|
position: absolute;
|
|
left: 24px;
|
|
top: 16px;
|
|
height: 32px;
|
|
width: 32px;
|
|
overflow: hidden;
|
|
z-index: 3; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__header > .wsk-layout-icon {
|
|
left: 16px;
|
|
top: 12px; } }
|
|
.wsk-layout__header.is-compact {
|
|
min-height: 64px; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__header.is-compact {
|
|
min-height: 56px; } }
|
|
.wsk-layout__header > * {
|
|
-webkit-flex-shrink: 0;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0; }
|
|
.wsk-layout__header > *:last-child {
|
|
margin-right: 24px; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__header > *:last-child {
|
|
margin-right: 16px; } }
|
|
.wsk-layout__header > .wsk-navigation:last-child {
|
|
margin-right: 0; }
|
|
.wsk-layout__header .wsk-layout-title {
|
|
display: block; }
|
|
.wsk-layout__header .wsk-navigation {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 64px;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: row;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__header .wsk-navigation {
|
|
height: 56px; } }
|
|
.wsk-layout__header .wsk-navigation__link {
|
|
color: rgb(255,255,255);
|
|
line-height: 64px;
|
|
padding: 0 24px; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__header .wsk-navigation__link {
|
|
line-height: 56px;
|
|
padding: 0 16px; } }
|
|
.wsk-layout__header .wsk-navigation__link:hover {
|
|
background-color: rgba(97,97,97, 0.6); }
|
|
@media screen and (min-width: 851px) {
|
|
.wsk-layout--fixed-drawer > .wsk-layout__header {
|
|
margin-left: 240px; } }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__header {
|
|
display: none; }
|
|
.wsk-layout--fixed-header > .wsk-layout__header {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex; } }
|
|
|
|
.wsk-layout__header--multi-row {
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column; }
|
|
|
|
.wsk-layout__header--medium-tall {
|
|
min-height: 128px; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__header--medium-tall {
|
|
min-height: 112px; } }
|
|
|
|
.wsk-layout__header--tall {
|
|
min-height: 192px; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__header--tall {
|
|
min-height: 168px; } }
|
|
|
|
.wsk-layout__header--transparent.wsk-layout__header--transparent {
|
|
background-color: transparent;
|
|
box-shadow: none; }
|
|
|
|
.wsk-layout__header--seamed {
|
|
box-shadow: none; }
|
|
|
|
.wsk-layout__header--scroll {
|
|
box-shadow: none; }
|
|
|
|
.wsk-layout__header--waterfall {
|
|
box-shadow: none; }
|
|
.wsk-layout__header--waterfall.is-casting-shadow {
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
|
|
|
|
.wsk-layout__header-row.wsk-layout__header-row {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: row;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-webkit-flex-wrap: nowrap;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
-webkit-flex-shrink: 0;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
min-height: 64px;
|
|
width: 100%;
|
|
margin-right: 0; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__header-row.wsk-layout__header-row {
|
|
min-height: 56px; } }
|
|
.wsk-layout__header-row.wsk-layout__header-row > .wsk-layout-icon {
|
|
position: absolute;
|
|
left: 24px;
|
|
top: 16px;
|
|
height: 32px;
|
|
width: 32px;
|
|
overflow: hidden;
|
|
z-index: 3; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__header-row.wsk-layout__header-row > .wsk-layout-icon {
|
|
left: 16px;
|
|
top: 12px; } }
|
|
.wsk-layout__header-row.wsk-layout__header-row > * {
|
|
-webkit-flex-shrink: 0;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0; }
|
|
.wsk-layout__header-row.wsk-layout__header-row > *:last-child {
|
|
margin-right: 24px; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__header-row.wsk-layout__header-row > *:last-child {
|
|
margin-right: 16px; } }
|
|
.wsk-layout__header-row.wsk-layout__header-row > .wsk-navigation:last-child {
|
|
margin-right: 0; }
|
|
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__obfuscator {
|
|
background-color: transparent;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 4;
|
|
visibility: hidden;
|
|
-webkit-transition-property: background-color;
|
|
transition-property: background-color;
|
|
-webkit-transition-duration: 0.2s;
|
|
transition-duration: 0.2s;
|
|
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.wsk-layout__drawer.is-visible ~ .wsk-layout__obfuscator {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
visibility: visible; } }
|
|
|
|
.wsk-layout__content {
|
|
-ms-flex: 0 1 auto;
|
|
display: inline-block;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex-grow: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
z-index: 1; }
|
|
.wsk-layout--fixed-drawer > .wsk-layout__content {
|
|
margin-left: 240px; }
|
|
.wsk-layout__header--scroll ~ .wsk-layout__content {
|
|
overflow: visible; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout--fixed-drawer > .wsk-layout__content {
|
|
margin-left: 0; }
|
|
.wsk-layout__header--scroll ~ .wsk-layout__content {
|
|
overflow-y: auto;
|
|
overflow-x: hidden; } }
|
|
|
|
.wsk-layout__tab-bar {
|
|
position: absolute;
|
|
top: 0;
|
|
height: 96px;
|
|
width: calc(100% -
|
|
112px);
|
|
padding: 0 0 0 56px;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
background-color: rgb(63,81,181);
|
|
overflow-y: hidden;
|
|
overflow-x: scroll; }
|
|
.wsk-layout__tab-bar::-webkit-scrollbar {
|
|
display: none; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__tab-bar {
|
|
width: calc(100% -
|
|
60px);
|
|
padding: 0 0 0 60px; } }
|
|
.wsk-layout--fixed-tabs .wsk-layout__tab-bar {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
width: 100%; }
|
|
.wsk-layout__tab-bar.is-casting-shadow {
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
|
|
|
|
.wsk-layout__tab-bar-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 48px;
|
|
width: 100%;
|
|
border: none;
|
|
margin: 0;
|
|
z-index: 3;
|
|
-webkit-box-flex: 0;
|
|
-webkit-flex-grow: 0;
|
|
-ms-flex-positive: 0;
|
|
flex-grow: 0;
|
|
-webkit-flex-shrink: 0;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
|
|
.wsk-layout__container > .wsk-layout__tab-bar-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0; }
|
|
|
|
.wsk-layout__tab-bar-button {
|
|
display: inline-block;
|
|
position: absolute;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
width: 56px;
|
|
z-index: 4;
|
|
text-align: center;
|
|
background-color: rgb(63,81,181);
|
|
color: transparent;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__tab-bar-button {
|
|
display: none;
|
|
width: 60px; } }
|
|
.wsk-layout--fixed-tabs .wsk-layout__tab-bar-button {
|
|
display: none; }
|
|
.wsk-layout__tab-bar-button.is-active {
|
|
color: rgb(255,255,255); }
|
|
|
|
.wsk-layout__tab-bar-left-button {
|
|
left: 0; }
|
|
.wsk-layout__tab-bar-left-button::after {
|
|
font-size: 26px;
|
|
font-family: 'Material-Design-Iconic-Font';
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
content: "\f29b"; }
|
|
|
|
.wsk-layout__tab-bar-right-button {
|
|
right: 0; }
|
|
.wsk-layout__tab-bar-right-button::after {
|
|
font-size: 26px;
|
|
font-family: 'Material-Design-Iconic-Font';
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
content: "\f29c"; }
|
|
|
|
.wsk-layout__tab {
|
|
margin: 0;
|
|
border: none;
|
|
padding: 0 24px 0 24px;
|
|
float: left;
|
|
position: relative;
|
|
display: block;
|
|
-webkit-box-flex: 0;
|
|
-webkit-flex-grow: 0;
|
|
-ms-flex-positive: 0;
|
|
flex-grow: 0;
|
|
-webkit-flex-shrink: 0;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
text-decoration: none;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
color: rgba(255,255,255, 0.6);
|
|
overflow: hidden; }
|
|
@media screen and (max-width: 850px) {
|
|
.wsk-layout__tab {
|
|
padding: 0 12px 0 12px; } }
|
|
.wsk-layout--fixed-tabs .wsk-layout__tab {
|
|
float: none;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex-grow: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
padding: 0; }
|
|
.wsk-layout.is-upgraded .wsk-layout__tab.is-active {
|
|
color: rgb(255,255,255); }
|
|
.wsk-layout.is-upgraded .wsk-layout__tab.is-active::after {
|
|
height: 2px;
|
|
width: 100%;
|
|
display: block;
|
|
content: " ";
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
background: rgb(224,224,224);
|
|
-webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0s alternate forwards;
|
|
-moz-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0s alternate forwards;
|
|
-webkit-transition: all 1s cubic-bezier(0.4, 0, 1, 1);
|
|
transition: all 1s cubic-bezier(0.4, 0, 1, 1); }
|
|
.wsk-layout__tab .wsk-layout__tab-ripple-container {
|
|
display: block;
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
overflow: hidden; }
|
|
|
|
.wsk-layout__tab-panel {
|
|
display: block; }
|
|
.wsk-layout.is-upgraded .wsk-layout__tab-panel {
|
|
display: none; }
|
|
.wsk-layout.is-upgraded .wsk-layout__tab-panel.is-active {
|
|
display: block; }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
.wsk-list {
|
|
display: block;
|
|
height: 500px;
|
|
overflow: scroll;
|
|
width: 400px; }
|
|
|
|
.wsk-list--styled-view {
|
|
background: white;
|
|
-webkit-transition: background 0.3s 0.1s;
|
|
transition: background 0.3s 0.1s;
|
|
z-index: 1; }
|
|
|
|
.wsk-list--styled-view ul {
|
|
display: inline;
|
|
list-style-type: none; }
|
|
|
|
.wsk-list--styled-view li {
|
|
border-bottom: 1px solid #ddd;
|
|
height: 70px;
|
|
left: 0;
|
|
right: 0; }
|
|
|
|
.wsk-list--styled-view li:hover {
|
|
background: #efefef; }
|
|
|
|
.wsk-list-view--name {
|
|
-webkit-font-smoothing: antialiased;
|
|
font-smoothing: antialiased; }
|
|
|
|
.wsk-list-view--avatar {
|
|
background: #ddd;
|
|
border-radius: 50%;
|
|
content: '';
|
|
display: inline-block;
|
|
height: 50px;
|
|
margin: 10px 15px;
|
|
vertical-align: middle;
|
|
width: 50px; }
|
|
|
|
.wsk-list--inline {
|
|
list-style: none;
|
|
margin-left: -5px;
|
|
padding-left: 0; }
|
|
|
|
.wsk-list--inline > li {
|
|
display: inline-block;
|
|
padding-left: 5px;
|
|
padding-right: 5px; }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
.wsk-ripple {
|
|
background: rgb(33,33,33);
|
|
border-radius: 50%;
|
|
height: 50px;
|
|
left: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
width: 50px;
|
|
overflow: hidden; }
|
|
.wsk-ripple.is-animating {
|
|
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
|
|
transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1); }
|
|
|
|
.wsk-radio {
|
|
position: relative;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
margin: 12px 0;
|
|
padding-left: 0; }
|
|
.wsk-radio.is-upgraded {
|
|
padding-left: 24px; }
|
|
|
|
.wsk-radio__button {
|
|
line-height: 24px; }
|
|
.wsk-radio.is-upgraded .wsk-radio__button {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
opacity: 0;
|
|
-ms-appearance: none;
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
border: none; }
|
|
|
|
.wsk-radio__outer-circle {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 0;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
border: 2px solid rgba(0, 0, 0, 0.54);
|
|
border-radius: 50%;
|
|
z-index: 2; }
|
|
.wsk-radio.is-checked .wsk-radio__outer-circle {
|
|
border: 2px solid rgb(63,81,181); }
|
|
.wsk-radio.is-disabled .wsk-radio__outer-circle {
|
|
border: 2px solid rgba(0, 0, 0, 0.26);
|
|
cursor: auto; }
|
|
|
|
.wsk-radio__inner-circle {
|
|
position: absolute;
|
|
z-index: 1;
|
|
margin: 0;
|
|
top: 6px;
|
|
left: 4px;
|
|
box-sizing: border-box;
|
|
width: 8px;
|
|
height: 8px;
|
|
cursor: pointer;
|
|
-webkit-transition-duration: 0.28s;
|
|
transition-duration: 0.28s;
|
|
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
-webkit-transition-property: -webkit-transform;
|
|
transition-property: transform;
|
|
-webkit-transform: scale3d(0, 0, 0);
|
|
transform: scale3d(0, 0, 0);
|
|
border-radius: 50%;
|
|
background: rgb(63,81,181); }
|
|
.wsk-radio.is-checked .wsk-radio__inner-circle {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1); }
|
|
.wsk-radio.is-disabled .wsk-radio__inner-circle {
|
|
background: rgba(0, 0, 0, 0.26);
|
|
cursor: auto; }
|
|
.wsk-radio.is-focused .wsk-radio__inner-circle {
|
|
box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1); }
|
|
|
|
.wsk-radio__label {
|
|
cursor: pointer; }
|
|
.wsk-radio.is-disabled .wsk-radio__label {
|
|
color: rgba(0, 0, 0, 0.26);
|
|
cursor: auto; }
|
|
|
|
.wsk-radio__ripple-container {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: -9px;
|
|
left: -13px;
|
|
box-sizing: border-box;
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
-webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
|
|
.wsk-radio__ripple-container .wsk-ripple {
|
|
background: rgb(63,81,181); }
|
|
.wsk-radio.is-disabled .wsk-radio__ripple-container {
|
|
cursor: auto; }
|
|
.wsk-radio.is-disabled .wsk-radio__ripple-container .wsk-ripple {
|
|
background: transparent; }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
_:-ms-input-placeholder, :root .wsk-slider.wsk-slider.is-upgraded {
|
|
-ms-appearance: none;
|
|
height: 32px;
|
|
margin: 0; }
|
|
|
|
.wsk-slider {
|
|
width: calc(100% - 40px);
|
|
margin: 0 20px; }
|
|
.wsk-slider.is-upgraded {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
height: 2px;
|
|
background: transparent;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
outline: 0;
|
|
padding: 0;
|
|
color: rgb(63,81,181);
|
|
-webkit-align-self: center;
|
|
-ms-flex-item-align: center;
|
|
align-self: center;
|
|
/**************************** Tracks ****************************/
|
|
/**************************** Thumbs ****************************/
|
|
/**************************** 0-value ****************************/
|
|
/**************************** Disabled ****************************/ }
|
|
.wsk-slider.is-upgraded::-moz-focus-outer {
|
|
border: 0; }
|
|
.wsk-slider.is-upgraded::-ms-tooltip {
|
|
display: none; }
|
|
.wsk-slider.is-upgraded::-webkit-slider-runnable-track {
|
|
background: transparent; }
|
|
.wsk-slider.is-upgraded::-moz-range-track {
|
|
background: transparent;
|
|
border: none; }
|
|
.wsk-slider.is-upgraded::-ms-track {
|
|
background: none;
|
|
color: transparent;
|
|
height: 2px;
|
|
width: 100%;
|
|
border: none; }
|
|
.wsk-slider.is-upgraded::-ms-fill-lower {
|
|
padding: 0;
|
|
background: linear-gradient(to right, transparent, transparent 16px, rgb(63,81,181) 16px, rgb(63,81,181) 0); }
|
|
.wsk-slider.is-upgraded::-ms-fill-upper {
|
|
padding: 0;
|
|
background: linear-gradient(to left, transparent, transparent 16px, rgba(0, 0, 0, 0.26) 16px, rgba(0, 0, 0, 0.26) 0); }
|
|
.wsk-slider.is-upgraded::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 12px;
|
|
height: 12px;
|
|
box-sizing: border-box;
|
|
border-radius: 50%;
|
|
background: rgb(63,81,181);
|
|
border: none;
|
|
-webkit-transition: -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.wsk-slider.is-upgraded::-moz-range-thumb {
|
|
-moz-appearance: none;
|
|
width: 12px;
|
|
height: 12px;
|
|
box-sizing: border-box;
|
|
border-radius: 50%;
|
|
background-image: none;
|
|
background: rgb(63,81,181);
|
|
border: none; }
|
|
.wsk-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb {
|
|
box-shadow: 0 0 0 10px rgba(63,81,181, 0.26); }
|
|
.wsk-slider.is-upgraded:focus:not(:active)::-moz-range-thumb {
|
|
box-shadow: 0 0 0 10px rgba(63,81,181, 0.26); }
|
|
.wsk-slider.is-upgraded:active::-webkit-slider-thumb {
|
|
background-image: none;
|
|
background: rgb(63,81,181);
|
|
-webkit-transform: scale(1.5);
|
|
transform: scale(1.5); }
|
|
.wsk-slider.is-upgraded:active::-moz-range-thumb {
|
|
background-image: none;
|
|
background: rgb(63,81,181);
|
|
transform: scale(1.5); }
|
|
.wsk-slider.is-upgraded::-ms-thumb {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: rgb(63,81,181);
|
|
-ms-transform: scale(0.375);
|
|
transform: scale(0.375);
|
|
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.wsk-slider.is-upgraded:focus:not(:active)::-ms-thumb {
|
|
background: radial-gradient(circle closest-side, rgb(63,81,181) 0%, rgb(63,81,181) 37.5%, rgba(63,81,181, 0.26) 37.5%, rgba(63,81,181, 0.26) 100%);
|
|
-ms-transform: scale(1);
|
|
transform: scale(1); }
|
|
.wsk-slider.is-upgraded:active::-ms-thumb {
|
|
background: rgb(63,81,181);
|
|
-ms-transform: scale(0.5625);
|
|
transform: scale(0.5625); }
|
|
.wsk-slider.is-upgraded.is-lowest-value::-webkit-slider-thumb {
|
|
border: 2px solid rgba(0, 0, 0, 0.26);
|
|
background: transparent; }
|
|
.wsk-slider.is-upgraded.is-lowest-value::-moz-range-thumb {
|
|
border: 2px solid rgba(0, 0, 0, 0.26);
|
|
background: transparent; }
|
|
.wsk-slider.is-upgraded.is-lowest-value ~ .wsk-slider__background-flex > .wsk-slider__background-upper {
|
|
left: 6px; }
|
|
.wsk-slider.is-upgraded.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
|
|
border: 1.8px solid rgba(0, 0, 0, 0.26);
|
|
-webkit-transform: scale(1.33);
|
|
transform: scale(1.33);
|
|
box-shadow: none; }
|
|
.wsk-slider.is-upgraded.is-lowest-value:focus:not(:active)::-moz-range-thumb {
|
|
border: 1.8px solid rgba(0, 0, 0, 0.26);
|
|
transform: scale(1.33);
|
|
box-shadow: none; }
|
|
.wsk-slider.is-upgraded.is-lowest-value:focus:not(:active) ~ .wsk-slider__background-flex > .wsk-slider__background-upper {
|
|
left: 8px; }
|
|
.wsk-slider.is-upgraded.is-lowest-value:active::-webkit-slider-thumb {
|
|
border: 1.5px solid rgba(0, 0, 0, 0.26);
|
|
-webkit-transform: scale(1.5);
|
|
transform: scale(1.5); }
|
|
.wsk-slider.is-upgraded.is-lowest-value:active ~ .wsk-slider__background-flex > .wsk-slider__background-upper {
|
|
left: 9px; }
|
|
.wsk-slider.is-upgraded.is-lowest-value:active::-moz-range-thumb {
|
|
border: 1.5px solid rgba(0, 0, 0, 0.26);
|
|
transform: scale(1.5); }
|
|
.wsk-slider.is-upgraded.is-lowest-value::-ms-thumb {
|
|
background: radial-gradient(circle closest-side, transparent 0%, transparent 66.67%, rgba(0, 0, 0, 0.26) 66.67%, rgba(0, 0, 0, 0.26) 100%); }
|
|
.wsk-slider.is-upgraded.is-lowest-value:focus:not(:active)::-ms-thumb {
|
|
-ms-transform: scale(0.5);
|
|
transform: scale(0.5);
|
|
background: radial-gradient(circle closest-side, transparent 0%, transparent 75%, rgba(0, 0, 0, 0.26) 75%, rgba(0, 0, 0, 0.26) 100%); }
|
|
.wsk-slider.is-upgraded.is-lowest-value:active::-ms-thumb {
|
|
-ms-transform: scale(0.5625);
|
|
transform: scale(0.5625);
|
|
background: radial-gradient(circle closest-side, transparent 0%, transparent 77.78%, rgba(0, 0, 0, 0.26) 77.78%, rgba(0, 0, 0, 0.26) 100%); }
|
|
.wsk-slider.is-upgraded.is-lowest-value::-ms-fill-lower {
|
|
background: transparent; }
|
|
.wsk-slider.is-upgraded.is-lowest-value::-ms-fill-upper {
|
|
margin-left: 6px; }
|
|
.wsk-slider.is-upgraded.is-lowest-value:focus:not(:active)::-ms-fill-upper {
|
|
margin-left: 8px; }
|
|
.wsk-slider.is-upgraded.is-lowest-value:active::-ms-fill-upper {
|
|
margin-left: 9px; }
|
|
.wsk-slider.is-upgraded:disabled:focus::-webkit-slider-thumb, .wsk-slider.is-upgraded:disabled:active::-webkit-slider-thumb, .wsk-slider.is-upgraded:disabled::-webkit-slider-thumb {
|
|
-webkit-transform: scale(0.667);
|
|
transform: scale(0.667);
|
|
background: rgba(0, 0, 0, 0.26); }
|
|
.wsk-slider.is-upgraded:disabled:focus::-moz-range-thumb, .wsk-slider.is-upgraded:disabled:active::-moz-range-thumb, .wsk-slider.is-upgraded:disabled::-moz-range-thumb {
|
|
transform: scale(0.667);
|
|
background: rgba(0, 0, 0, 0.26); }
|
|
.wsk-slider.is-upgraded:disabled ~ .wsk-slider__background-flex > .wsk-slider__background-lower {
|
|
background-color: rgba(0, 0, 0, 0.26);
|
|
left: -6px; }
|
|
.wsk-slider.is-upgraded:disabled ~ .wsk-slider__background-flex > .wsk-slider__background-upper {
|
|
left: 6px; }
|
|
.wsk-slider.is-upgraded.is-lowest-value:disabled:focus::-webkit-slider-thumb, .wsk-slider.is-upgraded.is-lowest-value:disabled:active::-webkit-slider-thumb, .wsk-slider.is-upgraded.is-lowest-value:disabled::-webkit-slider-thumb {
|
|
border: 3px solid rgba(0, 0, 0, 0.26);
|
|
background: transparent;
|
|
-webkit-transform: scale(0.667);
|
|
transform: scale(0.667); }
|
|
.wsk-slider.is-upgraded.is-lowest-value:disabled:focus::-moz-range-thumb, .wsk-slider.is-upgraded.is-lowest-value:disabled:active::-moz-range-thumb, .wsk-slider.is-upgraded.is-lowest-value:disabled::-moz-range-thumb {
|
|
border: 3px solid rgba(0, 0, 0, 0.26);
|
|
background: transparent;
|
|
transform: scale(0.667); }
|
|
.wsk-slider.is-upgraded.is-lowest-value:disabled:active ~ .wsk-slider__background-flex > .wsk-slider__background-upper {
|
|
left: 6px; }
|
|
.wsk-slider.is-upgraded:disabled:focus::-ms-thumb, .wsk-slider.is-upgraded:disabled:active::-ms-thumb, .wsk-slider.is-upgraded:disabled::-ms-thumb {
|
|
-ms-transform: scale(0.25);
|
|
transform: scale(0.25);
|
|
background: rgba(0, 0, 0, 0.26); }
|
|
.wsk-slider.is-upgraded.is-lowest-value:disabled:focus::-ms-thumb, .wsk-slider.is-upgraded.is-lowest-value:disabled:active::-ms-thumb, .wsk-slider.is-upgraded.is-lowest-value:disabled::-ms-thumb {
|
|
-ms-transform: scale(0.25);
|
|
transform: scale(0.25);
|
|
background: radial-gradient(circle closest-side, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.26) 50%, rgba(0, 0, 0, 0.26) 100%); }
|
|
.wsk-slider.is-upgraded:disabled::-ms-fill-lower {
|
|
margin-right: 6px;
|
|
background: linear-gradient(to right, transparent, transparent 25px, rgba(0, 0, 0, 0.26) 25px, rgba(0, 0, 0, 0.26) 0); }
|
|
.wsk-slider.is-upgraded:disabled::-ms-fill-upper {
|
|
margin-left: 6px; }
|
|
.wsk-slider.is-upgraded.is-lowest-value:disabled:active::-ms-fill-upper {
|
|
margin-left: 6px; }
|
|
|
|
.wsk-slider__ie-container {
|
|
height: 18px;
|
|
overflow: visible;
|
|
border: none;
|
|
margin: none;
|
|
padding: none; }
|
|
|
|
.wsk-slider__container {
|
|
height: 18px;
|
|
position: relative;
|
|
background: none;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: row;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row; }
|
|
|
|
.wsk-slider__background-flex {
|
|
background: transparent;
|
|
position: absolute;
|
|
height: 2px;
|
|
width: calc(100% - 52px);
|
|
top: 50%;
|
|
left: 0;
|
|
margin: 0 26px;
|
|
z-index: -1;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
overflow: hidden;
|
|
border: 0;
|
|
padding: 0;
|
|
-webkit-transform: translate(0, -1px);
|
|
-ms-transform: translate(0, -1px);
|
|
transform: translate(0, -1px); }
|
|
|
|
.wsk-slider__background-lower {
|
|
background: rgb(63,81,181);
|
|
-webkit-box-flex: 0;
|
|
-webkit-flex: 0;
|
|
-ms-flex: 0;
|
|
flex: 0;
|
|
position: relative;
|
|
border: 0;
|
|
padding: 0; }
|
|
|
|
.wsk-slider__background-upper {
|
|
background: rgba(0, 0, 0, 0.26);
|
|
-webkit-box-flex: 0;
|
|
-webkit-flex: 0;
|
|
-ms-flex: 0;
|
|
flex: 0;
|
|
position: relative;
|
|
border: 0;
|
|
padding: 0;
|
|
-webkit-transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
|
|
_:-moz-tree-row(hover), .wsk-slider__background-upper {
|
|
transition: none; }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
.wsk-spinner {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 28px;
|
|
height: 28px; }
|
|
.wsk-spinner:not(.is-upgraded):after {
|
|
content: "Loading..."; }
|
|
.wsk-spinner.is-upgraded.is-active {
|
|
-webkit-animation: wsk-spinner__container-rotate 1568.2352941176ms linear infinite;
|
|
animation: wsk-spinner__container-rotate 1568.2352941176ms linear infinite; }
|
|
|
|
@-webkit-keyframes wsk-spinner__container-rotate {
|
|
to {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg); } }
|
|
|
|
@keyframes wsk-spinner__container-rotate {
|
|
to {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg); } }
|
|
|
|
.wsk-spinner__layer {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0; }
|
|
|
|
.wsk-spinner__layer-1 {
|
|
border-color: #4285f4; }
|
|
.wsk-spinner--single-color .wsk-spinner__layer-1 {
|
|
border-color: rgb(63,81,181); }
|
|
.wsk-spinner.is-active .wsk-spinner__layer-1 {
|
|
-webkit-animation: wsk-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, wsk-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
animation: wsk-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, wsk-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
|
|
|
|
.wsk-spinner__layer-2 {
|
|
border-color: #db4437; }
|
|
.wsk-spinner--single-color .wsk-spinner__layer-2 {
|
|
border-color: rgb(63,81,181); }
|
|
.wsk-spinner.is-active .wsk-spinner__layer-2 {
|
|
-webkit-animation: wsk-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, wsk-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
animation: wsk-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, wsk-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
|
|
|
|
.wsk-spinner__layer-3 {
|
|
border-color: #f4b400; }
|
|
.wsk-spinner--single-color .wsk-spinner__layer-3 {
|
|
border-color: rgb(63,81,181); }
|
|
.wsk-spinner.is-active .wsk-spinner__layer-3 {
|
|
-webkit-animation: wsk-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, wsk-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
animation: wsk-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, wsk-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
|
|
|
|
.wsk-spinner__layer-4 {
|
|
border-color: #0f9d58; }
|
|
.wsk-spinner--single-color .wsk-spinner__layer-4 {
|
|
border-color: rgb(63,81,181); }
|
|
.wsk-spinner.is-active .wsk-spinner__layer-4 {
|
|
-webkit-animation: wsk-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, wsk-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
animation: wsk-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, wsk-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
|
|
|
|
@-webkit-keyframes wsk-spinner__fill-unfill-rotate {
|
|
12.5% {
|
|
-webkit-transform: rotate(135deg);
|
|
transform: rotate(135deg); }
|
|
|
|
25% {
|
|
-webkit-transform: rotate(270deg);
|
|
transform: rotate(270deg); }
|
|
|
|
37.5% {
|
|
-webkit-transform: rotate(405deg);
|
|
transform: rotate(405deg); }
|
|
|
|
50% {
|
|
-webkit-transform: rotate(540deg);
|
|
transform: rotate(540deg); }
|
|
|
|
62.5% {
|
|
-webkit-transform: rotate(675deg);
|
|
transform: rotate(675deg); }
|
|
|
|
75% {
|
|
-webkit-transform: rotate(810deg);
|
|
transform: rotate(810deg); }
|
|
|
|
87.5% {
|
|
-webkit-transform: rotate(945deg);
|
|
transform: rotate(945deg); }
|
|
|
|
to {
|
|
-webkit-transform: rotate(1080deg);
|
|
transform: rotate(1080deg); } }
|
|
|
|
@keyframes wsk-spinner__fill-unfill-rotate {
|
|
12.5% {
|
|
-webkit-transform: rotate(135deg);
|
|
transform: rotate(135deg); }
|
|
|
|
25% {
|
|
-webkit-transform: rotate(270deg);
|
|
transform: rotate(270deg); }
|
|
|
|
37.5% {
|
|
-webkit-transform: rotate(405deg);
|
|
transform: rotate(405deg); }
|
|
|
|
50% {
|
|
-webkit-transform: rotate(540deg);
|
|
transform: rotate(540deg); }
|
|
|
|
62.5% {
|
|
-webkit-transform: rotate(675deg);
|
|
transform: rotate(675deg); }
|
|
|
|
75% {
|
|
-webkit-transform: rotate(810deg);
|
|
transform: rotate(810deg); }
|
|
|
|
87.5% {
|
|
-webkit-transform: rotate(945deg);
|
|
transform: rotate(945deg); }
|
|
|
|
to {
|
|
-webkit-transform: rotate(1080deg);
|
|
transform: rotate(1080deg); } }
|
|
|
|
/**
|
|
* HACK: Even though the intention is to have the current .wsk-spinner__layer-N
|
|
* at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
|
|
* to do proper subpixel rendering for the elements being animated. This is
|
|
* especially visible in Chrome 39 on Ubuntu 14.04. See:
|
|
*
|
|
* - https://github.com/Polymer/paper-spinner/issues/9
|
|
* - https://code.google.com/p/chromium/issues/detail?id=436255
|
|
*/
|
|
@-webkit-keyframes wsk-spinner__layer-1-fade-in-out {
|
|
from {
|
|
opacity: 0.99; }
|
|
|
|
25% {
|
|
opacity: 0.99; }
|
|
|
|
26% {
|
|
opacity: 0; }
|
|
|
|
89% {
|
|
opacity: 0; }
|
|
|
|
90% {
|
|
opacity: 0.99; }
|
|
|
|
100% {
|
|
opacity: 0.99; } }
|
|
@keyframes wsk-spinner__layer-1-fade-in-out {
|
|
from {
|
|
opacity: 0.99; }
|
|
|
|
25% {
|
|
opacity: 0.99; }
|
|
|
|
26% {
|
|
opacity: 0; }
|
|
|
|
89% {
|
|
opacity: 0; }
|
|
|
|
90% {
|
|
opacity: 0.99; }
|
|
|
|
100% {
|
|
opacity: 0.99; } }
|
|
|
|
@-webkit-keyframes wsk-spinner__layer-2-fade-in-out {
|
|
from {
|
|
opacity: 0; }
|
|
|
|
15% {
|
|
opacity: 0; }
|
|
|
|
25% {
|
|
opacity: 0.99; }
|
|
|
|
50% {
|
|
opacity: 0.99; }
|
|
|
|
51% {
|
|
opacity: 0; } }
|
|
|
|
@keyframes wsk-spinner__layer-2-fade-in-out {
|
|
from {
|
|
opacity: 0; }
|
|
|
|
15% {
|
|
opacity: 0; }
|
|
|
|
25% {
|
|
opacity: 0.99; }
|
|
|
|
50% {
|
|
opacity: 0.99; }
|
|
|
|
51% {
|
|
opacity: 0; } }
|
|
|
|
@-webkit-keyframes wsk-spinner__layer-3-fade-in-out {
|
|
from {
|
|
opacity: 0; }
|
|
|
|
40% {
|
|
opacity: 0; }
|
|
|
|
50% {
|
|
opacity: 0.99; }
|
|
|
|
75% {
|
|
opacity: 0.99; }
|
|
|
|
76% {
|
|
opacity: 0; } }
|
|
|
|
@keyframes wsk-spinner__layer-3-fade-in-out {
|
|
from {
|
|
opacity: 0; }
|
|
|
|
40% {
|
|
opacity: 0; }
|
|
|
|
50% {
|
|
opacity: 0.99; }
|
|
|
|
75% {
|
|
opacity: 0.99; }
|
|
|
|
76% {
|
|
opacity: 0; } }
|
|
|
|
@-webkit-keyframes wsk-spinner__layer-4-fade-in-out {
|
|
from {
|
|
opacity: 0; }
|
|
|
|
65% {
|
|
opacity: 0; }
|
|
|
|
75% {
|
|
opacity: 0.99; }
|
|
|
|
90% {
|
|
opacity: 0.99; }
|
|
|
|
100% {
|
|
opacity: 0; } }
|
|
|
|
@keyframes wsk-spinner__layer-4-fade-in-out {
|
|
from {
|
|
opacity: 0; }
|
|
|
|
65% {
|
|
opacity: 0; }
|
|
|
|
75% {
|
|
opacity: 0.99; }
|
|
|
|
90% {
|
|
opacity: 0.99; }
|
|
|
|
100% {
|
|
opacity: 0; } }
|
|
|
|
/**
|
|
* Patch the gap that appear between the two adjacent
|
|
* div.wsk-spinner__circle-clipper while the spinner is rotating
|
|
* (appears on Chrome 38, Safari 7.1, and IE 11).
|
|
*
|
|
* Update: the gap no longer appears on Chrome when .wsk-spinner__layer-N's
|
|
* opacity is 0.99, but still does on Safari and IE.
|
|
*/
|
|
.wsk-spinner__gap-patch {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
top: 0;
|
|
left: 45%;
|
|
width: 10%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-color: inherit; }
|
|
.wsk-spinner__gap-patch .wsk-spinner__circle {
|
|
width: 1000%;
|
|
left: -450%; }
|
|
|
|
.wsk-spinner__circle-clipper {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 50%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-color: inherit; }
|
|
.wsk-spinner__circle-clipper .wsk-spinner__circle {
|
|
width: 200%; }
|
|
|
|
.wsk-spinner__circle {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
border-width: 3px;
|
|
border-style: solid;
|
|
border-color: inherit;
|
|
border-bottom-color: transparent !important;
|
|
border-radius: 50%;
|
|
-webkit-animation: none;
|
|
animation: none;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0; }
|
|
.wsk-spinner__left .wsk-spinner__circle {
|
|
border-right-color: transparent !important;
|
|
-webkit-transform: rotate(129deg);
|
|
-ms-transform: rotate(129deg);
|
|
transform: rotate(129deg); }
|
|
.wsk-spinner.is-active .wsk-spinner__left .wsk-spinner__circle {
|
|
-webkit-animation: wsk-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
animation: wsk-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
|
|
.wsk-spinner__right .wsk-spinner__circle {
|
|
left: -100%;
|
|
border-left-color: transparent !important;
|
|
-webkit-transform: rotate(-129deg);
|
|
-ms-transform: rotate(-129deg);
|
|
transform: rotate(-129deg); }
|
|
.wsk-spinner.is-active .wsk-spinner__right .wsk-spinner__circle {
|
|
-webkit-animation: wsk-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
animation: wsk-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
|
|
|
|
@-webkit-keyframes wsk-spinner__left-spin {
|
|
from {
|
|
-webkit-transform: rotate(130deg);
|
|
transform: rotate(130deg); }
|
|
|
|
50% {
|
|
-webkit-transform: rotate(-5deg);
|
|
transform: rotate(-5deg); }
|
|
|
|
to {
|
|
-webkit-transform: rotate(130deg);
|
|
transform: rotate(130deg); } }
|
|
|
|
@keyframes wsk-spinner__left-spin {
|
|
from {
|
|
-webkit-transform: rotate(130deg);
|
|
transform: rotate(130deg); }
|
|
|
|
50% {
|
|
-webkit-transform: rotate(-5deg);
|
|
transform: rotate(-5deg); }
|
|
|
|
to {
|
|
-webkit-transform: rotate(130deg);
|
|
transform: rotate(130deg); } }
|
|
|
|
@-webkit-keyframes wsk-spinner__right-spin {
|
|
from {
|
|
-webkit-transform: rotate(-130deg);
|
|
transform: rotate(-130deg); }
|
|
|
|
50% {
|
|
-webkit-transform: rotate(5deg);
|
|
transform: rotate(5deg); }
|
|
|
|
to {
|
|
-webkit-transform: rotate(-130deg);
|
|
transform: rotate(-130deg); } }
|
|
|
|
@keyframes wsk-spinner__right-spin {
|
|
from {
|
|
-webkit-transform: rotate(-130deg);
|
|
transform: rotate(-130deg); }
|
|
|
|
50% {
|
|
-webkit-transform: rotate(5deg);
|
|
transform: rotate(5deg); }
|
|
|
|
to {
|
|
-webkit-transform: rotate(-130deg);
|
|
transform: rotate(-130deg); } }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
.wsk-shadow--z1 {
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
|
|
|
|
.wsk-shadow--z2 {
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.23); }
|
|
|
|
.wsk-shadow--z3 {
|
|
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.19), 0 6px 3px 0 rgba(0, 0, 0, 0.23); }
|
|
|
|
.wsk-shadow--z4 {
|
|
box-shadow: 0 14px 14px 0 rgba(0, 0, 0, 0.25), 0 10px 5px 0 rgba(0, 0, 0, 0.22); }
|
|
|
|
.wsk-shadow--z5 {
|
|
box-shadow: 0 19px 19px 0 rgba(0, 0, 0, 0.3), 0 15px 6px 0 rgba(0, 0, 0, 0.22); }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
.wsk-ripple {
|
|
background: rgb(33,33,33);
|
|
border-radius: 50%;
|
|
height: 50px;
|
|
left: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
width: 50px;
|
|
overflow: hidden; }
|
|
.wsk-ripple.is-animating {
|
|
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
|
|
transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1); }
|
|
|
|
.wsk-switch {
|
|
position: relative;
|
|
z-index: 1;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 24px;
|
|
margin: 12px 0;
|
|
padding: 0;
|
|
overflow: visible; }
|
|
.wsk-switch.is-upgraded {
|
|
padding-left: 28px; }
|
|
|
|
.wsk-switch__input {
|
|
line-height: 24px; }
|
|
.wsk-switch.is-upgraded .wsk-switch__input {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
opacity: 0;
|
|
-ms-appearance: none;
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
border: none; }
|
|
|
|
.wsk-switch__track {
|
|
background: rgba(0, 0, 0, 0.26);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 5px;
|
|
height: 14px;
|
|
width: 36px;
|
|
border-radius: 14px;
|
|
cursor: pointer; }
|
|
.wsk-switch.is-checked .wsk-switch__track {
|
|
background: rgba(rgb(63,81,181), 0.5); }
|
|
.wsk-switch.is-disabled .wsk-switch__track {
|
|
background: rgba(0, 0, 0, 0.12);
|
|
cursor: auto; }
|
|
|
|
.wsk-switch__thumb {
|
|
background: rgb(250,250,250);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 2px;
|
|
height: 20px;
|
|
width: 20px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
|
|
-webkit-transition-duration: 0.28s;
|
|
transition-duration: 0.28s;
|
|
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
-webkit-transition-property: left;
|
|
transition-property: left; }
|
|
.wsk-switch.is-checked .wsk-switch__thumb {
|
|
background: rgb(63,81,181);
|
|
left: 16px;
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.23); }
|
|
.wsk-switch.is-disabled .wsk-switch__thumb {
|
|
background: rgb(189,189,189);
|
|
cursor: auto; }
|
|
|
|
.wsk-switch__focus-helper {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
-webkit-transform: translate(-4px, -4px);
|
|
-ms-transform: translate(-4px, -4px);
|
|
transform: translate(-4px, -4px);
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: transparent; }
|
|
.wsk-switch.is-focused .wsk-switch__focus-helper {
|
|
box-shadow: 0 0 0px 20px rgba(0, 0, 0, 0.1);
|
|
background-color: rgba(0, 0, 0, 0.1); }
|
|
.wsk-switch.is-focused.is-checked .wsk-switch__focus-helper {
|
|
box-shadow: 0 0 0px 20px rgba(63,81,181, 0.26);
|
|
background-color: rgba(63,81,181, 0.26); }
|
|
|
|
.wsk-switch__label {
|
|
position: relative;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
margin: 0;
|
|
left: 24px; }
|
|
.wsk-switch.is-disabled .wsk-switch__label {
|
|
color: rgb(189,189,189);
|
|
cursor: auto; }
|
|
|
|
.wsk-switch__ripple-container {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: -12px;
|
|
left: -14px;
|
|
box-sizing: border-box;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
|
-webkit-transition-duration: 0.4s;
|
|
transition-duration: 0.4s;
|
|
-webkit-transition-timing-function: step-end;
|
|
transition-timing-function: step-end;
|
|
-webkit-transition-property: left;
|
|
transition-property: left; }
|
|
.wsk-switch__ripple-container .wsk-ripple {
|
|
background: rgb(63,81,181); }
|
|
.wsk-switch.is-disabled .wsk-switch__ripple-container {
|
|
cursor: auto; }
|
|
.wsk-switch.is-disabled .wsk-switch__ripple-container .wsk-ripple {
|
|
background: transparent; }
|
|
.wsk-switch.is-checked .wsk-switch__ripple-container {
|
|
cursor: auto;
|
|
left: 2px; }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
/* We're splitting fonts into "preferred" and "performance" in order to optimize
|
|
page loading. For important text, such as the body, we want it to load
|
|
immediately and not wait for the web font load, whereas for other sections,
|
|
such as headers and titles, we're OK with things taking a bit longer to load.
|
|
We do have some optional classes and parameters in the mixins, in case you
|
|
definitely want to make sure you're using the preferred font and don't mind
|
|
the performance hit.
|
|
We should be able to improve on this once CSS Font Loading L3 becomes more
|
|
widely available.
|
|
*/
|
|
html, body {
|
|
font-family: 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 20px; }
|
|
|
|
h1, h2, h3, h4, h5, h6, p {
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
/**
|
|
* Styles for HTML elements
|
|
*/
|
|
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
opacity: 0.54;
|
|
font-size: 0.6em; }
|
|
|
|
h1 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em; }
|
|
|
|
h2 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px; }
|
|
|
|
h3 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px; }
|
|
|
|
h4 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
h5 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em; }
|
|
|
|
h6 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
p {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
margin: 0 0 16px 0; }
|
|
|
|
a {
|
|
font-weight: bold; }
|
|
|
|
blockquote {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
blockquote:before {
|
|
content: '“';
|
|
opacity: 0.54; }
|
|
blockquote:after {
|
|
content: '”';
|
|
opacity: 0.54; }
|
|
|
|
mark {
|
|
background-color: #f4ff81; }
|
|
|
|
dt {
|
|
font-weight: 700; }
|
|
|
|
/**
|
|
* Class Name Styles
|
|
*/
|
|
.wsk-typography--display-4 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 112px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em; }
|
|
|
|
.wsk-typography--display-4-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 112px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-3 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em; }
|
|
|
|
.wsk-typography--display-3-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-2 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px; }
|
|
|
|
.wsk-typography--display-2-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-1 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px; }
|
|
|
|
.wsk-typography--display-1-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--headline {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
.wsk-typography--headline-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--title {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em; }
|
|
|
|
.wsk-typography--title-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--subhead {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--subhead-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-2 {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-2-color-contrast {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-1 {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-1-color-contrast {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-2-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-2-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-1-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-1-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--caption {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
|
|
.wsk-typography--caption-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
|
|
.wsk-typography--caption-color-contrast {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--caption-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--menu {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--menu-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--button {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--button-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--text-left {
|
|
text-align: left; }
|
|
|
|
.wsk-typography--text-right {
|
|
text-align: right; }
|
|
|
|
.wsk-typography--text-center {
|
|
text-align: center; }
|
|
|
|
.wsk-typography--text-justify {
|
|
text-align: justify; }
|
|
|
|
.wsk-typography--text-nowrap {
|
|
white-space: nowrap; }
|
|
|
|
.wsk-typography--text-lowercase {
|
|
text-transform: lowercase; }
|
|
|
|
.wsk-typography--text-uppercase {
|
|
text-transform: uppercase; }
|
|
|
|
.wsk-typography--text-capitalize {
|
|
text-transform: capitalize; }
|
|
|
|
.wsk-typography--table-striped > tbody > tr:nth-child(odd) > td, .wsk-typography--table-striped > tbody > tr:nth-child(odd) > th {
|
|
background-color: #f9f9f9; }
|
|
|
|
.wsk-typography--table-striped > tbody > tr:nth-child(odd) > td, .wsk-typography--table-striped > tbody > tr:nth-child(odd) > th {
|
|
background-color: #f9f9f9; }
|
|
|
|
.wsk-typography--font-thin {
|
|
font-weight: 200 !important; }
|
|
|
|
.wsk-typography--font-light {
|
|
font-weight: 300 !important; }
|
|
|
|
.wsk-typography--font-regular {
|
|
font-weight: 400 !important; }
|
|
|
|
.wsk-typography--font-medium {
|
|
font-weight: 500 !important; }
|
|
|
|
.wsk-typography--font-bold {
|
|
font-weight: 700 !important; }
|
|
|
|
.wsk-typography--font-black {
|
|
font-weight: 900 !important; }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
.wsk-ripple {
|
|
background: rgb(33,33,33);
|
|
border-radius: 50%;
|
|
height: 50px;
|
|
left: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
width: 50px;
|
|
overflow: hidden; }
|
|
.wsk-ripple.is-animating {
|
|
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
|
|
transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1); }
|
|
|
|
.wsk-tabs {
|
|
display: block;
|
|
width: 100%; }
|
|
|
|
.wsk-tabs__tab-bar {
|
|
height: 48px;
|
|
padding: 0 0 0 56px;
|
|
margin: 0;
|
|
border-bottom: 1px solid rgb(224,224,224); }
|
|
|
|
.wsk-tabs__tab {
|
|
margin: 0;
|
|
border: none;
|
|
padding: 0 24px 0 24px;
|
|
float: left;
|
|
position: relative;
|
|
display: block;
|
|
color: red;
|
|
text-decoration: none;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
overflow: hidden; }
|
|
.wsk-tabs.is-upgraded .wsk-tabs__tab.is-active {
|
|
color: black; }
|
|
.wsk-tabs.is-upgraded .wsk-tabs__tab.is-active:after {
|
|
height: 2px;
|
|
width: 100%;
|
|
display: block;
|
|
content: " ";
|
|
bottom: 0px;
|
|
left: 0px;
|
|
position: absolute;
|
|
background: rgb(63,81,181);
|
|
-webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0s alternate forwards;
|
|
-moz-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0s alternate forwards;
|
|
-webkit-transition: all 1s cubic-bezier(0.4, 0, 1, 1);
|
|
transition: all 1s cubic-bezier(0.4, 0, 1, 1); }
|
|
.wsk-tabs__tab .wsk-tabs__ripple-container {
|
|
display: block;
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
left: 0px;
|
|
top: 0px;
|
|
z-index: 1;
|
|
overflow: hidden; }
|
|
.wsk-tabs__tab .wsk-tabs__ripple-container .wsk-ripple {
|
|
background: rgb(63,81,181); }
|
|
|
|
.wsk-tabs__panel {
|
|
display: block; }
|
|
.wsk-tabs.is-upgraded .wsk-tabs__panel {
|
|
display: none; }
|
|
.wsk-tabs.is-upgraded .wsk-tabs__panel.is-active {
|
|
display: block; }
|
|
|
|
@-webkit-keyframes border-expand {
|
|
0% {
|
|
opacity: 0;
|
|
width: 0; }
|
|
|
|
100% {
|
|
opacity: 1;
|
|
width: 100%; } }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
.wsk-textfield {
|
|
position: relative;
|
|
font-size: 16px;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 300px;
|
|
margin: 0; }
|
|
.wsk-textfield .wsk-button {
|
|
position: absolute;
|
|
bottom: 0; }
|
|
|
|
.wsk-textfield--align-right {
|
|
text-align: right; }
|
|
|
|
.wsk-textfield--full-width {
|
|
width: 100%; }
|
|
|
|
.wsk-textfield--expandable {
|
|
min-width: 32px;
|
|
min-height: 32px; }
|
|
|
|
.wsk-textfield__input {
|
|
border: none;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
|
display: block;
|
|
font-size: 16px;
|
|
margin: 0;
|
|
padding: 4px 0;
|
|
width: 100%;
|
|
background: 16px;
|
|
text-align: left;
|
|
color: inherit; }
|
|
.wsk-textfield.is-focused .wsk-textfield__input {
|
|
outline: none; }
|
|
.wsk-textfield.is-invalid .wsk-textfield__input {
|
|
border-color: rgb(229,57,53);
|
|
box-shadow: none; }
|
|
.wsk-textfield.is-disabled .wsk-textfield__input {
|
|
background-color: transparent;
|
|
border-bottom: 1px dotted rgba(0, 0, 0, 0.12); }
|
|
|
|
.wsk-textfield__label {
|
|
bottom: 0;
|
|
color: rgba(0, 0, 0, 0.26);
|
|
font-size: 16px;
|
|
left: 0;
|
|
right: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 4px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-align: left; }
|
|
.wsk-textfield.is-dirty .wsk-textfield__label {
|
|
visibility: hidden; }
|
|
.wsk-textfield--floating-label .wsk-textfield__label {
|
|
-webkit-transition-duration: 0.2s;
|
|
transition-duration: 0.2s;
|
|
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.wsk-textfield--floating-label.is-focused .wsk-textfield__label, .wsk-textfield--floating-label.is-dirty .wsk-textfield__label {
|
|
color: rgb(63,81,181);
|
|
font-size: 12px;
|
|
top: -16px;
|
|
visibility: visible; }
|
|
.wsk-textfield--floating-label.is-invalid .wsk-textfield__label {
|
|
color: rgb(229,57,53);
|
|
font-size: 12px; }
|
|
.wsk-textfield__label:after {
|
|
background-color: rgb(63,81,181);
|
|
bottom: 0;
|
|
content: '';
|
|
height: 2px;
|
|
left: 45%;
|
|
position: absolute;
|
|
-webkit-transition-duration: 0.2s;
|
|
transition-duration: 0.2s;
|
|
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
visibility: hidden;
|
|
width: 10px; }
|
|
.wsk-textfield.is-focused .wsk-textfield__label:after {
|
|
left: 0;
|
|
visibility: visible;
|
|
width: 100%; }
|
|
.wsk-textfield.is-invalid .wsk-textfield__label:after {
|
|
background-color: rgb(229,57,53); }
|
|
|
|
.wsk-textfield__error {
|
|
color: rgb(229,57,53);
|
|
position: absolute;
|
|
font-size: 12px;
|
|
margin-top: 3px;
|
|
visibility: hidden; }
|
|
.wsk-textfield.is-invalid .wsk-textfield__error {
|
|
visibility: visible; }
|
|
|
|
.wsk-textfield__expandable-holder {
|
|
display: inline-block;
|
|
position: relative;
|
|
margin-left: 32px;
|
|
-webkit-transition-duration: 0.2s;
|
|
transition-duration: 0.2s;
|
|
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
display: inline-block;
|
|
max-width: 0.1px; }
|
|
.wsk-textfield.is-focused .wsk-textfield__expandable-holder, .wsk-textfield.is-dirty .wsk-textfield__expandable-holder {
|
|
max-width: 600px; }
|
|
|
|
/**
|
|
*
|
|
* Material design color palettes.
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
/* ========== Color Palettes ========== */
|
|
/* ========== Color & Themes ========== */
|
|
/* ========== Typography ========== */
|
|
/* ========== Components ========== */
|
|
/* ========== Standard Buttons ========== */
|
|
/* ========== Icon Toggles ========== */
|
|
/* ========== Radio Buttons ========== */
|
|
/* ========== Ripple effect ========== */
|
|
/* ========== Layout ========== */
|
|
/* ========== Content Tabs ========== */
|
|
/* ========== Checkboxes ========== */
|
|
/* ========== Switches ========== */
|
|
/* ========== Spinner ========== */
|
|
/* ========== Text fields ========== */
|
|
/* ========== Card ========== */
|
|
/* Heading back */
|
|
/* ========== Sliders ========== */
|
|
/* ========== List ========== */
|
|
/* ========== Item ========== */
|
|
/* ========== Dropdown menu ========== */
|
|
/* ========== Tooltips ========== */
|
|
/* ========== Footer ========== */
|
|
/* We're splitting fonts into "preferred" and "performance" in order to optimize
|
|
page loading. For important text, such as the body, we want it to load
|
|
immediately and not wait for the web font load, whereas for other sections,
|
|
such as headers and titles, we're OK with things taking a bit longer to load.
|
|
We do have some optional classes and parameters in the mixins, in case you
|
|
definitely want to make sure you're using the preferred font and don't mind
|
|
the performance hit.
|
|
We should be able to improve on this once CSS Font Loading L3 becomes more
|
|
widely available.
|
|
*/
|
|
html, body {
|
|
font-family: 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 20px; }
|
|
|
|
h1, h2, h3, h4, h5, h6, p {
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
/**
|
|
* Styles for HTML elements
|
|
*/
|
|
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
opacity: 0.54;
|
|
font-size: 0.6em; }
|
|
|
|
h1 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em; }
|
|
|
|
h2 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px; }
|
|
|
|
h3 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px; }
|
|
|
|
h4 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
h5 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em; }
|
|
|
|
h6 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
p {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
margin: 0 0 16px 0; }
|
|
|
|
a {
|
|
font-weight: bold; }
|
|
|
|
blockquote {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
blockquote:before {
|
|
content: '“';
|
|
opacity: 0.54; }
|
|
blockquote:after {
|
|
content: '”';
|
|
opacity: 0.54; }
|
|
|
|
mark {
|
|
background-color: #f4ff81; }
|
|
|
|
dt {
|
|
font-weight: 700; }
|
|
|
|
/**
|
|
* Class Name Styles
|
|
*/
|
|
.wsk-typography--display-4 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 112px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em; }
|
|
|
|
.wsk-typography--display-4-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 112px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-3 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em; }
|
|
|
|
.wsk-typography--display-3-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 56px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-2 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px; }
|
|
|
|
.wsk-typography--display-2-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 45px;
|
|
font-weight: 400;
|
|
line-height: 48px;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--display-1 {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px; }
|
|
|
|
.wsk-typography--display-1-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 400;
|
|
line-height: 40px;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--headline {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale; }
|
|
|
|
.wsk-typography--headline-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--title {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em; }
|
|
|
|
.wsk-typography--title-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--subhead {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--subhead-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-2 {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-2-color-contrast {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-1 {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-1-color-contrast {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-2-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-2-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--body-1-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--body-1-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--caption {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
|
|
.wsk-typography--caption-force-preferred-font {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em; }
|
|
|
|
.wsk-typography--caption-color-contrast {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--caption-force-preferred-font-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0.08em;
|
|
opacity: 0.54; }
|
|
|
|
.wsk-typography--menu {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--menu-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--button {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em; }
|
|
|
|
.wsk-typography--button-color-contrast {
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.87; }
|
|
|
|
.wsk-typography--text-left {
|
|
text-align: left; }
|
|
|
|
.wsk-typography--text-right {
|
|
text-align: right; }
|
|
|
|
.wsk-typography--text-center {
|
|
text-align: center; }
|
|
|
|
.wsk-typography--text-justify {
|
|
text-align: justify; }
|
|
|
|
.wsk-typography--text-nowrap {
|
|
white-space: nowrap; }
|
|
|
|
.wsk-typography--text-lowercase {
|
|
text-transform: lowercase; }
|
|
|
|
.wsk-typography--text-uppercase {
|
|
text-transform: uppercase; }
|
|
|
|
.wsk-typography--text-capitalize {
|
|
text-transform: capitalize; }
|
|
|
|
.wsk-typography--table-striped > tbody > tr:nth-child(odd) > td, .wsk-typography--table-striped > tbody > tr:nth-child(odd) > th {
|
|
background-color: #f9f9f9; }
|
|
|
|
.wsk-typography--table-striped > tbody > tr:nth-child(odd) > td, .wsk-typography--table-striped > tbody > tr:nth-child(odd) > th {
|
|
background-color: #f9f9f9; }
|
|
|
|
.wsk-typography--font-thin {
|
|
font-weight: 200 !important; }
|
|
|
|
.wsk-typography--font-light {
|
|
font-weight: 300 !important; }
|
|
|
|
.wsk-typography--font-regular {
|
|
font-weight: 400 !important; }
|
|
|
|
.wsk-typography--font-medium {
|
|
font-weight: 500 !important; }
|
|
|
|
.wsk-typography--font-bold {
|
|
font-weight: 700 !important; }
|
|
|
|
.wsk-typography--font-black {
|
|
font-weight: 900 !important; }
|
|
|
|
.wsk-tooltip {
|
|
-webkit-transform: scale(0);
|
|
-ms-transform: scale(0);
|
|
transform: scale(0);
|
|
-webkit-transform-origin: top center;
|
|
-ms-transform-origin: top center;
|
|
transform-origin: top center;
|
|
background: rgb(216,27,96);
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
display: none;
|
|
font-size: 10px;
|
|
line-height: 14px;
|
|
max-width: 170px;
|
|
padding: 5px 8px;
|
|
position: absolute;
|
|
text-align: center; }
|
|
|
|
.wsk-tooltip.is-active {
|
|
display: inline-block;
|
|
-webkit-animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
|
|
animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards; }
|
|
|
|
.wsk-tooltip--large {
|
|
line-height: 14px;
|
|
font-size: 14px;
|
|
padding: 16px; }
|
|
|
|
@-webkit-keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
opacity: 0; }
|
|
|
|
50% {
|
|
-webkit-transform: scale(0.99);
|
|
transform: scale(0.99); }
|
|
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
visibility: visible; } }
|
|
|
|
body {
|
|
margin: 0px; }
|
|
|
|
.styleguide-demo h1 {
|
|
margin: 48px 24px 0 24px; }
|
|
|
|
.styleguide-demo h1:after {
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
|
|
margin-top: 24px; }
|
|
|
|
.styleguide-demo {
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.6s ease;
|
|
transition: opacity 0.6s ease; }
|
|
|
|
.styleguide-masthead {
|
|
height: 256px;
|
|
background: rgb(26,35,126);
|
|
padding: 115px 16px 0; }
|
|
|
|
.styleguide-container {
|
|
position: relative;
|
|
max-width: 960px;
|
|
width: 100%; }
|
|
|
|
.styleguide-title {
|
|
color: #fff;
|
|
bottom: auto;
|
|
position: relative;
|
|
font-size: 56px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em; }
|
|
.styleguide-title:after {
|
|
border-bottom: 0px; }
|
|
.styleguide-title span {
|
|
font-weight: 300; }
|
|
|
|
.wsk-styleguide .wsk-layout__drawer .wsk-navigation__link {
|
|
padding: 10px 24px; }
|
|
|
|
.demosLoaded .styleguide-demo {
|
|
opacity: 1; }
|
|
|
|
iframe {
|
|
display: block;
|
|
width: 100%;
|
|
border: none; }
|
|
|
|
iframe.heightSet {
|
|
overflow: hidden; }
|
|
|
|
.demo-wrapper {
|
|
margin: 24px; }
|
|
.demo-wrapper iframe {
|
|
border: 1px solid rgba(0, 0, 0, 0.5); }
|
|
|