@open-condo/ui 2.17.1 → 2.19.0
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/dist/components/Button/icon/iconButton.d.ts +9 -0
- package/dist/components/Button/icon/iconButton.d.ts.map +1 -0
- package/dist/components/Button/index.d.ts +8 -1
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Select/select.d.ts.map +1 -1
- package/dist/components/_utils/analytics.d.ts +3 -0
- package/dist/components/_utils/analytics.d.ts.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +832 -141
- package/dist/style-vars/variables.css +1 -1
- package/dist/style-vars/variables.less +1 -1
- package/dist/styles.css +199 -108
- package/dist/styles.min.css +2 -2
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -717,6 +717,9 @@
|
|
|
717
717
|
text-align: right;
|
|
718
718
|
}
|
|
719
719
|
.condo-typography {
|
|
720
|
+
transition-timing-function: ease-in;
|
|
721
|
+
transition-duration: 0.15s;
|
|
722
|
+
transition-property: color opacity text-decoration-color;
|
|
720
723
|
word-break: break-word;
|
|
721
724
|
}
|
|
722
725
|
.condo-typography-break-spaces {
|
|
@@ -3730,6 +3733,134 @@ a.condo-btn-secondary {
|
|
|
3730
3733
|
border-width: 1px;
|
|
3731
3734
|
}
|
|
3732
3735
|
|
|
3736
|
+
.condo-icon-btn {
|
|
3737
|
+
width: auto;
|
|
3738
|
+
min-width: inherit;
|
|
3739
|
+
height: auto;
|
|
3740
|
+
padding: 8px;
|
|
3741
|
+
background-color: transparent;
|
|
3742
|
+
border: none;
|
|
3743
|
+
border-radius: 8px;
|
|
3744
|
+
transition-timing-function: ease-in;
|
|
3745
|
+
transition-duration: 0.15s;
|
|
3746
|
+
transition-property: background;
|
|
3747
|
+
}
|
|
3748
|
+
.condo-icon-btn span {
|
|
3749
|
+
position: relative;
|
|
3750
|
+
z-index: 1;
|
|
3751
|
+
}
|
|
3752
|
+
.condo-icon-btn.focus-visible::after {
|
|
3753
|
+
box-sizing: border-box;
|
|
3754
|
+
background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
|
|
3755
|
+
border: 2px solid transparent;
|
|
3756
|
+
opacity: 1;
|
|
3757
|
+
-webkit-mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
|
|
3758
|
+
mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
|
|
3759
|
+
-webkit-mask: linear-gradient(#111 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
3760
|
+
mask: linear-gradient(#111 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
3761
|
+
-webkit-mask-composite: xor;
|
|
3762
|
+
mask-composite: exclude;
|
|
3763
|
+
}
|
|
3764
|
+
.condo-icon-btn.focus-visible::after {
|
|
3765
|
+
box-sizing: border-box;
|
|
3766
|
+
background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
|
|
3767
|
+
border: 2px solid transparent;
|
|
3768
|
+
opacity: 1;
|
|
3769
|
+
-webkit-mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
|
|
3770
|
+
mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
|
|
3771
|
+
-webkit-mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
|
|
3772
|
+
mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
|
|
3773
|
+
-webkit-mask: linear-gradient(#111 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
3774
|
+
mask: linear-gradient(#111 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
3775
|
+
-webkit-mask-composite: xor;
|
|
3776
|
+
mask-composite: exclude;
|
|
3777
|
+
}
|
|
3778
|
+
.condo-icon-btn:focus-visible::after {
|
|
3779
|
+
box-sizing: border-box;
|
|
3780
|
+
background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
|
|
3781
|
+
border: 2px solid transparent;
|
|
3782
|
+
opacity: 1;
|
|
3783
|
+
-webkit-mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
|
|
3784
|
+
mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
|
|
3785
|
+
-webkit-mask: linear-gradient(#111 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
3786
|
+
mask: linear-gradient(#111 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
3787
|
+
-webkit-mask-composite: xor;
|
|
3788
|
+
mask-composite: exclude;
|
|
3789
|
+
}
|
|
3790
|
+
.condo-icon-btn::before {
|
|
3791
|
+
position: absolute;
|
|
3792
|
+
top: 0px;
|
|
3793
|
+
right: 0px;
|
|
3794
|
+
bottom: 0px;
|
|
3795
|
+
left: 0px;
|
|
3796
|
+
display: block;
|
|
3797
|
+
border-radius: inherit;
|
|
3798
|
+
content: "";
|
|
3799
|
+
background: linear-gradient(90deg, #e2ffeb 0%, #e7f4ff 100%);
|
|
3800
|
+
opacity: 0;
|
|
3801
|
+
transition-timing-function: ease-in;
|
|
3802
|
+
transition-duration: 0.15s;
|
|
3803
|
+
transition-property: opacity;
|
|
3804
|
+
}
|
|
3805
|
+
.condo-icon-btn .condo-icon-btn-content {
|
|
3806
|
+
display: inline-flex;
|
|
3807
|
+
color: #222;
|
|
3808
|
+
transition-timing-function: ease-in;
|
|
3809
|
+
transition-duration: 0.15s;
|
|
3810
|
+
transition-property: color;
|
|
3811
|
+
}
|
|
3812
|
+
.condo-icon-btn .condo-icon-btn-content svg {
|
|
3813
|
+
color: #222;
|
|
3814
|
+
fill: currentcolor;
|
|
3815
|
+
transition-timing-function: ease-in;
|
|
3816
|
+
transition-duration: 0.15s;
|
|
3817
|
+
transition-property: color;
|
|
3818
|
+
}
|
|
3819
|
+
.condo-icon-btn:focus::after {
|
|
3820
|
+
position: absolute;
|
|
3821
|
+
top: -4px;
|
|
3822
|
+
right: -4px;
|
|
3823
|
+
bottom: -4px;
|
|
3824
|
+
left: -4px;
|
|
3825
|
+
display: block;
|
|
3826
|
+
border-radius: inherit;
|
|
3827
|
+
content: "";
|
|
3828
|
+
border-radius: 12px;
|
|
3829
|
+
}
|
|
3830
|
+
.condo-icon-btn:disabled {
|
|
3831
|
+
background-color: transparent;
|
|
3832
|
+
}
|
|
3833
|
+
.condo-icon-btn:disabled .condo-icon-btn-content {
|
|
3834
|
+
opacity: 0.5;
|
|
3835
|
+
}
|
|
3836
|
+
.condo-icon-btn:disabled:hover {
|
|
3837
|
+
background-color: transparent;
|
|
3838
|
+
}
|
|
3839
|
+
.condo-icon-btn:not(:disabled):hover::before {
|
|
3840
|
+
opacity: 1;
|
|
3841
|
+
}
|
|
3842
|
+
.condo-icon-btn:not(:disabled):hover .condo-icon-btn-content {
|
|
3843
|
+
color: #2bc359;
|
|
3844
|
+
}
|
|
3845
|
+
.condo-icon-btn:not(:disabled):hover .condo-icon-btn-content svg {
|
|
3846
|
+
color: #2bc359;
|
|
3847
|
+
}
|
|
3848
|
+
.condo-icon-btn:not(:disabled):active .condo-icon-btn-content,
|
|
3849
|
+
.condo-icon-btn:not(:disabled):active:hover .condo-icon-btn-content {
|
|
3850
|
+
color: #00b538;
|
|
3851
|
+
}
|
|
3852
|
+
.condo-icon-btn:not(:disabled):active .condo-icon-btn-content svg,
|
|
3853
|
+
.condo-icon-btn:not(:disabled):active:hover .condo-icon-btn-content svg {
|
|
3854
|
+
color: #00b538;
|
|
3855
|
+
}
|
|
3856
|
+
.condo-icon-btn.condo-icon-btn-small {
|
|
3857
|
+
padding: 2px;
|
|
3858
|
+
border-radius: 4px;
|
|
3859
|
+
}
|
|
3860
|
+
.condo-icon-btn.condo-icon-btn-small:focus::after {
|
|
3861
|
+
border-radius: 8px;
|
|
3862
|
+
}
|
|
3863
|
+
|
|
3733
3864
|
.condo-promo-block {
|
|
3734
3865
|
display: flex;
|
|
3735
3866
|
flex-direction: row;
|
|
@@ -4873,50 +5004,70 @@ a.condo-btn-secondary {
|
|
|
4873
5004
|
}
|
|
4874
5005
|
.condo-checkbox-wrapper .condo-checkbox {
|
|
4875
5006
|
top: 0;
|
|
4876
|
-
|
|
4877
|
-
|
|
4878
|
-
|
|
5007
|
+
border-color: #d0d3e5;
|
|
5008
|
+
transition-timing-function: ease-in;
|
|
5009
|
+
transition-duration: 0.15s;
|
|
5010
|
+
transition-property: border-color;
|
|
4879
5011
|
}
|
|
4880
5012
|
.condo-checkbox-wrapper .condo-checkbox-inner {
|
|
4881
5013
|
box-sizing: content-box;
|
|
4882
5014
|
border-color: #d0d3e5;
|
|
5015
|
+
outline: none;
|
|
5016
|
+
transition-timing-function: ease-in;
|
|
5017
|
+
transition-duration: 0.15s;
|
|
5018
|
+
transition-property: border-color opacity;
|
|
5019
|
+
}
|
|
5020
|
+
.condo-checkbox-wrapper .condo-checkbox-inner::before {
|
|
5021
|
+
box-sizing: border-box;
|
|
5022
|
+
background: linear-gradient(90deg, #85eba4 0%, #9fd5ff 100%) border-box;
|
|
5023
|
+
border: 2px solid transparent;
|
|
5024
|
+
opacity: 1;
|
|
5025
|
+
-webkit-mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
|
|
5026
|
+
mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
|
|
5027
|
+
-webkit-mask: linear-gradient(#111 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
5028
|
+
mask: linear-gradient(#111 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
5029
|
+
-webkit-mask-composite: xor;
|
|
5030
|
+
mask-composite: exclude;
|
|
4883
5031
|
}
|
|
4884
5032
|
.condo-checkbox-wrapper .condo-checkbox-inner::after {
|
|
4885
5033
|
transition: none;
|
|
4886
5034
|
}
|
|
4887
|
-
.condo-checkbox-wrapper .condo-checkbox-
|
|
4888
|
-
|
|
4889
|
-
height: 4px;
|
|
4890
|
-
background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
|
|
4891
|
-
border-radius: 1px;
|
|
5035
|
+
.condo-checkbox-wrapper .condo-checkbox-checked::after {
|
|
5036
|
+
border: none;
|
|
4892
5037
|
}
|
|
4893
|
-
.condo-checkbox-wrapper .condo-checkbox
|
|
5038
|
+
.condo-checkbox-wrapper .condo-checkbox::after {
|
|
4894
5039
|
position: absolute;
|
|
4895
|
-
|
|
4896
|
-
|
|
4897
|
-
|
|
4898
|
-
|
|
4899
|
-
|
|
5040
|
+
top: -4px;
|
|
5041
|
+
left: -4px;
|
|
5042
|
+
width: 32px;
|
|
5043
|
+
height: 32px;
|
|
5044
|
+
background-color: transparent;
|
|
5045
|
+
border-radius: 4px;
|
|
5046
|
+
visibility: visible;
|
|
4900
5047
|
content: "";
|
|
4901
5048
|
}
|
|
4902
|
-
.condo-checkbox-wrapper .condo-checkbox-
|
|
4903
|
-
|
|
5049
|
+
.condo-checkbox-wrapper-disabled .condo-checkbox-inner {
|
|
5050
|
+
opacity: 0.5;
|
|
4904
5051
|
}
|
|
4905
|
-
.condo-checkbox-wrapper .condo-checkbox-
|
|
4906
|
-
|
|
4907
|
-
background: #d0d3e5 border-box;
|
|
4908
|
-
border-color: transparent;
|
|
5052
|
+
.condo-checkbox-wrapper .condo-checkbox-input {
|
|
5053
|
+
margin: 0;
|
|
4909
5054
|
}
|
|
4910
|
-
.condo-checkbox-wrapper .condo-checkbox-
|
|
4911
|
-
|
|
4912
|
-
|
|
4913
|
-
|
|
4914
|
-
|
|
4915
|
-
|
|
4916
|
-
|
|
4917
|
-
|
|
5055
|
+
.condo-checkbox-wrapper .condo-checkbox-input:focus + .condo-checkbox-inner {
|
|
5056
|
+
border-color: #d0d3e5;
|
|
5057
|
+
}
|
|
5058
|
+
.condo-checkbox-wrapper .condo-checkbox.condo-checkbox-indeterminate > .condo-checkbox-inner {
|
|
5059
|
+
background: linear-gradient(90deg, #e2ffeb 0%, #e7f4ff 100%);
|
|
5060
|
+
}
|
|
5061
|
+
.condo-checkbox-wrapper .condo-checkbox.condo-checkbox-indeterminate > .condo-checkbox-inner::after {
|
|
5062
|
+
width: 12px;
|
|
5063
|
+
height: 4px;
|
|
5064
|
+
background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
|
|
5065
|
+
border-radius: 1px;
|
|
5066
|
+
}
|
|
5067
|
+
.condo-checkbox-wrapper .condo-checkbox.condo-checkbox-checked > .condo-checkbox-inner {
|
|
5068
|
+
background: linear-gradient(90deg, #e2ffeb 0%, #e7f4ff 100%);
|
|
4918
5069
|
}
|
|
4919
|
-
.condo-checkbox-wrapper .condo-checkbox-checked > .condo-checkbox-inner::after {
|
|
5070
|
+
.condo-checkbox-wrapper .condo-checkbox.condo-checkbox-checked > .condo-checkbox-inner::after {
|
|
4920
5071
|
top: 10px;
|
|
4921
5072
|
left: 5px;
|
|
4922
5073
|
box-sizing: content-box;
|
|
@@ -4928,94 +5079,34 @@ a.condo-btn-secondary {
|
|
|
4928
5079
|
transform: rotate(48deg) scale(1) translate(-50%, -50%);
|
|
4929
5080
|
transition: none;
|
|
4930
5081
|
}
|
|
4931
|
-
.condo-checkbox-wrapper .condo-checkbox-
|
|
4932
|
-
|
|
4933
|
-
}
|
|
4934
|
-
.condo-checkbox-wrapper .condo-checkbox-disabled > .condo-checkbox-inner {
|
|
4935
|
-
background-color: #f2f4f6;
|
|
4936
|
-
}
|
|
4937
|
-
.condo-checkbox-wrapper .condo-checkbox-disabled.condo-checkbox-checked > .condo-checkbox-inner::before {
|
|
4938
|
-
background: #f2f4f6;
|
|
4939
|
-
}
|
|
4940
|
-
.condo-checkbox-wrapper .condo-checkbox-disabled.condo-checkbox-checked > .condo-checkbox-inner::after {
|
|
4941
|
-
border-color: #d0d3e5;
|
|
4942
|
-
border-image-source: none;
|
|
4943
|
-
}
|
|
4944
|
-
.condo-checkbox-wrapper .condo-checkbox-input:focus + .condo-checkbox-inner {
|
|
4945
|
-
background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
|
|
4946
|
-
border-color: transparent;
|
|
4947
|
-
}
|
|
4948
|
-
.condo-checkbox-wrapper .condo-checkbox-input:focus + .condo-checkbox-inner::before {
|
|
4949
|
-
position: absolute;
|
|
4950
|
-
box-sizing: border-box;
|
|
4951
|
-
width: 100%;
|
|
4952
|
-
height: 100%;
|
|
4953
|
-
background: #fff border-box;
|
|
4954
|
-
border-radius: 3px;
|
|
4955
|
-
content: "";
|
|
4956
|
-
}
|
|
4957
|
-
.condo-checkbox-wrapper .condo-checkbox-indeterminate.condo-checkbox-disabled > .condo-checkbox-inner::after {
|
|
4958
|
-
background: #d0d3e5;
|
|
5082
|
+
.condo-checkbox-wrapper-disabled .condo-checkbox:not(.condo-checkbox-indeterminate):not(.condo-checkbox-checked) > .condo-checkbox-inner {
|
|
5083
|
+
background: transparent;
|
|
4959
5084
|
}
|
|
4960
|
-
.condo-checkbox-wrapper .condo-checkbox-
|
|
5085
|
+
.condo-checkbox-wrapper .condo-checkbox-input.focus-visible + .condo-checkbox-inner::before {
|
|
4961
5086
|
position: absolute;
|
|
4962
|
-
|
|
4963
|
-
|
|
4964
|
-
|
|
4965
|
-
|
|
4966
|
-
|
|
5087
|
+
top: -5px;
|
|
5088
|
+
right: -5px;
|
|
5089
|
+
bottom: -5px;
|
|
5090
|
+
left: -5px;
|
|
5091
|
+
display: block;
|
|
5092
|
+
border-radius: inherit;
|
|
4967
5093
|
content: "";
|
|
5094
|
+
border-radius: 8px;
|
|
4968
5095
|
}
|
|
4969
|
-
.condo-checkbox-wrapper .condo-checkbox::
|
|
5096
|
+
.condo-checkbox-wrapper .condo-checkbox-input:focus-visible + .condo-checkbox-inner::before {
|
|
4970
5097
|
position: absolute;
|
|
4971
|
-
top: -
|
|
4972
|
-
|
|
4973
|
-
|
|
4974
|
-
|
|
4975
|
-
|
|
4976
|
-
border-radius:
|
|
4977
|
-
visibility: visible;
|
|
5098
|
+
top: -5px;
|
|
5099
|
+
right: -5px;
|
|
5100
|
+
bottom: -5px;
|
|
5101
|
+
left: -5px;
|
|
5102
|
+
display: block;
|
|
5103
|
+
border-radius: inherit;
|
|
4978
5104
|
content: "";
|
|
5105
|
+
border-radius: 8px;
|
|
4979
5106
|
}
|
|
4980
|
-
.condo-checkbox-wrapper:hover > .condo-checkbox > .condo-checkbox-inner {
|
|
5107
|
+
.condo-checkbox-wrapper:hover:not(.condo-checkbox-wrapper-disabled) > .condo-checkbox > .condo-checkbox-inner {
|
|
4981
5108
|
border-color: #707695;
|
|
4982
5109
|
}
|
|
4983
|
-
.condo-checkbox-wrapper:hover > .condo-checkbox-checked > .condo-checkbox-inner::before {
|
|
4984
|
-
border-radius: 3px;
|
|
4985
|
-
}
|
|
4986
|
-
.condo-checkbox-wrapper .condo-checkbox-indeterminate > .condo-checkbox-input:focus + .condo-checkbox-inner::before {
|
|
4987
|
-
position: absolute;
|
|
4988
|
-
box-sizing: border-box;
|
|
4989
|
-
width: 100%;
|
|
4990
|
-
height: 100%;
|
|
4991
|
-
background: linear-gradient(90deg, #e2ffeb 0%, #e7f4ff 100%) border-box;
|
|
4992
|
-
border-radius: 3px;
|
|
4993
|
-
content: "";
|
|
4994
|
-
}
|
|
4995
|
-
.condo-checkbox-wrapper:hover > .condo-checkbox-checked > .condo-checkbox-inner {
|
|
4996
|
-
background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
|
|
4997
|
-
border-color: transparent;
|
|
4998
|
-
}
|
|
4999
|
-
.condo-checkbox-wrapper:hover > .condo-checkbox-disabled > .condo-checkbox-inner {
|
|
5000
|
-
background: #f2f4f6 border-box;
|
|
5001
|
-
border-color: transparent;
|
|
5002
|
-
}
|
|
5003
|
-
.condo-checkbox-wrapper .condo-checkbox-checked > .condo-checkbox-input:focus + .condo-checkbox-inner {
|
|
5004
|
-
background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
|
|
5005
|
-
border-color: transparent;
|
|
5006
|
-
}
|
|
5007
|
-
.condo-checkbox-wrapper .condo-checkbox-checked > .condo-checkbox-input:focus + .condo-checkbox-inner::before {
|
|
5008
|
-
position: absolute;
|
|
5009
|
-
box-sizing: border-box;
|
|
5010
|
-
width: 100%;
|
|
5011
|
-
height: 100%;
|
|
5012
|
-
background: linear-gradient(90deg, #e2ffeb 0%, #e7f4ff 100%) border-box;
|
|
5013
|
-
border-radius: 3px;
|
|
5014
|
-
content: "";
|
|
5015
|
-
}
|
|
5016
|
-
.condo-checkbox-wrapper:hover > .condo-checkbox::after {
|
|
5017
|
-
visibility: visible;
|
|
5018
|
-
}
|
|
5019
5110
|
|
|
5020
5111
|
.condo-control {
|
|
5021
5112
|
width: 40px !important;
|