@luizleon/sf.prefeiturasp.vuecomponents 0.0.1

package/src/style/src/components/_icon.scss

@@ -0,0 +1,120 @@
+@import "../variables";
+@import "../mixins";
+
+div.sf-icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  > button {
+    color: var(--text-color);
+    pointer-events: none;
+    background: none;
+    border: none;
+    padding: 0;
+    + span {
+      position: absolute;
+      border-radius: 50%;
+      width: 6px;
+      height: 6px;
+      top: 4px;
+      right: 4px;
+      @include dot-colors;
+    }
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  &:has(button:focus-visible) {
+    outline: 2px solid var(--surface-1300-color);
+    outline-offset: 0px;
+  }
+
+  .sf-loading-circle {
+    svg {
+      stroke: currentColor;
+    }
+  }
+
+  &.sf-icon-filled {
+    button {
+      font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0,
+        "opsz" 48;
+    }
+  }
+
+  &.sf-icon-small {
+    min-width: 28px;
+    > button {
+      font-size: 20px;
+    }
+    .sf-loading-circle {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &.sf-icon-medium {
+    min-width: 37px;
+    > button {
+      font-size: 24px;
+      + span {
+        width: 8px;
+        height: 8px;
+        top: 6px;
+        right: 6px;
+      }
+    }
+    .sf-loading-circle {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &.sf-icon-large {
+    min-width: 48px;
+    > button {
+      font-size: 36px;
+      + span {
+        width: 12px;
+        height: 12px;
+        top: 6px;
+        right: 6px;
+      }
+    }
+    .sf-loading-circle {
+      width: 28px;
+      height: 28px;
+    }
+  }
+
+  &.sf-icon-button {
+    border-radius: 50%;
+    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
+      0ms;
+    &.sf-icon-small {
+      padding: 4px;
+    }
+    &.sf-icon-medium {
+      padding: 6px;
+    }
+    &.sf-icon-large {
+      padding: 8px;
+    }
+    @media (pointer: fine) {
+      &:hover,
+      &:focus-visible {
+        cursor: pointer;
+        background-color: $icon-hover-color;
+      }
+    }
+  }
+
+  &.sf-component-loading,
+  &.sf-component-disabled {
+    > button + span {
+      display: none;
+    }
+  }
+}

package/src/style/src/components/_internal_icon_button.scss

@@ -0,0 +1,5 @@
+@import "../mixins";
+
+.sf-internal-icon-button {
+  @include sf-internal-icon-button;
+}

package/src/style/src/components/_layout.scss

@@ -0,0 +1,183 @@
+@import "../variables";
+@import "../functions";
+@import "../mixins";
+
+#sf-layout {
+  height: var(--window-height);
+  overflow: hidden;
+  position: relative;
+
+  header {
+    background-color: #001e49;
+    color: #fff !important;
+    height: var(--header-height);
+    border-bottom: 1px solid var(--surface-border-color);
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    transition: padding 0.3s linear;
+
+    .sf-icon {
+      color: #fff !important;
+    }
+
+    #sf-theme-toggle svg,
+    .sf-internal-icon-button svg,
+    .sf-svg-icon {
+      fill: #fff !important;
+    }
+
+    .sf-layout-menu-toggler {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+
+      svg {
+        transition: transform 0.2s linear;
+      }
+
+      &.invert {
+        svg {
+          transform: rotate(180deg);
+        }
+      }
+
+      .sf-layout-menu-toggler-logo {
+        height: 40px;
+        width: 36px;
+        background-image: url("https://sfpocstorageacc.z13.web.core.windows.net/logo-header.png");
+        background-position: center;
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+    }
+
+    @media screen and (max-width: 579px) {
+      padding: 0 8px;
+    }
+
+    > .title {
+      padding: 0 16px;
+      font-size: 1.25rem;
+      font-weight: bold;
+      flex-grow: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      > .name {
+        display: none;
+        @media screen and (min-width: $sm) {
+          display: unset;
+        }
+      }
+      > .shortname {
+        display: none;
+        @media screen and (max-width: $sm) {
+          display: unset;
+        }
+      }
+    }
+  }
+
+  main,
+  nav {
+    transition-duration: 0.2s;
+    transition-timing-function: ease;
+  }
+
+  main {
+    position: relative;
+    height: var(--main-height);
+    width: 100vw;
+    padding-left: 0;
+    transition-property: padding;
+
+    > section#sf-layout-page-title {
+      background-color: var(--surface-300-color);
+      border-bottom: 1px solid var(--surface-border-color);
+      color: var(--secondary-color);
+      font-size: 0.875rem;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 28px;
+      > span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding: 0 0.75rem;
+      }
+      + #sf-layout-content {
+        height: calc(100% - 28px);
+      }
+      &:empty {
+        height: 0;
+        display: none;
+        + #sf-layout-content {
+          height: 100%;
+        }
+      }
+    }
+
+    > section#sf-layout-content {
+      overflow: hidden;
+      height: 100%;
+    }
+
+    &.menu-visible {
+      padding-left: 290px;
+
+      @media screen and (max-width: $sm) {
+        padding-left: 0;
+      }
+    }
+  }
+
+  nav {
+    z-index: 5;
+    position: absolute;
+    top: 0;
+    height: var(--window-height);
+    background-color: var(--surface-100-color);
+    width: 100vw;
+    border-right: 1px solid var(--surface-border-color);
+    transform: translateX(-100vw);
+    transition-property: transform;
+    display: flex;
+    flex-direction: column;
+
+    &.visible {
+      transition-duration: 0.2s;
+      transform: translateX(0);
+    }
+
+    > .sf-layout-nav-header {
+      height: var(--header-height);
+      border-bottom: 1px solid var(--surface-border-color);
+      background-color: var(--surface-100-color);
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      > span {
+        flex-grow: 1;
+      }
+    }
+
+    > .sf-layout-nav-content {
+      height: 100%;
+      overflow: auto;
+      border-bottom: 1px solid var(--surface-border-color);
+    }
+
+    @media screen and (min-width: #{$sm + 1}) {
+      top: unset;
+      height: calc(100vh - var(--header-height));
+      width: 290px;
+      transform: translateX(-290px);
+      > .sf-layout-nav-header {
+        display: none;
+      }
+    }
+  }
+}

