Packages

design_styles_hex

1.0.2
1.0.9 1.0.8 1.0.7 1.0.6 1.0.5 1.0.4 1.0.3 1.0.2 1.0.1 1.0.0

Custom styles

HexDocs

Current section

Files

Jump to
Readme
10 Versions
0 Dependencies
Dependants
Files
Activity
design_styles_hex src TF index.css
Raw

src/TF/index.css 

/**

 * Do not edit directly

 * Generated on Fri, 15 Mar 2024 02:59:57 GMT

 */

:root {

  --color-white: #ffffff;

  --color-black: #000000;

  --color-neutral-50: #fafafa;

  --color-neutral-100: #f5f5f5;

  --color-neutral-200: #e3e3e3;

  --color-neutral-300: #cecece;

  --color-neutral-400: #b7b7b7;

  --color-neutral-500: #9c9c9c;

  --color-neutral-600: #656565;

  --color-neutral-700: #505050;

  --color-neutral-800: #404040;

  --color-neutral-900: #1f1f1f;

  --color-blue-50: #f1f9ff;

  --color-blue-100: #b8dcff;

  --color-blue-200: #86c7ff;

  --color-blue-300: #48b1ff;

  --color-blue-400: #00a3ff;

  --color-blue-500: #008dff;

  --color-blue-600: #006aff;

  --color-blue-700: #0054cc;

  --color-blue-800: #004099;

  --color-blue-900: #002b66;

  --color-green-50: #f1f8f1;

  --color-green-100: #c2e4bc;

  --color-green-200: #9ad291;

  --color-green-300: #6fc263;

  --color-green-400: #4cb53f;

  --color-green-500: #21a80f;

  --color-green-600: #149901;

  --color-green-700: #008700;

  --color-green-800: #007700;

  --color-green-900: #005900;

  --color-orange-50: #fffef0;

  --color-orange-100: #fadfcc;

  --color-orange-200: #f5c099;

  --color-orange-300: #f0a066;

  --color-orange-400: #eb8133;

  --color-orange-500: #e66100;

  --color-orange-600: #b84e00;

  --color-orange-700: #8a3a00;

  --color-orange-800: #5c2700;

  --color-orange-900: #2e1300;

  --color-red-50: #fef1f1;

  --color-red-100: #ffcecc;

  --color-red-200: #ff9e9a;

  --color-red-300: #ff6d67;

  --color-red-400: #ff3d35;

  --color-red-500: #ff0c02;

  --color-red-600: #d0021b;

  --color-red-700: #990701;

  --color-red-800: #660501;

  --color-red-900: #330200;

  --zindex-positioned: 10;

  --zindex-sticky: 20;

  --zindex-fixed: 30;

  --zindex-menu: 40;

  --zindex-backdrop: 50;

  --zindex-modal: 60;

  --zindex-tooltip: 70;

  --spacing-0: 0rem;

  --spacing-1: 0.25rem;

  --spacing-2: 0.5rem;

  --spacing-3: 0.75rem;

  --spacing-4: 1rem;

  --spacing-5: 1.25rem;

  --spacing-6: 1.5rem;

  --spacing-7: 1.75rem;

  --spacing-8: 2rem;

  --spacing-10: 2.5rem;

  --spacing-12: 3rem;

  --spacing-16: 4rem;

  --spacing-20: 5rem;

  --spacing-24: 6rem;

}



.button-full-width {

  width: 100%;

}



.button-fixed-width {

  padding-right: var(--spacing-5);

  padding-left: var(--spacing-5);

}



.button-primary {

  background-color: var(--color-black);

  color: var(--color-white);

  padding-top: var(--spacing-3);

  padding-bottom: var(--spacing-3);

  border: 1px solid var(--color-black);

}

.button-primary:hover {

  background-color: var(--color-neutral-600);

  border-color: var(--color-neutral-600);

}



.button-secondary {

  background-color: transparent;

  color: var(--color-neutral-800);

  padding-top: var(--spacing-3);

  padding-bottom: var(--spacing-3);

  border: 1px solid var(--color-black);

}

.button-secondary:hover {

  background-color: transparent;

  border-color: var(--color-neutral-400);

}



.button-primary--disabled {

  background-color: var(--color-neutral-200);

  color: var(--color-black);

  padding-top: var(--spacing-3);

  padding-bottom: var(--spacing-3);

  border: 1px solid var(--color-neutral-400);

}



.button-secondary--disabled {

  background-color: var(--color-neutral-200);

  color: var(--color-black);

  padding-top: var(--spacing-3);

  padding-bottom: var(--spacing-3);

  border: 1px solid var(--color-neutral-400);

}



