@luizleon/sf.prefeiturasp.vuecomponents 0.0.2 → 0.0.3

package/src/style/src/components/_textfield.scss

@@ -1,186 +0,0 @@
-.sf-textfield {
-  position: relative;
-  display: block;
-  font-size: 1rem;
-  line-height: 1.5;
-  overflow: hidden;
-}
-
-.sf-textfield > input {
-  display: block;
-  box-sizing: border-box;
-  margin: 0;
-  border: none;
-  border-top: 27px solid transparent;
-  border-bottom: 1px solid var(--secondary-color);
-  border-radius: 4px 4px 0 0;
-  padding: 0 12px 10px;
-  width: 100%;
-  height: inherit;
-  color: var(--text-color);
-  background-color: var(--surface-300-color);
-  box-shadow: none;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  caret-color: var(--primary-color);
-  transition: border-bottom 0.2s, background-color 0.2s;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.sf-textfield > input + span {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: block;
-  box-sizing: border-box;
-  padding: 7px 12px 0;
-  color: var(--secondary-color);
-  font-size: 75%;
-  line-height: 18px;
-  pointer-events: none;
-  transition: color 0.2s, font-size 0.2s, line-height 0.2s;
-}
-
-.sf-textfield > input + span::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  display: block;
-  width: 100%;
-  height: 2px;
-  background-color: var(--primary-color);
-  transform-origin: bottom center;
-  transform: scaleX(0);
-  transition: transform 0.3s;
-}
-
-.sf-textfield > input:hover {
-  border-bottom-color: var(--text-color);
-  background-color: var(--surface-500-color);
-}
-
-.sf-textfield > input:not(:focus):placeholder-shown + span {
-  font-size: inherit;
-  line-height: 48px;
-}
-
-.sf-textfield > input:focus {
-  background-color: var(--surface-500-color);
-  outline: none;
-  + span {
-    color: var(--primary-color);
-    &::before {
-      opacity: 0.12;
-    }
-    &::after {
-      transform: scale(1);
-    }
-  }
-}
-
-.sf-textfield > input:disabled {
-  border-bottom-color: var(--surface-1300-color);
-  color: var(--surface-1000-color);
-  background-color: var(--surface-100-color);
-  + span {
-    color: var(--surface-1000-color);
-  }
-}
-
-.sf-textfield-dense {
-  > input {
-    padding-bottom: 4px;
-    border-top-width: 18px;
-    font-size: 0.875rem;
-  }
-  > input + span {
-    top: -11px;
-    padding-top: 13px;
-  }
-  > input:not(:focus):placeholder-shown + span {
-    line-height: 42px;
-  }
-}
-
-.sf-textfield-empty-label {
-  > input {
-    border-top-width: 20px;
-    padding-bottom: 17px;
-  }
-  &.sf-textfield-dense {
-    > input {
-      border-top-width: 10px;
-      padding-bottom: 10px;
-    }
-  }
-}
-
-.sf-textfield-left {
-  > input {
-    text-align: left;
-  }
-}
-
-.sf-textfield-center {
-  > input {
-    text-align: center;
-  }
-}
-
-.sf-textfield-right {
-  > input {
-    text-align: right;
-  }
-}
-
-/**
-Ícones
-**/
-.sf-textfield {
-  &:has(.sf-textfield-leading-icon) {
-    > input,
-    > span {
-      padding-left: 48px;
-    }
-  }
-  &:has(.sf-textfield-clear-icon),
-  &:has(.sf-textfield-action-icon) {
-    > input,
-    > span {
-      padding-right: 36px;
-    }
-  }
-  &:has(.sf-textfield-clear-icon):has(.sf-textfield-action-icon) {
-    > input,
-    > span {
-      padding-right: 72px;
-    }
-    .sf-textfield-clear-icon {
-      right: 36px;
-    }
-  }
-  > .sf-icon {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    &.sf-textfield-leading-icon {
-      pointer-events: none;
-      left: 12px;
-    }
-    &.sf-textfield-clear-icon,
-    &.sf-textfield-action-icon {
-      right: 4px;
-    }
-  }
-}
-
-// Last Pass (e outros plugins...)
-.sf-textfield > div:not(.sf-icon):not(.sf-textfield-action) {
-  visibility: hidden;
-}

package/src/style/src/components/_toast.scss

@@ -1,66 +0,0 @@
-div.sf-toast {
-  transition: all 300ms ease;
-  background-color: var(--surface-600-color);
-  position: fixed;
-  border-radius: 4px;
-  bottom: -100px;
-  top: -100px;
-  opacity: 0;
-  width: 480px;
-  margin: 24px;
-
-  @include toast-colors;
-
-  @media screen and (max-width: #{$sm}) {
-    margin: 0;
-    margin-bottom: -1px;
-    width: 100vw;
-    min-height: 100px;
-    border-radius: 0;
-    .content .progress {
-      border-radius: 0 !important;
-    }
-  }
-
-  .content {
-    color: var(--text-color);
-    padding: 1.75rem 1.5rem;
-    position: relative;
-    .icon {
-      position: absolute;
-      top: 50%;
-      margin-top: -12px;
-      right: 12px;
-      cursor: pointer;
-    }
-    p {
-      padding-right: 18px;
-      font-size: 1.1rem;
-    }
-    .progress {
-      position: absolute;
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
-      height: 10px;
-      top: 0;
-      right: 0;
-      left: 0;
-      transition-property: left;
-      transition-timing-function: linear;
-      transition-delay: 300ms;
-      background-color: var(--animate-bg-color);
-      opacity: 0.75;
-    }
-    &.animate .progress {
-      left: 100%;
-      border-top-left-radius: 0;
-    }
-  }
-
-  &.visible {
-    opacity: 1;
-    top: auto !important;
-    bottom: 0;
-    right: 0;
-  }
-}