@vuu-ui/vuu-ui-controls 0.8.17-debug → 0.8.18-debug

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/index.css CHANGED
@@ -316,7 +316,10 @@
316
316
  will-change: transform;
317
317
  }
318
318
  .vuuList.saltFocusVisible:after {
319
- inset: 2px;
319
+ top: 2px;
320
+ right: 2px;
321
+ bottom: 2px;
322
+ left: 2px;
320
323
  }
321
324
 
322
325
  /* src/list/RadioIcon.css */
@@ -450,6 +453,14 @@
450
453
  white-space: nowrap;
451
454
  }
452
455
 
456
+ /* src/vuu-input/VuuInput.css */
457
+ .vuuInput {
458
+ --vuu-icon-size: 16px;
459
+ }
460
+ .vuuInput-errorIcon:after {
461
+ cursor: pointer;
462
+ }
463
+
453
464
  /* src/expando-input/ExpandoInput.css */
454
465
  .vuuExpandoInput {
455
466
  --salt-editable-secondary-background: white;
@@ -548,6 +559,7 @@
548
559
  }
549
560
  input[type=radio] {
550
561
  position: absolute;
562
+ -webkit-appearance: none;
551
563
  appearance: none;
552
564
  width: 100%;
553
565
  height: 100%;
@@ -624,727 +636,6 @@ input[type=radio] {
624
636
  padding: 0;
625
637
  }
626
638
 
627
- /* ../vuu-shell/src/login/LoginPanel.css */
628
- .vuuLoginPanel {
629
- --saltInput-paddingLeft: 8px;
630
- --login-width: 856px;
631
- --login-height: 550px;
632
- --hwTextInput-border: solid 1px #ccc;
633
- --hwTextInput-height: 28px;
634
- --hwTextInput-padding: 0 12px;
635
- --hwTextInput-width: 100%;
636
- --login-row-height: 60px;
637
- border-radius: 16px;
638
- box-shadow: 0px 24px 44px 0px rgba(0, 0, 0, 0.25);
639
- display: flex;
640
- height: var(--login-height);
641
- margin: 0 auto;
642
- width: var(--login-width);
643
- }
644
- .vuuLoginPanel .saltInput-primary {
645
- --saltInput-height: 36px;
646
- }
647
- .vuuLoginPanel-title {
648
- justify-content: center;
649
- font-size: 28px;
650
- font-weight: 400;
651
- display: flex;
652
- }
653
- .vuuLoginPanel-branding {
654
- align-items: center;
655
- background-color: var(--vuu-color-purple-50);
656
- border-radius: 16px 0 0 16px;
657
- display: flex;
658
- flex: 0 0 368px;
659
- flex-direction: column;
660
- gap: 40px;
661
- justify-content: center;
662
- padding: 40px 100px;
663
- }
664
- .vuuLoginPanel-form {
665
- background-color: white;
666
- border-radius: 0 16px 16px 0px;
667
- display: flex;
668
- flex: 1 1 auto;
669
- flex-direction: column;
670
- gap: 32px;
671
- justify-content: center;
672
- padding: 0 40px;
673
- }
674
- .vuuLoginPanel-password {
675
- --vuu-icon-size: 16px;
676
- }
677
- .vuuLoginPanel-appName {
678
- color: white;
679
- font-size: 18px;
680
- font-weight: 700;
681
- text-transform: uppercase;
682
- }
683
- .vuuLoginPanel-login {
684
- --saltButton-height: 36px;
685
- --saltButton-borderRadius: 6px;
686
- width: 100%;
687
- }
688
-
689
- /* ../vuu-shell/src/app-header/AppHeader.css */
690
- .vuuAppHeader {
691
- --saltButton-borderRadius: 6px;
692
- --saltButton-text-color: var(--vuu-color-gray-50);
693
- --saltButton-padding: 12px;
694
- --vuuToolbarItem-height: 26px;
695
- --vuuOverflowContainer-gap: 8px;
696
- --vuu-icon-color: var(--vuu-color-gray-45);
697
- --vuu-icon-size: 16px;
698
- --vuuToolbar-background: var(--vuuAppHeader-background, var(--vuu-color-gray-28));
699
- --vuuToolbar-borderWidth: 1px;
700
- --vuuToolbar-borderStyle: solid;
701
- --vuuToolbar-borderColor: var(--vuu-color-gray-30);
702
- align-items: center;
703
- display: flex;
704
- justify-content: flex-end;
705
- }
706
- .vuu-theme .vuuAppHeader {
707
- border-radius: 8px;
708
- margin-bottom: 8px;
709
- }
710
-
711
- /* ../vuu-shell/src/connection-status/ConnectionStatusIcon.css */
712
- .vuuStatus-container {
713
- display: flex;
714
- }
715
- .vuuStatus-text {
716
- align-self: center;
717
- }
718
- .vuuStatus {
719
- --vuu-icon-height: 18px;
720
- --vuu-icon-padding: var(--vuuStatus-padding, 6px);
721
- --vuu-icon-width: var(--vuuStatus-width, auto);
722
- --vuu-icon-min-width: var(--vuuStatus-min-width, 20px);
723
- align-items: center;
724
- display: inline-flex;
725
- height: var(--vuu-icon-height);
726
- justify-content: center;
727
- min-width: var(--vuu-icon-min-width);
728
- padding: 0 var(--vuu-icon-padding);
729
- width: var(--vuu-icon-width);
730
- position: relative;
731
- }
732
- .vuuStatus[data-icon]::after {
733
- inset: 0 0 0 0;
734
- content: "";
735
- box-shadow: 0 0 0 0 black;
736
- position: absolute;
737
- mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;
738
- -webkit-mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;
739
- }
740
- .vuuActiveStatus::after {
741
- --vuu-icon-svg: var(--svg-active-status);
742
- background-color: rgb(0, 255, 0);
743
- }
744
- .vuuConnectingStatus::after {
745
- --vuu-icon-svg: var(--svg-connecting-status);
746
- background-color: orange;
747
- transform: scale(1);
748
- animation: infinite pulse 1s;
749
- }
750
- .vuuDisconnectedStatus::after {
751
- --vuu-icon-svg: var(--svg-disconnected-status);
752
- background-color: red;
753
- transform: scale(1);
754
- animation: infinite pulse 0.5s;
755
- }
756
- @keyframes pulse {
757
- 0% {
758
- transform: scale(0.95);
759
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
760
- }
761
- 70% {
762
- transform: scale(1);
763
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
764
- }
765
- 100% {
766
- transform: scale(0.95);
767
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
768
- }
769
- }
770
-
771
- /* ../vuu-shell/src/layout-management/SaveLayoutPanel.css */
772
- .saveLayoutPanel {
773
- --salt-selectable-foreground-hover: #6d18bdc3;
774
- --salt-selectable-foreground-selected: #6D18BD;
775
- --salt-selectable-borderColor-selected: #6D18BD;
776
- --saltInputLegacy-fontSize: 12px;
777
- --salt-text-label-fontSize: 10px;
778
- --saltFormFieldLegacy-label-paddingLeft: 0;
779
- --saltFormField-label-fontWeight: 400;
780
- --saltText-color: var(--text-secondary-foreground, #606477);
781
- }
782
- .saveLayoutPanel-panelContainer {
783
- display: flex;
784
- flex-direction: column;
785
- align-items: flex-start;
786
- }
787
- .saveLayoutPanel-panelContent {
788
- display: flex;
789
- align-items: flex-start;
790
- gap: 32px;
791
- }
792
- .saveLayoutPanel-formContainer {
793
- display: flex;
794
- width: 217px;
795
- flex-direction: column;
796
- align-items: flex-start;
797
- gap: 16px;
798
- }
799
- .saveLayoutPanel-formField {
800
- display: flex;
801
- flex-direction: column;
802
- gap: 1px;
803
- }
804
- .saveLayoutPanel-inputText {
805
- border: none;
806
- color: var(--light-text-primary, #15171B);
807
- font-family: Nunito Sans A-Variant, serif;
808
- font-feature-settings:
809
- "ss02" on,
810
- "ss01" on,
811
- "salt" on,
812
- "liga" off;
813
- font-size: 12px;
814
- font-weight: 400;
815
- line-height: 16px;
816
- padding-left: 4px;
817
- width: 100%;
818
- outline: none;
819
- }
820
- .saveLayoutPanel-settingsGroup {
821
- display: flex;
822
- flex-wrap: wrap;
823
- align-items: flex-end;
824
- gap: 10px;
825
- width: 100%;
826
- line-height: 16px;
827
- }
828
- .saveLayoutPanel-screenshotContainer {
829
- display: flex;
830
- width: 304px;
831
- height: 208px;
832
- padding: 11px 15.5px;
833
- justify-content: center;
834
- align-items: center;
835
- border: 1px solid #E8E8E8;
836
- background: var(--dark-text-primary, #FFF);
837
- }
838
- .saveLayoutPanel-screenshot {
839
- display: flex;
840
- justify-content: center;
841
- align-items: center;
842
- background: lightgray 50% / cover no-repeat;
843
- width: 273px;
844
- height: 186px;
845
- flex-shrink: 0;
846
- }
847
- .saveLayoutPanel-buttonsContainer {
848
- display: flex;
849
- justify-content: flex-end;
850
- align-items: flex-start;
851
- align-self: stretch;
852
- padding-top: 24px;
853
- gap: 8px;
854
- }
855
- .saveLayoutPanel-cancelButton,
856
- .saveLayoutPanel-saveButton {
857
- display: flex;
858
- height: fit-content;
859
- padding: 4px 8px;
860
- align-items: flex-start;
861
- gap: 8px;
862
- border-radius: 6px;
863
- font-size: 12px;
864
- font-style: normal;
865
- font-weight: 700;
866
- line-height: 133.333%;
867
- letter-spacing: 0.48px;
868
- text-transform: uppercase;
869
- }
870
- .saveLayoutPanel-cancelButton {
871
- color: var(--actionable-primary-foreground-default, #606477);
872
- background: var(--actionable-primary-background-default, #FFF);
873
- }
874
- .saveLayoutPanel-saveButton {
875
- background: #6D18BD;
876
- border-color: #6D18BD;
877
- color: white;
878
- }
879
- .saveLayoutPanel-saveButton.saltButton:disabled {
880
- background: #6D18BD;
881
- border-color: #6D18BD;
882
- color: white;
883
- opacity: 0.3;
884
- }
885
- .saveLayoutPanel-saveButton.saltButton:hover {
886
- background: #F37880;
887
- border-color: #F37880;
888
- color: white;
889
- }
890
-
891
- /* ../vuu-shell/src/layout-management/LayoutList.css */
892
- .vuuLayoutList {
893
- --vuuMeasuredContainer-flex: 1 1 1px;
894
- align-self: stretch;
895
- display: flex;
896
- flex-direction: column;
897
- height: 100%;
898
- overflow: hidden;
899
- }
900
- .vuuLayoutList-header {
901
- color: var(--light-text-primary, #15171B);
902
- flex: 0 0 47px;
903
- font-weight: 700;
904
- letter-spacing: 0.48px;
905
- text-transform: uppercase;
906
- display: flex;
907
- padding: 16px 0px;
908
- border-bottom: 1px solid rgba(119, 124, 148, 0.10);
909
- line-height: 200%;
910
- }
911
- .vuuLayoutList-groupName {
912
- display: flex;
913
- padding-top: 24px;
914
- color: var(--light-text-secondary, #606477);
915
- font-weight: 700;
916
- letter-spacing: 0.48px;
917
- line-height: 200%;
918
- }
919
- .vuuLayoutList-layoutContainer {
920
- display: flex;
921
- align-items: center;
922
- gap: 8px;
923
- padding: 8px 0px;
924
- flex: 1 1 auto;
925
- cursor: pointer;
926
- }
927
- .vuuLayoutList-layoutName {
928
- color: var(--light-text-primary, #15171B);
929
- font-weight: 600;
930
- line-height: 133.333%;
931
- text-transform: capitalize;
932
- }
933
- .vuuLayoutList-screenshot {
934
- width: 60px;
935
- height: 45.6px;
936
- border: 1px solid #D6D7DA;
937
- }
938
- .vuuLayoutList-layoutDetails {
939
- color: var(--light-text-secondary, #606477);
940
- font-size: 10px;
941
- font-weight: 600;
942
- line-height: 150%;
943
- }
944
-
945
- /* ../vuu-shell/src/feature-list/FeatureList.css */
946
- .vuuFeatureList {
947
- background: var(--vuuFeatureList-background, var(--salt-container-primary-background));
948
- display: flex;
949
- flex-direction: column;
950
- height: 100%;
951
- padding: 195px 32px 16px 24px;
952
- }
953
- .vuuFeatureList-header {
954
- flex: 0 0 40px;
955
- font-size: 12px;
956
- font-weight: 700;
957
- line-height: 2;
958
- }
959
- .vuuFeatureList-content {
960
- flex: 1 1 auto;
961
- font-size: 12px;
962
- font-weight: 700;
963
- }
964
-
965
- /* ../vuu-shell/src/left-nav/LeftNav.css */
966
- .vuuLeftNav {
967
- --salt-navigable-fontWeight-active: 700;
968
- --vuuTab-background-selected: rgba(255, 255, 255, 0.10);
969
- --vuuTab-hover-background: rgba(255, 255, 255, 0.10);
970
- --vuuTab-before-content: none;
971
- --vuuTab-borderRadius: 6px;
972
- --vuuTab-height: 40px;
973
- --vuuTab-padding: 0 0 0 48px;
974
- --vuuTabstrip-fontWeight: 700;
975
- --vuuTabstrip-width: 100%;
976
- --svg-demo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11.3333 11C11.52 11 11.6667 10.8533 11.6667 10.6667C11.6667 10.48 11.52 10.3333 11.3333 10.3333C11.1467 10.3333 11 10.48 11 10.6667C11 10.8533 11.1467 11 11.3333 11Z"/><path d="M5.99999 8.66667C6.36818 8.66667 6.66666 8.36819 6.66666 8C6.66666 7.63181 6.36818 7.33334 5.99999 7.33334C5.63181 7.33334 5.33333 7.63181 5.33333 8C5.33333 8.36819 5.63181 8.66667 5.99999 8.66667Z"/><path d="M8.66667 6C9.03486 6 9.33333 5.70152 9.33333 5.33333C9.33333 4.96514 9.03486 4.66667 8.66667 4.66667C8.29848 4.66667 8 4.96514 8 5.33333C8 5.70152 8.29848 6 8.66667 6Z"/><path d="M8.66667 11.3333C9.03486 11.3333 9.33333 11.0349 9.33333 10.6667C9.33333 10.2985 9.03486 10 8.66667 10C8.29848 10 8 10.2985 8 10.6667C8 11.0349 8.29848 11.3333 8.66667 11.3333Z"/><path d="M11.3333 8.33333C11.52 8.33333 11.6667 8.18666 11.6667 8C11.6667 7.81333 11.52 7.66666 11.3333 7.66666C11.1467 7.66666 11 7.81333 11 8C11 8.18666 11.1467 8.33333 11.3333 8.33333Z"/><path d="M8.66667 8.66667C9.03486 8.66667 9.33333 8.36819 9.33333 8C9.33333 7.63181 9.03486 7.33334 8.66667 7.33334C8.29848 7.33334 8 7.63181 8 8C8 8.36819 8.29848 8.66667 8.66667 8.66667Z"/><path d="M2 2H14V3.33333H2V2Z"/><path d="M3.33333 6.33333C3.88561 6.33333 4.33333 5.88562 4.33333 5.33333C4.33333 4.78105 3.88561 4.33333 3.33333 4.33333C2.78104 4.33333 2.33333 4.78105 2.33333 5.33333C2.33333 5.88562 2.78104 6.33333 3.33333 6.33333Z"/><path d="M3.33333 9C3.88561 9 4.33333 8.55228 4.33333 8C4.33333 7.44772 3.88561 7 3.33333 7C2.78104 7 2.33333 7.44772 2.33333 8C2.33333 8.55228 2.78104 9 3.33333 9Z"/><path d="M3.33333 11.6667C3.88561 11.6667 4.33333 11.2189 4.33333 10.6667C4.33333 10.1144 3.88561 9.66666 3.33333 9.66666C2.78104 9.66666 2.33333 10.1144 2.33333 10.6667C2.33333 11.2189 2.78104 11.6667 3.33333 11.6667Z"/><path d="M11.3333 5.66667C11.52 5.66667 11.6667 5.52 11.6667 5.33333C11.6667 5.14667 11.52 5 11.3333 5C11.1467 5 11 5.14667 11 5.33333C11 5.52 11.1467 5.66667 11.3333 5.66667Z"/><path d="M5.99999 11.3333C6.36818 11.3333 6.66666 11.0349 6.66666 10.6667C6.66666 10.2985 6.36818 10 5.99999 10C5.63181 10 5.33333 10.2985 5.33333 10.6667C5.33333 11.0349 5.63181 11.3333 5.99999 11.3333Z"/><path d="M5.99999 6C6.36818 6 6.66666 5.70152 6.66666 5.33333C6.66666 4.96514 6.36818 4.66667 5.99999 4.66667C5.63181 4.66667 5.33333 4.96514 5.33333 5.33333C5.33333 5.70152 5.63181 6 5.99999 6Z"/><path d="M2 12.6667H14V14H2V12.6667Z"/></svg>');
977
- --svg-features: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15.3333 12.6667H14L14 3.33334H15.3333L15.3333 12.6667ZM12.6667 12.6667H11.3333L11.3333 3.33334H12.6667L12.6667 12.6667ZM1.33333 12.6667L9.33333 12.6667C9.69999 12.6667 9.99999 12.3667 9.99999 12V4.00001C9.99999 3.63334 9.69999 3.33334 9.33333 3.33334L1.33333 3.33334C0.966661 3.33334 0.666661 3.63334 0.666661 4.00001L0.666661 12C0.666661 12.3667 0.966661 12.6667 1.33333 12.6667ZM1.99999 4.66667L8.66666 4.66667V11.3333L1.99999 11.3333L1.99999 4.66667Z"/></svg>');
978
- --svg-tables: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 6H4.66667V3.33334H3.33333C2.6 3.33334 2 3.93334 2 4.66667V6ZM2 9.33334H4.66667V6.66667H2V9.33334ZM5.33333 9.33334H8V6.66667H5.33333V9.33334ZM8.66667 9.33334H11.3333V6.66667H8.66667V9.33334ZM5.33333 6H8V3.33334H5.33333V6ZM8.66667 3.33334V6H11.3333V3.33334H8.66667ZM12 9.33334H14.6667V6.66667H12V9.33334ZM3.33333 12.6667H4.66667V10H2V11.3333C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3333V10H12V12.6667ZM12 3.33334V6H14.6667V4.66667C14.6667 3.93334 14.0667 3.33334 13.3333 3.33334H12Z"/></svg>');
979
- --svg-layouts: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15.3333 10H14V11.3333H15.3333V10ZM15.3333 12.6667H14V14H15.3333V12.6667ZM15.3333 7.33333H14V8.66667H15.3333V7.33333ZM10 2H8.66667V3.33333H10V2ZM15.3333 4.66667H14V6H15.3333V4.66667ZM0.666672 14H7.33334V10H0.666672V14ZM2.00001 4.66667H0.666672V6H2.00001V4.66667ZM10 12.6667H8.66667V14H10V12.6667ZM12.6667 2H11.3333V3.33333H12.6667V2ZM15.3333 2H14V3.33333H15.3333V2ZM12.6667 12.6667H11.3333V14H12.6667V12.6667ZM2.00001 7.33333H0.666672V8.66667H2.00001V7.33333ZM7.33334 2H6.00001V3.33333H7.33334V2ZM4.66667 2H3.33334V3.33333H4.66667V2ZM2.00001 2H0.666672V3.33333H2.00001V2Z"/></svg>');
980
- --vuu-light-text-primary: #15171b;
981
- --menu-level-2-width: 0px;
982
- box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.15);
983
- display: flex;
984
- height: calc(100% - 4px);
985
- margin-bottom: 4px;
986
- overflow: hidden;
987
- position: relative;
988
- transition: width .2s ease-out;
989
- z-index: 0;
990
- }
991
- .vuuLeftNav-menu-full {
992
- --menu-width: var(--nav-menu-expanded-width);
993
- }
994
- .vuuLeftNav-menu-icons {
995
- --menu-width: var(--nav-menu-collapsed-width);
996
- }
997
- .vuuLeftNav-menu-icons-content {
998
- --menu-width: var(--nav-menu-collapsed-width);
999
- --menu-level-2-width: var(--nav-menu-content-width);
1000
- }
1001
- .vuuLeftNav-menu-full-content {
1002
- --menu-width: var(--nav-menu-expanded-width);
1003
- --menu-level-2-width: var(--nav-menu-content-width);
1004
- }
1005
- .vuuLeftNav-menu-icons-content .vuuLeftNav-menu-secondary,
1006
- .vuuLeftNav-menu-full-content .vuuLeftNav-menu-secondary {
1007
- display: flex;
1008
- }
1009
- .vuuLeftNav-menu-primary {
1010
- background-color: #2A015F;
1011
- container-type: inline-size;
1012
- display: flex;
1013
- flex-direction: column;
1014
- height: 100%;
1015
- padding: 32px 16px;
1016
- transition: flex-basis ease-out .2s;
1017
- flex-grow: 0;
1018
- flex-shrink: 0;
1019
- flex-basis: var(--menu-width);
1020
- }
1021
- .vuuLeftNav-menu-secondary {
1022
- flex: 1 1 auto;
1023
- display: none;
1024
- top: 0;
1025
- right: 0;
1026
- flex-grow: 0;
1027
- flex-shrink: 0;
1028
- flex-basis: var(--nav-menu-content-width, 240px);
1029
- z-index: -1;
1030
- }
1031
- .vuuLeftNav .vuuTabstrip {
1032
- margin-top: 102px;
1033
- }
1034
- .vuuLeftNav .vuuTab {
1035
- --vuuTab-focusVisible-color: pink;
1036
- --vuu-icon-color: white;
1037
- --vuu-icon-left: 12px;
1038
- --vuu-icon-size: 16px;
1039
- border-left: solid 4px transparent;
1040
- }
1041
- .vuuLeftNav .vuuTab-selected {
1042
- --vuu-icon-color: var(--salt-navigable-indicator-active);
1043
- border-left: solid 4px var(--salt-navigable-indicator-active);
1044
- }
1045
- .vuuLeftNav-logo {
1046
- display: flex;
1047
- flex: 0 0 auto;
1048
- justify-content: center;
1049
- }
1050
- .vuuLeftNav-main {
1051
- flex: 1 1 auto;
1052
- }
1053
- .vuuLeftNav-menu {
1054
- color: white;
1055
- margin-top: 102px;
1056
- padding: 0;
1057
- }
1058
- .vuuLeftNav [data-icon=demo] {
1059
- --vuu-icon-svg: var(--svg-demo);
1060
- }
1061
- .vuuLeftNav [data-icon=tables] {
1062
- --vuu-icon-svg: var(--svg-tables);
1063
- }
1064
- .vuuLeftNav [data-icon=features] {
1065
- --vuu-icon-svg: var(--svg-features);
1066
- }
1067
- .vuuLeftNav [data-icon=layouts] {
1068
- --vuu-icon-svg: var(--svg-layouts);
1069
- }
1070
- @container (max-width: 100px) {
1071
- .vuuTab {
1072
- --vuuTab-padding: 0 0 0 42px;
1073
- }
1074
- .vuuTab-main {
1075
- display: none !important;
1076
- }
1077
- }
1078
- .vuuLeftNav-buttonBar {
1079
- align-items: center;
1080
- display: flex;
1081
- flex: 0 0 100px;
1082
- justify-content: center;
1083
- }
1084
- .vuuLeftNav-toggleButton {
1085
- --vuu-icon-color: var(--vuu-light-text-primary);
1086
- --vuu-icon-left: 11px;
1087
- --vuu-icon-top: 10px;
1088
- --vuu-icon-size: 16px;
1089
- background-color: var(--salt-navigable-indicator-active);
1090
- border-width: 0;
1091
- border-radius: 18px;
1092
- height: 36px;
1093
- position: relative;
1094
- width: 36px;
1095
- }
1096
- .vuuLeftNav-toggleButton-open {
1097
- --vuu-icon-left: 9px;
1098
- }
1099
- .vuuLeftNav-drawer {
1100
- display: flex;
1101
- padding: 40px 32px 0px 24px;
1102
- flex-direction: column;
1103
- align-items: flex-start;
1104
- flex-shrink: 0;
1105
- align-self: stretch;
1106
- background: #FFF;
1107
- box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.15);
1108
- height: 100%;
1109
- }
1110
-
1111
- /* ../vuu-shell/src/session-editing-form/SessionEditingForm.css */
1112
- .vuuSessionEditingForm {
1113
- display: flex;
1114
- flex-direction: column;
1115
- gap: 3px;
1116
- min-width: 400px;
1117
- padding: 6px;
1118
- }
1119
- .vuuSessionEditingForm-content {
1120
- display: flex;
1121
- flex-direction: column;
1122
- flex: 1 1 auto;
1123
- gap: 3px;
1124
- overflow: auto;
1125
- }
1126
- .vuuSessionEditingForm-field {
1127
- align-items: center;
1128
- display: flex;
1129
- height: 32px;
1130
- }
1131
- .vuuSessionEditingForm-fieldLabel {
1132
- flex: 0 0 50%;
1133
- }
1134
- .vuuSessionEditingForm-fieldValue {
1135
- max-width: 50%;
1136
- }
1137
- .vuuSessionEditingForm-fieldValue.vuuReadOnly {
1138
- font-weight: var(--salt-text-label-fontWeight-strong);
1139
- }
1140
- .vuuSessionEditingForm-buttonbar {
1141
- align-items: center;
1142
- border-top: solid 1px var(--salt-container-primary-borderColor);
1143
- display: flex;
1144
- justify-content: flex-end;
1145
- flex: 0 0 autox;
1146
- gap: 6px;
1147
- padding-top: 6px;
1148
- }
1149
- .vuuSessionEditingForm-errorBanner {
1150
- --vuu-icon-left: 3px;
1151
- --vuu-icon-size: 18px;
1152
- --vuu-icon-top: 3px;
1153
- border: solid 1px var(--salt-status-error-borderColor);
1154
- line-height: 24px;
1155
- padding: 0 6px 0 26px;
1156
- position: relative;
1157
- }
1158
-
1159
- /* ../vuu-shell/src/shell-layouts/context-panel/ContextPanel.css */
1160
- .vuuContextPanel {
1161
- position: relative;
1162
- transition: width .3s ease-in-out;
1163
- width: var(--vuu-side-panel-width, 0px) !important;
1164
- z-index: 1;
1165
- }
1166
- .vuuContextPanel-expanded {
1167
- --vuu-side-panel-width: 300px !important;
1168
- --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);
1169
- --vuu-side-panel-padding: 24px;
1170
- }
1171
- .vuuContextPanel-overlay {
1172
- width: 0px !important;
1173
- }
1174
- .vuuContextPanel-inner {
1175
- background-color: var(--salt-container-primary-background);
1176
- box-shadow: var(--vuu-side-panel-shadow, none);
1177
- display: flex;
1178
- flex-direction: column;
1179
- height: 100%;
1180
- min-width: 0 !important;
1181
- overflow: auto;
1182
- padding-bottom: 24px;
1183
- padding-top: 24px;
1184
- padding-left: var(--vuu-side-panel-padding, 0);
1185
- padding-right: var(--vuu-side-panel-padding, 0);
1186
- position: absolute !important;
1187
- right: 0;
1188
- top: 0;
1189
- transition-property:
1190
- padding-left,
1191
- padding-right,
1192
- width;
1193
- transition-duration: .3s;
1194
- transition-timing-function: ease-in-out;
1195
- width: var(--vuu-side-panel-width, 0px);
1196
- }
1197
- .vuuContextPanel-header {
1198
- align-items: center;
1199
- display: flex;
1200
- flex-wrap: nowrap;
1201
- flex: 0 0 27px !important;
1202
- justify-content: space-between;
1203
- }
1204
- .vuuContextPanel-title {
1205
- font-size: 20px;
1206
- font-weight: 700;
1207
- white-space: nowrap;
1208
- }
1209
- .vuuContextPanel-content {
1210
- flex: 1 1 auto;
1211
- width: 100%;
1212
- }
1213
-
1214
- /* ../vuu-shell/src/shell-layouts/side-panel/SidePanel.css */
1215
- .vuuShellSidePanel {
1216
- transition: width .2s ease-out;
1217
- width: var(--shell-left-nav-size);
1218
- }
1219
-
1220
- /* ../vuu-shell/src/shell.css */
1221
- .vuuShell {
1222
- background-color: var(--vuu-color-gray-25);
1223
- height: var(--vuuShell-height, 100vh);
1224
- width: var(--vuuShell-width, 100vw);
1225
- }
1226
- .vuuShell-mainTabs {
1227
- background: var(--salt-container-primary-background);
1228
- }
1229
- .vuuShell-palette {
1230
- --vuuView-border: none;
1231
- --vuuView-margin: 0;
1232
- }
1233
- .vuuShell-warningPlaceholder {
1234
- background-color: var(--salt-container-background-high);
1235
- height: 100%;
1236
- }
1237
- .vuuToolbarProxy {
1238
- background: var(--salt-container-primary-background);
1239
- }
1240
- .vuuShell-mainTabs > .vuuTabstrip > .vuuOverflowContainer-wrapContainer {
1241
- background: var(--vuu-color-gray-25);
1242
- }
1243
- .vuuShell-mainTabs {
1244
- --vuuTab-height: 28px;
1245
- border: solid 1px #D6D7DA;
1246
- border-top: none !important;
1247
- border-radius: 6px;
1248
- height: 100%;
1249
- padding: 36px 8px 8px 8px;
1250
- position: relative;
1251
- width: 100%;
1252
- }
1253
- .vuuShell-mainTabs > .vuuTabstrip {
1254
- --vuuTabstrip-height: 28px;
1255
- --saltTabs-tabstrip-height: 29px;
1256
- --tabstrip-height: 29px;
1257
- left: -1px;
1258
- padding-bottom: 7px;
1259
- position: absolute !important;
1260
- right: 1px;
1261
- top: 0;
1262
- width: calc(100% + 2px) !important;
1263
- }
1264
- .vuuShell-mainTabs > .vuuTabHeader {
1265
- border-bottom: none;
1266
- }
1267
- .vuuShell-mainTabs > .vuuTabstrip:before {
1268
- background-color: transparent;
1269
- border-radius: 0 6px 0 0;
1270
- border-left: solid 1px #D6D7DA;
1271
- border-right: solid 1px #D6D7DA;
1272
- border-top: solid 1px #D6D7DA;
1273
- content: "";
1274
- position: absolute;
1275
- bottom: 0;
1276
- left: 0;
1277
- right: 0;
1278
- height: 8px;
1279
- z-index: 1;
1280
- }
1281
- .vuuTab.MainTab {
1282
- --vuuTabMenu-top: -1px;
1283
- background-color: #F1F2F4;
1284
- border-color: #D6D7DA;
1285
- border-radius: 6px 6px 0 0;
1286
- border-width: 1px;
1287
- border-style: solid;
1288
- position: relative;
1289
- }
1290
- .MainTab.vuuTab-selected {
1291
- background-color: white;
1292
- border-bottom-color: white;
1293
- z-index: 1;
1294
- }
1295
- .MainTab.vuuTab-selected:before {
1296
- background-color: #6d188b;
1297
- content: "";
1298
- position: absolute;
1299
- height: 100%;
1300
- left: 0;
1301
- top: 0;
1302
- border-radius: 6px 0 0 0;
1303
- width: 6px;
1304
- }
1305
- .MainTab.vuuTab:hover:before {
1306
- background-color: #F37880;
1307
- content: "";
1308
- position: absolute;
1309
- height: 100%;
1310
- left: 0;
1311
- top: 0;
1312
- border-radius: 6px 0 0 0;
1313
- width: 6px;
1314
- }
1315
- .vuuTab.MainTab .vuuTab-main {
1316
- background-color: transparent;
1317
- font-weight: 700;
1318
- height: 29px;
1319
- padding: 0 24px;
1320
- }
1321
-
1322
- /* ../vuu-shell/src/theme-switch/ThemeSwitch.css */
1323
- .vuuThemeSwitch {
1324
- --saltButton-minWidth: 22px;
1325
- --svg-light: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 31q2.9 0 4.95-2.05Q31 26.9 31 24q0-2.9-2.05-4.95Q26.9 17 24 17q-2.9 0-4.95 2.05Q17 21.1 17 24q0 2.9 2.05 4.95Q21.1 31 24 31Zm0 3q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM3.5 25.5q-.65 0-1.075-.425Q2 24.65 2 24q0-.65.425-1.075Q2.85 22.5 3.5 22.5h5q.65 0 1.075.425Q10 23.35 10 24q0 .65-.425 1.075-.425.425-1.075.425Zm36 0q-.65 0-1.075-.425Q38 24.65 38 24q0-.65.425-1.075.425-.425 1.075-.425h5q.65 0 1.075.425Q46 23.35 46 24q0 .65-.425 1.075-.425.425-1.075.425ZM24 10q-.65 0-1.075-.425Q22.5 9.15 22.5 8.5v-5q0-.65.425-1.075Q23.35 2 24 2q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 10 24 10Zm0 36q-.65 0-1.075-.425-.425-.425-.425-1.075v-5q0-.65.425-1.075Q23.35 38 24 38q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 46 24 46ZM12 14.1l-2.85-2.8q-.45-.45-.425-1.075.025-.625.425-1.075.45-.45 1.075-.45t1.075.45L14.1 12q.4.45.4 1.05 0 .6-.4 1-.4.45-1.025.45-.625 0-1.075-.4Zm24.7 24.75L33.9 36q-.4-.45-.4-1.075t.45-1.025q.4-.45 1-.45t1.05.45l2.85 2.8q.45.45.425 1.075-.025.625-.425 1.075-.45.45-1.075.45t-1.075-.45ZM33.9 14.1q-.45-.45-.45-1.05 0-.6.45-1.05l2.8-2.85q.45-.45 1.075-.425.625.025 1.075.425.45.45.45 1.075t-.45 1.075L36 14.1q-.4.4-1.025.4-.625 0-1.075-.4ZM9.15 38.85q-.45-.45-.45-1.075t.45-1.075L12 33.9q.45-.45 1.05-.45.6 0 1.05.45.45.45.45 1.05 0 .6-.45 1.05l-2.8 2.85q-.45.45-1.075.425-.625-.025-1.075-.425ZM24 24Z"/></svg>');
1326
- --svg-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 42q-7.5 0-12.75-5.25T6 24q0-7.5 5.25-12.75T24 6q.4 0 .85.025.45.025 1.15.075-1.8 1.6-2.8 3.95-1 2.35-1 4.95 0 4.5 3.15 7.65Q28.5 25.8 33 25.8q2.6 0 4.95-.925T41.9 22.3q.05.6.075.975Q42 23.65 42 24q0 7.5-5.25 12.75T24 42Zm0-3q5.45 0 9.5-3.375t5.05-7.925q-1.25.55-2.675.825Q34.45 28.8 33 28.8q-5.75 0-9.775-4.025T19.2 15q0-1.2.25-2.575.25-1.375.9-3.125-4.9 1.35-8.125 5.475Q9 18.9 9 24q0 6.25 4.375 10.625T24 39Zm-.2-14.85Z"/></svg>');
1327
- padding: 2px;
1328
- }
1329
- .salt-density-high .vuuThemeSwitch {
1330
- --saltButton-minWidth: 16px;
1331
- --saltButton-width: 18px;
1332
- --vuuThemeSwitch-iconSize: 16px;
1333
- }
1334
- .vuuThemeSwitch [data-icon] {
1335
- --vuu-icon-size: var(--vuuThemeSwitch-iconSize,18px);
1336
- }
1337
- .vuuThemeSwitch [data-icon=light] {
1338
- --vuu-icon-svg: var(--svg-light);
1339
- }
1340
- .vuuThemeSwitch [data-icon=dark] {
1341
- --vuu-icon-svg: var(--svg-dark);
1342
- }
1343
- .vuuThemeSwitch .saltToggleButton {
1344
- height: 20px;
1345
- width: 20px;
1346
- }
1347
-
1348
639
  /* src/price-ticker/PriceTicker.css */
1349
640
  @property --price-ticker-color { syntax: "<color>"; initial-value: #15171B; inherits: false; }
1350
641
  .vuuPriceTicker {
@@ -1816,12 +1107,4 @@ input[type=radio] {
1816
1107
  top: 50%;
1817
1108
  width: 12px;
1818
1109
  }
1819
-
1820
- /* src/vuu-input/VuuInput.css */
1821
- .vuuInput {
1822
- --vuu-icon-size: 16px;
1823
- }
1824
- .vuuInput-errorIcon:after {
1825
- cursor: pointer;
1826
- }
1827
1110
  /*# sourceMappingURL=index.css.map */