@undrr/undrr-mangrove 1.3.0 → 1.3.2

package/scss/Components/Forms/Dropdowns/CustomSelect/custom-select.scss

@@ -1,110 +0,0 @@
-.select-box {
-  color: $mg-color-black;
-  display: flex;
-  flex-direction: column;
-  font-size: $mg-font-size-800;
-  height: 52px;
-  max-width: 18.5rem;
-  position: relative;
-
-  &.expanded {
-    button {
-      &::after {
-        @include transform(translateY(-50%) rotate(-180deg));
-      }
-    }
-  }
-
-  button {
-    @extend %select_default;
-
-    background: $mg-color-white;
-    display: flex;
-
-    &::after {
-      @extend %arrow;
-    }
-  }
-
-  ul {
-    @extend %select_option;
-    @include transition(all 0.4s cubic-bezier(0.64, 0.05, 0.35, 1.05));
-
-    background-color: $mg-color-white;
-    order: 1;
-    position: absolute;
-    top: 51px;
-    z-index: 20;
-
-    &.active {
-      @extend %background-white;
-
-      border-top: 0;
-      display: block;
-      overflow-y: auto;
-    }
-
-    &::-webkit-scrollbar {
-      background-color: rgb(0 0 0 / 0.3);
-      width: 4px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: rgb(0 0 0 / 0.6);
-    }
-
-    li {
-      @extend %selectoption;
-
-      display: block;
-      position: relative;
-
-      span {
-        display: block;
-        font-size: $mg-font-size-300;
-        margin: 0 -1rem;
-        padding: $mg-spacing-50;
-
-        &:hover {
-          background-color: $mg-color-neutral-100;
-        }
-      }
-    }
-  }
-}
-
-[dir="rtl"] {
-  .select-box {
-    button {
-      @extend %select_rtl;
-
-      &::after {
-        @extend %select_rtl_after;
-      }
-    }
-
-    ul {
-      padding: 0 $mg-spacing-50;
-
-      li {
-        padding-right: 0;
-      }
-    }
-  }
-}
-
-// burmese lang
-:lang(my) {
-  .options-container {
-    top: 52px;
-  }
-}
-
-// Arabic
-:lang(ar) {
-  .select-box {
-    button {
-      font-family: $mg-font-family-arabic-body;
-    }
-  }
-}

package/scss/Components/Forms/Dropdowns/Multiselect/multi-select.scss

