open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Responsive CSS

Browse Source
This commit is contained in:
narcolepticinsomniac 2018-07-02 12:09:50 -04:00 committed by GitHub
parent af4bf7a57f
commit d207ef9e22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 110 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
edit/edit.css
View File

@ -28,22 +28,18 @@ body {
} }
/************ checkbox & select************/ /************ checkbox & select************/
#options > div[class="option"] { .options-column > div[class="option"] {
margin-bottom: 4px; margin-bottom: 4px;
} }
#options > div.option:nth-last-of-type(7) { .options-column > .usercss-only {
margin-bottom: 12px; margin-bottom: .75rem;
}
#options > div.option:nth-last-of-type(7) + .usercss-only {
margin-top: -8px;
margin-bottom: 12px;
} }
label { label {
padding-left: 16px; padding-left: 16px;
position: relative; position: relative;
white-space: nowrap;
} }
/************ header ************/ /************ header ************/
@ -154,7 +150,7 @@ label {
margin: -2px 0 0 .1rem; margin: -2px 0 0 .1rem;
} }
.svg-inline-wrapper.applies-to-help { .svg-inline-wrapper.applies-to-help {
margin: -2px 0 0 .25rem; margin: 0 0 0 .25rem;
} }
.aligned .svg-inline-wrapper { .aligned .svg-inline-wrapper {
margin: -2px 0 0 .3rem; margin: -2px 0 0 .3rem;
@ -191,8 +187,8 @@ input:invalid {
align-items: center; align-items: center;
margin-left: -13px; margin-left: -13px;
cursor: pointer; cursor: pointer;
margin-top: 8px; margin-top: .5rem;
margin-bottom: 8px; margin-bottom: .5rem;
} }
#header summary h2 { #header summary h2 {
@ -210,8 +206,18 @@ input:invalid {
margin-top: -3px; margin-top: -3px;
} }
#actions { #actions > * {
margin-bottom: .5rem; display: inline-flex;
flex-wrap: wrap;
}
#mozilla-format-buttons {
display: flex;
flex-wrap: wrap;
}
#actions button {
margin: 0 .2rem .5rem 0;
} }
#options:not([open]) + #lint h2 { #options:not([open]) + #lint h2 {
@ -248,16 +254,23 @@ input:invalid {
/************ content ***********/ /************ content ***********/
#sections > div { #sections > div {
margin: 0.7rem; margin: 0.7rem;
padding: 1rem; padding: 1rem 1rem .3rem;
}
#sections > div:first-of-type {
padding: 0 1rem .3rem;
} }
#sections > div:not(:first-of-type) { #sections > div:not(:first-of-type) {
border-top: 2px solid black; border-top: 2px solid hsl(0, 0%, 80%);
} }
#sections > div:only-of-type .remove-section { #sections > div:only-of-type .remove-section {
display: none; display: none;
} }
#sections > div > button:not(:first-of-type) { .edit-actions {
margin-left: 0.2rem; display: flex;
flex-wrap: wrap;
}
.edit-actions button {
margin: 0 .2rem .5rem 0;
} }
.dirty > label::before { .dirty > label::before {
content: "*"; content: "*";
@ -358,27 +371,39 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
/* applies-to */ /* applies-to */
.applies-to { .applies-to {
display: flex; display: flex;
align-items: flex-start;
min-height: 30px;
flex-wrap: wrap;
} }
.applies-to label { .applies-to label {
flex: auto; display: flex;
margin-top: 0.2rem; padding: 0;
height: 22px;
align-items: center;
margin: 0 .2em 0 0;
white-space: nowrap;
} }
.applies-to ul { .applies-to ul {
flex: auto; flex: auto;
flex-grow: 99; flex-grow: 1;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.applies-to li { .applies-to li {
display: flex; display: flex;
flex-wrap: wrap;
list-style-type: none; list-style-type: none;
align-items: center; align-items: center;
margin-bottom: 0.35rem;
} }
.applies-to li > *:not(button):not(.select-resizer) { .applies-to li.applies-to-everything {
flex: auto; align-items: unset;
line-height: 22px;
}
.applies-to li > input {
min-height: 1.4rem; min-height: 1.4rem;
margin-left: 0.35rem; }
.applies-to li:not(.applies-to-everything) > * {
margin: 0 .2rem .5rem 0;
} }
html:not(.usercss) .applies-to li .add-applies-to { html:not(.usercss) .applies-to li .add-applies-to {
visibility: hidden; visibility: hidden;
@ -391,12 +416,34 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to {
margin-left: 1rem; margin-left: 1rem;
} }
.applies-to li .applies-value { .applies-to li .applies-value {
flex-grow: 99; flex-grow: 1;
padding-left: 0.2rem; padding-left: 0.2rem;
} }
.applies-to img { .applies-to img {
vertical-align: bottom; vertical-align: bottom;
} }
.add-applies-to,
.remove-applies-to {
font-size: 0;
height: 22px;
width: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.add-applies-to .svg-icon,
.remove-applies-to .svg-icon {
pointer-events: none;
fill: hsl(0, 0%, 60%);
height: 12px;
width: 12px;
}
.add-applies-to:hover .svg-icon,
.remove-applies-to:hover .svg-icon {
pointer-events: none;
fill: hsl(0, 0%, 0%);
}
.test-regexp { .test-regexp {
display: none; display: none;
} }
@ -716,20 +763,25 @@ html:not(.usercss) .usercss-only,
} }
/************ reponsive layouts ************/ /************ reponsive layouts ************/
@media(max-width: 850px) { @media(max-width: 800px) {
body {
display: flex;
flex-direction: column;
}
#header { #header {
width: auto; flex: 0 1 auto;
height: auto; height: unset;
width: unset;
position: inherit; position: inherit;
border-right: none; border-right: none;
border-bottom: 1px dashed #AAA; border-bottom: 1px dashed #AAA;
min-height: var(--header-narrow-min-height); min-height: var(--header-narrow-min-height);
max-height: 50vh; padding: 0;
flex-wrap: wrap;
flex-direction: row;
} }
#header section:not(:last-child) { #actions {
margin-bottom: .5rem; padding: 0 1rem;
margin: 0;
box-sizing: border-box;
} }
#header input[type="checkbox"] { #header input[type="checkbox"] {
vertical-align: middle; vertical-align: middle;
@ -739,41 +791,39 @@ html:not(.usercss) .usercss-only,
display: none; display: none;
} }
#basic-info { #basic-info {
padding: .5rem 1rem;
margin: 0;
box-sizing: border-box;
display: flex; display: flex;
align-items: baseline; flex-wrap: wrap;
flex: 1;
margin-right: 2em;
}
#basic-info > * {
flex: auto;
} }
#basic-info > *:first-child { #basic-info > *:first-child {
flex-grow: 99; flex-grow: 1;
display: flex;
} }
#basic-info > *:not(:last-child) { #basic-info > *:not(:last-child) {
margin-right: 0.8rem; margin-right: 0.8rem;
} }
#basic-info #name { #basic-info #name {
width: auto; flex-grow: 1;
flex-grow: 99;
} }
#actions { #actions {
margin-top: 0; display: flex;
flex-wrap: wrap;
white-space: nowrap; white-space: nowrap;
} }
#actions > * { #options-wrapper {
display: inline-block; display: flex;
flex-wrap: wrap;
padding: .5rem 1rem;
box-sizing: border-box;
} }
#options { .options-column {
-webkit-column-count: 3; flex-grow: 1;
-moz-column-count: 3; padding-right: .5rem;
column-count: 3; box-sizing: border-box;
width: 100%;
} }
#options:not([open]), #options:not([open]),
#lint:not([open]) { #lint:not([open]) {
column-count: 1;
overflow: initial; overflow: initial;
} }
#options:not([open]) + #lint:not([open]) { #options:not([open]) + #lint:not([open]) {
@ -787,13 +837,13 @@ html:not(.usercss) .usercss-only,
margin-bottom: 0; margin-bottom: 0;
} }
#options summary { #options summary {
margin-top: -.25em; margin-left: 0;
padding-left: 4px;
} }
#options h2 { #options h2 {
margin: 0 0 .5em; margin: 0 0 .5em;
} }
.option label { .option label {
line-height: 1.25rem;
margin: 0; margin: 0;
} }
#options [type="number"] { #options [type="number"] {
@ -807,6 +857,9 @@ html:not(.usercss) .usercss-only,
#options:not([open]) ~ #lint { #options:not([open]) ~ #lint {
margin-top: -1em; margin-top: -1em;
} }
#header summary {
margin-bottom: 0;
}
#lint > div { #lint > div {
margin-top: 0; margin-top: 0;
} }
@ -821,9 +874,10 @@ html:not(.usercss) .usercss-only,
} }
#sections { #sections {
padding-left: 0; padding-left: 0;
flex: 1;
} }
#sections > div { #sections > div {
padding: 0; padding: .5rem 0 0;
} }
#sections > *:not(h2) { #sections > *:not(h2) {
padding-left: 0.4rem; padding-left: 0.4rem;
@ -838,24 +892,4 @@ html:not(.usercss) .usercss-only,
#help-popup.big { #help-popup.big {
left: 3rem; left: 3rem;
} }
} }
@media (max-width: 720px) {
#options {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media (max-width: 450px) {
#options {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
#actions {
flex-wrap: wrap;
white-space: normal;
}
}