@nutui/nutui 3.1.11-beta.0 → 3.1.12

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 (119) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/dist/nutui.d.ts +5 -2
  3. package/dist/nutui.es.js +4243 -3673
  4. package/dist/nutui.umd.js +4252 -3679
  5. package/dist/packages/_es/ActionSheet.js +1 -1
  6. package/dist/packages/_es/Address.js +1 -1
  7. package/dist/packages/_es/Avatar.js +1 -1
  8. package/dist/packages/_es/BackTop.js +1 -1
  9. package/dist/packages/_es/Badge.js +1 -1
  10. package/dist/packages/_es/Barrage.js +1 -1
  11. package/dist/packages/_es/Button.js +1 -1
  12. package/dist/packages/_es/Calendar.js +1 -1
  13. package/dist/packages/_es/Card.js +105 -0
  14. package/dist/packages/_es/Cell.js +1 -1
  15. package/dist/packages/_es/CellGroup.js +10 -4
  16. package/dist/packages/_es/Checkbox.js +1 -1
  17. package/dist/packages/_es/CheckboxGroup.js +2 -2
  18. package/dist/packages/_es/CircleProgress.js +1 -1
  19. package/dist/packages/_es/Col.js +1 -1
  20. package/dist/packages/_es/Collapse.js +1 -1
  21. package/dist/packages/_es/CollapseItem.js +1 -1
  22. package/dist/packages/_es/CountDown.js +1 -1
  23. package/dist/packages/_es/CountUp.js +1 -1
  24. package/dist/packages/_es/DatePicker.js +2 -2
  25. package/dist/packages/_es/Dialog.js +10 -23
  26. package/dist/packages/_es/Divider.js +1 -1
  27. package/dist/packages/_es/Drag.js +1 -1
  28. package/dist/packages/_es/Elevator.js +1 -1
  29. package/dist/packages/_es/FixedNav.js +1 -1
  30. package/dist/packages/_es/Form.js +138 -0
  31. package/dist/packages/_es/FormItem.js +110 -0
  32. package/dist/packages/_es/Icon.js +1 -1
  33. package/dist/packages/_es/ImagePreview.js +148 -32
  34. package/dist/packages/_es/InfiniteLoading.js +1 -1
  35. package/dist/packages/_es/Input.js +1 -1
  36. package/dist/packages/_es/InputNumber.js +1 -1
  37. package/dist/packages/_es/Layout.js +1 -1
  38. package/dist/packages/_es/Menu.js +83 -167
  39. package/dist/packages/_es/MenuItem.js +154 -15
  40. package/dist/packages/_es/Navbar.js +1 -1
  41. package/dist/packages/_es/NoticeBar.js +1 -1
  42. package/dist/packages/_es/Notify.js +1 -1
  43. package/dist/packages/_es/NumberKeyboard.js +9 -7
  44. package/dist/packages/_es/OverLay.js +1 -1
  45. package/dist/packages/_es/Pagination.js +1 -1
  46. package/dist/packages/_es/Picker.js +2 -2
  47. package/dist/packages/_es/Popover.js +11 -17
  48. package/dist/packages/_es/Popup.js +52 -13
  49. package/dist/packages/_es/Price.js +1 -1
  50. package/dist/packages/_es/Progress.js +1 -1
  51. package/dist/packages/_es/Radio.js +1 -1
  52. package/dist/packages/_es/RadioGroup.js +1 -1
  53. package/dist/packages/_es/Range.js +4 -32
  54. package/dist/packages/_es/Rate.js +19 -5
  55. package/dist/packages/_es/Row.js +1 -1
  56. package/dist/packages/_es/SearchBar.js +1 -1
  57. package/dist/packages/_es/ShortPassword.js +1 -1
  58. package/dist/packages/_es/Signature.js +1 -1
  59. package/dist/packages/_es/Sku.js +2 -37
  60. package/dist/packages/_es/Step.js +1 -1
  61. package/dist/packages/_es/Steps.js +1 -1
  62. package/dist/packages/_es/Swipe.js +2 -2
  63. package/dist/packages/_es/Swiper.js +11 -11
  64. package/dist/packages/_es/SwiperItem.js +3 -3
  65. package/dist/packages/_es/Switch.js +28 -8
  66. package/dist/packages/_es/TabPane.js +1 -1
  67. package/dist/packages/_es/Tabbar.js +1 -1
  68. package/dist/packages/_es/TabbarItem.js +1 -1
  69. package/dist/packages/_es/Tabs.js +1 -1
  70. package/dist/packages/_es/Tag.js +1 -1
  71. package/dist/packages/_es/TextArea.js +1 -1
  72. package/dist/packages/_es/TimeDetail.js +1 -1
  73. package/dist/packages/_es/TimePannel.js +1 -1
  74. package/dist/packages/_es/TimeSelect.js +1 -1
  75. package/dist/packages/_es/Toast.js +18 -8
  76. package/dist/packages/_es/Uploader.js +30 -22
  77. package/dist/packages/_es/Video.js +3 -3
  78. package/dist/packages/_es/component.js +1 -1
  79. package/dist/packages/_es/index.js +7 -58
  80. package/dist/packages/_es/index2.js +58 -7
  81. package/dist/packages/_es/index3.js +36 -0
  82. package/dist/packages/_es/plugin-vue_export-helper.js +4 -3
  83. package/dist/packages/_es/pxCheck.js +1 -1
  84. package/dist/packages/_es/raf.js +1 -1
  85. package/dist/packages/_es/util.js +47 -0
  86. package/dist/packages/button/index.scss +6 -0
  87. package/dist/packages/card/index.scss +97 -0
  88. package/dist/packages/cellgroup/index.scss +9 -0
  89. package/dist/packages/checkbox/index.scss +1 -1
  90. package/dist/packages/dialog/index.scss +17 -0
  91. package/dist/packages/drag/index.scss +4 -0
  92. package/dist/packages/fixednav/index.scss +6 -1
  93. package/dist/packages/form/index.scss +2 -0
  94. package/dist/packages/formitem/index.scss +63 -0
  95. package/dist/packages/icon/index.scss +2 -1
  96. package/dist/packages/menu/index.scss +32 -60
  97. package/dist/packages/menuitem/index.scss +36 -99
  98. package/dist/packages/numberkeyboard/index.scss +1 -1
  99. package/dist/packages/popover/index.scss +2 -2
  100. package/dist/packages/rate/index.scss +1 -0
  101. package/dist/packages/switch/index.scss +1 -1
  102. package/dist/packages/textarea/index.scss +1 -0
  103. package/dist/packages/timedetail/index.scss +1 -2
  104. package/dist/packages/timeselect/index.scss +3 -0
  105. package/dist/packages/toast/index.scss +6 -0
  106. package/dist/packages/uploader/index.scss +1 -0
  107. package/dist/style.css +1 -1
  108. package/dist/styles/font/config.json +2 -1
  109. package/dist/styles/font/demo_index.html +26 -3
  110. package/dist/styles/font/iconfont.css +7 -3
  111. package/dist/styles/font/iconfont.js +31 -32
  112. package/dist/styles/font/iconfont.json +7 -0
  113. package/dist/styles/font/iconfont.ttf +0 -0
  114. package/dist/styles/font/iconfont.woff +0 -0
  115. package/dist/styles/font/iconfont.woff2 +0 -0
  116. package/dist/styles/themes/default.scss +39 -36
  117. package/dist/styles/variables.scss +29 -2
  118. package/package.json +3 -2
  119. package/dist/packages/_es/style.css +0 -160
