@luizleon/sf.prefeiturasp.vuecomponents 0.0.2 → 0.0.4

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

@@ -1,405 +0,0 @@
-.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/_mark.scss

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

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

@@ -1,33 +0,0 @@
-.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/_numpad.scss

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

@@ -1,52 +0,0 @@
-.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/_select.scss

@@ -1,60 +0,0 @@
-.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;
-  }
-}