oip-common 0.3.2 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,108 +1,108 @@
1
- @media screen and (min-width: 1960px) {
2
- .layout-main,
3
- .landing-wrapper {
4
- width: 1504px;
5
- margin-left: auto !important;
6
- margin-right: auto !important;
7
- }
8
- }
9
-
10
- @media (min-width: 992px) {
11
- .layout-wrapper {
12
- &.layout-overlay {
13
- .layout-main-container {
14
- margin-left: 0;
15
- }
16
-
17
- .layout-sidebar {
18
- transform: translateX(-100%);
19
- left: 0;
20
- top: 0;
21
- height: 100vh;
22
- z-index: 996;
23
- border-top-left-radius: 0;
24
- border-bottom-left-radius: 0;
25
- border-right: 1px solid var(--surface-border);
26
- transition:
27
- transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
28
- left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
29
- box-shadow:
30
- 0 3px 5px rgba(0, 0, 0, 0.02),
31
- 0 0 2px rgba(0, 0, 0, 0.05),
32
- 0 1px 4px rgba(0, 0, 0, 0.08);
33
- }
34
-
35
- &.layout-overlay-active {
36
- .layout-sidebar {
37
- transform: translateX(0);
38
- }
39
- }
40
- }
41
-
42
- &.layout-static {
43
- .layout-main-container {
44
- margin-left: 21rem;
45
- }
46
-
47
- &.layout-static-inactive {
48
- .layout-sidebar {
49
- transform: translateX(-100%);
50
- left: 0;
51
- }
52
-
53
- .layout-main-container {
54
- margin-left: 0;
55
- padding-left: 1rem;
56
- }
57
- }
58
- }
59
-
60
- .layout-mask {
61
- display: none;
62
- }
63
- }
64
- }
65
-
66
- // tablet
67
- @media (max-width: 991px) {
68
- .blocked-scroll {
69
- overflow: hidden;
70
- }
71
-
72
- .layout-wrapper {
73
- .layout-main-container {
74
- margin-left: 0;
75
- }
76
-
77
- .layout-sidebar {
78
- transform: translateX(-100%);
79
- left: 0;
80
- top: 0;
81
- height: 100vh;
82
- border-top-left-radius: 0;
83
- border-bottom-left-radius: 0;
84
- padding: 4.5rem 1.5rem;
85
- }
86
-
87
- .layout-mask {
88
- display: none;
89
- position: fixed;
90
- top: 0;
91
- left: 0;
92
- z-index: 995;
93
- width: 100%;
94
- height: 100%;
95
- background-color: var(--maskbg);
96
- }
97
-
98
- &.layout-mobile-active {
99
- .layout-sidebar {
100
- transform: translateX(0);
101
- }
102
-
103
- .layout-mask {
104
- display: block;
105
- }
106
- }
107
- }
108
- }
1
+ @media screen and (min-width: 1960px) {
2
+ .layout-main,
3
+ .landing-wrapper {
4
+ width: 1504px;
5
+ margin-left: auto !important;
6
+ margin-right: auto !important;
7
+ }
8
+ }
9
+
10
+ @media (min-width: 992px) {
11
+ .layout-wrapper {
12
+ &.layout-overlay {
13
+ .layout-main-container {
14
+ margin-left: 0;
15
+ }
16
+
17
+ .layout-sidebar {
18
+ transform: translateX(-100%);
19
+ left: 0;
20
+ top: 0;
21
+ height: 100vh;
22
+ z-index: 996;
23
+ border-top-left-radius: 0;
24
+ border-bottom-left-radius: 0;
25
+ border-right: 1px solid var(--surface-border);
26
+ transition:
27
+ transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
28
+ left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
29
+ box-shadow:
30
+ 0 3px 5px rgba(0, 0, 0, 0.02),
31
+ 0 0 2px rgba(0, 0, 0, 0.05),
32
+ 0 1px 4px rgba(0, 0, 0, 0.08);
33
+ }
34
+
35
+ &.layout-overlay-active {
36
+ .layout-sidebar {
37
+ transform: translateX(0);
38
+ }
39
+ }
40
+ }
41
+
42
+ &.layout-static {
43
+ .layout-main-container {
44
+ margin-left: 21rem;
45
+ }
46
+
47
+ &.layout-static-inactive {
48
+ .layout-sidebar {
49
+ transform: translateX(-100%);
50
+ left: 0;
51
+ }
52
+
53
+ .layout-main-container {
54
+ margin-left: 0;
55
+ padding-left: 1rem;
56
+ }
57
+ }
58
+ }
59
+
60
+ .layout-mask {
61
+ display: none;
62
+ }
63
+ }
64
+ }
65
+
66
+ // tablet
67
+ @media (max-width: 991px) {
68
+ .blocked-scroll {
69
+ overflow: hidden;
70
+ }
71
+
72
+ .layout-wrapper {
73
+ .layout-main-container {
74
+ margin-left: 0;
75
+ }
76
+
77
+ .layout-sidebar {
78
+ transform: translateX(-100%);
79
+ left: 0;
80
+ top: 0;
81
+ height: 100vh;
82
+ border-top-left-radius: 0;
83
+ border-bottom-left-radius: 0;
84
+ padding: 4.5rem 1.5rem;
85
+ }
86
+
87
+ .layout-mask {
88
+ display: none;
89
+ position: fixed;
90
+ top: 0;
91
+ left: 0;
92
+ z-index: 995;
93
+ width: 100%;
94
+ height: 100%;
95
+ background-color: var(--maskbg);
96
+ }
97
+
98
+ &.layout-mobile-active {
99
+ .layout-sidebar {
100
+ transform: translateX(0);
101
+ }
102
+
103
+ .layout-mask {
104
+ display: block;
105
+ }
106
+ }
107
+ }
108
+ }
@@ -1,168 +1,168 @@
1
- @use "./mixins" as *;
2
-
3
- .layout-topbar {
4
- position: fixed;
5
- height: 4rem;
6
- z-index: 997;
7
- left: 0;
8
- top: 0;
9
- width: 100%;
10
- padding: 0 1rem;
11
- background-color: var(--surface-card);
12
- transition: left var(--layout-section-transition-duration);
13
- display: flex;
14
- align-items: center;
15
-
16
- .layout-topbar-logo-container {
17
- width: 20rem;
18
- display: flex;
19
- align-items: center;
20
- }
21
-
22
- .layout-topbar-logo {
23
- display: inline-flex;
24
- align-items: center;
25
- font-size: 1.5rem;
26
- border-radius: var(--content-border-radius);
27
- color: var(--text-color);
28
- font-weight: 500;
29
- gap: 0.5rem;
30
-
31
- svg {
32
- width: 3rem;
33
- }
34
-
35
- &:focus-visible {
36
- @include focused();
37
- }
38
- }
39
-
40
- .layout-topbar-action {
41
- display: inline-flex;
42
- justify-content: center;
43
- align-items: center;
44
- border-radius: 50%;
45
- width: 2.5rem;
46
- height: 2.5rem;
47
- color: var(--text-color);
48
- transition: background-color var(--element-transition-duration);
49
- cursor: pointer;
50
-
51
- &:hover {
52
- background-color: var(--surface-hover);
53
- }
54
-
55
- &:focus-visible {
56
- @include focused();
57
- }
58
-
59
- i {
60
- font-size: 1.25rem;
61
- }
62
-
63
- span {
64
- font-size: 1rem;
65
- display: none;
66
- }
67
-
68
- &.layout-topbar-action-highlight {
69
- background-color: var(--primary-color);
70
- color: var(--primary-contrast-color);
71
- }
72
- }
73
-
74
- .layout-menu-button {
75
- margin-right: 0.5rem;
76
- }
77
-
78
- .layout-topbar-menu-button {
79
- display: none;
80
- }
81
-
82
- .layout-topbar-actions {
83
- margin-left: auto;
84
- display: flex;
85
- gap: 1rem;
86
- }
87
-
88
- .layout-topbar-menu-content {
89
- display: flex;
90
- gap: 1rem;
91
- }
92
-
93
- .layout-config-menu {
94
- display: flex;
95
- gap: 1rem;
96
- }
97
- }
98
-
99
- @media (max-width: 991px) {
100
- .layout-topbar {
101
- padding: 0 1rem;
102
-
103
- .layout-topbar-logo-container {
104
- width: auto;
105
- }
106
-
107
- .layout-menu-button {
108
- margin-left: 0;
109
- margin-right: 0.5rem;
110
- }
111
-
112
- .layout-topbar-menu-button {
113
- display: inline-flex;
114
- }
115
-
116
- .layout-topbar-menu {
117
- position: absolute;
118
- background-color: var(--surface-overlay);
119
- transform-origin: top;
120
- box-shadow:
121
- 0px 3px 5px rgba(0, 0, 0, 0.02),
122
- 0px 0px 2px rgba(0, 0, 0, 0.05),
123
- 0px 1px 4px rgba(0, 0, 0, 0.08);
124
- border-radius: var(--content-border-radius);
125
- padding: 1rem;
126
- right: 2rem;
127
- top: 4rem;
128
- min-width: 15rem;
129
- border: 1px solid var(--surface-border);
130
-
131
- .layout-topbar-menu-content {
132
- gap: 0.5rem;
133
- }
134
-
135
- .layout-topbar-action {
136
- display: flex;
137
- width: 100%;
138
- height: auto;
139
- justify-content: flex-start;
140
- border-radius: var(--content-border-radius);
141
- padding: 0.5rem 1rem;
142
-
143
- i {
144
- font-size: 1rem;
145
- margin-right: 0.5rem;
146
- }
147
-
148
- span {
149
- display: block;
150
- }
151
- }
152
- }
153
-
154
- .layout-topbar-tabs {
155
- span {
156
- display: none;
157
- }
158
- }
159
-
160
- .layout-topbar-logo {
161
- display: none;
162
- }
163
-
164
- .layout-topbar-menu-content {
165
- flex-direction: column;
166
- }
167
- }
168
- }
1
+ @use "./mixins" as *;
2
+
3
+ .layout-topbar {
4
+ position: fixed;
5
+ height: 4rem;
6
+ z-index: 997;
7
+ left: 0;
8
+ top: 0;
9
+ width: 100%;
10
+ padding: 0 1rem;
11
+ background-color: var(--surface-card);
12
+ transition: left var(--layout-section-transition-duration);
13
+ display: flex;
14
+ align-items: center;
15
+
16
+ .layout-topbar-logo-container {
17
+ width: 20rem;
18
+ display: flex;
19
+ align-items: center;
20
+ }
21
+
22
+ .layout-topbar-logo {
23
+ display: inline-flex;
24
+ align-items: center;
25
+ font-size: 1.5rem;
26
+ border-radius: var(--content-border-radius);
27
+ color: var(--text-color);
28
+ font-weight: 500;
29
+ gap: 0.5rem;
30
+
31
+ svg {
32
+ width: 3rem;
33
+ }
34
+
35
+ &:focus-visible {
36
+ @include focused();
37
+ }
38
+ }
39
+
40
+ .layout-topbar-action {
41
+ display: inline-flex;
42
+ justify-content: center;
43
+ align-items: center;
44
+ border-radius: 50%;
45
+ width: 2.5rem;
46
+ height: 2.5rem;
47
+ color: var(--text-color);
48
+ transition: background-color var(--element-transition-duration);
49
+ cursor: pointer;
50
+
51
+ &:hover {
52
+ background-color: var(--surface-hover);
53
+ }
54
+
55
+ &:focus-visible {
56
+ @include focused();
57
+ }
58
+
59
+ i {
60
+ font-size: 1.25rem;
61
+ }
62
+
63
+ span {
64
+ font-size: 1rem;
65
+ display: none;
66
+ }
67
+
68
+ &.layout-topbar-action-highlight {
69
+ background-color: var(--primary-color);
70
+ color: var(--primary-contrast-color);
71
+ }
72
+ }
73
+
74
+ .layout-menu-button {
75
+ margin-right: 0.5rem;
76
+ }
77
+
78
+ .layout-topbar-menu-button {
79
+ display: none;
80
+ }
81
+
82
+ .layout-topbar-actions {
83
+ margin-left: auto;
84
+ display: flex;
85
+ gap: 1rem;
86
+ }
87
+
88
+ .layout-topbar-menu-content {
89
+ display: flex;
90
+ gap: 1rem;
91
+ }
92
+
93
+ .layout-config-menu {
94
+ display: flex;
95
+ gap: 1rem;
96
+ }
97
+ }
98
+
99
+ @media (max-width: 991px) {
100
+ .layout-topbar {
101
+ padding: 0 1rem;
102
+
103
+ .layout-topbar-logo-container {
104
+ width: auto;
105
+ }
106
+
107
+ .layout-menu-button {
108
+ margin-left: 0;
109
+ margin-right: 0.5rem;
110
+ }
111
+
112
+ .layout-topbar-menu-button {
113
+ display: inline-flex;
114
+ }
115
+
116
+ .layout-topbar-menu {
117
+ position: absolute;
118
+ background-color: var(--surface-overlay);
119
+ transform-origin: top;
120
+ box-shadow:
121
+ 0px 3px 5px rgba(0, 0, 0, 0.02),
122
+ 0px 0px 2px rgba(0, 0, 0, 0.05),
123
+ 0px 1px 4px rgba(0, 0, 0, 0.08);
124
+ border-radius: var(--content-border-radius);
125
+ padding: 1rem;
126
+ right: 2rem;
127
+ top: 4rem;
128
+ min-width: 15rem;
129
+ border: 1px solid var(--surface-border);
130
+
131
+ .layout-topbar-menu-content {
132
+ gap: 0.5rem;
133
+ }
134
+
135
+ .layout-topbar-action {
136
+ display: flex;
137
+ width: 100%;
138
+ height: auto;
139
+ justify-content: flex-start;
140
+ border-radius: var(--content-border-radius);
141
+ padding: 0.5rem 1rem;
142
+
143
+ i {
144
+ font-size: 1rem;
145
+ margin-right: 0.5rem;
146
+ }
147
+
148
+ span {
149
+ display: block;
150
+ }
151
+ }
152
+ }
153
+
154
+ .layout-topbar-tabs {
155
+ span {
156
+ display: none;
157
+ }
158
+ }
159
+
160
+ .layout-topbar-logo {
161
+ display: none;
162
+ }
163
+
164
+ .layout-topbar-menu-content {
165
+ flex-direction: column;
166
+ }
167
+ }
168
+ }
@@ -1,68 +1,68 @@
1
- h1,
2
- h2,
3
- h3,
4
- h4,
5
- h5,
6
- h6 {
7
- margin: 1.5rem 0 1rem 0;
8
- font-family: inherit;
9
- font-weight: 700;
10
- line-height: 1.5;
11
- color: var(--text-color);
12
-
13
- &:first-child {
14
- margin-top: 0;
15
- }
16
- }
17
-
18
- h1 {
19
- font-size: 2.5rem;
20
- }
21
-
22
- h2 {
23
- font-size: 2rem;
24
- }
25
-
26
- h3 {
27
- font-size: 1.75rem;
28
- }
29
-
30
- h4 {
31
- font-size: 1.5rem;
32
- }
33
-
34
- h5 {
35
- font-size: 1.25rem;
36
- }
37
-
38
- h6 {
39
- font-size: 1rem;
40
- }
41
-
42
- mark {
43
- background: #fff8e1;
44
- padding: 0.25rem 0.4rem;
45
- border-radius: var(--content-border-radius);
46
- font-family: monospace;
47
- }
48
-
49
- blockquote {
50
- margin: 1rem 0;
51
- padding: 0 2rem;
52
- border-left: 4px solid #90a4ae;
53
- }
54
-
55
- hr {
56
- border-top: solid var(--surface-border);
57
- border-width: 1px 0 0 0;
58
- margin: 1rem 0;
59
- }
60
-
61
- p {
62
- margin: 0 0 1rem 0;
63
- line-height: 1.5;
64
-
65
- &:last-child {
66
- margin-bottom: 0;
67
- }
68
- }
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5,
6
+ h6 {
7
+ margin: 1.5rem 0 1rem 0;
8
+ font-family: inherit;
9
+ font-weight: 700;
10
+ line-height: 1.5;
11
+ color: var(--text-color);
12
+
13
+ &:first-child {
14
+ margin-top: 0;
15
+ }
16
+ }
17
+
18
+ h1 {
19
+ font-size: 2.5rem;
20
+ }
21
+
22
+ h2 {
23
+ font-size: 2rem;
24
+ }
25
+
26
+ h3 {
27
+ font-size: 1.75rem;
28
+ }
29
+
30
+ h4 {
31
+ font-size: 1.5rem;
32
+ }
33
+
34
+ h5 {
35
+ font-size: 1.25rem;
36
+ }
37
+
38
+ h6 {
39
+ font-size: 1rem;
40
+ }
41
+
42
+ mark {
43
+ background: #fff8e1;
44
+ padding: 0.25rem 0.4rem;
45
+ border-radius: var(--content-border-radius);
46
+ font-family: monospace;
47
+ }
48
+
49
+ blockquote {
50
+ margin: 1rem 0;
51
+ padding: 0 2rem;
52
+ border-left: 4px solid #90a4ae;
53
+ }
54
+
55
+ hr {
56
+ border-top: solid var(--surface-border);
57
+ border-width: 1px 0 0 0;
58
+ margin: 1rem 0;
59
+ }
60
+
61
+ p {
62
+ margin: 0 0 1rem 0;
63
+ line-height: 1.5;
64
+
65
+ &:last-child {
66
+ margin-bottom: 0;
67
+ }
68
+ }