Merge branch 'master' into state-monad
|
@ -30,3 +30,15 @@ smex-items
|
|||
elpa/
|
||||
bm-repository
|
||||
.fpkg-v3/
|
||||
website/__pycache__/
|
||||
website/*.pyc
|
||||
website/.sass-cache/
|
||||
website/theme/static/css/bulma.css
|
||||
website/output/
|
||||
website/public/
|
||||
website/*.old.jpg
|
||||
website/pelican-plugins/
|
||||
website/.*.swp
|
||||
website/*~
|
||||
#*#
|
||||
|
||||
|
|
|
@ -11,21 +11,19 @@ stages:
|
|||
script:
|
||||
- cd ~/.fg42/ && fg42 -nw --script build.el
|
||||
|
||||
.build-v3:
|
||||
image: debian:stable-slim
|
||||
stage: build
|
||||
before_script:
|
||||
- apt update && apt install -y make wget git emacs sudo
|
||||
- git clone -b $CI_COMMIT_REF_NAME https://gitlab.com/FG42/FG42 ~/.fg42/
|
||||
build-branches:
|
||||
extends: .build
|
||||
script:
|
||||
- ~/.fg42/bin/fbt build
|
||||
|
||||
build-branches-v3:
|
||||
extends: .build-v3
|
||||
- cd /root/.fg42/ && fg42 -nw --script build.el
|
||||
- cd /root/ && tar zcf ~/fg42.$CI_COMMIT_REF_NAME.tar.gz .fg42/
|
||||
- mv ~/fg42.$CI_COMMIT_REF_NAME.tar.gz /builds/$CI_PROJECT_PATH/
|
||||
artifacts:
|
||||
name: "fg42.$CI_COMMIT_REF_SLUG"
|
||||
when: on_success
|
||||
paths:
|
||||
- fg42.$CI_COMMIT_REF_NAME.tar.gz
|
||||
only:
|
||||
- branches
|
||||
except:
|
||||
- tags
|
||||
|
||||
build-branches:
|
||||
extends: .build
|
||||
|
|
|
@ -258,6 +258,7 @@
|
|||
(ability yaml ()
|
||||
"YAML editor."
|
||||
(require 'yaml-mode)
|
||||
(add-hook 'yaml-mode-hook (lambda () (interactive) (whitespace-mode 1)))
|
||||
(add-to-list 'auto-mode-alist '("\\.yml\\'" . yaml-mode))
|
||||
(add-to-list 'auto-mode-alist '("\\.sls\\'" . yaml-mode)))
|
||||
|
||||
|
|
|
@ -290,8 +290,9 @@
|
|||
|
||||
(ido-mode t)
|
||||
|
||||
(smex-initialize)
|
||||
(global-set-key (kbd "M-x") 'smex)
|
||||
(ability smex ()
|
||||
(smex-initialize)
|
||||
(global-set-key (kbd "M-x") 'smex))
|
||||
|
||||
(flx-ido-mode 1)
|
||||
(setq ido-use-faces nil)
|
||||
|
|
|
@ -10,7 +10,6 @@
|
|||
(depends-on 'go-mode)
|
||||
(depends-on 'go-add-tags)
|
||||
(depends-on 'go-stacktracer)
|
||||
(depends-on 'go-eldoc)
|
||||
(depends-on 'gotest)
|
||||
(depends-on 'exec-path-from-shell)
|
||||
|
||||
|
|
|
@ -5,12 +5,15 @@
|
|||
(defun fg42-go-hook ()
|
||||
;; move to action
|
||||
"Set's up emacs hooks and turn necessary modes on."
|
||||
(lsp-register-custom-settings
|
||||
'(("gopls.completeUnimported" t t)
|
||||
("gopls.staticcheck" t t)))
|
||||
(lsp)
|
||||
(with-ability yas
|
||||
(yas-minor-mode-on))
|
||||
(yas-minor-mode-on))
|
||||
(setq-local company-backends '(company-capf company-dabbrev company-dabbrev-code))
|
||||
(add-hook 'before-save-hook #'lsp-format-buffer t t)
|
||||
(add-hook 'before-save-hook #'lsp-organize-imports t t)
|
||||
(add-hook 'go-mode-hook 'go-eldoc-setup)
|
||||
(local-set-key (kbd "M-.") #'godef-jump)
|
||||
(local-set-key (kbd "M-*") 'pop-tag-mark))
|
||||
|
||||
|
|
10
lib/fpkg.el
|
@ -100,6 +100,7 @@
|
|||
(fpkg-initialize)))
|
||||
|
||||
|
||||
|
||||
(defun official-extension-p (args)
|
||||
"Predicate to say if ARGS is an official FG42 extension."
|
||||
(member args fg42/extensions))
|
||||
|
@ -124,11 +125,10 @@
|
|||
`(fg42-install-extension ,(eval pkgname))
|
||||
`(use-package ,(eval pkgname) ,@details)))
|
||||
|
||||
|
||||
(defun depends-on (pkgname &rest args)
|
||||
"Install the package PKGNAME with respect to the ARGS."
|
||||
(let ((pkg (apply 'make-fpkg-dependency :name pkgname args)))
|
||||
(puthash pkgname pkg required-packages)))
|
||||
;; (defun depends-on (pkgname &rest args)
|
||||
;; "Install the package PKGNAME with respect to the ARGS."
|
||||
;; (let ((pkg (apply 'make-fpkg-dependency :name pkgname args)))
|
||||
;; (puthash pkgname pkg required-packages)))
|
||||
|
||||
|
||||
(provide 'fpkg)
|
||||
|
|
|
@ -0,0 +1,75 @@
|
|||
PY?=python3
|
||||
PELICAN?=pelican
|
||||
PELICANOPTS=
|
||||
|
||||
BASEDIR=$(CURDIR)
|
||||
INPUTDIR=$(BASEDIR)/content
|
||||
OUTPUTDIR=$(BASEDIR)/public
|
||||
CONFFILE=$(BASEDIR)/pelicanconf.py
|
||||
PUBLISHCONF=$(BASEDIR)/publishconf.py
|
||||
|
||||
|
||||
DEBUG ?= 0
|
||||
ifeq ($(DEBUG), 1)
|
||||
PELICANOPTS += -D
|
||||
endif
|
||||
|
||||
RELATIVE ?= 0
|
||||
ifeq ($(RELATIVE), 1)
|
||||
PELICANOPTS += --relative-urls
|
||||
endif
|
||||
|
||||
help:
|
||||
@echo 'Makefile for a pelican Web site '
|
||||
@echo ' '
|
||||
@echo 'Usage: '
|
||||
@echo ' make html (re)generate the web site '
|
||||
@echo ' make clean remove the generated files '
|
||||
@echo ' make regenerate regenerate files upon modification '
|
||||
@echo ' make publish generate using production settings '
|
||||
@echo ' make serve [PORT=8000] serve site at http://localhost:8000'
|
||||
@echo ' make serve-global [SERVER=0.0.0.0] serve (as root) to $(SERVER):80 '
|
||||
@echo ' make devserver [PORT=8000] serve and regenerate together '
|
||||
@echo ' make ssh_upload upload the web site via SSH '
|
||||
@echo ' make rsync_upload upload the web site via rsync+ssh '
|
||||
@echo ' '
|
||||
@echo 'Set the DEBUG variable to 1 to enable debugging, e.g. make DEBUG=1 html '
|
||||
@echo 'Set the RELATIVE variable to 1 to enable relative urls '
|
||||
@echo ' '
|
||||
|
||||
html:
|
||||
$(PELICAN) $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS)
|
||||
|
||||
clean:
|
||||
[ ! -d $(OUTPUTDIR) ] || rm -rf $(OUTPUTDIR)
|
||||
|
||||
regenerate:
|
||||
$(PELICAN) -r $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS)
|
||||
|
||||
serve:
|
||||
ifdef PORT
|
||||
$(PELICAN) -l $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS) -p $(PORT)
|
||||
else
|
||||
$(PELICAN) -l $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS)
|
||||
endif
|
||||
|
||||
serve-global:
|
||||
ifdef SERVER
|
||||
$(PELICAN) -l $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS) -p $(PORT) -b $(SERVER)
|
||||
else
|
||||
$(PELICAN) -l $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS) -p $(PORT) -b 0.0.0.0
|
||||
endif
|
||||
|
||||
|
||||
devserver:
|
||||
ifdef PORT
|
||||
$(PELICAN) -lr $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS) -p $(PORT)
|
||||
else
|
||||
$(PELICAN) -lr $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS)
|
||||
endif
|
||||
|
||||
publish:
|
||||
$(PELICAN) $(INPUTDIR) -o $(OUTPUTDIR) -s $(PUBLISHCONF) $(PELICANOPTS)
|
||||
|
||||
|
||||
.PHONY: html help clean regenerate serve serve-global devserver publish
|
|
@ -0,0 +1,43 @@
|
|||
![Build Status](https://gitlab.com/pouya-abbassi/pouyacode/badges/master/build.svg)
|
||||
|
||||
---
|
||||
|
||||
[FG42](https://fg42.org) built using [Pelican](https://blog.getpelican.com) & [Bulma](https://bulma.io).
|
||||
|
||||
## Build
|
||||
|
||||
```
|
||||
pip install -r requirements.txt
|
||||
git clone git@github.com:getpelican/pelican-plugins.git
|
||||
make publish
|
||||
```
|
||||
|
||||
This will create `public` directory contaning all static files.
|
||||
|
||||
## Email Obfuscation
|
||||
I use [ROT13](https://en.wikipedia.org/wiki/ROT13) to obfuscate email adresses.
|
||||
So email adresses that would be visible to users should be generated using this command (or similar tools):
|
||||
|
||||
```
|
||||
echo "pcode@protonmail.com" | tr 'A-Za-z' 'N-ZA-Mn-za-m'
|
||||
#or
|
||||
tr 'A-Za-z' 'N-ZA-Mn-za-m' <<< "pcode@protonmail.com"
|
||||
```
|
||||
|
||||
They are then processed on user's browser using a simple js function.
|
||||
|
||||
## Sample Pages
|
||||
There is a sample page at `content/docs.md` that has a metadata `status: hidden`.
|
||||
Remove this metadata to see it in the index page. This page is just for demo purpose.
|
||||
|
||||
Also there are two pages inside `content/pages/` directory with metadata `error: true`.
|
||||
This makes the background to stretch and fill the page.
|
||||
The `content/pages/release-notes.md` is also just for demo purpose.
|
||||
|
||||
## Images
|
||||
Images for articles and pages should be stored at `theme/static/images/articles/` and `theme/static/images/pages/` directory.
|
||||
These images should be named after their page title so it would be easier to manage.
|
||||
|
||||
## Configs
|
||||
Development config file is `pelicanconf.py` and the deployment config file is `publishconf.py`.
|
||||
`SITEURL` and `PLUGINS` are two most important lines of those files.
|
|
@ -0,0 +1,21 @@
|
|||
Title: Docs
|
||||
Description: of Future Gadget 42
|
||||
Date: 2020-05-28 05:57:59
|
||||
category: Docs
|
||||
image: docs.png
|
||||
icon: far fa-clipboard
|
||||
status: hidden
|
||||
|
||||
|
||||
## Title
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
| Syntax | Description |
|
||||
| ----------- | ----------- |
|
||||
| Header | Title |
|
||||
| Paragraph | Text |
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
---
|
||||
*Image was the preceding FG42 logo.*
|
|
@ -0,0 +1,23 @@
|
|||
Title: 404
|
||||
Description: You seem lost.
|
||||
Modified: 2010-12-05 19:30
|
||||
image: 404.jpg
|
||||
icon: far fa-frown
|
||||
Status: hidden
|
||||
error:true
|
||||
Save_as: 404.html
|
||||
|
||||
|
||||
> The universe has a beginning, but no end. — Infinity.
|
||||
|
||||
> Stars, too, have their own beginnings, but their own power results in their destruction. — Finite.
|
||||
|
||||
> It is those who possess wisdom who are the greatest fools. History has shown us this.
|
||||
|
||||
> You could say that this is the final warning from God to those who resist.
|
||||
|
||||
Okabe Rintarou — Steins;Gate
|
||||
|
||||
---
|
||||
*The requested item could not be located. Perhaps you might want to check the [Archives](/archives.html)?*
|
||||
*Image from [Freepik](https://www.freepik.com/free-vector/space-background-with-planets_1229807.htm).*
|
|
@ -0,0 +1,20 @@
|
|||
Title: Release Notes
|
||||
Description: of the Future Gadget 42
|
||||
Modified: 2010-12-05 19:30
|
||||
image: release-notes.png
|
||||
icon: far fa-clipboard
|
||||
Status: hidden
|
||||
error:true
|
||||
Save_as: release-notes.html
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
| Syntax | Description |
|
||||
| ----------- | ----------- |
|
||||
| Header | Title |
|
||||
| Paragraph | Text |
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
---
|
||||
*Image was the preceding FG42 logo.*
|
|
@ -0,0 +1,59 @@
|
|||
#!/usr/bin/env python
|
||||
# -*- coding: utf-8 -*- #
|
||||
|
||||
from __future__ import unicode_literals
|
||||
from jsmin import jsmin
|
||||
import sass, os
|
||||
|
||||
AUTHOR = 'Sameer Rahmani'
|
||||
SITENAME = 'Future Gadgets 42'
|
||||
DESCRIPTION = 'Ultimate Emacs based IDE for true believers'
|
||||
EMAIL_ROT13 = 'znvygb:ykfnzrre@tah.bet' # ROT13
|
||||
SITEURL = 'http://localhost:8000'
|
||||
|
||||
PATH = 'content'
|
||||
|
||||
TIMEZONE = 'Asia/Tehran'
|
||||
|
||||
DEFAULT_LANG = 'en'
|
||||
|
||||
PELICAN_VERSION = os.popen('pelican --version').readline().strip()
|
||||
|
||||
# Feed generation is usually not desired when developing
|
||||
FEED_ALL_ATOM = 'feeds/all.atom.xml'
|
||||
CATEGORY_FEED_ATOM = 'feeds/{slug}.atom.xml'
|
||||
TRANSLATION_FEED_ATOM = None
|
||||
AUTHOR_FEED_ATOM = None
|
||||
AUTHOR_FEED_RSS = None
|
||||
|
||||
# Social widget
|
||||
SOCIAL = (
|
||||
('Email', EMAIL_ROT13, 'fas fa-at'),
|
||||
('Atom feed', FEED_ALL_ATOM, 'fas fa-rss'),
|
||||
)
|
||||
|
||||
DEFAULT_PAGINATION = 10
|
||||
|
||||
# Uncomment following line if you want document-relative URLs when developing
|
||||
RELATIVE_URLS = False
|
||||
|
||||
# Theme
|
||||
THEME = 'theme'
|
||||
|
||||
PLUGIN_PATHS = ['pelican-plugins']
|
||||
PLUGINS = ['readtime', 'share_post', 'neighbors']
|
||||
SITEMAP = {'format': 'xml'}
|
||||
|
||||
# Sass compile
|
||||
with open(THEME + '/static/css/bulma.css', 'w') as css:
|
||||
style = sass.compile(filename=('sass/bulma.sass'), output_style='compressed')
|
||||
css.write(style)
|
||||
css.close()
|
||||
|
||||
# JS minifier
|
||||
with open('theme/static/js/main.js') as js_file:
|
||||
with open('theme/static/js/main.min.js','w') as min_file:
|
||||
minified = jsmin(js_file.read())
|
||||
min_file.write(minified)
|
||||
min_file.close()
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
#!/usr/bin/env python
|
||||
# -*- coding: utf-8 -*- #
|
||||
from __future__ import unicode_literals
|
||||
|
||||
# This file is only used if you use `make publish` or
|
||||
# explicitly specify it as your config file.
|
||||
|
||||
import os
|
||||
import sys
|
||||
sys.path.append(os.curdir)
|
||||
from pelicanconf import *
|
||||
|
||||
# If your site is available via HTTPS, make sure SITEURL begins with https://
|
||||
SITEURL = 'https://fg42.org'
|
||||
RELATIVE_URLS = False
|
||||
|
||||
FEED_ALL_ATOM = 'feeds/all.atom.xml'
|
||||
CATEGORY_FEED_ATOM = 'feeds/{slug}.atom.xml'
|
||||
|
||||
DELETE_OUTPUT_DIRECTORY = True
|
||||
|
||||
PLUGINS += ['sitemap', 'optimize_images']
|
||||
|
||||
# Following items are often useful when publishing
|
||||
|
||||
#DISQUS_SITENAME = ""
|
||||
#GOOGLE_ANALYTICS = ""
|
|
@ -0,0 +1,17 @@
|
|||
beautifulsoup4==4.8.1
|
||||
blinker==1.4
|
||||
bs4==0.0.1
|
||||
docutils==0.15.2
|
||||
feedgenerator==1.9
|
||||
Jinja2==2.10.3
|
||||
jsmin==2.2.2
|
||||
libsass==0.19.4
|
||||
Markdown==3.1.1
|
||||
MarkupSafe==1.1.1
|
||||
pelican==4.2.0
|
||||
Pygments==2.5.2
|
||||
python-dateutil==2.8.1
|
||||
pytz==2019.3
|
||||
six==1.13.0
|
||||
soupsieve==1.9.5
|
||||
Unidecode==1.1.1
|
|
@ -0,0 +1,312 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@font-face
|
||||
font-family: 'Roboto'
|
||||
font-style: normal
|
||||
font-weight: 400
|
||||
src: local('Roboto')
|
||||
src: local('Roboto-Regular')
|
||||
src: url(/theme/fonts/Roboto/Roboto-Regular.woff2) format('woff2')
|
||||
font-display: fallback
|
||||
|
||||
@font-face
|
||||
font-family: 'Roboto'
|
||||
font-style: italic
|
||||
font-weight: 400
|
||||
src: local('Roboto Italic')
|
||||
src: local('Roboto-Italic')
|
||||
src: url(/theme/fonts/Roboto/Roboto-Italic.woff2) format('woff2')
|
||||
font-display: fallback
|
||||
|
||||
@font-face
|
||||
font-family: 'Roboto'
|
||||
font-style: normal
|
||||
font-weight: 700
|
||||
src: local('Roboto Bold')
|
||||
src: local('Roboto-Bold')
|
||||
src: url(/theme/fonts/Roboto/Roboto-Bold.woff2) format('woff2')
|
||||
font-display: fallback
|
||||
|
||||
@font-face
|
||||
font-family: 'Quicksand'
|
||||
font-style: normal
|
||||
font-weight: 500
|
||||
src: local('Quicksand Medium')
|
||||
src: local('Quicksand-Medium')
|
||||
src: url(/theme/fonts/Quicksand/Quicksand-Medium.woff2) format('woff2')
|
||||
font-display: fallback
|
||||
|
||||
@font-face
|
||||
font-family: 'Quicksand'
|
||||
font-style: normal
|
||||
font-weight: 300
|
||||
src: local('Quicksand Light')
|
||||
src: local('Quicksand-Light')
|
||||
src: url(/theme/fonts/Quicksand/Quicksand-Light.woff2) format('woff2')
|
||||
font-display: fallback
|
||||
|
||||
@font-face
|
||||
font-family: 'Ubuntu Mono'
|
||||
font-style: normal
|
||||
font-weight: 400
|
||||
src: local('Ubuntu Mono')
|
||||
src: local('UbuntuMono-Regular')
|
||||
src: url(/theme/fonts/Ubuntu_Mono/UbuntuMono-Regular.woff2) format('woff2')
|
||||
font-display: fallback
|
||||
|
||||
@font-face
|
||||
font-family: 'Ubuntu Mono'
|
||||
font-style: normal
|
||||
font-weight: 700
|
||||
src: local('Ubuntu Mono Bold')
|
||||
src: local('UbuntuMono-Bold')
|
||||
src: url(/theme/fonts/Ubuntu_Mono/UbuntuMono-Bold.woff2) format('woff2')
|
||||
font-display: fallback
|
||||
|
||||
$family-sans-serif: 'Roboto', Arial, Helvetica, sans-serif
|
||||
$family-serif: 'Quicksand', Times, serif
|
||||
$family-monospace: 'ubuntu mono', hack
|
||||
$family-primary: $family-sans-serif
|
||||
$family-secondary: $family-serif
|
||||
|
||||
$primary-background: #222225
|
||||
$primary-color: #FFFFEE
|
||||
$secondary-background: #333336
|
||||
$secondary-color: #FFFFEE
|
||||
$primary: $primary-background
|
||||
$primary-invert: $primary-color
|
||||
|
||||
$nav-background: $secondary-background
|
||||
$nav-primary: $secondary-color
|
||||
|
||||
$navbar-dropdown-background-color: $nav-background
|
||||
$navbar-dropdown-arrow: $nav-primary
|
||||
$navbar-background-color: $nav-background
|
||||
$navbar-item-color: $nav-primary
|
||||
$navbar-item-hover-color: $primary-color
|
||||
$navbar-item-hover-background-color: $primary-background
|
||||
$navbar-dropdown-item-active-color: $primary-color
|
||||
$navbar-dropdown-item-active-background-color: $primary-background
|
||||
$navbar-dropdown-item-hover-color: $primary-color
|
||||
$navbar-dropdown-item-hover-background-color: $primary-background
|
||||
|
||||
$title-family: $family-serif
|
||||
$subtitle-family: $family-serif
|
||||
|
||||
$footer-background-color: $nav-background
|
||||
$footer-color: $nav-primary
|
||||
|
||||
$code: #AAEEAA
|
||||
$code-background: #333333AA
|
||||
$pre: #AAEEAA
|
||||
$pre-background: #333333AA
|
||||
|
||||
/*! bulma.io v0.7.5 | 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/layout/_all"
|
||||
|
||||
|
||||
html, body
|
||||
scrollbar-width: thin
|
||||
scrollbar-color: #000000 #222222
|
||||
background: $primary-background
|
||||
color: $primary-color
|
||||
|
||||
pre, .code
|
||||
font-family: $family-monospace
|
||||
|
||||
.avatar
|
||||
margin: inherit
|
||||
|
||||
.column.is-three-fifths
|
||||
margin: auto
|
||||
|
||||
a.article-title
|
||||
color: $secondary-color
|
||||
&:hover
|
||||
color: $primary-color
|
||||
text-decoration: underline
|
||||
|
||||
article.content
|
||||
padding: 1rem
|
||||
border: 1px solid $primary-background
|
||||
border-radius: 1rem
|
||||
&:hover
|
||||
border: 1px solid $secondary-background
|
||||
background: $secondary-background
|
||||
box-shadow: inset 0 0 3rem 2rem $primary-background
|
||||
|
||||
.title, h1, h2, h1 a, h2 a
|
||||
font-weight: 300
|
||||
|
||||
.title strong
|
||||
font-weight: 500
|
||||
|
||||
.subtitle, h1 small, h2 small
|
||||
color: $secondary-color
|
||||
font-weight: 500
|
||||
|
||||
.tag:not(body).is-primary
|
||||
border: 1px solid
|
||||
background: transparent
|
||||
|
||||
.tag:not(body)
|
||||
color: $primary-background
|
||||
background: $primary-color
|
||||
|
||||
.tag:not(body).is-primary
|
||||
color: $primary-color
|
||||
border: 1px solid
|
||||
background: transparent
|
||||
|
||||
.input
|
||||
color: $primary-color
|
||||
border: 1px solid
|
||||
background: transparent
|
||||
&:hover
|
||||
color: $primary-color
|
||||
border: 1px solid
|
||||
background: $secondary-background
|
||||
&:focus
|
||||
color: $primary-color
|
||||
border: 1px solid
|
||||
background: transparent
|
||||
&:active
|
||||
color: $primary-color
|
||||
border: 1px solid
|
||||
background: $secondary-background
|
||||
@include placeholder
|
||||
color: $primary-color
|
||||
|
||||
.button.is-primary
|
||||
color: $primary-color
|
||||
border: 1px solid
|
||||
background: transparent
|
||||
&:hover
|
||||
color: $primary-color
|
||||
border: 1px solid
|
||||
background: $secondary-background
|
||||
&:focus
|
||||
color: $primary-color
|
||||
border: 1px solid
|
||||
background: transparent
|
||||
|
||||
#subscription
|
||||
max-width: max-content
|
||||
border: 2px solid
|
||||
border-radius: 1rem
|
||||
margin: 2rem auto 0px auto
|
||||
padding: 1rem
|
||||
|
||||
.button.article-image
|
||||
float: right
|
||||
|
||||
.blog-content
|
||||
font-size: 1.2rem
|
||||
p
|
||||
img
|
||||
width: 100%
|
||||
|
||||
.navbar-item
|
||||
img
|
||||
max-height: 3rem
|
||||
width: auto
|
||||
|
||||
.bar-top
|
||||
height: 2px
|
||||
width: 100vw
|
||||
background-image: linear-gradient(to right, #ed5017 , #f68f1d)
|
||||
|
||||
.bar-bottom
|
||||
height: 2px
|
||||
width: 100vw
|
||||
background-image: linear-gradient(to right, #18bfdc , #023d6b)
|
||||
|
||||
.footer
|
||||
padding-bottom: 3rem
|
||||
|
||||
.table
|
||||
background: transparent
|
||||
|
||||
.table th
|
||||
color: $primary-color
|
||||
|
||||
.content table thead th
|
||||
color: $primary-color
|
||||
|
||||
strong
|
||||
color: $primary-color
|
||||
|
||||
a
|
||||
color: $primary-color
|
||||
&:hover
|
||||
color: $primary-color
|
||||
text-decoration: underline
|
||||
|
||||
.content a, table a
|
||||
text-decoration: underline dotted
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6
|
||||
color: $primary-color
|
||||
font-family: $title-family
|
||||
|
||||
.content blockquote
|
||||
border-left: 0.25rem wavy $primary-color
|
||||
background: #2228
|
||||
background-opacity: 0.4
|
||||
padding: 1rem
|
||||
|
||||
blockquote p
|
||||
padding: 0
|
||||
|
||||
hr
|
||||
background: $primary-color
|
||||
|
||||
.pagination-previous, .pagination-next, .pagination-link
|
||||
color: $primary-color
|
||||
font-family: $title-family
|
||||
border-color: $primary-color
|
||||
&:hover
|
||||
color: $primary-color
|
||||
text-decoration: underline
|
||||
&:focus
|
||||
border-color: $primary-color
|
||||
|
||||
p.readtime
|
||||
opacity: 0.8
|
||||
font-family: $title-family
|
||||
|
||||
.share
|
||||
text-align: right
|
||||
|
||||
#feedback
|
||||
font-family: $title-family
|
||||
a
|
||||
text-decoration: underline dotted
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
span, i
|
||||
display: none
|
||||
|
||||
.button.is-text
|
||||
color: $primary-color
|
||||
|
||||
// Scrollbar Width
|
||||
::-webkit-scrollbar
|
||||
width: 6px
|
||||
|
||||
// Scrollbar Track
|
||||
::-webkit-scrollbar-track
|
||||
background: #222
|
||||
|
||||
// Scrollbar Handle
|
||||
::-webkit-scrollbar-thumb
|
||||
background: #000
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import "minireset.sass"
|
||||
@import "generic.sass"
|
||||
@import "helpers.sass"
|
|
@ -0,0 +1,142 @@
|
|||
$body-background-color: $white !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,
|
||||
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: left
|
||||
th
|
||||
color: $text-strong
|
|
@ -0,0 +1,281 @@
|
|||
// Float
|
||||
|
||||
.is-clearfix
|
||||
+clearfix
|
||||
|
||||
.is-pulled-left
|
||||
float: left !important
|
||||
|
||||
.is-pulled-right
|
||||
float: right !important
|
||||
|
||||
// Overflow
|
||||
|
||||
.is-clipped
|
||||
overflow: hidden !important
|
||||
|
||||
// Overlay
|
||||
|
||||
.is-overlay
|
||||
@extend %overlay
|
||||
|
||||
// Typography
|
||||
|
||||
=typography-size($target:'')
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
.is-size-#{$i}#{if($target == '', '', '-' + $target)}
|
||||
font-size: $size !important
|
||||
|
||||
+typography-size()
|
||||
|
||||
+mobile
|
||||
+typography-size('mobile')
|
||||
|
||||
+tablet
|
||||
+typography-size('tablet')
|
||||
|
||||
+touch
|
||||
+typography-size('touch')
|
||||
|
||||
+desktop
|
||||
+typography-size('desktop')
|
||||
|
||||
+widescreen
|
||||
+typography-size('widescreen')
|
||||
|
||||
+fullhd
|
||||
+typography-size('fullhd')
|
||||
|
||||
$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
|
||||
|
||||
@each $alignment, $text-align in $alignments
|
||||
.has-text-#{$alignment}
|
||||
text-align: #{$text-align} !important
|
||||
|
||||
@each $alignment, $text-align in $alignments
|
||||
+mobile
|
||||
.has-text-#{$alignment}-mobile
|
||||
text-align: #{$text-align} !important
|
||||
+tablet
|
||||
.has-text-#{$alignment}-tablet
|
||||
text-align: #{$text-align} !important
|
||||
+tablet-only
|
||||
.has-text-#{$alignment}-tablet-only
|
||||
text-align: #{$text-align} !important
|
||||
+touch
|
||||
.has-text-#{$alignment}-touch
|
||||
text-align: #{$text-align} !important
|
||||
+desktop
|
||||
.has-text-#{$alignment}-desktop
|
||||
text-align: #{$text-align} !important
|
||||
+desktop-only
|
||||
.has-text-#{$alignment}-desktop-only
|
||||
text-align: #{$text-align} !important
|
||||
+widescreen
|
||||
.has-text-#{$alignment}-widescreen
|
||||
text-align: #{$text-align} !important
|
||||
+widescreen-only
|
||||
.has-text-#{$alignment}-widescreen-only
|
||||
text-align: #{$text-align} !important
|
||||
+fullhd
|
||||
.has-text-#{$alignment}-fullhd
|
||||
text-align: #{$text-align} !important
|
||||
|
||||
.is-capitalized
|
||||
text-transform: capitalize !important
|
||||
|
||||
.is-lowercase
|
||||
text-transform: lowercase !important
|
||||
|
||||
.is-uppercase
|
||||
text-transform: uppercase !important
|
||||
|
||||
.is-italic
|
||||
font-style: italic !important
|
||||
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
.has-text-#{$name}
|
||||
color: $color !important
|
||||
a.has-text-#{$name}
|
||||
&:hover,
|
||||
&:focus
|
||||
color: darken($color, 10%) !important
|
||||
.has-background-#{$name}
|
||||
background-color: $color !important
|
||||
|
||||
@each $name, $shade in $shades
|
||||
.has-text-#{$name}
|
||||
color: $shade !important
|
||||
.has-background-#{$name}
|
||||
background-color: $shade !important
|
||||
|
||||
.has-text-weight-light
|
||||
font-weight: $weight-light !important
|
||||
.has-text-weight-normal
|
||||
font-weight: $weight-normal !important
|
||||
.has-text-weight-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
|
||||
|
||||
// Visibility
|
||||
|
||||
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
|
||||
|
||||
@each $display in $displays
|
||||
.is-#{$display}
|
||||
display: #{$display} !important
|
||||
+mobile
|
||||
.is-#{$display}-mobile
|
||||
display: #{$display} !important
|
||||
+tablet
|
||||
.is-#{$display}-tablet
|
||||
display: #{$display} !important
|
||||
+tablet-only
|
||||
.is-#{$display}-tablet-only
|
||||
display: #{$display} !important
|
||||
+touch
|
||||
.is-#{$display}-touch
|
||||
display: #{$display} !important
|
||||
+desktop
|
||||
.is-#{$display}-desktop
|
||||
display: #{$display} !important
|
||||
+desktop-only
|
||||
.is-#{$display}-desktop-only
|
||||
display: #{$display} !important
|
||||
+widescreen
|
||||
.is-#{$display}-widescreen
|
||||
display: #{$display} !important
|
||||
+widescreen-only
|
||||
.is-#{$display}-widescreen-only
|
||||
display: #{$display} !important
|
||||
+fullhd
|
||||
.is-#{$display}-fullhd
|
||||
display: #{$display} !important
|
||||
|
||||
.is-hidden
|
||||
display: none !important
|
||||
|
||||
.is-sr-only
|
||||
border: none !important
|
||||
clip: rect(0, 0, 0, 0) !important
|
||||
height: 0.01em !important
|
||||
overflow: hidden !important
|
||||
padding: 0 !important
|
||||
position: absolute !important
|
||||
white-space: nowrap !important
|
||||
width: 0.01em !important
|
||||
|
||||
+mobile
|
||||
.is-hidden-mobile
|
||||
display: none !important
|
||||
|
||||
+tablet
|
||||
.is-hidden-tablet
|
||||
display: none !important
|
||||
|
||||
+tablet-only
|
||||
.is-hidden-tablet-only
|
||||
display: none !important
|
||||
|
||||
+touch
|
||||
.is-hidden-touch
|
||||
display: none !important
|
||||
|
||||
+desktop
|
||||
.is-hidden-desktop
|
||||
display: none !important
|
||||
|
||||
+desktop-only
|
||||
.is-hidden-desktop-only
|
||||
display: none !important
|
||||
|
||||
+widescreen
|
||||
.is-hidden-widescreen
|
||||
display: none !important
|
||||
|
||||
+widescreen-only
|
||||
.is-hidden-widescreen-only
|
||||
display: none !important
|
||||
|
||||
+fullhd
|
||||
.is-hidden-fullhd
|
||||
display: none !important
|
||||
|
||||
.is-invisible
|
||||
visibility: hidden !important
|
||||
|
||||
+mobile
|
||||
.is-invisible-mobile
|
||||
visibility: hidden !important
|
||||
|
||||
+tablet
|
||||
.is-invisible-tablet
|
||||
visibility: hidden !important
|
||||
|
||||
+tablet-only
|
||||
.is-invisible-tablet-only
|
||||
visibility: hidden !important
|
||||
|
||||
+touch
|
||||
.is-invisible-touch
|
||||
visibility: hidden !important
|
||||
|
||||
+desktop
|
||||
.is-invisible-desktop
|
||||
visibility: hidden !important
|
||||
|
||||
+desktop-only
|
||||
.is-invisible-desktop-only
|
||||
visibility: hidden !important
|
||||
|
||||
+widescreen
|
||||
.is-invisible-widescreen
|
||||
visibility: hidden !important
|
||||
|
||||
+widescreen-only
|
||||
.is-invisible-widescreen-only
|
||||
visibility: hidden !important
|
||||
|
||||
+fullhd
|
||||
.is-invisible-fullhd
|
||||
visibility: hidden !important
|
||||
|
||||
// Other
|
||||
|
||||
.is-marginless
|
||||
margin: 0 !important
|
||||
|
||||
.is-paddingless
|
||||
padding: 0 !important
|
||||
|
||||
.is-radiusless
|
||||
border-radius: 0 !important
|
||||
|
||||
.is-shadowless
|
||||
box-shadow: none !important
|
||||
|
||||
.is-unselectable
|
||||
@extend %unselectable
|
||||
|
||||
.is-relative
|
||||
position: relative !important
|
|
@ -0,0 +1,85 @@
|
|||
/*! minireset.css v0.0.4 | 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,
|
||||
embed,
|
||||
iframe,
|
||||
object,
|
||||
video
|
||||
height: auto
|
||||
max-width: 100%
|
||||
|
||||
audio
|
||||
max-width: 100%
|
||||
|
||||
// Iframe
|
||||
iframe
|
||||
border: 0
|
||||
|
||||
// Table
|
||||
table
|
||||
border-collapse: collapse
|
||||
border-spacing: 0
|
||||
|
||||
td,
|
||||
th
|
||||
padding: 0
|
||||
&:not([align])
|
||||
text-align: left
|
|
@ -0,0 +1,15 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import "breadcrumb.sass"
|
||||
@import "card.sass"
|
||||
@import "dropdown.sass"
|
||||
@import "level.sass"
|
||||
@import "list.sass"
|
||||
@import "media.sass"
|
||||
@import "menu.sass"
|
||||
@import "message.sass"
|
||||
@import "modal.sass"
|
||||
@import "navbar.sass"
|
||||
@import "pagination.sass"
|
||||
@import "panel.sass"
|
||||
@import "tabs.sass"
|
|
@ -0,0 +1,75 @@
|
|||
$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: $grey-light !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
|
||||
padding-left: 0
|
||||
&.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
|
||||
margin-right: 0.5em
|
||||
&:last-child
|
||||
margin-left: 0.5em
|
||||
// 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,79 @@
|
|||
$card-color: $text !default
|
||||
$card-background-color: $white !default
|
||||
$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
||||
|
||||
$card-header-background-color: transparent !default
|
||||
$card-header-color: $text-strong !default
|
||||
$card-header-padding: 0.75rem !default
|
||||
$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
|
||||
$card-header-weight: $weight-bold !default
|
||||
|
||||
$card-content-background-color: transparent !default
|
||||
$card-content-padding: 1.5rem !default
|
||||
|
||||
$card-footer-background-color: transparent !default
|
||||
$card-footer-border-top: 1px solid $border !default
|
||||
$card-footer-padding: 0.75rem !default
|
||||
|
||||
$card-media-margin: $block-spacing !default
|
||||
|
||||
.card
|
||||
background-color: $card-background-color
|
||||
box-shadow: $card-shadow
|
||||
color: $card-color
|
||||
max-width: 100%
|
||||
position: relative
|
||||
|
||||
.card-header
|
||||
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
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
display: flex
|
||||
justify-content: center
|
||||
padding: $card-header-padding
|
||||
|
||||
.card-image
|
||||
display: block
|
||||
position: relative
|
||||
|
||||
.card-content
|
||||
background-color: $card-content-background-color
|
||||
padding: $card-content-padding
|
||||
|
||||
.card-footer
|
||||
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)
|
||||
border-right: $card-footer-border-top
|
||||
|
||||
// Combinations
|
||||
|
||||
.card
|
||||
.media:not(:last-child)
|
||||
margin-bottom: $card-media-margin
|
|
@ -0,0 +1,81 @@
|
|||
$dropdown-menu-min-width: 12rem !default
|
||||
|
||||
$dropdown-content-background-color: $white !default
|
||||
$dropdown-content-arrow: $link !default
|
||||
$dropdown-content-offset: 4px !default
|
||||
$dropdown-content-padding-bottom: 0.5rem !default
|
||||
$dropdown-content-padding-top: 0.5rem !default
|
||||
$dropdown-content-radius: $radius !default
|
||||
$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
||||
$dropdown-content-z: 20 !default
|
||||
|
||||
$dropdown-item-color: $grey-dark !default
|
||||
$dropdown-item-hover-color: $black !default
|
||||
$dropdown-item-hover-background-color: $background !default
|
||||
$dropdown-item-active-color: $link-invert !default
|
||||
$dropdown-item-active-background-color: $link !default
|
||||
|
||||
$dropdown-divider-background-color: $border !default
|
||||
|
||||
.dropdown
|
||||
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
|
||||
left: 0
|
||||
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
|
||||
padding-right: 3rem
|
||||
text-align: left
|
||||
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,77 @@
|
|||
$level-item-spacing: ($block-spacing / 2) !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
|
||||
margin-right: $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)
|
||||
margin-right: $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,39 @@
|
|||
$list-background-color: $white !default
|
||||
$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
||||
$list-radius: $radius !default
|
||||
|
||||
$list-item-border: 1px solid $border !default
|
||||
$list-item-color: $text !default
|
||||
$list-item-active-background-color: $link !default
|
||||
$list-item-active-color: $link-invert !default
|
||||
$list-item-hover-background-color: $background !default
|
||||
|
||||
.list
|
||||
@extend %block
|
||||
background-color: $list-background-color
|
||||
border-radius: $list-radius
|
||||
box-shadow: $list-shadow
|
||||
// &.is-hoverable > .list-item:hover:not(.is-active)
|
||||
// background-color: $list-item-hover-background-color
|
||||
// cursor: pointer
|
||||
|
||||
.list-item
|
||||
display: block
|
||||
padding: 0.5em 1em
|
||||
&:not(a)
|
||||
color: $list-item-color
|
||||
&:first-child
|
||||
border-top-left-radius: $list-radius
|
||||
border-top-right-radius: $list-radius
|
||||
&:last-child
|
||||
border-bottom-left-radius: $list-radius
|
||||
border-bottom-right-radius: $list-radius
|
||||
&:not(:last-child)
|
||||
border-bottom: $list-item-border
|
||||
&.is-active
|
||||
background-color: $list-item-active-background-color
|
||||
color: $list-item-active-color
|
||||
|
||||
a.list-item
|
||||
background-color: $list-item-hover-background-color
|
||||
cursor: pointer
|
|
@ -0,0 +1,48 @@
|
|||
.media
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
text-align: left
|
||||
.content:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
.media
|
||||
border-top: 1px solid rgba($border, 0.5)
|
||||
display: flex
|
||||
padding-top: 0.75rem
|
||||
.content:not(:last-child),
|
||||
.control:not(:last-child)
|
||||
margin-bottom: 0.5rem
|
||||
.media
|
||||
padding-top: 0.5rem
|
||||
& + .media
|
||||
margin-top: 0.5rem
|
||||
& + .media
|
||||
border-top: 1px solid rgba($border, 0.5)
|
||||
margin-top: 1rem
|
||||
padding-top: 1rem
|
||||
// Sizes
|
||||
&.is-large
|
||||
& + .media
|
||||
margin-top: 1.5rem
|
||||
padding-top: 1.5rem
|
||||
|
||||
.media-left,
|
||||
.media-right
|
||||
flex-basis: auto
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
|
||||
.media-left
|
||||
margin-right: 1rem
|
||||
|
||||
.media-right
|
||||
margin-left: 1rem
|
||||
|
||||
.media-content
|
||||
flex-basis: auto
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
text-align: left
|
||||
|
||||
+mobile
|
||||
.media-content
|
||||
overflow-x: auto
|
|
@ -0,0 +1,57 @@
|
|||
$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
|
||||
border-left: $menu-list-border-left
|
||||
margin: $menu-nested-list-margin
|
||||
padding-left: $menu-nested-list-padding-left
|
||||
|
||||
.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,87 @@
|
|||
$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: $white !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, $pair in $message-colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
|
||||
$color-luminance: colorLuminance($color)
|
||||
$darken-percentage: $color-luminance * 70%
|
||||
$desaturate-percentage: $color-luminance * 30%
|
||||
&.is-#{$name}
|
||||
background-color: lighten($color, $color-lightning)
|
||||
.message-header
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.message-body
|
||||
border-color: $color
|
||||
color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
|
||||
|
||||
.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
|
||||
margin-left: 0.75em
|
||||
& + .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,113 @@
|
|||
$modal-z: 40 !default
|
||||
|
||||
$modal-background-background-color: rgba($black, 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: $white !default
|
||||
$modal-card-body-padding: 20px !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
|
||||
+tablet
|
||||
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
|
||||
right: $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)
|
||||
margin-right: 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,443 @@
|
|||
$navbar-background-color: $white !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: $grey-dark !default
|
||||
$navbar-item-hover-color: $link !default
|
||||
$navbar-item-hover-background-color: $white-bis !default
|
||||
$navbar-item-active-color: $black !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: $white !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 rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
||||
|
||||
$navbar-dropdown-item-hover-color: $black !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-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 $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: darken($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: darken($color, 5%)
|
||||
color: $color-invert
|
||||
.navbar-link
|
||||
&::after
|
||||
border-color: $color-invert
|
||||
.navbar-item.has-dropdown:focus .navbar-link,
|
||||
.navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar-item.has-dropdown.is-active .navbar-link
|
||||
background-color: darken($color, 5%)
|
||||
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
|
||||
color: $navbar-burger-color
|
||||
+hamburger($navbar-height)
|
||||
margin-left: auto
|
||||
|
||||
.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
|
||||
display: block
|
||||
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)
|
||||
padding-right: 2.5em
|
||||
&::after
|
||||
@extend %arrow
|
||||
border-color: $navbar-dropdown-arrow
|
||||
margin-top: -0.375em
|
||||
right: 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 rgba($black, 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 rgba($black, 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
|
||||
display: flex
|
||||
&.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 rgba($black, 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
|
||||
margin-right: auto
|
||||
.navbar-end
|
||||
justify-content: flex-end
|
||||
margin-left: auto
|
||||
.navbar-dropdown
|
||||
background-color: $navbar-dropdown-background-color
|
||||
border-bottom-left-radius: $navbar-dropdown-radius
|
||||
border-bottom-right-radius: $navbar-dropdown-radius
|
||||
border-top: $navbar-dropdown-border-top
|
||||
box-shadow: 0 8px 8px rgba($black, 0.1)
|
||||
display: none
|
||||
font-size: 0.875rem
|
||||
left: 0
|
||||
min-width: 100%
|
||||
position: absolute
|
||||
top: 100%
|
||||
z-index: $navbar-dropdown-z
|
||||
.navbar-item
|
||||
padding: 0.375rem 1rem
|
||||
white-space: nowrap
|
||||
a.navbar-item
|
||||
padding-right: 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
|
||||
margin-left: -.75rem
|
||||
.navbar-menu
|
||||
margin-right: -.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 rgba($black, 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,149 @@
|
|||
$pagination-color: $grey-darker !default
|
||||
$pagination-border-color: $grey-lighter !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-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: $grey !default
|
||||
$pagination-disabled-background-color: $grey-lighter !default
|
||||
$pagination-disabled-border-color: $grey-lighter !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($black, 0.2)
|
||||
|
||||
.pagination
|
||||
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: 0.75em
|
||||
padding-right: 0.75em
|
||||
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
|
||||
|
||||
+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
|
||||
order: 2
|
||||
.pagination-next
|
||||
order: 3
|
||||
.pagination
|
||||
justify-content: space-between
|
||||
&.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,103 @@
|
|||
$panel-margin: $block-spacing !default
|
||||
$panel-item-border: 1px solid $border !default
|
||||
|
||||
$panel-heading-background-color: $background !default
|
||||
$panel-heading-color: $text-strong !default
|
||||
$panel-heading-line-height: 1.25 !default
|
||||
$panel-heading-padding: 0.5em 0.75em !default
|
||||
$panel-heading-radius: $radius !default
|
||||
$panel-heading-size: 1.25em !default
|
||||
$panel-heading-weight: $weight-light !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
|
||||
font-size: $size-normal
|
||||
&:not(:last-child)
|
||||
margin-bottom: $panel-margin
|
||||
|
||||
.panel-heading,
|
||||
.panel-tabs,
|
||||
.panel-block
|
||||
border-bottom: $panel-item-border
|
||||
border-left: $panel-item-border
|
||||
border-right: $panel-item-border
|
||||
&:first-child
|
||||
border-top: $panel-item-border
|
||||
|
||||
.panel-heading
|
||||
background-color: $panel-heading-background-color
|
||||
border-radius: $panel-heading-radius $panel-heading-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"]
|
||||
margin-right: 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
|
||||
|
||||
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
|
||||
margin-right: 0.75em
|
||||
.fa
|
||||
font-size: inherit
|
||||
line-height: inherit
|
|
@ -0,0 +1,151 @@
|
|||
$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: $white !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
|
||||
margin-right: 0.5em
|
||||
&:last-child
|
||||
margin-left: 0.5em
|
||||
// Alignment
|
||||
&.is-centered
|
||||
ul
|
||||
justify-content: center
|
||||
&.is-right
|
||||
ul
|
||||
justify-content: flex-end
|
||||
// Styles
|
||||
&.is-boxed
|
||||
a
|
||||
border: 1px solid transparent
|
||||
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
|
||||
&: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
|
||||
margin-left: -#{$tabs-toggle-link-border-width}
|
||||
&:first-child a
|
||||
border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
|
||||
&:last-child a
|
||||
border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
|
||||
&.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
|
||||
border-bottom-left-radius: $radius-rounded
|
||||
border-top-left-radius: $radius-rounded
|
||||
padding-left: 1.25em
|
||||
&:last-child a
|
||||
border-bottom-right-radius: $radius-rounded
|
||||
border-top-right-radius: $radius-rounded
|
||||
padding-right: 1.25em
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
|
@ -0,0 +1,15 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import "box.sass"
|
||||
@import "button.sass"
|
||||
@import "container.sass"
|
||||
@import "content.sass"
|
||||
@import "icon.sass"
|
||||
@import "image.sass"
|
||||
@import "notification.sass"
|
||||
@import "progress.sass"
|
||||
@import "table.sass"
|
||||
@import "tag.sass"
|
||||
@import "title.sass"
|
||||
|
||||
@import "other.sass"
|
|
@ -0,0 +1,24 @@
|
|||
$box-color: $text !default
|
||||
$box-background-color: $white !default
|
||||
$box-radius: $radius-large !default
|
||||
$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
||||
$box-padding: 1.25rem !default
|
||||
|
||||
$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default
|
||||
$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default
|
||||
|
||||
.box
|
||||
@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,305 @@
|
|||
$button-color: $grey-darker !default
|
||||
$button-background-color: $white !default
|
||||
$button-family: false !default
|
||||
|
||||
$button-border-color: $grey-lighter !default
|
||||
$button-border-width: $control-border-width !default
|
||||
|
||||
$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default
|
||||
$button-padding-horizontal: 0.75em !default
|
||||
|
||||
$button-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: rgba($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-hover-background-color: $background !default
|
||||
$button-text-hover-color: $text-strong !default
|
||||
|
||||
$button-disabled-background-color: $white !default
|
||||
$button-disabled-border-color: $grey-lighter !default
|
||||
$button-disabled-shadow: none !default
|
||||
$button-disabled-opacity: 0.5 !default
|
||||
|
||||
$button-static-color: $grey !default
|
||||
$button-static-background-color: $white-ter !default
|
||||
$button-static-border-color: $grey-lighter !default
|
||||
|
||||
// The button sizes use mixins so they can be used at different breakpoints
|
||||
=button-small
|
||||
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)
|
||||
margin-left: calc(-0.375em - #{$button-border-width})
|
||||
margin-right: 0.1875em
|
||||
&:last-child:not(:first-child)
|
||||
margin-left: 0.1875em
|
||||
margin-right: calc(-0.375em - #{$button-border-width})
|
||||
&:first-child:last-child
|
||||
margin-left: calc(-0.375em - #{$button-border-width})
|
||||
margin-right: calc(-0.375em - #{$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: underline
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused
|
||||
background-color: $button-text-hover-background-color
|
||||
color: $button-text-hover-color
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: darken($button-text-hover-background-color, 5%)
|
||||
color: $button-text-hover-color
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
box-shadow: none
|
||||
@each $name, $pair in $colors
|
||||
$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: darken($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 rgba($color, 0.25)
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: darken($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: darken($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
|
||||
// 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: 1em
|
||||
padding-right: 1em
|
||||
|
||||
.buttons
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
.button
|
||||
margin-bottom: 0.5rem
|
||||
&:not(:last-child):not(.is-fullwidth)
|
||||
margin-right: 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
|
||||
margin-right: -1px
|
||||
&:last-child
|
||||
margin-right: 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,23 @@
|
|||
$container-offset: (2 * $gap) !default
|
||||
|
||||
.container
|
||||
flex-grow: 1
|
||||
margin: 0 auto
|
||||
position: relative
|
||||
width: auto
|
||||
+desktop
|
||||
max-width: $desktop - $container-offset
|
||||
&.is-fluid
|
||||
margin-left: $gap
|
||||
margin-right: $gap
|
||||
max-width: none
|
||||
+until-widescreen
|
||||
&.is-widescreen
|
||||
max-width: $widescreen - $container-offset
|
||||
+until-fullhd
|
||||
&.is-fullhd
|
||||
max-width: $fullhd - $container-offset
|
||||
+widescreen
|
||||
max-width: $widescreen - $container-offset
|
||||
+fullhd
|
||||
max-width: $fullhd - $container-offset
|
|
@ -0,0 +1,155 @@
|
|||
$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
|
||||
border-left: $content-blockquote-border-left
|
||||
padding: $content-blockquote-padding
|
||||
ol
|
||||
list-style-position: outside
|
||||
margin-left: 2em
|
||||
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
|
||||
margin-left: 2em
|
||||
margin-top: 1em
|
||||
ul
|
||||
list-style-type: circle
|
||||
margin-top: 0.5em
|
||||
ul
|
||||
list-style-type: square
|
||||
dd
|
||||
margin-left: 2em
|
||||
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: left
|
||||
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-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,21 @@
|
|||
$icon-dimensions: 1.5rem !default
|
||||
$icon-dimensions-small: 1rem !default
|
||||
$icon-dimensions-medium: 2rem !default
|
||||
$icon-dimensions-large: 3rem !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
|
|
@ -0,0 +1,69 @@
|
|||
$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
|
||||
// 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,35 @@
|
|||
$notification-background-color: $background !default
|
||||
$notification-radius: $radius !default
|
||||
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
||||
|
||||
.notification
|
||||
@extend %block
|
||||
background-color: $notification-background-color
|
||||
border-radius: $notification-radius
|
||||
padding: $notification-padding
|
||||
position: relative
|
||||
a:not(.button):not(.dropdown-item)
|
||||
color: currentColor
|
||||
text-decoration: underline
|
||||
strong
|
||||
color: currentColor
|
||||
code,
|
||||
pre
|
||||
background: $white
|
||||
pre code
|
||||
background: transparent
|
||||
& > .delete
|
||||
position: absolute
|
||||
right: 0.5rem
|
||||
top: 0.5rem
|
||||
.title,
|
||||
.subtitle,
|
||||
.content
|
||||
color: currentColor
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
|
@ -0,0 +1,39 @@
|
|||
.block
|
||||
@extend %block
|
||||
|
||||
.delete
|
||||
@extend %delete
|
||||
|
||||
.heading
|
||||
display: block
|
||||
font-size: 11px
|
||||
letter-spacing: 1px
|
||||
margin-bottom: 5px
|
||||
text-transform: uppercase
|
||||
|
||||
.highlight
|
||||
@extend %block
|
||||
font-weight: $weight-normal
|
||||
max-width: 100%
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
pre
|
||||
overflow: auto
|
||||
max-width: 100%
|
||||
|
||||
.loader
|
||||
@extend %loader
|
||||
|
||||
.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,67 @@
|
|||
$progress-bar-background-color: $border !default
|
||||
$progress-value-background-color: $text !default
|
||||
$progress-border-radius: $radius-rounded !default
|
||||
|
||||
$progress-indeterminate-duration: 1.5s !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 $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
|
||||
|
||||
// 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,127 @@
|
|||
$table-color: $grey-darker !default
|
||||
$table-background-color: $white !default
|
||||
|
||||
$table-cell-border: 1px solid $grey-lighter !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: $white-bis !default
|
||||
|
||||
$table-row-active-background-color: $primary !default
|
||||
$table-row-active-color: $primary-invert !default
|
||||
|
||||
$table-striped-row-even-background-color: $white-bis !default
|
||||
$table-striped-row-even-hover-background-color: $white-ter !default
|
||||
|
||||
.table
|
||||
@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 $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
|
||||
th
|
||||
color: $table-cell-heading-color
|
||||
&:not([align])
|
||||
text-align: left
|
||||
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,121 @@
|
|||
$tag-background-color: $background !default
|
||||
$tag-color: $text !default
|
||||
$tag-radius: $radius !default
|
||||
$tag-delete-margin: 1px !default
|
||||
|
||||
.tags
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
.tag
|
||||
margin-bottom: 0.5rem
|
||||
&:not(:last-child)
|
||||
margin-right: 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
|
||||
margin-right: 0
|
||||
&:not(:first-child)
|
||||
margin-left: 0
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
&:not(:last-child)
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-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
|
||||
margin-left: 0.25rem
|
||||
margin-right: -0.375rem
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
// 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)
|
||||
margin-left: -0.375em
|
||||
margin-right: 0.1875em
|
||||
&:last-child:not(:first-child)
|
||||
margin-left: 0.1875em
|
||||
margin-right: -0.375em
|
||||
&:first-child:last-child
|
||||
margin-left: -0.375em
|
||||
margin-right: -0.375em
|
||||
// Modifiers
|
||||
&.is-delete
|
||||
margin-left: $tag-delete-margin
|
||||
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 @@
|
|||
$title-color: $grey-darker !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: $grey-dark !default
|
||||
$subtitle-family: false !default
|
||||
$subtitle-size: $size-5 !default
|
||||
$subtitle-weight: $weight-normal !default
|
||||
$subtitle-line-height: 1.25 !default
|
||||
$subtitle-strong-color: $grey-darker !default
|
||||
$subtitle-strong-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
|
||||
& + .highlight
|
||||
margin-top: -0.75rem
|
||||
&: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,8 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import "shared.sass"
|
||||
@import "input-textarea.sass"
|
||||
@import "checkbox-radio.sass"
|
||||
@import "select.sass"
|
||||
@import "file.sass"
|
||||
@import "tools.sass"
|
|
@ -0,0 +1,21 @@
|
|||
%checkbox-radio
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
line-height: 1.25
|
||||
position: relative
|
||||
input
|
||||
cursor: pointer
|
||||
&:hover
|
||||
color: $input-hover-color
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
color: $input-disabled-color
|
||||
cursor: not-allowed
|
||||
|
||||
.checkbox
|
||||
@extend %checkbox-radio
|
||||
|
||||
.radio
|
||||
@extend %checkbox-radio
|
||||
& + .radio
|
||||
margin-left: 0.5em
|
|
@ -0,0 +1,180 @@
|
|||
$file-border-color: $border !default
|
||||
$file-radius: $radius !default
|
||||
|
||||
$file-cta-background-color: $white-ter !default
|
||||
$file-cta-color: $grey-dark !default
|
||||
$file-cta-hover-color: $grey-darker !default
|
||||
$file-cta-active-color: $grey-darker !default
|
||||
|
||||
$file-name-border-color: $border !default
|
||||
$file-name-border-style: solid !default
|
||||
$file-name-border-width: 1px 1px 1px 0 !default
|
||||
$file-name-max-width: 16em !default
|
||||
|
||||
.file
|
||||
@extend %unselectable
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
position: relative
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
.file-cta
|
||||
background-color: $color
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
.file-cta
|
||||
background-color: darken($color, 2.5%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:focus,
|
||||
&.is-focused
|
||||
.file-cta
|
||||
border-color: transparent
|
||||
box-shadow: 0 0 0.5em rgba($color, 0.25)
|
||||
color: $color-invert
|
||||
&:active,
|
||||
&.is-active
|
||||
.file-cta
|
||||
background-color: darken($color, 5%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
.file-icon
|
||||
.fa
|
||||
font-size: 21px
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
.file-icon
|
||||
.fa
|
||||
font-size: 28px
|
||||
// Modifiers
|
||||
&.has-name
|
||||
.file-cta
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
.file-name
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
&.is-empty
|
||||
.file-cta
|
||||
border-radius: $file-radius
|
||||
.file-name
|
||||
display: none
|
||||
&.is-boxed
|
||||
.file-label
|
||||
flex-direction: column
|
||||
.file-cta
|
||||
flex-direction: column
|
||||
height: auto
|
||||
padding: 1em 3em
|
||||
.file-name
|
||||
border-width: 0 1px 1px
|
||||
.file-icon
|
||||
height: 1.5em
|
||||
width: 1.5em
|
||||
.fa
|
||||
font-size: 21px
|
||||
&.is-small
|
||||
.file-icon .fa
|
||||
font-size: 14px
|
||||
&.is-medium
|
||||
.file-icon .fa
|
||||
font-size: 28px
|
||||
&.is-large
|
||||
.file-icon .fa
|
||||
font-size: 35px
|
||||
&.has-name
|
||||
.file-cta
|
||||
border-radius: $file-radius $file-radius 0 0
|
||||
.file-name
|
||||
border-radius: 0 0 $file-radius $file-radius
|
||||
border-width: 0 1px 1px
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
&.is-fullwidth
|
||||
.file-label
|
||||
width: 100%
|
||||
.file-name
|
||||
flex-grow: 1
|
||||
max-width: none
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
.file-cta
|
||||
border-radius: 0 $file-radius $file-radius 0
|
||||
.file-name
|
||||
border-radius: $file-radius 0 0 $file-radius
|
||||
border-width: 1px 0 1px 1px
|
||||
order: -1
|
||||
|
||||
.file-label
|
||||
align-items: stretch
|
||||
display: flex
|
||||
cursor: pointer
|
||||
justify-content: flex-start
|
||||
overflow: hidden
|
||||
position: relative
|
||||
&:hover
|
||||
.file-cta
|
||||
background-color: darken($file-cta-background-color, 2.5%)
|
||||
color: $file-cta-hover-color
|
||||
.file-name
|
||||
border-color: darken($file-name-border-color, 2.5%)
|
||||
&:active
|
||||
.file-cta
|
||||
background-color: darken($file-cta-background-color, 5%)
|
||||
color: $file-cta-active-color
|
||||
.file-name
|
||||
border-color: darken($file-name-border-color, 5%)
|
||||
|
||||
.file-input
|
||||
height: 100%
|
||||
left: 0
|
||||
opacity: 0
|
||||
outline: none
|
||||
position: absolute
|
||||
top: 0
|
||||
width: 100%
|
||||
|
||||
.file-cta,
|
||||
.file-name
|
||||
@extend %control
|
||||
border-color: $file-border-color
|
||||
border-radius: $file-radius
|
||||
font-size: 1em
|
||||
padding-left: 1em
|
||||
padding-right: 1em
|
||||
white-space: nowrap
|
||||
|
||||
.file-cta
|
||||
background-color: $file-cta-background-color
|
||||
color: $file-cta-color
|
||||
|
||||
.file-name
|
||||
border-color: $file-name-border-color
|
||||
border-style: $file-name-border-style
|
||||
border-width: $file-name-border-width
|
||||
display: block
|
||||
max-width: $file-name-max-width
|
||||
overflow: hidden
|
||||
text-align: left
|
||||
text-overflow: ellipsis
|
||||
|
||||
.file-icon
|
||||
align-items: center
|
||||
display: flex
|
||||
height: 1em
|
||||
justify-content: center
|
||||
margin-right: 0.5em
|
||||
width: 1em
|
||||
.fa
|
||||
font-size: 14px
|
|
@ -0,0 +1,60 @@
|
|||
%input-textarea
|
||||
@extend %input
|
||||
box-shadow: $input-shadow
|
||||
max-width: 100%
|
||||
width: 100%
|
||||
&[readonly]
|
||||
box-shadow: none
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
border-color: $color
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
||||
// Sizes
|
||||
&.is-small
|
||||
+control-small
|
||||
&.is-medium
|
||||
+control-medium
|
||||
&.is-large
|
||||
+control-large
|
||||
// Modifiers
|
||||
&.is-fullwidth
|
||||
display: block
|
||||
width: 100%
|
||||
&.is-inline
|
||||
display: inline
|
||||
width: auto
|
||||
|
||||
.input
|
||||
@extend %input-textarea
|
||||
&.is-rounded
|
||||
border-radius: $radius-rounded
|
||||
padding-left: 1em
|
||||
padding-right: 1em
|
||||
&.is-static
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
box-shadow: none
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
|
||||
.textarea
|
||||
@extend %input-textarea
|
||||
display: block
|
||||
max-width: 100%
|
||||
min-width: 100%
|
||||
padding: 0.625em
|
||||
resize: vertical
|
||||
&:not([rows])
|
||||
max-height: 600px
|
||||
min-height: 120px
|
||||
&[rows]
|
||||
height: initial
|
||||
// Modifiers
|
||||
&.has-fixed-size
|
||||
resize: none
|
|
@ -0,0 +1,85 @@
|
|||
.select
|
||||
display: inline-block
|
||||
max-width: 100%
|
||||
position: relative
|
||||
vertical-align: top
|
||||
&:not(.is-multiple)
|
||||
height: $input-height
|
||||
&:not(.is-multiple):not(.is-loading)
|
||||
&::after
|
||||
@extend %arrow
|
||||
border-color: $input-arrow
|
||||
right: 1.125em
|
||||
z-index: 4
|
||||
&.is-rounded
|
||||
select
|
||||
border-radius: $radius-rounded
|
||||
padding-left: 1em
|
||||
select
|
||||
@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])
|
||||
padding-right: 2.5em
|
||||
&[multiple]
|
||||
height: auto
|
||||
padding: 0
|
||||
option
|
||||
padding: 0.5em 1em
|
||||
// States
|
||||
&:not(.is-multiple):not(.is-loading):hover
|
||||
&::after
|
||||
border-color: $input-hover-color
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
&:not(:hover)::after
|
||||
border-color: $color
|
||||
select
|
||||
border-color: $color
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
border-color: darken($color, 5%)
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
||||
// Sizes
|
||||
&.is-small
|
||||
+control-small
|
||||
&.is-medium
|
||||
+control-medium
|
||||
&.is-large
|
||||
+control-large
|
||||
// Modifiers
|
||||
&.is-disabled
|
||||
&::after
|
||||
border-color: $input-disabled-color
|
||||
&.is-fullwidth
|
||||
width: 100%
|
||||
select
|
||||
width: 100%
|
||||
&.is-loading
|
||||
&::after
|
||||
@extend %loader
|
||||
margin-top: 0
|
||||
position: absolute
|
||||
right: 0.625em
|
||||
top: 0.625em
|
||||
transform: none
|
||||
&.is-small:after
|
||||
font-size: $size-small
|
||||
&.is-medium:after
|
||||
font-size: $size-medium
|
||||
&.is-large:after
|
||||
font-size: $size-large
|
|
@ -0,0 +1,55 @@
|
|||
$input-color: $grey-darker !default
|
||||
$input-background-color: $white !default
|
||||
$input-border-color: $grey-lighter !default
|
||||
$input-height: $control-height !default
|
||||
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
|
||||
$input-placeholder-color: rgba($input-color, 0.3) !default
|
||||
|
||||
$input-hover-color: $grey-darker !default
|
||||
$input-hover-border-color: $grey-light !default
|
||||
|
||||
$input-focus-color: $grey-darker !default
|
||||
$input-focus-border-color: $link !default
|
||||
$input-focus-box-shadow-size: 0 0 0 0.125em !default
|
||||
$input-focus-box-shadow-color: rgba($link, 0.25) !default
|
||||
|
||||
$input-disabled-color: $text-light !default
|
||||
$input-disabled-background-color: $background !default
|
||||
$input-disabled-border-color: $background !default
|
||||
$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
|
||||
|
||||
$input-arrow: $link !default
|
||||
|
||||
$input-icon-color: $grey-lighter !default
|
||||
$input-icon-active-color: $grey !default
|
||||
|
||||
$input-radius: $radius !default
|
||||
|
||||
=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,205 @@
|
|||
$label-color: $grey-darker !default
|
||||
$label-weight: $weight-bold !default
|
||||
|
||||
$help-size: $size-small !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 $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
color: $color
|
||||
|
||||
// Containers
|
||||
|
||||
.field
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
// Modifiers
|
||||
&.has-addons
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
.control
|
||||
&:not(:last-child)
|
||||
margin-right: -1px
|
||||
&:not(:first-child):not(:last-child)
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
border-radius: 0
|
||||
&:first-child:not(:only-child)
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
&:last-child:not(:only-child)
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
&:not([disabled])
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
z-index: 2
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
z-index: 3
|
||||
&:hover
|
||||
z-index: 4
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
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
|
||||
margin-right: 0.75rem
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
&.is-grouped-centered
|
||||
justify-content: center
|
||||
&.is-grouped-right
|
||||
justify-content: flex-end
|
||||
&.is-grouped-multiline
|
||||
flex-wrap: wrap
|
||||
& > .control
|
||||
&:last-child,
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
&:last-child
|
||||
margin-bottom: -0.75rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0
|
||||
&.is-horizontal
|
||||
+tablet
|
||||
display: flex
|
||||
|
||||
.field-label
|
||||
.label
|
||||
font-size: inherit
|
||||
+mobile
|
||||
margin-bottom: 0.5rem
|
||||
+tablet
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
margin-right: 1.5rem
|
||||
text-align: right
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
padding-top: 0.375em
|
||||
&.is-normal
|
||||
padding-top: 0.375em
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
padding-top: 0.375em
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
padding-top: 0.375em
|
||||
|
||||
.field-body
|
||||
.field .field
|
||||
margin-bottom: 0
|
||||
+tablet
|
||||
display: flex
|
||||
flex-basis: 0
|
||||
flex-grow: 5
|
||||
flex-shrink: 1
|
||||
.field
|
||||
margin-bottom: 0
|
||||
& > .field
|
||||
flex-shrink: 1
|
||||
&:not(.is-narrow)
|
||||
flex-grow: 1
|
||||
&:not(:last-child)
|
||||
margin-right: 0.75rem
|
||||
|
||||
.control
|
||||
box-sizing: border-box
|
||||
clear: both
|
||||
font-size: $size-normal
|
||||
position: relative
|
||||
text-align: left
|
||||
// Modifiers
|
||||
&.has-icons-left,
|
||||
&.has-icons-right
|
||||
.input,
|
||||
.select
|
||||
&:focus
|
||||
& ~ .icon
|
||||
color: $input-icon-active-color
|
||||
&.is-small ~ .icon
|
||||
font-size: $size-small
|
||||
&.is-medium ~ .icon
|
||||
font-size: $size-medium
|
||||
&.is-large ~ .icon
|
||||
font-size: $size-large
|
||||
.icon
|
||||
color: $input-icon-color
|
||||
height: $input-height
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: 0
|
||||
width: $input-height
|
||||
z-index: 4
|
||||
&.has-icons-left
|
||||
.input,
|
||||
.select select
|
||||
padding-left: $input-height
|
||||
.icon.is-left
|
||||
left: 0
|
||||
&.has-icons-right
|
||||
.input,
|
||||
.select select
|
||||
padding-right: $input-height
|
||||
.icon.is-right
|
||||
right: 0
|
||||
&.is-loading
|
||||
&::after
|
||||
@extend %loader
|
||||
position: absolute !important
|
||||
right: 0.625em
|
||||
top: 0.625em
|
||||
z-index: 4
|
||||
&.is-small:after
|
||||
font-size: $size-small
|
||||
&.is-medium:after
|
||||
font-size: $size-medium
|
||||
&.is-large:after
|
||||
font-size: $size-large
|
|
@ -0,0 +1,4 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import "columns.sass"
|
||||
@import "tiles.sass"
|
|
@ -0,0 +1,504 @@
|
|||
$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
|
||||
.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
|
||||
margin-left: 75%
|
||||
.columns.is-mobile > &.is-offset-two-thirds
|
||||
margin-left: 66.6666%
|
||||
.columns.is-mobile > &.is-offset-half
|
||||
margin-left: 50%
|
||||
.columns.is-mobile > &.is-offset-one-third
|
||||
margin-left: 33.3333%
|
||||
.columns.is-mobile > &.is-offset-one-quarter
|
||||
margin-left: 25%
|
||||
.columns.is-mobile > &.is-offset-one-fifth
|
||||
margin-left: 20%
|
||||
.columns.is-mobile > &.is-offset-two-fifths
|
||||
margin-left: 40%
|
||||
.columns.is-mobile > &.is-offset-three-fifths
|
||||
margin-left: 60%
|
||||
.columns.is-mobile > &.is-offset-four-fifths
|
||||
margin-left: 80%
|
||||
@for $i from 0 through 12
|
||||
.columns.is-mobile > &.is-#{$i}
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
.columns.is-mobile > &.is-offset-#{$i}
|
||||
margin-left: percentage($i / 12)
|
||||
+mobile
|
||||
&.is-narrow-mobile
|
||||
flex: none
|
||||
&.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
|
||||
margin-left: 75%
|
||||
&.is-offset-two-thirds-mobile
|
||||
margin-left: 66.6666%
|
||||
&.is-offset-half-mobile
|
||||
margin-left: 50%
|
||||
&.is-offset-one-third-mobile
|
||||
margin-left: 33.3333%
|
||||
&.is-offset-one-quarter-mobile
|
||||
margin-left: 25%
|
||||
&.is-offset-one-fifth-mobile
|
||||
margin-left: 20%
|
||||
&.is-offset-two-fifths-mobile
|
||||
margin-left: 40%
|
||||
&.is-offset-three-fifths-mobile
|
||||
margin-left: 60%
|
||||
&.is-offset-four-fifths-mobile
|
||||
margin-left: 80%
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i}-mobile
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i}-mobile
|
||||
margin-left: percentage($i / 12)
|
||||
+tablet
|
||||
&.is-narrow,
|
||||
&.is-narrow-tablet
|
||||
flex: none
|
||||
&.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
|
||||
margin-left: 75%
|
||||
&.is-offset-two-thirds,
|
||||
&.is-offset-two-thirds-tablet
|
||||
margin-left: 66.6666%
|
||||
&.is-offset-half,
|
||||
&.is-offset-half-tablet
|
||||
margin-left: 50%
|
||||
&.is-offset-one-third,
|
||||
&.is-offset-one-third-tablet
|
||||
margin-left: 33.3333%
|
||||
&.is-offset-one-quarter,
|
||||
&.is-offset-one-quarter-tablet
|
||||
margin-left: 25%
|
||||
&.is-offset-one-fifth,
|
||||
&.is-offset-one-fifth-tablet
|
||||
margin-left: 20%
|
||||
&.is-offset-two-fifths,
|
||||
&.is-offset-two-fifths-tablet
|
||||
margin-left: 40%
|
||||
&.is-offset-three-fifths,
|
||||
&.is-offset-three-fifths-tablet
|
||||
margin-left: 60%
|
||||
&.is-offset-four-fifths,
|
||||
&.is-offset-four-fifths-tablet
|
||||
margin-left: 80%
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i},
|
||||
&.is-#{$i}-tablet
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i},
|
||||
&.is-offset-#{$i}-tablet
|
||||
margin-left: percentage($i / 12)
|
||||
+touch
|
||||
&.is-narrow-touch
|
||||
flex: none
|
||||
&.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
|
||||
margin-left: 75%
|
||||
&.is-offset-two-thirds-touch
|
||||
margin-left: 66.6666%
|
||||
&.is-offset-half-touch
|
||||
margin-left: 50%
|
||||
&.is-offset-one-third-touch
|
||||
margin-left: 33.3333%
|
||||
&.is-offset-one-quarter-touch
|
||||
margin-left: 25%
|
||||
&.is-offset-one-fifth-touch
|
||||
margin-left: 20%
|
||||
&.is-offset-two-fifths-touch
|
||||
margin-left: 40%
|
||||
&.is-offset-three-fifths-touch
|
||||
margin-left: 60%
|
||||
&.is-offset-four-fifths-touch
|
||||
margin-left: 80%
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i}-touch
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i}-touch
|
||||
margin-left: percentage($i / 12)
|
||||
+desktop
|
||||
&.is-narrow-desktop
|
||||
flex: none
|
||||
&.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
|
||||
margin-left: 75%
|
||||
&.is-offset-two-thirds-desktop
|
||||
margin-left: 66.6666%
|
||||
&.is-offset-half-desktop
|
||||
margin-left: 50%
|
||||
&.is-offset-one-third-desktop
|
||||
margin-left: 33.3333%
|
||||
&.is-offset-one-quarter-desktop
|
||||
margin-left: 25%
|
||||
&.is-offset-one-fifth-desktop
|
||||
margin-left: 20%
|
||||
&.is-offset-two-fifths-desktop
|
||||
margin-left: 40%
|
||||
&.is-offset-three-fifths-desktop
|
||||
margin-left: 60%
|
||||
&.is-offset-four-fifths-desktop
|
||||
margin-left: 80%
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i}-desktop
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i}-desktop
|
||||
margin-left: percentage($i / 12)
|
||||
+widescreen
|
||||
&.is-narrow-widescreen
|
||||
flex: none
|
||||
&.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
|
||||
margin-left: 75%
|
||||
&.is-offset-two-thirds-widescreen
|
||||
margin-left: 66.6666%
|
||||
&.is-offset-half-widescreen
|
||||
margin-left: 50%
|
||||
&.is-offset-one-third-widescreen
|
||||
margin-left: 33.3333%
|
||||
&.is-offset-one-quarter-widescreen
|
||||
margin-left: 25%
|
||||
&.is-offset-one-fifth-widescreen
|
||||
margin-left: 20%
|
||||
&.is-offset-two-fifths-widescreen
|
||||
margin-left: 40%
|
||||
&.is-offset-three-fifths-widescreen
|
||||
margin-left: 60%
|
||||
&.is-offset-four-fifths-widescreen
|
||||
margin-left: 80%
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i}-widescreen
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i}-widescreen
|
||||
margin-left: percentage($i / 12)
|
||||
+fullhd
|
||||
&.is-narrow-fullhd
|
||||
flex: none
|
||||
&.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
|
||||
margin-left: 75%
|
||||
&.is-offset-two-thirds-fullhd
|
||||
margin-left: 66.6666%
|
||||
&.is-offset-half-fullhd
|
||||
margin-left: 50%
|
||||
&.is-offset-one-third-fullhd
|
||||
margin-left: 33.3333%
|
||||
&.is-offset-one-quarter-fullhd
|
||||
margin-left: 25%
|
||||
&.is-offset-one-fifth-fullhd
|
||||
margin-left: 20%
|
||||
&.is-offset-two-fifths-fullhd
|
||||
margin-left: 40%
|
||||
&.is-offset-three-fifths-fullhd
|
||||
margin-left: 60%
|
||||
&.is-offset-four-fifths-fullhd
|
||||
margin-left: 80%
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i}-fullhd
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i}-fullhd
|
||||
margin-left: percentage($i / 12)
|
||||
|
||||
.columns
|
||||
margin-left: (-$column-gap)
|
||||
margin-right: (-$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
|
||||
margin-left: 0
|
||||
margin-right: 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
|
||||
margin-left: calc(-1 * var(--columnGap))
|
||||
margin-right: 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,34 @@
|
|||
$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: ($i / 12) * 100%
|
|
@ -0,0 +1,5 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import "hero.sass"
|
||||
@import "section.sass"
|
||||
@import "footer.sass"
|
|
@ -0,0 +1,9 @@
|
|||
$footer-background-color: $white-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,143 @@
|
|||
// 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 $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: rgba($color-invert, 0.9)
|
||||
a:not(.button),
|
||||
strong
|
||||
color: $color-invert
|
||||
.navbar-menu
|
||||
+touch
|
||||
background-color: $color
|
||||
.navbar-item,
|
||||
.navbar-link
|
||||
color: rgba($color-invert, 0.7)
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: darken($color, 5%)
|
||||
color: $color-invert
|
||||
.tabs
|
||||
a
|
||||
color: $color-invert
|
||||
opacity: 0.9
|
||||
&:hover
|
||||
opacity: 1
|
||||
li
|
||||
&.is-active a
|
||||
opacity: 1
|
||||
&.is-boxed,
|
||||
&.is-toggle
|
||||
a
|
||||
color: $color-invert
|
||||
&:hover
|
||||
background-color: rgba($black, 0.1)
|
||||
li.is-active a
|
||||
&,
|
||||
&:hover
|
||||
background-color: $color-invert
|
||||
border-color: $color-invert
|
||||
color: $color
|
||||
// Modifiers
|
||||
&.is-bold
|
||||
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
|
||||
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
|
||||
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
|
||||
+mobile
|
||||
.navbar-menu
|
||||
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
|
||||
// Sizes
|
||||
&.is-small
|
||||
.hero-body
|
||||
padding-bottom: 1.5rem
|
||||
padding-top: 1.5rem
|
||||
&.is-medium
|
||||
+tablet
|
||||
.hero-body
|
||||
padding-bottom: 9rem
|
||||
padding-top: 9rem
|
||||
&.is-large
|
||||
+tablet
|
||||
.hero-body
|
||||
padding-bottom: 18rem
|
||||
padding-top: 18rem
|
||||
&.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)
|
||||
margin-right: 1.5rem
|
||||
|
||||
// Containers
|
||||
|
||||
.hero-head,
|
||||
.hero-foot
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
|
||||
.hero-body
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
padding: 3rem 1.5rem
|
|
@ -0,0 +1,13 @@
|
|||
$section-padding: 3rem 1.5rem !default
|
||||
$section-padding-medium: 9rem 1.5rem !default
|
||||
$section-padding-large: 18rem 1.5rem !default
|
||||
|
||||
.section
|
||||
padding: $section-padding
|
||||
// Responsiveness
|
||||
+desktop
|
||||
// Sizes
|
||||
&.is-medium
|
||||
padding: $section-padding-medium
|
||||
&.is-large
|
||||
padding: $section-padding-large
|
|
@ -0,0 +1,8 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import "initial-variables.sass"
|
||||
@import "functions.sass"
|
||||
@import "derived-variables.sass"
|
||||
@import "animations.sass"
|
||||
@import "mixins.sass"
|
||||
@import "controls.sass"
|
|
@ -0,0 +1,5 @@
|
|||
@keyframes spinAround
|
||||
from
|
||||
transform: rotate(0deg)
|
||||
to
|
||||
transform: rotate(359deg)
|
|
@ -0,0 +1,50 @@
|
|||
$control-radius: $radius !default
|
||||
$control-radius-small: $radius-small !default
|
||||
|
||||
$control-border-width: 1px !default
|
||||
|
||||
$control-height: 2.25em !default
|
||||
$control-line-height: 1.5 !default
|
||||
|
||||
$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default
|
||||
$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
|
||||
|
||||
=control
|
||||
-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
|
||||
|
||||
%control
|
||||
+control
|
||||
|
||||
// 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,85 @@
|
|||
$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: $turquoise-invert !default
|
||||
$info-invert: $cyan-invert !default
|
||||
$success-invert: $green-invert !default
|
||||
$warning-invert: $yellow-invert !default
|
||||
$danger-invert: $red-invert !default
|
||||
$light-invert: $dark !default
|
||||
$dark-invert: $light !default
|
||||
|
||||
// General colors
|
||||
|
||||
$background: $white-ter !default
|
||||
|
||||
$border: $grey-lighter !default
|
||||
$border-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: $red !default
|
||||
$code-background: $background !default
|
||||
|
||||
$pre: $text !default
|
||||
$pre-background: $background !default
|
||||
|
||||
// Link colors
|
||||
|
||||
$link: $blue !default
|
||||
$link-invert: $blue-invert !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
|
||||
|
||||
// Lists and maps
|
||||
$custom-colors: null !default
|
||||
$custom-shades: null !default
|
||||
|
||||
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
|
||||
$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,62 @@
|
|||
@function mergeColorMaps($bulma-colors, $custom-colors)
|
||||
// we return at least bulma hardcoded colors
|
||||
$merged-colors: $bulma-colors
|
||||
|
||||
// we want a map as input
|
||||
@if type-of($custom-colors) == 'map'
|
||||
@each $name, $components in $custom-colors
|
||||
// color name should be a string and colors pair a list with at least one element
|
||||
@if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
|
||||
$color-base: null
|
||||
|
||||
// the param can either be a single color
|
||||
// or a list of 2 colors
|
||||
@if type-of($components) == 'color'
|
||||
$color-base: $components
|
||||
@else if type-of($components) == 'list'
|
||||
$color-base: nth($components, 1)
|
||||
|
||||
$color-invert: null
|
||||
// is an inverted color provided in the list
|
||||
@if length($components) > 1
|
||||
$color-invert: nth($components, 2)
|
||||
|
||||
// we only want a color as base color
|
||||
@if type-of($color-base) == 'color'
|
||||
// if inverted color is not provided or is not a color we compute it
|
||||
@if type-of($color-invert) != 'color'
|
||||
$color-invert: findColorInvert($color-base)
|
||||
|
||||
// we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
|
||||
$merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
|
||||
|
||||
@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: $value / $number
|
||||
@return $value
|
||||
|
||||
@function colorLuminance($color)
|
||||
$color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
|
||||
@each $name, $value in $color-rgb
|
||||
$adjusted: 0
|
||||
$value: $value / 255
|
||||
@if $value < 0.03928
|
||||
$value: $value / 12.92
|
||||
@else
|
||||
$value: ($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
|
|
@ -0,0 +1,76 @@
|
|||
// 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
|
||||
|
||||
$white-ter: hsl(0, 0%, 96%) !default
|
||||
$white-bis: hsl(0, 0%, 98%) !default
|
||||
$white: hsl(0, 0%, 100%) !default
|
||||
|
||||
$orange: hsl(14, 100%, 53%) !default
|
||||
$yellow: hsl(48, 100%, 67%) !default
|
||||
$green: hsl(141, 71%, 48%) !default
|
||||
$turquoise: hsl(171, 100%, 41%) !default
|
||||
$cyan: hsl(204, 86%, 53%) !default
|
||||
$blue: hsl(217, 71%, 53%) !default
|
||||
$purple: hsl(271, 100%, 71%) !default
|
||||
$red: hsl(348, 100%, 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: 290486px !default
|
||||
$speed: 86ms !default
|
||||
|
||||
// Flags
|
||||
|
||||
$variable-columns: true !default
|
|
@ -0,0 +1,262 @@
|
|||
@import "initial-variables"
|
||||
|
||||
=clearfix
|
||||
&::after
|
||||
clear: both
|
||||
content: " "
|
||||
display: table
|
||||
|
||||
=center($width, $height: 0)
|
||||
position: absolute
|
||||
@if $height != 0
|
||||
left: calc(50% - (#{$width} / 2))
|
||||
top: calc(50% - (#{$height} / 2))
|
||||
@else
|
||||
left: calc(50% - (#{$width} / 2))
|
||||
top: calc(50% - (#{$width} / 2))
|
||||
|
||||
=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: rgba(black, 0.05)
|
||||
color: white
|
||||
// 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
|
||||
|
||||
// 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
|
||||
|
||||
// Placeholders
|
||||
|
||||
=unselectable
|
||||
-webkit-touch-callout: none
|
||||
-webkit-user-select: none
|
||||
-moz-user-select: none
|
||||
-ms-user-select: none
|
||||
user-select: none
|
||||
|
||||
%unselectable
|
||||
+unselectable
|
||||
|
||||
=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
|
||||
|
||||
%arrow
|
||||
+arrow
|
||||
|
||||
=block($spacing: $block-spacing)
|
||||
&:not(:last-child)
|
||||
margin-bottom: $spacing
|
||||
|
||||
%block
|
||||
+block
|
||||
|
||||
=delete
|
||||
@extend %unselectable
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
background-color: rgba($black, 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: $white
|
||||
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: rgba($black, 0.3)
|
||||
&:active
|
||||
background-color: rgba($black, 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
|
||||
|
||||
%delete
|
||||
+delete
|
||||
|
||||
=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
|
||||
|
||||
%loader
|
||||
+loader
|
||||
|
||||
=overlay($offset: 0)
|
||||
bottom: $offset
|
||||
left: $offset
|
||||
position: absolute
|
||||
right: $offset
|
||||
top: $offset
|
||||
|
||||
%overlay
|
||||
+overlay
|
|
@ -0,0 +1,109 @@
|
|||
# -*- coding: utf-8 -*-
|
||||
|
||||
import os
|
||||
import shutil
|
||||
import sys
|
||||
import datetime
|
||||
|
||||
from invoke import task
|
||||
from invoke.util import cd
|
||||
from pelican.server import ComplexHTTPRequestHandler, RootedHTTPServer
|
||||
from pelican.settings import DEFAULT_CONFIG, get_settings_from_file
|
||||
|
||||
SETTINGS_FILE_BASE = 'pelicanconf.py'
|
||||
SETTINGS = {}
|
||||
SETTINGS.update(DEFAULT_CONFIG)
|
||||
LOCAL_SETTINGS = get_settings_from_file(SETTINGS_FILE_BASE)
|
||||
SETTINGS.update(LOCAL_SETTINGS)
|
||||
|
||||
CONFIG = {
|
||||
'settings_base': SETTINGS_FILE_BASE,
|
||||
'settings_publish': 'publishconf.py',
|
||||
# Output path. Can be absolute or relative to tasks.py. Default: 'output'
|
||||
'deploy_path': SETTINGS['OUTPUT_PATH'],
|
||||
# Port for `serve`
|
||||
'port': 8000,
|
||||
}
|
||||
|
||||
@task
|
||||
def clean(c):
|
||||
"""Remove generated files"""
|
||||
if os.path.isdir(CONFIG['deploy_path']):
|
||||
shutil.rmtree(CONFIG['deploy_path'])
|
||||
os.makedirs(CONFIG['deploy_path'])
|
||||
|
||||
@task
|
||||
def build(c):
|
||||
"""Build local version of site"""
|
||||
c.run('pelican -s {settings_base}'.format(**CONFIG))
|
||||
|
||||
@task
|
||||
def rebuild(c):
|
||||
"""`build` with the delete switch"""
|
||||
c.run('pelican -d -s {settings_base}'.format(**CONFIG))
|
||||
|
||||
@task
|
||||
def regenerate(c):
|
||||
"""Automatically regenerate site upon file modification"""
|
||||
c.run('pelican -r -s {settings_base}'.format(**CONFIG))
|
||||
|
||||
@task
|
||||
def serve(c):
|
||||
"""Serve site at http://localhost:$PORT/ (default port is 8000)"""
|
||||
|
||||
class AddressReuseTCPServer(RootedHTTPServer):
|
||||
allow_reuse_address = True
|
||||
|
||||
server = AddressReuseTCPServer(
|
||||
CONFIG['deploy_path'],
|
||||
('', CONFIG['port']),
|
||||
ComplexHTTPRequestHandler)
|
||||
|
||||
sys.stderr.write('Serving on port {port} ...\n'.format(**CONFIG))
|
||||
server.serve_forever()
|
||||
|
||||
@task
|
||||
def reserve(c):
|
||||
"""`build`, then `serve`"""
|
||||
build(c)
|
||||
serve(c)
|
||||
|
||||
@task
|
||||
def preview(c):
|
||||
"""Build production version of site"""
|
||||
c.run('pelican -s {settings_publish}'.format(**CONFIG))
|
||||
|
||||
@task
|
||||
def livereload(c):
|
||||
"""Automatically reload browser tab upon file modification."""
|
||||
from livereload import Server
|
||||
build(c)
|
||||
server = Server()
|
||||
# Watch the base settings file
|
||||
server.watch(CONFIG['settings_base'], lambda: build(c))
|
||||
# Watch content source files
|
||||
content_file_extensions = ['.md', '.rst']
|
||||
for extension in content_file_extensions:
|
||||
content_blob = '{0}/**/*{1}'.format(SETTINGS['PATH'], extension)
|
||||
server.watch(content_blob, lambda: build(c))
|
||||
# Watch the theme's templates and static assets
|
||||
theme_path = SETTINGS['THEME']
|
||||
server.watch('{}/templates/*.html'.format(theme_path), lambda: build(c))
|
||||
static_file_extensions = ['.css', '.js']
|
||||
for extension in static_file_extensions:
|
||||
static_file = '{0}/static/**/*{1}'.format(theme_path, extension)
|
||||
server.watch(static_file, lambda: build(c))
|
||||
# Serve output path on configured port
|
||||
server.serve(port=CONFIG['port'], root=CONFIG['deploy_path'])
|
||||
|
||||
|
||||
@task
|
||||
def publish(c):
|
||||
"""Publish to production via rsync"""
|
||||
c.run('pelican -s {settings_publish}'.format(**CONFIG))
|
||||
c.run(
|
||||
'rsync --delete --exclude ".DS_Store" -pthrvz -c '
|
||||
'{} {production}:{dest_path}'.format(
|
||||
CONFIG['deploy_path'].rstrip('/') + '/',
|
||||
**CONFIG))
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
.highlight .hll { background-color: #49483e }
|
||||
.highlight { background: #272822; color: #f8f8f2 }
|
||||
.highlight .c { color: #75715e } /* Comment */
|
||||
.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
|
||||
.highlight .k { color: #66d9ef } /* Keyword */
|
||||
.highlight .l { color: #ae81ff } /* Literal */
|
||||
.highlight .n { color: #f8f8f2 } /* Name */
|
||||
.highlight .o { color: #f92672 } /* Operator */
|
||||
.highlight .p { color: #f8f8f2 } /* Punctuation */
|
||||
.highlight .ch { color: #75715e } /* Comment.Hashbang */
|
||||
.highlight .cm { color: #75715e } /* Comment.Multiline */
|
||||
.highlight .cp { color: #75715e } /* Comment.Preproc */
|
||||
.highlight .cpf { color: #75715e } /* Comment.PreprocFile */
|
||||
.highlight .c1 { color: #75715e } /* Comment.Single */
|
||||
.highlight .cs { color: #75715e } /* Comment.Special */
|
||||
.highlight .gd { color: #f92672 } /* Generic.Deleted */
|
||||
.highlight .ge { font-style: italic } /* Generic.Emph */
|
||||
.highlight .gi { color: #a6e22e } /* Generic.Inserted */
|
||||
.highlight .go { color: #66d9ef } /* Generic.Output */
|
||||
.highlight .gp { color: #f92672; font-weight: bold } /* Generic.Prompt */
|
||||
.highlight .gs { font-weight: bold } /* Generic.Strong */
|
||||
.highlight .gu { color: #75715e } /* Generic.Subheading */
|
||||
.highlight .kc { color: #66d9ef } /* Keyword.Constant */
|
||||
.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
|
||||
.highlight .kn { color: #f92672 } /* Keyword.Namespace */
|
||||
.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
|
||||
.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #66d9ef } /* Keyword.Type */
|
||||
.highlight .ld { color: #e6db74 } /* Literal.Date */
|
||||
.highlight .m { color: #ae81ff } /* Literal.Number */
|
||||
.highlight .s { color: #e6db74 } /* Literal.String */
|
||||
.highlight .na { color: #a6e22e } /* Name.Attribute */
|
||||
.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
|
||||
.highlight .nc { color: #a6e22e } /* Name.Class */
|
||||
.highlight .no { color: #66d9ef } /* Name.Constant */
|
||||
.highlight .nd { color: #a6e22e } /* Name.Decorator */
|
||||
.highlight .ni { color: #f8f8f2 } /* Name.Entity */
|
||||
.highlight .ne { color: #a6e22e } /* Name.Exception */
|
||||
.highlight .nf { color: #a6e22e } /* Name.Function */
|
||||
.highlight .nl { color: #f8f8f2 } /* Name.Label */
|
||||
.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
|
||||
.highlight .nx { color: #a6e22e } /* Name.Other */
|
||||
.highlight .py { color: #f8f8f2 } /* Name.Property */
|
||||
.highlight .nt { color: #f92672 } /* Name.Tag */
|
||||
.highlight .nv { color: #f8f8f2 } /* Name.Variable */
|
||||
.highlight .ow { color: #f92672 } /* Operator.Word */
|
||||
.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
|
||||
.highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
|
||||
.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
|
||||
.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
|
||||
.highlight .sa { color: #e6db74 } /* Literal.String.Affix */
|
||||
.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #e6db74 } /* Literal.String.Char */
|
||||
.highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
|
||||
.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
|
||||
.highlight .se { color: #ae81ff } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #e6db74 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
|
||||
.highlight .fm { color: #a6e22e } /* Name.Function.Magic */
|
||||
.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
|
||||
.highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */
|
||||
.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
|
|
@ -0,0 +1 @@
|
|||
.highlight .hll{background-color:#49483e}.highlight{background:#272822;color:#f8f8f2}.highlight .c{color:#75715e}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#66d9ef}.highlight .l{color:#ae81ff}.highlight .n{color:#f8f8f2}.highlight .o{color:#f92672}.highlight .p{color:#f8f8f2}.highlight .ch{color:#75715e}.highlight .cm{color:#75715e}.highlight .cp{color:#75715e}.highlight .cpf{color:#75715e}.highlight .c1{color:#75715e}.highlight .cs{color:#75715e}.highlight .gd{color:#f92672}.highlight .ge{font-style:italic}.highlight .gi{color:#a6e22e}.highlight .go{color:#66d9ef}.highlight .gp{color:#f92672;font-weight:bold}.highlight .gs{font-weight:bold}.highlight .gu{color:#75715e}.highlight .kc{color:#66d9ef}.highlight .kd{color:#66d9ef}.highlight .kn{color:#f92672}.highlight .kp{color:#66d9ef}.highlight .kr{color:#66d9ef}.highlight .kt{color:#66d9ef}.highlight .ld{color:#e6db74}.highlight .m{color:#ae81ff}.highlight .s{color:#e6db74}.highlight .na{color:#a6e22e}.highlight .nb{color:#f8f8f2}.highlight .nc{color:#a6e22e}.highlight .no{color:#66d9ef}.highlight .nd{color:#a6e22e}.highlight .ni{color:#f8f8f2}.highlight .ne{color:#a6e22e}.highlight .nf{color:#a6e22e}.highlight .nl{color:#f8f8f2}.highlight .nn{color:#f8f8f2}.highlight .nx{color:#a6e22e}.highlight .py{color:#f8f8f2}.highlight .nt{color:#f92672}.highlight .nv{color:#f8f8f2}.highlight .ow{color:#f92672}.highlight .w{color:#f8f8f2}.highlight .mb{color:#ae81ff}.highlight .mf{color:#ae81ff}.highlight .mh{color:#ae81ff}.highlight .mi{color:#ae81ff}.highlight .mo{color:#ae81ff}.highlight .sa{color:#e6db74}.highlight .sb{color:#e6db74}.highlight .sc{color:#e6db74}.highlight .dl{color:#e6db74}.highlight .sd{color:#e6db74}.highlight .s2{color:#e6db74}.highlight .se{color:#ae81ff}.highlight .sh{color:#e6db74}.highlight .si{color:#e6db74}.highlight .sx{color:#e6db74}.highlight .sr{color:#e6db74}.highlight .s1{color:#e6db74}.highlight .ss{color:#e6db74}.highlight .bp{color:#f8f8f2}.highlight .fm{color:#a6e22e}.highlight .vc{color:#f8f8f2}.highlight .vg{color:#f8f8f2}.highlight .vi{color:#f8f8f2}.highlight .vm{color:#f8f8f2}.highlight .il{color:#ae81ff}
|
After Width: | Height: | Size: 50 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 35 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 6.3 KiB |
After Width: | Height: | Size: 7.2 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><circle fill="#FFCC4D" cx="18" cy="18" r="18"/><path fill="#664500" d="M27.335 23.629c-.178-.161-.444-.171-.635-.029-.039.029-3.922 2.9-8.7 2.9-4.766 0-8.662-2.871-8.7-2.9-.191-.142-.457-.13-.635.029-.177.16-.217.424-.094.628C8.7 24.472 11.788 29.5 18 29.5s9.301-5.028 9.429-5.243c.123-.205.084-.468-.094-.628z"/><path fill="#65471B" d="M18 26.591c-.148 0-.291-.011-.438-.016v4.516h.875v-4.517c-.145.005-.289.017-.437.017z"/><path fill="#FFF" d="M22 26c.016-.004-1.45.378-2.446.486-.366.042-.737.076-1.117.089v4.517H20c1.1 0 2-.9 2-2V26zm-8 0c-.016-.004 1.45.378 2.446.486.366.042.737.076 1.117.089v4.517H16c-1.1 0-2-.9-2-2V26z"/><path fill="#65471B" d="M27.335 23.629c-.178-.161-.444-.171-.635-.029-.03.022-2.259 1.668-5.411 2.47-.443.113-1.864.43-3.286.431-1.424 0-2.849-.318-3.292-.431-3.152-.802-5.381-2.448-5.411-2.47-.19-.142-.457-.132-.635.029-.178.16-.217.423-.094.628.097.162 1.885 3.067 5.429 4.481v-1.829c-.016-.004 1.45.378 2.446.486.366.042.737.076 1.117.089.146.005.289.016.437.016.148 0 .291-.011.438-.016.38-.013.751-.046 1.117-.089.996-.108 2.462-.49 2.446-.486v1.829c3.544-1.414 5.332-4.319 5.429-4.481.122-.205.083-.468-.095-.628zm-.711-9.605c0 1.714-.938 3.104-2.096 3.104-1.157 0-2.096-1.39-2.096-3.104s.938-3.104 2.096-3.104c1.158 0 2.096 1.39 2.096 3.104zm-17.167 0c0 1.714.938 3.104 2.096 3.104 1.157 0 2.096-1.39 2.096-3.104s-.938-3.104-2.096-3.104c-1.158 0-2.096 1.39-2.096 3.104z"/><path fill="#292F33" d="M34.808 9.627c-.171-.166-1.267.274-2.376-.291-2.288-1.166-8.07-2.291-11.834.376-.403.285-2.087.333-2.558.313-.471.021-2.155-.027-2.558-.313-3.763-2.667-9.545-1.542-11.833-.376-1.109.565-2.205.125-2.376.291-.247.239-.247 1.196.001 1.436.246.239 1.477.515 1.722 1.232.247.718.249 4.958 2.213 6.424 1.839 1.372 6.129 1.785 8.848.238 2.372-1.349 2.289-4.189 2.724-5.881.155-.603.592-.907 1.26-.907s1.105.304 1.26.907c.435 1.691.351 4.532 2.724 5.881 2.719 1.546 7.009 1.133 8.847-.238 1.965-1.465 1.967-5.706 2.213-6.424.245-.717 1.476-.994 1.722-1.232.248-.24.249-1.197.001-1.436zm-20.194 3.65c-.077 1.105-.274 3.227-1.597 3.98-.811.462-1.868.743-2.974.743h-.001c-1.225 0-2.923-.347-3.587-.842-.83-.619-1.146-3.167-1.265-4.12-.076-.607-.28-2.09.388-2.318 1.06-.361 2.539-.643 4.052-.643.693 0 3.021.043 4.155.741 1.005.617.872 1.851.829 2.459zm16.278-.253c-.119.954-.435 3.515-1.265 4.134-.664.495-2.362.842-3.587.842h-.001c-1.107 0-2.163-.281-2.975-.743-1.323-.752-1.52-2.861-1.597-3.966-.042-.608-.176-1.851.829-2.468 1.135-.698 3.462-.746 4.155-.746 1.513 0 2.991.277 4.052.638.668.228.465 1.702.389 2.309z"/></svg>
|
After Width: | Height: | Size: 2.5 KiB |
|
@ -0,0 +1 @@
|
|||
{"name":"PouyaCode.net favicon","short_name":"PouyaCode","icons":[{"src":"/theme/images/favicon/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/theme/images/favicon/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#222222","display":"standalone"}
|
After Width: | Height: | Size: 7.5 KiB |
After Width: | Height: | Size: 60 KiB |
After Width: | Height: | Size: 56 KiB |
After Width: | Height: | Size: 50 KiB |
|
@ -0,0 +1,50 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// Get all "navbar-burger" elements
|
||||
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
||||
|
||||
// Check if there are any navbar burgers
|
||||
if ($navbarBurgers.length > 0) {
|
||||
|
||||
// Add a click event on each of them
|
||||
$navbarBurgers.forEach( el => {
|
||||
el.addEventListener('click', () => {
|
||||
|
||||
// Get the target from the "data-target" attribute
|
||||
const target = el.dataset.target;
|
||||
const $target = document.getElementById(target);
|
||||
|
||||
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
|
||||
el.classList.toggle('is-active');
|
||||
$target.classList.toggle('is-active');
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
function imageshow(){
|
||||
document.getElementById('imagemodal').style.display = 'flex';
|
||||
}
|
||||
function imagehide(){
|
||||
document.getElementById('imagemodal').style.display = 'none';
|
||||
}
|
||||
|
||||
document.onreadystatechange = function () {
|
||||
if (document.readyState == "complete") {
|
||||
var script = document.createElement('script'),
|
||||
scripts = document.getElementsByTagName('script')[0];
|
||||
script.src = "https://pouyacode.net/theme/js/fa.min.js?v=5.12.0";
|
||||
scripts.parentNode.insertBefore(script, scripts);
|
||||
|
||||
// Email obfuscation using ROT13 for navbar.
|
||||
let rot13 = document.getElementById('email').href.replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);});
|
||||
document.getElementById('email').href = rot13;
|
||||
|
||||
// Email obfuscation using ROT13 for articles.
|
||||
let subject = document.getElementsByClassName('article-title')[0].innerHTML;
|
||||
subject = subject.substr(subject.search(' ')+6);
|
||||
rot13 += '?subject=' + subject;
|
||||
document.getElementById('feedback').innerHTML = '<a id="feedback" href="' + rot13 + '"><i class="fas fa-at"></i> Send feedback</a>';
|
||||
}
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
document.addEventListener('DOMContentLoaded',()=>{const $navbarBurgers=Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'),0);if($navbarBurgers.length>0){$navbarBurgers.forEach(el=>{el.addEventListener('click',()=>{const target=el.dataset.target;const $target=document.getElementById(target);el.classList.toggle('is-active');$target.classList.toggle('is-active');});});}});function imageshow(){document.getElementById('imagemodal').style.display='flex';}
|
||||
function imagehide(){document.getElementById('imagemodal').style.display='none';}
|
||||
document.onreadystatechange=function(){if(document.readyState=="complete"){var script=document.createElement('script'),scripts=document.getElementsByTagName('script')[0];script.src="https://pouyacode.net/theme/js/fa.min.js?v=5.12.0";scripts.parentNode.insertBefore(script,scripts);let rot13=document.getElementById('email').href.replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);});document.getElementById('email').href=rot13;let subject=document.getElementsByClassName('article-title')[0].innerHTML;subject=subject.substr(subject.search(' ')+6);rot13+='?subject='+subject;document.getElementById('feedback').innerHTML='<a id="feedback" href="'+rot13+'"><i class="fas fa-at"></i> Send feedback</a>';}}
|
|
@ -0,0 +1,22 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ SITENAME }} - Archives{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="column is-three-fifths">
|
||||
<h1 class="title">Archives for <strong>{{ SITENAME }}:</strong></h1>
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<table class="table is-fullwidth">
|
||||
{% for article in dates %}
|
||||
<tr>
|
||||
<th>{{ article.locale_date }}</th>
|
||||
<td><a href="{{ SITEURL }}/{{ article.url }}" title="{{ article.summary|striptags|replace('"', "'") }}"><i class="{{ article.icon }}"></i> {{ article.title }}, {{ article.description }}</a></td></tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
|
@ -0,0 +1,120 @@
|
|||
{% extends "base.html" %}
|
||||
{% block html_lang %}{{ article.lang }}{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
|
||||
{% import 'translations.html' as translations with context %}
|
||||
{% if translations.entry_hreflang(article) %}
|
||||
{{ translations.entry_hreflang(article) }}
|
||||
{% endif %}
|
||||
|
||||
{% for tag in article.tags %}
|
||||
<meta name="tags" content="{{ tag }}" />
|
||||
{% endfor %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% if article.image is defined %}
|
||||
<div id="imagemodal" class="modal">
|
||||
<div class="modal-background" onclick="imagehide()"></div>
|
||||
<div class="modal-content">
|
||||
<p class="image">
|
||||
<img src="{{ SITEURL }}/theme/images/articles/{{ article.image }}" alt="{{ article.title }}, {{ article.description }}" title="{{ article.summary|striptags|replace('"', "'") }} " width="640" height="640">
|
||||
<a href="{{ SITEURL }}/theme/images/articles/{{ article.image }}" target="_blank"><i class="fas fa-download"></i> {{ article.image }}</a>
|
||||
</p>
|
||||
</div>
|
||||
<button onclick="imagehide()" class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
{% endif %}
|
||||
<section id="content" class="section">
|
||||
<div class="container">
|
||||
<div class="column is-three-fifths" style="{% if article.image is defined %}background-image:radial-gradient(#0002,#222),url('{{ SITEURL }}/theme/images/articles/{{ article.image }}');height: 50%;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative;border:1px solid #333;border-radius:1rem;{% else %}border:1px solid #333;border-radius:1rem;background:#333;box-shadow:inset 0 0 3rem 2rem #222;{% endif %}margin-bottom:2rem">
|
||||
{% if article.image is defined %}<button onclick="imageshow()" class="button is-text icon is-medium article-image"><i class="fas fa-image"></i></button>{% endif %}
|
||||
<header>
|
||||
<h1 class="title"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags|replace('"', "'") }}" class="article-title"><span class="icon"><i class="{% if article.icon is defined %}{{ article.icon }}{% else %}fas fa-paperclip{% endif %}"></i></span> {{ article.title }}</a><small class="subtitle">{% if article.description is defined %}<br>— {{ article.description }}{% endif %}</small></h1>
|
||||
{% import 'translations.html' as translations with context %}
|
||||
{{ translations.translations_for(article) }}
|
||||
</header>
|
||||
|
||||
{% if article.readtime %}
|
||||
<p class="readtime">Estimated read time: {{article.readtime.minutes}} min.</p>
|
||||
{% endif %}
|
||||
<br>
|
||||
<footer class="post-info">
|
||||
<p>Created: <time class="published" datetime="{{ article.date.isoformat() }}">
|
||||
{{ article.locale_date }}
|
||||
</time></p>
|
||||
{% if article.modified %}
|
||||
<p>Modified: <time class="modified" datetime="{{ article.modified.isoformat() }}">
|
||||
{{ article.locale_modified }}
|
||||
</time></p>
|
||||
{% endif %}
|
||||
{% if article.authors %}
|
||||
<address class="vcard author">
|
||||
<p>By: {% for author in article.authors %}
|
||||
<a class="tag is-primary" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
|
||||
{% endfor %}</p>
|
||||
</address>
|
||||
{% endif %}
|
||||
{% if article.category %}
|
||||
<div class="category">
|
||||
<p>Category: <a href="{{ SITEURL }}/{{ article.category.url }}" class="tag is-primary">{{ article.category }}</a></p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if article.tags %}
|
||||
<div class="tags">
|
||||
<p>Tags:
|
||||
{% for tag in article.tags %}
|
||||
<a href="{{ SITEURL }}/{{ tag.url }}" class="tag is-primary">{{ tag }}</a>
|
||||
{% endfor %}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</footer><!-- /.post-info -->
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="column is-three-fifths">
|
||||
<div class="content blog-content">
|
||||
{{ article.content }}
|
||||
</div>
|
||||
{% if article.share_post is defined and article.status != 'draft' %}
|
||||
<p id="feedback">
|
||||
<i class="fas fa-at"></i> {{ EMAIL }}
|
||||
</p>
|
||||
<div class="share">
|
||||
<p id="post-share-links">
|
||||
<a href="{{article.share_post['diaspora']}}" class="button is-text" target="_blank" rel="nofollow" title="Share on Diaspora"><i class="fab fa-diaspora"></i></a>
|
||||
<a href="{{article.share_post['twitter']}}" class="button is-text" target="_blank" rel="nofollow" title="Share on Twitter"><i class="fab fa-twitter"></i></a>
|
||||
<a href="{{article.share_post['facebook']}}" class="button is-text" target="_blank" rel="nofollow" title="Share on Facebook"><i class="fab fa-facebook"></i></a>
|
||||
<a href="{{article.share_post['linkedin']}}" class="button is-text" target="_blank" rel="nofollow" title="Share on LinkedIn"><i class="fab fa-linkedin"></i></a>
|
||||
<a href="{{article.share_post['hacker-news']}}" class="button is-text" target="_blank" rel="nofollow" title="Share on HackerNews"><i class="fab fa-hacker-news"></i></a>
|
||||
<a href="{{article.share_post['email']}}" class="button is-text" target="_blank" rel="nofollow" title="Share via Email"><i class="fas fa-at"></i></a>
|
||||
<a href="{{article.share_post['reddit']}}" class="button is-text" target="_blank" rel="nofollow" title="Share via Reddit"><i class="fab fa-reddit"></i></a>
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if article.prev_article_in_category or article.next_article_in_category or article.prev_article or article.next_article %}
|
||||
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
|
||||
{% if article.prev_article_in_category %}
|
||||
<a href="{{ SITEURL }}/{{ article.prev_article_in_category.url }}" class="pagination-previous" title="{{ article.prev_article_in_category.title }}, {{ article.prev_article_in_category.description }}"><i class="{% if article.prev_article_in_category.icon %}{{ article.prev_article_in_category.icon }}{% else %}fas fa-paperclip{% endif %}"></i> {{ article.prev_article_in_category.title }}</a>
|
||||
{% elif article.prev_article %}
|
||||
<a href="{{ SITEURL }}/{{ article.prev_article.url }}" class="pagination-previous" title="{{ article.prev_article.title }}, {{ article.prev_article.description }}"><i class="{% if article.prev_article.icon %}{{ article.prev_article.icon }}{% else %}fas fa-paperclip{% endif %}"></i> {{ article.prev_article.title }}</a>
|
||||
{% else %}
|
||||
<a href="{{ SITEURL }}" class="pagination-previous" title="Latest articles"><i class="fas fa-home"></i> Home page</a>
|
||||
{% endif %}
|
||||
{% if article.next_article_in_category %}
|
||||
<a href="{{ SITEURL }}/{{ article.next_article_in_category.url }}" class="pagination-next" title="{{ article.next_article_in_category.title }}, {{ article.next_article_in_category.description }}"><i class="{% if article.next_article_in_category.icon %}{{ article.next_article_in_category.icon }}{% else %}fas fa-paperclip{% endif %}"></i> {{ article.next_article_in_category.title }}</a>
|
||||
{% elif article.next_article %}
|
||||
<a href="{{ SITEURL }}/{{ article.next_article.url }}" class="pagination-next" title="{{ article.next_article.title }}, {{ article.next_article.description }}"><i class="{% if article.next_article.icon %}{{ article.next_article.icon }}{% else %}fas fa-paperclip{% endif %}"></i> {{ article.next_article.title }}</a>
|
||||
{% else %}
|
||||
<a href="{{ SITEURL }}" class="pagination-next" title="Latest articles"><i class="fas fa-home"></i> Home page</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div><!-- /.entry-content -->
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|