Skip to content

Commit 6e9268a

Browse files
mlmoravekmlmoravek
authored
use css variables
* update bootstrap * update style lint * update home * update functions * update home * update Routes * Order Rotues * remove form example * remove missing style import * update sidebar * remove unused file * update helper classes & mixins * fix functions * remove unused collapse style * formatting * update slider * update theme colors * remove duplicate is-expanded * adjust examples * update carousel * update notifciation * update carousel example * update input example * update button example * update dropdown inline * update checkbox example * add secondary variant example * convert is-fullwith to is-expanded * update sidebar * add modal is-mobile class * cleanup bootstrap config * remove unused class * update variables * refactoring * adjust component classes and style * change is- to variant- and size- * update icon margin * update default border color * update default border radius * remove btn-close underlying icon * update tag input * add checkbox/radio invert variant * remove duplicate styling * update variables * remove unused functions * exchange light colors through subtle colors * fix typo * add subtle variants & update svg usage * add subtle variants * update variable naming * add gray-light color * remove unused functions * update variables * update variables * update variables * refactoring * fix prefix * update btn variables * fix prefix bug * fix carousel spacer * update step default variables * refactor tooltip * fix notification example
1 parent 7a3f2d6 commit 6e9268a

35 files changed

+749
-675
lines changed

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
<router-link to="/field">Field</router-link>
1919
<router-link to="/icon">Icon</router-link>
2020
<router-link to="/input">Input</router-link>
21-
<router-link to="/taginput">Taginput</router-link>
2221
<router-link to="/loading">Loading</router-link>
2322
<router-link to="/modal">Modal</router-link>
2423
<router-link to="/notification">Notification</router-link>
@@ -32,6 +31,7 @@
3231
<router-link to="/switch">Switch</router-link>
3332
<router-link to="/table">Table</router-link>
3433
<router-link to="/tabs">Tabs</router-link>
34+
<router-link to="/taginput">Taginput</router-link>
3535
<router-link to="/timepicker">Timepicker</router-link>
3636
<router-link to="/tooltip">Tooltip</router-link>
3737
<router-link to="/upload">Upload</router-link>

‎src/assets/scss/bootstrap-build.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
// import bootstrap scss functions
1+
// import bootstrap scss required imports
22
@import "../node_modules/bootstrap/scss/functions";
33
@import "../node_modules/bootstrap/scss/mixins";
4+
@import "../node_modules/bootstrap/scss/variables";
5+
6+
// include custom theme variables
7+
@import "./components/utils/variables";
48

59
// import bootstrap scss
610
@import "../node_modules/bootstrap/scss/bootstrap";
711

812
// import oruga theme scss
9-
@import "bootstrap";
13+
@import "./bootstrap";

‎src/assets/scss/components/_autocomplete.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ $autocomplete-menu-max-height: 200px !default;
33
/* @docs */
44

