@onereach/styles 2.8.4 → 2.9.0-beta.605.0

package/src/base/_generic.scss

@@ -1,31 +0,0 @@
-@use "../utils" as *;
-
-$body-color: var(--c-neutral-6) !default;
-$body-bg-color: var(--c-body-bg) !default;
-
-html {
-  text-rendering: optimizeLegibility;
-  font-size: 100%;
-  text-size-adjust: 100%;
-}
-
-body {
-  overflow-x: hidden;
-  overflow-y: auto;
-  overscroll-behavior: none;
-  color: $body-color;
-  background-color: $body-bg-color;
-}
-
-fieldset {
-  border: none;
-}
-
-a {
-  text-decoration: none;
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-  vertical-align: baseline;
-}

package/src/base/_reset.scss

@@ -1,149 +0,0 @@
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  padding: 0;
-  margin: 0;
-  vertical-align: baseline;
-  border: 0;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-
-html,
-body {
-  -webkit-tap-highlight-color: transparent;
-}
-
-blockquote,
-q {
-  quotes: none;
-}
-
-blockquote::before,
-blockquote::after,
-q::before,
-q::after {
-  content: none;
-}
-
-table {
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-
-input,
-textarea {
-  padding: 0;
-  margin: 0;
-  border-radius: 0;
-}
-
-/* clears the 'X' from Internet Explorer */
-input[type=search]::-ms-clear,
-input[type=search]::-ms-reveal {
-  display: none;
-  width: 0;
-  height: 0;
-}
-
-/* clears the 'X' from Chrome */
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}

package/src/base/_typography.scss

@@ -1,39 +0,0 @@
-body,
-.body-normal {
-  font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
-  font-size: var(--fs-1);
-  font-weight: var(--fw-0);
-  line-height: var(--lh-1);
-}
-
-.caption-normal {
-  font-size: var(--fs-0);
-  font-weight: var(--fw-0);
-  line-height: var(--lh-0);
-}
-
-.caption-bold {
-  @extend .caption-normal;
-
-  font-weight: var(--fw-2);
-}
-
-.body-semibold {
-  @extend .body-normal;
-
-  font-weight: var(--fw-1);
-}
-
-h4,
-.subheading {
-  font-size: var(--fs-2);
-  font-weight: var(--fw-2);
-  line-height: var(--lh-1);
-}
-
-h1,
-.heading {
-  font-size: var(--fs-3);
-  font-weight: var(--fw-2);
-  line-height: var(--lh-2);
-}

package/src/base/_v-transitions.scss

@@ -1,13 +0,0 @@
-@use "../variables/initial";
-
-.fade {
-  &-enter-active,
-  &-leave-active {
-    transition: opacity initial.$transition-duration initial.$transition-function;
-  }
-
-  &-enter,
-  &-leave-to {
-    opacity: 0;
-  }
-}

package/src/base/index.scss

@@ -1,5 +0,0 @@
-@forward "reset";
-@forward "generic";
-@forward "typography";
-@forward "v-transitions";
-@forward "animation";

package/src/layout/_display.scss

@@ -1,29 +0,0 @@
-.d {
-  &-inline {
-    display: inline;
-  }
-
-  &-inline-block {
-    display: inline-block;
-  }
-
-  &-flex {
-    display: flex;
-  }
-
-  &-inline-flex {
-    display: inline-flex;
-  }
-
-  &-block {
-    display: block;
-  }
-
-  &-grid {
-    display: grid;
-  }
-
-  &-inline-grid {
-    display: inline-grid;
-  }
-}

package/src/layout/_flexbox.scss

