From 4f8658d1a3c9bfe3cb6a40ea3f04e1408526fb04 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Wed, 26 Jul 2017 21:06:52 +0100 Subject: [PATCH] Add features --- docs/_includes/features.html | 617 +++++++++++++++++++++++++++++++++++ docs/_sass/route.sass | 6 +- docs/_sass/specific.sass | 8 + docs/css/bulma-docs.css | 23 +- docs/index.html | 475 ++------------------------- sass/components/menu.sass | 31 +- 6 files changed, 695 insertions(+), 465 deletions(-) create mode 100644 docs/_includes/features.html diff --git a/docs/_includes/features.html b/docs/_includes/features.html new file mode 100644 index 00000000..799ce682 --- /dev/null +++ b/docs/_includes/features.html @@ -0,0 +1,617 @@ +{% 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
+
Link
+
+ +
+
Primary
+
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 tags %} +Black +Dark +Light +White +Primary +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 }} +
+
+ +
+
+

+ + 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/_sass/route.sass b/docs/_sass/route.sass index 7e40335d..e5a003dc 100644 --- a/docs/_sass/route.sass +++ b/docs/_sass/route.sass @@ -4,16 +4,18 @@ html.route-index .title.is-2 a color: #242424 - padding-left: 48px position: relative .title.is-2 a:hover color: #00d1b2 .title.is-2 .icon.is-medium - left: 8px + left: -80px + opacity: 0.1 position: absolute top: 10px + .fa + font-size: 56px .hero .title.is-2 a color: white diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index ec4c60be..d59cc5ff 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -25,3 +25,11 @@ color: $text-light &:hover text-decoration: underline + +.feature-title + color: $text-light + a + border-bottom: 1px solid transparent + color: $text-strong + &:hover + border-bottom-color: $primary diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index cb488f50..72504f6b 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -4163,7 +4163,7 @@ a.dropdown-item.is-active { .menu-list a:hover { background-color: whitesmoke; - color: #00d1b2; + color: #363636; } .menu-list a.is-active { @@ -8348,6 +8348,19 @@ html.route-index #carbon { text-decoration: underline; } +.feature-title { + color: #7a7a7a; +} + +.feature-title a { + border-bottom: 1px solid transparent; + color: #363636; +} + +.feature-title a:hover { + border-bottom-color: #00d1b2; +} + .example, .structure { border: 1px solid #ffdd57; @@ -8702,7 +8715,6 @@ html.route-index .title.is-2 { html.route-index .title.is-2 a { color: #242424; - padding-left: 48px; position: relative; } @@ -8711,11 +8723,16 @@ html.route-index .title.is-2 a:hover { } html.route-index .title.is-2 .icon.is-medium { - left: 8px; + left: -80px; + opacity: 0.1; position: absolute; top: 10px; } +html.route-index .title.is-2 .icon.is-medium .fa { + font-size: 56px; +} + html.route-index .hero .title.is-2 a { color: white; } diff --git a/docs/index.html b/docs/index.html index 0a259552..d68e738b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -88,10 +88,10 @@ route: index

+ + + - - - Simple columns

@@ -190,10 +190,10 @@ route: index

+ + + - - - Magic tiles

@@ -243,6 +243,7 @@ route: index
+
{% highlight html %}
@@ -275,6 +276,7 @@ route: index
{% endhighlight %}
+
@@ -282,10 +284,10 @@ route: index

+ + + - - - Flexible horizontal level

@@ -350,10 +352,10 @@ route: index

+ + + - - - Versatile media object

@@ -411,10 +413,10 @@ route: index

+ + + - - - Easy vertical centering in fullscreen

@@ -438,10 +440,10 @@ route: index

+ + + - - - Compose your element with modifier classes

@@ -490,446 +492,17 @@ route: index

+ + + - - - And all the usual elements and components

-
-
- -
-
-

Elements

-
-
-
-
-

Form

-
-
-
- -
- -
-
-
-

- - - -

-
-
-

- -

-
-
-

- -

-
-
-

- - -

-
-
-

- Button -

-
-
-
- -
-
-

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. -

-
- -
-
-
-
-
- -
-
-

Button

-
-
-
-
Button
-
White
-
Light
-
Dark
-
Black
-
Link
-
- -
-
Primary
-
Info
-
Success
-
Warning
-
Danger
-
-
-
- -
-
-

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 -
-
-
- -
-
-

Tags

-
-
- Black - Dark - Light - White - Primary - Info - Success - Warning - Danger -
-
-
-
- -
-
-

Components

-
-
-
-
-

Card

-
-
-
-
-
-
-
- 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 -

-
- -
-
-
-
-
- -
-
-

Dropdown

-
-
-
-
- - Dropdown button - - - - -
-
-
- - Dropdown item - - - Other dropdown item - - - Active dropdown item - - - Other item - -
- - With a divider - -
-
-
-
-
- -
-
-

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. -
-
-
-
- -
-
-

Pagination

-
-
- -
-
- -
-
-

Panel

-
-
- -
-
- -
-
-

Tabs

-
-
-
- -
-
-
- -
-
-
-
+{% include features.html %}
diff --git a/sass/components/menu.sass b/sass/components/menu.sass index 47289704..4e972bac 100644 --- a/sass/components/menu.sass +++ b/sass/components/menu.sass @@ -1,28 +1,41 @@ +$menu-size: $size-normal !default + +$menu-item: $text !default +$menu-item-radius: $radius-small !default +$menu-item-hover: $text-strong !default +$menu-item-hover-background: $background !default +$menu-item-active: $link-invert !default +$menu-item-active-background: $link !default + +$menu-list-border: $border !default + +$menu-label: $text-light !default + .menu - font-size: $size-normal + font-size: $menu-size .menu-list line-height: 1.25 a - border-radius: $radius-small - color: $text + border-radius: $menu-item-radius + color: $menu-item display: block padding: 0.5em 0.75em &:hover - background-color: $background - color: $link + background-color: $menu-item-hover-background + color: $menu-item-hover // Modifiers &.is-active - background-color: $link - color: $link-invert + background-color: $menu-item-active-background + color: $menu-item-active li ul - border-left: 1px solid $border + border-left: 1px solid $menu-list-border margin: 0.75em padding-left: 0.75em .menu-label - color: $text-light + color: $menu-label font-size: 0.8em letter-spacing: 0.1em text-transform: uppercase