@licklist/design 0.58.3-dev.7 → 0.58.3-dev.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/iframe/event/event-card/IframeEventCard.d.ts.map +1 -1
  2. package/dist/iframe/event/event-card/IframeEventCard.js +1 -1
  3. package/dist/styles/iframe-events/Card.scss +5 -2
  4. package/dist/styles/iframe-events/PoweredBy.scss +2 -2
  5. package/dist/styles/iframe-order-process/IframeOrderProcess.scss +0 -2
  6. package/dist/styles/iframe-page/PageBody.scss +32 -12
  7. package/dist/styles/iframe-page/PageHeader.scss +41 -39
  8. package/package.json +1 -1
  9. package/src/iframe/event/event-card/IframeEventCard.tsx +4 -8
  10. package/src/styles/iframe-events/Card.scss +5 -2
  11. package/src/styles/iframe-events/PoweredBy.scss +2 -2
  12. package/src/styles/iframe-order-process/IframeOrderProcess.scss +0 -2
  13. package/src/styles/iframe-page/PageBody.scss +32 -12
  14. package/src/styles/iframe-page/PageHeader.scss +41 -39
package/dist/iframe/event/event-card/IframeEventCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IframeEventCard.d.ts","sourceRoot":"","sources":["../../../../src/iframe/event/event-card/IframeEventCard.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,OAAO,EAAE,MAAM,2DAA2D,CAAC;AASpF,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,cAAc,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAW,EACX,UAAkB,EAClB,SAAS,EACT,SAAS,EACT,OAAO,EACP,aAAa,EACb,cAAc,EACd,YAAY,GACb,EAAE,oBAAoB,eA8FtB"}
1
+ {"version":3,"file":"IframeEventCard.d.ts","sourceRoot":"","sources":["../../../../src/iframe/event/event-card/IframeEventCard.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,OAAO,EAAE,MAAM,2DAA2D,CAAC;AASpF,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,cAAc,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAW,EACX,UAAkB,EAClB,SAAS,EACT,SAAS,EACT,OAAO,EACP,aAAa,EACb,cAAc,EACd,YAAY,GACb,EAAE,oBAAoB,eA0FtB"}
package/dist/iframe/event/event-card/IframeEventCard.js CHANGED
@@ -1 +1 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),a=require("react-i18next"),r=require("react-bootstrap"),i=e(require("clsx")),c=require("react-intl"),s=require("../../../tiptap-editor/TipTapEditor.js"),l=require("../../../events/event-card/utils.js"),n=require("../../../assets/iframe/clock.svg.js"),m=require("../../../assets/iframe/calendar.svg.js"),d=require("../../../assets/iframe/ticket.svg.js");exports.IframeEventCard=function(e){var o=e.title,v=e.type,u=e.cost,f=e.date,p=e.imageSrc,E=e.colour,N=e.goToDetails,g=e.description,_=e.isListView,C=void 0!==_&&_,b=e.className,x=e.shortDate,w=e.titleId,T=e.descriptionId,q=e.imageClassName,y=e.showMoreInfo,j=c.useIntl().formatNumber,I=a.useTranslation("Design").t;return t.createElement(r.Card,{style:{"--card-colour":E},className:i("iframe-event-card",{"list-view":C},b),onClick:N?function(){N&&N()}:void 0},y&&t.createElement("div",{className:"iframe-event-card__info-icon"},"i"),p&&t.createElement(r.Card.Img,{className:null!=q?q:"card-image",variant:"top",as:"div",style:{backgroundImage:'url("'.concat(p,'")')}}),t.createElement(r.Card.Body,{className:i("d-flex","flex-column",!p&&"no-image")},t.createElement(r.Card.Title,{className:"iframe-event-card__title",id:w},o),t.createElement("div",{className:"flex-grow-1 iframe-event-card__description"},t.createElement(r.Card.Text,{as:"div"},t.createElement("div",{className:"d-flex align-items-center mb-3"},t.createElement("div",{className:"icon-wrapper"},t.createElement(m.ReactComponent,null)),t.createElement("p",{className:"iframe-event-card__bold m-0 list-view-hided"},f),t.createElement("p",{className:"iframe-event-card__bold m-0 grid-view-hided"},x))),v&&t.createElement(r.Card.Text,{as:"div",className:"list-view-hided"},t.createElement("div",{className:"d-flex align-items-center mb-3"},t.createElement("div",{className:"icon-wrapper"},t.createElement(n.ReactComponent,null)),t.createElement("p",{className:"iframe-event-card__bold m-0"},v))),"number"==typeof u&&t.createElement(r.Card.Text,{as:"div"},t.createElement("div",{className:"d-flex align-items-center mb-3"},t.createElement("div",{className:"icon-wrapper"},t.createElement(d.ReactComponent,null)),t.createElement("p",{className:"iframe-event-card__bold m-0"},I("from")," ",j(u,{style:"currency",currency:"GBP"})))),g&&t.createElement(r.Card.Text,{as:"div",className:"list-view-hided"},t.createElement(s.TipTapEditor,{viewMode:!0,disabled:!0,content:l.formatContent(g,150),id:T})))))};
1
+ "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),a=require("react-i18next"),r=require("react-bootstrap"),i=e(require("clsx")),s=require("react-intl"),c=require("../../../tiptap-editor/TipTapEditor.js"),l=require("../../../events/event-card/utils.js"),n=require("../../../assets/iframe/clock.svg.js"),m=require("../../../assets/iframe/calendar.svg.js"),d=require("../../../assets/iframe/ticket.svg.js");exports.IframeEventCard=function(e){var o=e.title,u=e.type,v=e.cost,p=e.date,f=e.imageSrc,E=e.colour,N=e.goToDetails,g=e.description,C=e.isListView,x=void 0!==C&&C,w=e.className,T=e.shortDate,b=e.titleId,q=e.descriptionId,y=e.imageClassName,_=e.showMoreInfo,j=s.useIntl().formatNumber,I=a.useTranslation("Design").t;return t.createElement(r.Card,{style:{"--card-colour":E},className:i("iframe-event-card",{"list-view":x},w),onClick:N?function(){N&&N()}:void 0},_&&t.createElement("div",{className:"iframe-event-card__info-icon"},"i"),f&&t.createElement(r.Card.Img,{className:null!=y?y:"card-image",variant:"top",as:"div",style:{backgroundImage:'url("'.concat(f,'")')}}),t.createElement(r.Card.Body,{className:i("d-flex","flex-column",!f&&"no-image")},t.createElement(r.Card.Title,{className:"iframe-event-card__title",id:b},o),t.createElement("div",{className:"flex-grow-1 iframe-event-card__description"},t.createElement(r.Card.Text,{as:"div"},t.createElement("div",{className:"d-flex align-items-center mb-3"},t.createElement("div",{className:"icon-wrapper"},t.createElement(m.ReactComponent,null)),t.createElement("p",{className:"m-0 list-view-hided"},p),t.createElement("p",{className:"m-0 grid-view-hided"},T))),u&&t.createElement(r.Card.Text,{as:"div",className:"list-view-hided"},t.createElement("div",{className:"d-flex align-items-center mb-3"},t.createElement("div",{className:"icon-wrapper"},t.createElement(n.ReactComponent,null)),t.createElement("p",{className:"m-0"},u))),"number"==typeof v&&t.createElement(r.Card.Text,{as:"div"},t.createElement("div",{className:"d-flex align-items-center mb-3"},t.createElement("div",{className:"icon-wrapper"},t.createElement(d.ReactComponent,null)),t.createElement("p",{className:"m-0"},I("from")," ",j(v,{style:"currency",currency:"GBP"})))),g&&t.createElement(r.Card.Text,{as:"div",className:"list-view-hided"},t.createElement(c.TipTapEditor,{viewMode:!0,disabled:!0,content:l.formatContent(g,150),id:q})))))};
package/dist/styles/iframe-events/Card.scss CHANGED
@@ -19,12 +19,15 @@
19
19
  background-size: cover;
