@luizleon/sf.prefeiturasp.vuecomponents 0.0.1

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

@@ -0,0 +1,110 @@
+@use "../mixins";
+
+.sf-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  overflow: hidden;
+  font-weight: 400;
+  transition: opacity 0.2s ease-in-out;
+  &:hover {
+    cursor: pointer;
+  }
+
+  .sf-button-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .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/_checkbox.scss

@@ -0,0 +1,53 @@
+.sf-checkbox {
+  $width: 22px;
+  $height: 22px;
+  $radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  align-items: center;
+  position: relative;
+  .sf-checkbox-box {
+    min-width: $width;
+    min-height: $height;
+    width: $width;
+    height: $height;
+    border-radius: $radius;
+    border: 2px solid var(--surface-border-color);
+    background: var(--surface-200-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition-duration: 0.2s;
+    transition-timing-function: linear;
+    transition-property: box-shadow, border;
+    &.sf-checkbox-box-highlight {
+      border-color: var(--primary-color);
+      background-color: var(--primary-color);
+      > .sf-icon > button {
+        color: var(--bg-color);
+      }
+    }
+    &.sf-checkbox-box-focus {
+      outline: 0 none;
+      outline-offset: 0;
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 1px var(--primary-color);
+    }
+    &:not(.sf-checkbox-box-highlight) {
+      &:hover {
+        outline: 0 none;
+        outline-offset: 0;
+        border-color: var(--surface-900-color);
+        background: var(--surface-300-color);
+      }
+    }
+  }
+  .sf-checkbox-label {
+    padding-left: 1rem;
+    margin-right: 1rem;
+    word-break: break-all;
+    &:empty {
+      display: none;
+    }
+  }
+}

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: 12.5%;
+    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% - 12.5%);
+  }
+  &:has(.sf-content-footer:empty) > .sf-content-body {
+    height: calc(100% - 12.5%);
+  }
+  &:has(.sf-content-header:empty):has(.sf-content-footer:empty)
+    > .sf-content-body {
+    height: 100%;
+  }
+}

package/src/style/src/components/_datefield.scss

