squidex/frontend/src/app/theme/_vars.scss at c52e9fa157cfa3cad586c602895940e5eb95d7f5 · sinadarbouy/squidex · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/* stylelint-disable */
@use 'sass:color';

$color-background:          #f5f6f9;

$color-border:              #dedfe3;
$color-border-light:        #f5f6f9;
$color-border-lighter:      color.adjust($color-border-light, $lightness: 1%);
$color-border-dark:         #e7e8ea;
$color-border-darker:       color.adjust($color-border, $lightness: -15%);

$color-title:               #000;
$color-text:                #373a3c;
$color-text-decent:         #41444C;
$color-tooltip:             #1a2129;

$color-code-background:     #f5f7f9;
$color-code-text:           #708090;

$color-extern-github:       #353535;
$color-extern-google:       #d34836;
$color-extern-microsoft:    #004185;
$color-extern-twitter:      #1da1f2;
$color-extern-oidc:         #526484;

$color-theme-brand:         #3389ff;
$color-theme-brand-dark:    #3284f4;
$color-theme-brand-darker:  #2f7deb;
$color-theme-brand-light:   #d9e8fc;
$color-theme-secondary:     #e0e1e5;

$color-theme-error:         #eb3142;
$color-theme-error-dark:    #c00;
$color-theme-info:          #0eafcc;
$color-theme-success-dark:  #38a678;
$color-theme-success:       #3ab480;
$color-theme-warning-dark:  #a65b00;
$color-theme-warning:       #ffb136;

$color-black:   #000;
$color-white:   #fff;

$color-input:               #e0e1e5;
$color-input-background:    #fff;
$color-input-disabled:      #eff1f4;
$color-input-placeholder:   color.adjust($color-text-decent, $lightness: 20%);
$color-input-shortcut:      rgba(255, 255, 255, .2);

$color-badge-success-background:    #e4f6e6;
$color-badge-success-foreground:    #42a54c;

$color-badge-warning-background:    #ffe8cc;
$color-badge-warning-foreground:    #d18c3e;

$color-badge-danger-background:     #fce0e3;
$color-badge-danger-foreground:     #e56471;

$color-badge-info-background:       #d0f2fb;
$color-badge-info-foreground:       #3bb1cc;

$color-badge-primary-background:    #cce1ff;
$color-badge-primary-foreground:    #4186e0;

$color-badge-secondary-background:  #e6e6e6;
$color-badge-secondary-foreground:  #555;

$body-secondary-color:      $color-text-decent;

$border-radius:             .25rem;

$input-shadow:              inset 0 1px 2px rgb(0 0 0 / 8%);

$size-navbar-height:        3.75rem;
$size-sidebar-width:        5rem;

$card-bg:                   $color-white;

$table-bg:                  $color-white;

$color-dark-onboarding:   #273039;

$panel-padding:             1.5rem;
$panel-header:              5.4rem;
$panel-sidebar:             3.75rem;

$font-small:                85%;
$font-smallest:             80%;

$headings-line-height:      1.3;

$btn-disabled-color:        inherit;
$btn-disabled-bg:           inherit;
$btn-disabled-border-color: inherit;

$dropdown-bg:               $color-white;

$modal-content-bg:          $color-white;

$history-dot-size:          10px;
$history-dot-offset-x:      -($history-dot-size * .5 + 1px);
$history-dot-sm-size:       6px;
$history-dot-sm-offset-x:   -($history-dot-sm-size * .5 + 1px);

$asset-width:               14.5rem;
$asset-folder-height:       4rem;
$asset-header:              12rem;
$asset-image:               12rem;
$asset-footer:              7rem;
$asset-background:          url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAIAAAC1nk4lAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAACbSURBVGhD7c6hDQAxAMPA33+m7vYlJh7AoFKOBMbfyfyZRRsPgUUbD4FFGw+BRRsPgUUbD4FFGw+BRRsPgUUbD4FFGw+BRRsPgUUbD4FFGw+BRRsPgUUbD4E3o9kA7YFFGw+BRRsPgUUbD4FFGw+BRRsPgUUbD4FFGw+BRRsPgUUbD4FFGw+BRRsPgUUbD4FFGw+BRRsPgQejz7nPYYKl8IqSfgAAAABJRU5ErkJggg==');

$gutter-y: 0;

$nf-color-border:           $color-border;
$nf-color-add-background:   $color-theme-success;
$nf-color-primary:          $color-theme-brand;
$nf-color-text:             $color-text;
$nf-color-text-muted:       $color-text-decent;