Skip to content

erp5
erp5
Commit 5f46b0b1 authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

[erp5_web_renderjs_ui] Factorize active, hover, focus states 

Drop gradient image, which can not be animated with css transition
parent 9baa6ebf
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 55 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.css
View file @ 5f46b0b1
......@@ -238,6 +238,10 @@ a[href=""] {
a:hover {
text-decoration: underline;
}
a:focus {
outline-offset: -2px;
outline: 2px solid #3388cc;
}
a[accesskey]:after {
content: " [" attr(accesskey) "] ";
}
......@@ -299,7 +303,7 @@ textarea:focus {
}
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus,
textarea:focus {
box-shadow: 0 0 12px #3388cc;
box-shadow: 0 0 12px #3388cc;
}
select {
width: 100%;
......@@ -318,10 +322,8 @@ select {
outline-offset: 0;
}
select:hover,
select:active,
select:focus {
select:active {
background-color: #e0e0e0;
background: linear-gradient(#f5f5f5, #eeeeee);
}
textarea {
height: 15em;
......@@ -350,6 +352,7 @@ button {
border: none;
background-color: #FFFFFF;
color: #1F1F1F;
transition: background-color 0.2s ease-out;
cursor: pointer;
}
input[type=submit]::-moz-focus-inner,
......@@ -357,6 +360,17 @@ button::-moz-focus-inner {
border: 0px;
padding: 0px;
}
input[type=submit]:hover,
button:hover,
input[type=submit]:focus,
button:focus {
outline: none;
background-color: #e0e0e0;
}
input[type=submit]:active,
button:active {
background-color: #adadad;
}
/**********************************************
* Media
**********************************************/
......@@ -465,6 +479,10 @@ div[data-gadget-scope='panel'] ul li a {
div[data-gadget-scope='panel'] ul li a::before {
width: 2em;
}
div[data-gadget-scope='panel'] ul li a:hover,
div[data-gadget-scope='panel'] ul li a:active {
background-color: #2b2b2b;
}
/**********************************************
* Gadget: editor panel
**********************************************/
......@@ -539,18 +557,23 @@ div[data-gadget-scope='header'] .ui-header {
display: flex;
width: 100%;
flex-flow: row wrap;
color: #FFFFFF;
}
@media only screen and (min-width: 62em) {
div[data-gadget-scope='header'] .ui-header {
margin-left: 17em;
}
}
div[data-gadget-scope='header'] .ui-header button,
div[data-gadget-scope='header'] .ui-header a {
color: #FFFFFF;
background-color: #085078;
}
div[data-gadget-scope='header'] .ui-header button:hover,
div[data-gadget-scope='header'] .ui-header a:hover,
div[data-gadget-scope='header'] .ui-header button:active,
div[data-gadget-scope='header'] .ui-header a:active {
background-color: #085078;
background-image: linear-gradient(#0E81C2, #85D8CE);
background-color: #0e90d8;
}
div[data-gadget-scope='header'] .ui-header > .ui-btn-left button,
div[data-gadget-scope='header'] .ui-header > .ui-btn-left a {
......@@ -560,8 +583,6 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
display: block;
line-height: 2.6em;
color: #FFFFFF;
background-color: #085078;
width: 8em;
}
@media only screen and (max-width: 28em) {
......@@ -613,7 +634,6 @@ div[data-gadget-scope='header'] .ui-header h1 {
line-height: 2.6em;
flex: 1;
background-color: #085078;
color: #FFFFFF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
......@@ -628,7 +648,6 @@ div[data-gadget-scope='header'] .ui-header h1 > span {
}
div[data-gadget-scope='header'] .ui-header h1 a {
display: block;
color: #FFFFFF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
......@@ -654,6 +673,9 @@ div[data-gadget-scope='header'] .ui-header ul {
display: table;
table-layout: fixed;
}
div[data-gadget-scope='header'] .ui-header ul a {
background-color: #0E81C2;
}
@media only screen and (min-width: 62em) {
div[data-gadget-scope='header'] .ui-header ul {
height: 100%;
......@@ -669,7 +691,6 @@ div[data-gadget-scope='header'] .ui-header ul {
min-width: 5em;
line-height: 2.6em;
height: 100%;
color: #f8fff3;
white-space: nowrap;
overflow: hidden;
}
......@@ -689,7 +710,6 @@ div[data-gadget-scope='header'] .ui-header ul {
display: block;
padding-top: 0.8em;
padding-bottom: 0.8em;
color: #f8fff3;
white-space: nowrap;
overflow: hidden;
}
......@@ -756,13 +776,8 @@ div[data-gadget-scope='header'] .ui-header ul {
float: right;
}
.gadget-content ul.document-listview li a:hover,
.gadget-content ul.document-listview li a:active,
.gadget-content ul.document-listview li a:focus {
.gadget-content ul.document-listview li a:active {
background-color: #e0e0e0;
background: linear-gradient(#f5f5f5, #eeeeee);
}
.gadget-content ul.document-listview li a:focus {
box-shadow: 0 0 12px #3388cc;
}
.gadget-content ul.document-listview li:first-child {
border-top-left-radius: 0.325em;
......@@ -891,11 +906,11 @@ div[data-gadget-scope='erp5_searchfield'] button {
color: #1F1F1F;
}
.document_table table tbody tr:nth-child(even) {
background-color: #eeeeee;
background-color: rgba(0, 0, 0, 0.04);
background-color: #f2f2f2;
}
.document_table table tbody tr:hover {
background: #e4ebf1;
.document_table table tbody tr:hover,
.document_table table tbody tr:active {
background-color: #e0e0e0;
}
@media only screen and (min-width: 62em), only screen and (min-width: 28em) and (max-width: 62em) {
.document_table table tbody a {
......@@ -939,7 +954,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
right: 0.5em;
top: 50%;
margin-top: -0.75em;
background: #FFFFFF;
background-color: #FFFFFF;
border-radius: 0.5em;
width: 1em;
text-align: center;
......@@ -983,6 +998,10 @@ div[data-gadget-scope='erp5_searchfield'] button {
.document_table table tfoot .ui-controlgroup-controls a:last-of-type {
margin-right: 0;
}
.document_table table tfoot .ui-controlgroup-controls a:hover,
.document_table table tfoot .ui-controlgroup-controls a:active {
background-color: #e0e0e0;
}
@media only screen and (max-width: 28em) {
.document_table table tfoot .ui-controlgroup-controls a {
width: 2em;
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.xml
View file @ 5f46b0b1
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>952.27049.47586.45516</string> </value>
<value> <string>952.31797.52108.19336</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1467967442.23</float>
<float>1468252822.53</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
View file @ 5f46b0b1
......@@ -27,6 +27,9 @@
@colorsubheaderbackground: #0E81C2;
@colorsubheaderlink: #f8fff3;
@colorfocus: #3388cc;
@colorblocklinkbackground: #e0e0e0;
@panelbackgroundcolor: #444444;
@radius: .325em;
......@@ -105,7 +108,6 @@
/**********************************************
......@@ -267,6 +269,10 @@ mark {
&:hover {
text-decoration: underline;
}
&:focus {
outline-offset: -2px;
outline: 2px @border-type @colorfocus;
}
}
a {
......@@ -336,11 +342,10 @@ input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio])
}
&:active, &:focus {
// outline: 2px @border-type @colortextboxbackground;
outline-offset: 0;
}
&:focus {
box-shadow: 0 0 12px #3388cc;
box-shadow: 0 0 12px @colorfocus;
}
}
......@@ -364,10 +369,9 @@ select {
outline-offset: 0;
&:hover, &:active, &:focus {
background-color: #e0e0e0;
background: linear-gradient(#f5f5f5, #eeeeee);
}
&:hover, &:active {
background-color: @colorblocklinkbackground;
}
}
textarea {
......@@ -405,6 +409,16 @@ input[type=submit], button {
background-color: @colorbackground;
color: @colorforeground;
transition: background-color 0.2s ease-out;
&:hover, &:focus {
outline: none;
background-color: @colorblocklinkbackground;
}
&:active {
// box-shadow: inset 0 0 0 5px darken(@colorblocklinkbackground, 10%);
background-color: darken(@colorblocklinkbackground, 20%);
}
cursor: pointer;
}
......@@ -527,6 +541,9 @@ div[data-gadget-scope='panel'] {
&::before {
width: 2em;
}
&:hover, &:active {
background-color: darken(@panelbackgroundcolor, 10%);
}
}
}
}
......@@ -636,10 +653,13 @@ div[data-gadget-scope='header'] .ui-header {
margin-left: @panelwidth;
}
color: @white;
button, a {
color: @white;
background-color: @colorheaderbackground;
&:hover, &:active {
background-color: @colorheaderbackground;
background-image: linear-gradient(#0E81C2, #85D8CE);
background-color: lighten(@colorheaderbackground, 20%);
}
}
......@@ -656,8 +676,6 @@ div[data-gadget-scope='header'] .ui-header {
display: block;
line-height: @headerheight;
color: @white;
background-color: @colorheaderbackground;
// https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/
// Default size
......@@ -706,9 +724,8 @@ div[data-gadget-scope='header'] .ui-header {
text-align: left;
line-height: @headerheight;
flex: 1;
background-color: @colorheaderbackground;
color: @white;
background-color: @colorheaderbackground;
// XXX Restore border
// border-left: 1px solid rgba(255, 255, 255, 0.55);
......@@ -729,7 +746,6 @@ div[data-gadget-scope='header'] .ui-header {
// Clickable title
a {
display: block;
color: @white;
// Do not put link on multi line in case of small screen
white-space: nowrap;
......@@ -765,6 +781,10 @@ div[data-gadget-scope='header'] .ui-header {
display: table;
table-layout: fixed;
a {
background-color: @colorsubheaderbackground;
}
@media @desktop {
height: 100%;
......@@ -782,9 +802,6 @@ div[data-gadget-scope='header'] .ui-header {
line-height: @headerheight;
height: 100%;
color: @colorsubheaderlink;
white-space: nowrap;
overflow: hidden;
......@@ -814,8 +831,6 @@ div[data-gadget-scope='header'] .ui-header {
padding-bottom: 0.2em;
}
color: @colorsubheaderlink;
white-space: nowrap;
overflow: hidden;
......@@ -885,12 +900,8 @@ div[data-gadget-scope='header'] .ui-header {
text-align: right;
float:right;
}
&:hover, &:active, &:focus {
background-color: #e0e0e0;
background: linear-gradient(#f5f5f5, #eeeeee);
}
&:focus {
box-shadow: 0 0 12px #3388cc;
&:hover, &:active {
background-color: @colorblocklinkbackground;
}
}
&:first-child {
......@@ -1046,11 +1057,10 @@ div[data-gadget-scope='erp5_searchfield'] {
tr {
&:nth-child(even) {
background-color: #eeeeee;
background-color: rgba(0, 0, 0, .04);
background-color: darken(@colorbackground, 5%);
}
&:hover {
background: #e4ebf1;
&:hover, &:active {
background-color: @colorblocklinkbackground
}
}
......@@ -1099,7 +1109,7 @@ div[data-gadget-scope='erp5_searchfield'] {
top: 50%;
margin-top: -0.75em;
background: @colorbackground;
background-color: @colorbackground;
border-radius: 0.5em;
width: 1em;
text-align: center;
......@@ -1148,6 +1158,10 @@ div[data-gadget-scope='erp5_searchfield'] {
margin-right: 0;
}
&:hover, &:active {
background-color: @colorblocklinkbackground;
}
@media @smartphone {
.hide_text(@width: 2em);
}
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7