@propelinc/citrus-ui 0.2.4 → 0.2.5
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/citrus-ui.common.js +52 -52
- package/dist/citrus-ui.common.js.map +1 -1
- package/dist/citrus-ui.css +1 -1
- package/dist/citrus-ui.umd.js +52 -52
- package/dist/citrus-ui.umd.js.map +1 -1
- package/dist/citrus-ui.umd.min.js +2 -2
- package/dist/citrus-ui.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/CAlert.vue +1 -1
- package/src/components/CButton.vue +27 -21
package/package.json
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
+
<!--
|
|
3
|
+
HACK(mohan): Using :key="disabled" here forces Vue to re-render the whole component. This
|
|
4
|
+
fixes a Safari bug where the text color wouldn't change when buttons became re-enabled.
|
|
5
|
+
-->
|
|
2
6
|
<v-btn
|
|
7
|
+
:key="disabled"
|
|
3
8
|
class="button"
|
|
4
9
|
:class="{
|
|
5
10
|
'button--primary': !secondary && !tertiary,
|
|
@@ -58,6 +63,11 @@ export default class CButton extends Vue {
|
|
|
58
63
|
<style lang="less" scoped>
|
|
59
64
|
@import '~@/styles/variables.less';
|
|
60
65
|
|
|
66
|
+
.button-theme(@color, @background-color) {
|
|
67
|
+
background-color: @background-color !important;
|
|
68
|
+
color: @color !important;
|
|
69
|
+
}
|
|
70
|
+
|
|
61
71
|
.button {
|
|
62
72
|
font-weight: @font-weight-heavy;
|
|
63
73
|
letter-spacing: 0;
|
|
@@ -69,59 +79,55 @@ export default class CButton extends Vue {
|
|
|
69
79
|
}
|
|
70
80
|
|
|
71
81
|
.button--primary {
|
|
72
|
-
|
|
73
|
-
color: @color-white;
|
|
82
|
+
.button-theme(@color-white, @color-blue-accent);
|
|
74
83
|
}
|
|
75
84
|
|
|
76
85
|
.button--primary.button--dark {
|
|
77
|
-
|
|
86
|
+
.button-theme(@color-white, @color-navy);
|
|
78
87
|
}
|
|
79
88
|
|
|
80
89
|
.button--primary.button--light {
|
|
81
|
-
|
|
82
|
-
color: @color-navy;
|
|
90
|
+
.button-theme(@color-navy, @color-white);
|
|
83
91
|
}
|
|
84
92
|
|
|
85
93
|
.button--secondary {
|
|
94
|
+
.button-theme(@color-blue-accent, @color-white);
|
|
95
|
+
|
|
86
96
|
border: @border !important;
|
|
87
|
-
color: @color-blue-accent;
|
|
88
97
|
}
|
|
89
98
|
|
|
90
99
|
.button--secondary.button--dark {
|
|
91
|
-
color
|
|
100
|
+
.button-theme(@color-navy, @color-white);
|
|
92
101
|
}
|
|
93
102
|
|
|
94
103
|
.button--secondary.button--light {
|
|
95
|
-
|
|
96
|
-
color: @color-white;
|
|
104
|
+
.button-theme(@color-white, @color-navy);
|
|
97
105
|
}
|
|
98
106
|
|
|
99
107
|
.button--tertiary {
|
|
100
|
-
|
|
108
|
+
.button-theme(@color-blue-accent, transparent);
|
|
101
109
|
}
|
|
102
110
|
|
|
103
111
|
.button--tertiary.button--dark {
|
|
104
|
-
|
|
112
|
+
.button-theme(@color-navy, transparent);
|
|
105
113
|
}
|
|
106
114
|
|
|
107
115
|
.button--tertiary.button--light {
|
|
108
|
-
|
|
116
|
+
.button-theme(@color-white, transparent);
|
|
109
117
|
}
|
|
110
118
|
|
|
111
119
|
// Add some insane specificity to override Vuetify.
|
|
112
|
-
.theme--light.v-btn.v-btn--disabled:not(.v-btn--outlined) {
|
|
113
|
-
&.button--
|
|
114
|
-
|
|
115
|
-
color: @color-navy-tint-1 !important;
|
|
120
|
+
.button--disabled.theme--light.v-btn.v-btn--disabled:not(.v-btn--outlined) {
|
|
121
|
+
&.button--primary {
|
|
122
|
+
.button-theme(@color-navy-tint-1, @color-navy-tint-4);
|
|
116
123
|
}
|
|
117
124
|
|
|
118
|
-
&.button--
|
|
119
|
-
|
|
120
|
-
color: @color-navy-tint-2 !important;
|
|
125
|
+
&.button--secondary {
|
|
126
|
+
.button-theme(@color-navy-tint-2, @color-white);
|
|
121
127
|
}
|
|
122
128
|
|
|
123
|
-
&.button--
|
|
124
|
-
|
|
129
|
+
&.button--tertiary {
|
|
130
|
+
.button-theme(@color-navy-tint-2, transparent);
|
|
125
131
|
}
|
|
126
132
|
}
|
|
127
133
|
|