diff --git a/apps/communications/contacts/elements/phone_details.html b/apps/communications/contacts/elements/phone_details.html
index b3513dd7e1a1..f91ab82b5886 100644
--- a/apps/communications/contacts/elements/phone_details.html
+++ b/apps/communications/contacts/elements/phone_details.html
@@ -11,10 +11,10 @@
diff --git a/apps/communications/contacts/test/marionette/lib/contacts.js b/apps/communications/contacts/test/marionette/lib/contacts.js
index 8f85bbc43e1c..97d83b5179c3 100644
--- a/apps/communications/contacts/test/marionette/lib/contacts.js
+++ b/apps/communications/contacts/test/marionette/lib/contacts.js
@@ -41,7 +41,7 @@ Contacts.Selectors = {
details: '#view-contact-details',
detailsEditContact: '#edit-contact-button',
detailsTelLabelFirst: '#phone-details-template-0 h2',
- detailsTelButtonFirst: 'button.icon-call[data-tel]',
+ detailsTelButtonFirst: '.button.icon-call[data-tel]',
detailsEmail: '#contact-detail-inner #email-details-template-0 div.item',
detailsAddress: '#contact-detail-inner #address-details-template-0 div.item',
detailsOrg: '#contact-detail-inner #org-title',
diff --git a/apps/communications/dialer/style/buttons.css b/apps/communications/dialer/style/buttons.css
index e14240bf7732..7f231083eb6f 100644
--- a/apps/communications/dialer/style/buttons.css
+++ b/apps/communications/dialer/style/buttons.css
@@ -4,6 +4,10 @@
* had to be made more specific. We should remove this file and use that one
* instead.
*/
+/* ----------------------------------
+ * Buttons
+ * ---------------------------------- */
+
.activity::-moz-focus-inner {
border: none;
outline: none;
@@ -17,7 +21,7 @@
margin: 0 0 1rem;
padding: 0 1.2rem;
-moz-box-sizing: border-box;
- /*display: inline-block;*/
+ display: inline-block;
vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap;
@@ -34,20 +38,94 @@
outline: none;
}
+/* Recommend */
+.activity.recommend {
+ background-color: #00caf2;
+ color: #fff;
+}
+
+/* Danger */
+.danger.activity {
+ background-color: #e51e1e;
+ color: #fff;
+}
+
+/* Pressed */
.activity:active {
background-color: #b2f2ff;
color: #fff;
}
+/* Icons */
+.activity[data-icon] {
+ position: relative;
+}
+
+.activity[data-icon]:before {
+ position: absolute;
+ top: 50%;
+ margin-top: -1.5rem;
+ right: 1.5rem;
+ line-height: 3rem;
+}
+
+.activity[data-icon]:active:before {
+ color: #fff;
+}
+
+/* Pressed with dark skin */
+.skin-dark .activity:active {
+ background-color: #00aacc;
+}
+
+/* Disabled */
+.activity[aria-disabled="true"] {
+ background-color: rgba(0,0,0,0.05);
+ color: #c7c7c7;
+ pointer-events: none;
+}
+
+.activity[aria-disabled="true"].recommend {
+ background-color: #97cbd5;
+ color: rgba(255,255,255,0.5);
+}
+
+.activity[aria-disabled="true"].danger {
+ background-color: #eb7474;
+ color: rgba(255,255,255,0.5);
+}
+
+/* Disabled with dark background */
+.skin-dark .activity[aria-disabled="true"] {
+ background-color: #565656;
+ color: rgba(255,255,255,0.4);
+}
+
+.skin-dark .activity[aria-disabled="true"].recommend {
+ background-color: #006579;
+}
+
+.skin-dark .activity[aria-disabled="true"].danger {
+ background-color: #730f0f;
+}
+
+.activity[aria-disabled="true"]::-moz-selection {
+ -moz-user-select: none;
+}
+
+/* ----------------------------------
+ * Buttons inside lists
+ * ---------------------------------- */
+
li .activity {
position: relative;
- text-align: left;
+ text-align: start;
border: 0.1rem solid #c7c7c7;
background: rgba(0,0,0,0.05);
margin: 0 0 1rem;
overflow: hidden;
border-radius: 0;
- /*display: flex;*/
+ display: flex;
height: auto;
min-height: 4rem;
text-overflow: initial;
@@ -56,6 +134,21 @@ li .activity {
padding: 1rem 1.2rem;
}
+/* Press */
+li .activity:active:after {
+ opacity: 0;
+}
+
+/* Disabled */
+li .activity[aria-disabled="true"] {
+ opacity: 0.5;
+}
+
+/* Icons */
+li .activity.icon {
+ -moz-padding-end: 4rem;
+}
+
li .activity.icon:before {
content: "";
width: 3rem;
@@ -68,15 +161,217 @@ li .activity.icon:before {
pointer-events: none;
}
-html[dir="rtl"] li .activity {
- text-align: right;
+li .activity.icon-view:active {
+ background-color: #b2f2ff;
+}
+
+li .activity.icon-view:before {
+ background-image: url(buttons/images/forward-light.svg);
+ background-size: 3rem;
+ right: 0;
+}
+
+li .activity[data-icon]:before {
+ right: 1rem;
+}
+
+li .activity[data-icon="expand"]:before {
+ color: #00aac5;
+ top: unset;
+ bottom: 0;
+}
+
+li .activity[data-icon="expand"][aria-disabled="true"]:before {
+ color: #A9A9A9;
+}
+
+li .activity[data-icon="forward"]:before {
+ color: #686f72;
+}
+
+/* Getting more space for text, as icon is shorter */
+li .activity.icon-dialog {
+ -moz-padding-end: 3rem;
+}
+
+li .activity.icon-dialog:before {
+ width: 0;
+ height: 0;
+ top: auto;
+ right: 0.8rem;
+ bottom: 0.5rem;
+ border-top: 0.7rem solid transparent;
+ border-bottom: 0.7rem solid transparent;
+ border-left: 0.7rem solid #00aac5;
+ transform: rotate(45deg);
+ z-index: 1;
+}
+
+li .activity[aria-disabled="true"].icon-dialog:before {
+ border-left: 0.7rem solid #a9a9a9;
+}
+
+/* ----------------------------------
+ * Theme: Dark
+ * ---------------------------------- */
+
+.skin-dark li .activity {
+ background-color: #454545;
+ border: none;
+ color: #fff;
+ font-weight: normal;
+}
+
+.skin-dark li .activity:active {
+ background-color: #00aacc;
+}
+
+.skin-dark li .activity.icon-view:active {
+ background-color: #00aacc;
+}
+
+.skin-dark li .activity.icon-dialog:active:before {
+ border-left: 0.7rem solid #b2f2ff;
+}
+
+.skin-dark li .activity[aria-disabled="true"] {
+ background-color: #454545;
+ opacity: 0.5;
+}
+
+/* Inputs inside of .button */
+body[role="application"] .activity input {
+ border: 0;
+ background: none;
+}
+
+/* select */
+select {
+ width: 100%;
+ -moz-box-sizing: border-box;
+ font-family: sans-serif;
+ font-style: italic;
+ font-size: 1.6rem;
+ color: #333;
+ margin: 0 0 1rem;
+ padding: 0;
+ -moz-padding-start: 1.1rem;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ height: 4rem;
+ border: 0.1rem solid #c7c7c7;
+ background: rgba(0,0,0,0.05);
+}
+
+.skin-dark select {
+ background-color: rgba(87, 87, 87, 0.8);
+ border: none;
+ color: #fff;
}
-html[dir="rtl"] li .activity.icon {
- padding: 1rem 1.3rem 1rem 4rem;
+/* remove dotted outline */
+select:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 #333;
}
+.skin-dark select:-moz-focusring {
+ text-shadow: 0 0 0 #fff;
+}
+
+/* Hides dropdown arrow until bug #649849 is fixed */
+.activity.icon select,
+.activity[data-icon] select {
+ position: absolute;
+ top: -0.6rem;
+ left: 0;
+ width: calc(100% + 3rem);
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ -moz-padding-end: 5rem;
+ text-indent: 0;
+ font-weight: 400;
+ font-size: 1.7rem;
+ /*
+ The select element uses the text color to determine the color of the outline.
+ We put a text shadow with needed offset and no blur, so that replaces the text.
+ */
+ color: rgba(0,0,0,0);
+ text-shadow: 1rem 0.5rem 0 #333;
+ border: none;
+ background: none;
+}
+
+.activity.icon select option,
+.activity[data-icon] select option {
+ color: #000;
+ border: 0;
+ padding: 0.6rem 1.3rem;
+ text-shadow: 0 0 0 rgba(0,0,0,0);
+}
+
+.activity.icon-dialog {
+ overflow: hidden;
+}
+
+.skin-dark .activity.icon select,
+.skin-dark .activity[data-icon] select {
+ text-shadow: 1rem 0.5rem 0 #fff;
+}
+
+/******************************************************************************
+ * Right-To-Left layout
+ */
+
+html[dir="rtl"] .activity[data-icon]:before {
+ left: 1.5rem;
+ right: unset;
+ transform: scale(-1, 1);
+}
+
+html[dir="rtl"] li .activity.icon-view:before {
+ left: 0;
+ right: unset;
+ transform: rotate(180deg);
+}
+
+html[dir="rtl"] li .activity[data-icon]:before {
+ left: 1rem;
+ right: unset;
+}
+
+
html[dir="rtl"] li .activity.icon:before {
- right: auto;
left: 0.5rem;
+ right: unset;
+}
+
+
+html[dir="rtl"] li .activity.icon-dialog:before {
+ left: 0.8rem;
+ right: unset;
+ transform: rotate(315deg);
+ border-left: unset;
+ border-right: 0.7rem solid #00aac5;
+}
+
+html[dir="rtl"] li .activity[aria-disabled="true"].icon-dialog:before {
+ border-left: unset;
+ border-right: 0.7rem solid #a9a9a9;
+}
+
+html[dir="rtl"] .skin-dark li .activity.icon-dialog:active:before {
+ border-left: unset;
+ border-right: 0.7rem solid #b2f2ff;
+}
+
+
+/* Hides dropdown arrow until bug #649849 is fixed */
+html[dir="rtl"] .activity.icon-dialog select,
+html[dir="rtl"] .activity[data-icon] select {
+ left: unset;
+ right: 0.3rem; /* .3rem space because of italic */
+ text-indent: 1rem;
}
diff --git a/build/csslint/xfail.list b/build/csslint/xfail.list
index 894b49f59773..c137599c81d0 100644
--- a/build/csslint/xfail.list
+++ b/build/csslint/xfail.list
@@ -70,7 +70,7 @@ shared/style/value_selector.css 0 1
shared/style/edit_mode.css 0 2
shared/style/action_menu.css 0 1
shared/style/headers.css 0 0
-shared/style/contacts/contacts_buttons.css 0 8
+shared/style/contacts/contacts_buttons.css 0 7
shared/pages/import/style/import.css 0 4
shared/pages/import/style/search.css 0 3
shared/style/action_menu.css 0 1
diff --git a/shared/style/contacts/contacts_buttons.css b/shared/style/contacts/contacts_buttons.css
index e4b56afc5438..21fb056861fb 100644
--- a/shared/style/contacts/contacts_buttons.css
+++ b/shared/style/contacts/contacts_buttons.css
@@ -3,7 +3,7 @@
display: none !important;
}
-li button.icon-call:before {
+li .icon-call:before {
background-image: url("/shared/style/contacts/images/call.png") !important;
}
@@ -16,15 +16,26 @@ li button.send-sms {
}
li button.icon-email:before {
background-image: url("/shared/style/contacts/images/mail.png") !important;
+}
+
+.has-preferred-sim .button.icon-call {
+ display: flex;
+ align-items: center;
+ padding: 0 1.2rem;
}
-.has-preferred-sim .icon-call b {
- right: 6.5rem;
+.has-preferred-sim .button.icon-call b {
+ position: unset;
+ order: 1;
+ flex: 1 1 auto;
}
-.has-preferred-sim .icon-call:before {
- width: 9.5rem !important;
+.has-preferred-sim .activity.icon-call:before {
+ margin-top: 0;
background-size: 3rem !important;
+ position: unset;
+ order: 2;
+ flex: 0 0 auto;
}
.call-action .js-sim-indication {
@@ -35,12 +46,9 @@ li button.icon-email:before {
line-height: 4rem;
height: 4rem;
text-align: end;
- width: 5.5rem;
- right: 1rem;
- top: 0;
margin: 0;
- position: absolute;
background: url("/shared/elements/gaia_sim_picker/images/long-tap-indicator.png") no-repeat right bottom 0.2rem / 1.4rem 1rem;
+ order: 3;
}
.has-preferred-sim .call-action .js-sim-indication {
@@ -87,7 +95,7 @@ li button.icon-email:before {
-moz-margin-end: 0;
}
-.item-media.pull-right button {
+.item-media.pull-right .activity {
-moz-padding-end: 3rem;
}
@@ -114,7 +122,7 @@ li button.icon-email:before {
float: right;
}
-li button.activity > b {
+li .activity > b {
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
@@ -136,14 +144,7 @@ li button.activity > b {
}
/* RTL View */
-html[dir="rtl"] .has-preferred-sim .icon-call b {
- left: 6.5rem;
- right: unset;
-}
-
html[dir="rtl"] .call-action .js-sim-indication {
- left: 1rem;
- right: unset;
background-position: left bottom 0.2rem;
}
@@ -159,7 +160,11 @@ html[dir="rtl"] .pull-right {
float: left;
}
-html[dir="rtl"] li button.activity > b {
+html[dir="rtl"] li .activity > b {
left: 3rem;
right: 1.5rem;
}
+
+html[dir="rtl"] li .icon-call {
+ text-align: right;
+}