.button-primary-inverse {

  background-color: var(--color-white);

  color: var(--color-white);

  padding-top: var(--spacing-3);

  padding-bottom: var(--spacing-3);

  border: 1px solid var(--color-white);

  color: var(--color-black);

}

.button-primary-inverse:hover {

  color: var(--color-neutral-800);

  background-color: var(--color-black);

  border-color: var(--color-neutral-600);

}



.button-primary-inverse--disabled {

  background-color: var(--color-neutral-800);

  color: var(--color-white);

  padding-top: var(--spacing-3);

  padding-bottom: var(--spacing-3);

  border: 1px solid var(--color-neutral-600);

  color: var(--color-neutral-800);

}



.button-secondary-inverse {

  background-color: transparent;

  color: var(--color-white);

  padding-top: var(--spacing-3);

  padding-bottom: var(--spacing-3);

  border: 1px solid var(--color-white);

  color: var(--color-white);

}

.button-secondary-inverse:hover {

  background-color: rgba(64, 64, 64, 0.5);

  border-color: var(--color-white);

}



.button-secondary-inverse--disabled {

  background-color: var(--color-neutral-800);

  color: var(--color-white);

  padding-top: var(--spacing-3);

  padding-bottom: var(--spacing-3);

  border: 1px solid var(--color-neutral-600);

  color: var(--color-neutral-800);

}



/*# sourceMappingURL=button.module.css.map */





/*# sourceMappingURL=colors.module.css.map */

/**

 * Do not edit directly

 * Generated on Fri, 15 Mar 2024 02:59:57 GMT

 */

:root {

  --color-white: #ffffff;

  --color-black: #000000;

  --color-neutral-50: #fafafa;

  --color-neutral-100: #f5f5f5;

  --color-neutral-200: #e3e3e3;

  --color-neutral-300: #cecece;

  --color-neutral-400: #b7b7b7;

  --color-neutral-500: #9c9c9c;

  --color-neutral-600: #656565;

  --color-neutral-700: #505050;

  --color-neutral-800: #404040;

  --color-neutral-900: #1f1f1f;

  --color-blue-50: #f1f9ff;

  --color-blue-100: #b8dcff;

  --color-blue-200: #86c7ff;

  --color-blue-300: #48b1ff;

  --color-blue-400: #00a3ff;

  --color-blue-500: #008dff;

  --color-blue-600: #006aff;

  --color-blue-700: #0054cc;

  --color-blue-800: #004099;

  --color-blue-900: #002b66;

  --color-green-50: #f1f8f1;

  --color-green-100: #c2e4bc;

  --color-green-200: #9ad291;

  --color-green-300: #6fc263;

  --color-green-400: #4cb53f;

  --color-green-500: #21a80f;

  --color-green-600: #149901;

  --color-green-700: #008700;

  --color-green-800: #007700;

  --color-green-900: #005900;

  --color-orange-50: #fffef0;

  --color-orange-100: #fadfcc;

  --color-orange-200: #f5c099;

  --color-orange-300: #f0a066;

  --color-orange-400: #eb8133;

  --color-orange-500: #e66100;

  --color-orange-600: #b84e00;

  --color-orange-700: #8a3a00;

  --color-orange-800: #5c2700;

  --color-orange-900: #2e1300;

  --color-red-50: #fef1f1;

  --color-red-100: #ffcecc;

  --color-red-200: #ff9e9a;

  --color-red-300: #ff6d67;

  --color-red-400: #ff3d35;

  --color-red-500: #ff0c02;

  --color-red-600: #d0021b;

  --color-red-700: #990701;

  --color-red-800: #660501;

  --color-red-900: #330200;

  --zindex-positioned: 10;

  --zindex-sticky: 20;

  --zindex-fixed: 30;

  --zindex-menu: 40;

  --zindex-backdrop: 50;

  --zindex-modal: 60;

  --zindex-tooltip: 70;

  --spacing-0: 0rem;

  --spacing-1: 0.25rem;

  --spacing-2: 0.5rem;

  --spacing-3: 0.75rem;

  --spacing-4: 1rem;

  --spacing-5: 1.25rem;

  --spacing-6: 1.5rem;

  --spacing-7: 1.75rem;

  --spacing-8: 2rem;

  --spacing-10: 2.5rem;

  --spacing-12: 3rem;

  --spacing-16: 4rem;

  --spacing-20: 5rem;

  --spacing-24: 6rem;

}



/*# sourceMappingURL=variables.module.css.map */