X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/05dd681abf576760e4161be1d781be6d45d59fef..8e19f2c7f0a216fa1f1e2d20ccd5791379fbbb50:/app/assets/stylesheets/common.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 3a8b97fbc..411e6167b 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -4,8 +4,6 @@ /* Styles common to large and small screens */ -.fillL { background-color: white; } - /* Default rules for the body of every page */ body { @@ -85,13 +83,6 @@ a { /* Utility for de-emphasizing content */ -.deemphasize { - color: $darkgrey; - a { - color: $blue; - } -} - .text-muted a { color: $blue; } @@ -448,26 +439,11 @@ body.compact-nav { .welcome { display: none; - padding-bottom: 5px; p { - padding: $lineheight/2 $lineheight $lineheight; font-size: 110%; font-weight: 300; } - - .button { - width: 50%; - float: left; - margin: 0; - border-radius: 0; - font-weight: normal; - padding: .6em; - - &.learn-more { - border-right: 1px solid #fff; - } - } } #banner { @@ -800,8 +776,8 @@ tr.turn { tr.turn:hover { background: $list-highlight; } -.routing_engines, #route_from, #route_to { margin-left: 25px; } -.routing_marker { width: 15px; position: absolute; cursor: move; } + +.routing_marker { width: 15px; cursor: move; } /* Rules for entity history */ @@ -992,6 +968,16 @@ tr.turn:hover { } } +/* Bootstrap buttons don't have any vertical margin, so + they touch when adjacent buttons wrap onto a new line + e.g. wide form buttons on a narrow sidebar */ + +.btn-wrapper { + > .btn { + margin-bottom: $spacer * 0.25; + } +} + /* Rules for export sidebar */ .export_form { @@ -1260,11 +1246,6 @@ tr.turn:hover { img.user_thumbnail { float: left; } - - small.deemphasize { - float: left; - display: block; - } } /* Rules for the diary entry page */ @@ -1334,13 +1315,6 @@ tr.turn:hover { list-style-type: lower-alpha; } } - - #decline { - background: $lightblue; - &:hover { - background: darken($lightblue, $hovercolor); - } - } } /* Rules for the account settings page */ @@ -1512,252 +1486,30 @@ tr.turn:hover { } } -/* Rules for forms */ - -.standard-form { - fieldset { - margin-bottom: $lineheight; - } - label.standard-label { - display: block; - margin-bottom: $lineheight/4; - font-size: $typeheight; - font-weight: bold; - line-height: 1.5; - } - label.standard-label.secondary { - display: inline-block; - font-weight: normal; - } - .form-help { - font-weight: normal; - } - .form-column { - float: left; - margin-right: 20px; - } - .form-divider { - margin-top: $lineheight; - padding-top: $lineheight; - border-top: 1px solid $lightgrey; - } - .horizontal-list .standard-form-row { - float: left; - padding-right: 10px; - } - .standard-form-row { - margin-bottom: $lineheight/2; - } - .form-list { - margin-bottom: 0; - } - .form-list li { - margin-bottom: 5px; - list-style-type: none; - } - input[type="checkbox"], - input[type="radio"] { - float: left; - margin-top: 5px; - } - - #remember_me_openid { - display: block; - } +.search_form { + background-color: $lightgrey; - select { - padding: 2px; + .describe_location { + top: 6px; + right: 6px; + font-size: 10px; + color: $blue; } +} - input[type="checkbox"], - input[type="radio"] { - margin-right: 5px; - } +.directions_form { + background-color: $lightgrey; - input[type="text"], - input[type="email"], - input[type="url"], - input[type="password"], - textarea { - color: #222; - background-color: #fff; - border: 1px solid $grey; - border-radius: 3px; - padding: 2px 5px; - margin: 0; - width: 200px; + .loader_copy { + display: none; - &.field_with_errors { - border: 2px solid #ff7070; + img { + vertical-align: middle; } } - textarea { - padding: 5px; - width: 100%; - min-height: 50px; - resize: vertical; - } - - - /* Utility for general button styles */ - - input[type="button"], - input[type="submit"], - input[type="reset"], - a.button { + a.reverse_directions { cursor: pointer; - border: 0; - display: inline-block; - padding: $lineheight/4 $lineheight/2; - min-height: 20px + $lineheight/2; - min-width: 120px; - margin: 0 0 $lineheight/2 0; - color: white; - background: $blue; - text-align: center; - border-radius: 2px; - &:hover { - background: darken($blue, $hovercolor); - text-decoration: none; - } - &.deemphasize { - background: $lightblue; - &:hover { - background: darken($lightblue, $hovercolor); - } - } - &:disabled { - background: $lightgrey; - &:hover { - background: $lightgrey; - } - } - &:last-child { - margin-bottom: 0; - } - } - - input[type="button"], - input[type="submit"], - input[type="reset"] { - line-height: normal; - } - - a.button { - line-height: 20px; - } - - .search_form, - .directions_form { - position: relative; - padding: $lineheight/2; - background-color: $lightgrey; - - .query_wrapper { - position: relative; - overflow: hidden; - border-radius: 2px 0 0 2px; - } - - input[type=text] { - width: 100%; - height: 30px; - transition: 300ms linear; - } - - input[type=text].overflow { - border-right: none; - border-radius: 3px 0px 0px 3px; - } - - input:focus { - outline: none; - box-shadow: 0px 0px 7px $vibrant-green; - } - - input[type=submit].float { - float: right; - width: auto; - min-width: 0; - border-radius: 0 2px 2px 0; - } - - input.error { - background-color: rgba($red, 0.4); - } - - select { - /* this next line is to polyfill the vertical alignment of text within a select element, - * which is different between firefox and chrome. */ - padding: 0.3em 0; - } - - .query_options { - text-align: right; - font-size: 10px; - color: $blue; - } - - .describe_location { - position: absolute; - top: 6px; - right: 6px; - font-size: 10px; - color: $blue; - } - - .switch_link { - float: right; - width: auto; - min-width: 0; - margin-left: 6px; - } - - img.button { - display: block; - width: 20px; - height: 20px; - } - - span.force_width { - width: 100%; - padding-right: 25px; - display: block; - } - - select.routing_engines { - min-height: 30px; - margin: 0px 0px 5px 25px; - } - - input.routing_go { - min-width: 100px; - float: right; - } - - div.header { - width: 100%; - height: 30px; - } - - div.line { - width: 100%; - margin: 0px 0px 5px 0px; - } - - div.loader_copy { - display: none; - - img { - vertical-align: middle; - } - } - - a.reverse_directions { - cursor: pointer; - margin: 0px 0px 5px 25px; - } } } @@ -1943,95 +1695,8 @@ div.secondary-actions { } } -.diary_post .richtext { - margin-top: $lineheight; - } - .comments .richtext { margin-left: 70px; - margin-top: 0; -} - -/* Rules for rich text editors */ - -.standard-form { - input.richtext_title[type="text"] { - width: 50%; - width: calc(100% - 235px); - - @media only screen and (max-width:768px) { - width: 100%; - } - } - - .richtext_container { - margin-bottom: $lineheight; - - .richtext_content { - width: 50%; - width: calc(100% - 235px); - display: inline-block; - vertical-align: top; - - @media only screen and (max-width:768px) { - width: 100%; - } - - .richtext_preview { - display: inline-block; - padding: $lineheight; - background-color: $offwhite; - overflow-x: auto; - - &.loading { - background-image: image-url("loading.gif"); - background-repeat: no-repeat; - background-position: center; - } - - > :first-child { - margin-top: 0px; - } - } - } - - .richtext_help { - display: inline-block; - vertical-align: top; - margin-left: 15px; - background-color: $offwhite; - padding: $lineheight/2; - width: 220px; - - ul { - margin-bottom: 0; - } - - h4.heading, li { - border-bottom: 1px solid $grey; - margin-bottom: $lineheight/4; - padding-bottom: $lineheight/4; - } - - li h4, li span, li p { - display: inline-block; - vertical-align: top; - font-size: 11px; - } - - li h4 { - width: 40%; - margin: 0; - } - - li span, li p { - width: 50%; - margin-left: $lineheight/2; - margin-bottom: $lineheight/4; - white-space: nowrap; - } - } - } } /* Rules for the user notes list */