Youen Toupin
3 years ago
87 changed files with 7566 additions and 154 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,21 @@
|
||||
The MIT License (MIT) |
||||
|
||||
Copyright (c) 2020 Jeremy Thomas |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in |
||||
all copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
||||
THE SOFTWARE. |
@ -0,0 +1,134 @@
|
||||
# [Bulma](https://bulma.io) |
||||
|
||||
Bulma is a **modern CSS framework** based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes). |
||||
|
||||
![Github](https://img.shields.io/github/v/release/jgthms/bulma?logo=Bulma) |
||||
[![npm](https://img.shields.io/npm/v/bulma.svg)][npm-link] |
||||
[![npm](https://img.shields.io/npm/dm/bulma.svg)][npm-link] |
||||
[![](https://data.jsdelivr.com/v1/package/npm/bulma/badge)](https://www.jsdelivr.com/package/npm/bulma) |
||||
[![Awesome][awesome-badge]][awesome-link] |
||||
[![Join the chat at https://gitter.im/jgthms/bulma](https://badges.gitter.im/jgthms/bulma.svg)](https://gitter.im/jgthms/bulma) |
||||
[![Build Status](https://travis-ci.org/jgthms/bulma.svg?branch=master)](https://travis-ci.org/jgthms/bulma) |
||||
|
||||
<a href="https://bulma.io"><img src="https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png" alt="Bulma: a Flexbox CSS framework" style="max-width:100%;" width="600"></a> |
||||
|
||||
## Quick install |
||||
|
||||
Bulma is constantly in development! Try it out now: |
||||
|
||||
### NPM |
||||
|
||||
```sh |
||||
npm install bulma |
||||
``` |
||||
|
||||
**or** |
||||
|
||||
### Yarn |
||||
|
||||
```sh |
||||
yarn add bulma |
||||
``` |
||||
|
||||
### Bower |
||||
|
||||
```sh |
||||
bower install bulma |
||||
``` |
||||
|
||||
### Import |
||||
After installation, you can import the CSS file into your project using this snippet: |
||||
|
||||
```sh |
||||
@import 'bulma/css/bulma.css' |
||||
``` |
||||
|
||||
### CDN |
||||
|
||||
[https://www.jsdelivr.com/package/npm/bulma](https://www.jsdelivr.com/package/npm/bulma) |
||||
|
||||
Feel free to raise an issue or submit a pull request. |
||||
|
||||
## CSS only |
||||
|
||||
Bulma is a **CSS** framework. As such, the sole output is a single CSS file: [bulma.css](https://github.com/jgthms/bulma/blob/master/css/bulma.css) |
||||
|
||||
You can either use that file, "out of the box", or download the Sass source files to customize the [variables](https://bulma.io/documentation/overview/variables/). |
||||
|
||||
There is **no** JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered "environment agnostic": it's just the style layer on top of the logic. |
||||
|
||||
## Browser Support |
||||
|
||||
Bulma uses [autoprefixer](https://github.com/postcss/autoprefixer) to make (most) Flexbox features compatible with earlier browser versions. According to [Can I use](https://caniuse.com/#feat=flexbox), Bulma is compatible with **recent** versions of: |
||||
|
||||
* Chrome |
||||
* Edge |
||||
* Firefox |
||||
* Opera |
||||
* Safari |
||||
|
||||
Internet Explorer (10+) is only partially supported. |
||||
|
||||
## Documentation |
||||
|
||||
The documentation resides in the [docs](docs) directory, and is built with the Ruby-based [Jekyll](https://jekyllrb.com/) tool. |
||||
|
||||
Browse the [online documentation here.](https://bulma.io/documentation/overview/start/) |
||||
|
||||
## Related projects |
||||
|
||||
| Project | Description | |
||||
|--------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------| |
||||
| [Bulma with Attribute Modules](https://github.com/j5bot/bulma-attribute-selectors) | Adds support for attribute-based selectors | |
||||
| [Bulma with Rails](https://github.com/joshuajansen/bulma-rails) | Integrates Bulma with the rails asset pipeline | |
||||
| [BulmaRazor](https://github.com/loogn/bulmarazor) | A lightweight component library based on Bulma and Blazor. | |
||||
| [Vue Admin (dead)](https://github.com/vue-bulma/vue-admin) | Vue Admin framework powered by Bulma | |
||||
| [Bulmaswatch](https://github.com/jenil/bulmaswatch) | Free themes for Bulma | |
||||
| [Goldfish (read-only)](https://github.com/Caiyeon/goldfish) | Vault UI with Bulma, Golang, and Vue Admin | |
||||
| [ember-bulma](https://github.com/open-tux/ember-bulma) | Ember addon providing a collection of UI components for Bulma | |
||||
| [Bloomer](https://bloomer.js.org) | A set of React components for Bulma | |
||||
| [React-bulma](https://github.com/kulakowka/react-bulma) | React.js components for Bulma | |
||||
| [Buefy](https://buefy.org/) | Lightweight UI components for Vue.js based on Bulma | |
||||
| [vue-bulma-components](https://github.com/vouill/vue-bulma-components) | Bulma components for Vue.js with straightforward syntax | |
||||
| [BulmaJS](https://github.com/VizuaaLOG/BulmaJS) | Javascript integration for Bulma. Written in ES6 with a data-* API | |
||||
| [Bulma-modal-fx](https://github.com/postare/bulma-modal-fx) | A set of modal window effects with CSS transitions and animations for Bulma | |
||||
| [Bulma Stylus](https://github.com/groenroos/bulma-stylus) | Up-to-date 1:1 translation to Stylus |
||||
| [Bulma.styl (read-only)](https://github.com/log1x/bulma.styl) | 1:1 Stylus translation of Bulma 0.6.11 | |
||||
| [elm-bulma](https://github.com/surprisetalk/elm-bulma) | Bulma + Elm | |
||||
| [elm-bulma-classes](https://github.com/ahstro/elm-bulma-classes) | Bulma classes prepared for usage with Elm | |
||||
| [Bulma Customizer](https://bulma-customizer.bstash.io/) | Bulma Customizer – Create your own **bespoke** Bulma build | |
||||
| [Fulma](https://fulma.github.io/Fulma/) | Wrapper around Bulma for [fable-react](https://github.com/fable-compiler/fable-react) | |
||||
| [Laravel Enso](https://github.com/laravel-enso/enso) | SPA Admin Panel built with Bulma, VueJS and Laravel | |
||||
| [Django Bulma](https://github.com/timonweb/django-bulma) | Integrates Bulma with Django | |
||||
| [Bulma Templates](https://github.com/dansup/bulma-templates) | Free Templates for Bulma | |
||||
| [React Bulma Components](https://github.com/couds/react-bulma-components) | Another React wrap on React for Bulma.io | |
||||
| [purescript-bulma](https://github.com/sectore/purescript-bulma) | PureScript bindings for Bulma | |
||||
| [Vue Datatable](https://github.com/laravel-enso/vuedatatable) | Bulma themed datatable based on Vue, Laravel & JSON templates | |
||||
| [bulma-fluent](https://mubaidr.github.io/bulma-fluent/) | Fluent Design Theme for Bulma inspired by Microsoft’s Fluent Design System | |
||||
| [csskrt-csskrt](https://github.com/4d11/csskrt-csskrt) | Automatically add Bulma classes to HTML files | |
||||
| [bulma-pagination-react](https://github.com/hipstersmoothie/bulma-pagination-react) | Bulma pagination as a react component | |
||||
| [bulma-helpers](https://github.com/jmaczan/bulma-helpers) | Functional / Atomic CSS classes for Bulma | |
||||
| [bulma-swatch-hook](https://github.com/hipstersmoothie/bulma-swatch-hook) | Bulma swatches as a react hook and a component | |
||||
| [BulmaWP (read-only)](https://github.com/tomhrtly/BulmaWP) | Starter WordPress theme for Bulma | |
||||
| [Ralma](https://github.com/aldi/ralma) | Stateless Ractive.js Components for Bulma | |
||||
| [Django Simple Bulma](https://github.com/python-discord/django-simple-bulma) | Lightweight integration of Bulma and Bulma-Extensions for your Django app | |
||||
| [rbx](https://dfee.github.io/rbx) | Comprehensive React UI Framework written in TypeScript | |
||||
| [Awesome Bulma Templates](https://github.com/aldi/awesome-bulma-templates) | Free real-world Templates built with Bulma | |
||||
| [Trunx](http://g14n.info/trunx) | Super Saiyan React components, son of awesome Bulma, implemented in TypeScript | |
||||
| [@aybolit/bulma](https://github.com/web-padawan/aybolit/tree/master/packages/bulma) | Web Components library inspired by Bulma and Bulma-extensions | |
||||
| [Drulma](https://www.drupal.org/project/drulma) | Drupal theme for Bulma. | |
||||
| [Bulrush](https://github.com/textbook/bulrush) | A Bulma-based Python Pelican blog theme | |
||||
| [Bulma Variable Export](https://github.com/service-paradis/bulma-variables-export) | Access Bulma Variables in Javascript/Typescript in project using Webpack | |
||||
| [Bulmil](https://github.com/gomah/bulmil) | An agnostic UI components library based on Web Components, made with Bulma & Stencil. | |
||||
| [Svelte Bulma Components](https://github.com/elcobvg/svelte-bulma-components) | Library of UI components to be used in [Svelte.js](https://svelte.technology/) or standalone. | |
||||
| [Bulma Nunjucks Starterkit](https://github.com/benninkcorien/nunjucks-starter-kit) | Starterkit for Nunjucks with Bulma. | |
||||
| [Bulma-Social](https://github.com/aldi/bulma-social) | Social Buttons and Colors for Bulma | |
||||
| [Divjoy](https://divjoy.com/?kit=bulma) | React codebase generator with Bulma templates | |
||||
|
||||
## Copyright and license ![Github](https://img.shields.io/github/license/jgthms/bulma?logo=Github) |
||||
|
||||
Code copyright 2021 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE). |
||||
|
||||
[npm-link]: https://www.npmjs.com/package/bulma |
||||
[awesome-link]: https://github.com/awesome-css-group/awesome-css |
||||
[awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg |
@ -0,0 +1,10 @@
|
||||
@charset "utf-8" |
||||
/*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */ |
||||
@import "sass/utilities/_all" |
||||
@import "sass/base/_all" |
||||
@import "sass/elements/_all" |
||||
@import "sass/form/_all" |
||||
@import "sass/components/_all" |
||||
@import "sass/grid/_all" |
||||
@import "sass/helpers/_all" |
||||
@import "sass/layout/_all" |
@ -0,0 +1,82 @@
|
||||
{ |
||||
"_from": "bulma@0.9.3", |
||||
"_id": "bulma@0.9.3", |
||||
"_inBundle": false, |
||||
"_integrity": "sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==", |
||||
"_location": "/bulma", |
||||
"_phantomChildren": {}, |
||||
"_requested": { |
||||
"type": "version", |
||||
"registry": true, |
||||
"raw": "bulma@0.9.3", |
||||
"name": "bulma", |
||||
"escapedName": "bulma", |
||||
"rawSpec": "0.9.3", |
||||
"saveSpec": null, |
||||
"fetchSpec": "0.9.3" |
||||
}, |
||||
"_requiredBy": [ |
||||
"#USER", |
||||
"/" |
||||
], |
||||
"_resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.3.tgz", |
||||
"_shasum": "ddccb7436ebe3e21bf47afe01d3c43a296b70243", |
||||
"_spec": "bulma@0.9.3", |
||||
"_where": "/Users/jthomas/Desktop", |
||||
"author": { |
||||
"name": "Jeremy Thomas", |
||||
"email": "bbxdesign@gmail.com", |
||||
"url": "https://jgthms.com" |
||||
}, |
||||
"bugs": { |
||||
"url": "https://github.com/jgthms/bulma/issues" |
||||
}, |
||||
"bundleDependencies": false, |
||||
"deprecated": false, |
||||
"description": "Modern CSS framework based on Flexbox", |
||||
"devDependencies": { |
||||
"autoprefixer": "^9.8.6", |
||||
"clean-css-cli": "^4.3.0", |
||||
"node-sass": "^4.14.1", |
||||
"postcss-cli": "^7.1.2", |
||||
"rimraf": "^3.0.2" |
||||
}, |
||||
"files": [ |
||||
"css", |
||||
"sass", |
||||
"bulma.sass", |
||||
"LICENSE", |
||||
"README.md" |
||||
], |
||||
"homepage": "https://bulma.io", |
||||
"keywords": [ |
||||
"css", |
||||
"sass", |
||||
"flexbox", |
||||
"responsive", |
||||
"framework" |
||||
], |
||||
"license": "MIT", |
||||
"main": "bulma.sass", |
||||
"name": "bulma", |
||||
"repository": { |
||||
"type": "git", |
||||
"url": "git+https://github.com/jgthms/bulma.git" |
||||
}, |
||||
"scripts": { |
||||
"build": "npm run build-sass && npm run build-autoprefix && npm run build-cleancss", |
||||
"build-autoprefix": "postcss --use autoprefixer --map false --output css/bulma.css css/bulma.css", |
||||
"build-cleancss": "cleancss -o css/bulma.min.css css/bulma.css", |
||||
"build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css", |
||||
"clean": "rimraf css", |
||||
"deploy": "npm run clean && npm run build && npm run rtl", |
||||
"rtl": "npm run rtl-sass && npm run rtl-autoprefix && npm run rtl-cleancss", |
||||
"rtl-autoprefix": "postcss --use autoprefixer --map false --output css/bulma-rtl.css css/bulma-rtl.css", |
||||
"rtl-cleancss": "cleancss -o css/bulma-rtl.min.css css/bulma-rtl.css", |
||||
"rtl-sass": "node-sass --output-style expanded --source-map true bulma-rtl.sass css/bulma-rtl.css", |
||||
"start": "npm run build-sass -- --watch" |
||||
}, |
||||
"style": "bulma/css/bulma.min.css", |
||||
"unpkg": "css/bulma.css", |
||||
"version": "0.9.3" |
||||
} |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,6 @@
|
||||
/* Bulma Base */ |
||||
@charset "utf-8" |
||||
|
||||
@import "minireset" |
||||
@import "generic" |
||||
@import "animations" |
@ -0,0 +1,5 @@
|
||||
@keyframes spinAround |
||||
from |
||||
transform: rotate(0deg) |
||||
to |
||||
transform: rotate(359deg) |
@ -0,0 +1,145 @@
|
||||
@import "../utilities/mixins" |
||||
|
||||
$body-background-color: $scheme-main !default |
||||
$body-size: 16px !default |
||||
$body-min-width: 300px !default |
||||
$body-rendering: optimizeLegibility !default |
||||
$body-family: $family-primary !default |
||||
$body-overflow-x: hidden !default |
||||
$body-overflow-y: scroll !default |
||||
|
||||
$body-color: $text !default |
||||
$body-font-size: 1em !default |
||||
$body-weight: $weight-normal !default |
||||
$body-line-height: 1.5 !default |
||||
|
||||
$code-family: $family-code !default |
||||
$code-padding: 0.25em 0.5em 0.25em !default |
||||
$code-weight: normal !default |
||||
$code-size: 0.875em !default |
||||
|
||||
$small-font-size: 0.875em !default |
||||
|
||||
$hr-background-color: $background !default |
||||
$hr-height: 2px !default |
||||
$hr-margin: 1.5rem 0 !default |
||||
|
||||
$strong-color: $text-strong !default |
||||
$strong-weight: $weight-bold !default |
||||
|
||||
$pre-font-size: 0.875em !default |
||||
$pre-padding: 1.25rem 1.5rem !default |
||||
$pre-code-font-size: 1em !default |
||||
|
||||
html |
||||
background-color: $body-background-color |
||||
font-size: $body-size |
||||
-moz-osx-font-smoothing: grayscale |
||||
-webkit-font-smoothing: antialiased |
||||
min-width: $body-min-width |
||||
overflow-x: $body-overflow-x |
||||
overflow-y: $body-overflow-y |
||||
text-rendering: $body-rendering |
||||
text-size-adjust: 100% |
||||
|
||||
article, |
||||
aside, |
||||
figure, |
||||
footer, |
||||
header, |
||||
hgroup, |
||||
section |
||||
display: block |
||||
|
||||
body, |
||||
button, |
||||
input, |
||||
optgroup, |
||||
select, |
||||
textarea |
||||
font-family: $body-family |
||||
|
||||
code, |
||||
pre |
||||
-moz-osx-font-smoothing: auto |
||||
-webkit-font-smoothing: auto |
||||
font-family: $code-family |
||||
|
||||
body |
||||
color: $body-color |
||||
font-size: $body-font-size |
||||
font-weight: $body-weight |
||||
line-height: $body-line-height |
||||
|
||||
// Inline |
||||
|
||||
a |
||||
color: $link |
||||
cursor: pointer |
||||
text-decoration: none |
||||
strong |
||||
color: currentColor |
||||
&:hover |
||||
color: $link-hover |
||||
|
||||
code |
||||
background-color: $code-background |
||||
color: $code |
||||
font-size: $code-size |
||||
font-weight: $code-weight |
||||
padding: $code-padding |
||||
|
||||
hr |
||||
background-color: $hr-background-color |
||||
border: none |
||||
display: block |
||||
height: $hr-height |
||||
margin: $hr-margin |
||||
|
||||
img |
||||
height: auto |
||||
max-width: 100% |
||||
|
||||
input[type="checkbox"], |
||||
input[type="radio"] |
||||
vertical-align: baseline |
||||
|
||||
small |
||||
font-size: $small-font-size |
||||
|
||||
span |
||||
font-style: inherit |
||||
font-weight: inherit |
||||
|
||||
strong |
||||
color: $strong-color |
||||
font-weight: $strong-weight |
||||
|
||||
// Block |
||||
|
||||
fieldset |
||||
border: none |
||||
|
||||
pre |
||||
+overflow-touch |
||||
background-color: $pre-background |
||||
color: $pre |
||||
font-size: $pre-font-size |
||||
overflow-x: auto |
||||
padding: $pre-padding |
||||
white-space: pre |
||||
word-wrap: normal |
||||
code |
||||
background-color: transparent |
||||
color: currentColor |
||||
font-size: $pre-code-font-size |
||||
padding: 0 |
||||
|
||||
table |
||||
td, |
||||
th |
||||
vertical-align: top |
||||
&:not([align]) |
||||
text-align: inherit |
||||
th |
||||
color: $text-strong |
@ -0,0 +1 @@
|
||||
@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead." |
@ -0,0 +1,79 @@
|
||||
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ |
||||
// Blocks |
||||
html, |
||||
body, |
||||
p, |
||||
ol, |
||||
ul, |
||||
li, |
||||
dl, |
||||
dt, |
||||
dd, |
||||
blockquote, |
||||
figure, |
||||
fieldset, |
||||
legend, |
||||
textarea, |
||||
pre, |
||||
iframe, |
||||
hr, |
||||
h1, |
||||
h2, |
||||
h3, |
||||
h4, |
||||
h5, |
||||
h6 |
||||
margin: 0 |
||||
padding: 0 |
||||
|
||||
// Headings |
||||
h1, |
||||
h2, |
||||
h3, |
||||
h4, |
||||
h5, |
||||
h6 |
||||
font-size: 100% |
||||
font-weight: normal |
||||
|
||||
// List |
||||
ul |
||||
list-style: none |
||||
|
||||
// Form |
||||
button, |
||||
input, |
||||
select, |
||||
textarea |
||||
margin: 0 |
||||
|
||||
// Box sizing |
||||
html |
||||
box-sizing: border-box |
||||
|
||||
* |
||||
&, |
||||
&::before, |
||||
&::after |
||||
box-sizing: inherit |
||||
|
||||
// Media |
||||
img, |
||||
video |
||||
height: auto |
||||
max-width: 100% |
||||
|
||||
// Iframe |
||||
iframe |
||||
border: 0 |
||||
|
||||
// Table |
||||
table |
||||
border-collapse: collapse |
||||
border-spacing: 0 |
||||
|
||||
td, |
||||
th |
||||
padding: 0 |
||||
&:not([align]) |
||||
text-align: inherit |
@ -0,0 +1,15 @@
|
||||
/* Bulma Components */ |
||||
@charset "utf-8" |
||||
|
||||
@import "breadcrumb" |
||||
@import "card" |
||||
@import "dropdown" |
||||
@import "level" |
||||
@import "media" |
||||
@import "menu" |
||||
@import "message" |
||||
@import "modal" |
||||
@import "navbar" |
||||
@import "pagination" |
||||
@import "panel" |
||||
@import "tabs" |
@ -0,0 +1,77 @@
|
||||
@import "../utilities/mixins" |
||||
|
||||
$breadcrumb-item-color: $link !default |
||||
$breadcrumb-item-hover-color: $link-hover !default |
||||
$breadcrumb-item-active-color: $text-strong !default |
||||
|
||||
$breadcrumb-item-padding-vertical: 0 !default |
||||
$breadcrumb-item-padding-horizontal: 0.75em !default |
||||
|
||||
$breadcrumb-item-separator-color: $border-hover !default |
||||
|
||||
.breadcrumb |
||||
@extend %block |
||||
@extend %unselectable |
||||
font-size: $size-normal |
||||
white-space: nowrap |
||||
a |
||||
align-items: center |
||||
color: $breadcrumb-item-color |
||||
display: flex |
||||
justify-content: center |
||||
padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal |
||||
&:hover |
||||
color: $breadcrumb-item-hover-color |
||||
li |
||||
align-items: center |
||||
display: flex |
||||
&:first-child a |
||||
+ltr-property("padding", 0, false) |
||||
&.is-active |
||||
a |
||||
color: $breadcrumb-item-active-color |
||||
cursor: default |
||||
pointer-events: none |
||||
& + li::before |
||||
color: $breadcrumb-item-separator-color |
||||
content: "\0002f" |
||||
ul, |
||||
ol |
||||
align-items: flex-start |
||||
display: flex |
||||
flex-wrap: wrap |
||||
justify-content: flex-start |
||||
.icon |
||||
&:first-child |
||||
+ltr-property("margin", 0.5em) |
||||
&:last-child |
||||
+ltr-property("margin", 0.5em, false) |
||||
// Alignment |
||||
&.is-centered |
||||
ol, |
||||
ul |
||||
justify-content: center |
||||
&.is-right |
||||
ol, |
||||
ul |
||||
justify-content: flex-end |
||||
// Sizes |
||||
&.is-small |
||||
font-size: $size-small |
||||
&.is-medium |
||||
font-size: $size-medium |
||||
&.is-large |
||||
font-size: $size-large |
||||
// Styles |
||||
&.has-arrow-separator |
||||
li + li::before |
||||
content: "\02192" |
||||
&.has-bullet-separator |
||||
li + li::before |
||||
content: "\02022" |
||||
&.has-dot-separator |
||||
li + li::before |
||||
content: "\000b7" |
||||
&.has-succeeds-separator |
||||
li + li::before |
||||
content: "\0227B" |
@ -0,0 +1,103 @@
|
||||
@import "../utilities/mixins" |
||||
|
||||
$card-color: $text !default |
||||
$card-background-color: $scheme-main !default |
||||
$card-shadow: $shadow !default |
||||
$card-radius: 0.25rem !default |
||||
|
||||
$card-header-background-color: transparent !default |
||||
$card-header-color: $text-strong !default |
||||
$card-header-padding: 0.75rem 1rem !default |
||||
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default |
||||
$card-header-weight: $weight-bold !default |
||||
|
||||
$card-content-background-color: transparent !default |
||||
$card-content-padding: 1.5rem !default |
||||
|
||||
$card-footer-background-color: transparent !default |
||||
$card-footer-border-top: 1px solid $border-light !default |
||||
$card-footer-padding: 0.75rem !default |
||||
|
||||
$card-media-margin: $block-spacing !default |
||||
|
||||
.card |
||||
background-color: $card-background-color |
||||
border-radius: $card-radius |
||||
box-shadow: $card-shadow |
||||
color: $card-color |
||||
max-width: 100% |
||||
position: relative |
||||
|
||||
%card-item |
||||
&:first-child |
||||
border-top-left-radius: $card-radius |
||||
border-top-right-radius: $card-radius |
||||
&:last-child |
||||
border-bottom-left-radius: $card-radius |
||||
border-bottom-right-radius: $card-radius |
||||
|
||||
.card-header |
||||
@extend %card-item |
||||
background-color: $card-header-background-color |
||||
align-items: stretch |
||||
box-shadow: $card-header-shadow |
||||
display: flex |
||||
|
||||
.card-header-title |
||||
align-items: center |
||||
color: $card-header-color |
||||
display: flex |
||||
flex-grow: 1 |
||||
font-weight: $card-header-weight |
||||
padding: $card-header-padding |
||||
&.is-centered |
||||
justify-content: center |
||||
|
||||
.card-header-icon |
||||
+reset |
||||
align-items: center |
||||
cursor: pointer |
||||
display: flex |
||||
justify-content: center |
||||
padding: $card-header-padding |
||||
|
||||
.card-image |
||||
display: block |
||||
position: relative |
||||
&:first-child |
||||
img |
||||
border-top-left-radius: $card-radius |
||||
border-top-right-radius: $card-radius |
||||
&:last-child |
||||
img |
||||
border-bottom-left-radius: $card-radius |
||||
border-bottom-right-radius: $card-radius |
||||
|
||||
.card-content |
||||
@extend %card-item |
||||
background-color: $card-content-background-color |
||||
padding: $card-content-padding |
||||
|
||||
.card-footer |
||||
@extend %card-item |
||||
background-color: $card-footer-background-color |
||||
border-top: $card-footer-border-top |
||||
align-items: stretch |
||||
display: flex |
||||
|
||||
.card-footer-item |
||||
align-items: center |
||||
display: flex |
||||
flex-basis: 0 |
||||
flex-grow: 1 |
||||
flex-shrink: 0 |
||||
justify-content: center |
||||
padding: $card-footer-padding |
||||
&:not(:last-child) |
||||
+ltr-property("border", $card-footer-border-top) |
||||
|
||||
// Combinations |
||||
|
||||
.card |
||||
.media:not(:last-child) |
||||
margin-bottom: $card-media-margin |
@ -0,0 +1,83 @@
|
||||
@import "../utilities/mixins" |
||||
|
||||
$dropdown-menu-min-width: 12rem !default |
||||
|
||||
$dropdown-content-background-color: $scheme-main !default |
||||
$dropdown-content-arrow: $link !default |
||||
$dropdown-content-offset: 4px !default |
||||
$dropdown-content-padding-bottom: 0.5rem !default |
||||
$dropdown-content-padding-top: 0.5rem !default |
||||
$dropdown-content-radius: $radius !default |
||||
$dropdown-content-shadow: $shadow !default |
||||
$dropdown-content-z: 20 !default |
||||
|
||||
$dropdown-item-color: $text !default |
||||
$dropdown-item-hover-color: $scheme-invert !default |
||||
$dropdown-item-hover-background-color: $background !default |
||||
$dropdown-item-active-color: $link-invert !default |
||||
$dropdown-item-active-background-color: $link !default |
||||
|
||||
$dropdown-divider-background-color: $border-light !default |
||||
|
||||
.dropdown |
||||
display: inline-flex |
||||
position: relative |
||||
vertical-align: top |
||||
&.is-active, |
||||
&.is-hoverable:hover |
||||
.dropdown-menu |
||||
display: block |
||||
&.is-right |
||||
.dropdown-menu |
||||
left: auto |
||||
right: 0 |
||||
&.is-up |
||||
.dropdown-menu |
||||
bottom: 100% |
||||
padding-bottom: $dropdown-content-offset |
||||
padding-top: initial |
||||
top: auto |
||||
|
||||
.dropdown-menu |
||||
display: none |
||||
+ltr-position(0, false) |
||||
min-width: $dropdown-menu-min-width |
||||
padding-top: $dropdown-content-offset |
||||
position: absolute |
||||
top: 100% |
||||
z-index: $dropdown-content-z |
||||
|
||||
.dropdown-content |
||||
background-color: $dropdown-content-background-color |
||||
border-radius: $dropdown-content-radius |
||||
box-shadow: $dropdown-content-shadow |
||||
padding-bottom: $dropdown-content-padding-bottom |
||||
padding-top: $dropdown-content-padding-top |
||||
|
||||
.dropdown-item |
||||
color: $dropdown-item-color |
||||
display: block |
||||
font-size: 0.875rem |
||||
line-height: 1.5 |
||||
padding: 0.375rem 1rem |
||||
position: relative |
||||
|
||||
a.dropdown-item, |
||||
button.dropdown-item |
||||
+ltr-property("padding", 3rem) |
||||
text-align: inherit |
||||
white-space: nowrap |
||||
width: 100% |
||||
&:hover |
||||
background-color: $dropdown-item-hover-background-color |
||||
color: $dropdown-item-hover-color |
||||
&.is-active |
||||
background-color: $dropdown-item-active-background-color |
||||
color: $dropdown-item-active-color |
||||
|
||||
.dropdown-divider |
||||
background-color: $dropdown-divider-background-color |
||||
border: none |
||||
display: block |
||||
height: 1px |
||||
margin: 0.5rem 0 |
@ -0,0 +1,79 @@
|
||||
@import "../utilities/mixins" |
||||
|
||||
$level-item-spacing: ($block-spacing * 0.5) !default |
||||
|
||||
.level |
||||
@extend %block |
||||
align-items: center |
||||
justify-content: space-between |
||||
code |
||||
border-radius: $radius |
||||
img |
||||
display: inline-block |
||||
vertical-align: top |
||||
// Modifiers |
||||
&.is-mobile |
||||
display: flex |
||||
.level-left, |
||||
.level-right |
||||
display: flex |
||||
.level-left + .level-right |
||||
margin-top: 0 |
||||
.level-item |
||||
&:not(:last-child) |
||||
margin-bottom: 0 |
||||
+ltr-property("margin", $level-item-spacing) |
||||
&:not(.is-narrow) |
||||
flex-grow: 1 |
||||
// Responsiveness |
||||
+tablet |
||||
display: flex |
||||
& > .level-item |
||||
&:not(.is-narrow) |
||||
flex-grow: 1 |
||||
|
||||
.level-item |
||||
align-items: center |
||||
display: flex |
||||
flex-basis: auto |
||||
flex-grow: 0 |
||||
flex-shrink: 0 |
||||
justify-content: center |
||||
.title, |
||||
.subtitle |
||||
margin-bottom: 0 |
||||
// Responsiveness |
||||
+mobile |
||||
&:not(:last-child) |
||||
margin-bottom: $level-item-spacing |
||||
|
||||
.level-left, |
||||
.level-right |
||||
flex-basis: auto |
||||
flex-grow: 0 |
||||
flex-shrink: 0 |
||||
.level-item |
||||
// Modifiers |
||||
&.is-flexible |
||||
flex-grow: 1 |
||||
// Responsiveness |
||||
+tablet |
||||
&:not(:last-child) |
||||
+ltr-property("margin", $level-item-spacing) |
||||
|
||||
.level-left |
||||
align-items: center |
||||
justify-content: flex-start |
||||
// Responsiveness |
||||
+mobile |
||||
& + .level-right |
||||
margin-top: 1.5rem |
||||
+tablet |
||||
display: flex |
||||
|
||||
.level-right |
||||
align-items: center |
||||
justify-content: flex-end |
||||
// Responsiveness |
||||
+tablet |
||||
display: flex |
@ -0,0 +1,59 @@
|
||||
@import "../utilities/mixins" |
||||
|
||||
$media-border-color: bulmaRgba($border, 0.5) !default |
||||
$media-border-size: 1px !default |
||||
$media-spacing: 1rem !default |
||||
$media-spacing-large: 1.5rem !default |
||||
$media-content-spacing: 0.75rem !default |
||||
$media-level-1-spacing: 0.75rem !default |
||||
$media-level-1-content-spacing: 0.5rem !default |
||||
$media-level-2-spacing: 0.5rem !default |
||||
|
||||
.media |
||||
align-items: flex-start |
||||
display: flex |
||||
text-align: inherit |
||||
.content:not(:last-child) |
||||
margin-bottom: $media-content-spacing |
||||
.media |
||||
border-top: $media-border-size solid $media-border-color |
||||
display: flex |
||||
padding-top: $media-level-1-spacing |
||||
.content:not(:last-child), |
||||
.control:not(:last-child) |
||||
margin-bottom: $media-level-1-content-spacing |
||||
.media |
||||
padding-top: $media-level-2-spacing |
||||
& + .media |
||||
margin-top: $media-level-2-spacing |
||||
& + .media |
||||
border-top: $media-border-size solid $media-border-color |
||||
margin-top: $media-spacing |
||||
padding-top: $media-spacing |
||||
// Sizes |
||||
&.is-large |
||||
& + .media |
||||
margin-top: $media-spacing-large |
||||
padding-top: $media-spacing-large |
||||
|
||||
.media-left, |
||||
.media-right |
||||
flex-basis: auto |
||||
flex-grow: 0 |
||||
flex-shrink: 0 |
||||
|
||||
.media-left |
||||
+ltr-property("margin", $media-spacing) |
||||
|
||||
.media-right |
||||
+ltr-property("margin", $media-spacing, false) |
||||
|
||||
.media-content |
||||
flex-basis: auto |
||||
flex-grow: 1 |
||||
flex-shrink: 1 |
||||
text-align: inherit |
||||
|
||||
+mobile |
||||
.media-content |
||||
overflow-x: auto |
@ -0,0 +1,59 @@
|
||||
@import "../utilities/mixins" |
||||
|
||||
$menu-item-color: $text !default |
||||
$menu-item-radius: $radius-small !default |
||||
$menu-item-hover-color: $text-strong !default |
||||
$menu-item-hover-background-color: $background !default |
||||
$menu-item-active-color: $link-invert !default |
||||
$menu-item-active-background-color: $link !default |
||||
|
||||
$menu-list-border-left: 1px solid $border !default |
||||
$menu-list-line-height: 1.25 !default |
||||
$menu-list-link-padding: 0.5em 0.75em !default |
||||
$menu-nested-list-margin: 0.75em !default |
||||
$menu-nested-list-padding-left: 0.75em !default |
||||
|
||||
$menu-label-color: $text-light !default |
||||
$menu-label-font-size: 0.75em !default |
||||
$menu-label-letter-spacing: 0.1em !default |
||||
$menu-label-spacing: 1em !default |
||||
|
||||
.menu |
||||
font-size: $size-normal |
||||
// Sizes |
||||
&.is-small |
||||
font-size: $size-small |
||||
&.is-medium |
||||
font-size: $size-medium |
||||
&.is-large |
||||
font-size: $size-large |
||||
|
||||
.menu-list |
||||
line-height: $menu-list-line-height |
||||
a |
||||
border-radius: $menu-item-radius |
||||
color: $menu-item-color |
||||
display: block |
||||
padding: $menu-list-link-padding |
||||
&:hover |
||||
background-color: $menu-item-hover-background-color |
||||
color: $menu-item-hover-color |
||||
// Modifiers |
||||
&.is-active |
||||
background-color: $menu-item-active-background-color |
||||
color: $menu-item-active-color |
||||
li |
||||
ul |
||||
+ltr-property("border", $menu-list-border-left, false) |
||||
margin: $menu-nested-list-margin |
||||
+ltr-property("padding", $menu-nested-list-padding-left, false) |
||||
|
||||
.menu-label |
||||
color: $menu-label-color |
||||
font-size: $menu-label-font-size |
||||
letter-spacing: $menu-label-letter-spacing |
||||
text-transform: uppercase |
||||
&:not(:first-child) |
||||
margin-top: $menu-label-spacing |
||||
&:not(:last-child) |
||||
margin-bottom: $menu-label-spacing |
@ -0,0 +1,101 @@
|
||||
@import "../utilities/mixins" |
||||
|
||||
$message-background-color: $background !default |
||||
$message-radius: $radius !default |
||||
|
||||
$message-header-background-color: $text !default |
||||
$message-header-color: $text-invert !default |
||||
$message-header-weight: $weight-bold !default |
||||
$message-header-padding: 0.75em 1em !default |
||||
$message-header-radius: $radius !default |
||||
|
||||
$message-body-border-color: $border !default |
||||
$message-body-border-width: 0 0 0 4px !default |
||||
$message-body-color: $text !default |
||||
$message-body-padding: 1.25em 1.5em !default |
||||
$message-body-radius: $radius !default |
||||
|
||||
$message-body-pre-background-color: $scheme-main !default |
||||
$message-body-pre-code-background-color: transparent !default |
||||
|
||||
$message-header-body-border-width: 0 !default |
||||
$message-colors: $colors !default |
||||
|
||||
.message |
||||
@extend %block |
||||
background-color: $message-background-color |
||||
border-radius: $message-radius |
||||
font-size: $size-normal |
||||
strong |
||||
color: currentColor |
||||
a:not(.button):not(.tag):not(.dropdown-item) |
||||
color: currentColor |
||||
text-decoration: underline |
||||
// Sizes |
||||
&.is-small |
||||
font-size: $size-small |
||||
&.is-medium |
||||
font-size: $size-medium |
||||
&.is-large |
||||
font-size: $size-large |
||||
// Colors |
||||
@each $name, $components in $message-colors |
||||
$color: nth($components, 1) |
||||
$color-invert: nth($components, 2) |
||||
$color-light: null |
||||
$color-dark: null |
||||
|
||||
@if length($components) >= 3 |
||||
$color-light: nth($components, 3) |
||||
@if length($components) >= 4 |
||||
$color-dark: nth($components, 4) |
||||
@else |
||||
$color-luminance: colorLuminance($color) |
||||
$darken-percentage: $color-luminance * 70% |
||||
$desaturate-percentage: $color-luminance * 30% |
||||
$color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage) |
||||
@else |
||||
$color-lightning: max((100% - lightness($color)) - 2%, 0%) |
||||
$color-light: lighten($color, $color-lightning) |
||||
|
||||
&.is-#{$name} |
||||
background-color: $color-light |
||||
.message-header |
||||
background-color: $color |
||||
color: $color-invert |
||||
.message-body |
||||
border-color: $color |
||||
color: $color-dark |
||||
|
||||
.message-header |
||||
align-items: center |
||||
background-color: $message-header-background-color |
||||
border-radius: $message-header-radius $message-header-radius 0 0 |
||||
color: $message-header-color |
||||
display: flex |
||||
font-weight: $message-header-weight |
||||
justify-content: space-between |
||||
line-height: 1.25 |
||||
padding: $message-header-padding |
||||
position: relative |
||||
.delete |
||||
flex-grow: 0 |
||||
flex-shrink: 0 |
||||
+ltr-property("margin", 0.75em, false) |
||||
& + .message-body |
||||
border-width: $message-header-body-border-width |
||||
border-top-left-radius: 0 |
||||
border-top-right-radius: 0 |
||||
|
||||
.message-body |
||||
border-color: $message-body-border-color |
||||
border-radius: $message-body-radius |
||||
border-style: solid |
||||
border-width: $message-body-border-width |
||||
color: $message-body-color |
||||
padding: $message-body-padding |
||||
code, |
||||
pre |
||||
background-color: $message-body-pre-background-color |
||||
pre code |
||||
background-color: $message-body-pre-code-background-color |
@ -0,0 +1,117 @@
|
||||
@import "../utilities/mixins" |
||||
|
||||
$modal-z: 40 !default |
||||
|
||||
$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default |
||||
|
||||
$modal-content-width: 640px !default |
||||
$modal-content-margin-mobile: 20px !default |
||||
$modal-content-spacing-mobile: 160px !default |
||||
$modal-content-spacing-tablet: 40px !default |
||||
|
||||
$modal-close-dimensions: 40px !default |
||||
$modal-close-right: 20px !default |
||||
$modal-close-top: 20px !default |
||||
|
||||
$modal-card-spacing: 40px !default |
||||
|
||||
$modal-card-head-background-color: $background !default |
||||
$modal-card-head-border-bottom: 1px solid $border !default |
||||
$modal-card-head-padding: 20px !default |
||||
$modal-card-head-radius: $radius-large !default |
||||
|
||||
$modal-card-title-color: $text-strong !default |
||||
$modal-card-title-line-height: 1 !default |
||||
$modal-card-title-size: $size-4 !default |
||||
|
||||
$modal-card-foot-radius: $radius-large !default |
||||
$modal-card-foot-border-top: 1px solid $border !default |
||||
|
||||
$modal-card-body-background-color: $scheme-main !default |
||||
$modal-card-body-padding: 20px !default |
||||
|
||||
$modal-breakpoint: $tablet !default |
||||
|
||||
.modal |
||||
@extend %overlay |
||||
align-items: center |
||||
display: none |
||||
flex-direction: column |
||||
justify-content: center |
||||
overflow: hidden |
||||
position: fixed |
||||
z-index: $modal-z |
||||
// Modifiers |
||||
&.is-active |
||||
display: flex |
||||
|
||||
.modal-background |
||||
@extend %overlay |
||||
background-color: $modal-background-background-color |
||||
|
||||
.modal-content, |
||||
.modal-card |
||||
margin: 0 $modal-content-margin-mobile |
||||
max-height: calc(100vh - #{$modal-content-spacing-mobile}) |
||||
overflow: auto |
||||
position: relative |
||||
width: 100% |
||||
// Responsiveness |
||||
+from($modal-breakpoint) |
||||
margin: 0 auto |
||||
max-height: calc(100vh - #{$modal-content-spacing-tablet}) |
||||
width: $modal-content-width |
||||
|
||||
.modal-close |
||||
@extend %delete |
||||
background: none |
||||
height: $modal-close-dimensions |
||||
position: fixed |
||||
+ltr-position($modal-close-right) |
||||
top: $modal-close-top |
||||
width: $modal-close-dimensions |
||||
|
||||
.modal-card |
||||
display: flex |
||||
flex-direction: column |
||||
max-height: calc(100vh - #{$modal-card-spacing}) |
||||
overflow: hidden |
||||
-ms-overflow-y: visible |
||||
|
||||
.modal-card-head, |
||||
.modal-card-foot |
||||
align-items: center |
||||
background-color: $modal-card-head-background-color |
||||
display: flex |
||||
flex-shrink: 0 |
||||
justify-content: flex-start |
||||
padding: $modal-card-head-padding |
||||
position: relative |
||||
|
||||
.modal-card-head |
||||
border-bottom: $modal-card-head-border-bottom |
||||
border-top-left-radius: $modal-card-head-radius |
||||
border-top-right-radius: $modal-card-head-radius |
||||
|
||||
.modal-card-title |
||||
color: $modal-card-title-color |
||||
flex-grow: 1 |
||||
flex-shrink: 0 |
||||
font-size: $modal-card-title-size |
||||
line-height: $modal-card-title-line-height |
||||
|
||||
.modal-card-foot |
||||
border-bottom-left-radius: $modal-card-foot-radius |
||||
border-bottom-right-radius: $modal-card-foot-radius |
||||
border-top: $modal-card-foot-border-top |
||||
.button |
||||
&:not(:last-child) |
||||
+ltr-property("margin", 0.5em) |
||||
|
||||
.modal-card-body |
||||
+overflow-touch |
||||
background-color: $modal-card-body-background-color |
||||
flex-grow: 1 |
||||
flex-shrink: 1 |
||||
overflow: auto |
||||
padding: $modal-card-body-padding |
@ -0,0 +1,446 @@
|
||||
@import "../utilities/mixins" |
||||
|
||||
$navbar-background-color: $scheme-main !default |
||||
$navbar-box-shadow-size: 0 2px 0 0 !default |
||||
$navbar-box-shadow-color: $background !default |
||||
$navbar-height: 3.25rem !default |
||||
$navbar-padding-vertical: 1rem !default |
||||
$navbar-padding-horizontal: 2rem !default |
||||
$navbar-z: 30 !default |
||||
$navbar-fixed-z: 30 !default |
||||
|
||||
$navbar-item-color: $text !default |
||||
$navbar-item-hover-color: $link !default |
||||
$navbar-item-hover-background-color: $scheme-main-bis !default |
||||
$navbar-item-active-color: $scheme-invert !default |
||||
$navbar-item-active-background-color: transparent !default |
||||
$navbar-item-img-max-height: 1.75rem !default |
||||
|
||||
$navbar-burger-color: $navbar-item-color !default |
||||
|
||||
$navbar-tab-hover-background-color: transparent !default |
||||
$navbar-tab-hover-border-bottom-color: $link !default |
||||
$navbar-tab-active-color: $link !default |
||||
$navbar-tab-active-background-color: transparent !default |
||||
$navbar-tab-active-border-bottom-color: $link !default |
||||
$navbar-tab-active-border-bottom-style: solid !default |
||||
$navbar-tab-active-border-bottom-width: 3px !default |
||||
|
||||
$navbar-dropdown-background-color: $scheme-main !default |
||||
$navbar-dropdown-border-top: 2px solid $border !default |
||||
$navbar-dropdown-offset: -4px !default |
||||
$navbar-dropdown-arrow: $link !default |
||||
$navbar-dropdown-radius: $radius-large !default |
||||
$navbar-dropdown-z: 20 !default |
||||
|
||||
$navbar-dropdown-boxed-radius: $radius-large !default |
||||
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default |
||||
|
||||
$navbar-dropdown-item-hover-color: $scheme-invert !default |
||||
$navbar-dropdown-item-hover-background-color: $background !default |
||||
$navbar-dropdown-item-active-color: $link !default |
||||
$navbar-dropdown-item-active-background-color: $background !default |
||||
|
||||
$navbar-divider-background-color: $background !default |
||||
$navbar-divider-height: 2px !default |
||||
|
||||
$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default |
||||
|
||||
$navbar-breakpoint: $desktop !default |
||||
|
||||
$navbar-colors: $colors !default |
||||
|
||||
=navbar-fixed |
||||
left: 0 |
||||
position: fixed |
||||
right: 0 |
||||
z-index: $navbar-fixed-z |
||||
|
||||
.navbar |
||||
background-color: $navbar-background-color |
||||
min-height: $navbar-height |
||||
position: relative |
||||
z-index: $navbar-z |
||||
@each $name, $pair in $navbar-colors |
||||
$color: nth($pair, 1) |
||||
$color-invert: nth($pair, 2) |
||||
&.is-#{$name} |
||||
background-color: $color |
||||
color: $color-invert |
||||
.navbar-brand |
||||
& > .navbar-item, |
||||
.navbar-link |
||||
color: $color-invert |
||||
& > a.navbar-item, |
||||
.navbar-link |
||||
&:focus, |
||||
&:hover, |
||||
&.is-active |
||||
background-color: bulmaDarken($color, 5%) |
||||
color: $color-invert |
||||
.navbar-link |
||||
&::after |
||||
border-color: $color-invert |
||||
.navbar-burger |
||||
color: $color-invert |
||||
+from($navbar-breakpoint) |
||||
.navbar-start, |
||||
.navbar-end |
||||
& > .navbar-item, |
||||
.navbar-link |
||||
color: $color-invert |
||||
& > a.navbar-item, |
||||
.navbar-link |
||||
&:focus, |
||||
&:hover, |
||||
&.is-active |
||||
background-color: bulmaDarken($color, 5%) |
||||
color: $color-invert |
||||
.navbar-link |
||||
&::after |
||||
border-color: $color-invert |
||||
.navbar-item.has-dropdown:focus .navbar-link, |
||||
.navbar-item.has-dropdown:hover .navbar-link, |
||||
.navbar-item.has-dropdown.is-active .navbar-link |
||||
background-color: bulmaDarken($color, 5%) |
||||
color: $color-invert |
||||
.navbar-dropdown |
||||
a.navbar-item |
||||
&.is-active |
||||
background-color: $color |
||||
color: $color-invert |
||||
& > .container |
||||
align-items: stretch |
||||
display: flex |
||||
min-height: $navbar-height |
||||
width: 100% |
||||
&.has-shadow |
||||
box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color |
||||
&.is-fixed-bottom, |
||||
&.is-fixed-top |
||||
+navbar-fixed |
||||
&.is-fixed-bottom |
||||
bottom: 0 |
||||
&.has-shadow |
||||
box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color |
||||
&.is-fixed-top |
||||
top: 0 |
||||
|
||||
html, |
||||
body |
||||
&.has-navbar-fixed-top |
||||
padding-top: $navbar-height |
||||
&.has-navbar-fixed-bottom |
||||
padding-bottom: $navbar-height |
||||
|
||||
.navbar-brand, |
||||
.navbar-tabs |
||||
align-items: stretch |
||||
display: flex |
||||
flex-shrink: 0 |
||||