compass-pattern-primer 0.1

checksums.yaml

@@ -0,0 +1,7 @@
+--- 
+SHA512: 
+  data.tar.gz: 036f5555bce3a2ff453d6de1d58788a263944092b8747912382a0a8fd66cd3dadcea89113f91cbe68d12a4c882be95bc22409928be160c56b947d614f7c8d589
+  metadata.gz: 39faa0a6b376a2fa8a57f9930fbf2f53ae5eaf050c311538015bbf654fbe46cde02dcc40f68603a9a4b876cf0848656c89a566bea0e8db11e10a1505dd3b02eb
+SHA1: 
+  data.tar.gz: 452aaed747cb27ceb25366348fded1b504fc3be1
+  metadata.gz: cb3440946c04b955116ce6dbd9be1678c5268eab

data/lib/compass-pattern-primer.rb

@@ -0,0 +1,31 @@
+# All gems that are required for this extension to work should go here.
+# These are the requires you would normally put in your config.rb file
+# By default, you should always included Compass. Do not include your
+#  extension.
+require 'compass'
+require 'toolkit' 
+
+# This tells Compass what your Compass extension is called, and where to find
+#  its files
+# Replace 'extension' with the name of your extension. Spaces allowed.
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('compass-pattern-primer', :path => extension_path)
+
+# Version and date of version for your Compass extension.
+# Replace Extension with the name of your extension
+#  Letters, numbers, and underscores only
+#  Version is a number. If a version contains alphas, it will be created as
+#    a prerelease version
+#  Date is in the form of YYYY-MM-DD
+module Compass_Pattern_Primer
+  VERSION = "0.1"
+  DATE = "2013-05-17"
+end
+
+# This is where any custom SassScript should be placed. The functions will be  
+#  available on require of your extension without the need for users to import
+#  any partials. Uncomment below.
+
+# module Sass::Script::Functions
+# 
+# end

data/stylesheets/compass-pattern-primer.scss

@@ -0,0 +1,12 @@
+@import "compass-pattern-primer/reset"; 
+
+@import "compass-pattern-primer/partials/_mixins";
+@import "compass-pattern-primer/partials/_functions";
+@import "compass-pattern-primer/partials/variables/_variables";
+@import "compass-pattern-primer/partials/_extendables";
+@import "compass-pattern-primer/partials/_colors";
+
+@import "compass-pattern-primer/base";
+
+@import "compass-pattern-primer/modules";
+

data/stylesheets/compass-pattern-primer/_base.scss

@@ -0,0 +1,10 @@
+@import "compass-pattern-primer/partials/_mixins";
+@import "compass-pattern-primer/partials/_functions";
+@import "compass-pattern-primer/partials/variables/_variables";
+
+@import "compass-pattern-primer/base/_page";
+@import "compass-pattern-primer/base/_typography";
+@import "compass-pattern-primer/base/_links";
+@import "compass-pattern-primer/base/_forms";
+@import "compass-pattern-primer/base/_search";
+@import "compass-pattern-primer/base/_buttons"; 

data/stylesheets/compass-pattern-primer/_modules.scss

@@ -0,0 +1,8 @@
+@import "compass-pattern-primer/partials/_mixins";
+@import "compass-pattern-primer/partials/_functions";
+@import "compass-pattern-primer/partials/variables/_variables";
+
+@import "compass-pattern-primer/modules/_control";
+@import "compass-pattern-primer/modules/_feedback";
+@import "compass-pattern-primer/modules/_options";
+@import "compass-pattern-primer/modules/_pagination";

data/stylesheets/compass-pattern-primer/_reset.scss

@@ -0,0 +1,10 @@
+// change legacy support to true if you want legacy versions of formalize and normalize
+$legacy-support-for-ie6: false;
+$legacy-support-for-ie7: false;
+
+// choose your reset
+$use_eric_meyer_reset: false;
+$use_formalize_reset: true;
+$use_normalize_reset: true;
+
+@import "reset/_reset";  

data/stylesheets/compass-pattern-primer/base/_buttons.scss

