Skip to content

How to use css variables


Global css variables we set in style.css :root.

css
:root{
    --ca-gray-1: rgb(243 244 246);
    --ca-gray-2: rgb(229 231 235);
    --ca-gray-3: rgb(209 213 219);
    --ca-gray-4: rgb(156 163 175);
    --ca-gray-5: rgb(107 114 128);
    --ca-gray-6: rgb(75 85 99);
    --ca-gray-7: rgb(55 65 81);
    --ca-gray-8: rgb(31 41 55);
    --ca-gray-9: rgb(17 24 39);

    --ca-stone-1: rgb(245 245 244);
    --ca-stone-2: rgb(231 229 228);
    --ca-stone-3: rgb(214 211 209);
    --ca-stone-4: rgb(168 162 158);
    --ca-stone-5: rgb(120 113 108);
    --ca-stone-6: rgb(87 83 78);
    --ca-stone-7: rgb(68 64 60);
    --ca-stone-8: rgb(41 37 36);
    --ca-stone-9: rgb(28 25 23);
    /** santander */
    --cc-santander-body-input-background: #FFF;
    --cc-santander-body-background: #f8fafc;
    --cc-santander_header-background: var(--ca-stone-7);
    --cc-santander_header-color: #fff;
    --cc-santander_footer-button-background: var(--ca-stone-7);
    --cc-santander_footer-button-border-color: var(--ca-stone-7);
    --cc-santander_footer-button-color: #fff;
    /**
     * Carads default colors
     */
    --ca-car-intro-thumbnail-last: rgba(0, 0, 0, 0.5);
    --ca-back-to-list-text-color: var(--ca-gray-4);
    --ca-back-to-list-sticky-text-color: var(--ca-gray-4);
    --ca-aspect-ratio-list: 6/4;
    --ca-table-odd-bg: rgb(248 250 252);
    --ca-table-even-bg: rgb(226 232 240);
}
* (Alle kan ændres - dog syns i skal droppe at overskrive "--ca-gray-*" og "--ca-stone-*" med mindre det virklig er den eneste mulighed for at få noget til at virke.