Hi Hackers, This patch updates the SCSS files of the styleguide to move all the colors into variables to be easier to use in the application.
Thanks Joao && Matt
diff --git a/pgaweb/static/css/styleguide/_alert.scss b/pgaweb/static/css/styleguide/_alert.scss index 26680b7..2c85514 100644 --- a/pgaweb/static/css/styleguide/_alert.scss +++ b/pgaweb/static/css/styleguide/_alert.scss @@ -65,7 +65,7 @@ } } -.alert { +.alert, .ajs-message { .media { .media-body { display: inline-block; diff --git a/pgaweb/static/css/styleguide/_othercolors.scss b/pgaweb/static/css/styleguide/_othercolors.scss index 4f20656..5144217 100644 --- a/pgaweb/static/css/styleguide/_othercolors.scss +++ b/pgaweb/static/css/styleguide/_othercolors.scss @@ -1,12 +1,18 @@ +$color-blue-1: #e7f2ff; $color-blue-2: #84acdd; $color-red-1: #f2dede; $color-red-2: #de8585; $color-red-3: #d0021b; +$color-green-1: #dff0d7; $color-green-2: #a2c189; $color-green-3: #3a773a; +.bg-white-1 { + background-color: #ffffff; +} + .bg-blue-1 { - background-color: #e7f2ff; + background-color: $color-blue-1; } .bg-blue-2 { @@ -26,11 +32,11 @@ $color-green-3: #3a773a; } .bg-green-1 { - background-color: #dff0d7; + background-color: $color-green-1; } .bg-green-2 { - background-color: #a2c189; + background-color: $color-green-2; } .bg-green-3 { @@ -38,7 +44,7 @@ $color-green-3: #3a773a; } .border-blue-1 { - border-color: #e7f2ff; + border-color: $color-blue-1; } .border-blue-2 { @@ -58,11 +64,11 @@ $color-green-3: #3a773a; } .border-green-1 { - border-color: #dff0d7; + border-color: $color-green-1; } .border-green-2 { - border-color: #a2c189; + border-color: $color-green-2; } .border-green-3 { diff --git a/pgaweb/static/css/styleguide/_typography.scss b/pgaweb/static/css/styleguide/_typography.scss index b63f6ae..1b01abc 100644 --- a/pgaweb/static/css/styleguide/_typography.scss +++ b/pgaweb/static/css/styleguide/_typography.scss @@ -1,23 +1,25 @@ +$font-family-1: "Helvetica Neue", Arial, sans-serif; + .text-bold { font-weight: bold; } .text-14 { - font-family: "Helvetica Neue"; + font-family: $font-family-1; font-size: 14px; } .text-13 { - font-family: "Helvetica Neue"; + font-family: $font-family-1; font-size: 13px; } .text-12 { - font-family: "Helvetica Neue"; + font-family: $font-family-1; font-size: 12px; } .text-11 { - font-family: "Helvetica Neue"; + font-family: $font-family-1; font-size: 11px; }