package/src/style/src/components/_loading-circle.scss

@@ -0,0 +1,24 @@
+@import "../mixins";
+
+div.sf-loading-circle {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  > div {
+    position: relative;
+    > svg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      stroke: var(--text-color);
+      animation: spin 2s linear infinite;
+      > circle {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+        animation: sf-loading-circle-circle-dash 1.5s ease-in-out
+          infinite;
+        stroke-linecap: square;
+      }
+    }
+  }
+}

package/src/style/src/components/_mark.scss

@@ -0,0 +1,9 @@
+.sf-mark {
+  padding: 0;
+  margin: 0;
+  display: inline;
+  mark {
+    background-color: var(--amber-color);
+    color: #000;
+  }
+}

package/src/style/src/components/_mask.scss

@@ -0,0 +1,33 @@
+.sf-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  pointer-events: none;
+}
+
+.sf-mask-overlay-enter {
+  pointer-events: auto;
+  animation: sf-mask-overlay-enter-animation 250ms forwards;
+}
+.sf-mask-overlay-leave {
+  animation: sf-mask-overlay-leave-animation 250ms forwards;
+}
+@keyframes sf-mask-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg-color);
+  }
+}
+@keyframes sf-mask-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg-color);
+  }
+  to {
+    background-color: transparent;
+  }
+}

package/src/style/src/components/_navmenulink.scss

@@ -0,0 +1,31 @@
+.sf-navmenulink {
+  height: 40px;
+  text-decoration: none !important;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 0.75rem;
+  border-radius: 4px;
+  margin: 0.5rem;
+  color: var(--text-color);
+  > span.sf-navmenulink-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.5;
+  }
+  &[data-active="true"] {
+    background-color: var(--surface-400-color);
+    pointer-events: none;
+    color: var(--primary-color);
+    > .sf-icon > button:first-child {
+      color: var(--primary-color);
+    }
+  }
+  &:hover {
+    background-color: var(--surface-300-color);
+  }
+  &:active {
+    background-color: var(--surface-400-color);
+  }
+}

package/src/style/src/components/_numpad.scss

