@sankhyalabs/ez-design 4.5.0 → 4.6.1

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.
@@ -110,6 +110,7 @@
110
110
  --border--small: 1px solid;
111
111
  --border--medium: 2px solid;
112
112
  --border--large: 3px solid;
113
+ --border--xlarge: 5px solid;
113
114
  --shadow: 0px 0px 16px 0px rgba(0, 38, 111, .12);
114
115
  --shadow-focus: 0 0 0 2px;
115
116
  --shadow--small: 0 0 16px rgba(0, 38, 111, 0.07);
@@ -817,10 +818,9 @@ body {
817
818
  color: #a2abb9;
818
819
  text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
819
820
  .ez-text--tertiary {
820
- color: #da3688;
821
+ color: #008561;
821
822
  text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
822
823
  .ez-text--error {
823
- font-size: 12px;
824
824
  color: #BD0025;
825
825
  margin-top: 3px;
826
826
  line-height: 14px;
@@ -865,6 +865,139 @@ body {
865
865
  .ez-title--inverted {
866
866
  color: #fff; }
867
867
 
868
+ [data-tooltip] {
869
+ cursor: pointer;
870
+ z-index: 3; }
871
+
872
+ [data-tooltip]:hover {
873
+ position: relative; }
874
+
875
+ [data-tooltip]:before,
876
+ [data-tooltip]:after {
877
+ line-height: 1;
878
+ font-size: 14px;
879
+ pointer-events: none;
880
+ position: absolute;
881
+ box-sizing: border-box;
882
+ display: none;
883
+ opacity: 0; }
884
+
885
+ [data-tooltip]:before {
886
+ content: "";
887
+ border: 5px solid transparent;
888
+ z-index: 3; }
889
+
890
+ [data-tooltip]:after {
891
+ content: attr(data-tooltip);
892
+ text-align: center;
893
+ min-width: 3em;
894
+ max-width: 21em;
895
+ white-space: nowrap;
896
+ overflow: hidden;
897
+ text-overflow: ellipsis;
898
+ padding: 3px 6px;
899
+ border-radius: 6px;
900
+ background: #2b3a54;
901
+ color: #FFFFFF;
902
+ z-index: 3;
903
+ font-family: 'Roboto'; }
904
+
905
+ [data-tooltip]:hover:before,
906
+ [data-tooltip]:hover:after {
907
+ display: block;
908
+ opacity: 1; }
909
+
910
+ [data-tooltip]:not([data-flow])::before,
911
+ [data-tooltip][data-flow="top"]::before {
912
+ bottom: 100%;
913
+ border-bottom-width: 0;
914
+ border-top-color: #2b3a54; }
915
+
916
+ [data-tooltip]:not([data-flow])::after,
917
+ [data-tooltip][data-flow="top"]::before {
918
+ bottom: 1.167em;
919
+ -webkit-transform: translate(-50%, calc(-50% - 0px));
920
+ transform: translate(-50%, calc(-50% - 0px)); }
921
+
922
+ [data-tooltip]:not([data-flow])::before, [tooltip]:not([data-flow])::after,
923
+ [data-tooltip][data-flow="top"]::before,
924
+ [data-tooltip][data-flow="top"]::after {
925
+ left: 50%; }
926
+
927
+ [data-tooltip][data-flow="top"]::after {
928
+ -webkit-transform: translate(-50%, calc(-100% - 28px));
929
+ transform: translate(-50%, calc(-100% - 28px)); }
930
+
931
+ [data-tooltip][data-flow="bottom"]::before {
932
+ border-top-width: 0;
933
+ border-bottom-color: #2b3a54; }
934
+
935
+ [data-tooltip][data-flow="bottom"]:not([tooltip-position])::before,
936
+ [data-tooltip][data-flow="bottom"][tooltip-position="relative"]::before {
937
+ top: 100%; }
938
+
939
+ [data-tooltip][data-flow="bottom"][tooltip-position="fixed"]::before,
940
+ [data-tooltip][data-flow="bottom"][tooltip-position="fixed"]::after {
941
+ position: fixed; }
942
+
943
+ [data-tooltip][data-flow="bottom"]:not([tooltip-position])::after,
944
+ [data-tooltip][data-flow="bottom"][tooltip-position="relative"]::after {
945
+ top: calc(100% + 5px); }
946
+
947
+ [data-tooltip][data-flow="bottom"][tooltip-position="fixed"]::after {
948
+ -webkit-transform: translate(0, 5px);
949
+ transform: translate(0, 5px); }
950
+
951
+ [data-tooltip][data-flow="bottom"]:not([tooltip-position])::before,
952
+ [data-tooltip][data-flow="bottom"][tooltip-position="relative"]::before,
953
+ [data-tooltip][data-flow="bottom"]:not([tooltip-position])::after,
954
+ [data-tooltip][data-flow="bottom"][tooltip-position="relative"]::after {
955
+ left: 50%;
956
+ -webkit-transform: translate(-50%, 8px);
957
+ transform: translate(-50%, 8px); }
958
+
959
+ [data-tooltip][data-flow="bottom"][tooltip-position="fixed"]:not([tooltip-height])::before,
960
+ [data-tooltip][data-flow="bottom"][tooltip-position="fixed"][tooltip-height="label"]::before {
961
+ -webkit-transform: translate(3ch, 18px);
962
+ transform: translate(3ch, 18px); }
963
+
964
+ [data-tooltip][data-flow="bottom"][tooltip-position="fixed"][tooltip-height="chip"]::before {
965
+ -webkit-transform: translate(3ch, 41px);
966
+ transform: translate(3ch, 41px); }
967
+
968
+ [data-tooltip][data-flow="left"]::before {
969
+ top: 50%;
970
+ border-right-width: 0;
971
+ border-left-color: #2b3a54;
972
+ left: calc(0em - 5px);
973
+ -webkit-transform: translate(-8px, -50%);
974
+ transform: translate(-8px, -50%); }
975
+
976
+ [data-tooltip][data-flow="left"]::after {
977
+ top: 50%;
978
+ right: calc(100% + 5px);
979
+ -webkit-transform: translate(-8px, -50%);
980
+ transform: translate(-8px, -50%); }
981
+
982
+ [data-tooltip][data-flow="right"]::before {
983
+ top: 50%;
984
+ border-right-width: 0;
985
+ border-left-color: #2b3a54;
986
+ left: calc(100% + 5px);
987
+ -webkit-transform: translate(8px, -50%);
988
+ transform: translate(8px, -50%);
989
+ transform-origin: 50% 25%;
990
+ -webkit-transform: rotate(180deg); }
991
+
992
+ [data-tooltip][data-flow="right"]::after {
993
+ top: 50%;
994
+ left: calc(100% + 5px);
995
+ -webkit-transform: translate(5px, -50%);
996
+ transform: translate(5px, -50%); }
997
+
998
+ [data-tooltip=""]::after, [data-tooltip=""]::before {
999
+ display: none !important; }
1000
+
868
1001
  .ez-alert {
869
1002
  display: flex;
870
1003
  align-items: flex-start;