Youen Toupin
3 years ago
87 changed files with 7566 additions and 154 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,21 @@ |
|||||||
|
The MIT License (MIT) |
||||||
|
|
||||||
|
Copyright (c) 2020 Jeremy Thomas |
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||||
|
of this software and associated documentation files (the "Software"), to deal |
||||||
|
in the Software without restriction, including without limitation the rights |
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||||
|
copies of the Software, and to permit persons to whom the Software is |
||||||
|
furnished to do so, subject to the following conditions: |
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in |
||||||
|
all copies or substantial portions of the Software. |
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
||||||
|
THE SOFTWARE. |
@ -0,0 +1,134 @@ |
|||||||
|
# [Bulma](https://bulma.io) |
||||||
|
|
||||||
|
Bulma is a **modern CSS framework** based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes). |
||||||
|
|
||||||
|
![Github](https://img.shields.io/github/v/release/jgthms/bulma?logo=Bulma) |
||||||
|
[![npm](https://img.shields.io/npm/v/bulma.svg)][npm-link] |
||||||
|
[![npm](https://img.shields.io/npm/dm/bulma.svg)][npm-link] |
||||||
|
[![](https://data.jsdelivr.com/v1/package/npm/bulma/badge)](https://www.jsdelivr.com/package/npm/bulma) |
||||||
|
[![Awesome][awesome-badge]][awesome-link] |
||||||
|
[![Join the chat at https://gitter.im/jgthms/bulma](https://badges.gitter.im/jgthms/bulma.svg)](https://gitter.im/jgthms/bulma) |
||||||
|
[![Build Status](https://travis-ci.org/jgthms/bulma.svg?branch=master)](https://travis-ci.org/jgthms/bulma) |
||||||
|
|
||||||
|
<a href="https://bulma.io"><img src="https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png" alt="Bulma: a Flexbox CSS framework" style="max-width:100%;" width="600"></a> |
||||||
|
|
||||||
|
## Quick install |
||||||
|
|
||||||
|
Bulma is constantly in development! Try it out now: |
||||||
|
|
||||||
|
### NPM |
||||||
|
|
||||||
|
```sh |
||||||
|
npm install bulma |
||||||
|
``` |
||||||
|
|
||||||
|
**or** |
||||||
|
|
||||||
|
### Yarn |
||||||
|
|
||||||
|
```sh |
||||||
|
yarn add bulma |
||||||
|
``` |
||||||
|
|
||||||
|
### Bower |
||||||
|
|
||||||
|
```sh |
||||||
|
bower install bulma |
||||||
|
``` |
||||||
|
|
||||||
|
### Import |
||||||
|
After installation, you can import the CSS file into your project using this snippet: |
||||||
|
|
||||||
|
```sh |
||||||
|
@import 'bulma/css/bulma.css' |
||||||
|
``` |
||||||
|
|
||||||
|
### CDN |
||||||
|
|
||||||
|
[https://www.jsdelivr.com/package/npm/bulma](https://www.jsdelivr.com/package/npm/bulma) |
||||||
|
|
||||||
|
Feel free to raise an issue or submit a pull request. |
||||||
|
|
||||||
|
## CSS only |
||||||
|
|
||||||
|
Bulma is a **CSS** framework. As such, the sole output is a single CSS file: [bulma.css](https://github.com/jgthms/bulma/blob/master/css/bulma.css) |
||||||
|
|
||||||
|
You can either use that file, "out of the box", or download the Sass source files to customize the [variables](https://bulma.io/documentation/overview/variables/). |
||||||
|
|
||||||
|
There is **no** JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered "environment agnostic": it's just the style layer on top of the logic. |
||||||
|
|
||||||
|
## Browser Support |
||||||
|
|
||||||
|
Bulma uses [autoprefixer](https://github.com/postcss/autoprefixer) to make (most) Flexbox features compatible with earlier browser versions. According to [Can I use](https://caniuse.com/#feat=flexbox), Bulma is compatible with **recent** versions of: |
||||||
|
|
||||||
|
* Chrome |
||||||
|
* Edge |
||||||
|
* Firefox |
||||||
|
* Opera |
||||||
|
* Safari |
||||||
|
|
||||||
|
Internet Explorer (10+) is only partially supported. |
||||||
|
|
||||||
|
## Documentation |
||||||
|
|
||||||
|
The documentation resides in the [docs](docs) directory, and is built with the Ruby-based [Jekyll](https://jekyllrb.com/) tool. |
||||||
|
|
||||||
|
Browse the [online documentation here.](https://bulma.io/documentation/overview/start/) |
||||||
|
|
||||||
|
## Related projects |
||||||
|
|
||||||
|
| Project | Description | |
||||||
|
|--------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------| |
||||||
|
| [Bulma with Attribute Modules](https://github.com/j5bot/bulma-attribute-selectors) | Adds support for attribute-based selectors | |
||||||
|
| [Bulma with Rails](https://github.com/joshuajansen/bulma-rails) | Integrates Bulma with the rails asset pipeline | |
||||||
|
| [BulmaRazor](https://github.com/loogn/bulmarazor) | A lightweight component library based on Bulma and Blazor. | |
||||||
|
| [Vue Admin (dead)](https://github.com/vue-bulma/vue-admin) | Vue Admin framework powered by Bulma | |
||||||
|
| [Bulmaswatch](https://github.com/jenil/bulmaswatch) | Free themes for Bulma | |
||||||
|
| [Goldfish (read-only)](https://github.com/Caiyeon/goldfish) | Vault UI with Bulma, Golang, and Vue Admin | |
||||||
|
| [ember-bulma](https://github.com/open-tux/ember-bulma) | Ember addon providing a collection of UI components for Bulma | |
||||||
|
| [Bloomer](https://bloomer.js.org) | A set of React components for Bulma | |
||||||
|
| [React-bulma](https://github.com/kulakowka/react-bulma) | React.js components for Bulma | |
||||||
|
| [Buefy](https://buefy.org/) | Lightweight UI components for Vue.js based on Bulma | |
||||||
|
| [vue-bulma-components](https://github.com/vouill/vue-bulma-components) | Bulma components for Vue.js with straightforward syntax | |
||||||
|
| [BulmaJS](https://github.com/VizuaaLOG/BulmaJS) | Javascript integration for Bulma. Written in ES6 with a data-* API | |
||||||
|
| [Bulma-modal-fx](https://github.com/postare/bulma-modal-fx) | A set of modal window effects with CSS transitions and animations for Bulma | |
||||||
|
| [Bulma Stylus](https://github.com/groenroos/bulma-stylus) | Up-to-date 1:1 translation to Stylus |
||||||
|
| [Bulma.styl (read-only)](https://github.com/log1x/bulma.styl) | 1:1 Stylus translation of Bulma 0.6.11 | |
||||||
|
| [elm-bulma](https://github.com/surprisetalk/elm-bulma) | Bulma + Elm | |
||||||
|
| [elm-bulma-classes](https://github.com/ahstro/elm-bulma-classes) | Bulma classes prepared for usage with Elm | |
||||||
|
| [Bulma Customizer](https://bulma-customizer.bstash.io/) | Bulma Customizer – Create your own **bespoke** Bulma build | |
||||||
|
| [Fulma](https://fulma.github.io/Fulma/) | Wrapper around Bulma for [fable-react](https://github.com/fable-compiler/fable-react) | |
||||||
|
| [Laravel Enso](https://github.com/laravel-enso/enso) | SPA Admin Panel built with Bulma, VueJS and Laravel | |
||||||
|
| [Django Bulma](https://github.com/timonweb/django-bulma) | Integrates Bulma with Django | |
||||||
|
| [Bulma Templates](https://github.com/dansup/bulma-templates) | Free Templates for Bulma | |
||||||
|
| [React Bulma Components](https://github.com/couds/react-bulma-components) | Another React wrap on React for Bulma.io | |
||||||
|
| [purescript-bulma](https://github.com/sectore/purescript-bulma) | PureScript bindings for Bulma | |
||||||
|
| [Vue Datatable](https://github.com/laravel-enso/vuedatatable) | Bulma themed datatable based on Vue, Laravel & JSON templates | |
||||||
|
| [bulma-fluent](https://mubaidr.github.io/bulma-fluent/) | Fluent Design Theme for Bulma inspired by Microsoft’s Fluent Design System | |
||||||
|
| [csskrt-csskrt](https://github.com/4d11/csskrt-csskrt) | Automatically add Bulma classes to HTML files | |
||||||
|
| [bulma-pagination-react](https://github.com/hipstersmoothie/bulma-pagination-react) | Bulma pagination as a react component | |
||||||
|
| [bulma-helpers](https://github.com/jmaczan/bulma-helpers) | Functional / Atomic CSS classes for Bulma | |
||||||
|
| [bulma-swatch-hook](https://github.com/hipstersmoothie/bulma-swatch-hook) | Bulma swatches as a react hook and a component | |
||||||
|
| [BulmaWP (read-only)](https://github.com/tomhrtly/BulmaWP) | Starter WordPress theme for Bulma | |
||||||
|
| [Ralma](https://github.com/aldi/ralma) | Stateless Ractive.js Components for Bulma | |
||||||
|
| [Django Simple Bulma](https://github.com/python-discord/django-simple-bulma) | Lightweight integration of Bulma and Bulma-Extensions for your Django app | |
||||||
|
| [rbx](https://dfee.github.io/rbx) | Comprehensive React UI Framework written in TypeScript | |
||||||
|
| [Awesome Bulma Templates](https://github.com/aldi/awesome-bulma-templates) | Free real-world Templates built with Bulma | |
||||||
|
| [Trunx](http://g14n.info/trunx) | Super Saiyan React components, son of awesome Bulma, implemented in TypeScript | |
||||||
|
| [@aybolit/bulma](https://github.com/web-padawan/aybolit/tree/master/packages/bulma) | Web Components library inspired by Bulma and Bulma-extensions | |
||||||
|
| [Drulma](https://www.drupal.org/project/drulma) | Drupal theme for Bulma. | |
||||||
|
| [Bulrush](https://github.com/textbook/bulrush) | A Bulma-based Python Pelican blog theme | |
||||||
|
| [Bulma Variable Export](https://github.com/service-paradis/bulma-variables-export) | Access Bulma Variables in Javascript/Typescript in project using Webpack | |
||||||
|
| [Bulmil](https://github.com/gomah/bulmil) | An agnostic UI components library based on Web Components, made with Bulma & Stencil. | |
||||||
|
| [Svelte Bulma Components](https://github.com/elcobvg/svelte-bulma-components) | Library of UI components to be used in [Svelte.js](https://svelte.technology/) or standalone. | |
||||||
|
| [Bulma Nunjucks Starterkit](https://github.com/benninkcorien/nunjucks-starter-kit) | Starterkit for Nunjucks with Bulma. | |
||||||
|
| [Bulma-Social](https://github.com/aldi/bulma-social) | Social Buttons and Colors for Bulma | |
||||||
|
| [Divjoy](https://divjoy.com/?kit=bulma) | React codebase generator with Bulma templates | |
||||||
|
|
||||||
|
## Copyright and license ![Github](https://img.shields.io/github/license/jgthms/bulma?logo=Github) |
||||||
|
|
||||||
|
Code copyright 2021 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE). |
||||||
|
|
||||||
|
[npm-link]: https://www.npmjs.com/package/bulma |
||||||
|
[awesome-link]: https://github.com/awesome-css-group/awesome-css |
||||||
|
[awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg |
@ -0,0 +1,10 @@ |
|||||||
|
@charset "utf-8" |
||||||
|
/*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */ |
||||||
|
@import "sass/utilities/_all" |
||||||
|
@import "sass/base/_all" |
||||||
|
@import "sass/elements/_all" |
||||||
|
@import "sass/form/_all" |
||||||
|
@import "sass/components/_all" |
||||||
|
@import "sass/grid/_all" |
||||||
|
@import "sass/helpers/_all" |
||||||
|
@import "sass/layout/_all" |
@ -0,0 +1,82 @@ |
|||||||
|
{ |
||||||
|
"_from": "bulma@0.9.3", |
||||||
|
"_id": "bulma@0.9.3", |
||||||
|
"_inBundle": false, |
||||||
|
"_integrity": "sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==", |
||||||
|
"_location": "/bulma", |
||||||
|
"_phantomChildren": {}, |
||||||
|
"_requested": { |
||||||
|
"type": "version", |
||||||
|
"registry": true, |
||||||
|
"raw": "bulma@0.9.3", |
||||||
|
"name": "bulma", |
||||||
|
"escapedName": "bulma", |
||||||
|
"rawSpec": "0.9.3", |
||||||
|
"saveSpec": null, |
||||||
|
"fetchSpec": "0.9.3" |
||||||
|
}, |
||||||
|
"_requiredBy": [ |
||||||
|
"#USER", |
||||||
|
"/" |
||||||
|
], |
||||||
|
"_resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.3.tgz", |
||||||
|
"_shasum": "ddccb7436ebe3e21bf47afe01d3c43a296b70243", |
||||||
|
"_spec": "bulma@0.9.3", |
||||||
|
"_where": "/Users/jthomas/Desktop", |
||||||
|
"author": { |
||||||
|
"name": "Jeremy Thomas", |
||||||
|
"email": "bbxdesign@gmail.com", |
||||||
|
"url": "https://jgthms.com" |
||||||
|
}, |
||||||
|
"bugs": { |
||||||
|
"url": "https://github.com/jgthms/bulma/issues" |
||||||
|
}, |
||||||
|
"bundleDependencies": false, |
||||||
|
"deprecated": false, |
||||||
|
"description": "Modern CSS framework based on Flexbox", |
||||||
|
"devDependencies": { |
||||||
|
"autoprefixer": "^9.8.6", |
||||||
|
"clean-css-cli": "^4.3.0", |
||||||
|
"node-sass": "^4.14.1", |
||||||
|
"postcss-cli": "^7.1.2", |
||||||
|
"rimraf": "^3.0.2" |
||||||
|
}, |
||||||
|
"files": [ |
||||||
|
"css", |
||||||
|
"sass", |
||||||
|
"bulma.sass", |
||||||
|
"LICENSE", |
||||||
|
"README.md" |
||||||
|
], |
||||||
|
"homepage": "https://bulma.io", |
||||||
|
"keywords": [ |
||||||
|
"css", |
||||||
|
"sass", |
||||||
|
"flexbox", |
||||||
|
"responsive", |
||||||
|
"framework" |
||||||
|
], |
||||||
|
"license": "MIT", |
||||||
|
"main": "bulma.sass", |
||||||
|
"name": "bulma", |
||||||
|
"repository": { |
||||||
|
"type": "git", |
||||||
|
"url": "git+https://github.com/jgthms/bulma.git" |
||||||
|
}, |
||||||
|
"scripts": { |
||||||
|
"build": "npm run build-sass && npm run build-autoprefix && npm run build-cleancss", |
||||||
|
"build-autoprefix": "postcss --use autoprefixer --map false --output css/bulma.css css/bulma.css", |
||||||
|
"build-cleancss": "cleancss -o css/bulma.min.css css/bulma.css", |
||||||
|
"build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css", |
||||||
|
"clean": "rimraf css", |
||||||
|
"deploy": "npm run clean && npm run build && npm run rtl", |
||||||
|
"rtl": "npm run rtl-sass && npm run rtl-autoprefix && npm run rtl-cleancss", |
||||||
|
"rtl-autoprefix": "postcss --use autoprefixer --map false --output css/bulma-rtl.css css/bulma-rtl.css", |
||||||
|
"rtl-cleancss": "cleancss -o css/bulma-rtl.min.css css/bulma-rtl.css", |
||||||
|
"rtl-sass": "node-sass --output-style expanded --source-map true bulma-rtl.sass css/bulma-rtl.css", |
||||||
|
"start": "npm run build-sass -- --watch" |
||||||
|
}, |
||||||
|
"style": "bulma/css/bulma.min.css", |
||||||
|
"unpkg": "css/bulma.css", |
||||||
|
"version": "0.9.3" |
||||||
|
} |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,6 @@ |
|||||||
|
/* Bulma Base */ |
||||||
|
@charset "utf-8" |
||||||
|
|
||||||
|
@import "minireset" |
||||||
|
@import "generic" |
||||||
|
@import "animations" |
@ -0,0 +1,5 @@ |
|||||||
|
@keyframes spinAround |
||||||
|
from |
||||||
|
transform: rotate(0deg) |
||||||
|
to |
||||||
|
transform: rotate(359deg) |
@ -0,0 +1,145 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$body-background-color: $scheme-main !default |
||||||
|
$body-size: 16px !default |
||||||
|
$body-min-width: 300px !default |
||||||
|
$body-rendering: optimizeLegibility !default |
||||||
|
$body-family: $family-primary !default |
||||||
|
$body-overflow-x: hidden !default |
||||||
|
$body-overflow-y: scroll !default |
||||||
|
|
||||||
|
$body-color: $text !default |
||||||
|
$body-font-size: 1em !default |
||||||
|
$body-weight: $weight-normal !default |
||||||
|
$body-line-height: 1.5 !default |
||||||
|
|
||||||
|
$code-family: $family-code !default |
||||||
|
$code-padding: 0.25em 0.5em 0.25em !default |
||||||
|
$code-weight: normal !default |
||||||
|
$code-size: 0.875em !default |
||||||
|
|
||||||
|
$small-font-size: 0.875em !default |
||||||
|
|
||||||
|
$hr-background-color: $background !default |
||||||
|
$hr-height: 2px !default |
||||||
|
$hr-margin: 1.5rem 0 !default |
||||||
|
|
||||||
|
$strong-color: $text-strong !default |
||||||
|
$strong-weight: $weight-bold !default |
||||||
|
|
||||||
|
$pre-font-size: 0.875em !default |
||||||
|
$pre-padding: 1.25rem 1.5rem !default |
||||||
|
$pre-code-font-size: 1em !default |
||||||
|
|
||||||
|
html |
||||||
|
background-color: $body-background-color |
||||||
|
font-size: $body-size |
||||||
|
-moz-osx-font-smoothing: grayscale |
||||||
|
-webkit-font-smoothing: antialiased |
||||||
|
min-width: $body-min-width |
||||||
|
overflow-x: $body-overflow-x |
||||||
|
overflow-y: $body-overflow-y |
||||||
|
text-rendering: $body-rendering |
||||||
|
text-size-adjust: 100% |
||||||
|
|
||||||
|
article, |
||||||
|
aside, |
||||||
|
figure, |
||||||
|
footer, |
||||||
|
header, |
||||||
|
hgroup, |
||||||
|
section |
||||||
|
display: block |
||||||
|
|
||||||
|
body, |
||||||
|
button, |
||||||
|
input, |
||||||
|
optgroup, |
||||||
|
select, |
||||||
|
textarea |
||||||
|
font-family: $body-family |
||||||
|
|
||||||
|
code, |
||||||
|
pre |
||||||
|
-moz-osx-font-smoothing: auto |
||||||
|
-webkit-font-smoothing: auto |
||||||
|
font-family: $code-family |
||||||
|
|
||||||
|
body |
||||||
|
color: $body-color |
||||||
|
font-size: $body-font-size |
||||||
|
font-weight: $body-weight |
||||||
|
line-height: $body-line-height |
||||||
|
|
||||||
|
// Inline |
||||||
|
|
||||||
|
a |
||||||
|
color: $link |
||||||
|
cursor: pointer |
||||||
|
text-decoration: none |
||||||
|
strong |
||||||
|
color: currentColor |
||||||
|
&:hover |
||||||
|
color: $link-hover |
||||||
|
|
||||||
|
code |
||||||
|
background-color: $code-background |
||||||
|
color: $code |
||||||
|
font-size: $code-size |
||||||
|
font-weight: $code-weight |
||||||
|
padding: $code-padding |
||||||
|
|
||||||
|
hr |
||||||
|
background-color: $hr-background-color |
||||||
|
border: none |
||||||
|
display: block |
||||||
|
height: $hr-height |
||||||
|
margin: $hr-margin |
||||||
|
|
||||||
|
img |
||||||
|
height: auto |
||||||
|
max-width: 100% |
||||||
|
|
||||||
|
input[type="checkbox"], |
||||||
|
input[type="radio"] |
||||||
|
vertical-align: baseline |
||||||
|
|
||||||
|
small |
||||||
|
font-size: $small-font-size |
||||||
|
|
||||||
|
span |
||||||
|
font-style: inherit |
||||||
|
font-weight: inherit |
||||||
|
|
||||||
|
strong |
||||||
|
color: $strong-color |
||||||
|
font-weight: $strong-weight |
||||||
|
|
||||||
|
// Block |
||||||
|
|
||||||
|
fieldset |
||||||
|
border: none |
||||||
|
|
||||||
|
pre |
||||||
|
+overflow-touch |
||||||
|
background-color: $pre-background |
||||||
|
color: $pre |
||||||
|
font-size: $pre-font-size |
||||||
|
overflow-x: auto |
||||||
|
padding: $pre-padding |
||||||
|
white-space: pre |
||||||
|
word-wrap: normal |
||||||
|
code |
||||||
|
background-color: transparent |
||||||
|
color: currentColor |
||||||
|
font-size: $pre-code-font-size |
||||||
|
padding: 0 |
||||||
|
|
||||||
|
table |
||||||
|
td, |
||||||
|
th |
||||||
|
vertical-align: top |
||||||
|
&:not([align]) |
||||||
|
text-align: inherit |
||||||
|
th |
||||||
|
color: $text-strong |
@ -0,0 +1 @@ |
|||||||
|
@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead." |
@ -0,0 +1,79 @@ |
|||||||
|
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ |
||||||
|
// Blocks |
||||||
|
html, |
||||||
|
body, |
||||||
|
p, |
||||||
|
ol, |
||||||
|
ul, |
||||||
|
li, |
||||||
|
dl, |
||||||
|
dt, |
||||||
|
dd, |
||||||
|
blockquote, |
||||||
|
figure, |
||||||
|
fieldset, |
||||||
|
legend, |
||||||
|
textarea, |
||||||
|
pre, |
||||||
|
iframe, |
||||||
|
hr, |
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
h5, |
||||||
|
h6 |
||||||
|
margin: 0 |
||||||
|
padding: 0 |
||||||
|
|
||||||
|
// Headings |
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
h5, |
||||||
|
h6 |
||||||
|
font-size: 100% |
||||||
|
font-weight: normal |
||||||
|
|
||||||
|
// List |
||||||
|
ul |
||||||
|
list-style: none |
||||||
|
|
||||||
|
// Form |
||||||
|
button, |
||||||
|
input, |
||||||
|
select, |
||||||
|
textarea |
||||||
|
margin: 0 |
||||||
|
|
||||||
|
// Box sizing |
||||||
|
html |
||||||
|
box-sizing: border-box |
||||||
|
|
||||||
|
* |
||||||
|
&, |
||||||
|
&::before, |
||||||
|
&::after |
||||||
|
box-sizing: inherit |
||||||
|
|
||||||
|
// Media |
||||||
|
img, |
||||||
|
video |
||||||
|
height: auto |
||||||
|
max-width: 100% |
||||||
|
|
||||||
|
// Iframe |
||||||
|
iframe |
||||||
|
border: 0 |
||||||
|
|
||||||
|
// Table |
||||||
|
table |
||||||
|
border-collapse: collapse |
||||||
|
border-spacing: 0 |
||||||
|
|
||||||
|
td, |
||||||
|
th |
||||||
|
padding: 0 |
||||||
|
&:not([align]) |
||||||
|
text-align: inherit |
@ -0,0 +1,15 @@ |
|||||||
|
/* Bulma Components */ |
||||||
|
@charset "utf-8" |
||||||
|
|
||||||
|
@import "breadcrumb" |
||||||
|
@import "card" |
||||||
|
@import "dropdown" |
||||||
|
@import "level" |
||||||
|
@import "media" |
||||||
|
@import "menu" |
||||||
|
@import "message" |
||||||
|
@import "modal" |
||||||
|
@import "navbar" |
||||||
|
@import "pagination" |
||||||
|
@import "panel" |
||||||
|
@import "tabs" |
@ -0,0 +1,77 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$breadcrumb-item-color: $link !default |
||||||
|
$breadcrumb-item-hover-color: $link-hover !default |
||||||
|
$breadcrumb-item-active-color: $text-strong !default |
||||||
|
|
||||||
|
$breadcrumb-item-padding-vertical: 0 !default |
||||||
|
$breadcrumb-item-padding-horizontal: 0.75em !default |
||||||
|
|
||||||
|
$breadcrumb-item-separator-color: $border-hover !default |
||||||
|
|
||||||
|
.breadcrumb |
||||||
|
@extend %block |
||||||
|
@extend %unselectable |
||||||
|
font-size: $size-normal |
||||||
|
white-space: nowrap |
||||||
|
a |
||||||
|
align-items: center |
||||||
|
color: $breadcrumb-item-color |
||||||
|
display: flex |
||||||
|
justify-content: center |
||||||
|
padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal |
||||||
|
&:hover |
||||||
|
color: $breadcrumb-item-hover-color |
||||||
|
li |
||||||
|
align-items: center |
||||||
|
display: flex |
||||||
|
&:first-child a |
||||||
|
+ltr-property("padding", 0, false) |
||||||
|
&.is-active |
||||||
|
a |
||||||
|
color: $breadcrumb-item-active-color |
||||||
|
cursor: default |
||||||
|
pointer-events: none |
||||||
|
& + li::before |
||||||
|
color: $breadcrumb-item-separator-color |
||||||
|
content: "\0002f" |
||||||
|
ul, |
||||||
|
ol |
||||||
|
align-items: flex-start |
||||||
|
display: flex |
||||||
|
flex-wrap: wrap |
||||||
|
justify-content: flex-start |
||||||
|
.icon |
||||||
|
&:first-child |
||||||
|
+ltr-property("margin", 0.5em) |
||||||
|
&:last-child |
||||||
|
+ltr-property("margin", 0.5em, false) |
||||||
|
// Alignment |
||||||
|
&.is-centered |
||||||
|
ol, |
||||||
|
ul |
||||||
|
justify-content: center |
||||||
|
&.is-right |
||||||
|
ol, |
||||||
|
ul |
||||||
|
justify-content: flex-end |
||||||
|
// Sizes |
||||||
|
&.is-small |
||||||
|
font-size: $size-small |
||||||
|
&.is-medium |
||||||
|
font-size: $size-medium |
||||||
|
&.is-large |
||||||
|
font-size: $size-large |
||||||
|
// Styles |
||||||
|
&.has-arrow-separator |
||||||
|
li + li::before |
||||||
|
content: "\02192" |
||||||
|
&.has-bullet-separator |
||||||
|
li + li::before |
||||||
|
content: "\02022" |
||||||
|
&.has-dot-separator |
||||||
|
li + li::before |
||||||
|
content: "\000b7" |
||||||
|
&.has-succeeds-separator |
||||||
|
li + li::before |
||||||
|
content: "\0227B" |
@ -0,0 +1,103 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$card-color: $text !default |
||||||
|
$card-background-color: $scheme-main !default |
||||||
|
$card-shadow: $shadow !default |
||||||
|
$card-radius: 0.25rem !default |
||||||
|
|
||||||
|
$card-header-background-color: transparent !default |
||||||
|
$card-header-color: $text-strong !default |
||||||
|
$card-header-padding: 0.75rem 1rem !default |
||||||
|
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default |
||||||
|
$card-header-weight: $weight-bold !default |
||||||
|
|
||||||
|
$card-content-background-color: transparent !default |
||||||
|
$card-content-padding: 1.5rem !default |
||||||
|
|
||||||
|
$card-footer-background-color: transparent !default |
||||||
|
$card-footer-border-top: 1px solid $border-light !default |
||||||
|
$card-footer-padding: 0.75rem !default |
||||||
|
|
||||||
|
$card-media-margin: $block-spacing !default |
||||||
|
|
||||||
|
.card |
||||||
|
background-color: $card-background-color |
||||||
|
border-radius: $card-radius |
||||||
|
box-shadow: $card-shadow |
||||||
|
color: $card-color |
||||||
|
max-width: 100% |
||||||
|
position: relative |
||||||
|
|
||||||
|
%card-item |
||||||
|
&:first-child |
||||||
|
border-top-left-radius: $card-radius |
||||||
|
border-top-right-radius: $card-radius |
||||||
|
&:last-child |
||||||
|
border-bottom-left-radius: $card-radius |
||||||
|
border-bottom-right-radius: $card-radius |
||||||
|
|
||||||
|
.card-header |
||||||
|
@extend %card-item |
||||||
|
background-color: $card-header-background-color |
||||||
|
align-items: stretch |
||||||
|
box-shadow: $card-header-shadow |
||||||
|
display: flex |
||||||
|
|
||||||
|
.card-header-title |
||||||
|
align-items: center |
||||||
|
color: $card-header-color |
||||||
|
display: flex |
||||||
|
flex-grow: 1 |
||||||
|
font-weight: $card-header-weight |
||||||
|
padding: $card-header-padding |
||||||
|
&.is-centered |
||||||
|
justify-content: center |
||||||
|
|
||||||
|
.card-header-icon |
||||||
|
+reset |
||||||
|
align-items: center |
||||||
|
cursor: pointer |
||||||
|
display: flex |
||||||
|
justify-content: center |
||||||
|
padding: $card-header-padding |
||||||
|
|
||||||
|
.card-image |
||||||
|
display: block |
||||||
|
position: relative |
||||||
|
&:first-child |
||||||
|
img |
||||||
|
border-top-left-radius: $card-radius |
||||||
|
border-top-right-radius: $card-radius |
||||||
|
&:last-child |
||||||
|
img |
||||||
|
border-bottom-left-radius: $card-radius |
||||||
|
border-bottom-right-radius: $card-radius |
||||||
|
|
||||||
|
.card-content |
||||||
|
@extend %card-item |
||||||
|
background-color: $card-content-background-color |
||||||
|
padding: $card-content-padding |
||||||
|
|
||||||
|
.card-footer |
||||||
|
@extend %card-item |
||||||
|
background-color: $card-footer-background-color |
||||||
|
border-top: $card-footer-border-top |
||||||
|
align-items: stretch |
||||||
|
display: flex |
||||||
|
|
||||||
|
.card-footer-item |
||||||
|
align-items: center |
||||||
|
display: flex |
||||||
|
flex-basis: 0 |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 0 |
||||||
|
justify-content: center |
||||||
|
padding: $card-footer-padding |
||||||
|
&:not(:last-child) |
||||||
|
+ltr-property("border", $card-footer-border-top) |
||||||
|
|
||||||
|
// Combinations |
||||||
|
|
||||||
|
.card |
||||||
|
.media:not(:last-child) |
||||||
|
margin-bottom: $card-media-margin |
@ -0,0 +1,83 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$dropdown-menu-min-width: 12rem !default |
||||||
|
|
||||||
|
$dropdown-content-background-color: $scheme-main !default |
||||||
|
$dropdown-content-arrow: $link !default |
||||||
|
$dropdown-content-offset: 4px !default |
||||||
|
$dropdown-content-padding-bottom: 0.5rem !default |
||||||
|
$dropdown-content-padding-top: 0.5rem !default |
||||||
|
$dropdown-content-radius: $radius !default |
||||||
|
$dropdown-content-shadow: $shadow !default |
||||||
|
$dropdown-content-z: 20 !default |
||||||
|
|
||||||
|
$dropdown-item-color: $text !default |
||||||
|
$dropdown-item-hover-color: $scheme-invert !default |
||||||
|
$dropdown-item-hover-background-color: $background !default |
||||||
|
$dropdown-item-active-color: $link-invert !default |
||||||
|
$dropdown-item-active-background-color: $link !default |
||||||
|
|
||||||
|
$dropdown-divider-background-color: $border-light !default |
||||||
|
|
||||||
|
.dropdown |
||||||
|
display: inline-flex |
||||||
|
position: relative |
||||||
|
vertical-align: top |
||||||
|
&.is-active, |
||||||
|
&.is-hoverable:hover |
||||||
|
.dropdown-menu |
||||||
|
display: block |
||||||
|
&.is-right |
||||||
|
.dropdown-menu |
||||||
|
left: auto |
||||||
|
right: 0 |
||||||
|
&.is-up |
||||||
|
.dropdown-menu |
||||||
|
bottom: 100% |
||||||
|
padding-bottom: $dropdown-content-offset |
||||||
|
padding-top: initial |
||||||
|
top: auto |
||||||
|
|
||||||
|
.dropdown-menu |
||||||
|
display: none |
||||||
|
+ltr-position(0, false) |
||||||
|
min-width: $dropdown-menu-min-width |
||||||
|
padding-top: $dropdown-content-offset |
||||||
|
position: absolute |
||||||
|
top: 100% |
||||||
|
z-index: $dropdown-content-z |
||||||
|
|
||||||
|
.dropdown-content |
||||||
|
background-color: $dropdown-content-background-color |
||||||
|
border-radius: $dropdown-content-radius |
||||||
|
box-shadow: $dropdown-content-shadow |
||||||
|
padding-bottom: $dropdown-content-padding-bottom |
||||||
|
padding-top: $dropdown-content-padding-top |
||||||
|
|
||||||
|
.dropdown-item |
||||||
|
color: $dropdown-item-color |
||||||
|
display: block |
||||||
|
font-size: 0.875rem |
||||||
|
line-height: 1.5 |
||||||
|
padding: 0.375rem 1rem |
||||||
|
position: relative |
||||||
|
|
||||||
|
a.dropdown-item, |
||||||
|
button.dropdown-item |
||||||
|
+ltr-property("padding", 3rem) |
||||||
|
text-align: inherit |
||||||
|
white-space: nowrap |
||||||
|
width: 100% |
||||||
|
&:hover |
||||||
|
background-color: $dropdown-item-hover-background-color |
||||||
|
color: $dropdown-item-hover-color |
||||||
|
&.is-active |
||||||
|
background-color: $dropdown-item-active-background-color |
||||||
|
color: $dropdown-item-active-color |
||||||
|
|
||||||
|
.dropdown-divider |
||||||
|
background-color: $dropdown-divider-background-color |
||||||
|
border: none |
||||||
|
display: block |
||||||
|
height: 1px |
||||||
|
margin: 0.5rem 0 |
@ -0,0 +1,79 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$level-item-spacing: ($block-spacing * 0.5) !default |
||||||
|
|
||||||
|
.level |
||||||
|
@extend %block |
||||||
|
align-items: center |
||||||
|
justify-content: space-between |
||||||
|
code |
||||||
|
border-radius: $radius |
||||||
|
img |
||||||
|
display: inline-block |
||||||
|
vertical-align: top |
||||||
|
// Modifiers |
||||||
|
&.is-mobile |
||||||
|
display: flex |
||||||
|
.level-left, |
||||||
|
.level-right |
||||||
|
display: flex |
||||||
|
.level-left + .level-right |
||||||
|
margin-top: 0 |
||||||
|
.level-item |
||||||
|
&:not(:last-child) |
||||||
|
margin-bottom: 0 |
||||||
|
+ltr-property("margin", $level-item-spacing) |
||||||
|
&:not(.is-narrow) |
||||||
|
flex-grow: 1 |
||||||
|
// Responsiveness |
||||||
|
+tablet |
||||||
|
display: flex |
||||||
|
& > .level-item |
||||||
|
&:not(.is-narrow) |
||||||
|
flex-grow: 1 |
||||||
|
|
||||||
|
.level-item |
||||||
|
align-items: center |
||||||
|
display: flex |
||||||
|
flex-basis: auto |
||||||
|
flex-grow: 0 |
||||||
|
flex-shrink: 0 |
||||||
|
justify-content: center |
||||||
|
.title, |
||||||
|
.subtitle |
||||||
|
margin-bottom: 0 |
||||||
|
// Responsiveness |
||||||
|
+mobile |
||||||
|
&:not(:last-child) |
||||||
|
margin-bottom: $level-item-spacing |
||||||
|
|
||||||
|
.level-left, |
||||||
|
.level-right |
||||||
|
flex-basis: auto |
||||||
|
flex-grow: 0 |
||||||
|
flex-shrink: 0 |
||||||
|
.level-item |
||||||
|
// Modifiers |
||||||
|
&.is-flexible |
||||||
|
flex-grow: 1 |
||||||
|
// Responsiveness |
||||||
|
+tablet |
||||||
|
&:not(:last-child) |
||||||
|
+ltr-property("margin", $level-item-spacing) |
||||||
|
|
||||||
|
.level-left |
||||||
|
align-items: center |
||||||
|
justify-content: flex-start |
||||||
|
// Responsiveness |
||||||
|
+mobile |
||||||
|
& + .level-right |
||||||
|
margin-top: 1.5rem |
||||||
|
+tablet |
||||||
|
display: flex |
||||||
|
|
||||||
|
.level-right |
||||||
|
align-items: center |
||||||
|
justify-content: flex-end |
||||||
|
// Responsiveness |
||||||
|
+tablet |
||||||
|
display: flex |
@ -0,0 +1,59 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$media-border-color: bulmaRgba($border, 0.5) !default |
||||||
|
$media-border-size: 1px !default |
||||||
|
$media-spacing: 1rem !default |
||||||
|
$media-spacing-large: 1.5rem !default |
||||||
|
$media-content-spacing: 0.75rem !default |
||||||
|
$media-level-1-spacing: 0.75rem !default |
||||||
|
$media-level-1-content-spacing: 0.5rem !default |
||||||
|
$media-level-2-spacing: 0.5rem !default |
||||||
|
|
||||||
|
.media |
||||||
|
align-items: flex-start |
||||||
|
display: flex |
||||||
|
text-align: inherit |
||||||
|
.content:not(:last-child) |
||||||
|
margin-bottom: $media-content-spacing |
||||||
|
.media |
||||||
|
border-top: $media-border-size solid $media-border-color |
||||||
|
display: flex |
||||||
|
padding-top: $media-level-1-spacing |
||||||
|
.content:not(:last-child), |
||||||
|
.control:not(:last-child) |
||||||
|
margin-bottom: $media-level-1-content-spacing |
||||||
|
.media |
||||||
|
padding-top: $media-level-2-spacing |
||||||
|
& + .media |
||||||
|
margin-top: $media-level-2-spacing |
||||||
|
& + .media |
||||||
|
border-top: $media-border-size solid $media-border-color |
||||||
|
margin-top: $media-spacing |
||||||
|
padding-top: $media-spacing |
||||||
|
// Sizes |
||||||
|
&.is-large |
||||||
|
& + .media |
||||||
|
margin-top: $media-spacing-large |
||||||
|
padding-top: $media-spacing-large |
||||||
|
|
||||||
|
.media-left, |
||||||
|
.media-right |
||||||
|
flex-basis: auto |
||||||
|
flex-grow: 0 |
||||||
|
flex-shrink: 0 |
||||||
|
|
||||||
|
.media-left |
||||||
|
+ltr-property("margin", $media-spacing) |
||||||
|
|
||||||
|
.media-right |
||||||
|
+ltr-property("margin", $media-spacing, false) |
||||||
|
|
||||||
|
.media-content |
||||||
|
flex-basis: auto |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 1 |
||||||
|
text-align: inherit |
||||||
|
|
||||||
|
+mobile |
||||||
|
.media-content |
||||||
|
overflow-x: auto |
@ -0,0 +1,59 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$menu-item-color: $text !default |
||||||
|
$menu-item-radius: $radius-small !default |
||||||
|
$menu-item-hover-color: $text-strong !default |
||||||
|
$menu-item-hover-background-color: $background !default |
||||||
|
$menu-item-active-color: $link-invert !default |
||||||
|
$menu-item-active-background-color: $link !default |
||||||
|
|
||||||
|
$menu-list-border-left: 1px solid $border !default |
||||||
|
$menu-list-line-height: 1.25 !default |
||||||
|
$menu-list-link-padding: 0.5em 0.75em !default |
||||||
|
$menu-nested-list-margin: 0.75em !default |
||||||
|
$menu-nested-list-padding-left: 0.75em !default |
||||||
|
|
||||||
|
$menu-label-color: $text-light !default |
||||||
|
$menu-label-font-size: 0.75em !default |
||||||
|
$menu-label-letter-spacing: 0.1em !default |
||||||
|
$menu-label-spacing: 1em !default |
||||||
|
|
||||||
|
.menu |
||||||
|
font-size: $size-normal |
||||||
|
// Sizes |
||||||
|
&.is-small |
||||||
|
font-size: $size-small |
||||||
|
&.is-medium |
||||||
|
font-size: $size-medium |
||||||
|
&.is-large |
||||||
|
font-size: $size-large |
||||||
|
|
||||||
|
.menu-list |
||||||
|
line-height: $menu-list-line-height |
||||||
|
a |
||||||
|
border-radius: $menu-item-radius |
||||||
|
color: $menu-item-color |
||||||
|
display: block |
||||||
|
padding: $menu-list-link-padding |
||||||
|
&:hover |
||||||
|
background-color: $menu-item-hover-background-color |
||||||
|
color: $menu-item-hover-color |
||||||
|
// Modifiers |
||||||
|
&.is-active |
||||||
|
background-color: $menu-item-active-background-color |
||||||
|
color: $menu-item-active-color |
||||||
|
li |
||||||
|
ul |
||||||
|
+ltr-property("border", $menu-list-border-left, false) |
||||||
|
margin: $menu-nested-list-margin |
||||||
|
+ltr-property("padding", $menu-nested-list-padding-left, false) |
||||||
|
|
||||||
|
.menu-label |
||||||
|
color: $menu-label-color |
||||||
|
font-size: $menu-label-font-size |
||||||
|
letter-spacing: $menu-label-letter-spacing |
||||||
|
text-transform: uppercase |
||||||
|
&:not(:first-child) |
||||||
|
margin-top: $menu-label-spacing |
||||||
|
&:not(:last-child) |
||||||
|
margin-bottom: $menu-label-spacing |
@ -0,0 +1,101 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$message-background-color: $background !default |
||||||
|
$message-radius: $radius !default |
||||||
|
|
||||||
|
$message-header-background-color: $text !default |
||||||
|
$message-header-color: $text-invert !default |
||||||
|
$message-header-weight: $weight-bold !default |
||||||
|
$message-header-padding: 0.75em 1em !default |
||||||
|
$message-header-radius: $radius !default |
||||||
|
|
||||||
|
$message-body-border-color: $border !default |
||||||
|
$message-body-border-width: 0 0 0 4px !default |
||||||
|
$message-body-color: $text !default |
||||||
|
$message-body-padding: 1.25em 1.5em !default |
||||||
|
$message-body-radius: $radius !default |
||||||
|
|
||||||
|
$message-body-pre-background-color: $scheme-main !default |
||||||
|
$message-body-pre-code-background-color: transparent !default |
||||||
|
|
||||||
|
$message-header-body-border-width: 0 !default |
||||||
|
$message-colors: $colors !default |
||||||
|
|
||||||
|
.message |
||||||
|
@extend %block |
||||||
|
background-color: $message-background-color |
||||||
|
border-radius: $message-radius |
||||||
|
font-size: $size-normal |
||||||
|
strong |
||||||
|
color: currentColor |
||||||
|
a:not(.button):not(.tag):not(.dropdown-item) |
||||||
|
color: currentColor |
||||||
|
text-decoration: underline |
||||||
|
// Sizes |
||||||
|
&.is-small |
||||||
|
font-size: $size-small |
||||||
|
&.is-medium |
||||||
|
font-size: $size-medium |
||||||
|
&.is-large |
||||||
|
font-size: $size-large |
||||||
|
// Colors |
||||||
|
@each $name, $components in $message-colors |
||||||
|
$color: nth($components, 1) |
||||||
|
$color-invert: nth($components, 2) |
||||||
|
$color-light: null |
||||||
|
$color-dark: null |
||||||
|
|
||||||
|
@if length($components) >= 3 |
||||||
|
$color-light: nth($components, 3) |
||||||
|
@if length($components) >= 4 |
||||||
|
$color-dark: nth($components, 4) |
||||||
|
@else |
||||||
|
$color-luminance: colorLuminance($color) |
||||||
|
$darken-percentage: $color-luminance * 70% |
||||||
|
$desaturate-percentage: $color-luminance * 30% |
||||||
|
$color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage) |
||||||
|
@else |
||||||
|
$color-lightning: max((100% - lightness($color)) - 2%, 0%) |
||||||
|
$color-light: lighten($color, $color-lightning) |
||||||
|
|
||||||
|
&.is-#{$name} |
||||||
|
background-color: $color-light |
||||||
|
.message-header |
||||||
|
background-color: $color |
||||||
|
color: $color-invert |
||||||
|
.message-body |
||||||
|
border-color: $color |
||||||
|
color: $color-dark |
||||||
|
|
||||||
|
.message-header |
||||||
|
align-items: center |
||||||
|
background-color: $message-header-background-color |
||||||
|
border-radius: $message-header-radius $message-header-radius 0 0 |
||||||
|
color: $message-header-color |
||||||
|
display: flex |
||||||
|
font-weight: $message-header-weight |
||||||
|
justify-content: space-between |
||||||
|
line-height: 1.25 |
||||||
|
padding: $message-header-padding |
||||||
|
position: relative |
||||||
|
.delete |
||||||
|
flex-grow: 0 |
||||||
|
flex-shrink: 0 |
||||||
|
+ltr-property("margin", 0.75em, false) |
||||||
|
& + .message-body |
||||||
|
border-width: $message-header-body-border-width |
||||||
|
border-top-left-radius: 0 |
||||||
|
border-top-right-radius: 0 |
||||||
|
|
||||||
|
.message-body |
||||||
|
border-color: $message-body-border-color |
||||||
|
border-radius: $message-body-radius |
||||||
|
border-style: solid |
||||||
|
border-width: $message-body-border-width |
||||||
|
color: $message-body-color |
||||||
|
padding: $message-body-padding |
||||||
|
code, |
||||||
|
pre |
||||||
|
background-color: $message-body-pre-background-color |
||||||
|
pre code |
||||||
|
background-color: $message-body-pre-code-background-color |
@ -0,0 +1,117 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$modal-z: 40 !default |
||||||
|
|
||||||
|
$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default |
||||||
|
|
||||||
|
$modal-content-width: 640px !default |
||||||
|
$modal-content-margin-mobile: 20px !default |
||||||
|
$modal-content-spacing-mobile: 160px !default |
||||||
|
$modal-content-spacing-tablet: 40px !default |
||||||
|
|
||||||
|
$modal-close-dimensions: 40px !default |
||||||
|
$modal-close-right: 20px !default |
||||||
|
$modal-close-top: 20px !default |
||||||
|
|
||||||
|
$modal-card-spacing: 40px !default |
||||||
|
|
||||||
|
$modal-card-head-background-color: $background !default |
||||||
|
$modal-card-head-border-bottom: 1px solid $border !default |
||||||
|
$modal-card-head-padding: 20px !default |
||||||
|
$modal-card-head-radius: $radius-large !default |
||||||
|
|
||||||
|
$modal-card-title-color: $text-strong !default |
||||||
|
$modal-card-title-line-height: 1 !default |
||||||
|
$modal-card-title-size: $size-4 !default |
||||||
|
|
||||||
|
$modal-card-foot-radius: $radius-large !default |
||||||
|
$modal-card-foot-border-top: 1px solid $border !default |
||||||
|
|
||||||
|
$modal-card-body-background-color: $scheme-main !default |
||||||
|
$modal-card-body-padding: 20px !default |
||||||
|
|
||||||
|
$modal-breakpoint: $tablet !default |
||||||
|
|
||||||
|
.modal |
||||||
|
@extend %overlay |
||||||
|
align-items: center |
||||||
|
display: none |
||||||
|
flex-direction: column |
||||||
|
justify-content: center |
||||||
|
overflow: hidden |
||||||
|
position: fixed |
||||||
|
z-index: $modal-z |
||||||
|
// Modifiers |
||||||
|
&.is-active |
||||||
|
display: flex |
||||||
|
|
||||||
|
.modal-background |
||||||
|
@extend %overlay |
||||||
|
background-color: $modal-background-background-color |
||||||
|
|
||||||
|
.modal-content, |
||||||
|
.modal-card |
||||||
|
margin: 0 $modal-content-margin-mobile |
||||||
|
max-height: calc(100vh - #{$modal-content-spacing-mobile}) |
||||||
|
overflow: auto |
||||||
|
position: relative |
||||||
|
width: 100% |
||||||
|
// Responsiveness |
||||||
|
+from($modal-breakpoint) |
||||||
|
margin: 0 auto |
||||||
|
max-height: calc(100vh - #{$modal-content-spacing-tablet}) |
||||||
|
width: $modal-content-width |
||||||
|
|
||||||
|
.modal-close |
||||||
|
@extend %delete |
||||||
|
background: none |
||||||
|
height: $modal-close-dimensions |
||||||
|
position: fixed |
||||||
|
+ltr-position($modal-close-right) |
||||||
|
top: $modal-close-top |
||||||
|
width: $modal-close-dimensions |
||||||
|
|
||||||
|
.modal-card |
||||||
|
display: flex |
||||||
|
flex-direction: column |
||||||
|
max-height: calc(100vh - #{$modal-card-spacing}) |
||||||
|
overflow: hidden |
||||||
|
-ms-overflow-y: visible |
||||||
|
|
||||||
|
.modal-card-head, |
||||||
|
.modal-card-foot |
||||||
|
align-items: center |
||||||
|
background-color: $modal-card-head-background-color |
||||||
|
display: flex |
||||||
|
flex-shrink: 0 |
||||||
|
justify-content: flex-start |
||||||
|
padding: $modal-card-head-padding |
||||||
|
position: relative |
||||||
|
|
||||||
|
.modal-card-head |
||||||
|
border-bottom: $modal-card-head-border-bottom |
||||||
|
border-top-left-radius: $modal-card-head-radius |
||||||
|
border-top-right-radius: $modal-card-head-radius |
||||||
|
|
||||||
|
.modal-card-title |
||||||
|
color: $modal-card-title-color |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 0 |
||||||
|
font-size: $modal-card-title-size |
||||||
|
line-height: $modal-card-title-line-height |
||||||
|
|
||||||
|
.modal-card-foot |
||||||
|
border-bottom-left-radius: $modal-card-foot-radius |
||||||
|
border-bottom-right-radius: $modal-card-foot-radius |
||||||
|
border-top: $modal-card-foot-border-top |
||||||
|
.button |
||||||
|
&:not(:last-child) |
||||||
|
+ltr-property("margin", 0.5em) |
||||||
|
|
||||||
|
.modal-card-body |
||||||
|
+overflow-touch |
||||||
|
background-color: $modal-card-body-background-color |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 1 |
||||||
|
overflow: auto |
||||||
|
padding: $modal-card-body-padding |
@ -0,0 +1,446 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$navbar-background-color: $scheme-main !default |
||||||
|
$navbar-box-shadow-size: 0 2px 0 0 !default |
||||||
|
$navbar-box-shadow-color: $background !default |
||||||
|
$navbar-height: 3.25rem !default |
||||||
|
$navbar-padding-vertical: 1rem !default |
||||||
|
$navbar-padding-horizontal: 2rem !default |
||||||
|
$navbar-z: 30 !default |
||||||
|
$navbar-fixed-z: 30 !default |
||||||
|
|
||||||
|
$navbar-item-color: $text !default |
||||||
|
$navbar-item-hover-color: $link !default |
||||||
|
$navbar-item-hover-background-color: $scheme-main-bis !default |
||||||
|
$navbar-item-active-color: $scheme-invert !default |
||||||
|
$navbar-item-active-background-color: transparent !default |
||||||
|
$navbar-item-img-max-height: 1.75rem !default |
||||||
|
|
||||||
|
$navbar-burger-color: $navbar-item-color !default |
||||||
|
|
||||||
|
$navbar-tab-hover-background-color: transparent !default |
||||||
|
$navbar-tab-hover-border-bottom-color: $link !default |
||||||
|
$navbar-tab-active-color: $link !default |
||||||
|
$navbar-tab-active-background-color: transparent !default |
||||||
|
$navbar-tab-active-border-bottom-color: $link !default |
||||||
|
$navbar-tab-active-border-bottom-style: solid !default |
||||||
|
$navbar-tab-active-border-bottom-width: 3px !default |
||||||
|
|
||||||
|
$navbar-dropdown-background-color: $scheme-main !default |
||||||
|
$navbar-dropdown-border-top: 2px solid $border !default |
||||||
|
$navbar-dropdown-offset: -4px !default |
||||||
|
$navbar-dropdown-arrow: $link !default |
||||||
|
$navbar-dropdown-radius: $radius-large !default |
||||||
|
$navbar-dropdown-z: 20 !default |
||||||
|
|
||||||
|
$navbar-dropdown-boxed-radius: $radius-large !default |
||||||
|
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default |
||||||
|
|
||||||
|
$navbar-dropdown-item-hover-color: $scheme-invert !default |
||||||
|
$navbar-dropdown-item-hover-background-color: $background !default |
||||||
|
$navbar-dropdown-item-active-color: $link !default |
||||||
|
$navbar-dropdown-item-active-background-color: $background !default |
||||||
|
|
||||||
|
$navbar-divider-background-color: $background !default |
||||||
|
$navbar-divider-height: 2px !default |
||||||
|
|
||||||
|
$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default |
||||||
|
|
||||||
|
$navbar-breakpoint: $desktop !default |
||||||
|
|
||||||
|
$navbar-colors: $colors !default |
||||||
|
|
||||||
|
=navbar-fixed |
||||||
|
left: 0 |
||||||
|
position: fixed |
||||||
|
right: 0 |
||||||
|
z-index: $navbar-fixed-z |
||||||
|
|
||||||
|
.navbar |
||||||
|
background-color: $navbar-background-color |
||||||
|
min-height: $navbar-height |
||||||
|
position: relative |
||||||
|
z-index: $navbar-z |
||||||
|
@each $name, $pair in $navbar-colors |
||||||
|
$color: nth($pair, 1) |
||||||
|
$color-invert: nth($pair, 2) |
||||||
|
&.is-#{$name} |
||||||
|
background-color: $color |
||||||
|
color: $color-invert |
||||||
|
.navbar-brand |
||||||
|
& > .navbar-item, |
||||||
|
.navbar-link |
||||||
|
color: $color-invert |
||||||
|
& > a.navbar-item, |
||||||
|
.navbar-link |
||||||
|
&:focus, |
||||||
|
&:hover, |
||||||
|
&.is-active |
||||||
|
background-color: bulmaDarken($color, 5%) |
||||||
|
color: $color-invert |
||||||
|
.navbar-link |
||||||
|
&::after |
||||||
|
border-color: $color-invert |
||||||
|
.navbar-burger |
||||||
|
color: $color-invert |
||||||
|
+from($navbar-breakpoint) |
||||||
|
.navbar-start, |
||||||
|
.navbar-end |
||||||
|
& > .navbar-item, |
||||||
|
.navbar-link |
||||||
|
color: $color-invert |
||||||
|
& > a.navbar-item, |
||||||
|
.navbar-link |
||||||
|
&:focus, |
||||||
|
&:hover, |
||||||
|
&.is-active |
||||||
|
background-color: bulmaDarken($color, 5%) |
||||||
|
color: $color-invert |
||||||
|
.navbar-link |
||||||
|
&::after |
||||||
|
border-color: $color-invert |
||||||
|
.navbar-item.has-dropdown:focus .navbar-link, |
||||||
|
.navbar-item.has-dropdown:hover .navbar-link, |
||||||
|
.navbar-item.has-dropdown.is-active .navbar-link |
||||||
|
background-color: bulmaDarken($color, 5%) |
||||||
|
color: $color-invert |
||||||
|
.navbar-dropdown |
||||||
|
a.navbar-item |
||||||
|
&.is-active |
||||||
|
background-color: $color |
||||||
|
color: $color-invert |
||||||
|
& > .container |
||||||
|
align-items: stretch |
||||||
|
display: flex |
||||||
|
min-height: $navbar-height |
||||||
|
width: 100% |
||||||
|
&.has-shadow |
||||||
|
box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color |
||||||
|
&.is-fixed-bottom, |
||||||
|
&.is-fixed-top |
||||||
|
+navbar-fixed |
||||||
|
&.is-fixed-bottom |
||||||
|
bottom: 0 |
||||||
|
&.has-shadow |
||||||
|
box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color |
||||||
|
&.is-fixed-top |
||||||
|
top: 0 |
||||||
|
|
||||||
|
html, |
||||||
|
body |
||||||
|
&.has-navbar-fixed-top |
||||||
|
padding-top: $navbar-height |
||||||
|
&.has-navbar-fixed-bottom |
||||||
|
padding-bottom: $navbar-height |
||||||
|
|
||||||
|
.navbar-brand, |
||||||
|
.navbar-tabs |
||||||
|
align-items: stretch |
||||||
|
display: flex |
||||||
|
flex-shrink: 0 |
||||||
|
min-height: $navbar-height |
||||||
|
|
||||||
|
.navbar-brand |
||||||
|
a.navbar-item |
||||||
|
&:focus, |
||||||
|
&:hover |
||||||
|
background-color: transparent |
||||||
|
|
||||||
|
.navbar-tabs |
||||||
|
+overflow-touch |
||||||
|
max-width: 100vw |
||||||
|
overflow-x: auto |
||||||
|
overflow-y: hidden |
||||||
|
|
||||||
|
.navbar-burger |
||||||
|
@extend %reset |
||||||
|
color: $navbar-burger-color |
||||||
|
+hamburger($navbar-height) |
||||||
|
+ltr-property("margin", auto, false) |
||||||
|
|
||||||
|
.navbar-menu |
||||||
|
display: none |
||||||
|
|
||||||
|
.navbar-item, |
||||||
|
.navbar-link |
||||||
|
color: $navbar-item-color |
||||||
|
display: block |
||||||
|
line-height: 1.5 |
||||||
|
padding: 0.5rem 0.75rem |
||||||
|
position: relative |
||||||
|
.icon |
||||||
|
&:only-child |
||||||
|
margin-left: -0.25rem |
||||||
|
margin-right: -0.25rem |
||||||
|
|
||||||
|
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 |
||||||
|
flex-grow: 0 |
||||||
|
flex-shrink: 0 |
||||||
|
img |
||||||
|
max-height: $navbar-item-img-max-height |
||||||
|
&.has-dropdown |
||||||
|
padding: 0 |
||||||
|
&.is-expanded |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 1 |
||||||
|
&.is-tab |
||||||
|
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 |
||||||
|
&.is-active |
||||||
|
background-color: $navbar-tab-active-background-color |
||||||
|
border-bottom-color: $navbar-tab-active-border-bottom-color |
||||||
|
border-bottom-style: $navbar-tab-active-border-bottom-style |
||||||
|
border-bottom-width: $navbar-tab-active-border-bottom-width |
||||||
|
color: $navbar-tab-active-color |
||||||
|
padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width}) |
||||||
|
|
||||||
|
.navbar-content |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 1 |
||||||
|
|
||||||
|
.navbar-link:not(.is-arrowless) |
||||||
|
+ltr-property("padding", 2.5em) |
||||||
|
&::after |
||||||
|
@extend %arrow |
||||||
|
border-color: $navbar-dropdown-arrow |
||||||
|
margin-top: -0.375em |
||||||
|
+ltr-position(1.125em) |
||||||
|
|
||||||
|
.navbar-dropdown |
||||||
|
font-size: 0.875rem |
||||||
|
padding-bottom: 0.5rem |
||||||
|
padding-top: 0.5rem |
||||||
|
.navbar-item |
||||||
|
padding-left: 1.5rem |
||||||
|
padding-right: 1.5rem |
||||||
|
|
||||||
|
.navbar-divider |
||||||
|
background-color: $navbar-divider-background-color |
||||||
|
border: none |
||||||
|
display: none |
||||||
|
height: $navbar-divider-height |
||||||
|
margin: 0.5rem 0 |
||||||
|
|
||||||
|
+until($navbar-breakpoint) |
||||||
|
.navbar > .container |
||||||
|
display: block |
||||||
|
.navbar-brand, |
||||||
|
.navbar-tabs |
||||||
|
.navbar-item |
||||||
|
align-items: center |
||||||
|
display: flex |
||||||
|
.navbar-link |
||||||
|
&::after |
||||||
|
display: none |
||||||
|
.navbar-menu |
||||||
|
background-color: $navbar-background-color |
||||||
|
box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1) |
||||||
|
padding: 0.5rem 0 |
||||||
|
&.is-active |
||||||
|
display: block |
||||||
|
// Fixed navbar |
||||||
|
.navbar |
||||||
|
&.is-fixed-bottom-touch, |
||||||
|
&.is-fixed-top-touch |
||||||
|
+navbar-fixed |
||||||
|
&.is-fixed-bottom-touch |
||||||
|
bottom: 0 |
||||||
|
&.has-shadow |
||||||
|
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1) |
||||||
|
&.is-fixed-top-touch |
||||||
|
top: 0 |
||||||
|
&.is-fixed-top, |
||||||
|
&.is-fixed-top-touch |
||||||
|
.navbar-menu |
||||||
|
+overflow-touch |
||||||
|
max-height: calc(100vh - #{$navbar-height}) |
||||||
|
overflow: auto |
||||||
|
html, |
||||||
|
body |
||||||
|
&.has-navbar-fixed-top-touch |
||||||
|
padding-top: $navbar-height |
||||||
|
&.has-navbar-fixed-bottom-touch |
||||||
|
padding-bottom: $navbar-height |
||||||
|
|
||||||
|
+from($navbar-breakpoint) |
||||||
|
.navbar, |
||||||
|
.navbar-menu, |
||||||
|
.navbar-start, |
||||||
|
.navbar-end |
||||||
|
align-items: stretch |
||||||
|
display: flex |
||||||
|
.navbar |
||||||
|
min-height: $navbar-height |
||||||
|
&.is-spaced |
||||||
|
padding: $navbar-padding-vertical $navbar-padding-horizontal |
||||||
|
.navbar-start, |
||||||
|
.navbar-end |
||||||
|
align-items: center |
||||||
|
a.navbar-item, |
||||||
|
.navbar-link |
||||||
|
border-radius: $radius |
||||||
|
&.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 |
||||||
|
&.is-active |
||||||
|
background-color: $navbar-dropdown-item-active-background-color |
||||||
|
color: $navbar-dropdown-item-active-color |
||||||
|
.navbar-burger |
||||||
|
display: none |
||||||
|
.navbar-item, |
||||||
|
.navbar-link |
||||||
|
align-items: center |
||||||
|
display: flex |
||||||
|
.navbar-item |
||||||
|
&.has-dropdown |
||||||
|
align-items: stretch |
||||||
|
&.has-dropdown-up |
||||||
|
.navbar-link::after |
||||||
|
transform: rotate(135deg) translate(0.25em, -0.25em) |
||||||
|
.navbar-dropdown |
||||||
|
border-bottom: $navbar-dropdown-border-top |
||||||
|
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0 |
||||||
|
border-top: none |
||||||
|
bottom: 100% |
||||||
|
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 |
||||||
|
.navbar.is-spaced &, |
||||||
|
&.is-boxed |
||||||
|
opacity: 1 |
||||||
|
pointer-events: auto |
||||||
|
transform: translateY(0) |
||||||
|
.navbar-menu |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 0 |
||||||
|
.navbar-start |
||||||
|
justify-content: flex-start |
||||||
|
+ltr-property("margin", auto) |
||||||
|
.navbar-end |
||||||
|
justify-content: flex-end |
||||||
|
+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 bulmaRgba($scheme-invert, 0.1) |
||||||
|
display: none |
||||||
|
font-size: 0.875rem |
||||||
|
+ltr-position(0, false) |
||||||
|
min-width: 100% |
||||||
|
position: absolute |
||||||
|
top: 100% |
||||||
|
z-index: $navbar-dropdown-z |
||||||
|
.navbar-item |
||||||
|
padding: 0.375rem 1rem |
||||||
|
white-space: nowrap |
||||||
|
a.navbar-item |
||||||
|
+ltr-property("padding", 3rem) |
||||||
|
&:focus, |
||||||
|
&:hover |
||||||
|
background-color: $navbar-dropdown-item-hover-background-color |
||||||
|
color: $navbar-dropdown-item-hover-color |
||||||
|
&.is-active |
||||||
|
background-color: $navbar-dropdown-item-active-background-color |
||||||
|
color: $navbar-dropdown-item-active-color |
||||||
|
.navbar.is-spaced &, |
||||||
|
&.is-boxed |
||||||
|
border-radius: $navbar-dropdown-boxed-radius |
||||||
|
border-top: none |
||||||
|
box-shadow: $navbar-dropdown-boxed-shadow |
||||||
|
display: block |
||||||
|
opacity: 0 |
||||||
|
pointer-events: none |
||||||
|
top: calc(100% + (#{$navbar-dropdown-offset})) |
||||||
|
transform: translateY(-5px) |
||||||
|
transition-duration: $speed |
||||||
|
transition-property: opacity, transform |
||||||
|
&.is-right |
||||||
|
left: auto |
||||||
|
right: 0 |
||||||
|
.navbar-divider |
||||||
|
display: block |
||||||
|
.navbar > .container, |
||||||
|
.container > .navbar |
||||||
|
.navbar-brand |
||||||
|
+ltr-property("margin", -.75rem, false) |
||||||
|
.navbar-menu |
||||||
|
+ltr-property("margin", -.75rem) |
||||||
|
// Fixed navbar |
||||||
|
.navbar |
||||||
|
&.is-fixed-bottom-desktop, |
||||||
|
&.is-fixed-top-desktop |
||||||
|
+navbar-fixed |
||||||
|
&.is-fixed-bottom-desktop |
||||||
|
bottom: 0 |
||||||
|
&.has-shadow |
||||||
|
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1) |
||||||
|
&.is-fixed-top-desktop |
||||||
|
top: 0 |
||||||
|
html, |
||||||
|
body |
||||||
|
&.has-navbar-fixed-top-desktop |
||||||
|
padding-top: $navbar-height |
||||||
|
&.has-navbar-fixed-bottom-desktop |
||||||
|
padding-bottom: $navbar-height |
||||||
|
&.has-spaced-navbar-fixed-top |
||||||
|
padding-top: $navbar-height + ($navbar-padding-vertical * 2) |
||||||
|
&.has-spaced-navbar-fixed-bottom |
||||||
|
padding-bottom: $navbar-height + ($navbar-padding-vertical * 2) |
||||||
|
// Hover/Active states |
||||||
|
a.navbar-item, |
||||||
|
.navbar-link |
||||||
|
&.is-active |
||||||
|
color: $navbar-item-active-color |
||||||
|
&.is-active:not(:focus):not(:hover) |
||||||
|
background-color: $navbar-item-active-background-color |
||||||
|
.navbar-item.has-dropdown |
||||||
|
&:focus, |
||||||
|
&:hover, |
||||||
|
&.is-active |
||||||
|
.navbar-link |
||||||
|
background-color: $navbar-item-hover-background-color |
||||||
|
|
||||||
|
// Combination |
||||||
|
|
||||||
|
.hero |
||||||
|
&.is-fullheight-with-navbar |
||||||
|
min-height: calc(100vh - #{$navbar-height}) |
@ -0,0 +1,166 @@ |
|||||||
|
@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 |
||||||
|
|
||||||
|
$pagination-focus-color: $link-focus !default |
||||||
|
$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: $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 |
||||||
|
$pagination-current-border-color: $link !default |
||||||
|
|
||||||
|
$pagination-ellipsis-color: $grey-light !default |
||||||
|
|
||||||
|
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default |
||||||
|
|
||||||
|
.pagination |
||||||
|
@extend %block |
||||||
|
font-size: $size-normal |
||||||
|
margin: $pagination-margin |
||||||
|
// Sizes |
||||||
|
&.is-small |
||||||
|
font-size: $size-small |
||||||
|
&.is-medium |
||||||
|
font-size: $size-medium |
||||||
|
&.is-large |
||||||
|
font-size: $size-large |
||||||
|
&.is-rounded |
||||||
|
.pagination-previous, |
||||||
|
.pagination-next |
||||||
|
padding-left: 1em |
||||||
|
padding-right: 1em |
||||||
|
border-radius: $radius-rounded |
||||||
|
.pagination-link |
||||||
|
border-radius: $radius-rounded |
||||||
|
|
||||||
|
.pagination, |
||||||
|
.pagination-list |
||||||
|
align-items: center |
||||||
|
display: flex |
||||||
|
justify-content: center |
||||||
|
text-align: center |
||||||
|
|
||||||
|
.pagination-previous, |
||||||
|
.pagination-next, |
||||||
|
.pagination-link, |
||||||
|
.pagination-ellipsis |
||||||
|
@extend %control |
||||||
|
@extend %unselectable |
||||||
|
font-size: $pagination-item-font-size |
||||||
|
justify-content: center |
||||||
|
margin: $pagination-item-margin |
||||||
|
padding-left: $pagination-item-padding-left |
||||||
|
padding-right: $pagination-item-padding-right |
||||||
|
text-align: center |
||||||
|
|
||||||
|
.pagination-previous, |
||||||
|
.pagination-next, |
||||||
|
.pagination-link |
||||||
|
border-color: $pagination-border-color |
||||||
|
color: $pagination-color |
||||||
|
min-width: $pagination-min-width |
||||||
|
&:hover |
||||||
|
border-color: $pagination-hover-border-color |
||||||
|
color: $pagination-hover-color |
||||||
|
&:focus |
||||||
|
border-color: $pagination-focus-border-color |
||||||
|
&:active |
||||||
|
box-shadow: $pagination-shadow-inset |
||||||
|
&[disabled] |
||||||
|
background-color: $pagination-disabled-background-color |
||||||
|
border-color: $pagination-disabled-border-color |
||||||
|
box-shadow: none |
||||||
|
color: $pagination-disabled-color |
||||||
|
opacity: 0.5 |
||||||
|
|
||||||
|
.pagination-previous, |
||||||
|
.pagination-next |
||||||
|
padding-left: $pagination-nav-padding-left |
||||||
|
padding-right: $pagination-nav-padding-right |
||||||
|
white-space: nowrap |
||||||
|
|
||||||
|
.pagination-link |
||||||
|
&.is-current |
||||||
|
background-color: $pagination-current-background-color |
||||||
|
border-color: $pagination-current-border-color |
||||||
|
color: $pagination-current-color |
||||||
|
|
||||||
|
.pagination-ellipsis |
||||||
|
color: $pagination-ellipsis-color |
||||||
|
pointer-events: none |
||||||
|
|
||||||
|
.pagination-list |
||||||
|
flex-wrap: wrap |
||||||
|
li |
||||||
|
list-style: none |
||||||
|
|
||||||
|
+mobile |
||||||
|
.pagination |
||||||
|
flex-wrap: wrap |
||||||
|
.pagination-previous, |
||||||
|
.pagination-next |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 1 |
||||||
|
.pagination-list |
||||||
|
li |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 1 |
||||||
|
|
||||||
|
+tablet |
||||||
|
.pagination-list |
||||||
|
flex-grow: 1 |
||||||
|
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 |
||||||
|
.pagination-list |
||||||
|
justify-content: center |
||||||
|
order: 2 |
||||||
|
.pagination-next |
||||||
|
order: 3 |
||||||
|
&.is-right |
||||||
|
.pagination-previous |
||||||
|
order: 1 |
||||||
|
.pagination-next |
||||||
|
order: 2 |
||||||
|
.pagination-list |
||||||
|
justify-content: flex-end |
||||||
|
order: 3 |
@ -0,0 +1,121 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$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.75em 1em !default |
||||||
|
$panel-heading-radius: $radius !default |
||||||
|
$panel-heading-size: 1.25em !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 |
||||||
|
|
||||||
|
$panel-list-item-color: $text !default |
||||||
|
$panel-list-item-hover-color: $link !default |
||||||
|
|
||||||
|
$panel-block-color: $text-strong !default |
||||||
|
$panel-block-hover-background-color: $background !default |
||||||
|
$panel-block-active-border-left-color: $link !default |
||||||
|
$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: $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-tabs, |
||||||
|
.panel-block |
||||||
|
&:not(:last-child) |
||||||
|
border-bottom: $panel-item-border |
||||||
|
|
||||||
|
.panel-heading |
||||||
|
background-color: $panel-heading-background-color |
||||||
|
border-radius: $panel-radius $panel-radius 0 0 |
||||||
|
color: $panel-heading-color |
||||||
|
font-size: $panel-heading-size |
||||||
|
font-weight: $panel-heading-weight |
||||||
|
line-height: $panel-heading-line-height |
||||||
|
padding: $panel-heading-padding |
||||||
|
|
||||||
|
.panel-tabs |
||||||
|
align-items: flex-end |
||||||
|
display: flex |
||||||
|
font-size: $panel-tabs-font-size |
||||||
|
justify-content: center |
||||||
|
a |
||||||
|
border-bottom: $panel-tab-border-bottom |
||||||
|
margin-bottom: -1px |
||||||
|
padding: 0.5em |
||||||
|
// Modifiers |
||||||
|
&.is-active |
||||||
|
border-bottom-color: $panel-tab-active-border-bottom-color |
||||||
|
color: $panel-tab-active-color |
||||||
|
|
||||||
|
.panel-list |
||||||
|
a |
||||||
|
color: $panel-list-item-color |
||||||
|
&:hover |
||||||
|
color: $panel-list-item-hover-color |
||||||
|
|
||||||
|
.panel-block |
||||||
|
align-items: center |
||||||
|
color: $panel-block-color |
||||||
|
display: flex |
||||||
|
justify-content: flex-start |
||||||
|
padding: 0.5em 0.75em |
||||||
|
input[type="checkbox"] |
||||||
|
+ltr-property("margin", 0.75em) |
||||||
|
& > .control |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 1 |
||||||
|
width: 100% |
||||||
|
&.is-wrapped |
||||||
|
flex-wrap: wrap |
||||||
|
&.is-active |
||||||
|
border-left-color: $panel-block-active-border-left-color |
||||||
|
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 |
||||||
|
cursor: pointer |
||||||
|
&:hover |
||||||
|
background-color: $panel-block-hover-background-color |
||||||
|
|
||||||
|
.panel-icon |
||||||
|
+fa(14px, 1em) |
||||||
|
color: $panel-icon-color |
||||||
|
+ltr-property("margin", 0.75em) |
||||||
|
.fa |
||||||
|
font-size: inherit |
||||||
|
line-height: inherit |
@ -0,0 +1,176 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$tabs-border-bottom-color: $border !default |
||||||
|
$tabs-border-bottom-style: solid !default |
||||||
|
$tabs-border-bottom-width: 1px !default |
||||||
|
$tabs-link-color: $text !default |
||||||
|
$tabs-link-hover-border-bottom-color: $text-strong !default |
||||||
|
$tabs-link-hover-color: $text-strong !default |
||||||
|
$tabs-link-active-border-bottom-color: $link !default |
||||||
|
$tabs-link-active-color: $link !default |
||||||
|
$tabs-link-padding: 0.5em 1em !default |
||||||
|
|
||||||
|
$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: $scheme-main !default |
||||||
|
$tabs-boxed-link-active-border-color: $border !default |
||||||
|
$tabs-boxed-link-active-border-bottom-color: transparent !default |
||||||
|
|
||||||
|
$tabs-toggle-link-border-color: $border !default |
||||||
|
$tabs-toggle-link-border-style: solid !default |
||||||
|
$tabs-toggle-link-border-width: 1px !default |
||||||
|
$tabs-toggle-link-hover-background-color: $background !default |
||||||
|
$tabs-toggle-link-hover-border-color: $border-hover !default |
||||||
|
$tabs-toggle-link-radius: $radius !default |
||||||
|
$tabs-toggle-link-active-background-color: $link !default |
||||||
|
$tabs-toggle-link-active-border-color: $link !default |
||||||
|
$tabs-toggle-link-active-color: $link-invert !default |
||||||
|
|
||||||
|
.tabs |
||||||
|
@extend %block |
||||||
|
+overflow-touch |
||||||
|
@extend %unselectable |
||||||
|
align-items: stretch |
||||||
|
display: flex |
||||||
|
font-size: $size-normal |
||||||
|
justify-content: space-between |
||||||
|
overflow: hidden |
||||||
|
overflow-x: auto |
||||||
|
white-space: nowrap |
||||||
|
a |
||||||
|
align-items: center |
||||||
|
border-bottom-color: $tabs-border-bottom-color |
||||||
|
border-bottom-style: $tabs-border-bottom-style |
||||||
|
border-bottom-width: $tabs-border-bottom-width |
||||||
|
color: $tabs-link-color |
||||||
|
display: flex |
||||||
|
justify-content: center |
||||||
|
margin-bottom: -#{$tabs-border-bottom-width} |
||||||
|
padding: $tabs-link-padding |
||||||
|
vertical-align: top |
||||||
|
&:hover |
||||||
|
border-bottom-color: $tabs-link-hover-border-bottom-color |
||||||
|
color: $tabs-link-hover-color |
||||||
|
li |
||||||
|
display: block |
||||||
|
&.is-active |
||||||
|
a |
||||||
|
border-bottom-color: $tabs-link-active-border-bottom-color |
||||||
|
color: $tabs-link-active-color |
||||||
|
ul |
||||||
|
align-items: center |
||||||
|
border-bottom-color: $tabs-border-bottom-color |
||||||
|
border-bottom-style: $tabs-border-bottom-style |
||||||
|
border-bottom-width: $tabs-border-bottom-width |
||||||
|
display: flex |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 0 |
||||||
|
justify-content: flex-start |
||||||
|
&.is-left |
||||||
|
padding-right: 0.75em |
||||||
|
&.is-center |
||||||
|
flex: none |
||||||
|
justify-content: center |
||||||
|
padding-left: 0.75em |
||||||
|
padding-right: 0.75em |
||||||
|
&.is-right |
||||||
|
justify-content: flex-end |
||||||
|
padding-left: 0.75em |
||||||
|
.icon |
||||||
|
&:first-child |
||||||
|
+ltr-property("margin", 0.5em) |
||||||
|
&:last-child |
||||||
|
+ltr-property("margin", 0.5em, false) |
||||||
|
// Alignment |
||||||
|
&.is-centered |
||||||
|
ul |
||||||
|
justify-content: center |
||||||
|
&.is-right |
||||||
|
ul |
||||||
|
justify-content: flex-end |
||||||
|
// Styles |
||||||
|
&.is-boxed |
||||||
|
a |
||||||
|
border: 1px solid transparent |
||||||
|
+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 |
||||||
|
li |
||||||
|
&.is-active |
||||||
|
a |
||||||
|
background-color: $tabs-boxed-link-active-background-color |
||||||
|
border-color: $tabs-boxed-link-active-border-color |
||||||
|
border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important |
||||||
|
&.is-fullwidth |
||||||
|
li |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 0 |
||||||
|
&.is-toggle |
||||||
|
a |
||||||
|
border-color: $tabs-toggle-link-border-color |
||||||
|
border-style: $tabs-toggle-link-border-style |
||||||
|
border-width: $tabs-toggle-link-border-width |
||||||
|
margin-bottom: 0 |
||||||
|
position: relative |
||||||
|
&:hover |
||||||
|
background-color: $tabs-toggle-link-hover-background-color |
||||||
|
border-color: $tabs-toggle-link-hover-border-color |
||||||
|
z-index: 2 |
||||||
|
li |
||||||
|
& + li |
||||||
|
+ltr-property("margin", -#{$tabs-toggle-link-border-width}, false) |
||||||
|
&:first-child a |
||||||
|
+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 |
||||||
|
+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 |
||||||
|
border-color: $tabs-toggle-link-active-border-color |
||||||
|
color: $tabs-toggle-link-active-color |
||||||
|
z-index: 1 |
||||||
|
ul |
||||||
|
border-bottom: none |
||||||
|
&.is-toggle-rounded |
||||||
|
li |
||||||
|
&:first-child a |
||||||
|
+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 |
||||||
|
+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 |
||||||
|
&.is-medium |
||||||
|
font-size: $size-medium |
||||||
|
&.is-large |
||||||
|
font-size: $size-large |
@ -0,0 +1,16 @@ |
|||||||
|
/* Bulma Elements */ |
||||||
|
@charset "utf-8" |
||||||
|
|
||||||
|
@import "box" |
||||||
|
@import "button" |
||||||
|
@import "container" |
||||||
|
@import "content" |
||||||
|
@import "icon" |
||||||
|
@import "image" |
||||||
|
@import "notification" |
||||||
|
@import "progress" |
||||||
|
@import "table" |
||||||
|
@import "tag" |
||||||
|
@import "title" |
||||||
|
|
||||||
|
@import "other" |
@ -0,0 +1,26 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$box-color: $text !default |
||||||
|
$box-background-color: $scheme-main !default |
||||||
|
$box-radius: $radius-large !default |
||||||
|
$box-shadow: $shadow !default |
||||||
|
$box-padding: 1.25rem !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 |
||||||
|
background-color: $box-background-color |
||||||
|
border-radius: $box-radius |
||||||
|
box-shadow: $box-shadow |
||||||
|
color: $box-color |
||||||
|
display: block |
||||||
|
padding: $box-padding |
||||||
|
|
||||||
|
a.box |
||||||
|
&:hover, |
||||||
|
&:focus |
||||||
|
box-shadow: $box-link-hover-shadow |
||||||
|
&:active |
||||||
|
box-shadow: $box-link-active-shadow |
@ -0,0 +1,345 @@ |
|||||||
|
@import "../utilities/controls" |
||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$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.5em - #{$button-border-width}) !default |
||||||
|
$button-padding-horizontal: 1em !default |
||||||
|
|
||||||
|
$button-hover-color: $link-hover !default |
||||||
|
$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: 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-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: $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 |
||||||
|
&:not(.is-rounded) |
||||||
|
border-radius: $radius-small |
||||||
|
font-size: $size-small |
||||||
|
=button-normal |
||||||
|
font-size: $size-normal |
||||||
|
=button-medium |
||||||
|
font-size: $size-medium |
||||||
|
=button-large |
||||||
|
font-size: $size-large |
||||||
|
|
||||||
|
.button |
||||||
|
@extend %control |
||||||
|
@extend %unselectable |
||||||
|
background-color: $button-background-color |
||||||
|
border-color: $button-border-color |
||||||
|
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 |
||||||
|
padding-right: $button-padding-horizontal |
||||||
|
padding-top: $button-padding-vertical |
||||||
|
text-align: center |
||||||
|
white-space: nowrap |
||||||
|
strong |
||||||
|
color: inherit |
||||||
|
.icon |
||||||
|
&, |
||||||
|
&.is-small, |
||||||
|
&.is-medium, |
||||||
|
&.is-large |
||||||
|
height: 1.5em |
||||||
|
width: 1.5em |
||||||
|
&:first-child:not(:last-child) |
||||||
|
+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) |
||||||
|
+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.5 * $button-padding-horizontal} - #{$button-border-width}) |
||||||
|
margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}) |
||||||
|
// States |
||||||
|
&:hover, |
||||||
|
&.is-hovered |
||||||
|
border-color: $button-hover-border-color |
||||||
|
color: $button-hover-color |
||||||
|
&:focus, |
||||||
|
&.is-focused |
||||||
|
border-color: $button-focus-border-color |
||||||
|
color: $button-focus-color |
||||||
|
&:not(:active) |
||||||
|
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color |
||||||
|
&:active, |
||||||
|
&.is-active |
||||||
|
border-color: $button-active-border-color |
||||||
|
color: $button-active-color |
||||||
|
// Colors |
||||||
|
&.is-text |
||||||
|
background-color: transparent |
||||||
|
border-color: transparent |
||||||
|
color: $button-text-color |
||||||
|
text-decoration: $button-text-decoration |
||||||
|
&:hover, |
||||||
|
&.is-hovered, |
||||||
|
&:focus, |
||||||
|
&.is-focused |
||||||
|
background-color: $button-text-hover-background-color |
||||||
|
color: $button-text-hover-color |
||||||
|
&:active, |
||||||
|
&.is-active |
||||||
|
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 |
||||||
|
&.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} |
||||||
|
background-color: $color |
||||||
|
border-color: transparent |
||||||
|
color: $color-invert |
||||||
|
&:hover, |
||||||
|
&.is-hovered |
||||||
|
background-color: bulmaDarken($color, 2.5%) |
||||||
|
border-color: transparent |
||||||
|
color: $color-invert |
||||||
|
&:focus, |
||||||
|
&.is-focused |
||||||
|
border-color: transparent |
||||||
|
color: $color-invert |
||||||
|
&:not(:active) |
||||||
|
box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25) |
||||||
|
&:active, |
||||||
|
&.is-active |
||||||
|
background-color: bulmaDarken($color, 5%) |
||||||
|
border-color: transparent |
||||||
|
color: $color-invert |
||||||
|
&[disabled], |
||||||
|
fieldset[disabled] & |
||||||
|
background-color: $color |
||||||
|
border-color: transparent |
||||||
|
box-shadow: none |
||||||
|
&.is-inverted |
||||||
|
background-color: $color-invert |
||||||
|
color: $color |
||||||
|
&:hover, |
||||||
|
&.is-hovered |
||||||
|
background-color: bulmaDarken($color-invert, 5%) |
||||||
|
&[disabled], |
||||||
|
fieldset[disabled] & |
||||||
|
background-color: $color-invert |
||||||
|
border-color: transparent |
||||||
|
box-shadow: none |
||||||
|
color: $color |
||||||
|
&.is-loading |
||||||
|
&::after |
||||||
|
border-color: transparent transparent $color-invert $color-invert !important |
||||||
|
&.is-outlined |
||||||
|
background-color: transparent |
||||||
|
border-color: $color |
||||||
|
color: $color |
||||||
|
&:hover, |
||||||
|
&.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 |
||||||
|
border-color: $color |
||||||
|
box-shadow: none |
||||||
|
color: $color |
||||||
|
&.is-inverted.is-outlined |
||||||
|
background-color: transparent |
||||||
|
border-color: $color-invert |
||||||
|
color: $color-invert |
||||||
|
&:hover, |
||||||
|
&.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 |
||||||
|
&.is-normal |
||||||
|
+button-normal |
||||||
|
&.is-medium |
||||||
|
+button-medium |
||||||
|
&.is-large |
||||||
|
+button-large |
||||||
|
// Modifiers |
||||||
|
&[disabled], |
||||||
|
fieldset[disabled] & |
||||||
|
background-color: $button-disabled-background-color |
||||||
|
border-color: $button-disabled-border-color |
||||||
|
box-shadow: $button-disabled-shadow |
||||||
|
opacity: $button-disabled-opacity |
||||||
|
&.is-fullwidth |
||||||
|
display: flex |
||||||
|
width: 100% |
||||||
|
&.is-loading |
||||||
|
color: transparent !important |
||||||
|
pointer-events: none |
||||||
|
&::after |
||||||
|
@extend %loader |
||||||
|
+center(1em) |
||||||
|
position: absolute !important |
||||||
|
&.is-static |
||||||
|
background-color: $button-static-background-color |
||||||
|
border-color: $button-static-border-color |
||||||
|
color: $button-static-color |
||||||
|
box-shadow: none |
||||||
|
pointer-events: none |
||||||
|
&.is-rounded |
||||||
|
border-radius: $radius-rounded |
||||||
|
padding-left: calc(#{$button-padding-horizontal} + 0.25em) |
||||||
|
padding-right: calc(#{$button-padding-horizontal} + 0.25em) |
||||||
|
|
||||||
|
.buttons |
||||||
|
align-items: center |
||||||
|
display: flex |
||||||
|
flex-wrap: wrap |
||||||
|
justify-content: flex-start |
||||||
|
.button |
||||||
|
margin-bottom: 0.5rem |
||||||
|
&:not(:last-child):not(.is-fullwidth) |
||||||
|
+ltr-property("margin", 0.5rem) |
||||||
|
&:last-child |
||||||
|
margin-bottom: -0.5rem |
||||||
|
&:not(:last-child) |
||||||
|
margin-bottom: 1rem |
||||||
|
// Sizes |
||||||
|
&.are-small |
||||||
|
.button:not(.is-normal):not(.is-medium):not(.is-large) |
||||||
|
+button-small |
||||||
|
&.are-medium |
||||||
|
.button:not(.is-small):not(.is-normal):not(.is-large) |
||||||
|
+button-medium |
||||||
|
&.are-large |
||||||
|
.button:not(.is-small):not(.is-normal):not(.is-medium) |
||||||
|
+button-large |
||||||
|
&.has-addons |
||||||
|
.button |
||||||
|
&: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 |
||||||
|
+ltr-property("margin", -1px) |
||||||
|
&:last-child |
||||||
|
+ltr-property("margin", 0) |
||||||
|
&:hover, |
||||||
|
&.is-hovered |
||||||
|
z-index: 2 |
||||||
|
&:focus, |
||||||
|
&.is-focused, |
||||||
|
&:active, |
||||||
|
&.is-active, |
||||||
|
&.is-selected |
||||||
|
z-index: 3 |
||||||
|
&:hover |
||||||
|
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 |
@ -0,0 +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 - $container-offset |
||||||
|
+until-widescreen |
||||||
|
&.is-widescreen:not(.is-max-desktop) |
||||||
|
max-width: min($widescreen, $container-max-width) - $container-offset |
||||||
|
+until-fullhd |
||||||
|
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) |
||||||
|
max-width: min($fullhd, $container-max-width) - $container-offset |
||||||
|
+widescreen |
||||||
|
&:not(.is-max-desktop) |
||||||
|
max-width: min($widescreen, $container-max-width) - $container-offset |
||||||
|
+fullhd |
||||||
|
&:not(.is-max-desktop):not(.is-max-widescreen) |
||||||
|
max-width: min($fullhd, $container-max-width) - $container-offset |
@ -0,0 +1,159 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$content-heading-color: $text-strong !default |
||||||
|
$content-heading-weight: $weight-semibold !default |
||||||
|
$content-heading-line-height: 1.125 !default |
||||||
|
|
||||||
|
$content-blockquote-background-color: $background !default |
||||||
|
$content-blockquote-border-left: 5px solid $border !default |
||||||
|
$content-blockquote-padding: 1.25em 1.5em !default |
||||||
|
|
||||||
|
$content-pre-padding: 1.25em 1.5em !default |
||||||
|
|
||||||
|
$content-table-cell-border: 1px solid $border !default |
||||||
|
$content-table-cell-border-width: 0 0 1px !default |
||||||
|
$content-table-cell-padding: 0.5em 0.75em !default |
||||||
|
$content-table-cell-heading-color: $text-strong !default |
||||||
|
$content-table-head-cell-border-width: 0 0 2px !default |
||||||
|
$content-table-head-cell-color: $text-strong !default |
||||||
|
$content-table-foot-cell-border-width: 2px 0 0 !default |
||||||
|
$content-table-foot-cell-color: $text-strong !default |
||||||
|
|
||||||
|
.content |
||||||
|
@extend %block |
||||||
|
// Inline |
||||||
|
li + li |
||||||
|
margin-top: 0.25em |
||||||
|
// Block |
||||||
|
p, |
||||||
|
dl, |
||||||
|
ol, |
||||||
|
ul, |
||||||
|
blockquote, |
||||||
|
pre, |
||||||
|
table |
||||||
|
&:not(:last-child) |
||||||
|
margin-bottom: 1em |
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
h5, |
||||||
|
h6 |
||||||
|
color: $content-heading-color |
||||||
|
font-weight: $content-heading-weight |
||||||
|
line-height: $content-heading-line-height |
||||||
|
h1 |
||||||
|
font-size: 2em |
||||||
|
margin-bottom: 0.5em |
||||||
|
&:not(:first-child) |
||||||
|
margin-top: 1em |
||||||
|
h2 |
||||||
|
font-size: 1.75em |
||||||
|
margin-bottom: 0.5714em |
||||||
|
&:not(:first-child) |
||||||
|
margin-top: 1.1428em |
||||||
|
h3 |
||||||
|
font-size: 1.5em |
||||||
|
margin-bottom: 0.6666em |
||||||
|
&:not(:first-child) |
||||||
|
margin-top: 1.3333em |
||||||
|
h4 |
||||||
|
font-size: 1.25em |
||||||
|
margin-bottom: 0.8em |
||||||
|
h5 |
||||||
|
font-size: 1.125em |
||||||
|
margin-bottom: 0.8888em |
||||||
|
h6 |
||||||
|
font-size: 1em |
||||||
|
margin-bottom: 1em |
||||||
|
blockquote |
||||||
|
background-color: $content-blockquote-background-color |
||||||
|
+ltr-property("border", $content-blockquote-border-left, false) |
||||||
|
padding: $content-blockquote-padding |
||||||
|
ol |
||||||
|
list-style-position: outside |
||||||
|
+ltr-property("margin", 2em, false) |
||||||
|
margin-top: 1em |
||||||
|
&:not([type]) |
||||||
|
list-style-type: decimal |
||||||
|
&.is-lower-alpha |
||||||
|
list-style-type: lower-alpha |
||||||
|
&.is-lower-roman |
||||||
|
list-style-type: lower-roman |
||||||
|
&.is-upper-alpha |
||||||
|
list-style-type: upper-alpha |
||||||
|
&.is-upper-roman |
||||||
|
list-style-type: upper-roman |
||||||
|
ul |
||||||
|
list-style: disc outside |
||||||
|
+ltr-property("margin", 2em, false) |
||||||
|
margin-top: 1em |
||||||
|
ul |
||||||
|
list-style-type: circle |
||||||
|
margin-top: 0.5em |
||||||
|
ul |
||||||
|
list-style-type: square |
||||||
|
dd |
||||||
|
+ltr-property("margin", 2em, false) |
||||||
|
figure |
||||||
|
margin-left: 2em |
||||||
|
margin-right: 2em |
||||||
|
text-align: center |
||||||
|
&:not(:first-child) |
||||||
|
margin-top: 2em |
||||||
|
&:not(:last-child) |
||||||
|
margin-bottom: 2em |
||||||
|
img |
||||||
|
display: inline-block |
||||||
|
figcaption |
||||||
|
font-style: italic |
||||||
|
pre |
||||||
|
+overflow-touch |
||||||
|
overflow-x: auto |
||||||
|
padding: $content-pre-padding |
||||||
|
white-space: pre |
||||||
|
word-wrap: normal |
||||||
|
sup, |
||||||
|
sub |
||||||
|
font-size: 75% |
||||||
|
table |
||||||
|
width: 100% |
||||||
|
td, |
||||||
|
th |
||||||
|
border: $content-table-cell-border |
||||||
|
border-width: $content-table-cell-border-width |
||||||
|
padding: $content-table-cell-padding |
||||||
|
vertical-align: top |
||||||
|
th |
||||||
|
color: $content-table-cell-heading-color |
||||||
|
&:not([align]) |
||||||
|
text-align: inherit |
||||||
|
thead |
||||||
|
td, |
||||||
|
th |
||||||
|
border-width: $content-table-head-cell-border-width |
||||||
|
color: $content-table-head-cell-color |
||||||
|
tfoot |
||||||
|
td, |
||||||
|
th |
||||||
|
border-width: $content-table-foot-cell-border-width |
||||||
|
color: $content-table-foot-cell-color |
||||||
|
tbody |
||||||
|
tr |
||||||
|
&:last-child |
||||||
|
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 |
||||||
|
font-size: $size-large |
@ -0,0 +1 @@ |
|||||||
|
@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead." |
@ -0,0 +1,46 @@ |
|||||||
|
$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 |
||||||
|
display: inline-flex |
||||||
|
justify-content: center |
||||||
|
height: $icon-dimensions |
||||||
|
width: $icon-dimensions |
||||||
|
// Sizes |
||||||
|
&.is-small |
||||||
|
height: $icon-dimensions-small |
||||||
|
width: $icon-dimensions-small |
||||||
|
&.is-medium |
||||||
|
height: $icon-dimensions-medium |
||||||
|
width: $icon-dimensions-medium |
||||||
|
&.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 |
@ -0,0 +1,73 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$dimensions: 16 24 32 48 64 96 128 !default |
||||||
|
|
||||||
|
.image |
||||||
|
display: block |
||||||
|
position: relative |
||||||
|
img |
||||||
|
display: block |
||||||
|
height: auto |
||||||
|
width: 100% |
||||||
|
&.is-rounded |
||||||
|
border-radius: $radius-rounded |
||||||
|
&.is-fullwidth |
||||||
|
width: 100% |
||||||
|
// Ratio |
||||||
|
&.is-square, |
||||||
|
&.is-1by1, |
||||||
|
&.is-5by4, |
||||||
|
&.is-4by3, |
||||||
|
&.is-3by2, |
||||||
|
&.is-5by3, |
||||||
|
&.is-16by9, |
||||||
|
&.is-2by1, |
||||||
|
&.is-3by1, |
||||||
|
&.is-4by5, |
||||||
|
&.is-3by4, |
||||||
|
&.is-2by3, |
||||||
|
&.is-3by5, |
||||||
|
&.is-9by16, |
||||||
|
&.is-1by2, |
||||||
|
&.is-1by3 |
||||||
|
img, |
||||||
|
.has-ratio |
||||||
|
@extend %overlay |
||||||
|
height: 100% |
||||||
|
width: 100% |
||||||
|
&.is-square, |
||||||
|
&.is-1by1 |
||||||
|
padding-top: 100% |
||||||
|
&.is-5by4 |
||||||
|
padding-top: 80% |
||||||
|
&.is-4by3 |
||||||
|
padding-top: 75% |
||||||
|
&.is-3by2 |
||||||
|
padding-top: 66.6666% |
||||||
|
&.is-5by3 |
||||||
|
padding-top: 60% |
||||||
|
&.is-16by9 |
||||||
|
padding-top: 56.25% |
||||||
|
&.is-2by1 |
||||||
|
padding-top: 50% |
||||||
|
&.is-3by1 |
||||||
|
padding-top: 33.3333% |
||||||
|
&.is-4by5 |
||||||
|
padding-top: 125% |
||||||
|
&.is-3by4 |
||||||
|
padding-top: 133.3333% |
||||||
|
&.is-2by3 |
||||||
|
padding-top: 150% |
||||||
|
&.is-3by5 |
||||||
|
padding-top: 166.6666% |
||||||
|
&.is-9by16 |
||||||
|
padding-top: 177.7777% |
||||||
|
&.is-1by2 |
||||||
|
padding-top: 200% |
||||||
|
&.is-1by3 |
||||||
|
padding-top: 300% |
||||||
|
// Sizes |
||||||
|
@each $dimension in $dimensions |
||||||
|
&.is-#{$dimension}x#{$dimension} |
||||||
|
height: $dimension * 1px |
||||||
|
width: $dimension * 1px |
@ -0,0 +1,52 @@ |
|||||||
|
@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 |
||||||
|
position: relative |
||||||
|
+ltr |
||||||
|
padding: $notification-padding-ltr |
||||||
|
+rtl |
||||||
|
padding: $notification-padding-rtl |
||||||
|
a:not(.button):not(.dropdown-item) |
||||||
|
color: currentColor |
||||||
|
text-decoration: underline |
||||||
|
strong |
||||||
|
color: currentColor |
||||||
|
code, |
||||||
|
pre |
||||||
|
background: $notification-code-background-color |
||||||
|
pre code |
||||||
|
background: transparent |
||||||
|
& > .delete |
||||||
|
+ltr-position(0.5rem) |
||||||
|
position: absolute |
||||||
|
top: 0.5rem |
||||||
|
.title, |
||||||
|
.subtitle, |
||||||
|
.content |
||||||
|
color: currentColor |
||||||
|
// 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 |
@ -0,0 +1,31 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
.block |
||||||
|
@extend %block |
||||||
|
|
||||||
|
.delete |
||||||
|
@extend %delete |
||||||
|
|
||||||
|
.heading |
||||||
|
display: block |
||||||
|
font-size: 11px |
||||||
|
letter-spacing: 1px |
||||||
|
margin-bottom: 5px |
||||||
|
text-transform: uppercase |
||||||
|
|
||||||
|
.loader |
||||||
|
@extend %loader |
||||||
|
|
||||||
|
.number |
||||||
|
align-items: center |
||||||
|
background-color: $background |
||||||
|
border-radius: $radius-rounded |
||||||
|
display: inline-flex |
||||||
|
font-size: $size-medium |
||||||
|
height: 2em |
||||||
|
justify-content: center |
||||||
|
margin-right: 1.5rem |
||||||
|
min-width: 2.5em |
||||||
|
padding: 0.25rem 0.5rem |
||||||
|
text-align: center |
||||||
|
vertical-align: top |
@ -0,0 +1,73 @@ |
|||||||
|
@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: $progress-border-radius |
||||||
|
display: block |
||||||
|
height: $size-normal |
||||||
|
overflow: hidden |
||||||
|
padding: 0 |
||||||
|
width: 100% |
||||||
|
&::-webkit-progress-bar |
||||||
|
background-color: $progress-bar-background-color |
||||||
|
&::-webkit-progress-value |
||||||
|
background-color: $progress-value-background-color |
||||||
|
&::-moz-progress-bar |
||||||
|
background-color: $progress-value-background-color |
||||||
|
&::-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 |
||||||
|
animation-name: moveIndeterminate |
||||||
|
animation-timing-function: linear |
||||||
|
background-color: $progress-bar-background-color |
||||||
|
background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%) |
||||||
|
background-position: top left |
||||||
|
background-repeat: no-repeat |
||||||
|
background-size: 150% 150% |
||||||
|
&::-webkit-progress-bar |
||||||
|
background-color: transparent |
||||||
|
&::-moz-progress-bar |
||||||
|
background-color: transparent |
||||||
|
&::-ms-fill |
||||||
|
animation-name: none |
||||||
|
|
||||||
|
// Sizes |
||||||
|
&.is-small |
||||||
|
height: $size-small |
||||||
|
&.is-medium |
||||||
|
height: $size-medium |
||||||
|
&.is-large |
||||||
|
height: $size-large |
||||||
|
|
||||||
|
@keyframes moveIndeterminate |
||||||
|
from |
||||||
|
background-position: 200% 0 |
||||||
|
to |
||||||
|
background-position: -200% 0 |
@ -0,0 +1,133 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$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 |
||||||
|
|
||||||
|
$table-head-cell-border-width: 0 0 2px !default |
||||||
|
$table-head-cell-color: $text-strong !default |
||||||
|
$table-foot-cell-border-width: 2px 0 0 !default |
||||||
|
$table-foot-cell-color: $text-strong !default |
||||||
|
|
||||||
|
$table-head-background-color: transparent !default |
||||||
|
$table-body-background-color: transparent !default |
||||||
|
$table-foot-background-color: transparent !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: $scheme-main-bis !default |
||||||
|
$table-striped-row-even-hover-background-color: $scheme-main-ter !default |
||||||
|
|
||||||
|
$table-colors: $colors !default |
||||||
|
|
||||||
|
.table |
||||||
|
@extend %block |
||||||
|
background-color: $table-background-color |
||||||
|
color: $table-color |
||||||
|
td, |
||||||
|
th |
||||||
|
border: $table-cell-border |
||||||
|
border-width: $table-cell-border-width |
||||||
|
padding: $table-cell-padding |
||||||
|
vertical-align: top |
||||||
|
// Colors |
||||||
|
@each $name, $pair in $table-colors |
||||||
|
$color: nth($pair, 1) |
||||||
|
$color-invert: nth($pair, 2) |
||||||
|
&.is-#{$name} |
||||||
|
background-color: $color |
||||||
|
border-color: $color |
||||||
|
color: $color-invert |
||||||
|
// Modifiers |
||||||
|
&.is-narrow |
||||||
|
white-space: nowrap |
||||||
|
width: 1% |
||||||
|
&.is-selected |
||||||
|
background-color: $table-row-active-background-color |
||||||
|
color: $table-row-active-color |
||||||
|
a, |
||||||
|
strong |
||||||
|
color: currentColor |
||||||
|
&.is-vcentered |
||||||
|
vertical-align: middle |
||||||
|
th |
||||||
|
color: $table-cell-heading-color |
||||||
|
&:not([align]) |
||||||
|
text-align: inherit |
||||||
|
tr |
||||||
|
&.is-selected |
||||||
|
background-color: $table-row-active-background-color |
||||||
|
color: $table-row-active-color |
||||||
|
a, |
||||||
|
strong |
||||||
|
color: currentColor |
||||||
|
td, |
||||||
|
th |
||||||
|
border-color: $table-row-active-color |
||||||
|
color: currentColor |
||||||
|
thead |
||||||
|
background-color: $table-head-background-color |
||||||
|
td, |
||||||
|
th |
||||||
|
border-width: $table-head-cell-border-width |
||||||
|
color: $table-head-cell-color |
||||||
|
tfoot |
||||||
|
background-color: $table-foot-background-color |
||||||
|
td, |
||||||
|
th |
||||||
|
border-width: $table-foot-cell-border-width |
||||||
|
color: $table-foot-cell-color |
||||||
|
tbody |
||||||
|
background-color: $table-body-background-color |
||||||
|
tr |
||||||
|
&:last-child |
||||||
|
td, |
||||||
|
th |
||||||
|
border-bottom-width: 0 |
||||||
|
// Modifiers |
||||||
|
&.is-bordered |
||||||
|
td, |
||||||
|
th |
||||||
|
border-width: 1px |
||||||
|
tr |
||||||
|
&:last-child |
||||||
|
td, |
||||||
|
th |
||||||
|
border-bottom-width: 1px |
||||||
|
&.is-fullwidth |
||||||
|
width: 100% |
||||||
|
&.is-hoverable |
||||||
|
tbody |
||||||
|
tr:not(.is-selected) |
||||||
|
&:hover |
||||||
|
background-color: $table-row-hover-background-color |
||||||
|
&.is-striped |
||||||
|
tbody |
||||||
|
tr:not(.is-selected) |
||||||
|
&:hover |
||||||
|
background-color: $table-row-hover-background-color |
||||||
|
&:nth-child(even) |
||||||
|
background-color: $table-striped-row-even-hover-background-color |
||||||
|
&.is-narrow |
||||||
|
td, |
||||||
|
th |
||||||
|
padding: 0.25em 0.5em |
||||||
|
&.is-striped |
||||||
|
tbody |
||||||
|
tr:not(.is-selected) |
||||||
|
&:nth-child(even) |
||||||
|
background-color: $table-striped-row-even-background-color |
||||||
|
|
||||||
|
.table-container |
||||||
|
@extend %block |
||||||
|
+overflow-touch |
||||||
|
overflow: auto |
||||||
|
overflow-y: hidden |
||||||
|
max-width: 100% |
@ -0,0 +1,140 @@ |
|||||||
|
@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 |
||||||
|
flex-wrap: wrap |
||||||
|
justify-content: flex-start |
||||||
|
.tag |
||||||
|
margin-bottom: 0.5rem |
||||||
|
&:not(:last-child) |
||||||
|
+ltr-property("margin", 0.5rem) |
||||||
|
&:last-child |
||||||
|
margin-bottom: -0.5rem |
||||||
|
&:not(:last-child) |
||||||
|
margin-bottom: 1rem |
||||||
|
// Sizes |
||||||
|
&.are-medium |
||||||
|
.tag:not(.is-normal):not(.is-large) |
||||||
|
font-size: $size-normal |
||||||
|
&.are-large |
||||||
|
.tag:not(.is-normal):not(.is-medium) |
||||||
|
font-size: $size-medium |
||||||
|
&.is-centered |
||||||
|
justify-content: center |
||||||
|
.tag |
||||||
|
margin-right: 0.25rem |
||||||
|
margin-left: 0.25rem |
||||||
|
&.is-right |
||||||
|
justify-content: flex-end |
||||||
|
.tag |
||||||
|
&:not(:first-child) |
||||||
|
margin-left: 0.5rem |
||||||
|
&:not(:last-child) |
||||||
|
margin-right: 0 |
||||||
|
&.has-addons |
||||||
|
.tag |
||||||
|
+ltr-property("margin", 0) |
||||||
|
&:not(:first-child) |
||||||
|
+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) |
||||||
|
+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 |
||||||
|
background-color: $tag-background-color |
||||||
|
border-radius: $tag-radius |
||||||
|
color: $tag-color |
||||||
|
display: inline-flex |
||||||
|
font-size: $size-small |
||||||
|
height: 2em |
||||||
|
justify-content: center |
||||||
|
line-height: 1.5 |
||||||
|
padding-left: 0.75em |
||||||
|
padding-right: 0.75em |
||||||
|
white-space: nowrap |
||||||
|
.delete |
||||||
|
+ltr-property("margin", 0.25rem, false) |
||||||
|
+ltr-property("margin", -0.375rem) |
||||||
|
// 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 |
||||||
|
&.is-medium |
||||||
|
font-size: $size-normal |
||||||
|
&.is-large |
||||||
|
font-size: $size-medium |
||||||
|
.icon |
||||||
|
&:first-child:not(:last-child) |
||||||
|
+ltr-property("margin", -0.375em, false) |
||||||
|
+ltr-property("margin", 0.1875em) |
||||||
|
&:last-child:not(:first-child) |
||||||
|
+ltr-property("margin", 0.1875em, false) |
||||||
|
+ltr-property("margin", -0.375em) |
||||||
|
&:first-child:last-child |
||||||
|
+ltr-property("margin", -0.375em, false) |
||||||
|
+ltr-property("margin", -0.375em) |
||||||
|
// Modifiers |
||||||
|
&.is-delete |
||||||
|
+ltr-property("margin", $tag-delete-margin, false) |
||||||
|
padding: 0 |
||||||
|
position: relative |
||||||
|
width: 2em |
||||||
|
&::before, |
||||||
|
&::after |
||||||
|
background-color: currentColor |
||||||
|
content: "" |
||||||
|
display: block |
||||||
|
left: 50% |
||||||
|
position: absolute |
||||||
|
top: 50% |
||||||
|
transform: translateX(-50%) translateY(-50%) rotate(45deg) |
||||||
|
transform-origin: center center |
||||||
|
&::before |
||||||
|
height: 1px |
||||||
|
width: 50% |
||||||
|
&::after |
||||||
|
height: 50% |
||||||
|
width: 1px |
||||||
|
&:hover, |
||||||
|
&:focus |
||||||
|
background-color: darken($tag-background-color, 5%) |
||||||
|
&:active |
||||||
|
background-color: darken($tag-background-color, 10%) |
||||||
|
&.is-rounded |
||||||
|
border-radius: $radius-rounded |
||||||
|
|
||||||
|
a.tag |
||||||
|
&:hover |
||||||
|
text-decoration: underline |
@ -0,0 +1,70 @@ |
|||||||
|
@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 |
||||||
|
$title-strong-color: inherit !default |
||||||
|
$title-strong-weight: inherit !default |
||||||
|
$title-sub-size: 0.75em !default |
||||||
|
$title-sup-size: 0.75em !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: $text-strong !default |
||||||
|
$subtitle-strong-weight: $weight-semibold !default |
||||||
|
$subtitle-negative-margin: -1.25rem !default |
||||||
|
|
||||||
|
.title, |
||||||
|
.subtitle |
||||||
|
@extend %block |
||||||
|
word-break: break-word |
||||||
|
em, |
||||||
|
span |
||||||
|
font-weight: inherit |
||||||
|
sub |
||||||
|
font-size: $title-sub-size |
||||||
|
sup |
||||||
|
font-size: $title-sup-size |
||||||
|
.tag |
||||||
|
vertical-align: middle |
||||||
|
|
||||||
|
.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 |
||||||
|
&:not(.is-spaced) + .subtitle |
||||||
|
margin-top: $subtitle-negative-margin |
||||||
|
// Sizes |
||||||
|
@each $size in $sizes |
||||||
|
$i: index($sizes, $size) |
||||||
|
&.is-#{$i} |
||||||
|
font-size: $size |
||||||
|
|
||||||
|
.subtitle |
||||||
|
color: $subtitle-color |
||||||
|
@if $subtitle-family |
||||||
|
font-family: $subtitle-family |
||||||
|
font-size: $subtitle-size |
||||||
|
font-weight: $subtitle-weight |
||||||
|
line-height: $subtitle-line-height |
||||||
|
strong |
||||||
|
color: $subtitle-strong-color |
||||||
|
font-weight: $subtitle-strong-weight |
||||||
|
&:not(.is-spaced) + .title |
||||||
|
margin-top: $subtitle-negative-margin |
||||||
|
// Sizes |
||||||
|
@each $size in $sizes |
||||||
|
$i: index($sizes, $size) |
||||||
|
&.is-#{$i} |
||||||
|
font-size: $size |
@ -0,0 +1,9 @@ |
|||||||
|
/* Bulma Form */ |
||||||
|
@charset "utf-8" |
||||||
|
|
||||||
|
@import "shared" |
||||||
|
@import "input-textarea" |
||||||
|
@import "checkbox-radio" |
||||||
|
@import "select" |
||||||
|
@import "file" |
||||||
|
@import "tools" |
@ -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) |
@ -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 |
@ -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 |
@ -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 |
@ -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 |
@ -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 |
@ -0,0 +1,5 @@ |
|||||||
|
/* Bulma Grid */ |
||||||
|
@charset "utf-8" |
||||||
|
|
||||||
|
@import "columns" |
||||||
|
@import "tiles" |
@ -0,0 +1,513 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$column-gap: 0.75rem !default |
||||||
|
|
||||||
|
.column |
||||||
|
display: block |
||||||
|
flex-basis: 0 |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 1 |
||||||
|
padding: $column-gap |
||||||
|
.columns.is-mobile > &.is-narrow |
||||||
|
flex: none |
||||||
|
width: unset |
||||||
|
.columns.is-mobile > &.is-full |
||||||
|
flex: none |
||||||
|
width: 100% |
||||||
|
.columns.is-mobile > &.is-three-quarters |
||||||
|
flex: none |
||||||
|
width: 75% |
||||||
|
.columns.is-mobile > &.is-two-thirds |
||||||
|
flex: none |
||||||
|
width: 66.6666% |
||||||
|
.columns.is-mobile > &.is-half |
||||||
|
flex: none |
||||||
|
width: 50% |
||||||
|
.columns.is-mobile > &.is-one-third |
||||||
|
flex: none |
||||||
|
width: 33.3333% |
||||||
|
.columns.is-mobile > &.is-one-quarter |
||||||
|
flex: none |
||||||
|
width: 25% |
||||||
|
.columns.is-mobile > &.is-one-fifth |
||||||
|
flex: none |
||||||
|
width: 20% |
||||||
|
.columns.is-mobile > &.is-two-fifths |
||||||
|
flex: none |
||||||
|
width: 40% |
||||||
|
.columns.is-mobile > &.is-three-fifths |
||||||
|
flex: none |
||||||
|
width: 60% |
||||||
|
.columns.is-mobile > &.is-four-fifths |
||||||
|
flex: none |
||||||
|
width: 80% |
||||||
|
.columns.is-mobile > &.is-offset-three-quarters |
||||||
|
+ltr-property("margin", 75%, false) |
||||||
|
.columns.is-mobile > &.is-offset-two-thirds |
||||||
|
+ltr-property("margin", 66.6666%, false) |
||||||
|
.columns.is-mobile > &.is-offset-half |
||||||
|
+ltr-property("margin", 50%, false) |
||||||
|
.columns.is-mobile > &.is-offset-one-third |
||||||
|
+ltr-property("margin", 33.3333%, false) |
||||||
|
.columns.is-mobile > &.is-offset-one-quarter |
||||||
|
+ltr-property("margin", 25%, false) |
||||||
|
.columns.is-mobile > &.is-offset-one-fifth |
||||||
|
+ltr-property("margin", 20%, false) |
||||||
|
.columns.is-mobile > &.is-offset-two-fifths |
||||||
|
+ltr-property("margin", 40%, false) |
||||||
|
.columns.is-mobile > &.is-offset-three-fifths |
||||||
|
+ltr-property("margin", 60%, false) |
||||||
|
.columns.is-mobile > &.is-offset-four-fifths |
||||||
|
+ltr-property("margin", 80%, false) |
||||||
|
@for $i from 0 through 12 |
||||||
|
.columns.is-mobile > &.is-#{$i} |
||||||
|
flex: none |
||||||
|
width: percentage(divide($i, 12)) |
||||||
|
.columns.is-mobile > &.is-offset-#{$i} |
||||||
|
+ltr-property("margin", percentage(divide($i, 12)), false) |
||||||
|
+mobile |
||||||
|
&.is-narrow-mobile |
||||||
|
flex: none |
||||||
|
width: unset |
||||||
|
&.is-full-mobile |
||||||
|
flex: none |
||||||
|
width: 100% |
||||||
|
&.is-three-quarters-mobile |
||||||
|
flex: none |
||||||
|
width: 75% |
||||||
|
&.is-two-thirds-mobile |
||||||
|
flex: none |
||||||
|
width: 66.6666% |
||||||
|
&.is-half-mobile |
||||||
|
flex: none |
||||||
|
width: 50% |
||||||
|
&.is-one-third-mobile |
||||||
|
flex: none |
||||||
|
width: 33.3333% |
||||||
|
&.is-one-quarter-mobile |
||||||
|
flex: none |
||||||
|
width: 25% |
||||||
|
&.is-one-fifth-mobile |
||||||
|
flex: none |
||||||
|
width: 20% |
||||||
|
&.is-two-fifths-mobile |
||||||
|
flex: none |
||||||
|
width: 40% |
||||||
|
&.is-three-fifths-mobile |
||||||
|
flex: none |
||||||
|
width: 60% |
||||||
|
&.is-four-fifths-mobile |
||||||
|
flex: none |
||||||
|
width: 80% |
||||||
|
&.is-offset-three-quarters-mobile |
||||||
|
+ltr-property("margin", 75%, false) |
||||||
|
&.is-offset-two-thirds-mobile |
||||||
|
+ltr-property("margin", 66.6666%, false) |
||||||
|
&.is-offset-half-mobile |
||||||
|
+ltr-property("margin", 50%, false) |
||||||
|
&.is-offset-one-third-mobile |
||||||
|
+ltr-property("margin", 33.3333%, false) |
||||||
|
&.is-offset-one-quarter-mobile |
||||||
|
+ltr-property("margin", 25%, false) |
||||||
|
&.is-offset-one-fifth-mobile |
||||||
|
+ltr-property("margin", 20%, false) |
||||||
|
&.is-offset-two-fifths-mobile |
||||||
|
+ltr-property("margin", 40%, false) |
||||||
|
&.is-offset-three-fifths-mobile |
||||||
|
+ltr-property("margin", 60%, false) |
||||||
|
&.is-offset-four-fifths-mobile |
||||||
|
+ltr-property("margin", 80%, false) |
||||||
|
@for $i from 0 through 12 |
||||||
|
&.is-#{$i}-mobile |
||||||
|
flex: none |
||||||
|
width: percentage(divide($i, 12)) |
||||||
|
&.is-offset-#{$i}-mobile |
||||||
|
+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 |
||||||
|
width: 100% |
||||||
|
&.is-three-quarters, |
||||||
|
&.is-three-quarters-tablet |
||||||
|
flex: none |
||||||
|
width: 75% |
||||||
|
&.is-two-thirds, |
||||||
|
&.is-two-thirds-tablet |
||||||
|
flex: none |
||||||
|
width: 66.6666% |
||||||
|
&.is-half, |
||||||
|
&.is-half-tablet |
||||||
|
flex: none |
||||||
|
width: 50% |
||||||
|
&.is-one-third, |
||||||
|
&.is-one-third-tablet |
||||||
|
flex: none |
||||||
|
width: 33.3333% |
||||||
|
&.is-one-quarter, |
||||||
|
&.is-one-quarter-tablet |
||||||
|
flex: none |
||||||
|
width: 25% |
||||||
|
&.is-one-fifth, |
||||||
|
&.is-one-fifth-tablet |
||||||
|
flex: none |
||||||
|
width: 20% |
||||||
|
&.is-two-fifths, |
||||||
|
&.is-two-fifths-tablet |
||||||
|
flex: none |
||||||
|
width: 40% |
||||||
|
&.is-three-fifths, |
||||||
|
&.is-three-fifths-tablet |
||||||
|
flex: none |
||||||
|
width: 60% |
||||||
|
&.is-four-fifths, |
||||||
|
&.is-four-fifths-tablet |
||||||
|
flex: none |
||||||
|
width: 80% |
||||||
|
&.is-offset-three-quarters, |
||||||
|
&.is-offset-three-quarters-tablet |
||||||
|
+ltr-property("margin", 75%, false) |
||||||
|
&.is-offset-two-thirds, |
||||||
|
&.is-offset-two-thirds-tablet |
||||||
|
+ltr-property("margin", 66.6666%, false) |
||||||
|
&.is-offset-half, |
||||||
|
&.is-offset-half-tablet |
||||||
|
+ltr-property("margin", 50%, false) |
||||||
|
&.is-offset-one-third, |
||||||
|
&.is-offset-one-third-tablet |
||||||
|
+ltr-property("margin", 33.3333%, false) |
||||||
|
&.is-offset-one-quarter, |
||||||
|
&.is-offset-one-quarter-tablet |
||||||
|
+ltr-property("margin", 25%, false) |
||||||
|
&.is-offset-one-fifth, |
||||||
|
&.is-offset-one-fifth-tablet |
||||||
|
+ltr-property("margin", 20%, false) |
||||||
|
&.is-offset-two-fifths, |
||||||
|
&.is-offset-two-fifths-tablet |
||||||
|
+ltr-property("margin", 40%, false) |
||||||
|
&.is-offset-three-fifths, |
||||||
|
&.is-offset-three-fifths-tablet |
||||||
|
+ltr-property("margin", 60%, false) |
||||||
|
&.is-offset-four-fifths, |
||||||
|
&.is-offset-four-fifths-tablet |
||||||
|
+ltr-property("margin", 80%, false) |
||||||
|
@for $i from 0 through 12 |
||||||
|
&.is-#{$i}, |
||||||
|
&.is-#{$i}-tablet |
||||||
|
flex: none |
||||||
|
width: percentage(divide($i, 12)) |
||||||
|
&.is-offset-#{$i}, |
||||||
|
&.is-offset-#{$i}-tablet |
||||||
|
+ltr-property("margin", percentage(divide($i, 12)), false) |
||||||
|
+touch |
||||||
|
&.is-narrow-touch |
||||||
|
flex: none |
||||||
|
width: unset |
||||||
|
&.is-full-touch |
||||||
|
flex: none |
||||||
|
width: 100% |
||||||
|
&.is-three-quarters-touch |
||||||
|
flex: none |
||||||
|
width: 75% |
||||||
|
&.is-two-thirds-touch |
||||||
|
flex: none |
||||||
|
width: 66.6666% |
||||||
|
&.is-half-touch |
||||||
|
flex: none |
||||||
|
width: 50% |
||||||
|
&.is-one-third-touch |
||||||
|
flex: none |
||||||
|
width: 33.3333% |
||||||
|
&.is-one-quarter-touch |
||||||
|
flex: none |
||||||
|
width: 25% |
||||||
|
&.is-one-fifth-touch |
||||||
|
flex: none |
||||||
|
width: 20% |
||||||
|
&.is-two-fifths-touch |
||||||
|
flex: none |
||||||
|
width: 40% |
||||||
|
&.is-three-fifths-touch |
||||||
|
flex: none |
||||||
|
width: 60% |
||||||
|
&.is-four-fifths-touch |
||||||
|
flex: none |
||||||
|
width: 80% |
||||||
|
&.is-offset-three-quarters-touch |
||||||
|
+ltr-property("margin", 75%, false) |
||||||
|
&.is-offset-two-thirds-touch |
||||||
|
+ltr-property("margin", 66.6666%, false) |
||||||
|
&.is-offset-half-touch |
||||||
|
+ltr-property("margin", 50%, false) |
||||||
|
&.is-offset-one-third-touch |
||||||
|
+ltr-property("margin", 33.3333%, false) |
||||||
|
&.is-offset-one-quarter-touch |
||||||
|
+ltr-property("margin", 25%, false) |
||||||
|
&.is-offset-one-fifth-touch |
||||||
|
+ltr-property("margin", 20%, false) |
||||||
|
&.is-offset-two-fifths-touch |
||||||
|
+ltr-property("margin", 40%, false) |
||||||
|
&.is-offset-three-fifths-touch |
||||||
|
+ltr-property("margin", 60%, false) |
||||||
|
&.is-offset-four-fifths-touch |
||||||
|
+ltr-property("margin", 80%, false) |
||||||
|
@for $i from 0 through 12 |
||||||
|
&.is-#{$i}-touch |
||||||
|
flex: none |
||||||
|
width: percentage(divide($i, 12)) |
||||||
|
&.is-offset-#{$i}-touch |
||||||
|
+ltr-property("margin", percentage(divide($i, 12)), false) |
||||||
|
+desktop |
||||||
|
&.is-narrow-desktop |
||||||
|
flex: none |
||||||
|
width: unset |
||||||
|
&.is-full-desktop |
||||||
|
flex: none |
||||||
|
width: 100% |
||||||
|
&.is-three-quarters-desktop |
||||||
|
flex: none |
||||||
|
width: 75% |
||||||
|
&.is-two-thirds-desktop |
||||||
|
flex: none |
||||||
|
width: 66.6666% |
||||||
|
&.is-half-desktop |
||||||
|
flex: none |
||||||
|
width: 50% |
||||||
|
&.is-one-third-desktop |
||||||
|
flex: none |
||||||
|
width: 33.3333% |
||||||
|
&.is-one-quarter-desktop |
||||||
|
flex: none |
||||||
|
width: 25% |
||||||
|
&.is-one-fifth-desktop |
||||||
|
flex: none |
||||||
|
width: 20% |
||||||
|
&.is-two-fifths-desktop |
||||||
|
flex: none |
||||||
|
width: 40% |
||||||
|
&.is-three-fifths-desktop |
||||||
|
flex: none |
||||||
|
width: 60% |
||||||
|
&.is-four-fifths-desktop |
||||||
|
flex: none |
||||||
|
width: 80% |
||||||
|
&.is-offset-three-quarters-desktop |
||||||
|
+ltr-property("margin", 75%, false) |
||||||
|
&.is-offset-two-thirds-desktop |
||||||
|
+ltr-property("margin", 66.6666%, false) |
||||||
|
&.is-offset-half-desktop |
||||||
|
+ltr-property("margin", 50%, false) |
||||||
|
&.is-offset-one-third-desktop |
||||||
|
+ltr-property("margin", 33.3333%, false) |
||||||
|
&.is-offset-one-quarter-desktop |
||||||
|
+ltr-property("margin", 25%, false) |
||||||
|
&.is-offset-one-fifth-desktop |
||||||
|
+ltr-property("margin", 20%, false) |
||||||
|
&.is-offset-two-fifths-desktop |
||||||
|
+ltr-property("margin", 40%, false) |
||||||
|
&.is-offset-three-fifths-desktop |
||||||
|
+ltr-property("margin", 60%, false) |
||||||
|
&.is-offset-four-fifths-desktop |
||||||
|
+ltr-property("margin", 80%, false) |
||||||
|
@for $i from 0 through 12 |
||||||
|
&.is-#{$i}-desktop |
||||||
|
flex: none |
||||||
|
width: percentage(divide($i, 12)) |
||||||
|
&.is-offset-#{$i}-desktop |
||||||
|
+ltr-property("margin", percentage(divide($i, 12)), false) |
||||||
|
+widescreen |
||||||
|
&.is-narrow-widescreen |
||||||
|
flex: none |
||||||
|
width: unset |
||||||
|
&.is-full-widescreen |
||||||
|
flex: none |
||||||
|
width: 100% |
||||||
|
&.is-three-quarters-widescreen |
||||||
|
flex: none |
||||||
|
width: 75% |
||||||
|
&.is-two-thirds-widescreen |
||||||
|
flex: none |
||||||
|
width: 66.6666% |
||||||
|
&.is-half-widescreen |
||||||
|
flex: none |
||||||
|
width: 50% |
||||||
|
&.is-one-third-widescreen |
||||||
|
flex: none |
||||||
|
width: 33.3333% |
||||||
|
&.is-one-quarter-widescreen |
||||||
|
flex: none |
||||||
|
width: 25% |
||||||
|
&.is-one-fifth-widescreen |
||||||
|
flex: none |
||||||
|
width: 20% |
||||||
|
&.is-two-fifths-widescreen |
||||||
|
flex: none |
||||||
|
width: 40% |
||||||
|
&.is-three-fifths-widescreen |
||||||
|
flex: none |
||||||
|
width: 60% |
||||||
|
&.is-four-fifths-widescreen |
||||||
|
flex: none |
||||||
|
width: 80% |
||||||
|
&.is-offset-three-quarters-widescreen |
||||||
|
+ltr-property("margin", 75%, false) |
||||||
|
&.is-offset-two-thirds-widescreen |
||||||
|
+ltr-property("margin", 66.6666%, false) |
||||||
|
&.is-offset-half-widescreen |
||||||
|
+ltr-property("margin", 50%, false) |
||||||
|
&.is-offset-one-third-widescreen |
||||||
|
+ltr-property("margin", 33.3333%, false) |
||||||
|
&.is-offset-one-quarter-widescreen |
||||||
|
+ltr-property("margin", 25%, false) |
||||||
|
&.is-offset-one-fifth-widescreen |
||||||
|
+ltr-property("margin", 20%, false) |
||||||
|
&.is-offset-two-fifths-widescreen |
||||||
|
+ltr-property("margin", 40%, false) |
||||||
|
&.is-offset-three-fifths-widescreen |
||||||
|
+ltr-property("margin", 60%, false) |
||||||
|
&.is-offset-four-fifths-widescreen |
||||||
|
+ltr-property("margin", 80%, false) |
||||||
|
@for $i from 0 through 12 |
||||||
|
&.is-#{$i}-widescreen |
||||||
|
flex: none |
||||||
|
width: percentage(divide($i, 12)) |
||||||
|
&.is-offset-#{$i}-widescreen |
||||||
|
+ltr-property("margin", percentage(divide($i, 12)), false) |
||||||
|
+fullhd |
||||||
|
&.is-narrow-fullhd |
||||||
|
flex: none |
||||||
|
width: unset |
||||||
|
&.is-full-fullhd |
||||||
|
flex: none |
||||||
|
width: 100% |
||||||
|
&.is-three-quarters-fullhd |
||||||
|
flex: none |
||||||
|
width: 75% |
||||||
|
&.is-two-thirds-fullhd |
||||||
|
flex: none |
||||||
|
width: 66.6666% |
||||||
|
&.is-half-fullhd |
||||||
|
flex: none |
||||||
|
width: 50% |
||||||
|
&.is-one-third-fullhd |
||||||
|
flex: none |
||||||
|
width: 33.3333% |
||||||
|
&.is-one-quarter-fullhd |
||||||
|
flex: none |
||||||
|
width: 25% |
||||||
|
&.is-one-fifth-fullhd |
||||||
|
flex: none |
||||||
|
width: 20% |
||||||
|
&.is-two-fifths-fullhd |
||||||
|
flex: none |
||||||
|
width: 40% |
||||||
|
&.is-three-fifths-fullhd |
||||||
|
flex: none |
||||||
|
width: 60% |
||||||
|
&.is-four-fifths-fullhd |
||||||
|
flex: none |
||||||
|
width: 80% |
||||||
|
&.is-offset-three-quarters-fullhd |
||||||
|
+ltr-property("margin", 75%, false) |
||||||
|
&.is-offset-two-thirds-fullhd |
||||||
|
+ltr-property("margin", 66.6666%, false) |
||||||
|
&.is-offset-half-fullhd |
||||||
|
+ltr-property("margin", 50%, false) |
||||||
|
&.is-offset-one-third-fullhd |
||||||
|
+ltr-property("margin", 33.3333%, false) |
||||||
|
&.is-offset-one-quarter-fullhd |
||||||
|
+ltr-property("margin", 25%, false) |
||||||
|
&.is-offset-one-fifth-fullhd |
||||||
|
+ltr-property("margin", 20%, false) |
||||||
|
&.is-offset-two-fifths-fullhd |
||||||
|
+ltr-property("margin", 40%, false) |
||||||
|
&.is-offset-three-fifths-fullhd |
||||||
|
+ltr-property("margin", 60%, false) |
||||||
|
&.is-offset-four-fifths-fullhd |
||||||
|
+ltr-property("margin", 80%, false) |
||||||
|
@for $i from 0 through 12 |
||||||
|
&.is-#{$i}-fullhd |
||||||
|
flex: none |
||||||
|
width: percentage(divide($i, 12)) |
||||||
|
&.is-offset-#{$i}-fullhd |
||||||
|
+ltr-property("margin", percentage(divide($i, 12)), false) |
||||||
|
|
||||||
|
.columns |
||||||
|
+ltr-property("margin", (-$column-gap), false) |
||||||
|
+ltr-property("margin", (-$column-gap)) |
||||||
|
margin-top: (-$column-gap) |
||||||
|
&:last-child |
||||||
|
margin-bottom: (-$column-gap) |
||||||
|
&:not(:last-child) |
||||||
|
margin-bottom: calc(1.5rem - #{$column-gap}) |
||||||
|
// Modifiers |
||||||
|
&.is-centered |
||||||
|
justify-content: center |
||||||
|
&.is-gapless |
||||||
|
+ltr-property("margin", 0, false) |
||||||
|
+ltr-property("margin", 0) |
||||||
|
margin-top: 0 |
||||||
|
& > .column |
||||||
|
margin: 0 |
||||||
|
padding: 0 !important |
||||||
|
&:not(:last-child) |
||||||
|
margin-bottom: 1.5rem |
||||||
|
&:last-child |
||||||
|
margin-bottom: 0 |
||||||
|
&.is-mobile |
||||||
|
display: flex |
||||||
|
&.is-multiline |
||||||
|
flex-wrap: wrap |
||||||
|
&.is-vcentered |
||||||
|
align-items: center |
||||||
|
// Responsiveness |
||||||
|
+tablet |
||||||
|
&:not(.is-desktop) |
||||||
|
display: flex |
||||||
|
+desktop |
||||||
|
// Modifiers |
||||||
|
&.is-desktop |
||||||
|
display: flex |
||||||
|
|
||||||
|
@if $variable-columns |
||||||
|
.columns.is-variable |
||||||
|
--columnGap: 0.75rem |
||||||
|
+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 |
||||||
|
&.is-#{$i} |
||||||
|
--columnGap: #{$i * 0.25rem} |
||||||
|
+mobile |
||||||
|
&.is-#{$i}-mobile |
||||||
|
--columnGap: #{$i * 0.25rem} |
||||||
|
+tablet |
||||||
|
&.is-#{$i}-tablet |
||||||
|
--columnGap: #{$i * 0.25rem} |
||||||
|
+tablet-only |
||||||
|
&.is-#{$i}-tablet-only |
||||||
|
--columnGap: #{$i * 0.25rem} |
||||||
|
+touch |
||||||
|
&.is-#{$i}-touch |
||||||
|
--columnGap: #{$i * 0.25rem} |
||||||
|
+desktop |
||||||
|
&.is-#{$i}-desktop |
||||||
|
--columnGap: #{$i * 0.25rem} |
||||||
|
+desktop-only |
||||||
|
&.is-#{$i}-desktop-only |
||||||
|
--columnGap: #{$i * 0.25rem} |
||||||
|
+widescreen |
||||||
|
&.is-#{$i}-widescreen |
||||||
|
--columnGap: #{$i * 0.25rem} |
||||||
|
+widescreen-only |
||||||
|
&.is-#{$i}-widescreen-only |
||||||
|
--columnGap: #{$i * 0.25rem} |
||||||
|
+fullhd |
||||||
|
&.is-#{$i}-fullhd |
||||||
|
--columnGap: #{$i * 0.25rem} |
@ -0,0 +1,36 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$tile-spacing: 0.75rem !default |
||||||
|
|
||||||
|
.tile |
||||||
|
align-items: stretch |
||||||
|
display: block |
||||||
|
flex-basis: 0 |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 1 |
||||||
|
min-height: min-content |
||||||
|
// Modifiers |
||||||
|
&.is-ancestor |
||||||
|
margin-left: $tile-spacing * -1 |
||||||
|
margin-right: $tile-spacing * -1 |
||||||
|
margin-top: $tile-spacing * -1 |
||||||
|
&:last-child |
||||||
|
margin-bottom: $tile-spacing * -1 |
||||||
|
&:not(:last-child) |
||||||
|
margin-bottom: $tile-spacing |
||||||
|
&.is-child |
||||||
|
margin: 0 !important |
||||||
|
&.is-parent |
||||||
|
padding: $tile-spacing |
||||||
|
&.is-vertical |
||||||
|
flex-direction: column |
||||||
|
& > .tile.is-child:not(:last-child) |
||||||
|
margin-bottom: 1.5rem !important |
||||||
|
// Responsiveness |
||||||
|
+tablet |
||||||
|
&:not(.is-child) |
||||||
|
display: flex |
||||||
|
@for $i from 1 through 12 |
||||||
|
&.is-#{$i} |
||||||
|
flex: none |
||||||
|
width: (divide($i, 12)) * 100% |
@ -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" |
@ -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 |
@ -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 |
@ -0,0 +1,10 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
.is-clearfix |
||||||
|
+clearfix |
||||||
|
|
||||||
|
.is-pulled-left |
||||||
|
float: left !important |
||||||
|
|
||||||
|
.is-pulled-right |
||||||
|
float: right !important |
@ -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 |
@ -0,0 +1,2 @@ |
|||||||
|
.is-clipped |
||||||
|
overflow: hidden !important |
@ -0,0 +1,7 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
.is-overlay |
||||||
|
@extend %overlay |
||||||
|
|
||||||
|
.is-relative |
||||||
|
position: relative !important |
@ -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 |
@ -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 |
@ -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 |
@ -0,0 +1,6 @@ |
|||||||
|
/* Bulma Layout */ |
||||||
|
@charset "utf-8" |
||||||
|
|
||||||
|
@import "hero" |
||||||
|
@import "section" |
||||||
|
@import "footer" |
@ -0,0 +1,11 @@ |
|||||||
|
@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 |
@ -0,0 +1,153 @@ |
|||||||
|
@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 |
||||||
|
flex-direction: column |
||||||
|
justify-content: space-between |
||||||
|
.navbar |
||||||
|
background: none |
||||||
|
.tabs |
||||||
|
ul |
||||||
|
border-bottom: none |
||||||
|
// 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):not(.pagination-link.is-current), |
||||||
|
strong |
||||||
|
color: inherit |
||||||
|
.title |
||||||
|
color: $color-invert |
||||||
|
.subtitle |
||||||
|
color: bulmaRgba($color-invert, 0.9) |
||||||
|
a:not(.button), |
||||||
|
strong |
||||||
|
color: $color-invert |
||||||
|
.navbar-menu |
||||||
|
+touch |
||||||
|
background-color: $color |
||||||
|
.navbar-item, |
||||||
|
.navbar-link |
||||||
|
color: bulmaRgba($color-invert, 0.7) |
||||||
|
a.navbar-item, |
||||||
|
.navbar-link |
||||||
|
&:hover, |
||||||
|
&.is-active |
||||||
|
background-color: bulmaDarken($color, 5%) |
||||||
|
color: $color-invert |
||||||
|
.tabs |
||||||
|
a |
||||||
|
color: $color-invert |
||||||
|
opacity: 0.9 |
||||||
|
&:hover |
||||||
|
opacity: 1 |
||||||
|
li |
||||||
|
&.is-active a |
||||||
|
color: $color !important |
||||||
|
opacity: 1 |
||||||
|
&.is-boxed, |
||||||
|
&.is-toggle |
||||||
|
a |
||||||
|
color: $color-invert |
||||||
|
&:hover |
||||||
|
background-color: bulmaRgba($scheme-invert, 0.1) |
||||||
|
li.is-active a |
||||||
|
&, |
||||||
|
&:hover |
||||||
|
background-color: $color-invert |
||||||
|
border-color: $color-invert |
||||||
|
color: $color |
||||||
|
// Modifiers |
||||||
|
@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: $hero-body-padding-small |
||||||
|
&.is-medium |
||||||
|
+tablet |
||||||
|
.hero-body |
||||||
|
padding: $hero-body-padding-medium |
||||||
|
&.is-large |
||||||
|
+tablet |
||||||
|
.hero-body |
||||||
|
padding: $hero-body-padding-large |
||||||
|
&.is-halfheight, |
||||||
|
&.is-fullheight, |
||||||
|
&.is-fullheight-with-navbar |
||||||
|
.hero-body |
||||||
|
align-items: center |
||||||
|
display: flex |
||||||
|
& > .container |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 1 |
||||||
|
&.is-halfheight |
||||||
|
min-height: 50vh |
||||||
|
&.is-fullheight |
||||||
|
min-height: 100vh |
||||||
|
|
||||||
|
// Components |
||||||
|
|
||||||
|
.hero-video |
||||||
|
@extend %overlay |
||||||
|
overflow: hidden |
||||||
|
video |
||||||
|
left: 50% |
||||||
|
min-height: 100% |
||||||
|
min-width: 100% |
||||||
|
position: absolute |
||||||
|
top: 50% |
||||||
|
transform: translate3d(-50%, -50%, 0) |
||||||
|
// Modifiers |
||||||
|
&.is-transparent |
||||||
|
opacity: 0.3 |
||||||
|
// Responsiveness |
||||||
|
+mobile |
||||||
|
display: none |
||||||
|
|
||||||
|
.hero-buttons |
||||||
|
margin-top: 1.5rem |
||||||
|
// Responsiveness |
||||||
|
+mobile |
||||||
|
.button |
||||||
|
display: flex |
||||||
|
&:not(:last-child) |
||||||
|
margin-bottom: 0.75rem |
||||||
|
+tablet |
||||||
|
display: flex |
||||||
|
justify-content: center |
||||||
|
.button:not(:last-child) |
||||||
|
+ltr-property("margin", 1.5rem) |
||||||
|
|
||||||
|
// Containers |
||||||
|
|
||||||
|
.hero-head, |
||||||
|
.hero-foot |
||||||
|
flex-grow: 0 |
||||||
|
flex-shrink: 0 |
||||||
|
|
||||||
|
.hero-body |
||||||
|
flex-grow: 1 |
||||||
|
flex-shrink: 0 |
||||||
|
padding: $hero-body-padding |
||||||
|
+tablet |
||||||
|
padding: $hero-body-padding-tablet |
@ -0,0 +1,17 @@ |
|||||||
|
@import "../utilities/mixins" |
||||||
|
|
||||||
|
$section-padding: 3rem 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 |
||||||
|
&.is-large |
||||||
|
padding: $section-padding-large |
Binary file not shown.
@ -0,0 +1,9 @@ |
|||||||
|
/* Bulma Utilities */ |
||||||
|
@charset "utf-8" |
||||||
|
|
||||||
|
@import "initial-variables" |
||||||
|
@import "functions" |
||||||
|
@import "derived-variables" |
||||||
|
@import "mixins" |
||||||
|
@import "controls" |
||||||
|
@import "extends" |
@ -0,0 +1 @@ |
|||||||
|
@warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead." |
@ -0,0 +1,49 @@ |
|||||||
|
@import "derived-variables" |
||||||
|
|
||||||
|
$control-radius: $radius !default |
||||||
|
$control-radius-small: $radius-small !default |
||||||
|
|
||||||
|
$control-border-width: 1px !default |
||||||
|
|
||||||
|
$control-height: 2.5em !default |
||||||
|
$control-line-height: 1.5 !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 |
||||||
|
-webkit-appearance: none |
||||||
|
align-items: center |
||||||
|
border: $control-border-width solid transparent |
||||||
|
border-radius: $control-radius |
||||||
|
box-shadow: none |
||||||
|
display: inline-flex |
||||||
|
font-size: $size-normal |
||||||
|
height: $control-height |
||||||
|
justify-content: flex-start |
||||||
|
line-height: $control-line-height |
||||||
|
padding-bottom: $control-padding-vertical |
||||||
|
padding-left: $control-padding-horizontal |
||||||
|
padding-right: $control-padding-horizontal |
||||||
|
padding-top: $control-padding-vertical |
||||||
|
position: relative |
||||||
|
vertical-align: top |
||||||
|
// States |
||||||
|
&:focus, |
||||||
|
&.is-focused, |
||||||
|
&:active, |
||||||
|
&.is-active |
||||||
|
outline: none |
||||||
|
&[disabled], |
||||||
|
fieldset[disabled] & |
||||||
|
cursor: not-allowed |
||||||
|
|
||||||
|
// The controls sizes use mixins so they can be used at different breakpoints |
||||||
|
=control-small |
||||||
|
border-radius: $control-radius-small |
||||||
|
font-size: $size-small |
||||||
|
=control-medium |
||||||
|
font-size: $size-medium |
||||||
|
=control-large |
||||||
|
font-size: $size-large |
@ -0,0 +1,114 @@ |
|||||||
|
@import "initial-variables" |
||||||
|
@import "functions" |
||||||
|
|
||||||
|
$primary: $turquoise !default |
||||||
|
|
||||||
|
$info: $cyan !default |
||||||
|
$success: $green !default |
||||||
|
$warning: $yellow !default |
||||||
|
$danger: $red !default |
||||||
|
|
||||||
|
$light: $white-ter !default |
||||||
|
$dark: $grey-darker !default |
||||||
|
|
||||||
|
// Invert colors |
||||||
|
|
||||||
|
$orange-invert: findColorInvert($orange) !default |
||||||
|
$yellow-invert: findColorInvert($yellow) !default |
||||||
|
$green-invert: findColorInvert($green) !default |
||||||
|
$turquoise-invert: findColorInvert($turquoise) !default |
||||||
|
$cyan-invert: findColorInvert($cyan) !default |
||||||
|
$blue-invert: findColorInvert($blue) !default |
||||||
|
$purple-invert: findColorInvert($purple) !default |
||||||
|
$red-invert: findColorInvert($red) !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 |
||||||
|
|
||||||
|
$text: $grey-dark !default |
||||||
|
$text-invert: findColorInvert($text) !default |
||||||
|
$text-light: $grey !default |
||||||
|
$text-strong: $grey-darker !default |
||||||
|
|
||||||
|
// Code colors |
||||||
|
|
||||||
|
$code: darken($red, 15%) !default |
||||||
|
$code-background: $background !default |
||||||
|
|
||||||
|
$pre: $text !default |
||||||
|
$pre-background: $background !default |
||||||
|
|
||||||
|
// Link colors |
||||||
|
|
||||||
|
$link: $blue !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 |
||||||
|
$link-hover-border: $grey-light !default |
||||||
|
|
||||||
|
$link-focus: $grey-darker !default |
||||||
|
$link-focus-border: $blue !default |
||||||
|
|
||||||
|
$link-active: $grey-darker !default |
||||||
|
$link-active-border: $grey-dark !default |
||||||
|
|
||||||
|
// Typography |
||||||
|
|
||||||
|
$family-primary: $family-sans-serif !default |
||||||
|
$family-secondary: $family-sans-serif !default |
||||||
|
$family-code: $family-monospace !default |
||||||
|
|
||||||
|
$size-small: $size-7 !default |
||||||
|
$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, $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 |
@ -0,0 +1,25 @@ |
|||||||
|
@import "mixins" |
||||||
|
|
||||||
|
%control |
||||||
|
+control |
||||||
|
|
||||||
|
%unselectable |
||||||
|
+unselectable |
||||||
|
|
||||||
|
%arrow |
||||||
|
+arrow |
||||||
|
|
||||||
|
%block |
||||||
|
+block |
||||||
|
|
||||||
|
%delete |
||||||
|
+delete |
||||||
|
|
||||||
|
%loader |
||||||
|
+loader |
||||||
|
|
||||||
|
%overlay |
||||||
|
+overlay |
||||||
|
|
||||||
|
%reset |
||||||
|
+reset |
@ -0,0 +1,136 @@ |
|||||||
|
@function mergeColorMaps($bulma-colors, $custom-colors) |
||||||
|
// We return at least Bulma's hard-coded colors |
||||||
|
$merged-colors: $bulma-colors |
||||||
|
|
||||||
|
// We want a map as input |
||||||
|
@if type-of($custom-colors) == 'map' |
||||||
|
@each $name, $components in $custom-colors |
||||||
|
// 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 |
||||||
|
// 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) |
||||||
|
|
||||||
|
$value: ($color-base, $color-invert, $color-light, $color-dark) |
||||||
|
|
||||||
|
// We only want to merge the map if the color base is an actual color |
||||||
|
@if type-of($color-base) == 'color' |
||||||
|
// 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 |
||||||
|
|
||||||
|
@function powerNumber($number, $exp) |
||||||
|
$value: 1 |
||||||
|
@if $exp > 0 |
||||||
|
@for $i from 1 through $exp |
||||||
|
$value: $value * $number |
||||||
|
@else if $exp < 0 |
||||||
|
@for $i from 1 through -$exp |
||||||
|
$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: divide($value, 255) |
||||||
|
@if $value < 0.03928 |
||||||
|
$value: divide($value, 12.92) |
||||||
|
@else |
||||||
|
$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) |
||||||
|
|
||||||
|
@function findColorInvert($color) |
||||||
|
@if (colorLuminance($color) > 0.55) |
||||||
|
@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 |
@ -0,0 +1,78 @@ |
|||||||
|
// Colors |
||||||
|
|
||||||
|
$black: hsl(0, 0%, 4%) !default |
||||||
|
$black-bis: hsl(0, 0%, 7%) !default |
||||||
|
$black-ter: hsl(0, 0%, 14%) !default |
||||||
|
|
||||||
|
$grey-darker: hsl(0, 0%, 21%) !default |
||||||
|
$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(44, 100%, 77%) !default |
||||||
|
$green: hsl(153, 53%, 53%) !default |
||||||
|
$turquoise: hsl(171, 100%, 41%) !default |
||||||
|
$cyan: hsl(207, 61%, 53%) !default |
||||||
|
$blue: hsl(229, 53%, 53%) !default |
||||||
|
$purple: hsl(271, 100%, 71%) !default |
||||||
|
$red: hsl(348, 86%, 61%) !default |
||||||
|
|
||||||
|
// Typography |
||||||
|
|
||||||
|
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default |
||||||
|
$family-monospace: monospace !default |
||||||
|
$render-mode: optimizeLegibility !default |
||||||
|
|
||||||
|
$size-1: 3rem !default |
||||||
|
$size-2: 2.5rem !default |
||||||
|
$size-3: 2rem !default |
||||||
|
$size-4: 1.5rem !default |
||||||
|
$size-5: 1.25rem !default |
||||||
|
$size-6: 1rem !default |
||||||
|
$size-7: 0.75rem !default |
||||||
|
|
||||||
|
$weight-light: 300 !default |
||||||
|
$weight-normal: 400 !default |
||||||
|
$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: 32px !default |
||||||
|
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16 |
||||||
|
$tablet: 769px !default |
||||||
|
// 960px container + 4rem |
||||||
|
$desktop: 960px + (2 * $gap) !default |
||||||
|
// 1152px container + 4rem |
||||||
|
$widescreen: 1152px + (2 * $gap) !default |
||||||
|
$widescreen-enabled: true !default |
||||||
|
// 1344px container + 4rem |
||||||
|
$fullhd: 1344px + (2 * $gap) !default |
||||||
|
$fullhd-enabled: true !default |
||||||
|
|
||||||
|
// Miscellaneous |
||||||
|
|
||||||
|
$easing: ease-out !default |
||||||
|
$radius-small: 2px !default |
||||||
|
$radius: 4px !default |
||||||
|
$radius-large: 6px !default |
||||||
|
$radius-rounded: 9999px !default |
||||||
|
$speed: 86ms !default |
||||||
|
|
||||||
|
// Flags |
||||||
|
|
||||||
|
$variable-columns: true !default |
||||||
|
$rtl: false !default |
@ -0,0 +1,280 @@ |
|||||||
|
@import "derived-variables" |
||||||
|
|
||||||
|
=clearfix |
||||||
|
&::after |
||||||
|
clear: both |
||||||
|
content: " " |
||||||
|
display: table |
||||||
|
|
||||||
|
=center($width, $height: 0) |
||||||
|
position: absolute |
||||||
|
@if $height != 0 |
||||||
|
left: calc(50% - (#{$width} * 0.5)) |
||||||
|
top: calc(50% - (#{$height} * 0.5)) |
||||||
|
@else |
||||||
|
left: calc(50% - (#{$width} * 0.5)) |
||||||
|
top: calc(50% - (#{$width} * 0.5)) |
||||||
|
|
||||||
|
=fa($size, $dimensions) |
||||||
|
display: inline-block |
||||||
|
font-size: $size |
||||||
|
height: $dimensions |
||||||
|
line-height: $dimensions |
||||||
|
text-align: center |
||||||
|
vertical-align: top |
||||||
|
width: $dimensions |
||||||
|
|
||||||
|
=hamburger($dimensions) |
||||||
|
cursor: pointer |
||||||
|
display: block |
||||||
|
height: $dimensions |
||||||
|
position: relative |
||||||
|
width: $dimensions |
||||||
|
span |
||||||
|
background-color: currentColor |
||||||
|
display: block |
||||||
|
height: 1px |
||||||
|
left: calc(50% - 8px) |
||||||
|
position: absolute |
||||||
|
transform-origin: center |
||||||
|
transition-duration: $speed |
||||||
|
transition-property: background-color, opacity, transform |
||||||
|
transition-timing-function: $easing |
||||||
|
width: 16px |
||||||
|
&:nth-child(1) |
||||||
|
top: calc(50% - 6px) |
||||||
|
&:nth-child(2) |
||||||
|
top: calc(50% - 1px) |
||||||
|
&:nth-child(3) |
||||||
|
top: calc(50% + 4px) |
||||||
|
&:hover |
||||||
|
background-color: bulmaRgba(black, 0.05) |
||||||
|
// Modifers |
||||||
|
&.is-active |
||||||
|
span |
||||||
|
&:nth-child(1) |
||||||
|
transform: translateY(5px) rotate(45deg) |
||||||
|
&:nth-child(2) |
||||||
|
opacity: 0 |
||||||
|
&:nth-child(3) |
||||||
|
transform: translateY(-5px) rotate(-45deg) |
||||||
|
|
||||||
|
=overflow-touch |
||||||
|
-webkit-overflow-scrolling: touch |
||||||
|
|
||||||
|
=placeholder |
||||||
|
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input' |
||||||
|
@each $placeholder in $placeholders |
||||||
|
&:#{$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) |
||||||
|
@media screen and (min-width: $device) |
||||||
|
@content |
||||||
|
|
||||||
|
=until($device) |
||||||
|
@media screen and (max-width: $device - 1px) |
||||||
|
@content |
||||||
|
|
||||||
|
=mobile |
||||||
|
@media screen and (max-width: $tablet - 1px) |
||||||
|
@content |
||||||
|
|
||||||
|
=tablet |
||||||
|
@media screen and (min-width: $tablet), print |
||||||
|
@content |
||||||
|
|
||||||
|
=tablet-only |
||||||
|
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px) |
||||||
|
@content |
||||||
|
|
||||||
|
=touch |
||||||
|
@media screen and (max-width: $desktop - 1px) |
||||||
|
@content |
||||||
|
|
||||||
|
=desktop |
||||||
|
@media screen and (min-width: $desktop) |
||||||
|
@content |
||||||
|
|
||||||
|
=desktop-only |
||||||
|
@if $widescreen-enabled |
||||||
|
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) |
||||||
|
@content |
||||||
|
|
||||||
|
=until-widescreen |
||||||
|
@if $widescreen-enabled |
||||||
|
@media screen and (max-width: $widescreen - 1px) |
||||||
|
@content |
||||||
|
|
||||||
|
=widescreen |
||||||
|
@if $widescreen-enabled |
||||||
|
@media screen and (min-width: $widescreen) |
||||||
|
@content |
||||||
|
|
||||||
|
=widescreen-only |
||||||
|
@if $widescreen-enabled and $fullhd-enabled |
||||||
|
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) |
||||||
|
@content |
||||||
|
|
||||||
|
=until-fullhd |
||||||
|
@if $fullhd-enabled |
||||||
|
@media screen and (max-width: $fullhd - 1px) |
||||||
|
@content |
||||||
|
|
||||||
|
=fullhd |
||||||
|
@if $fullhd-enabled |
||||||
|
@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 |
||||||
|
-webkit-touch-callout: none |
||||||
|
-webkit-user-select: none |
||||||
|
-moz-user-select: none |
||||||
|
-ms-user-select: none |
||||||
|
user-select: none |
||||||
|
|
||||||
|
=arrow($color: transparent) |
||||||
|
border: 3px solid $color |
||||||
|
border-radius: 2px |
||||||
|
border-right: 0 |
||||||
|
border-top: 0 |
||||||
|
content: " " |
||||||
|
display: block |
||||||
|
height: 0.625em |
||||||
|
margin-top: -0.4375em |
||||||
|
pointer-events: none |
||||||
|
position: absolute |
||||||
|
top: 50% |
||||||
|
transform: rotate(-45deg) |
||||||
|
transform-origin: center |
||||||
|
width: 0.625em |
||||||
|
|
||||||
|
=block($spacing: $block-spacing) |
||||||
|
&:not(:last-child) |
||||||
|
margin-bottom: $spacing |
||||||
|
|
||||||
|
=delete |
||||||
|
+unselectable |
||||||
|
-moz-appearance: none |
||||||
|
-webkit-appearance: none |
||||||
|
background-color: bulmaRgba($scheme-invert, 0.2) |
||||||
|
border: none |
||||||
|
border-radius: $radius-rounded |
||||||
|
cursor: pointer |
||||||
|
pointer-events: auto |
||||||
|
display: inline-block |
||||||
|
flex-grow: 0 |
||||||
|
flex-shrink: 0 |
||||||
|
font-size: 0 |
||||||
|
height: 20px |
||||||
|
max-height: 20px |
||||||
|
max-width: 20px |
||||||
|
min-height: 20px |
||||||
|
min-width: 20px |
||||||
|
outline: none |
||||||
|
position: relative |
||||||
|
vertical-align: top |
||||||
|
width: 20px |
||||||
|
&::before, |
||||||
|
&::after |
||||||
|
background-color: $scheme-main |
||||||
|
content: "" |
||||||
|
display: block |
||||||
|
left: 50% |
||||||
|
position: absolute |
||||||
|
top: 50% |
||||||
|
transform: translateX(-50%) translateY(-50%) rotate(45deg) |
||||||
|
transform-origin: center center |
||||||
|
&::before |
||||||
|
height: 2px |
||||||
|
width: 50% |
||||||
|
&::after |
||||||
|
height: 50% |
||||||
|
width: 2px |
||||||
|
&:hover, |
||||||
|
&:focus |
||||||
|
background-color: bulmaRgba($scheme-invert, 0.3) |
||||||
|
&:active |
||||||
|
background-color: bulmaRgba($scheme-invert, 0.4) |
||||||
|
// Sizes |
||||||
|
&.is-small |
||||||
|
height: 16px |
||||||
|
max-height: 16px |
||||||
|
max-width: 16px |
||||||
|
min-height: 16px |
||||||
|
min-width: 16px |
||||||
|
width: 16px |
||||||
|
&.is-medium |
||||||
|
height: 24px |
||||||
|
max-height: 24px |
||||||
|
max-width: 24px |
||||||
|
min-height: 24px |
||||||
|
min-width: 24px |
||||||
|
width: 24px |
||||||
|
&.is-large |
||||||
|
height: 32px |
||||||
|
max-height: 32px |
||||||
|
max-width: 32px |
||||||
|
min-height: 32px |
||||||
|
min-width: 32px |
||||||
|
width: 32px |
||||||
|
|
||||||
|
=loader |
||||||
|
animation: spinAround 500ms infinite linear |
||||||
|
border: 2px solid $grey-lighter |
||||||
|
border-radius: $radius-rounded |
||||||
|
border-right-color: transparent |
||||||
|
border-top-color: transparent |
||||||
|
content: "" |
||||||
|
display: block |
||||||
|
height: 1em |
||||||
|
position: relative |
||||||
|
width: 1em |
||||||
|
|
||||||
|
=overlay($offset: 0) |
||||||
|
bottom: $offset |
||||||
|
left: $offset |
||||||
|
position: absolute |
||||||
|
right: $offset |
||||||
|
top: $offset |
||||||
|
|
@ -0,0 +1,11 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"module": "system", |
||||||
|
"noImplicitAny": true, |
||||||
|
"removeComments": true, |
||||||
|
"preserveConstEnums": true, |
||||||
|
"outFile": "../../.intermediate/app.js", |
||||||
|
"sourceMap": false |
||||||
|
}, |
||||||
|
"include": ["./**/*", "../../.intermediate/app/**/*"] |
||||||
|
} |
@ -0,0 +1,12 @@ |
|||||||
|
.modal-background { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.modal-card-head { |
||||||
|
border-top-left-radius: 0; |
||||||
|
border-top-right-radius: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.modal-card { |
||||||
|
box-shadow: 4px 3px 10px 3px rgba(0,0,0,0.7); |
||||||
|
} |
@ -0,0 +1,133 @@ |
|||||||
|
<section class="section"> |
||||||
|
<div class="container"> |
||||||
|
<div class="simulation-parameters"> |
||||||
|
<div class="wide-label"> |
||||||
|
<div class="field is-horizontal"> |
||||||
|
<div class="field-label is-normal"> |
||||||
|
<label class="label">Capacité de la batterie</label> |
||||||
|
</div> |
||||||
|
<div class="field-body"> |
||||||
|
<div class="field has-addons"> |
||||||
|
<p class="control is-expanded"> |
||||||
|
<input name="battery-capacity" class="input" type="number" min="1" value="700"/> |
||||||
|
</p> |
||||||
|
<p class="control"> |
||||||
|
<a class="button is-static">kWh</a> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="field is-horizontal"> |
||||||
|
<div class="field-label is-normal"> |
||||||
|
<label class="label">Poids (bagages + passagers)</label> |
||||||
|
</div> |
||||||
|
<div class="field-body"> |
||||||
|
<div class="field has-addons"> |
||||||
|
<p class="control is-expanded"> |
||||||
|
<input name="additional-weight" class="input" type="number" min="1" value="130"/> |
||||||
|
</p> |
||||||
|
<p class="control"> |
||||||
|
<a class="button is-static">kg</a> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="field is-horizontal"> |
||||||
|
<div class="field-label is-normal"> |
||||||
|
<label class="label">Zone climatique</label> |
||||||
|
</div> |
||||||
|
<div class="field-body"> |
||||||
|
<div class="field has-addons"> |
||||||
|
<div class="control is-expanded"> |
||||||
|
<div class="select is-fullwidth"> |
||||||
|
<select id="zone-selector"> |
||||||
|
<option>H1a</option> |
||||||
|
<option>H1b</option> |
||||||
|
<option>H1c</option> |
||||||
|
<option>H2a</option> |
||||||
|
<option>H2b</option> |
||||||
|
<option>H2c</option> |
||||||
|
<option>H2d</option> |
||||||
|
<option>H3</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<p class="control"> |
||||||
|
<a class="button" data-activate-modal="zones-map-modal">Choix sur la carte...</a> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="field is-horizontal"> |
||||||
|
<div class="field-label is-normal"> |
||||||
|
<label class="label">Distance quotidienne</label> |
||||||
|
</div> |
||||||
|
<div class="field-body"> |
||||||
|
<div class="field has-addons"> |
||||||
|
<p class="control is-expanded"> |
||||||
|
<input name="daily-distance" class="input" type="number" min="1" value="10"> |
||||||
|
</p> |
||||||
|
<p class="control"> |
||||||
|
<a class="button is-static">km/jour</a> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="field is-horizontal"> |
||||||
|
<div class="field-label is-normal"> |
||||||
|
<label class="label">Dénivelé positif quotidien</label> |
||||||
|
</div> |
||||||
|
<div class="field-body"> |
||||||
|
<div class="field has-addons"> |
||||||
|
<p class="control is-expanded"> |
||||||
|
<input name="daily-elevation" class="input" type="number" min="0" value="100"> |
||||||
|
</p> |
||||||
|
<p class="control"> |
||||||
|
<a class="button is-static">m/jour</a> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="field is-horizontal"> |
||||||
|
<div class="field-label is-normal"> |
||||||
|
</div> |
||||||
|
<div class="field-body"> |
||||||
|
<div class="field"> |
||||||
|
<p class="control is-expanded"> |
||||||
|
<a class="button is-primary is-fullwidth">Simuler</a> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
|
||||||
|
<footer class="footer"> |
||||||
|
<div class="content has-text-centered"> |
||||||
|
<p> |
||||||
|
Ce simulateur est un logiciel libre sous licence <a href="https://gitea.youb.fr/youen/vhelio-simulator/raw/branch/master/AGPLv3.txt">AGPL</a><br/> |
||||||
|
Développé par l'association <a href="https://vhelio.org/association/">« Vélo Solaire Pour Tous »</a><br/> |
||||||
|
<a href="https://gitea.youb.fr/youen/vhelio-simulator">Accéder au code source</a> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</footer> |
||||||
|
|
||||||
|
<div id="zones-map-modal" class="modal"> |
||||||
|
<div class="modal-background"></div> |
||||||
|
<div class="modal-card"> |
||||||
|
<header class="modal-card-head"> |
||||||
|
<p class="modal-card-title">Choisissez votre zone climatique</p> |
||||||
|
<button class="delete" aria-label="close"></button> |
||||||
|
</header> |
||||||
|
<section class="modal-card-body"> |
||||||
|
<svg id="zones-map" width="595" height="564" version="1.0"></svg> |
||||||
|
</section> |
||||||
|
</div> |
||||||
|
</div> |
@ -0,0 +1,26 @@ |
|||||||
|
document.addEventListener('DOMContentLoaded', function() { |
||||||
|
let frame = <HTMLIFrameElement>document.querySelector('iframe#simulator'); |
||||||
|
let doc = frame.contentWindow.document; |
||||||
|
|
||||||
|
frame.style.width = '100%'; |
||||||
|
frame.style.border = 'none'; |
||||||
|
frame.setAttribute('scrolling', 'no'); |
||||||
|
|
||||||
|
// Insert HTML code in the iframe
|
||||||
|
doc.open(); |
||||||
|
doc.write((<any>window)['simulator.html']); |
||||||
|
doc.close(); |
||||||
|
|
||||||
|
// Load iframe specific CSS
|
||||||
|
doc.head.innerHTML += (<any>window)['simulator-in-iframe.css']; |
||||||
|
|
||||||
|
// Add script inside frame
|
||||||
|
let script = doc.createElement('script'); |
||||||
|
script.type = "text/javascript"; |
||||||
|
script.innerText = (<any>window)['app.js']; |
||||||
|
doc.body.appendChild(script); |
||||||
|
|
||||||
|
setInterval(() => { |
||||||
|
frame.height = Math.max(doc.body.scrollHeight, 700) + 'px'; |
||||||
|
}, 100); |
||||||
|
}); |
@ -0,0 +1,21 @@ |
|||||||
|
let fs = require('fs') |
||||||
|
|
||||||
|
function embedJs(src, dst) { |
||||||
|
fs.readFile(src, 'utf8', function(err, data) { |
||||||
|
if(err) throw err; |
||||||
|
|
||||||
|
data = data.replace(/\\"/g, '\\\\"'); |
||||||
|
data = "(<any>window)['"+src.replace(/^.*[\\\/]/, '')+"'] = `" + data + "`;"; |
||||||
|
|
||||||
|
fs.writeFile(dst, data, function(err) { |
||||||
|
if(err) throw err; |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
let toolsDir = __dirname; |
||||||
|
let dataDir = toolsDir + "/../data"; |
||||||
|
let srcDir = toolsDir + "/../src"; |
||||||
|
let intermediateDir = toolsDir + "/../.intermediate"; |
||||||
|
|
||||||
|
embedJs(intermediateDir+'/app.js', intermediateDir+'/app.js.ts'); |
@ -1,145 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html> |
|
||||||
<head> |
|
||||||
<meta charset="utf-8"> |
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
||||||
<link rel="stylesheet" href="simulator.css"/> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<section class="section"> |
|
||||||
<div class="container"> |
|
||||||
<div class="simulation-parameters"> |
|
||||||
<div class="wide-label"> |
|
||||||
<div class="field is-horizontal"> |
|
||||||
<div class="field-label is-normal"> |
|
||||||
<label class="label">Capacité de la batterie</label> |
|
||||||
</div> |
|
||||||
<div class="field-body"> |
|
||||||
<div class="field has-addons"> |
|
||||||
<p class="control is-expanded"> |
|
||||||
<input name="battery-capacity" class="input" type="number" min="1" value="700"/> |
|
||||||
</p> |
|
||||||
<p class="control"> |
|
||||||
<a class="button is-static">kWh</a> |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="field is-horizontal"> |
|
||||||
<div class="field-label is-normal"> |
|
||||||
<label class="label">Poids (bagages + passagers)</label> |
|
||||||
</div> |
|
||||||
<div class="field-body"> |
|
||||||
<div class="field has-addons"> |
|
||||||
<p class="control is-expanded"> |
|
||||||
<input name="additional-weight" class="input" type="number" min="1" value="130"/> |
|
||||||
</p> |
|
||||||
<p class="control"> |
|
||||||
<a class="button is-static">kg</a> |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="field is-horizontal"> |
|
||||||
<div class="field-label is-normal"> |
|
||||||
<label class="label">Zone climatique</label> |
|
||||||
</div> |
|
||||||
<div class="field-body"> |
|
||||||
<div class="field has-addons"> |
|
||||||
<div class="control is-expanded"> |
|
||||||
<div class="select is-fullwidth"> |
|
||||||
<select id="zone-selector"> |
|
||||||
<option>H1a</option> |
|
||||||
<option>H1b</option> |
|
||||||
<option>H1c</option> |
|
||||||
<option>H2a</option> |
|
||||||
<option>H2b</option> |
|
||||||
<option>H2c</option> |
|
||||||
<option>H2d</option> |
|
||||||
<option>H3</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<p class="control"> |
|
||||||
<a class="button" data-activate-modal="zones-map-modal">Choix sur la carte...</a> |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="field is-horizontal"> |
|
||||||
<div class="field-label is-normal"> |
|
||||||
<label class="label">Distance quotidienne</label> |
|
||||||
</div> |
|
||||||
<div class="field-body"> |
|
||||||
<div class="field has-addons"> |
|
||||||
<p class="control is-expanded"> |
|
||||||
<input name="daily-distance" class="input" type="number" min="1" value="10"> |
|
||||||
</p> |
|
||||||
<p class="control"> |
|
||||||
<a class="button is-static">km/jour</a> |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="field is-horizontal"> |
|
||||||
<div class="field-label is-normal"> |
|
||||||
<label class="label">Dénivelé positif quotidien</label> |
|
||||||
</div> |
|
||||||
<div class="field-body"> |
|
||||||
<div class="field has-addons"> |
|
||||||
<p class="control is-expanded"> |
|
||||||
<input name="daily-elevation" class="input" type="number" min="0" value="100"> |
|
||||||
</p> |
|
||||||
<p class="control"> |
|
||||||
<a class="button is-static">m/jour</a> |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="field is-horizontal"> |
|
||||||
<div class="field-label is-normal"> |
|
||||||
</div> |
|
||||||
<div class="field-body"> |
|
||||||
<div class="field"> |
|
||||||
<p class="control is-expanded"> |
|
||||||
<a class="button is-primary is-fullwidth">Simuler</a> |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
|
|
||||||
<footer class="footer"> |
|
||||||
<div class="content has-text-centered"> |
|
||||||
<p> |
|
||||||
Ce simulateur est un logiciel libre sous licence <a href="https://gitea.youb.fr/youen/vhelio-simulator/raw/branch/master/AGPLv3.txt">AGPL</a><br/> |
|
||||||
Développé par l'association <a href="https://vhelio.org/association/">« Vélo Solaire Pour Tous »</a><br/> |
|
||||||
<a href="https://gitea.youb.fr/youen/vhelio-simulator">Accéder au code source</a> |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
</footer> |
|
||||||
|
|
||||||
<div id="zones-map-modal" class="modal"> |
|
||||||
<div class="modal-background"></div> |
|
||||||
<div class="modal-card"> |
|
||||||
<header class="modal-card-head"> |
|
||||||
<p class="modal-card-title">Choisissez votre zone climatique</p> |
|
||||||
<button class="delete" aria-label="close"></button> |
|
||||||
</header> |
|
||||||
<section class="modal-card-body"> |
|
||||||
<svg id="zones-map" width="595" height="564" version="1.0"></svg> |
|
||||||
</section> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<script type="text/javascript" src="simulator.js"></script> |
|
||||||
</body> |
|
||||||
</html> |
|
@ -0,0 +1,19 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||||
|
|
||||||
|
<style> |
||||||
|
body { margin: 0; } |
||||||
|
</style> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<h1>Simulateur de vhélio</h1> |
||||||
|
<p>Estimez votre autonomie et votre consommation d'énergie</p> |
||||||
|
|
||||||
|
<iframe id="simulator"></iframe> |
||||||
|
|
||||||
|
<script type="text/javascript" src="simulator.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
Loading…
Reference in new issue