@@ -1,228 +0,0 @@
-/* multi-select start */
-.multi-select {
-  max-width: 18.5rem;
-  position: relative;
-
-  &.open {
-    > button {
-      border-bottom: 0;
-
-      &::after {
-        @include transform(translateY(-50%) rotate(-180deg));
-
-        top: 50%;
-      }
-    }
-
-    ul {
-      background-color: $mg-color-white;
-      border-top: 0;
-      display: block;
-
-      &.fix-height {
-        max-height: 18.75rem;
-      }
-
-      ul {
-        border: 0;
-        display: none;
-        overflow: hidden;
-        padding: 0 0 0 $mg-spacing-200;
-      }
-
-      li {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  > button {
-    @extend %select_default;
-
-    background: $mg-color-white;
-    display: flex;
-    max-width: 100%;
-    text-align: left;
-
-    span {
-      padding-left: 0.3125rem;
-    }
-
-    &::after {
-      @extend %arrow;
-    }
-  }
-
-  ul {
-    @extend %select_option;
-
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-    overflow-y: auto;
-
-    > li {
-      @extend %selectoption;
-
-      list-style: none;
-
-      .form-check {
-        &:hover {
-          background-color: $mg-color-neutral-100;
-        }
-      }
-    }
-
-    .has-submenu {
-      position: relative;
-
-      &.open {
-        ul {
-          border: 0;
-          border-top: solid 1px $mg-color-neutral-400;
-          display: block;
-          overflow: visible;
-          padding: 0 0 0 $mg-spacing-200;
-        }
-
-        button::after {
-          @include transform(translateY(-50%) rotate(-180deg));
-
-          top: 50%;
-        }
-      }
-
-      button {
-        background: $mg-color-white;
-        border: 0;
-        cursor: pointer;
-        display: block;
-        font-size: $mg-font-size-300;
-        margin: 0 -1rem;
-        padding: $mg-spacing-50;
-        position: relative;
-        text-align: left;
-        width: calc(100% + 2rem);
-
-        &:hover {
-          background-color: $mg-color-neutral-100;
-        }
-
-        &::after {
-          @extend %arrow;
-
-          right: 0.875rem;
-        }
-      }
-    }
-
-    .sub-menu {
-      display: none;
-      list-style: none;
-
-      > li {
-        border-top: 1px solid $mg-color-neutral-400;
-        margin-bottom: 0;
-
-        &:first-of-type {
-          border-top: 0;
-        }
-
-        > .checkbox-wrapper:hover {
-          background-color: $mg-color-neutral-100;
-        }
-      }
-    }
-
-    &::-webkit-scrollbar {
-      background-color: rgb(0 0 0 / 0.3);
-      width: 4px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: rgb(0 0 0 / 0.6);
-    }
-  }
-
-  ul .form-check {
-    justify-content: space-between;
-    margin: 0 -1rem;
-    padding: 0 $mg-spacing-50;
-
-    label {
-      padding: $mg-spacing-50 0;
-      width: 100%;
-    }
-
-    input {
-      position: absolute;
-      right: $mg-spacing-50;
-    }
-  }
-}
-
-[dir="rtl"] {
-  .multi-select {
-    button {
-      @extend %select_rtl;
-
-      &::after {
-        @extend %select_rtl_after;
-      }
-
-      span {
-        padding-left: 0;
-        padding-right: 0.3125rem;
-      }
-    }
-
-    ul {
-      padding: 0 $mg-spacing-50;
-
-      li {
-        padding-right: 0;
-      }
-
-      .form-check input {
-        left: $mg-spacing-50;
-        right: inherit;
-      }
-    }
-
-    .has-submenu {
-      button {
-        text-align: right;
-
-        &::after {
-          left: $mg-spacing-50;
-          right: inherit;
-        }
-      }
-    }
-
-    &.open {
-      .radio {
-        span {
-          left: $mg-spacing-50;
-          right: inherit;
-        }
-      }
-
-      ul {
-        ul {
-          padding: 0 $mg-spacing-200 0 0;
-        }
-      }
-    }
-  }
-}
-
-// Arabic
-:lang(ar) {
-  .multi-select {
-    ul li,
-    button {
-      font-family: $mg-font-family-arabic-body;
-    }
-  }
-}
-
-/* multi-select end */

package/scss/Components/LanguageSwitcher/language-switcher.scss

@@ -1,162 +0,0 @@
-/* language-switcher start */
-.dropdown-language {
-  display: inline-block;
-  position: relative;
-
-  ul {
-    @include transition(0.3s ease-in-out);
-
-    height: 0;
-    left: $mg-spacing-50;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    top: calc(100% + 3px);
-    z-index: 9;
-
-    li {
-      list-style: none;
-      margin-bottom: 0;
-      padding-left: 0;
-
-      a {
-        @extend %language_switcher;
-
-        background: $mg-color-neutral-200;
-        border-bottom: 1px solid $mg-color-neutral-400;
-        box-shadow: 0 3px 4px rgb(0 0 0 / 0.1);
-        display: block;
-        padding: $mg-spacing-25 $mg-spacing-50;
-
-        &:hover {
-          color: $mg-color-neutral-600;
-        }
-      }
-    }
-  }
-
-  &.active {
-    button::after {
-      @include transform(rotateZ(180deg));
-    }
-
-    ul {
-      height: auto;
-    }
-  }
-
-  button {
-    @extend %language_switcher;
-
-    align-items: center;
-    background-color: $mg-color-neutral-0;
-    color: $mg-color-text;
-    cursor: pointer;
-    display: flex;
-    padding: 0;
-
-    &::before {
-      background-color: $mg-color-blue-600;
-      content: "";
-      height: 26px;
-      margin-right: $mg-spacing-25;
-
-      // -webkit-mask: url(#{$img-path-Icon}/language.svg) no-repeat left center;
-      // mask: url(#{$img-path-Icon}/language.svg) no-repeat left center;
-      width: 25px;
-
-      @include devicebreak(small) {
-        background:
-          // transparent url(#{$img-path-Icon}/language.svg) no-repeat
-          left center;
-        -webkit-mask: inherit;
-        mask: inherit;
-      }
-    }
-
-    &::after {
-      @include transition(0.2s ease-in-out);
-
-      background-color: $mg-color-blue-600;
-      content: "";
-      height: 10px;
-      margin-left: $mg-spacing-25;
-
-      // -webkit-mask: url(#{$img-path-Icon}/arrow-blue.svg) no-repeat left center;
-      // mask: url(#{$img-path-Icon}/arrow-blue.svg) no-repeat left center;
-      width: 15px;
-
-      @include devicebreak(small) {
-        background:
-          // transparent url(#{$img-path-Icon}/arrow-blue.svg) no-repeat
-          left center;
-        -webkit-mask: inherit;
-        mask: inherit;
-      }
-    }
-
-    &:hover {
-      color: $mg-color-blue-400;
-
-      &::before {
-        background-color: $mg-color-blue-400;
-      }
-
-      &::after {
-        background-color: $mg-color-blue-400;
-      }
-    }
-
-    &.white {
-      color: $mg-color-white;
-
-      // &::before {
-      //   background:
-      //     url(#{$img-path-Icon}/language-white.svg) no-repeat left
-      //     center;
-      // }
-
-      // &::after {
-      //   background:
-      //     url(#{$img-path-Icon}/arrow-white-down.svg) no-repeat left
-      //     center;
-      // }
-    }
-  }
-}
-
-[dir="rtl"] {
-  .dropdown-language {
-    ul {
-      left: unset;
-      padding-right: 0;
-      right: 16px;
-
-      li {
-        padding-right: 0;
-      }
-    }
-
-    button::before {
-      margin-left: $mg-spacing-25;
-      margin-right: 0;
-      transform: scaleX(-1);
-    }
-
-    button::after {
-      margin-left: 0;
-      margin-right: $mg-spacing-25;
-    }
-  }
-}
-
-// burmese lang
-:lang(my) {
-  .dropdown-language {
-    button {
-      font-family: $mg-font-family;
-    }
-  }
-}
-
-/* language-switcher end */

package/scss/Components/Sidebar/sidebar.scss

@@ -1,236 +0,0 @@
-/* sidebar start */
-.sidebar-accordion {
-  @extend %background-white;
-
-  padding: 0;
-  position: relative;
-
-  &.mg-u-responsive--show-small {
-    h6 {
-      border-bottom: 2px solid $mg-color-black;
-
-      &::after {
-        @include transform(translateY(-50%) rotateZ(-180deg));
-      }
-    }
-
-    ul {
-      display: block;
-      padding: 0;
-    }
-  }
-
-  ul,
-  li {
-    list-style-type: none;
-    margin-bottom: 0;
-    padding-left: 0;
-
-    @include devicebreak(medium) {
-      a {
-        &:hover {
-          background-color: $mg-color-neutral-300;
-        }
-      }
-    }
-  }
-
-  h6 {
-    background-color: $mg-color-neutral-300;
-    cursor: pointer;
-    display: block;
-    margin-bottom: 0;
-    padding: $mg-spacing-50;
-    position: relative;
-
-    @include devicebreak(medium) {
-      display: none;
-    }
-
-    &::after {
-      @extend %sidebar-chevron;
-    }
-  }
-
-  ul {
-    display: none;
-    padding: 0;
-
-    @include devicebreak(medium) {
-      display: block;
-    }
-
-    & > .active {
-      border-bottom: none;
-
-      @include devicebreak(medium) {
-        button::after {
-          // background:
-          //   url(#{$img-path-Icon}/chevron-down-white.svg) no-repeat
-          //   center center;
-        }
-      }
-
-      & > a {
-        @include devicebreak(medium) {
-          background-color: $mg-color-blue-900;
-          color: $mg-color-white;
-        }
-      }
-
-      & > button::after {
-        @include transform(rotateZ(-180deg));
-
-        top: 1.125rem;
-
-        @include devicebreak(medium) {
-          top: $mg-spacing-100;
-        }
-      }
-    }
-
-    & > li {
-      background-color: $mg-color-neutral-300;
-      position: relative;
-
-      @include devicebreak(medium) {
-        background-color: transparent;
-        padding: 0;
-      }
-
-      button {
-        @extend %button;
-
-        float: right;
-        height: 1.25rem;
-        margin-right: 1.188rem;
-        margin-top: -2.188rem;
-        width: 1.25rem;
-
-        @include devicebreak(medium) {
-          margin-top: -2.688rem;
-          top: 2.063rem;
-        }
-
-        &::after {
-          @extend %sidebar-chevron;
-
-          top: $mg-spacing-100;
-
-          @include devicebreak(medium) {
-            top: 2.063rem;
-          }
-        }
-      }
-    }
-
-    ul.accordion__panel {
-      display: none;
-      height: auto;
-      padding: 0;
-
-      li {
-        a {
-          @extend %img_none;
-
-          border: none;
-          display: block;
-          font-size: $mg-font-size-200;
-          font-weight: 400;
-          padding: $mg-spacing-50 $mg-spacing-100 $mg-spacing-50 $mg-spacing-150;
-
-          @include devicebreak(medium) {
-            font-size: $mg-font-size-300;
-            padding-left: $mg-spacing-300;
-          }
-        }
-
-        &:first-of-type a {
-          background-color: transparent;
-          color: $mg-color-black;
-
-          @include devicebreak(medium) {
-            &:hover {
-              background-color: $mg-color-neutral-300;
-            }
-          }
-        }
-
-        &:last-of-type a {
-          margin-bottom: 0;
-        }
-      }
-    }
-  }
-
-  &.narrow {
-    ul.accordion__panel {
-      li {
-        a {
-          @include devicebreak(medium) {
-            font-size: 0.875rem;
-            padding-left: $mg-spacing-150;
-          }
-        }
-
-        &:last-of-type a {
-          @include devicebreak(medium) {
-            margin-bottom: $mg-spacing-200;
-          }
-        }
-      }
-    }
-
-    ul > li button::after {
-      @include devicebreak(medium) {
-        top: 1.625rem;
-      }
-    }
-
-    li.active {
-      button::after {
-        @include devicebreak(medium) {
-          top: 1.125rem;
-        }
-      }
-    }
-  }
-}
-
-[dir="rtl"] {
-  .sidebar-accordion h6,
-  .sidebar-accordion ul li > button {
-    &::after {
-      left: 24px;
-      right: unset;
-    }
-  }
-
-  .sidebar-accordion {
-    ul,
-    li {
-      padding-right: 0;
-    }
-
-    button {
-      float: left;
-      margin-left: $mg-spacing-100;
-      margin-right: 0;
-    }
-
-    &.narrow {
-      ul.accordion__panel {
-        li {
-          a {
-            @include devicebreak(medium) {
-              padding-left: $mg-spacing-100;
-              padding-right: $mg-spacing-150;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-/* sidebar end */