From ae6a5c56f3b9e52d8ee606e902e760443753b7f5 Mon Sep 17 00:00:00 2001 From: Ryan Florence Date: Thu, 25 Apr 2013 14:44:37 -0600 Subject: [PATCH] draft-state item-groups css Change-Id: I7be9be15be23017cc82df190a4db3f50b40b82fb Reviewed-on: https://gerrit.instructure.com/20878 Tested-by: Jenkins Reviewed-by: Simon Williams Product-Review: Simon Williams QA-Review: Simon Williams --- app/stylesheets/_variables.sass | 6 + app/stylesheets/utilities/_buttons.scss | 8 + app/stylesheets/utilities/_icons.scss | 2 + app/stylesheets/utilities/_main.scss | 4 + app/stylesheets/utilities/_pill.scss | 34 ++++ app/stylesheets/utilities/item-groups.scss | 179 +++++++++++++++++++++ 6 files changed, 233 insertions(+) create mode 100644 app/stylesheets/utilities/_buttons.scss create mode 100644 app/stylesheets/utilities/_pill.scss create mode 100644 app/stylesheets/utilities/item-groups.scss diff --git a/app/stylesheets/_variables.sass b/app/stylesheets/_variables.sass index cc4d22eddc8..5e94d9ef2de 100644 --- a/app/stylesheets/_variables.sass +++ b/app/stylesheets/_variables.sass @@ -65,3 +65,9 @@ $h2-font-size: 14px $h3-font-size: 19px $spacing-width: 20px + +$wellBackground: #e8ecef + +// override bootstrap green buttons +$green: #34832b !default + diff --git a/app/stylesheets/utilities/_buttons.scss b/app/stylesheets/utilities/_buttons.scss new file mode 100644 index 00000000000..c7f988441a9 --- /dev/null +++ b/app/stylesheets/utilities/_buttons.scss @@ -0,0 +1,8 @@ +/* @styleguide Published Buttons + +```html + +``` + +*/ + diff --git a/app/stylesheets/utilities/_icons.scss b/app/stylesheets/utilities/_icons.scss index 62be2385c02..3c2ea415bd5 100644 --- a/app/stylesheets/utilities/_icons.scss +++ b/app/stylesheets/utilities/_icons.scss @@ -247,6 +247,8 @@ i[class*=icon-], i[class^=icon-], a[class*=icon-], a[class^=icon-] { font-family: 'canvasregular'; display: inline-block; vertical-align: middle; + position: relative; + top: -1px; text-rendering: optimizeLegibility; // the specific reason for this being in the :before and not part of the was to get diff --git a/app/stylesheets/utilities/_main.scss b/app/stylesheets/utilities/_main.scss index d3e59aa9837..b2b4506d6cc 100644 --- a/app/stylesheets/utilities/_main.scss +++ b/app/stylesheets/utilities/_main.scss @@ -21,3 +21,7 @@ @import "alignment"; @import "forms"; @import "avatars"; +@import "item-groups"; +@import "buttons"; +@import "pill"; + diff --git a/app/stylesheets/utilities/_pill.scss b/app/stylesheets/utilities/_pill.scss new file mode 100644 index 00000000000..e12056e7d54 --- /dev/null +++ b/app/stylesheets/utilities/_pill.scss @@ -0,0 +1,34 @@ +/* @styleguide Pills + +```html +
    +
  • 30% of total
    • +
  • 2 Rules
    • +
  • 10pts
    • +
+``` + +*/ + +.pill { + display: inline-block; + margin: 0; + list-style: none; + border-radius: 1em; + border: 1px solid rgba(0,0,0,0.25); + box-shadow: 0 1px 0 #fff; +} + +.pill > li { + float: left; + padding: 0 10px; + border-right: solid 1px rgba(0, 0, 0, 0.25); + &:first-child { + padding-left: 10px; + } + &:last-child { + padding-right: 10px; + border-right: none; + } +} + diff --git a/app/stylesheets/utilities/item-groups.scss b/app/stylesheets/utilities/item-groups.scss new file mode 100644 index 00000000000..e61054bc35c --- /dev/null +++ b/app/stylesheets/utilities/item-groups.scss @@ -0,0 +1,179 @@ +@import 'environment'; + +/* @styleguide Item Groups + +```html +
+
+ Item Group Header +
+ +
+ +*/ + +.item-group { + background-color: $wellBackground; + border: 1px solid darken($wellBackground, 7%); + padding: 9px; + border-radius: 3px; +} + +.ig-header, .ig-text { + font-size: 15px; + color: #3d454c; + text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); + padding-left: 30px; +} + +.ig-text { + padding-top: 10px; + padding-bottom: 10px; +} + +.ig-header { + font-weight: bold; + + .icon-mini-arrow-right { + position: relative; + top: -1px; + } +} + +.ig-list { + list-style: none; + padding: 0; + margin: 0; + margin-top: 10px; +} + +.ig-list li { + margin: 5px 0; +} + +.ig-list a { + position: relative; + display: block; + height: 40px; + text-decoration: none; + background: #fff; + border: 1px solid #c1c7cf; + border-radius: 3px; + color: #696969; + + &:hover { + background: #eef7ff; + } + + &:before { + position: relative; + top: -2px; + } + + &.ig-published .ig-title { + color: #34832b; + } +} + +.ig-title { + position: absolute; + left: 30px; + right: 430px; + overflow: hidden; + white-space: nowrap; + font-weight: bold; + top: 9px; +} + +.ig-details { + position: absolute; + right: 50px; + font-size: 11px; + width: 370px; + top: 10px; +} + +.ig-admin { + position: absolute; + right: 8px; + top: 10px; +} + +.ig-details [class^=span] { + white-space: nowrap; +} + +[class^=ig-indent] { + // anything > 2 is still 60px; + margin-left: 60px; +} + +.ig-indent1 { + margin-left: 20px; +} + +.ig-indent2 { + margin-left: 40px; +} + +.ig-text { + color: #3d454c; + font-size: 15px; +} +