ada-ui 3.0.3 → 4.1.0
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/css/ada.blue.css +1 -1
- package/css/ada.css +1 -1
- package/css/ada.green.css +1 -1
- package/index.html +151 -96
- package/package.json +4 -2
- package/scss/_ada.theme-base.scss +1 -0
- package/scss/_button.scss +53 -0
- package/scss/_command.scss +106 -0
- package/scss/_corner.scss +16 -0
- package/scss/_input.scss +24 -0
- package/scss/_panel.scss +120 -0
- package/scss/_spinner.scss +385 -0
- package/scss/_tile.scss +70 -0
- package/scss/_typography.scss +49 -0
- package/scss/ada.blue.scss +34 -8
- package/scss/ada.green.scss +34 -10
- package/scss/ada.scss +8 -360
- package/manifest.json +0 -9
package/css/ada.blue.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.warn,.accent,:root{--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));--fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);--fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);--default: hsl(var(--h), var(--s), var(--l));--default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);--light: hsl(var(--h), var(--s), var(--l-light));--light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);--light-alpha70: hsla(var(--h), var(--s), var(--l-light), 0.7)}:root{--h:
|
|
1
|
+
.warn,.accent,.shade2,.shade1,:root{--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));--fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);--fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);--default: hsl(var(--h), var(--s), var(--l));--default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);--default-alpha60: hsla(var(--h), var(--s), var(--l), 0.6);--light: hsl(var(--h), var(--s), var(--l-light));--light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);--light-alpha70: hsla(var(--h), var(--s), var(--l-light), 0.7)}:root{--h: 197;--s: 100%;--l: 19%;--l-light: 40%;--bg: hsl(var(--h), 80%, 7%);--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.shade1{--h: 198;--s: 90%;--l: 30%;--l-light: 58%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.shade2{--h: 165;--s: 90%;--l: 20%;--l-light: 40%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 14;--s: 81%;--l: 38%;--l-light: 60%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 75%;--l: 29%;--l-light: 67%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}
|
package/css/ada.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
html{font-size:14px;font-family:"Open Sans",sans-serif;font-weight:400}@media screen and (max-width: 1199px){html{font-size:12px}}html,body{height:100%;min-height:100%;margin:0;padding:0;background:var(--bg);color:var(--fg)}h1{font-size:3rem;margin:1rem 0 2rem 0}h2{font-size:2rem;margin:1rem 0 1.5rem 0}.panel>header,.tile>header,h3{font-size:1.5rem;margin:.5rem 0 1.5rem 0}h4{font-weight:400;font-size:1.2rem;margin:.5rem 0 .5rem 0}h1,h2,.panel>header,.tile>header,h3,h4{font-weight:300;text-shadow:0 0 4px var(--light-alpha40);color:var(--fg)}h1.m-0,h2.m-0,.panel>header,.tile>header,h3.m-0,h4.m-0{margin:0}body{font-size:1rem;-webkit-tap-highlight-color:transparent;box-sizing:border-box;padding:.5rem}.panel>footer:after,.tile>footer:after,.panel>footer:before,.tile>footer:before,.panel>header:after,.tile>header:after,.panel>header:before,.tile>header:before{content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2}.tile>footer:after,.tile>footer:before,.tile>header:after,.tile>header:before{border-color:var(--light-alpha40);height:.75rem;width:.75rem}.button-group{margin:.8rem}.button,.button.icon{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border-radius:.3rem;box-shadow:0 0 10px 0px rgba(0,0,0,.4);outline:none;border:1px solid var(--light-alpha40);color:var(--fg);text-shadow:0 0 4px var(--light-alpha40);font-family:inherit;cursor:pointer;user-select:none;background-color:transparent;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out;min-height:min-content;min-width:8rem;padding:.8rem 1.6rem;margin:.8rem;font-size:1.1rem}.button.small,.button.icon{display:grid;justify-items:center;align-items:center;min-width:0;padding:.8rem}.button.icon{border:1px solid transparent;box-shadow:none;background:none}.button.icon>i.material-icons{font-size:20px}.button-group>.button.icon{margin:1px}.button.fill{background-color:var(--default)}.button:focus{border:1px solid var(--light-alpha70)}.button:active{background-color:var(--light-alpha70);border:1px solid var(--default-alpha40)}.button:disabled{opacity:.4;filter:saturate(0.6);cursor:default;color:var(--fg-alpha80);pointer-events:none}.input{border-radius:.3rem;box-shadow:0 0 10px 0px rgba(0,0,0,.4);outline:none;border:1px solid var(--light-alpha40);color:var(--fg);text-shadow:0 0 4px var(--light-alpha40);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:.8rem 1.6rem;margin:.8rem;font-size:1.1rem}.input:focus{border:1px solid var(--light-alpha70)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;color:var(--fg-alpha80);pointer-events:none}.panel,.tile{background:var(--default-alpha10);box-shadow:0 0 20px 1px rgba(0,0,0,.4);border-radius:.3rem;display:grid;grid-template-rows:auto 1fr auto;overflow:auto;margin:.5rem}.panel>header,.tile>header{position:relative;text-align:left;padding:.4rem .6rem}.panel>header:before,.tile>header:before{border-width:2px 0 0 2px;border-radius:.3rem 0 0 0;left:0;top:0}.panel>header:after,.tile>header:after{border-width:2px 2px 0 0;border-radius:0 .3rem 0 0;right:0;top:0}.panel>header:empty,.tile>header:empty{padding:.2rem}.panel>article,.tile>article{z-index:1;padding:0 .6rem;overflow:auto}.panel>article::-webkit-scrollbar,.tile>article::-webkit-scrollbar{width:2px;background:transparent}.panel>article::-webkit-scrollbar-thumb,.tile>article::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:2px 2px 1px 2px;background:var(--default);box-sizing:border-box;background-clip:padding-box}.panel>footer,.tile>footer{position:relative;text-align:right;padding:.4rem .6rem;font-size:.75rem;color:var(--fg-alpha60)}.panel>footer:before,.tile>footer:before{border-width:0 0 2px 2px;border-radius:0 0 0 .3rem;left:0;bottom:0}.panel>footer:after,.tile>footer:after{border-width:0 2px 2px 0;border-radius:0 0 .3rem 0;right:0;bottom:0}.panel>footer:empty,.tile>footer:empty{padding:.2rem}.tile{margin:.8rem}.tile>header:before{border-width:1px 0 0 1px}.tile>header:after{border-width:1px 1px 0 0}.tile>article{color:var(--fg);text-shadow:0 0 4px var(--light-alpha40)}.tile>footer:before{border-width:0 0 1px 1px}.tile>footer:after{border-width:0 1px 1px 0}.tile.inset{box-shadow:inset 0 0 20px 1px rgba(0,0,0,.4)}.tile.inset>header{color:var(--fg-alpha80)}.tile.inset>header:before,.tile.inset>header:after{opacity:.6}.tile.inset>article{color:var(--fg-alpha80)}.tile.inset footer:before,.tile.inset footer:after{opacity:.6}.spinner{width:100%;height:100%;box-sizing:border-box;position:relative;border-style:solid;border-width:.3em;border-radius:50%;border-color:transparent var(--default);animation:4s rotateOuter linear infinite;box-shadow:0 0 10px 0px rgba(0,0,0,.4) inset}.spinner:before{content:"";position:absolute;top:.2em;left:.2em;right:.2em;bottom:.2em;border-style:inherit;border-width:inherit;border-color:transparent var(--light-alpha70);border-radius:inherit;animation:2s rotateInner linear infinite;box-shadow:0 0 10px 0px rgba(0,0,0,.6) inset}.spinner:after{content:"";position:absolute;top:.7em;left:.7em;right:.7em;bottom:.7em;border-style:inherit;border-width:inherit;border-color:transparent var(--light-alpha40);border-radius:inherit;animation:4s rotateCenter linear infinite}@keyframes rotateOuter{0%{transform:rotate(45deg)}100%{transform:rotate(225deg)}}@keyframes rotateInner{0%{transform:rotate(-90deg)}100%{transform:rotate(-270deg)}}@keyframes rotateCenter{0%{transform:rotate(0)}100%{transform:rotate(180deg)}}
|
|
1
|
+
html{font-size:14px;font-family:"Open Sans",sans-serif;font-weight:400}@media screen and (max-width: 1199px){html{font-size:12px}}html,body{height:100%;min-height:100%;margin:0;padding:0;background:var(--bg);color:var(--fg)}body{font-size:1rem;-webkit-tap-highlight-color:transparent;box-sizing:border-box;padding:.5rem}h1{font-size:3rem;margin:1rem 0 2rem 0}.command-bar,h2{font-size:2rem;margin:1rem 0 1.5rem 0}.panel>header:not(.command-bar),.tile>header:not(.command-bar),h3{font-size:1.5rem;margin:.5rem 0 1.5rem 0}.tile>header.command-bar,.panel>footer.command-bar,.tile>footer.command-bar,h4{font-weight:400;font-size:1.2rem;margin:.5rem 0 .5rem 0}h1,.command-bar,h2,.panel>header:not(.command-bar),.tile>header:not(.command-bar),h3,.tile>header.command-bar,.panel>footer.command-bar,.tile>footer.command-bar,h4{font-weight:300;text-shadow:0 0 4px var(--light-alpha40);color:var(--fg)}h1.m-0,.command-bar,.panel>footer.command-bar,.tile>footer.command-bar,.panel>header.command-bar,h2.m-0,.panel>header:not(.command-bar),.tile>header:not(.command-bar),h3.m-0,.tile>header.m-0.command-bar,.tile>header.command-bar,.panel>footer.m-0.command-bar,.panel>footer.command-bar,.tile>footer.m-0.command-bar,.tile>footer.command-bar,h4.m-0{margin:0}.panel>footer:not(.command-bar):after,.tile>footer:not(.command-bar):after,.panel>footer:not(.command-bar):before,.tile>footer:not(.command-bar):before,.panel>header:not(.command-bar):after,.tile>header:not(.command-bar):after,.panel>header:not(.command-bar):before,.tile>header:not(.command-bar):before{content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2}.tile>footer:not(.command-bar):after,.tile>footer:not(.command-bar):before,.tile>header:not(.command-bar):after,.tile>header:not(.command-bar):before{border-color:var(--light-alpha40);height:.75rem;width:.75rem}.panel,.tile{background:var(--default-alpha10);box-shadow:0 0 10px 0 rgba(0,0,0,.4);border-radius:.3rem;display:grid;grid-template-rows:auto 1fr auto;overflow:auto;margin:.5rem}.panel>header,.tile>header{position:relative}.panel>header:not(.command-bar),.tile>header:not(.command-bar){text-align:left;padding:.4rem .6rem}.panel>header:not(.command-bar):before,.tile>header:not(.command-bar):before{border-width:2px 0 0 2px;border-radius:.3rem 0 0 0;left:0;top:0}.panel>header:not(.command-bar):after,.tile>header:not(.command-bar):after{border-width:2px 2px 0 0;border-radius:0 .3rem 0 0;right:0;top:0}.panel>header:empty,.tile>header:empty{padding:.2rem}.panel>header.command-bar,.tile>header.command-bar{margin-bottom:1rem}.panel>header.command-bar:before,.tile>header.command-bar:before{border-radius:.3rem 0 0 0}.panel>header.command-bar:after,.tile>header.command-bar:after{border-radius:0 .3rem 0 0}.panel>article,.tile>article{z-index:1;padding:0 .6rem;overflow:auto}.panel>article::-webkit-scrollbar,.tile>article::-webkit-scrollbar{width:2px;background:transparent}.panel>article::-webkit-scrollbar-thumb,.tile>article::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:2px 2px 1px 2px;background:var(--default);box-sizing:border-box;background-clip:padding-box}.panel>footer,.tile>footer{position:relative}.panel>footer:not(.command-bar),.tile>footer:not(.command-bar){color:var(--fg-alpha60);padding:.4rem .6rem;font-size:.75rem;text-align:right}.panel>footer:not(.command-bar):before,.tile>footer:not(.command-bar):before{border-width:0 0 2px 2px;border-radius:0 0 0 .3rem;left:0;bottom:0}.panel>footer:not(.command-bar):after,.tile>footer:not(.command-bar):after{border-width:0 2px 2px 0;border-radius:0 0 .3rem 0;right:0;bottom:0}.panel>footer:empty,.tile>footer:empty{padding:.2rem}.panel>footer.command-bar,.tile>footer.command-bar{margin-top:1rem;line-height:2rem;height:2rem}.panel>footer.command-bar:before,.tile>footer.command-bar:before{border-radius:0 0 0 .3rem}.panel>footer.command-bar:after,.tile>footer.command-bar:after{border-radius:0 0 .3rem 0}.panel>footer.command-bar>.command,.tile>footer.command-bar>.command{height:2rem;font-size:.9rem}.tile>footer:not(.command-bar):after,.tile>footer:not(.command-bar):before,.tile>header:not(.command-bar):after,.tile>header:not(.command-bar):before,.panel>header:not(.command-bar):before,.panel>header:not(.command-bar):after,.panel>footer:not(.command-bar):before,.panel>footer:not(.command-bar):after{content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2}.tile>footer:not(.command-bar):after,.tile>footer:not(.command-bar):before,.tile>header:not(.command-bar):after,.tile>header:not(.command-bar):before{border-color:var(--light-alpha40);height:.75rem;width:.75rem}.tile{margin:.8rem}.tile>header:not(.command-bar):before{border-width:1px 0 0 1px}.tile>header:not(.command-bar):after{border-width:1px 1px 0 0}.tile>header.command-bar{line-height:2rem;height:2rem}.tile>header.command-bar>.command{height:2rem;font-size:.9rem}.tile>article{color:var(--fg)}.tile>footer:not(.command-bar):before{border-width:0 0 1px 1px}.tile>footer:not(.command-bar):after{border-width:0 1px 1px 0}.tile.inset{box-shadow:inset 0 0 10px 0 rgba(0,0,0,.4)}.tile.inset>header{color:var(--fg-alpha80)}.tile.inset>header:before,.tile.inset>header:after{opacity:.6}.tile.inset>article{color:var(--fg-alpha80)}.tile.inset footer:before,.tile.inset footer:after{opacity:.6}.command:not(.spacer),.button{overflow:hidden;outline:none;color:var(--fg);font-family:inherit;cursor:pointer;user-select:none;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out}.command:disabled:not(.spacer),.button:disabled{opacity:.4;filter:saturate(0.6);cursor:default;color:var(--fg-alpha80);pointer-events:none}.button{white-space:nowrap;text-overflow:ellipsis;border-radius:.3rem;box-shadow:0 0 10px 0 rgba(0,0,0,.4);border:1px solid var(--light-alpha40);background-color:transparent;min-height:min-content;min-width:8rem;padding:.8rem 1.6rem;margin:.8rem;font-size:1.1rem}.button.small{min-width:0;padding:.8rem}.button.fill{background-color:var(--default)}.button:focus{border:1px solid var(--light-alpha70)}.button:active{background-color:var(--light-alpha70);border:1px solid var(--default-alpha40)}.command-bar-v{position:relative;display:grid;grid-auto-flow:row;gap:.5rem;width:12rem;padding-top:1.5rem;padding-bottom:1.5rem;margin:.5rem}.command-bar-v:before,.command-bar-v:after{box-shadow:0 0 10px 0 rgba(0,0,0,.4);position:absolute;content:"";height:1rem;left:0;right:0;background:var(--default-alpha60)}.command-bar-v:before{border-radius:.3rem .3rem 0 0;top:0}.command-bar-v:after{border-radius:0 0 .3rem .3rem;bottom:0}.command-bar-v>.command{min-height:3.6rem;width:12rem}.command-bar{position:relative;display:grid;grid-auto-flow:column;text-align:center;gap:.5rem;align-items:center;line-height:3.6rem;height:3.6rem;padding-left:1.5rem;padding-right:1.5rem;margin:.5rem}.command-bar:before,.command-bar:after{box-shadow:0 0 10px 0 rgba(0,0,0,.4);position:absolute;content:"";width:1rem;top:0;bottom:0;background:var(--default-alpha60)}.command-bar:before{border-radius:.3rem 0 0 .3rem;left:0}.command-bar:after{border-radius:0 .3rem .3rem 0;right:0}.command-bar>.command{height:3.6rem}.command{box-sizing:border-box;background-color:var(--default-alpha60);box-shadow:0 0 10px 0 rgba(0,0,0,.4)}.command:not(.spacer){min-width:8rem;display:grid;align-items:end;justify-items:end;text-align:end;font-size:1.1rem;border-style:solid;border-color:transparent;border-width:0 1px 0 0;padding:.4rem}.command:not(.spacer).small{min-width:0}.command:not(.spacer):focus{border-color:var(--light-alpha70)}.command:not(.spacer):active{background-color:var(--light-alpha40)}.input{border-radius:.3rem;box-shadow:0 0 10px 0 rgba(0,0,0,.4);outline:none;border:1px solid var(--light-alpha40);color:var(--fg);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:.8rem 1.6rem;margin:.8rem;font-size:1.1rem}.input:focus{border:1px solid var(--light-alpha70)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;color:var(--fg-alpha80);pointer-events:none}.spinner-test{margin:.3rem;display:grid;justify-items:center;align-items:center;width:1em;height:1em;position:relative;box-sizing:border-box;animation:8s .5s rotate ease-in-out infinite}.spinner-test:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:var(--light-alpha40) transparent;animation:6s .5s inset1-test ease-in-out infinite;box-shadow:0px 12px 10px -12px #000a,0px -12px 10px -12px #000a}.spinner-test:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:transparent var(--light-alpha70);animation:6s .5s inset2-test ease-in-out infinite;box-shadow:12px 0px 10px -12px #000a,-12px 0px 10px -12px #000a}.spinner2{margin:.3rem;display:grid;justify-items:center;align-items:center;width:1em;height:1em;position:relative;box-sizing:border-box;animation:6s .5s rotate ease-in-out alternate infinite}.spinner2:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:var(--light-alpha40) transparent;animation:4s .5s inset1 ease-in-out infinite;box-shadow:0px 12px 10px -12px #000a,0px -12px 10px -12px #000a}.spinner2:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:transparent var(--light-alpha70);animation:4s .5s inset2 ease-in-out infinite;box-shadow:12px 0px 10px -12px #000a,-12px 0px 10px -12px #000a}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes inset1{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}12.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}37.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}@keyframes inset2{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}62.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}87.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}@keyframes inset1-test{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}12.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}25%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}37.5%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(270deg)}87.5%{top:0;left:0;right:0;bottom:0;transform:rotate(270deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(360deg)}}@keyframes inset2-test{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}37.5%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(90deg)}62.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(90deg)}75%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(270deg)}87.5%{top:0;left:0;right:0;bottom:0;transform:rotate(270deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(360deg)}}.spinner{display:grid;justify-items:center;align-items:center;width:3em;height:1em;position:relative}.spinner:before{content:"";position:absolute;width:.6em;height:.6em;border-radius:50%;background:var(--light-alpha40);animation:1.5s .1s swing ease-in-out infinite;box-sizing:border-box}.spinner:after{content:"";position:absolute;width:1em;height:1em;border-radius:50%;box-shadow:0 0 10px 0 rgba(0,0,0,.4);border:.1em solid var(--light-alpha70);animation:1.5s swing ease-in-out infinite;box-sizing:border-box}@keyframes swing{0%{transform:translateX(-1.5em)}50%{transform:translateX(1.5em)}100%{transform:translateX(-1.5em)}}.spinner-old{width:100%;height:100%;box-sizing:border-box;position:relative;border-style:solid;border-width:.3em;border-radius:50%;border-color:transparent var(--default);animation:4s rotateOuter linear infinite;box-shadow:inset 0 0 10px 0 rgba(0,0,0,.4)}.spinner-old:before{content:"";position:absolute;top:.2em;left:.2em;right:.2em;bottom:.2em;border-style:inherit;border-width:inherit;border-color:transparent var(--light-alpha70);border-radius:inherit;animation:2s rotateInner linear infinite;box-shadow:inset 0 0 10px 0 rgba(0,0,0,.4)}.spinner-old:after{content:"";position:absolute;top:.7em;left:.7em;right:.7em;bottom:.7em;border-style:inherit;border-width:inherit;border-color:transparent var(--light-alpha40);border-radius:inherit;animation:4s rotateCenter linear infinite}@keyframes rotateOuter{0%{transform:rotate(45deg)}100%{transform:rotate(225deg)}}@keyframes rotateInner{0%{transform:rotate(-90deg)}100%{transform:rotate(-270deg)}}@keyframes rotateCenter{0%{transform:rotate(0)}100%{transform:rotate(180deg)}}
|
package/css/ada.green.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.warn,.accent,:root{--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));--fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);--fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);--default: hsl(var(--h), var(--s), var(--l));--default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);--light: hsl(var(--h), var(--s), var(--l-light));--light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);--light-alpha70: hsla(var(--h), var(--s), var(--l-light), 0.7)}:root{--h:
|
|
1
|
+
.warn,.accent,.shade2,.shade1,:root{--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));--fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);--fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);--default: hsl(var(--h), var(--s), var(--l));--default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);--default-alpha60: hsla(var(--h), var(--s), var(--l), 0.6);--light: hsl(var(--h), var(--s), var(--l-light));--light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);--light-alpha70: hsla(var(--h), var(--s), var(--l-light), 0.7)}:root{--h: 135;--s: 100%;--l: 19%;--l-light: 36%;--bg: hsl(var(--h), 20%, 15%);--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.shade1{--h: 96;--s: 89%;--l: 23%;--l-light: 40%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.shade2{--h: 169;--s: 90%;--l: 22%;--l-light: 40%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 16;--s: 81%;--l: 38%;--l-light: 60%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 356;--s: 95%;--l: 30%;--l-light: 60%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}
|
package/index.html
CHANGED
|
@@ -16,116 +16,171 @@
|
|
|
16
16
|
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
|
|
17
17
|
rel="stylesheet"
|
|
18
18
|
/>
|
|
19
|
-
<link
|
|
20
|
-
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
|
21
|
-
rel="stylesheet"
|
|
22
|
-
/>
|
|
23
|
-
<link rel="manifest" href="manifest.json" />
|
|
24
19
|
</head>
|
|
25
20
|
|
|
26
|
-
<body
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
grid-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
<header>Buttons</header>
|
|
35
|
-
<article>
|
|
36
|
-
<div
|
|
37
|
-
style="
|
|
38
|
-
display: grid;
|
|
39
|
-
grid-template-columns: 1fr repeat(3, auto);
|
|
40
|
-
justify-items: center;
|
|
41
|
-
align-items: start;
|
|
42
|
-
justify-content: start;
|
|
43
|
-
align-items: center;
|
|
44
|
-
"
|
|
45
|
-
>
|
|
46
|
-
Default
|
|
47
|
-
<button class="button">Button</button>
|
|
48
|
-
<button class="button accent">Button</button>
|
|
49
|
-
<button class="button warn">Button</button>
|
|
50
|
-
Small
|
|
51
|
-
<button class="button small">Button</button>
|
|
52
|
-
<button class="button small accent">Button</button>
|
|
53
|
-
<button class="button small warn">Button</button>
|
|
54
|
-
Fill
|
|
55
|
-
<button class="button fill">Button</button>
|
|
56
|
-
<button class="button fill accent">Button</button>
|
|
57
|
-
<button class="button fill warn">Button</button>
|
|
58
|
-
Icon
|
|
59
|
-
<button class="button icon">
|
|
60
|
-
<i class="material-icons">check</i>
|
|
61
|
-
</button>
|
|
62
|
-
<button class="button icon accent">
|
|
63
|
-
<i class="material-icons">check</i>
|
|
64
|
-
</button>
|
|
65
|
-
<button class="button icon warn">
|
|
66
|
-
<i class="material-icons">check</i>
|
|
67
|
-
</button>
|
|
68
|
-
Icon Fill
|
|
69
|
-
<button class="button icon fill">
|
|
70
|
-
<i class="material-icons">check</i>
|
|
71
|
-
</button>
|
|
72
|
-
<button class="button icon fill accent">
|
|
73
|
-
<i class="material-icons">check</i>
|
|
74
|
-
</button>
|
|
75
|
-
<button class="button icon fill warn">
|
|
76
|
-
<i class="material-icons">check</i>
|
|
77
|
-
</button>
|
|
78
|
-
Disabled
|
|
79
|
-
<button disabled class="button">Button</button>
|
|
80
|
-
<button disabled class="button fill">Button</button>
|
|
81
|
-
<button disabled class="button icon">
|
|
82
|
-
<i class="material-icons">check</i>
|
|
83
|
-
</button>
|
|
84
|
-
Spinner
|
|
85
|
-
<div style="width: 48px; height: 48px; font-size: 12px">
|
|
86
|
-
<div class="spinner"></div>
|
|
87
|
-
</div>
|
|
88
|
-
<div style="width: 32px; height: 32px; font-size: 8px">
|
|
89
|
-
<div class="spinner"></div>
|
|
90
|
-
</div>
|
|
91
|
-
<div style="width: 16px; height: 16px; font-size: 4px">
|
|
92
|
-
<div class="spinner"></div>
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
</article>
|
|
96
|
-
<footer></footer>
|
|
21
|
+
<body style="display: grid; grid: 'test a' 1fr 'c c' auto / auto 1fr">
|
|
22
|
+
<div
|
|
23
|
+
class="command-bar-v"
|
|
24
|
+
style="grid-area: test; grid-template-rows: auto auto 1fr"
|
|
25
|
+
>
|
|
26
|
+
<button class="command">Command</button>
|
|
27
|
+
<button class="command shade1">Second Command</button>
|
|
28
|
+
<button class="command shade2">Third Command</button>
|
|
97
29
|
</div>
|
|
98
|
-
<div class="panel">
|
|
99
|
-
<header
|
|
30
|
+
<div class="panel" style="grid-area: a">
|
|
31
|
+
<header
|
|
32
|
+
class="command-bar"
|
|
33
|
+
style="grid-template-columns: repeat(3, 1fr) auto"
|
|
34
|
+
>
|
|
35
|
+
<button class="command">Command</button>
|
|
36
|
+
<button
|
|
37
|
+
class="command shade1"
|
|
38
|
+
style="justify-items: center; align-items: center"
|
|
39
|
+
>
|
|
40
|
+
<div class="spinner2" style="font-size: 30px"></div>
|
|
41
|
+
</button>
|
|
42
|
+
<button class="command shade2">Third Command</button>
|
|
43
|
+
Header
|
|
44
|
+
</header>
|
|
100
45
|
<article
|
|
101
46
|
style="
|
|
102
47
|
display: grid;
|
|
103
|
-
grid
|
|
104
|
-
grid-template-rows: repeat(2, 1fr);
|
|
48
|
+
grid: 'buttons tiles' 1fr 'spinner tiles' auto / 3fr 1fr;
|
|
105
49
|
"
|
|
106
50
|
>
|
|
107
|
-
<div class="
|
|
108
|
-
<header>
|
|
109
|
-
<article>
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
51
|
+
<div class="panel" style="grid-area: buttons">
|
|
52
|
+
<header>Buttons</header>
|
|
53
|
+
<article>
|
|
54
|
+
<h3>Default</h3>
|
|
55
|
+
<button class="button">
|
|
56
|
+
<div class="spinner" style="font-size: 1.1rem"></div>
|
|
57
|
+
</button>
|
|
58
|
+
<button class="button shade1">Button</button>
|
|
59
|
+
<button class="button shade2">Button</button>
|
|
60
|
+
<button class="button accent">Button</button>
|
|
61
|
+
<button class="button warn">Button</button>
|
|
62
|
+
<h3>Small</h3>
|
|
63
|
+
<button class="button small">Button</button>
|
|
64
|
+
<button class="button small shade1">Button</button>
|
|
65
|
+
<button class="button small shade2">Button</button>
|
|
66
|
+
<button class="button small accent">Button</button>
|
|
67
|
+
<button class="button small warn">Button</button>
|
|
68
|
+
<h3>Fill</h3>
|
|
69
|
+
<button class="button fill">Button</button>
|
|
70
|
+
<button class="button fill shade1">Button</button>
|
|
71
|
+
<button class="button fill shade2">Button</button>
|
|
72
|
+
<button class="button fill accent">Button</button>
|
|
73
|
+
<button class="button fill warn">Button</button>
|
|
74
|
+
<h3>Disabled</h3>
|
|
75
|
+
<button disabled class="button">Button</button>
|
|
76
|
+
<button disabled class="button fill">Button</button>
|
|
77
|
+
<button disabled class="button fill shade1">Button</button>
|
|
78
|
+
<button disabled class="button fill shade2">Button</button>
|
|
79
|
+
<button disabled class="button fill accent">Button</button>
|
|
80
|
+
<button disabled class="button fill warn">Button</button>
|
|
81
|
+
</article>
|
|
82
|
+
<footer></footer>
|
|
116
83
|
</div>
|
|
117
|
-
<div class="
|
|
118
|
-
<header
|
|
119
|
-
<article
|
|
84
|
+
<div class="panel" style="grid-area: spinner">
|
|
85
|
+
<header>Spinner</header>
|
|
86
|
+
<article
|
|
87
|
+
style="
|
|
88
|
+
display: grid;
|
|
89
|
+
grid-auto-flow: column;
|
|
90
|
+
justify-content: start;
|
|
91
|
+
align-items: center;
|
|
92
|
+
gap: 2rem;
|
|
93
|
+
"
|
|
94
|
+
>
|
|
95
|
+
<div style="width: 48px; height: 48px; font-size: 10px">
|
|
96
|
+
<div class="spinner-old"></div>
|
|
97
|
+
</div>
|
|
98
|
+
<div style="width: 32px; height: 32px; font-size: 8px">
|
|
99
|
+
<div class="spinner-old"></div>
|
|
100
|
+
</div>
|
|
101
|
+
<div style="width: 16px; height: 16px; font-size: 4px">
|
|
102
|
+
<div class="spinner-old shade1"></div>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="spinner2" style="font-size: 120px"></div>
|
|
105
|
+
<div class="spinner2 shade1" style="font-size: 120px"></div>
|
|
106
|
+
<div class="spinner2 shade2" style="font-size: 32px"></div>
|
|
107
|
+
<div class="spinner2 accent" style="font-size: 16px"></div>
|
|
108
|
+
<div class="spinner" style="font-size: 40px"></div>
|
|
109
|
+
<div class="spinner shade2" style="font-size: 32px"></div>
|
|
110
|
+
<div class="spinner accent" style="font-size: 16px"></div>
|
|
111
|
+
<div class="spinner2" style="font-size: 1.75rem"></div>
|
|
112
|
+
<div class="spinner2 accent" style="font-size: 16px"></div>
|
|
113
|
+
</article>
|
|
120
114
|
<footer></footer>
|
|
121
115
|
</div>
|
|
122
|
-
<div class="
|
|
123
|
-
<header
|
|
124
|
-
<article
|
|
116
|
+
<div class="panel" style="grid-area: tiles">
|
|
117
|
+
<header>Tiles</header>
|
|
118
|
+
<article
|
|
119
|
+
style="
|
|
120
|
+
display: grid;
|
|
121
|
+
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
|
122
|
+
"
|
|
123
|
+
>
|
|
124
|
+
<div class="tile">
|
|
125
|
+
<header class="command-bar">
|
|
126
|
+
<button class="command small shade2">Comand</button>
|
|
127
|
+
<div class="command spacer"></div>
|
|
128
|
+
</header>
|
|
129
|
+
<article>Tile</article>
|
|
130
|
+
<footer class="command-bar">
|
|
131
|
+
<div class="command spacer"></div>
|
|
132
|
+
<button class="command small warn">Comand</button>
|
|
133
|
+
</footer>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="tile inset">
|
|
136
|
+
<header>Inset Tile</header>
|
|
137
|
+
<article></article>
|
|
138
|
+
<footer>Footer</footer>
|
|
139
|
+
</div>
|
|
140
|
+
<div class="tile accent">
|
|
141
|
+
<header>Tile Accent</header>
|
|
142
|
+
<article></article>
|
|
143
|
+
<footer></footer>
|
|
144
|
+
</div>
|
|
145
|
+
<div class="tile">
|
|
146
|
+
<header>Header</header>
|
|
147
|
+
<article></article>
|
|
148
|
+
<footer>Footer</footer>
|
|
149
|
+
</div>
|
|
150
|
+
</article>
|
|
125
151
|
<footer></footer>
|
|
126
152
|
</div>
|
|
127
153
|
</article>
|
|
128
|
-
<footer
|
|
154
|
+
<footer
|
|
155
|
+
class="command-bar"
|
|
156
|
+
style="grid-template-columns: repeat(3, 1fr) auto"
|
|
157
|
+
>
|
|
158
|
+
<button class="command">Command</button>
|
|
159
|
+
<button class="command shade1">Second Command</button>
|
|
160
|
+
<button class="command shade2">Third Command</button>
|
|
161
|
+
Footer
|
|
162
|
+
</footer>
|
|
163
|
+
</div>
|
|
164
|
+
<div
|
|
165
|
+
class="command-bar"
|
|
166
|
+
style="
|
|
167
|
+
grid-area: c;
|
|
168
|
+
grid-template-columns: repeat(2, auto) 12rem auto 1fr auto 1fr auto;
|
|
169
|
+
"
|
|
170
|
+
>
|
|
171
|
+
<button class="command">Command</button>
|
|
172
|
+
<button class="shade1 command">Command</button>
|
|
173
|
+
<button class="shade2 command">Command and sth more looong</button>
|
|
174
|
+
<button class="accent command">Special Command</button>
|
|
175
|
+
<div class="command spacer"></div>
|
|
176
|
+
<button
|
|
177
|
+
class="warn command"
|
|
178
|
+
style="justify-items: center; align-items: center"
|
|
179
|
+
>
|
|
180
|
+
<div class="spinner2" style="font-size: 1.4rem"></div>
|
|
181
|
+
</button>
|
|
182
|
+
<div class="command spacer"></div>
|
|
183
|
+
Commands
|
|
129
184
|
</div>
|
|
130
185
|
</body>
|
|
131
186
|
</html>
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ada-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"scripts": {
|
|
5
|
-
"dev": "
|
|
5
|
+
"start:dev": "alive-server .",
|
|
6
|
+
"build:dev": "sass scss:css --watch",
|
|
6
7
|
"build": "rm -rf css && sass scss:css -s compressed --no-source-map"
|
|
7
8
|
},
|
|
8
9
|
"repository": {
|
|
@@ -14,6 +15,7 @@
|
|
|
14
15
|
"url": "https://github.com/tklepzig/Ada/issues"
|
|
15
16
|
},
|
|
16
17
|
"devDependencies": {
|
|
18
|
+
"alive-server": "^1.2.9",
|
|
17
19
|
"sass": "^1.42.1"
|
|
18
20
|
}
|
|
19
21
|
}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
--default: hsl(var(--h), var(--s), var(--l));
|
|
7
7
|
--default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);
|
|
8
8
|
--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);
|
|
9
|
+
--default-alpha60: hsla(var(--h), var(--s), var(--l), 0.6);
|
|
9
10
|
|
|
10
11
|
--light: hsl(var(--h), var(--s), var(--l-light));
|
|
11
12
|
--light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
%button {
|
|
2
|
+
overflow: hidden;
|
|
3
|
+
outline: none;
|
|
4
|
+
color: var(--fg);
|
|
5
|
+
font-family: inherit;
|
|
6
|
+
cursor: pointer;
|
|
7
|
+
user-select: none;
|
|
8
|
+
vertical-align: middle;
|
|
9
|
+
transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
|
|
10
|
+
|
|
11
|
+
&:disabled {
|
|
12
|
+
opacity: 0.4;
|
|
13
|
+
filter: saturate(0.6);
|
|
14
|
+
cursor: default;
|
|
15
|
+
color: var(--fg-alpha80);
|
|
16
|
+
pointer-events: none;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.button {
|
|
21
|
+
@extend %button;
|
|
22
|
+
white-space: nowrap;
|
|
23
|
+
text-overflow: ellipsis;
|
|
24
|
+
border-radius: 0.3rem;
|
|
25
|
+
box-shadow: $box-shadow;
|
|
26
|
+
border: 1px solid var(--light-alpha40);
|
|
27
|
+
background-color: transparent;
|
|
28
|
+
min-height: min-content;
|
|
29
|
+
min-width: 8rem;
|
|
30
|
+
padding: 0.8rem 1.6rem;
|
|
31
|
+
margin: 0.8rem;
|
|
32
|
+
font-size: 1.1rem;
|
|
33
|
+
|
|
34
|
+
&.small {
|
|
35
|
+
min-width: 0;
|
|
36
|
+
padding: 0.8rem;
|
|
37
|
+
}
|
|
38
|
+
&.fill {
|
|
39
|
+
background-color: var(--default);
|
|
40
|
+
}
|
|
41
|
+
&:focus {
|
|
42
|
+
border: 1px solid var(--light-alpha70);
|
|
43
|
+
}
|
|
44
|
+
&:hover {
|
|
45
|
+
// stays after click on touch devices
|
|
46
|
+
// TODO: only for non-touch devices
|
|
47
|
+
// /*background-color: var(--light-alpha40);*/
|
|
48
|
+
}
|
|
49
|
+
&:active {
|
|
50
|
+
background-color: var(--light-alpha70);
|
|
51
|
+
border: 1px solid var(--default-alpha40);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
.command-bar-v {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: grid;
|
|
4
|
+
grid-auto-flow: row;
|
|
5
|
+
gap: 0.5rem;
|
|
6
|
+
width: 12rem;
|
|
7
|
+
padding-top: 1.5rem;
|
|
8
|
+
padding-bottom: 1.5rem;
|
|
9
|
+
margin: 0.5rem;
|
|
10
|
+
|
|
11
|
+
&:before,
|
|
12
|
+
&:after {
|
|
13
|
+
box-shadow: $box-shadow;
|
|
14
|
+
position: absolute;
|
|
15
|
+
content: "";
|
|
16
|
+
height: 1rem;
|
|
17
|
+
left: 0;
|
|
18
|
+
right: 0;
|
|
19
|
+
background: var(--default-alpha60);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&:before {
|
|
23
|
+
border-radius: 0.3rem 0.3rem 0 0;
|
|
24
|
+
top: 0;
|
|
25
|
+
}
|
|
26
|
+
&:after {
|
|
27
|
+
border-radius: 0 0 0.3rem 0.3rem;
|
|
28
|
+
bottom: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
& > .command {
|
|
32
|
+
min-height: 3.6rem;
|
|
33
|
+
width: 12rem;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.command-bar {
|
|
38
|
+
position: relative;
|
|
39
|
+
@extend %h2, .m-0;
|
|
40
|
+
display: grid;
|
|
41
|
+
grid-auto-flow: column;
|
|
42
|
+
text-align: center;
|
|
43
|
+
gap: 0.5rem;
|
|
44
|
+
align-items: center;
|
|
45
|
+
line-height: 3.6rem;
|
|
46
|
+
height: 3.6rem;
|
|
47
|
+
padding-left: 1.5rem;
|
|
48
|
+
padding-right: 1.5rem;
|
|
49
|
+
margin: 0.5rem;
|
|
50
|
+
|
|
51
|
+
&:before,
|
|
52
|
+
&:after {
|
|
53
|
+
box-shadow: $box-shadow;
|
|
54
|
+
position: absolute;
|
|
55
|
+
content: "";
|
|
56
|
+
width: 1rem;
|
|
57
|
+
top: 0;
|
|
58
|
+
bottom: 0;
|
|
59
|
+
background: var(--default-alpha60);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&:before {
|
|
63
|
+
border-radius: 0.3rem 0 0 0.3rem;
|
|
64
|
+
left: 0;
|
|
65
|
+
}
|
|
66
|
+
&:after {
|
|
67
|
+
border-radius: 0 0.3rem 0.3rem 0;
|
|
68
|
+
right: 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
& > .command {
|
|
72
|
+
height: 3.6rem;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.command {
|
|
77
|
+
box-sizing: border-box;
|
|
78
|
+
background-color: var(--default-alpha60);
|
|
79
|
+
box-shadow: $box-shadow;
|
|
80
|
+
|
|
81
|
+
&:not(.spacer) {
|
|
82
|
+
@extend %button;
|
|
83
|
+
min-width: 8rem;
|
|
84
|
+
display: grid;
|
|
85
|
+
align-items: end;
|
|
86
|
+
justify-items: end;
|
|
87
|
+
text-align: end;
|
|
88
|
+
font-size: 1.1rem;
|
|
89
|
+
border-style: solid;
|
|
90
|
+
border-color: transparent;
|
|
91
|
+
border-width: 0 1px 0 0;
|
|
92
|
+
padding: 0.4rem;
|
|
93
|
+
|
|
94
|
+
&.small {
|
|
95
|
+
min-width: 0;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&:focus {
|
|
99
|
+
border-color: var(--light-alpha70);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&:active {
|
|
103
|
+
background-color: var(--light-alpha40);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
%corner {
|
|
2
|
+
content: "";
|
|
3
|
+
border-style: solid;
|
|
4
|
+
border-color: var(--default);
|
|
5
|
+
position: absolute;
|
|
6
|
+
height: 1rem;
|
|
7
|
+
width: 1rem;
|
|
8
|
+
z-index: 2;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
%corner-light {
|
|
12
|
+
@extend %corner;
|
|
13
|
+
border-color: var(--light-alpha40);
|
|
14
|
+
height: 0.75rem;
|
|
15
|
+
width: 0.75rem;
|
|
16
|
+
}
|
package/scss/_input.scss
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
.input {
|
|
2
|
+
border-radius: 0.3rem;
|
|
3
|
+
box-shadow: $box-shadow;
|
|
4
|
+
outline: none;
|
|
5
|
+
border: 1px solid var(--light-alpha40);
|
|
6
|
+
color: var(--fg);
|
|
7
|
+
font-family: inherit;
|
|
8
|
+
background-color: transparent;
|
|
9
|
+
transition: border-color 0.15s ease-in-out;
|
|
10
|
+
padding: 0.8rem 1.6rem;
|
|
11
|
+
margin: 0.8rem;
|
|
12
|
+
font-size: 1.1rem;
|
|
13
|
+
|
|
14
|
+
&:focus {
|
|
15
|
+
border: 1px solid var(--light-alpha70);
|
|
16
|
+
}
|
|
17
|
+
&:disabled {
|
|
18
|
+
opacity: 0.4;
|
|
19
|
+
filter: saturate(0.6);
|
|
20
|
+
cursor: default;
|
|
21
|
+
color: var(--fg-alpha80);
|
|
22
|
+
pointer-events: none;
|
|
23
|
+
}
|
|
24
|
+
}
|
package/scss/_panel.scss
ADDED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
@import "corner";
|
|
2
|
+
|
|
3
|
+
.panel {
|
|
4
|
+
background: var(--default-alpha10);
|
|
5
|
+
box-shadow: $box-shadow;
|
|
6
|
+
border-radius: 0.3rem;
|
|
7
|
+
display: grid;
|
|
8
|
+
grid-template-rows: auto 1fr auto;
|
|
9
|
+
overflow: auto;
|
|
10
|
+
margin: 0.5rem;
|
|
11
|
+
|
|
12
|
+
> header {
|
|
13
|
+
position: relative;
|
|
14
|
+
|
|
15
|
+
&:not(.command-bar) {
|
|
16
|
+
text-align: left;
|
|
17
|
+
@extend %h3, .m-0;
|
|
18
|
+
padding: 0.4rem 0.6rem;
|
|
19
|
+
|
|
20
|
+
&:before {
|
|
21
|
+
@extend %corner;
|
|
22
|
+
border-width: 2px 0 0 2px;
|
|
23
|
+
border-radius: 0.3rem 0 0 0;
|
|
24
|
+
left: 0;
|
|
25
|
+
top: 0;
|
|
26
|
+
}
|
|
27
|
+
&:after {
|
|
28
|
+
@extend %corner;
|
|
29
|
+
border-width: 2px 2px 0 0;
|
|
30
|
+
border-radius: 0 0.3rem 0 0;
|
|
31
|
+
right: 0;
|
|
32
|
+
top: 0;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&:empty {
|
|
37
|
+
padding: 0.2rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&.command-bar {
|
|
41
|
+
@extend .m-0;
|
|
42
|
+
margin-bottom: 1rem;
|
|
43
|
+
|
|
44
|
+
&:before {
|
|
45
|
+
border-radius: 0.3rem 0 0 0;
|
|
46
|
+
}
|
|
47
|
+
&:after {
|
|
48
|
+
border-radius: 0 0.3rem 0 0;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
> article {
|
|
54
|
+
z-index: 1;
|
|
55
|
+
padding: 0 0.6rem;
|
|
56
|
+
overflow: auto;
|
|
57
|
+
|
|
58
|
+
&::-webkit-scrollbar {
|
|
59
|
+
width: 2px;
|
|
60
|
+
background: transparent;
|
|
61
|
+
}
|
|
62
|
+
&::-webkit-scrollbar-thumb {
|
|
63
|
+
min-width: 1rem;
|
|
64
|
+
border-style: solid;
|
|
65
|
+
border-color: transparent;
|
|
66
|
+
border-width: 2px 2px 1px 2px;
|
|
67
|
+
background: var(--default);
|
|
68
|
+
box-sizing: border-box;
|
|
69
|
+
background-clip: padding-box;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
> footer {
|
|
73
|
+
position: relative;
|
|
74
|
+
|
|
75
|
+
&:not(.command-bar) {
|
|
76
|
+
color: var(--fg-alpha60);
|
|
77
|
+
padding: 0.4rem 0.6rem;
|
|
78
|
+
font-size: 0.75rem;
|
|
79
|
+
text-align: right;
|
|
80
|
+
|
|
81
|
+
&:before {
|
|
82
|
+
@extend %corner;
|
|
83
|
+
border-width: 0 0 2px 2px;
|
|
84
|
+
border-radius: 0 0 0 0.3rem;
|
|
85
|
+
left: 0;
|
|
86
|
+
bottom: 0;
|
|
87
|
+
}
|
|
88
|
+
&:after {
|
|
89
|
+
@extend %corner;
|
|
90
|
+
border-width: 0 2px 2px 0;
|
|
91
|
+
border-radius: 0 0 0.3rem 0;
|
|
92
|
+
right: 0;
|
|
93
|
+
bottom: 0;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&:empty {
|
|
98
|
+
padding: 0.2rem;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&.command-bar {
|
|
102
|
+
@extend %h4, .m-0;
|
|
103
|
+
margin-top: 1rem;
|
|
104
|
+
line-height: 2rem;
|
|
105
|
+
height: 2rem;
|
|
106
|
+
|
|
107
|
+
&:before {
|
|
108
|
+
border-radius: 0 0 0 0.3rem;
|
|
109
|
+
}
|
|
110
|
+
&:after {
|
|
111
|
+
border-radius: 0 0 0.3rem 0;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
& > .command {
|
|
115
|
+
height: 2rem;
|
|
116
|
+
font-size: 0.9rem;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|