webpack.js.org/src/components/Sponsors/Sponsors.scss at cc75d211d0ed7547e737d4bfd9d3d81d20aea8f5 · webpack/webpack.js.org · GitHub

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
@use "../../styles/partials/functions" as *;
@use "../../styles/partials/mixins" as *;

$sponsor-text-color-dark: #cecece;
$sponsor-text-color-light: getColor(emperor);
$background-color-hover: rgb(50, 50, 50);
$link-wrapper-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
$link-wrapper-shadow-dark: 0 3px 10px 0px rgba(255, 255, 255, 0.2);
$link-wrapper-radius: 8px;
$link-wrapper-margin: 8px;
$tagline-font-size: 2em;
$footer-font-size: 1.7em;

[data-theme="dark"] {
  .agGridLogo {
    content: url("../../assets/ag-grid-logo-dark.png");
  }

  .agChartsLogo {
    content: url("../../assets/ag-charts-logo-dark.png");
  }

  .sponsors {
    &__tagline,
    &__footer {
      margin: 1rem 0;
      text-align: center;
      color: $sponsor-text-color-dark;
    }
    &__tagline {
      font-size: $tagline-font-size;
    }
    &__footer {
      font-size: $footer-font-size;
      font-style: italic;
    }
    &__link-wrapper {
      background: rgb(12, 12, 12);
      box-shadow: $link-wrapper-shadow-dark;
      border-radius: $link-wrapper-radius;
      margin: $link-wrapper-margin;
      transition: transform 0.2s;
      &:hover {
        background-color: $background-color-hover;
        transform: scale(1.05);
      }
    }
  }
}

.sponsors {
  position: absolute;
  height: 100%;
  width: 250px;
  margin-left: -250px;
  margin-right: 8px;

  &__link-wrapper {
    box-shadow: $link-wrapper-shadow;
    border-radius: $link-wrapper-radius;
    margin: $link-wrapper-margin;
    transition: transform 0.2s;
    &:hover {
      background-color: getColor(concrete);
      transform: scale(1.05);
    }
  }
  &__tagline,
  &__footer {
    margin: 1rem 0;
    text-align: center;
    color: $sponsor-text-color-light;
  }
  &__tagline {
    font-size: $tagline-font-size;
  }
  &__footer {
    font-size: $footer-font-size;
    font-style: italic;
  }
  &__content {
    position: sticky;
    display: none;
    margin: 1.5em 0;
    top: 6em;
    padding: 0 1.5em 3em;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    border-right: 2px solid getColor(concrete);
    overflow: hidden;
    transition: background-color 250ms;
    @include break(xlarge) {
      display: flex;
    }
  }
  &__img {
    &__wrapper {
      display: flex;
      justify-content: center;
      width: 100%;
    }
  }
}