@luizleon/sf.prefeiturasp.vuecomponents 4.0.1 → 4.0.3

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

@@ -1,89 +0,0 @@
-@import "../variables";
-
-.#{$prefix}drawer {
-  pointer-events: auto;
-  height: var(--window-height);
-  background: var(--bg-color);
-  border-right: 1px solid var(--surface-border-color);
-  width: min(360px, 100vw);
-  transform: translate3d(0px, 0px, 0px);
-  opacity: 1;
-  transition: all 0.2s linear;
-  .#{$prefix}drawer-header,
-  .#{$prefix}drawer-footer {
-    border-color: var(--surface-border-color);
-    height: 60px;
-  }
-  .#{$prefix}drawer-header {
-    padding: 0 1.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid var(--surface-border-color);
-    .#{$prefix}drawer-title {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      flex-grow: 1;
-    }
-  }
-  .#{$prefix}drawer-content {
-    overflow: auto;
-    height: calc(var(--window-height) - 60px);
-  }
-  .#{$prefix}drawer-footer {
-    border-top: 1px solid var(--surface-border-color);
-  }
-  &.#{$prefix}drawer-with-footer .#{$prefix}drawer-content {
-    height: calc(var(--window-height) - 120px);
-  }
-}
-.#{$prefix}drawer-enter-active {
-  transition: all 0.2 linear;
-}
-.#{$prefix}drawer-leave-active {
-  transition: all 0.2 linear;
-}
-.#{$prefix}drawer-enter-from,
-.#{$prefix}drawer-leave-to {
-  transform: translate3d(-100%, 0px, 0px);
-}
-.#{$prefix}mask.right {
-  justify-content: flex-end;
-  .#{$prefix}drawer {
-    border-left: 1px solid var(--surface-border-color);
-    border-right: unset;
-  }
-  .#{$prefix}drawer-enter-from,
-  .#{$prefix}drawer-leave-to {
-    transform: translate3d(100%, 0px, 0px);
-  }
-}
-.#{$prefix}mask.bottom,
-.#{$prefix}mask.full {
-  justify-content: flex-end;
-  .#{$prefix}drawer {
-    border-left: unset;
-    border-top: 1px solid var(--surface-border-color);
-    width: 100%;
-    height: 420px;
-    align-self: end;
-  }
-  .#{$prefix}drawer-enter-from,
-  .#{$prefix}drawer-leave-to {
-    transform: translate3d(0px, var(--window-height), 0px);
-  }
-}
-
-.mask.bottom .#{$prefix}drawer {
-  @media screen and (max-height: 360px) {
-    height: var(--window-height);
-  }
-  @media (pointer: coarse) {
-    height: var(--window-height);
-  }
-}
-
-.mask.full .#{$prefix}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,119 +0,0 @@
-@import "../variables";
-@import "../mixins";
-
-.material-symbols-outlined {
-  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
-  &.icon-filled {
-    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
-  }
-}
-
-div.#{$prefix}icon {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-
-  > button {
-    color: currentColor;
-    pointer-events: none;
-    background: none;
-    border: none;
-    padding: 0;
-    + span {
-      position: absolute;
-      border-radius: 50%;
-      width: 8px;
-      height: 8px;
-      top: 6px;
-      right: 6px;
-      @include dot-colors;
-    }
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  &:has(button:focus-visible) {
-    outline: 2px solid var(--surface-1300-color);
-    outline-offset: 0px;
-  }
-
-  .#{$prefix}loading-circle {
-    svg {
-      stroke: currentColor;
-    }
-  }
-
-  &.#{$prefix}icon-small {
-    --size: calc(var(--material-icon-font-size) * 0.75);
-  }
-
-  &.#{$prefix}icon-medium {
-    --size: var(--material-icon-font-size);
-  }
-
-  &.#{$prefix}icon-large {
-    --size: calc(var(--material-icon-font-size) * 1.25);
-    > button {
-      font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0,
-        "opsz" 48;
-    }
-  }
-
-  &.#{$prefix}icon-xlarge {
-    --size: calc(var(--material-icon-font-size) * 2);
-    > button {
-      font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0,
-        "opsz" 48;
-    }
-  }
-
-  &.#{$prefix}icon-2xlarge {
-    --size: calc(var(--material-icon-font-size) * 2.5);
-    > button {
-      font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0,
-        "opsz" 48;
-    }
-  }
-
-  &.#{$prefix}icon-3xlarge {
-    --size: calc(var(--material-icon-font-size) * 3);
-    > button {
-      font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0,
-        "opsz" 48;
-    }
-  }
-
-  .#{$prefix}loading-circle {
-    width: var(--size);
-    height: var(--size);
-  }
-
-  > button {
-    font-size: var(--size);
-    width: var(--size);
-    height: var(--size);
-    line-height: var(--size);
-  }
-
-  &.#{$prefix}icon-button {
-    padding: 6px;
-    border-radius: 50%;
-    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
-      0ms;
-    @media (pointer: fine) {
-      &:hover,
-      &:focus-within {
-        cursor: pointer;
-        background: color-mix(in srgb, currentColor 10%, transparent);
-      }
-    }
-  }
-
-  &.#{$prefix}component-loading,
-  &.#{$prefix}component-disabled {
-    > button + span {
-      display: none;
-    }
-  }
-}

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