@@ -0,0 +1,58 @@
+.numpad-wrapper {
+  max-width: 280px;
+  max-height: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  margin: 0 auto;
+  padding: 16px;
+  > div.sf-numpad-valor {
+    padding: 0.75rem 0.5rem;
+    margin-bottom: 0.5rem;
+    text-align: right;
+    background-color: var(--surface-300-color);
+    border-radius: 4px;
+    border: 1px solid var(--surface-border-color);
+    &:empty::before {
+      content: " ";
+      display: inline-block;
+    }
+  }
+  > div.teclas {
+    border: 1px solid var(--surface-900-color);
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    max-height: 360px;
+    > div.row {
+      flex-grow: 1;
+      display: flex;
+      border-bottom: 1px solid var(--surface-900-color);
+      &:last-child {
+        border-bottom: none;
+      }
+      > div.tecla {
+        display: flex;
+        flex-grow: 1;
+        justify-content: center;
+        align-items: center;
+        font-size: 1.5em;
+        border-left: 1px solid var(--surface-900-color);
+        cursor: pointer;
+        &:first-child {
+          border-left: none;
+        }
+        &:active,
+        &.active {
+          background-color: var(--secondary-hover-color);
+        }
+        > * {
+          min-width: 48px;
+          text-align: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}

package/src/style/src/components/_progress-circular.scss

@@ -0,0 +1,52 @@
+.sf-progress-circular {
+  display: inline-block;
+
+  &.sf-progress-indeterminate {
+    animation: sf-progress-circular-keyframes-circular-rotate 1.4s
+      linear infinite;
+  }
+
+  &.sf-progress-static {
+    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  }
+
+  &.sf-progress-sm {
+    height: 24px;
+    width: 24px;
+  }
+
+  &.sf-progress-md {
+    height: 40px;
+    width: 40px;
+  }
+
+  &.sf-progress-lg {
+    height: 56px;
+    width: 56px;
+  }
+}
+
+.sf-progress-circular-svg {
+  display: block;
+  transform: rotate(-90deg);
+}
+
+.sf-progress-circular-circle {
+  stroke: currentColor;
+
+  &.sf-progress-indeterminate {
+    animation: sf-progress-circular-keyframes-circular-dash 1.4s
+      ease-in-out infinite;
+    stroke-dasharray: 80px, 200px;
+    stroke-dashoffset: 0px;
+  }
+
+  &.sf-progress-static {
+    transition: stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1)
+      0ms;
+  }
+}
+
+.sf-progress-circular-disable-shrink {
+  animation: none;
+}

package/src/style/src/components/_scrollToTop.scss

@@ -0,0 +1,28 @@
+button.sf-scrollToTop {
+  position: fixed;
+  z-index: 100;
+  bottom: 10px;
+  right: 26px;
+  opacity: 0;
+  transform: translateY(100px);
+  transition: all 0.5s ease;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  background-color: var(--text-color);
+  cursor: pointer;
+  outline: none;
+  border: none;
+  &.sf-scrollToTop-visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 30%;
+    transform: translateY(20%) rotate(-45deg);
+    border-top: 5px solid var(--bg-color);
+    border-right: 5px solid var(--bg-color);
+  }
+}

package/src/style/src/components/_select.scss

@@ -0,0 +1,60 @@
+.sf-select-panel {
+  padding: 0.5rem 0;
+  .sf-select-option {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    .sf-select-option-label {
+      padding-left: 1rem;
+    }
+    .sf-select-option-icon::before {
+      content: "\e836";
+    }
+    &.sf-select-option-selected {
+      pointer-events: none;
+      color: var(--primary-color);
+      background-color: var(--primary-hover-color);
+      .sf-select-option-icon::before {
+        content: "\e837";
+      }
+    }
+    &:hover {
+      cursor: pointer;
+      &:not(.sf-select-option-selected) {
+        background-color: var(--secondary-hover-color);
+      }
+    }
+  }
+  &.sf-select-multiple {
+    .sf-select-option {
+      .sf-select-option-icon::before {
+        content: "\e835";
+      }
+      &.sf-select-option-selected {
+        pointer-events: auto;
+        .sf-select-option-icon::before {
+          content: "\e834";
+        }
+      }
+    }
+  }
+}
+.sf-select-search {
+  padding: 0.5rem 1rem;
+  position: sticky;
+  top: 0;
+  background-color: var(--bg-color);
+  border-bottom: 1px solid var(--surface-border-color);
+  display: flex;
+  align-items: center;
+  .sf-select-toggle-all {
+    margin-right: 1rem;
+    height: 22px;
+  }
+  .sf-select-search-input {
+    flex-grow: 1;
+  }
+  &:empty {
+    display: none;
+  }
+}

package/src/style/src/components/_svg_icon.scss

@@ -0,0 +1,5 @@
+svg.sf-svg-icon {
+  height: 24px;
+  width: 24px;
+  fill: var(--text-color);
+}