@wizishop/angular-components 0.0.49 → 0.0.50

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.
@@ -118,80 +118,6 @@ $wac-color-success-popup-alert: #6DCC95!default;
118
118
  width: rem(36);
119
119
  height: rem(36);
120
120
  }
121
- .wac-progressBarContent {
122
- position: relative;
123
- width: 100%;
124
- display: block;
125
- .progressBar {
126
- position: relative;
127
- width: 88%;
128
- margin-bottom: 1rem;
129
- progress {
130
- &.progress {
131
- margin-bottom: 0;
132
- height: rem(2);
133
- &::-webkit-progress-value {
134
- transition: width 0.5s ease;
135
- }
136
- }
137
- }
138
- span {
139
- position: absolute;
140
- top: -4px;
141
- height: 11px;
142
- width: 11px;
143
- background-color: $wac-border-color;
144
- border-radius: 50%;
145
- }
146
- .is-danger {
147
- background-color: $wac-primary-button;
148
- &::-webkit-progress-value {
149
- background-color: $wac-primary-button;
150
- }
151
- }
152
- .is-warning {
153
- background-color: $wac-orange-color;
154
- &::-webkit-progress-value {
155
- background-color: $wac-orange-color;
156
- }
157
- }
158
- .is-success {
159
- background-color: $wac-green-color;
160
- &::-webkit-progress-value {
161
- background-color: $wac-green-color;
162
- }
163
- }
164
- }
165
- .size {
166
- display: inline;
167
- color: $wac-color-text-grey;
168
- position: absolute;
169
- right: 0;
170
- top: -9px;
171
- background: $wac-white;
172
- padding-left: 0.875rem;
173
- .is-success {
174
- color: $wac-green-color;
175
- }
176
- .is-warning {
177
- color: $wac-orange-color;
178
- }
179
- .is-danger {
180
- color: $wac-primary-button;
181
- }
182
- > span {
183
- font-size: rem(14) !important;
184
- line-height: 1;
185
- transform: translateY(-3px);
186
- display: inline-block;
187
- letter-spacing: 0;
188
- strong {
189
- letter-spacing: 0;
190
- font-weight: 600;
191
- }
192
- }
193
- }
194
- }
195
121
  .wac-radio {
196
122
  .is-checkradio[type='radio'] {
197
123
  outline: 0 !important;
@@ -320,6 +246,80 @@ $wac-color-success-popup-alert: #6DCC95!default;
320
246
  }
321
247
  }
322
248
  }
249
+ .wac-progressBarContent {
250
+ position: relative;
251
+ width: 100%;
252
+ display: block;
253
+ .progressBar {
254
+ position: relative;
255
+ width: 88%;
256
+ margin-bottom: 1rem;
257
+ progress {
258
+ &.progress {
259
+ margin-bottom: 0;
260
+ height: rem(2);
261
+ &::-webkit-progress-value {
262
+ transition: width 0.5s ease;
263
+ }
264
+ }
265
+ }
266
+ span {
267
+ position: absolute;
268
+ top: -4px;
269
+ height: 11px;
270
+ width: 11px;
271
+ background-color: $wac-border-color;
272
+ border-radius: 50%;
273
+ }
274
+ .is-danger {
275
+ background-color: $wac-primary-button;
276
+ &::-webkit-progress-value {
277
+ background-color: $wac-primary-button;
278
+ }
279
+ }
280
+ .is-warning {
281
+ background-color: $wac-orange-color;
282
+ &::-webkit-progress-value {
283
+ background-color: $wac-orange-color;
284
+ }
285
+ }
286
+ .is-success {
287
+ background-color: $wac-green-color;
288
+ &::-webkit-progress-value {
289
+ background-color: $wac-green-color;
290
+ }
291
+ }
292
+ }
293
+ .size {
294
+ display: inline;
295
+ color: $wac-color-text-grey;
296
+ position: absolute;
297
+ right: 0;
298
+ top: -9px;
299
+ background: $wac-white;
300
+ padding-left: 0.875rem;
301
+ .is-success {
302
+ color: $wac-green-color;
303
+ }
304
+ .is-warning {
305
+ color: $wac-orange-color;
306
+ }
307
+ .is-danger {
308
+ color: $wac-primary-button;
309
+ }
310
+ > span {
311
+ font-size: rem(14) !important;
312
+ line-height: 1;
313
+ transform: translateY(-3px);
314
+ display: inline-block;
315
+ letter-spacing: 0;
316
+ strong {
317
+ letter-spacing: 0;
318
+ font-weight: 600;
319
+ }
320
+ }
321
+ }
322
+ }
323
323
  .wac {
324
324
  &-select-in-text {
325
325
  width: auto;
@@ -554,6 +554,9 @@ $wac-color-success-popup-alert: #6DCC95!default;
554
554
 
555
555
  &.is-bottom {
556
556
  bottom: 0;
557
+ &.small {
558
+ bottom: -70px;
559
+ }
557
560
  }
558
561
  }
559
562
 
@@ -626,9 +629,6 @@ $wac-color-success-popup-alert: #6DCC95!default;
626
629
  }