@@ -1,109 +0,0 @@
-.align {
-  &-baseline {
-    align-items: baseline;
-  }
-
-  &-start {
-    align-items: start;
-  }
-
-  &-end {
-    align-items: end;
-  }
-
-  &-self-start {
-    align-items: self-start;
-  }
-
-  &-self-end {
-    align-items: self-end;
-  }
-
-  &-flex-start {
-    align-items: flex-start;
-  }
-
-  &-flex-end {
-    align-items: flex-end;
-  }
-
-  &-stretch {
-    align-items: stretch;
-  }
-
-  &-center {
-    align-items: center;
-  }
-}
-
-.justify {
-  &-start {
-    justify-content: start;
-  }
-
-  &-end {
-    justify-content: end;
-  }
-
-  &-left {
-    justify-content: left;
-  }
-
-  &-right {
-    justify-content: right;
-  }
-
-  &-flex-start {
-    justify-content: flex-start;
-  }
-
-  &-flex-end {
-    justify-content: flex-end;
-  }
-
-  &-space-between {
-    justify-content: space-between;
-  }
-
-  &-space-around {
-    justify-content: space-around;
-  }
-
-  &-sapce-evenly {
-    justify-content: space-evenly;
-  }
-
-  &-center {
-    justify-content: center;
-  }
-}
-
-.direction {
-  &-row {
-    flex-direction: row;
-  }
-
-  &-row-reverse {
-    flex-direction: row-reverse;
-  }
-
-  &-column {
-    flex-direction: column;
-  }
-
-  &-column-reverse {
-    flex-direction: column-reverse;
-  }
-}
-
-.wrap {
-  flex-wrap: wrap;
-}
-
-.nowrap {
-  flex-wrap: nowrap;
-}
-
-.wrap-reverse {
-  flex-wrap: wrap-reverse;
-}

package/src/layout/_spacings.scss

@@ -1,29 +0,0 @@
-@use "sass:string";
-@use "../variables/initial";
-@use "../utils/functions/px-to-rem" as *;
-
-$directions: (top, right, bottom, left);
-$margin-prefix: m !default;
-$padding-prefix: p !default;
-
-.#{$margin-prefix}-0 {
-  margin: 0;
-}
-
-.#{$padding-prefix}-0 {
-  padding: 0;
-}
-
-@each $value in initial.$spacingsValues {
-  $i: index(initial.$spacingsValues, $value) - 1;
-
-  @each $direction in $directions {
-    .#{$margin-prefix + string.slice($direction, 1, 1)}-#{$i} {
-      margin-#{$direction}: px-to-rem($value);
-    }
-
-    .#{$padding-prefix + string.slice($direction, 1, 1)}-#{$i} {
-      padding-#{$direction}: px-to-rem($value);
-    }
-  }
-}

package/src/layout/_text.scss

@@ -1,45 +0,0 @@
-@use "../variables/initial" as *;
-@use "sass:list";
-
-// generate classes font-size
-@for $i from 0 through list.length($fontSizeList) - 1 {
-  .fs-#{$i} {
-    font-size: var(--fs-#{$i});
-  }
-}
-
-// generate classes font-weight
-@for $i from 0 through list.length($fontWeightList) - 1 {
-  .fw-#{$i} {
-    font-weight: var(--fw-#{$i});
-  }
-}
-
-// generate classes line-height
-@for $i from 0 through list.length($lineHeightList) - 1 {
-  .lh-#{$i} {
-    line-height: var(--lh-#{$i});
-  }
-}
-
-.text-align {
-  &-center {
-    text-align: center;
-  }
-
-  &-end {
-    text-align: end;
-  }
-
-  &-left {
-    text-align: left;
-  }
-
-  &-right {
-    text-align: right;
-  }
-
-  &-justify {
-    text-align: justify;
-  }
-}

package/src/layout/index.scss

@@ -1,4 +0,0 @@
-@forward "display";
-@forward "flexbox";
-@forward "spacings";
-@forward "text";

package/src/utils/mixins/_absolute-center.scss

@@ -1,6 +0,0 @@
-@mixin absolute-center() {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}

package/src/utils/mixins/_absolute-stretch.scss

@@ -1,7 +0,0 @@
-@mixin absolute-stretch () {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}

package/src/utils/mixins/_breakpont.scss

