Skip to content

GitLab

D
drupal
Unverified Commit 0ce88217 authored by lauriii's avatar lauriii
1 Browse files
Options

Issue #3001660 by kjay, markconroy, lauriii, shaal, poojakural: Fix Umami's... 

Issue #3001660 by kjay, markconroy, lauriii, shaal, poojakural: Fix Umami's responsive layout styles
parent aa39bb31
Hide whitespace changes
Inline Side-by-side
Showing with 128 additions and 139 deletions
core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
View file @ 0ce88217
......@@ -8,7 +8,7 @@
}
.block-type-banner-block .summary {
margin: 1em;
margin: 1rem 4%;
}
.block-type-banner-block .field--name-field-title {
......@@ -48,7 +48,7 @@
outline-offset: 2px;
background-color: #fcece7;
}
/* Medium */
@media screen and (min-width: 48rem) { /* 768px */
.block-type-banner-block {
background-color: #464646;
......@@ -65,7 +65,7 @@
height: 0; /* Required for flexbox vertical centering in IE11. Min-height will take precedence. */
min-height: 54vw;
margin: 0 auto;
padding: 0 1em;
padding: 0 4%;
}
.block-type-banner-block .summary {
......@@ -91,7 +91,7 @@
word-wrap: normal;
}
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.block-type-banner-block .summary {
flex: 0 0 41%;
......@@ -100,10 +100,9 @@
min-height: 43vw;
}
}
/* 77em == the max width of .container + 1em either side */
@media screen and (min-width: 77rem) {
.block-type-banner-block .summary {
margin-left: -1em;
/* Extra large + side margins */
@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
.block-type-banner-block .block-inner {
padding: 0;
}
}
core/profiles/demo_umami/themes/umami/css/components/blocks/page-title/page-title.css
View file @ 0ce88217
......@@ -13,13 +13,5 @@
.block-page-title-block {
margin: 1rem 0 3rem;
padding: 0 1rem;
text-align: center;
}
/* Large */
@media screen and (min-width: 77rem) { /* 1200px + 2rem */
.block-page-title-block {
padding: 0;
}
}
core/profiles/demo_umami/themes/umami/css/components/blocks/recipe-collections/recipe-collections.css
View file @ 0ce88217
.block-views-blockrecipe-collections-block {
padding: 3rem 1rem;
padding: 3rem 4%;
color: #fff;
background: #767775;
}
......
core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
View file @ 0ce88217
......@@ -3,10 +3,6 @@
* Stylesheet for results generated by the Search module.
*/
.path-search .region-content {
margin: 0 1.28rem;
}
.search-form + .item-list > h3 {
margin: 1.28rem;
}
......
core/profiles/demo_umami/themes/umami/css/components/forms/contact.css
View file @ 0ce88217
......@@ -6,7 +6,6 @@
.contact-form {
max-width: 600px;
margin: auto auto 1rem;
padding: 0 1rem;
}
@media screen and (min-width: 30rem) { /* 480px */
......
core/profiles/demo_umami/themes/umami/css/components/layout_builder/layout-builder.css
View file @ 0ce88217
......@@ -13,20 +13,3 @@
.layout-builder__message--overrides .messages__content {
background-image: url("../../../../../../../misc/icons/73b355/location.svg");
}
.layout-builder-form,
.layout-builder-discard-changes,
.layout-builder-revert-overrides {
margin-right: 1rem;
margin-left: 1rem;
}
/* Large */
@media screen and (min-width: 77rem) { /* 1200px + 2rem */
.layout-builder-form,
.layout-builder-discard-changes,
.layout-builder-revert-overrides {
margin-right: 0;
margin-left: 0;
}
}
core/profiles/demo_umami/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css
View file @ 0ce88217
......@@ -3,15 +3,15 @@
* This file is used to style the breadcrumbs.
*/
.breadcrumb {
padding: 0.79rem 1.266rem;
padding: 0.79rem 4%;
}
.breadcrumb li {
display: inline-block;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
/* Extra large + side margins */
@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
.breadcrumb {
padding-right: 2.37rem;
padding-left: 2.37rem;
padding-right: 0;
padding-left: 0;
}
}
core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
View file @ 0ce88217
......@@ -3,9 +3,6 @@
* Visual styles for tabs.
*/
.layout-tabs {
background-color: #79bd8f;
}
.tabs.primary {
display: flex;
flex-wrap: wrap;
......
core/profiles/demo_umami/themes/umami/css/components/regions/bottom/bottom.css
View file @ 0ce88217
......@@ -5,12 +5,12 @@
.layout-bottom {
overflow: hidden;
padding: 2rem 1rem;
padding: 2rem 4%;
background: #fff;
}
@media screen and (min-width: 75rem) {
/* Extra large + side margins */
@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
.layout-bottom {
padding: 3rem 0;
padding: 2rem 0;
}
}
core/profiles/demo_umami/themes/umami/css/components/regions/footer/footer.css
View file @ 0ce88217
......@@ -7,16 +7,15 @@
*/
.footer {
padding: 2rem 1rem;
padding: 2rem 4%;
text-align: center;
color: #fff;
background-color: #5f635d;
font-size: 0.9rem;
}
@media screen and (min-width: 60rem) {
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.footer {
padding: 1rem 1rem 0;
text-align: left; /* LTR */
}
[dir="rtl"] .footer {
......@@ -27,6 +26,12 @@
justify-content: space-between;
}
}
/* Extra large + side margins */
@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
.footer {
padding: 2rem 0;
}
}
.footer a {
color: #fff;
......
core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css
View file @ 0ce88217
......@@ -16,17 +16,22 @@
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
padding: 0.75rem 4%;
}
@media screen and (min-width: 48em) {
.region-header {
padding: 0 1rem;
padding-top: 0;
}
}
/* 77em == the max width of .container + 1em either side */
@media screen and (min-width: 77em) {
/* Medium */
@media screen and (min-width: 48rem) { /* 768px */
.region-header {
padding-top: 0;
}
}
/* Extra large + side margins */
@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
.region-header {
padding: 0;
}
......
core/profiles/demo_umami/themes/umami/css/components/regions/highlighted/highlighted.css
View file @ 0ce88217
......@@ -5,6 +5,15 @@
*/
.layout-highlighted {
padding: 0 1.26em 1em;
padding: 0 0 1em;
background: #fff;
}
.region-highlighted {
padding: 0 4%;
}
/* Extra large + side margins */
@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
.region-highlighted {
padding: 0;
}
}
core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css
View file @ 0ce88217
......@@ -11,18 +11,18 @@
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
padding: 0.75rem 4%;
border-bottom: 1px solid #e6eee0;
}
@media screen and (min-width: 48em) {
/* Medium */
@media screen and (min-width: 48rem) { /* 768px */
.region-pre-header {
padding: 0 1rem;
padding-top: 0;
padding-bottom: 0;
}
}
/* 77em == the max width of .container + 1em either side */
@media screen and (min-width: 77em) {
/* Extra large + side margins */
@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
.region-pre-header {
padding: 0;
}
......
core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css 0 → 100644
View file @ 0ce88217
/**
* @file
* This file is used to style the tabs region.
*
*/
.layout-tabs {
background-color: #79bd8f;
}
.region-tabs {
padding: 0 4%;
}
/* Extra large + side margins */
@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
.region-tabs {
padding: 0;
}
}
core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css
View file @ 0ce88217
......@@ -3,24 +3,8 @@
* This file is used to style the 'Promoted Items' view.
*/
.block-views-blockpromoted-items-block-1 {
margin-top: 1rem;
}
/* Small */
@media screen and (min-width: 30rem) { /* 480px */
.block-views-blockpromoted-items-block-1 {
margin-top: 2rem;
}
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.block-views-blockpromoted-items-block-1 {
margin-top: 3rem;
}
}
.view-promoted-items--single {
padding: 1rem 14px 2rem;
padding: 1rem 0 2rem;
}
/* Small */
@media screen and (min-width: 30rem) { /* 480px */
......@@ -122,3 +106,16 @@
margin: 0 14px;
}
}
/* For the front page only, apply .container gutters */
.path-frontpage .block-views-blockpromoted-items-block-1 {
max-width: 1200px;
margin: 0 auto;
padding: 0 4%;
}
/* Extra large + side margins */
@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
.path-frontpage .block-views-blockpromoted-items-block-1 {
padding: 0;
}
}
core/profiles/demo_umami/themes/umami/css/layout/grid-2.css
View file @ 0ce88217
......@@ -2,7 +2,10 @@
* @file
* This file is used to create a 2 column grid layout.
*/
.grid--2 .view-content {
margin-right: -14px;
margin-left: -14px;
}
.grid--2 .views-row {
margin-bottom: 28px;
padding: 0 14px;
......@@ -15,7 +18,6 @@
.grid--2 .view-content {
display: flex;
flex-wrap: wrap;
margin: 0;
}
.grid--2 .views-row {
display: flex;
......@@ -26,11 +28,3 @@
padding: 0;
}
}
/* 77em == the max width of .container + 1em either side */
@media screen and (min-width: 77em) {
.grid--2 .view-content {
margin-right: -14px;
margin-left: -14px;
}
}
core/profiles/demo_umami/themes/umami/css/layout/grid-3.css
View file @ 0ce88217
......@@ -5,17 +5,16 @@
.grid--3 .views-row {
margin-bottom: 28px;
padding: 0 14px;
}
@media screen and (min-width: 30em) {
/* Small */
@media screen and (min-width: 30em) { /* 480px */
.grid--3 {
overflow-x: hidden;
}
.grid--3 .view-content {
display: flex;
flex-wrap: wrap;
margin: 0;
margin: 0 -14px;
}
.grid--3 .views-row {
display: flex;
......@@ -26,19 +25,11 @@
padding: 0;
}
}
@media screen and (min-width: 60em) {
/* Large */
@media screen and (min-width: 60em) { /* 960px */
.grid--3 .views-row {
flex-basis: calc(33% - 28px);
flex-basis: calc(33.3% - 28px);
flex-grow: 0;
flex-shrink: 0;
}
}
/* 77em == the max width of .container + 1em either side */
@media screen and (min-width: 77em) {
.grid--3 .view-content {
margin-right: -14px;
margin-left: -14px;
}
}
core/profiles/demo_umami/themes/umami/css/layout/grid-4.css
View file @ 0ce88217
......@@ -5,19 +5,17 @@
.grid--4 .views-row {
margin-bottom: 28px;
padding: 0 14px;
}
@media screen and (min-width: 30em) {
/* Small */
@media screen and (min-width: 30em) { /* 480px */
.grid--4 {
overflow-x: hidden;
}
.grid--4 .view-content {
display: flex;
flex-wrap: wrap;
margin: 0;
margin: 0 -14px;
}
.grid--4 .views-row {
display: flex;
flex-basis: calc(50% - 28px);
......@@ -27,19 +25,11 @@
padding: 0;
}
}
@media screen and (min-width: 60em) {
/* Large */
@media screen and (min-width: 60em) { /* 960px */
.grid--4 .views-row {
flex-basis: calc(25% - 28px);
flex-grow: 0;
flex-shrink: 0;
}
}
/* 77em == the max width of .container + 1em either side */
@media screen and (min-width: 77em) {
.grid--4 .view-content {
margin-right: -14px;
margin-left: -14px;
}
}
core/profiles/demo_umami/themes/umami/css/layout/layout-2-col.css
View file @ 0ce88217
......@@ -2,23 +2,25 @@
* @file
* This file is used to create the layout when the theme has 2 columns.
*/
.layout-sidebar {
margin: 0 1.562rem;
}
@media screen and (min-width: 60em) {
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.two-columns .main {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.two-columns .main .layout-content,
.two-columns .main .layout-sidebar {
flex: 0 1 100%;
}
.two-columns .main .layout-content {
flex: 1 1 75%;
flex: 0 1 72%;
margin-right: 3%; /* LTR */
}
[dir="rtl"] .two-columns .main .layout-content {
margin-right: 0;
margin-left: 3%;
}
.layout-sidebar {
flex: 0 0 25%;
width: 25%;
min-width: 300px;
.two-columns .main .layout-sidebar {
flex: 0 1 25%;
}
}
core/profiles/demo_umami/themes/umami/css/layout/layout.css
View file @ 0ce88217
......@@ -10,3 +10,13 @@
max-width: 1200px;
margin: auto;
}
/* Add responsive side gutters to the outer layout container 'main' at smaller sizes */
.main {
padding: 0 4%;
}
/* Extra large + side margins */
@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
.main {
padding: 0;
}
}
core/profiles/demo_umami/themes/umami/umami.libraries.yml
View file @ 0ce88217
......@@ -39,7 +39,9 @@ global:
css/components/regions/footer/footer.css: {}
css/components/regions/header/header.css: {}
css/components/regions/highlighted/highlighted.css: {}
css/components/regions/page-title/page-title.css: {}
css/components/regions/pre-header/pre-header.css: {}
css/components/regions/tabs/tabs.css: {}
css/components/toolbar/toolbar.css: {}
css/components/layout_builder/layout-builder.css: {}
layout:
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment