add scss
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
[Dolphin]
|
||||
Timestamp=2018,12,18,15,21,25
|
||||
Version=4
|
||||
ViewMode=2
|
||||
|
||||
[Settings]
|
||||
HiddenFilesShown=true
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+70
-155
@@ -1,43 +1,37 @@
|
||||
/* Manually forked from Normalize.css */
|
||||
/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/**
|
||||
* 1. Change the default font family in all browsers (opinionated).
|
||||
* 2. Correct the line height in all browsers.
|
||||
* 3. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 3 */
|
||||
-webkit-text-size-adjust: 100%; /* 3 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -48,86 +42,60 @@ section {
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8 (removed).
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers. (removed)
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
ul{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the outline on focused links when they are also active or hovered
|
||||
* in all browsers (opinionated).
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Modify default styling of address.
|
||||
*/
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed)
|
||||
*/
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -146,31 +114,17 @@ strong {
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: $mono-font-family; /* 1 (changed) */
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-. (Removed)
|
||||
*/
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
font-weight: 400; /* (added) */
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -198,44 +152,18 @@ sup {
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
@@ -244,9 +172,9 @@ input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 (changed) */
|
||||
font-size: inherit; /* 1 (changed) */
|
||||
line-height: inherit; /* 1 (changed) */
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
@@ -271,16 +199,14 @@ select { /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -296,18 +222,22 @@ button::-moz-focus-inner,
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule (removed).
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the border, margin, and padding in all browsers (opinionated) (changed).
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -318,7 +248,8 @@ fieldset {
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
@@ -327,17 +258,15 @@ legend {
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
@@ -345,13 +274,14 @@ textarea {
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
@@ -375,10 +305,9 @@ textarea {
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
@@ -397,12 +326,10 @@ textarea {
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details, /* 1 */
|
||||
menu {
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -412,33 +339,21 @@ menu {
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Scripting
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE.
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 444 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Regular → Executable
+4354
File diff suppressed because it is too large
Load Diff
Regular → Executable
+3
-2
@@ -24,7 +24,7 @@
|
||||
"url": "https://github.com/picturepan2/spectre/issues"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gulp": "latest",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "latest",
|
||||
"gulp-clean-css": "^3.9.4",
|
||||
"gulp-csscomb": "^3.0.8",
|
||||
@@ -40,6 +40,7 @@
|
||||
"Explorer >= 10"
|
||||
],
|
||||
"dependencies": {
|
||||
"gulp-sourcemaps": "^2.6.4"
|
||||
"gulp-sourcemaps": "^2.6.4",
|
||||
"normalize.css": "^8.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
// Font Family
|
||||
$font-family-default: "Raleway", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
|
||||
$font-family-header: "Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
|
||||
$font-family-mono: "Inconsolata", monospace;
|
||||
$font-family-serif: "Georgia", "Times", "Times New Roman", serif;
|
||||
// @font-face
|
||||
|
||||
$Regular: "Montserrat-Regular";
|
||||
$family: "montserrat";
|
||||
$file-regular: "Montserrat-Regular";
|
||||
$category: "sans-serif";
|
||||
|
||||
@mixin font-face($Regular, $file-regular, $family, $category:"") {
|
||||
$filepath: "../fonts/" + $family + "/" + $file-regular;
|
||||
@font-face {
|
||||
font-family: "#{$Regular}";
|
||||
src: url($filepath + ".eot");
|
||||
src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
|
||||
url($filepath + ".woff") format('woff'),
|
||||
url($filepath + ".ttf") format('truetype'),
|
||||
url($filepath + ".svg#" + $Regular + "") format('svg');
|
||||
}
|
||||
|
||||
%#{$Regular} {
|
||||
font: {
|
||||
@if $category != "" {
|
||||
family: "#{$Regular}", #{$category};
|
||||
}
|
||||
@else {
|
||||
family: "#{$Regular}";
|
||||
weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@include font-face($Regular, $file-regular, $family, $category);//1
|
||||
@@ -1,18 +0,0 @@
|
||||
// Variables and mixins
|
||||
@import "spectre/variables";
|
||||
@import "spectre/mixins";
|
||||
|
||||
/*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */
|
||||
// Experimentals
|
||||
@import "spectre/autocomplete";
|
||||
@import "spectre/calendars";
|
||||
@import "spectre/carousels";
|
||||
@import "spectre/comparison-sliders";
|
||||
@import "spectre/filters";
|
||||
@import "spectre/meters";
|
||||
@import "spectre/off-canvas";
|
||||
@import "spectre/parallax";
|
||||
@import "spectre/progress";
|
||||
@import "spectre/sliders";
|
||||
@import "spectre/timelines";
|
||||
@import "spectre/viewer-360";
|
||||
@@ -1,10 +0,0 @@
|
||||
// Variables and mixins
|
||||
@import "spectre/variables";
|
||||
@import "spectre/mixins";
|
||||
|
||||
/*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */
|
||||
// Icons
|
||||
@import "spectre/icons/icons-core";
|
||||
@import "spectre/icons/icons-navigation";
|
||||
@import "spectre/icons/icons-action";
|
||||
@import "spectre/icons/icons-object";
|
||||
@@ -1,51 +0,0 @@
|
||||
// Variables and mixins
|
||||
@import "spectre/variables";
|
||||
@import "spectre/mixins";
|
||||
|
||||
/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
|
||||
// Reset and dependencies
|
||||
@import "spectre/normalize";
|
||||
@import "spectre/base";
|
||||
|
||||
// Elements
|
||||
@import "spectre/typography";
|
||||
@import "spectre/asian";
|
||||
@import "spectre/tables";
|
||||
@import "spectre/buttons";
|
||||
@import "spectre/forms";
|
||||
@import "spectre/labels";
|
||||
@import "spectre/codes";
|
||||
@import "spectre/media";
|
||||
|
||||
// Layout
|
||||
@import "spectre/layout";
|
||||
@import "spectre/navbar";
|
||||
|
||||
// Components
|
||||
@import "spectre/accordions";
|
||||
@import "spectre/avatars";
|
||||
@import "spectre/badges";
|
||||
@import "spectre/breadcrumbs";
|
||||
@import "spectre/bars";
|
||||
@import "spectre/cards";
|
||||
@import "spectre/chips";
|
||||
@import "spectre/dropdowns";
|
||||
@import "spectre/empty";
|
||||
@import "spectre/menus";
|
||||
@import "spectre/modals";
|
||||
@import "spectre/navs";
|
||||
@import "spectre/pagination";
|
||||
@import "spectre/panels";
|
||||
@import "spectre/popovers";
|
||||
@import "spectre/steps";
|
||||
@import "spectre/tabs";
|
||||
@import "spectre/tiles";
|
||||
@import "spectre/toasts";
|
||||
@import "spectre/tooltips";
|
||||
|
||||
// Utility classes
|
||||
@import "spectre/animations";
|
||||
@import "spectre/utilities";
|
||||
|
||||
// Extras
|
||||
@import "theme/extensions";
|
||||
@@ -1,38 +0,0 @@
|
||||
// Accordions
|
||||
.accordion {
|
||||
input:checked ~,
|
||||
&[open] {
|
||||
& .accordion-header {
|
||||
.icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
& .accordion-body {
|
||||
max-height: 50rem;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
display: block;
|
||||
padding: $unit-1 $unit-2;
|
||||
|
||||
.icon {
|
||||
transition: transform .25s;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
margin-bottom: $layout-spacing;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height .25s;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove default details marker in Webkit
|
||||
summary.accordion-header {
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
// Animations
|
||||
@keyframes loading {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-$unit-8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
// Optimized for East Asian CJK
|
||||
html:lang(zh),
|
||||
html:lang(zh-Hans),
|
||||
.lang-zh,
|
||||
.lang-zh-hans {
|
||||
font-family: $cjk-zh-hans-font-family;
|
||||
}
|
||||
|
||||
html:lang(zh-Hant),
|
||||
.lang-zh-hant {
|
||||
font-family: $cjk-zh-hant-font-family;
|
||||
}
|
||||
|
||||
html:lang(ja),
|
||||
.lang-ja {
|
||||
font-family: $cjk-jp-font-family;
|
||||
}
|
||||
|
||||
html:lang(ko),
|
||||
.lang-ko {
|
||||
font-family: $cjk-ko-font-family;
|
||||
}
|
||||
|
||||
:lang(zh),
|
||||
:lang(ja),
|
||||
.lang-cjk {
|
||||
ins,
|
||||
u {
|
||||
border-bottom: $border-width solid;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
del + del,
|
||||
del + s,
|
||||
ins + ins,
|
||||
ins + u,
|
||||
s + del,
|
||||
s + s,
|
||||
u + ins,
|
||||
u + u {
|
||||
margin-left: .125em;
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
// Autocomplete
|
||||
.form-autocomplete {
|
||||
position: relative;
|
||||
|
||||
.form-autocomplete-input {
|
||||
align-content: flex-start;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
min-height: $unit-8;
|
||||
padding: $unit-h;
|
||||
|
||||
&.is-focused {
|
||||
@include control-shadow();
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
display: inline-block;
|
||||
flex: 1 0 auto;
|
||||
height: $unit-6;
|
||||
line-height: $unit-4;
|
||||
margin: $unit-h;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.autocomplete-oneline {
|
||||
.form-autocomplete-input {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.chip {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
// Avatars
|
||||
.avatar {
|
||||
@include avatar-base();
|
||||
background: $primary-color;
|
||||
border-radius: 50%;
|
||||
color: rgba($light-color, .85);
|
||||
display: inline-block;
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
|
||||
&.avatar-xs {
|
||||
@include avatar-base($unit-4);
|
||||
}
|
||||
&.avatar-sm {
|
||||
@include avatar-base($unit-6);
|
||||
}
|
||||
&.avatar-lg {
|
||||
@include avatar-base($unit-12);
|
||||
}
|
||||
&.avatar-xl {
|
||||
@include avatar-base($unit-16);
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
|
||||
.avatar-icon,
|
||||
.avatar-presence {
|
||||
background: $bg-color-light;
|
||||
bottom: 14.64%;
|
||||
height: 50%;
|
||||
padding: $border-width-lg;
|
||||
position: absolute;
|
||||
right: 14.64%;
|
||||
transform: translate(50%, 50%);
|
||||
width: 50%;
|
||||
z-index: $zindex-0 + 1;
|
||||
}
|
||||
|
||||
.avatar-presence {
|
||||
background: $gray-color;
|
||||
box-shadow: 0 0 0 $border-width-lg $light-color;
|
||||
border-radius: 50%;
|
||||
height: .5em;
|
||||
width: .5em;
|
||||
|
||||
&.online {
|
||||
background: $success-color;
|
||||
}
|
||||
|
||||
&.busy {
|
||||
background: $error-color;
|
||||
}
|
||||
|
||||
&.away {
|
||||
background: $warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-initial]::before {
|
||||
color: currentColor;
|
||||
content: attr(data-initial);
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
// Badges
|
||||
.badge {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
&[data-badge],
|
||||
&:not([data-badge]) {
|
||||
&::after {
|
||||
background: $primary-color;
|
||||
background-clip: padding-box;
|
||||
border-radius: .5rem;
|
||||
box-shadow: 0 0 0 .1rem $bg-color-light;
|
||||
color: $light-color;
|
||||
content: attr(data-badge);
|
||||
display: inline-block;
|
||||
transform: translate(-.05rem, -.5rem);
|
||||
}
|
||||
}
|
||||
&[data-badge] {
|
||||
&::after {
|
||||
font-size: $font-size-sm;
|
||||
height: .9rem;
|
||||
line-height: 1;
|
||||
min-width: .9rem;
|
||||
padding: .1rem .2rem;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
&:not([data-badge]),
|
||||
&[data-badge=""] {
|
||||
&::after {
|
||||
height: 6px;
|
||||
min-width: 6px;
|
||||
padding: 0;
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
// Badges for Buttons
|
||||
&.btn {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Badges for Avatars
|
||||
&.avatar {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 14.64%;
|
||||
right: 14.64%;
|
||||
transform: translate(50%, -50%);
|
||||
z-index: $zindex-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
// Bars
|
||||
.bar {
|
||||
background: $bg-color-dark;
|
||||
border-radius: $border-radius;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
height: $unit-4;
|
||||
width: 100%;
|
||||
|
||||
&.bar-sm {
|
||||
height: $unit-1;
|
||||
}
|
||||
|
||||
// TODO: attr() support
|
||||
.bar-item {
|
||||
background: $primary-color;
|
||||
color: $light-color;
|
||||
display: block;
|
||||
font-size: $font-size-sm;
|
||||
flex-shrink: 0;
|
||||
line-height: $unit-4;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 0;
|
||||
|
||||
&:first-child {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-top-left-radius: $border-radius;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Slider bar
|
||||
.bar-slider {
|
||||
height: $border-width-lg;
|
||||
margin: $layout-spacing 0;
|
||||
position: relative;
|
||||
|
||||
.bar-item {
|
||||
left: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
&:not(:last-child):first-child {
|
||||
background: $bg-color-dark;
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-slider-btn {
|
||||
background: $primary-color;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
height: $unit-3;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: $unit-3;
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 0 0 .1rem $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
// Base
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: $html-font-size;
|
||||
line-height: $html-line-height;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
background: $body-bg;
|
||||
color: $body-font-color;
|
||||
font-family: $body-font-family;
|
||||
font-size: $font-size;
|
||||
overflow-x: hidden;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus {
|
||||
@include control-shadow();
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active {
|
||||
color: $link-color-dark;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $link-color-light;
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
// Breadcrumbs
|
||||
.breadcrumb {
|
||||
list-style: none;
|
||||
margin: $unit-1 0;
|
||||
padding: $unit-1 0;
|
||||
|
||||
.breadcrumb-item {
|
||||
color: $gray-color-dark;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: $unit-1 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $unit-1;
|
||||
|
||||
a {
|
||||
color: $gray-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
&::before {
|
||||
color: $gray-color-dark;
|
||||
content: "/";
|
||||
padding-right: $unit-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,193 +0,0 @@
|
||||
// Buttons
|
||||
.btn {
|
||||
appearance: none;
|
||||
background: $bg-color-light;
|
||||
border: $border-width solid $primary-color;
|
||||
border-radius: $border-radius;
|
||||
color: $primary-color;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: $font-size;
|
||||
height: $control-size;
|
||||
line-height: $line-height;
|
||||
outline: none;
|
||||
padding: $control-padding-y $control-padding-x;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
&:focus {
|
||||
@include control-shadow();
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $secondary-color;
|
||||
border-color: $primary-color-dark;
|
||||
text-decoration: none;
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
background: $primary-color-dark;
|
||||
border-color: darken($primary-color-dark, 5%);
|
||||
color: $light-color;
|
||||
text-decoration: none;
|
||||
&.loading {
|
||||
&::after {
|
||||
border-bottom-color: $light-color;
|
||||
border-left-color: $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[disabled],
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Button Primary
|
||||
&.btn-primary {
|
||||
background: $primary-color;
|
||||
border-color: $primary-color-dark;
|
||||
color: $light-color;
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: darken($primary-color-dark, 2%);
|
||||
border-color: darken($primary-color-dark, 5%);
|
||||
color: $light-color;
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
background: darken($primary-color-dark, 4%);
|
||||
border-color: darken($primary-color-dark, 7%);
|
||||
color: $light-color;
|
||||
}
|
||||
&.loading {
|
||||
&::after {
|
||||
border-bottom-color: $light-color;
|
||||
border-left-color: $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button Colors
|
||||
&.btn-success {
|
||||
@include button-variant($success-color);
|
||||
}
|
||||
|
||||
&.btn-error {
|
||||
@include button-variant($error-color);
|
||||
}
|
||||
|
||||
// Button Link
|
||||
&.btn-link {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: $link-color;
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active {
|
||||
color: $link-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Button Sizes
|
||||
&.btn-sm {
|
||||
font-size: $font-size-sm;
|
||||
height: $control-size-sm;
|
||||
padding: $control-padding-y-sm $control-padding-x-sm;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
font-size: $font-size-lg;
|
||||
height: $control-size-lg;
|
||||
padding: $control-padding-y-lg $control-padding-x-lg;
|
||||
}
|
||||
|
||||
// Button Block
|
||||
&.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Button Action
|
||||
&.btn-action {
|
||||
width: $control-size;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
&.btn-sm {
|
||||
width: $control-size-sm;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
width: $control-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Button Clear
|
||||
&.btn-clear {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: currentColor;
|
||||
height: $unit-5;
|
||||
line-height: $unit-4;
|
||||
margin-left: $unit-1;
|
||||
margin-right: -2px;
|
||||
opacity: 1;
|
||||
padding: $unit-h;
|
||||
text-decoration: none;
|
||||
width: $unit-5;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: rgba($bg-color, .5);
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "\2715";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button groups
|
||||
.btn-group {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.btn {
|
||||
flex: 1 0 auto;
|
||||
&:first-child:not(:last-child) {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
margin-left: -$border-width;
|
||||
}
|
||||
&:last-child:not(:first-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
margin-left: -$border-width;
|
||||
}
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active {
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-group-block {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,222 +0,0 @@
|
||||
// Calendars
|
||||
.calendar {
|
||||
border: $border-width solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
display: block;
|
||||
min-width: 280px;
|
||||
|
||||
.calendar-nav {
|
||||
align-items: center;
|
||||
background: $bg-color;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
display: flex;
|
||||
font-size: $font-size-lg;
|
||||
padding: $layout-spacing;
|
||||
}
|
||||
|
||||
.calendar-header,
|
||||
.calendar-body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: $layout-spacing 0;
|
||||
|
||||
.calendar-date {
|
||||
flex: 0 0 14.28%; // 7 calendar-items each row
|
||||
max-width: 14.28%;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
background: $bg-color;
|
||||
border-bottom: $border-width solid $border-color;
|
||||
color: $gray-color;
|
||||
font-size: $font-size-sm;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar-body {
|
||||
color: $gray-color-dark;
|
||||
}
|
||||
|
||||
.calendar-date {
|
||||
border: 0;
|
||||
padding: $unit-1;
|
||||
|
||||
.date-item {
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: $border-width solid transparent;
|
||||
border-radius: 50%;
|
||||
color: $gray-color-dark;
|
||||
cursor: pointer;
|
||||
font-size: $font-size-sm;
|
||||
height: $unit-7;
|
||||
line-height: $unit-5;
|
||||
outline: none;
|
||||
padding: $unit-h;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
width: $unit-7;
|
||||
|
||||
&.date-today {
|
||||
border-color: $secondary-color-dark;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include control-shadow();
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $secondary-color-light;
|
||||
border-color: $secondary-color-dark;
|
||||
color: $primary-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
background: $primary-color-dark;
|
||||
border-color: darken($primary-color-dark, 5%);
|
||||
color: $light-color;
|
||||
}
|
||||
|
||||
// Calendar badge support
|
||||
&.badge {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-item,
|
||||
.calendar-event {
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
opacity: .25;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.prev-month,
|
||||
&.next-month {
|
||||
.date-item,
|
||||
.calendar-event {
|
||||
opacity: .25;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-range {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
background: $secondary-color;
|
||||
content: "";
|
||||
height: $unit-7;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&.range-start {
|
||||
&::before {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
&.range-end {
|
||||
&::before {
|
||||
right: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.range-start,
|
||||
&.range-end {
|
||||
.date-item {
|
||||
background: $primary-color-dark;
|
||||
border-color: darken($primary-color-dark, 5%);
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
|
||||
.date-item {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Calendars size
|
||||
&.calendar-lg {
|
||||
.calendar-body {
|
||||
padding: 0;
|
||||
|
||||
.calendar-date {
|
||||
border-bottom: $border-width solid $border-color;
|
||||
border-right: $border-width solid $border-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 5.5rem;
|
||||
padding: 0;
|
||||
|
||||
&:nth-child(7n) {
|
||||
border-right: 0;
|
||||
}
|
||||
&:nth-last-child(-n+7) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-item {
|
||||
align-self: flex-end;
|
||||
height: $unit-7;
|
||||
margin-right: $layout-spacing-sm;
|
||||
margin-top: $layout-spacing-sm;
|
||||
}
|
||||
|
||||
.calendar-range {
|
||||
&::before {
|
||||
top: 19px;
|
||||
}
|
||||
&.range-start {
|
||||
&::before {
|
||||
left: auto;
|
||||
width: 19px;
|
||||
}
|
||||
}
|
||||
&.range-end {
|
||||
&::before {
|
||||
right: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-events {
|
||||
flex-grow: 1;
|
||||
line-height: 1;
|
||||
overflow-y: auto;
|
||||
padding: $layout-spacing-sm;
|
||||
}
|
||||
|
||||
.calendar-event {
|
||||
border-radius: $border-radius;
|
||||
font-size: $font-size-sm;
|
||||
display: block;
|
||||
margin: $unit-h auto;
|
||||
overflow: hidden;
|
||||
padding: 3px 4px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
// Cards
|
||||
.card {
|
||||
background: $bg-color-light;
|
||||
border: $border-width solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.card-header,
|
||||
.card-body,
|
||||
.card-footer {
|
||||
padding: $layout-spacing-lg;
|
||||
padding-bottom: 0;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: $layout-spacing-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
padding-top: $layout-spacing-lg;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
|
||||
img {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
img {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
// Carousels
|
||||
// The number of carousel images
|
||||
$carousel-number: 8;
|
||||
|
||||
%carousel-image-checked {
|
||||
animation: carousel-slidein .75s ease-in-out 1;
|
||||
opacity: 1;
|
||||
z-index: $zindex-1;
|
||||
}
|
||||
|
||||
%carousel-nav-checked {
|
||||
color: $gray-color-light;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
background: $bg-color;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
z-index: $zindex-0;
|
||||
|
||||
.carousel-container {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
animation: carousel-slideout 1s ease-in-out 1;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
.item-prev,
|
||||
.item-next {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-prev,
|
||||
.item-next {
|
||||
background: rgba($gray-color-light, .25);
|
||||
border-color: rgba($gray-color-light, .5);
|
||||
color: $gray-color-light;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transition: all .4s;
|
||||
transform: translateY(-50%);
|
||||
z-index: $zindex-1;
|
||||
}
|
||||
.item-prev {
|
||||
left: 1rem;
|
||||
}
|
||||
.item-next {
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-locator {
|
||||
@for $i from 1 through ($carousel-number) {
|
||||
&:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) {
|
||||
@extend %carousel-image-checked;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through ($carousel-number) {
|
||||
&:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) {
|
||||
@extend %carousel-nav-checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-nav {
|
||||
bottom: $layout-spacing;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
width: 10rem;
|
||||
z-index: $zindex-1;
|
||||
|
||||
.nav-item {
|
||||
color: rgba($gray-color-light, .5);
|
||||
display: block;
|
||||
flex: 1 0 auto;
|
||||
height: $unit-8;
|
||||
margin: $unit-1;
|
||||
max-width: 2.5rem;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
background: currentColor;
|
||||
content: "";
|
||||
display: block;
|
||||
height: $unit-h;
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes carousel-slidein {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes carousel-slideout {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
// Chips
|
||||
.chip {
|
||||
align-items: center;
|
||||
background: $bg-color-dark;
|
||||
border-radius: 5rem;
|
||||
display: inline-flex;
|
||||
font-size: 90%;
|
||||
height: $unit-6;
|
||||
line-height: $unit-4;
|
||||
margin: $unit-h;
|
||||
max-width: $control-width-sm;
|
||||
overflow: hidden;
|
||||
padding: $unit-1 $unit-2;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
||||
&.active {
|
||||
background: $primary-color;
|
||||
color: $light-color;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-left: -$unit-2;
|
||||
margin-right: $unit-1;
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
border-radius: 50%;
|
||||
transform: scale(.75);
|
||||
}
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
// Codes
|
||||
code {
|
||||
@include label-base();
|
||||
@include label-variant($code-color, lighten($code-color, 42.5%));
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.code {
|
||||
border-radius: $border-radius;
|
||||
color: $body-font-color;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
color: $gray-color;
|
||||
content: attr(data-lang);
|
||||
font-size: $font-size-sm;
|
||||
position: absolute;
|
||||
right: $layout-spacing;
|
||||
top: $unit-h;
|
||||
}
|
||||
|
||||
code {
|
||||
background: $bg-color;
|
||||
color: inherit;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,115 +0,0 @@
|
||||
// Image comparison slider
|
||||
// Credit: http://codepen.io/solipsistacp/pen/Gpmaq
|
||||
.comparison-slider {
|
||||
height: 50vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.comparison-before,
|
||||
.comparison-after {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: left center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.comparison-before {
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
.comparison-label {
|
||||
right: $unit-4;
|
||||
}
|
||||
}
|
||||
|
||||
.comparison-after {
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
z-index: 2;
|
||||
|
||||
&::before {
|
||||
background: transparent;
|
||||
content: "";
|
||||
cursor: default;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: $unit-4;
|
||||
top: 0;
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: currentColor;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 -5px, 0 5px;
|
||||
color: $light-color;
|
||||
content: "";
|
||||
height: 3px;
|
||||
position: absolute;
|
||||
right: $unit-2;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
.comparison-label {
|
||||
left: $unit-4;
|
||||
}
|
||||
}
|
||||
|
||||
.comparison-resizer {
|
||||
animation: first-run 1.5s 1 ease-in-out;
|
||||
cursor: ew-resize;
|
||||
height: $unit-4;
|
||||
left: 0;
|
||||
max-width: 100%;
|
||||
min-width: $unit-4;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
position: relative;
|
||||
resize: horizontal;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) scaleY(30);
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.comparison-label {
|
||||
background: rgba($dark-color, .5);
|
||||
bottom: $unit-4;
|
||||
color: $light-color;
|
||||
padding: $unit-1 $unit-2;
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes first-run {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
25% {
|
||||
width: $unit-12;
|
||||
}
|
||||
50% {
|
||||
width: $unit-4;
|
||||
}
|
||||
75% {
|
||||
width: $unit-6;
|
||||
}
|
||||
100% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
// Dropdown
|
||||
.dropdown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
.menu {
|
||||
animation: slide-down .15s ease 1;
|
||||
display: none;
|
||||
left: 0;
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
&.dropdown-right {
|
||||
.menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.active .menu,
|
||||
.dropdown-toggle:focus + .menu,
|
||||
.menu:hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Fix dropdown-toggle border radius in button groups
|
||||
.btn-group {
|
||||
.dropdown-toggle:nth-last-child(2) {
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
// Empty states (or Blank slates)
|
||||
.empty {
|
||||
background: $bg-color;
|
||||
border-radius: $border-radius;
|
||||
color: $gray-color-dark;
|
||||
text-align: center;
|
||||
padding: $unit-16 $unit-8;
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: $layout-spacing-lg;
|
||||
}
|
||||
|
||||
.empty-title,
|
||||
.empty-subtitle {
|
||||
margin: $layout-spacing auto;
|
||||
}
|
||||
|
||||
.empty-action {
|
||||
margin-top: $layout-spacing-lg;
|
||||
}
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
// Filters
|
||||
// The number of filter options
|
||||
$filter-number: 8 !default;
|
||||
|
||||
%filter-checked-nav {
|
||||
background: $primary-color;
|
||||
color: $light-color;
|
||||
}
|
||||
|
||||
%filter-checked-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter {
|
||||
.filter-nav {
|
||||
margin: $layout-spacing 0;
|
||||
}
|
||||
|
||||
.filter-body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-tag {
|
||||
@for $i from 0 through ($filter-number) {
|
||||
&#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] {
|
||||
@extend %filter-checked-nav;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through ($filter-number) {
|
||||
&#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) {
|
||||
@extend %filter-checked-body;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,555 +0,0 @@
|
||||
// Forms
|
||||
.form-group {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $layout-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin-bottom: $layout-spacing-lg;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: 500;
|
||||
margin-bottom: $layout-spacing-lg;
|
||||
}
|
||||
|
||||
// Form element: Label
|
||||
.form-label {
|
||||
display: block;
|
||||
line-height: $line-height;
|
||||
padding: $control-padding-y + $border-width 0;
|
||||
|
||||
&.label-sm {
|
||||
font-size: $font-size-sm;
|
||||
padding: $control-padding-y-sm + $border-width 0;
|
||||
}
|
||||
|
||||
&.label-lg {
|
||||
font-size: $font-size-lg;
|
||||
padding: $control-padding-y-lg + $border-width 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Input
|
||||
.form-input {
|
||||
appearance: none;
|
||||
background: $bg-color-light;
|
||||
background-image: none;
|
||||
border: $border-width solid $border-color-dark;
|
||||
border-radius: $border-radius;
|
||||
color: $body-font-color;
|
||||
display: block;
|
||||
font-size: $font-size;
|
||||
height: $control-size;
|
||||
line-height: $line-height;
|
||||
max-width: 100%;
|
||||
outline: none;
|
||||
padding: $control-padding-y $control-padding-x;
|
||||
position: relative;
|
||||
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
||||
width: 100%;
|
||||
&:focus {
|
||||
@include control-shadow();
|
||||
border-color: $primary-color;
|
||||
}
|
||||
&::placeholder {
|
||||
color: $gray-color;
|
||||
}
|
||||
|
||||
// Input sizes
|
||||
&.input-sm {
|
||||
font-size: $font-size-sm;
|
||||
height: $control-size-sm;
|
||||
padding: $control-padding-y-sm $control-padding-x-sm;
|
||||
}
|
||||
|
||||
&.input-lg {
|
||||
font-size: $font-size-lg;
|
||||
height: $control-size-lg;
|
||||
padding: $control-padding-y-lg $control-padding-x-lg;
|
||||
}
|
||||
|
||||
&.input-inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Input types
|
||||
&[type="file"] {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Textarea
|
||||
textarea.form-input {
|
||||
&,
|
||||
&.input-lg,
|
||||
&.input-sm {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Input hint
|
||||
.form-input-hint {
|
||||
color: $gray-color;
|
||||
font-size: $font-size-sm;
|
||||
margin-top: $unit-1;
|
||||
|
||||
.has-success &,
|
||||
.is-success + & {
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
.has-error &,
|
||||
.is-error + & {
|
||||
color: $error-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Select
|
||||
.form-select {
|
||||
appearance: none;
|
||||
border: $border-width solid $border-color-dark;
|
||||
border-radius: $border-radius;
|
||||
color: inherit;
|
||||
font-size: $font-size;
|
||||
height: $control-size;
|
||||
line-height: $line-height;
|
||||
outline: none;
|
||||
padding: $control-padding-y $control-padding-x;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
background: $bg-color-light;
|
||||
&:focus {
|
||||
@include control-shadow();
|
||||
border-color: $primary-color;
|
||||
}
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Select sizes
|
||||
&.select-sm {
|
||||
font-size: $font-size-sm;
|
||||
height: $control-size-sm;
|
||||
padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
|
||||
}
|
||||
|
||||
&.select-lg {
|
||||
font-size: $font-size-lg;
|
||||
height: $control-size-lg;
|
||||
padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
|
||||
}
|
||||
|
||||
// Multiple select
|
||||
&[size],
|
||||
&[multiple] {
|
||||
height: auto;
|
||||
padding: $control-padding-y $control-padding-x;
|
||||
|
||||
option {
|
||||
padding: $unit-h $unit-1;
|
||||
}
|
||||
}
|
||||
&:not([multiple]):not([size]) {
|
||||
background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
|
||||
padding-right: $control-icon-size + $control-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Form Icons
|
||||
.has-icon-left,
|
||||
.has-icon-right {
|
||||
position: relative;
|
||||
|
||||
.form-icon {
|
||||
height: $control-icon-size;
|
||||
margin: 0 $control-padding-y;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: $control-icon-size;
|
||||
z-index: $zindex-0 + 1;
|
||||
}
|
||||
}
|
||||
|
||||
.has-icon-left {
|
||||
.form-icon {
|
||||
left: $border-width;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding-left: $control-icon-size + $control-padding-y * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.has-icon-right {
|
||||
.form-icon {
|
||||
right: $border-width;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding-right: $control-icon-size + $control-padding-y * 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Checkbox and Radio
|
||||
.form-checkbox,
|
||||
.form-radio,
|
||||
.form-switch {
|
||||
display: block;
|
||||
line-height: $line-height;
|
||||
margin: ($control-size - $control-size-sm) / 2 0;
|
||||
min-height: 1.2rem;
|
||||
padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
&:focus + .form-icon {
|
||||
@include control-shadow();
|
||||
border-color: $primary-color;
|
||||
}
|
||||
&:checked + .form-icon {
|
||||
background: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-icon {
|
||||
border: $border-width solid $border-color-dark;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
||||
}
|
||||
|
||||
// Input checkbox, radio and switch sizes
|
||||
&.input-sm {
|
||||
font-size: $font-size-sm;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.input-lg {
|
||||
font-size: $font-size-lg;
|
||||
margin: ($control-size-lg - $control-size-sm) / 2 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-checkbox,
|
||||
.form-radio {
|
||||
.form-icon {
|
||||
background: $bg-color-light;
|
||||
height: $control-icon-size;
|
||||
left: 0;
|
||||
top: ($control-size-sm - $control-icon-size) / 2;
|
||||
width: $control-icon-size;
|
||||
}
|
||||
|
||||
input {
|
||||
&:active + .form-icon {
|
||||
background: $bg-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-checkbox {
|
||||
.form-icon {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked + .form-icon {
|
||||
&::before {
|
||||
background-clip: padding-box;
|
||||
border: $border-width-lg solid $light-color;
|
||||
border-left-width: 0;
|
||||
border-top-width: 0;
|
||||
content: "";
|
||||
height: 9px;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
margin-top: -6px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: rotate(45deg);
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
&:indeterminate + .form-icon {
|
||||
background: $primary-color;
|
||||
border-color: $primary-color;
|
||||
&::before {
|
||||
background: $bg-color-light;
|
||||
content: "";
|
||||
height: 2px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
margin-top: -1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-radio {
|
||||
.form-icon {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked + .form-icon {
|
||||
&::before {
|
||||
background: $bg-color-light;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
height: 6px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Switch
|
||||
.form-switch {
|
||||
padding-left: ($unit-8 + $control-padding-x);
|
||||
|
||||
.form-icon {
|
||||
background: $gray-color;
|
||||
background-clip: padding-box;
|
||||
border-radius: $unit-2 + $border-width;
|
||||
height: $unit-4 + $border-width * 2;
|
||||
left: 0;
|
||||
top: ($control-size-sm - $unit-4) / 2 - $border-width;
|
||||
width: $unit-8;
|
||||
&::before {
|
||||
background: $bg-color-light;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: block;
|
||||
height: $unit-4;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
|
||||
width: $unit-4;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked + .form-icon {
|
||||
&::before {
|
||||
left: 14px;
|
||||
}
|
||||
}
|
||||
&:active + .form-icon {
|
||||
&::before {
|
||||
background: $bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Input groups
|
||||
.input-group {
|
||||
display: flex;
|
||||
|
||||
.input-group-addon {
|
||||
background: $bg-color;
|
||||
border: $border-width solid $border-color-dark;
|
||||
border-radius: $border-radius;
|
||||
line-height: $line-height;
|
||||
padding: $control-padding-y $control-padding-x;
|
||||
white-space: nowrap;
|
||||
|
||||
&.addon-sm {
|
||||
font-size: $font-size-sm;
|
||||
padding: $control-padding-y-sm $control-padding-x-sm;
|
||||
}
|
||||
|
||||
&.addon-lg {
|
||||
font-size: $font-size-lg;
|
||||
padding: $control-padding-y-lg $control-padding-x-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.input-group-btn {
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select,
|
||||
.input-group-addon,
|
||||
.input-group-btn {
|
||||
&:first-child:not(:last-child) {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
margin-left: -$border-width;
|
||||
}
|
||||
&:last-child:not(:first-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
margin-left: -$border-width;
|
||||
}
|
||||
&:focus {
|
||||
z-index: $zindex-0 + 1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-select {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&.input-inline {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Form validation states
|
||||
.form-input,
|
||||
.form-select {
|
||||
.has-success &,
|
||||
&.is-success {
|
||||
background: lighten($success-color, 53%);
|
||||
border-color: $success-color;
|
||||
&:focus {
|
||||
@include control-shadow($success-color);
|
||||
}
|
||||
}
|
||||
|
||||
.has-error &,
|
||||
&.is-error {
|
||||
background: lighten($error-color, 53%);
|
||||
border-color: $error-color;
|
||||
&:focus {
|
||||
@include control-shadow($error-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-checkbox,
|
||||
.form-radio,
|
||||
.form-switch {
|
||||
.has-error &,
|
||||
&.is-error {
|
||||
.form-icon {
|
||||
border-color: $error-color;
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked + .form-icon {
|
||||
background: $error-color;
|
||||
border-color: $error-color;
|
||||
}
|
||||
|
||||
&:focus + .form-icon {
|
||||
@include control-shadow($error-color);
|
||||
border-color: $error-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
.has-error &,
|
||||
&.is-error {
|
||||
input {
|
||||
&:indeterminate + .form-icon {
|
||||
background: $error-color;
|
||||
border-color: $error-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// validation based on :placeholder-shown (Edge doesn't support it yet)
|
||||
.form-input {
|
||||
&:not(:placeholder-shown) {
|
||||
&:invalid {
|
||||
border-color: $error-color;
|
||||
&:focus {
|
||||
@include control-shadow($error-color);
|
||||
background: lighten($error-color, 53%);
|
||||
}
|
||||
|
||||
& + .form-input-hint {
|
||||
color: $error-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form disabled and readonly
|
||||
.form-input,
|
||||
.form-select {
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
background-color: $bg-color-dark;
|
||||
cursor: not-allowed;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
.form-input {
|
||||
&[readonly] {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
& + .form-icon {
|
||||
background: $bg-color-dark;
|
||||
cursor: not-allowed;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-switch {
|
||||
input {
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
& + .form-icon::before {
|
||||
background: $bg-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form horizontal
|
||||
.form-horizontal {
|
||||
padding: $layout-spacing 0;
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Form inline
|
||||
.form-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
// Hero
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 4rem;
|
||||
padding-top: 4rem;
|
||||
|
||||
&.hero-sm {
|
||||
padding-bottom: 2rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
&.hero-lg {
|
||||
padding-bottom: 8rem;
|
||||
padding-top: 8rem;
|
||||
}
|
||||
|
||||
.hero-body {
|
||||
padding: $layout-spacing;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
// CSS Icons
|
||||
@import "icons/icons-core";
|
||||
@import "icons/icons-navigation";
|
||||
@import "icons/icons-action";
|
||||
@import "icons/icons-object";
|
||||
@@ -1,34 +0,0 @@
|
||||
// Labels
|
||||
.label {
|
||||
@include label-base();
|
||||
@include label-variant(lighten($body-font-color, 5%), $bg-color-dark);
|
||||
display: inline-block;
|
||||
|
||||
// Label rounded
|
||||
&.label-rounded {
|
||||
border-radius: 5rem;
|
||||
padding-left: .4rem;
|
||||
padding-right: .4rem;
|
||||
}
|
||||
|
||||
// Label colors
|
||||
&.label-primary {
|
||||
@include label-variant($light-color, $primary-color);
|
||||
}
|
||||
|
||||
&.label-secondary {
|
||||
@include label-variant($primary-color, $secondary-color);
|
||||
}
|
||||
|
||||
&.label-success {
|
||||
@include label-variant($light-color, $success-color);
|
||||
}
|
||||
|
||||
&.label-warning {
|
||||
@include label-variant($light-color, $warning-color);
|
||||
}
|
||||
|
||||
&.label-error {
|
||||
@include label-variant($light-color, $error-color);
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user