@@ -1,160 +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-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://static.sf.prefeitura.sp.gov.br/logo-header.png");
-        background-position: center;
-        background-size: contain;
-        background-repeat: no-repeat;
-      }
-    }
-
-    > .title {
-      padding: 0 16px;
-      font-size: 1.25rem;
-      font-weight: bold;
-      flex-grow: 1;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  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;
-    }
-  }
-
-  nav {
-    --nav-width: min(100vw, 290px);
-    z-index: 5;
-    position: absolute;
-    top: var(--header-height);
-    height: calc(var(--window-height) - var(--header-height));
-    background-color: var(--surface-100-color);
-    width: var(--nav-width);
-    border-right: 1px solid var(--surface-border-color);
-    transform: translateX(calc(-1 * var(--nav-width)));
-    transition-property: transform;
-    display: flex;
-    flex-direction: column;
-
-    &.visible {
-      transition-duration: 0.2s;
-      transform: translateX(0);
-    }
-
-    > .sf-layout-nav-content {
-      height: calc(100% - 80px);
-      overflow: auto;
-    }
-
-    > .sf-layout-nav-footer {
-      height: 80px;
-      border-top: 1px solid var(--surface-border-color);
-      background-color: var(--surface-300-color);
-
-      > .sf-layout-nav-footer-logo {
-        height: 60px;
-        margin-top: 10px;
-        width: 100%;
-        background-image: url("https://static.sf.prefeitura.sp.gov.br/logo-nav-theme-light.png");
-        background-position: center;
-        background-size: contain;
-        background-repeat: no-repeat;
-      }
-    }
-  }
-}
-
-html.dark #sf-layout .sf-layout-nav-footer-logo {
-  background-image: url("https://static.sf.prefeitura.sp.gov.br/logo-nav-theme-dark.png");
-}

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/_mask.scss

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

package/src/style/src/components/_message.scss

@@ -1,47 +0,0 @@
-@import "../variables";
-
-.#{$prefix}message {
-  border-radius: 4px;
-  padding: 1rem 1.5rem;
-  margin: 1rem;
-  position: relative;
-  &.#{$prefix}message-info {
-    background-color: var(--info-hover-color);
-    color: var(--info-color);
-  }
-  &.#{$prefix}message-error {
-    background-color: var(--error-hover-color);
-    color: var(--error-color);
-  }
-  &.#{$prefix}message-success {
-    background-color: var(--success-hover-color);
-    color: var(--success-color);
-  }
-  &.#{$prefix}message-warning {
-    background-color: var(--warn-hover-color);
-    color: var(--warn-color);
-  }
-  &.#{$prefix}message-help {
-    background-color: var(--help-hover-color);
-    color: var(--help-color);
-  }
-  &.#{$prefix}message-primary {
-    background-color: var(--primary-hover-color);
-    color: var(--primary-color);
-  }
-  &.#{$prefix}message-secondary {
-    background-color: var(--secondary-hover-color);
-    color: var(--secondary-color);
-  }
-  &[data-icon] {
-    padding-left: 3.25rem;
-    &::before {
-      @include material-symbols-filled;
-      content: attr(data-icon);
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      left: 1rem;
-    }
-  }
-}

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);
-}

