adding #10

dist/index.html

@@ -56,6 +56,12 @@
                 <button class="button button--selected">
                     Hover
                 </button>
+                <button class="button button--outline">
+                    Outline
+                </button>
+                <button class="button button--danger button--outline">
+                    Danger Outline
+                </button>
             </div>
         </div>
 
@@ -122,6 +128,21 @@
             </div>
         </div>
 
+        <div class="grid">
+            <div class="col-12">
+                <h2>Content</h2>
+                <div class="content">
+                    <p>
+                    </p>
+                    <ul>
+                        <li></li>
+                        <li></li>
+                        <li></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
         <div class="grid">
             <div class="col-12">
                 <h2>Badge</h2>
@@ -214,10 +235,10 @@
                             Do you really wan't to delete all files?
                         </div>
                         <div class="modal__footer">
-                            <button class="button button--danger" onclick="closeModal()">
+                            <button class="button button--outline button--danger" onclick="closeModal()">
                                 Confirm
                             </button>
-                            <button class="button float-right" onclick="closeModal()">
+                            <button class="button button--outline float-right" onclick="closeModal()">
                                 Reject
                             </button>
                         </div>

dist/plain-ui.css

@@ -4808,7 +4808,10 @@ body {
   }
 }
 .button--small {
-  font-size: 0.8em;
+  font-size: 0.8rem;
+}
+.button--outline {
+  background-color: transparent;
 }
 .button--no-style {
   margin: 0;
@@ -4844,6 +4847,14 @@ body {
 .button--danger:focus, .button--danger:active {
   outline: 2px solid #e79797;
 }
+.button--outline:hover {
+  color: #3e3e3e;
+  border-color: #8b8b8b;
+  background-color: transparent;
+}
+.button--danger.button--outline:hover {
+  border-color: #e38383;
+}
 
 .field-group {
   margin-bottom: 1.2em;
@@ -5205,10 +5216,6 @@ img.media {
   transform: scale(0);
   max-width: 500px;
 }
-.modal__inner .button {
-  color: white;
-  background-color: transparent;
-}
 .modal__title {
   font-size: 2rem;
   text-align: center;
@@ -5224,6 +5231,9 @@ img.media {
 .modal__body {
   margin-bottom: 1.5rem;
 }
+.modal .button {
+  color: white;
+}
 .modal:before {
   position: fixed;
   top: 0;

src/scss/_core.scss

@@ -23,7 +23,7 @@
         color: $plain-ui__link-light;
 
         &:hover {
-            //color: $plain-ui__link-hover;
+            color: $plain-ui__link-hover;
         }
 
         &:focus {

src/scss/components/_button.scss

@@ -37,11 +37,11 @@
         }
 
         &--small {
-            font-size: 0.8em;
+            font-size: 0.8rem;
         }
 
         &--outline {
-            
+            background-color: transparent;
         }
 
         &--no-style {
@@ -89,5 +89,19 @@
                 outline: 2px solid lighten($plain-ui__danger-light, 15%);
             }
         }
+
+        &--outline {
+            &:hover {
+                color: $plain-ui__primary-light;
+                border-color: lighten($plain-ui__primary-light, 30%);
+                background-color: transparent;
+            }
+        }
+
+        &--danger.button--outline {
+            &:hover {
+                border-color: lighten($plain-ui__danger-light, 10%);
+            }
+        }
     }
 }

src/scss/components/_modal.scss

@@ -35,11 +35,6 @@
             transform: scale(0);
 
             max-width: 500px;
-
-            .button {
-                color: white;
-                background-color: transparent;
-            }
         }
 
         &__title {
@@ -62,6 +57,10 @@
             margin-bottom: 1.5rem;
         }
 
+        .button {
+            color: white;
+        }
+
         &:before {
             position: fixed;
             top: 0;