Init git.
This commit is contained in:
BIN
app/application/resources/site/images/favicons/favicon-120.png
Normal file
BIN
app/application/resources/site/images/favicons/favicon-120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
app/application/resources/site/images/favicons/favicon-16.png
Normal file
BIN
app/application/resources/site/images/favicons/favicon-16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
app/application/resources/site/images/favicons/favicon-32.png
Normal file
BIN
app/application/resources/site/images/favicons/favicon-32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
app/application/resources/site/images/favicons/favicon-96.png
Normal file
BIN
app/application/resources/site/images/favicons/favicon-96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
app/application/resources/site/images/logo.png
Normal file
BIN
app/application/resources/site/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
8
app/application/resources/site/js/_menu.js
Normal file
8
app/application/resources/site/js/_menu.js
Normal file
@@ -0,0 +1,8 @@
|
||||
let body = document.querySelector('body');
|
||||
document.querySelector('#mobile-menu').addEventListener('click', (e) => {
|
||||
if (body.classList.contains('mobile-menu-open')) {
|
||||
body.classList.remove('mobile-menu-open');
|
||||
} else {
|
||||
body.classList.add('mobile-menu-open');
|
||||
}
|
||||
});
|
||||
5
app/application/resources/site/js/app.js
Normal file
5
app/application/resources/site/js/app.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import.meta.glob([
|
||||
'../images/**',
|
||||
]);
|
||||
import './bootstrap';
|
||||
import './_menu.js';
|
||||
4
app/application/resources/site/js/bootstrap.js
vendored
Normal file
4
app/application/resources/site/js/bootstrap.js
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
import axios from 'axios';
|
||||
window.axios = axios;
|
||||
|
||||
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
||||
6
app/application/resources/site/scss/app.scss
Normal file
6
app/application/resources/site/scss/app.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
||||
@import "reset";
|
||||
@import "layout";
|
||||
@import "forms";
|
||||
@import "header";
|
||||
@import "footer";
|
||||
17
app/application/resources/site/scss/footer.scss
Normal file
17
app/application/resources/site/scss/footer.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
.footer {
|
||||
padding-top: 25px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
background: rgba(36,48,40,0.81);
|
||||
}
|
||||
.footer__powered {
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
87
app/application/resources/site/scss/forms.scss
Normal file
87
app/application/resources/site/scss/forms.scss
Normal file
@@ -0,0 +1,87 @@
|
||||
.form-block {
|
||||
padding: 10px 0;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
padding-bottom: 7px;
|
||||
color: #000;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.form-control.is-invalid {
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.form-control:focus,
|
||||
.form-control:focus-visible {
|
||||
outline: 2px solid #006ce7;
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
display: block;
|
||||
padding: 7px 10px;
|
||||
color: #dc3545;
|
||||
font-size: 14px;
|
||||
border: 1px solid #dc3545;
|
||||
border-radius: 6px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
background: #006400;
|
||||
border: 1px solid #002452;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
padding: 12px 30px;
|
||||
color: #fff;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
.button:hover {
|
||||
opacity: 0.8;
|
||||
border-color: #006ce7;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.captcha-service-kor-elf {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
padding: 14px 24px;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
.alert.alert-success {
|
||||
border: 1px solid #0a6f4d;
|
||||
color: #0a6f4d;
|
||||
}
|
||||
.alert.alert-danger {
|
||||
border: 1px solid #dc3545;
|
||||
color: #dc3545;
|
||||
}
|
||||
160
app/application/resources/site/scss/header.scss
Normal file
160
app/application/resources/site/scss/header.scss
Normal file
@@ -0,0 +1,160 @@
|
||||
.header {
|
||||
background: #006400;
|
||||
}
|
||||
.header__content {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas: "header-logo header-menu";
|
||||
min-height: 75px;
|
||||
}
|
||||
.header__logo {
|
||||
grid-area: header-logo;
|
||||
height: 50px;
|
||||
margin-top: 12px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#mobile-menu {
|
||||
grid-area: header-menu;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: #ffffff;
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 110;
|
||||
|
||||
.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.close {
|
||||
display: none;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
body.mobile-menu-open {
|
||||
overflow: hidden;
|
||||
|
||||
#mobile-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 15px;
|
||||
height: 67px;
|
||||
|
||||
.open {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.close {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
#menu {
|
||||
background: #4a6a47;
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
color: #fff;
|
||||
overflow: auto;
|
||||
|
||||
.menu__profile__logout {
|
||||
color: #e19191;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.menu__title {
|
||||
background: #006400;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding-top: 20px;
|
||||
padding-left: 15px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
.header__right {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
.header__logo {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.header__content {
|
||||
grid-template-areas: "header-logo header-right";
|
||||
}
|
||||
.header__right {
|
||||
display: block;
|
||||
grid-area: header-right;
|
||||
text-align: right;
|
||||
padding-top: 15px;
|
||||
}
|
||||
#mobile-menu {
|
||||
display: none;
|
||||
}
|
||||
.header__right__login {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px;
|
||||
padding: 10px 20px;
|
||||
color: #fff;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.header__right__login:hover {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.header__right__logout {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background: rgba(143, 28, 28, 0.7);
|
||||
border-radius: 5px;
|
||||
padding: 10px 20px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease-out;
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
.header__right__logout:hover {
|
||||
background: rgba(143, 28, 28, 0.3);
|
||||
}
|
||||
.header__right__profile {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.header__right__profile,
|
||||
.header__right__logout-form {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
126
app/application/resources/site/scss/layout.scss
Normal file
126
app/application/resources/site/scss/layout.scss
Normal file
@@ -0,0 +1,126 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: #eee;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#menu {
|
||||
display: none;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
color: #0a0e17;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
a.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu__profile {
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.menu__profile__logout {
|
||||
color: rgba(143, 28, 28, 100);
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: none;
|
||||
transition: color 0.2s ease-out;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.menu__profile__logout:hover {
|
||||
color: rgba(143, 28, 28, 0.65);
|
||||
}
|
||||
}
|
||||
|
||||
.container-width {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
h1 {
|
||||
font-size: 27px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.container-width {
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
.section-content {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 200px 1fr;
|
||||
grid-template-areas: "section-menu section-content";
|
||||
}
|
||||
#menu {
|
||||
background: none;
|
||||
grid-area: section-menu;
|
||||
display: block;
|
||||
padding-right: 20px;
|
||||
padding-top: 14px;
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.menu__title {
|
||||
display: none;
|
||||
}
|
||||
#content {
|
||||
grid-area: section-content;
|
||||
}
|
||||
}
|
||||
73
app/application/resources/site/scss/reset.scss
Normal file
73
app/application/resources/site/scss/reset.scss
Normal file
@@ -0,0 +1,73 @@
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Prevent font size inflation */
|
||||
html {
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
/* Remove default margin in favour of better control in authored CSS */
|
||||
body, h1, h2, h3, h4, p,
|
||||
figure, blockquote, dl, dd {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||
ul[role='list'],
|
||||
ol[role='list'] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Set shorter line heights on headings and interactive elements */
|
||||
h1, h2, h3, h4,
|
||||
button, input, label {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Balance text wrapping on headings */
|
||||
h1, h2,
|
||||
h3, h4 {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input, button,
|
||||
textarea, select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* Make sure textareas without a rows attribute are not tiny */
|
||||
textarea:not([rows]) {
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
/* Anything that has been anchored to should have extra scroll margin */
|
||||
:target {
|
||||
scroll-margin-block: 5ex;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<script>
|
||||
(function() {
|
||||
function clickConfirmAddEventListener(element, index, array) {
|
||||
element.addEventListener('click', (e) => {
|
||||
const result = confirm('{{ $alert }}');
|
||||
if (! result) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
let clickConfirm = document.querySelectorAll('.click-confirm');
|
||||
if (clickConfirm.length > 0) {
|
||||
clickConfirm.forEach(clickConfirmAddEventListener);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@@ -0,0 +1,5 @@
|
||||
@section('meta_title', __('admin-sections.Dashboard'))
|
||||
@section('h1', __('admin-sections.Dashboard'))
|
||||
<x-layout.admin>
|
||||
|
||||
</x-layout.admin>
|
||||
@@ -0,0 +1,7 @@
|
||||
@csrf
|
||||
<x-volt.forms.input :title="__('validation.attributes.name')" name="name" type="text" :value="$role->name" required autofocus />
|
||||
<x-volt.forms.permissions_for_role :title="__('validation.attributes.permissions')" name="permissions[]" :value="$role->permissions->pluck('permission')->toArray()" :role="$role" />
|
||||
<x-volt.forms.input :title="__('validation.attributes.code')" name="code" type="text" :value="$role->code" :disabled="!empty($role->id)" required />
|
||||
@canany(['create', 'update'], $role)
|
||||
<button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
|
||||
@endcanany
|
||||
@@ -0,0 +1,8 @@
|
||||
@can('create', \App\Models\Role::class)
|
||||
<div class="mb-4">
|
||||
<a href="{{ route('admin.roles.create') }}" class="btn btn-secondary d-inline-flex align-items-center me-2">
|
||||
<svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
|
||||
{{ __('Create') }}
|
||||
</a>
|
||||
</div>
|
||||
@endcan
|
||||
16
app/application/resources/views/admin/roles/create.blade.php
Normal file
16
app/application/resources/views/admin/roles/create.blade.php
Normal file
@@ -0,0 +1,16 @@
|
||||
@section('meta_title', __('admin-sections.User group'))
|
||||
@section('h1', __('admin-sections.User group'))
|
||||
<x-layout.admin>
|
||||
@include('admin.roles._top')
|
||||
<div class="row">
|
||||
<div class="col-12 mb-4">
|
||||
<div class="card border-0 shadow components-section">
|
||||
<div class="card-body">
|
||||
<form method="post" action="{{ route('admin.roles.store') }}">
|
||||
@include('admin.roles._from')
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-layout.admin>
|
||||
17
app/application/resources/views/admin/roles/edit.blade.php
Normal file
17
app/application/resources/views/admin/roles/edit.blade.php
Normal file
@@ -0,0 +1,17 @@
|
||||
@section('meta_title', __('admin-sections.User group'))
|
||||
@section('h1', __('admin-sections.User group'))
|
||||
<x-layout.admin>
|
||||
@include('admin.roles._top')
|
||||
<div class="row">
|
||||
<div class="col-12 mb-4">
|
||||
<div class="card border-0 shadow components-section">
|
||||
<div class="card-body">
|
||||
<form method="post" action="{{ route('admin.roles.update', $role) }}">
|
||||
@method('PUT')
|
||||
@include('admin.roles._from')
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-layout.admin>
|
||||
54
app/application/resources/views/admin/roles/index.blade.php
Normal file
54
app/application/resources/views/admin/roles/index.blade.php
Normal file
@@ -0,0 +1,54 @@
|
||||
@section('meta_title', __('admin-sections.User group'))
|
||||
@section('h1', __('admin-sections.User group'))
|
||||
<x-layout.admin>
|
||||
@include('admin.roles._top')
|
||||
<div class="card border-0 shadow mb-4">
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-centered table-nowrap mb-0 rounded">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th class="border-0">{{ __('validation.attributes.name') }}</th>
|
||||
<th class="border-0">{{ __('validation.attributes.code') }}</th>
|
||||
<th class="border-0 rounded-end" style="width: 150px"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($roles as $role)
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ route('admin.roles.edit', $role) }}" class="fw-bold">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="align-text-top" viewBox="0 0 16 16">
|
||||
<path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
|
||||
</svg>
|
||||
{{ $role->name }}
|
||||
</a>
|
||||
</td>
|
||||
<td>{{ $role->code }}</td>
|
||||
<td>
|
||||
@if($role->is_remove)
|
||||
@can('delete', $role)
|
||||
<form method="post" action="{{ route('admin.roles.destroy', $role) }}">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn btn-danger click-confirm">
|
||||
{{ __('Delete') }}
|
||||
</button>
|
||||
</form>
|
||||
@endcan
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-footer border-0">
|
||||
{{ $roles->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@push('scripts')
|
||||
@include('_scripts._click-confirm', ['alert' => __('Do you want to delete?')])
|
||||
@endpush
|
||||
</x-layout.admin>
|
||||
14
app/application/resources/views/admin/users/_from.blade.php
Normal file
14
app/application/resources/views/admin/users/_from.blade.php
Normal file
@@ -0,0 +1,14 @@
|
||||
@csrf
|
||||
<x-volt.forms.checkbox :title="__('validation.attributes.is_active')" name="is_active" checkboxValue="1" notCheckedValue="0" :userValue="(string) $user->is_active" />
|
||||
<x-volt.forms.input :title="__('validation.attributes.name')" name="name" type="text" :value="$user->name" required autofocus />
|
||||
<x-volt.forms.input :title="__('validation.attributes.email')" name="email" type="email" :value="$user->email" required />
|
||||
<x-volt.forms.input :title="__('validation.attributes.username')" name="username" type="text" allowed-characters="a-z0-9.-_" :example="'test-1 ' . __('or') . ' 1.2'" :value="$user->username" required />
|
||||
@if (empty($user->id))
|
||||
<x-volt.forms.input :title="__('validation.attributes.password')" name="password" type="password" value="" required autocomplete="off" />
|
||||
@endif
|
||||
<hr>
|
||||
<x-volt.forms.multi_checkbox :title="__('validation.attributes.roles')" name="roles[]" :list="$roles" :value="$userRoles" />
|
||||
<hr>
|
||||
@canany(['create', 'update'], $user)
|
||||
<button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
|
||||
@endcanany
|
||||
@@ -0,0 +1,8 @@
|
||||
@can('create', \App\Models\User::class)
|
||||
<div class="mb-4">
|
||||
<a href="{{ route('admin.users.create') }}" class="btn btn-secondary d-inline-flex align-items-center me-2">
|
||||
<svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
|
||||
{{ __('Create') }}
|
||||
</a>
|
||||
</div>
|
||||
@endcan
|
||||
16
app/application/resources/views/admin/users/create.blade.php
Normal file
16
app/application/resources/views/admin/users/create.blade.php
Normal file
@@ -0,0 +1,16 @@
|
||||
@section('meta_title', __('admin-sections.Users'))
|
||||
@section('h1', __('admin-sections.Users'))
|
||||
<x-layout.admin>
|
||||
@include('admin.users._top')
|
||||
<div class="row">
|
||||
<div class="col-12 mb-4">
|
||||
<div class="card border-0 shadow components-section">
|
||||
<div class="card-body">
|
||||
<form method="post" action="{{ route('admin.users.store') }}">
|
||||
@include('admin.users._from')
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-layout.admin>
|
||||
34
app/application/resources/views/admin/users/edit.blade.php
Normal file
34
app/application/resources/views/admin/users/edit.blade.php
Normal file
@@ -0,0 +1,34 @@
|
||||
@section('meta_title', __('admin-sections.Users'))
|
||||
@section('h1', __('admin-sections.Users'))
|
||||
<x-layout.admin>
|
||||
@include('admin.users._top')
|
||||
<div class="row">
|
||||
<div class="col-12 mb-4">
|
||||
<div class="card border-0 shadow components-section">
|
||||
<div class="card-body">
|
||||
<form method="post" action="{{ route('admin.users.update', $user) }}">
|
||||
@method('PUT')
|
||||
@include('admin.users._from')
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@can('update', $user)
|
||||
<div class="row">
|
||||
<div class="col-12 mb-4">
|
||||
<div class="card border-0 shadow components-section">
|
||||
<div class="card-body">
|
||||
<form method="post" action="{{ route('admin.users.update-password', $user) }}">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
<x-volt.forms.input :title="__('validation.attributes.password')" name="password" type="password" value="" required autocomplete="off" />
|
||||
<button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcan
|
||||
</x-layout.admin>
|
||||
52
app/application/resources/views/admin/users/index.blade.php
Normal file
52
app/application/resources/views/admin/users/index.blade.php
Normal file
@@ -0,0 +1,52 @@
|
||||
@section('meta_title', __('admin-sections.Users'))
|
||||
@section('h1', __('admin-sections.Users'))
|
||||
<x-layout.admin>
|
||||
@include('admin.users._top')
|
||||
<div class="card border-0 shadow mb-4">
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-centered table-nowrap mb-0 rounded">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th class="border-0">{{ __('validation.attributes.name') }}</th>
|
||||
<th class="border-0">{{ __('validation.attributes.email') }}</th>
|
||||
<th class="border-0 rounded-end" style="width: 150px"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($users as $user)
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ route('admin.users.edit', $user) }}" class="fw-bold">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="align-text-top" viewBox="0 0 16 16">
|
||||
<path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
|
||||
</svg>
|
||||
{{ $user->name }}
|
||||
</a>
|
||||
</td>
|
||||
<td>{{ $user->email }}</td>
|
||||
<td>
|
||||
@can('delete', $user)
|
||||
<form method="post" action="{{ route('admin.users.destroy', $user) }}">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn btn-danger click-confirm">
|
||||
{{ __('Delete') }}
|
||||
</button>
|
||||
</form>
|
||||
@endcan
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-footer border-0">
|
||||
{{ $users->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@push('scripts')
|
||||
@include('_scripts._click-confirm', ['alert' => __('Do you want to delete?')])
|
||||
@endpush
|
||||
</x-layout.admin>
|
||||
@@ -0,0 +1,12 @@
|
||||
<div class="form-check">
|
||||
@if(!is_null($notCheckedValue))
|
||||
<input type="hidden" name="{{ $name }}" value="{{ $notCheckedValue }}">
|
||||
@endif
|
||||
<input class="form-check-input {{ $attributes->get('class') }} @error($requestName) is-invalid @enderror" name="{{ $name }}" type="checkbox" value="{{ $checkboxValue }}" @checked($checkboxValue === $userValue) id="form-checkbox-{{ $requestName }}" {{ $attributes }}>
|
||||
<label class="form-check-label" for="form-checkbox-{{ $requestName }}">
|
||||
{{ $title }}
|
||||
</label>
|
||||
@error($name)
|
||||
<span class="invalid-feedback">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
<div class="form-block">
|
||||
<label for="form-input-{{ $requestName }}">
|
||||
{{ $title }}
|
||||
@if($attributes->get('required'))
|
||||
<span>{{ __('site.required field') }}</span>
|
||||
@endif
|
||||
</label>
|
||||
<input id="form-input-{{ $requestName }}" class="form-control @error($requestName) is-invalid @enderror" name="{{ $name }}" type="{{ $type }}" @if($type !== 'password') value="{{ $value }}" @endif {{ $attributes }}>
|
||||
@error($requestName)
|
||||
<span class="invalid-feedback">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
<div class="form-block">
|
||||
<label for="form-select-{{ $requestName }}">{{ $title }}</label>
|
||||
<select id="form-select-{{ $requestName }}" aria-label="{{ $title }}" class="form-control @error($requestName) is-invalid @enderror" name="{{ $name }}" {{ $attributes }}>
|
||||
{{ $slot }}
|
||||
@foreach($list as $elementKey => $elementValue)
|
||||
<option value="{{ $elementKey }}" @selected((string) $elementKey === (string) $value)>{{ $elementValue }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error($requestName)
|
||||
<span class="invalid-feedback">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
<div class="form-check">
|
||||
@if(!is_null($notCheckedValue))
|
||||
<input type="hidden" name="{{ $name }}" value="{{ $notCheckedValue }}">
|
||||
@endif
|
||||
<input class="form-check-input {{ $attributes->get('class') }} @error($requestName) is-invalid @enderror" name="{{ $name }}" type="checkbox" value="{{ $checkboxValue }}" @checked($checkboxValue === $userValue) id="form-checkbox-{{ $requestName }}" {{ $attributes }}>
|
||||
<label class="form-check-label" for="form-checkbox-{{ $requestName }}">
|
||||
{{ $title }}
|
||||
</label>
|
||||
@error($name)
|
||||
<span class="invalid-feedback d-block">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
<div class="mb-4">
|
||||
@if(!empty($title) || !empty($example) || !empty($allowedCharacters))
|
||||
<label for="form-input-{{ $requestName }}">{{ $title }}
|
||||
@if(!empty($allowedCharacters))
|
||||
<span class="label__example">({{ __('allowed characters:') }} <strong>{{ $allowedCharacters }}</strong>)</span>
|
||||
@endif
|
||||
@if(!empty($example))
|
||||
<span class="label__example">({{ __('example:') }} {!! $example !!})</span>
|
||||
@endif
|
||||
</label>
|
||||
@endif
|
||||
<input id="form-input-{{ $requestName }}" class="form-control {{ $attributes->get('class') }} @error($requestName) is-invalid @enderror" name="{{ $name }}" type="{{ $type }}" @if($type !== 'password') value="{{ $value }}" @endif {{ $attributes }}>
|
||||
@error($requestName)
|
||||
<span class="invalid-feedback">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
<div class="mb-4">
|
||||
<div class="h5 pb-3">{{ $title }}</div>
|
||||
@error($requestName)
|
||||
<span class="invalid-feedback d-block pb-3">{{ $message }}</span>
|
||||
@enderror
|
||||
<div class="row">
|
||||
@foreach($list as $elementValue => $elementTitle)
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="{{ $name }}" value="{{ $elementValue }}" @checked(array_search($elementValue, $value) !== false) id="form-checkbox-{{ $requestName }}-{{ $loop->index }}">
|
||||
<label class="form-check-label" for="form-checkbox-{{ $requestName }}-{{ $loop->index }}">
|
||||
{{ $elementTitle }}
|
||||
</label>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,24 @@
|
||||
<div class="pt-3">
|
||||
<div class="h5 pb-3">{{ $title }}</div>
|
||||
@error($requestName)
|
||||
<span class="invalid-feedback d-block pb-3">{{ $message }}</span>
|
||||
@enderror
|
||||
@foreach($permissions as $mainPermission)
|
||||
<div class="row ps-3">
|
||||
<div class="mb-3">
|
||||
<span class="h6 fw-bold">{{ $mainPermission->getTitle() }}</span>
|
||||
</div>
|
||||
<ul>
|
||||
@foreach($mainPermission->getPermissions() as $keyPermission => $permission)
|
||||
<li class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="{{ $mainPermission->formatValue($keyPermission) }}" name="{{ $name }}" @checked($role->is_admin || $value->search($mainPermission->formatValue($keyPermission)) !== false) @disabled($role->is_admin) id="form-permission-{{ $requestName }}-{{ $mainPermission->name }}-{{ $keyPermission }}">
|
||||
<label class="form-check-label" for="form-permission-{{ $requestName }}-{{ $mainPermission->name }}-{{ $keyPermission }}">
|
||||
{{ $permission }}
|
||||
</label>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
<hr>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
172
app/application/resources/views/layout/admin.blade.php
Normal file
172
app/application/resources/views/layout/admin.blade.php
Normal file
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<title>@yield('meta_title', '')</title>
|
||||
<meta name="keywords" content="@yield('meta_keywords', '')" />
|
||||
<meta name="description" content="@yield('meta_description', '')" />
|
||||
|
||||
@vite('resources/volt/scss/app.scss')
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-dark navbar-theme-primary px-4 col-12 d-lg-none">
|
||||
<span class="navbar-brand me-lg-5">
|
||||
|
||||
</span>
|
||||
<div class="d-flex align-items-center">
|
||||
<button class="navbar-toggler d-lg-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav id="sidebarMenu" class="sidebar d-lg-block bg-gray-800 text-white collapse" data-simplebar>
|
||||
<div class="sidebar-inner px-lg-2 px-4 pt-3">
|
||||
<div class="user-card d-flex d-md-none align-items-center justify-content-between justify-content-md-center pb-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-lg me-4">
|
||||
<svg class="card-img-top rounded-circle border-white" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<div class="d-block">
|
||||
<h2 class="h5 mb-3">{{ __('Hello') }}, {{ auth()->user()->name ?? '' }}</h2>
|
||||
<form method="post" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<button class="btn btn-secondary btn-sm d-inline-flex align-items-center" type="submit">
|
||||
<svg class="icon icon-xxs me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
|
||||
{{ __('Sign Out') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse-close d-md-none">
|
||||
<a href="#sidebarMenu" data-bs-toggle="collapse"
|
||||
data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="true"
|
||||
aria-label="{{ __('Toggle navigation') }}">
|
||||
<svg class="icon icon-xs" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="nav flex-column pt-3 pt-md-0">
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('home') }}" class="nav-link">
|
||||
<img src="{{ Vite::asset('resources/site/images/logo.png') }}" width="40" height="40" alt="{{ __('site.logo') }}">
|
||||
</a>
|
||||
</li>
|
||||
<li @class([
|
||||
'nav-item',
|
||||
'active' => request()->route()->named('admin.home')
|
||||
])>
|
||||
<a href="{{ route('admin.home') }}" class="nav-link">
|
||||
<span class="sidebar-icon">
|
||||
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
|
||||
</span>
|
||||
<span class="sidebar-text">{{ __('admin-sections.Dashboard') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@can('viewAny', \App\Models\User::class)
|
||||
<li @class([
|
||||
'nav-item',
|
||||
'active' => request()->route()->named('admin.users.*'),
|
||||
])>
|
||||
<a href="{{ route('admin.users.index') }}" class="nav-link">
|
||||
<span class="sidebar-icon">
|
||||
<svg class="icon icon-xs me-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/></svg>
|
||||
</span>
|
||||
<span class="sidebar-text">{{ __('admin-sections.Users') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
@endcan
|
||||
|
||||
@can('viewAny', \App\Models\Role::class)
|
||||
<li @class([
|
||||
'nav-item',
|
||||
'active' => request()->route()->named('admin.roles.*'),
|
||||
])>
|
||||
<a href="{{ route('admin.roles.index') }}" class="nav-link">
|
||||
<span class="sidebar-icon">
|
||||
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path></svg>
|
||||
</span>
|
||||
<span class="sidebar-text">{{ __('admin-sections.User group') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
@endcan
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="content min-vh-100 position-relative pb-7 pb-lg-5">
|
||||
<nav class="navbar navbar-top navbar-expand navbar-dashboard navbar-dark ps-0 pe-2 pb-2 pb-lg-3">
|
||||
<div class="container-fluid px-0">
|
||||
<div class="d-flex justify-content-between w-100" id="navbarSupportedContent">
|
||||
<div class="d-flex align-items-center">
|
||||
<h1 class="h3">@yield('h1', '')</h1>
|
||||
</div>
|
||||
<!-- Navbar links -->
|
||||
<ul class="navbar-nav align-items-center">
|
||||
<li class="nav-item dropdown ms-lg-3">
|
||||
<a class="nav-link dropdown-toggle pt-1 px-0" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<div class="media d-flex align-items-center">
|
||||
<svg class="avatar rounded-circle" fill="#000" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
|
||||
<div class="media-body ms-2 text-dark align-items-center d-none d-lg-block">
|
||||
<span class="mb-0 font-small fw-bold text-gray-900">{{ auth()->user()->name ?? '' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu dashboard-dropdown dropdown-menu-end mt-2 py-1">
|
||||
<a class="dropdown-item d-flex align-items-center" href="{{ route('profile.edit') }}">
|
||||
<svg class="dropdown-icon text-gray-400 me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
|
||||
{{ __('My Profile') }}
|
||||
</a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="{{ route('profile.settings') }}">
|
||||
<svg class="dropdown-icon text-gray-400 me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
|
||||
{{ __('Settings') }}
|
||||
</a>
|
||||
<div role="separator" class="dropdown-divider my-1"></div>
|
||||
<form method="post" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<button class="dropdown-item d-flex align-items-center" type="submit">
|
||||
<svg class="dropdown-icon text-danger me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
|
||||
{{ __('Logout') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@includeWhen($errors->any(), 'layout.admin._errors', ['errors' => $errors->all()])
|
||||
@includeWhen(Session::has('success'), 'layout.admin._success', ['success' => Session::get('success')])
|
||||
|
||||
{{ $slot }}
|
||||
|
||||
<footer class="bg-white shadow p-3 position-absolute start-0 end-0 bottom-0">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4 col-xl-6 mb-4 mb-md-0">
|
||||
<p class="mb-0 text-center text-lg-start">Copyright © 2024-<span class="current-year"></span> <a href="https://git.kor-elf.net/kor-elf/" target="_blank" class="text-gray-700">Leonid Nikitin (kor-elf)</a></p>
|
||||
</div>
|
||||
<div class="col-12 col-md-8 col-xl-6 text-center text-lg-start">
|
||||
<!-- List -->
|
||||
<ul class="list-inline list-group-flush list-group-borderless text-md-end mb-0">
|
||||
<li class="list-inline-item px-0 px-sm-2">
|
||||
<a class="text-gray-700 fw-normal" href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard" target="_blank">Volt - Bootstrap 5 Dashboard Template</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
@vite('resources/volt/js/app.js')
|
||||
@stack('scripts')
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||
<span class="fas fa-bullhorn me-1"></span>
|
||||
<ul>
|
||||
@foreach($errors as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
<button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
@@ -0,0 +1,5 @@
|
||||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
<span class="fas fa-bullhorn me-1"></span>
|
||||
{{ $success }}
|
||||
<button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
96
app/application/resources/views/layout/site.blade.php
Normal file
96
app/application/resources/views/layout/site.blade.php
Normal file
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<title>@yield('meta_title', '')</title>
|
||||
<meta name="keywords" content="@yield('meta_keywords', '')" />
|
||||
<meta name="description" content="@yield('meta_description', '')" />
|
||||
|
||||
<link type="image/png" sizes="16x16" rel="icon" href="{{ Vite::asset('resources/site/images/favicons/favicon-16.png') }}">
|
||||
<link type="image/png" sizes="32x32" rel="icon" href="{{ Vite::asset('resources/site/images/favicons/favicon-32.png') }}">
|
||||
<link type="image/png" sizes="96x96" rel="icon" href="{{ Vite::asset('resources/site/images/favicons/favicon-96.png') }}">
|
||||
<link type="image/png" sizes="120x120" rel="icon" href="{{ Vite::asset('resources/site/images/favicons/favicon-120.png') }}">
|
||||
|
||||
@vite('resources/site/scss/app.scss')
|
||||
</head>
|
||||
<body>
|
||||
<div id="main-container">
|
||||
<header class="header">
|
||||
<div class="container-width header__content">
|
||||
<span class="header__logo">
|
||||
<a href="{{ route('home') }}"><img src="{{ Vite::asset('resources/site/images/logo.png') }}" alt="{{ __('site.logo') }}"></a>
|
||||
</span>
|
||||
<button id="mobile-menu" type="button" aria-label="{{ __('site.Menu') }}">
|
||||
<svg class="open" width="45" height="45" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
|
||||
</svg>
|
||||
<svg class="close" width="45" height="45" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="header__right">
|
||||
@guest
|
||||
<a href="{{ route('login') }}" class="header__right__login">{{ __('Log In') }}</a>
|
||||
@endguest
|
||||
@auth
|
||||
<a href="{{ route('profile.edit') }}" class="header__right__profile">{{ __('Profile') }}</a>
|
||||
<form method="post" action="{{ route('logout') }}" class="header__right__logout-form">
|
||||
@csrf
|
||||
<button class="header__right__logout" type="submit">
|
||||
<svg class="icon icon-xxs me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
|
||||
{{ __('Logout') }}
|
||||
</button>
|
||||
</form>
|
||||
@endauth
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="content">
|
||||
<div class="container-width section-content">
|
||||
<nav id="menu">
|
||||
<div class="menu__title">{{ __('site.Menu') }}</div>
|
||||
<ul>
|
||||
<ul class="menu__profile">
|
||||
@guest
|
||||
<li><a href="{{ route('login') }}" @class(['active' => request()->route()->named(['login'])])>{{ __('Log In') }}</a></li>
|
||||
@endguest
|
||||
@auth
|
||||
@can('AdminPanel')
|
||||
<li><a href="{{ route('admin.home') }}">{{ __('admin-sections.AdminPanel') }}</a></li>
|
||||
@endif
|
||||
<li><a href="{{ route('profile.edit') }}" @class(['active' => request()->route()->named(['profile.edit'])])>{{ __('Profile') }}</a></li>
|
||||
<li><a href="{{ route('profile.settings') }}" @class(['active' => request()->route()->named(['profile.settings'])])>{{ __('Settings') }}</a></li>
|
||||
<li>
|
||||
<form method="post" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<button type="submit" class="menu__profile__logout">
|
||||
{{ __('Logout') }}
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
@endauth
|
||||
</ul>
|
||||
</ul>
|
||||
</nav>
|
||||
<div id="content">
|
||||
<h1>@yield('h1', '')</h1>
|
||||
@includeWhen($errors->any(), 'layout.site._errors', ['errors' => $errors->all()])
|
||||
@includeWhen(Session::has('success'), 'layout.site._success', ['success' => Session::get('success')])
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container-width">
|
||||
<div class="footer__powered"><a href="https://projects.kor-elf.net/mdhub/" target="_blank">{{ __('Powered by MDHub') }}</a></div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@vite('resources/site/js/app.js')
|
||||
@stack('scripts')
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
<div class="alert alert-danger">
|
||||
<ul>
|
||||
@foreach($errors as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="alert alert-success">
|
||||
{{ $success }}
|
||||
</div>
|
||||
23
app/application/resources/views/login.blade.php
Normal file
23
app/application/resources/views/login.blade.php
Normal file
@@ -0,0 +1,23 @@
|
||||
@section('meta_title', __('Log In'))
|
||||
@section('h1', __('Log In'))
|
||||
|
||||
<x-layout.site>
|
||||
<form action="{{ route('authorization') }}" method="post">
|
||||
@csrf
|
||||
<x-site.forms.input :title="__('validation.attributes.email')" name="email" type="email" placeholder="example@company.com" value="" autofocus required />
|
||||
<x-site.forms.input :title="__('validation.attributes.password')" name="password" type="password" value="" required />
|
||||
<x-site.forms.checkbox :title="__('validation.attributes.remember')" name="remember" checkboxValue="1" />
|
||||
|
||||
@if($captcha)
|
||||
<div class="form-block">
|
||||
@captcha
|
||||
@error('captcha-verified')
|
||||
<span class="invalid-feedback">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
@endif
|
||||
<div class="form-block">
|
||||
<button class="button" type="submit">{{ __('Log In') }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</x-layout.site>
|
||||
@@ -0,0 +1,6 @@
|
||||
@section('meta_title', "")
|
||||
@section('h1', "123")
|
||||
|
||||
<x-layout.site>
|
||||
789
|
||||
</x-layout.site>
|
||||
@@ -0,0 +1,25 @@
|
||||
@section('meta_title', __('Profile'))
|
||||
@section('h1', __('Profile'))
|
||||
<x-layout.site>
|
||||
|
||||
<form method="post" action="{{ route('profile.update') }}">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<x-site.forms.input :title="__('validation.attributes.email')" name="email" type="email" :value="$user->email" disabled />
|
||||
<x-site.forms.input :title="__('validation.attributes.username')" name="username" type="text" :value="$user->username" disabled />
|
||||
<x-site.forms.input :title="__('validation.attributes.name')" name="name" type="text" :value="$user->name" required autofocus />
|
||||
<div class="form-block">
|
||||
<button class="button" type="submit">{{ __('Save') }}</button>
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
<form method="post" action="{{ route('profile.update-password') }}">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<x-site.forms.input :title="__('validation.attributes.password')" name="password" type="password" autocomplete="off" required />
|
||||
<x-site.forms.input :title="__('validation.attributes.password_confirmation')" name="password_confirmation" type="password" autocomplete="off" required />
|
||||
<div class="form-block">
|
||||
<button class="button" type="submit">{{ __('Save') }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</x-layout.site>
|
||||
@@ -0,0 +1,17 @@
|
||||
@section('meta_title', __('Settings'))
|
||||
@section('h1', __('Settings'))
|
||||
<x-layout.site>
|
||||
<form method="post" action="{{ route('profile.update-settings') }}">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<x-site.forms.select :title="__('validation.attributes.lang')" name="lang" :list="$languages" :value="$user->lang?->value">
|
||||
<option value="">{{ __('Default') }}</option>
|
||||
</x-site.forms.select>
|
||||
<x-site.forms.select :title="__('validation.attributes.timezone')" name="timezone" :list="$timezone" :value="$user->timezone">
|
||||
<option value="">{{ __('Default') }}</option>
|
||||
</x-site.forms.select>
|
||||
<div class="form-block">
|
||||
<button class="button" type="submit">{{ __('Save') }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</x-layout.site>
|
||||
7
app/application/resources/volt/LICENSE.md
Normal file
7
app/application/resources/volt/LICENSE.md
Normal file
@@ -0,0 +1,7 @@
|
||||
Copyright 2021 Themesberg (Crafty Dwarf LLC)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
2
app/application/resources/volt/js/app.js
Normal file
2
app/application/resources/volt/js/app.js
Normal file
@@ -0,0 +1,2 @@
|
||||
import './bootstrap';
|
||||
import './volt.js';
|
||||
32
app/application/resources/volt/js/bootstrap.js
vendored
Normal file
32
app/application/resources/volt/js/bootstrap.js
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* We'll load the axios HTTP library which allows us to easily issue requests
|
||||
* to our Laravel back-end. This library automatically handles sending the
|
||||
* CSRF token as a header based on the value of the "XSRF" token cookie.
|
||||
*/
|
||||
|
||||
import axios from 'axios';
|
||||
window.axios = axios;
|
||||
|
||||
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
||||
|
||||
/**
|
||||
* Echo exposes an expressive API for subscribing to channels and listening
|
||||
* for events that are broadcast by Laravel. Echo and event broadcasting
|
||||
* allows your team to easily build robust real-time web applications.
|
||||
*/
|
||||
|
||||
// import Echo from 'laravel-echo';
|
||||
|
||||
// import Pusher from 'pusher-js';
|
||||
// window.Pusher = Pusher;
|
||||
|
||||
// window.Echo = new Echo({
|
||||
// broadcaster: 'pusher',
|
||||
// key: import.meta.env.VITE_PUSHER_APP_KEY,
|
||||
// cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
|
||||
// wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
|
||||
// wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
|
||||
// wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
|
||||
// forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
|
||||
// enabledTransports: ['ws', 'wss'],
|
||||
// });
|
||||
90
app/application/resources/volt/js/volt.js
Normal file
90
app/application/resources/volt/js/volt.js
Normal file
@@ -0,0 +1,90 @@
|
||||
/*
|
||||
|
||||
=========================================================
|
||||
* Volt Pro - Premium 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.
|
||||
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
const d = document;
|
||||
|
||||
import * as bootstrap from 'bootstrap';
|
||||
import SmoothScroll from 'smooth-scroll';
|
||||
|
||||
d.addEventListener("DOMContentLoaded", function(event) {
|
||||
|
||||
// options
|
||||
const breakpoints = {
|
||||
sm: 540,
|
||||
md: 720,
|
||||
lg: 960,
|
||||
xl: 1140
|
||||
};
|
||||
|
||||
var sidebar = document.getElementById('sidebarMenu')
|
||||
if(sidebar && d.body.clientWidth < breakpoints.lg) {
|
||||
sidebar.addEventListener('shown.bs.collapse', function () {
|
||||
document.querySelector('body').style.position = 'fixed';
|
||||
});
|
||||
sidebar.addEventListener('hidden.bs.collapse', function () {
|
||||
document.querySelector('body').style.position = 'relative';
|
||||
});
|
||||
}
|
||||
|
||||
[].slice.call(d.querySelectorAll('[data-background]')).map(function(el) {
|
||||
el.style.background = 'url(' + el.getAttribute('data-background') + ')';
|
||||
});
|
||||
|
||||
[].slice.call(d.querySelectorAll('[data-background-lg]')).map(function(el) {
|
||||
if(document.body.clientWidth > breakpoints.lg) {
|
||||
el.style.background = 'url(' + el.getAttribute('data-background-lg') + ')';
|
||||
}
|
||||
});
|
||||
|
||||
[].slice.call(d.querySelectorAll('[data-background-color]')).map(function(el) {
|
||||
el.style.background = 'url(' + el.getAttribute('data-background-color') + ')';
|
||||
});
|
||||
|
||||
[].slice.call(d.querySelectorAll('[data-color]')).map(function(el) {
|
||||
el.style.color = 'url(' + el.getAttribute('data-color') + ')';
|
||||
});
|
||||
|
||||
//Tooltips
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
})
|
||||
|
||||
// Popovers
|
||||
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
||||
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
return new bootstrap.Popover(popoverTriggerEl)
|
||||
})
|
||||
|
||||
// Datepicker
|
||||
var datepickers = [].slice.call(d.querySelectorAll('[data-datepicker]'))
|
||||
var datepickersList = datepickers.map(function (el) {
|
||||
return new Datepicker(el, {
|
||||
buttonClass: 'btn'
|
||||
});
|
||||
})
|
||||
|
||||
var scroll = new SmoothScroll('a[href*="#"]', {
|
||||
speed: 500,
|
||||
speedAsDuration: true
|
||||
});
|
||||
|
||||
if(d.querySelector('.current-year')){
|
||||
d.querySelector('.current-year').textContent = new Date().getFullYear();
|
||||
}
|
||||
});
|
||||
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;
|
||||
88
app/application/resources/volt/scss/app.scss
Normal file
88
app/application/resources/volt/scss/app.scss
Normal file
@@ -0,0 +1,88 @@
|
||||
/*
|
||||
|
||||
=========================================================
|
||||
* 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';
|
||||
|
||||
// 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,16 @@
|
||||
.alert-heading{
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.alert-icon{
|
||||
margin-bottom: .5rem;
|
||||
span{
|
||||
font-size: $alert-icon-font-size;
|
||||
}
|
||||
}
|
||||
.alert__close {
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
right: 0.4rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
@@ -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,41 @@
|
||||
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;
|
||||
}
|
||||
.label__example {
|
||||
color: #6b7280;
|
||||
font-size: 85%;
|
||||
display: inline-block;
|
||||
font-style: italic;
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user