ctl_base_ui 0.0.2

data/app/assets/stylesheets/ctl_base_ui/styleguide.scss

@@ -0,0 +1,437 @@
+@import 'colors';
+@import 'mixins';
+@import 'icons';
+@import 'buttons';
+
+
+nav {
+  position: fixed;
+  background-color: $light_grey;
+  width: 280px;
+  height: 100%;
+  overflow: auto;
+
+  h1 {
+    border-bottom: none;
+    margin-bottom: 0px;
+    padding-bottom: 0px;
+  }
+
+  h1.ctl-labs-logo a {
+    background: asset-url('ctl_base_ui/ctl_labs_long_color.svg') 15px 15px no-repeat;
+    @include background-size(240px, 56px);
+    @include hide-text;
+    width: 280px;
+    height: 90px;
+    display: block;
+  }
+
+  h1.ctl-labs-logo a:hover {
+    background-color: #FFF;
+    width: 275px;
+    border-right: 5px solid $grey;
+    transition: all 0.35s ease;
+  }
+
+  h4 {
+    margin: 0px 0px 10px 0px;
+    padding: 15px 15px;
+    border-bottom: $grey 1px solid;
+    font-size: 13px;
+    font-weight: bold;
+  }
+
+  ul li a {
+    font-size: 13px;
+    display: block;
+    padding: 5px 15px;
+    color: $dark_grey;
+    text-decoration: none;
+  }
+
+  ul li a:hover {
+    color: $sky-blue;
+    transition: all 0.35s ease;
+    background-color: #FFF;
+    border-right: 5px solid $sky-blue;
+    padding-right: 10px;
+  }
+}
+
+main {
+  width: 960px;
+  margin-left: 300px;
+
+  h1 {
+    padding-top: 1em;
+  }
+}
+
+section {
+  padding: 2em 0;
+  border-bottom: $light_grey 1px solid;
+  /* overflow: auto; */
+  &:after {
+    content: '';
+    clear: both;
+    display: block;
+  }
+}
+
+section#about p {
+  font-size: 18px;
+  color: $medium_grey;
+}
+
+section h2:first-of-type {
+  color: $sky-blue;
+  font-weight: 100;
+  letter-spacing: 2px;
+  background-color: $light_grey;
+  border-left: 5px solid $sky-blue;
+  padding: 10px 10px 10px 15px;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+/* Section Specific styles */
+
+/* CTL Identity */
+
+.ctl-logo-base {
+  height: 30px;
+  width: 140px;
+  margin: 0;
+  padding: 0;
+  @include hide-text;
+  background: image-url('ctl_base_ui/ctl_logo_base.svg') no-repeat;
+  @include background-size(140px, 30px);
+  background-position: center left;
+}
+
+/* Colors */
+
+.color-block {
+  @include border-box;
+  margin: 10px 0px;
+  padding-left: 45px;
+  position: relative;
+  line-height: 35px;
+  width: 310px;
+  float: left;
+
+  &:before {
+    content: '';
+    width: 35px;
+    height: 35px;
+    position: absolute;
+    left: 0;
+  }
+}
+
+.lipstick-red {
+  @extend .color-block;
+
+  &:before {
+    background-color: $lipstick_red;
+  }
+}
+
+.dark-red {
+  @extend .color-block;
+
+  &:before {
+    background-color: $dark_red;
+  }
+}
+
+.dark-blue {
+  @extend .color-block;
+
+  &:before {
+    background-color: $dark_blue;
+  }
+}
+
+.sky-blue {
+  @extend .color-block;
+
+  &:before {
+    background-color: $blue_grey;
+  }
+}
+
+.lime {
+  @extend .color-block;
+
+  &:before {
+    background-color: $lime;
+  }
+}
+
+.green {
+  @extend .color-block;
+
+  &:before {
+    background-color: $green;
+  }
+}
+
+.yellow {
+  @extend .color-block;
+
+  &:before {
+    background-color: $yellow;
+  }
+}
+
+.orange {
+  @extend .color-block;
+
+  &:before {
+    background-color: $orange;
+  }
+}
+
+.ctl-dark-green {
+  @extend .color-block;
+
+  &:before {
+    background-color: $ctl_dark_green;
+  }
+}
+
+.ctl-light-green {
+  @extend .color-block;
+
+  &:before {
+    background-color: $ctl-light-green;
+  }
+}
+
+.light-grey {
+  @extend .color-block;
+
+  &:before {
+    background-color: $light_grey;
+  }
+}
+
+.grey {
+  @extend .color-block;
+
+  &:before {
+    background-color: $grey;
+  }
+}
+
+.medium-grey {
+  @extend .color-block;
+
+  &:before {
+    background-color: $medium_grey;
+  }
+}
+
+.warm-grey {
+  @extend .color-block;
+
+  &:before {
+    background-color: $warm_grey;
+  }
+}
+
+.dark-grey {
+  @extend .color-block;
+
+  &:before {
+    background-color: $dark_grey;
+  }
+}
+
+/* Icons */
+
+.icon {
+  overflow: auto;
+  line-height: 50px;
+  border-bottom:1px solid #f1f1f1;
+  margin:0px 0px 20px 0px;
+}
+
+.example-icon {
+  @include border-box;
+  float: left;
+  position: relative;
+  width: 20px;
+  height: 40px;
+  margin: 0 10px 15px 0;
+
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 5px;
+    top: 0;
+  }
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 20px;
+  }
+}
+
+@each $icon, $position in $icons {
+  .icon-#{$icon}-example {
+    @extend .example-icon;
+
+    &:before {
+      @extend .icon-#{$icon};
+    }
+
+    &:after {
+      @extend .icon-#{$icon}-large;
+    }
+  }
+
+  .icon-#{$icon}-green-example {
+    @extend .example-icon;
+
+    &:before {
+      @extend .icon-#{$icon};
+      @include icon-green;
+    }
+
+    &:after {
+      @include icon-green;
+      @extend .icon-#{$icon}-large;
+    }
+  }
+
+  .icon-#{$icon}-blue-example {
+    @extend .example-icon;
+
+    &:before {
+      @extend .icon-#{$icon};
+      @include icon-blue;
+    }
+
+    &:after {
+      @include icon-blue;
+      @extend .icon-#{$icon}-large;
+    }
+  }
+
+  .icon-#{$icon}-red-example {
+    @extend .example-icon;
+
+    &:before {
+      @extend .icon-#{$icon};
+      @include icon-red;
+    }
+
+    &:after {
+      @include icon-red;
+      @extend .icon-#{$icon}-large;
+    }
+  }
+
+  .icon-#{$icon}-light-blue-example {
+    @extend .example-icon;
+
+    &:before {
+      @extend .icon-#{$icon};
+      @include icon-light-blue;
+    }
+
+    &:after {
+      @include icon-light-blue;
+      @extend .icon-#{$icon}-large;
+    }
+  }
+
+  .icon-#{$icon}-light-green-example {
+    @extend .example-icon;
+
+    &:before {
+      @extend .icon-#{$icon};
+      @include icon-light-green;
+    }
+
+    &:after {
+      @include icon-light-green;
+      @extend .icon-#{$icon}-large;
+    }
+  }
+
+  .icon-#{$icon}-light-grey-example {
+    @extend .example-icon;
+
+    &:before {
+      @include icon-light-grey;
+      @extend .icon-#{$icon};
+    }
+
+    &:after {
+      @extend .icon-#{$icon}-large;
+      @include icon-light-grey;
+    }
+  }
+
+  .icon-#{$icon}-white-example {
+    @extend .example-icon;
+
+    &:before {
+      background-color: $medium_grey;
+      @include icon-white;
+      @extend .icon-#{$icon};
+    }
+
+    &:after {
+      background-color: $medium_grey;
+      @extend .icon-#{$icon}-large;
+      @include icon-white;
+    }
+  }
+}
+
+/* Buttons */
+
+@each $icon, $position in $icons {
+  .button-primary-with-icon-#{$icon} {
+    @extend .button-primary;
+    @extend .icon-#{$icon}-for-button;
+    padding-left: 3em;
+    margin-bottom: .5em;
+  }
+}
+
+/* Modals */
+#modals {
+  position: relative;
+  height: 400px;
+}
+.ui-dialog {
+  position: relative;
+  margin: 50px auto;
+  height: 208px;
+  .ui-dialog-content {
+    height: 54px;
+  }
+}
+.ui-widget-overlay.ui-front {
+  position: absolute;
+  top: 84px;
+  height: 315px
+}
+
+select {
+  min-width: 160px;
+}
+
+label {
+  display: block;
+}

data/app/assets/stylesheets/ctl_base_ui/typography.scss

@@ -0,0 +1,92 @@
+@import 'colors';
+@import 'variables';
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $orange;
+  padding-bottom: 0.6em;
+  margin-bottom: 0.6em;
+
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+h1 {
+  color: $blue_grey;
+  font-size: 2.5em;
+  font-weight: 200;
+  border-bottom: $grey 1px solid;
+}
+
+h2 {
+  font-size: 1.3em;
+  font-weight: 800;
+}
+
+h3 {
+  font-size: 1.2em;
+  font-weight: 800;
+}
+
+h4 {
+  font-size: 1.2em;
+  font-weight: 400;
+}
+
+h5 {
+  font-size: 1.125em;
+  font-weight: 400;
+}
+
+h6 {
+  font-size: 0.929em;
+  font-weight: 400;
+}
+
+p {
+  font-size: 0.857em;
+  padding: 0 0 1em 0;
+  line-height: 1.7em;
+}
+
+a {
+  color: $blue_grey;
+  cursor: pointer;
+}
+
+strong {
+  font-weight: bold;
+}
+
+.title {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+a.title {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+    color: $blue_grey_dark;
+  }
+}
+
+.microcopy {
+  color: $medium_grey;
+  font-style: italic;
+}
+
+code {
+  white-space: pre;
+  font-family: $monospace_font_family;
+  font-size: 0.9em;
+}

