From dd0fff1e788ca5119328d92b1ad5404b3466444e Mon Sep 17 00:00:00 2001 From: Rich Lott / Artful Robot Date: Thu, 29 Feb 2024 13:27:10 +0000 Subject: [PATCH 1/3] Make compile-to-css.sh echo OK or Failed so you know if it worked --- compile-sass-to-css.sh | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/compile-sass-to-css.sh b/compile-sass-to-css.sh index 14ea3fb2c..054138237 100755 --- a/compile-sass-to-css.sh +++ b/compile-sass-to-css.sh @@ -24,4 +24,5 @@ fi node_modules/.bin/sass \ sass/mosaico-bootstrap.scss:css/mosaico-bootstrap.css \ - sass/legacy.scss:css/legacy.css + sass/legacy.scss:css/legacy.css \ + && echo "OK" || echo "Failed" From 7d61d37c5c5acde6bd42f3c72a011a1f3ed5a0e0 Mon Sep 17 00:00:00 2001 From: Rich Lott / Artful Robot Date: Thu, 29 Feb 2024 13:27:51 +0000 Subject: [PATCH 2/3] Fix #630 --- sass/mosaico-bootstrap/_template-item.scss | 37 +++++++++++----------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/sass/mosaico-bootstrap/_template-item.scss b/sass/mosaico-bootstrap/_template-item.scss index ae834802f..4a91b828a 100644 --- a/sass/mosaico-bootstrap/_template-item.scss +++ b/sass/mosaico-bootstrap/_template-item.scss @@ -1,8 +1,8 @@ -.crm-mosaico-selected.center-block { + +#bootstrap-theme .crm-mosaico-selected.center-block { float: none; .crm-mosaico-template-item { - .crm-mosaico-template-image-wrapper { height: 275px; } @@ -10,17 +10,22 @@ } } -.crm-mosaico-template-item { - background: $crm-mosaico-template-item; - border: 2px solid $crm-white; - border-radius: 4px; - margin: auto; - opacity: 1; - width: 165px; - margin-bottom: 30px; +.mosaico-templates-list { + margin-top: 2rem; +} +#bootstrap-theme .crm-mosaico-template-item { + // Override a very general #bootstrap-theme.thumbnail rule &.thumbnail { padding: 0; + display: flex; + width: 100%; + background: $crm-mosaico-template-item; + border: 2px solid $crm-white; + border-radius: 4px; + margin: auto; + opacity: 1; + margin-bottom: 30px; } &:hover { @@ -38,9 +43,10 @@ .crm-mosaico-template-image-wrapper { background: $crm-mosaico-template-item-wrapper; - height: 200px; + flex: 0 0 160px; overflow: hidden; position: relative; + height: 275px; img { height: auto !important; @@ -85,8 +91,8 @@ padding: 10px 5px; position: relative; vertical-align: middle; - text-align: center; text-decoration: none; + flex: 1 0 160px; small { display: block; @@ -94,12 +100,5 @@ margin-top: 3px; } - p { - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - width: 160px; - } } } From 1497a922443b842a00fbff25eca7fea1a4f16a7b Mon Sep 17 00:00:00 2001 From: Rich Lott / Artful Robot Date: Thu, 29 Feb 2024 13:27:59 +0000 Subject: [PATCH 3/3] compile CSS --- css/mosaico-bootstrap.css | 51 +++++++++++++++++------------------ css/mosaico-bootstrap.css.map | 2 +- 2 files changed, 25 insertions(+), 28 deletions(-) diff --git a/css/mosaico-bootstrap.css b/css/mosaico-bootstrap.css index 0542e7831..21e1836e4 100644 --- a/css/mosaico-bootstrap.css +++ b/css/mosaico-bootstrap.css @@ -139,45 +139,49 @@ div[ng-controller=PreviewMailingDialogCtrl] iframe.resized { z-index: -1; } -.crm-mosaico-selected.center-block { +#bootstrap-theme .crm-mosaico-selected.center-block { float: none; } -.crm-mosaico-selected.center-block .crm-mosaico-template-item .crm-mosaico-template-image-wrapper { +#bootstrap-theme .crm-mosaico-selected.center-block .crm-mosaico-template-item .crm-mosaico-template-image-wrapper { height: 275px; } -.crm-mosaico-template-item { +.mosaico-templates-list { + margin-top: 2rem; +} + +#bootstrap-theme .crm-mosaico-template-item.thumbnail { + padding: 0; + display: flex; + width: 100%; background: #f3f6f7; border: 2px solid #fff; border-radius: 4px; margin: auto; opacity: 1; - width: 165px; margin-bottom: 30px; } -.crm-mosaico-template-item.thumbnail { - padding: 0; -} -.crm-mosaico-template-item:hover { +#bootstrap-theme .crm-mosaico-template-item:hover { border: 2px solid #0071bd; box-shadow: inset 0 1px 10px 0 rgba(0, 0, 0, 0.25); } -.crm-mosaico-template-item:hover .crm-mosaico-template-actions { +#bootstrap-theme .crm-mosaico-template-item:hover .crm-mosaico-template-actions { opacity: 1; } -.crm-mosaico-template-item:hover img { +#bootstrap-theme .crm-mosaico-template-item:hover img { opacity: 0.66; } -.crm-mosaico-template-item .crm-mosaico-template-image-wrapper { +#bootstrap-theme .crm-mosaico-template-item .crm-mosaico-template-image-wrapper { background: #333; - height: 200px; + flex: 0 0 160px; overflow: hidden; position: relative; + height: 275px; } -.crm-mosaico-template-item .crm-mosaico-template-image-wrapper img { +#bootstrap-theme .crm-mosaico-template-item .crm-mosaico-template-image-wrapper img { height: auto !important; } -.crm-mosaico-template-item .crm-mosaico-template-actions-wrapper { +#bootstrap-theme .crm-mosaico-template-item .crm-mosaico-template-actions-wrapper { bottom: 0; display: table; height: 100%; @@ -188,21 +192,21 @@ div[ng-controller=PreviewMailingDialogCtrl] iframe.resized { top: 0; width: 100%; } -.crm-mosaico-template-item .crm-mosaico-template-actions { +#bootstrap-theme .crm-mosaico-template-item .crm-mosaico-template-actions { display: table-cell; opacity: 0; transition: opacity 400ms; vertical-align: middle; } -.crm-mosaico-template-item .crm-mosaico-template-image-wrapper .crm-mosaico-template-actions .btn { +#bootstrap-theme .crm-mosaico-template-item .crm-mosaico-template-image-wrapper .crm-mosaico-template-actions .btn { float: none !important; margin-bottom: 7px; width: 63%; } -.crm-mosaico-template-item .crm-mosaico-template-image-wrapper .crm-mosaico-template-actions .btn:last-child { +#bootstrap-theme .crm-mosaico-template-item .crm-mosaico-template-image-wrapper .crm-mosaico-template-actions .btn:last-child { margin-bottom: 0; } -.crm-mosaico-template-item .crm-mosaico-template-title-wrapper { +#bootstrap-theme .crm-mosaico-template-item .crm-mosaico-template-title-wrapper { border: 1px solid #e8eef0; color: #464354; font-weight: 600; @@ -211,21 +215,14 @@ div[ng-controller=PreviewMailingDialogCtrl] iframe.resized { padding: 10px 5px; position: relative; vertical-align: middle; - text-align: center; text-decoration: none; + flex: 1 0 160px; } -.crm-mosaico-template-item .crm-mosaico-template-title-wrapper small { +#bootstrap-theme .crm-mosaico-template-item .crm-mosaico-template-title-wrapper small { display: block; font-weight: 400; margin-top: 3px; } -.crm-mosaico-template-item .crm-mosaico-template-title-wrapper p { - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - width: 160px; -} .crmMosaico-schedule-inner { margin: 15px 0; diff --git a/css/mosaico-bootstrap.css.map b/css/mosaico-bootstrap.css.map index a6c1669e7..1e13d07bf 100644 --- a/css/mosaico-bootstrap.css.map +++ b/css/mosaico-bootstrap.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../org.civicrm.shoreditch/scss/bootstrap/mixins/_utility.scss","../sass/classes.scss","../org.civicrm.shoreditch/scss/bootstrap/overrides/_variables.scss","../sass/civicrm-override/_form.scss","../sass/_variables.scss","../sass/mosaico-bootstrap/_wizard.scss","../sass/mosaico-bootstrap/_template-item.scss","../sass/mosaico-bootstrap/_schedule.scss","../sass/mosaico-bootstrap/_form.scss","../sass/mosaico-bootstrap/_panels.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAoBA;AAAA;AAAA;AChCA;EACE;;;AAGF;EACE;;;AAGF;EACE,OC6C0B;;;ACnDxB;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE,kBClBoC;EDmBpC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKJ;EACE,ODKwB;;ACF1B;EACE,YDgBwB;;ACZxB;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAMJ;AAAA;AAAA;EAGE,ODxBsB;ECyBtB,aDiDwB;EChDxB,WD8BoB;EC7BpB;EACA;;AAGF;EACE,ODrBsB;ECsBtB;;AAGF;EACE;;AAGF;EACE;;AAKF;AAAA;AAAA;EAGE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;;AE1GJ;EACE;;AAGE;EACE;;AAGF;EACE;;AAGF;EACE,OHiCsB;;AG9BxB;EACE;;AAMF;EACE;;AAGF;EACE,ODToC;;ACYtC;EACE;;AAGF;EACE;;;AAKN;EACE;;;AAGF;EACE;EACA;EACA;;;AChDF;EACE;;AAIE;EACE;;;AAMN;EACE,YJoC0B;EInC1B;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA,YFnBsC;;AEqBtC;EACE;;AAGF;EACE;;AAIJ;EACE,YFhCsC;EEiCtC;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA,OJlCwB;EImCxB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrGN;EACE;;;AAGF;EACE;;;AAIA;EACE;;;ACTF;EACE;;AAGF;EACE;;AAIA;EAKE;;AAIJ;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;ACjCJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE,YPDW;;AOGX;EACE;EACA;;AAEA;EACE","file":"mosaico-bootstrap.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../org.civicrm.shoreditch/scss/bootstrap/mixins/_utility.scss","../sass/classes.scss","../org.civicrm.shoreditch/scss/bootstrap/overrides/_variables.scss","../sass/civicrm-override/_form.scss","../sass/_variables.scss","../sass/mosaico-bootstrap/_wizard.scss","../sass/mosaico-bootstrap/_template-item.scss","../sass/mosaico-bootstrap/_schedule.scss","../sass/mosaico-bootstrap/_form.scss","../sass/mosaico-bootstrap/_panels.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAoBA;AAAA;AAAA;AChCA;EACE;;;AAGF;EACE;;;AAGF;EACE,OC6C0B;;;ACnDxB;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE,kBClBoC;EDmBpC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKJ;EACE,ODKwB;;ACF1B;EACE,YDgBwB;;ACZxB;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAMJ;AAAA;AAAA;EAGE,ODxBsB;ECyBtB,aDiDwB;EChDxB,WD8BoB;EC7BpB;EACA;;AAGF;EACE,ODrBsB;ECsBtB;;AAGF;EACE;;AAGF;EACE;;AAKF;AAAA;AAAA;EAGE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;;AE1GJ;EACE;;AAGE;EACE;;AAGF;EACE;;AAGF;EACE,OHiCsB;;AG9BxB;EACE;;AAMF;EACE;;AAGF;EACE,ODToC;;ACYtC;EACE;;AAGF;EACE;;;AAKN;EACE;;;AAGF;EACE;EACA;EACA;;;AC/CF;EACE;;AAGE;EACE;;;AAMN;EACE;;;AAKA;EACE;EACA;EACA;EACA,YJ2BwB;EI1BxB;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA,YFxBsC;;AE0BtC;EACE;;AAGF;EACE;;AAIJ;EACE,YFrCsC;EEsCtC;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA,OJxCwB;EIyCxB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;ACnGN;EACE;;;AAGF;EACE;;;AAIA;EACE;;;ACTF;EACE;;AAGF;EACE;;AAIA;EAKE;;AAIJ;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;ACjCJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE,YPDW;;AOGX;EACE;EACA;;AAEA;EACE","file":"mosaico-bootstrap.css"} \ No newline at end of file