openshift-origin-console 1.3.2

data/app/assets/stylesheets/_ribbon.scss

@@ -0,0 +1,57 @@
+// Create a ribbon style for an element. Will 
+// -------------------------
+// Requires that the child .ribbon-content be styled
+@mixin ribbon($color, $foldHeight: 10px, $negativeMargin: 10px, $shadowX: 1px, $shadowY: 2px, $shadowBlur: 2px, $shadowColor: rgba(0, 0, 0, 0.5), $leftStrut: true, $rightStrut: false) {
+  position: relative;
+  box-shadow: $shadowX $shadowY $shadowBlur $shadowColor;
+  @include ribbon_gutters($gridGutterWidth, $negativeMargin);
+
+  @if $leftStrut {
+    &::before {
+      content: '';
+      position: absolute;
+      width: 0; height: 0;
+      left: 0;
+      border-top: $foldHeight solid $color;
+      bottom: -$foldHeight;
+      border-left: $negativeMargin solid transparent;
+    }
+  } @else {
+    &::before {
+      content: ' ';
+      position: absolute;
+      width: $negativeMargin;
+      height: 1px;
+      left: 0;
+      bottom: 0;
+      box-shadow: $shadowX $shadowY $shadowBlur $shadowColor;
+    }
+  }
+
+  @if $rightStrut {
+    &::after {
+      content: '';
+      position: absolute;
+      width: 0; height: 0;
+      right: 0px;
+      border-top: $foldHeight solid $color;
+      bottom: -$foldHeight;
+      border-right: $negativeMargin solid transparent;
+    }
+  } else {
+    &::after {
+      content: ' ';
+      position: absolute;
+      width: $negativeMargin;
+      height: 1px;
+      left: 0;
+      bottom: 0;
+      box-shadow: $shadowX $shadowY $shadowBlur $shadowColor;
+    }
+  }
+}
+
+@mixin ribbon_gutters($marginWidth, $ribbonOffset: 10px) {
+  margin-left: -($ribbonOffset + $marginWidth);
+  padding-left: $ribbonOffset + $marginWidth;
+}

data/app/assets/stylesheets/_type.scss