data/app/controllers/ctl_base_ui/application_controller.rb

@@ -0,0 +1,7 @@
+module CtlBaseUi
+  class ApplicationController < ActionController::Base
+    CtlBaseUi.configuration.view_helpers.each do |helper|
+      helper helper
+    end
+  end
+end

data/app/controllers/ctl_base_ui/styleguide_controller.rb

@@ -0,0 +1,8 @@
+require_dependency "ctl_base_ui/application_controller"
+
+module CtlBaseUi
+  class StyleguideController < ApplicationController
+    def index
+    end
+  end
+end

data/app/helpers/ctl_base_ui/application_helper.rb

@@ -0,0 +1,12 @@
+module CtlBaseUi
+  module ApplicationHelper
+    def all_icons
+      %w( plus minus x sprocket arrowloop checkmark document magnifying-glass
+        pencil outbox grid envelope list folder menu house star thin-arrow-right
+        thick-arrow-right magnifying-glass-plus magnifying-glass-minus comment-box
+        happy-face sad-face copy twitter linked-in facebook link docker-blocks
+        disks speedometer thin-arrow-down thick-arrow-down thin-arrow-left
+        thick-arrow-left thin-arrow-up thick-arrow-up github )
+    end
+  end
+end

data/app/views/ctl_base_ui/styleguide/_buttons.html.haml

@@ -0,0 +1,10 @@
+%h3 Basic Buttons
+%input.button-primary{ type: "submit", value: "Primary" }
+%button.button-secondary Secondary
+%a.button-positive Positive
+%button.button-negative Negative
+%button.button-primary{disabled: true} Disabled
+
+%h3 Buttons with icons
+- all_icons.each do |icon|
+  %a{class: "button-primary-with-icon-#{icon}"}= "primary button with #{icon}"