20
20
  background-position: center;
21
21
  cursor: pointer;
22
- border: 1px solid transparent;
23
22
  border-radius: 0.5rem;
24
23
  }
25
24
 
26
25
  .card-body {
27
- padding: 0.5rem 0 0.875rem;
26
+ padding: 0.5rem 0 0.875rem 0;
27
+
28
+ @include media-breakpoint-down(sm) {
29
+ padding: 1rem 0;
30
+ }
28
31
  }
29
32
 
30
33
  &__info-icon {
package/dist/styles/iframe-events/PoweredBy.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  display: flex;
4
4
  align-items: center;
5
5
  justify-content: space-between;
6
- padding: 0 0.75rem;
6
+ padding: 0 0.75rem 0 2rem;
7
7
  height: 2rem;
8
8
  width: 100%;
9
9
  font-size: 0.75rem;
@@ -27,4 +27,4 @@
27
27
  color: $blue;
28
28
  }
29
29
  }
30
- }
30
+ }
package/dist/styles/iframe-order-process/IframeOrderProcess.scss CHANGED
@@ -58,8 +58,6 @@
58
58
 
59
59
  .payment-booking-summary {
60
60
  transition: $color-transition;
61
- background-color: transparent;
62
- border: 1px solid transparent;
63
61
  border-radius: $iframe-border-radius;
64
62
  font-weight: 400;
65
63
  font-size: 0.875rem;
package/dist/styles/iframe-page/PageBody.scss CHANGED
@@ -12,9 +12,6 @@
12
12
  .left-block {
13
13
  flex: 1;
14
14
  align-items: stretch;
15
- border-radius: 0.5rem;
16
- border-bottom-left-radius: 0;
17
- border-bottom-right-radius: 0;
18
15
  padding: 1rem;
19
16
  background-color: $snippet-page-body-left-block-background-color;
20
17
  border: 0;
@@ -29,16 +26,14 @@
29
26
  .navigation {
30
27
  font-size: 1.125rem;
31
28
  font-weight: 500;
32
- padding-bottom: 2.625rem;
29
+ margin-bottom: 1.25rem;
33
30
  display: flex;
34
31
  align-items: flex-start;
35
32
  justify-content: space-between;
36
- margin-top: 0.125rem;
37
-
38
33
  .title {
39
- position: absolute;
40
34
  color: $snippet-elements-body-color;
41
35
  margin: 0;
36
+ margin-top: 0.125rem;
42
37
  }
43
38
 
44
39
  @include media-breakpoint-down(sm) {
@@ -82,8 +77,6 @@
82
77
  }
83
78
 
84
79
  .right-block {
85
- margin-left: 1rem;
86
- border-radius: 0.5rem;
87
80
  height: calc(100% - 1rem);
88
81
  max-width: 17.5rem;
89
82
  min-width: 17.5rem;
@@ -126,7 +119,7 @@
126
119
  }
127
120
 
128
121
  @include media-breakpoint-down(sm) {
129
- max-height: 7.5rem;
122
+ max-height: 100%;
130
123
  }
131
124
  }
132
125
  .collapse-with-people-input {
@@ -152,8 +145,14 @@
152
145
  }
153
146
 
154
147
  .iframe-event-card {
155
- background-color: transparent;
156
- border-color: transparent;
148
+ border: none;
149
+
150
+ .card-image {
151
+ border-radius: 0;
152
+ }
153
+ .card-body {
154
+ padding-left: 1rem;
155
+ }
157
156
  }
158
157
 
159
158
  .price {
@@ -263,3 +262,24 @@
263
262
  }
264
263
  }
265
264
  }
