From: Jeremy Thomas Date: Tue, 10 Apr 2018 13:28:45 +0000 (+0100) Subject: Add index customized X-Git-Tag: 0.7.0~1^2~36 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=69899e57f5bea8e1f09b2258ee78638d36e22b32;p=thirdparty%2Fbulma.git Add index customized --- diff --git a/docs/_includes/global/head.html b/docs/_includes/global/head.html index 39fba8bc0..29ce1e02c 100644 --- a/docs/_includes/global/head.html +++ b/docs/_includes/global/head.html @@ -18,6 +18,9 @@ {% if page.mdi %} {% endif %} + {% if page.route == 'index' %} + + {% endif %} diff --git a/docs/_includes/index/customize.html b/docs/_includes/index/customize.html index 621f344d5..8a1680a89 100644 --- a/docs/_includes/index/customize.html +++ b/docs/_includes/index/customize.html @@ -2,52 +2,83 @@
-
-
-
-

- - So quick to customize - -

-

- Simply set your own Sass variables before importing Bulma -

-
-
+
+

+ + So quick to customize + +

+

+ Simply set your own Sass variables before importing Bulma +

+
-
-
-
-

- button -

-
- Button +
+
+
+ {% highlight scss %}{% include snippets/customized.html %}{% endhighlight %}
-
-
-

- button is-primary -

-
- Button -
-
-
-

- button is-primary is-large +

+ +
+
+

Before

+
+

+ Bulma +

+

+ Modern CSS framework based on Flexbox

+
+
+ +
+
+
+

+ + + +

+
+
+ Primary + Link +
- Button
-
-
-

- button is-primary is-large is-loading + +

+

After

+
+

+ Bulma +

+

+ Modern CSS framework based on Flexbox

+
+
+ +
+
+
+

+ + + +

+
+
+ Primary + Link +
- Button
diff --git a/docs/_includes/index/fullheight.html b/docs/_includes/index/fullheight.html index 6d32da900..fb451e922 100644 --- a/docs/_includes/index/fullheight.html +++ b/docs/_includes/index/fullheight.html @@ -1,4 +1,6 @@ -
+{% assign hero_link = site.data.links.by_id['layout-hero'] %} + +
@@ -10,16 +12,17 @@
-
-

- - - - - Easy vertical centering in fullscreen - -

-

Include any content you want, it's always centered

+
+
+

+ + Fullscreen vertical centering + +

+

+ Include any content you want, it's always centered +

+
diff --git a/docs/_includes/snippets/customized.html b/docs/_includes/snippets/customized.html new file mode 100644 index 000000000..9501367a9 --- /dev/null +++ b/docs/_includes/snippets/customized.html @@ -0,0 +1,25 @@ +// Import a Google Font +@import url('https://fonts.googleapis.com/css?family=Nunito:400,700'); + +// Set your brand colors +$purple: #8A4D76; +$pink: #FA7C91; +$brown: #757763; +$beige-light: #D0D1CD; +$beige-lighter: #EFF0EB; + +// Update Bulma's global variables +$family-sans-serif: "Nunito", serif; +$grey-dark: $brown; +$grey-light: $beige-light; +$primary: $purple; +$link: $pink; + +// Update some of Bulma's component variables +$control-border-width: 2px; +$input-background-color: $beige-lighter; +$input-border-color: transparent; +$input-shadow: none; + +// Import the rest of Bulma +@import "../bulma"; diff --git a/docs/_includes/test/features.html b/docs/_includes/test/features.html new file mode 100644 index 000000000..29699ea7c --- /dev/null +++ b/docs/_includes/test/features.html @@ -0,0 +1,638 @@ +{% capture form %} +
+ +
+ +
+
+
+

+ + + +

+
+
+

+ +

+
+
+

+ +

+
+
+

+ + +

+
+
+

+ Button +

+
+{% endcapture %} + +{% capture box %} +
+
+
+
+ Image +
+
+
+
+

+ John Smith @johnsmith 31m +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. +

