Skip to content
Snippets Groups Projects
Commit c8ec0cd3 authored by Alex Pott's avatar Alex Pott
Browse files

Issue #2399709 by DickJohnson, idebr, LewisNyman: Remove media.css from... 

Issue #2399709 by DickJohnson, idebr, LewisNyman: Remove media.css from Bartik, add it's current code directly to the components it references
parent 6d75fd57
No related branches found
No related tags found
2 merge requests!7452Issue #1797438. HTML5 validation is preventing form submit and not fully...,!789Issue #3210310: Adjust Database API to remove deprecated Drupal 9 code in Drupal 10
Show whitespace changes
Inline Side-by-side
Showing
with 186 additions and 175 deletions
core/themes/bartik/bartik.libraries.yml
+ 0
− 1
View file @ c8ec0cd3
......@@ -41,7 +41,6 @@ global-styling:
css/components/vertical-tabs.component.css: {}
css/components/views.css: {}
css/components/buttons.css: {}
css/components/media.css: {}
css/colors.css: {}
css/print.css: { media: print }
......
core/themes/bartik/css/components/featured.css
+ 10
− 0
View file @ c8ec0cd3
......@@ -12,10 +12,20 @@
border-bottom: 1px solid #e7e7e7;
text-shadow: 1px 1px #fff;
}
@media all and (min-width: 520px) {
#featured {
font-size: 1.643em;
}
}
#featured h2 {
font-size: 1.2em;
line-height: 1;
}
@media all and (min-width: 520px) {
#featured h2 {
font-size: 1.174em;
}
}
#featured p {
margin: 0;
padding: 0;
......
core/themes/bartik/css/components/form.css
+ 11
− 0
View file @ c8ec0cd3
......@@ -62,6 +62,17 @@ input,
textarea {
font-size: 0.929em;
}
/**
* Make the font slightly bigger in mobile
* @todo: check the correct font-size
*/
@media screen and (max-width: 60em) { /* 920px */
input,
textarea {
font-size: 1.142857143em;
}
}
textarea {
line-height: 1.5;
}
......
core/themes/bartik/css/components/header.css
+ 43
− 2
View file @ c8ec0cd3
......@@ -8,7 +8,26 @@
[dir="rtl"] .site-logo {
padding: 4px 9px 4px 4px;
}
@media all and (min-width: 461px) and (max-width: 900px) {
#logo,
.site-logo {
padding: 5px 0 0 5px; /* LTR */
}
[dir="rtl"] #logo,
[dir="rtl"] .site-logo {
padding: 5px 5px 0 0;
}
}
@media all and (min-width: 901px) {
#logo,
.site-logo {
padding: 9px 4px 4px 9px; /* LTR */
}
[dir="rtl"] #logo,
[dir="rtl"] .site-logo {
padding: 9px 9px 4px 4px;
}
}
#name-and-slogan,
.site-branding-text {
float: left; /* LTR */
......@@ -19,13 +38,35 @@
[dir="rtl"] .site-branding-text {
margin: 0 15px 30px 0;
}
@media all and (min-width: 461px) and (max-width: 900px) {
#name-and-slogan,
.site-branding-text {
padding: 10px 10px 8px;
}
}
@media all and (min-width: 901px) {
#name-and-slogan,
.site-branding-text {
padding: 26px 0 0;
margin: 0 0 30px 15px; /* LTR */
}
[dir="rtl"] #name-and-slogan,
[dir="rtl"] .site-branding-text {
margin: 0 15px 30px 0;
}
}
#site-name,
.site-name {
font-size: 1.6em;
color: #686868;
line-height: 1;
}
@media all and (min-width: 901px) {
#site-name,
.site-name {
font-size: 1.821em;
}
}
h1#site-name,
h1.site-name {
margin: 0;
......
core/themes/bartik/css/components/media.css deleted 100644 → 0
+ 0
− 172
View file @ 6d75fd57
/* ----------- media queries ------------------------------- */
@media all and (min-width: 461px) and (max-width: 900px) {
/* ------------ Header and Menus -------------------------- */
.region-header {
margin: .5em 5px .75em;
}
#logo,
.site-logo {
padding: 5px 0 0 5px; /* LTR */
}
[dir="rtl"] #logo,
[dir="rtl"] .site-logo {
padding: 5px 5px 0 0;
}
#name-and-slogan,
.site-branding-text {
padding: 10px 10px 8px;
}
.region-primary-menu .menu {
margin: 0 5px;
padding: 0;
text-align: center;
}
.region-primary-menu .menu li,
body:not(:target) .region-primary-menu .menu li {
float: left; /* LTR */
margin-right: 5px; /* LTR */
padding: 0;
display: inline-block;
width: 32.75%;
height: auto;
overflow: visible;
}
[dir="rtl"] .region-primary-menu .menu li,
[dir="rtl"] body:not(:target) .region-primary-menu .menu li {
float: right;
margin-left: 5px;
margin-right: 0;
}
.region-primary-menu .menu li:nth-child(3n) {
margin-right: -5px; /* LTR */
}
[dir="rtl"] .region-primary-menu .menu li:nth-child(3n) {
margin-left: -5px;
margin-right: 0;
}
.region-primary-menu .menu a {
float: none;
display: block;
border-radius: 8px;
margin-bottom: 5px;
padding: 0.9em 5px;
}
body:not(:target) .region-primary-menu .menu-toggle {
display: none;
}
}
@media all and (min-width: 901px) {
.region-header {
margin: 1em 5px 1.5em;
}
#logo,
.site-logo {
padding: 9px 4px 4px 9px; /* LTR */
}
[dir="rtl"] #logo,
[dir="rtl"] .site-logo {
padding: 9px 9px 4px 4px;
}
#name-and-slogan,
.site-branding-text {
padding: 26px 0 0;
margin: 0 0 30px 15px; /* LTR */
}
[dir="rtl"] #name-and-slogan,
[dir="rtl"] .site-branding-text {
margin: 0 15px 30px 0;
}
#site-name,
.site-name {
font-size: 1.821em;
}
.region-primary-menu .block-menu .menu {
font-size: 0.929em;
margin: 0;
padding: 0 15px;
}
.region-primary-menu .menu li,
body:not(:target) .region-primary-menu .menu li {
float: left; /* LTR */
list-style: none;
padding: 0 1px;
margin: 0 1px;
width: auto;
height: auto;
overflow: visible;
}
[dir="rtl"] .region-primary-menu .menu li,
[dir="rtl"] body:not(:target) .region-primary-menu .menu li {
float: right;
}
.region-primary-menu .menu a {
float: left; /* LTR */
padding: 0.7em 0.8em;
margin-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
[dir="rtl"] .region-primary-menu .menu a {
float: right;
padding: 0.7em 0.8em;
}
.featured .region-primary-menu .menu li a:active,
.featured .region-primary-menu .menu li a.active {
background: #f0f0f0;
background: rgba(240, 240, 240, 1.0);
}
body:not(:target) .region-primary-menu .menu-toggle {
display: none;
}
}
@media all and (min-width: 520px) {
/* ----------------- Featured ----------------- */
#featured {
font-size: 1.643em;
}
#featured h2 {
font-size: 1.174em;
}
/* ------------------ Triptych ----------------- */
#triptych h2 {
font-size: 1.714em;
margin-bottom: 0.9em;
}
#triptych .block {
margin-bottom: 2em;
padding-bottom: 2em;
}
}
/**
* Responsive tables.
*/
@media screen and (max-width: 37.5em) { /* 600px */
th.priority-low,
td.priority-low,
th.priority-medium,
td.priority-medium {
display: none;
}
}
@media screen and (max-width: 60em) { /* 920px */
th.priority-low,
td.priority-low {
display: none;
}
}
/* ---------- Input fields ---------- */
@media screen and (max-width: 60em) { /* 920px */
input,
textarea {
font-size: 1.142857143em;
}
}
core/themes/bartik/css/components/primary-menu.css
+ 85
− 0
View file @ c8ec0cd3
......@@ -105,3 +105,88 @@ body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu l
height: auto;
overflow: visible;
}
/**
* Media queries for primary menu.
*/
@media all and (min-width: 461px) and (max-width: 900px) {
.region-primary-menu .menu {
margin: 0 5px;
padding: 0;
text-align: center;
}
.region-primary-menu .menu li,
body:not(:target) .region-primary-menu .menu li {
float: left; /* LTR */
margin-right: 5px; /* LTR */
padding: 0;
display: inline-block;
width: 32.75%;
height: auto;
overflow: visible;
}
[dir="rtl"] .region-primary-menu .menu li,
[dir="rtl"] body:not(:target) .region-primary-menu .menu li {
float: right;
margin-left: 5px;
margin-right: 0;
}
.region-primary-menu .menu li:nth-child(3n) {
margin-right: -5px; /* LTR */
}
[dir="rtl"] .region-primary-menu .menu li:nth-child(3n) {
margin-left: -5px;
margin-right: 0;
}
.region-primary-menu .menu a {
float: none;
display: block;
border-radius: 8px;
margin-bottom: 5px;
padding: 0.9em 5px;
}
body:not(:target) .region-primary-menu .menu-toggle {
display: none;
}
}
@media all and (min-width: 901px) {
.region-primary-menu .block-menu .menu {
font-size: 0.929em;
margin: 0;
padding: 0 15px;
}
.region-primary-menu .menu li,
body:not(:target) .region-primary-menu .menu li {
float: left; /* LTR */
list-style: none;
padding: 0 1px;
margin: 0 1px;
width: auto;
height: auto;
overflow: visible;
}
[dir="rtl"] .region-primary-menu .menu li,
[dir="rtl"] body:not(:target) .region-primary-menu .menu li {
float: right;
}
.region-primary-menu .menu a {
float: left; /* LTR */
padding: 0.7em 0.8em;
margin-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
[dir="rtl"] .region-primary-menu .menu a {
float: right;
padding: 0.7em 0.8em;
}
.featured .region-primary-menu .menu li a:active,
.featured .region-primary-menu .menu li a.active {
background: #f0f0f0;
background: rgba(240, 240, 240, 1.0);
}
body:not(:target) .region-primary-menu .menu-toggle {
display: none;
}
}
core/themes/bartik/css/components/table.css
+ 17
− 0
View file @ c8ec0cd3
......@@ -51,6 +51,23 @@ tr th {
[dir="rtl"] tr th {
text-align: right;
}
/**
* Responsive tables.
*/
@media screen and (max-width: 37.5em) { /* 600px */
th.priority-low,
td.priority-low,
th.priority-medium,
td.priority-medium {
display: none;
}
}
@media screen and (max-width: 60em) { /* 920px */
th.priority-low,
td.priority-low {
display: none;
}
}
#footer-wrapper tr td,
#footer-wrapper tr th {
border-color: #555;
......
core/themes/bartik/css/components/triptych.css
+ 10
− 0
View file @ c8ec0cd3
......@@ -19,6 +19,16 @@
border-bottom: 1px solid #dfdfdf;
line-height: 1.3;
}
@media all and (min-width: 520px) {
#triptych h2 {
font-size: 1.714em;
margin-bottom: 0.9em;
}
#triptych .block {
margin-bottom: 2em;
padding-bottom: 2em;
}
}
#triptych .block:last-child {
border-bottom: none;
}
......
core/themes/bartik/css/layout.css
+ 10
− 0
View file @ c8ec0cd3
......@@ -31,6 +31,16 @@ body,
[dir="rtl"] .region-header {
float: left;
}
@media all and (min-width: 461px) and (max-width: 900px) {
.region-header {
margin: .5em 5px .75em;
}
}
@media all and (min-width: 901px) {
.region-header {
margin: 1em 5px 1.5em;
}
}
.region-secondary-menu .block-menu {
width: 100%;
margin: 0 auto;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment