TrestleAdmin/trestle

View on GitHub
frontend/css/variables/_trestle.scss

Summary

Maintainability
Test Coverage
// Default theme

$theme-bg: theme-color("primary");
$error-bg: theme-color("danger");


// Header

$header-bg:    white;
$header-color: #333333;

$header-height: 50px;


// Footer

$footer-bg:    #f9f9f9;
$footer-color: #888888;


// Sidebar

$sidebar-bg:            #222222;
$sidebar-hover-bg:      #1a1a1a;
$sidebar-active-bg:     #393939;
$sidebar-active-border: 4px;

$sidebar-link-color:  #919191;
$sidebar-group-color: #595959;

$sidebar-toggle-bg:    rgba(black, 0.25);
$sidebar-toggle-color: rgba(white, 0.5);

$sidebar-mobile-toggle-bg:     transparent;
$sidebar-mobile-toggle-color:  white;
$sidebar-mobile-toggle-border: 1px solid rgba($sidebar-mobile-toggle-color, 0.15);

$sidebar-mobile-toggle-active-bg:     rgba($sidebar-mobile-toggle-color, 0.1);
$sidebar-mobile-toggle-active-border: $sidebar-mobile-toggle-border;

$sidebar-mobile-toggle-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$sidebar-mobile-toggle-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23");

$sidebar-width:           250px;
$sidebar-width-collapsed: 54px;

$sidebar-transition-duration: 250ms;

$sidebar-font-size-scale: 0.925;


// Content

$content-header-bg:  #fafafa;
$content-sidebar-bg: #f9f9f9;

$content-sidebar-width: 285px;

$main-content-header-bg:      $content-sidebar-bg;
$main-content-header-padding: 12px 20px;
$main-content-header-border:  1px solid rgba(black, 0.1);

$main-content-footer-bg:      $content-sidebar-bg;
$main-content-footer-padding: 12px 20px;
$main-content-footer-border:  1px solid rgba(black, 0.1);


// Tags

$tag-color:        white;
$tag-bg:           lighten(theme-color("primary"), 10%);
$tag-border:       theme-color("primary");

$tag-hover-color:  white;
$tag-hover-bg:     theme-color("primary");
$tag-hover-border: darken(theme-color("primary"), 10%);


// Scopes

$scope-padding:      0.25rem 0.675rem;

$scope-color:        rgba(black, 0.4);
$scope-bg:           rgba(black, 0.035);

$scope-label-color:  rgba(black, 0.5);

$scope-hover-color:  rgba(black, 0.5);
$scope-hover-bg:     rgba(black, 0.05);

$scope-active-color: white;
$scope-active-bg:    rgba(black, 0.25);


// Alerts

$alert-success-bg:     #7ac47a;
$alert-success-color:  white;
$alert-success-border: #66bb66;

$alert-danger-bg:      #de7471;
$alert-danger-color:   white;
$alert-danger-border:  #d85956;

$alert-info-bg:        darken(theme-color("info"), 10%);
$alert-info-color:     white;
$alert-info-border:    darken($alert-info-bg, 10%);

$alert-warning-bg:     darken(theme-color("warning"), 5%);
$alert-warning-color:  white;
$alert-warning-border: darken($alert-warning-bg, 5%);

$alert-light-bg:       theme-color("light");
$alert-light-color:    $body-color;
$alert-light-border:   darken($alert-light-bg, 5%);

$alert-dark-bg:        theme-color("dark");
$alert-dark-color:     white;
$alert-dark-border:    darken($alert-dark-bg, 10%);

$alert-primary-bg:     darken(theme-color("primary"), 5%);
$alert-primary-color:  white;
$alert-primary-border: darken($alert-primary-bg, 10%);


// Modals

$modal-header-bg: $theme-bg;
$modal-footer-bg: $content-sidebar-bg;