diff --git a/static/css/components/merge-form.less b/static/css/components/merge-form.less new file mode 100644 index 00000000000..9a61308bde6 --- /dev/null +++ b/static/css/components/merge-form.less @@ -0,0 +1,101 @@ +/** + * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#merge-form + */ +// Consider using .merge-form OR #mergeForm for a common parent selector +// openlibrary/templates/merge/editions.html +div.merge { + font-family: @lucida_sans_serif-2; + width: 100%; + float: left; + margin-bottom: 15px; + .entry { + width: 100%; + padding: 10px 0; + float: left; + clear: right; + border-bottom: 1px solid @lighter-grey; + } + .header { + width: 100%; + padding: 0 !important; + float: left; + clear: right; + border-bottom: 1px solid @lighter-grey; + div { + padding: 5px; + } + } + .master { + background-color: @light-yellow!important; + } + .data { + padding: 0 5px; + } + .input { + width: 37px; + float: left; + text-align: center; + padding: 3px 5px 0; + } + .record { + ul { + margin-top: 5px; + margin-bottom: 0 !important; + } + li { + color: @grey!important; + font-size: .75em; + } + label { + display: block; + } + } + .metaDate { + color: @brown; + font-size: .8125em; + padding-left: 10px; + } + .metaSubject { + color: @grey; + font-size: .8125em; + display: block; + } + + .name { + font-weight: 700; + color: @black; + + /* stylelint-disable selector-max-specificity */ + a:link, + a:visited { + color: @black; + text-decoration: none; + } + a:hover, + a:active { + color: @link-blue; + text-decoration: underline; + } + /* stylelint-enable selector-max-specificity */ + } + .count { + font-size: .8125em; + text-align: right; + } + } + +@media all and ( min-width: @width-breakpoint-desktop ) { + div.merge { + .record { + float: left; + width: 710px; + } + label { + width: 710px; + } + .count { + width: 86px; + float: left; + } + } +} diff --git a/static/css/legacy.less b/static/css/legacy.less index c39715c4caa..af451543484 100644 --- a/static/css/legacy.less +++ b/static/css/legacy.less @@ -429,6 +429,7 @@ span { color: @brown; padding: 5px 5px 0; } + // span.merge appears in openlibrary/templates/work_search.html &.merge { padding: 2px 0; } @@ -1963,94 +1964,15 @@ div.addfield { @import (less) "components/chart.less"; /* MERGING */ -// openlibrary/templates/merge/editions.html -div.merge { - font-family: @lucida_sans_serif-2; - width: 100%; - float: left; - margin-bottom: 15px; - &This { - float: right; - margin: 20px 20px 0 30px; - padding-left: 47px; - background: url(/images/icons/icon_merge.png) no-repeat 0 0; - } - div.entry { - width: 100%; - padding: 10px 0; - float: left; - clear: right; - border-bottom: 1px solid @lighter-grey; - } - div.header { - width: 100%; - padding: 0 !important; - float: left; - clear: right; - border-bottom: 1px solid @lighter-grey; - div { - padding: 5px; - } - } - div.master { - background-color: @light-yellow!important; - } - div.data { - padding: 0 5px; - } - div.input { - width: 37px; - float: left; - text-align: center; - padding: 3px 5px 0; - } - div.record { - float: left; - width: 710px; - ul { - margin-top: 5px; - margin-bottom: 0 !important; - li { - color: @grey!important; - font-size: .75em; - } - } - .name { - font-weight: 700; - color: @black; - a:link, - a:visited { - color: @black; - text-decoration: none; - } - a:hover, - a:active { - color: @link-blue; - text-decoration: underline; - } - } - label { - display: block; - width: 710px; - } - .metaDate { - color: @brown; - font-size: .8125em; - padding-left: 10px; - } - .metaSubject { - color: @grey; - font-size: .8125em; - display: block; - } - } - div.count { - width: 86px; - float: left; - font-size: .8125em; - text-align: right; - } +// Merge button +//openlibrary/templates/search/authors.html +div.mergeThis { + float: right; + margin: 20px 20px 0 30px; + padding-left: 47px; + background: url(/images/icons/icon_merge.png) no-repeat 0 0; } +@import (less) "components/merge-form.less"; // openlibrary/templates/merge/editions2.html // openlibrary/templates/merge/history.html