@@ -0,0 +1,306 @@
+// Typography.scss
+// Headings, body text, lists, code, and more for a versatile and durable typography system
+// ----------------------------------------------------------------------------------------
+
+
+// BODY TEXT
+// ---------
+
+p {
+  margin: 0 0 $baseLineHeight;
+  font-family: $baseFontFamily;
+  font-size: $baseFontSize;
+  line-height: $baseLineHeight;
+  small {
+    font-size: $baseFontSize - 2;
+    color: $grayLight;
+  }
+}
+.lead {
+  margin-bottom: $baseLineHeight;
+  font-size: 20px;
+  font-weight: 200;
+  line-height: $baseLineHeight * 1.5;
+}
+
+// HEADINGS
+// --------
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-family: $headerFontFamily;
+  font-weight: normal;
+  color: #000;
+  text-rendering: optimizelegibility; // Fix the character spacing for headings
+  small {
+    font-weight: normal;
+    color: $grayLight;
+  }
+}
+h1 + h2 {
+	margin-bottom: 0;
+}
+h3 + h4, h3 + h5, h4 + h5 {
+  padding-top: $baseLineHeight / 3;
+}
+p + h2, p + h3, p + h4, p + h5 {
+  padding-top: $baseLineHeight / 2;
+}
+h1 {
+  font-size: $baseFontSize * 2.25;
+  line-height: $baseLineHeight * 2;
+  margin-bottom: $baseLineHeight / 2;
+}
+h2 {
+  font-size: $baseFontSize * 1.62;
+  line-height: $baseLineHeight * 1.75;
+  margin-bottom: $baseLineHeight / 3;
+}
+h3 {
+  font-size: $baseFontSize * 1.38;
+  line-height: $baseLineHeight * 1.5;
+  small {
+    font-size: $baseFontSize;
+  }
+}
+h4 {
+  font-size: $baseFontSize * 1.25;
+  line-height: $baseLineHeight;
+  small {
+    font-size: $baseFontSize * .88;
+  }
+}
+h5 {
+  font-size: $baseFontSize;
+  line-height: $baseLineHeight;
+  text-transform: uppercase;
+}
+h6 {
+  font-size: $baseFontSize * .82;
+  line-height: $baseLineHeight;
+  text-transform: uppercase;
+}
+
+@media (max-width:480px) {
+	h1 {font-size:24px;line-height: $baseLineHeight * 1.5;}
+	h2 {font-size: 19.5px;line-height: $baseLineHeight * 1.25;}
+	h3 {font-size: 16.5px;line-height: $baseLineHeight;}
+	h4 {font-size: 14px;}
+	h5 {font-size: 13px;}
+}
+
+footer h3 {
+  text-transform:uppercase;
+  margin-bottom: 0;
+}
+
+.align-right {
+  text-align: right;
+}
+
+// ASIDE
+// -----
+aside, aside p {
+    font-size: $baseFontSize - 1.5;
+}
+
+
+// LISTS
+// -----
+
+// Unordered and Ordered lists
+ul, ol {
+  padding: 0;
+  margin: 0 0 $baseLineHeight 25px;
+}
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin-bottom: 0;
+}
+ul {
+  list-style: disc;
+}
+ol {
+  list-style: decimal;
+}
+li {
+  line-height: $baseLineHeight;
+}
+ul.unstyled,
+ol.unstyled {
+  margin-left: 0;
+  list-style: none;
+}
+ul.spaced-items li, ol.spaced-items li {
+  margin-bottom: 10px;
+}
+
+// Description Lists
+dl {
+  margin-bottom: $baseLineHeight;
+}
+dt,
+dd {
+  line-height: $baseLineHeight;
+}
+dt {
+  font-weight: bold;
+}
+dd {
+  margin: 0 0 10px 10px;
+}
+
+// MISC
+// ----
+
+// Horizontal rules
+hr {
+  margin: $baseLineHeight 0;
+  border: 0;
+  border-top: 1px solid $hrBorder;
+  #border-bottom: 1px solid $white;
+}
+
+// Emphasis
+strong {
+  font-weight: bold;
+}
+em {
+  font-style: italic;
+}
+.muted {
+  color: $grayLight;
+}
+
+// Abbreviations and acronyms
+abbr {
+  font-size: 90%;
+  text-transform: uppercase;
+  border-bottom: 1px dotted #ddd;
+  cursor: help;
+}
+
+// Blockquotes
+blockquote {
+  padding: 0 0 0 15px;
+  margin: 0 0 $baseLineHeight;
+  border-left: 5px solid $grayLighter;
+  p {
+    margin-bottom: 0;
+    @include font-shorthand(16px,300,$baseLineHeight * 1.25);
+  }
+  small {
+    display: block;
+    line-height: $baseLineHeight;
+    color: $grayLight;
+    &:before {
+      content: '\2014 \00A0';
+    }
+  }
+
+  // Float right with text-align: right
+  &.pull-right {
+    float: right;
+    padding-left: 0;
+    padding-right: 15px;
+    border-left: 0;
+    border-right: 5px solid $grayLighter;
+    p,
+    small {
+      text-align: right;
+    }
+  }
+}
+
+// Quotes
+q:before,
+q:after,
+blockquote:before, 
+blockquote:after {
+  content: "";
+}
+
+// Addresses
+address {
+  display: block;
+  margin-bottom: $baseLineHeight;
+  line-height: $baseLineHeight;
+  font-style: normal;
+}
+
+// Misc
+small {
+  font-size: 100%;
+}
+cite {
+  font-style: normal;
+}
+
+.smaller {font-size: $baseFontSize - 1.5 ;}
+
+a.external:after { 
+  content: "\279A";
+  font-size: $baseFontSize - 1;
+  vertical-align: text-bottom;
+}
+a.external img[alt="external"] {
+  display: none;
+}
+
+
+p.larger { 
+  font-size: $baseFontSize + 1;
+  line-height: 21px;
+}
+dl.larger {
+  > dt {
+    font-size: 18px; 
+    line-height: 23px; 
+  }
+  > dd {
+    margin-bottom: 20px; 
+  }
+}
+
+
+figure {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  word-wrap: break-word;
+}
+
+
+ol.unstyled {
+  margin-left: 0;
+  list-style: none;
+}
+
+
+ul.regular,
+ol.regular {
+  margin: 0 0 9px 30px;
+  padding: 0;
+}
+
+
+ul.unstyled-flat {
+  list-style: none;
+
+  > li {
+    list-style: none;
+    float:left;
+  }
+}
+
+.headline, .nav, .section-top, .btn-navbar {
+	font-family: $headerFontFamily;
+  font-weight: normal;
+}
+
+.section {
+  margin-bottom: 30px;
+}

data/app/assets/stylesheets/_utilities.scss

@@ -0,0 +1,10 @@
+
+.clear-both { clear: both; }
+
+.left { text-align: left; }
+.center { text-align: center; }
+.right { text-align: right; }
+
+.invisible {
+  border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
+	}

data/app/assets/stylesheets/_variables.scss

