@planningcenter/tapestry 4.0.1-rc.2 → 4.0.1-rc.3

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/index.css CHANGED
@@ -4834,12 +4834,15 @@ a.tds-dropdown-item:is(:hover, :active){
4834
4834
  }
4835
4835
 
4836
4836
  .tds-modal-overlay{
4837
+ --tds-modal-min-margin-block:var(--t-spacing-3);
4838
+
4837
4839
  position:fixed;
4838
4840
  inset:0;
4839
4841
  z-index:1000;
4840
- display:flex;
4841
- align-items:center;
4842
- justify-content:center;
4842
+ display:grid;
4843
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
4844
+ justify-items:center;
4845
+ overflow-y:auto;
4843
4846
  background:hsl(0 0% 0% / 40%);
4844
4847
  }
4845
4848
 
@@ -4859,10 +4862,12 @@ a.tds-dropdown-item:is(:hover, :active){
4859
4862
 
4860
4863
  .tds-modal-frame{
4861
4864
  --tds-modal-width:600px;
4862
-
4865
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
4863
4866
  display:flex;
4867
+
4868
+ grid-row:2;
4864
4869
  justify-content:center;
4865
- width:min(var(--tds-modal-width), calc(100% - 48px));
4870
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
4866
4871
  }
4867
4872
 
4868
4873
  .tds-modal-frame[data-entering]{
@@ -4905,7 +4910,7 @@ a.tds-dropdown-item:is(:hover, :active){
4905
4910
  display:flex;
4906
4911
  flex-direction:column;
4907
4912
  width:100%;
4908
- padding-block:var(--t-spacing-3);
4913
+ padding-block-start:var(--t-spacing-3);
4909
4914
  padding-inline:0;
4910
4915
  background:var(--t-surface-color-card);
4911
4916
 
@@ -4968,7 +4973,7 @@ a.tds-dropdown-item:is(:hover, :active){
4968
4973
  gap:var(--t-spacing-2);
4969
4974
  align-items:center;
4970
4975
  justify-content:flex-end;
4971
- padding-block-start:var(--t-spacing-3);
4976
+ padding-block:var(--t-spacing-3);
4972
4977
  padding-inline:var(--t-spacing-4);
4973
4978
  border-top:1px solid var(--t-border-color);
4974
4979
  }
@@ -4977,6 +4982,18 @@ a.tds-dropdown-item:is(:hover, :active){
4977
4982
  margin-inline-end:auto;
4978
4983
  }
4979
4984
 
4985
+ @media (min-width: 720px){
4986
+ .tds-modal-overlay{
4987
+ --tds-modal-min-margin-block:0;
4988
+ }
4989
+
4990
+ .tds-modal-footer{
4991
+ position:sticky;
4992
+ bottom:0;
4993
+ background:var(--t-surface-color-card);
4994
+ }
4995
+ }
4996
+
4980
4997
  .tds-number-stepper{
4981
4998
  --tds-number-stepper-button-offset:4px;
4982
4999
  --tds-number-stepper-button-gap:2px;