Skip to content
Snippets Groups Projects
Select Git revision
  • 15eb89b4e2835f99695ed02fbd0a2a3c68a3eee6
  • master default protected
  • 1.31
  • 4.35.0
  • 4.34.1
  • 4.34.0
  • 4.33.1
  • 4.33.0
  • 4.32.2
  • 4.32.1
  • 4.32.0
  • 4.31.0
  • 4.30.1
  • 4.30.0
  • 4.29.1
  • 4.29.0
  • 4.28.0
  • 4.27.0
  • 4.26.0
  • 4.25.5
  • 4.25.4
  • 4.25.3
  • 4.25.2
23 results

property.pcss

Blame
    • property.pcss 13.72 KiB 
    @define-mixin defaultPoperProperty {
    --monster-popper-witharrrow-distance: -4px;
}

@define-mixin defaultTextProperty {
    --monster-text-shadow: none;
}

@define-mixin defaultBoxProperty {
    --monster-box-shadow-1: 12px 12px 2px 1px var(--monster-color-gray-6);
}

@define-mixin defaultSpaceProperty {
    --monster-space-0: 0;
    --monster-space-1: 2px;
    --monster-space-2: 4px;
    --monster-space-3: 6px;
    --monster-space-4: 10px;
    --monster-space-5: 16px;
    --monster-space-6: 26px;
    --monster-space-7: 42px;
}

@define-mixin defaultBreakPointProperty {
    --monster-breakpoint-0: 480px;
    --monster-breakpoint-4: 480px;
    --monster-breakpoint-7: 768px;
    --monster-breakpoint-9: 992px;
    --monster-breakpoint-12: 1200px;
}

@define-mixin defaultZIndexProperty {
    --monster-z-index-default: 0;
    --monster-z-index-outline: 10;
    --monster-z-index-dropdown: 200;
    --monster-z-index-dropdown-overlay: 210;
    --monster-z-index-sticky: 300;
    --monster-z-index-sticky-overlay: 310;
    --monster-z-index-fixed: 400;
    --monster-z-index-fixed-overlay: 410;
    --monster-z-index-modal-backdrop: 500;
    --monster-z-index-modal-backdrop-overlay: 510;
    --monster-z-index-offcanvas: 600;
    --monster-z-index-offcanvas-overlay: 610;
    --monster-z-index-modal: 700;
    --monster-z-index-modal-overlay: 710;
    --monster-z-index-popover: 800;
    --monster-z-index-popover-overlay: 810;
    --monster-z-index-tooltip: 800;
    --monster-z-index-tooltip-overlay: 910;
}

@define-mixin defaultShadowProperty {
    --monster-box-shadow-1: none;
    --monster-box-shadow-2: -1px 1px 10px 1px rgba(194, 194, 194, 0.61);
}

@define-mixin defaultBorderProperty {
    --monster-border-style: solid;
    --monster-border-width: 3px;
    --monster-border-radius: 0;
}

