updated style for copy button

brenna · Apr 15, 2015 · 8143e15 · 8143e15
1 parent 8462321
commit 8143e15
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 50 deletions.
diff --git a/index.html b/index.html
@@ -21,10 +21,10 @@
   	<title>CSS Hexagon Generator</title>
   	<link rel="stylesheet" href="style.css">
     <link rel="icon" href="favicon.png">
-  	<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'> 
+  	<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-sanitize.min.js"></script>
-    <script src="js/vendor/zeroclipboard/ZeroClipboard.min.js"></script>
+
   </head>
   <body ng-app="hexagonApp">
   	<div class="wrapper" ng-controller="HexGenCtrl">
@@ -88,7 +88,7 @@ <h1>CSS Hexagon,<br> Please</h1>
               </label>
       			</div>
             <div class="borderOpts" ng-class="{revealed: hasBorder}">
-        			<div class="fieldGroup number animate-show">	
+        			<div class="fieldGroup number animate-show">
                 <!-- border width needs to be zero if not selected -->
                 <input id="borderWidth" ng-model="borderWidth" ng-disabled="!hasBorder" type="number">
         				<label for="borderWidth">Border Width</label>
@@ -97,10 +97,10 @@ <h1>CSS Hexagon,<br> Please</h1>
                 <input id="borderColor" ng-model="borderColor" ng-init="borderColor='#333333'" ng-disabled="!hasBorder" type="color">
         				<label for="borderColor">Border Colour</label>
         			</div>
-            </div> <!-- .borderOpts -->  
-          </div>  
+            </div> <!-- .borderOpts -->
+          </div>
         </div><!--  .container -->
-      </form>  
+      </form>
 
       <div class="credits">
         <div class="container">
@@ -150,7 +150,7 @@ <h1>CSS Hexagon,<br> Please</h1>
              <style my-css template="css-solid.html"></style>
             </div>
             <div class="preview" ng-bind-html="generateMarkup()">
-            </div> 
+            </div>
           </div>
 
           <div class="snippet">
@@ -179,6 +179,7 @@ <h3>Whoa there! That won't make a hexagon.</h3>
         </div>
       </div>
   	</div>
+    <script src="js/vendor/zeroclipboard/ZeroClipboard.min.js"></script>
     <script src="js/controllers.js"></script>
     <script src="js/ga.js"></script>
   </body>

diff --git a/js/controllers.js b/js/controllers.js
@@ -1,12 +1,12 @@
 var hexagonApp = angular.module('hexagonApp', ['ngSanitize']);
- 
+
 hexagonApp.controller('HexGenCtrl', ['$scope', function ($scope) {
 
   // tan(30deg) is magic scale factor for smushing
-  // a square into a rhombus that fits the top of 
+  // a square into a rhombus that fits the top of
   // a hexagon
   $scope.scaleFactor = Math.tan(30 * Math.PI/180);
-  
+
   //default values
   $scope.borderWidth = 0;
   $scope.userBorderWidth = 5;
@@ -21,7 +21,7 @@ hexagonApp.controller('HexGenCtrl', ['$scope', function ($scope) {
       $scope.borderWidth = 0;
     }
   }
-  
+
   $scope.generateMarkup = function() {
       if ($scope.fillType == 'image') {
         return '<div class="hexagon">\n  <div class="hexTop"></div>\n  <div class="hexBottom"></div>\n</div>'
@@ -61,10 +61,10 @@ hexagonApp.controller('HexGenCtrl', ['$scope', function ($scope) {
 
   $scope.shadowRule = function(){
     if ($scope.hasShadow){
-      var shadowRule = '\n  box-shadow: 0 0 ' 
-        + $scope.shadowBlur + "px " 
-        + 'rgba(' 
-        + $scope.hexToRgb($scope.shadowColor) 
+      var shadowRule = '\n  box-shadow: 0 0 '
+        + $scope.shadowBlur + "px "
+        + 'rgba('
+        + $scope.hexToRgb($scope.shadowColor)
         + ',' + $scope.shadowAlpha + ');';
       return shadowRule;
     } else {
@@ -74,11 +74,11 @@ hexagonApp.controller('HexGenCtrl', ['$scope', function ($scope) {
 
   $scope.borderRule = function(){
     if ($scope.hasBorder){
-      var borderRule = '\n  border-left: solid ' 
-        + $scope.borderWidth + "px " 
+      var borderRule = '\n  border-left: solid '
+        + $scope.borderWidth + "px "
         + $scope.borderColor + ";\n  "
         + 'border-right: solid '
-        + $scope.borderWidth + "px " 
+        + $scope.borderWidth + "px "
         + $scope.borderColor + ";";
       return borderRule;
     } else {
@@ -88,11 +88,11 @@ hexagonApp.controller('HexGenCtrl', ['$scope', function ($scope) {
 
   $scope.borderRuleTop = function(){
     if ($scope.hasBorder){
-      var borderRule = '\n  border-top: solid ' 
-        + ($scope.borderWidth * Math.sqrt(2)).toFixed(4) + "px " 
+      var borderRule = '\n  border-top: solid '
+        + ($scope.borderWidth * Math.sqrt(2)).toFixed(4) + "px "
         + $scope.borderColor + ";\n  "
         + 'border-right: solid '
-        + ($scope.borderWidth * Math.sqrt(2)).toFixed(4) + "px " 
+        + ($scope.borderWidth * Math.sqrt(2)).toFixed(4) + "px "
         + $scope.borderColor + ";";
       return borderRule;
     } else {
@@ -102,11 +102,11 @@ hexagonApp.controller('HexGenCtrl', ['$scope', function ($scope) {
 
   $scope.borderRuleBottom = function(){
     if ($scope.hasBorder){
-      var borderRule = '\n  border-bottom: solid ' 
-        + ($scope.borderWidth * Math.sqrt(2)).toFixed(4) + "px " 
+      var borderRule = '\n  border-bottom: solid '
+        + ($scope.borderWidth * Math.sqrt(2)).toFixed(4) + "px "
         + $scope.borderColor + ";\n  "
         + 'border-left: solid '
-        + ($scope.borderWidth * Math.sqrt(2)).toFixed(4) + "px " 
+        + ($scope.borderWidth * Math.sqrt(2)).toFixed(4) + "px "
         + $scope.borderColor + ";";
       return borderRule;
     } else {
@@ -138,7 +138,7 @@ hexagonApp.controller('HexGenCtrl', ['$scope', function ($scope) {
     $scope.borderRules = 'border-left: solid'
     + $scope.borderWidth;
     $scope.borderRulesTop = '';
-    $scope.borderRulesBottom = ''; 
+    $scope.borderRulesBottom = '';
     $scope.border = 'solid ' + $scope.borderWidth + 'px ' + $scope.borderColor;
   }
 

diff --git a/scss/style.scss b/scss/style.scss
@@ -296,21 +296,20 @@ input[type=url] {
   $button-color: $blue;
   position: relative;
   .button-copy {
+    position: absolute;
+    width: 60px;
+    right: 8px;
+  	top: 50px;
     background: none;
-    border: none;
-    $border-style: 2px solid $button-color;
-    border-left: $border-style;
-    border-bottom: $border-style;
-    border-bottom-left-radius: 5px;
-    color: $button-color;
+    border: 1px solid #666;
+    color: #666;
     font-family: $bodyFont;
-    position: absolute;
-    right: 0;
-    &.button-copy-is-hover {
+    font-size: 13px;
+
+    &.button-copy-is-hover,
+    &:focus {
       background-color: $button-color;
       color: #fff;
-    }
-    &:focus {
       outline: none;
     }
   }