@@ -1,13 +1,64 @@
1
1
  /*!
2
- * @nutui/nutui v3.1.11-beta.0 Sat Nov 13 2021 21:43:55 GMT+0800 (中国标准时间)
2
+ * @nutui/nutui v3.1.12 Sat Nov 27 2021 11:30:43 GMT+0800 (中国标准时间)
3
3
  * (c) 2021 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
6
- import { getCurrentInstance } from "vue";
7
- function useExpose(apis) {
8
- const instance = getCurrentInstance();
9
- if (instance) {
10
- Object.assign(instance.proxy, apis);
6
+ import { ref } from "vue";
7
+ const MIN_DISTANCE = 10;
8
+ function getDirection(x, y) {
9
+ if (x > y && x > MIN_DISTANCE) {
10
+ return "horizontal";
11
11
  }
12
+ if (y > x && y > MIN_DISTANCE) {
13
+ return "vertical";
14
+ }
15
+ return "";
16
+ }
17
+ function useTouch() {
18
+ const startX = ref(0);
19
+ const startY = ref(0);
20
+ const deltaX = ref(0);
21
+ const deltaY = ref(0);
22
+ const offsetX = ref(0);
23
+ const offsetY = ref(0);
24
+ const direction = ref("");
25
+ const isVertical = () => direction.value === "vertical";
26
+ const isHorizontal = () => direction.value === "horizontal";
27
+ const reset = () => {
28
+ deltaX.value = 0;
29
+ deltaY.value = 0;
30
+ offsetX.value = 0;
31
+ offsetY.value = 0;
32
+ direction.value = "";
33
+ };
34
+ const start = (event) => {
35
+ reset();
36
+ startX.value = event.touches[0].clientX;
37
+ startY.value = event.touches[0].clientY;
38
+ };
39
+ const move = (event) => {
40
+ const touch = event.touches[0];
41
+ deltaX.value = touch.clientX - startX.value;
42
+ deltaY.value = touch.clientY - startY.value;
43
+ offsetX.value = Math.abs(deltaX.value);
44
+ offsetY.value = Math.abs(deltaY.value);
45
+ if (!direction.value) {
46
+ direction.value = getDirection(offsetX.value, offsetY.value);
47
+ }
48
+ };
49
+ return {
50
+ move,
51
+ start,
52
+ reset,
53
+ startX,
54
+ startY,
55
+ deltaX,
56
+ deltaY,
57
+ offsetX,
58
+ offsetY,
59
+ direction,
60
+ isVertical,
61
+ isHorizontal
62
+ };
12
63
  }
13
- export { useExpose as u };
64
+ export { useTouch as u };
@@ -0,0 +1,36 @@
1
+ /*!
2
+ * @nutui/nutui v3.1.12 Sat Nov 27 2021 11:30:43 GMT+0800 (中国标准时间)
3
+ * (c) 2021 @jdf2e.
4
+ * Released under the MIT License.
5
+ */
6
+ import { unref } from "vue";
7
+ function isWindow(val) {
8
+ return val === window;
9
+ }
10
+ const useRect = (elementRef) => {
11
+ const element = unref(elementRef);
12
+ if (isWindow(element)) {
13
+ const width = element.innerWidth;
14
+ const height = element.innerHeight;
15
+ return {
16
+ top: 0,
17
+ left: 0,
18
+ right: width,
19
+ bottom: height,
20
+ width,
21
+ height
22
+ };
23
+ }
24
+ if (element && element.getBoundingClientRect) {
25
+ return element.getBoundingClientRect();
26
+ }
27
+ return {
28
+ top: 0,
29
+ left: 0,
30
+ right: 0,
31
+ bottom: 0,
32
+ width: 0,
33
+ height: 0
34
+ };
35
+ };
36
+ export { useRect as u };
@@ -1,12 +1,13 @@
1
1
  /*!
2
- * @nutui/nutui v3.1.11-beta.0 Sat Nov 13 2021 21:43:55 GMT+0800 (中国标准时间)
2
+ * @nutui/nutui v3.1.12 Sat Nov 27 2021 11:30:43 GMT+0800 (中国标准时间)
3
3
  * (c) 2021 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
6
6
  var _export_sfc = (sfc, props) => {
7
+ const target = sfc.__vccOpts || sfc;
7
8
  for (const [key, val] of props) {
8
- sfc[key] = val;
9
+ target[key] = val;
9
10
  }
10
- return sfc;
11
+ return target;
11
12
  };
12
13
  export { _export_sfc as _ };
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @nutui/nutui v3.1.11-beta.0 Sat Nov 13 2021 21:43:55 GMT+0800 (中国标准时间)
2
+ * @nutui/nutui v3.1.12 Sat Nov 27 2021 11:30:43 GMT+0800 (中国标准时间)
3
3
  * (c) 2021 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @nutui/nutui v3.1.11-beta.0 Sat Nov 13 2021 21:43:55 GMT+0800 (中国标准时间)
2
+ * @nutui/nutui v3.1.12 Sat Nov 27 2021 11:30:43 GMT+0800 (中国标准时间)
3
3
  * (c) 2021 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
@@ -0,0 +1,47 @@
1
+ /*!
2
+ * @nutui/nutui v3.1.12 Sat Nov 27 2021 11:30:43 GMT+0800 (中国标准时间)
3
+ * (c) 2021 @jdf2e.
4
+ * Released under the MIT License.
5
+ */
6
+ const TypeOfFun = (value) => {
7
+ if (value === null) {
8
+ return "null";
9
+ }
10
+ const type = typeof value;
11
+ if (type === "undefined" || type === "string") {
12
+ return type;
13
+ }
14
+ const typeString = toString.call(value);
15
+ switch (typeString) {
16
+ case "[object Array]":
17
+ return "array";
18
+ case "[object Date]":
19
+ return "date";
20
+ case "[object Boolean]":
21
+ return "boolean";
22
+ case "[object Number]":
23
+ return "number";
24
+ case "[object Function]":
25
+ return "function";
26
+ case "[object RegExp]":
27
+ return "regexp";
28
+ case "[object Object]":
29
+ if (value.nodeType !== void 0) {
30
+ if (value.nodeType == 3) {
31
+ return /\S/.test(value.nodeValue) ? "textnode" : "whitespace";
32
+ } else {
33
+ return "element";
34
+ }
35
+ } else {
36
+ return "object";
37
+ }
38
+ default:
39
+ return "unknow";
40
+ }
41
+ };
42
+ const isFunction = (val) => typeof val === "function";
43
+ const isObject = (val) => val !== null && typeof val === "object";
44
+ const isPromise = (val) => {
45
+ return isObject(val) && isFunction(val.then) && isFunction(val.catch);
46
+ };
47
+ export { TypeOfFun as T, isPromise as i };
@@ -133,6 +133,12 @@
133
133
  padding: 0 $padding-xs;
