juice-shop

1
/*!
2
 * Copyright (c) 2014-2024 Bjoern Kimminich & the OWASP Juice Shop contributors.
3
 * SPDX-License-Identifier: MIT
4
 */
5

6
$bg-heading: rgba(0, 0, 0, 0.2);
7

8
.table-container {
9
  min-width: 350px;
10
  width: 80%;
11
}
12

13
.heading {
14
  background: $bg-heading;
15
  font-size: x-large;
16
  justify-content: center;
17
  padding: 12px 20px;
18
}
19

20
.img-thumbnail {
21
  width: 100%;
22
}
23

24

25
.product {
26
  cursor: pointer;
27
}
28

29
.btn-basket {
30
  bottom: 10%;
31
}
32

33
mat-card {
34
  height: calc(100% - 70px);
35
}
36

37
.item-price {
38
  font-size: initial;
39
  margin-top: 12px;
40
  text-align: center;
41
}
42

43
.item-name {
44
  font-size: large;
45
  text-align: center;
46
}
47

48
.emptyState {
49
  display: block;
50
  height: auto !important;
51
  margin: 20px auto;
52
  width: 50%;
53
}
54

55
.noResult {
56
  display: block;
57
  margin-left: auto;
58
  margin-right: auto;
59
  width: 60%;
60
}
61

62
.noResultText {
63
  display: block;
64
  margin-top: 10px;
65
  text-align: center;
66
}
67

68
.ribbon-card {
69
  position: relative;
70
}
71

72
.ribbon {
73
  height: 150px;
74
  overflow: hidden;
75
  pointer-events: none;
76
  position: absolute;
77
  width: 150px;
78
}
79

80
.ribbon::before {
81
  content: '';
82
  display: block;
83
  position: absolute;
84
  z-index: -1;
85
}
86

87
.ribbon span {
88
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
89
  color: #fff;
90
  display: block;
91
  font: 700 18px/1 'Lato', sans-serif;
92
  padding: 15px 0;
93
  position: absolute;
94
  text-align: center;
95
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
96
  width: 225px;
97
}
98

99
.ribbon-top-left {
100
  left: -10px;
101
  top: -10px;
102
}
103

104
.ribbon-top-left::before {
105
  border-left-color: transparent;
106
  border-top-color: transparent;
107
  right: 0;
108
  top: 0;
109
}
110

111
.ribbon-top-left span {
112
  right: -25px;
113
  top: 30px;
114
  transform: rotate(-45deg);
115
}
116