Merge pull request #129 from ciar4n/quickicons

Quickicons style detailing
joomla · Nov 7, 2016 · b446aaa · b446aaa
2 parents 5eee53a + f954e7f
commit b446aaa
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 27 deletions.
diff --git a/administrator/templates/atum/css/template.css b/administrator/templates/atum/css/template.css
@@ -7770,24 +7770,72 @@ legend {
       padding: 8px 10px;
       font-size: 14px; } }
 
-.quick-icons a {
-  display: block;
-  padding: 30px 0;
-  margin-bottom: 15px;
-  color: #fff;
-  text-align: center;
-  text-transform: uppercase;
-  background: linear-gradient(to right, #27283a 0%, #163f46 50%, #27283a 100%); }
-  .quick-icons a:hover, .quick-icons a:focus {
-    text-decoration: none;
-    transition: transform .3s ease;
-    transform: scale(1.05); }
-
-.quick-icons .danger a {
-  background: #d9534f; }
-
-.quick-icons .success a {
-  background: #5cb85c; }
+.quick-icons {
+  margin-bottom: -15px; }
+  .quick-icons *, .quick-icons *::before, .quick-icons *::after {
+    transition: all .25s ease; }
+  .quick-icons a {
+    position: relative;
+    display: block;
+    padding: 2px 0;
+    margin-bottom: 15px;
+    overflow: hidden;
+    color: #fff;
+    text-align: center;
+    text-transform: uppercase;
+    background-color: #27283a;
+    border-radius: 0.25rem; }
+    .quick-icons a:hover, .quick-icons a:focus {
+      text-decoration: none; }
+      .quick-icons a:hover::before, .quick-icons a:focus::before {
+        color: #444565; }
+    .quick-icons a > * {
+      vertical-align: middle; }
+    .quick-icons a span {
+      position: relative;
+      display: inline;
+      font-size: .85em;
+      font-weight: bold;
+      letter-spacing: .4px;
+      line-height: 2em; }
+      .quick-icons a span[class*=" icon-"], .quick-icons a span[class^="icon-"] {
+        margin-right: .1em;
+        font-size: 2.5em;
+        font-weight: normal; }
+    .quick-icons a::before {
+      position: absolute;
+      top: -100px;
+      right: -40px;
+      font-family: FontAwesome;
+      font-size: 10em;
+      color: #313349;
+      content: "\f1aa";
+      transform: rotate(20deg); }
+    .quick-icons a::after {
+      position: absolute;
+      right: 100%;
+      bottom: 0;
+      left: 0;
+      height: 8px;
+      content: "";
+      background: #3d3e54;
+      transition-duration: .7s; }
+  .quick-icons .danger a {
+    background: #d9534f; }
+    .quick-icons .danger a::after {
+      right: 0;
+      background: #d9534f; }
+    .quick-icons .danger a::before {
+      color: #df706c; }
+  .quick-icons .success a {
+    background: #5cb85c; }
+    .quick-icons .success a::after {
+      right: 0;
+      background: #5cb85c; }
+    .quick-icons .success a::before {
+      color: #75c375; }
+  .quick-icons [id*="plg_quickicon"] a, .quick-icons [id*="plg_quickicon"] a::before {
+    transition-delay: .4s; }
 
 .js-stools {
   width: 100%; }

diff --git a/administrator/templates/atum/css/template.css.map b/administrator/templates/atum/css/template.css.map
diff --git a/administrator/templates/atum/css/template.min.css b/administrator/templates/atum/css/template.min.css
diff --git a/administrator/templates/atum/scss/blocks/_quickicons.scss b/administrator/templates/atum/scss/blocks/_quickicons.scss
@@ -1,28 +1,86 @@
 // Quick Icons
 
 .quick-icons {
+  margin-bottom: -15px;
+  *, *::before, *::after {
+    transition: all .25s ease;
+  }
   a {
+    position: relative;
     display: block;
-    padding: 30px 0;
+    padding: 2px 0;
     margin-bottom: 15px;
+    overflow: hidden;
     color: $white;
     text-align: center;
     text-transform: uppercase;
-    background: linear-gradient(to right, $atum-gradient-outer 0%, $atum-gradient-inner 50%, $atum-gradient-outer 100%);
-    transition: -webkit-transform .3s ease;
-
+    background-color: $atum-template-color;
+    border-radius: $border-radius;
     &:hover,
     &:focus {
       text-decoration: none;
-      transition: transform .3s ease;
-      transform: scale(1.05);
+      &::before {
+        color: lighten($atum-template-color, 14%);
+      }
+    }
+    > * {
+      vertical-align: middle;
+    }
+    span {
+      position: relative;
+      display: inline;
+      font-size: .85em;
+      font-weight: bold;
+      letter-spacing: .4px;
+      line-height: 2em;
+      &[class*=" icon-"], &[class^="icon-"] {
+        margin-right: .1em;
+        font-size: 2.5em;
+        font-weight: normal;
+      }
+    }
+    &::before {
+      position: absolute;
+      top: -100px;
+      right: -40px;
+      font-family: FontAwesome;
+      font-size: 10em;
+      color: lighten($atum-template-color, 5%);
+      content: "\f1aa";
+      transform: rotate(20deg);
+    }
+    &::after {
+      position: absolute;
+      right: 100%;
+      bottom: 0;
+      left: 0;
+      height: 8px;
+      content: "";
+      background: #3d3e54;
+      transition-duration: .7s;
     }
   }
-
   .danger a {
     background: $brand-danger;
+    &::after {
+      right: 0;
+      background: $brand-danger;
+    }
+    &::before {
+      color: lighten($brand-danger, 7%);
+    }
   }
   .success a {
     background: $brand-success;
+    &::after {
+      right: 0;
+      background: $brand-success;
+    }
+    &::before {
+      color: lighten($brand-success, 7%);
+    }
+  }
+  [id*="plg_quickicon"] a, [id*="plg_quickicon"] a::before {
+    transition-delay: .4s;
   }
 }