eSales Media Git repositories
Browse code

Initial commit

Benjamin Roth authored on16/03/2023 20:22:35
Showing1 changed files
files/base/layout/css/shop/basket.scss
History View file @c584c6c
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,242 @@
1 
+// Cart
2 
+#cart,
3 
+.mod_iso_checkout .orderproducts, .mod_iso_favorites,
4 
+.mod_iso_orderdetails {
5 
+  .collection {
6 
+    font-weight: lighter;
7 
+    position: relative;
8 
+    @include font-size(16px);
9 
+    margin-bottom: 2rem;
10 
+
11 
+    @include media-breakpoint-up(lg) {
12 
+      @include font-size(22px);
13 
+    }
14 
+
15 
+    .product {
16 
+      display: flex;
17 
+      flex-wrap: wrap;
18 
+      align-items: flex-end;
19 
+      //margin: 0 -#{$gutter-default/2};
20 
+      padding: calc(2rem / 2) 0;
21 
+      border-top: 1px $primary solid;
22 
+
23 
+      &.row_first {
24 
+        border-top: none;
25 
+        //padding-top: 0px;
26 
+      }
27 
+
28 
+      > *:not([colspan="6"]) {
29 
+        flex: 1;
30 
+        margin: 0 calc(2rem / 4);
31 
+
32 
+        @include media-breakpoint-up(lg) {
33 
+          margin: 0 calc(2rem / 2);
34 
+        }
35 
+      }
36 
+
37 
+      > div[colspan="6"] {
38 
+        width: 100%;
39 
+      }
40 
+
41 
+      ul {
42 
+        list-style-type: none;
43 
+        padding: 0px;
44 
+        margin: 0px;
45 
+
46 
+        li.attribute {
47 
+          &:not(:last-child) {
48 
+            margin-bottom: 10px;
49 
+          }
50 
+        }
51 
+      }
52 
+
53 
+      .image {
54 
+        flex: auto;
55 
+        width: 25%;
56 
+        text-align: center;
57 
+
58 
+        @include media-breakpoint-down(lg) {
59 
+          margin: 0px 0px 1.25rem 0;
60 
+        }
61 
+
62 
+        @include media-breakpoint-up(lg) {
63 
+          flex: 0 0 75px;
64 
+          width: auto;
65 
+        }
66 
+
67 
+        figure {
68 
+          margin-bottom: 0px;
69 
+        }
70 
+      }
71 
+
72 
+      .name {
73 
+        align-self: center;
74 
+        flex: auto;
75 
+        width: 75%;
76 
+        text-align: center;
77 
+
78 
+        @include media-breakpoint-down(lg) {
79 
+          margin: 0px 0px 1.25rem 0;
80 
+          padding-left: 1.5rem;
81 
+        }
82 
+
83 
+        @include media-breakpoint-up(lg) {
84 
+          width: auto;
85 
+          flex-grow: 4;
86 
+        }
87 
+
88 
+        a {
89 
+          text-decoration: none;
90 
+          font-weight: $font-weight-bold;
91 
+          @include font-size(18px);
92 
+        }
93 
+
94 
+        ul {
95 
+          @include font-size(14px);
96 
+          margin-bottom: 0px;
97 
+        }
98 
+      }
99 
+
100 
+      .quantity {
101 
+        label {
102 
+          @include font-size(12px);
103 
+          text-align: center;
104 
+        }
105 
+
106 
+        input {
107 
+          @include font-size(15px);
108 
+          height: 35px;
109 
+          text-align: center;
110 
+          width: 100%;
111 
+        }
112 
+
113 
+        flex: 0 0 3em;
114 
+      }
115 
+
116 
+      .actions {
117 
+        text-align: right;
118 
+        margin-left: 0px;
119 
+        max-width: 40px;
120 
+        width: 40px;
121 
+        margin-bottom: 3px;
122 
+
123 
+        a{
124 
+          text-decoration: none;
125 
+          display: inline-block;
126 
+          vertical-align: middle;
127 
+          & + *{
128 
+            margin-left: .25rem;
129 
+          }
130 
+        }
131 
+      }
132 
+
133 
+      .remove {
134 
+        display: inline-block;
135 
+        color: var(--bs-primary);
136 
+        text-align: right;
137 
+        text-decoration: none;
138 
+      }
139 
+    }
140 
+
141 
+    .price {
142 
+      text-align: right;
143 
+    }
144 
+
145 
+    .summary {
146 
+      display: flex;
147 
+      align-items: flex-start;
148 
+      background-color: var(--bs-gray-100);
149 
+      //margin: 0 -#{$gutter-default/2};
150 
+
151 
+      &.foot_0 {
152 
+        padding-top: calc(2rem / 2);
153 
+        border-top: 2px $primary solid;
154 
+      }
155 
+
156 
+      &.total {
157 
+        font-weight: 700;
158 
+        padding-bottom: 1rem;
159 
+        padding-top: 1rem;
160 
+      }
161 
+
162 
+      > * {
163 
+        flex: 1;
164 
+        margin: 0 calc(2rem / 4);
165 
+
166 
+        @include media-breakpoint-up(lg) {
167 
+          margin: 0 calc(2rem / 2);
168 
+        }
169 
+      }
170 
+
171 
+      .col_0 {
172 
+        flex: 0 0 75px;
173 
+
174 
+        @include media-breakpoint-down(lg) {
175 
+          display: none;
176 
+        }
177 
+      }
178 
+
179 
+      .col_last.remove {
180 
+        max-width: 40px;
181 
+        width: 40px;
182 
+        margin-left: 0rem;
183 
+
184 
+
185 
+        /*
186 
+
187 
+
188 
+        @include media-breakpoint-up(lg) {
189 
+          margin-right: 0.75rem;
190 
+        }
191 
+
192 
+        @include media-breakpoint-up(xl) {
193 
+          margin-right: 1.5rem;
194 
+        }
195 
+
196 
+         */
197 
+
198 
+        @include media-breakpoint-down(lg) {
199 
+          display: none;
200 
+        }
201 
+      }
202 
+
203 
+      .name {
204 
+        flex: 4 1 3em;
205 
+        margin-left: 1rem;
206 
+        text-align: right;
207 
+
208 
+        @include media-breakpoint-up(lg) {
209 
+          margin-left: calc(2rem * 1.5);
210 
+        }
211 
+      }
212 
+    }
213 
+  }
214 
+
215 
+  .submit_container {
216 
+    display: flex;
217 
+    align-items: center;
218 
+
219 
+    button {
220 
+      &.button_update {
221 
+        //@extend .btn, .btn-outline-primary;
222 
+        margin-right: auto;
223 
+      }
224 
+
225 
+      &.button_checkout {
226 
+        //@extend .btn, .btn-outline-primary;
227 
+        margin-left: auto;
228 
+      }
229 
+    }
230 
+
231 
+    @include media-breakpoint-down(lg) {
232 
+      flex-direction: column;
233 
+      align-items: center;
234 
+
235 
+      button {
236 
+        margin: 5px 0 0 !important;
237 
+        width: 100%;
238 
+        max-width: 350px;
239 
+      }
240 
+    }
241 
+  }
242 
+}