mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Normalize spacing (to 2 spaces).
This commit is contained in:
Jonathan Reinink
parent
421c1b0d7d
commit
aaa5d8ae4c
@ -8,16 +8,16 @@
|
||||
@viewport { width: device-width; }
|
||||
|
||||
html {
|
||||
font-size: 12px;
|
||||
font-size: 12px;
|
||||
|
||||
// Changes the default tap highlight to be completely transparent in iOS.
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
// Changes the default tap highlight to be completely transparent in iOS.
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
|
||||
// -webkit-font-smoothing: antialiased;
|
||||
// -webkit-font-smoothing: antialiased;
|
||||
|
||||
@media (min-width: @screen-xs) {
|
||||
font-size: 16px;
|
||||
}
|
||||
@media (min-width: @screen-xs) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
@ -30,7 +30,7 @@ body {
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
button, [role=button] {
|
||||
@ -38,13 +38,13 @@ button, [role=button] {
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: @font-size-sm;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: @font-family-mono;
|
||||
font-family: @font-family-mono;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -69,16 +69,16 @@
|
||||
|
||||
|
||||
// Text
|
||||
@text-light: @color-white;
|
||||
@text-light-soft: fade(@color-white, 60%);
|
||||
@text-light: @color-white;
|
||||
@text-light-soft: fade(@color-white, 60%);
|
||||
@text-light-softer: fade(@color-white, 45%);
|
||||
@text-light-softest: fade(@color-white, 35%);
|
||||
@text-light-softest: fade(@color-white, 35%);
|
||||
|
||||
@text-dark-hue: @hue-slate;
|
||||
@text-dark: hsl(@text-dark-hue, 10%, 25%);
|
||||
@text-dark-soft: hsl(@text-dark-hue, 10%, 50%);
|
||||
@text-dark-softer: hsl(@text-dark-hue, 10%, 65%);
|
||||
@text-dark-softest: hsl(@text-dark-hue, 10%, 75%);
|
||||
@text-dark-hue: @hue-slate;
|
||||
@text-dark: hsl(@text-dark-hue, 10%, 25%);
|
||||
@text-dark-soft: hsl(@text-dark-hue, 10%, 50%);
|
||||
@text-dark-softer: hsl(@text-dark-hue, 10%, 65%);
|
||||
@text-dark-softest: hsl(@text-dark-hue, 10%, 75%);
|
||||
|
||||
@text-brand: hsl(@hue-brand-primary, 100%, 40%);
|
||||
@text-danger: @color-danger;
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
@alert-border-radius: @border-radius-1;
|
||||
|
||||
.alert {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
padding: @spacer-2 @spacer-4;
|
||||
border-radius: @border-radius-1;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
padding: @spacer-2 @spacer-4;
|
||||
border-radius: @border-radius-1;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: #e0fffa;
|
||||
border-color: #7be0d0;
|
||||
color: #00ab90;
|
||||
background-color: #e0fffa;
|
||||
border-color: #7be0d0;
|
||||
color: #00ab90;
|
||||
}
|
||||
|
||||
@ -1,265 +1,265 @@
|
||||
@button-border-radius: @border-radius-1;
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.5em 1em;
|
||||
font-weight: @font-weight-bold;
|
||||
line-height: 1.25;
|
||||
border-radius: @button-border-radius;
|
||||
display: inline-block;
|
||||
padding: 0.5em 1em;
|
||||
font-weight: @font-weight-bold;
|
||||
line-height: 1.25;
|
||||
border-radius: @button-border-radius;
|
||||
text-decoration: none;
|
||||
font-family: @font-family-base;
|
||||
|
||||
&:focus, &:hover {
|
||||
text-decoration: none;
|
||||
font-family: @font-family-base;
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:active, &:focus {
|
||||
.tab-focus;
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
.tab-focus;
|
||||
}
|
||||
|
||||
&:disabled, &.is-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.2;
|
||||
}
|
||||
&:disabled, &.is-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-loading {
|
||||
position: relative;
|
||||
position: relative;
|
||||
color: transparent !important;
|
||||
|
||||
* {
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
* {
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute !important;
|
||||
display: block;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -0.5rem;
|
||||
margin-top: -0.5rem;
|
||||
border: 2px solid @text-dark;
|
||||
border-radius: 0.5rem;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
animation: spin-around 500ms infinite linear;
|
||||
content: "";
|
||||
}
|
||||
&:after {
|
||||
position: absolute !important;
|
||||
display: block;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -0.5rem;
|
||||
margin-top: -0.5rem;
|
||||
border: 2px solid @text-dark;
|
||||
border-radius: 0.5rem;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
animation: spin-around 500ms infinite linear;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.button-outline-variant(@color) {
|
||||
@inactive-border: lighten(@color, 0%);
|
||||
@inactive-border: lighten(@color, 0%);
|
||||
|
||||
color: @color;
|
||||
background-color: transparent;
|
||||
border: 1px solid @inactive-border;
|
||||
font-weight: @font-weight-regular;
|
||||
|
||||
&:active, &:hover, &.is-active {
|
||||
color: @color;
|
||||
background-color: transparent;
|
||||
border: 1px solid @inactive-border;
|
||||
font-weight: @font-weight-regular;
|
||||
background-color: fade(@color, 10%);
|
||||
border-color: @color;
|
||||
}
|
||||
|
||||
&:active, &:hover, &.is-active {
|
||||
color: @color;
|
||||
background-color: fade(@color, 10%);
|
||||
border-color: @color;
|
||||
}
|
||||
&:focus {
|
||||
color: @color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: @color;
|
||||
}
|
||||
|
||||
&:disabled, &.is-disabled {
|
||||
&:active, &:hover {
|
||||
border-color: @inactive-border;
|
||||
}
|
||||
&:disabled, &.is-disabled {
|
||||
&:active, &:hover {
|
||||
border-color: @inactive-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-variant(@text; @background) {
|
||||
@border-color: @background;
|
||||
@border-color: @background;
|
||||
|
||||
color: @text;
|
||||
font-weight: 700;
|
||||
background-color: @background;
|
||||
border: 1px solid @border-color;
|
||||
|
||||
&:focus {
|
||||
color: @text;
|
||||
}
|
||||
|
||||
&:not(.btn-themed) {
|
||||
&:active, &:hover, &.is-active {
|
||||
color: lighten(@text, 5%);
|
||||
|
||||
background-color: darken(@background, 5%);
|
||||
border: 1px solid darken(@border-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled, &.is-disabled {
|
||||
color: @text;
|
||||
font-weight: 700;
|
||||
background-color: @background;
|
||||
border: 1px solid @border-color;
|
||||
border-color: @border-color;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: @text;
|
||||
&.btn-loading {
|
||||
&:after {
|
||||
border-left-color: fade(@text, 70%);
|
||||
border-bottom-color: fade(@text, 70%);
|
||||
}
|
||||
|
||||
&:not(.btn-themed) {
|
||||
&:active, &:hover, &.is-active {
|
||||
color: lighten(@text, 5%);
|
||||
|
||||
background-color: darken(@background, 5%);
|
||||
border: 1px solid darken(@border-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled, &.is-disabled {
|
||||
color: @text;
|
||||
background-color: @background;
|
||||
border-color: @border-color;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.btn-loading {
|
||||
&:after {
|
||||
border-left-color: fade(@text, 70%);
|
||||
border-bottom-color: fade(@text, 70%);
|
||||
}
|
||||
&:disabled {
|
||||
color: @text;
|
||||
background-color: @background;
|
||||
border-color: @border-color;
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:disabled {
|
||||
color: @text;
|
||||
background-color: @background;
|
||||
border-color: @border-color;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-bordered-variant(@text; @background; @border-color) {
|
||||
color: @text;
|
||||
font-weight: @font-weight-medium;
|
||||
background-color: @background;
|
||||
border: 1px solid @border-color;
|
||||
|
||||
&:focus {
|
||||
color: @text;
|
||||
}
|
||||
|
||||
&:active, &:hover, &.is-active {
|
||||
color: darken(@text, 5%);
|
||||
background-color: darken(@background, 5%);
|
||||
border: 1px solid darken(@border-color, 5%);
|
||||
}
|
||||
|
||||
&:disabled, &.is-disabled {
|
||||
color: @text;
|
||||
font-weight: @font-weight-medium;
|
||||
background-color: @background;
|
||||
border: 1px solid @border-color;
|
||||
border-color: @border-color;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: @text;
|
||||
&.btn-loading {
|
||||
&:after {
|
||||
border-left-color: fade(@text, 70%);
|
||||
border-bottom-color: fade(@text, 70%);
|
||||
}
|
||||
|
||||
&:active, &:hover, &.is-active {
|
||||
color: darken(@text, 5%);
|
||||
background-color: darken(@background, 5%);
|
||||
border: 1px solid darken(@border-color, 5%);
|
||||
}
|
||||
|
||||
&:disabled, &.is-disabled {
|
||||
color: @text;
|
||||
background-color: @background;
|
||||
border-color: @border-color;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.btn-loading {
|
||||
&:after {
|
||||
border-left-color: fade(@text, 70%);
|
||||
border-bottom-color: fade(@text, 70%);
|
||||
}
|
||||
&:disabled {
|
||||
color: @text;
|
||||
background-color: @background;
|
||||
border-color: @border-color;
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:disabled {
|
||||
color: @text;
|
||||
background-color: @background;
|
||||
border-color: @border-color;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
.btn-variant(@btn-primary-text-color; @btn-primary-bg-color);
|
||||
.btn-variant(@btn-primary-text-color; @btn-primary-bg-color);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
.btn-bordered-variant(@btn-secondary-text-color; @btn-secondary-bg-color; @btn-secondary-border-color);
|
||||
.btn-bordered-variant(@btn-secondary-text-color; @btn-secondary-bg-color; @btn-secondary-border-color);
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
.btn-variant(@color-white; @color-blue);
|
||||
.btn-variant(@color-white; @color-blue);
|
||||
}
|
||||
|
||||
.btn-inv-outline {
|
||||
.button-outline-variant(@btn-inv-outline-text-color);
|
||||
.button-outline-variant(@btn-inv-outline-text-color);
|
||||
}
|
||||
|
||||
.btn-twitter {
|
||||
.btn-variant(@color-white; #26a0f0);
|
||||
font-family: "Helvetica Neue", Arial, sans-serif;
|
||||
font-weight: 500;
|
||||
.btn-variant(@color-white; #26a0f0);
|
||||
font-family: "Helvetica Neue", Arial, sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-facebook {
|
||||
.btn-variant(@color-white; #334F8D);
|
||||
font-family: "Helvetica Neue", Arial, sans-serif;
|
||||
font-weight: 500;
|
||||
.btn-variant(@color-white; #334F8D);
|
||||
font-family: "Helvetica Neue", Arial, sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
font-weight: @font-weight-regular;
|
||||
color: @text-dark;
|
||||
background-color: transparent;
|
||||
font-weight: @font-weight-regular;
|
||||
color: @text-dark;
|
||||
background-color: transparent;
|
||||
|
||||
&:focus, &:hover {
|
||||
color: darken(@text-dark, 15%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:focus, &:hover {
|
||||
color: darken(@text-dark, 15%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
font-size: @font-size-sm;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
font-size: @font-size-lg;
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
|
||||
@media (min-width: (@screen-sm)) {
|
||||
.sm:btn-lg {
|
||||
.btn-lg;
|
||||
.btn-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
font-size: @font-size-xs;
|
||||
font-size: @font-size-xs;
|
||||
}
|
||||
|
||||
.btn-wide {
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
.btn-pad {
|
||||
padding: 1em 2em;
|
||||
padding: 1em 2em;
|
||||
}
|
||||
|
||||
.btn-themed {
|
||||
color: @btn-themed-text-color;
|
||||
border: 1px solid;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
font-weight: 700;
|
||||
|
||||
&:active, &:hover, &:focus {
|
||||
color: @btn-themed-text-color;
|
||||
border: 1px solid;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&:active, &:hover, &:focus {
|
||||
color: @btn-themed-text-color;
|
||||
&:disabled {
|
||||
color: @btn-themed-text-color;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.btn-loading {
|
||||
&:after {
|
||||
border-left-color: fade(@btn-themed-text-color, 70%);
|
||||
border-bottom-color: fade(@btn-themed-text-color, 70%);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: @btn-themed-text-color;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.btn-loading {
|
||||
&:after {
|
||||
border-left-color: fade(@btn-themed-text-color, 70%);
|
||||
border-bottom-color: fade(@btn-themed-text-color, 70%);
|
||||
}
|
||||
&:disabled {
|
||||
color: @btn-themed-text-color;
|
||||
opacity: 0.5;
|
||||
}
|
||||
color: @btn-themed-text-color;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-float {
|
||||
-webkit-font-smoothing: subpixel-antialiased; // Prevent text rendering jank on Safari
|
||||
transition: transform .4s, box-shadow .4s;
|
||||
&:hover {
|
||||
box-shadow: 0 6px 16px -4px rgba(0,0,0,0.25);
|
||||
transform: translateY(-1 * @spacer-1);
|
||||
}
|
||||
-webkit-font-smoothing: subpixel-antialiased; // Prevent text rendering jank on Safari
|
||||
transition: transform .4s, box-shadow .4s;
|
||||
&:hover {
|
||||
box-shadow: 0 6px 16px -4px rgba(0,0,0,0.25);
|
||||
transform: translateY(-1 * @spacer-1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
@card-border-radius: @border-radius-1;
|
||||
|
||||
.card {
|
||||
background: @color-white;
|
||||
overflow: hidden; // Prevent things breaking out of border radius
|
||||
background: @color-white;
|
||||
overflow: hidden; // Prevent things breaking out of border radius
|
||||
}
|
||||
|
||||
.card-section {
|
||||
padding: @spacer-5 @spacer-6;
|
||||
padding: @spacer-5 @spacer-6;
|
||||
}
|
||||
|
||||
@ -1,40 +1,40 @@
|
||||
.dropdown-menu {
|
||||
.absolute;
|
||||
.pin-r;
|
||||
.mt(px);
|
||||
.bg-light;
|
||||
.rounded;
|
||||
.z50;
|
||||
.mask;
|
||||
.box-shadow;
|
||||
.absolute;
|
||||
.pin-r;
|
||||
.mt(px);
|
||||
.bg-light;
|
||||
.rounded;
|
||||
.z50;
|
||||
.mask;
|
||||
.box-shadow;
|
||||
|
||||
left: auto;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
.px(4);
|
||||
.py(2);
|
||||
.pull-t(px);
|
||||
.border;
|
||||
.border-dark;
|
||||
.no-select;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
.rounded-t;
|
||||
}
|
||||
&:last-child {
|
||||
.rounded-b;
|
||||
}
|
||||
&:not(.is-disabled):hover {
|
||||
.clickable;
|
||||
.relative;
|
||||
.bg-highlight;
|
||||
.border-invisible;
|
||||
* {
|
||||
.text-light;
|
||||
}
|
||||
}
|
||||
&.is-disabled {
|
||||
cursor: not-allowed;
|
||||
.px(4);
|
||||
.py(2);
|
||||
.pull-t(px);
|
||||
.border;
|
||||
.border-dark;
|
||||
.no-select;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
.rounded-t;
|
||||
}
|
||||
&:last-child {
|
||||
.rounded-b;
|
||||
}
|
||||
&:not(.is-disabled):hover {
|
||||
.clickable;
|
||||
.relative;
|
||||
.bg-highlight;
|
||||
.border-invisible;
|
||||
* {
|
||||
.text-light;
|
||||
}
|
||||
}
|
||||
&.is-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,215 +2,214 @@
|
||||
@form-control-border: @border-default-color;
|
||||
|
||||
.form-group {
|
||||
|
||||
}
|
||||
|
||||
.form-label {
|
||||
.block;
|
||||
.text-sm;
|
||||
.text-regular;
|
||||
.mb(2);
|
||||
.block;
|
||||
.text-sm;
|
||||
.text-regular;
|
||||
.mb(2);
|
||||
}
|
||||
|
||||
.form-control-file {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
.btn;
|
||||
.btn-xs;
|
||||
.btn-secondary;
|
||||
cursor: pointer;
|
||||
}
|
||||
&::-webkit-file-upload-button {
|
||||
.btn;
|
||||
.btn-xs;
|
||||
.btn-secondary;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
.py(2);
|
||||
.px(3);
|
||||
.py(2);
|
||||
.px(3);
|
||||
.bg-light;
|
||||
.border;
|
||||
.rounded;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 1.25;
|
||||
font-family: @font-family-base;
|
||||
|
||||
&:focus {
|
||||
.tab-focus;
|
||||
}
|
||||
|
||||
&.has-error {
|
||||
border-color: @form-input-border-error-color;
|
||||
}
|
||||
|
||||
select& {
|
||||
.pr(5);
|
||||
.bg-light;
|
||||
.border;
|
||||
.rounded;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAANCAYAAABlyXS1AAAABGdBTUEAALGPC/xhBQAAALJJREFUGBm9UCEOwkAQ3L3Cf2pwpKkhoQkej0GRUE/bpSdwbR3BYXlAwwOQmP4Eh7xlh4BFsuJmZzK7N3dMnxJp4xD05ByvRfIBssMh0i1CoJsqP4Hg0KOybDcmnIn44H2+SpJsrKrHNJ0/MDljpr332xpuIDh08H8XF0XTM/O9rnP5Xm4vEEs8sbSuV6VdVTVISEBw6AzBnJk5L7ZhMIwNl7bp+v4hNFHkpuYbAcEx9LNeG4xMYRDZ28cAAAAASUVORK5CYII=);
|
||||
background-position: right 8px center;
|
||||
background-repeat: no-repeat;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 1.25;
|
||||
font-family: @font-family-base;
|
||||
[type="date"]& {
|
||||
// Get the date picker to be the same height as a regular form control
|
||||
&::-webkit-datetime-edit-fields-wrapper { padding: 0; }
|
||||
&::-webkit-inner-spin-button { height: 1.25em; }
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.tab-focus;
|
||||
[type="number"]& {
|
||||
// Hide the up/down spinner in Webkit
|
||||
&::-webkit-inner-spin-button { -webkit-appearance: none; }
|
||||
|
||||
// ...and Firefox
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: @form-input-placeholder-color;
|
||||
}
|
||||
|
||||
[type="color"]& {
|
||||
position: relative;
|
||||
|
||||
// Increased padding values simulate height of regular text content
|
||||
padding-top: 1.125rem;
|
||||
padding-bottom: 1.125rem;
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
.absolute;
|
||||
.pin;
|
||||
.py(2);
|
||||
.px(3);
|
||||
}
|
||||
|
||||
&.has-error {
|
||||
border-color: @form-input-border-error-color;
|
||||
}
|
||||
|
||||
select& {
|
||||
.pr(5);
|
||||
.bg-light;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAANCAYAAABlyXS1AAAABGdBTUEAALGPC/xhBQAAALJJREFUGBm9UCEOwkAQ3L3Cf2pwpKkhoQkej0GRUE/bpSdwbR3BYXlAwwOQmP4Eh7xlh4BFsuJmZzK7N3dMnxJp4xD05ByvRfIBssMh0i1CoJsqP4Hg0KOybDcmnIn44H2+SpJsrKrHNJ0/MDljpr332xpuIDh08H8XF0XTM/O9rnP5Xm4vEEs8sbSuV6VdVTVISEBw6AzBnJk5L7ZhMIwNl7bp+v4hNFHkpuYbAcEx9LNeG4xMYRDZ28cAAAAASUVORK5CYII=);
|
||||
background-position: right 8px center;
|
||||
background-repeat: no-repeat;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
[type="date"]& {
|
||||
// Get the date picker to be the same height as a regular form control
|
||||
&::-webkit-datetime-edit-fields-wrapper { padding: 0; }
|
||||
&::-webkit-inner-spin-button { height: 1.25em; }
|
||||
}
|
||||
|
||||
[type="number"]& {
|
||||
// Hide the up/down spinner in Webkit
|
||||
&::-webkit-inner-spin-button { -webkit-appearance: none; }
|
||||
|
||||
// ...and Firefox
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: @form-input-placeholder-color;
|
||||
}
|
||||
|
||||
[type="color"]& {
|
||||
position: relative;
|
||||
|
||||
// Increased padding values simulate height of regular text content
|
||||
padding-top: 1.125rem;
|
||||
padding-bottom: 1.125rem;
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
.absolute;
|
||||
.pin;
|
||||
.py(2);
|
||||
.px(3);
|
||||
}
|
||||
&::-webkit-color-swatch {
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
}
|
||||
&::-webkit-color-swatch {
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-borderless {
|
||||
border-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.form-control-static {
|
||||
.py(2);
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 1.25;
|
||||
border: 1px solid transparent; // To ensure matches regular control height
|
||||
.py(2);
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 1.25;
|
||||
border: 1px solid transparent; // To ensure matches regular control height
|
||||
}
|
||||
|
||||
.help-block {
|
||||
.text-sm;
|
||||
.mt(1);
|
||||
.text-sm;
|
||||
.mt(1);
|
||||
}
|
||||
|
||||
.form-group.has-error {
|
||||
.form-label, .help-block {
|
||||
.text-danger;
|
||||
}
|
||||
.form-control, .input-group {
|
||||
border-color: @form-input-border-error-color;
|
||||
}
|
||||
.form-control-feedback {
|
||||
.text-danger;
|
||||
}
|
||||
.form-label, .help-block {
|
||||
.text-danger;
|
||||
}
|
||||
.form-control, .input-group {
|
||||
border-color: @form-input-border-error-color;
|
||||
}
|
||||
.form-control-feedback {
|
||||
.text-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-feedback {
|
||||
margin-top: @spacer-2;
|
||||
margin-top: @spacer-2;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
border: 1px solid @form-control-border;
|
||||
border-radius: @form-control-radius;
|
||||
background: @color-white;
|
||||
overflow: hidden;
|
||||
|
||||
.input-group-addon {
|
||||
display: flex;
|
||||
border: 1px solid @form-control-border;
|
||||
border-radius: @form-control-radius;
|
||||
background: @color-white;
|
||||
overflow: hidden;
|
||||
padding-left: @spacer-3;
|
||||
padding-right: @spacer-3;
|
||||
border-right: 1px solid @form-control-border;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
display: flex;
|
||||
padding-left: @spacer-3;
|
||||
padding-right: @spacer-3;
|
||||
border-right: 1px solid @form-control-border;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
flex: 1;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.form-control {
|
||||
flex: 1;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.stacked-form {
|
||||
}
|
||||
|
||||
.stacked-form-group {
|
||||
margin-top: -1px;
|
||||
margin-top: -1px;
|
||||
position: relative;
|
||||
.form-control, .input-group {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
&:focus {
|
||||
.z10;
|
||||
}
|
||||
}
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
.form-control, .input-group {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
&:focus {
|
||||
.z10;
|
||||
}
|
||||
border-top-left-radius: @form-control-radius;
|
||||
border-top-right-radius: @form-control-radius;
|
||||
}
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
.form-control, .input-group {
|
||||
border-top-left-radius: @form-control-radius;
|
||||
border-top-right-radius: @form-control-radius;
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
.form-control, .input-group {
|
||||
border-bottom-left-radius: @form-control-radius;
|
||||
border-bottom-right-radius: @form-control-radius;
|
||||
}
|
||||
}
|
||||
.inset-form-icon {
|
||||
.z20;
|
||||
}
|
||||
&:last-of-type {
|
||||
.form-control, .input-group {
|
||||
border-bottom-left-radius: @form-control-radius;
|
||||
border-bottom-right-radius: @form-control-radius;
|
||||
}
|
||||
}
|
||||
.inset-form-icon {
|
||||
.z20;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.inset-form-group {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
.inset-form-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 1px; // Make up for border
|
||||
width: 2.75em;
|
||||
color: @text-dark-soft;
|
||||
.z20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 1px; // Make up for border
|
||||
width: 2.75em;
|
||||
color: @text-dark-soft;
|
||||
.z20;
|
||||
}
|
||||
|
||||
.inset-form-control {
|
||||
position: relative;
|
||||
padding-left: 2.75em;
|
||||
&:focus {
|
||||
.z10;
|
||||
}
|
||||
position: relative;
|
||||
padding-left: 2.75em;
|
||||
&:focus {
|
||||
.z10;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-pad {
|
||||
padding: 1em 1em;
|
||||
padding: 1em 1em;
|
||||
|
||||
&.inset-form-control {
|
||||
padding-left: 3em;
|
||||
}
|
||||
&.inset-form-control {
|
||||
padding-left: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.inset-form-icon-pad {
|
||||
width: 1.4em;
|
||||
left: ~"calc(1px + 1em)";
|
||||
width: 1.4em;
|
||||
left: ~"calc(1px + 1em)";
|
||||
}
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
.hr {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hr-brand {
|
||||
border: none;
|
||||
background-color: @color-brand-primary;
|
||||
border: none;
|
||||
background-color: @color-brand-primary;
|
||||
}
|
||||
|
||||
.hr-thick {
|
||||
height: .375rem;
|
||||
height: .375rem;
|
||||
}
|
||||
|
||||
.hr-short {
|
||||
width: 6rem;
|
||||
margin-left: 0;
|
||||
width: 6rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
.icon {
|
||||
display: inline-block;
|
||||
height: 1.25em;
|
||||
width: auto;
|
||||
fill: currentColor;
|
||||
vertical-align: text-bottom; // Trial and error, this is the best option for 20px icon + 16px text
|
||||
display: inline-block;
|
||||
height: 1.25em;
|
||||
width: auto;
|
||||
fill: currentColor;
|
||||
vertical-align: text-bottom; // Trial and error, this is the best option for 20px icon + 16px text
|
||||
}
|
||||
|
||||
.icon-xs {
|
||||
height: .5em;
|
||||
height: .5em;
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
height: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
height: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.icon-xl {
|
||||
height: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
@ -1,49 +1,49 @@
|
||||
.img-fit {
|
||||
max-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.img-inline {
|
||||
height: 2em;
|
||||
width: auto;
|
||||
height: 2em;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.img-circle { border-radius: 50%; }
|
||||
|
||||
.img-md {
|
||||
height: 4rem;
|
||||
width: auto;
|
||||
height: 4rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.img-100 {
|
||||
max-width: 100px;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.sm:img-fit {
|
||||
@media (min-width: @screen-sm) {
|
||||
max-width: 100%;
|
||||
}
|
||||
@media (min-width: @screen-sm) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.img-7r {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 7rem;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 7rem;
|
||||
}
|
||||
|
||||
.img-12r {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 12rem;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 12rem;
|
||||
}
|
||||
|
||||
.img-16r {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 16rem;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 16rem;
|
||||
}
|
||||
|
||||
.img-24r {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 24rem;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 24rem;
|
||||
}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
.bullet-list {
|
||||
list-style-type: disc;
|
||||
padding-left: 2.5rem;
|
||||
> li {
|
||||
margin-bottom: @spacer-2;
|
||||
}
|
||||
list-style-type: disc;
|
||||
padding-left: 2.5rem;
|
||||
> li {
|
||||
margin-bottom: @spacer-2;
|
||||
}
|
||||
}
|
||||
|
||||
.numbered-list {
|
||||
list-style-type: decimal;
|
||||
padding-left: 2rem;
|
||||
> li {
|
||||
margin-bottom: @spacer-2;
|
||||
}
|
||||
list-style-type: decimal;
|
||||
padding-left: 2rem;
|
||||
> li {
|
||||
margin-bottom: @spacer-2;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
.media-object {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.media-left {
|
||||
> .zondicon {
|
||||
vertical-align: sub; // Trial and error bullshit
|
||||
}
|
||||
> .zondicon {
|
||||
vertical-align: sub; // Trial and error bullshit
|
||||
}
|
||||
}
|
||||
|
||||
.media-body {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@keyframes spin-around {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(359deg); }
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(359deg); }
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
.StripeElement--focus {
|
||||
.tab-focus;
|
||||
.tab-focus;
|
||||
}
|
||||
|
||||
.stacked-form-group {
|
||||
.StripeElement--focus {
|
||||
.z10;
|
||||
}
|
||||
.StripeElement--focus {
|
||||
.z10;
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,12 +24,12 @@
|
||||
.hover-bg-highlight { &:hover { .bg-highlight; } }
|
||||
|
||||
.generate-responsive-versions({
|
||||
&bg-light { .bg-light; }
|
||||
&bg-light-soft { .bg-light-soft; }
|
||||
&bg-light-softer { .bg-light-softer; }
|
||||
&bg-primary { .bg-primary; }
|
||||
&bg-primary-soft { .bg-primary-soft; }
|
||||
&bg-primary-dark { .bg-primary-dark; }
|
||||
&bg-overlay-soft { .bg-overlay-soft; }
|
||||
&bg-overlay-dark { .bg-overlay-dark; }
|
||||
&bg-light { .bg-light; }
|
||||
&bg-light-soft { .bg-light-soft; }
|
||||
&bg-light-softer { .bg-light-softer; }
|
||||
&bg-primary { .bg-primary; }
|
||||
&bg-primary-soft { .bg-primary-soft; }
|
||||
&bg-primary-dark { .bg-primary-dark; }
|
||||
&bg-overlay-soft { .bg-overlay-soft; }
|
||||
&bg-overlay-dark { .bg-overlay-dark; }
|
||||
});
|
||||
|
||||
@ -100,70 +100,70 @@
|
||||
|
||||
// Responsive
|
||||
.generate-responsive-versions({
|
||||
&border { .border; }
|
||||
&border-t { .border-t; }
|
||||
&border-b { .border-b; }
|
||||
&border-l { .border-l; }
|
||||
&border-r { .border-r; }
|
||||
&border-2 { .border-2; }
|
||||
&border-t-2 { .border-t-2; }
|
||||
&border-b-2 { .border-b-2; }
|
||||
&border-l-2 { .border-l-2; }
|
||||
&border-r-2 { .border-r-2; }
|
||||
&border-3 { .border-3; }
|
||||
&border-t-3 { .border-t-3; }
|
||||
&border-b-3 { .border-b-3; }
|
||||
&border-l-3 { .border-l-3; }
|
||||
&border-r-3 { .border-r-3; }
|
||||
&border-4 { .border-4; }
|
||||
&border-t-4 { .border-t-4; }
|
||||
&border-b-4 { .border-b-4; }
|
||||
&border-l-4 { .border-l-4; }
|
||||
&border-r-4 { .border-r-4; }
|
||||
&border-0 { .border-0; }
|
||||
&border-t-0 { .border-t-0; }
|
||||
&border-b-0 { .border-b-0; }
|
||||
&border-l-0 { .border-l-0; }
|
||||
&border-r-0 { .border-r-0; }
|
||||
&border-dark { .border-dark; }
|
||||
&border-dark-soft { .border-dark-soft; }
|
||||
&border-dark-softer { .border-dark-softer; }
|
||||
&border-light { .border-light; }
|
||||
&border-light-soft { .border-light-soft; }
|
||||
&border-light-softer { .border-light-softer; }
|
||||
&border-t-dark { .border-t-dark; }
|
||||
&border-t-dark-soft { .border-t-dark-soft; }
|
||||
&border-t-dark-softer { .border-t-dark-softer; }
|
||||
&border-t-light { .border-t-light; }
|
||||
&border-t-light-soft { .border-t-light-soft; }
|
||||
&border-t-light-softer { .border-t-light-softer; }
|
||||
&border-r-dark { .border-r-dark; }
|
||||
&border-r-dark-soft { .border-r-dark-soft; }
|
||||
&border-r-dark-softer { .border-r-dark-softer; }
|
||||
&border-r-light { .border-r-light; }
|
||||
&border-r-light-soft { .border-r-light-soft; }
|
||||
&border-r-light-softer { .border-r-light-softer; }
|
||||
&border-b-dark { .border-b-dark; }
|
||||
&border-b-dark-soft { .border-b-dark-soft; }
|
||||
&border-b-dark-softer { .border-b-dark-softer; }
|
||||
&border-b-light { .border-b-light; }
|
||||
&border-b-light-soft { .border-b-light-soft; }
|
||||
&border-b-light-softer { .border-b-light-softer; }
|
||||
&border-l-dark { .border-l-dark; }
|
||||
&border-l-dark-soft { .border-l-dark-soft; }
|
||||
&border-l-dark-softer { .border-l-dark-softer; }
|
||||
&border-l-light { .border-l-light; }
|
||||
&border-l-light-soft { .border-l-light-soft; }
|
||||
&border-l-light-softer { .border-l-light-softer; }
|
||||
&rounded { .rounded; }
|
||||
&rounded-t { .rounded-t; }
|
||||
&rounded-r { .rounded-r; }
|
||||
&rounded-b { .rounded-b; }
|
||||
&rounded-l { .rounded-l; }
|
||||
&rounded-lg { .rounded-lg; }
|
||||
&rounded-t-lg { .rounded-t-lg; }
|
||||
&rounded-r-lg { .rounded-r-lg; }
|
||||
&rounded-b-lg { .rounded-b-lg; }
|
||||
&rounded-l-lg { .rounded-l-lg; }
|
||||
&pill { .pill; }
|
||||
&border { .border; }
|
||||
&border-t { .border-t; }
|
||||
&border-b { .border-b; }
|
||||
&border-l { .border-l; }
|
||||
&border-r { .border-r; }
|
||||
&border-2 { .border-2; }
|
||||
&border-t-2 { .border-t-2; }
|
||||
&border-b-2 { .border-b-2; }
|
||||
&border-l-2 { .border-l-2; }
|
||||
&border-r-2 { .border-r-2; }
|
||||
&border-3 { .border-3; }
|
||||
&border-t-3 { .border-t-3; }
|
||||
&border-b-3 { .border-b-3; }
|
||||
&border-l-3 { .border-l-3; }
|
||||
&border-r-3 { .border-r-3; }
|
||||
&border-4 { .border-4; }
|
||||
&border-t-4 { .border-t-4; }
|
||||
&border-b-4 { .border-b-4; }
|
||||
&border-l-4 { .border-l-4; }
|
||||
&border-r-4 { .border-r-4; }
|
||||
&border-0 { .border-0; }
|
||||
&border-t-0 { .border-t-0; }
|
||||
&border-b-0 { .border-b-0; }
|
||||
&border-l-0 { .border-l-0; }
|
||||
&border-r-0 { .border-r-0; }
|
||||
&border-dark { .border-dark; }
|
||||
&border-dark-soft { .border-dark-soft; }
|
||||
&border-dark-softer { .border-dark-softer; }
|
||||
&border-light { .border-light; }
|
||||
&border-light-soft { .border-light-soft; }
|
||||
&border-light-softer { .border-light-softer; }
|
||||
&border-t-dark { .border-t-dark; }
|
||||
&border-t-dark-soft { .border-t-dark-soft; }
|
||||
&border-t-dark-softer { .border-t-dark-softer; }
|
||||
&border-t-light { .border-t-light; }
|
||||
&border-t-light-soft { .border-t-light-soft; }
|
||||
&border-t-light-softer { .border-t-light-softer; }
|
||||
&border-r-dark { .border-r-dark; }
|
||||
&border-r-dark-soft { .border-r-dark-soft; }
|
||||
&border-r-dark-softer { .border-r-dark-softer; }
|
||||
&border-r-light { .border-r-light; }
|
||||
&border-r-light-soft { .border-r-light-soft; }
|
||||
&border-r-light-softer { .border-r-light-softer; }
|
||||
&border-b-dark { .border-b-dark; }
|
||||
&border-b-dark-soft { .border-b-dark-soft; }
|
||||
&border-b-dark-softer { .border-b-dark-softer; }
|
||||
&border-b-light { .border-b-light; }
|
||||
&border-b-light-soft { .border-b-light-soft; }
|
||||
&border-b-light-softer { .border-b-light-softer; }
|
||||
&border-l-dark { .border-l-dark; }
|
||||
&border-l-dark-soft { .border-l-dark-soft; }
|
||||
&border-l-dark-softer { .border-l-dark-softer; }
|
||||
&border-l-light { .border-l-light; }
|
||||
&border-l-light-soft { .border-l-light-soft; }
|
||||
&border-l-light-softer { .border-l-light-softer; }
|
||||
&rounded { .rounded; }
|
||||
&rounded-t { .rounded-t; }
|
||||
&rounded-r { .rounded-r; }
|
||||
&rounded-b { .rounded-b; }
|
||||
&rounded-l { .rounded-l; }
|
||||
&rounded-lg { .rounded-lg; }
|
||||
&rounded-t-lg { .rounded-t-lg; }
|
||||
&rounded-r-lg { .rounded-r-lg; }
|
||||
&rounded-b-lg { .rounded-b-lg; }
|
||||
&rounded-l-lg { .rounded-l-lg; }
|
||||
&pill { .pill; }
|
||||
});
|
||||
|
||||
@ -2,46 +2,46 @@
|
||||
.flex-top { align-items: flex-start; }
|
||||
|
||||
.flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.flex-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.flex-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-y-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-y-end {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.flex-y-baseline {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.flex-right {
|
||||
justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.flex-spaced {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-around {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.flex-fill { max-width: 100%; flex: 1; }
|
||||
@ -50,4 +50,3 @@
|
||||
|
||||
.flex-reverse { flex-direction: row-reverse; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
|
||||
|
||||
@ -6,11 +6,10 @@
|
||||
.constrain-xxl { max-width: 52rem; flex-basis: 52rem; }
|
||||
|
||||
.responsive({
|
||||
&constrain-xs { .constrain-xs; }
|
||||
&constrain-sm { .constrain-sm; }
|
||||
&constrain-md { .constrain-md; }
|
||||
&constrain-lg { .constrain-lg; }
|
||||
&constrain-xl { .constrain-xl; }
|
||||
&constrain-xxl { .constrain-xxl; }
|
||||
&constrain-xs { .constrain-xs; }
|
||||
&constrain-sm { .constrain-sm; }
|
||||
&constrain-md { .constrain-md; }
|
||||
&constrain-lg { .constrain-lg; }
|
||||
&constrain-xl { .constrain-xl; }
|
||||
&constrain-xxl { .constrain-xxl; }
|
||||
});
|
||||
|
||||
|
||||
@ -1,71 +1,71 @@
|
||||
a, .link {
|
||||
font-weight: @font-weight-regular;
|
||||
color: @text-dark;
|
||||
text-decoration: none;
|
||||
font-weight: @font-weight-regular;
|
||||
color: @text-dark;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: darken(@text-dark, 15%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:focus {
|
||||
.tab-focus;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
color: darken(@text-dark, 15%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:focus {
|
||||
.tab-focus;
|
||||
}
|
||||
}
|
||||
|
||||
.link-brand {
|
||||
color: @text-brand;
|
||||
color: @text-brand;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: darken(@text-brand, 15%);
|
||||
}
|
||||
&:hover, &:focus {
|
||||
color: darken(@text-brand, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.link-underline {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.link-plain {
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.link-soft {
|
||||
.text-dark-soft;
|
||||
.text-dark-soft;
|
||||
|
||||
&:hover, &:focus {
|
||||
.text-dark;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
.text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.link-softer {
|
||||
.text-dark-soft;
|
||||
.text-dark-soft;
|
||||
|
||||
&:hover, &:focus {
|
||||
.text-dark;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
.text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.link-softest {
|
||||
.text-dark-softest;
|
||||
.text-dark-softest;
|
||||
|
||||
&:hover, &:focus {
|
||||
.text-dark;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
.text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.link-light {
|
||||
color: @text-light;
|
||||
color: @text-light;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: @text-light;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
color: @text-light;
|
||||
}
|
||||
}
|
||||
|
||||
.link-light-soft {
|
||||
color: @text-light-soft;
|
||||
color: @text-light-soft;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: @text-light;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
color: @text-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,105 +4,105 @@
|
||||
.screen-xl(@ruleset) { @media (min-width: @screen-xl) { @ruleset(); }}
|
||||
|
||||
.responsive(@ruleset) {
|
||||
.screen-sm({ .sm\: { @ruleset(); }});
|
||||
.screen-md({ .md\: { @ruleset(); }});
|
||||
.screen-lg({ .lg\: { @ruleset(); }});
|
||||
.screen-xl({ .xl\: { @ruleset(); }});
|
||||
.screen-sm({ .sm\: { @ruleset(); }});
|
||||
.screen-md({ .md\: { @ruleset(); }});
|
||||
.screen-lg({ .lg\: { @ruleset(); }});
|
||||
.screen-xl({ .xl\: { @ruleset(); }});
|
||||
}
|
||||
|
||||
.generate-responsive-versions(@ruleset; @i: 1) when (@i <= length(@screens)) {
|
||||
@screen: extract(@screens, @i);
|
||||
@name: extract(@screen, 1);
|
||||
@screen-width: extract(@screen, 3);
|
||||
@screen: extract(@screens, @i);
|
||||
@name: extract(@screen, 1);
|
||||
@screen-width: extract(@screen, 3);
|
||||
|
||||
.generate-responsive-version(@ruleset, @name, @screen-width);
|
||||
.generate-responsive-versions(@ruleset, @i + 1);
|
||||
.generate-responsive-version(@ruleset, @name, @screen-width);
|
||||
.generate-responsive-versions(@ruleset, @i + 1);
|
||||
}
|
||||
|
||||
.generate-responsive-version(@ruleset, @screen, @min-width) {
|
||||
@prefix: ~"@{screen}\:";
|
||||
@prefix: ~"@{screen}\:";
|
||||
|
||||
@media (min-width: @min-width) {
|
||||
.@{prefix} { @ruleset(); };
|
||||
}
|
||||
@media (min-width: @min-width) {
|
||||
.@{prefix} { @ruleset(); };
|
||||
}
|
||||
}
|
||||
|
||||
.no-focus {
|
||||
&:focus, &:active {
|
||||
outline: none;
|
||||
}
|
||||
&:focus, &:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.no-wrap {
|
||||
white-space: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.box-shadow-soft {
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.box-shadow-z2 {
|
||||
box-shadow: 0 15px 35px hsla(240, 10%, 28%, 0.15), 0 5px 15px rgba(0,0,0,.07);
|
||||
box-shadow: 0 15px 35px hsla(240, 10%, 28%, 0.15), 0 5px 15px rgba(0,0,0,.07);
|
||||
}
|
||||
|
||||
.responsive({
|
||||
&box-shadow-z2 { .box-shadow-z2; }
|
||||
&box-shadow-z2 { .box-shadow-z2; }
|
||||
});
|
||||
|
||||
.inset-shadow {
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.tab-focus {
|
||||
// Default
|
||||
outline: thin dotted;
|
||||
// WebKit
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
// Default
|
||||
outline: thin dotted;
|
||||
// WebKit
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
min-height: 100vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.no-select {
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ease {
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
// Useful for hiding things like radio buttons without making them inaccessible
|
||||
// to the keyboard when navigating forms.
|
||||
.pseudo-hidden {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
border: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Display
|
||||
@ -114,9 +114,9 @@
|
||||
.table-cell { display: table-cell; }
|
||||
|
||||
.responsive({
|
||||
&block { .block; }
|
||||
&inline-block { .inline-block; }
|
||||
&hidden { .hidden; }
|
||||
&block { .block; }
|
||||
&inline-block { .inline-block; }
|
||||
&hidden { .hidden; }
|
||||
});
|
||||
|
||||
// Position
|
||||
@ -135,25 +135,25 @@
|
||||
.mask { overflow: hidden; }
|
||||
|
||||
.aspect-2\:1 {
|
||||
padding-bottom: 50%;
|
||||
padding-bottom: 50%;
|
||||
}
|
||||
|
||||
.aspect-16\:9 {
|
||||
padding-bottom: 56.25%;
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
.hover-only {
|
||||
opacity: 0;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
opacity: 0;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.responsive({
|
||||
&hover-only { .hover-only; }
|
||||
&hover-only { .hover-only; }
|
||||
});
|
||||
|
||||
.bg-cover {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
@ -16,43 +16,43 @@
|
||||
@spacer-15: 30rem;
|
||||
|
||||
@spacer-map:
|
||||
px 1px,
|
||||
0 @spacer-0,
|
||||
1 @spacer-1,
|
||||
2 @spacer-2,
|
||||
3 @spacer-3,
|
||||
4 @spacer-4,
|
||||
5 @spacer-5,
|
||||
6 @spacer-6,
|
||||
7 @spacer-7,
|
||||
8 @spacer-8,
|
||||
9 @spacer-9,
|
||||
10 @spacer-10,
|
||||
11 @spacer-11,
|
||||
12 @spacer-12,
|
||||
13 @spacer-13,
|
||||
14 @spacer-14,
|
||||
15 @spacer-15;
|
||||
px 1px,
|
||||
0 @spacer-0,
|
||||
1 @spacer-1,
|
||||
2 @spacer-2,
|
||||
3 @spacer-3,
|
||||
4 @spacer-4,
|
||||
5 @spacer-5,
|
||||
6 @spacer-6,
|
||||
7 @spacer-7,
|
||||
8 @spacer-8,
|
||||
9 @spacer-9,
|
||||
10 @spacer-10,
|
||||
11 @spacer-11,
|
||||
12 @spacer-12,
|
||||
13 @spacer-13,
|
||||
14 @spacer-14,
|
||||
15 @spacer-15;
|
||||
|
||||
.apply-match(@map; @search; @ruleset) {
|
||||
@current: extract(extract(@map, 1), 1);
|
||||
.apply-match(@map; @search; @current; @ruleset; 1);
|
||||
@current: extract(extract(@map, 1), 1);
|
||||
.apply-match(@map; @search; @current; @ruleset; 1);
|
||||
}
|
||||
|
||||
.apply-match(@map; @search; @current; @ruleset; @i) when not (@search = @current) and (@i <= length(@spacer-map)) {
|
||||
@current: extract(extract(@map, @i + 1), 1);
|
||||
.apply-match(@map; @search; @current; @ruleset; @i + 1);
|
||||
@current: extract(extract(@map, @i + 1), 1);
|
||||
.apply-match(@map; @search; @current; @ruleset; @i + 1);
|
||||
}
|
||||
|
||||
.apply-match(@map; @search; @current; @ruleset; @i) when (@search = @current) and (@i <= length(@spacer-map)) {
|
||||
& {
|
||||
@__spacer-size: extract(extract(@map, @i), 2);
|
||||
@ruleset();
|
||||
}
|
||||
& {
|
||||
@__spacer-size: extract(extract(@map, @i), 2);
|
||||
@ruleset();
|
||||
}
|
||||
}
|
||||
|
||||
.apply-spacer(@search; @ruleset) {
|
||||
.apply-match(@spacer-map; @search; @ruleset);
|
||||
.apply-match(@spacer-map; @search; @ruleset);
|
||||
}
|
||||
|
||||
.pt(@spacer) { .apply-spacer(@spacer, { padding-top: @__spacer-size; }); }
|
||||
@ -60,91 +60,91 @@
|
||||
.pb(@spacer) { .apply-spacer(@spacer, { padding-bottom: @__spacer-size; }); }
|
||||
.pl(@spacer) { .apply-spacer(@spacer, { padding-left: @__spacer-size; }); }
|
||||
.py(@spacer) {
|
||||
.apply-spacer(@spacer, {
|
||||
padding-top: @__spacer-size;
|
||||
padding-bottom: @__spacer-size;
|
||||
});
|
||||
.apply-spacer(@spacer, {
|
||||
padding-top: @__spacer-size;
|
||||
padding-bottom: @__spacer-size;
|
||||
});
|
||||
}
|
||||
.px(@spacer) {
|
||||
.apply-spacer(@spacer, {
|
||||
padding-right: @__spacer-size;
|
||||
padding-left: @__spacer-size;
|
||||
});
|
||||
.apply-spacer(@spacer, {
|
||||
padding-right: @__spacer-size;
|
||||
padding-left: @__spacer-size;
|
||||
});
|
||||
}
|
||||
.p(@spacer) {
|
||||
.apply-spacer(@spacer, {
|
||||
padding-top: @__spacer-size;
|
||||
padding-right: @__spacer-size;
|
||||
padding-bottom: @__spacer-size;
|
||||
padding-left: @__spacer-size;
|
||||
});
|
||||
.apply-spacer(@spacer, {
|
||||
padding-top: @__spacer-size;
|
||||
padding-right: @__spacer-size;
|
||||
padding-bottom: @__spacer-size;
|
||||
padding-left: @__spacer-size;
|
||||
});
|
||||
}
|
||||
|
||||
.generate-padding-utilities(@i: 1) when (@i <= length(@spacer-map)) {
|
||||
@spacer: extract(@spacer-map, @i);
|
||||
@spacer: extract(@spacer-map, @i);
|
||||
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
.pt-@{n} { padding-top: @size; }
|
||||
.pr-@{n} { padding-right: @size; }
|
||||
.pb-@{n} { padding-bottom: @size; }
|
||||
.pl-@{n} { padding-left: @size; }
|
||||
.py-@{n} {
|
||||
padding-top: @size;
|
||||
padding-bottom: @size;
|
||||
}
|
||||
.px-@{n} {
|
||||
padding-right: @size;
|
||||
padding-left: @size;
|
||||
}
|
||||
.p-@{n} {
|
||||
padding-top: @size;
|
||||
padding-bottom: @size;
|
||||
padding-right: @size;
|
||||
padding-left: @size;
|
||||
}
|
||||
.pt-@{n} { padding-top: @size; }
|
||||
.pr-@{n} { padding-right: @size; }
|
||||
.pb-@{n} { padding-bottom: @size; }
|
||||
.pl-@{n} { padding-left: @size; }
|
||||
.py-@{n} {
|
||||
padding-top: @size;
|
||||
padding-bottom: @size;
|
||||
}
|
||||
.px-@{n} {
|
||||
padding-right: @size;
|
||||
padding-left: @size;
|
||||
}
|
||||
.p-@{n} {
|
||||
padding-top: @size;
|
||||
padding-bottom: @size;
|
||||
padding-right: @size;
|
||||
padding-left: @size;
|
||||
}
|
||||
|
||||
.generate-padding-utilities(@i + 1);
|
||||
.generate-padding-utilities(@i + 1);
|
||||
}
|
||||
|
||||
.generate-screen-padding-utilities(@screen; @screen-width; @i: 1) when (@i <= length(@spacer-map)) {
|
||||
@prefix: ~"@{screen}\:";
|
||||
@spacer: extract(@spacer-map, @i);
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
@prefix: ~"@{screen}\:";
|
||||
@spacer: extract(@spacer-map, @i);
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
@media (min-width: @screen-width) {
|
||||
.@{prefix}pt-@{n} { padding-top: @size; }
|
||||
.@{prefix}pr-@{n} { padding-right: @size; }
|
||||
.@{prefix}pb-@{n} { padding-bottom: @size; }
|
||||
.@{prefix}pl-@{n} { padding-left: @size; }
|
||||
.@{prefix}py-@{n} {
|
||||
padding-top: @size;
|
||||
padding-bottom: @size;
|
||||
}
|
||||
.@{prefix}px-@{n} {
|
||||
padding-right: @size;
|
||||
padding-left: @size;
|
||||
}
|
||||
.@{prefix}p-@{n} {
|
||||
padding-top: @size;
|
||||
padding-bottom: @size;
|
||||
padding-right: @size;
|
||||
padding-left: @size;
|
||||
}
|
||||
@media (min-width: @screen-width) {
|
||||
.@{prefix}pt-@{n} { padding-top: @size; }
|
||||
.@{prefix}pr-@{n} { padding-right: @size; }
|
||||
.@{prefix}pb-@{n} { padding-bottom: @size; }
|
||||
.@{prefix}pl-@{n} { padding-left: @size; }
|
||||
.@{prefix}py-@{n} {
|
||||
padding-top: @size;
|
||||
padding-bottom: @size;
|
||||
}
|
||||
.@{prefix}px-@{n} {
|
||||
padding-right: @size;
|
||||
padding-left: @size;
|
||||
}
|
||||
.@{prefix}p-@{n} {
|
||||
padding-top: @size;
|
||||
padding-bottom: @size;
|
||||
padding-right: @size;
|
||||
padding-left: @size;
|
||||
}
|
||||
}
|
||||
|
||||
.generate-screen-padding-utilities(@screen; @screen-width; (@i + 1));
|
||||
.generate-screen-padding-utilities(@screen; @screen-width; (@i + 1));
|
||||
}
|
||||
|
||||
.generate-responsive-padding-utilities(@i: 1) when (@i <= length(@screens)) {
|
||||
@screen: extract(@screens, @i);
|
||||
@name: extract(@screen, 1);
|
||||
@screen-width: extract(@screen, 3);
|
||||
@screen: extract(@screens, @i);
|
||||
@name: extract(@screen, 1);
|
||||
@screen-width: extract(@screen, 3);
|
||||
|
||||
.generate-screen-padding-utilities(@name, @screen-width);
|
||||
.generate-responsive-padding-utilities(@i + 1);
|
||||
.generate-screen-padding-utilities(@name, @screen-width);
|
||||
.generate-responsive-padding-utilities(@i + 1);
|
||||
}
|
||||
|
||||
.mt(@spacer) { .apply-spacer(@spacer, { margin-top: @__spacer-size; }); }
|
||||
@ -153,97 +153,97 @@
|
||||
.mb(@spacer) { .apply-spacer(@spacer, { margin-bottom: @__spacer-size; }); }
|
||||
.ml(@spacer) { .apply-spacer(@spacer, { margin-left: @__spacer-size; }); }
|
||||
.my(@spacer) {
|
||||
.apply-spacer(@spacer, {
|
||||
margin-top: @__spacer-size;
|
||||
margin-bottom: @__spacer-size;
|
||||
});
|
||||
.apply-spacer(@spacer, {
|
||||
margin-top: @__spacer-size;
|
||||
margin-bottom: @__spacer-size;
|
||||
});
|
||||
}
|
||||
.mx(@spacer) {
|
||||
.apply-spacer(@spacer, {
|
||||
margin-right: @__spacer-size;
|
||||
margin-left: @__spacer-size;
|
||||
});
|
||||
.apply-spacer(@spacer, {
|
||||
margin-right: @__spacer-size;
|
||||
margin-left: @__spacer-size;
|
||||
});
|
||||
}
|
||||
.m(@spacer) {
|
||||
.apply-spacer(@spacer, {
|
||||
margin-top: @__spacer-size;
|
||||
margin-right: @__spacer-size;
|
||||
margin-bottom: @__spacer-size;
|
||||
margin-left: @__spacer-size;
|
||||
});
|
||||
.apply-spacer(@spacer, {
|
||||
margin-top: @__spacer-size;
|
||||
margin-right: @__spacer-size;
|
||||
margin-bottom: @__spacer-size;
|
||||
margin-left: @__spacer-size;
|
||||
});
|
||||
}
|
||||
|
||||
.generate-margin-utilities(@i: 1) when (@i <= length(@spacer-map)) {
|
||||
@spacer: extract(@spacer-map, @i);
|
||||
@spacer: extract(@spacer-map, @i);
|
||||
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
.mt-@{n} { margin-top: @size; }
|
||||
.mr-@{n} { margin-right: @size; }
|
||||
.mb-@{n} { margin-bottom: @size; }
|
||||
.ml-@{n} { margin-left: @size; }
|
||||
.my-@{n} {
|
||||
margin-top: @size;
|
||||
margin-bottom: @size;
|
||||
}
|
||||
.mx-@{n} {
|
||||
margin-right: @size;
|
||||
margin-left: @size;
|
||||
}
|
||||
.m-@{n} {
|
||||
margin-top: @size;
|
||||
margin-bottom: @size;
|
||||
margin-right: @size;
|
||||
margin-left: @size;
|
||||
}
|
||||
.mt-@{n} { margin-top: @size; }
|
||||
.mr-@{n} { margin-right: @size; }
|
||||
.mb-@{n} { margin-bottom: @size; }
|
||||
.ml-@{n} { margin-left: @size; }
|
||||
.my-@{n} {
|
||||
margin-top: @size;
|
||||
margin-bottom: @size;
|
||||
}
|
||||
.mx-@{n} {
|
||||
margin-right: @size;
|
||||
margin-left: @size;
|
||||
}
|
||||
.m-@{n} {
|
||||
margin-top: @size;
|
||||
margin-bottom: @size;
|
||||
margin-right: @size;
|
||||
margin-left: @size;
|
||||
}
|
||||
|
||||
.generate-margin-utilities(@i + 1);
|
||||
.generate-margin-utilities(@i + 1);
|
||||
}
|
||||
|
||||
.generate-screen-margin-utilities(@screen; @screen-width; @i: 1) when (@i <= length(@spacer-map)) {
|
||||
@prefix: ~"@{screen}\:";
|
||||
@spacer: extract(@spacer-map, @i);
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
@prefix: ~"@{screen}\:";
|
||||
@spacer: extract(@spacer-map, @i);
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
@media (min-width: @screen-width) {
|
||||
.@{prefix}mt-@{n} { margin-top: @size; }
|
||||
.@{prefix}mr-@{n} { margin-right: @size; }
|
||||
.@{prefix}mb-@{n} { margin-bottom: @size; }
|
||||
.@{prefix}ml-@{n} { margin-left: @size; }
|
||||
.@{prefix}my-@{n} {
|
||||
margin-top: @size;
|
||||
margin-bottom: @size;
|
||||
}
|
||||
.@{prefix}mx-@{n} {
|
||||
margin-right: @size;
|
||||
margin-left: @size;
|
||||
}
|
||||
.@{prefix}m-@{n} {
|
||||
margin-top: @size;
|
||||
margin-bottom: @size;
|
||||
margin-right: @size;
|
||||
margin-left: @size;
|
||||
}
|
||||
@media (min-width: @screen-width) {
|
||||
.@{prefix}mt-@{n} { margin-top: @size; }
|
||||
.@{prefix}mr-@{n} { margin-right: @size; }
|
||||
.@{prefix}mb-@{n} { margin-bottom: @size; }
|
||||
.@{prefix}ml-@{n} { margin-left: @size; }
|
||||
.@{prefix}my-@{n} {
|
||||
margin-top: @size;
|
||||
margin-bottom: @size;
|
||||
}
|
||||
.@{prefix}mx-@{n} {
|
||||
margin-right: @size;
|
||||
margin-left: @size;
|
||||
}
|
||||
.@{prefix}m-@{n} {
|
||||
margin-top: @size;
|
||||
margin-bottom: @size;
|
||||
margin-right: @size;
|
||||
margin-left: @size;
|
||||
}
|
||||
}
|
||||
|
||||
.generate-screen-margin-utilities(@screen; @screen-width; (@i + 1));
|
||||
.generate-screen-margin-utilities(@screen; @screen-width; (@i + 1));
|
||||
}
|
||||
|
||||
.generate-responsive-margin-utilities(@i: 1) when (@i <= length(@screens)) {
|
||||
@screen: extract(@screens, @i);
|
||||
@name: extract(@screen, 1);
|
||||
@screen-width: extract(@screen, 3);
|
||||
@screen: extract(@screens, @i);
|
||||
@name: extract(@screen, 1);
|
||||
@screen-width: extract(@screen, 3);
|
||||
|
||||
.generate-screen-margin-utilities(@name, @screen-width);
|
||||
.generate-screen-margin-utilities(@name, @screen-width);
|
||||
|
||||
@media (min-width: @screen-width) {
|
||||
@prefix: ~"@{name}\:";
|
||||
.@{prefix}mx-auto { margin-left: auto; margin-right: auto; }
|
||||
}
|
||||
@media (min-width: @screen-width) {
|
||||
@prefix: ~"@{name}\:";
|
||||
.@{prefix}mx-auto { margin-left: auto; margin-right: auto; }
|
||||
}
|
||||
|
||||
.generate-responsive-margin-utilities(@i + 1);
|
||||
.generate-responsive-margin-utilities(@i + 1);
|
||||
}
|
||||
|
||||
.pull-t(@spacer) { .apply-spacer(@spacer, { margin-top: ~"-@{__spacer-size}"; }); }
|
||||
@ -252,94 +252,93 @@
|
||||
.pull-b(@spacer) { .apply-spacer(@spacer, { margin-bottom: ~"-@{__spacer-size}"; }); }
|
||||
.pull-l(@spacer) { .apply-spacer(@spacer, { margin-left: ~"-@{__spacer-size}"; }); }
|
||||
.pull-y(@spacer) {
|
||||
.apply-spacer(@spacer, {
|
||||
margin-top: ~"-@{__spacer-size}";
|
||||
margin-bottom: ~"-@{__spacer-size}";
|
||||
});
|
||||
.apply-spacer(@spacer, {
|
||||
margin-top: ~"-@{__spacer-size}";
|
||||
margin-bottom: ~"-@{__spacer-size}";
|
||||
});
|
||||
}
|
||||
.pull-x(@spacer) {
|
||||
.apply-spacer(@spacer, {
|
||||
margin-right: ~"-@{__spacer-size}";
|
||||
margin-left: ~"-@{__spacer-size}";
|
||||
});
|
||||
.apply-spacer(@spacer, {
|
||||
margin-right: ~"-@{__spacer-size}";
|
||||
margin-left: ~"-@{__spacer-size}";
|
||||
});
|
||||
}
|
||||
.pull(@spacer) {
|
||||
.apply-spacer(@spacer, {
|
||||
margin-top: ~"-@{__spacer-size}";
|
||||
margin-right: ~"-@{__spacer-size}";
|
||||
margin-bottom: ~"-@{__spacer-size}";
|
||||
margin-left: ~"-@{__spacer-size}";
|
||||
});
|
||||
.apply-spacer(@spacer, {
|
||||
margin-top: ~"-@{__spacer-size}";
|
||||
margin-right: ~"-@{__spacer-size}";
|
||||
margin-bottom: ~"-@{__spacer-size}";
|
||||
margin-left: ~"-@{__spacer-size}";
|
||||
});
|
||||
}
|
||||
|
||||
.generate-pull-utilities(@i: 1) when (@i <= length(@spacer-map)) {
|
||||
@spacer: extract(@spacer-map, @i);
|
||||
@spacer: extract(@spacer-map, @i);
|
||||
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
.pull-t-@{n} { margin-top: ~"-@{size}"; }
|
||||
.pull-r-@{n} { margin-right: ~"-@{size}"; }
|
||||
.pull-b-@{n} { margin-bottom: ~"-@{size}"; }
|
||||
.pull-l-@{n} { margin-left: ~"-@{size}"; }
|
||||
.pull-y-@{n} {
|
||||
margin-top: ~"-@{size}";
|
||||
margin-bottom: ~"-@{size}";
|
||||
}
|
||||
.pull-x-@{n} {
|
||||
margin-right: ~"-@{size}";
|
||||
margin-left: ~"-@{size}";
|
||||
}
|
||||
.pull-@{n} {
|
||||
margin-top: ~"-@{size}";
|
||||
margin-bottom: ~"-@{size}";
|
||||
margin-right: ~"-@{size}";
|
||||
margin-left: ~"-@{size}";
|
||||
}
|
||||
.pull-t-@{n} { margin-top: ~"-@{size}"; }
|
||||
.pull-r-@{n} { margin-right: ~"-@{size}"; }
|
||||
.pull-b-@{n} { margin-bottom: ~"-@{size}"; }
|
||||
.pull-l-@{n} { margin-left: ~"-@{size}"; }
|
||||
.pull-y-@{n} {
|
||||
margin-top: ~"-@{size}";
|
||||
margin-bottom: ~"-@{size}";
|
||||
}
|
||||
.pull-x-@{n} {
|
||||
margin-right: ~"-@{size}";
|
||||
margin-left: ~"-@{size}";
|
||||
}
|
||||
.pull-@{n} {
|
||||
margin-top: ~"-@{size}";
|
||||
margin-bottom: ~"-@{size}";
|
||||
margin-right: ~"-@{size}";
|
||||
margin-left: ~"-@{size}";
|
||||
}
|
||||
|
||||
.generate-pull-utilities(@i + 1);
|
||||
.generate-pull-utilities(@i + 1);
|
||||
}
|
||||
|
||||
.generate-screen-pull-utilities(@screen; @screen-width; @i: 1) when (@i <= length(@spacer-map)) {
|
||||
@prefix: ~"@{screen}\:";
|
||||
@spacer: extract(@spacer-map, @i);
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
@prefix: ~"@{screen}\:";
|
||||
@spacer: extract(@spacer-map, @i);
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
@media (min-width: @screen-width) {
|
||||
.@{prefix}pull-t-@{n} { margin-top: ~"-@{size}";; }
|
||||
.@{prefix}pull-r-@{n} { margin-right: ~"-@{size}";; }
|
||||
.@{prefix}pull-b-@{n} { margin-bottom: ~"-@{size}";; }
|
||||
.@{prefix}pull-l-@{n} { margin-left: ~"-@{size}";; }
|
||||
.@{prefix}pull-y-@{n} {
|
||||
margin-top: ~"-@{size}";;
|
||||
margin-bottom: ~"-@{size}";;
|
||||
}
|
||||
.@{prefix}pull-x-@{n} {
|
||||
margin-right: ~"-@{size}";;
|
||||
margin-left: ~"-@{size}";;
|
||||
}
|
||||
.@{prefix}pull-@{n} {
|
||||
margin-top: ~"-@{size}";;
|
||||
margin-bottom: ~"-@{size}";;
|
||||
margin-right: ~"-@{size}";;
|
||||
margin-left: ~"-@{size}";;
|
||||
}
|
||||
@media (min-width: @screen-width) {
|
||||
.@{prefix}pull-t-@{n} { margin-top: ~"-@{size}";; }
|
||||
.@{prefix}pull-r-@{n} { margin-right: ~"-@{size}";; }
|
||||
.@{prefix}pull-b-@{n} { margin-bottom: ~"-@{size}";; }
|
||||
.@{prefix}pull-l-@{n} { margin-left: ~"-@{size}";; }
|
||||
.@{prefix}pull-y-@{n} {
|
||||
margin-top: ~"-@{size}";;
|
||||
margin-bottom: ~"-@{size}";;
|
||||
}
|
||||
.@{prefix}pull-x-@{n} {
|
||||
margin-right: ~"-@{size}";;
|
||||
margin-left: ~"-@{size}";;
|
||||
}
|
||||
.@{prefix}pull-@{n} {
|
||||
margin-top: ~"-@{size}";;
|
||||
margin-bottom: ~"-@{size}";;
|
||||
margin-right: ~"-@{size}";;
|
||||
margin-left: ~"-@{size}";;
|
||||
}
|
||||
}
|
||||
|
||||
.generate-screen-pull-utilities(@screen; @screen-width; (@i + 1));
|
||||
.generate-screen-pull-utilities(@screen; @screen-width; (@i + 1));
|
||||
}
|
||||
|
||||
.generate-responsive-pull-utilities(@i: 1) when (@i <= length(@screens)) {
|
||||
@screen: extract(@screens, @i);
|
||||
@name: extract(@screen, 1);
|
||||
@screen-width: extract(@screen, 3);
|
||||
@screen: extract(@screens, @i);
|
||||
@name: extract(@screen, 1);
|
||||
@screen-width: extract(@screen, 3);
|
||||
|
||||
.generate-screen-pull-utilities(@name, @screen-width);
|
||||
.generate-responsive-pull-utilities(@i + 1);
|
||||
.generate-screen-pull-utilities(@name, @screen-width);
|
||||
.generate-responsive-pull-utilities(@i + 1);
|
||||
}
|
||||
|
||||
|
||||
.generate-padding-utilities();
|
||||
.generate-margin-utilities();
|
||||
.generate-pull-utilities();
|
||||
|
||||
@ -58,17 +58,17 @@
|
||||
.text-right { text-align: right; }
|
||||
|
||||
.responsive({
|
||||
&text-center { .text-center; }
|
||||
&text-left { .text-left; }
|
||||
&text-right { .text-right; }
|
||||
&text-center { .text-center; }
|
||||
&text-left { .text-left; }
|
||||
&text-right { .text-right; }
|
||||
});
|
||||
|
||||
.text-uppercase { text-transform: uppercase; }
|
||||
|
||||
.text-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-break { white-space: pre-line; }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user