bckelley/blueberry-pma-theme
1
0
Fork 0
mirror of https://github.com/bckelley/blueberry-pma-theme.git synced 2026-08-24 03:04:11 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
master
blueberry-pma-theme/boodark/scss/_variables.scss
T
Marian Bolojan cfec8dac18 BooDark v1.1.0
2023-03-10 20:52:47 +02:00

288 lines
10 KiB
SCSS
Raw Permalink Blame History

// stylelint-disable scss/dollar-variable-colon-space-after
// Variables
// =============================================================================
// Theme version
$pma-theme-version: "1.1.0";
// PMA color system
// -----------------------------------------------------------------------------
$white: #fff;
$black: #000;
$pma-gray-100: #f8f9fa;
$pma-gray-200: #e9ecef;
$pma-gray-300: #dee2e6;
$pma-gray-400: #ced4da;
$pma-gray-500: #adb5bd;
$pma-gray-600: #6c757d;
$pma-gray-700: #495057;
$pma-gray-800: #343a40;
$pma-gray-900: #212529;
$pma-gray-100-rgb: 248, 249, 250;
$pma-gray-200-rgb: 233, 236, 239;
$pma-gray-300-rgb: 222, 226, 230;
$pma-gray-400-rgb: 206, 212, 218;
$pma-gray-500-rgb: 173, 181, 189;
$pma-gray-600-rgb: 108, 117, 125;
$pma-gray-700-rgb: 73, 80, 87;
$pma-gray-800-rgb: 52, 58, 64;
$pma-gray-900-rgb: 33, 37, 41;
$pma-blue: #0d6efd;
$pma-indigo: #6610f2;
$pma-purple: #6f42c1;
$pma-pink: #d63384;
$pma-red: #dc3545;
$pma-orange: #fd7e14;
$pma-yellow: #ffc107;
$pma-green: #198754;
$pma-teal: #20c997;
$pma-cyan: #0dcaf0;
$pma-nord: #88c0d0;
// Theme Colors
$pma-theme-colors: (
"white": $white,
"black": $black,
"gray-100": $pma-gray-100,
"gray-200": $pma-gray-200,
"gray-300": $pma-gray-300,
"gray-400": $pma-gray-400,
"gray-500": $pma-gray-500,
"gray-600": $pma-gray-600,
"gray-700": $pma-gray-700,
"gray-800": $pma-gray-800,
"gray-900": $pma-gray-900,
"blue": $pma-blue,
"indigo": $pma-indigo,
"purple": $pma-purple,
"pink": $pma-pink,
"red": $pma-red,
"orange": $pma-orange,
"yellow": $pma-yellow,
"green": $pma-green,
"teal": $pma-teal,
"cyan": $pma-cyan,
"nord": $pma-nord
);
// Theme color scheme
// Values: "cyan", "teal", "nord", "orange"
// Default: "cyan"
// Set this value for the desired color scheme
$color-scheme: cyan !default;
$pma-color-scheme: $pma-cyan;
@if $color-scheme == teal {
$pma-color-scheme: $pma-teal;
} @else if $color-scheme == nord {
$pma-color-scheme: $pma-nord;
} @else if $color-scheme == orange {
$pma-color-scheme: $pma-orange;
}
// PMA Base Style
// -----------------------------------------------------------------------------
$pma-primary: $pma-color-scheme;
$pma-body-color: $white;
$pma-body-bg: $pma-gray-900;
$pma-component-bg: $pma-gray-800;
$pma-component-hover-bg: $pma-gray-600;
$pma-component-active-color: $black;
$pma-component-active-bg: $pma-primary;
$pma-table-bg: $pma-gray-700;
$pma-form-border-color: $pma-gray-900;
$pma-selected-bg: $pma-gray-700;
$pma-fieldset-color: $pma-gray-300;
$pma-fieldset-bg: $pma-gray-600;
$pma-border-color: $pma-gray-600;
$pma-disable-color: $pma-gray-500;
$pma-cond-border-color: $black;
$pma-button-color: $pma-primary;
$pma-link-color: $pma-primary;
$pma-link-hover-color: $pma-red;
$pma-custom-color: $pma-orange;
// Bootstrap variables
// -----------------------------------------------------------------------------
// Color system
$primary: $pma-primary;
$secondary: $pma-gray-700;
$light: $pma-gray-800;
// Options
// Gradient
// Spacing
// Position
// Body
$body-color: $pma-body-color;
$body-bg: $pma-body-bg;
// Utilities maps
// Links
$link-color: $pma-body-color;
// Paragraphs
// Grid breakpoints
// Grid containers
// Grid columns
// Container padding
// Components
$border-color: $pma-border-color;
// Typography
$text-muted: $pma-gray-400;
// Tables
$table-color: $pma-body-color;
$table-bg: $pma-component-bg;
$table-accent-bg: transparent;
$table-striped-color: $table-color;
$table-striped-bg: rgba($pma-body-bg, .6);
$table-active-color: $table-color;
$table-active-bg: rgba($pma-body-bg, .7);
$table-hover-color: $table-color;
$table-hover-bg: rgba($pma-body-bg, .8);
$table-border-color: $pma-form-border-color;
$table-group-separator-color: $pma-border-color;
// Buttons + Forms
// Buttons
// Forms
$input-bg: darken($pma-component-bg, 2.5%);
$input-disabled-bg: $pma-gray-600;
$input-border-color: $pma-form-border-color;
$input-placeholder-color: $pma-gray-400;
$input-group-addon-bg: $pma-component-bg;
$form-check-input-border: 1px solid rgba($pma-body-color, .4);
$form-select-indicator-color: $pma-body-color;
$form-switch-color: rgba($pma-body-color, .75);
$form-file-button-color: color-contrast($pma-gray-900);
$form-file-button-bg: $pma-gray-900;
$form-file-button-hover-bg: $pma-primary;
// Form validation
// Z-index master list
// Nav Tabs
$nav-tabs-bg: rgba($pma-body-bg, .5);
$nav-tabs-border-color: rgba($pma-body-bg, .5);
$nav-tabs-border-width: 0;
$nav-tabs-link-hover-border-color: transparent;
$nav-tabs-link-active-color: $pma-component-active-color;
$nav-tabs-link-active-bg: $pma-component-active-bg;
$nav-tabs-link-active-border-color: rgba($pma-body-bg, .5);
// Nav Pills
$nav-pills-bg: $pma-body-bg;
$nav-pills-link-active-color: $pma-component-active-color;
$nav-pills-link-active-bg: $pma-component-active-bg;
// Navbar
$navbar-light-color: $white;
$navbar-light-hover-color: rgba($white, .65);
$navbar-light-active-color: $white;
$navbar-light-disabled-color: rgba($white, .25);
$navbar-light-toggler-focus-bg: $pma-body-bg;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color: $navbar-light-active-color;
$navbar-light-brand-hover-color: $navbar-light-active-color;
$navbar-dark-color: rgba($black, .55);
$navbar-dark-hover-color: rgba($black, .7);
$navbar-dark-active-color: rgba($black, .9);
$navbar-dark-disabled-color: rgba($black, .3);
$navbar-dark-toggler-focus-bg: $pma-body-bg;
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color: rgba($white, .1);
$navbar-dark-brand-color: $navbar-dark-active-color;
$navbar-dark-brand-hover-color: $navbar-dark-active-color;
$nav-item-border-radius: .375rem;
// Dropdowns
$dropdown-color: $pma-body-color;
$dropdown-bg: $pma-body-bg;
$dropdown-link-color: $dropdown-color;
$dropdown-link-hover-color: $pma-body-color;
$dropdown-link-hover-bg: rgba($pma-body-color, .15);
// Pagination
$pagination-bg: $pma-body-bg;
$pagination-border-color: $pma-border-color;
$pagination-focus-bg: $pma-body-bg;
$pagination-hover-color: $white;
$pagination-hover-bg: $pma-blue;
$pagination-hover-border-color: $pagination-hover-bg;
$pagination-active-color: $white;
$pagination-active-bg: $pma-blue;
$pagination-active-border-color: $pagination-active-bg;
$pagination-disabled-color: $pma-disable-color;
$pagination-disabled-bg: $pma-component-bg;
$pagination-disabled-border-color: $pma-border-color;
// Placeholders
// Cards
$card-border-color: rgba($pma-body-bg, .5);
$card-cap-bg: rgba($pma-body-bg, .5);
$card-bg: $pma-component-bg;
// Accordion
$accordion-bg: $pma-component-bg;
$accordion-button-bg: darken($pma-component-bg, 2.5%);
$accordion-button-active-bg: darken($pma-component-bg, 3.5%);
$accordion-button-active-color: $pma-body-color;
$accordion-border-color: $pma-form-border-color;
// Tooltips
// Popovers
// Toasts
// Badges
// Modals
$modal-content-bg: lighten($pma-gray-800, 5%);
// Alerts
// Progress bars
// List group
$list-group-color: $pma-body-color;
$list-group-bg: $pma-component-bg;
$list-group-border-color: lighten($pma-form-border-color, 5%);
// Image thumbnails
// Figures
// Breadcrumbs
// Carousel
// Spinners
// Close
$btn-close-color: $pma-body-color;
// Offcanvas
// Code
// PMA variables
// -----------------------------------------------------------------------------
// Common
$pma-ajax-shadow: #888;
$pma-ajax-spacer: 8px;
$pma-ajax-width: 350px;
$pma-ajax-bg-zise: 24px;
$pma-confirmation-color: $black;
$pma-confirmation-bg: $pma-pink;
$selflink-border-color: $pma-border-color;
// Navigation
$navigation-width: 240px;
$navigation-color: $pma-body-color;
$navigation-bg: $pma-component-bg;
$navigation-selected-bg: $pma-selected-bg;
$navigation-border-color: $pma-border-color;
$navigation-shadow-color: $pma-border-color;
$navigation-drop-button-bg: $pma-border-color;
$navigation-resizer-hover-bg: $pma-button-color;
// Breadcrumbs
$breadcrumb-navbar-padding: .5rem;
$breadcrumb-navbar-padding-y: .5rem;
$breadcrumb-navbar-padding-x: 3rem;
$breadcrumb-navbar-margin-bottom: 0;
$breadcrumb-navbar-bg: $pma-component-bg;
// Buttons
$btn-outline-secondary: $pma-gray-400;
// Modals
$modal-cap-bg: rgba($pma-body-bg, .5);
// Console
$console-color: $pma-body-color;
$console-toolbar-bg: $pma-component-bg;
$console-content-bg: $pma-body-bg;
$console-message-bg: $pma-component-bg;
$console-message-text-bg: $pma-gray-700;
// CodeMirror
$codemirror-bg: $pma-component-bg;
$codemirror-color: $pma-body-color;
$codemirror-gutters: $pma-gray-700;
Reference in New Issue View Git Blame Copy Permalink