Initial commit v2
@ -0,0 +1,60 @@
|
|||||||
|
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# compiled output
|
||||||
|
/paczki/npm
|
||||||
|
/paczki/only-free
|
||||||
|
/paczki/upgradePro
|
||||||
|
|
||||||
|
/paczki/angular-bootstrap-md-free/font
|
||||||
|
/paczki/angular-bootstrap-md-free/img
|
||||||
|
/paczki/angular-bootstrap-md-free/scss
|
||||||
|
/paczki/angular-bootstrap-md-free/node_modules
|
||||||
|
/paczki/angular-bootstrap-md-free/src/app/typescripts
|
||||||
|
/paczki/angular-bootstrap-md-free/src/app/angular-bootstrap-md
|
||||||
|
|
||||||
|
|
||||||
|
/paczki/angular-bootstrap-md-pro/font
|
||||||
|
/paczki/angular-bootstrap-md-pro/img
|
||||||
|
/paczki/angular-bootstrap-md-pro/scss
|
||||||
|
/paczki/angular-bootstrap-md-pro/node_modules
|
||||||
|
/paczki/angular-bootstrap-md-pro/src/app/typescripts
|
||||||
|
/paczki/angular-bootstrap-md-pro/src/app/angular-bootstrap-md
|
||||||
|
/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 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,170 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
|
||||||
|
"version": 1,
|
||||||
|
"newProjectRoot": "projects",
|
||||||
|
"projects": {
|
||||||
|
"quickstart-angular2": {
|
||||||
|
"root": "",
|
||||||
|
"projectType": "application",
|
||||||
|
"architect": {
|
||||||
|
"build": {
|
||||||
|
"builder": "@angular-devkit/build-angular:browser",
|
||||||
|
"options": {
|
||||||
|
"outputPath": "dist",
|
||||||
|
"index": "src/index.html",
|
||||||
|
"main": "src/main.ts",
|
||||||
|
"tsConfig": "src/tsconfig.app.json",
|
||||||
|
"polyfills": "src/polyfills.ts",
|
||||||
|
"assets": [{
|
||||||
|
"glob": "**/*",
|
||||||
|
"input": "src/assets",
|
||||||
|
"output": "/assets"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"glob": "favicon.ico",
|
||||||
|
"input": "src",
|
||||||
|
"output": "/"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"styles": [{
|
||||||
|
"input": "node_modules/font-awesome/scss/font-awesome.scss"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"input": "scss/bootstrap/bootstrap.scss"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"input": "scss/mdb.scss"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"input": "src/styles.scss"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"scripts": [{
|
||||||
|
"input": "node_modules/chart.js/dist/Chart.js"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"input": "node_modules/easy-pie-chart/dist/easypiechart.js"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"input": "node_modules/screenfull/dist/screenfull.js"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"input": "node_modules/hammerjs/hammer.min.js"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"optimization": true,
|
||||||
|
"outputHashing": "all",
|
||||||
|
"sourceMap": false,
|
||||||
|
"extractCss": true,
|
||||||
|
"namedChunks": false,
|
||||||
|
"aot": true,
|
||||||
|
"extractLicenses": true,
|
||||||
|
"vendorChunk": false,
|
||||||
|
"buildOptimizer": true,
|
||||||
|
"fileReplacements": [{
|
||||||
|
"replace": "src/environments/environment.ts",
|
||||||
|
"with": "src/environments/environment.prod.ts"
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"serve": {
|
||||||
|
"builder": "@angular-devkit/build-angular:dev-server",
|
||||||
|
"options": {
|
||||||
|
"browserTarget": "quickstart-angular2:build"
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"browserTarget": "quickstart-angular2:build:production"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"extract-i18n": {
|
||||||
|
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||||
|
"options": {
|
||||||
|
"browserTarget": "quickstart-angular2:build"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
|
"options": {
|
||||||
|
"main": "src/test.ts",
|
||||||
|
"karmaConfig": "./karma.conf.js",
|
||||||
|
"polyfills": "src/polyfills.ts",
|
||||||
|
"tsConfig": "src/tsconfig.spec.json",
|
||||||
|
"scripts": [
|
||||||
|
"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"
|
||||||
|
],
|
||||||
|
"styles": [
|
||||||
|
"node_modules/font-awesome/scss/font-awesome.scss",
|
||||||
|
"scss/bootstrap/bootstrap.scss",
|
||||||
|
"scss/mdb.scss",
|
||||||
|
"src/styles.scss"
|
||||||
|
],
|
||||||
|
"assets": [{
|
||||||
|
"glob": "**/*",
|
||||||
|
"input": "src/assets",
|
||||||
|
"output": "/assets"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"glob": "favicon.ico",
|
||||||
|
"input": "src",
|
||||||
|
"output": "/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lint": {
|
||||||
|
"builder": "@angular-devkit/build-angular:tslint",
|
||||||
|
"options": {
|
||||||
|
"tsConfig": [
|
||||||
|
"src/tsconfig.app.json",
|
||||||
|
"src/tsconfig.spec.json"
|
||||||
|
],
|
||||||
|
"exclude": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"quickstart-angular2-e2e": {
|
||||||
|
"root": "",
|
||||||
|
"projectType": "application",
|
||||||
|
"cli": {},
|
||||||
|
"schematics": {},
|
||||||
|
"architect": {
|
||||||
|
"e2e": {
|
||||||
|
"builder": "@angular-devkit/build-angular:protractor",
|
||||||
|
"options": {
|
||||||
|
"protractorConfig": "./protractor.conf.js",
|
||||||
|
"devServerTarget": "quickstart-angular2:serve"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lint": {
|
||||||
|
"builder": "@angular-devkit/build-angular:tslint",
|
||||||
|
"options": {
|
||||||
|
"tsConfig": [
|
||||||
|
"e2e/tsconfig.e2e.json"
|
||||||
|
],
|
||||||
|
"exclude": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"cli": {},
|
||||||
|
"schematics": {
|
||||||
|
"@schematics/angular:component": {
|
||||||
|
"prefix": "app",
|
||||||
|
"styleext": "scss"
|
||||||
|
},
|
||||||
|
"@schematics/angular:directive": {
|
||||||
|
"prefix": "app"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,61 @@
|
|||||||
|
var express = require('express');
|
||||||
|
var path = require('path');
|
||||||
|
var favicon = require('serve-favicon');
|
||||||
|
var logger = require('morgan');
|
||||||
|
var bodyParser = require('body-parser');
|
||||||
|
|
||||||
|
var api = require('./routes/api');
|
||||||
|
var app = express();
|
||||||
|
|
||||||
|
|
||||||
|
//var http = require("http").Server(app).listen(80);
|
||||||
|
//console.log("Server Started!");
|
||||||
|
//DB
|
||||||
|
|
||||||
|
//file
|
||||||
|
var upload = require("express-fileupload")
|
||||||
|
//var morgan = require('morgan');
|
||||||
|
var mongoose = require('mongoose');
|
||||||
|
var passport = require('passport');
|
||||||
|
var config = require('./config/database');
|
||||||
|
|
||||||
|
//DB
|
||||||
|
//mongoose.Promise = require('bluebird');
|
||||||
|
mongoose.connect(config.database);
|
||||||
|
|
||||||
|
|
||||||
|
app.use(passport.initialize());
|
||||||
|
|
||||||
|
|
||||||
|
app.use(logger('dev'));
|
||||||
|
app.use(bodyParser.json());
|
||||||
|
|
||||||
|
// app.use(upload());
|
||||||
|
|
||||||
|
app.use(bodyParser.urlencoded({'extended':'false'}));
|
||||||
|
app.use(express.static(path.join(__dirname, 'dist')));
|
||||||
|
//bizarrr
|
||||||
|
app.use('/public',express.static(path.join(__dirname, '../public')));
|
||||||
|
app.use('/books', express.static(path.join(__dirname, 'dist')));
|
||||||
|
app.use('/api', api);
|
||||||
|
|
||||||
|
// catch 404 and forward to error handler
|
||||||
|
app.use(function(req, res, next) {
|
||||||
|
var err = new Error('Not Found');
|
||||||
|
err.status = 404;
|
||||||
|
next(err);
|
||||||
|
});
|
||||||
|
|
||||||
|
// error handler
|
||||||
|
app.use(function(err, req, res, next) {
|
||||||
|
// set locals, only providing error in development
|
||||||
|
res.locals.message = err.message;
|
||||||
|
res.locals.error = req.app.get('env') === 'development' ? err : {};
|
||||||
|
|
||||||
|
// render the error page
|
||||||
|
res.status(err.status || 500);
|
||||||
|
res.render('error');
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
module.exports = app;
|
@ -0,0 +1,90 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Module dependencies.
|
||||||
|
*/
|
||||||
|
|
||||||
|
var app = require('../app');
|
||||||
|
var debug = require('debug')('mean-secure:server');
|
||||||
|
var http = require('http');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get port from environment and store in Express.
|
||||||
|
*/
|
||||||
|
|
||||||
|
var port = normalizePort(process.env.PORT || '3000');
|
||||||
|
app.set('port', port);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create HTTP server.
|
||||||
|
*/
|
||||||
|
|
||||||
|
var server = http.createServer(app);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Listen on provided port, on all network interfaces.
|
||||||
|
*/
|
||||||
|
|
||||||
|
server.listen(port);
|
||||||
|
server.on('error', onError);
|
||||||
|
server.on('listening', onListening);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Normalize a port into a number, string, or false.
|
||||||
|
*/
|
||||||
|
|
||||||
|
function normalizePort(val) {
|
||||||
|
var port = parseInt(val, 10);
|
||||||
|
|
||||||
|
if (isNaN(port)) {
|
||||||
|
// named pipe
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (port >= 0) {
|
||||||
|
// port number
|
||||||
|
return port;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Event listener for HTTP server "error" event.
|
||||||
|
*/
|
||||||
|
|
||||||
|
function onError(error) {
|
||||||
|
if (error.syscall !== 'listen') {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
|
||||||
|
var bind = typeof port === 'string'
|
||||||
|
? 'Pipe ' + port
|
||||||
|
: 'Port ' + port;
|
||||||
|
|
||||||
|
// handle specific listen errors with friendly messages
|
||||||
|
switch (error.code) {
|
||||||
|
case 'EACCES':
|
||||||
|
console.error(bind + ' requires elevated privileges');
|
||||||
|
process.exit(1);
|
||||||
|
break;
|
||||||
|
case 'EADDRINUSE':
|
||||||
|
console.error(bind + ' is already in use');
|
||||||
|
process.exit(1);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Event listener for HTTP server "listening" event.
|
||||||
|
*/
|
||||||
|
|
||||||
|
function onListening() {
|
||||||
|
var addr = server.address();
|
||||||
|
var bind = typeof addr === 'string'
|
||||||
|
? 'pipe ' + addr
|
||||||
|
: 'port ' + addr.port;
|
||||||
|
debug('Listening on ' + bind);
|
||||||
|
}
|
@ -0,0 +1,86 @@
|
|||||||
|
5.2.1
|
||||||
|
Enhanced mdbActive directive - works with data prefilled by browser
|
||||||
|
Sidenav issue fixed (skin is optional)
|
||||||
|
Fixed with rounded buttons inside input group
|
||||||
|
Fixed for dropdown not getting closed after click in other dropdown.
|
||||||
|
Fix for line breaking label in checkboxes
|
||||||
|
|
||||||
|
5.2.0
|
||||||
|
Updated to Bootstrap 4 stable version
|
||||||
|
Integration with .NET CORE - tutorial here
|
||||||
|
Compatibility with Angular 5.2.1 and CLI 1.6.5
|
||||||
|
noImplicitAny and strictNullChecks compatibility
|
||||||
|
New validation added (number, tel, submit) + custom validation regex. Read tutorial.
|
||||||
|
Configurable labels for DatePicker
|
||||||
|
|
||||||
|
5.1.2
|
||||||
|
Angular 5.2.1 and CLI 1.6.5 compatibility
|
||||||
|
Extended docs for modals - auto focus on input
|
||||||
|
Fixed validation for email and password
|
||||||
|
Aria attributes added to datepicker
|
||||||
|
Added filtering options to Material Select
|
||||||
|
Support for IE+ and Edge for Double Navigation
|
||||||
|
Extended DatePicker with new functionality:
|
||||||
|
Important!
|
||||||
|
By default date picker will load now +- 7 years starting from current year. It can be overwritten using minYear and maxYear parameters:
|
||||||
|
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { IMyOptions } from 'your_path_to/date-picker/index';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'date-picker-component-example',
|
||||||
|
templateUrl: 'toast.component.html'
|
||||||
|
})
|
||||||
|
|
||||||
|
export class DatePickerComponentExample {
|
||||||
|
public myDatePickerOptions: IMyOptions = {
|
||||||
|
minYear: 2015,
|
||||||
|
maxYear: 2017
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
5.1.1
|
||||||
|
Double navigation - support for collapsed sidenav and navbar
|
||||||
|
Extended documentation for Autocomplete
|
||||||
|
Auto resize function for collapse added
|
||||||
|
Mobile gestures carousel support added
|
||||||
|
Added option to hide next / prev buttons in carousel
|
||||||
|
Fix for: Module has no exported member 'MDBSpinningPreloader'
|
||||||
|
Automatically set date in DatePicker using ngModel
|
||||||
|
Fixed docs for File Upload
|
||||||
|
|
||||||
|
5.1.0
|
||||||
|
Angular 5.1.3 and CLI 1.6.3. compatibility
|
||||||
|
Fixed issue with exceeding text tabs component
|
||||||
|
Auto-close navbar after click into link (check documentation for more information)
|
||||||
|
Fixed problem with error/success message on Firefox
|
||||||
|
Fixed problems with selecting hour on mobile devices in Timepicker
|
||||||
|
Extended configuration options of easy pie charts (check documentation for more information)
|
||||||
|
Fixed for relative path in _skins.scss
|
||||||
|
Fixed issue with date picker for Firefox
|
||||||
|
Enhanced support for small screen resolution in Datepicker (<575 px)
|
||||||
|
Fix for issue while using multiple MDB Autocomplete components
|
||||||
|
|
||||||
|
5.0.5
|
||||||
|
Added compatibility with noUnusedLocals
|
||||||
|
|
||||||
|
5.0.4
|
||||||
|
Added compatibility with noUnusedParameters
|
||||||
|
|
||||||
|
5.0.3
|
||||||
|
Fixed missing arrow in popovers
|
||||||
|
|
||||||
|
5.0.2
|
||||||
|
Fixed circular dependencies error.
|
||||||
|
|
||||||
|
5.0.1
|
||||||
|
Fixed for imgPath in .scss
|
||||||
|
|
||||||
|
5.0.0
|
||||||
|
Version 5.0.0 brings brings compatibility with new Angular 5.0 and CLI 1.5. Except for that new update include Bootstrap 4 Beta 2 assets.
|
||||||
|
|
||||||
|
What's new in Bootstrap 4 beta-2:
|
||||||
|
|
||||||
|
Restored `.offset-*` classes
|
||||||
|
Switched Breadcrumbs from `float` to Flexbox
|
||||||
|
Dropped support for Bower
|
@ -0,0 +1,4 @@
|
|||||||
|
module.exports = {
|
||||||
|
'secret':'supfile',
|
||||||
|
'database': 'mongodb://localhost:27017/supfile'
|
||||||
|
};
|
@ -0,0 +1,28 @@
|
|||||||
|
var JwtStrategy = require('passport-jwt').Strategy,
|
||||||
|
ExtractJwt = require('passport-jwt').ExtractJwt;
|
||||||
|
|
||||||
|
// load up the user model
|
||||||
|
var User = require('../models/user');
|
||||||
|
var config = require('../config/database'); // get db config file
|
||||||
|
|
||||||
|
module.exports = function(passport) {
|
||||||
|
var opts = {};
|
||||||
|
opts.jwtFromRequest = ExtractJwt.fromAuthHeaderWithScheme("jwt");
|
||||||
|
opts.secretOrKey = config.secret;
|
||||||
|
passport.use(new JwtStrategy(opts, function(jwt_payload, done) {
|
||||||
|
|
||||||
|
User.findOne({id: jwt_payload.id, username: jwt_payload.username}, function(err, user) {
|
||||||
|
if (err) {
|
||||||
|
return done(err, false);
|
||||||
|
}
|
||||||
|
if (user) {
|
||||||
|
console.log('jwt_payloadddd : ' + JSON.stringify(jwt_payload));
|
||||||
|
|
||||||
|
console.log('useruseruser : ' + JSON.stringify(user));
|
||||||
|
done(null, user);
|
||||||
|
} else {
|
||||||
|
done(null, false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
};
|
@ -0,0 +1,14 @@
|
|||||||
|
import { QuickstartAngular2Page } from './app.po';
|
||||||
|
|
||||||
|
describe('quickstart-angular2 App', () => {
|
||||||
|
let page: QuickstartAngular2Page;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
page = new QuickstartAngular2Page();
|
||||||
|
});
|
||||||
|
|
||||||
|
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 QuickstartAngular2Page {
|
||||||
|
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: 215 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: 214 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-devkit/build-angular'],
|
||||||
|
plugins: [
|
||||||
|
require('karma-jasmine'),
|
||||||
|
require('karma-chrome-launcher'),
|
||||||
|
require('karma-jasmine-html-reporter'),
|
||||||
|
require('karma-coverage-istanbul-reporter'),
|
||||||
|
require('@angular-devkit/build-angular/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-devkit/build-angular']
|
||||||
|
},
|
||||||
|
mime: {
|
||||||
|
'text/x-typescript': ['ts','tsx']
|
||||||
|
},
|
||||||
|
coverageIstanbulReporter: {
|
||||||
|
dir: require('path').join(__dirname, 'coverage'), 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,23 @@
|
|||||||
|
var mongoose = require('mongoose');
|
||||||
|
var Schema = mongoose.Schema;
|
||||||
|
|
||||||
|
var BookSchema = new Schema({
|
||||||
|
isbn: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
author: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
publisher: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = mongoose.model('Book', BookSchema);
|
@ -0,0 +1,35 @@
|
|||||||
|
var mongoose = require('mongoose');
|
||||||
|
var Schema = mongoose.Schema;
|
||||||
|
|
||||||
|
var FileMongoShema = new Schema({
|
||||||
|
uid: {
|
||||||
|
type: String,
|
||||||
|
unique: false
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
unique: false
|
||||||
|
},
|
||||||
|
path: {
|
||||||
|
type: String,
|
||||||
|
unique: false
|
||||||
|
},
|
||||||
|
extention: {
|
||||||
|
type: String,
|
||||||
|
unique: false
|
||||||
|
},
|
||||||
|
taille: {
|
||||||
|
type: String,
|
||||||
|
unique: false
|
||||||
|
},
|
||||||
|
idUser: {
|
||||||
|
type: String,
|
||||||
|
unique: false
|
||||||
|
},
|
||||||
|
owner: {
|
||||||
|
type: String,
|
||||||
|
unique: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = mongoose.model('FileMongo', FileMongoShema);
|
@ -0,0 +1,46 @@
|
|||||||
|
var mongoose = require('mongoose');
|
||||||
|
var Schema = mongoose.Schema;
|
||||||
|
var bcrypt = require('bcrypt-nodejs');
|
||||||
|
|
||||||
|
var UserSchema = new Schema({
|
||||||
|
username: {
|
||||||
|
type: String,
|
||||||
|
unique: true,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
password: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
UserSchema.pre('save', function (next) {
|
||||||
|
var user = this;
|
||||||
|
if (this.isModified('password') || this.isNew) {
|
||||||
|
bcrypt.genSalt(10, function (err, salt) {
|
||||||
|
if (err) {
|
||||||
|
return next(err);
|
||||||
|
}
|
||||||
|
bcrypt.hash(user.password, salt, null, function (err, hash) {
|
||||||
|
if (err) {
|
||||||
|
return next(err);
|
||||||
|
}
|
||||||
|
user.password = hash;
|
||||||
|
next();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return next();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
UserSchema.methods.comparePassword = function (passw, cb) {
|
||||||
|
bcrypt.compare(passw, this.password, function (err, isMatch) {
|
||||||
|
if (err) {
|
||||||
|
return cb(err);
|
||||||
|
}
|
||||||
|
cb(null, isMatch);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = mongoose.model('User', UserSchema);
|
@ -0,0 +1,83 @@
|
|||||||
|
{
|
||||||
|
"name": "quickstart-angular5",
|
||||||
|
"version": "6.0.1",
|
||||||
|
"license": "custom",
|
||||||
|
"scripts": {
|
||||||
|
"ng": "ng",
|
||||||
|
"start": "ng build && node ./bin/www",
|
||||||
|
"build": "ng build --prod",
|
||||||
|
"test": "ng test",
|
||||||
|
"lint": "ng lint",
|
||||||
|
"e2e": "ng e2e",
|
||||||
|
"aot:build": "ng build --prod --sm=false --aot=true --output-path=dist",
|
||||||
|
"pre-commit": "ng lint"
|
||||||
|
},
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@agm/core": "^1.0.0-beta.2",
|
||||||
|
"@angular/animations": "^6.0.0-rc.1",
|
||||||
|
"@angular/common": "^6.0.0-rc.1",
|
||||||
|
"@angular/compiler": "^6.0.0-rc.1",
|
||||||
|
"@angular/core": "^6.0.0-rc.1",
|
||||||
|
"@angular/forms": "^6.0.0-rc.1",
|
||||||
|
"@angular/http": "^6.0.0-rc.1",
|
||||||
|
"@angular/platform-browser": "^6.0.0-rc.1",
|
||||||
|
"@angular/platform-browser-dynamic": "^6.0.0-rc.1",
|
||||||
|
"@angular/router": "^6.0.0-rc.1",
|
||||||
|
"@types/form-data": "^2.2.1",
|
||||||
|
"bcrypt-nodejs": "0.0.3",
|
||||||
|
"bluebird": "^3.5.1",
|
||||||
|
"body-parser": "^1.18.2",
|
||||||
|
"chart.js": "2.5.x",
|
||||||
|
"classlist.js": "1.1.x",
|
||||||
|
"core-js": "2.4.x",
|
||||||
|
"del": "3.0.x",
|
||||||
|
"easy-pie-chart": "2.1.x",
|
||||||
|
"express": "^4.16.2",
|
||||||
|
"express-fileupload": "^0.4.0",
|
||||||
|
"font-awesome": "4.7.x",
|
||||||
|
"form-data": "^2.3.2",
|
||||||
|
"gulp": "^3.9.1",
|
||||||
|
"gulp-rename": "1.2.x",
|
||||||
|
"gulp-run": "1.7.x",
|
||||||
|
"hammerjs": "2.0.x",
|
||||||
|
"jsonwebtoken": "^8.1.1",
|
||||||
|
"mongoose": "^5.0.7",
|
||||||
|
"morgan": "^1.9.0",
|
||||||
|
"multer": "^1.3.0",
|
||||||
|
"ng-html-util": "1.0.x",
|
||||||
|
"ngm-cli": "0.5.x",
|
||||||
|
"passport": "^0.4.0",
|
||||||
|
"passport-jwt": "^3.0.1",
|
||||||
|
"rxjs": "^6.0.0-rc.1",
|
||||||
|
"rxjs-compat": "^6.0.0-rc.1",
|
||||||
|
"screenfull": "3.3.x",
|
||||||
|
"serve-favicon": "^2.4.5",
|
||||||
|
"smoothscroll-polyfill": "0.3.x",
|
||||||
|
"web-animations-js": "2.3.x",
|
||||||
|
"zone.js": "0.8.x"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@angular/cli": "^6.0.0-rc.1",
|
||||||
|
"@angular/compiler-cli": "^6.0.0-rc.1",
|
||||||
|
"@angular/language-service": "^6.0.0-rc.1",
|
||||||
|
"@types/jasmine": "2.5.38",
|
||||||
|
"@types/node": "~6.0.85",
|
||||||
|
"codelyzer": "~3.2.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.2",
|
||||||
|
"ts-node": "~3.2.0",
|
||||||
|
"tslint": "~5.7.0",
|
||||||
|
"typescript": "~2.7.2",
|
||||||
|
"webpack": "^4.3.0",
|
||||||
|
"@angular-devkit/build-angular": "~0.5.0",
|
||||||
|
"@types/jasminewd2": "~2.0.2"
|
||||||
|
}
|
||||||
|
}
|
@ -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 } }));
|
||||||
|
}
|
||||||
|
};
|
After Width: | Height: | Size: 179 KiB |
@ -0,0 +1,201 @@
|
|||||||
|
var mongoose = require('mongoose');
|
||||||
|
var passport = require('passport');
|
||||||
|
var config = require('../config/database');
|
||||||
|
require('../config/passport')(passport);
|
||||||
|
var express = require('express');
|
||||||
|
var jwt = require('jsonwebtoken');
|
||||||
|
var router = express.Router();
|
||||||
|
var User = require("../models/user");
|
||||||
|
var FileMongo = require("../models/FileMongo");
|
||||||
|
var Book = require("../models/book");
|
||||||
|
|
||||||
|
var multer = require('multer');
|
||||||
|
var upload = multer({ dest: './public/' });
|
||||||
|
|
||||||
|
/* GET home page. */
|
||||||
|
router.get('/', function(req, res, next) {
|
||||||
|
res.send('Express RESTful API');
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
router.post('/signup', function(req, res) {
|
||||||
|
if (!req.body.username || !req.body.password) {
|
||||||
|
res.json({success: false, msg: 'Please pass username and password.'});
|
||||||
|
} else {
|
||||||
|
var newUser = new User({
|
||||||
|
username: req.body.username,
|
||||||
|
password: req.body.password
|
||||||
|
});
|
||||||
|
// save the user
|
||||||
|
newUser.save(function(err) {
|
||||||
|
if (err) {
|
||||||
|
return res.json({success: false, msg: 'Username already exists.'});
|
||||||
|
}
|
||||||
|
res.json({success: true, msg: 'Successful created new user.'});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* SAVE FILE */
|
||||||
|
router.post('/uploadFileMongo', function(req, res, next) {
|
||||||
|
console.log('req.body: :: ' + req.body.uid);
|
||||||
|
FileMongo.create(req.body, function (err, post) {
|
||||||
|
if (err){
|
||||||
|
console.log('err: :: ' + err);
|
||||||
|
return next(err);
|
||||||
|
}
|
||||||
|
res.json(post);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/* DELETE FILE */
|
||||||
|
router.post('/deleteFileMongo', function(req, res, next) {
|
||||||
|
|
||||||
|
FileMongo.remove(req.body, function (err, post) {
|
||||||
|
if (err){
|
||||||
|
return next(err);
|
||||||
|
}
|
||||||
|
res.json(post);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
router.post('/signin', function(req, res) {
|
||||||
|
User.findOne({
|
||||||
|
username: req.body.username
|
||||||
|
}, function(err, user) {
|
||||||
|
if (err) throw err;
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
res.status(401).send({success: false, msg: 'Authentication failed. User not found.'});
|
||||||
|
} else {
|
||||||
|
// check if password matches
|
||||||
|
user.comparePassword(req.body.password, function (err, isMatch) {
|
||||||
|
if (isMatch && !err) {
|
||||||
|
console.log('req.user.username logggggg ::: ' + JSON.stringify(user));
|
||||||
|
// if user is found and password is right create a token
|
||||||
|
var token = jwt.sign(user.toJSON(), config.secret);
|
||||||
|
// return the information including token as JSON
|
||||||
|
res.json({success: true, token: 'JWT ' + token});
|
||||||
|
} else {
|
||||||
|
res.status(401).send({success: false, msg: 'Authentication failed. Wrong password.'});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
router.post('/book', passport.authenticate('jwt', { session: false}), function(req, res) {
|
||||||
|
var token = getToken(req.headers);
|
||||||
|
if (token) {
|
||||||
|
|
||||||
|
var newBook = new Book({
|
||||||
|
isbn: req.body.isbn,
|
||||||
|
title: req.body.title,
|
||||||
|
author: req.body.author,
|
||||||
|
publisher: req.body.publisher
|
||||||
|
});
|
||||||
|
|
||||||
|
newBook.save(function(err) {
|
||||||
|
if (err) {
|
||||||
|
return res.json({success: false, msg: 'Save book failed.'});
|
||||||
|
}
|
||||||
|
res.json({success: true, msg: 'Successful created new book.'});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return res.status(403).send({success: false, msg: 'Unauthorized.'});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
/*
|
||||||
|
router.post('/book/file', function(req, res) {
|
||||||
|
if(req.files){
|
||||||
|
//var file = req.files.filename;
|
||||||
|
//var filename = req.files.filename.name;
|
||||||
|
|
||||||
|
console.log(req.files);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
const storage = multer.diskStorage({
|
||||||
|
destination: function (req, file, cb) {
|
||||||
|
cb(null, './public/')
|
||||||
|
},
|
||||||
|
filename: function (req, file, cb) {
|
||||||
|
cb(null, file.originalname)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//post qui va stocker la photo du user ajoute dans le register , multer permet de definir le dossier serveur dans lequel seront stockes les photos
|
||||||
|
router.post('/upload' , multer({storage: storage}).array("public[]", 12) ,function(req,res,next){
|
||||||
|
|
||||||
|
console.log("req.files[0].fieldname: "+req.files[0].fieldname);//ok
|
||||||
|
console.log("req.files[0].originalname: "+req.files[0].originalname);//ok
|
||||||
|
console.log("req.files.filename: "+req.files[0].filename);//ok
|
||||||
|
console.log("req.files.path: "+req.files[0].path);//ok
|
||||||
|
console.log("req.files.size: "+req.files[0].size);//ok
|
||||||
|
res.send(req.files);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
router.get('/allUserFile', passport.authenticate('jwt', { session: false}), function(req, res) {
|
||||||
|
var token = getToken(req.headers);
|
||||||
|
|
||||||
|
if (token) {
|
||||||
|
console.log('oooooo : ' + req.user._id + ' ::: kaka : ' + req.user.username);
|
||||||
|
FileMongo.find({
|
||||||
|
idUser: req.user._id,
|
||||||
|
owner: req.user.username
|
||||||
|
}, function(err, file) {
|
||||||
|
console.log('userrrr baa : ' + JSON.stringify(file));
|
||||||
|
res.json(file);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return res.status(403).send({success: false, msg: 'Unauthorized.'});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
router.get('/book', passport.authenticate('jwt', { session: false}), function(req, res) {
|
||||||
|
var token = getToken(req.headers);
|
||||||
|
|
||||||
|
if (token) {
|
||||||
|
console.log('oooooo : ' + req.user._id + ' ::: kaka : ' + req.user.username);
|
||||||
|
FileMongo.find({
|
||||||
|
idUser: req.user._id,
|
||||||
|
owner: req.user.username
|
||||||
|
}, function(err, file) {
|
||||||
|
console.log('userrrr baa : ' + JSON.stringify(file));
|
||||||
|
});
|
||||||
|
console.log('req.user.username yiiiiii ::: ' + req.user.username);
|
||||||
|
res.json(req.user);
|
||||||
|
/*
|
||||||
|
Book.find(function (err, books) {
|
||||||
|
if (err) return next(err);
|
||||||
|
res.json(books);
|
||||||
|
});*/
|
||||||
|
} else {
|
||||||
|
return res.status(403).send({success: false, msg: 'Unauthorized.'});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
router.get('/book/file', function(req, res) {
|
||||||
|
|
||||||
|
res.sendFile(__dirname + '/api/book');
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
getToken = function (headers) {
|
||||||
|
if (headers && headers.authorization) {
|
||||||
|
var parted = headers.authorization.split(' ');
|
||||||
|
if (parted.length === 2) {
|
||||||
|
return parted[1];
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = router;
|
@ -0,0 +1,10 @@
|
|||||||
|
[Dolphin]
|
||||||
|
PreviewsShown=true
|
||||||
|
SortOrder=1
|
||||||
|
SortRole=modificationtime
|
||||||
|
Timestamp=2018,3,23,10,44,54
|
||||||
|
Version=4
|
||||||
|
VisibleRoles=Icons_text,Icons_modificationtime
|
||||||
|
|
||||||
|
[Settings]
|
||||||
|
HiddenFilesShown=true
|
@ -0,0 +1 @@
|
|||||||
|
// Your custom styles
|
@ -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,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;
|
||||||
|
min-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,200 @@
|
|||||||
|
@media (min-width: 1200px) {
|
||||||
|
.navbar.navbar-expand-xl {
|
||||||
|
links,
|
||||||
|
navlinks {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center !important;
|
||||||
|
align-self: center !important;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.navbar>logo>div>a {
|
||||||
|
img {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar.navbar-expand-lg {
|
||||||
|
links,
|
||||||
|
navlinks {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center !important;
|
||||||
|
align-self: center !important;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.navbar.navbar-expand-md {
|
||||||
|
links,
|
||||||
|
navlinks {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.navbar.navbar-expand-sm {
|
||||||
|
links,
|
||||||
|
navlinks {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// .navbar {
|
||||||
|
// z-index: 91;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.navbar-container {
|
||||||
|
order: -1;
|
||||||
|
width: 50px !important;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs {
|
||||||
|
display: flex;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-right: 5px;
|
||||||
|
order: 0;
|
||||||
|
align-items: center;
|
||||||
|
@media (min-width: 1441px) {
|
||||||
|
margin-left: -0.6rem;
|
||||||
|
}
|
||||||
|
} //EDGE
|
||||||
|
@supports (-ms-ime-align: auto) {
|
||||||
|
.ie-nav {
|
||||||
|
@media all and (min-width: 992px) {
|
||||||
|
.navbar-nav.nav-flex-icons {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.navbar-nav {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
margin-left: 88px;
|
||||||
|
}
|
||||||
|
.navbar-brand>img {
|
||||||
|
margin-top: -2px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-toggler {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -40px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.intro-non-fixed-nav>links {
|
||||||
|
@media all and (min-width: 992px) {
|
||||||
|
.navbar-collapse {
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.intro-fixed-nav {
|
||||||
|
@media all and (min-width: 992px) {
|
||||||
|
.navbar-nav.nav-flex-icons {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.navbar-nav {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
margin-left: 88px;
|
||||||
|
}
|
||||||
|
.navbar-brand {
|
||||||
|
img {
|
||||||
|
margin-top: -2px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-toggler {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -40px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} //IE10+
|
||||||
|
@media all and (-ms-high-contrast: none),
|
||||||
|
(-ms-high-contrast: active) {
|
||||||
|
.ie-nav {
|
||||||
|
@media all and (min-width: 992px) {
|
||||||
|
.navbar-nav.nav-flex-icons {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.navbar-nav {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
margin-left: 88px;
|
||||||
|
}
|
||||||
|
.navbar-brand>img {
|
||||||
|
margin-top: -2px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-toggler {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -40px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.intro-non-fixed-nav>links {
|
||||||
|
@media all and (min-width: 992px) {
|
||||||
|
.navbar-collapse {
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.intro-fixed-nav {
|
||||||
|
@media all and (min-width: 992px) {
|
||||||
|
.navbar-nav.nav-flex-icons {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.navbar-nav {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
margin-left: 88px;
|
||||||
|
}
|
||||||
|
.navbar-brand {
|
||||||
|
img {
|
||||||
|
margin-top: -2px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-toggler {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -40px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fix for situation when in Chrome, dropdown button got default browser styling
|
||||||
|
button,
|
||||||
|
html [type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
@ -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;
|
||||||
|
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 @@
|
|||||||
|
mdb-tabset {
|
||||||
|
a {
|
||||||
|
&.waves-effect,
|
||||||
|
&.waves-light {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,13 @@
|
|||||||
|
@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,33 @@
|
|||||||
|
//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"./pro/cards";
|
||||||
|
|
||||||
|
@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-body {
|
||||||
|
padding-top: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-collapsed {
|
||||||
|
.card-header {
|
||||||
|
a {
|
||||||
|
.rotate-icon {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Collapsible body
|
||||||
|
.collapsible-body {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
position: relative;
|
||||||
|
.card-body {
|
||||||
|
-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,100 @@
|
|||||||
|
.md-form label.active {
|
||||||
|
color: #4285f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-box {
|
||||||
|
@extend .jumbotron;
|
||||||
|
padding: 3rem;
|
||||||
|
@media (max-width: $small-screen-up) {
|
||||||
|
text-align: center;
|
||||||
|
img {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
strong {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
} // Comments section
|
||||||
|
.comments-list,
|
||||||
|
.reply-form {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
.badge {
|
||||||
|
@extend .z-depth-1-half;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
max-width: 100px;
|
||||||
|
@extend .z-depth-2;
|
||||||
|
@extend .img-fluid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
.user-name {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.comment-date {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.comment-text {
|
||||||
|
color: #9e9e9e;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
@media (max-width: $small-screen-up) {
|
||||||
|
text-align: center;
|
||||||
|
img {
|
||||||
|
display: inline;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.md-form {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-center {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Full width blog section
|
||||||
|
.section-blog-fw {
|
||||||
|
.view {
|
||||||
|
@extend .z-depth-1;
|
||||||
|
}
|
||||||
|
.jumbotron {
|
||||||
|
// @extend .m-1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
@extend .h2-responsive;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
a {
|
||||||
|
color: #424242;
|
||||||
|
transition: 0.2s;
|
||||||
|
&:hover {
|
||||||
|
color: #616161;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} //blog icons
|
||||||
|
.personal-sm {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
a {
|
||||||
|
padding: 5px;
|
||||||
|
&:first-of-type {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.fa {
|
||||||
|
transition-duration: .2s;
|
||||||
|
}
|
||||||
|
&:hover .fa {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,77 @@
|
|||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-rounded {
|
||||||
|
border-radius: 10em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type=checkbox].onFocusSelect,
|
||||||
|
[type=radio].onFocusSelect {
|
||||||
|
visibility: visible !important;
|
||||||
|
opacity: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Checkbox
|
||||||
|
// [type="checkbox"] {
|
||||||
|
// &[class*="filled-in"] {
|
||||||
|
// &:checked {
|
||||||
|
// +label:after {
|
||||||
|
|
||||||
|
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
[type=checkbox].onFocusSelect,
|
||||||
|
[type=radio].onFocusSelect {
|
||||||
|
visibility: visible !important;
|
||||||
|
opacity: 0 !important;
|
||||||
|
}
|
@ -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;
|
||||||
|
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,111 @@
|
|||||||
|
.picker__select--month, .picker__select--year {
|
||||||
|
display: inline-block !important;
|
||||||
|
height: 2em;
|
||||||
|
padding: 0;
|
||||||
|
margin-left: .25em;
|
||||||
|
margin-right: .25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker {
|
||||||
|
z-index: 90;
|
||||||
|
font-size: 15px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: #000000;
|
||||||
|
position: absolute;
|
||||||
|
-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__frame {
|
||||||
|
min-height: 575px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,303 @@
|
|||||||
|
doublenavbar {
|
||||||
|
.side-nav,
|
||||||
|
#sidenav-overlay {
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
doublenavbar {
|
||||||
|
links,
|
||||||
|
navlinks {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
height: 0 !important;
|
||||||
|
}
|
||||||
|
.double-nav {
|
||||||
|
|
||||||
|
@media all and (min-width: 992px) {
|
||||||
|
logo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center !important;
|
||||||
|
align-self: center !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.navbar-brand {
|
||||||
|
img {
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button-collapse {
|
||||||
|
@media (max-width: $sidenav-breakpoint) {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 25%;
|
||||||
|
font-size: $navbar-button-collapse-fs-sm;
|
||||||
|
margin-top: -2px !important;
|
||||||
|
margin-right: $navbar-button-collapse-mx;
|
||||||
|
margin-left: $navbar-button-collapse-mx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button-collapse-non-fixed {
|
||||||
|
position: absolute; // top: $navbar-button-collapse-top;
|
||||||
|
left: $navbar-button-collapse-left;
|
||||||
|
font-size: $navbar-button-collapse-font-size;
|
||||||
|
@media (min-width: $sidenav-breakpoint) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media all and (max-width: 599px) {
|
||||||
|
margin-top: -6px;
|
||||||
|
}
|
||||||
|
@media (max-width: $sidenav-breakpoint) {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 15px;
|
||||||
|
font-size: $navbar-button-collapse-fs-sm; // margin-top: $navbar-button-collapse-mt;
|
||||||
|
margin-right: $navbar-button-collapse-mx;
|
||||||
|
margin-left: $navbar-button-collapse-mx;
|
||||||
|
}
|
||||||
|
@media all and (min-width: 600px) and (max-width: 993px) {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button-collapse-non-fixed.hidden-nav>i {
|
||||||
|
@media all and (min-width: 600px) and (max-width: 993px) {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px !important;
|
||||||
|
margin-top: -5px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hidden-nav-button-collapse {
|
||||||
|
@media all and (min-width: 600px) and (max-width: 993px) {
|
||||||
|
position: absolute;
|
||||||
|
top: 25%;
|
||||||
|
margin-top: -3px;
|
||||||
|
}
|
||||||
|
@media all and (min-width: 994px) {
|
||||||
|
margin-top: -3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hidden-nav {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 13px;
|
||||||
|
left: $navbar-button-collapse-left;
|
||||||
|
font-size: $navbar-button-collapse-font-size;
|
||||||
|
margin-left: $navbar-button-collapse-mx;
|
||||||
|
} //material dropdown
|
||||||
|
.dropdown {
|
||||||
|
.dropdown-menu {
|
||||||
|
margin-left: -68px;
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
transform: translate3d(6px, 49px, 0px);
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Fix for double nav only for IE10+
|
||||||
|
@media all and (-ms-high-contrast: none),
|
||||||
|
(-ms-high-contrast: active) {
|
||||||
|
.ie-hidden-double-nav {
|
||||||
|
box-sizing: content-box;
|
||||||
|
max-height: 40.5px;
|
||||||
|
}
|
||||||
|
.breadcrumbs {
|
||||||
|
margin-left: 25px !important;
|
||||||
|
margin-top: 2px;
|
||||||
|
img {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ie-double-nav {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
right: 0; // margin-top: 4px;
|
||||||
|
}
|
||||||
|
.nav-link {
|
||||||
|
padding-top: 0 !important;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
.button-collapse-non-fixed,
|
||||||
|
.button-collapse {
|
||||||
|
position: absolute;
|
||||||
|
top: 30% !important;
|
||||||
|
}
|
||||||
|
.hidden-nav-button-collapse {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
@media all and (max-width: 599px) {
|
||||||
|
.ie-double-nav {
|
||||||
|
margin-top: -4px;
|
||||||
|
}
|
||||||
|
.ie-hidden-double-nav {
|
||||||
|
.ie-double-nav {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button-collapse,
|
||||||
|
.button-collapse-non-fixed {
|
||||||
|
top: 5px !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media all and (min-width: 600px) and (max-width: 992px) {
|
||||||
|
.button-collapse-non-fixed {
|
||||||
|
margin-top: -4px !important;
|
||||||
|
}
|
||||||
|
.button-collapse {
|
||||||
|
margin-top: -6px !important;
|
||||||
|
}
|
||||||
|
.ie-double-nav {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
.hidden-nav-button-collapse i {
|
||||||
|
margin-top: 10px !important;
|
||||||
|
}
|
||||||
|
.breadcrumbs p {
|
||||||
|
margin-top: -8px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media all and (min-width: 993px) and (max-width: 1441px) {
|
||||||
|
.button-collapse-non-fixed,
|
||||||
|
.button-collapse {
|
||||||
|
margin-top: -6px !important;
|
||||||
|
}
|
||||||
|
.breadcrumbs>p {
|
||||||
|
margin-top: -2px !important;
|
||||||
|
}
|
||||||
|
.navbar-brand>img {
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
.breadcrumbs-non-fixed p {
|
||||||
|
margin-top: 2px !important;
|
||||||
|
}
|
||||||
|
.hidden-nav-button-collapse {
|
||||||
|
position: absolute !important;
|
||||||
|
margin-left: 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media all and (min-width: 1441px) {
|
||||||
|
.hidden-nav-button-collapse {
|
||||||
|
position: absolute !important;
|
||||||
|
margin-left: 10px !important;
|
||||||
|
}
|
||||||
|
.button-collapse-non-fixed {
|
||||||
|
margin-top: -5px;
|
||||||
|
}
|
||||||
|
.breadcrumbs>.navbar-brand {
|
||||||
|
img {
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// EDGE
|
||||||
|
@supports (-ms-ime-align: auto) {
|
||||||
|
.ie-hidden-double-nav {
|
||||||
|
box-sizing: content-box;
|
||||||
|
max-height: 40.5px;
|
||||||
|
}
|
||||||
|
.breadcrumbs {
|
||||||
|
margin-left: 25px !important;
|
||||||
|
margin-top: 2px;
|
||||||
|
img {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ie-double-nav {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
right: 0; // margin-top: 4px;
|
||||||
|
}
|
||||||
|
.nav-link {
|
||||||
|
padding-top: 0 !important;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
.button-collapse-non-fixed,
|
||||||
|
.button-collapse {
|
||||||
|
position: absolute;
|
||||||
|
top: 30% !important;
|
||||||
|
}
|
||||||
|
.hidden-nav-button-collapse {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
@media all and (max-width: 599px) {
|
||||||
|
.ie-double-nav {
|
||||||
|
margin-top: -4px;
|
||||||
|
}
|
||||||
|
.ie-hidden-double-nav {
|
||||||
|
.ie-double-nav {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button-collapse,
|
||||||
|
.button-collapse-non-fixed {
|
||||||
|
top: 5px !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media all and (min-width: 600px) and (max-width: 992px) {
|
||||||
|
.button-collapse-non-fixed {
|
||||||
|
margin-top: -4px !important;
|
||||||
|
}
|
||||||
|
.button-collapse {
|
||||||
|
margin-top: -6px !important;
|
||||||
|
}
|
||||||
|
.ie-double-nav {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
.hidden-nav-button-collapse i {
|
||||||
|
margin-top: 10px !important;
|
||||||
|
}
|
||||||
|
.breadcrumbs p {
|
||||||
|
margin-top: -8px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media all and (min-width: 993px) and (max-width: 1441px) {
|
||||||
|
.button-collapse-non-fixed,
|
||||||
|
.button-collapse {
|
||||||
|
margin-top: -6px !important;
|
||||||
|
}
|
||||||
|
.breadcrumbs>p {
|
||||||
|
margin-top: -2px !important;
|
||||||
|
}
|
||||||
|
.breadcrumbs>.navbar-brand>img {
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
.breadcrumbs-non-fixed p {
|
||||||
|
margin-top: 2px !important;
|
||||||
|
}
|
||||||
|
.hidden-nav-button-collapse {
|
||||||
|
position: absolute !important;
|
||||||
|
margin-left: 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media all and (min-width: 1441px) {
|
||||||
|
.hidden-nav-button-collapse {
|
||||||
|
position: absolute !important;
|
||||||
|
margin-left: 10px !important;
|
||||||
|
}
|
||||||
|
.button-collapse-non-fixed {
|
||||||
|
margin-top: -5px;
|
||||||
|
}
|
||||||
|
.breadcrumbs>.navbar-brand {
|
||||||
|
img {
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -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,292 @@
|
|||||||
|
mdb-image-modal {
|
||||||
|
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('#{$image-path}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(#{$image-path}/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(#{$image-path}/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(#{$image-path}/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(#{$image-path}/lightbox/default-skin.png);
|
||||||
|
background-position: -88px 0;
|
||||||
|
opacity: 0.75;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
&.zoom {
|
||||||
|
background-position: -132px 0;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__button,
|
||||||
|
.pswp__button--arrow--left:before,
|
||||||
|
.pswp__button--arrow--right:before {
|
||||||
|
background: url(#{$image-path}/lightbox/default-skin.png) 0 0 no-repeat !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp--svg .pswp__button,
|
||||||
|
.pswp--svg .pswp__button--arrow--left:before,
|
||||||
|
.pswp--svg .pswp__button--arrow--right:before {
|
||||||
|
background-image: url(#{$image-path}/lightbox/default-skin.svg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__preloader--active {
|
||||||
|
.pswp__preloader__icn {
|
||||||
|
/* We use .gif in browsers that don't support CSS animation */
|
||||||
|
background: url(#{$image-path}/lightbox/preloader.gif) 0 0 no-repeat !important;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,472 @@
|
|||||||
|
/*ng-select*/
|
||||||
|
|
||||||
|
mdb-select {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 100%;
|
||||||
|
* {
|
||||||
|
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%;
|
||||||
|
margin-top: -2px;
|
||||||
|
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: 5px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
mdb-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 !important;
|
||||||
|
}
|
||||||
|
&.active span,
|
||||||
|
&.selected span {
|
||||||
|
background-color: $primary-color;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-danger.colorful-select .dropdown-content li {
|
||||||
|
&.active,
|
||||||
|
&.selected {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
&.active span,
|
||||||
|
&.selected span {
|
||||||
|
background-color: $danger-color-dark;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-default.colorful-select .dropdown-content li {
|
||||||
|
&.active,
|
||||||
|
&.selected {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
&.active span,
|
||||||
|
&.selected span {
|
||||||
|
background-color: $default-color;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-secondary.colorful-select .dropdown-content li {
|
||||||
|
&.active,
|
||||||
|
&.selected {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
&.active span,
|
||||||
|
&.selected span {
|
||||||
|
background-color: $secondary-color;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-success.colorful-select .dropdown-content li {
|
||||||
|
&.active,
|
||||||
|
&.selected {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
&.active span,
|
||||||
|
&.selected span {
|
||||||
|
background-color: $success-color;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-info.colorful-select .dropdown-content li {
|
||||||
|
&.active,
|
||||||
|
&.selected {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
&.active span,
|
||||||
|
&.selected span {
|
||||||
|
background-color: $info-color;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-warning.colorful-select .dropdown-content li {
|
||||||
|
&.active,
|
||||||
|
&.selected {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
&.active span,
|
||||||
|
&.selected span {
|
||||||
|
background-color: $warning-color;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-ins.colorful-select .dropdown-content li {
|
||||||
|
&.active,
|
||||||
|
&.selected {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
&.active span,
|
||||||
|
&.selected span {
|
||||||
|
background-color: $unique-color;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-dark.colorful-select .dropdown-content li {
|
||||||
|
&.active,
|
||||||
|
&.selected {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
&.active span,
|
||||||
|
&.selected span {
|
||||||
|
background-color: $elegant-color;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mdb-select+label {
|
||||||
|
position: absolute;
|
||||||
|
top: -14px;
|
||||||
|
font-size: .8rem;
|
||||||
|
left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
//select animation
|
||||||
|
mdb-select {
|
||||||
|
ul.select-dropdown li {
|
||||||
|
@keyframes dropdown-animation {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1.0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
mdb-select-dropdown {
|
||||||
|
display: block;
|
||||||
|
animation: dropdown-animation 0.55s;
|
||||||
|
}
|
||||||
|
.fadeInSelect {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiple-select-dropdown li [type="checkbox"]+label {
|
||||||
|
height: 10px;
|
||||||
|
top: 0 !important;
|
||||||
|
margin-top: 1px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,823 @@
|
|||||||
|
// 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
|
||||||
|
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
|
||||||
|
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
|
||||||
|
animation-delay: 1.15s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes indeterminate {
|
||||||
|
0% {
|
||||||
|
left: -35%;
|
||||||
|
right: 100%;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
left: 100%;
|
||||||
|
right: -90%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
left: 100%;
|
||||||
|
right: -90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@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 {
|
||||||
|
from {
|
||||||
|
-webkit-transform: rotate(0deg)
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: rotate(360deg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes container-rotate {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg)
|
||||||
|
}
|
||||||
|
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 than 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//<mdb-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;
|
||||||
|
fill: transparent;
|
||||||
|
}
|
||||||
|
&[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;
|
||||||
|
}
|
||||||
|
|
||||||
|
mdb-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,830 @@
|
|||||||
|
#sidenav-overlay {
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-nav {
|
||||||
|
transition: 0.5s;
|
||||||
|
background-color: #2c2f34;
|
||||||
|
|
||||||
|
.sidenav-bg {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.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-body 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: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0;
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(255,255,255,.15);
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
padding-left: 20px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
line-height: 40px;
|
||||||
|
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-body {
|
||||||
|
padding: 0 !important;
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
background-color: rgba(0, 0, 0, .15);
|
||||||
|
padding-left: 30px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
line-height: 32px;
|
||||||
|
height: 32px;
|
||||||
|
padding-left: 47px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #fff;
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:first-of-type {
|
||||||
|
border-top: 0 !important;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.white-skin .side-nav {
|
||||||
|
form.search-form > div {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.sidenav-bg {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.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-body {
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
color: #424242;
|
||||||
|
background-color: rgba(0,0,0,.15);
|
||||||
|
&:hover {
|
||||||
|
color: #4285F4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.black-skin .side-nav {
|
||||||
|
form.search-form > div {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.sidenav-bg {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.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-body {
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(0,0,0,.15);
|
||||||
|
&:hover {
|
||||||
|
color: #2AD1A3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyan-skin .side-nav {
|
||||||
|
form.search-form > div {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.sidenav-bg {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.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-body {
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(0,0,0,.15);
|
||||||
|
&:hover {
|
||||||
|
color: #ffa742;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdb-skin .side-nav {
|
||||||
|
form.search-form > div {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.sidenav-bg {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.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-body {
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(0,0,0,.15);
|
||||||
|
&:hover {
|
||||||
|
color: #33b5e5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.deep-purple-skin .side-nav {
|
||||||
|
form.search-form > div {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.sidenav-bg {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.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-body {
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(0,0,0,.15);
|
||||||
|
&:hover {
|
||||||
|
color: #d0637c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navy-blue-skin .side-nav {
|
||||||
|
form.search-form > div {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.sidenav-bg {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.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-body {
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(0,0,0,.15);
|
||||||
|
&:hover {
|
||||||
|
color: #40c6c6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pink-skin .side-nav {
|
||||||
|
form.search-form > div {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.sidenav-bg {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.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-body {
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(0,0,0,.15);
|
||||||
|
&:hover {
|
||||||
|
color: #ffb0e6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey-skin .side-nav {
|
||||||
|
form.search-form > div {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.sidenav-bg {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.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-body {
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(0,0,0,.15);
|
||||||
|
&:hover {
|
||||||
|
color: #afdffc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.indigo-skin .side-nav {
|
||||||
|
form.search-form > div {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.sidenav-bg {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.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-body {
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(0,0,0,.15);
|
||||||
|
&:hover {
|
||||||
|
color: #ff89ac;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-blue-skin .side-nav {
|
||||||
|
form.search-form > div {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.sidenav-bg {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.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-body {
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(0,0,0,.15);
|
||||||
|
&:hover {
|
||||||
|
color: #aadeff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,60 @@
|
|||||||
|
// General
|
||||||
|
.nav-tabs {
|
||||||
|
overflow-y: hidden;
|
||||||
|
.nav-item {
|
||||||
|
flex-basis: 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom : 0;
|
||||||
|
a {
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Vertical Tab
|
||||||
|
mdb-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 {
|
||||||
|
@extend .rgba-grey-light;
|
||||||
|
// background-color: $rgba-grey-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
color: #fff !important;
|
||||||
|
@extend .z-depth-1;
|
||||||
|
}
|
||||||
|
.active:hover {
|
||||||
|
@extend .z-depth-1-half;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.margin li {
|
||||||
|
margin: 0.5em !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Classic Tab
|
||||||
|
|
||||||
|
.classic-tabs {
|
||||||
|
// overflow-y: hidden;
|
||||||
|
white-space: normal;
|
||||||
|
.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,65 @@
|
|||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#toast-container > mdb-toast-component {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0 0 6px;
|
||||||
|
padding: 15px 15px 15px 50px;
|
||||||
|
width: 300px;
|
||||||
|
background-position: 15px center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
@extend .z-depth-1;
|
||||||
|
@extend .white-text;
|
||||||
|
opacity: 0.8;
|
||||||
|
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||||
|
filter: alpha(opacity=80);
|
||||||
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
}
|
||||||
|
#toast-container.toast-top-center > mdb-toast-component,
|
||||||
|
#toast-container.toast-bottom-center > mdb-toast-component {
|
||||||
|
width: 300px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
#toast-container.toast-top-full-width > mdb-toast-component,
|
||||||
|
#toast-container.toast-bottom-full-width > mdb-toast-component {
|
||||||
|
width: 96%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Responsive Design*/
|
||||||
|
@media all and (max-width: 240px) {
|
||||||
|
#toast-container > mdb-toast-component {
|
||||||
|
padding: 8px 8px 8px 50px;
|
||||||
|
width: 11em;
|
||||||
|
}
|
||||||
|
#toast-container .toast-close-button {
|
||||||
|
right: -0.2em;
|
||||||
|
top: -0.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media all and (min-width: 241px) and (max-width: 480px) {
|
||||||
|
#toast-container > mdb-toast-component {
|
||||||
|
padding: 8px 8px 8px 50px;
|
||||||
|
width: 18em;
|
||||||
|
}
|
||||||
|
#toast-container .toast-close-button {
|
||||||
|
right: -0.2em;
|
||||||
|
top: -0.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media all and (min-width: 481px) and (max-width: 768px) {
|
||||||
|
#toast-container > mdb-toast-component {
|
||||||
|
padding: 15px 15px 15px 50px;
|
||||||
|
width: 25em;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,10 @@
|
|||||||
|
[Dolphin]
|
||||||
|
PreviewsShown=true
|
||||||
|
SortOrder=1
|
||||||
|
SortRole=modificationtime
|
||||||
|
Timestamp=2018,4,20,11,13,6
|
||||||
|
Version=4
|
||||||
|
VisibleRoles=Icons_text,Icons_modificationtime
|
||||||
|
|
||||||
|
[Settings]
|
||||||
|
HiddenFilesShown=true
|
@ -0,0 +1,51 @@
|
|||||||
|
//
|
||||||
|
// Base styles
|
||||||
|
//
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
position: relative;
|
||||||
|
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 {
|
||||||
|
padding-right: ($close-font-size + $alert-padding-x * 2);
|
||||||
|
|
||||||
|
// Adjust close link position
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
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, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,47 @@
|
|||||||
|
// 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;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: baseline;
|
||||||
|
@include border-radius($badge-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,41 @@
|
|||||||
|
.breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||||
|
margin-bottom: $breadcrumb-margin-bottom;
|
||||||
|
list-style: none;
|
||||||
|
background-color: $breadcrumb-bg;
|
||||||
|
@include border-radius($breadcrumb-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-item {
|
||||||
|
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
||||||
|
+ .breadcrumb-item {
|
||||||
|
padding-left: $breadcrumb-item-padding;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: inline-block; // Suppress underlining of the separator in modern browsers
|
||||||
|
padding-right: $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;
|
||||||
|
}
|
||||||
|
// stylelint-disable-next-line no-duplicate-selectors
|
||||||
|
+ .breadcrumb-item:hover::before {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $breadcrumb-active-color;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,172 @@
|
|||||||
|
// stylelint-disable selector-no-qualifying-type
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Bring the hover, focused, and "active" buttons to the front to overlay
|
||||||
|
// the borders properly
|
||||||
|
@include hover {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
&:focus,
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prevent double borders when buttons are next to each other
|
||||||
|
.btn + .btn,
|
||||||
|
.btn + .btn-group,
|
||||||
|
.btn-group + .btn,
|
||||||
|
.btn-group + .btn-group {
|
||||||
|
margin-left: -$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:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset rounded corners
|
||||||
|
> .btn:not(:last-child):not(.dropdown-toggle),
|
||||||
|
> .btn-group:not(:last-child) > .btn {
|
||||||
|
@include border-right-radius(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
> .btn:not(:first-child),
|
||||||
|
> .btn-group:not(:first-child) > .btn {
|
||||||
|
@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
|
||||||
|
//
|
||||||
|
|
||||||
|
.dropdown-toggle-split {
|
||||||
|
padding-right: $btn-padding-x * .75;
|
||||||
|
padding-left: $btn-padding-x * .75;
|
||||||
|
|
||||||
|
&::after,
|
||||||
|
.dropup &::after,
|
||||||
|
.dropright &::after {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropleft &::before {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sm + .dropdown-toggle-split {
|
||||||
|
padding-right: $btn-padding-x-sm * .75;
|
||||||
|
padding-left: $btn-padding-x-sm * .75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-lg + .dropdown-toggle-split {
|
||||||
|
padding-right: $btn-padding-x-lg * .75;
|
||||||
|
padding-left: $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 {
|
||||||
|
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: -$btn-border-width;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset rounded corners
|
||||||
|
> .btn:not(:last-child):not(.dropdown-toggle),
|
||||||
|
> .btn-group:not(:last-child) > .btn {
|
||||||
|
@include border-bottom-radius(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
> .btn:not(:first-child),
|
||||||
|
> .btn-group:not(:first-child) > .btn {
|
||||||
|
@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.
|
||||||
|
|
||||||
|
.btn-group-toggle {
|
||||||
|
> .btn,
|
||||||
|
> .btn-group > .btn {
|
||||||
|
margin-bottom: 0; // Override default `<label>` value
|
||||||
|
|
||||||
|
input[type="radio"],
|
||||||
|
input[type="checkbox"] {
|
||||||
|
position: absolute;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,144 @@
|
|||||||
|
// stylelint-disable selector-no-qualifying-type
|
||||||
|
|
||||||
|
//
|
||||||
|
// Base styles
|
||||||
|
//
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: $btn-font-weight;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
user-select: none;
|
||||||
|
border: $btn-border-width solid transparent;
|
||||||
|
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $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: $btn-disabled-opacity;
|
||||||
|
@include box-shadow(none);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Opinionated: add "hand" cursor to non-disabled .btn elements
|
||||||
|
&:not(:disabled):not(.disabled) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):not(.disabled):active,
|
||||||
|
&:not(:disabled):not(.disabled).active {
|
||||||
|
background-image: none;
|
||||||
|
@include box-shadow($btn-active-box-shadow);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Link buttons
|
||||||
|
//
|
||||||
|
|
||||||
|
// Make a button look and behave like a link
|
||||||
|
.btn-link {
|
||||||
|
font-weight: $font-weight-normal;
|
||||||
|
color: $link-color;
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
@include hover {
|
||||||
|
color: $link-hover-color;
|
||||||
|
text-decoration: $link-hover-decoration;
|
||||||
|
background-color: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&.focus {
|
||||||
|
text-decoration: $link-hover-decoration;
|
||||||
|
border-color: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled,
|
||||||
|
&.disabled {
|
||||||
|
color: $btn-link-disabled-color;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// No need for an active state here
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Button Sizes
|
||||||
|
//
|
||||||
|
|
||||||
|
.btn-lg {
|
||||||
|
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sm {
|
||||||
|
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Block button
|
||||||
|
//
|
||||||
|
|
||||||
|
.btn-block {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
// Vertically space out multiple block buttons
|
||||||
|
+ .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,301 @@
|
|||||||
|
//
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
> hr {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
+ .list-group {
|
||||||
|
.list-group-item:first-child {
|
||||||
|
border-top: 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
|
||||||
|
|
||||||
|
.card-deck {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
margin-bottom: $card-deck-margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
flex-flow: row wrap;
|
||||||
|
margin-right: -$card-deck-margin;
|
||||||
|
margin-left: -$card-deck-margin;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
|
||||||
|
flex: 1 0 0%;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: $card-deck-margin;
|
||||||
|
margin-bottom: 0; // Override the default
|
||||||
|
margin-left: $card-deck-margin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Card groups
|
||||||
|
//
|
||||||
|
|
||||||
|
.card-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
// The child selector allows nested `.card` within `.card-group`
|
||||||
|
// to display properly.
|
||||||
|
> .card {
|
||||||
|
margin-bottom: $card-group-margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
flex-flow: row wrap;
|
||||||
|
// The child selector allows nested `.card` within `.card-group`
|
||||||
|
// to display properly.
|
||||||
|
> .card {
|
||||||
|
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
|
||||||
|
flex: 1 0 0%;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
+ .card {
|
||||||
|
margin-left: 0;
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle rounded corners
|
||||||
|
@if $enable-rounded {
|
||||||
|
&:first-child {
|
||||||
|
@include border-right-radius(0);
|
||||||
|
|
||||||
|
.card-img-top,
|
||||||
|
.card-header {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
.card-img-bottom,
|
||||||
|
.card-footer {
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
@include border-left-radius(0);
|
||||||
|
|
||||||
|
.card-img-top,
|
||||||
|
.card-header {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
}
|
||||||
|
.card-img-bottom,
|
||||||
|
.card-footer {
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:only-child {
|
||||||
|
@include border-radius($card-border-radius);
|
||||||
|
|
||||||
|
.card-img-top,
|
||||||
|
.card-header {
|
||||||
|
@include border-top-radius($card-border-radius);
|
||||||
|
}
|
||||||
|
.card-img-bottom,
|
||||||
|
.card-footer {
|
||||||
|
@include border-bottom-radius($card-border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:first-child):not(:last-child):not(:only-child) {
|
||||||
|
@include border-radius(0);
|
||||||
|
|
||||||
|
.card-img-top,
|
||||||
|
.card-img-bottom,
|
||||||
|
.card-header,
|
||||||
|
.card-footer {
|
||||||
|
@include 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;
|
||||||
|
orphans: 1;
|
||||||
|
widows: 1;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
display: inline-block; // Don't let them vertically span multiple columns
|
||||||
|
width: 100%; // Don't let their width change
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Accordion
|
||||||
|
//
|
||||||
|
|
||||||
|
.accordion {
|
||||||
|
.card:not(:first-of-type):not(:last-of-type) {
|
||||||
|
border-bottom: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:not(:first-of-type) {
|
||||||
|
.card-header:first-child {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:first-of-type {
|
||||||
|
border-bottom: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:last-of-type {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,235 @@
|
|||||||
|
// Notes on the classes:
|
||||||
|
//
|
||||||
|
// 1. The .carousel-item-left and .carousel-item-right is used to indicate where
|
||||||
|
// the active slide is heading.
|
||||||
|
// 2. .active.carousel-item is the current slide.
|
||||||
|
// 3. .active.carousel-item-left and .active.carousel-item-right is the current
|
||||||
|
// slide in its in-transition state. Only one of these occurs at a time.
|
||||||
|
// 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
|
||||||
|
// is the upcoming slide in transition.
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Alternate transitions
|
||||||
|
//
|
||||||
|
|
||||||
|
.carousel-fade {
|
||||||
|
.carousel-item {
|
||||||
|
opacity: 0;
|
||||||
|
transition-duration: .6s;
|
||||||
|
transition-property: opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-item.active,
|
||||||
|
.carousel-item-next.carousel-item-left,
|
||||||
|
.carousel-item-prev.carousel-item-right {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active.carousel-item-left,
|
||||||
|
.active.carousel-item-right {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-item-next,
|
||||||
|
.carousel-item-prev,
|
||||||
|
.carousel-item.active,
|
||||||
|
.active.carousel-item-left,
|
||||||
|
.active.carousel-item-prev {
|
||||||
|
transform: translateX(0);
|
||||||
|
|
||||||
|
@supports (transform-style: preserve-3d) {
|
||||||
|
transform: translate3d(0, 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;
|
||||||
|
@if $enable-gradients {
|
||||||
|
background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.carousel-control-next {
|
||||||
|
right: 0;
|
||||||
|
@if $enable-gradients {
|
||||||
|
background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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,34 @@
|
|||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Opinionated: add "hand" cursor to non-disabled .close elements
|
||||||
|
&:not(:disabled):not(.disabled) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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
|
||||||
|
|
||||||
|
// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
|
||||||
|
button.close {
|
||||||
|
padding: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
// stylelint-enable
|