@substrate-system/dialog 0.0.19 → 0.0.20
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/README.md +4 -6
- package/dist/index.css +1 -4
- package/dist/index.min.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -106,10 +106,11 @@ If you are using a bundler:
|
|
|
106
106
|
import '@substrate-system/dialog/css'
|
|
107
107
|
```
|
|
108
108
|
|
|
109
|
-
Or via CSS imports
|
|
109
|
+
Or via CSS imports, for example with
|
|
110
|
+
[lightningcss](https://lightningcss.dev/bundling.html):
|
|
110
111
|
|
|
111
112
|
```css
|
|
112
|
-
@import url("
|
|
113
|
+
@import url("@substrate-system/dialog/css");
|
|
113
114
|
```
|
|
114
115
|
|
|
115
116
|
#### CSS Variables
|
|
@@ -130,10 +131,7 @@ Customize the CSS with some variables.
|
|
|
130
131
|
--modal-dialog-background-color: #fff;
|
|
131
132
|
--modal-dialog-border-radius: 0;
|
|
132
133
|
--modal-dialog-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
|
|
133
|
-
--modal-dialog-padding
|
|
134
|
-
--modal-dialog-padding-left: 20px;
|
|
135
|
-
--modal-dialog-padding-right: 20px;
|
|
136
|
-
--modal-dialog-padding-bottom: 20px;
|
|
134
|
+
--modal-dialog-padding: 1rem;
|
|
137
135
|
--modal-dialog-width: 500px;
|
|
138
136
|
|
|
139
137
|
/* Close button */
|
package/dist/index.css
CHANGED
|
@@ -113,10 +113,7 @@ modal-window {
|
|
|
113
113
|
border-radius: var(--modal-dialog-border-radius, 0);
|
|
114
114
|
max-height: none;
|
|
115
115
|
box-shadow: var(--modal-dialog-box-shadow, 0 2px 5px 0 #00000080);
|
|
116
|
-
padding
|
|
117
|
-
padding-left: var(--modal-dialog-padding-left, 20px);
|
|
118
|
-
padding-right: var(--modal-dialog-padding-right, 20px);
|
|
119
|
-
padding-bottom: var(--modal-dialog-padding-bottom, 20px);
|
|
116
|
+
padding: var(--modal-dialog-padding, 1rem);
|
|
120
117
|
width: var(--modal-dialog-width, 500px);
|
|
121
118
|
border: none;
|
|
122
119
|
display: block;
|
package/dist/index.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@media (prefers-reduced-motion:reduce){*,:after,:before{transition:none!important;animation:none!important}}@keyframes SHOW-OVERLAY{0%{opacity:0}to{opacity:1}}@keyframes SHOW-DIALOG{0%{transform:scale(.95)}to{transform:scale(1)}}@keyframes HIDE-OVERLAY{0%{opacity:1}to{opacity:0}}@keyframes HIDE-DIALOG{0%{transform:scale(1)}to{transform:scale(.95)}}modal-window{& .modal-focus-trap{opacity:0;width:0;height:0;position:fixed;top:0;left:0;overflow:hidden}& .modal-scroll{width:100%;height:100%;z-index:var(--modal-overlay-z-index,100000);display:none;position:fixed;top:0;left:0;overflow:hidden auto;&.modal-visible{display:block}&.modal-show .modal-overlay{animation-name:SHOW-OVERLAY;animation-duration:.25s}&.modal-show .modal-dialog{animation-name:SHOW-DIALOG;animation-duration:.25s}&.modal-hide .modal-overlay{opacity:0;animation-name:HIDE-OVERLAY;animation-duration:.25s}&.modal-hide .modal-dialog{animation-name:HIDE-DIALOG;animation-duration:.25s;transform:scale(.95)}}& .modal-content{&>h2{margin-top:0}}& .modal-overlay{background-color:var(--modal-overlay-background-color,#00000080);justify-content:center;align-items:center;width:100%;min-height:100%;display:flex}& .modal-dialog{background-color:var(--modal-dialog-background-color,#fff);border-radius:var(--modal-dialog-border-radius,0);max-height:none;box-shadow:var(--modal-dialog-box-shadow,0 2px 5px 0 #00000080);padding
|
|
1
|
+
@media (prefers-reduced-motion:reduce){*,:after,:before{transition:none!important;animation:none!important}}@keyframes SHOW-OVERLAY{0%{opacity:0}to{opacity:1}}@keyframes SHOW-DIALOG{0%{transform:scale(.95)}to{transform:scale(1)}}@keyframes HIDE-OVERLAY{0%{opacity:1}to{opacity:0}}@keyframes HIDE-DIALOG{0%{transform:scale(1)}to{transform:scale(.95)}}modal-window{& .modal-focus-trap{opacity:0;width:0;height:0;position:fixed;top:0;left:0;overflow:hidden}& .modal-scroll{width:100%;height:100%;z-index:var(--modal-overlay-z-index,100000);display:none;position:fixed;top:0;left:0;overflow:hidden auto;&.modal-visible{display:block}&.modal-show .modal-overlay{animation-name:SHOW-OVERLAY;animation-duration:.25s}&.modal-show .modal-dialog{animation-name:SHOW-DIALOG;animation-duration:.25s}&.modal-hide .modal-overlay{opacity:0;animation-name:HIDE-OVERLAY;animation-duration:.25s}&.modal-hide .modal-dialog{animation-name:HIDE-DIALOG;animation-duration:.25s;transform:scale(.95)}}& .modal-content{&>h2{margin-top:0}}& .modal-overlay{background-color:var(--modal-overlay-background-color,#00000080);justify-content:center;align-items:center;width:100%;min-height:100%;display:flex}& .modal-dialog{background-color:var(--modal-dialog-background-color,#fff);border-radius:var(--modal-dialog-border-radius,0);max-height:none;box-shadow:var(--modal-dialog-box-shadow,0 2px 5px 0 #00000080);padding:var(--modal-dialog-padding,1rem);width:var(--modal-dialog-width,500px);border:none;display:block;position:relative}& .modal-close{appearance:none;touch-action:none;user-select:none;color:var(--modal-close-color,#fff);background-color:var(--modal-close-background-color,#000);border-radius:var(--modal-close-border-radius,50%);box-shadow:var(--modal-close-box-shadow,0 0 0 1px #fff);display:var(--modal-close-display,block);cursor:pointer;font-family:var(--modal-close-font-family,"Arial",sans-serif);font-size:var(--modal-close-font-size,23px);text-align:center;line-height:var(--modal-close-line-height,26px);width:var(--modal-close-width,26px);border:0;padding:0;position:absolute;top:0;right:0;transform:translate(40%,-40%);&:hover{color:var(--modal-close-color-hover,#000);background-color:var(--modal-close-background-color-hover,#fff);box-shadow:var(--modal-close-box-shadow-hover,0 0 0 1px #000)}}& dialog{max-width:80vw}@supports selector(:focus-visible){& .modal-close:focus-visible{color:var(--modal-close-color-hover,#000);background-color:var(--modal-close-background-color-hover,#fff);box-shadow:var(--modal-close-box-shadow-hover,0 0 0 1px #000)}}@supports not selector(:focus-visible){& .modal-close:focus{color:var(--modal-close-color-hover,#000);background-color:var(--modal-close-background-color-hover,#fff);box-shadow:var(--modal-close-box-shadow-hover,0 0 0 1px #000)}}}
|