@onereach/styles 0.1.13 → 0.1.15

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.
Files changed (25) hide show
  1. package/README.md +3 -3
  2. package/package.json +2 -2
  3. package/src/base/index.scss +5 -5
  4. package/src/components/{base/_button.scss → _or-button.scss} +3 -5
  5. package/src/components/{base/_checkbox.scss → _or-checkbox.scss} +2 -2
  6. package/src/components/{base/_collapse.scss → _or-collapse.scss} +2 -2
  7. package/src/components/{base/_error.scss → _or-error.scss} +2 -2
  8. package/src/components/{base/_hint.scss → _or-hint.scss} +2 -2
  9. package/src/components/{base/_icon.scss → _or-icon.scss} +2 -2
  10. package/src/components/{base/_label.scss → _or-label.scss} +2 -2
  11. package/src/components/{base/_list.scss → _or-list.scss} +5 -5
  12. package/src/components/{base/_loader.scss → _or-loader.scss} +4 -4
  13. package/src/components/{base/_radio-group.scss → _or-radio-group.scss} +2 -2
  14. package/src/components/{base/_radio.scss → _or-radio.scss} +2 -2
  15. package/src/components/{base/_switch.scss → _or-switch.scss} +3 -3
  16. package/src/components/_or-tab-header-item.scss +42 -0
  17. package/src/components/_or-tabs.scss +32 -0
  18. package/src/components/{base/_textbox.scss → _or-textbox.scss} +7 -17
  19. package/src/global.scss +1 -0
  20. package/src/main.scss +0 -1
  21. package/src/utils/mixins/_active.scss +1 -1
  22. package/src/utils/mixins/_focus.scss +1 -1
  23. package/src/utils/mixins/_hover.scss +2 -2
  24. package/src/variables/_initial.scss +1 -1
  25. package/src/components/modern/_button.scss +0 -6
package/README.md CHANGED
@@ -31,18 +31,18 @@ import '@onereach/styles/src/components/(base/modern/etc.)/component-name.scss';
31
31
 
32
32
  <script>
33
33
  // with sass-loader
34
- // import '@onereach/styles/src/components/base/icon.scss';
34
+ // import '@onereach/styles/src/components/or-icon.scss';
35
35
 
36
36
  export default {};
37
37
  </script>
38
38
 
39
39
  <style lang="scss">
40
- @import "node_modules/@onereach/styles/src/components/base/icon";
40
+ @import "node_modules/@onereach/styles/src/components/or-icon";
41
41
  </style>
42
42
  ```
43
43
  ```js
44
44
  // example with js or ts files
45
- import '@onereach/styles/src/components/base/icon.scss';
45
+ import '@onereach/styles/src/components/or-icon.scss';
46
46
 
47
47
  export default {
48
48
  name: 'BaseHeading',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/styles",
3
- "version": "0.1.13",
3
+ "version": "0.1.15",
4
4
  "description": "Styles for or-ui-next",
5
5
  "main": "./dist/index.min.css",
6
6
  "unpkg": "./dist/index.css",
@@ -38,5 +38,5 @@
38
38
  "sass": "^1.35.1",
39
39
  "stylelint": "^13.13.1"
40
40
  },
41
- "gitHead": "0068df1203f9dd05f9e595e9701975b1f9d48868"
41
+ "gitHead": "306d70a2adc6519d6afe300515bc402cfbd0a82c"
42
42
  }
package/src/base/index.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import "reset";
2
- @import "generic";
3
- @import "typography";
4
- @import "v-transitions";
5
- @import "animation";
1
+ @forward "reset";
2
+ @forward "generic";
3
+ @forward "typography";
4
+ @forward "v-transitions";
5
+ @forward "animation";
package/src/components/{base/_button.scss → _or-button.scss} RENAMED
@@ -1,5 +1,5 @@
1
- @use "../../utils" as *;
2
- @use "../../variables/initial";
1
+ @use "../utils/index" as *;
2
+ @use "../variables/initial";
3
3
 
4
4
  $btn-prefix: initial.$base-prefix !default;
5
5
 
@@ -190,12 +190,10 @@ $btn-types: (outline, text, icon, icon-simple);
190
190
 
