linted callouts

diff --git a/scss/ink/components/_button.scss b/scss/ink/components/_button.scss
index 67a5adcd0d9de177b14500059fb3d838f9879879..c0bbfde6652f9eaa87a88dd75f378cfecf4eb3fe 100755 (executable)
--- a/scss/ink/components/_button.scss
+++ b/scss/ink/components/_button.scss
@@ -57,31 +57,29 @@ $button-background-color: $primary-color !default;
 $button-border: 1px solid darken($button-background-color, 10%);
 
 table.button {
-    width: 100%;
-    overflow: visible;
+  width: 100%;
+  overflow: visible;
 
-    td {
-      display: block;
-      width: auto !important;
-      text-align: center;
-      background: $button-background-color;
-      border: $button-border;
+  td {
+    display: block;
+    width: auto !important;
+    text-align: center;
+    background: $button-background-color;
+    border: $button-border;
+    color: $button-font-color;
+    padding: $button-padding;
+
+    a {
+      font-weight: bold;
+      text-decoration: none;
+      font-family: $base-font-family;
       color: $button-font-color;
+      display: block;
+      height: 100%;
+      width: 100%;
       padding: $button-padding;
+      font-size: $button-font-size;
     }
-
-
-   td a {
-    font-weight: bold;
-    text-decoration: none;
-    font-family: $base-font-family;
-    color: $button-font-color;
-    font-size: $button-font-size;
-    display: block;
-    height: 100%;
-    width: 100%;
-    padding: $button-padding;
-    font-size: $button-font-size;
   }
 
   &.tiny td a {
@@ -110,8 +108,7 @@ table.button {
   &:hover td
   &.tiny:hover td,
   &.small:hover td,
-  &.large:hover td 
-  {
+  &.large:hover td {
     background: darken($button-background-color, 10%);
   }
 
@@ -126,22 +123,22 @@ table.button {
   &.small td a:visited,
   &.large:hover td a,
   &.large:active td a,
-  &.large td a:visited 
-  { 
-    color: $button-font-color !important; 
+  &.large td a:visited {
+    color: $button-font-color !important;
   }
 
   &.secondary td {
     background: $secondary-color;
     border: darken($secondary-color, -10%);
     color: $button-font-color-alt;
+
     a {
       color: $button-font-color-alt;
     }
   }
 
   &.secondary:hover td {
-    background: darken($secondary-color, -10%)!important;
+    background: darken($secondary-color, -10%) !important;
     color: $button-font-color-alt;
   }
 

diff --git a/scss/ink/components/_callout.scss b/scss/ink/components/_callout.scss
index 2c4328d897fa5c3a7afb0a96b919d52c51f6bec6..866cf6f6af29919fc7ff7c4b1c20cef58bf4eb05 100644 (file)
--- a/scss/ink/components/_callout.scss
+++ b/scss/ink/components/_callout.scss
@@ -2,69 +2,66 @@
 // zurb.com/ink/
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
-//
-// @variables
-//
+////
+/// @group callout
+////
 
-$include-html-callout-classes: $include-html-classes !default;
+/// Defualt background color of a callout.
+/// @type Color
+$callout-background-color: $light-gray !default;
 
-$callout-bg: #f2f2f2 !default;
-$callout-border-color: darken($callout-bg, 20%) !default;
-$callout-border-style: solid !default;
+/// Defualt padding color of a callout.
+/// @type Number
+$callout-padding: 10px !default;
 
-$success-bg: #43AC6A !default;
-$success-callout-border-color: darken($success-bg, 20%) !default;
-$success-text-color: #FFFFFF !default;
+/// Default border for a callout.
+/// @type List
+$callout-border: 1px solid darken($callout-background-color, 20%) !default;
 
-$warning-bg: #f08a24 !default;
-$warning-callout-border-color: darken($warning-bg, 20%) !default;
-$warning-text-color: #FFFFFF !default;
-
-$alert-bg: #f04124 !default;
-$alert-callout-border-color: darken($alert-bg, 20%) !default;
-$alert-text-color: #FFFFFF !default;
-
-
-$callout-border-size: 1px !default;
-$callout-padding: 10px;
+/// Default border for a success callout.
+/// @type List
+$callout-border-success: 1px solid darken($success-color, 20%) !default;
 
+/// Default border for a warning callout.
+/// @type List
+$callout-border-warning: 1px solid darken($warning-color, 20%) !default;
 
+/// Default border for a alert callout.
+/// @type List
+$callout-border-alert: 1px solid darken darken($alert-color, 20%) !default;
 
 td.callout {
-       width: 100%;
-       border: $callout-border-size $callout-border-style $callout-border-color;       
-       padding: $callout-padding !important;
-       background: $callout-bg;
-}
-
-td.callout.success {
-       background: $success-bg !important;
-       border: $callout-border-size $callout-border-style $success-callout-border-color !important;                            
-       color: $success-text-color !important;
-}
-
-td.wrapper table tr td.callout.warning {
-       background: $warning-bg !important;
-       border: $callout-border-size $callout-border-style $warning-callout-border-color !important;
-       color: $warning-text-color;
-}
-
-td.callout.alert {
-       background: $alert-bg !important;
-       border: $callout-border-size $callout-border-style $alert-callout-border-color !important;
-       color: $alert-text-color;                               
-}
-
-td.callout.round {
-       border-radius: 50px !important;
+  width: 100%;
+  border: $callout-border;
+  padding: $callout-padding !important;
+  background: $callout-background-color;
+
+  &.success {
+    background: $success-color !important;
+    border: $callout-border-success !important;
+    color: $white !important;
+  }
+
+  &.warning {
+    background: $warning-color !important;
+    border: $callout-border-warning !important;
+    color: $white !important;
+  }
+
+  &.alert {
+    background: $alert-color !important;
+    border: $callout-border-alert !important;
+    color: $alert-text-color;
+  }
 }
 
+///check this
 .sub-grid table {
-       width: 100%;
+  width: 100%;
 }
 
 .sub-grid td.sub-columns {
-       padding-bottom: 0;
+  padding-bottom: 0;
 }