+
+ +
+
+
+{% endcapture %} + +{% capture button %} +
+
Button
+
White
+
Light
+
Dark
+
Black
+
Text
+
+ +
+
Primary
+
Link
+
Info
+
Success
+
Warning
+
Danger
+
+{% endcapture %} + +{% capture notification %} +
+ + Lorem ipsum dolor sit amet, consectetur + adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, + consectetur adipiscing elit +
+{% endcapture %} + +{% capture progress %} +30% +{% endcapture %} + +{% capture tags %} +Black +Dark +Light +White +Primary +Link +Info +Success +Warning +Danger +{% endcapture %} + +{% capture cards %} +
+
+
+
+
+ Image +
+
+
+
+
+
+ Image +
+
+
+

John Smith

+

@johnsmith

+
+
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Phasellus nec iaculis mauris. @bulmaio. + #css #responsive +
+ 11:09 PM - 1 Jan 2016 +
+
+
+
+ +
+
+
+

+ “There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.” +

+

+ Jeff Atwood +

+
+ +
+
+
+{% endcapture %} + +{% capture dropdown %} +
+
+ + Dropdown button + + + + +
+
+
+ + Dropdown item + + + Other dropdown item + + + Active dropdown item + + + Other item + +
+ + With a divider + +
+
+
+{% endcapture %} + +{% capture message %} +
+
+

Primary

+ +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. +
+
+{% endcapture %} + +{% capture pagination %} + +{% endcapture %} + +{% capture panel %} + +{% endcapture %} + +{% capture tabs %} +
+ +
+{% endcapture %} + +{% capture media %} +
+
+

+ +

+
+
+
+

+ John Smith @johnsmith 31m +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. +

+
+ +
+
+ +
+
+{% endcapture %} + +{% capture menu %} + +{% endcapture %} + +
+
+
+
+

Elements

+
+
+
+
+

+ + Form + +

+
+
+ {{ form }} +
+
+ +
+
+

+ + Box + +

+
+
+ {{ box }} +
+
+ +
+
+

+ + Button + +

+
+
+ {{ button }} +
+
+ +
+
+

+ + Notification + +

+
+
+ {{ notification }} +
+
+ +
+
+

+ + Progress bar + +

+
+
+ {{ progress }} +
+
+ +
+
+

+ + Tags + +

+
+
+ {{ tags }} +
+
+
+
+
+
+ +
+ +
+
+
+
+

Components

+
+
+
+
+

+ + Card + +

+
+
+ {{ cards }} +
+
+ +
+
+

+ + Dropdown + +

+
+
+ {{ dropdown }} +
+
+ +
+
+

+ + Message + +

+
+
+ {{ message }} +
+
+ +
+
+

+ + Pagination + +

+
+
+ {{ pagination }} +
+
+ +
+
+

+ + Tabs + +

+
+
+ {{ tabs }} +
+
+ +
+
+

+ + Media object + +

+
+
+ {{ media }} +
+
+ +
+
+

+ + Menu + + and + + Panel + +

+
+
+
+
+ {{ menu }} +
+
+ {{ panel }} +
+
+
+
+ +
+
+
+
diff --git a/docs/_includes/test/from-to.html b/docs/_includes/test/from-to.html new file mode 100644 index 000000000..5d065c124 --- /dev/null +++ b/docs/_includes/test/from-to.html @@ -0,0 +1,31 @@ +
+
+
+

+ Bulma +

+

+ Modern CSS framework based on Flexbox +

+
+ +
+ +
+
+
+

+ + + +

