diff --git a/basis.html b/basis.html new file mode 100644 index 0000000..873099b --- /dev/null +++ b/basis.html @@ -0,0 +1,2209 @@ + + + + + + + + + Style guide | Backdrop + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+

Style guide

+ + +
+
+
+ +

Showing style guide for Bartik

+

The default front-end theme for Backdrop CMS.

+ +

Link

+
Duis convallis vestibulum tempor dui adipiscing nam ante est vitae.
+

B

+
Erat massa magna felis fusce elementum nunc in a elementum.
+

Delete

+
Ipsum in ut + auctor urna luctus et tortor nisl duis. +
+

Emphasis

+
Nam amet est lacus nec adipiscing amet lacus viverra a.
+

hr

+
+ Mi dignissim dolor accumsan dignissim sit auctor dignissim nam a. +
+
+

Italic

+
Fusce convallis iaculis nunc ante dolor lorem dui elementum tempor.
+

Quote

+
Orci nisl vestibulum + porta gravida sed mi aliquam ac velit. +
+

Strikethrough

+
Orci cras tempor + iaculis lorem sed sit erat porta lacus. +
+

Small

+
Sit ante duis aliquam in gravida eu dolor sit a.
+

Strong

+
Turpis pellentesque magna euismod mi lorem lacus duis lacus vitae.
+

Subscript

+
Urna tempor id lorem amet tempor convallis erat.
+

Superscript

+
Lobortis tempor viverra luctus lacus adipiscing amet nam.
+

Underline

+
Vitae auctor nunc erat ante malesuada neque ipsum feugiat euismod.
+

Code (inline)

+
Viverra vestibulum viverra mi porta porta consectetur magna ac lorem.
+

Figure / Caption

+
+
+ +
Balloons in the Napa valley.
+
+
+

Blockquote

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

+
+

Monospace

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

+ . +
+

Headings

+
+

h1: In ac magna Erat dignissim felis Ante adipiscing orci Consequat aliquam fusce Vestibulum fusce erat

+

h2: Aliquam nisl amet Ante neque viverra Convallis lacus erat Sed urna sed Pellentesque nam feugiat

+

h3: Porta gravida dictum Ac fusce nisl Erat tortor accumsan Amet ut cras Sit adipiscing venenatis

+

h4: Massa iaculis vitae Amet aliquam neque Nisl auctor eros Ante consectetur elit Dolor in elit

+
h5: Nam luctus egestas Dui venenatis accumsan Massa viverra euismod Magna lorem porta Vulputate egestas in
+
h6: Adipiscing lobortis tempor Tempor auctor iaculis Cras feugiat vulputate Vulputate ac magna Enim dolor nam
+
+

Unordered list

+
+
+

Mattis auctor euismod

+
    +
  • Sed porta ante
  • +
  • Vulputate elit feugiat
  • +
  • Dictum tempor dignissim
  • +
  • Mattis dui massa
  • +
  • Auctor dignissim magna
  • +
+
+
+

Ordered list

+
+
+

Lorem malesuada tempor

+
    +
  1. Elit lobortis eu
  2. +
  3. Luctus nam et
  4. +
  5. Iaculis nisl erat
  6. +
  7. Sed eu adipiscing
  8. +
  9. Auctor nec enim
  10. +
+
+
+ + + + +

Basic table

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
This is a table caption.
Ut mi namDolor nam lobortisSed feugiat etAmet ut namSit iaculis magna
Ac convallis nuncViverra viverra dignissimVelit lobortis eratLacinia velit vitaeUt nec eu
Lobortis dui utAc velit necDictum urna egetConvallis velit loremConvallis sit lacus
Vulputate enim miSed cras vulputateUt lacinia anteConvallis viverra etEt turpis felis
Urna ac viverraEgestas magna aVulputate aliquam utGravida et egetLorem viverra egestas
Eu iaculis mattisMagna aliquam tinciduntNunc dignissim eratDignissim viverra dignissimElit feugiat turpis
+
+

Sortable table

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Namesort descendingTypeStatusSchema versionWeight
aaa_update_testmodule0-10
actions_loop_testmodule0-10
admin_barmodule10100
aeon5theme1-10
ajax_forms_testmodule0-10
+
+

Draggable table

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Felis tortor dolorEt dolor namFelis lorem duisMattis elit acOrci ac et
Accumsan nunc enimIaculis sit magnaA convallis namAmet ante dolor +
+ +
+
Massa feugiat massaDignissim viverra orciVestibulum tincidunt vulputateLobortis dignissim consectetur +
+ +
+
Porta convallis dignissimIpsum viverra duisLacus aliquam viverraDictum iaculis eros +
+ +
+
Id ipsum laciniaMagna ac vulputateConsectetur eros erosSed aliquam consequat +
+ +
+
Viverra sed malesuadaAccumsan nunc dictumVenenatis eget gravidaEros erat dolor +
+ +
+
+
+

Status message

+
+
+

Status message

+
+
    +
  • Every cache cleared.
  • +
  • Page About us has been created.
  • +
  • The configuration options have been saved.
  • +
+
+
+
+

Warning message

+
+
+

Status message

+ The site is now in maintenance mode. Only users with the "Access site in maintenance mode" permission will be able to access the site. +
+
+

Error message

+
+
+

Status message

+
+
    +
  • You are not authorized to post comments.
  • +
  • Cron run failed.
  • +
+
+
+
+

Form elements

+
+
+
+
+ + +
Duis orci nunc, lacinia in malesuada et, euismod id turpis.
+
+
+ + +
Cras metus lorem, euismod ornare mattis sagittis, ultrices eget turpis.
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
Maecenas mollis eros non elit sollicitudin quis fermentum diam lacinia.
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
Phasellus ac eleifend magna.
+
+
+ + +
Phasellus quis venenatis tortor.
+
+
+ + +
Sed fermentum nulla quis risus suscipit dapibus.
+
+
+ + + +
Maecenas mollis eros non elit sollicitudin quis fermentum diam lacinia.
+
+
+ +   +
Morbi congue nulla vel tortor aliquet imperdiet.
+
+
+ + + +
Aliquam dui dolor, ullamcorper eget rutrum ut, hendrerit ac lorem.
+
+
+ +
+ +
+
Phasellus ac eleifend magna.
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+
Sed et enim nunc, nec vehicula sem.
+
+
+ + +
Pellentesque ac dictum ante.
+
+
+
+ +
+ + + +
+
Vivamus semper vehicula ante eget semper.
+
+
+
+ + +
In vel iaculis ligula.
+
+
+
+ + +
+
+ + +
+
+ + + +
+
+
+

Buttons / Actions

+
+
+
+ + + +
+ + + + Cancel +
+
+
+
+

Fieldsets

+
+
+
+ +
+ Fieldset collapsible +
+
Quisque a velit diam.
+
+ + +
Integer vel felis laoreet purus sollicitudin varius sed id ipsum.
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
Sed fermentum nulla quis risus suscipit dapibus.
+
+
+
+
+ Fieldset +
+
Cras metus lorem, euismod ornare mattis sagittis, ultrices eget turpis.
+
+ + +
Integer vel felis laoreet purus sollicitudin varius sed id ipsum.
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
Sed fermentum nulla quis risus suscipit dapibus.
+
+
+
+ + + +
+
+
+

Vertical tabs

+
+
+
+

Vertical Tabs

+
+ +
+
+ dignissim erat vitae +
+
Phasellus et ipsum quis sapien accumsan auctor.
+
+ + +
Suspendisse sit amet sem id libero auctor pharetra sit amet ut dui.
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
Vestibulum sit amet massa est.
+
+
+
+
+ eget et nunc +
+
Praesent porttitor ante non lacus suscipit porta.
+
+ + +
Suspendisse sit amet sem id libero auctor pharetra sit amet ut dui.
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
Vestibulum sit amet massa est.
+
+
+
+
+ tortor convallis iaculis +
+
Suspendisse potenti.
+
+ + +
Suspendisse sit amet sem id libero auctor pharetra sit amet ut dui.
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
Vestibulum sit amet massa est.
+
+
+
+ +
+
+
+ + + +
+
+

Confirm form

+
+
+
+ This action cannot be undone. + + + + +
+ + Cancel +
+
+
+
+

Filter tips, short

+
+
+
+ +
+
+
+
+ +
+ + +
+
+
+

Filtered HTML

+
    +
  • Web page addresses and e-mail addresses turn into links automatically.
  • +
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h3> <h4> <h5> <p>
  • +
  • Lines and paragraphs break automatically.
  • +
+
+
+

Full HTML

+
    +
  • Web page addresses and e-mail addresses turn into links automatically.
  • +
  • Lines and paragraphs break automatically.
  • +
+
+
+

Plain text

+
    +
  • No HTML tags allowed.
  • +
  • Web page addresses and e-mail addresses turn into links automatically.
  • +
  • Lines and paragraphs break automatically.
  • +
+
+
+
+
+
+

Breadcrumb

+
+ +
+

Pager

+
+

Pages

+
+ +
+
+

Progress bar

+
+
+
+
+
+
57%
+
Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi.
+
+
+

Dropbutton

+
+
+
+
+
+ +
+
+ + + +
+
+
+

Dialog

+
+
+
Cras pharetra, nisl a sagittis feugiat, turpis magna placerat sem, sed euismod erat elit in magna.
+
+
+

Mark, new

+ +

Mark, updated

+ + +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

+ +
+

Comment post forbidden

+
Log in to post comments
+

Comment

+
+
+

+ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

+

Vivamus pretium placerat lorem, in tempor massa convallis sit amet. Aliquam sed quam eget ligula luctus aliquam sed vitae nulla. Aliquam dui dolor, ullamcorper eget rutrum ut, hendrerit ac lorem. Donec magna est, sollicitudin vel ultrices vel, mattis ut odio. Integer vel felis laoreet purus sollicitudin varius sed id ipsum. Suspendisse potenti. Praesent ut justo vitae metus luctus vehicula a et purus. Suspendisse potenti. Sed viverra, quam non hendrerit laoreet, massa odio blandit arcu, ac molestie metus diam eu tortor. Donec erat arcu, ultrices sit amet placerat non, feugiat in arcu. Mauris eros quam, varius eget volutpat vel, tristique sed est. In faucibus feugiat urna sit amet elementum. Integer consequat rhoncus libero, in molestie augue posuere et. Phasellus ac eleifend magna. Proin vulputate dui ac justo pharetra consequat. In vel iaculis ligula.

+
+
+
+

Image style, large

+
+

Image style, medium

+
+

Image style, thumbnail

+
+

Search block form

+
+ +
+

Search, no results

+
+

Your search yielded no results

+
    +
  • Check if your spelling is correct.
  • +
  • Remove quotes around phrases to search for each word individually. bike shed will often show more results than "bike shed".
  • +
  • Consider loosening your query with OR. bike OR shed will often show more results than bike shed.
  • +
+
+

Search, results

+
+

Search results

+
    +
  1. +

    + Ut dignissim convallis eros, viverra luctus lacus consequat ac. +

    +
    +
    lobortis velit sit massa aliquam amet sed pellentesque nam tortor magna sed vulputate lacus vitae eros turpis vulputate sit id convallis ipsum lacus felis sed
    +

    wesruv - 06/21/2015 - 13:28 - erat amet

    +
    +
  2. +
  3. +

    + Curabitur rutrum, diam vel tempor commodo, augue nunc viverra risus, in pellentesque neque justo eget dolor. +

    +
    +
    aliquam magna tortor gravida mattis aliquam viverra viverra et cras elementum et consequat et aliquam cras nisl convallis amet felis viverra magna nam neque mattis
    +

    wesruv - 06/21/2015 - 13:28 - iaculis dignissim

    +
    +
  4. +
  5. +

    + Curabitur rutrum, diam vel tempor commodo, augue nunc viverra risus, in pellentesque neque justo eget dolor. +

    +
    +
    ac felis tempor porta luctus vestibulum urna magna lacinia massa aliquam eget erat vulputate fusce euismod aliquam lorem malesuada consequat nec urna mattis duis ac
    +

    wesruv - 06/21/2015 - 13:28 - ipsum turpis

    +
    +
  6. +
  7. +

    + Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. +

    +
    +
    vitae lacinia tempor venenatis a duis turpis ante sed lorem nam lacus in lacus velit malesuada nam mi ipsum sit iaculis enim massa in venenatis
    +

    wesruv - 06/21/2015 - 13:28 - ac elementum

    +
    +
  8. +
+
+
+
+ +
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/core/themes/seven/fonts/FONT-LICENSE.txt b/core/misc/opensans/FONT-LICENSE.txt old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/FONT-LICENSE.txt rename to core/misc/opensans/FONT-LICENSE.txt diff --git a/core/themes/seven/fonts/OpenSans-Bold-webfont.eot b/core/misc/opensans/OpenSans-Bold-webfont.eot old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Bold-webfont.eot rename to core/misc/opensans/OpenSans-Bold-webfont.eot diff --git a/core/themes/seven/fonts/OpenSans-Bold-webfont.svg b/core/misc/opensans/OpenSans-Bold-webfont.svg old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Bold-webfont.svg rename to core/misc/opensans/OpenSans-Bold-webfont.svg diff --git a/core/themes/seven/fonts/OpenSans-Bold-webfont.ttf b/core/misc/opensans/OpenSans-Bold-webfont.ttf old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Bold-webfont.ttf rename to core/misc/opensans/OpenSans-Bold-webfont.ttf diff --git a/core/themes/seven/fonts/OpenSans-Bold-webfont.woff b/core/misc/opensans/OpenSans-Bold-webfont.woff old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Bold-webfont.woff rename to core/misc/opensans/OpenSans-Bold-webfont.woff diff --git a/core/themes/seven/fonts/OpenSans-BoldItalic-webfont.eot b/core/misc/opensans/OpenSans-BoldItalic-webfont.eot old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-BoldItalic-webfont.eot rename to core/misc/opensans/OpenSans-BoldItalic-webfont.eot diff --git a/core/themes/seven/fonts/OpenSans-BoldItalic-webfont.svg b/core/misc/opensans/OpenSans-BoldItalic-webfont.svg old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-BoldItalic-webfont.svg rename to core/misc/opensans/OpenSans-BoldItalic-webfont.svg diff --git a/core/themes/seven/fonts/OpenSans-BoldItalic-webfont.ttf b/core/misc/opensans/OpenSans-BoldItalic-webfont.ttf old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-BoldItalic-webfont.ttf rename to core/misc/opensans/OpenSans-BoldItalic-webfont.ttf diff --git a/core/themes/seven/fonts/OpenSans-BoldItalic-webfont.woff b/core/misc/opensans/OpenSans-BoldItalic-webfont.woff old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-BoldItalic-webfont.woff rename to core/misc/opensans/OpenSans-BoldItalic-webfont.woff diff --git a/core/themes/seven/fonts/OpenSans-ExtraBold-webfont.eot b/core/misc/opensans/OpenSans-ExtraBold-webfont.eot old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-ExtraBold-webfont.eot rename to core/misc/opensans/OpenSans-ExtraBold-webfont.eot diff --git a/core/themes/seven/fonts/OpenSans-ExtraBold-webfont.svg b/core/misc/opensans/OpenSans-ExtraBold-webfont.svg old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-ExtraBold-webfont.svg rename to core/misc/opensans/OpenSans-ExtraBold-webfont.svg diff --git a/core/themes/seven/fonts/OpenSans-ExtraBold-webfont.ttf b/core/misc/opensans/OpenSans-ExtraBold-webfont.ttf old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-ExtraBold-webfont.ttf rename to core/misc/opensans/OpenSans-ExtraBold-webfont.ttf diff --git a/core/themes/seven/fonts/OpenSans-ExtraBold-webfont.woff b/core/misc/opensans/OpenSans-ExtraBold-webfont.woff old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-ExtraBold-webfont.woff rename to core/misc/opensans/OpenSans-ExtraBold-webfont.woff diff --git a/core/themes/seven/fonts/OpenSans-ExtraBoldItalic-webfont.eot b/core/misc/opensans/OpenSans-ExtraBoldItalic-webfont.eot old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-ExtraBoldItalic-webfont.eot rename to core/misc/opensans/OpenSans-ExtraBoldItalic-webfont.eot diff --git a/core/themes/seven/fonts/OpenSans-ExtraBoldItalic-webfont.svg b/core/misc/opensans/OpenSans-ExtraBoldItalic-webfont.svg old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-ExtraBoldItalic-webfont.svg rename to core/misc/opensans/OpenSans-ExtraBoldItalic-webfont.svg diff --git a/core/themes/seven/fonts/OpenSans-ExtraBoldItalic-webfont.ttf b/core/misc/opensans/OpenSans-ExtraBoldItalic-webfont.ttf old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-ExtraBoldItalic-webfont.ttf rename to core/misc/opensans/OpenSans-ExtraBoldItalic-webfont.ttf diff --git a/core/themes/seven/fonts/OpenSans-ExtraBoldItalic-webfont.woff b/core/misc/opensans/OpenSans-ExtraBoldItalic-webfont.woff old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-ExtraBoldItalic-webfont.woff rename to core/misc/opensans/OpenSans-ExtraBoldItalic-webfont.woff diff --git a/core/themes/seven/fonts/OpenSans-Italic-webfont.eot b/core/misc/opensans/OpenSans-Italic-webfont.eot old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Italic-webfont.eot rename to core/misc/opensans/OpenSans-Italic-webfont.eot diff --git a/core/themes/seven/fonts/OpenSans-Italic-webfont.svg b/core/misc/opensans/OpenSans-Italic-webfont.svg old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Italic-webfont.svg rename to core/misc/opensans/OpenSans-Italic-webfont.svg diff --git a/core/themes/seven/fonts/OpenSans-Italic-webfont.ttf b/core/misc/opensans/OpenSans-Italic-webfont.ttf old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Italic-webfont.ttf rename to core/misc/opensans/OpenSans-Italic-webfont.ttf diff --git a/core/themes/seven/fonts/OpenSans-Italic-webfont.woff b/core/misc/opensans/OpenSans-Italic-webfont.woff old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Italic-webfont.woff rename to core/misc/opensans/OpenSans-Italic-webfont.woff diff --git a/core/themes/seven/fonts/OpenSans-Light-webfont.eot b/core/misc/opensans/OpenSans-Light-webfont.eot old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Light-webfont.eot rename to core/misc/opensans/OpenSans-Light-webfont.eot diff --git a/core/themes/seven/fonts/OpenSans-Light-webfont.svg b/core/misc/opensans/OpenSans-Light-webfont.svg old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Light-webfont.svg rename to core/misc/opensans/OpenSans-Light-webfont.svg diff --git a/core/themes/seven/fonts/OpenSans-Light-webfont.ttf b/core/misc/opensans/OpenSans-Light-webfont.ttf old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Light-webfont.ttf rename to core/misc/opensans/OpenSans-Light-webfont.ttf diff --git a/core/themes/seven/fonts/OpenSans-Light-webfont.woff b/core/misc/opensans/OpenSans-Light-webfont.woff old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Light-webfont.woff rename to core/misc/opensans/OpenSans-Light-webfont.woff diff --git a/core/themes/seven/fonts/OpenSans-LightItalic-webfont.eot b/core/misc/opensans/OpenSans-LightItalic-webfont.eot old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-LightItalic-webfont.eot rename to core/misc/opensans/OpenSans-LightItalic-webfont.eot diff --git a/core/themes/seven/fonts/OpenSans-LightItalic-webfont.svg b/core/misc/opensans/OpenSans-LightItalic-webfont.svg old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-LightItalic-webfont.svg rename to core/misc/opensans/OpenSans-LightItalic-webfont.svg diff --git a/core/themes/seven/fonts/OpenSans-LightItalic-webfont.ttf b/core/misc/opensans/OpenSans-LightItalic-webfont.ttf old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-LightItalic-webfont.ttf rename to core/misc/opensans/OpenSans-LightItalic-webfont.ttf diff --git a/core/themes/seven/fonts/OpenSans-LightItalic-webfont.woff b/core/misc/opensans/OpenSans-LightItalic-webfont.woff old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-LightItalic-webfont.woff rename to core/misc/opensans/OpenSans-LightItalic-webfont.woff diff --git a/core/themes/seven/fonts/OpenSans-Regular-webfont.eot b/core/misc/opensans/OpenSans-Regular-webfont.eot old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Regular-webfont.eot rename to core/misc/opensans/OpenSans-Regular-webfont.eot diff --git a/core/themes/seven/fonts/OpenSans-Regular-webfont.svg b/core/misc/opensans/OpenSans-Regular-webfont.svg old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Regular-webfont.svg rename to core/misc/opensans/OpenSans-Regular-webfont.svg diff --git a/core/themes/seven/fonts/OpenSans-Regular-webfont.ttf b/core/misc/opensans/OpenSans-Regular-webfont.ttf old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Regular-webfont.ttf rename to core/misc/opensans/OpenSans-Regular-webfont.ttf diff --git a/core/themes/seven/fonts/OpenSans-Regular-webfont.woff b/core/misc/opensans/OpenSans-Regular-webfont.woff old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Regular-webfont.woff rename to core/misc/opensans/OpenSans-Regular-webfont.woff diff --git a/core/themes/seven/fonts/OpenSans-Semibold-webfont.eot b/core/misc/opensans/OpenSans-Semibold-webfont.eot old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Semibold-webfont.eot rename to core/misc/opensans/OpenSans-Semibold-webfont.eot diff --git a/core/themes/seven/fonts/OpenSans-Semibold-webfont.svg b/core/misc/opensans/OpenSans-Semibold-webfont.svg old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Semibold-webfont.svg rename to core/misc/opensans/OpenSans-Semibold-webfont.svg diff --git a/core/themes/seven/fonts/OpenSans-Semibold-webfont.ttf b/core/misc/opensans/OpenSans-Semibold-webfont.ttf old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Semibold-webfont.ttf rename to core/misc/opensans/OpenSans-Semibold-webfont.ttf diff --git a/core/themes/seven/fonts/OpenSans-Semibold-webfont.woff b/core/misc/opensans/OpenSans-Semibold-webfont.woff old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-Semibold-webfont.woff rename to core/misc/opensans/OpenSans-Semibold-webfont.woff diff --git a/core/themes/seven/fonts/OpenSans-SemiboldItalic-webfont.eot b/core/misc/opensans/OpenSans-SemiboldItalic-webfont.eot old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-SemiboldItalic-webfont.eot rename to core/misc/opensans/OpenSans-SemiboldItalic-webfont.eot diff --git a/core/themes/seven/fonts/OpenSans-SemiboldItalic-webfont.svg b/core/misc/opensans/OpenSans-SemiboldItalic-webfont.svg old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-SemiboldItalic-webfont.svg rename to core/misc/opensans/OpenSans-SemiboldItalic-webfont.svg diff --git a/core/themes/seven/fonts/OpenSans-SemiboldItalic-webfont.ttf b/core/misc/opensans/OpenSans-SemiboldItalic-webfont.ttf old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-SemiboldItalic-webfont.ttf rename to core/misc/opensans/OpenSans-SemiboldItalic-webfont.ttf diff --git a/core/themes/seven/fonts/OpenSans-SemiboldItalic-webfont.woff b/core/misc/opensans/OpenSans-SemiboldItalic-webfont.woff old mode 100755 new mode 100644 similarity index 100% rename from core/themes/seven/fonts/OpenSans-SemiboldItalic-webfont.woff rename to core/misc/opensans/OpenSans-SemiboldItalic-webfont.woff diff --git a/core/misc/opensans/opensans.css b/core/misc/opensans/opensans.css new file mode 100644 index 0000000..f753896 --- /dev/null +++ b/core/misc/opensans/opensans.css @@ -0,0 +1,48 @@ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: url('OpenSans-Regular-webfont.eot'); /* Old IE */ + src: + url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), + url('OpenSans-Regular-webfont.woff') format('woff'), + url('OpenSans-Regular-webfont.ttf') format('truetype'), + url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); +} + +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 400; + src: url('OpenSans-Italic-webfont.eot'); /* Old IE */ + src: + url('OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), + url('OpenSans-Italic-webfont.woff') format('woff'), + url('OpenSans-Italic-webfont.ttf') format('truetype'), + url('OpenSans-Italic-webfont.svg#open_sanslight') format('svg'); +} + +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + src: url('OpenSans-Bold-webfont.eot'); /* Old IE */ + src: + url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), + url('OpenSans-Bold-webfont.woff') format('woff'), + url('OpenSans-Bold-webfont.ttf') format('truetype'), + url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); +} + +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 700; + src: url('OpenSans-BoldItalic-webfont.eot'); /* Old IE */ + src: + url('OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('OpenSans-BoldItalic-webfont.woff') format('woff'), + url('OpenSans-BoldItalic-webfont.ttf') format('truetype'), + url('OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); +} + diff --git a/core/themes/basis/README.md b/core/themes/basis/README.md new file mode 100644 index 0000000..9a83860 --- /dev/null +++ b/core/themes/basis/README.md @@ -0,0 +1,17 @@ +# Basis Theme +Default theme in Backdrop. + +## Responsive Strategy +Media queries and other responsive code should be mobile first. This means all +media queries should be `min-width`. Breakpoints are set in `em` as it works +better with accessibility technologies than px units do. + +The breakpoints are: +* `(min-width: 25em)` - About `400px` +* `(min-width: 34em)` - About `544px` +* `(min-width: 48em)` - About `768px` +* `(min-width: 62em)` - About `992px` +* `(min-width: 75em)` - About `1200px` + +## CSS documentation +See [README.md in css directory](css/README.md). diff --git a/core/themes/basis/color/color.inc b/core/themes/basis/color/color.inc new file mode 100644 index 0000000..bf38243 --- /dev/null +++ b/core/themes/basis/color/color.inc @@ -0,0 +1,68 @@ + array( + 'header' => t('Header background'), + 'base' => t('Site name background'), + 'slogan' => t('Slogan background'), + 'titleslogan' => t('Site name and slogan'), + 'bg' => t('Main background'), + 'footer' => t('Footer background'), + 'text' => t('Text color'), + 'link' => t('Link color'), + 'hovermenu' => t('Main menu hover background'), + 'primarytabs' => t('Primary Tabs background'), + 'borders' => t('Borders'), + 'formfocusborder' => t('Form element borders when selected'), + 'buttons' => t('Buttons and Breadcrumb'), + ), + // Pre-defined color schemes. + 'schemes' => array( + 'default' => array( + 'title' => t('Basis (default)'), + 'colors' => array( + 'header' => '#20252e', + 'base' => '#0074bd', + 'slogan' => '#000000', + 'titleslogan' => '#fffffe', + 'bg' => '#ffffff', + 'footer' => '#fffeff', + 'text' => '#000001', + 'link' => '#0073bd', + 'hovermenu' => '#114a75', + 'primarytabs' => '#586172', + 'borders' => '#bbbbbb', + 'formfocusborder' => '#43afe4', + 'buttons' => '#dee2ea', + ), + ), + ), + + 'blend_target' => '#ffffff', + + // CSS files (excluding @import) to rewrite with new color scheme. + 'css' => array( + 'css/base.css', + 'css/layout.css', + 'css/component/small-text-components.css', + 'css/component/header.css', + 'css/component/footer.css', + 'css/component/menu-dropdown.css', + 'css/component/menu-toggle.css', + 'css/component/backdrop-form.css', + 'css/component/tabledrag.css', + 'css/component/vertical-tabs.css', + 'css/component/fieldset.css', + 'css/component/dialog.css', + 'css/component/progress.css', + 'css/component/admin-tabs.css', + 'css/component/breadcrumb.css', + 'css/component/pager.css', + 'css/component/hero.css', + 'css/component/teasers.css', + 'css/component/comment.css', + 'css/component/caption.css', + 'css/skin.css', + ), +); diff --git a/core/themes/basis/css/README.md b/core/themes/basis/css/README.md new file mode 100644 index 0000000..27bd3a4 --- /dev/null +++ b/core/themes/basis/css/README.md @@ -0,0 +1,22 @@ +Basis inludes very granular CSS files so that a sub theme can override +only the files it needs to and inherit the rest. + +## CSS Files +The types of CSS files in the theme include: +* Base - Normalizes rendering across browsers. +* Layout - Modifies page layout. +* Component - Specific styles for individual pieces of functionality. +* Skin - The colors, fonts, and aesthetic CSS + +A good way to think about overriding files: + * Start by overriding skin.css with the colors and fonts you'd prefer + * If there are other changes to be made, copy over the files one by one and + override as needed + + ### To override a CSS file: + Declare it in your .info file with the same file name. + The file in Basis with the same name will not be loaded. The file in the active + theme will be used in it's place. + + # CSS Guidelines + [See Backdrop's CSS Standards](https://api.backdropcms.org/css-standards) diff --git a/core/themes/basis/css/base.css b/core/themes/basis/css/base.css new file mode 100644 index 0000000..5585f09 --- /dev/null +++ b/core/themes/basis/css/base.css @@ -0,0 +1,220 @@ +/** + * @file + * Base element styles and normalize overrides. + */ + +* { + box-sizing: border-box; +} + +body { + font-size: 16px; + line-height: 1.6; + color: #000001; +} + +li { + margin: 0 0 0.5em; +} + +figure { + margin: 0; +} + +blockquote { + border-left: 0.25rem solid #bbbbbb; /* LTR */ +} +[dir="rtl"] blockquote { + border-left: none; + border-right: 0.25rem solid #bbbbbb; +} + +blockquote { + margin: 0.5em 0 1em; + padding: 0.8em 1.3em; +} + +blockquote > :first-child { + margin-top: 0; +} + +blockquote > :last-child { + margin-bottom: 0; +} + +pre, +code { + font-family: Consolas, 'Lucida Console', 'Courier New', monospace; + color: #20252e; +} + +code { + display: inline-block; + padding: 0 0.375em; + border: 0.0625rem solid #bbbbbb; + background: #dee2ea; +} + +pre code { + margin: 0; + padding: 0.8em 1.3em; + border: 0; + border-left: 0.25rem solid #bbbbbb; + background: transparent; +} + +code p { + display: inline; + margin: 0; + padding: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: 1.4; + margin: 1rem 0 0.5rem; +} + +h1, +h2 { + font-weight: 200; +} + +h1 { + font-size: 2.25rem; +} + +h2 { + font-size: 1.8125rem; +} + +h3 { + font-size: 1.625rem; + font-weight: 400; +} + +h4 { + font-size: 1.4375rem; +} + +h5 { + font-size: 1.25rem; +} + +h6 { + font-size: 1rem; +} + +h1 a, +h2 a, +h3 a, +h4 a, +h5 a, +h6 a { + text-decoration: none; +} + +img { + max-width: 100%; + height: auto; +} + +iframe { + max-width: 100%; +} + +label { + font-weight: 600; +} + +/** + * Table tags + */ +table { + width: 100%; + margin: 0 0 1em; + border-collapse: collapse; + border-spacing: 0; +} + +caption { + font-size: 1.6rem; + font-weight: 400; +} + +th, +td, +caption { + padding: 0.8em 0.8em; +} + +th, +td { + padding: 0.8em 0.8em; + line-height: 1.3; +} + +td { + border: 0.0625rem solid #dee2ea; +} + +th { + border-right: 0.0625rem solid #bbbbbb; + background: #dee2ea; +} + +th:last-child { + border-right-color: #dee2ea; +} + +table [aria-sort] a:after { + content: ''; + display: inline-block; + width: 0; + height: 0; + border: 0.375em solid transparent; +} + +table [aria-sort="descending"] a:after { + border-top-color: #333333; + border-bottom-width: 0; +} + +table [aria-sort="ascending"] a:after { + border-bottom-color: #333333; + border-top-width: 0; +} + +table [aria-sort] img { + visibility: hidden; +} + +/** + * Fieldset styles + */ +fieldset { + position: relative; + max-width: 100%; + margin: 1em 0; + padding: 3.774em 0 0 0; /* LTR */ + border: 0.125em solid #eaeaea; + min-width: 0; +} + +[dir="rtl"] fieldset { + padding: 2.5em 0 0; +} + +/** + * Clearfix text areas in case of floated contents + */ +.field-type-text-long:after, +.field-type-text-with-summary:after { + content: ''; + display: table; + clear: both; +} diff --git a/core/themes/basis/css/component/admin-tabs.css b/core/themes/basis/css/component/admin-tabs.css new file mode 100644 index 0000000..d83940c --- /dev/null +++ b/core/themes/basis/css/component/admin-tabs.css @@ -0,0 +1,415 @@ +/** + * @file + * Drupal Admin Tabs styles. + */ + +/** + * Primary admin tabs + */ +nav.tabs { + position: relative; + padding: 0.75em 0.5em 0; +} + +nav.tabs:before { + content: ''; + position: absolute; + top: 0; + left: 50%; + z-index: 0; + display: block; + width: 100%; + height: 3.1875em; + transform: translate(-50%, 0); +} + +.tabs:after { + content: ''; + display: table; + clear: both; +} + +ul.primary { + position: relative; + clear: both; + box-sizing: border-box; + border: none; + width: 100%; + float: left; /* LTR */ + margin: 0 0 1em; + padding: 0 0 0 0.5em; + font-size: 0.9375em; + text-transform: uppercase; +} + +[dir="rtl"] ul.primary { + float: right; +} + +ul.primary li { + position: relative; + z-index: 1; + float: left; /* LTR */ + margin: 0; + list-style: none; +} + +[dir="rtl"] ul.primary li { + float: right; +} + +ul.primary li a, +ul.primary li a:visited, +ul.primary li a:hover, +ul.primary li.active a, +.expand-dropdown-tabs-control, +.responsive-tabs-mobile .expand-dropdown-tabs-control:before, +.responsive-tabs-mobile .expand-dropdown-tabs-label { + position: relative; + z-index: 1; + display: block; + padding: 12px 20px; + text-decoration: none; + border: 0; + border-right: 0.125rem solid #586172; /* LTR */ + overflow: visible; + line-height: 1; + font-weight: normal; + transition: + background-color 0.5s ease 0s, + color 0.5s ease 0s; + will-change: background-color, color; +} + +[dir="rtl"] ul.primary li a, +[dir="rtl"] ul.primary li a.active, +[dir="rtl"] ul.primary li a:active, +[dir="rtl"] ul.primary li a:visited, +[dir="rtl"] ul.primary li a:hover, +[dir="rtl"] ul.primary li.active a, +[dir="rtl"] .expand-dropdown-tabs-control, +[dir="rtl"] .responsive-tabs-mobile .expand-dropdown-tabs-control:before, +[dir="rtl"] .responsive-tabs-mobile .expand-dropdown-tabs-label { + border-right: 0; + border-left-width: 0.125rem; + border-left-style: solid; +} + +ul.primary li:first-child a { + -webkit-border-radius: 4px 0 0 0; + -moz-border-radius: 4px 0 0 0; + border-radius: 4px 0 0 0; +} + +.expand-dropdown-tabs-control, +ul.primary li:last-child a { + -webkit-border-radius: 0 4px 0 0; + -moz-border-radius: 0 4px 0 0; + border-radius: 0 4px 0 0; + border-right: 0; +} + +[dir="rtl"] ul.primary li:first-child a { + -webkit-border-radius: 0 4px 0 0; + -moz-border-radius: 0 4px 0 0; + border-radius: 0 4px 0 0; +} + +[dir="rtl"] .expand-dropdown-tabs-control, +[dir="rtl"] ul.primary li:last-child a { + -webkit-border-radius: 4px 0 0 0; + -moz-border-radius: 4px 0 0 0; + border-radius: 4px 0 0 0; + border-right: 0; +} + +@media (max-width: 34em) { + ul.primary li { + float: none; + margin-bottom: 2px; + } + .js ul.primary li { + float: left; + } +} + +/** + * Secondary admin tabs + */ +ul.secondary { + padding: 16px 23px 6px; + margin: 0 -20px 0; + line-height: 1.385; + overflow: hidden; + clear: both; + border: 0; +} + +ul.secondary li { + display: inline-block; + margin: 0 5px 10px; +} + +ul.secondary li a { + display: block; + border: 2px solid #e3e2e2; + text-decoration: none; + transition: + background-color 0.6s ease, + color 0.6s ease; +} + +ul.secondary li a, +ul.secondary li a:hover, +ul.secondary li.active a, +ul.secondary li.active a.active { + padding: .36em 1em; + -webkit-border-radius: 1.45em; + -moz-border-radius: 1.45em; + border-radius: 1.45em; +} + +/** + * Responsive tabs + */ +.responsive-tabs-processed ul.primary { + height: 2.75em; + overflow: hidden; +} + +.responsive-tabs-processed ul.primary li { + margin-bottom: 0; +} + +.responsive-tabs-processed .duplicated-tab, +.responsive-tabs-mobile ul.primary { + /* Hidden elements, hiding from sighted users only */ + visibility: hidden; + height: 0; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); +} + +.expand-dropdown-tabs.responsive-tabs-mobile ul.primary { + /* Reverse hidden elements styles */ + visibility: visible; + height: auto; + overflow: visible; + clip: auto; +} + +.expand-dropdown-tabs .responsive-tabs-dropdown li { + width: 100%; + margin: 0; +} + +.expand-dropdown-tabs ul.responsive-tabs-dropdown li a, +.expand-dropdown-tabs ul.responsive-tabs-dropdown li a:hover { + border: 0; + border-top: 2px solid #ffffff; + position: relative; +} + +.expand-dropdown-tabs ul.responsive-tabs-dropdown li:first-child a:before { + margin-top: -2px; + height: calc(100% + 2px); +} + +.responsive-tabs-before.expand-dropdown-tabs ul.responsive-tabs-dropdown li a { + padding-right: 72px; +} + +.responsive-tabs-after.expand-dropdown-tabs ul.responsive-tabs-dropdown li a { + padding-left: 72px; +} + +.expand-dropdown-tabs .responsive-tabs-dropdown a:before { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 50px; + height: 100%; +} + +.responsive-tabs-after.expand-dropdown-tabs .responsive-tabs-dropdown a:before { + right: auto; + left: 0; + width: 48px; +} + +.expand-dropdown-tabs { + position: relative; +} + +ul.primary.responsive-tabs-dropdown { + display: none; + height: auto; + padding: 0; + border-radius: 0 0 4px 4px; + overflow: hidden; +} + +.expand-dropdown-tabs .primary.responsive-tabs-dropdown { + display: block; + position: absolute; +} + +ul.primary.responsive-tabs-dropdown li:first-child a, +ul.primary.responsive-tabs-dropdown li:last-child a { + border-radius: 0; +} + +.expand-dropdown-tabs .primary.responsive-tabs-dropdown:after { + content: ''; + display: table; +} + +.expand-dropdown-tabs-control { + position: absolute; + top: 0.8em; + left: 0; + box-sizing: border-box; + width: 50px; + height: auto; + padding-left: 0; + padding-right: 0; + font-size: 0.9375em; + text-align: center; + visibility: visible; + clip: auto; + cursor: pointer; +} + +.expand-dropdown-tabs-control:before { + content: '...'; + font-weight: bold; +} + +.responsive-tabs-after .expand-dropdown-tabs-control { + -webkit-border-radius: 4px 0 0 0; + -moz-border-radius: 4px 0 0 0; + border-radius: 4px 0 0 0; + border-left: 2px solid #bcc2cc; +} + +.desktop-primary-tabs .expand-dropdown-tabs-control { + visibility: hidden; + height: 0; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); +} + +.expand-dropdown-tabs-label { + display: none; + box-sizing: border-box; + text-transform: uppercase; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.expand-dropdown-tabs-label .responsive-tabs-link-text-wrapper { + display: block; + width: calc(100% - 3em + 10px); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.responsive-tabs-mobile .expand-dropdown-tabs-label { + display: block; + text-align: left; +} + +.responsive-tabs-mobile.expand-dropdown-tabs .expand-dropdown-tabs-label, +.responsive-tabs-mobile.expand-dropdown-tabs:hover .expand-dropdown-tabs-label { + background: #ffffff; +} + +.responsive-tabs-mobile .expand-dropdown-tabs-control { + position: relative; + width: 100%; + height: 100%; + padding: 0; + border: 0; + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + overflow: hidden; + border-radius: 4px 4px 0 0; +} + +.responsive-tabs-mobile .expand-dropdown-tabs-control.js-active { + overflow: visible; +} + +.responsive-tabs-mobile .expand-dropdown-tabs-control:before { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 3em; + height: 100%; + box-sizing: border-box; + border-left: 2px solid transparent; +} + +.responsive-tabs-mobile .expand-dropdown-tabs-control:after { + content: ''; + position: absolute; + top: .85em; + right: 1.3em; + width: 0; + height: 0; + border: 0.4em solid transparent; + border-left: 0; +} + +.expand-dropdown-tabs .expand-dropdown-tabs-control:after { + top: 1.08em; + right: 1em; + border: 0.4em solid transparent; + border-bottom: 0; +} + +.responsive-tabs-mobile ul.primary, +.responsive-tabs-mobile.expand-dropdown-tabs ul.primary { + position: absolute; + width: 100%; + margin: 0; + top: 2.6em; +} + +.responsive-tabs-mobile ul.primary, +.expand-dropdown-tabs.responsive-tabs-mobile ul.primary { + overflow: hidden; + -webkit-border-radius: 0 0 4px 4px; + border-radius: 4px; +} + +.responsive-tabs-mobile ul.primary li { + position: relative; + float: none; + border-right: 0; + border-bottom: 2px solid #ffffff; +} + +.responsive-tabs-mobile ul.primary a:after { + content: ''; + position: absolute; + top: 0; + right: 0; + display: block; + width: 3em; + height: 100%; +} + +.responsive-tabs-mobile ul.primary li:last-child { + border-bottom: 0; +} + +.responsive-tabs-mobile ul.primary li a { + -webkit-border-radius: 0; + border-radius: 0; +} diff --git a/core/themes/basis/css/component/backdrop-form.css b/core/themes/basis/css/component/backdrop-form.css new file mode 100644 index 0000000..0f23901 --- /dev/null +++ b/core/themes/basis/css/component/backdrop-form.css @@ -0,0 +1,326 @@ +/** + * @file + * Backdrop form styling. + */ +.form-item, +.field-name-comment-body { + padding: 0; + margin: 0 0 1.5em; +} + +.form-type-email label, +.form-type-file label, +.form-type-password label, +.form-type-select label, +.form-type-textarea label, +.form-type-textfield label { + display: block; + margin: 0 0 0.25em; +} + +abbr.form-required, +abbr.tabledrag-changed, +abbr.ajax-changed { + text-decoration: none; +} + +.form-required { + color: #ff0000; +} + +.form-item-radios label, +.form-item-checkboxes label { + display: block; + margin: 0 0 0.8em; +} + +.form-item-radio label, +.form-radios label, +.form-item-checkbox label, +.form-checkboxes label { + display: inline-block; + font-weight: 400; + margin: 0; +} + +.form-radios .form-item:last-child, +.form-checkboxes .form-item:last-child { + margin: 0; +} + +.filter-wrapper .form-item, +.teaser-checkbox .form-item, +.form-item .form-item { + padding: 0.3125em 0; + margin: 0; + border: 0; +} + +.form-type-checkbox { + padding: 0; +} + +.text-format-wrapper .form-item { + padding-bottom: 0; +} + +.form-item label { + margin: 0 0 0.625em; +} + +.field-label label { + margin: 0; + padding: 0; +} + +.form-item input.form-radio, +.form-item input.form-checkbox { + vertical-align: middle; + margin-right: 0.3125em; +} + +td.checkbox .form-item input { + margin: 0; +} + +/* Filter */ +.filter-wrapper { + border-top: 0; + padding: 0 0.125em; +} + +.filter-wrapper .fieldset-wrapper { + padding-top: 3.774em; +} + +.filter-wrapper .form-item, +.filter-wrapper .filter-guidelines, +.filter-wrapper .filter-help { + font-size: 0.923em; + padding: 0.125em 0 0 0; +} + +.filter-wrapper .form-item label { + font-weight: normal; +} + +.form-item .description, +.password-strength, +.password-match { + border-left: 0.25em solid #bbbbbb; + margin: 0.6875em 0 2.5em; + padding: 0.5em 0.8em; +} + +.form-item-radios .description, +.form-item-checkboxes .description { + margin-top: 0.375em; +} + +.resizable-textarea + .description, +.form-item-date .description, +.form-item-select .description { + margin-top: 0.875em; +} + +.field-suffix { + display: block; + padding: 0.5em 0 0; +} + +.field-suffix .machine-name-value { + display: inline-block; + margin: 0 0.5em; + padding: 0.375em; + border: 0.0625rem solid #dee2ea; + font-family: Consolas, 'Lucida Console', 'Courier New', monospace; +} + +.password-strength { + padding-top: 0.375em; +} + +ul.tips { + margin: 0.25em 0.25em 0; + padding: 0 1em; +} + +input.form-submit, +button.form-submit, +.button { + display: inline-block; + text-align: center; + text-transform: uppercase; + letter-spacing: 0.025em; + line-height: 2.875; + border: 0; + padding: 0 1.5625em; + margin-bottom: 1em; + margin-right: 1em; /* LTR */ + -webkit-transition: + background-color 0.6s ease 0s, + color 0.6s ease 0s; + transition: + background-color 0.6s ease 0s, + color 0.6s ease 0s; +} + +[dir="rtl"] input.form-submit, +[dir="rtl"] .button { + margin-left: 1em; + margin-right: 0; +} + +.form-managed-file input.form-submit { + margin-left: 0.5em; /* LTR */ + position: relative; + top: 0.0625em; +} + +[dir="rtl"] .form-managed-file input.form-submit { + margin-left: 0; + margin-right: 0.5em; +} + +input.form-autocomplete, +input.form-text, +input.form-tel, +input.form-email, +input.form-url, +input.form-color, +input.form-number, +input.form-search, +input.form-file, +textarea.form-textarea { + box-sizing: border-box; + max-width: 100%; + padding: 0.625em; + border: 0.125rem solid #d0d0d0; + font-weight: 400; + -webkit-transition: border-color 0.25s ease-in-out; + transition: border-color 0.25s ease-in-out; + will-change: border-color; +} + +input.form-text, +input.form-email, +input.form-url, +input.form-search, +textarea.form-textarea { + max-width: 100%; +} + +select.form-select { + box-sizing: border-box; + padding: 0.625em; + border: 0.125rem solid #d0d0d0; + font-weight: 400; + will-change: border-color; +} + +/* De-emphasize the text format */ +select.filter-list { + padding: 0.125em 0.5em; + margin-left: 0.3125em; /* LTR */ +} + +[dir="rtl"] select.filter-list { + margin-left: 0; + margin-right: 0.3125em; +} + +input.form-text:focus, +input.form-tel:focus, +input.form-email:focus, +input.form-url:focus, +input.form-color:focus, +input.form-number:focus, +input.form-search:focus, +input.form-file:focus, +textarea.form-textarea:focus { + outline: 0; +} + +#autocomplete { + border: 0.125rem solid #d0d0d0; + border-top: 0; + box-sizing: content-box; +} +#autocomplete ul { + margin: 0; +} +#autocomplete li { + padding: 0.2em 0.625em; + margin: 0; +} +#autocomplete li.selected { + background: #008be2; + color: #ffffff; +} + +ul.action-links { + margin: 1em 0; + padding: 0 1.25em 0; /* LTR */ + list-style-type: none; + overflow: hidden; +} + +ul.action-links li { + float: left; /* LTR */ + margin: 0 1em 0 0; /* LTR */ +} + +[dir="rtl"] ul.action-links li { + float: right; + margin: 0 0 0 1em; +} + +ul.action-links a { + position: relative; + padding-left: 1.125em; /* LTR */ + line-height: 1.875; +} + +[dir="rtl"] ul.action-links a { + padding-left: 0; + padding-right: 1.125em; +} + +ul.action-links a:before, +ul.action-links a:after { + content: ''; + display: block; + position: absolute; + background: #0074bd; +} + +ul.action-links a:before { + top: 0.375em; + left: 0.25em; + width: 0.125em; + height: 0.625em; +} + +ul.action-links a:after { + top: 0.625em; + left: 0; + width: 0.625em; + height: 0.125em; +} + +[dir="rtl"] ul.action-links a:before { + left: auto; + right: 0.25em; +} + +[dir="rtl"] ul.action-links a:after { + left: auto; + right: 0; +} + +/** + * Dropbutton overrides + */ +.dropbutton li { + margin: 0; +} diff --git a/core/themes/basis/css/component/breadcrumb.css b/core/themes/basis/css/component/breadcrumb.css new file mode 100644 index 0000000..dffb9a2 --- /dev/null +++ b/core/themes/basis/css/component/breadcrumb.css @@ -0,0 +1,67 @@ +/** + * @file + * Breadcrumb styles. + */ +.breadcrumb { + overflow: hidden; + margin: 1em 0; +} + +.breadcrumb ol, +.breadcrumb li { + list-style: none; + margin: 0; + padding: 0; +} + +.breadcrumb li { + position: relative; + padding: 0 1em; + float: left; /* LTR */ +} + +[dir="rtl"] .breadcrumb li { + float: right; +} + +.breadcrumb li a, +.breadcrumb li span { + position: relative; + z-index: 1; + display: block; + margin: 0 -1em; + padding: 0.5em 1.4em; + text-decoration: none; +} + +.breadcrumb li:after { + content: ''; + position: absolute; + top: 50%; + right: 0; /* LTR */ + width: 2em; + height: 2em; + border: 0.0625rem solid #20252e; + border-width: 0.125rem 0.125rem 0 0; + -webkit-transform: + translate(0, -50%) + rotate(45deg); /* LTR */ + transform: + translate(0, -50%) + rotate(45deg); /* LTR */ +} + +[dir="rtl"] .breadcrumb li:after { + left: 0; + right: auto; + -webkit-transform: + translate(0, -50%) + rotate(225deg); + transform: + translate(0, -50%) + rotate(225deg); +} + +.breadcrumb li:last-child:after { + display: none; +} diff --git a/core/themes/basis/css/component/caption.css b/core/themes/basis/css/component/caption.css new file mode 100644 index 0000000..a7cb703 --- /dev/null +++ b/core/themes/basis/css/component/caption.css @@ -0,0 +1,39 @@ +/** + * @file + * Caption styles. + * + * This file is typically added both to the front-end and to the CKEditor iframe + * when editing content. See basis.info "ckeditor_stylesheets" section. + */ +.caption { + display: table; + max-width: 100%; +} +.caption > * { + display: block; + max-width: 100%; + border: none; +} +.caption > figcaption { + display: table-caption; + caption-side: bottom; + max-width: none; + margin: 0.5em 0 1em; + padding: 0.3em 0.5em; + border: none; + border-left: 0.25rem solid #bbbbbb; + background: none; +} +[dir="rtl"] .caption > figcaption { + border-left: none; + border-right: 0.25rem solid #bbbbbb; +} + +img.align-left { + margin-right: 2em; + margin-bottom: 1em; +} +img.align-right { + margin-left: 2em; + margin-bottom: 1em; +} diff --git a/core/themes/basis/css/component/comment.css b/core/themes/basis/css/component/comment.css new file mode 100644 index 0000000..a587250 --- /dev/null +++ b/core/themes/basis/css/component/comment.css @@ -0,0 +1,165 @@ +.comment { + position: relative; + display: block; + padding: 0; + margin: 0 0 1.5em; +} + +.comments .indented { + position: relative; + padding-left: 1.25em; + margin-top: -1.5em; +} + +.comments .indented:before, +.comments .indented:after { + content: ''; + position: absolute; + display: block; + border: 0.125em solid transparent; +} + +.comments .indented:before { + top: -1em; + left: 0; + width: 0.5em; + height: 1.5em; + border-left-color: #dee2ea; + border-bottom-color: #dee2ea; +} + +.comments .indented:after { + content: ''; + position: absolute; + top: 0.6875em; + left: 0.4375em; + width: 0.25em; + height: 0.25em; + border-top-color: #dee2ea; + border-right-color: #dee2ea; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + transform-origin: right top; +} + +[dir="rtl"] .comment { + padding: 0; +} + +.comment-header { + position: relative; +} + +.comment-header:before { + content: ""; + position: absolute; + top: 100%; + left: 1.625em; + width: 0.875em; + height: 0.875em; + display: block; + border: 0.125em solid transparent; + border-bottom-color: #dee2ea; + border-left-color: #dee2ea; + -webkit-transform: rotate(-45deg) translate(0, -0.75em); + transform: rotate(-45deg) translate(0, -0.75em); + background: #ffffff; + pointer-events: none; + z-index: 0; +} + +[dir="rtl"] .comment:before { + right: 1.625em; + left: auto; +} + +.comment .attribution { + position: relative; + z-index: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0 0 0.5em; +} + +[dir="rtl"] .comment .attribution { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} + +.comment .attribution img { + display: block; +} + +.comment .user-picture { + width: 3.25em; + padding: 0 0.75em 0 0; +} + +.commenter-name { + margin: 0; +} + +.commenter-name a { + text-decoration: none; +} + +.commenter-name a:hover { + text-decoration: underline; +} + +.comment .comment-text { + border: 0.125em solid #dee2ea; +} + +.comment-title { + padding: 1em 1.25em 0.25em; +} + +.comment-title h3 { + margin: 0; + padding: 0; + font-size: 1.125em; +} + +.comment-time { + padding: 0; + font-size: 0.875em; +} + +.comment .content { + padding: 0 1.375em; +} + +.comment-footer { + float: right; + margin: 0 -0.125em 0 0; + padding: 0.5em 0.5em; + background: #dee2ea; +} + +.comment-footer .links.inline li { + margin: 0; + padding: 0 0.5em; /* Ensure spacing on login links */ +} + +.comment-footer .links.inline li:after { + display: none; +} + +.comment-footer .links.inline a{ + display: inline-block; + margin: 0 -0.5em; /* Prevent spacing on log in message */ + padding: 0 0.5em; +} + +[dir="rtl"] .comment-footer { + float: left; +} diff --git a/core/themes/basis/css/component/dialog.css b/core/themes/basis/css/component/dialog.css new file mode 100644 index 0000000..f3e1d21 --- /dev/null +++ b/core/themes/basis/css/component/dialog.css @@ -0,0 +1,88 @@ +/** + * @file + * jQuery UI dialog styles. + */ +.ui-widget { + font-size: inherit; + font-family: inherit; +} + +.ui-dialog { + border: 0.125em solid #20252e; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.ui-corner-all { + border-radius: 0; +} + +.ui-dialog .ui-dialog-titlebar { + cursor: default; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-dialog .ui-dialog-titlebar-close { + top: 0; + top: calc(-0.125em); + right: 0; + right: calc(-0.125em); + width: 2.5em; + height: 100%; + height: calc(100% + 0.125em); + margin: 0; + border: 0; + outline: none; +} + +.ui-dialog .ui-dialog-titlebar-close .ui-icon { + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 1em; + height: 1em; + margin: 0; + background: transparent; +} + +/** + * Close X CSS art + */ +.ui-dialog .ui-dialog-titlebar-close .ui-icon:before, +.ui-dialog .ui-dialog-titlebar-close .ui-icon:after { + content: ''; + position: absolute; + top: 0; + left: 0; + display: block; + width: 0.125em; + height: 0.875em; +} + +.ui-dialog .ui-dialog-titlebar-close .ui-icon:before { + -webkit-transform: + translate(0.5em, 0.125em) + rotate(45deg); + transform: + translate(0.5em, 0.125em) + rotate(45deg); +} + +.ui-dialog .ui-dialog-titlebar-close .ui-icon:after { + -webkit-transform: + translate(0.5em, 0.125em) + rotate(-45deg); + transform: + translate(0.5em, 0.125em) + rotate(-45deg); +} + +.ui-button-icon-only .ui-button-text, +.ui-button-icons-only .ui-button-text { + padding: 0; +} diff --git a/core/themes/basis/css/component/fieldset.css b/core/themes/basis/css/component/fieldset.css new file mode 100644 index 0000000..de45bb7 --- /dev/null +++ b/core/themes/basis/css/component/fieldset.css @@ -0,0 +1,142 @@ +/** + * @file + * Fieldsets styling. + * + * Fieldset legends are displayed like containers in Seven. However, several + * browsers do not support styling of LEGEND elements. To achieve the desired + * styling: + * - All fieldsets use 'position: relative'. + * - All legend labels are wrapped in a single span.fieldset-legend that uses + * 'position: absolute', which means that the LEGEND element itself is not + * rendered by browsers. + * - Due to using 'position: absolute', collapsed fieldsets do not have a + * height; the fieldset requires a 'padding-top' to make the absolute + * positioned .fieldset-legend appear as though it would have a height. + * - Various browsers are positioning the legend differently if there is a + * 'padding-left'/'padding-right' applied on a fieldset and inherit the + * positioning even to absolute positioned elements within; we therefore have + * to apply all padding to the inner .fieldset-wrapper instead. + */ + +fieldset .fieldset-legend { + position: absolute; + left: 0; /* LTR */ + top: 0; + width: 100%; + padding: 0.5em 0.78947em; /* LTR */ + text-transform: uppercase; +} +[dir="rtl"] fieldset .fieldset-legend { + right: 0; + padding-right: 0.9375em; + padding-left: 0; +} + +.fieldset-description { + margin: 0 0 0.75em; + padding: 0.75em 0.1875em; +} + +.collapsible > .fieldset-wrapper > .fieldset-description { + margin: 0 0 0.75em; + padding: 0.75em 1.5625em; +} + +/** + * Collapsible Fieldsets + */ +.js fieldset.collapsible { + position: relative; + backface-visibility: hidden; +} + +fieldset .fieldset-wrapper { + padding: 0 13px 13px 15px; /* LTR */ +} +[dir="rtl"] fieldset .fieldset-wrapper { + padding: 0 15px 13px 13px; +} + +.js fieldset.collapsible .fieldset-title { + position: relative; + z-index: 1; + display: block; + width: 100%; + padding: 0.3em 0.3em 0.3em 1.8em; + margin: 0 -0.5em; + border-radius: 4px; + background: transparent; + text-decoration: none; +} +.js[dir="rtl"] fieldset.collapsible .fieldset-title { + padding: 0.3em 1.8em 0.3em 0.3em; +} + +.js fieldset.collapsible .fieldset-legend a:before { + content: ""; + position: absolute; + left: 0.6em; + top: 0.8em; + width: 0; + height: 0; + border: .32em solid transparent; + border-top-color: #000000; + border-bottom: 0; + -webkit-transform: translate(0, 0.125em); + transform: translate(0, 0.125em); + -webkit-transition: transform 0.25s ease-out; + -webkit-transition: -webkit-transform 0.25s ease-out; + transition: -webkit-transform 0.25s ease-out; + transition: transform 0.25s ease-out; + transition: + transform 0.25s ease-out, + -webkit-transform 0.25s ease-out; +} +.js[dir="rtl"] fieldset.collapsible .fieldset-legend a:before { + right: 0.6em; + left: auto; + -webkit-transform: translate(0, 0.125em); + transform: translate(0, 0.125em); +} + +.fieldset-legend span.summary { + position: absolute; + top: .4em; + right: 2em; + display: none; +} + +.fieldset-legend span.summary:not(:empty):before { + content: '('; +} +.fieldset-legend span.summary:not(:empty):after { + content: ')'; +} + +@media (min-width: 34em) { + .fieldset-legend span.summary { + display: block; + } +} + +/* Collapsed state styles */ +.js fieldset.collapsed { + padding: 3.774em 0 0!important; +} + +.js fieldset.collapsed .fieldset-legend a:before { + -webkit-transform: + translate(0, 0.125em) + rotate(-90deg); + transform: + translate(0, 0.125em) + rotate(-90deg); +} +.js[dir="rtl"] fieldset.collapsed .fieldset-legend a:before { + -webkit-transform: + translate(0, 0.125em) + rotate(90deg); + transform: + translate(0, 0.125em) + rotate(90deg); +} diff --git a/core/themes/basis/css/component/footer.css b/core/themes/basis/css/component/footer.css new file mode 100644 index 0000000..a5fa19b --- /dev/null +++ b/core/themes/basis/css/component/footer.css @@ -0,0 +1,84 @@ +/** + * @file + * Site Footer styles. + */ +.l-footer { + margin: 1.5rem 0 0; +} + +.l-footer a { + text-decoration: none; +} + +.l-footer a:hover, +.l-footer a:focus { + text-decoration: underline; +} + +/** + * Footer menu styles + */ +.l-footer .menu, +.l-footer .menu li { + list-style: none; + margin: 0; + padding: 0; +} + +.l-footer .menu:after { + /* Clearfix menus */ + content: ''; + display: table; + clear: both; +} + +.l-footer .menu > li { + float: left; +} + +[dir="rtl"] .l-footer .menu > li { + float: right; +} + +.l-footer .menu a { + display: block; + padding: 0 1rem; +} + +/** + * Powered by Backdrop Block + */ +.l-footer .block-system-powered-by a { + text-decoration: none; +} + +.l-footer .block-system-powered-by a:hover { + text-decoration: underline; +} + +.drop-lounging { + position: relative; + width: 7em; +} + +.drop-lounging:before { + content: ''; + position: absolute; + top: -0.75em; + left: 50%; + left: calc(50% + 1.25em); + display: none; /* Default hidden unless certain criteria are met */ + box-sizing: content-box; + width: 100%; + height: 0; + margin: 0; + padding: 0 0 52%; + -webkit-transform: translate(-50%, -82%); + transform: translate(-50%, -82%); + background: url("../images/drop-lounging.png") no-repeat; + background-size: 100% auto; +} + +.l-footer .block:first-child .drop-lounging:before { + display: block; +} diff --git a/core/themes/basis/css/component/header.css b/core/themes/basis/css/component/header.css new file mode 100644 index 0000000..738fd8b --- /dev/null +++ b/core/themes/basis/css/component/header.css @@ -0,0 +1,194 @@ +/** + * @file + * Header region styling. + */ +@media (min-width: 34em) { + .l-header-inner { + min-height: 6.125rem; + } +} + +.l-header a { + -webkit-transition: background-color 0.25s ease-out; + transition: background-color 0.25s ease-out; +} + +.header-identity-wrapper:after { + /* Clearfix */ + content: ''; + display: table; + clear: both; +} +.header-identity-wrapper strong { + font-weight: inherit; +} + +@media (min-width: 48em) { + .header-identity-wrapper { + display: block; + float: left; + } + + [dir="rtl"] .header-identity-wrapper { + float: right; + } +} + +.header-site-name-wrapper { + margin: 0; + padding: 0; + overflow-wrap: break-word; +} + +@media (min-width: 34em) { + .header-site-name-wrapper { + float: left; + } + + [dir="rtl"] .header-site-name-wrapper { + float: right; + } +} + +.header-logo-wrapper { + display: block; + float: left; +} + +[dir="rtl"] .header-logo-wrapper { + float: right; +} + +/* Makes sure images that are tall logos don't pop out of container */ +.header-logo-tall img { + width: auto; + height: 100%; +} + +.header-site-name-link { + display: block; + margin: 0; +} + +.header-site-slogan { + margin: 0; +} + +.l-header .block-system-header .block-content:after { + /* Clearfix header block */ + content: ""; + display: table; + clear: both; +} + +/** + * Menus in header area + */ +.header-menu { + clear: both; +} + +.header-menu:after { + /* Clearfix header menu */ + content: ""; + display: table; + clear: both; +} + +.header-menu > .links { + /* Center menu at mobile */ + display: inline-block; +} + +@media (min-width: 48em) { + .header-menu { + float: right; + clear: none; + } + + [dir="rtl"] .header-menu { + float: left; + clear: none; + } +} + +@media (min-width: 34em) { + .l-header .block-system-main-menu { + clear: both; + } +} + +.l-header .menu, +.l-header .menu li { + list-style: none; + margin: 0; + padding: 0; +} + +.l-header .menu:after { + /* Clearfix menus */ + content: ''; + display: table; + clear: both; +} + +.l-header .menu > li, +.header-menu li { + float: left; +} + +[dir="rtl"] .l-header .menu > li, +[dir="rtl"] .header-menu li { + float: right; +} + +.l-header .menu a, +.header-menu a { + display: block; + padding: 1rem 1.25rem; +} +.l-header .menu-toggle-button { + margin-left: .9375rem; + padding: .5rem 0; +} +.l-header .menu-toggle-button-text { + color: #bbbbbb; +} + +@media (min-width: 34em) { + /* Specific selector to avoid contextual links */ + .l-header .menu a, + .header-menu a { + padding: 1rem 1.25rem; + } +} + +@media (min-width: 48em) { + .header-menu a { + /* Attempt at lining up baseline of site name and header menu */ + padding-top: 1.9375rem; + padding-bottom: 1.0625rem; + line-height: 1.25rem; + } +} + +@media (min-width: 62em) { + .header-menu a { + /* Attempt at lining up baseline of site name and header menu */ + padding-top: 2rem; + padding-bottom: 1rem; + line-height: 1.25rem; + } +} + +.header-menu .links, +.header-menu li { + margin: 0; + padding: 0; +} + +.header-menu .links li:before, +.header-menu .links li:after { + /* Hides arrows intented for action links in body */ + display: none; +} diff --git a/core/themes/basis/css/component/hero.css b/core/themes/basis/css/component/hero.css new file mode 100644 index 0000000..f5a24bc --- /dev/null +++ b/core/themes/basis/css/component/hero.css @@ -0,0 +1,99 @@ +/** + * @file + * Hero component styling. + */ +.block-hero { + /* Positioning, width and transform is to make hero full width on smaller screens */ + position: relative; + left: 50%; + width: 100vw; + min-height: 30vh; + padding: 1.5rem 2rem 2rem; + margin: 0 0 2rem; + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); + -webkit-transition: min-height 0.25s; + transition: min-height 0.25s; + will-change: min-height; + background-size: cover; +} + +.block-hero .block-title, +.block-hero .block-content { + max-width: 100%; + overflow-wrap: break-word; +} + +.l-top .block-hero { + margin-top: -2rem;/* Negative top margin collapses spacing under header */ +} + +.container .block-hero { + margin-top: 0; /* If hero is in a container don't collapse top spacing */ +} + +@media (min-width: 25em) { + .block-hero { + padding: 2rem 3rem 3rem; + font-size: 1.3em; + } +} + +@media (min-width: 34em) { + .block-hero { + font-size: 1.5em; + } +} + +@media (min-width: 62em) { + .block-hero { + /* Remove full width styles on larger screens */ + left: auto; + width: 100%; + -webkit-transform: none; + transform: none; + } +} + +.block-hero-no-image { + background: #0074bd url(../../images/texture.png) repeat center center; + background-blend-mode: luminosity; +} + +.no-background-blend-mode .block-hero-no-image * { + position: relative; + z-index: 1; +} + +.no-background-blend-mode .block-hero-no-image { + /* Fixes IE bug where text is behind pseudo-element */ + position: relative; + z-index: 1; +} + +.no-background-blend-mode .block-hero-no-image:before { + content: ''; + position: absolute; + top: 0; + left: 0; + display: block; + width: 100%; + height: 100%; + background: #009dff; + opacity: 0.5; + z-index: 0; +} + +.block-hero .block-title { + margin: 0 0 0.2em; + padding: 0; + font-weight: 200; + line-height: 1.2; + font-size: 2.3em; +} + +@media (min-width: 34em) { + .block-hero .block-title { + font-size: 2.625em; + } +} diff --git a/core/themes/basis/css/component/menu-dropdown.css b/core/themes/basis/css/component/menu-dropdown.css new file mode 100644 index 0000000..6e81fb0 --- /dev/null +++ b/core/themes/basis/css/component/menu-dropdown.css @@ -0,0 +1,227 @@ +/** + * @file + * Responsive menu styles + */ +.menu-dropdown { + position: relative; +} + +.js .menu-dropdown li, +.js .menu-dropdown a.has-submenu.highlighted { + float: none; + border-bottom: 1px solid #bbbbbb; +} + +.js .menu-dropdown li.last { + border-bottom: 0; +} +.js .menu-dropdown > li.last { + padding-bottom: 1px; +} + +.js .menu-dropdown ul li a { + padding-left: 3em; +} + +.js .menu-dropdown ul li li a { + padding-left: 5em; +} + +.js .menu-dropdown li.has-children > a { + /* make room for the toggle button (sub indicator) */ + padding-right: 3.625rem; +} + +.menu-dropdown a span.sub-arrow { + position: absolute; + top: 1rem; + margin-top: -1.0625rem; + left: auto; + right: 0; + width: 3.5rem; + height: 3.5rem; + overflow: hidden; + border: 1px solid #bbbbbb; + background: #333333; + font: normal 1.384615rem/2.125rem monospace; + text-align: center; + text-shadow: none; +} + +.menu-dropdown span.sub-arrow:before { + display: block; + content: '+'; + margin-top: 0.5625rem; +} + +.menu-dropdown a.highlighted span.sub-arrow:before { + display: block; + content: '–'; +} + +@media (min-width: 34em) { + .menu-dropdown a span.sub-arrow { + width: 3.625rem; + height: 3.625rem; + } +} + +@media (min-width: 48em) { + /** + * Switch to desktop layout + * These transform the menu tree from + * collapsible to desktop (navbar + dropdowns) + */ + + /* Begin section that shouldn't be edited */ + .js .menu-dropdown ul { + position: absolute; + width: 12rem; + top: 1em; + } + + .js .menu-dropdown li, + .js .menu-dropdown a.has-submenu.highlighted { + border-bottom: none; + } + + .js .menu-dropdown ul li a, + .js .menu-dropdown ul li li a{ + padding-left: 1.25rem; + } + + .js .menu-dropdown > li { + float: left; + } + + [dir="rtl"] .menu-dropdown li { + float: right; + } + + .menu-dropdown ul li, + [dir="rtl"] .menu-dropdown ul li { + float: none; + } + + .menu-dropdown a { + white-space: nowrap; + } + + .menu-dropdown ul a { + white-space: normal; + } + /* END Rules that should not be edited */ + + .js .menu-dropdown ul ul { + border-left: 3px solid #20252e; + } + + .js .menu-dropdown > li { + border-bottom: 0; + } + .js .menu-dropdown > li.last { + padding-bottom: 0; + } + + .js .menu-dropdown li.has-children > a { + padding-right: 1.75rem; + } + + .menu-dropdown a span.sub-arrow { + top: 50%; + margin-top: -0.125rem; + right: 0.75rem; + width: 0; + height: 0; + border-width: 0.25rem; + border-style: solid dashed dashed dashed; + border-color: #ffffff transparent transparent transparent; + background: transparent; + } + + .menu-dropdown a.highlighted span.sub-arrow:before { + display: none; + } + + .menu-dropdown li { + border-top: 0; + } + + .menu-dropdown ul { + padding: 0.3125rem 0; + } + + .menu-dropdown ul .has-children > a { + padding-right: 1.25rem; + } + + .menu-dropdown ul a span.sub-arrow { + right: 0.5rem; + top: 50%; + margin-top: -0.3125rem; + border-width: 0.3125rem; + border-style: dashed dashed dashed solid; + border-color: transparent transparent transparent #ffffff; + } + + .menu-dropdown span.scroll-up, + .menu-dropdown span.scroll-down { + position: absolute; + display: none; + visibility: hidden; + overflow: hidden; + height: 1.25rem; + } + + .menu-dropdown span.scroll-up-arrow, + .menu-dropdown span.scroll-down-arrow { + position: absolute; + top: 0; + left: 50%; + margin-left: -0.375rem; + width: 0; + height: 0; + overflow: hidden; + border-width: 0.375rem; + border-style: dashed dashed solid dashed; + border-color: transparent transparent #ffffff transparent; + } + + .menu-dropdown span.scroll-down-arrow { + top: 0.5rem; + border-style: solid dashed dashed dashed; + border-color: #ffffff transparent transparent transparent; + } + + [dir="rtl"] .menu-dropdown li.has-children > a { + padding-right: 0.75rem; + padding-left: 1.5rem; + } + + [dir="rtl"] .menu-dropdown span.sub-arrow { + right: auto; + left: 0.75rem; + } + + [dir="rtl"] .menu-dropdown > li > ul:before { + left: auto; + right: 1.875rem; + } + + [dir="rtl"] .menu-dropdown > li > ul:after { + left: auto; + right: 1.9375rem; + } + + [dir="rtl"] .menu-dropdown li.has-children > a { + padding: 0.625rem 1.25rem; + } + + [dir="rtl"] .menu-dropdown span.sub-arrow { + right: auto; + left: 0.5rem; + border-style: dashed solid dashed dashed; + border-color: transparent #ffffff transparent transparent; + } + +} diff --git a/core/themes/basis/css/component/menu-toggle.css b/core/themes/basis/css/component/menu-toggle.css new file mode 100644 index 0000000..58dc5ba --- /dev/null +++ b/core/themes/basis/css/component/menu-toggle.css @@ -0,0 +1,9 @@ +/** + * @file + * Menu toggle styles. + */ +.menu-toggle-button-icon, +.menu-toggle-button-icon::before, +.menu-toggle-button-icon::after { + background-color: #bbbbbb; +} diff --git a/core/themes/basis/css/component/pager.css b/core/themes/basis/css/component/pager.css new file mode 100644 index 0000000..95d2765 --- /dev/null +++ b/core/themes/basis/css/component/pager.css @@ -0,0 +1,146 @@ +/** + * @file + * Pager styling. + */ +ul.pager { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + list-style: none; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: 1em 0 2em; + padding: 0; + clear: both; +} + +.no-flexbox .pager-first, +.no-flexbox .pager-previous, +.no-flexbox .pager-ellipsis, +.no-flexbox .pager-current, +.no-flexbox .pager-next, +.no-flexbox .pager-last, +.no-flexbox .pager-item { + float: left; +} + +.pager-item, +.pager-ellipsis { + display: none; +} + +@media (min-width: 34em) { + .pager-item, + .pager-ellipsis { + display: block; + } +} + +.pager-first, +.pager-previous, +.pager-ellipsis, +.pager-current, +.pager-next, +.pager-last, +.pager-item { + padding: 0.6em 1em; + margin: 0; +} + +.pager-ellipsis { + padding-left: 0; + padding-right: 0; +} + +.pager-first a, +.pager-previous a, +.pager-next a, +.pager-last a { + position: relative; + display: block; + text-indent: -9999em; + overflow: hidden; + width: 2.5em; +} + +.pager-first a:before, +.pager-first a:after, +.pager-previous a:before, +.pager-next a:before, +.pager-last a:before, +.pager-last a:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + display: block; + width: 0.5em; + height: 0.5em; + border: 0.125rem solid #ffffff; + -webkit-transform: translate(-50%, -50%) rotate(45deg); + transform: translate(-50%, -50%) rotate(45deg); +} + +.pager-first a:before, +.pager-first a:after, +.pager-previous a:before { + border-top-width: 0; + border-right-width: 0; +} + +.pager-last a:before, +.pager-last a:after, +.pager-next a:before { + border-bottom-width: 0; + border-left-width: 0; +} + +.pager-first a:before, +.pager-last a:before { + margin-left: -0.1875rem; +} + +.pager-last a:after, +.pager-first a:after { + margin-left: 0.1875rem; +} + +@media (min-width: 48em) { + .pager-first a, + .pager-previous a, + .pager-next a, + .pager-last a { + text-indent: 0; + overflow: visible; + width: auto; + } + + .pager-first a:before, + .pager-first a:after, + .pager-previous a:before, + .pager-next a:before, + .pager-last a:before, + .pager-last a:after { + display: none; + } +} + +.pager-first a, +.pager-previous a, +.pager-next a, +.pager-last a, +.pager-item a { + margin: -0.6em -1em; + padding: 0.6em 1em; + text-decoration: none; + -webkit-transition: background-color 0.2s; + transition: background-color 0.2s; + will-change: background-color; + white-space: nowrap; +} diff --git a/core/themes/basis/css/component/progress.css b/core/themes/basis/css/component/progress.css new file mode 100644 index 0000000..971c777 --- /dev/null +++ b/core/themes/basis/css/component/progress.css @@ -0,0 +1,72 @@ +/** + * @file + * Progress Bar + * + * See system module + */ +.progress { + font-weight: bold; +} + +.progress .bar { + margin: 0 0.2em .5em 0; + border: 2px solid #e5e5e6; + border-radius: 3px; + overflow: hidden; +} + +.progress .filled { + position: relative; + overflow: hidden; + -webkit-transition: width .4s; + transition: width .4s; + will-change: width; +} + +/* Progress Bar Animation */ +.progress .filled:after { + content: ""; + position: absolute; + display: block; + width: 0.75em; + height: 100%; + -webkit-transform: skewX(-20deg); + transform: skewX(-20deg); + border-left: 2em solid #3c4350; + border-right: 0.75em solid #3c4350; + -webkit-animation: progressGradient 3s infinite; + animation: progressGradient 1.5s infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-transition: width .4s; + transition: width .4s; + will-change: left; +} + +@-webkit-keyframes progressGradient { + 0% { + left: -15%; + border-left-width: 2em; + border-left-width: 0.75em; + } + 100% { + left: 100%; + border-left-width: 1.75em; + border-left-width: 0.5em; + } +} +@keyframes progressGradient { + 0% { + left: -15%; + border-left-width: 2em; + border-right-width: 0.75em; + } + 100% { + left: 100%; + border-left-width: 1.75em; + border-right-width: 0.5em; + } +} + diff --git a/core/themes/basis/css/component/small-text-components.css b/core/themes/basis/css/component/small-text-components.css new file mode 100644 index 0000000..d51f937 --- /dev/null +++ b/core/themes/basis/css/component/small-text-components.css @@ -0,0 +1,197 @@ +/** + * @file + * Small text components styling. + */ + +/** + * Marker + */ +.marker { + font-size: 0.875em; + display: inline-block; + margin: 0 0.4em; + padding: 0.3em 0.6em; + text-transform: uppercase; + line-height: 1; + font-style: italic; +} + +/** + * More help link + */ +.more-help-link { + text-align: right; +} + +.more-help-link a { + display: inline-block; + text-decoration: none; +} + +.more-help-link a:before { + content: '?'; + display: inline-block; + width: 1.3em; + height: 1.3em; + margin: 0 0.4em 0 0; + border-radius: 50%; + font-weight: 600; + text-align: center; +} + +/** + * Icon - External Link + * Add following markup: + * + */ +.icon-external-link { + position: relative; + display: inline-block; + width: 0.9em; + height: 0.9em; + border: 0.0625em solid #0074bd; + border-radius: 0.125em; + margin: 0 0 0 0.4em; +} + +.icon-external-link-arrow { + position: absolute; + top: 0; + right: 0; + display: block; + -webkit-transform: + translate(0.4375em, -0.3125em) + rotate(45deg); + transform: + translate(0.4375em, -0.3125em) + rotate(45deg); + -webkit-transform-origin: top center; + transform-origin: top left; + box-sizing: content-box; + width: 0.2em; + height: 0.6em; + border: 0.125em solid #ffffff; + border-top: 0; + border-bottom: 0; +} + +.icon-external-link-arrow:before, +.icon-external-link-arrow:after { + content: ''; + position: absolute; +} + +.icon-external-link-arrow:before { + top: 0; + right: 0; + display: block; + width: 0.4em; + height: 0.4em; + z-index: 100; + -webkit-transform: + rotate(45deg) + translate(0.28125em, -0.01367em); + transform: + rotate(45deg) + translate(0.28125em, -0.01367em); + -webkit-transform-origin: top right; + transform-origin: top right; + border: 0.0625em solid #0074bd; + border-right: 0; + border-bottom: 0; +} + +.icon-external-link-arrow:after { + border: 0.1875em solid transparent; + border-top: 0; + -webkit-transform: translate(-0.12em, -0.12em); + transform: translate(-0.12em, -0.12em); +} + +/** + * List Components + */ +.item-list h3 + ol, +.item-list h3 + ul { + margin-top: 0; +} + +.item-list ol, +.item-list ul, +ul.links, +.links ul { + padding: 0 0 0 1.3em; +} + +.links li { + position: relative; + list-style: none; +} + +.links a { + text-decoration: none; +} + +.links li:before, +.links li:after { + content: ''; + position: absolute; + top: 50%; + left: 0; + width: 0.4375em; + height: 0.4375em; + border: 0.0625rem solid #0074bd; + border-width: 0.0625rem 0.0625rem 0 0; + -webkit-transform: + translate(-1.25em, -50%) + rotate(45deg); + transform: + translate(-1.25em, -50%) + rotate(45deg); +} + +.links li:after { + -webkit-transform: + translate(-1em, -50%) + rotate(45deg); + transform: + translate(-1em, -50%) + rotate(45deg); +} + +.links.inline li:before { + display: none; +} + +.links.inline { + margin: 0; + padding: 0; + overflow: hidden; + list-style: none; +} + +.links.inline li { + display: inline-block; + padding: 0 0.6em 0 0; +} + +.links.inline li:after { + content: ','; + position: static; + display: inline; + -webkit-transform: none; + transform: none; + border: 0; +} + +.links.inline li:last-child:after { + content: ''; +} + +.links.inline .node-readmore { + display: block; +} + +.links.inline .node-readmore:after { + content: ''; +} diff --git a/core/themes/basis/css/component/tabledrag.css b/core/themes/basis/css/component/tabledrag.css new file mode 100644 index 0000000..2796c62 --- /dev/null +++ b/core/themes/basis/css/component/tabledrag.css @@ -0,0 +1,144 @@ +/** + * @file + * Tabledrag styling. + */ + +table.stick-header { + -webkit-transform: translate(2px, 0); + transform: translate(2px, 0); +} + +.tabledrag-toggle-weight { + display: inline-block; + padding: 0.6em 0 0.6em 0.8em; +} + +.tabledrag-processed { + margin-left: 3rem; + width: auto; + width: calc(100% - 3rem); +} + +.tabledrag-processed .draggable > * { + position: relative; +} + +.draggable a.tabledrag-handle { + position: absolute; + top: 0; + left: 0; + display: block; + width: 3rem; + height: 100%; + margin: 0 0 0 -0.0625em; /* Nudge past the left border */ + padding: 0; + background: #ebeff7; + -webkit-transform: translate(-100%, 0); + transform: translate(-100%, 0); +} + +.draggable { + position: relative; +} + +.draggable.drag td:after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #dee2ea; + opacity: 0.3; +} + +tr.draggable .handle { + position: absolute; + top: 50%; + left: 50%; + display: block; + width: 0.25em; + height: 1.5em; + margin: 0; + padding: 0; + -webkit-transform: translate(-50%, -50%) scale(0.5, 0.5); + transform: translate(-50%, -50%) scale(0.5, 0.5); + background: #333333; + text-decoration: none; +} +tr.draggable .handle:before, +tr.draggable .handle:after, +tr.draggable .handle .handle-inner:before, +tr.draggable .handle .handle-inner:after { + content: ''; + position: absolute; + display: block; +} +tr.draggable .handle:before { + top: 0; + left: 0; + -webkit-transform: translate(-0.25em, -0.375em); + transform: translate(-0.25em, -0.375em); + border: 0.375em solid transparent; + border-bottom-color: #333333; + border-top: 0; +} +tr.draggable .handle:after { + bottom: 0; + left: 0; + -webkit-transform: translate(-0.25em, 0.375em); + transform: translate(-0.25em, 0.375em); + border: 0.375em solid transparent; + border-top-color: #333333; + border-bottom: 0; +} +tr.draggable .handle .handle-inner { + position: absolute; + top: 50%; + left: 50%; + display: block; + width: 1.5em; + height: 0.25em; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background: #333333; +} +tr.draggable .handle .handle-inner:before { + top: 0; + right: 0; + -webkit-transform: translate(0.375em, -0.25em); + transform: translate(0.375em, -0.25em); + border: 0.375em solid transparent; + border-left-color: #333333; + border-right: 0; +} + +tr.draggable .handle .handle-inner:after { + top: 0; + left: 0; + -webkit-transform: translate(-0.375em, -0.25em); + transform: translate(-0.375em, -0.25em); + border: 0.375em solid transparent; + border-right-color: #333333; + border-left: 0; +} + +abbr.tabledrag-changed { + position: absolute; + top: 0; + left: -0.375em; + display: block; + width: 0.375em; + height: 100%; + text-indent: -9999em; + z-index: 0; + background: #fce400; +} + +.tabledrag-changed[title] { + border: 0; +} + +.messages .tabledrag-changed { + display: none; +} diff --git a/core/themes/basis/css/component/teasers.css b/core/themes/basis/css/component/teasers.css new file mode 100644 index 0000000..efabb0d --- /dev/null +++ b/core/themes/basis/css/component/teasers.css @@ -0,0 +1,38 @@ +/** + * @file + * Teasers styling. + */ +.view-mode-teaser { + margin: 2rem 0 0; + padding: 0 0 2em; +} + +.view-mode-teaser + .view-mode-teaser, +.view-promoted .views-row { + border-top: 0.25rem solid #bbbbbb; +} + +.view-promoted .views-row:first-child { + border-top: 0; +} + +.view-mode-teaser h1, +.view-mode-teaser h2, +.view-mode-teaser h3, +.view-mode-teaser h4, +.view-mode-teaser h5, +.view-mode-teaser h6 { + margin: 0 0 0.5rem; +} + +.view-mode-teaser .align-right { + margin: 0 0 1.5rem 1.5rem; +} + +.view-mode-teaser p { + margin: 0 0 0.5rem; +} + +.view-mode-teaser .content { + margin: 0 0 1.5rem; +} diff --git a/core/themes/basis/css/component/vertical-tabs.css b/core/themes/basis/css/component/vertical-tabs.css new file mode 100644 index 0000000..c0b45a1 --- /dev/null +++ b/core/themes/basis/css/component/vertical-tabs.css @@ -0,0 +1,194 @@ +/** + * @file + * Vertical tabs styling. + * + * Override of misc/vertical-tabs.css. + */ +.vertical-tabs { + position: relative; + margin: 1em 0; + border: 1px solid #bbbbbb; + background: #ffffff; +} + @media (min-width: 48em) { + .vertical-tabs { + padding: 0 0 0 15em; /* LTR */ + } + [dir="rtl"] .vertical-tabs { + padding-left: 0; + padding-right: 15em; + } + .vertical-tabs:before { + content: ''; + position: absolute; + left: 0; + top: 0; + z-index: 0; + width: 15em; + height: 100%; + background: #bbbbbb; + } +} +.vertical-tabs-list { + position: relative; + z-index: 1; + display: none; + width: 15em; + border-top: 1px solid #bbbbbb; + padding: 0; +} + @media (min-width: 48em) { + .vertical-tabs-list { + display:block; + float: left; /* LTR */ + margin: -1px 0 -1px -15em; /* LTR */ + } + [dir="rtl"] .vertical-tabs-list { + margin-left: 0; + margin-right: -15em; + float: right; + } +} +.vertical-tab-item { + list-style: none; + font-size: 0.923em; +} +.vertical-tabs-pane { + overflow: hidden; + margin: 0; + padding: 0; + border: 0; + border-bottom: 1px solid #bbbbbb; + border-radius: 0; +} +.vertical-tabs-pane:nth-last-child(2) { + border-bottom: 0; +} +.vertical-tabs-pane .fieldset-wrapper { + display: none; + padding: 0 1em; +} +.vertical-tab-selected .fieldset-wrapper { + display: block; +} +@media (min-width: 48em) { + .vertical-tabs-panes { + overflow: hidden; + width: 100%; + } + .vertical-tabs-pane { + /* Using position and height instead of display because of FF issue */ + position: absolute; + left: -9999em; + height: 0; + border: 0; + background: transparent; + } + /* Show active pane */ + .vertical-tabs-pane.vertical-tab-selected { + position: static; + height: auto; + padding: 10px 15px; + background: transparent; + } + .vertical-tabs-pane > legend { + display: none; + } + .vertical-tabs-pane .fieldset-wrapper { + display: block; + } +} + /* Layout of each tab */ +.vertical-tab-item { + border: 1px solid #bbbbbb; + border-left-width: 0; /* LTR */ + border-top-width: 0; + padding: 0; + margin: 0; + background: #dee2ea; +} +[dir="rtl"] .vertical-tab-item { + border-left-width: 1px; + border-right-width: 0; +} +/* .vertical-tab-link applies to fieldset legend at small screens and + a link in .vertical-tabs-list at larger screen sizes */ +.vertical-tab-link { + display: block; + text-decoration: none; + padding: 0.5em 0.6em; + font-size: 1em; + cursor: pointer; + transition: + background-color 0.3s, + color 0.3s; +} +.vertical-tab-link span{ + display: block; +} + +.vertical-tab-link strong, +.vertical-tab-link .fieldset-legend { + position: static; + font-weight: bold; + color: #0074bd; + margin: 0; + padding: 0; +} +@media (min-width: 48em) { + .vertical-tab-link strong, + .vertical-tab-link .fieldset-legend { + font-size: 0.923em; + } +} +.vertical-tab-link:focus, +.vertical-tab-link:active, +.vertical-tab-link:hover, +.vertical-tab-link:focus, +.vertical-tab-link:active, +.vertical-tab-link:hover { + text-decoration: none; + background: #d5d5d5; +} +.vertical-tab-link .summary { + font-size: 0.846em; + text-transform: none; + color: #666666; + word-wrap: break-word; +} +.vertical-tab-selected.vertical-tab-item { + background-color: #ffffff; + border-right-width: 0; /* LTR */ +} + [dir="rtl"] .vertical-tab-selected.vertical-tab-item { + border-left-width: 0; + border-right-width: 1px; +} +.vertical-tab-selected .vertical-tab-link { + background: #ffffff; +} +.vertical-tab-selected strong, +.vertical-tab-selected .fieldset-legend { + color: #000000; +} +.vertical-tabs .vertical-tabs .vertical-tabs-list .summary { + line-height: 1.4; + margin-bottom: 0; +} +/* Styles for legend at smaller screen sizes */ +.vertical-tabs-pane > .vertical-tab-link { + width: 100%; + box-sizing: border-box; + padding-left: 1em; + padding-right: 1em; + background: #dee2ea; +} +.vertical-tabs-pane.vertical-tab-selected > .vertical-tab-link { + padding-top: 0.7em; + padding-bottom: 0.7em; + background: transparent; + border-bottom: 1px solid #dee2ea; +} +.vertical-tabs-pane.vertical-tab-selected > .vertical-tab-link .summary { + display: none; +} diff --git a/core/themes/basis/css/layout.css b/core/themes/basis/css/layout.css new file mode 100644 index 0000000..8a0f876 --- /dev/null +++ b/core/themes/basis/css/layout.css @@ -0,0 +1,40 @@ +/** + * @file + * Component Layout CSS and some Page layout overrides + */ + +.l-header { + position: relative; + margin: 0 0 2rem; +} + +.layout .l-messages { + margin: 0 0 2rem; +} + +/* Push the footer down to the bottom of the page. */ +.layout { + box-sizing: border-box; + height: 100vh; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +.admin-bar body .layout { + padding-top: 33px; + margin-top: -33px; +} +.l-wrapper { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; +} +.l-header, +.l-footer { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} diff --git a/core/themes/basis/css/print.css b/core/themes/basis/css/print.css new file mode 100644 index 0000000..2a5e4aa --- /dev/null +++ b/core/themes/basis/css/print.css @@ -0,0 +1,36 @@ +html.admin-bar body { + padding-top: 0; +} + +.tabs { + display: none; +} + +.l-header, +.breadcrumb, +.pager-first, +.pager-previous, +.pager-ellipsis, +.pager-next, +.pager-last, +.pager-item { + background: transparent; +} + +.l-header a, +.l-header-inner, +.breadcrumb, +.breadcrumb li a, +.pager-item a, +.pager-first, +.pager-previous a, +.pager-ellipsis, +.pager-next a, +.pager-last a, +.pager-item { + color: #000000; +} + +.breadcrumb li:after { + border-color: #000000; +} diff --git a/core/themes/basis/css/skin.css b/core/themes/basis/css/skin.css new file mode 100644 index 0000000..acf78a7 --- /dev/null +++ b/core/themes/basis/css/skin.css @@ -0,0 +1,1227 @@ +/** + * @file + * Colors and appearance styles. + * + * Component styles in this file are simple overrides for easy updating. + */ +body { + font-family: 'Open Sans', Helvetica, Arial, sans-serif; + /** + * Default font size for site should be set on body element in rem units. + * This is better for some accessibility technologies. Although it's not true + * under all circumstances, think of 1rem as being equal to 16px. + */ + font-size: 1rem; + line-height: 1.6; + background: #ffffff; +} + +a { + color: #0073bd; +} + +a:focus, +a:hover { + text-decoration: none; +} + +a:active { + background: #dddddd; +} + +blockquote, +figcaption { + border-left-color: #bbbbbb; +} + +pre, +code { + color: #20252e; +} + +code { + border-color: #bbbbbb; + background: #dee2ea; +} + +pre code { + border-left-color: #bbbbbb; + background: transparent; +} + +code p { + display: inline; + margin: 0; + padding: 0; +} + +/** + * Table tags + */ +td { + border-color: #dee2ea; +} + +th { + border-right-color: #bbbbbb; + background: #dee2ea; +} + +th:last-child { + border-right-color: #dee2ea; +} + +/* Sort arrow color */ +table [aria-sort="descending"] a:after { + border-top-color: #333333; +} + +table [aria-sort="ascending"] a:after { + border-bottom-color: #333333; +} + +/** + * Fieldsets. + */ +fieldset { + background-color: #ffffff; + border-color: #bbbbbb; +} + +legend { + font-size: 1.1875em; + font-weight: normal; +} + +fieldset .fieldset-legend { + text-transform: uppercase; +} + +/** + * Small Text Components + */ +.marker { + background: #abdeff; +} + +.more-help-link a:before { + color: #ffffff; + background: #0074bd; +} + +/** + * Icon - External Link + * Add following markup: + * + */ +.icon-external-link { + border-color: #0074bd; +} + +.icon-external-link-arrow { + background: #0074bd; + /* Should be bg color */ + border-color: #ffffff; +} + +.icon-external-link-arrow:before { + border-color: #0074bd; +} + +.icon-external-link-arrow:after { + border-bottom-color: #0074bd; +} + +/** + * Link list arrow color + */ +.links li:before, +.links li:after { + border-color: #0074bd; +} + +/** + * Header Region + * More layout styles included since they will effected by logo and + * site name word size + */ +.l-header { + background: #20252e; +} + +.l-header-inner { + color: #fffffe; + padding: 0; +} + +@media (min-width: 34em) { + .l-header-inner { + min-height: 6.125rem; + padding-right: .9375rem; + padding-left: .9375rem; + } +} + +.l-header a { + color: #fffffe; + text-decoration: none; +} + +.header-menu a:hover, +.l-header a:active { + background: #114a75; +} + +.block-system-header { + /* Helps center .header-identity-wrapper on smaller screens */ + text-align: center; +} + +.header-identity-wrapper { + /* BG color for slogan, and logo/site name if they don't have a bg */ + background: #000000; +} + +@media (min-width: 34em) { + .header-identity-wrapper { + /* Helps center .header-identity-wrapper on smaller screens */ + display: inline-block; + } +} + +@media (min-width: 48em) { + .header-identity-wrapper { + text-align: left; + } +} + +.header-site-name-wrapper { + font-size: 1.25rem; +} + +@media (min-width: 34em) { + .header-site-name-wrapper { + font-size: 1.5em; + } +} + +@media (min-width: 62em) { + .header-site-name-wrapper { + font-size: 1.75em; + } +} + +.header-logo-wrapper { + max-width: 6rem; + height: 3.5rem; + /* Keeps logo in same container as text but avoids padding */ + margin: -1.25rem 1rem -1rem -1.25rem; +} + +@media (min-width: 48em) { + .header-logo-wrapper { + height: 4.25rem; + /* Keeps logo in same container as text but avoids padding */ + margin: -1.75rem 1.25rem -1.25rem -1.25rem; + } +} + +.l-header .site-name { + font-weight: 200; + text-align: center; +} + +.header-site-name-link { + background: #0074bd; + padding: 1.25rem 1.25rem 1rem; + line-height: 1.25rem; + text-align: center; +} + +@media (min-width: 34em) { + .header-site-name-link { + display: inline-block; + } +} + +@media (min-width: 48em) { + .header-site-name-link { + padding: 1.75rem 1.25rem 1.25rem; /* Attempts to line up baselines */ + } +} + +.header-site-slogan { + line-height: 1.25rem; + padding: 0.5rem 1rem; + font-size: 0.75rem; + text-align: center; +} + +@media (min-width: 34em) { + .header-site-slogan { + height: 3.5rem; + padding: 1.5625rem 1rem 0.9375rem; /* Attempts to line up baselines */ + float: left; + } +} + +@media (min-width: 48em) { + .header-site-slogan { + height: 4.25rem; + padding: 2.0625rem 1.25rem 0.9375rem; /* Attempts to line up baselines */ + font-size: 1rem; + } +} + +/** + * Menus in header area + * More layout styles included since they'll be effected by menu item count + * and word size + */ +.header-menu { + /* Center menu at mobile */ + text-align: center; +} + +.header-menu > .links { + /* Center menu at mobile */ + display: inline-block; +} + +.l-header .menu, +.l-header .menu > li { + text-align: left; +} + +.l-header .menu > li { + font-size: 1em; +} + +@media (min-width: 34em) { + .l-header .menu > li { + font-size: 1.125em; + } +} + +@media (min-width: 62em) { + .l-header .menu > li { + font-size: 1.375em; + } +} + +/** + * Responsive menu styles + */ +.menu-dropdown ul { + background: rgba(0, 0, 0, 0.25); + border-bottom-color: #20252e; +} + +.js .menu-dropdown > li { + border-bottom-color: #bbbbbb; +} + +.menu-dropdown a.disabled { + color: #bbbbbb; +} + +@media (min-width: 48em) { + .menu-dropdown a.disabled { + color: #bbbbbb; + } + + .js .menu-dropdown ul ul { + border-left-color: #20252e; + } + + .js .menu-dropdown > li:hover { + background-color: #114a75; + } + + .js .menu-dropdown > li.has-children > a:hover, + .js .menu-dropdown > li.has-children > a:focus { + background-color: #114a75; + } + + .menu-dropdown a span.sub-arrow { + border-top-color: #ffffff; + } + + .menu-dropdown ul { + background: #20252e; + } + + .menu-dropdown ul a, + .menu-dropdown ul a:hover, + .menu-dropdown ul a:focus, + .menu-dropdown ul a:active, + .menu-dropdown ul a.highlighted { + color: #ffffff; + } + + .menu-dropdown ul a:hover, + .menu-dropdown ul a:focus, + .menu-dropdown ul a:active, + .menu-dropdown ul a.highlighted { + background: #114a75; + } + + .menu-dropdown ul a.disabled { + background: #ffffff; + color: #cccccc; + } + + .menu-dropdown ul a span.sub-arrow { + border-left-color: #ffffff; + } + + .menu-dropdown span.scroll-up, + .menu-dropdown span.scroll-down { + background: #ffffff; + } + + .menu-dropdown span.scroll-up:hover, + .menu-dropdown span.scroll-down:hover { + background: #eeeeee; + } + + .menu-dropdown span.scroll-up-arrow, + .menu-dropdown span.scroll-down-arrow { + border-bottom-color: #ffffff; + } + + .menu-dropdown span.scroll-down-arrow { + border-top-color: #ffffff; + } + + [dir="rtl"] .menu-dropdown span.sub-arrow { + border-right-color: #ffffff; + } +} + + +/** + * Footer styles + */ +.l-footer { + border-top: 0.25rem solid #bbbbbb; + /* If footer text wraps, remove line-height & add padding styles to blocks */ + line-height: 3; + padding: 0.5em 0 1em; + margin: 5em 0 0; + background-color: #fffeff; +} + +/** + * Powered by Backdrop Block + */ +.l-footer .block-system-powered-by a { + text-decoration: none; +} + +.l-footer .block-system-powered-by a:hover { + text-decoration: underline; +} + +.drop-lounging { + /* To make Drop larger/smaller, adjust the width below. */ + width: 7em; +} + +.drop-lounging:before { + /* Uncomment below to remove Drop, or remove markup from block--system--powered-by.tpl.php */ + /* display: none; */ + background-image: url("../images/drop-lounging.png"); +} + +/** + * Breadcrumb + */ +.breadcrumb { + background: #dee2ea; +} + +.breadcrumb a { + color: #000000; +} + +/* Arrow color */ +.breadcrumb li:after { + border-color: #ffffff; +} + + +/** + * Tabledrag + */ +.draggable a.tabledrag-handle { + background: #ebeff7; +} + +.draggable.drag td:after { + background: #dee2ea; + opacity: 0.3; +} + +tr.draggable .handle, +tr.draggable .handle .handle-inner { + background: #333333; /* Resize icon color */ +} + +tr.draggable .handle:before { + border-bottom-color: #333333; /* Resize icon color */ +} + +tr.draggable .handle:after { + border-top-color: #333333; /* Resize icon color */ +} + +tr.draggable .handle .handle-inner:before { + border-left-color: #333333; /* Resize icon color */ +} + +tr.draggable .handle .handle-inner:after { + border-right-color: #333333; /* Resize icon color */ +} + +abbr.tabledrag-changed { + background: #fce400; +} + +/** + * Backdrop Form Styles + */ +.form-item-radio label, +.form-radios label, +.form-item-checkbox label, +.form-checkboxes label { + font-weight: 400; +} + +.form-item .description, +.password-strength, +.password-match { + border-left-color: #bbbbbb; +} + +.field-suffix .machine-name-value { + border-color: #dee2ea; + font-family: Consolas, 'Lucida Console', 'Courier New', monospace; +} + +select.form-select { + font-weight: 400; + border-color: #bbbbbb; + color: #444b53; + background: #ffffff; +} + +select.form-select:focus { + color: #000000; + border-color: #43afe4; +} + +input.form-submit, +button.form-submit, +.button { + text-align: center; + text-transform: uppercase; + color: #333333; + letter-spacing: 0.025em; + line-height: 2.875; + background: #d5d5d5; +} + +.button:hover, +.button:focus, +input.form-submit:hover, +input.form-submit:focus { + color: #333333; + background: #d5d5d5; +} + +.button:active, +input.form-submit:active { + color: #333333; + background: #d5d5d5; +} + +.button, +input.form-submit, +input.button-primary, +button.button-primary, +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default { + color: white; + background: #0074bd; + border: none; +} + +input.button-primary:hover, +input.button-primary:focus, +button.button-primary:hover, +button.button-primary:focus { + color: white; + background-color: #114a75; +} + +input.button-primary:active, +button.button-primary:active { + box-shadow: inset 0 0 0 0.125em #114a75; + background-color: #0074bd; + color: white; +} + +input.button-secondary, +button.button-secondary { + color: #828188; + background-color: white; + box-shadow: inset 0 0 0 0.125em #97979e; +} + +input.button-secondary:hover, +input.button-secondary:focus, +button.button-secondary:hover, +button.button-secondary:focus { + color: white; + background-color: #97979e; +} + +input.button-secondary:active, +button.button-secondary:active { + color: white; + background-color: #97979e; + box-shadow: inset 0 0 0 0.125em #555555; +} + +input.button-danger, +button.button-danger { + color: #ff0000; + box-shadow: inset 0 0 0 0.125rem #ff0000; + background: transparent; +} + +input.button-danger:hover, +input.button-danger:focus, +button.button-danger:hover, +button.button-danger:focus { + color: #ffffff; + background-color: #ff0000; +} + +input.form-button-disabled, +input.form-button-disabled:active, +input.form-submit[disabled], +button.form-submit[disabled], +.button[disabled] { + background: #eeeeee; + border-color: #eeeeee; + text-shadow: none; + color: #999999; +} + +input.button-danger[disabled], +button.button-danger[disabled], +input.button-secondary[disabled], +button.button-secondary[disabled] { + background: #fefefe; + box-shadow: inset 0 0 0 0.125rem #dddddd; + color: #cccccc; +} + +input.form-autocomplete, +input.form-text, +input.form-tel, +input.form-email, +input.form-url, +input.form-color, +input.form-number, +input.form-search, +input.form-file, +textarea.form-textarea { + border-color: #bbbbbb; + font-weight: 400; + color: #444b53; + background: #ffffff; +} + +input.form-text:focus, +input.form-tel:focus, +input.form-email:focus, +input.form-url:focus, +input.form-color:focus, +input.form-number:focus, +input.form-search:focus, +input.form-file:focus, +textarea.form-textarea:focus { + color: #000000; + border-color: #43afe4; +} + +.form-disabled input.form-autocomplete, +.form-disabled input.form-text, +.form-disabled input.form-tel, +.form-disabled input.form-email, +.form-disabled input.form-url, +.form-disabled input.form-color, +.form-disabled input.form-number, +.form-disabled input.form-search, +.form-disabled input.form-file, +.form-disabled textarea.form-textarea, +.form-disabled select.form-select, +input.form-autocomplete[disabled], +input.form-text[disabled], +input.form-tel[disabled], +input.form-email[disabled], +input.form-url[disabled], +input.form-color[disabled], +input.form-number[disabled], +input.form-search[disabled], +input.form-file[disabled], +textarea.form-textarea[disabled], +select.form-select[disabled] { + background-color: #eeeeee; + color: #bbbbbb; +} + +.form-error input.form-autocomplete, +.form-error input.form-text, +.form-error input.form-tel, +.form-error input.form-email, +.form-error input.form-url, +.form-error input.form-color, +.form-error input.form-number, +.form-error input.form-search, +.form-error input.form-file, +.form-error textarea.form-textarea, +.form-error select.form-select { + border-color: #ff0000; +} + +.form-type-checkboxes.form-error, +.form-type-radios.form-error { + border: 0.125rem solid #ff0000; +} +/* Display border on a single checkbox, but not on checkboxes within a group. */ +.form-type-checkbox.form-error { + border: 0.125rem solid #ff0000; +} +.form-type-checkboxes.form-error .form-type-checkbox.form-error { + border: none; +} + +ul.action-links a { + background: transparent url(../images/add.png) no-repeat 0 center; + line-height: 1.875; +} + +[dir="rtl"] ul.action-links a { + background-position: right center; +} + +/** + * Collapsible Fieldsets + */ +.js fieldset.collapsible .fieldset-legend a:before { + border-top-color: #000000; +} + +/** + * Teaser + */ +.view-mode-teaser + .view-mode-teaser { + border-top-color: #bbbbbb; +} + +/** + * Pager + */ +.pager-first, +.pager-previous, +.pager-ellipsis, +.pager-current, +.pager-next, +.pager-last, +.pager-item { + background: #586172; + color: #ffffff; +} + +.pager-ellipsis { + color: #586172; +} + +.pager-first a, +.pager-previous a, +.pager-next a, +.pager-last a, +.pager-item a { + color: #ffffff; +} + +.pager-first a:hover, +.pager-previous a:hover, +.pager-next a:hover, +.pager-last a:hover, +.pager-item a:hover { + background: #3c4350; +} + +.pager-current { + background: #20252e; +} + +.pager-first a:before, +.pager-first a:after, +.pager-previous a:before, +.pager-next a:before, +.pager-last a:before, +.pager-last a:after { + /* Mobile chevron color */ + border-color: #ffffff; +} + +/** + * Progress Bar + * See system module + */ +.progress { + font-weight: bold; +} + +.progress .bar { + border-color: #e5e5e6; + background: #e5e5e6; +} + +.progress .filled { + background: #586172; +} + +/* Progress Bar Animation */ +.progress .filled:after { + border-color: #3c4350; +} + +/** + * Dialog overrides + */ +.ui-dialog { + border-color: #20252e; +} + +.ui-dialog .ui-dialog-titlebar { + background: #20252e; + color: #ffffff; +} + +.ui-dialog .ui-dialog-titlebar-close { + background: #008be2; +} + +/* Close X color */ +.ui-dialog .ui-dialog-titlebar-close .ui-icon:before, +.ui-dialog .ui-dialog-titlebar-close .ui-icon:after { + background: #ffffff; +} + +/** + * Custom Hero Component + */ +.block-hero { + font-size: 1em; +} + +@media (min-width: 25em) { + .block-hero { + padding: 2rem 3rem 3rem; + font-size: 1.3em; + } +} + +@media (min-width: 34em) { + .block-hero { + font-size: 1.5em; + } +} + +/* Default background when hero doesn't have image */ +.block-hero-no-image { + background-color: #0074bd; + background-image: url(../images/texture.png); + background-repeat: repeat; + background-position: center center; + background-blend-mode: luminosity; /* Colorizes bg image */ +} + +.no-background-blend-mode .block-hero-no-image:before { + /* If we don't have blend-modes, use a more saturated version of overlay color */ + /* Semi-transparent overlay has similar effect as luminosity */ + background: #009dff; + opacity: 0.5; +} + +.block-hero .block-title { + font-weight: 200; + line-height: 1.2; + font-size: 2.3em; +} + +@media (min-width: 34em) { + .block-hero .block-title { + font-size: 2.625em; + } +} + +/** + * Primary admin tabs + */ +nav.tabs:before { + /* Background behind primary tabs */ + background-color: #586172; +} + +ul.primary { + font-size: 0.9375em; + text-transform: uppercase; +} + +ul.primary li a, +ul.primary li a:visited, +ul.primary li a:hover, +ul.primary li.active a, +.expand-dropdown-tabs-control, +.responsive-tabs-mobile .expand-dropdown-tabs-control:before, +.responsive-tabs-mobile .expand-dropdown-tabs-label { + border-color: #586172; /* Should be color of bg behind tabs */ + color: #757575; + background-color: #dee2ea; +} + +ul.primary li.active a, +ul.primary li.active a.active, +ul.primary li.active a:active, +ul.primary li.active a:visited, +.responsive-tabs-mobile .expand-dropdown-tabs-label { + color: #000000; + background-color: #ffffff; + font-weight: bold; +} + +ul.primary li a:hover, +ul.primary li a:focus, +.expand-dropdown-tabs-control:hover, +.expand-dropdown-tabs-control:focus, +.responsive-tabs-mobile .expand-dropdown-tabs-control:hover:before, +.responsive-tabs-mobile .expand-dropdown-tabs-control:focus:before, +.responsive-tabs-mobile .expand-dropdown-tabs-control.js-active:before, +.expand-dropdown-tabs-control.js-active { + color: #000000; + background: #d5d5d5; +} + +ul.primary li a:active, +.expand-dropdown-tabs-control:active, +.responsive-tabs-mobile .expand-dropdown-tabs-control:active:before { + background: #dee2ea; + box-shadow: inset 0 0 0 0.125em #d5d5d5; +} + +/** + * Secondary admin tabs + */ +ul.secondary { + font-size: 0.8125em; + font-weight: bold; + background-color: #ffffff; +} + +ul.secondary li a { + border-color: #e3e2e2; + color: #444b53; +} + +ul.secondary li a:hover, +ul.secondary li a:focus, +ul.secondary li.active a, +ul.secondary li.active a.active { + color: #000000; + background: #e3e2e2; +} + +ul.secondary li a:active { + color: #000000; + background: #e3e2e2; + box-shadow: inset 0 0 0 0.125em #ffffff; +} + +/** + * Contextual Links font-size + */ +.contextual-links-wrapper { + font-size: 0.9rem; +} + +/** + * Unpublished indicator. + */ +.unpublished-indicator { + line-height: 1.6rem; + background-color: #ff0000; + color: #ffffff; + padding: .75rem; +} + +/** + * Responsive tabs + */ +.responsive-tabs-mobile ul.primary { + background: #ffffff; +} + +.expand-dropdown-tabs ul.responsive-tabs-dropdown li a, +.expand-dropdown-tabs ul.responsive-tabs-dropdown li a:hover { + border-top-color: #ffffff; +} + +.expand-dropdown-tabs-control:before { + content: '...'; + font-weight: bold; +} + +.responsive-tabs-after .expand-dropdown-tabs-control { + border-left-color: 2px solid #d5d5d5; +} + +.expand-dropdown-tabs-label { + text-transform: uppercase; +} + +.expand-dropdown-tabs-control:hover .expand-dropdown-tabs-label, +.responsive-tabs-mobile.js-active .expand-dropdown-tabs-label { + background: #e8e8e8; +} + +.responsive-tabs-mobile.expand-dropdown-tabs .expand-dropdown-tabs-label, +.responsive-tabs-mobile.expand-dropdown-tabs:hover .expand-dropdown-tabs-label { + background: #ffffff; +} + +.responsive-tabs-mobile .expand-dropdown-tabs-control.js-active { + background: #ffffff; +} + +.responsive-tabs-mobile .expand-dropdown-tabs-control:before { + background: #dee2ea; +} + +.responsive-tabs-mobile.expand-dropdown-tabs .expand-dropdown-tabs-control:before { + background: #ffffff; +} + +.responsive-tabs-mobile .expand-dropdown-tabs-control:after { + border-right-color: #000000; +} + +.expand-dropdown-tabs .expand-dropdown-tabs-control:after { + border-top-color: #d5d5d5; +} + +.responsive-tabs-mobile ul.primary, +.responsive-tabs-mobile.expand-dropdown-tabs ul.primary { + background: #ffffff; +} + +.responsive-tabs-mobile ul.primary, +.expand-dropdown-tabs.responsive-tabs-mobile ul.primary { + -webkit-border-radius: 0 0 4px 4px; + border-radius: 4px; +} + +.responsive-tabs-mobile ul.primary li { + border-bottom-color: #ffffff; +} + +.responsive-tabs-mobile ul.primary a:after { + background: #d5d5d5; +} + +.responsive-tabs-mobile-header-padder { + background: #586172; +} + +/** + * Comments + */ +.comments .indented:before { + top: -1em; + left: 0; + width: 0.5em; + height: 1.5em; + border-left-color: #dee2ea; + border-bottom-color: #dee2ea; +} + +.comments .indented:after { + border-top-color: #dee2ea; + border-right-color: #dee2ea; +} + +.comment-header:before { + border-bottom-color: #dee2ea; + border-left-color: #dee2ea; + background: #ffffff; +} + +.comment .comment-text { + border-color: #dee2ea; +} + +.comment-title { + padding: 1em 1.25em 0.25em; +} + +.comment-title h3 { + font-size: 1.125em; +} + +.comment-time { + font-size: 0.875em; +} + +.comment-footer { + background: #dee2ea; +} + +/** + * Font related override utility classes + */ +.color-inverse { + color: #ffffff; +} + +.font-size-xxxxlarge { + font-size: 2.625rem; +} + +.font-size-xxxlarge { + font-size: 2.25rem; +} + +.font-size-xxlarge { + font-size: 1.8125rem; +} + +.font-size-xlarge { + font-size: 1.625rem; + font-weight: 400; +} + +.font-size-large { + font-size: 1.4375rem; +} + +.font-size-medium { + font-size: 1.25rem; +} + +.font-size-normal { + font-size: 1rem; +} + +.font-size-small { + font-size: 0.875rem; +} + +.font-size-xsmall { + font-size: 0.75rem; +} + +.font-weight-bold { + font-weight: 600; +} + +.font-weight-normal { + font-weight: 400; +} + +.font-weight-light { + font-weight: 200; +} + +.font-style-italic { + font-style: italic; +} + +.font-style-normal { + font-style: normal; +} + +/* Color Module: Don't touch */ + +/** + * Status messages + * Uncomment background-image styles to override, URL will need to be + * updated to work in a sub-theme. + */ + +/* Neutral or Good status message colors */ +.messages.status { + color: #234600; + background-color: #e9eebc; +} +div.messages.status:before { + /* background-image: url(../../../misc/message-32-ok.png); */ + background-color: #cfde56; +} + +/* Warning status message colors */ +.messages.warning { + color: #555; + background-color: #faf5c9; +} +div.messages.warning:before { + /* background-image: url(../../../misc/message-32-warning.png); */ + background-color: #fce400; +} + +/* Error status message colors */ +.messages.error { + color: #f00; + background-color: #f9edec; +} +div.messages.error:before { + /* background-image: url(../../../misc/message-32-error.png); */ + background-color: #f00; +} + +/* Info status message colors */ +.messages.info { + color: #004570; + background-color: #bdf; +} +div.messages.info:before { + /* background-image: url(../../../misc/message-32-info.png); */ + background-color: #0074bd; +} + +/** + * SVG overrides for status messages + * Using linear-gradient so the style only applies to browsers that can render + * SVGs. + */ +div.status:before { + /* background-image: -webkit-linear-gradient(transparent, transparent), url(../../../misc/message-ok.svg); */ + /* background-image: linear-gradient(transparent, transparent), url(../../../misc/message-ok.svg); */ +} + +div.warning:before { + /* background-image: -webkit-linear-gradient(transparent, transparent), url(../../../misc/message-warning.svg); */ + /* background-image: linear-gradient(transparent, transparent), url(../../../misc/message-warning.svg); */ +} + +div.error:before { + /* background-image: -webkit-linear-gradient(transparent, transparent), url(../../../misc/message-error.svg); */ + /* background-image: linear-gradient(transparent, transparent), url(../../../misc/message-error.svg); */ +} diff --git a/core/themes/basis/images/drop-lounging.png b/core/themes/basis/images/drop-lounging.png new file mode 100644 index 0000000..0d112ad Binary files /dev/null and b/core/themes/basis/images/drop-lounging.png differ diff --git a/core/themes/basis/images/texture.png b/core/themes/basis/images/texture.png new file mode 100644 index 0000000..36a361c Binary files /dev/null and b/core/themes/basis/images/texture.png differ diff --git a/core/themes/basis/js/script.js b/core/themes/basis/js/script.js new file mode 100644 index 0000000..ee7f714 --- /dev/null +++ b/core/themes/basis/js/script.js @@ -0,0 +1,58 @@ +(function ($) { + +"use strict"; + +Backdrop.behaviors.toggles = { + attach: function(context, settings) { + var $toggles = $(context).find('[data-toggle]').once('toggle'); + + $toggles.click(function(){ + var $this = $(this); + var $target = $('[data-toggleable="' + $this.attr('data-toggle') + '"]'); + $target.toggleClass('js-toggled'); + }); + } +}; + +/** + * Override tableDragHandle(). + */ +Backdrop.theme.prototype.tableDragHandle = function() { + return '
 
'; +}; + +/** + * Tests for background-blend-mode used on some hero elements + * + * @return {boolean} True if browser supports background-blend-mode. + * + */ +Backdrop.featureDetect.backgroundBlendMode = function() { + var $body = $('body'), + $testElement = $('
'); + + if ($body.hasClass('has-background-blend-mode')) { + return true; + } else if ($body.hasClass('no-background-blend-mode')) { + return false; + } else { + $body.append($testElement); + if ($testElement.css('background-blend-mode') === 'luminosity') { + $('body').addClass('has-background-blend-mode'); + $testElement.remove(); + return true; + } + else { + $body.addClass('no-background-blend-mode'); + $testElement.remove(); + return false; + } + } +} + +$(document).ready(function() { + Backdrop.featureDetect.backgroundBlendMode(); + Backdrop.featureDetect.flexbox(); +}); + +})(jQuery); diff --git a/core/themes/basis/screenshot.png b/core/themes/basis/screenshot.png new file mode 100644 index 0000000..5d4b4d7 Binary files /dev/null and b/core/themes/basis/screenshot.png differ diff --git a/core/themes/basis/templates/block--layout--hero.tpl.php b/core/themes/basis/templates/block--layout--hero.tpl.php new file mode 100644 index 0000000..242d168 --- /dev/null +++ b/core/themes/basis/templates/block--layout--hero.tpl.php @@ -0,0 +1,27 @@ + +
> +
+ + +

+ + + +
+ +
+
+
diff --git a/core/themes/basis/templates/block--system--powered-by.tpl.php b/core/themes/basis/templates/block--system--powered-by.tpl.php new file mode 100644 index 0000000..5a5497f --- /dev/null +++ b/core/themes/basis/templates/block--system--powered-by.tpl.php @@ -0,0 +1,29 @@ + +
+ + +
+ + + +

+ + + +
+ +
+
diff --git a/core/themes/basis/templates/comment.tpl.php b/core/themes/basis/templates/comment.tpl.php new file mode 100644 index 0000000..7c6b28b --- /dev/null +++ b/core/themes/basis/templates/comment.tpl.php @@ -0,0 +1,98 @@ +created variable. + * - $changed: Formatted date and time for when the comment was last changed. + * Preprocess functions can reformat it by calling format_date() with the + * desired parameters on the $comment->changed variable. + * - $new: New comment marker. + * - $permalink: Comment permalink. + * - $submitted: Submission information created from $author and $created during + * template_preprocess_comment(). + * - $picture: Authors picture. + * - $signature: Authors signature. + * - $status: Comment status. Possible values are: + * comment-unpublished, comment-published or comment-preview. + * - $title: Linked title. + * - $classes: Array of classes that can be used to style contextually through + * CSS. The default values can be one or more of the following: + * - comment: The current template type, i.e., "theming hook". + * - comment-by-anonymous: Comment by an unregistered user. + * - comment-by-node-author: Comment by the author of the parent node. + * - comment-preview: When previewing a new or edited comment. + * The following applies only to viewers who are registered users: + * - comment-unpublished: An unpublished comment visible only to administrators. + * - comment-by-viewer: Comment by the user currently viewing the page. + * - comment-new: New comment since last the visit. + * - $attributes: Array of additional HTML attributes that should be added to + * the wrapper element. Flatten with backdrop_attributes(). + * - $title_prefix (array): An array containing additional output populated by + * modules, intended to be displayed in front of the main title tag that + * appears in the template. + * - $title_suffix (array): An array containing additional output populated by + * modules, intended to be displayed after the main title tag that appears in + * the template. + * + * These two variables are provided for context: + * - $comment: Full comment object. + * - $node: Node entity the comments are attached to. + * + * @see template_preprocess() + * @see template_preprocess_comment() + * @see theme_comment() + */ +?> +
role="article"> +
+
+ + + +
+
+ +
+ +
+ +

+ + + + + +
+ +
> + +
+ +
+ +
+ +
+ + + +
+ +
+
diff --git a/core/themes/basis/templates/header.tpl.php b/core/themes/basis/templates/header.tpl.php new file mode 100644 index 0000000..d9cfd89 --- /dev/null +++ b/core/themes/basis/templates/header.tpl.php @@ -0,0 +1,51 @@ + + + +
+ +
+ + + +
+ /> +
+ + + + +
+
+ + +
+ +
+ + + + + diff --git a/core/themes/basis/templates/layout--boxton--front.tpl.php b/core/themes/basis/templates/layout--boxton--front.tpl.php new file mode 100644 index 0000000..e5b182c --- /dev/null +++ b/core/themes/basis/templates/layout--boxton--front.tpl.php @@ -0,0 +1,91 @@ + +
> + + + + + + +
+ + +
+ +
+ + +
+ + +
+ +
+ + +
+ + + +

+ + +
+ + + + + + + +
+ +
+ + +
+ +
+ + +
+
+ + + + +
diff --git a/core/themes/seven/README.md b/core/themes/seven/README.md new file mode 100644 index 0000000..ee3c426 --- /dev/null +++ b/core/themes/seven/README.md @@ -0,0 +1,11 @@ +# Seven Theme +Administrative theme for Backdrop. + +## License +Seven theme is [GPL v2](http://www.gnu.org/licenses/gpl-2.0.html) (or higher) +software. See the LICENSE.txt file in the /core directory for complete text. +Distributions of this software may relicense it as any later version of the GPL. + +## Icons +Seven theme includes icons derived from [Font Awesome](http://fontawesome.io), +which is licensed under the [SIL OFL 1.1](http://scripts.sil.org/OFL). diff --git a/core/themes/seven/css/jquery.ui.theme.css b/core/themes/seven/css/jquery.ui.theme.css index bd943ae..7935713 100755 --- a/core/themes/seven/css/jquery.ui.theme.css +++ b/core/themes/seven/css/jquery.ui.theme.css @@ -77,20 +77,22 @@ } /* positioning */ -.ui-icon-carat-1-ne { background-position: -16px 0; } -.ui-icon-carat-1-e { background-position: -32px 0; } -.ui-icon-carat-1-se { background-position: -48px 0; } -.ui-icon-carat-1-s { background-position: -64px 0; } -.ui-icon-carat-1-sw { background-position: -80px 0; } -.ui-icon-carat-1-w { background-position: -96px 0; } -.ui-icon-carat-1-nw { background-position: -112px 0; } -.ui-icon-carat-2-n-s { background-position: -128px 0; } -.ui-icon-carat-2-e-w { background-position: -144px 0; } +.ui-icon-blank { background-position: 16px 16px; } +.ui-icon-caret-1-n { background-position: 0 0; } +.ui-icon-caret-1-ne { background-position: -16px 0; } +.ui-icon-caret-1-e { background-position: -32px 0; } +.ui-icon-caret-1-se { background-position: -48px 0; } +.ui-icon-caret-1-s { background-position: -64px 0; } +.ui-icon-caret-1-sw { background-position: -80px 0; } +.ui-icon-caret-1-w { background-position: -96px 0; } +.ui-icon-caret-1-nw { background-position: -112px 0; } +.ui-icon-caret-2-n-s { background-position: -128px 0; } +.ui-icon-caret-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } -.ui-icon-triangle-1-s { background-position: -64px -16px; } +.ui-icon-triangle-1-s { background-position: -65px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } @@ -100,7 +102,7 @@ .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } -.ui-icon-arrow-1-s { background-position: -64px -32px; } +.ui-icon-arrow-1-s { background-position: -65px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } @@ -112,7 +114,7 @@ .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } -.ui-icon-arrowthick-1-n { background-position: 0 -48px; } +.ui-icon-arrowthick-1-n { background-position: 1px -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } @@ -249,7 +251,35 @@ .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } -.ui-icon-carat-1-n { background-position: 0 0; } + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +.ui-corner-all, +.ui-corner-top, +.ui-corner-left, +.ui-corner-tl { + border-top-left-radius: 3px/*{cornerRadius}*/; +} +.ui-corner-all, +.ui-corner-top, +.ui-corner-right, +.ui-corner-tr { + border-top-right-radius: 3px/*{cornerRadius}*/; +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-left, +.ui-corner-bl { + border-bottom-left-radius: 3px/*{cornerRadius}*/; +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-right, +.ui-corner-br { + border-bottom-right-radius: 3px/*{cornerRadius}*/; +} /** * Accordion @@ -334,6 +364,11 @@ filter: Alpha(opacity=20); z-index: 1000; } +.ui-widget-shadow { + -webkit-box-shadow: 0 0 12px -8px #666; + -moz-box-shadow: 0 0 12px -8px #666; + box-shadow: 0 0 12px -8px #666; +} /** * Slider diff --git a/core/themes/seven/css/seven.base.css b/core/themes/seven/css/seven.base.css index 99c6908..ed840e4 100755 --- a/core/themes/seven/css/seven.base.css +++ b/core/themes/seven/css/seven.base.css @@ -120,6 +120,7 @@ ul, list-style-type: disc; list-style-image: none; margin: 0.25em 0 0.25em 1.5em; /* LTR */ + padding: 0; line-height: 160%; } [dir="rtl"] ul, @@ -141,6 +142,7 @@ ol { list-style-type: decimal; margin: 0.25em 0 0.25em 2em; /* LTR */ line-height: 160%; + padding: 0; } [dir="rtl"] ol { margin: 0.25em 2em 0.25em 0; diff --git a/core/themes/seven/css/seven.fonts.css b/core/themes/seven/css/seven.fonts.css deleted file mode 100755 index bfd4b81..0000000 --- a/core/themes/seven/css/seven.fonts.css +++ /dev/null @@ -1,48 +0,0 @@ -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - src: url('../fonts/OpenSans-Regular-webfont.eot'); /* Old IE */ - src: - url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/OpenSans-Regular-webfont.woff') format('woff'), - url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'), - url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); -} - -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: 400; - src: url('../fonts/OpenSans-Italic-webfont.eot'); /* Old IE */ - src: - url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/OpenSans-Italic-webfont.woff') format('woff'), - url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'), - url('../fonts/OpenSans-Italic-webfont.svg#open_sanslight') format('svg'); -} - -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 700; - src: url('../fonts/OpenSans-Bold-webfont.eot'); /* Old IE */ - src: - url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), - url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'), - url('../fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); -} - -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: 700; - src: url('../fonts/OpenSans-BoldItalic-webfont.eot'); /* Old IE */ - src: - url('../fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/OpenSans-BoldItalic-webfont.woff') format('woff'), - url('../fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'), - url('../fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); -} - diff --git a/core/themes/seven/css/style.css b/core/themes/seven/css/style.css index b4ec917..48d3b9b 100755 --- a/core/themes/seven/css/style.css +++ b/core/themes/seven/css/style.css @@ -3,7 +3,6 @@ */ .block { width: 100%; - /* Clearfix */ content: ""; display: table; @@ -144,19 +143,15 @@ ul.menu li.expanded { height: 1em; vertical-align: middle; padding: 0 3px; - background: url(../images/angle-right--gray.png) no-repeat center center; - /* SVG hack */ - background-image: - linear-gradient(transparent, transparent), - url(../images/angle-right--gray.svg); - background-size: auto 100%; + background: url(../images/chevron-right--gray--32.png) no-repeat center center; + background-size: 8px; } .breadcrumb li.last:after { display: none; } -@media screen and (min-width:720px) { +@media screen and (min-width: 720px) { .block-system-header .name-and-slogan { float: left; /* LTR */ } @@ -431,72 +426,66 @@ main { } /* Administration page listings. */ -ul.admin-list li { +.admin-list li { position: relative; - padding-left: 30px; /* LTR */ - padding-top: 9px; + padding: 9px 15px; border-top: 1px solid #ccc; - margin-left: 0; /* LTR */ - margin-bottom: 10px; - background: url(../images/list-item.png) no-repeat 0 11px; /* LTR */ + margin: 0; +} +ul.admin-list li { + /* Specificity bump to override upstream */ list-style-type: none; list-style-image: none; } -[dir="rtl"] ul.admin-list li { - padding: 9px 30px 0 0; - margin-right: 0; - background: url(../images/list-item-rtl.png) no-repeat right 11px; -} -ul.admin-list li:first-child { +.admin-list li:first-child { border-top: none; } .admin-panel .item-list ul, -ul.admin-list { +.admin-list { margin: 0; padding: 0; } .admin-panel .item-list ul, -ul.admin-list.compact { +.admin-list.compact { margin: 8px 0; } .admin-panel .item-list li, -ul.admin-list.compact li { +.admin-list.compact li { border: none; background: none; margin: 0 0 0.75em; line-height: 1; padding: 0; } -ul.admin-list li:last-child { +.admin-list li:last-child { border-bottom: none; } -ul.admin-list li a { - margin-left: -30px; /* LTR */ - padding: 0 0 4px 30px; /* LTR */ +.admin-list li a { + padding: 0 0 4px; /* LTR */ min-height: 0; } -[dir="rtl"] ul.admin-list li a { - margin-right: -30px; - margin-left: 0; - padding: 0 30px 4px 0; +[dir="rtl"] .admin-list li a { + padding: 0 0 4px; } -ul.admin-list.compact li a { +.admin-list.compact li a { margin-left: 0; /* LTR */ padding: 0; } -[dir="rtl"] ul.admin-list.compact li a { +[dir="rtl"] .admin-list.compact li a { margin-right: 0; } -ul.admin-list li div.description a { +.admin-list li div.description a { margin-left: 0; /* LTR */ padding: 0; min-height: inherit; } -[dir="rtl"] ul.admin-list li div.description a { +[dir="rtl"] .admin-list li div.description a { margin-right: 0; } .admin-panel .description { line-height: inherit; + padding: 2px 0; + margin: 0; } div.submitted { color: #898989; @@ -529,7 +518,9 @@ tr.drag { tr.drag-previous { background: #ffb; } -tr:hover { +tr:hover, +tr:hover td.active, +tr.odd:hover td.active { background: #ffff99; } th { @@ -599,25 +590,6 @@ tr.selected td { background: #ffc; border-color: #eeb; } -.system-status-report tr { - border-bottom: 1px solid #ccc; -} -.system-status-report tr.status { - color: #255b1e; - background-color: #e5ffe2; -} -.system-status-report tr.info { - color: #040f37; - background-color: #bdf; -} -.system-status-report tr.warning { - color: #840; - background-color: #fffce5; -} -.system-status-report tr.error { - color: #8c2e0b; - background-color: #fef5f1; -} .diff-table td { padding: 4px; } @@ -625,7 +597,7 @@ tr.selected td { /** * Responsive tables. */ -@media screen and (max-width:450px) { +@media screen and (max-width: 450px) { th.priority-low, td.priority-low, th.priority-medium, @@ -633,12 +605,13 @@ tr.selected td { display: none; } } -@media screen and (max-width:720px) { +@media screen and (max-width: 720px) { th.priority-low, td.priority-low { display: none; } } + /** * Fieldsets. * @@ -661,33 +634,33 @@ fieldset { position: relative; max-width: 100%; margin: 1em 0; - padding: 3em 0 0 0; /* LTR */ + padding: 3em 0 0 0; border-radius: 4px; background-color: #fff; border: 2px solid #EAEAEA; min-width: 0; } -[dir="rtl"] fieldset { - padding: 2.5em 0 0; -} fieldset .fieldset-legend { position: absolute; left: 0; /* LTR */ top: 0; width: 100%; margin-top: .25em; - padding-left: 15px; /* LTR */ + padding-left: 1em; /* LTR */ text-transform: uppercase; } [dir="rtl"] fieldset .fieldset-legend { right: 0; - padding-right: 15px; + padding-right: 1em; padding-left: 0; } legend { font-size: 120%; font-weight: normal; } +.fieldset-description { + margin-bottom: 1em; +} fieldset fieldset { background-color: #fff; } @@ -717,6 +690,13 @@ fieldset .fieldset-wrapper { border-radius: 4px; background: transparent; } +.js[dir="rtl"] fieldset.collapsible .fieldset-title { + background-image: none; + padding: .3em 1.8em .3em .3em; +} +.js fieldset.collapsible .fieldset-legend { + font-size: 1em; +} .js fieldset.collapsible .fieldset-legend a:before { content: ""; position: absolute; @@ -728,13 +708,22 @@ fieldset .fieldset-wrapper { border-top-color: #000; border-bottom: 0; } - +.js[dir="rtl"] fieldset.collapsible .fieldset-legend a:before { + left: auto; + right: .6em; +} .fieldset-legend span.summary { position: absolute; top: .4em; right: 2em; display: none; } +.fieldset-legend span.summary:not(:empty):before { + content: '('; +} +.fieldset-legend span.summary:not(:empty):after { + content: ')'; +} @media (min-width: 450px) { .fieldset-legend span.summary { display: block; @@ -750,6 +739,23 @@ fieldset .fieldset-wrapper { border: .32em solid transparent; border-left-color: black; } +.js[dir="rtl"] fieldset.collapsed .fieldset-legend a:before { + left: auto; + right: .8em; + border-left-color: transparent; + border-right-color: black; +} + +/** + * Views exposed form (matches fieldsets). + */ +form.views-exposed-form { + margin: 1em 0; + padding: 7px 13px; + border-radius: 4px; + background-color: #fff; + border: 2px solid #EAEAEA; +} /** * Autocomplete. @@ -758,6 +764,27 @@ fieldset .fieldset-wrapper { background-position: 98% center; } +[dir="rtl"].js input.form-autocomplete { + background-position: 1% center; +} + +#autocomplete { + border: 2px solid #d0d0d0; + border-top: 0; + background: hsla(0,0%,100%,0.95); + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; + box-shadow: 0 2px 5px 0 hsla(0,0%,0%,0.15); +} +#autocomplete ul { + padding: 5px 0; +} +#autocomplete li { + padding: 0 5px; +} + + /** * Form elements. */ @@ -816,12 +843,22 @@ td.checkbox .form-item input { /* Filter */ .filter-wrapper { - border-top: 0; padding: 10px 2px; + background-color: #f8f8f8; + border: 1px #d1d1d1; + border-style: none solid solid solid; + border-radius: 0; +} +.js fieldset.filter-wrapper.collapsed { + padding: 1.2em 0; +} +.js fieldset.filter-wrapper.collapsible .fieldset-legend { + font-size: .8333em; + text-transform: none; } .filter-wrapper .fieldset-wrapper { - padding: 0 6px; - margin-top: 45px; + padding: .6em 2.3em; + margin-top: 30px; } .filter-wrapper .form-item, .filter-wrapper .filter-guidelines, @@ -912,13 +949,6 @@ input.form-submit:active { -moz-box-shadow: 0 0 5px rgb(220, 220, 220); box-shadow: 0 0 5px rgb(220, 220, 220); } -input.form-button-disabled, -input.form-button-disabled:active { - background: #eee none; - border-color: #eee; - text-shadow: none; - color: #999; -} input.button-primary, button.button-primary { color: white; @@ -970,6 +1000,21 @@ button.button-danger:focus { color: white; background-color: #e7251b; } +input.form-button-disabled, +input.form-button-disabled:active, +input.form-button-disabled:hover, +input.form-button-disabled:focus, +input.form-disabled, +input.form-disabled:active, +input.form-disabled:hover, +input.form-disabled:focus { + background: #eee none; + border-color: #eee; + text-shadow: none; + color: #999; + box-shadow: none; + transition-property: none; +} input.form-autocomplete, input.form-text, input.form-tel, @@ -1061,7 +1106,8 @@ ul.action-links li { } ul.action-links a { padding-left: 15px; /* LTR */ - background: transparent url(../images/add.png) no-repeat 0 center; + background: transparent url(../images/plus--blue--32.png) no-repeat 0 center; + background-size: 9px; line-height: 30px; } [dir="rtl"] ul.action-links a { @@ -1079,27 +1125,69 @@ div.filter-options select { /** * System. */ -div.admin .right, -div.admin .left { +.admin .right, +.admin .left { width: 49%; margin: 0; } -div.admin-panel, -div.admin-panel .body { +.admin-panel, +.admin-panel .body { padding: 0; clear: left; } -div.admin-panel { +.admin-panel { margin: 0 0 20px; padding: 9px; - background: #f8f8f8; + background: #fff; border: 1px solid #ccc; + border-radius: 4px; } -div.admin-panel h3 { +.admin-panel h3 { + margin: 4px 0 4px 4px; /* LTR */ + padding: 6px 0 6px 35px; /* LTR */ font-size: 0.923em; text-transform: uppercase; - margin: 0; - padding-bottom: 9px; + /* All icons derived from Font Awesome. See README.md in the Seven theme.*/ + background: url('../images/chevron-circle-right--black--64.png') no-repeat left center; /* LTR */ + background-size: 23px; +} +[dir="rtl"] .admin-panel h3 { + margin-left: 0; + margin-right: 4px; + padding-left: 0; + padding-right: 35px; + background: url('../images/chevron-circle-left--black--64.png') no-repeat right center; /* LTR */ + background-size: 23px; +} +.admin-panel-people h3 { + background-image: url('../images/user--black--64.png'); +} +.admin-panel-content h3 { + background-image: url('../images/pencil-square-o--black--64.png'); +} +.admin-panel-system h3 { + background-image: url('../images/hdd-o--black--64.png'); +} +.admin-panel-administration h3 { + background-image: url('../images/cog--black--64.png'); +} +.admin-panel-media h3 { + background-image: url('../images/picture-o--black--64.png'); +} +.admin-panel-search h3 { + background-image: url('../images/search--black--64.png'); +} +.admin-panel-regional h3 { + background-image: url('../images/globe--black--64.png'); +} +.admin-panel-urls h3 { + background-image: url('../images/link--black--64.png'); +} +.admin-panel-development h3 { + background-image: url('../images/wrench--black--64.png'); +} +.admin-panel-services h3 { + background-image: url('../images/rss--black--64.png'); } /* admin/appearance */ @@ -1177,16 +1265,18 @@ div.admin-panel h3 { min-height: 150px; } .layout-settings-page .layout-options .form-type-checkbox:active label, -.layout-settings-page .layout-options .form-type-checkbox:hover label, .layout-settings-page .layout-options .form-type-checkbox input:checked + label, .layout-settings-form .layout-options .form-type-radio:active label, -.layout-settings-form .layout-options .form-type-radio:hover label, .layout-settings-form .layout-options .form-type-radio input:checked + label { background-color: #ffffff; border-color: #d0d0d0; } .layout-settings-page .layout-options .form-type-checkbox input:focus + label, -.layout-settings-form .layout-options .form-type-radio input:focus + label { +.layout-settings-page .layout-options .form-type-checkbox input:hover + label, +.layout-settings-page .layout-options .form-type-checkbox:hover input:checked + label, +.layout-settings-form .layout-options .form-type-radio input:focus + label, +.layout-settings-form .layout-options .form-type-radio input:hover + label, +.layout-settings-form .layout-options .form-type-radio:hover input:checked + label { background-color: #ffffff; border-color: #43afe4; } @@ -1228,9 +1318,22 @@ div.admin-options div.form-item { border: 0; } -/* Update status */ -.versions table.version { - border: none; +/* Status report */ +table.system-status-report { + border-collapse: separate; + border: 2px solid #EAEAEA; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +/* Update report */ +table.update { + border-collapse: separate; + border: 2px solid #EAEAEA; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } /* Maintenance theming */ @@ -1268,7 +1371,7 @@ body.maintenance-page .page-title { } body.maintenance-page .sidebar { float: left; /* LTR */ - width: 190px; + width: 220px; text-align: center; } [dir="rtl"] body.maintenance-page .sidebar { @@ -1280,7 +1383,7 @@ body.maintenance-page main { body.maintenance-page .sidebar + main { max-width: 590px; padding-right: 20px; /* LTR */ - margin-left: 210px; /* LTR */ + margin-left: 240px; /* LTR */ -webkit-box-sizing: border-box; box-sizing: border-box; } @@ -1288,7 +1391,7 @@ body.maintenance-page .sidebar + main { padding-right: 0; padding-left: 20px; margin-left: 0; - margin-right: 200px; + margin-right: 240px; } body.maintenance-page h1 { margin: 0 auto 1em; @@ -1316,71 +1419,82 @@ body.maintenance-page .password-parent { width: 100%; max-width: 300px; } -body.maintenance-page .form-submit { - display: block; -} body.maintenance-page #logo { max-width: 120px; margin: 0 auto; } ol.task-list { - margin-top: 20px; - margin-left: 0; /* LTR */ + margin: 0; + padding-left: 0; /* LTR */ padding-right: 17px; padding-bottom: 1em; - padding-left: 0; /* LTR */ font-size: .9em; text-align: left; /* LTR */ list-style-type: none; list-style-image: none; + } [dir="rtl"] ol.task-list { text-align: right; - margin-right: 0; + padding-left: 17px; padding-right: 0; } +body.maintenance-page ol.task-list { + margin-top: 50px; +} ol.task-list li { - padding: 0.5em 1em 0.5em 20px; /* LTR */ + padding: .75em; color: #1a1a1a; -} -[dir="rtl"] ol.task-list li { - padding: 0.5em 20px 0.5em 1em; + line-height: 20px; } ol.task-list li.active { - padding: 0.5em 1em 0.5em 20px; /* LTR */ + padding: .75em; font-weight: normal; color: #000; background: #E8E6E5; position: relative; } -[dir="rtl"] ol.task-list li.active { - padding: 0.5em 20px 0.5em 1em; -} ol.task-list li.active:after { left: 100%; /* LTR */ border: solid transparent; border-color: rgba(255, 255, 255, 0); border-left-color: #E8E6E5; /* LTR */ - border-width: 17px; + border-width: 21px; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; top: 50%; - margin-top: -17px; + margin-top: -21px; + font-size: 0; + line-height: 0; } [dir="rtl"] ol.task-list li.active:after { + left: auto; right: 100%; border-left-color: transparent; border-right-color: #E8E6E5; } -ol.task-list li.done { - background: transparent url(../images/task-check.png) no-repeat 0 50%; - color: green; +ol.task-list .task-item { + display: inline-block; + position: relative; + vertical-align: middle; + margin: 0 0 0 2.5em; /* LTR */ } -[dir="rtl"] ol.task-list li.done { - background: transparent url(../images/task-check.png) no-repeat right 50%; +[dir="rtl"] ol.task-list .task-item { + margin-right: 2.5em; + margin-left: 0; +} +ol.task-list .done:before { + content: ' '; + display: inline-block; + position: absolute; + width: 25px; + height: 25px; + border-radius: 15px; + background: #CFDE56 url(../../../misc/icon-ok.png) no-repeat center center; + background-size: 60%; } .step-indicator { @@ -1436,6 +1550,15 @@ div.add-or-remove-shortcuts { padding: 0 0 5px 5px; } +/* Date picker */ +[dir="rtl"] .ui-datepicker { + width: auto; +} +[dir="rtl"] .ui-datepicker .ui-datepicker-next { + right: auto; + top: 4px; +} + /* Dropbutton */ .js .dropbutton-widget { border: 1px solid #E9E8E8; @@ -1443,8 +1566,12 @@ div.add-or-remove-shortcuts { .js .dropbutton-wrapper.open .dropbutton-widget { border-color: #0d68a6; } +.js .dropbutton li { + text-align: inherit; +} .js .dropbutton a { text-transform: uppercase; + text-align: inherit; } .js .dropbutton a:hover { text-decoration: none; @@ -1456,6 +1583,9 @@ div.add-or-remove-shortcuts { font-size: 1.2em; font-weight: normal; } +.ui-dialog .ui-dialog-buttonpane { + background: #e9e8e8; +} .ui-dialog { border: 1px solid #d0d0d0; -webkit-border-radius: 4px; @@ -1571,57 +1701,71 @@ div.add-or-remove-shortcuts { } .progress .bar { margin: 0 0.2em .5em 0; - border: 2px solid #e5e5e6; - border-radius: 3px; + border: 2px solid #d0d0d0; + border-radius: 4px; overflow: hidden; - background: #e5e5e6; + background: #eaeaea; + height: 2.5em; } .progress .filled { + background: #0074bd; + background-image: -webkit-linear-gradient(#0085D9, #0074bd); + height: 100%; position: relative; overflow: hidden; - background: #CFDE56; - -webkit-transition: width .4s; - transition: width .4s; - will-change: width; + border-radius: 3px; } -/* Progress Bar Animation */ .progress .filled:after { - content: ""; + content: ''; position: absolute; - display: block; - width: 15%; - height: 100%; - background: -webkit-linear-gradient(0deg, #CFDE56 0%, #dbe788 60%, #CFDE56 65%); - background: linear-gradient(90deg, #CFDE56 0%, #dbe788 60%, #CFDE56 65%); - background-color: #CFDE56; - border-radius: 3px; - background-size: auto 200%; - background-position: 0 100%; - -webkit-animation: progressGradient 3s infinite; - animation: progressGradient 3s infinite; - -webkit-animation-fill-mode: forwards; - animation-fill-mode: forwards; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; -webkit-transition: width .4s; transition: width .4s; - will-change: left, width; + will-change: width; + background-image: -webkit-gradient(linear, 0 0, 100% 100%, + color-stop(.25, rgba(255, 255, 255, .2)), + color-stop(.25, transparent), color-stop(.5, transparent), + color-stop(.5, rgba(255, 255, 255, .2)), + color-stop(.75, rgba(255, 255, 255, .2)), + color-stop(.75, transparent), to(transparent) + ); + background-image: linear-gradient( + -45deg, + rgba(255, 255, 255, .2) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, .2) 50%, + rgba(255, 255, 255, .2) 75%, + transparent 75%, + transparent + ); + background-size: 50px 50px; + padding: 0 1px; + height: 2.5em; + -webkit-animation: animate-stripes 2s linear infinite; + -moz-animation: animate-stripes 2s linear infinite; + -webkit-transition: width 0.5s ease-out; + transition: width 0.5s ease-out; +} +[dir="rtl"] .progress .filled:after { + animation-direction: reverse; + -webkit-animation-direction: reverse; + -moz-animation-direction: reverse; } -@-webkit-keyframes progressGradient { - 0% { - left: -15%; - } - 100% { - left: 100%; - } +/** + * Progress bar animations. + */ +@-webkit-keyframes animate-stripes { + 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } - -@keyframes progressGradient { - 0% { - left: -15%; - } - 100% { - left: 100%; - } +@-ms-keyframes animate-stripes { + 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } +} +@keyframes animate-stripes { + 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } diff --git a/core/themes/seven/css/vertical-tabs.css b/core/themes/seven/css/vertical-tabs.css index 7c7756d..7953f37 100755 --- a/core/themes/seven/css/vertical-tabs.css +++ b/core/themes/seven/css/vertical-tabs.css @@ -7,24 +7,26 @@ border: 1px solid #ccc; background: #fff; } - @media (min-width: 750px) { +@media (min-width: 750px) { .vertical-tabs { padding: 0 0 0 15em; /* LTR */ } - [dir="rtl"] .vertical-tabs { - padding-left: 0; - padding-right: 15em; + [dir="rtl"] .vertical-tabs { + padding: 0 15em 0 0; } .vertical-tabs:before { content: ''; position: absolute; - left: 0; + left: 0; /* LTR */ top: 0; z-index: 0; width: 15em; height: 100%; background: #ccc; } + [dir="rtl"] .vertical-tabs:before { + right: 0; + } } .vertical-tabs-list { position: relative; @@ -34,16 +36,15 @@ border-top: 1px solid #ccc; padding: 0; } - @media (min-width: 750px) { +@media (min-width: 750px) { .vertical-tabs-list { display:block; float: left; /* LTR */ margin: -1px 0 -1px -15em; /* LTR */ } - [dir="rtl"] .vertical-tabs-list { - margin-left: 0; - margin-right: -15em; + [dir="rtl"] .vertical-tabs-list { float: right; + margin: -1px -15em -1px 0; } } .vertical-tab-item { @@ -74,14 +75,14 @@ width: 100%; } .vertical-tabs-pane { - /* Using position and height instead of display because of FF issue */ + /* Using position and height instead of display because of FF issue. */ position: absolute; left: -9999em; height: 0; border: 0; background: transparent; } - /* Show active pane */ + /* Show active pane. */ .vertical-tabs-pane.vertical-tab-selected { position: static; height: auto; @@ -95,7 +96,7 @@ display: block; } } - /* Layout of each tab */ +/* Layout of each tab. */ .vertical-tab-item { border: 1px solid #ccc; border-left-width: 0; /* LTR */ @@ -108,8 +109,10 @@ border-left-width: 1px; border-right-width: 0; } -/* .vertical-tab-link applies to fieldset legend at small screens and - a link in .vertical-tabs-list at larger screen sizes */ +/** + * .vertical-tab-link applies to fieldset legend at small screens and a link in + * .vertical-tabs-list at larger screen sizes. + */ .vertical-tab-link { display: block; text-decoration: none; @@ -181,7 +184,7 @@ line-height: normal; margin-bottom: 0; } -/* Styles for legend at smaller screen sizes */ +/* Styles for legend at smaller screen sizes. */ .vertical-tabs-pane > .vertical-tab-link { width: 100%; box-sizing: border-box; diff --git a/core/themes/seven/css/views-admin.seven.css b/core/themes/seven/css/views-admin.seven.css index 613e2cc..c8e1d94 100755 --- a/core/themes/seven/css/views-admin.seven.css +++ b/core/themes/seven/css/views-admin.seven.css @@ -75,6 +75,9 @@ fieldset.fieldset-no-legend { padding: 5px; } #views-ui-preview-form .form-submit { + /* Make sure button doesn't hang over help text */ + font-size: 0.875em; + padding: 0 18px; line-height: 36px; } @@ -104,7 +107,6 @@ fieldset.fieldset-no-legend { /* @group Lists */ -.views-admin ul.secondary, .views-admin .item-list ul { margin: 0; padding: 0; @@ -114,18 +116,6 @@ fieldset.fieldset-no-legend { clear: none; } -.views-displays ul.secondary li a, -.views-displays ul.secondary li.active a, -.views-displays ul.secondary li.active a.active { - padding: 2px 7px 3px; - border-radius: 7px; -} - -.views-displays ul.secondary li.active a, -.views-displays ul.secondary li.active a.active { - border: 1px solid transparent; -} - .views-admin .links li { padding-right: 0; /* LTR */ } @@ -139,10 +129,6 @@ fieldset.fieldset-no-legend { padding-right: 0; } -.views-display-top ul.secondary { - background-color: transparent; -} - /* @end */ /* @group Tables */ @@ -160,50 +146,73 @@ table th { color: #008BCB; } +#edit-display-settings-top { + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0; + border-radius: 4px 4px 0 0; +} + /* @end */ /* @group Attachment details tabs * * The tabs that switch between sections */ - -.views-admin .icon.add { - background-position: center 5px; +.views-display-top { + margin: 0 0 0 -6px; /* LTR */ +} +[dir="rtl"] .views-display-top { + margin: 0 -6px 0 0; +} +.views-display-top ul.secondary { + background-color: transparent; } - .views-displays .secondary a { - background-color: #f1f1f1; - -moz-border-radius: 7px; - -webkit-border-radius: 7px; - border-radius: 7px; + transition: none; + border: 2px solid #fff; + border-radius: 5px; /* Additional radius needed to include border width. */ +} +.views-displays .secondary li.add a { + background-color: #fff; + color: #008BCB; +} +.views-displays .secondary li.add a:hover { + background-color: #f7f7f7; color: #008BCB; } - .views-displays .secondary a:hover > .icon.add { - background-position: center -25px; + background-position: center 3px; } +.views-displays .secondary .action-list { + top: 30px; + box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3); +} +.views-displays .secondary .action-list li { + background-color: #fff; +} +.views-displays .secondary .action-list li:hover { + background-color: #f7f7f7; +} .views-displays .secondary .open > a { - -moz-border-radius: 7px 7px 0 0; - -webkit-border-radius: 7px 7px 0 0; - border-radius: 7px 7px 0 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } - .views-displays .secondary .open > a:hover { background-color: #f1f1f1; color: #008BCB; } .views-displays .secondary .action-list li:first-child { - -moz-border-radius: 0 7px 0 0; - -webkit-border-radius: 0 7px 0 0; - border-radius: 0 7px 0 0; + -moz-border-radius: 0 3px 0 0; + -webkit-border-radius: 0 3px 0 0; + border-radius: 0 3px 0 0; } .views-displays .secondary .action-list li:last-child { - -moz-border-radius: 0 0 7px 7px; - -webkit-border-radius: 0 0 7px 7px; - border-radius: 0 0 7px 7px; + -moz-border-radius: 0 0 3px 3px; + -webkit-border-radius: 0 0 3px 3px; + border-radius: 0 0 3px 3px; } .views-displays .secondary .action-list input.form-submit { @@ -223,6 +232,10 @@ table th { .views-ui-display-tab-bucket h3 { font-size: 14px; text-transform: uppercase; + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0; + border-radius: 4px 4px 0 0; + margin-bottom: .5em; } .views-ui-display-tab-bucket .links { @@ -323,9 +336,9 @@ table th { .filterable-option .form-item.form-type-checkbox { /* This selector is aggressive because Seven's reset for .form-items is aggressive. */ - padding-bottom: 4px; - padding-left: 4px; - padding-top: 4px; + padding-bottom: 8px; + padding-left: 8px; + padding-top: 8px; } /* @end */ diff --git a/core/themes/seven/images/add.png b/core/themes/seven/images/add.png deleted file mode 100755 index 1a2faf6..0000000 Binary files a/core/themes/seven/images/add.png and /dev/null differ diff --git a/core/themes/seven/images/angle-right--gray.png b/core/themes/seven/images/angle-right--gray.png deleted file mode 100755 index 6faf0ef..0000000 Binary files a/core/themes/seven/images/angle-right--gray.png and /dev/null differ diff --git a/core/themes/seven/images/angle-right--gray.svg b/core/themes/seven/images/angle-right--gray.svg deleted file mode 100755 index a3a0108..0000000 --- a/core/themes/seven/images/angle-right--gray.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/themes/seven/images/arrow-asc.png b/core/themes/seven/images/arrow-asc.png deleted file mode 100755 index 48fc5a3..0000000 Binary files a/core/themes/seven/images/arrow-asc.png and /dev/null differ diff --git a/core/themes/seven/images/arrow-desc.png b/core/themes/seven/images/arrow-desc.png deleted file mode 100755 index e4f0048..0000000 Binary files a/core/themes/seven/images/arrow-desc.png and /dev/null differ diff --git a/core/themes/seven/images/arrow-next.png b/core/themes/seven/images/arrow-next.png deleted file mode 100755 index ed551de..0000000 Binary files a/core/themes/seven/images/arrow-next.png and /dev/null differ diff --git a/core/themes/seven/images/arrow-prev.png b/core/themes/seven/images/arrow-prev.png deleted file mode 100755 index 64b2dac..0000000 Binary files a/core/themes/seven/images/arrow-prev.png and /dev/null differ diff --git a/core/themes/seven/images/caret-down--gray--32.png b/core/themes/seven/images/caret-down--gray--32.png new file mode 100644 index 0000000..a62d68c Binary files /dev/null and b/core/themes/seven/images/caret-down--gray--32.png differ diff --git a/core/themes/seven/images/caret-up--gray--32.png b/core/themes/seven/images/caret-up--gray--32.png new file mode 100644 index 0000000..c240418 Binary files /dev/null and b/core/themes/seven/images/caret-up--gray--32.png differ diff --git a/core/themes/seven/images/chevron-circle-left--black--64.png b/core/themes/seven/images/chevron-circle-left--black--64.png new file mode 100644 index 0000000..c93f0ed Binary files /dev/null and b/core/themes/seven/images/chevron-circle-left--black--64.png differ diff --git a/core/themes/seven/images/chevron-circle-right--black--64.png b/core/themes/seven/images/chevron-circle-right--black--64.png new file mode 100644 index 0000000..bb0ae3d Binary files /dev/null and b/core/themes/seven/images/chevron-circle-right--black--64.png differ diff --git a/core/themes/seven/images/chevron-right--gray--32.png b/core/themes/seven/images/chevron-right--gray--32.png new file mode 100644 index 0000000..3b5749e Binary files /dev/null and b/core/themes/seven/images/chevron-right--gray--32.png differ diff --git a/core/themes/seven/images/cog--black--64.png b/core/themes/seven/images/cog--black--64.png new file mode 100644 index 0000000..3e152d3 Binary files /dev/null and b/core/themes/seven/images/cog--black--64.png differ diff --git a/core/themes/seven/images/fc-rtl.png b/core/themes/seven/images/fc-rtl.png deleted file mode 100755 index e02cf9c..0000000 Binary files a/core/themes/seven/images/fc-rtl.png and /dev/null differ diff --git a/core/themes/seven/images/fc.png b/core/themes/seven/images/fc.png deleted file mode 100755 index ac44b41..0000000 Binary files a/core/themes/seven/images/fc.png and /dev/null differ diff --git a/core/themes/seven/images/globe--black--64.png b/core/themes/seven/images/globe--black--64.png new file mode 100644 index 0000000..b56a642 Binary files /dev/null and b/core/themes/seven/images/globe--black--64.png differ diff --git a/core/themes/seven/images/hdd-o--black--64.png b/core/themes/seven/images/hdd-o--black--64.png new file mode 100644 index 0000000..314e2ab Binary files /dev/null and b/core/themes/seven/images/hdd-o--black--64.png differ diff --git a/core/themes/seven/images/link--black--64.png b/core/themes/seven/images/link--black--64.png new file mode 100644 index 0000000..f0708cb Binary files /dev/null and b/core/themes/seven/images/link--black--64.png differ diff --git a/core/themes/seven/images/list-item-rtl.png b/core/themes/seven/images/list-item-rtl.png deleted file mode 100755 index aa654f7..0000000 Binary files a/core/themes/seven/images/list-item-rtl.png and /dev/null differ diff --git a/core/themes/seven/images/list-item.png b/core/themes/seven/images/list-item.png deleted file mode 100755 index d598d63..0000000 Binary files a/core/themes/seven/images/list-item.png and /dev/null differ diff --git a/core/themes/seven/images/pencil-square-o--black--64.png b/core/themes/seven/images/pencil-square-o--black--64.png new file mode 100644 index 0000000..e8f64bd Binary files /dev/null and b/core/themes/seven/images/pencil-square-o--black--64.png differ diff --git a/core/themes/seven/images/picture-o--black--64.png b/core/themes/seven/images/picture-o--black--64.png new file mode 100644 index 0000000..7a79b25 Binary files /dev/null and b/core/themes/seven/images/picture-o--black--64.png differ diff --git a/core/themes/seven/images/plus--blue--32.png b/core/themes/seven/images/plus--blue--32.png new file mode 100644 index 0000000..84a60f9 Binary files /dev/null and b/core/themes/seven/images/plus--blue--32.png differ diff --git a/core/themes/seven/images/rss--black--64.png b/core/themes/seven/images/rss--black--64.png new file mode 100644 index 0000000..99208af Binary files /dev/null and b/core/themes/seven/images/rss--black--64.png differ diff --git a/core/themes/seven/images/search--black--64.png b/core/themes/seven/images/search--black--64.png new file mode 100644 index 0000000..ca35f56 Binary files /dev/null and b/core/themes/seven/images/search--black--64.png differ diff --git a/core/themes/seven/images/task-check.png b/core/themes/seven/images/task-check.png deleted file mode 100755 index 64fadf8..0000000 Binary files a/core/themes/seven/images/task-check.png and /dev/null differ diff --git a/core/themes/seven/images/ui-icons-222222-256x240.png b/core/themes/seven/images/ui-icons-222222-256x240.png index 9a9606f..b0a64c1 100755 Binary files a/core/themes/seven/images/ui-icons-222222-256x240.png and b/core/themes/seven/images/ui-icons-222222-256x240.png differ diff --git a/core/themes/seven/images/ui-icons-454545-256x240.png b/core/themes/seven/images/ui-icons-454545-256x240.png index 80cb644..201b47f 100755 Binary files a/core/themes/seven/images/ui-icons-454545-256x240.png and b/core/themes/seven/images/ui-icons-454545-256x240.png differ diff --git a/core/themes/seven/images/ui-icons-800000-256x240.png b/core/themes/seven/images/ui-icons-800000-256x240.png index 7bf106b..39fc7db 100755 Binary files a/core/themes/seven/images/ui-icons-800000-256x240.png and b/core/themes/seven/images/ui-icons-800000-256x240.png differ diff --git a/core/themes/seven/images/ui-icons-888888-256x240.png b/core/themes/seven/images/ui-icons-888888-256x240.png index 8373712..a98beb8 100755 Binary files a/core/themes/seven/images/ui-icons-888888-256x240.png and b/core/themes/seven/images/ui-icons-888888-256x240.png differ diff --git a/core/themes/seven/images/ui-icons-ffffff-256x240.png b/core/themes/seven/images/ui-icons-ffffff-256x240.png index 3086869..62358db 100755 Binary files a/core/themes/seven/images/ui-icons-ffffff-256x240.png and b/core/themes/seven/images/ui-icons-ffffff-256x240.png differ diff --git a/core/themes/seven/images/user--black--64.png b/core/themes/seven/images/user--black--64.png new file mode 100644 index 0000000..920380a Binary files /dev/null and b/core/themes/seven/images/user--black--64.png differ diff --git a/core/themes/seven/images/wrench--black--64.png b/core/themes/seven/images/wrench--black--64.png new file mode 100644 index 0000000..7245b67 Binary files /dev/null and b/core/themes/seven/images/wrench--black--64.png differ diff --git a/core/themes/seven/js/script.js b/core/themes/seven/js/script.js new file mode 100644 index 0000000..d0baf4d --- /dev/null +++ b/core/themes/seven/js/script.js @@ -0,0 +1,324 @@ +/** + * @file + * Responsive Admin tabs. + */ + +(function ($) { +"use strict"; + +Backdrop.behaviors.responsivePrimaryTabs = { + attach: function(context, settings) { + var $primaryTabs = $(context).find('ul.tabs.primary').once('responsive-tabs'); + if ($primaryTabs.length === 0) { + return; + } + + var $tabsWrapper = $primaryTabs.parent(); + var $tabs = $('li', $primaryTabs); + var responsiveTabs = false; + var previousWindowWidth; + var tabWidths = []; + var tabHeight; + var widestTabWidth = 0; + var expandControlWidth; + var activeTabNth = $('li.active', $primaryTabs).index(); + var expandedTabsHeaderPadding = 0; + var defaultHeaderPadding = '20px'; + var $mobileHeaderPadder = $('
'); + var $body = $('body'); + var tabsWrapperPadding = { + 'top': parseInt($tabsWrapper.css('padding-top').replace("px", "")), + 'right': parseInt($tabsWrapper.css('padding-right').replace("px", "")), + 'left': parseInt($tabsWrapper.css('padding-left').replace("px", "")) + }; + + // These are essentially breakpoints to be measured against the tabArea. + var allTabsWidth; // Will show all tabs. + var activeTabAndBeforeWidth; // Will chop off tabs after active tab. + var activeTabAndAfterWidth; // Will chop off tabs before active tab. + + function initResponsivePrimaryTabs() { + tabHeight = $('li:first-child', $primaryTabs).outerHeight(); + $tabsWrapper.once('responsive-tabs', function(){ + $primaryTabs.after( + '' + ); + $('.expand-dropdown-tabs-control', $tabsWrapper).click(function(){ + $tabsWrapper.toggleClass('expand-dropdown-tabs'); + $(this).toggleClass('js-active'); + // If there's not enough room for mobile tabs. + if (expandedTabsHeaderPadding > 0 && $tabsWrapper.hasClass('expand-dropdown-tabs')) { + $mobileHeaderPadder.css('height', expandedTabsHeaderPadding + 'px'); + $body.prepend($mobileHeaderPadder); + $body.scrollTop($body.scrollTop() + expandedTabsHeaderPadding); + } else { + $mobileHeaderPadder.remove(); + $body.scrollTop($body.scrollTop() - expandedTabsHeaderPadding); + } + }); + + // Add control as first item. + expandControlWidth = $('.expand-dropdown-tabs-control', $tabsWrapper).outerWidth(); + + // Wrap tab link text with wrapper so we can get tab width if font size is updated + $tabs.find('a').wrapInner(''); + + calculateTabWidths(); + + // Add classes to display tabs correctly for current screen width. + adjustTabsDisplay(); + }); + } + + initResponsivePrimaryTabs(); + + function calculateTabWidths() { + // Reset var + tabWidths = []; + + // Calculate the tab widths before we do anything that will change them. + // Add expandControlWidth as first tab. + allTabsWidth = expandControlWidth; + activeTabAndBeforeWidth = expandControlWidth; + activeTabAndAfterWidth = expandControlWidth; + // Add each tab width. + $tabs.each(function(i) { + // Tab width is text width + 20px padding on both sides + 2px border-right + var currentTabWidth = $('.responsive-tabs-link-text-wrapper', this).outerWidth() + 42; + tabWidths.push(currentTabWidth); + allTabsWidth += currentTabWidth; + if (i <= activeTabNth) { + activeTabAndBeforeWidth += currentTabWidth; + } + if (i >= activeTabNth) { + activeTabAndAfterWidth += currentTabWidth; + } + if (currentTabWidth > widestTabWidth) { + widestTabWidth = currentTabWidth; + } + }); + + if (activeTabNth === 0) { + activeTabAndBeforeWidth += tabWidths[1]; + } else if (activeTabNth === $tabs.length - 1) { + activeTabAndAfterWidth += tabWidths[$tabs.length - 2]; + } + + } + + function closeTabsDropdown() { + $tabsWrapper.removeClass('expand-dropdown-tabs'); + $tabsWrapper.find('.expand-dropdown-tabs-control').removeClass('js-active'); + $mobileHeaderPadder.remove(); + } + + function handleResize() { + var currentWindowWidth = $(window).width(); + + // Only fire this if window width has changed. + if (currentWindowWidth !== previousWindowWidth) { + // Set previousWindowWidth for next event. + previousWindowWidth = currentWindowWidth; + + // Shut tabs dropdown if it's open + closeTabsDropdown(); + + // Add classes to display tabs correctly for current screen width. + adjustTabsDisplay(); + } + } + + function adjustTabsDisplay() { + var responsiveTabsType; + // Make sure that we've run initResponsivePrimaryTabs(), + // and that there are tabs on this page. + if (tabWidths.length > 0) { + var tabArea = $primaryTabs.outerWidth(); + var accumulatedTabWidth = expandControlWidth; + + if (tabArea >= allTabsWidth) { + responsiveTabs = false; + $tabsWrapper.addClass('desktop-primary-tabs'); + $tabsWrapper.removeClass('responsive-tabs-before responsive-tabs-after responsive-tabs-mobile'); + + // Cleanup things that may have been left over from other + // responsive tab strategies. + $primaryTabs.find('.duplicated-tab').removeClass('duplicated-tab'); + $tabsWrapper.find('.responsive-tabs-dropdown').remove(); + $primaryTabs.css({'padding-left': '', 'top': '' }); + } + else { + responsiveTabs = true; + + /** + * Responsive tab strategies. + * 'andBefore' Show the active tab and the ones before it. + * 'andAfter' Show the active tab and the ones after it. + * 'mobile' Put all tabs in a dropdown. + */ + var $responsiveTabsDropdown = $(''); + if (tabArea >= activeTabAndBeforeWidth) { + /** + * 'andBefore' Responsive Tab Strategy. + */ + responsiveTabsType = 'andBefore'; + + var $lastVisibleTab = null; + // Manage classes on tabs. + $tabs.each(function(i) { + accumulatedTabWidth += tabWidths[i]; + if (responsiveTabsType === 'andBefore') { + if (i <= activeTabNth || accumulatedTabWidth <= tabArea) { + $(this).removeClass('duplicated-tab'); + $lastVisibleTab = $(this); + } + else { + $responsiveTabsDropdown.append($(this).clone()); + $(this).addClass('duplicated-tab'); + } + } + }); + + // Manage classes on wrapper. + $tabsWrapper.addClass('responsive-tabs-before') + .removeClass('desktop-primary-tabs responsive-tabs-after responsive-tabs-mobile'); + + // Apply expand control's position. + var expandControlLeft = $lastVisibleTab.position().left + $lastVisibleTab.outerWidth() + tabsWrapperPadding.left; + $('.expand-dropdown-tabs-control', $tabsWrapper).css('left', expandControlLeft); + $responsiveTabsDropdown.css('right', tabArea - expandControlLeft - expandControlWidth + tabsWrapperPadding.right + tabsWrapperPadding.left); + + // Cleanup things that may have been left over from other + // responsive tab strategies. + $primaryTabs.css('padding-left', 0); + expandedTabsHeaderPadding = 0; + } + else if (tabArea >= activeTabAndAfterWidth) { + /** + * 'andAfter' Responsive Tab Strategy + */ + responsiveTabsType = 'andAfter'; + accumulatedTabWidth = expandControlWidth; + + // In order to get this dropdown to lay out correctly + // making new element that comes after the shown tabs. + // Iterate through tabs in reverse and give appropriate classes. + $($tabs.get().reverse()).each(function(reverseI) { + var i = $tabs.length - 1 - reverseI; + accumulatedTabWidth += tabWidths[i]; + if (i >= activeTabNth || accumulatedTabWidth <= tabArea) { + $(this).removeClass('duplicated-tab'); + } + else { + $responsiveTabsDropdown.prepend($(this).clone()); + $(this).addClass('duplicated-tab'); + } + }); + + // Dropdown control gets left aligned. + $('.expand-dropdown-tabs-control', $tabsWrapper).css('left', tabsWrapperPadding.left); + $primaryTabs.css('padding-left', expandControlWidth); + + // Manage classes on wrapper. + $tabsWrapper.addClass('responsive-tabs-after').removeClass('desktop-primary-tabs responsive-tabs-before responsive-tabs-mobile'); + + // Cleanup things that may have been left over from other + // responsive tab strategies. + expandedTabsHeaderPadding = 0; + } + else { + /** + * 'mobile' Responsive Tab Strategy. + */ + responsiveTabsType = 'mobile'; + + // Manage classes on tabs and wrappers + $primaryTabs.find('.duplicated-tab').removeClass('duplicated-tab'); + $tabsWrapper.addClass('responsive-tabs-mobile').removeClass('responsive-tabs-before responsive-tabs-after desktop-primary-tabs'); + + // Figure out how to lay primary tabs behind the expand control. + var tabsOffset = activeTabNth * (tabHeight + 2); + var tabsTopDistance = $tabsWrapper.position().top; + $primaryTabs.css('top', '-' + tabsOffset + 'px'); + if (tabsOffset > tabsTopDistance) { + expandedTabsHeaderPadding = tabsOffset - tabsTopDistance + defaultHeaderPadding; + } + + // Get the active tab's text. + var $activeTabText = $('' + $primaryTabs.find('li.active a').html() + ''); + $activeTabText.find('.element-invisible').remove(); + $tabsWrapper.find('.expand-dropdown-tabs-label').replaceWith($activeTabText); + $tabsWrapper.find('.expand-dropdown-tabs-control').css('left', 'auto'); + + // Cleanup things that may have been left over from other + // responsive tab strategies. + $tabsWrapper.find('.responsive-tabs-dropdown').remove(); + $primaryTabs.css('padding-left', 0); + } + + // Insert $responsiveTabsDropdown to markup if it's not empty. + if ($responsiveTabsDropdown.find('li').length > 0) { + $responsiveTabsDropdown.find('.duplicated-tab').removeClass('duplicated-tab'); + if ($tabsWrapper.find('.responsive-tabs-dropdown').length > 0) { + $tabsWrapper.find('.responsive-tabs-dropdown').replaceWith($responsiveTabsDropdown); + } + else { + $primaryTabs.after($responsiveTabsDropdown); + } + } + } + } + } + + // If they click outside of the responsive tabs, shut them + $('html').click(function(e){ + var $target = $(e.target); + if (responsiveTabs && !$target.is('.responsive-tabs-processed') && $target.parents('.responsive-tabs-processed').length < 1) { + closeTabsDropdown(); + } + }); + + Backdrop.isFontLoaded('Open Sans', function() { + adjustTabsDisplay(); + calculateTabWidths(); + }); + + Backdrop.optimizedResize.add(handleResize); + $(document).ready(handleResize); + } + +}; + +Backdrop.behaviors.sevenDropButtonWidths = { + attach: function(context, settings) { + function adjustDropButtonWidths() { + var $dropbutton = $(this); + + // Get widest item width. + var widestItem = 0, $item; + $dropbutton.find('li:hidden').each(function() { + // Use a clone element to avoid altering element CSS properties. + $item = $(this).clone().insertAfter($(this)).show().css('visibility','hidden'); + widestItem = Math.max($item.outerWidth(), widestItem); + $item.remove(); + }); + + // Set dropbutton list (