(master): Namespace dropdown-content. Fix styling.

Author: Joe Crick

index.html

@@ -24,7 +24,7 @@
                 <div tabindex="0" class="menu-link pcssc-dropdown">
                     <span></span>
                 </div>
-                <ul class="dropdown-content pure-menu-list pure-menu">
+                <ul class="pcssc-dropdown-content pure-menu-list pure-menu">
                     <li class="pure-menu-item">
                         <a href="#installation" class="pure-menu-link">Installation</a>
                     </li>
@@ -524,8 +524,8 @@ <h3>Toggling Button Label Collapse</h3>
                     <a name="dropdown"></a>
                     <h2 class="content-subhead">Dropdown</h2>
 
-                    <div tabindex="0" class="pure-button pcssc-dropdown">Dropdown Button</div>
-                    <ul class="dropdown-content">
+                    <div tabindex="0" class="pcssc-dropdown pure-button">Dropdown Button</div>
+                    <ul class="pcssc-dropdown-content">
                         <li class="dropdown-menu-item">
                             <button class="dropdown-action-item">Edit</button>
                         </li>
@@ -536,8 +536,8 @@ <h2 class="content-subhead">Dropdown</h2>
 
                     <div style="background: #ffffff; margin-top: 50px; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                             style="margin: 0; line-height: 125%">
-&lt;div tabindex=<span style="color: #a31515">&quot;0&quot;</span> class=<span style="color: #a31515">&quot;pure-button pcssc-dropdown&quot;</span>&gt;Dropdown Button&lt;/div&gt;
-&lt;ul class=<span style="color: #a31515">&quot;dropdown-content&quot;</span>&gt;
+&lt;div tabindex=<span style="color: #a31515">&quot;0&quot;</span> class=<span style="color: #a31515">&quot;pcssc-dropdown pure-button&quot;</span>&gt;Dropdown Button&lt;/div&gt;
+&lt;ul class=<span style="color: #a31515">&quot;pcssc-dropdown-content&quot;</span>&gt;
     &lt;li class=<span style="color: #a31515">&quot;dropdown-menu-item&quot;</span>&gt;
         &lt;button class=<span style="color: #a31515">&quot;dropdown-action-item&quot;</span>&gt;Edit&lt;/button&gt;
     &lt;/li&gt;

main.css

@@ -9,7 +9,7 @@
     pointer-events: none;
     outline: none;
 
-    & + .dropdown-content {
+    & + .pcssc-dropdown-content {
       opacity: 1;
       visibility: visible;
       pointer-events: auto;
@@ -18,7 +18,7 @@
   }
 }
 
-.dropdown-content {
+.pcssc-dropdown-content {
   position: absolute;
   z-index: 1;
   visibility: hidden;

main.css.map

@@ -30,7 +30,7 @@
       display: block;
     }
 
-    .dropdown-content {
+    .pcssc-dropdown-content {
       visibility: visible;
     }
 
@@ -40,11 +40,9 @@
     left: 0;
   }
 
-  .dropdown-content {
+  .pcssc-dropdown-content {
     top: 38px;
     left: -1px;
-    border-radius: 0;
-
   }
 
 }

src/components/dropdown.less

@@ -105,7 +105,7 @@ body {
   .pcssc-collapsing-menu {
     background: @black;
 
-    .dropdown:focus + .dropdown-content {
+    .dropdown:focus + .pcssc-dropdown-content {
       transition: all 0.2s ease-out;
     }
 
@@ -115,7 +115,7 @@ body {
 
   }
 
-  .dropdown-content {
+  .pcssc-dropdown-content {
     z-index: 1;
     transition: visibility 0.5s;
     background-color: @white;
@@ -130,6 +130,7 @@ body {
       padding: 0;
       width: 160px;
       border: 0;
+      border-radius: 0;
 
       @media @medium-device {
         top: 38px;
@@ -180,7 +181,7 @@ body {
 
   }
 
-  .popover {
+  .pcssc-popover {
     background-color: @white;
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 0.3rem;