| [ Index ] |
PHP Cross Reference of Joomla 4.2.2 documentation |
[Summary view] [Print] [Text view]
1 // Variables 2 3 $white: #fff; 4 $whiteoffset: #fefefe; 5 $gray-100: #f8f9fa; 6 $gray-200: #e8e8e8; 7 $gray-300: #dee2e6; //used for toolbar and badges 8 $gray-400: #cdcdcd; //used for border-bottom sidebar-nav and toolbar normal border 9 $gray-500: #adb5bd; //used in toolbar and buttons for border 10 $gray-600: #666e76; //used for atum-text-dark and $secondary 11 $gray-700: #495057; //used for atum-text-dark, secondary 12 $gray-800: #343a40; 13 $gray-900: #212529; //used for tree header 14 $bluegray: #b2bfcd; // used for borders 15 $black: #000; //used for shadows 16 $focuscolor: #39f; //used for focus color 17 $dark-blue: #001b4c; //is the atum-special-color 18 $light-blue: #2a69b8; //is the template-link-color 19 $focusshadow: 0 0 0 .2rem #eaeaea; 20 21 // BS Colours 22 $blue: hsl(213, 63%, 44%); // base color for calculation, Primary-color 23 $indigo: #0377be; //used in bootstrap 24 $purple: #6f42c1; //used in bootstrap 25 $pink: #971250; //used in bootstrap 26 $red: #c52827; //used in bootstrap 27 $red-dark: #3b0d0c; //used for alerts error 28 $yellow: #ffb514; //used in bootstrap 29 $green: #457d54; //used in bootstrap 30 $green-dark: #0f2f21; //used for alert success 31 $teal: #20c997; //used in bootstrap 32 $cyan: #107d8e; //used in bootstrap 33 $darkblue: #132f53; 34 $base-color: $darkblue; 35 36 // Atum colours defined as scss variables for use in scss functions 37 $atum-text-dark: $gray-700; 38 $success: $green; 39 $danger: $red; 40 $info: $light-blue; 41 $warning: $yellow; 42 43 $theme-colors: (); 44 $theme-colors: map-merge(( 45 primary: $base-color, //used only in bootstrap, please use $atum-bg-dark 46 secondary: $gray-700, //used for btn-secondary 47 success: $success, 48 info: $light-blue, 49 warning: $yellow, 50 danger: $danger, 51 light: $gray-100, //used in bootstrap 52 dark: $gray-900, //used in bootstrap and for table-border 53 action: $base-color, 54 error: $red-dark, 55 alert-success: $green-dark 56 ), $theme-colors); 57 58 $atum-colors: ( 59 template-sidebar-bg: var(--template-bg-dark-80), 60 template-sidebar-font-color: $white, 61 template-sidebar-link-color: $white, 62 template-bg-light: #f0f4fb, //light background color, frontend dashboard background 63 template-text-light: $white, 64 template-special-color: $dark-blue, 65 template-link-color: $light-blue, 66 template-link-hover-color: darken($light-blue, 20%), 67 template-contrast: $light-blue, 68 template-bg-dark: hsl(var(--hue), 40%, 20%), 69 template-bg-dark-3: hsl(var(--hue), 40%, 97%), 70 template-bg-dark-5: hsl(var(--hue), 40%, 95%), 71 template-bg-dark-7: hsl(var(--hue), 40%, 93%), 72 template-bg-dark-10: hsl(var(--hue), 40%, 90%), 73 template-bg-dark-15: hsl(var(--hue), 40%, 85%), 74 template-bg-dark-20: hsl(var(--hue), 40%, 80%), 75 template-bg-dark-30: hsl(var(--hue), 40%, 70%), 76 template-bg-dark-40: hsl(var(--hue), 40%, 60%), 77 template-bg-dark-50: hsl(var(--hue), 40%, 50%), 78 template-bg-dark-60: hsl(var(--hue), 40%, 40%), 79 template-bg-dark-65: hsl(var(--hue), 40%, 35%), 80 template-bg-dark-70: hsl(var(--hue), 40%, 30%), 81 template-bg-dark-75: hsl(var(--hue), 40%, 25%), 82 template-bg-dark-80: hsl(var(--hue), 40%, 20%), 83 template-bg-dark-90: hsl(var(--hue), 40%, 10%) 84 ); 85 86 $colors: ( 87 card-bg: rgba(255, 255, 255, .7), 88 bluegray: $bluegray, 89 lightbluegray: #f6f9fc, 90 toolbar-bg: $white, 91 success-border: var(--success), 92 info-border: var(--info), 93 warning-border: var(--warning), 94 danger-border: var(--danger), 95 login-main-bg: darken($base-color, 8%), //used on login 96 border: $gray-400, 97 "white": $white, // the key here must be in quotes to avoid scss compilation warnings. 98 white-offset: $whiteoffset, 99 focus: $focuscolor, 100 focus-shadow: $focusshadow, 101 toggle-color: $white, //used in sidebar 102 ); 103 104 // Alerts 105 $alert-border-level: 0; 106 $alert-color-level: 0; 107 108 // Global 109 $atum-box-shadow: 0 2px 10px -8px var(--template-bg-dark-50); 110 $enable-rounded: true; 111 $input-box-shadow: inset 0 0 0 .1rem #e9e9e9; 112 $input-btn-padding-y: .5rem; 113 $input-btn-padding-x: 1rem; 114 $input-max-width: 100%; 115 $btn-disabled-opacity: .4; 116 117 // Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas 118 $variable-prefix: ""; 119 120 // Toolbar 121 $atum-toolbar-line-height: 2.45rem; 122 123 // Sidebar 124 $sidebar-width: 18rem; 125 $sidebar-width-login: 28.75rem; 126 $sidebar-width-closed: 3rem; 127 $main-brand-height: 3rem; 128 129 // Fonts 130 $font-family-sans-serif: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; 131 $h1-font-size: 1.65rem; 132 $h2-font-size: 1.5rem; 133 $h3-font-size: 1.25rem; 134 $h4-font-size: 1rem; 135 $h5-font-size: .9286rem; 136 $h6-font-size: .8571rem; 137 $headings-color: var(--template-bg-dark); 138 $font-size-sm: .8rem; 139 $font-size-vsm: .6rem; 140 $display1-size: 1rem; 141 $display2-size: .875rem; 142 $content-font-size: .875rem; 143 $label-font-size: 1rem; 144 $danger-bg: #900; 145 $badge-font-size: .75rem; 146 $jicon-css-prefix: icon !default; 147 $fa-css-prefix: fa !default; 148 $fa-font-path: "../../../../media/vendor/fontawesome-free/webfonts"; 149 $roboto-font-path: "../../../../../media/vendor/roboto-fontface/fonts"; 150 151 // Font weights 152 $thin-weight: 100; 153 $extralight-weight: 200; 154 $light-weight: 300; 155 $normal-weight: 400; 156 $medium-weight: 500; 157 $semibold-weight: 600; 158 $bold-weight: 700; 159 $extrabold-weight: 800; 160 $black-weight: 900; 161 162 // Tables 163 $table-bg: var(--white); 164 $table-cell-padding-y: .75rem; 165 $table-cell-padding-x: 1rem; 166 $table-cell-padding-y-sm: .3rem; 167 $table-cell-padding-x-sm: .3rem; 168 $table-group-separator-color: $gray-300; 169 170 // Dropdowns 171 $dropdown-padding-y: 0; 172 $dropdown-box-shadow: 0 1px 1px rgba($black, .15); 173 $dropdown-link-hover-color: var(--template-text-dark); 174 $dropdown-border-width: 1px; 175 $dropdown-item-padding-y: .5rem; 176 $dropdown-item-padding-x: .75rem; 177 $dropdown-spacer: 0; 178 179 // Cards 180 $card-border-width: 0; 181 $card-border-color: transparent; 182 183 // Alerts 184 $state-success-text: $success; 185 $state-success-bg: lighten($success, 58%); 186 $state-success-border: hsl(var(--hue),50%,93%); 187 188 $state-info-text: var(--template-bg-dark-70); 189 $state-info-bg: var(--white); 190 $state-info-border: var(--template-bg-dark-70); 191 192 $state-warning-text: darken($warning, 24%); 193 $state-warning-bg: lighten($warning, 44%); 194 $state-warning-border: $warning; 195 196 $state-danger-text: $danger; 197 $state-danger-bg: lighten($danger, 52%); 198 $state-danger-border: $danger; 199 200 $state-error-text: $danger; 201 $state-error-bg: lighten($danger, 52%); 202 $state-error-border: $danger; 203 204 // Badges 205 $badge-padding-x: .2rem; 206 $badge-padding-y: .3rem; 207 $badge-border-radius: .2rem; 208 209 $success-bg: $green; 210 $success-txt: $white; 211 212 $warning-bg: #f9d71c; 213 $warning-txt: #000; 214 215 $danger-bg: #900; 216 $danger-txt: #fff; 217 218 $info-bg: $gray-300; 219 $info-txt: $white; 220 221 // Input Group 222 $input-group-addon-color: var(--white); 223 $input-group-addon-bg: $base-color; 224 $input-group-addon-border-color: var(--template-bg-dark); 225 226 // Treeselect 227 $treeselect-line-height: 2.2rem; 228 $treeselect-indent: 40px; 229 230 // List 231 $list-group-bg: var(--white-offset); 232 $list-group-border-color: hsl(var(--hue),40%,85%); 233 $list-group-item-padding-y: .75rem; 234 235 // Buttons 236 $input-btn-padding-y-sm-submenu: 0; 237 $input-btn-padding-x-sm-submenu: 1.625rem; 238 $input-btn-submenu-icon-distance: 1rem; 239 240 // Custom form 241 $form-select-indicator-padding: 3rem; 242 $form-select-bg: var(--template-bg-light); 243 $form-select-bg-size: 116rem; 244 $form-select-indicator: url("../images/select-bg.svg"); 245 $form-select-indicator-rtl: url("../images/select-bg-rtl.svg"); 246 $form-select-indicator-active: url("../../../images/select-bg.svg"); 247 $form-select-indicator-active-rtl: url("../../../images/select-bg-rtl.svg"); 248 $form-select-background: $form-select-indicator no-repeat right center / $form-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon) 249 $form-select-background-rtl: $form-select-indicator-rtl no-repeat left center / $form-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon) 250 $form-select-box-shadow: $atum-box-shadow; 251 $form-select-bg-size-sm: 75rem; 252 $form-select-multiple-padding-y: .3rem; 253 $form-file-button-color: var(--white); 254 255 //input 256 $input-padding: .5rem 1rem; 257 $input-border: solid 1px var(--template-bg-dark-20); 258 259 // Modals 260 $modal-header-height: 2.875rem; 261 262 // Quickicons 263 $quickicon-bg: var(--white); 264 $quickicon-box-shadow-success: 0 0 3px 0 var(--success); 265 $quickicon-box-shadow-danger: 0 0 3px 0 var(--danger); 266 $quickicon-box-shadow-warning: 0 0 3px 0 var(--warning); 267 $quickicon-icon-size: 2rem; 268 $quickicon-icon-size-sm: 1.3rem; 269 270 // Gutter 271 $grid-gutter-width: 2rem; 272 $grid-gutter-width-s: 15px; 273 274 // Breadcrumbs 275 $breadcrumb-bg: var(--white); 276 277 // Links 278 $link-color: var(--template-link-color); 279 $link-hover-color: var(--template-link-hover-color); 280 $link-decoration: none; 281 282 // Z-Index list 283 $zindex-negative: -1; 284 $zindex-actions: auto; 285 $zindex-toolbar: 1000; 286 $zindex-sidebar: 1010; 287 $zindex-header: 1020; 288 $zindex-alerts: 1030; 289 $zindex-modal-backdrop: 1040; 290 $zindex-modal: 1050; 291 $zindex-popover: 1060; 292 $zindex-tooltip: 1070; 293 $zindex-mobile-bottom: 8000; 294 $zindex-mobile-toggle: 9999; 295 $zindex-mobile-menu: 9000;
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Wed Sep 7 05:41:13 2022 | Chilli.vc Blog - For Webmaster,Blog-Writer,System Admin and Domainer |