@undrr/undrr-mangrove 1.2.1

package/dist/assets/scss/_mixins.scss

@@ -0,0 +1,522 @@
+// background image gradient
+@mixin background-image($deg, $colorname, $opacity) {
+  background: linear-gradient($deg, $colorname, $opacity);
+}
+
+// select box appearance
+@mixin x-appearance($value) {
+  -webkit-appearance: $value;
+  -moz-appearance: $value;
+  appearance: $value;
+}
+
+// animation
+@mixin animation($animation) {
+  -webkit-animation: $animation;
+  -moz-animation: $animation;
+  -ms-animation: $animation;
+  -o-animation: $animation;
+  animation: $animation;
+}
+
+// keyframe
+@mixin keyframes($keyframes...) {
+  -webkit-keyframes: $keyframes;
+  -moz-keyframes: $keyframes;
+  -ms-keyframes: $keyframes;
+  -o-keyframes: $keyframes;
+  keyframes: $keyframes;
+}
+
+// transition
+@mixin transition($transitions...) {
+  -webkit-transition: $transitions;
+  -moz-transition: $transitions;
+  -ms-transition: $transitions;
+  -o-transition: $transitions;
+  transition: $transitions;
+}
+
+// transform
+@mixin transform($transforms) {
+  -webkit-transform: $transforms;
+  -moz-transform: $transforms;
+  -ms-transform: $transforms;
+  -o-transform: $transforms;
+  transition: $transforms;
+}
+
+// Rotate
+@mixin rotate($deg) {
+  @include transform(rotate(#{$deg}deg));
+}
+
+// Translate
+@mixin translate($x, $y) {
+  @include transform(translate($x, $y));
+}
+
+// Scale
+@mixin scale($scale) {
+  @include transform(scale($scale));
+}
+
+// Skew
+@mixin skew($x, $y) {
+  @include transform(skew(#{$x}deg, #{$y}deg));
+}
+
+// Gradient color
+@mixin gradient($direction, $list) {
+  background: -webkit-linear-gradient($direction, $list);
+  background: -moz-linear-gradient($direction, $list);
+  background: -o-linear-gradient($direction, $list);
+  background: linear-gradient($direction, $list);
+}
+
+/* mixing  end */
+
+/* placeholder start */
+%paragraph-font-100 {
+  font-size: $mg-font-size-100;
+
+  @include devicebreak(medium) {
+    font-size: $mg-font-size-200;
+  }
+}
+
+%paragraph-font-200 {
+  font-size: $mg-font-size-200;
+  line-height: 1.4;
+
+  @include devicebreak(medium) {
+    font-size: $mg-font-size-300;
+  }
+}
+
+%paragraph-font-300 {
+  font-size: $mg-font-size-300;
+
+  @include devicebreak(medium) {
+    font-size: $mg-font-size-400;
+  }
+}
+
+%paragraph-font-400 {
+  font-size: $mg-font-size-400;
+  line-height: 1.1;
+
+  @include devicebreak(medium) {
+    font-size: $mg-font-size-500;
+  }
+}
+
+%border-bottom {
+  border-bottom: 1px solid $mg-color-neutral-400;
+}
+
+%img-cover {
+  height: 100%;
+  object-fit: cover;
+  padding: 0;
+  width: 100%;
+}
+
+%border-none {
+  @extend %img_none;
+
+  border: none;
+}
+
+%footer-block {
+  align-items: center;
+  border-bottom: 1px solid $mg-color-white;
+  justify-content: space-between;
+  margin-bottom: $mg-spacing-150;
+}
+
+%sidebar {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+  padding: $mg-spacing-50;
+  position: relative;
+
+  @include devicebreak(medium) {
+    padding: $mg-spacing-100;
+  }
+}
+
+%sidebar-selected {
+  background-color: $mg-color-blue-600;
+
+  h6 {
+    color: $mg-color-white;
+  }
+
+  &:hover {
+    background-color: $mg-color-blue-600;
+  }
+}
+
+%checbox-radio-before {
+  -webkit-appearance: none;
+  appearance: none;
+  border: 2px solid $mg-color-red-900;
+  cursor: pointer;
+  height: 16px;
+  margin: 0;
+  width: 16px;
+
+  &:hover {
+    border-color: $sendai-purple-400;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 4px $mg-color-blue-800;
+    outline: 0;
+  }
+}
+
+%ctaimg {
+  content: "";
+  height: 1.188rem;
+  margin-left: $mg-spacing-25;
+  margin-top: 2px;
+  width: 0.813rem;
+
+  @include devicebreak(medium) {
+    margin-top: 0;
+  }
+}
+
+%arrow {
+  @include transform(translateY(-50%));
+  @include transition(all 200ms ease-in-out);
+
+  // background:
+  //   url(#{$img-path-Iconfourback}/chevron-down.svg) no-repeat center
+  //   center;
+  content: "";
+  float: right;
+  height: 13px;
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  width: 20px;
+}
+
+%absolute__content {
+  content: "";
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+%sidebar-chevron {
+  @include transition(all 0.3s ease);
+  @include transform(translateY(-50%));
+
+  // background: url(#{$img-path-Icon}/chevron-down.svg) no-repeat center center;
+  content: "";
+  height: 0.813rem;
+  position: absolute;
+  right: 1.188rem;
+  top: 50%;
+  width: 20px;
+}
+
+%language_switcher {
+  border: none;
+  font-size: $mg-font-size-200;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+%img_none {
+  background-image: none;
+}
+
+%absolute__overflow {
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  width: 100%;
+}
+
+%select_default {
+  border: 2px solid $mg-color-black;
+  color: $mg-color-black;
+  cursor: pointer;
+  font-size: $mg-font-size-300;
+  font-weight: 600;
+  line-height: 1.125rem;
+  margin: 0;
+  padding: $mg-spacing-50 $mg-spacing-800 $mg-spacing-50 $mg-spacing-50;
+  position: relative;
+  text-transform: uppercase;
+  width: 100%;
+}
+
+%select_option {
+  border: 2px solid $mg-color-black;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: none;
+  min-height: 100px;
+  padding: 0 $mg-spacing-50;
+  width: 100%;
+
+  &:focus {
+    box-shadow: 0 0 4px $mg-color-blue-800;
+    outline: 0;
+  }
+}
+
+%select_rtl {
+  padding-left: 3.125rem;
+  padding-right: $mg-spacing-50;
+  text-align: right;
+}
+
+%select_rtl_after {
+  left: 16px;
+  margin: 0;
+  right: auto;
+}
+
+%no-animation {
+  -webkit-animation: none;
+  -moz-animation: none;
+  -ms-animation: none;
+  -o-animation: none;
+  animation: none;
+}
+
+%left-to-right {
+  @include transform(translateX(-100px));
+  @include transition(
+    transform 1.2s cubic-bezier(0.34, 0.41, 0.03, 1),
+    opacity 1.2s cubic-bezier(0.34, 0.41, 0.03, 1)
+  );
+
+  opacity: 0;
+  visibility: hidden;
+}
+
+%inviewport_left_right {
+  @include transform(translateX(0));
+
+  opacity: 1;
+  visibility: visible;
+}
+
+[dir="rtl"] {
+  %left-to-right {
+    @include transform(translateX(100px));
+  }
+}
+
+%scale-up {
+  @include transform(scale(0.9));
+  @include transition(transform 1.2s cubic-bezier(0.34, 0.41, 0.03, 1));
+}
+
+%opacity-only {
+  @include transition(opacity 1.2s cubic-bezier(0.34, 0.41, 0.03, 1));
+
+  opacity: 0;
+}
+
+%inviewport_opacity_only {
+  @include transform(translateX(0));
+
+  opacity: 1;
+}
+
+%header {
+  background-color: $mg-color-neutral-100;
+  box-shadow: 0 3px 6px rgb(0 0 0 / 0.1);
+  height: 7.1875rem;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9;
+}
+
+%background-white {
+  background-color: white;
+}
+
+%sub-external {
+  align-items: center;
+  justify-content: space-between;
+}
+
+%external {
+  align-items: center;
+  content: "";
+  cursor: pointer;
+  height: 1.125rem;
+  width: 1.25rem;
+}
+
+%footerlink {
+  @extend %img_none;
+
+  color: $mg-color-white;
+  font-size: $mg-font-size-300;
+  line-height: 1.4;
+
+  &:hover {
+    color: $mg-color-blue-100;
+  }
+}
+
+%footerlinkinvert {
+  color: $mg-color-black;
+
+  &:hover {
+    color: $mg-color-neutral-600;
+  }
+}
+
+%selectoption {
+  border-top: 1px solid $mg-color-neutral-400;
+  cursor: pointer;
+  margin-bottom: 0;
+  padding: 0;
+}
+
+// burmese lang
+:lang(my) {
+  %paragraph-font-200 {
+    font-size: $mg-font-size-100;
+    line-height: 1.7;
+
+    @include devicebreak(medium) {
+      font-size: $mg-font-size-200;
+    }
+  }
+
+  %paragraph-font-300 {
+    font-size: $mg-font-size-200;
+
+    @include devicebreak(medium) {
+      font-size: $mg-font-size-300;
+    }
+  }
+
+  %paragraph-font-400 {
+    font-size: $mg-font-size-400;
+    line-height: 1.1;
+
+    @include devicebreak(medium) {
+      font-size: $mg-font-size-500;
+    }
+  }
+  %button {
+    font-size: $mg-font-size-200;
+  }
+}
+
+%logo {
+  @include transition(all 0.4s cubic-bezier(0.64, 0.05, 0.35, 1.05));
+
+  width: 40px;
+
+  @include devicebreak(xlarge) {
+    height: ($header-height-xlarge + 7px);
+    width: 60px;
+
+    &.scrolled {
+      height: $header-height-xlarge;
+    }
+  }
+
+  @include devicebreak(mediumonlytab) {
+    height: ($header-height-medium + 7px);
+
+    &.scrolled {
+      height: $header-height-medium;
+    }
+  }
+}
+
+@mixin background($background...) {
+  background: linear-gradient($background);
+}
+
+%pseudo-icon {
+  box-sizing: border-box;
+  content: "";
+  display: block;
+  position: absolute;
+}
+
+%chevron-right-expanded {
+  i {
+    @include transition(width 0.3s);
+
+    box-sizing: border-box;
+    display: block;
+    height: $mg-spacing-50;
+    left: 1.25rem;
+    position: relative;
+    width: 0;
+
+    &::before {
+      @extend %pseudo-icon;
+
+      background-color: $mg-color-red-900;
+      display: none;
+      height: 2px;
+      right: 0;
+      top: 7px;
+      width: 100%;
+    }
+
+    &::after {
+      @extend %pseudo-icon;
+      @include transform(rotate(45deg));
+
+      border-right: 2px solid $mg-color-red-900;
+      border-top: 2px solid $mg-color-red-900;
+      height: $mg-spacing-25;
+      right: 0;
+      top: 2px;
+      width: $mg-spacing-25;
+    }
+  }
+
+  &:hover {
+    i {
+      width: $mg-spacing-400;
+
+      &::before {
+        display: unset;
+      }
+    }
+  }
+}
+
+%animate-link {
+  background-image:
+    linear-gradient($mg-color-red-900, $mg-color-red-900),
+    linear-gradient($mg-color-red-900, $mg-color-red-900);
+  background-position: 100% 100%, -30px 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 2px, 0 1px;
+
+  &:hover {
+    @include animation(line-loop-animation 2s linear infinite);
+  }
+}
+
+/* placeholder end */

package/dist/assets/scss/_utility.scss

@@ -0,0 +1,148 @@
+// CSS font size reset
+/* base start */
+.show-large {
+  display: none;
+
+  @include devicebreak(medium) {
+    display: block;
+  }
+}
+
+.show-small {
+  display: block;
+
+  @include devicebreak(medium) {
+    display: none;
+  }
+}
+
+/* animation start */
+*[data-viewport="true"] {
+  @extend %left-to-right;
+
+  &.inviewport {
+    @extend %inviewport_left_right;
+  }
+}
+
+.delay-1 {
+  transition-delay: 0.1s;
+}
+
+.delay-2 {
+  transition-delay: 0.2s;
+}
+
+.delay-3 {
+  transition-delay: 0.3s;
+}
+
+.delay-4 {
+  transition-delay: 0.4s;
+}
+
+.delay-5 {
+  transition-delay: 0.5s;
+}
+
+.scale-up {
+  @extend %scale-up;
+
+  &.inviewport {
+    @include transform(scale(1));
+  }
+}
+
+.opacity-only {
+  @extend %opacity-only;
+
+  &.inviewport {
+    @extend %inviewport_opacity_only;
+  }
+}
+
+.expand-to-size {
+  max-width: calc(100% - 1rem);
+
+  @include devicebreak(medium) {
+    max-width: calc(100% - 3rem);
+  }
+}
+
+[dir="rtl"] {
+  *[data-viewport="true"] {
+    @include transform(translateX(100px));
+
+    &.inviewport {
+      @extend %inviewport_left_right;
+    }
+  }
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+// color map solid
+$colors-solid: (
+  "yellow": $mg-color-yellow,
+  "red": $mg-color-red-900,
+  "green": $mg-color-green,
+  "blue": $mg-color-azure,
+);
+
+@each $name, $color in $colors-solid {
+  .#{$name} {
+    // statscard
+    .stats-card {
+      &:hover {
+        background-color: #{$color};
+      }
+    }
+
+    // progress-bar
+    .progress-bar {
+      background: #{$color};
+    }
+
+    // .blockquote
+    .blockquote {
+      background-color: #{$color};
+    }
+  }
+}
+
+// Show for screen readers only
+.mg-u-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+// Blanaced lines
+// https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
+.mg-u-text-wrap-balanced {
+  text-wrap: balance;
+}
+
+.mg-u-text-wrap-pretty {
+  text-wrap: pretty;
+}
+
+// Comma between child elements
+// https://gitlab.com/undrr/web-backlog/-/issues/864
+.mg-u-comma-between {
+  > *::after {
+    content: ", ";
+  }
+  > *:last-child::after {
+    content: "";
+  }
+}
+
+/* base end */

package/dist/assets/scss/_variables-irp.scss

@@ -0,0 +1,40 @@
+/**
+ * @tokens IRP Colors
+ * @presenter Color
+ *
+ * https://github.com/UX-and-I/storybook-design-token
+ */
+
+// IRP Specific colors
+$irp-color-primary: #0f78bf;
+$irp-color-green: rgb(140 198 63);
+
+// IRP-COLORS HOVER
+$mg-color-interactive: $irp-color-primary;
+$mg-color-interactive-active: $irp-color-primary;
+
+// COMPONENTS
+$mg-color-label: $mg-color-interactive;
+$mg-color-label--hover: $mg-color-interactive;
+$mg-radius-label: $mg-spacing-50;
+$mg-color-button-background: $irp-color-primary;
+$mg-color-button-background--hover: $sendai-orange-900;
+$mg-radius-button: $mg-spacing-50;
+
+// Hero
+$mg-color-hero: $mg-color-interactive;
+$mg-spacing-hero-overlay: 2rem 0;
+
+// Tabs
+$mg-color-tabbar-background: rgba($irp-color-green, 0.1);
+$mg-color-text-tab: $mg-color-neutral-500;
+$mg-color-text-tab-active: $mg-color-neutral-700;
+$mg-color-tab-background: rgba($irp-color-green, 0.3);
+$mg-color-tab-background--hover: $irp-color-green;
+$mg-radius-tab: $mg-spacing-0 $mg-spacing-0 0 0;
+$mg-color-tab-border: $mg-color-neutral-300;
+$mg-color-tab-border--hover: rgba($irp-color-green, 0.1);
+$mg-color-tab-border--active: $mg-color-tab-border--hover;
+$mg-tabs-border-bottom: true;
+
+/* variables end */