Permalink
Browse files

MINOR: Added Member Profile Popup Styling

MINOR: Better button styles
MINOR: Now compass for button sprites
  • Loading branch information...
1 parent 749d908 commit 2a429c9850652f3956a9ef664c41e6706b898250 @wolfv wolfv committed with chillu Dec 21, 2011
Showing with 319 additions and 224 deletions.
  1. +148 −134 admin/css/screen.css
  2. BIN admin/images/16x16-s8aab2a0ce2.png
  3. BIN admin/images/24x24-s5aa96abf84.png
  4. BIN admin/images/btn_icons-sb7da7f8cce.png
  5. BIN admin/images/btn_icons/accept.png
  6. BIN admin/images/btn_icons/accept_disabled.png
  7. BIN admin/images/btn_icons/add.png
  8. BIN admin/images/btn_icons/add_disabled.png
  9. BIN admin/images/btn_icons/addpage.png
  10. BIN admin/images/btn_icons/addpage_disabled.png
  11. BIN admin/images/btn_icons/decline.png
  12. BIN admin/images/btn_icons/decline_disabled.png
  13. BIN admin/images/btn_icons/preview.png
  14. BIN admin/images/btn_icons/preview_disabled.png
  15. BIN admin/images/btn_icons/settings.png
  16. BIN admin/images/btn_icons/settings_disabled.png
  17. BIN admin/images/btn_icons/unpublish.png
  18. BIN admin/images/btn_icons/unpublish_disabled.png
  19. BIN admin/images/btn_icons_sprite.png
  20. BIN admin/images/btn_icons_sprite_disabled.png
  21. BIN admin/images/{icons/16x16-s4d33bad4d2.png → menu_icons/16x16-s2ac647f5ef.png}
  22. BIN admin/images/{icons → menu_icons}/16x16/blog.png
  23. BIN admin/images/{icons → menu_icons}/16x16/community.png
  24. BIN admin/images/{icons → menu_icons}/16x16/document.png
  25. BIN admin/images/{icons → menu_icons}/16x16/gears.png
  26. BIN admin/images/{icons → menu_icons}/16x16/home.png
  27. BIN admin/images/{icons → menu_icons}/16x16/information.png
  28. BIN admin/images/{icons → menu_icons}/16x16/network.png
  29. BIN admin/images/{icons → menu_icons}/16x16/pencil.png
  30. BIN admin/images/{icons → menu_icons}/16x16/picture.png
  31. BIN admin/images/{icons → menu_icons}/16x16/pie-chart.png
  32. BIN admin/images/{icons/24x24-sba30d25a74.png → menu_icons/24x24-s0cb1fe1c77.png}
  33. BIN admin/images/{icons → menu_icons}/24x24/blog.png
  34. BIN admin/images/{icons → menu_icons}/24x24/community.png
  35. BIN admin/images/{icons → menu_icons}/24x24/document.png
  36. BIN admin/images/{icons → menu_icons}/24x24/gears.png
  37. BIN admin/images/{icons → menu_icons}/24x24/home.png
  38. BIN admin/images/{icons → menu_icons}/24x24/information.png
  39. BIN admin/images/{icons → menu_icons}/24x24/network.png
  40. BIN admin/images/{icons → menu_icons}/24x24/pencil.png
  41. BIN admin/images/{icons → menu_icons}/24x24/picture.png
  42. BIN admin/images/{icons → menu_icons}/24x24/pie-chart.png
  43. 0 admin/images/{icons → menu_icons}/README
  44. +83 −70 admin/scss/_forms.scss
  45. +1 −1 admin/scss/_menu.scss
  46. +4 −4 admin/scss/_sprites.scss
  47. +74 −9 admin/scss/_style.scss
  48. +3 −3 admin/scss/_tree.scss
  49. +2 −2 admin/scss/_uitheme.scss
  50. +3 −0 admin/scss/themes/_default.scss
  51. +1 −1 security/Member.php
