diff --git a/assets/admin/css/admin.css b/assets/admin/css/admin.css index 6fc2a4703..5aa836dc3 100644 --- a/assets/admin/css/admin.css +++ b/assets/admin/css/admin.css @@ -3177,7 +3177,7 @@ * */ /* -------------------- Boxes -------------------- */ -.cb-box { +.cb-box, .cb-admin-page .cb-admin-cols div ul li { background: var(--commonsbooking-color-gray-background); overflow: hidden; border-radius: var(--commonsbooking-radius); @@ -3185,7 +3185,7 @@ padding: var(--commonsbooking-spacer-small)/2 var(--commonsbooking-spacer-small); } @media (min-width: 37.5em) { - .cb-box { + .cb-box, .cb-admin-page .cb-admin-cols div ul li { padding: var(--commonsbooking-spacer) var(--commonsbooking-spacer-big); } } diff --git a/assets/admin/sass/partials/_dashboard.scss b/assets/admin/sass/partials/_dashboard.scss index 87fc18de9..86e296248 100644 --- a/assets/admin/sass/partials/_dashboard.scss +++ b/assets/admin/sass/partials/_dashboard.scss @@ -3,6 +3,8 @@ * */ +@use "../../../global/sass/partials/extends"; + .cb-admin-page { .cb-admin-cols { display: flex; @@ -18,7 +20,7 @@ ul { li { margin-top: 15px; - @extend .cb-box !optional; + @extend .cb-box; .cb-summmary-item { font-weight: bold; } diff --git a/assets/public/css/public.css b/assets/public/css/public.css index 418a5645d..72a3a8d47 100644 --- a/assets/public/css/public.css +++ b/assets/public/css/public.css @@ -3176,7 +3176,7 @@ * */ /* -------------------- Boxes -------------------- */ -.cb-box { +.cb-box, .cb-items-table, .cb-wrapper .cb-notice, .cb-map-filters.cb-wrapper, .cb-wrapper .cb-action, .cb-wrapper.template-location-single > div:not(.cb-notice), .cb-wrapper.template-item-single > div:not(.cb-notice), .cb-wrapper.template-booking-single > div:not(.cb-notice), .cb-wrapper { background: var(--commonsbooking-color-gray-background); overflow: hidden; border-radius: var(--commonsbooking-radius); @@ -3184,24 +3184,24 @@ padding: var(--commonsbooking-spacer-small)/2 var(--commonsbooking-spacer-small); } @media (min-width: 37.5em) { - .cb-box { + .cb-box, .cb-items-table, .cb-wrapper .cb-notice, .cb-map-filters.cb-wrapper, .cb-wrapper .cb-action, .cb-wrapper.template-location-single > div:not(.cb-notice), .cb-wrapper.template-item-single > div:not(.cb-notice), .cb-wrapper.template-booking-single > div:not(.cb-notice), .cb-wrapper { padding: var(--commonsbooking-spacer) var(--commonsbooking-spacer-big); } } -.cb-box-inner { +.cb-box-inner, .litepicker .container__months, .cb-wrapper #booking-form .time-selection-container > div, .cb-wrapper > .cb-wrapper { background: #FFF; border-radius: var(--commonsbooking-radius); padding: var(--commonsbooking-spacer-small); } @media (min-width: 37.5em) { - .cb-box-inner { + .cb-box-inner, .litepicker .container__months, .cb-wrapper #booking-form .time-selection-container > div, .cb-wrapper > .cb-wrapper { padding: var(--commonsbooking-spacer); } } /* -------------------- Typography -------------------- */ -.cb-big { +.cb-big, .cb-map-filters.cb-wrapper .cb-map-filter-group-label { font-size: var(--commonsbooking-font-size-big); font-weight: bold; } @@ -3211,7 +3211,7 @@ box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, 0.22); } -.shadow-small, .cb-button[disabled=disabled], .cb-button-container a[disabled=disabled], .cb-button:hover, .cb-button-container a:hover, .cb-hover { +.shadow-small, .cb-button[disabled=disabled], .cb-map-filters.cb-wrapper .cb-map-button-wrapper button[disabled=disabled], .cb-wrapper .cb-action input[disabled=disabled], .cb-wrapper #booking-form input[disabled=disabled], .cb-button-container a[disabled=disabled], .cb-button:hover, .cb-map-filters.cb-wrapper .cb-map-button-wrapper button:hover, .cb-wrapper .cb-action input:hover, .cb-wrapper #booking-form input:hover, .cb-button-container a:hover, .cb-hover { box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1); } @@ -3225,7 +3225,7 @@ } /* -------------------- Buttons -------------------- */ -.cb-button, .cb-button-container a { +.cb-button, .cb-map-filters.cb-wrapper .cb-map-button-wrapper button, .cb-wrapper .cb-action input, .cb-wrapper #booking-form input, .cb-button-container a { border-radius: var(--commonsbooking-radius); font-size: var(--commonsbooking-font-size-normal); line-height: var(--commonsbooking-font-size-normal); @@ -3238,43 +3238,43 @@ padding: var(--commonsbooking-spacer) var(--commonsbooking-spacer-big); font-weight: bold; } -.cb-button.small, .cb-button-container a.small { +.cb-button.small, .cb-map-filters.cb-wrapper .cb-map-button-wrapper button.small, .cb-wrapper .cb-action input.small, .cb-wrapper #booking-form input.small, .cb-button-container a.small { padding: var(--commonsbooking-spacer); font-size: var(--commonsbooking-font-size-small); } -.cb-button:hover, .cb-button-container a:hover { +.cb-button:hover, .cb-map-filters.cb-wrapper .cb-map-button-wrapper button:hover, .cb-wrapper .cb-action input:hover, .cb-wrapper #booking-form input:hover, .cb-button-container a:hover { background: var(--commonsbooking-color-secondary); color: #FFF; /* Various themes fix */ } -.cb-button:visited, .cb-button-container a:visited { +.cb-button:visited, .cb-map-filters.cb-wrapper .cb-map-button-wrapper button:visited, .cb-wrapper .cb-action input:visited, .cb-wrapper #booking-form input:visited, .cb-button-container a:visited { color: #FFF; } -.cb-button.big, .cb-button-container a.big { +.cb-button.big, .cb-map-filters.cb-wrapper .cb-map-button-wrapper button.big, .cb-wrapper .cb-action input.big, .cb-wrapper #booking-form input.big, .cb-button-container a.big { padding: var(--commonsbooking-spacer) var(--commonsbooking-spacer-big); font-size: var(--commonsbooking-font-size-big); line-height: var(--commonsbooking-font-size-big); } -.cb-button.secondary, .cb-button-container a.secondary { +.cb-button.secondary, .cb-map-filters.cb-wrapper .cb-map-button-wrapper button.secondary, .cb-wrapper .cb-action input.secondary, .cb-wrapper #booking-form input.secondary, .cb-button-container a.secondary { background-color: #FFF; color: var(--commonsbooking-color-error); } -.cb-button.cancel, .cb-button-container a.cancel { +.cb-button.cancel, .cb-map-filters.cb-wrapper .cb-map-button-wrapper button.cancel, .cb-wrapper .cb-action input.cancel, .cb-wrapper #booking-form input.cancel, .cb-button-container a.cancel { background-color: var(--commonsbooking-color-error); } -.cb-button.confirm, .cb-button-container a.confirm { +.cb-button.confirm, .cb-map-filters.cb-wrapper .cb-map-button-wrapper button.confirm, .cb-wrapper .cb-action input.confirm, .cb-wrapper #booking-form input.confirm, .cb-button-container a.confirm { background-color: var(--commonsbooking-color-success); } -.cb-button.delete, .cb-button-container a.delete { +.cb-button.delete, .cb-map-filters.cb-wrapper .cb-map-button-wrapper button.delete, .cb-wrapper .cb-action input.delete, .cb-wrapper #booking-form input.delete, .cb-button-container a.delete { background-color: var(--commonsbooking-color-error); } -.cb-button[disabled=disabled], .cb-button-container a[disabled=disabled] { +.cb-button[disabled=disabled], .cb-map-filters.cb-wrapper .cb-map-button-wrapper button[disabled=disabled], .cb-wrapper .cb-action input[disabled=disabled], .cb-wrapper #booking-form input[disabled=disabled], .cb-button-container a[disabled=disabled] { background-color: var(--commonsbooking-color-greyedout); color: var(--commonsbooking-textcolor-light); } -.cb-button.no-right-radius, .cb-button-container a.no-right-radius { +.cb-button.no-right-radius, .cb-map-filters.cb-wrapper .cb-map-button-wrapper button.no-right-radius, .cb-wrapper .cb-action input.no-right-radius, .cb-wrapper #booking-form input.no-right-radius, .cb-button-container a.no-right-radius { border-radius: var(--commonsbooking-radius) 0; } -.cb-button.no-left-radius, .cb-button-container a.no-left-radius { +.cb-button.no-left-radius, .cb-map-filters.cb-wrapper .cb-map-button-wrapper button.no-left-radius, .cb-wrapper .cb-action input.no-left-radius, .cb-wrapper #booking-form input.no-left-radius, .cb-button-container a.no-left-radius { border-radius: 0 var(--commonsbooking-radius); } @@ -3357,69 +3357,92 @@ } } -.cb-col-50-50-filter > div { +.cb-col-50-50-filter > div, .cb-map-filters.cb-wrapper .cb-map-availability-filter .cb-map-filter-group > div, +.cb-map-filters.cb-wrapper .cb-map-distance-filter .cb-map-filter-group > div { margin-bottom: var(--commonsbooking-spacer); width: 100%; display: flex; align-items: center; flex-wrap: nowrap; } -.cb-col-50-50-filter > div label { +.cb-col-50-50-filter > div label, .cb-map-filters.cb-wrapper .cb-map-availability-filter .cb-map-filter-group > div label, +.cb-map-filters.cb-wrapper .cb-map-distance-filter .cb-map-filter-group > div label { flex: 0 0 30%; } -.cb-col-50-50-filter > div input { +.cb-col-50-50-filter > div input, .cb-map-filters.cb-wrapper .cb-map-availability-filter .cb-map-filter-group > div input, +.cb-map-filters.cb-wrapper .cb-map-distance-filter .cb-map-filter-group > div input { flex: 0 1 50%; } @media (min-width: 37.5em) { - .cb-col-50-50-filter { + .cb-col-50-50-filter, .cb-map-filters.cb-wrapper .cb-map-availability-filter .cb-map-filter-group, + .cb-map-filters.cb-wrapper .cb-map-distance-filter .cb-map-filter-group { display: flex; justify-content: space-between; flex-direction: row; align-items: center; flex-wrap: wrap; } - .cb-col-50-50-filter > div { + .cb-col-50-50-filter > div, .cb-map-filters.cb-wrapper .cb-map-availability-filter .cb-map-filter-group > div, + .cb-map-filters.cb-wrapper .cb-map-distance-filter .cb-map-filter-group > div { width: 50%; } } -.cb-col-auto { /* 2 fixed cols, 1 flexible in the middle */ +.cb-col-auto, .cb-wrapper .template-timeframe-withitem, +.cb-wrapper .template-timeframe-withlocation, +.cb-wrapper .template-item-withlocation, .cb-wrapper .cb-list-header { /* 2 fixed cols, 1 flexible in the middle */ display: flex; flex-direction: row; flex-wrap: wrap; } -.cb-col-auto > div.cb-thumbnail { +.cb-col-auto > div.cb-thumbnail, .cb-wrapper .template-timeframe-withitem > div.cb-thumbnail, +.cb-wrapper .template-timeframe-withlocation > div.cb-thumbnail, +.cb-wrapper .template-item-withlocation > div.cb-thumbnail, .cb-wrapper .cb-list-header > div.cb-thumbnail { flex: 0 0 20%; padding-right: var(--commonsbooking-spacer-big); } -.cb-col-auto > div.cb-list-info { +.cb-col-auto > div.cb-list-info, .cb-wrapper .template-timeframe-withitem > div.cb-list-info, +.cb-wrapper .template-timeframe-withlocation > div.cb-list-info, +.cb-wrapper .template-item-withlocation > div.cb-list-info, .cb-wrapper .cb-list-header > div.cb-list-info { flex: 1 0 50%; border: none; } -.cb-col-auto > div.cb-action { /* optional */ +.cb-col-auto > div.cb-action, .cb-wrapper .template-timeframe-withitem > div.cb-action, +.cb-wrapper .template-timeframe-withlocation > div.cb-action, +.cb-wrapper .template-item-withlocation > div.cb-action, .cb-wrapper .cb-list-header > div.cb-action { /* optional */ flex: 0 0 100%; text-align: right; } @media (min-width: 37.5em) { - .cb-col-auto { + .cb-col-auto, .cb-wrapper .template-timeframe-withitem, + .cb-wrapper .template-timeframe-withlocation, + .cb-wrapper .template-item-withlocation, .cb-wrapper .cb-list-header { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: nowrap; align-items: center; } - .cb-col-auto > div.cb-thumbnail { + .cb-col-auto > div.cb-thumbnail, .cb-wrapper .template-timeframe-withitem > div.cb-thumbnail, + .cb-wrapper .template-timeframe-withlocation > div.cb-thumbnail, + .cb-wrapper .template-item-withlocation > div.cb-thumbnail, .cb-wrapper .cb-list-header > div.cb-thumbnail { flex: 0 0 20%; padding-right: var(--commonsbooking-spacer-big); } - .cb-col-auto > div.cb-list-info { + .cb-col-auto > div.cb-list-info, .cb-wrapper .template-timeframe-withitem > div.cb-list-info, + .cb-wrapper .template-timeframe-withlocation > div.cb-list-info, + .cb-wrapper .template-item-withlocation > div.cb-list-info, .cb-wrapper .cb-list-header > div.cb-list-info { flex: 1 1 auto; border: none; } - .cb-col-auto > div.cb-action { + .cb-col-auto > div.cb-action, .cb-wrapper .template-timeframe-withitem > div.cb-action, + .cb-wrapper .template-timeframe-withlocation > div.cb-action, + .cb-wrapper .template-item-withlocation > div.cb-action, .cb-wrapper .cb-list-header > div.cb-action { flex: 1 0 auto; } - .cb-col-auto > div.cb-action a { + .cb-col-auto > div.cb-action a, .cb-wrapper .template-timeframe-withitem > div.cb-action a, + .cb-wrapper .template-timeframe-withlocation > div.cb-action a, + .cb-wrapper .template-item-withlocation > div.cb-action a, .cb-wrapper .cb-list-header > div.cb-action a { width: auto; } } @@ -3445,6 +3468,7 @@ } /* List styles */ +/* Multi-column layouts */ /** * List styling * @@ -4099,6 +4123,7 @@ } /* Map styles */ +/* Multi-column layouts */ /** * Map + Leaflet Filter Styling * diff --git a/assets/public/sass/partials/_calendar.scss b/assets/public/sass/partials/_calendar.scss index 633aa8095..e94ca2bb4 100644 --- a/assets/public/sass/partials/_calendar.scss +++ b/assets/public/sass/partials/_calendar.scss @@ -5,6 +5,7 @@ * */ @use "../mixins/calendar"; +@use "../../../global/sass/partials/extends"; :root { --litepickerBgColor: transparent; @@ -72,7 +73,7 @@ } &__months { - @extend .cb-box-inner !optional; + @extend .cb-box-inner; background: transparent; box-shadow: none; diff --git a/assets/public/sass/partials/_forms.scss b/assets/public/sass/partials/_forms.scss index e3393ed78..bb4b07d60 100644 --- a/assets/public/sass/partials/_forms.scss +++ b/assets/public/sass/partials/_forms.scss @@ -11,6 +11,7 @@ */ @use "../../../global/sass/partials/variables"; +@use "../../../global/sass/partials/extends"; .cb-wrapper { @@ -57,12 +58,12 @@ } .cb-action { - @extend .cb-box !optional; + @extend .cb-box; text-align: right; input { - @extend .cb-button !optional; + @extend .cb-button; float: right; } @@ -115,7 +116,7 @@ width: 100%; /* do not extend litepicker width */ color: var(--commonsbooking-textcolor-dark); input { - @extend .cb-button !optional; + @extend .cb-button; float: right; } @@ -131,7 +132,7 @@ display: flex; align-items: center; - @extend .cb-box-inner !optional; + @extend .cb-box-inner; margin-bottom: var(--commonsbooking-spacer); text-align: left; overflow: hidden; @@ -169,7 +170,7 @@ } .cb-notice { - @extend .cb-box !optional; + @extend .cb-box; margin-bottom: var(--commonsbooking-spacer-big); font-size: var(--commonsbooking-font-size-big); vertical-align: middle; diff --git a/assets/public/sass/partials/_lists.scss b/assets/public/sass/partials/_lists.scss index 91f988702..4c69ff3cd 100644 --- a/assets/public/sass/partials/_lists.scss +++ b/assets/public/sass/partials/_lists.scss @@ -11,6 +11,9 @@ * @copyright 2020 wielebenwir */ +@use "../../../global/sass/partials/extends"; +@use "layouts"; + /* main wrapper */ .cb-wrapper { @@ -19,7 +22,7 @@ display: block; margin-top: var(--commonsbooking-spacer-big); color: var(--commonsbooking-textcolor-dark); - @extend .cb-box !optional;; + @extend .cb-box ; .cb-list-content.cb-pickupinstructions div { white-space: pre-wrap; // enable line break in content from meta textfields @@ -56,7 +59,7 @@ /* sub lists wrapper */ > .cb-wrapper { overflow: hidden; - @extend .cb-box-inner !optional;; + @extend .cb-box-inner ; > div { /* sub list items */ @@ -71,10 +74,10 @@ .template-timeframe-withlocation, .template-item-withlocation { - @extend .cb-col-auto !optional;; + @extend .cb-col-auto ; } .cb-list-header { - @extend .cb-col-auto !optional;; + @extend .cb-col-auto ; } .cb-list-header img{ diff --git a/assets/public/sass/partials/_map.scss b/assets/public/sass/partials/_map.scss index 4ef9b0ed3..7c44fdec7 100644 --- a/assets/public/sass/partials/_map.scss +++ b/assets/public/sass/partials/_map.scss @@ -13,6 +13,8 @@ */ @use "../../../global/sass/partials/variables"; +@use "../../../global/sass/partials/extends"; +@use "layouts"; .cb-wrapper { @@ -149,7 +151,7 @@ .cb-map-filters.cb-wrapper { margin-top: var(--commonsbooking-spacer); - @extend .cb-box !optional; + @extend .cb-box; input[type="checkbox"] { margin: 0 var(--commonsbooking-spacer-small) 0 0; @@ -180,7 +182,7 @@ } .cb-map-filter-group-label { - @extend .cb-big !optional; + @extend .cb-big; color: var(--commonsbooking-color-primary); margin-bottom: var(--commonsbooking-spacer-small); } @@ -190,7 +192,7 @@ .cb-map-availability-filter, .cb-map-distance-filter { .cb-map-filter-group { - @extend .cb-col-50-50-filter !optional; + @extend .cb-col-50-50-filter; } } @@ -247,7 +249,7 @@ .cb-map-button-wrapper { text-align: right; button { - @extend .cb-button !optional; + @extend .cb-button; } } } diff --git a/assets/public/sass/partials/_notice.scss b/assets/public/sass/partials/_notice.scss index 5bd50be87..2e99a2aca 100644 --- a/assets/public/sass/partials/_notice.scss +++ b/assets/public/sass/partials/_notice.scss @@ -6,9 +6,11 @@ * */ +@use "../../../global/sass/partials/extends"; + .cb-wrapper { .cb-notice { - @extend .cb-box !optional; + @extend .cb-box; margin-bottom: var(--commonsbooking-spacer-big); font-size: var(--commonsbooking-font-size-big); vertical-align: middle; diff --git a/assets/public/sass/partials/_shortcodeItemsTable.scss b/assets/public/sass/partials/_shortcodeItemsTable.scss index 4cdb4a744..4eb1abdb8 100644 --- a/assets/public/sass/partials/_shortcodeItemsTable.scss +++ b/assets/public/sass/partials/_shortcodeItemsTable.scss @@ -13,6 +13,7 @@ */ @use "../../../global/sass/partials/variables"; +@use "../../../global/sass/partials/extends"; @use "../../../public/sass/mixins/calendar"; .cb-table-scroll { @@ -21,7 +22,7 @@ } .cb-items-table { - @extend .cb-box !optional; + @extend .cb-box; overflow: auto; /* overwriting cb-box standard behaviour */ padding: 0; /* overwriting cb-box standard behaviour */ width: 100%; diff --git a/assets/public/sass/partials/_single.scss b/assets/public/sass/partials/_single.scss index e8307e5fb..4de2109b7 100644 --- a/assets/public/sass/partials/_single.scss +++ b/assets/public/sass/partials/_single.scss @@ -3,6 +3,8 @@ * */ +@use "../../../global/sass/partials/extends"; + .cb-wrapper { /* invert the color scheme from the lists: wrapper has no bg, sub-wrapper colored */ &.template-location-single, @@ -11,7 +13,7 @@ background: transparent; padding: 0; > div:not(.cb-notice) { - @extend .cb-box !optional; + @extend .cb-box; > div { /* sub list items */ &:last-of-type { border-bottom: 0;