@@ -0,0 +1,131 @@
+$baseFontFamily:      "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif !default;
+$headerFontFamily:    "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+
+$baseLineHeight:          18px;
+$baseFontSize:						13.5px;
+
+$responsivePhone:         480px;
+$responsiveTablet:        768px;
+$responsiveDefault:       980px;
+$responsiveLarge:         1200px;
+
+$gridGutterWidth:         28px;
+$gridColumnWidth:         50px; // 80 * 12 = 960
+
+$gridGutterWidthPhone:    20px; // replaces padding
+
+$gridGutterWidthTablet:   20px;
+$gridColumnWidthTablet:   42.5px; // 62 * 12 = 744 and 12px gutters
+
+$gridGutterWidthLarge:    30px;
+$gridColumnWidthLarge:    60px;
+
+$logoHeight:      90px;
+$logoWidth:       110px;
+$logoSeparation:  10px;
+
+$openshiftRed:                  #CD202C; /* From style guide */
+$openshiftBrightRed:            #EA0011;
+$openshiftDarkRed:              #a1000c; /* action-call dark */
+$openshiftMediumBackgroundGray: #343434; /* From screenshots, for nav */
+$openshiftDarkBackgroundGray:   #333; /* From screenshots, background of sign in link */
+$openshiftAlmostBlack:          #030303;
+$openshiftSeriouslyAlmostBlack: #010101;
+$openshiftLinkGray:             #909090; /* Used on the signup link */
+$openshiftBorderGray:           #b4b4b2; /* From screenshots */
+$genericLightGreen:             #d4e16b;
+
+$cliText:                       #D0E57B;
+$cliBackground:                 #222222;
+
+$breadcrumbDividerColor:        $openshiftDarkRed;
+$breadcrumbTextColor:           $openshiftMediumBackgroundGray; 
+
+$topBarBackgroundColor:         $openshiftSeriouslyAlmostBlack;
+$navBackgroundColor:            $openshiftMediumBackgroundGray;
+$navColumnBackgroundColor:      $openshiftAlmostBlack;
+$belowNavColumnBackgroundColor: #f2f2f2; /* From Hylke's screenshot additions */
+$contentColumnBackgroundColor:  white;
+
+$loginBackgroundColor:          $openshiftDarkBackgroundGray;
+$loginColor:                    white;
+
+$signupLinkColor:               $openshiftLinkGray;
+$textDarkBackground:            #777;
+$subtleTextDarkBackground:			#434343;
+$linkTextDarkBackground:				#fff;
+$darkBackground:                $openshiftAlmostBlack;
+$textLightBackground:           white;
+$lightBackground:               white;
+
+$linkColor:                     $openshiftRed;
+$linkColorHover:                $openshiftDarkRed;
+
+$linkColorBlue:                 #069;
+$linkColorBlueHover:            $openshiftBrightRed;
+$linkColorBlueOnDark:           #42a0bf;
+
+$textColor:                     #404040;
+
+$ribbonColor:                   $openshiftBrightRed;
+$ribbonTextColor:               white;
+$ribbonFoldColor:               #A1000C;
+
+$takeActionBackground:          $openshiftBrightRed;
+$takeActionHighlightBackground: #a1000c;
+
+$grayLighter:										#ededed;
+$grayLight:                     #999;
+$grayMedium:                    #505050;
+$grayDark:                      #2f2f2f;
+$primaryButtonBackground:       #B1E5F2;
+$orange:                        #ffb02e;
+$linkColor:                     #0069d6;
+$white:                         #fff;
+
+$activeButtonDarkColor:					rgba(0,0,0,0.5);
+$activeButtonLightColor:				rgba(255,255,255,0.5);
+
+$smallText:											11px;
+
+/* FIXME: Need to resolve these colors with _custom.scss */
+$warningText:             #222;
+$warningBackground:       #ffd24e;
+$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%);
+
+$errorText:               white;
+$errorBackground:         #CD1E25;
+$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);
+
+$successText:             #222;
+$successBackground:       #8ACA1A;
+$successBorder:           darken(adjust-hue($successBackground, -10), 5%);
+
+$infoText:                #222;
+$infoBackground:          #7FC3E1;
+$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);
+/* END */
+
+$hrBorder:                $openshiftBorderGray;
+
+$darkNoiseBackgroundColor:      black; /* Was going to call this $openshiftNoneMoreBlack */
+
+$lightStripesColor:             #e6e6e6;
+$lightStripesAltColor:          #e4e4e4;
+$lightStripesBackground:        #e5e5e5;
+$stripesText:                   $openshiftMediumBackgroundGray;
+$stripesHover:                  #ccc;
+
+$pollBarColor:                  $openshiftDarkRed;
+
+$inputBackground:               #fafafa !default;
+$inputBorder:                   #ccc !default;
+$inputBorderRadius:             3px;
+$inputDisabledBackground:       #444 !default;
+$inputDisabledBorder:           #222 !default;
+$horizontalComponentOffset:     180px !default; /* Horizontal forms & lists */
+
+// Input placeholder text color
+// -------------------------
+$placeholderText:         $grayLight !default;
+