+
+
+ Primary + Link +
+
+
+
diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass index a304de39e..e01572fe2 100644 --- a/docs/_sass/index.sass +++ b/docs/_sass/index.sass @@ -15,12 +15,71 @@ strong color: $primary .subtitle - color: $grey-light + color: $grey-light !important strong color: currentColor &.bd-is-left text-align: left +// Customize + +.bd-index-custom-title + color: $grey-light + +.bd-index-custom-example + padding: 1rem + .subtitle + margin-bottom: 0.5rem + +.bd-index-custom.bd-is-after + color: $brown + font-family: "Nunito", serif + margin-top: 0.5rem + a + color: $pink + &:hover + color: #363636 + .subtitle + color: $brown + .input, + .select select + background-color: $beige-lighter + border-color: transparent + border-width: 2px + box-shadow: none + font-family: "Nunito", serif + &:hover + border-color: $beige-light + &:focus + border-color: $pink + box-shadow: 0 0 0 0.125em rgba($pink, 0.25) + .select + &:not(.is-multiple):not(:hover) + &::after + border-color: $pink + .button + &.is-primary + background-color: $mauve + color: $white + &:hover + background-color: darken($mauve, 2.5%) + &:active + background-color: darken($mauve, 5%) + &.is-link + background-color: $pink + color: $white + &:hover + background-color: darken($pink, 2.5%) + &:active + background-color: darken($pink, 5%) + +// Fullscreen + +.bd-index-fullscreen + .tabs + a + color: $grey-light !important + // Columns #grid diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 00ed3a5ed..f43e6a935 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -12,6 +12,12 @@ $bleeding-red: #CA1F26 $star: #FFD257 $rss: #f26522 +$mauve: #8A4D76; +$pink: #FA7C91; +$brown: #757763; +$beige-light: #D0D1CD; +$beige-lighter: #EFF0EB; + $carbon-width: 300px $carbon-height: 100px $main-spacing: 3rem diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index f8f21f3f1..b7ee680c3 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -10121,7 +10121,7 @@ svg { } .bd-index-header .subtitle { - color: #b5b5b5; + color: #b5b5b5 !important; } .bd-index-header .subtitle strong { @@ -10132,6 +10132,90 @@ svg { text-align: left; } +.bd-index-custom-title { + color: #b5b5b5; +} + +.bd-index-custom-example { + padding: 1rem; +} + +.bd-index-custom-example .subtitle { + margin-bottom: 0.5rem; +} + +.bd-index-custom.bd-is-after { + color: #757763; + font-family: "Nunito", serif; + margin-top: 0.5rem; +} + +.bd-index-custom.bd-is-after a { + color: #FA7C91; +} + +.bd-index-custom.bd-is-after a:hover { + color: #363636; +} + +.bd-index-custom.bd-is-after .subtitle { + color: #757763; +} + +.bd-index-custom.bd-is-after .input, +.bd-index-custom.bd-is-after .select select { + background-color: #EFF0EB; + border-color: transparent; + border-width: 2px; + box-shadow: none; + font-family: "Nunito", serif; +} + +.bd-index-custom.bd-is-after .input:hover, +.bd-index-custom.bd-is-after .select select:hover { + border-color: #D0D1CD; +} + +.bd-index-custom.bd-is-after .input:focus, +.bd-index-custom.bd-is-after .select select:focus { + border-color: #FA7C91; + box-shadow: 0 0 0 0.125em rgba(250, 124, 145, 0.25); +} + +.bd-index-custom.bd-is-after .select:not(.is-multiple):not(:hover)::after { + border-color: #FA7C91; +} + +.bd-index-custom.bd-is-after .button.is-primary { + background-color: #8A4D76; + color: white; +} + +.bd-index-custom.bd-is-after .button.is-primary:hover { + background-color: #82486f; +} + +.bd-index-custom.bd-is-after .button.is-primary:active { + background-color: #7a4468; +} + +.bd-index-custom.bd-is-after .button.is-link { + background-color: #FA7C91; + color: white; +} + +.bd-index-custom.bd-is-after .button.is-link:hover { + background-color: #fa7087; +} + +.bd-index-custom.bd-is-after .button.is-link:active { + background-color: #f9637c; +} + +.bd-index-fullscreen .tabs a { + color: #b5b5b5 !important; +} + #grid .notification { padding-left: 0; padding-right: 0; diff --git a/docs/test.html b/docs/test.html new file mode 100644 index 000000000..3d198abf2 --- /dev/null +++ b/docs/test.html @@ -0,0 +1,22 @@ +--- +--- + + + + + + + + Bulma test page + + + + + {% include global/navbar.html %} + {% include test/from-to.html %} + {% include test/features.html %} + + + + + diff --git a/package.json b/package.json index d9994293f..e51f57fae 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,7 @@ "docs-sass": "node-sass --output-style expanded docs/bulma-docs.sass docs/css/bulma-docs.css", "start": "npm run build-sass -- --watch", "start-docs": "npm run docs-sass -- --watch", - "start-test": "npm run test-sass -- --watch", - "test-sass": "node-sass --output-style expanded docs/bulma-test.sass docs/css/bulma-test.css", + "start-test": "npm run test-scss -- --watch", "test-scss": "node-sass --output-style expanded docs/bulma-test.scss docs/css/bulma-test.css" }, "files": [