265
+
266
+ .event-list-page-body {
267
+ overflow: auto;
268
+ .left-block {
269
+ .navigation {
270
+ font-size: 1.125rem;
271
+ font-weight: 500;
272
+ padding-bottom: 2.625rem;
273
+ display: flex;
274
+ align-items: flex-start;
275
+ justify-content: space-between;
276
+ margin-top: 0.125rem;
277
+
278
+ .title {
279
+ position: absolute;
280
+ color: $snippet-elements-body-color;
281
+ margin: 0;
282
+ }
283
+ }
284
+ }
285
+ }
package/dist/styles/iframe-page/PageHeader.scss CHANGED
@@ -20,55 +20,57 @@ $base-height: 2.5rem;
20
20
  transition: $color-transition;
21
21
  border: 0;
22
22
  }
23
+ }
24
+ }
23
25
 
24
- .button-wrapper {
25
- background-color: $snippet-page-header-steps-close-button-background-color;
26
- height: $base-height;
26
+ .iframe-page {
27
+ .button-wrapper {
28
+ background-color: $snippet-page-header-steps-close-button-background-color;
29
+ height: $base-height;
30
+ width: $base-height;
31
+ border-radius: $base-height;
32
+ transition: $color-transition;
33
+
34
+ .close-button {
35
+ font-size: 1.25rem;
27
36
  width: $base-height;
28
- border-radius: $base-height;
37
+ height: $base-height;
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ color: $snippet-page-header-steps-close-button-border-color;
29
42
  transition: $color-transition;
30
43
 
31
- .close-button {
32
- font-size: 1.25rem;
33
- width: $base-height;
34
- height: $base-height;
35
- display: flex;
36
- align-items: center;
37
- justify-content: center;
38
- color: $snippet-page-header-steps-close-button-border-color;
39
- transition: $color-transition;
40
-
41
- &:hover {
42
- cursor: pointer;
43
- }
44
+ &:hover {
45
+ cursor: pointer;
44
46
  }
47
+ }
45
48
 
46
- &.close-button {
47
- margin-left: 1rem;
48
- }
49
+ &.close-button {
50
+ margin-left: 1rem;
51
+ }
49
52
 
50
- .back-button {
51
- font-size: 2rem;
52
- width: $base-height;
53
- height: $base-height;
54
- display: flex;
55
- align-items: center;
56
- justify-content: center;
57
- font-weight: lighter;
58
- color: $snippet-page-header-steps-close-button-border-color;
59
- transition: $color-transition;
53
+ .back-button {
54
+ font-size: 2rem;
55
+ width: $base-height;
56
+ height: $base-height;
57
+ display: flex;
58
+ align-items: center;
59
+ justify-content: center;
60
+ font-weight: lighter;
61
+ color: $snippet-page-header-steps-close-button-border-color;
62
+ transition: $color-transition;
60
63
 
61
- &:hover {
62
- cursor: pointer;
63
- }
64
+ &:hover {
65
+ cursor: pointer;
64
66
  }
67
+ }
65
68
 
66
- &.back-button {
67
- display: flex;
68
- align-items: center;
69
- justify-content: center;
70
- margin-right: 1rem;
71
- }
69
+ &.back-button {
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ margin-right: 1rem;
72
74
  }
73
75
  }
74
76
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@licklist/design",
3
- "version": "0.58.3-dev.7",
3
+ "version": "0.58.3-dev.8",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
package/src/iframe/event/event-card/IframeEventCard.tsx CHANGED
@@ -94,12 +94,8 @@ export function IframeEventCard({
94
94
  <div className="icon-wrapper">
95
95
  <CalendarSvg />
96
96
  </div>
97
- <p className="iframe-event-card__bold m-0 list-view-hided">
98
- {date}
99
- </p>
100
- <p className="iframe-event-card__bold m-0 grid-view-hided">
101
- {shortDate}
102
- </p>
97
+ <p className="m-0 list-view-hided">{date}</p>
98
+ <p className="m-0 grid-view-hided">{shortDate}</p>
103
99
  </div>
104
100
  </Card.Text>
105
101
 
@@ -109,7 +105,7 @@ export function IframeEventCard({
109
105
  <div className="icon-wrapper">
110
106
  <ClockSvg />
111
107
  </div>
112
- <p className="iframe-event-card__bold m-0">{type}</p>
108
+ <p className="m-0">{type}</p>
113
109
  </div>
114
110
  </Card.Text>
115
111
  )}
@@ -120,7 +116,7 @@ export function IframeEventCard({
120
116
  <div className="icon-wrapper">
121
117
  <TicketSvg />
122
118
  </div>
123
- <p className="iframe-event-card__bold m-0">
119
+ <p className="m-0">
124
120
  {t("from")}{" "}
125
121
  {formatNumber(cost, { style: "currency", currency: "GBP" })}
126
122
  </p>
package/src/styles/iframe-events/Card.scss CHANGED
@@ -19,12 +19,15 @@
19
19
  background-size: cover;
20
20
  background-position: center;
21
21
  cursor: pointer;
22
- border: 1px solid transparent;
23
22
  border-radius: 0.5rem;
24
23
  }
25
24
 
26
25
  .card-body {
27
- padding: 0.5rem 0 0.875rem;
26
+ padding: 0.5rem 0 0.875rem 0;
27
+
28
+ @include media-breakpoint-down(sm) {
29
+ padding: 1rem 0;
30
+ }
28
31
  }
29
32
 
30
33
  &__info-icon {
package/src/styles/iframe-events/PoweredBy.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  display: flex;
4
4
  align-items: center;
5
5
  justify-content: space-between;
6
- padding: 0 0.75rem;
6
+ padding: 0 0.75rem 0 2rem;
7
7
  height: 2rem;
8
8
  width: 100%;
9
9
  font-size: 0.75rem;
@@ -27,4 +27,4 @@
27
27
  color: $blue;
28
28
  }
29
29
  }
30
- }
30
+ }
package/src/styles/iframe-order-process/IframeOrderProcess.scss CHANGED
@@ -58,8 +58,6 @@
58
58
 
59
59
  .payment-booking-summary {
60
60
  transition: $color-transition;
61
- background-color: transparent;
62
- border: 1px solid transparent;
63
61
  border-radius: $iframe-border-radius;
64
62
  font-weight: 400;
65
63
  font-size: 0.875rem;
package/src/styles/iframe-page/PageBody.scss CHANGED
@@ -12,9 +12,6 @@
12
12
  .left-block {
13
13
  flex: 1;
14
14
  align-items: stretch;
15
- border-radius: 0.5rem;
16
- border-bottom-left-radius: 0;
17
- border-bottom-right-radius: 0;
18
15
  padding: 1rem;
19
16
  background-color: $snippet-page-body-left-block-background-color;
20
17
  border: 0;
@@ -29,16 +26,14 @@
29
26
  .navigation {
30
27
  font-size: 1.125rem;
31
28
  font-weight: 500;
32
- padding-bottom: 2.625rem;
29
+ margin-bottom: 1.25rem;
33
30
  display: flex;
34
31
  align-items: flex-start;
35
32
  justify-content: space-between;
36
- margin-top: 0.125rem;
37
-
38
33
  .title {
39
- position: absolute;
40
34
  color: $snippet-elements-body-color;
41
35
  margin: 0;
36
+ margin-top: 0.125rem;
42
37
  }
43
38
 
44
39
  @include media-breakpoint-down(sm) {
@@ -82,8 +77,6 @@
82
77
  }
83
78
 
84
79
  .right-block {
85
- margin-left: 1rem;
86
- border-radius: 0.5rem;
87
80
  height: calc(100% - 1rem);
88
81
  max-width: 17.5rem;
89
82
  min-width: 17.5rem;
@@ -126,7 +119,7 @@
126
119
  }
127
120
 
128
121
  @include media-breakpoint-down(sm) {
129
- max-height: 7.5rem;
122
+ max-height: 100%;
130
123
  }
131
124
  }
132
125
  .collapse-with-people-input {
@@ -152,8 +145,14 @@
152
145
  }
153
146
 
154
147
  .iframe-event-card {
155
- background-color: transparent;
156
- border-color: transparent;
148
+ border: none;
149
+
150
+ .card-image {
151
+ border-radius: 0;
152
+ }
153
+ .card-body {
154
+ padding-left: 1rem;
155
+ }
157
156
  }
158
157
 
159
158
  .price {
@@ -263,3 +262,24 @@
263
262
  }
264
263
  }
265
264
  }
265
+
266
+ .event-list-page-body {
267
+ overflow: auto;
268
+ .left-block {
269
+ .navigation {
270
+ font-size: 1.125rem;
271
+ font-weight: 500;
272
+ padding-bottom: 2.625rem;
273
+ display: flex;
274
+ align-items: flex-start;
275
+ justify-content: space-between;
276
+ margin-top: 0.125rem;
277
+
278
+ .title {
279
+ position: absolute;
280
+ color: $snippet-elements-body-color;
281
+ margin: 0;
282
+ }
283
+ }
284
+ }
285
+ }
package/src/styles/iframe-page/PageHeader.scss CHANGED
@@ -20,55 +20,57 @@ $base-height: 2.5rem;
20
20
  transition: $color-transition;
21
21
  border: 0;
22
22
  }
23
+ }
24
+ }
23
25
 
24
- .button-wrapper {
25
- background-color: $snippet-page-header-steps-close-button-background-color;
26
- height: $base-height;
26
+ .iframe-page {
27
+ .button-wrapper {
28
+ background-color: $snippet-page-header-steps-close-button-background-color;
29
+ height: $base-height;
30
+ width: $base-height;
31
+ border-radius: $base-height;
32
+ transition: $color-transition;
33
+
34
+ .close-button {
35
+ font-size: 1.25rem;
27
36
  width: $base-height;
28
- border-radius: $base-height;
37
+ height: $base-height;
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ color: $snippet-page-header-steps-close-button-border-color;
29
42
  transition: $color-transition;
30
43
 
31
- .close-button {
32
- font-size: 1.25rem;
33
- width: $base-height;
34
- height: $base-height;
35
- display: flex;
36
- align-items: center;
37
- justify-content: center;
38
- color: $snippet-page-header-steps-close-button-border-color;
39
- transition: $color-transition;
40
-
41
- &:hover {
42
- cursor: pointer;
43
- }
44
+ &:hover {
45
+ cursor: pointer;
44
46
  }
47
+ }
45
48
 
46
- &.close-button {
47
- margin-left: 1rem;
48
- }
49
+ &.close-button {
50
+ margin-left: 1rem;
51
+ }
49
52
 
50
- .back-button {
51
- font-size: 2rem;
52
- width: $base-height;
53
- height: $base-height;
54
- display: flex;
55
- align-items: center;
56
- justify-content: center;
57
- font-weight: lighter;
58
- color: $snippet-page-header-steps-close-button-border-color;
59
- transition: $color-transition;
53
+ .back-button {
54
+ font-size: 2rem;
55
+ width: $base-height;
56
+ height: $base-height;
57
+ display: flex;
58
+ align-items: center;
59
+ justify-content: center;
60
+ font-weight: lighter;
61
+ color: $snippet-page-header-steps-close-button-border-color;
62
+ transition: $color-transition;
60
63
 
61
- &:hover {
62
- cursor: pointer;
63
- }
64
+ &:hover {
65
+ cursor: pointer;
64
66
  }
67
+ }
65
68
 
66
- &.back-button {
67
- display: flex;
68
- align-items: center;
69
- justify-content: center;
70
- margin-right: 1rem;
71
- }
69
+ &.back-button {
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ margin-right: 1rem;
72
74
  }
73
75
  }
74
76
  }