src/components/Buttons/ButtonHelp/ButtonHelp.module.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highli@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/mixins" as mix;

.icon {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.active {
  .icon {
    color: var(--color-fg-inverted);
  }
}

.wrapper {
  width: fun.convert-px(44);
  height: fun.convert-px(44);
  background: var(--color-bg);
  border: fun.convert-px(3) solid var(--color-primary-dark);
  border-radius: 50%;
  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
  transition: all 0.3s ease-in-out 0s;

  @include mix.pointer("fine") {
    width: fun.convert-px(30);
    height: fun.convert-px(30);
    line-height: 1;
  }

  &:hover,
  &:focus {
    border-color: var(--color-primary-light);
    color: var(--color-primary-light);
    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
        var(--color-shadow-light),
      fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
        var(--color-shadow-light),
      fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
        var(--color-shadow-light),
      fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3)
        var(--color-shadow-light);
    transform: scale(1.1);

    .icon {
      transform: scale(1.1);
    }
  }

  &.active {
    background: var(--color-primary);
  }
}