Moved from "app/src" to "app/application".
Otherwise phpstorm doesn't understand the paths correctly. He thinks that this is not a complete application, but a package. And when creating a class, the namespace indicates “app” with a small letter, but should be “App”.
This commit is contained in:
@@ -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-admin.layout>
|
||||
|
||||
</x-admin.layout>
|
||||
@@ -0,0 +1,55 @@
|
||||
<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\Project::class)
|
||||
<li @class([
|
||||
'nav-item',
|
||||
'active' => request()->route()->named('admin.projects.*'),
|
||||
])>
|
||||
<a href="{{ route('admin.projects.index') }}" class="nav-link">
|
||||
<span class="sidebar-icon">
|
||||
<svg class="icon icon-xs me-2" 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="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="sidebar-text">{{ __('admin-sections.Projects') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
@endcan
|
||||
|
||||
@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
|
||||
@@ -0,0 +1,11 @@
|
||||
@csrf
|
||||
<x-volt.forms.checkbox :title="__('validation.attributes.is_public')" name="is_public" checkboxValue="1" notCheckedValue="0" :userValue="(string) $project->is_public" />
|
||||
<x-volt.forms.upload.image :title="__('validation.attributes.logo')" :storage="$project->getStorageOne(\App\Enums\StorageType::Logo)" name="logo" :morph="\App\Enums\Morph::Project" :storageType="\App\Enums\StorageType::Logo" />
|
||||
<x-volt.forms.input :title="__('validation.attributes.name')" name="name" type="text" :value="$project->name" required autofocus />
|
||||
<x-volt.forms.input :title="__('validation.attributes.code')" name="code" type="text" :value="$project->code" required />
|
||||
<x-volt.forms.input :title="__('validation.attributes.http_host')" :example="'<strong>https://localhost.com</strong> ' . __('or') . ' <strong>http://localhost.com:8080</strong>'" name="http_host" type="text" :value="$project->http_host" />
|
||||
<x-volt.forms.languages name="languages" :value="$languages" />
|
||||
|
||||
@canany(['create', 'update'], $project)
|
||||
<button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
|
||||
@endcanany
|
||||
@@ -0,0 +1,8 @@
|
||||
@can('create', \App\Models\Project::class)
|
||||
<div class="mb-4">
|
||||
<a href="{{ route('admin.projects.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
|
||||
@@ -0,0 +1,16 @@
|
||||
@section('meta_title', __('admin-sections.Projects'))
|
||||
@section('h1', __('admin-sections.Projects'))
|
||||
<x-admin.layout>
|
||||
@include('admin.projects._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.projects.store') }}">
|
||||
@include('admin.projects._from')
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-admin.layout>
|
||||
@@ -0,0 +1,17 @@
|
||||
@section('meta_title', __('admin-sections.Projects'))
|
||||
@section('h1', __('admin-sections.Projects'))
|
||||
<x-admin.layout>
|
||||
@include('admin.projects._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.projects.update', $project) }}">
|
||||
@method('PUT')
|
||||
@include('admin.projects._from')
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-admin.layout>
|
||||
@@ -0,0 +1,58 @@
|
||||
@section('meta_title', __('admin-sections.Projects'))
|
||||
@section('h1', __('admin-sections.Projects'))
|
||||
<x-admin.layout>
|
||||
@include('admin.projects._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">{{ __('validation.attributes.http_host') }}</th>
|
||||
<th class="border-0 rounded-end" style="width: 150px"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($projects as $project)
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ route('admin.projects.edit', $project) }}" 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>
|
||||
{{ $project->name }}
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
{{ $project->code }}
|
||||
</td>
|
||||
<td>
|
||||
{{ $project->http_host }}
|
||||
</td>
|
||||
<td>
|
||||
@can('delete', $project)
|
||||
<form method="post" action="{{ route('admin.projects.destroy', $project) }}">
|
||||
@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">
|
||||
{{ $projects->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@push('scripts')
|
||||
@include('admin._scripts._click-confirm', ['alert' => __('Do you want to delete?')])
|
||||
@endpush
|
||||
</x-admin.layout>
|
||||
@@ -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-admin.layout>
|
||||
@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-admin.layout>
|
||||
20
app/application/resources/views/admin/roles/edit.blade.php
Normal file
20
app/application/resources/views/admin/roles/edit.blade.php
Normal file
@@ -0,0 +1,20 @@
|
||||
@section('meta_title', __('admin-sections.User group'))
|
||||
@section('h1', __('admin-sections.User group'))
|
||||
<x-admin.layout>
|
||||
@include('admin.roles._top')
|
||||
<div class="row">
|
||||
@if($role->morph_type)
|
||||
<p>{{ $role->name_with_morph }}</p>
|
||||
@endif
|
||||
<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-admin.layout>
|
||||
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-admin.layout>
|
||||
@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_with_morph }}
|
||||
</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('admin._scripts._click-confirm', ['alert' => __('Do you want to delete?')])
|
||||
@endpush
|
||||
</x-admin.layout>
|
||||
12
app/application/resources/views/admin/users/_from.blade.php
Normal file
12
app/application/resources/views/admin/users/_from.blade.php
Normal file
@@ -0,0 +1,12 @@
|
||||
@csrf
|
||||
<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 />
|
||||
@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-admin.layout>
|
||||
@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-admin.layout>
|
||||
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-admin.layout>
|
||||
@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-admin.layout>
|
||||
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-admin.layout>
|
||||
@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('admin._scripts._click-confirm', ['alert' => __('Do you want to delete?')])
|
||||
@endpush
|
||||
</x-admin.layout>
|
||||
@@ -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 @error($requestName) is-invalid @enderror" name="{{ $name }}" type="checkbox" value="{{ $checkboxValue }}" @checked($checkboxValue === $userValue) id="form-checkbox-{{ $requestName }}">
|
||||
<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,4 @@
|
||||
<input name="{{ $name }}" value="{{ $value }}" type="hidden" {{ $attributes }} />
|
||||
@error($requestName)
|
||||
<span class="invalid-feedback" style="display: block;">{{ $message }}</span>
|
||||
@enderror
|
||||
@@ -0,0 +1,11 @@
|
||||
<div class="mb-4">
|
||||
<label for="form-input-{{ $requestName }}">{{ $title }}
|
||||
@if(!empty($example))
|
||||
<span class="label__example">({{ __('example:') }} {!! $example !!})</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,94 @@
|
||||
<hr>
|
||||
<div class="mb-4">
|
||||
<label>{{ __('Languages') }}</label>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-centered table-nowrap mb-0 rounded table-languages">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th class="border-0 rounded-start">{{ __('validation.attributes.title') }}</th>
|
||||
<th class="border-0">{{ __('validation.attributes.code') }}</th>
|
||||
<th class="border-0">{{ __('validation.attributes.sort') }}</th>
|
||||
<th class="border-0">{{ __('validation.attributes.is_default') }}</th>
|
||||
<th class="border-0 rounded-end"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($value as $index => $lang)
|
||||
<tr class="item-language">
|
||||
@include('components.volt.forms.languages.language', ['index' => $index, 'name' => $name, 'lang' => $lang])
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="5">
|
||||
<input type="hidden" class="language-number" name="{{ $name . '[language-number]' }}" value="{{ old($name . '.language-number', count($value)) }}">
|
||||
<button class="btn btn-outline-primary add-language" type="button">+ {{ __('Add language') }}</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@pushOnce('scripts')
|
||||
<script>
|
||||
(function() {
|
||||
function languagesEventListener(tableLanguage) {
|
||||
let languageIndex = tableLanguage.querySelector('input.language-number'),
|
||||
addBlock = tableLanguage.querySelector('tbody');
|
||||
tableLanguage.querySelector('button.add-language').addEventListener('click', (e) => {
|
||||
++languageIndex.value;
|
||||
axios.post('{{ route('admin.new-language') }}', {
|
||||
_token: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
||||
name: '{{ $name }}',
|
||||
index: Number(languageIndex.value),
|
||||
})
|
||||
.then(response => {
|
||||
let container = document.createElement("tr");
|
||||
container.classList = 'item-language';
|
||||
container.innerHTML = response.data.html;
|
||||
let button = container.querySelector('button.delete');
|
||||
addEventButtonDelete(button, tableLanguage);
|
||||
addBlock.append(container);
|
||||
languagesHideShowButtonDelete(tableLanguage);
|
||||
})
|
||||
.catch(error => {
|
||||
let container = document.createElement("div");
|
||||
container.classList = 'alert alert-danger';
|
||||
container.setAttribute('role', 'alert');
|
||||
container.innerHTML = `{{ __('There was an error adding a language') }}<button type="button" class="btn-close alert__close" data-bs-dismiss="alert"></button>`;
|
||||
e.target.after(container);
|
||||
});
|
||||
});
|
||||
languagesHideShowButtonDelete(tableLanguage, tableLanguage);
|
||||
let buttonsDelete = tableLanguage.querySelectorAll('button.delete');
|
||||
if (buttonsDelete.length > 0) {
|
||||
buttonsDelete.forEach(addEventButtonDelete, tableLanguage);
|
||||
}
|
||||
}
|
||||
|
||||
function addEventButtonDelete(button, tableLanguage) {
|
||||
button.addEventListener('click', (e) => {
|
||||
e.target.parentElement.parentElement.remove();
|
||||
languagesHideShowButtonDelete(tableLanguage);
|
||||
});
|
||||
}
|
||||
|
||||
function languagesHideShowButtonDelete(tableLanguage) {
|
||||
let buttons = tableLanguage.querySelectorAll('button.delete'),
|
||||
display = 'inline-block';
|
||||
if (buttons.length === 1) {
|
||||
display = 'none';
|
||||
}
|
||||
buttons.forEach(function (button) {
|
||||
button.style.display = display;
|
||||
});
|
||||
}
|
||||
|
||||
let languages = document.querySelectorAll('.table-languages');
|
||||
if (languages.length > 0) {
|
||||
languages.forEach(languagesEventListener);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@endPushOnce
|
||||
@@ -0,0 +1,4 @@
|
||||
<input class="form-control @error(\App\Helpers\Helpers::formatAttributeNameToRequestName($name)) is-invalid @enderror" name="{{ $name }}" type="{{ $type }}" value="{{ $value }}" required>
|
||||
@error(\App\Helpers\Helpers::formatAttributeNameToRequestName($name))
|
||||
<span class="invalid-feedback">{{ $message }}</span>
|
||||
@enderror
|
||||
@@ -0,0 +1,34 @@
|
||||
<td>
|
||||
@if(isset($lang['id']))
|
||||
<input type="hidden" name="{{ $name . '[items][' .$index . '][id]' }}" value="{{ $lang['id'] }}">
|
||||
@endif
|
||||
@include('components.volt.forms.languages.input', [
|
||||
'value' => $lang['title'],
|
||||
'name' => $name . '[items][' .$index . '][title]',
|
||||
'type' => 'text',
|
||||
])
|
||||
</td>
|
||||
<td>
|
||||
@include('components.volt.forms.languages.input', [
|
||||
'value' => $lang['code'],
|
||||
'name' => $name . '[items][' . $index . '][code]',
|
||||
'type' => 'text',
|
||||
])
|
||||
</td>
|
||||
<td>
|
||||
@include('components.volt.forms.languages.input', [
|
||||
'value' => $lang['sort'],
|
||||
'name' => $name . '[items][' . $index . '][sort]',
|
||||
'type' => 'number',
|
||||
])
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
@include('components.volt.forms.languages.radio', [
|
||||
'value' => $index,
|
||||
'checked' => $lang['is_default'],
|
||||
'name' => $name . '[default]',
|
||||
])
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-danger delete" type="button">X</button>
|
||||
</td>
|
||||
@@ -0,0 +1,4 @@
|
||||
<input class="form-check-input @error(\App\Helpers\Helpers::formatAttributeNameToRequestName($name)) is-invalid @enderror" type="radio" @checked($checked) name="{{ $name }}" value="{{ $value }}">
|
||||
@error(\App\Helpers\Helpers::formatAttributeNameToRequestName($name))
|
||||
<span class="invalid-feedback">{{ $message }}</span>
|
||||
@enderror
|
||||
@@ -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>
|
||||
@@ -0,0 +1,12 @@
|
||||
<div class="mb-4">
|
||||
<label for="form-select-{{ $requestName }}">{{ $title }}</label>
|
||||
<select id="form-select-{{ $requestName }}" aria-label="{{ $title }}" class="form-select @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,32 @@
|
||||
<div class="upload-image mt-3 mb-4 rounded border border-1 p-3" data-morph="{{ $morph->value }}" data-storage-type="{{ $storageType->value }}" data-accepted-files="{{
|
||||
$acceptedFiles->map(function (string $name) {
|
||||
return '.' . $name;
|
||||
})->implode(',')
|
||||
}}">
|
||||
<label>{{ $title }}</label>
|
||||
<div>
|
||||
<div class="mb-3 add-image" @if(\is_null($storage?->id)) style="display: none;" @endif>
|
||||
<div class="position-relative d-inline-block">
|
||||
<img class="img-fluid" src="{{ $storage->url ?? '' }}">
|
||||
<button class="btn btn-danger m-0 add-image__remove position-absolute top-0 end-0" type="button">X</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary upload-image__button" type="button">{{ __('Select images') }} ({{ $acceptedFiles->implode(', ') }})</button>
|
||||
<div class="progress-wrapper" style="display: none">
|
||||
<div class="progress-info">
|
||||
<div class="progress-label">
|
||||
<span class="text-success">{{ __('loading') }}</span>
|
||||
</div>
|
||||
<div class="progress-percentage">
|
||||
<span class="upload-image__progressbar-text">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="invalid-feedback upload-image__error"></span>
|
||||
<x-volt.forms.input-type-hidden :name="$name . '[file]'" class="save" :value="$storage->id ?? ''" />
|
||||
<x-volt.forms.input-type-hidden :name="$name . '[delete]'" class="delete" value="0" />
|
||||
</div>
|
||||
28
app/application/resources/views/layout/auth.blade.php
Normal file
28
app/application/resources/views/layout/auth.blade.php
Normal file
@@ -0,0 +1,28 @@
|
||||
<!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="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<!-- Section -->
|
||||
<section class="vh-lg-100 mt-5 mt-lg-0 bg-soft d-flex align-items-center">
|
||||
<div class="container">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@vite('resources/volt/js/app.js')
|
||||
</body>
|
||||
</html>
|
||||
135
app/application/resources/views/layout/private.blade.php
Normal file
135
app/application/resources/views/layout/private.blade.php
Normal file
@@ -0,0 +1,135 @@
|
||||
<!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('admin.home') }}" class="nav-link d-flex align-items-center">
|
||||
<span class="mt-1 ms-1 sidebar-text">{!! __('Create a website for the project') !!}</span>
|
||||
</a>
|
||||
</li>
|
||||
@if(!empty($navigation))
|
||||
@include($navigation)
|
||||
@endif
|
||||
</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.private._errors', ['errors' => $errors->all()])
|
||||
@includeWhen(Session::has('success'), 'layout.private._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>
|
||||
63
app/application/resources/views/login.blade.php
Normal file
63
app/application/resources/views/login.blade.php
Normal file
@@ -0,0 +1,63 @@
|
||||
@section('meta_title', __('Sign in to our platform'))
|
||||
<x-auth-layout>
|
||||
<div class="row justify-content-center form-bg-image" data-background-lg="{{ Vite::asset('resources/volt/images/illustrations/signin.svg') }}">
|
||||
<div class="col-12 d-flex align-items-center justify-content-center">
|
||||
<div class="bg-white shadow border-0 rounded border-light p-4 p-lg-5 w-100 fmxw-500">
|
||||
<div class="text-center text-md-center mb-4 mt-md-0">
|
||||
<h1 class="mb-0 h3">{{ __('Sign in to our platform') }}</h1>
|
||||
</div>
|
||||
@if ($errors->any())
|
||||
<div class="alert alert-danger">
|
||||
<ul>
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
<form action="{{ route('authorization') }}" class="mt-4" method="post">
|
||||
@csrf
|
||||
<!-- Form -->
|
||||
<div class="form-group mb-4">
|
||||
<label for="email">{{ __('Your Email') }}</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="basic-addon1">
|
||||
<svg class="icon icon-xs text-gray-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
|
||||
</span>
|
||||
<input type="email" name="email" class="form-control" placeholder="example@company.com" id="email" autofocus required>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of Form -->
|
||||
<div class="form-group">
|
||||
<!-- Form -->
|
||||
<div class="form-group mb-4">
|
||||
<label for="password">{{ __('Your Password') }}</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="basic-addon2">
|
||||
<svg class="icon icon-xs text-gray-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
|
||||
</span>
|
||||
<input type="password" name="password" placeholder="Password" class="form-control" id="password" required>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of Form -->
|
||||
<div class="d-flex justify-content-between align-items-top mb-4">
|
||||
<div class="form-check">
|
||||
<input name="remember" type="hidden" value="0">
|
||||
<input class="form-check-input" name="remember" type="checkbox" value="1" id="remember">
|
||||
<label class="form-check-label mb-0" for="remember">
|
||||
{{ __('Remember me') }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group mb-4">
|
||||
@captcha
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-gray-800">{{ __('Sign in') }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-auth-layout>
|
||||
@@ -0,0 +1,34 @@
|
||||
@can('AdminPanel')
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('admin.home') }}" class="nav-link">
|
||||
<span class="sidebar-icon">
|
||||
<svg class="icon icon-xs me-2" 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.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="sidebar-text">{{ __('admin-sections.AdminPanel') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
<li @class([
|
||||
'nav-item',
|
||||
'active' => request()->route()->named('profile.edit'),
|
||||
])>
|
||||
<a href="{{ route('profile.edit') }}" 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 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>
|
||||
</span>
|
||||
<span class="sidebar-text">{{ __('My Profile') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li @class([
|
||||
'nav-item',
|
||||
'active' => request()->route()->named('profile.settings'),
|
||||
])>
|
||||
<a href="{{ route('profile.settings') }}" 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 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>
|
||||
</span>
|
||||
<span class="sidebar-text">{{ __('Settings') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -0,0 +1,34 @@
|
||||
@section('meta_title', __('My Profile'))
|
||||
@section('h1', __('My Profile'))
|
||||
<x-private.layout>
|
||||
<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('profile.update') }}">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<x-volt.forms.input :title="__('validation.attributes.email')" name="email" type="email" :value="$user->email" disabled required />
|
||||
<x-volt.forms.input :title="__('validation.attributes.name')" name="name" type="text" :value="$user->name" required autofocus />
|
||||
<button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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('profile.update-password') }}">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<x-volt.forms.input :title="__('validation.attributes.password')" name="password" type="password" required />
|
||||
<x-volt.forms.input :title="__('validation.attributes.password_confirmation')" name="password_confirmation" type="password" required />
|
||||
<button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-private.layout>
|
||||
@@ -0,0 +1,23 @@
|
||||
@section('meta_title', __('Settings'))
|
||||
@section('h1', __('Settings'))
|
||||
<x-private.layout>
|
||||
<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('profile.update-settings') }}">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<x-volt.forms.select :title="__('validation.attributes.lang')" name="lang" :list="$languages" :value="$user->lang?->value">
|
||||
<option value="">{{ __('Default') }}</option>
|
||||
</x-volt.forms.select>
|
||||
<x-volt.forms.select :title="__('validation.attributes.timezone')" name="timezone" :list="$timezone" :value="$user->timezone">
|
||||
<option value="">{{ __('Default') }}</option>
|
||||
</x-volt.forms.select>
|
||||
<button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-private.layout>
|
||||
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.
|
||||
2332
app/application/resources/volt/images/illustrations/signin.svg
Normal file
2332
app/application/resources/volt/images/illustrations/signin.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 64 KiB |
6
app/application/resources/volt/js/app.js
Normal file
6
app/application/resources/volt/js/app.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import.meta.glob([
|
||||
'../images/**',
|
||||
]);
|
||||
import './bootstrap';
|
||||
import './volt.js';
|
||||
import './image.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'],
|
||||
// });
|
||||
81
app/application/resources/volt/js/image.js
Normal file
81
app/application/resources/volt/js/image.js
Normal file
@@ -0,0 +1,81 @@
|
||||
import Dropzone from "dropzone";
|
||||
|
||||
let elementImage = document.querySelectorAll('.upload-image');
|
||||
if (elementImage.length > 0) {
|
||||
elementImage.forEach(addDropzoneImage);
|
||||
}
|
||||
function addDropzoneImage(element) {
|
||||
let blockError = element.querySelector('.upload-image__error'),
|
||||
blockProgressBar = element.querySelector('.progress-wrapper'),
|
||||
progressBarText = blockProgressBar.querySelector('.upload-image__progressbar-text'),
|
||||
progressBar = blockProgressBar.querySelector('.progress-bar'),
|
||||
storageType = element.dataset.storageType,
|
||||
morph = element.dataset.morph,
|
||||
imageBlock = element.querySelector('.add-image');
|
||||
|
||||
imageBlock.querySelector('button.add-image__remove').addEventListener('click', (e) => {
|
||||
element.querySelector('input.save').value = '';
|
||||
element.querySelector('input.delete').value = 1;
|
||||
imageBlock.style.display = 'none';
|
||||
});
|
||||
|
||||
let myDropzone = new Dropzone(element.querySelector('button.upload-image__button'), {
|
||||
url: "/storage/image/upload-resize",
|
||||
uploadMultiple: false,
|
||||
parallelUploads: 1,
|
||||
maxFiles: 1,
|
||||
acceptedFiles: element.dataset.acceptedFiles,
|
||||
sending: function (file, response, formData) {
|
||||
blockError.textContent = '';
|
||||
blockError.style.display = 'none';
|
||||
formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);
|
||||
formData.append('storage_type', storageType);
|
||||
formData.append('morph', morph);
|
||||
blockProgressBar.style.display = 'block';
|
||||
},
|
||||
thumbnail: function(file, dataUrl) {
|
||||
|
||||
},
|
||||
addedfile: function(file) {
|
||||
|
||||
},
|
||||
totaluploadprogress: function(progress) {
|
||||
progressBarText.textContent = progress + '%';
|
||||
progressBar.style.width = progress + '%';
|
||||
progressBar.setAttribute('aria-valuenow', progress);
|
||||
},
|
||||
complete: function(file) {
|
||||
this.removeFile(file);
|
||||
|
||||
progressBarText.textContent = '0%';
|
||||
progressBar.style.width = '0%';
|
||||
progressBar.setAttribute('aria-valuenow', 0);
|
||||
blockProgressBar.style.display = 'none';
|
||||
},
|
||||
success: function (file, image) {
|
||||
imageBlock.querySelector('img').setAttribute('src', image.url);
|
||||
element.querySelector('input.save').value = image.id;
|
||||
element.querySelector('input.delete').value = 0;
|
||||
imageBlock.style.display = 'block';
|
||||
},
|
||||
error: function (file, response) {
|
||||
let message = '';
|
||||
|
||||
if (response.errors) {
|
||||
for (let errorKey in response.errors) {
|
||||
message += response.errors[errorKey] + '<br>'
|
||||
}
|
||||
if(response.message) {
|
||||
message += response.message + '<br>'
|
||||
}
|
||||
} else if(response.message) {
|
||||
message += response.message + '<br>'
|
||||
} else {
|
||||
message += response + '<br>'
|
||||
}
|
||||
|
||||
blockError.innerHTML = message;
|
||||
blockError.style.display = 'block';
|
||||
},
|
||||
});
|
||||
}
|
||||
364
app/application/resources/volt/js/volt.js
Normal file
364
app/application/resources/volt/js/volt.js
Normal file
@@ -0,0 +1,364 @@
|
||||
/*
|
||||
|
||||
=========================================================
|
||||
* 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 Swal from 'sweetalert2';
|
||||
import SmoothScroll from 'smooth-scroll';
|
||||
import Chartist from 'chartist';
|
||||
import 'chartist-plugin-tooltips';
|
||||
|
||||
d.addEventListener("DOMContentLoaded", function(event) {
|
||||
|
||||
const swalWithBootstrapButtons = Swal.mixin({
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary me-3',
|
||||
cancelButton: 'btn btn-gray'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
|
||||
var themeSettingsEl = document.getElementById('theme-settings');
|
||||
var themeSettingsExpandEl = document.getElementById('theme-settings-expand');
|
||||
|
||||
if(themeSettingsEl) {
|
||||
|
||||
var themeSettingsCollapse = new bootstrap.Collapse(themeSettingsEl, {
|
||||
show: true,
|
||||
toggle: false
|
||||
});
|
||||
|
||||
if (window.localStorage.getItem('settings_expanded') === 'true') {
|
||||
themeSettingsCollapse.show();
|
||||
themeSettingsExpandEl.classList.remove('show');
|
||||
} else {
|
||||
themeSettingsCollapse.hide();
|
||||
themeSettingsExpandEl.classList.add('show');
|
||||
}
|
||||
|
||||
themeSettingsEl.addEventListener('hidden.bs.collapse', function () {
|
||||
themeSettingsExpandEl.classList.add('show');
|
||||
window.localStorage.setItem('settings_expanded', false);
|
||||
});
|
||||
|
||||
themeSettingsExpandEl.addEventListener('click', function () {
|
||||
themeSettingsExpandEl.classList.remove('show');
|
||||
window.localStorage.setItem('settings_expanded', true);
|
||||
setTimeout(function() {
|
||||
themeSettingsCollapse.show();
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
|
||||
// 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';
|
||||
});
|
||||
}
|
||||
|
||||
var iconNotifications = d.querySelector('.notification-bell');
|
||||
if (iconNotifications) {
|
||||
iconNotifications.addEventListener('shown.bs.dropdown', function () {
|
||||
iconNotifications.classList.remove('unread');
|
||||
});
|
||||
}
|
||||
|
||||
[].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'
|
||||
});
|
||||
})
|
||||
|
||||
if(d.querySelector('.input-slider-container')) {
|
||||
[].slice.call(d.querySelectorAll('.input-slider-container')).map(function(el) {
|
||||
var slider = el.querySelector(':scope .input-slider');
|
||||
var sliderId = slider.getAttribute('id');
|
||||
var minValue = slider.getAttribute('data-range-value-min');
|
||||
var maxValue = slider.getAttribute('data-range-value-max');
|
||||
|
||||
var sliderValue = el.querySelector(':scope .range-slider-value');
|
||||
var sliderValueId = sliderValue.getAttribute('id');
|
||||
var startValue = sliderValue.getAttribute('data-range-value-low');
|
||||
|
||||
var c = d.getElementById(sliderId),
|
||||
id = d.getElementById(sliderValueId);
|
||||
|
||||
noUiSlider.create(c, {
|
||||
start: [parseInt(startValue)],
|
||||
connect: [true, false],
|
||||
//step: 1000,
|
||||
range: {
|
||||
'min': [parseInt(minValue)],
|
||||
'max': [parseInt(maxValue)]
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (d.getElementById('input-slider-range')) {
|
||||
var c = d.getElementById("input-slider-range"),
|
||||
low = d.getElementById("input-slider-range-value-low"),
|
||||
e = d.getElementById("input-slider-range-value-high"),
|
||||
f = [d, e];
|
||||
|
||||
noUiSlider.create(c, {
|
||||
start: [parseInt(low.getAttribute('data-range-value-low')), parseInt(e.getAttribute('data-range-value-high'))],
|
||||
connect: !0,
|
||||
tooltips: true,
|
||||
range: {
|
||||
min: parseInt(c.getAttribute('data-range-value-min')),
|
||||
max: parseInt(c.getAttribute('data-range-value-max'))
|
||||
}
|
||||
}), c.noUiSlider.on("update", function (a, b) {
|
||||
f[b].textContent = a[b]
|
||||
});
|
||||
}
|
||||
|
||||
//Chartist
|
||||
|
||||
if(d.querySelector('.ct-chart-sales-value')) {
|
||||
//Chart 5
|
||||
new Chartist.Line('.ct-chart-sales-value', {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
series: [
|
||||
[0, 10, 30, 40, 80, 60, 100]
|
||||
]
|
||||
}, {
|
||||
low: 0,
|
||||
showArea: true,
|
||||
fullWidth: true,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
],
|
||||
axisX: {
|
||||
// On the x-axis start means top and end means bottom
|
||||
position: 'end',
|
||||
showGrid: true
|
||||
},
|
||||
axisY: {
|
||||
// On the y-axis start means left and end means right
|
||||
showGrid: false,
|
||||
showLabel: false,
|
||||
labelInterpolationFnc: function(value) {
|
||||
return '$' + (value / 1) + 'k';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if(d.querySelector('.ct-chart-ranking')) {
|
||||
var chart = new Chartist.Bar('.ct-chart-ranking', {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
series: [
|
||||
[1, 5, 2, 5, 4, 3],
|
||||
[2, 3, 4, 8, 1, 2],
|
||||
]
|
||||
}, {
|
||||
low: 0,
|
||||
showArea: true,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
],
|
||||
axisX: {
|
||||
// On the x-axis start means top and end means bottom
|
||||
position: 'end'
|
||||
},
|
||||
axisY: {
|
||||
// On the y-axis start means left and end means right
|
||||
showGrid: false,
|
||||
showLabel: false,
|
||||
offset: 0
|
||||
}
|
||||
});
|
||||
|
||||
chart.on('draw', function(data) {
|
||||
if(data.type === 'line' || data.type === 'area') {
|
||||
data.element.animate({
|
||||
d: {
|
||||
begin: 2000 * data.index,
|
||||
dur: 2000,
|
||||
from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
|
||||
to: data.path.clone().stringify(),
|
||||
easing: Chartist.Svg.Easing.easeOutQuint
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if(d.querySelector('.ct-chart-traffic-share')) {
|
||||
var data = {
|
||||
series: [70, 20, 10]
|
||||
};
|
||||
|
||||
var sum = function(a, b) { return a + b };
|
||||
|
||||
new Chartist.Pie('.ct-chart-traffic-share', data, {
|
||||
labelInterpolationFnc: function(value) {
|
||||
return Math.round(value / data.series.reduce(sum) * 100) + '%';
|
||||
},
|
||||
low: 0,
|
||||
high: 8,
|
||||
donut: true,
|
||||
donutWidth: 20,
|
||||
donutSolid: true,
|
||||
fullWidth: false,
|
||||
showLabel: false,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
if (d.getElementById('loadOnClick')) {
|
||||
d.getElementById('loadOnClick').addEventListener('click', function () {
|
||||
var button = this;
|
||||
var loadContent = d.getElementById('extraContent');
|
||||
var allLoaded = d.getElementById('allLoadedText');
|
||||
|
||||
button.classList.add('btn-loading');
|
||||
button.setAttribute('disabled', 'true');
|
||||
|
||||
setTimeout(function () {
|
||||
loadContent.style.display = 'block';
|
||||
button.style.display = 'none';
|
||||
allLoaded.style.display = 'block';
|
||||
}, 1500);
|
||||
});
|
||||
}
|
||||
|
||||
var scroll = new SmoothScroll('a[href*="#"]', {
|
||||
speed: 500,
|
||||
speedAsDuration: true
|
||||
});
|
||||
|
||||
if(d.querySelector('.current-year')){
|
||||
d.querySelector('.current-year').textContent = new Date().getFullYear();
|
||||
}
|
||||
|
||||
// Glide JS
|
||||
|
||||
if (d.querySelector('.glide')) {
|
||||
new Glide('.glide', {
|
||||
type: 'carousel',
|
||||
startAt: 0,
|
||||
perView: 3
|
||||
}).mount();
|
||||
}
|
||||
|
||||
if (d.querySelector('.glide-testimonials')) {
|
||||
new Glide('.glide-testimonials', {
|
||||
type: 'carousel',
|
||||
startAt: 0,
|
||||
perView: 1,
|
||||
autoplay: 2000
|
||||
}).mount();
|
||||
}
|
||||
|
||||
if (d.querySelector('.glide-clients')) {
|
||||
new Glide('.glide-clients', {
|
||||
type: 'carousel',
|
||||
startAt: 0,
|
||||
perView: 5,
|
||||
autoplay: 2000
|
||||
}).mount();
|
||||
}
|
||||
|
||||
if (d.querySelector('.glide-news-widget')) {
|
||||
new Glide('.glide-news-widget', {
|
||||
type: 'carousel',
|
||||
startAt: 0,
|
||||
perView: 1,
|
||||
autoplay: 2000
|
||||
}).mount();
|
||||
}
|
||||
|
||||
if (d.querySelector('.glide-autoplay')) {
|
||||
new Glide('.glide-autoplay', {
|
||||
type: 'carousel',
|
||||
startAt: 0,
|
||||
perView: 3,
|
||||
autoplay: 2000
|
||||
}).mount();
|
||||
}
|
||||
|
||||
// Pricing countup
|
||||
var billingSwitchEl = d.getElementById('billingSwitch');
|
||||
if(billingSwitchEl) {
|
||||
const countUpStandard = new countUp.CountUp('priceStandard', 99, { startVal: 199 });
|
||||
const countUpPremium = new countUp.CountUp('pricePremium', 199, { startVal: 299 });
|
||||
|
||||
billingSwitchEl.addEventListener('change', function() {
|
||||
if(billingSwitch.checked) {
|
||||
countUpStandard.start();
|
||||
countUpPremium.start();
|
||||
} else {
|
||||
countUpStandard.reset();
|
||||
countUpPremium.reset();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
1
app/application/resources/volt/scss/_variables.scss
Normal file
1
app/application/resources/volt/scss/_variables.scss
Normal file
@@ -0,0 +1 @@
|
||||
$primary: #0d6efd;
|
||||
89
app/application/resources/volt/scss/app.scss
Normal file
89
app/application/resources/volt/scss/app.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
/*
|
||||
|
||||
=========================================================
|
||||
* Volt - Free Bootstrap 5 Dashboard
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard
|
||||
* Copyright 2021 Themesberg (https://www.themesberg.com)
|
||||
|
||||
* Designed and coded by https://themesberg.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Please contact us to request a removal. Contact us if you want to remove it.
|
||||
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||
|
||||
// update variables here
|
||||
@import "variables";
|
||||
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "volt/variables";
|
||||
|
||||
// Third party
|
||||
@import 'vanillajs-datepicker/sass/datepicker.scss';
|
||||
@import "chartist/dist/scss/chartist.scss";
|
||||
|
||||
// Bootstrap
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
// Modify utilities here
|
||||
@import "volt/utilities";
|
||||
|
||||
// Bootstrap Layout & components
|
||||
@import "bootstrap/scss/root";
|
||||
@import "bootstrap/scss/reboot";
|
||||
@import "bootstrap/scss/type";
|
||||
@import "bootstrap/scss/images";
|
||||
@import "bootstrap/scss/containers";
|
||||
@import "bootstrap/scss/grid";
|
||||
@import "bootstrap/scss/tables";
|
||||
@import "bootstrap/scss/forms";
|
||||
@import "bootstrap/scss/buttons";
|
||||
@import "bootstrap/scss/transitions";
|
||||
@import "bootstrap/scss/dropdown";
|
||||
@import "bootstrap/scss/button-group";
|
||||
@import "bootstrap/scss/nav";
|
||||
@import "bootstrap/scss/navbar";
|
||||
@import "bootstrap/scss/card";
|
||||
@import "bootstrap/scss/accordion";
|
||||
@import "bootstrap/scss/breadcrumb";
|
||||
@import "bootstrap/scss/pagination";
|
||||
@import "bootstrap/scss/badge";
|
||||
@import "bootstrap/scss/alert";
|
||||
@import "bootstrap/scss/progress";
|
||||
@import "bootstrap/scss/list-group";
|
||||
@import "bootstrap/scss/close";
|
||||
@import "bootstrap/scss/toasts";
|
||||
@import "bootstrap/scss/modal";
|
||||
@import "bootstrap/scss/tooltip";
|
||||
@import "bootstrap/scss/popover";
|
||||
@import "bootstrap/scss/carousel";
|
||||
@import "bootstrap/scss/spinners";
|
||||
|
||||
// Helpers
|
||||
@import "bootstrap/scss/helpers";
|
||||
|
||||
// Utilities
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
// scss-docs-end import-stack
|
||||
|
||||
// volt mixins & functions
|
||||
@import "volt/mixins";
|
||||
@import "volt/functions";
|
||||
|
||||
// Layout
|
||||
@import "volt/layout";
|
||||
|
||||
// Components
|
||||
@import "volt/components";
|
||||
|
||||
// Forms
|
||||
@import "volt/forms";
|
||||
|
||||
// write your custom styles here!
|
||||
30
app/application/resources/volt/scss/volt/_components.scss
Normal file
30
app/application/resources/volt/scss/volt/_components.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
@import "components/body";
|
||||
@import "components/accordions";
|
||||
@import "components/animations";
|
||||
@import "components/alerts";
|
||||
@import "components/avatars";
|
||||
@import "components/badge";
|
||||
@import "components/buttons";
|
||||
@import "components/breadcrumb";
|
||||
@import "components/card";
|
||||
@import "components/carousel";
|
||||
@import "components/close";
|
||||
@import "components/custom-forms";
|
||||
@import "components/charts";
|
||||
@import "components/dropdown";
|
||||
@import "components/icons";
|
||||
@import "components/images";
|
||||
@import "components/list-group";
|
||||
@import "components/modal";
|
||||
@import "components/nav";
|
||||
@import "components/pagination";
|
||||
@import "components/popover";
|
||||
@import "components/progress";
|
||||
@import "components/shapes";
|
||||
@import "components/datepicker";
|
||||
@import "components/steps";
|
||||
@import "components/tables";
|
||||
@import "components/type";
|
||||
@import "components/timelines";
|
||||
@import "components/tooltip";
|
||||
@import "components/scrollbar";
|
||||
4
app/application/resources/volt/scss/volt/_forms.scss
Normal file
4
app/application/resources/volt/scss/volt/_forms.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import "forms/form-control";
|
||||
@import "forms/form-check";
|
||||
@import "forms/input-group";
|
||||
@import "forms/form-select";
|
||||
23
app/application/resources/volt/scss/volt/_functions.scss
Executable file
23
app/application/resources/volt/scss/volt/_functions.scss
Executable file
@@ -0,0 +1,23 @@
|
||||
// Retrieve color Sass maps
|
||||
|
||||
@function section-color($key: "primary") {
|
||||
@return map-get($section-colors, $key);
|
||||
}
|
||||
|
||||
// Lines colors
|
||||
|
||||
@function shapes-primary-color($key: "step-1-gradient-bg") {
|
||||
@return map-get($shapes-primary-colors, $key);
|
||||
}
|
||||
|
||||
@function shapes-default-color($key: "step-1-gradient-bg") {
|
||||
@return map-get($shapes-default-colors, $key);
|
||||
}
|
||||
|
||||
@function lines-light-color($key: "step-1-gradient-bg") {
|
||||
@return map-get($shapes-light-colors, $key);
|
||||
}
|
||||
|
||||
@function shapes-dark-color($key: "step-1-gradient-bg") {
|
||||
@return map-get($shapes-dark-colors, $key);
|
||||
}
|
||||
5
app/application/resources/volt/scss/volt/_layout.scss
Normal file
5
app/application/resources/volt/scss/volt/_layout.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@import "layout/navbar";
|
||||
@import "layout/section";
|
||||
@import "layout/footer";
|
||||
@import "layout/sidebar";
|
||||
@import "layout/sidenav";
|
||||
7
app/application/resources/volt/scss/volt/_mixins.scss
Executable file
7
app/application/resources/volt/scss/volt/_mixins.scss
Executable file
@@ -0,0 +1,7 @@
|
||||
@import "mixins/animations";
|
||||
@import "mixins/background-variant";
|
||||
@import "mixins/icon";
|
||||
@import "mixins/modals";
|
||||
@import "mixins/popover";
|
||||
@import "mixins/transform";
|
||||
@import "mixins/utilities";
|
||||
95
app/application/resources/volt/scss/volt/_utilities.scss
Executable file
95
app/application/resources/volt/scss/volt/_utilities.scss
Executable file
@@ -0,0 +1,95 @@
|
||||
// check docs https://v5.getbootstrap.com/docs/5.0/utilities/api/
|
||||
|
||||
$utilities: map-merge(
|
||||
$utilities,
|
||||
(
|
||||
"blur": (
|
||||
property: backdrop-filter,
|
||||
class: blur,
|
||||
values: (
|
||||
0: blur(0),
|
||||
1: blur(1px),
|
||||
2: blur(2px),
|
||||
3: blur(3px),
|
||||
4: blur(4px),
|
||||
5: blur(5px),
|
||||
6: blur(6px),
|
||||
7: blur(7px),
|
||||
8: blur(8px),
|
||||
9: blur(91px),
|
||||
10: blur(10px),
|
||||
11: blur(11px),
|
||||
12: blur(12px),
|
||||
13: blur(13px),
|
||||
14: blur(14px),
|
||||
),
|
||||
),
|
||||
"opacity": (
|
||||
property: opacity,
|
||||
class: o,
|
||||
values: (
|
||||
0: 0,
|
||||
25: 0.25,
|
||||
50: 0.5,
|
||||
75: 0.75,
|
||||
100: 1,
|
||||
),
|
||||
),
|
||||
"z-index": (
|
||||
property: z-index,
|
||||
class: z,
|
||||
values: (
|
||||
0: 0,
|
||||
1: 1,
|
||||
2: 2,
|
||||
3: 3,
|
||||
999: 999,
|
||||
),
|
||||
),
|
||||
"viewport-height": (
|
||||
property: height,
|
||||
class: vh,
|
||||
responsive: true,
|
||||
values: (
|
||||
100: 100vh,
|
||||
),
|
||||
),
|
||||
"font-weight": (
|
||||
property: font-weight,
|
||||
class: fw,
|
||||
values: (
|
||||
light: $font-weight-light,
|
||||
lighter: $font-weight-lighter,
|
||||
normal: $font-weight-normal,
|
||||
bold: $font-weight-bold,
|
||||
bolder: $font-weight-bolder,
|
||||
extrabold: $font-weight-extrabold,
|
||||
black: $font-weight-black,
|
||||
),
|
||||
),
|
||||
"max-width": (
|
||||
property: max-width,
|
||||
class: fmxw,
|
||||
values: (
|
||||
100: 100px,
|
||||
200: 200px,
|
||||
300: 300px,
|
||||
400: 400px,
|
||||
500: 500px,
|
||||
999: 999px,
|
||||
),
|
||||
),
|
||||
"min-height": (
|
||||
property: min-height,
|
||||
class: fmxh,
|
||||
values: (
|
||||
100: 100px,
|
||||
200: 200px,
|
||||
300: 300px,
|
||||
400: 400px,
|
||||
500: 500px,
|
||||
999: 999px,
|
||||
),
|
||||
),
|
||||
)
|
||||
);
|
||||
1660
app/application/resources/volt/scss/volt/_variables.scss
Normal file
1660
app/application/resources/volt/scss/volt/_variables.scss
Normal file
File diff suppressed because it is too large
Load Diff
6
app/application/resources/volt/scss/volt/_vendor.scss
Normal file
6
app/application/resources/volt/scss/volt/_vendor.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
// Vendor
|
||||
@import "vendor/headroom";
|
||||
@import "vendor/nouislider";
|
||||
@import "vendor/prism";
|
||||
@import "vendor/chartist/chartist";
|
||||
@import "vendor/datepicker";
|
||||
52
app/application/resources/volt/scss/volt/components/_accordions.scss
Executable file
52
app/application/resources/volt/scss/volt/components/_accordions.scss
Executable file
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* = Accordions
|
||||
*/
|
||||
|
||||
|
||||
.accordion-button {
|
||||
text-align: left;
|
||||
&:not(.collapsed) {
|
||||
&::after {
|
||||
background-image: none;
|
||||
@include transform(rotateZ(45deg));
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion icon
|
||||
&::after {
|
||||
background-image: none;
|
||||
content: '\f067';
|
||||
font-family: $font-awesome-5;
|
||||
font-size: $font-size-base;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Flush accordion items
|
||||
//
|
||||
// Remove borders and border-radius to keep accordion items edge-to-edge.
|
||||
|
||||
.accordion-flush {
|
||||
.accordion-button {
|
||||
background-color: transparent;
|
||||
&:not(.collapsed) {
|
||||
color: $tertiary;
|
||||
}
|
||||
&:focus {
|
||||
border-color: $gray-300;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.accordion-collapse {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
36
app/application/resources/volt/scss/volt/mixins/_popover.scss
Executable file
36
app/application/resources/volt/scss/volt/mixins/_popover.scss
Executable file
@@ -0,0 +1,36 @@
|
||||
@mixin popover-variant($background) {
|
||||
|
||||
background-color: $background;
|
||||
|
||||
.popover-header {
|
||||
background-color: $background;
|
||||
color: color-yiq($background);
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
color: color-yiq($background);
|
||||
}
|
||||
.popover-header{
|
||||
border-color: rgba($background, .2);
|
||||
}
|
||||
&.bs-popover-top {
|
||||
.arrow::after {
|
||||
border-top-color: $background;
|
||||
}
|
||||
}
|
||||
&.bs-popover-end {
|
||||
.arrow::after {
|
||||
border-right-color: $background;
|
||||
}
|
||||
}
|
||||
&.bs-popover-bottom {
|
||||
.arrow::after {
|
||||
border-bottom-color: $background;
|
||||
}
|
||||
}
|
||||
&.bs-popover-start {
|
||||
.arrow::after {
|
||||
border-left-color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
19
app/application/resources/volt/scss/volt/mixins/_transform.scss
Executable file
19
app/application/resources/volt/scss/volt/mixins/_transform.scss
Executable file
@@ -0,0 +1,19 @@
|
||||
|
||||
@mixin transform($transforms) {
|
||||
-moz-transform: $transforms;
|
||||
-o-transform: $transforms;
|
||||
-ms-transform: $transforms;
|
||||
-webkit-transform: $transforms;
|
||||
transform: $transforms;
|
||||
}
|
||||
|
||||
|
||||
// translate
|
||||
@mixin translate ($x, $y) {
|
||||
@include transform(translate($x, $y));
|
||||
}
|
||||
|
||||
// rotate
|
||||
@mixin rotate ($deg) {
|
||||
@include transform(rotate(#{$deg}deg));
|
||||
}
|
||||
123
app/application/resources/volt/scss/volt/mixins/_utilities.scss
Normal file
123
app/application/resources/volt/scss/volt/mixins/_utilities.scss
Normal file
@@ -0,0 +1,123 @@
|
||||
@mixin filter($filter) {
|
||||
-webkit-filter: #{$filter};
|
||||
-moz-filter: #{$filter};
|
||||
-ms-filter: #{$filter};
|
||||
-o-filter: #{$filter};
|
||||
filter: #{$filter};
|
||||
}
|
||||
|
||||
@mixin backface-visibility($value) {
|
||||
-webkit-backface-visibility: $value;
|
||||
-moz-backface-visibility: $value;
|
||||
-o-backface-visibility: $value;
|
||||
backface-visibility: $value;
|
||||
}
|
||||
|
||||
@mixin transform-style($value) {
|
||||
-webkit-transform-style: $value;
|
||||
-moz-transform-style: $value;
|
||||
-o-transform-style: $value;
|
||||
transform-style: $value;
|
||||
}
|
||||
|
||||
@mixin perspective($value) {
|
||||
-webkit-perspective: $value;
|
||||
-moz-perspective: $value;
|
||||
-o-perspective: $value;
|
||||
perspective: $value;
|
||||
}
|
||||
|
||||
@mixin display-flex() {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@mixin flex($values) {
|
||||
-webkit-box-flex: $values;
|
||||
-moz-box-flex: $values;
|
||||
-webkit-flex: $values;
|
||||
-ms-flex: $values;
|
||||
flex: $values;
|
||||
}
|
||||
|
||||
@mixin flex-direction($direction) {
|
||||
-webkit-flex-direction: $direction;
|
||||
-moz-flex-direction: $direction;
|
||||
-ms-flex-direction: $direction;
|
||||
flex-direction: $direction;
|
||||
}
|
||||
|
||||
@mixin flex-wrap($wrap) {
|
||||
-webkit-flex-wrap: $wrap;
|
||||
-moz-flex-wrap: $wrap;
|
||||
-ms-flex-wrap: $wrap;
|
||||
flex-wrap: $wrap;
|
||||
}
|
||||
|
||||
@mixin flex-flow($flow) {
|
||||
-webkit-flex-flow: $flow;
|
||||
-moz-flex-flow: $flow;
|
||||
-ms-flex-flow: $flow;
|
||||
flex-flow: $flow;
|
||||
}
|
||||
|
||||
@mixin order($val) {
|
||||
-webkit-box-ordinal-group: $val;
|
||||
-moz-box-ordinal-group: $val;
|
||||
-ms-flex-order: $val;
|
||||
-webkit-order: $val;
|
||||
order: $val;
|
||||
}
|
||||
|
||||
@mixin flex-grow($grow) {
|
||||
-webkit-flex-grow: $grow;
|
||||
-moz-flex-grow: $grow;
|
||||
-ms-flex-grow: $grow;
|
||||
flex-grow: $grow;
|
||||
}
|
||||
|
||||
@mixin flex-shrink($shrink) {
|
||||
-webkit-flex-shrink: $shrink;
|
||||
-moz-flex-shrink: $shrink;
|
||||
-ms-flex-shrink: $shrink;
|
||||
flex-shrink: $shrink;
|
||||
}
|
||||
|
||||
@mixin flex-basis($width) {
|
||||
-webkit-flex-basis: $width;
|
||||
-moz-flex-basis: $width;
|
||||
-ms-flex-basis: $width;
|
||||
flex-basis: $width;
|
||||
}
|
||||
|
||||
@mixin justify-content($justify) {
|
||||
-webkit-justify-content: $justify;
|
||||
-moz-justify-content: $justify;
|
||||
-ms-justify-content: $justify;
|
||||
justify-content: $justify;
|
||||
-ms-flex-pack: $justify;
|
||||
}
|
||||
|
||||
@mixin align-content($align) {
|
||||
-webkit-align-content: $align;
|
||||
-moz-align-content: $align;
|
||||
-ms-align-content: $align;
|
||||
align-content: $align;
|
||||
}
|
||||
|
||||
@mixin align-items($align) {
|
||||
-webkit-align-items: $align;
|
||||
-moz-align-items: $align;
|
||||
-ms-align-items: $align;
|
||||
align-items: $align;
|
||||
}
|
||||
|
||||
@mixin align-self($align) {
|
||||
-webkit-align-self: $align;
|
||||
-moz-align-self: $align;
|
||||
-ms-align-self: $align;
|
||||
align-self: $align;
|
||||
}
|
||||
Reference in New Issue
Block a user