134
134
  font-size: $font-size-1;
135
135
  }
136
+ &--mini {
137
+ height: $button-mini-height;
138
+ line-height: 1.2;
139
+ padding: 0 $padding-xs;
140
+ font-size: $font-size-1;
141
+ }
136
142
 
137
143
  &--block {
138
144
  display: block;
@@ -0,0 +1,97 @@
1
+ .nut-card {
2
+ width: 100%;
3
+ display: flex;
4
+
5
+ .nut-card__left {
6
+ width: 120px;
7
+ height: 120px;
8
+ flex-shrink: 0;
9
+
10
+ > img {
11
+ display: block;
12
+ width: 100%;
13
+ height: 100%;
14
+ }
15
+ }
16
+
17
+ .nut-card__right {
18
+ flex: 1;
19
+ padding: 0 10px 8px;
20
+
21
+ .nut-card__right__title {
22
+ display: -webkit-box;
23
+ -webkit-box-orient: vertical;
24
+ -webkit-line-clamp: 2;
25
+ overflow: hidden;
26
+ word-break: break-all;
27
+ line-height: 1.5;
28
+ font-size: 14px;
29
+ }
30
+
31
+ .nut-card__right__price {
32
+ display: flex;
33
+ align-items: center;
34
+ height: 18px;
35
+ line-height: 18px;
36
+ margin-top: 9px;
37
+
38
+ .nut-price {
39
+ .nut-price--symbol-large {
40
+ font-size: 12px;
41
+ }
42
+
43
+ .nut-price--large {
44
+ font-size: 18px;
45
+ }
46
+
47
+ .nut-price--decimal-large {
48
+ font-size: 12px;
49
+ }
50
+ }
51
+
52
+ .nut-card__right__price__origin {
53
+ &.nut-price {
54
+ margin-left: 2px;
55
+ color: #d2a448;
56
+
57
+ .nut-price--symbol-large {
58
+ font-size: 12px;
59
+ }
60
+
61
+ .nut-price--large {
62
+ font-size: 12px;
63
+ }
64
+
65
+ .nut-price--decimal-large {
66
+ font-size: 12px;
67
+ }
68
+ }
69
+ }
70
+ }
71
+
72
+ .nut-card__right__other {
73
+ display: flex;
74
+ align-items: center;
75
+ padding: 5px 0 2px;
76
+ .nut-tag {
77
+ border: none;
78
+ padding: 0 2px;
79
+ margin-right: 5px;
80
+ font-size: $card-font-size-0;
81
+ }
82
+ }
83
+
84
+ .nut-card__right__shop {
85
+ display: flex;
86
+ justify-content: space-between;
87
+ align-items: center;
88
+
89
+ .nut-card__right__shop__name {
90
+ line-height: 1.5;
91
+ color: #999;
92
+ font-size: 12px;
93
+ padding-top: 4px;
94
+ }
95
+ }
96
+ }
97
+ }
@@ -9,6 +9,15 @@
9
9
  margin-top: 30px;
10
10
  margin-bottom: 10px;
11
11
  }
