Commit 54cc3d75 authored by alexpott's avatar alexpott

Issue #1872598 by LewisNyman, rachel_norfolk, echoz, djbobbydrake: Fixed...

Issue #1872598 by LewisNyman, rachel_norfolk, echoz, djbobbydrake: Fixed Bartik color settings not responsive.
parent 75b8c067
......@@ -2,62 +2,33 @@
* @file
* Stylesheet for the administration pages of the Color module.
*/
/* Farbtastic placement */
.color-form {
max-width: 50em;
position: relative;
}
#placeholder {
position: absolute;
top: 0;
right: 0; /* LTR */
}
[dir="rtl"] #placeholder {
left: 0;
right: auto;
.farbtastic {
margin: 0 auto;
}
/* Palette */
.color-form .form-item {
height: 2em;
line-height: 2em;
padding-left: 1em; /* LTR */
overflow: hidden;
margin: 0.5em 0;
}
[dir="rtl"] .color-form .form-item {
padding-left: 0;
padding-right: 1em;
}
.color-form label {
float: left; /* LTR */
clear: left; /* LTR */
width: 10em;
}
[dir="rtl"] .color-form label {
float: right;
clear: right;
}
.color-form .form-text,
.color-form .form-select {
float: left; /* LTR */
}
[dir="rtl"] .color-form .form-text,
[dir="rtl"] .color-form .form-select {
float: right;
}
.color-form .form-text {
float: left; /* LTR */
width: 86%;
text-align: center;
margin-right: 5px; /* LTR */
cursor: pointer;
}
[dir="rtl"] .color-form .form-text {
margin-right: 0;
margin-left: 5px;
float: right;
}
#palette .hook {
float: left; /* LTR */
margin-top: 3px;
width: 16px;
height: 16px;
}
......@@ -72,7 +43,7 @@
[dir="rtl"] #palette .down,
[dir="rtl"] #palette .up,
[dir="rtl"] #palette .both {
background: url(images/hook-rtl.png) no-repeat 0 0;
background: url(../images/hook-rtl.png) no-repeat 0 0;
}
#palette .up {
background-position: 100% -27px; /* LTR */
......@@ -88,25 +59,65 @@
}
#palette .lock {
float: left; /* LTR */
position: relative;
top: -1.4em;
left: -10px; /* LTR */
width: 20px;
height: 25px;
background: url(../images/lock.png) no-repeat 50% 2px;
height: 19px;
background: url(../images/lock.png) no-repeat 50% 0;
cursor: pointer;
}
[dir="rtl"] #palette .lock {
float: right;
right: -10px;
}
#palette .unlocked {
background-position: 50% -22px;
}
#palette .form-item {
width: 20em;
}
#palette .item-selected {
/* wide viewport. */
@media screen and (min-width: 37.5625em) { /* 601px */
#placeholder {
float: right; /* LTR */
}
[dir="rtl"] #placeholder {
float: left;
}
.color-form .form-item {
margin: 0.5em 195px 0.5em 0; /* LTR */
}
[dir="rtl"] .color-form .form-item {
margin: 0.5em 0 0.5em 195px;
}
.color-form label {
float: left; /* LTR */
clear: left; /* LTR */
width: 15em;
}
[dir="rtl"] .color-form label {
float: right;
clear: right;
}
.color-form .form-text,
.color-form .form-select {
float: left; /* LTR */
width: auto;
}
[dir="rtl"] .color-form .form-text,
[dir="rtl"] .color-form .form-select {
float: right;
}
#palette .hook {
float: left; /* LTR */
margin-top: 3px;
}
[dir="rtl"] #palette .hook {
float: right;
}
#palette .lock {
float: left; /* LTR */
}
[dir="rtl"] #palette .lock {
float: right;
}
}
.item-selected {
background: #eee;
}
......@@ -122,3 +133,10 @@
.js[dir="rtl"] #preview {
float: right;
}
@media screen and (max-width: 30em) { /* 480px */
.color-form #preview-sidebar,
.color-form #preview-content {
width: auto;
margin: 0;
}
}
/* ---------- Color form ----------- */
#color_scheme_form #palette .form-item {
width: 25em;
}
#color_scheme_form #palette .form-item label {
width: 15em;
}
/* ---------- Preview Styles ----------- */
.js #preview {
clear: both;
float: none !important;
......
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