ada-ui 3.0.3 → 4.1.0

package/scss/ada.scss

@@ -1,4 +1,5 @@
 $font-family: "Open Sans", sans-serif !default;
+$box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
 
 @mixin desktop() {
   @media screen and (min-width: 1200px) {
@@ -31,56 +32,6 @@ body {
   color: var(--fg);
 }
 
-%h1 {
-  @extend %header;
-  font-size: 3rem;
-  margin: 1rem 0 2rem 0;
-}
-
-%h2 {
-  @extend %header;
-  font-size: 2rem;
-  margin: 1rem 0 1.5rem 0;
-}
-
-%h3 {
-  @extend %header;
-  font-size: 1.5rem;
-  margin: 0.5rem 0 1.5rem 0;
-}
-
-%h4 {
-  @extend %header;
-  font-weight: 400;
-  font-size: 1.2rem;
-  margin: 0.5rem 0 0.5rem 0;
-}
-
-%header {
-  font-weight: 300;
-  text-shadow: 0 0 4px var(--light-alpha40);
-  color: var(--fg);
-  &.m-0 {
-    margin: 0;
-  }
-}
-
-h1 {
-  @extend %h1;
-}
-
-h2 {
-  @extend %h2;
-}
-
-h3 {
-  @extend %h3;
-}
-
-h4 {
-  @extend %h4;
-}
-
 body {
   font-size: 1rem;
   -webkit-tap-highlight-color: transparent;
@@ -88,313 +39,10 @@ body {
   padding: 0.5rem;
 }
 
-%corner {
-  content: "";
-  border-style: solid;
-  border-color: var(--default);
-  position: absolute;
-  height: 1rem;
-  width: 1rem;
-  z-index: 2;
-}
-
-%corner-light {
-  @extend %corner;
-  border-color: var(--light-alpha40);
-  height: 0.75rem;
-  width: 0.75rem;
-}
-
-.button-group {
-  margin: 0.8rem;
-}
-
-.button {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  border-radius: 0.3rem;
-  box-shadow: 0 0 10px 0px rgba(0, 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 0.15s ease-in-out, background-color 0.15s ease-in-out;
-  min-height: min-content;
-  min-width: 8rem;
-  padding: 0.8rem 1.6rem;
-  margin: 0.8rem;
-  font-size: 1.1rem;
-  &.small {
-    display: grid;
-    justify-items: center;
-    align-items: center;
-    min-width: 0;
-    padding: 0.8rem;
-  }
-  &.icon {
-    @extend .button, .small;
-    border: 1px solid transparent;
-    box-shadow: none;
-    background: none;
-    > i.material-icons {
-      font-size: 20px;
-    }
-    .button-group > & {
-      margin: 1px;
-    }
-  }
-  &.fill {
-    background-color: var(--default);
-  }
-  &:focus {
-    border: 1px solid var(--light-alpha70);
-  }
-  &:hover {
-    // stays after click on touch devices
-    // TODO: only for non-touch devices
-    // /*background-color: var(--light-alpha40);*/
-  }
-  &:active {
-    background-color: var(--light-alpha70);
-    border: 1px solid var(--default-alpha40);
-  }
-  &:disabled {
-    opacity: 0.4;
-    filter: saturate(0.6);
-    cursor: default;
-    color: var(--fg-alpha80);
-    pointer-events: none;
-  }
-}
-
-.input {
-  border-radius: 0.3rem;
-  box-shadow: 0 0 10px 0px rgba(0, 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 0.15s ease-in-out;
-  padding: 0.8rem 1.6rem;
-  margin: 0.8rem;
-  font-size: 1.1rem;
-
-  &:focus {
-    border: 1px solid var(--light-alpha70);
-  }
-  &:disabled {
-    opacity: 0.4;
-    filter: saturate(0.6);
-    cursor: default;
-    color: var(--fg-alpha80);
-    pointer-events: none;
-  }
-}
-
-.panel {
-  background: var(--default-alpha10);
-  box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.4);
-  border-radius: 0.3rem;
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  overflow: auto;
-  margin: 0.5rem;
-  > header {
-    position: relative;
-    text-align: left;
-    @extend %h3, .m-0;
-    padding: 0.4rem 0.6rem;
-    &:before {
-      @extend %corner;
-      border-width: 2px 0 0 2px;
-      border-radius: 0.3rem 0 0 0;
-      left: 0;
-      top: 0;
-    }
-    &:after {
-      @extend %corner;
-      border-width: 2px 2px 0 0;
-      border-radius: 0 0.3rem 0 0;
-      right: 0;
-      top: 0;
-    }
-    &:empty {
-      padding: 0.2rem;
-    }
-  }
-
-  > article {
-    z-index: 1;
-    padding: 0 0.6rem;
-    overflow: auto;
-
-    &::-webkit-scrollbar {
-      width: 2px;
-      background: transparent;
-    }
-    &::-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;
-    }
-  }
-  > footer {
-    position: relative;
-    text-align: right;
-    padding: 0.4rem 0.6rem;
-    font-size: 0.75rem;
-    color: var(--fg-alpha60);
-    &:before {
-      @extend %corner;
-      border-width: 0 0 2px 2px;
-      border-radius: 0 0 0 0.3rem;
-      left: 0;
-      bottom: 0;
-    }
-    &:after {
-      @extend %corner;
-      border-width: 0 2px 2px 0;
-      border-radius: 0 0 0.3rem 0;
-      right: 0;
-      bottom: 0;
-    }
-    &:empty {
-      padding: 0.2rem;
-    }
-  }
-}
-
-.tile {
-  @extend .panel;
-  margin: 0.8rem;
-
-  > header {
-    &:before {
-      @extend %corner-light;
-      border-width: 1px 0 0 1px;
-    }
-    &:after {
-      @extend %corner-light;
-      border-width: 1px 1px 0 0;
-    }
-  }
-
-  > article {
-    color: var(--fg);
-    text-shadow: 0 0 4px var(--light-alpha40);
-  }
-
-  > footer {
-    &:before {
-      @extend %corner-light;
-      border-width: 0 0 1px 1px;
-    }
-    &:after {
-      @extend %corner-light;
-      border-width: 0 1px 1px 0;
-    }
-  }
-
-  &.inset {
-    box-shadow: inset 0 0 20px 1px rgba(0, 0, 0, 0.4);
-
-    > header {
-      color: var(--fg-alpha80);
-      &:before,
-      &:after {
-        opacity: 0.6;
-      }
-    }
-
-    > article {
-      color: var(--fg-alpha80);
-    }
-
-    footer {
-      &:before,
-      &:after {
-        opacity: 0.6;
-      }
-    }
-  }
-}
-
-.spinner {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  position: relative;
-  border-style: solid;
-  border-width: 0.3em;
-  border-radius: 50%;
-  border-color: transparent var(--default);
-  animation: 4s rotateOuter linear infinite;
-  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4) inset;
-
-  &:before {
-    content: "";
-    position: absolute;
-    top: 0.2em;
-    left: 0.2em;
-    right: 0.2em;
-    bottom: 0.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, 0.6) inset;
-  }
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0.7em;
-    left: 0.7em;
-    right: 0.7em;
-    bottom: 0.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);
-  }
-}
+@import "typography";
+@import "panel";
+@import "tile";
+@import "button";
+@import "command";
+@import "input";
+@import "spinner";

package/manifest.json

@@ -1,9 +0,0 @@
-{
-  "name": "Ada",
-  "short_name": "Ada",
-  "start_url": "/",
-  "display": "standalone",
-  "orientation": "any",
-  "theme_color": "#07131d",
-  "background_color": "#07131d"
-}