12
+ &__desc {
13
+ display: inherit;
14
+ padding: $cell-group-desc-padding;
15
+ color: $cell-group-desc-color;
16
+ font-size: $cell-group-desc-font-size;
17
+ line-height: $cell-group-desc-line-height;
18
+ margin-top: 10px;
19
+ margin-bottom: 10px;
20
+ }
12
21
  &__warp {
13
22
  display: inherit;
14
23
  border-radius: $cell-border-radius;
@@ -10,7 +10,7 @@
10
10
  }
11
11
  &__label {
12
12
  margin-left: 15px;
13
- font-size: 16px;
13
+ font-size: 14px;
14
14
  color: $checkbox-label-color;
15
15
  &--disabled {
16
16
  color: $checkbox-label-disable-color;
@@ -34,6 +34,23 @@
34
34
  width: 100%;
35
35
  justify-content: space-around;
36
36
 
37
+ &.horizontal {
38
+ }
39
+ &.vertical {
40
+ flex-direction: column;
41
+
42
+ .nut-button {
43
+ min-width: 100%;
44
+ margin: 0;
45
+ &.nut-dialog__footer-cancel {
46
+ border: 0;
47
+ }
48
+ &.nut-dialog__footer-ok {
49
+ margin-top: 10px;
50
+ }
51
+ }
52
+ }
53
+
37
54
  .nut-button {
38
55
  min-width: 100px;
39
56
  }
@@ -4,6 +4,10 @@
4
4
  z-index: 9997 !important;
5
5
  width: fit-content;
6
6
  height: fit-content;
7
+
8
+ .nut-fixednav {
9
+ position: relative !important;
10
+ }
7
11
  }
8
12
  .nut-taro-drag {
9
13
  // position: fixed;
@@ -55,7 +55,9 @@
55
55
  right: 0;
56
56
  transform: translateX(100%);
57
57
  transition: all 0.5s;
58
-
58
+ box-sizing: border-box;
59
+ padding: 0;
60
+ margin: 0;
59
61
  z-index: $fixednav-index;
60
62
  flex-shrink: 0;
61
63
  height: 100%;
@@ -69,6 +71,9 @@
69
71
  right: 80px;
70
72
  }
71
73
  &-item {
74
+ box-sizing: border-box;
75
+ padding: 0;
76
+ margin: 0;
72
77
  position: relative;
73
78
  flex: 1;
74
79
  height: 100%;
@@ -0,0 +1,2 @@
1
+ .nut-form {
2
+ }
@@ -0,0 +1,63 @@
1
+ .nut-form-item {
2
+ display: flex;
3
+ &::before {
4
+ position: absolute;
5
+ box-sizing: border-box;
6
+ content: ' ';
7
+ pointer-events: none;
8
+ right: 16px;
9
+ bottom: 0;
10
+ left: 16px;
11
+ transform: scaleX(0);
12
+ }
13
+ &.error {
14
+ &.line {
15
+ &::before {
16
+ border-bottom: 1px solid $form-item-error-line-color;
17
+ transform: scaleX(1);
18
+ transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
19
+ }
20
+ }
21
+ }
22
+
23
+ &__label {
24
+ font-size: 14px;
25
+ font-weight: normal;
26
+ width: 90px;
27
+ margin-right: 10px;
28
+ flex: none;
29
+ display: inline-block;
30
+ word-wrap: break-word;
31
+ &.required {
32
+ &::before {
33
+ content: '*';
34
+ color: $form-item-required-color;
35
+ margin-right: 4px;
36
+ }
37
+ }
38
+ }
39
+ &__body {
40
+ flex: 1;
41
+ display: flex;
42
+ flex-direction: column;
43
+ &__slots {
44
+ .nut-input-text {
45
+ font-size: 14px;
46
+ width: 100%;
47
+ outline: 0 none;
48
+ border: 0;
49
+ text-decoration: none;
50
+ }
51
+ .nut-range-container {
52
+ min-height: 24px;
53
+ }
54
+ .nut-textarea {
55
+ padding: 0 !important;
56
+ }
57
+ }
58
+ &__tips {
59
+ font-size: 10px;
60
+ color: $form-item-error-message-color;
61
+ }
62
+ }
63
+ }
@@ -19,7 +19,8 @@
19
19
  height: $icon-height;
20
20
  object-fit: contain;
21
21
  }
22
- &-loading {
22
+ &-loading,
23
+ &-loading1 {
23
24
  display: inline-block;
24
25
  animation: loadingCircle 1s infinite linear;
25
26
  }
@@ -1,73 +1,45 @@
1
- .nut-menu {
1
+ .nut-menu__bar {
2
2
  position: relative;
3
- font-size: 14px;
4
- color: #1a1a1a;
3
+ display: flex;
4
+ line-height: $nut-menu-bar-line-height;
5
+ background-color: $white;
6
+ border-bottom: 1px solid $nut-menu-bar-border-bottom-color;
5
7
 
6
- .title-list {
7
- display: flex;
8
- line-height: 46px;
9
- align-items: center;
10
- background-color: #fff;
11
- border-bottom: 1px solid #eaf0fb;
12
-
13
- .title {
14
- flex: 1;
15
- text-align: center;
16
-
17
- &.is-active {
18
- font-weight: 600;
19
- }
20
-
21
- &.disabled {
22
- color: #999;
23
- }
24
-
25
- [class*='nut-icon-arrow'] {
26
- vertical-align: middle;
27
- margin-right: 2px;
28
- }
29
- }
8
+ &.opened {
9
+ z-index: $nut-menu-bar-opened-z-index;
30
10
  }
31
11
 
32
- %itemCommon {
33
- position: absolute;
34
- left: 0;
35
- width: 100%;
36
- padding-top: 12px;
37
- padding-bottom: 12px;
38
- border-radius: 0 0 12px 12px;
39
- background-color: #fff;
40
- }
12
+ .nut-menu__item {
13
+ flex: 1;
14
+ text-align: center;
15
+ font-size: $font-size-2;
16
+ color: $title-color;
17
+ min-width: 0;
41
18
 
42
- .option-list {
43
- @extend %itemCommon;
44
- max-height: 214px;
45
- overflow-y: auto;
19
+ &.disabled {
20
+ color: $nut-menu-item-disabled-color;
21
+ }
46
22
 
47
- ul {
48
- display: flex;
49
- flex-wrap: wrap;
50
- list-style: none;
51
- margin: 0;
52
- padding: 0;
23
+ .nut-menu__title-icon {
24
+ transition: all 0.2s linear;
53
25
  }
54
26
 
55
- li {
56
- line-height: 38px;
57
- padding-left: 24px;
58
- box-sizing: border-box;
27
+ .nut-menu__title {
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ max-width: 100%;
32
+
33
+ .nut-menu__title-text {
34
+ @include text-ellipsis;
35
+ display: block;
36
+ padding-left: $nut-menu-title-text-padding-left;
37
+ padding-right: $nut-menu-title-text-padding-right;
38
+ }
59
39
 
60
- .nut-icon-Check {
61
- vertical-align: middle;
62
- margin-right: 6px;
40
+ &.active .nut-menu__title-icon {
41
+ transform: rotate(180deg);
63
42
  }
64
43
  }
65
44
  }
66
-
67
- .customer-item {
68
- @extend %itemCommon;
69
- padding-left: 24px;
70
- padding-right: 24px;
71
- box-sizing: border-box;
72
- }
73
45
  }