mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Merge pull request #34 from adamwathan/remove-components
Remove components and reorganize files a bit
This commit is contained in:
Adam Wathan
GitHub
commit
fe7302a717
@ -1,2 +0,0 @@
|
||||
@import "base/base";
|
||||
@import "base/colors";
|
||||
@ -1,109 +0,0 @@
|
||||
@hue-slate: 208;
|
||||
@hue-cream: 50;
|
||||
|
||||
@hue-brand-primary: 171;
|
||||
@color-brand-primary: #00ceae;
|
||||
|
||||
@color-brand-gradient-start: #00b8c6;
|
||||
@color-brand-gradient-stop: #00c6a2;
|
||||
|
||||
@hue-blue: 193;
|
||||
@color-blue: hsl(@hue-blue, 77%, 58%);
|
||||
|
||||
@hue-green: 167;
|
||||
@color-green: hsl(@hue-green, 53%, 55%);
|
||||
|
||||
@hue-red: 2;
|
||||
@color-danger: hsl(@hue-red, 75%, 55%);
|
||||
|
||||
@hue-gray: 208;
|
||||
// @hue-gray: 50;
|
||||
@color-gray-10: #fff;
|
||||
@color-gray-9: hsl(@hue-gray, 20%, 98%);
|
||||
@color-gray-8: hsl(@hue-gray, 25%, 96%);
|
||||
@color-gray-7: hsl(@hue-gray, 25%, 90%);
|
||||
@color-gray-6: hsl(@hue-gray, 25%, 82%);
|
||||
@color-gray-5: hsl(@hue-gray, 25%, 62%);
|
||||
@color-gray-4: hsl(@hue-gray, 25%, 52%);
|
||||
@color-gray-3: hsl(@hue-gray, 25%, 35%);
|
||||
@color-gray-2: hsl(@hue-gray, 25%, 25%);
|
||||
@color-gray-1: hsl(@hue-gray, 25%, 16%);
|
||||
|
||||
@color-white: @color-gray-10;
|
||||
@color-black: @color-gray-1;
|
||||
|
||||
@color-blue-highlight: hsl(215, 99%, 63%);
|
||||
|
||||
// Backgrounds
|
||||
@bg-light-hue: @hue-slate;
|
||||
@bg-light: hsl(@bg-light-hue, 0%, 100%);
|
||||
@bg-light-soft: hsl(@bg-light-hue, 20%, 98%);
|
||||
@bg-light-softer: hsl(@bg-light-hue, 20%, 96%);
|
||||
|
||||
@bg-dark-hue: @hue-slate;
|
||||
@bg-dark: hsl(@bg-dark-hue, 14%, 33%);
|
||||
@bg-dark-soft: hsl(@bg-dark-hue, 14%, 42%);
|
||||
@bg-dark-softer: hsl(@bg-dark-hue, 14%, 52%);
|
||||
|
||||
@bg-primary: @color-brand-primary;
|
||||
|
||||
@bg-highlight: hsl(215, 99%, 63%);
|
||||
|
||||
|
||||
// Borders
|
||||
@border-dark-hue: @hue-slate;
|
||||
@border-dark: hsl(@border-dark-hue, 25%, 82%);
|
||||
@border-dark-soft: hsl(@border-dark-hue, 25%, 90%);
|
||||
@border-dark-softer: hsl(@border-dark-hue, 25%, 96%);
|
||||
|
||||
@border-light: @color-white;
|
||||
@border-light-soft: fade(@color-white, 60%);
|
||||
@border-light-softer: fade(@color-white, 35%);
|
||||
|
||||
@border-danger: @color-danger;
|
||||
@border-danger-soft: fade(@color-danger, 50%);
|
||||
|
||||
@border-brand: @color-brand-primary;
|
||||
|
||||
@border-default: @border-dark-soft;
|
||||
|
||||
|
||||
// Text
|
||||
@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-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;
|
||||
|
||||
|
||||
// Buttons
|
||||
@btn-primary-text-color: @color-white;
|
||||
@btn-primary-bg-color: @color-brand-primary;
|
||||
|
||||
@btn-secondary-text-color: @text-dark-soft;
|
||||
@btn-secondary-bg-color: @color-white;
|
||||
@btn-secondary-border-color: @border-dark;
|
||||
|
||||
@btn-blue-text-color: @color-white;
|
||||
@btn-blue-bg-color: @color-blue;
|
||||
|
||||
@btn-themed-text-color: @color-white;
|
||||
|
||||
@btn-inv-outline-text-color: @color-white;
|
||||
|
||||
@btn-disabled-bg: @color-gray-8;
|
||||
@btn-disabled-border: @color-gray-4;
|
||||
@btn-disabled-text: @btn-disabled-border;
|
||||
|
||||
|
||||
// Forms
|
||||
@form-input-placeholder-color: @text-dark-softest;
|
||||
@form-input-border-error-color: lighten(@color-danger, 25%);
|
||||
35
src/colors.less
Normal file
35
src/colors.less
Normal file
@ -0,0 +1,35 @@
|
||||
@hue-slate: 208;
|
||||
@hue-cream: 50;
|
||||
|
||||
@hue-brand-primary: 171;
|
||||
@color-brand-primary: #00ceae;
|
||||
|
||||
@color-brand-gradient-start: #00b8c6;
|
||||
@color-brand-gradient-stop: #00c6a2;
|
||||
|
||||
@hue-blue: 193;
|
||||
@color-blue: hsl(@hue-blue, 77%, 58%);
|
||||
|
||||
@hue-green: 167;
|
||||
@color-green: hsl(@hue-green, 53%, 55%);
|
||||
|
||||
@hue-red: 2;
|
||||
@color-danger: hsl(@hue-red, 75%, 55%);
|
||||
|
||||
@hue-gray: 208;
|
||||
// @hue-gray: 50;
|
||||
@color-gray-10: #fff;
|
||||
@color-gray-9: hsl(@hue-gray, 20%, 98%);
|
||||
@color-gray-8: hsl(@hue-gray, 25%, 96%);
|
||||
@color-gray-7: hsl(@hue-gray, 25%, 90%);
|
||||
@color-gray-6: hsl(@hue-gray, 25%, 82%);
|
||||
@color-gray-5: hsl(@hue-gray, 25%, 62%);
|
||||
@color-gray-4: hsl(@hue-gray, 25%, 52%);
|
||||
@color-gray-3: hsl(@hue-gray, 25%, 35%);
|
||||
@color-gray-2: hsl(@hue-gray, 25%, 25%);
|
||||
@color-gray-1: hsl(@hue-gray, 25%, 16%);
|
||||
|
||||
@color-white: @color-gray-10;
|
||||
@color-black: @color-gray-1;
|
||||
|
||||
@color-blue-highlight: hsl(215, 99%, 63%);
|
||||
@ -1,13 +0,0 @@
|
||||
@import "components/alert";
|
||||
@import "components/buttons";
|
||||
@import "components/dropdown";
|
||||
@import "components/forms";
|
||||
@import "components/generated-grid";
|
||||
@import "components/horizontal-rules";
|
||||
@import "components/icons";
|
||||
@import "components/images";
|
||||
@import "components/links";
|
||||
@import "components/lists";
|
||||
@import "components/markdown";
|
||||
@import "components/media-object";
|
||||
@import "components/progress";
|
||||
@ -1,14 +0,0 @@
|
||||
@alert-border-radius: @border-radius-1;
|
||||
|
||||
.alert {
|
||||
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;
|
||||
}
|
||||
@ -1,265 +0,0 @@
|
||||
@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;
|
||||
text-decoration: none;
|
||||
font-family: @font-family-base;
|
||||
|
||||
&:focus, &:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
.tab-focus;
|
||||
}
|
||||
|
||||
&:disabled, &.is-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-loading {
|
||||
position: relative;
|
||||
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: "";
|
||||
}
|
||||
}
|
||||
|
||||
.button-outline-variant(@color) {
|
||||
@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: fade(@color, 10%);
|
||||
border-color: @color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: @color;
|
||||
}
|
||||
|
||||
&:disabled, &.is-disabled {
|
||||
&:active, &:hover {
|
||||
border-color: @inactive-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-variant(@text; @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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
.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-blue {
|
||||
.btn-variant(@color-white; @color-blue);
|
||||
}
|
||||
|
||||
.btn-inv-outline {
|
||||
.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-facebook {
|
||||
.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;
|
||||
|
||||
&:focus, &:hover {
|
||||
color: darken(@text-dark, 15%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
|
||||
@media (min-width: (@screen-sm)) {
|
||||
.sm:btn-lg {
|
||||
.btn-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
font-size: @font-size-xs;
|
||||
}
|
||||
|
||||
.btn-wide {
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
.btn-pad {
|
||||
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;
|
||||
}
|
||||
|
||||
&: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-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);
|
||||
}
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
.dropdown-menu {
|
||||
.absolute;
|
||||
.pin-r;
|
||||
.mt(px);
|
||||
.bg-light;
|
||||
.rounded;
|
||||
.z50;
|
||||
.mask;
|
||||
.box-shadow;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -1,215 +0,0 @@
|
||||
@form-control-radius: @border-radius-1;
|
||||
@form-control-border: @border-default-color;
|
||||
|
||||
.form-group {
|
||||
}
|
||||
|
||||
.form-label {
|
||||
.block;
|
||||
.text-sm;
|
||||
.text-regular;
|
||||
.mb(2);
|
||||
}
|
||||
|
||||
.form-control-file {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
.btn;
|
||||
.btn-xs;
|
||||
.btn-secondary;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
.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;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-borderless {
|
||||
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
|
||||
}
|
||||
|
||||
.help-block {
|
||||
.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-control-feedback {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.stacked-form {
|
||||
}
|
||||
|
||||
.stacked-form-group {
|
||||
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-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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.inset-form-group {
|
||||
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;
|
||||
}
|
||||
|
||||
.inset-form-control {
|
||||
position: relative;
|
||||
padding-left: 2.75em;
|
||||
&:focus {
|
||||
.z10;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-pad {
|
||||
padding: 1em 1em;
|
||||
|
||||
&.inset-form-control {
|
||||
padding-left: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.inset-form-icon-pad {
|
||||
width: 1.4em;
|
||||
left: ~"calc(1px + 1em)";
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,18 +0,0 @@
|
||||
.hr {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hr-brand {
|
||||
border: none;
|
||||
background-color: @color-brand-primary;
|
||||
}
|
||||
|
||||
.hr-thick {
|
||||
height: .375rem;
|
||||
}
|
||||
|
||||
.hr-short {
|
||||
width: 6rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
.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
|
||||
}
|
||||
|
||||
.icon-xs {
|
||||
height: .5em;
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.icon-xl {
|
||||
height: 4em;
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
.link {
|
||||
font-weight: @font-weight-regular;
|
||||
color: @text-dark;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: darken(@text-dark, 15%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:focus {
|
||||
.tab-focus;
|
||||
}
|
||||
}
|
||||
|
||||
.link-brand {
|
||||
color: @text-brand;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: darken(@text-brand, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.link-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.link-plain {
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.link-soft {
|
||||
.text-dark-soft;
|
||||
|
||||
&:hover, &:focus {
|
||||
.text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.link-softer {
|
||||
.text-dark-soft;
|
||||
|
||||
&:hover, &:focus {
|
||||
.text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.link-softest {
|
||||
.text-dark-softest;
|
||||
|
||||
&:hover, &:focus {
|
||||
.text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.link-light {
|
||||
color: @text-light;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: @text-light;
|
||||
}
|
||||
}
|
||||
|
||||
.link-light-soft {
|
||||
color: @text-light-soft;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: @text-light;
|
||||
}
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
.bullet-list {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -1,100 +0,0 @@
|
||||
.markdown {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 600;
|
||||
color: @text-dark-soft;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: @font-size-xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: @font-weight-regular;
|
||||
color: @text-dark-soft;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: @font-size-base;
|
||||
font-weight: @font-weight-medium;
|
||||
color: @text-dark-soft;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1.5em;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background-color: @bg-light-softer;
|
||||
padding: 1.5rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
blockquote > p {
|
||||
font-size: @font-size-base;
|
||||
margin-bottom: 0;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
blockquote p code {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 0 0 2em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc inside;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal inside;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: @font-size-base;
|
||||
line-height: 2;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
a {
|
||||
.link-brand;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
overflow: auto;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid @bg-light-softer;
|
||||
border-radius: 4px;
|
||||
max-width: 100%;
|
||||
background-color: @bg-light-softer;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
background-color: transparent;
|
||||
line-height: 1.8;
|
||||
word-break: normal;
|
||||
word-spacing: normal;
|
||||
white-space: pre;
|
||||
hyphens: none;
|
||||
direction: ltr;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: @bg-light-softer;
|
||||
padding: 0.6rem 0.5rem;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
.media-object {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.media-left {
|
||||
> .zondicon {
|
||||
vertical-align: sub; // Trial and error bullshit
|
||||
}
|
||||
}
|
||||
|
||||
.media-body {
|
||||
flex: 1;
|
||||
}
|
||||
@ -1,74 +0,0 @@
|
||||
@progress-bg: @color-gray-8;
|
||||
@progress-bar-color: #79bc70;
|
||||
@progress-border-radius: @border-radius-1;
|
||||
|
||||
.progress {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: @spacer-2;
|
||||
}
|
||||
|
||||
.progress[value] {
|
||||
// Set overall background
|
||||
background-color: @progress-bg;
|
||||
// Remove Firefox and Opera border
|
||||
border: 0;
|
||||
// Reset the default appearance
|
||||
appearance: none;
|
||||
// Set overall border radius
|
||||
border-radius: @progress-border-radius;
|
||||
}
|
||||
|
||||
// Filled-in portion of the bar
|
||||
.progress[value]::-ms-fill {
|
||||
background-color: @progress-bar-color;
|
||||
// Remove right-hand border of value bar from IE10+/Edge
|
||||
border: 0;
|
||||
}
|
||||
.progress[value]::-moz-progress-bar {
|
||||
background-color: @progress-bar-color;
|
||||
border-top-left-radius: @progress-border-radius;
|
||||
border-bottom-left-radius: @progress-border-radius;
|
||||
}
|
||||
.progress[value]::-webkit-progress-value {
|
||||
background-color: @progress-bar-color;
|
||||
border-top-left-radius: @progress-border-radius;
|
||||
border-bottom-left-radius: @progress-border-radius;
|
||||
}
|
||||
// Tweaks for full progress bar
|
||||
.progress[value="100"]::-moz-progress-bar {
|
||||
border-top-right-radius: @progress-border-radius;
|
||||
border-bottom-right-radius: @progress-border-radius;
|
||||
}
|
||||
.progress[value="100"]::-webkit-progress-value {
|
||||
border-top-right-radius: @progress-border-radius;
|
||||
border-bottom-right-radius: @progress-border-radius;
|
||||
}
|
||||
|
||||
// Unfilled portion of the bar
|
||||
.progress[value]::-webkit-progress-bar {
|
||||
background-color: @progress-bg;
|
||||
border-radius: @progress-border-radius;
|
||||
}
|
||||
|
||||
// Absurd-but-syntactically-valid selector to make these styles Firefox-only
|
||||
base::-moz-progress-bar,
|
||||
.progress[value] {
|
||||
background-color: @progress-bg;
|
||||
border-radius: @progress-border-radius;
|
||||
}
|
||||
|
||||
.progress-variant (@color) {
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: @color;
|
||||
}
|
||||
|
||||
&[value]::-moz-progress-bar {
|
||||
background-color: @color;
|
||||
}
|
||||
|
||||
// IE10+, Microsoft Edge
|
||||
&[value]::-ms-fill {
|
||||
background-color: @color;
|
||||
}
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
@import "glitter/animations";
|
||||
@import "glitter/transitions";
|
||||
@ -1,4 +0,0 @@
|
||||
@keyframes spin-around {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(359deg); }
|
||||
}
|
||||
@ -1,122 +0,0 @@
|
||||
.slide-down-enter-active, .slide-down-leave-active {
|
||||
transition: all .5s;
|
||||
}
|
||||
.slide-down-enter, .slide-down-leave-active {
|
||||
transform: translateY(-1.5em);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.transition-stretch-in-out {
|
||||
-webkit-font-smoothing: subpixel-antialiased; // Prevent text rendering jank on Safari
|
||||
&.v-enter-active {
|
||||
transition: all .3s cubic-bezier(0.23, 1.85, 0.32, 1);
|
||||
// transition: all .15s; Plain curve
|
||||
// transition: all .25s cubic-bezier(0.68, -0.55, 0.265, 1.55); Cool bouncy curve?
|
||||
}
|
||||
&.v-leave-active {
|
||||
transition: all .15s;
|
||||
// transition: all .15s; Plain curve
|
||||
// transition: all .25s cubic-bezier(0.68, -0.55, 0.265, 1.55); Cool bouncy curve?
|
||||
}
|
||||
&.v-enter, &.v-leave-to {
|
||||
transform: scale(.7);
|
||||
opacity: 0;
|
||||
}
|
||||
&.v-leave, &.v-enter-to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.transition-stretch-in {
|
||||
-webkit-font-smoothing: subpixel-antialiased; // Prevent text rendering jank on Safari
|
||||
&.v-enter-active {
|
||||
transition: all .3s cubic-bezier(0.23, 1.85, 0.32, 1);
|
||||
// transition: all .15s; Plain curve
|
||||
// transition: all .25s cubic-bezier(0.68, -0.55, 0.265, 1.55); Cool bouncy curve?
|
||||
}
|
||||
&.v-enter {
|
||||
transform: scale(.7);
|
||||
opacity: 0;
|
||||
}
|
||||
&.v-enter-to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.transition-fade-in {
|
||||
&.v-enter-active {
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
||||
&.v-enter-to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.v-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.transition-fade-out {
|
||||
&.v-leave-active {
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
||||
&.v-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.v-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.transition-fade {
|
||||
.transition-fade-in;
|
||||
.transition-fade-out;
|
||||
}
|
||||
|
||||
.transition-fade-out-slow {
|
||||
&.v-leave-active {
|
||||
transition: opacity 1s ease-in;
|
||||
}
|
||||
|
||||
&.v-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.v-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.transition-to-bottom-left {
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.fade-grow-enter, .fade-grow-leave-active {
|
||||
transform: scale(.7);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-grow-enter-active, .fade-grow-leave {
|
||||
transition: transform .4s cubic-bezier(.075,.82,.165,1), opacity .35s cubic-bezier(.075,.82,.165,1);
|
||||
}
|
||||
|
||||
.fade-enter, .fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave {
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
||||
.fade-slow-enter, .fade-slow-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-slow-enter-active, .fade-slow-leave {
|
||||
transition: opacity .5s;
|
||||
}
|
||||
@ -1,10 +1,10 @@
|
||||
// For local dev
|
||||
@import (less, optional) "../../node_modules/normalize.css/normalize.css";
|
||||
@import (less, optional) "../../node_modules/suitcss-base/lib/base.css";
|
||||
@import (less, optional) "../node_modules/normalize.css/normalize.css";
|
||||
@import (less, optional) "../node_modules/suitcss-base/lib/base.css";
|
||||
|
||||
// For real projects
|
||||
@import (less, optional) "../../../../node_modules/normalize.css/normalize.css";
|
||||
@import (less, optional) "../../../../node_modules/suitcss-base/lib/base.css";
|
||||
@import (less, optional) "../../../node_modules/normalize.css/normalize.css";
|
||||
@import (less, optional) "../../../node_modules/suitcss-base/lib/base.css";
|
||||
|
||||
@-moz-viewport { width: device-width; }
|
||||
@-ms-viewport { width: device-width; }
|
||||
@ -1,7 +1,11 @@
|
||||
@import "colors";
|
||||
|
||||
@import "utilities/backgrounds";
|
||||
@import "utilities/borders";
|
||||
@import "utilities/display";
|
||||
@import "utilities/flex";
|
||||
@import "utilities/grid";
|
||||
@import "utilities/images";
|
||||
@import "utilities/layout";
|
||||
@import "utilities/misc";
|
||||
@import "utilities/position";
|
||||
|
||||
@ -1,3 +1,17 @@
|
||||
@bg-light-hue: @hue-slate;
|
||||
@bg-light: hsl(@bg-light-hue, 0%, 100%);
|
||||
@bg-light-soft: hsl(@bg-light-hue, 20%, 98%);
|
||||
@bg-light-softer: hsl(@bg-light-hue, 20%, 96%);
|
||||
|
||||
@bg-dark-hue: @hue-slate;
|
||||
@bg-dark: hsl(@bg-dark-hue, 14%, 33%);
|
||||
@bg-dark-soft: hsl(@bg-dark-hue, 14%, 42%);
|
||||
@bg-dark-softer: hsl(@bg-dark-hue, 14%, 52%);
|
||||
|
||||
@bg-primary: @color-brand-primary;
|
||||
|
||||
@bg-highlight: hsl(215, 99%, 63%);
|
||||
|
||||
.bg-light { background-color: @bg-light; }
|
||||
.bg-light-soft { background-color: @bg-light-soft; }
|
||||
.bg-light-softer { background-color: @bg-light-softer; }
|
||||
|
||||
@ -1,3 +1,17 @@
|
||||
@border-dark-hue: @hue-slate;
|
||||
@border-dark: hsl(@border-dark-hue, 25%, 82%);
|
||||
@border-dark-soft: hsl(@border-dark-hue, 25%, 90%);
|
||||
@border-dark-softer: hsl(@border-dark-hue, 25%, 96%);
|
||||
|
||||
@border-light: @color-white;
|
||||
@border-light-soft: fade(@color-white, 60%);
|
||||
@border-light-softer: fade(@color-white, 35%);
|
||||
|
||||
@border-danger: @color-danger;
|
||||
@border-danger-soft: fade(@color-danger, 50%);
|
||||
|
||||
@border-brand: @color-brand-primary;
|
||||
|
||||
@border-default-color: @border-dark-soft;
|
||||
|
||||
@border-radius-1: .25rem;
|
||||
|
||||
@ -17,6 +17,20 @@
|
||||
@font-weight-medium: 600;
|
||||
@font-weight-bold: 700;
|
||||
|
||||
@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-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;
|
||||
|
||||
.text-xs { font-size: @font-size-xs; }
|
||||
.text-sm { font-size: @font-size-sm; }
|
||||
.text-base { font-size: @font-size-base; }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user