package/src/style/src/components/_tab-navigation.scss

@@ -1,93 +0,0 @@
-.sf-tab-navigation {
-  background: var(--surface-100-color);
-  overflow: hidden;
-  position: relative;
-}
-
-.sf-tab-navigation svg {
-  width: 36px;
-  height: 36px;
-  padding: 8px;
-  cursor: pointer;
-  color: var(--text-color);
-  border-radius: 50%;
-  pointer-events: auto;
-}
-
-.sf-tab-navigation ul {
-  padding: 0;
-  margin: 0;
-  display: flex;
-  height: 42px;
-  list-style: none;
-  overflow: scroll;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  scroll-behavior: smooth;
-  background-color: var(--bg-color);
-  border-bottom: 1px solid var(--surface-border-color);
-  > li {
-    display: flex;
-    align-items: center;
-    padding: 0 1rem;
-    border-bottom: 2px solid transparent;
-    &[data-active="true"] {
-      border-bottom-color: var(--primary-color);
-      pointer-events: none;
-    }
-    &:not([data-active="true"]) {
-      > a {
-        &:hover,
-        &:focus {
-          color: var(--info-color);
-        }
-      }
-    }
-    > a {
-      text-decoration: none;
-    }
-  }
-}
-
-.sf-tab-navigation ul::-webkit-scrollbar {
-  display: none;
-}
-
-.sf-tab-navigation .right-arrow,
-.sf-tab-navigation .left-arrow {
-  position: absolute;
-  height: 100%;
-  width: 100px;
-  top: 0;
-  display: none;
-  align-items: center;
-  padding: 0 10px;
-  pointer-events: none;
-}
-
-.sf-tab-navigation .right-arrow.active,
-.sf-tab-navigation .left-arrow.active {
-  display: flex;
-}
-
-.sf-tab-navigation .right-arrow {
-  right: 0;
-  background: linear-gradient(
-    to left,
-    var(--surface-100-color) 30%,
-    transparent
-  );
-  justify-content: flex-end;
-}
-
-.sf-tab-navigation .left-arrow {
-  background: linear-gradient(
-    to right,
-    var(--surface-100-color) 50%,
-    transparent
-  );
-}
-
-.sf-tab-navigation svg:hover {
-  background: var(--surface-300-color);
-}

package/src/style/src/components/_themetoggle.scss

@@ -1,52 +0,0 @@
-@import "../mixins";
-
-html {
-  ##{$prefix}theme-toggle {
-    isolation: isolate;
-    display: flex;
-    align-items: center;
-    background: none;
-    border: none;
-    padding: 8px;
-    position: relative;
-    border-radius: 50%;
-    @media (pointer: fine) {
-      &:hover {
-        cursor: pointer;
-        background-color: hsla(
-          var(--primary-color-h),
-          var(--primary-color-s),
-          var(--primary-color-l),
-          0.1
-        );
-      }
-      &:focus-visible {
-        outline-offset: 0px;
-      }
-    }
-
-    svg {
-      height: 24px;
-      width: 24px;
-      fill: var(--text-color);
-    }
-
-    .toggle-circle {
-      transition: transform 500ms ease-out;
-      transform: translateX(-15%);
-    }
-
-    .toggle-sun {
-      transform-origin: center center;
-      transition: transform 750ms cubic-bezier(0.11, 0.14, 0.29, 1.32);
-      transform: rotate(0.5turn);
-    }
-  }
-
-  &.dark ##{$prefix}theme-toggle {
-    .toggle-circle,
-    .toggle-sun {
-      transform: unset;
-    }
-  }
-}