Upd

deskpro · Jul 10, 2019 · df3a35f · df3a35f
1 parent 1229052
commit df3a35f
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 12 deletions.
diff --git a/packages/style/src/components/dp-po-breadcrumbs.css b/packages/style/src/components/dp-po-breadcrumbs.css
@@ -29,9 +29,9 @@
   height: 8px;
   left: -14px;
   position: absolute;
-  top: calc(50% - 6px);
+  top: calc(50% - 5px);
   transform: rotate(-45deg);
-  width: 1px;
+  width: 2px;
 }
 
 .dp-po-Breadcrumb-item:not(:first-child)::after {
@@ -43,23 +43,23 @@
   left: -14px;
   position: absolute;
   transform: rotate(45deg);
-  width: 1px;
+  width: 2px;
 }
 
 .dp-po-Breadcrumb-item.is-selected:not(:first-child)::before,
 .dp-po-Breadcrumb-item.is-selected:not(:first-child)::after {
   background-color: var(--brand-primary);
 }
 
-.dp-po-Breadcrumb-item:last-child .dp-po-Breadcrumb-link::after {
+/*.dp-po-Breadcrumb-item:last-child .dp-po-Breadcrumb-link::after {
   background-color: var(--brand-primary);
   content: "";
   height: 2px;
   left: 0;
   position: absolute;
   top: calc(100% + 5px);
   width: 100%;
-}
+}*/
 
 .dp-po-Breadcrumb-link {
   align-items: center;
@@ -76,18 +76,33 @@
 }
 
 .dp-po-Breadcrumb-item:hover .dp-po-Breadcrumb-link {
-  color: var(--brand-primary);
+  /*color: var(--brand-primary);*/
+  color: var(--grey);
+}
+
+.dp-po-Breadcrumb-item:hover .dp-po-Breadcrumb-link::after {
+  background-color: var(--brand-primary);
+  content: "";
+  height: 2px;
+  left: 0;
+  position: absolute;
+  top: calc(100% + 5px);
+  width: 100%;
+}
+
+.dp-po-Breadcrumb-item.is-selected:hover .dp-po-Breadcrumb-link::after {
+  display: none;
 }
 
 .dp-po-Breadcrumb-item:hover + .dp-po-Breadcrumb-item::before,
 .dp-po-Breadcrumb-item:hover + .dp-po-Breadcrumb-item::after {
   background-color: var(--brand-primary);
 }
 
-.dp-po-Breadcrumb-item:hover:not(:first-child)::before,
+/*.dp-po-Breadcrumb-item:hover:not(:first-child)::before,
 .dp-po-Breadcrumb-item:hover:not(:first-child)::after {
   background-color: var(--brand-primary);
-}
+}*/
 
 .dp-po-Breadcrumb-item:first-child .dp-po-Breadcrumb-link,
 .dp-po-Breadcrumb-item.is-selected .dp-po-Breadcrumb-link {

diff --git a/packages/style/src/components/dp-po-dropdown.css b/packages/style/src/components/dp-po-dropdown.css
@@ -76,6 +76,7 @@
 .dp-po-dropdown-menu .dp-po-dropdown-menu-item:hover {
   background-color: var(--info-light);
   color: var(--brand-primary);
+  opacity: 0.8;
 }
 
 /* dropdown/search-expand/text-icon */

diff --git a/packages/style/src/demo/full-demo.css b/packages/style/src/demo/full-demo.css
@@ -2,6 +2,10 @@ body {
 	color: var(--grey-darkest);
 }
 
+a:hover {
+  opacity: 0.8;
+}
+
 .dp-Template {
 	position: relative;
 }
@@ -851,7 +855,7 @@ body {
 }
 
 .subscribe--dropdown .dp-po-dropdown-atom .dp-po-Icon {
-  margin: 0 15px;
+  margin: 0 15px 0 19px;
 }
 
 .subscribe--dropdown .dp-po-dropdown-atom.is-onselected .Icon--check {
@@ -987,14 +991,19 @@ body {
 .dp-po-List-question {
   color: var(--grey-dark);
   list-style: none;
-  margin: 20px 0 25px 15px;
+  margin: 20px 0 25px 20px;
   padding: 0;
 }
 
 .dp-po-List-question li a {
   color: var(--grey-dark);
 }
 
+.dp-po-List-question li a:hover {
+  color: var(--brand-primary);
+  opacity: 0.8;
+}
+
 .dp-po-List-question li:hover {
   text-decoration: underline;
 }
@@ -1015,7 +1024,7 @@ body {
   border-width: 8px 0 8px 8px;
   content: "";
   height: 0;
-  left: -15px;
+  left: -20px;
   position: absolute;
   top: calc(50% - 8px);
   width: 0;
@@ -1255,7 +1264,17 @@ body {
 }
 
 .dp-po-sort.is-active .dp-po-dropdown-menu.Menu--tick {
-	display: block;
+  display: block;
+}
+
+.dp-po-sort .Icon--caret-up.Icon--primary {
+  transform: rotate(180deg);
+  transition: transform .2s;
+}
+
+.dp-po-sort.is-active .Icon--caret-up.Icon--primary {
+  transform: rotate(0deg);
+  transition: transform .2s;
 }
 
 .dp-po-dropdown-menu.Menu--tick .dp-po-dropdown-menu-item {

diff --git a/packages/style/src/patterns/news.css b/packages/style/src/patterns/news.css
@@ -169,6 +169,7 @@
   min-width: 1px;
   padding: 0 15px;
   background-color: var(--white);
+  font: var(--p-2-bold);
 }
 
 .dp-po-article-title ~ .dp-po-Link {