@@ -0,0 +1,24 @@
+button,
+input[type="button"],
+input[type="submit"] {
+  @extend %button;
+} 
+
+button.active,
+input[type="button"].active,
+input[type="submit"].active {
+  @extend %button-active;
+}
+
+input.cancel,
+button.cancel,
+input[type="button"][value="Cancel"],
+input[type="submit"][value="Cancel"] {
+  @extend %button-cancel;
+}
+
+button[disabled="disabled"],
+input[type="button"][disabled="disabled"],
+input[type="submit"][disabled="disabled"] {
+  @extend %button-disabled;
+}

data/stylesheets/compass-pattern-primer/base/_forms.scss

@@ -0,0 +1,26 @@
+label {
+  cursor: pointer;
+}
+input[type],
+textarea,
+select {
+  background-color: $forms-background-color;
+  width: 100%;
+  font-family: inherit;
+  font-size: inherit;
+  @include bounding-box(padding, $forms-padding);
+  @include bounding-box(border, false, $forms-border-pos, $forms-border-width, $forms-border-style, $forms-border-color);
+  @include border-radius($forms-border-radius);
+  &:focus {
+    border-color: $forms-focus-border-color;
+  }
+}
+input[type="checkbox"],
+input[type="radio"],
+input[type="image"] {
+  width: auto;
+}
+input[required],
+textarea[required] {
+  border-color: $forms-required-border-color;
+}

data/stylesheets/compass-pattern-primer/base/_links.scss

@@ -0,0 +1,24 @@
+a {
+  color: $link-color;
+  text-decoration: $link-text-decoration;
+  @include bounding-box(border, false, $link-border-pos, $link-border-width, $link-border-style, $link-border-color);
+  &:link,
+  &:visited {
+    color: $link-visited-link-color;
+    @include bounding-box(border, false, $link-visited-border-pos, $link-visited-border-width, $link-visited-border-style, $link-visited-border-color);
+  }
+  &[href]:hover,
+  &[href]:focus {
+    color: $link-hover-link-color;
+    text-decoration: $link-hover-text-decoration;
+    @include bounding-box(border, false, $link-hover-border-pos, $link-hover-border-width, $link-hover-border-style, $link-hover-border-color);
+  }
+  &:active {
+    color: $link-active-link-color;
+    @include bounding-box(border, false, $link-active-border-pos, $link-active-border-width, $link-active-border-style, $link-active-border-color);
+  } 
+  .logo &, h1 &, h2 &, h3 & {
+    color: $headers-link-color;
+    @include bounding-box(border, false, $logo-headers-border-pos, $logo-headers-border-width, $logo-headers-border-style, $logo-headers-border-color);
+  }
+}

data/stylesheets/compass-pattern-primer/base/_page.scss

@@ -0,0 +1,16 @@
+html {
+  @include bounding-box(border, false, $html-border-pos, $html-border-width, $html-border-style, $html-border-color);
+  background-color: $html-background-color;
+}
+body {
+  background-color: $body-background-color;
+  background: $body-background-rgba;
+  @include bounding-box(margin, $body-margin);
+  @include bounding-box(padding, $body-padding);
+  @include type-size($body-font-size, $body-line-height);
+  font-family: $body-font-family;
+  color: $body-color;
+  @include bounding-box(border, false, $body-border-pos, $body-border-width, $body-border-style, $body-border-color);
+  @include bounding-box(border, false, $body-border-pos2, $body-border-width2, $body-border-style2, $body-border-color2);
+  border-color: $body-border-color-rgba;
+}

data/stylesheets/compass-pattern-primer/base/_search.scss

@@ -0,0 +1,19 @@
+[role="search"] {
+  position: relative;
+  background-color: $search-background-color;
+  @include bounding-box(border, false, $search-border-pos, $search-border-width, $search-border-style, $search-border-color);
+  @include bounding-box(padding, $search-padding);
+  @include border-radius($search-border-radius);
+  input[type="search"], input {
+    @include bounding-box(border, false, $search-input-border-pos, $search-input-border-width, $search-input-border-style, $search-input-border-color);
+    @include border-radius($search-input-border-radius);
+  }
+  input[type="image"] {
+    background-color: $search-image-background-color;
+    position: absolute;
+    width: $search-image-width;
+    top: $search-image-top;
+    right: $search-image-right;
+    @include bounding-box(padding, $search-image-padding);
+  }
+}                                

data/stylesheets/compass-pattern-primer/base/_typography.scss

