@@ -0,0 +1,3 @@ | |||
_site | |||
.sass-cache | |||
.jekyll-metadata |
@@ -0,0 +1,24 @@ | |||
--- | |||
layout: default | |||
--- | |||
<style type="text/css" media="screen"> | |||
.container { | |||
margin: 10px auto; | |||
max-width: 600px; | |||
text-align: center; | |||
} | |||
h1 { | |||
margin: 30px 0; | |||
font-size: 4em; | |||
line-height: 1; | |||
letter-spacing: -1px; | |||
} | |||
</style> | |||
<div class="container"> | |||
<h1>404</h1> | |||
<p><strong>Page not found :(</strong></p> | |||
<p>The requested page could not be found.</p> | |||
</div> |
@@ -0,0 +1,30 @@ | |||
source "https://rubygems.org" | |||
# Hello! This is where you manage which Jekyll version is used to run. | |||
# When you want to use a different version, change it below, save the | |||
# file and run `bundle install`. Run Jekyll with `bundle exec`, like so: | |||
# | |||
# bundle exec jekyll serve | |||
# | |||
# This will help ensure the proper Jekyll version is running. | |||
# Happy Jekylling! | |||
gem "jekyll", "~> 3.8.5" | |||
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and | |||
# uncomment the line below. To upgrade, run `bundle update github-pages`. | |||
# gem "github-pages", group: :jekyll_plugins | |||
# If you have any plugins, put them here! | |||
group :jekyll_plugins do | |||
gem "jekyll-feed", "~> 0.6" | |||
end | |||
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem | |||
gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby] | |||
# Performance-booster for watching directories on Windows | |||
gem "wdm", "~> 0.1.0" if Gem.win_platform? | |||
gem 'jekyll-seo-tag' | |||
gem 'jekyll-sitemap' | |||
gem 'sass' |
@@ -0,0 +1,74 @@ | |||
GEM | |||
remote: https://rubygems.org/ | |||
specs: | |||
addressable (2.6.0) | |||
public_suffix (>= 2.0.2, < 4.0) | |||
colorator (1.1.0) | |||
concurrent-ruby (1.1.4) | |||
em-websocket (0.5.1) | |||
eventmachine (>= 0.12.9) | |||
http_parser.rb (~> 0.6.0) | |||
eventmachine (1.2.7) | |||
ffi (1.10.0) | |||
forwardable-extended (2.6.0) | |||
http_parser.rb (0.6.0) | |||
i18n (0.9.5) | |||
concurrent-ruby (~> 1.0) | |||
jekyll (3.8.5) | |||
addressable (~> 2.4) | |||
colorator (~> 1.0) | |||
em-websocket (~> 0.5) | |||
i18n (~> 0.7) | |||
jekyll-sass-converter (~> 1.0) | |||
jekyll-watch (~> 2.0) | |||
kramdown (~> 1.14) | |||
liquid (~> 4.0) | |||
mercenary (~> 0.3.3) | |||
pathutil (~> 0.9) | |||
rouge (>= 1.7, < 4) | |||
safe_yaml (~> 1.0) | |||
jekyll-feed (0.11.0) | |||
jekyll (~> 3.3) | |||
jekyll-sass-converter (1.5.2) | |||
sass (~> 3.4) | |||
jekyll-seo-tag (2.5.0) | |||
jekyll (~> 3.3) | |||
jekyll-sitemap (1.2.0) | |||
jekyll (~> 3.3) | |||
jekyll-watch (2.1.2) | |||
listen (~> 3.0) | |||
kramdown (1.17.0) | |||
liquid (4.0.1) | |||
listen (3.1.5) | |||
rb-fsevent (~> 0.9, >= 0.9.4) | |||
rb-inotify (~> 0.9, >= 0.9.7) | |||
ruby_dep (~> 1.2) | |||
mercenary (0.3.6) | |||
pathutil (0.16.2) | |||
forwardable-extended (~> 2.6) | |||
public_suffix (3.0.3) | |||
rb-fsevent (0.10.3) | |||
rb-inotify (0.10.0) | |||
ffi (~> 1.0) | |||
rouge (3.3.0) | |||
ruby_dep (1.5.0) | |||
safe_yaml (1.0.5) | |||
sass (3.7.3) | |||
sass-listen (~> 4.0.0) | |||
sass-listen (4.0.0) | |||
rb-fsevent (~> 0.9, >= 0.9.4) | |||
rb-inotify (~> 0.9, >= 0.9.7) | |||
PLATFORMS | |||
ruby | |||
DEPENDENCIES | |||
jekyll (~> 3.8.5) | |||
jekyll-feed (~> 0.6) | |||
jekyll-seo-tag | |||
jekyll-sitemap | |||
sass | |||
tzinfo-data | |||
BUNDLED WITH | |||
2.0.1 |
@@ -0,0 +1,47 @@ | |||
# Welcome to Jekyll! | |||
# | |||
# This config file is meant for settings that affect your whole blog, values | |||
# which you are expected to set up once and rarely edit after that. If you find | |||
# yourself editing this file very often, consider using Jekyll's data files | |||
# feature for the data you need to update frequently. | |||
# | |||
# For technical reasons, this file is *NOT* reloaded automatically when you use | |||
# 'bundle exec jekyll serve'. If you change this file, please restart the server process. | |||
# Site settings | |||
# These are used to personalize your new site. If you look in the HTML files, | |||
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on. | |||
# You can create any custom variable you would like, and they will be accessible | |||
# in the templates via {{ site.myvariable }}. | |||
title: lxsameer's nest | |||
email: lxsameer@gnu.org | |||
description: >- # this means to ignore newlines until "baseurl:" | |||
Write an awesome description for your new site here. You can edit this | |||
line in _config.yml. It will appear in your document head meta (for | |||
Google search results) and in your feed.xml site description. | |||
baseurl: "" # the subpath of your site, e.g. /blog | |||
url: "https://lxsameer.com" # the base hostname & protocol for your site, e.g. http://example.com | |||
twitter_username: lxsameer | |||
github_username: lxsameer | |||
# Build settings | |||
markdown: kramdown | |||
plugins: | |||
- jekyll-feed | |||
- jekyll-sitemap | |||
- jekyll-seo-tag | |||
# Exclude from processing. | |||
# The following items will not be processed, by default. Create a custom list | |||
# to override the default setting. | |||
# exclude: | |||
# - Gemfile | |||
# - Gemfile.lock | |||
# - node_modules | |||
# - vendor/bundle/ | |||
# - vendor/cache/ | |||
# - vendor/gems/ | |||
# - vendor/ruby/ | |||
sass: | |||
sass_dir: _sass |
@@ -0,0 +1,66 @@ | |||
<html class="light"> | |||
<head> | |||
<link href="/assets/styles/web.css" rel="stylesheet"/> | |||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> | |||
</head> | |||
<body class="{{ page.theme }}"> | |||
<section class="section"> | |||
<div class="container"> | |||
<div class="columns is-centered centered is-flex"> | |||
<div class="column is-half centered is-flex"> | |||
<div class="columns"> | |||
<div class="column navlink"> | |||
<a class="" href="https://gitlab.com/lxsameer"> | |||
<span class="icon is-large"> | |||
<i class="fab fa-gitlab fa-lg"></i> | |||
</span> | |||
</a> | |||
</div> | |||
<div class="column navlink"> | |||
<a class="" href="/feed.rss"> | |||
<span class="icon is-large"> | |||
<i class="fas fa-rss fa-lg"></i> | |||
</span> | |||
</a> | |||
</div> | |||
<div class="column navlink"> | |||
<a class="" href="/blog/"> | |||
<span class="icon is-large"> | |||
<i class="fas fa-blog fa-lg"></i> | |||
</span> | |||
</a> | |||
</div> | |||
<div class="column navlink"> | |||
<a class="" href="https://linkedin.com/lxsameer"> | |||
<span class="icon is-large"> | |||
<i class="fab fa-linkedin fa-lg"></i> | |||
</span> | |||
</a> | |||
</div> | |||
<div class="column navlink"> | |||
<a class="" href="https://twitter.com/lxsameer"> | |||
<span class="icon is-large"> | |||
<i class="fab fa-twitter fa-lg"></i> | |||
</span> | |||
</a> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</section> | |||
<section class="section is-flex"> | |||
<div class="container"> | |||
{{ content }} | |||
</div> | |||
</section> | |||
<footer class="footer"> | |||
<div class="content has-text-centered"> | |||
ยฉ 2010-2019 Sameer Rahmani | |||
</div> | |||
</footer> | |||
</body> | |||
</html> |
@@ -0,0 +1,32 @@ | |||
--- | |||
layout: default | |||
--- | |||
<div class="columns is-centered"> | |||
<div class="column is-half has-text-centered is-flex centered"> | |||
<figure class="image is-128x128 is-centered"> | |||
<img class="is-rounded" src="https://lxsameer.com/images/me-1.jpg" alt="Sameer Rahmani" /> | |||
</figure> | |||
</div> | |||
</div> | |||
<div class="columns is-centered has-text-centered"> | |||
<div class="column is-half"> | |||
<h1 class="is-size-1">Sameer Rahmani</h1> | |||
<h2 class="is-size-2">Senior Software Engineer</h2> | |||
</div> | |||
</div> | |||
<div class="columns is-centered is-flex"> | |||
<div class="column is-one-quarter centered"> | |||
<a class="button is-primary is-block cv-button" href="/"> | |||
<b> | |||
Download My CV | |||
</b> | |||
</a> | |||
</div> | |||
</div> | |||
{{ content }} | |||
</div> |
@@ -0,0 +1,15 @@ | |||
--- | |||
layout: default | |||
theme: dark | |||
--- | |||
<div class="columns is-flex centered"> | |||
<div class="column is-half"> | |||
<h1 class="is-size-1"> | |||
{{page.title}} | |||
</h1> | |||
<content class="post"> | |||
{{ content }} | |||
</content> | |||
</div> | |||
</div> |
@@ -0,0 +1,9 @@ | |||
--- | |||
layout: default | |||
--- | |||
<div class="columns is-flex centered"> | |||
<div class="column is-half"> | |||
{{ content }} | |||
</div> | |||
</div> |
@@ -0,0 +1,27 @@ | |||
--- | |||
layout: page | |||
title: "Welcome to Jekyll!" | |||
date: 2019-02-23 19:44:57 +0000 | |||
theme: dark | |||
categories: jekyll update | |||
--- | |||
Youโll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. | |||
To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works. | |||
Jekyll also offers powerful support for code snippets: | |||
{% highlight ruby %} | |||
def print_hi(name) | |||
puts "Hi, #{name}" | |||
end | |||
print_hi('Tom') | |||
#=> prints 'Hi, Tom' to STDOUT. | |||
{% endhighlight %} | |||
Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyllโs GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk]. | |||
[jekyll-docs]: https://jekyllrb.com/docs/home | |||
[jekyll-gh]: https://github.com/jekyll/jekyll | |||
[jekyll-talk]: https://talk.jekyllrb.com/ |
@@ -0,0 +1,8 @@ | |||
@charset "utf-8" | |||
/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */ | |||
@import "bulma/utilities/_all" | |||
@import "bulma/base/_all" | |||
@import "bulma/elements/_all" | |||
@import "bulma/components/_all" | |||
@import "bulma/grid/_all" | |||
@import "bulma/layout/_all" |
@@ -0,0 +1,5 @@ | |||
@charset "utf-8" | |||
@import "minireset.sass" | |||
@import "generic.sass" | |||
@import "helpers.sass" |
@@ -0,0 +1,130 @@ | |||
$body-background-color: $white !default | |||
$body-size: 16px !default | |||
$body-rendering: optimizeLegibility !default | |||
$body-family: $family-primary !default | |||
$body-color: $text !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 | |||
$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 | |||
html | |||
background-color: $body-background-color | |||
font-size: $body-size | |||
-moz-osx-font-smoothing: grayscale | |||
-webkit-font-smoothing: antialiased | |||
min-width: 300px | |||
overflow-x: hidden | |||
overflow-y: scroll | |||
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: 1rem | |||
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: 0.875em | |||
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: 0.875em | |||
overflow-x: auto | |||
padding: 1.25rem 1.5rem | |||
white-space: pre | |||
word-wrap: normal | |||
code | |||
background-color: transparent | |||
color: currentColor | |||
font-size: 1em | |||
padding: 0 | |||
table | |||
td, | |||
th | |||
text-align: left | |||
vertical-align: top | |||
th | |||
color: $text-strong |
@@ -0,0 +1,276 @@ | |||
// Float | |||
.is-clearfix | |||
+clearfix | |||
.is-pulled-left | |||
float: left !important | |||
.is-pulled-right | |||
float: right !important | |||
// Overflow | |||
.is-clipped | |||
overflow: hidden !important | |||
// Overlay | |||
.is-overlay | |||
@extend %overlay | |||
// Typography | |||
=typography-size($target:'') | |||
@each $size in $sizes | |||
$i: index($sizes, $size) | |||
.is-size-#{$i}#{if($target == '', '', '-' + $target)} | |||
font-size: $size !important | |||
+typography-size() | |||
+mobile | |||
+typography-size('mobile') | |||
+tablet | |||
+typography-size('tablet') | |||
+touch | |||
+typography-size('touch') | |||
+desktop | |||
+typography-size('desktop') | |||
+widescreen | |||
+typography-size('widescreen') | |||
+fullhd | |||
+typography-size('fullhd') | |||
$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right') | |||
@each $alignment, $text-align in $alignments | |||
.has-text-#{$alignment} | |||
text-align: #{$text-align} !important | |||
@each $alignment, $text-align in $alignments | |||
+mobile | |||
.has-text-#{$alignment}-mobile | |||
text-align: #{$text-align} !important | |||
+tablet | |||
.has-text-#{$alignment}-tablet | |||
text-align: #{$text-align} !important | |||
+tablet-only | |||
.has-text-#{$alignment}-tablet-only | |||
text-align: #{$text-align} !important | |||
+touch | |||
.has-text-#{$alignment}-touch | |||
text-align: #{$text-align} !important | |||
+desktop | |||
.has-text-#{$alignment}-desktop | |||
text-align: #{$text-align} !important | |||
+desktop-only | |||
.has-text-#{$alignment}-desktop-only | |||
text-align: #{$text-align} !important | |||
+widescreen | |||
.has-text-#{$alignment}-widescreen | |||
text-align: #{$text-align} !important | |||
+widescreen-only | |||
.has-text-#{$alignment}-widescreen-only | |||
text-align: #{$text-align} !important | |||
+fullhd | |||
.has-text-#{$alignment}-fullhd | |||
text-align: #{$text-align} !important | |||
.is-capitalized | |||
text-transform: capitalize !important | |||
.is-lowercase | |||
text-transform: lowercase !important | |||
.is-uppercase | |||
text-transform: uppercase !important | |||
.is-italic | |||
font-style: italic !important | |||
@each $name, $pair in $colors | |||
$color: nth($pair, 1) | |||
.has-text-#{$name} | |||
color: $color !important | |||
a.has-text-#{$name} | |||
&:hover, | |||
&:focus | |||
color: darken($color, 10%) !important | |||
.has-background-#{$name} | |||
background-color: $color !important | |||
@each $name, $shade in $shades | |||
.has-text-#{$name} | |||
color: $shade !important | |||
.has-background-#{$name} | |||
background-color: $shade !important | |||
.has-text-weight-light | |||
font-weight: $weight-light !important | |||
.has-text-weight-normal | |||
font-weight: $weight-normal !important | |||
.has-text-weight-semibold | |||
font-weight: $weight-semibold !important | |||
.has-text-weight-bold | |||
font-weight: $weight-bold !important | |||
.is-family-primary | |||
font-family: $family-primary !important | |||
.is-family-secondary | |||
font-family: $family-secondary !important | |||
.is-family-sans-serif | |||
font-family: $family-sans-serif !important | |||
.is-family-monospace | |||
font-family: $family-monospace !important | |||
.is-family-code | |||
font-family: $family-code !important | |||
// Visibility | |||
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' | |||
@each $display in $displays | |||
.is-#{$display} | |||
display: #{$display} !important | |||
+mobile | |||
.is-#{$display}-mobile | |||
display: #{$display} !important | |||
+tablet | |||
.is-#{$display}-tablet | |||
display: #{$display} !important | |||
+tablet-only | |||
.is-#{$display}-tablet-only | |||
display: #{$display} !important | |||
+touch | |||
.is-#{$display}-touch | |||
display: #{$display} !important | |||
+desktop | |||
.is-#{$display}-desktop | |||
display: #{$display} !important | |||
+desktop-only | |||
.is-#{$display}-desktop-only | |||
display: #{$display} !important | |||
+widescreen | |||
.is-#{$display}-widescreen | |||
display: #{$display} !important | |||
+widescreen-only | |||
.is-#{$display}-widescreen-only | |||
display: #{$display} !important | |||
+fullhd | |||
.is-#{$display}-fullhd | |||
display: #{$display} !important | |||
.is-hidden | |||
display: none !important | |||
.is-sr-only | |||
border: none !important | |||
clip: rect(0, 0, 0, 0) !important | |||
height: 0.01em !important | |||
overflow: hidden !important | |||
padding: 0 !important | |||
position: absolute !important | |||
white-space: nowrap !important | |||
width: 0.01em !important | |||
+mobile | |||
.is-hidden-mobile | |||
display: none !important | |||
+tablet | |||
.is-hidden-tablet | |||
display: none !important | |||
+tablet-only | |||
.is-hidden-tablet-only | |||
display: none !important | |||
+touch | |||
.is-hidden-touch | |||
display: none !important | |||
+desktop | |||
.is-hidden-desktop | |||
display: none !important | |||
+desktop-only | |||
.is-hidden-desktop-only | |||
display: none !important | |||
+widescreen | |||
.is-hidden-widescreen | |||
display: none !important | |||
+widescreen-only | |||
.is-hidden-widescreen-only | |||
display: none !important | |||
+fullhd | |||
.is-hidden-fullhd | |||
display: none !important | |||
.is-invisible | |||
visibility: hidden !important | |||
+mobile | |||
.is-invisible-mobile | |||
visibility: hidden !important | |||
+tablet | |||
.is-invisible-tablet | |||
visibility: hidden !important | |||
+tablet-only | |||
.is-invisible-tablet-only | |||
visibility: hidden !important | |||
+touch | |||
.is-invisible-touch | |||
visibility: hidden !important | |||
+desktop | |||
.is-invisible-desktop | |||
visibility: hidden !important | |||
+desktop-only | |||
.is-invisible-desktop-only | |||
visibility: hidden !important | |||
+widescreen | |||
.is-invisible-widescreen | |||
visibility: hidden !important | |||
+widescreen-only | |||
.is-invisible-widescreen-only | |||
visibility: hidden !important | |||
+fullhd | |||
.is-invisible-fullhd | |||
visibility: hidden !important | |||
// Other | |||
.is-marginless | |||
margin: 0 !important | |||
.is-paddingless | |||
padding: 0 !important | |||
.is-radiusless | |||
border-radius: 0 !important | |||
.is-shadowless | |||
box-shadow: none !important | |||
.is-unselectable | |||
@extend %unselectable |
@@ -0,0 +1,84 @@ | |||
/*! 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 | |||
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,74 @@ | |||
$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-shadow: 0 1px 2px rgba($black, 0.1) !default | |||
$card-header-weight: $weight-bold !default | |||
$card-content-background-color: transparent !default | |||
$card-footer-background-color: transparent !default | |||
$card-footer-border-top: 1px solid $border !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: 0.75rem | |||
&.is-centered | |||
justify-content: center | |||
.card-header-icon | |||
align-items: center | |||
cursor: pointer | |||
display: flex | |||
justify-content: center | |||
padding: 0.75rem | |||
.card-image | |||
display: block | |||
position: relative | |||
.card-content | |||
background-color: $card-content-background-color | |||
padding: 1.5rem | |||
.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: 0.75rem | |||
&:not(:last-child) | |||
border-right: $card-footer-border-top | |||
// Combinations | |||
.card | |||
.media:not(:last-child) | |||
margin-bottom: 0.75rem |
@@ -0,0 +1,77 @@ | |||
$dropdown-content-background-color: $white !default | |||
$dropdown-content-arrow: $link !default | |||
$dropdown-content-offset: 4px !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: 12rem | |||
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: 0.5rem | |||
padding-top: 0.5rem | |||
.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,75 @@ | |||
.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: 0.75rem | |||
&: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: 0.75rem | |||
.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: 0.75rem | |||
.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-top-left-radius: $list-radius | |||
border-top-right-radius: $list-radius | |||
&:not(:last-child) | |||
border-bottom: $list-item-border | |||
&.is-active | |||
background-color: $list-item-active-background-color | |||
color: $list-item-active-color | |||
a.list-item | |||
background-color: $list-item-hover-background-color | |||
cursor: pointer |
@@ -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,50 @@ | |||
$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-label-color: $text-light !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: 1.25 | |||
a | |||
border-radius: $menu-item-radius | |||
color: $menu-item-color | |||
display: block | |||
padding: 0.5em 0.75em | |||
&: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: 0.75em | |||
padding-left: 0.75em | |||
.menu-label | |||
color: $menu-label-color | |||
font-size: 0.75em | |||
letter-spacing: 0.1em | |||
text-transform: uppercase | |||
&:not(:first-child) | |||
margin-top: 1em | |||
&:not(:last-child) | |||
margin-bottom: 1em |
@@ -0,0 +1,86 @@ | |||
$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 | |||
@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 $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: 10px | |||
.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,428 @@ | |||
$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 | |||
&: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 | |||
&:hover, | |||
&.is-active | |||
background-color: darken($color, 5%) | |||
color: $color-invert | |||
.navbar-link | |||
&::after | |||
border-color: $color-invert | |||
.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 | |||
&: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 | |||
&: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) | |||
&: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 | |||
&:hover, | |||
&.is-active | |||
background-color: transparent !important | |||
.navbar-item.has-dropdown | |||
&.is-active, | |||
&.is-hoverable:hover | |||
.navbar-link | |||
background-color: transparent !important | |||
.navbar-dropdown | |||
a.navbar-item | |||
&: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: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 | |||
&: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(:hover) | |||
background-color: $navbar-item-active-background-color | |||
.navbar-item.has-dropdown | |||
&: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,144 @@ | |||
$pagination-color: $grey-darker !default | |||
$pagination-border-color: $grey-lighter !default | |||
$pagination-margin: -0.25rem !default | |||
$pagination-min-width: $control-height !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: 1em | |||
padding-left: 0.5em | |||
padding-right: 0.5em | |||
justify-content: center | |||
margin: 0.25rem | |||
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,101 @@ | |||
$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-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 | |||