aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Icons/Moon/Moon.tsx
blob: 26f56a11f3986db04573345be7fc989897bcd54f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { useIntl } from 'react-intl';
import styles from './Moon.module.scss';

const MoonIcon = () => {
  const intl = useIntl();

  return (
    <svg
      className={styles.moon}
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg"
    >
      <title>
        {intl.formatMessage({
          defaultMessage: 'Dark theme',
          description: 'Icons: Moon icon (dark theme)',
          id: 'ode0YK',
        })}
      </title>
      <path d="M 51.077315,1.9893942 A 43.319985,43.319985 0 0 1 72.840039,39.563145 43.319985,43.319985 0 0 1 29.520053,82.88313 43.319985,43.319985 0 0 1 5.4309911,75.569042 48.132997,48.132997 0 0 0 46.126047,98 48.132997,48.132997 0 0 0 94.260004,49.867002 48.132997,48.132997 0 0 0 51.077315,1.9893942 Z" />
    </svg>
  );
};

export default MoonIcon;
/* Literal.Number.Float */ .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */ .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */ .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ .highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */ .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/mixins" as mix;

.wrapper {
  &--inline#{&}--regular {
    .option:first-of-type {
      margin-left: var(--spacing-2xs);
    }
  }

  &--regular {
    .option {
      &:not(:last-of-type) {
        margin-right: var(--spacing-xs);
      }
    }
  }
}

.toggle {
  display: inline-flex;
  flex-flow: row wrap;
  align-items: center;
  width: fit-content;
  position: relative;
  background: var(--color-shadow-light);
  border: fun.convert-px(2) solid var(--color-primary);
  border-radius: fun.convert-px(32);
  box-shadow: inset 0 0 fun.convert-px(1) fun.convert-px(1)
      var(--color-shadow-dark),
    inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-shadow);

  .label {
    display: flex;
    align-items: center;
    min-height: 5ex;
    padding: fun.convert-px(6) var(--spacing-2xs);
    border-top: fun.convert-px(2) solid var(--color-border);
    border-bottom: fun.convert-px(2) solid var(--color-border);
    transition: all 0.15s linear 0s;

    @include mix.pointer("fine") {
      min-height: 3ex;
    }
  }

  &:focus-within {
    outline: fun.convert-px(2) solid var(--color-primary-light);
  }

  .option:first-of-type {
    .label {
      border-left: fun.convert-px(2) solid var(--color-border);
      border-top-left-radius: fun.convert-px(32);
      border-bottom-left-radius: fun.convert-px(32);
    }
  }

  .option:last-of-type {
    .label {
      border-right: fun.convert-px(2) solid var(--color-border);
      border-top-right-radius: fun.convert-px(32);
      border-bottom-right-radius: fun.convert-px(32);
    }
  }

  .radio {
    &:checked + .label {
      background: var(--color-primary);
      box-shadow: inset 0 0 fun.convert-px(1) fun.convert-px(2)
          var(--color-primary-dark),
        inset 0 0 fun.convert-px(3) fun.convert-px(2)
          var(--color-primary-darker);
      color: var(--color-fg-inverted);

      svg {
        fill: var(--color-fg-inverted);
        stroke: var(--color-fg-inverted);
      }
    }

    &:not(:checked) + .label {
      svg {
        fill: var(--color-primary-darker);
      }
    }

    &:checked + .label:hover {
      background: var(--color-primary-lighter);
      box-shadow: inset 0 0 fun.convert-px(1) fun.convert-px(2)
          var(--color-primary-light),
        inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-primary);
    }

    &:not(:checked) + .label:hover {
      background: var(--color-shadow-light);
      box-shadow: inset 0 0 0 fun.convert-px(1) var(--color-shadow-dark),
        inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-shadow);
    }

    &:not(:checked):focus + .label {
      background: var(--color-shadow-light);
    }

    &:checked:focus + .label {
      background: var(--color-primary-lighter);
      box-shadow: inset 0 0 fun.convert-px(1) fun.convert-px(2)
          var(--color-primary-light),
        inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-primary);
    }
  }
}