@stellar-expert/ui-framework 1.9.0

package/basic-styles/grid.scss

@@ -0,0 +1,388 @@
+.relative {
+  position: relative;
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 140rem;
+  padding: 0 $container-padding;
+  position: relative;
+  width: 100%;
+  @media (max-width: $responsive-mobile-browser-width) {
+    padding: 0 $container-padding/2;
+  }
+
+  &.narrow {
+    max-width: 100rem;
+  }
+
+  &.frame {
+    max-width: 50rem;
+  }
+
+  & > .container {
+    padding: 0;
+  }
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-left: -$space-micro;
+  width: calc(100% + #{$space-standard});
+
+  &.row-no-padding {
+    padding: 0;
+
+    & > .column {
+      padding: 0;
+    }
+  }
+
+  &.row-wrap {
+    flex-wrap: wrap;
+  }
+
+  &.row-top {
+    align-items: flex-start;
+  }
+
+  &.row-bottom {
+    align-items: flex-end;
+  }
+
+  &.row-center {
+    align-items: center;
+  }
+
+  &.row-stretch {
+    align-items: stretch;
+  }
+
+  &.row-baseline {
+    align-items: baseline;
+  }
+
+  @media (max-width: $responsive-mobile-browser-width) {
+    flex-direction: column;
+    padding: 0;
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .column {
+    display: block;
+    flex: 1 1 auto;
+    margin-left: 0;
+    max-width: 100%;
+    width: 100%;
+    margin-bottom: inherit;
+    padding: 0 $space-micro;
+
+    &.v-top {
+      align-self: flex-start;
+    }
+
+    &.v-bottom {
+      align-self: flex-end;
+    }
+
+    &.v-center {
+      align-self: center;
+    }
+
+    &.column-offset-10 {
+      margin-left: 10%;
+    }
+
+    &.column-offset-20 {
+      margin-left: 20%;
+    }
+
+    &.column-offset-25 {
+      margin-left: 25%;
+    }
+
+    &.column-offset-33,
+    &.column-offset-34 {
+      margin-left: 33.3333%;
+    }
+
+    &.column-offset-50 {
+      margin-left: 50%;
+    }
+
+    &.column-offset-66,
+    &.column-offset-67 {
+      margin-left: 66.6666%;
+    }
+
+    &.column-offset-75 {
+      margin-left: 75%;
+    }
+
+    &.column-offset-80 {
+      margin-left: 80%;
+    }
+
+    &.column-offset-90 {
+      margin-left: 90%;
+    }
+
+    &.column-10 {
+      flex: 0 0 10%;
+      max-width: 10%;
+    }
+
+    &.column-20 {
+      flex: 0 0 20%;
+      max-width: 20%;
+    }
+
+    &.column-25 {
+      flex: 0 0 25%;
+      max-width: 25%;
+    }
+
+    &.column-33,
+    &.column-34 {
+      flex: 0 0 33.3333%;
+      max-width: 33.3333%;
+    }
+
+    &.column-40 {
+      flex: 0 0 40%;
+      max-width: 40%;
+    }
+
+    &.column-50 {
+      flex: 0 0 50%;
+      max-width: 50%;
+    }
+
+    &.column-60 {
+      flex: 0 0 60%;
+      max-width: 60%;
+    }
+
+    &.column-66,
+    &.column-67 {
+      flex: 0 0 66.6666%;
+      max-width: 66.6666%;
+    }
+
+    &.column-75 {
+      flex: 0 0 75%;
+      max-width: 75%;
+    }
+
+    &.column-80 {
+      flex: 0 0 80%;
+      max-width: 80%;
+    }
+
+    &.column-90 {
+      flex: 0 0 90%;
+      max-width: 90%;
+    }
+
+    &.column-top {
+      align-self: flex-start;
+    }
+
+    &.column-bottom {
+      align-self: flex-end;
+    }
+
+    &.column-center {
+      align-self: center;
+    }
+
+    @media (max-width: $responsive-mobile-browser-width) {
+      margin: 0 !important;
+      padding: 0;
+      flex: 0 0 100% !important;
+      max-width: 100% !important;
+    }
+  }
+}
+
+.dual-layout {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  &.vertical {
+    flex-direction: column;
+  }
+
+  > * {
+    display: block;
+  }
+}
+
+.v-center-block {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.block {
+  display: block;
+}
+
+.inline {
+  display: inline;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline-overflow {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.flex-row {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.flex-column {
+  display: flex !important;
+  flex-direction: column;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.segment {
+  padding: 2rem 3rem;
+  position: relative;
+  z-index: 0;
+
+  &:before, &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    background: var(--color-alt-bg);
+    clip-path: polygon(1.2rem 0, 100% 0, 100% calc(100% - 3.2rem), calc(100% - 1.2rem) 100%, 0 100%, 0 3.2rem);
+  }
+
+  &:after {
+    right: -0.6px;
+    bottom: -0.6px;
+    top: -0.6px;
+    left: -0.6px;
+    z-index: -2;
+    background: var(--color-alt-border);
+  }
+
+  &.blank:before {
+    background: var(--color-bg);
+  }
+
+  & > h3 {
+    margin-top: -0.2em;
+  }
+
+  &.segment-inline {
+    &:before, &:after {
+      clip-path: polygon(0.6rem 0, 100% 0, 100% calc(100% - 1.6rem), calc(100% - 0.6rem) 100%, 0 100%, 0 1.6rem);
+    }
+  }
+
+  &.success {
+    background: none;
+
+    &:before {
+      background: var(--color-success-bg);
+    }
+    &:after {
+      background: var(--color-success);
+      opacity: 0.7;
+    }
+  }
+
+  &.warning {
+    background: none;
+
+    &:before {
+      background: var(--color-warning-bg);
+    }
+    &:after {
+      background: var(--color-warning);
+      opacity: 0.7;
+    }
+  }
+
+
+  &.error {
+    background: none;
+
+    &:before {
+      background: var(--color-alert-bg);
+    }
+    &:after {
+      background: var(--color-alert);
+      opacity: 0.7;
+    }
+  }
+}
+
+.column > .segment {
+  height: 100%;
+}
+
+.card {
+  background: var(--color-bg);
+  padding: 0.3*$space-micro $space-standard $space-standard;
+  height: 100%;
+  position: relative;
+  box-shadow: 0 2px 4px -2px var(--color-backdrop);
+
+  &:before {
+    content: "";
+    display: block;
+    top: 1em;
+    left: 0;
+    position: absolute;
+    z-index: 1;
+    height: 1.3em;
+    width: 0;
+    border-right: 0.1em solid var(--color-highlight);
+  }
+
+  &.card-blank {
+    padding-top: $space-standard;
+
+    &:before {
+      content: none;
+    }
+  }
+
+  &.tabs .tabs-header {
+    margin-top: 0;
+  }
+
+  hr {
+    margin-left: -$space-standard;
+    margin-right: -$space-standard;
+  }
+
+  @media (max-width: $responsive-mobile-browser-width) {
+    margin-bottom: $space-standard;
+    margin-left: -$space-micro;
+    margin-right: -$space-micro;
+  }
+}

package/basic-styles/link.scss

@@ -0,0 +1,17 @@
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-highlight);
+  }
+
+  &.disabled {
+    cursor: default;
+
+    &:hover {
+      color: var(--color-primary);
+    }
+  }
+}

package/basic-styles/lists.scss

@@ -0,0 +1,68 @@
+ul {
+  list-style-type: none;
+  padding: 0;
+  margin: $space-micro 0;
+
+  &.list {
+    list-style-type: disc;
+    padding-left: 1em;
+
+    &.checked {
+      list-style-type: none;
+      text-align: left;
+
+      & > li:before {
+        content: '✓';
+        display: inline-block;
+        width: 1em;
+        margin-left: -1em;
+        user-select: none;
+      }
+    }
+  }
+
+  &.striped > li:nth-child(2n+1) {
+    background: var(--color-border-shadow);
+  }
+}
+
+ol {
+  color: var(--color-dimmed);
+}
+
+ol > li > * {
+  color: var(--color-text);
+}
+
+dl {
+  display: block;
+  margin: 0;
+  line-height: 1.12*$font-line-height-base;
+  letter-spacing: -.03em;
+
+  & > div {
+    padding-top: $space-micro;
+  }
+
+  dt {
+    color: var(--color-dimmed);
+    font-weight: normal;
+    display: inline;
+  }
+
+  dd {
+    padding-left: .3em;
+    margin-left: 0;
+    font-weight: normal;
+    display: inline;
+
+    &:after {
+      content: '';
+      display: block;
+    }
+
+    &:last-child:after {
+      content: none;
+    }
+  }
+}

package/basic-styles/loader.scss

@@ -0,0 +1,22 @@
+.loader {
+  &.micro {
+    font-size: 13px;
+  }
+
+  &.cover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.85);
+    z-index: 9999;
+  }
+
+  &.inline {
+    margin: 0;
+    margin-top: 0.5em;
+    display: inline-block;
+    vertical-align: bottom;
+  }
+}

package/basic-styles/responsive.scss

@@ -0,0 +1,29 @@
+@media (max-width: $responsive-mobile-browser-width) {
+  .desktop-only {
+    display: none !important;
+  }
+  .mobile-left {
+    text-align: left !important;
+  }
+  .mobile-center {
+    text-align: center !important;
+  }
+  .mobile-right {
+    text-align: right !important;
+  }
+}
+
+@media (min-width: $responsive-mobile-browser-width) {
+  .mobile-only {
+    display: none !important;
+  }
+  .desktop-left {
+    text-align: left !important;
+  }
+  .desktop-center {
+    text-align: center !important;
+  }
+  .desktop-right {
+    text-align: right !important;
+  }
+}

package/basic-styles/scrollbars.scss

@@ -0,0 +1,19 @@
+@mixin scrollbars($size, $foreground-color, $background-color) {
+  &::-webkit-scrollbar {
+    width: $size;
+    height: $size;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $foreground-color;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $background-color;
+  }
+
+  & {
+    scrollbar-face-color: $foreground-color;
+    scrollbar-track-color: $background-color;
+  }
+}

package/basic-styles/spacing.scss

@@ -0,0 +1,50 @@
+input:not([type=checkbox]),
+select,
+textarea {
+  margin-bottom: $space-micro;
+}
+
+ol,
+p,
+blockquote,
+pre,
+table {
+  margin-bottom: $space-micro;
+}
+
+.space {
+  margin-top: $space-standard;
+}
+
+.micro-space {
+  margin-top: $space-micro;
+}
+
+.nano-space {
+  margin-top: $space-nano;
+}
+
+.double-space {
+  margin-top: $space-double;
+}
+
+.block-indent, .block-indent-screen {
+  padding-left: $space-standard;
+}
+
+@media (max-width: $responsive-mobile-browser-width) {
+  .block-indent-screen {
+    padding-left: 0;
+  }
+}
+
+blockquote {
+  border-left: 3px solid var(--color-contrast-border);
+  margin-left: -$space-micro;
+  padding-left: $space-micro;
+  font-style: italic;
+}
+
+img {
+  max-width: 100%;
+}

package/basic-styles/table.scss

@@ -0,0 +1,104 @@
+.table {
+  border-collapse: collapse;
+  border-radius: $border-radius-input;
+  width: 100%;
+
+  th {
+    font-weight: bold;
+    font-family: $font-face-header;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  thead,
+  tr:nth-child(2n) {
+    background-color: var(--color-border-shadow);
+    transition: background-color 0.1s;
+  }
+
+  thead {
+    border-bottom: 1px solid var(--color-contrast-border);
+  }
+
+  td, th {
+    padding: .5em .7em;
+    border: none;
+
+    &.collapsing {
+      width: 1px;
+    }
+  }
+
+  td {
+    border-bottom: 1px solid var(--color-contrast-border);
+    vertical-align: middle;
+  }
+
+  &.active tbody > tr:hover {
+    cursor: pointer;
+    background-color: var(--color-alt-bg);
+  }
+
+  &.compact {
+    td, th {
+      padding: .4em .5em;
+    }
+  }
+
+  &.clear {
+    tr {
+      background-color: transparent;
+    }
+
+    td, th {
+      padding: .1em .2em;
+      border: none;
+    }
+  }
+
+  @media (max-width: $responsive-mobile-browser-width) {
+    display: block;
+    margin: auto $container-padding/2*-1;
+    width: calc(100% + #{$container-padding});
+
+    thead, th {
+      display: none;
+    }
+
+    tbody, td {
+      display: block;
+      width: 100% !important;
+      box-sizing: border-box;
+    }
+
+    tr {
+      display: block;
+    }
+
+    td {
+      text-align: left !important;
+      border: none;
+      padding: 0.1em $space-micro !important;
+
+      &:before {
+        content: attr(data-header);
+        color: var(--color-dimmed);
+      }
+
+      &:first-child {
+        border-top: 1px solid var(--color-contrast-border);
+        padding-top: $container-padding !important;
+      }
+
+      &:last-child {
+        padding-bottom: $container-padding !important;
+      }
+    }
+
+    &.clear {
+      td {
+        padding: .1em $space-micro !important;
+      }
+    }
+  }
+}