From 57eac3f21fdb89f14ef1de0093fbf859046bc603 Mon Sep 17 00:00:00 2001 From: Paradox Date: Sat, 20 Aug 2011 17:11:02 -0600 Subject: [PATCH] Changed options expandos to use cross-browser CSS Moved from display:box; to a more traditional inline-block system, for cross browser compatibility --- r2/r2/public/static/css/compact.css | 11 ++++++----- r2/r2/public/static/css/compact.scss | 19 +++++++++---------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/r2/r2/public/static/css/compact.css b/r2/r2/public/static/css/compact.css index b29af1e13..86e6f4aae 100644 --- a/r2/r2/public/static/css/compact.css +++ b/r2/r2/public/static/css/compact.css @@ -44,19 +44,20 @@ button.button { padding: 0 5px; } .comment .options_link { top: 10px; } /*Options expando*/ -.link .options_expando, .comment .options_expando, .message .options_expando { background: #213345; margin: 35px -5px -1px; border-top: 1px solid #111922; display: none; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; -ms-box-orient: horizontal; box-orient: horizontal; -moz-box-align: center; -webkit-box-align: center; -ms-box-align: center; box-align: center; -moz-box-pack: center; -webkit-box-pack: center; -ms-box-pack: center; box-pack: center; -moz-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -webkit-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -o-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8); } -.link .options_expando a, .comment .options_expando a, .message .options_expando a { display: block; color: white; text-decoration: none; font-size: 11px; padding: 10px; width: 50px; height: 40px; text-align: center; border-right: 1px solid #111922; border-left: 1px solid #324c67; -moz-transition: all 100ms ease-in; -webkit-transition: all 100ms ease-in; -o-transition: all 100ms ease-in; transition: all 100ms ease-in; } +.link .options_expando, .comment .options_expando, .message .options_expando { background: #213345; margin: 35px -5px -1px; border-top: 1px solid #111922; display: none; -moz-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -webkit-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -o-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8); text-align: center; height: 60px; overflow: hidden; } +.link .options_expando a, .comment .options_expando a, .message .options_expando a { display: inline-block; color: white; text-decoration: none; font-size: 11px; padding: 10px; width: 50px; height: 40px; text-align: center; border-right: 1px solid #111922; border-left: 1px solid #324c67; -moz-transition: all 100ms ease-in; -webkit-transition: all 100ms ease-in; -o-transition: all 100ms ease-in; transition: all 100ms ease-in; } .link .options_expando a:active, .comment .options_expando a:active, .message .options_expando a:active { background-color: #324c67; border-left: 1px solid #42668a; } -.link .options_expando a:hover, .comment .options_expando a:hover, .message .options_expando a:hover { background-color: #263340; -moz-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -webkit-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -o-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); border-left: 1px solid #42668a; padding-top: 15px; padding-bottom: 5px; } +.link .options_expando a:hover, .comment .options_expando a:hover, .message .options_expando a:hover { background-color: #263340; -moz-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -webkit-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -o-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); border-left: 1px solid #42668a; } .link .options_expando a:first-child, .comment .options_expando a:first-child, .message .options_expando a:first-child { border-left: none; } .link .options_expando a:last-child, .comment .options_expando a:last-child, .message .options_expando a:last-child { border-right: none; } -.link .options_expando.expanded, .comment .options_expando.expanded, .message .options_expando.expanded { display: -moz-box; display: -webkit-box; display: -ms-box; display: box; } +.link .options_expando.expanded, .comment .options_expando.expanded, .message .options_expando.expanded { display: block; } .comment .entry, .message .entry { margin-right: 50px; } .comment .child .options_link, .message .child .options_link { top: 8px; } .comment .options_expando, .message .options_expando { margin: 10px -50px 10px 0px; } +.comment .md, .message .md { margin-right: 40px; } -.message .options_expando { margin: 10px -55px 10px -5px; } +.message .options_expando { margin: 25px -55px 10px -5px; } .options_icons, .email-icon, .report-icon, .save-icon, .unsave-icon, .domain-icon, .edit-icon, .reply-icon, .permalink-icon, .collapse-icon, .context-icon, .parent-icon, .unread-icon, .hide-icon, .unhide-icon { display: block; width: 24px; height: 24px; margin-left: auto; margin-right: auto; margin-bottom: 5px; } diff --git a/r2/r2/public/static/css/compact.scss b/r2/r2/public/static/css/compact.scss index e1ab5e3ba..d041559fc 100644 --- a/r2/r2/public/static/css/compact.scss +++ b/r2/r2/public/static/css/compact.scss @@ -177,14 +177,14 @@ button.button { margin: 35px -5px -1px; border-top: 1px solid hsl(210,35%,10%); display: none; - @include box-orient(horizontal); - @include box-align(center); - @include box-pack(center); @include box-shadow(inset 0px 3px 8px hsla(0,0%,0%,.8)); text-shadow: 0px -1px 0px hsla(0,0%,0%,.8); + text-align: center; + height: 60px; + overflow: hidden; a { - display: block; + display: inline-block; color: white; text-decoration: none; font-size: 11px; @@ -204,10 +204,6 @@ button.button { background-color: hsl(210,25%,20%); @include box-shadow(inset 0px 3px 8px hsla(0,0%,0%,.8)); border-left: 1px solid hsl(210,35%,40%); - padding: { - top: 15px; - bottom: 5px; - } } &:first-child { @@ -219,7 +215,7 @@ button.button { } &.expanded { - @include display-box; + display: block; } } } @@ -235,11 +231,14 @@ button.button { .options_expando { margin: 10px -50px 10px 0px; //Overwrite the link styles } + .md { + margin-right: 40px; + } } .message { .options_expando { - margin: 10px -55px 10px -5px; + margin: 25px -55px 10px -5px; } }