Normalize spacing (to 2 spaces).
This commit is contained in:
Jonathan Reinink
parent
421c1b0d7d
commit
aaa5d8ae4c
22 changed files with 865 additions and 869 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue