@tiddh/brave-vue 1.93.250 → 1.93.252

package/dist/src/components/Avatar/elements/ToggleColor.vue

@@ -1,128 +1,128 @@
-<template>
-  <button
-    class="toggle-color"
-    :class="selected ? 'selected' : ''"
-    v-on="$listeners"
-  >
-    <div
-      v-if="!showPlaceholder"
-      :style="{ backgroundColor: primaryColor }"
-      class="toggle-color-primary"
-    >
-      <span
-        v-if="auxiliaryColor"
-        :style="{ backgroundColor: auxiliaryColor }"
-        class="toggle-color-secondary"
-      />
-      <span
-        v-if="auxiliaryColor2"
-        :style="{ backgroundColor: auxiliaryColor2 }"
-        class="toggle-color-secondary2"
-      />
-    </div>
-    <span v-else class="toggle-color-primary toggle-color-placeholder" />
-  </button>
-</template>
-
-<script>
-export default {
-  name: "ToggleColor",
-  props: {
-    primaryColor: {
-      type: String,
-      required: true,
-    },
-    auxiliaryColor: {
-      type: String,
-      required: false,
-    },
-    auxiliaryColor2: {
-      type: String,
-      required: false,
-    },
-    selected: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    showPlaceholder() {
-      return this.primaryColor === "";
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
-
-.toggle-color {
-  padding: 5px;
-  font-family: $font-family-comp-02;
-  box-sizing: border-box;
-  background-color: white;
-  border: 1px solid #dfdae4;
-  display: flex;
-  flex-direction: column;
-  justify-items: center;
-  align-items: center;
-  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
-  border-radius: 50%;
-  margin: 0px 4px;
-  &:hover {
-    cursor: pointer;
-  }
-  &:hover,
-  &.selected {
-    // box-shadow: 0 0 1px 1px #2dd4d9;
-    border-color: #2dd4d9;
-  }
-  &:focus {
-    outline: none;
-  }
-  @include media-breakpoint-down("sm") {
-    padding: 3px;
-  }
-  &-primary {
-    position: relative;
-    height: 32px;
-    width: 32px;
-    border-radius: 100%;
-    overflow: hidden;
-    display: block;
-
-    @include media-breakpoint-down("sm") {
-      width: 22px;
-      height: 22px;
-    }
-
-    &-placeholder {
-      background-color: $color-neutral-dark;
-    }
-  }
-
-  &-secondary {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 50%;
-    display: block;
-  }
-
-  &-secondary2 {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 50%;
-    width: 100%;
-    display: block;
-    z-index: 2;
-  }
-
-  &-placeholder {
-    background-color: red;
-  }
-}
-</style>
+<template>
+  <button
+    class="toggle-color"
+    :class="selected ? 'selected' : ''"
+    v-on="$listeners"
+  >
+    <div
+      v-if="!showPlaceholder"
+      :style="{ backgroundColor: primaryColor }"
+      class="toggle-color-primary"
+    >
+      <span
+        v-if="auxiliaryColor"
+        :style="{ backgroundColor: auxiliaryColor }"
+        class="toggle-color-secondary"
+      />
+      <span
+        v-if="auxiliaryColor2"
+        :style="{ backgroundColor: auxiliaryColor2 }"
+        class="toggle-color-secondary2"
+      />
+    </div>
+    <span v-else class="toggle-color-primary toggle-color-placeholder" />
+  </button>
+</template>
+
+<script>
+export default {
+  name: "ToggleColor",
+  props: {
+    primaryColor: {
+      type: String,
+      required: true,
+    },
+    auxiliaryColor: {
+      type: String,
+      required: false,
+    },
+    auxiliaryColor2: {
+      type: String,
+      required: false,
+    },
+    selected: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    showPlaceholder() {
+      return this.primaryColor === "";
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
+
+.toggle-color {
+  padding: 5px;
+  font-family: $font-family-comp-02;
+  box-sizing: border-box;
+  background-color: white;
+  border: 1px solid #dfdae4;
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 50%;
+  margin: 0px 4px;
+  &:hover {
+    cursor: pointer;
+  }
+  &:hover,
+  &.selected {
+    // box-shadow: 0 0 1px 1px #2dd4d9;
+    border-color: #2dd4d9;
+  }
+  &:focus {
+    outline: none;
+  }
+  @include media-breakpoint-down("sm") {
+    padding: 3px;
+  }
+  &-primary {
+    position: relative;
+    height: 32px;
+    width: 32px;
+    border-radius: 100%;
+    overflow: hidden;
+    display: block;
+
+    @include media-breakpoint-down("sm") {
+      width: 22px;
+      height: 22px;
+    }
+
+    &-placeholder {
+      background-color: $color-neutral-dark;
+    }
+  }
+
+  &-secondary {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 50%;
+    display: block;
+  }
+
+  &-secondary2 {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 50%;
+    width: 100%;
+    display: block;
+    z-index: 2;
+  }
+
+  &-placeholder {
+    background-color: red;
+  }
+}
+</style>

package/dist/src/components/Avatar/elements/ToggleSubcategory.vue

@@ -1,154 +1,154 @@
-<template>
-  <button
-    class="toggle-button"
-    :class="selected ? 'selected close-icon' : ''"
-    v-on="$listeners"
-  >
-    <div v-if="!showPlaceholder" class="toggle-subcategory-icon">
-      <img :src="imagePath" class="toggle-subcategory-image" />
-    </div>
-    <span
-      v-else
-      class="toggle-subcategory-icon toggle-subcategory-icon-placeholder"
-    />
-    <div
-      class="close-absolute"
-      v-if="
-        selected &&
-        (glasses === 'oculos' ||
-          glasses === 'cabeca' ||
-          glasses === 'acessorios')
-      "
-    >
-      <span class="shape-svg-close">
-        <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M4.771 3.57408C4.45001 3.2531 3.92959 3.2531 3.60861 3.57408C3.28762 3.89507 3.28762 4.41549 3.60861 4.73647L6.83751 7.96538L3.57399 11.2289C3.25301 11.5499 3.25301 12.0703 3.57399 12.3913C3.89498 12.7123 4.4154 12.7123 4.73638 12.3913L7.9999 9.12777L11.2634 12.3913C11.5844 12.7123 12.1048 12.7123 12.4258 12.3913C12.7468 12.0703 12.7468 11.5499 12.4258 11.2289L9.16229 7.96538L12.3912 4.73647C12.7122 4.41549 12.7122 3.89507 12.3912 3.57408C12.0702 3.2531 11.5498 3.2531 11.2288 3.57408L7.9999 6.80299L4.771 3.57408Z"
-          />
-        </svg>
-      </span>
-    </div>
-  </button>
-</template>
-
-<script>
-export default {
-  name: "ToggleSubcategory",
-  props: {
-    imagePath: {
-      type: String,
-      default: "",
-    },
-    selected: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    glasses: {
-      type: String,
-      required: false,
-    },
-  },
-  computed: {
-    showPlaceholder() {
-      return this.imagePath === "";
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
-.toggle-button {
-  position: relative;
-  font-family: $font-family-comp-02;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background-color: white;
-  border: 2px solid #dfdae4;
-  display: flex;
-  flex-direction: column;
-  justify-items: center;
-  align-items: center;
-  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
-  border-radius: 7%;
-  margin-bottom: px-size("lg", $spacing-stack-xs);
-
-  &:hover {
-    cursor: pointer;
-  }
-  @media (max-width: 1023px) {
-    border-width: 2px;
-    -webkit-box-flex: unset;
-    flex: unset;
-    width: 12vh;
-    height: 12vh;
-    max-width: unset;
-    border-radius: 10px !important;
-    flex-shrink: 0;
-    padding: 5px;
-  }
-  &:hover,
-  &.selected {
-    // box-shadow: 0 0 1px 1px #2dd4d9;
-    border-color: #2dd4d9;
-  }
-  &:focus {
-    outline: none;
-  }
-}
-.toggle-subcategory {
-  padding: 1px;
-  &-icon {
-    height: 82px;
-    width: 82px;
-    display: flex;
-    @include media-breakpoint-down("sm") {
-      height: 100%;
-      width: unset;
-    }
-    img {
-      border-radius: 100px;
-      display: block;
-      max-width: 85%;
-      margin: 0 auto;
-    }
-    &-placeholder {
-      background-color: $color-neutral-medium;
-    }
-  }
-
-  &-image {
-    width: 100%;
-  }
-}
-.close-icon {
-  .close-absolute {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    right: -4px;
-    top: -6px;
-  }
-  .shape-svg-close {
-    width: 18px;
-    height: 18px;
-    color: #fff;
-    background-color: #ff0000;
-    border-radius: 40.1px;
-    box-shadow: 0 2px 4px 0 rgba(206, 197, 214, 0.8);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    svg {
-      width: 14px;
-      height: 14px;
-      fill: #fff;
-    }
-  }
-}
-</style>
+<template>
+  <button
+    class="toggle-button"
+    :class="selected ? 'selected close-icon' : ''"
+    v-on="$listeners"
+  >
+    <div v-if="!showPlaceholder" class="toggle-subcategory-icon">
+      <img :src="imagePath" class="toggle-subcategory-image" />
+    </div>
+    <span
+      v-else
+      class="toggle-subcategory-icon toggle-subcategory-icon-placeholder"
+    />
+    <div
+      class="close-absolute"
+      v-if="
+        selected &&
+        (glasses === 'oculos' ||
+          glasses === 'cabeca' ||
+          glasses === 'acessorios')
+      "
+    >
+      <span class="shape-svg-close">
+        <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M4.771 3.57408C4.45001 3.2531 3.92959 3.2531 3.60861 3.57408C3.28762 3.89507 3.28762 4.41549 3.60861 4.73647L6.83751 7.96538L3.57399 11.2289C3.25301 11.5499 3.25301 12.0703 3.57399 12.3913C3.89498 12.7123 4.4154 12.7123 4.73638 12.3913L7.9999 9.12777L11.2634 12.3913C11.5844 12.7123 12.1048 12.7123 12.4258 12.3913C12.7468 12.0703 12.7468 11.5499 12.4258 11.2289L9.16229 7.96538L12.3912 4.73647C12.7122 4.41549 12.7122 3.89507 12.3912 3.57408C12.0702 3.2531 11.5498 3.2531 11.2288 3.57408L7.9999 6.80299L4.771 3.57408Z"
+          />
+        </svg>
+      </span>
+    </div>
+  </button>
+</template>
+
+<script>
+export default {
+  name: "ToggleSubcategory",
+  props: {
+    imagePath: {
+      type: String,
+      default: "",
+    },
+    selected: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    glasses: {
+      type: String,
+      required: false,
+    },
+  },
+  computed: {
+    showPlaceholder() {
+      return this.imagePath === "";
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
+.toggle-button {
+  position: relative;
+  font-family: $font-family-comp-02;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background-color: white;
+  border: 2px solid #dfdae4;
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 7%;
+  margin-bottom: px-size("lg", $spacing-stack-xs);
+
+  &:hover {
+    cursor: pointer;
+  }
+  @media (max-width: 1023px) {
+    border-width: 2px;
+    -webkit-box-flex: unset;
+    flex: unset;
+    width: 12vh;
+    height: 12vh;
+    max-width: unset;
+    border-radius: 10px !important;
+    flex-shrink: 0;
+    padding: 5px;
+  }
+  &:hover,
+  &.selected {
+    // box-shadow: 0 0 1px 1px #2dd4d9;
+    border-color: #2dd4d9;
+  }
+  &:focus {
+    outline: none;
+  }
+}
+.toggle-subcategory {
+  padding: 1px;
+  &-icon {
+    height: 82px;
+    width: 82px;
+    display: flex;
+    @include media-breakpoint-down("sm") {
+      height: 100%;
+      width: unset;
+    }
+    img {
+      border-radius: 100px;
+      display: block;
+      max-width: 85%;
+      margin: 0 auto;
+    }
+    &-placeholder {
+      background-color: $color-neutral-medium;
+    }
+  }
+
+  &-image {
+    width: 100%;
+  }
+}
+.close-icon {
+  .close-absolute {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    right: -4px;
+    top: -6px;
+  }
+  .shape-svg-close {
+    width: 18px;
+    height: 18px;
+    color: #fff;
+    background-color: #ff0000;
+    border-radius: 40.1px;
+    box-shadow: 0 2px 4px 0 rgba(206, 197, 214, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    svg {
+      width: 14px;
+      height: 14px;
+      fill: #fff;
+    }
+  }
+}
+</style>