openshift-origin-console 1.3.2

data/app/assets/stylesheets/_alerts.scss

@@ -0,0 +1,84 @@
+// ALERT STYLES
+// ------------
+
+// Base alert styles
+.alert {
+  padding: 9px 35px 10px 21px;
+  margin: 15px 0;
+  //text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  background-color: $warningBackground;
+  //border: 1px solid $warningBorder;
+  @include border-radius(4px);
+}
+.alert,
+.alert-heading {
+  color: $warningText;
+}
+
+.alert a, .alert a:hover, alert a:active {
+  text-decoration:underline;
+  }
+.alert-error a, .alert-error a:hover, alert-error a:active,
+.alert-danger a, .alert-danger a:hover, alert-danger a:active {
+  color:#fff;
+}
+
+// Adjust close link position
+.alert .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  line-height: 18px;
+}
+
+// Alternate styles
+// ----------------
+
+.alert-success {
+  background-color: $successBackground;
+  border-color: $successBorder;  
+}
+.alert-success,
+.alert-success .alert-heading {
+  color: $successText;
+}
+.alert-danger,
+.alert-error {
+  background-color: $errorBackground;
+  border-color: $errorBorder;
+}
+.alert-danger,
+.alert-error,
+.alert-danger .alert-heading,
+.alert-error .alert-heading {
+  color: $errorText;
+}
+.alert-info {
+  background-color: $infoBackground;
+  border-color: $infoBorder;
+  a {
+    color: $linkColorBlue;
+    &:hover, &:active {
+      color: $openshiftBrightRed;
+    }
+  }
+}
+.alert-info,
+.alert-info .alert-heading {
+  color: $infoText;
+}
+
+
+// Block alerts
+// ------------------------
+.alert-block {
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+.alert-block > p,
+.alert-block > ul {
+  margin-bottom: 0;
+}
+.alert-block p + p {
+  margin-top: 5px;
+}

data/app/assets/stylesheets/_breadcrumbs.scss

@@ -0,0 +1,31 @@
+// BREADCRUMBS
+// -----------
+
+.breadcrumb {
+  padding: 0 0 7px 0;
+  margin: 0 0 $baseLineHeight / 2;
+  font-size: $smallText;
+  //@include gradient-vertical($white, #f5f5f5);
+  //border: 1px solid #ddd;
+  //@include border-radius(3px);
+  //@include box-shadow(inset 0 1px 0 $white);
+  li {
+    //display: inline-block;
+    display: inline;
+    text-shadow: 0 1px 0 $white;
+  }
+  .divider {
+    padding: 0 5px;
+    color: $breadcrumbDividerColor;
+  }
+  a,
+  a:hover {
+    color: $breadcrumbTextColor;
+  }
+}
+
+@media (max-width: 767px) {
+	.breadcrumb {
+    padding: 0 0 4px 0;
+	}
+}

data/app/assets/stylesheets/_buttons.scss

@@ -0,0 +1,229 @@
+// BUTTON STYLES
+// -------------
+
+
+// Base styles
+// --------------------------------------------------
+
+// Core
+.btn {
+  display: inline-block;
+  padding: 5px 18px;
+  margin-bottom: 0; // For input.btn
+  font-size: $baseFontSize;
+  line-height: $baseLineHeight;
+  color: $grayDark;
+  font-weight: 500;
+  text-align: center;
+  text-shadow: 0 1px 0 #DFDFDF;
+  vertical-align: middle;
+  @include border-radius(0); 
+  @include gradient-vertical($startColor: #ddd, $endColor: #a4a8b0);
+  border-color: rgba(5, 5, 5, 0.1) rgba(5, 5, 5, 0.3) rgba(5, 5, 5, 0.5) rgba(5, 5, 5, 0.3);
+  cursor: pointer;
+  border-style: solid;
+  border-width: 1px;
+
+  // Give IE7 some love
+  @include reset-filter();
+  @include ie7-restore-left-whitespace();
+
+  *margin-left: .3em; //?
+}
+
+.btn:first-child {
+  *margin-left: 0;
+}
+
+
+// Hover state
+.btn:hover {
+  color: $grayDark;
+  background-color: #adb0b8;
+  text-decoration: none;
+  background-image:none;
+
+  // transition is only when going to hover, otherwise the background
+  // behind the gradient (there for IE<=9 fallback) gets mismatched
+  @include transition(background-position .1s linear);
+}
+
+// Focus state for keyboard and accessibility
+.btn:focus {
+  @include tab-focus();
+}
+
+// Active state
+.btn:active {
+  background-image: none;
+  background-color: darken($white, 20%);
+  background-color: darken($white, 25%) #{"\9"};
+  outline: 0;
+  color: rgba(0,0,0,0.5); // custom
+  border-color: rgba(5, 5, 5, 0.4) rgba(5, 5, 5, 0.4) rgba(5, 5, 5, 0.25) rgba(5, 5, 5, 0.25);
+}
+
+// Disabled state
+.btn.disabled,
+.btn[disabled] {
+  cursor: default;
+  background-image: none;
+  background-color: darken($white, 10%);
+  @include opacity(65);
+  @include box-shadow(none);
+}
+
+input[type="submit"].btn {
+  margin-right: 12px;
+}
+
+
+// Button Sizes
+// --------------------------------------------------
+
+// Large
+.btn-large {
+  padding: 8px 18px;
+  font-size: $baseFontSize + .5px;
+  line-height: normal;
+}
+.btn-large [class^="icon-"] {
+  margin-top: 1px;
+}
+
+// Small
+.btn-small {
+  padding: 5px 10px;
+  font-size: $baseFontSize - 2px;
+  line-height: $baseLineHeight - 2px;
+}
+.btn-small [class^="icon-"] {
+  margin-top: -1px;
+}
+
+// Mini
+.btn-mini {
+  padding: 2px 6px;
+  font-size: $baseFontSize - 2px;
+  line-height: $baseLineHeight - 4px;
+}
+
+
+// Block button
+// -------------------------
+
+.btn-block {
+  display: block;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+  margin-bottom: $baseLineHeight / 2;
+  @include box-sizing(border-box);
+}
+
+// Vertical spacing
+.btn-block + a {
+  display: block;
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  &.btn-block {
+    width: 100%;
+  }
+}
+
+// Alternate buttons
+// --------------------------------------------------
+
+// Set text color
+// -------------------------
+.btn-primary,
+.btn-primary:hover,
+.btn-warning,
+.btn-warning:hover,
+.btn-danger,
+.btn-danger:hover,
+.btn-success,
+.btn-success:hover,
+.btn-info,
+.btn-info:hover,
+.btn-inverse,
+.btn-inverse:hover {
+  text-shadow: -1px 0px 1px rgba(0, 0, 0, 0.5); //tweaked
+  color: $white;
+}
+.btn-primary,
+.btn-primary:hover {
+	color: $grayDark;
+	text-shadow: 0 1px 0 rgba(255,255,255,.7);
+}
+// Provide *some* extra contrast for those who can get it
+.btn-primary.active,
+.btn-warning.active,
+.btn-danger.active,
+.btn-success.active,
+.btn-info.active,
+.btn-dark.active {
+  color: rgba(255,255,255,.75);
+}
+
+// Set the backgrounds and changes from default
+// -------------------------
+.btn-primary {
+  @include buttonBackground($primaryButtonBackground, darken( $primaryButtonBackground, 15% ));
+}
+// Warning appears are orange
+.btn-warning {
+  @include buttonBackground(lighten($orange, 15%), $orange);
+}
+// Danger and error appear as red
+.btn-danger {
+  @include buttonBackground(#c00, #a00);
+}
+// Success appears as green
+.btn-success {
+  @include buttonBackground(#ABB64C, #959f41);
+}
+// Info appears as a neutral blue
+.btn-info {
+  @include buttonBackground(#93d8e2, #78cfdb);
+}
+// Inverse appears as dark gray
+.btn-inverse {
+  @include buttonBackground(#505050, #1f1f1f);
+  border-color: #010101;
+}
+
+
+// Cross-browser Jank
+// --------------------------------------------------
+
+button.btn,
+input[type="submit"].btn {
+
+  // Firefox 3.6 only I believe
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  // IE7 has some default padding on button controls
+  *padding-top: 2px;
+  *padding-bottom: 2px;
+  &.large {
+    *padding-top: 7px;
+    *padding-bottom: 7px;
+  }
+  &.small {
+    *padding-top: 3px;
+    *padding-bottom: 3px;
+  }
+}
+
+.form-actions > img,
+.btn-toolbar > img {
+  vertical-align: middle;
+  }

data/app/assets/stylesheets/_code.scss

@@ -0,0 +1,86 @@
+// Code.scss
+// Code typography styles for the <code> and <pre> elements
+// --------------------------------------------------------
+
+// Inline and block code styles
+code,
+pre {
+  padding: 0 3px 2px;
+  @include font-family-monospace;
+  font-size: $baseFontSize - 1;
+  color: $grayDark;
+  @include border-radius(0);
+}
+
+// Inline code
+code {
+  padding: 3px 4px;
+  color: #d14;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+}
+
+// Blocks of code
+pre {
+  display: block;
+  padding: $baseLineHeight / 2 $baseLineHeight;
+  margin: 0 0 $baseLineHeight;
+  line-height: $baseLineHeight;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc; // fallback for IE7-8
+  border: 1px solid rgba(0,0,0,.15);
+  @include border-radius(4px);
+  white-space: pre;
+  white-space: pre-wrap;
+  word-break: normal;
+  word-wrap: break-word;
+
+  // Make prettyprint styles more spaced out for readability
+  &.prettyprint {
+    margin-bottom: $baseLineHeight;
+  }
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    padding: 0;
+    color: inherit;
+    background-color: transparent;
+    border: 0;
+  }
+}
+
+pre.cli {
+	color: $cliText;
+	background-color: $cliBackground;
+	border: 1px solid #000;
+}
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
+}
+
+pre.pre-scrollable-horizontal {
+  overflow-x: auto;
+  white-space: nowrap;
+  }
+
+// GeshiFilter specific, can be moved into a more generic section
+.column-content div.geshifilter {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background: none;
+
+  // Reset to _type defaults
+  pre {
+    padding: 8.5px;
+    margin: 0 0 9px;
+    line-height: 18px;
+    border: 1px solid #ccc; // fallback for IE7-8
+    border: 1px solid rgba(0,0,0,.15);
+  }
+}
+
+

data/app/assets/stylesheets/_custom.scss

@@ -0,0 +1,207 @@
+/* Twitter Bootstrap Customizations
+------------------------------------------------ 
+------------------------------------------------ */
+
+.column-content {
+  padding-top: 25px;
+  section {
+    margin-bottom: 25px;
+  }
+}
+
+.row-content {
+  margin-bottom: 30px;
+}
+
+#content {
+	min-height: 400px;
+	}
+
+.page-header {
+	padding-bottom: 0;
+	}
+
+
+// form overrides
+input, 
+textarea {
+  @include box-shadow(0);
+	}
+input:focus, 
+textarea:focus {
+  @include box-shadow(0);
+	}
+
+.form-actions {
+	background-color: none;
+	}
+.side-block {
+	margin-top: 5px;
+  margin-bottom: 0;
+  color: #6e6e6e;
+  background: #f0f0f0;
+  padding: 20px;
+	}
+
+// hero overrides
+.hero-unit {
+  padding: 20px 25px;
+  margin-bottom: 25px;
+  background-color: #f2f2f2;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  box-shadow: 1px 3px 0px rgba(0, 0, 0, 0.1);
+	}
+.hero-unit h1 {
+  margin-bottom: 0;
+  font-size: 35px;
+  line-height: 1;
+  letter-spacing: -1px;
+	}
+.hero-unit p {
+  font-size: 18px;
+  font-weight: 200;
+  line-height: 27px;
+	}
+
+// wizard steps
+.wizard-steps {
+	margin: 5px 0 13px;
+	overflow: hidden;
+	}  
+.wizard-steps li {
+  font-size: 11px;
+  font-weight: bold;
+  float: left;
+  padding: 3px 21px;
+  text-align: center;
+  background-color: #F0F0F0;
+  color: #999;
+  text-shadow: 0 1px 2px #fff;
+  list-style: none;
+	}
+.wizard-steps li.active {
+  color: #000;
+  background-color: #d8d8d8;
+	}
+.thumbnail {
+	border: none;
+	box-shadow: none;
+	padding: 0;
+	}
+
+.icon-loading {
+  margin: 0 5px;
+  vertical-align: middle;
+	}
+
+
+// FORM FIELD FEEDBACK STATES
+// --------------------------
+
+// Warning
+.control-group.warning {
+  @include formFieldState($warningBackground, $warningBackground, $warningBackground);
+}
+// Error
+.control-group.error {
+  @include formFieldState($errorBackground, $errorBackground, $errorBackground);
+}
+// Success
+.control-group.success {
+  @include formFieldState($successBackground, $successBackground, $successBackground);
+}
+
+
+/* Print styles */
+
+@media print {
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
+  a, a:visited { color: #444 !important; text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
+  pre, blockquote footer nav
+  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3{ page-break-after: avoid; }
+}
+
+
+
+/* Responsive styles */
+@media (max-width: 767px) {
+	.hero-unit {
+  	padding: 0;
+  	margin-bottom: 13px;
+  	background-color: #fff;
+  	border: none;
+  	-webkit-border-radius: 0;
+  	-moz-border-radius: 0;
+  	border-radius: 0;
+  	box-shadow: none;
+		}
+	.hero-unit h1 {
+		font-size: 26px;
+		}
+}
+
+@media (min-width: 768px) and (max-width: 980px) {
+	
+}
+
+
+@media (max-width: 980px) { 
+	#utility-nav {
+	  margin: 8px 5px 0 0;
+	 	}
+	.navbar .nav-collapse {
+    clear: left;
+    // height: auto; /* override js toggle */
+  	}
+  .navbar .nav {
+    float: none;
+    margin: 0;
+  	}
+  .navbar .nav > li {
+    float: none;
+  	}
+	.navbar .nav > li > a {
+    padding: 6px 15px 8px;
+    font-weight: bold;
+    color: #999999;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+  	}
+  .navbar .nav .active > a, .navbar .nav .active > a:hover {
+    background-color: #111111;
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
+    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 2px rgba(0, 0, 0, 0.35);
+    color: #FFFFFF;
+    cursor: default;
+    text-decoration: none;
+		}
+  .navbar .nav > li > a:hover {
+    background-color: #1a1a1a;
+  	}
+}
+
+	  
+@media (min-width: 980px) {
+  .navbar .nav > li > a {
+  	-webkit-border-radius: 6px 6px 0 0;
+  		 -moz-border-radius: 6px 6px 0 0;
+  			    border-radius: 6px 6px 0 0;
+		}
+}
+
+@media (min-width: 1200px) {
+}
+