data/app/views/ctl_base_ui/styleguide/_century_link_identity.html.haml

@@ -0,0 +1,3 @@
+%h6 Base Century Link logo:
+.ctl-logo-base
+

data/app/views/ctl_base_ui/styleguide/_colors.html.haml

@@ -0,0 +1,44 @@
+.lipstick-red
+  Lipstick Red #E41741
+
+.dark-red
+  Dark red #D90000
+
+.dark-blue
+  Dark Blue #1C6D95
+
+.sky-blue
+  Sky Blue #229FE5
+
+.lime
+  Lime #83BB45
+
+.green
+  Green #699C48
+
+.yellow
+  Yellow #FFEEC0
+
+.orange
+  Orange #F89838
+
+.ctl-dark-green
+  CenturyLink Dark Green #128745
+
+.ctl-light-green
+  CenturyLink Light Green #8EC643
+
+.light-grey
+  Light Grey #F1F1F1
+
+.grey
+  Grey #CCCCCC
+
+.medium-grey
+  Medium Grey #AAAAAA
+
+.warm-grey
+  Warm Grey #9A9A8C
+
+.dark-grey
+  Dark Grey #777777

data/app/views/ctl_base_ui/styleguide/_forms.html.haml

@@ -0,0 +1,19 @@
+%h3 labels
+%label Required Field
+%label.optional Optional Field
+%h3 Inputs
+%input{type: :text, placeholder: 'text input'}
+%input{type: :number, placeholder: 'number input'}
+%h3 textarea
+%textarea
+%h3 Selects
+%select#example-select
+  %option{value: 1} bizaaam
+  %option{value: 2} baz
+%p.microcopy
+  Note: requires pulling in chosen, require from /ctl-base-ui/chosen
+:javascript
+  $('#example-select').chosen({
+    disable_search: true
+  });
+

data/app/views/ctl_base_ui/styleguide/_icons.html.haml

@@ -0,0 +1,11 @@
+- all_icons.each do |icon|
+  .icon
+    = icon
+    %div{class: "icon-#{icon}-example"}
+    %div{class: "icon-#{icon}-light-grey-example"}
+    %div{class: "icon-#{icon}-white-example"}
+    %div{class: "icon-#{icon}-red-example"}
+    %div{class: "icon-#{icon}-light-blue-example"}
+    %div{class: "icon-#{icon}-blue-example"}
+    %div{class: "icon-#{icon}-light-green-example"}
+    %div{class: "icon-#{icon}-green-example"}

data/app/views/ctl_base_ui/styleguide/_modals.html.haml

@@ -0,0 +1,15 @@
+.ui-widget-overlay.ui-front
+.ui-dialog
+  .ui-dialog-titlebar
+    %span.ui-dialog-title Modal Title
+    %button.ui-dialog-titlebar-close
+      %span.ui-button-icon-primary
+  .ui-dialog-content.ui-widget-content
+    %p
+      The modal styles work with classnames provided by jqueryui. The example here includes
+      the minimum markup needed for the style. The overlay is used by passing
+      {modal: true} when calling .dialog on the element you want to populate the modal.
+  .ui-dialog-buttonpane
+    .ui-dialog-buttonset
+      %button.button-secondary
+        %span.ui-button-text Cancel

data/app/views/ctl_base_ui/styleguide/_notices.html.haml

@@ -0,0 +1,21 @@
+.notice-success
+  %a.dismiss dismiss
+  %strong This is a success message.
+  with some additional content.
+
+.notice-default
+  %a.dismiss dismiss
+  %strong This is a general message.
+  %br
+  with some additional content after a line break.
+
+.notice-warning
+  %a.dismiss dismiss
+  %strong This is a warning message.
+  %br
+  with some additional content after a line break.
+
+.notice-danger
+  %a.dismiss dismiss
+  %strong This is an error/danger message.
+  with some additional content.