1 |
|
2 | @use '../test_base' as *;
|
3 |
|
4 | @use '../../src/internal/mixins';
|
5 |
|
6 |
|
7 |
|
8 |
|
9 | @include describe('explode-properties()') {
|
10 | @include it('should return map of CSS properties and values as CSS') {
|
11 | @include assert {
|
12 | @include output {
|
13 | .avatar {
|
14 | @include mixins.explode-properties(
|
15 | (
|
16 | border-radius: 50%,
|
17 | padding: 1rem,
|
18 | )
|
19 | );
|
20 | background-color: #fff;
|
21 | }
|
22 | }
|
23 | @include expect {
|
24 | .avatar {
|
25 | border-radius: 50%;
|
26 | padding: 1rem;
|
27 | background-color: #fff;
|
28 | }
|
29 | }
|
30 | }
|
31 | }
|
32 | }
|
33 |
|
34 |
|
35 |
|
36 |
|
37 | @include describe('input-success()') {
|
38 | @include it('should return styles for input with success state') {
|
39 | @include assert {
|
40 | @include output {
|
41 | .input--success {
|
42 | @include mixins.input-success();
|
43 | }
|
44 | }
|
45 | @include expect {
|
46 | .input--success {
|
47 | border-color: #0dd157;
|
48 |
|
49 | &:focus {
|
50 | box-shadow: 0 0 0 0.2rem transparentize($cirrus-success, 1 - $focus-opacity), inset 0px 1px 8px rgba(0, 0, 0, 0.07);
|
51 | }
|
52 | }
|
53 | }
|
54 | }
|
55 | }
|
56 | }
|
57 |
|
58 |
|
59 |
|
60 |
|
61 | @include describe('input-error()') {
|
62 | @include it('should return styles for input in error state') {
|
63 | @include assert {
|
64 | @include output {
|
65 | .input--error {
|
66 | @include mixins.input-error();
|
67 | }
|
68 | }
|
69 | @include expect {
|
70 | .input--error {
|
71 | border-color: #fb4143;
|
72 |
|
73 | &:focus {
|
74 | box-shadow: 0 0 0 0.2rem transparentize($cirrus-danger, 1 - $focus-opacity), inset 0px 1px 8px rgba(0, 0, 0, 0.07);
|
75 | }
|
76 | }
|
77 | }
|
78 | }
|
79 | }
|
80 | }
|
81 |
|
82 |
|
83 |
|
84 |
|
85 | @include describe('elevate-on-focus()') {
|
86 | @include it('should return styles to bring class to front on focus') {
|
87 | @include assert {
|
88 | @include output {
|
89 | .test {
|
90 | @include mixins.elevate-on-focus();
|
91 | }
|
92 | }
|
93 | @include expect {
|
94 | .test {
|
95 | &:focus {
|
96 | z-index: 1;
|
97 | }
|
98 | }
|
99 | }
|
100 | }
|
101 | }
|
102 | }
|