@@ -0,0 +1,405 @@
+.sf-datepicker-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.sf-timepicker-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  max-height: 240px;
+  margin: 1rem 0;
+  > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 80px;
+    height: 100%;
+    > .sf-icon > button {
+      font-size: 48px;
+      pointer-events: auto;
+      cursor: pointer;
+    }
+    span {
+      font-size: 2rem;
+      flex-grow: 1;
+      display: flex;
+      align-items: center;
+      margin: 1rem 0;
+    }
+  }
+}
+
+.air-datepicker-cell.-day-.-other-month-,
+.air-datepicker-cell.-year-.-other-decade- {
+  color: var(--adp-color-other-month);
+}
+.air-datepicker-cell.-day-.-other-month-:hover,
+.air-datepicker-cell.-year-.-other-decade-:hover {
+  color: var(--adp-color-other-month-hover);
+}
+.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month-,
+.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade- {
+  color: var(--adp-color-other-month) !important;
+}
+.-selected-.air-datepicker-cell.-day-.-other-month-,
+.-selected-.air-datepicker-cell.-year-.-other-decade- {
+  color: var(bg-color);
+  background: var(--adp-background-color-selected-other-month);
+}
+.-selected-.-focus-.air-datepicker-cell.-day-.-other-month-,
+.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade- {
+  background: var(
+    --adp-background-color-selected-other-month-focused
+  );
+}
+.-in-range-.air-datepicker-cell.-day-.-other-month-,
+.-in-range-.air-datepicker-cell.-year-.-other-decade- {
+  background-color: var(--adp-background-color-in-range);
+  color: var(--adp-color);
+}
+.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month-,
+.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade- {
+  background-color: var(--adp-background-color-in-range-focused);
+}
+.air-datepicker-cell.-day-.-other-month-:empty,
+.air-datepicker-cell.-year-.-other-decade-:empty {
+  background: none;
+  border: none;
+}
+.air-datepicker-cell {
+  border-radius: var(--adp-cell-border-radius);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+@media (pointer: fine) {
+  .air-datepicker-cell.-focus- {
+    background: var(--adp-cell-background-color-hover);
+  }
+  .air-datepicker-nav--title:hover,
+  .air-datepicker-nav--action:hover {
+    background: var(--adp-background-color-hover);
+  }
+  .air-datepicker-button:hover {
+    color: var(--adp-btn-color-hover);
+    background: var(--adp-btn-background-color-hover);
+  }
+  .air-datepicker-button:focus {
+    color: var(--adp-btn-color-hover);
+    background: var(--adp-btn-background-color-hover);
+    outline: none;
+  }
+}
+
+.air-datepicker-cell.-current- {
+  color: var(--info-color);
+}
+
+.air-datepicker-cell.-disabled- {
+  pointer-events: none;
+  color: var(--adp-color-disabled) !important;
+}
+
+.air-datepicker-cell.-selected- {
+  color: var(--bg-color) !important;
+  border: none !important;
+  background: var(--adp-cell-background-color-selected) !important;
+}
+.air-datepicker-cell.-selected-.-current- {
+  color: var(--bg-color);
+  background: var(--adp-cell-background-color-selected);
+}
+.air-datepicker-cell.-selected-.-focus- {
+  background: var(--adp-cell-background-color-selected-hover);
+}
+
+.air-datepicker-body {
+  transition: all var(--adp-transition-duration)
+    var(--adp-transition-ease);
+}
+.air-datepicker-body.-hidden- {
+  display: none;
+}
+.air-datepicker-body--day-names {
+  display: grid;
+  grid-template-columns: repeat(7, var(--adp-day-cell-width));
+  height: 25px;
+}
+.air-datepicker-body--day-name {
+  color: var(--adp-day-name-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 0.8em;
+}
+.air-datepicker-body--day-name.-clickable- {
+  cursor: pointer;
+}
+.air-datepicker-body--day-name.-clickable-:hover {
+  color: var(--adp-day-name-color-hover);
+}
+.air-datepicker-body--cells {
+  display: grid;
+}
+.air-datepicker-body--cells.-days- {
+  grid-template-columns: repeat(7, var(--adp-day-cell-width));
+  height: 140px;
+}
+.air-datepicker-body--cells.-months- {
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: var(--adp-month-cell-height);
+}
+.air-datepicker-body--cells.-years- {
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: var(--adp-year-cell-height);
+}
+
+.air-datepicker-nav {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--adp-border-color-inner);
+  min-height: var(--adp-nav-height);
+  padding: var(--adp-padding);
+  box-sizing: content-box;
+}
+.-only-timepicker- .air-datepicker-nav {
+  display: none;
+}
+.air-datepicker-nav--title,
+.air-datepicker-nav--action {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+}
+.air-datepicker-nav--action {
+  width: var(--adp-nav-action-size);
+  border-radius: var(--adp-border-radius);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+.air-datepicker-nav--action.-disabled- {
+  visibility: hidden;
+}
+.air-datepicker-nav--action svg {
+  width: 32px;
+  height: 32px;
+}
+.air-datepicker-nav--action path {
+  fill: none;
+  stroke: var(--adp-nav-arrow-color);
+  stroke-width: 2px;
+}
+.air-datepicker-nav--title {
+  border-radius: var(--adp-border-radius);
+  padding: 0 8px;
+}
+.air-datepicker-nav--title i {
+  font-style: normal;
+  color: var(--adp-nav-color-secondary);
+  margin-left: 0.3em;
+}
+.air-datepicker-nav--title.-disabled- {
+  cursor: default;
+  background: none;
+}
+
+.air-datepicker-buttons {
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+}
+.air-datepicker-button {
+  display: inline-flex;
+  color: var(--adp-btn-color);
+  border-radius: var(--adp-btn-border-radius);
+  cursor: pointer;
+  height: var(--adp-btn-height);
+  border: none;
+  background: rgba(255, 255, 255, 0);
+}
+
+.air-datepicker-button:active {
+  opacity: 0.8;
+  color: var(--adp-btn-color-hover);
+  background: var(--adp-btn-background-color-hover);
+}
+
+.air-datepicker-button span {
+  outline: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.air-datepicker {
+  --adp-width: 100%;
+  --adp-max-width: 280px;
+  --adp-padding: 4px;
+  --adp-grid-areas: "nav" "body" "timepicker" "buttons";
+  --adp-transition-duration: 0.3s;
+  --adp-transition-ease: ease-out;
+  --adp-transition-offset: 8px;
+  --adp-background-color: var(--bg-color);
+  --adp-background-color-hover: var(--primary-hover-color);
+  --adp-background-color-active: transparent;
+  --adp-background-color-in-range: rgba(92, 196, 239, 0.1);
+  --adp-background-color-in-range-focused: rgba(92, 196, 239, 0.2);
+  --adp-background-color-selected-other-month-focused: var(
+    --primary-hover-color
+  );
+  --adp-background-color-selected-other-month: var(
+    --primary-hover-color
+  );
+  --adp-color: var(--text-color);
+  --adp-color-secondary: var(--secondary-color);
+  --adp-accent-color: var(--primary-color);
+  --adp-color-other-month: hsla(
+    var(--text-color-h),
+    var(--text-color-s),
+    var(--text-color-l),
+    0.4
+  );
+  --adp-color-disabled: hsla(
+    var(--text-color-h),
+    var(--text-color-s),
+    var(--text-color-l),
+    0.2
+  );
+  --adp-color-disabled-in-range: hsla(
+    var(--text-color-h),
+    var(--text-color-s),
+    var(--text-color-l),
+    0.4
+  );
+  --adp-color-other-month-hover: hsla(
+    var(--text-color-h),
+    var(--text-color-s),
+    var(--text-color-l),
+    0.6
+  );
+  --adp-border-color: var(--surface-border-color);
+  --adp-border-color-inner: var(--surface-100-color);
+  --adp-border-radius: 4px;
+  --adp-border-color-inline: var(--surface-300-color);
+  --adp-nav-height: 32px;
+  --adp-nav-arrow-color: var(--adp-color-secondary);
+  --adp-nav-action-size: 32px;
+  --adp-nav-color-secondary: var(--adp-color-secondary);
+  --adp-day-name-color: var(--primary-color);
+  --adp-day-name-color-hover: var(--primary-hover-color);
+  --adp-day-cell-width: 1fr;
+  --adp-day-cell-height: 1fr;
+  --adp-month-cell-height: 36px;
+  --adp-year-cell-height: 42px;
+  --adp-pointer-size: 10px;
+  --adp-poiner-border-radius: 2px;
+  --adp-pointer-offset: 14px;
+  --adp-cell-border-radius: 4px;
+  --adp-cell-background-color-hover: var(
+    --adp-background-color-hover
+  );
+  --adp-cell-background-color-selected: var(--primary-color);
+  --adp-cell-background-color-selected-hover: var(
+    --primary-hover-color
+  );
+  --adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);
+  --adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);
+  --adp-cell-border-color-in-range: var(
+    --adp-cell-background-color-selected
+  );
+  --adp-btn-height: 32px;
+  --adp-btn-color: var(--adp-accent-color);
+  --adp-btn-color-hover: var(--adp-color);
+  --adp-btn-border-radius: var(--adp-border-radius);
+  --adp-btn-background-color-hover: var(--adp-background-color-hover);
+  --adp-btn-background-color-active: var(
+    --adp-background-color-active
+  );
+  --adp-time-track-height: 1px;
+  --adp-time-track-color: #dedede;
+  --adp-time-track-color-hover: #b1b1b1;
+  --adp-time-thumb-size: 12px;
+  --adp-time-padding-inner: 10px;
+  --adp-time-day-period-color: var(--adp-color-secondary);
+  --adp-mobile-font-size: 16px;
+  --adp-mobile-nav-height: 40px;
+  --adp-mobile-width: 320px;
+  --adp-mobile-day-cell-height: 38px;
+  --adp-mobile-month-cell-height: 48px;
+  --adp-mobile-year-cell-height: 64px;
+}
+
+.air-datepicker {
+  background: var(--adp-background-color);
+  box-sizing: content-box;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(4, -webkit-max-content);
+  grid-template-rows: repeat(4, max-content);
+  grid-template-areas: var(--adp-grid-areas);
+  color: var(--adp-color);
+  width: var(--adp-width);
+  max-width: var(--adp-max-width);
+}
+
+.air-datepicker--navigation {
+  grid-area: nav;
+}
+.air-datepicker--content {
+  box-sizing: content-box;
+  grid-area: body;
+  padding: 0 var(--adp-padding);
+  height: 175px;
+}
+.-only-timepicker- .air-datepicker--content {
+  display: none;
+}
+.air-datepicker--time {
+  grid-area: timepicker;
+}
+.air-datepicker--buttons {
+  grid-area: buttons;
+}
+.air-datepicker--buttons,
+.air-datepicker--time {
+  padding: var(--adp-padding);
+  border-top: 1px solid var(--adp-border-color-inner);
+}
+.air-datepicker-overlay {
+  position: fixed;
+  background: var(--adp-overlay-background-color);
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  transition: opacity var(--adp-overlay-transition-duration)
+      var(--adp-overlay-transition-ease),
+    left 0s, height 0s, width 0s;
+  transition-delay: 0s, var(--adp-overlay-transition-duration),
+    var(--adp-overlay-transition-duration),
+    var(--adp-overlay-transition-duration);
+  z-index: var(--adp-overlay-z-index);
+}
+.air-datepicker-overlay.-active- {
+  opacity: 1;
+  width: 100%;
+  height: 100%;
+  transition: opacity var(--adp-overlay-transition-duration)
+      var(--adp-overlay-transition-ease),
+    height 0s, width 0s;
+}

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