commit
d41d80195b
@ -0,0 +1 @@
|
|||||||
|
node_modules
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
name: Cheese
|
||||||
|
version: 0.1
|
||||||
|
description: Cheese Theme
|
||||||
|
icon: heart
|
||||||
|
|
||||||
|
dependencies:
|
||||||
|
- { name: grav, version: '>=1.4.0-rc.1' }
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
extends@: default
|
||||||
|
child_type: item
|
||||||
|
|
||||||
|
rules:
|
||||||
|
slug:
|
||||||
|
pattern: "[a-z][a-z0-9_\-]+"
|
||||||
|
min: 2
|
||||||
|
max: 80
|
||||||
|
|
||||||
|
form:
|
||||||
|
fields:
|
||||||
|
tabs:
|
||||||
|
type: tabs
|
||||||
|
active: 1
|
||||||
|
|
||||||
|
fields:
|
||||||
|
advanced:
|
||||||
|
fields:
|
||||||
|
overrides:
|
||||||
|
fields:
|
||||||
|
header.child_type:
|
||||||
|
default: item
|
||||||
|
blog:
|
||||||
|
type: tab
|
||||||
|
title: Blog Config
|
||||||
|
|
||||||
|
fields:
|
||||||
|
|
||||||
|
content_title:
|
||||||
|
type: spacer
|
||||||
|
title: Content Definition
|
||||||
|
|
||||||
|
header.content.items:
|
||||||
|
type: textarea
|
||||||
|
yaml: true
|
||||||
|
label: Items
|
||||||
|
default: '@self.children'
|
||||||
|
validate:
|
||||||
|
type: yaml
|
||||||
|
|
||||||
|
header.content.limit:
|
||||||
|
type: text
|
||||||
|
label: Max Item Count
|
||||||
|
default: 5
|
||||||
|
validate:
|
||||||
|
required: true
|
||||||
|
type: int
|
||||||
|
min: 1
|
||||||
|
|
||||||
|
header.content.order.by:
|
||||||
|
type: select
|
||||||
|
label: Order By
|
||||||
|
default: date
|
||||||
|
options:
|
||||||
|
folder: Folder
|
||||||
|
title: Title
|
||||||
|
date: Date
|
||||||
|
default: Default
|
||||||
|
|
||||||
|
header.content.order.dir:
|
||||||
|
type: select
|
||||||
|
label: Order
|
||||||
|
default: desc
|
||||||
|
options:
|
||||||
|
asc: Ascending
|
||||||
|
desc: Descending
|
||||||
|
|
||||||
|
header.content.pagination:
|
||||||
|
type: toggle
|
||||||
|
label: Pagination
|
||||||
|
highlight: 1
|
||||||
|
default: 1
|
||||||
|
options:
|
||||||
|
1: PLUGIN_ADMIN.ENABLED
|
||||||
|
0: PLUGIN_ADMIN.DISABLED
|
||||||
|
validate:
|
||||||
|
type: bool
|
||||||
|
|
||||||
|
header.content.url_taxonomy_filters:
|
||||||
|
type: toggle
|
||||||
|
label: URL Taxonomy Filters
|
||||||
|
highlight: 1
|
||||||
|
default: 1
|
||||||
|
options:
|
||||||
|
1: PLUGIN_ADMIN.ENABLED
|
||||||
|
0: PLUGIN_ADMIN.DISABLED
|
||||||
|
validate:
|
||||||
|
type: bool
|
||||||
|
|
||||||
|
import@:
|
||||||
|
type: partials/blog-bits
|
||||||
|
context: blueprints://pages
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
extends@: default
|
||||||
|
|
||||||
|
form:
|
||||||
|
fields:
|
||||||
|
tabs:
|
||||||
|
|
||||||
|
fields:
|
||||||
|
blog:
|
||||||
|
type: tab
|
||||||
|
title: Blog Item
|
||||||
|
|
||||||
|
fields:
|
||||||
|
|
||||||
|
header_image:
|
||||||
|
type: section
|
||||||
|
title: Header Image
|
||||||
|
underline: true
|
||||||
|
|
||||||
|
header.header_image:
|
||||||
|
type: toggle
|
||||||
|
toggleable: true
|
||||||
|
label: Display Header Image
|
||||||
|
help: Enabled displaying of a header image
|
||||||
|
highlight: 1
|
||||||
|
options:
|
||||||
|
1: PLUGIN_ADMIN.ENABLED
|
||||||
|
0: PLUGIN_ADMIN.DISABLED
|
||||||
|
|
||||||
|
header.header_image_file:
|
||||||
|
type: text
|
||||||
|
toggleable: true
|
||||||
|
label: Image File
|
||||||
|
help: image filename that exists in the page folder. If not provided, will use the first image found.
|
||||||
|
placeholder: For example: myimage.jpg
|
||||||
|
|
||||||
|
header.header_image_width:
|
||||||
|
type: text
|
||||||
|
toggleable: true
|
||||||
|
label: Image Width
|
||||||
|
size: small
|
||||||
|
help: Header width in px
|
||||||
|
placeholder: Default is 900
|
||||||
|
validate:
|
||||||
|
type: int
|
||||||
|
min: 0
|
||||||
|
max: 5000
|
||||||
|
|
||||||
|
header.header_image_height:
|
||||||
|
type: text
|
||||||
|
toggleable: true
|
||||||
|
label: Image Height
|
||||||
|
size: small
|
||||||
|
help: Header height in px
|
||||||
|
placeholder: Default is 300
|
||||||
|
validate:
|
||||||
|
type: int
|
||||||
|
min: 0
|
||||||
|
max: 5000
|
||||||
|
|
||||||
|
|
||||||
|
summary:
|
||||||
|
type: section
|
||||||
|
title: Summary
|
||||||
|
underline: true
|
||||||
|
|
||||||
|
|
||||||
|
header.summary.enabled:
|
||||||
|
type: toggle
|
||||||
|
toggleable: true
|
||||||
|
label: Summary
|
||||||
|
highlight: 1
|
||||||
|
options:
|
||||||
|
1: PLUGIN_ADMIN.ENABLED
|
||||||
|
0: PLUGIN_ADMIN.DISABLED
|
||||||
|
|
||||||
|
header.summary.format:
|
||||||
|
type: select
|
||||||
|
toggleable: true
|
||||||
|
label: Format
|
||||||
|
classes: fancy
|
||||||
|
options:
|
||||||
|
'short': 'Use the first occurence of delimter or size'
|
||||||
|
'long': 'Summary delimiter will be ignored'
|
||||||
|
|
||||||
|
header.summary.size:
|
||||||
|
type: text
|
||||||
|
toggleable: true
|
||||||
|
label: Size
|
||||||
|
classes: large
|
||||||
|
placeholder: 300
|
||||||
|
validate:
|
||||||
|
type: int
|
||||||
|
min: 1
|
||||||
|
|
||||||
|
header.summary.delimiter:
|
||||||
|
type: text
|
||||||
|
toggleable: true
|
||||||
|
label: Summary delimiter
|
||||||
|
classes: large
|
||||||
|
placeholder: ===
|
||||||
|
|
||||||
|
import@:
|
||||||
|
type: partials/blog-bits
|
||||||
|
context: blueprints://pages
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
title: Features
|
||||||
|
'@extends': default
|
||||||
|
|
||||||
|
form:
|
||||||
|
fields:
|
||||||
|
tabs:
|
||||||
|
fields:
|
||||||
|
features:
|
||||||
|
type: tab
|
||||||
|
title: Features
|
||||||
|
fields:
|
||||||
|
header.features:
|
||||||
|
name: features
|
||||||
|
type: list
|
||||||
|
label: Features
|
||||||
|
|
||||||
|
fields:
|
||||||
|
.icon:
|
||||||
|
type: iconpicker
|
||||||
|
label: Icon
|
||||||
|
.header:
|
||||||
|
type: text
|
||||||
|
label: Header
|
||||||
|
.text:
|
||||||
|
type: text
|
||||||
|
label: Text
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
title: Hero
|
||||||
|
'@extends': default
|
||||||
|
|
||||||
|
form:
|
||||||
|
fields:
|
||||||
|
tabs:
|
||||||
|
fields:
|
||||||
|
buttons:
|
||||||
|
type: tab
|
||||||
|
title: Hero
|
||||||
|
fields:
|
||||||
|
header.hero_classes:
|
||||||
|
type: text
|
||||||
|
label: Hero Classes
|
||||||
|
markdown: true
|
||||||
|
description: 'There are several Hero class options that can be listed here (space separated):<br />`text-light`, `text-dark`, `title-h1h2`, `parallax`, `overlay-dark-gradient`, `overlay-light-gradient`, `overlay-dark`, `overlay-light`, `hero-fullscreen`, `hero-large`, `hero-medium`, `hero-small`, `hero-tiny`<br />Please consult the [Quark documentation](https://github.com/getgrav/grav-theme-quark#hero-options) for more details.'
|
||||||
|
header.hero_image:
|
||||||
|
type: filepicker
|
||||||
|
label: Hero Image
|
||||||
|
preview_images: true
|
||||||
|
description: 'If not specified, this defaults to the first image found in the page''s folder'
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
form:
|
||||||
|
fields:
|
||||||
|
hero_title:
|
||||||
|
type: spacer
|
||||||
|
title: Hero Section
|
||||||
|
|
||||||
|
header.hero_classes:
|
||||||
|
type: text
|
||||||
|
label: Hero Classes
|
||||||
|
markdown: true
|
||||||
|
description: 'There are several Hero class options that can be listed here (space separated):<br />`text-light`, `text-dark`, `title-h1h2`, `parallax`, `overlay-dark-gradient`, `overlay-light-gradient`, `overlay-dark`, `overlay-light`, `hero-fullscreen`, `hero-large`, `hero-medium`, `hero-small`, `hero-tiny`<br />Please consult the [Quark documentation](https://github.com/getgrav/grav-theme-quark#hero-options) for more details.'
|
||||||
|
|
||||||
|
header.hero_image:
|
||||||
|
type: filepicker
|
||||||
|
label: Hero Image
|
||||||
|
preview_images: true
|
||||||
|
description: 'If not specified, this defaults to the first image found in the page''s folder'
|
||||||
|
|
||||||
|
toggles_title:
|
||||||
|
type: spacer
|
||||||
|
title: Configuration
|
||||||
|
|
||||||
|
header.blog_url:
|
||||||
|
type: text
|
||||||
|
label: Blog Route
|
||||||
|
help: The route to this main blog page that contains this configuration
|
||||||
|
default: '/blog'
|
||||||
|
placeholder: '/blog'
|
||||||
|
size: medium
|
||||||
|
|
||||||
|
header.show_sidebar:
|
||||||
|
type: toggle
|
||||||
|
label: Show Sidebar
|
||||||
|
highlight: 1
|
||||||
|
default: 1
|
||||||
|
options:
|
||||||
|
1: PLUGIN_ADMIN.ENABLED
|
||||||
|
0: PLUGIN_ADMIN.DISABLED
|
||||||
|
validate:
|
||||||
|
type: bool
|
||||||
|
|
||||||
|
header.show_breadcrumbs:
|
||||||
|
type: toggle
|
||||||
|
label: Show Breadcrumbs
|
||||||
|
highlight: 1
|
||||||
|
default: 1
|
||||||
|
options:
|
||||||
|
1: PLUGIN_ADMIN.ENABLED
|
||||||
|
0: PLUGIN_ADMIN.DISABLED
|
||||||
|
validate:
|
||||||
|
type: bool
|
||||||
|
|
||||||
|
header.show_pagination:
|
||||||
|
type: toggle
|
||||||
|
label: Show Pagination
|
||||||
|
highlight: 1
|
||||||
|
default: 1
|
||||||
|
options:
|
||||||
|
1: PLUGIN_ADMIN.ENABLED
|
||||||
|
0: PLUGIN_ADMIN.DISABLED
|
||||||
|
validate:
|
||||||
|
type: bool
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
<?php
|
||||||
|
namespace Grav\Theme;
|
||||||
|
|
||||||
|
use Grav\Common\Grav;
|
||||||
|
use Grav\Common\Theme;
|
||||||
|
|
||||||
|
class Cheese extends Theme
|
||||||
|
{
|
||||||
|
public static function getSubscribedEvents()
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
'onThemeInitialized' => ['onThemeInitialized', 0],
|
||||||
|
'onTwigLoader' => ['onTwigLoader', 0],
|
||||||
|
'onTwigInitialized' => ['onTwigInitialized', 0],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
public function onThemeInitialized()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add images to twig template paths to allow inclusion of SVG files
|
||||||
|
public function onTwigLoader()
|
||||||
|
{
|
||||||
|
$theme_paths = Grav::instance()['locator']->findResources('theme://images');
|
||||||
|
foreach(array_reverse($theme_paths) as $images_path) {
|
||||||
|
$this->grav['twig']->addPath($images_path, 'images');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public function onTwigInitialized()
|
||||||
|
{
|
||||||
|
$twig = $this->grav['twig'];
|
||||||
|
|
||||||
|
$form_class_variables = [
|
||||||
|
// 'form_outer_classes' => 'form-horizontal',
|
||||||
|
'form_button_outer_classes' => 'button-wrapper',
|
||||||
|
'form_button_classes' => 'btn',
|
||||||
|
'form_errors_classes' => '',
|
||||||
|
'form_field_outer_classes' => 'form-group',
|
||||||
|
'form_field_outer_label_classes' => 'form-label-wrapper',
|
||||||
|
'form_field_label_classes' => 'form-label',
|
||||||
|
// 'form_field_outer_data_classes' => 'col-9',
|
||||||
|
'form_field_input_classes' => 'form-input',
|
||||||
|
'form_field_textarea_classes' => 'form-input',
|
||||||
|
'form_field_select_classes' => 'form-select',
|
||||||
|
'form_field_radio_classes' => 'form-radio',
|
||||||
|
'form_field_checkbox_classes' => 'form-checkbox',
|
||||||
|
];
|
||||||
|
|
||||||
|
$twig->twig_vars = array_merge($twig->twig_vars, $form_class_variables);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
enabled: true
|
||||||
|
grid-size: grid-lg
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,49 @@
|
|||||||
|
.bricklayer {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: start;
|
||||||
|
-webkit-align-items: flex-start;
|
||||||
|
-ms-flex-align: start;
|
||||||
|
align-items: flex-start;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-flex-wrap: wrap;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bricklayer-column-sizer {
|
||||||
|
width: 100%;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 640px) {
|
||||||
|
.bricklayer-column-sizer {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 980px) {
|
||||||
|
.bricklayer-column-sizer {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*@media screen and (min-width: 1200px) {*/
|
||||||
|
/*.bricklayer-column-sizer {*/
|
||||||
|
/*width: 33.33333%;*/
|
||||||
|
/*}*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
.bricklayer-column {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
-ms-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 444 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,39 @@
|
|||||||
|
var gulp = require('gulp');
|
||||||
|
var sass = require('gulp-sass');
|
||||||
|
var cleancss = require('gulp-clean-css');
|
||||||
|
var csscomb = require('gulp-csscomb');
|
||||||
|
var rename = require('gulp-rename');
|
||||||
|
var autoprefixer = require('gulp-autoprefixer');
|
||||||
|
var sourcemaps = require('gulp-sourcemaps');
|
||||||
|
|
||||||
|
// configure the paths
|
||||||
|
var watch_dir = './scss/**/*.scss';
|
||||||
|
var src_dir = './scss/*.scss';
|
||||||
|
var dest_dir = './css-compiled';
|
||||||
|
|
||||||
|
var paths = {
|
||||||
|
source: src_dir
|
||||||
|
};
|
||||||
|
|
||||||
|
gulp.task('watch', function() {
|
||||||
|
gulp.watch(watch_dir, ['build']);
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('build', function() {
|
||||||
|
gulp.src(paths.source)
|
||||||
|
.pipe(sourcemaps.init())
|
||||||
|
.pipe(sass({outputStyle: 'compact', precision: 10})
|
||||||
|
.on('error', sass.logError)
|
||||||
|
)
|
||||||
|
.pipe(sourcemaps.write())
|
||||||
|
.pipe(autoprefixer())
|
||||||
|
.pipe(gulp.dest(dest_dir))
|
||||||
|
.pipe(csscomb())
|
||||||
|
.pipe(cleancss())
|
||||||
|
.pipe(rename({
|
||||||
|
suffix: '.min'
|
||||||
|
}))
|
||||||
|
.pipe(gulp.dest(dest_dir));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('default', ['build']);
|
||||||
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 10 KiB |
@ -0,0 +1 @@
|
|||||||
|
!function t(e,n,r){function o(s,u){if(!n[s]){if(!e[s]){var l="function"==typeof require&&require;if(!u&&l)return l(s,!0);if(i)return i(s,!0);var a=new Error("Cannot find module '"+s+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[s]={exports:{}};e[s][0].call(p.exports,function(t){var n=e[s][1][t];return o(n?n:t)},p,p.exports,t,e,n,r)}return n[s].exports}for(var i="function"==typeof require&&require,s=0;s<r.length;s++)o(r[s]);return o}({1:[function(t,e,n){var r,o=this&&this.__extends||function(t,e){function n(){this.constructor=t}for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r]);t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)};!function(t){function e(t){return[].slice.call(t)}function n(t,e,n){if(window.CustomEvent)var r=new CustomEvent(e,{detail:n});else{var r=document.createEvent("CustomEvent");r.initCustomEvent(e,!0,!0,n)}return t.dispatchEvent(r)}var r={rulerClassName:"bricklayer-column-sizer",columnClassName:"bricklayer-column"},i=function(){function t(t){this.element=document.createElement("div"),this.element.className=t}return t.prototype.destroy=function(){this.element.parentNode.removeChild(this.element)},t}(),s=function(t){function e(){t.apply(this,arguments)}return o(e,t),e.prototype.getWidth=function(){this.element.setAttribute("style","\n display: block;\n visibility: hidden !important;\n top: -1000px !important;\n ");var t=this.element.offsetWidth;return this.element.removeAttribute("style"),t},e}(i),u=function(t){function e(){t.apply(this,arguments)}return o(e,t),e}(i),l=function(){function t(t,e){void 0===e&&(e=r),this.element=t,this.options=e,this.build(),this.buildResponsive()}return t.prototype.append=function(t){var n=this;if(Array.isArray(t))return void t.forEach(function(t){return n.append(t)});var r=this.findMinHeightColumn();this.elements=e(this.elements).concat([t]),this.applyPosition("append",r,t)},t.prototype.prepend=function(t){var n=this;if(Array.isArray(t))return void t.forEach(function(t){return n.prepend(t)});var r=this.findMinHeightColumn();this.elements=[t].concat(e(this.elements)),this.applyPosition("prepend",r,t)},t.prototype.on=function(t,e){return this.element.addEventListener("bricklayer."+t,e),this},t.prototype.redraw=function(){var t=this.columnCount;this.checkColumnCount(!1),this.reorderElements(t),n(this.element,"bricklayer.redraw",{columnCount:t})},t.prototype.destroy=function(){var t=this;this.ruler.destroy(),e(this.elements).forEach(function(e){return t.element.appendChild(e)}),e(this.getColumns()).forEach(function(t){return t.parentNode.removeChild(t)}),n(this.element,"bricklayer.destroy",{})},t.prototype.build=function(){this.ruler=new s(this.options.rulerClassName),this.elements=this.getElementsInOrder(),this.element.insertBefore(this.ruler.element,this.element.firstChild)},t.prototype.buildResponsive=function(){var t=this;window.addEventListener("resize",function(e){return t.checkColumnCount()}),this.checkColumnCount(),this.on("breakpoint",function(e){return t.reorderElements(e.detail.columnCount)}),this.columnCount>=1&&this.reorderElements(this.columnCount)},t.prototype.getColumns=function(){return this.element.querySelectorAll(":scope > ."+this.options.columnClassName)},t.prototype.findMinHeightColumn=function(){var t=e(this.getColumns()),n=t.map(function(t){return t.offsetHeight}),r=Math.min.apply(null,n);return t[n.indexOf(r)]},t.prototype.getElementsInOrder=function(){return this.element.querySelectorAll(":scope > *:not(."+this.options.columnClassName+"):not(."+this.options.rulerClassName+")")},t.prototype.checkColumnCount=function(t){void 0===t&&(t=!0);var e=this.getColumnCount();this.columnCount!==e&&(t&&n(this.element,"bricklayer.breakpoint",{columnCount:e}),this.columnCount=e)},t.prototype.reorderElements=function(t){var n=this;void 0===t&&(t=1);for(var r=e(this.elements).map(function(t){var e=t.parentNode?t.parentNode.removeChild(t):t;return e}),o=this.getColumns(),i=0;i<o.length;i++)o[i].parentNode.removeChild(o[i]);for(var i=0;i<t;i++){var s=new u(this.options.columnClassName).element;this.element.appendChild(s)}r.forEach(function(t){var e=n.findMinHeightColumn();e.appendChild(t)})},t.prototype.getColumnCount=function(){var t=this.element.offsetWidth,e=this.ruler.getWidth();return 0==e?1:Math.round(t/e)},t.prototype.applyPosition=function(t,e,r){var o=this,i=function(i){var s=i+t.charAt(0).toUpperCase()+t.substr(1);n(o.element,"bricklayer."+s,{item:r,column:e})};switch(i("before"),t){case"append":e.appendChild(r);break;case"prepend":e.insertBefore(r,e.firstChild)}i("after")},t}();t.Container=l}(r||(r={})),function(t,n){"function"==typeof define&&define.amd?define(function(){return n()}):"undefined"!=typeof window&&t===window?t.Bricklayer=n():"object"==typeof e&&e.exports&&(e.exports=n())}("undefined"!=typeof window?window:this,function(){return r.Container})},{}]},{},[1]);
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
/*
|
||||||
|
treeMenu - jQuery plugin
|
||||||
|
version: 0.6
|
||||||
|
|
||||||
|
Copyright 2014 Stepan Krapivin
|
||||||
|
|
||||||
|
*/
|
||||||
|
(function($){
|
||||||
|
$.fn.treemenu = function(options) {
|
||||||
|
options = options || {};
|
||||||
|
options.delay = options.delay || 0;
|
||||||
|
options.openActive = options.openActive || false;
|
||||||
|
options.closeOther = options.closeOther || false;
|
||||||
|
options.activeSelector = options.activeSelector || ".active";
|
||||||
|
|
||||||
|
this.addClass("treemenu");
|
||||||
|
|
||||||
|
if (!options.nonroot) {
|
||||||
|
this.addClass("treemenu-root");
|
||||||
|
}
|
||||||
|
|
||||||
|
options.nonroot = true;
|
||||||
|
|
||||||
|
this.find("> li").each(function() {
|
||||||
|
e = $(this);
|
||||||
|
var subtree = e.find('> ul');
|
||||||
|
var button = e.find('.toggler').eq(0);
|
||||||
|
|
||||||
|
if(button.length == 0) {
|
||||||
|
// create toggler
|
||||||
|
var button = $('<span>');
|
||||||
|
button.addClass('toggler');
|
||||||
|
e.prepend(button);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(subtree.length > 0) {
|
||||||
|
subtree.hide();
|
||||||
|
|
||||||
|
e.addClass('tree-closed');
|
||||||
|
|
||||||
|
e.find(button).click(function() {
|
||||||
|
var li = $(this).parent('li');
|
||||||
|
|
||||||
|
if (options.closeOther && li.hasClass('tree-closed')) {
|
||||||
|
var siblings = li.parent('ul').find("li:not(.tree-empty)");
|
||||||
|
siblings.removeClass("tree-opened");
|
||||||
|
siblings.addClass("tree-closed");
|
||||||
|
siblings.removeClass(options.activeSelector);
|
||||||
|
siblings.find('> ul').slideUp(options.delay);
|
||||||
|
}
|
||||||
|
|
||||||
|
li.find('> ul').slideToggle(options.delay);
|
||||||
|
li.toggleClass('tree-opened');
|
||||||
|
li.toggleClass('tree-closed');
|
||||||
|
li.toggleClass(options.activeSelector);
|
||||||
|
});
|
||||||
|
|
||||||
|
$(this).find('> ul').treemenu(options);
|
||||||
|
} else {
|
||||||
|
$(this).addClass('tree-empty');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (options.openActive) {
|
||||||
|
var cls = this.attr("class");
|
||||||
|
|
||||||
|
this.find(options.activeSelector).each(function(){
|
||||||
|
var el = $(this).parent();
|
||||||
|
|
||||||
|
while (el.attr("class") !== cls) {
|
||||||
|
el.find('> ul').show();
|
||||||
|
if(el.prop("tagName") === 'UL') {
|
||||||
|
el.show();
|
||||||
|
} else if (el.prop("tagName") === 'LI') {
|
||||||
|
el.removeClass('tree-closed');
|
||||||
|
el.addClass("tree-opened");
|
||||||
|
el.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
el = el.parent();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
})(jQuery);
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* Single Page Nav Plugin
|
||||||
|
* Copyright (c) 2014 Chris Wojcik <hello@chriswojcik.net>
|
||||||
|
* Dual licensed under MIT and GPL.
|
||||||
|
* @author Chris Wojcik
|
||||||
|
* @version 1.2.0
|
||||||
|
*/
|
||||||
|
if(typeof Object.create!=="function"){Object.create=function(e){function t(){}t.prototype=e;return new t}}(function(e,t,n,r){"use strict";var i={init:function(n,r){this.options=e.extend({},e.fn.singlePageNav.defaults,n);this.container=r;this.$container=e(r);this.$links=this.$container.find("a");if(this.options.filter!==""){this.$links=this.$links.filter(this.options.filter)}this.$window=e(t);this.$htmlbody=e("html, body");this.$links.on("click.singlePageNav",e.proxy(this.handleClick,this));this.didScroll=false;this.checkPosition();this.setTimer()},handleClick:function(t){var n=this,r=t.currentTarget,i=e(r.hash);t.preventDefault();if(i.length){n.clearTimer();if(typeof n.options.beforeStart==="function"){n.options.beforeStart()}n.setActiveLink(r.hash);n.scrollTo(i,function(){if(n.options.updateHash&&history.pushState){history.pushState(null,null,r.hash)}n.setTimer();if(typeof n.options.onComplete==="function"){n.options.onComplete()}})}},scrollTo:function(e,t){var n=this;var r=n.getCoords(e).top;var i=false;n.$htmlbody.stop().animate({scrollTop:r},{duration:n.options.speed,easing:n.options.easing,complete:function(){if(typeof t==="function"&&!i){t()}i=true}})},setTimer:function(){var e=this;e.$window.on("scroll.singlePageNav",function(){e.didScroll=true});e.timer=setInterval(function(){if(e.didScroll){e.didScroll=false;e.checkPosition()}},250)},clearTimer:function(){clearInterval(this.timer);this.$window.off("scroll.singlePageNav");this.didScroll=false},checkPosition:function(){var e=this.$window.scrollTop();var t=this.getCurrentSection(e);this.setActiveLink(t)},getCoords:function(e){return{top:Math.round(e.offset().top)-this.options.offset}},setActiveLink:function(e){var t=this.$container.find("a[href$='"+e+"']");if(!t.hasClass(this.options.currentClass)){this.$links.removeClass(this.options.currentClass);t.addClass(this.options.currentClass)}},getCurrentSection:function(t){var n,r,i,s;for(n=0;n<this.$links.length;n++){r=this.$links[n].hash;if(e(r).length){i=this.getCoords(e(r));if(t>=i.top-this.options.threshold){s=r}}}return s||this.$links[0].hash}};e.fn.singlePageNav=function(e){return this.each(function(){var t=Object.create(i);t.init(e,this)})};e.fn.singlePageNav.defaults={offset:0,threshold:120,speed:400,currentClass:"current",easing:"swing",updateHash:false,filter:"",onComplete:false,beforeStart:false}})(jQuery,window,document);
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
var isTouch = window.DocumentTouch && document instanceof DocumentTouch;
|
||||||
|
|
||||||
|
function scrollHeader() {
|
||||||
|
// Has scrolled class on header
|
||||||
|
var zvalue = $(document).scrollTop();
|
||||||
|
if ( zvalue > 75 )
|
||||||
|
$("#header").addClass("scrolled");
|
||||||
|
else
|
||||||
|
$("#header").removeClass("scrolled");
|
||||||
|
}
|
||||||
|
|
||||||
|
function parallaxBackground() {
|
||||||
|
$('.parallax').css('background-positionY', ($(window).scrollTop() * 0.3) + 'px');
|
||||||
|
}
|
||||||
|
|
||||||
|
jQuery(document).ready(function($){
|
||||||
|
|
||||||
|
scrollHeader();
|
||||||
|
|
||||||
|
// Scroll Events
|
||||||
|
if (!isTouch){
|
||||||
|
$(document).scroll(function() {
|
||||||
|
scrollHeader();
|
||||||
|
parallaxBackground();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Touch scroll
|
||||||
|
$(document).on({
|
||||||
|
'touchmove': function(e) {
|
||||||
|
scrollHeader(); // Replace this with your code.
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//Smooth scroll to start
|
||||||
|
$('#to-start').click(function(){
|
||||||
|
var start_y = $('#start').position().top;
|
||||||
|
var header_offset = 45;
|
||||||
|
window.scroll({ top: start_y - header_offset, left: 0, behavior: 'smooth' });
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
//Smooth scroll to top
|
||||||
|
$('#to-top').click(function(){
|
||||||
|
window.scroll({ top: 0, left: 0, behavior: 'smooth' });
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Responsive Menu
|
||||||
|
$('#toggle').click(function () {
|
||||||
|
$(this).toggleClass('active');
|
||||||
|
$('#overlay').toggleClass('open');
|
||||||
|
$('body').toggleClass('mobile-nav-open');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Tree Menu
|
||||||
|
$(".tree").treemenu({delay:300});
|
||||||
|
|
||||||
|
});
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
/*
|
||||||
|
* smoothscroll polyfill - v0.3.4
|
||||||
|
* https://iamdustan.github.io/smoothscroll
|
||||||
|
* 2016 (c) Dustan Kasten, Jeremias Menichelli - MIT License
|
||||||
|
*/
|
||||||
|
!function(o,t,l){"use strict";function e(){function e(o,t){this.scrollLeft=o,this.scrollTop=t}function r(o){return.5*(1-Math.cos(Math.PI*o))}function n(o){if("object"!=typeof o||null===o||o.behavior===l||"auto"===o.behavior||"instant"===o.behavior)return!0;if("object"==typeof o&&"smooth"===o.behavior)return!1;throw new TypeError("behavior not valid")}function c(l){var e,r,n;do l=l.parentNode,e=l===t.body,r=l.clientHeight<l.scrollHeight||l.clientWidth<l.scrollWidth,n="visible"===o.getComputedStyle(l,null).overflow;while(!e&&(!r||n));return e=r=n=null,l}function i(t){t.frame=o.requestAnimationFrame(i.bind(o,t));var l,e,n,c=u(),s=(c-t.startTime)/f;return s=s>1?1:s,l=r(s),e=t.startX+(t.x-t.startX)*l,n=t.startY+(t.y-t.startY)*l,t.method.call(t.scrollable,e,n),e===t.x&&n===t.y?void o.cancelAnimationFrame(t.frame):void 0}function s(l,r,n){var c,s,a,f,d,h=u();l===t.body?(c=o,s=o.scrollX||o.pageXOffset,a=o.scrollY||o.pageYOffset,f=p.scroll):(c=l,s=l.scrollLeft,a=l.scrollTop,f=e),d&&o.cancelAnimationFrame(d),i({scrollable:c,method:f,startTime:h,startX:s,startY:a,x:r,y:n,frame:d})}if(!("scrollBehavior"in t.documentElement.style)){var a=o.HTMLElement||o.Element,f=468,p={scroll:o.scroll||o.scrollTo,scrollBy:o.scrollBy,scrollIntoView:a.prototype.scrollIntoView},u=o.performance&&o.performance.now?o.performance.now.bind(o.performance):Date.now;o.scroll=o.scrollTo=function(){return n(arguments[0])?void p.scroll.call(o,arguments[0].left||arguments[0],arguments[0].top||arguments[1]):void s.call(o,t.body,~~arguments[0].left,~~arguments[0].top)},o.scrollBy=function(){return n(arguments[0])?void p.scrollBy.call(o,arguments[0].left||arguments[0],arguments[0].top||arguments[1]):void s.call(o,t.body,~~arguments[0].left+(o.scrollX||o.pageXOffset),~~arguments[0].top+(o.scrollY||o.pageYOffset))},a.prototype.scrollIntoView=function(){if(n(arguments[0]))return void p.scrollIntoView.call(this,arguments[0]||!0);var l=c(this),e=l.getBoundingClientRect(),r=this.getBoundingClientRect();l!==t.body?(s.call(this,l,l.scrollLeft+r.left-e.left,l.scrollTop+r.top-e.top),o.scrollBy({left:e.left,top:e.top,behavior:"smooth"})):o.scrollBy({left:r.left,top:r.top,behavior:"smooth"})}}}"object"==typeof exports?module.exports={polyfill:e}:e()}(window,document);
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,52 @@
|
|||||||
|
{
|
||||||
|
"name": "spectre.css",
|
||||||
|
"version": "0.5.0",
|
||||||
|
"homepage": "http://picturepan2.github.io/spectre",
|
||||||
|
"author": "Yan Zhu <picturepan2@hotmail.com>",
|
||||||
|
"description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
|
||||||
|
"main": "docs/dist/spectre.css",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/picturepan2/spectre.git"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"dist",
|
||||||
|
"docs",
|
||||||
|
"src",
|
||||||
|
"**/*.scss",
|
||||||
|
"gulpfile.js"
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"keywords": [
|
||||||
|
"css",
|
||||||
|
"framework",
|
||||||
|
"flexbox",
|
||||||
|
"responsive",
|
||||||
|
"mobile-friendly",
|
||||||
|
"front-end",
|
||||||
|
"sass",
|
||||||
|
"modern"
|
||||||
|
],
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/picturepan2/spectre/issues"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"gulp": "latest",
|
||||||
|
"gulp-autoprefixer": "latest",
|
||||||
|
"gulp-clean-css": "^3.7.0",
|
||||||
|
"gulp-csscomb": "^3.0.8",
|
||||||
|
"gulp-rename": "^1.2.2",
|
||||||
|
"gulp-sass": "latest"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"last 4 Chrome versions",
|
||||||
|
"Edge >= 12",
|
||||||
|
"Firefox ESR",
|
||||||
|
"last 4 Safari versions",
|
||||||
|
"last 4 Opera versions",
|
||||||
|
"Explorer >= 10"
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"gulp-sourcemaps": "^2.6.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
TARGET_PATH = ../css-compiled
|
||||||
|
|
||||||
|
all: theme.min.css spectre.min.css
|
||||||
|
|
||||||
|
theme.min.css: theme.scss
|
||||||
|
sassc -t compressed $< $(TARGET_PATH)/$@
|
||||||
|
|
||||||
|
spectre.min.css: spectre.scss
|
||||||
|
sassc -t compressed $< $(TARGET_PATH)/$@
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
// 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/autocomplete";
|
||||||
|
@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
|
||||||
|
.search-input {
|
||||||
|
@extend .form-input;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
@extend .btn;
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
// 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: all .2s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-body {
|
||||||
|
margin-bottom: $layout-spacing;
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height .2s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove default details marker in Webkit
|
||||||
|
summary.accordion-header {
|
||||||
|
&::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
// 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
// Optimized for East Asian CJK
|
||||||
|
:lang(zh) {
|
||||||
|
font-family: $cjk-zh-font-family;
|
||||||
|
}
|
||||||
|
|
||||||
|
:lang(ja) {
|
||||||
|
font-family: $cjk-jp-font-family;
|
||||||
|
}
|
||||||
|
|
||||||
|
:lang(ko) {
|
||||||
|
font-family: $cjk-ko-font-family;
|
||||||
|
}
|
||||||
|
|
||||||
|
:lang(zh),
|
||||||
|
:lang(ja),
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
// 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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
// 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(-.1rem, -.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.avatar-xs {
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
height: $unit-2;
|
||||||
|
min-width: $unit-2;
|
||||||
|
padding: 0;
|
||||||
|
width: $unit-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
// 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,
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
color: $link-color-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
// 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-light;
|
||||||
|
content: "/";
|
||||||
|
padding-right: $unit-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,191 @@
|
|||||||
|
// Buttons
|
||||||
|
.btn {
|
||||||
|
@include control-transition();
|
||||||
|
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;
|
||||||
|
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-4;
|
||||||
|
line-height: $unit-4;
|
||||||
|
margin-left: $unit-1;
|
||||||
|
margin-right: -2px;
|
||||||
|
opacity: 1;
|
||||||
|
padding: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
width: $unit-4;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,204 @@
|
|||||||
|
// Calendars
|
||||||
|
.calendar {
|
||||||
|
border: $border-width solid $border-color;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
display: block;
|
||||||
|
min-width: 280px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-body {
|
||||||
|
color: $gray-color-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-date {
|
||||||
|
border: 0;
|
||||||
|
padding: $unit-1;
|
||||||
|
|
||||||
|
.date-item {
|
||||||
|
@include control-transition();
|
||||||
|
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;
|
||||||
|
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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled .date-item,
|
||||||
|
&.disabled .calendar-event,
|
||||||
|
.date-item:disabled,
|
||||||
|
.calendar-event:disabled {
|
||||||
|
cursor: default;
|
||||||
|
opacity: .25;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-item {
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.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-align: left;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
// 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-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,125 @@
|
|||||||
|
// Carousels
|
||||||
|
.carousel {
|
||||||
|
background: $bg-color;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
.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 ease;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: $zindex-2;
|
||||||
|
}
|
||||||
|
.item-prev {
|
||||||
|
left: 1rem;
|
||||||
|
}
|
||||||
|
.item-next {
|
||||||
|
right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-locator {
|
||||||
|
&:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
|
||||||
|
&:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
|
||||||
|
&:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
|
||||||
|
&:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
|
||||||
|
animation: carousel-slidein .75s ease-in-out 1;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: $zindex-1;
|
||||||
|
}
|
||||||
|
&:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
|
||||||
|
&:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
|
||||||
|
&:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
|
||||||
|
&:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) {
|
||||||
|
color: $gray-color-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-nav {
|
||||||
|
bottom: $layout-spacing;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
left: 50%;
|
||||||
|
position: absolute;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 10rem;
|
||||||
|
z-index: $zindex-2;
|
||||||
|
|
||||||
|
.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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
// Chips
|
||||||
|
.chip {
|
||||||
|
align-items: center;
|
||||||
|
background: $bg-color-dark;
|
||||||
|
border-radius: 5rem;
|
||||||
|
color: $gray-color-dark;
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: 90%;
|
||||||
|
height: $unit-6;
|
||||||
|
line-height: $unit-4;
|
||||||
|
margin: $unit-h;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: $unit-1 $unit-2;
|
||||||
|
text-decoration: none;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: $primary-color;
|
||||||
|
color: $light-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
margin-left: -$unit-2;
|
||||||
|
margin-right: $unit-1;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
// Codes
|
||||||
|
code {
|
||||||
|
@include label-base();
|
||||||
|
@include label-variant($code-color, lighten($code-color, 33%));
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,525 @@
|
|||||||
|
// 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 {
|
||||||
|
@include control-transition();
|
||||||
|
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;
|
||||||
|
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 {
|
||||||
|
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%;
|
||||||
|
|
||||||
|
&[size],
|
||||||
|
&[multiple] {
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
option {
|
||||||
|
padding: $unit-h $unit-1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not([multiple]):not([size]) {
|
||||||
|
background: #fff 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;
|
||||||
|
}
|
||||||
|
&: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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: inline-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 {
|
||||||
|
@include control-transition();
|
||||||
|
border: $border-width solid $border-color-dark;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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: 12px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -4px;
|
||||||
|
margin-top: -8px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&: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: 4px;
|
||||||
|
left: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form element: Switch
|
||||||
|
.form-switch {
|
||||||
|
padding-left: ($unit-8 + $control-padding-x);
|
||||||
|
|
||||||
|
.form-icon {
|
||||||
|
background: $gray-color-light;
|
||||||
|
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 {
|
||||||
|
@include control-transition();
|
||||||
|
background: $bg-color-light;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: $unit-4;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
border-color: $success-color;
|
||||||
|
&:focus {
|
||||||
|
@include control-shadow($success-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-error &,
|
||||||
|
&.is-error {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
& + .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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
// CSS Icons
|
||||||
|
@import "icons/icons-core";
|
||||||
|
@import "icons/icons-navigation";
|
||||||
|
@import "icons/icons-action";
|
||||||
|
@import "icons/icons-object";
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
// 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,424 @@
|
|||||||
|
// Layout
|
||||||
|
.container {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
padding-left: $layout-spacing;
|
||||||
|
padding-right: $layout-spacing;
|
||||||
|
width: 100%;
|
||||||
|
@extend .clearfix;
|
||||||
|
|
||||||
|
$grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
|
||||||
|
|
||||||
|
&.grid-xl {
|
||||||
|
max-width: $grid-spacing * 2 + $size-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.grid-lg {
|
||||||
|
max-width: $grid-spacing * 2 + $size-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.grid-md {
|
||||||
|
max-width: $grid-spacing * 2 + $size-md;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.grid-sm {
|
||||||
|
max-width: $grid-spacing * 2 + $size-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.grid-xs {
|
||||||
|
max-width: $grid-spacing * 2 + $size-xs;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive breakpoint system
|
||||||
|
.show-xs,
|
||||||
|
.show-sm,
|
||||||
|
.show-md,
|
||||||
|
.show-lg,
|
||||||
|
.show-xl {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive grid system
|
||||||
|
.columns {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-left: -$layout-spacing;
|
||||||
|
margin-right: -$layout-spacing;
|
||||||
|
|
||||||
|
&.col-gapless {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
|
||||||
|
& > .column {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.col-oneline {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 100%;
|
||||||
|
padding-left: $layout-spacing;
|
||||||
|
padding-right: $layout-spacing;
|
||||||
|
|
||||||
|
&.col-12,
|
||||||
|
&.col-11,
|
||||||
|
&.col-10,
|
||||||
|
&.col-9,
|
||||||
|
&.col-8,
|
||||||
|
&.col-7,
|
||||||
|
&.col-6,
|
||||||
|
&.col-5,
|
||||||
|
&.col-4,
|
||||||
|
&.col-3,
|
||||||
|
&.col-2,
|
||||||
|
&.col-1 {
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.col-12 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.col-11 {
|
||||||
|
width: 91.66666667%;
|
||||||
|
}
|
||||||
|
.col-10 {
|
||||||
|
width: 83.33333333%;
|
||||||
|
}
|
||||||
|
.col-9 {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
.col-8 {
|
||||||
|
width: 66.66666667%;
|
||||||
|
}
|
||||||
|
.col-7 {
|
||||||
|
width: 58.33333333%;
|
||||||
|
}
|
||||||
|
.col-6 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.col-5 {
|
||||||
|
width: 41.66666667%;
|
||||||
|
}
|
||||||
|
.col-4 {
|
||||||
|
width: 33.33333333%;
|
||||||
|
}
|
||||||
|
.col-3 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
.col-2 {
|
||||||
|
width: 16.66666667%;
|
||||||
|
}
|
||||||
|
.col-1 {
|
||||||
|
width: 8.33333333%;
|
||||||
|
}
|
||||||
|
.col-auto {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
max-width: none;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.col-mx-auto {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.col-ml-auto {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
.col-mr-auto {
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
@media (max-width: $size-xl) {
|
||||||
|
.col-xl-12,
|
||||||
|
.col-xl-11,
|
||||||
|
.col-xl-10,
|
||||||
|
.col-xl-9,
|
||||||
|
.col-xl-8,
|
||||||
|
.col-xl-7,
|
||||||
|
.col-xl-6,
|
||||||
|
.col-xl-5,
|
||||||
|
.col-xl-4,
|
||||||
|
.col-xl-3,
|
||||||
|
.col-xl-2,
|
||||||
|
.col-xl-1 {
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
.col-xl-12 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.col-xl-11 {
|
||||||
|
width: 91.66666667%;
|
||||||
|
}
|
||||||
|
.col-xl-10 {
|
||||||
|
width: 83.33333333%;
|
||||||
|
}
|
||||||
|
.col-xl-9 {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
.col-xl-8 {
|
||||||
|
width: 66.66666667%;
|
||||||
|
}
|
||||||
|
.col-xl-7 {
|
||||||
|
width: 58.33333333%;
|
||||||
|
}
|
||||||
|
.col-xl-6 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.col-xl-5 {
|
||||||
|
width: 41.66666667%;
|
||||||
|
}
|
||||||
|
.col-xl-4 {
|
||||||
|
width: 33.33333333%;
|
||||||
|
}
|
||||||
|
.col-xl-3 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
.col-xl-2 {
|
||||||
|
width: 16.66666667%;
|
||||||
|
}
|
||||||
|
.col-xl-1 {
|
||||||
|
width: 8.33333333%;
|
||||||
|
}
|
||||||
|
.hide-xl {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.show-xl {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: $size-lg) {
|
||||||
|
.col-lg-12,
|
||||||
|
.col-lg-11,
|
||||||
|
.col-lg-10,
|
||||||
|
.col-lg-9,
|
||||||
|
.col-lg-8,
|
||||||
|
.col-lg-7,
|
||||||
|
.col-lg-6,
|
||||||
|
.col-lg-5,
|
||||||
|
.col-lg-4,
|
||||||
|
.col-lg-3,
|
||||||
|
.col-lg-2,
|
||||||
|
.col-lg-1 {
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
.col-lg-12 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.col-lg-11 {
|
||||||
|
width: 91.66666667%;
|
||||||
|
}
|
||||||
|
.col-lg-10 {
|
||||||
|
width: 83.33333333%;
|
||||||
|
}
|
||||||
|
.col-lg-9 {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
.col-lg-8 {
|
||||||
|
width: 66.66666667%;
|
||||||
|
}
|
||||||
|
.col-lg-7 {
|
||||||
|
width: 58.33333333%;
|
||||||
|
}
|
||||||
|
.col-lg-6 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.col-lg-5 {
|
||||||
|
width: 41.66666667%;
|
||||||
|
}
|
||||||
|
.col-lg-4 {
|
||||||
|
width: 33.33333333%;
|
||||||
|
}
|
||||||
|
.col-lg-3 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
.col-lg-2 {
|
||||||
|
width: 16.66666667%;
|
||||||
|
}
|
||||||
|
.col-lg-1 {
|
||||||
|
width: 8.33333333%;
|
||||||
|
}
|
||||||
|
.hide-lg {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.show-lg {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: $size-md) {
|
||||||
|
.col-md-12,
|
||||||
|
.col-md-11,
|
||||||
|
.col-md-10,
|
||||||
|
.col-md-9,
|
||||||
|
.col-md-8,
|
||||||
|
.col-md-7,
|
||||||
|
.col-md-6,
|
||||||
|
.col-md-5,
|
||||||
|
.col-md-4,
|
||||||
|
.col-md-3,
|
||||||
|
.col-md-2,
|
||||||
|
.col-md-1 {
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
.col-md-12 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.col-md-11 {
|
||||||
|
width: 91.66666667%;
|
||||||
|
}
|
||||||
|
.col-md-10 {
|
||||||
|
width: 83.33333333%;
|
||||||
|
}
|
||||||
|
.col-md-9 {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
.col-md-8 {
|
||||||
|
width: 66.66666667%;
|
||||||
|
}
|
||||||
|
.col-md-7 {
|
||||||
|
width: 58.33333333%;
|
||||||
|
}
|
||||||
|
.col-md-6 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.col-md-5 {
|
||||||
|
width: 41.66666667%;
|
||||||
|
}
|
||||||
|
.col-md-4 {
|
||||||
|
width: 33.33333333%;
|
||||||
|
}
|
||||||
|
.col-md-3 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
.col-md-2 {
|
||||||
|
width: 16.66666667%;
|
||||||
|
}
|
||||||
|
.col-md-1 {
|
||||||
|
width: 8.33333333%;
|
||||||
|
}
|
||||||
|
.hide-md {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.show-md {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: $size-sm) {
|
||||||
|
.col-sm-12,
|
||||||
|
.col-sm-11,
|
||||||
|
.col-sm-10,
|
||||||
|
.col-sm-9,
|
||||||
|
.col-sm-8,
|
||||||
|
.col-sm-7,
|
||||||
|
.col-sm-6,
|
||||||
|
.col-sm-5,
|
||||||
|
.col-sm-4,
|
||||||
|
.col-sm-3,
|
||||||
|
.col-sm-2,
|
||||||
|
.col-sm-1 {
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
.col-sm-12 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.col-sm-11 {
|
||||||
|
width: 91.66666667%;
|
||||||
|
}
|
||||||
|
.col-sm-10 {
|
||||||
|
width: 83.33333333%;
|
||||||
|
}
|
||||||
|
.col-sm-9 {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
.col-sm-8 {
|
||||||
|
width: 66.66666667%;
|
||||||
|
}
|
||||||
|
.col-sm-7 {
|
||||||
|
width: 58.33333333%;
|
||||||
|
}
|
||||||
|
.col-sm-6 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.col-sm-5 {
|
||||||
|
width: 41.66666667%;
|
||||||
|
}
|
||||||
|
.col-sm-4 {
|
||||||
|
width: 33.33333333%;
|
||||||
|
}
|
||||||
|
.col-sm-3 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
.col-sm-2 {
|
||||||
|
width: 16.66666667%;
|
||||||
|
}
|
||||||
|
.col-sm-1 {
|
||||||
|
width: 8.33333333%;
|
||||||
|
}
|
||||||
|
.hide-sm {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.show-sm {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: $size-xs) {
|
||||||
|
.col-xs-12,
|
||||||
|
.col-xs-11,
|
||||||
|
.col-xs-10,
|
||||||
|
.col-xs-9,
|
||||||
|
.col-xs-8,
|
||||||
|
.col-xs-7,
|
||||||
|
.col-xs-6,
|
||||||
|
.col-xs-5,
|
||||||
|
.col-xs-4,
|
||||||
|
.col-xs-3,
|
||||||
|
.col-xs-2,
|
||||||
|
.col-xs-1 {
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
.col-xs-12 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.col-xs-11 {
|
||||||
|
width: 91.66666667%;
|
||||||
|
}
|
||||||
|
.col-xs-10 {
|
||||||
|
width: 83.33333333%;
|
||||||
|
}
|
||||||
|
.col-xs-9 {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
.col-xs-8 {
|
||||||
|
width: 66.66666667%;
|
||||||
|
}
|
||||||
|
.col-xs-7 {
|
||||||
|
width: 58.33333333%;
|
||||||
|
}
|
||||||
|
.col-xs-6 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.col-xs-5 {
|
||||||
|
width: 41.66666667%;
|
||||||
|
}
|
||||||
|
.col-xs-4 {
|
||||||
|
width: 33.33333333%;
|
||||||
|
}
|
||||||
|
.col-xs-3 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
.col-xs-2 {
|
||||||
|
width: 16.66666667%;
|
||||||
|
}
|
||||||
|
.col-xs-1 {
|
||||||
|
width: 8.33333333%;
|
||||||
|
}
|
||||||
|
.hide-xs {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.show-xs {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
// Media
|
||||||
|
// Image responsive
|
||||||
|
.img-responsive {
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// object-fit support is coming to Microsoft Edge
|
||||||
|
// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/
|
||||||
|
.img-fit-cover {
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-fit-contain {
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Video responsive
|
||||||
|
.video-responsive {
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe,
|
||||||
|
object,
|
||||||
|
embed {
|
||||||
|
border: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
video.video-responsive {
|
||||||
|
height: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-responsive-4-3 {
|
||||||
|
&::before {
|
||||||
|
padding-bottom: 75%; // Ratio 4:3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-responsive-1-1 {
|
||||||
|
&::before {
|
||||||
|
padding-bottom: 100%; // Ratio 1:1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Figure
|
||||||
|
.figure {
|
||||||
|
margin: 0 0 $layout-spacing 0;
|
||||||
|
|
||||||
|
.figure-caption {
|
||||||
|
color: $gray-color-dark;
|
||||||
|
margin-top: $layout-spacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
// Menus
|
||||||
|
.menu {
|
||||||
|
@include shadow-variant(.05rem);
|
||||||
|
background: $bg-color-light;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
min-width: $control-width-xs;
|
||||||
|
padding: $unit-2;
|
||||||
|
transform: translateY($layout-spacing-sm);
|
||||||
|
z-index: $zindex-1;
|
||||||
|
|
||||||
|
&.menu-nav {
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
margin-top: 0;
|
||||||
|
padding: 0 $unit-2;
|
||||||
|
text-decoration: none;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
& > a {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
color: inherit;
|
||||||
|
display: block;
|
||||||
|
margin: 0 (-$unit-2);
|
||||||
|
padding: $unit-1 $unit-2;
|
||||||
|
text-decoration: none;
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
background: $secondary-color;
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
background: $secondary-color;
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& + .menu-item {
|
||||||
|
margin-top: $unit-1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-badge {
|
||||||
|
float: right;
|
||||||
|
padding: $unit-1 0;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin-top: -$unit-h;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
// Meters
|
||||||
|
// Credit: https://css-tricks.com/html5-meter-element/
|
||||||
|
.meter {
|
||||||
|
appearance: none;
|
||||||
|
background: $bg-color;
|
||||||
|
border: 0;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: $unit-4;
|
||||||
|
|
||||||
|
&::-webkit-meter-inner-element {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-meter-bar,
|
||||||
|
&::-webkit-meter-optimum-value,
|
||||||
|
&::-webkit-meter-suboptimum-value,
|
||||||
|
&::-webkit-meter-even-less-good-value {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-meter-bar {
|
||||||
|
background: $bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-meter-optimum-value {
|
||||||
|
background: $success-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-meter-suboptimum-value {
|
||||||
|
background: $warning-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-meter-even-less-good-value {
|
||||||
|
background: $error-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-meter-bar,
|
||||||
|
&:-moz-meter-optimum,
|
||||||
|
&:-moz-meter-sub-optimum,
|
||||||
|
&:-moz-meter-sub-sub-optimum {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:-moz-meter-optimum::-moz-meter-bar {
|
||||||
|
background: $success-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:-moz-meter-sub-optimum::-moz-meter-bar {
|
||||||
|
background: $warning-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:-moz-meter-sub-sub-optimum::-moz-meter-bar {
|
||||||
|
background: $error-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
// Mixins
|
||||||
|
@import "mixins/avatar";
|
||||||
|
@import "mixins/button";
|
||||||
|
@import "mixins/clearfix";
|
||||||
|
@import "mixins/color";
|
||||||
|
@import "mixins/label";
|
||||||
|
@import "mixins/position";
|
||||||
|
@import "mixins/shadow";
|
||||||
|
@import "mixins/text";
|
||||||
|
@import "mixins/toast";
|
||||||
|
@import "mixins/transition";
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
// Modals
|
||||||
|
.modal {
|
||||||
|
align-items: center;
|
||||||
|
bottom: 0;
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: $layout-spacing;
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
&:target,
|
||||||
|
&.active {
|
||||||
|
display: flex;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: $zindex-4;
|
||||||
|
|
||||||
|
.modal-overlay {
|
||||||
|
background: rgba($bg-color, .75);
|
||||||
|
bottom: 0;
|
||||||
|
cursor: default;
|
||||||
|
display: block;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-container {
|
||||||
|
animation: slide-down .2s ease 1;
|
||||||
|
max-width: $control-width-md;
|
||||||
|
width: 100%;
|
||||||
|
z-index: $zindex-0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.modal-sm {
|
||||||
|
.modal-container {
|
||||||
|
max-width: $control-width-sm;
|
||||||
|
padding: 0 $unit-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.modal-lg {
|
||||||
|
.modal-overlay {
|
||||||
|
background: $bg-color-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-container {
|
||||||
|
box-shadow: none;
|
||||||
|
max-width: $control-width-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-container {
|
||||||
|
@include shadow-variant(.2rem);
|
||||||
|
background: $bg-color-light;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
display: block;
|
||||||
|
padding: 0 $unit-4;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
padding: $unit-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
max-height: 50vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: $unit-4;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
padding: $unit-4;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
// Navbar
|
||||||
|
.navbar {
|
||||||
|
align-items: stretch;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.navbar-section {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex: 1 0 0;
|
||||||
|
|
||||||
|
&:not(:first-child):last-child {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-center {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
font-size: $font-size-lg;
|
||||||
|
font-weight: 500;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
// Navs
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
list-style: none;
|
||||||
|
margin: $unit-1 0;
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
a {
|
||||||
|
color: $gray-color-dark;
|
||||||
|
padding: $unit-1 $unit-2;
|
||||||
|
text-decoration: none;
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
& > a {
|
||||||
|
color: darken($gray-color-dark, 10%);
|
||||||
|
font-weight: bold;
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .nav {
|
||||||
|
margin-bottom: $unit-2;
|
||||||
|
margin-left: $unit-4;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,446 @@
|
|||||||
|
/* 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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Document
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: sans-serif; /* 1 */
|
||||||
|
-ms-text-size-adjust: 100%; /* 3 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin in all browsers (opinionated).
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
nav,
|
||||||
|
section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
|
* `article` contexts in Chrome, Firefox, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 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 */
|
||||||
|
height: 0; /* 1 */
|
||||||
|
overflow: visible; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers. (removed)
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* 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+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent; /* 1 */
|
||||||
|
-webkit-text-decoration-skip: objects; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the outline on focused links when they are also active or hovered
|
||||||
|
* in all browsers (opinionated).
|
||||||
|
*/
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
pre,
|
||||||
|
samp {
|
||||||
|
font-family: $mono-font-family; /* 1 (changed) */
|
||||||
|
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) */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
|
* all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hide the overflow in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the font styles in all browsers (opinionated).
|
||||||
|
* 2. Remove the margin in Firefox and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit; /* 1 (changed) */
|
||||||
|
font-size: inherit; /* 1 (changed) */
|
||||||
|
line-height: inherit; /* 1 (changed) */
|
||||||
|
margin: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the overflow in IE.
|
||||||
|
* 1. Show the overflow in Edge.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input { /* 1 */
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||||
|
* 1. Remove the inheritance of text transform in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select { /* 1 */
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
html [type="button"], /* 1 */
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner border and padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the focus styles unset by the previous rule (removed).
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Change the border, margin, and padding in all browsers (opinionated) (changed).
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the text wrapping in Edge and IE.
|
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out
|
||||||
|
* `fieldset` elements in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
display: table; /* 1 */
|
||||||
|
max-width: 100%; /* 1 */
|
||||||
|
padding: 0; /* 3 */
|
||||||
|
white-space: normal; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct display in IE 9-.
|
||||||
|
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
display: inline-block; /* 1 */
|
||||||
|
vertical-align: baseline; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the default vertical scrollbar in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the odd appearance in Chrome and Safari.
|
||||||
|
* 2. Correct the outline style in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
outline-offset: -2px; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-cancel-button,
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
* 2. Change font properties to `inherit` in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button; /* 1 */
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interactive
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
details, /* 1 */
|
||||||
|
menu {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scripting
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hidden
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
// Off canvas menus
|
||||||
|
$off-canvas-breakpoint: $size-lg !default;
|
||||||
|
|
||||||
|
.off-canvas {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: nowrap;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.off-canvas-toggle {
|
||||||
|
display: block;
|
||||||
|
left: $layout-spacing;
|
||||||
|
position: absolute;
|
||||||
|
top: $layout-spacing;
|
||||||
|
transition: none;
|
||||||
|
z-index: $zindex-0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.off-canvas-sidebar {
|
||||||
|
background: $bg-color;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
min-width: 10rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
transform: translateX(-100%);
|
||||||
|
transition: transform .25s ease;
|
||||||
|
z-index: $zindex-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.off-canvas-content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
height: 100%;
|
||||||
|
padding: $layout-spacing $layout-spacing $layout-spacing 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.off-canvas-overlay {
|
||||||
|
background: rgba($dark-color, .1);
|
||||||
|
border-color: transparent;
|
||||||
|
border-radius: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: none;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.off-canvas-sidebar {
|
||||||
|
&:target,
|
||||||
|
&.active {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:target ~ .off-canvas-overlay,
|
||||||
|
&.active ~ .off-canvas-overlay {
|
||||||
|
display: block;
|
||||||
|
z-index: $zindex-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive layout
|
||||||
|
@media (min-width: $off-canvas-breakpoint) {
|
||||||
|
.off-canvas {
|
||||||
|
&.off-canvas-sidebar-show {
|
||||||
|
.off-canvas-toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.off-canvas-sidebar {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
position: relative;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
// Pagination
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
margin: $unit-1 0;
|
||||||
|
padding: $unit-1 0;
|
||||||
|
|
||||||
|
.page-item {
|
||||||
|
margin: $unit-1 $unit-o;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
padding: $unit-1 $unit-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
color: $gray-color-dark;
|
||||||
|
display: inline-block;
|
||||||
|
padding: $unit-1 $unit-2;
|
||||||
|
text-decoration: none;
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
a {
|
||||||
|
cursor: default;
|
||||||
|
opacity: .5;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
a {
|
||||||
|
background: $primary-color;
|
||||||
|
color: $light-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.page-prev,
|
||||||
|
&.page-next {
|
||||||
|
flex: 1 0 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.page-next {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-item-title {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-item-subtitle {
|
||||||
|
margin: 0;
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
// Panels
|
||||||
|
.panel {
|
||||||
|
border: $border-width solid $border-color;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.panel-header,
|
||||||
|
.panel-footer {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: $layout-spacing-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-nav {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-body {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0 $layout-spacing-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,135 @@
|
|||||||
|
// Parallax
|
||||||
|
$parallax-deg: 3deg !default;
|
||||||
|
$parallax-offset: 4.5px !default;
|
||||||
|
$parallax-offset-z: 50px !default;
|
||||||
|
$parallax-perspective: 1000px !default;
|
||||||
|
$parallax-scale: .95 !default;
|
||||||
|
$parallax-fade-color: rgba(255, 255, 255, .35) !default;
|
||||||
|
|
||||||
|
// Mixin: Parallax direction
|
||||||
|
@mixin parallax-dir() {
|
||||||
|
height: 50%;
|
||||||
|
outline: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 50%;
|
||||||
|
z-index: $zindex-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax {
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
position: relative;
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
.parallax-content {
|
||||||
|
@include shadow-variant(1rem);
|
||||||
|
height: auto;
|
||||||
|
transform: perspective($parallax-perspective);
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transition: all .4s ease;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-front {
|
||||||
|
align-items: center;
|
||||||
|
color: $light-color;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 0 0 20px rgba($dark-color, .75);
|
||||||
|
top: 0;
|
||||||
|
transform: translateZ($parallax-offset-z) scale($parallax-scale);
|
||||||
|
transition: all .4s ease;
|
||||||
|
width: 100%;
|
||||||
|
z-index: $zindex-0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-top-left {
|
||||||
|
@include parallax-dir();
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
&:focus ~ .parallax-content,
|
||||||
|
&:hover ~ .parallax-content {
|
||||||
|
transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background: linear-gradient(135deg, $parallax-fade-color 0%, transparent 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-front {
|
||||||
|
transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-top-right {
|
||||||
|
@include parallax-dir();
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
&:focus ~ .parallax-content,
|
||||||
|
&:hover ~ .parallax-content {
|
||||||
|
transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background: linear-gradient(-135deg, $parallax-fade-color 0%, transparent 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-front {
|
||||||
|
transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-bottom-left {
|
||||||
|
@include parallax-dir();
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
&:focus ~ .parallax-content,
|
||||||
|
&:hover ~ .parallax-content {
|
||||||
|
transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background: linear-gradient(45deg, $parallax-fade-color 0%, transparent 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-front {
|
||||||
|
transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-bottom-right {
|
||||||
|
@include parallax-dir();
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
&:focus ~ .parallax-content,
|
||||||
|
&:hover ~ .parallax-content {
|
||||||
|
transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background: linear-gradient(-45deg, $parallax-fade-color 0%, transparent 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-front {
|
||||||
|
transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
// Popovers
|
||||||
|
.popover {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.popover-container {
|
||||||
|
left: 50%;
|
||||||
|
opacity: 0;
|
||||||
|
padding: $layout-spacing;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
transform: translate(-50%, -50%) scale(0);
|
||||||
|
transition: transform .2s ease;
|
||||||
|
width: $control-width-sm;
|
||||||
|
z-index: $zindex-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
*:focus + .popover-container,
|
||||||
|
&:hover .popover-container,
|
||||||
|
.popover-container:hover {
|
||||||
|
display: block;
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-50%, -100%) scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.popover-right {
|
||||||
|
.popover-container {
|
||||||
|
left: 100%;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus + .popover-container,
|
||||||
|
&:hover .popover-container,
|
||||||
|
.popover-container:hover {
|
||||||
|
transform: translate(0, -50%) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.popover-bottom {
|
||||||
|
.popover-container {
|
||||||
|
left: 50%;
|
||||||
|
top: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus + .popover-container,
|
||||||
|
&:hover .popover-container,
|
||||||
|
.popover-container:hover {
|
||||||
|
transform: translate(-50%, 0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.popover-left {
|
||||||
|
.popover-container {
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus + .popover-container,
|
||||||
|
&:hover .popover-container,
|
||||||
|
.popover-container:hover {
|
||||||
|
transform: translate(-100%, -50%) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
@include shadow-variant(.2rem);
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
// Progress
|
||||||
|
// Credit: https://css-tricks.com/html5-progress-element/
|
||||||
|
.progress {
|
||||||
|
appearance: none;
|
||||||
|
background: $bg-color-dark;
|
||||||
|
border: 0;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
color: $primary-color;
|
||||||
|
height: $unit-1;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::-webkit-progress-bar {
|
||||||
|
background: transparent;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-progress-value {
|
||||||
|
background: $primary-color;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-progress-bar {
|
||||||
|
background: $primary-color;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:indeterminate {
|
||||||
|
animation: progress-indeterminate 1.5s linear infinite;
|
||||||
|
background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top left / 150% 150% no-repeat;
|
||||||
|
|
||||||
|
&::-moz-progress-bar {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes progress-indeterminate {
|
||||||
|
0% {
|
||||||
|
background-position: 200% 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: -200% 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,99 @@
|
|||||||
|
// Sliders
|
||||||
|
// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
|
||||||
|
.slider {
|
||||||
|
appearance: none;
|
||||||
|
background: transparent;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: $unit-6;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include control-shadow();
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tooltip:not([data-tooltip]) {
|
||||||
|
&::after {
|
||||||
|
content: attr(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Slider Thumb
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background: $primary-color;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
height: $unit-3;
|
||||||
|
margin-top: -($unit-3 - $unit-h) / 2;
|
||||||
|
transition: transform .2s ease;
|
||||||
|
width: $unit-3;
|
||||||
|
}
|
||||||
|
&::-moz-range-thumb {
|
||||||
|
background: $primary-color;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
height: $unit-3;
|
||||||
|
transition: transform .2s ease;
|
||||||
|
width: $unit-3;
|
||||||
|
}
|
||||||
|
&::-ms-thumb {
|
||||||
|
background: $primary-color;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
height: $unit-3;
|
||||||
|
transition: transform .2s ease;
|
||||||
|
width: $unit-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
transform: scale(1.25);
|
||||||
|
}
|
||||||
|
&::-moz-range-thumb {
|
||||||
|
transform: scale(1.25);
|
||||||
|
}
|
||||||
|
&::-ms-thumb {
|
||||||
|
transform: scale(1.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled,
|
||||||
|
&.disabled {
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
background: $gray-color-light;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
&::-moz-range-thumb {
|
||||||
|
background: $gray-color-light;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
&::-ms-thumb {
|
||||||
|
background: $gray-color-light;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Slider Track
|
||||||
|
&::-webkit-slider-runnable-track {
|
||||||
|
background: $bg-color-dark;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
height: $unit-h;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
&::-moz-range-track {
|
||||||
|
background: $bg-color-dark;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
height: $unit-h;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
&::-ms-track {
|
||||||
|
background: $bg-color-dark;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
height: $unit-h;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
&::-ms-fill-lower {
|
||||||
|
background: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
// Steps
|
||||||
|
.step {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
list-style: none;
|
||||||
|
margin: $unit-1 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.step-item {
|
||||||
|
flex: 1 1 0;
|
||||||
|
margin-top: 0;
|
||||||
|
min-height: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:not(:first-child)::before {
|
||||||
|
background: $primary-color;
|
||||||
|
content: "";
|
||||||
|
height: 2px;
|
||||||
|
left: -50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 9px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $gray-color;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 20px 10px 0;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background: $primary-color;
|
||||||
|
border: $border-width-lg solid $light-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: $unit-3;
|
||||||
|
left: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: $unit-1;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: $unit-3;
|
||||||
|
z-index: $zindex-0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
a {
|
||||||
|
&::before {
|
||||||
|
background: $light-color;
|
||||||
|
border: $border-width-lg solid $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& ~ .step-item {
|
||||||
|
&::before {
|
||||||
|
background: $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background: $gray-color-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
// Tables
|
||||||
|
.table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&.table-striped {
|
||||||
|
tbody {
|
||||||
|
tr:nth-of-type(odd) {
|
||||||
|
background: $bg-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&,
|
||||||
|
&.table-striped {
|
||||||
|
tbody {
|
||||||
|
tr {
|
||||||
|
&.active {
|
||||||
|
background: $bg-color-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.table-hover {
|
||||||
|
tbody {
|
||||||
|
tr {
|
||||||
|
&:hover {
|
||||||
|
background: $bg-color-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tables with horizontal scrollbar
|
||||||
|
&.table-scroll {
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding-bottom: .75rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
border-bottom: $border-width solid $border-color;
|
||||||
|
padding: $unit-3 $unit-2;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
border-bottom-width: $border-width-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
// Tabs
|
||||||
|
.tab {
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: $border-width solid $border-color;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
list-style: none;
|
||||||
|
margin: $unit-1 0 ($unit-1 - $border-width) 0;
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
border-bottom: $border-width-lg solid transparent;
|
||||||
|
color: inherit;
|
||||||
|
display: block;
|
||||||
|
margin: 0 $unit-2 0 0;
|
||||||
|
padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1;
|
||||||
|
text-decoration: none;
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
color: $link-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active a,
|
||||||
|
a.active {
|
||||||
|
border-bottom-color: $primary-color;
|
||||||
|
color: $link-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tab-action {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-clear {
|
||||||
|
margin-top: -$unit-1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tab-block {
|
||||||
|
.tab-item {
|
||||||
|
flex: 1 0 0;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
&[data-badge]::after {
|
||||||
|
position: absolute;
|
||||||
|
right: $unit-h;
|
||||||
|
top: $unit-h;
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.tab-block) {
|
||||||
|
.badge {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
// Tiles
|
||||||
|
.tile {
|
||||||
|
align-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.tile-icon,
|
||||||
|
.tile-action {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
.tile-content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
&:not(:first-child) {
|
||||||
|
padding-left: $unit-2;
|
||||||
|
}
|
||||||
|
&:not(:last-child) {
|
||||||
|
padding-right: $unit-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tile-title,
|
||||||
|
.tile-subtitle {
|
||||||
|
line-height: $line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tile-centered {
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.tile-content {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-title,
|
||||||
|
.tile-subtitle {
|
||||||
|
@include text-ellipsis();
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
// Timelines
|
||||||
|
.timeline {
|
||||||
|
.timeline-item {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: $unit-6;
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
background: $border-color;
|
||||||
|
content: "";
|
||||||
|
height: 100%;
|
||||||
|
left: 11px;
|
||||||
|
position: absolute;
|
||||||
|
top: $unit-6;
|
||||||
|
width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-left {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
padding: 2px 0 2px $layout-spacing-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-icon {
|
||||||
|
border-radius: 50%;
|
||||||
|
color: $light-color;
|
||||||
|
display: block;
|
||||||
|
height: $unit-6;
|
||||||
|
text-align: center;
|
||||||
|
width: $unit-6;
|
||||||
|
&::before {
|
||||||
|
border: $border-width-lg solid $primary-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: $unit-2;
|
||||||
|
left: $unit-2;
|
||||||
|
position: absolute;
|
||||||
|
top: $unit-2;
|
||||||
|
width: $unit-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-lg {
|
||||||
|
background: $primary-color;
|
||||||
|
line-height: $line-height;
|
||||||
|
&::before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
// Toasts
|
||||||
|
.toast {
|
||||||
|
@include toast-variant($dark-color);
|
||||||
|
border: $border-width solid $dark-color;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
color: $light-color;
|
||||||
|
display: block;
|
||||||
|
padding: $layout-spacing;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&.toast-primary {
|
||||||
|
@include toast-variant($primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toast-success {
|
||||||
|
@include toast-variant($success-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toast-warning {
|
||||||
|
@include toast-variant($warning-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toast-error {
|
||||||
|
@include toast-variant($error-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $light-color;
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
opacity: .75;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-clear {
|
||||||
|
margin: 4px -2px 4px 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
// Tooltips
|
||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
background: rgba($dark-color, .9);
|
||||||
|
border-radius: $border-radius;
|
||||||
|
bottom: 100%;
|
||||||
|
color: $light-color;
|
||||||
|
content: attr(data-tooltip);
|
||||||
|
display: block;
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
left: 50%;
|
||||||
|
max-width: $control-width-sm;
|
||||||
|
opacity: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: $unit-1 $unit-2;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
transform: translate(-50%, $unit-2);
|
||||||
|
transition: all .2s ease;
|
||||||
|
white-space: pre;
|
||||||
|
z-index: $zindex-3;
|
||||||
|
}
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
&::after {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-50%, -$unit-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[disabled],
|
||||||
|
&.disabled {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tooltip-right {
|
||||||
|
&::after {
|
||||||
|
bottom: 50%;
|
||||||
|
left: 100%;
|
||||||
|
transform: translate(-$unit-1, 50%);
|
||||||
|
}
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
&::after {
|
||||||
|
transform: translate($unit-1, 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tooltip-bottom {
|
||||||
|
&::after {
|
||||||
|
bottom: auto;
|
||||||
|
top: 100%;
|
||||||
|
transform: translate(-50%, -$unit-2);
|
||||||
|
}
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
&::after {
|
||||||
|
transform: translate(-50%, $unit-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tooltip-left {
|
||||||
|
&::after {
|
||||||
|
bottom: 50%;
|
||||||
|
left: auto;
|
||||||
|
right: 100%;
|
||||||
|
transform: translate($unit-2, 50%);
|
||||||
|
}
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
&::after {
|
||||||
|
transform: translate(-$unit-1, 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
// Typography
|
||||||
|
// Headings
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: inherit;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: .5em;
|
||||||
|
margin-top: 2rem;
|
||||||
|
font-family: $title-font-family;
|
||||||
|
color: darken($body-font-color, 10%);
|
||||||
|
}
|
||||||
|
.h1,
|
||||||
|
.h2,
|
||||||
|
.h3,
|
||||||
|
.h4,
|
||||||
|
.h5,
|
||||||
|
.h6 {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
.h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
h2,
|
||||||
|
.h2 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
h3,
|
||||||
|
.h3 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
h4,
|
||||||
|
.h4 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
h5,
|
||||||
|
.h5 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
h6,
|
||||||
|
.h6 {
|
||||||
|
font-size: .8rem;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Paragraphs
|
||||||
|
p {
|
||||||
|
margin: 0 0 $line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Semantic text elements
|
||||||
|
a,
|
||||||
|
ins,
|
||||||
|
u {
|
||||||
|
text-decoration-skip: ink edges;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: $border-width dotted;
|
||||||
|
cursor: help;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
@include label-base();
|
||||||
|
@include label-variant($light-color, $dark-color);
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
@include label-variant($body-font-color, $highlight-color);
|
||||||
|
border-radius: $border-radius;
|
||||||
|
padding: .05rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Blockquote
|
||||||
|
blockquote {
|
||||||
|
border-left: $border-width-lg solid $border-color;
|
||||||
|
margin-left: 0;
|
||||||
|
padding: $unit-2 $unit-4;
|
||||||
|
|
||||||
|
p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Lists
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin: $unit-4 0 $unit-4 $unit-8;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin: $unit-4 0 $unit-4 $unit-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-top: $unit-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: disc;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: circle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style: decimal;
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style-type: lower-alpha;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dl {
|
||||||
|
dt {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
dd {
|
||||||
|
margin: $unit-2 0 $unit-4 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
@import "utilities/colors";
|
||||||
|
@import "utilities/cursors";
|
||||||
|
@import "utilities/display";
|
||||||
|
@import "utilities/divider";
|
||||||
|
@import "utilities/loading";
|
||||||
|
@import "utilities/position";
|
||||||
|
@import "utilities/shapes";
|
||||||
|
@import "utilities/text";
|
||||||
@ -0,0 +1,112 @@
|
|||||||
|
// Core variables
|
||||||
|
$version: "0.5.0";
|
||||||
|
|
||||||
|
// Core colors
|
||||||
|
$primary-color: #3085EE !default;
|
||||||
|
$primary-color-dark: darken($primary-color, 5%) !default;
|
||||||
|
$primary-color-light: lighten($primary-color, 5%) !default;
|
||||||
|
$secondary-color: lighten($primary-color, 37.5%) !default;
|
||||||
|
$secondary-color-dark: darken($secondary-color, 3%) !default;
|
||||||
|
$secondary-color-light: lighten($secondary-color, 3%) !default;
|
||||||
|
|
||||||
|
// Gray colors
|
||||||
|
$dark-color: #454d5d !default;
|
||||||
|
$light-color: #fff !default;
|
||||||
|
$gray-color: lighten($dark-color, 40%) !default;
|
||||||
|
$gray-color-dark: darken($gray-color, 25%) !default;
|
||||||
|
$gray-color-light: lighten($gray-color, 25%) !default;
|
||||||
|
|
||||||
|
$border-color: lighten($dark-color, 60%) !default;
|
||||||
|
$border-color-dark: darken($border-color, 10%) !default;
|
||||||
|
$bg-color: lighten($dark-color, 66%) !default;
|
||||||
|
$bg-color-dark: darken($bg-color, 3%) !default;
|
||||||
|
$bg-color-light: $light-color !default;
|
||||||
|
|
||||||
|
// Control colors
|
||||||
|
$success-color: #32b643 !default;
|
||||||
|
$warning-color: #ffb700 !default;
|
||||||
|
$error-color: #e85600 !default;
|
||||||
|
|
||||||
|
// Other colors
|
||||||
|
$code-color: #e06870 !default;
|
||||||
|
$highlight-color: #ffe9b3 !default;
|
||||||
|
$body-bg: $bg-color-light !default;
|
||||||
|
$body-font-color: lighten($dark-color, 5%) !default;
|
||||||
|
$link-color: $primary-color !default;
|
||||||
|
$link-color-dark: darken($link-color, 15%) !default;
|
||||||
|
|
||||||
|
// Fonts
|
||||||
|
// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
|
||||||
|
$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto !default;
|
||||||
|
$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace !default;
|
||||||
|
$fallback-font-family: "Helvetica Neue", sans-serif !default;
|
||||||
|
$cjk-zh-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family !default;
|
||||||
|
$cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family !default;
|
||||||
|
$cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family !default;
|
||||||
|
$body-font-family: $base-font-family, $fallback-font-family !default;
|
||||||
|
$title-font-family: $base-font-family, $fallback-font-family !default;
|
||||||
|
|
||||||
|
// Unit sizes
|
||||||
|
$unit-o: .05rem !default;
|
||||||
|
$unit-h: .1rem !default;
|
||||||
|
$unit-1: .2rem !default;
|
||||||
|
$unit-2: .4rem !default;
|
||||||
|
$unit-3: .6rem !default;
|
||||||
|
$unit-4: .8rem !default;
|
||||||
|
$unit-5: 1rem !default;
|
||||||
|
$unit-6: 1.2rem !default;
|
||||||
|
$unit-7: 1.4rem !default;
|
||||||
|
$unit-8: 1.6rem !default;
|
||||||
|
$unit-9: 1.8rem !default;
|
||||||
|
$unit-10: 2rem !default;
|
||||||
|
$unit-12: 2.4rem !default;
|
||||||
|
$unit-16: 3.2rem !default;
|
||||||
|
|
||||||
|
// Font sizes
|
||||||
|
$html-font-size: 20px !default;
|
||||||
|
$html-line-height: 1.5 !default;
|
||||||
|
$font-size: .8rem !default;
|
||||||
|
$font-size-sm: .7rem !default;
|
||||||
|
$font-size-lg: .9rem !default;
|
||||||
|
$line-height: 1rem !default;
|
||||||
|
|
||||||
|
// Sizes
|
||||||
|
$layout-spacing: $unit-2 !default;
|
||||||
|
$layout-spacing-sm: $unit-1 !default;
|
||||||
|
$layout-spacing-lg: $unit-4 !default;
|
||||||
|
$border-radius: $unit-h !default;
|
||||||
|
$border-width: $unit-o !default;
|
||||||
|
$border-width-lg: $unit-h !default;
|
||||||
|
$control-size: $unit-9 !default;
|
||||||
|
$control-size-sm: $unit-7 !default;
|
||||||
|
$control-size-lg: $unit-10 !default;
|
||||||
|
$control-padding-x: $unit-2 !default;
|
||||||
|
$control-padding-x-sm: $unit-2 * .75 !default;
|
||||||
|
$control-padding-x-lg: $unit-2 * 1.5 !default;
|
||||||
|
$control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
|
||||||
|
$control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
|
||||||
|
$control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
|
||||||
|
$control-icon-size: .8rem !default;
|
||||||
|
|
||||||
|
$control-width-xs: 180px !default;
|
||||||
|
$control-width-sm: 320px !default;
|
||||||
|
$control-width-md: 640px !default;
|
||||||
|
$control-width-lg: 960px !default;
|
||||||
|
$control-width-xl: 1280px !default;
|
||||||
|
|
||||||
|
// Responsive breakpoints
|
||||||
|
$size-xs: 480px !default;
|
||||||
|
$size-sm: 600px !default;
|
||||||
|
$size-md: 840px !default;
|
||||||
|
$size-lg: 960px !default;
|
||||||
|
$size-xl: 1280px !default;
|
||||||
|
$size-2x: 1440px !default;
|
||||||
|
|
||||||
|
$responsive-breakpoint: $size-xs !default;
|
||||||
|
|
||||||
|
// Z-index
|
||||||
|
$zindex-0: 1 !default;
|
||||||
|
$zindex-1: 100 !default;
|
||||||
|
$zindex-2: 200 !default;
|
||||||
|
$zindex-3: 300 !default;
|
||||||
|
$zindex-4: 400 !default;
|
||||||
@ -0,0 +1,316 @@
|
|||||||
|
|
||||||
|
// Icon resize
|
||||||
|
.icon-resize-horiz,
|
||||||
|
.icon-resize-vert {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-bottom: 0;
|
||||||
|
border-right: 0;
|
||||||
|
content: "";
|
||||||
|
height: .45em;
|
||||||
|
width: .45em;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
transform: translate(-50%, -90%) rotate(45deg);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
transform: translate(-50%, -10%) rotate(225deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-resize-horiz {
|
||||||
|
&::before {
|
||||||
|
transform: translate(-90%, -50%) rotate(-45deg);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
transform: translate(-10%, -50%) rotate(135deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon more
|
||||||
|
.icon-more-horiz,
|
||||||
|
.icon-more-vert {
|
||||||
|
&::before {
|
||||||
|
background: currentColor;
|
||||||
|
box-shadow: -.4em 0, .4em 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: "";
|
||||||
|
height: 3px;
|
||||||
|
width: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-more-vert {
|
||||||
|
&::before {
|
||||||
|
box-shadow: 0 -.4em, 0 .4em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon plus, minus, cross
|
||||||
|
.icon-plus,
|
||||||
|
.icon-minus,
|
||||||
|
.icon-cross {
|
||||||
|
&::before {
|
||||||
|
background: currentColor;
|
||||||
|
content: "";
|
||||||
|
height: $icon-border-width;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-plus,
|
||||||
|
.icon-cross {
|
||||||
|
&::after {
|
||||||
|
background: currentColor;
|
||||||
|
content: "";
|
||||||
|
height: 100%;
|
||||||
|
width: $icon-border-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-cross {
|
||||||
|
&::before {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
transform: translate(-50%, -50%) rotate(45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon check
|
||||||
|
.icon-check {
|
||||||
|
&::before {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-right: 0;
|
||||||
|
border-top: 0;
|
||||||
|
content: "";
|
||||||
|
height: .5em;
|
||||||
|
width: .9em;
|
||||||
|
transform: translate(-50%, -75%) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon stop
|
||||||
|
.icon-stop {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
&::before {
|
||||||
|
background: currentColor;
|
||||||
|
content: "";
|
||||||
|
height: $icon-border-width;
|
||||||
|
transform: translate(-50%, -50%) rotate(45deg);
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon shutdown
|
||||||
|
.icon-shutdown {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-top-color: transparent;
|
||||||
|
&::before {
|
||||||
|
background: currentColor;
|
||||||
|
content: "";
|
||||||
|
height: .5em;
|
||||||
|
top: .1em;
|
||||||
|
width: $icon-border-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon refresh
|
||||||
|
.icon-refresh {
|
||||||
|
&::before {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-right-color: transparent;
|
||||||
|
content: "";
|
||||||
|
height: 1em;
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
border: .2em solid currentColor;
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-left-color: transparent;
|
||||||
|
content: "";
|
||||||
|
height: 0;
|
||||||
|
left: 80%;
|
||||||
|
top: 20%;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon search
|
||||||
|
.icon-search {
|
||||||
|
&::before {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: "";
|
||||||
|
height: .75em;
|
||||||
|
left: 5%;
|
||||||
|
top: 5%;
|
||||||
|
transform: translate(0, 0) rotate(45deg);
|
||||||
|
width: .75em;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
background: currentColor;
|
||||||
|
content: "";
|
||||||
|
height: $icon-border-width;
|
||||||
|
left: 80%;
|
||||||
|
top: 80%;
|
||||||
|
transform: translate(-50%, -50%) rotate(45deg);
|
||||||
|
width: .4em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon edit
|
||||||
|
.icon-edit {
|
||||||
|
&::before {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
content: "";
|
||||||
|
height: .4em;
|
||||||
|
transform: translate(-40%, -60%) rotate(-45deg);
|
||||||
|
width: .85em;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
border: .15em solid currentColor;
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
content: "";
|
||||||
|
height: 0;
|
||||||
|
left: 5%;
|
||||||
|
top: 95%;
|
||||||
|
transform: translate(0, -100%);
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon delete
|
||||||
|
.icon-delete {
|
||||||
|
&::before {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-bottom-left-radius: $border-radius;
|
||||||
|
border-bottom-right-radius: $border-radius;
|
||||||
|
border-top: 0;
|
||||||
|
content: "";
|
||||||
|
height: .75em;
|
||||||
|
top: 60%;
|
||||||
|
width: .75em;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
background: currentColor;
|
||||||
|
box-shadow: -.25em .2em, .25em .2em;
|
||||||
|
content: "";
|
||||||
|
height: $icon-border-width;
|
||||||
|
top: $icon-border-width/2;
|
||||||
|
width: .5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon share
|
||||||
|
.icon-share {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
border-right: 0;
|
||||||
|
border-top: 0;
|
||||||
|
&::before {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-left: 0;
|
||||||
|
border-top: 0;
|
||||||
|
content: "";
|
||||||
|
height: .4em;
|
||||||
|
left: 100%;
|
||||||
|
top: .25em;
|
||||||
|
transform: translate(-125%, -50%) rotate(-45deg);
|
||||||
|
width: .4em;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-bottom: 0;
|
||||||
|
border-right: 0;
|
||||||
|
border-radius: 75% 0;
|
||||||
|
content: "";
|
||||||
|
height: .5em;
|
||||||
|
width: .6em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon flag
|
||||||
|
.icon-flag {
|
||||||
|
&::before {
|
||||||
|
background: currentColor;
|
||||||
|
content: "";
|
||||||
|
height: 1em;
|
||||||
|
left: 15%;
|
||||||
|
width: $icon-border-width;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-bottom-right-radius: $border-radius;
|
||||||
|
border-left: 0;
|
||||||
|
border-top-right-radius: $border-radius;
|
||||||
|
content: "";
|
||||||
|
height: .65em;
|
||||||
|
top: 35%;
|
||||||
|
left: 60%;
|
||||||
|
width: .8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon bookmark
|
||||||
|
.icon-bookmark {
|
||||||
|
&::before {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-bottom: 0;
|
||||||
|
border-top-left-radius: $border-radius;
|
||||||
|
border-top-right-radius: $border-radius;
|
||||||
|
content: "";
|
||||||
|
height: .9em;
|
||||||
|
width: .8em;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-bottom: 0;
|
||||||
|
border-left: 0;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
content: "";
|
||||||
|
height: .5em;
|
||||||
|
transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
|
||||||
|
width: .5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon download & upload
|
||||||
|
.icon-download,
|
||||||
|
.icon-upload {
|
||||||
|
border-bottom: $icon-border-width solid currentColor;
|
||||||
|
&::before {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-bottom: 0;
|
||||||
|
border-right: 0;
|
||||||
|
content: "";
|
||||||
|
height: .5em;
|
||||||
|
width: .5em;
|
||||||
|
transform: translate(-50%, -60%) rotate(-135deg);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
background: currentColor;
|
||||||
|
content: "";
|
||||||
|
height: .6em;
|
||||||
|
top: 40%;
|
||||||
|
width: $icon-border-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-upload {
|
||||||
|
&::before {
|
||||||
|
transform: translate(-50%, -60%) rotate(45deg);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
// Icon variables
|
||||||
|
$icon-border-width: $border-width-lg;
|
||||||
|
$icon-prefix: "icon";
|
||||||
|
|
||||||
|
// Icon base style
|
||||||
|
.#{$icon-prefix} {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: inherit;
|
||||||
|
font-style: normal;
|
||||||
|
height: 1em;
|
||||||
|
position: relative;
|
||||||
|
text-indent: -9999px;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 1em;
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
left: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon sizes
|
||||||
|
&.icon-2x {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-3x {
|
||||||
|
font-size: 2.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-4x {
|
||||||
|
font-size: 3.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Component icon support
|
||||||
|
.accordion,
|
||||||
|
.btn,
|
||||||
|
.toast,
|
||||||
|
.menu {
|
||||||
|
.#{$icon-prefix} {
|
||||||
|
vertical-align: -10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-lg {
|
||||||
|
.#{$icon-prefix} {
|
||||||
|
vertical-align: -15%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,133 @@
|
|||||||
|
// Icon arrows
|
||||||
|
.icon-arrow-down,
|
||||||
|
.icon-arrow-left,
|
||||||
|
.icon-arrow-right,
|
||||||
|
.icon-arrow-up,
|
||||||
|
.icon-downward,
|
||||||
|
.icon-back,
|
||||||
|
.icon-forward,
|
||||||
|
.icon-upward {
|
||||||
|
&::before {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-bottom: 0;
|
||||||
|
border-right: 0;
|
||||||
|
content: "";
|
||||||
|
height: .65em;
|
||||||
|
width: .65em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-arrow-down {
|
||||||
|
&::before {
|
||||||
|
transform: translate(-50%, -75%) rotate(225deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-arrow-left {
|
||||||
|
&::before {
|
||||||
|
transform: translate(-25%, -50%) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-arrow-right {
|
||||||
|
&::before {
|
||||||
|
transform: translate(-75%, -50%) rotate(135deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-arrow-up {
|
||||||
|
&::before {
|
||||||
|
transform: translate(-50%, -25%) rotate(45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-back,
|
||||||
|
.icon-forward {
|
||||||
|
&::after {
|
||||||
|
background: currentColor;
|
||||||
|
content: "";
|
||||||
|
height: $icon-border-width;
|
||||||
|
width: .8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-downward,
|
||||||
|
.icon-upward {
|
||||||
|
&::after {
|
||||||
|
background: currentColor;
|
||||||
|
content: "";
|
||||||
|
height: .8em;
|
||||||
|
width: $icon-border-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-back {
|
||||||
|
&::after {
|
||||||
|
left: 55%;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
transform: translate(-50%, -50%) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-downward {
|
||||||
|
&::after {
|
||||||
|
top: 45%;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
transform: translate(-50%, -50%) rotate(-135deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-forward {
|
||||||
|
&::after {
|
||||||
|
left: 45%;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
transform: translate(-50%, -50%) rotate(135deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-upward {
|
||||||
|
&::after {
|
||||||
|
top: 55%;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
transform: translate(-50%, -50%) rotate(45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon caret
|
||||||
|
.icon-caret {
|
||||||
|
&::before {
|
||||||
|
border-top: .3em solid currentColor;
|
||||||
|
border-right: .3em solid transparent;
|
||||||
|
border-left: .3em solid transparent;
|
||||||
|
content: "";
|
||||||
|
height: 0;
|
||||||
|
transform: translate(-50%, -25%);
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon menu
|
||||||
|
.icon-menu {
|
||||||
|
&::before {
|
||||||
|
background: currentColor;
|
||||||
|
box-shadow: 0 -.35em, 0 .35em;
|
||||||
|
content: "";
|
||||||
|
height: $icon-border-width;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon apps
|
||||||
|
.icon-apps {
|
||||||
|
&::before {
|
||||||
|
background: currentColor;
|
||||||
|
box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
|
||||||
|
content: "";
|
||||||
|
height: 3px;
|
||||||
|
width: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,176 @@
|
|||||||
|
// Icon time
|
||||||
|
.icon-time {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
&::before {
|
||||||
|
background: currentColor;
|
||||||
|
content: "";
|
||||||
|
height: .4em;
|
||||||
|
transform: translate(-50%, -75%);
|
||||||
|
width: $icon-border-width;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
background: currentColor;
|
||||||
|
content: "";
|
||||||
|
height: .3em;
|
||||||
|
transform: translate(-50%, -75%) rotate(90deg);
|
||||||
|
transform-origin: 50% 90%;
|
||||||
|
width: $icon-border-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon mail
|
||||||
|
.icon-mail {
|
||||||
|
&::before {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
content: "";
|
||||||
|
height: .8em;
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-right: 0;
|
||||||
|
border-top: 0;
|
||||||
|
content: "";
|
||||||
|
height: .5em;
|
||||||
|
transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
|
||||||
|
width: .5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon people
|
||||||
|
.icon-people {
|
||||||
|
&::before {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: "";
|
||||||
|
height: .45em;
|
||||||
|
top: 25%;
|
||||||
|
width: .45em;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-radius: 50% 50% 0 0;
|
||||||
|
content: "";
|
||||||
|
height: .4em;
|
||||||
|
top: 75%;
|
||||||
|
width: .9em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon message
|
||||||
|
.icon-message {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-bottom: 0;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
border-right: 0;
|
||||||
|
&::before {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-bottom-right-radius: $border-radius;
|
||||||
|
border-left: 0;
|
||||||
|
border-top: 0;
|
||||||
|
content: "";
|
||||||
|
height: .8em;
|
||||||
|
left: 65%;
|
||||||
|
top: 40%;
|
||||||
|
width: .7em;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
background: currentColor;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
content: "";
|
||||||
|
height: .3em;
|
||||||
|
left: 10%;
|
||||||
|
top: 100%;
|
||||||
|
transform: translate(0, -90%) rotate(45deg);
|
||||||
|
width: $icon-border-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon photo
|
||||||
|
.icon-photo {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
&::before {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: "";
|
||||||
|
height: .25em;
|
||||||
|
left: 35%;
|
||||||
|
top: 35%;
|
||||||
|
width: .25em;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-bottom: 0;
|
||||||
|
border-left: 0;
|
||||||
|
content: "";
|
||||||
|
height: .5em;
|
||||||
|
left: 60%;
|
||||||
|
transform: translate(-50%, 25%) rotate(-45deg);
|
||||||
|
width: .5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon link
|
||||||
|
.icon-link {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-radius: 5em 0 0 5em;
|
||||||
|
border-right: 0;
|
||||||
|
content: "";
|
||||||
|
height: .5em;
|
||||||
|
width: .75em;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
transform: translate(-70%, -45%) rotate(-45deg);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
transform: translate(-30%, -55%) rotate(135deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon location
|
||||||
|
.icon-location {
|
||||||
|
&::before {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-radius: 50% 50% 50% 0;
|
||||||
|
content: "";
|
||||||
|
height: .8em;
|
||||||
|
transform: translate(-50%, -60%) rotate(-45deg);
|
||||||
|
width: .8em;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: "";
|
||||||
|
height: .2em;
|
||||||
|
transform: translate(-50%, -80%);
|
||||||
|
width: .2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon emoji
|
||||||
|
.icon-emoji {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
&::before {
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: -.17em -.15em, .17em -.15em;
|
||||||
|
content: "";
|
||||||
|
height: .1em;
|
||||||
|
width: .1em;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
border: $icon-border-width solid currentColor;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-right-color: transparent;
|
||||||
|
content: "";
|
||||||
|
height: .5em;
|
||||||
|
transform: translate(-50%, -40%) rotate(-135deg);
|
||||||
|
width: .5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
// Avatar mixin
|
||||||
|
@mixin avatar-base($size: $unit-8) {
|
||||||
|
font-size: $size / 2;
|
||||||
|
height: $size;
|
||||||
|
width: $size;
|
||||||
|
}
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
// Button variant mixin
|
||||||
|
@mixin button-variant($color: $primary-color) {
|
||||||
|
background: $color;
|
||||||
|
border-color: darken($color, 3%);
|
||||||
|
color: $light-color;
|
||||||
|
&:focus {
|
||||||
|
@include control-shadow($color);
|
||||||
|
}
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
background: darken($color, 2%);
|
||||||
|
border-color: darken($color, 5%);
|
||||||
|
color: $light-color;
|
||||||
|
}
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
background: darken($color, 7%);
|
||||||
|
border-color: darken($color, 10%);
|
||||||
|
color: $light-color;
|
||||||
|
}
|
||||||
|
&.loading {
|
||||||
|
@extend .btn-primary.loading;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin button-outline-variant($color: $primary-color) {
|
||||||
|
background: $light-color;
|
||||||
|
border-color: $color;
|
||||||
|
color: $color;
|
||||||
|
&:focus {
|
||||||
|
@include control-shadow($color);
|
||||||
|
}
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
background: lighten($color, 50%);
|
||||||
|
border-color: darken($color, 2%);
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
background: $color;
|
||||||
|
border-color: darken($color, 5%);
|
||||||
|
color: $light-color;
|
||||||
|
}
|
||||||
|
&.loading {
|
||||||
|
&::after {
|
||||||
|
border-bottom-color: $color;
|
||||||
|
border-left-color: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
// Clearfix mixin
|
||||||
|
@mixin clearfix() {
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
// Background color utility mixin
|
||||||
|
@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
|
||||||
|
#{$name} {
|
||||||
|
background: $color;
|
||||||
|
|
||||||
|
@if (lightness($color) < 60) {
|
||||||
|
color: $light-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Text color utility mixin
|
||||||
|
@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
|
||||||
|
#{$name} {
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
a#{$name} {
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
color: darken($color, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
// Label base style
|
||||||
|
@mixin label-base() {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
line-height: 1.2;
|
||||||
|
padding: .1rem .15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
|
||||||
|
background: $bg-color;
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
// Margin utility mixin
|
||||||
|
@mixin margin-variant($id: 1, $size: $unit-1) {
|
||||||
|
.m-#{$id} {
|
||||||
|
margin: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-#{$id} {
|
||||||
|
margin-bottom: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml-#{$id} {
|
||||||
|
margin-left: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr-#{$id} {
|
||||||
|
margin-right: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-#{$id} {
|
||||||
|
margin-top: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx-#{$id} {
|
||||||
|
margin-left: $size;
|
||||||
|
margin-right: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-#{$id} {
|
||||||
|
margin-bottom: $size;
|
||||||
|
margin-top: $size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Padding utility mixin
|
||||||
|
@mixin padding-variant($id: 1, $size: $unit-1) {
|
||||||
|
.p-#{$id} {
|
||||||
|
padding: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pb-#{$id} {
|
||||||
|
padding-bottom: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pl-#{$id} {
|
||||||
|
padding-left: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr-#{$id} {
|
||||||
|
padding-right: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-#{$id} {
|
||||||
|
padding-top: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.px-#{$id} {
|
||||||
|
padding-left: $size;
|
||||||
|
padding-right: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.py-#{$id} {
|
||||||
|
padding-bottom: $size;
|
||||||
|
padding-top: $size;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
// Component focus shadow
|
||||||
|
@mixin control-shadow($color: $primary-color) {
|
||||||
|
box-shadow: 0 0 0 .1rem rgba($color, .2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shadow mixin
|
||||||
|
@mixin shadow-variant($offset) {
|
||||||
|
box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
// Text Ellipsis
|
||||||
|
@mixin text-ellipsis() {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
// Toast variant mixin
|
||||||
|
@mixin toast-variant($color: $dark-color) {
|
||||||
|
background: rgba($color, .9);
|
||||||
|
border-color: $color;
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
// Component transition
|
||||||
|
@mixin control-transition() {
|
||||||
|
transition: all .2s ease;
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
// Text colors
|
||||||
|
@include text-color-variant(".text-primary", $primary-color);
|
||||||
|
|
||||||
|
@include text-color-variant(".text-secondary", $secondary-color-dark);
|
||||||
|
|
||||||
|
@include text-color-variant(".text-gray", $gray-color);
|
||||||
|
|
||||||
|
@include text-color-variant(".text-light", $light-color);
|
||||||
|
|
||||||
|
@include text-color-variant(".text-success", $success-color);
|
||||||
|
|
||||||
|
@include text-color-variant(".text-warning", $warning-color);
|
||||||
|
|
||||||
|
@include text-color-variant(".text-error", $error-color);
|
||||||
|
|
||||||
|
// Background colors
|
||||||
|
@include bg-color-variant(".bg-primary", $primary-color);
|
||||||
|
|
||||||
|
@include bg-color-variant(".bg-secondary", $secondary-color);
|
||||||
|
|
||||||
|
@include bg-color-variant(".bg-dark", $dark-color);
|
||||||
|
|
||||||
|
@include bg-color-variant(".bg-gray", $bg-color);
|
||||||
|
|
||||||
|
@include bg-color-variant(".bg-success", $success-color);
|
||||||
|
|
||||||
|
@include bg-color-variant(".bg-warning", $warning-color);
|
||||||
|
|
||||||
|
@include bg-color-variant(".bg-error", $error-color);
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
// Cursors
|
||||||
|
.c-hand {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-move {
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-zoom-in {
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-zoom-out {
|
||||||
|
cursor: zoom-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-not-allowed {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-auto {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
// Display
|
||||||
|
.d-block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.d-inline {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.d-inline-block {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.d-flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.d-inline-flex {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
.d-none,
|
||||||
|
.d-hide {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.d-visible {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.d-invisible {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.text-hide {
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
color: transparent;
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
.text-assistive {
|
||||||
|
border: 0;
|
||||||
|
clip: rect(0,0,0,0);
|
||||||
|
height: 1px;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
// Divider
|
||||||
|
.divider,
|
||||||
|
.divider-vert {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&[data-content]::after {
|
||||||
|
background: $bg-color-light;
|
||||||
|
color: $gray-color;
|
||||||
|
content: attr(data-content);
|
||||||
|
display: inline-block;
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
padding: 0 $unit-2;
|
||||||
|
transform: translateY(-$font-size-sm + $border-width);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-top: $border-width solid $border-color;
|
||||||
|
height: $border-width;
|
||||||
|
margin: $unit-2 0;
|
||||||
|
|
||||||
|
&[data-content] {
|
||||||
|
margin: $unit-4 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider-vert {
|
||||||
|
display: block;
|
||||||
|
padding: $unit-4;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
border-left: $border-width solid $border-color;
|
||||||
|
bottom: $unit-2;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
left: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: $unit-2;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-content]::after {
|
||||||
|
left: 50%;
|
||||||
|
padding: $unit-1 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
// Loading
|
||||||
|
.loading {
|
||||||
|
color: transparent !important;
|
||||||
|
min-height: $unit-4;
|
||||||
|
pointer-events: none;
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
animation: loading 500ms infinite linear;
|
||||||
|
border: $border-width-lg solid $primary-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: $unit-4;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -$unit-2;
|
||||||
|
margin-top: -$unit-2;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: $unit-4;
|
||||||
|
z-index: $zindex-0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.loading-lg {
|
||||||
|
min-height: $unit-10;
|
||||||
|
&::after {
|
||||||
|
height: $unit-8;
|
||||||
|
margin-left: -$unit-4;
|
||||||
|
margin-top: -$unit-4;
|
||||||
|
width: $unit-8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
// Position
|
||||||
|
.clearfix {
|
||||||
|
@include clearfix();
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-left {
|
||||||
|
float: left !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-right {
|
||||||
|
float: right !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.absolute {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centered {
|
||||||
|
display: block;
|
||||||
|
float: none;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-centered {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Spacing
|
||||||
|
@include margin-variant(0, 0);
|
||||||
|
|
||||||
|
@include margin-variant(1, $unit-1);
|
||||||
|
|
||||||
|
@include margin-variant(2, $unit-2);
|
||||||
|
|
||||||
|
@include padding-variant(0, 0);
|
||||||
|
|
||||||
|
@include padding-variant(1, $unit-1);
|
||||||
|
|
||||||
|
@include padding-variant(2, $unit-2);
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue