From a2aa640749b47543fc02b55d8e492e2ded9c5b8a Mon Sep 17 00:00:00 2001 From: ewinslow Date: Wed, 23 Feb 2011 17:25:06 +0000 Subject: Fixes #2995: buttons get their own css file git-svn-id: http://code.elgg.org/elgg/trunk@8447 36083f99-b078-4883-b0ff-0f9b5a30f544 --- views/default/css/elements/buttons.php | 153 +++++++++++++++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 views/default/css/elements/buttons.php (limited to 'views/default/css/elements/buttons.php') diff --git a/views/default/css/elements/buttons.php b/views/default/css/elements/buttons.php new file mode 100644 index 000000000..3e9203e51 --- /dev/null +++ b/views/default/css/elements/buttons.php @@ -0,0 +1,153 @@ + +/* ************************** + BUTTONS +************************** */ + +/* Base */ +.elgg-button { + font-size: 14px; + font-weight: bold; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + width: auto; + padding: 2px 4px; + margin: 10px 0 10px 0; + cursor: pointer; + outline: none; + -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40); + -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40); +} + +/* Submit: This button should convey, "you're about to take some definitive action" */ +.elgg-button-submit { + color: white; + text-shadow: 1px 1px 0px black; + text-decoration: none; + border: 1px solid #4690d6; + background-color: #4690d6; + background-image: url(_graphics/button_graduation.png); + background-repeat: repeat-x; + background-position: left 10px; +} + +.elgg-button-submit:hover { + border-color: #0054a7; + text-decoration: none; + color: white; + background-color: #0054a7; + background-image: url(_graphics/button_graduation.png); + background-repeat: repeat-x; + background-position: left 10px; +} + +/* Cancel: This button should convey a negative but easily reversible action (e.g., turning off a plugin) */ +.elgg-button-cancel { + color: #333333; + background-color: #dddddd; + background-image: url(_graphics/button_graduation.png); + background-repeat: repeat-x; + background-position: left 10px; + border: 1px solid #999999; +} +.elgg-button-cancel:hover { + color: white; + background-color: #999999; + background-position: left 10px; + text-decoration: none; +} + +/* Action: This button should convey a normal, inconsequential action, such as clicking a link */ +.elgg-button-action { + background-color:#cccccc; + background-image: url(_graphics/button_background.gif); + background-repeat: repeat-x; + background-position: 0 0; + border:1px solid #999999; + color: #333333; + padding: 2px 15px 2px 15px; + text-align: center; + font-weight: bold; + text-decoration: none; + text-shadow: 0 1px 0 white; + cursor: pointer; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -webkit-box-shadow: none; + -moz-box-shadow: none; +} + +.elgg-button-action:hover, +.elgg-button-action:focus { + background-position: 0 -15px; + background-image: url(_graphics/button_background.gif); + background-repeat: repeat-x; + color: #111111; + text-decoration: none; + background-color: #cccccc; + border: 1px solid #999999; +} + +/* Delete: This button should convey "be careful before you click me" */ +.elgg-button-delete { + width:14px; + height:14px; + margin:0; + float:right; +} +.elgg-button-delete a { + display:block; + cursor: pointer; + width:14px; + height:14px; + background: url("_graphics/elgg_sprites.png") no-repeat -200px top; + text-indent: -9000px; + text-align: left; +} +.elgg-button-delete a:hover { + background-position: -200px -16px; +} + +.elgg-button-dropdown { + padding:3px 6px; + text-decoration:none; + display:block; + font-weight:bold; + position:relative; + margin-left:0; + color: white; + border:1px solid #71B9F7; + -webkit-border-radius:4px; + -moz-border-radius:4px; + border-radius:4px; + /*background-image:url(_graphics/elgg_sprites.png); + background-position:-150px -51px; + background-repeat:no-repeat;*/ +} + +.elgg-button-dropdown:after { + content: " \25BC "; + font-size:smaller; +} + +.elgg-button-dropdown:hover { + background-color:#71B9F7; + text-decoration:none; +} + +.elgg-button-dropdown.elgg-state-active { + background: #cccccc; + outline: none; + color: #333333; + + border:1px solid #cccccc; + -webkit-border-radius:4px 4px 0 0; + -moz-border-radius:4px 4px 0 0; + border-radius:4px 4px 0 0; +} \ No newline at end of file -- cgit v1.2.3