From: Jeremy Thomas Date: Wed, 26 Jul 2017 20:06:52 +0000 (+0100) Subject: Add features X-Git-Tag: 0.5.0~28 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4f8658d1a3c9bfe3cb6a40ea3f04e1408526fb04;p=thirdparty%2Fbulma.git Add features --- diff --git a/docs/_includes/features.html b/docs/_includes/features.html new file mode 100644 index 000000000..799ce682e --- /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 7e40335d2..e5a003dc0 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 ec4c60be4..d59cc5ff0 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 cb488f509..72504f6b6 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 0a2595526..d68e738b2 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 47289704e..4e972bacb 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