@appscode/design-system 2.0.22-alpha.1 → 2.0.22-alpha.3

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.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/vue-components/styles/base/utilities/_global.scss +15 -61
  3. package/vue-components/styles/components/_all.scss +1 -0
  4. package/vue-components/styles/components/sidebar-tabs/_all.scss +2 -0
  5. package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs-layout.scss +16 -0
  6. package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs.scss +195 -0
  7. package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabs.vue +1 -197
  8. package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue +1 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "2.0.22-alpha.1",
3
+ "version": "2.0.22-alpha.3",
4
4
  "description": "A design system for Appscode websites and dashboards made using Bulma",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/vue-components/styles/base/utilities/_global.scss CHANGED
@@ -763,66 +763,20 @@ $border_color_4: transparent transparent #585d6e transparent;
763
763
 
764
764
  // Status css
765
765
  // ac-footer sticky end
766
-
767
- // terminal scss end
768
- .is-dark-theme {
769
- a {
770
- &:hover {
771
- color: #485fc7;
772
- }
766
+ .information-center {
767
+ min-height: calc(100vh - 0px);
768
+ padding: 20px;
769
+ border-left: 1px solid hsl(208, 77%, 90%);
770
+ width: 330px;
771
+ margin-left: auto;
772
+ position: fixed;
773
+ right: 0;
774
+ background: #fff;
775
+ top: 0;
776
+ z-index: 9999;
777
+ box-shadow: -3px 2px 10px 3px rgba(0, 0, 0, 0.1);
778
+
779
+ .info-title {
780
+ display: flex;
773
781
  }
774
782
  }
775
-
776
- /****************************************
777
- Responsive Classes
778
- *****************************************/
779
-
780
- // Extra small devices (portrait phones, less than 576px)
781
- @media (max-width: 575.98px) {
782
- // .responsive-only {
783
- // display: block;
784
- // }
785
-
786
- // .ac-system-body {
787
- // grid-gap: 15px;
788
- // grid-template-columns: 70px calc(100% - 100px);
789
-
790
- // .ac-system-content {
791
- // &.mr-20 {
792
- // margin-right: 0 !important;
793
- // }
794
- // }
795
- // }
796
- }
797
-
798
- // Small devices (landscape phones, 576px and up)
799
- @media (min-width: 576px) and (max-width: 767.98px) {
800
- }
801
-
802
- // Medium devices (tablets, 768px and up)
803
- @media (min-width: 768px) and (max-width: 991.98px) {
804
- // .ac-system-body {
805
- // grid-gap: 15px;
806
- // grid-template-columns: 240px calc(100% - 255px);
807
- // }
808
- }
809
-
810
- // Large devices (desktops, 992px and up)
811
- @media (min-width: 992px) and (max-width: 1199.98px) {
812
- // .ac-system-body {
813
- // grid-gap: 0px;
814
- // grid-template-columns: 240px calc(100% - 260px);
815
- // }
816
- }
817
-
818
- // Extra large devices (large desktops, 1200px and up)
819
- @media (min-width: 1200px) {
820
- }
821
-
822
- // FHD devices
823
- @media (min-width: 1408px) and (max-width: 1600) {
824
- // .ac-system-body {
825
- // grid-gap: 0px;
826
- // grid-template-columns: 240px calc(100% - 260px);
827
- // }
828
- }
package/vue-components/styles/components/_all.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  @import "header/all";
8
8
  @import "select-box/all";
9
9
  @import "sidebar/all";
10
+ @import "sidebar-tabs/all";
10
11
 
11
12
  @import "button";
12
13
  @import "terminal";
package/vue-components/styles/components/sidebar-tabs/_all.scss ADDED
@@ -0,0 +1,2 @@
1
+ @import "./sidebar-tabs";
2
+ @import "./sidebar-tabs-layout";
package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs-layout.scss ADDED
@@ -0,0 +1,16 @@
1
+ .sidebar-tabs-layout {
2
+ .sidebar-tabs-wrapper {
3
+ position: fixed;
4
+ background-color: $white-100;
5
+ }
6
+ .pl-220 {
7
+ padding-left: 220px;
8
+ }
9
+ .content-wrapper {
10
+ padding-bottom: 40px;
11
+ width: 100%;
12
+ &:has(.form-footer) {
13
+ padding-bottom: 0;
14
+ }
15
+ }
16
+ }
package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs.scss ADDED
@@ -0,0 +1,195 @@
1
+ .sidebar-tabs {
2
+ width: 220px;
3
+ border-right: 1px solid $primary-95;
4
+ padding: 8px;
5
+ height: calc(100vh - 50px);
6
+ ul {
7
+ li {
8
+ a {
9
+ display: flex;
10
+ align-items: center;
11
+ color: $primary-10;
12
+ position: relative;
13
+ z-index: 1;
14
+ padding: 8px 16px;
15
+ font-weight: 500;
16
+ transition: 0.3s ease-in-out;
17
+ align-items: center;
18
+ justify-content: space-between;
19
+
20
+ &:after {
21
+ position: absolute;
22
+ content: "";
23
+ left: 0;
24
+ top: 0;
25
+ width: 100%;
26
+ height: 100%;
27
+ background-color: $primary-95;
28
+ border-radius: 4px;
29
+ z-index: -1;
30
+ opacity: 0;
31
+ visibility: hidden;
32
+ transition: 0.3s ease-in-out;
33
+ }
34
+ &:hover {
35
+ color: $primary;
36
+
37
+ &:after {
38
+ opacity: 1;
39
+ visibility: visible;
40
+ background-color: $primary-97;
41
+ }
42
+ }
43
+ &.is-active {
44
+ color: $primary;
45
+ &:hover {
46
+ &::after {
47
+ background-color: $primary-90;
48
+ }
49
+ }
50
+ &:after {
51
+ opacity: 1;
52
+ visibility: visible;
53
+ }
54
+ &.is-danger {
55
+ color: $danger;
56
+ &:hover {
57
+ &::after {
58
+ background-color: $red-90;
59
+ }
60
+ }
61
+ &:after {
62
+ opacity: 1;
63
+ visibility: visible;
64
+ background-color: $red-95;
65
+ }
66
+ }
67
+ &.is-success {
68
+ color: $success;
69
+ &:hover {
70
+ &::after {
71
+ background-color: $green-90;
72
+ }
73
+ }
74
+ &:after {
75
+ opacity: 1;
76
+ visibility: visible;
77
+ background-color: $green-95;
78
+ }
79
+ }
80
+ &.is-warning {
81
+ color: $warning;
82
+ &:hover {
83
+ &::after {
84
+ background-color: $yellow-90;
85
+ }
86
+ }
87
+ &:after {
88
+ opacity: 1;
89
+ visibility: visible;
90
+ background-color: $yellow-95;
91
+ }
92
+ }
93
+ }
94
+ &.is-danger {
95
+ color: $danger;
96
+ &:hover {
97
+ &::after {
98
+ background-color: $red-90;
99
+ }
100
+ }
101
+ &:after {
102
+ opacity: 1;
103
+ visibility: visible;
104
+ background-color: transparent;
105
+ }
106
+ }
107
+ &.is-success {
108
+ color: $success;
109
+ &:hover {
110
+ &::after {
111
+ background-color: $green-90;
112
+ }
113
+ }
114
+ &:after {
115
+ opacity: 1;
116
+ visibility: visible;
117
+ background-color: transparent;
118
+ }
119
+ }
120
+ &.is-warning {
121
+ color: $warning;
122
+ &:hover {
123
+ &::after {
124
+ background-color: $yellow-90;
125
+ }
126
+ }
127
+ &:after {
128
+ opacity: 1;
129
+ visibility: visible;
130
+ background-color: transparent;
131
+ }
132
+ }
133
+ }
134
+ &.is-open {
135
+ transition: 0.3s ease-in-out;
136
+ ul {
137
+ max-height: 250px;
138
+ }
139
+ }
140
+ ul {
141
+ margin-left: 20px;
142
+ position: relative;
143
+ z-index: 1;
144
+ max-height: 0;
145
+ transition: 0.3s ease-in-out !important;
146
+ overflow: hidden;
147
+ &:after {
148
+ position: absolute;
149
+ content: "";
150
+ left: 4px;
151
+ top: 0;
152
+ width: 1px;
153
+ height: calc(100% - 10px);
154
+ background-color: $primary-90;
155
+ }
156
+ li {
157
+ a {
158
+ &:after {
159
+ left: -8px;
160
+ opacity: 0 !important;
161
+ visibility: hidden !important;
162
+ }
163
+ &::before {
164
+ position: absolute;
165
+ content: "";
166
+ left: 0;
167
+ top: 50%;
168
+ margin-top: -4px;
169
+ width: 8px;
170
+ height: 8px;
171
+ border-radius: 50%;
172
+ background-color: $primary;
173
+ transition: 0.3s ease-in-out;
174
+ opacity: 0;
175
+ visibility: hidden;
176
+ }
177
+ &:hover:not(&.is-active) {
178
+ &::before {
179
+ opacity: 1;
180
+ visibility: visible;
181
+ background-color: $primary-80;
182
+ }
183
+ }
184
+ &.is-active {
185
+ &::before {
186
+ opacity: 1;
187
+ visibility: visible;
188
+ }
189
+ }
190
+ }
191
+ }
192
+ }
193
+ }
194
+ }
195
+ }
package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabs.vue CHANGED
@@ -5,200 +5,4 @@
5
5
  </div>
6
6
  </template>
7
7
 
8
- <style lang="scss">
9
- .sidebar-tabs {
10
- width: 220px;
11
- border-right: 1px solid $primary-95;
12
- padding: 8px;
13
- height: calc(100vh - 50px);
14
- ul {
15
- li {
16
- a {
17
- display: flex;
18
- align-items: center;
19
- color: $primary-10;
20
- position: relative;
21
- z-index: 1;
22
- padding: 8px 16px;
23
- font-weight: 500;
24
- transition: 0.3s ease-in-out;
25
- align-items: center;
26
- justify-content: space-between;
27
-
28
- &:after {
29
- position: absolute;
30
- content: "";
31
- left: 0;
32
- top: 0;
33
- width: 100%;
34
- height: 100%;
35
- background-color: $primary-95;
36
- border-radius: 4px;
37
- z-index: -1;
38
- opacity: 0;
39
- visibility: hidden;
40
- transition: 0.3s ease-in-out;
41
- }
42
- &:hover {
43
- color: $primary;
44
-
45
- &:after {
46
- opacity: 1;
47
- visibility: visible;
48
- background-color: $primary-97;
49
- }
50
- }
51
- &.is-active {
52
- color: $primary;
53
- &:hover {
54
- &::after {
55
- background-color: $primary-90;
56
- }
57
- }
58
- &:after {
59
- opacity: 1;
60
- visibility: visible;
61
- }
62
- &.is-danger {
63
- color: $danger;
64
- &:hover {
65
- &::after {
66
- background-color: $red-90;
67
- }
68
- }
69
- &:after {
70
- opacity: 1;
71
- visibility: visible;
72
- background-color: $red-95;
73
- }
74
- }
75
- &.is-success {
76
- color: $success;
77
- &:hover {
78
- &::after {
79
- background-color: $green-90;
80
- }
81
- }
82
- &:after {
83
- opacity: 1;
84
- visibility: visible;
85
- background-color: $green-95;
86
- }
87
- }
88
- &.is-warning {
89
- color: $warning;
90
- &:hover {
91
- &::after {
92
- background-color: $yellow-90;
93
- }
94
- }
95
- &:after {
96
- opacity: 1;
97
- visibility: visible;
98
- background-color: $yellow-95;
99
- }
100
- }
101
- }
102
- &.is-danger {
103
- color: $danger;
104
- &:hover {
105
- &::after {
106
- background-color: $red-90;
107
- }
108
- }
109
- &:after {
110
- opacity: 1;
111
- visibility: visible;
112
- background-color: transparent;
113
- }
114
- }
115
- &.is-success {
116
- color: $success;
117
- &:hover {
118
- &::after {
119
- background-color: $green-90;
120
- }
121
- }
122
- &:after {
123
- opacity: 1;
124
- visibility: visible;
125
- background-color: transparent;
126
- }
127
- }
128
- &.is-warning {
129
- color: $warning;
130
- &:hover {
131
- &::after {
132
- background-color: $yellow-90;
133
- }
134
- }
135
- &:after {
136
- opacity: 1;
137
- visibility: visible;
138
- background-color: transparent;
139
- }
140
- }
141
- }
142
- &.is-open {
143
- transition: 0.3s ease-in-out;
144
- ul {
145
- max-height: 250px;
146
- }
147
- }
148
- ul {
149
- margin-left: 20px;
150
- position: relative;
151
- z-index: 1;
152
- max-height: 0;
153
- transition: 0.3s ease-in-out !important;
154
- overflow: hidden;
155
- &:after {
156
- position: absolute;
157
- content: "";
158
- left: 4px;
159
- top: 0;
160
- width: 1px;
161
- height: calc(100% - 10px);
162
- background-color: $primary-90;
163
- }
164
- li {
165
- a {
166
- &:after {
167
- left: -8px;
168
- opacity: 0 !important;
169
- visibility: hidden !important;
170
- }
171
- &::before {
172
- position: absolute;
173
- content: "";
174
- left: 0;
175
- top: 50%;
176
- margin-top: -4px;
177
- width: 8px;
178
- height: 8px;
179
- border-radius: 50%;
180
- background-color: $primary;
181
- transition: 0.3s ease-in-out;
182
- opacity: 0;
183
- visibility: hidden;
184
- }
185
- &:hover:not(&.is-active) {
186
- &::before {
187
- opacity: 1;
188
- visibility: visible;
189
- background-color: $primary-80;
190
- }
191
- }
192
- &.is-active {
193
- &::before {
194
- opacity: 1;
195
- visibility: visible;
196
- }
197
- }
198
- }
199
- }
200
- }
201
- }
202
- }
203
- }
204
- </style>
8
+ <style lang="scss"></style>
package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue CHANGED
@@ -26,19 +26,4 @@ withDefaults(defineProps<Props>(), {
26
26
  </div>
27
27
  </template>
28
28
 
29
- <style lang="scss" scoped>
30
- .sidebar-tabs-wrapper {
31
- position: fixed;
32
- background-color: $white-100;
33
- }
34
- .pl-220 {
35
- padding-left: 220px;
36
- }
37
- .content-wrapper {
38
- padding-bottom: 40px;
39
- width: 100%;
40
- &:has(.form-footer) {
41
- padding-bottom: 0;
42
- }
43
- }
44
- </style>
29
+ <style lang="scss" scoped></style>