@pocketprep/ui-kit 3.4.27 → 3.4.29
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/@pocketprep/ui-kit.js +478 -474
- package/dist/@pocketprep/ui-kit.js.map +1 -1
- package/dist/@pocketprep/ui-kit.umd.cjs +3 -3
- package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/lib/components/Forms/Select.vue +6 -6
- package/lib/components/Toasts/Toast.vue +13 -1
- package/package.json +1 -1
|
@@ -471,7 +471,7 @@ export default class Select extends Vue {
|
|
|
471
471
|
caret-color: $brand-blue;
|
|
472
472
|
padding: 9px 11px;
|
|
473
473
|
font-size: 15px;
|
|
474
|
-
line-height:
|
|
474
|
+
line-height: 20px;
|
|
475
475
|
width: 100%;
|
|
476
476
|
height: 36px;
|
|
477
477
|
box-sizing: border-box;
|
|
@@ -510,13 +510,13 @@ export default class Select extends Vue {
|
|
|
510
510
|
}
|
|
511
511
|
|
|
512
512
|
&--disabled {
|
|
513
|
-
background: $gray-background;
|
|
514
|
-
border: 1px solid $
|
|
515
|
-
color: $slate
|
|
513
|
+
background-color: $gray-background;
|
|
514
|
+
border: 1px solid rgba($pewter, 0.5);
|
|
515
|
+
color: $slate;
|
|
516
516
|
|
|
517
517
|
&--dark {
|
|
518
|
-
|
|
519
|
-
background-color: $moonlit-ocean;
|
|
518
|
+
color: $steel;
|
|
519
|
+
background-color: rgba($moonlit-ocean, 0.5);
|
|
520
520
|
}
|
|
521
521
|
}
|
|
522
522
|
}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
ref="toast"
|
|
4
4
|
v-dark="isDarkMode"
|
|
5
5
|
class="toast"
|
|
6
|
+
:class="{'toast--right': right}"
|
|
6
7
|
role="alert"
|
|
7
8
|
@mouseenter="clearCloseTimeout"
|
|
8
9
|
@mouseleave="setCloseTimeout"
|
|
@@ -54,6 +55,7 @@ import { dark } from '../../directives'
|
|
|
54
55
|
export default class Toast extends Vue {
|
|
55
56
|
@Prop({ default: true }) showCloseButton!: boolean
|
|
56
57
|
@Prop({ default: false }) isDarkMode!: boolean
|
|
58
|
+
@Prop({ default: false }) right!: boolean
|
|
57
59
|
|
|
58
60
|
closeTimeout: NodeJS.Timeout | null = null
|
|
59
61
|
|
|
@@ -62,7 +64,7 @@ export default class Toast extends Vue {
|
|
|
62
64
|
const toastEl = this.$refs['toast'] as HTMLElement
|
|
63
65
|
|
|
64
66
|
setTimeout(() => {
|
|
65
|
-
toastEl.classList.add(
|
|
67
|
+
toastEl.classList.add(`toast--visible${this.right ? '--right' : ''}`)
|
|
66
68
|
}, 1)
|
|
67
69
|
}
|
|
68
70
|
|
|
@@ -106,6 +108,11 @@ export default class Toast extends Vue {
|
|
|
106
108
|
padding: 0 15px;
|
|
107
109
|
box-sizing: border-box;
|
|
108
110
|
|
|
111
|
+
&--right {
|
|
112
|
+
left: auto;
|
|
113
|
+
right: -100%;
|
|
114
|
+
}
|
|
115
|
+
|
|
109
116
|
@include breakpoint(black-bear) {
|
|
110
117
|
width: 335px;
|
|
111
118
|
}
|
|
@@ -117,6 +124,11 @@ export default class Toast extends Vue {
|
|
|
117
124
|
&--visible {
|
|
118
125
|
transition: all 0.5s ease-out;
|
|
119
126
|
left: 32px;
|
|
127
|
+
|
|
128
|
+
&--right {
|
|
129
|
+
transition: all 0.5s ease-out;
|
|
130
|
+
right: 32px;
|
|
131
|
+
}
|
|
120
132
|
}
|
|
121
133
|
|
|
122
134
|
&--closing {
|