VKUI/packages/vkui/src/components/Snackbar/subcomponents/Basic/Basic.module.css at 361dd2b9122dafd5450638ff399e8dc014876412 · VKCOM/VKUI · 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
.body {
  --vkui_internal--snackbar-body_layout_vertical_action_shift: calc(
    -1 *
    (
      var(--vkui--size_button_small_height--compact) -
      var(--vkui--font_subhead--line_height--compact)
    ) /
    2
  );

  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-block-size: 56px;
  padding: 12px;
  background: var(--vkui--color_background_contrast_themed);
  border-radius: var(--vkui--size_card_border_radius--regular);
  box-shadow: var(--vkui--elevation4);
}

.densityRegular {
  --vkui_internal--snackbar-body_layout_vertical_action_shift: calc(
    -1 *
    (
      var(--vkui--size_button_small_height--regular) -
      var(--vkui--font_subhead--line_height--regular)
    ) /
    2
  );
}

@media (--density-regular) {
  .densityNone {
    --vkui_internal--snackbar-body_layout_vertical_action_shift: calc(
      -1 *
      (
        var(--vkui--size_button_small_height--regular) -
        var(--vkui--font_subhead--line_height--regular)
      ) /
      2
    );
  }
}

.before {
  margin-inline-end: 12px;
}

.after {
  margin-inline-start: 12px;
}

.content {
  display: flex;
  flex: 1;
  align-items: center;
  word-break: break-word;
}

.contentText {
  display: -webkit-box;
  flex: 1;
  inline-size: 100%;
  overflow: hidden;
  -webkit-line-clamp: 3;
  color: var(--vkui--color_text_primary);
  -webkit-box-orient: vertical;
}

.contentSubtitle {
  margin-block-start: 2px;
  color: var(--vkui--color_text_subhead);
}

/* layout */
.layoutHorizontal .action {
  position: relative;
  margin-inline-start: 12px;
}

.layoutVertical .content {
  flex-direction: column;
  align-items: flex-start;
}

.layoutVertical .action {
  min-block-size: initial;
  margin-block-start: 2px;
  margin-block-end: var(--vkui_internal--snackbar-body_layout_vertical_action_shift);
}

@media (--viewWidth-smallTabletMinus) {
  .layoutNone .action {
    position: relative;
    margin-inline-start: 12px;
  }
}
@media (--viewWidth-smallTabletPlus) {
  .layoutNone .content {
    flex-direction: column;
    align-items: flex-start;
  }

  .layoutNone .action {
    min-block-size: initial;
    margin-block-start: 2px;
    margin-block-end: var(--vkui_internal--snackbar-body_layout_vertical_action_shift);
  }
}