openshift-origin-console 1.3.2

data/app/assets/stylesheets/common.css.scss

@@ -0,0 +1,82 @@
+/*!
+ * Bootstrap v2.0.1
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ *
+ * Converted to Sass by @johnwlong / @m5o.
+ *
+ * Date: @DATE
+ */
+
+// Customizations
+@import "override-variables";
+@import "variables";
+
+// Core variables and mixins
+@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
+@import "bootstrap/mixins";
+@import "mixins";
+
+// CSS Reset
+@import "bootstrap/reset";
+
+// Grid system and page structure
+@import "bootstrap/scaffolding";
+@import "grid"; // our grid defaults should have lower CSS priority than grids
+@import "bootstrap/grid";
+@import "bootstrap/layouts";
+
+// Base CSS
+//@import "bootstrap/type";
+@import "type";
+//@import "bootstrap/code";
+@import "code";
+//@import "bootstrap/forms";
+@import "forms";
+//@import "input-prepend-append";
+@import "bootstrap/tables";
+
+// Components: common
+//@import "bootstrap/sprites";
+@import "bootstrap/wells";
+@import "bootstrap/component-animations";
+@import "bootstrap/close";
+
+// Components: Buttons & Alerts
+@import "buttons";
+@import "bootstrap/button-groups";
+@import "alerts"; // Note: alerts share common CSS with buttons and thus have styles in buttons.scss
+
+// Components: Nav
+@import "bootstrap/navs";
+//@import "bootstrap/navbar";
+//@import "bootstrap/breadcrumbs";
+@import "bootstrap/pagination";
+@import "bootstrap/pager";
+@import "footer";
+
+// Components: Popovers
+//@import "bootstrap/modals";
+//@import "bootstrap/tooltip";
+//@import "bootstrap/popovers";
+
+// Components: Misc
+@import "bootstrap/thumbnails";
+@import "labels";
+//@import "bootstrap/progress-bars";
+//@import "bootstrap/accordion";
+//@import "bootstrap/carousel";
+@import "bootstrap/hero-unit";
+
+// Utility classes
+@import "bootstrap/utilities"; // Has to be last to override when necessary
+@import "utilities"; // Has to be last to override when necessary
+
+//@import "bootstrap/responsive";
+@import "responsive";
+
+@import "custom";

data/app/assets/stylesheets/console/_application.scss

@@ -0,0 +1,194 @@
+/***********************************************************
+* Application standard layouts 
+*/
+
+.application-info {
+	position: relative;
+	
+  &.warning {
+  	border-left: 2px dashed #bb161c;
+	}
+	
+  .name {
+    text-transform: capitalize;
+    display: inline-block;
+    margin-bottom: 5px;
+    vertical-align: middle;
+    margin-right: 5px;
+  }
+
+  > .url {
+    display: inline-block;
+    vertical-align: text-bottom;
+    white-space: nowrap;
+    vertical-align: middle;
+    font-size: 12px;
+  }
+
+	.gear-numbers {
+		color: #bcbdbc;
+	}
+  .emblem {
+  	vertical-align: middle;
+  	padding: 2px 0;
+
+    margin-right: 15px;
+    margin-top: 6px;
+    img {
+  		margin-right: 7px;
+		  vertical-align: middle;
+  	}
+  }
+}
+
+.section-header > .application-info {
+
+  > .url {
+    line-height: 36px; // chosen to match h1
+    font-size: 16px;
+  }
+
+  // move these under .application-info
+	.emblem {	
+    img {
+      vertical-align: middle;
+      margin-right: 13px;
+      margin-bottom: 3px;
+    }
+  }
+	.total-cost {	
+		font-size: 32px;
+		font-weight: 200;
+		margin-top: 10px;
+		padding-right: 30px;
+    text-align: right;
+	}
+}
+
+.tile-dark .application-info {
+  left: -5px;
+  margin-right: -10px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+
+  > .url {
+    // line-height: 34px; chosen to match h2
+  }
+}
+
+.application_type.tile {
+  margin-bottom: 10px;
+}
+
+@media (max-width: 480px) {
+  .application-info {
+    > .url,
+    > .name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      width: 74%;
+    }
+  }
+}
+
+
+@media (min-width: 480px) and (max-width: 767px) {
+  .section-header > .application-info {
+    margin-right: 0;
+    left: 0;
+  }
+  .application-info {
+    > .url,
+    > .name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 80%;
+    }
+    .emblem {
+      margin-right: 7px;
+    }
+  }
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
+  .application-info {
+    > .url,
+    > .name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 375px;
+    }
+  }
+}
+
+@media (min-width: 980px) and (max-width: 1199px) {
+  .console.index .application-info {
+    > .url,
+    > .name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 475px;
+    }
+  }
+}
+
+
+@media (min-width: 1200px) {
+  .console.index .application-info {
+    > .url,
+    > .name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 565px;
+    }
+  }
+}
+
+#new_application {
+  .application_type {
+    margin-bottom: 0;
+  }
+  ol.spaced-items > li {
+    line-height: 28px; // match SELECT
+    margin-bottom: 3px;
+  }
+  .tile-align {
+    margin-bottom: 5px;
+  }
+  select {
+    vertical-align: baseline;
+    margin-bottom: auto;
+    width: auto;
+    max-width: -moz-available;
+  } // refactor me to a marker class
+}
+
+.form-search {
+  .btn:first-child {
+    border-radius: 0;
+  }
+  span.dropdown { 
+    display: inline-block; 
+  }
+  .btn .caret {
+    border-top-color: white;
+  }
+  .dropdown-toggle {
+    @include box_shadow;
+  }
+  &.open .dropdown-menu { 
+    border-radius: 0; 
+  }
+}
+
+@media (max-width: 479px) {
+    #new_application .controls input {
+        width: 95px;
+    }
+}
+