627
630
  }
628
631
  }
629
- .is-bottom & {
630
- bottom: -30px;
631
- }
632
632
  }
633
633
 
634
634
  &__title {
@@ -1661,174 +1661,87 @@ $wac-color-success-popup-alert: #6DCC95!default;
1661
1661
  }
1662
1662
  }
1663
1663
  }
1664
- .wac-edit-in-place.nwb-wrapper {
1665
- display: inline-block;
1666
- position: relative;
1667
- width: auto;
1668
- min-width: 12px;
1669
- min-height: 1.4em;
1670
-
1671
- input {
1672
- font-size: inherit;
1673
- transition: width 50ms;
1674
- position: absolute;
1675
- top: 0;
1676
- left: -5px;
1677
- width: calc(100% + 16px) !important;
1678
- height: calc(100% + 14px) !important;
1679
- padding: 5px;
1680
- z-index: 1;
1681
- margin: 0;
1682
- outline: none !important;
1683
- border: 1px solid $wac-edit-in-place-border;
1684
- background: inherit;
1685
- transform: translateY(-17%);
1686
- background-color: $wac-edit-in-place-background;
1687
-
1688
- &.nwb-editable {
1689
- text-decoration: none;
1690
- color: inherit;
1691
- border: none;
1692
- cursor: pointer;
1693
- height: 26px;
1694
- }
1695
-
1696
- &.nwb-editing {
1697
- color: $wac-edit-in-place-border;
1698
- }
1699
- }
1700
-
1701
- div.select {
1702
- position: absolute;
1703
- left: 0;
1704
-
1705
- &:before,
1706
- &:after {
1707
- display: block;
1708
- position: absolute;
1709
- height: 10px;
1710
- width: 10px;
1711
- }
1712
- }
1713
-
1714
- span.nwb-loader {
1715
- &.nwb-is-loading {
1716
- z-index: 2;
1717
- opacity: 1;
1718
- position: absolute;
1719
- top: -7px;
1720
- left: -7px;
1721
- width: calc(100% + 16px) !important;
1722
- height: calc(100% + 14px) !important;
1723
- min-width: 12px;
1724
- min-height: 1em;
1725
- margin: 0;
1726
- background-size: auto 70%;
1727
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30px' height='30px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-ellipsis' style='background: none;'%3E%3C!--circle(cx='16',cy='50',r='10')--%3E%3Ccircle cx='84' cy='50' r='0' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='10;0;0;0;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='cx' values='84;84;84;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3Ccircle cx='28.6338' cy='50' r='10' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-1s'/%3E%3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-1s'/%3E%3C/circle%3E%3Ccircle cx='16' cy='50' r='3.71582' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/circle%3E%3Ccircle cx='84' cy='50' r='6.28418' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3Ccircle cx='62.6338' cy='50' r='10' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;0;10;10;10' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='cx' values='16;16;16;50;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3C/svg%3E");
1728
- background-repeat: no-repeat;
1729
- background-position: center center;
1730
- }
1731
- }
1732
- span {
1733
- color: inherit;
1734
- font-weight: 500;
1735
- &:not(.nwb-loader) {
1736
- display: inline-block;
1737
- min-width: 12px;
1738
- }
1739
- &.nwb-editing {
1740
- visibility: hidden;
1741
- }
1742
-
1743
- &.nwb-is-loading {
1744
- text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.6);
1745
- color: rgba(0, 0, 0, 0.4);
1746
- opacity: 0.25;
1747
- }
1748
-
1749
- &.nwbSelect {
1750
- cursor: pointer;
1751
- }
1752
- }
1753
- }
1754
-
1755
- .wac-edit-in-place.nwb-wrapper--editable::after {
1756
- position: absolute;
1757
- content: '';
1758
- border-bottom: dashed 1px $wac-primary;
1664
+ .wac-filters {
1759
1665
  width: 100%;
1760
- bottom: 0;
1761
- left: 0;
1762
- }
1763
-
1764
- .wac-edit-in-place.nwbSelect {
1765
- &__container {
1666
+ &__wrapper {
1667
+ width: 100%;
1766
1668
  display: flex;
1767
- flex-direction: column;
1768
- position: absolute;
1769
- white-space: nowrap;
1770
- border: solid 1px rgba(0, 0, 0, 0.2);
1771
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
1772
- border-radius: 3px;
1773
- top: calc(100% + 7px);
1774
-
1775
- &::before {
1776
- position: absolute;
1777
- top: -7px;
1778
- left: 9px;
1779
- content: '';
1780
- border-left: 7px solid transparent;
1781
- border-right: 7px solid transparent;
1782
- border-bottom: 7px solid $wac-edit-in-place-before-border-bottom;
1783
- border-bottom-color: rgba(0, 0, 0, 0.2);
1784
- display: inline-block;
1669
+ flex-wrap: wrap;
1670
+ justify-content: flex-start;
1671
+ align-items: center;
1672
+ align-content: center;
1673
+ button {
1674
+ position: relative;
1675
+ width: auto;
1676
+ display: flex;
1677
+ align-items: center;
1678
+ font-size: rem(14);
1679
+ line-height: rem(16);
1680
+ font-weight: 500;
1681
+ color: $wac-second-color;
1682
+ border: 1px solid $wac-border-light;
1683
+ border-radius: 3px;
1684
+ background: transparent;
1685
+ box-shadow: none;
1686
+ transition: 0.3s ease;
1687
+ cursor: pointer;
1688
+ padding: 12px 20px;
1689
+ .event {
1690
+ position: absolute;
1691
+ top: 0;
1692
+ left: 0;
1693
+ width: 100%;
1694
+ height: 100%;
1695
+ z-index: 2;
1696
+ display: inline-block;
1697
+ }
1698
+ i {
1699
+ color: $wac-main-text;
1700
+ font-size: rem(14);
1701
+ margin: 0 rem(10) 0 0;
1702
+ }
1703
+ &:hover,
1704
+ &:focus,
1705
+ &.active {
1706
+ border-color: $wac-wizishop-blue;
1707
+ color: $wac-main-text;
1708
+ }
1709
+ &:not(:last-child) {
1710
+ margin: 0 rem(10) 0 0;
1711
+ }
1785
1712
  }
1786
-
1787
- &::after {
1788
- position: absolute;
1789
- top: -6px;
1790
- left: 10px;
1791
- content: '';
1792
- border-left: 6px solid transparent;
1793
- border-right: 6px solid transparent;
1794
- border-bottom: 6px solid $wac-white;
1713
+ > span {
1714
+ position: relative;
1715
+ color: $wac-link-color;
1795
1716
  display: inline-block;
1796
- }
1797
-
1798
- &__item {
1799
- border: none;
1800
- padding: 8px 10px;
1801
- background-color: $wac-white;
1717
+ transition: 0.3s ease;
1718
+ font-size: rem(14);
1719
+ line-height: rem(16);
1720
+ margin: 0 0 0 rem(30);
1802
1721
  cursor: pointer;
1803
- transition: all 0.3s ease-in-out;
1804
- z-index: 3;
1805
- font-size: rem(12);
1806
- text-align: left;
1807
- border-radius: 0;
1808
-
1809
- &:hover {
1810
- background-color: darken($wac-white, 10%);
1811
- color: $wac-main-text;
1812
- transition: all 0.3s ease-in-out;
1722
+ z-index: 1;
1723
+ &:before {
1724
+ content: '';
1725
+ display: block;
1726
+ position: absolute;
1727
+ width: 100%;
1728
+ max-width: 0;
1729
+ height: 1px;
1730
+ border-radius: 3px;
1731
+ background-color: darken($wac-link-color, 15%);
1732
+ left: 0;
1733
+ bottom: -2px;
1734
+ transition: 0.3s ease;
1813
1735
  }
1814
-
1815
- &--selected,
1816
- &--selected:hover {
1817
- background-color: $wac-wizishop-blue;
1818
- color: $wac-white;
1819
- transition: all 0.3s ease-in-out;
1736
+ &:hover,
1737
+ &:focus {
1738
+ color: darken($wac-link-color, 15%);
1739
+ &:before {
1740
+ max-width: 100%;
1741
+ }
1820
1742
  }
1821
1743
  }
1822
1744
  }
1823
-
1824
- &__background {
1825
- position: fixed;
1826
- top: 0;
1827
- left: 0;
1828
- width: 100vw;
1829
- height: 100vh;
1830
- z-index: 2;
1831
- }
1832
1745
  }
1833
1746
  .wac-tab {
1834
1747
  &__wrapper {
@@ -4177,87 +4090,174 @@ h4.wac-h4 {
4177
4090
  }
4178
4091
  }
4179
4092
  }
4180
- .wac-filters {
4093
+ .wac-edit-in-place.nwb-wrapper {
4094
+ display: inline-block;
4095
+ position: relative;
4096
+ width: auto;
4097
+ min-width: 12px;
4098
+ min-height: 1.4em;
4099
+
4100
+ input {
4101
+ font-size: inherit;
4102
+ transition: width 50ms;
4103
+ position: absolute;
4104
+ top: 0;
4105
+ left: -5px;
4106
+ width: calc(100% + 16px) !important;
4107
+ height: calc(100% + 14px) !important;
4108
+ padding: 5px;
4109
+ z-index: 1;
4110
+ margin: 0;
4111
+ outline: none !important;
4112
+ border: 1px solid $wac-edit-in-place-border;
4113
+ background: inherit;
4114
+ transform: translateY(-17%);
4115
+ background-color: $wac-edit-in-place-background;
4116
+
4117
+ &.nwb-editable {
4118
+ text-decoration: none;
4119
+ color: inherit;
4120
+ border: none;
4121
+ cursor: pointer;
4122
+ height: 26px;
4123
+ }
4124
+
4125
+ &.nwb-editing {
4126
+ color: $wac-edit-in-place-border;
4127
+ }
4128
+ }
4129
+
4130
+ div.select {
4131
+ position: absolute;
4132
+ left: 0;
4133
+
4134
+ &:before,
4135
+ &:after {
4136
+ display: block;
4137
+ position: absolute;
4138
+ height: 10px;
4139
+ width: 10px;
4140
+ }
4141
+ }
4142
+
4143
+ span.nwb-loader {
4144
+ &.nwb-is-loading {
4145
+ z-index: 2;
4146
+ opacity: 1;
4147
+ position: absolute;
4148
+ top: -7px;
4149
+ left: -7px;
4150
+ width: calc(100% + 16px) !important;
4151
+ height: calc(100% + 14px) !important;
4152
+ min-width: 12px;
4153
+ min-height: 1em;
4154
+ margin: 0;
4155
+ background-size: auto 70%;
4156
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30px' height='30px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-ellipsis' style='background: none;'%3E%3C!--circle(cx='16',cy='50',r='10')--%3E%3Ccircle cx='84' cy='50' r='0' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='10;0;0;0;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='cx' values='84;84;84;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3Ccircle cx='28.6338' cy='50' r='10' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-1s'/%3E%3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-1s'/%3E%3C/circle%3E%3Ccircle cx='16' cy='50' r='3.71582' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/circle%3E%3Ccircle cx='84' cy='50' r='6.28418' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3Ccircle cx='62.6338' cy='50' r='10' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;0;10;10;10' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='cx' values='16;16;16;50;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3C/svg%3E");
4157
+ background-repeat: no-repeat;
4158
+ background-position: center center;
4159
+ }
4160
+ }
4161
+ span {
4162
+ color: inherit;
4163
+ font-weight: 500;
4164
+ &:not(.nwb-loader) {
4165
+ display: inline-block;
4166
+ min-width: 12px;
4167
+ }
4168
+ &.nwb-editing {
4169
+ visibility: hidden;
4170
+ }
4171
+
4172
+ &.nwb-is-loading {
4173
+ text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.6);
4174
+ color: rgba(0, 0, 0, 0.4);
4175
+ opacity: 0.25;
4176
+ }
4177
+
4178
+ &.nwbSelect {
4179
+ cursor: pointer;
4180
+ }
4181
+ }
4182
+ }
4183
+
4184
+ .wac-edit-in-place.nwb-wrapper--editable::after {
4185
+ position: absolute;
4186
+ content: '';
4187
+ border-bottom: dashed 1px $wac-primary;
4181
4188
  width: 100%;
4182
- &__wrapper {
4183
- width: 100%;
4189
+ bottom: 0;
4190
+ left: 0;
4191
+ }
4192
+
4193
+ .wac-edit-in-place.nwbSelect {
4194
+ &__container {
4184
4195
  display: flex;
4185
- flex-wrap: wrap;
4186
- justify-content: flex-start;
4187
- align-items: center;
4188
- align-content: center;
4189
- button {
4190
- position: relative;
4191
- width: auto;
4192
- display: flex;
4193
- align-items: center;
4194
- font-size: rem(14);
4195
- line-height: rem(16);
4196
- font-weight: 500;
4197
- color: $wac-second-color;
4198
- border: 1px solid $wac-border-light;
4199
- border-radius: 3px;
4200
- background: transparent;
4201
- box-shadow: none;
4202
- transition: 0.3s ease;
4203
- cursor: pointer;
4204
- padding: 12px 20px;
4205
- .event {
4206
- position: absolute;
4207
- top: 0;
4208
- left: 0;
4209
- width: 100%;
4210
- height: 100%;
4211
- z-index: 2;
4212
- display: inline-block;
4213
- }
4214
- i {
4215
- color: $wac-main-text;
4216
- font-size: rem(14);
4217
- margin: 0 rem(10) 0 0;
4218
- }
4219
- &:hover,
4220
- &:focus,
4221
- &.active {
4222
- border-color: $wac-wizishop-blue;
4223
- color: $wac-main-text;
4224
- }
4225
- &:not(:last-child) {
4226
- margin: 0 rem(10) 0 0;
4227
- }
4196
+ flex-direction: column;
4197
+ position: absolute;
4198
+ white-space: nowrap;
4199
+ border: solid 1px rgba(0, 0, 0, 0.2);
4200
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
4201
+ border-radius: 3px;
4202
+ top: calc(100% + 7px);
4203
+
4204
+ &::before {
4205
+ position: absolute;
4206
+ top: -7px;
4207
+ left: 9px;
4208
+ content: '';
4209
+ border-left: 7px solid transparent;
4210
+ border-right: 7px solid transparent;
4211
+ border-bottom: 7px solid $wac-edit-in-place-before-border-bottom;
4212
+ border-bottom-color: rgba(0, 0, 0, 0.2);
4213
+ display: inline-block;
4228
4214
  }
4229
- > span {
4230
- position: relative;
4231
- color: $wac-link-color;
4215
+
4216
+ &::after {
4217
+ position: absolute;
4218
+ top: -6px;
4219
+ left: 10px;
4220
+ content: '';
4221
+ border-left: 6px solid transparent;
4222
+ border-right: 6px solid transparent;
4223
+ border-bottom: 6px solid $wac-white;
4232
4224
  display: inline-block;
4233
- transition: 0.3s ease;
4234
- font-size: rem(14);
4235
- line-height: rem(16);
4236
- margin: 0 0 0 rem(30);
4225
+ }
4226
+
4227
+ &__item {
4228
+ border: none;
4229
+ padding: 8px 10px;
4230
+ background-color: $wac-white;
4237
4231
  cursor: pointer;
4238
- z-index: 1;
4239
- &:before {
4240
- content: '';
4241
- display: block;
4242
- position: absolute;
4243
- width: 100%;
4244
- max-width: 0;
4245
- height: 1px;
4246
- border-radius: 3px;
4247
- background-color: darken($wac-link-color, 15%);
4248
- left: 0;
4249
- bottom: -2px;
4250
- transition: 0.3s ease;
4232
+ transition: all 0.3s ease-in-out;
4233
+ z-index: 3;
4234
+ font-size: rem(12);
4235
+ text-align: left;
4236
+ border-radius: 0;
4237
+
4238
+ &:hover {
4239
+ background-color: darken($wac-white, 10%);
4240
+ color: $wac-main-text;
4241
+ transition: all 0.3s ease-in-out;
4251
4242
  }
4252
- &:hover,
4253
- &:focus {
4254
- color: darken($wac-link-color, 15%);
4255
- &:before {
4256
- max-width: 100%;
4257
- }
4243
+
4244
+ &--selected,
4245
+ &--selected:hover {
4246
+ background-color: $wac-wizishop-blue;
4247
+ color: $wac-white;
4248
+ transition: all 0.3s ease-in-out;
4258
4249
  }
4259
4250
  }
4260
4251
  }
4252
+
4253
+ &__background {
4254
+ position: fixed;
4255
+ top: 0;
4256
+ left: 0;
4257
+ width: 100vw;
4258
+ height: 100vh;
4259
+ z-index: 2;
4260
+ }
4261
4261
  }
4262
4262
 
4263
4263
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wizishop/angular-components",
3
- "version": "0.0.49",
3
+ "version": "0.0.50",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^11.2.12",
6
6
  "@angular/core": "^11.2.12",