@luizleon/sf.prefeiturasp.vuecomponents 0.0.21 → 0.0.23

package/src/style/src/components/_button.scss

@@ -0,0 +1,107 @@
+@use "../mixins";
+
+.sf-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  font-weight: 400;
+  transition: opacity 0.2s ease-in-out;
+  &:hover {
+    cursor: pointer;
+  }
+
+  .sf-button-label {
+    white-space: nowrap;
+  }
+
+  .sf-icon {
+    position: absolute;
+    > button {
+      color: currentColor !important;
+    }
+  }
+
+  &.sf-component-loading {
+    color: var(--disabled-color) !important;
+    border-color: var(--disabled-color) !important;
+    .sf-button-label {
+      color: transparent !important;
+    }
+  }
+
+  &.sf-button-filled:disabled {
+    background-color: hsla(
+      var(--disabled-color-h),
+      var(--disabled-color-s),
+      var(--disabled-color-l),
+      0.5
+    ) !important;
+  }
+
+  &.sf-button-small {
+    height: 32px;
+    font-size: 0.875rem;
+    padding: 0 12px;
+    &.sf-button-with-icon {
+      padding-left: 28px;
+    }
+    .sf-icon {
+      inset: 0 0 0 6px;
+      &.sf-component-loading {
+        inset: 0 0 0 50%;
+        margin-left: -8px;
+      }
+    }
+    .sf-button-label {
+      line-height: 32px;
+    }
+  }
+
+  &.sf-button-medium {
+    height: 36px;
+    font-size: 1rem;
+    padding: 0 12px;
+    &.sf-button-with-icon {
+      padding-left: 38px;
+    }
+    .sf-icon {
+      inset: 0 0 0 8px;
+      &.sf-component-loading {
+        inset: 0 0 0 50%;
+        margin-left: -12px;
+      }
+    }
+    .sf-button-label {
+      line-height: 36px;
+    }
+  }
+
+  &.sf-button-large {
+    height: 48px;
+    font-size: 1.25rem;
+    padding: 0 16px;
+    &.sf-button-with-icon {
+      padding-left: 54px;
+    }
+    .sf-icon {
+      inset: 0 0 0 10px;
+      &.sf-component-loading {
+        inset: 0 0 0 50%;
+        margin-left: -18px;
+      }
+    }
+    .sf-button-label {
+      line-height: 48px;
+    }
+  }
+
+  @include button-colors;
+}
+
+html.dark {
+  .sf-button {
+    @include button-colors(true);
+  }
+}

package/src/style/src/components/_content.scss

@@ -0,0 +1,57 @@
+@import "../mixins";
+
+.sf-content {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  > .sf-content-body {
+    height: calc(100% - 25%);
+    overflow: auto;
+    scroll-behavior: smooth;
+    padding: 1rem;
+    &.sf-content-no-padding {
+      padding: 0;
+    }
+  }
+  > .sf-content-header {
+    top: 0;
+    border-bottom: 1px solid var(--surface-900-color);
+  }
+  > .sf-content-footer {
+    bottom: 0;
+    border-top: 1px solid var(--surface-900-color);
+  }
+  > .sf-content-header,
+  > .sf-content-footer {
+    width: 100%;
+    padding: 0 1rem;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    &:empty {
+      display: none;
+      height: 0;
+    }
+    &.sf-content-no-padding {
+      padding: 0;
+      gap: 0;
+    }
+  }
+  > .sf-content-header {
+    background-color: var(--bg-color);
+  }
+  > .sf-content-footer {
+    background-color: var(--surface-300-color);
+  }
+  &:has(.sf-content-header:empty) > .sf-content-body {
+    height: calc(100% - 60px);
+  }
+  &:has(.sf-content-footer:empty) > .sf-content-body {
+    height: calc(100% - 60px);
+  }
+  &:has(.sf-content-header:empty):has(.sf-content-footer:empty)
+    > .sf-content-body {
+    height: 100%;
+  }
+}

package/src/style/src/components/_drawer.scss

@@ -0,0 +1,99 @@
+.sf-drawer {
+  pointer-events: auto;
+  height: var(--window-height);
+  background: var(--bg-color);
+  border-right: 1px solid var(--surface-border-color);
+  width: 360px;
+  transform: translate3d(0px, 0px, 0px);
+  opacity: 1;
+  transition: all 0.2s linear;
+  @media screen and (min-width: #{$xl}) {
+    width: 480px;
+  }
+  @media screen and (max-width: #{$sm}) {
+    width: 100%;
+    border: none;
+  }
+  .sf-drawer-header,
+  .sf-drawer-footer {
+    border-color: var(--surface-border-color);
+    height: 60px;
+  }
+  .sf-drawer-header {
+    padding: 0 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--surface-border-color);
+    .sf-drawer-title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .sf-drawer-content {
+    overflow: auto;
+    height: 100%;
+  }
+  .sf-drawer-footer {
+    border-top: 1px solid var(--surface-border-color);
+  }
+  &.sf-drawer-with-title .sf-drawer-content {
+    height: calc(100% - 60px);
+  }
+  &.sf-drawer-with-footer .sf-drawer-content {
+    height: calc(100% - 60px);
+  }
+  &.sf-drawer-with-title.sf-drawer-with-footer .sf-drawer-content {
+    height: calc(100% - 120px);
+  }
+}
+.sf-drawer-enter-active {
+  transition: all 0.2 linear;
+}
+.sf-drawer-leave-active {
+  transition: all 0.2 linear;
+}
+.sf-drawer-enter-from,
+.sf-drawer-leave-to {
+  transform: translate3d(-100%, 0px, 0px);
+}
+.sf-mask.right {
+  justify-content: flex-end;
+  .sf-drawer {
+    border-left: 1px solid var(--surface-border-color);
+    border-right: unset;
+  }
+  .sf-drawer-enter-from,
+  .sf-drawer-leave-to {
+    transform: translate3d(100%, 0px, 0px);
+  }
+}
+.sf-mask.bottom,
+.sf-mask.full {
+  justify-content: flex-end;
+  .sf-drawer {
+    border-left: unset;
+    border-top: 1px solid var(--surface-border-color);
+    width: 100%;
+    height: 420px;
+    align-self: end;
+  }
+  .sf-drawer-enter-from,
+  .sf-drawer-leave-to {
+    transform: translate3d(0px, var(--window-height), 0px);
+  }
+}
+
+.sf-mask.bottom .sf-drawer {
+  @media screen and (max-height: 360px) {
+    height: var(--window-height);
+  }
+  @media (pointer: coarse) {
+    height: var(--window-height);
+  }
+}
+
+.sf-mask.full .sf-drawer {
+  height: var(--window-height);
+}

package/src/style/src/components/_headerAvatar.scss

@@ -0,0 +1,22 @@
+html {
+  #sf-header-avatar {
+    text-transform: uppercase;
+    line-height: 1;
+    word-break: keep-all;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-position: center;
+    background-size: contain;
+    font-size: 1rem;
+    min-width: 36px;
+    min-height: 36px;
+    border-radius: 50%;
+    margin-left: 0.5rem;
+    cursor: pointer;
+    @include avatar-colors();
+    &.dark {
+      @include avatar-colors(true);
+    }
+  }
+}

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/_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/_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/_svg_icon.scss

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