first commit
commit
e8804909c8
@ -0,0 +1,66 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"project": {
|
||||
"name": "quickstart-angular2"
|
||||
},
|
||||
"apps": [
|
||||
{
|
||||
"root": "src",
|
||||
"outDir": "dist",
|
||||
"assets": [
|
||||
"assets",
|
||||
"favicon.ico"
|
||||
],
|
||||
"index": "index.html",
|
||||
"main": "main.ts",
|
||||
"polyfills": "polyfills.ts",
|
||||
"test": "test.ts",
|
||||
"tsconfig": "tsconfig.app.json",
|
||||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"styles": [
|
||||
"../node_modules/font-awesome/scss/font-awesome.scss",
|
||||
"../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
|
||||
"../scss/mdb.scss",
|
||||
"./styles.scss"
|
||||
],
|
||||
"scripts": [
|
||||
"../node_modules/web-animations-js/web-animations.min.js",
|
||||
"../node_modules/chart.js/dist/Chart.js",
|
||||
"../node_modules/easy-pie-chart/dist/easypiechart.js",
|
||||
"../node_modules/screenfull/dist/screenfull.js",
|
||||
"../node_modules/hammerjs/hammer.min.js"
|
||||
],
|
||||
"environmentSource": "environments/environment.ts",
|
||||
"environments": {
|
||||
"dev": "environments/environment.ts",
|
||||
"prod": "environments/environment.prod.ts"
|
||||
}
|
||||
}
|
||||
],
|
||||
"e2e": {
|
||||
"protractor": {
|
||||
"config": "./protractor.conf.js"
|
||||
}
|
||||
},
|
||||
"lint": [
|
||||
{
|
||||
"project": "src/tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"project": "src/tsconfig.spec.json"
|
||||
},
|
||||
{
|
||||
"project": "e2e/tsconfig.e2e.json"
|
||||
}
|
||||
],
|
||||
"test": {
|
||||
"karma": {
|
||||
"config": "./karma.conf.js"
|
||||
}
|
||||
},
|
||||
"defaults": {
|
||||
"styleExt": "scss",
|
||||
"component": {}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
# Editor configuration, see http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
@ -0,0 +1,42 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# IDE - VSCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# e2e
|
||||
/e2e/*.js
|
||||
/e2e/*.map
|
||||
|
||||
# System Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@ -0,0 +1,26 @@
|
||||
Material Design for Bootstrap - Angular
|
||||
|
||||
Version: MDB - Angular Pro 4.2.0
|
||||
|
||||
Documentation:
|
||||
http://mdbootstrap.com/angular/
|
||||
|
||||
Getting started:
|
||||
http://mdbootstrap.com/angular/getting-started/
|
||||
|
||||
FAQ
|
||||
http://mdbootstrap.com/angular/faq/
|
||||
|
||||
Support:
|
||||
http://mdbootstrap.com/forums/forum/support/
|
||||
|
||||
License:
|
||||
http://mdbootstrap.com/license/
|
||||
|
||||
Facebook: https://facebook.com/mdbootstrap
|
||||
Twitter: https://twitter.com/MDBootstrap
|
||||
Google+: https://plus.google.com/u/0/+Mdbootstrap/posts
|
||||
Dribbble: https://dribbble.com/mdbootstrap
|
||||
|
||||
Contact:
|
||||
office@mdbootstrap.com
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,14 @@
|
||||
import { AngularBootstrapMdQuickstartPage } from './app.po';
|
||||
|
||||
describe('angular-bootstrap-md-quickstart App', () => {
|
||||
let page: AngularBootstrapMdQuickstartPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new AngularBootstrapMdQuickstartPage();
|
||||
});
|
||||
|
||||
it('should display message saying app works', () => {
|
||||
page.navigateTo();
|
||||
expect(page.getParagraphText()).toEqual('app works!');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,11 @@
|
||||
import { browser, element, by } from 'protractor';
|
||||
|
||||
export class AngularBootstrapMdQuickstartPage {
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
getParagraphText() {
|
||||
return element(by.css('app-root h1')).getText();
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/e2e",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"types":[
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 547 B |
@ -0,0 +1 @@
|
||||
<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
Binary file not shown.
|
After Width: | Height: | Size: 211 B |
Binary file not shown.
|
After Width: | Height: | Size: 213 B |
Binary file not shown.
|
After Width: | Height: | Size: 209 B |
Binary file not shown.
|
After Width: | Height: | Size: 211 B |
Binary file not shown.
|
After Width: | Height: | Size: 211 B |
Binary file not shown.
|
After Width: | Height: | Size: 211 B |
Binary file not shown.
|
After Width: | Height: | Size: 213 B |
Binary file not shown.
|
After Width: | Height: | Size: 211 B |
Binary file not shown.
|
After Width: | Height: | Size: 215 B |
Binary file not shown.
|
After Width: | Height: | Size: 146 B |
Binary file not shown.
|
After Width: | Height: | Size: 137 B |
@ -0,0 +1,4 @@
|
||||
<svg fill="#FFFFFF" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/>
|
||||
<path d="M0-.5h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 218 B |
@ -0,0 +1,4 @@
|
||||
<svg fill="#FFFFFF" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/>
|
||||
<path d="M0-.25h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 217 B |
@ -0,0 +1,44 @@
|
||||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/0.13/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular/cli'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage-istanbul-reporter'),
|
||||
require('@angular/cli/plugins/karma')
|
||||
],
|
||||
client:{
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
files: [
|
||||
{ pattern: './src/test.ts', watched: false }
|
||||
],
|
||||
preprocessors: {
|
||||
'./src/test.ts': ['@angular/cli']
|
||||
},
|
||||
mime: {
|
||||
'text/x-typescript': ['ts','tsx']
|
||||
},
|
||||
coverageIstanbulReporter: {
|
||||
reports: [ 'html', 'lcovonly' ],
|
||||
fixWebpackSourcePaths: true
|
||||
},
|
||||
angularCli: {
|
||||
environment: 'dev'
|
||||
},
|
||||
reporters: config.angularCli && config.angularCli.codeCoverage
|
||||
? ['progress', 'coverage-istanbul']
|
||||
: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false
|
||||
});
|
||||
};
|
||||
Binary file not shown.
@ -0,0 +1,57 @@
|
||||
{
|
||||
"name": "quickstart-angular2",
|
||||
"version": "4.2.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@agm/core": "^1.0.0-beta.0",
|
||||
"@angular/animations": "^4.0.0",
|
||||
"@angular/common": "^4.0.0",
|
||||
"@angular/compiler": "^4.0.0",
|
||||
"@angular/core": "^4.0.0",
|
||||
"@angular/forms": "^4.0.0",
|
||||
"@angular/http": "^4.0.0",
|
||||
"@angular/platform-browser": "^4.0.0",
|
||||
"@angular/platform-browser-dynamic": "^4.0.0",
|
||||
"@angular/router": "^4.0.0",
|
||||
"angular-bootstrap-md": "*",
|
||||
"angularfire2": "^4.0.0-rc.1",
|
||||
"chart.js": "2.5.0",
|
||||
"classlist.js": "^1.1.20150312",
|
||||
"core-js": "^2.4.1",
|
||||
"easy-pie-chart": "^2.1.7",
|
||||
"firebase": "^4.2.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"hammerjs": "^2.0.8",
|
||||
"rxjs": "^5.1.0",
|
||||
"screenfull": "^3.2.0",
|
||||
"web-animations-js": "^2.2.5",
|
||||
"zone.js": "^0.8.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "1.0.0",
|
||||
"@angular/compiler-cli": "^4.0.0",
|
||||
"@types/jasmine": "2.5.38",
|
||||
"@types/node": "~6.0.60",
|
||||
"codelyzer": "~2.0.0",
|
||||
"jasmine-core": "~2.5.2",
|
||||
"jasmine-spec-reporter": "~3.2.0",
|
||||
"karma": "~1.4.1",
|
||||
"karma-chrome-launcher": "~2.0.0",
|
||||
"karma-cli": "~1.0.1",
|
||||
"karma-jasmine": "~1.1.0",
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"karma-coverage-istanbul-reporter": "^0.2.0",
|
||||
"protractor": "~5.1.0",
|
||||
"ts-node": "~2.0.0",
|
||||
"tslint": "~4.5.0",
|
||||
"typescript": "~2.2.0"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
// Protractor configuration file, see link for more information
|
||||
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||
|
||||
const { SpecReporter } = require('jasmine-spec-reporter');
|
||||
|
||||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
specs: [
|
||||
'./e2e/**/*.e2e-spec.ts'
|
||||
],
|
||||
capabilities: {
|
||||
'browserName': 'chrome'
|
||||
},
|
||||
directConnect: true,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 30000,
|
||||
print: function() {}
|
||||
},
|
||||
beforeLaunch: function() {
|
||||
require('ts-node').register({
|
||||
project: 'e2e/tsconfig.e2e.json'
|
||||
});
|
||||
},
|
||||
onPrepare() {
|
||||
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,23 @@
|
||||
.carousel-item.active, .carousel-item-next, .carousel-item-prev {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel, .carousel-multi-item, .carousel-thumbnails {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.carousel-fade .carousel-inner .carousel-item {
|
||||
opacity: 0;
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.carousel-fade .carousel-inner .active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.carousel-fade .carousel-inner>.carousel-item.active, .carousel-fade .carousel-inner>.carousel-item.next.left, .carousel-fade .carousel-inner>.carousel-item.prev.right {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
.show {
|
||||
// Show the menu
|
||||
> .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Remove the outline when :focus is triggered
|
||||
> a {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
dropdown{
|
||||
.dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
transform: translate3d(0px, 47px, 0px);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
//dropup
|
||||
.dropup {
|
||||
// Different positioning for bottom up menu
|
||||
.dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
transform: translate3d(117px, -165px, 0px);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
//dropup animation
|
||||
.dropup.show {
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transition: 0.55s;
|
||||
}
|
||||
|
||||
.fadeInDropdown {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
//material dropdown
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
transform: translate3d(6px, 49px, 0px);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
//material dropdown animation
|
||||
.dropdown.show {
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transition: 0.55s;
|
||||
}
|
||||
|
||||
.fadeInDropdown {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
//input disabled
|
||||
.disabled {
|
||||
cursor: not-allowed!important;
|
||||
}
|
||||
|
||||
|
||||
//input counter
|
||||
.counter-danger {
|
||||
border-bottom: 1px solid #F44336 !important;
|
||||
box-shadow: 0 1px 0 0 #F44336 !important;
|
||||
}
|
||||
|
||||
input:focus ~ .chars {
|
||||
float: right;
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
|
||||
textarea:focus ~ .chars {
|
||||
float: right;
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
//active styles for input label
|
||||
.md-form label.active {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
|
||||
//inputs validation
|
||||
.counter-success{
|
||||
border-bottom: 1px solid $input-success-color !important;
|
||||
box-shadow: 0 1px 0 0 $input-success-color !important;
|
||||
}
|
||||
|
||||
.inputVal {
|
||||
font-size: .8rem;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
.md-form .prefix ~ .inputVal{
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
input.counter-danger ~ span.text-danger {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
input.counter-success ~ span.text-success {
|
||||
visibility: visible !important;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
.bg-inverse {
|
||||
background-color: #292b2c!important;
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
.flex-column {
|
||||
|
||||
.nav-item a {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: #495057;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.nav-link {
|
||||
padding:0 !important;
|
||||
}
|
||||
.active a {
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
color: #fff !important;
|
||||
}
|
||||
.list-group-item {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
agm-map {
|
||||
display: block;
|
||||
}
|
||||
@ -0,0 +1,552 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
// Distance
|
||||
$modal-distance:10px;
|
||||
$modal-info-color: #5394ff;
|
||||
$modal-success-color: #01d36b;
|
||||
$modal-warning-color: #ff8e38;
|
||||
$modal-danger-color: #ff4b4b;
|
||||
|
||||
// Styles for body
|
||||
body {
|
||||
&.modal-open {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
&.scrollable {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// *** ENHANCED BOOTSTRAP MODALS ***///
|
||||
// General styles
|
||||
.modal-dialog {
|
||||
.modal-content {
|
||||
// @include border-radius(2px);
|
||||
// @extend .z-depth-1-half;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Position & Size
|
||||
.modal {
|
||||
padding-right:0 !important;
|
||||
.modal-dialog {
|
||||
@media (min-width: 768px) {
|
||||
&.modal-top {
|
||||
top: 0;
|
||||
}
|
||||
&.modal-left {
|
||||
left: 0;
|
||||
}
|
||||
&.modal-right {
|
||||
right: 0;
|
||||
}
|
||||
&.modal-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
&.modal-top-left {
|
||||
top: $modal-distance;
|
||||
left: $modal-distance;
|
||||
}
|
||||
&.modal-top-right {
|
||||
top: $modal-distance;
|
||||
right: $modal-distance;
|
||||
}
|
||||
&.modal-bottom-left {
|
||||
left: $modal-distance;
|
||||
bottom: $modal-distance;
|
||||
}
|
||||
&.modal-bottom-right {
|
||||
right: $modal-distance;
|
||||
bottom: $modal-distance;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-side {
|
||||
&.modal-top {
|
||||
top: 0;
|
||||
}
|
||||
&.modal-left {
|
||||
left: 0;
|
||||
}
|
||||
&.modal-right {
|
||||
right: 0;
|
||||
}
|
||||
&.modal-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
&.modal-top-left {
|
||||
top: $modal-distance;
|
||||
left: $modal-distance;
|
||||
}
|
||||
&.modal-top-right {
|
||||
top: $modal-distance;
|
||||
right: $modal-distance;
|
||||
}
|
||||
&.modal-bottom-left {
|
||||
left: $modal-distance;
|
||||
bottom: $modal-distance;
|
||||
}
|
||||
&.modal-bottom-right {
|
||||
right: $modal-distance;
|
||||
bottom: $modal-distance;
|
||||
}
|
||||
}
|
||||
&.fade {
|
||||
&.top:not(.show) .modal-dialog {
|
||||
transform: translate3d(0, -25%, 0);
|
||||
}
|
||||
&.left:not(.show) .modal-dialog {
|
||||
transform: translate3d(-25%, 0, 0);
|
||||
}
|
||||
&.right:not(.show) .modal-dialog {
|
||||
transform: translate3d(25%, 0, 0);
|
||||
}
|
||||
&.bottom:not(.show) .modal-dialog {
|
||||
transform: translate3d(0, 25%, 0);
|
||||
}
|
||||
&.in {
|
||||
opacity: 1;
|
||||
.modal-dialog {
|
||||
// -webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
.relative {
|
||||
display: inline-block;
|
||||
// transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.modal-scrolling {
|
||||
position: relative;
|
||||
.modal-dialog {
|
||||
position: fixed;
|
||||
z-index: 1050;
|
||||
}
|
||||
}
|
||||
&.modal-content-clickable {
|
||||
top:auto;
|
||||
bottom:auto;
|
||||
.modal-dialog {
|
||||
position:fixed;
|
||||
}
|
||||
}
|
||||
.modal-fluid {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.modal-frame {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
&.modal-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.modal-full-height {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
// bottom: 0;
|
||||
right: 0;
|
||||
&.modal-top, &.modal-bottom {
|
||||
display:block;
|
||||
width:100%;
|
||||
max-width:100%;
|
||||
height:auto;
|
||||
}
|
||||
&.modal-top {
|
||||
bottom:auto;
|
||||
}
|
||||
&.modal-bottom {
|
||||
top:auto;
|
||||
}
|
||||
.modal-content {
|
||||
width:100%;
|
||||
}
|
||||
&.modal-lg {
|
||||
max-width:90%;
|
||||
width:90%;
|
||||
@media (min-width:992px) {
|
||||
max-width:800px;
|
||||
width:800px;
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
max-width:1000px;
|
||||
width:1000px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-side {
|
||||
position: absolute;
|
||||
right: $modal-distance;
|
||||
bottom: $modal-distance;
|
||||
margin: 0;
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles
|
||||
.modal-dialog {
|
||||
.btn .fa {
|
||||
color:#fff !important;
|
||||
}
|
||||
[class*="btn-outline-"] .fa {
|
||||
color: inherit !important;
|
||||
}
|
||||
// Cascading modals
|
||||
&.cascading-modal {
|
||||
margin-top: 10%;
|
||||
// Cascading header
|
||||
.modal-header {
|
||||
text-align: center;
|
||||
margin: -2rem 1rem 1rem 1rem;
|
||||
padding: 1.5rem;
|
||||
border: none;
|
||||
flex-direction: column;
|
||||
// @extend .z-depth-1-half;
|
||||
// @include border-radius(3px);
|
||||
.close {
|
||||
margin-right: 2.5rem;
|
||||
}
|
||||
&.white-text {
|
||||
.close {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
font-size: 1.25rem;
|
||||
.fa {
|
||||
margin-right: 9px;
|
||||
}
|
||||
}
|
||||
.social-buttons {
|
||||
margin-top: 1.5rem;
|
||||
a {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Cascading tabs nav
|
||||
.modal-c-tabs {
|
||||
.nav-tabs {
|
||||
margin: -1.5rem 1rem 0 1rem;
|
||||
// @extend .z-depth-1;
|
||||
}
|
||||
.tab-content {
|
||||
padding: 1.7rem 0 0 0;
|
||||
}
|
||||
}
|
||||
// Footer customization
|
||||
.modal-body,
|
||||
.modal-footer {
|
||||
color: #616161;
|
||||
padding-right: 2rem;
|
||||
padding-left: 2rem;
|
||||
.additional-option {
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
// Cascading avatar
|
||||
&.modal-avatar {
|
||||
margin-top: 6rem;
|
||||
.modal-header {
|
||||
// @extend .z-depth-0;
|
||||
// @extend .img-fluid;
|
||||
margin: -6rem 2rem -1rem 2rem;
|
||||
img {
|
||||
width: 130px;
|
||||
// @extend .z-depth-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Modal notify
|
||||
&.modal-notify {
|
||||
.heading {
|
||||
margin: 0;
|
||||
padding: 0.3rem;
|
||||
color: #fff;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
.modal-header {
|
||||
// @extend .z-depth-1;
|
||||
border: 0;
|
||||
}
|
||||
.close {
|
||||
opacity: 1;
|
||||
}
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
color: #616161;
|
||||
}
|
||||
.btn-outline-secondary-modal {
|
||||
background-color: transparent;
|
||||
}
|
||||
// Modal info
|
||||
&.modal-info {
|
||||
.modal-header {
|
||||
background-color: $modal-info-color;
|
||||
}
|
||||
.fa {
|
||||
color: $modal-info-color;
|
||||
}
|
||||
.badge {
|
||||
background-color: $modal-info-color;
|
||||
}
|
||||
.btn-primary-modal {
|
||||
background: $modal-info-color;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: lighten( $modal-info-color, 5%)!important;
|
||||
}
|
||||
&.active {
|
||||
background-color: darken( $modal-info-color, 20%)!important;
|
||||
// @extend .z-depth-1-half;
|
||||
}
|
||||
}
|
||||
.btn-outline-secondary-modal {
|
||||
border: 2px solid $modal-info-color;
|
||||
color: $modal-info-color!important;
|
||||
}
|
||||
}
|
||||
// Modal warning
|
||||
&.modal-warning {
|
||||
.modal-header {
|
||||
background-color: $modal-warning-color;
|
||||
}
|
||||
.fa {
|
||||
color: $modal-warning-color;
|
||||
}
|
||||
.badge {
|
||||
background-color: $modal-warning-color;
|
||||
}
|
||||
.btn-primary-modal {
|
||||
background: $modal-warning-color;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: lighten( $modal-warning-color, 5%)!important;
|
||||
}
|
||||
&.active {
|
||||
background-color: darken( $modal-warning-color, 20%)!important;
|
||||
// @extend .z-depth-1-half;
|
||||
}
|
||||
}
|
||||
.btn-outline-secondary-modal {
|
||||
border: 2px solid $modal-warning-color;
|
||||
color: $modal-warning-color!important;
|
||||
}
|
||||
}
|
||||
// Modal success
|
||||
&.modal-success {
|
||||
.modal-header {
|
||||
background-color: $modal-success-color;
|
||||
}
|
||||
.fa {
|
||||
color: $modal-success-color;
|
||||
}
|
||||
.badge {
|
||||
background-color: $modal-success-color;
|
||||
}
|
||||
.btn-primary-modal {
|
||||
background: $modal-success-color;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: lighten( $modal-success-color, 5%)!important;
|
||||
}
|
||||
&.active {
|
||||
background-color: darken( $modal-success-color, 20%)!important;
|
||||
// @extend .z-depth-1-half;
|
||||
}
|
||||
}
|
||||
.btn-outline-secondary-modal {
|
||||
border: 2px solid $modal-success-color;
|
||||
color: $modal-success-color!important;
|
||||
}
|
||||
}
|
||||
// Modal danger
|
||||
&.modal-danger {
|
||||
.modal-header {
|
||||
background-color: $modal-danger-color;
|
||||
}
|
||||
.fa {
|
||||
color: $modal-danger-color;
|
||||
}
|
||||
.badge {
|
||||
background-color: $modal-danger-color;
|
||||
}
|
||||
.btn-primary-modal {
|
||||
background: $modal-danger-color;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: lighten( $modal-danger-color, 5%)!important;
|
||||
}
|
||||
&.active {
|
||||
background-color: darken( $modal-danger-color, 20%)!important;
|
||||
// @extend .z-depth-1-half;
|
||||
}
|
||||
}
|
||||
.btn-outline-secondary-modal {
|
||||
border: 2px solid $modal-danger-color;
|
||||
color: $modal-danger-color!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-sm .modal-content{
|
||||
margin: 0 auto;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px){
|
||||
.modal-sm{
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal .modal-fluid, .modal .modal-frame {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/*********************
|
||||
Modals
|
||||
**********************/
|
||||
|
||||
// Modal Login & Modal Register
|
||||
.modal-ext .modal-content {
|
||||
.modal-header {
|
||||
text-align: center;
|
||||
}
|
||||
.options {
|
||||
float: left;
|
||||
}
|
||||
.modal-body .text-xs-center fieldset {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.call {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.modal-body {
|
||||
padding: 2rem 2rem 1rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Cart
|
||||
.modal-cart {
|
||||
li p {
|
||||
margin: 5px;
|
||||
font-weight: 400;
|
||||
.badge {
|
||||
margin-left: 10px;
|
||||
margin-top: 3px;
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
}
|
||||
.quantity {
|
||||
font-size: 16px;
|
||||
margin-right: 7px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
.cartPageLink {
|
||||
margin-left: 10px;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.total {
|
||||
float: right;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
// Modals normalize
|
||||
.cf-phone {
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
// Container that the modal scrolls within
|
||||
.side-modal {
|
||||
position: fixed;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
// Shell div to position the modal with bottom padding
|
||||
.modal-dialog {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 400px;
|
||||
margin: 10px;
|
||||
// @extend .z-depth-1-half;
|
||||
@media (max-width: 760px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// Actual modal
|
||||
.modal-header {
|
||||
padding: 1rem;
|
||||
.heading {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.modal-content {
|
||||
border: none;
|
||||
}
|
||||
// Modal background
|
||||
}
|
||||
|
||||
.side-modal.fade:not(.show) .modal-dialog {
|
||||
-webkit-transform: translate3d(25%, 0, 0);
|
||||
transform: translate3d(25%, 0, 0);
|
||||
}
|
||||
|
||||
// Transparent backdrop
|
||||
.transparent-bd {
|
||||
opacity: 0!important;
|
||||
}
|
||||
|
||||
.modal-backdrop.in {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#exampleModalScroll {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-open .modal {
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
@media (min-width: 1200px) {
|
||||
.navbar.navbar-expand-xl {
|
||||
links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.navbar.navbar-expand-lg {
|
||||
links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar.navbar-expand-md {
|
||||
links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.navbar.navbar-expand-sm {
|
||||
links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,138 @@
|
||||
//Bootstrap 4 alpha popover styles - works with ng-bootstrap by Valor popover plugin
|
||||
|
||||
.popover.popover-top, .popover.bs-tether-element-attached-bottom {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.popover.popover-top::before, .popover.popover-top::after, .popover.bs-tether-element-attached-bottom::before, .popover.bs-tether-element-attached-bottom::after {
|
||||
left: 50%;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.popover.popover-top::before, .popover.bs-tether-element-attached-bottom::before {
|
||||
bottom: -11px;
|
||||
margin-left: -11px;
|
||||
border-top-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.popover.popover-top::after, .popover.bs-tether-element-attached-bottom::after {
|
||||
bottom: -10px;
|
||||
margin-left: -10px;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
|
||||
.popover.popover-right, .popover.bs-tether-element-attached-left {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.popover.popover-right::before, .popover.popover-right::after, .popover.bs-tether-element-attached-left::before, .popover.bs-tether-element-attached-left::after {
|
||||
top: 50%;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.popover.popover-right::before, .popover.bs-tether-element-attached-left::before {
|
||||
left: -11px;
|
||||
margin-top: -11px;
|
||||
border-right-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.popover.popover-right::after, .popover.bs-tether-element-attached-left::after {
|
||||
left: -10px;
|
||||
margin-top: -10px;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
|
||||
.popover.popover-bottom, .popover.bs-tether-element-attached-top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.popover.popover-bottom::before, .popover.popover-bottom::after, .popover.bs-tether-element-attached-top::before, .popover.bs-tether-element-attached-top::after {
|
||||
left: 50%;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.popover.popover-bottom::before, .popover.bs-tether-element-attached-top::before {
|
||||
top: -11px;
|
||||
margin-left: -11px;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.popover.popover-bottom::after, .popover.bs-tether-element-attached-top::after {
|
||||
top: -10px;
|
||||
margin-left: -10px;
|
||||
border-bottom-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.popover.popover-bottom .popover-title::before, .popover.bs-tether-element-attached-top .popover-title::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 20px;
|
||||
margin-left: -10px;
|
||||
content: "";
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
}
|
||||
|
||||
.popover.popover-left, .popover.bs-tether-element-attached-right {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.popover.popover-left::before, .popover.popover-left::after, .popover.bs-tether-element-attached-right::before, .popover.bs-tether-element-attached-right::after {
|
||||
top: 50%;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.popover.popover-left::before, .popover.bs-tether-element-attached-right::before {
|
||||
right: -11px;
|
||||
margin-top: -11px;
|
||||
border-left-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.popover.popover-left::after, .popover.bs-tether-element-attached-right::after {
|
||||
right: -10px;
|
||||
margin-top: -10px;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
|
||||
.popover::before,
|
||||
.popover::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.popover::before {
|
||||
content: "";
|
||||
border-width: 11px;
|
||||
}
|
||||
|
||||
.popover::after {
|
||||
content: "";
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
// Popover animations
|
||||
|
||||
@-webkit-keyframes fadeInPopover {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes fadeInPopover {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.popover-fadeIn {
|
||||
-webkit-animation-name: fadeInPopover;
|
||||
animation-name: fadeInPopover;
|
||||
-webkit-animation-delay: 0.2s;
|
||||
-moz-animation-delay: 0.2s; animation-delay: 0.2s;
|
||||
-webkit-animation-duration: 0.2s;
|
||||
animation-duration: 0.2s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
@media (min-width: 1200px) {
|
||||
.offset-xl-1 {
|
||||
margin-left: 8.333333%;
|
||||
}
|
||||
}
|
||||
|
||||
DoubleNavbar{
|
||||
header {
|
||||
height: 0 !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,145 @@
|
||||
@mixin reset-text {
|
||||
font-family: $font-family-base;
|
||||
// We deliberately do NOT reset font-size or word-wrap.
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-normal;
|
||||
letter-spacing: normal;
|
||||
line-break: auto;
|
||||
line-height: $line-height-base;
|
||||
text-align: left; // Fallback for where `start` is not supported
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
word-spacing: normal;
|
||||
}
|
||||
|
||||
// Base class
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: $zindex-tooltip;
|
||||
display: block;
|
||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||
// So reset our font and text properties to avoid inheriting weird values.
|
||||
@include reset-text();
|
||||
font-size: $font-size-sm;
|
||||
// Allow breaking very long words so they don't overflow the tooltip's bounds
|
||||
word-wrap: break-word;
|
||||
opacity: 0;
|
||||
|
||||
&.show { opacity: $tooltip-opacity; }
|
||||
|
||||
&.tooltip-top,
|
||||
&.bs-tether-element-attached-bottom {
|
||||
padding: $tooltip-arrow-width 0;
|
||||
margin-top: -$tooltip-margin;
|
||||
|
||||
.tooltip-inner::before {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -$tooltip-arrow-width;
|
||||
content: "";
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-top-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
&.tooltip-right,
|
||||
&.bs-tether-element-attached-left {
|
||||
padding: 0 $tooltip-arrow-width;
|
||||
margin-left: $tooltip-margin;
|
||||
|
||||
.tooltip-inner::before {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -$tooltip-arrow-width;
|
||||
content: "";
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-right-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
&.tooltip-bottom,
|
||||
&.bs-tether-element-attached-top {
|
||||
padding: $tooltip-arrow-width 0;
|
||||
margin-top: $tooltip-margin;
|
||||
|
||||
.tooltip-inner::before {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -$tooltip-arrow-width;
|
||||
content: "";
|
||||
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-bottom-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
&.tooltip-left,
|
||||
&.bs-tether-element-attached-right {
|
||||
padding: 0 $tooltip-arrow-width;
|
||||
margin-left: -$tooltip-margin;
|
||||
|
||||
.tooltip-inner::before {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -$tooltip-arrow-width;
|
||||
content: "";
|
||||
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-left-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.tooltip-inner {
|
||||
max-width: $tooltip-max-width;
|
||||
padding: $tooltip-padding-y $tooltip-padding-x;
|
||||
color: $tooltip-color;
|
||||
text-align: center;
|
||||
background-color: $tooltip-bg;
|
||||
padding: 0.2rem 0.4rem;
|
||||
@extend .z-depth-1-half;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltip animations
|
||||
@-webkit-keyframes fadeInTooltip {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes fadeInTooltip {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.tooltip-fadeIn {
|
||||
-webkit-animation-name: fadeInTooltip;
|
||||
animation-name: fadeInTooltip;
|
||||
-webkit-animation-delay: 0.2s;
|
||||
-moz-animation-delay: 0.2s;
|
||||
animation-delay: 0.2s;
|
||||
-webkit-animation-duration: 0.2s;
|
||||
animation-duration: 0.2s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
//sebfix for tooltips
|
||||
.single-tooltip {
|
||||
padding: .75rem 0 0 0;
|
||||
a {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
a[tooltip] {
|
||||
margin-left: 0 !important;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
tabset {
|
||||
a {
|
||||
&.waves-effect,
|
||||
&.waves-light {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
@import "./free/inputs";
|
||||
@import "./free/list-group";
|
||||
@import "./free/navbar";
|
||||
@import "./free/waves";
|
||||
@import "./free/dropdowns";
|
||||
@import "./free/tooltip";
|
||||
@import "./free/sections";
|
||||
@import "./free/popover";
|
||||
@import "./free/carousel";
|
||||
@import "./free/maps";
|
||||
@import "./free/layout";
|
||||
@import "./free/modals";
|
||||
@ -0,0 +1,32 @@
|
||||
//Angular
|
||||
@import "./pro/tabs";
|
||||
@import "./pro/buttons";
|
||||
@import "./pro/toasts";
|
||||
@import "./pro/range";
|
||||
@import "./pro/chips";
|
||||
@import "./pro/blog";
|
||||
@import "./pro/file_input";
|
||||
@import "./pro/autocomplete";
|
||||
@import "./pro/lightbox";
|
||||
@import "./pro/time-picker";
|
||||
@import "./pro/data-picker";
|
||||
@import "./pro/material-select";
|
||||
@import "./pro/accordion";
|
||||
@import "./pro/flipping-cards";
|
||||
@import "./pro/sidenav";
|
||||
@import "./pro/progress";
|
||||
@import "./pro/testimonials";
|
||||
@import "./pro/doublenavbar";
|
||||
|
||||
@import "./free/inputs";
|
||||
@import "./free/list-group";
|
||||
@import "./free/navbar.scss";
|
||||
@import "./free/waves.scss";
|
||||
@import "./free/dropdowns";
|
||||
@import "./free/tooltip";
|
||||
@import "./free/sections";
|
||||
@import "./free/popover";
|
||||
@import "./free/carousel";
|
||||
@import "./free/maps";
|
||||
@import "./free/layout";
|
||||
@import "./free/modals";
|
||||
@ -0,0 +1,56 @@
|
||||
// ACCORDION
|
||||
.accordion {
|
||||
.sb-item-body {
|
||||
transition: 0.5s;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card {
|
||||
border-bottom: 1px solid #eee;
|
||||
box-shadow: none;
|
||||
.card-header {
|
||||
color: #0275d8;
|
||||
padding: 1rem 1.5rem;
|
||||
background: transparent;
|
||||
border-bottom: 0;
|
||||
a {
|
||||
.rotate-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.fa-angle-down {
|
||||
float: right;
|
||||
}
|
||||
.card-block {
|
||||
padding-top: .25rem;
|
||||
}
|
||||
|
||||
&.is-collapsed {
|
||||
.card-header {
|
||||
a {
|
||||
.rotate-icon {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Collapsible body
|
||||
.collapsible-body {
|
||||
display: none;
|
||||
}
|
||||
.card {
|
||||
position: relative;
|
||||
.card-block {
|
||||
-webkit-box-flex: 1;
|
||||
flex: 1 1 auto;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
.fa-angle-down.rotate-icon {
|
||||
transition: all 150ms ease-in 0s;
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
ng2-completer {
|
||||
.completer-dropdown-holder {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
.md-form {
|
||||
label {
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.completer-dropdown {
|
||||
margin-top: 1px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,.25);
|
||||
z-index: 100;
|
||||
max-height: 210px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
.completer-row {
|
||||
width: 100%;
|
||||
padding: 12px 15px;
|
||||
font-size: .875rem;
|
||||
.completer-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
.completer-image-holder {
|
||||
float: left;
|
||||
width: 10%;
|
||||
.completer-image-default {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.completer-item-text-image {
|
||||
float: right;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
.completer-no-results,
|
||||
.completer-searching {
|
||||
padding: 12px 15px;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.completer-selected-row {
|
||||
background-color: #eee;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
.md-form label.active {
|
||||
color: #4285f4;
|
||||
}
|
||||
@ -0,0 +1,49 @@
|
||||
// Button tags
|
||||
.waves-input-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Flat button
|
||||
.btn {
|
||||
&.btn-flat {
|
||||
color: inherit!important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-flat {
|
||||
background: transparent;
|
||||
color: inherit!important;
|
||||
position: relative;
|
||||
padding: 8px 30px;
|
||||
border: none;
|
||||
margin: 10px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
outline: none !important;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
//Fixed buttons
|
||||
.fixed-action-btn {
|
||||
.fixed_collapse{
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 70px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
&.btn-floating {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,137 @@
|
||||
.chip {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, .6);
|
||||
line-height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: 16px;
|
||||
background-color: #eceff1;
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 1rem;
|
||||
img {
|
||||
float: left;
|
||||
margin: 0 8px 0 -12px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.close {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
padding-left: 8px;
|
||||
@include transition (all 0.1s linear);
|
||||
}
|
||||
}
|
||||
|
||||
.chips {
|
||||
border: none;
|
||||
border-bottom: 1px solid $input-border-color;
|
||||
box-shadow: none;
|
||||
margin-bottom: 30px;
|
||||
min-height: 45px;
|
||||
outline: none;
|
||||
padding-bottom: 1rem;
|
||||
transition: all .3s;
|
||||
&.focus {
|
||||
border-bottom: 1px solid $input-focus-color;
|
||||
box-shadow: 0 1px 0 0 $input-focus-color;
|
||||
}
|
||||
&:hover {
|
||||
cursor: text;
|
||||
}
|
||||
.tag.selected {
|
||||
border-bottom: 1px solid $input-focus-color;
|
||||
color: #fff;
|
||||
}
|
||||
.input {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: rgba(0, 0, 0, .6);
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
height: 32px;
|
||||
margin-right: 20px;
|
||||
line-height: 32px;
|
||||
outline: 0;
|
||||
padding: 0 !important;
|
||||
width: 120px !important;
|
||||
}
|
||||
.input:focus {
|
||||
border: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.md-chip-list {
|
||||
.md-chip {
|
||||
background-color: #eceff1;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
display: inline-block;
|
||||
padding: 8px 12px 8px 12px;
|
||||
border-radius: 16px;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
margin-right: 10px;
|
||||
.close {
|
||||
font-size: 16px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
i.md-icon {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border-radius: 15px;
|
||||
&:hover {
|
||||
background: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
input {
|
||||
border: none;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
.material-icons {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
float: right;
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
border-radius: 10px;
|
||||
left: 5px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: gray;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
padding-bottom: 5px;
|
||||
box-shadow: 0 1px rgba(0, 0, 0, 0.12);
|
||||
&.md-focused {
|
||||
box-shadow: 0 2px #106cc8;
|
||||
}
|
||||
}
|
||||
|
||||
.md-chips-input {
|
||||
border: 0;
|
||||
box-shadow: 0 1px rgba(0, 0, 0, 0.12);
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
&:focus {
|
||||
box-shadow: 0 2px #106cc8;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,113 @@
|
||||
.picker__select--month, .picker__select--year {
|
||||
display: inline-block !important;
|
||||
height: 2em;
|
||||
padding: 0;
|
||||
margin-left: .25em;
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
.picker {
|
||||
z-index: 99999;
|
||||
font-size: 15px;
|
||||
text-align: left;
|
||||
line-height: 1.2;
|
||||
color: #000000;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.picker__box .picker__table td.picker__day div.picker__day {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.clockpicker-am-pm-block {
|
||||
button {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mydp {
|
||||
line-height: 1.1;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.picker__nav--prev,
|
||||
.picker__nav--next {
|
||||
position: absolute;
|
||||
padding: .5em 1.55em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
box-sizing: content-box;
|
||||
bottom: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.picker__nav--prev {
|
||||
left: -1em;
|
||||
padding-right: 1.25em;
|
||||
}
|
||||
|
||||
.picker__nav--next {
|
||||
right: -1em;
|
||||
padding-left: 1.25em;
|
||||
}
|
||||
|
||||
.picker__header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.picker__box .picker__table {
|
||||
td.picker__day {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
&.disabled {
|
||||
color: #ccc;
|
||||
background: #eee;
|
||||
}
|
||||
div.picker__day {
|
||||
color: #595959;
|
||||
letter-spacing: -.3;
|
||||
padding: .75rem 0;
|
||||
font-weight: 400;
|
||||
border: 1px solid transparent;
|
||||
outline: none;
|
||||
transition: 0.3s;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.picker__day--today {
|
||||
color: #4285f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mydp .markdate {
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
@media (max-height: 35.875em) {
|
||||
.picker--opened .picker__holder {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.picker--opened .picker__frame {
|
||||
max-height: 572px;
|
||||
height: 572px;
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
doublenavbar {
|
||||
.side-nav, #sidenav-overlay {
|
||||
transition: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
doublenavbar {
|
||||
links {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,68 @@
|
||||
.file-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.file-path-wrapper {
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
&:after {
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
input.file-path {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
height: 2.1rem;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
box-shadow: none;
|
||||
box-sizing: content-box;
|
||||
transition: all .3s;
|
||||
}
|
||||
.btn {
|
||||
position: relative;
|
||||
display: flex;
|
||||
float: none;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
height: 100%;
|
||||
:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=file] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
&::-ms-value {
|
||||
display: none;
|
||||
}
|
||||
&::-ms-browse {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-file {
|
||||
padding-top: 1px;
|
||||
}
|
||||
@ -0,0 +1,184 @@
|
||||
// Rotating card
|
||||
.card-wrapper {
|
||||
height: 500px;
|
||||
position: relative;
|
||||
perspective: 800px;
|
||||
.face {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
h4 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
h5 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.content {
|
||||
text-align: left;
|
||||
padding: 15px;
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.rotate-btn {
|
||||
padding: 1rem;
|
||||
margin-right: -8px;
|
||||
float: right;
|
||||
font-size: 1.2rem;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Front side */
|
||||
.card-up {
|
||||
overflow: hidden;
|
||||
height: 50%;
|
||||
}
|
||||
.card-up img {
|
||||
min-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
height: 120px;
|
||||
margin: -65px auto 0;
|
||||
overflow: hidden;
|
||||
width: 120px;
|
||||
}
|
||||
.avatar img {
|
||||
border: 5px solid #fff;
|
||||
background: none repeat scroll 0 0 #FFFFFF;
|
||||
width: 100%;
|
||||
}
|
||||
/* Card with rotate on click */
|
||||
.card-rotating {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.content {
|
||||
position:relative;
|
||||
.rotate-btn {
|
||||
position:absolute;
|
||||
right:8px;
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Rotate icons */
|
||||
.fa-repeat,
|
||||
.fa-undo {
|
||||
font-size: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.fa-undo {
|
||||
margin-top: 30px;
|
||||
}
|
||||
/* Animation */
|
||||
.card-rotating {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.front,
|
||||
.back {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transition: -webkit-transform 1.0s;
|
||||
transition: transform 1.0s;
|
||||
@extend .z-depth-1;
|
||||
}
|
||||
.fron {
|
||||
z-index: 2;
|
||||
cursor: auto;
|
||||
}
|
||||
.back {
|
||||
-webkit-transform: rotateY(-180deg);
|
||||
transform: rotateY(-180deg);
|
||||
padding: 1rem;
|
||||
.card-title {
|
||||
cursor: pointer;
|
||||
i {
|
||||
color: #9e9e9e;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Click effect */
|
||||
.card-rotating.effect__click.flipped .front {
|
||||
-webkit-transform: rotateY(180deg);
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.card-rotating.effect__click.flipped .back {
|
||||
-webkit-transform: rotateY(0);
|
||||
transform: rotateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Fix to remove white line in YouTube player
|
||||
.embed-responsive-item {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
|
||||
.tp-box {
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 1s;
|
||||
.tp-box_side {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
/*cursor: pointer;*/
|
||||
}
|
||||
.tp-box_back {
|
||||
transform: rotateY(179.9deg);
|
||||
}
|
||||
}
|
||||
|
||||
.flip-container {
|
||||
perspective: 1000px;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
.flipper {
|
||||
transition: 1s;
|
||||
transform-style: preserve-3d;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.front {
|
||||
z-index: 2;
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
|
||||
.back {
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
|
||||
.front, .back {
|
||||
backface-visibility: hidden;
|
||||
transition: 1s;
|
||||
transform-style: preserve-3d;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.rotate .back {
|
||||
transform: rotateY(0deg);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&.rotate .front {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,268 @@
|
||||
ImageModal {
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
.hide_lightbox {
|
||||
display: none;
|
||||
}
|
||||
.ng-gallery {
|
||||
display: flex;
|
||||
width: auto;
|
||||
flex-wrap: wrap;
|
||||
img.ng-thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float: none;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.ng-overlay {
|
||||
outline: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 1;
|
||||
z-index: 9999;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
.ng-gallery-content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10000;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
> a {
|
||||
&.close-popup {
|
||||
font-size: 42px;
|
||||
float: right;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
margin: 0 30px 0 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
}
|
||||
&.download-image {
|
||||
font-size: 42px;
|
||||
float: right;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
margin: 0 30px 0 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 63px;
|
||||
}
|
||||
}
|
||||
.nav-left {
|
||||
span {
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
&:before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 30px;
|
||||
background: url('../img/lightbox/default-skin.png');
|
||||
background-position: -138px -44px;
|
||||
opacity: 0.75;
|
||||
transition: opacity 0.2s;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&:hover span:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.nav-right {
|
||||
span {
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
&:before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 30px;
|
||||
background: url('../img/lightbox/default-skin.png');
|
||||
background-position: -94px -44px;
|
||||
opacity: 0.75;
|
||||
transition: opacity 0.2s;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&:hover span:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
> {
|
||||
img {
|
||||
width: 100%;
|
||||
&.smooth {
|
||||
transition: 0.2s;
|
||||
}
|
||||
}
|
||||
a {
|
||||
&.nav-left, &.nav-right {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 60px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
&.nav-left {
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&.nav-right {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
img {
|
||||
max-width: 1600px;
|
||||
max-height: 1067px;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
&.effect {
|
||||
animation: fadeIn 0.5s;
|
||||
}
|
||||
}
|
||||
span.info-text {
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 100px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.ng-thumbnails-wrapper {
|
||||
width: 400px;
|
||||
height: 70px;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow-x: hidden;
|
||||
> .ng-thumbnails {
|
||||
width: 4000px;
|
||||
height: 70px;
|
||||
> div > img {
|
||||
width: auto;
|
||||
height: 70px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
&:hover, &.active {
|
||||
transition: opacity 0.25s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0.3; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
z-index: 10001;
|
||||
.info-text {
|
||||
position: absolute;
|
||||
height: 44px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 16px;
|
||||
line-height: 44px;
|
||||
color: #fff;
|
||||
opacity: 0.75;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.close-popup {
|
||||
position: relative;
|
||||
float: right;
|
||||
background-size: 264px 88px;
|
||||
display: block;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: url('../img/lightbox/default-skin.png');
|
||||
background-position: 0 -44px;
|
||||
opacity: 0.75;
|
||||
transition: opacity 0.2s;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.fullscreen-toogle {
|
||||
position: relative;
|
||||
float: right;
|
||||
background-size: 264px 88px;
|
||||
display: block;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: url('../img/lightbox/default-skin.png');
|
||||
opacity: 0.75;
|
||||
transition: opacity 0.2s;
|
||||
&.toggled {
|
||||
background-position: -44px 0;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.zoom-toogle {
|
||||
position: relative;
|
||||
float: right;
|
||||
background-size: 264px 88px;
|
||||
display: block;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: url('../img/lightbox/default-skin.png');
|
||||
background-position: -88px 0;
|
||||
opacity: 0.75;
|
||||
transition: opacity 0.2s;
|
||||
&.zoom {
|
||||
background-position: -132px 0;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,398 @@
|
||||
/*ng-select*/
|
||||
ng-select {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: Roboto, sans-serif;
|
||||
outline: none;
|
||||
}
|
||||
> div {
|
||||
border: transparent;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
&.disabled {
|
||||
background-color: #eee;
|
||||
color: #aaa;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
> div.single > div {
|
||||
&.placeholder, &.clear, &.toggle {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
> div {
|
||||
&.single {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
outline: 0;
|
||||
line-height: 2rem;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
margin: 0 0;
|
||||
padding: 5px 0;
|
||||
display: block;
|
||||
user-select: none;
|
||||
> div {
|
||||
&.value {
|
||||
flex: 1;
|
||||
line-height: 2rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: #292b2c;
|
||||
padding: 0;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
&.placeholder {
|
||||
flex: 1;
|
||||
line-height: 2rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: #292b2c;
|
||||
padding: 0;
|
||||
color: black;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
&.clear, &.toggle {
|
||||
float: right;
|
||||
color: black;
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
width: 30px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 10px;
|
||||
}
|
||||
&.clear:hover, &.toggle:hover {
|
||||
background-color: #ececec;
|
||||
}
|
||||
&.clear, &.toggle:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
&.clear {
|
||||
font-size: 18px;
|
||||
}
|
||||
&.toggle {
|
||||
font-size: 14px;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.multiple {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
outline: 0;
|
||||
line-height: 2rem;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
margin: 0 0;
|
||||
padding: 5px 0 7px 0;
|
||||
display: block;
|
||||
user-select: none;
|
||||
min-height: 30px;
|
||||
> div.toggle {
|
||||
float: right;
|
||||
color: black;
|
||||
// line-height: 30px;
|
||||
text-align: center;
|
||||
width: 30px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0px;
|
||||
font-size: 14px;
|
||||
}
|
||||
> div.option {
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
line-height: 2rem;
|
||||
span.deselect-option {
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
height: 20px;
|
||||
line-height: 2rem;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: #292b2c;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
&:hover {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
&:first-child span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// display: flex;
|
||||
input {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
height: 30px;
|
||||
line-height: 2rem;
|
||||
padding: 0;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
label {
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
display: block;
|
||||
font-size: .8rem;
|
||||
padding: 4px 0;
|
||||
}
|
||||
select-dropdown {
|
||||
box-sizing: border-box;
|
||||
font-family: Sans-Serif;
|
||||
color: #4285f4;
|
||||
font-size: 19.2px;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: Sans-Serif;
|
||||
}
|
||||
> div {
|
||||
background-color: #fff;
|
||||
outline: transparent;
|
||||
border: 0;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
border-top: none;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
.filter {
|
||||
padding: 3px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ccc;
|
||||
input {
|
||||
outline: 1px solid transparent;
|
||||
border: 1px solid transparent;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
width: 100%;
|
||||
&:focus {
|
||||
outline: 1px solid transparent;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.options {
|
||||
max-height: 185px;
|
||||
overflow-y: auto;
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.selected {
|
||||
background-color: #eee;
|
||||
}
|
||||
.highlighted {
|
||||
background-color: #eee;
|
||||
color: #4285F4;
|
||||
}
|
||||
.disabled {
|
||||
background-color: #fff;
|
||||
color: #9e9e9e;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-button {
|
||||
&:start:decrement, &:end:increment {
|
||||
display: block;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:vertical {
|
||||
height: 50px;
|
||||
background-color: #999;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-content {
|
||||
background-color: #fff;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
min-width: 100px;
|
||||
max-height: 650px;
|
||||
overflow-y: hidden;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
will-change: width,height;
|
||||
li > {
|
||||
a, span {
|
||||
color: #4285F4;
|
||||
}
|
||||
}
|
||||
li {
|
||||
&.disabled {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
background-color: transparent !important;
|
||||
> span {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
&.optgroup {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
background-color: transparent !important;
|
||||
border-top: 1px solid #eee;
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
> span {
|
||||
color: rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-content li > a, .dropdown-content li > span {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-primary.colorful-select .dropdown-content li {
|
||||
&.active, &.selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
&.active span, &.selected span {
|
||||
background-color: $primary-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-danger.colorful-select .dropdown-content li {
|
||||
&.active, &.selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
&.active span, &.selected span {
|
||||
background-color: $danger-color-dark;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.dropdown-default.colorful-select .dropdown-content li {
|
||||
&.active, &.selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
&.active span, &.selected span {
|
||||
background-color: $default-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.dropdown-secondary.colorful-select .dropdown-content li {
|
||||
&.active, &.selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
&.active span, &.selected span {
|
||||
background-color: $secondary-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.dropdown-success.colorful-select .dropdown-content li {
|
||||
&.active, &.selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
&.active span, &.selected span {
|
||||
background-color: $success-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.dropdown-info.colorful-select .dropdown-content li {
|
||||
&.active, &.selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
&.active span, &.selected span {
|
||||
background-color: $info-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.dropdown-warning.colorful-select .dropdown-content li {
|
||||
&.active, &.selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
&.active span, &.selected span {
|
||||
background-color: $warning-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.dropdown-ins.colorful-select .dropdown-content li {
|
||||
&.active, &.selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
&.active span, &.selected span {
|
||||
background-color: $unique-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.dropdown-dark.colorful-select .dropdown-content li {
|
||||
&.active, &.selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
&.active span, &.selected span {
|
||||
background-color: $elegant-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
ng-select+label {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
//select animation
|
||||
ng-select{
|
||||
select-dropdown{
|
||||
display: block;
|
||||
transition: 0.55s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fadeInSelect {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,815 @@
|
||||
// Progress
|
||||
.progress {
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
background-color: #eee;
|
||||
.progress-bar {
|
||||
box-shadow: none;
|
||||
height: 4px;
|
||||
border-radius: 0;
|
||||
background-color: $primary-color-dark;
|
||||
}
|
||||
.progress-bar-animated {
|
||||
-webkit-transition: width 2s ease-in-out;
|
||||
transition: width 2s ease-in-out;
|
||||
}
|
||||
.indeterminate {
|
||||
background-color: #90caf9;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
will-change: left, right;
|
||||
// Custom bezier
|
||||
@include animation(indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite);
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
will-change: left, right;
|
||||
// Custom bezier
|
||||
@include animation(indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite);
|
||||
@include animation-delay(1.15s);
|
||||
}
|
||||
}
|
||||
@include keyframes(indeterminate) {
|
||||
0% {
|
||||
left: -35%;
|
||||
right: 100%;
|
||||
}
|
||||
60% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
}
|
||||
@include keyframes(indeterminate-short) {
|
||||
0% {
|
||||
left: -200%;
|
||||
right: 100%;
|
||||
}
|
||||
60% {
|
||||
left: 107%;
|
||||
right: -8%;
|
||||
}
|
||||
100% {
|
||||
left: 107%;
|
||||
right: -8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*********************
|
||||
CIRCLE
|
||||
**********************/
|
||||
|
||||
|
||||
/*
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
|
||||
|
||||
/**************************/
|
||||
|
||||
|
||||
/* STYLES FOR THE SPINNER */
|
||||
|
||||
|
||||
/**************************/
|
||||
|
||||
|
||||
/*
|
||||
* Constants:
|
||||
* STROKEWIDTH = 3px
|
||||
* ARCSIZE = 270 degrees (amount of circle the arc takes up)
|
||||
* ARCTIME = 1333ms (time it takes to expand and contract arc)
|
||||
* ARCSTARTROT = 216 degrees (how much the start location of the arc
|
||||
* should rotate each time, 216 gives us a
|
||||
* 5 pointed star shape (it's 360/5 * 3).
|
||||
* For a 7 pointed star, we might do
|
||||
* 360/7 * 3 = 154.286)
|
||||
* CONTAINERWIDTH = 28px
|
||||
* SHRINK_TIME = 400ms
|
||||
*/
|
||||
|
||||
.preloader-wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
&.small {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
&.big {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
&.active {
|
||||
/* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
|
||||
-webkit-animation: container-rotate 1568ms linear infinite;
|
||||
animation: container-rotate 1568ms linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes container-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes container-rotate {
|
||||
to {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-layer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.spinner-blue,
|
||||
.spinner-blue-only {
|
||||
border-color: #4285f4;
|
||||
}
|
||||
|
||||
.spinner-red,
|
||||
.spinner-red-only {
|
||||
border-color: #db4437;
|
||||
}
|
||||
|
||||
.spinner-yellow,
|
||||
.spinner-yellow-only {
|
||||
border-color: #f4b400;
|
||||
}
|
||||
|
||||
.spinner-green,
|
||||
.spinner-green-only {
|
||||
border-color: #0f9d58;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
|
||||
*
|
||||
* iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
|
||||
* guarantee that the animation will start _exactly_ after that value. So we avoid using
|
||||
* animation-delay and instead set custom keyframes for each color (as redundant as it
|
||||
* seems).
|
||||
*
|
||||
* We write out each animation in full (instead of separating animation-name,
|
||||
* animation-duration, etc.) because under the polyfill, Safari does not recognize those
|
||||
* specific properties properly, treats them as -webkit-animation, and overrides the
|
||||
* other animation rules. See https://github.com/Polymer/platform/issues/53.
|
||||
*/
|
||||
|
||||
.active .spinner-layer.spinner-blue {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.spinner-red {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.spinner-yellow {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.spinner-green {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.spinner-blue-only,
|
||||
.active .spinner-layer.spinner-red-only,
|
||||
.active .spinner-layer.spinner-yellow-only,
|
||||
.active .spinner-layer.spinner-green-only,
|
||||
.active .spinner-layer.spinner-primary-color-only {
|
||||
/* durations: 4 * ARCTIME */
|
||||
opacity: 1;
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fill-unfill-rotate {
|
||||
12.5% {
|
||||
-webkit-transform: rotate(135deg);
|
||||
}
|
||||
/* 0.5 * ARCSIZE */
|
||||
25% {
|
||||
-webkit-transform: rotate(270deg);
|
||||
}
|
||||
/* 1 * ARCSIZE */
|
||||
37.5% {
|
||||
-webkit-transform: rotate(405deg);
|
||||
}
|
||||
/* 1.5 * ARCSIZE */
|
||||
50% {
|
||||
-webkit-transform: rotate(540deg);
|
||||
}
|
||||
/* 2 * ARCSIZE */
|
||||
62.5% {
|
||||
-webkit-transform: rotate(675deg);
|
||||
}
|
||||
/* 2.5 * ARCSIZE */
|
||||
75% {
|
||||
-webkit-transform: rotate(810deg);
|
||||
}
|
||||
/* 3 * ARCSIZE */
|
||||
87.5% {
|
||||
-webkit-transform: rotate(945deg);
|
||||
}
|
||||
/* 3.5 * ARCSIZE */
|
||||
to {
|
||||
-webkit-transform: rotate(1080deg);
|
||||
}
|
||||
/* 4 * ARCSIZE */
|
||||
}
|
||||
|
||||
@keyframes fill-unfill-rotate {
|
||||
12.5% {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
/* 0.5 * ARCSIZE */
|
||||
25% {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
/* 1 * ARCSIZE */
|
||||
37.5% {
|
||||
transform: rotate(405deg);
|
||||
}
|
||||
/* 1.5 * ARCSIZE */
|
||||
50% {
|
||||
transform: rotate(540deg);
|
||||
}
|
||||
/* 2 * ARCSIZE */
|
||||
62.5% {
|
||||
transform: rotate(675deg);
|
||||
}
|
||||
/* 2.5 * ARCSIZE */
|
||||
75% {
|
||||
transform: rotate(810deg);
|
||||
}
|
||||
/* 3 * ARCSIZE */
|
||||
87.5% {
|
||||
transform: rotate(945deg);
|
||||
}
|
||||
/* 3.5 * ARCSIZE */
|
||||
to {
|
||||
transform: rotate(1080deg);
|
||||
}
|
||||
/* 4 * ARCSIZE */
|
||||
}
|
||||
|
||||
@-webkit-keyframes blue-fade-in-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
25% {
|
||||
opacity: 1;
|
||||
}
|
||||
26% {
|
||||
opacity: 0;
|
||||
}
|
||||
89% {
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blue-fade-in-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
25% {
|
||||
opacity: 1;
|
||||
}
|
||||
26% {
|
||||
opacity: 0;
|
||||
}
|
||||
89% {
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes red-fade-in-out {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
15% {
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes red-fade-in-out {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
15% {
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes yellow-fade-in-out {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
76% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes yellow-fade-in-out {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
76% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes green-fade-in-out {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
65% {
|
||||
opacity: 0;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes green-fade-in-out {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
65% {
|
||||
opacity: 0;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Patch the gap that appear between the two adjacent div.circle-clipper while the
|
||||
* spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
|
||||
*/
|
||||
|
||||
.gap-patch {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 45%;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.gap-patch .circle {
|
||||
width: 1000%;
|
||||
left: -450%;
|
||||
}
|
||||
|
||||
.circle-clipper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
.circle {
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
border-width: 3px;
|
||||
/* STROKEWIDTH */
|
||||
border-style: solid;
|
||||
border-color: inherit;
|
||||
border-bottom-color: transparent !important;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
&.left .circle {
|
||||
left: 0;
|
||||
border-right-color: transparent !important;
|
||||
-webkit-transform: rotate(129deg);
|
||||
transform: rotate(129deg);
|
||||
}
|
||||
&.right .circle {
|
||||
left: -100%;
|
||||
border-left-color: transparent !important;
|
||||
-webkit-transform: rotate(-129deg);
|
||||
transform: rotate(-129deg);
|
||||
}
|
||||
}
|
||||
|
||||
.active .circle-clipper.left .circle {
|
||||
/* duration: ARCTIME */
|
||||
-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .circle-clipper.right .circle {
|
||||
/* duration: ARCTIME */
|
||||
-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes left-spin {
|
||||
from {
|
||||
-webkit-transform: rotate(130deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(-5deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(130deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes left-spin {
|
||||
from {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes right-spin {
|
||||
from {
|
||||
-webkit-transform: rotate(-130deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(5deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(-130deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes right-spin {
|
||||
from {
|
||||
transform: rotate(-130deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(-130deg);
|
||||
}
|
||||
}
|
||||
|
||||
#spinnerContainer.cooldown {
|
||||
/* duration: SHRINK_TIME */
|
||||
-webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#mdb-preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #000;
|
||||
/* change if the mask should have another color then white */
|
||||
z-index: 9998;
|
||||
/* makes sure it stays on top */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.spinning-preloader-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #000;
|
||||
transition: opacity .3s cubic-bezier(.645, .045, .355, 1)
|
||||
}
|
||||
|
||||
.spinning-preloader-container.complete {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
// <progressbar> static
|
||||
.progress {
|
||||
height: 4px !important;
|
||||
.progress-bar {
|
||||
&.progress-bar-success {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
&.progress-bar-info {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
&.progress-bar-warning {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
&.progress-bar-danger {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//<md-progress-bar>
|
||||
.primary-color-dark {
|
||||
.mat-progress-bar-buffer {
|
||||
background-color: #90caf9 !important;
|
||||
}
|
||||
.mat-progress-bar-fill::after {
|
||||
background-color: #0d47a1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//<progress-spinner>
|
||||
.preloader-wrapper {
|
||||
.mat-progress-spinner {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
svg path {
|
||||
transition: stroke 0.3s;
|
||||
stroke-width: 6px !important;
|
||||
}
|
||||
&[mode=indeterminate] svg {
|
||||
animation-duration: 5332ms,1333ms !important;
|
||||
}
|
||||
}
|
||||
.spinner-blue-only.mat-progress-spinner svg path {
|
||||
stroke: #4285f4;
|
||||
}
|
||||
|
||||
.spinner-red-only.mat-progress-spinner svg path {
|
||||
stroke: #db4437;
|
||||
}
|
||||
|
||||
.spinner-yellow-only.mat-progress-spinner svg path {
|
||||
stroke: #f4b400;
|
||||
}
|
||||
|
||||
.spinner-green-only.mat-progress-spinner svg path {
|
||||
stroke: #0f9d58;
|
||||
}
|
||||
}
|
||||
|
||||
.preloader-wrapper.crazy {
|
||||
animation: container-rotate 784ms linear infinite;
|
||||
}
|
||||
|
||||
md-progress-spinner, mat-progress-spinner {
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transform-origin: center
|
||||
}
|
||||
path {
|
||||
fill: transparent;
|
||||
stroke-width: 10px;
|
||||
transition: stroke .3s cubic-bezier(.35, 0, .25, 1)
|
||||
}
|
||||
&[mode=indeterminate] svg {
|
||||
animation-duration: 5.25s, 2.887s;
|
||||
animation-name: mat-progress-spinner-sporadic-rotate, mat-progress-spinner-linear-rotate;
|
||||
animation-timing-function: cubic-bezier(.35, 0, .25, 1), linear;
|
||||
animation-iteration-count: infinite;
|
||||
transition: none
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes mat-progress-spinner-linear-rotate {
|
||||
0% {
|
||||
transform: rotate(0)
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mat-progress-spinner-sporadic-rotate {
|
||||
12.5% {
|
||||
transform: rotate(135deg)
|
||||
}
|
||||
25% {
|
||||
transform: rotate(270deg)
|
||||
}
|
||||
37.5% {
|
||||
transform: rotate(405deg)
|
||||
}
|
||||
50% {
|
||||
transform: rotate(540deg)
|
||||
}
|
||||
62.5% {
|
||||
transform: rotate(675deg)
|
||||
}
|
||||
75% {
|
||||
transform: rotate(810deg)
|
||||
}
|
||||
87.5% {
|
||||
transform: rotate(945deg)
|
||||
}
|
||||
100% {
|
||||
transform: rotate(1080deg)
|
||||
}
|
||||
}
|
||||
|
||||
.spinning-preloader-container{
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
z-index:1000;
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
-webkit-box-align:center;
|
||||
-ms-flex-align:center;
|
||||
align-items:center;
|
||||
-webkit-box-pack:center;
|
||||
-ms-flex-pack:center;
|
||||
justify-content:center;
|
||||
background:-webkit-linear-gradient(top,#fff 0,#f2f2f2 100%) #f2f2f2;
|
||||
background:linear-gradient(to bottom,#fff 0,#f2f2f2 100%) #f2f2f2;
|
||||
-webkit-transition:opacity .3s cubic-bezier(.645,.045,.355,1);
|
||||
transition:opacity .3s cubic-bezier(.645,.045,.355,1)
|
||||
}
|
||||
.spinning-preloader-container>.spinning-preloader-elements,.spinning-preloader-container>.spinning-preloader-elements:after,.spinning-preloader-container>.spinning-preloader-elements:before{
|
||||
border:3px solid transparent;
|
||||
border-radius:50%;
|
||||
}
|
||||
.spinning-preloader-container>.spinning-preloader-elements{
|
||||
display:block;
|
||||
width:150px;
|
||||
height:150px;
|
||||
border-top-color:#44749d;
|
||||
z-index:1500;
|
||||
opacity:1;
|
||||
-webkit-animation:spin 2s linear infinite;
|
||||
animation:spin 2s linear infinite;
|
||||
}
|
||||
.spinning-preloader-container>.spinning-preloader-elements:after,.spinning-preloader-container>.spinning-preloader-elements:before{
|
||||
content:'';
|
||||
position:absolute;
|
||||
}
|
||||
.spinning-preloader-container>.spinning-preloader-elements:before{top:5px;
|
||||
left:5px;
|
||||
right:5px;
|
||||
bottom:5px;
|
||||
border-top-color:#da222b;
|
||||
-webkit-animation:spin 3s linear infinite;
|
||||
animation:spin 3s linear infinite;
|
||||
}
|
||||
.spinning-preloader-container>.spinning-preloader-elements:after{top:15px;
|
||||
left:15px;
|
||||
right:15px;
|
||||
bottom:15px;
|
||||
border-top-color:#f6dc74;
|
||||
-webkit-animation:spin 1.5s linear infinite;
|
||||
animation:spin 1.5s linear infinite;
|
||||
}
|
||||
|
||||
.spinning-preloader-container.complete{
|
||||
opacity:0;
|
||||
display:none;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin{from{-webkit-transform:rotateZ(0);
|
||||
transform:rotateZ(0)}to{-webkit-transform:rotateZ(360deg);
|
||||
transform:rotateZ(360deg)}
|
||||
}
|
||||
|
||||
@keyframes spin{from{-webkit-transform:rotateZ(0);
|
||||
transform:rotateZ(0)}to{-webkit-transform:rotateZ(360deg);
|
||||
transform:rotateZ(360deg)}
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
.range-field {
|
||||
position: relative;
|
||||
.track {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
left: 8px;
|
||||
.range-cloud {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
top: -25px;
|
||||
background-color: #4285F4;
|
||||
position: absolute;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
transform: translateX(-50%);
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 70%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 7px 7px 0 7px;
|
||||
border-color: #4285F4 transparent transparent transparent;
|
||||
}
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
&.visible {
|
||||
display: block;
|
||||
}
|
||||
.text-transform {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,766 @@
|
||||
#sidenav-overlay {
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.side-nav {
|
||||
transition: 0.5s;
|
||||
background: #2c2f34;
|
||||
|
||||
&.side-nav-light {
|
||||
background-color: #e5e5e5;
|
||||
.collapsible .card .card-header a h5 {
|
||||
color: #555;
|
||||
}
|
||||
.collapsible .card .card-header a:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.collapsible .card.active .card-header a {
|
||||
h5 {
|
||||
color: #4285F4;
|
||||
i {
|
||||
color: #4285f4;
|
||||
}
|
||||
}
|
||||
background-color: transparent;
|
||||
}
|
||||
.collapsible .card-block li a {
|
||||
color: #555;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,.15);
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: #555;
|
||||
font-weight: 400;
|
||||
.fa {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
input[type=text] {
|
||||
border-bottom-color: rgba(153,153,153,.3);
|
||||
color: #555!important;
|
||||
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
color: #555!important;;
|
||||
}
|
||||
&::-moz-placeholder { /* Firefox 19+ */
|
||||
color: #555!important;;
|
||||
}
|
||||
&:-ms-input-placeholder { /* IE 10+ */
|
||||
color: #555!important;;
|
||||
}
|
||||
&:-moz-placeholder { /* Firefox 18- */
|
||||
color: #555!important;;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-button {
|
||||
&:start:decrement, &:end:increment {
|
||||
display: block;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:vertical {
|
||||
height: 50px;
|
||||
background-color: #999;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
input[type=text]:focus:not([readonly]) {
|
||||
border-bottom: 1px solid #4285f4;
|
||||
box-shadow: 0 1px 0 0 #4285f4;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
.no-collase {
|
||||
.rotate-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
background-color: transparent;
|
||||
border-bottom: 0 !important;
|
||||
.card-header {
|
||||
padding: 0 !important;
|
||||
a {
|
||||
transition: all 0.3s;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
border-radius: 2px;
|
||||
padding: 0;
|
||||
&:hover {
|
||||
background-color: rgba(255,255,255,.15);
|
||||
}
|
||||
h5 {
|
||||
padding-left: 20px;
|
||||
font-size: 0.8rem;
|
||||
line-height: 36px;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
}
|
||||
.fa {
|
||||
font-size: .8rem;
|
||||
margin-right: 13px;
|
||||
padding: 0;
|
||||
}
|
||||
.rotate-icon {
|
||||
top: 13px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.card-header {
|
||||
a {
|
||||
background-color: rgba(255,255,255,.15);
|
||||
h5 {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-block {
|
||||
padding: 0 !important;
|
||||
li {
|
||||
a {
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
padding-left: 30px;
|
||||
font-size: 0.8rem;
|
||||
line-height: 36px;
|
||||
height: 36px;
|
||||
padding-left: 47px;
|
||||
font-weight: 300;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
&:first-of-type {
|
||||
border-top: 0 !important;
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.white-skin .side-nav {
|
||||
.social {
|
||||
a {
|
||||
.fa {
|
||||
transition: 0.3s;
|
||||
}
|
||||
&:hover {
|
||||
.fa {
|
||||
color: #4285f4;
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
.card {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #424242;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #4285F4;
|
||||
.fa {
|
||||
color: #4285F4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-block {
|
||||
li {
|
||||
a {
|
||||
color: #424242;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
&:hover {
|
||||
color: #4285F4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.black-skin .side-nav {
|
||||
.social {
|
||||
a {
|
||||
.fa {
|
||||
transition: 0.3s;
|
||||
}
|
||||
&:hover {
|
||||
.fa {
|
||||
color: #2AD1A3;
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
.card {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #2AD1A3;
|
||||
.fa {
|
||||
color: #2AD1A3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-block {
|
||||
li {
|
||||
a {
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
&:hover {
|
||||
color: #2AD1A3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cyan-skin .side-nav {
|
||||
.social {
|
||||
a {
|
||||
.fa {
|
||||
transition: 0.3s;
|
||||
}
|
||||
&:hover {
|
||||
.fa {
|
||||
color: #ffa742;
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text]:focus:not([readonly]) {
|
||||
border-bottom: 1px solid #ffa742;
|
||||
box-shadow: 0 1px 0 0 #ffa742;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
.card {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(29,65,82,.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
background-color: rgba(29,65,82,.8);
|
||||
.fa {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-block {
|
||||
li {
|
||||
a {
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
&:hover {
|
||||
color: #ffa742;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdb-skin .side-nav {
|
||||
.social {
|
||||
a {
|
||||
.fa {
|
||||
transition: 0.3s;
|
||||
}
|
||||
&:hover {
|
||||
.fa {
|
||||
color: #33b5e5;
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text]:focus:not([readonly]) {
|
||||
border-bottom: 1px solid #33b5e5;
|
||||
box-shadow: 0 1px 0 0 #33b5e5;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
.card {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(72,198,255,.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
background-color: rgba(72,198,255,.8);
|
||||
.fa {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-block {
|
||||
li {
|
||||
a {
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
&:hover {
|
||||
color: #33b5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.deep-purple-skin .side-nav {
|
||||
.social {
|
||||
a {
|
||||
.fa {
|
||||
transition: 0.3s;
|
||||
}
|
||||
&:hover {
|
||||
.fa {
|
||||
color: #d0637c;
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text]:focus:not([readonly]) {
|
||||
border-bottom: 1px solid #d0637c;
|
||||
box-shadow: 0 1px 0 0 #d0637c;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
.card {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(176,139,240,.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
background-color: rgba(176,139,240,.5);
|
||||
.fa {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-block {
|
||||
li {
|
||||
a {
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
&:hover {
|
||||
color: #d0637c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navy-blue-skin .side-nav {
|
||||
.social {
|
||||
a {
|
||||
.fa {
|
||||
transition: 0.3s;
|
||||
}
|
||||
&:hover {
|
||||
.fa {
|
||||
color: #40c6c6;
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text]:focus:not([readonly]) {
|
||||
border-bottom: 1px solid #40c6c6;
|
||||
box-shadow: 0 1px 0 0 #40c6c6;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
.card {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(37,207,207,.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
background-color: rgba(37,207,207,.8);
|
||||
.fa {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-block {
|
||||
li {
|
||||
a {
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
&:hover {
|
||||
color: #40c6c6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pink-skin .side-nav {
|
||||
.social {
|
||||
a {
|
||||
.fa {
|
||||
transition: 0.3s;
|
||||
}
|
||||
&:hover {
|
||||
.fa {
|
||||
color: #ffb0e6;
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text]:focus:not([readonly]) {
|
||||
border-bottom: 1px solid #ffb0e6;
|
||||
box-shadow: 0 1px 0 0 #ffb0e6;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
.card {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,.4);
|
||||
.fa {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-block {
|
||||
li {
|
||||
a {
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
&:hover {
|
||||
color: #ffb0e6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grey-skin .side-nav {
|
||||
.social {
|
||||
a {
|
||||
.fa {
|
||||
transition: 0.3s;
|
||||
}
|
||||
&:hover {
|
||||
.fa {
|
||||
color: #afdffc;
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text]:focus:not([readonly]) {
|
||||
border-bottom: 1px solid #afdffc;
|
||||
box-shadow: 0 1px 0 0 #afdffc;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
.card {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,.4);
|
||||
.fa {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-block {
|
||||
li {
|
||||
a {
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
&:hover {
|
||||
color: #afdffc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indigo-skin .side-nav {
|
||||
.social {
|
||||
a {
|
||||
.fa {
|
||||
transition: 0.3s;
|
||||
}
|
||||
&:hover {
|
||||
.fa {
|
||||
color: #ff89ac;
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text]:focus:not([readonly]) {
|
||||
border-bottom: 1px solid #ff89ac;
|
||||
box-shadow: 0 1px 0 0 #ff89ac;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
.card {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(250,80,121,.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
background-color: rgba(250,80,121,.8);
|
||||
.fa {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-block {
|
||||
li {
|
||||
a {
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
&:hover {
|
||||
color: #ff89ac;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.light-blue-skin .side-nav {
|
||||
.social {
|
||||
a {
|
||||
.fa {
|
||||
transition: 0.3s;
|
||||
}
|
||||
&:hover {
|
||||
.fa {
|
||||
color: #aadeff;
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text]:focus:not([readonly]) {
|
||||
border-bottom: 1px solid #aadeff;
|
||||
box-shadow: 0 1px 0 0 #aadeff;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
.card {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(29,54,86,.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.card-header {
|
||||
a {
|
||||
h5 {
|
||||
color: #fff;
|
||||
background-color: rgba(29,54,86,.6);
|
||||
.fa {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-block {
|
||||
li {
|
||||
a {
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
&:hover {
|
||||
color: #aadeff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
// General
|
||||
.nav-tabs {
|
||||
.nav-item {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
margin-bottom : 0;
|
||||
max-height: 40px;
|
||||
a {
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Vertical Tab
|
||||
tabset {
|
||||
.white {
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 4px 15px 0 rgba(0, 0, 0, 0) !important;
|
||||
li {
|
||||
margin: 0 1em !important;
|
||||
.nav-link.active {
|
||||
transition: all 0.4s !important;
|
||||
}
|
||||
.nav-link {
|
||||
color: #666;
|
||||
&:hover {
|
||||
background-color: $rgba-grey-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #fff !important;
|
||||
@extend .z-depth-1;
|
||||
}
|
||||
.active:hover {
|
||||
@extend .z-depth-1-half;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Classic Tab
|
||||
|
||||
.classic-tabs {
|
||||
overflow-x: hidden;
|
||||
.nav.classic-tabs {
|
||||
margin: 0 5px;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tab-content {
|
||||
margin: 0 5px 5px 5px;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,88 @@
|
||||
.testimonial-carousel {
|
||||
.carousel-control-prev-icon, .carousel-control-next-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.carousel-control {
|
||||
font-size: 5rem;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
&.left {
|
||||
left: 6%;
|
||||
width: auto;
|
||||
}
|
||||
&.right {
|
||||
right: 6%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-indicators {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.carousel-multi-item {
|
||||
.carousel-indicators {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-control-next, .carousel-control-prev {
|
||||
opacity: 1;
|
||||
height: 120px;
|
||||
&:hover {
|
||||
&::before {
|
||||
color: #000;
|
||||
transition: 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-control-prev {
|
||||
-webkit-transform: translateY(-35%);
|
||||
transform: translateY(-35%);
|
||||
left: 6%;
|
||||
width: auto;
|
||||
top: 50%;
|
||||
display: flex;
|
||||
font-size: 5rem;
|
||||
color: rgba(0, 0, 0, 0.6) !important;
|
||||
&::before {
|
||||
content: '\2039';
|
||||
font-size: 5rem;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
transition: 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-control-next {
|
||||
-webkit-transform: translateY(-35%);
|
||||
transform: translateY(-35%);
|
||||
right: 6%;
|
||||
width: auto;
|
||||
top: 50%;
|
||||
display: flex;
|
||||
font-size: 5rem;
|
||||
color: rgba(0, 0, 0, 0.6) !important;
|
||||
&::before {
|
||||
content: '\203a';
|
||||
font-size: 5rem;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
transition: 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.carousel-multi-item.testimonial-carousel .controls-top .btn-floating {
|
||||
background: #01579b;
|
||||
width: 36.15px;
|
||||
height: 36.15px;
|
||||
i {
|
||||
font-size: .96154rem;
|
||||
line-height: 36.15px;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-multi-item.testimonial-carousel .carousel-indicators li {
|
||||
background-color: #01579b;
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
.hand-move {
|
||||
.clockpicker-tick {
|
||||
cursor: all-scroll !important;
|
||||
}
|
||||
}
|
||||
|
||||
.clockpicker-button {
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
&:hover {
|
||||
background-color: rgba(0,150,136,.25)
|
||||
}
|
||||
}
|
||||
|
||||
.darktheme .clockpicker-button {
|
||||
&:hover {
|
||||
background-color: rgba(255, 64, 129, 0.25);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
#toast-container > :hover {
|
||||
transition: .45s;
|
||||
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
opacity: 1 !important;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
filter: alpha(opacity=100);
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.alert {
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
margin-bottom: $alert-margin-bottom;
|
||||
border: $alert-border-width solid transparent;
|
||||
@include border-radius($alert-border-radius);
|
||||
}
|
||||
|
||||
// Headings for larger alerts
|
||||
.alert-heading {
|
||||
// Specified to prevent conflicts of changing $headings-color
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Provide class for links that match alerts
|
||||
.alert-link {
|
||||
font-weight: $alert-link-font-weight;
|
||||
}
|
||||
|
||||
|
||||
// Dismissible alerts
|
||||
//
|
||||
// Expand the right padding and account for the close button's positioning.
|
||||
|
||||
.alert-dismissible {
|
||||
// Adjust close link position
|
||||
.close {
|
||||
position: relative;
|
||||
top: -$alert-padding-y;
|
||||
right: -$alert-padding-x;
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alternate styles
|
||||
//
|
||||
// Generate contextual modifier classes for colorizing the alert.
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.alert-#{$color} {
|
||||
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
// Base class
|
||||
//
|
||||
// Requires one of the contextual, color modifier classes for `color` and
|
||||
// `background-color`.
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: $badge-padding-y $badge-padding-x;
|
||||
font-size: $badge-font-size;
|
||||
font-weight: $badge-font-weight;
|
||||
line-height: 1;
|
||||
color: $badge-color;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
@include border-radius();
|
||||
|
||||
// Empty badges collapse automatically
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Quick fix for badges in buttons
|
||||
.btn .badge {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
// Pill badges
|
||||
//
|
||||
// Make them extra rounded with a modifier to replace v3's badges.
|
||||
|
||||
.badge-pill {
|
||||
padding-right: $badge-pill-padding-x;
|
||||
padding-left: $badge-pill-padding-x;
|
||||
@include border-radius($badge-pill-border-radius);
|
||||
}
|
||||
|
||||
// Colors
|
||||
//
|
||||
// Contextual variations (linked badges get darker on :hover).
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.badge-#{$color} {
|
||||
@include badge-variant($value);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
.breadcrumb {
|
||||
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||
margin-bottom: 1rem;
|
||||
list-style: none;
|
||||
background-color: $breadcrumb-bg;
|
||||
@include border-radius($border-radius);
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
float: left;
|
||||
|
||||
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
||||
+ .breadcrumb-item::before {
|
||||
display: inline-block; // Suppress underlining of the separator in modern browsers
|
||||
padding-right: $breadcrumb-item-padding;
|
||||
padding-left: $breadcrumb-item-padding;
|
||||
color: $breadcrumb-divider-color;
|
||||
content: "#{$breadcrumb-divider}";
|
||||
}
|
||||
|
||||
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
|
||||
// without `<ul>`s. The `::before` pseudo-element generates an element
|
||||
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
|
||||
//
|
||||
// To trick IE into suppressing the underline, we give the pseudo-element an
|
||||
// underline and then immediately remove it.
|
||||
+ .breadcrumb-item:hover::before {
|
||||
text-decoration: underline;
|
||||
}
|
||||
+ .breadcrumb-item:hover::before {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $breadcrumb-active-color;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,198 @@
|
||||
// scss-lint:disable QualifyingElement
|
||||
|
||||
// Make the div behave like a button
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
vertical-align: middle; // match .btn alignment given font-size hack above
|
||||
|
||||
> .btn {
|
||||
position: relative;
|
||||
flex: 0 1 auto;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Bring the hover, focused, and "active" buttons to the front to overlay
|
||||
// the borders properly
|
||||
@include hover {
|
||||
z-index: 2;
|
||||
}
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent double borders when buttons are next to each other
|
||||
.btn + .btn,
|
||||
.btn + .btn-group,
|
||||
.btn-group + .btn,
|
||||
.btn-group + .btn-group {
|
||||
margin-left: -$input-btn-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Optional: Group multiple button groups together for a toolbar
|
||||
.btn-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.input-group {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
|
||||
.btn-group > .btn:first-child {
|
||||
margin-left: 0;
|
||||
|
||||
&:not(:last-child):not(.dropdown-toggle) {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
|
||||
.btn-group > .btn:last-child:not(:first-child),
|
||||
.btn-group > .dropdown-toggle:not(:first-child) {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
|
||||
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
|
||||
.btn-group > .btn-group {
|
||||
float: left;
|
||||
}
|
||||
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-group > .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
//
|
||||
// Remix the default button sizing classes into new ones for easier manipulation.
|
||||
|
||||
.btn-group-sm > .btn { @extend .btn-sm; }
|
||||
.btn-group-lg > .btn { @extend .btn-lg; }
|
||||
|
||||
|
||||
//
|
||||
// Split button dropdowns
|
||||
//
|
||||
|
||||
.btn + .dropdown-toggle-split {
|
||||
padding-right: $input-btn-padding-x * .75;
|
||||
padding-left: $input-btn-padding-x * .75;
|
||||
|
||||
&::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm + .dropdown-toggle-split {
|
||||
padding-right: $input-btn-padding-x-sm * .75;
|
||||
padding-left: $input-btn-padding-x-sm * .75;
|
||||
}
|
||||
|
||||
.btn-lg + .dropdown-toggle-split {
|
||||
padding-right: $input-btn-padding-x-lg * .75;
|
||||
padding-left: $input-btn-padding-x-lg * .75;
|
||||
}
|
||||
|
||||
|
||||
// The clickable button for toggling the menu
|
||||
// Set the same inset shadow as the :active state
|
||||
.btn-group.show .dropdown-toggle {
|
||||
@include box-shadow($btn-active-box-shadow);
|
||||
|
||||
// Show no shadow for `.btn-link` since it has no other button styles.
|
||||
&.btn-link {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Vertical button groups
|
||||
//
|
||||
|
||||
.btn-group-vertical {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
.btn,
|
||||
.btn-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .btn + .btn,
|
||||
> .btn + .btn-group,
|
||||
> .btn-group + .btn,
|
||||
> .btn-group + .btn-group {
|
||||
margin-top: -$input-btn-border-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-vertical > .btn {
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
&:first-child:not(:last-child) {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
&:last-child:not(:first-child) {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
|
||||
|
||||
// Checkbox and radio options
|
||||
//
|
||||
// In order to support the browser's form validation feedback, powered by the
|
||||
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
|
||||
// `display: none;` or `visibility: hidden;` as that also hides the popover.
|
||||
// Simply visually hiding the inputs via `opacity` would leave them clickable in
|
||||
// certain cases which is prevented by using `clip` and `pointer-events`.
|
||||
// This way, we ensure a DOM element is visible to position the popover from.
|
||||
//
|
||||
// See https://github.com/twbs/bootstrap/pull/12794 and
|
||||
// https://github.com/twbs/bootstrap/pull/14559 for more information.
|
||||
|
||||
[data-toggle="buttons"] {
|
||||
> .btn,
|
||||
> .btn-group > .btn {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
clip: rect(0,0,0,0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,141 @@
|
||||
// scss-lint:disable QualifyingElement
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-weight: $btn-font-weight;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
border: $input-btn-border-width solid transparent;
|
||||
@include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
|
||||
@include transition($btn-transition);
|
||||
|
||||
// Share hover and focus styles
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
box-shadow: $btn-focus-box-shadow;
|
||||
}
|
||||
|
||||
// Disabled comes first so active can properly restyle
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
opacity: .65;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
background-image: none;
|
||||
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
// Future-proof disabling of clicks on `<a>` elements
|
||||
a.btn.disabled,
|
||||
fieldset[disabled] a.btn {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alternate buttons
|
||||
//
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-#{$color} {
|
||||
@include button-variant($value, $value);
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-outline-#{$color} {
|
||||
@include button-outline-variant($value, #fff);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Link buttons
|
||||
//
|
||||
|
||||
// Make a button look and behave like a link
|
||||
.btn-link {
|
||||
font-weight: $font-weight-normal;
|
||||
color: $link-color;
|
||||
border-radius: 0;
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&.active,
|
||||
&:disabled {
|
||||
background-color: transparent;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
&,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
@include hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
@include hover-focus {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
background-color: transparent;
|
||||
}
|
||||
&:disabled {
|
||||
color: $btn-link-disabled-color;
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Button Sizes
|
||||
//
|
||||
|
||||
.btn-lg {
|
||||
@include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
@include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Block button
|
||||
//
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Vertically space out multiple block buttons
|
||||
.btn-block + .btn-block {
|
||||
margin-top: $btn-block-spacing-y;
|
||||
}
|
||||
|
||||
// Specificity overrides
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
&.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,223 @@
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: $card-bg;
|
||||
background-clip: border-box;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
@include border-radius($card-border-radius);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
|
||||
// as much space as possible, ensuring footers are aligned to the bottom.
|
||||
flex: 1 1 auto;
|
||||
padding: $card-spacer-x;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: $card-spacer-y;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin-top: -($card-spacer-y / 2);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
@include hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
+ .card-link {
|
||||
margin-left: $card-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
> .list-group:first-child {
|
||||
.list-group-item:first-child {
|
||||
@include border-top-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
> .list-group:last-child {
|
||||
.list-group-item:last-child {
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Optional textual caps
|
||||
//
|
||||
|
||||
.card-header {
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
||||
background-color: $card-cap-bg;
|
||||
border-bottom: $card-border-width solid $card-border-color;
|
||||
|
||||
&:first-child {
|
||||
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
background-color: $card-cap-bg;
|
||||
border-top: $card-border-width solid $card-border-color;
|
||||
|
||||
&:last-child {
|
||||
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Header navs
|
||||
//
|
||||
|
||||
.card-header-tabs {
|
||||
margin-right: -($card-spacer-x / 2);
|
||||
margin-bottom: -$card-spacer-y;
|
||||
margin-left: -($card-spacer-x / 2);
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.card-header-pills {
|
||||
margin-right: -($card-spacer-x / 2);
|
||||
margin-left: -($card-spacer-x / 2);
|
||||
}
|
||||
|
||||
// Card image
|
||||
.card-img-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: $card-img-overlay-padding;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
||||
@include border-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
// Card image caps
|
||||
.card-img-top {
|
||||
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
||||
@include border-top-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
.card-img-bottom {
|
||||
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
||||
@include border-bottom-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
|
||||
// Card deck
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-deck {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin-right: -$card-deck-margin;
|
||||
margin-left: -$card-deck-margin;
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex: 1 0 0%;
|
||||
flex-direction: column;
|
||||
margin-right: $card-deck-margin;
|
||||
margin-left: $card-deck-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Card groups
|
||||
//
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-group {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
.card {
|
||||
flex: 1 0 0%;
|
||||
|
||||
+ .card {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
// Handle rounded corners
|
||||
@if $enable-rounded {
|
||||
&:first-child {
|
||||
@include border-right-radius(0);
|
||||
|
||||
.card-img-top {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
@include border-left-radius(0);
|
||||
|
||||
.card-img-top {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
|
||||
.card-img-top,
|
||||
.card-img-bottom {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Columns
|
||||
//
|
||||
|
||||
.card-columns {
|
||||
.card {
|
||||
margin-bottom: $card-columns-margin;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
column-count: $card-columns-count;
|
||||
column-gap: $card-columns-gap;
|
||||
|
||||
.card {
|
||||
display: inline-block; // Don't let them vertically span multiple columns
|
||||
width: 100%; // Don't let their width change
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,185 @@
|
||||
// Wrapper for the slide container and indicators
|
||||
.carousel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
display: none;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
@include transition($carousel-transition);
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.carousel-item.active,
|
||||
.carousel-item-next,
|
||||
.carousel-item-prev {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.carousel-item-next,
|
||||
.carousel-item-prev {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// CSS3 transforms when supported by the browser
|
||||
.carousel-item-next.carousel-item-left,
|
||||
.carousel-item-prev.carousel-item-right {
|
||||
transform: translateX(0);
|
||||
|
||||
@supports (transform-style: preserve-3d) {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-item-next,
|
||||
.active.carousel-item-right {
|
||||
transform: translateX(100%);
|
||||
|
||||
@supports (transform-style: preserve-3d) {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-item-prev,
|
||||
.active.carousel-item-left {
|
||||
transform: translateX(-100%);
|
||||
|
||||
@supports (transform-style: preserve-3d) {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Left/right controls for nav
|
||||
//
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
// Use flex for alignment (1-3)
|
||||
display: flex; // 1. allow flex styles
|
||||
align-items: center; // 2. vertically center contents
|
||||
justify-content: center; // 3. horizontally center contents
|
||||
width: $carousel-control-width;
|
||||
color: $carousel-control-color;
|
||||
text-align: center;
|
||||
opacity: $carousel-control-opacity;
|
||||
// We can't have a transition here because WebKit cancels the carousel
|
||||
// animation if you trip this while in the middle of another animation.
|
||||
|
||||
// Hover/focus state
|
||||
@include hover-focus {
|
||||
color: $carousel-control-color;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
.carousel-control-prev {
|
||||
left: 0;
|
||||
}
|
||||
.carousel-control-next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Icons for within
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
display: inline-block;
|
||||
width: $carousel-control-icon-width;
|
||||
height: $carousel-control-icon-width;
|
||||
background: transparent no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.carousel-control-prev-icon {
|
||||
background-image: $carousel-control-prev-icon-bg;
|
||||
}
|
||||
.carousel-control-next-icon {
|
||||
background-image: $carousel-control-next-icon-bg;
|
||||
}
|
||||
|
||||
|
||||
// Optional indicator pips
|
||||
//
|
||||
// Add an ordered list with the following class and add a list item for each
|
||||
// slide your carousel holds.
|
||||
|
||||
.carousel-indicators {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 0; // override <ol> default
|
||||
// Use the .carousel-control's width as margin so we don't overlay those
|
||||
margin-right: $carousel-control-width;
|
||||
margin-left: $carousel-control-width;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
flex: 0 1 auto;
|
||||
width: $carousel-indicator-width;
|
||||
height: $carousel-indicator-height;
|
||||
margin-right: $carousel-indicator-spacer;
|
||||
margin-left: $carousel-indicator-spacer;
|
||||
text-indent: -999px;
|
||||
background-color: rgba($carousel-indicator-active-bg, .5);
|
||||
|
||||
// Use pseudo classes to increase the hit area by 10px on top and bottom.
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
content: "";
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: $carousel-indicator-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Optional captions
|
||||
//
|
||||
//
|
||||
|
||||
.carousel-caption {
|
||||
position: absolute;
|
||||
right: ((100% - $carousel-caption-width) / 2);
|
||||
bottom: 20px;
|
||||
left: ((100% - $carousel-caption-width) / 2);
|
||||
z-index: 10;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
color: $carousel-caption-color;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
.close {
|
||||
float: right;
|
||||
font-size: $close-font-size;
|
||||
font-weight: $close-font-weight;
|
||||
line-height: 1;
|
||||
color: $close-color;
|
||||
text-shadow: $close-text-shadow;
|
||||
opacity: .5;
|
||||
|
||||
@include hover-focus {
|
||||
color: $close-color;
|
||||
text-decoration: none;
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional properties for button version
|
||||
// iOS requires the button element instead of an anchor tag.
|
||||
// If you want the anchor version, it requires `href="#"`.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
|
||||
// scss-lint:disable QualifyingElement
|
||||
button.close {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
@ -0,0 +1,64 @@
|
||||
// Inline and block code styles
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
|
||||
// Inline code
|
||||
code {
|
||||
padding: $code-padding-y $code-padding-x;
|
||||
font-size: $code-font-size;
|
||||
color: $code-color;
|
||||
background-color: $code-bg;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Streamline the style when inside anchors to avoid broken underline and more
|
||||
a > & {
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// User input typically entered via keyboard
|
||||
kbd {
|
||||
padding: $code-padding-y $code-padding-x;
|
||||
font-size: $code-font-size;
|
||||
color: $kbd-color;
|
||||
background-color: $kbd-bg;
|
||||
@include border-radius($border-radius-sm);
|
||||
@include box-shadow($kbd-box-shadow);
|
||||
|
||||
kbd {
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
font-weight: $nested-kbd-font-weight;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Blocks of code
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
font-size: $code-font-size;
|
||||
color: $pre-color;
|
||||
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
code {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Enable scrollable blocks of code
|
||||
.pre-scrollable {
|
||||
max-height: $pre-scrollable-max-height;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@ -0,0 +1,254 @@
|
||||
// scss-lint:disable PropertyCount, VendorPrefix
|
||||
|
||||
// Embedded icons from Open Iconic.
|
||||
// Released under MIT and copyright 2014 Waybury.
|
||||
// https://useiconic.com/open
|
||||
|
||||
|
||||
// Checkboxes and radios
|
||||
//
|
||||
// Base class takes care of all the key behavioral aspects.
|
||||
|
||||
.custom-control {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
min-height: (1rem * $line-height-base);
|
||||
padding-left: $custom-control-gutter;
|
||||
margin-right: $custom-control-spacer-x;
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
position: absolute;
|
||||
z-index: -1; // Put the input behind the label so it doesn't overlay text
|
||||
opacity: 0;
|
||||
|
||||
&:checked ~ .custom-control-indicator {
|
||||
color: $custom-control-indicator-checked-color;
|
||||
background-color: $custom-control-indicator-checked-bg;
|
||||
@include box-shadow($custom-control-indicator-checked-box-shadow);
|
||||
}
|
||||
|
||||
&:focus ~ .custom-control-indicator {
|
||||
// the mixin is not used here to make sure there is feedback
|
||||
box-shadow: $custom-control-indicator-focus-box-shadow;
|
||||
}
|
||||
|
||||
&:active ~ .custom-control-indicator {
|
||||
color: $custom-control-indicator-active-color;
|
||||
background-color: $custom-control-indicator-active-bg;
|
||||
@include box-shadow($custom-control-indicator-active-box-shadow);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
~ .custom-control-indicator {
|
||||
background-color: $custom-control-indicator-disabled-bg;
|
||||
}
|
||||
|
||||
~ .custom-control-description {
|
||||
color: $custom-control-description-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom indicator
|
||||
//
|
||||
// Generates a shadow element to create our makeshift checkbox/radio background.
|
||||
|
||||
.custom-control-indicator {
|
||||
position: absolute;
|
||||
top: (($line-height-base - $custom-control-indicator-size) / 2);
|
||||
left: 0;
|
||||
display: block;
|
||||
width: $custom-control-indicator-size;
|
||||
height: $custom-control-indicator-size;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
background-color: $custom-control-indicator-bg;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: $custom-control-indicator-bg-size;
|
||||
@include box-shadow($custom-control-indicator-box-shadow);
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
//
|
||||
// Tweak just a few things for checkboxes.
|
||||
|
||||
.custom-checkbox {
|
||||
.custom-control-indicator {
|
||||
@include border-radius($custom-checkbox-indicator-border-radius);
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-indicator {
|
||||
background-image: $custom-checkbox-indicator-icon-checked;
|
||||
}
|
||||
|
||||
.custom-control-input:indeterminate ~ .custom-control-indicator {
|
||||
background-color: $custom-checkbox-indicator-indeterminate-bg;
|
||||
background-image: $custom-checkbox-indicator-icon-indeterminate;
|
||||
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
// Radios
|
||||
//
|
||||
// Tweak just a few things for radios.
|
||||
|
||||
.custom-radio {
|
||||
.custom-control-indicator {
|
||||
border-radius: $custom-radio-indicator-border-radius;
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-indicator {
|
||||
background-image: $custom-radio-indicator-icon-checked;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Layout options
|
||||
//
|
||||
// By default radios and checkboxes are `inline-block` with no additional spacing
|
||||
// set. Use these optional classes to tweak the layout.
|
||||
|
||||
.custom-controls-stacked {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.custom-control {
|
||||
margin-bottom: $custom-control-spacer-y;
|
||||
|
||||
+ .custom-control {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Select
|
||||
//
|
||||
// Replaces the browser default select with a custom one, mostly pulled from
|
||||
// http://primercss.io.
|
||||
//
|
||||
|
||||
.custom-select {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
height: $input-height;
|
||||
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
|
||||
line-height: $custom-select-line-height;
|
||||
color: $custom-select-color;
|
||||
vertical-align: middle;
|
||||
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
|
||||
background-size: $custom-select-bg-size;
|
||||
border: $custom-select-border-width solid $custom-select-border-color;
|
||||
@if $enable-rounded {
|
||||
border-radius: $custom-select-border-radius;
|
||||
} @else {
|
||||
border-radius: 0;
|
||||
}
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
border-color: $custom-select-focus-border-color;
|
||||
outline: none;
|
||||
@include box-shadow($custom-select-focus-box-shadow);
|
||||
|
||||
&::-ms-value {
|
||||
// For visual consistency with other platforms/browsers,
|
||||
// supress the default white text on blue background highlight given to
|
||||
// the selected option text when the (still closed) <select> receives focus
|
||||
// in IE and (under certain conditions) Edge.
|
||||
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $custom-select-disabled-color;
|
||||
background-color: $custom-select-disabled-bg;
|
||||
}
|
||||
|
||||
// Hides the default caret in IE11
|
||||
&::-ms-expand {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select-sm {
|
||||
height: $custom-select-height-sm;
|
||||
padding-top: $custom-select-padding-y;
|
||||
padding-bottom: $custom-select-padding-y;
|
||||
font-size: $custom-select-font-size-sm;
|
||||
}
|
||||
|
||||
|
||||
// File
|
||||
//
|
||||
// Custom file input.
|
||||
|
||||
.custom-file {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
height: $custom-file-height;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.custom-file-input {
|
||||
min-width: $custom-file-width;
|
||||
max-width: 100%;
|
||||
height: $custom-file-height;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
|
||||
&:focus ~ .custom-file-control {
|
||||
@include box-shadow($custom-file-focus-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-file-control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
height: $custom-file-height;
|
||||
padding: $custom-file-padding-x $custom-file-padding-y;
|
||||
line-height: $custom-file-line-height;
|
||||
color: $custom-file-color;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
background-color: $custom-file-bg;
|
||||
border: $custom-file-border-width solid $custom-file-border-color;
|
||||
@include border-radius($custom-file-border-radius);
|
||||
@include box-shadow($custom-file-box-shadow);
|
||||
|
||||
@each $lang, $text in map-get($custom-file-text, placeholder) {
|
||||
&:lang(#{$lang}):empty::after {
|
||||
content: $text;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -$custom-file-border-width;
|
||||
right: -$custom-file-border-width;
|
||||
bottom: -$custom-file-border-width;
|
||||
z-index: 6;
|
||||
display: block;
|
||||
height: $custom-file-height;
|
||||
padding: $custom-file-padding-x $custom-file-padding-y;
|
||||
line-height: $custom-file-line-height;
|
||||
color: $custom-file-button-color;
|
||||
background-color: $custom-file-button-bg;
|
||||
border: $custom-file-border-width solid $custom-file-border-color;
|
||||
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
|
||||
}
|
||||
|
||||
@each $lang, $text in map-get($custom-file-text, button-label) {
|
||||
&:lang(#{$lang})::before {
|
||||
content: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
// Bootstrap overrides
|
||||
//
|
||||
// Copy variables from `_variables.scss` to this file to override default values
|
||||
// without modifying source files.
|
||||
@ -0,0 +1,123 @@
|
||||
// The dropdown wrapper (`<div>`)
|
||||
.dropup,
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
// Generate the caret automatically
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: $caret-width * .85;
|
||||
vertical-align: $caret-width * .85;
|
||||
content: "";
|
||||
border-top: $caret-width solid;
|
||||
border-right: $caret-width solid transparent;
|
||||
border-left: $caret-width solid transparent;
|
||||
}
|
||||
|
||||
&:empty::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||
// Just add .dropup after the standard .dropdown class and you're set.
|
||||
.dropup {
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
border-top: 0;
|
||||
border-bottom: $caret-width solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The dropdown menu
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: $zindex-dropdown;
|
||||
display: none; // none by default, but block on "open" of the menu
|
||||
float: left;
|
||||
min-width: $dropdown-min-width;
|
||||
padding: $dropdown-padding-y 0;
|
||||
margin: $dropdown-margin-top 0 0; // override default ul
|
||||
font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
|
||||
color: $body-color;
|
||||
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
||||
list-style: none;
|
||||
background-color: $dropdown-bg;
|
||||
background-clip: padding-box;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
}
|
||||
|
||||
// Dividers (basically an `<hr>`) within the dropdown
|
||||
.dropdown-divider {
|
||||
@include nav-divider($dropdown-divider-bg);
|
||||
}
|
||||
|
||||
// Links, buttons, and more within the dropdown menu
|
||||
//
|
||||
// `<button>`-specific styles are denoted with `// For <button>s`
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
width: 100%; // For `<button>`s
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
clear: both;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $dropdown-link-color;
|
||||
text-align: inherit; // For `<button>`s
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
background: none; // For `<button>`s
|
||||
border: 0; // For `<button>`s
|
||||
|
||||
@include hover-focus {
|
||||
color: $dropdown-link-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: $dropdown-link-active-color;
|
||||
text-decoration: none;
|
||||
background-color: $dropdown-link-active-bg;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $dropdown-link-disabled-color;
|
||||
background-color: transparent;
|
||||
// Remove CSS gradients if they're enabled
|
||||
@if $enable-gradients {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Open state for the dropdown
|
||||
.show {
|
||||
// Remove the outline when :focus is triggered
|
||||
> a {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: $dropdown-padding-y $dropdown-item-padding-x;
|
||||
margin-bottom: 0; // for use with heading elements
|
||||
font-size: $font-size-sm;
|
||||
color: $dropdown-header-color;
|
||||
white-space: nowrap; // as with > li > a
|
||||
}
|
||||
@ -0,0 +1,390 @@
|
||||
// scss-lint:disable QualifyingElement, VendorPrefix
|
||||
|
||||
//
|
||||
// Textual form controls
|
||||
//
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
// // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
// height: $input-height;
|
||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||
font-size: $font-size-base;
|
||||
line-height: $input-btn-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
|
||||
background-image: none;
|
||||
background-clip: padding-box;
|
||||
border: $input-btn-border-width solid $input-border-color;
|
||||
|
||||
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||
@if $enable-rounded {
|
||||
// Manually use the if/else instead of the mixin to account for iOS override
|
||||
border-radius: $input-border-radius;
|
||||
} @else {
|
||||
// Otherwise undo the iOS default
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@include box-shadow($input-box-shadow);
|
||||
@include transition($input-transition);
|
||||
|
||||
// Unstyle the caret on `<select>`s in IE10+.
|
||||
&::-ms-expand {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Customize the `:focus` state to imitate native WebKit styles.
|
||||
@include form-control-focus();
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
color: $input-placeholder-color;
|
||||
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Disabled and read-only inputs
|
||||
//
|
||||
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
||||
// disabled if the fieldset is disabled. Due to implementation difficulty, we
|
||||
// don't honor that edge case; we style them as disabled anyway.
|
||||
&:disabled,
|
||||
&[readonly] {
|
||||
background-color: $input-disabled-bg;
|
||||
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
&:not([size]):not([multiple]) {
|
||||
height: $input-height;
|
||||
}
|
||||
|
||||
&:focus::-ms-value {
|
||||
// Suppress the nested default white text on blue background highlight given to
|
||||
// the selected option text when the (still closed) <select> receives focus
|
||||
// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
|
||||
// match the appearance of the native widget.
|
||||
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Make file inputs better match text inputs by forcing them to new lines.
|
||||
.form-control-file,
|
||||
.form-control-range {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Labels
|
||||
//
|
||||
|
||||
// For use with horizontal and inline forms, when you need the label text to
|
||||
// align with the form controls.
|
||||
.col-form-label {
|
||||
padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
|
||||
padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
|
||||
margin-bottom: 0; // Override the `<label>` default
|
||||
}
|
||||
|
||||
.col-form-label-lg {
|
||||
padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
|
||||
padding-bottom: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
|
||||
.col-form-label-sm {
|
||||
padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
|
||||
padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Legends
|
||||
//
|
||||
|
||||
// For use with horizontal and inline forms, when you need the legend text to
|
||||
// be the same size as regular labels, and to align with the form controls.
|
||||
.col-form-legend {
|
||||
padding-top: $input-btn-padding-y;
|
||||
padding-bottom: $input-btn-padding-y;
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
|
||||
// Readonly controls as plain text
|
||||
//
|
||||
// Apply class to a readonly input to make it appear like regular plain
|
||||
// text (without any border, background color, focus indicator)
|
||||
|
||||
.form-control-plaintext {
|
||||
padding-top: $input-btn-padding-y;
|
||||
padding-bottom: $input-btn-padding-y;
|
||||
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
||||
line-height: $input-btn-line-height;
|
||||
border: solid transparent;
|
||||
border-width: $input-btn-border-width 0;
|
||||
|
||||
&.form-control-sm,
|
||||
&.form-control-lg {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Build on `.form-control` with modifier classes to decrease or increase the
|
||||
// height and font-size of form controls.
|
||||
//
|
||||
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
||||
|
||||
.form-control-sm {
|
||||
padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $input-btn-line-height-sm;
|
||||
@include border-radius($input-border-radius-sm);
|
||||
}
|
||||
|
||||
select.form-control-sm {
|
||||
&:not([size]):not([multiple]) {
|
||||
height: $input-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
|
||||
font-size: $font-size-lg;
|
||||
line-height: $input-btn-line-height-lg;
|
||||
@include border-radius($input-border-radius-lg);
|
||||
}
|
||||
|
||||
select.form-control-lg {
|
||||
&:not([size]):not([multiple]) {
|
||||
height: $input-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form groups
|
||||
//
|
||||
// Designed to help with the organization and spacing of vertical forms. For
|
||||
// horizontal forms, use the predefined grid classes.
|
||||
|
||||
.form-group {
|
||||
margin-bottom: $form-group-margin-bottom;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
display: block;
|
||||
margin-top: $form-text-margin-top;
|
||||
}
|
||||
|
||||
|
||||
// Form grid
|
||||
//
|
||||
// Special replacement for our grid system's `.row` for tighter form layouts.
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -5px;
|
||||
margin-left: -5px;
|
||||
|
||||
> .col,
|
||||
> [class*="col-"] {
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Checkboxes and radios
|
||||
//
|
||||
// Indent the labels to position radios/checkboxes as hanging controls.
|
||||
|
||||
.form-check {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: $form-check-margin-bottom;
|
||||
|
||||
&.disabled {
|
||||
.form-check-label {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
padding-left: $form-check-input-gutter;
|
||||
margin-bottom: 0; // Override default `<label>` bottom margin
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
position: absolute;
|
||||
margin-top: $form-check-input-margin-y;
|
||||
margin-left: -$form-check-input-gutter;
|
||||
|
||||
&:only-child {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
// Radios and checkboxes on same line
|
||||
.form-check-inline {
|
||||
display: inline-block;
|
||||
|
||||
.form-check-label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
+ .form-check-inline {
|
||||
margin-left: $form-check-inline-margin-x;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form validation
|
||||
//
|
||||
// Provide feedback to users when form field values are valid or invalid. Works
|
||||
// primarily for client-side validation via scoped `:invalid` and `:valid`
|
||||
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
||||
// server side validation.
|
||||
|
||||
.invalid-feedback {
|
||||
display: none;
|
||||
margin-top: .25rem;
|
||||
font-size: .875rem;
|
||||
color: $form-feedback-invalid-color;
|
||||
}
|
||||
|
||||
.invalid-tooltip {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 5;
|
||||
display: none;
|
||||
width: 250px;
|
||||
padding: .5rem;
|
||||
margin-top: .1rem;
|
||||
font-size: .875rem;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
background-color: rgba($form-feedback-invalid-color,.8);
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
@include form-validation-state("valid", $form-feedback-valid-color);
|
||||
@include form-validation-state("invalid", $form-feedback-invalid-color);
|
||||
|
||||
// Inline forms
|
||||
//
|
||||
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
|
||||
// forms begin stacked on extra small (mobile) devices and then go inline when
|
||||
// viewports reach <768px.
|
||||
//
|
||||
// Requires wrapping inputs and labels with `.form-group` for proper display of
|
||||
// default HTML form controls and our custom form controls (e.g., input groups).
|
||||
|
||||
.form-inline {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
|
||||
|
||||
// Because we use flex, the initial sizing of checkboxes is collapsed and
|
||||
// doesn't occupy the full-width (which is what we want for xs grid tier),
|
||||
// so we force that here.
|
||||
.form-check {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Kick in the inline
|
||||
@include media-breakpoint-up(sm) {
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Inline-block all the things for "inline"
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Allow folks to *not* use `.form-group`
|
||||
.form-control {
|
||||
display: inline-block;
|
||||
width: auto; // Prevent labels from stacking above inputs in `.form-group`
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Make static controls behave like regular ones
|
||||
.form-control-plaintext {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-control-label {
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Remove default margin on radios/checkboxes that were used for stacking, and
|
||||
// then undo the floating of radios and checkboxes to match.
|
||||
.form-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-check-label {
|
||||
padding-left: 0;
|
||||
}
|
||||
.form-check-input {
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
margin-right: $form-check-input-margin-x;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Custom form controls
|
||||
.custom-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
.custom-control-indicator {
|
||||
position: static;
|
||||
display: inline-block;
|
||||
margin-right: $form-check-input-margin-x; // Flexbox alignment means we lose our HTML space here, so we compensate.
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
// Re-override the feedback icon.
|
||||
.has-feedback .form-control-feedback {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,90 @@
|
||||
// Bootstrap functions
|
||||
//
|
||||
// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
|
||||
|
||||
// Ascending
|
||||
// Used to evaluate Sass maps like our grid breakpoints.
|
||||
@mixin _assert-ascending($map, $map-name) {
|
||||
$prev-key: null;
|
||||
$prev-num: null;
|
||||
@each $key, $num in $map {
|
||||
@if $prev-num == null {
|
||||
// Do nothing
|
||||
} @else if not comparable($prev-num, $num) {
|
||||
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||
} @else if $prev-num >= $num {
|
||||
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||
}
|
||||
$prev-key: $key;
|
||||
$prev-num: $num;
|
||||
}
|
||||
}
|
||||
|
||||
// Starts at zero
|
||||
// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
|
||||
@mixin _assert-starts-at-zero($map) {
|
||||
$values: map-values($map);
|
||||
$first-value: nth($values, 1);
|
||||
@if $first-value != 0 {
|
||||
@warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
|
||||
}
|
||||
}
|
||||
|
||||
// Replace `$search` with `$replace` in `$string`
|
||||
// Used on our SVG icon backgrounds for custom forms.
|
||||
//
|
||||
// @author Hugo Giraudel
|
||||
// @param {String} $string - Initial string
|
||||
// @param {String} $search - Substring to replace
|
||||
// @param {String} $replace ('') - New value
|
||||
// @return {String} - Updated string
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
// Color contrast
|
||||
@mixin color-yiq($color) {
|
||||
$r: red($color);
|
||||
$g: green($color);
|
||||
$b: blue($color);
|
||||
|
||||
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||
|
||||
@if ($yiq >= 150) {
|
||||
color: #111;
|
||||
} @else {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Retreive color Sass maps
|
||||
@function color($key: "blue") {
|
||||
@return map-get($colors, $key);
|
||||
}
|
||||
|
||||
@function theme-color($key: "primary") {
|
||||
@return map-get($theme-colors, $key);
|
||||
}
|
||||
|
||||
@function grayscale($key: "100") {
|
||||
@return map-get($grays, $key);
|
||||
}
|
||||
|
||||
// Request a theme color level
|
||||
@function theme-color-level($color-name: "primary", $level: 0) {
|
||||
$color: theme-color($color-name);
|
||||
$color-base: if($level > 0, #000, #fff);
|
||||
|
||||
@if $level < 0 {
|
||||
// Lighter values need a quick double negative for the Sass math to work
|
||||
@return mix($color-base, $color, $level * -1 * $theme-color-interval);
|
||||
} @else {
|
||||
@return mix($color-base, $color, $level * $theme-color-interval);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
// Container widths
|
||||
//
|
||||
// Set the container width, and override it for fixed navbars in media queries.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.container {
|
||||
@include make-container();
|
||||
@include make-container-max-widths();
|
||||
}
|
||||
}
|
||||
|
||||
// Fluid container
|
||||
//
|
||||
// Utilizes the mixin meant for fixed width containers, but with 100% width for
|
||||
// fluid, full width layouts.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
@include make-container();
|
||||
}
|
||||
}
|
||||
|
||||
// Row
|
||||
//
|
||||
// Rows contain and clear the floats of your columns.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.row {
|
||||
@include make-row();
|
||||
}
|
||||
|
||||
// Remove the negative margin from default .row, then the horizontal padding
|
||||
// from all immediate children columns (to prevent runaway style inheritance).
|
||||
.no-gutters {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
> .col,
|
||||
> [class*="col-"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Columns
|
||||
//
|
||||
// Common styles for small and large grid columns
|
||||
|
||||
@if $enable-grid-classes {
|
||||
@include make-grid-columns();
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
// Responsive images (ensure images don't scale beyond their parents)
|
||||
//
|
||||
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
|
||||
// We previously tried the "images are responsive by default" approach in Bootstrap v2,
|
||||
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
|
||||
// which weren't expecting the images within themselves to be involuntarily resized.
|
||||
// See also https://github.com/twbs/bootstrap/issues/18178
|
||||
.img-fluid {
|
||||
@include img-fluid;
|
||||
}
|
||||
|
||||
|
||||
// Image thumbnails
|
||||
.img-thumbnail {
|
||||
padding: $thumbnail-padding;
|
||||
background-color: $thumbnail-bg;
|
||||
border: $thumbnail-border-width solid $thumbnail-border-color;
|
||||
@include border-radius($thumbnail-border-radius);
|
||||
@include transition($thumbnail-transition);
|
||||
@include box-shadow($thumbnail-box-shadow);
|
||||
|
||||
// Keep them at most 100% wide
|
||||
@include img-fluid;
|
||||
}
|
||||
|
||||
//
|
||||
// Figures
|
||||
//
|
||||
|
||||
.figure {
|
||||
// Ensures the caption's text aligns with the image.
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.figure-img {
|
||||
margin-bottom: ($spacer / 2);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.figure-caption {
|
||||
font-size: $figure-caption-font-size;
|
||||
color: $figure-caption-color;
|
||||
}
|
||||
@ -0,0 +1,176 @@
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.input-group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.form-control {
|
||||
// Ensure that the input is always above the *appended* addon button for
|
||||
// proper border colors.
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1 1 auto;
|
||||
// Add width 1% and flex-basis auto to ensure that button will not wrap out
|
||||
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
|
||||
width: 1%;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Bring the "active" form control to the front
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn,
|
||||
.input-group .form-control {
|
||||
// Vertically centers the content of the addons within the input group
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle; // Match the inputs
|
||||
}
|
||||
|
||||
|
||||
// Sizing options
|
||||
//
|
||||
// Remix the default form control sizing classes into new ones for easier
|
||||
// manipulation.
|
||||
|
||||
.input-group-lg > .form-control,
|
||||
.input-group-lg > .input-group-addon,
|
||||
.input-group-lg > .input-group-btn > .btn {
|
||||
@extend .form-control-lg;
|
||||
}
|
||||
.input-group-sm > .form-control,
|
||||
.input-group-sm > .input-group-addon,
|
||||
.input-group-sm > .input-group-btn > .btn {
|
||||
@extend .form-control-sm;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Text input groups
|
||||
//
|
||||
|
||||
.input-group-addon {
|
||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
|
||||
font-size: $font-size-base; // Match inputs
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: $input-btn-line-height;
|
||||
color: $input-color;
|
||||
text-align: center;
|
||||
background-color: $input-group-addon-bg;
|
||||
border: $input-btn-border-width solid $input-group-addon-border-color;
|
||||
@include border-radius($input-border-radius);
|
||||
|
||||
// Sizing
|
||||
&.form-control-sm {
|
||||
padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
|
||||
font-size: $font-size-sm;
|
||||
@include border-radius($input-border-radius-sm);
|
||||
}
|
||||
|
||||
&.form-control-lg {
|
||||
padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
|
||||
font-size: $font-size-lg;
|
||||
@include border-radius($input-border-radius-lg);
|
||||
}
|
||||
|
||||
// scss-lint:disable QualifyingElement
|
||||
// Nuke default margins from checkboxes and radios to vertically center within.
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Reset rounded corners
|
||||
//
|
||||
|
||||
.input-group .form-control:not(:last-child),
|
||||
.input-group-addon:not(:last-child),
|
||||
.input-group-btn:not(:last-child) > .btn,
|
||||
.input-group-btn:not(:last-child) > .btn-group > .btn,
|
||||
.input-group-btn:not(:last-child) > .dropdown-toggle,
|
||||
.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
|
||||
.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
.input-group-addon:not(:last-child) {
|
||||
border-right: 0;
|
||||
}
|
||||
.input-group .form-control:not(:first-child),
|
||||
.input-group-addon:not(:first-child),
|
||||
.input-group-btn:not(:first-child) > .btn,
|
||||
.input-group-btn:not(:first-child) > .btn-group > .btn,
|
||||
.input-group-btn:not(:first-child) > .dropdown-toggle,
|
||||
.input-group-btn:not(:last-child) > .btn:not(:first-child),
|
||||
.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
.form-control + .input-group-addon:not(:first-child) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Button input groups
|
||||
//
|
||||
|
||||
.input-group-btn {
|
||||
position: relative;
|
||||
// Jankily prevent input button groups from wrapping with `white-space` and
|
||||
// `font-size` in combination with `inline-block` on buttons.
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
// Negative margin for spacing, position for bringing hovered/focused/actived
|
||||
// element above the siblings.
|
||||
> .btn {
|
||||
position: relative;
|
||||
|
||||
+ .btn {
|
||||
margin-left: (-$input-btn-border-width);
|
||||
}
|
||||
|
||||
// Bring the "active" button to the front
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
// Negative margin to only have a single, shared border between the two
|
||||
&:not(:last-child) {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
margin-right: (-$input-btn-border-width);
|
||||
}
|
||||
}
|
||||
&:not(:first-child) {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
z-index: 2;
|
||||
margin-left: (-$input-btn-border-width);
|
||||
// Because specificity
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
.jumbotron {
|
||||
padding: $jumbotron-padding ($jumbotron-padding / 2);
|
||||
margin-bottom: $jumbotron-padding;
|
||||
background-color: $jumbotron-bg;
|
||||
@include border-radius($border-radius-lg);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: ($jumbotron-padding * 2) $jumbotron-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron-fluid {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
@include border-radius(0);
|
||||
}
|
||||
@ -0,0 +1,114 @@
|
||||
// Base class
|
||||
//
|
||||
// Easily usable on <ul>, <ol>, or <div>.
|
||||
|
||||
.list-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// No need to set list-style: none; since .list-group-item is block level
|
||||
padding-left: 0; // reset padding because ul and ol
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
// Interactive list items
|
||||
//
|
||||
// Use anchor or button elements instead of `li`s or `div`s to create interactive
|
||||
// list items. Includes an extra `.active` modifier class for selected items.
|
||||
|
||||
.list-group-item-action {
|
||||
width: 100%; // For `<button>`s (anchors become 100% by default though)
|
||||
color: $list-group-action-color;
|
||||
text-align: inherit; // For `<button>`s (anchors inherit)
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $list-group-action-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: $list-group-hover-bg;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $list-group-action-active-color;
|
||||
background-color: $list-group-action-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Individual list items
|
||||
//
|
||||
// Use on `li`s or `div`s within the `.list-group` parent.
|
||||
|
||||
.list-group-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: $list-group-item-padding-y $list-group-item-padding-x;
|
||||
// Place the border on the list items and negative margin up for better styling
|
||||
margin-bottom: -$list-group-border-width;
|
||||
background-color: $list-group-bg;
|
||||
border: $list-group-border-width solid $list-group-border-color;
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius($list-group-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@include border-bottom-radius($list-group-border-radius);
|
||||
}
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $list-group-disabled-color;
|
||||
background-color: $list-group-disabled-bg;
|
||||
}
|
||||
|
||||
// Include both here for `<a>`s and `<button>`s
|
||||
&.active {
|
||||
z-index: 2; // Place active items above their siblings for proper border styling
|
||||
color: $list-group-active-color;
|
||||
background-color: $list-group-active-bg;
|
||||
border-color: $list-group-active-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Flush list items
|
||||
//
|
||||
// Remove borders and border-radius to keep list group items edge-to-edge. Most
|
||||
// useful within other components (e.g., cards).
|
||||
|
||||
.list-group-flush {
|
||||
.list-group-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.list-group-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.list-group-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Contextual variants
|
||||
//
|
||||
// Add modifier classes to change text and background color on individual items.
|
||||
// Organizationally, this must come after the `:hover` states.
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
.media {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
flex: 1;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue