From 885494dc669c6e77b0a49bc984e795385270110f Mon Sep 17 00:00:00 2001 From: Dennis Eichhorn Date: Sun, 20 Jan 2019 12:04:51 +0100 Subject: [PATCH] Minor style fixes --- nav.css | 88 ++++++++++++++++++---------------------- nav.scss | 95 ++++++++++++++++++++++---------------------- styles.css | 97 ++++++++++++++++++++++----------------------- tab.css | 2 +- tab.scss | 8 ++-- table.css | 7 ++++ table.scss | 10 +++++ tests/app/forms.php | 4 +- 8 files changed, 158 insertions(+), 153 deletions(-) diff --git a/nav.css b/nav.css index bd96564..1566a9c 100644 --- a/nav.css +++ b/nav.css @@ -88,6 +88,9 @@ .nav-trigger { position: absolute; clip: rect(0, 0, 0, 0); } + .nav-trigger:checked ~ main { + width: calc(100% - 175px); + left: 175px; } label[for="nav-trigger"] { font-size: 2.0em; @@ -95,10 +98,6 @@ label[for="nav-trigger"] { width: 30px; cursor: pointer; } -.nav-trigger:checked ~ main { - width: calc(100% - 175px); - left: 175px; } - .nav-top { user-select: none; margin-top: 5px; @@ -111,55 +110,46 @@ label[for="nav-trigger"] { .nav-top > li { -moz-box-shadow: inset 0px 1px 0px 0px #fff; -webkit-box-shadow: inset 0px 1px 0px 0px #fff; - box-shadow: inset 0px 1px 0px 0px #fff; - text-shadow: 1px 1px 1px #fff; } + box-shadow: inset 0px 1px 0px 0px #fff; } .nav-top > li:first-child { -moz-box-shadow: inset 1px 1px 0px 0px #fff; -webkit-box-shadow: inset 1px 1px 0px 0px #fff; box-shadow: inset 1px 1px 0px 0px #fff; } - -.nav-top li { - background: #fff; - display: inline-block; - margin-right: -4px; - position: relative; - cursor: pointer; } - -.nav-top > li > a { - display: inline-block; - padding: 10px 10px; } - -.nav-top li:hover { - background: #555; - color: #fff; - text-shadow: 0 -1px 0 #000; } - -.nav-top li > ul { - padding: 0; - position: absolute; - top: 36px; - left: 0; - width: 150px; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - display: none; - opacity: 0; - visibility: hidden; } - -.nav-top li > ul li { - background: #555; - display: block; - color: #fff; - text-shadow: 0 -1px 0 #000; } - -.nav-top li > ul li:hover { - background: #666; } - -.nav-top li:hover > ul { - display: block; - opacity: 1; - visibility: visible; } + .nav-top > li > a { + display: inline-block; + padding: 10px 10px; } + .nav-top li { + background: #fff; + display: inline-block; + position: relative; + cursor: pointer; } + .nav-top li:hover { + background: #FBA026; + color: #252525; } + .nav-top li:hover > ul { + display: block; + opacity: 1; + visibility: visible; } + .nav-top li > ul { + padding: 0; + z-index: 5; + position: absolute; + top: 36px; + left: 0; + width: 150px; + display: none; + opacity: 0; + visibility: hidden; + border-left: 1px solid #b7b7b7; + border-bottom: 1px solid #b7b7b7; + border-right: 1px solid #b7b7b7; } + .nav-top li > ul li { + display: block; + color: #000; + padding: 7px; } + .nav-top li > ul li:hover { + color: #252525; + background: #FBA026; } @media screen and (max-width: 600px) { .nav-trigger:checked ~ main { diff --git a/nav.scss b/nav.scss index c1013ad..c4dc4cb 100644 --- a/nav.scss +++ b/nav.scss @@ -122,6 +122,11 @@ .nav-trigger { position: absolute; clip: rect(0, 0, 0, 0); + + &:checked ~ main { + width: calc(100% - 175px); + left: 175px; + } } label[for="nav-trigger"] { @@ -131,11 +136,6 @@ label[for="nav-trigger"] { cursor: pointer; } -.nav-trigger:checked ~ main { - width: calc(100% - 175px); - left: 175px; -} - .nav-top { user-select: none; margin-top: 5px; @@ -147,59 +147,60 @@ label[for="nav-trigger"] { > li { @include box-shadow-top(#fff); - text-shadow: 1px 1px 1px #fff; &:first-child { @include box-shadow-out(#fff); } + + > a { + display: inline-block; + padding: 10px 10px; + } } -} -.nav-top li { - background: #fff; - display: inline-block; - margin-right: -4px; - position: relative; - cursor: pointer; -} + li { + background: #fff; + display: inline-block; + position: relative; + cursor: pointer; -.nav-top > li > a { - display: inline-block; - padding: 10px 10px; -} + &:hover { + background: $default-highlighter; + color: #252525; -.nav-top li:hover { - background: #555; - color: #fff; - text-shadow: 0 -1px 0 #000; -} + > ul { + display: block; + opacity: 1; + visibility: visible; + } + } -.nav-top li > ul { - padding: 0; - position: absolute; - top: 36px; - left: 0; - width: 150px; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - display: none; - opacity: 0; - visibility: hidden; -} + > ul { + padding: 0; + z-index: 5; + position: absolute; + top: 36px; + left: 0; + width: 150px; + display: none; + opacity: 0; + visibility: hidden; + border-left: 1px solid $content-border-color; + border-bottom: 1px solid $content-border-color; + border-right: 1px solid $content-border-color; -.nav-top li > ul li { - background: #555; - display: block; - color: #fff; - text-shadow: 0 -1px 0 #000; -} + li { + display: block; + color: #000; + padding: 7px; -.nav-top li > ul li:hover { background: #666; } -.nav-top li:hover > ul { - display: block; - opacity: 1; - visibility: visible; + &:hover { + color: #252525; + background: $default-highlighter; + } + } + } + } } @media screen and (max-width: 600px) { diff --git a/styles.css b/styles.css index 616449b..a88f2d4 100644 --- a/styles.css +++ b/styles.css @@ -4443,6 +4443,9 @@ ul.h-list li { .nav-trigger { position: absolute; clip: rect(0, 0, 0, 0); } + .nav-trigger:checked ~ main { + width: calc(100% - 175px); + left: 175px; } label[for="nav-trigger"] { font-size: 2.0em; @@ -4450,10 +4453,6 @@ label[for="nav-trigger"] { width: 30px; cursor: pointer; } -.nav-trigger:checked ~ main { - width: calc(100% - 175px); - left: 175px; } - .nav-top { user-select: none; margin-top: 5px; @@ -4466,55 +4465,46 @@ label[for="nav-trigger"] { .nav-top > li { -moz-box-shadow: inset 0px 1px 0px 0px #fff; -webkit-box-shadow: inset 0px 1px 0px 0px #fff; - box-shadow: inset 0px 1px 0px 0px #fff; - text-shadow: 1px 1px 1px #fff; } + box-shadow: inset 0px 1px 0px 0px #fff; } .nav-top > li:first-child { -moz-box-shadow: inset 1px 1px 0px 0px #fff; -webkit-box-shadow: inset 1px 1px 0px 0px #fff; box-shadow: inset 1px 1px 0px 0px #fff; } - -.nav-top li { - background: #fff; - display: inline-block; - margin-right: -4px; - position: relative; - cursor: pointer; } - -.nav-top > li > a { - display: inline-block; - padding: 10px 10px; } - -.nav-top li:hover { - background: #555; - color: #fff; - text-shadow: 0 -1px 0 #000; } - -.nav-top li > ul { - padding: 0; - position: absolute; - top: 36px; - left: 0; - width: 150px; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - display: none; - opacity: 0; - visibility: hidden; } - -.nav-top li > ul li { - background: #555; - display: block; - color: #fff; - text-shadow: 0 -1px 0 #000; } - -.nav-top li > ul li:hover { - background: #666; } - -.nav-top li:hover > ul { - display: block; - opacity: 1; - visibility: visible; } + .nav-top > li > a { + display: inline-block; + padding: 10px 10px; } + .nav-top li { + background: #fff; + display: inline-block; + position: relative; + cursor: pointer; } + .nav-top li:hover { + background: #FBA026; + color: #252525; } + .nav-top li:hover > ul { + display: block; + opacity: 1; + visibility: visible; } + .nav-top li > ul { + padding: 0; + z-index: 5; + position: absolute; + top: 36px; + left: 0; + width: 150px; + display: none; + opacity: 0; + visibility: hidden; + border-left: 1px solid #b7b7b7; + border-bottom: 1px solid #b7b7b7; + border-right: 1px solid #b7b7b7; } + .nav-top li > ul li { + display: block; + color: #000; + padding: 7px; } + .nav-top li > ul li:hover { + color: #252525; + background: #FBA026; } @media screen and (max-width: 600px) { .nav-trigger:checked ~ main { @@ -4884,7 +4874,7 @@ section > h2 { /* pre */ /* tag */ .tabview .tab-links { - padding: 0.3rem 0 0 0.3rem; } + padding: 0.3rem 0 0 0; } .tabview .tab-links label { text-shadow: 1px 1px 1px #fff; font-size: 0.9em; @@ -4975,6 +4965,13 @@ section > h2 { /* pagination */ /* pre */ /* tag */ +table.fixed { + table-layout: fixed; } + table.fixed td { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc { display: none; } diff --git a/tab.css b/tab.css index c22025f..de1e9b9 100644 --- a/tab.css +++ b/tab.css @@ -19,7 +19,7 @@ /* pre */ /* tag */ .tabview .tab-links { - padding: 0.3rem 0 0 0.3rem; } + padding: 0.3rem 0 0 0; } .tabview .tab-links label { text-shadow: 1px 1px 1px #fff; font-size: 0.9em; diff --git a/tab.scss b/tab.scss index ed54838..86cd1e4 100644 --- a/tab.scss +++ b/tab.scss @@ -2,7 +2,7 @@ .tabview { .tab-links { - padding: 0.3rem 0 0 0.3rem; + padding: 0.3rem 0 0 0; label { text-shadow: 1px 1px 1px #fff; @@ -91,7 +91,7 @@ border-bottom: 1px solid $content-border-color; } } - + .tab-content { width: 100%; border-top: 1px solid $content-border-color; @@ -104,11 +104,11 @@ label { padding: 5px 10px 5px 10px; } - + li { margin: 0 5px 15px 0; } - + .active a, .active label { border: 1px solid $content-border-color; @include gradient-top-bottom(#fff, 0, $content-background-color, 100, #fff); diff --git a/table.css b/table.css index e310f0a..c3c81d9 100644 --- a/table.css +++ b/table.css @@ -18,6 +18,13 @@ /* pagination */ /* pre */ /* tag */ +table.fixed { + table-layout: fixed; } + table.fixed td { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc { display: none; } diff --git a/table.scss b/table.scss index 1241932..49de9b3 100644 --- a/table.scss +++ b/table.scss @@ -1,5 +1,15 @@ @import "_mixins", "_vars"; +table.fixed { + table-layout: fixed; + + td { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } +} + table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc { display: none; } diff --git a/tests/app/forms.php b/tests/app/forms.php index 6ed924a..24f34f8 100644 --- a/tests/app/forms.php +++ b/tests/app/forms.php @@ -37,8 +37,8 @@ - - + +