You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
556 lines
15 KiB
CSS
556 lines
15 KiB
CSS
/*
|
|
* The MIT License
|
|
* Copyright (c) 2012 Matias Meno <m@tias.me>
|
|
*/
|
|
@-webkit-keyframes passing-through {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(40px);
|
|
transform: translateY(40px); }
|
|
30%, 70% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0px);
|
|
transform: translateY(0px); }
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-40px);
|
|
transform: translateY(-40px); } }
|
|
|
|
@keyframes passing-through {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(40px);
|
|
transform: translateY(40px); }
|
|
30%, 70% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0px);
|
|
transform: translateY(0px); }
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-40px);
|
|
transform: translateY(-40px); } }
|
|
|
|
@-webkit-keyframes slide-in {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(40px);
|
|
transform: translateY(40px); }
|
|
30% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0px);
|
|
transform: translateY(0px); } }
|
|
|
|
@keyframes slide-in {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(40px);
|
|
transform: translateY(40px); }
|
|
30% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0px);
|
|
transform: translateY(0px); } }
|
|
|
|
@-webkit-keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1); }
|
|
10% {
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1); }
|
|
20% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1); } }
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1); }
|
|
10% {
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1); }
|
|
20% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1); } }
|
|
|
|
.dropzone, .dropzone * {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box; }
|
|
|
|
.dropzone {
|
|
min-height: 150px;
|
|
border: 2px solid rgba(0, 0, 0, 0.3);
|
|
background: white;
|
|
padding: 20px 20px; }
|
|
|
|
.dropzone.dz-clickable {
|
|
cursor: pointer; }
|
|
|
|
.dropzone.dz-clickable * {
|
|
cursor: default; }
|
|
|
|
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
|
|
cursor: pointer; }
|
|
|
|
.dropzone.dz-started .dz-message {
|
|
display: none; }
|
|
|
|
.dropzone.dz-drag-hover {
|
|
border-style: solid; }
|
|
|
|
.dropzone.dz-drag-hover .dz-message {
|
|
opacity: 0.5; }
|
|
|
|
.dropzone .dz-message {
|
|
text-align: center;
|
|
margin: 2em 0; }
|
|
|
|
.dropzone .dz-preview {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin: 16px;
|
|
min-height: 100px; }
|
|
|
|
.dropzone .dz-preview:hover {
|
|
z-index: 1000; }
|
|
|
|
.dropzone .dz-preview:hover .dz-details {
|
|
opacity: 1; }
|
|
|
|
.dropzone .dz-preview.dz-file-preview .dz-image {
|
|
border-radius: 20px;
|
|
background: #999;
|
|
background: -webkit-gradient(linear, right top, right bottom, from(#eee), to(#ddd));
|
|
background: linear-gradient(to bottom, #eee, #ddd); }
|
|
|
|
.dropzone .dz-preview.dz-file-preview .dz-details {
|
|
opacity: 1; }
|
|
|
|
.dropzone .dz-preview.dz-image-preview {
|
|
background: white; }
|
|
|
|
.dropzone .dz-preview.dz-image-preview .dz-details {
|
|
-webkit-transition: opacity 0.2s linear;
|
|
transition: opacity 0.2s linear; }
|
|
|
|
.dropzone .dz-preview .dz-remove {
|
|
font-size: 14px;
|
|
text-align: center;
|
|
display: block;
|
|
cursor: pointer;
|
|
border: none; }
|
|
|
|
.dropzone .dz-preview .dz-remove:hover {
|
|
text-decoration: underline; }
|
|
|
|
.dropzone .dz-preview:hover .dz-details {
|
|
opacity: 1; }
|
|
|
|
.dropzone .dz-preview .dz-details {
|
|
z-index: 20;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
opacity: 0;
|
|
font-size: 13px;
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
padding: 2em 1em;
|
|
text-align: center;
|
|
color: rgba(0, 0, 0, 0.9);
|
|
line-height: 150%; }
|
|
|
|
.dropzone .dz-preview .dz-details .dz-size {
|
|
margin-bottom: 1em;
|
|
font-size: 16px; }
|
|
|
|
.dropzone .dz-preview .dz-details .dz-filename {
|
|
white-space: nowrap; }
|
|
|
|
.dropzone .dz-preview .dz-details .dz-filename:hover span {
|
|
border: 1px solid rgba(200, 200, 200, 0.8);
|
|
background-color: rgba(255, 255, 255, 0.8); }
|
|
|
|
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis; }
|
|
|
|
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
|
|
border: 1px solid transparent; }
|
|
|
|
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
padding: 0 0.4em;
|
|
border-radius: 3px; }
|
|
|
|
.dropzone .dz-preview:hover .dz-image img {
|
|
-webkit-transform: scale(1.05, 1.05);
|
|
transform: scale(1.05, 1.05);
|
|
-webkit-filter: blur(8px);
|
|
filter: blur(8px); }
|
|
|
|
.dropzone .dz-preview .dz-image {
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
width: 120px;
|
|
height: 120px;
|
|
position: relative;
|
|
display: block;
|
|
z-index: 10; }
|
|
|
|
.dropzone .dz-preview .dz-image img {
|
|
display: block; }
|
|
|
|
.dropzone .dz-preview.dz-success .dz-success-mark {
|
|
-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
|
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
|
|
|
|
.dropzone .dz-preview.dz-error .dz-error-mark {
|
|
opacity: 1;
|
|
-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
|
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
|
|
|
|
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
z-index: 500;
|
|
position: absolute;
|
|
display: block;
|
|
top: 50%;
|
|
right: 50%;
|
|
margin-right: -27px;
|
|
margin-top: -27px; }
|
|
|
|
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
|
|
display: block;
|
|
width: 54px;
|
|
height: 54px; }
|
|
|
|
.dropzone .dz-preview.dz-processing .dz-progress {
|
|
opacity: 1;
|
|
-webkit-transition: all 0.2s linear;
|
|
transition: all 0.2s linear; }
|
|
|
|
.dropzone .dz-preview.dz-complete .dz-progress {
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.4s ease-in;
|
|
transition: opacity 0.4s ease-in; }
|
|
|
|
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
|
|
-webkit-animation: pulse 6s ease infinite;
|
|
animation: pulse 6s ease infinite; }
|
|
|
|
.dropzone .dz-preview .dz-progress {
|
|
opacity: 1;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
height: 16px;
|
|
right: 50%;
|
|
top: 50%;
|
|
margin-top: -8px;
|
|
width: 80px;
|
|
margin-right: -40px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
-webkit-transform: scale(1);
|
|
border-radius: 8px;
|
|
overflow: hidden; }
|
|
|
|
.dropzone .dz-preview .dz-progress .dz-upload {
|
|
background: #333;
|
|
background: -webkit-gradient(linear, right top, right bottom, from(#666), to(#444));
|
|
background: linear-gradient(to bottom, #666, #444);
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 0;
|
|
-webkit-transition: width 300ms ease-in-out;
|
|
transition: width 300ms ease-in-out; }
|
|
|
|
.dropzone .dz-preview.dz-error .dz-error-message {
|
|
display: block; }
|
|
|
|
.dropzone .dz-preview.dz-error:hover .dz-error-message {
|
|
opacity: 1;
|
|
pointer-events: auto; }
|
|
|
|
.dropzone .dz-preview .dz-error-message {
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
position: absolute;
|
|
display: block;
|
|
display: none;
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.3s ease;
|
|
transition: opacity 0.3s ease;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
top: 130px;
|
|
right: -10px;
|
|
width: 140px;
|
|
background: #be2626;
|
|
background: -webkit-gradient(linear, right top, right bottom, from(#be2626), to(#a92222));
|
|
background: linear-gradient(to bottom, #be2626, #a92222);
|
|
padding: 0.5em 1.2em;
|
|
color: white; }
|
|
|
|
.dropzone .dz-preview .dz-error-message:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -6px;
|
|
right: 64px;
|
|
width: 0;
|
|
height: 0;
|
|
border-right: 6px solid transparent;
|
|
border-left: 6px solid transparent;
|
|
border-bottom: 6px solid #be2626; }
|
|
|
|
/* THEME COLORs
|
|
========================================================================== */
|
|
/* Looks good on chrome default color profile */
|
|
/* looks good in sRGB but washed up on chrome default
|
|
$color-primary: #826bb0;
|
|
$color-success: #31cb55;
|
|
$color-info: #5e93ec;
|
|
$color-warning: #eec559;
|
|
$color-danger: #dc4b92;
|
|
$color-fusion: darken(desaturate(adjust-hue($color-primary, 5), 80%), 25%); */
|
|
/* Color Polarity
|
|
========================================================================== */
|
|
/* PAINTBUCKET MIXER
|
|
========================================================================== */
|
|
/* the grays */
|
|
/* the sapphires */
|
|
/* the emeralds */
|
|
/* the amethyths */
|
|
/* the topaz */
|
|
/* the rubies */
|
|
/* the graphites */
|
|
/* Define universal border difition (div outlines, etc)
|
|
========================================================================== */
|
|
/* MOBILE BREAKPOINT & GUTTERS (contains some bootstrap responsive overrides)
|
|
========================================================================== */
|
|
/* define when mobile menu activates, here we are declearing (lg) so it targets the one after it */
|
|
/* bootstrap reference xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px*/
|
|
/* global var used for spacing*/
|
|
/* Uniform Padding variable */
|
|
/* Heads up! This is a global scoped variable - changing may impact the whole template */
|
|
/* BOOTSTRAP OVERRIDES (bootstrap variables)
|
|
========================================================================== */
|
|
/* usage: theme-colors("primary"); */
|
|
/* forms */
|
|
/*$input-height: calc(2.25rem + 1px); //I had to add this because the input gruops was having improper height for some reason... */
|
|
/* links */
|
|
/* checkbox */
|
|
/*$custom-file-height-inner: calc(2.25rem - 1px);*/
|
|
/* not part of bootstrap variable */
|
|
/* custom checkbox */
|
|
/* custom range */
|
|
/* select */
|
|
/* badge */
|
|
/* cards */
|
|
/*border radius*/
|
|
/* alert */
|
|
/* toast */
|
|
/* breadcrumb */
|
|
/* input button */
|
|
/* nav link */
|
|
/* nav, tabs, pills */
|
|
/* tables */
|
|
/* dropdowns */
|
|
/* dropdowns sizes */
|
|
/* popovers */
|
|
/* tooltips */
|
|
/* modal */
|
|
/* reference guide
|
|
http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/
|
|
8px = 0.5rem
|
|
9px = 0.5625rem
|
|
10px = 0.625rem
|
|
11px = 0.6875rem
|
|
12px = 0.75rem
|
|
13px = 0.8125rem
|
|
14px = 0.875rem
|
|
15px = 0.9375rem
|
|
16px = 1rem (base)
|
|
17px = 1.0625rem
|
|
18px = 1.125rem
|
|
19px = 1.1875rem
|
|
20px = 1.25rem
|
|
21px = 1.3125rem
|
|
22px = 1.375rem
|
|
24px = 1.5rem
|
|
25px = 1.5625rem
|
|
26px = 1.625rem
|
|
28px = 1.75rem
|
|
30px = 1.875rem
|
|
32px = 2rem
|
|
34px = 2.125rem
|
|
36px = 2.25rem
|
|
38px = 2.375rem
|
|
40px = 2.5rem
|
|
*/
|
|
/* Fonts */
|
|
/* carousel */
|
|
/* BASE VARS
|
|
========================================================================== */
|
|
/* font vars below will auto change to rem values using function rem($value)*/
|
|
/* 11px */
|
|
/* 12px */
|
|
/* 12.5px */
|
|
/* 14px */
|
|
/* 15px */
|
|
/* 16px */
|
|
/* 28px */
|
|
/* Font Family
|
|
========================================================================== */
|
|
/*hint: you can also try the font called 'Poppins' by replacing the font 'Roboto' */
|
|
/* ANIMATIONS
|
|
========================================================================== */
|
|
/* this addresses all animation related to nav hide to nav minify */
|
|
/* Z-INDEX declearation
|
|
========================================================================== */
|
|
/* we adjust bootstrap z-index to be higher than our higest z-index*/
|
|
/* CUSTOM ICON PREFIX
|
|
========================================================================== */
|
|
/* PRINT CSS (landscape or portrait)
|
|
========================================================================== */
|
|
/* landscape or portrait */
|
|
/* auto, letter */
|
|
/* Common Element Variables
|
|
========================================================================== */
|
|
/* Z-index decleartion "birds eye view"
|
|
========================================================================== */
|
|
/* Components
|
|
========================================================================== */
|
|
/* PAGE HEADER STUFF
|
|
========================================================================== */
|
|
/* colors */
|
|
/* height */
|
|
/* logo */
|
|
/* try not to go beywond the width of $main_nav_width value */
|
|
/* you may need to change this depending on your logo design */
|
|
/* adjust this as you see fit : left, right, center */
|
|
/* icon font size (not button) */
|
|
/* search input box */
|
|
/* suggestion: #ccced0*/
|
|
/* btn */
|
|
/* dropdown: app list */
|
|
/* badge */
|
|
/* COMPONENTS & MODS */
|
|
/* NAVIGATION STUFF
|
|
|
|
Guide:
|
|
|
|
aside.page-sidebar ($nav-width, $nav-background)
|
|
.page-logo
|
|
.primary-nav
|
|
.info-card
|
|
ul.nav-menu
|
|
li
|
|
a (parent level-0..., $nav-link-color, $nav-link-hover-color, $nav-link-hover-bg-color, $nav-link-hover-left-border-color)
|
|
icon
|
|
span
|
|
collapse-sign
|
|
|
|
ul.nav-menu-sub-one
|
|
li
|
|
a ($nav-level-1... $nav-sub-link-height)
|
|
span
|
|
collapse-sign
|
|
|
|
ul.nav-menu-sub-two
|
|
li
|
|
a ($nav-level-2... $nav-sub-link-height)
|
|
span
|
|
|
|
p.nav-title ($nav-title-*...)
|
|
|
|
|
|
========================================================================== */
|
|
/* main navigation */
|
|
/* left panel */
|
|
/* nav parent level-0 */
|
|
/* nav icon sizes */
|
|
/* badge default */
|
|
/* all child */
|
|
/* nav title */
|
|
/* nav Minify */
|
|
/* when the menu pops on hover */
|
|
/* navigation Width */
|
|
/* partial visibility of the menu */
|
|
/* top navigation */
|
|
/* nav Info Card (appears below the logo) */
|
|
/* width is auto */
|
|
/* nav DL labels for all child */
|
|
/* will be pulled to left as a negative value */
|
|
/* MISC Settings
|
|
========================================================================== */
|
|
/* List Table */
|
|
/* PAGE SETTINGS
|
|
========================================================================== */
|
|
/* PAGE BREADCRUMB
|
|
========================================================================== */
|
|
/* PAGE COMPONENT PANELS
|
|
========================================================================== */
|
|
/* PAGE COMPONENT PROGRESSBARS
|
|
========================================================================== */
|
|
/* PAGE COMPONENT MESSENGER
|
|
========================================================================== */
|
|
/* FOOTER
|
|
========================================================================== */
|
|
/* GLOBALS
|
|
========================================================================== */
|
|
/* ACCESSIBILITIES */
|
|
/* SHORTCUT BUTTON (appears on bottom right of the page) */
|
|
.dropzone {
|
|
border: 2px dashed #dedede;
|
|
border-radius: 5px;
|
|
background: #f5f5f5;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
padding: 0.5rem; }
|
|
|
|
.dropzone i {
|
|
font-size: 3rem; }
|
|
|
|
.dropzone .dz-message {
|
|
color: rgba(0, 0, 0, 0.54);
|
|
font-weight: 500;
|
|
font-size: initial;
|
|
text-transform: uppercase;
|
|
width: 100%; }
|
|
|
|
.dropzone .dz-preview .dz-image {
|
|
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;
|
|
border-radius: 0; }
|
|
.dropzone .dz-preview .dz-image img {
|
|
border-radius: 4px; }
|
|
|
|
.dropzone .dz-preview.dz-image-preview {
|
|
background: transparent; }
|
|
|
|
.dropzone .dz-message {
|
|
font-weight: normal;
|
|
text-transform: none;
|
|
color: inherit; }
|
|
|
|
.dropzone.dz-drag-hover {
|
|
border-style: dashed;
|
|
border-color: #886ab5; }
|
|
|
|
.dropzone .dz-preview.dz-file-preview .dz-image {
|
|
border-radius: 4px; }
|