Description:

Core package used by the SDK Library.

INSTALLATION:

Using NPM:

npm install --save sdk-core-library

CONFIGURATION:

In your main scss/css (e.g., styles.scss) file, add the following line to the top of your file:

@import './node_modules/sdk-core-library/styles/sdk-styles';

USAGE:

To override colors or icons, in your main css/scss file, add them to your root section.

:root {
    .sdk-icon {
        color: red;

        &:hover {
            color: green;
        }
    }

    * {
        --sdk-background: rgb(111, 27, 27);

    }
}

LIST OF STYLE CLASSES:

Colors:

--sdk-background: rgb(255, 255, 255);
--sdk-font: rgb(75, 75, 75);

--sdk-border: rgb(225, 225, 225);
--sdk-border-dark: rgb(200, 200, 200);
--sdk-border-blue: rgb(0, 102, 178);

--sdk-button: rgb(0, 102, 178);
--sdk-button-delete: rgb(226, 24, 54);
--sdk-button-cancel: rgb(150, 150, 150);

--sdk-black: rgb(45, 45, 45);
--sdk-white: rgb(255, 255, 255);
--sdk-gray: rgb(150, 150, 150);
--sdk-blue: rgb(0, 102, 178);
--sdk-red: rgb(226, 24, 54);
--sdk-green: rgb(0, 178, 39);
--sdk-yellow: rgb(212, 195, 3);
--sdk-orange: rgb(216, 134, 12);

--sdk-light-white: rgb(245, 245, 245);
--sdk-dark-white: rgb(200, 200, 200);

--sdk-light-gray: rgb(225, 225, 225);
--sdk-dark-gray: rgb(100, 100, 100);

--sdk-light-blue: rgb(230, 243, 253);
--sdk-dark-blue: rgb(0, 80, 141);

--sdk-light-red: rgb(255, 235, 235);

Icon:

.sdk-icon {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-variation-settings: 'FILL' 0;
    font-weight: normal;
    font-style: normal;
    font-size: 1.5em;
    font-display: swap;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    cursor: pointer;

    &.active {
        color: var(--sdk-blue);
    }
    
    &.disabled {
        color: var(--sdk-light-gray);
        cursor: default;

        &:hover {
            color: var(--sdk-light-gray);
        }
    }

    &.delete {
        color: var(--sdk-red);
    }

    &:hover {
        color: var(--sdk-blue);
    }
}