@tmlmobilidade/ui 20250404.230.26 → 20250404.256.10

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 (4) hide show
  1. package/dist/index.css.map +1 -1
  2. package/dist/styles-no-reset.css +38 -98
  3. package/dist/styles.css +38 -98
  4. package/package.json +1 -1
package/dist/styles-no-reset.css CHANGED
@@ -9852,30 +9852,28 @@ breakpoint-mobile {
9852
9852
  display: flex;
9853
9853
  align-items: center;
9854
9854
  justify-content: center;
9855
- width: var(--parent-size);
9856
- height: var(--parent-size);
9857
- background-color: wheat;
9858
-
9859
- --blade-x-position: calc((var(--parent-size) / 2 - var(--blade-width) / 2) / 2 - 1px);
9860
- --blade-y-position: calc((var(--parent-size) / 2 - var(--blade-width) / 2) / 2 - 4px);
9855
+ width: var(--container-size);
9856
+ height: var(--container-size);
9861
9857
 
9858
+ --center: calc(var(--container-size) / 2);
9859
+ --radius: calc(var(--container-size) / 2 - var(--blade-size) / 2 * var(--blade-tightness));
9862
9860
  }
9863
9861
 
9864
9862
  /* * */
9865
9863
  /* PROPS / SIZE */
9866
9864
 
9867
9865
  .styles-module_root__RKr4f[data-size="md"] {
9868
- --parent-size: 40px;
9869
- --blade-width: 4px;
9870
- --blade-height: 10px;
9871
- --blade-offset: calc(var(--blade-height) + 0px);
9866
+ --container-size: 40px;
9867
+ --blade-size: 10px;
9868
+ --blade-thickness: 4px;
9869
+ --blade-tightness: 1.75;
9872
9870
  }
9873
9871
 
9874
9872
  .styles-module_root__RKr4f[data-size="lg"] {
9875
- --parent-size: 80px;
9876
- --blade-width: 4px;
9877
- --blade-height: 10px;
9878
- --blade-offset: calc(var(--blade-height) + 0px);
9873
+ --container-size: 60px;
9874
+ --blade-size: 18px;
9875
+ --blade-thickness: 7px;
9876
+ --blade-tightness: 1.25;
9879
9877
  }
9880
9878
 
9881
9879
  /* * */
