Skip to content

Instantly share code, notes, and snippets.

@peterbenoit

peterbenoit/index.html

Last active December 23, 2017 02:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save peterbenoit/66066d46d4640e82d3ffa24c6fb70919 to your computer and use it in GitHub Desktop.
Save peterbenoit/66066d46d4640e82d3ffa24c6fb70919 to your computer and use it in GitHub Desktop.
Download ZIP
Utility Classes
Raw
index.html
<style>
/* mostly just DEMO styles */
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
html {
font-size: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.outline {
outline: 1px solid #c0c0c0;
}
h2.display-5 {
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
margin: 30px 0;
}
::selection {
background: #222;
color: #F18260;
}
.margin-color {
background-color: #F9CD9D;
margin: 1rem;
display: flex;
flex-direction: column;
}
.box-color {
box-shadow: inset 0 0 0 1rem #C4DDB8;
}
.box-color span {
background: #A1C5E7;
}
.p-1.box-color {
box-shadow: inset 0 0 0 1rem #C4DDB8;
}
.p-2.box-color {
box-shadow: inset 0 0 0 2rem #C4DDB8;
}
.p-3.box-color {
box-shadow: inset 0 0 0 3rem #C4DDB8;
}
.p-4.box-color {
box-shadow: inset 0 0 0 4rem #C4DDB8;
}
.p-5.box-color {
box-shadow: inset 0 0 0 5rem #C4DDB8;
}
.cols {
height: auto;
display: flex;
flex: 1 1 auto;
flex-wrap: nowrap;
box-sizing: border-box;
flex-direction: column;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Merriweather', serif;
line-height: 1.3;
margin-top: 1.75rem;
margin-bottom: .75rem;
}
h1, .h1 {
font-size: 2.5rem;
}
h2, .h2 {
font-size: 2.125rem;
}
h3, .h3 {
font-size: 1.875rem;
}
h4, .h4 {
font-size: 1.625rem;
line-height: 1.4;
}
h5, .h5 {
font-size: 1.375rem;
line-height: 1.5;
}
h6, .h6 {
font-size: 1.125rem;
font-weight: bold;
line-height: 1.6;
}
[class^='lh'] {
border-top: 1px solid #f7f7f7;
border-bottom: 1px solid #f7f7f7;
background: #A1C5E7;
padding-left: 5px;
}
.small-cube {
width: 20px;
height: 20px;
outline: 1px solid #ccc;
float: left;
margin: 2px;
}
.medium-cube {
width: 75px;
height: 75px;
float: left;
margin: 10px;
padding: 2px;
}
.large-cube {
width: 175px;
height: 175px;
float: left;
margin: 10px;
padding: 2px;
}
</style>
<div class="container">
<h1 class="display-3">Utility Classes</h1>
<p class="lead">These are a collection of variables to be used in the new template, many of which come from Bootstrap 4 and set in their _variables.scss configuration file.</p>
<h3>Theme Colors</h3>
<div class="row">
<div class="col">
See: <a href="http://usability.rocks/colors.html">http://usability.rocks/colors.html</a>
</div>
</div>
<h2 class="display-5">Typography</h2>
<div class="row">
<div class="col">
<p class="font-weight-light">font-weight-light</p>
<p class="font-weight-normal">font-weight-normal</p>
<p class="font-weight-bold">font-weight-bold</p>
<p class="fw-100">fw-100</p>
<p class="fw-200">fw-200</p>
<p class="fw-300">fw-300</p>
<p class="fw-400">fw-400</p>
<p class="fw-500">fw-500</p>
<p class="fw-600">fw-600</p>
<p class="fw-700">fw-700</p>
<p class="fw-800">fw-800</p>
<p class="fw-900">fw-900</p>
<p class="font-italic">font-italic</p>
<p class="text-lowercase">TEXT-LOWERCASE</p>
<p class="text-uppercase">text-uppercase</p>
<p class="text-capitalize">text-capitalize</p>
<p class="text-monospace">Monospace Text</p>
<p class="text-left">text-left</p>
<p class="text-right">text-right</p>
<p class="text-center">text-center</p>
<p><abbr title="Centers for Disease Control and Prevention" class="initialism">CDC</abbr></p>
<div style="width: 100px; height: 50px;"><p class="text-ellipsis">text-ellipsis text-ellipsis</p></div>
<h2 class="display-5">Font Size</h2>
<p class="fs4">fs4</p>
<p class="fs35">fs35</p>
<p class="fs3">fs3</p>
<p class="fs25">fs25</p>
<p class="fs2">fs2</p>
<p class="fs15">fs15</p>
<p class="fs14">fs14</p>
<p class="fs13">fs13</p>
<p class="fs12">fs12</p>
<p class="fs11">fs11</p>
<p class="fs1">fs1</p>
<p class="fs0875">fs0875</p>
<p class="fs075">fs075</p>
<p class="fs05">fs05</p>
<h2 class="display-5">Marks</h2>
<p>this is a <span class="mark">mark</span></p>
<p>this is a <span class="mark mark-yellow">mark</span></p>
<p>this is a <span class="mark mark-green">mark</span></p>
<h2 class="display-5">Heading &amp; Display</h2>
<p class="display-1">display-1</p>
<p class="display-2">display-2</p>
<p class="display-3">display-3</p>
<p class="display-4">display-4</p>
<p class="display-5">display-5</p>
<p class="display-6">display-6</p>
<p class="h1">h1</p>
<p class="h2">h2</p>
<p class="h3">h3</p>
<p class="h4">h4</p>
<p class="h5">h5</p>
<p class="h6">h6</p>
</div>
</div>
<h2 class="display-5">Line Heights</h2>
<p class="lh1">lh1</p>
<p class="lh1-1">lh1-1</p>
<p class="lh1-2">lh1-2</p>
<p class="lh1-3">lh1-3</p>
<p class="lh1-4">lh1-4</p>
<p class="lh1-5">lh1-5</p>
<p class="lh1-6">lh1-6</p>
<p class="lh1-7">lh1-7</p>
<p class="lh1-8">lh1-8</p>
<p class="lh1-9">lh1-9</p>
<p class="lh2">lh2</p>
<h2 class="display-5">Lists</h2>
<div class="row">
<div class="col"><ol class="list-inline">
<li class="list-inline-item">list-inline</li>
<li class="list-inline-item">list-inline</li>
<li class="list-inline-item">list-inline</li>
<li class="list-inline-item">list-inline</li>
<li class="list-inline-item">list-inline</li>
</ol>
</div>
</div>
<div class="row">
<div class="col"><ol class="list-unstyled">
<li>list-unstyled</li>
<li>list-unstyled</li>
<li>list-unstyled</li>
<li>list-unstyled</li>
<li>list-unstyled</li>
</ol>
</div>
<div class="col"><ol class="list-lower-alpha">
<li>list-lower-alpha</li>
<li>list-lower-alpha</li>
<li>list-lower-alpha</li>
<li>list-lower-alpha</li>
<li>list-lower-alpha</li>
</ol>
</div>
<div class="col"><ol class="list-lower-greek">
<li>list-lower-greek</li>
<li>list-lower-greek</li>
<li>list-lower-greek</li>
<li>list-lower-greek</li>
<li>list-lower-greek</li>
</ol>
</div>
</div>
<div class="row">
<div class="col"><ol class="list-lower-roman">
<li>list-lower-roman</li>
<li>list-lower-roman</li>
<li>list-lower-roman</li>
<li>list-lower-roman</li>
<li>list-lower-roman</li>
</ol>
</div>
<div class="col"><ol class="list-upper-alpha">
<li>list-upper-alpha</li>
<li>list-upper-alpha</li>
<li>list-upper-alpha</li>
<li>list-upper-alpha</li>
<li>list-upper-alpha</li>
</ol>
</div>
<div class="col"><ol class="list-upper-roman">
<li>list-upper-roman</li>
<li>list-upper-roman</li>
<li>list-upper-roman</li>
<li>list-upper-roman</li>
<li>list-upper-roman</li>
</ol>
</div>
<div class="col"><ol class="list-group">
<li class="list-group-item">list-group (block list)</li>
<li class="list-group-item">list-group (block list)</li>
<li class="list-group-item">list-group (block list)</li>
<li class="list-group-item">list-group (block list)</li>
<li class="list-group-item">list-group (block list)</li>
</ol>
</div>
</div>
<h2 class="display-5">Borders</h2>
<div class="row">
<div class="col">
<div class="bt-0 border border-dark medium-cube">
bt-0
</div>
<div class="bt-1 border border-dark medium-cube">
bt-1
</div>
<div class="bt-2 border border-dark medium-cube">
bt-2
</div>
<div class="bt-3 border border-dark medium-cube">
bt-3
</div>
<div class="bt-4 border border-dark medium-cube">
bt-4
</div>
<div class="bt-5 border border-dark medium-cube">
bt-5
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="br-0 border border-dark medium-cube">
br-0
</div>
<div class="br-1 border border-dark medium-cube">
br-1
</div>
<div class="br-2 border border-dark medium-cube">
br-2
</div>
<div class="br-3 border border-dark medium-cube">
br-3
</div>
<div class="br-4 border border-dark medium-cube">
br-4
</div>
<div class="br-5 border border-dark medium-cube">
br-5
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="bb-0 border border-dark medium-cube">
bb-0
</div>
<div class="bb-1 border border-dark medium-cube">
bb-1
</div>
<div class="bb-2 border border-dark medium-cube">
bb-2
</div>
<div class="bb-3 border border-dark medium-cube">
bb-3
</div>
<div class="bb-4 border border-dark medium-cube">
bb-4
</div>
<div class="bb-5 border border-dark medium-cube">
bb-5
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="bl-0 border border-dark medium-cube">
bl-0
</div>
<div class="bl-1 border border-dark medium-cube">
bl-1
</div>
<div class="bl-2 border border-dark medium-cube">
bl-2
</div>
<div class="bl-3 border border-dark medium-cube">
bl-3
</div>
<div class="bl-4 border border-dark medium-cube">
bl-4
</div>
<div class="bl-5 border border-dark medium-cube">
bl-5
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="border medium-cube border-primary">
border-primary
</div>
<div class="border medium-cube border-secondary">
border-secondary
</div>
<div class="border medium-cube border-success">
border-success
</div>
<div class="border medium-cube border-info">
border-info
</div>
<div class="border medium-cube border-warning">
border-warning
</div>
<div class="border medium-cube border-danger">
border-danger
</div>
<div class="border medium-cube border-light">
border-light
</div>
<div class="border medium-cube border-dark">
border-dark
</div>
<div class="border medium-cube border-white">
border-white
</div>
<div class="border medium-cube border-blue">
border-blue
</div>
<div class="border medium-cube border-purple">
border-purple
</div>
<div class="border medium-cube border-red">
border-red
</div>
<div class="border medium-cube border-green">
border-green
</div>
<div class="border medium-cube border-primary">
border-primary
</div>
<div class="border medium-cube border-secondary">
border-secondary
</div>
<div class="border medium-cube border-tertiary">
border-tertiary
</div>
<div class="border-dark medium-cube bs-dotted">
bs-dotted
</div>
<div class="border-dark medium-cube bs-dashed">
bs-dashed
</div>
<div class="border-dark medium-cube bs-solid">
bs-solid
</div>
<div class="medium-cube bs-double">
bs-double
</div>
<div class="medium-cube bs-groove">
bs-groove
</div>
<div class="medium-cube bs-ridge">
bs-ridge
</div>
<div class="medium-cube bs-inset">
bs-inset
</div>
<div class="medium-cube bs-outset">
bs-outset
</div>
<div class="medium-cube bs-none">
bs-none
</div>
<div class="border border-dark medium-cube bs-hidden">
bs-hidden
</div>
<div class="border border-dark medium-cube br-xsmall">
br-xsmall
</div>
<div class="border border-dark medium-cube br-small">
br-small
</div>
<div class="border border-dark medium-cube br-medium">
br-medium
</div>
<div class="border border-dark medium-cube br-large">
br-large
</div>
<div class="border border-dark medium-cube br-xlarge">
br-xlarge
</div>
<div class="border border-dark medium-cube br-none">
br-none
</div>
<div class="border border-dark medium-cube rounded">
rounded
</div>
<div class="border border-dark medium-cube rounded-top">
rounded-top
</div>
<div class="border border-dark medium-cube rounded-right">
rounded-right
</div>
<div class="border border-dark medium-cube rounded-bottom">
rounded-bottom
</div>
<div class="border border-dark medium-cube rounded-left">
rounded-left
</div>
<div class="border border-dark medium-cube rounded-circle">
rounded-circle
</div>
<div class="border border-dark medium-cube rounded-0">
rounded-0
</div>
<div class="border border-dark medium-cube rounded-top-right">
rounded-top-right
</div>
<div class="border border-dark medium-cube rounded-top-left">
rounded-top-left
</div>
<div class="border border-dark medium-cube rounded-bottom-right">
rounded-bottom-right
</div>
<div class="border border-dark medium-cube rounded-bottom-left">
rounded-bottom-left
</div>
</div>
</div>
<h2 class="display-5 clear">Dropshadows</h2>
<div class="row">
<div class="col">
<div class="ds-0 border border-dark medium-cube">
ds-0
</div>
<div class="ds-1 border border-dark medium-cube">
ds-1
</div>
<div class="ds-2 border border-dark medium-cube">
ds-2
</div>
<div class="ds-3 border border-dark medium-cube">
ds-3
</div>
<div class="ds-4 border border-dark medium-cube">
ds-4
</div>
<div class="ds-5 border border-dark medium-cube">
ds-5
</div>
<div class="ds-6 border border-dark medium-cube">
ds-6
</div>
<div class="ds-7 border border-dark medium-cube">
ds-7
</div>
</div>
</div>
<h2 class="display-5">Opacity/Transparency</h2>
<div class="row">
<div class="col">
<div class="p-3 border border-dark medium-cube bg-primary op-0">0</div>
<div class="p-3 border border-dark medium-cube bg-primary op-25">25</div>
<div class="p-3 border border-dark medium-cube bg-primary op-50">50</div>
<div class="p-3 border border-dark medium-cube bg-primary op-75">75</div>
<div class="p-3 border border-dark medium-cube bg-primary op-80">80</div>
<div class="p-3 border border-dark medium-cube bg-primary op-90">90</div>
<div class="p-3 border border-dark medium-cube bg-primary op-100">100</div>
</div>
</div>
<h2 class="display-5">Width/Height</h2>
<div class="row">
<div class="col">
<div class="p-3 border border-dark medium-cube w-1"> w-1</div>
<div class="p-3 border border-dark medium-cube w-2"> w-2</div>
<div class="p-3 border border-dark medium-cube w-3"> w-3</div>
<div class="p-3 border border-dark medium-cube w-4"> w-4</div>
<div class="p-3 border border-dark medium-cube w-5"> w-5</div>
<div class="p-3 border border-dark medium-cube w-6"> w-6</div>
<div class="p-3 border border-dark medium-cube w-7"> w-7</div>
<div class="p-3 border border-dark medium-cube w-8"> w-8</div>
<div class="p-3 border border-dark medium-cube w-9"> w-9</div>
<div class="p-3 border border-dark medium-cube w-10"> w-10</div>
<div class="p-3 border border-dark medium-cube w-12"> w-12</div>
<div class="p-3 border border-dark medium-cube w-16"> w-16</div>
<div class="p-3 border border-dark medium-cube w-24"> w-24</div>
<div class="p-3 border border-dark medium-cube w-32"> w-32</div>
<div class="p-3 border border-dark medium-cube w-25">
w-25
</div>
<div class="p-3 border border-dark medium-cube w-33">
w-33
</div>
<div class="p-3 border border-dark medium-cube w-50">
w-50
</div>
<div class="p-3 border border-dark medium-cube w-66">
w-66
</div>
<div class="p-3 border border-dark medium-cube w-75">
w-75
</div>
<div class="p-3 border border-dark medium-cube w-100">
w-100
</div>
</div>
</div>
<div class="row ml-2">
<div class="p-3 border border-dark vh5">
vh5
</div>
<div class="p-3 border border-dark vh10">
vh10
</div>
<div class="p-3 border border-dark vh15">
vh15
</div>
<div class="p-3 border border-dark vh20">
vh20
</div>
<div class="p-3 border border-dark vh25">
vh25
</div>
<div class="p-3 border border-dark vh30">
vh30
</div>
<div class="p-3 border border-dark vh35">
vh35
</div>
<div class="p-3 border border-dark vh40">
vh40
</div>
<div class="p-3 border border-dark vh45">
vh45
</div>
<div class="p-3 border border-dark vh50">
vh50
</div>
<div class="p-3 border border-dark vh55">
vh55
</div>
<div class="p-3 border border-dark vh60">
vh60
</div>
<div class="p-3 border border-dark vh65">
vh65
</div>
<div class="p-3 border border-dark vh70">
vh70
</div>
<div class="p-3 border border-dark vh75">
vh75
</div>
<div class="p-3 border border-dark vh80">
vh45
</div>
<div class="p-3 border border-dark vh85">
vh85
</div>
<div class="p-3 border border-dark vh90">
vh90
</div>
<div class="p-3 border border-dark vh95">
vh95
</div>
<div class="p-3 border border-dark vh100">
vh100
</div>
</div>
<h2 class="display-5 clear">Margins &amp; Padding</h2>
<div class="row">
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-1 p-1"><span>m-1 p-1</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-1 p-2"><span>m-1 p-2</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-1 p-3"><span>m-1 p-3</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-1 p-4"><span>m-1 p-4</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-1 p-5"><span>m-1 p-5</span></span>
</div>
</div>
</div>
<div class="row">
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-2 p-1"><span>m-2 p-1</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-2 p-2"><span>m-2 p-2</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-2 p-3"><span>m-2 p-3</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-2 p-4"><span>m-2 p-4</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-2 p-5"><span>m-2 p-5</span></span>
</div>
</div>
</div>
<div class="row">
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-3 p-1"><span>m-3 p-1</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-3 p-2"><span>m-3 p-2</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-3 p-3"><span>m-3 p-3</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-3 p-4"><span>m-3 p-4</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-3 p-5"><span>m-3 p-5</span></span>
</div>
</div>
</div>
<div class="row">
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-4 p-1"><span>m-4 p-1</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-4 p-2"><span>m-4 p-2</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-4 p-3"><span>m-4 p-3</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-4 p-4"><span>m-4 p-4</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-4 p-5"><span>m-4 p-5</span></span>
</div>
</div>
</div>
<div class="row">
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-5 p-1"><span>m-5 p-1</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-5 p-2"><span>m-5 p-2</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-5 p-3"><span>m-5 p-3</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-5 p-4"><span>m-5 p-4</span></span>
</div>
</div>
<div class="cols mr-3">
<div class="margin-color">
<span class="box-color m-5 p-5"><span>m-5 p-5</span></span>
</div>
</div>
</div>
<h2 class="display-5">Overflow</h2>
<div class="border large-cube border-dark overflow-visible">
overflow-visible overflow-visible overflow-visible overflow-visible overflow-visible overflow-visible overflow-visible
</div>
<div class="border large-cube border-dark overflow-hidden">
overflow-hidden overflow-hidden overflow-hidden overflow-hidden overflow-hidden overflow-hidden overflow-hidden overflow-hidden overflow-hidden overflow-hidden overflow-hidden overflow-hidden overflow-hidden overflow-hidden overflow-hidden overflow-hidden overflow-hidden overflow-hidden overflow-hidden
</div>
<div class="border large-cube border-dark overflow-scroll">
<span class="nowrap">overflowscrolloverflowscrolloverflow-scroll</span> overflow-scroll overflow-scroll overflow-scroll overflow-scroll overflow-scroll overflow-scroll overflow-scroll overflow-scroll overflow-scroll overflow-scroll overflow-scroll overflow-scroll overflow-scroll overflow-scroll overflow-scroll
</div>
<div class="border large-cube border-dark overflow-x-scroll">
overflow-x-scroll overflow-x-scroll overflow-x-scroll overflow-x-scroll overflow-x-scroll overflow-x-scroll overflow-x-scroll overflow-x-scroll overflow-x-scroll overflow-x-scroll overflow-x-scroll overflow-x-scroll overflow-x-scroll
</div>
<div class="border large-cube border-dark overflow-x-hidden">
<span class="nowrap">overflow-x-hiddenoverflow-x-hiddenoverflow-x-hidden</span> overflow-x-hidden overflow-x-hidden overflow-x-hidden overflow-x-hidden overflow-x-hidden overflow-x-hidden overflow-x-hidden overflow-x-hidden overflow-x-hidden overflow-x-hidden overflow-x-hidden overflow-x-hidden overflow-x-hidden
</div>
<div class="border large-cube border-dark overflow-y-scroll"> overflow-y-scroll overflow-y-scroll overflow-y-scroll overflow-y-scroll overflow-y-scroll overflow-y-scroll overflow-y-scroll overflow-y-scroll overflow-y-scroll overflow-y-scroll overflow-y-scroll overflow-y-scroll overflow-y-scroll overflow-y-scroll overflow-y-scroll overflow-y-scroll overflow-y-scroll
</div>
<div class="border large-cube border-dark overflow-y-hidden"> <span class="nowrap">overflow-y-hiddenoverflow-y-hiddenoverflow-y-hidden</span> overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden overflow-y-hidden
</div>
<h2 class="display-5 clear">Column Order</h2>
<p class="small">(view-source)</p>
<div class="row">
<div class="col border border-dark order-5 medium-cube">1</div>
<div class="col border border-dark order-4 medium-cube">2</div>
<div class="col border border-dark order-3 medium-cube">3</div>
<div class="col border border-dark order-2 medium-cube">4</div>
<div class="col border border-dark order-1 medium-cube">5</div>
</div>
<div class="row">
<div class="col border border-dark order-3 medium-cube">1</div>
<div class="col border border-dark order-1 medium-cube">2</div>
<div class="col border border-dark order-5 medium-cube">3</div>
<div class="col border border-dark order-2 medium-cube">4</div>
<div class="col border border-dark order-4 medium-cube">5</div>
</div>
<h2 class="display-5 clear">Cursors</h2>
<div class="cursor-pointer border border-dark medium-cube">
cursor-pointer
</div>
<div class="cursor-auto border border-dark medium-cube">
cursor-auto
</div>
<div class="cursor-help border border-dark medium-cube">
cursor-help
</div>
<div class="cursor-wait border border-dark medium-cube">
cursor-wait
</div>
<div class="cursor-not-allowed border border-dark medium-cube">
cursor-not-allowed
</div>
<h2 class="display-5 clear">Position</h2>
<div class="row">
<div class="large-cube border border-dark">
position-static (p-sta)
<div class="medium-cube border border-dark p-sta float-none pin-right"></div>
</div>
<div class="large-cube border border-dark">
position-relative (p-rel)
<div class="medium-cube border border-dark p-rel float-none pin-right"></div>
</div>
<div class="large-cube border border-dark p-rel">
position-absolute (p-abs)
<div class="medium-cube border border-dark p-abs float-none pin-right"></div>
</div>
<div class="large-cube border border-dark">
position-fixed (p-fix)
<div class="medium-cube border border-dark p-fix float-none m-0"></div>
</div>
<div class="large-cube border border-dark p-rel">
position-sticky (p-sti)
<div class="medium-cube border border-dark p-sti float-none m-0"></div>
</div>
<div class="large-cube border border-dark">
position-center (p-cen)
<div class="medium-cube border border-dark p-cen float-none"></div>
</div>
<div class="large-cube border border-dark p-rel">
position-middle (p-mid)
<div class="medium-cube border border-dark p-mid float-none m-0"></div>
</div>
<div class="large-cube border border-dark p-rel">
position-absolute-center (p-abs-cen)
<div class="medium-cube border border-dark p-abs-cen float-none m-0"></div>
</div>
<div class="large-cube border border-dark p-rel">
position-top (p-top)
<div class="medium-cube border border-dark p-abs p-top float-none"></div>
</div>
<div class="large-cube border border-dark p-rel">
position-right (p-right)
<div class="medium-cube border border-dark p-abs p-right float-none"></div>
</div>
<div class="large-cube border border-dark p-rel">
position-left (p-left)
<div class="medium-cube border border-dark p-abs p-left float-none"></div>
</div>
<div class="large-cube border border-dark p-rel">
position-bottom (p-bottom)
<div class="medium-cube border border-dark p-abs p-bottom float-none"></div>
</div>
</div>
<h2 class="display-5 clear">List Columns</h2>
<div class="row">
<div class="col-6 cc-3 cg-4">
<ul class="generic-list">
<li class="item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet, perferendis?</li>
<li class="item">Minus, cumque? Repellat, sed aperiam optio dolorem facilis voluptates atque?</li>
<li class="item">Officia id saepe nesciunt blanditiis? Architecto sed accusamus at dolorum!</li>
<li class="item">Enim obcaecati ab libero aut inventore quam labore incidunt amet!</li>
<li class="item">Enim quo, molestiae ratione magnam quis ducimus fuga explicabo rem!</li>
</ul>
</div>
<div class="col-6 cc-3 cg-4">
<ul class="generic-list">
<li class="item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet, perferendis?</li>
<li class="item">Minus, cumque? Repellat, sed aperiam optio dolorem facilis voluptates atque?</li>
<li class="item">Officia id saepe nesciunt blanditiis? Architecto sed accusamus at dolorum!</li>
<li class="item">Enim obcaecati ab libero aut inventore quam labore incidunt amet!</li>
<li class="item">Enim quo, molestiae ratione magnam quis ducimus fuga explicabo rem!</li>
</ul>
</div>
<div class="cc-3 cg-4">
<ul class="generic-list">
<li class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, commodi?</li>
<li class="item">Pariatur cum suscipit molestiae aliquam culpa esse itaque consectetur tempora?</li>
<li class="item">Omnis corporis impedit harum recusandae illo modi magnam quae quos.</li>
<li class="item">Nobis officia eos dolores nam sapiente itaque libero distinctio labore.</li>
<li class="item">Alias rem quae, dolorem nostrum culpa ullam voluptate dolores sunt.</li>
<li class="item">Deserunt cupiditate dolorem quia! Voluptas illum atque rem dolorem voluptates.</li>
<li class="item">Maiores quod quis, veniam nemo deleniti reiciendis beatae incidunt voluptatem.</li>
<li class="item">Labore, libero. Amet, ab consequatur fugit consectetur laboriosam dignissimos adipisci!</li>
<li class="item">Omnis autem quis deserunt repellat vero harum assumenda cupiditate possimus!</li>
<li class="item">Perspiciatis fugiat itaque, reiciendis in id ea aut veniam ducimus.</li>
<li class="item">Minima, ut amet. Numquam doloribus voluptates cum a vitae magnam!</li>
<li class="item">Officia, autem corrupti. Quidem quisquam labore harum assumenda sequi quas.</li>
<li class="item">Eaque repellendus minus soluta libero ipsam veniam, vel perferendis doloremque!</li>
<li class="item">Voluptatibus vel, repellendus dolorum quo repudiandae odio corrupti modi eaque?</li>
<li class="item">Mollitia enim esse dolores repellendus iusto inventore laborum accusantium illum!</li>
<li class="item">Dolorem, iusto rem! Veritatis eos sequi pariatur quibusdam dignissimos inventore?</li>
</ul>
</div>
</div>
</div>
Raw
script.js
$( function() {
flexibility(document.documentElement);
window.viewportUnitsBuggyfill.init();
} );
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexibility/2.0.1/flexibility.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewport-units-buggyfill/0.6.1/viewport-units-buggyfill.min.js"></script>
Raw
style.scss
// standard colors
$white: white !default;
$black: black !default;
$red: #8f0000 !default;
$green: #80ff80 !default;
$yellow: #ffff80 !default;
// theme colors
$primary: #005eaa !default;
$secondary: #88c3ea !default;
$tertiary: #c0e9ff !default;
$purple-primary: #712177 !default;
$purple-secondary: #b890bb !default;
$purple-tertiary: #e3d3e4 !default;
$brown-primary: #705043 !default;
$brown-secondary: #ad907b !default;
$brown-tertiary: #d7ccc8 !default;
$teal-primary: #00695c !default;
$teal-secondary: #4ebaaa !default;
$teal-tertiary: #ceece7 !default;
$pink-primary: #af4448 !default;
$pink-secondary: #e57373 !default;
$pink-tertiary: #ffc2c2 !default;
$orange-primary: #bb4d00 !default;
$orange-secondary: #ffad42 !default;
$orange-tertiary: #ffe97d !default;
$slate-primary: #29434e !default;
$slate-secondary: #7e9ba5 !default;
$slate-tertiary: #b6c6d2 !default;
$indigo-primary: #26418f !default;
$indigo-secondary: #92a6dd !default;
$indigo-tertiary: #dee8ff !default;
$cyan-primary: #007c91 !default;
$cyan-secondary: #65b0bd !default;
$cyan-tertiary: #cce5e9 !default;
$green-primary: #4b830d !default;
$green-secondary: #84bc49 !default;
$green-tertiary: #dcedc8 !default;
$amber-primary: #fbab18 !default;
$amber-secondary: #ffd54f !default;
$amber-tertiary: #ffecb3 !default;
// engagement colors
// TODO: TO BE DEFINED
$success: #28a745 !default;
$info: #17a2b8 !default;
$warning: #ffc107 !default;
$danger: #dc3545 !default;
$light: #f8f9fa !default;
$dark: #343a40 !default;
$muted: #696969 !default;
// alerts
$alert-red: #870808 !default;
// grays
$graydarker: #333 !default;
$graydark: #555 !default;
$gray: #bdbdbd !default;
$graylight: #e0e0e0 !default;
$graylighter: #f0f0f0 !default;
$graylightest: #f5f5f5 !default;
// Social Icons Colors
// https://www.lockedowndesign.com/social-media-colors/
// https://brandcolors.net/
$twitter: #00b6f1 !default;
$skype: #00aff0 !default;
$facebook: #3b5998 !default;
$linkedin: #007bb6 !default;
$googleplus: #df4a32 !default;
$youtube: #ff0000 !default;
$flickrpink: #f40083 !default;
$flickrblue: #006add !default;
$pinterest: #cb2027 !default;
$instagram: #c32aa3 !default;
$vimeo: #45bbff !default;
$tumblr: #35465d !default;
$soundcloud: #ff5500 !default;
$foursquare: #fc4575 !default;
$dribbble: #ea4c89 !default;
$behance: #053eff !default;
$vine: #00b489 !default;
$stumbleupon: #eb4924 !default;
$rss: #fa9b39 !default;
$snapchat: #fffc00 !default;
$whatsapp: #25d366 !default;
$swarm: #ffb000 !default;
$android: #a4c639 !default;
$yahoo: #430297 !default;
$spotify: #1ed760 !default;
$reddit: #ff5700 !default;
$deviantart: #4a5d4e !default;
$pocket: #ee4056 !default;
$quora: #aa2200 !default;
$slideshare: #f7941e !default;
$px500: #0099e5 !default; // 500px
$listly: #df6d46 !default;
$stackoverflow: #f48024 !default;
$monospace: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
// Include media plugging into Bootstrap 4's Grid Breakpoints map
//
// $breakpoints: $grid-breakpoints;
// body {
// &::before {
// content: "<sm";
// }
// @include media(">sm") {
// &::before {
// content: ">sm";
// }
// }
// @include media(">md") {
// &::before {
// content: ">md";
// }
// }
// @include media(">lg") {
// &::before {
// content: ">lg";
// }
// }
// @include media(">xl") {
// &::before {
// content: ">xl";
// }
// }
// }
body:after {
content: "xs,sm,md,lg,xl,xxl";
display: none;
}
body:before {
display: none;
content: "xs";
}
@media (min-width: 576px) {
body:before {
content: "sm";
}
}
@media (min-width: 768px) {
body:before {
content: "md";
}
}
@media (min-width: 992px) {
body:before {
content: "lg";
}
}
@media (min-width: 1200px) {
body:before {
content: "xl";
}
}
@media (min-width: 1600px) {
body:before {
content: "xxl";
}
}
// doesn't belong here!
a, [tabindex], input, radio, select, checkbox, textarea, label, fieldset, legend, datalist, output, .focus {
&:focus {
outline: 3px dashed $black;
}
&.c-white:focus {
outline: 3px dashed $white;
}
}
// o-: Signify that something is an Object, and that it may be used in any number of unrelated contexts to the one you can currently see it in. Making modifications to these types of class could potentially have knock-on effects in a lot of other unrelated places. Tread carefully.
// c-: Signify that something is a Component. This is a concrete, implementation-specific piece of UI. All of the changes you make to its styles should be detectable in the context you’re currently looking at. Modifying these styles should be safe and have no side effects.
// u-: Signify that this class is a Utility class. It has a very specific role (often providing only one declaration) and should not be bound onto or changed. It can be reused and is not tied to any specific piece of UI. You will probably recognise this namespace from libraries and methodologies like SUIT.
// t-: Signify that a class is responsible for adding a Theme to a view. It lets us know that UI Components’ current cosmetic appearance may be due to the presence of a theme.
// s-: Signify that a class creates a new styling context or Scope. Similar to a Theme, but not necessarily cosmetic, these should be used sparingly—they can be open to abuse and lead to poor CSS if not used wisely.
// is-, has-: Signify that the piece of UI in question is currently styled a certain way because of a state or condition. It tells us that the DOM currently has a temporary, optional, or short-lived style applied to it due to a certain state being invoked.
// _: Signify that this class is a hack! Sometimes, although incredibly rarely, we need to add a class in our markup in order to force something to work. If we do this, we need to let others know that this class is less than ideal, and hopefully temporary (i.e. do not bind onto this).
// js-: Signify that this piece of the DOM has some behaviour acting upon it, and that JavaScript binds onto it to provide that behaviour.
// qa-: Signify that a QA or Test Engineering team is running an automated UI test which needs to find or bind onto these parts of the DOM. Like the JavaScript namespace, this basically just reserves hooks in the DOM for non-CSS purposes.
// mymodule {
// @at-root {
// .#{&}-header { color: red }
// }
// }
// }
.clickthru {
pointer-events: none; // allow click through to element beneath
}
// ===============================================================
// Font REMs
.fs4 { font-size: 4rem; }
.fs35 { font-size: 3.5rem; }
.fs3 { font-size: 3rem; }
.fs25 { font-size: 2.5rem; }
.fs2 { font-size: 2rem; }
.fs15 { font-size: 1.5rem; }
.fs14 { font-size: 1.4rem; }
.fs13 { font-size: 1.3rem; }
.fs12 { font-size: 1.2rem; }
.fs11 { font-size: 1.1rem; }
.fs1 { font-size: 1rem; }
.fs0875 { font-size: .875rem; }
.fs075 { font-size: .75rem; }
.fs05 { font-size: .5rem; }
.text-monospace { font-family: $monospace; }
.pad-italics {
// per Lisa, don't pad italics on headings
h1, h2, h3, h4, h5, h6 {
i:after, em:after, .font-italic:after {
content: "";
}
}
i:after, em:after, .font-italic:after {
content: "\00a0";
}
}
// ===============================================================
// Line-height
.lh1 { line-height: 1; }
.lh1-1 { line-height: 1.1; }
.lh1-2 { line-height: 1.2; }
.lh1-3 { line-height: 1.3; }
.lh1-4 { line-height: 1.4; }
.lh1-5 { line-height: 1.5; }
.lh1-6 { line-height: 1.6; }
.lh1-7 { line-height: 1.7; }
.lh1-8 { line-height: 1.8; }
.lh1-9 { line-height: 1.9; }
.lh2 { line-height: 2; }
// ===============================================================
// Overflow
.of-v { overflow: visible; }
.of-h { overflow: hidden; }
.of-s { overflow: scroll; }
.of-x-s { overflow-x: scroll; }
.of-x-h { overflow-x: hidden; }
.of-x-v { overflow-x: visible; }
.of-y-s { overflow-y: scroll; }
.of-y-h { overflow-y: hidden; }
.of-y-v { overflow-y: visible; }
// ===============================================================
// Columns
.cc-1 { column-count: 1; }
.cc-2 { column-count: 2; }
.cc-3 { column-count: 3; }
.cc-4 { column-count: 4; }
@media (min-width: 576px) {
.cc-sm-1 { column-count: 1; }
.cc-sm-2 { column-count: 2; }
.cc-sm-3 { column-count: 3; }
.cc-sm-4 { column-count: 4; }
}
@media (min-width: 768px) {
.cc-md-1 { column-count: 1; }
.cc-md-2 { column-count: 2; }
.cc-md-3 { column-count: 3; }
.cc-md-4 { column-count: 4; }
}
@media (min-width: 992px) {
.cc-lg-1 { column-count: 1; }
.cc-lg-2 { column-count: 2; }
.cc-lg-3 { column-count: 3; }
.cc-lg-4 { column-count: 4; }
}
@media (min-width: 1200px) {
.cc-xl-1 { column-count: 1; }
.cc-xl-2 { column-count: 2; }
.cc-xl-3 { column-count: 3; }
.cc-xl-4 { column-count: 4; }
}
// column gap
.cg-1 { column-gap: 10px; }
.cg-2 { column-gap: 20px; }
.cg-3 { column-gap: 30px; }
.cg-4 { column-gap: 40px; }
// column rule style
.crs-solid { column-rule-style: solid; }
.crs-dotted { column-rule-style: dotted; }
.crs-dashed { column-rule-style: dashed; }
// column rule width
.crw-1 { column-rule-width: 1px; }
.crw-2 { column-rule-width: 2px; }
.crw-3 { column-rule-width: 3px; }
.crw-4 { column-rule-width: 4px; }
.crw-5 { column-rule-width: 5px; }
// column rule color
.crc-p { column-rule-color: $primary; }
.crc-s { column-rule-color: $secondary; }
// column span
.cs-1 { column-span: 1; }
.cs-all { column-span: all; }
// marks
.mark.mark-yellow { background-color: $yellow; }
.mark.mark-green { background-color: $green; }
// ===============================================================
// Position
.p-rel { position: relative!important; }
.p-sta { position: static!important; }
.p-abs { position: absolute!important; }
.p-fix { position: fixed!important; }
.p-sti { position: sticky!important; }
.p-cen { margin-left: auto!important; margin-right: auto!important; }
.p-middle {
position: absolute;
top: 50%;
transform: translateY(-50%)!important;
}
.p-abs-cen {
position: absolute;
top: 50%!important;
left: 50%!important;
margin-right: -50%!important;
transform: translate(-50%, -50%)!important;
}
.p-top { top: 0!important; }
.p-right { right: 0!important; }
.p-bottom { bottom: 0!important; }
.p-left { left: 0!important; }
.p-edges { top: 0!important; right: 0!important; bottom: 0!important; left: 0!important; }
.pin-top {
position: absolute;
top: 0;
}
.pin-right {
position: absolute;
right: 0;
}
.pin-bottom {
position: absolute;
bottom: 0;
}
.pin-left {
position: absolute;
left: 0;
}
// Z-Index
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-max { z-index: 2147483647; }
.z-auto { z-index: auto; }
// ===============================================================
// Cursors
.cur-pointer { cursor: pointer; }
.cur-auto { cursor: auto; }
.cur-help { cursor: help; }
.cur-wait { cursor: wait; }
.cur-not-allowed { cursor:not-allowed; }
.cur-zoom-in { cursor: zoom-in; }
.cur-zoom-out { cursor: zoom-out; }
// ===============================================================
// Visibility classes when JS is disabled
.no-js .js-hidden { display: inherit; }
.no-js .js-hidden-block { display: block; }
.no-js .js-hidden-inline { display: inline; }
.no-js .js-hidden-inline-block { display: inline-block; }
.no-js .js-visible { display: none; }
// ===============================================================
// Clears from TP3, TODO: make sure we have all the types here.
.cl { clear:left; }
.rl, .cr { clear:right; }
.clear, .cb { clear:both; }
.cf:before, .cf:after { content:" "; display:table; }
.cf:after { clear:both; }
// ===============================================================
// Colors
// background colors
.bg-red, .bg-r { background-color: $red!important; }
.bg-blue-p { background-color: $primary!important; }
.bg-blue-s { background-color: $secondary!important; }
.bg-blue-t { background-color: $tertiary!important; }
.b-blue-p { border-color: $primary!important; }
.b-blue-s { border-color: $secondary!important; }
.b-blue-t { border-color: $tertiary!important; }
.bg-purple-p { background-color: $purple-primary!important; }
.bg-purple-s { background-color: $purple-secondary!important; }
.bg-purple-t { background-color: $purple-tertiary!important; }
.b-purple-p { border-color: $purple-primary!important; }
.b-purple-s { border-color: $purple-secondary!important; }
.b-purple-t { border-color: $purple-tertiary!important; }
.bg-brown-p { background-color: $brown-primary!important; }
.bg-brown-s { background-color: $brown-secondary!important; }
.bg-brown-t { background-color: $brown-tertiary!important; }
.b-brown-p { border-color: $brown-primary!important; }
.b-brown-s { border-color: $brown-secondary!important; }
.b-brown-t { border-color: $brown-tertiary!important; }
.bg-teal-p { background-color: $teal-primary!important; }
.bg-teal-s { background-color: $teal-secondary!important; }
.bg-teal-t { background-color: $teal-tertiary!important; }
.b-teal-p { border-color: $teal-primary!important; }
.b-teal-s { border-color: $teal-secondary!important; }
.b-teal-t { border-color: $teal-tertiary!important; }
.bg-orange-p { background-color: $orange-primary!important; }
.bg-orange-s { background-color: $orange-secondary!important; }
.bg-orange-t { background-color: $orange-tertiary!important; }
.b-orange-p { border-color: $orange-primary!important; }
.b-orange-s { border-color: $orange-secondary!important; }
.b-orange-t { border-color: $orange-tertiary!important; }
.bg-pink-p { background-color: $pink-primary!important; }
.bg-pink-s { background-color: $pink-secondary!important; }
.bg-pink-t { background-color: $pink-tertiary!important; }
.b-pink-primary { border-color: $pink-primary!important; }
.b-pink-secondary { border-color: $pink-secondary!important; }
.b-pink-tertiary { border-color: $pink-tertiary!important; }
.bg-slate-p { background-color: $slate-primary!important; }
.bg-slate-s { background-color: $slate-secondary!important; }
.bg-slate-t { background-color: $slate-tertiary!important; }
.b-slate-primary { border-color: $slate-primary!important; }
.b-slate-secondary { border-color: $slate-secondary!important; }
.b-slate-tertiary { border-color: $slate-tertiary!important; }
.bg-indigo-p { background-color: $indigo-primary!important; }
.bg-indigo-s { background-color: $indigo-secondary!important; }
.bg-indigo-t { background-color: $indigo-tertiary!important; }
.b-indigo-primary { border-color: $indigo-primary!important; }
.b-indigo-secondary { border-color: $indigo-secondary!important; }
.b-indigo-tertiary { border-color: $indigo-tertiary!important; }
.bg-cyan-p { background-color: $cyan-primary!important; }
.bg-cyan-s { background-color: $cyan-secondary!important; }
.bg-cyan-t { background-color: $cyan-tertiary!important; }
.b-cyan-primary { border-color: $cyan-primary!important; }
.b-cyan-secondary { border-color: $cyan-secondary!important; }
.b-cyan-tertiary { border-color: $cyan-tertiary!important; }
.bg-green-p { background-color: $green-primary!important; }
.bg-green-s { background-color: $green-secondary!important; }
.bg-green-t { background-color: $green-tertiary!important; }
.b-green-primary { border-color: $green-primary!important; }
.b-green-secondary { border-color: $green-secondary!important; }
.b-green-tertiary { border-color: $green-tertiary!important; }
.bg-amber-p { background-color: $amber-primary!important; }
.bg-amber-s { background-color: $amber-secondary!important; }
.bg-amber-t { background-color: $amber-tertiary!important; }
.b-amber-primary { border-color: $amber-primary!important; }
.b-amber-secondary { border-color: $amber-secondary!important; }
.b-amber-tertiary { border-color: $amber-tertiary!important; }
// alerts
.bg-alert-red, .bg-alert-r { background-color: $alert-red!important; }
// grays
.bg-gray-d2 { background-color: $graydarker!important; }
.bg-gray-d1 { background-color: $graydark!important; }
.bg-gray { background-color: $gray!important; }
.bg-gray-l1 { background-color: $graylight!important; }
.bg-gray-l2 { background-color: $graylighter!important; }
.bg-gray-l3 { background-color: $graylightest!important; }
// colors
.c-white { color: $white!important; }
.c-black { color: $black!important; }
.c-red { color: $red!important; }
.c-blue { color: $primary!important; }
.c-gray-d2 { color: $graydarker!important; }
.c-gray-d1 { color: $graydark!important; }
.c-gray { color: $gray!important; }
.c-gray-l1 { color: $graylight!important; }
.c-gray-l2 { color: $graylighter!important; }
.c-gray-l3 { color: $graylightest!important; }
// ===============================================================
// Lists
.lst-la, .lla { list-style-type: lower-alpha; }
.lst-lg, .llg { list-style-type: lower-greek; }
.lst-lr, .llr { list-style-type: lower-roman; }
.lst-ua, .lua { list-style-type: upper-alpha; }
.lst-ur, .lur { list-style-type: upper-roman; }
.list-block, .list-group, .lb, .lg {}
.lsp-in { list-style-position: inside; }
// ===============================================================
// Cards
// new card flush class
.card.flush .card { border: 0; }
// ===============================================================
// Typography
// font weights
.fw-100 { font-weight: 100!important; }
.fw-200 { font-weight: 200!important; }
.fw-300 { font-weight: 300!important; }
.fw-400 { font-weight: 400!important; }
.fw-500 { font-weight: 500!important; }
.fw-600 { font-weight: 600!important; }
.fw-700 { font-weight: 700!important; }
.fw-800 { font-weight: 800!important; }
.fw-900 { font-weight: 900!important; }
.fw-light { font-weight: 300!important; }
.fw-heavy { font-weight: 700!important; }
// text-rendering
.t-leg { text-rendering: optimizeLegibility!important; }
.t-spd { text-rendering: optimizespeed!important; }
// display ( 5 & 6 not in BS )
.display-5 { font-size: 2.5rem; font-weight: 300; line-height: 1.1; }
.display-6 { font-size: 1.5rem; font-weight: 300; line-height: 1.1; }
// ellipsis
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
// ===============================================================
// Boxes
// border-top
.bt-0 { border-top: none!important; }
.bt-1 { border-top: 1px solid $graylighter!important; }
.bt-2 { border-top: 2px solid $graylighter!important; }
.bt-3 { border-top: 3px solid $graylighter!important; }
.bt-4 { border-top: 4px solid $graylighter!important; }
.bt-5 { border-top: 5px solid $graylighter!important; }
// border-right
.br-0 { border-right: none!important; }
.br-1 { border-right: 1px solid $graylighter!important; }
.br-2 { border-right: 2px solid $graylighter!important; }
.br-3 { border-right: 3px solid $graylighter!important; }
.br-4 { border-right: 4px solid $graylighter!important; }
.br-5 { border-right: 5px solid $graylighter!important; }
// border-bottom
.bb-0 { border-bottom: none!important; }
.bb-1 { border-bottom: 1px solid $graylighter!important; }
.bb-2 { border-bottom: 2px solid $graylighter!important; }
.bb-3 { border-bottom: 3px solid $graylighter!important; }
.bb-4 { border-bottom: 4px solid $graylighter!important; }
.bb-5 { border-bottom: 5px solid $graylighter!important; }
// border-left
.bl-0 { border-left: none!important; }
.bl-1 { border-left: 1px solid $graylighter!important; }
.bl-2 { border-left: 2px solid $graylighter!important; }
.bl-3 { border-left: 3px solid $graylighter!important; }
.bl-4 { border-left: 4px solid $graylighter!important; }
.bl-5 { border-left: 5px solid $graylighter!important; }
// border-all
.ba-0 { border: none!important; }
.ba-1 { border: 1px solid $graylighter!important; }
.ba-2 { border: 2px solid $graylighter!important; }
.ba-3 { border: 3px solid $graylighter!important; }
.ba-4 { border: 4px solid $graylighter!important; }
.ba-5 { border: 5px solid $graylighter!important; }
// border style
.bs-dotted { border-style: dotted!important; }
.bs-dashed { border-style: dashed!important; }
.bs-solid { border-style: solid!important; }
.bs-double { border-style: double!important; }
.bs-groove { border-style: groove!important; }
.bs-ridge { border-style: ridge!important; }
.bs-inset { border-style: inset!important; }
.bs-outset { border-style: outset!important; }
.bs-none { border-style: none!important; }
.bs-hidden { border-style: hidden!important; }
// border-radius
.r-xsmall { border-radius: 0.10rem!important; }
.r-small { border-radius: 0.25rem!important; }
.r-medium { border-radius: 0.50rem!important; }
.r-large { border-radius: 0.75rem!important; }
.r-xlarge { border-radius: 1rem!important; }
.r-none { border-radius: 0!important; }
.r-tr { border-top-right-radius:.25rem!important; }
.r-tl { border-top-left-radius:.25rem!important; }
.r-br { border-bottom-right-radius:.25rem!important; }
.r-bl { border-bottom-left-radius:.25rem!important; }
.r-top-0 { border-top-left-radius: 0!important; border-top-right-radius: 0!important; }
.r-right-0 { border-top-right-radius: 0!important; border-bottom-right-radius: 0!important; }
.r-bottom-0 { border-bottom-left-radius: 0!important; border-bottom-right-radius: 0!important; }
.r-left-0 { border-top-left-radius: 0!important; border-bottom-left-radius: 0!important; }
.r-top-1 { border-top-left-radius: .25rem!important; border-top-right-radius: .25rem!important; }
.r-top-2 { border-top-left-radius: .50rem!important; border-top-right-radius: .50rem!important; }
.r-top-3 { border-top-left-radius: .75rem!important; border-top-right-radius: .75rem!important; }
.r-top-4 { border-top-left-radius: 1rem!important; border-top-right-radius: 1rem!important; }
.r-right-1 { border-bottom-right-radius: .25rem!important; border-top-right-radius: .25rem!important; }
.r-right-2 { border-bottom-right-radius: .50rem!important; border-top-right-radius: .50rem!important; }
.r-right-3 { border-bottom-right-radius: .75rem!important; border-top-right-radius: .75rem!important; }
.r-right-4 { border-bottom-right-radius: 1rem!important; border-top-right-radius: 1rem!important; }
.r-bottom-1 { border-bottom-left-radius: .25rem!important; border-bottom-right-radius: .25rem!important; }
.r-bottom-2 { border-bottom-left-radius: .50rem!important; border-bottom-right-radius: .50rem!important; }
.r-bottom-3 { border-bottom-left-radius: .75rem!important; border-bottom-right-radius: .75rem!important; }
.r-bottom-4 { border-bottom-left-radius: 1rem!important; border-bottom-right-radius: 1rem!important; }
.r-left-1 { border-top-left-radius: .25rem!important; border-bottom-left-radius: .25rem!important; }
.r-left-2 { border-top-left-radius: .50rem!important; border-bottom-left-radius: .50rem!important; }
.r-left-3 { border-top-left-radius: .75rem!important; border-bottom-left-radius: .75rem!important; }
.r-left-4 { border-top-left-radius: 1rem!important; border-bottom-left-radius: 1rem!important; }
//dropshadow/box-shadow
.ds-0 { box-shadow: none!important; }
.ds-1 { box-shadow: 0 0 50px 10px rgba(0, 0, 0, 0.10); }
.ds-2 { box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.5); }
.ds-2a { box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.5); }
.ds-2b { box-shadow: -10px 10px 5px 0px rgba(0, 0, 0, 0.5); }
.ds-3 { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); }
.ds-4 { box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.5); }
.ds-5 { box-shadow: 0 0 8px rgba(0, 0, 0, 0.23); }
.ds-6 { box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15); }
.ds-7 {
overflow: hidden;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
transition: .25s box-shadow;
&:focus,
&:hover {
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
}
// height/width
.w-33 { width: 33%!important; }
.w-66 { width: 66%!important; }
.w-1 { width: 0.25rem!important; }
.w-2 { width: 0.5rem!important; }
.w-3 { width: 0.75rem!important; }
.w-4 { width: 1rem!important; }
.w-5 { width: 1.25rem!important; }
.w-6 { width: 1.5rem!important; }
.w-7 { width: 1.75rem!important; }
.w-8 { width: 2rem!important; }
.w-9 { width: 2.25rem!important; }
.w-10 { width: 2.5rem!important; }
.w-12 { width: 3rem!important; }
.w-16 { width: 4rem!important; }
.w-24 { width: 6rem!important; }
.w-32 { width: 8rem!important; }
.h-33 { height: 33%!important; }
.h-66 { height: 66%!important; }
.h-1 { height: 0.25rem!important; }
.h-2 { height: 0.5rem!important; }
.h-3 { height: 0.75rem!important; }
.h-4 { height: 1rem!important; }
.h-5 { height: 1.25rem!important; }
.h-6 { height: 1.5rem!important; }
.h-7 { height: 1.75rem!important; }
.h-8 { height: 2rem!important; }
.h-9 { height: 2.25rem!important; }
.h-10 { height: 2.5rem!important; }
.h-12 { height: 3rem!important; }
.h-16 { height: 4rem!important; }
.h-24 { height: 6rem!important; }
.h-32 { height: 8rem!important; }
.mw-50 { max-width: 50%!important; }
.mh-50 { max-height: 50%!important; }
.max { max-width: 100%; width: auto; height: auto; }
.vh5 { height: 5vh; }
.vh10 { height: 10vh; }
.vh15 { height: 15vh; }
.vh20 { height: 20vh; }
.vh25 { height: 25vh; }
.vh30 { height: 30vh; }
.vh35 { height: 35vh; }
.vh40 { height: 40vh; }
.vh45 { height: 45vh; }
.vh50 { height: 50vh; }
.vh55 { height: 55vh; }
.vh60 { height: 60vh; }
.vh65 { height: 65vh; }
.vh70 { height: 70vh; }
.vh75 { height: 75vh; }
.vh80 { height: 80vh; }
.vh85 { height: 85vh; }
.vh90 { height: 90vh; }
.vh95 { height: 95vh; }
.vh100 { height: 100vh; }
// padding (addl to BS since they're missing the quarter size)
.p-3a { padding: 1.25rem!important; }
.pt-3a, .py-3a { padding-top: 1.25rem!important; }
.pr-3a, .px-3a { padding-right: 1.25rem!important; }
.pb-3a, .py-3a { padding-bottom: 1.25rem!important; }
.pl-3a, .px-3a { padding-left: 1.25rem!important; }
// responsive utilities
@media (max-width: 575px) {
.p-xs-0 { padding: 0!important; }
.m-xs-0 { margin: 0!important; }
.p-xs-1 { padding: .25rem!important; }
.m-xs-1 { margin: .25rem!important; }
.p-xs-2 { padding: .5rem!important; }
.m-xs-2 { margin: .5rem!important; }
.p-xs-3 { padding: 1rem!important; }
.m-xs-3 { margin: 1rem!important; }
.p-xs-4 { padding: 1.5rem!important; }
.m-xs-4 { margin: 1.5rem!important; }
.p-xs-5 { padding: 3rem!important; }
.m-xs-6 { margin: 3rem!important; }
.mb-xs-0 { margin-bottom: 0!important; }
.mb-xs-1 { margin-bottom: .25!important; }
.mb-xs-2 { margin-bottom: .5rem!important; }
.mb-xs-3 { margin-bottom: 1rem!important; }
.mb-xs-4 { margin-bottom: 1.5rem!important; }
.mb-xs-5 { margin-bottom: 3rem!important; }
.ml-xs-0 { margin-left: 0!important; }
.ml-xs-1 { margin-left: .25!important; }
.ml-xs-2 { margin-left: .5rem!important; }
.ml-xs-3 { margin-left: 1rem!important; }
.ml-xs-4 { margin-left: 1.5rem!important; }
.ml-xs-5 { margin-left: 3rem!important; }
.mr-xs-0 { margin-right: 0!important; }
.mr-xs-1 { margin-right: .25!important; }
.mr-xs-2 { margin-right: .5rem!important; }
.mr-xs-3 { margin-right: 1rem!important; }
.mr-xs-4 { margin-right: 1.5rem!important; }
.mr-xs-5 { margin-right: 3rem!important; }
.mt-xs-0 { margin-top: 0!important; }
.mt-xs-1 { margin-top: .25!important; }
.mt-xs-2 { margin-top: .5rem!important; }
.mt-xs-3 { margin-top: 1rem!important; }
.mt-xs-4 { margin-top: 1.5rem!important; }
.mt-xs-5 { margin-top: 3rem!important; }
.pb-xs-0 { padding-bottom: 0!important; }
.pb-xs-1 { padding-bottom: .25!important; }
.pb-xs-2 { padding-bottom: .5rem!important; }
.pb-xs-3 { padding-bottom: 1rem!important; }
.pb-xs-4 { padding-bottom: 1.5rem!important; }
.pb-xs-5 { padding-bottom: 3rem!important; }
.pl-xs-0 { padding-left: 0!important; }
.pl-xs-1 { padding-left: .25!important; }
.pl-xs-2 { padding-left: .5rem!important; }
.pl-xs-3 { padding-left: 1rem!important; }
.pl-xs-4 { padding-left: 1.5rem!important; }
.pl-xs-5 { padding-left: 3rem!important; }
.pr-xs-0 { padding-right: 0!important; }
.pr-xs-1 { padding-right: .25!important; }
.pr-xs-2 { padding-right: .5rem!important; }
.pr-xs-3 { padding-right: 1rem!important; }
.pr-xs-4 { padding-right: 1.5rem!important; }
.pr-xs-5 { padding-right: 3rem!important; }
.pt-xs-0 { padding-top: 0!important; }
.pt-xs-1 { padding-top: .25!important; }
.pt-xs-2 { padding-top: .5rem!important; }
.pt-xs-3 { padding-top: 1rem!important; }
.pt-xs-4 { padding-top: 1.5rem!important; }
.pt-xs-5 { padding-top: 3rem!important; }
.display-xs-1 { font-size: 6rem; font-weight: 300; line-height: 1.1; }
.display-xs-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.1; }
.display-xs-3 { font-size: 5rem; font-weight: 300; line-height: 1.1; }
.display-xs-4 { font-size: 4.5rem; font-weight: 300; line-height: 1.1; }
.display-xs-5 { font-size: 2.5rem; font-weight: 300; line-height: 1.1; }
.display-xs-6 { font-size: 1.5rem; font-weight: 300; line-height: 1.1; }
}
@media (min-width: 576px) {
.p-sm-0 { padding: 0!important; }
.m-sm-0 { margin: 0!important; }
.p-sm-1 { padding: .25rem!important; }
.m-sm-1 { margin: .25rem!important; }
.p-sm-2 { padding: .5rem!important; }
.m-sm-2 { margin: .5rem!important; }
.p-sm-3 { padding: 1rem!important; }
.m-sm-3 { margin: 1rem!important; }
.p-sm-4 { padding: 1.5rem!important; }
.m-sm-4 { margin: 1.5rem!important; }
.p-sm-5 { padding: 3rem!important; }
.m-sm-5 { margin: 3rem!important; }
.mb-sm-0 { margin-bottom: 0!important; }
.mb-sm-1 { margin-bottom: .25!important; }
.mb-sm-2 { margin-bottom: .5rem!important; }
.mb-sm-3 { margin-bottom: 1rem!important; }
.mb-sm-4 { margin-bottom: 1.5rem!important; }
.mb-sm-5 { margin-bottom: 3rem!important; }
.ml-sm-0 { margin-left: 0!important; }
.ml-sm-1 { margin-left: .25!important; }
.ml-sm-2 { margin-left: .5rem!important; }
.ml-sm-3 { margin-left: 1rem!important; }
.ml-sm-4 { margin-left: 1.5rem!important; }
.ml-sm-5 { margin-left: 3rem!important; }
.mr-sm-0 { margin-right: 0!important; }
.mr-sm-1 { margin-right: .25!important; }
.mr-sm-2 { margin-right: .5rem!important; }
.mr-sm-3 { margin-right: 1rem!important; }
.mr-sm-4 { margin-right: 1.5rem!important; }
.mr-sm-5 { margin-right: 3rem!important; }
.mt-sm-0 { margin-top: 0!important; }
.mt-sm-1 { margin-top: .25!important; }
.mt-sm-2 { margin-top: .5rem!important; }
.mt-sm-3 { margin-top: 1rem!important; }
.mt-sm-4 { margin-top: 1.5rem!important; }
.mt-sm-5 { margin-top: 3rem!important; }
.pb-sm-0 { padding-bottom: 0!important; }
.pb-sm-1 { padding-bottom: .25!important; }
.pb-sm-2 { padding-bottom: .5rem!important; }
.pb-sm-3 { padding-bottom: 1rem!important; }
.pb-sm-4 { padding-bottom: 1.5rem!important; }
.pb-sm-5 { padding-bottom: 3rem!important; }
.pl-sm-0 { padding-left: 0!important; }
.pl-sm-1 { padding-left: .25!important; }
.pl-sm-2 { padding-left: .5rem!important; }
.pl-sm-3 { padding-left: 1rem!important; }
.pl-sm-4 { padding-left: 1.5rem!important; }
.pl-sm-5 { padding-left: 3rem!important; }
.pr-sm-0 { padding-right: 0!important; }
.pr-sm-1 { padding-right: .25!important; }
.pr-sm-2 { padding-right: .5rem!important; }
.pr-sm-3 { padding-right: 1rem!important; }
.pr-sm-4 { padding-right: 1.5rem!important; }
.pr-sm-5 { padding-right: 3rem!important; }
.pt-sm-0 { padding-top: 0!important; }
.pt-sm-1 { padding-top: .25!important; }
.pt-sm-2 { padding-top: .5rem!important; }
.pt-sm-3 { padding-top: 1rem!important; }
.pt-sm-4 { padding-top: 1.5rem!important; }
.pt-sm-5 { padding-top: 3rem!important; }
.display-sm-1 { font-size: 6rem; font-weight: 300; line-height: 1.1; }
.display-sm-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.1; }
.display-sm-3 { font-size: 5rem; font-weight: 300; line-height: 1.1; }
.display-sm-4 { font-size: 4.5rem; font-weight: 300; line-height: 1.1; }
.display-sm-5 { font-size: 2.5rem; font-weight: 300; line-height: 1.1; }
.display-sm-6 { font-size: 1.5rem; font-weight: 300; line-height: 1.1; }
}
@media (min-width: 768px) {
.p-md-0 { padding: 0!important; }
.m-md-0 { margin: 0!important; }
.p-md-1 { padding: .25rem!important; }
.m-md-1 { margin: .25rem!important; }
.p-md-2 { padding: .5rem!important; }
.m-md-2 { margin: .5rem!important; }
.p-md-3 { padding: 1rem!important; }
.m-md-3 { margin: 1rem!important; }
.p-md-4 { padding: 1.5rem!important; }
.m-md-4 { margin: 1.5rem!important; }
.p-md-5 { padding: 3rem!important; }
.m-md-6 { margin: 3rem!important; }
.mb-md-0 { margin-bottom: 0!important; }
.mb-md-1 { margin-bottom: .25!important; }
.mb-md-2 { margin-bottom: .5rem!important; }
.mb-md-3 { margin-bottom: 1rem!important; }
.mb-md-4 { margin-bottom: 1.5rem!important; }
.mb-md-5 { margin-bottom: 3rem!important; }
.ml-md-0 { margin-left: 0!important; }
.ml-md-1 { margin-left: .25!important; }
.ml-md-2 { margin-left: .5rem!important; }
.ml-md-3 { margin-left: 1rem!important; }
.ml-md-4 { margin-left: 1.5rem!important; }
.ml-md-5 { margin-left: 3rem!important; }
.mr-md-0 { margin-right: 0!important; }
.mr-md-1 { margin-right: .25!important; }
.mr-md-2 { margin-right: .5rem!important; }
.mr-md-3 { margin-right: 1rem!important; }
.mr-md-4 { margin-right: 1.5rem!important; }
.mr-md-5 { margin-right: 3rem!important; }
.mt-md-0 { margin-top: 0!important; }
.mt-md-1 { margin-top: .25!important; }
.mt-md-2 { margin-top: .5rem!important; }
.mt-md-3 { margin-top: 1rem!important; }
.mt-md-4 { margin-top: 1.5rem!important; }
.mt-md-5 { margin-top: 3rem!important; }
.pb-md-0 { padding-bottom: 0!important; }
.pb-md-1 { padding-bottom: .25!important; }
.pb-md-2 { padding-bottom: .5rem!important; }
.pb-md-3 { padding-bottom: 1rem!important; }
.pb-md-4 { padding-bottom: 1.5rem!important; }
.pb-md-5 { padding-bottom: 3rem!important; }
.pl-md-0 { padding-left: 0!important; }
.pl-md-1 { padding-left: .25!important; }
.pl-md-2 { padding-left: .5rem!important; }
.pl-md-3 { padding-left: 1rem!important; }
.pl-md-4 { padding-left: 1.5rem!important; }
.pl-md-5 { padding-left: 3rem!important; }
.pr-md-0 { padding-right: 0!important; }
.pr-md-1 { padding-right: .25!important; }
.pr-md-2 { padding-right: .5rem!important; }
.pr-md-3 { padding-right: 1rem!important; }
.pr-md-4 { padding-right: 1.5rem!important; }
.pr-md-5 { padding-right: 3rem!important; }
.pt-md-0 { padding-top: 0!important; }
.pt-md-1 { padding-top: .25!important; }
.pt-md-2 { padding-top: .5rem!important; }
.pt-md-3 { padding-top: 1rem!important; }
.pt-md-4 { padding-top: 1.5rem!important; }
.pt-md-5 { padding-top: 3rem!important; }
.display-md-1 { font-size: 6rem; font-weight: 300; line-height: 1.1; }
.display-md-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.1; }
.display-md-3 { font-size: 5rem; font-weight: 300; line-height: 1.1; }
.display-md-4 { font-size: 4.5rem; font-weight: 300; line-height: 1.1; }
.display-md-5 { font-size: 2.5rem; font-weight: 300; line-height: 1.1; }
.display-md-6 { font-size: 1.5rem; font-weight: 300; line-height: 1.1; }
}
@media (min-width: 992px) {
.p-lg-0 { padding: 0!important; }
.m-lg-0 { margin: 0!important; }
.p-lg-1 { padding: .25rem!important; }
.m-lg-1 { margin: .25rem!important; }
.p-lg-2 { padding: .5rem!important; }
.m-lg-2 { margin: .5rem!important; }
.p-lg-3 { padding: 1rem!important; }
.m-lg-3 { margin: 1rem!important; }
.p-lg-4 { padding: 1.5rem!important; }
.m-lg-4 { margin: 1.5rem!important; }
.p-lg-5 { padding: 3rem!important; }
.m-lg-6 { margin: 3rem!important; }
.mb-lg-0 { margin-bottom: 0!important; }
.mb-lg-1 { margin-bottom: .25!important; }
.mb-lg-2 { margin-bottom: .5rem!important; }
.mb-lg-3 { margin-bottom: 1rem!important; }
.mb-lg-4 { margin-bottom: 1.5rem!important; }
.mb-lg-5 { margin-bottom: 3rem!important; }
.ml-lg-0 { margin-left: 0!important; }
.ml-lg-1 { margin-left: .25!important; }
.ml-lg-2 { margin-left: .5rem!important; }
.ml-lg-3 { margin-left: 1rem!important; }
.ml-lg-4 { margin-left: 1.5rem!important; }
.ml-lg-5 { margin-left: 3rem!important; }
.mr-lg-0 { margin-right: 0!important; }
.mr-lg-1 { margin-right: .25!important; }
.mr-lg-2 { margin-right: .5rem!important; }
.mr-lg-3 { margin-right: 1rem!important; }
.mr-lg-4 { margin-right: 1.5rem!important; }
.mr-lg-5 { margin-right: 3rem!important; }
.mt-lg-0 { margin-top: 0!important; }
.mt-lg-1 { margin-top: .25!important; }
.mt-lg-2 { margin-top: .5rem!important; }
.mt-lg-3 { margin-top: 1rem!important; }
.mt-lg-4 { margin-top: 1.5rem!important; }
.mt-lg-5 { margin-top: 3rem!important; }
.pb-lg-0 { padding-bottom: 0!important; }
.pb-lg-1 { padding-bottom: .25!important; }
.pb-lg-2 { padding-bottom: .5rem!important; }
.pb-lg-3 { padding-bottom: 1rem!important; }
.pb-lg-4 { padding-bottom: 1.5rem!important; }
.pb-lg-5 { padding-bottom: 3rem!important; }
.pl-lg-0 { padding-left: 0!important; }
.pl-lg-1 { padding-left: .25!important; }
.pl-lg-2 { padding-left: .5rem!important; }
.pl-lg-3 { padding-left: 1rem!important; }
.pl-lg-4 { padding-left: 1.5rem!important; }
.pl-lg-5 { padding-left: 3rem!important; }
.pr-lg-0 { padding-right: 0!important; }
.pr-lg-1 { padding-right: .25!important; }
.pr-lg-2 { padding-right: .5rem!important; }
.pr-lg-3 { padding-right: 1rem!important; }
.pr-lg-4 { padding-right: 1.5rem!important; }
.pr-lg-5 { padding-right: 3rem!important; }
.pt-lg-0 { padding-top: 0!important; }
.pt-lg-1 { padding-top: .25!important; }
.pt-lg-2 { padding-top: .5rem!important; }
.pt-lg-3 { padding-top: 1rem!important; }
.pt-lg-4 { padding-top: 1.5rem!important; }
.pt-lg-5 { padding-top: 3rem!important; }
.display-lg-1 { font-size: 6rem; font-weight: 300; line-height: 1.1; }
.display-lg-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.1; }
.display-lg-3 { font-size: 5rem; font-weight: 300; line-height: 1.1; }
.display-lg-4 { font-size: 4.5rem; font-weight: 300; line-height: 1.1; }
.display-lg-5 { font-size: 2.5rem; font-weight: 300; line-height: 1.1; }
.display-lg-6 { font-size: 1.5rem; font-weight: 300; line-height: 1.1; }
}
@media (min-width: 1200px) {
.p-xl-0 { padding: 0!important; }
.m-xl-0 { margin: 0!important; }
.p-xl-1 { padding: .25rem!important; }
.m-xl-1 { margin: .25rem!important; }
.p-xl-2 { padding: .5rem!important; }
.m-xl-2 { margin: .5rem!important; }
.p-xl-3 { padding: 1rem!important; }
.m-xl-3 { margin: 1rem!important; }
.p-xl-4 { padding: 1.5rem!important; }
.m-xl-4 { margin: 1.5rem!important; }
.p-xl-5 { padding: 3rem!important; }
.m-xl-6 { margin: 3rem!important; }
.mb-xl-0 { margin-bottom: 0!important; }
.mb-xl-1 { margin-bottom: .25!important; }
.mb-xl-2 { margin-bottom: .5rem!important; }
.mb-xl-3 { margin-bottom: 1rem!important; }
.mb-xl-4 { margin-bottom: 1.5rem!important; }
.mb-xl-5 { margin-bottom: 3rem!important; }
.ml-xl-0 { margin-left: 0!important; }
.ml-xl-1 { margin-left: .25!important; }
.ml-xl-2 { margin-left: .5rem!important; }
.ml-xl-3 { margin-left: 1rem!important; }
.ml-xl-4 { margin-left: 1.5rem!important; }
.ml-xl-5 { margin-left: 3rem!important; }
.mr-xl-0 { margin-right: 0!important; }
.mr-xl-1 { margin-right: .25!important; }
.mr-xl-2 { margin-right: .5rem!important; }
.mr-xl-3 { margin-right: 1rem!important; }
.mr-xl-4 { margin-right: 1.5rem!important; }
.mr-xl-5 { margin-right: 3rem!important; }
.mt-xl-0 { margin-top: 0!important; }
.mt-xl-1 { margin-top: .25!important; }
.mt-xl-2 { margin-top: .5rem!important; }
.mt-xl-3 { margin-top: 1rem!important; }
.mt-xl-4 { margin-top: 1.5rem!important; }
.mt-xl-5 { margin-top: 3rem!important; }
.pb-xl-0 { padding-bottom: 0!important; }
.pb-xl-1 { padding-bottom: .25!important; }
.pb-xl-2 { padding-bottom: .5rem!important; }
.pb-xl-3 { padding-bottom: 1rem!important; }
.pb-xl-4 { padding-bottom: 1.5rem!important; }
.pb-xl-5 { padding-bottom: 3rem!important; }
.pl-xl-0 { padding-left: 0!important; }
.pl-xl-1 { padding-left: .25!important; }
.pl-xl-2 { padding-left: .5rem!important; }
.pl-xl-3 { padding-left: 1rem!important; }
.pl-xl-4 { padding-left: 1.5rem!important; }
.pl-xl-5 { padding-left: 3rem!important; }
.pr-xl-0 { padding-right: 0!important; }
.pr-xl-1 { padding-right: .25!important; }
.pr-xl-2 { padding-right: .5rem!important; }
.pr-xl-3 { padding-right: 1rem!important; }
.pr-xl-4 { padding-right: 1.5rem!important; }
.pr-xl-5 { padding-right: 3rem!important; }
.pt-xl-0 { padding-top: 0!important; }
.pt-xl-1 { padding-top: .25!important; }
.pt-xl-2 { padding-top: .5rem!important; }
.pt-xl-3 { padding-top: 1rem!important; }
.pt-xl-4 { padding-top: 1.5rem!important; }
.pt-xl-5 { padding-top: 3rem!important; }
.display-xl-1 { font-size: 6rem; font-weight: 300; line-height: 1.1; }
.display-xl-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.1; }
.display-xl-3 { font-size: 5rem; font-weight: 300; line-height: 1.1; }
.display-xl-4 { font-size: 4.5rem; font-weight: 300; line-height: 1.1; }
.display-xl-5 { font-size: 2.5rem; font-weight: 300; line-height: 1.1; }
.display-xl-6 { font-size: 1.5rem; font-weight: 300; line-height: 1.1; }
}
// animations?
// flex order - Internet Explorer 10 and earlier versions do not support the order property. https://css-tricks.com/using-flexbox/
.or-1 { order: 1; }
.or-2 { order: 2; }
.or-3 { order: 3; }
.or-4 { order: 4; }
.or-5 { order: 5; }
.or-6 { order: 6; }
.or-7 { order: 7; }
.or-8 { order: 8; }
.or-9 { order: 9; }
.or-10 { order: 10; }
.or-11 { order: 11; }
.or-12 { order: 12; }
// opacity
.op-100 { opacity: 1; }
.op-90 { opacity: .9; }
.op-80 { opacity: .8; }
.op-75 { opacity: .75; }
.op-50 { opacity: .5; }
.op-25 { opacity: .25; }
.op-0 { opacity: 0; }
// theme colors as primary (blue is default, so not necessary)
.theme-purple {
.bg-primary { background-color: $purple-primary!important; }
.bg-secondary { background-color: $purple-secondary!important; }
.bg-tertiary { background-color: $purple-tertiary!important; }
.b-primary { border-color: $purple-primary!important; }
.b-secondary { border-color: $purple-secondary!important; }
.b-tertiary { border-color: $purple-tertiary!important; }
}
.theme-brown {
.bg-primary { background-color: $brown-primary!important; }
.bg-secondary { background-color: $brown-secondary!important; }
.bg-tertiary { background-color: $brown-tertiary!important; }
.b-primary { border-color: $brown-primary!important; }
.b-secondary { border-color: $brown-secondary!important; }
.b-tertiary { border-color: $brown-tertiary!important; }
}
.theme-teal {
.bg-primary { background-color: $teal-primary!important; }
.bg-secondary { background-color: $teal-secondary!important; }
.bg-tertiary { background-color: $teal-tertiary!important; }
.b-primary { border-color: $teal-primary!important; }
.b-secondary { border-color: $teal-secondary!important; }
.b-tertiary { border-color: $teal-tertiary!important; }
}
.theme-pink {
.bg-primary { background-color: $pink-primary!important; }
.bg-secondary { background-color: $pink-secondary!important; }
.bg-tertiary { background-color: $pink-tertiary!important; }
.b-primary { border-color: $pink-primary!important; }
.b-secondary { border-color: $pink-secondary!important; }
.b-tertiary { border-color: $pink-tertiary!important; }
}
.theme-orange {
.bg-primary { background-color: $orange-primary!important; }
.bg-secondary { background-color: $orange-secondary!important; }
.bg-tertiary { background-color: $orange-tertiary!important; }
.b-primary { border-color: $orange-primary!important; }
.b-secondary { border-color: $orange-secondary!important; }
.b-tertiary { border-color: $orange-tertiary!important; }
}
.theme-slate {
.bg-primary { background-color: $slate-primary!important; }
.bg-secondary { background-color: $slate-secondary!important; }
.bg-tertiary { background-color: $slate-tertiary!important; }
.b-primary { border-color: $slate-primary!important; }
.b-secondary { border-color: $slate-secondary!important; }
.b-tertiary { border-color: $slate-tertiary!important; }
}
.theme-indigo {
.bg-primary { background-color: $indigo-primary!important; }
.bg-secondary { background-color: $indigo-secondary!important; }
.bg-tertiary { background-color: $indigo-tertiary!important; }
.b-primary { border-color: $indigo-primary!important; }
.b-secondary { border-color: $indigo-secondary!important; }
.b-tertiary { border-color: $indigo-tertiary!important; }
}
.theme-cyan {
.bg-primary { background-color: $cyan-primary!important; }
.bg-secondary { background-color: $cyan-secondary!important; }
.bg-tertiary { background-color: $cyan-tertiary!important; }
.b-primary { border-color: $cyan-primary!important; }
.b-secondary { border-color: $cyan-secondary!important; }
.b-tertiary { border-color: $cyan-tertiary!important; }
}
.theme-green {
.bg-primary { background-color: $green-primary!important; }
.bg-secondary { background-color: $green-secondary!important; }
.bg-tertiary { background-color: $green-tertiary!important; }
.b-primary { border-color: $green-primary!important; }
.b-secondary { border-color: $green-secondary!important; }
.b-tertiary { border-color: $green-tertiary!important; }
}
.theme-amber {
.bg-primary { background-color: $amber-primary!important; }
.bg-secondary { background-color: $amber-secondary!important; }
.bg-tertiary { background-color: $amber-tertiary!important; }
.b-primary { border-color: $amber-primary!important; }
.b-secondary { border-color: $amber-secondary!important; }
.b-tertiary { border-color: $amber-tertiary!important; }
}
// flex align
.fa-start { align-content: flex-start!important; }
.fa-end { align-content: flex-end!important; }
.fa-center { align-content: center!important; }
.fa-between { align-content: space-between!important; }
.fa-around { align-content: space-around!important; }
.fa-stretch { align-content: stretch!important; }
// flex justify - check bootstrap 4
.fj-start { justify-content: flex-start!important; }
.fj-end { justify-content: flex-end!important; }
.fj-center { justify-content: center!important; }
.fj-between { justify-content: space-between!important; }
.fj-around { justify-content: space-around!important; }
.fj-stretch { justify-content: space-evenly!important; }
// flex direction
.fd-row { flex-direction: row!important; }
.fd-row-reverse { flex-direction: row-reverse!important; }
.fd-col { flex-direction: column!important; }
.fd-col-reverse { flex-direction: column-reverse!important; }
.blockquote, blockquote {
margin-bottom: 1rem;
font-size: 1.25rem;
&.with-quote {
p:before, p:after {
content: '\201C';
}
}
}
// text decoration
.td-none { text-decoration: none!important; }
.td-ul { text-decoration: underline!important; }
.td-lt { text-decoration: line-through!important; }
.td-none-hover {
&:hover {
text-decoration: none!important;
}
}
.td-ul-hover {
&:hover {
text-decoration: underline!important;
}
}
// .watermark {
// color: lightgrey;
// font-size: 7.5rem;
// transform: rotate(310deg);
// opacity: 0.2;
// position: fixed;
// top: 50%;
// left: 40%;
// margin-right: -40%;
// }
// // Draft Watermark
// .cdc-watermark {
// color: #e5e5e5;
// font-size: 300px;
// -webkit-transform: rotate(-45deg);
// -moz-transform: rotate(-45deg);
// -o-transform: rotate(-45deg);
// -ms-transform: rotate(-45deg);
// transform: rotate(-45deg);
// position: absolute;
// width: 100%;
// height: 100%;
// margin: 0;
// z-index: -1;
// left: 700px;
// top: 100px
// }
// .cdc-watermark.draft:after {
// content: 'DRAFT';
// }
// .cdc-watermark.archive:after {
// content: 'ARCHIVE';
// }
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment