diff --git a/ckan/public/base/images/sprite-ckan-icons.png b/ckan/public/base/images/sprite-ckan-icons.png index c2ed497150b..4a1228e1064 100644 Binary files a/ckan/public/base/images/sprite-ckan-icons.png and b/ckan/public/base/images/sprite-ckan-icons.png differ diff --git a/ckan/public/base/less/ckan.less b/ckan/public/base/less/ckan.less index eb664e51633..ae703043b6c 100644 --- a/ckan/public/base/less/ckan.less +++ b/ckan/public/base/less/ckan.less @@ -5,6 +5,7 @@ @import "dataset.less"; @import "toolbar.less"; @import "prose.less"; +@import "icons.less"; @import "layout.less"; @import "masthead.less"; @import "footer.less"; diff --git a/ckan/public/base/less/icons.less b/ckan/public/base/less/icons.less new file mode 100644 index 00000000000..e7861afc448 --- /dev/null +++ b/ckan/public/base/less/icons.less @@ -0,0 +1,63 @@ +@small-x: 16px; +@small-y: 16px; +@small-offset-x: -@small-x; +@small-offset-y: 0; +@medium-x: 17px; +@medium-y: 17px; +@medium-offset-x: -@medium-x; +@medium-offset-y: -@small-y; +@large-x: 20px; +@large-y: 20px; +@large-offset-x: -@large-x; +@large-offset-y: -@small-y - @medium-y; + +.ckan-icon { + .ie7-restore-right-whitespace; + display: inline-block; + vertical-align: text-bottom; + position: relative; + top: 2px; + width: 16px; + height: 16px; + background-image: url("@{image-path}/sprite-ckan-icons.png"); + background-repeat: no-repeat; + background-position: 16px 16px; +} + +.ckan-icon-background-position(@offset, @size) { + @w: "@{size}-x"; + @h: "@{size}-y"; + @x: "@{size}-offset-x"; + @y: "@{size}-offset-y"; + width: @@w; + height: @@h; + background-position: (@@x * @offset) @@y; +} + +// SMALL + +.ckan-icon-fb { .ckan-icon-background-position(0, "small") } +.ckan-icon-gplus { .ckan-icon-background-position(1, "small") } +.ckan-icon-twitter { .ckan-icon-background-position(2, "small") } +.ckan-icon-email { .ckan-icon-background-position(3, "small") } +.ckan-icon-share { .ckan-icon-background-position(4, "small") } +.ckan-icon-feed { .ckan-icon-background-position(5, "small") } +.ckan-icon-lock { .ckan-icon-background-position(6, "small") } + +// MEDIUM + +.ckan-icon-circle-cross { .ckan-icon-background-position(0, "medium") } +.ckan-icon-circle-add { .ckan-icon-background-position(1, "medium") } +.ckan-icon-flame { .ckan-icon-background-position(2, "medium") } + +// LARGE + +.ckan-icon-lock { .ckan-icon-background-position(0, "large") } +.ckan-icon-photo { .ckan-icon-background-position(1, "large") } +.ckan-icon-add { .ckan-icon-background-position(2, "large") } +.ckan-icon-home { .ckan-icon-background-position(3, "large") } +.ckan-icon-rewind { .ckan-icon-background-position(4, "large") } +.ckan-icon-tools { .ckan-icon-background-position(5, "large") } +.ckan-icon-flag { .ckan-icon-background-position(6, "large") } +.ckan-icon-clipboard { .ckan-icon-background-position(7, "large") } +.ckan-icon-share { .ckan-icon-background-position(8, "large") } diff --git a/ckan/public/base/less/mixins.less b/ckan/public/base/less/mixins.less index 9e506401662..d15c7cb4c62 100644 --- a/ckan/public/base/less/mixins.less +++ b/ckan/public/base/less/mixins.less @@ -15,22 +15,22 @@ background: url("@{image-path}/background-tag.png") no-repeat -13px center; position: relative; display: block; + font-size: 11px; line-height: 27px; color: @layout-link-color; padding-left: 10px; padding-right: 5px; margin-right: 11px; -} - -.tag:after { - content: ""; - background: url("@{image-path}/background-tag.png") no-repeat center left; - position: absolute; - display: block; - top: 0; - bottom: 0; - right: -11px; - width: 11px; + &:before { + content: ""; + background: url("@{image-path}/background-tag.png") no-repeat center left; + position: absolute; + display: block; + top: 0; + bottom: 0; + right: -11px; + width: 11px; + } } .unstyled { diff --git a/ckan/public/base/less/nav.less b/ckan/public/base/less/nav.less index 1b9ee4e9a30..cd8c936b923 100644 --- a/ckan/public/base/less/nav.less +++ b/ckan/public/base/less/nav.less @@ -10,21 +10,31 @@ .nav-simple > li > a { color: @nav-link-color; padding: 7px 25px; + font-size: 12px; line-height: 14px; // keeps the overall height an even number } -.nav-simple > li.selected > a { - @inner-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35); - @outer-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); - .border-radius(3px); - .box-shadow(@inner-shadow); - box-shadow: @inner-shadow, @outer-shadow; - cursor: default; - margin: 2px 5px 3px; - padding: 4px (@module-margin-x - 7); - background: #000; - color: #fff; - border: 1px solid black; +.nav-simple > li > a .ckan-icon { + position: relative; + top: -1px; +} + +.nav-simple > li.active { + background-color: #f2f2f2; +} + +.nav-simple > li.active > a { + .tag; + .box-sizing(border-box); + font-size: 12px; + font-weight: bold; + position: relative; + left: 4px; + margin-left: 0; + margin-right: 7px; + padding-left: 10px; + padding-right: 0px; + padding: 1px (@module-margin-x - 7); } .secondary .nav-simple > li > a { @@ -33,17 +43,24 @@ position: relative; } -.secondary .nav-simple > li > a:hover:after { +.secondary .nav-simple > li > a:hover:after, +.secondary .nav-simple > li.active > a:hover:after { + .ckan-icon; + .ckan-icon-circle-add; content: ""; - display: block; position: absolute; top: 50%; right: 5px; - width: 17px; - height: 17px; margin-top: -8px; - background: url("@{sprite-path}") no-repeat; - background-position: -17px 0; +} + +.secondary .nav-simple > li > a:hover:after { + .ckan-icon-circle-add; +} + +.secondary .nav-simple > li.active > a:hover:after { + .ckan-icon-circle-cross; + right: 3px; } .secondary .nav-simple > li.selected > a { diff --git a/ckan/public/base/less/toolbar.less b/ckan/public/base/less/toolbar.less index ed54c8e8de5..203c7bfed7d 100644 --- a/ckan/public/base/less/toolbar.less +++ b/ckan/public/base/less/toolbar.less @@ -13,6 +13,13 @@ border: none; } +.toolbar .breadcrumb li:first-of-type:before { + content: " "; + .ckan-icon; + .ckan-icon-home; + margin-right: 5px; +} + .toolbar .breadcrumb li:after { content: " / "; } @@ -39,3 +46,8 @@ .toolbar .actions li:last-of-type { margin-right: 0; } + +.toolbar .actions .btn { + padding: 2px 6px 3px; + border-color: #b7b7b7; +} diff --git a/ckan/public/base/less/variables.less b/ckan/public/base/less/variables.less index 999a1b5141e..5c0ad3fbaeb 100644 --- a/ckan/public/base/less/variables.less +++ b/ckan/public/base/less/variables.less @@ -24,7 +24,7 @@ @masthead-text-color: #fff; @masthead-link-color: @masthead-text-color; @masthead-background-color-start: #005d7a; -@masthead-background-color-end: #005d7a; +@masthead-background-color-end: #00536b; // Twitter Bootstrap Overrides @bodyBackground: @layout-background-color; diff --git a/ckan/templates/package/read.html b/ckan/templates/package/read.html index 8877a76939c..c3ae524a02a 100644 --- a/ckan/templates/package/read.html +++ b/ckan/templates/package/read.html @@ -15,9 +15,9 @@
  • ${c.pkg_dict.get('title', c.pkg_dict.get('name'))}
    • @@ -127,30 +127,30 @@

    Additional Info

    diff --git a/ckan/templates/snippets/facet_list.html b/ckan/templates/snippets/facet_list.html index 0bb7c56afad..832f320c448 100644 --- a/ckan/templates/snippets/facet_list.html +++ b/ckan/templates/snippets/facet_list.html @@ -23,16 +23,18 @@ how a facet-item's count is displayed. --> -
    -

    ${h.facet_title(title)} Clear All

    - -

    - Show All ${h.facet_title(title)} -

    -
    + +
    +

    ${h.facet_title(title)} Clear All

    + +

    + Show All ${h.facet_title(title)} +

    +
    +