@rolster/styles-foundations 2.5.30 → 2.5.31
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.
- package/dist/styles.css +21 -30
- package/dist/styles.css.map +1 -1
- package/dist/styles.min.css +2 -2
- package/dist/styles.rtl.css +21 -30
- package/dist/styles.rtl.min.css +2 -2
- package/package.json +1 -1
- package/scss/components/app.scss +16 -33
- package/scss/styles.scss +7 -2
package/scss/components/app.scss
CHANGED
|
@@ -8,14 +8,14 @@
|
|
|
8
8
|
.rls-app {
|
|
9
9
|
&__body {
|
|
10
10
|
--pvt-navbar-width: var(--rlc-app-navbar-width, 160rem);
|
|
11
|
-
--pvt-navbar-
|
|
11
|
+
--pvt-navbar-width-condense: 36rem;
|
|
12
12
|
|
|
13
13
|
display: flex;
|
|
14
14
|
flex-direction: column;
|
|
15
15
|
padding: 0rem;
|
|
16
16
|
margin: 0rem;
|
|
17
|
-
width:
|
|
18
|
-
height:
|
|
17
|
+
width: var(--rls-html-max-width);
|
|
18
|
+
height: var(--rls-html-max-height);
|
|
19
19
|
overflow: hidden;
|
|
20
20
|
z-index: var(--rls-z-index-8);
|
|
21
21
|
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
&--navbar-condense {
|
|
27
|
-
--pvt-navbar-width:
|
|
27
|
+
--pvt-navbar-width: var(--pvt-navbar-width-condense);
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
@@ -41,14 +41,14 @@
|
|
|
41
41
|
|
|
42
42
|
& + .rls-app__page,
|
|
43
43
|
& + .rls-app__content {
|
|
44
|
-
height: calc(
|
|
44
|
+
height: calc(var(--rls-html-max-height) - var(--pvt-header-height));
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
&__content {
|
|
49
49
|
position: relative;
|
|
50
50
|
width: 100%;
|
|
51
|
-
height:
|
|
51
|
+
height: var(--rls-html-max-height);
|
|
52
52
|
margin: 0rem;
|
|
53
53
|
padding: 0rem;
|
|
54
54
|
overflow: auto;
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
position: relative;
|
|
61
61
|
display: flex;
|
|
62
62
|
width: 100%;
|
|
63
|
-
height:
|
|
63
|
+
height: var(--rls-html-max-height);
|
|
64
64
|
margin: 0rem;
|
|
65
65
|
padding: 0rem;
|
|
66
66
|
overflow: hidden;
|
|
@@ -72,24 +72,13 @@
|
|
|
72
72
|
height: 100%;
|
|
73
73
|
margin: 0rem;
|
|
74
74
|
padding: 0rem;
|
|
75
|
-
transition: width
|
|
75
|
+
transition: width 280ms var(--rls-acceleration-curve);
|
|
76
76
|
|
|
77
77
|
& + .rls-app__page__content {
|
|
78
78
|
--rlc-snackbar-left: calc(50% + calc(var(--pvt-navbar-width) / 2));
|
|
79
79
|
|
|
80
80
|
width: calc(100% - var(--pvt-navbar-width));
|
|
81
81
|
}
|
|
82
|
-
|
|
83
|
-
&__content {
|
|
84
|
-
position: relative;
|
|
85
|
-
width: 100%;
|
|
86
|
-
height: 100%;
|
|
87
|
-
background: var(--rlc-app-navbar-background, var(--rls-app-color-100));
|
|
88
|
-
border-radius: 0rem 0rem var(--rls-sizing-x16) 0rem;
|
|
89
|
-
overflow-x: hidden;
|
|
90
|
-
overflow-y: auto;
|
|
91
|
-
box-sizing: border-box;
|
|
92
|
-
}
|
|
93
82
|
}
|
|
94
83
|
|
|
95
84
|
&__content {
|
|
@@ -106,28 +95,22 @@
|
|
|
106
95
|
}
|
|
107
96
|
}
|
|
108
97
|
|
|
109
|
-
@media screen and (max-width:
|
|
98
|
+
@media screen and (max-width: 640px) {
|
|
110
99
|
.rls-app {
|
|
111
100
|
&__body {
|
|
112
|
-
--pvt-navbar-width:
|
|
113
|
-
--pvt-navbar-
|
|
114
|
-
|
|
115
|
-
&--snackbar {
|
|
116
|
-
--rlc-snackbar-left: 50%;
|
|
117
|
-
}
|
|
101
|
+
--pvt-navbar-width: 140rem;
|
|
102
|
+
--pvt-navbar-width-condense: 140rem;
|
|
103
|
+
--pvt-section-navbar: 0rem;
|
|
118
104
|
|
|
119
105
|
&--navbar-condense {
|
|
120
|
-
--pvt-navbar
|
|
121
|
-
--pvt-navbar-left: 0%;
|
|
106
|
+
--pvt-section-navbar: 140rem;
|
|
122
107
|
}
|
|
123
108
|
}
|
|
124
109
|
|
|
125
110
|
&__page {
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
transition: left 240ms var(--rls-acceleration-curve);
|
|
130
|
-
}
|
|
111
|
+
width: calc(var(--rls-html-max-width) + var(--pvt-navbar-width));
|
|
112
|
+
left: calc(var(--pvt-section-navbar) * -1);
|
|
113
|
+
transition: left 280ms var(--rls-standard-curve);
|
|
131
114
|
}
|
|
132
115
|
}
|
|
133
116
|
}
|
package/scss/styles.scss
CHANGED
|
@@ -1,14 +1,19 @@
|
|
|
1
1
|
// Rolster Technology Styles
|
|
2
|
-
// v2.1.
|
|
2
|
+
// v2.1.1
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 11/Ago/2022
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 15/Sep/2025
|
|
7
7
|
|
|
8
8
|
@use 'foundations';
|
|
9
9
|
@use 'utilities';
|
|
10
10
|
@use 'components';
|
|
11
11
|
|
|
12
|
+
:root {
|
|
13
|
+
--rls-html-max-width: 100%;
|
|
14
|
+
--rls-html-max-height: 100%;
|
|
15
|
+
}
|
|
16
|
+
|
|
12
17
|
.rls-aspect-ratio {
|
|
13
18
|
--rls-app-font-size-1360: 2.5px;
|
|
14
19
|
--rls-app-font-size-1820: 2.925px;
|