@broxus/react-uikit 0.6.4 → 0.6.6

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.
@@ -530,6 +530,43 @@
530
530
  }
531
531
 
532
532
 
533
+ /* Close
534
+ * Adopts `uk-close`
535
+ ========================================================================== */
536
+
537
+ .uk-drawer-close {
538
+ --icon-size: 24px;
539
+
540
+ box-sizing: content-box;
541
+ padding: var(--drawer-close-padding);
542
+ position: absolute;
543
+ right: var(--drawer-close-position);
544
+ top: var(--drawer-close-position);
545
+ z-index: var(--drawer-z-index);
546
+ @if mixin-exists(hook-drawer-close) {
547
+ @include hook-drawer-close;
548
+ }
549
+ }
550
+
551
+ /*
552
+ * Remove margin from adjacent element
553
+ */
554
+
555
+ .uk-drawer-close:first-child + * {
556
+ margin-top: 0;
557
+ }
558
+
559
+ /*
560
+ * Hover
561
+ */
562
+
563
+ .uk-drawer-close:hover {
564
+ @if mixin-exists(hook-drawer-close-hover) {
565
+ @include hook-drawer-close-hover;
566
+ }
567
+ }
568
+
569
+
533
570
  // Vars
534
571
  // ========================================================================
535
572
 
@@ -543,4 +580,6 @@
543
580
  --drawer-mask-background: #{$drawer-mask-background};
544
581
  --drawer-z-index: calc(var(--global-z-index) + 30);
545
582
  --drawer-transition-duration: var(--transition-medium-fast-duration);
583
+ --drawer-close-position: var(--global-small-margin);
584
+ --drawer-close-padding: #{$drawer-close-padding};
546
585
  }
@@ -371,6 +371,6 @@
371
371
  --modal-close-padding: #{$modal-close-padding};
372
372
  --modal-close-outside-position: #{$modal-close-outside-position};
373
373
  --modal-close-outside-translate: #{$modal-close-outside-translate};
374
- --modal-close-outside-color: lighten($global-inverse-color, 20%);
374
+ --modal-close-outside-color: #{$modal-close-outside-color};
375
375
  --modal-close-outside-hover-color: var(--global-inverse-color);
376
376
  }
@@ -688,6 +688,9 @@ $drawer-mask-background: rgb(0 0 0 / 30%)
688
688
  $drawer-mask-background: rgb(0 0 0 / 30%) !default;
689
689
  $drawer-z-index: $global-z-index + 30 !default;
690
690
  $drawer-transition-duration: $transition-medium-fast-duration !default;
691
+ $drawer-close-position: $global-small-margin !default;
692
+ $drawer-close-padding: 5px !default;
693
+
691
694
 
692
695
  // Drop
693
696
  // ========================================================================
@@ -530,6 +530,43 @@
530
530
  }
531
531
 
532
532
 
533
+ /* Close
534
+ * Adopts `uk-close`
535
+ ========================================================================== */
536
+
537
+ .uk-drawer-close {
538
+ --icon-size: 24px;
539
+
540
+ box-sizing: content-box;
541
+ padding: var(--drawer-close-padding);
542
+ position: absolute;
543
+ right: var(--drawer-close-position);
544
+ top: var(--drawer-close-position);
545
+ z-index: var(--drawer-z-index);
546
+ @if mixin-exists(hook-drawer-close) {
547
+ @include hook-drawer-close;
548
+ }
549
+ }
550
+
551
+ /*
552
+ * Remove margin from adjacent element
553
+ */
554
+
555
+ .uk-drawer-close:first-child + * {
556
+ margin-top: 0;
557
+ }
558
+
559
+ /*
560
+ * Hover
561
+ */
562
+
563
+ .uk-drawer-close:hover {
564
+ @if mixin-exists(hook-drawer-close-hover) {
565
+ @include hook-drawer-close-hover;
566
+ }
567
+ }
568
+
569
+
533
570
  // Vars
534
571
  // ========================================================================
535
572
 
@@ -543,4 +580,6 @@
543
580
  --drawer-mask-background: #{$drawer-mask-background};
544
581
  --drawer-z-index: calc(var(--global-z-index) + 30);
545
582
  --drawer-transition-duration: var(--transition-medium-fast-duration);
583
+ --drawer-close-position: var(--global-small-margin);
584
+ --drawer-close-padding: #{$drawer-close-padding};
546
585
  }
@@ -371,6 +371,6 @@
371
371
  --modal-close-padding: #{$modal-close-padding};
372
372
  --modal-close-outside-position: #{$modal-close-outside-position};
373
373
  --modal-close-outside-translate: #{$modal-close-outside-translate};
374
- --modal-close-outside-color: lighten($global-inverse-color, 20%);
374
+ --modal-close-outside-color: #{$modal-close-outside-color};
375
375
  --modal-close-outside-hover-color: var(--global-inverse-color);
376
376
  }
@@ -688,6 +688,9 @@ $drawer-mask-background: rgb(0 0 0 / 30%)
688
688
  $drawer-mask-background: rgb(0 0 0 / 30%) !default;
689
689
  $drawer-z-index: $global-z-index + 30 !default;
690
690
  $drawer-transition-duration: $transition-medium-fast-duration !default;
691
+ $drawer-close-position: $global-small-margin !default;
692
+ $drawer-close-padding: 5px !default;
693
+
691
694
 
692
695
  // Drop
693
696
  // ========================================================================
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@broxus/react-uikit",
3
- "version": "0.6.4",
3
+ "version": "0.6.6",
4
4
  "description": "React-based UIkit library",
5
5
  "license": "AGPL-3.0",
6
6
  "keywords": [
@@ -78,5 +78,9 @@
78
78
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
79
79
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
80
80
  },
81
- "gitHead": "82d58886de1fec6f7bc630598c08b298b226c050"
81
+ "gitHead": "9ee38104d6894e90c11efdd3855d7ea9e9495798",
82
+ "sideEffects": [
83
+ "*.css",
84
+ "*.scss"
85
+ ]
82
86
  }