191
191
  @mixin icon-type() {
192
192
  &.icon-type {
193
- $btn-border-radius: initial.$round;
194
-
195
193
  min-width: auto;
196
194
  max-width: px-to-rem(54);
197
195
  padding: px-to-rem(14);
198
- border-radius: $btn-border-radius;
196
+ border-radius: initial.$round;
199
197
 
200
198
  .material-icons {
201
199
  font-size: px-to-rem(24);
package/src/components/{base/_checkbox.scss → _or-checkbox.scss} RENAMED
@@ -1,5 +1,5 @@
1
- @use "../../utils" as *;
2
- @use "../../variables/initial";
1
+ @use "../utils/index" as *;
2
+ @use "../variables/initial";
3
3
 
4
4
  $checkbox-prefix: initial.$base-prefix !default;
5
5
 
package/src/components/{base/_collapse.scss → _or-collapse.scss} RENAMED
@@ -1,5 +1,5 @@
1
- @use "../../utils" as *;
2
- @use "../../variables/initial";
1
+ @use "../utils/index" as *;
2
+ @use "../variables/initial";
3
3
 
4
4
  $collapse-prefix: initial.$base-prefix !default;
5
5
 
package/src/components/{base/_error.scss → _or-error.scss} RENAMED
@@ -1,5 +1,5 @@
1
- @use "../../utils/functions/px-to-rem" as *;
2
- @use "../../variables/initial";
1
+ @use "../utils/functions/px-to-rem" as *;
2
+ @use "../variables/initial";
3
3
 
4
4
  $error-prefix: initial.$base-prefix !default;
5
5
  $error-font-size: var(--fs-0) !default;
package/src/components/{base/_hint.scss → _or-hint.scss} RENAMED
@@ -1,5 +1,5 @@
1
- @use "../../utils/functions/px-to-rem" as *;
2
- @use "../../variables/initial";
1
+ @use "../utils/functions/px-to-rem" as *;
2
+ @use "../variables/initial";
3
3
 
4
4
  $hint-prefix: initial.$base-prefix !default;
5
5
  $hint-font-size: var(--fs-0) !default;
package/src/components/{base/_icon.scss → _or-icon.scss} RENAMED
@@ -1,5 +1,5 @@
1
- @use "../../utils" as *;
2
- @use "../../variables/initial";
1
+ @use "../utils/index" as *;
2
+ @use "../variables/initial";
3
3
 
4
4
  $icon-prefix: initial.$base-prefix !default;
5
5
 
package/src/components/{base/_label.scss → _or-label.scss} RENAMED
@@ -1,5 +1,5 @@
1
- @use "../../utils" as *;
2
- @use "../../variables/initial";
1
+ @use "../utils/index" as *;
2
+ @use "../variables/initial";
3
3
 
4
4
  $label-prefix: initial.$base-prefix !default;
5
5
  $label-font-size: var(--fs-0) !default;
package/src/components/{base/_list.scss → _or-list.scss} RENAMED
@@ -1,5 +1,5 @@
1
- @use "../../utils" as *;
2
- @use "../../variables/initial";
1
+ @use "../utils/index" as *;
2
+ @use "../variables/initial";
3
3
 
4
4
  $list-prefix: initial.$base-prefix !default;
5
5
 
@@ -26,9 +26,9 @@ $list-prefix: initial.$base-prefix !default;
26
26
  width: 100%;
27
27
  margin-bottom: var(--s-4);
28
28
 
29
- .material-icons {
30
- color: var(--c-neutral-4);
31
- }
29
+ //.material-icons {
30
+ // color: var(--c-neutral-4);
31
+ //}
32
32
  }
33
33
 
34
34
  &--slot {
package/src/components/{base/_loader.scss → _or-loader.scss} RENAMED
@@ -1,6 +1,6 @@
1
- @use "../../utils" as *;
2
- @use "../../base/animation" as *;
3
- @use "../../variables/initial";
1
+ @use "../utils/index" as *;
2
+ @use "../base/animation" as *;
3
+ @use "../variables/initial";
4
4
 
5
5
  $loader-prefix: initial.$base-prefix !default;
6
6
 
@@ -45,7 +45,7 @@ $loader-border-color: inherit !default;
45
45
  }
46
46
 
47
47
  @for $i from 0 through 3 {
48
- .base-loader--dot:nth-child(#{$i}) {
48
+ .#{$loader-prefix}-loader--dot:nth-child(#{$i}) {
49
49
  animation: fade 1s initial.$transition-function $i * 0.2s infinite;
50
50
  }
51
51
  }
package/src/components/{base/_radio-group.scss → _or-radio-group.scss} RENAMED
@@ -1,5 +1,5 @@
1
- @use "../../utils" as *;
2
- @use "../../variables/initial";
1
+ @use "../utils/index" as *;
2
+ @use "../variables/initial";
3
3
 
4
4
  $radio-group-prefix: initial.$base-prefix !default;
5
5
  $radio-group-column-mb: var(--s-4) !default;
package/src/components/{base/_radio.scss → _or-radio.scss} RENAMED
@@ -1,5 +1,5 @@
1
- @use "../../utils" as *;
2
- @use "../../variables/initial";
1
+ @use "../utils/index" as *;
2
+ @use "../variables/initial";
3
3
 
4
4
  $radio-prefix: initial.$base-prefix !default;
5
5
  $radio-icon-size: px-to-rem(16) !default;
package/src/components/{base/_switch.scss → _or-switch.scss} RENAMED
@@ -1,5 +1,5 @@
1
- @use "../../utils" as *;
2
- @use "../../variables/initial";
1
+ @use "../utils/index" as *;
2
+ @use "../variables/initial";
3
3
 
4
4
  // base
5
5
  $switch-prefix: initial.$base-prefix !default;
@@ -117,7 +117,7 @@ $switch-content-color-disabled: var(--c-neutral-4) !default;
117
117
  }
118
118
 
119
119
  &--loader {
120
- &.base-loader {
120
+ &.#{$switch-prefix}-loader {
121
121
  &::after {
122
122
  width: $switch-loader-size;
123
123
  min-width: $switch-loader-size;
package/src/components/_or-tab-header-item.scss ADDED
@@ -0,0 +1,42 @@
1
+ @use "../utils/index" as *;
2
+ @use "../variables/initial";
3
+
4
+ $tab-header-item-prefix: initial.$base-prefix !default;
5
+ $tab-header-item-color: var(--c-neutral-5) !default;
6
+ $tab-header-item-font-weight: var(--fw-2) !default;
7
+ $tab-header-item-font-size: var(--fs-1) !default;
8
+ $tab-header-item-line-height: var(--lh-1) !default;
9
+
10
+ $tab-header-item-color-hover: var(--c-neutral-6) !default;
11
+ $tab-header-item-color-active: var(--c-neutral-6) !default;
12
+ $tab-header-item-color-disabled: var(--c-neutral-3) !default;
13
+
14
+ .#{$tab-header-item-prefix}-tab-header-item {
15
+ padding: 0;
16
+ font-size: $tab-header-item-font-size;
17
+ font-weight: $tab-header-item-font-weight;
18
+ line-height: $tab-header-item-line-height;
19
+ color: $tab-header-item-color;
20
+ cursor: pointer;
21
+ background-color: transparent;
22
+ border: 0;
23
+
24
+ &:not(:last-child) {
25
+ margin-right: var(--s-6);
26
+ }
27
+
28
+ @include transition(color);
29
+
30
+ @include hover {
31
+ color: $tab-header-item-color-hover;
32
+ }
33
+
34
+ @include disabled {
35
+ color: $tab-header-item-color-disabled;
36
+ }
37
+
38
+ &.is-active {
39
+ color: $tab-header-item-color-active;
40
+ cursor: default;
41
+ }
42
+ }
package/src/components/_or-tabs.scss ADDED
@@ -0,0 +1,32 @@
1
+ @use "../utils/index" as *;
2
+ @use "../variables/initial";
3
+
4
+ $tabs-prefix: initial.$base-prefix !default;
5
+
6
+ .#{$tabs-prefix}-tabs {
7
+ width: 100%;
8
+ overflow: hidden;
9
+
10
+ &--header {
11
+ position: relative;
12
+ padding: 0 var(--s-4) var(--s-3);
13
+ border-bottom: 1px solid var(--c-neutral-2);
14
+ }
15
+
16
+ &--tabs {
17
+ display: flex;
18
+ width: 100%;
19
+ }
20
+
21
+ &--indicator {
22
+ position: absolute;
23
+ bottom: -1px;
24
+ left: 0;
25
+ z-index: 1;
26
+ width: auto;
27
+ height: px-to-rem(2);
28
+ background-color: var(--c-neutral-6);
29
+
30
+ @include transition(transform, width);
31
+ }
32
+ }
package/src/components/{base/_textbox.scss → _or-textbox.scss} RENAMED
@@ -1,6 +1,6 @@
1
1
  @use "sass:list";
2
- @use "../../utils" as *;
3
- @use "../../variables/initial";
2
+ @use "../utils/index" as *;
3
+ @use "../variables/initial";
4
4
 
5
5
  $textbox-prefix: initial.$base-prefix !default;
6
6
 
@@ -39,17 +39,12 @@ $textbox-label-margin: 0 0 px-to-rem(4) !default;
39
39
  $textbox-label-color: var(--c-neutral-4) !default;
40
40
 
41
41
  .#{$textbox-prefix}-textbox {
42
- display: block;
43
- width: 100%;
42
+ display: flex;
43
+ align-items: flex-start;
44
44
 
45
- &--content {
46
- display: flex;
47
- align-items: flex-start;
48
-
49
- > div {
50
- &:not(.#{$textbox-prefix}-textbox--append, .#{$textbox-prefix}-textbox--prepend) {
51
- width: 100%;
52
- }
45
+ > div {
46
+ &:not(.#{$textbox-prefix}-textbox--append, .#{$textbox-prefix}-textbox--prepend) {
47
+ width: 100%;
53
48
  }
54
49
  }
55
50
 
@@ -193,11 +188,6 @@ $textbox-label-color: var(--c-neutral-4) !default;
193
188
  }
194
189
  }
195
190
 
196
- //&.has-slot {
197
- // flex-direction: row;
198
- // align-items: flex-end;
199
- //}
200
-
201
191
  &.has-counter {
202
192
  .#{$textbox-prefix}-textbox {
203
193
  &--hint,
package/src/global.scss ADDED
@@ -0,0 +1 @@
1
+ @forward "utils";
package/src/main.scss CHANGED
@@ -1,4 +1,3 @@
1
1
  @forward "variables";
2
- @forward "utils";
3
2
  @forward "base";
4
3
  @forward "layout";
package/src/utils/mixins/_active.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @mixin active {
2
- &:not(&:disabled, &.is-loading, &.is-disabled, &:read-only, &.is-readonly) {
2
+ &:not(:disabled):not(.is-loading):not(.is-disabled):not(.is-readonly) {
3
3
  &:active {
4
4
  @content;
5
5
  }
package/src/utils/mixins/_focus.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @mixin focus {
2
- &:not(&:disabled, &:read-only, &.is-readonly, &.is-loading) {
2
+ &:not(:disabled):not(.is-readonly):not(.is-loading) {
3
3
  &:focus {
4
4
  @content;
5
5
  }
package/src/utils/mixins/_hover.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @mixin hover {
2
2
  @media (hover: hover) and (pointer: fine) {
3
- &:not(&:disabled, &.is-loading, &.is-disabled, &.is-readonly, &:read-only) {
3
+ &:not(.is-loading):not(.is-disabled):not(.is-readonly):not(:disabled) {
4
4
  &:hover {
5
5
  @content;
6
6
  }
@@ -8,7 +8,7 @@
8
8
  }
9
9
 
10
10
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
11
- &:not(&:disabled, &.is-loading, &.is-disabled, &.is-readonly, &:read-only) {
11
+ &:not(.is-loading):not(.is-disabled):not(.is-readonly):not(:disabled) {
12
12
  &:hover {
13
13
  @content;
14
14
  }
package/src/variables/_initial.scss CHANGED
@@ -33,7 +33,7 @@ $heading-font-weight: var(--fw-2) !default;
33
33
  $heading-line-height: var(--lh-2) !default;
34
34
 
35
35
  // generic
36
- $base-prefix: quote(base) !default;
36
+ $base-prefix: quote('or') !default;
37
37
  $round: 9999px !default;
38
38
 
39
39
  $transition-function: var(--t-func) !default;
package/src/components/modern/_button.scss DELETED
@@ -1,6 +0,0 @@
1
- $btn-min-width: 300px;
2
- $btn-padding: 20px 20px;
3
- $btn-border-radius: 9999px;
4
- $btn-font-size: 20px;
5
-
6
- @import "../base/button";