View

Large diffs are not rendered by default.

Oops, something went wrong.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Deleted file not rendered
Deleted file not rendered
File renamed without changes.
View
@@ -11,19 +11,20 @@
* ---------------------------------------------------- */
/* CMS action button sprite mix-in (used for all the buttons in the bottom row */
-@mixin actionButtonSprite($horizontalOffset, $verticalOffset) {
- padding-left: 24px;
+@mixin actionButtonSprite($name) {
+ padding-left: 24px;
padding-right: 6px;
- @include background($color-button-generic image-url("btn_icons_sprite.png") no-repeat $horizontalOffset $verticalOffset);
- @include background(image-url("btn_icons_sprite.png") no-repeat $horizontalOffset $verticalOffset,
+
+ @include background($color-button-generic sprite($btn_icons, $name, 5px, 6px) no-repeat);
+ @include background(sprite($btn_icons, $name, 5px, 6px) no-repeat,
linear-gradient(color-stops(
lighten($color-button-generic, 10%),
darken($color-button-generic, 5%)
))
);
&.ui-state-hover {
- @include background(lighten($color-button-generic, 10%) image-url("btn_icons_sprite.png") no-repeat $horizontalOffset $verticalOffset);
- @include background(image-url("btn_icons_sprite.png") no-repeat $horizontalOffset $verticalOffset,
+ @include background(lighten($color-button-generic, 10%) sprite($btn_icons, $name, 5px, 6px) no-repeat);
+ @include background(sprite($btn_icons, $name, 5px, 6px) no-repeat,
linear-gradient(color-stops(
lighten($color-button-generic, 20%),
$color-button-generic
@@ -32,38 +33,74 @@
}
&.ui-state-disabled {
background-image: none;
- @include background(lighten($color-button-generic, 20%) image-url("btn_icons_sprite_disabled.png") no-repeat $horizontalOffset $verticalOffset);
- @include background(image-url("btn_icons_sprite_disabled.png") no-repeat $horizontalOffset $verticalOffset,
+ @include background(lighten($color-button-generic, 20%) sprite($btn_icons, $name+_disabled, 5px, 6px) no-repeat);
+ @include background(sprite($btn_icons, $name+_disabled, 5px, 6px) no-repeat,
linear-gradient(color-stops(
lighten($color-button-generic, 20%),
$color-button-generic
))
);
}
}
-
+
+@mixin actionButtonSpriteConstructive($name) {
+ background-image: none;
+ padding-left: 25px;
+ padding-right: 7px;
+ font-weight: bold;
+ margin-left: $grid-horizontal;
+ color: $color-text-light;
+ border-color: $color-button-constructive-border;
+ border-bottom-color: darken($color-button-constructive-border, 10%);
+ @include background($color-button-constructive sprite($btn_icons, $name, 6, 6) no-repeat);
+ @include background(sprite($btn_icons, $name
+ , 6, 6) no-repeat,
+ linear-gradient(color-stops(
+ lighten($color-button-constructive, 10%),
+ darken($color-button-constructive, 5%)
+ ))
+ );
+
+ @include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
+
+ &.ui-state-hover {
+ border-color: darken($color-button-constructive-border, 10%);
+ @include background(lighten($color-button-constructive, 10%) sprite($btn_icons, $name, 6, 6) no-repeat);
+ @include background(sprite($btn_icons, $name, 6, 6) no-repeat,
+ linear-gradient(color-stops(
+ lighten($color-button-constructive, 15%),
+ $color-button-constructive
+ ))
+ );
+ }
+ &:active, &:focus {
+ padding: $grid-vertical 8px $grid_vertical 26px;
+ border: none;
+ @include background(darken($color-button-constructive, 2%) sprite($btn_icons, $name, 7, 7) no-repeat);
+ @include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
+ }
+}
+
form.nostyle {
@include clear-form-field-styles();
}
.field {
display: block;
padding: 10px 0;
- border-bottom-width: 2px;
- border-bottom: 2px groove lighten($color-shadow-light, 95%);
- -webkit-border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;
- border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;
+ border-bottom: 1px solid $color-shadow-light;
+ @include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
+
//TODO: use single border line with shadow instead:: http://daverupert.com/2011/06/two-tone-borders-with-css3/
- //@include border-image(url(../images/textures/bg_fieldset_elements_border.png), 2, stretch); //not yet supported
//overflow: hidden;
// bottom padding accounts for the border and we have a negative
// margin with a postive padding to ensure the bottom border extends
// over the edges
- padding: 0 $grid-horizontal $grid-vertical - 1 $grid-horizontal;
- margin: 0 $grid-horizontal * -1 $grid-vertical $grid-horizontal * -1;
- border-bottom: 1px solid $color-shadow-light;
+ padding: 0 0 $grid-vertical - 1 0;
+ margin: 0 0 $grid-vertical 0;
+
// using the legacy version as some of the more complex form fields
// need to use relative positioning and overflow hidden will not expand
@@ -84,12 +121,13 @@ form.nostyle {
width: $grid-horizontal * 21;
padding: $grid-vertical $grid-horizontal $grid-vertical 0;
line-height: $grid-vertical * 2;
-
+ font-weight: bold;
+ @include text-shadow(1px 1px 0 $color-text-shadow);
span {
display: block;
font-size: $font-base-size - 1;
color: lighten($color-text, 25%);
-
+
@include hide-text-overflow();
}
}
@@ -126,14 +164,15 @@ form.nostyle {
line-height: $grid-vertical * 2;
margin: 0;
outline: none;
-
+ @include transition(0.2s box-shadow ease-in);
+ @include transition(0.2s border ease-in);
@include border-radius(4px);
@include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef));
&:focus {
- border: 1px solid lighten($color-medium-separator, 20%);
-
- @include box-shadow(0 0 5px rgba(0,0,0,0.2));
+ border: 1px solid lighten($color-medium-separator, 10%);
+ border-top-color: $color-medium-separator;
+ @include box-shadow(0 1px 3px rgba(0,0,0,0.2) inset);
}
}
@@ -240,7 +279,8 @@ form.nostyle {
text-decoration: none;
}
-.cms {
+.cms, body.ArrayData {
+
input.loading,
input.ui-state-default.loading, .ui-widget-content input.ui-state-default.loading,
.ui-widget-header input.ui-state-default.loading {
@@ -264,11 +304,11 @@ form.nostyle {
color: lighten($color-text-dark, 10%);
background-color: $color-button-generic;
border: 1px solid $color-button-generic-border;
+ border-bottom: 1px solid darken($color-button-generic-border, 10%);
@include text-shadow(lighten($color-button-generic, 20%) 0 1px 1px);
- @include box-shadow(lighten($color-base, 10%) 0 1px 2px);
- @include background($color-button-generic image-url("btn_icons_sprite.png") no-repeat 999px 999px);
- @include background(image-url("btn_icons_sprite.png") no-repeat 999px 999px,
+ @include background($color-button-generic);
+ @include background(
linear-gradient(color-stops(
lighten($color-button-generic, 10%),
darken($color-button-generic, 5%)
@@ -277,10 +317,8 @@ form.nostyle {
&.ui-state-hover {
border: 1px solid darken($color-button-generic-border, 10%);
@include text-shadow(lighten($color-button-generic, 30%) 0 1px 1px);
-
- @include box-shadow($color-base 0 1px 2px);
- @include background(lighten($color-button-generic, 10%) image-url("btn_icons_sprite.png") no-repeat 999px 999px);
- @include background(image-url("btn_icons_sprite.png") no-repeat 999px 999px,
+ @include background(lighten($color-button-generic, 10%));
+ @include background(
linear-gradient(color-stops(
lighten($color-button-generic, 20%),
darken($color-button-generic, 5%)
@@ -289,74 +327,49 @@ form.nostyle {
}
&:focus,
&:active {
- border: 1px solid darken($color-button-generic-border, 5%);
-
- @include box-shadow($color-base 0 1px 2px);
- @include background(lighten($color-button-generic, 10%) image-url("btn_icons_sprite.png") no-repeat 999px 999px);
- @include background(image-url("btn_icons_sprite.png") no-repeat 999px 999px,
+ border: 1px solid lighten($color-button-generic, 40%);
+ @include box-shadow(0 3px 3px darken($color-button-generic, 40%) inset);
+ @include background(darken($color-button-generic, 30%));
+ @include background(
linear-gradient(color-stops(
$color-button-generic,
- lighten($color-button-generic, 20%)
+ darken($color-button-generic, 30%)
))
);
}
/* constructive */
&.ss-ui-action-constructive {
- background-image: none;
- padding-left: 24px;
- padding-right: 6px;
- font-weight: bold;
- margin-left: $grid-horizontal;
- color: $color-text-light;
- border-color: $color-button-constructive-border;
- @include background($color-button-constructive image-url("btn_icons_sprite.png") no-repeat 5px 5px);
- @include background(image-url("btn_icons_sprite.png") no-repeat 5px 5px,
- linear-gradient(color-stops(
- lighten($color-button-constructive, 10%),
- darken($color-button-constructive, 5%)
- ))
- );
-
- @include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
- @include box-shadow(darken($color-base, 20%) 1px 1px 2px);
+ @include actionButtonSpriteConstructive('accept');
+ }
- &.ui-state-hover {
- border-color: darken($color-button-constructive-border, 10%);
- @include background(lighten($color-button-constructive, 10%) image-url("btn_icons_sprite.png") no-repeat 5px 5px);
- @include background(image-url("btn_icons_sprite.png") no-repeat 5px 5px,
- linear-gradient(color-stops(
- lighten($color-button-constructive, 15%),
- $color-button-constructive
- ))
- );
- }
+ &.cms-page-add-button {
+ @include actionButtonSpriteConstructive('add');
}
-
/* destructive */
&.ss-ui-action-destructive {
color: $color-button-destructive;
background-color: $color-button-generic;
&.delete {
- @include actionButtonSprite(6px, -26px);
+ @include actionButtonSprite('decline');
}
&.unpublish {
- @include actionButtonSprite(6px, -58px);
+ @include actionButtonSprite('unpublish');
}
}
/* generic action buttons */
&.save-draft {
- @include actionButtonSprite(6px, -90px);
+ @include actionButtonSprite('addpage');
}
&.cms-preview-toggle-link {
padding-left: 24px !important;
margin-left: 4px !important;
text-decoration: none;
- @include actionButtonSprite(6px, -122px);
+ @include actionButtonSprite('preview');
}
&.ss-ui-button-small {
@@ -481,4 +494,4 @@ form.nostyle {
.action-hidden {
display: none;
-}
+}
View
@@ -288,4 +288,4 @@
display: none;
}
}
-}
+}
View
@@ -5,9 +5,10 @@
*/
@import "compass/utilities/sprites/base";
-$icon24: sprite-map("icons/24x24/*.png");
-$icon16: sprite-map("icons/16x16/*.png");
+$icon24: sprite-map("menu_icons/24x24/*.png");
+$icon16: sprite-map("menu_icons/16x16/*.png");
+$btn_icons: sprite-map("btn_icons/*.png", $spacing: 10px);
@mixin icons($sprite) {
background: $sprite;
@@ -38,7 +39,6 @@ $icon16: sprite-map("icons/16x16/*.png");
}
}
-
.icon {
text-indent: -9999px;
border: none;
@@ -57,4 +57,4 @@ $icon16: sprite-map("icons/16x16/*.png");
@include icons($icon16);
}
-}
+}
Oops, something went wrong.

0 comments on commit 2a429c9

Please sign in to comment.