55
.autocomplete-wrapper {
6+
--#{$prefix}autocomplete-menu-max-height: #{$autocomplete-menu-max-height};
67
position: relative;
78

89
.dropdown-menu {
910
@extend .show;
10-
max-height: $autocomplete-menu-max-height;
11+
max-height: var(--#{$prefix}autocomplete-menu-max-height);
1112
overflow: auto;
1213

1314
&.opened-top {

‎src/assets/scss/components/_button.scss‎

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
@use "sass:map";
22

33
/* @docs */
4-
$btn-margin-right: 0.5rem !default;
5-
$btn-border-default: 0.1px solid var(--bs-border-color) !default;
4+
$btn-spacer: 0.5rem !default;
5+
$btn-border-color: var(--#{$prefix}border-color);
6+
$btn-hover-border-color: var(--#{$prefix}border-color);
7+
$btn-hover-box-shadow: $box-shadow-sm !default;
68
/* @docs */
79

810
/* @bootstrap docs */
@@ -53,18 +55,27 @@ $btn-border-default: 0.1px solid var(--bs-border-color) !default;
5355
/* @bootstrap docs */
5456

5557
.btn {
58+
--#{$prefix}btn-spacer: #{$btn-spacer};
59+
--#{$prefix}btn-border-color: #{$btn-border-color};
60+
--#{$prefix}btn-hover-border-color: #{btn-hover-border-color};
61+
--#{$prefix}btn-hover-box-shadow: #{$btn-hover-box-shadow};
62+
5663
.icon {
5764
margin: 0 4px;
5865

5966
&:not(:last-child) {
60-
margin-right: $btn-margin-right;
67+
margin-right: var(--#{$prefix}btn-spacer);
6168
}
6269

6370
&:not(:first-child) {
64-
margin-left: $btn-margin-right;
71+
margin-left: var(--#{$prefix}btn-spacer);
6572
}
6673
}
6774

75+
&:hover {
76+
box-shadow: var(--#{$prefix}btn-hover-box-shadow);
77+
}
78+
6879
&.expanded {
6980
width: 100%;
7081
}
@@ -80,43 +91,33 @@ $btn-border-default: 0.1px solid var(--bs-border-color) !default;
8091
&.variant-#{$name}-inverted,
8192
&.btn-inverted-#{$name} {
8293
// default style
83-
--bs-btn-color: var(--#{$prefix}#{$name});
84-
--bs-btn-bg: transparent;
85-
--bs-btn-border-color: transparent;
94+
--#{$prefix}btn-color: var(--#{$prefix}#{$name});
95+
--#{$prefix}btn-bg: transparent;
96+
--#{$prefix}btn-border-color: transparent;
8697

8798
// hover style
88-
--bs-btn-hover-color: var(--#{$prefix}#{$name});
89-
--bs-btn-hover-bg: var(--#{$prefix}#{$name}-bg-subtle);
90-
--bs-btn-hover-border-color: var(--#{$prefix}#{$name}-border-subtle);
99+
--#{$prefix}btn-hover-color: var(--#{$prefix}#{$name});
100+
--#{$prefix}btn-hover-bg: var(--#{$prefix}#{$name}-bg-subtle);
101+
--#{$prefix}btn-hover-border-color: var(
102+
--#{$prefix}#{$name}-border-subtle
103+
);
91104
}
92105

93106
&.variant-#{$name}-subtle,
94107
&.btn-#{$name}-subtle {
95108
// default style
96-
--bs-btn-color: var(--#{$prefix}#{$name});
97-
--bs-btn-bg: var(--#{$prefix}#{$name}-bg-subtle);
98-
--bs-btn-border-color: var(--#{$prefix}#{$name}-border-subtle);
109+
--#{$prefix}btn-color: var(--#{$prefix}#{$name});
110+
--#{$prefix}btn-bg: var(--#{$prefix}#{$name}-bg-subtle);
111+
--#{$prefix}btn-border-color: var(--#{$prefix}#{$name}-border-subtle);
99112

100113
// hover style
101-
--bs-btn-hover-color: #{color-contrast($color)};
102-
--bs-btn-hover-bg: var(--#{$prefix}#{$name});
103-
--bs-btn-hover-border-color: var(--#{$prefix}#{$name});
114+
--#{$prefix}btn-hover-color: var(--#{$prefix}#{$name}-contrast);
115+
--#{$prefix}btn-hover-bg: var(--#{$prefix}#{$name});
116+
--#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$name});
104117
}
105118
}
106119
}
107120

108121
.btn:not(:last-child):not(.btn-expanded) {
109-
margin-right: $btn-margin-right;
110-
}
111-
112-
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(
113-
.btn-danger
114-
):not(.btn-warning):not(.btn-info):not(.btn-dark):not(.btn-light):not(
115-
.btn-outline-primary
116-
):not(.btn-outline-secondary):not(.btn-outline-success):not(
117-
.btn-outline-danger
118-
):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-dark):not(
119-
.btn-outline-light
120-
) {
121-
border: $btn-border-default;
122+
margin-right: var(--#{$prefix}btn-spacer);
122123
}

‎src/assets/scss/components/_carousel.scss‎

Lines changed: 67 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
$carousel-control-top: 50% !default;
33
$carousel-overlay-background: rgba(0, 0, 0, 0.8) !default;
44
$carousel-overlay-zindex: $zindex-fixed !default;
5-
$carousel-indicator-bg: $primary !default;
5+
$carousel-indicator-bg: $secondary !default;
6+
$carousel-indicator-size: 10px !default;
7+
$carousel-indicator-spacer: $spacer !default;
68
/* docs */
79

810
/* @bootstrap docs */
@@ -36,6 +38,13 @@ $carousel-indicator-bg: $primary !default;
3638
/* @bootstrap docs */
3739

3840
.carousel-wrapper {
41+
--#{$prefix}carousel-control-top: #{$carousel-control-top};
42+
--#{$prefix}carousel-overlay-background: #{$carousel-overlay-background};
43+
--#{$prefix}carousel-overlay-zindex: #{$carousel-overlay-zindex};
44+
--#{$prefix}carousel-indicator-bg: #{$carousel-indicator-bg};
45+
--#{$prefix}carousel-indicator-size: #{$carousel-indicator-size};
46+
--#{$prefix}carousel-indicator-spacer: #{$carousel-indicator-spacer};
47+
3948
-webkit-touch-callout: none;
4049
-webkit-user-select: none;
4150
-moz-user-select: none;
@@ -46,18 +55,18 @@ $carousel-indicator-bg: $primary !default;
4655
width: 100%;
4756

4857
&.carousel-overlay {
58+
position: fixed;
4959
bottom: 0;
5060
left: 0;
5161
right: 0;
5262
top: 0;
63+
display: flex;
5364
align-items: center;
5465
flex-direction: column;
5566
justify-content: center;
5667
max-height: 100vh;
57-
position: fixed;
58-
background-color: $carousel-overlay-background;
59-
z-index: $carousel-overlay-zindex;
60-
display: flex;
68+
background-color: var(--#{$prefix}carousel-overlay-background);
69+
z-index: var(--#{$prefix}carousel-overlay-zindex);
6170

6271
.carousel-indicator.has-background {
6372
background: transparent;
@@ -87,34 +96,65 @@ $carousel-indicator-bg: $primary !default;
8796

8897
.carousel-indicators {
8998
.carousel-indicator {
90-
box-sizing: content-box;
9199
flex: 0 1 auto;
92100
padding: 0;
93-
margin-right: $carousel-indicator-spacer;
94-
margin-left: $carousel-indicator-spacer;
95-
text-indent: -999px;
101+
box-sizing: content-box;
102+
margin-right: var(
103+
--#{$prefix}carousel-indicator-spacer,
104+
$carousel-indicator-spacer
105+
);
106+
margin-left: var(
107+
--#{$prefix}carousel-indicator-spacer,
108+
$carousel-indicator-spacer
109+
);
96110
cursor: pointer;
97111
border: 0;
98-
border-top: $carousel-indicator-hit-area-height solid transparent;
99-
border-bottom: $carousel-indicator-hit-area-height solid transparent;
112+
border-top: var(
113+
--#{$prefix}carousel-indicator-hit-area-height,
114+
$carousel-indicator-hit-area-height
115+
)
116+
solid transparent;
117+
border-bottom: var(
118+
--#{$prefix}carousel-indicator-hit-area-height,
119+
$carousel-indicator-hit-area-height
120+
)
121+
solid transparent;
100122

101123
& > .carousel-indicator-item {
102124
display: block;
103-
background-color: $carousel-indicator-active-bg;
125+
background-color: var(
126+
--#{$prefix}carousel-indicator-active-bg,
127+
$carousel-indicator-active-bg
128+
);
104129
background-clip: padding-box;
105-
opacity: $carousel-indicator-opacity;
106-
transition: $carousel-indicator-transition;
107-
width: $carousel-indicator-width;
108-
height: $carousel-indicator-height;
130+
opacity: var(
131+
--#{$prefix}carousel-indicator-opacity,
132+
$carousel-indicator-opacity
133+
);
134+
transition: var(
135+
--#{$prefix}carousel-indicator-transition,
136+
$carousel-indicator-transition
137+
);
138+
width: var(
139+
--#{$prefix}carousel-indicator-width,
140+
$carousel-indicator-width
141+
);
142+
height: var(
143+
--#{$prefix}carousel-indicator-height,
144+
$carousel-indicator-height
145+
);
109146

110147
&.active {
111-
opacity: $carousel-indicator-active-opacity;
148+
opacity: var(
149+
--#{$prefix}carousel-indicator-active-opacity,
150+
$carousel-indicator-active-opacity
151+
);
112152
}
113153

114154
&.indicator-dots,
115155
&.indicator-boxes {
116-
height: 10px;
117-
width: 10px;
156+
height: var(--#{$prefix}carousel-indicator-size);
157+
width: var(--#{$prefix}carousel-indicator-size);
118158
}
119159

120160
&.indicator-dots {
@@ -127,7 +167,10 @@ $carousel-indicator-bg: $primary !default;
127167
position: relative;
128168

129169
.carousel-indicator > .carousel-indicator-item {
130-
background-color: $carousel-indicator-bg;
170+
background-color: var(
171+
--#{$prefix}carousel-indicator-bg,
172+
$carousel-indicator-bg
173+
);
131174
}
132175
}
133176

@@ -137,25 +180,25 @@ $carousel-indicator-bg: $primary !default;
137180
&.is-bottom {
138181
bottom: 0;
139182
top: unset;
140-
margin-bottom: 1rem;
183+
margin-bottom: var(--#{$prefix}carousel-indicator-spacer);
141184
}
142185

143186
&.is-top {
144187
top: 0;
145188
bottom: unset;
146-
margin-top: 1rem;
189+
margin-top: var(--#{$prefix}carousel-indicator-spacer);
147190
}
148191
}
149192
}
150193

151194
.carousel-control-next-icon,
152195
.carousel-control-prev-icon {
153196
cursor: pointer;
154-
top: $carousel-control-top;
155197
-webkit-transform: translateY(-50%);
156198
-ms-transform: translateY(-50%);
157199
transform: translateY(-50%);
158-
width: $carousel-control-width;
200+
top: var(--#{$prefix}carousel-control-top);
201+
width: var(--#{$prefix}carousel-control-width, $carousel-control-width);
159202

160203
i {
161204
visibility: hidden;

‎src/assets/scss/components/_checkbox.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,12 +66,12 @@
6666

6767
.form-check {
6868
// Color variants
69-
@each $name, $variant in $theme-colors {
69+
@each $name, $color in $theme-colors {
7070
&.variant-#{$name} {
7171
input[type="radio"],
7272
input[type="checkbox"] {
73-
background-color: $variant;
74-
border-color: $variant;
73+
background-color: ar(--#{$prefix}#{$name});
74+
border-color: ar(--#{$prefix}#{$name});
7575
}
7676
}
7777
}

‎src/assets/scss/components/_datepicker.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ $datepicker-cell-text-align: center !default;
1010
$datepicker-cell-unselectable-color: rgba(0, 0, 0, 0.3) !default;
1111
$datepicker-cell-hovered-color: rgba(0, 0, 0, 0.5) !default;
1212
$datepicker-cell-selected-color: $primary !default;
13-
$datepicker-cell-border-radius: var(--bs-border-radius) !default;
13+
$datepicker-cell-border-radius: var(--#{$prefix}border-radius) !default;
1414
/* @docs */
1515

1616
@mixin datepicker-cell {

0 commit comments

Comments
 (0)