Skip to content

Commit

Permalink
Further simplification to CSS colors and updated description of namin…
Browse files Browse the repository at this point in the history 
…g convention (CO-2241)
  • Loading branch information
@arlen
arlen committed Oct 15, 2021
1 parent 968a0e4 commit ea44c32
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 44 deletions.
75 changes: 38 additions & 37 deletions app/webroot/css/co-base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ body.logged-in #top-menu {
z-index: 200;
color: var(--cmg-color-gray-001);
background-color: var(--cmg-color-lightgray-002);
border: 1px solid var(--cmg-color-lightgray-006);
border: 1px solid var(--cmg-color-lightgray-005);
padding: 1em;
min-width: calc(100vw - 50px);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
Expand All @@ -211,7 +211,7 @@ body.logged-in #top-menu {
word-wrap:break-word;
}
#user-panel-user-info { /* mobile only styling */
border-top: 1px solid var(--cmg-color-lightgray-007);
border-top: 1px solid var(--cmg-color-lightgray-006);
margin-top: 1em;
padding-top: 1em;
}
Expand All @@ -230,7 +230,7 @@ body.logged-in #top-menu {
font-weight: normal;
}
#user-panel #co-profile-link:hover {
background-color: var(--cmg-color-lightgray-006);
background-color: var(--cmg-color-lightgray-005);
}
#user-panel #co-profile-link .material-icons {
vertical-align: middle;
Expand Down Expand Up @@ -352,7 +352,7 @@ body.logged-in #top-menu {
top: 30px;
z-index: 20;
background-color: var(--cmg-color-lightgray-001);
border-right: 1px solid var(--cmg-color-lightgray-007);
border-right: 1px solid var(--cmg-color-lightgray-005);
min-width: 160px;
}
/* show our custom navigation icon for shrinking and expanding the drawer
Expand Down Expand Up @@ -415,7 +415,7 @@ body.logged-in #top-menu {
}
#main-menu li li a.selected {
color: var(--cmg-color-blue-001);
background-color: var(--cmg-color-lightgray-005);
background-color: var(--cmg-color-lightgray-003);
}
#main-menu .fa-fw {
width: 2em;
Expand All @@ -434,7 +434,7 @@ body.logged-in #top-menu {
font-size: 1.1em;
position: relative;
top: -2px;
color: var(--cmg-color-lightgray-009);
color: var(--cmg-color-lightgray-008);
}
/* CONTENT */
#siteTitle {
Expand Down Expand Up @@ -509,6 +509,7 @@ body.logged-in #top-menu {
.top-search {
margin-top: 0.5em;
padding: 0;
border: 1px solid var(--cmg-color-lightgray-005);
}
.top-search legend .material-icons {
vertical-align: middle;
Expand All @@ -531,14 +532,14 @@ body.logged-in #top-menu {
position: relative;
padding: 0.5em 0.5em 0;
margin: 0;
background-color: var(--cmg-color-lightgray-003);
background-color: var(--cmg-color-lightgray-001);
}
.top-search.open fieldset {
padding-bottom: 0.5em;
}
.top-search legend {
width: 100%;
background-color: var(--cmg-color-lightgray-003);
background-color: var(--cmg-color-lightgray-001);
margin: 0 -0.5em;
padding: 0.5em 0.5em 0;
line-height: 1.8em;
Expand All @@ -564,7 +565,7 @@ body.logged-in #top-menu {
margin: 0 0 0.5em 0;
height: 28px;
padding: 2px 4px;
border: 1px solid var(--cmg-color-lightgray-007);
border: 1px solid var(--cmg-color-lightgray-006);
background-color: var(--cmg-color-white);
}
.top-search label {
Expand Down Expand Up @@ -631,7 +632,7 @@ body.logged-in #top-menu {
background-color: var(--cmg-color-lightgray-003);
}
.top-search-active-filters-remove button:hover {
background-color: var(--cmg-color-lightgray-006);
background-color: var(--cmg-color-lightgray-005);
}
/* RECONCILE TABLE */
#reconcile-table {
Expand All @@ -641,7 +642,7 @@ body.logged-in #top-menu {
}
#reconcile-table td,
#reconcile-table th {
border: 1px solid var(--cmg-color-lightgray-007);
border: 1px solid var(--cmg-color-lightgray-006);
}
#reconcile-table th {
font-weight: normal;
Expand Down Expand Up @@ -675,14 +676,14 @@ body.logged-in #top-menu {
}
/* set the borders on the "new" reference id */
#reconcile-table tbody td:nth-child(2) {
border-left: 2px solid var(--cmg-color-lightgray-008);
border-right: 2px solid var(--cmg-color-lightgray-008);
border-left: 2px solid var(--cmg-color-lightgray-007);
border-right: 2px solid var(--cmg-color-lightgray-007);
}
#reconcile-table tbody tr:first-child td:nth-child(2) {
border-top: 2px solid var(--cmg-color-lightgray-008);
border-top: 2px solid var(--cmg-color-lightgray-007);
}
#reconcile-table tbody tr:last-child td:nth-child(2) {
border-bottom: 2px solid var(--cmg-color-lightgray-008);
border-bottom: 2px solid var(--cmg-color-lightgray-007);
}
/* no zebra for this table */
#reconcile-table tr:nth-child(2n+1) td {
Expand Down Expand Up @@ -852,7 +853,7 @@ ul.data-list li {
background-color: var(--cmg-color-lightgray-003);
}
ul.data-list li:nth-child(2n) {
background-color: var(--cmg-color-lightgray-010); /* note that this is slightly lighter than the .form-list zebra */
background-color: var(--cmg-color-lightgray-009); /* note that this is slightly lighter than the .form-list zebra */
}
ul.data-table li {
background-color: unset;
Expand All @@ -878,13 +879,13 @@ ul.fields li {
ul.form-list {
clear: both;
padding: 0;
border-top: 1px solid var(--cmg-color-lightgray-006);
border-top: 1px solid var(--cmg-color-lightgray-005);
}
ul.form-list li {
background-color: var(--cmg-color-lightgray-001);
border-left: 1px solid var(--cmg-color-lightgray-006);
border-bottom: 1px solid var(--cmg-color-lightgray-006);
border-right: 1px solid var(--cmg-color-lightgray-006);
border-left: 1px solid var(--cmg-color-lightgray-005);
border-bottom: 1px solid var(--cmg-color-lightgray-005);
border-right: 1px solid var(--cmg-color-lightgray-005);
margin: 0;
padding: 0.5em;
list-style: none;
Expand Down Expand Up @@ -940,18 +941,18 @@ ul.field-children {
}
ul.field-children li {
margin: 0;
border-left: 1px solid var(--cmg-color-lightgray-008);
border-right: 1px solid var(--cmg-color-lightgray-008);
border-bottom: 1px solid var(--cmg-color-lightgray-008);
border-left: 1px solid var(--cmg-color-lightgray-007);
border-right: 1px solid var(--cmg-color-lightgray-007);
border-bottom: 1px solid var(--cmg-color-lightgray-007);
}
ul.field-children li:nth-child(1) {
border-top: 1px solid var(--cmg-color-lightgray-008);
border-top: 1px solid var(--cmg-color-lightgray-007);
}
ul.field-children li:nth-child(odd) {
background-color: var(--cmg-color-lightgray-002);
}
ul.field-children li:nth-child(even) {
background-color: var(--cmg-color-lightgray-007);
background-color: var(--cmg-color-lightgray-006);
}
ul.form-list li.field-stack .field-name,
ul.form-list li.field-stack .field-info {
Expand Down Expand Up @@ -1092,17 +1093,17 @@ a.desc::before {
padding: 1em;
}
.co-grid .co-grid-header {
background-color: var(--cmg-color-lightgray-011) !important;
background-color: var(--cmg-color-lightgray-010) !important;
font-weight: bold;
}
.co-grid .co-row {
border-top: 1px solid var(--cmg-color-lightgray-006);
border-top: 1px solid var(--cmg-color-lightgray-005);
}
.co-grid .co-row:nth-child(even) {
background-color: var(--cmg-color-lightgray-002);
}
.co-grid > div:nth-child(2) {
border-top: 1px solid var(--cmg-color-lightgray-011);
border-top: 1px solid var(--cmg-color-lightgray-010);
}
code,
.fixed-width * {
Expand All @@ -1112,8 +1113,8 @@ code,
table {
width: 100%;
border-collapse: collapse;
border-left: 1px solid var(--cmg-color-lightgray-006);
border-right: 1px solid var(--cmg-color-lightgray-006);
border-left: 1px solid var(--cmg-color-lightgray-005);
border-right: 1px solid var(--cmg-color-lightgray-005);
}
.table-container {
overflow: auto;
Expand All @@ -1125,9 +1126,8 @@ th, td {
font-weight: normal;
}
th {
background-color: var(--cmg-color-lightgray-006);
background-color: var(--cmg-color-lightgray-005);
color: var(--cmg-color-black);
font-weight: 600;
}
th a {
color: var(--cmg-color-black);
Expand All @@ -1138,7 +1138,7 @@ th a:hover {
text-decoration: none !important;
}
td {
border-bottom: 1px solid var(--cmg-color-lightgray-006);
border-bottom: 1px solid var(--cmg-color-lightgray-005);
}
tr th:first-child,
tr td:first-child {
Expand All @@ -1152,7 +1152,7 @@ tr.noborder td {
border: none;
}
tr:nth-child(odd) td {
background-color: var(--cmg-color-lightgray-002);
background-color: var(--cmg-color-lightgray-001);
}
tr:nth-child(even) td {
background-color: var(--cmg-color-white);
Expand All @@ -1165,7 +1165,7 @@ td.indented {
}
.linked-row:hover,
.linked-row:hover td {
background-color: var(--cmg-color-lightgray-006) !important;
background-color: var(--cmg-color-lightgray-002) !important;
}
.menuitembutton {
width: 250px;
Expand All @@ -1191,7 +1191,7 @@ td.indented {
line-height: 0;
text-align: center;
background-color: var(--cmg-color-white);
border: 1px solid var(--cmg-color-lightgray-007);
border: 1px solid var(--cmg-color-lightgray-006);
border-radius: 60px;
}
#co-loading-redirect {
Expand Down Expand Up @@ -1272,6 +1272,7 @@ td.indented {
.btn-primary:hover {
background-color: var(--cmg-color-black);
color: var(--cmg-color-white) !important;
border-color: var(--cmg-color-black);
text-decoration: none !important;
}
.btn-primary.disabled,
Expand All @@ -1283,7 +1284,7 @@ td.indented {
}
.btn-default,
.btn-default:active {
background-color: var(--cmg-color-lightgray-006);
background-color: var(--cmg-color-lightgray-005);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.btn-default:hover {
Expand Down
15 changes: 8 additions & 7 deletions app/webroot/css/co-color.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@
* @license Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*
* Colors use the convention --cmg-color-hue-number with optional comments to describe
* how they are used. "number" does not imply color value.
* how they are used. Colors are mostly listed in order of prominence: the most pronounced colors
* are represented by the lowest numbers. The order is otherwise arbitrary and new colors can
* be added by appending to the list and incrementing the number.
*/

:root {
Expand All @@ -42,12 +44,11 @@
--cmg-color-lightgray-002: #f8f8f8; /* background color */
--cmg-color-lightgray-003: #f5f5f5; /* background color, hamburger */
--cmg-color-lightgray-004: #f2f2f2; /* background color */
--cmg-color-lightgray-005: #fafafa; /* background color */
--cmg-color-lightgray-006: #eee; /* background color */
--cmg-color-lightgray-007: #ddd; /* border color */
--cmg-color-lightgray-008: #ccc; /* border color */
--cmg-color-lightgray-009: #bbb; /* icon color */
--cmg-color-lightgray-010: #ededed; /* data-list background color */
--cmg-color-lightgray-005: #eee; /* background color */
--cmg-color-lightgray-006: #ddd; /* border color */
--cmg-color-lightgray-007: #ccc; /* border color */
--cmg-color-lightgray-008: #bbb; /* icon color */
--cmg-color-lightgray-009: #ededed; /* data-list background color */
--cmg-color-lightgray-011: #e8e8e8; /* co-grid background color */

--cmg-color-green-001: #2a2; /* banner */
Expand Down

0 comments on commit ea44c32

Please sign in to comment.