1 | body {
|
2 | width: 800px;
|
3 | margin: 0 auto;
|
4 | }
|
5 |
|
6 | @media only screen and (max-width : 400px) {
|
7 | body {
|
8 | width: 360px;
|
9 | margin: 0 auto;
|
10 | }
|
11 | }
|
12 |
|
13 |
|
14 | .text {
|
15 | width: calc(100% - 40px);
|
16 | margin: 20px;
|
17 | }
|
18 |
|
19 | .example {
|
20 | display: flex;
|
21 | flex-wrap: wrap;
|
22 | border: solid 1px darkgray;
|
23 | border-radius: 10px;
|
24 | width: calc(100% - 40px);
|
25 | margin: 20px;
|
26 |
|
27 | }
|
28 |
|
29 | .add-section {
|
30 | display: flex;
|
31 | flex-grow: 2;
|
32 | align-items: center;
|
33 | justify-content: center;
|
34 | width: 100%;
|
35 | border-bottom: solid 1px darkgray;
|
36 | }
|
37 |
|
38 | .add-button {
|
39 | width: 120px;
|
40 | }
|
41 |
|
42 | .circle {
|
43 | border-radius: 50%;
|
44 | width: 25px;
|
45 | height: 25px;
|
46 | margin: 10px;
|
47 | border-radius: 50%;
|
48 | background-color: red;
|
49 | }
|
50 |
|
51 | .square {
|
52 | width: 25px;
|
53 | height: 25px;
|
54 | margin: 10px;
|
55 | background-color: green;
|
56 | }
|
57 |
|
58 | .item-list {
|
59 | box-shadow: inset 0px 0px 5px -1px rgba(0,0,0,0.75);
|
60 | border-bottom-left-radius: 10px;
|
61 | display: inline-block;
|
62 | width: 50%
|
63 | }
|
64 |
|
65 | .item-list ~ .item-list {
|
66 | border-left: solid 1px darkgray;
|
67 | border-bottom-right-radius: 10px;
|
68 | border-bottom-left-radius: 0;
|
69 | }
|
70 |
|
71 | .item-list .counter {
|
72 | display: flex;
|
73 | justify-content: center;
|
74 | border-bottom: solid 1px darkgray;
|
75 | }
|
76 |
|
77 | .item-list .items {
|
78 | display: flex;
|
79 | flex-wrap: wrap;
|
80 | min-height: 10px;
|
81 | padding: 5px;
|
82 | }
|