mirror of
https://github.com/gtbu/Typesetter-5.3-p8.git
synced 2025-04-18 20:23:14 +02:00
Added Bootswatch 5.2 Theme
This commit is contained in:
gtbu
parent
676859a875
commit
93955abbd7
102 changed files with 8492 additions and 0 deletions
8
themes/Bootswatch5.2_Scss/Addon.ini
Normal file
8
themes/Bootswatch5.2_Scss/Addon.ini
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
Addon_Name = 'Bootswatch 5.2 Scss'
|
||||
;Addon_Unique_ID =
|
||||
Addon_Version = 5.2
|
||||
min_gpeasy_version = 5.2
|
||||
|
||||
[FrontEndFramework]
|
||||
name = Bootstrap
|
||||
version = 5
|
||||
133
themes/Bootswatch5.2_Scss/_common/common_style.scss
Normal file
133
themes/Bootswatch5.2_Scss/_common/common_style.scss
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
// Theme Bootswatch 4 Scss
|
||||
// Common styles used in all layouts
|
||||
//
|
||||
// Instead of Autoprefixer we use vendor-prefix mixins,
|
||||
// see /include/thirdparty/Bootstrap4/scss/bootstrap/vp-mixins
|
||||
//
|
||||
// Migrate to Bootstrap 5.2: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
|
||||
// Imports
|
||||
@if variable-exists(web-font-path) {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
@import 'contactform.scss';
|
||||
@import 'compensate_fixed_navbar.scss'; // default, import only with 'fixed-top' class on navbar in template.php line 44
|
||||
@import 'footer.scss';
|
||||
@import 'dropdown.scss';
|
||||
|
||||
|
||||
// Page Flex Layout for Sticky Footer ==========================================
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
// vendor-prefix mixin
|
||||
@include vp-flexbox();
|
||||
@include vp-flex-direction(column);
|
||||
}
|
||||
|
||||
// Height fix for Admin Top Bar and hidden admin UI
|
||||
html:not(.override_admin_style) body.gpAdmin {
|
||||
height: calc(100% - 29px);
|
||||
}
|
||||
|
||||
// Navbar =======================================================================
|
||||
$navbar-font-size: 1rem !default; // non-standard variable, needs a default value. actual value see layout's variables.scss
|
||||
.navbar {
|
||||
font-size: $navbar-font-size;
|
||||
}
|
||||
|
||||
// Content Area
|
||||
.main-content {
|
||||
// vendor-prefix mixin
|
||||
@include vp-flex(1 0 auto);
|
||||
}
|
||||
|
||||
// Add padding-top to the first content section to prevent content sticking to the navbar
|
||||
#gpx_content > .GPAREA:first-child {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
// Main Footer
|
||||
footer.main-footer {
|
||||
// vendor-prefix mixin
|
||||
@include vp-flex-shrink(0);
|
||||
// more in footer.scss
|
||||
}
|
||||
|
||||
// Fix for bad container paddings in navbars (as of Bootstrap 4.1.1)
|
||||
@include media-breakpoint-up(sm) {
|
||||
.navbar > .container,
|
||||
.navbar > .container-fluid {
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Align menu right, fix dropdown alignment
|
||||
.navbar-right {
|
||||
> .GPAREA:first-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
.dropdown-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// convert Typesetter grid to become Bootstrap 4 (flex) grid =====================
|
||||
.gpRow { @extend .row; }
|
||||
.gpCol-1 { @extend .col-md-1; }
|
||||
.gpCol-2 { @extend .col-md-2; }
|
||||
.gpCol-3 { @extend .col-md-3; }
|
||||
.gpCol-4 { @extend .col-md-4; }
|
||||
.gpCol-5 { @extend .col-md-5; }
|
||||
.gpCol-6 { @extend .col-md-6; }
|
||||
.gpCol-7 { @extend .col-md-7; }
|
||||
.gpCol-8 { @extend .col-md-8; }
|
||||
.gpCol-9 { @extend .col-md-9; }
|
||||
.gpCol-10 { @extend .col-md-10; }
|
||||
.gpCol-11 { @extend .col-md-11; }
|
||||
.gpCol-12 { @extend .col-12; }
|
||||
[class *= "gpCol-"] { margin-bottom: unset; }
|
||||
|
||||
// fixes for flex grid
|
||||
.filetype-wrapper_section.row {
|
||||
> .gpclear {
|
||||
display: none;
|
||||
}
|
||||
&:after{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Extra Content 'Dropdown Divider'
|
||||
.gpArea_Extra_Bootstrap_Dropdown_Divider {
|
||||
@extend .dropdown-divider;
|
||||
}
|
||||
|
||||
|
||||
// Admin Links
|
||||
.footer-bottom {
|
||||
> span {
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
.sitemap_link > a:before,
|
||||
.login_link > a:before {
|
||||
display: inline-block;
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
|
||||
.sitemap_link > a:before {
|
||||
content: "\f0ca\a0";
|
||||
}
|
||||
|
||||
.login_link > a:before {
|
||||
content: "\f2bd\a0";
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
// Theme Bootswatch 4 Scss
|
||||
// Compensations for fixed navbar
|
||||
// only required when the main navbar has the css class 'fixed-top'
|
||||
|
||||
// padding-top for the body element
|
||||
body {
|
||||
padding-top: $navbar-height;
|
||||
}
|
||||
|
||||
// Prevent targeted anchors hiding behind fixed navbar
|
||||
// default compensation
|
||||
.GPAREA a[name]:not([href]),
|
||||
.GPAREA a[id]:not([href]) {
|
||||
margin-top: calc( ( #{$navbar-height} + 2rem ) * -1 );
|
||||
padding-top: calc( #{$navbar-height} + 2rem );
|
||||
z-index: -5;
|
||||
}
|
||||
|
||||
// compensation when logged-in
|
||||
// with support for HideAdminUI plugin https://github.com/juek/HideAdminUI
|
||||
html:not(.override_admin_style) body.gpAdmin .GPAREA a[name]:not([href]),
|
||||
html:not(.override_admin_style) body.gpAdmin .GPAREA a[id]:not([href]) {
|
||||
margin-top: calc( ( #{$navbar-height} + 2rem + 29px ) * -1 );
|
||||
padding-top: calc( #{$navbar-height} + 2rem + 29px );
|
||||
}
|
||||
50
themes/Bootswatch5.2_Scss/_common/contactform.scss
Normal file
50
themes/Bootswatch5.2_Scss/_common/contactform.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
// Typesetter's built-in contact form
|
||||
|
||||
form.contactform {
|
||||
width: 100%;
|
||||
|
||||
label:not([for="contact_message"]) {
|
||||
width: auto;
|
||||
float: none;
|
||||
clear: both;
|
||||
margin: 0 0 0.6em 0;
|
||||
> span.title {
|
||||
display: block;
|
||||
float: none;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
input, textarea {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
input.submit.btn {
|
||||
float: none;
|
||||
width: auto;
|
||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||
}
|
||||
|
||||
> label[for="contact_message"] {
|
||||
width: auto;
|
||||
float: none;
|
||||
clear: both;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> textarea#contact_message {
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
|
||||
> .alert {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
55
themes/Bootswatch5.2_Scss/_common/dropdown.scss
Normal file
55
themes/Bootswatch5.2_Scss/_common/dropdown.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
/* Bootstrap 5 Multi-Level Dropdown CSS */
|
||||
|
||||
.dropdown-submenu {
|
||||
position: relative; /* Needed for submenu positioning */
|
||||
}
|
||||
|
||||
/* Style the submenu trigger link */
|
||||
.dropdown-submenu > .dropdown-item.dropdown-toggle {
|
||||
/* BS5 dropdown-item already uses flex, so alignment is often okay */
|
||||
}
|
||||
.dropdown-submenu > .dropdown-item.dropdown-toggle::after {
|
||||
content: '▸'; /* Right arrow indicator (or choose another) */
|
||||
display: inline-block;
|
||||
vertical-align: middle; /* Adjust as needed */
|
||||
border: none; /* Override Bootstrap's default caret */
|
||||
margin-inline-start: 0.5em; /* Space between text and arrow (RTL friendly) */
|
||||
}
|
||||
|
||||
|
||||
/* Hide submenu by default */
|
||||
.dropdown-submenu > .dropdown-menu {
|
||||
top: 0;
|
||||
/* Position to the side (RTL friendly) */
|
||||
inset-inline-start: 100%;
|
||||
margin-top: -1px; /* Align top edge (adjust as needed based on borders) */
|
||||
margin-inline-start: 0.1rem; /* Small gap (RTL friendly) */
|
||||
display: none; /* Hide by default */
|
||||
/* min-width: set if needed, BS5 dropdown-menu has its own logic */
|
||||
}
|
||||
|
||||
/* Show submenu on hover/focus */
|
||||
/* Using :hover on the LI and :focus-within for keyboard nav */
|
||||
.dropdown-submenu:hover > .dropdown-menu,
|
||||
.dropdown-submenu:focus-within > .dropdown-menu {
|
||||
display: block; /* Show */
|
||||
}
|
||||
|
||||
/* Optional: Adjust positioning for menus aligned to the end (right in LTR) */
|
||||
/* This requires the parent dropdown-menu to have .dropdown-menu-end */
|
||||
.dropdown-menu.dropdown-menu-end .dropdown-submenu > .dropdown-menu {
|
||||
inset-inline-start: auto; /* Unset side positioning */
|
||||
inset-inline-end: 100%; /* Position to the left (in LTR) */
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0.1rem;
|
||||
}
|
||||
|
||||
/* Optional: Ensure dropdown items don't wrap if text is long */
|
||||
.dropdown-item {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Optional: Improve keyboard navigation focus visibility */
|
||||
.dropdown-submenu > a:focus + .dropdown-menu {
|
||||
/* display: block; Might be redundant with focus-within */
|
||||
}
|
||||
102
themes/Bootswatch5.2_Scss/_common/footer.scss
Normal file
102
themes/Bootswatch5.2_Scss/_common/footer.scss
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
// footer variables
|
||||
// these are no Bootstrap standard variables
|
||||
// therefore we need to define default values
|
||||
|
||||
$footer-font-size: 0.875rem !default;
|
||||
$footer-bg: $gray-300 !default;
|
||||
$footer-border-top: none !default;
|
||||
$footer-color: $body-color !default;
|
||||
$footer-headings-color: $headings-color !default;
|
||||
$footer-link-color: $link-color !default;
|
||||
$footer-link-hover-color: $link-hover-color !default;
|
||||
|
||||
$footer-nav-bg: transparent !default;
|
||||
$footer-nav-item-border: none !default;
|
||||
$footer-nav-link-color: $footer-link-color !default;
|
||||
$footer-nav-link-bg: transparent !default;
|
||||
$footer-nav-link-hover-color: $footer-link-hover-color !default;
|
||||
$footer-nav-link-hover-bg: transparent !default;
|
||||
$footer-nav-link-active-color: $footer-link-hover-color !default;
|
||||
$footer-nav-link-active-bg: transparent !default;
|
||||
|
||||
|
||||
footer.main-footer {
|
||||
font-size: $footer-font-size;
|
||||
background: $footer-bg;
|
||||
border-top: $footer-border-top;
|
||||
color: $footer-color;
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3,
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
color: $footer-headings-color;
|
||||
}
|
||||
a {
|
||||
color: $footer-link-color;
|
||||
&:hover {
|
||||
color: $footer-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-nav,
|
||||
.footer-nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
margin: 0.6rem 0;
|
||||
background: $footer-nav-bg;
|
||||
border-bottom: $footer-nav-item-border;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-top: $footer-nav-item-border;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
a, a:hover, a:visited, a:active, a:focus {
|
||||
text-decoration: none;
|
||||
color: $footer-nav-link-color;
|
||||
background: $footer-nav-link-bg;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0.4rem 0;
|
||||
|
||||
&.active {
|
||||
color: $footer-nav-link-active-color;
|
||||
background: $footer-nav-link-active-bg;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
color: $footer-nav-link-hover-color;
|
||||
background: $footer-nav-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// 2nd level links
|
||||
> li > ul > li > a {
|
||||
text-indent: 1em;
|
||||
}
|
||||
|
||||
// 3rd level links
|
||||
> li > ul > li > ul > li > a {
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
}
|
||||
88
themes/Bootswatch5.2_Scss/cerulean/_bootswatch.scss
Normal file
88
themes/Bootswatch5.2_Scss/cerulean/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
// Cerulean 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Mixins
|
||||
|
||||
@mixin btn-shadow($color){
|
||||
@include gradient-y-three-colors(tint-color($color, 16%), $color, 60%, shade-color($color, 6%));
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
@each $color, $value in $theme-colors {
|
||||
&.bg-#{$color} {
|
||||
@include btn-shadow($value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand,
|
||||
.nav-link {
|
||||
text-shadow: $text-shadow;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
text-shadow: $text-shadow;
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-outline-secondary {
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-#{$color} {
|
||||
@include btn-shadow($value);
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
.text-secondary {
|
||||
color: $gray-500 !important;
|
||||
}
|
||||
|
||||
.bg-primary,
|
||||
.bg-success,
|
||||
.bg-info,
|
||||
.bg-warning,
|
||||
.bg-danger,
|
||||
.bg-dark {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.dropdown-menu {
|
||||
.dropdown-header {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.badge {
|
||||
&.bg-secondary,
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
61
themes/Bootswatch5.2_Scss/cerulean/_variables.scss
Normal file
61
themes/Bootswatch5.2_Scss/cerulean/_variables.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
// Cerulean 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "cerulean" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #033c73 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #c71c22 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #dd5600 !default;
|
||||
$green: #73a839 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #2fa4e7 !default;
|
||||
|
||||
$primary: $cyan !default;
|
||||
$secondary: $gray-200 !default;
|
||||
$success: $green !default;
|
||||
$info: $blue !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 2.75 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-700 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
$headings-color: $cyan !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-link-color: $body-color !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $primary !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-color: rgba($white, .8) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
1
themes/Bootswatch5.2_Scss/cerulean/index.html
Normal file
1
themes/Bootswatch5.2_Scss/cerulean/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
35
themes/Bootswatch5.2_Scss/cerulean/style.scss
Normal file
35
themes/Bootswatch5.2_Scss/cerulean/style.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
@mixin btn-shadow($color){
|
||||
@include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));
|
||||
}
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
// Tables ======================================================================
|
||||
|
||||
// Forms =======================================================================
|
||||
|
||||
// Navs ========================================================================
|
||||
|
||||
// Indicators ==================================================================
|
||||
|
||||
// Progress bars ===============================================================
|
||||
|
||||
// Containers ==================================================================
|
||||
|
||||
// Variables
|
||||
|
||||
39
themes/Bootswatch5.2_Scss/cosmo/_bootswatch.scss
Normal file
39
themes/Bootswatch5.2_Scss/cosmo/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
// Cosmo 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.badge {
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Progress bars
|
||||
|
||||
.progress {
|
||||
@include box-shadow(none);
|
||||
|
||||
.progress-bar {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
}
|
||||
69
themes/Bootswatch5.2_Scss/cosmo/_variables.scss
Normal file
69
themes/Bootswatch5.2_Scss/cosmo/_variables.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
// Cosmo 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "cosmo" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #373a3c !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #2780e3 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #613d7c !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #ff0039 !default;
|
||||
$orange: #f0ad4e !default;
|
||||
$yellow: #ff7518 !default;
|
||||
$green: #3fb618 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #9954bb !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-800 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 2.6 !default;
|
||||
|
||||
// Options
|
||||
|
||||
$enable-rounded: false !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-800 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$headings-font-weight: 400 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-hover-color: rgba($white, 1) !default;
|
||||
$navbar-light-hover-color: rgba($black, .9) !default;
|
||||
|
||||
// Alerts
|
||||
|
||||
$alert-border-width: 0 !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-height: .5rem !default;
|
||||
1
themes/Bootswatch5.2_Scss/cosmo/index.html
Normal file
1
themes/Bootswatch5.2_Scss/cosmo/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
43
themes/Bootswatch5.2_Scss/cosmo/style.scss
Normal file
43
themes/Bootswatch5.2_Scss/cosmo/style.scss
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
// Navbar =======================================================================
|
||||
|
||||
// Buttons =====================================================================
|
||||
|
||||
// Typography ==================================================================
|
||||
|
||||
// Tables ======================================================================
|
||||
|
||||
// Forms =======================================================================
|
||||
|
||||
// Navs ========================================================================
|
||||
|
||||
// Indicators ==================================================================
|
||||
|
||||
// Progress bars ===============================================================
|
||||
.progress {
|
||||
@include box-shadow(none);
|
||||
|
||||
.progress-bar {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers ==================================================================
|
||||
148
themes/Bootswatch5.2_Scss/cyborg/_bootswatch.scss
Normal file
148
themes/Bootswatch5.2_Scss/cyborg/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
// Cyborg 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
&.bg-primary {
|
||||
border: 1px solid $gray-700;
|
||||
}
|
||||
|
||||
&.bg-dark {
|
||||
background-color: $body-bg !important;
|
||||
border: 1px solid $gray-700;
|
||||
}
|
||||
|
||||
&.bg-light {
|
||||
background-color: $gray-500 !important;
|
||||
}
|
||||
|
||||
&.fixed-top {
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
&.fixed-bottom {
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@if $enable-gradients {
|
||||
background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
|
||||
} @else {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
legend {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
color-scheme: light;
|
||||
background-clip: border-box;
|
||||
|
||||
&:disabled,
|
||||
&[readonly] {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav-tabs,
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-700;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&.disabled:hover {
|
||||
color: $nav-link-disabled-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
color: $white;
|
||||
border: none;
|
||||
|
||||
a,
|
||||
.alert-link {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@if $enable-gradients {
|
||||
background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
|
||||
} @else {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.bg-dark {
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.list-group-item-action {
|
||||
|
||||
&:hover {
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
&-title {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
181
themes/Bootswatch5.2_Scss/cyborg/_variables.scss
Normal file
181
themes/Bootswatch5.2_Scss/cyborg/_variables.scss
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
// Cyborg 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "cyborg" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #adafae !default;
|
||||
$gray-500: #888 !default;
|
||||
$gray-600: #555 !default;
|
||||
$gray-700: #282828 !default;
|
||||
$gray-800: #222 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #2a9fd6 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #c00 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #f80 !default;
|
||||
$green: #77b300 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #93c !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-800 !default;
|
||||
$dark: $gray-400 !default;
|
||||
|
||||
$min-contrast-ratio: 2.25 !default;
|
||||
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: #060606 !default;
|
||||
$body-color: $gray-400 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !default;
|
||||
$h1-font-size: 4rem !default;
|
||||
$h2-font-size: 3rem !default;
|
||||
$h3-font-size: 2.5rem !default;
|
||||
$h4-font-size: 2rem !default;
|
||||
$h5-font-size: 1.5rem !default;
|
||||
$headings-color: $white !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-color: $white !default;
|
||||
$table-accent-bg: rgba($white, .05) !default;
|
||||
$table-hover-bg: rgba($white, .075) !default;
|
||||
$table-border-color: $gray-700 !default;
|
||||
$table-dark-bg: $gray-500 !default;
|
||||
$table-dark-border-color: darken($gray-500, 7.5%) !default;
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$input-btn-padding-x: 1rem !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-bg: $white !default;
|
||||
$input-disabled-bg: $gray-400 !default;
|
||||
|
||||
$input-color: $gray-900 !default;
|
||||
$input-border-color: $white !default;
|
||||
$input-border-width: 0 !default;
|
||||
|
||||
$input-group-addon-color: $white !default;
|
||||
$input-group-addon-bg: $gray-700 !default;
|
||||
$input-group-addon-border-color: transparent !default;
|
||||
|
||||
$form-check-input-bg: $white !default;
|
||||
$form-check-input-border: none !default;
|
||||
|
||||
$form-file-button-color: $white !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-bg: $gray-700 !default;
|
||||
$dropdown-divider-bg: $gray-800 !default;
|
||||
$dropdown-link-color: $white !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $primary !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-tabs-border-color: $table-border-color !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color !default;
|
||||
$nav-tabs-link-active-color: $white !default;
|
||||
$nav-tabs-link-active-bg: $nav-tabs-border-color !default;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: $gray-700 !default;
|
||||
$pagination-border-color: transparent !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: $primary !default;
|
||||
$pagination-hover-border-color: $pagination-border-color !default;
|
||||
$pagination-disabled-bg: $pagination-bg !default;
|
||||
$pagination-disabled-border-color: $pagination-border-color !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-bg: $gray-700 !default;
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-bg: $gray-700 !default;
|
||||
$tooltip-opacity: 1 !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-bg: $gray-700 !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-color: $white !default;
|
||||
$toast-background-color: $gray-800 !default;
|
||||
$toast-border-color: $gray-700 !default;
|
||||
$toast-header-color: $body-color !default;
|
||||
$toast-header-background-color: $toast-background-color !default;
|
||||
$toast-header-border-color: $toast-border-color !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-bg: $gray-800 !default;
|
||||
$modal-header-border-color: $gray-700 !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $gray-700 !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-color: $white !default;
|
||||
$list-group-bg: $gray-800 !default;
|
||||
$list-group-border-color: $gray-700 !default;
|
||||
$list-group-hover-bg: $primary !default;
|
||||
$list-group-disabled-bg: $gray-700 !default;
|
||||
$list-group-action-color: $white !default;
|
||||
$list-group-action-active-bg: $primary !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-bg: $gray-700 !default;
|
||||
$breadcrumb-border-radius: .25rem !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: .6 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
|
||||
// Code
|
||||
|
||||
$pre-color: inherit !default;
|
||||
1
themes/Bootswatch5.2_Scss/cyborg/index.html
Normal file
1
themes/Bootswatch5.2_Scss/cyborg/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
19
themes/Bootswatch5.2_Scss/cyborg/style.scss
Normal file
19
themes/Bootswatch5.2_Scss/cyborg/style.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
|
||||
84
themes/Bootswatch5.2_Scss/darkly/_bootswatch.scss
Normal file
84
themes/Bootswatch5.2_Scss/darkly/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
// Darkly 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
.blockquote {
|
||||
&-footer {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
.form-control {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.form-floating > label {
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav-tabs,
|
||||
.nav-pills {
|
||||
.nav-link,
|
||||
.nav-link.active,
|
||||
.nav-link.active:focus,
|
||||
.nav-link.active:hover,
|
||||
.nav-item.open .nav-link,
|
||||
.nav-item.open .nav-link:focus,
|
||||
.nav-item.open .nav-link:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
color: $white;
|
||||
border: none;
|
||||
|
||||
a,
|
||||
.alert-link {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@if $enable-gradients {
|
||||
background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
|
||||
} @else {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
173
themes/Bootswatch5.2_Scss/darkly/_variables.scss
Normal file
173
themes/Bootswatch5.2_Scss/darkly/_variables.scss
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
// Darkly 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "darkly" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #ebebeb !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #888 !default;
|
||||
$gray-700: #444 !default;
|
||||
$gray-800: #303030 !default;
|
||||
$gray-900: #222 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #375a7f !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #e74c3c !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #f39c12 !default;
|
||||
$green: #00bc8c !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #3498db !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-700 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-500 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 1.9 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: $gray-900 !default;
|
||||
$body-color: $white !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $success !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$h1-font-size: 3rem !default;
|
||||
$h2-font-size: 2.5rem !default;
|
||||
$h3-font-size: 2rem !default;
|
||||
$text-muted: $gray-600 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-border-color: $gray-700 !default;
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-bg: $white !default;
|
||||
$input-color: $gray-800 !default;
|
||||
$input-border-color: $body-bg !default;
|
||||
$input-group-addon-color: $gray-500 !default;
|
||||
$input-group-addon-bg: $gray-700 !default;
|
||||
|
||||
$form-check-input-bg: $white !default;
|
||||
$form-check-input-border: none !default;
|
||||
|
||||
$form-file-button-color: $white !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-bg: $gray-900 !default;
|
||||
$dropdown-border-color: $gray-700 !default;
|
||||
$dropdown-divider-bg: $gray-700 !default;
|
||||
$dropdown-link-color: $white !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $primary !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-padding-x: 2rem !default;
|
||||
$nav-link-disabled-color: $gray-500 !default;
|
||||
$nav-tabs-border-color: $gray-700 !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
|
||||
$nav-tabs-link-active-color: $white !default;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 1rem !default;
|
||||
$navbar-dark-color: rgba($white, .6) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-light-color: rgba($gray-900, .7) !default;
|
||||
$navbar-light-hover-color: $gray-900 !default;
|
||||
$navbar-light-active-color: $gray-900 !default;
|
||||
$navbar-light-toggler-border-color: rgba($gray-900, .1) !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: $success !default;
|
||||
$pagination-border-width: 0 !default;
|
||||
$pagination-border-color: transparent !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: lighten($success, 10%) !default;
|
||||
$pagination-hover-border-color: transparent !default;
|
||||
$pagination-active-bg: $pagination-hover-bg !default;
|
||||
$pagination-active-border-color: transparent !default;
|
||||
$pagination-disabled-color: $white !default;
|
||||
$pagination-disabled-bg: darken($success, 15%) !default;
|
||||
$pagination-disabled-border-color: transparent !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-cap-bg: $gray-700 !default;
|
||||
$card-bg: $gray-800 !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-bg: $gray-800 !default;
|
||||
$popover-header-bg: $gray-700 !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-background-color: $gray-700 !default;
|
||||
$toast-header-background-color: $gray-800 !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-bg: $gray-800 !default;
|
||||
$modal-content-border-color: $gray-700 !default;
|
||||
$modal-header-border-color: $gray-700 !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $gray-700 !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-color: $body-color !default;
|
||||
$list-group-bg: $gray-800 !default;
|
||||
$list-group-border-color: $gray-700 !default;
|
||||
$list-group-hover-bg: $gray-700 !default;
|
||||
$list-group-action-hover-color: $list-group-color !default;
|
||||
$list-group-action-active-bg: $gray-900 !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-bg: $gray-700 !default;
|
||||
$breadcrumb-border-radius: .25rem !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: .4 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
|
||||
// Code
|
||||
|
||||
$pre-color: inherit !default;
|
||||
1
themes/Bootswatch5.2_Scss/darkly/index.html
Normal file
1
themes/Bootswatch5.2_Scss/darkly/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
18
themes/Bootswatch5.2_Scss/darkly/style.scss
Normal file
18
themes/Bootswatch5.2_Scss/darkly/style.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
45
themes/Bootswatch5.2_Scss/drop_down_menu.php
Normal file
45
themes/Bootswatch5.2_Scss/drop_down_menu.php
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
<?php
|
||||
|
||||
$GP_MENU_ELEMENTS = 'Bootstrap5_menu';
|
||||
|
||||
/**
|
||||
* Generates menu link elements compatible with Bootstrap 5.2 navbars/dropdowns.
|
||||
*/
|
||||
function Bootstrap5_menu($node, $attributes, $level, $menu_id, $item_position){
|
||||
GLOBAL $GP_MENU_LINKS;
|
||||
|
||||
if( $node == 'a' ){
|
||||
$strpos_class = strpos($attributes['attr'], 'class="');
|
||||
$add_class = ( $level > 0 ) ? "dropdown-item" : "nav-link";
|
||||
|
||||
if( $strpos_class === false ){
|
||||
$attributes['attr'] .= ' class="' . $add_class . '"';
|
||||
$strpos_class = strpos($attributes['attr'], 'class="');
|
||||
} else {
|
||||
$attributes['attr'] = substr($attributes['attr'], 0, $strpos_class + 7)
|
||||
. $add_class . ' '
|
||||
. substr($attributes['attr'], $strpos_class + 7);
|
||||
}
|
||||
|
||||
// Ensure 'title' is included if it might be used in $GP_MENU_LINKS
|
||||
$search = array('{$href_text}', '{$attr}', '{$label}', '{$title}');
|
||||
|
||||
if( isset($attributes['class']) && is_array($attributes['class']) && in_array('dropdown-toggle', $attributes['class']) ){
|
||||
$format = '<a {$attr} data-bs-toggle="dropdown" href="{$href_text}">{$label}</a>';
|
||||
} else {
|
||||
if (isset($GP_MENU_LINKS) && !empty($GP_MENU_LINKS)) {
|
||||
$format = $GP_MENU_LINKS;
|
||||
} else {
|
||||
$format = '<a {$attr} href="{$href_text}">{$label}</a>';
|
||||
}
|
||||
}
|
||||
|
||||
return str_replace( $search, $attributes, $format );
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
|
||||
91
themes/Bootswatch5.2_Scss/flatly/_bootswatch.scss
Normal file
91
themes/Bootswatch5.2_Scss/flatly/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
// Flatly 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.bg-primary {
|
||||
.navbar-nav .show > .nav-link,
|
||||
.navbar-nav .nav-link.active,
|
||||
.navbar-nav .nav-link:hover,
|
||||
.navbar-nav .nav-link:focus {
|
||||
color: $success !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav-tabs {
|
||||
.nav-link.active,
|
||||
.nav-link.active:focus,
|
||||
.nav-link.active:hover,
|
||||
.nav-item.open .nav-link,
|
||||
.nav-item.open .nav-link:focus,
|
||||
.nav-item.open .nav-link:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.badge {
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
color: $white;
|
||||
border: none;
|
||||
|
||||
a,
|
||||
.alert-link {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@if $enable-gradients {
|
||||
background: $value linear-gradient(180deg, mix($body-bg, $value, 15%), $value) repeat-x;
|
||||
} @else {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-light {
|
||||
&,
|
||||
a,
|
||||
.alert-link {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.modal,
|
||||
.toast,
|
||||
.offcanvas {
|
||||
.btn-close {
|
||||
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$black}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
|
||||
}
|
||||
}
|
||||
113
themes/Bootswatch5.2_Scss/flatly/_variables.scss
Normal file
113
themes/Bootswatch5.2_Scss/flatly/_variables.scss
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
// Flatly 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "flatly" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #ecf0f1 !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #b4bcc2 !default;
|
||||
$gray-600: #95a5a6 !default;
|
||||
$gray-700: #7b8a8b !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #2c3e50 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #e74c3c !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #f39c12 !default;
|
||||
$green: #18bc9c !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #3498db !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-200 !default;
|
||||
$dark: $gray-700 !default;
|
||||
|
||||
$min-contrast-ratio: 2.05 !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $success !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$h1-font-size: 3rem !default;
|
||||
$h2-font-size: 2.5rem !default;
|
||||
$h3-font-size: 2rem !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-link-color: $gray-700 !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $primary !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-padding-y: .5rem !default !default;
|
||||
$nav-link-padding-x: 2rem !default;
|
||||
$nav-link-disabled-color: $gray-600 !default !default;
|
||||
$nav-tabs-border-color: $gray-200 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 1rem !default;
|
||||
$navbar-dark-color: $white !default;
|
||||
$navbar-dark-hover-color: $primary !default;
|
||||
$navbar-dark-active-color: $primary !default;
|
||||
|
||||
$navbar-dark-brand-color: $white !default;
|
||||
$navbar-dark-brand-hover-color: $navbar-dark-brand-color !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: $success !default;
|
||||
$pagination-border-width: 0 !default;
|
||||
$pagination-border-color: transparent !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: darken($success, 15%) !default;
|
||||
$pagination-hover-border-color: transparent !default;
|
||||
$pagination-active-bg: $pagination-hover-bg !default;
|
||||
$pagination-active-border-color: transparent !default;
|
||||
$pagination-disabled-color: $gray-200 !default;
|
||||
$pagination-disabled-bg: lighten($success, 15%) !default;
|
||||
$pagination-disabled-border-color: transparent !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-hover-bg: $gray-200 !default;
|
||||
$list-group-disabled-bg: $gray-200 !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-border-radius: .25rem !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: .4 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
1
themes/Bootswatch5.2_Scss/flatly/index.html
Normal file
1
themes/Bootswatch5.2_Scss/flatly/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
18
themes/Bootswatch5.2_Scss/flatly/style.scss
Normal file
18
themes/Bootswatch5.2_Scss/flatly/style.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
1
themes/Bootswatch5.2_Scss/index.html
Normal file
1
themes/Bootswatch5.2_Scss/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
67
themes/Bootswatch5.2_Scss/journal/_bootswatch.scss
Normal file
67
themes/Bootswatch5.2_Scss/journal/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
// Journal 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=News+Cycle:wght@400;700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.bg-dark {
|
||||
background-color: $black !important;
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
color: $black;
|
||||
background-color: $white !important;
|
||||
border: 1px solid $gray-200;
|
||||
|
||||
&.navbar-fixed-top {
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
&.navbar-fixed-bottom {
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
font-family: $headings-font-family;
|
||||
font-size: 18px;
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: .5rem;
|
||||
font-size: inherit;
|
||||
font-weight: $headings-font-weight;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
font-family: $headings-font-family;
|
||||
font-weight: $headings-font-weight;
|
||||
|
||||
&-secondary,
|
||||
&-warning {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.pagination {
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
64
themes/Bootswatch5.2_Scss/journal/_variables.scss
Normal file
64
themes/Bootswatch5.2_Scss/journal/_variables.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
// Journal 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "journal" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #eee !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #aaa !default;
|
||||
$gray-600: #777 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #333 !default;
|
||||
$gray-900: #222 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #eb6864 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #f57a00 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #f5e625 !default;
|
||||
$green: #22b24c !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #369 !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-500 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-900 !default;
|
||||
|
||||
$min-contrast-ratio: 1.28 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
$headings-font-family: "News Cycle", "Arial Narrow Bold", sans-serif !default;
|
||||
$headings-font-weight: 700 !default;
|
||||
$headings-line-height: 1.1 !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$input-btn-padding-x: 1rem !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-light-color: rgba($black, .7) !default;
|
||||
$navbar-light-hover-color: $black !default;
|
||||
$navbar-light-active-color: $black !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: $primary !default;
|
||||
$pagination-hover-border-color: $primary !default;
|
||||
1
themes/Bootswatch5.2_Scss/journal/index.html
Normal file
1
themes/Bootswatch5.2_Scss/journal/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
17
themes/Bootswatch5.2_Scss/journal/style.scss
Normal file
17
themes/Bootswatch5.2_Scss/journal/style.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
119
themes/Bootswatch5.2_Scss/litera/_bootswatch.scss
Normal file
119
themes/Bootswatch5.2_Scss/litera/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
// Litera 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
font-size: $font-size-sm;
|
||||
|
||||
&.bg-dark {
|
||||
background-color: $success !important;
|
||||
}
|
||||
|
||||
&.bg-light {
|
||||
background-color: $white !important;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
|
||||
&.navbar-fixed-top {
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
&.navbar-fixed-bottom {
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
p {
|
||||
font-family: $font-family-serif;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-family: $font-family-sans-serif;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
table,
|
||||
.table {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav,
|
||||
.breadcrumb,
|
||||
.pagination {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
font-size: $font-size-sm;
|
||||
color: $white;
|
||||
|
||||
&,
|
||||
p {
|
||||
font-family: $font-family-sans-serif;
|
||||
}
|
||||
|
||||
a,
|
||||
.alert-link {
|
||||
font-weight: 400;
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@if $enable-gradients {
|
||||
background: $value linear-gradient($value, mix($body-bg, $value, 15%)) repeat-x;
|
||||
} @else {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-light {
|
||||
&,
|
||||
a,
|
||||
.alert-link {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.list-group {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
100
themes/Bootswatch5.2_Scss/litera/_variables.scss
Normal file
100
themes/Bootswatch5.2_Scss/litera/_variables.scss
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
// Litera 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "litera" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #ddd !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #4582ec !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #d9534f !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #f0ad4e !default;
|
||||
$green: #02b875 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #17a2b8 !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-500 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 1.85 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-800 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable value-keyword-case
|
||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
||||
$font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif !default;
|
||||
// stylelint-enable
|
||||
|
||||
$font-size-base: 1.1rem !default;
|
||||
$headings-font-weight: 700 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-border-color: rgba(0, 0, 0, .1) !default;
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$input-btn-padding-y: .5rem !default;
|
||||
$input-btn-padding-x: 1.1rem !default;
|
||||
$btn-font-family: $font-family-sans-serif !default;
|
||||
$btn-font-size: .875rem !default;
|
||||
$btn-font-size-sm: .688rem !default;
|
||||
|
||||
$btn-border-radius: 1.078em !default;
|
||||
$btn-border-radius-lg: 2.688em !default;
|
||||
$btn-border-radius-sm: .844em !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-border-color: rgba(0, 0, 0, .1) !default;
|
||||
$input-group-addon-bg: $gray-200 !default !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-color: rgba($white, .6) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-light-hover-color: $body-color !default;
|
||||
$navbar-light-active-color: $body-color !default;
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-font-size: 11px !default;
|
||||
|
||||
// Badges
|
||||
|
||||
$badge-font-weight: 400 !default;
|
||||
$badge-padding-y: .6em !default;
|
||||
$badge-padding-x: 1.2em !default;
|
||||
|
||||
// Alerts
|
||||
|
||||
$alert-border-width: 0 !default;
|
||||
1
themes/Bootswatch5.2_Scss/litera/index.html
Normal file
1
themes/Bootswatch5.2_Scss/litera/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
18
themes/Bootswatch5.2_Scss/litera/style.scss
Normal file
18
themes/Bootswatch5.2_Scss/litera/style.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
330
themes/Bootswatch5.2_Scss/lumen/_bootswatch.scss
Normal file
330
themes/Bootswatch5.2_Scss/lumen/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,330 @@
|
|||
// Lumen 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Mixins
|
||||
|
||||
@mixin shadow($width: 4px){
|
||||
border-style: solid;
|
||||
border-width: 0 1px $width 1px;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
@include shadow();
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.bg-#{$color} {
|
||||
border-color: shade-color($value, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
@include shadow();
|
||||
text-transform: uppercase;
|
||||
|
||||
&:not(.disabled):hover {
|
||||
margin-top: 1px;
|
||||
border-bottom-width: 3px;
|
||||
}
|
||||
|
||||
&:not(.disabled):active {
|
||||
margin-top: 2px;
|
||||
border-bottom-width: 2px;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: $value;
|
||||
}
|
||||
|
||||
&,
|
||||
&:not(.disabled):hover,
|
||||
&:not(.disabled):active,
|
||||
&:focus {
|
||||
border-color: shade-color($value, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
[class*="btn-outline"] {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.btn-group-vertical {
|
||||
.btn + .btn {
|
||||
&:hover {
|
||||
margin-top: -1px;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
margin-top: -1px;
|
||||
border-top-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
.text-secondary {
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
.form-control {
|
||||
box-shadow: inset 0 2px 0 rgba(0, 0, 0, .075);
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav {
|
||||
.open > a,
|
||||
.open > a:hover,
|
||||
.open > a:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
color: $body-color;
|
||||
|
||||
&,
|
||||
&.disabled,
|
||||
&.disabled:hover,
|
||||
&.disabled:focus {
|
||||
margin-top: 6px;
|
||||
border-color: $nav-tabs-border-color;
|
||||
transition: padding-bottom .2s ease-in-out, margin-top .2s ease-in-out, border-bottom .2s ease-in-out;
|
||||
}
|
||||
|
||||
&:not(.disabled):hover,
|
||||
&:not(.disabled):focus,
|
||||
&.active {
|
||||
padding-bottom: add(.5rem, 6px);
|
||||
margin-top: 0;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-justified > li {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
@include shadow();
|
||||
border-top-width: 1px;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
border-color: shade-color($breadcrumb-bg, 10%);
|
||||
@include shadow();
|
||||
}
|
||||
|
||||
.pagination {
|
||||
> li > a,
|
||||
> li > span {
|
||||
position: relative;
|
||||
top: 0;
|
||||
font-weight: 700;
|
||||
color: $pagination-color;
|
||||
text-transform: uppercase;
|
||||
@include shadow();
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
top: 1px;
|
||||
text-decoration: none;
|
||||
border-bottom-width: 3px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
top: 2px;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
> .disabled > a,
|
||||
> .disabled > span {
|
||||
&:hover {
|
||||
top: 0;
|
||||
@include shadow();
|
||||
}
|
||||
|
||||
&:active {
|
||||
top: 0;
|
||||
@include shadow();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pager {
|
||||
> li > a,
|
||||
> li > span,
|
||||
> .disabled > a,
|
||||
> .disabled > span {
|
||||
&,
|
||||
&:hover,
|
||||
&:active {
|
||||
border-right-width: 2px;
|
||||
border-left-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.btn-close {
|
||||
text-decoration: none;
|
||||
opacity: .4;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
color: $white;
|
||||
@include shadow();
|
||||
|
||||
&-primary {
|
||||
background-color: $primary;
|
||||
border-color: shade-color($primary, 10%);
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
background-color: $secondary;
|
||||
border-color: shade-color($secondary, 10%);
|
||||
}
|
||||
|
||||
&-success {
|
||||
background-color: $success;
|
||||
border-color: shade-color($success, 10%);
|
||||
}
|
||||
|
||||
&-info {
|
||||
background-color: $info;
|
||||
border-color: shade-color($info, 10%);
|
||||
}
|
||||
|
||||
&-danger {
|
||||
background-color: $danger;
|
||||
border-color: shade-color($danger, 10%);
|
||||
}
|
||||
|
||||
&-warning {
|
||||
background-color: $warning;
|
||||
border-color: shade-color($warning, 10%);
|
||||
}
|
||||
|
||||
&-dark {
|
||||
background-color: $dark;
|
||||
border-color: shade-color($dark, 10%);
|
||||
}
|
||||
|
||||
&-light {
|
||||
background-color: $light;
|
||||
border-color: shade-color($light, 10%);
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
font-weight: 400;
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&-secondary,
|
||||
&-light {
|
||||
&,
|
||||
a,
|
||||
.alert-link {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.bg-secondary,
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
a.list-group-item {
|
||||
&-success {
|
||||
&.active {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
background-color: shade-color($success, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
&.active {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
background-color: shade-color($warning, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&-danger {
|
||||
&.active {
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
background-color: shade-color($danger, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal,
|
||||
.toast,
|
||||
.offcanvas {
|
||||
.btn-close {
|
||||
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$black}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
|
||||
}
|
||||
}
|
||||
93
themes/Bootswatch5.2_Scss/lumen/_variables.scss
Normal file
93
themes/Bootswatch5.2_Scss/lumen/_variables.scss
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
// Lumen 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "lumen" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f6f6f6 !default;
|
||||
$gray-200: #f0f0f0 !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #999 !default;
|
||||
$gray-700: #555 !default;
|
||||
$gray-800: #333 !default;
|
||||
$gray-900: #222 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #158cba !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #ff4136 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ff851b !default;
|
||||
$green: #28b62c !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #75caeb !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-200 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-700 !default;
|
||||
|
||||
$min-contrast-ratio: 1.75 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-font-weight: 700 !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-link-color: rgba(0, 0, 0, .5) !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-tabs-border-color: $gray-200 !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color !default;
|
||||
$nav-tabs-link-active-color: $gray-900 !default;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $gray-700 !default;
|
||||
$pagination-bg: $gray-200 !default;
|
||||
$pagination-hover-color: $pagination-color !default;
|
||||
$pagination-hover-bg: $pagination-bg !default;
|
||||
$pagination-active-border-color: darken($primary, 5%) !default;
|
||||
$pagination-disabled-color: $gray-600 !default;
|
||||
$pagination-disabled-bg: $pagination-bg !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-bg: $pagination-bg !default;
|
||||
$breadcrumb-border-radius: .25rem !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-border-color: rgba($black, .1) !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: .4 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
1
themes/Bootswatch5.2_Scss/lumen/index.html
Normal file
1
themes/Bootswatch5.2_Scss/lumen/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
23
themes/Bootswatch5.2_Scss/lumen/style.scss
Normal file
23
themes/Bootswatch5.2_Scss/lumen/style.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
@mixin shadow($width: 4px){
|
||||
border-style: solid;
|
||||
border-width: 0 1px $width 1px;
|
||||
}
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
@import '_variables.scss';
|
||||
|
||||
|
||||
178
themes/Bootswatch5.2_Scss/lux/_bootswatch.scss
Normal file
178
themes/Bootswatch5.2_Scss/lux/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
// Lux 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
|
||||
&-nav {
|
||||
.nav-link {
|
||||
padding-top: .715rem;
|
||||
padding-bottom: .715rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-brand {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
|
||||
&.navbar-fixed-top {
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
&.navbar-bottom-top {
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
font-size: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
|
||||
&-sm {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
&-warning {
|
||||
&,
|
||||
&:hover,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:focus {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
color: $gray-600;
|
||||
border-color: $gray-600;
|
||||
|
||||
&:not([disabled]):not(.disabled):hover,
|
||||
&:not([disabled]):not(.disabled):focus,
|
||||
&:not([disabled]):not(.disabled):active {
|
||||
color: $white;
|
||||
background-color: $gray-400;
|
||||
border-color: $gray-400;
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):focus {
|
||||
box-shadow: 0 0 0 .2rem rgba($gray-400, .5);
|
||||
}
|
||||
}
|
||||
|
||||
[class*="btn-outline-"] {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.border-secondary {
|
||||
border: 1px solid $gray-400 !important;
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
body {
|
||||
font-weight: 200;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: $body-color !important;
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
th {
|
||||
font-size: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.table {
|
||||
th,
|
||||
td {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
&-sm {
|
||||
th,
|
||||
td {
|
||||
padding: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.dropdown-menu {
|
||||
font-size: $font-size-sm;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.badge {
|
||||
padding-top: .28rem;
|
||||
|
||||
&-pill {
|
||||
border-radius: 10rem;
|
||||
}
|
||||
|
||||
&.bg-secondary,
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.list-group-item,
|
||||
.card {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
103
themes/Bootswatch5.2_Scss/lux/_variables.scss
Normal file
103
themes/Bootswatch5.2_Scss/lux/_variables.scss
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
// Lux 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "lux" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #f7f7f9 !default;
|
||||
$gray-300: #eceeef !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #919aa1 !default;
|
||||
$gray-700: #55595c !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #1a1a1a !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #d9534f !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #f0ad4e !default;
|
||||
$green: #4bbf73 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #1f9bcf !default;
|
||||
|
||||
$primary: $gray-900 !default;
|
||||
$secondary: $white !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $white !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 2.3 !default;
|
||||
|
||||
// Options
|
||||
|
||||
$enable-rounded: false !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-700 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$h1-font-size: 2rem !default;
|
||||
$h2-font-size: 1.75rem !default;
|
||||
$h3-font-size: 1.5rem !default;
|
||||
$h4-font-size: 1.25rem !default;
|
||||
$h5-font-size: 1rem !default;
|
||||
$h6-font-size: .75rem !default;
|
||||
$headings-font-weight: 600 !default;
|
||||
$headings-color: $gray-900 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-border-color: rgba(0, 0, 0, .05) !default;
|
||||
|
||||
// Buttons + Forms
|
||||
|
||||
$input-btn-border-width: 0 !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-line-height: 1.5rem !default;
|
||||
$input-btn-padding-y: .75rem !default;
|
||||
$input-btn-padding-x: 1.5rem !default;
|
||||
$input-btn-padding-y-sm: .5rem !default;
|
||||
$input-btn-padding-x-sm: 1rem !default;
|
||||
$input-btn-padding-y-lg: 2rem !default;
|
||||
$input-btn-padding-x-lg: 2rem !default;
|
||||
$btn-font-weight: 600 !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-line-height: 1.5 !default;
|
||||
$input-bg: $gray-200 !default;
|
||||
$input-disabled-bg: $gray-300 !default;
|
||||
$input-group-addon-bg: $gray-300 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 1.5rem !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-light-color: rgba($black, .3) !default;
|
||||
$navbar-light-hover-color: $gray-900 !default;
|
||||
$navbar-light-active-color: $gray-900 !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-border-color: transparent !default;
|
||||
$pagination-hover-border-color: $pagination-border-color !default;
|
||||
$pagination-disabled-border-color: $pagination-border-color !default;
|
||||
1
themes/Bootswatch5.2_Scss/lux/index.html
Normal file
1
themes/Bootswatch5.2_Scss/lux/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
18
themes/Bootswatch5.2_Scss/lux/style.scss
Normal file
18
themes/Bootswatch5.2_Scss/lux/style.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
|
||||
662
themes/Bootswatch5.2_Scss/materia/_bootswatch.scss
Normal file
662
themes/Bootswatch5.2_Scss/materia/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,662 @@
|
|||
// Materia 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Mixins
|
||||
|
||||
@mixin ripple($color) {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
background-position: 50%;
|
||||
background-size: 1000% 1000%;
|
||||
border: none;
|
||||
opacity: 0;
|
||||
transition: background .5s, opacity 1s;
|
||||
@include gradient-radial($color 10%, transparent 10.01%);
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
background-size: 0 0;
|
||||
opacity: .2;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btn($class,$bg,$color) {
|
||||
.btn-#{$class} {
|
||||
&:focus {
|
||||
background-color: $bg;
|
||||
box-shadow: 0 0 0 2px rgba(204, 204, 204, .5);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active:hover {
|
||||
background-color: shade-color($bg, 12%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
|
||||
}
|
||||
|
||||
@include ripple($color);
|
||||
}
|
||||
|
||||
.btn-outline-#{$class} {
|
||||
@include ripple($color);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle::after,
|
||||
.dropup .dropdown-toggle::after,
|
||||
.dropstart .dropdown-toggle::after,
|
||||
.dropend .dropdown-toggle::after {
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
border: none;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
|
||||
|
||||
&-brand {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&-nav .nav-link {
|
||||
padding-top: .9rem;
|
||||
padding-bottom: .9rem;
|
||||
}
|
||||
|
||||
&.bg-dark,
|
||||
&.bg-primary {
|
||||
input[type="search"],
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="tel"] {
|
||||
color: $white;
|
||||
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5);
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 -2px 0 $white;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-primary,
|
||||
.bg-success,
|
||||
.bg-info,
|
||||
.bg-warning,
|
||||
.bg-danger,
|
||||
.bg-dark,
|
||||
.bg-black {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
@include btn(primary, $primary, $white);
|
||||
@include btn(secondary, $secondary, $gray-500);
|
||||
@include btn(success, $success, $white);
|
||||
@include btn(info, $info, $white);
|
||||
@include btn(warning, $warning, $white);
|
||||
@include btn(danger, $danger, $white);
|
||||
@include btn(dark, $dark, $white);
|
||||
@include btn(light, $light, $white);
|
||||
|
||||
.btn {
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
|
||||
transition: color .4s, background-color .4s, border-color .4s, box-shadow .4s;
|
||||
|
||||
&-link {
|
||||
color: $link-color;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.disabled, // Although btn-link is intended for buttons, which want to look like link, I include here a.disable for the sake of consistency
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&:hover,
|
||||
&:active:hover {
|
||||
color: $btn-link-disabled-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
color: rgba(0, 0, 0, .4);
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
opacity: 1;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-outline-secondary {
|
||||
color: $gray-300;
|
||||
border-color: $gray-200;
|
||||
}
|
||||
|
||||
&-warning {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.btn + .btn,
|
||||
.btn + .btn-group,
|
||||
.btn-group + .btn,
|
||||
.btn-group + .btn-group {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-vertical {
|
||||
> .btn + .btn,
|
||||
> .btn + .btn-group,
|
||||
> .btn-group + .btn,
|
||||
> .btn-group + .btn-group {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn + .btn,
|
||||
.btn + .btn-group > .dropdown-toggle {
|
||||
box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
|
||||
}
|
||||
}
|
||||
|
||||
.border-secondary {
|
||||
border: 1px solid #dfdfdf !important;
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
body,
|
||||
input,
|
||||
button {
|
||||
letter-spacing: .1px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: $gray-500 !important;
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
.table-hover {
|
||||
> tbody > tr,
|
||||
> tbody > tr > th,
|
||||
> tbody > tr > td {
|
||||
transition: background-color .2s, color .2s;
|
||||
}
|
||||
}
|
||||
|
||||
.thead-inverse th {
|
||||
color: $white;
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
.col-form-label {
|
||||
font-size: 16px;
|
||||
|
||||
&-sm {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
&-lg {
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
color-scheme: inherit;
|
||||
}
|
||||
|
||||
textarea,
|
||||
textarea.form-control,
|
||||
input.form-control,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
[type="text"].form-control,
|
||||
[type="password"].form-control,
|
||||
[type="email"].form-control,
|
||||
[type="tel"].form-control,
|
||||
[contenteditable].form-control {
|
||||
box-shadow: inset 0 -1px 0 #ddd;
|
||||
transition: box-shadow .2s;
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 -2px 0 $primary;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[readonly] {
|
||||
border-bottom: 1px dotted #ddd;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[disabled]::placeholder {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
select.form-control {
|
||||
padding: .5rem 0;
|
||||
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'><path fill='#{$gray-600}' d='M8 0 4 4 0 0z'/></svg>"));
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
background-size: 8px 4px;
|
||||
box-shadow: inset 0 -1px 0 #ddd;
|
||||
appearance: none;
|
||||
|
||||
&.input {
|
||||
&-sm {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
&-lg {
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'><path fill='#{$gray-900}' d='M8 0 4 4 0 0z'/></svg>"));
|
||||
box-shadow: inset 0 -2px 0 $primary;
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-top: 1px;
|
||||
border: 2px solid $gray-400;
|
||||
|
||||
&:checked[type="radio"] {
|
||||
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$blue}' stroke='#{$white}'/></svg>")), var(--bs-gradient);
|
||||
background-size: 1.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.form-switch {
|
||||
.form-check-input {
|
||||
position: relative;
|
||||
height: .8em;
|
||||
margin-top: .29em;
|
||||
background-color: $gray-400;
|
||||
background-image: none;
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -.2em;
|
||||
left: -.2em;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
content: "";
|
||||
background-color: $white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
|
||||
transition: left .15s ease-in-out;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -.2em;
|
||||
left: -.2em;
|
||||
z-index: -1;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 9px rgba(0, 0, 0, .05);
|
||||
transition: left .15s ease-in-out, transform .15s ease-in-out, box-shadow .15s ease-in-out;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
&:hover:not(.disabled),
|
||||
&:focus:not(.disabled) {
|
||||
|
||||
&::after {
|
||||
transform: scale(.9);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(.disabled) {
|
||||
&::after {
|
||||
box-shadow: 0 0 0 9px rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: rgba(33, 150, 243, .3);
|
||||
|
||||
&::before {
|
||||
left: calc(100% - .8em);
|
||||
background-color: rgba(33, 150, 243, 1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: calc(100% - .8em);
|
||||
box-shadow: 0 0 0 9px rgba(33, 150, 243, .1);
|
||||
}
|
||||
|
||||
&:hover:not(.disabled),
|
||||
&:focus:not(.disabled) {
|
||||
&::after {
|
||||
transform: scale(.9);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(.disabled) {
|
||||
&::after {
|
||||
box-shadow: 0 0 0 9px rgba(33, 150, 243, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check:not(.form-switch) {
|
||||
.form-check-input {
|
||||
&:checked[type="checkbox"] {
|
||||
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$white}' stroke-width='2' d='m6 10 3 3 6-6'/></svg>")), var(--bs-gradient);
|
||||
background-size: 1.6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-warning {
|
||||
input:not([type="checkbox"]),
|
||||
.form-control,
|
||||
input.form-control[readonly],
|
||||
input[type="text"][readonly],
|
||||
[type="text"].form-control[readonly],
|
||||
input:not([type="checkbox"]):focus,
|
||||
.form-control:focus {
|
||||
border-bottom: none;
|
||||
box-shadow: inset 0 -2px 0 $warning;
|
||||
}
|
||||
}
|
||||
|
||||
.has-danger {
|
||||
input:not([type="checkbox"]),
|
||||
.form-control,
|
||||
input.form-control[readonly],
|
||||
input[type="text"][readonly],
|
||||
[type="text"].form-control[readonly],
|
||||
input:not([type="checkbox"]):focus,
|
||||
.form-control:focus {
|
||||
border-bottom: none;
|
||||
box-shadow: inset 0 -2px 0 $danger;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success {
|
||||
input:not([type="checkbox"]),
|
||||
.form-control,
|
||||
input.form-control[readonly],
|
||||
input[type="text"][readonly],
|
||||
[type="text"].form-control[readonly],
|
||||
input:not([type="checkbox"]):focus,
|
||||
.form-control:focus {
|
||||
border-bottom: none;
|
||||
box-shadow: inset 0 -2px 0 $success;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove the Bootstrap feedback styles for input addons
|
||||
.input-group-addon {
|
||||
.has-warning &,
|
||||
.has-danger &,
|
||||
.has-success & {
|
||||
color: $input-color;
|
||||
background-color: $input-group-addon-bg;
|
||||
border-color: $input-group-addon-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group-lg {
|
||||
select,
|
||||
select.form-control {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav-tabs {
|
||||
.nav-item + .nav-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.nav-link,
|
||||
.nav-link:focus {
|
||||
margin-right: 0;
|
||||
color: $body-color;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: inset 0 -1px 0 #ddd;
|
||||
transition: color .2s, box-shadow .2s;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
background-color: transparent;
|
||||
box-shadow: inset 0 -2px 0 $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-link.active:focus {
|
||||
color: $primary;
|
||||
border: none;
|
||||
box-shadow: inset 0 -2px 0 $primary;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.disabled {
|
||||
box-shadow: inset 0 -1px 0 #ddd;
|
||||
}
|
||||
|
||||
&.nav-justified {
|
||||
.nav-link,
|
||||
.nav-link:hover,
|
||||
.nav-link:focus,
|
||||
.nav-link.active,
|
||||
.nav-link.active:hover,
|
||||
.nav-link.active:focus {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
border: none;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
padding-right: 2.5rem;
|
||||
border: none;
|
||||
|
||||
&,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@if $enable-gradients {
|
||||
background: $value linear-gradient(180deg, mix($body-bg, $value, 15%), $value) repeat-x;
|
||||
} @else {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a:not(.btn),
|
||||
.alert-link {
|
||||
font-weight: 700;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&-secondary,
|
||||
&-light {
|
||||
&,
|
||||
a:not(.btn),
|
||||
.alert-link {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.bg-secondary,
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.card {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
|
||||
|
||||
&.border-primary,
|
||||
&.border-secondary,
|
||||
&.border-success,
|
||||
&.border-info,
|
||||
&.border-warning,
|
||||
&.border-danger,
|
||||
&.border-light,
|
||||
&.border-dark {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
&-item-action.active {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: .2rem;
|
||||
box-shadow: 0 6px 36px rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.modal,
|
||||
.toast,
|
||||
.offcanvas {
|
||||
.btn-close {
|
||||
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$black}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
border: none;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.carousel {
|
||||
&-caption {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
114
themes/Bootswatch5.2_Scss/materia/_variables.scss
Normal file
114
themes/Bootswatch5.2_Scss/materia/_variables.scss
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
// Materia 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "materia" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #eee !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #bbb !default;
|
||||
$gray-600: #666 !default;
|
||||
$gray-700: #444 !default;
|
||||
$gray-800: #222 !default;
|
||||
$gray-900: #212121 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #2196f3 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #e51c23 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ff9800 !default;
|
||||
$green: #4caf50 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #9c27b0 !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $white !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 2.15 !default;
|
||||
|
||||
$enable-gradients: true !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-700 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !default;
|
||||
$font-size-base: 1rem !default;
|
||||
$font-weight-base: 400 !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$input-btn-padding-y: .8rem !default;
|
||||
$input-btn-padding-x: 1rem !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-padding-y: 1rem !default;
|
||||
$input-padding-x: 0 !default;
|
||||
$input-padding-y-sm: 0 !default;
|
||||
$input-padding-x-sm: 0 !default;
|
||||
$input-padding-y-lg: ($font-size-base * 1.25) !default;
|
||||
$input-padding-x-lg: 0 !default;
|
||||
$input-bg: transparent !default;
|
||||
$input-disabled-bg: transparent !default;
|
||||
$input-color: $gray-600 !default;
|
||||
$input-border-color: transparent !default;
|
||||
$input-border-width: 0 !default;
|
||||
$input-border-radius: 0 !default;
|
||||
$input-border-radius-lg: 0 !default;
|
||||
$input-border-radius-sm: 0 !default;
|
||||
$input-placeholder-color: rgba(0, 0, 0, .4) !default;
|
||||
$input-group-addon-bg: transparent !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-disabled-color: $gray-500 !default;
|
||||
$nav-tabs-border-color: transparent !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 1rem !default;
|
||||
$navbar-dark-color: rgba($white, .75) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-width: 0 !default;
|
||||
$card-border-color: transparent !default;
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-bg: $gray-700 !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-border-color: transparent !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-height: .375rem !default;
|
||||
$progress-border-radius: 0 !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: .6 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
1
themes/Bootswatch5.2_Scss/materia/index.html
Normal file
1
themes/Bootswatch5.2_Scss/materia/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
52
themes/Bootswatch5.2_Scss/materia/style.scss
Normal file
52
themes/Bootswatch5.2_Scss/materia/style.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins ========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
@mixin ripple($color){
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-left: 0;
|
||||
@include gradient-radial($color 10%, transparent 10.01%);
|
||||
background-size: 1000% 1000%;
|
||||
background-position: 50%;
|
||||
border: none;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: background 0.5s, opacity 1s;
|
||||
}
|
||||
|
||||
&:active:after {
|
||||
background-size: 0 0;
|
||||
opacity: .2;
|
||||
transition: 0s;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
148
themes/Bootswatch5.2_Scss/minty/_bootswatch.scss
Normal file
148
themes/Bootswatch5.2_Scss/minty/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
// Minty 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
font-family: $headings-font-family;
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background-color: $secondary !important;
|
||||
}
|
||||
|
||||
.border-dark {
|
||||
border-color: $secondary !important;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
font-family: $headings-font-family;
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&-light,
|
||||
&-light:hover {
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
&-link,
|
||||
&-link:hover {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&-link.disabled:hover {
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
&-outline-primary {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&-outline-secondary {
|
||||
color: $secondary;
|
||||
}
|
||||
|
||||
&-outline-success {
|
||||
color: $success;
|
||||
}
|
||||
|
||||
&-outline-info {
|
||||
color: $info;
|
||||
}
|
||||
|
||||
&-outline-warning {
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
&-outline-danger {
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
&-outline-dark {
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
&-outline-light {
|
||||
color: $light;
|
||||
}
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
legend {
|
||||
font-family: $headings-font-family;
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.dropdown-menu {
|
||||
font-family: $font-family-sans-serif;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
a {
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
a,
|
||||
.alert-link {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&-light {
|
||||
|
||||
&,
|
||||
a:not(.btn),
|
||||
.alert-link {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: $white;
|
||||
|
||||
&.bg-light {
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.card,
|
||||
.list-group-item {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
106
themes/Bootswatch5.2_Scss/minty/_variables.scss
Normal file
106
themes/Bootswatch5.2_Scss/minty/_variables.scss
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
// Minty 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "minty" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #f7f7f9 !default;
|
||||
$gray-300: #eceeef !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #aaa !default;
|
||||
$gray-600: #888 !default;
|
||||
$gray-700: #5a5a5a !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #ff7851 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ffce67 !default;
|
||||
$green: #56cc9d !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #6cc3d5 !default;
|
||||
|
||||
$primary: #78c2ad !default;
|
||||
$secondary: #f3969a !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 1.45 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-600 !default;
|
||||
|
||||
// Components
|
||||
|
||||
$border-radius: .4rem !default;
|
||||
$border-radius-lg: .6rem !default;
|
||||
$border-radius-sm: .3rem !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$headings-font-family: Montserrat, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
|
||||
$headings-color: $gray-700 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-border-color: rgba(0, 0, 0, .05) !default;
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $secondary !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-color: rgba($white, .6) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-light-color: rgba($black, .3) !default;
|
||||
$navbar-light-hover-color: $gray-700 !default;
|
||||
$navbar-light-active-color: $gray-700 !default;
|
||||
$navbar-light-disabled-color: rgba($black, .1) !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: $primary !default;
|
||||
$pagination-border-color: $primary !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: $secondary !default;
|
||||
$pagination-hover-border-color: $pagination-hover-bg !default;
|
||||
$pagination-active-bg: $secondary !default;
|
||||
$pagination-active-border-color: $pagination-active-bg !default;
|
||||
$pagination-disabled-color: $white !default;
|
||||
$pagination-disabled-bg: #cce8e0 !default;
|
||||
$pagination-disabled-border-color: $pagination-disabled-bg !default;
|
||||
|
||||
// Alerts
|
||||
|
||||
$alert-color-scale: 0% !default;
|
||||
$alert-bg-scale: 0% !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-bg: $primary !default;
|
||||
$breadcrumb-divider-color: $white !default;
|
||||
$breadcrumb-active-color: $breadcrumb-divider-color !default;
|
||||
$breadcrumb-border-radius: .25rem !default;
|
||||
1
themes/Bootswatch5.2_Scss/minty/index.html
Normal file
1
themes/Bootswatch5.2_Scss/minty/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
18
themes/Bootswatch5.2_Scss/minty/style.scss
Normal file
18
themes/Bootswatch5.2_Scss/minty/style.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
149
themes/Bootswatch5.2_Scss/pulse/_bootswatch.scss
Normal file
149
themes/Bootswatch5.2_Scss/pulse/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
// Pulse 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus,
|
||||
&.active:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
color: $gray-900;
|
||||
background-color: $white;
|
||||
border-color: #ccc;
|
||||
|
||||
&:hover {
|
||||
color: $gray-900;
|
||||
background-color: $gray-300;
|
||||
border-color: $gray-500;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: tint-color($gray-900, 5%);
|
||||
background-color: $white;
|
||||
border-color: tint-color(#ccc, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&-primary:focus {
|
||||
box-shadow: 0 0 5px tint-color($primary, 10%);
|
||||
}
|
||||
|
||||
&-secondary:focus {
|
||||
box-shadow: 0 0 5px $gray-400;
|
||||
}
|
||||
|
||||
&-success:focus {
|
||||
box-shadow: 0 0 5px tint-color($success, 10%);
|
||||
}
|
||||
|
||||
&-info:focus {
|
||||
box-shadow: 0 0 5px tint-color($info, 10%);
|
||||
}
|
||||
|
||||
&-warning:focus {
|
||||
box-shadow: 0 0 5px tint-color($warning, 10%);
|
||||
}
|
||||
|
||||
&-danger:focus {
|
||||
box-shadow: 0 0 5px tint-color($danger, 10%);
|
||||
}
|
||||
|
||||
&.disabled:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
.table .thead-dark th {
|
||||
background-color: $secondary;
|
||||
border-color: $table-border-color;
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
.form-control:focus {
|
||||
box-shadow: 0 0 5px rgba(100, 65, 164, .4);
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav-tabs {
|
||||
.nav-link,
|
||||
.nav-link.active, {
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active,
|
||||
.nav-link.active:hover,
|
||||
.nav-link.active:focus {
|
||||
border-bottom: 1px solid $primary;
|
||||
}
|
||||
|
||||
.nav-item + .nav-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
&-item.active {
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.badge {
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Progress bars
|
||||
|
||||
.progress {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.list-group {
|
||||
&-item {
|
||||
color: rgba(255, 255, 255, .8);
|
||||
|
||||
&.active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 700;
|
||||
|
||||
&:hover {
|
||||
background-color: $list-group-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled:hover {
|
||||
color: $list-group-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
96
themes/Bootswatch5.2_Scss/pulse/_variables.scss
Normal file
96
themes/Bootswatch5.2_Scss/pulse/_variables.scss
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
// Pulse 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "pulse" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #fafafa !default;
|
||||
$gray-200: #f9f8fc !default;
|
||||
$gray-300: #ededed !default;
|
||||
$gray-400: #cbc8d0 !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #444 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #17141f !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #593196 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #fc3939 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #efa31d !default;
|
||||
$green: #13b955 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #009cdc !default;
|
||||
|
||||
$primary: $purple !default;
|
||||
$secondary: #a991d4 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-200 !default;
|
||||
$dark: $gray-900 !default;
|
||||
|
||||
$min-contrast-ratio: 2.1 !default;
|
||||
|
||||
// Options
|
||||
|
||||
$enable-rounded: false !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-700 !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-hover-color: $primary !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-border-color: rgba(0, 0, 0, .05) !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-focus-border-color: $primary !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-link-color: $gray-700 !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $primary !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-tabs-border-color: $gray-300 !default;
|
||||
$nav-tabs-link-hover-border-color: $primary !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 1.2rem !default;
|
||||
$navbar-dark-hover-color: rgba($white, .9) !default;
|
||||
$navbar-dark-active-color: rgba($white, .9) !default;
|
||||
$navbar-light-color: rgba($black, .4) !default;
|
||||
$navbar-light-active-color: rgba($black, .7) !default;
|
||||
$navbar-light-disabled-color: rgba($black, .2) !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $gray-300 !default;
|
||||
$progress-bar-bg: $primary !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-bg: $gray-900 !default;
|
||||
$list-group-border-color: transparent !default;
|
||||
$list-group-hover-bg: lighten($list-group-bg, 10%) !default;
|
||||
$list-group-active-color: $white !default;
|
||||
$list-group-active-bg: $list-group-bg !default;
|
||||
$list-group-disabled-color: lighten($list-group-bg, 30%) !default;
|
||||
1
themes/Bootswatch5.2_Scss/pulse/index.html
Normal file
1
themes/Bootswatch5.2_Scss/pulse/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
18
themes/Bootswatch5.2_Scss/pulse/style.scss
Normal file
18
themes/Bootswatch5.2_Scss/pulse/style.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
291
themes/Bootswatch5.2_Scss/quartz/_bootswatch.scss
Normal file
291
themes/Bootswatch5.2_Scss/quartz/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
// Quartz 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$body-bg-image: linear-gradient(90deg, shade-color($cyan, 10%), shade-color($purple, 10%), shade-color($pink, 5%)) !default;
|
||||
$frosted-opacity: .3 !default;
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
// Mixins
|
||||
|
||||
@mixin glass($opacity: $frosted-opacity, $bg: $white) {
|
||||
border: none;
|
||||
box-shadow: inset 1px 1px $border-color, inset -1px -1px rgba($white, .1), $box-shadow;
|
||||
@include frost($opacity, $bg);
|
||||
|
||||
a {
|
||||
color: $card-color;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: rgba($card-color, .7) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin frost($opacity: $frosted-opacity, $bg: $white) {
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(125deg, rgba($bg, ($opacity)), rgba($bg, ($opacity - .1)) 70%);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
// Body
|
||||
|
||||
body {
|
||||
background-image: $body-bg-image;
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
.table-secondary {
|
||||
--bs-table-hover-color: $white;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
&-secondary {
|
||||
color: $white;
|
||||
border: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group > .btn:not(:first-child),
|
||||
.btn-group > .btn-group:not(:first-child) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.btn-group-vertical > .btn:not(:first-child),
|
||||
.btn-group-vertical > .btn-group:not(:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.bg-light .btn {
|
||||
background-color: rgba($black, .2);
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
.input-group-text,
|
||||
.form-control::file-selector-button {
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(125deg, rgba($white, .3), rgba($white, .2) 70%);
|
||||
border: none;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
box-shadow: inset 1px 1px $border-color, inset -1px -1px rgba($white, .1);
|
||||
}
|
||||
|
||||
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
|
||||
margin-left: 0;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
|
||||
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.form-select:not([multiple]) {
|
||||
transition: border-color .15s ease-in-out;
|
||||
|
||||
option {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-light .form-control {
|
||||
color: $gray-800;
|
||||
border-color: rgba($black, .2);
|
||||
|
||||
&::placeholder {
|
||||
color: rgba($black, .2);
|
||||
}
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.dropdown-menu {
|
||||
@include glass(.3);
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
transition: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $white;
|
||||
isolation: auto;
|
||||
}
|
||||
|
||||
&,
|
||||
&.disabled {
|
||||
background-color: $progress-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item:first-child > .nav-link {
|
||||
border-radius: $border-radius 0 0 $border-radius;
|
||||
}
|
||||
|
||||
.nav-item:last-child > .nav-link {
|
||||
border-radius: 0 $border-radius $border-radius 0;
|
||||
}
|
||||
|
||||
.nav-item .nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
@include glass(1, $white);
|
||||
border-radius: $border-radius;
|
||||
transform: scale(1.1);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
transition: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $white;
|
||||
isolation: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
@include glass();
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: $white;
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
$opacity: .7;
|
||||
&-#{$color}::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: .5rem;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
color: $card-color;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.bg-secondary {
|
||||
--bs-bg-opacity: .4;
|
||||
}
|
||||
|
||||
&.bg-light {
|
||||
color: $gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.list-group {
|
||||
@include glass();
|
||||
}
|
||||
|
||||
.card {
|
||||
@include glass();
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@if ($color == secondary) {
|
||||
--bs-secondary-rgb: transparent;
|
||||
} @else {
|
||||
&.bg-#{$color} {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-light {
|
||||
.card-header,
|
||||
.card-body {
|
||||
color: $gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
&.border {
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@include glass();
|
||||
|
||||
.card-header {
|
||||
background-color: $value !important;
|
||||
border-bottom: none;
|
||||
|
||||
@if ($color == light) {
|
||||
color: $gray-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
@include glass();
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.toast {
|
||||
@include glass();
|
||||
}
|
||||
|
||||
.popover {
|
||||
@include glass();
|
||||
|
||||
&-header {
|
||||
border-bottom-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include glass();
|
||||
}
|
||||
|
||||
.offcanvas {
|
||||
@include glass();
|
||||
}
|
||||
229
themes/Bootswatch5.2_Scss/quartz/_variables.scss
Normal file
229
themes/Bootswatch5.2_Scss/quartz/_variables.scss
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
// Quartz 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "quartz" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9e9e8 !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #3a8fd9 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #686dc3 !default;
|
||||
$pink: #e83283 !default;
|
||||
$red: #fc346f !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #41d7a7 !default;
|
||||
$teal: #528fb3 !default;
|
||||
$cyan: #39cbfb !default;
|
||||
|
||||
$primary: $pink !default;
|
||||
$secondary: rgba($white, .4) !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $orange !default;
|
||||
$light: $gray-200 !default;
|
||||
$dark: $gray-900 !default;
|
||||
|
||||
$min-contrast-ratio: 1.5 !default;
|
||||
|
||||
// Spacing
|
||||
|
||||
$spacer: 2rem !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: $purple !default;
|
||||
$body-color: $white !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $white !default;
|
||||
|
||||
// Components
|
||||
|
||||
$border-color: rgba($white, .2) !default;
|
||||
|
||||
$border-radius: .5rem !default;
|
||||
$border-radius-sm: .6rem !default;
|
||||
$border-radius-lg: .7rem !default;
|
||||
$border-radius-pill: 50rem !default;
|
||||
|
||||
$box-shadow: 1px 3px 24px -1px rgba($black, .15) !default;
|
||||
$box-shadow-sm: 0 1px 1px rgba($black, .1) !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
$headings-font-weight: 700 !default;
|
||||
|
||||
$text-muted: rgba($white, .7) !default;
|
||||
|
||||
$blockquote-footer-color: $text-muted !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-dark-bg: $dark !default;
|
||||
$table-dark-border-color: darken($dark, 5%) !default;
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Buttons + Forms
|
||||
|
||||
$input-btn-padding-y: .75rem !default;
|
||||
$input-btn-padding-x: 1.5rem !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-box-shadow: $box-shadow !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-bg: transparent !default;
|
||||
$input-disabled-bg: rgba($white, .1) !default;
|
||||
|
||||
$input-border-color: rgba($white, .4) !default;
|
||||
$input-border-width: 1px !default;
|
||||
|
||||
$input-focus-border-color: $input-border-color !default;
|
||||
$input-focus-box-shadow: none !default;
|
||||
|
||||
$input-placeholder-color: $text-muted !default;
|
||||
|
||||
$form-switch-color: $white !default;
|
||||
|
||||
$form-switch-focus-color: $form-switch-color !default;
|
||||
|
||||
$input-group-addon-bg: transparent !default;
|
||||
|
||||
$form-check-input-bg: rgba($white, .3) !default;
|
||||
$form-check-input-border: 1px solid $border-color !default;
|
||||
|
||||
$form-select-indicator-color: $white !default;
|
||||
$form-select-focus-box-shadow: none !default;
|
||||
|
||||
$form-range-track-bg: rgba($black, .2) !default;
|
||||
|
||||
$form-range-thumb-disabled-bg: $gray-500 !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-disabled-color: $text-muted !default;
|
||||
|
||||
$nav-tabs-border-width: 0 !default;
|
||||
$nav-tabs-border-radius: 0 !default;
|
||||
$nav-tabs-link-active-color: $gray-800 !default;
|
||||
$nav-tabs-link-active-bg: $white !default;
|
||||
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
|
||||
|
||||
$nav-pills-border-radius: $border-radius-pill !default;
|
||||
$nav-pills-link-active-color: $white !default;
|
||||
$nav-pills-link-active-bg: $primary !default;
|
||||
|
||||
// Navbars
|
||||
|
||||
$navbar-dark-color: rgba($white, .8) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
|
||||
$navbar-light-color: rgba($gray-800, .8) !default;
|
||||
$navbar-light-hover-color: $gray-800 !default;
|
||||
$navbar-light-active-color: $gray-800 !default;
|
||||
$navbar-light-disabled-color: rgba($gray-800, .3) !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-border-color: $border-color !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: rgba($white, .4) !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-bg: rgba($white, .3) !default;
|
||||
$pagination-border-width: 0 !default;
|
||||
|
||||
$pagination-focus-color: $white !default;
|
||||
$pagination-focus-bg: $dropdown-link-hover-bg !default;
|
||||
$pagination-focus-box-shadow: none !default;
|
||||
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: $dropdown-link-hover-bg !default;
|
||||
|
||||
$pagination-disabled-color: $text-muted !default;
|
||||
$pagination-disabled-bg: $pagination-bg !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-spacer-y: 1.75rem !default;
|
||||
$card-spacer-x: 2rem !default;
|
||||
$card-border-color: $border-color !default;
|
||||
$card-cap-bg: transparent !default;
|
||||
$card-cap-color: $white !default;
|
||||
$card-color: $white !default;
|
||||
$card-bg: transparent !default;
|
||||
|
||||
// Accordion
|
||||
|
||||
$accordion-button-bg: $secondary !default;
|
||||
$accordion-button-active-bg: $primary !default;
|
||||
$accordion-button-active-color: $white !default;
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-opacity: .7 !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-header-bg: $card-cap-bg !default;
|
||||
|
||||
$popover-body-color: $card-color !default;
|
||||
$popover-body-padding-y: $spacer * .5 !default;
|
||||
|
||||
$popover-arrow-color: $border-color !default;
|
||||
|
||||
$popover-arrow-outer-color: transparent !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-header-color: $card-color !default;
|
||||
$toast-header-background-color: $card-cap-bg !default;
|
||||
$toast-header-border-color: $border-color !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: rgba($black, .2) !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-color: $white !default;
|
||||
$list-group-bg: transparent !default;
|
||||
$list-group-border-color: $border-color !default;
|
||||
$list-group-border-width: 0 !default;
|
||||
|
||||
$list-group-hover-bg: $dropdown-link-hover-bg !default;
|
||||
|
||||
$list-group-disabled-color: $text-muted !default;
|
||||
|
||||
$list-group-action-color: $white !default;
|
||||
$list-group-action-hover-color: $white !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-divider-color: $white !default;
|
||||
$breadcrumb-active-color: $white !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
1
themes/Bootswatch5.2_Scss/quartz/index.html
Normal file
1
themes/Bootswatch5.2_Scss/quartz/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
25
themes/Bootswatch5.2_Scss/quartz/style.scss
Normal file
25
themes/Bootswatch5.2_Scss/quartz/style.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
// Sandstone (required for @extend) =============================================
|
||||
.sandstone {
|
||||
font-size: $navbar-font-size;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
236
themes/Bootswatch5.2_Scss/sandstone/_bootswatch.scss
Normal file
236
themes/Bootswatch5.2_Scss/sandstone/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
// Sandstone 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.sandstone {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
.nav-link {
|
||||
@extend .sandstone;
|
||||
}
|
||||
|
||||
&-form input,
|
||||
&-form .form-control {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
@extend .sandstone;
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&-success,
|
||||
&-warning {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
.table {
|
||||
.thead-dark th {
|
||||
background-color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
input,
|
||||
.form-control {
|
||||
@include box-shadow(none);
|
||||
|
||||
&:focus {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
@extend .sandstone;
|
||||
background-color: $gray-200;
|
||||
border-color: $gray-300;
|
||||
}
|
||||
|
||||
.nav-link,
|
||||
.nav-link:hover,
|
||||
.nav-link:focus {
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.nav-link.disabled,
|
||||
.nav-link.disabled:hover,
|
||||
.nav-link.disabled:focus {
|
||||
color: $nav-link-disabled-color;
|
||||
background-color: $gray-200;
|
||||
border-color: $gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
@extend .sandstone;
|
||||
color: $gray-600;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-link:hover,
|
||||
.nav-link:focus {
|
||||
background-color: $gray-200;
|
||||
border-color: $gray-300;
|
||||
}
|
||||
|
||||
.nav-link.disabled,
|
||||
.nav-link.disabled:hover {
|
||||
color: $gray-300;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.breadcrumb {
|
||||
@extend .sandstone;
|
||||
border: 1px solid $gray-300;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
@extend .sandstone;
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.dropdown-item {
|
||||
@extend .sandstone;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
color: $white;
|
||||
|
||||
a,
|
||||
.alert-link {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&-primary {
|
||||
&,
|
||||
> th,
|
||||
> td {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
&,
|
||||
> th,
|
||||
> td {
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
&-success {
|
||||
&,
|
||||
> th,
|
||||
> td {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
&,
|
||||
> th,
|
||||
> td {
|
||||
background-color: $info;
|
||||
}
|
||||
}
|
||||
|
||||
&-danger {
|
||||
&,
|
||||
> th,
|
||||
> td {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
&,
|
||||
> th,
|
||||
> td {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
&-dark {
|
||||
&,
|
||||
> th,
|
||||
> td {
|
||||
background-color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
&-light {
|
||||
&,
|
||||
> th,
|
||||
> td {
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
&,
|
||||
a:not(.btn),
|
||||
.alert-link {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
@extend .sandstone;
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.modal,
|
||||
.toast,
|
||||
.offcanvas {
|
||||
.btn-close {
|
||||
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$gray-300}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
|
||||
}
|
||||
}
|
||||
139
themes/Bootswatch5.2_Scss/sandstone/_variables.scss
Normal file
139
themes/Bootswatch5.2_Scss/sandstone/_variables.scss
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
// Sandstone 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "sandstone" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #f8f5f0 !default;
|
||||
$gray-300: #dfd7ca !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #98978b !default;
|
||||
$gray-600: #8e8c84 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #3e3f3a !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #325d88 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #d9534f !default;
|
||||
$orange: #f47c3c !default;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #93c54b !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #29abe0 !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $orange !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-200 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 2 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-800 !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $success !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$headings-font-weight: 400 !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-link-color: $gray-600 !default;
|
||||
$dropdown-link-hover-color: $dropdown-link-color !default;
|
||||
$dropdown-link-hover-bg: $gray-200 !default;
|
||||
$dropdown-link-active-color: $dropdown-link-color !default;
|
||||
$dropdown-link-active-bg: $dropdown-link-hover-bg !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-padding-x: .9rem !default;
|
||||
$nav-link-disabled-color: $gray-300 !default;
|
||||
$nav-tabs-border-color: $gray-300 !default;
|
||||
$nav-tabs-link-hover-border-color: $gray-300 !default;
|
||||
$nav-tabs-link-active-bg: $white !default;
|
||||
$nav-pills-link-active-color: $gray-600 !default;
|
||||
$nav-pills-link-active-bg: $gray-200 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-light-hover-color: $black !default;
|
||||
$navbar-light-active-color: $black !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $gray-600 !default;
|
||||
$pagination-bg: $gray-200 !default;
|
||||
$pagination-border-color: $gray-300 !default;
|
||||
$pagination-hover-color: $pagination-color !default;
|
||||
$pagination-active-color: $pagination-color !default;
|
||||
$pagination-active-bg: $gray-300 !default;
|
||||
$pagination-active-border-color: $gray-300 !default;
|
||||
$pagination-disabled-color: $gray-300 !default;
|
||||
$pagination-disabled-bg: $gray-200 !default;
|
||||
$pagination-disabled-border-color: $pagination-border-color !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-color: rgba($gray-300, .75) !default;
|
||||
$card-cap-bg: rgba($gray-200, .25) !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-header-bg: $gray-200 !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-border-color: $gray-300 !default;
|
||||
$modal-header-border-color: $modal-content-border-color !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $gray-300 !default;
|
||||
$progress-border-radius: 10px !default;
|
||||
$progress-bar-color: $primary !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-border-color: $gray-300 !default;
|
||||
$list-group-hover-bg: $gray-200 !default;
|
||||
$list-group-active-color: $body-color !default;
|
||||
$list-group-active-bg: $gray-200 !default;
|
||||
$list-group-active-border-color: $gray-300 !default;
|
||||
$list-group-disabled-color: $gray-500 !default;
|
||||
$list-group-disabled-bg: $white !default;
|
||||
$list-group-action-color: $list-group-active-color !default;
|
||||
$list-group-action-active-color: $list-group-active-color !default;
|
||||
$list-group-action-active-bg: $gray-300 !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-bg: $pagination-bg !default;
|
||||
$breadcrumb-border-radius: .25rem !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: .8 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
1
themes/Bootswatch5.2_Scss/sandstone/index.html
Normal file
1
themes/Bootswatch5.2_Scss/sandstone/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
25
themes/Bootswatch5.2_Scss/sandstone/style.scss
Normal file
25
themes/Bootswatch5.2_Scss/sandstone/style.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
// Sandstone (required for @extend) =============================================
|
||||
.sandstone {
|
||||
font-size: $navbar-font-size;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
BIN
themes/Bootswatch5.2_Scss/screenshot.png
Normal file
BIN
themes/Bootswatch5.2_Scss/screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
143
themes/Bootswatch5.2_Scss/simplex/_bootswatch.scss
Normal file
143
themes/Bootswatch5.2_Scss/simplex/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
// Simplex 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Mixins
|
||||
|
||||
@mixin btn-shadow($color){
|
||||
@include gradient-y-three-colors(tint-color($color, 6%), $color, 6%, shade-color($color, 6%));
|
||||
filter: none;
|
||||
border: 1px solid shade-color($color, 13%);
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
|
||||
&-fixed-top {
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
&-fixed-bottom {
|
||||
border-style: solid;
|
||||
border-top-width: 1px 0 0 0;
|
||||
}
|
||||
|
||||
&.bg-primary {
|
||||
background-color: $primary !important;
|
||||
border-color: shade-color($primary, 13%) !important;
|
||||
}
|
||||
|
||||
&.bg-dark {
|
||||
border-color: shade-color($dark, 13%) !important;
|
||||
}
|
||||
|
||||
&.bg-light {
|
||||
border-color: shade-color($white, 13%);
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn-primary,
|
||||
.btn-primary:hover {
|
||||
@include btn-shadow($primary);
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-secondary:hover {
|
||||
@include btn-shadow($secondary);
|
||||
}
|
||||
|
||||
.btn-secondary:focus,
|
||||
.btn-secondary:not([disabled]):not(.disabled):active,
|
||||
.btn-secondary:not([disabled]):not(.disabled).active {
|
||||
box-shadow: 0 0 0 .2rem rgba($gray-200, .5);
|
||||
}
|
||||
|
||||
.btn-success,
|
||||
.btn-success:hover {
|
||||
@include btn-shadow($success);
|
||||
}
|
||||
|
||||
.btn-info,
|
||||
.btn-info:hover {
|
||||
@include btn-shadow($info);
|
||||
}
|
||||
|
||||
.btn-warning,
|
||||
.btn-warning:hover {
|
||||
@include btn-shadow($warning);
|
||||
}
|
||||
|
||||
.btn-danger,
|
||||
.btn-danger:hover {
|
||||
@include btn-shadow($danger);
|
||||
}
|
||||
|
||||
.btn-dark,
|
||||
.btn-dark:hover {
|
||||
@include btn-shadow($dark);
|
||||
}
|
||||
|
||||
.btn-light,
|
||||
.btn-light:hover {
|
||||
@include btn-shadow($light);
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
color: $gray-400;
|
||||
border-color: $gray-400;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background-color: $gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
.text-secondary {
|
||||
color: $gray-600 !important;
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
legend,
|
||||
label {
|
||||
color: $headings-color;
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.breadcrumb {
|
||||
border: 1px solid shade-color($white, 13%);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.page-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.badge {
|
||||
&.bg-secondary,
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
104
themes/Bootswatch5.2_Scss/simplex/_variables.scss
Normal file
104
themes/Bootswatch5.2_Scss/simplex/_variables.scss
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
// Simplex 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "simplex" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #ddd !default;
|
||||
$gray-300: #ccc !default;
|
||||
$gray-400: #bbb !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #777 !default;
|
||||
$gray-700: #444 !default;
|
||||
$gray-800: #373a3c !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #9b479f !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #d9230f !default;
|
||||
$orange: #d9831f !default;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #469408 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #029acf !default;
|
||||
|
||||
$primary: $red !default;
|
||||
$secondary: $white !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $orange !default;
|
||||
$danger: $purple !default;
|
||||
$light: $white !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 2.8 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: #fcfcfc !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $primary !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-padding-y: .9rem !default;
|
||||
$nav-link-disabled-color: $gray-400 !default;
|
||||
$nav-tabs-border-color: darken(#fff, 6.5%) !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-color: rgba($white, .75) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-border-color: $nav-tabs-border-color !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: $primary !default;
|
||||
$pagination-hover-border-color: $primary !default;
|
||||
$pagination-disabled-color: $gray-400 !default;
|
||||
$pagination-disabled-border-color: $pagination-border-color !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-color: $nav-tabs-border-color !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-border-color: $nav-tabs-border-color !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-border-color: $nav-tabs-border-color !default;
|
||||
$modal-header-border-color: $nav-tabs-border-color !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bar-color: $primary !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-border-color: $nav-tabs-border-color !default;
|
||||
$list-group-disabled-bg: $nav-tabs-border-color !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-border-radius: .25rem !default;
|
||||
1
themes/Bootswatch5.2_Scss/simplex/index.html
Normal file
1
themes/Bootswatch5.2_Scss/simplex/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
22
themes/Bootswatch5.2_Scss/simplex/style.scss
Normal file
22
themes/Bootswatch5.2_Scss/simplex/style.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
@mixin btn-shadow($color){
|
||||
@include gradient-y-three-colors(lighten($color, 3%), $color, 6%, darken($color, 3%));
|
||||
filter: none;
|
||||
border: 1px solid darken($color, 6.5%);
|
||||
}
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
482
themes/Bootswatch5.2_Scss/sketchy/_bootswatch.scss
Normal file
482
themes/Bootswatch5.2_Scss/sketchy/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,482 @@
|
|||
// Sketchy 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css?family=Neucha|Cabin+Sketch&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
// stylelint-disable scss/dollar-variable-default
|
||||
$border-radius-sketchy: 255px 25px 225px 25px / 25px 225px 25px 255px;
|
||||
$border-radius-lg-sketchy: 55px 225px 15px 25px / 25px 25px 35px 355px;
|
||||
$border-radius-sm-sketchy: 255px 25px 225px 25px / 25px 225px 25px 255px;
|
||||
// style-enable scss/dollar-variable-default
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-radius: 25px 25px 55px 5px/5px 55px 25px 25px;
|
||||
|
||||
&.bg-light {
|
||||
border-color: $gray-800;
|
||||
}
|
||||
|
||||
&.fixed-top {
|
||||
border-width: 0 0 2px;
|
||||
border-radius: 0 25px 225px 0/25px 0 25px 255px;
|
||||
}
|
||||
|
||||
&.fixed-bottom {
|
||||
border-width: 2px 0 0;
|
||||
border-radius: 255px 25px 0 25px/25px 225px 25px 0;
|
||||
}
|
||||
|
||||
&-brand {
|
||||
font-family: $headings-font-family;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
text-decoration: none;
|
||||
border-radius: $border-radius-sketchy;
|
||||
|
||||
&-lg {
|
||||
border-radius: $border-radius-lg-sketchy;
|
||||
}
|
||||
|
||||
&-sm {
|
||||
border-radius: $border-radius-sm-sketchy;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-check {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: $font-family-sans-serif;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-family: $headings-font-family;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-radius: 15px 27px 25px 25px/25px 25px 305px 635px;
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
table {
|
||||
th,
|
||||
td {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
overflow: hidden;
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
background-color: $gray-800;
|
||||
border-radius: 5px 25px 5px 25px/25px 5px 25px 5px;
|
||||
|
||||
th,
|
||||
td {
|
||||
border-radius: 5px 5px 25px 4px/5px 4px 3px 5px;
|
||||
}
|
||||
|
||||
.table-success,
|
||||
.table-success:hover {
|
||||
td,
|
||||
th {
|
||||
color: $white;
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.table-info,
|
||||
.table-info:hover {
|
||||
td,
|
||||
th {
|
||||
color: $white;
|
||||
background-color: $info;
|
||||
}
|
||||
}
|
||||
|
||||
.table-warning,
|
||||
.table-warning:hover {
|
||||
td,
|
||||
th {
|
||||
color: $white;
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
.table-danger,
|
||||
.table-danger:hover {
|
||||
td,
|
||||
th {
|
||||
color: $white;
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-dark {
|
||||
th,
|
||||
td,
|
||||
&.table-hover .table-active:hover > th,
|
||||
&.table-hover .table-active:hover > td {
|
||||
background-color: $gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Forms
|
||||
|
||||
input,
|
||||
.form-control,
|
||||
.input-group-text {
|
||||
border-radius: $border-radius-sketchy;
|
||||
}
|
||||
|
||||
textarea,
|
||||
textarea.form-control,
|
||||
select,
|
||||
select.form-control {
|
||||
border-radius: $border-radius-lg-sketchy !important;
|
||||
}
|
||||
|
||||
[type="checkbox"] {
|
||||
position: relative;
|
||||
width: 0;
|
||||
height: 0;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
appearance: none;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -.1em;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 16px;
|
||||
content: "";
|
||||
border: 2px solid $gray-800;
|
||||
border-radius: 2px 8px 2px 4px / 5px 3px 5px 3px;
|
||||
}
|
||||
|
||||
&:focus::before {
|
||||
box-shadow: 0 0 0 .25rem rgba(51, 51, 51, .25);
|
||||
}
|
||||
|
||||
&:checked::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: .1em;
|
||||
font-size: 1.5rem;
|
||||
line-height: .5;
|
||||
color: $gray-800;
|
||||
content: "x";
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
&::before {
|
||||
border: 2px solid $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[type="radio"] {
|
||||
position: relative;
|
||||
width: 0;
|
||||
height: 0;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
appearance: none;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -.1em;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
content: "";
|
||||
border: 2px solid $gray-800;
|
||||
border-radius: 50% 45% 40% 50% / 40% 50% 50% 45%;
|
||||
}
|
||||
|
||||
&:focus::before {
|
||||
box-shadow: 0 0 0 .25rem rgba(51, 51, 51, .25);
|
||||
}
|
||||
|
||||
&:checked::before {
|
||||
background-color: $gray-800;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
&::before {
|
||||
border: 2px solid $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-switch {
|
||||
padding-left: 0;
|
||||
|
||||
.form-check-input {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
|
||||
&::before {
|
||||
width: 32px;
|
||||
border-radius: 30% 35% 30% 30% / 30% 50% 30% 45%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
content: "";
|
||||
background-color: $white;
|
||||
border: 2px solid #333;
|
||||
border-radius: 50% 45% 40% 50% / 40% 50% 50% 45%;
|
||||
transition: left .15s ease-in-out;
|
||||
}
|
||||
|
||||
&:checked::after {
|
||||
top: 0;
|
||||
left: 18px;
|
||||
background-color: $gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
margin-left: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.dropdown-menu {
|
||||
overflow: hidden;
|
||||
border-radius: 555px 25px 25px 25px/25px 25px 25px 555px;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-top-width: 2px;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
overflow: hidden;
|
||||
background-color: $gray-800;
|
||||
border: 2px solid $gray-800;
|
||||
border-radius: 45px 15px 35px 5px/15px 5px 15px 65px;
|
||||
|
||||
&-item {
|
||||
border-top: 2px solid $gray-800;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-radius: 255px 5px 225px 5px/25px 225px 25px 255px;
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills .nav-link {
|
||||
border-radius: $border-radius-sketchy;
|
||||
}
|
||||
|
||||
.nav-link,
|
||||
.page-link,
|
||||
.list-group-item,
|
||||
.dropdown-item {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
border-radius: 45px 15px 225px 5px/25px 225px 25px 255px;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
border: 2px solid $gray-800;
|
||||
border-radius: $border-radius-sketchy;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.page-link {
|
||||
border-radius: 425px 255px 25px 25px/25px 25px 5px 25px;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.badge {
|
||||
border-radius: $border-radius-sm-sketchy;
|
||||
|
||||
&-pill {
|
||||
border-radius: 7rem 8rem 8rem 8rem / 4rem 5rem 6rem 6rem;
|
||||
}
|
||||
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: $border-radius-sketchy;
|
||||
|
||||
.btn-close {
|
||||
&::before {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Progress bars
|
||||
|
||||
.progress {
|
||||
border: 2px solid $gray-800;
|
||||
border-radius: $border-radius-sm-sketchy;
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.card {
|
||||
border-radius: 5px 5px 5px 5px/25px 25px 25px 5px;
|
||||
|
||||
&-outline {
|
||||
&-primary,
|
||||
&-success,
|
||||
&-info,
|
||||
&-warning,
|
||||
&-danger {
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
border-color: inherit;
|
||||
border-bottom-width: 2px;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 3px 3px 0 0/23px 23px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
border-top-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.toast {
|
||||
border-radius: 10px 10px 15px 5px/5px 15px 5px 15px;
|
||||
|
||||
&-header {
|
||||
font-family: $headings-font-family;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
&-content {
|
||||
border-radius: 15px 5px 5px 25px/5px 25px 25px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
padding: 0;
|
||||
border-radius: 45px 85px 15px 25px/15px 10px 35px 555px;
|
||||
|
||||
&-title {
|
||||
border-bottom: 2px solid $gray-800;
|
||||
}
|
||||
|
||||
&.bs-popover-start::before,
|
||||
&.bs-tether-element-attached-right::before {
|
||||
right: -13px;
|
||||
}
|
||||
|
||||
&.bs-popover-top::before,
|
||||
&.bs-tether-element-attached-bottom::before {
|
||||
bottom: -13px;
|
||||
}
|
||||
|
||||
&.bs-popover-bottom::before,
|
||||
&.bs-tether-element-attached-top::before {
|
||||
top: -13px;
|
||||
}
|
||||
|
||||
&.bs-popover-end::before,
|
||||
&.bs-tether-element-attached-left::before {
|
||||
left: -13px;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
&-inner {
|
||||
border-radius: $border-radius-sm-sketchy;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 2px solid $gray-800;
|
||||
border-radius: 15px 5px 5px 25px/5px 25px 25px 5px;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
background-image: none;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: .8rem;
|
||||
right: 1rem;
|
||||
content: "X";
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
&-thumbnail {
|
||||
border-radius: $border-radius-sketchy;
|
||||
}
|
||||
}
|
||||
160
themes/Bootswatch5.2_Scss/sketchy/_variables.scss
Normal file
160
themes/Bootswatch5.2_Scss/sketchy/_variables.scss
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
// Sketchy 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "sketchy" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #f7f7f9 !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ccc !default;
|
||||
$gray-500: #aaa !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #555 !default;
|
||||
$gray-800: #333 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #dc3545 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #28a745 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #17a2b8 !default;
|
||||
|
||||
$primary: $gray-800 !default;
|
||||
$secondary: $gray-700 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $white !default;
|
||||
$dark: $gray-700 !default;
|
||||
|
||||
$min-contrast-ratio: 1.6 !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-decoration: underline !default;
|
||||
|
||||
// Components
|
||||
|
||||
$border-width: 2px !default;
|
||||
$border-radius: 25px !default;
|
||||
$border-radius-lg: 35px !default;
|
||||
$border-radius-sm: 15px !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: Neucha, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
|
||||
$font-weight-base: 700 !default;
|
||||
$headings-font-family: "Cabin Sketch", cursive !default;
|
||||
|
||||
$blockquote-small-color: $gray-800 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-hover-bg: $white !default;
|
||||
$table-border-width: 2px !default;
|
||||
$table-border-color: $gray-800 !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-border-color: $gray-800 !default;
|
||||
$input-focus-border-color: $input-border-color !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-border-color: $gray-800 !default;
|
||||
$dropdown-divider-bg: $gray-800 !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $gray-800 !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-tabs-border-color: $gray-800 !default;
|
||||
$nav-tabs-link-hover-border-color: $gray-800 !default;
|
||||
$nav-tabs-link-active-color: $gray-800 !default;
|
||||
$nav-tabs-link-active-border-color: $gray-800 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-color: $white !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-dark-toggler-border-color: $white !default;
|
||||
$navbar-light-color: $gray-800 !default;
|
||||
$navbar-light-hover-color: $gray-800 !default;
|
||||
$navbar-light-active-color: $gray-800 !default;
|
||||
$navbar-light-toggler-border-color: $gray-800 !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-border-color: $gray-800 !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: $gray-800 !default;
|
||||
$pagination-hover-border-color: $gray-800 !default;
|
||||
$pagination-disabled-color: $gray-400 !default;
|
||||
$pagination-disabled-border-color: $gray-800 !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-width: 2px !default;
|
||||
$card-border-color: $gray-800 !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-border-color: $gray-800 !default;
|
||||
|
||||
// Badges
|
||||
|
||||
$badge-padding-y: .5em !default;
|
||||
$badge-padding-x: 1.2em !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-border-width: 2px !default;
|
||||
$toast-border-color: $gray-800 !default;
|
||||
$toast-header-color: $gray-800 !default;
|
||||
$toast-header-border-color: $toast-border-color !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-border-color: $gray-800 !default;
|
||||
$modal-header-border-color: $gray-800 !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $white !default;
|
||||
$progress-bar-bg: $gray-400 !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-border-color: $gray-800 !default;
|
||||
$list-group-hover-bg: $gray-300 !default;
|
||||
$list-group-active-color: $white !default;
|
||||
$list-group-active-bg: $gray-800 !default;
|
||||
$list-group-action-color: $gray-800 !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-divider-color: $gray-800 !default;
|
||||
$breadcrumb-active-color: $gray-800 !default;
|
||||
$breadcrumb-border-radius: .25rem !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: inherit !default;
|
||||
$btn-close-opacity: 1 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
$btn-close-focus-shadow: none !default;
|
||||
1
themes/Bootswatch5.2_Scss/sketchy/index.html
Normal file
1
themes/Bootswatch5.2_Scss/sketchy/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
17
themes/Bootswatch5.2_Scss/sketchy/style.scss
Normal file
17
themes/Bootswatch5.2_Scss/sketchy/style.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
370
themes/Bootswatch5.2_Scss/slate/_bootswatch.scss
Normal file
370
themes/Bootswatch5.2_Scss/slate/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,370 @@
|
|||
// Slate 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
// Mixins
|
||||
|
||||
@mixin btn-shadow($color){
|
||||
@include gradient-y-three-colors(tint-color($color, 12%), $color, 60%, shade-color($color, 8%));
|
||||
filter: none;
|
||||
}
|
||||
|
||||
@mixin btn-shadow-inverse($color){
|
||||
@include gradient-y-three-colors(shade-color($color, 36%), shade-color($color, 30%), 40%, shade-color($color, 26%));
|
||||
filter: none;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
|
||||
border: 1px solid rgba(0, 0, 0, .6);
|
||||
|
||||
.container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
border-color: rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
&-fixed-top {
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
&-fixed-bottom {
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 1rem;
|
||||
border-right: 1px solid rgba(0, 0, 0, .2);
|
||||
border-left: 1px solid rgba(255, 255, 255, .1);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include btn-shadow-inverse($gray-800);
|
||||
border-left: 1px solid rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
|
||||
&-brand {
|
||||
padding: .75rem 1rem subtract(24px, .75rem);
|
||||
margin-right: 0;
|
||||
border-right: 1px solid rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.nav-item.active .nav-link {
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
border-left: 1px solid rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
&-nav .nav-item + .nav-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.bg-light {
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
|
||||
|
||||
.nav-link {
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include btn-shadow-inverse($gray-600);
|
||||
border-left: 1px solid rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.navbar-expand-sm {
|
||||
.navbar-brand,
|
||||
.nav-link {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar-expand-md {
|
||||
.navbar-brand,
|
||||
.nav-link {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.navbar-expand-lg {
|
||||
.navbar-brand,
|
||||
.nav-link {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
|
||||
border-color: rgba(0, 0, 0, .6);
|
||||
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
&.disabled {
|
||||
border-color: rgba(0, 0, 0, .6);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled):active:hover,
|
||||
&:not([disabled]):not(.disabled).active:hover {
|
||||
border-color: rgba(0, 0, 0, .6);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@include btn-shadow($primary);
|
||||
|
||||
&:not([disabled]):not(.disabled):hover,
|
||||
&:not([disabled]):not(.disabled):focus,
|
||||
&:not([disabled]):not(.disabled):active:hover,
|
||||
&:not([disabled]):not(.disabled).active:hover {
|
||||
@include btn-shadow-inverse($primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@include btn-shadow($secondary);
|
||||
|
||||
&:not([disabled]):not(.disabled):hover,
|
||||
&:not([disabled]):not(.disabled):focus,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active {
|
||||
@include btn-shadow-inverse($secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
@include btn-shadow($success);
|
||||
color: $white;
|
||||
|
||||
&:not([disabled]):not(.disabled):hover,
|
||||
&:not([disabled]):not(.disabled):focus,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active {
|
||||
@include btn-shadow-inverse($success);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
@include btn-shadow($info);
|
||||
color: $white;
|
||||
|
||||
&:not([disabled]):not(.disabled):hover,
|
||||
&:not([disabled]):not(.disabled):focus,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active {
|
||||
@include btn-shadow-inverse($info);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
@include btn-shadow($warning);
|
||||
color: $white;
|
||||
|
||||
&:not([disabled]):not(.disabled):hover,
|
||||
&:not([disabled]):not(.disabled):focus,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active {
|
||||
@include btn-shadow-inverse($warning);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
@include btn-shadow($danger);
|
||||
|
||||
&:not([disabled]):not(.disabled):hover,
|
||||
&:not([disabled]):not(.disabled):focus,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active {
|
||||
@include btn-shadow-inverse($danger);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
&-primary {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link,
|
||||
.btn-link:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
.btn.active {
|
||||
border-color: rgba(0, 0, 0, .6);
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
legend {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
@include btn-shadow($secondary);
|
||||
color: $white;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
@include btn-shadow-inverse($gray-800);
|
||||
border: 1px solid rgba(0, 0, 0, .6);
|
||||
|
||||
&:not([disabled]):not(.disabled):hover,
|
||||
&:not([disabled]):not(.disabled):focus,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active {
|
||||
@include btn-shadow($gray-800);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
border: 1px solid rgba(0, 0, 0, .6);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link,
|
||||
.nav-link:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
@include btn-shadow($gray-800);
|
||||
color: $white;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
|
||||
border: 1px solid rgba(0, 0, 0, .6);
|
||||
|
||||
&:hover {
|
||||
@include btn-shadow-inverse($gray-800);
|
||||
border: 1px solid rgba(0, 0, 0, .6);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-link:hover {
|
||||
background-color: transparent;
|
||||
@include btn-shadow-inverse($gray-800);
|
||||
border: 1px solid rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
.nav-link.disabled,
|
||||
.nav-link.disabled:hover {
|
||||
@include btn-shadow($gray-800);
|
||||
color: $nav-link-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.page-link {
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
|
||||
@include btn-shadow($gray-800);
|
||||
|
||||
&:hover {
|
||||
@include btn-shadow-inverse($gray-800);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page-item.active .page-link {
|
||||
@include btn-shadow-inverse($gray-800);
|
||||
}
|
||||
|
||||
.page-item.disabled .page-link {
|
||||
@include btn-shadow($gray-800);
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, .6);
|
||||
@include btn-shadow($gray-800);
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
color: $white;
|
||||
border: none;
|
||||
|
||||
a,
|
||||
.alert-link {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
&-light {
|
||||
&,
|
||||
a:not(.btn),
|
||||
.alert-link {
|
||||
color: $body-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.list-group {
|
||||
&-item-action:hover {
|
||||
background-color: shade-color($gray-900, 10%);
|
||||
}
|
||||
}
|
||||
168
themes/Bootswatch5.2_Scss/slate/_variables.scss
Normal file
168
themes/Bootswatch5.2_Scss/slate/_variables.scss
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
// Slate 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "slate" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #999 !default;
|
||||
$gray-600: #7a8288 !default;
|
||||
$gray-700: #52575c !default;
|
||||
$gray-800: #3a3f44 !default;
|
||||
$gray-900: #272b30 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #ee5f5b !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #f89406 !default;
|
||||
$green: #62c462 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #5bc0de !default;
|
||||
|
||||
$primary: $gray-800 !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-200 !default;
|
||||
$dark: $gray-900 !default;
|
||||
|
||||
$min-contrast-ratio: 1.95 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: $gray-900 !default;
|
||||
$body-color: #aaa !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $white !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// Tables
|
||||
|
||||
$table-color: $white !default;
|
||||
$table-accent-bg: rgba($white, .05) !default;
|
||||
$table-hover-bg: rgba($white, .075) !default;
|
||||
$table-border-color: rgba($black, .6) !default;
|
||||
$table-dark-border-color: $table-border-color !default;
|
||||
$table-dark-color: $white !default;
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$input-btn-padding-y: .75rem !default;
|
||||
$input-btn-padding-x: 1rem !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-bg: $white !default;
|
||||
$input-disabled-bg: #ccc !default;
|
||||
|
||||
$input-color: $gray-900 !default;
|
||||
|
||||
$form-check-input-bg: $white !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-bg: $gray-800 !default;
|
||||
$dropdown-border-color: rgba($black, .6) !default;
|
||||
$dropdown-divider-bg: rgba($black, .15) !default;
|
||||
$dropdown-link-color: $body-color !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $body-bg !default;
|
||||
$dropdown-link-active-color: $dropdown-link-hover-color !default;
|
||||
$dropdown-link-active-bg: $dropdown-link-hover-bg !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-tabs-border-color: rgba($black, .6) !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color !default;
|
||||
$nav-tabs-link-active-color: $white !default;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 0 !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-light-hover-color: $gray-800 !default;
|
||||
$navbar-light-active-color: $gray-800 !default;
|
||||
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: transparent !default;
|
||||
$pagination-border-color: rgba($black, .6) !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: transparent !default;
|
||||
$pagination-hover-border-color: rgba($black, .6) !default;
|
||||
$pagination-active-bg: transparent !default;
|
||||
$pagination-active-border-color: rgba($black, .6) !default;
|
||||
$pagination-disabled-bg: transparent !default;
|
||||
$pagination-disabled-border-color: rgba($black, .6) !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-color: rgba($black, .6) !default;
|
||||
$card-cap-bg: lighten($gray-800, 10%) !default;
|
||||
$card-bg: lighten($body-bg, 5%) !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-bg: lighten($body-bg, 5%) !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-background-color: lighten($body-bg, 5%) !default;
|
||||
$toast-border-color: rgba(0, 0, 0, .2) !default;
|
||||
$toast-header-color: $body-color !default;
|
||||
$toast-header-background-color: $toast-background-color !default;
|
||||
$toast-header-border-color: $toast-border-color !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-bg: lighten($body-bg, 5%) !default;
|
||||
$modal-header-border-color: rgba(0, 0, 0, .2) !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: darken($gray-900, 5%) !default;
|
||||
$progress-bar-color: $gray-600 !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-color: $white !default;
|
||||
$list-group-bg: lighten($body-bg, 5%) !default;
|
||||
$list-group-border-color: rgba($black, .6) !default;
|
||||
$list-group-hover-bg: lighten($body-bg, 10%) !default;
|
||||
$list-group-active-color: $white !default;
|
||||
$list-group-active-bg: $list-group-hover-bg !default;
|
||||
$list-group-active-border-color: $list-group-border-color !default;
|
||||
$list-group-disabled-color: $gray-700 !default;
|
||||
$list-group-action-color: $white !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-active-color: $gray-500 !default;
|
||||
$breadcrumb-border-radius: .25rem !default;
|
||||
|
||||
// Code
|
||||
|
||||
$pre-color: inherit !default;
|
||||
1
themes/Bootswatch5.2_Scss/slate/index.html
Normal file
1
themes/Bootswatch5.2_Scss/slate/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
28
themes/Bootswatch5.2_Scss/slate/style.scss
Normal file
28
themes/Bootswatch5.2_Scss/slate/style.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
@mixin btn-shadow($color){
|
||||
@include gradient-y-three-colors(lighten($color, 6%), $color, 60%, darken($color, 4%));
|
||||
filter: none;
|
||||
}
|
||||
|
||||
@mixin btn-shadow-inverse($color){
|
||||
@include gradient-y-three-colors(darken($color, 18%), darken($color, 15%), 40%, darken($color, 13%));
|
||||
filter: none;
|
||||
}
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
66
themes/Bootswatch5.2_Scss/solar/_bootswatch.scss
Normal file
66
themes/Bootswatch5.2_Scss/solar/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
// Solar 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@if $enable-gradients {
|
||||
background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
|
||||
} @else {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
color: $white;
|
||||
border: none;
|
||||
|
||||
a,
|
||||
.alert-link {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@if $enable-gradients {
|
||||
background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
|
||||
} @else {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-light {
|
||||
&,
|
||||
a:not(.btn),
|
||||
.alert-link {
|
||||
color: $body-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.badge {
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
189
themes/Bootswatch5.2_Scss/solar/_variables.scss
Normal file
189
themes/Bootswatch5.2_Scss/solar/_variables.scss
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
// Solar 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "solar" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
// stylelint-disable
|
||||
$white: #fff !default;
|
||||
$gray-100: #fdf6e3 !default;
|
||||
$gray-200: #eee8d5 !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #839496 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #073642 !default;
|
||||
$gray-900: #002b36 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #b58900 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #d33682 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #cb4b16 !default;
|
||||
$green: #2aa198 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #268bd2 !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 2.5 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: $gray-900 !default;
|
||||
$body-color: $gray-600 !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $success !default;
|
||||
$link-hover-color: $link-color !default;
|
||||
|
||||
// Components
|
||||
|
||||
$component-active-color: rgba(255, 255, 255, .75) !default;
|
||||
$component-active-bg: $gray-800 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-accent-bg: rgba($white, .05) !default;
|
||||
$table-hover-bg: rgba($white, .075) !default;
|
||||
$table-border-color: $component-active-bg !default;
|
||||
$table-dark-bg: $gray-500 !default;
|
||||
$table-dark-border-color: darken($gray-500, 3%) !default;
|
||||
$table-dark-color: $body-bg !default;
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-bg: #a9bdbd !default;
|
||||
$input-disabled-bg: #657b83 !default;
|
||||
|
||||
$input-color: $gray-800 !default;
|
||||
$input-border-color: rgba($black, .15) !default;
|
||||
$input-placeholder-color: #657b83 !default;
|
||||
$input-group-addon-color: $gray-600 !default;
|
||||
$input-group-addon-bg: $gray-800 !default;
|
||||
|
||||
$form-check-input-bg: rgba(255, 255, 255, .75) !default;
|
||||
$form-check-input-border: 1px solid $white !default;
|
||||
$form-check-input-checked-bg-color: $primary !default;
|
||||
|
||||
$form-switch-color: rgba(255, 255, 255, .75) !default;
|
||||
$form-switch-focus-color: $form-switch-color !default;
|
||||
|
||||
$form-range-track-bg: $gray-800 !default;
|
||||
$form-range-thumb-bg: $primary !default;
|
||||
|
||||
$form-file-button-color: $gray-600 !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-bg: $gray-800 !default;
|
||||
$dropdown-divider-bg: $body-bg !default;
|
||||
$dropdown-link-color: $body-color !default;
|
||||
$dropdown-link-hover-color: rgba(255, 255, 255, .75) !default;
|
||||
$dropdown-link-hover-bg: $body-bg !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-tabs-border-color: $gray-800 !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color !default;
|
||||
$nav-tabs-link-active-color: $component-active-color !default;
|
||||
$nav-tabs-link-active-bg: $body-bg !default;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
|
||||
|
||||
// Navbars
|
||||
|
||||
$navbar-light-color: rgba($black, .4) !default !default;
|
||||
$navbar-light-active-color: rgba($black, .7) !default !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-bg: transparent !default;
|
||||
$pagination-border-color: $gray-800 !default;
|
||||
$pagination-hover-bg: $gray-800 !default;
|
||||
$pagination-hover-border-color: $gray-800 !default;
|
||||
$pagination-active-color: rgba(255, 255, 255, .75) !default;
|
||||
$pagination-active-bg: $gray-800 !default;
|
||||
$pagination-active-border-color: $gray-800 !default;
|
||||
$pagination-disabled-color: $gray-800 !default;
|
||||
$pagination-disabled-bg: transparent !default;
|
||||
$pagination-disabled-border-color: $gray-800 !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-color: rgba($gray-900, .95) !default;
|
||||
$card-cap-bg: rgba($gray-800, .25) !default;
|
||||
$card-bg: rgba($gray-200, .125) !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-bg: $gray-800 !default;
|
||||
$popover-border-color: $body-bg !default;
|
||||
$popover-header-bg: $gray-800 !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-background-color: lighten($body-bg, 5%) !default;
|
||||
$toast-border-color: rgba(0, 0, 0, .2) !default;
|
||||
$toast-header-color: $body-color !default;
|
||||
$toast-header-background-color: $toast-background-color !default;
|
||||
$toast-header-border-color: $toast-border-color !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-bg: $gray-800 !default;
|
||||
$modal-content-border-color: $body-bg !default;
|
||||
$modal-header-border-color: $body-bg !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $gray-800 !default;
|
||||
$progress-bar-color: $primary !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-color: $white !default;
|
||||
$list-group-bg: transparent !default;
|
||||
$list-group-border-color: $gray-800 !default;
|
||||
$list-group-hover-bg: $gray-800 !default;
|
||||
$list-group-active-color: $white !default;
|
||||
$list-group-disabled-color: $gray-600 !default;
|
||||
$list-group-disabled-bg: transparent !default;
|
||||
$list-group-action-color: $body-color !default;
|
||||
$list-group-action-hover-color: $white !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-bg: $component-active-bg !default;
|
||||
$breadcrumb-active-color: $gray-500 !default;
|
||||
$breadcrumb-border-radius: .25rem !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
|
||||
// Code
|
||||
|
||||
$pre-color: inherit !default;
|
||||
1
themes/Bootswatch5.2_Scss/solar/index.html
Normal file
1
themes/Bootswatch5.2_Scss/solar/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
18
themes/Bootswatch5.2_Scss/solar/style.scss
Normal file
18
themes/Bootswatch5.2_Scss/solar/style.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
99
themes/Bootswatch5.2_Scss/spacelab/_bootswatch.scss
Normal file
99
themes/Bootswatch5.2_Scss/spacelab/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
// Spacelab 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Mixins
|
||||
|
||||
@mixin btn-shadow($color) {
|
||||
@include gradient-y-three-colors(tint-color($color, 24%), $color, 50%, shade-color($color, 8%));
|
||||
filter: none;
|
||||
border: 1px solid shade-color($color, 20%);
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
.nav-link,
|
||||
.navbar-brand {
|
||||
text-shadow: -1px -1px 0 rgba(0, 0, 0, .1);
|
||||
transition: color ease-in-out .2s;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.bg-#{$color} {
|
||||
@include btn-shadow($value);
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-light {
|
||||
.nav-link,
|
||||
.navbar-brand {
|
||||
text-shadow: 1px 1px 0 rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: $navbar-light-color;
|
||||
|
||||
&:hover {
|
||||
color: $info;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
text-shadow: -1px -1px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
&-link {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-#{$color} {
|
||||
@include btn-shadow($value);
|
||||
}
|
||||
|
||||
.btn-#{$color}:not(.disabled):hover {
|
||||
@include btn-shadow(shade-color($value, 8%));
|
||||
}
|
||||
}
|
||||
|
||||
[class*="btn-outline-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.badge {
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.card,
|
||||
.list-group-item {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
64
themes/Bootswatch5.2_Scss/spacelab/_variables.scss
Normal file
64
themes/Bootswatch5.2_Scss/spacelab/_variables.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
// Spacelab 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "spacelab" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #eee !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #999 !default;
|
||||
$gray-600: #777 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #333 !default;
|
||||
$gray-900: #2d2d2d !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #446e9b !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #cd0200 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #d47500 !default;
|
||||
$green: #3cb521 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #3399f3 !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-500 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-200 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 2.65 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-600 !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $info !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$headings-color: $gray-900 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-color: rgba($white, .75) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-light-color: rgba($black, .4) !default;
|
||||
$navbar-light-hover-color: $info !default;
|
||||
$navbar-light-active-color: $info !default;
|
||||
1
themes/Bootswatch5.2_Scss/spacelab/index.html
Normal file
1
themes/Bootswatch5.2_Scss/spacelab/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
23
themes/Bootswatch5.2_Scss/spacelab/style.scss
Normal file
23
themes/Bootswatch5.2_Scss/spacelab/style.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins==========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
@mixin btn-shadow($color){
|
||||
@include gradient-y-three-colors(lighten($color, 15%), $color, 50%, darken($color, 4%));
|
||||
filter: none;
|
||||
border: 1px solid darken($color, 10%);
|
||||
}
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
150
themes/Bootswatch5.2_Scss/superhero/_bootswatch.scss
Normal file
150
themes/Bootswatch5.2_Scss/superhero/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
// Superhero 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@if $enable-gradients {
|
||||
background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
|
||||
} @else {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
.dropdown-menu {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
.table {
|
||||
font-size: $font-size-sm;
|
||||
|
||||
.thead-dark th {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
a:not(.btn) {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.dropdown-menu a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
label,
|
||||
.radio label,
|
||||
.checkbox label,
|
||||
.help-block {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.form-control{
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
.form-floating {
|
||||
label {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav-tabs,
|
||||
.nav-pills {
|
||||
.nav-link,
|
||||
.nav-link:hover {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
.nav-link.disabled {
|
||||
color: $nav-link-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.page-link:hover,
|
||||
.page-link:focus {
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
color: $white;
|
||||
border: none;
|
||||
|
||||
a,
|
||||
.alert-link {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@if $enable-gradients {
|
||||
background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
|
||||
} @else {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&-warning,
|
||||
&-info {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Popovers
|
||||
|
||||
.popover-header {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.modal {
|
||||
&-header,
|
||||
&-footer {
|
||||
background-color: $table-hover-bg;
|
||||
}
|
||||
}
|
||||
176
themes/Bootswatch5.2_Scss/superhero/_variables.scss
Normal file
176
themes/Bootswatch5.2_Scss/superhero/_variables.scss
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
// Superhero 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "superhero" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #ebebeb !default;
|
||||
$gray-200: #4e5d6c !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #4c9be8 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #d9534f !default;
|
||||
$orange: #f0ad4e !default;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #5cb85c !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #5bc0de !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-200 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: lighten($gray-200, 35%) !default;
|
||||
$dark: #20374c !default;
|
||||
|
||||
$min-contrast-ratio: 1.6 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: #0f2537 !default;
|
||||
$body-color: $gray-100 !default;
|
||||
|
||||
// Components
|
||||
|
||||
$border-radius: 0 !default;
|
||||
$border-radius-lg: 0 !default;
|
||||
$border-radius-sm: 0 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
|
||||
$text-muted: rgba(255, 255, 255, .4) !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-accent-bg: rgba($white, .05) !default;
|
||||
$table-hover-bg: rgba($white, .075) !default;
|
||||
$table-border-color: rgba($black, .15) !default;
|
||||
$table-head-bg: $light !default;
|
||||
$table-dark-bg: $light !default;
|
||||
$table-dark-border-color: $gray-200 !default;
|
||||
$table-dark-color: $body-bg !default;
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-bg: $white !default;
|
||||
$input-disabled-bg: $gray-100 !default;
|
||||
|
||||
$input-color: $gray-900 !default;
|
||||
$input-border-color: transparent !default;
|
||||
$input-border-width: 0 !default;
|
||||
|
||||
$input-placeholder-color: $gray-600 !default;
|
||||
|
||||
$input-group-addon-color: $body-color !default;
|
||||
|
||||
$form-check-input-bg: $white !default;
|
||||
$form-check-input-border: none !default;
|
||||
|
||||
$form-file-button-color: $body-color !default;
|
||||
|
||||
$form-floating-label-opacity: 1 !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-bg: $gray-200 !default;
|
||||
$dropdown-divider-bg: rgba($black, .15) !default;
|
||||
$dropdown-link-color: $body-color !default;
|
||||
$dropdown-link-hover-color: $dropdown-link-color !default;
|
||||
$dropdown-link-hover-bg: $table-hover-bg !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-disabled-color: rgba(255, 255, 255, .4) !default;
|
||||
$nav-tabs-border-color: $gray-200 !default;
|
||||
$nav-tabs-link-active-color: $body-color !default;
|
||||
$nav-tabs-link-active-border-color: $gray-200 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-color: rgba($white, .75) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: $gray-200 !default;
|
||||
$pagination-border-color: transparent !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: $nav-link-disabled-color !default;
|
||||
$pagination-hover-border-color: $pagination-border-color !default;
|
||||
$pagination-disabled-color: $nav-link-disabled-color !default;
|
||||
$pagination-disabled-bg: $pagination-bg !default;
|
||||
$pagination-disabled-border-color: $pagination-border-color !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-cap-bg: $table-hover-bg !default;
|
||||
$card-bg: $gray-200 !default;
|
||||
$card-inner-border-radius: 0 !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-bg: $gray-200 !default;
|
||||
$popover-header-bg: $table-hover-bg !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-background-color: $gray-200 !default;
|
||||
$toast-border-color: rgba(0, 0, 0, .2) !default;
|
||||
$toast-header-color: $body-color !default;
|
||||
$toast-header-background-color: $toast-background-color !default;
|
||||
$toast-header-border-color: $toast-border-color !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-bg: $gray-200 !default;
|
||||
$modal-header-border-color: rgba(0, 0, 0, .2) !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-color: $white !default;
|
||||
$list-group-bg: $gray-200 !default;
|
||||
$list-group-border-color: transparent !default;
|
||||
$list-group-hover-bg: $nav-link-disabled-color !default;
|
||||
$list-group-disabled-color: $nav-link-disabled-color !default;
|
||||
$list-group-action-color: $white !default;
|
||||
$list-group-action-hover-color: $white !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-bg: $gray-200 !default;
|
||||
$breadcrumb-divider-color: $body-color !default;
|
||||
$breadcrumb-active-color: $body-color !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: .5 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
|
||||
// Code
|
||||
|
||||
$pre-color: inherit !default;
|
||||
1
themes/Bootswatch5.2_Scss/superhero/index.html
Normal file
1
themes/Bootswatch5.2_Scss/superhero/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
18
themes/Bootswatch5.2_Scss/superhero/style.scss
Normal file
18
themes/Bootswatch5.2_Scss/superhero/style.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
135
themes/Bootswatch5.2_Scss/template.php
Normal file
135
themes/Bootswatch5.2_Scss/template.php
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
<?php
|
||||
/**
|
||||
* Theme Bootswatch 5.2 Scss
|
||||
* Typesetter CMS theme template
|
||||
* based on https://bootswatch.com
|
||||
*
|
||||
*/
|
||||
|
||||
global $page, $config;
|
||||
$path = $page->theme_dir . '/drop_down_menu.php';
|
||||
include_once($path);
|
||||
common::LoadComponents( 'bootstrap5.2-js,fontawesome' );
|
||||
$lang = isset($page->lang) ? $page->lang : $config['language'];
|
||||
|
||||
/**
|
||||
* If you are using Multi-Language Manager 1.2.3+
|
||||
* and want to use localized $langmessage values in the template,
|
||||
* uncomment the following line
|
||||
*/
|
||||
// common::GetLangFile('main.inc', $lang);
|
||||
|
||||
?><!DOCTYPE html>
|
||||
<html lang="<?php echo $lang; ?>" class="bootstrap-5">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
|
||||
<?php
|
||||
gpOutput::GetHead();
|
||||
?>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lte IE 9]>
|
||||
<div class="alert alert-warning">
|
||||
<h3>Bootstrap 5</h3>
|
||||
<p>We’re sorry but Internet Explorer 9 support was dropped as of Bootstrap version 4.</p>
|
||||
</div>
|
||||
<![endif]-->
|
||||
<header class="main-header">
|
||||
<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary gp-fixed-adjust" data-bs-theme="dark">
|
||||
<div class="container">
|
||||
|
||||
<?php
|
||||
echo common::Link('', $config['title'], '', 'class="navbar-brand"');
|
||||
?>
|
||||
|
||||
<button class="navbar-toggler" type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarResponsive"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
|
||||
<div class="collapse navbar-collapse navbar-left" id="navbarResponsive">
|
||||
<?php
|
||||
$GP_ARRANGE = false;
|
||||
// main nav classes
|
||||
$GP_MENU_CLASSES = array(
|
||||
'menu_top' => 'nav navbar-nav',
|
||||
'selected' => 'active',
|
||||
'selected_li' => '',
|
||||
'childselected' => 'active',
|
||||
'childselected_li' => 'active', // use '' if you do not want 1st-level nav items to indicate that a child item is active
|
||||
'li_' => 'nav-item nav-item-',
|
||||
'li_title' => '',
|
||||
'haschildren' => 'dropdown-toggle',
|
||||
'haschildren_li' => 'dropdown',
|
||||
'child_ul' => 'dropdown-menu',
|
||||
);
|
||||
|
||||
gpOutput::Get('TopTwoMenu'); //top two levels
|
||||
?>
|
||||
</div><!--/.navbar-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
</header><!-- /.main-header -->
|
||||
|
||||
<div class="main-content">
|
||||
<div class="container">
|
||||
<?php $page->GetContent(); ?>
|
||||
</div><!-- /.container-->
|
||||
</div><!-- /.main-content -->
|
||||
|
||||
<footer class="main-footer pt-5 pb-5 mt-5">
|
||||
<div class="container">
|
||||
|
||||
<?php
|
||||
// possible footer nav classes
|
||||
$GP_MENU_CLASSES = array(
|
||||
'menu_top' => 'footer-nav',
|
||||
'selected' => 'active',
|
||||
'selected_li' => '',
|
||||
'childselected' => 'active',
|
||||
'childselected_li' => 'active',
|
||||
'li_' => 'li-',
|
||||
'li_title' => '',
|
||||
'haschildren' => 'subitem-link',
|
||||
'haschildren_li' => 'subitem',
|
||||
'child_ul' => 'subitem-menu',
|
||||
);
|
||||
?>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3 footer-column footer-column-1">
|
||||
<?php gpOutput::Get('Extra', 'Footer_Column_1'); ?>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-lg-3 footer-column footer-column-2">
|
||||
<?php gpOutput::Get('Extra', 'Footer_Column_2'); ?>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-lg-3 footer-column footer-column-3">
|
||||
<?php gpOutput::Get('Extra', 'Footer_Column_3'); ?>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-lg-3 footer-column footer-column-4">
|
||||
<?php gpOutput::Get('Extra', 'Footer_Column_4'); ?>
|
||||
</div>
|
||||
</div><!-- /.row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 footer-bottom">
|
||||
<?php gpOutput::GetAdminLink(); ?>
|
||||
</div>
|
||||
</div><!-- /.row -->
|
||||
|
||||
</div><!-- /.container -->
|
||||
</footer><!-- /.main-footer -->
|
||||
</body>
|
||||
</html>
|
||||
22
themes/Bootswatch5.2_Scss/united/_bootswatch.scss
Normal file
22
themes/Bootswatch5.2_Scss/united/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
// United 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.badge {
|
||||
&.bg-light {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
56
themes/Bootswatch5.2_Scss/united/_variables.scss
Normal file
56
themes/Bootswatch5.2_Scss/united/_variables.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
// United 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "united" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #aea79f !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #333 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #772953 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #df382c !default;
|
||||
$orange: #e95420 !default;
|
||||
$yellow: #efb73e !default;
|
||||
$green: #38b44a !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #17a2b8 !default;
|
||||
|
||||
$primary: $orange !default;
|
||||
$secondary: $gray-500 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-200 !default;
|
||||
$dark: $purple !default;
|
||||
|
||||
$min-contrast-ratio: 1.8 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-800 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-dark-bg: $dark !default;
|
||||
$table-dark-border-color: darken($dark, 5%) !default;
|
||||
1
themes/Bootswatch5.2_Scss/united/index.html
Normal file
1
themes/Bootswatch5.2_Scss/united/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
18
themes/Bootswatch5.2_Scss/united/style.scss
Normal file
18
themes/Bootswatch5.2_Scss/united/style.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
363
themes/Bootswatch5.2_Scss/yeti/_bootswatch.scss
Normal file
363
themes/Bootswatch5.2_Scss/yeti/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,363 @@
|
|||
// Yeti 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
.dropdown-menu {
|
||||
background-color: $primary;
|
||||
|
||||
.dropdown-item,
|
||||
.dropdown-item:focus {
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
|
||||
.dropdown-item.active,
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item:focus {
|
||||
color: $white;
|
||||
background-color: shade-color($primary, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background-color: $gray-800 !important;
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: $gray-800;
|
||||
|
||||
.dropdown-item,
|
||||
.dropdown-item:focus {
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
|
||||
.dropdown-item.active,
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item:focus {
|
||||
color: $white;
|
||||
background-color: shade-color($gray-800, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
.dropdown-menu {
|
||||
background-color: $gray-200;
|
||||
|
||||
.dropdown-item,
|
||||
.dropdown-item:focus {
|
||||
color: $navbar-light-color;
|
||||
}
|
||||
|
||||
.dropdown-item.active,
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item:focus {
|
||||
color: $navbar-light-hover-color;
|
||||
background-color: tint-color($gray-200, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
&-primary {
|
||||
border-color: shade-color($primary, 10%);
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
border-color: shade-color($secondary, 10%);
|
||||
}
|
||||
|
||||
&-success {
|
||||
border-color: shade-color($success, 10%);
|
||||
}
|
||||
|
||||
&-info {
|
||||
color: $white;
|
||||
border-color: shade-color($info, 10%);
|
||||
}
|
||||
|
||||
&-danger {
|
||||
border-color: shade-color($danger, 10%);
|
||||
}
|
||||
|
||||
&-warning {
|
||||
color: $white;
|
||||
border-color: shade-color($warning, 10%);
|
||||
}
|
||||
|
||||
&-light {
|
||||
border-color: shade-color($light, 10%);
|
||||
}
|
||||
|
||||
&-dark {
|
||||
border-color: shade-color($dark, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.dropdown-menu {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
&.btn-primary ~ .dropdown-menu {
|
||||
background-color: $primary;
|
||||
border-color: shade-color($primary, 10%);
|
||||
|
||||
.dropdown-item {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item:focus {
|
||||
background-color: shade-color($primary, 16%);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-secondary ~ .dropdown-menu {
|
||||
background-color: $secondary;
|
||||
border-color: shade-color($secondary, 10%);
|
||||
|
||||
.dropdown-item {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item:focus {
|
||||
background-color: shade-color($secondary, 16%);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-success ~ .dropdown-menu {
|
||||
background-color: $success;
|
||||
border-color: shade-color($success, 10%);
|
||||
|
||||
.dropdown-item {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item:focus {
|
||||
background-color: shade-color($success, 16%);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-info ~ .dropdown-menu {
|
||||
background-color: $info;
|
||||
border-color: shade-color($info, 10%);
|
||||
|
||||
.dropdown-item {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item:focus {
|
||||
background-color: shade-color($info, 16%);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-warning ~ .dropdown-menu {
|
||||
background-color: $warning;
|
||||
border-color: shade-color($warning, 10%);
|
||||
|
||||
.dropdown-item {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item:focus {
|
||||
background-color: shade-color($warning, 16%);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-danger ~ .dropdown-menu {
|
||||
background-color: $danger;
|
||||
border-color: shade-color($danger, 10%);
|
||||
|
||||
.dropdown-item {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item:focus {
|
||||
background-color: shade-color($danger, 16%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
.text-secondary {
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
table {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
label,
|
||||
.control-label,
|
||||
.help-block,
|
||||
.checkbox,
|
||||
.radio,
|
||||
.form-control-feedback {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.dropdown-item {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.nav-link,
|
||||
.nav-link.disabled,
|
||||
.nav-link.disabled:hover,
|
||||
.nav-link.disabled:focus {
|
||||
background-color: $gray-200;
|
||||
border-color: $nav-tabs-border-color;
|
||||
}
|
||||
|
||||
.nav-item + .nav-item {
|
||||
.nav-link {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
.active {
|
||||
border: 1px solid shade-color($primary, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid $dropdown-border-color;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
font-weight: 300;
|
||||
|
||||
.page-link {
|
||||
margin-right: .1em;
|
||||
margin-left: .1em;
|
||||
border-color: transparent;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page-item.disabled {
|
||||
.page-link {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination,
|
||||
.pagination-lg,
|
||||
.pagination-sm {
|
||||
.page-item:first-child,
|
||||
.page-item:last-child {
|
||||
.page-link {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: 300;
|
||||
color: $white;
|
||||
|
||||
.alert-link {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:not(.alert-secondary):not(.alert-light) .btn-close {
|
||||
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$white}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
|
||||
}
|
||||
|
||||
&-secondary,
|
||||
&-light {
|
||||
&,
|
||||
a:not(.btn),
|
||||
.alert-link {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.bg-secondary,
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Progress bars
|
||||
|
||||
.progress[value] {
|
||||
height: 22px;
|
||||
padding: 2px;
|
||||
background-color: #f6f6f6;
|
||||
border: 1px solid #ccc;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
// Popovers
|
||||
|
||||
.popover-header {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
123
themes/Bootswatch5.2_Scss/yeti/_variables.scss
Normal file
123
themes/Bootswatch5.2_Scss/yeti/_variables.scss
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
// Yeti 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "yeti" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #eee !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ccc !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #888 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #333 !default;
|
||||
$gray-900: #222 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #008cba !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #f04124 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #e99002 !default;
|
||||
$green: #43ac6a !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #5bc0de !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-200 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-200 !default;
|
||||
$dark: $gray-900 !default;
|
||||
|
||||
$min-contrast-ratio: 1.9 !default;
|
||||
|
||||
// Components
|
||||
|
||||
$border-radius: 0 !default;
|
||||
$border-radius-lg: 0 !default;
|
||||
$border-radius-sm: 0 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$headings-font-weight: 300 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-bg-scale: 0% !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$input-btn-padding-x: .5rem !default;
|
||||
$btn-font-weight: 300 !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-border-color: rgba($black, .1) !default;
|
||||
$dropdown-divider-bg: rgba($black, .1) !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-disabled-color: $gray-400 !default;
|
||||
$nav-tabs-border-color: $dropdown-border-color !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color !default;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-color: rgba($white, .7) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $gray-600 !default;
|
||||
$pagination-border-color: $nav-tabs-border-color !default;
|
||||
$pagination-active-border-color: darken($primary, 5%) !default;
|
||||
$pagination-disabled-color: $gray-200 !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-inner-border-radius: 0 !default;
|
||||
|
||||
// Badges
|
||||
|
||||
$badge-font-weight: 300 !default;
|
||||
$badge-padding-x: 1rem !default;
|
||||
|
||||
// Alerts
|
||||
|
||||
$alert-link-font-weight: 400 !default;
|
||||
|
||||
$alert-bg-scale: 0% !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $gray-400 !default;
|
||||
$progress-bar-color: $white !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-disabled-bg: $gray-200 !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-border-radius: 3px !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $gray-600 !default;
|
||||
$btn-close-opacity: .6 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
1
themes/Bootswatch5.2_Scss/yeti/index.html
Normal file
1
themes/Bootswatch5.2_Scss/yeti/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<html></html>
|
||||
18
themes/Bootswatch5.2_Scss/yeti/style.scss
Normal file
18
themes/Bootswatch5.2_Scss/yeti/style.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Theme Bootswatch 5 Scss
|
||||
// Layout Cerulean 5.2
|
||||
// https://bootswatch.com
|
||||
// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
|
||||
|
||||
// Import Bootstrap Scss ========================================================
|
||||
@import '_variables.scss';
|
||||
@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
|
||||
@import '_bootswatch.scss';
|
||||
|
||||
|
||||
// Variables and Mixins =========================================================
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
// Import Common Styles =========================================================
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
|
||||
215
themes/Bootswatch5.2_Scss/zephyr/_bootswatch.scss
Normal file
215
themes/Bootswatch5.2_Scss/zephyr/_bootswatch.scss
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
// Zephyr 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: 500;
|
||||
|
||||
.nav-item {
|
||||
margin-right: .5rem;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dark {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-light {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .03);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(0, 0, 0, .05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
--bs-nav-link-padding-x: .5rem;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn-secondary,
|
||||
.btn-light,
|
||||
.btn-outline-secondary,
|
||||
.btn-outline-light {
|
||||
color: $gray-900;
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
border: 1px solid shade-color($secondary, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-outline-secondary {
|
||||
border-color: shade-color($secondary, 10%);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: shade-color($secondary, 10%);
|
||||
border-color: shade-color($secondary, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-light,
|
||||
.btn-outline-light {
|
||||
border-color: shade-color($light, 10%);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: shade-color($light, 10%);
|
||||
border-color: shade-color($light, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
.table {
|
||||
font-size: $font-size-sm;
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
|
||||
thead th {
|
||||
font-size: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
.input-group-text {
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav-tabs {
|
||||
font-weight: 500;
|
||||
|
||||
.nav-link {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
box-shadow: inset 0 -2px 0 $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: 500;
|
||||
|
||||
.page-link {
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: 500;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
&-item {
|
||||
padding: 1rem .5rem 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-item + .breadcrumb-item::before {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.alert {
|
||||
.btn-close {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.bg-secondary,
|
||||
&.bg-light {
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.list-group-item,
|
||||
.card {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
163
themes/Bootswatch5.2_Scss/zephyr/_variables.scss
Normal file
163
themes/Bootswatch5.2_Scss/zephyr/_variables.scss
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
// Zephyr 5.2.2
|
||||
// Bootswatch
|
||||
|
||||
$theme: "zephyr" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #3459e6 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #d63384 !default;
|
||||
$red: #da292e !default;
|
||||
$orange: #f8765f !default;
|
||||
$yellow: #f4bd61 !default;
|
||||
$green: #2fb380 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #287bb5 !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $white !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-900 !default;
|
||||
|
||||
$min-contrast-ratio: 1.65 !default;
|
||||
|
||||
$enable-shadows: true !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-700 !default;
|
||||
|
||||
$headings-color: $gray-900 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
|
||||
$font-size-sm: $font-size-base * .875 !default;
|
||||
|
||||
// Components
|
||||
|
||||
$box-shadow: 0 1px 2px rgba($black, .05) !default;
|
||||
$box-shadow-lg: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-cell-padding-y: 1rem !default;
|
||||
$table-cell-padding-x: 1rem !default;
|
||||
$table-cell-padding-y-sm: .5rem !default;
|
||||
$table-cell-padding-x-sm: .5rem !default;
|
||||
|
||||
$table-th-font-weight: 500 !default;
|
||||
|
||||
// Buttons + Forms
|
||||
|
||||
$input-btn-padding-y: .5rem !default;
|
||||
$input-btn-padding-x: 1rem !default;
|
||||
$input-btn-font-size: $font-size-sm !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-font-weight: 500 !default;
|
||||
$btn-box-shadow: $box-shadow !default;
|
||||
$btn-focus-box-shadow: $box-shadow !default;
|
||||
$btn-active-box-shadow: $box-shadow !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$form-label-font-weight: 500 !default;
|
||||
|
||||
$input-box-shadow: $box-shadow !default;
|
||||
|
||||
$input-group-addon-bg: $gray-100 !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-color: $body-color !default;
|
||||
$nav-link-hover-color: $body-color !default;
|
||||
|
||||
$nav-tabs-border-radius: 0 !default;
|
||||
$nav-tabs-link-active-color: $primary !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: .85rem !default;
|
||||
|
||||
$navbar-nav-link-padding-x: .75rem !default;
|
||||
|
||||
$navbar-dark-color: $white !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-dark-active-color: $white !default;
|
||||
|
||||
$navbar-light-color: $black !default;
|
||||
$navbar-light-hover-color: $black !default;
|
||||
$navbar-light-active-color: $black !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-font-size: $font-size-sm !default;
|
||||
$dropdown-border-color: $gray-300 !default;
|
||||
$dropdown-divider-bg: $gray-200 !default;
|
||||
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $primary !default;
|
||||
|
||||
$dropdown-item-padding-y: .5rem !default;
|
||||
$dropdown-item-padding-x: 1rem !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-padding-y: .5rem !default;
|
||||
$pagination-padding-x: 1rem !default;
|
||||
|
||||
$pagination-color: $gray-700 !default;
|
||||
|
||||
$pagination-focus-color: $pagination-color !default;
|
||||
|
||||
$pagination-hover-color: $pagination-color !default;
|
||||
$pagination-hover-bg: $gray-100 !default;
|
||||
|
||||
// Cards
|
||||
$card-spacer-x: 1.5rem !default;
|
||||
$card-cap-padding-y: 1rem !default;
|
||||
$card-cap-padding-x: 1.5rem !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-header-color: $headings-color !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-border-color: $gray-300 !default;
|
||||
$modal-header-border-width: 0 !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-item-padding-y: 1rem !default;
|
||||
$list-group-item-padding-x: 1.5rem !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-x: 1rem !default;
|
||||
|
||||
$breadcrumb-divider: quote(">") !default;
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue