uikit-reset 1.1.3 → 2.1.0

data/vendor/assets/stylesheets/uikit-reset.scss

@@ -1,4 +1,4 @@
-/*! UIkit 3.0.0 | http://www.getuikit.com | (c) 2014 - 2018 YOOtheme | MIT License */
+/*! UIkit 3.1.0 | http://www.getuikit.com | (c) 2014 - 2018 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -263,7 +263,12 @@ h4,
 h5,
 .uk-h5,
 h6,
-.uk-h6 {
+.uk-h6,
+.uk-heading-small,
+.uk-heading-medium,
+.uk-heading-large,
+.uk-heading-xlarge,
+.uk-heading-2xlarge {
   margin: 0 0 20px 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-weight: normal;
@@ -283,7 +288,12 @@ h6,
 *+h5,
 *+.uk-h5,
 *+h6,
-*+.uk-h6 {
+*+.uk-h6,
+*+.uk-heading-small,
+*+.uk-heading-medium,
+*+.uk-heading-large,
+*+.uk-heading-xlarge,
+*+.uk-heading-2xlarge {
   margin-top: 40px;
 }
 
@@ -575,7 +585,75 @@ a.uk-link-reset:hover,
 /* ========================================================================
    Component: Heading
  ========================================================================== */
+.uk-heading-small {
+  font-size: 2.6rem;
+  line-height: 1.2;
+}
+
+.uk-heading-medium {
+  font-size: 2.8875rem;
+  line-height: 1.1;
+}
+
+.uk-heading-large {
+  font-size: 3.4rem;
+  line-height: 1.1;
+}
+
+.uk-heading-xlarge {
+  font-size: 4rem;
+  line-height: 1;
+}
+
+.uk-heading-2xlarge {
+  font-size: 6rem;
+  line-height: 1;
+}
+
+/* Tablet Landscape and bigger */
+@media (min-width: 960px) {
+  .uk-heading-small {
+    font-size: 3.25rem;
+  }
+
+  .uk-heading-medium {
+    font-size: 3.5rem;
+  }
+
+  .uk-heading-large {
+    font-size: 4rem;
+  }
+
+  .uk-heading-xlarge {
+    font-size: 6rem;
+  }
+
+  .uk-heading-2xlarge {
+    font-size: 8rem;
+  }
+}
+
+/* Laptop and bigger */
+@media (min-width: 1200px) {
+  .uk-heading-medium {
+    font-size: 4rem;
+  }
+
+  .uk-heading-large {
+    font-size: 6rem;
+  }
+
+  .uk-heading-xlarge {
+    font-size: 8rem;
+  }
+
+  .uk-heading-2xlarge {
+    font-size: 11rem;
+  }
+}
+
 /* Primary
+   Deprecated: Use `uk-heading-medium` instead
  ========================================================================== */
 .uk-heading-primary {
   font-size: 3rem;
@@ -598,6 +676,7 @@ a.uk-link-reset:hover,
 }
 
 /* Hero
+   Deprecated: Use `uk-heading-xlarge` instead
  ========================================================================== */
 .uk-heading-hero {
   font-size: 4rem;
@@ -623,8 +702,8 @@ a.uk-link-reset:hover,
 /* Divider
  ========================================================================== */
 .uk-heading-divider {
-  padding-bottom: 10px;
-  border-bottom: 1px solid #e5e5e5;
+  padding-bottom: calc(10px + 0.1em);
+  border-bottom: calc(0.2px + 0.05em) solid #e5e5e5;
 }
 
 /* Bullet
@@ -647,9 +726,9 @@ a.uk-link-reset:hover,
   top: calc(-0.1 * 1em);
   vertical-align: middle;
   /* 3 */
-  height: 0.9em;
-  margin-right: 10px;
-  border-left: 5px solid #e5e5e5;
+  height: calc(4px + 0.7em);
+  margin-right: calc(5px + 0.2em);
+  border-left: calc(5px + 0.1em) solid #e5e5e5;
 }
 
 /* Line
@@ -679,21 +758,21 @@ a.uk-link-reset:hover,
   content: "";
   /* 1 */
   position: absolute;
