Merge pull request #17 from rakeshAlgo/style-guide-ui

copy to clipboard UI fixes

Author: amarantha-k

src/css/clipboard.css

@@ -3,8 +3,8 @@
   background: url(../img/copy.png) no-repeat center right/contain;
   width: 24px;
   height: 14px;
-  right: 0.5rem;
-  top: 8px;
+  right: 1rem;
+  top: 12px;
   display: none;
   cursor: pointer;
   font-family: "Source Sans Pro", sans-serif;

src/css/component-frame.css

@@ -49,9 +49,12 @@
   background: var(--color-brand-white);
   padding: 5px 15px;
   left: -15px;
-  top: 50px;
+  top: 60px;
   border-radius: 4px;
   z-index: 1;
+  border-radius: 4px;
+  z-index: 1;
+  box-shadow: 0px 3px 10px -4px var(--color-brand-gray8);
 }
 
 .frame-dropdown .frame-dropdown-list {
@@ -60,14 +63,30 @@
   list-style: none;
 }
 
+ul.frame-dropdown-list li {
+  border-bottom: 1px solid var(--color-brand-gray8);
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+}
+
+ul.frame-dropdown-list li:last-child {
+  border-bottom: 0;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
 .frame-link,
 .frame-item {
-  font-size: 1rem;
+  font-size: var(--font-small);
   color: var(--color-brand-gray4);
   text-decoration: none;
 }
 
 .frame-link:hover,
-.frame-item:hover {
+.frame-item:hover,
+.frame-link:active,
+.frame-item:active,
+.frame-link:visited,
+.frame-item:visited {
   text-decoration: none;
 }

src/css/doc.css

@@ -495,7 +495,7 @@
   color: var(--color-brand-gray1);
   font-weight: var(--weight-normal);
   /* needed to override third-party styles */
-  padding-left: var(--base-small-space);
+  padding-left: var(--base-space);
   padding-right: var(--base-small-space);
   padding-top: var(--base-large-space);
   padding-bottom: var(--base-large-space);
@@ -575,10 +575,10 @@
   line-height: 18px;
   text-transform: uppercase;
   position: absolute;
-  top: 0.375rem;
-  right: 2rem;
+  top: 12px;
+  right: 2.4rem;
   font-family: "Source Sans Pro", sans-serif;
-  padding-right: 6px;
+  padding-right: 0.5rem;
   border-right: 1px solid var(--color-brand-gray9);
 }