@@ -1,124 +0,0 @@
-$breakpoints: (
-  "sm": 0,
-  "md": 768,
-  "lg": 1280,
-  "xl": 1920
-);
-
-// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
-// Makes the @content apply to the given breakpoint and wider.
-@mixin respUp($name, $landscape: false, $breakpoints: $breakpoints) {
-  $min: breakpoint-min($name, $breakpoints);
-
-  @if $min and $landscape {
-    @media (min-width: #{$min}px) and (orientation: landscape) {
-      @content;
-    }
-  }
-
-  @else if $min {
-    @media (min-width: #{$min}px) {
-      @content;
-    }
-  }
-
-  @else {
-    @content;
-  }
-}
-
-// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
-// Makes the @content apply to the given breakpoint and narrower.
-@mixin respDown($name, $landscape: false, $breakpoints: $breakpoints) {
-  $max: breakpoint-max($name, $breakpoints);
-
-  @if $max and $landscape {
-    @media (max-width: #{$max}px) and (orientation: landscape) {
-      @content;
-    }
-  }
-
-  @else if $max {
-    @media (max-width: #{$max}px) {
-      @content;
-    }
-
-    @if $name == sm {
-      .rwc-embed & {
-        @content;
-      }
-    }
-  }
-
-  @else {
-    @content;
-  }
-}
-
-// Media that spans multiple breakpoint widths.
-// Makes the @content apply between the min and max breakpoints
-@mixin respBetween(
-  $lower,
-  $upper,
-  $landscape: false,
-  $breakpoints: $breakpoints
-) {
-  $min: breakpoint-min($lower, $breakpoints);
-  $max: breakpoint-max($upper, $breakpoints);
-
-  @if $min != null and $max != null and $landscape {
-    @media (min-width: #{$min}px) and (max-width: #{$max}px) and (orientation: landscape) {
-      @content;
-    }
-  }
-
-  @else if $min != null and $max != null {
-    @media (min-width: #{$min}px) and (max-width: #{$max}px) {
-      @content;
-    }
-  }
-
-  @else if $max == null {
-    @include respUp($lower, $landscape, $breakpoints) {
-      @content;
-    }
-  }
-
-  @else if $min == null {
-    @include respDown($upper, $landscape, $breakpoints) {
-      @content;
-    }
-  }
-}
-
-// Media between the breakpoint's minimum and maximum widths.
-// No minimum for the smallest breakpoint, and no maximum for the largest one.
-// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin respOnly($name, $landscape: false, $breakpoints: $breakpoints) {
-  $min: breakpoint-min($name, $breakpoints);
-  $max: breakpoint-max($name, $breakpoints);
-
-  @if $min != null and $max != null and $landscape {
-    @media (min-width: #{$min}px) and (max-width: #{$max}px) and (orientation: landscape) {
-      @content;
-    }
-  }
-
-  @else if $min != null and $max != null {
-    @media (min-width: #{$min}px) and (max-width: #{$max}px) {
-      @content;
-    }
-  }
-
-  @else if $max == null {
-    @include respUp($name, $landscape, $breakpoints) {
-      @content;
-    }
-  }
-
-  @else if $min == null {
-    @include respDown($name, $landscape, $breakpoints) {
-      @content;
-    }
-  }
-}

package/src/utils/mixins/_extra-click-area.scss

@@ -1,5 +0,0 @@
-@mixin extra-click-area ($area: 10px) {
-  box-sizing: content-box;
-  padding: $area;
-  margin: -$area;
-}

package/src/utils/mixins/_input.scss

@@ -1,14 +0,0 @@
-@use "../../variables/colors" as *;
-
-/* Make div look like an input element */
-@mixin input-wrapper($min-height: 2.25rem) {
-  min-height: $min-height;
-
-  background-color: $c-neutral-1;
-  border: 1px solid $c-neutral-2;
-  border-radius: 0.25rem;
-
-  &.error {
-    border-color: $c-error;
-  }
-}

package/src/utils/mixins/_overflow-touch.scss

@@ -1,3 +0,0 @@
-@mixin overflow-touch () {
-  -webkit-overflow-scrolling: touch;
-}

package/src/utils/mixins/_visual-hidden.scss

@@ -1,5 +0,0 @@
-@mixin visually-hidden() {
-  width: 0;
-  height: 0;
-  visibility: hidden;
-}