data/app/assets/stylesheets/console/_base.scss

@@ -0,0 +1,26 @@
+/* OPENSHIFT MANAGEMENT CONSOLE
+
+Color palette
+--------------------------------------------
+  0   0   0    000000     Black
+177 229 242    b1e5f2			Primary Blue
+ 54  53  52    363634     Primary Dark Gray
+ 77  79  83    4d4f53     Cool Gray 11
+154 155 156    9a9b9c     Cool Gray 7
+188 189 188    bcbdbc     Cool Gray 4
+224 225 221    e0e1dd     Cool Gray 1
+255 255 255    ffffff     White
+234   0  17    ea0011     Bright Red
+205  32  44    cd202c     Primary Red
+161   0  12    a1000c     Dark Red
+
+*/
+
+body {
+		font-weight: normal;
+    }
+h1,h2,h3,h4,h5,h6 {
+		color: #fafbfc;
+		}
+a {color:#76B6C6;}
+a:hover,a:active {color:#6ec1d5;}

data/app/assets/stylesheets/console/_breadcrumbs.scss

@@ -0,0 +1,32 @@
+.breadcrumb {
+  padding: 7px 0;
+  margin: 0;
+  text-transform: uppercase;
+  color: #939598;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  li {
+    text-shadow: -1px 0 1px rgba(0, 0, 0, 0.5);
+    display: inline;
+  }
+
+  a,
+  a:hover,
+  a:visited {
+    color: #d9d9da;
+    white-space: nowrap;
+  }
+
+  .divider {
+    color: #939598;
+    padding: 0 5px;
+  }
+}
+
+@media (max-width: 767px) {
+	.breadcrumb {
+    padding: 4px 0;
+	}
+}

data/app/assets/stylesheets/console/_buttons.scss

@@ -0,0 +1,214 @@
+// Console specific button styling
+// --------------------------------
+
+// Core
+.btn {
+  display: inline-block;
+  padding: 5px 18px;
+  margin-bottom: 0; // For input.btn
+  font-size: $baseFontSize;
+  line-height: $baseLineHeight;
+  color: #f0f0f0;
+  font-weight: 500;
+  text-align: center;
+  text-shadow: 0 1px 0 #000;
+  vertical-align: middle;
+  @include border-radius(0); 
+  // @include gradient-vertical($startColor: #505050, $endColor: #1f1f1f);
+  @include buttonBackgroundConsole(#505050, #1f1f1f);
+  border-color: #010101;
+  cursor: pointer;
+  border-style: solid;
+  border-width: 1px;
+  @include box-shadow(none);
+
+  // Give IE7 some love
+  @include reset-filter();
+  @include ie7-restore-left-whitespace();
+
+  *margin-left: .3em; //?
+}
+
+.btn:first-child {
+  *margin-left: 0;
+}
+
+// Focus state for keyboard and accessibility
+.btn:focus {
+  @include tab-focus();
+}
+
+// Active state
+.btn:active {
+  background-image: none;
+  outline: 0;
+  border-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1);
+}
+
+// Disabled state
+.btn.disabled,
+.btn[disabled] {
+  cursor: default;
+  background-image: none;
+  @include box-shadow(none);
+}
+
+
+// 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,
+.btn: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 1px 1px rgba(0, 0, 0, 0.5); //tweaked
+  color: $white !important;
+}
+.btn-primary,
+.btn-primary:hover,
+.btn-primary:active,
+.btn-primary.disabled,
+.btn-primary[disabled] {
+	color: $grayDark !important;
+	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(#FFB02E, darken(#FFB02E, 15%));
+}
+// Danger and error appear as red
+.btn-danger {
+  @include buttonBackground(#c00, darken(#c00, 15%));
+}
+// Success appears as green
+.btn-success {
+  @include buttonBackground(#ABB64C, darken(#ABB64C, 15%));
+}
+// Info appears as a neutral blue
+.btn-info {
+  @include buttonBackground(#0167d9, darken(#0167d9, 15%));
+  color: #edf5fd;
+}
+// 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;
+  }
+
+// Large important buttons are given more heft
+.btn-large.btn-primary {
+  text-transform: uppercase;
+}