@luizleon/sf.prefeiturasp.vuecomponents 0.0.19 → 0.0.21

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

@@ -1,107 +0,0 @@
-@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

@@ -1,57 +0,0 @@
-@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

@@ -1,99 +0,0 @@
-.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

@@ -1,22 +0,0 @@
-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

@@ -1,120 +0,0 @@
-@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

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

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

@@ -1,183 +0,0 @@
-@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

@@ -1,24 +0,0 @@
-@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

@@ -1,31 +0,0 @@
-.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

@@ -1,28 +0,0 @@
-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

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