active_administration 0.0.2 → 0.0.3

data/app/assets/stylesheets/active_administration/carousel.less

@@ -0,0 +1,118 @@
+.carousel {
+    display: block;
+    position: relative;
+    //margin-bottom: @unitSize;
+    overflow: hidden;
+    background-color: @grayLighter;
+
+    .slide {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        display: none;
+        padding: 0;
+
+        div.subslide {
+            z-index: 2;
+            position: absolute;
+            top: 10px;
+            left: 10px;
+        }
+
+        img.cover {
+            width: 100%;
+            min-height: 100%;
+            z-index: 1;
+            position: absolute;
+            top: 0 !important;
+            left: 0 !important;
+        }
+
+        &:first-child {
+            display: block;
+        }
+    }
+
+    .controls {
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 15px;
+        min-width: 40px;
+        min-height: 40px;
+        width: auto;
+        height: auto;
+        margin-top: -20px;
+        font-size: 48pt;
+        font-weight: 100;
+        line-height: 30px;
+        color: #fff;
+        text-align: center;
+        cursor: pointer;
+        opacity: .75;
+        z-index: 100;
+
+        &.left {}
+
+        &.right {
+            left: auto;
+            right: 15px;
+        }
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    .markers {
+        z-index: 100;
+        margin: 0;
+        padding: 0;
+        display: block;
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+
+        & > ul {
+            .unstyled;
+        }
+
+        li {
+            display: block;
+            float: left;
+            margin-right: 5px;
+
+            a {
+                background-color: @white;
+                display: block;
+                float: left;
+                border: 1px @white solid;
+            }
+
+            &.active a {
+                background-color: @amber;
+            }
+        }
+
+        &.default {
+            & > ul > li > a {
+                width: 32px;
+                height: 6px;
+            }
+        }
+        &.cycle {
+            & > ul > li > a {
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+            }
+        }
+        &.square {
+            & > ul > li > a {
+                .square(24px);
+            }
+        }
+    }
+}

data/app/assets/stylesheets/active_administration/colors.less

@@ -0,0 +1,589 @@
+// Colors : background
+.bg-black {.set-bg-color(@black)}
+.bg-white {.set-bg-color(@white)}
+.bg-lime {.set-bg-color(@lime)}
+.bg-green {.set-bg-color(@green)}
+.bg-emerald {.set-bg-color(@emerald)}
+.bg-teal {.set-bg-color(@teal)}
+.bg-cyan {.set-bg-color(@cyan)}
+.bg-cobalt {.set-bg-color(@cobalt)}
+.bg-indigo {.set-bg-color(@indigo)}
+.bg-violet {.set-bg-color(@violet)}
+.bg-pink {.set-bg-color(@pink)}
+.bg-magenta {.set-bg-color(@magenta)}
+.bg-crimson {.set-bg-color(@crimson)}
+.bg-red {.set-bg-color(@red)}
+.bg-orange {.set-bg-color(@orange)}
+.bg-amber {.set-bg-color(@amber)}
+.bg-yellow {.set-bg-color(@yellow)}
+.bg-brown {.set-bg-color(@brown)}
+.bg-olive {.set-bg-color(@olive)}
+.bg-steel {.set-bg-color(@steel)}
+.bg-mauve {.set-bg-color(@mauve)}
+.bg-taupe {.set-bg-color(@taupe)}
+.bg-gray {.set-bg-color(@gray)}
+.bg-dark {.set-bg-color(@grayDark)}
+.bg-darker {.set-bg-color(@grayDarker)}
+.bg-transparent {.set-bg-color(transparent)}
+.bg-darkBrown {.set-bg-color(@darkBrown)}
+.bg-darkCrimson {.set-bg-color(@darkCrimson)}
+.bg-darkMagenta {.set-bg-color(@darkMagenta)}
+.bg-darkIndigo {.set-bg-color(@darkIndigo)}
+.bg-darkCyan {.set-bg-color(@darkCyan)}
+.bg-darkCobalt {.set-bg-color(@darkCobalt)}
+.bg-darkTeal {.set-bg-color(@darkTeal)}
+.bg-darkEmerald {.set-bg-color(@darkEmerald)}
+.bg-darkGreen {.set-bg-color(@darkGreen)}
+.bg-darkOrange {.set-bg-color(@darkOrange)}
+.bg-darkRed {.set-bg-color(@darkRed)}
+.bg-darkPink {.set-bg-color(@darkPink)}
+.bg-darkViolet {.set-bg-color(@darkViolet)}
+.bg-darkBlue {.set-bg-color(@darkBlue)}
+.bg-lightBlue {.set-bg-color(@lightBlue)}
+.bg-lightRed {.set-bg-color(@lightRed)}
+.bg-lightGreen {.set-bg-color(@lightGreen)}
+.bg-lighterBlue {.set-bg-color(@lighterBlue)}
+.bg-lightTeal {.set-bg-color(@lightTeal)}
+.bg-lightOlive {.set-bg-color(@lightOlive)}
+.bg-lightOrange {.set-bg-color(@lightOrange)}
+.bg-lightPink {.set-bg-color(@lightPink)}
+.bg-grayDark {.set-bg-color(@grayDark)}
+.bg-grayDarker {.set-bg-color(@grayDarker)}
+.bg-grayLight {.set-bg-color(@grayLight)}
+.bg-grayLighter {.set-bg-color(@grayLighter)}
+.bg-blue {.set-bg-color(@blue)}
+
+// Colors : foreground
+.fg-black {.set-fg-color(@black);}
+.fg-white {.set-fg-color(@white);}
+.fg-lime {.set-fg-color(@lime);}
+.fg-green {.set-fg-color(@green);}
+.fg-emerald {.set-fg-color(@emerald);}
+.fg-teal {.set-fg-color(@teal);}
+.fg-cyan {.set-fg-color(@cyan);}
+.fg-cobalt {.set-fg-color(@cobalt);}
+.fg-indigo {.set-fg-color(@indigo);}
+.fg-violet {.set-fg-color(@violet);}
+.fg-pink {.set-fg-color(@pink);}
+.fg-magenta {.set-fg-color(@magenta);}
+.fg-crimson {.set-fg-color(@crimson);}
+.fg-red {.set-fg-color(@red);}
+.fg-orange {.set-fg-color(@orange);}
+.fg-amber {.set-fg-color(@amber);}
+.fg-yellow {.set-fg-color(@yellow);}
+.fg-brown {.set-fg-color(@brown);}
+.fg-olive {.set-fg-color(@olive);}
+.fg-steel {.set-fg-color(@steel);}
+.fg-mauve {.set-fg-color(@mauve);}
+.fg-taupe {.set-fg-color(@taupe);}
+.fg-gray {.set-fg-color(@gray);}
+.fg-dark {.set-fg-color(@grayDark);}
+.fg-darker {.set-fg-color(@grayDarker);}
+.fg-transparent {.set-fg-color(transparent);}
+.fg-darkBrown {.set-fg-color(@darkBrown);}
+.fg-darkCrimson {.set-fg-color(@darkCrimson);}
+.fg-darkMagenta {.set-fg-color(@darkMagenta);}
+.fg-darkIndigo {.set-fg-color(@darkIndigo);}
+.fg-darkCyan {.set-fg-color(@darkCyan);}
+.fg-darkCobalt {.set-fg-color(@darkCobalt);}
+.fg-darkTeal {.set-fg-color(@darkTeal);}
+.fg-darkEmerald {.set-fg-color(@darkEmerald);}
+.fg-darkGreen {.set-fg-color(@darkGreen);}
+.fg-darkOrange {.set-fg-color(@darkOrange);}
+.fg-darkRed {.set-fg-color(@darkRed);}
+.fg-darkPink {.set-fg-color(@darkPink);}
+.fg-darkViolet {.set-fg-color(@darkViolet);}
+.fg-darkBlue {.set-fg-color(@darkBlue);}
+.fg-lightBlue {.set-fg-color(@lightBlue);}
+.fg-lighterBlue {.set-fg-color(@lighterBlue);}
+.fg-lightTeal {.set-fg-color(@lightTeal);}
+.fg-lightOlive {.set-fg-color(@lightOlive);}
+.fg-lightOrange {.set-fg-color(@lightOrange);}
+.fg-lightPink {.set-fg-color(@lightPink);}
+.fg-lightRed {.set-fg-color(@lightRed);}
+.fg-lightGreen {.set-fg-color(@lightGreen);}
+.fg-grayDark {.set-fg-color(@grayDark);}
+.fg-grayDarker {.set-fg-color(@grayDarker);}
+.fg-grayLight {.set-fg-color(@grayLight);}
+.fg-grayLighter {.set-fg-color(@grayLighter);}
+.fg-blue {.set-fg-color(@blue);}
+
+// Colors : outline
+.ol-black {.set-ol-color(@black);}
+.ol-white {.set-ol-color(@white);}
+.ol-lime {.set-ol-color(@lime);}
+.ol-green {.set-ol-color(@green);}
+.ol-emerald {.set-ol-color(@emerald);}
+.ol-teal {.set-ol-color(@teal);}
+.ol-cyan {.set-ol-color(@cyan);}
+.ol-cobalt {.set-ol-color(@cobalt);}
+.ol-indigo {.set-ol-color(@indigo);}
+.ol-violet {.set-ol-color(@violet);}
+.ol-pink {.set-ol-color(@pink);}
+.ol-magenta {.set-ol-color(@magenta);}
+.ol-crimson {.set-ol-color(@crimson);}
+.ol-red {.set-ol-color(@red);}
+.ol-orange {.set-ol-color(@orange);}
+.ol-amber {.set-ol-color(@amber);}
+.ol-yellow {.set-ol-color(@yellow);}
+.ol-brown {.set-ol-color(@brown);}
+.ol-olive {.set-ol-color(@olive);}
+.ol-steel {.set-ol-color(@steel);}
+.ol-mauve {.set-ol-color(@mauve);}
+.ol-taupe {.set-ol-color(@taupe);}
+.ol-gray {.set-ol-color(@gray);}
+.ol-dark {.set-ol-color(@grayDark);}
+.ol-darker {.set-ol-color(@grayDarker);}
+.ol-transparent {.set-ol-color(transparent);}
+.ol-darkBrown {.set-ol-color(@darkBrown);}
+.ol-darkCrimson {.set-ol-color(@darkCrimson);}
+.ol-darkMagenta {.set-ol-color(@darkMagenta);}
+.ol-darkIndigo {.set-ol-color(@darkIndigo);}
+.ol-darkCyan {.set-ol-color(@darkCyan);}
+.ol-darkCobalt {.set-ol-color(@darkCobalt);}
+.ol-darkTeal {.set-ol-color(@darkTeal);}
+.ol-darkEmerald {.set-ol-color(@darkEmerald);}
+.ol-darkGreen {.set-ol-color(@darkGreen);}
+.ol-darkOrange {.set-ol-color(@darkOrange);}
+.ol-darkRed {.set-ol-color(@darkRed);}
+.ol-darkPink {.set-ol-color(@darkPink);}
+.ol-darkViolet {.set-ol-color(@darkViolet);}
+.ol-darkBlue {.set-ol-color(@darkBlue);}
+.ol-lightBlue {.set-ol-color(@lightBlue);}
+.ol-lighterBlue {.set-ol-color(@lighterBlue);}
+.ol-lightTeal {.set-ol-color(@lightTeal);}
+.ol-lightOlive {.set-ol-color(@lightOlive);}
+.ol-lightOrange {.set-ol-color(@lightOrange);}
+.ol-lightPink {.set-ol-color(@lightPink);}
+.ol-lightRed {.set-ol-color(@lightRed);}
+.ol-lightGreen {.set-ol-color(@lightGreen);}
+.ol-grayDark {.set-ol-color(@grayDark);}
+.ol-grayDarker {.set-ol-color(@grayDarker);}
+.ol-grayLight {.set-ol-color(@grayLight);}
+.ol-grayLighter {.set-ol-color(@grayLighter);}
+.ol-blue {.set-ol-color(@blue);}
+
+// Colors : borders
+.bd-black {.set-bd-color(@black);}
+.bd-white {.set-bd-color(@white);}
+.bd-lime {.set-bd-color(@lime);}
+.bd-green {.set-bd-color(@green);}
+.bd-emerald {.set-bd-color(@emerald);}
+.bd-teal {.set-bd-color(@teal);}
+.bd-cyan {.set-bd-color(@cyan);}
+.bd-cobalt {.set-bd-color(@cobalt);}
+.bd-indigo {.set-bd-color(@indigo);}
+.bd-violet {.set-bd-color(@violet);}
+.bd-pink {.set-bd-color(@pink);}
+.bd-magenta {.set-bd-color(@magenta);}
+.bd-crimson {.set-bd-color(@crimson);}
+.bd-red {.set-bd-color(@red);}
+.bd-orange {.set-bd-color(@orange);}
+.bd-amber {.set-bd-color(@amber);}
+.bd-yellow {.set-bd-color(@yellow);}
+.bd-brown {.set-bd-color(@brown);}
+.bd-olive {.set-bd-color(@olive);}
+.bd-steel {.set-bd-color(@steel);}
+.bd-mauve {.set-bd-color(@mauve);}
+.bd-taupe {.set-bd-color(@taupe);}
+.bd-gray {.set-bd-color(@gray);}
+.bd-dark {.set-bd-color(@grayDark);}
+.bd-darker {.set-bd-color(@grayDarker);}
+.bd-transparent {.set-bd-color(transparent);}
+.bd-darkBrown {.set-bd-color(@darkBrown);}
+.bd-darkCrimson {.set-bd-color(@darkCrimson);}
+.bd-darkMagenta {.set-bd-color(@darkMagenta);}
+.bd-darkIndigo {.set-bd-color(@darkIndigo);}
+.bd-darkCyan {.set-bd-color(@darkCyan);}
+.bd-darkCobalt {.set-bd-color(@darkCobalt);}
+.bd-darkTeal {.set-bd-color(@darkTeal);}
+.bd-darkEmerald {.set-bd-color(@darkEmerald);}
+.bd-darkGreen {.set-bd-color(@darkGreen);}
+.bd-darkOrange {.set-bd-color(@darkOrange);}
+.bd-darkRed {.set-bd-color(@darkRed);}
+.bd-darkPink {.set-bd-color(@darkPink);}
+.bd-darkViolet {.set-bd-color(@darkViolet);}
+.bd-darkBlue {.set-bd-color(@darkBlue);}
+.bd-lightBlue {.set-bd-color(@lightBlue);}
+.bd-lightTeal {.set-bd-color(@lightTeal);}
+.bd-lightOlive {.set-bd-color(@lightOlive);}
+.bd-lightOrange {.set-bd-color(@lightOrange);}
+.bd-lightPink {.set-bd-color(@lightPink);}
+.bd-lightRed {.set-bd-color(@lightRed);}
+.bd-lightGreen {.set-bd-color(@lightGreen);}
+.bd-grayDark {.set-bd-color(@grayDark);}
+.bd-grayDarker {.set-bd-color(@grayDarker);}
+.bd-grayLight {.set-bd-color(@grayLight);}
+.bd-grayLighter {.set-bd-color(@grayLighter);}
+.bd-blue {.set-bd-color(@blue);}
+
+// Hover Colors
+.bg-hover-black {&:hover{.set-bg-color(@black)}}
+.bg-hover-white {&:hover{.set-bg-color(@white)}}
+.bg-hover-lime {&:hover{.set-bg-color(@lime)}}
+.bg-hover-green {&:hover{.set-bg-color(@green)}}
+.bg-hover-emerald {&:hover{.set-bg-color(@emerald)}}
+.bg-hover-teal {&:hover{.set-bg-color(@teal)}}
+.bg-hover-cyan {&:hover{.set-bg-color(@cyan)}}
+.bg-hover-cobalt {&:hover{.set-bg-color(@cobalt)}}
+.bg-hover-indigo {&:hover{.set-bg-color(@indigo)}}
+.bg-hover-violet {&:hover{.set-bg-color(@violet)}}
+.bg-hover-pink {&:hover{.set-bg-color(@pink)}}
+.bg-hover-magenta {&:hover{.set-bg-color(@magenta)}}
+.bg-hover-crimson {&:hover{.set-bg-color(@crimson)}}
+.bg-hover-red {&:hover{.set-bg-color(@red)}}
+.bg-hover-orange {&:hover{.set-bg-color(@orange)}}
+.bg-hover-amber {&:hover{.set-bg-color(@amber)}}
+.bg-hover-yellow {&:hover{.set-bg-color(@yellow)}}
+.bg-hover-brown {&:hover{.set-bg-color(@brown)}}
+.bg-hover-olive {&:hover{.set-bg-color(@olive)}}
+.bg-hover-steel {&:hover{.set-bg-color(@steel)}}
+.bg-hover-mauve {&:hover{.set-bg-color(@mauve)}}
+.bg-hover-taupe {&:hover{.set-bg-color(@taupe)}}
+.bg-hover-gray {&:hover{.set-bg-color(@gray)}}
+.bg-hover-dark {&:hover{.set-bg-color(@grayDark)}}
+.bg-hover-darker {&:hover{.set-bg-color(@grayDarker)}}
+.bg-hover-transparent {&:hover{.set-bg-color(transparent)}}
+.bg-hover-darkBrown {&:hover{.set-bg-color(@darkBrown)}}
+.bg-hover-darkCrimson {&:hover{.set-bg-color(@darkCrimson)}}
+.bg-hover-darkMagenta {&:hover{.set-bg-color(@darkMagenta)}}
+.bg-hover-darkIndigo {&:hover{.set-bg-color(@darkIndigo)}}
+.bg-hover-darkCyan {&:hover{.set-bg-color(@darkCyan)}}
+.bg-hover-darkCobalt {&:hover{.set-bg-color(@darkCobalt)}}
+.bg-hover-darkTeal {&:hover{.set-bg-color(@darkTeal)}}
+.bg-hover-darkEmerald {&:hover{.set-bg-color(@darkEmerald)}}
+.bg-hover-darkGreen {&:hover{.set-bg-color(@darkGreen)}}
+.bg-hover-darkOrange {&:hover{.set-bg-color(@darkOrange)}}
+.bg-hover-darkRed {&:hover{.set-bg-color(@darkRed)}}
+.bg-hover-darkPink {&:hover{.set-bg-color(@darkPink)}}
+.bg-hover-darkViolet {&:hover{.set-bg-color(@darkViolet)}}
+.bg-hover-darkBlue {&:hover{.set-bg-color(@darkBlue)}}
+.bg-hover-lightBlue {&:hover{.set-bg-color(@lightBlue)}}
+.bg-hover-lightTeal {&:hover{.set-bg-color(@lightTeal)}}
+.bg-hover-lightOlive {&:hover{.set-bg-color(@lightOlive)}}
+.bg-hover-lightOrange {&:hover{.set-bg-color(@lightOrange)}}
+.bg-hover-lightPink {&:hover{.set-bg-color(@lightPink)}}
+.bg-hover-lightRed {&:hover{.set-bg-color(@lightRed)}}
+.bg-hover-lightGreen {&:hover{.set-bg-color(@lightGreen)}}
+.bg-hover-grayDark {&:hover{.set-bg-color(@grayDark)}}
+.bg-hover-grayDarker {&:hover{.set-bg-color(@grayDarker)}}
+.bg-hover-grayLight {&:hover{.set-bg-color(@grayLight)}}
+.bg-hover-grayLighter {&:hover{.set-bg-color(@grayLighter)}}
+.bg-hover-blue {&:hover{.set-bg-color(@blue)}}
+
+.fg-hover-black {&:hover{.set-fg-color(@black)}}
+.fg-hover-white {&:hover{.set-fg-color(@white)}}
+.fg-hover-lime {&:hover{.set-fg-color(@lime)}}
+.fg-hover-green {&:hover{.set-fg-color(@green)}}
+.fg-hover-emerald {&:hover{.set-fg-color(@emerald)}}
+.fg-hover-teal {&:hover{.set-fg-color(@teal)}}
+.fg-hover-cyan {&:hover{.set-fg-color(@cyan)}}
+.fg-hover-cobalt {&:hover{.set-fg-color(@cobalt)}}
+.fg-hover-indigo {&:hover{.set-fg-color(@indigo)}}
+.fg-hover-violet {&:hover{.set-fg-color(@violet)}}
+.fg-hover-pink {&:hover{.set-fg-color(@pink)}}
+.fg-hover-magenta {&:hover{.set-fg-color(@magenta)}}
+.fg-hover-crimson {&:hover{.set-fg-color(@crimson)}}
+.fg-hover-red {&:hover{.set-fg-color(@red)}}
+.fg-hover-orange {&:hover{.set-fg-color(@orange)}}
+.fg-hover-amber {&:hover{.set-fg-color(@amber)}}
+.fg-hover-yellow {&:hover{.set-fg-color(@yellow)}}
+.fg-hover-brown {&:hover{.set-fg-color(@brown)}}
+.fg-hover-olive {&:hover{.set-fg-color(@olive)}}
+.fg-hover-steel {&:hover{.set-fg-color(@steel)}}
+.fg-hover-mauve {&:hover{.set-fg-color(@mauve)}}
+.fg-hover-taupe {&:hover{.set-fg-color(@taupe)}}
+.fg-hover-gray {&:hover{.set-fg-color(@gray)}}
+.fg-hover-dark {&:hover{.set-fg-color(@grayDark)}}
+.fg-hover-darker {&:hover{.set-fg-color(@grayDarker)}}
+.fg-hover-transparent {&:hover{.set-fg-color(transparent)}}
+.fg-hover-darkBrown {&:hover{.set-fg-color(@darkBrown)}}
+.fg-hover-darkCrimson {&:hover{.set-fg-color(@darkCrimson)}}
+.fg-hover-darkMagenta {&:hover{.set-fg-color(@darkMagenta)}}
+.fg-hover-darkIndigo {&:hover{.set-fg-color(@darkIndigo)}}
+.fg-hover-darkCyan {&:hover{.set-fg-color(@darkCyan)}}
+.fg-hover-darkCobalt {&:hover{.set-fg-color(@darkCobalt)}}
+.fg-hover-darkTeal {&:hover{.set-fg-color(@darkTeal)}}
+.fg-hover-darkEmerald {&:hover{.set-fg-color(@darkEmerald)}}
+.fg-hover-darkGreen {&:hover{.set-fg-color(@darkGreen)}}
+.fg-hover-darkOrange {&:hover{.set-fg-color(@darkOrange)}}
+.fg-hover-darkRed {&:hover{.set-fg-color(@darkRed)}}
+.fg-hover-darkPink {&:hover{.set-fg-color(@darkPink)}}
+.fg-hover-darkViolet {&:hover{.set-fg-color(@darkViolet)}}
+.fg-hover-darkBlue {&:hover{.set-fg-color(@darkBlue)}}
+.fg-hover-lightBlue {&:hover{.set-fg-color(@lightBlue)}}
+.fg-hover-lightTeal {&:hover{.set-fg-color(@lightTeal)}}
+.fg-hover-lightOlive {&:hover{.set-fg-color(@lightOlive)}}
+.fg-hover-lightOrange {&:hover{.set-fg-color(@lightOrange)}}
+.fg-hover-lightPink {&:hover{.set-fg-color(@lightPink)}}
+.fg-hover-lightRed {&:hover{.set-fg-color(@lightRed)}}
+.fg-hover-lightGreen {&:hover{.set-fg-color(@lightGreen)}}
+.fg-hover-grayDark {&:hover{.set-fg-color(@grayDark)}}
+.fg-hover-grayDarker {&:hover{.set-fg-color(@grayDarker)}}
+.fg-hover-grayLight {&:hover{.set-fg-color(@grayLight)}}
+.fg-hover-grayLighter {&:hover{.set-fg-color(@grayLighter)}}
+.fg-hover-blue {&:hover{.set-fg-color(@blue)}}
+
+// Active Colors
+.bg-active-black {&:active{.set-bg-color(@black)}}
+.bg-active-white {&:active{.set-bg-color(@white)}}
+.bg-active-lime {&:active{.set-bg-color(@lime)}}
+.bg-active-green {&:active{.set-bg-color(@green)}}
+.bg-active-emerald {&:active{.set-bg-color(@emerald)}}
+.bg-active-teal {&:active{.set-bg-color(@teal)}}
+.bg-active-cyan {&:active{.set-bg-color(@cyan)}}
+.bg-active-cobalt {&:active{.set-bg-color(@cobalt)}}
+.bg-active-indigo {&:active{.set-bg-color(@indigo)}}
+.bg-active-violet {&:active{.set-bg-color(@violet)}}
+.bg-active-pink {&:active{.set-bg-color(@pink)}}
+.bg-active-magenta {&:active{.set-bg-color(@magenta)}}
+.bg-active-crimson {&:active{.set-bg-color(@crimson)}}
+.bg-active-red {&:active{.set-bg-color(@red)}}
+.bg-active-orange {&:active{.set-bg-color(@orange)}}
+.bg-active-amber {&:active{.set-bg-color(@amber)}}
+.bg-active-yellow {&:active{.set-bg-color(@yellow)}}
+.bg-active-brown {&:active{.set-bg-color(@brown)}}
+.bg-active-olive {&:active{.set-bg-color(@olive)}}
+.bg-active-steel {&:active{.set-bg-color(@steel)}}
+.bg-active-mauve {&:active{.set-bg-color(@mauve)}}
+.bg-active-taupe {&:active{.set-bg-color(@taupe)}}
+.bg-active-gray {&:active{.set-bg-color(@gray)}}
+.bg-active-dark {&:active{.set-bg-color(@grayDark)}}
+.bg-active-darker {&:active{.set-bg-color(@grayDarker)}}
+.bg-active-transparent {&:active{.set-bg-color(transparent)}}
+.bg-active-darkBrown {&:active{.set-bg-color(@darkBrown)}}
+.bg-active-darkCrimson {&:active{.set-bg-color(@darkCrimson)}}
+.bg-active-darkMagenta {&:active{.set-bg-color(@darkMagenta)}}
+.bg-active-darkIndigo {&:active{.set-bg-color(@darkIndigo)}}
+.bg-active-darkCyan {&:active{.set-bg-color(@darkCyan)}}
+.bg-active-darkCobalt {&:active{.set-bg-color(@darkCobalt)}}
+.bg-active-darkTeal {&:active{.set-bg-color(@darkTeal)}}
+.bg-active-darkEmerald {&:active{.set-bg-color(@darkEmerald)}}
+.bg-active-darkGreen {&:active{.set-bg-color(@darkGreen)}}
+.bg-active-darkOrange {&:active{.set-bg-color(@darkOrange)}}
+.bg-active-darkRed {&:active{.set-bg-color(@darkRed)}}
+.bg-active-darkPink {&:active{.set-bg-color(@darkPink)}}
+.bg-active-darkViolet {&:active{.set-bg-color(@darkViolet)}}
+.bg-active-darkBlue {&:active{.set-bg-color(@darkBlue)}}
+.bg-active-lightBlue {&:active{.set-bg-color(@lightBlue)}}
+.bg-active-lightTeal {&:active{.set-bg-color(@lightTeal)}}
+.bg-active-lightOlive {&:active{.set-bg-color(@lightOlive)}}
+.bg-active-lightOrange {&:active{.set-bg-color(@lightOrange)}}
+.bg-active-lightPink {&:active{.set-bg-color(@lightPink)}}
+.bg-active-lightRed {&:active{.set-bg-color(@lightRed)}}
+.bg-active-lightGreen {&:active{.set-bg-color(@lightGreen)}}
+.bg-active-grayDark {&:active{.set-bg-color(@grayDark)}}
+.bg-active-grayDarker {&:active{.set-bg-color(@grayDarker)}}
+.bg-active-grayLight {&:active{.set-bg-color(@grayLight)}}
+.bg-active-grayLighter {&:active{.set-bg-color(@grayLighter)}}
+.bg-active-blue {&:active{.set-bg-color(@blue)}}
+
+.fg-active-black {&:active{.set-fg-color(@black)}}
+.fg-active-white {&:active{.set-fg-color(@white)}}
+.fg-active-lime {&:active{.set-fg-color(@lime)}}
+.fg-active-green {&:active{.set-fg-color(@green)}}
+.fg-active-emerald {&:active{.set-fg-color(@emerald)}}
+.fg-active-teal {&:active{.set-fg-color(@teal)}}
+.fg-active-cyan {&:active{.set-fg-color(@cyan)}}
+.fg-active-cobalt {&:active{.set-fg-color(@cobalt)}}
+.fg-active-indigo {&:active{.set-fg-color(@indigo)}}
+.fg-active-violet {&:active{.set-fg-color(@violet)}}
+.fg-active-pink {&:active{.set-fg-color(@pink)}}
+.fg-active-magenta {&:active{.set-fg-color(@magenta)}}
+.fg-active-crimson {&:active{.set-fg-color(@crimson)}}
+.fg-active-red {&:active{.set-fg-color(@red)}}
+.fg-active-orange {&:active{.set-fg-color(@orange)}}
+.fg-active-amber {&:active{.set-fg-color(@amber)}}
+.fg-active-yellow {&:active{.set-fg-color(@yellow)}}
+.fg-active-brown {&:active{.set-fg-color(@brown)}}
+.fg-active-olive {&:active{.set-fg-color(@olive)}}
+.fg-active-steel {&:active{.set-fg-color(@steel)}}
+.fg-active-mauve {&:active{.set-fg-color(@mauve)}}
+.fg-active-taupe {&:active{.set-fg-color(@taupe)}}
+.fg-active-gray {&:active{.set-fg-color(@gray)}}
+.fg-active-dark {&:active{.set-fg-color(@grayDark)}}
+.fg-active-darker {&:active{.set-fg-color(@grayDarker)}}
+.fg-active-transparent {&:active{.set-fg-color(transparent)}}
+.fg-active-darkBrown {&:active{.set-fg-color(@darkBrown)}}
+.fg-active-darkCrimson {&:active{.set-fg-color(@darkCrimson)}}
+.fg-active-darkMagenta {&:active{.set-fg-color(@darkMagenta)}}
+.fg-active-darkIndigo {&:active{.set-fg-color(@darkIndigo)}}
+.fg-active-darkCyan {&:active{.set-fg-color(@darkCyan)}}
+.fg-active-darkCobalt {&:active{.set-fg-color(@darkCobalt)}}
+.fg-active-darkTeal {&:active{.set-fg-color(@darkTeal)}}
+.fg-active-darkEmerald {&:active{.set-fg-color(@darkEmerald)}}
+.fg-active-darkGreen {&:active{.set-fg-color(@darkGreen)}}
+.fg-active-darkOrange {&:active{.set-fg-color(@darkOrange)}}
+.fg-active-darkRed {&:active{.set-fg-color(@darkRed)}}
+.fg-active-darkPink {&:active{.set-fg-color(@darkPink)}}
+.fg-active-darkViolet {&:active{.set-fg-color(@darkViolet)}}
+.fg-active-darkBlue {&:active{.set-fg-color(@darkBlue)}}
+.fg-active-lightBlue {&:active{.set-fg-color(@lightBlue)}}
+.fg-active-lightTeal {&:active{.set-fg-color(@lightTeal)}}
+.fg-active-lightOlive {&:active{.set-fg-color(@lightOlive)}}
+.fg-active-lightOrange {&:active{.set-fg-color(@lightOrange)}}
+.fg-active-lightPink {&:active{.set-fg-color(@lightPink)}}
+.fg-active-lightRed {&:active{.set-fg-color(@lightRed)}}
+.fg-active-lightGreen {&:active{.set-fg-color(@lightGreen)}}
+.fg-active-grayDark {&:active{.set-fg-color(@grayDark)}}
+.fg-active-grayDarker {&:active{.set-fg-color(@grayDarker)}}
+.fg-active-grayLight {&:active{.set-fg-color(@grayLight)}}
+.fg-active-grayLighter {&:active{.set-fg-color(@grayLighter)}}
+.fg-active-blue {&:active{.set-fg-color(@blue)}}
+
+// Focus Colors
+.bg-focus-black {&:focus{.set-bg-color(@black)}}
+.bg-focus-white {&:focus{.set-bg-color(@white)}}
+.bg-focus-lime {&:focus{.set-bg-color(@lime)}}
+.bg-focus-green {&:focus{.set-bg-color(@green)}}
+.bg-focus-emerald {&:focus{.set-bg-color(@emerald)}}
+.bg-focus-teal {&:focus{.set-bg-color(@teal)}}
+.bg-focus-cyan {&:focus{.set-bg-color(@cyan)}}
+.bg-focus-cobalt {&:focus{.set-bg-color(@cobalt)}}
+.bg-focus-indigo {&:focus{.set-bg-color(@indigo)}}
+.bg-focus-violet {&:focus{.set-bg-color(@violet)}}
+.bg-focus-pink {&:focus{.set-bg-color(@pink)}}
+.bg-focus-magenta {&:focus{.set-bg-color(@magenta)}}
+.bg-focus-crimson {&:focus{.set-bg-color(@crimson)}}
+.bg-focus-red {&:focus{.set-bg-color(@red)}}
+.bg-focus-orange {&:focus{.set-bg-color(@orange)}}
+.bg-focus-amber {&:focus{.set-bg-color(@amber)}}
+.bg-focus-yellow {&:focus{.set-bg-color(@yellow)}}
+.bg-focus-brown {&:focus{.set-bg-color(@brown)}}
+.bg-focus-olive {&:focus{.set-bg-color(@olive)}}
+.bg-focus-steel {&:focus{.set-bg-color(@steel)}}
+.bg-focus-mauve {&:focus{.set-bg-color(@mauve)}}
+.bg-focus-taupe {&:focus{.set-bg-color(@taupe)}}
+.bg-focus-gray {&:focus{.set-bg-color(@gray)}}
+.bg-focus-dark {&:focus{.set-bg-color(@grayDark)}}
+.bg-focus-darker {&:focus{.set-bg-color(@grayDarker)}}
+.bg-focus-transparent {&:focus{.set-bg-color(transparent)}}
+.bg-focus-darkBrown {&:focus{.set-bg-color(@darkBrown)}}
+.bg-focus-darkCrimson {&:focus{.set-bg-color(@darkCrimson)}}
+.bg-focus-darkMagenta {&:focus{.set-bg-color(@darkMagenta)}}
+.bg-focus-darkIndigo {&:focus{.set-bg-color(@darkIndigo)}}
+.bg-focus-darkCyan {&:focus{.set-bg-color(@darkCyan)}}
+.bg-focus-darkCobalt {&:focus{.set-bg-color(@darkCobalt)}}
+.bg-focus-darkTeal {&:focus{.set-bg-color(@darkTeal)}}
+.bg-focus-darkEmerald {&:focus{.set-bg-color(@darkEmerald)}}
+.bg-focus-darkGreen {&:focus{.set-bg-color(@darkGreen)}}
+.bg-focus-darkOrange {&:focus{.set-bg-color(@darkOrange)}}
+.bg-focus-darkRed {&:focus{.set-bg-color(@darkRed)}}
+.bg-focus-darkPink {&:focus{.set-bg-color(@darkPink)}}
+.bg-focus-darkViolet {&:focus{.set-bg-color(@darkViolet)}}
+.bg-focus-darkBlue {&:focus{.set-bg-color(@darkBlue)}}
+.bg-focus-lightBlue {&:focus{.set-bg-color(@lightBlue)}}
+.bg-focus-lightTeal {&:focus{.set-bg-color(@lightTeal)}}
+.bg-focus-lightOlive {&:focus{.set-bg-color(@lightOlive)}}
+.bg-focus-lightOrange {&:focus{.set-bg-color(@lightOrange)}}
+.bg-focus-lightPink {&:focus{.set-bg-color(@lightPink)}}
+.bg-focus-lightRed {&:focus{.set-bg-color(@lightRed)}}
+.bg-focus-lightGreen {&:focus{.set-bg-color(@lightGreen)}}
+.bg-focus-grayDark {&:focus{.set-bg-color(@grayDark)}}
+.bg-focus-grayDarker {&:focus{.set-bg-color(@grayDarker)}}
+.bg-focus-grayLight {&:focus{.set-bg-color(@grayLight)}}
+.bg-focus-grayLighter {&:focus{.set-bg-color(@grayLighter)}}
+.bg-focus-blue {&:focus{.set-bg-color(@blue)}}
+
+.fg-focus-black {&:focus{.set-fg-color(@black)}}
+.fg-focus-white {&:focus{.set-fg-color(@white)}}
+.fg-focus-lime {&:focus{.set-fg-color(@lime)}}
+.fg-focus-green {&:focus{.set-fg-color(@green)}}
+.fg-focus-emerald {&:focus{.set-fg-color(@emerald)}}
+.fg-focus-teal {&:focus{.set-fg-color(@teal)}}
+.fg-focus-cyan {&:focus{.set-fg-color(@cyan)}}
+.fg-focus-cobalt {&:focus{.set-fg-color(@cobalt)}}
+.fg-focus-indigo {&:focus{.set-fg-color(@indigo)}}
+.fg-focus-violet {&:focus{.set-fg-color(@violet)}}
+.fg-focus-pink {&:focus{.set-fg-color(@pink)}}
+.fg-focus-magenta {&:focus{.set-fg-color(@magenta)}}
+.fg-focus-crimson {&:focus{.set-fg-color(@crimson)}}
+.fg-focus-red {&:focus{.set-fg-color(@red)}}
+.fg-focus-orange {&:focus{.set-fg-color(@orange)}}
+.fg-focus-amber {&:focus{.set-fg-color(@amber)}}
+.fg-focus-yellow {&:focus{.set-fg-color(@yellow)}}
+.fg-focus-brown {&:focus{.set-fg-color(@brown)}}
+.fg-focus-olive {&:focus{.set-fg-color(@olive)}}
+.fg-focus-steel {&:focus{.set-fg-color(@steel)}}
+.fg-focus-mauve {&:focus{.set-fg-color(@mauve)}}
+.fg-focus-taupe {&:focus{.set-fg-color(@taupe)}}
+.fg-focus-gray {&:focus{.set-fg-color(@gray)}}
+.fg-focus-dark {&:focus{.set-fg-color(@grayDark)}}
+.fg-focus-darker {&:focus{.set-fg-color(@grayDarker)}}
+.fg-focus-transparent {&:focus{.set-fg-color(transparent)}}
+.fg-focus-darkBrown {&:focus{.set-fg-color(@darkBrown)}}
+.fg-focus-darkCrimson {&:focus{.set-fg-color(@darkCrimson)}}
+.fg-focus-darkMagenta {&:focus{.set-fg-color(@darkMagenta)}}
+.fg-focus-darkIndigo {&:focus{.set-fg-color(@darkIndigo)}}
+.fg-focus-darkCyan {&:focus{.set-fg-color(@darkCyan)}}
+.fg-focus-darkCobalt {&:focus{.set-fg-color(@darkCobalt)}}
+.fg-focus-darkTeal {&:focus{.set-fg-color(@darkTeal)}}
+.fg-focus-darkEmerald {&:focus{.set-fg-color(@darkEmerald)}}
+.fg-focus-darkGreen {&:focus{.set-fg-color(@darkGreen)}}
+.fg-focus-darkOrange {&:focus{.set-fg-color(@darkOrange)}}
+.fg-focus-darkRed {&:focus{.set-fg-color(@darkRed)}}
+.fg-focus-darkPink {&:focus{.set-fg-color(@darkPink)}}
+.fg-focus-darkViolet {&:focus{.set-fg-color(@darkViolet)}}
+.fg-focus-darkBlue {&:focus{.set-fg-color(@darkBlue)}}
+.fg-focus-lightBlue {&:focus{.set-fg-color(@lightBlue)}}
+.fg-focus-lightTeal {&:focus{.set-fg-color(@lightTeal)}}
+.fg-focus-lightOlive {&:focus{.set-fg-color(@lightOlive)}}
+.fg-focus-lightOrange {&:focus{.set-fg-color(@lightOrange)}}
+.fg-focus-lightPink {&:focus{.set-fg-color(@lightPink)}}
+.fg-focus-lightRed {&:focus{.set-fg-color(@lightRed)}}
+.fg-focus-lightGreen {&:focus{.set-fg-color(@lightGreen)}}
+.fg-focus-grayDark {&:focus{.set-fg-color(@grayDark)}}
+.fg-focus-grayDarker {&:focus{.set-fg-color(@grayDarker)}}
+.fg-focus-grayLight {&:focus{.set-fg-color(@grayLight)}}
+.fg-focus-grayLighter {&:focus{.set-fg-color(@grayLighter)}}
+.fg-focus-blue {&:focus{.set-fg-color(@blue)}}
+
+.ribbed-black {.ribbed(@black) ;}
+.ribbed-white {.ribbed(@white) ;}
+.ribbed-lime {.ribbed(@lime) ;}
+.ribbed-green {.ribbed(@green) ;}
+.ribbed-emerald {.ribbed(@emerald) ;}
+.ribbed-teal {.ribbed(@teal) ;}
+.ribbed-cyan {.ribbed(@cyan) ;}
+.ribbed-cobalt {.ribbed(@cobalt) ;}
+.ribbed-indigo {.ribbed(@indigo) ;}
+.ribbed-violet {.ribbed(@violet) ;}
+.ribbed-pink {.ribbed(@pink) ;}
+.ribbed-magenta {.ribbed(@magenta) ;}
+.ribbed-crimson {.ribbed(@crimson) ;}
+.ribbed-red {.ribbed(@red) ;}
+.ribbed-orange {.ribbed(@orange) ;}
+.ribbed-amber {.ribbed(@amber) ;}
+.ribbed-yellow {.ribbed(@yellow) ;}
+.ribbed-brown {.ribbed(@brown) ;}
+.ribbed-olive {.ribbed(@olive) ;}
+.ribbed-steel {.ribbed(@steel) ;}
+.ribbed-mauve {.ribbed(@mauve) ;}
+.ribbed-taupe {.ribbed(@taupe) ;}
+.ribbed-dark {.ribbed(@dark) ;}
+.ribbed-darkBrown {.ribbed(@darkBrown) ;}
+.ribbed-darkCrimson {.ribbed(@darkCrimson) ;}
+.ribbed-darkMagenta {.ribbed(@darkMagenta) ;}
+.ribbed-darkIndigo {.ribbed(@darkIndigo) ;}
+.ribbed-darkCyan {.ribbed(@darkCyan) ;}
+.ribbed-darkCobalt {.ribbed(@darkCobalt) ;}
+.ribbed-darkTeal {.ribbed(@darkTeal) ;}
+.ribbed-darkEmerald {.ribbed(@darkEmerald) ;}
+.ribbed-darkGreen {.ribbed(@darkGreen) ;}
+.ribbed-darkOrange {.ribbed(@darkOrange) ;}
+.ribbed-darkRed {.ribbed(@darkRed) ;}
+.ribbed-darkPink {.ribbed(@darkPink) ;}
+.ribbed-darkViolet {.ribbed(@darkViolet) ;}
+.ribbed-darkBlue {.ribbed(@darkBlue) ;}
+.ribbed-lightTeal {.ribbed(@lightTeal) ;}
+.ribbed-lightOlive {.ribbed(@lightOlive) ;}
+.ribbed-lightOrange {.ribbed(@lightOrange) ;}
+.ribbed-lightPink {.ribbed(@lightPink) ;}
+.ribbed-lightRed {.ribbed(@lightRed) ;}
+.ribbed-lightGreen {.ribbed(@lightGreen) ;}
+.ribbed-grayed {.ribbed(@grayed) ;}
+.ribbed-grayDarker {.ribbed(@grayDarker) ;}
+.ribbed-gray {.ribbed(@gray) ;}
+.ribbed-grayLight {.ribbed(@grayLight) ;}
+.ribbed-grayLighter {.ribbed(@grayLighter) ;}
+.ribbed-blue {.ribbed(@blue) ;}