@@ -0,0 +1,142 @@
+h1 {
+  font-family: $header-font-family;
+  @include bold-italic-uppercase-variant($h1-font-bold, $h1-font-italic, $h1-font-uppercase, $h1-font-variant);
+  @include type-size($h1-font-size, $h1-line-height);
+  @include bounding-box(padding, $h1-padding, $h1-padding-pos);
+  @include bounding-box(margin, $h1-margin, $h1-margin-pos);
+  color: $h1-color;
+  @include bounding-box(border, false, $h1-border-pos, $h1-border-width, $h1-border-style, $h1-border-color);
+}
+h2 {
+  font-family: $header-font-family;
+  @include bold-italic-uppercase-variant($h2-font-bold, $h2-font-italic, $h2-font-uppercase, $h2-font-variant);
+  @include type-size($h2-font-size, $h2-line-height);
+  @include bounding-box(padding, $h2-padding, $h2-padding-pos);
+  @include bounding-box(margin, $h2-margin, $h2-margin-pos);
+  color: $h2-color;
+  @include bounding-box(border, false, $h2-border-pos, $h2-border-width, $h2-border-style, $h2-border-color);
+}
+h3 {
+  font-family: $header-font-family;
+  @include bold-italic-uppercase-variant($h3-font-bold, $h3-font-italic, $h3-font-uppercase, $h3-font-variant);
+  @include type-size($h3-font-size, $h3-line-height);
+  @include bounding-box(padding, $h3-padding, $h3-padding-pos);
+  @include bounding-box(margin, $h3-margin, $h3-margin-pos);
+  color: $h3-color;
+  @include bounding-box(border, false, $h3-border-pos, $h3-border-width, $h3-border-style, $h3-border-color);
+}
+h4 {
+  font-family: $header-font-family;
+  @include bold-italic-uppercase-variant($h4-font-bold, $h4-font-italic, $h4-font-uppercase, $h4-font-variant);
+  @include type-size($h4-font-size, $h4-line-height);
+  @include bounding-box(padding, $h4-padding, $h4-padding-pos);
+  @include bounding-box(margin, $h4-margin, $h4-margin-pos);
+  color: $h4-color;
+  @include bounding-box(border, false, $h4-border-pos, $h4-border-width, $h4-border-style, $h4-border-color);
+}
+h5 {
+  font-family: $header-font-family;
+  @include bold-italic-uppercase-variant($h5-font-bold, $h5-font-italic, $h5-font-uppercase, $h5-font-variant);
+  @include type-size($h5-font-size, $h5-line-height);
+  @include bounding-box(padding, $h5-padding, $h5-padding-pos);
+  @include bounding-box(margin, $h5-margin, $h5-margin-pos);
+  color: $h5-color;
+  @include bounding-box(border, false, $h5-border-pos, $h5-border-width, $h5-border-style, $h5-border-color);
+}
+h6 {
+  @include bold-italic-uppercase-variant($h6-font-bold, $h6-font-italic, $h6-font-uppercase, $h6-font-variant);
+  @include type-size($h6-font-size, $h6-line-height);
+  @include bounding-box(padding, $h6-padding, $h6-padding-pos);
+  @include bounding-box(margin, $h6-margin, $h6-margin-pos);
+  color: $h6-color;
+  @include bounding-box(border, false, $h6-border-pos, $h6-border-width, $h6-border-style, $h6-border-color);
+}
+b, strong {
+  font-weight: bold;
+}
+i, em {
+  font-style: italic;
+}
+hr {
+  @include bounding-box(border, false, $hr-border-pos, $hr-border-width, $hr-border-style, $hr-border-color);
+  height: $hr-height;
+  background: $hr-background;
+  background-color: $hr-background-rgba;
+}
+p, ul, ol, hr, table, form, fieldset {
+  @include bounding-box(margin, $element-margin);
+}
+li {
+  list-style-position: $li-list-style-position;
+  @include bounding-box(margin, $li-margin, $li-margin-pos);
+  text-indent: $li-text-indent;
+}
+blockquote {
+  @include bounding-box(margin, $blockquote-margin);
+  @include bounding-box(border, false, $blockquote-border-pos, $blockquote-border-width, $blockquote-border-style, $blockquote-border-color);
+  @include bounding-box(border, false, $blockquote-border-pos2, $blockquote-border-width2, $blockquote-border-style2, $blockquote-border-color2);
+  @include bounding-box(padding, $blockquote-padding);
+  font-family: $blockquote-font-family;
+  @include bold-italic-uppercase-variant($blockquote-font-bold, $blockquote-font-italic, $blockquote-font-uppercase, $blockquote-font-variant);
+  @include type-size($blockquote-font-size, $blockquote-line-height);
+  letter-spacing: $blockquote-letter-spacing;
+  color: $blockquote-color;
+  border-color: $blockquote-border-rgba;
+  @include border-radius($blockquote-border-radius);
+  em {
+    @include bold-italic-uppercase-variant($blockquote-em-font-bold, $blockquote-em-font-italic, $blockquote-em-font-uppercase, $blockquote-em-font-variant);
+  }
+}
+figcaption {
+  font-family: $figcaption-font-family;
+  @include bold-italic-uppercase-variant($figcaption-font-bold, $figcaption-font-italic, $figcaption-font-uppercase, $figcaption-font-variant);
+  @include type-size($figcaption-font-size, $figcaption-line-height);
+  color: $figcaption-color;
+}
+article > p,
+article section > p {
+  @include type-size($article-font-size, $article-line-height);
+  word-spacing: $article-word-spacing;
+  @include bounding-box(margin, $article-margin);
+/*  Does this improve the reading experience?
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  hyphens: auto;
+  text-align: justify;
+*/
+}
+article footer+p:first-letter,
+article section>h2+p:first-letter,
+article section>p:first-child:first-letter,
+h1+p:first-letter {
+  display: $article-fl-display;
+  float: $article-fl-float;
+  font-family: $article-fl-font-family;
+  @include bold-italic-uppercase-variant($article-fl-font-bold, $article-fl-font-italic, $article-fl-font-uppercase, $article-fl-font-variant);
+  @include type-size($article-fl-font-size, $article-fl-line-height);
+  letter-spacing: $article-fl-letter-spacing;
+  @include bounding-box(margin, $article-fl-margin, $article-fl-margin-pos);
+  color: $article-fl-color;
+  @include bounding-box(border, false, $article-fl-border-pos, $article-fl-border-width, $article-fl-border-style, $article-fl-border-color);
+}
+time {
+  display: $time-display;
+  text-align: $time-text-align;
+  font-family: $time-font-family;
+  @include bold-italic-uppercase-variant($time-font-bold, $time-font-italic, $time-font-uppercase, $time-font-variant);
+  @include type-size($time-font-size, $time-line-height);
+  $time-letter-spacing: 0.2em;
+  $time-color: #888;
+  @include content-before-after($time-content);
+}
+
+pre {
+  @extend %force-wrap;
+  @include bounding-box(margin, $pre-margin, $pre-margin-pos);
+  @include bounding-box(padding, $pre-padding);
+  @include bounding-box(border, false, $pre-border-pos, $pre-border-width, $pre-border-style, $pre-border-color);
+  @include border-radius($pre-border-radius);
+  font-family: $pre-font-family;
+  @include type-size($pre-font-size, $pre-line-height);
+  @include simple-background-gradient($pre-color, $pre-gradient-pos, $pre-gradient-stop-1, $pre-gradient-stop-2);
+}

