@ -0,0 +1,24 @@ | |||
# Deny all requests from Apache 2.4+. | |||
<IfModule mod_authz_core.c> | |||
Require all denied | |||
</IfModule> | |||
# Deny all requests from Apache 2.0-2.2. | |||
<IfModule !mod_authz_core.c> | |||
Deny from all | |||
</IfModule> | |||
# Turn off all options we don't need. | |||
Options -Indexes -ExecCGI -Includes -MultiViews | |||
# Set the catch-all handler to prevent scripts from being executed. | |||
SetHandler Drupal_Security_Do_Not_Remove_See_SA_2006_006 | |||
<Files *> | |||
# Override the handler again if we're run later in the evaluation list. | |||
SetHandler Drupal_Security_Do_Not_Remove_See_SA_2013_003 | |||
</Files> | |||
# If we know how to do it safely, disable the PHP engine entirely. | |||
<IfModule mod_php5.c> | |||
php_flag engine off | |||
</IfModule> |
@ -0,0 +1,28 @@ | |||
<?php | |||
namespace Drupal\vue_js_example\Plugin\Block; | |||
use Drupal\Core\Block\BlockBase; | |||
/** | |||
* Provides a 'NonVueBlock' block. | |||
* | |||
* @Block( | |||
* id = "non_vue_block", | |||
* admin_label = @Translation("Non vue block"), | |||
* ) | |||
*/ | |||
class NonVueBlock extends BlockBase { | |||
/** | |||
* {@inheritdoc} | |||
*/ | |||
public function build() { | |||
$build = []; | |||
$build['#theme'] = 'non_vue_block'; | |||
$build['non_vue_block']['#markup'] = 'Implement NonVueBlock.'; | |||
return $build; | |||
} | |||
} |
@ -0,0 +1,28 @@ | |||
<?php | |||
namespace Drupal\vue_js_example\Plugin\Block; | |||
use Drupal\Core\Block\BlockBase; | |||
/** | |||
* Provides a 'VueBlock' block. | |||
* | |||
* @Block( | |||
* id = "vue_block", | |||
* admin_label = @Translation("Vue block"), | |||
* ) | |||
*/ | |||
class VueBlock extends BlockBase { | |||
/** | |||
* {@inheritdoc} | |||
*/ | |||
public function build() { | |||
$build = []; | |||
$build['#theme'] = 'vue_block'; | |||
$build['vue_block']['#markup'] = 'Implement VueBlock.'; | |||
return $build; | |||
} | |||
} |
@ -0,0 +1,46 @@ | |||
<?php | |||
namespace Drupal\Tests\vue_js_example\Functional; | |||
use Drupal\Core\Url; | |||
use Drupal\Tests\BrowserTestBase; | |||
/** | |||
* Simple test to ensure that main page loads with module enabled. | |||
* | |||
* @group vue_js | |||
*/ | |||
class LoadTest extends BrowserTestBase { | |||
/** | |||
* Modules to enable. | |||
* | |||
* @var array | |||
*/ | |||
public static $modules = ['vue_js']; | |||
/** | |||
* A user with permission to administer site configuration. | |||
* | |||
* @var \Drupal\user\UserInterface | |||
*/ | |||
protected $user; | |||
/** | |||
* {@inheritdoc} | |||
*/ | |||
protected function setUp() { | |||
parent::setUp(); | |||
$this->user = $this->drupalCreateUser(['administer site configuration']); | |||
$this->drupalLogin($this->user); | |||
} | |||
/** | |||
* Tests that the home page loads with a 200 response. | |||
*/ | |||
public function testLoad() { | |||
$this->drupalGet(Url::fromRoute('<front>')); | |||
$this->assertSession()->statusCodeEquals(200); | |||
} | |||
} |
@ -0,0 +1,5 @@ | |||
name: 'Vue.js Example' | |||
type: module | |||
description: 'My Awesome Module' | |||
core: 8.x | |||
package: 'Custom' |
@ -0,0 +1,24 @@ | |||
<?php | |||
/** | |||
* @file | |||
* Contains vue_js.module. | |||
*/ | |||
use Drupal\Core\Routing\RouteMatchInterface; | |||
/** | |||
* Implements hook_help(). | |||
*/ | |||
function vue_js_example_help($route_name, RouteMatchInterface $route_match) { | |||
switch ($route_name) { | |||
// Main module help for the vue_js module. | |||
case 'help.page.vue_js': | |||
$output = ''; | |||
$output .= '<h3>' . t('About') . '</h3>'; | |||
$output .= '<p>' . t('My Awesome Module') . '</p>'; | |||
return $output; | |||
default: | |||
} | |||
} |
@ -0,0 +1,174 @@ | |||
parameters: | |||
session.storage.options: | |||
# Default ini options for sessions. | |||
# | |||
# Some distributions of Linux (most notably Debian) ship their PHP | |||
# installations with garbage collection (gc) disabled. Since Drupal depends | |||
# on PHP's garbage collection for clearing sessions, ensure that garbage | |||
# collection occurs by using the most common settings. | |||
# @default 1 | |||
gc_probability: 1 | |||
# @default 100 | |||
gc_divisor: 100 | |||
# | |||
# Set session lifetime (in seconds), i.e. the time from the user's last | |||
# visit to the active session may be deleted by the session garbage | |||
# collector. When a session is deleted, authenticated users are logged out, | |||
# and the contents of the user's $_SESSION variable is discarded. | |||
# @default 200000 | |||
gc_maxlifetime: 200000 | |||
# | |||
# Set session cookie lifetime (in seconds), i.e. the time from the session | |||
# is created to the cookie expires, i.e. when the browser is expected to | |||
# discard the cookie. The value 0 means "until the browser is closed". | |||
# @default 2000000 | |||
cookie_lifetime: 2000000 | |||
# | |||
# Drupal automatically generates a unique session cookie name based on the | |||
# full domain name used to access the site. This mechanism is sufficient | |||
# for most use-cases, including multi-site deployments. However, if it is | |||
# desired that a session can be reused across different subdomains, the | |||
# cookie domain needs to be set to the shared base domain. Doing so assures | |||
# that users remain logged in as they cross between various subdomains. | |||
# To maximize compatibility and normalize the behavior across user agents, | |||
# the cookie domain should start with a dot. | |||
# | |||
# @default none | |||
# cookie_domain: '.example.com' | |||
# | |||
twig.config: | |||
# Twig debugging: | |||
# | |||
# When debugging is enabled: | |||
# - The markup of each Twig template is surrounded by HTML comments that | |||
# contain theming information, such as template file name suggestions. | |||
# - Note that this debugging markup will cause automated tests that directly | |||
# check rendered HTML to fail. When running automated tests, 'debug' | |||
# should be set to FALSE. | |||
# - The dump() function can be used in Twig templates to output information | |||
# about template variables. | |||
# - Twig templates are automatically recompiled whenever the source code | |||
# changes (see auto_reload below). | |||
# | |||
# For more information about debugging Twig templates, see | |||
# https://www.drupal.org/node/1906392. | |||
# | |||
# Not recommended in production environments | |||
# @default false | |||
debug: true | |||
# Twig auto-reload: | |||
# | |||
# Automatically recompile Twig templates whenever the source code changes. | |||
# If you don't provide a value for auto_reload, it will be determined | |||
# based on the value of debug. | |||
# | |||
# Not recommended in production environments | |||
# @default null | |||
auto_reload: true | |||
# Twig cache: | |||
# | |||
# By default, Twig templates will be compiled and stored in the filesystem | |||
# to increase performance. Disabling the Twig cache will recompile the | |||
# templates from source each time they are used. In most cases the | |||
# auto_reload setting above should be enabled rather than disabling the | |||
# Twig cache. | |||
# | |||
# Not recommended in production environments | |||
# @default true | |||
cache: false | |||
renderer.config: | |||
# Renderer required cache contexts: | |||
# | |||
# The Renderer will automatically associate these cache contexts with every | |||
# render array, hence varying every render array by these cache contexts. | |||
# | |||
# @default ['languages:language_interface', 'theme', 'user.permissions'] | |||
required_cache_contexts: ['languages:language_interface', 'theme', 'user.permissions'] | |||
# Renderer automatic placeholdering conditions: | |||
# | |||
# Drupal allows portions of the page to be automatically deferred when | |||
# rendering to improve cache performance. That is especially helpful for | |||
# cache contexts that vary widely, such as the active user. On some sites | |||
# those may be different, however, such as sites with only a handful of | |||
# users. If you know what the high-cardinality cache contexts are for your | |||
# site, specify those here. If you're not sure, the defaults are fairly safe | |||
# in general. | |||
# | |||
# For more information about rendering optimizations see | |||
# https://www.drupal.org/developing/api/8/render/arrays/cacheability#optimizing | |||
auto_placeholder_conditions: | |||
# Max-age at or below which caching is not considered worthwhile. | |||
# | |||
# Disable by setting to -1. | |||
# | |||
# @default 0 | |||
max-age: 0 | |||
# Cache contexts with a high cardinality. | |||
# | |||
# Disable by setting to []. | |||
# | |||
# @default ['session', 'user'] | |||
contexts: ['session', 'user'] | |||
# Tags with a high invalidation frequency. | |||
# | |||
# Disable by setting to []. | |||
# | |||
# @default [] | |||
tags: [] | |||
# Cacheability debugging: | |||
# | |||
# Responses with cacheability metadata (CacheableResponseInterface instances) | |||
# get X-Drupal-Cache-Tags and X-Drupal-Cache-Contexts headers. | |||
# | |||
# For more information about debugging cacheable responses, see | |||
# https://www.drupal.org/developing/api/8/response/cacheable-response-interface | |||
# | |||
# Not recommended in production environments | |||
# @default false | |||
http.response.debug_cacheability_headers: false | |||
factory.keyvalue: | |||
{} | |||
# Default key/value storage service to use. | |||
# @default keyvalue.database | |||
# default: keyvalue.database | |||
# Collection-specific overrides. | |||
# state: keyvalue.database | |||
factory.keyvalue.expirable: | |||
{} | |||
# Default key/value expirable storage service to use. | |||
# @default keyvalue.database.expirable | |||
# default: keyvalue.database.expirable | |||
# Allowed protocols for URL generation. | |||
filter_protocols: | |||
- http | |||
- https | |||
- ftp | |||
- news | |||
- nntp | |||
- tel | |||
- telnet | |||
- mailto | |||
- irc | |||
- ssh | |||
- sftp | |||
- webcal | |||
- rtsp | |||
# Configure Cross-Site HTTP requests (CORS). | |||
# Read https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS | |||
# for more information about the topic in general. | |||
# Note: By default the configuration is disabled. | |||
cors.config: | |||
enabled: false | |||
# Specify allowed headers, like 'x-allowed-header'. | |||
allowedHeaders: [] | |||
# Specify allowed request methods, specify ['*'] to allow all possible ones. | |||
allowedMethods: [] | |||
# Configure requests allowed from specific origins. | |||
allowedOrigins: ['*'] | |||
# Sets the Access-Control-Expose-Headers header. | |||
exposedHeaders: false | |||
# Sets the Access-Control-Max-Age header. | |||
maxAge: false | |||
# Sets the Access-Control-Allow-Credentials header. | |||
supportsCredentials: false |
@ -0,0 +1,13 @@ | |||
# editorconfig.org | |||
root = true | |||
[*] | |||
indent_style = space | |||
indent_size = 2 | |||
end_of_line = lf | |||
charset = utf-8 | |||
trim_trailing_whitespace = true | |||
insert_final_newline = true | |||
[*.md] | |||
trim_trailing_whitespace = false |
@ -0,0 +1,174 @@ | |||
# http://eslint.org/docs/rules/ | |||
# ============================= | |||
# By default, ESLint will look for configuration files in all parent | |||
# folders up to the root directory. Prevent this by telling ESLint | |||
# that this is the root of the project. | |||
root: true | |||
# Which environments your script is designed to run in. | |||
# Each environment brings with it a certain set of predefined global variables. | |||
env: | |||
# Define globals exposed by Node.js. | |||
node: true | |||
# Define globals exposed by modern browsers. | |||
browser: true | |||
# Define globals exposed by ES6 / ES2015 EXCEPT for modules. | |||
es6: true | |||
# Define globals exposed by jQuery. | |||
jquery: true | |||
parserOptions: | |||
ecmaVersion: 2018 | |||
ecmaFeatures: | |||
spread: true | |||
# Let ESLint know about defined global variables. | |||
globals: | |||
Drupal: true | |||
drupalSettings: true | |||
# Inherit settings from ESLint Recommended config. | |||
# Rules above override any rules configured here. | |||
extends: 'eslint:recommended' | |||
# 0 - turn the rule off | |||
# 1 - turn the rule on as a warning (doesn't affect exit code) | |||
# 2 - turn the rule on as an error (exit code is 1 when triggered) | |||
rules: | |||
# Two space indentation. | |||
indent: | |||
- 2 | |||
- 2 | |||
- SwitchCase: 1 | |||
# Prefer single quotes over double. | |||
quotes: | |||
- 2 | |||
- single | |||
# Specify Unix line endings. | |||
linebreak-style: | |||
- 2 | |||
- unix | |||
# Enforce using semicolons. | |||
semi: | |||
- 2 | |||
- always | |||
# Enforce camelcase for variables. | |||
camelcase: | |||
- 2 | |||
# Prohibit use of == and != in favor of === and !==. | |||
eqeqeq: | |||
- 2 | |||
# Enforce placing 'use strict' at the top function scope | |||
strict: | |||
- 2 | |||
- function | |||
# Prohibit use of a variable before it is defined. | |||
no-undef: | |||
- 1 | |||
# Enforce line length to 90 characters | |||
max-len: | |||
- 2 | |||
- 90 | |||
- 2 | |||
# Require capitalized names for constructor functions. | |||
new-cap: | |||
- 2 | |||
# Warn when variables are defined but never used. | |||
no-unused-vars: | |||
- 1 | |||
# Require one var declaration for each variable and | |||
# declare each variable on a newline. | |||
one-var: | |||
- 2 | |||
- never | |||
# Enforce stroustrup style for braces. | |||
brace-style: | |||
- 2 | |||
- stroustrup | |||
# Validates JSDoc comments are syntactically correct | |||
valid-jsdoc: | |||
- 2 | |||
# Treat var as Block Scoped | |||
block-scoped-var: | |||
- 1 | |||
# Require Following Curly Brace Conventions | |||
curly: | |||
- 2 | |||
# Disallow Use of Alert | |||
no-alert: | |||
- 1 | |||
# Disallow eval() | |||
no-eval: | |||
- 2 | |||
# Disallow the type conversion with shorter notations | |||
no-implicit-coercion: | |||
- 2 | |||
# Disallow Functions in Loops | |||
no-loop-func: | |||
- 2 | |||
# Disallow Script URLs | |||
no-script-url: | |||
- 2 | |||
# Disallow Use of the Comma Operator | |||
no-sequences: | |||
- 2 | |||
# Disallow unnecessary concatenation of strings | |||
no-useless-concat: | |||
- 2 | |||
# Disallow Yoda Conditions | |||
yoda: | |||
- 2 | |||
# Disallow Early Use | |||
no-use-before-define: | |||
- 2 | |||
# Require file to end with single newline | |||
eol-last: | |||
- 2 | |||
# Disallow trailing spaces at the end of lines | |||
no-trailing-spaces: | |||
- 2 | |||
# Disallow Dangling Underscores in Identifiers | |||
no-underscore-dangle: | |||
- 2 | |||
# Require JSDoc comment | |||
require-jsdoc: | |||
- 1 | |||
# Require Or Disallow Space Before Blocks | |||
space-before-blocks: | |||
- 2 |
@ -0,0 +1,11 @@ | |||
# Ignore the node modules folder (created by 'npm install'). | |||
node_modules | |||
# We absolutely don't want to have the .sass-cache in git. | |||
.sass-cache | |||
# Ignore any errors thrown by npm. | |||
npm-debug.log | |||
# Ignore any map files. These don't need to be committed. | |||
*.map |
@ -0,0 +1 @@ | |||
v11.2.0 |
@ -0,0 +1,247 @@ | |||
# Custom configuration for Sass lint. | |||
# https://github.com/sasstools/sass-lint | |||
options: | |||
formatter: stylish | |||
merge-default-rules: true | |||
# For all rules, setting their severity to 0 turns it off, | |||
# setting to 1 sets it as a warning (something that should not be committed in), | |||
# and setting to 2 set it to an error (something that should not be written). | |||
# | |||
# More info can be found here: | |||
# https://github.com/sasstools/sass-lint/tree/develop/docs/rules | |||
rules: | |||
# Prefer the terser border: 0 over border: none. | |||
border-zero: | |||
- 1 | |||
- convention: '0' | |||
# Prefer | |||
# | |||
# .foo { | |||
# content: 'foo'; | |||
# } | |||
# | |||
# over | |||
# | |||
# .foo | |||
# { | |||
# content: 'foo'; | |||
# } | |||
# Allow single line for one off cases. | |||
brace-style: | |||
- 1 | |||
- | |||
style: stroustrup | |||
allow-single-line: true | |||
# Prefer @import paths without leading underscores and/or | |||
# file extensions. | |||
clean-import-paths: | |||
- 1 | |||
- | |||
filename-extension: false | |||
leading-underscore: false | |||
# Prefer empty lines between code blocks when nestings. | |||
empty-line-between-blocks: | |||
- 1 | |||
- include: true | |||
# Prefer newline at the end of a file. | |||
final-newline: | |||
- 1 | |||
- include: true | |||
# Don't enforce attribute nesting. | |||
force-attribute-nesting: 0 | |||
# Don't enforce element nesting. | |||
force-element-nesting: 0 | |||
# Don't enforce pseudo nesting. | |||
force-pseudo-nesting: 0 | |||
# Prefer function name formatting with dashes. | |||
function-name-format: | |||
- 1 | |||
- | |||
allow-leading-underscore: true | |||
convention: hyphenatedlowercase | |||
# Prefer short hexadecimal values for colors. | |||
# #FFF vs #FFFFFF | |||
hex-length: | |||
- 0 | |||
- style: short | |||
# Don't enforce hex-notation. | |||
# #FFF vs #fff | |||
hex-notation: | |||
- 0 | |||
- style: lowercase | |||
# Prefer two spaces for indentation. | |||
indentation: | |||
- 1 | |||
- width: 2 | |||
# Prefer leading zero for readability. | |||
leading-zero: | |||
- 1 | |||
- include: true | |||
# Prefer mixin names with dashes. | |||
mixin-name-format: | |||
- 1 | |||
- | |||
allow-leading-underscore: true | |||
convention: hyphenatedlowercase | |||
# Prefer a max-depth of 3 for nesting. 2 would really be best. | |||
nesting-depth: | |||
- 1 | |||
- max-depth: 3 | |||
# No preference for color keywords. | |||
no-color-keyword: 0 | |||
# No preference for color literals. | |||
no-color-literals: 0 | |||
# Allow css comments. | |||
no-css-comments: 0 | |||
# Prefer debug not be used. | |||
no-debug: 1 | |||
# Prefer no duplicate properties except display. | |||
no-duplicate-properties: | |||
- 1 | |||
- | |||
exclude: | |||
- display | |||
- background | |||
# Enforce no empty rulesets. | |||
no-empty-rulesets: 2 | |||
# Let's just go ahead and say 'no extends'. | |||
no-extends: 1 | |||
# Prefer no ID selectors. | |||
no-ids: 1 | |||
# Prefer no importants. | |||
no-important: 1 | |||
# Enforce that all hex values must be valid. | |||
no-invalid-hex: 2 | |||
# Prefer no duplicate selectors that can be merged. | |||
no-mergeable-selectors: 1 | |||
# Enforce that all properties are spelled correctly. | |||
no-misspelled-properties: | |||
- 2 | |||
- | |||
extra-properties: [] | |||
# Prefer only allowing elements to be qualified with attributes. | |||
no-qualifying-elements: | |||
- 1 | |||
- | |||
allow-element-with-attribute: true | |||
allow-element-with-class: false | |||
allow-element-with-id: false | |||
class-name-format: | |||
- 2 | |||
- allow-leading-underscore: false | |||
convention: hyphenatedbem | |||
# No preference for trailing zeros. | |||
no-trailing-zero: 0 | |||
# Prefer no url absolute url paths. | |||
no-url-protocols: 1 | |||
# No preference for property sort order. | |||
property-sort-order: 0 | |||
# Prefer single quotes. | |||
quotes: | |||
- 1 | |||
- style: single | |||
# Prefer shorthand values be as concise as possible. | |||
# | |||
# margin: 1px 1px 1px 1px; | |||
# | |||
# // Will be enforced to 1 value | |||
# margin: 1px; | |||
shorthand-values: 1 | |||
# Prefer single line per selector. | |||
single-line-per-selector: 1 | |||
# Prefer no space after bang(!). | |||
space-after-bang: | |||
- 1 | |||
- include: false | |||
# Prefer space after colon. | |||
space-after-colon: | |||
- 1 | |||
- include: true | |||
# Prefer space after comma. | |||
space-after-comma: | |||
- 1 | |||
- include: true | |||
# Prefer space before bang(!). | |||
space-before-bang: | |||
- 1 | |||
- include: true | |||
# Prefer space before a brace. | |||
space-before-brace: | |||
- 1 | |||
- include: true | |||
# Prefer NO space before colon. | |||
space-before-colon: 1 | |||
# Prefer NO space between parenthesis(()). | |||
space-between-parens: | |||
- 1 | |||
- include: false | |||
# Enforce ending each declaration with a semicolon(;). | |||
trailing-semicolon: 2 | |||
# Prefer that url() uses quotes. | |||
# | |||
# .foo { | |||
# background-image: url('foo.png'); | |||
# } | |||
url-quotes: 1 | |||
# No preference for forcing certain properties to use variables. | |||
variable-for-property: | |||
- 0 | |||
- properties: [] | |||
# Prefer hyphenated lowercase for variable names. | |||
variable-name-format: | |||
- 1 | |||
- | |||
allow-leading-underscore: true | |||
convention: hyphenatedlowercase | |||
# Prefer zero values to be unitless. | |||
# 0 vs 0px | |||
zero-unit: 1 |
@ -0,0 +1,46 @@ | |||
## Getting Started | |||
### Browser Support | |||
Autoprefixer & Babel is set to support: | |||
* IE >= 11 | |||
* Last 2 versions of modern browsers. | |||
These can be updated at any time within the `package.json`. | |||
### Run the following commands from the theme directory | |||
If you haven't yet, install nvm: | |||
https://github.com/creationix/nvm | |||
#### Use the right version of node with: | |||
`nvm use` | |||
_This command will look at your `.nvmrc` file and use the version node.js specified in it. This ensures all developers use the same version of node for consistency._ | |||
#### If that version of node isn't installed, install it with: | |||
`nvm install` | |||
#### Install npm dependencies with | |||
`npm install` | |||
_This command looks at `package.json` and installs all the npm dependencies specified in it. Some of the dependencies include gulp, autoprefixer, gulp-sass and others._ | |||
#### Runs default task | |||
`npm run build` | |||
_This will run whatever the default task is._ | |||
#### Compiles Sass | |||
`npm run compile` | |||
_This will perform a one-time Sass compilation._ | |||
#### Runs the watch command | |||
`npm run watch` | |||
_This is ideal when you are doing a lot of Sass changes and you want to make sure every time a change is saved it automatically gets compiled to CSS_ | |||
#### Cleans complied directory | |||
`npm run clean` | |||
_This will perform a one-time deletion of all compiled files within the dist/ directory._ |
@ -0,0 +1,8 @@ | |||
.collapsible { | |||
border: 1px solid black; } | |||
.collapsible.closed .body { | |||
display: none; } | |||
.collapsible .title { | |||
background: lightgray; } | |||
.collapsible .title h2 { | |||
margin: 0; } |
@ -0,0 +1,69 @@ | |||
.modal .modal__modal { | |||
display: -webkit-box; | |||
display: -ms-flexbox; | |||
display: flex; | |||
height: 100%; } | |||
.modal .modal__modal .modal__content { | |||
margin: auto; | |||
padding: 20px 30px; | |||
background-color: #FFF; | |||
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); | |||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); | |||
-webkit-transition: opacity 300ms ease; | |||
transition: opacity 300ms ease; | |||
width: 80%; | |||
max-width: 1000px; | |||
max-height: 70%; | |||
border-radius: 2px; | |||
position: relative; } | |||
@media (min-width: 992px) { | |||
.modal .modal__modal .modal__content { | |||
width: 55%; } } | |||
.modal .modal__modal:focus { | |||
outline: none; } | |||
.modal .modal__modal h1, | |||
.modal .modal__modal h2, | |||
.modal .modal__modal h3, | |||
.modal .modal__modal h4 { | |||
margin-top: 0; } | |||
.modal .modal__modal .modal__close { | |||
cursor: pointer; | |||
position: absolute; | |||
top: 10px; | |||
right: 10px; } | |||
.modal .modal__modal .modal__footer { | |||
border-radius: 0 0 2px 2px; | |||
background-color: #fafafa; | |||
padding: 4px 6px; | |||
height: 56px; | |||
width: 100%; | |||
text-align: right; } | |||
.modal .modal__modal .modal__footer .btn, | |||
.modal .modal__modal .modal__footer .btn-flat { | |||
margin: 6px 0; } | |||
.modal .modal__mask { | |||
position: fixed; | |||
z-index: 999; | |||
top: 0; | |||
left: 0; | |||
bottom: 0; | |||
right: 0; | |||
height: 100%; | |||
width: 100%; | |||
background: rgba(0, 0, 0, 0.6); | |||
opacity: 1; | |||
-webkit-transition: opacity 300ms ease; | |||
transition: opacity 300ms ease; | |||
will-change: opacity; } | |||
.modal .modal-enter { | |||
opacity: 0; } | |||
.modal .modal-leave-active { | |||
opacity: 0; } | |||
.modal .modal-enter .modal-container, | |||
.modal .modal-leave-active .modal-container { | |||
-webkit-transform: scale(1.1); | |||
transform: scale(1.1); } |
@ -0,0 +1,15 @@ | |||
document.addEventListener('DOMContentLoaded', function () { | |||
'use strict'; | |||
drupalSettings.modal = new Vue({ // eslint-disable-line no-unused-vars, no-undef, max-len | |||
el: '.collapsible-vue', | |||
data: { | |||
showBody: false | |||
}, | |||
methods: { | |||
toggleBody: function toggleBody() { | |||
this.showBody = !this.showBody; | |||
} | |||
} | |||
}); | |||
}); |
@ -0,0 +1,17 @@ | |||
!function (document, Drupal, $) { | |||
'use strict'; | |||
Drupal.behaviors.drupalVueCollapsible = { | |||
attach: function attach(context) { | |||
var collapsibles = context.querySelectorAll('.collapsible-non-vue'); | |||
collapsibles.forEach(function (collapsible) { | |||
collapsible.querySelector('.title').addEventListener('click', function (e) { | |||
e.preventDefault(); | |||
this.parentElement.classList.toggle('closed'); | |||
}); | |||
}); | |||
} | |||
}; | |||
}(document, Drupal, jQuery); |
@ -0,0 +1,24 @@ | |||
!function (document, Drupal, $) { | |||
'use strict'; | |||
Drupal.behaviors.drupalVueModal = { | |||
attach: function attach(context) { | |||
var modal = context.querySelector('#non-vue-modal'); | |||
var modalButton = context.querySelector('#non-vue-modal-button'); | |||
var modalCloseButton = context.querySelector('#non-vue-modal .modal__close'); | |||
if (modalButton !== null) { | |||
modalButton.addEventListener('click', function (e) { | |||
e.preventDefault(); | |||
modal.querySelector('.modal__mask').classList.remove('hidden'); | |||
}); | |||
modalCloseButton.addEventListener('click', function (e) { | |||
e.preventDefault(); | |||
modal.querySelector('.modal__mask').classList.add('hidden'); | |||
}); | |||
} | |||
} | |||
}; | |||
}(document, Drupal, jQuery); |
@ -0,0 +1,20 @@ | |||
document.addEventListener('DOMContentLoaded', function () { | |||
'use strict'; | |||
drupalSettings.modal = new Vue({ // eslint-disable-line no-unused-vars, no-undef, max-len | |||
el: '#vue-modal', | |||
data: { | |||
showModal: false, | |||
content: 'Default Modal Text' | |||
}, | |||
methods: { | |||
show: function show(content) { | |||
this.showModal = true; | |||
this.content = content; | |||
}, | |||
close: function close() { | |||
this.showModal = false; | |||
} | |||
} | |||
}); | |||
}); |
@ -0,0 +1,33 @@ | |||
/*eslint strict: ["error", "global"]*/ | |||
'use strict'; | |||
//======================================================= | |||
// Include Our Plugins | |||
//======================================================= | |||
var del = require('del'); | |||
// Export our tasks. | |||
module.exports = { | |||
// Clean style guide files. | |||
styleguide: function() { | |||
// You can use multiple globbing patterns as you would with `gulp.src` | |||
return del([ | |||
'./dist/style-guide/*' | |||
], {force: true}); | |||
}, | |||
// Clean CSS files. | |||
css: function() { | |||
return del([ | |||
'./dist/css/*' | |||
], {force: true}); | |||
}, | |||
// Clean JS files. | |||
js: function() { | |||
return del([ | |||
'./dist/js/*' | |||
], {force: true}); | |||
} | |||
}; |
@ -0,0 +1,68 @@ | |||
/*eslint strict: ["error", "global"]*/ | |||
'use strict'; | |||
//======================================================= | |||
// Include gulp | |||
//======================================================= | |||
var gulp = require('gulp'); | |||
//======================================================= | |||
// Include Our Plugins | |||
//======================================================= | |||
var sass = require('gulp-sass'); | |||
var prefix = require('gulp-autoprefixer'); | |||
var sourcemaps = require('gulp-sourcemaps'); | |||
var sync = require('browser-sync'); | |||
var babel = require('gulp-babel'); | |||
var rename = require('gulp-rename'); | |||
// Small error handler helper function. | |||
function handleError(err) { | |||
console.log(err.toString()); | |||
this.emit('end'); | |||
} | |||
// Export our tasks. | |||
module.exports = { | |||
// Compile Sass. | |||
sass: function() { | |||
return gulp.src('./src/{global,layout,components}/**/*.scss') | |||
.pipe( | |||
sass({ outputStyle: 'nested' }) | |||
.on('error', handleError) | |||
) | |||
.pipe(prefix({ | |||
cascade: false | |||
})) | |||
.pipe(rename(function (path) { | |||
path.dirname = ''; | |||
return path; | |||
})) | |||
.pipe(gulp.dest('./dist/css')) | |||
.pipe(sync.stream({match: '**/*.css'})); | |||
}, | |||
// Compile JavaScript. | |||
js: function() { | |||
return gulp.src([ | |||
'./src/{global,layout,components}/**/*.es6.js' | |||
], { base: './' }) | |||
.pipe( | |||
babel() | |||
.on('error', handleError) | |||
) | |||
.pipe(rename(function (path) { | |||
// Currently not using ES6 modules so for now | |||
// es6 files are compiled into individual JS files. | |||
// Eventually this can use ES6 Modules and compile | |||
// all files within a component directory into a single | |||
// foo.bundle.js file. In that case the bundle name should | |||
// reflect the components directory name. | |||
path.dirname = ''; | |||
path.basename = path.basename.replace(/\.es6/, ''); | |||
return path; | |||
})) | |||
.pipe(gulp.dest('./dist/js')); | |||
} | |||
}; |
@ -0,0 +1,35 @@ | |||
/*eslint strict: ["error", "global"]*/ | |||
'use strict'; | |||
//======================================================= | |||
// Include gulp | |||
//======================================================= | |||
var gulp = require('gulp'); | |||
//======================================================= | |||
// Include Our Plugins | |||
//======================================================= | |||
var rename = require('gulp-rename'); | |||
var imagemin = require('gulp-imagemin'); | |||
// Export our tasks. | |||
module.exports = { | |||
// Compress svg/png/jpg files. | |||
assets: function() { | |||
return gulp.src([ | |||
'./src/{global,layout,components}/**/*{.png,.jpg,.svg}' | |||
]) | |||
.pipe(imagemin({ | |||
progressive: true, | |||
svgoPlugins: [{ | |||
removeViewBox: false | |||
}] | |||
})) | |||
.pipe(rename(function (path) { | |||
path.dirname = ''; | |||
return path; | |||
})) | |||
.pipe(gulp.dest('./dist/assets')); | |||
} | |||
}; |
@ -0,0 +1,37 @@ | |||
/*eslint strict: ["error", "global"]*/ | |||
'use strict'; | |||
//======================================================= | |||
// Include gulp | |||
//======================================================= | |||
var gulp = require('gulp'); | |||
//======================================================= | |||
// Include Our Plugins | |||
//======================================================= | |||
var sassLint = require('gulp-sass-lint'); | |||
var eslint = require('gulp-eslint'); | |||
// Export our tasks. | |||
module.exports = { | |||
// Lint Sass based on .sass-lint.yml config. | |||
sass: function() { | |||
return gulp.src([ | |||
'./src/{global,layout,components}/**/*.scss', | |||
'!./src/global/utils/*' | |||
]) | |||
.pipe(sassLint()) | |||
.pipe(sassLint.format()); | |||
}, | |||
// Lint JavaScript based on .eslintrc config. | |||
js: function() { | |||
return gulp.src([ | |||
'./src/{global,layout,components}/**/*.js', | |||
'!./src/components/**/vendors/*' | |||
]) | |||
.pipe(eslint()) | |||
.pipe(eslint.format()); | |||
} | |||
}; |
@ -0,0 +1,33 @@ | |||
/*eslint strict: ["error", "global"]*/ | |||
'use strict'; | |||
// If some JS components aren't es6 we want to simply move them | |||
// into the dist folder. This allows us to clean the dist/js | |||
// folder on build. | |||
//======================================================= | |||
// Include gulp | |||
//======================================================= | |||
var gulp = require('gulp'); | |||
//======================================================= | |||
// Include Our Plugins | |||
//======================================================= | |||
var rename = require('gulp-rename'); | |||
// Export our tasks. | |||
module.exports = { | |||
// Moves JavaScript. | |||
js: function() { | |||
return gulp.src([ | |||
'./src/{global,layout,components}/**/*.js', | |||
'!./src/{global,layout,components}/**/*.es6.js' | |||
], { base: './' }) | |||
.pipe(rename(function (path) { | |||
path.dirname = ''; | |||
return path; | |||
})) | |||
.pipe(gulp.dest('./dist/js')); | |||
} | |||
}; |
@ -0,0 +1,144 @@ | |||
/*eslint strict: ["error", "global"]*/ | |||
'use strict'; | |||
//======================================================= | |||
// Include gulp | |||
//======================================================= | |||
var gulp = require('gulp'); | |||
//======================================================= | |||
// Include Our Plugins | |||
//======================================================= | |||
var sync = require('browser-sync'); | |||
var runSequence = require('run-sequence'); | |||
//======================================================= | |||
// Include Our tasks. | |||
// | |||
// Each task is broken apart to it's own node module. | |||
// Check out the ./gulp-tasks directory for more. | |||
//======================================================= | |||
var taskCompile = require('./gulp-tasks/compile.js'); | |||
var taskMove = require('./gulp-tasks/move.js'); | |||
var taskLint = require('./gulp-tasks/lint.js'); | |||
var taskCompress = require('./gulp-tasks/compress.js'); | |||
var taskClean = require('./gulp-tasks/clean.js'); | |||
//======================================================= | |||
// Compile Our Sass and JS | |||
// We also move some files if they don't need | |||
// to be compiled. | |||
//======================================================= | |||
gulp.task('compile', ['compile:sass', 'compile:js', 'move:js']); | |||
// Compile Sass | |||
gulp.task('compile:sass', function() { | |||
return taskCompile.sass(); | |||
}); | |||
// Compile JavaScript ES2015 to ES5. | |||
gulp.task('compile:js', function() { | |||
return taskCompile.js(); | |||
}); | |||
// If some JS components aren't es6 we want to simply move them | |||
// into the dist folder. This allows us to clean the dist/js | |||
// folder on build. | |||
gulp.task('move:js', function() { | |||
return taskMove.js(); | |||
}); | |||
//======================================================= | |||
// Lint Sass and JavaScript | |||
//======================================================= | |||
gulp.task('lint', ['lint:sass', 'lint:js']); | |||
// Lint Sass based on .sass-lint.yml config. | |||
gulp.task('lint:sass', function () { | |||
return taskLint.sass(); | |||
}); | |||
// Lint JavaScript based on .eslintrc config. | |||
gulp.task('lint:js', function () { | |||
return taskLint.js(); | |||
}); | |||
//======================================================= | |||
// Compress Files | |||
//======================================================= | |||
gulp.task('compress', function() { | |||
return taskCompress.assets(); | |||
}); | |||
//======================================================= | |||
// Clean all directories. | |||
//======================================================= | |||
gulp.task('clean', ['clean:css', 'clean:js']); | |||
// Clean CSS files. | |||
gulp.task('clean:css', function () { | |||
return taskClean.css(); | |||
}); | |||
// Clean JS files. | |||
gulp.task('clean:js', function () { | |||
return taskClean.js(); | |||
}); | |||
//======================================================= | |||
// Watch and recompile sass. | |||
//======================================================= | |||
// Pull the sass watch task out so we can use run sequence. | |||
// Pull the sass watch task out so we can use run sequence. | |||
gulp.task('watch:sass', function(callback) { | |||
runSequence( | |||
['lint:sass', 'compile:sass'], | |||
callback | |||
); | |||
}); | |||
// Main watch task. | |||
gulp.task('watch', function() { | |||
// BrowserSync proxy setup | |||
// Uncomment this and swap proxy with your local env url. | |||
// NOTE: for this to work in Drupal, you must install and enable | |||
// https://www.drupal.org/project/link_css. This module should | |||
// NOT be committed to the repo OR enabled on production. | |||
// | |||
// This should work out of the box for work within the style guide. | |||
// | |||
// sync.init({ | |||
// open: false, | |||
// proxy: 'http://test.localhost' | |||
// }); | |||
// Watch all my sass files and compile sass if a file changes. | |||
gulp.watch( | |||
'./src/{global,layout,components}/**/*.scss', | |||
['watch:sass'] | |||
); | |||
// Watch all my JS files and compile if a file changes. | |||
gulp.watch([ | |||
'./src/{global,layout,components}/**/*.js' | |||
], ['lint:js', 'compile:js']); | |||
}); | |||
//======================================================= | |||
// Default Task | |||
// | |||
// runSequence runs 'clean' first, and when that finishes | |||
// 'lint', 'compile' and 'compress' run at the same time. | |||
//======================================================= | |||
gulp.task('default', function(callback) { | |||
runSequence( | |||
'clean', | |||
['lint', 'compile', 'compress'], | |||
callback | |||
); | |||
}); |
@ -0,0 +1,60 @@ | |||
{ | |||
"name": "vue_js_example", | |||
"version": "1.0.0", | |||
"scripts": { | |||
"build": "gulp", | |||
"compile": "gulp compile", | |||
"watch": "gulp watch", | |||
"styleguide": "gulp styleguide", | |||
"compress": "gulp compress", | |||
"lint": "gulp lint", | |||
"clean": "gulp clean", | |||
"gulp": "gulp" | |||
}, | |||
"sasslintConfig": ".sass-lint.yml", | |||
"babel": { | |||
"presets": [ | |||
[ | |||
"env", | |||
{ | |||
"targets": { | |||
"browsers": [ | |||
"IE >= 11", | |||
"last 2 versions" | |||
] | |||
} | |||
} | |||
] | |||
], | |||
"plugins": [ | |||
"transform-remove-strict-mode", | |||
"transform-object-rest-spread", | |||
"transform-es2015-arrow-functions" | |||
] | |||
}, | |||
"browserslist": [ | |||
"IE >= 11", | |||
"last 2 versions" | |||
], | |||
"devDependencies": { | |||
"babel-plugin-transform-es2015-arrow-functions": "^6.22.0", | |||
"babel-plugin-transform-object-rest-spread": "^6.26.0", | |||
"babel-plugin-transform-remove-strict-mode": "0.0.2", | |||
"babel-preset-env": "^1.6.0", | |||
"browser-sync": "^2.18.12", | |||
"del": "^3.0.0", | |||
"gulp": "^3.9.1", | |||
"gulp-autoprefixer": "^4.0.0", | |||
"gulp-babel": "^6.1.2", | |||
"gulp-eslint": "^4.0.0", | |||
"gulp-imagemin": "^3.3.0", | |||
"gulp-rename": "^1.2.2", | |||
"gulp-sass": "^3.1.0", | |||
"gulp-sass-lint": "^1.3.2", | |||
"gulp-sourcemaps": "^2.6.0", | |||
"run-sequence": "^2.0.0", | |||
"massive-typo": "^0.0.3", | |||
"koality-flexbox-grid": "^0.0.13", | |||
"breakpoint-sass": "^2.7.1" | |||
} | |||
} |
@ -0,0 +1,15 @@ | |||
document.addEventListener('DOMContentLoaded', () => { | |||
'use strict'; | |||
drupalSettings.modal = new Vue({ // eslint-disable-line no-unused-vars, no-undef, max-len | |||
el: '.collapsible-vue', | |||
data: { | |||
showBody: false | |||
}, | |||
methods: { | |||
toggleBody() { | |||
this.showBody = !this.showBody; | |||
}, | |||
} | |||
}); | |||
}); |
@ -0,0 +1,10 @@ | |||
{{ attach_library('vue_js/collapsible') }} | |||
{{ attach_library('vue_js/collapsible-vue') }} | |||
<div class="collapsible collapsible-vue"> | |||
<div class="title" @click="toggleBody"> | |||
<h2>{{ title }}</h2> | |||
</div> | |||
<div class="body" v-if="showBody"> | |||
{{ body }} | |||
</div> | |||
</div> |
@ -0,0 +1,18 @@ | |||
!((document, Drupal, $) => { | |||
'use strict'; | |||
Drupal.behaviors.drupalVueCollapsible = { | |||
attach: function(context) { | |||
const collapsibles = context.querySelectorAll('.collapsible-non-vue'); | |||
collapsibles.forEach((collapsible) => { | |||
collapsible.querySelector('.title').addEventListener('click', function(e) { | |||
e.preventDefault(); | |||
this.parentElement.classList.toggle('closed'); | |||
}); | |||
}); | |||
} | |||
}; | |||
})(document, Drupal, jQuery); |
@ -0,0 +1,20 @@ | |||
// Import site utilities. | |||
@import '../../global/utils/init'; | |||
.collapsible { | |||
border: 1px solid black; | |||
&.closed { | |||
.body { | |||
display: none; | |||
} | |||
} | |||
.title { | |||
background: lightgray; | |||
h2 { | |||
margin: 0; | |||
} | |||
} | |||
} |
@ -0,0 +1,10 @@ | |||
{{ attach_library('vue_js/collapsible') }} | |||
{{ attach_library('vue_js/collapsible-non-vue') }} | |||
<div class="collapsible collapsible-non-vue closed"> | |||
<div class="title"> | |||
<h2>{{ title }}</h2> | |||
</div> | |||
<div class="body"> | |||
{{ body }} | |||
</div> | |||
</div> |
@ -0,0 +1,26 @@ | |||
!((document, Drupal, $) => { | |||
'use strict'; | |||
Drupal.behaviors.drupalVueModal = { | |||
attach: function(context) { | |||
const modal = context.querySelector('#non-vue-modal'); | |||
const modalButton = context.querySelector('#non-vue-modal-button'); | |||
const modalCloseButton = context.querySelector('#non-vue-modal .modal__close'); | |||
if (modalButton !== null) { | |||
modalButton.addEventListener('click', (e)=> { | |||
e.preventDefault(); | |||
modal.querySelector('.modal__mask').classList.remove('hidden'); | |||
}); | |||
modalCloseButton.addEventListener('click', (e)=> { | |||
e.preventDefault(); | |||
modal.querySelector('.modal__mask').classList.add('hidden'); | |||
}); | |||
} | |||
} | |||
}; | |||
})(document, Drupal, jQuery); |
@ -0,0 +1,15 @@ | |||
{{ attach_library('vue_js/modal') }} | |||
{{ attach_library('vue_js/modal-non-vue') }} | |||
<a id="non-vue-modal-button" href="#">Open Non Vue Modal</a> | |||
<section id="non-vue-modal" class="modal"> | |||
<div class="modal__mask hidden" > | |||
<div class="modal__modal"> | |||
<div class="modal__content"> | |||
<div class="content">This is your modal!</div> | |||
<div class="modal__button modal__close"> | |||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</section> |
@ -0,0 +1,20 @@ | |||
document.addEventListener('DOMContentLoaded', () => { | |||
'use strict'; | |||
drupalSettings.modal = new Vue({ // eslint-disable-line no-unused-vars, no-undef, max-len | |||
el: '#vue-modal', | |||
data: { | |||
showModal: false, | |||
content: 'Default Modal Text', | |||
}, | |||
methods: { | |||
show(content) { | |||
this.showModal = true; | |||
this.content = content; | |||
}, | |||
close() { | |||
this.showModal = false; | |||
} | |||
} | |||
}); | |||
}); |
@ -0,0 +1,22 @@ | |||
{{ attach_library('vue_js/modal') }} | |||
{{ attach_library('vue_js/modal-vue') }} | |||
{% verbatim %} | |||
<section id="vue-modal" class="modal"> | |||
<input v-model="content" type="text" name="content" /> | |||
<a id="vue-modal=button" href="#" @click="showModal = true">Open Vue Modal</a> | |||
<transition name="modal" v-if="showModal" @close="showModal = false"> | |||
<div class="modal__mask hidden" | |||
:style="{'display': 'block'}" | |||
> | |||
<div class="modal__modal"> | |||
<div class="modal__content"> | |||
<div class="content">{{ content }}</div> | |||
<div class="modal__button modal__close" @click="showModal = false"> | |||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</transition> | |||
</section> | |||
{% endverbatim %} |
@ -0,0 +1,86 @@ | |||
// Import site utilities. | |||
@import '../../global/utils/init'; | |||
.modal { | |||
.modal__modal { | |||
display: flex; | |||
height: 100%; | |||
.modal__content { | |||
margin: auto; | |||
padding: 20px 30px; | |||
background-color: $color-white; | |||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); | |||
transition: opacity 300ms ease; | |||
width: 80%; | |||
max-width: 1000px; | |||
max-height: 70%; | |||
border-radius: 2px; | |||
position: relative; | |||
@include breakpoint($lg) { | |||
width: 55%; | |||
} | |||
} | |||
&:focus { | |||
outline: none; | |||
} | |||
h1, | |||
h2, | |||
h3, | |||
h4 { | |||
margin-top: 0; | |||
} | |||
.modal__close { | |||
cursor: pointer; | |||
position: absolute; | |||
top: 10px; | |||
right: 10px; | |||
} | |||
.modal__footer { | |||
border-radius: 0 0 2px 2px; | |||
background-color: #fafafa; | |||
padding: 4px 6px; | |||
height: 56px; | |||
width: 100%; | |||
text-align: right; | |||
.btn, | |||
.btn-flat { | |||
margin: 6px 0; | |||
} | |||
} | |||
} | |||
.modal__mask { | |||
position: fixed; | |||
z-index: 999; | |||
top: 0; | |||
left: 0; | |||
bottom: 0; | |||
right: 0; | |||
height: 100%; | |||
width: 100%; | |||
background: rgba(0, 0, 0, 0.6); | |||
opacity: 1; | |||
transition: opacity 300ms ease; | |||
will-change: opacity; | |||
} | |||
.modal-enter { | |||
opacity: 0; | |||
} | |||
.modal-leave-active { | |||
opacity: 0; | |||
} | |||
.modal-enter .modal-container, | |||
.modal-leave-active .modal-container { | |||
transform: scale(1.1); | |||
} | |||
} |
@ -0,0 +1,23 @@ | |||
@import 'fonts'; | |||
@import 'normalize'; | |||
html { | |||
box-sizing: border-box; | |||
} | |||
// https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ | |||
* { | |||
box-sizing: inherit; | |||
&::before, | |||
&::after { | |||
box-sizing: inherit; | |||
} | |||
} | |||
body { | |||
width: 100%; | |||
margin: 0; | |||
font-size: 100%; | |||
overflow-x: hidden; | |||
} |
@ -0,0 +1 @@ | |||
// Used to define all font faces available |
@ -0,0 +1,351 @@ | |||
// sass-lint:disable no-vendor-prefixes no-duplicate-properties | |||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ | |||
/* Modified to remove things we already are defining */ | |||
/* Document | |||
========================================================================== */ | |||
/** | |||
* 1. Correct the line height in all browsers. | |||
* 2. Prevent adjustments of font size after orientation changes in iOS. | |||
*/ | |||
html { | |||
line-height: 1.15; /* 1 */ | |||
-webkit-text-size-adjust: 100%; /* 2 */ | |||
} | |||
/* Sections | |||
========================================================================== */ | |||
/** | |||
* Remove the margin in all browsers. | |||
*/ | |||
body { | |||
margin: 0; | |||
} | |||
/** | |||
* Render the `main` element consistently in IE. | |||
*/ | |||
main { | |||
display: block; | |||
} | |||
/** | |||
* Correct the font size and margin on `h1` elements within `section` and | |||
* `article` contexts in Chrome, Firefox, and Safari. | |||
*/ | |||
h1 { | |||
font-size: 2em; | |||
margin: 0.67em 0; | |||
} | |||
/* Grouping content | |||
========================================================================== */ | |||
/** | |||
* 1. Add the correct box sizing in Firefox. | |||
* 2. Show the overflow in Edge and IE. | |||
*/ | |||
hr { | |||
box-sizing: content-box; /* 1 */ | |||
height: 0; /* 1 */ | |||
overflow: visible; /* 2 */ | |||
} | |||
/** | |||
* 1. Correct the inheritance and scaling of font size in all browsers. | |||
* 2. Correct the odd `em` font sizing in all browsers. | |||
*/ | |||
pre { | |||
font-family: monospace, monospace; /* 1 */ | |||
font-size: 1em; /* 2 */ | |||
} | |||
/* Text-level semantics | |||
========================================================================== */ | |||
/** | |||
* Remove the gray background on active links in IE 10. | |||
*/ | |||
a { | |||
background-color: transparent; | |||
} | |||
/** | |||
* 1. Remove the bottom border in Chrome 57- | |||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. | |||
*/ | |||
abbr[title] { | |||
border-bottom: 0; /* 1 */ | |||
text-decoration: underline; /* 2 */ | |||
text-decoration: underline dotted; /* 2 */ | |||
} | |||
/** | |||
* Add the correct font weight in Chrome, Edge, and Safari. | |||
*/ | |||
b, | |||
strong { | |||
font-weight: bolder; | |||
} | |||
/** | |||
* 1. Correct the inheritance and scaling of font size in all browsers. | |||
* 2. Correct the odd `em` font sizing in all browsers. | |||
*/ | |||
code, | |||
kbd, | |||
samp { | |||
font-family: monospace, monospace; /* 1 */ | |||
font-size: 1em; /* 2 */ | |||
} | |||
/** | |||
* Add the correct font size in all browsers. | |||
*/ | |||
small { | |||
font-size: 80%; | |||
} | |||
/** | |||
* Prevent `sub` and `sup` elements from affecting the line height in | |||
* all browsers. | |||
*/ | |||
sub, | |||
sup { | |||
font-size: 75%; | |||
line-height: 0; | |||
position: relative; | |||
vertical-align: baseline; | |||
} | |||
sub { | |||
bottom: -0.25em; | |||
} | |||
sup { | |||
top: -0.5em; | |||
} | |||
/* Embedded content | |||
========================================================================== */ | |||
/** | |||
* Remove the border on images inside links in IE 10. | |||
*/ | |||
img { | |||
border-style: none; | |||
} | |||
/* Forms | |||
========================================================================== */ | |||
/** | |||
* 1. Change the font styles in all browsers. | |||
* 2. Remove the margin in Firefox and Safari. | |||
*/ | |||
button, | |||
input, | |||
optgroup, | |||
select, | |||
textarea { | |||
font-family: inherit; /* 1 */ | |||
font-size: 100%; /* 1 */ | |||
line-height: 1.15; /* 1 */ | |||
margin: 0; /* 2 */ | |||
} | |||
/** | |||
* Show the overflow in IE. | |||
* 1. Show the overflow in Edge. | |||
*/ | |||
button, | |||
input { /* 1 */ | |||
overflow: visible; | |||
} | |||
/** | |||
* Remove the inheritance of text transform in Edge, Firefox, and IE. | |||
* 1. Remove the inheritance of text transform in Firefox. | |||
*/ | |||
button, | |||
select { /* 1 */ | |||
text-transform: none; | |||
} | |||
/** | |||
* Correct the inability to style clickable types in iOS and Safari. | |||
*/ | |||
button, | |||
[type='button'], | |||
[type='reset'], | |||
[type='submit'] { | |||
-webkit-appearance: button; | |||
} | |||
/** | |||
* Remove the inner border and padding in Firefox. | |||
*/ | |||
button::-moz-focus-inner, | |||
[type='button']::-moz-focus-inner, | |||
[type='reset']::-moz-focus-inner, | |||
[type='submit']::-moz-focus-inner { | |||
border-style: none; | |||
padding: 0; | |||
} | |||
/** | |||
* Restore the focus styles unset by the previous rule. | |||
*/ | |||
button:-moz-focusring, | |||
[type='button']:-moz-focusring, | |||
[type='reset']:-moz-focusring, | |||
[type='submit']:-moz-focusring { | |||
outline: 1px dotted ButtonText; | |||
} | |||
/** | |||
* Correct the padding in Firefox. | |||
*/ | |||
fieldset { | |||
padding: 0.35em 0.75em 0.625em; | |||
} | |||
/** | |||
* 1. Correct the text wrapping in Edge and IE. | |||
* 2. Correct the color inheritance from `fieldset` elements in IE. | |||
* 3. Remove the padding so developers are not caught out when they zero out | |||
* `fieldset` elements in all browsers. | |||
*/ | |||
legend { | |||
box-sizing: border-box; /* 1 */ | |||
color: inherit; /* 2 */ | |||
display: table; /* 1 */ | |||
max-width: 100%; /* 1 */ | |||
padding: 0; /* 3 */ | |||
white-space: normal; /* 1 */ | |||
} | |||
/** | |||
* Add the correct vertical alignment in Chrome, Firefox, and Opera. | |||
*/ | |||
progress { | |||
vertical-align: baseline; | |||
} | |||
/** | |||
* Remove the default vertical scrollbar in IE 10+. | |||
*/ | |||
textarea { | |||
overflow: auto; | |||
} | |||
/** | |||
* 1. Add the correct box sizing in IE 10. | |||
* 2. Remove the padding in IE 10. | |||
*/ | |||
[type='checkbox'], | |||
[type='radio'] { | |||
box-sizing: border-box; /* 1 */ | |||
padding: 0; /* 2 */ | |||
} | |||
/** | |||
* Correct the cursor style of increment and decrement buttons in Chrome. | |||
*/ | |||
[type='number']::-webkit-inner-spin-button, | |||
[type='number']::-webkit-outer-spin-button { | |||
height: auto; | |||
} | |||
/** | |||
* 1. Correct the odd appearance in Chrome and Safari. | |||
* 2. Correct the outline style in Safari. | |||
*/ | |||
[type='search'] { | |||
-webkit-appearance: textfield; /* 1 */ | |||
outline-offset: -2px; /* 2 */ | |||
} | |||
/** | |||
* Remove the inner padding in Chrome and Safari on macOS. | |||
*/ | |||
[type='search']::-webkit-search-decoration { | |||
-webkit-appearance: none; | |||
} | |||
/** | |||
* 1. Correct the inability to style clickable types in iOS and Safari. | |||
* 2. Change font properties to `inherit` in Safari. | |||
*/ | |||
::-webkit-file-upload-button { | |||
-webkit-appearance: button; /* 1 */ | |||
font: inherit; /* 2 */ | |||
} | |||
/* Interactive | |||
========================================================================== */ | |||
/* | |||
* Add the correct display in Edge, IE 10+, and Firefox. | |||
*/ | |||
details { | |||
display: block; | |||
} | |||
/* | |||
* Add the correct display in all browsers. | |||
*/ | |||
summary { | |||
display: list-item; | |||
} | |||
/* Misc | |||
========================================================================== */ | |||
/** | |||
* Add the correct display in IE 10+. | |||
*/ | |||
template { | |||
display: none; | |||
} | |||
/** | |||
* Add the correct display in IE 10. | |||
*/ | |||
[hidden] { | |||
display: none; | |||
} |
@ -0,0 +1,23 @@ | |||
.button { | |||
background-color: $button-color; | |||
display: inline-block; | |||
padding: $button-padding; | |||
color: $color-white; | |||
text-decoration: none; | |||
font-size: 14px; | |||
text-transform: uppercase; | |||
&:hover { | |||
text-decoration: none; | |||
} | |||
a { | |||
display: inline-block; | |||
color: $color-white; | |||
text-decoration: none; | |||
&:hover { | |||
text-decoration: none; | |||
} | |||
} | |||
} |
@ -0,0 +1,4 @@ | |||
@import 'visibility'; | |||
@import 'buttons'; | |||
@import 'forms'; | |||
@import 'typography'; |
@ -0,0 +1,19 @@ | |||
form { | |||
label { | |||
display: block; | |||
} | |||
input { | |||
display: inline-block; | |||
margin-bottom: 10px; | |||
padding: 10px; | |||
width: 100%; | |||
&[type='radio'], | |||
&[type='checkbox'], | |||
&[type='reset'], | |||
&[type='submit'] { | |||
width: auto; | |||
} | |||
} | |||
} |
@ -0,0 +1,27 @@ | |||
.text-center { | |||
text-align: center; | |||
} | |||
.text-left { | |||
text-align: left; | |||
} | |||
.text-right { | |||
text-align: right; | |||
} | |||
.text-bold { | |||
font-weight: bold; | |||
} | |||
.text-italic { | |||
font-style: italic; | |||
} | |||
.text-uppercase { | |||
text-transform: uppercase; | |||
} | |||
.white-text { | |||
color: $color-white; | |||
} |
@ -0,0 +1,41 @@ | |||
.lg-desktop-only { | |||
@include breakpoint($jumbo-down) { | |||
display: none !important; // sass-lint:disable-line no-important | |||
} | |||
} | |||
.desktop-only { | |||
@include breakpoint($lg-down) { | |||
display: none !important; // sass-lint:disable-line no-important | |||
} | |||
@include breakpoint($jumbo) { | |||
display: none !important; // sass-lint:disable-line no-important | |||
} | |||
} | |||
.tablet-only { | |||
display: none !important; // sass-lint:disable-line no-important | |||
@include breakpoint($tablet-only) { | |||
display: block !important; // sass-lint:disable-line no-important | |||
} | |||
} | |||
.mobile-only { | |||
@include breakpoint($md) { | |||
display: none !important; // sass-lint:disable-line no-important | |||
} | |||
} | |||
.authenticated-user { | |||
.show-for-anonymous { | |||
display: none; | |||
} | |||
} | |||
.anonymous-user { | |||
.show-for-authenticated { | |||
display: none; | |||
} | |||
} |
@ -0,0 +1,23 @@ | |||
// Utilities | |||
// | |||
// Import variables and mixins | |||
// Should contain NO css output. | |||
// Only variables / mixins / settings. | |||
// ======================================== | |||
@import 'utils/init'; | |||
// Imports Koality Grid | |||
// https://github.com/fabean/flexbox-grid | |||
@import '../../node_modules/koality-flexbox-grid/src/scss/flexbox-grid'; | |||
// Base | |||
// | |||
// Plain html element styling. Shouldn't require | |||
// any classes. | |||
// ======================================== | |||
@import 'base/base'; | |||
@import '../../node_modules/massive-typo/src/scss/typography'; | |||
// Common | |||
@import 'common/common'; |
@ -0,0 +1,13 @@ | |||
//======================================================= | |||
// Utilities: Import Sass mixins, variables, modules etc. | |||
//======================================================= | |||
@import '../../../node_modules/breakpoint-sass/stylesheets/breakpoint'; | |||
// Import variables | |||
@import 'variables'; | |||
// Import Typography | |||
@import 'typography'; | |||
// Import mixins | |||
@import 'mixins'; |
@ -0,0 +1,96 @@ | |||
//======================================================= | |||
// Mixins | |||
//======================================================= | |||
// Clearfix | |||
@mixin clearfix { | |||
&::after { | |||
content: ''; | |||
display: table; | |||
clear: both; | |||
} | |||
} | |||
// Makes an element visually hidden, but accessible. | |||
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility | |||
@mixin element-invisible { | |||
position: absolute !important; | |||
height: 1px; | |||
width: 1px; | |||
overflow: hidden; | |||
clip: rect(1px, 1px, 1px, 1px); | |||
} | |||
// Turns off the element-invisible effect. | |||
@mixin element-invisible-off { | |||
position: static !important; | |||
clip: auto; | |||
height: auto; | |||
width: auto; | |||
overflow: auto; | |||
} | |||
// Makes an element visually hidden by default, but visible when focused. | |||
@mixin element-focusable { | |||
@include element-invisible; | |||
&:active, | |||
&:focus { | |||
@include element-invisible-off; | |||
} | |||
} | |||
// Helper function for working with Sass maps. | |||
// Example: @include print($configuration); | |||
@mixin print($declarations) { | |||
@each $property, $value in $declarations { | |||
#{$property}: $value; | |||
} | |||
} | |||
@mixin ghost-button-mono($inverted: false) { | |||
width: auto; | |||
padding: $button-padding; | |||
text-decoration: none; | |||
transition: all 150ms ease; | |||
cursor: pointer; | |||
@if ($inverted == true) { | |||
border: 2px solid $color-white; | |||
border-radius: 0; | |||
background-color: $color-black; | |||
color: $color-white; | |||
&:hover { | |||
background-color: $color-white; | |||
color: $color-black; | |||
text-decoration: none; | |||
transition: all 150ms ease; | |||
} | |||
} @else { | |||
border: 2px solid $color-black; | |||
border-radius: 0; | |||
background-color: $color-white; | |||
color: $color-black; | |||
&:hover { | |||
background-color: $color-black; | |||
color: $color-white; | |||
text-decoration: none; | |||
transition: all 150ms ease; | |||
} | |||
} | |||
} | |||
%bust-out { | |||
margin: { | |||
left: calc(50% - 50vw); | |||
right: calc(50% - 50vw); | |||
} | |||
transform: translateX(calc(50vw - 50%)); | |||
} | |||
@mixin bust-out($margin-right: null, $margin-left: $margin-right, $aspect-ratio: null) { | |||
@extend %bust-out !optional; | |||
} |
@ -0,0 +1,122 @@ | |||
//======================================================= | |||
// Variables | |||
//======================================================= | |||
//=================== | |||
// Koality Grid variables | |||
// https://github.com/fabean/flexbox-grid | |||
//=================== | |||
$row-width: 1400px; | |||
$inner-row-width: 1200px; | |||
$gutter-width: 15px; | |||
$flex-grid-count: 12; | |||
$flex-grow-default: 0; | |||
$flex-shrink-default: 1; | |||
$default: 0; | |||
$sm: 576px; | |||
$md: 768px; | |||
$lg: 992px; | |||
$xl: 1200px; | |||
$jumbo: 2000px; | |||
$breakpoints: ( | |||
default: $default, | |||
sm: $sm, | |||
md: $md, | |||
lg: $lg, | |||
xl: $xl, | |||
jumbo: $jumbo | |||
); | |||
//=================== | |||
// Extra Breakpoints | |||
//=================== | |||
$sm-only: 0 $sm; | |||
$md-only: $md $lg; | |||
$lg-only: $lg $jumbo; | |||
$md-down: 0 $md; | |||
$xl-down: 0 $xl; | |||
$lg-down: 0 $lg; | |||
$jumbo-down: 0 $jumbo; | |||
$md-portrait: screen 0 $md (orientation landscape); | |||
$lg-portrait: screen (min-width $lg) (orientation landscape); | |||
$tablet-only: screen (min-width $md) (max-width $lg); | |||
//=================== | |||
// Colors | |||
//=================== | |||
$color-white: #FFF; | |||
$color-black: #000; | |||
//=================== | |||
// Buttons | |||
//=================== | |||
$button-padding: 8px 20px; | |||
$button-border-radius: 5px; | |||
$button-color: $color-black; | |||
//=================== | |||
// Typography - Massive Typo Variables | |||
// https://github.com/fabean/massive-typo | |||
//=================== | |||
$body-font-family: sans-serif; | |||
$body-font-size: 16px; | |||
$body-font-color: #0a0a0a; | |||
$body-line-height: 24px; | |||
$body-font-size-small: 0.85rem; | |||
$bold-font-weight: 700; | |||
// Headers | |||
$header-font-breakpoint: $md; | |||
$header-font-family: serif; | |||
$h1-size-small: 24px; | |||
$h1-size-medium: 48px; | |||
$h2-size-small: 20px; | |||
$h2-size-medium: 40px; | |||
$h3-size-small: 19px; | |||
$h3-size-medium: 31px; | |||
$h4-size-small: 18px; | |||
$h4-size-medium: 25px; | |||
$h5-size-small: 17px; | |||
$h5-size-medium: 20px; | |||
$h6-size-small: 16px; | |||
$h6-size-medium: $h6-size-small; | |||
// Code | |||
$code-font-family: monospace; | |||
$code-font-size: 0.9rem; | |||
$code-font-color: #0a0a0a; | |||
$code-background-color: #e6e6e6; | |||
$code-padding: 2px 4px; | |||
$code-border-radius: 4px; | |||
$code-border: 1px solid #cacaca; | |||
// Links | |||
$link-font-color: #337ab7; | |||
$link-font-hover-color: #23527c; | |||
$link-show-underline: false; | |||
$link-show-underline-hover: true; | |||
// Highlight <mark> | |||
$font-highlight-background: #fcf8e3; | |||
$font-highlight-padding: 0.2rem; | |||
// Blockquote | |||
$blockquote-margin: 32px 0; | |||
$blockquote-padding: 8px 16px; | |||
$blockquote-font-size: $body-font-size; | |||
$blockquote-border: 1px solid #DDDDDD; | |||
$blockquote-font-color: #6f6f6f; | |||
$blockquote-cite-font-size: 12px; | |||
$blockquote-cite-font-color: #555555; | |||
//=================== | |||
// Cards | |||
//=================== | |||
$card-shadow: 0 2px 4px rgba(0, 0, 0, 0.33); |
@ -0,0 +1,50 @@ | |||
{# | |||
/** | |||
* @file | |||
* Default theme implementation to display a block. | |||
* | |||
* Available variables: | |||
* - plugin_id: The ID of the block implementation. | |||
* - label: The configured label of the block if visible. | |||
* - configuration: A list of the block's configuration values. | |||
* - label: The configured label for the block. | |||
* - label_display: The display settings for the label. | |||
* - provider: The module or other provider that provided this block plugin. | |||
* - Block plugin specific settings will also be stored here. | |||
* - content: The content of this block. | |||
* - attributes: array of HTML attributes populated by modules, intended to | |||
* be added to the main container tag of this template. | |||
* - id: A valid HTML ID and guaranteed unique. | |||
* - title_attributes: Same as attributes, except applied to the main title | |||
* tag that appears in the template. | |||
* - content_attributes: Same as attributes, except applied to the main content | |||
* tag that appears in the template. | |||
* - title_prefix: Additional output populated by modules, intended to be | |||
* displayed in front of the main title tag that appears in the template. | |||
* - title_suffix: Additional output populated by modules, intended to be | |||
* displayed after the main title tag that appears in the template. | |||
* | |||
* @see template_preprocess_block() | |||
* | |||
* @ingroup themeable | |||
*/ | |||
#} | |||
{% | |||
set classes = [ | |||
'block', | |||
'block-' ~ configuration.provider|clean_class, | |||
'block-' ~ plugin_id|clean_class, | |||
] | |||
%} | |||
<div{{ attributes.addClass(classes) }}> | |||
{{ title_prefix }} | |||
{{ title_suffix }} | |||
{% block content %} | |||
<div{{ content_attributes.addClass('content') }}> | |||
{% include "@vue_js/collapsible/collapsible-vue.twig" with { | |||
"title": label, | |||
"body": content.body, | |||
} %} | |||
</div> | |||
{% endblock %} | |||
</div> |
@ -0,0 +1,50 @@ | |||
{# | |||
/** | |||
* @file | |||
* Default theme implementation to display a block. | |||
* | |||
* Available variables: | |||
* - plugin_id: The ID of the block implementation. | |||
* - label: The configured label of the block if visible. | |||
* - configuration: A list of the block's configuration values. | |||
* - label: The configured label for the block. | |||
* - label_display: The display settings for the label. | |||
* - provider: The module or other provider that provided this block plugin. | |||
* - Block plugin specific settings will also be stored here. | |||
* - content: The content of this block. | |||
* - attributes: array of HTML attributes populated by modules, intended to | |||
* be added to the main container tag of this template. | |||
* - id: A valid HTML ID and guaranteed unique. | |||
* - title_attributes: Same as attributes, except applied to the main title | |||
* tag that appears in the template. | |||
* - content_attributes: Same as attributes, except applied to the main content | |||
* tag that appears in the template. | |||
* - title_prefix: Additional output populated by modules, intended to be | |||
* displayed in front of the main title tag that appears in the template. | |||
* - title_suffix: Additional output populated by modules, intended to be | |||
* displayed after the main title tag that appears in the template. | |||
* | |||
* @see template_preprocess_block() | |||
* | |||
* @ingroup themeable | |||
*/ | |||
#} | |||
{% | |||
set classes = [ | |||
'block', | |||
'block-' ~ configuration.provider|clean_class, | |||
'block-' ~ plugin_id|clean_class, | |||
] | |||
%} | |||
<div{{ attributes.addClass(classes) }}> | |||
{{ title_prefix }} | |||
{{ title_suffix }} | |||
{% block content %} | |||
<div{{ content_attributes.addClass('content') }}> | |||
{% include "@vue_js/collapsible/collapsible.twig" with { | |||
"title": label, | |||
"body": content.body, | |||
} %} | |||
</div> | |||
{% endblock %} | |||
</div> |
@ -0,0 +1,50 @@ | |||
{# | |||
/** | |||
* @file | |||
* Default theme implementation to display a block. | |||
* | |||
* Available variables: | |||
* - plugin_id: The ID of the block implementation. | |||
* - label: The configured label of the block if visible. | |||
* - configuration: A list of the block's configuration values. | |||
* - label: The configured label for the block. | |||
* - label_display: The display settings for the label. | |||
* - provider: The module or other provider that provided this block plugin. | |||
* - Block plugin specific settings will also be stored here. | |||
* - content: The content of this block. | |||
* - attributes: array of HTML attributes populated by modules, intended to | |||
* be added to the main container tag of this template. | |||
* - id: A valid HTML ID and guaranteed unique. | |||
* - title_attributes: Same as attributes, except applied to the main title | |||
* tag that appears in the template. | |||
* - content_attributes: Same as attributes, except applied to the main content | |||
* tag that appears in the template. | |||
* - title_prefix: Additional output populated by modules, intended to be | |||
* displayed in front of the main title tag that appears in the template. | |||
* - title_suffix: Additional output populated by modules, intended to be | |||
* displayed after the main title tag that appears in the template. | |||
* | |||
* @see template_preprocess_block() | |||
* | |||
* @ingroup themeable | |||
*/ | |||
#} | |||
{% | |||
set classes = [ | |||
'block', | |||
'block-' ~ configuration.provider|clean_class, | |||
'block-' ~ plugin_id|clean_class, | |||
] | |||
%} | |||
<div{{ attributes.addClass(classes) }}> | |||
{{ title_prefix }} | |||
{% if label %} | |||
<h2{{ title_attributes }}>{{ label }}</h2> | |||
{% endif %} | |||
{{ title_suffix }} | |||
{% block content %} | |||
<div{{ content_attributes.addClass('content') }}> | |||
{% include "@vue_js/modal/modal-non-vue.twig" %} | |||
</div> | |||
{% endblock %} | |||
</div> |
@ -0,0 +1,50 @@ | |||
{# | |||
/** | |||
* @file | |||
* Default theme implementation to display a block. | |||
* | |||
* Available variables: | |||
* - plugin_id: The ID of the block implementation. | |||
* - label: The configured label of the block if visible. | |||
* - configuration: A list of the block's configuration values. | |||
* - label: The configured label for the block. | |||
* - label_display: The display settings for the label. | |||
* - provider: The module or other provider that provided this block plugin. | |||
* - Block plugin specific settings will also be stored here. | |||
* - content: The content of this block. | |||
* - attributes: array of HTML attributes populated by modules, intended to | |||
* be added to the main container tag of this template. | |||
* - id: A valid HTML ID and guaranteed unique. | |||
* - title_attributes: Same as attributes, except applied to the main title | |||
* tag that appears in the template. | |||
* - content_attributes: Same as attributes, except applied to the main content | |||
* tag that appears in the template. | |||
* - title_prefix: Additional output populated by modules, intended to be | |||
* displayed in front of the main title tag that appears in the template. | |||
* - title_suffix: Additional output populated by modules, intended to be | |||
* displayed after the main title tag that appears in the template. | |||
* | |||
* @see template_preprocess_block() | |||
* | |||
* @ingroup themeable | |||
*/ | |||
#} | |||
{% | |||
set classes = [ | |||
'block', | |||
'block-' ~ configuration.provider|clean_class, | |||
'block-' ~ plugin_id|clean_class, | |||
] | |||
%} | |||
<div{{ attributes.addClass(classes) }}> | |||
{{ title_prefix }} | |||
{% if label %} | |||
<h2{{ title_attributes }}>{{ label }}</h2> | |||
{% endif %} | |||
{{ title_suffix }} | |||
{% block content %} | |||
<div{{ content_attributes.addClass('content') }}> | |||
{% include "@vue_js/modal/modal-vue.twig" %} | |||
</div> | |||
{% endblock %} | |||
</div> |
@ -0,0 +1,36 @@ | |||
name: Vue.js Example | |||
type: theme | |||
description: 'Vue.js example theme' | |||
package: Other | |||
core: 8.x | |||
base theme: bartik | |||
libraries: | |||
- vue_js/global | |||
component-libraries: | |||
vue_js: | |||
paths: | |||
- src/components | |||
- src/templates | |||
regions: | |||
header: Header | |||
primary_menu: 'Primary menu' | |||
secondary_menu: 'Secondary menu' | |||
page_top: 'Page top' | |||
page_bottom: 'Page bottom' | |||
highlighted: Highlighted | |||
featured_top: 'Featured top' | |||
breadcrumb: Breadcrumb | |||
content: Content | |||
sidebar_first: 'Sidebar first' | |||
sidebar_second: 'Sidebar second' | |||
featured_bottom_first: 'Featured bottom first' | |||
featured_bottom_second: 'Featured bottom second' | |||
featured_bottom_third: 'Featured bottom third' | |||
footer_first: 'Footer first' | |||
footer_second: 'Footer second' | |||
footer_third: 'Footer third' | |||
footer_fourth: 'Footer fourth' | |||
footer_fifth: 'Footer fifth' |
@ -0,0 +1,38 @@ | |||
global: | |||
css: | |||
base: | |||
dist/css/global.css: {} | |||
vue-js: | |||
js: | |||
https://cdn.jsdelivr.net/npm/vue/dist/vue.js: { type: external } | |||
modal: | |||
css: | |||
component: | |||
dist/css/modal.css: {} | |||
modal-non-vue: | |||
js: | |||
dist/js/modal-non-vue.js: {} | |||
modal-vue: | |||
js: | |||
dist/js/modal-vue.js: {} | |||
dependencies: | |||
- vue_js/vue-js | |||
collapsible: | |||
css: | |||
component: | |||
dist/css/collapsible.css: {} | |||
collapsible-non-vue: | |||
js: | |||
dist/js/collapsible.js: {} | |||
collapsible-vue: | |||
js: | |||
dist/js/collapsible-vue.js: {} | |||
dependencies: | |||
- vue_js/vue-js |
@ -0,0 +1,197 @@ | |||
<?php | |||
use \Drupal\Component\Utility\Html; | |||
/** | |||
* @file | |||
* Functions to support theming in the vue_js theme. | |||
*/ | |||
/** | |||
* Implements hook_preprocess_HOOK() for html.html.twig. | |||
*/ | |||
function vue_js_preprocess_html(array &$variables) { | |||
/* Add class to html tag */ | |||
//$variables['html_attributes']->addClass('no-js'); | |||
// Don't display the site name twice on the front page (and potentially others) | |||
/*if (isset($variables['head_title_array']['title']) && isset($variables['head_title_array']['name']) && ($variables['head_title_array']['title'] == $variables['head_title_array']['name'])) { | |||
$variables['head_title'] = $variables['head_title_array']['name']; | |||
}*/ | |||
} | |||
/** | |||
* Implements hook_page_attachments_alter(). | |||
*/ | |||
function vue_js_page_attachments_alter(array &$page) { | |||
// Tell IE to use latest rendering engine (not to use compatibility mode). | |||
/*$ie_edge = [ | |||
'#type' => 'html_tag', | |||
'#tag' => 'meta', | |||
'#attributes' => [ | |||
'http-equiv' => 'X-UA-Compatible', | |||
'content' => 'IE=edge', | |||
], | |||
]; | |||
$page['#attached']['html_head'][] = [$ie_edge, 'ie_edge'];*/ | |||
} | |||
/** | |||
* Implements hook_preprocess_page() for page.html.twig. | |||
*/ | |||
function vue_js_preprocess_page(array &$variables) { | |||
$route = \Drupal::routeMatch()->getRouteName(); | |||
if (stripos($route, 'layout_builder.') !== FALSE) { | |||
$variables['#attached']['library'][] = 'vue_js/layout-builder-prettier'; | |||
} else { | |||
// Not a Layout builder route, so let's mark to hide contextual links | |||
$variables['attributes']['class'][] = 'hide-contextual-links'; | |||
} | |||
} | |||
/** | |||
* Implements hook_theme_suggestions_page_alter(). | |||
*/ | |||
function vue_js_theme_suggestions_page_alter(array &$suggestions, array $variables) { | |||
} | |||
/** | |||
* Implements hook_theme_suggestions_node_alter(). | |||
*/ | |||
function vue_js_theme_suggestions_node_alter(array &$suggestions, array $variables) { | |||
/*$node = $variables['elements']['#node']; | |||
if ($variables['elements']['#view_mode'] == "full") { | |||
}*/ | |||
} | |||
/** | |||
* Implements hook_preprocess_HOOK() for Block document templates. | |||
*/ | |||
function vue_js_preprocess_block(array &$variables) { | |||
if (isset($variables['content']['#block_content'])) { | |||
/* @var $block \Drupal\block_content\Entity\BlockContent */ | |||
$block = $variables['content']['#block_content']; | |||
$type = $block->bundle(); | |||
$variables['block'] = $variables['content']['#block_content']; | |||
$function = __FUNCTION__ . "_{$type}"; | |||
if (function_exists($function)) { | |||
$function($variables); | |||
} | |||
} | |||
} | |||
/** | |||
* Implements hook_theme_suggestions_field_alter(). | |||
*/ | |||
function vue_js_theme_suggestions_field_alter(array &$suggestions, array $variables) { | |||
/*$element = $variables['element']; | |||
$suggestions[] = 'field__' . $element['#view_mode']; | |||
$suggestions[] = 'field__' . $element['#view_mode'] . '__' . $element['#field_name'];*/ | |||
} | |||
/** | |||
* Implements hook_theme_suggestions_field_alter(). | |||
*/ | |||
function vue_js_theme_suggestions_fieldset_alter(array &$suggestions, array $variables) { | |||
/*$element = $variables['element']; | |||
if (isset($element['#attributes']['class']) && in_array('form-composite', $element['#attributes']['class'])) { | |||
$suggestions[] = 'fieldset__form_composite'; | |||
}*/ | |||
} | |||
/** | |||
* Implements hook_preprocess_node(). | |||
*/ | |||
function vue_js_preprocess_node(array &$variables) { | |||
/* @var \Drupal\node\Entity\Node $node */ | |||
$node = $variables['node']; | |||
$type = $node->bundle(); | |||
$view_mode = $variables['view_mode'] ?? NULL; | |||
$variables['attributes']['class'][] = 'node'; | |||
$variables['attributes']['class'][] = 'node__' . Html::cleanCssIdentifier($type); | |||
if ($view_mode) { | |||
$variables['attributes']['class'][] = 'node__' . Html::cleanCssIdentifier($type) . '__view_mode_' . Html::cleanCssIdentifier($view_mode); | |||
} | |||
$function = __FUNCTION__ . "_{$type}"; | |||
if (function_exists($function)) { | |||
$function($variables); | |||
} | |||
} | |||
/** | |||
* Implements hook_preprocess_paragraph(). | |||
*/ | |||
function vue_js_preprocess_paragraph(array &$variables) { | |||
/* @var \Drupal\paragraphs\Entity\ParagraphsType $paragraph_type */ | |||
$paragraph_type = $variables['elements']['#paragraph']->getParagraphType(); | |||
$function = __FUNCTION__ . "_{$paragraph_type->id()}"; | |||
if (function_exists($function)) { | |||
$function($variables); | |||
} | |||
} | |||
function nazarene_org_preprocess_media(array &$variables) { | |||
$bundle = $variables['media']->bundle(); | |||
$function = __FUNCTION__ . "_{$bundle}"; | |||
if (function_exists($function)) { | |||
$function($variables); | |||
} | |||
} | |||
/** | |||
* Implements hook_theme_suggestions_views_view_alter(). | |||
*/ | |||
function vue_js_theme_suggestions_views_view_alter(array &$suggestions, array $variables) { | |||
} | |||
/** | |||
* Implements hook_preprocess_form(). | |||
*/ | |||
function vue_js_preprocess_form(array &$variables) { | |||
//$variables['attributes']['novalidate'] = 'novalidate'; | |||
} | |||
/** | |||
* Implements hook_preprocess_select(). | |||
*/ | |||
function vue_js_preprocess_select(array &$variables) { | |||
//$variables['attributes']['class'][] = 'select-chosen'; | |||
} | |||
/** | |||
* Implements hook_preprocess_field(). | |||
*/ | |||
function vue_js_preprocess_field(array &$variables, $hook) { | |||
/*switch ($variables['element']['#field_name']) { | |||
}*/ | |||
} | |||
/** | |||
* Implements hook_preprocess_details(). | |||
*/ | |||
function vue_js_preprocess_details(array &$variables) { | |||
/*$variables['attributes']['class'][] = 'details'; | |||
$variables['summary_attributes']['class'] = 'summary';*/ | |||
} | |||
/** | |||
* Implements hook_theme_suggestions_details_alter(). | |||
*/ | |||
function vue_js_theme_suggestions_details_alter(array &$suggestions, array $variables) { | |||
} | |||
/** | |||
* Implements hook_preprocess_menu_local_task(). | |||
*/ | |||
function vue_js_preprocess_menu_local_task(array &$variables) { | |||
//$variables['element']['#link']['url']->setOption('attributes', ['class'=>'rounded']); | |||
} |
@ -0,0 +1,24 @@ | |||
# Deny all requests from Apache 2.4+. | |||
<IfModule mod_authz_core.c> | |||
Require all denied | |||
</IfModule> | |||
# Deny all requests from Apache 2.0-2.2. | |||
<IfModule !mod_authz_core.c> | |||
Deny from all | |||
</IfModule> | |||
# Turn off all options we don't need. | |||
Options -Indexes -ExecCGI -Includes -MultiViews | |||
# Set the catch-all handler to prevent scripts from being executed. | |||
SetHandler Drupal_Security_Do_Not_Remove_See_SA_2006_006 | |||
<Files *> | |||
# Override the handler again if we're run later in the evaluation list. | |||
SetHandler Drupal_Security_Do_Not_Remove_See_SA_2013_003 | |||
</Files> | |||
# If we know how to do it safely, disable the PHP engine entirely. | |||
<IfModule mod_php5.c> | |||
php_flag engine off | |||
</IfModule> |
@ -1,60 +0,0 @@ | |||
<?php | |||
$settings['update_free_access'] = FALSE; | |||
$settings['file_private_path'] = '../private'; | |||
$settings['container_yamls'][] = $app_root . '/' . $site_path . '/services.yml'; | |||
$settings['file_scan_ignore_directories'] = [ | |||
'node_modules', | |||
'bower_components', | |||
]; | |||
$settings['entity_update_batch_size'] = 50; | |||
$settings['hash_salt'] = 'asotenuarchqewsmaoeuSNTH56654+'; | |||
$settings['trusted_host_patterns'] = [ | |||
getenv('DRUPAL_TRUSTED_HOSTS'), | |||
'nazarene-org\.docksal$', | |||
]; | |||
$databases = []; | |||
$databases['default']['default'] = [ | |||
'database' => getenv('DATABASE_NAME'), | |||
'username' => getenv('DATABASE_USERNAME'), | |||
'password' => getenv('DATABASE_PASSWORD'), | |||
'prefix' => '', | |||
'host' => getenv('DATABASE_HOST'), | |||
'port' => '3306', | |||
'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql', | |||
'driver' => 'mysql', | |||
]; | |||
$config_directories = []; | |||
$config_directories[CONFIG_SYNC_DIRECTORY] = '../config/default/default'; | |||
$site_environment = getenv('SITE_ENV'); | |||
$config['config_split.config_split.local']['status'] = FALSE; | |||
$config['config_split.config_split.dev']['status'] = FALSE; | |||
$config['config_split.config_split.stage']['status'] = FALSE; | |||
$config['config_split.config_split.prod']['status'] = FALSE; | |||
switch ($site_environment) { | |||
case 'local': | |||
$config['config_split.config_split.local']['status'] = TRUE; | |||
break; | |||
case 'dev': | |||
$config['config_split.config_split.dev']['status'] = TRUE; | |||
break; | |||
case 'stage': | |||
$config['config_split.config_split.stage']['status'] = TRUE; | |||
break; | |||
case 'prod': | |||
$config['config_split.config_split.prod']['status'] = TRUE; | |||
break; | |||
} | |||
/** | |||
* Include a custom settings file if it exists. | |||
*/ | |||
$custom_settings = DRUPAL_ROOT . '/sites/default/custom.settings.php'; | |||
if (file_exists($custom_settings)) { | |||
include $custom_settings; | |||
} | |||