diff --git a/css/styles.css b/css/styles.css index 7523ef0e03676b98bca85a7b12adec3ca1ab99f7..3bbad073ebe243977d5a72a172871a2c9181a79d 100644 --- a/css/styles.css +++ b/css/styles.css @@ -3623,7 +3623,7 @@ button[disabled] { .uw-cta__center-wrapper { align-items: center; - display: flex; + display: inline-flex; -ms-flex-align: center; flex-direction: row; flex-wrap: wrap; @@ -3636,7 +3636,6 @@ button[disabled] { .uw-cta { clear: both; height: 100%; - padding: 1.5rem; width: 100%; } .uw-cta.uw-contained-width { @@ -3653,16 +3652,21 @@ button[disabled] { } } .uw-cta .uw-cta__aside { background-color: #000; + border: 1px solid #fff; flex: 1 0 100%; } @media (min-width: 40.06rem) { .uw-cta .uw-cta__aside { flex: 1 0 50%; } } -@media (min-width: 40.06rem) { +@media (min-width: 63.1875rem) { .uw-cta .uw-cta__aside { flex: 1 0 30%; } } +@media (min-width: 102.5rem) { + .uw-cta .uw-cta__aside { + flex: 1 0 25%; +} } .uw-cta .uw-cta__aside:last-child { margin: 0; } @@ -3713,63 +3717,54 @@ button[disabled] { } .call-to-action-theme-neutral { - border: 1px solid #fff; display: table-cell; margin: 1px; vertical-align: middle; } .call-to-action-theme-org-default { - border: 1px solid #fff; display: table-cell; margin: 1px; vertical-align: middle; } .call-to-action-theme-org-ahs { - border: 1px solid #fff; display: table-cell; margin: 1px; vertical-align: middle; } .call-to-action-theme-org-art { - border: 1px solid #fff; display: table-cell; margin: 1px; vertical-align: middle; } .call-to-action-theme-org-eng { - border: 1px solid #fff; display: table-cell; margin: 1px; vertical-align: middle; } .call-to-action-theme-org-env { - border: 1px solid #fff; display: table-cell; margin: 1px; vertical-align: middle; } .call-to-action-theme-org-mat { - border: 1px solid #fff; display: table-cell; margin: 1px; vertical-align: middle; } .call-to-action-theme-org-sci { - border: 1px solid #fff; display: table-cell; margin: 1px; vertical-align: middle; } .call-to-action-theme-org-school { - border: 1px solid #fff; display: table-cell; margin: 1px; vertical-align: middle; diff --git a/source/_patterns/04-components/call-to-action/_call-to-action.scss b/source/_patterns/04-components/call-to-action/_call-to-action.scss index d29a8844a0f8350c5d8f29a2a109ef09f69c7650..0edc6854c2097560e6030a3edc61fd9b6182cb41 100644 --- a/source/_patterns/04-components/call-to-action/_call-to-action.scss +++ b/source/_patterns/04-components/call-to-action/_call-to-action.scss @@ -52,7 +52,7 @@ $faculties: 'neutral', 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env' } .uw-cta__center-wrapper { align-items: center; - display: flex; + display: inline-flex; -ms-flex-align: center; flex-direction: row; flex-wrap: wrap; @@ -64,7 +64,6 @@ $faculties: 'neutral', 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env' .uw-cta { clear: both; height: 100%; - padding: rem(gesso-spacing(md)); width: 100%; &.uw-contained-width { @@ -74,13 +73,17 @@ $faculties: 'neutral', 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env' .uw-cta__aside { background-color: $uw-black; + border: 1px solid #fff; flex: 1 0 100%; @include small{ flex: 1 0 50%; } - @include small{ + @include large{ flex: 1 0 30%; } + @include xxl{ + flex: 1 0 25%; + } } .uw-cta__aside:last-child { @@ -138,7 +141,7 @@ $faculties: 'neutral', 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env' } @each $faculty in $faculties { .call-to-action-theme-#{$faculty}{ - border: 1px solid #fff; + display: table-cell; margin: 1px; vertical-align: middle;