-  top: calc(50% - (1px / 2));
+  top: calc(50% - (calc(0.2px + 0.05em) / 2));
   /* 2 */
   width: 2000px;
   /* 3 */
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: calc(0.2px + 0.05em) solid #e5e5e5;
 }
 
 .uk-heading-line> ::before {
   right: 100%;
-  margin-right: 0.6em;
+  margin-right: calc(5px + 0.3em);
 }
 
 .uk-heading-line> ::after {
   left: 100%;
-  margin-left: 0.6em;
+  margin-left: calc(5px + 0.3em);
 }
 
 /* ========================================================================
@@ -5979,6 +6058,7 @@ ul.uk-nav-sub {
  * 5. Responsiveness
  *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
  *    Using `vh` and `vw` to make responsive image work in IE11
+ * 6. Suppress outline on focus
  */
 .uk-lightbox-items>* {
   /* 1 */
@@ -6003,6 +6083,11 @@ ul.uk-nav-sub {
   max-height: 100vh;
 }
 
+/* 6 */
+.uk-slideshow-items> :focus {
+  outline: none;
+}
+
 .uk-lightbox-items>*> :not(iframe) {
   width: auto;
   height: auto;
@@ -6112,6 +6197,7 @@ ul.uk-nav-sub {
  * 3. Clip child elements, e.g. for `uk-cover`
  * 4. Optimize animation
  * 5. Disable horizontal panning gestures in IE11 and Edge
+ * 6. Suppress outline on focus
  */
 .uk-slideshow-items>* {
   /* 1 */
@@ -6129,6 +6215,11 @@ ul.uk-nav-sub {
   touch-action: pan-y;
 }
 
+/* 6 */
+.uk-slideshow-items> :focus {
+  outline: none;
+}
+
 /*
  * Hide not active items
  */
@@ -6194,6 +6285,7 @@ ul.uk-nav-sub {
  * 1. Let items take content dimensions (0 0 auto)
  * 2. Create position context
  * 3. Disable horizontal panning gestures in IE11 and Edge
+ * 4. Suppress outline on focus
  */
 .uk-slider-items>* {
   /* 1 */
@@ -6204,6 +6296,11 @@ ul.uk-nav-sub {
   touch-action: pan-y;
 }
 
+/* 4 */
+.uk-slider-items> :focus {
+  outline: none;
+}
+
 /* ========================================================================
    Component: Sticky
  ========================================================================== */
@@ -6539,7 +6636,7 @@ ul.uk-nav-sub {
 }
 
 :root {
-  --uk-leader-fill-content: .;
+  --uk-leader-fill-content: '.';
 }
 
 /* ========================================================================
@@ -6991,37 +7088,6 @@ ul.uk-nav-sub {
   animation-fill-mode: both;
 }
 
-/* Direction modifier
- ========================================================================== */
-.uk-animation-reverse {
-  animation-direction: reverse;
-  animation-timing-function: ease-in;
-}
-
-/* Toggle (Hover + Focus)
-========================================================================== */
-/*
- * The toggle is triggered on touch devices using `:focus` and tabindex
- */
-.uk-animation-toggle:not(:hover):not(:focus) [class*='uk-animation-'] {
-  animation-name: none;
-}
-
-/*
- * 1. Prevent tab highlighting on iOS.
- */
-.uk-animation-toggle {
-  /* 1 */
-  -webkit-tap-highlight-color: transparent;
-}
-
-/*
- * Remove outline for `tabindex`
- */
-.uk-animation-toggle:focus {
-  outline: none;
-}
-
 /* Animations
  ========================================================================== */
 /*
@@ -7116,12 +7182,56 @@ ul.uk-nav-sub {
   animation-name: uk-shake;
 }
 
+/*
+ * SVG Stroke
+ * The `--uk-animation-stroke` custom property contains the longest path length.
+ * Set it manually or use `uk-svg="stroke-animation: true"` to set it automatically.
+ * All strokes are animated by the same pace and doesn't end simultaneously.
+ * To end simultaneously, `pathLength="1"` could be used, but it's not working in Safari yet.
+ */
+.uk-animation-stroke {
+  animation-name: uk-stroke;
+  stroke-dasharray: var(--uk-animation-stroke);
+  animation-duration: 2s;
+}
+
+/* Direction modifier
+ ========================================================================== */
+.uk-animation-reverse {
+  animation-direction: reverse;
+  animation-timing-function: ease-in;
+}
+
 /* Duration modifier
  ========================================================================== */
 .uk-animation-fast {
   animation-duration: 0.1s;
 }
 
+/* Toggle (Hover + Focus)
+========================================================================== */
+/*
+ * The toggle is triggered on touch devices using `:focus` and tabindex
+ */
+.uk-animation-toggle:not(:hover):not(:focus) [class*='uk-animation-'] {
+  animation-name: none;
+}
+
+/*
+ * 1. Prevent tab highlighting on iOS.
+ */
+.uk-animation-toggle {
+  /* 1 */
+  -webkit-tap-highlight-color: transparent;
+}
+
+/*
+ * Remove outline for `tabindex`
+ */
+.uk-animation-toggle:focus {
+  outline: none;
+}
+
 /* Keyframes used by animation classes
  ========================================================================== */
 /*
@@ -7407,6 +7517,19 @@ ul.uk-nav-sub {
   }
 }
 
+/*
+ * Stroke
+ */
+@keyframes uk-stroke {
+  0% {
+    stroke-dashoffset: var(--uk-animation-stroke);
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
 /* ========================================================================
    Component: Width
  ========================================================================== */
@@ -8171,6 +8294,10 @@ ul.uk-nav-sub {
   color: #1e87f0 !important;
 }
 
+.uk-text-secondary {
+  color: #222 !important;
+}
+
 .uk-text-success {
   color: #32d296 !important;
 }
@@ -9891,7 +10018,8 @@ iframe.uk-cover {
   margin-bottom: 0 !important;
 }
 
-.uk-margin-remove-adjacent+* {
+.uk-margin-remove-adjacent+*,
+.uk-margin-remove-first-child> :first-child {
   margin-top: 0 !important;
 }
 
@@ -10059,7 +10187,6 @@ iframe.uk-cover {
   left: 50%;
   transform: translate(-50%, -50%);
   /* 1 */
-  width: -moz-max-content;
   width: max-content;
   max-width: 100%;
   box-sizing: border-box;
@@ -10082,13 +10209,11 @@ iframe.uk-cover {
 
 .uk-position-center-left-out {
   right: 100%;
-  width: -moz-max-content;
   width: max-content;
 }
 
 .uk-position-center-right-out {
   left: 100%;
-  width: -moz-max-content;
   width: max-content;
 }
 
@@ -10098,7 +10223,6 @@ iframe.uk-cover {
   left: 50%;
   transform: translateX(-50%);
   /* 1 */
-  width: -moz-max-content;
   width: max-content;
   max-width: 100%;
   box-sizing: border-box;
@@ -10280,14 +10404,13 @@ iframe.uk-cover {
 
 /*
  * Scale
- * Note: Using `scale3d` for better image rendering
  */
 .uk-transition-scale-up {
-  transform: scale3d(1, 1, 1);
+  transform: scale(1, 1);
 }
 
 .uk-transition-scale-down {
-  transform: scale3d(1.1, 1.1, 1);
+  transform: scale(1.1, 1.1);
 }
 
 /* Show */
@@ -10295,14 +10418,14 @@ iframe.uk-cover {
 .uk-transition-toggle:focus .uk-transition-scale-up,
 .uk-transition-active.uk-active .uk-transition-scale-up {
   opacity: 1;
-  transform: scale3d(1.1, 1.1, 1);
+  transform: scale(1.1, 1.1);
 }
 
 .uk-transition-toggle:hover .uk-transition-scale-down,
 .uk-transition-toggle:focus .uk-transition-scale-down,
 .uk-transition-active.uk-active .uk-transition-scale-down {
   opacity: 1;
-  transform: scale3d(1, 1, 1);
+  transform: scale(1, 1);
 }
 
 /*
@@ -10661,6 +10784,11 @@ iframe.uk-cover {
 .uk-light .uk-h5,
 .uk-light h6,
 .uk-light .uk-h6,
+.uk-light .uk-heading-small,
+.uk-light .uk-heading-medium,
+.uk-light .uk-heading-large,
+.uk-light .uk-heading-xlarge,
+.uk-light .uk-heading-2xlarge,
 .uk-section-primary:not(.uk-preserve-color) h1,
 .uk-section-primary:not(.uk-preserve-color) .uk-h1,
 .uk-section-primary:not(.uk-preserve-color) h2,
@@ -10673,6 +10801,11 @@ iframe.uk-cover {
 .uk-section-primary:not(.uk-preserve-color) .uk-h5,
 .uk-section-primary:not(.uk-preserve-color) h6,
 .uk-section-primary:not(.uk-preserve-color) .uk-h6,
+.uk-section-primary:not(.uk-preserve-color) .uk-heading-small,
+.uk-section-primary:not(.uk-preserve-color) .uk-heading-medium,
+.uk-section-primary:not(.uk-preserve-color) .uk-heading-large,
+.uk-section-primary:not(.uk-preserve-color) .uk-heading-xlarge,
+.uk-section-primary:not(.uk-preserve-color) .uk-heading-2xlarge,
 .uk-section-secondary:not(.uk-preserve-color) h1,
 .uk-section-secondary:not(.uk-preserve-color) .uk-h1,
 .uk-section-secondary:not(.uk-preserve-color) h2,
@@ -10685,6 +10818,11 @@ iframe.uk-cover {
 .uk-section-secondary:not(.uk-preserve-color) .uk-h5,
 .uk-section-secondary:not(.uk-preserve-color) h6,
 .uk-section-secondary:not(.uk-preserve-color) .uk-h6,
+.uk-section-secondary:not(.uk-preserve-color) .uk-heading-small,
+.uk-section-secondary:not(.uk-preserve-color) .uk-heading-medium,
+.uk-section-secondary:not(.uk-preserve-color) .uk-heading-large,
+.uk-section-secondary:not(.uk-preserve-color) .uk-heading-xlarge,
+.uk-section-secondary:not(.uk-preserve-color) .uk-heading-2xlarge,
 .uk-tile-primary:not(.uk-preserve-color) h1,
 .uk-tile-primary:not(.uk-preserve-color) .uk-h1,
 .uk-tile-primary:not(.uk-preserve-color) h2,
@@ -10697,6 +10835,11 @@ iframe.uk-cover {
 .uk-tile-primary:not(.uk-preserve-color) .uk-h5,
 .uk-tile-primary:not(.uk-preserve-color) h6,
 .uk-tile-primary:not(.uk-preserve-color) .uk-h6,
+.uk-tile-primary:not(.uk-preserve-color) .uk-heading-small,
+.uk-tile-primary:not(.uk-preserve-color) .uk-heading-medium,
+.uk-tile-primary:not(.uk-preserve-color) .uk-heading-large,
+.uk-tile-primary:not(.uk-preserve-color) .uk-heading-xlarge,
+.uk-tile-primary:not(.uk-preserve-color) .uk-heading-2xlarge,
 .uk-tile-secondary:not(.uk-preserve-color) h1,
 .uk-tile-secondary:not(.uk-preserve-color) .uk-h1,
 .uk-tile-secondary:not(.uk-preserve-color) h2,
@@ -10709,6 +10852,11 @@ iframe.uk-cover {
 .uk-tile-secondary:not(.uk-preserve-color) .uk-h5,
 .uk-tile-secondary:not(.uk-preserve-color) h6,
 .uk-tile-secondary:not(.uk-preserve-color) .uk-h6,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-small,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-medium,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-large,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-xlarge,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-2xlarge,
 .uk-card-primary.uk-card-body h1,
 .uk-card-primary.uk-card-body .uk-h1,
 .uk-card-primary.uk-card-body h2,
@@ -10721,6 +10869,11 @@ iframe.uk-cover {
 .uk-card-primary.uk-card-body .uk-h5,
 .uk-card-primary.uk-card-body h6,
 .uk-card-primary.uk-card-body .uk-h6,
+.uk-card-primary.uk-card-body .uk-heading-small,
+.uk-card-primary.uk-card-body .uk-heading-medium,
+.uk-card-primary.uk-card-body .uk-heading-large,
+.uk-card-primary.uk-card-body .uk-heading-xlarge,
+.uk-card-primary.uk-card-body .uk-heading-2xlarge,
 .uk-card-primary> :not([class*='uk-card-media']) h1,
 .uk-card-primary> :not([class*='uk-card-media']) .uk-h1,
 .uk-card-primary> :not([class*='uk-card-media']) h2,
@@ -10733,6 +10886,11 @@ iframe.uk-cover {
 .uk-card-primary> :not([class*='uk-card-media']) .uk-h5,
 .uk-card-primary> :not([class*='uk-card-media']) h6,
 .uk-card-primary> :not([class*='uk-card-media']) .uk-h6,
+.uk-card-primary> :not([class*='uk-card-media']) .uk-heading-small,
+.uk-card-primary> :not([class*='uk-card-media']) .uk-heading-medium,
+.uk-card-primary> :not([class*='uk-card-media']) .uk-heading-large,
+.uk-card-primary> :not([class*='uk-card-media']) .uk-heading-xlarge,
+.uk-card-primary> :not([class*='uk-card-media']) .uk-heading-2xlarge,
 .uk-card-secondary.uk-card-body h1,
 .uk-card-secondary.uk-card-body .uk-h1,
 .uk-card-secondary.uk-card-body h2,
@@ -10745,6 +10903,11 @@ iframe.uk-cover {
 .uk-card-secondary.uk-card-body .uk-h5,
 .uk-card-secondary.uk-card-body h6,
 .uk-card-secondary.uk-card-body .uk-h6,
+.uk-card-secondary.uk-card-body .uk-heading-small,
+.uk-card-secondary.uk-card-body .uk-heading-medium,
+.uk-card-secondary.uk-card-body .uk-heading-large,
+.uk-card-secondary.uk-card-body .uk-heading-xlarge,
+.uk-card-secondary.uk-card-body .uk-heading-2xlarge,
 .uk-card-secondary> :not([class*='uk-card-media']) h1,
 .uk-card-secondary> :not([class*='uk-card-media']) .uk-h1,
 .uk-card-secondary> :not([class*='uk-card-media']) h2,
@@ -10757,6 +10920,11 @@ iframe.uk-cover {
 .uk-card-secondary> :not([class*='uk-card-media']) .uk-h5,
 .uk-card-secondary> :not([class*='uk-card-media']) h6,
 .uk-card-secondary> :not([class*='uk-card-media']) .uk-h6,
+.uk-card-secondary> :not([class*='uk-card-media']) .uk-heading-small,
+.uk-card-secondary> :not([class*='uk-card-media']) .uk-heading-medium,
+.uk-card-secondary> :not([class*='uk-card-media']) .uk-heading-large,
+.uk-card-secondary> :not([class*='uk-card-media']) .uk-heading-xlarge,
+.uk-card-secondary> :not([class*='uk-card-media']) .uk-heading-2xlarge,
 .uk-overlay-primary h1,
 .uk-overlay-primary .uk-h1,
 .uk-overlay-primary h2,
@@ -10769,6 +10937,11 @@ iframe.uk-cover {
 .uk-overlay-primary .uk-h5,
 .uk-overlay-primary h6,
 .uk-overlay-primary .uk-h6,
+.uk-overlay-primary .uk-heading-small,
+.uk-overlay-primary .uk-heading-medium,
+.uk-overlay-primary .uk-heading-large,
+.uk-overlay-primary .uk-heading-xlarge,
+.uk-overlay-primary .uk-heading-2xlarge,
 .uk-offcanvas-bar h1,
 .uk-offcanvas-bar .uk-h1,
 .uk-offcanvas-bar h2,
@@ -10780,7 +10953,12 @@ iframe.uk-cover {
 .uk-offcanvas-bar h5,
 .uk-offcanvas-bar .uk-h5,
 .uk-offcanvas-bar h6,
-.uk-offcanvas-bar .uk-h6 {
+.uk-offcanvas-bar .uk-h6,
+.uk-offcanvas-bar .uk-heading-small,
+.uk-offcanvas-bar .uk-heading-medium,
+.uk-offcanvas-bar .uk-heading-large,
+.uk-offcanvas-bar .uk-heading-xlarge,
+.uk-offcanvas-bar .uk-heading-2xlarge {
   color: #fff;
 }
 
@@ -13524,7 +13702,21 @@ iframe.uk-cover {
 .uk-card-secondary> :not([class*='uk-card-media']) .uk-text-primary,
 .uk-overlay-primary .uk-text-primary,
 .uk-offcanvas-bar .uk-text-primary {
-  color: rgba(255, 255, 255, 0.7) !important;
+  color: #fff !important;
+}
+
+.uk-light .uk-text-secondary,
+.uk-section-primary:not(.uk-preserve-color) .uk-text-secondary,
+.uk-section-secondary:not(.uk-preserve-color) .uk-text-secondary,
+.uk-tile-primary:not(.uk-preserve-color) .uk-text-secondary,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-text-secondary,
+.uk-card-primary.uk-card-body .uk-text-secondary,
+.uk-card-primary> :not([class*='uk-card-media']) .uk-text-secondary,
+.uk-card-secondary.uk-card-body .uk-text-secondary,
+.uk-card-secondary> :not([class*='uk-card-media']) .uk-text-secondary,
+.uk-overlay-primary .uk-text-secondary,
+.uk-offcanvas-bar .uk-text-secondary {
+  color: #fff !important;
 }
 
 .uk-light .uk-column-divider,

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: uikit-reset
 version: !ruby/object:Gem::Version
-  version: 1.1.3
+  version: 2.1.0
 platform: ruby
 authors:
 - Chitta Ranjan Nanda
@@ -9,35 +9,7 @@ autorequire:
 bindir: exe
 cert_chain: []
 date: 2025-04-29 00:00:00.000000000 Z
-dependencies:
-- !ruby/object:Gem::Dependency
-  name: bundler
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 2.4.17
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 2.4.17
-- !ruby/object:Gem::Dependency
-  name: rake
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '10.0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '10.0'
+dependencies: []
 description: Uikit::Reset is a gem to make it super easy to use UIkit in your Rails
   project.
 email:
@@ -63,7 +35,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 2.3.0
+      version: 2.4.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="