[ Index ]

PHP Cross Reference of Joomla 4.2.2 documentation

title

Body

[close]

/media/templates/site/cassiopeia/scss/tools/variables/ -> _variables.scss (source)

   1  // Global
   2  $cassiopeia-container-main-bg:        hsl(0, 0%, 95%) !default;
   3  $cassiopeia-border-color:             hsl(210, 14%, 89%) !default;
   4  $cassiopeia-box-shadow:               1px 1px 4px hsla(0, 0%, 0%, .1) !default;
   5  $cassiopeia-block-header-bg:          hsl(0, 0%, 96%) !default;
   6  $cassiopeia-header-grad:              linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%) !default;
   7  $cassiopeia-header-grad-rtl:          linear-gradient(135deg, var(--cassiopeia-color-hover) 0%, var(--cassiopeia-color-primary) 100%) !default;
   8  $cassiopeia-inverted-text-color:      var(--cassiopeia-color-hover) !default;
   9  
  10  // Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas
  11  $variable-prefix:                     "" !default;
  12  
  13  // Color system
  14  
  15  // Standard
  16  $standard-color-primary:              hsl(220, 67%, 20%) !default;
  17  $standard-color-link:                 hsl(220, 67%, 40%) !default;
  18  $standard-color-hover:                hsl(242, 30%, 36%) !default;
  19  
  20  // Alternative
  21  $alternative-color-primary:           hsl(351, 54%, 37%) !default;
  22  $alternative-color-link:              hsl(207, 49%, 37%) !default;
  23  $alternative-color-hover:             hsl(351, 33%, 44%) !default;
  24  
  25  $white:                               hsl(0, 0%, 100%) !default;
  26  $gray-100:                            hsl(210, 17%, 98%) !default;
  27  $gray-200:                            hsl(210, 16%, 93%) !default;
  28  $gray-300:                            hsl(210, 14%, 89%) !default;
  29  $gray-400:                            hsl(210, 14%, 83%) !default;
  30  $gray-500:                            hsl(210, 11%, 71%) !default;
  31  $gray-600:                            hsl(210, 7%, 46%) !default;
  32  $gray-700:                            hsl(210, 9%, 31%) !default;
  33  $gray-800:                            hsl(210, 10%, 23%) !default;
  34  $gray-900:                            hsl(210, 11%, 15%) !default;
  35  $black:                               hsl(0, 0%, 0%) !default;
  36  
  37  $grays: (
  38    100:                                $gray-100,
  39    200:                                $gray-200,
  40    300:                                $gray-300,
  41    400:                                $gray-400,
  42    500:                                $gray-500,
  43    600:                                $gray-600,
  44    700:                                $gray-700,
  45    800:                                $gray-800,
  46    900:                                $gray-900
  47  ) !default;
  48  
  49  $blue:                                hsl(240, 98%, 17%) !default;
  50  $indigo:                              hsl(263, 90%, 51%) !default;
  51  $purple:                              hsl(261, 51%, 51%) !default;
  52  $pink:                                hsl(332, 79%, 58%) !default;
  53  $red:                                 hsl(3, 75%, 37%) !default;
  54  $orange:                              hsl(27, 98%, 54%) !default;
  55  $yellow:                              hsl(34, 100%, 34%) !default;
  56  $green:                               hsl(120, 32%, 39%) !default;
  57  $teal:                                hsl(194, 66%, 61%) !default;
  58  $cyan:                                hsl(207, 49%, 37%) !default;
  59  
  60  $colors: (
  61    "blue":                             $blue,
  62    "indigo":                           $indigo,
  63    "purple":                           $purple,
  64    "pink":                             $pink,
  65    "red":                              $red,
  66    "orange":                           $orange,
  67    "yellow":                           $yellow,
  68    "green":                            $green,
  69    "teal":                             $teal,
  70    "cyan":                             $cyan,
  71    "white":                            $white
  72  ) !default;
  73  
  74  $primary:                             var(--cassiopeia-color-primary) !default;
  75  $primaryBS:                           $blue !default;
  76  $secondary:                           $gray-600 !default;
  77  $success:                             $green !default;
  78  $info:                                $cyan !default;
  79  $warning:                             $yellow !default;
  80  $danger:                              $red !default;
  81  $light:                               $gray-100 !default;
  82  $dark:                                $gray-800 !default;
  83  
  84  
  85  $theme-colors: (
  86    primary:                            $primaryBS,
  87    secondary:                          $secondary,
  88    success:                            $success,
  89    info:                               $info,
  90    warning:                            $warning,
  91    danger:                             $danger,
  92    light:                              $light,
  93    dark:                               $dark
  94  ) !default;
  95  
  96  $colors: (
  97    card-bg:                         rgba(255, 255, 255, .7),
  98    bluegray:                        #b2bfcd,
  99    lightbluegray:                   #f6f9fc,
 100    toolbar-bg:                      $white,
 101    success-border:                  var(--success),
 102    info-border:                     var(--info),
 103    warning-border:                  var(--warning),
 104    danger-border:                   var(--danger),
 105    border:                          $gray-400,
 106    "white":                         $white, // the key here must be in quotes to avoid scss compilation warnings.
 107    white-offset:                    #fefefe,
 108    focus:                           #39f,
 109    focus-shadow:                    0 0 0 .2rem #eaeaea,
 110    toggle-color:                    $white, //used in sidebar
 111    template-sidebar-bg:                 var(--template-bg-dark-80),
 112    template-sidebar-font-color:         $white,
 113    template-sidebar-link-color:         $white,
 114    template-bg-light:                   #f0f4fb, //light background color, frontend dashboard background
 115    template-text-light:                 $white,
 116    template-special-color:              #132f53,
 117    template-link-color:                 #2a69b8,
 118    template-link-hover-color:           darken(#2a69b8, 20%),
 119    template-contrast:                   #2a69b8,
 120    template-bg-dark:                    hsl(var(--hue), 40%, 20%),
 121    template-bg-dark-3:                  hsl(var(--hue), 40%, 97%),
 122    template-bg-dark-5:                  hsl(var(--hue), 40%, 95%),
 123    template-bg-dark-7:                  hsl(var(--hue), 40%, 93%),
 124    template-bg-dark-10:                 hsl(var(--hue), 40%, 90%),
 125    template-bg-dark-15:                 hsl(var(--hue), 40%, 85%),
 126    template-bg-dark-20:                 hsl(var(--hue), 40%, 80%),
 127    template-bg-dark-30:                 hsl(var(--hue), 40%, 70%),
 128    template-bg-dark-40:                 hsl(var(--hue), 40%, 60%),
 129    template-bg-dark-50:                 hsl(var(--hue), 40%, 50%),
 130    template-bg-dark-60:                 hsl(var(--hue), 40%, 40%),
 131    template-bg-dark-65:                 hsl(var(--hue), 40%, 35%),
 132    template-bg-dark-70:                 hsl(var(--hue), 40%, 30%),
 133    template-bg-dark-75:                 hsl(var(--hue), 40%, 25%),
 134    template-bg-dark-80:                 hsl(var(--hue), 40%, 20%),
 135    template-bg-dark-90:                 hsl(var(--hue), 40%, 10%)
 136  ) !default;
 137  
 138  // Links
 139  $link-color:                          var(--cassiopeia-color-link) !default;
 140  $link-hover-color:                    var(--cassiopeia-color-hover) !default;
 141  
 142  // Breadcrumbs
 143  $breadcrumb-active-color:             $gray-700 !default;
 144  
 145  // Grid columns
 146  $grid-gutter-width:                   1em !default;
 147  $cassiopeia-grid-gutter:              $grid-gutter-width !default;
 148  
 149  // Components
 150  $fa-font-path:                        "../../../media/vendor/fontawesome-free/webfonts" !default;
 151  
 152  // Treeselect
 153  $treeselect-line-height:              2.2rem !default;
 154  
 155  // MetisMenu
 156  $metismenu:                           true !default;
 157  
 158  // Toolbar
 159  $cassiopeia-toolbar-line-height:      1.8rem !default;
 160  
 161  // Typography
 162  $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;
 163  $font-family-base:                    var(--cassiopeia-font-family-body, $font-family-sans-serif) !default;
 164  
 165  // Icons
 166  $jicon-css-prefix:                    icon !default;
 167  $fa-css-prefix:                       fa !default;
 168  
 169  // Tables
 170  $table-bg-scale:                      -80% !default;
 171  
 172  // This should be the same as bootstrap's default. But we override primary colour from $primary (which is a CSS Var)
 173  // to the SCSS variable matching
 174  $table-variants: (
 175    "primary":    shift-color($standard-color-primary, $table-bg-scale),
 176    "secondary":  shift-color($secondary, $table-bg-scale),
 177    "success":    shift-color($success, $table-bg-scale),
 178    "info":       shift-color($info, $table-bg-scale),
 179    "warning":    shift-color($warning, $table-bg-scale),
 180    "danger":     shift-color($danger, $table-bg-scale),
 181    "light":      $light,
 182    "dark":       $dark,
 183  ) !default;
 184  
 185  // Forms
 186  $input-padding:                       .6rem 1rem !default;
 187  $input-border:                        solid 1px $gray-400 !default;
 188  $input-btn-padding-y:                 .6rem !default;
 189  $input-btn-padding-x:                 1rem !default;
 190  $input-max-width:                     100% !default;
 191  $input-focus-border-color:            tint-color($standard-color-primary, 50%) !default;
 192  
 193  $cassiopeia-input-focus-shadow:       0 0 0 .2rem hsla(0, 0%, 0%, .1) !default;
 194  
 195  $form-select-indicator-padding:     3rem !default;
 196  $form-select-bg:                    $gray-200 !default;
 197  $form-select-bg-size:               116rem !default;
 198  $form-select-bg-size-sm:            75rem !default;
 199  $form-select-indicator:             url("../images/select-bg.svg") !default;
 200  $form-select-indicator-rtl:         url("../images/select-bg-rtl.svg") !default;
 201  $form-select-indicator-active:      url("../../../images/select-bg.svg") !default;
 202  $form-select-indicator-active-rtl:  url("../../../images/select-bg-rtl.svg") !default;
 203  $form-select-background:            $form-select-indicator no-repeat right center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
 204  $form-select-background-rtl:        $form-select-indicator-rtl no-repeat left center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
 205  $form-select-multiple-padding-y:    .3rem !default;
 206  
 207  $form-range-thumb-active-bg:        tint-color($standard-color-primary, 70%) !default;
 208  
 209  // Z-index master list
 210  $zindex-negative:                     -1 !default;
 211  $zindex-actions:                      auto !default;
 212  $zindex-toolbar:                      1000 !default;
 213  $zindex-sidebar:                      1010 !default;
 214  $zindex-header:                       1020 !default;
 215  $zindex-alerts:                       1030 !default;
 216  $zindex-modal-backdrop:               1040 !default;
 217  $zindex-modal:                        1050 !default;
 218  $zindex-popover:                      1060 !default;
 219  $zindex-tooltip:                      1070 !default;
 220  $zindex-mobile-bottom:                8000 !default;
 221  $zindex-mobile-toggle:                9999 !default;
 222  $zindex-mobile-menu:                  9000 !default;
 223  
 224  // Navs
 225  $nav-link-padding-y:                  .5rem !default;
 226  
 227  // Navs
 228  $cassiopeia-tabs-header-bg:           $cassiopeia-block-header-bg !default;
 229  $cassiopeia-tabs-active-bg:           hsla(0, 0%, 0%, .3) !default;
 230  $cassiopeia-tabs-active-highlight:    $primaryBS !default;
 231  
 232  // Navbar
 233  $nav-link-height:                     1.5rem + $nav-link-padding-y * 2 !default;
 234  
 235  // Cards
 236  $cassiopeia-card-title-bg:            $cassiopeia-block-header-bg !default;
 237  $cassiopeia-card-title-icon-bg:       $cassiopeia-block-header-bg !default;
 238  $cassiopeia-card-title-icon-bg-hover: scale-color($cassiopeia-card-title-bg, $lightness: 2%) !default;
 239  $card-bg-color-light:                 $gray-100 !default;
 240  $card-bg-color-dark:                  var(--cassiopeia-color-primary) !default;
 241  $card-border-color:                   $cassiopeia-border-color !default;
 242  
 243  // Badges
 244  $badge-default-bg:                    $gray-600 !default;
 245  
 246  // Modals
 247  $modal-header-height:                 3rem !default;
 248  
 249  // Accordion
 250  $accordion-button-active-bg:          tint-color($standard-color-primary, 90%) !default;
 251  $accordion-button-active-color:       shade-color($standard-color-primary, 10%) !default;
 252  
 253  // Alerts
 254  $state-success-text:                  $white !default;
 255  $state-success-bg:                    $success !default;
 256  $state-success-border:                scale-color($success, $lightness: -5%) !default;
 257  
 258  $state-info-text:                     $white !default;
 259  $state-info-bg:                       $info !default;
 260  $state-info-border:                   scale-color($info, $lightness: -7%) !default;
 261  
 262  $state-warning-text:                  $white !default;
 263  $state-warning-bg:                    $warning !default;
 264  $state-warning-border:                scale-color($warning, $lightness: -5%) !default;
 265  
 266  $state-danger-text:                   $white !default;
 267  $state-danger-bg:                     $danger !default;
 268  $state-danger-border:                 scale-color($danger, $lightness: -5%) !default;
 269  
 270  // Mark element
 271  $mark-bg: #fbeea8 !default;


Generated: Wed Sep 7 05:41:13 2022 Chilli.vc Blog - For Webmaster,Blog-Writer,System Admin and Domainer