Версия 0.9.0 #7
No files matched your search
+1
-1
@@ -1,4 +1,4 @@
|
||||
DOCKER_NGINX_PORT=8080
|
||||
DOCKER_WEB_PORT=8080
|
||||
DOCKER_WEBSOCKET_PORT=8081
|
||||
DOCKER_DB_PORT=3306
|
||||
MYSQL_ROOT_PASSWORD=root_pass
|
||||
|
||||
@@ -13,5 +13,4 @@ interface Image
|
||||
public function addText(string $text, int $x, int $y, float $size, float $angle, string $hexColor, string $fontName): Coordinators;
|
||||
public function addLine(int $x1, int $y1, int $x2, int $y2, string $hexColor): self;
|
||||
public function encode(): string;
|
||||
public function __destruct();
|
||||
}
|
||||
@@ -24,6 +24,9 @@ final class Image implements ImageContract
|
||||
return imagesy($this->image);
|
||||
}
|
||||
|
||||
/**
|
||||
* @throws CaptchaException
|
||||
*/
|
||||
public function insertBackground(string $pathToFile): ImageContract
|
||||
{
|
||||
list($backgroundWidth, $backgroundHeight) = getimagesize($pathToFile);
|
||||
@@ -40,7 +43,6 @@ final class Image implements ImageContract
|
||||
src_width: $backgroundWidth,
|
||||
src_height: $backgroundHeight
|
||||
);
|
||||
imagedestroy($background);
|
||||
|
||||
return $this;
|
||||
}
|
||||
@@ -101,10 +103,9 @@ final class Image implements ImageContract
|
||||
);
|
||||
}
|
||||
|
||||
public function __destruct() {
|
||||
imagedestroy($this->image);
|
||||
}
|
||||
|
||||
/**
|
||||
* @throws CaptchaException
|
||||
*/
|
||||
private function createImageFromPathToFile(string $pathToFile): \GdImage
|
||||
{
|
||||
return match (mime_content_type($pathToFile)) {
|
||||
|
||||
@@ -20,8 +20,6 @@ final class CaptchaVerificationInformation extends JsonResource
|
||||
*/
|
||||
public function toArray(Request $request): array
|
||||
{
|
||||
$info = [];
|
||||
|
||||
return [
|
||||
'status' => $this->resource->isStatus(),
|
||||
'message' => $this->resource->getMessage(),
|
||||
|
||||
+7
-42
@@ -1,53 +1,18 @@
|
||||
#!/usr/bin/env php
|
||||
<?php
|
||||
|
||||
use Illuminate\Foundation\Application;
|
||||
use Symfony\Component\Console\Input\ArgvInput;
|
||||
|
||||
define('LARAVEL_START', microtime(true));
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Register The Auto Loader
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Composer provides a convenient, automatically generated class loader
|
||||
| for our application. We just need to utilize it! We'll require it
|
||||
| into the script here so that we do not have to worry about the
|
||||
| loading of any of our classes manually. It's great to relax.
|
||||
|
|
||||
*/
|
||||
|
||||
// Register the Composer autoloader...
|
||||
require __DIR__.'/vendor/autoload.php';
|
||||
|
||||
// Bootstrap Laravel and handle the command...
|
||||
/** @var Application $app */
|
||||
$app = require_once __DIR__.'/bootstrap/app.php';
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Run The Artisan Application
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| When we run the console application, the current CLI command will be
|
||||
| executed in this console and the response sent back to a terminal
|
||||
| or another output device for the developers. Here goes nothing!
|
||||
|
|
||||
*/
|
||||
|
||||
$kernel = $app->make(Illuminate\Contracts\Console\Kernel::class);
|
||||
|
||||
$status = $kernel->handle(
|
||||
$input = new Symfony\Component\Console\Input\ArgvInput,
|
||||
new Symfony\Component\Console\Output\ConsoleOutput
|
||||
);
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Shutdown The Application
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Once Artisan has finished running, we will fire off the shutdown events
|
||||
| so that any final work may be done by the application before we shut
|
||||
| down the process. This is the last thing to happen to the request.
|
||||
|
|
||||
*/
|
||||
|
||||
$kernel->terminate($input, $status);
|
||||
$status = $app->handleCommand(new ArgvInput);
|
||||
|
||||
exit($status);
|
||||
@@ -1,27 +1,28 @@
|
||||
{
|
||||
"$schema": "https://getcomposer.org/schema.json",
|
||||
"name": "laravel/laravel",
|
||||
"type": "project",
|
||||
"description": "The Laravel Framework.",
|
||||
"keywords": ["framework", "laravel"],
|
||||
"description": "The skeleton application for the Laravel framework.",
|
||||
"keywords": ["laravel", "framework"],
|
||||
"license": "MIT",
|
||||
"require": {
|
||||
"php": "^8.3",
|
||||
"guzzlehttp/guzzle": "^7.2",
|
||||
"kor-elf/captcha-rule-for-laravel": "^1.0",
|
||||
"laravel/framework": "^11.0",
|
||||
"laravel/reverb": "@beta",
|
||||
"laravel/sanctum": "^4.0",
|
||||
"laravel/tinker": "^2.8"
|
||||
"kor-elf/captcha-rule-for-laravel": "*",
|
||||
"laravel/framework": "^13.17",
|
||||
"laravel/reverb": "^1.12",
|
||||
"laravel/sanctum": "*",
|
||||
"laravel/tinker": "^3.0",
|
||||
"ext-gd": "*",
|
||||
"ext-fileinfo": "*"
|
||||
},
|
||||
"require-dev": {
|
||||
"fakerphp/faker": "^1.9.1",
|
||||
"laravel-lang/common": "^3.1",
|
||||
"laravel/pint": "^1.0",
|
||||
"laravel/sail": "^1.18",
|
||||
"mockery/mockery": "^1.4.4",
|
||||
"nunomaduro/collision": "^8.1",
|
||||
"phpunit/phpunit": "^10.5",
|
||||
"spatie/laravel-ignition": "^2.0"
|
||||
"fakerphp/faker": "^1.23",
|
||||
"laravel/pail": "^1.2.5",
|
||||
"laravel/pao": "^1.0.6",
|
||||
"laravel/pint": "^1.27",
|
||||
"mockery/mockery": "^1.6",
|
||||
"nunomaduro/collision": "^8.6",
|
||||
"phpunit/phpunit": "^12.5.12"
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
@@ -36,6 +37,22 @@
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"setup": [
|
||||
"composer install",
|
||||
"@php -r \"file_exists('.env') || copy('.env.example', '.env');\"",
|
||||
"@php artisan key:generate",
|
||||
"@php artisan migrate --force",
|
||||
"npm install --ignore-scripts",
|
||||
"npm run build"
|
||||
],
|
||||
"dev": [
|
||||
"Composer\\Config::disableProcessTimeout",
|
||||
"@php artisan dev"
|
||||
],
|
||||
"test": [
|
||||
"@php artisan config:clear --ansi @no_additional_args",
|
||||
"@php artisan test"
|
||||
],
|
||||
"post-autoload-dump": [
|
||||
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
|
||||
"@php artisan package:discover --ansi"
|
||||
@@ -47,7 +64,12 @@
|
||||
"@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
|
||||
],
|
||||
"post-create-project-cmd": [
|
||||
"@php artisan key:generate --ansi"
|
||||
"@php artisan key:generate --ansi",
|
||||
"@php -r \"file_exists('database/database.sqlite') || touch('database/database.sqlite');\"",
|
||||
"@php artisan migrate --graceful --ansi"
|
||||
],
|
||||
"pre-package-uninstall": [
|
||||
"Illuminate\\Foundation\\ComposerScripts::prePackageUninstall"
|
||||
]
|
||||
},
|
||||
"extra": {
|
||||
|
||||
Generated
+2234
-2892
File diff suppressed because it is too large.
Load diff
Generated
+3381
-2189
File diff suppressed because it is too large.
Load diff
@@ -1,8 +1,10 @@
|
||||
{
|
||||
"$schema": "https://www.schemastore.org/package.json",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build"
|
||||
"build": "vite build",
|
||||
"dev": "vite"
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.9.2",
|
||||
@@ -19,11 +21,18 @@
|
||||
"waypoints": "^4.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/vite": "^4.0.0",
|
||||
"axios": "^1.1.2",
|
||||
"laravel-echo": "^1.16.1",
|
||||
"laravel-vite-plugin": "^0.7.2",
|
||||
"pusher-js": "^8.4.0-rc2",
|
||||
"concurrently": "^10.0.3",
|
||||
"laravel-echo": "^1.19.0",
|
||||
"laravel-vite-plugin": "^3.1",
|
||||
"pusher-js": "^8.6.0",
|
||||
"sass-loader": "^13.3.2",
|
||||
"vite": "^4.0.0"
|
||||
"tailwindcss": "^4.0.0",
|
||||
"vite": "^8.0.0",
|
||||
"vite-plugin-static-copy": "^4.1.1"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@laravel/multiplex": "^0.4.1"
|
||||
}
|
||||
}
|
||||
@@ -1,55 +1,20 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Contracts\Http\Kernel;
|
||||
use Illuminate\Foundation\Application;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
define('LARAVEL_START', microtime(true));
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Check If The Application Is Under Maintenance
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| If the application is in maintenance / demo mode via the "down" command
|
||||
| we will load this file so that any pre-rendered content can be shown
|
||||
| instead of starting the framework, which could cause an exception.
|
||||
|
|
||||
*/
|
||||
|
||||
// Determine if the application is in maintenance mode...
|
||||
if (file_exists($maintenance = __DIR__.'/../storage/framework/maintenance.php')) {
|
||||
require $maintenance;
|
||||
}
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Register The Auto Loader
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Composer provides a convenient, automatically generated class loader for
|
||||
| this application. We just need to utilize it! We'll simply require it
|
||||
| into the script here so we don't need to manually load our classes.
|
||||
|
|
||||
*/
|
||||
|
||||
// Register the Composer autoloader...
|
||||
require __DIR__.'/../vendor/autoload.php';
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Run The Application
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Once we have the application, we can handle the incoming request using
|
||||
| the application's HTTP kernel. Then, we will send the response back
|
||||
| to this client's browser, allowing them to enjoy our application.
|
||||
|
|
||||
*/
|
||||
|
||||
// Bootstrap Laravel and handle the request...
|
||||
/** @var Application $app */
|
||||
$app = require_once __DIR__.'/../bootstrap/app.php';
|
||||
|
||||
$kernel = $app->make(Kernel::class);
|
||||
|
||||
$response = $kernel->handle(
|
||||
$request = Request::capture()
|
||||
)->send();
|
||||
|
||||
$kernel->terminate($request, $response);
|
||||
$app->handleRequest(Request::capture());
|
||||
@@ -2,7 +2,7 @@
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('home') }}" class="nav-link d-flex align-items-center">
|
||||
<span class="sidebar-icon">
|
||||
<img src="{{ Vite::asset('resources/volt/images/brand/dark.png') }}" height="20" width="20" alt="Captcha service Logo">
|
||||
<img src="{{ Vite::asset('resources/volt-admin/images/brand/dark.png') }}" height="20" width="20" alt="Captcha service Logo">
|
||||
</span>
|
||||
<span class="mt-1 ms-1 sidebar-text">Captcha service</span>
|
||||
</a>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<meta name="keywords" content="@yield('meta_keywords', '')" />
|
||||
<meta name="description" content="@yield('meta_description', '')" />
|
||||
|
||||
@vite('resources/volt/scss/app.scss')
|
||||
@vite('resources/volt-admin/scss/app.scss')
|
||||
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
@@ -16,7 +16,7 @@
|
||||
<body>
|
||||
<nav class="navbar navbar-dark navbar-theme-primary px-4 col-12 d-lg-none">
|
||||
<a class="navbar-brand me-lg-5" href="{{ route('home') }}" aria-label="Captcha service">
|
||||
<img class="navbar-brand-dark" src="{{ Vite::asset('resources/volt/images/brand/dark.png') }}" alt="Captcha service Logo" /> <img class="navbar-brand-light" src="{{ Vite::asset('resources/volt/images/brand/light.png') }}" alt="Captcha service Logo" />
|
||||
<img class="navbar-brand-dark" src="{{ Vite::asset('resources/volt-admin/images/brand/dark.png') }}" alt="Captcha service Logo" /> <img class="navbar-brand-light" src="{{ Vite::asset('resources/volt-admin/images/brand/light.png') }}" alt="Captcha service Logo" />
|
||||
</a>
|
||||
<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') }}">
|
||||
@@ -120,7 +120,7 @@
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
@vite('resources/volt/js/app.js')
|
||||
@vite('resources/volt-admin/js/app.js')
|
||||
@stack('scripts')
|
||||
</body>
|
||||
</html>
|
||||
@@ -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.
|
||||
File renamed without changes.
File renamed without changes.
@@ -0,0 +1,8 @@
|
||||
import.meta.glob([ '../images/**' ], {
|
||||
eager: true,
|
||||
query: '?url'
|
||||
});
|
||||
import './bootstrap';
|
||||
import './echo';
|
||||
import './volt';
|
||||
import './dashboard'
|
||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -0,0 +1,91 @@
|
||||
/*
|
||||
|
||||
=========================================================
|
||||
* Volt Pro - Premium Bootstrap 5 Dashboard
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard
|
||||
* Copyright 2021 Themesberg (https://www.themesberg.com)
|
||||
|
||||
* Designed and coded by https://themesberg.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Please contact us to request a removal. Contact us if you want to remove it.
|
||||
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
const d = document;
|
||||
|
||||
import * as bootstrap from 'bootstrap';
|
||||
import SmoothScroll from 'smooth-scroll';
|
||||
|
||||
d.addEventListener("DOMContentLoaded", function(event) {
|
||||
// options
|
||||
const breakpoints = {
|
||||
sm: 540,
|
||||
md: 720,
|
||||
lg: 960,
|
||||
xl: 1140
|
||||
};
|
||||
|
||||
var sidebar = document.getElementById('sidebarMenu')
|
||||
if(sidebar && d.body.clientWidth < breakpoints.lg) {
|
||||
sidebar.addEventListener('shown.bs.collapse', function () {
|
||||
document.querySelector('body').style.position = 'fixed';
|
||||
});
|
||||
sidebar.addEventListener('hidden.bs.collapse', function () {
|
||||
document.querySelector('body').style.position = 'relative';
|
||||
});
|
||||
}
|
||||
|
||||
[].slice.call(d.querySelectorAll('[data-background]')).map(function(el) {
|
||||
el.style.background = 'url(' + el.getAttribute('data-background') + ')';
|
||||
});
|
||||
|
||||
[].slice.call(d.querySelectorAll('[data-background-lg]')).map(function(el) {
|
||||
if(document.body.clientWidth > breakpoints.lg) {
|
||||
el.style.background = 'url(' + el.getAttribute('data-background-lg') + ')';
|
||||
}
|
||||
});
|
||||
|
||||
[].slice.call(d.querySelectorAll('[data-background-color]')).map(function(el) {
|
||||
el.style.background = 'url(' + el.getAttribute('data-background-color') + ')';
|
||||
});
|
||||
|
||||
[].slice.call(d.querySelectorAll('[data-color]')).map(function(el) {
|
||||
el.style.color = 'url(' + el.getAttribute('data-color') + ')';
|
||||
});
|
||||
|
||||
//Tooltips
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
})
|
||||
|
||||
|
||||
// Popovers
|
||||
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
||||
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
return new bootstrap.Popover(popoverTriggerEl)
|
||||
})
|
||||
|
||||
|
||||
// Datepicker
|
||||
var datepickers = [].slice.call(d.querySelectorAll('[data-datepicker]'))
|
||||
var datepickersList = datepickers.map(function (el) {
|
||||
return new Datepicker(el, {
|
||||
buttonClass: 'btn'
|
||||
});
|
||||
})
|
||||
|
||||
var scroll = new SmoothScroll('a[href*="#"]', {
|
||||
speed: 500,
|
||||
speedAsDuration: true
|
||||
});
|
||||
|
||||
if(d.querySelector('.current-year')){
|
||||
d.querySelector('.current-year').textContent = new Date().getFullYear();
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
$primary: #0d6efd;
|
||||
@@ -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!
|
||||
@@ -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";
|
||||
@@ -0,0 +1,4 @@
|
||||
@import "forms/form-control";
|
||||
@import "forms/form-check";
|
||||
@import "forms/input-group";
|
||||
@import "forms/form-select";
|
||||
@@ -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);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import "layout/navbar";
|
||||
@import "layout/section";
|
||||
@import "layout/footer";
|
||||
@import "layout/sidebar";
|
||||
@import "layout/sidenav";
|
||||
@@ -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";
|
||||
@@ -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,
|
||||
),
|
||||
),
|
||||
)
|
||||
);
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,6 @@
|
||||
// Vendor
|
||||
@import "vendor/headroom";
|
||||
@import "vendor/nouislider";
|
||||
@import "vendor/prism";
|
||||
@import "vendor/chartist/chartist";
|
||||
@import "vendor/datepicker";
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* = Accordions
|
||||
*/
|
||||
|
||||
|
||||
.accordion-button {
|
||||
text-align: left;
|
||||
&:not(.collapsed) {
|
||||
&::after {
|
||||
background-image: none;
|
||||
@include transform(rotateZ(45deg));
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion icon
|
||||
&::after {
|
||||
background-image: none;
|
||||
content: '\f067';
|
||||
font-family: $font-awesome-5;
|
||||
font-size: $font-size-base;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Flush accordion items
|
||||
//
|
||||
// Remove borders and border-radius to keep accordion items edge-to-edge.
|
||||
|
||||
.accordion-flush {
|
||||
.accordion-button {
|
||||
background-color: transparent;
|
||||
&:not(.collapsed) {
|
||||
color: $tertiary;
|
||||
}
|
||||
&:focus {
|
||||
border-color: $gray-300;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.accordion-collapse {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
.alert-heading{
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.alert-icon{
|
||||
margin-bottom: .5rem;
|
||||
span{
|
||||
font-size: $alert-icon-font-size;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
|
||||
/**
|
||||
* = Animations
|
||||
*/
|
||||
|
||||
@for $size from 1 to 10 {
|
||||
.animate-up-#{$size},
|
||||
.animate-right-#{$size},
|
||||
.animate-down-#{$size},
|
||||
.animate-left-#{$size},
|
||||
.scale-up-#{$size},
|
||||
.scale-down-#{$size} {
|
||||
transition: $transition-base;
|
||||
}
|
||||
|
||||
.scale-up-#{$size} {
|
||||
&:hover {
|
||||
transform: scale($size * 0.5555555556);
|
||||
}
|
||||
}
|
||||
|
||||
.scale-up-hover-#{$size} {
|
||||
&:hover {
|
||||
& .scale {
|
||||
transform: scale($size * 0.5555555556);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scale-down-#{$size} {
|
||||
&:hover {
|
||||
transform: scale($size * 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-up-#{$size} {
|
||||
&:hover,
|
||||
.animate-hover:hover & {
|
||||
@include translate(0, -#{$size}px);
|
||||
}
|
||||
}
|
||||
.animate-right-#{$size} {
|
||||
&:hover,
|
||||
.animate-hover:hover & {
|
||||
@include translate(#{$size}px, 0);
|
||||
}
|
||||
}
|
||||
.animate-down-#{$size} {
|
||||
&:hover,
|
||||
.animate-hover:hover & {
|
||||
@include translate(0, #{$size}px);
|
||||
}
|
||||
}
|
||||
.animate-left-#{$size} {
|
||||
&:hover,
|
||||
.animate-hover:hover & {
|
||||
@include translate(-#{$size}px, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Keyframes
|
||||
@keyframes show-navbar-collapse {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.95);
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide-navbar-collapse {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(.95);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-navbar-dropdown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
|
||||
transition: visibility 0.45s, opacity 0.45s, transform 0.45s;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide-navbar-dropdown {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate(0, 10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-dropdown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: perspective(200px) rotateX(-2deg);
|
||||
transition: visibility 0.45s, opacity .5s;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes hide-dropdown {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate(0, 10px);
|
||||
}
|
||||
}
|
||||
|
||||
.bell-shake {
|
||||
&.shaking {
|
||||
animation: bellshake .5s cubic-bezier(.36,.07,.19,.97) both;
|
||||
backface-visibility: hidden;
|
||||
transform-origin: top right;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--animate-duration: 1s;
|
||||
--animate-delay: 1s;
|
||||
--animate-repeat: 1;
|
||||
}
|
||||
|
||||
.animate__animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-duration: var(--animate-duration);
|
||||
animation-duration: var(--animate-duration);
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animate__jackInTheBox {
|
||||
-webkit-animation-name: jackInTheBox;
|
||||
animation-name: jackInTheBox;
|
||||
}
|
||||
|
||||
@keyframes bellshake {
|
||||
0% { transform: rotate(0); }
|
||||
15% { transform: rotate(5deg); }
|
||||
30% { transform: rotate(-5deg); }
|
||||
45% { transform: rotate(4deg); }
|
||||
60% { transform: rotate(-4deg); }
|
||||
75% { transform: rotate(2deg); }
|
||||
85% { transform: rotate(-2deg); }
|
||||
92% { transform: rotate(1deg); }
|
||||
100% { transform: rotate(0); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes jackInTheBox {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.1) rotate(30deg);
|
||||
transform: scale(0.1) rotate(30deg);
|
||||
-webkit-transform-origin: center bottom;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: rotate(-10deg);
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
-webkit-transform: rotate(3deg);
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes jackInTheBox {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.1) rotate(30deg);
|
||||
transform: scale(0.1) rotate(30deg);
|
||||
-webkit-transform-origin: center bottom;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: rotate(-10deg);
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
-webkit-transform: rotate(3deg);
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.animate__jackInTheBox {
|
||||
-webkit-animation-name: jackInTheBox;
|
||||
animation-name: jackInTheBox;
|
||||
}
|
||||
|
||||
[class*=shadow] {
|
||||
transition: all .2s ease;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* = Badges
|
||||
*/
|
||||
|
||||
.badge {
|
||||
font-size:$badge-font-size;
|
||||
font-weight: $badge-font-weight;
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.super-badge{
|
||||
vertical-align: super;
|
||||
}
|
||||
}
|
||||
|
||||
// Variations
|
||||
.badge-pill {
|
||||
padding-right: $badge-pill-padding-x;
|
||||
padding-left: $badge-pill-padding-x;
|
||||
}
|
||||
|
||||
// Multiple inline badges
|
||||
.badge-inline {
|
||||
margin-right: .625rem;
|
||||
|
||||
& + span {
|
||||
top: 2px;
|
||||
position: relative;
|
||||
|
||||
& > a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
.badge-sm {
|
||||
padding: .2rem .6rem;
|
||||
}
|
||||
|
||||
.badge-lg {
|
||||
font-size: $font-size-lg;
|
||||
padding: .35rem .85rem;
|
||||
}
|
||||
|
||||
//button badges
|
||||
|
||||
.btn{
|
||||
.badge-corner{
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: .5rem;
|
||||
transform: translate(50%,50%);
|
||||
margin: 0;
|
||||
border: 3px solid;
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
}
|
||||
}
|
||||
//Tags
|
||||
.wi-tags{
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 0.125rem 0.875rem;
|
||||
margin: 0.25rem;
|
||||
line-height: 2;
|
||||
font-size: $font-size-sm;
|
||||
box-shadow: $box-shadow-sm;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.pixel-pro-badge{
|
||||
position: relative;
|
||||
font-size: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-bold;
|
||||
right: -11px;
|
||||
padding: 4px 12px;
|
||||
top: -30px;
|
||||
background: $white;
|
||||
@include border-radius($border-radius-sm);
|
||||
@include box-shadow($box-shadow-sm);
|
||||
@include media-breakpoint-down(sm){
|
||||
font-size: $font-size-base;
|
||||
right: -13px;
|
||||
padding: 5px 10px;
|
||||
top: -23px;
|
||||
}
|
||||
}
|
||||
|
||||
.subscription-badge {
|
||||
top: -19px;
|
||||
right: -12px;
|
||||
font-size: .75rem;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
strong{
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: $font-weight-bold;
|
||||
margin-bottom:.5rem;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* = Datepickers
|
||||
*/
|
||||
|
||||
.datepicker {
|
||||
|
||||
.datepicker-cell.selected,
|
||||
.datepicker-cell.selected:hover {
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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%);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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));
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,7 +1,5 @@
|
||||
import.meta.glob([
|
||||
'../images/**',
|
||||
]);
|
||||
import './bootstrap';
|
||||
import './echo';
|
||||
import.meta.glob([ '../images/**' ], {
|
||||
eager: true,
|
||||
query: '?url'
|
||||
});
|
||||
import './volt';
|
||||
import './dashboard'
|
||||
@@ -23,10 +23,6 @@
|
||||
@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";
|
||||
|
||||
@@ -6,9 +6,23 @@ export default defineConfig({
|
||||
laravel({
|
||||
input: [
|
||||
'resources/volt/scss/app.scss',
|
||||
'resources/volt/js/app.js'
|
||||
'resources/volt/js/app.js',
|
||||
|
||||
'resources/volt-admin/scss/app.scss',
|
||||
'resources/volt-admin/js/app.js'
|
||||
],
|
||||
refresh: true,
|
||||
}),
|
||||
],
|
||||
define: {
|
||||
global: 'globalThis',
|
||||
},
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
define: {
|
||||
global: 'globalThis',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
+59
-50
@@ -1,25 +1,6 @@
|
||||
FROM docker.io/php:8.3-zts-alpine3.18 AS UNIT_BUILDER
|
||||
FROM docker.io/php:8.5-fpm-alpine3.23 AS php
|
||||
|
||||
ARG UNIT_VERSION=1.31.1
|
||||
|
||||
RUN apk --no-cache add pcre2-dev gcc git musl-dev make && \
|
||||
mkdir -p /usr/lib/unit/modules && \
|
||||
git clone https://github.com/nginx/unit.git && \
|
||||
cd unit && \
|
||||
git checkout $UNIT_VERSION && \
|
||||
./configure --prefix=/var --statedir=/var/lib/unit --runstatedir=/var/run --control=unix:/run/unit/control.unit.sock --log=/var/log/unit.log --user=www-data --group=www-data --tmpdir=/tmp --modulesdir=/var/lib/unit/modules && \
|
||||
./configure php && \
|
||||
make && \
|
||||
make install
|
||||
|
||||
FROM docker.io/php:8.3-zts-alpine3.18 as BUILD
|
||||
|
||||
COPY --from=UNIT_BUILDER /var/sbin/unitd /usr/sbin/unitd
|
||||
COPY --from=UNIT_BUILDER /var/lib/unit/ /var/lib/unit/
|
||||
|
||||
COPY docker/unit-config.json /docker-entrypoint.d/config.json
|
||||
|
||||
RUN apk --no-cache add pcre2 libbz2 libpng libwebp libjpeg-turbo icu-libs freetype oniguruma libzip \
|
||||
RUN apk --no-cache add pcre2 libbz2 libpng libwebp libjpeg-turbo icu-libs freetype oniguruma libzip jq \
|
||||
&& apk add --no-cache --virtual .phpize-deps icu-dev libpng-dev bzip2-dev libwebp-dev libjpeg-turbo-dev freetype-dev oniguruma-dev libzip-dev pcre2-dev ${PHPIZE_DEPS} \
|
||||
&& docker-php-ext-configure intl --enable-intl && \
|
||||
docker-php-ext-configure bcmath --enable-bcmath && \
|
||||
@@ -30,7 +11,7 @@ RUN apk --no-cache add pcre2 libbz2 libpng libwebp libjpeg-turbo icu-libs freety
|
||||
mysqli pdo_mysql \
|
||||
intl mbstring \
|
||||
zip pcntl \
|
||||
exif opcache bz2 \
|
||||
exif bz2 \
|
||||
calendar \
|
||||
&& pear update-channels && pecl update-channels \
|
||||
&& pecl install redis && docker-php-ext-enable redis \
|
||||
@@ -44,77 +25,105 @@ RUN apk --no-cache add pcre2 libbz2 libpng libwebp libjpeg-turbo icu-libs freety
|
||||
&& mkdir -p /tmp/php/upload \
|
||||
&& mkdir -p /tmp/php/sys \
|
||||
&& mkdir -p /tmp/php/session \
|
||||
&& chown -R www-data:www-data /tmp/php \
|
||||
&& ln -sf /dev/stdout /var/log/unit.log \
|
||||
&& addgroup -S unit && adduser -S unit -G unit
|
||||
&& chown -R www-data:www-data /tmp/php
|
||||
|
||||
FROM BUILD as APP_BUILD_FOR_PRODUCTION
|
||||
COPY docker/php/conf/app-fpm.conf /usr/local/etc/php-fpm.d/app-fpm.conf
|
||||
|
||||
FROM docker.io/nginx:1.31-alpine AS nginx
|
||||
|
||||
COPY docker/web/conf/default.conf.template /etc/nginx/templates/default.conf.template
|
||||
COPY docker/web/conf/fastcgi_params /etc/nginx/fastcgi_params
|
||||
COPY docker/web/start.sh /usr/local/bin/start
|
||||
|
||||
RUN chmod 755 /usr/local/bin/start
|
||||
|
||||
FROM nginx AS web_build_for_production
|
||||
|
||||
WORKDIR /home/app
|
||||
COPY application /home/app
|
||||
|
||||
RUN apk --no-cache add git nodejs npm \
|
||||
&& npm install && npm run build \
|
||||
&& rm -rf /home/app/node_modules
|
||||
|
||||
FROM php AS app_build_for_production
|
||||
WORKDIR /home/app
|
||||
|
||||
COPY application /home/app
|
||||
|
||||
RUN apk --no-cache add git nodejs npm \
|
||||
RUN apk --no-cache add git \
|
||||
&& curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer \
|
||||
&& composer install --optimize-autoloader --no-dev \
|
||||
&& npm install && npm run build \
|
||||
&& rm -rf /home/app/node_modules /home/app/.env
|
||||
&& rm -f /home/app/.env
|
||||
|
||||
FROM php AS app_production
|
||||
|
||||
FROM BUILD AS PRODUCTION
|
||||
|
||||
COPY --from=APP_BUILD_FOR_PRODUCTION /home/app /var/www/html
|
||||
COPY docker/docker-entrypoint_prod.sh /home/unit/docker-entrypoint.sh
|
||||
COPY --from=app_build_for_production /home/app /var/www/html
|
||||
COPY --from=web_build_for_production /home/app/public/build/ /var/www/html/public/build
|
||||
COPY docker/php/start.sh /usr/local/bin/start
|
||||
|
||||
WORKDIR /var/www/html
|
||||
|
||||
RUN chmod 755 /home/unit/docker-entrypoint.sh
|
||||
RUN chown -R www-data:www-data /var/www/html \
|
||||
&& chmod 755 /usr/local/bin/start
|
||||
|
||||
STOPSIGNAL SIGTERM
|
||||
|
||||
ENTRYPOINT ["/home/unit/docker-entrypoint.sh"]
|
||||
USER www-data
|
||||
|
||||
EXPOSE 9000
|
||||
COPY docker/start_prod.sh /usr/local/bin/start
|
||||
CMD ["/usr/local/bin/start"]
|
||||
|
||||
FROM nginx AS web_production
|
||||
|
||||
FROM BUILD AS DEVELOP
|
||||
COPY --from=web_build_for_production /home/app/public /usr/share/nginx/html
|
||||
RUN rm -f /usr/share/nginx/html/50x.html /usr/share/nginx/html/index.php /usr/share/nginx/html/.htaccess
|
||||
|
||||
WORKDIR /usr/share/nginx/html
|
||||
|
||||
EXPOSE 80
|
||||
CMD ["/usr/local/bin/start"]
|
||||
|
||||
# develop
|
||||
FROM php AS app_develop
|
||||
|
||||
WORKDIR /var/www/html
|
||||
|
||||
COPY docker/docker-entrypoint_dev.sh /home/unit/docker-entrypoint.sh
|
||||
COPY docker/php/start.sh /usr/local/bin/start
|
||||
|
||||
STOPSIGNAL SIGTERM
|
||||
|
||||
RUN chmod 755 /home/unit/docker-entrypoint.sh \
|
||||
RUN chmod 755 /usr/local/bin/start \
|
||||
&& apk --no-cache add git nodejs npm \
|
||||
&& curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
|
||||
|
||||
ENTRYPOINT ["/home/unit/docker-entrypoint.sh"]
|
||||
USER www-data
|
||||
|
||||
EXPOSE 9000
|
||||
|
||||
COPY docker/start_dev.sh /usr/local/bin/start
|
||||
CMD ["/usr/local/bin/start"]
|
||||
|
||||
FROM BUILD AS ARTISAN
|
||||
FROM php AS artisan
|
||||
WORKDIR /var/www/html
|
||||
STOPSIGNAL SIGTERM
|
||||
ENTRYPOINT ["php", "/var/www/html/artisan"]
|
||||
|
||||
|
||||
FROM BUILD AS COMPOSER
|
||||
FROM php AS composer
|
||||
WORKDIR /var/www/html
|
||||
STOPSIGNAL SIGTERM
|
||||
RUN apk --no-cache add git \
|
||||
&& curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer \
|
||||
&& mkdir /.composer && chmod 0777 /.composer
|
||||
&& curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
|
||||
RUN mkdir "/.composer" && chmod -R 0777 "/.composer"
|
||||
ENTRYPOINT ["composer"]
|
||||
|
||||
|
||||
|
||||
FROM BUILD AS NPM
|
||||
FROM php AS npm
|
||||
RUN mkdir "/.npm" && chmod -R 0777 "/.npm"
|
||||
WORKDIR /var/www/html
|
||||
STOPSIGNAL SIGTERM
|
||||
RUN apk --no-cache add nodejs npm
|
||||
ENTRYPOINT ["npm"]
|
||||
|
||||
FROM nginx AS web_develop
|
||||
WORKDIR /usr/share/nginx/html
|
||||
|
||||
EXPOSE 80
|
||||
CMD ["/usr/local/bin/start"]
|
||||
@@ -1,104 +0,0 @@
|
||||
#!/bin/sh
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
WAITLOOPS=5
|
||||
SLEEPSEC=1
|
||||
unitd="unitd"
|
||||
role=${CONTAINER_ROLE:-app}
|
||||
|
||||
curl_put()
|
||||
{
|
||||
RET=$(/usr/bin/curl -s -w '%{http_code}' -X PUT --data-binary @$1 --unix-socket /var/run/control.unit.sock http://localhost/$2)
|
||||
RET_BODY=$(echo $RET | /bin/sed '$ s/...$//')
|
||||
RET_STATUS=$(echo $RET | /usr/bin/tail -c 4)
|
||||
if [ "$RET_STATUS" -ne "200" ]; then
|
||||
echo "$0: Error: HTTP response status code is '$RET_STATUS'"
|
||||
echo "$RET_BODY"
|
||||
return 1
|
||||
else
|
||||
echo "$0: OK: HTTP response status code is '$RET_STATUS'"
|
||||
echo "$RET_BODY"
|
||||
fi
|
||||
return 0
|
||||
}
|
||||
|
||||
if [ "$role" = "app" ]; then
|
||||
echo "$0: Launching Unit daemon to perform initial configuration..."
|
||||
/usr/sbin/$unitd --control unix:/var/run/control.unit.sock
|
||||
for i in $(/usr/bin/seq $WAITLOOPS); do
|
||||
if [ ! -S /var/run/control.unit.sock ]; then
|
||||
echo "$0: Waiting for control socket to be created..."
|
||||
/bin/sleep $SLEEPSEC
|
||||
else
|
||||
break
|
||||
fi
|
||||
done
|
||||
|
||||
# even when the control socket exists, it does not mean unit has finished initialisation
|
||||
# this curl call will get a reply once unit is fully launched
|
||||
/usr/bin/curl -s -X GET --unix-socket /var/run/control.unit.sock http://localhost/
|
||||
|
||||
if /usr/bin/find "/docker-entrypoint.d/" -mindepth 1 -print -quit 2>/dev/null | /bin/grep -q .; then
|
||||
echo "$0: /docker-entrypoint.d/ is not empty, applying initial configuration..."
|
||||
|
||||
echo "$0: Looking for certificate bundles in /docker-entrypoint.d/..."
|
||||
for f in $(/usr/bin/find /docker-entrypoint.d/ -type f -name "*.pem"); do
|
||||
echo "$0: Uploading certificates bundle: $f"
|
||||
curl_put $f "certificates/$(basename $f .pem)"
|
||||
done
|
||||
|
||||
echo "$0: Looking for JavaScript modules in /docker-entrypoint.d/..."
|
||||
for f in $(/usr/bin/find /docker-entrypoint.d/ -type f -name "*.js"); do
|
||||
echo "$0: Uploading JavaScript module: $f"
|
||||
curl_put $f "js_modules/$(basename $f .js)"
|
||||
done
|
||||
|
||||
echo "$0: Looking for configuration snippets in /docker-entrypoint.d/..."
|
||||
for f in $(/usr/bin/find /docker-entrypoint.d/ -type f -name "*.json"); do
|
||||
echo "$0: Applying configuration $f";
|
||||
curl_put $f "config"
|
||||
done
|
||||
|
||||
if [ ! -z ${UNIT_SOURCE+x} ]
|
||||
then
|
||||
echo $UNIT_SOURCE > /docker-entrypoint.d/unit_source.json
|
||||
curl_put "/docker-entrypoint.d/unit_source.json" "config/listeners/*:9000/forwarded/source"
|
||||
fi
|
||||
|
||||
echo "$0: Looking for shell scripts in /docker-entrypoint.d/..."
|
||||
for f in $(/usr/bin/find /docker-entrypoint.d/ -type f -name "*.sh"); do
|
||||
echo "$0: Launching $f";
|
||||
"$f"
|
||||
done
|
||||
|
||||
# warn on filetypes we don't know what to do with
|
||||
for f in $(/usr/bin/find /docker-entrypoint.d/ -type f -not -name "*.sh" -not -name "*.json" -not -name "*.pem" -not -name "*.js"); do
|
||||
echo "$0: Ignoring $f";
|
||||
done
|
||||
fi
|
||||
|
||||
echo "$0: Stopping Unit daemon after initial configuration..."
|
||||
kill -TERM $(/bin/cat /var/run/unit.pid)
|
||||
|
||||
for i in $(/usr/bin/seq $WAITLOOPS); do
|
||||
if [ -S /var/run/control.unit.sock ]; then
|
||||
echo "$0: Waiting for control socket to be removed..."
|
||||
/bin/sleep $SLEEPSEC
|
||||
else
|
||||
break
|
||||
fi
|
||||
done
|
||||
if [ -S /var/run/control.unit.sock ]; then
|
||||
kill -KILL $(/bin/cat /var/run/unit.pid)
|
||||
rm -f /var/run/control.unit.sock
|
||||
fi
|
||||
|
||||
echo
|
||||
echo "$0: Unit initial configuration complete; ready for start up..."
|
||||
echo
|
||||
fi
|
||||
|
||||
chmod -R 777 /var/www/html/storage /var/www/html/bootstrap/cache
|
||||
|
||||
exec "$@"
|
||||
@@ -1,115 +0,0 @@
|
||||
#!/bin/sh
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
WAITLOOPS=5
|
||||
SLEEPSEC=1
|
||||
unitd="unitd"
|
||||
role=${CONTAINER_ROLE:-app}
|
||||
|
||||
curl_put()
|
||||
{
|
||||
RET=$(/usr/bin/curl -s -w '%{http_code}' -X PUT --data-binary @$1 --unix-socket /var/run/control.unit.sock http://localhost/$2)
|
||||
RET_BODY=$(echo $RET | /bin/sed '$ s/...$//')
|
||||
RET_STATUS=$(echo $RET | /usr/bin/tail -c 4)
|
||||
if [ "$RET_STATUS" -ne "200" ]; then
|
||||
echo "$0: Error: HTTP response status code is '$RET_STATUS'"
|
||||
echo "$RET_BODY"
|
||||
return 1
|
||||
else
|
||||
echo "$0: OK: HTTP response status code is '$RET_STATUS'"
|
||||
echo "$RET_BODY"
|
||||
fi
|
||||
return 0
|
||||
}
|
||||
|
||||
if [ "$role" = "app" ]; then
|
||||
echo "$0: Launching Unit daemon to perform initial configuration..."
|
||||
/usr/sbin/$unitd --control unix:/var/run/control.unit.sock
|
||||
for i in $(/usr/bin/seq $WAITLOOPS); do
|
||||
if [ ! -S /var/run/control.unit.sock ]; then
|
||||
echo "$0: Waiting for control socket to be created..."
|
||||
/bin/sleep $SLEEPSEC
|
||||
else
|
||||
break
|
||||
fi
|
||||
done
|
||||
|
||||
# even when the control socket exists, it does not mean unit has finished initialisation
|
||||
# this curl call will get a reply once unit is fully launched
|
||||
/usr/bin/curl -s -X GET --unix-socket /var/run/control.unit.sock http://localhost/
|
||||
|
||||
if /usr/bin/find "/docker-entrypoint.d/" -mindepth 1 -print -quit 2>/dev/null | /bin/grep -q .; then
|
||||
echo "$0: /docker-entrypoint.d/ is not empty, applying initial configuration..."
|
||||
|
||||
echo "$0: Looking for certificate bundles in /docker-entrypoint.d/..."
|
||||
for f in $(/usr/bin/find /docker-entrypoint.d/ -type f -name "*.pem"); do
|
||||
echo "$0: Uploading certificates bundle: $f"
|
||||
curl_put $f "certificates/$(basename $f .pem)"
|
||||
done
|
||||
|
||||
echo "$0: Looking for JavaScript modules in /docker-entrypoint.d/..."
|
||||
for f in $(/usr/bin/find /docker-entrypoint.d/ -type f -name "*.js"); do
|
||||
echo "$0: Uploading JavaScript module: $f"
|
||||
curl_put $f "js_modules/$(basename $f .js)"
|
||||
done
|
||||
|
||||
echo "$0: Looking for configuration snippets in /docker-entrypoint.d/..."
|
||||
for f in $(/usr/bin/find /docker-entrypoint.d/ -type f -name "*.json"); do
|
||||
echo "$0: Applying configuration $f";
|
||||
curl_put $f "config"
|
||||
done
|
||||
|
||||
if [ ! -z ${UNIT_SOURCE+x} ]
|
||||
then
|
||||
echo $UNIT_SOURCE > /docker-entrypoint.d/unit_source.json
|
||||
curl_put "/docker-entrypoint.d/unit_source.json" "config/listeners/*:9000/forwarded/source"
|
||||
fi
|
||||
|
||||
echo "$0: Looking for shell scripts in /docker-entrypoint.d/..."
|
||||
for f in $(/usr/bin/find /docker-entrypoint.d/ -type f -name "*.sh"); do
|
||||
echo "$0: Launching $f";
|
||||
"$f"
|
||||
done
|
||||
|
||||
# warn on filetypes we don't know what to do with
|
||||
for f in $(/usr/bin/find /docker-entrypoint.d/ -type f -not -name "*.sh" -not -name "*.json" -not -name "*.pem" -not -name "*.js"); do
|
||||
echo "$0: Ignoring $f";
|
||||
done
|
||||
fi
|
||||
|
||||
echo "$0: Stopping Unit daemon after initial configuration..."
|
||||
kill -TERM $(/bin/cat /var/run/unit.pid)
|
||||
|
||||
for i in $(/usr/bin/seq $WAITLOOPS); do
|
||||
if [ -S /var/run/control.unit.sock ]; then
|
||||
echo "$0: Waiting for control socket to be removed..."
|
||||
/bin/sleep $SLEEPSEC
|
||||
else
|
||||
break
|
||||
fi
|
||||
done
|
||||
if [ -S /var/run/control.unit.sock ]; then
|
||||
kill -KILL $(/bin/cat /var/run/unit.pid)
|
||||
rm -f /var/run/control.unit.sock
|
||||
fi
|
||||
|
||||
echo
|
||||
echo "$0: Unit initial configuration complete; ready for start up..."
|
||||
echo
|
||||
fi
|
||||
|
||||
php artisan config:cache
|
||||
php artisan event:cache
|
||||
php artisan route:cache
|
||||
php artisan view:cache
|
||||
php artisan storage:link
|
||||
if [ "$role" = "app" ]; then
|
||||
php artisan migrate --force
|
||||
fi
|
||||
|
||||
chown -R unit:unit /var/www/html
|
||||
chown -R www-data:www-data /var/www/html/storage /var/www/html/bootstrap/cache
|
||||
chmod -R 777 /var/www/html/storage /var/www/html/bootstrap/cache
|
||||
|
||||
exec "$@"
|
||||
@@ -0,0 +1,28 @@
|
||||
[www]
|
||||
php_admin_value[upload_tmp_dir] = "/tmp/php/upload"
|
||||
php_admin_value[sys_temp_dir] = "/tmp/php/sys"
|
||||
php_admin_value[session.save_path] = "/tmp/php/session"
|
||||
php_admin_value[open_basedir] = "/var/www/html:/tmp/php:."
|
||||
php_admin_value[expose_php] = 0
|
||||
php_admin_value[memory_limit] = ${PHP_FPM_MEMORY_LIMIT}
|
||||
php_admin_value[upload_max_filesize] = ${PHP_FPM_UPLOAD_MAX_FILESIZE}
|
||||
php_admin_value[post_max_size] = ${PHP_FPM_POST_MAX_SIZE}
|
||||
php_admin_value[display_errors] = ${PHP_FPM_DISPLAY_ERRORS}
|
||||
php_admin_value[opcache.enable] = ${PHP_FPM_OPCACHE_ENABLE}
|
||||
php_admin_value[opcache.validate_timestamps] = ${PHP_FPM_OPCACHE_VALIDATE_TIMESTAMPS}
|
||||
php_admin_value[session.upload_progress.enabled] = ${PHP_FPM_SESSION_UPLOAD_PROGRESS_ENABLED}
|
||||
php_admin_value[fatal_error_backtraces] = ${PHP_FPM_FATAL_ERROR_BACKTRACES}
|
||||
|
||||
pm = dynamic
|
||||
pm.max_children = ${PHP_FPM_PM_MAX_CHILDREN}
|
||||
pm.start_servers = ${PHP_FPM_PM_START_SERVERS}
|
||||
pm.min_spare_servers = ${PHP_FPM_PM_MIN_SPARE_SERVERS}
|
||||
pm.max_spare_servers = ${PHP_FPM_PM_MAX_SPARE_SERVERS}
|
||||
pm.max_requests = ${PHP_FPM_PM_MAX_REQUESTS}
|
||||
|
||||
|
||||
listen = 127.0.0.1:9000
|
||||
listen.mode = 0660
|
||||
listen.owner = www-data
|
||||
listen.group = www-data
|
||||
security.limit_extensions = .php
|
||||
Executable
+65
@@ -0,0 +1,65 @@
|
||||
#!/usr/bin/env sh
|
||||
set -e
|
||||
role=${CONTAINER_ROLE:-app}
|
||||
|
||||
if [ "$APP_ENV" = "production" ]; then
|
||||
php artisan config:cache
|
||||
php artisan event:cache
|
||||
php artisan route:cache
|
||||
php artisan view:cache
|
||||
php artisan storage:link
|
||||
fi
|
||||
|
||||
if [ "$role" = "app" ]; then
|
||||
|
||||
export PHP_FPM_MEMORY_LIMIT="${PHP_FPM_MEMORY_LIMIT:-256m}"
|
||||
export PHP_FPM_UPLOAD_MAX_FILESIZE="${PHP_FPM_UPLOAD_MAX_FILESIZE:-20m}"
|
||||
export PHP_FPM_POST_MAX_SIZE="${PHP_FPM_POST_MAX_SIZE:-20m}"
|
||||
|
||||
export PHP_FPM_PM_MAX_CHILDREN="${PHP_FPM_PM_MAX_CHILDREN:-50}"
|
||||
export PHP_FPM_PM_START_SERVERS="${PHP_FPM_PM_START_SERVERS:-10}"
|
||||
export PHP_FPM_PM_MIN_SPARE_SERVERS="${PHP_FPM_PM_MIN_SPARE_SERVERS:-5}"
|
||||
export PHP_FPM_PM_MAX_SPARE_SERVERS="${PHP_FPM_PM_MAX_SPARE_SERVERS:-20}"
|
||||
export PHP_FPM_PM_MAX_REQUESTS="${PHP_FPM_PM_MAX_REQUESTS:-500}"
|
||||
|
||||
export PHP_FPM_FATAL_ERROR_BACKTRACES="${PHP_FPM_FATAL_ERROR_BACKTRACES:-0}"
|
||||
export PHP_FPM_SESSION_UPLOAD_PROGRESS_ENABLED="${PHP_FPM_SESSION_UPLOAD_PROGRESS_ENABLED:-0}"
|
||||
|
||||
if [ "$APP_ENV" = "production" ]; then
|
||||
export PHP_FPM_DISPLAY_ERRORS="${PHP_FPM_DISPLAY_ERRORS:-0}"
|
||||
export PHP_FPM_OPCACHE_ENABLE="${PHP_FPM_OPCACHE_ENABLE:-1}"
|
||||
export PHP_FPM_OPCACHE_VALIDATE_TIMESTAMPS="${PHP_FPM_OPCACHE_VALIDATE_TIMESTAMPS:-0}"
|
||||
|
||||
php artisan migrate --force
|
||||
else
|
||||
export PHP_FPM_DISPLAY_ERRORS="${PHP_FPM_DISPLAY_ERRORS:-1}"
|
||||
export PHP_FPM_OPCACHE_ENABLE="${PHP_FPM_OPCACHE_ENABLE:-0}"
|
||||
export PHP_FPM_OPCACHE_VALIDATE_TIMESTAMPS="${PHP_FPM_OPCACHE_VALIDATE_TIMESTAMPS:-1}"
|
||||
fi
|
||||
|
||||
if [ ! -w /var/www/html/storage ]; then
|
||||
echo "ERROR: /var/www/html/storage must be writable."
|
||||
echo "Fix permissions on host/volume for the www-data user."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
exec php-fpm
|
||||
elif [ "$role" = "queue" ]; then
|
||||
echo "Running the queue..."
|
||||
while [ true ]
|
||||
do
|
||||
php /var/www/html/artisan queue:work --verbose --sleep=5 --tries=100 --backoff=10 --max-time=3600 --queue=high,normal,low,default
|
||||
done
|
||||
elif [ "$role" = "scheduler" ]; then
|
||||
while [ true ]
|
||||
do
|
||||
php /var/www/html/artisan schedule:run --verbose --no-interaction &
|
||||
sleep 60
|
||||
done
|
||||
elif [ "$role" = "websockets" ]; then
|
||||
echo "Running the websockets..."
|
||||
php /var/www/html/artisan reverb:start --port=9000
|
||||
else
|
||||
echo "Could not match the container role \"$role\""
|
||||
exit 1
|
||||
fi
|
||||
@@ -1,24 +0,0 @@
|
||||
#!/usr/bin/env sh
|
||||
set -e
|
||||
role=${CONTAINER_ROLE:-app}
|
||||
if [ "$role" = "app" ]; then
|
||||
exec unitd --no-daemon --control unix:/var/run/control.unit.sock --user unit --group unit
|
||||
elif [ "$role" = "queue" ]; then
|
||||
echo "Running the queue..."
|
||||
while [ true ]
|
||||
do
|
||||
php /var/www/html/artisan queue:work --verbose --sleep=5 --tries=10 --max-time=3600
|
||||
done
|
||||
elif [ "$role" = "websockets" ]; then
|
||||
echo "Running the websockets..."
|
||||
php /var/www/html/artisan reverb:start --port=9000
|
||||
elif [ "$role" = "scheduler" ]; then
|
||||
while [ true ]
|
||||
do
|
||||
php /var/www/html/artisan schedule:run --verbose --no-interaction &
|
||||
sleep 60
|
||||
done
|
||||
else
|
||||
echo "Could not match the container role \"$role\""
|
||||
exit 1
|
||||
fi
|
||||
@@ -1,24 +0,0 @@
|
||||
#!/usr/bin/env sh
|
||||
set -e
|
||||
role=${CONTAINER_ROLE:-app}
|
||||
if [ "$role" = "app" ]; then
|
||||
exec unitd --no-daemon --control unix:/var/run/control.unit.sock --user unit --group unit
|
||||
elif [ "$role" = "queue" ]; then
|
||||
echo "Running the queue..."
|
||||
while [ true ]
|
||||
do
|
||||
php /var/www/html/artisan queue:work --verbose --sleep=5 --tries=10 --max-time=3600
|
||||
done
|
||||
elif [ "$role" = "websockets" ]; then
|
||||
echo "Running the websockets..."
|
||||
php /var/www/html/artisan reverb:start --port=9000
|
||||
elif [ "$role" = "scheduler" ]; then
|
||||
while [ true ]
|
||||
do
|
||||
php /var/www/html/artisan schedule:run --verbose --no-interaction &
|
||||
sleep 60
|
||||
done
|
||||
else
|
||||
echo "Could not match the container role \"$role\""
|
||||
exit 1
|
||||
fi
|
||||
@@ -1,69 +0,0 @@
|
||||
{
|
||||
"listeners": {
|
||||
"*:9000": {
|
||||
"pass": "routes",
|
||||
"forwarded": {
|
||||
"client_ip": "X-Forwarded-For",
|
||||
"recursive": false,
|
||||
"source": [
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"routes": [
|
||||
{
|
||||
"match": {
|
||||
"uri": [
|
||||
"/index.php/",
|
||||
"~^/index\\.php/.*",
|
||||
"~\\.php$"
|
||||
]
|
||||
},
|
||||
"action": {
|
||||
"return": 404
|
||||
}
|
||||
},
|
||||
{
|
||||
"action": {
|
||||
"share": "/var/www/html/public$uri",
|
||||
"fallback": {
|
||||
"pass": "applications/laravel"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
"applications": {
|
||||
"laravel": {
|
||||
"type": "php",
|
||||
"root": "/var/www/html/public",
|
||||
"working_directory": "/var/www/html",
|
||||
"user": "www-data",
|
||||
"group": "www-data",
|
||||
"script": "index.php",
|
||||
"processes": {
|
||||
"max": 10,
|
||||
"spare": 5,
|
||||
"idle_timeout": 20
|
||||
},
|
||||
"options": {
|
||||
"file": "/usr/local/etc/php/php.ini",
|
||||
"admin": {
|
||||
"upload_tmp_dir": "/tmp/php/upload",
|
||||
"sys_temp_dir": "/tmp/php/sys",
|
||||
"session.save_path": "/tmp/php/session",
|
||||
"open_basedir": "/var/www/html:/tmp/php:.",
|
||||
"memory_limit": "256M",
|
||||
"upload_max_filesize": "20M",
|
||||
"post_max_size": "20M",
|
||||
"expose_php": "0"
|
||||
},
|
||||
"user": {
|
||||
"display_errors": "0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
application/public/*.php
|
||||
application/public/**/*.php
|
||||
application/public/.htaccess
|
||||
@@ -0,0 +1,45 @@
|
||||
map $FRONTEND_PORT $host_with_port {
|
||||
"" $host;
|
||||
default "$host:$FRONTEND_PORT";
|
||||
}
|
||||
|
||||
server {
|
||||
listen 80 default_server;
|
||||
listen [::]:80 default_server;
|
||||
|
||||
client_max_body_size ${NGINX_CLIENT_MAX_BODY_SIZE};
|
||||
|
||||
disable_symlinks if_not_owner from=/usr/share/nginx/html;
|
||||
|
||||
index index.html;
|
||||
root /usr/share/nginx/html;
|
||||
|
||||
${GZIP_BLOCK}
|
||||
${REAL_IP_BLOCK}
|
||||
|
||||
location / {
|
||||
location / {
|
||||
try_files $uri @fallback;
|
||||
}
|
||||
${API_DOCS_BLOCK}
|
||||
location ~ \.php$ {
|
||||
return 404;
|
||||
}
|
||||
location ~ /\. {
|
||||
return 404;
|
||||
}
|
||||
location ~ /\.(ht|svn|git) {
|
||||
return 404;
|
||||
}
|
||||
}
|
||||
|
||||
location @fallback {
|
||||
fastcgi_pass ${BACKEND_HOST}:${BACKEND_PORT};
|
||||
fastcgi_index index.php;
|
||||
fastcgi_param REDIRECT_STATUS 200;
|
||||
fastcgi_param SCRIPT_FILENAME /var/www/html/public/index.php;
|
||||
fastcgi_param SCRIPT_NAME /index.php;
|
||||
fastcgi_param HTTP_HOST $host_with_port;
|
||||
include /etc/nginx/fastcgi_params;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
fastcgi_param QUERY_STRING $query_string;
|
||||
fastcgi_param REQUEST_METHOD $request_method;
|
||||
fastcgi_param CONTENT_TYPE $content_type;
|
||||
fastcgi_param CONTENT_LENGTH $content_length;
|
||||
|
||||
fastcgi_param REQUEST_URI $request_uri;
|
||||
fastcgi_param DOCUMENT_URI $document_uri;
|
||||
fastcgi_param DOCUMENT_ROOT $document_root;
|
||||
fastcgi_param SERVER_PROTOCOL $server_protocol;
|
||||
fastcgi_param HTTPS $https if_not_empty;
|
||||
|
||||
fastcgi_param GATEWAY_INTERFACE CGI/1.1;
|
||||
fastcgi_param SERVER_SOFTWARE nginx;
|
||||
|
||||
fastcgi_param REMOTE_ADDR $remote_addr;
|
||||
fastcgi_param REMOTE_PORT $remote_port;
|
||||
fastcgi_param SERVER_ADDR $server_addr;
|
||||
fastcgi_param SERVER_PORT $server_port;
|
||||
fastcgi_param SERVER_NAME $server_name;
|
||||
|
||||
fastcgi_param HTTP_X_FORWARDED_FOR $proxy_add_x_forwarded_for;
|
||||
fastcgi_param HTTP_X_REAL_IP $remote_addr;
|
||||
@@ -0,0 +1,58 @@
|
||||
#!/usr/bin/env sh
|
||||
|
||||
if [ "$IS_GZIP" = "1" ]; then
|
||||
GZIP_BLOCK='gzip on;
|
||||
gzip_vary on;
|
||||
gzip_proxied any;
|
||||
gzip_comp_level 6;
|
||||
gzip_buffers 16 8k;
|
||||
gzip_http_version 1.1;
|
||||
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
|
||||
gzip_min_length 1024;'
|
||||
else
|
||||
GZIP_BLOCK=''
|
||||
fi
|
||||
export GZIP_BLOCK
|
||||
|
||||
if [ -n "$TRUSTED_PROXY_CIDR" ]; then
|
||||
REAL_IP_BLOCK="set_real_ip_from $TRUSTED_PROXY_CIDR;
|
||||
real_ip_header X-Forwarded-For;
|
||||
real_ip_recursive on;"
|
||||
else
|
||||
REAL_IP_BLOCK=""
|
||||
fi
|
||||
export REAL_IP_BLOCK
|
||||
|
||||
export SWAGGER_HOST="${SWAGGER_HOST:-swagger}"
|
||||
export SWAGGER_PORT="${SWAGGER_PORT:-8080}"
|
||||
|
||||
export BACKEND_HOST="${BACKEND_HOST:-app}"
|
||||
export BACKEND_PORT="${BACKEND_PORT:-9000}"
|
||||
|
||||
export FRONTEND_PORT="${FRONTEND_PORT:-''}"
|
||||
export NGINX_CLIENT_MAX_BODY_SIZE="${NGINX_CLIENT_MAX_BODY_SIZE:-'20m'}"
|
||||
|
||||
if [ "$ENABLE_API_DOCS" = "1" ]; then
|
||||
API_DOCS_BLOCK="location /api-docs {
|
||||
proxy_pass http://${SWAGGER_HOST}:${SWAGGER_PORT};
|
||||
proxy_set_header HTTP_HOST \$host_with_port;
|
||||
proxy_set_header Host \$host_with_port;
|
||||
proxy_set_header X-Forwarded-Host \$http_host;
|
||||
proxy_set_header X-Real-IP \$remote_addr;
|
||||
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto \$scheme;
|
||||
|
||||
proxy_redirect off;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade \$http_upgrade;
|
||||
}"
|
||||
else
|
||||
API_DOCS_BLOCK=""
|
||||
fi
|
||||
export API_DOCS_BLOCK
|
||||
|
||||
envsubst '$BACKEND_HOST $BACKEND_PORT $GZIP_BLOCK $REAL_IP_BLOCK $FRONTEND_PORT $NGINX_CLIENT_MAX_BODY_SIZE $API_DOCS_BLOCK' \
|
||||
< /etc/nginx/templates/default.conf.template \
|
||||
> /etc/nginx/conf.d/default.conf
|
||||
|
||||
exec nginx -g 'daemon off;'
|
||||
+28
-19
@@ -1,60 +1,68 @@
|
||||
version: '3.7'
|
||||
#version: '3.7'
|
||||
services:
|
||||
nginx:
|
||||
web:
|
||||
build:
|
||||
context: ./nginx
|
||||
dockerfile: Dockerfile
|
||||
# restart: always
|
||||
context: app
|
||||
dockerfile: docker/Dockerfile
|
||||
target: WEB_PRODUCTION
|
||||
# restart: always
|
||||
depends_on:
|
||||
- app
|
||||
- swagger
|
||||
ports:
|
||||
- ${DOCKER_NGINX_PORT}:80
|
||||
- ${DOCKER_WEB_PORT}:80
|
||||
environment:
|
||||
IS_GZIP: 1
|
||||
# FRONTEND_PORT: ${DOCKER_WEB_PORT}
|
||||
BACKEND_HOST: app
|
||||
BACKEND_PORT: 9000
|
||||
TRUSTED_PROXY_CIDR: 172.16.0.0/12
|
||||
# Enable swagger
|
||||
ENABLE_API_DOCS: 1
|
||||
volumes:
|
||||
- ./app/application/public:/usr/share/nginx/html
|
||||
- ./app/application/storage/app/public:/usr/share/nginx/html/storage
|
||||
app:
|
||||
build:
|
||||
context: app
|
||||
dockerfile: docker/Dockerfile
|
||||
target: PRODUCTION
|
||||
target: APP_PRODUCTION
|
||||
# restart: always
|
||||
# cap_drop:
|
||||
# - ALL
|
||||
# cap_add:
|
||||
# - SETGID
|
||||
# - SETUID
|
||||
# - CHOWN
|
||||
# - FOWNER
|
||||
depends_on:
|
||||
- db
|
||||
- redis
|
||||
- reverb
|
||||
env_file: app/application/.env
|
||||
volumes:
|
||||
- ./app/application:/var/www/html
|
||||
environment:
|
||||
CONTAINER_ROLE: app
|
||||
UNIT_SOURCE: '["172.16.0.0/12"]'
|
||||
APP_ENV: production
|
||||
queue:
|
||||
build:
|
||||
context: app
|
||||
dockerfile: docker/Dockerfile
|
||||
target: PRODUCTION
|
||||
target: APP_PRODUCTION
|
||||
# restart: always
|
||||
depends_on:
|
||||
- db
|
||||
- redis
|
||||
environment:
|
||||
CONTAINER_ROLE: queue
|
||||
APP_ENV: production
|
||||
volumes:
|
||||
- ./app/application:/var/www/html
|
||||
reverb:
|
||||
build:
|
||||
context: app
|
||||
dockerfile: docker/Dockerfile
|
||||
target: PRODUCTION
|
||||
target: APP_PRODUCTION
|
||||
# restart: always
|
||||
depends_on:
|
||||
- db
|
||||
- redis
|
||||
environment:
|
||||
CONTAINER_ROLE: websockets
|
||||
APP_ENV: production
|
||||
ports:
|
||||
- ${DOCKER_WEBSOCKET_PORT}:9000
|
||||
volumes:
|
||||
@@ -63,13 +71,14 @@ services:
|
||||
build:
|
||||
context: app
|
||||
dockerfile: docker/Dockerfile
|
||||
target: PRODUCTION
|
||||
target: APP_PRODUCTION
|
||||
# restart: always
|
||||
depends_on:
|
||||
- db
|
||||
- redis
|
||||
environment:
|
||||
CONTAINER_ROLE: scheduler
|
||||
APP_ENV: production
|
||||
volumes:
|
||||
- ./app/application:/var/www/html
|
||||
swagger:
|
||||
|
||||
@@ -1,17 +1,26 @@
|
||||
version: '3.7'
|
||||
#version: '3.7'
|
||||
services:
|
||||
nginx:
|
||||
build:
|
||||
context: ./nginx
|
||||
dockerfile: Dockerfile
|
||||
# restart: always
|
||||
web:
|
||||
# image: korelf/service-captcha-web:0.9.0 # docker hub
|
||||
image: docker.mdhub.kor-elf.net/kor-elf/service-captcha-web:0.9.0 # MDHub
|
||||
# restart: always
|
||||
depends_on:
|
||||
- app
|
||||
- swagger
|
||||
ports:
|
||||
- ${DOCKER_NGINX_PORT}:80
|
||||
- ${DOCKER_WEB_PORT}:80
|
||||
environment:
|
||||
IS_GZIP: 0
|
||||
# FRONTEND_PORT: ${DOCKER_WEB_PORT}
|
||||
BACKEND_HOST: app
|
||||
BACKEND_PORT: 9000
|
||||
TRUSTED_PROXY_CIDR: 172.16.0.0/12
|
||||
# Enable swagger
|
||||
ENABLE_API_DOCS: 1
|
||||
volumes:
|
||||
- ./app/storage/app/public:/usr/share/nginx/html/storage
|
||||
app:
|
||||
image: korelf/service-captcha:0.8.2
|
||||
# image: korelf/service-captcha-app:0.9.0 # docker hub
|
||||
image: docker.mdhub.kor-elf.net/kor-elf/service-captcha-app:0.9.0 # MDHub
|
||||
# restart: always
|
||||
depends_on:
|
||||
- db
|
||||
@@ -20,36 +29,82 @@ services:
|
||||
env_file: app/.env
|
||||
environment:
|
||||
CONTAINER_ROLE: app
|
||||
UNIT_SOURCE: '["172.16.0.0/12"]'
|
||||
queue:
|
||||
image: korelf/service-captcha:0.8.2
|
||||
APP_ENV: production
|
||||
volumes:
|
||||
- ./app/storage/app:/var/www/html/storage/app
|
||||
- ./app/storage/logs:/var/www/html/storage/logs
|
||||
queue-1:
|
||||
# image: korelf/service-captcha-app:0.9.0 # docker hub
|
||||
image: docker.mdhub.kor-elf.net/kor-elf/service-captcha-app:0.9.0 # MDHub
|
||||
# restart: always
|
||||
depends_on:
|
||||
- db
|
||||
- redis
|
||||
environment:
|
||||
CONTAINER_ROLE: queue
|
||||
APP_ENV: production
|
||||
env_file: app/.env
|
||||
volumes:
|
||||
- ./app/storage/app:/var/www/html/storage/app
|
||||
- ./app/storage/logs:/var/www/html/storage/logs
|
||||
queue-2:
|
||||
# image: korelf/service-captcha-app:0.9.0 # docker hub
|
||||
image: docker.mdhub.kor-elf.net/kor-elf/service-captcha-app:0.9.0 # MDHub
|
||||
# restart: always
|
||||
depends_on:
|
||||
- db
|
||||
- redis
|
||||
environment:
|
||||
CONTAINER_ROLE: queue
|
||||
APP_ENV: production
|
||||
env_file: app/.env
|
||||
volumes:
|
||||
- ./app/storage/app:/var/www/html/storage/app
|
||||
- ./app/storage/logs:/var/www/html/storage/logs
|
||||
queue-3:
|
||||
# image: korelf/service-captcha-app:0.9.0 # docker hub
|
||||
image: docker.mdhub.kor-elf.net/kor-elf/service-captcha-app:0.9.0 # MDHub
|
||||
# restart: always
|
||||
depends_on:
|
||||
- db
|
||||
- redis
|
||||
environment:
|
||||
CONTAINER_ROLE: queue
|
||||
APP_ENV: production
|
||||
env_file: app/.env
|
||||
volumes:
|
||||
- ./app/storage/app:/var/www/html/storage/app
|
||||
- ./app/storage/logs:/var/www/html/storage/logs
|
||||
reverb:
|
||||
image: korelf/service-captcha:0.8.2
|
||||
# image: korelf/service-captcha-app:0.9.0 # docker hub
|
||||
image: docker.mdhub.kor-elf.net/kor-elf/service-captcha-app:0.9.0 # MDHub
|
||||
# restart: always
|
||||
depends_on:
|
||||
- db
|
||||
- redis
|
||||
environment:
|
||||
CONTAINER_ROLE: websockets
|
||||
APP_ENV: production
|
||||
env_file: app/.env
|
||||
volumes:
|
||||
- ./app/storage/app:/var/www/html/storage/app
|
||||
- ./app/storage/logs:/var/www/html/storage/logs
|
||||
ports:
|
||||
- ${DOCKER_WEBSOCKET_PORT}:9000
|
||||
scheduler:
|
||||
image: korelf/service-captcha:0.8.2
|
||||
# image: korelf/service-captcha-app:0.9.0 # docker hub
|
||||
image: docker.mdhub.kor-elf.net/kor-elf/service-captcha-app:0.9.0 # MDHub
|
||||
# restart: always
|
||||
depends_on:
|
||||
- db
|
||||
- redis
|
||||
environment:
|
||||
CONTAINER_ROLE: scheduler
|
||||
APP_ENV: production
|
||||
env_file: app/.env
|
||||
volumes:
|
||||
- ./app/storage/app:/var/www/html/storage/app
|
||||
- ./app/storage/logs:/var/www/html/storage/logs
|
||||
redis:
|
||||
image: redis:3.0-alpine
|
||||
# restart: always
|
||||
|
||||
+26
-11
@@ -1,32 +1,47 @@
|
||||
version: '3.7'
|
||||
#version: '3.7'
|
||||
services:
|
||||
web:
|
||||
image: nginx:alpine3.18-slim
|
||||
volumes:
|
||||
- ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
|
||||
ports:
|
||||
- ${DOCKER_NGINX_PORT}:80
|
||||
build:
|
||||
context: app
|
||||
dockerfile: docker/Dockerfile
|
||||
target: WEB_DEVELOP
|
||||
depends_on:
|
||||
- db
|
||||
- redis
|
||||
- app
|
||||
- reverb
|
||||
ports:
|
||||
- ${DOCKER_WEB_PORT}:80
|
||||
environment:
|
||||
IS_GZIP: 0
|
||||
FRONTEND_PORT: ${DOCKER_WEB_PORT}
|
||||
BACKEND_HOST: app
|
||||
BACKEND_PORT: 9000
|
||||
# Enable swagger
|
||||
ENABLE_API_DOCS: 1
|
||||
# TRUSTED_PROXY_CIDR: 172.16.0.0/12
|
||||
volumes:
|
||||
- ./app/application/public:/usr/share/nginx/html
|
||||
- ./app/application/storage/app/public:/usr/share/nginx/html/storage
|
||||
app:
|
||||
build:
|
||||
context: app
|
||||
dockerfile: docker/Dockerfile
|
||||
target: DEVELOP
|
||||
target: APP_DEVELOP
|
||||
depends_on:
|
||||
- db
|
||||
- redis
|
||||
- reverb
|
||||
volumes:
|
||||
- ./app/application:/var/www/html
|
||||
environment:
|
||||
CONTAINER_ROLE: app
|
||||
APP_ENV: local
|
||||
queue:
|
||||
build:
|
||||
context: app
|
||||
dockerfile: docker/Dockerfile
|
||||
target: DEVELOP
|
||||
target: APP_DEVELOP
|
||||
depends_on:
|
||||
- db
|
||||
- redis
|
||||
@@ -38,7 +53,7 @@ services:
|
||||
build:
|
||||
context: app
|
||||
dockerfile: docker/Dockerfile
|
||||
target: DEVELOP
|
||||
target: APP_DEVELOP
|
||||
depends_on:
|
||||
- db
|
||||
- redis
|
||||
@@ -52,7 +67,7 @@ services:
|
||||
build:
|
||||
context: app
|
||||
dockerfile: docker/Dockerfile
|
||||
target: DEVELOP
|
||||
target: APP_DEVELOP
|
||||
depends_on:
|
||||
- db
|
||||
- redis
|
||||
@@ -107,4 +122,4 @@ services:
|
||||
target: NPM
|
||||
user: "${UID}:${GID}"
|
||||
volumes:
|
||||
- ./app/application:/var/www/html
|
||||
- ./app/application:/var/www/html
|
||||
@@ -1,3 +0,0 @@
|
||||
FROM nginx:alpine3.18-slim
|
||||
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
@@ -1,36 +0,0 @@
|
||||
server {
|
||||
listen 80 default_server;
|
||||
listen [::]:80 default_server;
|
||||
server_name captcha;
|
||||
|
||||
client_max_body_size 1024M;
|
||||
|
||||
root /var/www/html/public;
|
||||
|
||||
location / {
|
||||
location /api-docs {
|
||||
proxy_pass http://swagger:8080;
|
||||
proxy_set_header Host $http_host;
|
||||
proxy_set_header X-Forwarded-Host $http_host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
|
||||
proxy_redirect off;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
}
|
||||
location / {
|
||||
proxy_pass http://app:9000;
|
||||
proxy_set_header Host $http_host;
|
||||
proxy_set_header X-Forwarded-Host $http_host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
|
||||
proxy_redirect off;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user