@google-translate-select/theme-chalk/dist/base.css

🚀 The package offer theme-chalk for @google-translate-select!

@charset "UTF-8";

/* src/base.scss */
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
  transition: opacity .2s linear;
  transition: var(--google-translate-select-transition-fade-linear);
}
.fade-in-linear-enter-from,
.fade-in-linear-leave-to {
  opacity: 0;
}
.google-translate-select-fade-in-linear-enter-active,
.google-translate-select-fade-in-linear-leave-active {
  transition: opacity .2s linear;
  transition: var(--google-translate-select-transition-fade-linear);
}
.google-translate-select-fade-in-linear-enter-from,
.google-translate-select-fade-in-linear-leave-to {
  opacity: 0;
}
.google-translate-select-fade-in-enter-active,
.google-translate-select-fade-in-leave-active {
  transition: all .3s cubic-bezier(.55, 0, .1, 1);
  transition: all var(--google-translate-select-transition-duration) cubic-bezier(.55, 0, .1, 1);
}
.google-translate-select-fade-in-enter-from,
.google-translate-select-fade-in-leave-active {
  opacity: 0;
}
.google-translate-select-zoom-in-center-enter-active,
.google-translate-select-zoom-in-center-leave-active {
  transition: all .3s cubic-bezier(.55, 0, .1, 1);
  transition: all var(--google-translate-select-transition-duration) cubic-bezier(.55, 0, .1, 1);
}
.google-translate-select-zoom-in-center-enter-from,
.google-translate-select-zoom-in-center-leave-active {
  opacity: 0;
  transform: scaleX(0);
}
.google-translate-select-zoom-in-top-enter-active,
.google-translate-select-zoom-in-top-leave-active {
  opacity: 1;
  transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
  transition: var(--google-translate-select-transition-md-fade);
  transform: scaleY(1);
  transform-origin: center top;
}
.google-translate-select-zoom-in-top-enter-active[data-popper-placement^=top],
.google-translate-select-zoom-in-top-leave-active[data-popper-placement^=top] {
  transform-origin: center bottom;
}
.google-translate-select-zoom-in-top-enter-from,
.google-translate-select-zoom-in-top-leave-active {
  opacity: 0;
  transform: scaleY(0);
}
.google-translate-select-zoom-in-bottom-enter-active,
.google-translate-select-zoom-in-bottom-leave-active {
  opacity: 1;
  transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
  transition: var(--google-translate-select-transition-md-fade);
  transform: scaleY(1);
  transform-origin: center bottom;
}
.google-translate-select-zoom-in-bottom-enter-from,
.google-translate-select-zoom-in-bottom-leave-active {
  opacity: 0;
  transform: scaleY(0);
}
.google-translate-select-zoom-in-left-enter-active,
.google-translate-select-zoom-in-left-leave-active {
  opacity: 1;
  transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
  transition: var(--google-translate-select-transition-md-fade);
  transform: scale(1, 1);
  transform-origin: top left;
}
.google-translate-select-zoom-in-left-enter-from,
.google-translate-select-zoom-in-left-leave-active {
  opacity: 0;
  transform: scale(.45, .45);
}
:root {
  --google-translate-select-font-size-extra-large:20px;
  --google-translate-select-font-size-large:18px;
  --google-translate-select-font-size-medium:16px;
  --google-translate-select-font-size-base:14px;
  --google-translate-select-font-size-small:13px;
  --google-translate-select-font-size-extra-small:12px;
  --google-translate-select-font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","\5fae\8f6f\96c5\9ed1",Arial,sans-serif;
  --google-translate-select-z-index-normal:1;
  --google-translate-select-z-index-dropdown:10000;
  --google-translate-select-border-radius-base:4px;
  --google-translate-select-border-radius-small:2px;
  --google-translate-select-border-radius-round:20px;
  --google-translate-select-border-radius-circle:100%;
  --google-translate-select-transition-duration:0.3s;
  --google-translate-select-transition-duration-fast:0.2s;
  --google-translate-select-transition-function-ease-in-out-bezier:cubic-bezier(0.645, 0.045, 0.355, 1);
  --google-translate-select-transition-function-fast-bezier:cubic-bezier(0.23, 1, 0.32, 1);
  --google-translate-select-transition-all:all var(--google-translate-select-transition-duration) var(--google-translate-select-transition-function-ease-in-out-bezier);
  --google-translate-select-transition-fade:opacity var(--google-translate-select-transition-duration) var(--google-translate-select-transition-function-fast-bezier);
  --google-translate-select-transition-md-fade:transform var(--google-translate-select-transition-duration) var(--google-translate-select-transition-function-fast-bezier),opacity var(--google-translate-select-transition-duration) var(--google-translate-select-transition-function-fast-bezier);
  --google-translate-select-transition-fade-linear:opacity var(--google-translate-select-transition-duration-fast) linear;
  --google-translate-select-transition-border:border-color var(--google-translate-select-transition-duration-fast) var(--google-translate-select-transition-function-ease-in-out-bezier);
  --google-translate-select-transition-box-shadow:box-shadow var(--google-translate-select-transition-duration-fast) var(--google-translate-select-transition-function-ease-in-out-bezier);
  --google-translate-select-transition-color:color var(--google-translate-select-transition-duration-fast) var(--google-translate-select-transition-function-ease-in-out-bezier);
}
:root {
  --google-translate-select-color-white:#fff;
  --google-translate-select-color-black:#000;
  --google-translate-select-text-color-primary:#303133;
  --google-translate-select-text-color-regular:#606266;
  --google-translate-select-text-color-secondary:#909399;
  --google-translate-select-text-color-placeholder:#a8abb2;
  --google-translate-select-text-color-disabled:#c0c4cc;
  --google-translate-select-border-color:#dcdfe6;
  --google-translate-select-border-color-light:#e4e7ed;
  --google-translate-select-border-color-lighter:#ebeef5;
  --google-translate-select-border-color-extra-light:#f2f6fc;
  --google-translate-select-border-color-dark:#d4d7de;
  --google-translate-select-border-color-darker:#cdd0d6;
  --google-translate-select-fill-color:#f0f2f5;
  --google-translate-select-fill-color-light:#f5f7fa;
  --google-translate-select-fill-color-lighter:#fafafa;
  --google-translate-select-fill-color-extra-light:#fafcff;
  --google-translate-select-fill-color-dark:#ebedf0;
  --google-translate-select-fill-color-darker:#e6e8eb;
  --google-translate-select-fill-color-blank:#fff;
  --google-translate-select-box-shadow:0 12px 32px 4px rgba(0, 0, 0, 0.04),0 8px 20px rgba(0, 0, 0, 0.08);
  --google-translate-select-box-shadow-light:0 0 12px rgba(0, 0, 0, 0.12);
  --google-translate-select-box-shadow-lighter:0 0 6px rgba(0, 0, 0, 0.12);
  --google-translate-select-box-shadow-dark:0 16px 48px 16px rgba(0, 0, 0, 0.08),0 12px 32px rgba(0, 0, 0, 0.12),0 8px 16px -8px rgba(0, 0, 0, 0.16);
  --google-translate-select-disabled-bg-color:var(--google-translate-select-fill-color-light);
  --google-translate-select-disabled-text-color:var(--google-translate-select-text-color-placeholder);
  --google-translate-select-disabled-border-color:var(--google-translate-select-border-color-light);
  --google-translate-select-border-width:1px;
  --google-translate-select-border-style:solid;
  --google-translate-select-border-color-hover:var(--google-translate-select-text-color-disabled);
  --google-translate-select-border:var(--google-translate-select-border-width) var(--google-translate-select-border-style) var(--google-translate-select-border-color);
  color-scheme: light;
}
@keyframes rotating {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.google-translate-select-icon-loading {
  animation: rotating 2s linear infinite;
}
.google-translate-select-icon--right {
  margin-left: 5px;
}
.google-translate-select-icon--left {
  margin-right: 5px;
}
.google-translate-select-icon {
  --color:inherit;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: inherit;
  line-height: 1em;
  color: var(--color);
  fill: currentcolor;
}
.google-translate-select-icon.is-loading {
  animation: rotating 2s linear infinite;
}
.google-translate-select-icon svg {
  width: 1em;
  height: 1em;
}