first commit
@ -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
|
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
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 |
After Width: | Height: | Size: 866 B |
After Width: | Height: | Size: 211 B |
After Width: | Height: | Size: 213 B |
After Width: | Height: | Size: 209 B |
After Width: | Height: | Size: 211 B |
After Width: | Height: | Size: 211 B |
After Width: | Height: | Size: 211 B |
After Width: | Height: | Size: 213 B |
After Width: | Height: | Size: 211 B |
After Width: | Height: | Size: 215 B |
After Width: | Height: | Size: 146 B |
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
|
||||
});
|
||||
};
|
@ -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;
|
||||
}
|