data/stylesheets/compass-pattern-primer/modules/_control.scss

@@ -0,0 +1,3 @@
+a.control {
+  @extend %controls;
+}

data/stylesheets/compass-pattern-primer/modules/_feedback.scss

@@ -0,0 +1,9 @@
+.feedback {
+  @extend %feedback;
+  &.error {
+    @extend %error;
+  }
+  &.warning {
+    @extend %warning;
+  }
+}

data/stylesheets/compass-pattern-primer/modules/_options.scss

@@ -0,0 +1,3 @@
+.options {
+  @extend %options;
+}

data/stylesheets/compass-pattern-primer/modules/_pagination.scss

@@ -0,0 +1,3 @@
+.pagination {
+  @extend %pagination;
+}

data/stylesheets/compass-pattern-primer/partials/_colors.scss

@@ -0,0 +1,29 @@
+@import 'toolkit';
+@import "singularitygs";
+
+//////////////////////////////
+// Color Stacks
+//
+// We can utilize [Color Schemer](https://github.com/Team-Sass/color-schemer)
+// to build us awesome color guides.
+// From [Style Prototypes](https://github.com/Team-Sass/Style-Prototypes)
+//////////////////////////////
+$cs-primary:            $primary-color;
+// Primary color, can be any color you can use in CSS, plus CMYK from Color Schemer
+$cs-scheme:             mono;
+// Options: mono, complement, triad, tetrad, analogic, accented-analogic
+$cs-hue-offset:         10;
+// Options: 0-100;
+$cs-brightness-offset:  10;
+// Options: 0-100;
+$cs-color-model:        ryb;
+// Options: rgb, ryb
+
+$black:     tint-stack(#333);
+$primary:   tint-stack(cs-primary());
+$secondary: tint-stack(cs-secondary());
+$tertiary:  tint-stack(cs-tertiary());
+$quadrary:  tint-stack(cs-quadrary()); 
+$darker:    shade-stack(cs-primary());
+ 
+@include generate-colour-guide($black, $primary, $secondary, $tertiary, $quadrary, $darker);

data/stylesheets/compass-pattern-primer/partials/_extendables.scss

@@ -0,0 +1,188 @@
+%force-wrap {
+  //@include force-wrap; // this is the output 
+  white-space: pre;
+  white-space: pre-wrap;
+  //white-space: pre-line; // removes indentation -- was breaking content
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -hp-pre-wrap;
+  word-wrap: break-word; 
+}
+
+%btn-all {
+  width: auto;
+  text-align: center;
+  font-family: $button-font-family;
+  font-size: inherit;
+  font-weight: normal;
+  font-style: normal;
+  @include bounding-box(border, false, $button-border-pos, $button-border-width, $button-border-style, $button-border-color);
+  cursor: pointer;
+  @include bounding-box(padding, $button-padding);
+  line-height: 1;
+  @include border-radius($button-border-radius);
+}
+
+%button {
+  @extend %btn-all;
+  @include simple-background-gradient($button-color, $button-gradient-pos, $button-gradient-stop-1, $button-gradient-stop-2);
+  @include text-shadow($button-text-shadow);
+  &:hover,
+  &:focus {
+    @include text-shadow($button-hover-text-shadow);
+    @include simple-background-gradient($button-hover-color, $button-hover-gradient-pos, $button-hover-gradient-stop-1, $button-hover-gradient-stop-2);
+  }  
+  &:active {
+    @include text-shadow($button-active-text-shadow);
+    @include simple-background-gradient($button-active-color, $button-active-gradient-pos, $button-active-gradient-stop-1, $button-active-gradient-stop-2);
+  }
+}
+
+%button-active {
+  @extend %btn-all;
+  @include text-shadow($button-action-text-shadow);
+  @include simple-background-gradient($button-action-color, $button-action-gradient-pos, $button-action-gradient-stop-1, $button-action-gradient-stop-2);
+  &:hover,
+  &:focus {
+    @include text-shadow($button-action-hover-text-shadow);
+    @include simple-background-gradient($button-action-hover-color, $button-action-hover-gradient-pos, $button-action-hover-gradient-stop-1, $button-action-hover-gradient-stop-2);
+  }
+  &:active {
+    @include text-shadow($button-action-active-text-shadow);
+    @include simple-background-gradient($button-action-active-color, $button-action-active-gradient-pos, $button-action-active-gradient-stop-1, $button-action-active-gradient-stop-2);
+  }
+}
+
+%button-cancel {
+  @extend %btn-all;
+  @include text-shadow($button-cancel-text-shadow);
+  @include simple-background-gradient($button-cancel-color, $button-cancel-gradient-pos, $button-cancel-gradient-stop-1, $button-cancel-gradient-stop-2);
+  &:hover,
+  &:focus {
+    @include text-shadow($button-cancel-hover-text-shadow);
+    @include simple-background-gradient($button-cancel-hover-color, $button-cancel-hover-gradient-pos, $button-cancel-hover-gradient-stop-1, $button-cancel-hover-gradient-stop-2);
+  }
+  &:active {
+    @include text-shadow($button-cancel-active-text-shadow);
+    @include simple-background-gradient($button-cancel-active-color, $button-cancel-active-gradient-pos, $button-cancel-active-gradient-stop-1, $button-cancel-active-gradient-stop-2);
+  }
+}
+
+%button-disabled {
+  @extend %btn-all;
+  @include text-shadow($button-disabled-text-shadow);
+  opacity: $button-disabled-opacity;
+  @include simple-background-gradient($button-disabled-color, $button-disabled-gradient-pos, $button-disabled-gradient-stop-1, $button-disabled-gradient-stop-2);
+  &:hover,
+  &:focus,
+  &:active {
+    @extend %button-disabled;
+  } 
+}
+
+%controls {
+  font-family: $controls-font-family;
+  display: inline-block;
+  font-size: $controls-font-size;
+  @include bounding-box(padding, $controls-padding);
+  line-height: 1;
+  @include bounding-box(border, false, $controls-border-pos, $controls-border-width, $controls-border-style, $controls-border-color);
+  @include border-radius($controls-border-radius);
+  background-clip: padding-box;
+  &:link,
+  &:visited {
+    @include simple-background-gradient($controls-visited-color, $controls-visited-gradient-pos, $controls-visited-gradient-stop-1, $controls-visited-gradient-stop-2);
+  }
+  &:hover,
+  &:focus {
+    outline: none;
+    @include simple-background-gradient($controls-hover-color, $controls-hover-gradient-pos, $controls-hover-gradient-stop-1, $controls-hover-gradient-stop-2);
+  }
+  &:active {
+    @include simple-background-gradient($controls-active-color, $controls-active-gradient-pos, $controls-active-gradient-stop-1, $controls-active-gradient-stop-2);
+  }
+}
+
+%feedback {
+  @include bounding-box(padding, $feedback-padding);
+  @include bounding-box(margin, $feedback-margin);
+  color: $feedback-color;
+  background-color: $feedback-background;
+  @include bounding-box(border, false, $feedback-border-pos, $feedback-border-width, $feedback-border-style, $feedback-border-color);
+  @include border-radius($feedback-border-radius);
+  background-clip: padding-box;
+  a {
+    color: $feedback-color;
+    @include bold-italic-uppercase-variant($feedback-a-font-bold, $feedback-a-font-italic, $feedback-a-font-uppercase, $feedback-a-font-variant);
+  }
+}
+
+%error {
+  background-color: $feedback-error-background;
+  color: $feedback-error-color;
+  border-color: $feedback-error-border-color;
+  a {
+    color: $feedback-error-color;
+  }
+}
+
+%warning {
+  background-color: $feedback-warning-background;
+  color: $feedback-warning-color;
+  border-color: $feedback-warning-border-color;
+  a {
+    color: $feedback-warning-color;
+  }
+}
+
+%options {
+  list-style: $options-list-style;
+  @include bounding-box(border, false, $options-border-pos, $options-border-width, $options-border-style, $options-border-color);
+  li {
+    text-indent: $options-li-text-indent;
+    font-family: $options-li-font-family;
+    text-transform: $options-li-text-transform;
+    letter-spacing: $options-li-letter-spacing;
+    font-weight: $options-li-font-weight;
+    @include bounding-box(margin, $options-li-margin);
+    @include bounding-box(padding, $options-li-padding);
+    @include bounding-box(border, false, $options-li-border-pos, $options-li-border-width, $options-li-border-style, $options-li-border-color);
+  }
+  a {
+    display: block;
+    @include bounding-box(border, false, $options-a-border-pos, $options-a-border-width, $options-a-border-style, $options-a-border-color);
+  }
+}
+
+%pagination {
+  font-family: $pagination-font-family;
+  li {
+    display: $pagination-li-display;
+    @include bounding-box(margin, $pagination-li-margin, $pagination-li-margin-pos);
+    text-indent: $pagination-text-indent;
+  }
+  a {
+    display: $pagination-a-display;
+    @include bounding-box(padding, $pagination-a-padding);
+    line-height: $pagination-a-line-height;
+    @include bounding-box(margin, $pagination-a-margin);
+    @include bounding-box(border, false, $pagination-a-border-pos, $pagination-a-border-width, $pagination-a-border-style, $pagination-a-border-color);
+    @include border-radius($pagination-a-border-radius);
+    background-clip: padding-box;
+    &:link,
+    &:visited {
+      color: $pagination-link-color;
+      background-color: $pagination-link-background-color;
+    }
+    &[href]:hover,
+    &[href]:focus {
+      color: $pagination-link-hover-color;
+      background-color: $pagination-link-hover-background-color;
+    }
+    &:active {
+      color: $pagination-link-active-color;
+      background-color: $pagination-link-active-background-color;
+    }
+  }
+}