ffr-components
Version:
Fiori styled UI components
139 lines (137 loc) • 5.15 kB
CSS
html {
--fd-color-action-1: #0a6ed1;
--fd-color-action-2: #ffffff;
--fd-color-action-3: #0854a0;
--fd-color-text-1: #32363a;
--fd-color-text-2: #51555a;
--fd-color-text-3: #6a6d70;
--fd-color-text-4: #74777a;
--fd-color-text-5: #ffffff;
/* add custom css --fd-color-text-6 */
--fd-color-text-6: #3A6AA8;
/* add custom css --fd-color-text-7 */
--fd-color-text-7: #6F7275;
/* add custom css --fd-color-text-8 */
--fd-color-text-8: #0854a0;
/* add custom css --fd-color-text-9 */
--fd-color-text-9: #346187;
/* add custom css --fd-color-text-10 */
--fd-color-text-10: #666666;
/* add custom css --fd-color-text-11 */
--fd-color-text-11: #ff0000;
/* add custom css --fd-color-text-12 */
--fd-color-text-12: #8A919A;
/* add custom css --fd-color-text-13 */
--fd-color-text-13: #0854A1;
/* add custom css --fd-color-text-14 */
--fd-color-text-14: #424242;
/* add custom css --fd-color-text-15 */
--fd-color-text-15: #8A9199;
--fd-color-background-1: #edeff0;
--fd-color-background-2: #ffffff;
--fd-color-background-3: #f1fdf6;
--fd-color-background-4: #fef7f1;
--fd-color-background-5: #ffebeb;
--fd-color-background-6: #f5faff;
--fd-color-background-7: #f4f4f4;
/* add custom css --fd-color-background-8 */
--fd-color-background-8: #ffffff;
/* add custom css --fd-color-background-9 */
--fd-color-background-9: #2C6FCA;
/* add custom css --fd-color-background-10 */
--fd-color-background-10: #EDEFF0;
--fd-color-background-selected: #e5f0fa;
--fd-color-background-12: #f2f2f2;
--fd-color-background-11: #d8e8f7;
/* add custom css --fd-color-background-13 */
--fd-color-background-13: #E6E8E9;
--fd-color-neutral-1: #fafafa;
--fd-color-neutral-2: #eeeeef;
--fd-color-neutral-3: #d9d9d9;
--fd-color-neutral-4: #89919a;
--fd-color-neutral-5: #f7f7f7;
--fd-color-neutral-6: #f2f2f2;
--fd-color-status-1: #0a7e3e;
--fd-color-status-2: #e9730c;
--fd-color-status-3: #bb0000;
--fd-color-status-4: #6a6d70;
--fd-color-status-5: #0a6dd1;
--fd-color-accent-1: #f5a742;
--fd-color-accent-2: #d62929;
--fd-color-accent-3: #db1f77;
--fd-color-accent-4: #c0399f;
--fd-color-accent-5: #6367de;
--fd-color-accent-6: #1973cc;
--fd-color-accent-7: #0cd7ed;
--fd-color-accent-8: #7ca10c;
--fd-color-accent-9: #925ace;
--fd-color-accent-10: #5c819d;
--fd-color-accent-11: #d17f15;
--fd-color-accent-12: #d04343;
--fd-color-accent-13: #2b78c5;
--fd-color-accent-14: #6367de;
--fd-color-accent-15: #984bd2;
/* add custom css --fd-color-accent-16 */
--fd-color-accent-16: #13A4B4;
/* add custom css --fd-color-accent-17 */
--fd-color-accent-17: #107e3e;
--fd-color-shell-1: #354a5f;
--fd-color-shell-2: #d1e8ff;
--fd-color-shell-3: #213b54;
--fd-color-shell-4: #1b3046;
--fd-color-shell-5: #7b9abc;
--fd-color: var(--fd-color-text-1);
--fd-background-color: var(--fd-color-background-1);
--fd-color-background-hover: #fafafa;
--fd-color-background-selected: rgba(10, 110, 209, 0.07);
--fd-color-background-selected-hover: rgba(10, 110, 209, 0.1);
--fd-color-background-information: #f5faff;
--fd-color-background-positive: #f1fdf6;
--fd-color-background-alert: #fef7f1;
--fd-color-background-negative: #ffebeb;
--fd-color-background-default: #f4f4f4;
--fd-color-action: var(--fd-color-action-1);
--fd-color-action-hover: #085caf;
--fd-color-action-focus: #085caf;
--fd-color-action-selected: #0254a7;
--fd-color-action-disabled: rgba(10, 110, 209, 0.4);
--fd-color-action-visited: #3c0ad1;
--fd-color-positive: #0a7e3e;
--fd-color-negative: #bb0000;
--fd-color-alert: #e9730c;
--fd-forms-color--focus: #32363a;
--fd-forms-color--disabled: #6a6d70;
--fd-forms-color--active: #0a6ed1;
--fd-forms-background-color: #ffffff;
--fd-forms-background-color--disabled: #fafafa;
--fd-forms-background-color--check: #ffffff;
--fd-forms-background-color--indeterminate: #0854a0;
--fd-forms-background-color--check-disabled: rgba(10, 110, 209, 0.4);
--fd-forms-border-color: #89919a;
--fd-forms-border-color--check: #0854a0;
--fd-forms-border-color--hover: #0854a0;
--fd-forms-border-color--focus: #0854a0;
--fd-forms-border-color--disabled: #eeeeef;
--fd-border-color: #e5e5e5;
--fd-input-border-color-1: #8A919A;
--fd-input-border-color-2: #ff0000;
--fd-input-border-color-3: #8A9199;
--fd-input-border-color-4: #979797;
--ffr-border-color-1: #000000;
--ffr-border-color-2 :#cccccc;
--ffr-table-border-color: var(--fd-border-color);
--ffr-box-shadow-1:#F6F6F6;
--ffr-border-shadow-1: rgba(255, 255, 255, 0.5);
--ffr-border-shadow-2:rgba(0,0,0,0.1);
/* add custom css --fd-loadMore-border-color */
--fd-loadMore-border-color: var(--fd-border-color);
--fd-loadMore-background-color-hover: #e5e5e5;
--fd-loading-background-gray: rgba(0, 0, 0, 0.2);
--fd-loading-background-white: rgba(250, 250, 250, 0.72);
--fd-hover-background: rgba(8, 84, 160, 0.05);
/*add scrollbar css*/
--fd-scrollBar-color: #fff;
--fd-scrollBar-thumb-color: #b2b2b2;
--fd-scrollBar-thumb-color-hover: #ababab;
--fd-scrollBar-corner-color: #fff;
}