Changed the project structure.
This commit is contained in:
1
app/application/resources/volt/scss/_variables.scss
Normal file
1
app/application/resources/volt/scss/_variables.scss
Normal file
@@ -0,0 +1 @@
|
||||
$primary: #0d6efd;
|
||||
89
app/application/resources/volt/scss/app.scss
Normal file
89
app/application/resources/volt/scss/app.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
/*
|
||||
|
||||
=========================================================
|
||||
* Volt - Free Bootstrap 5 Dashboard
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard
|
||||
* Copyright 2021 Themesberg (https://www.themesberg.com)
|
||||
|
||||
* Designed and coded by https://themesberg.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Please contact us to request a removal. Contact us if you want to remove it.
|
||||
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||
|
||||
// update variables here
|
||||
@import "variables";
|
||||
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "volt/variables";
|
||||
|
||||
// Third party
|
||||
@import 'vanillajs-datepicker/sass/datepicker.scss';
|
||||
@import "chartist/dist/scss/chartist.scss";
|
||||
|
||||
// Bootstrap
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
// Modify utilities here
|
||||
@import "volt/utilities";
|
||||
|
||||
// Bootstrap Layout & components
|
||||
@import "bootstrap/scss/root";
|
||||
@import "bootstrap/scss/reboot";
|
||||
@import "bootstrap/scss/type";
|
||||
@import "bootstrap/scss/images";
|
||||
@import "bootstrap/scss/containers";
|
||||
@import "bootstrap/scss/grid";
|
||||
@import "bootstrap/scss/tables";
|
||||
@import "bootstrap/scss/forms";
|
||||
@import "bootstrap/scss/buttons";
|
||||
@import "bootstrap/scss/transitions";
|
||||
@import "bootstrap/scss/dropdown";
|
||||
@import "bootstrap/scss/button-group";
|
||||
@import "bootstrap/scss/nav";
|
||||
@import "bootstrap/scss/navbar";
|
||||
@import "bootstrap/scss/card";
|
||||
@import "bootstrap/scss/accordion";
|
||||
@import "bootstrap/scss/breadcrumb";
|
||||
@import "bootstrap/scss/pagination";
|
||||
@import "bootstrap/scss/badge";
|
||||
@import "bootstrap/scss/alert";
|
||||
@import "bootstrap/scss/progress";
|
||||
@import "bootstrap/scss/list-group";
|
||||
@import "bootstrap/scss/close";
|
||||
@import "bootstrap/scss/toasts";
|
||||
@import "bootstrap/scss/modal";
|
||||
@import "bootstrap/scss/tooltip";
|
||||
@import "bootstrap/scss/popover";
|
||||
@import "bootstrap/scss/carousel";
|
||||
@import "bootstrap/scss/spinners";
|
||||
|
||||
// Helpers
|
||||
@import "bootstrap/scss/helpers";
|
||||
|
||||
// Utilities
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
// scss-docs-end import-stack
|
||||
|
||||
// volt mixins & functions
|
||||
@import "volt/mixins";
|
||||
@import "volt/functions";
|
||||
|
||||
// Layout
|
||||
@import "volt/layout";
|
||||
|
||||
// Components
|
||||
@import "volt/components";
|
||||
|
||||
// Forms
|
||||
@import "volt/forms";
|
||||
|
||||
// write your custom styles here!
|
||||
30
app/application/resources/volt/scss/volt/_components.scss
Normal file
30
app/application/resources/volt/scss/volt/_components.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
@import "components/body";
|
||||
@import "components/accordions";
|
||||
@import "components/animations";
|
||||
@import "components/alerts";
|
||||
@import "components/avatars";
|
||||
@import "components/badge";
|
||||
@import "components/buttons";
|
||||
@import "components/breadcrumb";
|
||||
@import "components/card";
|
||||
@import "components/carousel";
|
||||
@import "components/close";
|
||||
@import "components/custom-forms";
|
||||
@import "components/charts";
|
||||
@import "components/dropdown";
|
||||
@import "components/icons";
|
||||
@import "components/images";
|
||||
@import "components/list-group";
|
||||
@import "components/modal";
|
||||
@import "components/nav";
|
||||
@import "components/pagination";
|
||||
@import "components/popover";
|
||||
@import "components/progress";
|
||||
@import "components/shapes";
|
||||
@import "components/datepicker";
|
||||
@import "components/steps";
|
||||
@import "components/tables";
|
||||
@import "components/type";
|
||||
@import "components/timelines";
|
||||
@import "components/tooltip";
|
||||
@import "components/scrollbar";
|
||||
4
app/application/resources/volt/scss/volt/_forms.scss
Normal file
4
app/application/resources/volt/scss/volt/_forms.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import "forms/form-control";
|
||||
@import "forms/form-check";
|
||||
@import "forms/input-group";
|
||||
@import "forms/form-select";
|
||||
23
app/application/resources/volt/scss/volt/_functions.scss
Executable file
23
app/application/resources/volt/scss/volt/_functions.scss
Executable file
@@ -0,0 +1,23 @@
|
||||
// Retrieve color Sass maps
|
||||
|
||||
@function section-color($key: "primary") {
|
||||
@return map-get($section-colors, $key);
|
||||
}
|
||||
|
||||
// Lines colors
|
||||
|
||||
@function shapes-primary-color($key: "step-1-gradient-bg") {
|
||||
@return map-get($shapes-primary-colors, $key);
|
||||
}
|
||||
|
||||
@function shapes-default-color($key: "step-1-gradient-bg") {
|
||||
@return map-get($shapes-default-colors, $key);
|
||||
}
|
||||
|
||||
@function lines-light-color($key: "step-1-gradient-bg") {
|
||||
@return map-get($shapes-light-colors, $key);
|
||||
}
|
||||
|
||||
@function shapes-dark-color($key: "step-1-gradient-bg") {
|
||||
@return map-get($shapes-dark-colors, $key);
|
||||
}
|
||||
5
app/application/resources/volt/scss/volt/_layout.scss
Normal file
5
app/application/resources/volt/scss/volt/_layout.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@import "layout/navbar";
|
||||
@import "layout/section";
|
||||
@import "layout/footer";
|
||||
@import "layout/sidebar";
|
||||
@import "layout/sidenav";
|
||||
7
app/application/resources/volt/scss/volt/_mixins.scss
Executable file
7
app/application/resources/volt/scss/volt/_mixins.scss
Executable file
@@ -0,0 +1,7 @@
|
||||
@import "mixins/animations";
|
||||
@import "mixins/background-variant";
|
||||
@import "mixins/icon";
|
||||
@import "mixins/modals";
|
||||
@import "mixins/popover";
|
||||
@import "mixins/transform";
|
||||
@import "mixins/utilities";
|
||||
95
app/application/resources/volt/scss/volt/_utilities.scss
Executable file
95
app/application/resources/volt/scss/volt/_utilities.scss
Executable file
@@ -0,0 +1,95 @@
|
||||
// check docs https://v5.getbootstrap.com/docs/5.0/utilities/api/
|
||||
|
||||
$utilities: map-merge(
|
||||
$utilities,
|
||||
(
|
||||
"blur": (
|
||||
property: backdrop-filter,
|
||||
class: blur,
|
||||
values: (
|
||||
0: blur(0),
|
||||
1: blur(1px),
|
||||
2: blur(2px),
|
||||
3: blur(3px),
|
||||
4: blur(4px),
|
||||
5: blur(5px),
|
||||
6: blur(6px),
|
||||
7: blur(7px),
|
||||
8: blur(8px),
|
||||
9: blur(91px),
|
||||
10: blur(10px),
|
||||
11: blur(11px),
|
||||
12: blur(12px),
|
||||
13: blur(13px),
|
||||
14: blur(14px),
|
||||
),
|
||||
),
|
||||
"opacity": (
|
||||
property: opacity,
|
||||
class: o,
|
||||
values: (
|
||||
0: 0,
|
||||
25: 0.25,
|
||||
50: 0.5,
|
||||
75: 0.75,
|
||||
100: 1,
|
||||
),
|
||||
),
|
||||
"z-index": (
|
||||
property: z-index,
|
||||
class: z,
|
||||
values: (
|
||||
0: 0,
|
||||
1: 1,
|
||||
2: 2,
|
||||
3: 3,
|
||||
999: 999,
|
||||
),
|
||||
),
|
||||
"viewport-height": (
|
||||
property: height,
|
||||
class: vh,
|
||||
responsive: true,
|
||||
values: (
|
||||
100: 100vh,
|
||||
),
|
||||
),
|
||||
"font-weight": (
|
||||
property: font-weight,
|
||||
class: fw,
|
||||
values: (
|
||||
light: $font-weight-light,
|
||||
lighter: $font-weight-lighter,
|
||||
normal: $font-weight-normal,
|
||||
bold: $font-weight-bold,
|
||||
bolder: $font-weight-bolder,
|
||||
extrabold: $font-weight-extrabold,
|
||||
black: $font-weight-black,
|
||||
),
|
||||
),
|
||||
"max-width": (
|
||||
property: max-width,
|
||||
class: fmxw,
|
||||
values: (
|
||||
100: 100px,
|
||||
200: 200px,
|
||||
300: 300px,
|
||||
400: 400px,
|
||||
500: 500px,
|
||||
999: 999px,
|
||||
),
|
||||
),
|
||||
"min-height": (
|
||||
property: min-height,
|
||||
class: fmxh,
|
||||
values: (
|
||||
100: 100px,
|
||||
200: 200px,
|
||||
300: 300px,
|
||||
400: 400px,
|
||||
500: 500px,
|
||||
999: 999px,
|
||||
),
|
||||
),
|
||||
)
|
||||
);
|
||||
1660
app/application/resources/volt/scss/volt/_variables.scss
Normal file
1660
app/application/resources/volt/scss/volt/_variables.scss
Normal file
File diff suppressed because it is too large
Load Diff
6
app/application/resources/volt/scss/volt/_vendor.scss
Normal file
6
app/application/resources/volt/scss/volt/_vendor.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
// Vendor
|
||||
@import "vendor/headroom";
|
||||
@import "vendor/nouislider";
|
||||
@import "vendor/prism";
|
||||
@import "vendor/chartist/chartist";
|
||||
@import "vendor/datepicker";
|
||||
52
app/application/resources/volt/scss/volt/components/_accordions.scss
Executable file
52
app/application/resources/volt/scss/volt/components/_accordions.scss
Executable file
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* = Accordions
|
||||
*/
|
||||
|
||||
|
||||
.accordion-button {
|
||||
text-align: left;
|
||||
&:not(.collapsed) {
|
||||
&::after {
|
||||
background-image: none;
|
||||
@include transform(rotateZ(45deg));
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion icon
|
||||
&::after {
|
||||
background-image: none;
|
||||
content: '\f067';
|
||||
font-family: $font-awesome-5;
|
||||
font-size: $font-size-base;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Flush accordion items
|
||||
//
|
||||
// Remove borders and border-radius to keep accordion items edge-to-edge.
|
||||
|
||||
.accordion-flush {
|
||||
.accordion-button {
|
||||
background-color: transparent;
|
||||
&:not(.collapsed) {
|
||||
color: $tertiary;
|
||||
}
|
||||
&:focus {
|
||||
border-color: $gray-300;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.accordion-collapse {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
.alert-heading{
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.alert-icon{
|
||||
margin-bottom: .5rem;
|
||||
span{
|
||||
font-size: $alert-icon-font-size;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
|
||||
/**
|
||||
* = Animations
|
||||
*/
|
||||
|
||||
@for $size from 1 to 10 {
|
||||
.animate-up-#{$size},
|
||||
.animate-right-#{$size},
|
||||
.animate-down-#{$size},
|
||||
.animate-left-#{$size},
|
||||
.scale-up-#{$size},
|
||||
.scale-down-#{$size} {
|
||||
transition: $transition-base;
|
||||
}
|
||||
|
||||
.scale-up-#{$size} {
|
||||
&:hover {
|
||||
transform: scale($size * 0.5555555556);
|
||||
}
|
||||
}
|
||||
|
||||
.scale-up-hover-#{$size} {
|
||||
&:hover {
|
||||
& .scale {
|
||||
transform: scale($size * 0.5555555556);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scale-down-#{$size} {
|
||||
&:hover {
|
||||
transform: scale($size * 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-up-#{$size} {
|
||||
&:hover,
|
||||
.animate-hover:hover & {
|
||||
@include translate(0, -#{$size}px);
|
||||
}
|
||||
}
|
||||
.animate-right-#{$size} {
|
||||
&:hover,
|
||||
.animate-hover:hover & {
|
||||
@include translate(#{$size}px, 0);
|
||||
}
|
||||
}
|
||||
.animate-down-#{$size} {
|
||||
&:hover,
|
||||
.animate-hover:hover & {
|
||||
@include translate(0, #{$size}px);
|
||||
}
|
||||
}
|
||||
.animate-left-#{$size} {
|
||||
&:hover,
|
||||
.animate-hover:hover & {
|
||||
@include translate(-#{$size}px, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Keyframes
|
||||
@keyframes show-navbar-collapse {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.95);
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide-navbar-collapse {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(.95);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-navbar-dropdown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
|
||||
transition: visibility 0.45s, opacity 0.45s, transform 0.45s;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide-navbar-dropdown {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate(0, 10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-dropdown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: perspective(200px) rotateX(-2deg);
|
||||
transition: visibility 0.45s, opacity .5s;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes hide-dropdown {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate(0, 10px);
|
||||
}
|
||||
}
|
||||
|
||||
.bell-shake {
|
||||
&.shaking {
|
||||
animation: bellshake .5s cubic-bezier(.36,.07,.19,.97) both;
|
||||
backface-visibility: hidden;
|
||||
transform-origin: top right;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--animate-duration: 1s;
|
||||
--animate-delay: 1s;
|
||||
--animate-repeat: 1;
|
||||
}
|
||||
|
||||
.animate__animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-duration: var(--animate-duration);
|
||||
animation-duration: var(--animate-duration);
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animate__jackInTheBox {
|
||||
-webkit-animation-name: jackInTheBox;
|
||||
animation-name: jackInTheBox;
|
||||
}
|
||||
|
||||
@keyframes bellshake {
|
||||
0% { transform: rotate(0); }
|
||||
15% { transform: rotate(5deg); }
|
||||
30% { transform: rotate(-5deg); }
|
||||
45% { transform: rotate(4deg); }
|
||||
60% { transform: rotate(-4deg); }
|
||||
75% { transform: rotate(2deg); }
|
||||
85% { transform: rotate(-2deg); }
|
||||
92% { transform: rotate(1deg); }
|
||||
100% { transform: rotate(0); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes jackInTheBox {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.1) rotate(30deg);
|
||||
transform: scale(0.1) rotate(30deg);
|
||||
-webkit-transform-origin: center bottom;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: rotate(-10deg);
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
-webkit-transform: rotate(3deg);
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes jackInTheBox {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.1) rotate(30deg);
|
||||
transform: scale(0.1) rotate(30deg);
|
||||
-webkit-transform-origin: center bottom;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: rotate(-10deg);
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
-webkit-transform: rotate(3deg);
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.animate__jackInTheBox {
|
||||
-webkit-animation-name: jackInTheBox;
|
||||
animation-name: jackInTheBox;
|
||||
}
|
||||
|
||||
[class*=shadow] {
|
||||
transition: all .2s ease;
|
||||
}
|
||||
102
app/application/resources/volt/scss/volt/components/_avatars.scss
Executable file
102
app/application/resources/volt/scss/volt/components/_avatars.scss
Executable file
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* = Avatars
|
||||
*/
|
||||
|
||||
.avatar + .avatar-content {
|
||||
display: inline-block;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
width: $avatar-sm-y;
|
||||
height: $avatar-sm-x;
|
||||
|
||||
img {
|
||||
width: $avatar-sm-y;
|
||||
height: $avatar-sm-x;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: $avatar-y;
|
||||
height: $avatar-x;
|
||||
|
||||
img {
|
||||
width: $avatar-y;
|
||||
height: $avatar-x;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-md {
|
||||
width: $avatar-md-y;
|
||||
height: $avatar-md-x;
|
||||
|
||||
img {
|
||||
width: $avatar-md-y;
|
||||
height: $avatar-md-x;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
width: $avatar-lg-y;
|
||||
height: $avatar-lg-x;
|
||||
|
||||
img {
|
||||
width: $avatar-lg-y;
|
||||
height: $avatar-lg-x;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-xl {
|
||||
width: $avatar-xl-y;
|
||||
height: $avatar-xl-x;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
width: $avatar-lg-y;
|
||||
height: $avatar-lg-x;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.avatar-offline,
|
||||
.avatar-online {
|
||||
&::before {
|
||||
position: absolute;
|
||||
border: 2px solid $white;
|
||||
background-color: $success;
|
||||
display: block;
|
||||
top: 2px;
|
||||
left: 39px;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-offline {
|
||||
&::before {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
// Overlapped avatars
|
||||
.avatar-group {
|
||||
.avatar {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
img {
|
||||
border: 2px solid $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar + .avatar {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
}
|
||||
98
app/application/resources/volt/scss/volt/components/_badge.scss
Executable file
98
app/application/resources/volt/scss/volt/components/_badge.scss
Executable file
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* = Badges
|
||||
*/
|
||||
|
||||
.badge {
|
||||
font-size:$badge-font-size;
|
||||
font-weight: $badge-font-weight;
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.super-badge{
|
||||
vertical-align: super;
|
||||
}
|
||||
}
|
||||
|
||||
// Variations
|
||||
.badge-pill {
|
||||
padding-right: $badge-pill-padding-x;
|
||||
padding-left: $badge-pill-padding-x;
|
||||
}
|
||||
|
||||
// Multiple inline badges
|
||||
.badge-inline {
|
||||
margin-right: .625rem;
|
||||
|
||||
& + span {
|
||||
top: 2px;
|
||||
position: relative;
|
||||
|
||||
& > a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
.badge-sm {
|
||||
padding: .2rem .6rem;
|
||||
}
|
||||
|
||||
.badge-lg {
|
||||
font-size: $font-size-lg;
|
||||
padding: .35rem .85rem;
|
||||
}
|
||||
|
||||
//button badges
|
||||
|
||||
.btn{
|
||||
.badge-corner{
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: .5rem;
|
||||
transform: translate(50%,50%);
|
||||
margin: 0;
|
||||
border: 3px solid;
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
}
|
||||
}
|
||||
//Tags
|
||||
.wi-tags{
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 0.125rem 0.875rem;
|
||||
margin: 0.25rem;
|
||||
line-height: 2;
|
||||
font-size: $font-size-sm;
|
||||
box-shadow: $box-shadow-sm;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.pixel-pro-badge{
|
||||
position: relative;
|
||||
font-size: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-bold;
|
||||
right: -11px;
|
||||
padding: 4px 12px;
|
||||
top: -30px;
|
||||
background: $white;
|
||||
@include border-radius($border-radius-sm);
|
||||
@include box-shadow($box-shadow-sm);
|
||||
@include media-breakpoint-down(sm){
|
||||
font-size: $font-size-base;
|
||||
right: -13px;
|
||||
padding: 5px 10px;
|
||||
top: -23px;
|
||||
}
|
||||
}
|
||||
|
||||
.subscription-badge {
|
||||
top: -19px;
|
||||
right: -12px;
|
||||
font-size: .75rem;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
strong{
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: $font-weight-bold;
|
||||
margin-bottom:.5rem;
|
||||
}
|
||||
56
app/application/resources/volt/scss/volt/components/_breadcrumb.scss
Executable file
56
app/application/resources/volt/scss/volt/components/_breadcrumb.scss
Executable file
@@ -0,0 +1,56 @@
|
||||
/**
|
||||
* = Breadcrumbs
|
||||
*/
|
||||
|
||||
.breadcrumb-item {
|
||||
font-size: $font-size-xs;
|
||||
&, a {
|
||||
color: $breadcrumb-item-color;
|
||||
font-weight: $breadcrumb-font-weight;
|
||||
font-size: $font-size-xs;
|
||||
@include media-breakpoint-up(sm){
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: $breadcrumb-active-font-weight;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.breadcrumb-transparent {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.breadcrumb-#{$color} {
|
||||
background: $value;
|
||||
.breadcrumb-item{
|
||||
&.active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
&.breadcrumb-transparent {
|
||||
background: transparent;
|
||||
.breadcrumb-item {
|
||||
&.active {
|
||||
color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-text-light {
|
||||
.breadcrumb-item {
|
||||
&, a {
|
||||
color: $breadcrumb-item-light-color;
|
||||
}
|
||||
|
||||
&:before {
|
||||
color: $breadcrumb-divider-light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
86
app/application/resources/volt/scss/volt/components/_buttons.scss
Executable file
86
app/application/resources/volt/scss/volt/components/_buttons.scss
Executable file
@@ -0,0 +1,86 @@
|
||||
/*
|
||||
* = Buttons
|
||||
*/
|
||||
|
||||
.btn {
|
||||
&.btn-circle {
|
||||
border-radius: $circle-radius;
|
||||
}
|
||||
&.btn-md{
|
||||
padding: 0.65rem 1.25rem;
|
||||
}
|
||||
&.btn-xs{
|
||||
padding: .2rem 0.35rem;
|
||||
font-size: 0.55rem;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.large-form-btn{
|
||||
padding: 1.2rem 1rem;
|
||||
}
|
||||
&.dashed-outline {
|
||||
border-style: dashed;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-icon-only {
|
||||
width: 2.575rem;
|
||||
height: 2.575rem;
|
||||
padding: 0;
|
||||
@include display-flex();
|
||||
@include justify-content(center);
|
||||
@include align-items(center);
|
||||
|
||||
&.btn-xs {
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
}
|
||||
&.btn-sm {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-upgrade-pro {
|
||||
position: fixed;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
width: 190px;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
left: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix for darken background color
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-#{$color} {
|
||||
&:hover{
|
||||
background-color: darken( $value, 5% );
|
||||
border-color: darken( $value, 5% );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Brand (social) buttons
|
||||
@each $color, $value in $brand-colors {
|
||||
.btn-#{$color} {
|
||||
@include button-variant($value, $value);
|
||||
|
||||
&.btn-link {
|
||||
color: $value;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border:0;
|
||||
border-style: none;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
background-color: transparent !important;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
149
app/application/resources/volt/scss/volt/components/_card.scss
Executable file
149
app/application/resources/volt/scss/volt/components/_card.scss
Executable file
@@ -0,0 +1,149 @@
|
||||
/**
|
||||
* = Cards
|
||||
*/
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
.card-header{
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.hover-state{
|
||||
&:hover {
|
||||
background-color: $soft;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-cover{
|
||||
@include background-image(no-repeat, cover);
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.message-wrapper,
|
||||
.task-wrapper{
|
||||
.card{
|
||||
border:0;
|
||||
}
|
||||
}
|
||||
|
||||
.customer-testimonial {
|
||||
.content-wrapper{
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: -1px;
|
||||
margin-left: .75rem;
|
||||
border: 8px solid $black;
|
||||
border-color: transparent #e0e6ec #e0e6ec transparent;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
@include transform(rotate(135deg));
|
||||
@include box-shadow($box-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer{
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
.card-stats{
|
||||
padding-left:1.9rem;
|
||||
}
|
||||
|
||||
|
||||
// Card with blockquotes
|
||||
|
||||
.card {
|
||||
.card-blockquote {
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
|
||||
.svg-bg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 95px;
|
||||
top: -94px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Animated cards
|
||||
|
||||
|
||||
.page-preview {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
.show-on-hover {
|
||||
position: absolute;
|
||||
bottom: -0;
|
||||
background: rgba($dark, .85);
|
||||
padding: 10px 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
@include transition(.2s);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
z-index: 1;
|
||||
|
||||
.show-on-hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-settings {
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
right: 15px;
|
||||
bottom: 0;
|
||||
|
||||
&, .card-body {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-settings-close {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
font-size: .65rem;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
|
||||
&.theme-settings-close{
|
||||
background: transparent escape-svg($btn-close-bg-white) center / $btn-close-width auto no-repeat; // include transparent for button elements
|
||||
border: 0; // for button elements
|
||||
@include border-radius();
|
||||
opacity: $btn-close-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-settings-expand {
|
||||
right: 15px;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
@include transition(.3s height);
|
||||
|
||||
&.show {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $gray-600;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
52
app/application/resources/volt/scss/volt/components/_carousel.scss
Executable file
52
app/application/resources/volt/scss/volt/components/_carousel.scss
Executable file
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* = Bootstrap carousels
|
||||
*/
|
||||
|
||||
.carousel-caption {
|
||||
&, h5 {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
//Indicators
|
||||
|
||||
.carousel-indicators {
|
||||
li {
|
||||
height: 10px;
|
||||
width:10px;
|
||||
border-radius:$circle-radius;
|
||||
background:transparent;
|
||||
border:2px solid $white;
|
||||
}
|
||||
.active {
|
||||
opacity: 1;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
//Carousel Controls
|
||||
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.carousel-control-prev-icon {
|
||||
background-image: none;
|
||||
&::before{
|
||||
content: '\f060';
|
||||
font-family: $font-awesome-5;
|
||||
font-size: $font-size-xxl;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-control-next-icon {
|
||||
background-image: none;
|
||||
&:before{
|
||||
font-family: $font-awesome-5;
|
||||
content: "\f061";
|
||||
font-size: $font-size-xxl;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
.ct-bar {
|
||||
stroke-linecap: round;
|
||||
stroke-width: 10px;
|
||||
}
|
||||
.ct-label {
|
||||
fill: $body-color;
|
||||
color: $body-color;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 6px;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.ct-slice-pie {
|
||||
stroke: $white;
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
.ct-chart-donut .ct-series {
|
||||
stroke: $white;
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
.ct-chart-pie .ct-label, .ct-chart-donut .ct-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.small-chart{
|
||||
margin-left:-1rem;
|
||||
}
|
||||
|
||||
//Label color Fix for pie chart
|
||||
|
||||
.ct-chart-pie .ct-label, .ct-chart-donut .ct-label {
|
||||
color: #ffffff;
|
||||
fill: #ffffff;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.ct-series-g{
|
||||
.ct-grid {
|
||||
stroke: #F8BD7A;
|
||||
stroke-width: 2px;
|
||||
stroke-dasharray: 2px;
|
||||
}
|
||||
.ct-label.ct-horizontal.ct-end {
|
||||
margin-left:-9px;
|
||||
margin-top:10px;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
33
app/application/resources/volt/scss/volt/components/_close.scss
Executable file
33
app/application/resources/volt/scss/volt/components/_close.scss
Executable file
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* = Close
|
||||
*/
|
||||
|
||||
.close {
|
||||
@if $enable-transitions {
|
||||
transition: $transition-base;
|
||||
}
|
||||
&>span:not(.sr-only) {
|
||||
display: block;
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
background-color: $close-bg;
|
||||
color: $close-color;
|
||||
line-height: 17px;
|
||||
border-radius: 50%;
|
||||
font-size: 1.25rem;
|
||||
@if $enable-transitions {
|
||||
transition: $transition-base;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $close-hover-bg;
|
||||
color: $close-hover-color;
|
||||
outline: none;
|
||||
|
||||
span:not(.sr-only) {
|
||||
background-color: $close-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
103
app/application/resources/volt/scss/volt/components/_custom-forms.scss
Executable file
103
app/application/resources/volt/scss/volt/components/_custom-forms.scss
Executable file
@@ -0,0 +1,103 @@
|
||||
/**
|
||||
* = Custom forms
|
||||
*/
|
||||
|
||||
.custom-control-label {
|
||||
// Background-color and (when enabled) gradient
|
||||
&:before {
|
||||
box-shadow: $custom-control-box-shadow;
|
||||
@if $enable-transitions {
|
||||
transition: $input-transition;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
&:active~.custom-control-label::before {
|
||||
border-color: $custom-control-indicator-active-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom File Input
|
||||
|
||||
.custom-file-label {
|
||||
background-color: #f3f3f5;
|
||||
|
||||
&::after {
|
||||
|
||||
background-color: #f3f3f5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//Select
|
||||
.custom-select{
|
||||
font-size: $input-btn-font-size;
|
||||
box-shadow:none;
|
||||
|
||||
&.custom-select-shadow {
|
||||
box-shadow: $input-box-shadow;
|
||||
transition: box-shadow .15s ease;
|
||||
|
||||
&:focus {
|
||||
box-shadow: $shadow-input-focus;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Inbox star
|
||||
.rating-star {
|
||||
&.star-lg{
|
||||
label{
|
||||
margin-bottom: .5rem;
|
||||
&::before{
|
||||
font-size: $font-size-xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
label {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
color: $light;
|
||||
&:before {
|
||||
content: "\f005";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
transition: all .2s ease;
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
}
|
||||
input {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
>input:checked~label {
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
>label {
|
||||
&:hover {
|
||||
color: $warning;
|
||||
}
|
||||
&:hover~label {
|
||||
color: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
13
app/application/resources/volt/scss/volt/components/_datepicker.scss
Executable file
13
app/application/resources/volt/scss/volt/components/_datepicker.scss
Executable file
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* = Datepickers
|
||||
*/
|
||||
|
||||
.datepicker {
|
||||
|
||||
.datepicker-cell.selected,
|
||||
.datepicker-cell.selected:hover {
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
68
app/application/resources/volt/scss/volt/components/_dropdown.scss
Executable file
68
app/application/resources/volt/scss/volt/components/_dropdown.scss
Executable file
@@ -0,0 +1,68 @@
|
||||
.dropdown-menu {
|
||||
.dropdown-header,
|
||||
.dropdown-item {
|
||||
padding: .5rem 1rem;
|
||||
font-size: $dropdown-font-size;
|
||||
.dropdown-icon{
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
color: $dropdown-header-color;
|
||||
font-weight: $dropdown-header-font-weight;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
transition: $transition-base;
|
||||
font-weight: $dropdown-item-font-weight;
|
||||
|
||||
}
|
||||
|
||||
.show & {
|
||||
animation: show-dropdown .2s ease forwards;
|
||||
}
|
||||
|
||||
&.dropdown-menu-xs {
|
||||
min-width: 120px;
|
||||
max-width: 120px;
|
||||
@include box-shadow($box-shadow-sm);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Dropown sizes
|
||||
.dropdown-menu-sm {
|
||||
min-width: 100px;
|
||||
border: $border-radius-lg;
|
||||
}
|
||||
|
||||
.dropdown-menu-md {
|
||||
min-width: 180px;
|
||||
border: $border-radius-lg;
|
||||
}
|
||||
|
||||
.dropdown-menu-lg {
|
||||
min-width: 350px;
|
||||
border-radius: $border-radius-lg;
|
||||
@include media-breakpoint-down(sm) {
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// this helps when not only the button should toggle a dropdown
|
||||
[data-toggle]:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// remove the caret from Bootstrap by default
|
||||
.dropdown-toggle {
|
||||
&:after, .dropend &:after, .dropstart &:before, .dropup &:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
202
app/application/resources/volt/scss/volt/components/_icons.scss
Executable file
202
app/application/resources/volt/scss/volt/components/_icons.scss
Executable file
@@ -0,0 +1,202 @@
|
||||
/**
|
||||
* = Icon boxes
|
||||
*/
|
||||
|
||||
.icon {
|
||||
height: $icon-size;
|
||||
|
||||
&.icon-xxs {
|
||||
height: $icon-size-xxs;
|
||||
}
|
||||
|
||||
&.icon-xs {
|
||||
height: $icon-size-xs;
|
||||
}
|
||||
&.icon-sm {
|
||||
height: $icon-size-sm;
|
||||
}
|
||||
&.icon-lg {
|
||||
height: $icon-size-lg;
|
||||
}
|
||||
&.icon-xl {
|
||||
height: $icon-size-xl;
|
||||
}
|
||||
&.icon-xxl {
|
||||
height: $icon-size-xxl;
|
||||
}
|
||||
|
||||
&.active-dot {
|
||||
svg {
|
||||
height: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icons included in shapes
|
||||
.icon-shape {
|
||||
width: $icon-shape;
|
||||
height: $icon-shape;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
height: $icon-size;
|
||||
}
|
||||
|
||||
&.icon-xxs {
|
||||
width: $icon-shape-xxs;
|
||||
height: $icon-shape-xxs;
|
||||
svg {
|
||||
height: $icon-size-xxs;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-xs {
|
||||
width: $icon-shape-xs;
|
||||
height: $icon-shape-xs;
|
||||
svg {
|
||||
height: $icon-size-xs;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-sm {
|
||||
width: $icon-shape-sm;
|
||||
height: $icon-shape-sm;
|
||||
svg {
|
||||
height: $icon-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-lg {
|
||||
width: $icon-shape-lg;
|
||||
height: $icon-shape-lg;
|
||||
svg {
|
||||
height: $icon-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-xl {
|
||||
width: $icon-shape-xl;
|
||||
height: $icon-shape-xl;
|
||||
svg {
|
||||
height: $icon-size-xl;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-xxl {
|
||||
width: $icon-shape-xxl;
|
||||
height: $icon-shape-xxl;
|
||||
svg {
|
||||
height: $icon-size-xxl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inbox star Icons
|
||||
.rating-star {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
height: 1.875rem;
|
||||
}
|
||||
|
||||
//Icons inside table fixed width
|
||||
.w--20 {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
//Calendar Icon
|
||||
|
||||
.calendar {
|
||||
width: 3.125rem;
|
||||
line-height: 1;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
border-radius: $border-radius;
|
||||
.calendar-month {
|
||||
background-color: $danger;
|
||||
color: $white;
|
||||
border-radius: $border-radius $border-radius 0 0;
|
||||
padding: 0.275rem;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
.calendar-day {
|
||||
font-size: $font-size-xl;
|
||||
padding: 0.25rem;
|
||||
background-color: $gray-100;
|
||||
border-top: 0;
|
||||
border-radius: 0 0 $border-radius $border-radius;
|
||||
color: $dark;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
//Legend dot
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
//Bell notification dot
|
||||
.bell-dot {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
right: 6px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border: 2px solid $gray-100;
|
||||
}
|
||||
|
||||
.notification-bell.unread {
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: $danger;
|
||||
right: 12px;
|
||||
top: 7px;
|
||||
height: 0.75rem;
|
||||
width: 0.75rem;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
//Index Big Icon
|
||||
.bootstrap-big-icon {
|
||||
position: absolute;
|
||||
opacity: 0.05;
|
||||
transform: rotate(17deg);
|
||||
@include media-breakpoint-up(lg) {
|
||||
right: -20%;
|
||||
bottom: 6%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
right: -10%;
|
||||
bottom: 6%;
|
||||
}
|
||||
}
|
||||
|
||||
.github-big-icon {
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
svg {
|
||||
color: $gray-400;
|
||||
height:800px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
//Colors for icons, shapes and svg's
|
||||
@each $color, $value in $theme-colors {
|
||||
.icon-shape-#{$color} {
|
||||
@include icon-shape-variant($value);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* = Images
|
||||
*/
|
||||
.image-xl {
|
||||
height: 20rem;
|
||||
img{
|
||||
height: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.image-lg {
|
||||
height: 12rem;
|
||||
img{
|
||||
height: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.image-md{
|
||||
height: 5.5rem;
|
||||
img{
|
||||
height: 5.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.image-sm {
|
||||
height: 3rem;
|
||||
img{
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.image-xs {
|
||||
height: 1.5rem;
|
||||
img{
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.image-small {
|
||||
height: 1rem;
|
||||
img{
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.full-image{
|
||||
height:100%;
|
||||
}
|
||||
|
||||
|
||||
.language-flag{
|
||||
width: auto;
|
||||
height: 1rem;
|
||||
margin-right: 0.4rem;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.home-pattern{
|
||||
fill: $gray-100;
|
||||
}
|
||||
|
||||
.form-bg-image {
|
||||
background-repeat: no-repeat!important;
|
||||
background-position: top center!important;
|
||||
}
|
||||
|
||||
96
app/application/resources/volt/scss/volt/components/_list-group.scss
Executable file
96
app/application/resources/volt/scss/volt/components/_list-group.scss
Executable file
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* = List groups
|
||||
*/
|
||||
|
||||
// Space list items
|
||||
.list-group-space {
|
||||
.list-group-item {
|
||||
margin-bottom: 1.5rem;
|
||||
@include border-radius($list-group-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// List group components
|
||||
.list-group-item{
|
||||
border:0;
|
||||
&.active {
|
||||
z-index: 2; // Place active items above their siblings for proper border styling
|
||||
color: $list-group-active-color;
|
||||
background-color: $list-group-active-bg;
|
||||
border-color: $list-group-active-border-color;
|
||||
}
|
||||
|
||||
i{
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-img {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
margin: -.1rem 1.2rem 0 -.2rem;
|
||||
}
|
||||
.list-group-content {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
> p {
|
||||
color: $gray-500;
|
||||
line-height: 1.5;
|
||||
margin: .2rem 0 0;
|
||||
}
|
||||
}
|
||||
.list-group-heading {
|
||||
font-size: $font-size-base;
|
||||
color: $gray-800;
|
||||
|
||||
> small {
|
||||
float: right;
|
||||
color: $gray-500;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.list-group{
|
||||
&.simple-list{
|
||||
.list-group-item{
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0.375rem 0.125rem;
|
||||
i{
|
||||
vertical-align: middle;
|
||||
width: 35px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
//News list for widgets
|
||||
|
||||
.news-list{
|
||||
.row{
|
||||
> [class*='col']{
|
||||
padding: 0 $spacer/4;
|
||||
}
|
||||
}
|
||||
|
||||
> li{
|
||||
&:not(:last-child){
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
img{
|
||||
min-height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
36
app/application/resources/volt/scss/volt/components/_modal.scss
Executable file
36
app/application/resources/volt/scss/volt/components/_modal.scss
Executable file
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* = Modals
|
||||
*/
|
||||
|
||||
.modal{
|
||||
&.static-example{
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border: 0;
|
||||
@if $enable-rounded {
|
||||
border-radius: $modal-content-border-radius;
|
||||
} @else {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-fluid {
|
||||
.modal-dialog {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.modal-content {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.modal-#{$color} {
|
||||
@include modal-variant($value);
|
||||
}
|
||||
}
|
||||
|
||||
256
app/application/resources/volt/scss/volt/components/_nav.scss
Executable file
256
app/application/resources/volt/scss/volt/components/_nav.scss
Executable file
@@ -0,0 +1,256 @@
|
||||
/**
|
||||
* = Navs
|
||||
*/
|
||||
|
||||
.nav-link {
|
||||
color: $nav-link-color;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $nav-link-hover-color;
|
||||
|
||||
img {
|
||||
opacity : inherit;
|
||||
transition: $transition-base;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
//Tabs
|
||||
|
||||
.nav-tabs {
|
||||
.nav-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
border : 0;
|
||||
padding : 1rem 1rem;
|
||||
background-color: $white;
|
||||
|
||||
&.active {
|
||||
color : $white;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dark {
|
||||
.nav-link {
|
||||
&.active {
|
||||
color : $white;
|
||||
background-color: #12358a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-light {
|
||||
.nav-link {
|
||||
&.active {
|
||||
color : $black;
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pills
|
||||
|
||||
.nav-pills {
|
||||
.nav-item:not(:last-child) {
|
||||
padding-right: $nav-pills-space-x;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding : $nav-pills-padding-y $nav-pills-padding-x;
|
||||
transition: $transition-base;
|
||||
box-shadow: $nav-link-shadow;
|
||||
border : $nav-pills-border-width solid $nav-pills-border-color;
|
||||
|
||||
&.avatar-link {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $nav-pills-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show>.nav-link {
|
||||
color : $nav-pills-link-active-color;
|
||||
background-color: $nav-pills-link-active-bg;
|
||||
border-color : $nav-pills-link-active-color;
|
||||
}
|
||||
|
||||
&.rounded {
|
||||
.nav-link {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
&.vertical-tab {
|
||||
.nav-link {
|
||||
margin-bottom: .625rem;
|
||||
min-width : 100px;
|
||||
}
|
||||
|
||||
.nav-item:not(:last-child) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bordered-pill-md {
|
||||
.nav-link {
|
||||
border : $border-width-md solid $gray-200;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical-tab {
|
||||
.nav-link {
|
||||
margin-bottom: .625rem;
|
||||
}
|
||||
|
||||
.nav-item:not(:last-child) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.nav-item {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.nav-pills:not(.nav-pills-circle) {
|
||||
.nav-item {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navs circle
|
||||
|
||||
.nav-pill-circle {
|
||||
.nav-link {
|
||||
@include display-flex();
|
||||
text-align : center;
|
||||
height : 80px;
|
||||
width : 80px;
|
||||
padding : 0;
|
||||
box-shadow : $nav-link-shadow;
|
||||
border-radius : $nav-pills-border-circle;
|
||||
align-items : center;
|
||||
justify-content: center;
|
||||
|
||||
&.avatar-link {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical-tab {
|
||||
.nav-link-icon {
|
||||
|
||||
i,
|
||||
svg {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item:not(:last-child) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
|
||||
i,
|
||||
svg {
|
||||
font-size: 1.25rem;
|
||||
margin : 0;
|
||||
display : block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navs square
|
||||
|
||||
.nav-pill-square {
|
||||
.nav-link {
|
||||
text-align: center;
|
||||
min-width : 80px;
|
||||
box-shadow: $nav-link-shadow;
|
||||
@include display-flex();
|
||||
align-items : center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.vertical-tab {
|
||||
.nav-link {
|
||||
margin-bottom: .625rem;
|
||||
min-width : 100px;
|
||||
}
|
||||
|
||||
.nav-item:not(:last-child) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
|
||||
i,
|
||||
svg {
|
||||
font-size : 1.25rem;
|
||||
margin : 0;
|
||||
display : block;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Nav wrapper
|
||||
.nav-wrapper {
|
||||
padding: 1rem 0;
|
||||
@include border-top-radius($card-border-radius);
|
||||
|
||||
+.card {
|
||||
@include border-top-radius(0);
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
// Tabbable tabs
|
||||
//
|
||||
// Hide tabbable panes to start, show them when `.active`
|
||||
|
||||
.tab-content {
|
||||
>.tab-pane {
|
||||
display: none;
|
||||
|
||||
pre {
|
||||
padding: 0;
|
||||
margin : 0;
|
||||
}
|
||||
}
|
||||
|
||||
>.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills .nav-item {
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
16
app/application/resources/volt/scss/volt/components/_pagination.scss
Executable file
16
app/application/resources/volt/scss/volt/components/_pagination.scss
Executable file
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* = Paginations
|
||||
*/
|
||||
.circle-pagination{
|
||||
.page-link,
|
||||
span{
|
||||
@include display-flex();
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
@include border-radius($circle-radius);
|
||||
}
|
||||
}
|
||||
|
||||
19
app/application/resources/volt/scss/volt/components/_popover.scss
Executable file
19
app/application/resources/volt/scss/volt/components/_popover.scss
Executable file
@@ -0,0 +1,19 @@
|
||||
/**
|
||||
* = Popovers
|
||||
*/
|
||||
|
||||
.popover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
.popover-header {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
// Alternative colors
|
||||
@each $color, $value in $theme-colors {
|
||||
.popover-#{$color} {
|
||||
@include popover-variant($value);
|
||||
}
|
||||
}
|
||||
116
app/application/resources/volt/scss/volt/components/_progress.scss
Executable file
116
app/application/resources/volt/scss/volt/components/_progress.scss
Executable file
@@ -0,0 +1,116 @@
|
||||
/**
|
||||
* = Progress bars
|
||||
*/
|
||||
|
||||
.progress-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 6px;
|
||||
margin-bottom: $spacer;
|
||||
overflow: hidden;
|
||||
background-color: $progress-bg;
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-bold;
|
||||
@include box-shadow(inset 0 1px 2px rgba(0, 0, 0, .1))
|
||||
}
|
||||
|
||||
.progress-xl {
|
||||
height: $progress-xl-size;
|
||||
}
|
||||
.progress-lg {
|
||||
height: $progress-lg-size;
|
||||
}
|
||||
.progress-sm {
|
||||
height: $progress-sm-size;
|
||||
}
|
||||
|
||||
.progress-info{
|
||||
@include display-flex();
|
||||
@include align-items(center);
|
||||
@include justify-content(space-between);
|
||||
margin-bottom: .5rem;
|
||||
|
||||
.progress-label {
|
||||
span {
|
||||
display: inline-block;
|
||||
color: $primary;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-percentage {
|
||||
text-align: right;
|
||||
span {
|
||||
display: inline-block;
|
||||
color: $gray-500;
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-xl{
|
||||
.progress-label,
|
||||
.progress-percentage {
|
||||
span {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-percentage {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.progress-tooltip {
|
||||
background: $primary;
|
||||
color: $white;
|
||||
font-weight: $font-weight-bold;
|
||||
padding: .25rem .375rem;
|
||||
line-height: 1;
|
||||
font-size: $font-size-xs;
|
||||
position: relative;
|
||||
border-radius: $border-radius-sm;
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 10px;
|
||||
border: solid transparent;
|
||||
height: 0;
|
||||
width: 0;
|
||||
pointer-events: none;
|
||||
border-top-color: $gray;
|
||||
border-width: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes animate-positive{
|
||||
0% { width: 0%; }
|
||||
}
|
||||
@keyframes animate-positive{
|
||||
0% { width: 0%; }
|
||||
}
|
||||
|
||||
//Tooltip arrow color
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.progress-info{
|
||||
.bg-#{$color} {
|
||||
&::after{
|
||||
border-top-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,228 @@
|
||||
[data-simplebar] {
|
||||
position: fixed;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.simplebar-wrapper {
|
||||
overflow: hidden;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
max-width: inherit;
|
||||
max-height: inherit;
|
||||
}
|
||||
|
||||
.simplebar-mask {
|
||||
direction: inherit;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.simplebar-offset {
|
||||
direction: inherit !important;
|
||||
box-sizing: inherit !important;
|
||||
resize: none !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.simplebar-content-wrapper {
|
||||
direction: inherit;
|
||||
box-sizing: border-box !important;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
|
||||
width: auto;
|
||||
max-width: 100%; /* Not required for horizontal scroll to trigger */
|
||||
max-height: 100%; /* Needed for vertical scroll to trigger */
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.simplebar-content-wrapper::-webkit-scrollbar,
|
||||
.simplebar-hide-scrollbar::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.simplebar-content:before,
|
||||
.simplebar-content:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
.simplebar-placeholder {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.simplebar-height-auto-observer-wrapper {
|
||||
box-sizing: inherit !important;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 1px;
|
||||
position: relative;
|
||||
float: left;
|
||||
max-height: 1px;
|
||||
overflow: hidden;
|
||||
z-index: -1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
flex-grow: inherit;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.simplebar-height-auto-observer {
|
||||
box-sizing: inherit;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 1000%;
|
||||
width: 1000%;
|
||||
min-height: 1px;
|
||||
min-width: 1px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.simplebar-track {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-simplebar].simplebar-dragging .simplebar-content {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
[data-simplebar].simplebar-dragging .simplebar-track {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: black;
|
||||
border-radius: 7px;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s 0.5s linear;
|
||||
}
|
||||
|
||||
.simplebar-scrolling .simplebar-scrollbar:before,
|
||||
.simplebar-hover .simplebar-scrollbar:before,
|
||||
.simplebar-mouse-entered .simplebar-scrollbar:before {
|
||||
opacity: 0.5;
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar.simplebar-visible:before {
|
||||
/* When hovered, remove all transitions from drag handle */
|
||||
opacity: 0.5;
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-vertical {
|
||||
top: 0;
|
||||
width: 11px;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar:before {
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-horizontal {
|
||||
left: 0;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
|
||||
right: auto;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
min-height: 0;
|
||||
min-width: 10px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Rtl support */
|
||||
[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.simplebar-dummy-scrollbar-size {
|
||||
direction: rtl;
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
-ms-overflow-style: scrollbar !important;
|
||||
}
|
||||
|
||||
.simplebar-dummy-scrollbar-size > div {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.simplebar-hide-scrollbar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar::before {
|
||||
background-color: darken($dark, 10%);
|
||||
}
|
||||
|
||||
18
app/application/resources/volt/scss/volt/components/_shapes.scss
Executable file
18
app/application/resources/volt/scss/volt/components/_shapes.scss
Executable file
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* = Shapes
|
||||
*/
|
||||
|
||||
.avatar-sm {
|
||||
width: $avatar-sm-y;
|
||||
height: $avatar-sm-x;
|
||||
}
|
||||
|
||||
.avatar-md {
|
||||
width: $avatar-md-y;
|
||||
height: $avatar-md-x;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
width: $avatar-lg-y;
|
||||
height: $avatar-lg-x;
|
||||
}
|
||||
61
app/application/resources/volt/scss/volt/components/_steps.scss
Executable file
61
app/application/resources/volt/scss/volt/components/_steps.scss
Executable file
@@ -0,0 +1,61 @@
|
||||
/**steps
|
||||
* = Accordions
|
||||
*/
|
||||
|
||||
.step{
|
||||
position: relative;
|
||||
margin-bottom: 4rem;
|
||||
border-radius: 6px;
|
||||
|
||||
.step-shape{
|
||||
display: inline-flex;
|
||||
width: $step-shape-size;
|
||||
height: $step-shape-size;
|
||||
text-align: center;
|
||||
@include align-items(center);
|
||||
@include justify-content(center);
|
||||
|
||||
i, svg {
|
||||
font-size: $icon-size;
|
||||
}
|
||||
|
||||
.step-number{
|
||||
position: absolute;
|
||||
font-weight: $font-weight-bold;
|
||||
top: -10px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-width: $step-border-width;
|
||||
border-style: solid;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border-width: $step-border-width;
|
||||
border-style: solid;
|
||||
|
||||
.step-number {
|
||||
background-color: $white;
|
||||
top:-12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.rounded-circle{
|
||||
.step-number{
|
||||
margin-right:1.275rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-lg{
|
||||
font-size: $step-icon-size;
|
||||
}
|
||||
|
||||
.back-layer{
|
||||
@include display-flex();
|
||||
position: absolute;
|
||||
font-size: $step-number-size;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
394
app/application/resources/volt/scss/volt/components/_tables.scss
Normal file
394
app/application/resources/volt/scss/volt/components/_tables.scss
Normal file
@@ -0,0 +1,394 @@
|
||||
// General styles
|
||||
|
||||
.table {
|
||||
|
||||
thead th {
|
||||
padding-top: $table-head-spacer-y;
|
||||
padding-bottom: $table-head-spacer-y;
|
||||
font-size: $table-head-font-size;
|
||||
text-transform: $table-head-text-transform;
|
||||
font-weight: $font-weight-bolder;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: $font-weight-bold;
|
||||
padding:1rem;
|
||||
}
|
||||
|
||||
td {
|
||||
.progress {
|
||||
height: 3px;
|
||||
width: 120px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
font-size: $table-body-font-size;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// User Table
|
||||
|
||||
&.user-table{
|
||||
thead th{
|
||||
border-top:0;
|
||||
}
|
||||
}
|
||||
|
||||
// Vetical align table content
|
||||
|
||||
&.align-items-center {
|
||||
td,
|
||||
th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Styles for dark table
|
||||
|
||||
.thead-dark {
|
||||
th {
|
||||
background-color: $gray-800;
|
||||
color: $white;
|
||||
|
||||
a {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Styles for light table
|
||||
|
||||
.thead-light {
|
||||
th {
|
||||
background-color: $gray-100;
|
||||
color: $dark;
|
||||
|
||||
a {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Add transition for hover state
|
||||
|
||||
.table-hover {
|
||||
tr {
|
||||
@include transition($transition-base);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Flush tables
|
||||
|
||||
.table-flush {
|
||||
td,
|
||||
th {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:first-child {
|
||||
td,
|
||||
th {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
td,
|
||||
th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tables inside cards
|
||||
|
||||
.card {
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
|
||||
td,
|
||||
th {
|
||||
padding-left: $card-spacer-x;
|
||||
padding-right: $card-spacer-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
[data-sort] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.thead-dark {
|
||||
[data-sort] {
|
||||
&::after {
|
||||
content: str-replace(url("data:image/svg+xml;utf8,<svg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z' fill='#{$dark}'/></svg>"), "#", "%23");
|
||||
margin-left: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thead-light {
|
||||
[data-sort] {
|
||||
&::after {
|
||||
content: str-replace(url("data:image/svg+xml;utf8,<svg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z' fill='#{$dark}'/></svg>"), "#", "%23");
|
||||
margin-left: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_wrapper {
|
||||
|
||||
.dataTables_info{
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.dataTables_paginate{
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.dataTables_length {
|
||||
label{
|
||||
padding-left:1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_filter {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dataTable-top,
|
||||
.dataTable-bottom {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
flex-direction: column;
|
||||
|
||||
.dataTable-info {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataTable-top {
|
||||
padding: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.dataTable-bottom {
|
||||
padding: 1.5rem 0 0 0;
|
||||
}
|
||||
|
||||
.dataTable-pagination {
|
||||
display: flex;
|
||||
@include list-unstyled();
|
||||
|
||||
a {
|
||||
padding: $pagination-padding-y $pagination-padding-x;
|
||||
@include font-size(null);
|
||||
}
|
||||
|
||||
li {
|
||||
@if $pagination-margin-left == (-$pagination-border-width) {
|
||||
&:first-child {
|
||||
a {
|
||||
@include border-start-radius($pagination-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
a {
|
||||
@include border-end-radius($pagination-border-radius);
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
//Add border-radius to all pageLinks in case they have left margin
|
||||
a {
|
||||
@include border-radius($pagination-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> li {
|
||||
&:not(:first-child) a {
|
||||
margin-left: $pagination-margin-left;
|
||||
}
|
||||
|
||||
&.active a {
|
||||
z-index: 3;
|
||||
color: $pagination-active-color;
|
||||
@include gradient-bg($pagination-active-bg);
|
||||
border-color: $pagination-active-border-color;
|
||||
}
|
||||
|
||||
&.disabled a {
|
||||
color: $pagination-disabled-color;
|
||||
pointer-events: none;
|
||||
background-color: $pagination-disabled-bg;
|
||||
border-color: $pagination-disabled-border-color;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
color: $pagination-color;
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
background-color: $pagination-bg;
|
||||
border: $pagination-border-width solid $pagination-border-color;
|
||||
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
color: $pagination-hover-color;
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
background-color: $pagination-hover-bg;
|
||||
border-color: $pagination-hover-border-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 3;
|
||||
outline: $pagination-focus-outline;
|
||||
box-shadow: $pagination-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataTable-selector {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: $form-select-height;
|
||||
padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
|
||||
font-family: $form-select-font-family;
|
||||
@include font-size($form-select-font-size);
|
||||
font-weight: $form-select-font-weight;
|
||||
line-height: $form-select-line-height;
|
||||
color: $form-select-color;
|
||||
vertical-align: middle;
|
||||
background-color: $form-select-bg;
|
||||
background-image: escape-svg($form-select-indicator);
|
||||
background-repeat: no-repeat;
|
||||
background-position: $form-select-bg-position;
|
||||
background-size: $form-select-bg-size;
|
||||
border: $form-select-border-width solid $form-select-border-color;
|
||||
@include border-radius($form-select-border-radius, 0);
|
||||
@include box-shadow($form-select-box-shadow);
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
border-color: $form-select-focus-border-color;
|
||||
outline: 0;
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: $form-select-focus-box-shadow;
|
||||
}
|
||||
|
||||
&::-ms-value {
|
||||
// For visual consistency with other platforms/browsers,
|
||||
// suppress the default white text on blue background highlight given to
|
||||
// the selected option text when the (still closed) <select> receives focus
|
||||
// in Edge.
|
||||
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&[multiple],
|
||||
&[size]:not([size="1"]) {
|
||||
height: auto;
|
||||
padding-right: $form-select-padding-x;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $form-select-disabled-color;
|
||||
background-color: $form-select-disabled-bg;
|
||||
border-color: $form-select-disabled-border-color;
|
||||
}
|
||||
|
||||
// Remove outline from select box in FF
|
||||
&:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 $form-select-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dataTable-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: $input-height;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-family: $input-font-family;
|
||||
@include font-size($input-font-size);
|
||||
font-weight: $input-font-weight;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
background-clip: padding-box;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
appearance: none; // Fix appearance for date inputs in Safari
|
||||
|
||||
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||
@include border-radius($input-border-radius, 0);
|
||||
|
||||
@include box-shadow($input-box-shadow);
|
||||
@include transition($input-transition);
|
||||
|
||||
// Customize the `:focus` state to imitate native WebKit styles.
|
||||
&:focus {
|
||||
color: $input-focus-color;
|
||||
background-color: $input-focus-bg;
|
||||
border-color: $input-focus-border-color;
|
||||
outline: 0;
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
color: $input-placeholder-color;
|
||||
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Disabled and read-only inputs
|
||||
//
|
||||
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
||||
// disabled if the fieldset is disabled. Due to implementation difficulty, we
|
||||
// don't honor that edge case; we style them as disabled anyway.
|
||||
&:disabled,
|
||||
&[readonly] {
|
||||
background-color: $input-disabled-bg;
|
||||
border-color: $input-disabled-border-color;
|
||||
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
22
app/application/resources/volt/scss/volt/components/_timelines.scss
Executable file
22
app/application/resources/volt/scss/volt/components/_timelines.scss
Executable file
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* = Timelines
|
||||
*/
|
||||
|
||||
.list-group-timeline {
|
||||
.list-group-item {
|
||||
position: relative;
|
||||
.col-auto{
|
||||
z-index: 999;
|
||||
}
|
||||
&:not(:last-child){
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 2.5rem;
|
||||
height: 100%;
|
||||
border-left: 1px solid $light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
43
app/application/resources/volt/scss/volt/components/_tooltip.scss
Executable file
43
app/application/resources/volt/scss/volt/components/_tooltip.scss
Executable file
@@ -0,0 +1,43 @@
|
||||
// Wrapper for the tooltip content
|
||||
|
||||
.tooltip-inner {
|
||||
@include box-shadow($box-shadow);
|
||||
}
|
||||
|
||||
.chartist-tooltip {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
min-width: 5em;
|
||||
padding: .5em;
|
||||
background: $gray-100;
|
||||
border: 1px solid $gray-100;
|
||||
border-radius: $border-radius;
|
||||
color: $dark;
|
||||
font-weight: $font-weight-bold;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
transition: $transition-base;
|
||||
}
|
||||
|
||||
.chartist-tooltip:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -15px;
|
||||
border: 15px solid transparent;
|
||||
border-top-color: $gray-100;
|
||||
}
|
||||
|
||||
.chartist-tooltip.tooltip-show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ct-area, .ct-line {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
170
app/application/resources/volt/scss/volt/components/_type.scss
Executable file
170
app/application/resources/volt/scss/volt/components/_type.scss
Executable file
@@ -0,0 +1,170 @@
|
||||
/**
|
||||
* = Typography
|
||||
*/
|
||||
|
||||
h1,h2,h3,h4,h5,h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
|
||||
p, ol li, ul li, .p {
|
||||
font-family: $font-family-base;
|
||||
font-size: $paragraph-font-size;
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: $paragraph-line-height;
|
||||
}
|
||||
|
||||
a, .text-action {
|
||||
color: $link-color;
|
||||
transition: $transition-base;
|
||||
&:hover{
|
||||
color: $link-hover-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.lead {
|
||||
+ .btn-wrapper {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
@include media-breakpoint-down(md){
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
.line-through{
|
||||
-webkit-text-decoration: line-through;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.text-italic{
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
// underline on hover
|
||||
|
||||
.hover\:underline{
|
||||
&:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
// Headings
|
||||
|
||||
.heading {
|
||||
font-size: $h2-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include media-breakpoint-down(md){
|
||||
.display-2{
|
||||
font-size: $display4-size;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg){
|
||||
.display-3{
|
||||
font-size: $display4-size;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm){
|
||||
.display-4{
|
||||
font-size: $h4-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
.blockquote {
|
||||
font-style: italic;
|
||||
&.blockquote-large{
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
}
|
||||
.blockquote-footer{
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-bolder;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Font Sizes
|
||||
|
||||
.font-small {
|
||||
@include font-size($font-size-sm);
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
|
||||
.font-base{
|
||||
@include font-size($font-size-base);
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
@include font-size($font-size-lg);
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
|
||||
|
||||
//PrismJs text
|
||||
|
||||
code[class*="language-"], pre[class*="language-"]{
|
||||
text-shadow: none;
|
||||
font-family: $font-family-base;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
// Set color of theme buttons
|
||||
@each $color, $value in $theme-colors {
|
||||
.text-#{$color} {
|
||||
&, &:hover {
|
||||
color: $value !important;
|
||||
}
|
||||
|
||||
a:not(.btn),h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.display-1, .display-2, .display-3, .display-4{
|
||||
color: $value;
|
||||
}
|
||||
.text-muted{
|
||||
color: rgba($value,.7) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
article {
|
||||
img {
|
||||
margin: 40px 0;
|
||||
}
|
||||
p, ul, ol, blockquote {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
p, ul li, ol li {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-structure li {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.truncate-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
.form-check-input {
|
||||
&.round-check{
|
||||
&[type="checkbox"] {
|
||||
@include border-radius($form-check-radio-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-switch {
|
||||
padding-left: $form-switch-padding-left;
|
||||
|
||||
.form-check-input {
|
||||
height: 1.275em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
.form-control{
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&.form-control-lg{
|
||||
padding: $inpu-lg-padding-y $input-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
.form-control {
|
||||
width: 280px;
|
||||
transition: width .2s ease-in-out;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
width: 120px;
|
||||
|
||||
&:focus {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
.form-select {
|
||||
.form-select-lg{
|
||||
padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
//Add File Alternative Style
|
||||
|
||||
.file-field input[type="file"] {
|
||||
max-width: 230px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
filter: alpha(opacity=0);
|
||||
opacity: 0;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.file-field svg {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.datepicker-dropdown {
|
||||
z-index: 9999;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.input-group {
|
||||
.form-control:focus {
|
||||
border-color: $input-border-color;
|
||||
|
||||
& + .input-group-text {
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text{
|
||||
@include box-shadow($input-box-shadow);
|
||||
}
|
||||
105
app/application/resources/volt/scss/volt/layout/_footer.scss
Executable file
105
app/application/resources/volt/scss/volt/layout/_footer.scss
Executable file
@@ -0,0 +1,105 @@
|
||||
/**
|
||||
* = Footers
|
||||
*/
|
||||
|
||||
.footer{
|
||||
|
||||
ul{
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
display: block;
|
||||
color: $gray-700;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.links-horizontal{
|
||||
&:first-child a{
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child a{
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.links-vertical{
|
||||
li{
|
||||
display: block;
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
|
||||
a{
|
||||
padding: 5px;
|
||||
|
||||
&:hover{
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-box{
|
||||
i{
|
||||
line-height: 1.7
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-buttons{
|
||||
a,
|
||||
.btn{
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: $padding-footer-sm $padding-footer;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-brand{
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-bold;
|
||||
|
||||
img.common {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
&:hover,
|
||||
&:focus{
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
.footer-language-link{
|
||||
font-size:$font-size-sm;
|
||||
i{
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
.copyright{
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.pull-center{
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
414
app/application/resources/volt/scss/volt/layout/_navbar.scss
Executable file
414
app/application/resources/volt/scss/volt/layout/_navbar.scss
Executable file
@@ -0,0 +1,414 @@
|
||||
/**
|
||||
* = Navigation bars
|
||||
*/
|
||||
|
||||
.navbar-main {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: $navbar-dark-toggler-icon-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar .navbar-nav {
|
||||
|
||||
.nav-link {
|
||||
@include transitions(.8s, $transition-base);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
font-size: 1.2rem;
|
||||
@include display-flex();
|
||||
@include justify-content(space-between);
|
||||
@include align-items(center);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.media:not(:last-child){
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
&:focus,
|
||||
.nav-link:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
||||
.dropdown-menu {
|
||||
top: 100%;
|
||||
span{
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dropdown-megamenu,
|
||||
.dropdown-megamenu-sm,
|
||||
.dropdown-megamenu-md {
|
||||
@include media-breakpoint-up(lg) {
|
||||
min-width: 580px;
|
||||
}
|
||||
|
||||
.megamenu-link {
|
||||
color: $gray;
|
||||
font-weight: 400;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.megamenu-item {
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
|
||||
.megamenu-link {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-megamenu-sm {
|
||||
@include media-breakpoint-up(lg) {
|
||||
min-width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-megamenu-md {
|
||||
@include media-breakpoint-up(lg) {
|
||||
min-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.dropdown-menu {
|
||||
.dropdown-toggle .nav-link-arrow {
|
||||
@include transform(rotate(-90deg));
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown.show > .dropdown-toggle .nav-link-arrow {
|
||||
@include transform(rotate(180deg));
|
||||
}
|
||||
|
||||
.dropdown-toggle:hover .nav-link-arrow {
|
||||
@include transform(rotate(0deg));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
|
||||
.dropdown-menu {
|
||||
top: 0;
|
||||
left: calc(100% - 2px);
|
||||
margin-left: .1rem;
|
||||
margin-right: .1rem;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.nav-link-arrow {
|
||||
transition: $transition-transform;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
|
||||
img {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar text and logo dark & light
|
||||
.navbar-dark {
|
||||
|
||||
.navbar-brand-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
& > .nav-item:hover > .nav-link {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-light {
|
||||
|
||||
&:not(.headroom--not-top) {
|
||||
.btn-outline-soft {
|
||||
border-color: $dark;
|
||||
color: $dark;
|
||||
|
||||
&:hover {
|
||||
background: $dark;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: $navbar-light-toggler-icon-bg;
|
||||
}
|
||||
|
||||
.navbar-brand-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: $gray-800;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
top: 100%;
|
||||
span{
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-transparent {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
[data-toggle="dropdown"]::after {
|
||||
transition: $transition-base;
|
||||
}
|
||||
|
||||
&.show {
|
||||
[data-toggle="dropdown"]::after {
|
||||
@include transform(rotate(180deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
|
||||
i {
|
||||
margin-right: .3rem;
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
font-size: 1rem;
|
||||
|
||||
i {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
margin: 0;
|
||||
border-radius: $dropdown-border-radius;
|
||||
}
|
||||
|
||||
.dropdown-menu-end {
|
||||
&:before {
|
||||
right: 20px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-center {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.dropdown-menu,
|
||||
.dropdown-megamenu,
|
||||
.dropdown-megamenu-md {
|
||||
&.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&.close {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-submenu .dropdown-menu {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: relative;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: $transition-base;
|
||||
}
|
||||
|
||||
.dropdown.show,
|
||||
.dropdown-submenu.show {
|
||||
& > .dropdown-menu {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-inner {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-transparent {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
&.disabled {
|
||||
color: $navbar-dark-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Collapse
|
||||
.navbar-collapse-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
padding: .625rem 0;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
|
||||
.media svg {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-center {
|
||||
right: 0;
|
||||
left: auto;
|
||||
transform: translate(0, 0);
|
||||
@include media-breakpoint-down(lg) {
|
||||
transform: translateX(-75%);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
width: calc(100% - 30px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 15px;
|
||||
z-index: 1050;
|
||||
overflow-y: auto;
|
||||
// using !important to overwrite Bootstrap's inline styles
|
||||
height: calc(100vh - 30px) !important;
|
||||
opacity: 0;
|
||||
|
||||
.navbar-toggler {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
opacity: 1;
|
||||
background: #283448;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse-header {
|
||||
display: block;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.collapse-brand img {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.collapse-close {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse.collapsing,
|
||||
.navbar-collapse.show {
|
||||
padding: 1.5rem;
|
||||
border-radius: $dropdown-border-radius;
|
||||
background: $white;
|
||||
animation: show-navbar-collapse .2s ease forwards;
|
||||
@include box-shadow(0 0 20px rgba(0, 0, 0, .1));
|
||||
}
|
||||
|
||||
.navbar-collapse.collapsing-out {
|
||||
animation: hide-navbar-collapse .2s ease forwards;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dashboard {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
// Theme color variants
|
||||
// eg. navbar-theme-primary, navbar-theme-secondary
|
||||
@each $color, $value in $navbar-colors {
|
||||
.navbar-theme-#{$color}:not(.headroom) {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
164
app/application/resources/volt/scss/volt/layout/_section.scss
Normal file
164
app/application/resources/volt/scss/volt/layout/_section.scss
Normal file
@@ -0,0 +1,164 @@
|
||||
/**
|
||||
* = Sections
|
||||
*/
|
||||
|
||||
.section {
|
||||
position: relative;
|
||||
padding-top: $spacer * 3;
|
||||
padding-bottom: $spacer * 3;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
position: relative;
|
||||
padding-top: $spacer * 9;
|
||||
padding-bottom: $spacer * 3;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.section {
|
||||
position: relative;
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
}
|
||||
.section-header {
|
||||
position: relative;
|
||||
padding-top: $spacer * 8;
|
||||
padding-bottom: $spacer * 8;
|
||||
&.section-sm{
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 3;
|
||||
}
|
||||
}
|
||||
.section-xl {
|
||||
padding-top: $spacer * 8;
|
||||
padding-bottom: $spacer * 8;
|
||||
}
|
||||
.section-lg {
|
||||
padding-top: $spacer * 6;
|
||||
padding-bottom: $spacer * 6;
|
||||
}
|
||||
.section-sm {
|
||||
padding-top: $spacer * 3;
|
||||
padding-bottom: $spacer * 3;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.section {
|
||||
position: relative;
|
||||
padding-top: $spacer * 6;
|
||||
padding-bottom: $spacer * 6;
|
||||
}
|
||||
.section-header {
|
||||
position: relative;
|
||||
padding-top: $spacer * 10;
|
||||
padding-bottom: $spacer * 10;
|
||||
&.section-sm{
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 3;
|
||||
}
|
||||
}
|
||||
.section-xl {
|
||||
padding-top: $spacer * 10;
|
||||
padding-bottom: $spacer * 10;
|
||||
}
|
||||
.section-lg {
|
||||
padding-top: $spacer * 8;
|
||||
padding-bottom: $spacer * 8;
|
||||
}
|
||||
.section-sm {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
}
|
||||
}
|
||||
|
||||
// Hero sections
|
||||
.section-hero {
|
||||
@include media-breakpoint-up(md) {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
//Section delimiter
|
||||
.line-bottom{
|
||||
&::after{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -40%;
|
||||
height: 1px;
|
||||
background: radial-gradient(ellipse at center,$light 0,rgba(255,255,255,0) 80%);
|
||||
}
|
||||
}
|
||||
|
||||
// Profile cover
|
||||
.section-profile-cover {
|
||||
height: 580px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
@include media-breakpoint-down(md) {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
// Components section
|
||||
.components-section {
|
||||
>.form-control {
|
||||
+.form-control {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
>.nav+.nav,
|
||||
>.alert+.alert,
|
||||
>.navbar+.navbar,
|
||||
>.progress+.progress,
|
||||
>.progress+.btn,
|
||||
.badge,
|
||||
.btn {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.btn-group {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
.btn {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.alert {
|
||||
margin: 0;
|
||||
+.alert {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
.modal-footer {
|
||||
.btn {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copy-docs {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
transition: $transition-base;
|
||||
&.copied {
|
||||
background: $success;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-container{
|
||||
overflow-x: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
* = Sidebars
|
||||
*/
|
||||
|
||||
#doc-index:not(.collapse.show), .doc-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg){
|
||||
#doc-index{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.doc-sidebar {
|
||||
display: block;
|
||||
height: calc(100vh - 2rem);
|
||||
overflow-y: scroll;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
|
||||
.nav-link[data-toggle="collapse"] > .icon {
|
||||
transform: rotateZ(-90deg);
|
||||
position: relative;
|
||||
right: .25rem;
|
||||
}
|
||||
|
||||
.nav{
|
||||
.nav-item{
|
||||
font-size:$font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
191
app/application/resources/volt/scss/volt/layout/_sidenav.scss
Normal file
191
app/application/resources/volt/scss/volt/layout/_sidenav.scss
Normal file
@@ -0,0 +1,191 @@
|
||||
/*
|
||||
* Sidebar
|
||||
*/
|
||||
.sidebar {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
@include transition(max-width .1s);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 100%;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
&.active {
|
||||
& > .nav-link {
|
||||
color: $gray-100;
|
||||
background-color: $gray-700;
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $gray-100;
|
||||
background-color: $gray-700;
|
||||
}
|
||||
}
|
||||
margin-bottom: .2rem;
|
||||
}
|
||||
|
||||
.nav-link + .multi-level {
|
||||
margin-top: .2rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: $font-size-base;
|
||||
vertical-align: middle;
|
||||
padding: 0.55rem 0.75rem;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
.sidebar-icon {
|
||||
margin-right: .5rem;
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
.link-arrow{
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
&[data-bs-toggle=collapse][aria-expanded=true] .link-arrow{
|
||||
@include transform(rotate(90deg));
|
||||
transition: $transition-base;
|
||||
}
|
||||
}
|
||||
.nav-link.active {
|
||||
color: $gray-100;
|
||||
}
|
||||
|
||||
.multi-level{
|
||||
.nav-link{
|
||||
padding-left: 53px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-text,
|
||||
.link-arrow,
|
||||
.badge,
|
||||
.notification-count {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sidebar-text-contracted {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.contracted {
|
||||
.sidebar-text,
|
||||
.link-arrow,
|
||||
.badge {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.notification-count {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 40px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
font-size: .7rem;
|
||||
padding: .2rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
&.active {
|
||||
& > .nav-link {
|
||||
background-color: #363c54;
|
||||
width: 44px;
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-text-contracted {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.multi-level .nav-link {
|
||||
padding-left: 17px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
& + .content {
|
||||
margin-left: 95px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
max-width: 95px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-inner {
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.user-card{
|
||||
border-bottom: 0.0625rem solid #2e3650;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
overflow: hidden;
|
||||
padding: 0 $spacer 0 $spacer;
|
||||
@include transition(all .3s);
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-left: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
font-size: 1.3rem;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
background: $gray-300;
|
||||
}
|
||||
|
||||
}
|
||||
45
app/application/resources/volt/scss/volt/mixins/_animations.scss
Executable file
45
app/application/resources/volt/scss/volt/mixins/_animations.scss
Executable file
@@ -0,0 +1,45 @@
|
||||
@mixin perspective($value){
|
||||
-webkit-perspective: $value;
|
||||
-moz-perspective: $value;
|
||||
-o-perspective: $value;
|
||||
-ms-perspective: $value;
|
||||
perspective: $value;
|
||||
}
|
||||
@mixin transitions($time, $type){
|
||||
-webkit-transition: all $time $type;
|
||||
-moz-transition: all $time $type;
|
||||
-o-transition: all $time $type;
|
||||
-ms-transition: all $time $type;
|
||||
transition: all $time $type;
|
||||
}
|
||||
|
||||
@mixin transitions-property($property, $time, $type){
|
||||
-webkit-transition: $property $time $type;
|
||||
-moz-transition: $property $time $type;
|
||||
-o-transition: $property $time $type;
|
||||
-ms-transition: $property $time $type;
|
||||
transition: $property $time $type;
|
||||
}
|
||||
@mixin transform-style($type){
|
||||
-webkit-transform-style: $type;
|
||||
-moz-transform-style: $type;
|
||||
-o-transform-style: $type;
|
||||
-ms-transform-style: $type;
|
||||
transform-style: $type;
|
||||
}
|
||||
|
||||
@mixin backface-visibility($type){
|
||||
-webkit-backface-visibility: $type;
|
||||
-moz-backface-visibility: $type;
|
||||
-o-backface-visibility: $type;
|
||||
-ms-backface-visibility: $type;
|
||||
backface-visibility: $type;
|
||||
}
|
||||
|
||||
@mixin rotateY-180() {
|
||||
-webkit-transform: rotateY( 180deg );
|
||||
-moz-transform: rotateY( 180deg );
|
||||
-o-transform: rotateY( 180deg );
|
||||
-ms-transform: rotateY(180deg);
|
||||
transform: rotateY( 180deg );
|
||||
}
|
||||
25
app/application/resources/volt/scss/volt/mixins/_background-variant.scss
Executable file
25
app/application/resources/volt/scss/volt/mixins/_background-variant.scss
Executable file
@@ -0,0 +1,25 @@
|
||||
// Contextual backgrounds
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
a#{$parent},
|
||||
button#{$parent} {
|
||||
@include hover-focus {
|
||||
background-color: darken($color, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bg-gradient-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background: linear-gradient(87deg, $color 0, saturate($color, 10%) 100%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin background-image($background-repeat,$background-size) {
|
||||
background-repeat: $background-repeat;
|
||||
background-position: top center;
|
||||
background-size: $background-size;
|
||||
}
|
||||
|
||||
17
app/application/resources/volt/scss/volt/mixins/_icon.scss
Executable file
17
app/application/resources/volt/scss/volt/mixins/_icon.scss
Executable file
@@ -0,0 +1,17 @@
|
||||
@mixin icon-shape-variant($color) {
|
||||
color: $color;
|
||||
background-color: rgba( $color, .3 );
|
||||
}
|
||||
|
||||
@mixin icon-parallax-background($background-position,$background-size,$background-attachment,$background-repeat) {
|
||||
background-position: $background-position;
|
||||
background-size: $background-size;
|
||||
background-attachment: $background-attachment;
|
||||
background-repeat: $background-repeat;
|
||||
}
|
||||
|
||||
@mixin icon-image-background($background-position,$background-size,$background-repeat) {
|
||||
background-position: $background-position;
|
||||
background-size: $background-size;
|
||||
background-repeat: $background-repeat;
|
||||
}
|
||||
23
app/application/resources/volt/scss/volt/mixins/_modals.scss
Executable file
23
app/application/resources/volt/scss/volt/mixins/_modals.scss
Executable file
@@ -0,0 +1,23 @@
|
||||
@mixin modal-variant($background) {
|
||||
.modal-title {
|
||||
color: color-yiq($background);
|
||||
}
|
||||
.modal-header,
|
||||
.modal-footer {
|
||||
border-color: rgba($background, .075);
|
||||
}
|
||||
.modal-content {
|
||||
background-color: $background;
|
||||
color: color-yiq($background);
|
||||
|
||||
.heading {
|
||||
color: color-yiq($background);
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
&>span:not(.sr-only) {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
36
app/application/resources/volt/scss/volt/mixins/_popover.scss
Executable file
36
app/application/resources/volt/scss/volt/mixins/_popover.scss
Executable file
@@ -0,0 +1,36 @@
|
||||
@mixin popover-variant($background) {
|
||||
|
||||
background-color: $background;
|
||||
|
||||
.popover-header {
|
||||
background-color: $background;
|
||||
color: color-yiq($background);
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
color: color-yiq($background);
|
||||
}
|
||||
.popover-header{
|
||||
border-color: rgba($background, .2);
|
||||
}
|
||||
&.bs-popover-top {
|
||||
.arrow::after {
|
||||
border-top-color: $background;
|
||||
}
|
||||
}
|
||||
&.bs-popover-end {
|
||||
.arrow::after {
|
||||
border-right-color: $background;
|
||||
}
|
||||
}
|
||||
&.bs-popover-bottom {
|
||||
.arrow::after {
|
||||
border-bottom-color: $background;
|
||||
}
|
||||
}
|
||||
&.bs-popover-start {
|
||||
.arrow::after {
|
||||
border-left-color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
19
app/application/resources/volt/scss/volt/mixins/_transform.scss
Executable file
19
app/application/resources/volt/scss/volt/mixins/_transform.scss
Executable file
@@ -0,0 +1,19 @@
|
||||
|
||||
@mixin transform($transforms) {
|
||||
-moz-transform: $transforms;
|
||||
-o-transform: $transforms;
|
||||
-ms-transform: $transforms;
|
||||
-webkit-transform: $transforms;
|
||||
transform: $transforms;
|
||||
}
|
||||
|
||||
|
||||
// translate
|
||||
@mixin translate ($x, $y) {
|
||||
@include transform(translate($x, $y));
|
||||
}
|
||||
|
||||
// rotate
|
||||
@mixin rotate ($deg) {
|
||||
@include transform(rotate(#{$deg}deg));
|
||||
}
|
||||
123
app/application/resources/volt/scss/volt/mixins/_utilities.scss
Normal file
123
app/application/resources/volt/scss/volt/mixins/_utilities.scss
Normal file
@@ -0,0 +1,123 @@
|
||||
@mixin filter($filter) {
|
||||
-webkit-filter: #{$filter};
|
||||
-moz-filter: #{$filter};
|
||||
-ms-filter: #{$filter};
|
||||
-o-filter: #{$filter};
|
||||
filter: #{$filter};
|
||||
}
|
||||
|
||||
@mixin backface-visibility($value) {
|
||||
-webkit-backface-visibility: $value;
|
||||
-moz-backface-visibility: $value;
|
||||
-o-backface-visibility: $value;
|
||||
backface-visibility: $value;
|
||||
}
|
||||
|
||||
@mixin transform-style($value) {
|
||||
-webkit-transform-style: $value;
|
||||
-moz-transform-style: $value;
|
||||
-o-transform-style: $value;
|
||||
transform-style: $value;
|
||||
}
|
||||
|
||||
@mixin perspective($value) {
|
||||
-webkit-perspective: $value;
|
||||
-moz-perspective: $value;
|
||||
-o-perspective: $value;
|
||||
perspective: $value;
|
||||
}
|
||||
|
||||
@mixin display-flex() {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@mixin flex($values) {
|
||||
-webkit-box-flex: $values;
|
||||
-moz-box-flex: $values;
|
||||
-webkit-flex: $values;
|
||||
-ms-flex: $values;
|
||||
flex: $values;
|
||||
}
|
||||
|
||||
@mixin flex-direction($direction) {
|
||||
-webkit-flex-direction: $direction;
|
||||
-moz-flex-direction: $direction;
|
||||
-ms-flex-direction: $direction;
|
||||
flex-direction: $direction;
|
||||
}
|
||||
|
||||
@mixin flex-wrap($wrap) {
|
||||
-webkit-flex-wrap: $wrap;
|
||||
-moz-flex-wrap: $wrap;
|
||||
-ms-flex-wrap: $wrap;
|
||||
flex-wrap: $wrap;
|
||||
}
|
||||
|
||||
@mixin flex-flow($flow) {
|
||||
-webkit-flex-flow: $flow;
|
||||
-moz-flex-flow: $flow;
|
||||
-ms-flex-flow: $flow;
|
||||
flex-flow: $flow;
|
||||
}
|
||||
|
||||
@mixin order($val) {
|
||||
-webkit-box-ordinal-group: $val;
|
||||
-moz-box-ordinal-group: $val;
|
||||
-ms-flex-order: $val;
|
||||
-webkit-order: $val;
|
||||
order: $val;
|
||||
}
|
||||
|
||||
@mixin flex-grow($grow) {
|
||||
-webkit-flex-grow: $grow;
|
||||
-moz-flex-grow: $grow;
|
||||
-ms-flex-grow: $grow;
|
||||
flex-grow: $grow;
|
||||
}
|
||||
|
||||
@mixin flex-shrink($shrink) {
|
||||
-webkit-flex-shrink: $shrink;
|
||||
-moz-flex-shrink: $shrink;
|
||||
-ms-flex-shrink: $shrink;
|
||||
flex-shrink: $shrink;
|
||||
}
|
||||
|
||||
@mixin flex-basis($width) {
|
||||
-webkit-flex-basis: $width;
|
||||
-moz-flex-basis: $width;
|
||||
-ms-flex-basis: $width;
|
||||
flex-basis: $width;
|
||||
}
|
||||
|
||||
@mixin justify-content($justify) {
|
||||
-webkit-justify-content: $justify;
|
||||
-moz-justify-content: $justify;
|
||||
-ms-justify-content: $justify;
|
||||
justify-content: $justify;
|
||||
-ms-flex-pack: $justify;
|
||||
}
|
||||
|
||||
@mixin align-content($align) {
|
||||
-webkit-align-content: $align;
|
||||
-moz-align-content: $align;
|
||||
-ms-align-content: $align;
|
||||
align-content: $align;
|
||||
}
|
||||
|
||||
@mixin align-items($align) {
|
||||
-webkit-align-items: $align;
|
||||
-moz-align-items: $align;
|
||||
-ms-align-items: $align;
|
||||
align-items: $align;
|
||||
}
|
||||
|
||||
@mixin align-self($align) {
|
||||
-webkit-align-self: $align;
|
||||
-moz-align-self: $align;
|
||||
-ms-align-self: $align;
|
||||
align-self: $align;
|
||||
}
|
||||
Reference in New Issue
Block a user