website: fix ecosystem tile layout (#3907)

We had to bump bulma (0.7.4 -> 0.9.3) to get the flex-related classes.

Fixes #3875.

Signed-off-by: Stephan Renatus <stephan.renatus@gmail.com>
This commit is contained in:
Stephan Renatus
2021-10-21 13:34:30 +02:00
committed by GitHub
parent 04ead1d638
commit 33a5fbe96d
80 changed files with 19078 additions and 4979 deletions
@@ -95,13 +95,13 @@
{{ $rank := (index $integrations "rank") }}
{{ $integration := (index $.Site.Data.integrations.integrations $name) }}
<div class="integration-item" onclick="openModal('{{ $name }}-detail-modal')">
<div class="card">
<div class="card is-flex-grow-1">
<div class="card-image">
<figure class="image">
{{ partial "docs/integration-logo.html" (dict "name" $name) }}
</figure>
</div>
<div class="card-content">
<div class="card-content has-text-centered">
<p class="title is-6">{{- $integration.title -}}</p>
</div>
</div>
+13
View File
@@ -0,0 +1,13 @@
{
"name": "website",
"lockfileVersion": 2,
"requires": true,
"packages": {
"node_modules/bulma": {
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.3.tgz",
"integrity": "sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==",
"dev": true
}
}
}
+716 -320
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
@@ -1,6 +1,6 @@
The MIT License (MIT)
Copyright (c) 2019 Jeremy Thomas
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
+27 -12
View File
@@ -2,13 +2,15 @@
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" height="315"></a>
<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
@@ -38,12 +40,12 @@ bower install bulma
After installation, you can import the CSS file into your project using this snippet:
```sh
import 'bulma/css/bulma.css'
@import 'bulma/css/bulma.css'
```
### CDN
[https://cdnjs.com/libraries/bulma](https://cdnjs.com/libraries/bulma)
[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.
@@ -79,21 +81,23 @@ Browse the [online documentation here.](https://bulma.io/documentation/overview/
|--------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------|
| [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 |
| [Vue Admin](https://github.com/vue-bulma/vue-admin) | Vue Admin framework powered by Bulma |
| [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](https://github.com/Caiyeon/goldfish) | Vault UI with Bulma, Golang, and Vue Admin |
| [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.github.io) | Lightweight UI components for Vue.js based on 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.styl](https://github.com/log1x/bulma.styl) | 1:1 Stylus translation of 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 &#8211; Create your own **bespoke** Bulma build |
| [Fulma](https://mangelmaxime.github.io/Fulma/) | Wrapper around Bulma for [fable-react](https://github.com/fable-compiler/fable-react) |
| [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 |
@@ -105,14 +109,25 @@ Browse the [online documentation here.](https://bulma.io/documentation/overview/
| [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](https://github.com/tomhrtly/BulmaWP) | Starter WordPress theme for Bulma |
| [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. |
| [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
## Copyright and license ![Github](https://img.shields.io/github/license/jgthms/bulma?logo=Github)
Code copyright 2019 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).
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
+3 -1
View File
@@ -1,8 +1,10 @@
@charset "utf-8"
/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
/*! 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"
+11811
View File
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+4387 -3101
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+38 -85
View File
@@ -1,103 +1,56 @@
{
"_args": [
[
"bulma@0.7.4",
"/home/torin/go/src/github.com/open-policy-agent/opa/docs"
]
],
"_from": "bulma@0.7.4",
"_hasShrinkwrap": false,
"_id": "bulma@0.7.4",
"_inCache": true,
"_installable": true,
"_location": "/bulma",
"_nodeVersion": "8.12.0",
"_npmOperationalInternal": {
"host": "s3://npm-registry-packages",
"tmp": "tmp/bulma_0.7.4_1549625915862_0.02775327560577412"
},
"_npmUser": {
"email": "bbxdesign@gmail.com",
"name": "jgthms"
},
"_npmVersion": "6.4.1",
"_phantomChildren": {},
"_requested": {
"name": "bulma",
"raw": "bulma@0.7.4",
"rawSpec": "0.7.4",
"scope": null,
"spec": "0.7.4",
"type": "version"
},
"_requiredBy": [
"#DEV:/"
],
"_resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.4.tgz",
"_shasum": "7e74512e9118d9799021339e67e365ee0ac4f3f9",
"_shrinkwrap": null,
"_spec": "bulma@0.7.4",
"_where": "/home/torin/go/src/github.com/open-policy-agent/opa/docs",
"name": "bulma",
"version": "0.9.3",
"homepage": "https://bulma.io",
"author": {
"email": "bbxdesign@gmail.com",
"name": "Jeremy Thomas",
"email": "bbxdesign@gmail.com",
"url": "https://jgthms.com"
},
"bugs": {
"url": "https://github.com/jgthms/bulma/issues"
},
"dependencies": {},
"description": "Modern CSS framework based on Flexbox",
"devDependencies": {
"autoprefixer": "^9.4.7",
"clean-css-cli": "^4.2.1",
"node-sass": "^4.11.0",
"postcss-cli": "^6.1.1",
"rimraf": "^2.6.3"
},
"directories": {},
"dist": {
"fileCount": 55,
"integrity": "sha512-krG2rP6eAX1WE0sf6O0SC/FUVSOBX4m1PBC2+GKLpb2pX0qanaDqcv9U2nu75egFrsHkI0zdWYuk/oGwoszVWg==",
"npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXWo8CRA9TVsSAnZWagAAIZYP/1Mdpf8rsOtimX1SNDQd\np/G1tj/Qr6F3GT1/k/jYIph5E5JgDVTmRHFFSCBZ8qOYzoiNGe+xNKBdC5+l\nEPtega1371UA7AG+mN6jRfK6AG2H1kgvuRN+W11/d8zvWS5D7fjoSx/yjAgE\nnx1Iy62TWhQkszde/1XnupWw8LpsJxz9g2nY0FpKqYE3LNkyxEuFoxVendi6\n0/2bETuiI7Eo92QubvdwgyV2H0absrLrirvzdKpSqQetDe5jE1AVFjJup8YH\nwRx0G1wjnwGG6KbNFl+DZhTxSrU5c4bHAv1gvwbfsxAKztkv6BkvtzCLRN6D\nzmk2ASpfCBfCfeqcE1I5D6Z+CKQFn0Kku2XPJHZ9m4Gm6JBC58Q0KYLlbZFZ\nAoMRmFJyMy4/0q1ikDeL9m5jGDPa/QJKqs9+F8W96GANBwNo3yp9dTjgULXw\ntr9Ob+LJu+6s4aqKHlFvQiw7Lr8yQwAfLLMr4gbOIdpLhiiK0U3qacncaZ6p\n/21YIGrVb25ZMawXdydrN0BQewAI9diVQlJjvj9r+VsoCBIyb2qaYqYRN/oU\nD8PGCE6+49QDItKRIul1fUyCF8S1jIiMnkk+4oB5SZUiDvzfahqUacQBfjRl\n390C+Kg7TOMW4ctQH3tgp1L2FGskhSN6JJATnWt9TmjyHlLlZwXqbNbcBTOU\nUNbD\r\n=xYo6\r\n-----END PGP SIGNATURE-----\r\n",
"shasum": "7e74512e9118d9799021339e67e365ee0ac4f3f9",
"tarball": "https://registry.npmjs.org/bulma/-/bulma-0.7.4.tgz",
"unpackedSize": 640096
},
"gitHead": "7cf10a786a187d6ce278a64c1bdd708384386420",
"homepage": "https://bulma.io",
"keywords": [
"css",
"flexbox",
"framework",
"responsive",
"sass"
],
"license": "MIT",
"main": "bulma.sass",
"maintainers": [
{
"name": "jgthms",
"email": "bbxdesign@gmail.com"
}
],
"name": "bulma",
"optionalDependencies": {},
"readme": "ERROR: No README data found!",
"unpkg": "css/bulma.css",
"style": "bulma/css/bulma.min.css",
"repository": {
"type": "git",
"url": "git+https://github.com/jgthms/bulma.git"
},
"license": "MIT",
"keywords": [
"css",
"sass",
"flexbox",
"responsive",
"framework"
],
"bugs": {
"url": "https://github.com/jgthms/bulma/issues"
},
"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"
},
"scripts": {
"build": "npm run build-clean && npm run build-sass && npm run build-autoprefix && npm run build-cleancss",
"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-clean": "rimraf 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",
"deploy": "npm run build",
"clean": "rimraf css",
"rtl": "npm run rtl-sass && npm run rtl-autoprefix && npm run rtl-cleancss",
"rtl-sass": "node-sass --output-style expanded --source-map true bulma-rtl.sass css/bulma-rtl.css",
"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",
"deploy": "npm run clean && npm run build && npm run rtl",
"start": "npm run build-sass -- --watch"
},
"style": "bulma/css/bulma.min.css",
"unpkg": "css/bulma.css",
"version": "0.7.4"
"files": [
"css",
"sass",
"bulma.sass",
"LICENSE",
"README.md"
]
}
+4 -3
View File
@@ -1,5 +1,6 @@
/* Bulma Base */
@charset "utf-8"
@import "minireset.sass"
@import "generic.sass"
@import "helpers.sass"
@import "minireset"
@import "generic"
@import "animations"
+5
View File
@@ -0,0 +1,5 @@
@keyframes spinAround
from
transform: rotate(0deg)
to
transform: rotate(359deg)
+25 -10
View File
@@ -1,8 +1,15 @@
$body-background-color: $white !default
@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
@@ -11,6 +18,8 @@ $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
@@ -18,14 +27,18 @@ $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: 300px
overflow-x: hidden
overflow-y: scroll
min-width: $body-min-width
overflow-x: $body-overflow-x
overflow-y: $body-overflow-y
text-rendering: $body-rendering
text-size-adjust: 100%
@@ -41,6 +54,7 @@ section
body,
button,
input,
optgroup,
select,
textarea
font-family: $body-family
@@ -53,7 +67,7 @@ pre
body
color: $body-color
font-size: 1rem
font-size: $body-font-size
font-weight: $body-weight
line-height: $body-line-height
@@ -91,7 +105,7 @@ input[type="radio"]
vertical-align: baseline
small
font-size: 0.875em
font-size: $small-font-size
span
font-style: inherit
@@ -110,21 +124,22 @@ pre
+overflow-touch
background-color: $pre-background
color: $pre
font-size: 0.875em
font-size: $pre-font-size
overflow-x: auto
padding: 1.25rem 1.5rem
padding: $pre-padding
white-space: pre
word-wrap: normal
code
background-color: transparent
color: currentColor
font-size: 1em
font-size: $pre-code-font-size
padding: 0
table
td,
th
text-align: left
vertical-align: top
&:not([align])
text-align: inherit
th
color: $text-strong
+1 -276
View File
@@ -1,276 +1 @@
// Float
.is-clearfix
+clearfix
.is-pulled-left
float: left !important
.is-pulled-right
float: right !important
// Overflow
.is-clipped
overflow: hidden !important
// Overlay
.is-overlay
@extend %overlay
// Typography
=typography-size($target:'')
@each $size in $sizes
$i: index($sizes, $size)
.is-size-#{$i}#{if($target == '', '', '-' + $target)}
font-size: $size !important
+typography-size()
+mobile
+typography-size('mobile')
+tablet
+typography-size('tablet')
+touch
+typography-size('touch')
+desktop
+typography-size('desktop')
+widescreen
+typography-size('widescreen')
+fullhd
+typography-size('fullhd')
$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
@each $alignment, $text-align in $alignments
.has-text-#{$alignment}
text-align: #{$text-align} !important
@each $alignment, $text-align in $alignments
+mobile
.has-text-#{$alignment}-mobile
text-align: #{$text-align} !important
+tablet
.has-text-#{$alignment}-tablet
text-align: #{$text-align} !important
+tablet-only
.has-text-#{$alignment}-tablet-only
text-align: #{$text-align} !important
+touch
.has-text-#{$alignment}-touch
text-align: #{$text-align} !important
+desktop
.has-text-#{$alignment}-desktop
text-align: #{$text-align} !important
+desktop-only
.has-text-#{$alignment}-desktop-only
text-align: #{$text-align} !important
+widescreen
.has-text-#{$alignment}-widescreen
text-align: #{$text-align} !important
+widescreen-only
.has-text-#{$alignment}-widescreen-only
text-align: #{$text-align} !important
+fullhd
.has-text-#{$alignment}-fullhd
text-align: #{$text-align} !important
.is-capitalized
text-transform: capitalize !important
.is-lowercase
text-transform: lowercase !important
.is-uppercase
text-transform: uppercase !important
.is-italic
font-style: italic !important
@each $name, $pair in $colors
$color: nth($pair, 1)
.has-text-#{$name}
color: $color !important
a.has-text-#{$name}
&:hover,
&:focus
color: darken($color, 10%) !important
.has-background-#{$name}
background-color: $color !important
@each $name, $shade in $shades
.has-text-#{$name}
color: $shade !important
.has-background-#{$name}
background-color: $shade !important
.has-text-weight-light
font-weight: $weight-light !important
.has-text-weight-normal
font-weight: $weight-normal !important
.has-text-weight-semibold
font-weight: $weight-semibold !important
.has-text-weight-bold
font-weight: $weight-bold !important
.is-family-primary
font-family: $family-primary !important
.is-family-secondary
font-family: $family-secondary !important
.is-family-sans-serif
font-family: $family-sans-serif !important
.is-family-monospace
font-family: $family-monospace !important
.is-family-code
font-family: $family-code !important
// Visibility
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
@each $display in $displays
.is-#{$display}
display: #{$display} !important
+mobile
.is-#{$display}-mobile
display: #{$display} !important
+tablet
.is-#{$display}-tablet
display: #{$display} !important
+tablet-only
.is-#{$display}-tablet-only
display: #{$display} !important
+touch
.is-#{$display}-touch
display: #{$display} !important
+desktop
.is-#{$display}-desktop
display: #{$display} !important
+desktop-only
.is-#{$display}-desktop-only
display: #{$display} !important
+widescreen
.is-#{$display}-widescreen
display: #{$display} !important
+widescreen-only
.is-#{$display}-widescreen-only
display: #{$display} !important
+fullhd
.is-#{$display}-fullhd
display: #{$display} !important
.is-hidden
display: none !important
.is-sr-only
border: none !important
clip: rect(0, 0, 0, 0) !important
height: 0.01em !important
overflow: hidden !important
padding: 0 !important
position: absolute !important
white-space: nowrap !important
width: 0.01em !important
+mobile
.is-hidden-mobile
display: none !important
+tablet
.is-hidden-tablet
display: none !important
+tablet-only
.is-hidden-tablet-only
display: none !important
+touch
.is-hidden-touch
display: none !important
+desktop
.is-hidden-desktop
display: none !important
+desktop-only
.is-hidden-desktop-only
display: none !important
+widescreen
.is-hidden-widescreen
display: none !important
+widescreen-only
.is-hidden-widescreen-only
display: none !important
+fullhd
.is-hidden-fullhd
display: none !important
.is-invisible
visibility: hidden !important
+mobile
.is-invisible-mobile
visibility: hidden !important
+tablet
.is-invisible-tablet
visibility: hidden !important
+tablet-only
.is-invisible-tablet-only
visibility: hidden !important
+touch
.is-invisible-touch
visibility: hidden !important
+desktop
.is-invisible-desktop
visibility: hidden !important
+desktop-only
.is-invisible-desktop-only
visibility: hidden !important
+widescreen
.is-invisible-widescreen
visibility: hidden !important
+widescreen-only
.is-invisible-widescreen-only
visibility: hidden !important
+fullhd
.is-invisible-fullhd
visibility: hidden !important
// Other
.is-marginless
margin: 0 !important
.is-paddingless
padding: 0 !important
.is-radiusless
border-radius: 0 !important
.is-shadowless
box-shadow: none !important
.is-unselectable
@extend %unselectable
@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead."
+3 -8
View File
@@ -1,4 +1,4 @@
/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
// Blocks
html,
body,
@@ -59,16 +59,10 @@ html
// Media
img,
embed,
iframe,
object,
video
height: auto
max-width: 100%
audio
max-width: 100%
// Iframe
iframe
border: 0
@@ -81,4 +75,5 @@ table
td,
th
padding: 0
text-align: left
&:not([align])
text-align: inherit
+13 -13
View File
@@ -1,15 +1,15 @@
/* Bulma Components */
@charset "utf-8"
@import "breadcrumb.sass"
@import "card.sass"
@import "dropdown.sass"
@import "level.sass"
@import "list.sass"
@import "media.sass"
@import "menu.sass"
@import "message.sass"
@import "modal.sass"
@import "navbar.sass"
@import "pagination.sass"
@import "panel.sass"
@import "tabs.sass"
@import "breadcrumb"
@import "card"
@import "dropdown"
@import "level"
@import "media"
@import "menu"
@import "message"
@import "modal"
@import "navbar"
@import "pagination"
@import "panel"
@import "tabs"
+6 -4
View File
@@ -1,3 +1,5 @@
@import "../utilities/mixins"
$breadcrumb-item-color: $link !default
$breadcrumb-item-hover-color: $link-hover !default
$breadcrumb-item-active-color: $text-strong !default
@@ -5,7 +7,7 @@ $breadcrumb-item-active-color: $text-strong !default
$breadcrumb-item-padding-vertical: 0 !default
$breadcrumb-item-padding-horizontal: 0.75em !default
$breadcrumb-item-separator-color: $grey-light !default
$breadcrumb-item-separator-color: $border-hover !default
.breadcrumb
@extend %block
@@ -24,7 +26,7 @@ $breadcrumb-item-separator-color: $grey-light !default
align-items: center
display: flex
&:first-child a
padding-left: 0
+ltr-property("padding", 0, false)
&.is-active
a
color: $breadcrumb-item-active-color
@@ -41,9 +43,9 @@ $breadcrumb-item-separator-color: $grey-light !default
justify-content: flex-start
.icon
&:first-child
margin-right: 0.5em
+ltr-property("margin", 0.5em)
&:last-child
margin-left: 0.5em
+ltr-property("margin", 0.5em, false)
// Alignment
&.is-centered
ol,
+39 -10
View File
@@ -1,25 +1,43 @@
@import "../utilities/mixins"
$card-color: $text !default
$card-background-color: $white !default
$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !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-shadow: 0 1px 2px rgba($black, 0.1) !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 !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
@@ -31,26 +49,37 @@ $card-footer-border-top: 1px solid $border !default
display: flex
flex-grow: 1
font-weight: $card-header-weight
padding: 0.75rem
padding: $card-header-padding
&.is-centered
justify-content: center
.card-header-icon
+reset
align-items: center
cursor: pointer
display: flex
justify-content: center
padding: 0.75rem
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: 1.5rem
padding: $card-content-padding
.card-footer
@extend %card-item
background-color: $card-footer-background-color
border-top: $card-footer-border-top
align-items: stretch
@@ -63,12 +92,12 @@ $card-footer-border-top: 1px solid $border !default
flex-grow: 1
flex-shrink: 0
justify-content: center
padding: 0.75rem
padding: $card-footer-padding
&:not(:last-child)
border-right: $card-footer-border-top
+ltr-property("border", $card-footer-border-top)
// Combinations
.card
.media:not(:last-child)
margin-bottom: 0.75rem
margin-bottom: $card-media-margin
+17 -11
View File
@@ -1,17 +1,23 @@
$dropdown-content-background-color: $white !default
@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: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$dropdown-content-shadow: $shadow !default
$dropdown-content-z: 20 !default
$dropdown-item-color: $grey-dark !default
$dropdown-item-hover-color: $black !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 !default
$dropdown-divider-background-color: $border-light !default
.dropdown
display: inline-flex
@@ -34,8 +40,8 @@ $dropdown-divider-background-color: $border !default
.dropdown-menu
display: none
left: 0
min-width: 12rem
+ltr-position(0, false)
min-width: $dropdown-menu-min-width
padding-top: $dropdown-content-offset
position: absolute
top: 100%
@@ -45,8 +51,8 @@ $dropdown-divider-background-color: $border !default
background-color: $dropdown-content-background-color
border-radius: $dropdown-content-radius
box-shadow: $dropdown-content-shadow
padding-bottom: 0.5rem
padding-top: 0.5rem
padding-bottom: $dropdown-content-padding-bottom
padding-top: $dropdown-content-padding-top
.dropdown-item
color: $dropdown-item-color
@@ -58,8 +64,8 @@ $dropdown-divider-background-color: $border !default
a.dropdown-item,
button.dropdown-item
padding-right: 3rem
text-align: left
+ltr-property("padding", 3rem)
text-align: inherit
white-space: nowrap
width: 100%
&:hover
+7 -3
View File
@@ -1,3 +1,7 @@
@import "../utilities/mixins"
$level-item-spacing: ($block-spacing * 0.5) !default
.level
@extend %block
align-items: center
@@ -18,7 +22,7 @@
.level-item
&:not(:last-child)
margin-bottom: 0
margin-right: 0.75rem
+ltr-property("margin", $level-item-spacing)
&:not(.is-narrow)
flex-grow: 1
// Responsiveness
@@ -41,7 +45,7 @@
// Responsiveness
+mobile
&:not(:last-child)
margin-bottom: 0.75rem
margin-bottom: $level-item-spacing
.level-left,
.level-right
@@ -55,7 +59,7 @@
// Responsiveness
+tablet
&:not(:last-child)
margin-right: 0.75rem
+ltr-property("margin", $level-item-spacing)
.level-left
align-items: center
-39
View File
@@ -1,39 +0,0 @@
$list-background-color: $white !default
$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$list-radius: $radius !default
$list-item-border: 1px solid $border !default
$list-item-color: $text !default
$list-item-active-background-color: $link !default
$list-item-active-color: $link-invert !default
$list-item-hover-background-color: $background !default
.list
@extend %block
background-color: $list-background-color
border-radius: $list-radius
box-shadow: $list-shadow
// &.is-hoverable > .list-item:hover:not(.is-active)
// background-color: $list-item-hover-background-color
// cursor: pointer
.list-item
display: block
padding: 0.5em 1em
&:not(a)
color: $list-item-color
&:first-child
border-top-left-radius: $list-radius
border-top-right-radius: $list-radius
&:last-child
border-top-left-radius: $list-radius
border-top-right-radius: $list-radius
&:not(:last-child)
border-bottom: $list-item-border
&.is-active
background-color: $list-item-active-background-color
color: $list-item-active-color
a.list-item
background-color: $list-item-hover-background-color
cursor: pointer
+26 -15
View File
@@ -1,29 +1,40 @@
@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: left
text-align: inherit
.content:not(:last-child)
margin-bottom: 0.75rem
margin-bottom: $media-content-spacing
.media
border-top: 1px solid rgba($border, 0.5)
border-top: $media-border-size solid $media-border-color
display: flex
padding-top: 0.75rem
padding-top: $media-level-1-spacing
.content:not(:last-child),
.control:not(:last-child)
margin-bottom: 0.5rem
margin-bottom: $media-level-1-content-spacing
.media
padding-top: 0.5rem
padding-top: $media-level-2-spacing
& + .media
margin-top: 0.5rem
margin-top: $media-level-2-spacing
& + .media
border-top: 1px solid rgba($border, 0.5)
margin-top: 1rem
padding-top: 1rem
border-top: $media-border-size solid $media-border-color
margin-top: $media-spacing
padding-top: $media-spacing
// Sizes
&.is-large
& + .media
margin-top: 1.5rem
padding-top: 1.5rem
margin-top: $media-spacing-large
padding-top: $media-spacing-large
.media-left,
.media-right
@@ -32,16 +43,16 @@
flex-shrink: 0
.media-left
margin-right: 1rem
+ltr-property("margin", $media-spacing)
.media-right
margin-left: 1rem
+ltr-property("margin", $media-spacing, false)
.media-content
flex-basis: auto
flex-grow: 1
flex-shrink: 1
text-align: left
text-align: inherit
+mobile
.media-content
+18 -9
View File
@@ -1,3 +1,5 @@
@import "../utilities/mixins"
$menu-item-color: $text !default
$menu-item-radius: $radius-small !default
$menu-item-hover-color: $text-strong !default
@@ -6,8 +8,15 @@ $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
@@ -20,12 +29,12 @@ $menu-label-color: $text-light !default
font-size: $size-large
.menu-list
line-height: 1.25
line-height: $menu-list-line-height
a
border-radius: $menu-item-radius
color: $menu-item-color
display: block
padding: 0.5em 0.75em
padding: $menu-list-link-padding
&:hover
background-color: $menu-item-hover-background-color
color: $menu-item-hover-color
@@ -35,16 +44,16 @@ $menu-label-color: $text-light !default
color: $menu-item-active-color
li
ul
border-left: $menu-list-border-left
margin: 0.75em
padding-left: 0.75em
+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: 0.75em
letter-spacing: 0.1em
font-size: $menu-label-font-size
letter-spacing: $menu-label-letter-spacing
text-transform: uppercase
&:not(:first-child)
margin-top: 1em
margin-top: $menu-label-spacing
&:not(:last-child)
margin-bottom: 1em
margin-bottom: $menu-label-spacing
+26 -11
View File
@@ -1,3 +1,5 @@
@import "../utilities/mixins"
$message-background-color: $background !default
$message-radius: $radius !default
@@ -13,10 +15,11 @@ $message-body-color: $text !default
$message-body-padding: 1.25em 1.5em !default
$message-body-radius: $radius !default
$message-body-pre-background-color: $white !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
@@ -36,21 +39,33 @@ $message-header-body-border-width: 0 !default
&.is-large
font-size: $size-large
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
$color-luminance: colorLuminance($color)
$darken-percentage: $color-luminance * 70%
$desaturate-percentage: $color-luminance * 30%
@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: lighten($color, $color-lightning)
background-color: $color-light
.message-header
background-color: $color
color: $color-invert
.message-body
border-color: $color
color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
color: $color-dark
.message-header
align-items: center
@@ -66,7 +81,7 @@ $message-header-body-border-width: 0 !default
.delete
flex-grow: 0
flex-shrink: 0
margin-left: 0.75em
+ltr-property("margin", 0.75em, false)
& + .message-body
border-width: $message-header-body-border-width
border-top-left-radius: 0
+9 -5
View File
@@ -1,6 +1,8 @@
@import "../utilities/mixins"
$modal-z: 40 !default
$modal-background-background-color: rgba($black, 0.86) !default
$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
$modal-content-width: 640px !default
$modal-content-margin-mobile: 20px !default
@@ -25,9 +27,11 @@ $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: $white !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
@@ -53,7 +57,7 @@ $modal-card-body-padding: 20px !default
position: relative
width: 100%
// Responsiveness
+tablet
+from($modal-breakpoint)
margin: 0 auto
max-height: calc(100vh - #{$modal-content-spacing-tablet})
width: $modal-content-width
@@ -63,7 +67,7 @@ $modal-card-body-padding: 20px !default
background: none
height: $modal-close-dimensions
position: fixed
right: $modal-close-right
+ltr-position($modal-close-right)
top: $modal-close-top
width: $modal-close-dimensions
@@ -102,7 +106,7 @@ $modal-card-body-padding: 20px !default
border-top: $modal-card-foot-border-top
.button
&:not(:last-child)
margin-right: 10px
+ltr-property("margin", 0.5em)
.modal-card-body
+overflow-touch
+46 -28
View File
@@ -1,4 +1,6 @@
$navbar-background-color: $white !default
@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
@@ -7,10 +9,10 @@ $navbar-padding-horizontal: 2rem !default
$navbar-z: 30 !default
$navbar-fixed-z: 30 !default
$navbar-item-color: $grey-dark !default
$navbar-item-color: $text !default
$navbar-item-hover-color: $link !default
$navbar-item-hover-background-color: $white-bis !default
$navbar-item-active-color: $black !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
@@ -24,7 +26,7 @@ $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: $white !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
@@ -32,9 +34,9 @@ $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 rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !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: $black !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
@@ -46,6 +48,8 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
$navbar-breakpoint: $desktop !default
$navbar-colors: $colors !default
=navbar-fixed
left: 0
position: fixed
@@ -57,7 +61,7 @@ $navbar-breakpoint: $desktop !default
min-height: $navbar-height
position: relative
z-index: $navbar-z
@each $name, $pair in $colors
@each $name, $pair in $navbar-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
@@ -69,9 +73,10 @@ $navbar-breakpoint: $desktop !default
color: $color-invert
& > a.navbar-item,
.navbar-link
&:focus,
&:hover,
&.is-active
background-color: darken($color, 5%)
background-color: bulmaDarken($color, 5%)
color: $color-invert
.navbar-link
&::after
@@ -86,16 +91,18 @@ $navbar-breakpoint: $desktop !default
color: $color-invert
& > a.navbar-item,
.navbar-link
&:focus,
&:hover,
&.is-active
background-color: darken($color, 5%)
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: darken($color, 5%)
background-color: bulmaDarken($color, 5%)
color: $color-invert
.navbar-dropdown
a.navbar-item
@@ -135,6 +142,7 @@ body
.navbar-brand
a.navbar-item
&:focus,
&:hover
background-color: transparent
@@ -145,9 +153,10 @@ body
overflow-y: hidden
.navbar-burger
@extend %reset
color: $navbar-burger-color
+hamburger($navbar-height)
margin-left: auto
+ltr-property("margin", auto, false)
.navbar-menu
display: none
@@ -167,13 +176,14 @@ body
a.navbar-item,
.navbar-link
cursor: pointer
&:focus,
&:focus-within,
&:hover,
&.is-active
background-color: $navbar-item-hover-background-color
color: $navbar-item-hover-color
.navbar-item
display: block
flex-grow: 0
flex-shrink: 0
img
@@ -187,6 +197,7 @@ a.navbar-item,
border-bottom: 1px solid transparent
min-height: $navbar-height
padding-bottom: calc(0.5rem - 1px)
&:focus,
&:hover
background-color: $navbar-tab-hover-background-color
border-bottom-color: $navbar-tab-hover-border-bottom-color
@@ -203,12 +214,12 @@ a.navbar-item,
flex-shrink: 1
.navbar-link:not(.is-arrowless)
padding-right: 2.5em
+ltr-property("padding", 2.5em)
&::after
@extend %arrow
border-color: $navbar-dropdown-arrow
margin-top: -0.375em
right: 1.125em
+ltr-position(1.125em)
.navbar-dropdown
font-size: 0.875rem
@@ -238,7 +249,7 @@ a.navbar-item,
display: none
.navbar-menu
background-color: $navbar-background-color
box-shadow: 0 8px 16px rgba($black, 0.1)
box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
padding: 0.5rem 0
&.is-active
display: block
@@ -250,7 +261,7 @@ a.navbar-item,
&.is-fixed-bottom-touch
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px rgba($black, 0.1)
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
&.is-fixed-top-touch
top: 0
&.is-fixed-top,
@@ -286,16 +297,20 @@ a.navbar-item,
&.is-transparent
a.navbar-item,
.navbar-link
&:focus,
&:hover,
&.is-active
background-color: transparent !important
.navbar-item.has-dropdown
&.is-active,
&.is-hoverable:focus,
&.is-hoverable:focus-within,
&.is-hoverable:hover
.navbar-link
background-color: transparent !important
.navbar-dropdown
a.navbar-item
&:focus,
&:hover
background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color
@@ -309,7 +324,6 @@ a.navbar-item,
align-items: center
display: flex
.navbar-item
display: flex
&.has-dropdown
align-items: stretch
&.has-dropdown-up
@@ -320,9 +334,11 @@ a.navbar-item,
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
border-top: none
bottom: 100%
box-shadow: 0 -8px 8px rgba($black, 0.1)
box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
top: auto
&.is-active,
&.is-hoverable:focus,
&.is-hoverable:focus-within,
&.is-hoverable:hover
.navbar-dropdown
display: block
@@ -336,19 +352,19 @@ a.navbar-item,
flex-shrink: 0
.navbar-start
justify-content: flex-start
margin-right: auto
+ltr-property("margin", auto)
.navbar-end
justify-content: flex-end
margin-left: auto
+ltr-property("margin", auto, false)
.navbar-dropdown
background-color: $navbar-dropdown-background-color
border-bottom-left-radius: $navbar-dropdown-radius
border-bottom-right-radius: $navbar-dropdown-radius
border-top: $navbar-dropdown-border-top
box-shadow: 0 8px 8px rgba($black, 0.1)
box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
display: none
font-size: 0.875rem
left: 0
+ltr-position(0, false)
min-width: 100%
position: absolute
top: 100%
@@ -357,7 +373,8 @@ a.navbar-item,
padding: 0.375rem 1rem
white-space: nowrap
a.navbar-item
padding-right: 3rem
+ltr-property("padding", 3rem)
&:focus,
&:hover
background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color
@@ -384,9 +401,9 @@ a.navbar-item,
.navbar > .container,
.container > .navbar
.navbar-brand
margin-left: -.75rem
+ltr-property("margin", -.75rem, false)
.navbar-menu
margin-right: -.75rem
+ltr-property("margin", -.75rem)
// Fixed navbar
.navbar
&.is-fixed-bottom-desktop,
@@ -395,7 +412,7 @@ a.navbar-item,
&.is-fixed-bottom-desktop
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px rgba($black, 0.1)
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
&.is-fixed-top-desktop
top: 0
html,
@@ -413,9 +430,10 @@ a.navbar-item,
.navbar-link
&.is-active
color: $navbar-item-active-color
&.is-active:not(:hover)
&.is-active:not(:focus):not(:hover)
background-color: $navbar-item-active-background-color
.navbar-item.has-dropdown
&:focus,
&:hover,
&.is-active
.navbar-link
+34 -12
View File
@@ -1,8 +1,19 @@
$pagination-color: $grey-darker !default
$pagination-border-color: $grey-lighter !default
@import "../utilities/controls"
@import "../utilities/mixins"
$pagination-color: $text-strong !default
$pagination-border-color: $border !default
$pagination-margin: -0.25rem !default
$pagination-min-width: $control-height !default
$pagination-item-font-size: 1em !default
$pagination-item-margin: 0.25rem !default
$pagination-item-padding-left: 0.5em !default
$pagination-item-padding-right: 0.5em !default
$pagination-nav-padding-left: 0.75em !default
$pagination-nav-padding-right: 0.75em !default
$pagination-hover-color: $link-hover !default
$pagination-hover-border-color: $link-hover-border !default
@@ -12,9 +23,9 @@ $pagination-focus-border-color: $link-focus-border !default
$pagination-active-color: $link-active !default
$pagination-active-border-color: $link-active-border !default
$pagination-disabled-color: $grey !default
$pagination-disabled-background-color: $grey-lighter !default
$pagination-disabled-border-color: $grey-lighter !default
$pagination-disabled-color: $text-light !default
$pagination-disabled-background-color: $border !default
$pagination-disabled-border-color: $border !default
$pagination-current-color: $link-invert !default
$pagination-current-background-color: $link !default
@@ -22,9 +33,10 @@ $pagination-current-border-color: $link !default
$pagination-ellipsis-color: $grey-light !default
$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default
.pagination
@extend %block
font-size: $size-normal
margin: $pagination-margin
// Sizes
@@ -56,11 +68,11 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
.pagination-ellipsis
@extend %control
@extend %unselectable
font-size: 1em
padding-left: 0.5em
padding-right: 0.5em
font-size: $pagination-item-font-size
justify-content: center
margin: 0.25rem
margin: $pagination-item-margin
padding-left: $pagination-item-padding-left
padding-right: $pagination-item-padding-right
text-align: center
.pagination-previous,
@@ -85,8 +97,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
.pagination-previous,
.pagination-next
padding-left: 0.75em
padding-right: 0.75em
padding-left: $pagination-nav-padding-left
padding-right: $pagination-nav-padding-right
white-space: nowrap
.pagination-link
@@ -101,6 +113,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
.pagination-list
flex-wrap: wrap
li
list-style: none
+mobile
.pagination
@@ -120,12 +134,20 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
flex-shrink: 1
justify-content: flex-start
order: 1
.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis
margin-bottom: 0
margin-top: 0
.pagination-previous
order: 2
.pagination-next
order: 3
.pagination
justify-content: space-between
margin-bottom: 0
margin-top: 0
&.is-centered
.pagination-previous
order: 1
+35 -15
View File
@@ -1,13 +1,19 @@
$panel-item-border: 1px solid $border !default
@import "../utilities/mixins"
$panel-heading-background-color: $background !default
$panel-margin: $block-spacing !default
$panel-item-border: 1px solid $border-light !default
$panel-radius: $radius-large !default
$panel-shadow: $shadow !default
$panel-heading-background-color: $border-light !default
$panel-heading-color: $text-strong !default
$panel-heading-line-height: 1.25 !default
$panel-heading-padding: 0.5em 0.75em !default
$panel-heading-padding: 0.75em 1em !default
$panel-heading-radius: $radius !default
$panel-heading-size: 1.25em !default
$panel-heading-weight: $weight-light !default
$panel-heading-weight: $weight-bold !default
$panel-tabs-font-size: 0.875em !default
$panel-tab-border-bottom: 1px solid $border !default
$panel-tab-active-border-bottom-color: $link-active-border !default
$panel-tab-active-color: $link-active !default
@@ -22,24 +28,35 @@ $panel-block-active-color: $link-active !default
$panel-block-active-icon-color: $link !default
$panel-icon-color: $text-light !default
$panel-colors: $colors !default
.panel
border-radius: $panel-radius
box-shadow: $panel-shadow
font-size: $size-normal
&:not(:last-child)
margin-bottom: 1.5rem
margin-bottom: $panel-margin
// Colors
@each $name, $components in $panel-colors
$color: nth($components, 1)
$color-invert: nth($components, 2)
&.is-#{$name}
.panel-heading
background-color: $color
color: $color-invert
.panel-tabs a.is-active
border-bottom-color: $color
.panel-block.is-active .panel-icon
color: $color
.panel-heading,
.panel-tabs,
.panel-block
border-bottom: $panel-item-border
border-left: $panel-item-border
border-right: $panel-item-border
&:first-child
border-top: $panel-item-border
&:not(:last-child)
border-bottom: $panel-item-border
.panel-heading
background-color: $panel-heading-background-color
border-radius: $panel-heading-radius $panel-heading-radius 0 0
border-radius: $panel-radius $panel-radius 0 0
color: $panel-heading-color
font-size: $panel-heading-size
font-weight: $panel-heading-weight
@@ -49,7 +66,7 @@ $panel-icon-color: $text-light !default
.panel-tabs
align-items: flex-end
display: flex
font-size: 0.875em
font-size: $panel-tabs-font-size
justify-content: center
a
border-bottom: $panel-tab-border-bottom
@@ -73,7 +90,7 @@ $panel-icon-color: $text-light !default
justify-content: flex-start
padding: 0.5em 0.75em
input[type="checkbox"]
margin-right: 0.75em
+ltr-property("margin", 0.75em)
& > .control
flex-grow: 1
flex-shrink: 1
@@ -85,6 +102,9 @@ $panel-icon-color: $text-light !default
color: $panel-block-active-color
.panel-icon
color: $panel-block-active-icon-color
&:last-child
border-bottom-left-radius: $panel-radius
border-bottom-right-radius: $panel-radius
a.panel-block,
label.panel-block
@@ -95,7 +115,7 @@ label.panel-block
.panel-icon
+fa(14px, 1em)
color: $panel-icon-color
margin-right: 0.75em
+ltr-property("margin", 0.75em)
.fa
font-size: inherit
line-height: inherit
+38 -13
View File
@@ -1,3 +1,5 @@
@import "../utilities/mixins"
$tabs-border-bottom-color: $border !default
$tabs-border-bottom-style: solid !default
$tabs-border-bottom-width: 1px !default
@@ -12,7 +14,7 @@ $tabs-boxed-link-radius: $radius !default
$tabs-boxed-link-hover-background-color: $background !default
$tabs-boxed-link-hover-border-bottom-color: $border !default
$tabs-boxed-link-active-background-color: $white !default
$tabs-boxed-link-active-background-color: $scheme-main !default
$tabs-boxed-link-active-border-color: $border !default
$tabs-boxed-link-active-border-bottom-color: transparent !default
@@ -78,9 +80,9 @@ $tabs-toggle-link-active-color: $link-invert !default
padding-left: 0.75em
.icon
&:first-child
margin-right: 0.5em
+ltr-property("margin", 0.5em)
&:last-child
margin-left: 0.5em
+ltr-property("margin", 0.5em, false)
// Alignment
&.is-centered
ul
@@ -92,7 +94,10 @@ $tabs-toggle-link-active-color: $link-invert !default
&.is-boxed
a
border: 1px solid transparent
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
+ltr
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
+rtl
border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius
&:hover
background-color: $tabs-boxed-link-hover-background-color
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
@@ -119,11 +124,21 @@ $tabs-toggle-link-active-color: $link-invert !default
z-index: 2
li
& + li
margin-left: -#{$tabs-toggle-link-border-width}
+ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
&:first-child a
border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
+ltr
border-top-left-radius: $tabs-toggle-link-radius
border-bottom-left-radius: $tabs-toggle-link-radius
+rtl
border-top-right-radius: $tabs-toggle-link-radius
border-bottom-right-radius: $tabs-toggle-link-radius
&:last-child a
border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
+ltr
border-top-right-radius: $tabs-toggle-link-radius
border-bottom-right-radius: $tabs-toggle-link-radius
+rtl
border-top-left-radius: $tabs-toggle-link-radius
border-bottom-left-radius: $tabs-toggle-link-radius
&.is-active
a
background-color: $tabs-toggle-link-active-background-color
@@ -135,13 +150,23 @@ $tabs-toggle-link-active-color: $link-invert !default
&.is-toggle-rounded
li
&:first-child a
border-bottom-left-radius: $radius-rounded
border-top-left-radius: $radius-rounded
padding-left: 1.25em
+ltr
border-bottom-left-radius: $radius-rounded
border-top-left-radius: $radius-rounded
padding-left: 1.25em
+rtl
border-bottom-right-radius: $radius-rounded
border-top-right-radius: $radius-rounded
padding-right: 1.25em
&:last-child a
border-bottom-right-radius: $radius-rounded
border-top-right-radius: $radius-rounded
padding-right: 1.25em
+ltr
border-bottom-right-radius: $radius-rounded
border-top-right-radius: $radius-rounded
padding-right: 1.25em
+rtl
border-bottom-left-radius: $radius-rounded
border-top-left-radius: $radius-rounded
padding-left: 1.25em
// Sizes
&.is-small
font-size: $size-small
+13 -13
View File
@@ -1,16 +1,16 @@
/* Bulma Elements */
@charset "utf-8"
@import "box.sass"
@import "button.sass"
@import "container.sass"
@import "content.sass"
@import "form.sass"
@import "icon.sass"
@import "image.sass"
@import "notification.sass"
@import "progress.sass"
@import "table.sass"
@import "tag.sass"
@import "title.sass"
@import "box"
@import "button"
@import "container"
@import "content"
@import "icon"
@import "image"
@import "notification"
@import "progress"
@import "table"
@import "tag"
@import "title"
@import "other.sass"
@import "other"
+6 -4
View File
@@ -1,11 +1,13 @@
@import "../utilities/mixins"
$box-color: $text !default
$box-background-color: $white !default
$box-background-color: $scheme-main !default
$box-radius: $radius-large !default
$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$box-shadow: $shadow !default
$box-padding: 1.25rem !default
$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default
$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default
.box
@extend %block
+103 -33
View File
@@ -1,11 +1,15 @@
$button-color: $grey-darker !default
$button-background-color: $white !default
@import "../utilities/controls"
@import "../utilities/mixins"
$button-border-color: $grey-lighter !default
$button-color: $text-strong !default
$button-background-color: $scheme-main !default
$button-family: false !default
$button-border-color: $border !default
$button-border-width: $control-border-width !default
$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default
$button-padding-horizontal: 0.75em !default
$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
$button-padding-horizontal: 1em !default
$button-hover-color: $link-hover !default
$button-hover-border-color: $link-hover-border !default
@@ -13,27 +17,38 @@ $button-hover-border-color: $link-hover-border !default
$button-focus-color: $link-focus !default
$button-focus-border-color: $link-focus-border !default
$button-focus-box-shadow-size: 0 0 0 0.125em !default
$button-focus-box-shadow-color: rgba($link, 0.25) !default
$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
$button-active-color: $link-active !default
$button-active-border-color: $link-active-border !default
$button-text-color: $text !default
$button-text-decoration: underline !default
$button-text-hover-background-color: $background !default
$button-text-hover-color: $text-strong !default
$button-disabled-background-color: $white !default
$button-disabled-border-color: $grey-lighter !default
$button-ghost-background: none !default
$button-ghost-border-color: transparent !default
$button-ghost-color: $link !default
$button-ghost-decoration: none !default
$button-ghost-hover-color: $link !default
$button-ghost-hover-decoration: underline !default
$button-disabled-background-color: $scheme-main !default
$button-disabled-border-color: $border !default
$button-disabled-shadow: none !default
$button-disabled-opacity: 0.5 !default
$button-static-color: $grey !default
$button-static-background-color: $white-ter !default
$button-static-border-color: $grey-lighter !default
$button-static-color: $text-light !default
$button-static-background-color: $scheme-main-ter !default
$button-static-border-color: $border !default
$button-colors: $colors !default
// The button sizes use mixins so they can be used at different breakpoints
=button-small
border-radius: $radius-small
&:not(.is-rounded)
border-radius: $radius-small
font-size: $size-small
=button-normal
font-size: $size-normal
@@ -50,6 +65,8 @@ $button-static-border-color: $grey-lighter !default
border-width: $button-border-width
color: $button-color
cursor: pointer
@if $button-family
font-family: $button-family
justify-content: center
padding-bottom: $button-padding-vertical
padding-left: $button-padding-horizontal
@@ -67,14 +84,14 @@ $button-static-border-color: $grey-lighter !default
height: 1.5em
width: 1.5em
&:first-child:not(:last-child)
margin-left: calc(-0.375em - #{$button-border-width})
margin-right: 0.1875em
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
+ltr-property("margin", $button-padding-horizontal * 0.25)
&:last-child:not(:first-child)
margin-left: 0.1875em
margin-right: calc(-0.375em - #{$button-border-width})
+ltr-property("margin", $button-padding-horizontal * 0.25, false)
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
&:first-child:last-child
margin-left: calc(-0.375em - #{$button-border-width})
margin-right: calc(-0.375em - #{$button-border-width})
margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
// States
&:hover,
&.is-hovered
@@ -95,7 +112,7 @@ $button-static-border-color: $grey-lighter !default
background-color: transparent
border-color: transparent
color: $button-text-color
text-decoration: underline
text-decoration: $button-text-decoration
&:hover,
&.is-hovered,
&:focus,
@@ -104,14 +121,23 @@ $button-static-border-color: $grey-lighter !default
color: $button-text-hover-color
&:active,
&.is-active
background-color: darken($button-text-hover-background-color, 5%)
background-color: bulmaDarken($button-text-hover-background-color, 5%)
color: $button-text-hover-color
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: transparent
box-shadow: none
@each $name, $pair in $colors
&.is-ghost
background: $button-ghost-background
border-color: $button-ghost-border-color
color: $button-ghost-color
text-decoration: $button-ghost-decoration
&:hover,
&.is-hovered
color: $button-ghost-hover-color
text-decoration: $button-ghost-hover-decoration
@each $name, $pair in $button-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
@@ -120,7 +146,7 @@ $button-static-border-color: $grey-lighter !default
color: $color-invert
&:hover,
&.is-hovered
background-color: darken($color, 2.5%)
background-color: bulmaDarken($color, 2.5%)
border-color: transparent
color: $color-invert
&:focus,
@@ -128,10 +154,10 @@ $button-static-border-color: $grey-lighter !default
border-color: transparent
color: $color-invert
&:not(:active)
box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
&:active,
&.is-active
background-color: darken($color, 5%)
background-color: bulmaDarken($color, 5%)
border-color: transparent
color: $color-invert
&[disabled],
@@ -142,8 +168,9 @@ $button-static-border-color: $grey-lighter !default
&.is-inverted
background-color: $color-invert
color: $color
&:hover
background-color: darken($color-invert, 5%)
&:hover,
&.is-hovered
background-color: bulmaDarken($color-invert, 5%)
&[disabled],
fieldset[disabled] &
background-color: $color-invert
@@ -158,13 +185,21 @@ $button-static-border-color: $grey-lighter !default
border-color: $color
color: $color
&:hover,
&:focus
&.is-hovered,
&:focus,
&.is-focused
background-color: $color
border-color: $color
color: $color-invert
&.is-loading
&::after
border-color: transparent transparent $color $color !important
&:hover,
&.is-hovered,
&:focus,
&.is-focused
&::after
border-color: transparent transparent $color-invert $color-invert !important
&[disabled],
fieldset[disabled] &
background-color: transparent
@@ -176,15 +211,41 @@ $button-static-border-color: $grey-lighter !default
border-color: $color-invert
color: $color-invert
&:hover,
&:focus
&.is-hovered,
&:focus,
&.is-focused
background-color: $color-invert
color: $color
&.is-loading
&:hover,
&.is-hovered,
&:focus,
&.is-focused
&::after
border-color: transparent transparent $color $color !important
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: $color-invert
box-shadow: none
color: $color-invert
// If light and dark colors are provided
@if length($pair) >= 4
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
&.is-light
background-color: $color-light
color: $color-dark
&:hover,
&.is-hovered
background-color: bulmaDarken($color-light, 2.5%)
border-color: transparent
color: $color-dark
&:active,
&.is-active
background-color: bulmaDarken($color-light, 5%)
border-color: transparent
color: $color-dark
// Sizes
&.is-small
+button-small
@@ -219,8 +280,8 @@ $button-static-border-color: $grey-lighter !default
pointer-events: none
&.is-rounded
border-radius: $radius-rounded
padding-left: 1em
padding-right: 1em
padding-left: calc(#{$button-padding-horizontal} + 0.25em)
padding-right: calc(#{$button-padding-horizontal} + 0.25em)
.buttons
align-items: center
@@ -230,7 +291,7 @@ $button-static-border-color: $grey-lighter !default
.button
margin-bottom: 0.5rem
&:not(:last-child):not(.is-fullwidth)
margin-right: 0.5rem
+ltr-property("margin", 0.5rem)
&:last-child
margin-bottom: -0.5rem
&:not(:last-child)
@@ -253,9 +314,9 @@ $button-static-border-color: $grey-lighter !default
&:not(:last-child)
border-bottom-right-radius: 0
border-top-right-radius: 0
margin-right: -1px
+ltr-property("margin", -1px)
&:last-child
margin-right: 0
+ltr-property("margin", 0)
&:hover,
&.is-hovered
z-index: 2
@@ -269,7 +330,16 @@ $button-static-border-color: $grey-lighter !default
z-index: 4
&.is-expanded
flex-grow: 1
flex-shrink: 1
&.is-centered
justify-content: center
&:not(.has-addons)
.button:not(.is-fullwidth)
margin-left: 0.25rem
margin-right: 0.25rem
&.is-right
justify-content: flex-end
&:not(.has-addons)
.button:not(.is-fullwidth)
margin-left: 0.25rem
margin-right: 0.25rem
+21 -17
View File
@@ -1,25 +1,29 @@
@import "../utilities/mixins"
$container-offset: (2 * $gap) !default
$container-max-width: $fullhd !default
.container
flex-grow: 1
margin: 0 auto
position: relative
width: auto
&.is-fluid
max-width: none !important
padding-left: $gap
padding-right: $gap
width: 100%
+desktop
max-width: $desktop - (2 * $gap)
width: $desktop - (2 * $gap)
&.is-fluid
margin-left: $gap
margin-right: $gap
max-width: none
width: auto
max-width: $desktop - $container-offset
+until-widescreen
&.is-widescreen
max-width: $widescreen - (2 * $gap)
width: auto
&.is-widescreen:not(.is-max-desktop)
max-width: min($widescreen, $container-max-width) - $container-offset
+until-fullhd
&.is-fullhd
max-width: $fullhd - (2 * $gap)
width: auto
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
max-width: min($fullhd, $container-max-width) - $container-offset
+widescreen
max-width: $widescreen - (2 * $gap)
width: $widescreen - (2 * $gap)
&:not(.is-max-desktop)
max-width: min($widescreen, $container-max-width) - $container-offset
+fullhd
max-width: $fullhd - (2 * $gap)
width: $fullhd - (2 * $gap)
&:not(.is-max-desktop):not(.is-max-widescreen)
max-width: min($fullhd, $container-max-width) - $container-offset
+13 -5
View File
@@ -1,3 +1,5 @@
@import "../utilities/mixins"
$content-heading-color: $text-strong !default
$content-heading-weight: $weight-semibold !default
$content-heading-line-height: 1.125 !default
@@ -67,11 +69,11 @@ $content-table-foot-cell-color: $text-strong !default
margin-bottom: 1em
blockquote
background-color: $content-blockquote-background-color
border-left: $content-blockquote-border-left
+ltr-property("border", $content-blockquote-border-left, false)
padding: $content-blockquote-padding
ol
list-style-position: outside
margin-left: 2em
+ltr-property("margin", 2em, false)
margin-top: 1em
&:not([type])
list-style-type: decimal
@@ -85,7 +87,7 @@ $content-table-foot-cell-color: $text-strong !default
list-style-type: upper-roman
ul
list-style: disc outside
margin-left: 2em
+ltr-property("margin", 2em, false)
margin-top: 1em
ul
list-style-type: circle
@@ -93,7 +95,7 @@ $content-table-foot-cell-color: $text-strong !default
ul
list-style-type: square
dd
margin-left: 2em
+ltr-property("margin", 2em, false)
figure
margin-left: 2em
margin-right: 2em
@@ -125,7 +127,8 @@ $content-table-foot-cell-color: $text-strong !default
vertical-align: top
th
color: $content-table-cell-heading-color
text-align: left
&:not([align])
text-align: inherit
thead
td,
th
@@ -142,9 +145,14 @@ $content-table-foot-cell-color: $text-strong !default
td,
th
border-bottom-width: 0
.tabs
li + li
margin-top: 0
// Sizes
&.is-small
font-size: $size-small
&.is-normal
font-size: $size-normal
&.is-medium
font-size: $size-medium
&.is-large
+1 -602
View File
@@ -1,602 +1 @@
$input-color: $grey-darker !default
$input-background-color: $white !default
$input-border-color: $grey-lighter !default
$input-height: $control-height !default
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
$input-placeholder-color: rgba($input-color, 0.3) !default
$input-hover-color: $grey-darker !default
$input-hover-border-color: $grey-light !default
$input-focus-color: $grey-darker !default
$input-focus-border-color: $link !default
$input-focus-box-shadow-size: 0 0 0 0.125em !default
$input-focus-box-shadow-color: rgba($link, 0.25) !default
$input-disabled-color: $text-light !default
$input-disabled-background-color: $background !default
$input-disabled-border-color: $background !default
$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
$input-arrow: $link !default
$input-icon-color: $grey-lighter !default
$input-icon-active-color: $grey !default
$input-radius: $radius !default
$file-border-color: $border !default
$file-radius: $radius !default
$file-cta-background-color: $white-ter !default
$file-cta-color: $grey-dark !default
$file-cta-hover-color: $grey-darker !default
$file-cta-active-color: $grey-darker !default
$file-name-border-color: $border !default
$file-name-border-style: solid !default
$file-name-border-width: 1px 1px 1px 0 !default
$file-name-max-width: 16em !default
$label-color: $grey-darker !default
$label-weight: $weight-bold !default
$help-size: $size-small !default
=input
@extend %control
background-color: $input-background-color
border-color: $input-border-color
color: $input-color
+placeholder
color: $input-placeholder-color
&:hover,
&.is-hovered
border-color: $input-hover-border-color
&:focus,
&.is-focused,
&:active,
&.is-active
border-color: $input-focus-border-color
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
&[disabled],
fieldset[disabled] &
background-color: $input-disabled-background-color
border-color: $input-disabled-border-color
box-shadow: none
color: $input-disabled-color
+placeholder
color: $input-disabled-placeholder-color
.input,
.textarea
+input
box-shadow: $input-shadow
max-width: 100%
width: 100%
&[readonly]
box-shadow: none
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
border-color: $color
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
// Sizes
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
// Modifiers
&.is-fullwidth
display: block
width: 100%
&.is-inline
display: inline
width: auto
.input
&.is-rounded
border-radius: $radius-rounded
padding-left: 1em
padding-right: 1em
&.is-static
background-color: transparent
border-color: transparent
box-shadow: none
padding-left: 0
padding-right: 0
.textarea
display: block
max-width: 100%
min-width: 100%
padding: 0.625em
resize: vertical
&:not([rows])
max-height: 600px
min-height: 120px
&[rows]
height: initial
// Modifiers
&.has-fixed-size
resize: none
.checkbox,
.radio
cursor: pointer
display: inline-block
line-height: 1.25
position: relative
input
cursor: pointer
&:hover
color: $input-hover-color
&[disabled],
fieldset[disabled] &
color: $input-disabled-color
cursor: not-allowed
.radio
& + .radio
margin-left: 0.5em
.select
display: inline-block
max-width: 100%
position: relative
vertical-align: top
&:not(.is-multiple)
height: $input-height
&:not(.is-multiple):not(.is-loading)
&::after
@extend %arrow
border-color: $input-arrow
right: 1.125em
z-index: 4
&.is-rounded
select
border-radius: $radius-rounded
padding-left: 1em
select
+input
cursor: pointer
display: block
font-size: 1em
max-width: 100%
outline: none
&::-ms-expand
display: none
&[disabled]:hover,
fieldset[disabled] &:hover
border-color: $input-disabled-border-color
&:not([multiple])
padding-right: 2.5em
&[multiple]
height: auto
padding: 0
option
padding: 0.5em 1em
// States
&:not(.is-multiple):not(.is-loading):hover
&::after
border-color: $input-hover-color
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
&:not(:hover)::after
border-color: $color
select
border-color: $color
&:hover,
&.is-hovered
border-color: darken($color, 5%)
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
// Sizes
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
// Modifiers
&.is-disabled
&::after
border-color: $input-disabled-color
&.is-fullwidth
width: 100%
select
width: 100%
&.is-loading
&::after
@extend %loader
margin-top: 0
position: absolute
right: 0.625em
top: 0.625em
transform: none
&.is-small:after
font-size: $size-small
&.is-medium:after
font-size: $size-medium
&.is-large:after
font-size: $size-large
.file
@extend %unselectable
align-items: stretch
display: flex
justify-content: flex-start
position: relative
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
.file-cta
background-color: $color
border-color: transparent
color: $color-invert
&:hover,
&.is-hovered
.file-cta
background-color: darken($color, 2.5%)
border-color: transparent
color: $color-invert
&:focus,
&.is-focused
.file-cta
border-color: transparent
box-shadow: 0 0 0.5em rgba($color, 0.25)
color: $color-invert
&:active,
&.is-active
.file-cta
background-color: darken($color, 5%)
border-color: transparent
color: $color-invert
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
.file-icon
.fa
font-size: 21px
&.is-large
font-size: $size-large
.file-icon
.fa
font-size: 28px
// Modifiers
&.has-name
.file-cta
border-bottom-right-radius: 0
border-top-right-radius: 0
.file-name
border-bottom-left-radius: 0
border-top-left-radius: 0
&.is-empty
.file-cta
border-radius: $file-radius
.file-name
display: none
&.is-boxed
.file-label
flex-direction: column
.file-cta
flex-direction: column
height: auto
padding: 1em 3em
.file-name
border-width: 0 1px 1px
.file-icon
height: 1.5em
width: 1.5em
.fa
font-size: 21px
&.is-small
.file-icon .fa
font-size: 14px
&.is-medium
.file-icon .fa
font-size: 28px
&.is-large
.file-icon .fa
font-size: 35px
&.has-name
.file-cta
border-radius: $file-radius $file-radius 0 0
.file-name
border-radius: 0 0 $file-radius $file-radius
border-width: 0 1px 1px
&.is-centered
justify-content: center
&.is-fullwidth
.file-label
width: 100%
.file-name
flex-grow: 1
max-width: none
&.is-right
justify-content: flex-end
.file-cta
border-radius: 0 $file-radius $file-radius 0
.file-name
border-radius: $file-radius 0 0 $file-radius
border-width: 1px 0 1px 1px
order: -1
.file-label
align-items: stretch
display: flex
cursor: pointer
justify-content: flex-start
overflow: hidden
position: relative
&:hover
.file-cta
background-color: darken($file-cta-background-color, 2.5%)
color: $file-cta-hover-color
.file-name
border-color: darken($file-name-border-color, 2.5%)
&:active
.file-cta
background-color: darken($file-cta-background-color, 5%)
color: $file-cta-active-color
.file-name
border-color: darken($file-name-border-color, 5%)
.file-input
height: 100%
left: 0
opacity: 0
outline: none
position: absolute
top: 0
width: 100%
.file-cta,
.file-name
@extend %control
border-color: $file-border-color
border-radius: $file-radius
font-size: 1em
padding-left: 1em
padding-right: 1em
white-space: nowrap
.file-cta
background-color: $file-cta-background-color
color: $file-cta-color
.file-name
border-color: $file-name-border-color
border-style: $file-name-border-style
border-width: $file-name-border-width
display: block
max-width: $file-name-max-width
overflow: hidden
text-align: left
text-overflow: ellipsis
.file-icon
align-items: center
display: flex
height: 1em
justify-content: center
margin-right: 0.5em
width: 1em
.fa
font-size: 14px
.label
color: $label-color
display: block
font-size: $size-normal
font-weight: $label-weight
&:not(:last-child)
margin-bottom: 0.5em
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large
.help
display: block
font-size: $help-size
margin-top: 0.25rem
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
color: $color
// Containers
.field
&:not(:last-child)
margin-bottom: 0.75rem
// Modifiers
&.has-addons
display: flex
justify-content: flex-start
.control
&:not(:last-child)
margin-right: -1px
&:not(:first-child):not(:last-child)
.button,
.input,
.select select
border-radius: 0
&:first-child:not(:only-child)
.button,
.input,
.select select
border-bottom-right-radius: 0
border-top-right-radius: 0
&:last-child:not(:only-child)
.button,
.input,
.select select
border-bottom-left-radius: 0
border-top-left-radius: 0
.button,
.input,
.select select
&:not([disabled])
&:hover,
&.is-hovered
z-index: 2
&:focus,
&.is-focused,
&:active,
&.is-active
z-index: 3
&:hover
z-index: 4
&.is-expanded
flex-grow: 1
&.has-addons-centered
justify-content: center
&.has-addons-right
justify-content: flex-end
&.has-addons-fullwidth
.control
flex-grow: 1
flex-shrink: 0
&.is-grouped
display: flex
justify-content: flex-start
& > .control
flex-shrink: 0
&:not(:last-child)
margin-bottom: 0
margin-right: 0.75rem
&.is-expanded
flex-grow: 1
flex-shrink: 1
&.is-grouped-centered
justify-content: center
&.is-grouped-right
justify-content: flex-end
&.is-grouped-multiline
flex-wrap: wrap
& > .control
&:last-child,
&:not(:last-child)
margin-bottom: 0.75rem
&:last-child
margin-bottom: -0.75rem
&:not(:last-child)
margin-bottom: 0
&.is-horizontal
+tablet
display: flex
.field-label
.label
font-size: inherit
+mobile
margin-bottom: 0.5rem
+tablet
flex-basis: 0
flex-grow: 1
flex-shrink: 0
margin-right: 1.5rem
text-align: right
&.is-small
font-size: $size-small
padding-top: 0.375em
&.is-normal
padding-top: 0.375em
&.is-medium
font-size: $size-medium
padding-top: 0.375em
&.is-large
font-size: $size-large
padding-top: 0.375em
.field-body
.field .field
margin-bottom: 0
+tablet
display: flex
flex-basis: 0
flex-grow: 5
flex-shrink: 1
.field
margin-bottom: 0
& > .field
flex-shrink: 1
&:not(.is-narrow)
flex-grow: 1
&:not(:last-child)
margin-right: 0.75rem
.control
box-sizing: border-box
clear: both //fixes the icon floating out of the input when help text is floated right
font-size: $size-normal
position: relative
text-align: left
// Modifiers
&.has-icons-left,
&.has-icons-right
.input,
.select
&:focus
& ~ .icon
color: $input-icon-active-color
&.is-small ~ .icon
font-size: $size-small
&.is-medium ~ .icon
font-size: $size-medium
&.is-large ~ .icon
font-size: $size-large
.icon
color: $input-icon-color
height: $input-height
pointer-events: none
position: absolute
top: 0
width: $input-height
z-index: 4
&.has-icons-left
.input,
.select select
padding-left: $input-height
.icon.is-left
left: 0
&.has-icons-right
.input,
.select select
padding-right: $input-height
.icon.is-right
right: 0
&.is-loading
&::after
@extend %loader
position: absolute !important
right: 0.625em
top: 0.625em
z-index: 4
&.is-small:after
font-size: $size-small
&.is-medium:after
font-size: $size-medium
&.is-large:after
font-size: $size-large
@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."
+25
View File
@@ -2,6 +2,7 @@ $icon-dimensions: 1.5rem !default
$icon-dimensions-small: 1rem !default
$icon-dimensions-medium: 2rem !default
$icon-dimensions-large: 3rem !default
$icon-text-spacing: 0.25em !default
.icon
align-items: center
@@ -19,3 +20,27 @@ $icon-dimensions-large: 3rem !default
&.is-large
height: $icon-dimensions-large
width: $icon-dimensions-large
.icon-text
align-items: flex-start
color: inherit
display: inline-flex
flex-wrap: wrap
line-height: $icon-dimensions
vertical-align: top
.icon
flex-grow: 0
flex-shrink: 0
&:not(:last-child)
+ltr
margin-right: $icon-text-spacing
+rtl
margin-left: $icon-text-spacing
&:not(:first-child)
+ltr
margin-left: $icon-text-spacing
+rtl
margin-right: $icon-text-spacing
div.icon-text
display: flex
+4
View File
@@ -1,3 +1,5 @@
@import "../utilities/mixins"
$dimensions: 16 24 32 48 64 96 128 !default
.image
@@ -9,6 +11,8 @@ $dimensions: 16 24 32 48 64 96 128 !default
width: 100%
&.is-rounded
border-radius: $radius-rounded
&.is-fullwidth
width: 100%
// Ratio
&.is-square,
&.is-1by1,
+21 -4
View File
@@ -1,13 +1,23 @@
@import "../utilities/mixins"
$notification-background-color: $background !default
$notification-code-background-color: $scheme-main !default
$notification-radius: $radius !default
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
$notification-colors: $colors !default
.notification
@extend %block
background-color: $notification-background-color
border-radius: $notification-radius
padding: $notification-padding
position: relative
+ltr
padding: $notification-padding-ltr
+rtl
padding: $notification-padding-rtl
a:not(.button):not(.dropdown-item)
color: currentColor
text-decoration: underline
@@ -15,21 +25,28 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
color: currentColor
code,
pre
background: $white
background: $notification-code-background-color
pre code
background: transparent
& > .delete
+ltr-position(0.5rem)
position: absolute
right: 0.5rem
top: 0.5rem
.title,
.subtitle,
.content
color: currentColor
// Colors
@each $name, $pair in $colors
@each $name, $pair in $notification-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
// If light and dark colors are provided
@if length($pair) >= 4
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
&.is-light
background-color: $color-light
color: $color-dark
+2 -10
View File
@@ -1,3 +1,5 @@
@import "../utilities/mixins"
.block
@extend %block
@@ -11,16 +13,6 @@
margin-bottom: 5px
text-transform: uppercase
.highlight
@extend %block
font-weight: $weight-normal
max-width: 100%
overflow: hidden
padding: 0
pre
overflow: auto
max-width: 100%
.loader
@extend %loader
+22 -14
View File
@@ -1,14 +1,19 @@
$progress-bar-background-color: $border !default
@import "../utilities/mixins"
$progress-bar-background-color: $border-light !default
$progress-value-background-color: $text !default
$progress-border-radius: $radius-rounded !default
$progress-indeterminate-duration: 1.5s !default
$progress-colors: $colors !default
.progress
@extend %block
-moz-appearance: none
-webkit-appearance: none
border: none
border-radius: $radius-rounded
border-radius: $progress-border-radius
display: block
height: $size-normal
overflow: hidden
@@ -23,6 +28,19 @@ $progress-indeterminate-duration: 1.5s !default
&::-ms-fill
background-color: $progress-value-background-color
border: none
// Colors
@each $name, $pair in $progress-colors
$color: nth($pair, 1)
&.is-#{$name}
&::-webkit-progress-value
background-color: $color
&::-moz-progress-bar
background-color: $color
&::-ms-fill
background-color: $color
&:indeterminate
background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
&:indeterminate
animation-duration: $progress-indeterminate-duration
animation-iteration-count: infinite
@@ -37,18 +55,8 @@ $progress-indeterminate-duration: 1.5s !default
background-color: transparent
&::-moz-progress-bar
background-color: transparent
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
&::-webkit-progress-value
background-color: $color
&::-moz-progress-bar
background-color: $color
&::-ms-fill
background-color: $color
&:indeterminate
background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
&::-ms-fill
animation-name: none
// Sizes
&.is-small
+15 -8
View File
@@ -1,7 +1,9 @@
$table-color: $grey-darker !default
$table-background-color: $white !default
@import "../utilities/mixins"
$table-cell-border: 1px solid $grey-lighter !default
$table-color: $text-strong !default
$table-background-color: $scheme-main !default
$table-cell-border: 1px solid $border !default
$table-cell-border-width: 0 0 1px !default
$table-cell-padding: 0.5em 0.75em !default
$table-cell-heading-color: $text-strong !default
@@ -15,13 +17,15 @@ $table-head-background-color: transparent !default
$table-body-background-color: transparent !default
$table-foot-background-color: transparent !default
$table-row-hover-background-color: $white-bis !default
$table-row-hover-background-color: $scheme-main-bis !default
$table-row-active-background-color: $primary !default
$table-row-active-color: $primary-invert !default
$table-striped-row-even-background-color: $white-bis !default
$table-striped-row-even-hover-background-color: $white-ter !default
$table-striped-row-even-background-color: $scheme-main-bis !default
$table-striped-row-even-hover-background-color: $scheme-main-ter !default
$table-colors: $colors !default
.table
@extend %block
@@ -34,7 +38,7 @@ $table-striped-row-even-hover-background-color: $white-ter !default
padding: $table-cell-padding
vertical-align: top
// Colors
@each $name, $pair in $colors
@each $name, $pair in $table-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
@@ -51,9 +55,12 @@ $table-striped-row-even-hover-background-color: $white-ter !default
a,
strong
color: currentColor
&.is-vcentered
vertical-align: middle
th
color: $table-cell-heading-color
text-align: left
&:not([align])
text-align: inherit
tr
&.is-selected
background-color: $table-row-active-background-color
+36 -26
View File
@@ -1,8 +1,12 @@
@import "../utilities/mixins"
$tag-background-color: $background !default
$tag-color: $text !default
$tag-radius: $radius !default
$tag-delete-margin: 1px !default
$tag-colors: $colors !default
.tags
align-items: center
display: flex
@@ -11,7 +15,7 @@ $tag-delete-margin: 1px !default
.tag
margin-bottom: 0.5rem
&:not(:last-child)
margin-right: 0.5rem
+ltr-property("margin", 0.5rem)
&:last-child
margin-bottom: -0.5rem
&:not(:last-child)
@@ -23,15 +27,6 @@ $tag-delete-margin: 1px !default
&.are-large
.tag:not(.is-normal):not(.is-medium)
font-size: $size-medium
&.has-addons
.tag
margin-right: 0
&:not(:first-child)
border-bottom-left-radius: 0
border-top-left-radius: 0
&:not(:last-child)
border-bottom-right-radius: 0
border-top-right-radius: 0
&.is-centered
justify-content: center
.tag
@@ -46,14 +41,22 @@ $tag-delete-margin: 1px !default
margin-right: 0
&.has-addons
.tag
margin-right: 0
+ltr-property("margin", 0)
&:not(:first-child)
margin-left: 0
border-bottom-left-radius: 0
border-top-left-radius: 0
+ltr-property("margin", 0, false)
+ltr
border-top-left-radius: 0
border-bottom-left-radius: 0
+rtl
border-top-right-radius: 0
border-bottom-right-radius: 0
&:not(:last-child)
border-bottom-right-radius: 0
border-top-right-radius: 0
+ltr
border-top-right-radius: 0
border-bottom-right-radius: 0
+rtl
border-top-left-radius: 0
border-bottom-left-radius: 0
.tag:not(body)
align-items: center
@@ -69,15 +72,22 @@ $tag-delete-margin: 1px !default
padding-right: 0.75em
white-space: nowrap
.delete
margin-left: 0.25rem
margin-right: -0.375rem
+ltr-property("margin", 0.25rem, false)
+ltr-property("margin", -0.375rem)
// Colors
@each $name, $pair in $colors
@each $name, $pair in $tag-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
// If a light and dark colors are provided
@if length($pair) > 3
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
&.is-light
background-color: $color-light
color: $color-dark
// Sizes
&.is-normal
font-size: $size-small
@@ -87,17 +97,17 @@ $tag-delete-margin: 1px !default
font-size: $size-medium
.icon
&:first-child:not(:last-child)
margin-left: -0.375em
margin-right: 0.1875em
+ltr-property("margin", -0.375em, false)
+ltr-property("margin", 0.1875em)
&:last-child:not(:first-child)
margin-left: 0.1875em
margin-right: -0.375em
+ltr-property("margin", 0.1875em, false)
+ltr-property("margin", -0.375em)
&:first-child:last-child
margin-left: -0.375em
margin-right: -0.375em
+ltr-property("margin", -0.375em, false)
+ltr-property("margin", -0.375em)
// Modifiers
&.is-delete
margin-left: $tag-delete-margin
+ltr-property("margin", $tag-delete-margin, false)
padding: 0
position: relative
width: 2em
+11 -5
View File
@@ -1,4 +1,7 @@
$title-color: $grey-darker !default
@import "../utilities/mixins"
$title-color: $text-strong !default
$title-family: false !default
$title-size: $size-3 !default
$title-weight: $weight-semibold !default
$title-line-height: 1.125 !default
@@ -7,11 +10,12 @@ $title-strong-weight: inherit !default
$title-sub-size: 0.75em !default
$title-sup-size: 0.75em !default
$subtitle-color: $grey-dark !default
$subtitle-color: $text !default
$subtitle-family: false !default
$subtitle-size: $size-5 !default
$subtitle-weight: $weight-normal !default
$subtitle-line-height: 1.25 !default
$subtitle-strong-color: $grey-darker !default
$subtitle-strong-color: $text-strong !default
$subtitle-strong-weight: $weight-semibold !default
$subtitle-negative-margin: -1.25rem !default
@@ -31,14 +35,14 @@ $subtitle-negative-margin: -1.25rem !default
.title
color: $title-color
@if $title-family
font-family: $title-family
font-size: $title-size
font-weight: $title-weight
line-height: $title-line-height
strong
color: $title-strong-color
font-weight: $title-strong-weight
& + .highlight
margin-top: -0.75rem
&:not(.is-spaced) + .subtitle
margin-top: $subtitle-negative-margin
// Sizes
@@ -49,6 +53,8 @@ $subtitle-negative-margin: -1.25rem !default
.subtitle
color: $subtitle-color
@if $subtitle-family
font-family: $subtitle-family
font-size: $subtitle-size
font-weight: $subtitle-weight
line-height: $subtitle-line-height
+9
View File
@@ -0,0 +1,9 @@
/* Bulma Form */
@charset "utf-8"
@import "shared"
@import "input-textarea"
@import "checkbox-radio"
@import "select"
@import "file"
@import "tools"
+22
View File
@@ -0,0 +1,22 @@
%checkbox-radio
cursor: pointer
display: inline-block
line-height: 1.25
position: relative
input
cursor: pointer
&:hover
color: $input-hover-color
&[disabled],
fieldset[disabled] &,
input[disabled]
color: $input-disabled-color
cursor: not-allowed
.checkbox
@extend %checkbox-radio
.radio
@extend %checkbox-radio
& + .radio
+ltr-property("margin", 0.5em, false)
+184
View File
@@ -0,0 +1,184 @@
$file-border-color: $border !default
$file-radius: $radius !default
$file-cta-background-color: $scheme-main-ter !default
$file-cta-color: $text !default
$file-cta-hover-color: $text-strong !default
$file-cta-active-color: $text-strong !default
$file-name-border-color: $border !default
$file-name-border-style: solid !default
$file-name-border-width: 1px 1px 1px 0 !default
$file-name-max-width: 16em !default
$file-colors: $form-colors !default
.file
@extend %unselectable
align-items: stretch
display: flex
justify-content: flex-start
position: relative
// Colors
@each $name, $pair in $file-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
.file-cta
background-color: $color
border-color: transparent
color: $color-invert
&:hover,
&.is-hovered
.file-cta
background-color: bulmaDarken($color, 2.5%)
border-color: transparent
color: $color-invert
&:focus,
&.is-focused
.file-cta
border-color: transparent
box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
color: $color-invert
&:active,
&.is-active
.file-cta
background-color: bulmaDarken($color, 5%)
border-color: transparent
color: $color-invert
// Sizes
&.is-small
font-size: $size-small
&.is-normal
font-size: $size-normal
&.is-medium
font-size: $size-medium
.file-icon
.fa
font-size: 21px
&.is-large
font-size: $size-large
.file-icon
.fa
font-size: 28px
// Modifiers
&.has-name
.file-cta
border-bottom-right-radius: 0
border-top-right-radius: 0
.file-name
border-bottom-left-radius: 0
border-top-left-radius: 0
&.is-empty
.file-cta
border-radius: $file-radius
.file-name
display: none
&.is-boxed
.file-label
flex-direction: column
.file-cta
flex-direction: column
height: auto
padding: 1em 3em
.file-name
border-width: 0 1px 1px
.file-icon
height: 1.5em
width: 1.5em
.fa
font-size: 21px
&.is-small
.file-icon .fa
font-size: 14px
&.is-medium
.file-icon .fa
font-size: 28px
&.is-large
.file-icon .fa
font-size: 35px
&.has-name
.file-cta
border-radius: $file-radius $file-radius 0 0
.file-name
border-radius: 0 0 $file-radius $file-radius
border-width: 0 1px 1px
&.is-centered
justify-content: center
&.is-fullwidth
.file-label
width: 100%
.file-name
flex-grow: 1
max-width: none
&.is-right
justify-content: flex-end
.file-cta
border-radius: 0 $file-radius $file-radius 0
.file-name
border-radius: $file-radius 0 0 $file-radius
border-width: 1px 0 1px 1px
order: -1
.file-label
align-items: stretch
display: flex
cursor: pointer
justify-content: flex-start
overflow: hidden
position: relative
&:hover
.file-cta
background-color: bulmaDarken($file-cta-background-color, 2.5%)
color: $file-cta-hover-color
.file-name
border-color: bulmaDarken($file-name-border-color, 2.5%)
&:active
.file-cta
background-color: bulmaDarken($file-cta-background-color, 5%)
color: $file-cta-active-color
.file-name
border-color: bulmaDarken($file-name-border-color, 5%)
.file-input
height: 100%
left: 0
opacity: 0
outline: none
position: absolute
top: 0
width: 100%
.file-cta,
.file-name
@extend %control
border-color: $file-border-color
border-radius: $file-radius
font-size: 1em
padding-left: 1em
padding-right: 1em
white-space: nowrap
.file-cta
background-color: $file-cta-background-color
color: $file-cta-color
.file-name
border-color: $file-name-border-color
border-style: $file-name-border-style
border-width: $file-name-border-width
display: block
max-width: $file-name-max-width
overflow: hidden
text-align: inherit
text-overflow: ellipsis
.file-icon
align-items: center
display: flex
height: 1em
justify-content: center
+ltr-property("margin", 0.5em)
width: 1em
.fa
font-size: 14px
+66
View File
@@ -0,0 +1,66 @@
$textarea-padding: $control-padding-horizontal !default
$textarea-max-height: 40em !default
$textarea-min-height: 8em !default
$textarea-colors: $form-colors !default
%input-textarea
@extend %input
box-shadow: $input-shadow
max-width: 100%
width: 100%
&[readonly]
box-shadow: none
// Colors
@each $name, $pair in $textarea-colors
$color: nth($pair, 1)
&.is-#{$name}
border-color: $color
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
// Sizes
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
// Modifiers
&.is-fullwidth
display: block
width: 100%
&.is-inline
display: inline
width: auto
.input
@extend %input-textarea
&.is-rounded
border-radius: $radius-rounded
padding-left: calc(#{$control-padding-horizontal} + 0.375em)
padding-right: calc(#{$control-padding-horizontal} + 0.375em)
&.is-static
background-color: transparent
border-color: transparent
box-shadow: none
padding-left: 0
padding-right: 0
.textarea
@extend %input-textarea
display: block
max-width: 100%
min-width: 100%
padding: $textarea-padding
resize: vertical
&:not([rows])
max-height: $textarea-max-height
min-height: $textarea-min-height
&[rows]
height: initial
// Modifiers
&.has-fixed-size
resize: none
+87
View File
@@ -0,0 +1,87 @@
$select-colors: $form-colors !default
.select
display: inline-block
max-width: 100%
position: relative
vertical-align: top
&:not(.is-multiple)
height: $input-height
&:not(.is-multiple):not(.is-loading)
&::after
@extend %arrow
border-color: $input-arrow
+ltr-position(1.125em)
z-index: 4
&.is-rounded
select
border-radius: $radius-rounded
+ltr-property("padding", 1em, false)
select
@extend %input
cursor: pointer
display: block
font-size: 1em
max-width: 100%
outline: none
&::-ms-expand
display: none
&[disabled]:hover,
fieldset[disabled] &:hover
border-color: $input-disabled-border-color
&:not([multiple])
+ltr-property("padding", 2.5em)
&[multiple]
height: auto
padding: 0
option
padding: 0.5em 1em
// States
&:not(.is-multiple):not(.is-loading):hover
&::after
border-color: $input-hover-color
// Colors
@each $name, $pair in $select-colors
$color: nth($pair, 1)
&.is-#{$name}
&:not(:hover)::after
border-color: $color
select
border-color: $color
&:hover,
&.is-hovered
border-color: bulmaDarken($color, 5%)
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
// Sizes
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
// Modifiers
&.is-disabled
&::after
border-color: $input-disabled-color
&.is-fullwidth
width: 100%
select
width: 100%
&.is-loading
&::after
@extend %loader
margin-top: 0
position: absolute
+ltr-position(0.625em)
top: 0.625em
transform: none
&.is-small:after
font-size: $size-small
&.is-medium:after
font-size: $size-medium
&.is-large:after
font-size: $size-large
+60
View File
@@ -0,0 +1,60 @@
@import "../utilities/controls"
@import "../utilities/mixins"
$form-colors: $colors !default
$input-color: $text-strong !default
$input-background-color: $scheme-main !default
$input-border-color: $border !default
$input-height: $control-height !default
$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
$input-placeholder-color: bulmaRgba($input-color, 0.3) !default
$input-hover-color: $text-strong !default
$input-hover-border-color: $border-hover !default
$input-focus-color: $text-strong !default
$input-focus-border-color: $link !default
$input-focus-box-shadow-size: 0 0 0 0.125em !default
$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
$input-disabled-color: $text-light !default
$input-disabled-background-color: $background !default
$input-disabled-border-color: $background !default
$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
$input-arrow: $link !default
$input-icon-color: $border !default
$input-icon-active-color: $text !default
$input-radius: $radius !default
=input
@extend %control
background-color: $input-background-color
border-color: $input-border-color
border-radius: $input-radius
color: $input-color
+placeholder
color: $input-placeholder-color
&:hover,
&.is-hovered
border-color: $input-hover-border-color
&:focus,
&.is-focused,
&:active,
&.is-active
border-color: $input-focus-border-color
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
&[disabled],
fieldset[disabled] &
background-color: $input-disabled-background-color
border-color: $input-disabled-border-color
box-shadow: none
color: $input-disabled-color
+placeholder
color: $input-disabled-placeholder-color
%input
+input
+215
View File
@@ -0,0 +1,215 @@
$label-color: $text-strong !default
$label-weight: $weight-bold !default
$help-size: $size-small !default
$label-colors: $form-colors !default
.label
color: $label-color
display: block
font-size: $size-normal
font-weight: $label-weight
&:not(:last-child)
margin-bottom: 0.5em
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large
.help
display: block
font-size: $help-size
margin-top: 0.25rem
@each $name, $pair in $label-colors
$color: nth($pair, 1)
&.is-#{$name}
color: $color
// Containers
.field
&:not(:last-child)
margin-bottom: 0.75rem
// Modifiers
&.has-addons
display: flex
justify-content: flex-start
.control
&:not(:last-child)
+ltr-property("margin", -1px)
&:not(:first-child):not(:last-child)
.button,
.input,
.select select
border-radius: 0
&:first-child:not(:only-child)
.button,
.input,
.select select
+ltr
border-bottom-right-radius: 0
border-top-right-radius: 0
+rtl
border-bottom-left-radius: 0
border-top-left-radius: 0
&:last-child:not(:only-child)
.button,
.input,
.select select
+ltr
border-bottom-left-radius: 0
border-top-left-radius: 0
+rtl
border-bottom-right-radius: 0
border-top-right-radius: 0
.button,
.input,
.select select
&:not([disabled])
&:hover,
&.is-hovered
z-index: 2
&:focus,
&.is-focused,
&:active,
&.is-active
z-index: 3
&:hover
z-index: 4
&.is-expanded
flex-grow: 1
flex-shrink: 1
&.has-addons-centered
justify-content: center
&.has-addons-right
justify-content: flex-end
&.has-addons-fullwidth
.control
flex-grow: 1
flex-shrink: 0
&.is-grouped
display: flex
justify-content: flex-start
& > .control
flex-shrink: 0
&:not(:last-child)
margin-bottom: 0
+ltr-property("margin", 0.75rem)
&.is-expanded
flex-grow: 1
flex-shrink: 1
&.is-grouped-centered
justify-content: center
&.is-grouped-right
justify-content: flex-end
&.is-grouped-multiline
flex-wrap: wrap
& > .control
&:last-child,
&:not(:last-child)
margin-bottom: 0.75rem
&:last-child
margin-bottom: -0.75rem
&:not(:last-child)
margin-bottom: 0
&.is-horizontal
+tablet
display: flex
.field-label
.label
font-size: inherit
+mobile
margin-bottom: 0.5rem
+tablet
flex-basis: 0
flex-grow: 1
flex-shrink: 0
+ltr-property("margin", 1.5rem)
text-align: right
&.is-small
font-size: $size-small
padding-top: 0.375em
&.is-normal
padding-top: 0.375em
&.is-medium
font-size: $size-medium
padding-top: 0.375em
&.is-large
font-size: $size-large
padding-top: 0.375em
.field-body
.field .field
margin-bottom: 0
+tablet
display: flex
flex-basis: 0
flex-grow: 5
flex-shrink: 1
.field
margin-bottom: 0
& > .field
flex-shrink: 1
&:not(.is-narrow)
flex-grow: 1
&:not(:last-child)
+ltr-property("margin", 0.75rem)
.control
box-sizing: border-box
clear: both
font-size: $size-normal
position: relative
text-align: inherit
// Modifiers
&.has-icons-left,
&.has-icons-right
.input,
.select
&:focus
& ~ .icon
color: $input-icon-active-color
&.is-small ~ .icon
font-size: $size-small
&.is-medium ~ .icon
font-size: $size-medium
&.is-large ~ .icon
font-size: $size-large
.icon
color: $input-icon-color
height: $input-height
pointer-events: none
position: absolute
top: 0
width: $input-height
z-index: 4
&.has-icons-left
.input,
.select select
padding-left: $input-height
.icon.is-left
left: 0
&.has-icons-right
.input,
.select select
padding-right: $input-height
.icon.is-right
right: 0
&.is-loading
&::after
@extend %loader
position: absolute !important
+ltr-position(0.625em)
top: 0.625em
z-index: 4
&.is-small:after
font-size: $size-small
&.is-medium:after
font-size: $size-medium
&.is-large:after
font-size: $size-large
+3 -2
View File
@@ -1,4 +1,5 @@
/* Bulma Grid */
@charset "utf-8"
@import "columns.sass"
@import "tiles.sass"
@import "columns"
@import "tiles"
+100 -91
View File
@@ -1,3 +1,5 @@
@import "../utilities/mixins"
$column-gap: 0.75rem !default
.column
@@ -8,6 +10,7 @@ $column-gap: 0.75rem !default
padding: $column-gap
.columns.is-mobile > &.is-narrow
flex: none
width: unset
.columns.is-mobile > &.is-full
flex: none
width: 100%
@@ -39,32 +42,33 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
.columns.is-mobile > &.is-offset-three-quarters
margin-left: 75%
+ltr-property("margin", 75%, false)
.columns.is-mobile > &.is-offset-two-thirds
margin-left: 66.6666%
+ltr-property("margin", 66.6666%, false)
.columns.is-mobile > &.is-offset-half
margin-left: 50%
+ltr-property("margin", 50%, false)
.columns.is-mobile > &.is-offset-one-third
margin-left: 33.3333%
+ltr-property("margin", 33.3333%, false)
.columns.is-mobile > &.is-offset-one-quarter
margin-left: 25%
+ltr-property("margin", 25%, false)
.columns.is-mobile > &.is-offset-one-fifth
margin-left: 20%
+ltr-property("margin", 20%, false)
.columns.is-mobile > &.is-offset-two-fifths
margin-left: 40%
+ltr-property("margin", 40%, false)
.columns.is-mobile > &.is-offset-three-fifths
margin-left: 60%
+ltr-property("margin", 60%, false)
.columns.is-mobile > &.is-offset-four-fifths
margin-left: 80%
@for $i from 1 through 12
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
.columns.is-mobile > &.is-#{$i}
flex: none
width: percentage($i / 12)
width: percentage(divide($i, 12))
.columns.is-mobile > &.is-offset-#{$i}
margin-left: percentage($i / 12)
+ltr-property("margin", percentage(divide($i, 12)), false)
+mobile
&.is-narrow-mobile
flex: none
width: unset
&.is-full-mobile
flex: none
width: 100%
@@ -96,33 +100,34 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
&.is-offset-three-quarters-mobile
margin-left: 75%
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds-mobile
margin-left: 66.6666%
+ltr-property("margin", 66.6666%, false)
&.is-offset-half-mobile
margin-left: 50%
+ltr-property("margin", 50%, false)
&.is-offset-one-third-mobile
margin-left: 33.3333%
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter-mobile
margin-left: 25%
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth-mobile
margin-left: 20%
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths-mobile
margin-left: 40%
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths-mobile
margin-left: 60%
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths-mobile
margin-left: 80%
@for $i from 1 through 12
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i}-mobile
flex: none
width: percentage($i / 12)
width: percentage(divide($i, 12))
&.is-offset-#{$i}-mobile
margin-left: percentage($i / 12)
+ltr-property("margin", percentage(divide($i, 12)), false)
+tablet
&.is-narrow,
&.is-narrow-tablet
flex: none
width: unset
&.is-full,
&.is-full-tablet
flex: none
@@ -165,42 +170,43 @@ $column-gap: 0.75rem !default
width: 80%
&.is-offset-three-quarters,
&.is-offset-three-quarters-tablet
margin-left: 75%
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds,
&.is-offset-two-thirds-tablet
margin-left: 66.6666%
+ltr-property("margin", 66.6666%, false)
&.is-offset-half,
&.is-offset-half-tablet
margin-left: 50%
+ltr-property("margin", 50%, false)
&.is-offset-one-third,
&.is-offset-one-third-tablet
margin-left: 33.3333%
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter,
&.is-offset-one-quarter-tablet
margin-left: 25%
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth,
&.is-offset-one-fifth-tablet
margin-left: 20%
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths,
&.is-offset-two-fifths-tablet
margin-left: 40%
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths,
&.is-offset-three-fifths-tablet
margin-left: 60%
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths,
&.is-offset-four-fifths-tablet
margin-left: 80%
@for $i from 1 through 12
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i},
&.is-#{$i}-tablet
flex: none
width: percentage($i / 12)
width: percentage(divide($i, 12))
&.is-offset-#{$i},
&.is-offset-#{$i}-tablet
margin-left: percentage($i / 12)
+ltr-property("margin", percentage(divide($i, 12)), false)
+touch
&.is-narrow-touch
flex: none
width: unset
&.is-full-touch
flex: none
width: 100%
@@ -232,32 +238,33 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
&.is-offset-three-quarters-touch
margin-left: 75%
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds-touch
margin-left: 66.6666%
+ltr-property("margin", 66.6666%, false)
&.is-offset-half-touch
margin-left: 50%
+ltr-property("margin", 50%, false)
&.is-offset-one-third-touch
margin-left: 33.3333%
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter-touch
margin-left: 25%
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth-touch
margin-left: 20%
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths-touch
margin-left: 40%
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths-touch
margin-left: 60%
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths-touch
margin-left: 80%
@for $i from 1 through 12
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i}-touch
flex: none
width: percentage($i / 12)
width: percentage(divide($i, 12))
&.is-offset-#{$i}-touch
margin-left: percentage($i / 12)
+ltr-property("margin", percentage(divide($i, 12)), false)
+desktop
&.is-narrow-desktop
flex: none
width: unset
&.is-full-desktop
flex: none
width: 100%
@@ -289,32 +296,33 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
&.is-offset-three-quarters-desktop
margin-left: 75%
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds-desktop
margin-left: 66.6666%
+ltr-property("margin", 66.6666%, false)
&.is-offset-half-desktop
margin-left: 50%
+ltr-property("margin", 50%, false)
&.is-offset-one-third-desktop
margin-left: 33.3333%
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter-desktop
margin-left: 25%
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth-desktop
margin-left: 20%
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths-desktop
margin-left: 40%
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths-desktop
margin-left: 60%
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths-desktop
margin-left: 80%
@for $i from 1 through 12
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i}-desktop
flex: none
width: percentage($i / 12)
width: percentage(divide($i, 12))
&.is-offset-#{$i}-desktop
margin-left: percentage($i / 12)
+ltr-property("margin", percentage(divide($i, 12)), false)
+widescreen
&.is-narrow-widescreen
flex: none
width: unset
&.is-full-widescreen
flex: none
width: 100%
@@ -346,32 +354,33 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
&.is-offset-three-quarters-widescreen
margin-left: 75%
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds-widescreen
margin-left: 66.6666%
+ltr-property("margin", 66.6666%, false)
&.is-offset-half-widescreen
margin-left: 50%
+ltr-property("margin", 50%, false)
&.is-offset-one-third-widescreen
margin-left: 33.3333%
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter-widescreen
margin-left: 25%
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth-widescreen
margin-left: 20%
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths-widescreen
margin-left: 40%
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths-widescreen
margin-left: 60%
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths-widescreen
margin-left: 80%
@for $i from 1 through 12
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i}-widescreen
flex: none
width: percentage($i / 12)
width: percentage(divide($i, 12))
&.is-offset-#{$i}-widescreen
margin-left: percentage($i / 12)
+ltr-property("margin", percentage(divide($i, 12)), false)
+fullhd
&.is-narrow-fullhd
flex: none
width: unset
&.is-full-fullhd
flex: none
width: 100%
@@ -403,33 +412,33 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
&.is-offset-three-quarters-fullhd
margin-left: 75%
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds-fullhd
margin-left: 66.6666%
+ltr-property("margin", 66.6666%, false)
&.is-offset-half-fullhd
margin-left: 50%
+ltr-property("margin", 50%, false)
&.is-offset-one-third-fullhd
margin-left: 33.3333%
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter-fullhd
margin-left: 25%
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth-fullhd
margin-left: 20%
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths-fullhd
margin-left: 40%
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths-fullhd
margin-left: 60%
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths-fullhd
margin-left: 80%
@for $i from 1 through 12
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i}-fullhd
flex: none
width: percentage($i / 12)
width: percentage(divide($i, 12))
&.is-offset-#{$i}-fullhd
margin-left: percentage($i / 12)
+ltr-property("margin", percentage(divide($i, 12)), false)
.columns
margin-left: (-$column-gap)
margin-right: (-$column-gap)
+ltr-property("margin", (-$column-gap), false)
+ltr-property("margin", (-$column-gap))
margin-top: (-$column-gap)
&:last-child
margin-bottom: (-$column-gap)
@@ -439,8 +448,8 @@ $column-gap: 0.75rem !default
&.is-centered
justify-content: center
&.is-gapless
margin-left: 0
margin-right: 0
+ltr-property("margin", 0, false)
+ltr-property("margin", 0)
margin-top: 0
& > .column
margin: 0
@@ -467,9 +476,9 @@ $column-gap: 0.75rem !default
@if $variable-columns
.columns.is-variable
--columnGap: 0.75rem
margin-left: calc(-1 * var(--columnGap))
margin-right: calc(-1 * var(--columnGap))
.column
+ltr-property("margin", calc(-1 * var(--columnGap)), false)
+ltr-property("margin", calc(-1 * var(--columnGap)))
> .column
padding-left: var(--columnGap)
padding-right: var(--columnGap)
@for $i from 0 through 8
+11 -7
View File
@@ -1,3 +1,7 @@
@import "../utilities/mixins"
$tile-spacing: 0.75rem !default
.tile
align-items: stretch
display: block
@@ -7,17 +11,17 @@
min-height: min-content
// Modifiers
&.is-ancestor
margin-left: -0.75rem
margin-right: -0.75rem
margin-top: -0.75rem
margin-left: $tile-spacing * -1
margin-right: $tile-spacing * -1
margin-top: $tile-spacing * -1
&:last-child
margin-bottom: -0.75rem
margin-bottom: $tile-spacing * -1
&:not(:last-child)
margin-bottom: 0.75rem
margin-bottom: $tile-spacing
&.is-child
margin: 0 !important
&.is-parent
padding: 0.75rem
padding: $tile-spacing
&.is-vertical
flex-direction: column
& > .tile.is-child:not(:last-child)
@@ -29,4 +33,4 @@
@for $i from 1 through 12
&.is-#{$i}
flex: none
width: ($i / 12) * 100%
width: (divide($i, 12)) * 100%
+12
View File
@@ -0,0 +1,12 @@
/* Bulma Helpers */
@charset "utf-8"
@import "color"
@import "flexbox"
@import "float"
@import "other"
@import "overflow"
@import "position"
@import "spacing"
@import "typography"
@import "visibility"
+39
View File
@@ -0,0 +1,39 @@
@import "../utilities/derived-variables"
@each $name, $pair in $colors
$color: nth($pair, 1)
.has-text-#{$name}
color: $color !important
a.has-text-#{$name}
&:hover,
&:focus
color: bulmaDarken($color, 10%) !important
.has-background-#{$name}
background-color: $color !important
@if length($pair) >= 4
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
// Light
.has-text-#{$name}-light
color: $color-light !important
a.has-text-#{$name}-light
&:hover,
&:focus
color: bulmaDarken($color-light, 10%) !important
.has-background-#{$name}-light
background-color: $color-light !important
// Dark
.has-text-#{$name}-dark
color: $color-dark !important
a.has-text-#{$name}-dark
&:hover,
&:focus
color: bulmaLighten($color-dark, 10%) !important
.has-background-#{$name}-dark
background-color: $color-dark !important
@each $name, $shade in $shades
.has-text-#{$name}
color: $shade !important
.has-background-#{$name}
background-color: $shade !important
+35
View File
@@ -0,0 +1,35 @@
$flex-direction-values: row, row-reverse, column, column-reverse
@each $value in $flex-direction-values
.is-flex-direction-#{$value}
flex-direction: $value !important
$flex-wrap-values: nowrap, wrap, wrap-reverse
@each $value in $flex-wrap-values
.is-flex-wrap-#{$value}
flex-wrap: $value !important
$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
@each $value in $justify-content-values
.is-justify-content-#{$value}
justify-content: $value !important
$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
@each $value in $align-content-values
.is-align-content-#{$value}
align-content: $value !important
$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
@each $value in $align-items-values
.is-align-items-#{$value}
align-items: $value !important
$align-self-values: auto, flex-start, flex-end, center, baseline, stretch
@each $value in $align-self-values
.is-align-self-#{$value}
align-self: $value !important
$flex-operators: grow, shrink
@each $operator in $flex-operators
@for $i from 0 through 5
.is-flex-#{$operator}-#{$i}
flex-#{$operator}: $i !important
+10
View File
@@ -0,0 +1,10 @@
@import "../utilities/mixins"
.is-clearfix
+clearfix
.is-pulled-left
float: left !important
.is-pulled-right
float: right !important
+14
View File
@@ -0,0 +1,14 @@
@import "../utilities/mixins"
.is-radiusless
border-radius: 0 !important
.is-shadowless
box-shadow: none !important
.is-clickable
cursor: pointer !important
pointer-events: all !important
.is-unselectable
@extend %unselectable
+2
View File
@@ -0,0 +1,2 @@
.is-clipped
overflow: hidden !important
+7
View File
@@ -0,0 +1,7 @@
@import "../utilities/mixins"
.is-overlay
@extend %overlay
.is-relative
position: relative !important
+31
View File
@@ -0,0 +1,31 @@
.is-marginless
margin: 0 !important
.is-paddingless
padding: 0 !important
$spacing-shortcuts: ("margin": "m", "padding": "p") !default
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
$spacing-horizontal: "x" !default
$spacing-vertical: "y" !default
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default
@each $property, $shortcut in $spacing-shortcuts
@each $name, $value in $spacing-values
// All directions
.#{$shortcut}-#{$name}
#{$property}: $value !important
// Cardinal directions
@each $direction, $suffix in $spacing-directions
.#{$shortcut}#{$suffix}-#{$name}
#{$property}-#{$direction}: $value !important
// Horizontal axis
@if $spacing-horizontal != null
.#{$shortcut}#{$spacing-horizontal}-#{$name}
#{$property}-left: $value !important
#{$property}-right: $value !important
// Vertical axis
@if $spacing-vertical != null
.#{$shortcut}#{$spacing-vertical}-#{$name}
#{$property}-top: $value !important
#{$property}-bottom: $value !important
+103
View File
@@ -0,0 +1,103 @@
@import "../utilities/mixins"
=typography-size($target:'')
@each $size in $sizes
$i: index($sizes, $size)
.is-size-#{$i}#{if($target == '', '', '-' + $target)}
font-size: $size !important
+typography-size()
+mobile
+typography-size('mobile')
+tablet
+typography-size('tablet')
+touch
+typography-size('touch')
+desktop
+typography-size('desktop')
+widescreen
+typography-size('widescreen')
+fullhd
+typography-size('fullhd')
$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
@each $alignment, $text-align in $alignments
.has-text-#{$alignment}
text-align: #{$text-align} !important
@each $alignment, $text-align in $alignments
+mobile
.has-text-#{$alignment}-mobile
text-align: #{$text-align} !important
+tablet
.has-text-#{$alignment}-tablet
text-align: #{$text-align} !important
+tablet-only
.has-text-#{$alignment}-tablet-only
text-align: #{$text-align} !important
+touch
.has-text-#{$alignment}-touch
text-align: #{$text-align} !important
+desktop
.has-text-#{$alignment}-desktop
text-align: #{$text-align} !important
+desktop-only
.has-text-#{$alignment}-desktop-only
text-align: #{$text-align} !important
+widescreen
.has-text-#{$alignment}-widescreen
text-align: #{$text-align} !important
+widescreen-only
.has-text-#{$alignment}-widescreen-only
text-align: #{$text-align} !important
+fullhd
.has-text-#{$alignment}-fullhd
text-align: #{$text-align} !important
.is-capitalized
text-transform: capitalize !important
.is-lowercase
text-transform: lowercase !important
.is-uppercase
text-transform: uppercase !important
.is-italic
font-style: italic !important
.is-underlined
text-decoration: underline !important
.has-text-weight-light
font-weight: $weight-light !important
.has-text-weight-normal
font-weight: $weight-normal !important
.has-text-weight-medium
font-weight: $weight-medium !important
.has-text-weight-semibold
font-weight: $weight-semibold !important
.has-text-weight-bold
font-weight: $weight-bold !important
.is-family-primary
font-family: $family-primary !important
.is-family-secondary
font-family: $family-secondary !important
.is-family-sans-serif
font-family: $family-sans-serif !important
.is-family-monospace
font-family: $family-monospace !important
.is-family-code
font-family: $family-code !important
+122
View File
@@ -0,0 +1,122 @@
@import "../utilities/mixins"
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
@each $display in $displays
.is-#{$display}
display: #{$display} !important
+mobile
.is-#{$display}-mobile
display: #{$display} !important
+tablet
.is-#{$display}-tablet
display: #{$display} !important
+tablet-only
.is-#{$display}-tablet-only
display: #{$display} !important
+touch
.is-#{$display}-touch
display: #{$display} !important
+desktop
.is-#{$display}-desktop
display: #{$display} !important
+desktop-only
.is-#{$display}-desktop-only
display: #{$display} !important
+widescreen
.is-#{$display}-widescreen
display: #{$display} !important
+widescreen-only
.is-#{$display}-widescreen-only
display: #{$display} !important
+fullhd
.is-#{$display}-fullhd
display: #{$display} !important
.is-hidden
display: none !important
.is-sr-only
border: none !important
clip: rect(0, 0, 0, 0) !important
height: 0.01em !important
overflow: hidden !important
padding: 0 !important
position: absolute !important
white-space: nowrap !important
width: 0.01em !important
+mobile
.is-hidden-mobile
display: none !important
+tablet
.is-hidden-tablet
display: none !important
+tablet-only
.is-hidden-tablet-only
display: none !important
+touch
.is-hidden-touch
display: none !important
+desktop
.is-hidden-desktop
display: none !important
+desktop-only
.is-hidden-desktop-only
display: none !important
+widescreen
.is-hidden-widescreen
display: none !important
+widescreen-only
.is-hidden-widescreen-only
display: none !important
+fullhd
.is-hidden-fullhd
display: none !important
.is-invisible
visibility: hidden !important
+mobile
.is-invisible-mobile
visibility: hidden !important
+tablet
.is-invisible-tablet
visibility: hidden !important
+tablet-only
.is-invisible-tablet-only
visibility: hidden !important
+touch
.is-invisible-touch
visibility: hidden !important
+desktop
.is-invisible-desktop
visibility: hidden !important
+desktop-only
.is-invisible-desktop-only
visibility: hidden !important
+widescreen
.is-invisible-widescreen
visibility: hidden !important
+widescreen-only
.is-invisible-widescreen-only
visibility: hidden !important
+fullhd
.is-invisible-fullhd
visibility: hidden !important
+4 -3
View File
@@ -1,5 +1,6 @@
/* Bulma Layout */
@charset "utf-8"
@import "hero.sass"
@import "section.sass"
@import "footer.sass"
@import "hero"
@import "section"
@import "footer"
+6 -1
View File
@@ -1,6 +1,11 @@
$footer-background-color: $white-bis !default
@import "../utilities/derived-variables"
$footer-background-color: $scheme-main-bis !default
$footer-color: false !default
$footer-padding: 3rem 1.5rem 6rem !default
.footer
background-color: $footer-background-color
padding: $footer-padding
@if $footer-color
color: $footer-color
+32 -35
View File
@@ -1,5 +1,14 @@
// Main container
@import "../utilities/mixins"
$hero-body-padding: 3rem 1.5rem !default
$hero-body-padding-tablet: 3rem 3rem !default
$hero-body-padding-small: 1.5rem !default
$hero-body-padding-medium: 9rem 4.5rem !default
$hero-body-padding-large: 18rem 6rem !default
$hero-colors: $colors !default
// Main container
.hero
align-items: stretch
display: flex
@@ -11,19 +20,19 @@
ul
border-bottom: none
// Colors
@each $name, $pair in $colors
@each $name, $pair in $hero-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
a:not(.button):not(.dropdown-item):not(.tag),
a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
strong
color: inherit
.title
color: $color-invert
.subtitle
color: rgba($color-invert, 0.9)
color: bulmaRgba($color-invert, 0.9)
a:not(.button),
strong
color: $color-invert
@@ -32,12 +41,12 @@
background-color: $color
.navbar-item,
.navbar-link
color: rgba($color-invert, 0.7)
color: bulmaRgba($color-invert, 0.7)
a.navbar-item,
.navbar-link
&:hover,
&.is-active
background-color: darken($color, 5%)
background-color: bulmaDarken($color, 5%)
color: $color-invert
.tabs
a
@@ -47,13 +56,14 @@
opacity: 1
li
&.is-active a
color: $color !important
opacity: 1
&.is-boxed,
&.is-toggle
a
color: $color-invert
&:hover
background-color: rgba($black, 0.1)
background-color: bulmaRgba($scheme-invert, 0.1)
li.is-active a
&,
&:hover
@@ -61,41 +71,26 @@
border-color: $color-invert
color: $color
// Modifiers
&.is-bold
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+mobile
.navbar-menu
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
// Responsiveness
// +mobile
// .nav-toggle
// span
// background-color: $color-invert
// &:hover
// background-color: rgba($black, 0.1)
// &.is-active
// span
// background-color: $color-invert
// .nav-menu
// .nav-item
// border-top-color: rgba($color-invert, 0.2)
@if type-of($color) == 'color'
&.is-bold
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+mobile
.navbar-menu
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
// Sizes
&.is-small
.hero-body
padding-bottom: 1.5rem
padding-top: 1.5rem
padding: $hero-body-padding-small
&.is-medium
+tablet
.hero-body
padding-bottom: 9rem
padding-top: 9rem
padding: $hero-body-padding-medium
&.is-large
+tablet
.hero-body
padding-bottom: 18rem
padding-top: 18rem
padding: $hero-body-padding-large
&.is-halfheight,
&.is-fullheight,
&.is-fullheight-with-navbar
@@ -141,7 +136,7 @@
display: flex
justify-content: center
.button:not(:last-child)
margin-right: 1.5rem
+ltr-property("margin", 1.5rem)
// Containers
@@ -153,4 +148,6 @@
.hero-body
flex-grow: 1
flex-shrink: 0
padding: 3rem 1.5rem
padding: $hero-body-padding
+tablet
padding: $hero-body-padding-tablet
+6 -2
View File
@@ -1,11 +1,15 @@
@import "../utilities/mixins"
$section-padding: 3rem 1.5rem !default
$section-padding-medium: 9rem 1.5rem !default
$section-padding-large: 18rem 1.5rem !default
$section-padding-desktop: 3rem 3rem !default
$section-padding-medium: 9rem 4.5rem !default
$section-padding-large: 18rem 6rem !default
.section
padding: $section-padding
// Responsiveness
+desktop
padding: $section-padding-desktop
// Sizes
&.is-medium
padding: $section-padding-medium
+7 -6
View File
@@ -1,8 +1,9 @@
/* Bulma Utilities */
@charset "utf-8"
@import "initial-variables.sass"
@import "functions.sass"
@import "derived-variables.sass"
@import "animations.sass"
@import "mixins.sass"
@import "controls.sass"
@import "initial-variables"
@import "functions"
@import "derived-variables"
@import "mixins"
@import "controls"
@import "extends"
+1 -5
View File
@@ -1,5 +1 @@
@keyframes spinAround
from
transform: rotate(0deg)
to
transform: rotate(359deg)
@warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead."
+5 -6
View File
@@ -1,13 +1,15 @@
@import "derived-variables"
$control-radius: $radius !default
$control-radius-small: $radius-small !default
$control-border-width: 1px !default
$control-height: 2.25em !default
$control-height: 2.5em !default
$control-line-height: 1.5 !default
$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default
$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default
$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
=control
-moz-appearance: none
@@ -37,9 +39,6 @@ $control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
fieldset[disabled] &
cursor: not-allowed
%control
+control
// The controls sizes use mixins so they can be used at different breakpoints
=control-small
border-radius: $control-radius-small
+39 -10
View File
@@ -1,3 +1,6 @@
@import "initial-variables"
@import "functions"
$primary: $turquoise !default
$info: $cyan !default
@@ -19,20 +22,39 @@ $blue-invert: findColorInvert($blue) !default
$purple-invert: findColorInvert($purple) !default
$red-invert: findColorInvert($red) !default
$primary-invert: $turquoise-invert !default
$info-invert: $cyan-invert !default
$success-invert: $green-invert !default
$warning-invert: $yellow-invert !default
$danger-invert: $red-invert !default
$light-invert: $dark !default
$dark-invert: $light !default
$primary-invert: findColorInvert($primary) !default
$primary-light: findLightColor($primary) !default
$primary-dark: findDarkColor($primary) !default
$info-invert: findColorInvert($info) !default
$info-light: findLightColor($info) !default
$info-dark: findDarkColor($info) !default
$success-invert: findColorInvert($success) !default
$success-light: findLightColor($success) !default
$success-dark: findDarkColor($success) !default
$warning-invert: findColorInvert($warning) !default
$warning-light: findLightColor($warning) !default
$warning-dark: findDarkColor($warning) !default
$danger-invert: findColorInvert($danger) !default
$danger-light: findLightColor($danger) !default
$danger-dark: findDarkColor($danger) !default
$light-invert: findColorInvert($light) !default
$dark-invert: findColorInvert($dark) !default
// General colors
$scheme-main: $white !default
$scheme-main-bis: $white-bis !default
$scheme-main-ter: $white-ter !default
$scheme-invert: $black !default
$scheme-invert-bis: $black-bis !default
$scheme-invert-ter: $black-ter !default
$background: $white-ter !default
$border: $grey-lighter !default
$border-hover: $grey-light !default
$border-light: $grey-lightest !default
$border-light-hover: $grey-light !default
// Text colors
@@ -43,7 +65,7 @@ $text-strong: $grey-darker !default
// Code colors
$code: $red !default
$code: darken($red, 15%) !default
$code-background: $background !default
$pre: $text !default
@@ -52,7 +74,9 @@ $pre-background: $background !default
// Link colors
$link: $blue !default
$link-invert: $blue-invert !default
$link-invert: findColorInvert($link) !default
$link-light: findLightColor($link) !default
$link-dark: findDarkColor($link) !default
$link-visited: $purple !default
$link-hover: $grey-darker !default
@@ -75,11 +99,16 @@ $size-normal: $size-6 !default
$size-medium: $size-5 !default
$size-large: $size-4 !default
// Effects
$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
// Lists and maps
$custom-colors: null !default
$custom-shades: null !default
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
+25
View File
@@ -0,0 +1,25 @@
@import "mixins"
%control
+control
%unselectable
+unselectable
%arrow
+arrow
%block
+block
%delete
+delete
%loader
+loader
%overlay
+overlay
%reset
+reset
+93 -19
View File
@@ -1,34 +1,53 @@
@function mergeColorMaps($bulma-colors, $custom-colors)
// we return at least bulma hardcoded colors
// We return at least Bulma's hard-coded colors
$merged-colors: $bulma-colors
// we want a map as input
// We want a map as input
@if type-of($custom-colors) == 'map'
@each $name, $components in $custom-colors
// color name should be a string and colors pair a list with at least one element
// The color name should be a string
// and the components either a single color
// or a colors list with at least one element
@if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
$color-base: null
$color-invert: null
$color-light: null
$color-dark: null
$value: null
// the param can either be a single color
// The param can either be a single color
// or a list of 2 colors
@if type-of($components) == 'color'
$color-base: $components
$color-invert: findColorInvert($color-base)
$color-light: findLightColor($color-base)
$color-dark: findDarkColor($color-base)
@else if type-of($components) == 'list'
$color-base: nth($components, 1)
// If Invert, Light and Dark are provided
@if length($components) > 3
$color-invert: nth($components, 2)
$color-light: nth($components, 3)
$color-dark: nth($components, 4)
// If only Invert and Light are provided
@else if length($components) > 2
$color-invert: nth($components, 2)
$color-light: nth($components, 3)
$color-dark: findDarkColor($color-base)
// If only Invert is provided
@else
$color-invert: nth($components, 2)
$color-light: findLightColor($color-base)
$color-dark: findDarkColor($color-base)
$color-invert: null
// is an inverted color provided in the list
@if length($components) > 1
$color-invert: nth($components, 2)
$value: ($color-base, $color-invert, $color-light, $color-dark)
// we only want a color as base color
// We only want to merge the map if the color base is an actual color
@if type-of($color-base) == 'color'
// if inverted color is not provided or is not a color we compute it
@if type-of($color-invert) != 'color'
$color-invert: findColorInvert($color-base)
// we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
$merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
// We merge this colors elements as map with Bulma's colors map
// (we can override them this way, no multiple definition for the same name)
// $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
$merged-colors: map_merge($merged-colors, ($name: $value))
@return $merged-colors
@@ -39,18 +58,20 @@
$value: $value * $number
@else if $exp < 0
@for $i from 1 through -$exp
$value: $value / $number
$value: divide($value, $number)
@return $value
@function colorLuminance($color)
@if type-of($color) != 'color'
@return 0.55
$color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
@each $name, $value in $color-rgb
$adjusted: 0
$value: $value / 255
$value: divide($value, 255)
@if $value < 0.03928
$value: $value / 12.92
$value: divide($value, 12.92)
@else
$value: ($value + .055) / 1.055
$value: divide(($value + .055), 1.055)
$value: powerNumber($value, 2)
$color-rgb: map-merge($color-rgb, ($name: $value))
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
@@ -60,3 +81,56 @@
@return rgba(#000, 0.7)
@else
@return #fff
@function findLightColor($color)
@if type-of($color) == 'color'
$l: 96%
@if lightness($color) > 96%
$l: lightness($color)
@return change-color($color, $lightness: $l)
@return $background
@function findDarkColor($color)
@if type-of($color) == 'color'
$base-l: 29%
$luminance: colorLuminance($color)
$luminance-delta: (0.53 - $luminance)
$target-l: round($base-l + ($luminance-delta * 53))
@return change-color($color, $lightness: max($base-l, $target-l))
@return $text-strong
@function bulmaRgba($color, $alpha)
@if type-of($color) != 'color'
@return $color
@return rgba($color, $alpha)
@function bulmaDarken($color, $amount)
@if type-of($color) != 'color'
@return $color
@return darken($color, $amount)
@function bulmaLighten($color, $amount)
@if type-of($color) != 'color'
@return $color
@return lighten($color, $amount)
// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
// Replaces old slash division deprecated in Dart Sass
@function divide($dividend, $divisor, $precision: 10)
$sign: if($dividend > 0 and $divisor > 0, 1, -1)
$dividend: abs($dividend)
$divisor: abs($divisor)
$quotient: 0
$remainder: $dividend
@if $dividend == 0
@return 0
@if $divisor == 0
@error "Cannot divide by 0"
@if $divisor == 1
@return $dividend
@while $remainder >= $divisor
$quotient: $quotient + 1
$remainder: $remainder - $divisor
@if $remainder > 0 and $precision > 0
$remainder: divide($remainder * 10, $divisor, $precision - 1) * .1
@return ($quotient + $remainder) * $sign
+13 -7
View File
@@ -9,19 +9,20 @@ $grey-dark: hsl(0, 0%, 29%) !default
$grey: hsl(0, 0%, 48%) !default
$grey-light: hsl(0, 0%, 71%) !default
$grey-lighter: hsl(0, 0%, 86%) !default
$grey-lightest: hsl(0, 0%, 93%) !default
$white-ter: hsl(0, 0%, 96%) !default
$white-bis: hsl(0, 0%, 98%) !default
$white: hsl(0, 0%, 100%) !default
$orange: hsl(14, 100%, 53%) !default
$yellow: hsl(48, 100%, 67%) !default
$green: hsl(141, 71%, 48%) !default
$yellow: hsl(44, 100%, 77%) !default
$green: hsl(153, 53%, 53%) !default
$turquoise: hsl(171, 100%, 41%) !default
$cyan: hsl(204, 86%, 53%) !default
$blue: hsl(217, 71%, 53%) !default
$cyan: hsl(207, 61%, 53%) !default
$blue: hsl(229, 53%, 53%) !default
$purple: hsl(271, 100%, 71%) !default
$red: hsl(348, 100%, 61%) !default
$red: hsl(348, 86%, 61%) !default
// Typography
@@ -43,10 +44,14 @@ $weight-medium: 500 !default
$weight-semibold: 600 !default
$weight-bold: 700 !default
// Spacing
$block-spacing: 1.5rem !default
// Responsiveness
// The container horizontal gap, which acts as the offset for breakpoints
$gap: 64px !default
$gap: 32px !default
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet: 769px !default
// 960px container + 4rem
@@ -64,9 +69,10 @@ $easing: ease-out !default
$radius-small: 2px !default
$radius: 4px !default
$radius-large: 6px !default
$radius-rounded: 290486px !default
$radius-rounded: 9999px !default
$speed: 86ms !default
// Flags
$variable-columns: true !default
$rtl: false !default
+49 -30
View File
@@ -1,4 +1,4 @@
@import "initial-variables"
@import "derived-variables"
=clearfix
&::after
@@ -9,11 +9,11 @@
=center($width, $height: 0)
position: absolute
@if $height != 0
left: calc(50% - (#{$width} / 2))
top: calc(50% - (#{$height} / 2))
left: calc(50% - (#{$width} * 0.5))
top: calc(50% - (#{$height} * 0.5))
@else
left: calc(50% - (#{$width} / 2))
top: calc(50% - (#{$width} / 2))
left: calc(50% - (#{$width} * 0.5))
top: calc(50% - (#{$width} * 0.5))
=fa($size, $dimensions)
display: inline-block
@@ -48,7 +48,7 @@
&:nth-child(3)
top: calc(50% + 4px)
&:hover
background-color: rgba(black, 0.05)
background-color: bulmaRgba(black, 0.05)
// Modifers
&.is-active
span
@@ -68,6 +68,18 @@
&:#{$placeholder}-placeholder
@content
=reset
-moz-appearance: none
-webkit-appearance: none
appearance: none
background: none
border: none
color: currentColor
font-family: inherit
font-size: 1em
margin: 0
padding: 0
// Responsiveness
=from($device)
@@ -128,6 +140,30 @@
@media screen and (min-width: $fullhd)
@content
=ltr
@if not $rtl
@content
=rtl
@if $rtl
@content
=ltr-property($property, $spacing, $right: true)
$normal: if($right, "right", "left")
$opposite: if($right, "left", "right")
@if $rtl
#{$property}-#{$opposite}: $spacing
@else
#{$property}-#{$normal}: $spacing
=ltr-position($spacing, $right: true)
$normal: if($right, "right", "left")
$opposite: if($right, "left", "right")
@if $rtl
#{$opposite}: $spacing
@else
#{$normal}: $spacing
// Placeholders
=unselectable
@@ -137,9 +173,6 @@
-ms-user-select: none
user-select: none
%unselectable
+unselectable
=arrow($color: transparent)
border: 3px solid $color
border-radius: 2px
@@ -156,21 +189,15 @@
transform-origin: center
width: 0.625em
%arrow
+arrow
=block
=block($spacing: $block-spacing)
&:not(:last-child)
margin-bottom: 1.5rem
%block
+block
margin-bottom: $spacing
=delete
@extend %unselectable
+unselectable
-moz-appearance: none
-webkit-appearance: none
background-color: rgba($black, 0.2)
background-color: bulmaRgba($scheme-invert, 0.2)
border: none
border-radius: $radius-rounded
cursor: pointer
@@ -190,7 +217,7 @@
width: 20px
&::before,
&::after
background-color: $white
background-color: $scheme-main
content: ""
display: block
left: 50%
@@ -206,9 +233,9 @@
width: 2px
&:hover,
&:focus
background-color: rgba($black, 0.3)
background-color: bulmaRgba($scheme-invert, 0.3)
&:active
background-color: rgba($black, 0.4)
background-color: bulmaRgba($scheme-invert, 0.4)
// Sizes
&.is-small
height: 16px
@@ -232,9 +259,6 @@
min-width: 32px
width: 32px
%delete
+delete
=loader
animation: spinAround 500ms infinite linear
border: 2px solid $grey-lighter
@@ -247,9 +271,6 @@
position: relative
width: 1em
%loader
+loader
=overlay($offset: 0)
bottom: $offset
left: $offset
@@ -257,5 +278,3 @@
right: $offset
top: $offset
%overlay
+overlay
+18 -4
View File
@@ -1,11 +1,25 @@
{
"name": "website",
"lockfileVersion": 2,
"requires": true,
"lockfileVersion": 1,
"packages": {
"": {
"devDependencies": {
"bulma": "0.9.3"
}
},
"node_modules/bulma": {
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.3.tgz",
"integrity": "sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==",
"dev": true
}
},
"dependencies": {
"bulma": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.4.tgz",
"integrity": "sha1-fnRRLpEY2XmQITOeZ+Nl7grE8/k=",
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.3.tgz",
"integrity": "sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==",
"dev": true
}
}
+1 -1
View File
@@ -1,6 +1,6 @@
{
"private": true,
"devDependencies": {
"bulma": "0.7.4"
"bulma": "0.9.3"
}
}