busola/src/components/KymaModules/KymaModulesAddModule.scss at a807e9f866e3b0a348d20ec8d4a0e9eb8a82dc20 · mrCherry97/busola · 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
105
106
107
108
109
110
.gridbox-addModule {
  --card-width: 350px;

  display: grid;
  grid-template-columns: repeat(auto-fill, var(--card-width));
  grid-template-rows: min-content;
  gap: 16px;

  .gridbox-addModule-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: var(--card-width);
    height: fit-content;

    .addModuleCard {
      --left-spacing: 45px;

      .moduleCardHeader {
        position: relative;
        height: 62.5px;

        .checkbox {
          position: absolute;
          top: 5px;
          left: 7.5px;
        }

        .titles {
          position: absolute;
          top: 12.5px;
          left: var(--left-spacing);
          display: flex;
          flex-direction: column;
          gap: 4px;
        }

        .avatar {
          position: absolute;
          height: 36px;
          top: 10.5px;
          right: 10px;
        }
      }

      .content {
        margin-left: var(--left-spacing);
      }
    }
  }

  .settings-panel {
    width: 350px;

    &::part(header) {
      font-family: var(--sapFontFamily);
      font-size: var(--sapFontSize);
      padding: 0 0.225rem;
      gap: 2.5px;
    }

    &::part(content) {
      padding: 0 var(--left-spacing);
      padding-bottom: 5px;
    }

    &__content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;

      .channel-select {
        width: 100%;
      }
    }
  }
}

@container (max-width: 350px) {
  .gridbox-addModule {
    --card-width: 300px;

    .gridbox-addModule-column {
      .addModuleCard {
        .moduleCardHeader {
          .avatar {
            height: 30px;
          }
        }
      }
    }
  }
}

@container (max-width: 300px) {
  .gridbox-addModule {
    --card-width: 275px;

    .avatar {
      display: none;
    }
  }
}

@container (max-width: 260px) {
  .gridbox-addModule {
    --card-width: 230px;
  }
}