cleek 2.10.11 → 2.10.13
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.
- package/LICENSE +21 -21
- package/README.md +66 -66
- package/dist/cleek-styles/clear-app.styl +34 -34
- package/dist/cleek-styles/cleek-classes.styl +6 -6
- package/dist/cleek-styles/cleek-mixins.styl +127 -127
- package/dist/cleek-styles/tiny-tailwind/.custom.styl +8 -8
- package/dist/cleek-styles/tiny-tailwind/align-items.styl +10 -10
- package/dist/cleek-styles/tiny-tailwind/cursor.styl +72 -72
- package/dist/cleek-styles/tiny-tailwind/display.styl +42 -42
- package/dist/cleek-styles/tiny-tailwind/flex-shrink.styl +4 -4
- package/dist/cleek-styles/tiny-tailwind/flex-wrap.styl +6 -6
- package/dist/cleek-styles/tiny-tailwind/font-weight.styl +18 -18
- package/dist/cleek-styles/tiny-tailwind/index.styl +15 -15
- package/dist/cleek-styles/tiny-tailwind/justify-content.styl +12 -12
- package/dist/cleek-styles/tiny-tailwind/margin.styl +576 -576
- package/dist/cleek-styles/tiny-tailwind/padding.styl +576 -576
- package/dist/cleek-styles/tiny-tailwind/position.styl +10 -10
- package/dist/cleek-styles/tiny-tailwind/text-align.styl +8 -8
- package/dist/cleek-styles/tiny-tailwind/whitespace.styl +10 -10
- package/dist/cleek-styles/tiny-tailwind/width.styl +72 -72
- package/dist/main.cjs.js +145 -352
- package/dist/main.css +1 -1
- package/dist/main.es.js +49073 -48855
- package/dist/types/cleek-options/cleek-options.store.d.ts +421 -1
- package/dist/types/components/ck-button.vue.d.ts +4 -4
- package/dist/types/components/ck-card.vue.d.ts +4 -4
- package/dist/types/components/ck-checkbox.vue.d.ts +11 -11
- package/dist/types/components/ck-chip.vue.d.ts +4 -4
- package/dist/types/components/ck-circle.vue.d.ts +4 -4
- package/dist/types/components/ck-div.vue.d.ts +4 -4
- package/dist/types/components/ck-dropdown/ck-dropdown.vue.d.ts +3 -3
- package/dist/types/components/ck-icon.vue.d.ts +4 -4
- package/dist/types/components/ck-img.vue.d.ts +4 -4
- package/dist/types/components/ck-input/ck-input-date.vue.d.ts +4 -4
- package/dist/types/components/ck-input/ck-input-time.vue.d.ts +4 -4
- package/dist/types/components/ck-input.vue.d.ts +22 -22
- package/dist/types/components/ck-label.vue.d.ts +3 -3
- package/dist/types/components/ck-navbar/ck-navbar.vue.d.ts +3 -3
- package/dist/types/components/ck-notify/components/CkAlert.vue.d.ts +4 -4
- package/dist/types/components/ck-notify/components/CkConfirm.vue.d.ts +7 -7
- package/dist/types/components/ck-notify/components/CkNotify.vue.d.ts +6 -6
- package/dist/types/components/ck-popup.vue.d.ts +5 -5
- package/dist/types/components/ck-radio.vue.d.ts +4 -4
- package/dist/types/components/ck-select.vue.d.ts +5 -5
- package/dist/types/components/ck-sidebar.vue.d.ts +3 -3
- package/dist/types/components/ck-switch-options.vue.d.ts +5 -5
- package/dist/types/components/ck-switch.vue.d.ts +4 -4
- package/dist/types/components/ck-table/ck-pagination/ck-pagination.vue.d.ts +4 -4
- package/dist/types/components/ck-table/ck-table.vue.d.ts +4 -4
- package/dist/types/components/ck-table/ck-td.vue.d.ts +3 -3
- package/dist/types/components/ck-table/ck-th.vue.d.ts +3 -3
- package/dist/types/components/ck-table/ck-tr.vue.d.ts +1 -1
- package/dist/types/components/ck-table/inner-components/ck-table__columns-manager.vue.d.ts +4 -4
- package/dist/types/components/ck-table/inner-components/ck-table__header-items.vue.d.ts +4 -4
- package/dist/types/components/ck-table/inner-components/ck-table__pagination.vue.d.ts +4 -4
- package/dist/types/components/ck-table/inner-components/ck-table__title.vue.d.ts +3 -3
- package/dist/types/components/ck-tabs/ck-tab.vue.d.ts +3 -3
- package/dist/types/components/ck-tabs/ck-tabs.vue.d.ts +1 -1
- package/dist/types/components/ck-textarea.vue.d.ts +5 -5
- package/dist/types/components/ck-toggle/ck-toggle.vue.d.ts +4 -4
- package/dist/types/components/showers/ck-datetime-shower.vue.d.ts +4 -4
- package/dist/types/components/showers/ck-time-shower.vue.d.ts +3 -3
- package/dist/types/hooks/rainbow.d.ts +1 -1
- package/dist/types/hooks/windowWidth.d.ts +1 -1
- package/dist/types/resources/floating-vue.config.d.ts +8 -0
- package/dist/types/{package-config.d.ts → resources/package-config.d.ts} +1 -1
- package/package.json +85 -85
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2022 Quantic Onion
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 Quantic Onion
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
# 🌙 Cleek
|
|
2
|
-
|
|
3
|
-
A lightweight Vue 3 component library.
|
|
4
|
-
|
|
5
|
-
When you are starting a new prototype you want to be able to develop features fast. We created this component library as a way for us to build products quickly without having to deal with complicated packages and a huge bundle sizes.
|
|
6
|
-
|
|
7
|
-
## Usage
|
|
8
|
-
|
|
9
|
-
First install the library using your prefered package manager
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
yarn add cleek
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
then you can import the available components like so
|
|
16
|
-
|
|
17
|
-
```vue
|
|
18
|
-
import { Button } from cleek
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## Available commands
|
|
22
|
-
|
|
23
|
-
Here is a list of all available npm commands.
|
|
24
|
-
|
|
25
|
-
**Starting the dev environment**
|
|
26
|
-
We use Vue Press to hold our component documentation and examples
|
|
27
|
-
|
|
28
|
-
```bash
|
|
29
|
-
yarn dev
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
**Building the documentation**
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
yarn build
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
**Serving the documentation**
|
|
39
|
-
|
|
40
|
-
```bash
|
|
41
|
-
yarn serve
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
**Building the library bundles**
|
|
45
|
-
|
|
46
|
-
```bash
|
|
47
|
-
yarn build:library
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
**Analyzing bundle sizes with [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer)**
|
|
51
|
-
|
|
52
|
-
```bash
|
|
53
|
-
yarn analyze
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
**Lint all files**
|
|
57
|
-
|
|
58
|
-
```bash
|
|
59
|
-
yarn lint
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
**Format all files**
|
|
63
|
-
|
|
64
|
-
```bash
|
|
65
|
-
yarn format
|
|
66
|
-
```
|
|
1
|
+
# 🌙 Cleek
|
|
2
|
+
|
|
3
|
+
A lightweight Vue 3 component library.
|
|
4
|
+
|
|
5
|
+
When you are starting a new prototype you want to be able to develop features fast. We created this component library as a way for us to build products quickly without having to deal with complicated packages and a huge bundle sizes.
|
|
6
|
+
|
|
7
|
+
## Usage
|
|
8
|
+
|
|
9
|
+
First install the library using your prefered package manager
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
yarn add cleek
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
then you can import the available components like so
|
|
16
|
+
|
|
17
|
+
```vue
|
|
18
|
+
import { Button } from cleek
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Available commands
|
|
22
|
+
|
|
23
|
+
Here is a list of all available npm commands.
|
|
24
|
+
|
|
25
|
+
**Starting the dev environment**
|
|
26
|
+
We use Vue Press to hold our component documentation and examples
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
yarn dev
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
**Building the documentation**
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
yarn build
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
**Serving the documentation**
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
yarn serve
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
**Building the library bundles**
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
yarn build:library
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
**Analyzing bundle sizes with [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer)**
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
yarn analyze
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
**Lint all files**
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
yarn lint
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
**Format all files**
|
|
63
|
+
|
|
64
|
+
```bash
|
|
65
|
+
yarn format
|
|
66
|
+
```
|
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
h1,
|
|
2
|
-
h2,
|
|
3
|
-
h3,
|
|
4
|
-
h4,
|
|
5
|
-
h5,
|
|
6
|
-
h6,
|
|
7
|
-
div,
|
|
8
|
-
span,
|
|
9
|
-
p,
|
|
10
|
-
ul,
|
|
11
|
-
ol,
|
|
12
|
-
li
|
|
13
|
-
margin 0
|
|
14
|
-
padding 0
|
|
15
|
-
box-sizing border-box
|
|
16
|
-
a
|
|
17
|
-
color unset
|
|
18
|
-
text-decoration unset
|
|
19
|
-
ul
|
|
20
|
-
list-style-type none
|
|
21
|
-
|
|
22
|
-
body
|
|
23
|
-
margin 0
|
|
24
|
-
padding 0
|
|
25
|
-
|
|
26
|
-
// INPUT NUMBER ARROWS
|
|
27
|
-
/* Chrome, Safari, Edge, Opera */
|
|
28
|
-
input::-webkit-outer-spin-button
|
|
29
|
-
input::-webkit-inner-spin-button
|
|
30
|
-
-webkit-appearance none
|
|
31
|
-
margin 0
|
|
32
|
-
/* Firefox */
|
|
33
|
-
input[type=number]
|
|
34
|
-
-moz-appearance textfield
|
|
1
|
+
h1,
|
|
2
|
+
h2,
|
|
3
|
+
h3,
|
|
4
|
+
h4,
|
|
5
|
+
h5,
|
|
6
|
+
h6,
|
|
7
|
+
div,
|
|
8
|
+
span,
|
|
9
|
+
p,
|
|
10
|
+
ul,
|
|
11
|
+
ol,
|
|
12
|
+
li
|
|
13
|
+
margin 0
|
|
14
|
+
padding 0
|
|
15
|
+
box-sizing border-box
|
|
16
|
+
a
|
|
17
|
+
color unset
|
|
18
|
+
text-decoration unset
|
|
19
|
+
ul
|
|
20
|
+
list-style-type none
|
|
21
|
+
|
|
22
|
+
body
|
|
23
|
+
margin 0
|
|
24
|
+
padding 0
|
|
25
|
+
|
|
26
|
+
// INPUT NUMBER ARROWS
|
|
27
|
+
/* Chrome, Safari, Edge, Opera */
|
|
28
|
+
input::-webkit-outer-spin-button
|
|
29
|
+
input::-webkit-inner-spin-button
|
|
30
|
+
-webkit-appearance none
|
|
31
|
+
margin 0
|
|
32
|
+
/* Firefox */
|
|
33
|
+
input[type=number]
|
|
34
|
+
-moz-appearance textfield
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
.ck-inputs--container
|
|
2
|
-
display flex
|
|
3
|
-
align-items flex-end
|
|
4
|
-
flex-wrap wrap
|
|
5
|
-
.ck-inputs--item
|
|
6
|
-
margin-bottom 0.5rem
|
|
1
|
+
.ck-inputs--container
|
|
2
|
+
display flex
|
|
3
|
+
align-items flex-end
|
|
4
|
+
flex-wrap wrap
|
|
5
|
+
.ck-inputs--item
|
|
6
|
+
margin-bottom 0.5rem
|
|
@@ -1,127 +1,127 @@
|
|
|
1
|
-
// margin
|
|
2
|
-
margin-x($margin-x)
|
|
3
|
-
margin-left $margin-x
|
|
4
|
-
margin-right $margin-x
|
|
5
|
-
margin-y($margin-y)
|
|
6
|
-
margin-top $margin-y
|
|
7
|
-
margin-bottom $margin-y
|
|
8
|
-
margin-left-right($margin-left, $margin-right)
|
|
9
|
-
margin-left $margin-left
|
|
10
|
-
margin-right $margin-right
|
|
11
|
-
margin-top-bottom($margin-top, $margin-bottom)
|
|
12
|
-
margin-top $margin-top
|
|
13
|
-
margin-bottom $margin-bottom
|
|
14
|
-
// padding
|
|
15
|
-
padding-x($padding-x)
|
|
16
|
-
padding-left $padding-x
|
|
17
|
-
padding-right $padding-x
|
|
18
|
-
padding-y($padding-y)
|
|
19
|
-
padding-top $padding-y
|
|
20
|
-
padding-bottom $padding-y
|
|
21
|
-
padding-left-right($padding-left, $padding-right)
|
|
22
|
-
padding-left $padding-left
|
|
23
|
-
padding-right $padding-right
|
|
24
|
-
padding-top-bottom($padding-top, $padding-bottom)
|
|
25
|
-
padding-top $padding-top
|
|
26
|
-
padding-bottom $padding-bottom
|
|
27
|
-
// border
|
|
28
|
-
border-x($width, $type, $color)
|
|
29
|
-
border-left $width $type $color
|
|
30
|
-
border-right $width $type $color
|
|
31
|
-
border-y($width, $type, $color)
|
|
32
|
-
border-top $width $type $color
|
|
33
|
-
border-bottom $width $type $color
|
|
34
|
-
// border-radius
|
|
35
|
-
border-radius-left($radius)
|
|
36
|
-
border-top-left-radius $radius
|
|
37
|
-
border-bottom-left-radius $radius
|
|
38
|
-
border-radius-right($radius)
|
|
39
|
-
border-top-right-radius $radius
|
|
40
|
-
border-bottom-right-radius $radius
|
|
41
|
-
border-radius-top($radius)
|
|
42
|
-
border-top-left-radius $radius
|
|
43
|
-
border-top-right-radius $radius
|
|
44
|
-
border-radius-bottom($radius)
|
|
45
|
-
border-bottom-left-radius $radius
|
|
46
|
-
border-bottom-right-radius $radius
|
|
47
|
-
// width - height
|
|
48
|
-
width-height($val)
|
|
49
|
-
width $val
|
|
50
|
-
height $val
|
|
51
|
-
min-max-width($val)
|
|
52
|
-
min-width $val
|
|
53
|
-
max-width $val
|
|
54
|
-
min-max-height($val)
|
|
55
|
-
min-height $val
|
|
56
|
-
max-height $val
|
|
57
|
-
// margin - padding
|
|
58
|
-
margin-padding($val)
|
|
59
|
-
margin $val
|
|
60
|
-
padding $val
|
|
61
|
-
margin-padding-left($val)
|
|
62
|
-
margin-left $val
|
|
63
|
-
padding-left $val
|
|
64
|
-
margin-padding-right($val)
|
|
65
|
-
margin-right $val
|
|
66
|
-
padding-right $val
|
|
67
|
-
margin-padding-top($val)
|
|
68
|
-
margin-top $val
|
|
69
|
-
padding-top $val
|
|
70
|
-
margin-padding-bottom($val)
|
|
71
|
-
margin-bottom $val
|
|
72
|
-
padding-bottom $val
|
|
73
|
-
// box-shadow
|
|
74
|
-
my-box-shadow($val = 0.05, $color = black)
|
|
75
|
-
box-shadow 0 4px 20px 0 rgba($color, $val)
|
|
76
|
-
ck-box-shadow($val = 0.05, $color = black)
|
|
77
|
-
box-shadow 0 4px 20px 0 rgba($color, $val)
|
|
78
|
-
// flex
|
|
79
|
-
flex($flex-direction = row, $justify-content = flex-start, $align-items = stretch, $gap = 0, $flex-wrap = nowrap)
|
|
80
|
-
display flex
|
|
81
|
-
flex-direction $flex-direction
|
|
82
|
-
justify-content $justify-content
|
|
83
|
-
align-items $align-items
|
|
84
|
-
gap $gap
|
|
85
|
-
flex-wrap $flex-wrap
|
|
86
|
-
flex-center()
|
|
87
|
-
display flex
|
|
88
|
-
align-items center
|
|
89
|
-
justify-content center
|
|
90
|
-
inline-flex-center()
|
|
91
|
-
display inline-flex
|
|
92
|
-
align-items center
|
|
93
|
-
justify-content center
|
|
94
|
-
|
|
95
|
-
unselectable()
|
|
96
|
-
user-select none
|
|
97
|
-
-moz-user-select none
|
|
98
|
-
-khtml-user-select none
|
|
99
|
-
-webkit-user-select none
|
|
100
|
-
-o-user-select none
|
|
101
|
-
|
|
102
|
-
dynamic-rgba($rgb-variable, $opacity = 1)
|
|
103
|
-
// return rgba as a string so it doesn't get interpolated by stylus compiler
|
|
104
|
-
s('rgba(var(%s), %s)', $rgb-variable, $opacity)
|
|
105
|
-
|
|
106
|
-
//
|
|
107
|
-
//
|
|
108
|
-
//
|
|
109
|
-
//
|
|
110
|
-
//
|
|
111
|
-
// rs components
|
|
112
|
-
// rs-components-basic-input(heightDiference = 2px)
|
|
113
|
-
// width 100%
|
|
114
|
-
// border rsComponentsBorder
|
|
115
|
-
// border-radius rsComponentsBorderRadius
|
|
116
|
-
// min-height rsComponentsHeight + heightDiference
|
|
117
|
-
// background-color white
|
|
118
|
-
// &:focus-within
|
|
119
|
-
// border-color var(--primary)
|
|
120
|
-
// my-box-shadow()
|
|
121
|
-
|
|
122
|
-
input-disabled()
|
|
123
|
-
user-select none
|
|
124
|
-
cursor not-allowed
|
|
125
|
-
color $color-disabled
|
|
126
|
-
background-color $color-disabled-bg
|
|
127
|
-
border-color $color-disabled
|
|
1
|
+
// margin
|
|
2
|
+
margin-x($margin-x)
|
|
3
|
+
margin-left $margin-x
|
|
4
|
+
margin-right $margin-x
|
|
5
|
+
margin-y($margin-y)
|
|
6
|
+
margin-top $margin-y
|
|
7
|
+
margin-bottom $margin-y
|
|
8
|
+
margin-left-right($margin-left, $margin-right)
|
|
9
|
+
margin-left $margin-left
|
|
10
|
+
margin-right $margin-right
|
|
11
|
+
margin-top-bottom($margin-top, $margin-bottom)
|
|
12
|
+
margin-top $margin-top
|
|
13
|
+
margin-bottom $margin-bottom
|
|
14
|
+
// padding
|
|
15
|
+
padding-x($padding-x)
|
|
16
|
+
padding-left $padding-x
|
|
17
|
+
padding-right $padding-x
|
|
18
|
+
padding-y($padding-y)
|
|
19
|
+
padding-top $padding-y
|
|
20
|
+
padding-bottom $padding-y
|
|
21
|
+
padding-left-right($padding-left, $padding-right)
|
|
22
|
+
padding-left $padding-left
|
|
23
|
+
padding-right $padding-right
|
|
24
|
+
padding-top-bottom($padding-top, $padding-bottom)
|
|
25
|
+
padding-top $padding-top
|
|
26
|
+
padding-bottom $padding-bottom
|
|
27
|
+
// border
|
|
28
|
+
border-x($width, $type, $color)
|
|
29
|
+
border-left $width $type $color
|
|
30
|
+
border-right $width $type $color
|
|
31
|
+
border-y($width, $type, $color)
|
|
32
|
+
border-top $width $type $color
|
|
33
|
+
border-bottom $width $type $color
|
|
34
|
+
// border-radius
|
|
35
|
+
border-radius-left($radius)
|
|
36
|
+
border-top-left-radius $radius
|
|
37
|
+
border-bottom-left-radius $radius
|
|
38
|
+
border-radius-right($radius)
|
|
39
|
+
border-top-right-radius $radius
|
|
40
|
+
border-bottom-right-radius $radius
|
|
41
|
+
border-radius-top($radius)
|
|
42
|
+
border-top-left-radius $radius
|
|
43
|
+
border-top-right-radius $radius
|
|
44
|
+
border-radius-bottom($radius)
|
|
45
|
+
border-bottom-left-radius $radius
|
|
46
|
+
border-bottom-right-radius $radius
|
|
47
|
+
// width - height
|
|
48
|
+
width-height($val)
|
|
49
|
+
width $val
|
|
50
|
+
height $val
|
|
51
|
+
min-max-width($val)
|
|
52
|
+
min-width $val
|
|
53
|
+
max-width $val
|
|
54
|
+
min-max-height($val)
|
|
55
|
+
min-height $val
|
|
56
|
+
max-height $val
|
|
57
|
+
// margin - padding
|
|
58
|
+
margin-padding($val)
|
|
59
|
+
margin $val
|
|
60
|
+
padding $val
|
|
61
|
+
margin-padding-left($val)
|
|
62
|
+
margin-left $val
|
|
63
|
+
padding-left $val
|
|
64
|
+
margin-padding-right($val)
|
|
65
|
+
margin-right $val
|
|
66
|
+
padding-right $val
|
|
67
|
+
margin-padding-top($val)
|
|
68
|
+
margin-top $val
|
|
69
|
+
padding-top $val
|
|
70
|
+
margin-padding-bottom($val)
|
|
71
|
+
margin-bottom $val
|
|
72
|
+
padding-bottom $val
|
|
73
|
+
// box-shadow
|
|
74
|
+
my-box-shadow($val = 0.05, $color = black)
|
|
75
|
+
box-shadow 0 4px 20px 0 rgba($color, $val)
|
|
76
|
+
ck-box-shadow($val = 0.05, $color = black)
|
|
77
|
+
box-shadow 0 4px 20px 0 rgba($color, $val)
|
|
78
|
+
// flex
|
|
79
|
+
flex($flex-direction = row, $justify-content = flex-start, $align-items = stretch, $gap = 0, $flex-wrap = nowrap)
|
|
80
|
+
display flex
|
|
81
|
+
flex-direction $flex-direction
|
|
82
|
+
justify-content $justify-content
|
|
83
|
+
align-items $align-items
|
|
84
|
+
gap $gap
|
|
85
|
+
flex-wrap $flex-wrap
|
|
86
|
+
flex-center()
|
|
87
|
+
display flex
|
|
88
|
+
align-items center
|
|
89
|
+
justify-content center
|
|
90
|
+
inline-flex-center()
|
|
91
|
+
display inline-flex
|
|
92
|
+
align-items center
|
|
93
|
+
justify-content center
|
|
94
|
+
|
|
95
|
+
unselectable()
|
|
96
|
+
user-select none
|
|
97
|
+
-moz-user-select none
|
|
98
|
+
-khtml-user-select none
|
|
99
|
+
-webkit-user-select none
|
|
100
|
+
-o-user-select none
|
|
101
|
+
|
|
102
|
+
dynamic-rgba($rgb-variable, $opacity = 1)
|
|
103
|
+
// return rgba as a string so it doesn't get interpolated by stylus compiler
|
|
104
|
+
s('rgba(var(%s), %s)', $rgb-variable, $opacity)
|
|
105
|
+
|
|
106
|
+
//
|
|
107
|
+
//
|
|
108
|
+
//
|
|
109
|
+
//
|
|
110
|
+
//
|
|
111
|
+
// rs components
|
|
112
|
+
// rs-components-basic-input(heightDiference = 2px)
|
|
113
|
+
// width 100%
|
|
114
|
+
// border rsComponentsBorder
|
|
115
|
+
// border-radius rsComponentsBorderRadius
|
|
116
|
+
// min-height rsComponentsHeight + heightDiference
|
|
117
|
+
// background-color white
|
|
118
|
+
// &:focus-within
|
|
119
|
+
// border-color var(--primary)
|
|
120
|
+
// my-box-shadow()
|
|
121
|
+
|
|
122
|
+
input-disabled()
|
|
123
|
+
user-select none
|
|
124
|
+
cursor not-allowed
|
|
125
|
+
color $color-disabled
|
|
126
|
+
background-color $color-disabled-bg
|
|
127
|
+
border-color $color-disabled
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
.nowrap
|
|
2
|
-
white-space nowrap
|
|
3
|
-
.w-half
|
|
4
|
-
width 50%
|
|
5
|
-
.help-text
|
|
6
|
-
opacity 0.7
|
|
7
|
-
text-align center
|
|
8
|
-
font-style italic
|
|
1
|
+
.nowrap
|
|
2
|
+
white-space nowrap
|
|
3
|
+
.w-half
|
|
4
|
+
width 50%
|
|
5
|
+
.help-text
|
|
6
|
+
opacity 0.7
|
|
7
|
+
text-align center
|
|
8
|
+
font-style italic
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
.items-start
|
|
2
|
-
align-items flex-start
|
|
3
|
-
.items-end
|
|
4
|
-
align-items flex-end
|
|
5
|
-
.items-center
|
|
6
|
-
align-items center
|
|
7
|
-
.items-baseline
|
|
8
|
-
align-items baseline
|
|
9
|
-
.items-stretch
|
|
10
|
-
align-items stretch
|
|
1
|
+
.items-start
|
|
2
|
+
align-items flex-start
|
|
3
|
+
.items-end
|
|
4
|
+
align-items flex-end
|
|
5
|
+
.items-center
|
|
6
|
+
align-items center
|
|
7
|
+
.items-baseline
|
|
8
|
+
align-items baseline
|
|
9
|
+
.items-stretch
|
|
10
|
+
align-items stretch
|