diff --git a/app/views/comments/_new_comment.mobile.haml b/app/views/comments/_new_comment.mobile.haml index 54f487d3b13b6eb5e81ee2de6f888e54fcbe7435..6dea54d41077efd5c67ef339302c99bb0e4b225a 100644 --- a/app/views/comments/_new_comment.mobile.haml +++ b/app/views/comments/_new_comment.mobile.haml @@ -3,10 +3,9 @@ -# the COPYRIGHT file. = form_tag( post_comments_path(post_id), :id => "new_comment_on_#{post_id}", :class => 'new_comment', :autocomplete => "off") do - = hidden_field_tag :post_id, post_id, :id => "post_id_on_#{post_id}" - = text_area_tag :text, nil, :class => "comment_box",:id => "comment_text_on_#{post_id}", :placeholder => t('.comment'), :autofocus => true + %fieldset + = hidden_field_tag :post_id, post_id, :id => "post_id_on_#{post_id}" + = text_area_tag :text, nil, :class => "span12 comment_box", :id => "comment_text_on_#{post_id}", :placeholder => t('.comment'), :autofocus => true - .actions = link_to "Cancel", post_path(post_id), :class => "cancel_new_comment btn" - = submit_tag t('.comment'), :id => "comment_submit_#{post_id}", :disable_with => t('.commenting'), :class => "action" - + = submit_tag t('.comment'), :id => "comment_submit_#{post_id}", :disable_with => t('.commenting'), :class => "btn primary" diff --git a/app/views/layouts/application.mobile.haml b/app/views/layouts/application.mobile.haml index ca27a0014abbcc642451456ef57d17a229520fe9..980e687ab992bcf0cd9033dbf3d2bcb959580e0a 100644 --- a/app/views/layouts/application.mobile.haml +++ b/app/views/layouts/application.mobile.haml @@ -46,17 +46,21 @@ = yield(:head) %body - #main{:role => "main"} - = yield - - %header - = link_to(image_tag('header-logo2x.png', :height => 40, :width => 40, :id => 'header_title'), multi_stream_path) - - - if user_signed_in? - - if yield(:header_action).present? - = yield(:header_action) - - else - = link_to(image_tag('icons/compose_mobile2.png', :height => 28, :width => 28), new_status_message_path, :class => 'compose_icon') + .navbar.navbar-fixed-top + .navbar-inner + .container{:style => "position: relative;"} + = link_to(image_tag('header-logo2x.png', :height => 40, :width => 40, :id => 'header_title'), multi_stream_path) + + - if user_signed_in? + .right + - if yield(:header_action).present? + = yield(:header_action) + - else + = link_to(image_tag('icons/compose_mobile2.png', :class => 'compose_icon'), new_status_message_path) + + #main.container{:role => "main"} + .row + = yield - if user_signed_in? = render :partial =>'shared/footer' diff --git a/app/views/layouts/main_stream.mobile.haml b/app/views/layouts/main_stream.mobile.haml index 4c5ab0cb91b35d9ad44ee3cd92757ba8f5654cc8..73f77a2347c6841e09e9568bf7db63aba3070fcd 100644 --- a/app/views/layouts/main_stream.mobile.haml +++ b/app/views/layouts/main_stream.mobile.haml @@ -2,17 +2,17 @@ -# licensed under the Affero General Public License version 3 or later. See -# the COPYRIGHT file. -%h2{:style => "padding:0 10px;display:none;"} - - if @stream.for_all_aspects? - = t('all_aspects') - - else - = @stream.aspect - -#main_stream.stream - = render 'shared/stream', :posts => @stream.stream_posts - -if @stream.stream_posts.length > 0 - #pagination - %a.more-link.paginate{:href => next_page_path} - %h1 - = t("more") +.span12 + %h2{:style => "padding:0 10px;display:none;"} + - if @stream.for_all_aspects? + = t('all_aspects') + - else + = @stream.aspect + #main_stream.stream + = render 'shared/stream', :posts => @stream.stream_posts + -if @stream.stream_posts.length > 0 + #pagination + %a.more-link.paginate{:href => next_page_path} + %h1 + = t("more") diff --git a/app/views/people/show.mobile.haml b/app/views/people/show.mobile.haml index fc166e0b4117e717cfff4f66f5a8eab624952b26..8cb44d1c21388cbd33589e4d9283bee8b357f9db 100644 --- a/app/views/people/show.mobile.haml +++ b/app/views/people/show.mobile.haml @@ -6,32 +6,35 @@ %h1 DIASPORA* -#author_info.profile - = person_image_tag @person, :thumb_medium - %h2 - = @person.name - %span.description - = @person.diaspora_handle +.span12 + #author_info + = person_image_tag @person, :thumb_medium + .content + %h2 + = @person.name + %span.description + = @person.diaspora_handle -- if user_signed_in? && !(@contact.persisted? || current_user.person == @person) - - if @incoming_request - .floating - %h3 - = t('.incoming_request', :name => @person.name) - %h4 - = link_to t('.return_to_aspects'), aspects_manage_path - = t('.to_accept_or_ignore') + - if user_signed_in? && !(@contact.persisted? || current_user.person == @person) + - if @incoming_request + .floating + %h3 + = t('.incoming_request', :name => @person.name) + %h4 + = link_to t('.return_to_aspects'), aspects_manage_path + = t('.to_accept_or_ignore') -- if @stream.stream_posts.length > 0 - -if @post_type == :photos - = render 'photos/index', :photos => @stream.stream_posts +.span12 + - if @stream.stream_posts.length > 0 + -if @post_type == :photos + = render 'photos/index', :photos => @stream.stream_posts + - else + #main_stream.stream + = render 'shared/stream', :posts => @stream.stream_posts + #pagination + =link_to(t('more'), next_page_path, :class => 'paginate') - else - #main_stream.stream - = render 'shared/stream', :posts => @stream.stream_posts - #pagination - =link_to(t('more'), next_page_path, :class => 'paginate') -- else - #main_stream - %div{:style=>"text-align:center;", :class => "dull"} - = t('.has_not_shared_with_you_yet', :name => @person.first_name) + #main_stream + %div{:style=>"text-align:center;", :class => "dull"} + = t('.has_not_shared_with_you_yet', :name => @person.first_name) diff --git a/app/views/sessions/new.mobile.haml b/app/views/sessions/new.mobile.haml index a91d69979943e312bcdac9ba68434fc7ed2afac3..bedc7ecf77a5803c2d7e59f0188ec4e2ac82b7e8 100644 --- a/app/views/sessions/new.mobile.haml +++ b/app/views/sessions/new.mobile.haml @@ -2,28 +2,32 @@ -# licensed under the Affero General Public License version 3 or later. See -# the COPYRIGHT file. -.stream +#main_stream.stream #login_form .login-container - %h2 - Log in - = form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| - .row - .row - = f.label :username, t('username') - .centered - = f.text_field :username - .row - .row - = f.label :password , t('password') - .centered - = f.password_field :password - .row - = hidden_field(:user, :remember_me, :value => 1) - = f.submit t('devise.sessions.new.sign_in'), :class => 'login-submit' - - if display_password_reset_link? - = link_to "Forgot password?", new_password_path(resource_name) + = form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => 'form-horizontal'}) do |f| + %fieldset + %legend + Log in + + .control-group + = f.label :username, t('username'), :class => "control-label" + .controls + = f.text_field :username + + .control-group + = f.label :password , t('password'), :class => "control-label" + .controls + = f.password_field :password + + = hidden_field(:user, :remember_me, :value => 1) + + .controls + = f.submit t('devise.sessions.new.sign_in'), :class => 'btn primary' %footer + - if display_password_reset_link? + = link_to "Forgot Password?", new_password_path(resource_name) + - if display_registration_link? = link_to t('.sign_up'), new_registration_path(resource_name) diff --git a/app/views/shared/_post_info.mobile.haml b/app/views/shared/_post_info.mobile.haml index 91f9b424c84b0ebb9356ee97666ed9cb9a3445c9..b56cab3ef537242fae362affc82fd3c7359d7e9c 100644 --- a/app/views/shared/_post_info.mobile.haml +++ b/app/views/shared/_post_info.mobile.haml @@ -20,4 +20,3 @@ = t('public') - else = t('limited') - diff --git a/app/views/shared/_publisher.mobile.haml b/app/views/shared/_publisher.mobile.haml index c3e913380fbf91d856d916aefb27a78be23cf519..b50c767ac543e2ba6d207b2460e411787e4bc626 100644 --- a/app/views/shared/_publisher.mobile.haml +++ b/app/views/shared/_publisher.mobile.haml @@ -9,7 +9,7 @@ } - content_for :header_action do - = submit_tag t('.share'), :class => 'action', :id => "submit_new_message" + = submit_tag t('.share'), :class => 'btn primary', :id => "submit_new_message" = form_for StatusMessage.new, {:data => {:ajax => false}} do |status| #message_container diff --git a/config/assets.yml b/config/assets.yml index 7d9709cdb6e2b2fff786ae5e456a7be74b41f567..983ed0f18c4c385871bdc1650eaba5a5d403ea1a 100644 --- a/config/assets.yml +++ b/config/assets.yml @@ -110,5 +110,7 @@ stylesheets: - public/stylesheets/rtl.css mobile: + - public/stylesheets/bootstrap2.css + - public/stylesheets/bootstrap-responsive.css - public/stylesheets/mobile.css diff --git a/public/stylesheets/sass/mobile.scss b/public/stylesheets/sass/mobile.scss index 86a366c23a79eb0ecc2d5a6d5c62759c4630babf..4dd46de069d2e390f04b6d480fcc7454ddb41ef1 100644 --- a/public/stylesheets/sass/mobile.scss +++ b/public/stylesheets/sass/mobile.scss @@ -1,219 +1,3 @@ -/* - * HTML5 ✰ Boilerplate - * - * What follows is the result of much research on cross-browser styling. - * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, - * Kroc Camen, and the H5BP dev community and team. - * - * Detailed information about this CSS: h5bp.com/css - * - * ==|== normalize ========================================================== - */ - - -/* ============================================================================= - HTML5 display definitions - ========================================================================== */ - -article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } -audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } -audio:not([controls]) { display: none; } -[hidden] { display: none; } - - -/* ============================================================================= - Base - ========================================================================== */ - -/* - * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units - * 2. Force vertical scrollbar in non-IE - * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g - */ - -html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } - -body { margin: 0; font-size: 13px; line-height: 1.231; } - -body, button, input, select, textarea { font-family: sans-serif; color: #222; } - -/* - * Remove text-shadow in selection highlight: h5bp.com/i - * These selection declarations have to be separate - * Also: hot pink! (or customize the background color to match your design) - */ - -::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } -::selection { background: #fe57a1; color: #fff; text-shadow: none; } - - -/* ============================================================================= - Links - ========================================================================== */ - -a { color: #00e; } -a:visited { color: #551a8b; } -a:hover { color: #06e; } -a:focus { outline: thin dotted; } - -/* Improve readability when focused and hovered in all browsers: h5bp.com/h */ -a:hover, a:active { outline: 0; } - - -/* ============================================================================= - Typography - ========================================================================== */ - -abbr[title] { border-bottom: 1px dotted; } - -b, strong { font-weight: bold; } - -blockquote { margin: 1em 40px; } - -dfn { font-style: italic; } - -hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } - -ins { background: #ff9; color: #000; text-decoration: none; } - -mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } - -/* Redeclare monospace font family: h5bp.com/j */ -pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } - -/* Improve readability of pre-formatted text in all browsers */ -pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } - -q { quotes: none; } -q:before, q:after { content: ""; content: none; } - -small { font-size: 85%; } - -/* Position subscript and superscript content without affecting line-height: h5bp.com/k */ -sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } -sup { top: -0.5em; } -sub { bottom: -0.25em; } - - -/* ============================================================================= - Lists - ========================================================================== */ - -ul, ol { margin: 1em 0; padding: 0 0 0 40px; } -dd { margin: 0 0 0 40px; } -nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } - - -/* ============================================================================= - Embedded content - ========================================================================== */ - -/* - * 1. Improve image quality when scaled in IE7: h5bp.com/d - * 2. Remove the gap between images and borders on image containers: h5bp.com/e - */ - -img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } - -/* - * Correct overflow not hidden in IE9 - */ - -svg:not(:root) { overflow: hidden; } - - -/* ============================================================================= - Figures - ========================================================================== */ - -figure { margin: 0; } - - -/* ============================================================================= - Forms - ========================================================================== */ - -form { margin: 0; } -fieldset { border: 0; margin: 0; padding: 0; } - -/* Indicate that 'label' will shift focus to the associated form element */ -label { cursor: pointer; } - -/* - * 1. Correct color not inheriting in IE6/7/8/9 - * 2. Correct alignment displayed oddly in IE6/7 - */ - -legend { border: 0; *margin-left: -7px; padding: 0; } - -/* - * 1. Correct font-size not inheriting in all browsers - * 2. Remove margins in FF3/4 S5 Chrome - * 3. Define consistent vertical alignment display in all browsers - */ - -button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } - -/* - * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) - * 2. Correct inner spacing displayed oddly in IE6/7 - */ - -button, input { line-height: normal; *overflow: visible; } - -/* - * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 - */ - -table button, table input { *overflow: auto; } - -/* - * 1. Display hand cursor for clickable form elements - * 2. Allow styling of clickable form elements in iOS - */ - -button, input[type="button"], input[type="reset"], input[type="submit"], [role="button"] { cursor: pointer; -webkit-appearance: button; } - -/* - * Consistent box sizing and appearance - */ - -input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } -input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } -input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } - -/* - * Remove inner padding and border in FF3/4: h5bp.com/l - */ - -button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } - -/* - * 1. Remove default vertical scrollbar in IE6/7/8/9 - * 2. Allow only vertical resizing - */ - -textarea { overflow: auto; vertical-align: top; resize: vertical; } - -/* Colors for form validity */ -input:valid, textarea:valid { } -input:invalid, textarea:invalid { background-color: #f0dddd; } - - -/* ============================================================================= - Tables - ========================================================================== */ - -table { border-collapse: collapse; border-spacing: 0; } -td { vertical-align: top; } - - -/* ==|== primary styles ===================================================== - Copyright (c) 2010-2011, Diaspora Inc. This file is - licensed under the Affero General Public License version 3 or later. See - the COPYRIGHT file. - ========================================================================== */ - @import "mixins"; $blue: #3f8fba; @@ -229,10 +13,9 @@ body { image: url('/images/hatched-bg.jpg'); position: fixed; /* scale background image down for iOS retina display */ - size: 50%; + size: 200px; } - max-width: 100%; - margin-top: 55px; + padding-top: 55px; } .message { @@ -240,15 +23,6 @@ body { left: 2px; }; } -#main { - text-align: center; -} - -.stream { - text-align: left; - max-width: 700px; -} - .stream_element, .comments { overflow: auto; @@ -265,15 +39,15 @@ body { width: 35px; margin: { right: 10px; }; } + .from { a { - margin: { - left: -2px; }; - color: #aaaaaa !important; - font: { - weight: bold !important; }; } + color: #444 !important; + font-weight: bold; + } margin-bottom: 2px; - height: 45px; } + height: 45px; + } > .content, .reshare > .content { @@ -289,13 +63,6 @@ body { .time { font: { weight: normal; }; } - p { - margin: 0 auto; - font-size: 14px; - line-height: 19px; } - margin: 10px { - top: 10px; - bottom: 0; }; padding: 0 !important; } .shield{ @@ -317,10 +84,10 @@ body { } .stream_element .comments { + width: 100%; padding: 0; margin: 0; - top: 8px; - width: 100%; + top: 3px; .content { padding: 0; } @@ -340,38 +107,13 @@ body { #login_form { padding: 0; - padding-bottom: 10px; - margin: auto 20px; + /* ensure url bar is banished from view on iOS */ + margin-bottom: 40px !important; .login-container { padding: 10px; } - - .row { - margin-bottom: 10px; - .login-submit { - float: right; - } - } - - .centered{ - text-align: center; - } - - label { - color: #ccc; - font-size: larger; - font-weight: bold; - } - - input[type='text'], - input[type='password'] { - font-size: 18px; - font-weight: bold; - max-width:90%; - - } } .stream_element, #login_form { @@ -379,6 +121,7 @@ body { @include box-shadow(0, 1px, 2px, rgba(0, 0, 0, 0.2)); background-color: #fff; + margin-bottom: 10px; border: 1px solid #bbb; border-top: 1px solid #ddd; @@ -398,12 +141,9 @@ body { #main_stream { - font: { - size: 0.95em; }; } - -.from { - font: { - size: larger; }; } + margin-left: -10px; + margin-right: -10px; +} .more-link { -webkit-box-shadow: inset 0 1px 5px #777, 0 1px 1px rgba(0,0,0,0.4); @@ -490,34 +230,24 @@ body { padding: 0; } -#author_info.profile { - box-shadow: inset 0 -1px 3px #111; - margin-top: -10px; - text-align: left; - - h2 { - color: #ccc; - } +#author_info { + height: 100px; + position: relative; - background: { - color: #333; }; - border: { - bottom: 1px solid black; }; - height: 90px; - padding: 10px; - margin: { - bottom: 6px; }; img { - float: left; height: 90px; width: 90px; margin: { right: 10px; } + position: absolute; } .content { padding: { - left: 100px; }; } + left: 100px; + }; + } + .description { font: { weight: normal; @@ -527,7 +257,11 @@ body { .right { float: right; } -header { +.navbar { + @include box-shadow(0,1px,2px,#333); +} + +.navbar-inner { @include box-shadow(0,1px,2px,#333); background: { @@ -535,25 +269,16 @@ header { } width: 100%; - position: fixed; z-index: 10; - top: 0; - - /* force hardware acceleration on webkit browsers - 10/17/2011 - removed for now, causes ghost doubles of links on some Android browsers */ - /*-webkit-transform: translateZ(0);*/ border: { bottom: 1px solid #222; } - padding: 2px 5px; - .right { - float: right; } } +} -.stream_element { - /* force hardware acceleration on webkit browsers - 10/17/2011 - removed for now, causes ghost doubles of links on some Android browsers */ - /*-webkit-transform: translateZ(0);*/ +#header_title { + position: relative; + top: -3px; } footer { @@ -571,21 +296,21 @@ footer { .bottom_bar { @include border-radius(0, 0, 5px, 5px); - box-shadow: inset 0 2px 5px -3px #999; z-index: 3; display: block; position: relative; padding: 10px; + padding-top: 8px; background: #eee; margin: { top: 10px; }; border: { - top: 1px solid #ccc; + top: 1px solid #ddd; }; - min-height: 24px; + min-height: 22px; > a, .show_comments { @@ -597,9 +322,6 @@ footer { .show_comments { position: relative; top: 3px; - font: { - size: larger; - } color: #ccc; } @@ -660,11 +382,8 @@ footer { float: right; } .stream_element .photo_attachments { - @include border-radius(3px); + @include border-radius(3px, 3px, 0, 0); - background: { - color: #999; - } border: { bottom: 1px solid #ccc; } @@ -675,7 +394,8 @@ footer { } a { padding: 0; } - margin-top: 0; } + margin-top: 0; +} .photo_area { @include border-radius(3px); @@ -684,12 +404,15 @@ footer { .image_link { display: inline-block; background: { - size: 24px; + size: 20px; repeat: no-repeat; position: center; }; - height: 16px; - width: 24px; + + height: 13px; + + width: 20px; padding: 5px; + margin: { left: 5px; }; @@ -719,12 +442,6 @@ footer { } } -.compose_icon { - position: absolute; - top: 8px; - right: 15px; -} - #new_status_message { text-align: left; position: absolute; @@ -764,35 +481,6 @@ footer { } } -textarea { - font-size: larger !important; -} - -form { - input:not([type='checkbox']), - textarea { - -webkit-appearance: none; - text-size: larger; - } -} - -.btn, -input[type=submit] { - @include border-radius(3px); - background-color: #ddd; - color: #666; - font-weight: bold; - padding: 10px; - border: 1px solid #ccc; - min-width: 100px; - - &.action { - color: #fff; - background-color: green; - border: 1px solid #888; - } -} - select { font-size: larger; padding: 7px; @@ -801,15 +489,6 @@ select { .new_comment { padding: 10px 0; padding-top: 20px; - - textarea { - width: 98%; - } - - .actions { - text-align: right; - margin-top: 10px; - } } .comment.add_comment_bottom_link_container { @@ -820,10 +499,10 @@ select { .post_stats { position: absolute; - font-size: larger; - right: 10px; - top: 36px; + right: 8px; + top: 31px; z-index: 2; + span { color: #666; font-weight: bold; @@ -849,17 +528,6 @@ select { line-height: 16px; } -header { - input { - position: absolute; - top: 8px; - right: 15px; - padding: 5px !important; - min-width: 75px !important; - border: 1px solid #444 !important; - } -} - .new_status_message { min-height: 300px; } @@ -887,90 +555,23 @@ header { } } - -/* - * Media queries for responsive design https://github.com/shichuan/mobile-html5-boilerplate/wiki/The-Style - */ - - -/* Styles for desktop and large screen ----------- */ - -/*styles for 800px and up!*/ -@media only screen and (min-width: 800px) { - /* Styles */ -}/*/mediaquery*/ - - -/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */ -@media -only screen and (-webkit-min-device-pixel-ratio: 1.5), -only screen and (-o-min-device-pixel-ratio: 3/2), -only screen and (min--moz-device-pixel-ratio: 1.5), -only screen and (min-device-pixel-ratio: 1.5) { - /* Styles */ +.compose_icon { + height: 28px; + width: 28px; + margin-top: 3px; } - - -/* ==|== non-semantic helper classes ======================================== - Please define your styles before this section. - ========================================================================== */ - -/* prevent callout */ -.nocallout {-webkit-touch-callout: none;} - -/* Text overflow with ellipsis */ -.ellipsis { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; +.navbar-inner .right { + position: absolute; + right: 12px; + top: 0px; } -/* A hack for HTML5 contenteditable attribute on mobile */ -textarea[contenteditable] {-webkit-appearance: none;} - -/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if they have been set as display: none */ -.gifhidden {position: absolute; left: -100%;} +.navbar-fixed-top { + position: fixed !important; -/* For image replacement */ -.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } -.ir br { display: none; } - -/* Hide from both screenreaders and browsers: h5bp.com/u */ -.hidden { display: none !important; visibility: hidden; } - -/* Hide only visually, but have it available for screenreaders: h5bp.com/v */ -.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } - -/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ -.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } - -/* Hide visually and from screenreaders, but maintain layout */ -.invisible { visibility: hidden; } - -/* Contain floats: h5bp.com/q */ -.clearfix:before, .clearfix:after { content: ""; display: table; } -.clearfix:after { clear: both; } -.clearfix { *zoom: 1; } - - - -/* ==|== print styles ======================================================= - Print styles. - Inlined to avoid required HTTP connection: h5bp.com/r - ========================================================================== */ - -@media print { - * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ - a, a:visited { text-decoration: underline; } - a[href]:after { content: " (" attr(href) ")"; } - abbr[title]:after { content: " (" attr(title) ")"; } - .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ - pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } - thead { display: table-header-group; } /* h5bp.com/t */ - tr, img { page-break-inside: avoid; } - img { max-width: 100% !important; } - @page { margin: 0.5cm; } - p, h2, h3 { orphans: 3; widows: 3; } - h2, h3 { page-break-after: avoid; } -} + max-height: 45px !important; + min-height: 45px !important; + height: 45px !important; + overflow: hidden; +} \ No newline at end of file