1048 lines
47 KiB
HTML
1048 lines
47 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<!-- Mirrored from winstrap.mwspace.it/colors.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 09 Jun 2020 16:11:28 GMT -->
|
|
<head>
|
|
<!-- This is the generated HTML file of the demo page -->
|
|
<meta charset="utf-8" />
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<title>winstrap Tutorial</title>
|
|
|
|
<link rel="stylesheet" href="css/winstrap.minb0fc.css?0.5.13" />
|
|
<script src="js/vendor/jquery.min.js"></script>
|
|
<!--[if lt IE 9]>
|
|
<script src="js/vendor/html5shiv.min.js"></script>
|
|
<script src="js/vendor/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-default">
|
|
|
|
<div class="navbar-global theme-default">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<a href="http://www.microsoft.com/" class="navbar-brand">
|
|
<img src="../assets.onestore.ms/cdnfiles/onestorerolling-1511-11008/shell/v3/images/logo/microsoft.png" alt="Microsoft" height="23" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="navbar-local color-accent theme-dark">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<i class="glyph glyph-hamburger"></i>
|
|
</button>
|
|
|
|
<a href="index-2.html" class="navbar-brand">
|
|
<img src="images/winstrap_white.svg" alt="Winstrap" height="29" />
|
|
</a>
|
|
|
|
</div>
|
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
|
|
<ul class="nav navbar-nav">
|
|
<li class="dropdown">
|
|
<a href="colors.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Colors<i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="colors.html">All colors</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="colors.html#bootstrap-colors">Bootstrap colors</a></li>
|
|
<li><a href="colors.html#mdl-colors">MDL colors</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">MDL alt colors</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="typography.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Typography<i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="typography.html">All typography</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="typography.html#fonts">Fonts</a></li>
|
|
<li><a href="typography.html#sizes">Sizes</a></li>
|
|
<li><a href="typography.html#headings">Headings</a></li>
|
|
<li><a href="typography.html#subheadings">Subheadings</a></li>
|
|
<li><a href="typography.html#paragraphs">Paragraphs</a></li>
|
|
<li><a href="typography.html#captions">Captions</a></li>
|
|
<li><a href="typography.html#glyphs">Glyphs</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="layout.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Layout<i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="layout.html">All layout</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="layout.html#page-header">Page header</a></li>
|
|
<li><a href="layout.html#grid">Grid</a></li>
|
|
<li><a href="layout.html#grid-small-gutters">Small gutters</a></li>
|
|
<li><a href="layout.html#spacers">Spacers</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="controls.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Controls<i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="controls.html">All controls</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="controls.html#buttons">Buttons</a></li>
|
|
<li><a href="controls.html#toggle-switch">Toggle Switch</a></li>
|
|
<li><a href="controls.html#forms">Forms</a></li>
|
|
<li><a href="controls.html#putbox">Put box</a></li>
|
|
<li><a href="controls.html#progress">Progress bar</a></li>
|
|
<li><a href="controls.html#loader">Progress ring</a></li>
|
|
<li><a href="controls.html#dropdown">Dropdown</a></li>
|
|
<li><a href="controls.html#tooltips">Tooltips</a></li>
|
|
<li><a href="controls.html#flyouts">Flyouts</a></li>
|
|
<li><a href="controls.html#dialogs">Dialogs</a></li>
|
|
<li><a href="controls.html#tabs">Tabs</a></li>
|
|
<li><a href="controls.html#navs">Navbar</a></li>
|
|
<li><a href="controls.html#side-nav">Side navigation</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="components.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Components<i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="components.html">All components</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="components.html#breadcrumb">Breadcrumb</a></li>
|
|
<li><a href="components.html#back-to-top">Back to top</a></li>
|
|
<li><a href="components.html#rating">Rating</a></li>
|
|
<li><a href="components.html#labels">Labels</a></li>
|
|
<li><a href="components.html#media">Media</a></li>
|
|
<li><a href="components.html#tables">Tables</a></li>
|
|
<li><a href="components.html#responsive-table">Responsive table</a></li>
|
|
<li><a href="components.html#list-items">List items</a></li>
|
|
<li><a href="components.html#entity-list">Entity list</a></li>
|
|
<li><a href="components.html#pagination">Pagination</a></li>
|
|
<li><a href="components.html#jumbotron">Jumbotron</a></li>
|
|
<li><a href="alerts.html">Alerts</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a class="color-type-secondary" href="http://winjsdevelop.azurewebsites.net/">Win Js</a>
|
|
</li>
|
|
<li>
|
|
<a class="color-type-secondary" href="#changelog" data-toggle="modal">Changelog</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="modal modal-center" id="changelog" tabindex="-1" role="dialog" aria-labelledby="changelog-label" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<i class="glyph glyph-cancel" aria-hidden="true"></i>
|
|
</button>
|
|
<h4 class="modal-title" id="changelog-label">Changelog</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<dl>
|
|
<dt class="m-t-sm">0.5.12</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Bug fixes.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.11</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Added 5 new glyphs to the symbols font.</li>
|
|
<li>Updated Bootstrap to v3.3.7.</li>
|
|
<li>Added <a href="components.html#entity-list">Entity list</a> and <a href="controls.html#putbox">Put box.</a></li>
|
|
<li>Added <code>!important</code> to spacer classes.</li>
|
|
<li>Bug fixes.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.8</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Added default styling for <code><pre></code>, <code><blockquote></code>, <code><ul></code>, <code><ol></code>, and <code><dl></code>.</li>
|
|
<li>Fixed Jumbotron max-width issue on wide screen width.</li>
|
|
<li>Navbar styling bug fixes.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.7</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Updated glyph fonts. Glyph style is now aligned with Windows 10.</li>
|
|
<li>Added new <a href="typography.html#glyphs">glyphs</a>.</li>
|
|
<li>Removed fixed width from <code>.container</code> layout.</li>
|
|
<li>Prebuilt and minified CSS files. NPM and Bower packages now come with prebuilt <code>dist</code> folder and minified CSS files.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.6</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Simplified <a href="components.html#jumbotron">Jumbotron</a>.</li>
|
|
<li>Added <code>.compressed</code> option to <a href="controls.html#navs">Navbar</a>.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.5</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Big update to <a href="controls.html#navs">Navbar</a> allowing two navbars to stack.</li>
|
|
<li>Added variable font path with <code>!default</code> declaration to enable you to set the path based on your project needs</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.3</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Added <a href="controls.html#side-nav">side-nav</a> control.</li>
|
|
<li>Moved bower to devDependency in package.json.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.4.12</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Updated toggle switch, tooltip, popover, and link button.</li>
|
|
<li>Added color themes to <code><a></code> and fixed states.</li>
|
|
<li>Changed color theme classes.</li>
|
|
<li>Updated breadcrumb styling.</li>
|
|
<li>Changed font-family variable names.</li>
|
|
<li>Updated glyphs font path.</li>
|
|
<li>Fixed checkbox glyph issue.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.4.9</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Typography:</li>
|
|
<li>Updated type ramp, classes, mixins, and functions.</li>
|
|
<li>Added type controls (headings, subheadings, paragraphs, and captions).</li>
|
|
<li>Glyphs:</li>
|
|
<li>Changed glyph names to be more semantic.</li>
|
|
<li>Added glyph function to get a glyph's unicode value.</li>
|
|
<li>Other changes:</li>
|
|
<li>Added Navbar component</li>
|
|
<li>Updated Dropdown control</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.4.4</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Updates and fixes for:</li>
|
|
<li><a href="typography.html#fonts">Responsive type</a></li>
|
|
<li><a href="controls.html#buttons">Push buttons</a></li>
|
|
<li><a href="controls.html#buttons">Toggle buttons</a></li>
|
|
<li><a href="controls.html#toggle-switch">Toggle switch</a></li>
|
|
<li><a href="components.html#back-to-top">Back-to-top button</a></li>
|
|
<li><a href="controls.html#forms">Select box</a></li>
|
|
<li><a href="alerts.html">Alerts</a></li>
|
|
<li><a href="components.html#tables">Tables</a></li>
|
|
<li><a href="components.html#jumbotron">Jumbotron and highlight bar</a></li>
|
|
<li><a href="components.html#pagination">Pagination</a></li>
|
|
<li><a href="components.html#pager">Pager</a></li>
|
|
<li>Default <code><p></code> spacing</li>
|
|
<li>Remove MDL 1.0 controls and components</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.4.0</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>New colors and color naming that reflect the latest MDL colors.</li>
|
|
<li>Remove <code>win-</code> prefix from class and variable names.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.3.2</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Rename to Winstrap.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.1.1</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Add <code>win-</code> prefix to:</li>
|
|
<li><a href="components.html#list-items">list items</a></li>
|
|
<li><a href="components.html#refine-list">refine list</a></li>
|
|
<li><a href="typography.html#fonts">typography utilities</a></li>
|
|
<li><a href="tabs.html">media browser component</a></li>
|
|
<li><a href="components.html#back-to-top">back to top component</a></li>
|
|
<li><a href="alerts.html">alert stack component</a></li>
|
|
<li><a href="layout.html#section">section component</a></li>
|
|
<li>Extend the Bootstrap grid with a <a href="layout.html#grid-small-gutters">small gutter option</a>.</li>
|
|
<li>Add a <a href="images/bootstrap-winjs.html">placeholder logo</a>.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.1.0</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Initialize bootstrap-winjs.</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-header">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h1>Colors</h1>
|
|
|
|
<ul class="nav nav-pills" data-scroll="smooth">
|
|
<li role="presentation">
|
|
<a href="#bootstrap-colors">Bootstrap colors</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#mdl-colors">MDL colors</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#mdl-alt-colors">MDL alt colors</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<section class="section" id="bootstrap-colors">
|
|
<header class="section-header">
|
|
<h1 class="section-title">
|
|
<a href="#bootstrap-colors">Bootstrap colors</a>
|
|
</h1>
|
|
</header>
|
|
<p>These are the primary colors used throughout various Bootstrap controls. They've been altered to use MDL colors instead of Bootstrap colors.</p>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-accent-vivid-high"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.brand-primary: $color-accent;
|
|
</code></pre>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-vivid-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.brand-success: $color-vivid-low;
|
|
</code></pre>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-vivid-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.brand-info: $color-vivid-low;
|
|
</code></pre>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-alert"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.brand-warning: $color-alert;
|
|
</code></pre>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-alert"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.brand-danger: $color-alert;
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<section class="section" id="mdl-colors">
|
|
<header class="section-header">
|
|
<h1 class="section-title">
|
|
<a href="#mdl-colors">MDL colors</a>
|
|
</h1>
|
|
</header>
|
|
<h3>Base colors</h3>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="color color-white"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-white: #FFFFFF;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-black"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-black: #000000;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-accent"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-accent: #0078D7;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-alert"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-alert: #D02E00;
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Background colors</h3>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="color color-bg-light-vivid-high"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-bg-light-vivid-high: $color-white;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-bg-light-vivid-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-bg-light-vivid-mid: #F2F2F2;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-bg-light-vivid-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-bg-light-vivid-low: #E5E5E5;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-bg-light-neutral-high"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-bg-light-neutral-high: #D9D9D9;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-bg-light-neutral-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-bg-light-neutral-mid: #CCCCCC;
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="color color-bg-dark-vivid-high"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-bg-dark-vivid-high: $color-black;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-bg-dark-vivid-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-bg-dark-vivid-mid: #191919;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-bg-dark-vivid-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-bg-dark-vivid-low: #262626;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-bg-dark-neutral-high"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-bg-dark-neutral-high: #333333;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-bg-dark-neutral-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-bg-dark-neutral-mid: #404040;
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Fill colors</h3>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-accent-vivid-high"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-accent-vivid-high: $color-accent;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-accent-vivid-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-accent-vivid-mid: rgba($color-accent, 0.8);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-accent-vivid-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-accent-vivid-low: rgba($color-accent, 0.6);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-accent-neutral-high"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-accent-neutral-high: rgba($color-accent, 0.4);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-accent-neutral-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-accent-neutral-mid: rgba($color-accent, 0.3);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-accent-neutral-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-accent-neutral-low: rgba($color-accent, 0.2);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-accent-dim-high"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-accent-dim-high: rgba($color-accent, 0.15);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-accent-dim-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-accent-dim-mid: rgba($color-accent, 0.1);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-accent-dim-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-accent-dim-low: rgba($color-accent, 0.05);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-alert"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-alert: $color-alert;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-dim-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-dim-low: rgba($color-black, 0.05);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-dim-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-dim-mid: rgba($color-black, 0.1);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-neutral-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-neutral-low: rgba($color-black, 0.2);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-neutral-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-neutral-mid: rgba($color-black, 0.3);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-neutral-high"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-neutral-high: rgba($color-black, 0.4);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-vivid-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-vivid-low: rgba($color-black, 0.6);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-vivid-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-vivid-mid: rgba($color-black, 0.8);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-vivid-high"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-vivid-high: $color-black;
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Line colors</h3>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-accent-vivid-high"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-accent-vivid-high: $color-accent;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-accent-vivid-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-accent-vivid-mid: rgba($color-accent, 0.8);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-accent-vivid-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-accent-vivid-low: rgba($color-accent, 0.6);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-accent-neutral-high"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-accent-neutral-high: rgba($color-accent, 0.4);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-accent-neutral-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-accent-neutral-mid: rgba($color-accent, 0.3);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-accent-neutral-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-accent-neutral-low: rgba($color-accent, 0.2);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-accent-dim-high"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-accent-dim-high: rgba($color-accent, 0.15);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-accent-dim-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-accent-dim-mid: rgba($color-accent, 0.1);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-accent-dim-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-accent-dim-low: rgba($color-accent, 0.05);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-alert"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-alert: $color-alert;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-dim-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-dim-low: rgba($color-black, 0.05);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-dim-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-dim-mid: rgba($color-black, 0.1);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-neutral-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-neutral-low: rgba($color-black, 0.2);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-neutral-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-neutral-mid: rgba($color-black, 0.3);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-neutral-high"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-neutral-high: rgba($color-black, 0.4);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-vivid-low"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-vivid-low: rgba($color-black, 0.6);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-vivid-mid"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-vivid-mid: rgba($color-black, 0.8);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-vivid-high"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-vivid-high: $color-black;
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Text colors</h3>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="color color-type-primary">Primary</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-type-primary: $color-black;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-type-secondary">Secondary</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-type-secondary: rgba($color-black, 0.6);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-type-disabled">Disabled</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-type-disabled: rgba($color-black, 0.2);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-type-accent">Accent</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-type-accent: $color-accent;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-type-alert">Alert</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-type-alert: $color-alert;
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<section class="section" id="mdl-alt-colors">
|
|
<header class="section-header">
|
|
<h1 class="section-title">
|
|
<a href="#mdl-alt-colors">MDL alt colors</a>
|
|
</h1>
|
|
</header>
|
|
<div class="section-body color-bg-dark-vivid-high p-xs">
|
|
<h3 class="color-type-primary-alt">Alt fill colors</h3>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-dim-mid-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-dim-mid-alt: rgba($color-white, 0.1);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-dim-high-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-dim-high-alt: rgba($color-white, 0.15);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-neutral-low-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-neutral-low-alt: rgba($color-white, 0.2);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-neutral-mid-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-neutral-mid-alt: rgba($color-white, 0.3);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-neutral-high-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-neutral-high-alt: rgba($color-white, 0.4);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-vivid-low-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-vivid-low-alt: rgba($color-white, 0.6);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-vivid-mid-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-vivid-mid-alt: rgba($color-white, 0.8);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-fill-vivid-high-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-fill-vivid-high-alt: $color-white;
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="color-type-primary-alt">Alt line colors</h3>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-dim-mid-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-dim-mid-alt: rgba($color-white, 0.1);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-dim-high-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-dim-high-alt: rgba($color-white, 0.15);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-neutral-low-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-neutral-low-alt: rgba($color-white, 0.2);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-neutral-mid-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-neutral-mid-alt: rgba($color-white, 0.3);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-neutral-high-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-neutral-high-alt: rgba($color-white, 0.4);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-vivid-low-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-vivid-low-alt: rgba($color-white, 0.6);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-vivid-mid-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-vivid-mid-alt: rgba($color-white, 0.8);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color line color-line-vivid-high-alt"></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-line-vivid-high-alt: $color-white;
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="color-type-primary-alt">Alt text colors</h3>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="color color-type-primary-alt">Primary</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-type-primary-alt: $color-white;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-type-secondary-alt">Secondary</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-type-secondary-alt: rgba($color-white, 0.6);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-type-disabled-alt">Disabled</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-type-disabled-alt: rgba($color-white, 0.2);
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-type-accent-alt">Accent</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-type-accent-alt: $color-accent;
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="color color-type-alert-alt">Alert</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<pre><code class="language-scss">.color-type-alert-alt: $color-alert;
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<a href="#top" class="back-to-top">
|
|
<i class="glyph glyph-up"></i>
|
|
<span class="sr-only">Back to top</span>
|
|
</a>
|
|
|
|
<script src="js/vendor/bootstrap.min.js"></script>
|
|
<script src="js/app.js"></script></body>
|
|
|
|
<!-- Mirrored from winstrap.mwspace.it/colors.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 09 Jun 2020 16:11:28 GMT -->
|
|
</html>
|