Compare commits
No commits in common. "14cd2442e1ddc244ad58856141b5402fae4e316c" and "000e4dad77d23933d516db11d5781c2bb200a7d8" have entirely different histories.
14cd2442e1
...
000e4dad77
|
@ -1,60 +0,0 @@
|
|||
# [[file:phoenix.org::*Project =.gitignore= file][Project =.gitignore= file:1]]
|
||||
# elixir and mix outputs
|
||||
/_build/
|
||||
/cover/
|
||||
/deps/
|
||||
/doc/
|
||||
/.fetch
|
||||
|
||||
# debug and dumps
|
||||
erl_crash.dump
|
||||
npm-debug.log
|
||||
|
||||
# Archives
|
||||
*.ez
|
||||
poka_ijo-*.tar
|
||||
|
||||
|
||||
# The directory NPM downloads your dependencies sources to.
|
||||
/assets/node_modules/
|
||||
/priv/static/
|
||||
# Project =.gitignore= file:1 ends here
|
||||
|
||||
# [[file:phoenix.org::*Project =.gitignore= file][Project =.gitignore= file:2]]
|
||||
/mix.exs
|
||||
# /mix.lock is checked in.
|
||||
.formatter.exs
|
||||
/config/*.exs
|
||||
!/config/prod.secret.exs
|
||||
|
||||
# PokaIjo module
|
||||
/lib/poka_ijo.ex
|
||||
/lib/poka_ijo/*.ex
|
||||
|
||||
# PokaIjoWeb module
|
||||
/lib/poka_ijo_web.ex
|
||||
/lib/poka_ijo_web/*.ex
|
||||
|
||||
# Channels, Controllers, Views, Templates
|
||||
/lib/poka_ijo_web/channels/
|
||||
/lib/poka_ijo_web/controllers/
|
||||
/lib/poka_ijo_web/views/
|
||||
/lib/poka_ijo_web/templates/
|
||||
/test/poka_ijo_web/controllers/
|
||||
/test/poka_ijo_web/views/
|
||||
/lib/poka_ijo_web/uploaders/
|
||||
|
||||
/test/test_helper.exs
|
||||
/test/support/
|
||||
|
||||
# Assets
|
||||
/assets/js/app.js
|
||||
/assets/js/foundation.js
|
||||
/assets/js/sw.js
|
||||
|
||||
# Repository
|
||||
/priv/repo/
|
||||
|
||||
# Waffle Uploads
|
||||
/priv/uploads/
|
||||
# Project =.gitignore= file:2 ends here
|
24
Makefile
24
Makefile
|
@ -1,24 +0,0 @@
|
|||
ORG_FILES = $(wildcard *.org)
|
||||
TOUCH_FILES = $(ORG_FILES:%.org=_build/%.touch)
|
||||
|
||||
tangle: $(TOUCH_FILES)
|
||||
@echo "Tangled files:"
|
||||
@echo $(ORG_FILES)
|
||||
|
||||
_build:
|
||||
mkdir _build
|
||||
|
||||
_build/%.touch: %.org _build
|
||||
time -- emacs --batch --no-init-file --load lisp/babel.el \
|
||||
--find-file $< --funcall org-babel-tangle --kill
|
||||
touch $@
|
||||
|
||||
.PHONY: init
|
||||
init: tangle
|
||||
mix deps.get
|
||||
mix deps.compile
|
||||
mix compile
|
||||
cd assets; npm install
|
||||
|
||||
test: tangle
|
||||
mix test
|
100
README.org
100
README.org
|
@ -1,100 +0,0 @@
|
|||
#+TITLE: Poka Ijo is my Inventory
|
||||
#+ROAM_ALIAS: "Poka Ijo"
|
||||
#+PROPERTY: header-args :results none
|
||||
|
||||
This project is a repository of [[https://orgmode.org/][Org Mode]] formatted documents which describe and implement a web service written in [[https://elixir-lang.org/][Elixir]] using the [[https://www.phoenixframework.org/][Phoenix Framework]]. Rather than directly editing the source code, these documents are edited instead -- source code, justification and the links between disparate modules and data-flows expressed in text as well as code.
|
||||
|
||||
poka ijo means "nearby things" in [[https://tokipona.org][Toki Pona]]. =Poka Ijo= is a fairly simple tool:
|
||||
- a way for me to catalog the physical objects I possess,
|
||||
- to better organize what I possess,
|
||||
- to understand what I don't need or want,
|
||||
- to give those things an outlet, for others to put them to use.
|
||||
|
||||
* Table of Contents
|
||||
|
||||
- [[file:phoenix.org][Project Configuration, Mix, etc]]
|
||||
- [[file:poka_ijo.org][Poka Ijo Domain Logic]]
|
||||
- [[file:poka_ijo_web.org][Poka Ijo Phoenix Frontend]]
|
||||
- [[file:aesthetics.org][The Visual Identity of poka_ijo]]
|
||||
- [[file:page_controller.org][Controller for static PokaIjoWeb pages]]
|
||||
- [[file:testing.org][Poka Ijo Test Support]]
|
||||
|
||||
I expect a few components to come together for this [[file:../Projects.org][Project]]:
|
||||
|
||||
- [[file:things.org][A Data Model for Poka Ijo Things]]
|
||||
- [X] attributes: name, id, URL, monetary value
|
||||
- [ ] attributes: file attachments, tags
|
||||
- [X] "walk" the tree of objects
|
||||
- [ ] search for an object by name or metadata
|
||||
- [[file:photo_uploads.org][Photo Uploads in Poka Ijo]]
|
||||
- a management frontend which allows me to:
|
||||
- [-] [[file:thing_controller.org][Poka Ijo Thing CRUD]] to quickly add new items, floating or contained in another.
|
||||
- [ ] quickly attach photos and metadata to objects
|
||||
- [ ] some sort of score interface, "hot or not" but for my shit.
|
||||
- [ ] some sort of organization suggester based on object similarities
|
||||
- a public site which allows others to:
|
||||
- see what I am willing to part ways with
|
||||
- request an email or text message conversation over an item
|
||||
|
||||
* Building
|
||||
|
||||
There is a [[file:Makefile][Makefile]] to make it easier to tangle the files. You will need Emacs and Org-mode installed for this to work. Some day all of this will be in Mix tasks that can contain the whole set of dependencies.
|
||||
|
||||
=make tangle= will tangle any org document which is newer than a handle left in =_build=. It's important to keep your tangled documents up to date with the file system, but for development it's likely that you're sending the Elixir code to a running =IEx= session, there will be an org-mode documentation providing for this at some point soon.
|
||||
|
||||
=make init= will tangle, download dependencies, and compile them.
|
||||
|
||||
* Developing in a REPL and a Babel doc
|
||||
:PROPERTIES:
|
||||
:ID: 9db0ba27-5172-4e69-8bfa-de9b35add499
|
||||
:END:
|
||||
|
||||
Poka Ijo development requires a postgres database with a database called =poka_ijo_dev=. run [[shell:mix ecto.setup]] (or click on that link!)
|
||||
|
||||
Executing this code will allow you to send the org-babel block under point to the REPL. I don't know how that handles =noweb=, blocks but it kinda works. (it doesn't even tangle them before sending to REPL, i've been relying on the phoenix dev server file watch)
|
||||
|
||||
#+begin_src emacs-lisp
|
||||
(use-package eval-in-repl
|
||||
:config
|
||||
(require 'eval-in-repl-ielm)
|
||||
|
||||
; i disable transient mark mode
|
||||
(defun eir-eval-in-iex ()
|
||||
"Provides eval-in-repl for Elixir."
|
||||
(interactive)
|
||||
;; Define local variables
|
||||
(let* ()
|
||||
(eir-repl-start "\\*Alchemist-IEx\\*" #'alchemist-iex-run t)
|
||||
(eir-send-to-iex (buffer-substring-no-properties (point) (mark)))))
|
||||
|
||||
(setq eir-repl-placement 'left)
|
||||
(setq eir-jump-after-eval nil)
|
||||
(setq eir-ielm-eval-in-current-buffer t))
|
||||
|
||||
(use-package org-babel-eval-in-repl
|
||||
:after ob
|
||||
:config
|
||||
(add-to-list 'ober-org-babel-type-list '("elixir" . (eval-in-repl-iex eir-eval-in-iex)))
|
||||
(evil-define-key 'normal 'org-mode-map (kbd "C-<return>") #'ober-eval-in-repl)
|
||||
(evil-define-key 'normal 'org-mode-map (kbd "M-<return>") #'ober-eval-block-in-repl))
|
||||
#+end_src
|
||||
|
||||
Alchemist runs an IEx shell:
|
||||
|
||||
#+begin_src emacs-lisp
|
||||
(use-package alchemist)
|
||||
(alchemist-iex-run " -S mix phx.server")
|
||||
#+end_src
|
||||
|
||||
Run this with Alt-Return to disable colors and see the =IEx= shell in action. You can run any[fn:1] source block in this fashion.
|
||||
|
||||
#+begin_src elixir
|
||||
alias PokaIjo.{Repo,Thing,Photo}
|
||||
IEx.configure(colors: [enabled: false])
|
||||
#+end_src
|
||||
|
||||
To run tests use [[shell:mix test.watch][=mix test.watch=]].
|
||||
|
||||
* Footnotes
|
||||
|
||||
[fn:1] Some restrictions apply, segments that are part of a noweb block will need to be run in the module-level block...
|
166
aesthetics.org
166
aesthetics.org
|
@ -1,166 +0,0 @@
|
|||
#+TITLE: The Visual Identity of Poka Ijo
|
||||
#+ROAM_ALIAS: "Poka Ijo Aesthetics"
|
||||
#+CREATED: [2020-09-09]
|
||||
#+MODIFIED: [2020-09-09]
|
||||
|
||||
This module contains the base HTML templates for the application, as well as the webpack and scss configuration so that it's clear how all this fits together. I am not sure how to manage this reasonably for now. There's not a lot of assets for now, luckily.
|
||||
|
||||
* Base Template
|
||||
|
||||
#+begin_src web :tangle lib/poka_ijo_web/templates/layout/app.html.eex :mkdirp yes
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link rel="manifest" href="/appmanifest.json">
|
||||
<%= csrf_meta_tag() %>
|
||||
<title><%= assigns[:page_title] || "Poka Ijo: Nearby Things" %></title>
|
||||
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
|
||||
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/foundation.css") %>"/>
|
||||
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/aesthetics.css") %>"/>
|
||||
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
|
||||
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/foundation.js") %>"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="top-bar">
|
||||
<div class="top-bar-left">
|
||||
<h1><%= link assigns[:site_title] || "Poka Ijo", to: Routes.page_path(@conn, :index) %></h1>
|
||||
</div>
|
||||
<div class="top-bar-right">
|
||||
<%= link "things", to: Routes.thing_path(@conn, :index) %>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main role="main" class="grid-container">
|
||||
<%= if get_flash @conn, :info do %>
|
||||
<div class="grid-x callout secondary" role="info"><%= get_flash(@conn, :info) %></div>
|
||||
<% end %>
|
||||
<%= if get_flash @conn, :error do %>
|
||||
<div class="grid-x callout alert" role="alert"><%= get_flash(@conn, :error) %></div>
|
||||
<% end %>
|
||||
<%= if get_flash @conn, :success do %>
|
||||
<div class="grid-x callout success" role="alert"><%= get_flash(@conn, :success) %></div>
|
||||
<% end %>
|
||||
|
||||
<%= render @view_module, @view_template, assigns %>
|
||||
</main>
|
||||
|
||||
<footer class="grid-container">
|
||||
<hr/>
|
||||
<div class="grid-x">
|
||||
<p class="text-center cell">
|
||||
© 02020 Ryan Rix <<a href="mailto:site@whatthfuck.computer">site@whatthefuck.computer</a>>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
#+end_src
|
||||
|
||||
* CSS
|
||||
|
||||
In the base template I have three CSS entrypoints defined, and this is mirrored in [[file:assets/webpack.config.js::const path = require('path');][webpack.config.js]]:
|
||||
|
||||
- [[file:assets/css/app.scss][app.scss]] - semantic markup
|
||||
- [[file:assets/css/foundation.scss][foundation.scss]] - the entire Foundation CSS bundle
|
||||
- [[file:assets/css/aesthetics.scss][aesthetics.scss]] - a bundle containing font-face rules, colors, etc
|
||||
|
||||
Additionally, Foundation has a [[./assets/css/_settings.scss][_settings.scss]] file that is imported in a few places, it just sets a ton of =SCSS= variables.
|
||||
|
||||
I picked my colors in =_settings.scss= using a photo I took, fed in to [[https://coolors.co/2d3828-8c9979-4b67a9-e69edc-4f2b34][coolors.co]] to generate a palette, which I left unadjusted. What do these colors make you think of?
|
||||
|
||||
#+begin_export html
|
||||
<div style="background-color: #2D3838; color: white;">#2D3838 Kombu Green: Primary Interaction</div>
|
||||
<div style="background-color: #8C9979; color: white;">#8c9979 Artichoke: Secondary Interaction</div>
|
||||
<div style="background-color: #4B67A9; color: white;">#4B67A9 Queen Blue: Success UI</div>
|
||||
<div style="background-color: #E69EDC; color: black;">#E69EDC Plumb Web: Warning UI</div>
|
||||
<div style="background-color: #4F2B34; color: white;">#4F2B34 Old Muave: Primary UI</div>
|
||||
#+end_export
|
||||
|
||||
These are colors taken from a park near my home in the early Summer of 2020, from sunny Seattle Washington to you.
|
||||
|
||||
* JavaScript
|
||||
|
||||
There are a few JavaScript entrypoints in the [[file:assets/webpack.config.js][webpack.config.js]]:
|
||||
|
||||
** =js/app.js= -- our code goes here.
|
||||
|
||||
This is where all of my front end logic will come by loaded or stored. For now there's not much, so I'll pull this out when it gets out of hand.
|
||||
|
||||
#+begin_src js :tangle assets/js/app.js
|
||||
// We need to import the CSS so that webpack will load it.
|
||||
// The MiniCssExtractPlugin is used to separate it out into
|
||||
// its own CSS file.
|
||||
import "../css/app.scss"
|
||||
import "../../deps/phoenix_html/priv/static/phoenix_html.js"
|
||||
|
||||
// import "./live.js"
|
||||
|
||||
// if('serviceWorker' in navigator) {
|
||||
// navigator.serviceWorker.register('/js/sw.js', {
|
||||
// scope: '/'
|
||||
// }).then(function() {
|
||||
// console.log('Service Worker Registered');
|
||||
// });
|
||||
// }
|
||||
#+end_src
|
||||
|
||||
** =js/foundation.js= -- foundation's code goes here.
|
||||
|
||||
Loading foundation is a pretty simple affair, =foundation.core= and whatever UI elements needed are all that are loaded, and then call the foundation initialization function. Easy.
|
||||
|
||||
#+begin_src js :tangle assets/js/foundation.js
|
||||
import "jquery"
|
||||
|
||||
import "../css/foundation.scss"
|
||||
|
||||
import 'foundation-sites/dist/js/plugins/foundation.core';
|
||||
import 'foundation-sites/dist/js/plugins/foundation.dropdownMenu.min.js';
|
||||
import 'foundation-sites/dist/js/plugins/foundation.util.keyboard.min.js';
|
||||
import 'foundation-sites/dist/js/plugins/foundation.util.box.min.js';
|
||||
import 'foundation-sites/dist/js/plugins/foundation.util.nest.min.js';
|
||||
|
||||
$(document).foundation();
|
||||
#+end_src
|
||||
|
||||
** =js/sw.js= -- Service Worker for Progressive Web App
|
||||
|
||||
It's not clear to me how well this will handle offline behavior, I'm not sure I really care for it, though I should. The service worker will let us figure that out later, for now it caches stylesheets.
|
||||
|
||||
#+begin_src js :tangle assets/js/sw.js
|
||||
const cacheName = 'lipu-kasi';
|
||||
const filesToCache = [
|
||||
'/',
|
||||
'/css/app.css',
|
||||
'/css/foundation.css',
|
||||
'/css/aesthetics.css',
|
||||
];
|
||||
|
||||
self.addEventListener('install', function(e) {
|
||||
console.log('[lipu kasi Service Worker] Installing');
|
||||
e.waitUntil(
|
||||
caches.open(cacheName).then(function(cache) {
|
||||
console.log('[lipu kasi Service Worker] Caching files for app');
|
||||
return cache.addAll(filesToCache);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('activate', event => {
|
||||
event.waitUntil(self.clients.claim());
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', event => {
|
||||
if (event.request.method !== 'POST') {
|
||||
event.respondWith(
|
||||
fetch(event.request).catch(function() {
|
||||
return caches.match(event.request);
|
||||
})
|
||||
);
|
||||
} else {
|
||||
event.respondWith(fetch(event.request));
|
||||
}
|
||||
})
|
||||
#+end_src
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"presets": [
|
||||
"@babel/preset-env"
|
||||
]
|
||||
}
|
|
@ -1,877 +0,0 @@
|
|||
// Foundation for Sites Settings
|
||||
// -----------------------------
|
||||
//
|
||||
// Table of Contents:
|
||||
//
|
||||
// 1. Global
|
||||
// 2. Breakpoints
|
||||
// 3. The Grid
|
||||
// 4. Base Typography
|
||||
// 5. Typography Helpers
|
||||
// 6. Abide
|
||||
// 7. Accordion
|
||||
// 8. Accordion Menu
|
||||
// 9. Badge
|
||||
// 10. Breadcrumbs
|
||||
// 11. Button
|
||||
// 12. Button Group
|
||||
// 13. Callout
|
||||
// 14. Card
|
||||
// 15. Close Button
|
||||
// 16. Drilldown
|
||||
// 17. Dropdown
|
||||
// 18. Dropdown Menu
|
||||
// 19. Flexbox Utilities
|
||||
// 20. Forms
|
||||
// 21. Label
|
||||
// 22. Media Object
|
||||
// 23. Menu
|
||||
// 24. Meter
|
||||
// 25. Off-canvas
|
||||
// 26. Orbit
|
||||
// 27. Pagination
|
||||
// 28. Progress Bar
|
||||
// 29. Prototype Arrow
|
||||
// 30. Prototype Border-Box
|
||||
// 31. Prototype Border-None
|
||||
// 32. Prototype Bordered
|
||||
// 33. Prototype Display
|
||||
// 34. Prototype Font-Styling
|
||||
// 35. Prototype List-Style-Type
|
||||
// 36. Prototype Overflow
|
||||
// 37. Prototype Position
|
||||
// 38. Prototype Rounded
|
||||
// 39. Prototype Separator
|
||||
// 40. Prototype Shadow
|
||||
// 41. Prototype Sizing
|
||||
// 42. Prototype Spacing
|
||||
// 43. Prototype Text-Decoration
|
||||
// 44. Prototype Text-Transformation
|
||||
// 45. Prototype Text-Utilities
|
||||
// 46. Responsive Embed
|
||||
// 47. Reveal
|
||||
// 48. Slider
|
||||
// 49. Switch
|
||||
// 50. Table
|
||||
// 51. Tabs
|
||||
// 52. Thumbnail
|
||||
// 53. Title Bar
|
||||
// 54. Tooltip
|
||||
// 55. Top Bar
|
||||
// 56. Xy Grid
|
||||
|
||||
@import 'node_modules/foundation-sites/scss/util/util';
|
||||
|
||||
|
||||
// 1. Global
|
||||
// ---------
|
||||
|
||||
$global-font-size: 10pt;
|
||||
$global-width: rem-calc(800);
|
||||
$global-lineheight: 1.5;
|
||||
$foundation-palette: (
|
||||
primary: #2D3828,
|
||||
secondary: #8C9979,
|
||||
success: #4B67A9,
|
||||
warning: #E69EDC,
|
||||
alert: #4F2B34,
|
||||
);
|
||||
$white: #fcf6ed;
|
||||
$light-gray: #f6e5cb;
|
||||
$medium-gray: #BAAD9B;
|
||||
$dark-gray: #82796C;
|
||||
$black: #211F1C;
|
||||
$body-background: $white;
|
||||
$body-font-color: $black;
|
||||
$body-font-family: 'Vulf Mono';
|
||||
$body-antialiased: true;
|
||||
$global-margin: 1rem;
|
||||
$global-padding: 1rem;
|
||||
$global-position: 1rem;
|
||||
$global-weight-normal: normal;
|
||||
$global-weight-bold: bold;
|
||||
$global-radius: 0;
|
||||
$global-menu-padding: 0.7rem 1rem;
|
||||
$global-menu-nested-margin: 1rem;
|
||||
$global-text-direction: ltr;
|
||||
$global-flexbox: true;
|
||||
$global-prototype-breakpoints: false;
|
||||
$global-button-cursor: auto;
|
||||
$global-color-pick-contrast-tolerance: 0;
|
||||
$print-transparent-backgrounds: true;
|
||||
|
||||
@include add-foundation-colors;
|
||||
$print-hrefs: true;
|
||||
|
||||
// 2. Breakpoints
|
||||
// --------------
|
||||
|
||||
$breakpoints: (
|
||||
small: 0,
|
||||
medium: 640px,
|
||||
large: 1024px,
|
||||
xlarge: 1200px,
|
||||
xxlarge: 1440px,
|
||||
);
|
||||
$print-breakpoint: large;
|
||||
$breakpoint-classes: (small medium large);
|
||||
|
||||
// 3. The Grid
|
||||
// -----------
|
||||
|
||||
$grid-row-width: $global-width;
|
||||
$grid-column-count: 12;
|
||||
$grid-column-gutter: (
|
||||
small: 20px,
|
||||
medium: 30px,
|
||||
);
|
||||
$grid-column-align-edge: true;
|
||||
$grid-column-alias: 'columns';
|
||||
$block-grid-max: 8;
|
||||
|
||||
// 4. Base Typography
|
||||
// ------------------
|
||||
|
||||
$header-font-family: 'Vulf Mono';
|
||||
$header-font-weight: $global-weight-normal;
|
||||
$header-font-style: italic;
|
||||
$font-family-monospace: 'Vulf Mono';
|
||||
$header-color: inherit;
|
||||
$header-lineheight: 1.4;
|
||||
$header-margin-bottom: 0.5rem;
|
||||
$header-styles: (
|
||||
small: (
|
||||
'h1': ('font-size': 24),
|
||||
'h2': ('font-size': 20),
|
||||
'h3': ('font-size': 19),
|
||||
'h4': ('font-size': 18),
|
||||
'h5': ('font-size': 17),
|
||||
'h6': ('font-size': 16),
|
||||
),
|
||||
medium: (
|
||||
'h1': ('font-size': 24),
|
||||
'h2': ('font-size': 20),
|
||||
'h3': ('font-size': 19),
|
||||
'h4': ('font-size': 18),
|
||||
'h5': ('font-size': 17),
|
||||
'h6': ('font-size': 16),
|
||||
),
|
||||
large: (
|
||||
'h1': ('font-size': 24),
|
||||
'h2': ('font-size': 22),
|
||||
'h3': ('font-size': 21),
|
||||
'h4': ('font-size': 20),
|
||||
'h5': ('font-size': 18),
|
||||
'h6': ('font-size': 16),
|
||||
),
|
||||
);
|
||||
$header-text-rendering: optimizeLegibility;
|
||||
$small-font-size: 80%;
|
||||
$header-small-font-color: $medium-gray;
|
||||
$paragraph-lineheight: 1.6;
|
||||
$paragraph-margin-bottom: 1rem;
|
||||
$paragraph-text-rendering: optimizeLegibility;
|
||||
$code-color: $dark-gray;
|
||||
$code-font-family: $font-family-monospace;
|
||||
$code-font-weight: $global-weight-normal;
|
||||
$code-background: $light-gray;
|
||||
$code-border: none;
|
||||
$code-padding: 0;
|
||||
$anchor-color: map-get($foundation-palette, primary);
|
||||
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
|
||||
$anchor-text-decoration: underline;
|
||||
$anchor-text-decoration-hover: none;
|
||||
$hr-width: $global-width;
|
||||
$hr-border: 1px solid $medium-gray;
|
||||
$hr-margin: rem-calc(20) auto;
|
||||
$list-lineheight: $paragraph-lineheight;
|
||||
$list-margin-bottom: $paragraph-margin-bottom;
|
||||
$list-style-type: disc;
|
||||
$list-style-position: outside;
|
||||
$list-side-margin: 1.25rem;
|
||||
$list-nested-side-margin: 1.25rem;
|
||||
$defnlist-margin-bottom: 1rem;
|
||||
$defnlist-term-weight: $global-weight-bold;
|
||||
$defnlist-term-margin-bottom: 0.3rem;
|
||||
$blockquote-color: $dark-gray;
|
||||
$blockquote-padding: rem-calc(9 20 0 19);
|
||||
$blockquote-border: 1px solid $medium-gray;
|
||||
$cite-font-size: rem-calc(13);
|
||||
$cite-color: $dark-gray;
|
||||
$cite-pseudo-content: '\2014 \0020';
|
||||
$keystroke-font: $font-family-monospace;
|
||||
$keystroke-color: $black;
|
||||
$keystroke-background: $light-gray;
|
||||
$keystroke-padding: rem-calc(2 4 0);
|
||||
$keystroke-radius: $global-radius;
|
||||
$abbr-underline: 1px dotted $black;
|
||||
|
||||
// 5. Typography Helpers
|
||||
// ---------------------
|
||||
|
||||
$lead-font-size: $global-font-size * 1.25;
|
||||
$lead-lineheight: 1.6;
|
||||
$subheader-lineheight: 1.4;
|
||||
$subheader-color: $dark-gray;
|
||||
$subheader-font-weight: $global-weight-normal;
|
||||
$subheader-margin-top: 0.2rem;
|
||||
$subheader-margin-bottom: 0.5rem;
|
||||
$stat-font-size: 2.5rem;
|
||||
|
||||
// 6. Abide
|
||||
// --------
|
||||
|
||||
$abide-inputs: true;
|
||||
$abide-labels: true;
|
||||
$input-background-invalid: get-color(alert);
|
||||
$form-label-color-invalid: get-color(alert);
|
||||
$input-error-color: get-color(alert);
|
||||
$input-error-font-size: rem-calc(12);
|
||||
$input-error-font-weight: $global-weight-bold;
|
||||
|
||||
// 7. Accordion
|
||||
// ------------
|
||||
|
||||
$accordion-background: $white;
|
||||
$accordion-plusminus: true;
|
||||
$accordion-title-font-size: rem-calc(12);
|
||||
$accordion-item-color: $primary-color;
|
||||
$accordion-item-background-hover: $light-gray;
|
||||
$accordion-item-padding: 1.25rem 1rem;
|
||||
$accordion-content-background: $white;
|
||||
$accordion-content-border: 1px solid $light-gray;
|
||||
$accordion-content-color: $body-font-color;
|
||||
$accordion-content-padding: 1rem;
|
||||
|
||||
// 8. Accordion Menu
|
||||
// -----------------
|
||||
|
||||
$accordionmenu-padding: $global-menu-padding;
|
||||
$accordionmenu-nested-margin: $global-menu-nested-margin;
|
||||
$accordionmenu-submenu-padding: $accordionmenu-padding;
|
||||
$accordionmenu-arrows: true;
|
||||
$accordionmenu-arrow-color: $primary-color;
|
||||
$accordionmenu-item-background: null;
|
||||
$accordionmenu-border: null;
|
||||
$accordionmenu-submenu-toggle-background: null;
|
||||
$accordion-submenu-toggle-border: $accordionmenu-border;
|
||||
$accordionmenu-submenu-toggle-width: 40px;
|
||||
$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
|
||||
$accordionmenu-arrow-size: 6px;
|
||||
|
||||
// 9. Badge
|
||||
// --------
|
||||
|
||||
$badge-background: $primary-color;
|
||||
$badge-color: $white;
|
||||
$badge-color-alt: $black;
|
||||
$badge-palette: $foundation-palette;
|
||||
$badge-padding: 0.3em;
|
||||
$badge-minwidth: 2.1em;
|
||||
$badge-font-size: 0.6rem;
|
||||
|
||||
// 10. Breadcrumbs
|
||||
// ---------------
|
||||
|
||||
$breadcrumbs-margin: 0 0 $global-margin 0;
|
||||
$breadcrumbs-item-font-size: rem-calc(11);
|
||||
$breadcrumbs-item-color: $primary-color;
|
||||
$breadcrumbs-item-color-current: $black;
|
||||
$breadcrumbs-item-color-disabled: $medium-gray;
|
||||
$breadcrumbs-item-margin: 0.75rem;
|
||||
$breadcrumbs-item-uppercase: true;
|
||||
$breadcrumbs-item-separator: true;
|
||||
$breadcrumbs-item-separator-item: '/';
|
||||
$breadcrumbs-item-separator-item-rtl: '\\';
|
||||
$breadcrumbs-item-separator-color: $medium-gray;
|
||||
|
||||
// 11. Button
|
||||
// ----------
|
||||
|
||||
$button-font-family: inherit;
|
||||
$button-padding: 0.85em 1em;
|
||||
$button-margin: 0 0 $global-margin 0;
|
||||
$button-fill: solid;
|
||||
$button-background: $primary-color;
|
||||
$button-background-hover: scale-color($button-background, $lightness: -15%);
|
||||
$button-color: $white;
|
||||
$button-color-alt: $black;
|
||||
$button-radius: $global-radius;
|
||||
$button-hollow-border-width: 1px;
|
||||
$button-sizes: (
|
||||
tiny: 0.6rem,
|
||||
small: 0.75rem,
|
||||
default: 0.9rem,
|
||||
large: 1.25rem,
|
||||
);
|
||||
$button-palette: $foundation-palette;
|
||||
$button-opacity-disabled: 0.25;
|
||||
$button-background-hover-lightness: -20%;
|
||||
$button-hollow-hover-lightness: -50%;
|
||||
$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
|
||||
$button-responsive-expanded: false;
|
||||
|
||||
// 12. Button Group
|
||||
// ----------------
|
||||
|
||||
$buttongroup-margin: 1rem;
|
||||
$buttongroup-spacing: 1px;
|
||||
$buttongroup-child-selector: '.button';
|
||||
$buttongroup-expand-max: 6;
|
||||
$buttongroup-radius-on-each: true;
|
||||
|
||||
// 13. Callout
|
||||
// -----------
|
||||
|
||||
$callout-background: $white;
|
||||
$callout-background-fade: -25%;
|
||||
$callout-border: 1px solid rgba($black, 0.25);
|
||||
$callout-margin: 0 0 1rem 0;
|
||||
$callout-padding: 1rem;
|
||||
$callout-font-color: $body-font-color;
|
||||
$callout-font-color-alt: $body-background;
|
||||
$callout-radius: $global-radius;
|
||||
$callout-link-tint: 30%;
|
||||
|
||||
// 14. Card
|
||||
// --------
|
||||
|
||||
$card-background: $white;
|
||||
$card-font-color: $body-font-color;
|
||||
$card-divider-background: $light-gray;
|
||||
$card-border: 1px solid $light-gray;
|
||||
$card-shadow: none;
|
||||
$card-border-radius: $global-radius;
|
||||
$card-padding: $global-padding;
|
||||
$card-margin-bottom: $global-margin;
|
||||
|
||||
// 15. Close Button
|
||||
// ----------------
|
||||
|
||||
$closebutton-position: right top;
|
||||
$closebutton-offset-horizontal: (
|
||||
small: 0.66rem,
|
||||
medium: 1rem,
|
||||
);
|
||||
$closebutton-offset-vertical: (
|
||||
small: 0.33em,
|
||||
medium: 0.5rem,
|
||||
);
|
||||
$closebutton-size: (
|
||||
small: 1.5em,
|
||||
medium: 2em,
|
||||
);
|
||||
$closebutton-lineheight: 1;
|
||||
$closebutton-color: $dark-gray;
|
||||
$closebutton-color-hover: $black;
|
||||
|
||||
// 16. Drilldown
|
||||
// -------------
|
||||
|
||||
$drilldown-transition: transform 0.15s linear;
|
||||
$drilldown-arrows: true;
|
||||
$drilldown-padding: $global-menu-padding;
|
||||
$drilldown-nested-margin: 0;
|
||||
$drilldown-background: $white;
|
||||
$drilldown-submenu-padding: $drilldown-padding;
|
||||
$drilldown-submenu-background: $white;
|
||||
$drilldown-arrow-color: $primary-color;
|
||||
$drilldown-arrow-size: 6px;
|
||||
|
||||
// 17. Dropdown
|
||||
// ------------
|
||||
|
||||
$dropdown-padding: 1rem;
|
||||
$dropdown-background: $body-background;
|
||||
$dropdown-border: 1px solid $medium-gray;
|
||||
$dropdown-font-size: 1rem;
|
||||
$dropdown-width: 300px;
|
||||
$dropdown-radius: $global-radius;
|
||||
$dropdown-sizes: (
|
||||
tiny: 100px,
|
||||
small: 200px,
|
||||
large: 400px,
|
||||
);
|
||||
|
||||
// 18. Dropdown Menu
|
||||
// -----------------
|
||||
|
||||
$dropdownmenu-arrows: true;
|
||||
$dropdownmenu-arrow-color: $anchor-color;
|
||||
$dropdownmenu-arrow-size: 6px;
|
||||
$dropdownmenu-arrow-padding: 1.5rem;
|
||||
$dropdownmenu-min-width: 200px;
|
||||
$dropdownmenu-background: null;
|
||||
$dropdownmenu-submenu-background: $white;
|
||||
$dropdownmenu-padding: $global-menu-padding;
|
||||
$dropdownmenu-nested-margin: 0;
|
||||
$dropdownmenu-submenu-padding: $dropdownmenu-padding;
|
||||
$dropdownmenu-border: 1px solid $medium-gray;
|
||||
$dropdown-menu-item-color-active: get-color(primary);
|
||||
$dropdown-menu-item-background-active: transparent;
|
||||
|
||||
// 19. Flexbox Utilities
|
||||
// ---------------------
|
||||
|
||||
$flex-source-ordering-count: 6;
|
||||
$flexbox-responsive-breakpoints: true;
|
||||
|
||||
// 20. Forms
|
||||
// ---------
|
||||
|
||||
$fieldset-border: 1px solid $medium-gray;
|
||||
$fieldset-padding: rem-calc(20);
|
||||
$fieldset-margin: rem-calc(18 0);
|
||||
$legend-padding: rem-calc(0 3);
|
||||
$form-spacing: rem-calc(16);
|
||||
$helptext-color: $black;
|
||||
$helptext-font-size: rem-calc(13);
|
||||
$helptext-font-style: italic;
|
||||
$input-prefix-color: $black;
|
||||
$input-prefix-background: $light-gray;
|
||||
$input-prefix-border: 1px solid $medium-gray;
|
||||
$input-prefix-padding: 1rem;
|
||||
$form-label-color: $dark-gray;
|
||||
$form-label-font-size: rem-calc(12);
|
||||
$form-label-font-weight: $global-weight-normal;
|
||||
$form-label-line-height: 1.8;
|
||||
$select-background: $light-gray;
|
||||
$select-triangle-color: $white;
|
||||
$select-radius: $global-radius;
|
||||
$input-color: $black;
|
||||
$input-placeholder-color: $medium-gray;
|
||||
$input-font-family: inherit;
|
||||
$input-font-size: rem-calc(12);
|
||||
$input-font-weight: $global-weight-normal;
|
||||
$input-line-height: $global-lineheight;
|
||||
$input-background: $white;
|
||||
$input-background-focus: $light-gray;
|
||||
$input-background-disabled: $light-gray;
|
||||
$input-border: 1px solid $medium-gray;
|
||||
$input-border-focus: 1px solid $dark-gray;
|
||||
$input-padding: $form-spacing / 2;
|
||||
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
|
||||
$input-shadow-focus: 0 0 2px $medium-gray;
|
||||
$input-cursor-disabled: not-allowed;
|
||||
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
|
||||
$input-number-spinners: true;
|
||||
$input-radius: $global-radius;
|
||||
$form-button-radius: $global-radius;
|
||||
|
||||
// 21. Label
|
||||
// ---------
|
||||
|
||||
$label-background: $primary-color;
|
||||
$label-color: $light-gray;
|
||||
$label-color-alt: $black;
|
||||
$label-palette: $foundation-palette;
|
||||
$label-font-size: 0.8rem;
|
||||
$label-padding: 0.33333rem 0.5rem;
|
||||
$label-radius: $global-radius;
|
||||
|
||||
// 22. Media Object
|
||||
// ----------------
|
||||
|
||||
$mediaobject-margin-bottom: $global-margin;
|
||||
$mediaobject-section-padding: $global-padding;
|
||||
$mediaobject-image-width-stacked: 100%;
|
||||
|
||||
// 23. Menu
|
||||
// --------
|
||||
|
||||
$menu-margin: 0;
|
||||
$menu-nested-margin: $global-menu-nested-margin;
|
||||
$menu-items-padding: $global-menu-padding;
|
||||
$menu-simple-margin: 1rem;
|
||||
$menu-item-color-active: $white;
|
||||
$menu-item-background-active: get-color(primary);
|
||||
$menu-icon-spacing: 0.25rem;
|
||||
$menu-state-back-compat: true;
|
||||
$menu-centered-back-compat: true;
|
||||
$menu-icons-back-compat: true;
|
||||
|
||||
// 24. Meter
|
||||
// ---------
|
||||
|
||||
$meter-height: 1rem;
|
||||
$meter-radius: $global-radius;
|
||||
$meter-background: $medium-gray;
|
||||
$meter-fill-good: $success-color;
|
||||
$meter-fill-medium: $warning-color;
|
||||
$meter-fill-bad: $alert-color;
|
||||
|
||||
// 25. Off-canvas
|
||||
// --------------
|
||||
|
||||
$offcanvas-sizes: (
|
||||
small: 250px,
|
||||
);
|
||||
$offcanvas-vertical-sizes: (
|
||||
small: 250px,
|
||||
);
|
||||
$offcanvas-background: $light-gray;
|
||||
$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
|
||||
$offcanvas-inner-shadow-size: 20px;
|
||||
$offcanvas-inner-shadow-color: rgba($black, 0.25);
|
||||
$offcanvas-overlay-zindex: 11;
|
||||
$offcanvas-push-zindex: 12;
|
||||
$offcanvas-overlap-zindex: 13;
|
||||
$offcanvas-reveal-zindex: 12;
|
||||
$offcanvas-transition-length: 0.5s;
|
||||
$offcanvas-transition-timing: ease;
|
||||
$offcanvas-fixed-reveal: true;
|
||||
$offcanvas-exit-background: rgba($white, 0.25);
|
||||
$maincontent-class: 'off-canvas-content';
|
||||
|
||||
// 26. Orbit
|
||||
// ---------
|
||||
|
||||
$orbit-bullet-background: $medium-gray;
|
||||
$orbit-bullet-background-active: $dark-gray;
|
||||
$orbit-bullet-diameter: 1.2rem;
|
||||
$orbit-bullet-margin: 0.1rem;
|
||||
$orbit-bullet-margin-top: 0.8rem;
|
||||
$orbit-bullet-margin-bottom: 0.8rem;
|
||||
$orbit-caption-background: rgba($black, 0.5);
|
||||
$orbit-caption-padding: 1rem;
|
||||
$orbit-control-background-hover: rgba($black, 0.5);
|
||||
$orbit-control-padding: 1rem;
|
||||
$orbit-control-zindex: 10;
|
||||
|
||||
// 27. Pagination
|
||||
// --------------
|
||||
|
||||
$pagination-font-size: rem-calc(14);
|
||||
$pagination-margin-bottom: $global-margin;
|
||||
$pagination-item-color: $black;
|
||||
$pagination-item-padding: rem-calc(3 10);
|
||||
$pagination-item-spacing: rem-calc(1);
|
||||
$pagination-radius: $global-radius;
|
||||
$pagination-item-background-hover: $light-gray;
|
||||
$pagination-item-background-current: $primary-color;
|
||||
$pagination-item-color-current: $white;
|
||||
$pagination-item-color-disabled: $medium-gray;
|
||||
$pagination-ellipsis-color: $black;
|
||||
$pagination-mobile-items: false;
|
||||
$pagination-mobile-current-item: false;
|
||||
$pagination-arrows: true;
|
||||
|
||||
// 28. Progress Bar
|
||||
// ----------------
|
||||
|
||||
$progress-height: 1rem;
|
||||
$progress-background: $medium-gray;
|
||||
$progress-margin-bottom: $global-margin;
|
||||
$progress-meter-background: $primary-color;
|
||||
$progress-radius: $global-radius;
|
||||
|
||||
// 29. Prototype Arrow
|
||||
// -------------------
|
||||
|
||||
$prototype-arrow-directions: (
|
||||
down,
|
||||
up,
|
||||
right,
|
||||
left
|
||||
);
|
||||
$prototype-arrow-size: 0.4375rem;
|
||||
$prototype-arrow-color: $black;
|
||||
|
||||
// 30. Prototype Border-Box
|
||||
// ------------------------
|
||||
|
||||
$prototype-border-box-breakpoints: $global-prototype-breakpoints;
|
||||
|
||||
// 31. Prototype Border-None
|
||||
// -------------------------
|
||||
|
||||
$prototype-border-none-breakpoints: $global-prototype-breakpoints;
|
||||
|
||||
// 32. Prototype Bordered
|
||||
// ----------------------
|
||||
|
||||
$prototype-bordered-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-border-width: rem-calc(1);
|
||||
$prototype-border-type: solid;
|
||||
$prototype-border-color: $medium-gray;
|
||||
|
||||
// 33. Prototype Display
|
||||
// ---------------------
|
||||
|
||||
$prototype-display-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-display: (
|
||||
inline,
|
||||
inline-block,
|
||||
block,
|
||||
table,
|
||||
table-cell
|
||||
);
|
||||
|
||||
// 34. Prototype Font-Styling
|
||||
// --------------------------
|
||||
|
||||
$prototype-font-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-wide-letter-spacing: rem-calc(4);
|
||||
$prototype-font-normal: $global-weight-normal;
|
||||
$prototype-font-bold: $global-weight-bold;
|
||||
|
||||
// 35. Prototype List-Style-Type
|
||||
// -----------------------------
|
||||
|
||||
$prototype-list-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-style-type-unordered: (
|
||||
disc,
|
||||
circle,
|
||||
square
|
||||
);
|
||||
$prototype-style-type-ordered: (
|
||||
decimal,
|
||||
lower-alpha,
|
||||
lower-latin,
|
||||
lower-roman,
|
||||
upper-alpha,
|
||||
upper-latin,
|
||||
upper-roman
|
||||
);
|
||||
|
||||
// 36. Prototype Overflow
|
||||
// ----------------------
|
||||
|
||||
$prototype-overflow-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-overflow: (
|
||||
visible,
|
||||
hidden,
|
||||
scroll
|
||||
);
|
||||
|
||||
// 37. Prototype Position
|
||||
// ----------------------
|
||||
|
||||
$prototype-position-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-position: (
|
||||
static,
|
||||
relative,
|
||||
absolute,
|
||||
fixed
|
||||
);
|
||||
$prototype-position-z-index: 975;
|
||||
|
||||
// 38. Prototype Rounded
|
||||
// ---------------------
|
||||
|
||||
$prototype-rounded-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-border-radius: rem-calc(3);
|
||||
|
||||
// 39. Prototype Separator
|
||||
// -----------------------
|
||||
|
||||
$prototype-separator-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-separator-align: center;
|
||||
$prototype-separator-height: rem-calc(2);
|
||||
$prototype-separator-width: 3rem;
|
||||
$prototype-separator-background: $primary-color;
|
||||
$prototype-separator-margin-top: $global-margin;
|
||||
|
||||
// 40. Prototype Shadow
|
||||
// --------------------
|
||||
|
||||
$prototype-shadow-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
|
||||
0 2px 10px 0 rgba(0,0,0,.12);
|
||||
|
||||
// 41. Prototype Sizing
|
||||
// --------------------
|
||||
|
||||
$prototype-sizing-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-sizing: (
|
||||
width,
|
||||
height
|
||||
);
|
||||
$prototype-sizes: (
|
||||
25: 25%,
|
||||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%
|
||||
);
|
||||
|
||||
// 42. Prototype Spacing
|
||||
// ---------------------
|
||||
|
||||
$prototype-spacing-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-spacers-count: 3;
|
||||
|
||||
// 43. Prototype Text-Decoration
|
||||
// -----------------------------
|
||||
|
||||
$prototype-decoration-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-text-decoration: (
|
||||
overline,
|
||||
underline,
|
||||
line-through,
|
||||
);
|
||||
|
||||
// 44. Prototype Text-Transformation
|
||||
// ---------------------------------
|
||||
|
||||
$prototype-transformation-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-text-transformation: (
|
||||
lowercase,
|
||||
uppercase,
|
||||
capitalize
|
||||
);
|
||||
|
||||
// 45. Prototype Text-Utilities
|
||||
// ----------------------------
|
||||
|
||||
$prototype-utilities-breakpoints: $global-prototype-breakpoints;
|
||||
$prototype-text-overflow: ellipsis;
|
||||
|
||||
// 46. Responsive Embed
|
||||
// --------------------
|
||||
|
||||
$responsive-embed-margin-bottom: rem-calc(16);
|
||||
$responsive-embed-ratios: (
|
||||
default: 4 by 3,
|
||||
widescreen: 16 by 9,
|
||||
);
|
||||
|
||||
// 47. Reveal
|
||||
// ----------
|
||||
|
||||
$reveal-background: $white;
|
||||
$reveal-width: 600px;
|
||||
$reveal-max-width: $global-width;
|
||||
$reveal-padding: $global-padding;
|
||||
$reveal-border: 1px solid $medium-gray;
|
||||
$reveal-radius: $global-radius;
|
||||
$reveal-zindex: 1005;
|
||||
$reveal-overlay-background: rgba($black, 0.45);
|
||||
|
||||
// 48. Slider
|
||||
// ----------
|
||||
|
||||
$slider-width-vertical: 0.5rem;
|
||||
$slider-transition: all 0.2s ease-in-out;
|
||||
$slider-height: 0.5rem;
|
||||
$slider-background: $light-gray;
|
||||
$slider-fill-background: $medium-gray;
|
||||
$slider-handle-height: 1.4rem;
|
||||
$slider-handle-width: 1.4rem;
|
||||
$slider-handle-background: $primary-color;
|
||||
$slider-opacity-disabled: 0.25;
|
||||
$slider-radius: $global-radius;
|
||||
|
||||
// 49. Switch
|
||||
// ----------
|
||||
|
||||
$switch-background: $medium-gray;
|
||||
$switch-background-active: $primary-color;
|
||||
$switch-height: 2rem;
|
||||
$switch-height-tiny: 1.5rem;
|
||||
$switch-height-small: 1.75rem;
|
||||
$switch-height-large: 2.5rem;
|
||||
$switch-radius: $global-radius;
|
||||
$switch-margin: $global-margin;
|
||||
$switch-paddle-background: $white;
|
||||
$switch-paddle-offset: 0.25rem;
|
||||
$switch-paddle-radius: $global-radius;
|
||||
$switch-paddle-transition: all 0.25s ease-out;
|
||||
|
||||
// 50. Table
|
||||
// ---------
|
||||
|
||||
$table-background: $light-gray;
|
||||
$table-color-scale: 5%;
|
||||
$table-border: 1px solid smart-scale($table-background, $table-color-scale);
|
||||
$table-padding: rem-calc(8 10 10);
|
||||
$table-hover-scale: 2%;
|
||||
$table-row-hover: darken($table-background, $table-hover-scale);
|
||||
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
|
||||
$table-is-striped: true;
|
||||
$table-striped-background: smart-scale($table-background, $table-color-scale);
|
||||
$table-stripe: even;
|
||||
$table-head-background: smart-scale($table-background, $table-color-scale / 2);
|
||||
$table-head-row-hover: darken($table-head-background, $table-hover-scale);
|
||||
$table-foot-background: smart-scale($table-background, $table-color-scale);
|
||||
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
|
||||
$table-head-font-color: $body-font-color;
|
||||
$table-foot-font-color: $body-font-color;
|
||||
$show-header-for-stacked: false;
|
||||
$table-stack-breakpoint: medium;
|
||||
|
||||
// 51. Tabs
|
||||
// --------
|
||||
|
||||
$tab-margin: 0;
|
||||
$tab-background: $white;
|
||||
$tab-color: $primary-color;
|
||||
$tab-background-active: $light-gray;
|
||||
$tab-active-color: $primary-color;
|
||||
$tab-item-font-size: rem-calc(12);
|
||||
$tab-item-background-hover: $white;
|
||||
$tab-item-padding: 1.25rem 1.5rem;
|
||||
$tab-content-background: $white;
|
||||
$tab-content-border: $light-gray;
|
||||
$tab-content-color: $body-font-color;
|
||||
$tab-content-padding: 1rem;
|
||||
|
||||
// 52. Thumbnail
|
||||
// -------------
|
||||
|
||||
$thumbnail-border: 4px solid $white;
|
||||
$thumbnail-margin-bottom: $global-margin;
|
||||
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
|
||||
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
|
||||
$thumbnail-transition: box-shadow 200ms ease-out;
|
||||
$thumbnail-radius: $global-radius;
|
||||
|
||||
// 53. Title Bar
|
||||
// -------------
|
||||
|
||||
$titlebar-background: $black;
|
||||
$titlebar-color: $white;
|
||||
$titlebar-padding: 0.5rem;
|
||||
$titlebar-text-font-weight: bold;
|
||||
$titlebar-icon-color: $white;
|
||||
$titlebar-icon-color-hover: $medium-gray;
|
||||
$titlebar-icon-spacing: 0.25rem;
|
||||
|
||||
// 54. Tooltip
|
||||
// -----------
|
||||
|
||||
$has-tip-cursor: help;
|
||||
$has-tip-font-weight: $global-weight-bold;
|
||||
$has-tip-border-bottom: dotted 1px $dark-gray;
|
||||
$tooltip-background-color: $black;
|
||||
$tooltip-color: $white;
|
||||
$tooltip-padding: 0.75rem;
|
||||
$tooltip-max-width: 10rem;
|
||||
$tooltip-font-size: $small-font-size;
|
||||
$tooltip-pip-width: 0.75rem;
|
||||
$tooltip-pip-height: $tooltip-pip-width * 0.866;
|
||||
$tooltip-radius: $global-radius;
|
||||
|
||||
// 55. Top Bar
|
||||
// -----------
|
||||
|
||||
$topbar-padding: 0.5rem;
|
||||
$topbar-background: $medium-gray;
|
||||
$topbar-submenu-background: $topbar-background;
|
||||
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
|
||||
$topbar-input-width: 200px;
|
||||
$topbar-unstack-breakpoint: small;
|
||||
|
||||
// 56. Xy Grid
|
||||
// -----------
|
||||
|
||||
$xy-grid: true;
|
||||
$grid-container: $global-width;
|
||||
$grid-columns: 12;
|
||||
$grid-margin-gutters: (
|
||||
small: 20px,
|
||||
medium: 30px
|
||||
);
|
||||
$grid-padding-gutters: $grid-margin-gutters;
|
||||
$grid-container-padding: $grid-padding-gutters;
|
||||
$grid-container-max: $global-width;
|
||||
$xy-block-grid-max: 8;
|
|
@ -1,3 +0,0 @@
|
|||
@import './_settings.scss';
|
||||
@import './vulf.css';
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@import './_settings.scss';
|
||||
@import './phoenix-liveview.scss';
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import './_settings.scss';
|
||||
@import './foundation_and_overrides.scss';
|
|
@ -1,47 +0,0 @@
|
|||
@charset 'utf-8';
|
||||
|
||||
@import 'settings';
|
||||
@import '~foundation/foundation';
|
||||
|
||||
// We include everything by default. To slim your CSS, remove components you don't use.
|
||||
|
||||
@include foundation-global-styles;
|
||||
@include foundation-xy-grid-classes;
|
||||
//@include foundation-grid;
|
||||
//@include foundation-flex-grid;
|
||||
@include foundation-flex-classes;
|
||||
@include foundation-typography;
|
||||
@include foundation-forms;
|
||||
@include foundation-button;
|
||||
// @include foundation-accordion;
|
||||
// @include foundation-accordion-menu;
|
||||
@include foundation-badge;
|
||||
@include foundation-breadcrumbs;
|
||||
// @include foundation-button-group;
|
||||
@include foundation-callout;
|
||||
// @include foundation-card;
|
||||
@include foundation-close-button;
|
||||
@include foundation-menu;
|
||||
@include foundation-menu-icon;
|
||||
// @include foundation-drilldown-menu;
|
||||
@include foundation-dropdown;
|
||||
@include foundation-dropdown-menu;
|
||||
@include foundation-responsive-embed;
|
||||
@include foundation-label;
|
||||
@include foundation-media-object;
|
||||
// @include foundation-off-canvas;
|
||||
// @include foundation-orbit;
|
||||
@include foundation-pagination;
|
||||
@include foundation-progress-bar;
|
||||
// @include foundation-slider;
|
||||
// @include foundation-sticky;
|
||||
// @include foundation-reveal;
|
||||
@include foundation-switch;
|
||||
@include foundation-table;
|
||||
@include foundation-tabs;
|
||||
@include foundation-thumbnail;
|
||||
@include foundation-title-bar;
|
||||
@include foundation-tooltip;
|
||||
@include foundation-top-bar;
|
||||
@include foundation-visibility-classes;
|
||||
@include foundation-float-classes;
|
|
@ -1,89 +0,0 @@
|
|||
@import "../node_modules/nprogress/nprogress.css";
|
||||
|
||||
/* LiveView specific classes for your customizations */
|
||||
.invalid-feedback {
|
||||
color: map-get($foundation-palette, alert);
|
||||
display: block;
|
||||
margin: -1rem 0 2rem;
|
||||
}
|
||||
|
||||
.phx-no-feedback.invalid-feedback, .phx-no-feedback .invalid-feedback {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.phx-click-loading {
|
||||
opacity: 0.5;
|
||||
transition: opacity 1s ease-out;
|
||||
}
|
||||
|
||||
.phx-disconnected{
|
||||
cursor: wait;
|
||||
}
|
||||
.phx-disconnected *{
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.phx-modal {
|
||||
opacity: 1!important;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.phx-modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 15% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.phx-modal-close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.phx-modal-close:hover,
|
||||
.phx-modal-close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* Alerts and form errors */
|
||||
.alert {
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.alert-info {
|
||||
color: #31708f;
|
||||
background-color: #d9edf7;
|
||||
border-color: #bce8f1;
|
||||
}
|
||||
.alert-warning {
|
||||
color: #8a6d3b;
|
||||
background-color: #fcf8e3;
|
||||
border-color: #faebcc;
|
||||
}
|
||||
.alert-danger {
|
||||
color: #a94442;
|
||||
background-color: #f2dede;
|
||||
border-color: #ebccd1;
|
||||
}
|
||||
.alert p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.alert:empty {
|
||||
display: none;
|
||||
}
|
File diff suppressed because one or more lines are too long
|
@ -1,485 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Italic.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Italic.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Italic.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-BlackItalic.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-BlackItalic.woff') format('woff'),
|
||||
url('/fonts/VulfSans-BlackItalic.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-MediumItalic.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-MediumItalic.woff') format('woff'),
|
||||
url('/fonts/VulfSans-MediumItalic.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Regular.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Regular.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Black.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Black.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Black.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Bold.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Bold.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-BoldItalic.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-BoldItalic.woff') format('woff'),
|
||||
url('/fonts/VulfMono-BoldItalic.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-Bold.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-Bold.woff') format('woff'),
|
||||
url('/fonts/VulfMono-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Medium.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Medium.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Medium.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-Regular.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-Regular.woff') format('woff'),
|
||||
url('/fonts/VulfMono-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-LightItalic.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-LightItalic.woff') format('woff'),
|
||||
url('/fonts/VulfMono-LightItalic.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-Black.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-Black.woff') format('woff'),
|
||||
url('/fonts/VulfMono-Black.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-LightItalic.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-LightItalic.woff') format('woff'),
|
||||
url('/fonts/VulfSans-LightItalic.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-Light.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-Light.woff') format('woff'),
|
||||
url('/fonts/VulfMono-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-BlackItalic.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-BlackItalic.woff') format('woff'),
|
||||
url('/fonts/VulfMono-BlackItalic.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-Italic.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-Italic.woff') format('woff'),
|
||||
url('/fonts/VulfMono-Italic.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Light.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Light.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-BoldItalic.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-BoldItalic.woff') format('woff'),
|
||||
url('/fonts/VulfSans-BoldItalic.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-BlackItalic_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-BlackItalic_1.woff') format('woff'),
|
||||
url('/fonts/VulfMono-BlackItalic_1.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Medium_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Medium_1.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Medium_1.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Black_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Black_1.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Black_1.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-BoldItalic_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-BoldItalic_1.woff') format('woff'),
|
||||
url('/fonts/VulfSans-BoldItalic_1.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-BlackItalic_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-BlackItalic_1.woff') format('woff'),
|
||||
url('/fonts/VulfSans-BlackItalic_1.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-LightItalic_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-LightItalic_1.woff') format('woff'),
|
||||
url('/fonts/VulfSans-LightItalic_1.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-Black_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-Black_1.woff') format('woff'),
|
||||
url('/fonts/VulfMono-Black_1.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Light_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Light_1.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Light_1.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-Bold_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-Bold_1.woff') format('woff'),
|
||||
url('/fonts/VulfMono-Bold_1.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Bold_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Bold_1.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Bold_1.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Italic_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Italic_1.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Italic_1.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-Light_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-Light_1.woff') format('woff'),
|
||||
url('/fonts/VulfMono-Light_1.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-LightItalic_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-LightItalic_1.woff') format('woff'),
|
||||
url('/fonts/VulfMono-LightItalic_1.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Regular_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Regular_1.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Regular_1.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-Italic_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-Italic_1.woff') format('woff'),
|
||||
url('/fonts/VulfMono-Italic_1.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-BoldItalic_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-BoldItalic_1.woff') format('woff'),
|
||||
url('/fonts/VulfMono-BoldItalic_1.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-Regular_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-Regular_1.woff') format('woff'),
|
||||
url('/fonts/VulfMono-Regular_1.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-MediumItalic_1.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-MediumItalic_1.woff') format('woff'),
|
||||
url('/fonts/VulfSans-MediumItalic_1.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Italic_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Italic_2.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Italic_2.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Medium_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Medium_2.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Medium_2.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Bold_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Bold_2.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Bold_2.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Black_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Black_2.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Black_2.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Regular_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Regular_2.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Regular_2.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-BoldItalic_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-BoldItalic_2.woff') format('woff'),
|
||||
url('/fonts/VulfSans-BoldItalic_2.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-BoldItalic_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-BoldItalic_2.woff') format('woff'),
|
||||
url('/fonts/VulfMono-BoldItalic_2.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-Italic_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-Italic_2.woff') format('woff'),
|
||||
url('/fonts/VulfMono-Italic_2.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-BlackItalic_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-BlackItalic_2.woff') format('woff'),
|
||||
url('/fonts/VulfMono-BlackItalic_2.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-BlackItalic_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-BlackItalic_2.woff') format('woff'),
|
||||
url('/fonts/VulfSans-BlackItalic_2.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-MediumItalic_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-MediumItalic_2.woff') format('woff'),
|
||||
url('/fonts/VulfSans-MediumItalic_2.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-Light_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-Light_2.woff') format('woff'),
|
||||
url('/fonts/VulfMono-Light_2.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-LightItalic_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-LightItalic_2.woff') format('woff'),
|
||||
url('/fonts/VulfSans-LightItalic_2.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-Regular_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-Regular_2.woff') format('woff'),
|
||||
url('/fonts/VulfMono-Regular_2.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-LightItalic_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-LightItalic_2.woff') format('woff'),
|
||||
url('/fonts/VulfMono-LightItalic_2.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-Bold_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-Bold_2.woff') format('woff'),
|
||||
url('/fonts/VulfMono-Bold_2.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Sans';
|
||||
src: url('/fonts/VulfSans-Light_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfSans-Light_2.woff') format('woff'),
|
||||
url('/fonts/VulfSans-Light_2.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Vulf Mono';
|
||||
src: url('/fonts/VulfMono-Black_2.woff2') format('woff2'),
|
||||
url('/fonts/VulfMono-Black_2.woff') format('woff'),
|
||||
url('/fonts/VulfMono-Black_2.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
|
@ -1,19 +0,0 @@
|
|||
import "phoenix_html"
|
||||
import {Socket} from "phoenix"
|
||||
import NProgress from "nprogress"
|
||||
import {LiveSocket} from "phoenix_live_view"
|
||||
|
||||
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
|
||||
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
|
||||
|
||||
// Show progress bar on live navigation and form submits
|
||||
window.addEventListener("phx:page-loading-start", info => NProgress.start())
|
||||
window.addEventListener("phx:page-loading-stop", info => NProgress.done())
|
||||
|
||||
// connect if there are any LiveViews on the page
|
||||
liveSocket.connect()
|
||||
|
||||
// expose liveSocket on window for web console debug logs and latency simulation:
|
||||
// >> liveSocket.enableDebug()
|
||||
// >> liveSocket.enableLatencySim(1000)
|
||||
window.liveSocket = liveSocket
|
|
@ -1,63 +0,0 @@
|
|||
// NOTE: The contents of this file will only be executed if
|
||||
// you uncomment its entry in "assets/js/app.js".
|
||||
|
||||
// To use Phoenix channels, the first step is to import Socket,
|
||||
// and connect at the socket path in "lib/web/endpoint.ex".
|
||||
//
|
||||
// Pass the token on params as below. Or remove it
|
||||
// from the params if you are not using authentication.
|
||||
import {Socket} from "phoenix"
|
||||
|
||||
let socket = new Socket("/socket", {params: {token: window.userToken}})
|
||||
|
||||
// When you connect, you'll often need to authenticate the client.
|
||||
// For example, imagine you have an authentication plug, `MyAuth`,
|
||||
// which authenticates the session and assigns a `:current_user`.
|
||||
// If the current user exists you can assign the user's token in
|
||||
// the connection for use in the layout.
|
||||
//
|
||||
// In your "lib/web/router.ex":
|
||||
//
|
||||
// pipeline :browser do
|
||||
// ...
|
||||
// plug MyAuth
|
||||
// plug :put_user_token
|
||||
// end
|
||||
//
|
||||
// defp put_user_token(conn, _) do
|
||||
// if current_user = conn.assigns[:current_user] do
|
||||
// token = Phoenix.Token.sign(conn, "user socket", current_user.id)
|
||||
// assign(conn, :user_token, token)
|
||||
// else
|
||||
// conn
|
||||
// end
|
||||
// end
|
||||
//
|
||||
// Now you need to pass this token to JavaScript. You can do so
|
||||
// inside a script tag in "lib/web/templates/layout/app.html.eex":
|
||||
//
|
||||
// <script>window.userToken = "";</script>
|
||||
//
|
||||
// You will need to verify the user token in the "connect/3" function
|
||||
// in "lib/web/channels/user_socket.ex":
|
||||
//
|
||||
// def connect(%{"token" => token}, socket, _connect_info) do
|
||||
// # max_age: 1209600 is equivalent to two weeks in seconds
|
||||
// case Phoenix.Token.verify(socket, "user socket", token, max_age: 1209600) do
|
||||
// {:ok, user_id} ->
|
||||
// {:ok, assign(socket, :user, user_id)}
|
||||
// {:error, reason} ->
|
||||
// :error
|
||||
// end
|
||||
// end
|
||||
//
|
||||
// Finally, connect to the socket:
|
||||
socket.connect()
|
||||
|
||||
// Now that you are connected, you can join channels with a topic:
|
||||
let channel = socket.channel("topic:subtopic", {})
|
||||
channel.join()
|
||||
.receive("ok", resp => { console.log("Joined successfully", resp) })
|
||||
.receive("error", resp => { console.log("Unable to join", resp) })
|
||||
|
||||
export default socket
|
File diff suppressed because it is too large
Load Diff
|
@ -1,34 +0,0 @@
|
|||
{
|
||||
"repository": {},
|
||||
"description": " ",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"deploy": "webpack --mode production",
|
||||
"watch": "webpack --mode development --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"@egjs/hammerjs": "^2.0.17",
|
||||
"keycharm": "^0.3.1",
|
||||
"moment": "^2.27.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"phoenix": "file:../deps/phoenix",
|
||||
"phoenix_html": "file:../deps/phoenix_html"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.0.0",
|
||||
"@babel/preset-env": "^7.0.0",
|
||||
"babel-loader": "^8.0.0",
|
||||
"copy-webpack-plugin": "^5.1.1",
|
||||
"css-loader": "^3.4.2",
|
||||
"foundation-sites": "^6.6.3",
|
||||
"imports-loader": "^1.1.0",
|
||||
"jquery": "^2.2.4",
|
||||
"mini-css-extract-plugin": "^0.9.0",
|
||||
"node-sass": "^4.12.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||
"sass-loader": "^7.1.0",
|
||||
"terser-webpack-plugin": "^2.3.2",
|
||||
"webpack": "4.41.5",
|
||||
"webpack-cli": "^3.3.2"
|
||||
}
|
||||
}
|
|
@ -1,23 +0,0 @@
|
|||
{
|
||||
"name": "",
|
||||
"short_name": "",
|
||||
"icons": [
|
||||
{
|
||||
"src": "images/manifest-icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable any"
|
||||
},
|
||||
{
|
||||
"src": "images/manifest-icon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable any"
|
||||
}
|
||||
],
|
||||
"scope": "/",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#fcf6ed",
|
||||
"theme_color": "#565826"
|
||||
}
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue