From 2f937173cff68149ac4b64b25d448dd997436de1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e=20Jaussoin?= Date: Wed, 4 May 2016 08:44:03 +0200 Subject: [PATCH] Refactor and cleanup some CSS, fix form inputs "shaking" on Webkit --- themes/material/css/color.css | 11 ++++-- themes/material/css/form.css | 40 ++++++++----------- themes/material/css/listn.css | 73 +++++++++++++---------------------- themes/material/css/menu.css | 8 ++-- themes/material/css/table.css | 15 +++++++ themes/material/css/title.css | 55 ++++++++++++++++++++++++++ 6 files changed, 123 insertions(+), 79 deletions(-) create mode 100644 themes/material/css/title.css diff --git a/themes/material/css/color.css b/themes/material/css/color.css index a8294ef51..42b0cff4e 100644 --- a/themes/material/css/color.css +++ b/themes/material/css/color.css @@ -56,10 +56,12 @@ ul li.action > form > div.action, .icon.gray , p.user.gray { color: #9E9E9E; } .icon.black , p.user.black { color: #000; } -form input:focus:invalid, -form textarea:focus:invalid { - border-bottom-color: #F44336; +form > div > input:focus:invalid, +form > div > input:focus:required { + box-shadow: 0px 2px 0px #F44336; } + +form > div > input:invalid, form input:focus:invalid + label, form textarea:focus:invalid + label { color: #F44336; @@ -127,5 +129,6 @@ form textarea:focus:not(:invalid) + label { form input:focus:not(:invalid), form textarea:focus:not(:invalid) { - border-bottom-color: #FF5722; + box-shadow:0px 2px 0px #FF5722; } + diff --git a/themes/material/css/form.css b/themes/material/css/form.css index d0e8eda86..84cbfcb37 100644 --- a/themes/material/css/form.css +++ b/themes/material/css/form.css @@ -1,7 +1,7 @@ /* Form */ form > div:not(.clear):not(.control) { - min-height: 9.5rem; + min-height: 9rem; position: relative; box-sizing: border-box; } @@ -30,12 +30,7 @@ form > div > label { form > div.icon { padding-left: 9rem; } -/* -form > div > input:focus + label, -form > div > textarea:focus + label { - display: block; -} -*/ + form > div > textarea, #hiddendiv { border: none; @@ -96,26 +91,33 @@ main > header form > div:not(.clear):not(.control) > .select select { } /* Placeholders to mimic FF */ + ::-webkit-input-placeholder, /* WebKit browsers */ :-ms-input-placeholder { /* Internet Explorer 10+ */ - color: #fff; + color: #fff; opacity: 0.5; } +/* Webkit weird CSS, sic */ + +form > div > .select select, +form > div > input:not([type=submit]), +form > div > textarea { + outline-width: 0; +} + form > div > .select, form > div > input:not([type=submit]), form > div > textarea { display: block; padding: 1rem 0; - padding-top: 5rem; + padding-top: 4.5rem; width: 100%; background-color: transparent; - border-bottom: 1px solid rgba(0, 0, 0, 0.12); margin-bottom: 1rem; overflow: hidden; /* Fixme */ - - box-shadow: none; /* Firefox weird CSS */ + box-shadow:0px 1px 0px rgba(0, 0, 0, 0.12); } form > div > .select { @@ -135,21 +137,10 @@ form > div > input:not([type=submit]):-webkit-autofill { -webkit-box-shadow: 0 0 0 50px white inset; } form > div > input:not([type=submit]):-webkit-autofill:focus { - -webkit-box-shadow: 0; + box-shadow: 0; -webkit-text-fill-color: #333; } -form > div > input:focus, -form > div > textarea:focus { - border-bottom-width: 2px; - margin-bottom: calc(1rem - 1px); -} - -form > div > input:invalid, -form > div > input:required { - box-shadow: none; -} - /* Checkbox element */ form > div .checkbox > input[type="checkbox"], @@ -423,3 +414,4 @@ header.big ~ .button.action { word-wrap: break-word; overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */ } + diff --git a/themes/material/css/listn.css b/themes/material/css/listn.css index 5c4b008f4..98a2af65d 100644 --- a/themes/material/css/listn.css +++ b/themes/material/css/listn.css @@ -3,6 +3,10 @@ ul.list { padding: 0; } +ul.list li:not(.subheader) { + padding: 0.25rem 0; +} + ul.list.middle li:not(.subheader) { padding: 0.75rem 0; } @@ -32,47 +36,38 @@ ul.list.active li.active:not(.subheader) { /* Main elements */ -ul.list li > .control, -ul.list li > .primary { - width: 5rem; - height: 5rem; +ul.list li .control, +ul.list li .primary { + width: 5.5rem; + height: 5.5rem; top: 50%; - margin-top: -2.5rem; + margin-top: -2.75rem; position: absolute; + line-height: 5.5rem; + /*padding: 0.25rem 0;*/ } -ul.list li > .control.active, -ul.list li > .primary.active { - width: 5rem; - height: 5rem; - margin-top: -2.5rem; - line-height: 5rem; -} - -ul.list.middle li > .control.active, -ul.list.middle li > .primary.active { - width: 6.5rem; - height: 6.5rem; - margin-top: -3.25rem; - line-height: 6.5rem; -} - -ul.list.thick li > .control.active, -ul.list.thick li > .primary.active { - width: 7rem; - height: 7rem; +ul.list.middle li .control:not(.bubble), +ul.list.middle li .primary:not(.bubble) { margin-top: -3.5rem; - line-height: 7rem; + padding: 0.75rem 0; } -ul.list li > .primary.active { - left: 0; +ul.list.thick li .control:not(.bubble), +ul.list.thick li .primary:not(.bubble) { + padding: 1.5rem 0; + margin-top: -4.25rem; } ul.list li > .control.small, ul.list li > .primary.small { width: 3rem; height: 3rem; + line-height: 3rem; +} + +ul.list li > .control.small.bubble, +ul.list li > .primary.small.bubble { margin-top: -1.5rem; } @@ -167,7 +162,6 @@ ul.list li.subheader > p { /* If we have a primary control */ - ul.list li > .primary { left: 2rem; } @@ -183,27 +177,11 @@ ul.list li > .control { } ul.list li > .control ~ .control { - right: 5rem; + right: 5.5rem; } ul.list li > .control ~ .control ~ .control { - right: 10rem; -} - -ul.list.middle li > .control ~ .control { - right: 6rem; -} - -ul.list.middle li > .control ~ .control ~ .control { - right: 12rem; -} - -ul.list.thick li > .control ~ .control { - right: 7rem; -} - -ul.list.thick li > .control ~ .control ~ .control { - right: 14rem; + right: 11rem; } /* Limit the size of the main content */ @@ -427,3 +405,4 @@ ul.context_menu.shown { display: block; width: calc(100% - 9rem); } + diff --git a/themes/material/css/menu.css b/themes/material/css/menu.css index 7ab455e4f..7c141f101 100644 --- a/themes/material/css/menu.css +++ b/themes/material/css/menu.css @@ -1,15 +1,15 @@ /* Menu */ -body > nav > ul.list li > .primary { - left: 1rem; -} - body > nav > ul:nth-child(2) li p.normal, body > nav > ul:nth-child(3) li p.normal { height: 6rem; line-height: 6rem; } +body > nav > ul.list li span.primary { + left: 0.75rem; +} + body > nav > ul a { color: white; } diff --git a/themes/material/css/table.css b/themes/material/css/table.css index 24c4f86b9..f40b54374 100644 --- a/themes/material/css/table.css +++ b/themes/material/css/table.css @@ -1,6 +1,7 @@ table.table { width: 100%; border-collapse: collapse; + margin-bottom: 1rem; } table.table tbody tr:hover { @@ -12,6 +13,11 @@ table.table td { text-align: right; } +table.table th li, +table.table td li { + text-align: left; +} + table.table thead tr th, table.table tr:not(:last-child) td { border-bottom: 1px solid #CCC; @@ -35,3 +41,12 @@ table.table td:last-child { padding-right: 2rem; } +table.table td li i { + line-height: 7rem; +} + +table.table th[colspan], +table.table td[colspan] { + padding: 0; +} + diff --git a/themes/material/css/title.css b/themes/material/css/title.css new file mode 100644 index 000000000..2b4cb70d8 --- /dev/null +++ b/themes/material/css/title.css @@ -0,0 +1,55 @@ +/* Titles */ + +h1 { /* Display 1 */ + font-size: 4.25rem; + line-height: 7rem; +} + +h2 { /* Headline */ + font-size: 3rem; + line-height: 4rem; + padding: 2rem 0; +} + +h2.thin { + line-height: 5rem; +} + +h3 { /* Title */ + font-size: 2.5rem; + font-weight: 700; +} + +h4, input, textarea, select { /* Headline */ + font-size: 2rem; + line-height: 2.5rem; +} + +h4 { + font-weight: 400; +} + +h4.gray { + color: rgba(0, 0, 0, 0.54); +} + +article section content ul li, /* Body 1 */ +article section content p { + font-size: 2rem; + font-weight: 300; +} + +.snackbar, /* Body 2 */ +.toast { + font-size: 1.75rem; + font-weight: 500; +} + +label, span.info { /* Caption */ + font-size: 1.5rem; + color: rgba(0, 0, 0, 0.54); +} +label, span.info b { /* Caption */ + font-weight: 600; +} +