@define-mixin defaultFontProperty {
    --monster-font-family: -apple-system,
    BlinkMacSystemFont,
    "Quicksand",
    "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}


@define-mixin defaultDragAndDropProperty {
    --monster-dragger-width: 2px;    
    --monster-dragger-handle-width: 4px;
    --monster-dragger-handle-height: 50px;
}

@define-mixin defaultColorProperty {

    /** PRIMARY */
    --monster-color-primary-1: var(--monster-color-gray-6);
    --monster-color-primary-2: var(--monster-color-gray-6);
    --monster-color-primary-3: var(--monster-color-cinnamon-1);
    --monster-color-primary-4: var(--monster-color-cinnamon-1);

    --monster-bg-color-primary-1: var(--monster-color-gray-1);
    --monster-bg-color-primary-2: var(--monster-color-gray-2);
    --monster-bg-color-primary-3: var(--monster-color-gray-6);
    --monster-bg-color-primary-4: var(--monster-color-gray-4);

    @media (prefers-color-scheme: dark) {
        --monster-color-primary-1: var(--monster-color-gray-1);
        --monster-color-primary-2: var(--monster-color-gray-1);
        --monster-color-primary-3: var(--monster-color-gray-6);
        --monster-color-primary-4: var(--monster-color-gray-6);

        --monster-bg-color-primary-1: var(--monster-color-gray-6);
        --monster-bg-color-primary-2: var(--monster-color-gray-3);
        --monster-bg-color-primary-3: var(--monster-color-gray-2);
        --monster-bg-color-primary-4: var(--monster-color-gray-1);
    }

    /** SECONDARY */
    --monster-color-secondary-1: var(--monster-color-red-4);
    --monster-color-secondary-2: var(--monster-color-red-4);
    --monster-color-secondary-3: var(--monster-color-red-1);
    --monster-color-secondary-4: var(--monster-color-red-1);

    --monster-bg-color-secondary-1: var(--monster-color-gray-1);
    --monster-bg-color-secondary-2: var(--monster-color-red-2);
    --monster-bg-color-secondary-3: var(--monster-color-red-3);
    --monster-bg-color-secondary-4: var(--monster-color-red-6);

    @media (prefers-color-scheme: dark) {
        --monster-color-secondary-1: var(--monster-color-red-1);
        --monster-color-secondary-2: var(--monster-color-red-1);
        --monster-color-secondary-3: var(--monster-color-red-6);
        --monster-color-secondary-4: var(--monster-color-red-4);

        --monster-bg-color-secondary-1: var(--monster-color-gray-6);
        --monster-bg-color-secondary-2: var(--monster-color-red-3);
        --monster-bg-color-secondary-3: var(--monster-color-red-2);
        --monster-bg-color-secondary-4: var(--monster-color-red-1);
    }

    /** TERTIARY */
    --monster-color-tertiary-1: var(--monster-color-magenta-4);
    --monster-color-tertiary-2: var(--monster-color-magenta-4);
    --monster-color-tertiary-3: var(--monster-color-magenta-6);
    --monster-color-tertiary-4: var(--monster-color-magenta-1);

    --monster-bg-color-tertiary-1: var(--monster-color-gray-1);
    --monster-bg-color-tertiary-2: var(--monster-color-magenta-1);
    --monster-bg-color-tertiary-3: var(--monster-color-magenta-2);
    --monster-bg-color-tertiary-4: var(--monster-color-magenta-6);

    @media (prefers-color-scheme: dark) {
            --monster-color-tertiary-1: var(--monster-color-magenta-1);
        --monster-color-tertiary-2: var(--monster-color-magenta-6);
        --monster-color-tertiary-3: var(--monster-color-magenta-4);
        --monster-color-tertiary-4: var(--monster-color-magenta-4);

        --monster-bg-color-tertiary-1: var(--monster-color-gray-6);
        --monster-bg-color-tertiary-2: var(--monster-color-magenta-2);
        --monster-bg-color-tertiary-3: var(--monster-color-magenta-1);
        --monster-bg-color-tertiary-4: var(--monster-color-magenta-1);
    }

    /** DESTRUCTIVE **/
    --monster-color-destructive-1: var(--monster-color-red-1);
    --monster-color-destructive-2: var(--monster-color-red-4);
    --monster-color-destructive-3: var(--monster-color-red-6);
    --monster-color-destructive-4: var(--monster-color-red-1);

    --monster-bg-color-destructive-1: var(--monster-color-red-4);
    --monster-bg-color-destructive-2: var(--monster-color-gray-1);
    --monster-bg-color-destructive-3: var(--monster-color-red-2);
    --monster-bg-color-destructive-4: var(--monster-color-red-5);

    @media (prefers-color-scheme: dark) {
        --monster-color-destructive-1: var(--monster-color-red-1);
        --monster-color-destructive-2: var(--monster-color-red-3);
        --monster-color-destructive-3: var(--monster-color-red-4);
        --monster-color-destructive-4: var(--monster-color-red-1);

        --monster-bg-color-destructive-1: var(--monster-color-red-5);
        --monster-bg-color-destructive-2: var(--monster-color-gray-6);
        --monster-bg-color-destructive-3: var(--monster-color-red-1);
        --monster-bg-color-destructive-4: var(--monster-color-red-4);
    }

    /** SUCCESS **/
    --monster-color-success-1: var(--monster-color-green-1);
    --monster-color-success-2: var(--monster-color-green-4);
    --monster-color-success-3: var(--monster-color-green-6);
    --monster-color-success-4: var(--monster-color-green-1);

    --monster-bg-color-success-1: var(--monster-color-green-3);
    --monster-bg-color-success-2: var(--monster-color-gray-1);
    --monster-bg-color-success-3: var(--monster-color-green-2);
    --monster-bg-color-success-4: var(--monster-color-green-5);

    @media (prefers-color-scheme: dark) {

        --monster-color-success-1: var(--monster-color-green-1);
        --monster-color-success-2: var(--monster-color-green-2);
        --monster-color-success-3: var(--monster-color-green-4);
        --monster-color-success-4: var(--monster-color-green-1);

        --monster-bg-color-success-1: var(--monster-color-green-5);
        --monster-bg-color-success-2: var(--monster-color-gray-6);
        --monster-bg-color-success-3: var(--monster-color-green-1);
        --monster-bg-color-success-4: var(--monster-color-green-3);
    }

    /** WARNING **/
    --monster-color-warning-1: var(--monster-color-orange-1);
    --monster-color-warning-2: var(--monster-color-orange-4);
    --monster-color-warning-3: var(--monster-color-orange-6);
    --monster-color-warning-4: var(--monster-color-orange-1);

    --monster-bg-color-warning-1: var(--monster-color-orange-3);
    --monster-bg-color-warning-2: var(--monster-color-gray-1);
    --monster-bg-color-warning-3: var(--monster-color-orange-2);
    --monster-bg-color-warning-4: var(--monster-color-orange-5);

    @media (prefers-color-scheme: dark) {
            --monster-color-warning-1: var(--monster-color-orange-1);
        --monster-color-warning-2: var(--monster-color-orange-3);
        --monster-color-warning-3: var(--monster-color-orange-4);
        --monster-color-warning-4: var(--monster-color-orange-1);

        --monster-bg-color-warning-1: var(--monster-color-orange-5);
        --monster-bg-color-warning-2: var(--monster-color-gray-6);
        --monster-bg-color-warning-3: var(--monster-color-orange-1);
        --monster-bg-color-warning-4: var(--monster-color-orange-3);
    }

    /** error **/
    --monster-color-error-1: var(--monster-color-red-1);
    --monster-color-error-2: var(--monster-color-red-4);
    --monster-color-error-3: var(--monster-color-red-6);
    --monster-color-error-4: var(--monster-color-red-1);

    --monster-bg-color-error-1: var(--monster-color-red-4);
    --monster-bg-color-error-2: var(--monster-color-gray-1);
    --monster-bg-color-error-3: var(--monster-color-red-2);
    --monster-bg-color-error-4: var(--monster-color-red-5);

    @media (prefers-color-scheme: dark) {
        --monster-color-error-1: var(--monster-color-red-1);
        --monster-color-error-2: var(--monster-color-red-3);
        --monster-color-error-3: var(--monster-color-red-4);
        --monster-color-error-4: var(--monster-color-red-1);

        --monster-bg-color-error-1: var(--monster-color-red-5);
        --monster-bg-color-error-2: var(--monster-color-gray-6);
        --monster-bg-color-error-3: var(--monster-color-red-1);
        --monster-bg-color-error-4: var(--monster-color-red-4);
    }

    /** selection **/
    --monster-color-selection-1: var(--monster-color-gray-6);
    --monster-color-selection-2: var(--monster-color-gray-6);
    --monster-color-selection-3: var(--monster-color-gray-6);
    --monster-color-selection-4: var(--monster-color-gray-1);

    --monster-bg-color-selection-1: var(--monster-color-yellow-2);
    --monster-bg-color-selection-2: var(--monster-color-yellow-1);
    --monster-bg-color-selection-3: var(--monster-color-yellow-2);
    --monster-bg-color-selection-4: var(--monster-color-yellow-6);

    @media (prefers-color-scheme: dark) {
        --monster-color-selection-1: var(--monster-color-gray-6);
        --monster-color-selection-2: var(--monster-color-gray-6);
        --monster-color-selection-3: var(--monster-color-gray-6);
        --monster-color-selection-4: var(--monster-color-gray-1);

        --monster-bg-color-selection-1: var(--monster-color-yellow-2);
        --monster-bg-color-selection-2: var(--monster-color-yellow-1);
        --monster-bg-color-selection-3: var(--monster-color-yellow-2);
        --monster-bg-color-selection-4: var(--monster-color-yellow-6);
    }


    /** PRIMARY / DISABLED */
    --monster-color-primary-disabled-1: var(--monster-color-gray-4);
    --monster-color-primary-disabled-2: var(--monster-color-gray-4);
    --monster-color-primary-disabled-3: var(--monster-color-gray-4);
    --monster-color-primary-disabled-4: var(--monster-color-gray-4);

    --monster-bg-color-primary-disabled-1: var(--monster-color-gray-1);
    --monster-bg-color-primary-disabled-2: var(--monster-color-gray-2);
    --monster-bg-color-primary-disabled-3: var(--monster-color-gray-3);
    --monster-bg-color-primary-disabled-4: var(--monster-color-gray-6);

    @media (prefers-color-scheme: dark) {
            --monster-color-primary-disabled-1: var(--monster-color-gray-4);
        --monster-color-primary-disabled-2: var(--monster-color-gray-4);
        --monster-color-primary-disabled-3: var(--monster-color-gray-3);
        --monster-color-primary-disabled-4: var(--monster-color-gray-3);

        --monster-bg-color-primary-disabled-1: var(--monster-color-gray-6);
        --monster-bg-color-primary-disabled-2: var(--monster-color-gray-3);
        --monster-bg-color-primary-disabled-3: var(--monster-color-gray-2);
        --monster-bg-color-primary-disabled-4: var(--monster-color-gray-1);
    }
    
    --monster-color-gradient-1: #833ab4;
    --monster-color-gradient-2: #fd1d1d;
    --monster-color-gradient-3: #fcb045;

}

@define-mixin defaultOnOfProperty {
    
    --monster-theme-on-color: var(--monster-color-green-1);
    --monster-theme-on-bg-color: var(--monster-color-green-5);

    --monster-theme-off-color: var(--monster-color-gray-1);
    --monster-theme-off-bg-color: var(--monster-color-gray-4);
    
    
    @media (prefers-color-scheme: dark) {
        --monster-theme-on-color: var(--monster-color-gray-6);
        --monster-theme-on-bg-color: var(--monster-color-gray-1);

        --monster-theme-off-color: var(--monster-color-gray-1);
        --monster-theme-off-bg-color: var(--monster-color-gray-5);
    }
}

@define-mixin defaultControlProperty {

    --monster-theme-control-bg-color: var(--monster-gradient-tangerine-1);
    --monster-theme-control-color: var(--monster-gradient-tangerine-6);
    --monster-theme-control-border-color: var(--monster-gradient-tangerine-2);
    --monster-theme-control-hover-color: var(--monster-gradient-tangerine-6);
    --monster-theme-control-hover-bg-color: var(--monster-gradient-tangerine-2);

    @media (prefers-color-scheme: dark) {
        --monster-theme-control-bg-color: var(--monster-color-gray-5);
        --monster-theme-control-color: var(--monster-color-gray-1);
        --monster-theme-control-border-color: var(--monster-color-gray-3);
        --monster-theme-control-hover-color: var(--monster-color-gray-1);
        --monster-theme-control-hover-bg-color: var(--monster-color-gray-6);
    }
    
}