@@ -9883,117 +9881,59 @@ breakpoint-mobile {
9883
9881
 
9884
9882
  .styles-module_blade__YWPQX {
9885
9883
  position: absolute;
9886
- top: 0;
9887
- left: 0;
9888
- width: var(--blade-width);
9889
- height: var(--blade-height);
9890
- background-color: var(--color-system-text-300);
9891
- border-radius: 999px;
9892
- animation: styles-module_spinner-animation__VepTl 1000ms linear infinite;
9893
- will-change: opacity;
9884
+ top: calc(var(--center) + var(--radius) * sin(var(--angle)) - var(--blade-size) / 2);
9885
+ left: calc(var(--center) + var(--radius) * cos(var(--angle)) - var(--blade-thickness) / 2);
9886
+ width: var(--blade-thickness);
9887
+ height: var(--blade-size);
9888
+ background-color: var(--color-system-text-300);
9889
+ border-radius: 999px;
9890
+ transform: rotate(calc(var(--angle) + 90deg));
9891
+ animation: styles-module_spinner-animation__VepTl 1000ms var(--delay) linear infinite;
9892
+ will-change: opacity;
9894
9893
  }
9895
9894
 
9896
9895
  .styles-module_blade__YWPQX:nth-child(1) {
9897
- top: calc(var(--blade-offset) * 0 + var(--blade-y-position));
9898
- left: calc(var(--blade-offset) * 1 + var(--blade-x-position));
9899
- transform: rotate(0deg);
9900
- animation-delay: -1625ms
9896
+ --angle: 0deg;
9897
+ --delay: -1625ms;
9901
9898
  }
9902
9899
 
9903
9900
  .styles-module_blade__YWPQX:nth-child(2) {
9904
- top: calc(var(--blade-offset) * 0.25 + var(--blade-y-position));
9905
- left: calc(var(--blade-offset) * 1.75 + var(--blade-x-position));
9906
- transform: rotate(45deg);
9907
- animation-delay: -1500ms;
9901
+ --angle: 45deg;
9902
+ --delay: -1500ms;
9908
9903
  }
9909
9904
 
9910
9905
  .styles-module_blade__YWPQX:nth-child(3) {
9911
- top: calc(var(--blade-offset) * 1 + var(--blade-y-position));
9912
- left: calc(var(--blade-offset) * 2 + var(--blade-x-position));
9913
- transform: rotate(90deg);
9914
- animation-delay: -1375ms;
9906
+ --angle: 90deg;
9907
+ --delay: -1375ms;
9915
9908
  }
9916
9909
 
9917
9910
  .styles-module_blade__YWPQX:nth-child(4) {
9918
- top: calc(var(--blade-offset) * 1.75 + var(--blade-y-position));
9919
- left: calc(var(--blade-offset) * 1.75 + var(--blade-x-position));
9920
- transform: rotate(135deg);
9921
- animation-delay: -1250ms;
9911
+ --angle: 135deg;
9912
+ --delay: -1250ms;
9922
9913
  }
9923
9914
 
9924
9915
  .styles-module_blade__YWPQX:nth-child(5) {
9925
- top: calc(var(--blade-offset) * 2 + var(--blade-y-position));
9926
- left: calc(var(--blade-offset) * 1 + var(--blade-x-position));
9927
- transform: rotate(180deg);
9928
- animation-delay: -1125ms;
9916
+ --angle: 180deg;
9917
+ --delay: -1125ms;
9929
9918
  }
9930
9919
 
9931
9920
  .styles-module_blade__YWPQX:nth-child(6) {
9932
- top: calc(var(--blade-offset) * 1.75 + var(--blade-y-position));
9933
- left: calc(var(--blade-offset) * 0.25 + var(--blade-x-position));
9934
- transform: rotate(225deg);
9935
- animation-delay: -1000ms;
9921
+ --angle: 225deg;
9922
+ --delay: -1000ms;
9936
9923
  }
9937
9924
 
9938
9925
  .styles-module_blade__YWPQX:nth-child(7) {
9939
- top: calc(var(--blade-offset) * 1 + var(--blade-y-position));
9940
- left: calc(var(--blade-offset) * 0 + var(--blade-x-position));
9941
- transform: rotate(270deg);
9942
- animation-delay: -875ms;
9926
+ --angle: 270deg;
9927
+ --delay: -875ms;
9943
9928
  }
9944
9929
 
9945
9930
  .styles-module_blade__YWPQX:nth-child(8) {
9946
- top: calc(var(--blade-offset) * 0.25 + var(--blade-y-position));
9947
- left: calc(var(--blade-offset) * 0.25 + var(--blade-x-position));
9948
- transform: rotate(315deg);
9949
- animation-delay: -750ms;
9931
+ --angle: 315deg;
9932
+ --delay: -750ms;
9950
9933
  }
9951
9934
 
9952
9935
  /* * */
9953
- /* * */
9954
- /* * */
9955
- /* * */
9956
- /* * */
9957
-
9958
- /* .root[data-size="lg"] .blade {
9959
- top: 11.5px;
9960
- left: 15px;
9961
- width: 5px;
9962
- height: 12px;
9963
- border-radius: 2.5px;
9964
- }
9965
-
9966
- .root[data-size="lg"] .blade:nth-child(1) {
9967
- transform: rotate(45deg) translateY(-11.5px);
9968
- }
9969
-
9970
- .root[data-size="lg"] .blade:nth-child(2) {
9971
- transform: rotate(90deg) translateY(-11.5px);
9972
- }
9973
-
9974
- .root[data-size="lg"] .blade:nth-child(3) {
9975
- transform: rotate(135deg) translateY(-11.5px);
9976
- }
9977
-
9978
- .root[data-size="lg"] .blade:nth-child(4) {
9979
- transform: rotate(180deg) translateY(-11.5px);
9980
- }
9981
-
9982
- .root[data-size="lg"] .blade:nth-child(5) {
9983
- transform: rotate(225deg) translateY(-11.5px);
9984
- }
9985
-
9986
- .root[data-size="lg"] .blade:nth-child(6) {
9987
- transform: rotate(270deg) translateY(-11.5px);
9988
- }
9989
-
9990
- .root[data-size="lg"] .blade:nth-child(7) {
9991
- transform: rotate(315deg) translateY(-11.5px);
9992
- }
9993
-
9994
- .root[data-size="lg"] .blade:nth-child(8) {
9995
- transform: rotate(360deg) translateY(-11.5px);
9996
- } */
9936
+ /* ANIMATION */
9997
9937
 
9998
9938
  @keyframes styles-module_spinner-animation__VepTl {
9999
9939
  0% {
package/dist/styles.css CHANGED
@@ -9907,30 +9907,28 @@ breakpoint-mobile {
9907
9907
  display: flex;
9908
9908
  align-items: center;
9909
9909
  justify-content: center;
9910
- width: var(--parent-size);
9911
- height: var(--parent-size);
9912
- background-color: wheat;
9913
-
9914
- --blade-x-position: calc((var(--parent-size) / 2 - var(--blade-width) / 2) / 2 - 1px);
9915
- --blade-y-position: calc((var(--parent-size) / 2 - var(--blade-width) / 2) / 2 - 4px);
9910
+ width: var(--container-size);
9911
+ height: var(--container-size);
9916
9912
 
9913
+ --center: calc(var(--container-size) / 2);
9914
+ --radius: calc(var(--container-size) / 2 - var(--blade-size) / 2 * var(--blade-tightness));
9917
9915
  }
9918
9916
 
9919
9917
  /* * */
9920
9918
  /* PROPS / SIZE */
9921
9919
 
9922
9920
  .styles-module_root__RKr4f[data-size="md"] {
9923
- --parent-size: 40px;
9924
- --blade-width: 4px;
9925
- --blade-height: 10px;
9926
- --blade-offset: calc(var(--blade-height) + 0px);
9921
+ --container-size: 40px;
9922
+ --blade-size: 10px;
9923
+ --blade-thickness: 4px;
9924
+ --blade-tightness: 1.75;
9927
9925
  }
9928
9926
 
9929
9927
  .styles-module_root__RKr4f[data-size="lg"] {
9930
- --parent-size: 80px;
9931
- --blade-width: 4px;
9932
- --blade-height: 10px;
9933
- --blade-offset: calc(var(--blade-height) + 0px);
9928
+ --container-size: 60px;
9929
+ --blade-size: 18px;
9930
+ --blade-thickness: 7px;
9931
+ --blade-tightness: 1.25;
9934
9932
  }
9935
9933
 
9936
9934
  /* * */
@@ -9938,117 +9936,59 @@ breakpoint-mobile {
9938
9936
 
9939
9937
  .styles-module_blade__YWPQX {
9940
9938
  position: absolute;
9941
- top: 0;
9942
- left: 0;
9943
- width: var(--blade-width);
9944
- height: var(--blade-height);
9945
- background-color: var(--color-system-text-300);
9946
- border-radius: 999px;
9947
- animation: styles-module_spinner-animation__VepTl 1000ms linear infinite;
9948
- will-change: opacity;
9939
+ top: calc(var(--center) + var(--radius) * sin(var(--angle)) - var(--blade-size) / 2);
9940
+ left: calc(var(--center) + var(--radius) * cos(var(--angle)) - var(--blade-thickness) / 2);
9941
+ width: var(--blade-thickness);
9942
+ height: var(--blade-size);
9943
+ background-color: var(--color-system-text-300);
9944
+ border-radius: 999px;
9945
+ transform: rotate(calc(var(--angle) + 90deg));
9946
+ animation: styles-module_spinner-animation__VepTl 1000ms var(--delay) linear infinite;
9947
+ will-change: opacity;
9949
9948
  }
9950
9949
 
9951
9950
  .styles-module_blade__YWPQX:nth-child(1) {
9952
- top: calc(var(--blade-offset) * 0 + var(--blade-y-position));
9953
- left: calc(var(--blade-offset) * 1 + var(--blade-x-position));
9954
- transform: rotate(0deg);
9955
- animation-delay: -1625ms
9951
+ --angle: 0deg;
9952
+ --delay: -1625ms;
9956
9953
  }
9957
9954
 
9958
9955
  .styles-module_blade__YWPQX:nth-child(2) {
9959
- top: calc(var(--blade-offset) * 0.25 + var(--blade-y-position));
9960
- left: calc(var(--blade-offset) * 1.75 + var(--blade-x-position));
9961
- transform: rotate(45deg);
9962
- animation-delay: -1500ms;
9956
+ --angle: 45deg;
9957
+ --delay: -1500ms;
9963
9958
  }
9964
9959
 
9965
9960
  .styles-module_blade__YWPQX:nth-child(3) {
9966
- top: calc(var(--blade-offset) * 1 + var(--blade-y-position));
9967
- left: calc(var(--blade-offset) * 2 + var(--blade-x-position));
9968
- transform: rotate(90deg);
9969
- animation-delay: -1375ms;
9961
+ --angle: 90deg;
9962
+ --delay: -1375ms;
9970
9963
  }
9971
9964
 
9972
9965
  .styles-module_blade__YWPQX:nth-child(4) {
9973
- top: calc(var(--blade-offset) * 1.75 + var(--blade-y-position));
9974
- left: calc(var(--blade-offset) * 1.75 + var(--blade-x-position));
9975
- transform: rotate(135deg);
9976
- animation-delay: -1250ms;
9966
+ --angle: 135deg;
9967
+ --delay: -1250ms;
9977
9968
  }
9978
9969
 
9979
9970
  .styles-module_blade__YWPQX:nth-child(5) {
9980
- top: calc(var(--blade-offset) * 2 + var(--blade-y-position));
9981
- left: calc(var(--blade-offset) * 1 + var(--blade-x-position));
9982
- transform: rotate(180deg);
9983
- animation-delay: -1125ms;
9971
+ --angle: 180deg;
9972
+ --delay: -1125ms;
9984
9973
  }
9985
9974
 
9986
9975
  .styles-module_blade__YWPQX:nth-child(6) {
9987
- top: calc(var(--blade-offset) * 1.75 + var(--blade-y-position));
9988
- left: calc(var(--blade-offset) * 0.25 + var(--blade-x-position));
9989
- transform: rotate(225deg);
9990
- animation-delay: -1000ms;
9976
+ --angle: 225deg;
9977
+ --delay: -1000ms;
9991
9978
  }
9992
9979
 
9993
9980
  .styles-module_blade__YWPQX:nth-child(7) {
9994
- top: calc(var(--blade-offset) * 1 + var(--blade-y-position));
9995
- left: calc(var(--blade-offset) * 0 + var(--blade-x-position));
9996
- transform: rotate(270deg);
9997
- animation-delay: -875ms;
9981
+ --angle: 270deg;
9982
+ --delay: -875ms;
9998
9983
  }
9999
9984
 
10000
9985
  .styles-module_blade__YWPQX:nth-child(8) {
10001
- top: calc(var(--blade-offset) * 0.25 + var(--blade-y-position));
10002
- left: calc(var(--blade-offset) * 0.25 + var(--blade-x-position));
10003
- transform: rotate(315deg);
10004
- animation-delay: -750ms;
9986
+ --angle: 315deg;
9987
+ --delay: -750ms;
10005
9988
  }
10006
9989
 
10007
9990
  /* * */
10008
- /* * */
10009
- /* * */
10010
- /* * */
10011
- /* * */
10012
-
10013
- /* .root[data-size="lg"] .blade {
10014
- top: 11.5px;
10015
- left: 15px;
10016
- width: 5px;
10017
- height: 12px;
10018
- border-radius: 2.5px;
10019
- }
10020
-
10021
- .root[data-size="lg"] .blade:nth-child(1) {
10022
- transform: rotate(45deg) translateY(-11.5px);
10023
- }
10024
-
10025
- .root[data-size="lg"] .blade:nth-child(2) {
10026
- transform: rotate(90deg) translateY(-11.5px);
10027
- }
10028
-
10029
- .root[data-size="lg"] .blade:nth-child(3) {
10030
- transform: rotate(135deg) translateY(-11.5px);
10031
- }
10032
-
10033
- .root[data-size="lg"] .blade:nth-child(4) {
10034
- transform: rotate(180deg) translateY(-11.5px);
10035
- }
10036
-
10037
- .root[data-size="lg"] .blade:nth-child(5) {
10038
- transform: rotate(225deg) translateY(-11.5px);
10039
- }
10040
-
10041
- .root[data-size="lg"] .blade:nth-child(6) {
10042
- transform: rotate(270deg) translateY(-11.5px);
10043
- }
10044
-
10045
- .root[data-size="lg"] .blade:nth-child(7) {
10046
- transform: rotate(315deg) translateY(-11.5px);
10047
- }
10048
-
10049
- .root[data-size="lg"] .blade:nth-child(8) {
10050
- transform: rotate(360deg) translateY(-11.5px);
10051
- } */
9991
+ /* ANIMATION */
10052
9992
 
10053
9993
  @keyframes styles-module_spinner-animation__VepTl {
10054
9994
  0% {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tmlmobilidade/ui",
3
- "version": "20250404.0230.26",
3
+ "version": "20250404.0256.10",
4
4
  "author": "",
5
5
  "license": "ISC",
6
6
  "publishConfig": {