From 16b42cc3b48907fb0c803f256b549c034ca90d96 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Thu, 14 Oct 2021 16:33:03 +0300 Subject: [PATCH 1/8] Run bootstrap --- DEVELOP.md | 12 +-- DEVELOP.md.tpl | 51 ------------ Jenkinsfile | 2 +- Jenkinsfile.tpl | 209 ----------------------------------------------- Makefile | 2 +- Makefile.tpl | 49 ----------- README.md | 24 +++--- README.md.tpl | 86 ------------------- package.json | 8 +- package.json.tpl | 44 ---------- 10 files changed, 24 insertions(+), 463 deletions(-) delete mode 100644 DEVELOP.md.tpl delete mode 100644 Jenkinsfile.tpl delete mode 100644 Makefile.tpl delete mode 100644 README.md.tpl delete mode 100644 package.json.tpl diff --git a/DEVELOP.md b/DEVELOP.md index 9c01eb6..19904d1 100644 --- a/DEVELOP.md +++ b/DEVELOP.md @@ -1,4 +1,4 @@ -# volto-addon-template +# volto-industry-theme ## Develop @@ -10,15 +10,15 @@ Before starting make sure your development environment is properly set. See [Vol 1. Create new volto app - yo @plone/volto my-volto-project --addon @eeacms/volto-addon-template --skip-install + yo @plone/volto my-volto-project --addon @eeacms/volto-industry-theme --skip-install cd my-volto-project 1. Add the following to `mrs.developer.json`: { - "volto-addon-template": { - "url": "https://github.com/eea/volto-addon-template.git", - "package": "@eeacms/volto-addon-template", + "volto-industry-theme": { + "url": "https://github.com/eea/volto-industry-theme.git", + "package": "@eeacms/volto-industry-theme", "branch": "develop", "path": "src" } @@ -48,4 +48,4 @@ Before starting make sure your development environment is properly set. See [Vol 1. Happy hacking! - cd src/addons/volto-addon-template/ + cd src/addons/volto-industry-theme/ diff --git a/DEVELOP.md.tpl b/DEVELOP.md.tpl deleted file mode 100644 index cf7da06..0000000 --- a/DEVELOP.md.tpl +++ /dev/null @@ -1,51 +0,0 @@ -# <%= name %> - -## Develop - -Before starting make sure your development environment is properly set. See [Volto Developer Documentation](https://docs.voltocms.com/getting-started/install/) - -1. Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer` - - npm install -g yo @plone/generator-volto mrs-developer - -1. Create new volto app - - yo @plone/volto my-volto-project --addon <%= addonName %> --skip-install - cd my-volto-project - -1. Add the following to `mrs.developer.json`: - - { - "<%= name %>": { - "url": "https://github.com/eea/<%= name %>.git", - "package": "<%= addonName %>", - "branch": "develop", - "path": "src" - } - } - -1. Install - - yarn develop - yarn - -1. Start backend - - docker pull plone - docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES="profile-plone.restapi:blocks" plone - - ...wait for backend to setup and start - `Ready to handle requests`: - - docker logs -f plone - - ...you can also check http://localhost:8080/Plone - -1. Start frontend - - yarn start - -1. Go to http://localhost:3000 - -1. Happy hacking! - - cd src/addons/<%= name %>/ diff --git a/Jenkinsfile b/Jenkinsfile index fdda77a..71591b7 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -2,7 +2,7 @@ pipeline { agent any environment { - GIT_NAME = "volto-addon-template" + GIT_NAME = "volto-industry-theme" NAMESPACE = "@eeacms" SONARQUBE_TAGS = "volto.eea.europa.eu" DEPENDENCIES = "" diff --git a/Jenkinsfile.tpl b/Jenkinsfile.tpl deleted file mode 100644 index c6d1bcb..0000000 --- a/Jenkinsfile.tpl +++ /dev/null @@ -1,209 +0,0 @@ -pipeline { - agent any - - environment { - GIT_NAME = "<%= name %>" - NAMESPACE = "@eeacms" - SONARQUBE_TAGS = "volto.eea.europa.eu" - DEPENDENCIES = "" - } - - stages { - - stage('Code') { - steps { - parallel( - - "ES lint": { - node(label: 'docker') { - sh '''docker run -i --rm --name="$BUILD_TAG-eslint" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci eslint''' - } - }, - - "Style lint": { - node(label: 'docker') { - sh '''docker run -i --rm --name="$BUILD_TAG-stylelint" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci stylelint''' - } - }, - - "Prettier": { - node(label: 'docker') { - sh '''docker run -i --rm --name="$BUILD_TAG-prettier" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci prettier''' - } - } - ) - } - } - - stage('Tests') { - steps { - parallel( - - "Volto": { - node(label: 'docker') { - script { - try { - sh '''docker pull plone/volto-addon-ci''' - sh '''docker run -i --name="$BUILD_TAG-volto" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci''' - sh '''rm -rf xunit-reports''' - sh '''mkdir -p xunit-reports''' - sh '''docker cp $BUILD_TAG-volto:/opt/frontend/my-volto-project/coverage xunit-reports/''' - sh '''docker cp $BUILD_TAG-volto:/opt/frontend/my-volto-project/junit.xml xunit-reports/''' - sh '''docker cp $BUILD_TAG-volto:/opt/frontend/my-volto-project/unit_tests_log.txt xunit-reports/''' - stash name: "xunit-reports", includes: "xunit-reports/**" - archiveArtifacts artifacts: "xunit-reports/unit_tests_log.txt", fingerprint: true - publishHTML (target : [ - allowMissing: false, - alwaysLinkToLastBuild: true, - keepAll: true, - reportDir: 'xunit-reports/coverage/lcov-report', - reportFiles: 'index.html', - reportName: 'UTCoverage', - reportTitles: 'Unit Tests Code Coverage' - ]) - } finally { - catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') { - junit testResults: 'xunit-reports/junit.xml', allowEmptyResults: true - } - sh script: '''docker rm -v $BUILD_TAG-volto''', returnStatus: true - } - } - } - } - ) - } - } - - stage('Integration tests') { - steps { - parallel( - - "Cypress": { - node(label: 'docker') { - script { - try { - sh '''docker pull plone; docker run -d --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg''' - sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" plone/volto-addon-ci cypress''' - } finally { - try { - sh '''rm -rf cypress-reports cypress-results cypress-coverage''' - sh '''mkdir -p cypress-reports cypress-results cypress-coverage''' - sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/cypress/videos cypress-reports/''' - sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/cypress/reports cypress-results/''' - coverage = sh script: '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/coverage cypress-coverage/''', returnStatus: true - if ( coverage == 0 ) { - publishHTML (target : [allowMissing: false, - alwaysLinkToLastBuild: true, - keepAll: true, - reportDir: 'cypress-coverage/coverage/lcov-report', - reportFiles: 'index.html', - reportName: 'CypressCoverage', - reportTitles: 'Integration Tests Code Coverage']) - } - archiveArtifacts artifacts: 'cypress-reports/videos/*.mp4', fingerprint: true - stash name: "cypress-coverage", includes: "cypress-coverage/**", allowEmpty: true - } - finally { - catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') { - junit testResults: 'cypress-results/**/*.xml', allowEmptyResults: true - } - sh script: "docker stop $BUILD_TAG-plone", returnStatus: true - sh script: "docker rm -v $BUILD_TAG-plone", returnStatus: true - sh script: "docker rm -v $BUILD_TAG-cypress", returnStatus: true - - } - } - } - } - } - - ) - } - } - - stage('Report to SonarQube') { - // Exclude Pull-Requests - when { - allOf { - environment name: 'CHANGE_ID', value: '' - } - } - steps { - node(label: 'swarm') { - script{ - checkout scm - unstash "xunit-reports" - unstash "cypress-coverage" - def scannerHome = tool 'SonarQubeScanner'; - def nodeJS = tool 'NodeJS11'; - withSonarQubeEnv('Sonarqube') { - sh '''sed -i "s#/opt/frontend/my-volto-project/src/addons/${GIT_NAME}/##g" xunit-reports/coverage/lcov.info''' - sh "export PATH=$PATH:${scannerHome}/bin:${nodeJS}/bin; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER" - sh '''try=2; while [ \$try -gt 0 ]; do curl -s -XPOST -u "${SONAR_AUTH_TOKEN}:" "${SONAR_HOST_URL}api/project_tags/set?project=${GIT_NAME}-${BRANCH_NAME}&tags=${SONARQUBE_TAGS},${BRANCH_NAME}" > set_tags_result; if [ \$(grep -ic error set_tags_result ) -eq 0 ]; then try=0; else cat set_tags_result; echo "... Will retry"; sleep 60; try=\$(( \$try - 1 )); fi; done''' - } - } - } - } - } - - stage('Pull Request') { - when { - not { - environment name: 'CHANGE_ID', value: '' - } - environment name: 'CHANGE_TARGET', value: 'master' - } - steps { - node(label: 'docker') { - script { - if ( env.CHANGE_BRANCH != "develop" && !( env.CHANGE_BRANCH.startsWith("hotfix")) ) { - error "Pipeline aborted due to PR not made from develop or hotfix branch" - } - withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN')]) { - sh '''docker pull eeacms/gitflow''' - sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-pr" -e GIT_CHANGE_TARGET="$CHANGE_TARGET" -e GIT_CHANGE_BRANCH="$CHANGE_BRANCH" -e GIT_CHANGE_AUTHOR="$CHANGE_AUTHOR" -e GIT_CHANGE_TITLE="$CHANGE_TITLE" -e GIT_TOKEN="$GITHUB_TOKEN" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e GIT_ORG="$GIT_ORG" -e GIT_NAME="$GIT_NAME" -e LANGUAGE=javascript eeacms/gitflow''' - } - } - } - } - } - - stage('Release') { - when { - allOf { - environment name: 'CHANGE_ID', value: '' - branch 'master' - } - } - steps { - node(label: 'docker') { - withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN'),string(credentialsId: 'eea-jenkins-npm-token', variable: 'NPM_TOKEN')]) { - sh '''docker pull eeacms/gitflow''' - sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-master" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" -e GIT_TOKEN="$GITHUB_TOKEN" -e NPM_TOKEN="$NPM_TOKEN" -e LANGUAGE=javascript eeacms/gitflow''' - } - } - } - } - - } - - post { - always { - cleanWs(cleanWhenAborted: true, cleanWhenFailure: true, cleanWhenNotBuilt: true, cleanWhenSuccess: true, cleanWhenUnstable: true, deleteDirs: true) - } - changed { - script { - def details = """

${env.JOB_NAME} - Build #${env.BUILD_NUMBER} - ${currentBuild.currentResult}

-

Check console output at ${env.JOB_BASE_NAME} - #${env.BUILD_NUMBER}

- """ - emailext( - subject: '$DEFAULT_SUBJECT', - body: details, - attachLog: true, - compressLog: true, - recipientProviders: [[$class: 'DevelopersRecipientProvider'], [$class: 'CulpritsRecipientProvider']] - ) - } - } - } -} diff --git a/Makefile b/Makefile index add0ada..44057ec 100644 --- a/Makefile +++ b/Makefile @@ -1,7 +1,7 @@ SHELL=/bin/bash DIR=$(shell basename $$(pwd)) -ADDON ?= "@eeacms/volto-addon-template" +ADDON ?= "@eeacms/volto-industry-theme" # We like colors # From: https://coderwall.com/p/izxssa/colored-makefile-for-golang-projects diff --git a/Makefile.tpl b/Makefile.tpl deleted file mode 100644 index 2040f7a..0000000 --- a/Makefile.tpl +++ /dev/null @@ -1,49 +0,0 @@ -SHELL=/bin/bash - -DIR=$(shell basename $$(pwd)) -ADDON ?= "<%= addonName %>" - -# We like colors -# From: https://coderwall.com/p/izxssa/colored-makefile-for-golang-projects -RED=`tput setaf 1` -GREEN=`tput setaf 2` -RESET=`tput sgr0` -YELLOW=`tput setaf 3` - -project: - npm install -g yo - npm install -g @plone/generator-volto - npm install -g mrs-developer - yo @plone/volto project --addon ${ADDON} --workspace "src/addons/${DIR}" --no-interactive - ln -sf $$(pwd) project/src/addons/ - cp .project.eslintrc.js .eslintrc.js - cd project && yarn - @echo "-------------------" - @echo "$(GREEN)Volto project is ready!$(RESET)" - @echo "$(RED)Now run: cd project && yarn start$(RESET)" - -all: project - -.PHONY: start-test-backend -start-test-backend: ## Start Test Plone Backend - @echo "$(GREEN)==> Start Test Plone Backend$(RESET)" - docker run -i --rm -e ZSERVER_HOST=0.0.0.0 -e ZSERVER_PORT=55001 -p 55001:55001 -e SITE=plone -e APPLY_PROFILES=plone.app.contenttypes:plone-content,plone.restapi:default,kitconcept.volto:default-homepage -e CONFIGURE_PACKAGES=plone.app.contenttypes,plone.restapi,kitconcept.volto,kitconcept.volto.cors -e ADDONS='plone.app.robotframework plone.app.contenttypes plone.restapi kitconcept.volto' plone ./bin/robot-server plone.app.robotframework.testing.PLONE_ROBOT_TESTING - -.PHONY: start-backend-docker -start-backend-docker: ## Starts a Docker-based backend - @echo "$(GREEN)==> Start Docker-based Plone Backend$(RESET)" - docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e ADDONS="kitconcept.volto" -e ZCML="kitconcept.volto.cors" plone - -.PHONY: test -test: - docker pull plone/volto-addon-ci - docker run -it --rm -e NAMESPACE="@eeacms" -e GIT_NAME="${DIR}" -e RAZZLE_JEST_CONFIG=jest-addon.config.js -v "$$(pwd):/opt/frontend/my-volto-project/src/addons/${DIR}" plone/volto-addon-ci yarn test --watchAll=false - -.PHONY: test-update -test-update: - docker pull plone/volto-addon-ci - docker run -it --rm -e NAMESPACE="@eeacms" -e GIT_NAME="${DIR}" -e RAZZLE_JEST_CONFIG=jest-addon.config.js -v "$$(pwd):/opt/frontend/my-volto-project/src/addons/${DIR}" plone/volto-addon-ci yarn test --watchAll=false -u - -.PHONY: help -help: ## Show this help. - @echo -e "$$(grep -hE '^\S+:.*##' $(MAKEFILE_LIST) | sed -e 's/:.*##\s*/:/' -e 's/^\(.\+\):\(.*\)/\\x1b[36m\1\\x1b[m:\2/' | column -c2 -t -s :)" diff --git a/README.md b/README.md index 80ce56e..d652044 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ -# volto-addon-template -[![Releases](https://img.shields.io/github/v/release/eea/volto-addon-template)](https://github.com/eea/volto-addon-template/releases) -[![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-addon-template%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-addon-template/job/master/display/redirect) -[![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-addon-template%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-addon-template/job/develop/display/redirect) +# volto-industry-theme +[![Releases](https://img.shields.io/github/v/release/eea/volto-industry-theme)](https://github.com/eea/volto-industry-theme/releases) +[![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-industry-theme%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-industry-theme/job/master/display/redirect) +[![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-industry-theme%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-industry-theme/job/develop/display/redirect) [Volto](https://github.com/plone/volto) add-on @@ -11,7 +11,7 @@ Demo GIF ## Getting started -### Try volto-addon-template with Docker +### Try volto-industry-theme with Docker 1. Get the latest Docker images @@ -28,12 +28,12 @@ Demo GIF 1. Start Volto frontend ``` - docker run -it --rm -p 3000:3000 --link plone -e ADDONS="@eeacms/volto-addon-template" plone/volto + docker run -it --rm -p 3000:3000 --link plone -e ADDONS="@eeacms/volto-industry-theme" plone/volto ``` 1. Go to http://localhost:3000 -### Add volto-addon-template to your Volto project +### Add volto-industry-theme to your Volto project 1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone @@ -43,11 +43,11 @@ Demo GIF ```JSON "addons": [ - "@eeacms/volto-addon-template" + "@eeacms/volto-industry-theme" ], "dependencies": { - "@eeacms/volto-addon-template": "^1.0.0" + "@eeacms/volto-industry-theme": "^1.0.0" } ``` @@ -55,7 +55,7 @@ Demo GIF ``` npm install -g yo @plone/generator-volto - yo @plone/volto my-volto-project --addon @eeacms/volto-addon-template + yo @plone/volto my-volto-project --addon @eeacms/volto-industry-theme cd my-volto-project ``` @@ -72,14 +72,14 @@ Demo GIF ## How to contribute -See [DEVELOP.md](https://github.com/eea/volto-addon-template/blob/master/DEVELOP.md). +See [DEVELOP.md](https://github.com/eea/volto-industry-theme/blob/master/DEVELOP.md). ## Copyright and license The Initial Owner of the Original Code is European Environment Agency (EEA). All Rights Reserved. -See [LICENSE.md](https://github.com/eea/volto-addon-template/blob/master/LICENSE.md) for details. +See [LICENSE.md](https://github.com/eea/volto-industry-theme/blob/master/LICENSE.md) for details. ## Funding diff --git a/README.md.tpl b/README.md.tpl deleted file mode 100644 index b914d15..0000000 --- a/README.md.tpl +++ /dev/null @@ -1,86 +0,0 @@ -# <%= name %> -[![Releases](https://img.shields.io/github/v/release/eea/<%= name %>)](https://github.com/eea/<%= name %>/releases) -[![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2F<%= name %>%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/<%= name %>/job/master/display/redirect) -[![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2F<%= name %>%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/<%= name %>/job/develop/display/redirect) - -[Volto](https://github.com/plone/volto) add-on - -## Features - -Demo GIF - -## Getting started - -### Try <%= name %> with Docker - -1. Get the latest Docker images - - ``` - docker pull plone - docker pull plone/volto - ``` - -1. Start Plone backend - ``` - docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES="profile-plone.restapi:blocks" plone - ``` - -1. Start Volto frontend - - ``` - docker run -it --rm -p 3000:3000 --link plone -e ADDONS="<%= addonName %>" plone/volto - ``` - -1. Go to http://localhost:3000 - -### Add <%= name %> to your Volto project - -1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone - -1. Start Volto frontend - -* If you already have a volto project, just update `package.json`: - - ```JSON - "addons": [ - "<%= addonName %>" - ], - - "dependencies": { - "<%= addonName %>": "^1.0.0" - } - ``` - -* If not, create one: - - ``` - npm install -g yo @plone/generator-volto - yo @plone/volto my-volto-project --addon <%= addonName %> - cd my-volto-project - ``` - -1. Install new add-ons and restart Volto: - - ``` - yarn - yarn start - ``` - -1. Go to http://localhost:3000 - -1. Happy editing! - -## How to contribute - -See [DEVELOP.md](https://github.com/eea/<%= name %>/blob/master/DEVELOP.md). - -## Copyright and license - -The Initial Owner of the Original Code is European Environment Agency (EEA). -All Rights Reserved. - -See [LICENSE.md](https://github.com/eea/<%= name %>/blob/master/LICENSE.md) for details. - -## Funding - -[European Environment Agency (EU)](http://eea.europa.eu) diff --git a/package.json b/package.json index cfe4515..84a3a6b 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { - "name": "@eeacms/volto-addon-template", + "name": "@eeacms/volto-industry-theme", "version": "0.1.0", - "description": "@eeacms/volto-addon-template: Volto add-on", + "description": "@eeacms/volto-industry-theme: Volto add-on", "main": "src/index.js", "author": "European Environment Agency: IDM2 A-Team", "license": "MIT", - "homepage": "https://github.com/eea/volto-addon-template", + "homepage": "https://github.com/eea/volto-industry-theme", "keywords": [ "volto-addon", "volto", @@ -14,7 +14,7 @@ ], "repository": { "type": "git", - "url": "git@github.com:eea/volto-addon-template.git" + "url": "git@github.com:eea/volto-industry-theme.git" }, "dependencies": { "@cypress/code-coverage": "^3.9.5", diff --git a/package.json.tpl b/package.json.tpl deleted file mode 100644 index 9625c37..0000000 --- a/package.json.tpl +++ /dev/null @@ -1,44 +0,0 @@ -{ - "name": "<%= addonName %>", - "version": "0.1.0", - "description": "<%= addonName %>: Volto add-on", - "main": "src/index.js", - "author": "European Environment Agency: IDM2 A-Team", - "license": "MIT", - "homepage": "https://github.com/eea/<%= name %>", - "keywords": [ - "volto-addon", - "volto", - "plone", - "react" - ], - "repository": { - "type": "git", - "url": "git@github.com:eea/<%= name %>.git" - }, - "dependencies": { - "@cypress/code-coverage": "^3.9.5", - "babel-plugin-transform-class-properties": "^6.24.1" - }, - "devDependencies": { - "@cypress/code-coverage": "^3.9.5", - "babel-plugin-transform-class-properties": "^6.24.1" - }, - "scripts": { - "release": "release-it", - "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap", - "test": "make test", - "test:fix": "make test-update", - "pre-commit": "yarn stylelint:fix && yarn prettier:fix && yarn lint:fix", - "stylelint": "if [ -d ./project ]; then ./project/node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'; else ../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'; fi", - "stylelint:overrides": "if [ -d ./project ]; then ./project/node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'; else ../../../node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'; fi", - "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix", - "prettier": "if [ -d ./project ]; then ./project/node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'; else ../../../node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'; fi", - "prettier:fix": "if [ -d ./project ]; then ./project/node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'; else ../../../node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'; fi", - "lint": "if [ -d ./project ]; then ./project/node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'; else ../../../node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'; fi", - "lint:fix": "if [ -d ./project ]; then ./project/node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'; else ../../../node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'; fi", - "i18n": "mv .i18n.babel.config.js babel.config.js; rm -rf build/messages && NODE_ENV=production node src/i18n.js; mv babel.config.js .i18n.babel.config.js", - "cypress:run": "if [ -d ./project ]; then ./project/node_modules/cypress/bin/cypress run; else ../../../node_modules/cypress/bin/cypress run; fi", - "cypress:open": "if [ -d ./project ]; then ./project/node_modules/cypress/bin/cypress open; else ../../../node_modules/cypress/bin/cypress open; fi" - } -} From c31ef7e694b310508bace3b43a6ea2db142b7a54 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Thu, 14 Oct 2021 17:38:29 +0300 Subject: [PATCH 2/8] Theme override --- razzle.extend.js | 15 + .../site/collections/breadcrumb.overrides | 3 + .../site/collections/breadcrumb.variables | 33 + src/theme/site/collections/form.overrides | 3 + src/theme/site/collections/form.variables | 195 ++ src/theme/site/collections/grid.overrides | 4 + src/theme/site/collections/grid.variables | 103 + src/theme/site/collections/menu.overrides | 3 + src/theme/site/collections/menu.variables | 458 +++++ src/theme/site/collections/message.overrides | 3 + src/theme/site/collections/message.variables | 158 ++ src/theme/site/collections/table.overrides | 0 src/theme/site/collections/table.variables | 247 +++ src/theme/site/elements/button.overrides | 3 + src/theme/site/elements/button.variables | 360 ++++ src/theme/site/elements/container.overrides | 3 + src/theme/site/elements/container.variables | 58 + src/theme/site/elements/divider.overrides | 18 + src/theme/site/elements/divider.variables | 53 + src/theme/site/elements/flag.overrides | 991 ++++++++++ src/theme/site/elements/flag.variables | 13 + src/theme/site/elements/header.overrides | 4 + src/theme/site/elements/header.variables | 151 ++ src/theme/site/elements/icon.overrides | 1716 +++++++++++++++++ src/theme/site/elements/icon.variables | 94 + src/theme/site/elements/image.overrides | 3 + src/theme/site/elements/image.variables | 44 + src/theme/site/elements/input.overrides | 3 + src/theme/site/elements/input.variables | 101 + src/theme/site/elements/label.overrides | 3 + src/theme/site/elements/label.variables | 254 +++ src/theme/site/elements/list.overrides | 3 + src/theme/site/elements/list.variables | 224 +++ src/theme/site/elements/loader.overrides | 3 + src/theme/site/elements/loader.variables | 73 + src/theme/site/elements/placeholder.overrides | 3 + src/theme/site/elements/placeholder.variables | 55 + src/theme/site/elements/rail.overrides | 3 + src/theme/site/elements/rail.variables | 34 + src/theme/site/elements/reveal.overrides | 3 + src/theme/site/elements/reveal.variables | 18 + src/theme/site/elements/segment.overrides | 3 + src/theme/site/elements/segment.variables | 154 ++ src/theme/site/elements/step.overrides | 16 + src/theme/site/elements/step.variables | 130 ++ src/theme/site/extras/custom.overrides | 0 src/theme/site/extras/custom.variables | 0 src/theme/site/extras/main.overrides | 0 src/theme/site/extras/main.variables | 0 src/theme/site/globals/reset.overrides | 447 +++++ src/theme/site/globals/reset.variables | 3 + src/theme/site/globals/site.overrides | 3 + src/theme/site/globals/site.variables | 973 ++++++++++ src/theme/site/modules/accordion.overrides | 28 + src/theme/site/modules/accordion.variables | 100 + src/theme/site/modules/chatroom.overrides | 3 + src/theme/site/modules/chatroom.variables | 3 + src/theme/site/modules/checkbox.overrides | 36 + src/theme/site/modules/checkbox.variables | 193 ++ src/theme/site/modules/dimmer.overrides | 3 + src/theme/site/modules/dimmer.variables | 58 + src/theme/site/modules/dropdown.overrides | 59 + src/theme/site/modules/dropdown.variables | 379 ++++ src/theme/site/modules/embed.overrides | 3 + src/theme/site/modules/embed.variables | 53 + src/theme/site/modules/modal.overrides | 3 + src/theme/site/modules/modal.variables | 192 ++ src/theme/site/modules/nag.overrides | 3 + src/theme/site/modules/nag.variables | 74 + src/theme/site/modules/popup.overrides | 3 + src/theme/site/modules/popup.variables | 138 ++ src/theme/site/modules/progress.overrides | 3 + src/theme/site/modules/progress.variables | 113 ++ src/theme/site/modules/rating.overrides | 68 + src/theme/site/modules/rating.variables | 103 + src/theme/site/modules/search.overrides | 3 + src/theme/site/modules/search.variables | 161 ++ src/theme/site/modules/shape.overrides | 3 + src/theme/site/modules/shape.variables | 40 + src/theme/site/modules/sidebar.overrides | 3 + src/theme/site/modules/sidebar.variables | 45 + src/theme/site/modules/sticky.overrides | 3 + src/theme/site/modules/sticky.variables | 7 + src/theme/site/modules/tab.overrides | 3 + src/theme/site/modules/tab.variables | 11 + src/theme/site/modules/transition.overrides | 962 +++++++++ src/theme/site/modules/transition.variables | 10 + src/theme/site/modules/video.overrides | 3 + src/theme/site/modules/video.variables | 16 + src/theme/site/views/ad.overrides | 3 + src/theme/site/views/ad.variables | 13 + src/theme/site/views/card.overrides | 3 + src/theme/site/views/card.variables | 220 +++ src/theme/site/views/comment.overrides | 3 + src/theme/site/views/comment.variables | 98 + src/theme/site/views/feed.overrides | 3 + src/theme/site/views/feed.variables | 141 ++ src/theme/site/views/item.overrides | 3 + src/theme/site/views/item.variables | 157 ++ src/theme/site/views/statistic.overrides | 3 + src/theme/site/views/statistic.variables | 99 + src/theme/theme.config | 89 + 102 files changed, 10968 insertions(+) create mode 100644 razzle.extend.js create mode 100644 src/theme/site/collections/breadcrumb.overrides create mode 100644 src/theme/site/collections/breadcrumb.variables create mode 100644 src/theme/site/collections/form.overrides create mode 100644 src/theme/site/collections/form.variables create mode 100644 src/theme/site/collections/grid.overrides create mode 100644 src/theme/site/collections/grid.variables create mode 100644 src/theme/site/collections/menu.overrides create mode 100644 src/theme/site/collections/menu.variables create mode 100644 src/theme/site/collections/message.overrides create mode 100644 src/theme/site/collections/message.variables create mode 100644 src/theme/site/collections/table.overrides create mode 100644 src/theme/site/collections/table.variables create mode 100644 src/theme/site/elements/button.overrides create mode 100644 src/theme/site/elements/button.variables create mode 100644 src/theme/site/elements/container.overrides create mode 100644 src/theme/site/elements/container.variables create mode 100644 src/theme/site/elements/divider.overrides create mode 100644 src/theme/site/elements/divider.variables create mode 100644 src/theme/site/elements/flag.overrides create mode 100644 src/theme/site/elements/flag.variables create mode 100644 src/theme/site/elements/header.overrides create mode 100644 src/theme/site/elements/header.variables create mode 100644 src/theme/site/elements/icon.overrides create mode 100644 src/theme/site/elements/icon.variables create mode 100644 src/theme/site/elements/image.overrides create mode 100644 src/theme/site/elements/image.variables create mode 100644 src/theme/site/elements/input.overrides create mode 100644 src/theme/site/elements/input.variables create mode 100644 src/theme/site/elements/label.overrides create mode 100644 src/theme/site/elements/label.variables create mode 100644 src/theme/site/elements/list.overrides create mode 100644 src/theme/site/elements/list.variables create mode 100644 src/theme/site/elements/loader.overrides create mode 100644 src/theme/site/elements/loader.variables create mode 100644 src/theme/site/elements/placeholder.overrides create mode 100644 src/theme/site/elements/placeholder.variables create mode 100644 src/theme/site/elements/rail.overrides create mode 100644 src/theme/site/elements/rail.variables create mode 100644 src/theme/site/elements/reveal.overrides create mode 100644 src/theme/site/elements/reveal.variables create mode 100644 src/theme/site/elements/segment.overrides create mode 100644 src/theme/site/elements/segment.variables create mode 100644 src/theme/site/elements/step.overrides create mode 100644 src/theme/site/elements/step.variables create mode 100644 src/theme/site/extras/custom.overrides create mode 100644 src/theme/site/extras/custom.variables create mode 100644 src/theme/site/extras/main.overrides create mode 100644 src/theme/site/extras/main.variables create mode 100644 src/theme/site/globals/reset.overrides create mode 100644 src/theme/site/globals/reset.variables create mode 100644 src/theme/site/globals/site.overrides create mode 100644 src/theme/site/globals/site.variables create mode 100644 src/theme/site/modules/accordion.overrides create mode 100644 src/theme/site/modules/accordion.variables create mode 100644 src/theme/site/modules/chatroom.overrides create mode 100644 src/theme/site/modules/chatroom.variables create mode 100644 src/theme/site/modules/checkbox.overrides create mode 100644 src/theme/site/modules/checkbox.variables create mode 100644 src/theme/site/modules/dimmer.overrides create mode 100644 src/theme/site/modules/dimmer.variables create mode 100644 src/theme/site/modules/dropdown.overrides create mode 100644 src/theme/site/modules/dropdown.variables create mode 100644 src/theme/site/modules/embed.overrides create mode 100644 src/theme/site/modules/embed.variables create mode 100644 src/theme/site/modules/modal.overrides create mode 100644 src/theme/site/modules/modal.variables create mode 100644 src/theme/site/modules/nag.overrides create mode 100644 src/theme/site/modules/nag.variables create mode 100644 src/theme/site/modules/popup.overrides create mode 100644 src/theme/site/modules/popup.variables create mode 100644 src/theme/site/modules/progress.overrides create mode 100644 src/theme/site/modules/progress.variables create mode 100644 src/theme/site/modules/rating.overrides create mode 100644 src/theme/site/modules/rating.variables create mode 100644 src/theme/site/modules/search.overrides create mode 100644 src/theme/site/modules/search.variables create mode 100644 src/theme/site/modules/shape.overrides create mode 100644 src/theme/site/modules/shape.variables create mode 100644 src/theme/site/modules/sidebar.overrides create mode 100644 src/theme/site/modules/sidebar.variables create mode 100644 src/theme/site/modules/sticky.overrides create mode 100644 src/theme/site/modules/sticky.variables create mode 100644 src/theme/site/modules/tab.overrides create mode 100644 src/theme/site/modules/tab.variables create mode 100644 src/theme/site/modules/transition.overrides create mode 100644 src/theme/site/modules/transition.variables create mode 100644 src/theme/site/modules/video.overrides create mode 100644 src/theme/site/modules/video.variables create mode 100644 src/theme/site/views/ad.overrides create mode 100644 src/theme/site/views/ad.variables create mode 100644 src/theme/site/views/card.overrides create mode 100644 src/theme/site/views/card.variables create mode 100644 src/theme/site/views/comment.overrides create mode 100644 src/theme/site/views/comment.variables create mode 100644 src/theme/site/views/feed.overrides create mode 100644 src/theme/site/views/feed.variables create mode 100644 src/theme/site/views/item.overrides create mode 100644 src/theme/site/views/item.variables create mode 100644 src/theme/site/views/statistic.overrides create mode 100644 src/theme/site/views/statistic.variables create mode 100644 src/theme/theme.config diff --git a/razzle.extend.js b/razzle.extend.js new file mode 100644 index 0000000..ed40310 --- /dev/null +++ b/razzle.extend.js @@ -0,0 +1,15 @@ +const plugins = (defaultPlugins) => { + return defaultPlugins; +}; +const modify = (config, { target, dev }, webpack) => { + const themeConfigPath = `${__dirname}/src/theme/theme.config`; + config.resolve.alias['../../theme.config$'] = themeConfigPath; + config.resolve.alias['../../theme.config'] = themeConfigPath; + + return config; +}; + +module.exports = { + plugins, + modify, +}; \ No newline at end of file diff --git a/src/theme/site/collections/breadcrumb.overrides b/src/theme/site/collections/breadcrumb.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/collections/breadcrumb.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/collections/breadcrumb.variables b/src/theme/site/collections/breadcrumb.variables new file mode 100644 index 0000000..a97d5b0 --- /dev/null +++ b/src/theme/site/collections/breadcrumb.variables @@ -0,0 +1,33 @@ +/******************************* + Breadcrumb +*******************************/ + +/*------------------- + Breadcrumb +--------------------*/ + +@verticalMargin: 0em; +@display: inline-block; +@verticalAlign: middle; + +@dividerSpacing: @3px; +@dividerOpacity: 0.7; +@dividerColor: @lightTextColor; + +@dividerSize: @relativeSmall; +@dividerVerticalAlign: baseline; + +@iconDividerSize: @relativeTiny; +@iconDividerVerticalAlign: baseline; + +@sectionMargin: 0em; +@sectionPadding: 0em; + +/* Coupling */ +@segmentPadding: @relativeMini @relativeMedium; + +/*------------------- + States +--------------------*/ + +@activeFontWeight: @bold; diff --git a/src/theme/site/collections/form.overrides b/src/theme/site/collections/form.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/collections/form.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/collections/form.variables b/src/theme/site/collections/form.variables new file mode 100644 index 0000000..3644885 --- /dev/null +++ b/src/theme/site/collections/form.variables @@ -0,0 +1,195 @@ +/******************************* + Form +*******************************/ + +/*------------------- + Elements +--------------------*/ + +/* Form */ +@gutterWidth: 1em; +@rowDistance: 1em; + +/* Text */ +@paragraphMargin: @rowDistance 0em; + +/* Field */ +@fieldMargin: 0em 0em @rowDistance; + +/* Fields */ +@fieldsMargin: 0em -(@gutterWidth / 2) @rowDistance; + +/* Form Label */ +@labelDistance: @4px; +@labelMargin: 0em 0em @labelDistance 0em; +@labelFontSize: @relativeSmall; +@labelFontWeight: @bold; +@labelTextTransform: none; +@labelColor: @textColor; + +/* Input */ +@inputFont: @pageFont; +@inputWidth: 100%; +@inputFontSize: 1em; +@inputPadding: (@inputVerticalPadding + ((1em - @inputLineHeight) / 2)) @inputHorizontalPadding; +@inputBorder: 1px solid @borderColor; +@inputBorderRadius: @absoluteBorderRadius; +@inputColor: @textColor; +@inputTransition: + color @defaultDuration @defaultEasing, + border-color @defaultDuration @defaultEasing +; +@inputBoxShadow: 0em 0em 0em 0em transparent inset; + +/* Select */ +@selectBackground: @white; +@selectBorderRadius: @inputBorderRadius; +@selectBorder: @inputBorder; +@selectPadding: 0.62em @inputHorizontalPadding; +@selectBoxShadow: @inputBoxShadow; +@selectTransition: @inputTransition; +@selectColor: @inputColor; + +/* Text Area */ +@textAreaPadding: @inputVerticalPadding @inputHorizontalPadding; +@textAreaHeight: 12em; +@textAreaResize: vertical; +@textAreaLineHeight: 1.2857; +@textAreaMinHeight: 8em; +@textAreaMaxHeight: 24em; +@textAreaBackground: @inputBackground; +@textAreaBorder: @inputBorder; +@textAreaFontSize: @inputFontSize; +@textAreaTransition: @inputTransition; + +/* Checkbox */ +@checkboxVerticalAlign: top; +@checkboxLabelFontSize: 1em; +@checkboxLabelTextTransform: @labelTextTransform; + +/* Inline Validation Prompt */ +@promptBackground: @white; +@promptBorderColor: @formErrorBorder; +@promptBorder: 1px solid @promptBorderColor; +@promptTextColor: @formErrorColor; +@inlinePromptMargin: -0.25em 0em -0.5em 0.5em; +@inlinePromptBorderWidth: 1px; + +/*------------------- + States +--------------------*/ + +/* Focus */ +@inputFocusPointerSize: 0px; + +/* Input Focus */ +@inputFocusBackground: @inputBackground; +@inputFocusBorderColor: @focusedFormBorderColor; +@inputFocusColor: @selectedTextColor; +@inputFocusBoxShadow: @inputFocusPointerSize 0em 0em 0em @selectedBorderColor inset; +@inputFocusBorderRadius: @inputBorderRadius; + +/* Text Area Focus */ +@textAreaFocusBackground: @inputFocusBackground; +@textAreaFocusBorderColor: @inputFocusBorderColor; +@textAreaFocusColor: @inputFocusColor; +@textAreaFocusBoxShadow: @inputFocusBoxShadow; +@textAreaFocusBorderRadius: @inputFocusBorderRadius; + +/* Disabled */ +@disabledLabelOpacity: @disabledOpacity; + +/* Errored Input */ +@formErrorColor: @negativeTextColor; +@formErrorBorder: @negativeBorderColor; +@formErrorBackground: @negativeBackgroundColor; + +/* AutoFill */ +@inputAutoFillBackground: #FFFFF0; +@inputAutoFillBorder: #E5DFA1; +@inputAutoFillFocusBackground: @inputAutoFillBackground; +@inputAutoFillFocusBorder: #D5C315; +@inputAutoFillErrorBackground: #FFFAF0; +@inputAutoFillErrorBorder: #E0B4B4; + + +/* Input Error */ +@inputErrorBorderRadius: ''; +@inputErrorBoxShadow: none; + +/* Dropdown Error */ +@dropdownErrorHoverBackground: #FBE7E7; +@dropdownErrorSelectedBackground: @dropdownErrorHoverBackground; +@dropdownErrorActiveBackground: #FDCFCF; +@dropdownErrorLabelBackground: #EACBCB; +@dropdownErrorLabelColor: @errorTextColor; + +/* Focused Error */ +@inputErrorFocusBackground: @negativeBackgroundColor; +@inputErrorFocusColor: @negativeTextColor; +@inputErrorFocusBorder: @negativeBorderColor; +@inputErrorFocusBoxShadow: none; + +/* Placeholder Error */ +@inputErrorPlaceholderColor: lighten(@formErrorColor, 40); +@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 30); + +/* Loading Dimmer */ +@loaderDimmerColor: rgba(255, 255, 255, 0.8); +@loaderDimmerZIndex: 100; + +/* Loading Spinner */ +@loaderSize: 3em; +@loaderLineZIndex: 101; + +/*------------------- + Types +--------------------*/ + +/* Required */ +@requiredContent: '*'; +@requiredColor: @negativeColor; +@requiredVerticalOffset: -0.2em; +@requiredDistance: 0.2em; +@requiredMargin: @requiredVerticalOffset 0em 0em @requiredDistance; + +/* Inverted */ +@invertedInputBackground: @inputBackground; +@invertedInputBorderColor: @whiteBorderColor; +@invertedInputBoxShadow: @inputBoxShadow; +@invertedInputColor: @inputColor; +@invertedLabelColor: @invertedTextColor; +@invertedInputBoxShadow: none; + +/*------------------- + Variations +--------------------*/ + +/* Grouped Fields */ +@groupedMargin: @fieldMargin; +@groupedFieldMargin: 0.5em 0em; + +@groupedLabelDistance: @labelDistance; +@groupedLabelColor: @labelColor; +@groupedLabelMargin: @labelMargin; +@groupedLabelFontSize: @labelFontSize; +@groupedLabelFontWeight: @labelFontWeight; +@groupedLabelTextTransform: @labelTextTransform; + + +/* Inline */ +@inlineInputSize: @relativeMedium; + +@inlineLabelDistance: @relativeTiny; +@inlineLabelColor: @labelColor; +@inlineLabelFontSize: @labelFontSize; +@inlineLabelFontWeight: @labelFontWeight; +@inlineLabelTextTransform: @labelTextTransform; + +@groupedInlineLabelMargin: 0.035714em 1em 0em 0em; + +/*------------------- + Groups +--------------------*/ + +@inlineFieldsMargin: 0em 1em 0em 0em; diff --git a/src/theme/site/collections/grid.overrides b/src/theme/site/collections/grid.overrides new file mode 100644 index 0000000..0e06821 --- /dev/null +++ b/src/theme/site/collections/grid.overrides @@ -0,0 +1,4 @@ +/******************************* + Theme Overrides +*******************************/ + diff --git a/src/theme/site/collections/grid.variables b/src/theme/site/collections/grid.variables new file mode 100644 index 0000000..cdf5956 --- /dev/null +++ b/src/theme/site/collections/grid.variables @@ -0,0 +1,103 @@ +/******************************* + Grid +*******************************/ + +/* Inherited From Site */ + +// @mobileBreakpoint +// @tabletBreakpoint +// @computerBreakpoint +// @largeMonitorBreakpoint +// @widescreenMonitorBreakpoint + +/******************************* + Grid +*******************************/ + +@minWidth: 320px; + +@gutterWidth: 2rem; +@rowSpacing: 2rem; + +@tableWidth: ~"calc(100% + "@gutterWidth~")"; +@columnMaxImageWidth: 100%; + +@consecutiveGridDistance: (@rowSpacing / 2); + +/******************************* + Variations +*******************************/ + +/*-------------- + Relaxed +---------------*/ + +@relaxedGutterWidth: 3rem; +@veryRelaxedGutterWidth: 5rem; + +/*-------------- + Divided +---------------*/ + +@dividedBorder: -1px 0px 0px 0px @borderColor; +@verticallyDividedBorder: 0px -1px 0px 0px @borderColor; + +@dividedInvertedBorder: -1px 0px 0px 0px @whiteBorderColor; +@verticallyDividedInvertedBorder: 0px -1px 0px 0px @whiteBorderColor; + +/*-------------- + Celled +---------------*/ + +@celledMargin: 1em 0em; +@celledWidth: 1px; +@celledBorderColor: @solidBorderColor; + +@celledPadding: 1em; +@celledRelaxedPadding: 1.5em; +@celledVeryRelaxedPadding: 2em; + +@celledGridDivider: 0px 0px 0px @celledWidth @celledBorderColor; +@celledRowDivider: 0px (-@celledWidth) 0px 0px @celledBorderColor; +@celledColumnDivider: (-@celledWidth) 0px 0px 0px @celledBorderColor; + + +/*-------------- + Stackable +---------------*/ + +@stackableRowSpacing: @rowSpacing; +@stackableGutter: @gutterWidth; +@stackableMobileBorder: 1px solid @borderColor; +@stackableInvertedMobileBorder: 1px solid @whiteBorderColor; + + +/******************************* + Legacy +*******************************/ + +/*-------------- + Page +---------------*/ + +/* Legacy (DO NOT USE) + */ +@mobileWidth: auto; +@mobileMargin: 0em; +@mobileGutter: 0em; + +@tabletWidth: auto; +@tabletMargin: 0em; +@tabletGutter: 2em; + +@computerWidth: auto; +@computerMargin: 0em; +@computerGutter: 3%; + +@largeMonitorWidth: auto; +@largeMonitorMargin: 0em; +@largeMonitorGutter: 15%; + +@widescreenMonitorWidth: auto; +@widescreenMargin: 0em; +@widescreenMonitorGutter: 23%; \ No newline at end of file diff --git a/src/theme/site/collections/menu.overrides b/src/theme/site/collections/menu.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/collections/menu.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/collections/menu.variables b/src/theme/site/collections/menu.variables new file mode 100644 index 0000000..b41eb00 --- /dev/null +++ b/src/theme/site/collections/menu.variables @@ -0,0 +1,458 @@ +/******************************* + Menu +*******************************/ + +/*------------------- + Collection +--------------------*/ + +/* Menu */ +@verticalMargin: @medium; +@horizontalMargin: 0em; +@margin: @verticalMargin @horizontalMargin; +@background: #FFFFFF; +@fontFamily: @pageFont; +@itemBackground: none; +@fontWeight: @normal; +@borderWidth: 1px; +@border: @borderWidth solid @borderColor; +@boxShadow: @subtleShadow; +@borderRadius: @defaultBorderRadius; +@minHeight: (@itemVerticalPadding * 2) + 1em; + +/* Menu Item */ +@itemVerticalPadding: @relativeSmall; +@itemHorizontalPadding: @relativeLarge; +@itemTextTransform: none; +@itemTransition: + background @defaultDuration @defaultEasing, + box-shadow @defaultDuration @defaultEasing, + color @defaultDuration @defaultEasing +; +@itemFontWeight: @normal; +@itemTextColor: @textColor; + +/* Divider */ +@dividerSize: 1px; +@dividerBackground: @internalBorderColor; + +/* Sub Menu */ +@subMenuDistance: 0.5em; +@subMenuMargin: @subMenuDistance -@itemHorizontalPadding 0em; +@subMenuFontSize: @relativeTiny; +@subMenuTextColor: rgba(0, 0, 0, 0.5); + +@subMenuIndent: 0em; +@subMenuHorizontalPadding: (@itemHorizontalPadding / @tinySize) + @subMenuIndent; +@subMenuVerticalPadding: 0.5em; + +/* Text Item */ +@textLineHeight: 1.3; + +/*-------------- + Elements +---------------*/ + +/* Icon */ +@iconFloat: none; +@iconMargin: 0em @relative5px 0em 0em; +@iconOpacity: 0.9; + +/* Dropdown Icon */ +@dropdownIconFloat: right; +@dropdownIconDistance: 1em; + +/* Header */ +@headerBackground: ''; +@headerWeight: @bold; +@headerTextTransform: @normal; + +/* Vertical Icon */ +@verticalIconFloat: right; +@verticalIconMargin: 0em 0em 0em 0.5em; + +/* Vertical Header */ +@verticalHeaderMargin: 0em 0em 0.5em; +@verticalHeaderFontSize: @relativeMedium; +@verticalHeaderFontWeight: @bold; + +/* Pointing Arrow */ +@arrowSize: @relative8px; +@arrowBorderWidth: 1px; +@arrowBorder: @arrowBorderWidth solid @solidBorderColor; +@arrowTransition: background @defaultDuration @defaultEasing; +@arrowZIndex: 2; + +@arrowHoverColor: #F2F2F2; +@arrowActiveColor: @arrowHoverColor; +@arrowActiveHoverColor: @arrowActiveColor; + +@arrowVerticalHoverColor: @arrowHoverColor; +@arrowVerticalActiveColor: @arrowActiveColor; +@arrowVerticalSubMenuColor: @white; + +/*-------------- + Couplings +---------------*/ + +/* Button */ +@buttonSize: @relativeMedium; +@buttonOffset: 0em; +@buttonMargin: -0.5em 0em; +@buttonVerticalPadding: @relativeMini; + +/* Input */ +@inputSize: @relativeMedium; +@inputVerticalMargin: -0.5em; +@inputOffset: 0em; +@inputVerticalPadding: @relative8px; + +/* Image */ +@imageMargin: -0.3em 0em; +@imageWidth: 2.5em; +@verticalImageWidth: auto; + +/* Label */ +@labelOffset: -0.15em; +@labelBackground: #999999; +@labelTextColor: @white; + +@labelTextMargin: 1em; +@labelVerticalPadding: 0.3em; +@labelHorizontalPadding: @relativeMini; + +@labelAndIconFloat: none; +@labelAndIconMargin: 0em 0.5em 0em 0em; + +/* Dropdown in Menu */ +@dropdownMenuBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + +@dropdownBackground: #FFFFFF; +@dropdownMenuDistance: 0em; +@dropdownMenuBorderRadius: @borderRadius; + +@dropdownItemFontSize: @relativeMedium; +@dropdownItemPadding: @relativeMini @relativeLarge; +@dropdownItemBackground: transparent; +@dropdownItemColor: @textColor; +@dropdownItemTextTransform: none; +@dropdownItemFontWeight: @normal; +@dropdownItemBoxShadow: none; +@dropdownItemTransition: none; + +@dropdownItemIconFloat: none; +@dropdownItemIconFontSize: @relativeMedium; +@dropdownItemIconMargin: 0em 0.75em 0em 0em; + +@dropdownHoveredItemBackground: @transparentBlack; +@dropdownHoveredItemColor: @selectedTextColor; + +/* Dropdown Variations */ +@dropdownVerticalMenuBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08); +@secondaryDropdownMenuDistance: @relative5px; +@pointingDropdownMenuDistance: 0.75em; +@invertedSelectionDropdownColor: @invertedTextColor; + +/*-------------- + States +---------------*/ + +/* Hovered Item */ +@hoverItemBackground: @subtleTransparentBlack; +@hoverItemTextColor: @selectedTextColor; + +/* Pressed Item */ +@pressedItemBackground: @subtleTransparentBlack; +@pressedItemTextColor: @hoverItemTextColor; + + +/* Active Item */ +@activeItemBackground: @transparentBlack; +@activeItemTextColor: @selectedTextColor; +@activeItemFontWeight: @normal; +@activeIconOpacity: 1; +@activeItemBoxShadow: none; + +/* Active Hovered Item */ +@activeHoverItemBackground: @transparentBlack; +@activeHoverItemColor: @selectedTextColor; + +/* Selected Dropdown */ +@dropdownSelectedItemBackground: @transparentBlack; +@dropdownSelectedItemColor: @selectedTextColor; + +/* Active Dropdown */ +@dropdownActiveItemBackground: @subtleTransparentBlack; +@dropdownActiveItemColor: @selectedTextColor; +@dropdownActiveItemFontWeight: @bold; + +/* Active Sub Menu */ +@subMenuActiveBackground: transparent; +@subMenuActiveTextColor: @activeItemTextColor; +@subMenuActiveFontWeight: @bold; + + +/*-------------- + Types +---------------*/ + +/* Vertical */ +@verticalBoxShadow: @boxShadow; +@verticalPointerWidth: 2px; +@verticalBackground: #FFFFFF; +@verticalItemBackground: none; +@verticalDividerBackground: @dividerBackground; + +@verticalActiveBoxShadow: none; + + +/* Secondary */ +@secondaryBackground: none; +@secondaryMargin: 0em -@secondaryItemSpacing; +@secondaryItemBackground: none; +@secondaryItemSpacing: @relative5px; +@secondaryItemMargin: 0em @secondaryItemSpacing; +@secondaryItemVerticalPadding: @relativeMini; +@secondaryItemHorizontalPadding: @relativeSmall; +@secondaryItemPadding: @relativeMini @relativeSmall; +@secondaryItemBorderRadius: @defaultBorderRadius; +@secondaryItemTransition: color @defaultDuration @defaultEasing; +@secondaryItemColor: @unselectedTextColor; + +@secondaryHoverItemBackground: @transparentBlack; +@secondaryHoverItemColor: @selectedTextColor; + +@secondaryActiveItemBackground: @transparentBlack; +@secondaryActiveItemColor: @selectedTextColor; +@secondaryActiveHoverItemBackground: @transparentBlack; +@secondaryActiveHoverItemColor: @selectedTextColor; + +@secondaryActiveHoveredItemBackground: @transparentBlack; +@secondaryActiveHoveredItemColor: @selectedTextColor; + +@secondaryHeaderBackground: none transparent; +@secondaryHeaderBorder: none; + +@secondaryItemVerticalSpacing: @secondaryItemSpacing; +@secondaryVerticalItemMargin: 0em 0em @secondaryItemVerticalSpacing; +@secondaryVerticalItemBorderRadius: @defaultBorderRadius; + +@secondaryMenuSubMenuMargin: 0em -@secondaryItemHorizontalPadding; +@secondaryMenuSubMenuItemMargin: 0em; +@secondarySubMenuHorizontalPadding: (@itemHorizontalPadding / @tinySize) + @subMenuIndent; +@secondaryMenuSubMenuItemPadding: @relative7px @secondarySubMenuHorizontalPadding; + +/* Pointing */ +@secondaryPointingBorderWidth: 2px; +@secondaryPointingBorderColor: @borderColor; +@secondaryPointingItemVerticalPadding: @relativeTiny; +@secondaryPointingItemHorizontalPadding: @relativeLarge; + +@secondaryPointingHoverTextColor: @textColor; + +@secondaryPointingActiveBorderColor: @black; +@secondaryPointingActiveTextColor: @selectedTextColor; +@secondaryPointingActiveFontWeight: @bold; + +@secondaryPointingActiveDropdownBorderColor: transparent; + +@secondaryPointingActiveHoverBorderColor: @secondaryPointingActiveBorderColor; +@secondaryPointingActiveHoverTextColor: @secondaryPointingActiveTextColor; + +@secondaryPointingHeaderColor: @darkTextColor; +@secondaryVerticalPointingItemMargin: 0em -@secondaryPointingBorderWidth 0em 0em; + + +/* Inverted Secondary */ +@secondaryInvertedColor: @invertedLightTextColor; + +@secondaryInvertedHoverBackground: @transparentWhite; +@secondaryInvertedHoverColor: @invertedSelectedTextColor; + +@secondaryInvertedActiveBackground: @strongTransparentWhite; +@secondaryInvertedActiveColor: @invertedSelectedTextColor; + +/* Inverted Pointing */ +@secondaryPointingInvertedBorderColor: @whiteBorderColor; +@secondaryPointingInvertedItemTextColor: @invertedTextColor; +@secondaryPointingInvertedItemHeaderColor: @white; +@secondaryPointingInvertedItemHoverTextColor: @selectedTextColor; +@secondaryPointingInvertedActiveBorderColor: @white; +@secondaryPointingInvertedActiveColor: @invertedSelectedTextColor; + + +/* Tiered */ +@tieredActiveItemBackground: #FCFCFC; +@tieredActiveMenuBackground: #FCFCFC; + +@tieredSubMenuTextTransform: @normal; +@tieredSubMenuFontWeight: @normal; + +@tieredSubMenuColor: @lightTextColor; + +@tieredSubMenuHoverBackground: none transparent; +@tieredSubMenuHoverColor: @hoveredTextColor; + +@tieredSubMenuActiveBackground: none transparent; +@tieredSubMenuActiveColor: @selectedTextColor; + +@tieredInvertedSubMenuBackground: rgba(0, 0, 0, 0.2); + + +/* Icon */ +@iconMenuTextAlign: center; +@iconMenuItemColor: @black; +@iconMenuInvertedItemColor: @white; + + +/* Tabular */ +@tabularBorderColor: @solidBorderColor; +@tabularBackgroundColor: transparent; +@tabularBackground: none @tabularBackgroundColor; +@tabularBorderWidth: 1px; +@tabularOppositeBorderWidth: @tabularBorderWidth + 1px; +@tabularVerticalPadding: @itemVerticalPadding; +@tabularHorizontalPadding: @relativeHuge; +@tabularBorderRadius: @defaultBorderRadius; +@tabularTextColor: @itemTextColor; + +@tabularHoveredTextColor: @hoveredTextColor; + +@tabularVerticalBackground: none @tabularBackgroundColor; + +@tabularFluidOffset: 1px; +@tabularFluidWidth: calc(100% + (@tabularFluidOffset * 2)); + +@tabularActiveBackground: none @white; +@tabularActiveColor: @selectedTextColor; +@tabularActiveBoxShadow: none; +@tabularActiveWeight: @bold; + + + +/* Pagination */ +@paginationMinWidth: 3em; +@paginationActiveBackground: @transparentBlack; +@paginationActiveTextColor: @selectedTextColor; + +/* Labeled Icon */ +@labeledIconItemHorizontalPadding: @relativeMassive; +@labeledIconSize: @relativeMassive; +@labeledIconMinWidth: 6em; +@labeledIconTextMargin: 0.5rem; + + +/* Text */ +@textMenuItemSpacing: @relative7px; +@textMenuMargin: @relativeMedium -(@textMenuItemSpacing); +@textMenuItemColor: @mutedTextColor; +@textMenuItemFontWeight: @normal; +@textMenuItemMargin: 0em 0em; +@textMenuItemPadding: @relative5px @textMenuItemSpacing; +@textMenuItemTransition: opacity @defaultDuration @defaultEasing; + +@textMenuSubMenuMargin: 0em; +@textMenuSubMenuItemMargin: 0em; +@textMenuSubMenuItemPadding: @relative7px 0em; + +@textMenuActiveItemFontWeight: @normal; +@textMenuActiveItemColor: @selectedTextColor; + +@textMenuHeaderSize: @relativeSmall; +@textMenuHeaderColor: @darkTextColor; +@textMenuHeaderFontWeight: @bold; +@textMenuHeaderTextTransform: uppercase; + +@textVerticalMenuMargin: @relativeMedium 0em; +@textVerticalMenuHeaderMargin: @relative8px 0em @relative10px; +@textVerticalMenuItemMargin: @relative8px 0em; + +@textVerticalMenuIconFloat: none; +@textVerticalMenuIconMargin: @iconMargin; + + +/*-------------- + Variations +---------------*/ + +/* Inverted */ +@invertedBackground: @black; +@invertedBoxShadow: none; +@invertedBorder: 0px solid transparent; +@invertedHeaderBackground: transparent; + +@invertedItemBackground: transparent; +@invertedItemTextColor: @invertedTextColor; + +/* Inverted Sub Menu */ +@invertedSubMenuBackground: transparent; +@invertedSubMenuColor: @invertedUnselectedTextColor; + +/* Inverted Hover */ +@invertedHoverBackground: @transparentWhite; +@invertedHoverColor: @invertedSelectedTextColor; + +@invertedSubMenuHoverBackground: transparent; +@invertedSubMenuHoverColor: @invertedSelectedTextColor; + +/* Pressed */ +@invertedMenuPressedBackground: @transparentWhite; +@invertedMenuPressedColor: @invertedSelectedTextColor; + +/* Inverted Active */ +@invertedActiveBackground: @strongTransparentWhite; +@invertedActiveColor: @invertedSelectedTextColor; +@invertedArrowActiveColor: #3D3E3F; + +/* Inverted Active Hover */ +@invertedActiveHoverBackground: @invertedActiveBackground; +@invertedActiveHoverColor: @white; +@invertedArrowActiveHoverColor: @invertedArrowActiveColor; + +@invertedSubMenuActiveBackground: transparent; +@invertedSubMenuActiveColor: @white; + +/* Inverted Menu Divider */ +@invertedDividerBackground: rgba(255, 255, 255, 0.08); +@invertedVerticalDividerBackground: @invertedDividerBackground; + +/* Inverted Colored */ +@invertedColoredDividerBackground: @dividerBackground; +@invertedColoredActiveBackground: @strongTransparentBlack; + +/* Fixed */ +@fixedPrecedingGridMargin: 2.75rem; + +/* Floated */ +@floatedDistance: 0.5rem; + +/* Attached */ +@attachedTopOffset: 0px; +@attachedBottomOffset: 0px; +@attachedHorizontalOffset: -@borderWidth; +@attachedWidth: calc(100% - (@attachedHorizontalOffset * 2)); +@attachedBoxShadow: none; +@attachedBorder: @borderWidth solid @solidBorderColor; +@attachedBottomBoxShadow: + @boxShadow, + @attachedBoxShadow +; + +/* Resize large sizes */ +@mini: @11px; +@tiny: @12px; +@small: @13px; +@large: @15px; +@big: @16px; +@huge: @17px; +@massive: @18px; + +/* Sizes */ +@miniWidth: 9rem; +@tinyWidth: 11rem; +@smallWidth: 13rem; +@mediumWidth: 15rem; +@largeWidth: 18rem; +@bigWidth: 20rem; +@hugeWidth: 22rem; +@massiveWidth: 25rem; diff --git a/src/theme/site/collections/message.overrides b/src/theme/site/collections/message.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/collections/message.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/collections/message.variables b/src/theme/site/collections/message.variables new file mode 100644 index 0000000..10d7f98 --- /dev/null +++ b/src/theme/site/collections/message.variables @@ -0,0 +1,158 @@ +/******************************* + Message +*******************************/ + +// @textColor + +/*------------------- + Elements +--------------------*/ + +@verticalMargin: 1em; +@verticalPadding: 1em; +@horizontalPadding: 1.5em; +@padding: @verticalPadding @horizontalPadding; +@background: #F8F8F9; +@lineHeightOffset: ((@lineHeight - 1em) / 2); + +@borderRadius: @defaultBorderRadius; +@borderWidth: 1px; +@borderShadow: 0px 0px 0px @borderWidth @strongBorderColor inset; +@shadowShadow: 0px 0px 0px 0px rgba(0, 0, 0, 0); +@boxShadow: + @borderShadow, + @shadowShadow +; + +@transition: + opacity @defaultDuration @defaultEasing, + color @defaultDuration @defaultEasing, + background @defaultDuration @defaultEasing, + box-shadow @defaultDuration @defaultEasing +; + +/* Header */ +@headerFontSize: @relativeLarge; +@headerFontWeight: @bold; +@headerDisplay: block; +@headerDistance: 0rem; +@headerMargin: -@headerLineHeightOffset 0em @headerDistance 0em; +@headerParagraphDistance: 0.25em; + +/* Paragraph */ +@messageTextOpacity: 0.85; +@messageParagraphMargin: 0.75em; + +/* List */ +@listOpacity: 0.85; +@listStylePosition: inside; +@listMargin: 0.5em; +@listItemIndent: 1em; +@listItemMargin: 0.3em; + +/* Icon */ +@iconDistance: 0.6em; + +/* Close Icon */ +@closeTopDistance: @verticalPadding - @lineHeightOffset; +@closeRightDistance: 0.5em; +@closeOpacity: 0.7; +@closeTransition: opacity @defaultDuration @defaultEasing; + + +/*------------------- + Types +--------------------*/ + +/* Icon Message */ +@iconSize: 3em; +@iconOpacity: 0.8; +@iconContentDistance: 0rem; +@iconVerticalAlign: middle; + +/* Attached */ +@attachedXOffset: -1px; +@attachedYOffset: -1px; +@attachedBoxShadow: 0em 0em 0em @borderWidth @borderColor inset; +@attachedBottomBoxShadow: + @attachedBoxShadow, + @subtleShadow +; + +/* Floating */ +@floatingBoxShadow: + @borderShadow, + @floatingShadow +; + +/* Colors */ +@redBoxShadow: + 0px 0px 0px @borderWidth @redBorderColor inset, + @shadowShadow +; +@orangeBoxShadow: + 0px 0px 0px @borderWidth @orangeBorderColor inset, + @shadowShadow +; +@yellowBoxShadow: + 0px 0px 0px @borderWidth @yellowBorderColor inset, + @shadowShadow +; +@oliveBoxShadow: + 0px 0px 0px @borderWidth @oliveBorderColor inset, + @shadowShadow +; +@greenBoxShadow: + 0px 0px 0px @borderWidth @greenBorderColor inset, + @shadowShadow +; +@tealBoxShadow: + 0px 0px 0px @borderWidth @tealBorderColor inset, + @shadowShadow +; +@blueBoxShadow: + 0px 0px 0px @borderWidth @blueBorderColor inset, + @shadowShadow +; +@violetBoxShadow: + 0px 0px 0px @borderWidth @violetBorderColor inset, + @shadowShadow +; +@purpleBoxShadow: + 0px 0px 0px @borderWidth @purpleBorderColor inset, + @shadowShadow +; +@pinkBoxShadow: + 0px 0px 0px @borderWidth @pinkBorderColor inset, + @shadowShadow +; +@brownBoxShadow: + 0px 0px 0px @borderWidth @brownBorderColor inset, + @shadowShadow +; + +/* Warning / Positive / Negative / Info */ +@positiveBoxShadow: + 0px 0px 0px @borderWidth @positiveBorderColor inset, + @shadowShadow +; +@negativeBoxShadow: + 0px 0px 0px @borderWidth @negativeBorderColor inset, + @shadowShadow +; +@infoBoxShadow: + 0px 0px 0px @borderWidth @infoBorderColor inset, + @shadowShadow +; +@warningBoxShadow: + 0px 0px 0px @borderWidth @warningBorderColor inset, + @shadowShadow +; +@errorBoxShadow: + 0px 0px 0px @borderWidth @errorBorderColor inset, + @shadowShadow +; +@successBoxShadow: + 0px 0px 0px @borderWidth @successBorderColor inset, + @shadowShadow +; diff --git a/src/theme/site/collections/table.overrides b/src/theme/site/collections/table.overrides new file mode 100644 index 0000000..e69de29 diff --git a/src/theme/site/collections/table.variables b/src/theme/site/collections/table.variables new file mode 100644 index 0000000..420986d --- /dev/null +++ b/src/theme/site/collections/table.variables @@ -0,0 +1,247 @@ +/******************************* + Table +*******************************/ + +/*------------------- + Element +--------------------*/ + +@verticalMargin: 1em; +@horizontalMargin: 0em; +@margin: @verticalMargin @horizontalMargin; +@borderCollapse: separate; +@borderSpacing: 0px; +@borderRadius: @defaultBorderRadius; +@transition: + background @defaultDuration @defaultEasing, + color @defaultDuration @defaultEasing +; +@background: @white; +@color: @textColor; +@borderWidth: 1px; +@border: @borderWidth solid @borderColor; +@boxShadow: none; +@textAlign: left; + +/*-------------- + Parts +---------------*/ + +/* Table Row */ +@rowBorder: 1px solid @internalBorderColor; + +/* Table Cell */ +@cellVerticalPadding: @relativeMini; +@cellHorizontalPadding: @relativeMini; +@cellVerticalAlign: inherit; +@cellTextAlign: inherit; +@cellBorder: 1px solid @internalBorderColor; + +/* Table Header */ +@headerBorder: 1px solid @internalBorderColor; +@headerDivider: none; +@headerBackground: @offWhite; +@headerAlign: inherit; +@headerVerticalAlign: inherit; +@headerColor: @textColor; +@headerVerticalPadding: @relativeSmall; +@headerHorizontalPadding: @cellHorizontalPadding; +@headerFontStyle: none; +@headerFontWeight: @bold; +@headerTextTransform: none; +@headerBoxShadow: none; + +/* Table Footer */ +@footerBoxShadow: none; +@footerBorder: 1px solid @borderColor; +@footerDivider: none; +@footerBackground: @offWhite; +@footerAlign: inherit; +@footerVerticalAlign: middle; +@footerColor: @textColor; +@footerVerticalPadding: @cellVerticalPadding; +@footerHorizontalPadding: @cellHorizontalPadding; +@footerFontStyle: @normal; +@footerFontWeight: @normal; +@footerTextTransform: none; + +/* Responsive Size */ +@responsiveHeaderDisplay: block; +@responsiveFooterDisplay: block; +@responsiveRowVerticalPadding: 1em; +@responsiveRowBoxShadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; +@responsiveCellVerticalPadding: 0.25em; +@responsiveCellHorizontalPadding: 0.75em; +@responsiveCellBoxShadow: none !important; +@responsiveCellHeaderFontWeight: @bold; + +/*------------------- + Types +--------------------*/ + +/* Definition */ +@definitionPageBackground: @white; + +@definitionHeaderBackground: transparent; +@definitionHeaderColor: @unselectedTextColor; +@definitionHeaderFontWeight: @normal; + +@definitionFooterBackground: @definitionHeaderBackground; +@definitionFooterColor: @definitionHeaderColor; +@definitionFooterFontWeight: @definitionHeaderFontWeight; + +@definitionColumnBackground: @subtleTransparentBlack; +@definitionColumnFontWeight: @bold; +@definitionColumnColor: @selectedTextColor; +@definitionColumnFontSize: @relativeMedium; +@definitionColumnTextTransform: ''; +@definitionColumnBoxShadow: ''; +@definitionColumnTextAlign: ''; +@definitionColumnHorizontalPadding: ''; + + +/*-------------- + Couplings +---------------*/ + +@iconVerticalAlign: baseline; + +/*-------------- + States +---------------*/ + +@stateMarkerWidth: 0px; + +/* Positive */ +@positiveColor: @positiveTextColor; +@positiveBoxShadow: @stateMarkerWidth 0px 0px @positiveBorderColor inset; +@positiveBackgroundHover: darken(@positiveBackgroundColor, 3); +@positiveColorHover: darken(@positiveColor, 3); + +/* Negative */ +@negativeColor: @negativeTextColor; +@negativeBoxShadow: @stateMarkerWidth 0px 0px @negativeBorderColor inset; +@negativeBackgroundHover: darken(@negativeBackgroundColor, 3); +@negativeColorHover: darken(@negativeColor, 3); + +/* Error */ +@errorColor: @errorTextColor; +@errorBoxShadow: @stateMarkerWidth 0px 0px @errorBorderColor inset; +@errorBackgroundHover: darken(@errorBackgroundColor, 3); +@errorColorHover: darken(@errorColor, 3); + +/* Warning */ +@warningColor: @warningTextColor; +@warningBoxShadow: @stateMarkerWidth 0px 0px @warningBorderColor inset; +@warningBackgroundHover: darken(@warningBackgroundColor, 3); +@warningColorHover: darken(@warningColor, 3); + +/* Active */ +@activeColor: @textColor; +@activeBackgroundColor: #E0E0E0; +@activeBoxShadow: @stateMarkerWidth 0px 0px @activeColor inset; + +@activeBackgroundHover: #EFEFEF; +@activeColorHover: @selectedTextColor; + +/*-------------- + Types +---------------*/ + +/* Attached */ +@attachedTopOffset: 0px; +@attachedBottomOffset: 0px; +@attachedHorizontalOffset: -@borderWidth; +@attachedWidth: calc(100% - (@attachedHorizontalOffset * 2)); +@attachedBoxShadow: none; +@attachedBorder: @borderWidth solid @solidBorderColor; +@attachedBottomBoxShadow: + @boxShadow, + @attachedBoxShadow +; + +/* Striped */ +@stripedBackground: rgba(0, 0, 50, 0.02); +@invertedStripedBackground: rgba(255, 255, 255, 0.05); + +/* Selectable */ +@selectableBackground: @transparentBlack; +@selectableTextColor: @selectedTextColor; +@selectableInvertedBackground: @transparentWhite; +@selectableInvertedTextColor: @invertedSelectedTextColor; + +/* Sortable */ +@sortableBackground: ''; +@sortableColor: @textColor; + +@sortableBorder: 1px solid @borderColor; +@sortableIconWidth: auto; +@sortableIconDistance: 0.5em; +@sortableIconOpacity: 0.8; +@sortableIconFont: 'Icons'; +@sortableIconAscending: '\f0d8'; +@sortableIconDescending: '\f0d7'; +@sortableDisabledColor: @disabledTextColor; + +@sortableHoverBackground: @transparentBlack; +@sortableHoverColor: @hoveredTextColor; + +@sortableActiveBackground: @transparentBlack; +@sortableActiveColor: @selectedTextColor; + +@sortableActiveHoverBackground: @transparentBlack; +@sortableActiveHoverColor: @selectedTextColor; + +@sortableInvertedBorderColor: transparent; +@sortableInvertedHoverBackground: @transparentWhite @subtleGradient; +@sortableInvertedHoverColor: @invertedHoveredTextColor; +@sortableInvertedActiveBackground: @strongTransparentWhite @subtleGradient; +@sortableInvertedActiveColor: @invertedSelectedTextColor; + +/* Colors */ +@coloredBorderSize: 0.2em; +@coloredBorderRadius: 0em 0em @borderRadius @borderRadius; + +/* Inverted */ +@invertedBackground: #333333; +@invertedBorder: none; +@invertedCellBorderColor: @whiteBorderColor; +@invertedCellColor: @invertedTextColor; + +@invertedHeaderBackground: @veryStrongTransparentBlack; +@invertedHeaderColor: @invertedTextColor; +@invertedHeaderBorderColor: @invertedCellBorderColor; + +@invertedDefinitionColumnBackground: @subtleTransparentWhite; +@invertedDefinitionColumnColor: @invertedSelectedTextColor; +@invertedDefinitionColumnFontWeight: @bold; + +/* Basic */ +@basicTableBackground: transparent; +@basicTableBorder: @borderWidth solid @borderColor; +@basicBoxShadow: none; + +@basicTableHeaderBackground: transparent; +@basicTableCellBackground: transparent; +@basicTableHeaderDivider: none; +@basicTableCellBorder: 1px solid rgba(0, 0, 0, 0.1); +@basicTableCellPadding: ''; +@basicTableStripedBackground: @transparentBlack; + +/* Padded */ +@paddedVerticalPadding: 1em; +@paddedHorizontalPadding: 1em; +@veryPaddedVerticalPadding: 1.5em; +@veryPaddedHorizontalPadding: 1.5em; + +/* Compact */ +@compactVerticalPadding: 0.5em; +@compactHorizontalPadding: 0.7em; +@veryCompactVerticalPadding: 0.4em; +@veryCompactHorizontalPadding: 0.6em; + + +/* Sizes */ +@small: 0.9em; +@medium: 1em; +@large: 1.1em; diff --git a/src/theme/site/elements/button.overrides b/src/theme/site/elements/button.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/elements/button.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/elements/button.variables b/src/theme/site/elements/button.variables new file mode 100644 index 0000000..caaf584 --- /dev/null +++ b/src/theme/site/elements/button.variables @@ -0,0 +1,360 @@ +/******************************* + Button +*******************************/ + +/*------------------- + Element +--------------------*/ + +/* Button */ +@verticalMargin: 0em; +@horizontalMargin: 0.25em; +@backgroundColor: #E0E1E2; +@backgroundImage: none; +@background: @backgroundColor @backgroundImage; +@lineHeight: 1em; + +/* Button defaults to using same height as input globally */ +@verticalPadding: @inputVerticalPadding; +@horizontalPadding: 1.5em; + +/* Text */ +@textTransform: none; +@tapColor: transparent; +@fontFamily: @pageFont; +@fontWeight: @bold; +@textColor: rgba(0, 0, 0, 0.6); +@textShadow: none; +@invertedTextShadow: @textShadow; +@borderRadius: @defaultBorderRadius; +@verticalAlign: baseline; + +/* Internal Shadow */ +@shadowDistance: 0em; +@shadowOffset: (@shadowDistance / 2); +@shadowBoxShadow: 0px -@shadowDistance 0px 0px @borderColor inset; + +/* Box Shadow */ +@borderBoxShadowColor: transparent; +@borderBoxShadowWidth: 1px; +@borderBoxShadow: 0px 0px 0px @borderBoxShadowWidth @borderBoxShadowColor inset; +@boxShadow: + @borderBoxShadow, + @shadowBoxShadow +; + +/* Icon */ +@iconHeight: @relativeTiny; +@iconOpacity: 0.8; +@iconDistance: @relative6px; +@iconColor: ''; +@iconTransition: opacity @defaultDuration @defaultEasing; +@iconVerticalAlign: ''; + +@iconMargin: 0em @iconDistance 0em -(@iconDistance / 2); +@rightIconMargin: 0em -(@iconDistance / 2) 0em @iconDistance; + +/* Loader */ +@invertedLoaderFillColor: rgba(0, 0, 0, 0.15); + +@transition: + opacity @defaultDuration @defaultEasing, + background-color @defaultDuration @defaultEasing, + color @defaultDuration @defaultEasing, + box-shadow @defaultDuration @defaultEasing, + background @defaultDuration @defaultEasing +; +/* +@willChange: box-shadow, transform, opacity, color, background; +*/ +@willChange: ''; + +/*------------------- + Group +--------------------*/ + +@groupBoxShadow: none; +@groupButtonBoxShadow: @boxShadow; +@verticalBoxShadow: none; +@groupButtonOffset: 0px 0px 0px 0px; +@verticalGroupOffset: 0px 0px 0px 0px; + +/*------------------- + States +--------------------*/ + +/* Hovered */ +@hoverBackgroundColor: #CACBCD; +@hoverBackgroundImage: @backgroundImage; +@hoverBoxShadow: @boxShadow; +@hoverColor: @hoveredTextColor; +@iconHoverOpacity: 0.85; + +/* Focused */ +@focusBackgroundColor: @hoverBackgroundColor; +@focusBackgroundImage: ''; +@focusBoxShadow: ''; +@focusColor: @hoveredTextColor; +@iconFocusOpacity: 0.85; + +/* Disabled */ +@disabledBackgroundImage: none; +@disabledBoxShadow: none; + +/* Pressed Down */ +@downBackgroundColor: #BABBBC; +@downBackgroundImage: ''; +@downPressedShadow: none; +@downBoxShadow: + @borderBoxShadow, + @downPressedShadow +; +@downColor: @pressedTextColor; + +/* Active */ +@activeBackgroundColor: #C0C1C2; +@activeBackgroundImage: none; +@activeColor: @selectedTextColor; +@activeBoxShadow: @borderBoxShadow; + +/* Active + Hovered */ +@activeHoverBackgroundColor: @activeBackgroundColor; +@activeHoverBackgroundImage: none; +@activeHoverColor: @activeColor; +@activeHoverBoxShadow: @activeBoxShadow; + +/* Loading */ +@loadingOpacity: 1; +@loadingPointerEvents: auto; +@loadingTransition: + all 0s linear, + opacity @defaultDuration @defaultEasing +; + +/*------------------- + Types +--------------------*/ + +/* Or */ +@orText: 'or'; + +@orGap: 0.3em; +@orHeight: (@verticalPadding * 2) + 1em; +@orZIndex: 3; + +@orCircleDistanceToEdge: (@verticalPadding); +@orCircleSize: @orHeight - @orCircleDistanceToEdge; +@orLineHeight: (@orCircleSize); +@orBoxShadow: @borderBoxShadow; + +@orVerticalOffset: -(@orCircleSize / 2); +@orHorizontalOffset: -(@orCircleSize / 2); + +@orBackgroundColor: @white; +@orTextShadow: @invertedTextShadow; +@orTextStyle: @normal; +@orTextWeight: @bold; +@orTextColor: @lightTextColor; + + +@orSpacerHeight: @verticalPadding; +@orSpacerColor: transparent; + +/* Icon */ +@iconButtonOpacity: 0.9; + +/* Labeled */ +@labeledLabelFontSize: @medium; +@labeledLabelAlign: center; +@labeledLabelPadding: ''; +@labeledLabelFontSize: @relativeMedium; +@labeledLabelBorderColor: @borderColor; +@labeledLabelBorderOffset: -@borderBoxShadowWidth; +@labeledTagLabelSize: 1.85em; /* hypotenuse of triangle */ +@labeledIconMargin: 0em; + +/* Labeled Icon */ +@labeledIconWidth: 1em + (@verticalPadding * 2); +@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05); +@labeledIconPadding: (@horizontalPadding + @labeledIconWidth); +@labeledIconBorder: transparent; +@labeledIconColor: ''; + +@labeledIconLeftShadow: -1px 0px 0px 0px @labeledIconBorder inset; +@labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset; + + +/* Inverted */ +@invertedBorderSize: 2px; +@invertedTextColor: @white; +@invertedTextHoverColor: @hoverColor; +@invertedGroupButtonOffset: 0px 0px 0px -(@invertedBorderSize); +@invertedVerticalGroupButtonOffset: 0px 0px -(@invertedBorderSize) 0px; + +/* Basic */ +@basicBorderRadius: @borderRadius; +@basicBorderSize: 1px; +@basicTextColor: @textColor; +@basicColoredBorderSize: 1px; + +@basicBackground: transparent none; +@basicFontWeight: @normal; +@basicBorder: 1px solid @borderColor; +@basicBoxShadow: 0px 0px 0px @basicBorderSize @borderColor inset; +@basicLoadingColor: @offWhite; +@basicTextTransform: none; + +/* Basic Hover */ +@basicHoverBackground: #FFFFFF; +@basicHoverTextColor: @hoveredTextColor; +@basicHoverBoxShadow: + 0px 0px 0px @basicBorderSize @selectedBorderColor inset, + 0px 0px 0px 0px @borderColor inset +; +/* Basic Focus */ +@basicFocusBackground: @basicHoverBackground; +@basicFocusTextColor: @basicHoverTextColor; +@basicFocusBoxShadow: @basicHoverBoxShadow; + +/* Basic Down */ +@basicDownBackground: #F8F8F8; +@basicDownTextColor: @pressedTextColor; +@basicDownBoxShadow: + 0px 0px 0px @basicBorderSize rgba(0, 0, 0, 0.15) inset, + 0px 1px 4px 0px @borderColor inset +; +/* Basic Active */ +@basicActiveBackground: @transparentBlack; +@basicActiveBoxShadow: ''; +@basicActiveTextColor: @selectedTextColor; + +/* Basic Inverted */ +@basicInvertedBackground: transparent; +@basicInvertedFocusBackground: transparent; +@basicInvertedDownBackground: @transparentWhite; +@basicInvertedActiveBackground: @transparentWhite; + +@basicInvertedBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.5) inset; +@basicInvertedHoverBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 1) inset; +@basicInvertedFocusBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 1) inset; +@basicInvertedDownBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.9) inset; +@basicInvertedActiveBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.7) inset; + +@basicInvertedColor: @darkWhite; +@basicInvertedHoverColor: @darkWhiteHover; +@basicInvertedDownColor: @darkWhiteActive; +@basicInvertedActiveColor: @invertedTextColor; + + +/* Basic Group */ +@basicGroupBorder: @basicBorderSize solid @borderColor; +@basicGroupBoxShadow: none; + +/*------------------- + Variations +--------------------*/ + +/* Colors */ +@coloredBackgroundImage: none; +@coloredBoxShadow: @shadowBoxShadow; + +/* Colored */ +@brownTextColor: @invertedTextColor; +@brownTextShadow: @invertedTextShadow; +@redTextColor: @invertedTextColor; +@redTextShadow: @invertedTextShadow; +@orangeTextColor: @invertedTextColor; +@orangeTextShadow: @invertedTextShadow; +@greenTextColor: @invertedTextColor; +@greenTextShadow: @invertedTextShadow; +@blueTextColor: @invertedTextColor; +@blueTextShadow: @invertedTextShadow; +@violetTextColor: @invertedTextColor; +@violetTextShadow: @invertedTextShadow; +@purpleTextColor: @invertedTextColor; +@purpleTextShadow: @invertedTextShadow; +@pinkTextColor: @invertedTextColor; +@pinkTextShadow: @invertedTextShadow; +@blackTextColor: @invertedTextColor; +@blackTextShadow: @invertedTextShadow; +@oliveTextColor: @invertedTextColor; +@oliveTextShadow: @invertedTextShadow; +@yellowTextColor: @invertedTextColor; +@yellowTextShadow: @invertedTextShadow; +@tealTextColor: @invertedTextColor; +@tealTextShadow: @invertedTextShadow; +@greyTextColor: @invertedTextColor; +@greyTextShadow: @invertedTextShadow; + +/* Inverted */ +@lightBrownTextColor: @invertedTextColor; +@lightBrownTextShadow: @invertedTextShadow; +@lightRedTextColor: @invertedTextColor; +@lightRedTextShadow: @invertedTextShadow; +@lightOrangeTextColor: @invertedTextColor; +@lightOrangeTextShadow: @invertedTextShadow; +@lightGreenTextColor: @invertedTextColor; +@lightGreenTextShadow: @invertedTextShadow; +@lightBlueTextColor: @invertedTextColor; +@lightBlueTextShadow: @invertedTextShadow; +@lightVioletTextColor: @invertedTextColor; +@lightVioletTextShadow: @invertedTextShadow; +@lightPurpleTextColor: @invertedTextColor; +@lightPurpleTextShadow: @invertedTextShadow; +@lightPinkTextColor: @invertedTextColor; +@lightPinkTextShadow: @invertedTextShadow; +@lightBlackTextColor: @invertedTextColor; +@lightBlackTextShadow: @invertedTextShadow; +@lightOliveTextColor: @textColor; +@lightOliveTextShadow: @textShadow; +@lightYellowTextColor: @textColor; +@lightYellowTextShadow: @textShadow; +@lightTealTextColor: @textColor; +@lightTealTextShadow: @textShadow; +@lightGreyTextColor: @textColor; +@lightGreyTextShadow: @textShadow; + + +/* Ordinality */ +@primaryBackgroundImage: @coloredBackgroundImage; +@primaryTextColor: @invertedTextColor; +@lightPrimaryTextColor: @invertedTextColor; +@primaryTextShadow: @invertedTextShadow; +@primaryBoxShadow: @coloredBoxShadow; + +@secondaryBackgroundImage: @coloredBackgroundImage; +@secondaryTextColor: @invertedTextColor; +@secondaryTextShadow: @invertedTextShadow; +@lightSecondaryTextColor: @invertedTextColor; +@secondaryBoxShadow: @coloredBoxShadow; + +@positiveBackgroundImage: @coloredBackgroundImage; +@positiveTextColor: @invertedTextColor; +@positiveTextShadow: @invertedTextShadow; +@positiveBoxShadow: @coloredBoxShadow; + +@negativeBackgroundImage: @coloredBackgroundImage; +@negativeTextColor: @invertedTextColor; +@negativeTextShadow: @invertedTextShadow; +@negativeBoxShadow: @coloredBoxShadow; + +/* Compact */ +@compactVerticalPadding: (@verticalPadding * 0.75); +@compactHorizontalPadding: (@horizontalPadding * 0.75); + +/* Attached */ +@attachedOffset: -1px; +@attachedBoxShadow: 0px 0px 0px 1px @borderColor; +@attachedHorizontalPadding: 0.75em; +@attachedZIndex: 2; + +/* Floated */ +@floatedMargin: 0.25em; + +/* Animated */ +@animatedVerticalAlign: middle; +@animatedZIndex: 1; +@animationDuration: 0.3s; +@animationEasing: ease; +@fadeScaleHigh: 1.5; +@fadeScaleLow: 0.75; diff --git a/src/theme/site/elements/container.overrides b/src/theme/site/elements/container.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/elements/container.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/elements/container.variables b/src/theme/site/elements/container.variables new file mode 100644 index 0000000..33f3a8c --- /dev/null +++ b/src/theme/site/elements/container.variables @@ -0,0 +1,58 @@ +/******************************* + Container +*******************************/ + +/*------------------- + Element +--------------------*/ + +/* Minimum Gutter is used to determine the maximum container width for a given device */ + +@maxWidth: 100%; + +/* Devices */ +@mobileMinimumGutter: 0em; +@mobileWidth: auto; +@mobileGutter: 1em; + +@tabletMinimumGutter: (@emSize * 1); +@tabletWidth: @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth; +@tabletGutter: auto; + +@computerMinimumGutter: (@emSize * 1.5); +@computerWidth: @computerBreakpoint - (@computerMinimumGutter * 2) - @scrollbarWidth; +@computerGutter: auto; + +@largeMonitorMinimumGutter: (@emSize * 2); +@largeMonitorWidth: @largeMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth; +@largeMonitorGutter: auto; + +/* Coupling (Add Negative Margin to container size) */ +@gridGutterWidth: 2rem; +@relaxedGridGutterWidth: 3rem; +@veryRelaxedGridGutterWidth: 5rem; + +@mobileGridWidth: @mobileWidth; +@tabletGridWidth: ~"calc("@tabletWidth~" + "@gridGutterWidth~")"; +@computerGridWidth: ~"calc("@computerWidth~" + "@gridGutterWidth~")"; +@largeMonitorGridWidth: ~"calc("@largeMonitorWidth~" + "@gridGutterWidth~")"; + +@mobileRelaxedGridWidth: @mobileWidth; +@tabletRelaxedGridWidth: ~"calc("@tabletWidth~" + "@relaxedGridGutterWidth~")"; +@computerRelaxedGridWidth: ~"calc("@computerWidth~" + "@relaxedGridGutterWidth~")"; +@largeMonitorRelaxedGridWidth: ~"calc("@largeMonitorWidth~" + "@relaxedGridGutterWidth~")"; + +@mobileVeryRelaxedGridWidth: @mobileWidth; +@tabletVeryRelaxedGridWidth: ~"calc("@tabletWidth~" + "@veryRelaxedGridGutterWidth~")"; +@computerVeryRelaxedGridWidth: ~"calc("@computerWidth~" + "@veryRelaxedGridGutterWidth~")"; +@largeMonitorVeryRelaxedGridWidth: ~"calc("@largeMonitorWidth~" + "@veryRelaxedGridGutterWidth~")"; + +/*------------------- + Types +--------------------*/ + +/* Text */ +@textWidth: 700px; +@textFontFamily: @pageFont; +@textLineHeight: 1.5; +@textSize: @large; \ No newline at end of file diff --git a/src/theme/site/elements/divider.overrides b/src/theme/site/elements/divider.overrides new file mode 100644 index 0000000..2690ca2 --- /dev/null +++ b/src/theme/site/elements/divider.overrides @@ -0,0 +1,18 @@ +/******************************* + Theme Overrides +*******************************/ + + +.ui.horizontal.divider:before, +.ui.horizontal.divider:after { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC'); +} + +@media only screen and (max-width : (@tabletBreakpoint - 1px)) { + .ui.stackable.grid .ui.vertical.divider:before, + .ui.grid .stackable.row .ui.vertical.divider:before, + .ui.stackable.grid .ui.vertical.divider:after, + .ui.grid .stackable.row .ui.vertical.divider:after { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC'); + } +} \ No newline at end of file diff --git a/src/theme/site/elements/divider.variables b/src/theme/site/elements/divider.variables new file mode 100644 index 0000000..ca61775 --- /dev/null +++ b/src/theme/site/elements/divider.variables @@ -0,0 +1,53 @@ +/******************************* + Divider +*******************************/ + +/*------------------- + Element +--------------------*/ + +@margin: 1rem 0rem; + +@highlightWidth: 1px; +@highlightColor: @whiteBorderColor; + +@shadowWidth: 1px; +@shadowColor: @borderColor; + +/* Text */ +@letterSpacing: 0.05em; +@fontWeight: @bold; +@color: @darkTextColor; +@textTransform: uppercase; + +/*------------------- + Coupling +--------------------*/ + +/* Icon */ +@dividerIconSize: 1rem; +@dividerIconMargin: 0rem; + + +/******************************* + Variations +*******************************/ + +/* Horizontal / Vertical */ +@horizontalMargin: ''; +@horizontalDividerMargin: 1em; +@horizontalRulerOffset: ~"calc(-50% - "(@horizontalDividerMargin)~")"; + +@verticalDividerMargin: 1rem; +@verticalDividerHeight: ~"calc(100% - "(@verticalDividerMargin)~")"; + +/* Inverted */ +@invertedTextColor: @white; +@invertedHighlightColor: rgba(255, 255, 255, 0.15); +@invertedShadowColor: @borderColor; + +/* Section */ +@sectionMargin: 2rem; + +/* Sizes */ +@medium: 1rem; diff --git a/src/theme/site/elements/flag.overrides b/src/theme/site/elements/flag.overrides new file mode 100644 index 0000000..6a0f921 --- /dev/null +++ b/src/theme/site/elements/flag.overrides @@ -0,0 +1,991 @@ +/* Flag Sprite Based On http://www.famfamfam.com/lab/icons/flags/ */ + +/******************************* + Theme Overrides +*******************************/ + +i.flag.ad:before, +i.flag.andorra:before { + background-position: 0px 0px; +} +i.flag.ae:before, +i.flag.united.arab.emirates:before, +i.flag.uae:before { + background-position: 0px -26px; +} +i.flag.af:before, +i.flag.afghanistan:before { + background-position: 0px -52px; +} +i.flag.ag:before, +i.flag.antigua:before { + background-position: 0px -78px; +} +i.flag.ai:before, +i.flag.anguilla:before { + background-position: 0px -104px; +} +i.flag.al:before, +i.flag.albania:before { + background-position: 0px -130px; +} +i.flag.am:before, +i.flag.armenia:before { + background-position: 0px -156px; +} +i.flag.an:before, +i.flag.netherlands.antilles:before { + background-position: 0px -182px; +} +i.flag.ao:before, +i.flag.angola:before { + background-position: 0px -208px; +} +i.flag.ar:before, +i.flag.argentina:before { + background-position: 0px -234px; +} +i.flag.as:before, +i.flag.american.samoa:before { + background-position: 0px -260px; +} +i.flag.at:before, +i.flag.austria:before { + background-position: 0px -286px; +} +i.flag.au:before, +i.flag.australia:before { + background-position: 0px -312px; +} +i.flag.aw:before, +i.flag.aruba:before { + background-position: 0px -338px; +} +i.flag.ax:before, +i.flag.aland.islands:before { + background-position: 0px -364px; +} +i.flag.az:before, +i.flag.azerbaijan:before { + background-position: 0px -390px; +} +i.flag.ba:before, +i.flag.bosnia:before { + background-position: 0px -416px; +} +i.flag.bb:before, +i.flag.barbados:before { + background-position: 0px -442px; +} +i.flag.bd:before, +i.flag.bangladesh:before { + background-position: 0px -468px; +} +i.flag.be:before, +i.flag.belgium:before { + background-position: 0px -494px; +} +i.flag.bf:before, +i.flag.burkina.faso:before { + background-position: 0px -520px; +} +i.flag.bg:before, +i.flag.bulgaria:before { + background-position: 0px -546px; +} +i.flag.bh:before, +i.flag.bahrain:before { + background-position: 0px -572px; +} +i.flag.bi:before, +i.flag.burundi:before { + background-position: 0px -598px; +} +i.flag.bj:before, +i.flag.benin:before { + background-position: 0px -624px; +} +i.flag.bm:before, +i.flag.bermuda:before { + background-position: 0px -650px; +} +i.flag.bn:before, +i.flag.brunei:before { + background-position: 0px -676px; +} +i.flag.bo:before, +i.flag.bolivia:before { + background-position: 0px -702px; +} +i.flag.br:before, +i.flag.brazil:before { + background-position: 0px -728px; +} +i.flag.bs:before, +i.flag.bahamas:before { + background-position: 0px -754px; +} +i.flag.bt:before, +i.flag.bhutan:before { + background-position: 0px -780px; +} +i.flag.bv:before, +i.flag.bouvet.island:before { + background-position: 0px -806px; +} +i.flag.bw:before, +i.flag.botswana:before { + background-position: 0px -832px; +} +i.flag.by:before, +i.flag.belarus:before { + background-position: 0px -858px; +} +i.flag.bz:before, +i.flag.belize:before { + background-position: 0px -884px; +} +i.flag.ca:before, +i.flag.canada:before { + background-position: 0px -910px; +} +i.flag.cc:before, +i.flag.cocos.islands:before { + background-position: 0px -962px; +} +i.flag.cd:before, +i.flag.congo:before { + background-position: 0px -988px; +} +i.flag.cf:before, +i.flag.central.african.republic:before { + background-position: 0px -1014px; +} +i.flag.cg:before, +i.flag.congo.brazzaville:before { + background-position: 0px -1040px; +} +i.flag.ch:before, +i.flag.switzerland:before { + background-position: 0px -1066px; +} +i.flag.ci:before, +i.flag.cote.divoire:before { + background-position: 0px -1092px; +} +i.flag.ck:before, +i.flag.cook.islands:before { + background-position: 0px -1118px; +} +i.flag.cl:before, +i.flag.chile:before { + background-position: 0px -1144px; +} +i.flag.cm:before, +i.flag.cameroon:before { + background-position: 0px -1170px; +} +i.flag.cn:before, +i.flag.china:before { + background-position: 0px -1196px; +} +i.flag.co:before, +i.flag.colombia:before { + background-position: 0px -1222px; +} +i.flag.cr:before, +i.flag.costa.rica:before { + background-position: 0px -1248px; +} +i.flag.cs:before, +i.flag.serbia:before { + background-position: 0px -1274px; +} +i.flag.cu:before, +i.flag.cuba:before { + background-position: 0px -1300px; +} +i.flag.cv:before, +i.flag.cape.verde:before { + background-position: 0px -1326px; +} +i.flag.cx:before, +i.flag.christmas.island:before { + background-position: 0px -1352px; +} +i.flag.cy:before, +i.flag.cyprus:before { + background-position: 0px -1378px; +} +i.flag.cz:before, +i.flag.czech.republic:before { + background-position: 0px -1404px; +} +i.flag.de:before, +i.flag.germany:before { + background-position: 0px -1430px; +} +i.flag.dj:before, +i.flag.djibouti:before { + background-position: 0px -1456px; +} +i.flag.dk:before, +i.flag.denmark:before { + background-position: 0px -1482px; +} +i.flag.dm:before, +i.flag.dominica:before { + background-position: 0px -1508px; +} +i.flag.do:before, +i.flag.dominican.republic:before { + background-position: 0px -1534px; +} +i.flag.dz:before, +i.flag.algeria:before { + background-position: 0px -1560px; +} +i.flag.ec:before, +i.flag.ecuador:before { + background-position: 0px -1586px; +} +i.flag.ee:before, +i.flag.estonia:before { + background-position: 0px -1612px; +} +i.flag.eg:before, +i.flag.egypt:before { + background-position: 0px -1638px; +} +i.flag.eh:before, +i.flag.western.sahara:before { + background-position: 0px -1664px; +} +i.flag.gb.eng:before, +i.flag.england:before { + background-position: 0px -1690px; +} +i.flag.er:before, +i.flag.eritrea:before { + background-position: 0px -1716px; +} +i.flag.es:before, +i.flag.spain:before { + background-position: 0px -1742px; +} +i.flag.et:before, +i.flag.ethiopia:before { + background-position: 0px -1768px; +} +i.flag.eu:before, +i.flag.european.union:before { + background-position: 0px -1794px; +} +i.flag.fi:before, +i.flag.finland:before { + background-position: 0px -1846px; +} +i.flag.fj:before, +i.flag.fiji:before { + background-position: 0px -1872px; +} +i.flag.fk:before, +i.flag.falkland.islands:before { + background-position: 0px -1898px; +} +i.flag.fm:before, +i.flag.micronesia:before { + background-position: 0px -1924px; +} +i.flag.fo:before, +i.flag.faroe.islands:before { + background-position: 0px -1950px; +} +i.flag.fr:before, +i.flag.france:before { + background-position: 0px -1976px; +} +i.flag.ga:before, +i.flag.gabon:before { + background-position: -36px 0px; +} +i.flag.gb:before, +i.flag.uk:before, +i.flag.united.kingdom:before { + background-position: -36px -26px; +} +i.flag.gd:before, +i.flag.grenada:before { + background-position: -36px -52px; +} +i.flag.ge:before, +i.flag.georgia:before { + background-position: -36px -78px; +} +i.flag.gf:before, +i.flag.french.guiana:before { + background-position: -36px -104px; +} +i.flag.gh:before, +i.flag.ghana:before { + background-position: -36px -130px; +} +i.flag.gi:before, +i.flag.gibraltar:before { + background-position: -36px -156px; +} +i.flag.gl:before, +i.flag.greenland:before { + background-position: -36px -182px; +} +i.flag.gm:before, +i.flag.gambia:before { + background-position: -36px -208px; +} +i.flag.gn:before, +i.flag.guinea:before { + background-position: -36px -234px; +} +i.flag.gp:before, +i.flag.guadeloupe:before { + background-position: -36px -260px; +} +i.flag.gq:before, +i.flag.equatorial.guinea:before { + background-position: -36px -286px; +} +i.flag.gr:before, +i.flag.greece:before { + background-position: -36px -312px; +} +i.flag.gs:before, +i.flag.sandwich.islands:before { + background-position: -36px -338px; +} +i.flag.gt:before, +i.flag.guatemala:before { + background-position: -36px -364px; +} +i.flag.gu:before, +i.flag.guam:before { + background-position: -36px -390px; +} +i.flag.gw:before, +i.flag.guinea-bissau:before { + background-position: -36px -416px; +} +i.flag.gy:before, +i.flag.guyana:before { + background-position: -36px -442px; +} +i.flag.hk:before, +i.flag.hong.kong:before { + background-position: -36px -468px; +} +i.flag.hm:before, +i.flag.heard.island:before { + background-position: -36px -494px; +} +i.flag.hn:before, +i.flag.honduras:before { + background-position: -36px -520px; +} +i.flag.hr:before, +i.flag.croatia:before { + background-position: -36px -546px; +} +i.flag.ht:before, +i.flag.haiti:before { + background-position: -36px -572px; +} +i.flag.hu:before, +i.flag.hungary:before { + background-position: -36px -598px; +} +i.flag.id:before, +i.flag.indonesia:before { + background-position: -36px -624px; +} +i.flag.ie:before, +i.flag.ireland:before { + background-position: -36px -650px; +} +i.flag.il:before, +i.flag.israel:before { + background-position: -36px -676px; +} +i.flag.in:before, +i.flag.india:before { + background-position: -36px -702px; +} +i.flag.io:before, +i.flag.indian.ocean.territory:before { + background-position: -36px -728px; +} +i.flag.iq:before, +i.flag.iraq:before { + background-position: -36px -754px; +} +i.flag.ir:before, +i.flag.iran:before { + background-position: -36px -780px; +} +i.flag.is:before, +i.flag.iceland:before { + background-position: -36px -806px; +} +i.flag.it:before, +i.flag.italy:before { + background-position: -36px -832px; +} +i.flag.jm:before, +i.flag.jamaica:before { + background-position: -36px -858px; +} +i.flag.jo:before, +i.flag.jordan:before { + background-position: -36px -884px; +} +i.flag.jp:before, +i.flag.japan:before { + background-position: -36px -910px; +} +i.flag.ke:before, +i.flag.kenya:before { + background-position: -36px -936px; +} +i.flag.kg:before, +i.flag.kyrgyzstan:before { + background-position: -36px -962px; +} +i.flag.kh:before, +i.flag.cambodia:before { + background-position: -36px -988px; +} +i.flag.ki:before, +i.flag.kiribati:before { + background-position: -36px -1014px; +} +i.flag.km:before, +i.flag.comoros:before { + background-position: -36px -1040px; +} +i.flag.kn:before, +i.flag.saint.kitts.and.nevis:before { + background-position: -36px -1066px; +} +i.flag.kp:before, +i.flag.north.korea:before { + background-position: -36px -1092px; +} +i.flag.kr:before, +i.flag.south.korea:before { + background-position: -36px -1118px; +} +i.flag.kw:before, +i.flag.kuwait:before { + background-position: -36px -1144px; +} +i.flag.ky:before, +i.flag.cayman.islands:before { + background-position: -36px -1170px; +} +i.flag.kz:before, +i.flag.kazakhstan:before { + background-position: -36px -1196px; +} +i.flag.la:before, +i.flag.laos:before { + background-position: -36px -1222px; +} +i.flag.lb:before, +i.flag.lebanon:before { + background-position: -36px -1248px; +} +i.flag.lc:before, +i.flag.saint.lucia:before { + background-position: -36px -1274px; +} +i.flag.li:before, +i.flag.liechtenstein:before { + background-position: -36px -1300px; +} +i.flag.lk:before, +i.flag.sri.lanka:before { + background-position: -36px -1326px; +} +i.flag.lr:before, +i.flag.liberia:before { + background-position: -36px -1352px; +} +i.flag.ls:before, +i.flag.lesotho:before { + background-position: -36px -1378px; +} +i.flag.lt:before, +i.flag.lithuania:before { + background-position: -36px -1404px; +} +i.flag.lu:before, +i.flag.luxembourg:before { + background-position: -36px -1430px; +} +i.flag.lv:before, +i.flag.latvia:before { + background-position: -36px -1456px; +} +i.flag.ly:before, +i.flag.libya:before { + background-position: -36px -1482px; +} +i.flag.ma:before, +i.flag.morocco:before { + background-position: -36px -1508px; +} +i.flag.mc:before, +i.flag.monaco:before { + background-position: -36px -1534px; +} +i.flag.md:before, +i.flag.moldova:before { + background-position: -36px -1560px; +} +i.flag.me:before, +i.flag.montenegro:before { + background-position: -36px -1586px; +} +i.flag.mg:before, +i.flag.madagascar:before { + background-position: -36px -1613px; +} +i.flag.mh:before, +i.flag.marshall.islands:before { + background-position: -36px -1639px; +} +i.flag.mk:before, +i.flag.macedonia:before { + background-position: -36px -1665px; +} +i.flag.ml:before, +i.flag.mali:before { + background-position: -36px -1691px; +} +i.flag.mm:before, +i.flag.myanmar:before, +i.flag.burma:before { + background-position: -73px -1821px; +} +i.flag.mn:before, +i.flag.mongolia:before { + background-position: -36px -1743px; +} +i.flag.mo:before, +i.flag.macau:before { + background-position: -36px -1769px; +} +i.flag.mp:before, +i.flag.northern.mariana.islands:before { + background-position: -36px -1795px; +} +i.flag.mq:before, +i.flag.martinique:before { + background-position: -36px -1821px; +} +i.flag.mr:before, +i.flag.mauritania:before { + background-position: -36px -1847px; +} +i.flag.ms:before, +i.flag.montserrat:before { + background-position: -36px -1873px; +} +i.flag.mt:before, +i.flag.malta:before { + background-position: -36px -1899px; +} +i.flag.mu:before, +i.flag.mauritius:before { + background-position: -36px -1925px; +} +i.flag.mv:before, +i.flag.maldives:before { + background-position: -36px -1951px; +} +i.flag.mw:before, +i.flag.malawi:before { + background-position: -36px -1977px; +} +i.flag.mx:before, +i.flag.mexico:before { + background-position: -72px 0px; +} +i.flag.my:before, +i.flag.malaysia:before { + background-position: -72px -26px; +} +i.flag.mz:before, +i.flag.mozambique:before { + background-position: -72px -52px; +} +i.flag.na:before, +i.flag.namibia:before { + background-position: -72px -78px; +} +i.flag.nc:before, +i.flag.new.caledonia:before { + background-position: -72px -104px; +} +i.flag.ne:before, +i.flag.niger:before { + background-position: -72px -130px; +} +i.flag.nf:before, +i.flag.norfolk.island:before { + background-position: -72px -156px; +} +i.flag.ng:before, +i.flag.nigeria:before { + background-position: -72px -182px; +} +i.flag.ni:before, +i.flag.nicaragua:before { + background-position: -72px -208px; +} +i.flag.nl:before, +i.flag.netherlands:before { + background-position: -72px -234px; +} +i.flag.no:before, +i.flag.norway:before { + background-position: -72px -260px; +} +i.flag.np:before, +i.flag.nepal:before { + background-position: -72px -286px; +} +i.flag.nr:before, +i.flag.nauru:before { + background-position: -72px -312px; +} +i.flag.nu:before, +i.flag.niue:before { + background-position: -72px -338px; +} +i.flag.nz:before, +i.flag.new.zealand:before { + background-position: -72px -364px; +} +i.flag.om:before, +i.flag.oman:before { + background-position: -72px -390px; +} +i.flag.pa:before, +i.flag.panama:before { + background-position: -72px -416px; +} +i.flag.pe:before, +i.flag.peru:before { + background-position: -72px -442px; +} +i.flag.pf:before, +i.flag.french.polynesia:before { + background-position: -72px -468px; +} +i.flag.pg:before, +i.flag.new.guinea:before { + background-position: -72px -494px; +} +i.flag.ph:before, +i.flag.philippines:before { + background-position: -72px -520px; +} +i.flag.pk:before, +i.flag.pakistan:before { + background-position: -72px -546px; +} +i.flag.pl:before, +i.flag.poland:before { + background-position: -72px -572px; +} +i.flag.pm:before, +i.flag.saint.pierre:before { + background-position: -72px -598px; +} +i.flag.pn:before, +i.flag.pitcairn.islands:before { + background-position: -72px -624px; +} +i.flag.pr:before, +i.flag.puerto.rico:before { + background-position: -72px -650px; +} +i.flag.ps:before, +i.flag.palestine:before { + background-position: -72px -676px; +} +i.flag.pt:before, +i.flag.portugal:before { + background-position: -72px -702px; +} +i.flag.pw:before, +i.flag.palau:before { + background-position: -72px -728px; +} +i.flag.py:before, +i.flag.paraguay:before { + background-position: -72px -754px; +} +i.flag.qa:before, +i.flag.qatar:before { + background-position: -72px -780px; +} +i.flag.re:before, +i.flag.reunion:before { + background-position: -72px -806px; +} +i.flag.ro:before, +i.flag.romania:before { + background-position: -72px -832px; +} +i.flag.rs:before, +i.flag.serbia:before { + background-position: -72px -858px; +} +i.flag.ru:before, +i.flag.russia:before { + background-position: -72px -884px; +} +i.flag.rw:before, +i.flag.rwanda:before { + background-position: -72px -910px; +} +i.flag.sa:before, +i.flag.saudi.arabia:before { + background-position: -72px -936px; +} +i.flag.sb:before, +i.flag.solomon.islands:before { + background-position: -72px -962px; +} +i.flag.sc:before, +i.flag.seychelles:before { + background-position: -72px -988px; +} +i.flag.gb.sct:before, +i.flag.scotland:before { + background-position: -72px -1014px; +} +i.flag.sd:before, +i.flag.sudan:before { + background-position: -72px -1040px; +} +i.flag.se:before, +i.flag.sweden:before { + background-position: -72px -1066px; +} +i.flag.sg:before, +i.flag.singapore:before { + background-position: -72px -1092px; +} +i.flag.sh:before, +i.flag.saint.helena:before { + background-position: -72px -1118px; +} +i.flag.si:before, +i.flag.slovenia:before { + background-position: -72px -1144px; +} +i.flag.sj:before, +i.flag.svalbard:before, +i.flag.jan.mayen:before { + background-position: -72px -1170px; +} +i.flag.sk:before, +i.flag.slovakia:before { + background-position: -72px -1196px; +} +i.flag.sl:before, +i.flag.sierra.leone:before { + background-position: -72px -1222px; +} +i.flag.sm:before, +i.flag.san.marino:before { + background-position: -72px -1248px; +} +i.flag.sn:before, +i.flag.senegal:before { + background-position: -72px -1274px; +} +i.flag.so:before, +i.flag.somalia:before { + background-position: -72px -1300px; +} +i.flag.sr:before, +i.flag.suriname:before { + background-position: -72px -1326px; +} +i.flag.st:before, +i.flag.sao.tome:before { + background-position: -72px -1352px; +} +i.flag.sv:before, +i.flag.el.salvador:before { + background-position: -72px -1378px; +} +i.flag.sy:before, +i.flag.syria:before { + background-position: -72px -1404px; +} +i.flag.sz:before, +i.flag.swaziland:before { + background-position: -72px -1430px; +} +i.flag.tc:before, +i.flag.caicos.islands:before { + background-position: -72px -1456px; +} +i.flag.td:before, +i.flag.chad:before { + background-position: -72px -1482px; +} +i.flag.tf:before, +i.flag.french.territories:before { + background-position: -72px -1508px; +} +i.flag.tg:before, +i.flag.togo:before { + background-position: -72px -1534px; +} +i.flag.th:before, +i.flag.thailand:before { + background-position: -72px -1560px; +} +i.flag.tj:before, +i.flag.tajikistan:before { + background-position: -72px -1586px; +} +i.flag.tk:before, +i.flag.tokelau:before { + background-position: -72px -1612px; +} +i.flag.tl:before, +i.flag.timorleste:before { + background-position: -72px -1638px; +} +i.flag.tm:before, +i.flag.turkmenistan:before { + background-position: -72px -1664px; +} +i.flag.tn:before, +i.flag.tunisia:before { + background-position: -72px -1690px; +} +i.flag.to:before, +i.flag.tonga:before { + background-position: -72px -1716px; +} +i.flag.tr:before, +i.flag.turkey:before { + background-position: -72px -1742px; +} +i.flag.tt:before, +i.flag.trinidad:before { + background-position: -72px -1768px; +} +i.flag.tv:before, +i.flag.tuvalu:before { + background-position: -72px -1794px; +} +i.flag.tw:before, +i.flag.taiwan:before { + background-position: -72px -1820px; +} +i.flag.tz:before, +i.flag.tanzania:before { + background-position: -72px -1846px; +} +i.flag.ua:before, +i.flag.ukraine:before { + background-position: -72px -1872px; +} +i.flag.ug:before, +i.flag.uganda:before { + background-position: -72px -1898px; +} +i.flag.um:before, +i.flag.us.minor.islands:before { + background-position: -72px -1924px; +} +i.flag.us:before, +i.flag.america:before, +i.flag.united.states:before { + background-position: -72px -1950px; +} +i.flag.uy:before, +i.flag.uruguay:before { + background-position: -72px -1976px; +} +i.flag.uz:before, +i.flag.uzbekistan:before { + background-position: -108px 0px; +} +i.flag.va:before, +i.flag.vatican.city:before { + background-position: -108px -26px; +} +i.flag.vc:before, +i.flag.saint.vincent:before { + background-position: -108px -52px; +} +i.flag.ve:before, +i.flag.venezuela:before { + background-position: -108px -78px; +} +i.flag.vg:before, +i.flag.british.virgin.islands:before { + background-position: -108px -104px; +} +i.flag.vi:before, +i.flag.us.virgin.islands:before { + background-position: -108px -130px; +} +i.flag.vn:before, +i.flag.vietnam:before { + background-position: -108px -156px; +} +i.flag.vu:before, +i.flag.vanuatu:before { + background-position: -108px -182px; +} +i.flag.gb.wls:before, +i.flag.wales:before { + background-position: -108px -208px; +} +i.flag.wf:before, +i.flag.wallis.and.futuna:before { + background-position: -108px -234px; +} +i.flag.ws:before, +i.flag.samoa:before { + background-position: -108px -260px; +} +i.flag.ye:before, +i.flag.yemen:before { + background-position: -108px -286px; +} +i.flag.yt:before, +i.flag.mayotte:before { + background-position: -108px -312px; +} +i.flag.za:before, +i.flag.south.africa:before { + background-position: -108px -338px; +} +i.flag.zm:before, +i.flag.zambia:before { + background-position: -108px -364px; +} +i.flag.zw:before, +i.flag.zimbabwe:before { + background-position: -108px -390px; +} diff --git a/src/theme/site/elements/flag.variables b/src/theme/site/elements/flag.variables new file mode 100644 index 0000000..cf0884c --- /dev/null +++ b/src/theme/site/elements/flag.variables @@ -0,0 +1,13 @@ +/******************************* + Flag +*******************************/ + +/*------------------- + Element +--------------------*/ + +@spritePath: "@{imagePath}/flags.png"; +@width: 16px; +@height: 11px; +@verticalAlign: baseline; +@margin: 0.5em; \ No newline at end of file diff --git a/src/theme/site/elements/header.overrides b/src/theme/site/elements/header.overrides new file mode 100644 index 0000000..0e06821 --- /dev/null +++ b/src/theme/site/elements/header.overrides @@ -0,0 +1,4 @@ +/******************************* + Theme Overrides +*******************************/ + diff --git a/src/theme/site/elements/header.variables b/src/theme/site/elements/header.variables new file mode 100644 index 0000000..885715b --- /dev/null +++ b/src/theme/site/elements/header.variables @@ -0,0 +1,151 @@ +/******************************* + Header +*******************************/ + +/*------------------- + Element +--------------------*/ + +@textTransform: none; +@fontFamily: @headerFont; +@fontWeight: @headerFontWeight; +@lineHeight: @headerLineHeight; +@lineHeightOffset: @headerLineHeightOffset; + +@topMargin: @headerTopMargin; +@bottomMargin: @headerBottomMargin; +@margin: @topMargin 0em @bottomMargin; + +@firstMargin: -@lineHeightOffset; +@lastMargin: 0em; +@horizontalPadding: 0em; +@verticalPadding: 0em; + +/* Sub Heading */ +@subHeadingDistance: @2px; +@subHeadingFontSize: @relativeTiny; +@subHeadingFontWeight: @bold; +@subHeadingTextTransform: uppercase; +@subHeadingColor: ''; + +@smallSubHeadingSize: @relativeMini; +@largeSubHeadingSize: @relativeSmall; +@hugeSubHeadingSize: @relativeMedium; + +/* Sub Header */ +@subHeaderMargin: 0em; +@subHeaderLineHeight: 1.2em; +@subHeaderColor: @mutedTextColor; + +/* Icon */ +@iconOpacity: 1; +@iconSize: 1.5em; +@iconOffset: 0em; +@iconMargin: 0.75rem; +@iconAlignment: middle; + +/* Image */ +@imageWidth: 2.5em; +@imageHeight: auto; +@imageOffset: @lineHeightOffset; +@imageMargin: @iconMargin; +@imageAlignment: middle; + +/* Label */ +@labelSize: ''; +@labelDistance: 0.5rem; +@labelVerticalAlign: middle; + +/* Content */ +@contentAlignment: top; +@contentIconAlignment: middle; +@contentImageAlignment: middle; + +/* Paragraph after Header */ +@nextParagraphDistance: 0em; + +/*------------------- + Variations +--------------------*/ + +/* Sizing */ +@hugeFontSize : unit(@h1, em); +@largeFontSize : unit(@h2, em); +@mediumFontSize : unit(@h3, em); +@smallFontSize : unit(@h4, em); +@tinyFontSize : unit(@h5, em); + +/* Sub Header */ +@h1SubHeaderFontSize: @large; +@h2SubHeaderFontSize: @large; +@h3SubHeaderFontSize: @medium; +@h4SubHeaderFontSize: @medium; +@h5SubHeaderFontSize: @small; + +@hugeSubHeaderFontSize : @h1SubHeaderFontSize; +@largeSubHeaderFontSize : @h2SubHeaderFontSize; +@subHeaderFontSize : @h3SubHeaderFontSize; +@smallSubHeaderFontSize : @h4SubHeaderFontSize; +@tinySubHeaderFontSize : @h5SubHeaderFontSize; + +/* Icon Header */ +@iconHeaderSize: 3em; +@iconHeaderOpacity: 1; +@iconHeaderMargin: 0.5rem; +@circularHeaderIconSize: 2em; +@squareHeaderIconSize: 2em; + +/* No Line Height Offset */ +@iconHeaderTopMargin: 2rem; +@iconHeaderBottomMargin: @bottomMargin; +@iconHeaderFirstMargin: 0em; + +/* Divided */ +@dividedBorderWidth: 1px; +@dividedBorder: @dividedBorderWidth solid @borderColor; +@dividedColoredBorderWidth: 2px; + +@dividedBorderPadding: @3px; +@dividedSubHeaderPadding: @3px; +@dividedIconPadding: 0em; + +/* Block */ +@blockBackground: @darkWhite; +@blockBoxShadow: none; +@blockBorderWidth: 1px; +@blockBorder: @blockBorderWidth solid @solidBorderColor; +@blockHorizontalPadding: @medium; +@blockVerticalPadding: @mini; +@blockBorderRadius: @defaultBorderRadius; + +@tinyBlock: @tiny; +@smallBlock: @small; +@mediumBlock: @medium; +@largeBlock: @large; +@hugeBlock: @huge; + +/* Attached */ +@attachedOffset: -1px; +@attachedBoxShadow: none; +@attachedBorder: 1px solid @solidBorderColor; +@attachedVerticalPadding: @blockVerticalPadding; +@attachedHorizontalPadding: @blockHorizontalPadding; +@attachedBackground: @white; +@attachedBorderRadius: @blockBorderRadius; + +@tinyAttachedSize: @relativeTiny; +@smallAttachedSize: @relativeSmall; +@mediumAttachedSize: @relativeMedium; +@largeAttachedSize: @relativeLarge; +@bigAttachedSize: @relativeBig; +@hugeAttachedSize: @relativeHuge; + +/* Inverted */ +@invertedColor: @white; +@invertedSubHeaderColor: @invertedMutedTextColor; +@invertedDividedBorderColor: @whiteBorderColor; +@invertedBlockBackground: @lightBlack @subtleGradient; +@invertedAttachedBackground: @invertedBlockBackground; + +/* Floated */ +@floatedMargin: 0.5em; diff --git a/src/theme/site/elements/icon.overrides b/src/theme/site/elements/icon.overrides new file mode 100644 index 0000000..2befad7 --- /dev/null +++ b/src/theme/site/elements/icon.overrides @@ -0,0 +1,1716 @@ +/* + * Font Awesome 5.0.8 by @fontawesome - http://fontawesome.io - @fontawesome + * License - https://fontawesome.com/license (Icons: CC BY 4.0 License, Fonts: SIL OFL 1.1 License, CSS: MIT License) + */ + +/******************************* + +Semantic-UI integration of font-awesome : + +///class names are separated +i.icon.circle => i.icon.circle +i.icon.circle-o => i.icon.circle.outline + +//abbreviation are replaced by full letters: +i.icon.ellipsis-h => i.icon.ellipsis.horizontal +i.icon.ellipsis-v => i.icon.ellipsis.vertical +.alpha => .i.icon.alphabet +.asc => .i.icon.ascending +.desc => .i.icon.descending +.alt =>.alternate + +ASCII order is conserved for easier maintenance. + +Icons that only have one style 'outline', 'square' etc do not require this class +for instance `lemon icon` not `lemon outline icon` since there is only one lemon + +*******************************/ + + +/******************************* + Icons +*******************************/ + +/* Deprecated *In/Out Naming Conflict) */ +i.icon.linkedin.in:before { content: "\f0e1"; } +i.icon.zoom.in:before { content: "\f00e"; } +i.icon.zoom.out:before { content: "\f010"; } +i.icon.sign.in:before { content: "\f2f6"; } +i.icon.in.cart:before { content: "\f218"; } +i.icon.log.out:before { content: "\f2f5"; } +i.icon.sign.out:before { content: "\f2f5"; } + +/* Icons */ +i.icon.\35 00px:before { content: "\f26e"; } +i.icon.accessible.icon:before { content: "\f368"; } +i.icon.accusoft:before { content: "\f369"; } +i.icon.address.book:before { content: "\f2b9"; } +i.icon.address.card:before { content: "\f2bb"; } +i.icon.adjust:before { content: "\f042"; } +i.icon.adn:before { content: "\f170"; } +i.icon.adversal:before { content: "\f36a"; } +i.icon.affiliatetheme:before { content: "\f36b"; } +i.icon.algolia:before { content: "\f36c"; } +i.icon.align.center:before { content: "\f037"; } +i.icon.align.justify:before { content: "\f039"; } +i.icon.align.left:before { content: "\f036"; } +i.icon.align.right:before { content: "\f038"; } +i.icon.amazon:before { content: "\f270"; } +i.icon.amazon.pay:before { content: "\f42c"; } +i.icon.ambulance:before { content: "\f0f9"; } +i.icon.american.sign.language.interpreting:before { content: "\f2a3"; } +i.icon.amilia:before { content: "\f36d"; } +i.icon.anchor:before { content: "\f13d"; } +i.icon.android:before { content: "\f17b"; } +i.icon.angellist:before { content: "\f209"; } +i.icon.angle.double.down:before { content: "\f103"; } +i.icon.angle.double.left:before { content: "\f100"; } +i.icon.angle.double.right:before { content: "\f101"; } +i.icon.angle.double.up:before { content: "\f102"; } +i.icon.angle.down:before { content: "\f107"; } +i.icon.angle.left:before { content: "\f104"; } +i.icon.angle.right:before { content: "\f105"; } +i.icon.angle.up:before { content: "\f106"; } +i.icon.angrycreative:before { content: "\f36e"; } +i.icon.angular:before { content: "\f420"; } +i.icon.app.store:before { content: "\f36f"; } +i.icon.app.store.ios:before { content: "\f370"; } +i.icon.apper:before { content: "\f371"; } +i.icon.apple:before { content: "\f179"; } +i.icon.apple.pay:before { content: "\f415"; } +i.icon.archive:before { content: "\f187"; } +i.icon.arrow.alternate.circle.down:before { content: "\f358"; } +i.icon.arrow.alternate.circle.left:before { content: "\f359"; } +i.icon.arrow.alternate.circle.right:before { content: "\f35a"; } +i.icon.arrow.alternate.circle.up:before { content: "\f35b"; } +i.icon.arrow.circle.down:before { content: "\f0ab"; } +i.icon.arrow.circle.left:before { content: "\f0a8"; } +i.icon.arrow.circle.right:before { content: "\f0a9"; } +i.icon.arrow.circle.up:before { content: "\f0aa"; } +i.icon.arrow.down:before { content: "\f063"; } +i.icon.arrow.left:before { content: "\f060"; } +i.icon.arrow.right:before { content: "\f061"; } +i.icon.arrow.up:before { content: "\f062"; } +i.icon.arrows.alternate:before { content: "\f0b2"; } +i.icon.arrows.alternate.horizontal:before { content: "\f337"; } +i.icon.arrows.alternate.vertical:before { content: "\f338"; } +i.icon.assistive.listening.systems:before { content: "\f2a2"; } +i.icon.asterisk:before { content: "\f069"; } +i.icon.asymmetrik:before { content: "\f372"; } +i.icon.at:before { content: "\f1fa"; } +i.icon.audible:before { content: "\f373"; } +i.icon.audio.description:before { content: "\f29e"; } +i.icon.autoprefixer:before { content: "\f41c"; } +i.icon.avianex:before { content: "\f374"; } +i.icon.aviato:before { content: "\f421"; } +i.icon.aws:before { content: "\f375"; } +i.icon.backward:before { content: "\f04a"; } +i.icon.balance.scale:before { content: "\f24e"; } +i.icon.ban:before { content: "\f05e"; } +i.icon.band.aid:before { content: "\f462"; } +i.icon.bandcamp:before { content: "\f2d5"; } +i.icon.barcode:before { content: "\f02a"; } +i.icon.bars:before { content: "\f0c9"; } +i.icon.baseball.ball:before { content: "\f433"; } +i.icon.basketball.ball:before { content: "\f434"; } +i.icon.bath:before { content: "\f2cd"; } +i.icon.battery.empty:before { content: "\f244"; } +i.icon.battery.full:before { content: "\f240"; } +i.icon.battery.half:before { content: "\f242"; } +i.icon.battery.quarter:before { content: "\f243"; } +i.icon.battery.three.quarters:before { content: "\f241"; } +i.icon.bed:before { content: "\f236"; } +i.icon.beer:before { content: "\f0fc"; } +i.icon.behance:before { content: "\f1b4"; } +i.icon.behance.square:before { content: "\f1b5"; } +i.icon.bell:before { content: "\f0f3"; } +i.icon.bell.slash:before { content: "\f1f6"; } +i.icon.bicycle:before { content: "\f206"; } +i.icon.bimobject:before { content: "\f378"; } +i.icon.binoculars:before { content: "\f1e5"; } +i.icon.birthday.cake:before { content: "\f1fd"; } +i.icon.bitbucket:before { content: "\f171"; } +i.icon.bitcoin:before { content: "\f379"; } +i.icon.bity:before { content: "\f37a"; } +i.icon.black.tie:before { content: "\f27e"; } +i.icon.blackberry:before { content: "\f37b"; } +i.icon.blind:before { content: "\f29d"; } +i.icon.blogger:before { content: "\f37c"; } +i.icon.blogger.b:before { content: "\f37d"; } +i.icon.bluetooth:before { content: "\f293"; } +i.icon.bluetooth.b:before { content: "\f294"; } +i.icon.bold:before { content: "\f032"; } +i.icon.bolt:before { content: "\f0e7"; } +i.icon.bomb:before { content: "\f1e2"; } +i.icon.book:before { content: "\f02d"; } +i.icon.bookmark:before { content: "\f02e"; } +i.icon.bowling.ball:before { content: "\f436"; } +i.icon.box:before { content: "\f466"; } +i.icon.boxes:before { content: "\f468"; } +i.icon.braille:before { content: "\f2a1"; } +i.icon.briefcase:before { content: "\f0b1"; } +i.icon.btc:before { content: "\f15a"; } +i.icon.bug:before { content: "\f188"; } +i.icon.building:before { content: "\f1ad"; } +i.icon.bullhorn:before { content: "\f0a1"; } +i.icon.bullseye:before { content: "\f140"; } +i.icon.buromobelexperte:before { content: "\f37f"; } +i.icon.bus:before { content: "\f207"; } +i.icon.buysellads:before { content: "\f20d"; } +i.icon.calculator:before { content: "\f1ec"; } +i.icon.calendar:before { content: "\f133"; } +i.icon.calendar.alternate:before { content: "\f073"; } +i.icon.calendar.check:before { content: "\f274"; } +i.icon.calendar.minus:before { content: "\f272"; } +i.icon.calendar.plus:before { content: "\f271"; } +i.icon.calendar.times:before { content: "\f273"; } +i.icon.camera:before { content: "\f030"; } +i.icon.camera.retro:before { content: "\f083"; } +i.icon.car:before { content: "\f1b9"; } +i.icon.caret.down:before { content: "\f0d7"; } +i.icon.caret.left:before { content: "\f0d9"; } +i.icon.caret.right:before { content: "\f0da"; } +i.icon.caret.square.down:before { content: "\f150"; } +i.icon.caret.square.left:before { content: "\f191"; } +i.icon.caret.square.right:before { content: "\f152"; } +i.icon.caret.square.up:before { content: "\f151"; } +i.icon.caret.up:before { content: "\f0d8"; } +i.icon.cart.arrow.down:before { content: "\f218"; } +i.icon.cart.plus:before { content: "\f217"; } +i.icon.cc.amazon.pay:before { content: "\f42d"; } +i.icon.cc.amex:before { content: "\f1f3"; } +i.icon.cc.apple.pay:before { content: "\f416"; } +i.icon.cc.diners.club:before { content: "\f24c"; } +i.icon.cc.discover:before { content: "\f1f2"; } +i.icon.cc.jcb:before { content: "\f24b"; } +i.icon.cc.mastercard:before { content: "\f1f1"; } +i.icon.cc.paypal:before { content: "\f1f4"; } +i.icon.cc.stripe:before { content: "\f1f5"; } +i.icon.cc.visa:before { content: "\f1f0"; } +i.icon.centercode:before { content: "\f380"; } +i.icon.certificate:before { content: "\f0a3"; } +i.icon.chart.area:before { content: "\f1fe"; } +i.icon.chart.bar:before { content: "\f080"; } +i.icon.chart.line:before { content: "\f201"; } +i.icon.chart.pie:before { content: "\f200"; } +i.icon.check:before { content: "\f00c"; } +i.icon.check.circle:before { content: "\f058"; } +i.icon.check.square:before { content: "\f14a"; } +i.icon.chess:before { content: "\f439"; } +i.icon.chess.bishop:before { content: "\f43a"; } +i.icon.chess.board:before { content: "\f43c"; } +i.icon.chess.king:before { content: "\f43f"; } +i.icon.chess.knight:before { content: "\f441"; } +i.icon.chess.pawn:before { content: "\f443"; } +i.icon.chess.queen:before { content: "\f445"; } +i.icon.chess.rook:before { content: "\f447"; } +i.icon.chevron.circle.down:before { content: "\f13a"; } +i.icon.chevron.circle.left:before { content: "\f137"; } +i.icon.chevron.circle.right:before { content: "\f138"; } +i.icon.chevron.circle.up:before { content: "\f139"; } +i.icon.chevron.down:before { content: "\f078"; } +i.icon.chevron.left:before { content: "\f053"; } +i.icon.chevron.right:before { content: "\f054"; } +i.icon.chevron.up:before { content: "\f077"; } +i.icon.child:before { content: "\f1ae"; } +i.icon.chrome:before { content: "\f268"; } +i.icon.circle:before { content: "\f111"; } +i.icon.circle.notch:before { content: "\f1ce"; } +i.icon.clipboard:before { content: "\f328"; } +i.icon.clipboard.check:before { content: "\f46c"; } +i.icon.clipboard.list:before { content: "\f46d"; } +i.icon.clock:before { content: "\f017"; } +i.icon.clone:before { content: "\f24d"; } +i.icon.closed.captioning:before { content: "\f20a"; } +i.icon.cloud:before { content: "\f0c2"; } +i.icon.cloudscale:before { content: "\f383"; } +i.icon.cloudsmith:before { content: "\f384"; } +i.icon.cloudversify:before { content: "\f385"; } +i.icon.code:before { content: "\f121"; } +i.icon.code.branch:before { content: "\f126"; } +i.icon.codepen:before { content: "\f1cb"; } +i.icon.codiepie:before { content: "\f284"; } +i.icon.coffee:before { content: "\f0f4"; } +i.icon.cog:before { content: "\f013"; } +i.icon.cogs:before { content: "\f085"; } +i.icon.columns:before { content: "\f0db"; } +i.icon.comment:before { content: "\f075"; } +i.icon.comment.alternate:before { content: "\f27a"; } +i.icon.comments:before { content: "\f086"; } +i.icon.compass:before { content: "\f14e"; } +i.icon.compress:before { content: "\f066"; } +i.icon.connectdevelop:before { content: "\f20e"; } +i.icon.contao:before { content: "\f26d"; } +i.icon.copy:before { content: "\f0c5"; } +i.icon.copyright:before { content: "\f1f9"; } +i.icon.cpanel:before { content: "\f388"; } +i.icon.creative.commons:before { content: "\f25e"; } +i.icon.credit.card:before { content: "\f09d"; } +i.icon.crop:before { content: "\f125"; } +i.icon.crosshairs:before { content: "\f05b"; } +i.icon.css3:before { content: "\f13c"; } +i.icon.css3.alternate:before { content: "\f38b"; } +i.icon.cube:before { content: "\f1b2"; } +i.icon.cubes:before { content: "\f1b3"; } +i.icon.cut:before { content: "\f0c4"; } +i.icon.cuttlefish:before { content: "\f38c"; } +i.icon.d.and.d:before { content: "\f38d"; } +i.icon.dashcube:before { content: "\f210"; } +i.icon.database:before { content: "\f1c0"; } +i.icon.deaf:before { content: "\f2a4"; } +i.icon.delicious:before { content: "\f1a5"; } +i.icon.deploydog:before { content: "\f38e"; } +i.icon.deskpro:before { content: "\f38f"; } +i.icon.desktop:before { content: "\f108"; } +i.icon.deviantart:before { content: "\f1bd"; } +i.icon.digg:before { content: "\f1a6"; } +i.icon.digital.ocean:before { content: "\f391"; } +i.icon.discord:before { content: "\f392"; } +i.icon.discourse:before { content: "\f393"; } +i.icon.dna:before { content: "\f471"; } +i.icon.dochub:before { content: "\f394"; } +i.icon.docker:before { content: "\f395"; } +i.icon.dollar.sign:before { content: "\f155"; } +i.icon.dolly:before { content: "\f472"; } +i.icon.dolly.flatbed:before { content: "\f474"; } +i.icon.dot.circle:before { content: "\f192"; } +i.icon.download:before { content: "\f019"; } +i.icon.draft2digital:before { content: "\f396"; } +i.icon.dribbble:before { content: "\f17d"; } +i.icon.dribbble.square:before { content: "\f397"; } +i.icon.dropbox:before { content: "\f16b"; } +i.icon.drupal:before { content: "\f1a9"; } +i.icon.dyalog:before { content: "\f399"; } +i.icon.earlybirds:before { content: "\f39a"; } +i.icon.edge:before { content: "\f282"; } +i.icon.edit:before { content: "\f044"; } +i.icon.eject:before { content: "\f052"; } +i.icon.elementor:before { content: "\f430"; } +i.icon.ellipsis.horizontal:before { content: "\f141"; } +i.icon.ellipsis.vertical:before { content: "\f142"; } +i.icon.ember:before { content: "\f423"; } +i.icon.empire:before { content: "\f1d1"; } +i.icon.envelope:before { content: "\f0e0"; } +i.icon.envelope.open:before { content: "\f2b6"; } +i.icon.envelope.square:before { content: "\f199"; } +i.icon.envira:before { content: "\f299"; } +i.icon.eraser:before { content: "\f12d"; } +i.icon.erlang:before { content: "\f39d"; } +i.icon.ethereum:before { content: "\f42e"; } +i.icon.etsy:before { content: "\f2d7"; } +i.icon.euro.sign:before { content: "\f153"; } +i.icon.exchange.alternate:before { content: "\f362"; } +i.icon.exclamation:before { content: "\f12a"; } +i.icon.exclamation.circle:before { content: "\f06a"; } +i.icon.exclamation.triangle:before { content: "\f071"; } +i.icon.expand:before { content: "\f065"; } +i.icon.expand.arrows.alternate:before { content: "\f31e"; } +i.icon.expeditedssl:before { content: "\f23e"; } +i.icon.external.alternate:before { content: "\f35d"; } +i.icon.external.square.alternate:before { content: "\f360"; } +i.icon.eye:before { content: "\f06e"; } +i.icon.eye.dropper:before { content: "\f1fb"; } +i.icon.eye.slash:before { content: "\f070"; } +i.icon.facebook:before { content: "\f09a"; } +i.icon.facebook.f:before { content: "\f39e"; } +i.icon.facebook.messenger:before { content: "\f39f"; } +i.icon.facebook.square:before { content: "\f082"; } +i.icon.fast.backward:before { content: "\f049"; } +i.icon.fast.forward:before { content: "\f050"; } +i.icon.fax:before { content: "\f1ac"; } +i.icon.female:before { content: "\f182"; } +i.icon.fighter.jet:before { content: "\f0fb"; } +i.icon.file:before { content: "\f15b"; } +i.icon.file.alternate:before { content: "\f15c"; } +i.icon.file.archive:before { content: "\f1c6"; } +i.icon.file.audio:before { content: "\f1c7"; } +i.icon.file.code:before { content: "\f1c9"; } +i.icon.file.excel:before { content: "\f1c3"; } +i.icon.file.image:before { content: "\f1c5"; } +i.icon.file.pdf:before { content: "\f1c1"; } +i.icon.file.powerpoint:before { content: "\f1c4"; } +i.icon.file.video:before { content: "\f1c8"; } +i.icon.file.word:before { content: "\f1c2"; } +i.icon.film:before { content: "\f008"; } +i.icon.filter:before { content: "\f0b0"; } +i.icon.fire:before { content: "\f06d"; } +i.icon.fire.extinguisher:before { content: "\f134"; } +i.icon.firefox:before { content: "\f269"; } +i.icon.first.aid:before { content: "\f479"; } +i.icon.first.order:before { content: "\f2b0"; } +i.icon.firstdraft:before { content: "\f3a1"; } +i.icon.flag:before { content: "\f024"; } +i.icon.flag.checkered:before { content: "\f11e"; } +i.icon.flask:before { content: "\f0c3"; } +i.icon.flickr:before { content: "\f16e"; } +i.icon.flipboard:before { content: "\f44d"; } +i.icon.fly:before { content: "\f417"; } +i.icon.folder:before { content: "\f07b"; } +i.icon.folder.open:before { content: "\f07c"; } +i.icon.font:before { content: "\f031"; } +i.icon.font.awesome:before { content: "\f2b4"; } +i.icon.font.awesome.alternate:before { content: "\f35c"; } +i.icon.font.awesome.flag:before { content: "\f425"; } +i.icon.fonticons:before { content: "\f280"; } +i.icon.fonticons.fi:before { content: "\f3a2"; } +i.icon.football.ball:before { content: "\f44e"; } +i.icon.fort.awesome:before { content: "\f286"; } +i.icon.fort.awesome.alternate:before { content: "\f3a3"; } +i.icon.forumbee:before { content: "\f211"; } +i.icon.forward:before { content: "\f04e"; } +i.icon.foursquare:before { content: "\f180"; } +i.icon.free.code.camp:before { content: "\f2c5"; } +i.icon.freebsd:before { content: "\f3a4"; } +i.icon.frown:before { content: "\f119"; } +i.icon.futbol:before { content: "\f1e3"; } +i.icon.gamepad:before { content: "\f11b"; } +i.icon.gavel:before { content: "\f0e3"; } +i.icon.gem:before { content: "\f3a5"; } +i.icon.genderless:before { content: "\f22d"; } +i.icon.get.pocket:before { content: "\f265"; } +i.icon.gg:before { content: "\f260"; } +i.icon.gg.circle:before { content: "\f261"; } +i.icon.gift:before { content: "\f06b"; } +i.icon.git:before { content: "\f1d3"; } +i.icon.git.square:before { content: "\f1d2"; } +i.icon.github:before { content: "\f09b"; } +i.icon.github.alternate:before { content: "\f113"; } +i.icon.github.square:before { content: "\f092"; } +i.icon.gitkraken:before { content: "\f3a6"; } +i.icon.gitlab:before { content: "\f296"; } +i.icon.gitter:before { content: "\f426"; } +i.icon.glass.martini:before { content: "\f000"; } +i.icon.glide:before { content: "\f2a5"; } +i.icon.glide.g:before { content: "\f2a6"; } +i.icon.globe:before { content: "\f0ac"; } +i.icon.gofore:before { content: "\f3a7"; } +i.icon.golf.ball:before { content: "\f450"; } +i.icon.goodreads:before { content: "\f3a8"; } +i.icon.goodreads.g:before { content: "\f3a9"; } +i.icon.google:before { content: "\f1a0"; } +i.icon.google.drive:before { content: "\f3aa"; } +i.icon.google.play:before { content: "\f3ab"; } +i.icon.google.plus:before { content: "\f2b3"; } +i.icon.google.plus.g:before { content: "\f0d5"; } +i.icon.google.plus.square:before { content: "\f0d4"; } +i.icon.google.wallet:before { content: "\f1ee"; } +i.icon.graduation.cap:before { content: "\f19d"; } +i.icon.gratipay:before { content: "\f184"; } +i.icon.grav:before { content: "\f2d6"; } +i.icon.gripfire:before { content: "\f3ac"; } +i.icon.grunt:before { content: "\f3ad"; } +i.icon.gulp:before { content: "\f3ae"; } +i.icon.h.square:before { content: "\f0fd"; } +i.icon.hacker.news:before { content: "\f1d4"; } +i.icon.hacker.news.square:before { content: "\f3af"; } +i.icon.hand.lizard:before { content: "\f258"; } +i.icon.hand.paper:before { content: "\f256"; } +i.icon.hand.peace:before { content: "\f25b"; } +i.icon.hand.point.down:before { content: "\f0a7"; } +i.icon.hand.point.left:before { content: "\f0a5"; } +i.icon.hand.point.right:before { content: "\f0a4"; } +i.icon.hand.point.up:before { content: "\f0a6"; } +i.icon.hand.pointer:before { content: "\f25a"; } +i.icon.hand.rock:before { content: "\f255"; } +i.icon.hand.scissors:before { content: "\f257"; } +i.icon.hand.spock:before { content: "\f259"; } +i.icon.handshake:before { content: "\f2b5"; } +i.icon.hashtag:before { content: "\f292"; } +i.icon.hdd:before { content: "\f0a0"; } +i.icon.heading:before { content: "\f1dc"; } +i.icon.headphones:before { content: "\f025"; } +i.icon.heart:before { content: "\f004"; } +i.icon.heartbeat:before { content: "\f21e"; } +i.icon.hips:before { content: "\f452"; } +i.icon.hire.a.helper:before { content: "\f3b0"; } +i.icon.history:before { content: "\f1da"; } +i.icon.hockey.puck:before { content: "\f453"; } +i.icon.home:before { content: "\f015"; } +i.icon.hooli:before { content: "\f427"; } +i.icon.hospital:before { content: "\f0f8"; } +i.icon.hospital.symbol:before { content: "\f47e"; } +i.icon.hotjar:before { content: "\f3b1"; } +i.icon.hourglass:before { content: "\f254"; } +i.icon.hourglass.end:before { content: "\f253"; } +i.icon.hourglass.half:before { content: "\f252"; } +i.icon.hourglass.start:before { content: "\f251"; } +i.icon.houzz:before { content: "\f27c"; } +i.icon.html5:before { content: "\f13b"; } +i.icon.hubspot:before { content: "\f3b2"; } +i.icon.i.cursor:before { content: "\f246"; } +i.icon.id.badge:before { content: "\f2c1"; } +i.icon.id.card:before { content: "\f2c2"; } +i.icon.image:before { content: "\f03e"; } +i.icon.images:before { content: "\f302"; } +i.icon.imdb:before { content: "\f2d8"; } +i.icon.inbox:before { content: "\f01c"; } +i.icon.indent:before { content: "\f03c"; } +i.icon.industry:before { content: "\f275"; } +i.icon.info:before { content: "\f129"; } +i.icon.info.circle:before { content: "\f05a"; } +i.icon.instagram:before { content: "\f16d"; } +i.icon.internet.explorer:before { content: "\f26b"; } +i.icon.ioxhost:before { content: "\f208"; } +i.icon.italic:before { content: "\f033"; } +i.icon.itunes:before { content: "\f3b4"; } +i.icon.itunes.note:before { content: "\f3b5"; } +i.icon.jenkins:before { content: "\f3b6"; } +i.icon.joget:before { content: "\f3b7"; } +i.icon.joomla:before { content: "\f1aa"; } +i.icon.js:before { content: "\f3b8"; } +i.icon.js.square:before { content: "\f3b9"; } +i.icon.jsfiddle:before { content: "\f1cc"; } +i.icon.key:before { content: "\f084"; } +i.icon.keyboard:before { content: "\f11c"; } +i.icon.keycdn:before { content: "\f3ba"; } +i.icon.kickstarter:before { content: "\f3bb"; } +i.icon.kickstarter.k:before { content: "\f3bc"; } +i.icon.korvue:before { content: "\f42f"; } +i.icon.language:before { content: "\f1ab"; } +i.icon.laptop:before { content: "\f109"; } +i.icon.laravel:before { content: "\f3bd"; } +i.icon.lastfm:before { content: "\f202"; } +i.icon.lastfm.square:before { content: "\f203"; } +i.icon.leaf:before { content: "\f06c"; } +i.icon.leanpub:before { content: "\f212"; } +i.icon.lemon:before { content: "\f094"; } +i.icon.less:before { content: "\f41d"; } +i.icon.level.down.alternate:before { content: "\f3be"; } +i.icon.level.up.alternate:before { content: "\f3bf"; } +i.icon.life.ring:before { content: "\f1cd"; } +i.icon.lightbulb:before { content: "\f0eb"; } +i.icon.linechat:before { content: "\f3c0"; } +i.icon.linkify:before { content: "\f0c1"; } +i.icon.linkedin:before { content: "\f08c"; } +i.icon.linkedin.alt:before { content: "\f0e1"; } +i.icon.linode:before { content: "\f2b8"; } +i.icon.linux:before { content: "\f17c"; } +i.icon.lira.sign:before { content: "\f195"; } +i.icon.list:before { content: "\f03a"; } +i.icon.list.alternate:before { content: "\f022"; } +i.icon.list.ol:before { content: "\f0cb"; } +i.icon.list.ul:before { content: "\f0ca"; } +i.icon.location.arrow:before { content: "\f124"; } +i.icon.lock:before { content: "\f023"; } +i.icon.lock.open:before { content: "\f3c1"; } +i.icon.long.arrow.alternate.down:before { content: "\f309"; } +i.icon.long.arrow.alternate.left:before { content: "\f30a"; } +i.icon.long.arrow.alternate.right:before { content: "\f30b"; } +i.icon.long.arrow.alternate.up:before { content: "\f30c"; } +i.icon.low.vision:before { content: "\f2a8"; } +i.icon.lyft:before { content: "\f3c3"; } +i.icon.magento:before { content: "\f3c4"; } +i.icon.magic:before { content: "\f0d0"; } +i.icon.magnet:before { content: "\f076"; } +i.icon.male:before { content: "\f183"; } +i.icon.map:before { content: "\f279"; } +i.icon.map.marker:before { content: "\f041"; } +i.icon.map.marker.alternate:before { content: "\f3c5"; } +i.icon.map.pin:before { content: "\f276"; } +i.icon.map.signs:before { content: "\f277"; } +i.icon.mars:before { content: "\f222"; } +i.icon.mars.double:before { content: "\f227"; } +i.icon.mars.stroke:before { content: "\f229"; } +i.icon.mars.stroke.horizontal:before { content: "\f22b"; } +i.icon.mars.stroke.vertical:before { content: "\f22a"; } +i.icon.maxcdn:before { content: "\f136"; } +i.icon.medapps:before { content: "\f3c6"; } +i.icon.medium:before { content: "\f23a"; } +i.icon.medium.m:before { content: "\f3c7"; } +i.icon.medkit:before { content: "\f0fa"; } +i.icon.medrt:before { content: "\f3c8"; } +i.icon.meetup:before { content: "\f2e0"; } +i.icon.meh:before { content: "\f11a"; } +i.icon.mercury:before { content: "\f223"; } +i.icon.microchip:before { content: "\f2db"; } +i.icon.microphone:before { content: "\f130"; } +i.icon.microphone.slash:before { content: "\f131"; } +i.icon.microsoft:before { content: "\f3ca"; } +i.icon.minus:before { content: "\f068"; } +i.icon.minus.circle:before { content: "\f056"; } +i.icon.minus.square:before { content: "\f146"; } +i.icon.mix:before { content: "\f3cb"; } +i.icon.mixcloud:before { content: "\f289"; } +i.icon.mizuni:before { content: "\f3cc"; } +i.icon.mobile:before { content: "\f10b"; } +i.icon.mobile.alternate:before { content: "\f3cd"; } +i.icon.modx:before { content: "\f285"; } +i.icon.monero:before { content: "\f3d0"; } +i.icon.money.bill.alternate:before { content: "\f3d1"; } +i.icon.moon:before { content: "\f186"; } +i.icon.motorcycle:before { content: "\f21c"; } +i.icon.mouse.pointer:before { content: "\f245"; } +i.icon.music:before { content: "\f001"; } +i.icon.napster:before { content: "\f3d2"; } +i.icon.neuter:before { content: "\f22c"; } +i.icon.newspaper:before { content: "\f1ea"; } +i.icon.nintendo.switch:before { content: "\f418"; } +i.icon.node:before { content: "\f419"; } +i.icon.node.js:before { content: "\f3d3"; } +i.icon.npm:before { content: "\f3d4"; } +i.icon.ns8:before { content: "\f3d5"; } +i.icon.nutritionix:before { content: "\f3d6"; } +i.icon.object.group:before { content: "\f247"; } +i.icon.object.ungroup:before { content: "\f248"; } +i.icon.odnoklassniki:before { content: "\f263"; } +i.icon.odnoklassniki.square:before { content: "\f264"; } +i.icon.opencart:before { content: "\f23d"; } +i.icon.openid:before { content: "\f19b"; } +i.icon.opera:before { content: "\f26a"; } +i.icon.optin.monster:before { content: "\f23c"; } +i.icon.osi:before { content: "\f41a"; } +i.icon.outdent:before { content: "\f03b"; } +i.icon.page4:before { content: "\f3d7"; } +i.icon.pagelines:before { content: "\f18c"; } +i.icon.paint.brush:before { content: "\f1fc"; } +i.icon.palfed:before { content: "\f3d8"; } +i.icon.pallet:before { content: "\f482"; } +i.icon.paper.plane:before { content: "\f1d8"; } +i.icon.paperclip:before { content: "\f0c6"; } +i.icon.paragraph:before { content: "\f1dd"; } +i.icon.paste:before { content: "\f0ea"; } +i.icon.patreon:before { content: "\f3d9"; } +i.icon.pause:before { content: "\f04c"; } +i.icon.pause.circle:before { content: "\f28b"; } +i.icon.paw:before { content: "\f1b0"; } +i.icon.paypal:before { content: "\f1ed"; } +i.icon.pen.square:before { content: "\f14b"; } +i.icon.pencil.alternate:before { content: "\f303"; } +i.icon.percent:before { content: "\f295"; } +i.icon.periscope:before { content: "\f3da"; } +i.icon.phabricator:before { content: "\f3db"; } +i.icon.phoenix.framework:before { content: "\f3dc"; } +i.icon.phone:before { content: "\f095"; } +i.icon.phone.square:before { content: "\f098"; } +i.icon.phone.volume:before { content: "\f2a0"; } +i.icon.php:before { content: "\f457"; } +i.icon.pied.piper:before { content: "\f2ae"; } +i.icon.pied.piper.alternate:before { content: "\f1a8"; } +i.icon.pied.piper.pp:before { content: "\f1a7"; } +i.icon.pills:before { content: "\f484"; } +i.icon.pinterest:before { content: "\f0d2"; } +i.icon.pinterest.p:before { content: "\f231"; } +i.icon.pinterest.square:before { content: "\f0d3"; } +i.icon.plane:before { content: "\f072"; } +i.icon.play:before { content: "\f04b"; } +i.icon.play.circle:before { content: "\f144"; } +i.icon.playstation:before { content: "\f3df"; } +i.icon.plug:before { content: "\f1e6"; } +i.icon.plus:before { content: "\f067"; } +i.icon.plus.circle:before { content: "\f055"; } +i.icon.plus.square:before { content: "\f0fe"; } +i.icon.podcast:before { content: "\f2ce"; } +i.icon.pound.sign:before { content: "\f154"; } +i.icon.power.off:before { content: "\f011"; } +i.icon.print:before { content: "\f02f"; } +i.icon.product.hunt:before { content: "\f288"; } +i.icon.pushed:before { content: "\f3e1"; } +i.icon.puzzle.piece:before { content: "\f12e"; } +i.icon.python:before { content: "\f3e2"; } +i.icon.qq:before { content: "\f1d6"; } +i.icon.qrcode:before { content: "\f029"; } +i.icon.question:before { content: "\f128"; } +i.icon.question.circle:before { content: "\f059"; } +i.icon.quidditch:before { content: "\f458"; } +i.icon.quinscape:before { content: "\f459"; } +i.icon.quora:before { content: "\f2c4"; } +i.icon.quote.left:before { content: "\f10d"; } +i.icon.quote.right:before { content: "\f10e"; } +i.icon.random:before { content: "\f074"; } +i.icon.ravelry:before { content: "\f2d9"; } +i.icon.react:before { content: "\f41b"; } +i.icon.rebel:before { content: "\f1d0"; } +i.icon.recycle:before { content: "\f1b8"; } +i.icon.redriver:before { content: "\f3e3"; } +i.icon.reddit:before { content: "\f1a1"; } +i.icon.reddit.alien:before { content: "\f281"; } +i.icon.reddit.square:before { content: "\f1a2"; } +i.icon.redo:before { content: "\f01e"; } +i.icon.redo.alternate:before { content: "\f2f9"; } +i.icon.registered:before { content: "\f25d"; } +i.icon.rendact:before { content: "\f3e4"; } +i.icon.renren:before { content: "\f18b"; } +i.icon.reply:before { content: "\f3e5"; } +i.icon.reply.all:before { content: "\f122"; } +i.icon.replyd:before { content: "\f3e6"; } +i.icon.resolving:before { content: "\f3e7"; } +i.icon.retweet:before { content: "\f079"; } +i.icon.road:before { content: "\f018"; } +i.icon.rocket:before { content: "\f135"; } +i.icon.rocketchat:before { content: "\f3e8"; } +i.icon.rockrms:before { content: "\f3e9"; } +i.icon.rss:before { content: "\f09e"; } +i.icon.rss.square:before { content: "\f143"; } +i.icon.ruble.sign:before { content: "\f158"; } +i.icon.rupee.sign:before { content: "\f156"; } +i.icon.safari:before { content: "\f267"; } +i.icon.sass:before { content: "\f41e"; } +i.icon.save:before { content: "\f0c7"; } +i.icon.schlix:before { content: "\f3ea"; } +i.icon.scribd:before { content: "\f28a"; } +i.icon.search:before { content: "\f002"; } +i.icon.search.minus:before { content: "\f010"; } +i.icon.search.plus:before { content: "\f00e"; } +i.icon.searchengin:before { content: "\f3eb"; } +i.icon.sellcast:before { content: "\f2da"; } +i.icon.sellsy:before { content: "\f213"; } +i.icon.server:before { content: "\f233"; } +i.icon.servicestack:before { content: "\f3ec"; } +i.icon.share:before { content: "\f064"; } +i.icon.share.alternate:before { content: "\f1e0"; } +i.icon.share.alternate.square:before { content: "\f1e1"; } +i.icon.share.square:before { content: "\f14d"; } +i.icon.shekel.sign:before { content: "\f20b"; } +i.icon.shield.alternate:before { content: "\f3ed"; } +i.icon.ship:before { content: "\f21a"; } +i.icon.shipping.fast:before { content: "\f48b"; } +i.icon.shirtsinbulk:before { content: "\f214"; } +i.icon.shopping.bag:before { content: "\f290"; } +i.icon.shopping.basket:before { content: "\f291"; } +i.icon.shopping.cart:before { content: "\f07a"; } +i.icon.shower:before { content: "\f2cc"; } +i.icon.sign.language:before { content: "\f2a7"; } +i.icon.signal:before { content: "\f012"; } +i.icon.simplybuilt:before { content: "\f215"; } +i.icon.sistrix:before { content: "\f3ee"; } +i.icon.sitemap:before { content: "\f0e8"; } +i.icon.skyatlas:before { content: "\f216"; } +i.icon.skype:before { content: "\f17e"; } +i.icon.slack:before { content: "\f198"; } +i.icon.slack.hash:before { content: "\f3ef"; } +i.icon.sliders.horizontal:before { content: "\f1de"; } +i.icon.slideshare:before { content: "\f1e7"; } +i.icon.smile:before { content: "\f118"; } +i.icon.snapchat:before { content: "\f2ab"; } +i.icon.snapchat.ghost:before { content: "\f2ac"; } +i.icon.snapchat.square:before { content: "\f2ad"; } +i.icon.snowflake:before { content: "\f2dc"; } +i.icon.sort:before { content: "\f0dc"; } +i.icon.sort.alphabet.down:before { content: "\f15d"; } +i.icon.sort.alphabet.up:before { content: "\f15e"; } +i.icon.sort.amount.down:before { content: "\f160"; } +i.icon.sort.amount.up:before { content: "\f161"; } +i.icon.sort.down:before { content: "\f0dd"; } +i.icon.sort.numeric.down:before { content: "\f162"; } +i.icon.sort.numeric.up:before { content: "\f163"; } +i.icon.sort.up:before { content: "\f0de"; } +i.icon.soundcloud:before { content: "\f1be"; } +i.icon.space.shuttle:before { content: "\f197"; } +i.icon.speakap:before { content: "\f3f3"; } +i.icon.spinner:before { content: "\f110"; } +i.icon.spotify:before { content: "\f1bc"; } +i.icon.square:before { content: "\f0c8"; } +i.icon.square.full:before { content: "\f45c"; } +i.icon.stack.exchange:before { content: "\f18d"; } +i.icon.stack.overflow:before { content: "\f16c"; } +i.icon.star:before { content: "\f005"; } +i.icon.star.half:before { content: "\f089"; } +i.icon.staylinked:before { content: "\f3f5"; } +i.icon.steam:before { content: "\f1b6"; } +i.icon.steam.square:before { content: "\f1b7"; } +i.icon.steam.symbol:before { content: "\f3f6"; } +i.icon.step.backward:before { content: "\f048"; } +i.icon.step.forward:before { content: "\f051"; } +i.icon.stethoscope:before { content: "\f0f1"; } +i.icon.sticker.mule:before { content: "\f3f7"; } +i.icon.sticky.note:before { content: "\f249"; } +i.icon.stop:before { content: "\f04d"; } +i.icon.stop.circle:before { content: "\f28d"; } +i.icon.stopwatch:before { content: "\f2f2"; } +i.icon.strava:before { content: "\f428"; } +i.icon.street.view:before { content: "\f21d"; } +i.icon.strikethrough:before { content: "\f0cc"; } +i.icon.stripe:before { content: "\f429"; } +i.icon.stripe.s:before { content: "\f42a"; } +i.icon.studiovinari:before { content: "\f3f8"; } +i.icon.stumbleupon:before { content: "\f1a4"; } +i.icon.stumbleupon.circle:before { content: "\f1a3"; } +i.icon.subscript:before { content: "\f12c"; } +i.icon.subway:before { content: "\f239"; } +i.icon.suitcase:before { content: "\f0f2"; } +i.icon.sun:before { content: "\f185"; } +i.icon.superpowers:before { content: "\f2dd"; } +i.icon.superscript:before { content: "\f12b"; } +i.icon.supple:before { content: "\f3f9"; } +i.icon.sync:before { content: "\f021"; } +i.icon.sync.alternate:before { content: "\f2f1"; } +i.icon.syringe:before { content: "\f48e"; } +i.icon.table:before { content: "\f0ce"; } +i.icon.table.tennis:before { content: "\f45d"; } +i.icon.tablet:before { content: "\f10a"; } +i.icon.tablet.alternate:before { content: "\f3fa"; } +i.icon.tachometer.alternate:before { content: "\f3fd"; } +i.icon.tag:before { content: "\f02b"; } +i.icon.tags:before { content: "\f02c"; } +i.icon.tasks:before { content: "\f0ae"; } +i.icon.taxi:before { content: "\f1ba"; } +i.icon.telegram:before { content: "\f2c6"; } +i.icon.telegram.plane:before { content: "\f3fe"; } +i.icon.tencent.weibo:before { content: "\f1d5"; } +i.icon.terminal:before { content: "\f120"; } +i.icon.text.height:before { content: "\f034"; } +i.icon.text.width:before { content: "\f035"; } +i.icon.th:before { content: "\f00a"; } +i.icon.th.large:before { content: "\f009"; } +i.icon.th.list:before { content: "\f00b"; } +i.icon.themeisle:before { content: "\f2b2"; } +i.icon.thermometer:before { content: "\f491"; } +i.icon.thermometer.empty:before { content: "\f2cb"; } +i.icon.thermometer.full:before { content: "\f2c7"; } +i.icon.thermometer.half:before { content: "\f2c9"; } +i.icon.thermometer.quarter:before { content: "\f2ca"; } +i.icon.thermometer.three.quarters:before { content: "\f2c8"; } +i.icon.thumbs.down:before { content: "\f165"; } +i.icon.thumbs.up:before { content: "\f164"; } +i.icon.thumbtack:before { content: "\f08d"; } +i.icon.ticket.alternate:before { content: "\f3ff"; } +i.icon.times:before { content: "\f00d"; } +i.icon.times.circle:before { content: "\f057"; } +i.icon.tint:before { content: "\f043"; } +i.icon.toggle.off:before { content: "\f204"; } +i.icon.toggle.on:before { content: "\f205"; } +i.icon.trademark:before { content: "\f25c"; } +i.icon.train:before { content: "\f238"; } +i.icon.transgender:before { content: "\f224"; } +i.icon.transgender.alternate:before { content: "\f225"; } +i.icon.trash:before { content: "\f1f8"; } +i.icon.trash.alternate:before { content: "\f2ed"; } +i.icon.tree:before { content: "\f1bb"; } +i.icon.trello:before { content: "\f181"; } +i.icon.tripadvisor:before { content: "\f262"; } +i.icon.trophy:before { content: "\f091"; } +i.icon.truck:before { content: "\f0d1"; } +i.icon.tty:before { content: "\f1e4"; } +i.icon.tumblr:before { content: "\f173"; } +i.icon.tumblr.square:before { content: "\f174"; } +i.icon.tv:before { content: "\f26c"; } +i.icon.twitch:before { content: "\f1e8"; } +i.icon.twitter:before { content: "\f099"; } +i.icon.twitter.square:before { content: "\f081"; } +i.icon.typo3:before { content: "\f42b"; } +i.icon.uber:before { content: "\f402"; } +i.icon.uikit:before { content: "\f403"; } +i.icon.umbrella:before { content: "\f0e9"; } +i.icon.underline:before { content: "\f0cd"; } +i.icon.undo:before { content: "\f0e2"; } +i.icon.undo.alternate:before { content: "\f2ea"; } +i.icon.uniregistry:before { content: "\f404"; } +i.icon.universal.access:before { content: "\f29a"; } +i.icon.university:before { content: "\f19c"; } +i.icon.unlink:before { content: "\f127"; } +i.icon.unlock:before { content: "\f09c"; } +i.icon.unlock.alternate:before { content: "\f13e"; } +i.icon.untappd:before { content: "\f405"; } +i.icon.upload:before { content: "\f093"; } +i.icon.usb:before { content: "\f287"; } +i.icon.user:before { content: "\f007"; } +i.icon.user.circle:before { content: "\f2bd"; } +i.icon.user.md:before { content: "\f0f0"; } +i.icon.user.plus:before { content: "\f234"; } +i.icon.user.secret:before { content: "\f21b"; } +i.icon.user.times:before { content: "\f235"; } +i.icon.users:before { content: "\f0c0"; } +i.icon.ussunnah:before { content: "\f407"; } +i.icon.utensil.spoon:before { content: "\f2e5"; } +i.icon.utensils:before { content: "\f2e7"; } +i.icon.vaadin:before { content: "\f408"; } +i.icon.venus:before { content: "\f221"; } +i.icon.venus.double:before { content: "\f226"; } +i.icon.venus.mars:before { content: "\f228"; } +i.icon.viacoin:before { content: "\f237"; } +i.icon.viadeo:before { content: "\f2a9"; } +i.icon.viadeo.square:before { content: "\f2aa"; } +i.icon.viber:before { content: "\f409"; } +i.icon.video:before { content: "\f03d"; } +i.icon.vimeo:before { content: "\f40a"; } +i.icon.vimeo.square:before { content: "\f194"; } +i.icon.vimeo.v:before { content: "\f27d"; } +i.icon.vine:before { content: "\f1ca"; } +i.icon.vk:before { content: "\f189"; } +i.icon.vnv:before { content: "\f40b"; } +i.icon.volleyball.ball:before { content: "\f45f"; } +i.icon.volume.down:before { content: "\f027"; } +i.icon.volume.off:before { content: "\f026"; } +i.icon.volume.up:before { content: "\f028"; } +i.icon.vuejs:before { content: "\f41f"; } +i.icon.warehouse:before { content: "\f494"; } +i.icon.weibo:before { content: "\f18a"; } +i.icon.weight:before { content: "\f496"; } +i.icon.weixin:before { content: "\f1d7"; } +i.icon.whatsapp:before { content: "\f232"; } +i.icon.whatsapp.square:before { content: "\f40c"; } +i.icon.wheelchair:before { content: "\f193"; } +i.icon.whmcs:before { content: "\f40d"; } +i.icon.wifi:before { content: "\f1eb"; } +i.icon.wikipedia.w:before { content: "\f266"; } +i.icon.window.close:before { content: "\f410"; } +i.icon.window.maximize:before { content: "\f2d0"; } +i.icon.window.minimize:before { content: "\f2d1"; } +i.icon.window.restore:before { content: "\f2d2"; } +i.icon.windows:before { content: "\f17a"; } +i.icon.won.sign:before { content: "\f159"; } +i.icon.wordpress:before { content: "\f19a"; } +i.icon.wordpress.simple:before { content: "\f411"; } +i.icon.wpbeginner:before { content: "\f297"; } +i.icon.wpexplorer:before { content: "\f2de"; } +i.icon.wpforms:before { content: "\f298"; } +i.icon.wrench:before { content: "\f0ad"; } +i.icon.xbox:before { content: "\f412"; } +i.icon.xing:before { content: "\f168"; } +i.icon.xing.square:before { content: "\f169"; } +i.icon.y.combinator:before { content: "\f23b"; } +i.icon.yahoo:before { content: "\f19e"; } +i.icon.yandex:before { content: "\f413"; } +i.icon.yandex.international:before { content: "\f414"; } +i.icon.yelp:before { content: "\f1e9"; } +i.icon.yen.sign:before { content: "\f157"; } +i.icon.yoast:before { content: "\f2b1"; } +i.icon.youtube:before { content: "\f167"; } +i.icon.youtube.square:before { content: "\f431"; } + +/* Aliases */ +i.icon.chess.rock:before { content: "\f447"; } +i.icon.ordered.list:before { content: "\f0cb"; } +i.icon.unordered.list:before { content: "\f0ca"; } +i.icon.user.doctor:before { content: "\f0f0"; } +i.icon.shield:before { content: "\f3ed"; } +i.icon.puzzle:before { content: "\f12e"; } +i.icon.credit.card.amazon.pay:before { content: "\f42d"; } +i.icon.credit.card.american.express:before { content: "\f1f3"; } +i.icon.credit.card.diners.club:before { content: "\f24c"; } +i.icon.credit.card.discover:before { content: "\f1f2"; } +i.icon.credit.card.jcb:before { content: "\f24b"; } +i.icon.credit.card.mastercard:before { content: "\f1f1"; } +i.icon.credit.card.paypal:before { content: "\f1f4"; } +i.icon.credit.card.stripe:before { content: "\f1f5"; } +i.icon.credit.card.visa:before { content: "\f1f0"; } +i.icon.add.circle:before { content: "\f055"; } +i.icon.add.square:before { content: "\f0fe"; } +i.icon.add.to.calendar:before { content: "\f271"; } +i.icon.add.to.cart:before { content: "\f217"; } +i.icon.add.user:before { content: "\f234"; } +i.icon.add:before { content: "\f067"; } +i.icon.alarm.mute:before { content: "\f1f6"; } +i.icon.alarm:before { content: "\f0f3"; } +i.icon.ald:before { content: "\f2a2"; } +i.icon.als:before { content: "\f2a2"; } +i.icon.american.express.card:before { content: "\f1f3"; } +i.icon.american.express:before { content: "\f1f3"; } +i.icon.amex:before { content: "\f1f3"; } +i.icon.announcement:before { content: "\f0a1"; } +i.icon.area.chart:before { content: "\f1fe"; } +i.icon.area.graph:before { content: "\f1fe"; } +i.icon.arrow.down.cart:before { content: "\f218"; } +i.icon.asexual:before { content: "\f22d"; } +i.icon.asl.interpreting:before { content: "\f2a3"; } +i.icon.asl:before { content: "\f2a3"; } +i.icon.assistive.listening.devices:before { content: "\f2a2"; } +i.icon.attach:before { content: "\f0c6"; } +i.icon.attention:before { content: "\f06a"; } +i.icon.balance:before { content: "\f24e"; } +i.icon.bar:before { content: "\f0fc"; } +i.icon.bathtub:before { content: "\f2cd"; } +i.icon.battery.four:before { content: "\f240"; } +i.icon.battery.high:before { content: "\f241"; } +i.icon.battery.low:before { content: "\f243"; } +i.icon.battery.medium:before { content: "\f242"; } +i.icon.battery.one:before { content: "\f243"; } +i.icon.battery.three:before { content: "\f241"; } +i.icon.battery.two:before { content: "\f242"; } +i.icon.battery.zero:before { content: "\f244"; } +i.icon.birthday:before { content: "\f1fd"; } +i.icon.block.layout:before { content: "\f009"; } +i.icon.bluetooth.alternative:before { content: "\f294"; } +i.icon.broken.chain:before { content: "\f127"; } +i.icon.browser:before { content: "\f022"; } +i.icon.call.square:before { content: "\f098"; } +i.icon.call:before { content: "\f095"; } +i.icon.cancel:before { content: "\f00d"; } +i.icon.cart:before { content: "\f07a"; } +i.icon.cc:before { content: "\f20a"; } +i.icon.chain:before { content: "\f0c1"; } +i.icon.chat:before { content: "\f075"; } +i.icon.checked.calendar:before { content: "\f274"; } +i.icon.checkmark:before { content: "\f00c"; } +i.icon.circle.notched:before { content: "\f1ce"; } +i.icon.close:before { content: "\f00d"; } +i.icon.cny:before { content: "\f157"; } +i.icon.cocktail:before { content: "\f000"; } +i.icon.commenting:before { content: "\f27a"; } +i.icon.computer:before { content: "\f108"; } +i.icon.configure:before { content: "\f0ad"; } +i.icon.content:before { content: "\f0c9"; } +i.icon.deafness:before { content: "\f2a4"; } +i.icon.delete.calendar:before { content: "\f273"; } +i.icon.delete:before { content: "\f00d"; } +i.icon.detective:before { content: "\f21b"; } +i.icon.diners.club.card:before { content: "\f24c"; } +i.icon.diners.club:before { content: "\f24c"; } +i.icon.discover.card:before { content: "\f1f2"; } +i.icon.discover:before { content: "\f1f2"; } +i.icon.discussions:before { content: "\f086"; } +i.icon.doctor:before { content: "\f0f0"; } +i.icon.dollar:before { content: "\f155"; } +i.icon.dont:before { content: "\f05e"; } +i.icon.dribble:before { content: "\f17d"; } +i.icon.drivers.license:before { content: "\f2c2"; } +i.icon.dropdown:before { content: "\f0d7"; } +i.icon.eercast:before { content: "\f2da"; } +i.icon.emergency:before { content: "\f0f9"; } +i.icon.envira.gallery:before { content: "\f299"; } +i.icon.erase:before { content: "\f12d"; } +i.icon.eur:before { content: "\f153"; } +i.icon.euro:before { content: "\f153"; } +i.icon.eyedropper:before { content: "\f1fb"; } +i.icon.fa:before { content: "\f2b4"; } +i.icon.factory:before { content: "\f275"; } +i.icon.favorite:before { content: "\f005"; } +i.icon.feed:before { content: "\f09e"; } +i.icon.female.homosexual:before { content: "\f226"; } +i.icon.file.text:before { content: "\f15c"; } +i.icon.find:before { content: "\f1e5"; } +i.icon.first.aid:before { content: "\f0fa"; } +i.icon.five.hundred.pixels:before { content: "\f26e"; } +i.icon.fork:before { content: "\f126"; } +i.icon.game:before { content: "\f11b"; } +i.icon.gay:before { content: "\f227"; } +i.icon.gbp:before { content: "\f154"; } +i.icon.gittip:before { content: "\f184"; } +i.icon.google.plus.circle:before { content: "\f2b3"; } +i.icon.google.plus.official:before { content: "\f2b3"; } +i.icon.grab:before { content: "\f255"; } +i.icon.graduation:before { content: "\f19d"; } +i.icon.grid.layout:before { content: "\f00a"; } +i.icon.group:before { content: "\f0c0"; } +i.icon.h:before { content: "\f0fd"; } +i.icon.hand.victory:before { content: "\f25b"; } +i.icon.handicap:before { content: "\f193"; } +i.icon.hard.of.hearing:before { content: "\f2a4"; } +i.icon.header:before { content: "\f1dc"; } +i.icon.help.circle:before { content: "\f059"; } +i.icon.help:before { content: "\f128"; } +i.icon.heterosexual:before { content: "\f228"; } +i.icon.hide:before { content: "\f070"; } +i.icon.hotel:before { content: "\f236"; } +i.icon.hourglass.four:before { content: "\f254"; } +i.icon.hourglass.full:before { content: "\f254"; } +i.icon.hourglass.one:before { content: "\f251"; } +i.icon.hourglass.three:before { content: "\f253"; } +i.icon.hourglass.two:before { content: "\f252"; } +i.icon.idea:before { content: "\f0eb"; } +i.icon.ils:before { content: "\f20b"; } +i.icon.in-cart:before { content: "\f218"; } +i.icon.inr:before { content: "\f156"; } +i.icon.intergender:before { content: "\f224"; } +i.icon.intersex:before { content: "\f224"; } +i.icon.japan.credit.bureau.card:before { content: "\f24b"; } +i.icon.japan.credit.bureau:before { content: "\f24b"; } +i.icon.jcb:before { content: "\f24b"; } +i.icon.jpy:before { content: "\f157"; } +i.icon.krw:before { content: "\f159"; } +i.icon.lab:before { content: "\f0c3"; } +i.icon.law:before { content: "\f24e"; } +i.icon.legal:before { content: "\f0e3"; } +i.icon.lesbian:before { content: "\f226"; } +i.icon.lightning:before { content: "\f0e7"; } +i.icon.like:before { content: "\f004"; } +i.icon.line.graph:before { content: "\f201"; } +i.icon.linkedin.square:before { content: "\f08c"; } +i.icon.linkify:before { content: "\f0c1"; } +i.icon.lira:before { content: "\f195"; } +i.icon.list.layout:before { content: "\f00b"; } +i.icon.magnify:before { content: "\f00e"; } +i.icon.mail.forward:before { content: "\f064"; } +i.icon.mail.square:before { content: "\f199"; } +i.icon.mail:before { content: "\f0e0"; } +i.icon.male.homosexual:before { content: "\f227"; } +i.icon.man:before { content: "\f222"; } +i.icon.marker:before { content: "\f041"; } +i.icon.mars.alternate:before { content: "\f229"; } +i.icon.mars.horizontal:before { content: "\f22b"; } +i.icon.mars.vertical:before { content: "\f22a"; } +i.icon.mastercard.card:before { content: "\f1f1"; } +i.icon.mastercard:before { content: "\f1f1"; } +i.icon.microsoft.edge:before { content: "\f282"; } +i.icon.military:before { content: "\f0fb"; } +i.icon.ms.edge:before { content: "\f282"; } +i.icon.mute:before { content: "\f131"; } +i.icon.new.pied.piper:before { content: "\f2ae"; } +i.icon.non.binary.transgender:before { content: "\f223"; } +i.icon.numbered.list:before { content: "\f0cb"; } +i.icon.optinmonster:before { content: "\f23c"; } +i.icon.options:before { content: "\f1de"; } +i.icon.other.gender.horizontal:before { content: "\f22b"; } +i.icon.other.gender.vertical:before { content: "\f22a"; } +i.icon.other.gender:before { content: "\f229"; } +i.icon.payment:before { content: "\f09d"; } +i.icon.paypal.card:before { content: "\f1f4"; } +i.icon.pencil.square:before { content: "\f14b"; } +i.icon.photo:before { content: "\f030"; } +i.icon.picture:before { content: "\f03e"; } +i.icon.pie.chart:before { content: "\f200"; } +i.icon.pie.graph:before { content: "\f200"; } +i.icon.pied.piper.hat:before { content: "\f2ae"; } +i.icon.pin:before { content: "\f08d"; } +i.icon.plus.cart:before { content: "\f217"; } +i.icon.pocket:before { content: "\f265"; } +i.icon.point:before { content: "\f041"; } +i.icon.pointing.down:before { content: "\f0a7"; } +i.icon.pointing.left:before { content: "\f0a5"; } +i.icon.pointing.right:before { content: "\f0a4"; } +i.icon.pointing.up:before { content: "\f0a6"; } +i.icon.pound:before { content: "\f154"; } +i.icon.power.cord:before { content: "\f1e6"; } +i.icon.power:before { content: "\f011"; } +i.icon.privacy:before { content: "\f084"; } +i.icon.r.circle:before { content: "\f25d"; } +i.icon.rain:before { content: "\f0e9"; } +i.icon.record:before { content: "\f03d"; } +i.icon.refresh:before { content: "\f021"; } +i.icon.remove.circle:before { content: "\f057"; } +i.icon.remove.from.calendar:before { content: "\f272"; } +i.icon.remove.user:before { content: "\f235"; } +i.icon.remove:before { content: "\f00d"; } +i.icon.repeat:before { content: "\f01e"; } +i.icon.rmb:before { content: "\f157"; } +i.icon.rouble:before { content: "\f158"; } +i.icon.rub:before { content: "\f158"; } +i.icon.ruble:before { content: "\f158"; } +i.icon.rupee:before { content: "\f156"; } +i.icon.s15:before { content: "\f2cd"; } +i.icon.selected.radio:before { content: "\f192"; } +i.icon.send:before { content: "\f1d8"; } +i.icon.setting:before { content: "\f013"; } +i.icon.settings:before { content: "\f085"; } +i.icon.shekel:before { content: "\f20b"; } +i.icon.sheqel:before { content: "\f20b"; } +i.icon.shipping:before { content: "\f0d1"; } +i.icon.shop:before { content: "\f07a"; } +i.icon.shuffle:before { content: "\f074"; } +i.icon.shutdown:before { content: "\f011"; } +i.icon.sidebar:before { content: "\f0c9"; } +i.icon.signing:before { content: "\f2a7"; } +i.icon.signup:before { content: "\f044"; } +i.icon.sliders:before { content: "\f1de"; } +i.icon.soccer:before { content: "\f1e3"; } +i.icon.sort.alphabet.ascending:before { content: "\f15d"; } +i.icon.sort.alphabet.descending:before { content: "\f15e"; } +i.icon.sort.ascending:before { content: "\f0de"; } +i.icon.sort.content.ascending:before { content: "\f160"; } +i.icon.sort.content.descending:before { content: "\f161"; } +i.icon.sort.descending:before { content: "\f0dd"; } +i.icon.sort.numeric.ascending:before { content: "\f162"; } +i.icon.sort.numeric.descending:before { content: "\f163"; } +i.icon.sound:before { content: "\f025"; } +i.icon.spy:before { content: "\f21b"; } +i.icon.stripe.card:before { content: "\f1f5"; } +i.icon.student:before { content: "\f19d"; } +i.icon.talk:before { content: "\f27a"; } +i.icon.target:before { content: "\f140"; } +i.icon.teletype:before { content: "\f1e4"; } +i.icon.television:before { content: "\f26c"; } +i.icon.text.cursor:before { content: "\f246"; } +i.icon.text.telephone:before { content: "\f1e4"; } +i.icon.theme.isle:before { content: "\f2b2"; } +i.icon.theme:before { content: "\f043"; } +i.icon.thermometer:before { content: "\f2c7"; } +i.icon.thumb.tack:before { content: "\f08d"; } +i.icon.time:before { content: "\f017"; } +i.icon.tm:before { content: "\f25c"; } +i.icon.toggle.down:before { content: "\f150"; } +i.icon.toggle.left:before { content: "\f191"; } +i.icon.toggle.right:before { content: "\f152"; } +i.icon.toggle.up:before { content: "\f151"; } +i.icon.translate:before { content: "\f1ab"; } +i.icon.travel:before { content: "\f0b1"; } +i.icon.treatment:before { content: "\f0f1"; } +i.icon.triangle.down:before { content: "\f0d7"; } +i.icon.triangle.left:before { content: "\f0d9"; } +i.icon.triangle.right:before { content: "\f0da"; } +i.icon.triangle.up:before { content: "\f0d8"; } +i.icon.try:before { content: "\f195"; } +i.icon.unhide:before { content: "\f06e"; } +i.icon.unlinkify:before { content: "\f127"; } +i.icon.unmute:before { content: "\f130"; } +i.icon.usd:before { content: "\f155"; } +i.icon.user.cancel:before { content: "\f235"; } +i.icon.user.close:before { content: "\f235"; } +i.icon.user.delete:before { content: "\f235"; } +i.icon.user.x:before { content: "\f235"; } +i.icon.vcard:before { content: "\f2bb"; } +i.icon.video.camera:before { content: "\f03d"; } +i.icon.video.play:before { content: "\f144"; } +i.icon.visa.card:before { content: "\f1f0"; } +i.icon.visa:before { content: "\f1f0"; } +i.icon.volume.control.phone:before { content: "\f2a0"; } +i.icon.wait:before { content: "\f017"; } +i.icon.warning.circle:before { content: "\f06a"; } +i.icon.warning.sign:before { content: "\f071"; } +i.icon.warning:before { content: "\f12a"; } +i.icon.wechat:before { content: "\f1d7"; } +i.icon.wi-fi:before { content: "\f1eb"; } +i.icon.wikipedia:before { content: "\f266"; } +i.icon.winner:before { content: "\f091"; } +i.icon.wizard:before { content: "\f0d0"; } +i.icon.woman:before { content: "\f221"; } +i.icon.won:before { content: "\f159"; } +i.icon.wordpress.beginner:before { content: "\f297"; } +i.icon.wordpress.forms:before { content: "\f298"; } +i.icon.world:before { content: "\f0ac"; } +i.icon.write.square:before { content: "\f14b"; } +i.icon.x:before { content: "\f00d"; } +i.icon.yc:before { content: "\f23b"; } +i.icon.ycombinator:before { content: "\f23b"; } +i.icon.yen:before { content: "\f157"; } +i.icon.zip:before { content: "\f187"; } +i.icon.zoom-in:before { content: "\f00e"; } +i.icon.zoom-out:before { content: "\f010"; } +i.icon.zoom:before { content: "\f00e"; } +i.icon.bitbucket.square:before { content: "\f171"; } +i.icon.checkmark.box:before { content: "\f14a"; } +i.icon.circle.thin:before { content: "\f111"; } +i.icon.cloud.download:before { content: "\f381"; } +i.icon.cloud.upload:before { content: "\f382"; } +i.icon.compose:before { content: "\f303"; } +i.icon.conversation:before { content: "\f086"; } +i.icon.credit.card.alternative:before { content: "\f09d"; } +i.icon.currency:before { content: "\f3d1"; } +i.icon.dashboard:before { content: "\f3fd"; } +i.icon.diamond:before { content: "\f3a5"; } +i.icon.disk:before { content: "\f0a0"; } +i.icon.exchange:before { content: "\f362"; } +i.icon.external.share:before { content: "\f14d"; } +i.icon.external.square:before { content: "\f360"; } +i.icon.external:before { content: "\f35d"; } +i.icon.facebook.official:before { content: "\f082"; } +i.icon.food:before { content: "\f2e7"; } +i.icon.hourglass.zero:before { content: "\f253"; } +i.icon.level.down:before { content: "\f3be"; } +i.icon.level.up:before { content: "\f3bf"; } +i.icon.logout:before { content: "\f2f5"; } +i.icon.meanpath:before { content: "\f0c8"; } +i.icon.money:before { content: "\f3d1"; } +i.icon.move:before { content: "\f0b2"; } +i.icon.pencil:before { content: "\f303"; } +i.icon.protect:before { content: "\f023"; } +i.icon.radio:before { content: "\f192"; } +i.icon.remove.bookmark:before { content: "\f02e"; } +i.icon.resize.horizontal:before { content: "\f337"; } +i.icon.resize.vertical:before { content: "\f338"; } +i.icon.sign-in:before { content: "\f2f6"; } +i.icon.sign-out:before { content: "\f2f5"; } +i.icon.spoon:before { content: "\f2e5"; } +i.icon.star.half.empty:before { content: "\f089"; } +i.icon.star.half.full:before { content: "\f089"; } +i.icon.ticket:before { content: "\f3ff"; } +i.icon.times.rectangle:before { content: "\f410"; } +i.icon.write:before { content: "\f303"; } +i.icon.youtube.play:before { content: "\f167"; } + + + +/******************************* + Outline Icons +*******************************/ + +/* Outline Icon */ +.loadOutlineIcons() when (@importOutlineIcons) { + /* Load & Define Icon Font */ + @font-face { + font-family: @outlineFontName; + src: @outlineFallbackSRC; + src: @outlineSrc; + font-style: normal; + font-weight: @normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; + } + i.icon.outline { + font-family: @outlineFontName; + } + /* Icon Definitions */ + i.icon.address.book.outline:before { content: "\f2b9"; } + i.icon.address.card.outline:before { content: "\f2bb"; } + i.icon.arrow.alternate.circle.down.outline:before { content: "\f358"; } + i.icon.arrow.alternate.circle.left.outline:before { content: "\f359"; } + i.icon.arrow.alternate.circle.right.outline:before { content: "\f35a"; } + i.icon.arrow.alternate.circle.up.outline:before { content: "\f35b"; } + i.icon.bell.outline:before { content: "\f0f3"; } + i.icon.bell.slash.outline:before { content: "\f1f6"; } + i.icon.bookmark.outline:before { content: "\f02e"; } + i.icon.building.outline:before { content: "\f1ad"; } + i.icon.calendar.outline:before { content: "\f133"; } + i.icon.calendar.alternate.outline:before { content: "\f073"; } + i.icon.calendar.check.outline:before { content: "\f274"; } + i.icon.calendar.minus.outline:before { content: "\f272"; } + i.icon.calendar.plus.outline:before { content: "\f271"; } + i.icon.calendar.times.outline:before { content: "\f273"; } + i.icon.caret.square.down.outline:before { content: "\f150"; } + i.icon.caret.square.left.outline:before { content: "\f191"; } + i.icon.caret.square.right.outline:before { content: "\f152"; } + i.icon.caret.square.up.outline:before { content: "\f151"; } + i.icon.chart.bar.outline:before { content: "\f080"; } + i.icon.check.circle.outline:before { content: "\f058"; } + i.icon.check.square.outline:before { content: "\f14a"; } + i.icon.circle.outline:before { content: "\f111"; } + i.icon.clipboard.outline:before { content: "\f328"; } + i.icon.clock.outline:before { content: "\f017"; } + i.icon.clone.outline:before { content: "\f24d"; } + i.icon.closed.captioning.outline:before { content: "\f20a"; } + i.icon.comment.outline:before { content: "\f075"; } + i.icon.comment.alternate.outline:before { content: "\f27a"; } + i.icon.comments.outline:before { content: "\f086"; } + i.icon.compass.outline:before { content: "\f14e"; } + i.icon.copy.outline:before { content: "\f0c5"; } + i.icon.copyright.outline:before { content: "\f1f9"; } + i.icon.credit.card.outline:before { content: "\f09d"; } + i.icon.dot.circle.outline:before { content: "\f192"; } + i.icon.edit.outline:before { content: "\f044"; } + i.icon.envelope.outline:before { content: "\f0e0"; } + i.icon.envelope.open.outline:before { content: "\f2b6"; } + i.icon.eye.slash.outline:before { content: "\f070"; } + i.icon.file.outline:before { content: "\f15b"; } + i.icon.file.alternate.outline:before { content: "\f15c"; } + i.icon.file.archive.outline:before { content: "\f1c6"; } + i.icon.file.audio.outline:before { content: "\f1c7"; } + i.icon.file.code.outline:before { content: "\f1c9"; } + i.icon.file.excel.outline:before { content: "\f1c3"; } + i.icon.file.image.outline:before { content: "\f1c5"; } + i.icon.file.pdf.outline:before { content: "\f1c1"; } + i.icon.file.powerpoint.outline:before { content: "\f1c4"; } + i.icon.file.video.outline:before { content: "\f1c8"; } + i.icon.file.word.outline:before { content: "\f1c2"; } + i.icon.flag.outline:before { content: "\f024"; } + i.icon.folder.outline:before { content: "\f07b"; } + i.icon.folder.open.outline:before { content: "\f07c"; } + i.icon.frown.outline:before { content: "\f119"; } + i.icon.futbol.outline:before { content: "\f1e3"; } + i.icon.gem.outline:before { content: "\f3a5"; } + i.icon.hand.lizard.outline:before { content: "\f258"; } + i.icon.hand.paper.outline:before { content: "\f256"; } + i.icon.hand.peace.outline:before { content: "\f25b"; } + i.icon.hand.point.down.outline:before { content: "\f0a7"; } + i.icon.hand.point.left.outline:before { content: "\f0a5"; } + i.icon.hand.point.right.outline:before { content: "\f0a4"; } + i.icon.hand.point.up.outline:before { content: "\f0a6"; } + i.icon.hand.pointer.outline:before { content: "\f25a"; } + i.icon.hand.rock.outline:before { content: "\f255"; } + i.icon.hand.scissors.outline:before { content: "\f257"; } + i.icon.hand.spock.outline:before { content: "\f259"; } + i.icon.handshake.outline:before { content: "\f2b5"; } + i.icon.hdd.outline:before { content: "\f0a0"; } + i.icon.heart.outline:before { content: "\f004"; } + i.icon.hospital.outline:before { content: "\f0f8"; } + i.icon.hourglass.outline:before { content: "\f254"; } + i.icon.id.badge.outline:before { content: "\f2c1"; } + i.icon.id.card.outline:before { content: "\f2c2"; } + i.icon.image.outline:before { content: "\f03e"; } + i.icon.images.outline:before { content: "\f302"; } + i.icon.keyboard.outline:before { content: "\f11c"; } + i.icon.lemon.outline:before { content: "\f094"; } + i.icon.life.ring.outline:before { content: "\f1cd"; } + i.icon.lightbulb.outline:before { content: "\f0eb"; } + i.icon.list.alternate.outline:before { content: "\f022"; } + i.icon.map.outline:before { content: "\f279"; } + i.icon.meh.outline:before { content: "\f11a"; } + i.icon.minus.square.outline:before { content: "\f146"; } + i.icon.money.bill.alternate.outline:before { content: "\f3d1"; } + i.icon.moon.outline:before { content: "\f186"; } + i.icon.newspaper.outline:before { content: "\f1ea"; } + i.icon.object.group.outline:before { content: "\f247"; } + i.icon.object.ungroup.outline:before { content: "\f248"; } + i.icon.paper.plane.outline:before { content: "\f1d8"; } + i.icon.pause.circle.outline:before { content: "\f28b"; } + i.icon.play.circle.outline:before { content: "\f144"; } + i.icon.plus.square.outline:before { content: "\f0fe"; } + i.icon.question.circle.outline:before { content: "\f059"; } + i.icon.registered.outline:before { content: "\f25d"; } + i.icon.save.outline:before { content: "\f0c7"; } + i.icon.share.square.outline:before { content: "\f14d"; } + i.icon.smile.outline:before { content: "\f118"; } + i.icon.snowflake.outline:before { content: "\f2dc"; } + i.icon.square.outline:before { content: "\f0c8"; } + i.icon.star.outline:before { content: "\f005"; } + i.icon.star.half.outline:before { content: "\f089"; } + i.icon.sticky.note.outline:before { content: "\f249"; } + i.icon.stop.circle.outline:before { content: "\f28d"; } + i.icon.sun.outline:before { content: "\f185"; } + i.icon.thumbs.down.outline:before { content: "\f165"; } + i.icon.thumbs.up.outline:before { content: "\f164"; } + i.icon.times.circle.outline:before { content: "\f057"; } + i.icon.trash.alternate.outline:before { content: "\f2ed"; } + i.icon.user.outline:before { content: "\f007"; } + i.icon.user.circle.outline:before { content: "\f2bd"; } + i.icon.window.close.outline:before { content: "\f410"; } + i.icon.window.maximize.outline:before { content: "\f2d0"; } + i.icon.window.minimize.outline:before { content: "\f2d1"; } + i.icon.window.restore.outline:before { content: "\f2d2"; } + + /* Outline Aliases */ + i.icon.disk.outline:before { content: "\f0a0"; } + i.icon.heart.empty, + i.icon.star.empty { + font-family: @outlineFontName; + } + i.icon.heart.empty:before { content: "\f004"; } + i.icon.star.empty:before { content: "\f089"; } + +} +.loadOutlineIcons(); + +/******************************* + Brand Icons +*******************************/ + +.loadBrandIcons() when (@importBrandIcons) { + /* Load & Define Brand Font */ + @font-face { + font-family: @brandFontName; + src: @brandFallbackSRC; + src: @brandSrc; + font-style: normal; + font-weight: @normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; + } + /* Brand Icon Font Family */ + i.icon.\35 00px, + i.icon.accessible.icon, + i.icon.accusoft, + i.icon.adn, + i.icon.adversal, + i.icon.affiliatetheme, + i.icon.algolia, + i.icon.amazon, + i.icon.amazon.pay, + i.icon.amilia, + i.icon.android, + i.icon.angellist, + i.icon.angrycreative, + i.icon.angular, + i.icon.app.store, + i.icon.app.store.ios, + i.icon.apper, + i.icon.apple, + i.icon.apple.pay, + i.icon.asymmetrik, + i.icon.audible, + i.icon.autoprefixer, + i.icon.avianex, + i.icon.aviato, + i.icon.aws, + i.icon.bandcamp, + i.icon.behance, + i.icon.behance.square, + i.icon.bimobject, + i.icon.bitbucket, + i.icon.bitcoin, + i.icon.bity, + i.icon.black.tie, + i.icon.blackberry, + i.icon.blogger, + i.icon.blogger.b, + i.icon.bluetooth, + i.icon.bluetooth.b, + i.icon.btc, + i.icon.buromobelexperte, + i.icon.buysellads, + i.icon.cc.amazon.pay, + i.icon.cc.amex, + i.icon.cc.apple.pay, + i.icon.cc.diners.club, + i.icon.cc.discover, + i.icon.cc.jcb, + i.icon.cc.mastercard, + i.icon.cc.paypal, + i.icon.cc.stripe, + i.icon.cc.visa, + i.icon.centercode, + i.icon.chrome, + i.icon.cloudscale, + i.icon.cloudsmith, + i.icon.cloudversify, + i.icon.codepen, + i.icon.codiepie, + i.icon.connectdevelop, + i.icon.contao, + i.icon.cpanel, + i.icon.creative.commons, + i.icon.css3, + i.icon.css3.alternate, + i.icon.cuttlefish, + i.icon.d.and.d, + i.icon.dashcube, + i.icon.delicious, + i.icon.deploydog, + i.icon.deskpro, + i.icon.deviantart, + i.icon.digg, + i.icon.digital.ocean, + i.icon.discord, + i.icon.discourse, + i.icon.dochub, + i.icon.docker, + i.icon.draft2digital, + i.icon.dribbble, + i.icon.dribbble.square, + i.icon.dropbox, + i.icon.drupal, + i.icon.dyalog, + i.icon.earlybirds, + i.icon.edge, + i.icon.elementor, + i.icon.ember, + i.icon.empire, + i.icon.envira, + i.icon.erlang, + i.icon.ethereum, + i.icon.etsy, + i.icon.expeditedssl, + i.icon.facebook, + i.icon.facebook.f, + i.icon.facebook.messenger, + i.icon.facebook.square, + i.icon.firefox, + i.icon.first.order, + i.icon.firstdraft, + i.icon.flickr, + i.icon.flipboard, + i.icon.fly, + i.icon.font.awesome, + i.icon.font.awesome.alternate, + i.icon.font.awesome.flag, + i.icon.fonticons, + i.icon.fonticons.fi, + i.icon.fort.awesome, + i.icon.fort.awesome.alternate, + i.icon.forumbee, + i.icon.foursquare, + i.icon.free.code.camp, + i.icon.freebsd, + i.icon.get.pocket, + i.icon.gg, + i.icon.gg.circle, + i.icon.git, + i.icon.git.square, + i.icon.github, + i.icon.github.alternate, + i.icon.github.square, + i.icon.gitkraken, + i.icon.gitlab, + i.icon.gitter, + i.icon.glide, + i.icon.glide.g, + i.icon.gofore, + i.icon.goodreads, + i.icon.goodreads.g, + i.icon.google, + i.icon.google.drive, + i.icon.google.play, + i.icon.google.plus, + i.icon.google.plus.g, + i.icon.google.plus.square, + i.icon.google.wallet, + i.icon.gratipay, + i.icon.grav, + i.icon.gripfire, + i.icon.grunt, + i.icon.gulp, + i.icon.hacker.news, + i.icon.hacker.news.square, + i.icon.hips, + i.icon.hire.a.helper, + i.icon.hooli, + i.icon.hotjar, + i.icon.houzz, + i.icon.html5, + i.icon.hubspot, + i.icon.imdb, + i.icon.instagram, + i.icon.internet.explorer, + i.icon.ioxhost, + i.icon.itunes, + i.icon.itunes.note, + i.icon.jenkins, + i.icon.joget, + i.icon.joomla, + i.icon.js, + i.icon.js.square, + i.icon.jsfiddle, + i.icon.keycdn, + i.icon.kickstarter, + i.icon.kickstarter.k, + i.icon.korvue, + i.icon.laravel, + i.icon.lastfm, + i.icon.lastfm.square, + i.icon.leanpub, + i.icon.less, + i.icon.linechat, + i.icon.linkedin, + i.icon.linkedin.alternate, + i.icon.linkedin.in, + i.icon.linode, + i.icon.linux, + i.icon.lyft, + i.icon.magento, + i.icon.maxcdn, + i.icon.medapps, + i.icon.medium, + i.icon.medium.m, + i.icon.medrt, + i.icon.meetup, + i.icon.microsoft, + i.icon.mix, + i.icon.mixcloud, + i.icon.mizuni, + i.icon.modx, + i.icon.monero, + i.icon.napster, + i.icon.nintendo.switch, + i.icon.node, + i.icon.node.js, + i.icon.npm, + i.icon.ns8, + i.icon.nutritionix, + i.icon.odnoklassniki, + i.icon.odnoklassniki.square, + i.icon.opencart, + i.icon.openid, + i.icon.opera, + i.icon.optin.monster, + i.icon.osi, + i.icon.page4, + i.icon.pagelines, + i.icon.palfed, + i.icon.patreon, + i.icon.paypal, + i.icon.periscope, + i.icon.phabricator, + i.icon.phoenix.framework, + i.icon.php, + i.icon.pied.piper, + i.icon.pied.piper.alternate, + i.icon.pied.piper.pp, + i.icon.pinterest, + i.icon.pinterest.p, + i.icon.pinterest.square, + i.icon.playstation, + i.icon.product.hunt, + i.icon.pushed, + i.icon.python, + i.icon.qq, + i.icon.quinscape, + i.icon.quora, + i.icon.ravelry, + i.icon.react, + i.icon.rebel, + i.icon.redriver, + i.icon.reddit, + i.icon.reddit.alien, + i.icon.reddit.square, + i.icon.rendact, + i.icon.renren, + i.icon.replyd, + i.icon.resolving, + i.icon.rocketchat, + i.icon.rockrms, + i.icon.safari, + i.icon.sass, + i.icon.schlix, + i.icon.scribd, + i.icon.searchengin, + i.icon.sellcast, + i.icon.sellsy, + i.icon.servicestack, + i.icon.shirtsinbulk, + i.icon.simplybuilt, + i.icon.sistrix, + i.icon.skyatlas, + i.icon.skype, + i.icon.slack, + i.icon.slack.hash, + i.icon.slideshare, + i.icon.snapchat, + i.icon.snapchat.ghost, + i.icon.snapchat.square, + i.icon.soundcloud, + i.icon.speakap, + i.icon.spotify, + i.icon.stack.exchange, + i.icon.stack.overflow, + i.icon.staylinked, + i.icon.steam, + i.icon.steam.square, + i.icon.steam.symbol, + i.icon.sticker.mule, + i.icon.strava, + i.icon.stripe, + i.icon.stripe.s, + i.icon.studiovinari, + i.icon.stumbleupon, + i.icon.stumbleupon.circle, + i.icon.superpowers, + i.icon.supple, + i.icon.telegram, + i.icon.telegram.plane, + i.icon.tencent.weibo, + i.icon.themeisle, + i.icon.trello, + i.icon.tripadvisor, + i.icon.tumblr, + i.icon.tumblr.square, + i.icon.twitch, + i.icon.twitter, + i.icon.twitter.square, + i.icon.typo3, + i.icon.uber, + i.icon.uikit, + i.icon.uniregistry, + i.icon.untappd, + i.icon.usb, + i.icon.ussunnah, + i.icon.vaadin, + i.icon.viacoin, + i.icon.viadeo, + i.icon.viadeo.square, + i.icon.viber, + i.icon.vimeo, + i.icon.vimeo.square, + i.icon.vimeo.v, + i.icon.vine, + i.icon.vk, + i.icon.vnv, + i.icon.vuejs, + i.icon.wechat, + i.icon.weibo, + i.icon.weixin, + i.icon.whatsapp, + i.icon.whatsapp.square, + i.icon.whmcs, + i.icon.wikipedia.w, + i.icon.windows, + i.icon.wordpress, + i.icon.wordpress.simple, + i.icon.wpbeginner, + i.icon.wpexplorer, + i.icon.wpforms, + i.icon.xbox, + i.icon.xing, + i.icon.xing.square, + i.icon.y.combinator, + i.icon.yahoo, + i.icon.yandex, + i.icon.yandex.international, + i.icon.yelp, + i.icon.yoast, + i.icon.youtube, + i.icon.youtube.square { + font-family: 'brand-icons'; + } + /* Brand Icons Ideally Would Be Defined Here */ + +} +.loadBrandIcons(); diff --git a/src/theme/site/elements/icon.variables b/src/theme/site/elements/icon.variables new file mode 100644 index 0000000..daffd92 --- /dev/null +++ b/src/theme/site/elements/icon.variables @@ -0,0 +1,94 @@ +/******************************* + Icon +*******************************/ + +/*-------------- + Font Files +---------------*/ + +@fontName: 'icons'; +@src: + url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'), + url("@{fontPath}/@{fontName}.woff2") format('woff2'), + url("@{fontPath}/@{fontName}.woff") format('woff'), + url("@{fontPath}/@{fontName}.ttf") format('truetype'), + url("@{fontPath}/@{fontName}.svg#icons") format('svg') +; +@fallbackSRC: url("@{fontPath}/@{fontName}.eot"); + +/*-------------- + Optional Files +---------------*/ + +/* Outline Icons */ +@importOutlineIcons: true; +@outlineFontName: 'outline-icons'; +@outlineSrc: + url("@{fontPath}/@{outlineFontName}.eot?#iefix") format('embedded-opentype'), + url("@{fontPath}/@{outlineFontName}.woff2") format('woff2'), + url("@{fontPath}/@{outlineFontName}.woff") format('woff'), + url("@{fontPath}/@{outlineFontName}.ttf") format('truetype'), + url("@{fontPath}/@{outlineFontName}.svg#icons") format('svg') +; +@outlineFallbackSRC: url("@{fontPath}/@{outlineFontName}.eot"); + +/* Brand Icons */ +@importBrandIcons: true; +@brandFontName: 'brand-icons'; +@brandSrc: + url("@{fontPath}/@{brandFontName}.eot?#iefix") format('embedded-opentype'), + url("@{fontPath}/@{brandFontName}.woff2") format('woff2'), + url("@{fontPath}/@{brandFontName}.woff") format('woff'), + url("@{fontPath}/@{brandFontName}.ttf") format('truetype'), + url("@{fontPath}/@{brandFontName}.svg#icons") format('svg') +; +@brandFallbackSRC: url("@{fontPath}/@{brandFontName}.eot"); + +/*-------------- + Definition +---------------*/ + +/* Icon Variables */ +@opacity: 1; +@width: @iconWidth; +@height: 1em; +@distanceFromText: 0.25rem; + + +/* Variations */ +@linkOpacity: 0.8; +@linkDuration: 0.3s; +@loadingDuration: 2s; + +@circularSize: 2em; +@circularPadding: 0.5em 0em; +@circularShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + +@borderedSize: 2em; +@borderedVerticalPadding: ((@borderedSize - @height) / 2); +@borderedHorizontalPadding: 0em; +@borderedShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + +@cornerIconSize: 0.45em; +@cornerIconStroke: 1px; +@cornerIconShadow: + -@cornerIconStroke -@cornerIconStroke 0 @white, + @cornerIconStroke -@cornerIconStroke 0 @white, + -@cornerIconStroke @cornerIconStroke 0 @white, + @cornerIconStroke @cornerIconStroke 0 @white +; +@cornerIconInvertedShadow: + -@cornerIconStroke -@cornerIconStroke 0 @black, + @cornerIconStroke -@cornerIconStroke 0 @black, + -@cornerIconStroke @cornerIconStroke 0 @black, + @cornerIconStroke @cornerIconStroke 0 @black +; + +@mini: 0.4em; +@tiny: 0.5em; +@small: 0.75em; +@medium: 1em; +@large: 1.5em; +@big: 2em; +@huge: 4em; +@massive: 8em; diff --git a/src/theme/site/elements/image.overrides b/src/theme/site/elements/image.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/elements/image.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/elements/image.variables b/src/theme/site/elements/image.variables new file mode 100644 index 0000000..925110e --- /dev/null +++ b/src/theme/site/elements/image.variables @@ -0,0 +1,44 @@ +/******************************* + Image +*******************************/ + +/*------------------- + Element +--------------------*/ + +@placeholderColor: transparent; +@roundedBorderRadius: 0.3125em; + +@imageHorizontalMargin: 0.25rem; +@imageVerticalMargin: 0.5rem; +@imageBorder: 1px solid rgba(0, 0, 0, 0.1); + +/*------------------- + Types +--------------------*/ + +/* Avatar */ +@avatarSize: 2em; +@avatarMargin: 0.25em; + + +/*------------------- + Variations +--------------------*/ + +/* Spaced */ +@spacedDistance: 0.5em; + +/* Floated */ +@floatedHorizontalMargin: 1em; +@floatedVerticalMargin: 1em; + +/* Size */ +@miniWidth: 35px; +@tinyWidth: 80px; +@smallWidth: 150px; +@mediumWidth: 300px; +@largeWidth: 450px; +@bigWidth: 600px; +@hugeWidth: 800px; +@massiveWidth: 960px; diff --git a/src/theme/site/elements/input.overrides b/src/theme/site/elements/input.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/elements/input.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/elements/input.variables b/src/theme/site/elements/input.variables new file mode 100644 index 0000000..04741f3 --- /dev/null +++ b/src/theme/site/elements/input.variables @@ -0,0 +1,101 @@ +/******************************* + Input +*******************************/ + +/*------------------- + Element +--------------------*/ + +@inputFont: @pageFont; +@verticalPadding: @inputVerticalPadding; +@horizontalPadding: @inputHorizontalPadding; + +@lineHeight: @inputLineHeight; +@lineHeightOffset: ((@lineHeight - 1em) / 2); + +@padding: (@verticalPadding - @lineHeightOffset) @horizontalPadding; + +@textAlign: left; +@background: @inputBackground; +@borderWidth: 1px; +@border: @borderWidth solid @borderColor; +@boxShadow: none; + +@borderRadius: @defaultBorderRadius; +@transition: + box-shadow @defaultDuration @defaultEasing, + border-color @defaultDuration @defaultEasing +; + +/*------------------- + Types +--------------------*/ + +/* Icon Input */ +@iconWidth: (@verticalPadding * 2) + @glyphWidth; +@iconOpacity: 0.5; +@iconFocusOpacity: 1; +@iconOffset: -0.5em; + +@iconDistance: 0em; +@iconMargin: @iconWidth + @iconDistance; +@iconTransition: opacity 0.3s @defaultEasing; + +@transparentIconWidth: @glyphWidth; +@transparentIconMargin: 2em; + +/* Circular Icon Input */ +@circularIconVerticalOffset: 0.35em; +@circularIconHorizontalOffset: 0.5em; + +/* Labeled Input */ +@labelCornerTop: @borderWidth; +@labelCornerRight: @borderWidth; +@labelCornerSize: @relative9px; +@labelSize: 1em; +@labelVerticalPadding: (@verticalPadding - @lineHeightOffset); + +@labeledMargin: 2.5em; +@labeledIconInputMargin: 3.25em; +@labeledIconMargin: 1.25em; + +/*------------------- + States +--------------------*/ + +/* Placeholder */ +@placeholderColor: @inputPlaceholderColor; +@placeholderFocusColor: @inputPlaceholderFocusColor; + +/* Down */ +@downBorderColor: rgba(0, 0, 0, 0.3); +@downBackground: #FAFAFA; +@downColor: @textColor; +@downBoxShadow: none; + +/* Focus */ +@focusBorderColor: @focusedFormBorderColor; +@focusBackground: @background; +@focusColor: @hoveredTextColor; +@focusBoxShadow: none; + +/* Error */ +@errorBackground: @negativeBackgroundColor; +@errorColor: @negativeTextColor; +@errorBorder: @negativeBorderColor; +@errorBoxShadow: none; + +@placeholderErrorColor: lighten(@errorColor, 40); +@placeholderErrorFocusColor: lighten(@errorColor, 30); + +/* Loader */ +@invertedLoaderFillColor: rgba(0, 0, 0, 0.15); + +/*------------------- + Variations +--------------------*/ + +/* Inverted */ +@transparentInvertedPlaceholderColor: @invertedUnselectedTextColor; +@transparentInvertedColor: @white; + diff --git a/src/theme/site/elements/label.overrides b/src/theme/site/elements/label.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/elements/label.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/elements/label.variables b/src/theme/site/elements/label.variables new file mode 100644 index 0000000..91868a3 --- /dev/null +++ b/src/theme/site/elements/label.variables @@ -0,0 +1,254 @@ +/******************************* + Label +*******************************/ + +/*------------------- + Element +--------------------*/ + +@verticalAlign: baseline; +@verticalMargin: 0em; +@horizontalMargin: @relative2px; +@backgroundColor: #E8E8E8; +@color: @mutedTextColor; +@backgroundImage: none; +@verticalPadding: 0.5833em; /* medium is not @emSize custom value required */ +@horizontalPadding: 0.833em; +@borderRadius: @absoluteBorderRadius; +@textTransform: none; +@fontWeight: @bold; +@borderWidth: 1px; +@border: 0px solid transparent; + +@lineHeightOffset: -(@verticalPadding / 2); + +@labelTransitionDuration: @defaultDuration; +@labelTransitionEasing: @defaultEasing; +@transition: background @labelTransitionDuration @labelTransitionEasing; + +/* Group */ +@groupVerticalMargin: 0.5em; +@groupHorizontalMargin: 0.5em; + +/*------------------- + Parts +--------------------*/ + +/* Link */ +@linkOpacity: 0.5; +@linkTransition: @labelTransitionDuration opacity @labelTransitionEasing; + +/* Icon */ +@iconDistance: 0.75em; + +/* Image */ +@imageHeight: (1em + @verticalPadding * 2); + +/* Detail */ +@detailFontWeight: @bold; +@detailOpacity: 0.8; +@detailIconDistance: 0.25em; +@detailMargin: 1em; + +/* Delete */ +@deleteOpacity: @linkOpacity; +@deleteSize: @relativeSmall; +@deleteMargin: 0.5em; +@deleteTransition: background @labelTransitionDuration @labelTransitionEasing; + +/*------------------- + Types +--------------------*/ + +/* Image Label */ +@imageLabelBackground: @backgroundColor; +@imageLabelVerticalPadding: @verticalPadding; +@imageLabelHorizontalPadding: @horizontalPadding; +@imageLabelTextDistance: 0.5em; +@imageLabelDetailDistance: @imageLabelTextDistance; +@imageLabelBorderRadius: @borderRadius; +@imageLabelBoxShadow: none; +@imageLabelPadding: @imageLabelVerticalPadding @imageLabelHorizontalPadding @imageLabelVerticalPadding @imageLabelTextDistance; + +@imageLabelImageMargin: -@verticalPadding @imageLabelTextDistance -@verticalPadding -@imageLabelTextDistance; +@imageLabelImageBorderRadius: @imageLabelBorderRadius 0em 0em @imageLabelBorderRadius; +@imageLabelImageHeight: @imageHeight; + +@imageLabelDetailBackground: @strongTransparentBlack; +@imageLabelDetailPadding: @imageLabelVerticalPadding @imageLabelHorizontalPadding; +@imageLabelDetailMargin: -@imageLabelVerticalPadding -@imageLabelHorizontalPadding -@imageLabelVerticalPadding @imageLabelDetailDistance; + +/*------------------- + States +--------------------*/ + +/* Hover */ +@labelHoverBackgroundColor: #E0E0E0; +@labelHoverBackgroundImage: none; +@labelHoverTextColor: @hoveredTextColor; + +/* Active */ +@labelActiveBackgroundColor: #D0D0D0; +@labelActiveBackgroundImage: none; +@labelActiveTextColor: @selectedTextColor; + +/* Active Hover */ +@labelActiveHoverBackgroundColor: #C8C8C8; +@labelActiveHoverBackgroundImage: none; +@labelActiveHoverTextColor: @selectedTextColor; + + +/*------------------- + Variations +--------------------*/ + +/* Basic */ +@basicBackground: none @white; +@basicBorderWidth: 1px; +@basicBorder: @basicBorderWidth solid @borderColor; +@basicColor: @textColor; +@basicBoxShadow: none; + +@basicHoverBackground: @basicBackground; +@basicHoverColor: @linkHoverColor; +@basicHoverBorder: @basicBorder; +@basicHoverBoxShadow: @basicBoxShadow; + +/* Tag */ +@tagCircleColor: @white; +@tagCircleSize: 0.5em; +@tagHorizontalPadding: 1.5em; +@tagCircleBoxShadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); +@tagTriangleRightOffset: 100%; +@tagTriangleTopOffset: 50%; +@tagTriangleSize: 1.56em; +@tagTriangleBackgroundImage: none; +@tagTransition: none; /* Avoids error with background: inherit; on animation */ + +/* Ribbon */ +@ribbonTriangleSize: 1.2em; +@ribbonShadowColor: rgba(0, 0, 0, 0.15); + +@ribbonMargin: 1rem; +@ribbonOffset: calc(-@ribbonMargin - @ribbonTriangleSize); +@ribbonDistance: calc(@ribbonMargin + @ribbonTriangleSize); +@rightRibbonOffset: calc(100% + @ribbonMargin + @ribbonTriangleSize); + +@ribbonImageTopDistance: 1rem; +@ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */ +@ribbonImageOffset: calc(-@ribbonImageMargin - @ribbonTriangleSize); +@rightRibbonImageOffset: calc(100% + @ribbonImageMargin + @ribbonTriangleSize); + +@ribbonTableMargin: @relativeMini; /* Rounding Offset on Triangle */ +@ribbonTableOffset: calc(-@ribbonTableMargin - @ribbonTriangleSize); +@rightRibbonTableOffset: calc(100% + @ribbonTableMargin + @ribbonTriangleSize); + + +/* Colors */ +@redTextColor: @white; +@orangeTextColor: @white; +@yellowTextColor: @white; +@oliveTextColor: @white; +@greenTextColor: @white; +@tealTextColor: @white; +@blueTextColor: @white; +@violetTextColor: @white; +@purpleTextColor: @white; +@pinkTextColor: @white; +@brownTextColor: @white; +@greyTextColor: @white; +@blackTextColor: @white; + +@redHoverTextColor: @white; +@orangeHoverTextColor: @white; +@yellowHoverTextColor: @white; +@oliveHoverTextColor: @white; +@greenHoverTextColor: @white; +@tealHoverTextColor: @white; +@blueHoverTextColor: @white; +@violetHoverTextColor: @white; +@purpleHoverTextColor: @white; +@pinkHoverTextColor: @white; +@brownHoverTextColor: @white; +@greyHoverTextColor: @white; +@blackHoverTextColor: @white; + +@redRibbonShadow: darken(@red, 10); +@orangeRibbonShadow: darken(@orange, 10); +@yellowRibbonShadow: darken(@yellow, 10); +@oliveRibbonShadow: darken(@olive, 10); +@greenRibbonShadow: darken(@green, 10); +@tealRibbonShadow: darken(@teal, 10); +@blueRibbonShadow: darken(@blue, 10); +@violetRibbonShadow: darken(@violet, 10); +@purpleRibbonShadow: darken(@purple, 10); +@pinkRibbonShadow: darken(@pink, 10); +@brownRibbonShadow: darken(@brown, 10); +@greyRibbonShadow: darken(@grey, 10); +@blackRibbonShadow: darken(@black, 10); + +/* Attached */ +@attachedSegmentPadding: 2rem; +@attachedVerticalPadding: 0.75em; +@attachedHorizontalPadding: 1em; + +@attachedCornerBorderRadius: @3px; +@attachedBorderRadius: @borderRadius; + +/* Corner */ +@cornerSizeRatio: 1; +@cornerTransition: color @labelTransitionDuration @labelTransitionEasing; +@cornerTriangleSize: 4em; +@cornerTriangleTransition: border-color @labelTransitionDuration @labelTransitionEasing; +@cornerTriangleZIndex: 1; + +@cornerIconSize: @relativeLarge; +@cornerIconTopOffset: @relative9px; +@cornerIconLeftOffset: @relative11px; + +/* Corner Text */ +@cornerTextWidth: 3em; +@cornerTextWeight: @bold; +@cornerTextSize: 1em; + +/* Horizontal */ +@horizontalLabelMinWidth: 3em; +@horizontalLabelMargin: 0.5em; +@horizontalLabelVerticalPadding: 0.4em; + +/* Circular Padding */ +@circularPadding: 0.5em; +@circularMinSize: 2em; +@emptyCircleSize: 0.5em; + +/* Pointing */ +@pointingBorderColor: inherit; +@pointingBorderWidth: @borderWidth; +@pointingVerticalDistance: 1em; +@pointingTriangleSize: 0.6666em; +@pointingHorizontalDistance: @pointingTriangleSize; + +@pointingTriangleTransition: background @labelTransitionDuration @labelTransitionEasing; +@pointingTriangleZIndex: 2; + +/* Basic Pointing */ +@basicPointingTriangleOffset: -@pointingBorderWidth; + +/* Floating */ +@floatingTopOffset: -1em; +@floatingLeftOffset: -1.5em; +@floatingZIndex: 100; + +/*------------------- + Group +--------------------*/ + +/* Sizing */ +@mini : @9px; +@tiny : @10px; +@small : @11px; +@medium : @12px; +@large : @absoluteMedium; +@big : @absoluteBig; +@huge : @absoluteHuge; +@massive : @absoluteMassive; diff --git a/src/theme/site/elements/list.overrides b/src/theme/site/elements/list.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/elements/list.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/elements/list.variables b/src/theme/site/elements/list.variables new file mode 100644 index 0000000..def1014 --- /dev/null +++ b/src/theme/site/elements/list.variables @@ -0,0 +1,224 @@ +/******************************* + List +*******************************/ + +/*------------------- + View +--------------------*/ + +/* List */ +@listStyleType: none; +@listStylePosition: outside; +@margin: 1em 0em; +@verticalPadding: 0em; +@horizontalPadding: 0em; + +/* List Item */ +@itemVerticalPadding: @relative3px; +@itemHorizontalPadding: 0em; +@itemPadding: @itemVerticalPadding @itemHorizontalPadding; +@itemLineHeight: @relativeLarge; + +/* Sub List */ +@childListPadding: 0.75em 0em 0.25em 0.5em; +@childListIndent: 1em; + +/* Sub List Item */ +@childItemVerticalPadding: @relative2px; +@childItemHorizontalPadding: 0em; +@childItemPadding: @childItemVerticalPadding @childItemHorizontalPadding; +@childItemLineHeight: inherit; + +/*------------------- + Elements +--------------------*/ + +/* Icon */ +@iconDistance: @relative4px; +@iconOffset: 0em; +@iconTransition: color @defaultDuration @defaultEasing; +@iconVerticalAlign: top; +@iconContentVerticalAlign: top; + +/* Image */ +@imageDistance: 0.5em; +@imageAlign: top; + +/* Content */ +@contentDistance: 0.5em; +@contentLineHeight: @itemLineHeight; +@contentLineHeightOffset: (@contentLineHeight - 1em) / 2; +@contentVerticalAlign: top; + +/* Header */ +@itemHeaderFontFamily: @headerFont; +@itemHeaderFontWeight: @bold; +@itemHeaderColor: @textColor; + +/* Description */ +@itemDescriptionColor: rgba(0, 0, 0, 0.7); + +/* Link */ +@itemLinkColor: @linkColor; +@itemLinkHoverColor: @linkHoverColor; + +/* Header Link */ +@itemHeaderLinkColor: @itemLinkColor; +@itemHeaderLinkHoverColor: @itemLinkHoverColor; + +/* Linked Icon */ +@itemLinkIconColor: @lightTextColor; +@itemLinkIconHoverColor: @textColor; +@invertedIconLinkColor: @invertedLightTextColor; + +/*------------------- + States +--------------------*/ + +@disabledColor: @disabledTextColor; +@invertedDisabledColor: @invertedDisabledTextColor; + +/*------------------- + Variations +--------------------*/ + +/* Float */ +@floatDistance: 1em; +@leftFloatMargin: 0em @floatDistance 0em 0em; +@rightFloatMargin: 0em 0em 0em @floatDistance; + +/* Horizontal */ +@horizontalSpacing: 1em; +@horizontalIconDistance: 0.25em; +@horizontalVerticalAlign: middle; + +/* Inverted */ +@invertedListIconColor: @invertedLightTextColor; +@invertedHeaderColor: @invertedTextColor; +@invertedDescriptionColor: @invertedLightTextColor; +@invertedItemLinkColor: @invertedTextColor; +@invertedItemLinkHoverColor: @linkHoverColor; + +/* Link List */ +@linkListItemColor: @unselectedTextColor; +@linkListItemHoverColor: @hoveredTextColor; +@linkListItemDownColor: @pressedTextColor; +@linkListItemActiveColor: @selectedTextColor; +@linkListTransition: + @defaultDuration color @defaultEasing +; + +/* Inverted Link List */ +@invertedLinkListItemColor: @invertedUnselectedTextColor; +@invertedLinkListItemHoverColor: @invertedHoveredTextColor; +@invertedLinkListItemDownColor: @invertedPressedTextColor; +@invertedLinkListItemActiveColor: @invertedSelectedTextColor; + +/* Selection List */ +@selectionListItemMargin: 0em; +@selectionListItemBorderRadius: 0.5em; +@selectionListItemVerticalPadding: 0.5em; +@selectionListItemHorizontalPadding: 0.5em; +@selectionListTransition: + @defaultDuration color @defaultEasing, + @defaultDuration padding-left @defaultEasing, + @defaultDuration background-color @defaultEasing +; + +/* Selection List States */ +@selectionListBackground: transparent; +@selectionListColor: @unselectedTextColor; +@selectionListHoverBackground: @subtleTransparentBlack; +@selectionListHoverColor: @hoveredTextColor; +@selectionListDownBackground: @transparentBlack; +@selectionListDownColor: @pressedTextColor; +@selectionListActiveBackground: @transparentBlack; +@selectionListActiveColor: @selectedTextColor; + +/* Inverted Selection List */ +@invertedSelectionListBackground: transparent; +@invertedSelectionListColor: @invertedUnselectedTextColor; +@invertedSelectionListHoverBackground: @subtleTransparentWhite; +@invertedSelectionListHoverColor: @invertedHoveredTextColor; +@invertedSelectionListDownBackground: @transparentWhite; +@invertedSelectionListDownColor: @invertedPressedTextColor; +@invertedSelectionListActiveBackground: @transparentWhite; +@invertedSelectionListActiveColor: @invertedSelectedTextColor; + +/* Animated List */ +@animatedDuration: 0.25s; +@animatedDelay: 0.1s; +@animatedListTransition: + @animatedDuration color @defaultEasing @animatedDelay, + @animatedDuration padding-left @defaultEasing @animatedDelay, + @animatedDuration background-color @defaultEasing @animatedDelay +; +@animatedListIndent: 1em; + +/* Bulleted */ +@bulletDistance: 1.25rem; +@bulletOffset: -@bulletDistance; + +@bulletOpacity: 1; +@bulletCharacter: '•'; +@bulletColor: inherit; +@bulletLinkColor: @textColor; +@bulletVerticalAlign: top; +@bulletChildDistance: @bulletDistance; + +/* Horizontal Bullets */ +@horizontalBulletColor: @textColor; +@horizontalBulletSpacing: @bulletDistance + 0.5em; + +/* Ordered List */ +@orderedCountName: ordered; +@orderedCountContent: counters(ordered, ".") " "; +@orderedCountColor: @textColor; +@orderedCountDistance: 1.25rem; +@orderedCountOpacity: 0.8; +@orderedCountTextAlign: right; +@orderedCountVerticalAlign: middle; + +@orderedChildCountDistance: 1em; +@orderedChildCountOffset: -2em; + +@orderedInvertedCountColor: @invertedLightTextColor; + +/* Horizontal Ordered */ +@horizontalOrderedCountDistance: 0.5em; + +/* Divided */ +@dividedBorderWidth: 1px; +@dividedBorder: @dividedBorderWidth solid @borderColor; +@dividedInvertedBorderColor: @whiteBorderColor; +@dividedChildListBorder: none; +@dividedChildItemBorder: none; + +/* Divided Horizontal */ +@horizontalDividedSpacing: (@horizontalSpacing / 2); +@horizontalDividedLineHeight: 0.6; + +/* Divided */ +@celledBorderWidth: 1px; +@celledBorder: @celledBorderWidth solid @borderColor; +@celledInvertedBorder: @dividedBorderWidth solid @whiteBorderColor; +@celledHorizontalPadding: 0.5em; +@celledChildListBorder: none; +@celledChildItemBorder: none; + +/* Divided Horizontal */ +@horizontalCelledSpacing: (@horizontalSpacing / 2); +@horizontalCelledLineHeight: 0.6; + +/* Relaxed */ +@relaxedItemVerticalPadding: @relative6px; +@relaxedChildItemVerticalPadding: @relative3px; +@relaxedHeaderMargin: 0.25rem; +@relaxedHorizontalPadding: 1rem; + +/* Very Relaxed */ +@veryRelaxedItemVerticalPadding: @relative12px; +@veryRelaxedChildItemVerticalPadding: @relative4px; +@veryRelaxedHeaderMargin: 0.5rem; +@veryRelaxedHorizontalPadding: 1.5rem; + diff --git a/src/theme/site/elements/loader.overrides b/src/theme/site/elements/loader.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/elements/loader.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/elements/loader.variables b/src/theme/site/elements/loader.variables new file mode 100644 index 0000000..b52281e --- /dev/null +++ b/src/theme/site/elements/loader.variables @@ -0,0 +1,73 @@ +/******************************* + Loader +*******************************/ + +/* Some global loader styles defined in site.variables */ +// @loaderSpeed +// @loaderLineWidth +// @loaderFillColor +// @loaderLineColor +// @invertedLoaderFillColor +// @invertedLoaderLineColor + +/*------------------- + Standard +--------------------*/ + +@loaderTopOffset: 50%; +@loaderLeftOffset: 50%; + +@shapeBorderColor: @loaderLineColor transparent transparent; +@invertedShapeBorderColor: @invertedLoaderLineColor transparent transparent; + +/*------------------- + Types +--------------------*/ + +/* Text */ +@textDistance: @relativeMini; +@loaderTextColor: @textColor; +@invertedLoaderTextColor: @invertedTextColor; + + +/*------------------- + States +--------------------*/ + +@indeterminateDirection: reverse; +@indeterminateSpeed: (2 * @loaderSpeed); + +/*------------------- + Variations +--------------------*/ + +@inlineVerticalAlign: middle; +@inlineMargin: 0em; + +/* Exact Sizes (Avoids Rounding Errors) */ +@mini : @14px; +@tiny : @16px; +@small : @24px; +@medium : @32px; +@large : @48px; +@big : @52px; +@huge : @58px; +@massive : @64px; + +@miniOffset: 0em 0em 0em -(@mini / 2); +@tinyOffset: 0em 0em 0em -(@tiny / 2); +@smallOffset: 0em 0em 0em -(@small / 2); +@mediumOffset: 0em 0em 0em -(@medium / 2); +@largeOffset: 0em 0em 0em -(@large / 2); +@bigOffset: 0em 0em 0em -(@big / 2); +@hugeOffset: 0em 0em 0em -(@huge / 2); +@massiveOffset: 0em 0em 0em -(@massive / 2); + +@tinyFontSize: @relativeTiny; +@miniFontSize: @relativeMini; +@smallFontSize: @relativeSmall; +@mediumFontSize: @relativeMedium; +@largeFontSize: @relativeLarge; +@bigFontSize: @relativeBig; +@hugeFontSize: @relativeHuge; +@massiveFontSize: @relativeMassive; diff --git a/src/theme/site/elements/placeholder.overrides b/src/theme/site/elements/placeholder.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/elements/placeholder.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/elements/placeholder.variables b/src/theme/site/elements/placeholder.variables new file mode 100644 index 0000000..9e74197 --- /dev/null +++ b/src/theme/site/elements/placeholder.variables @@ -0,0 +1,55 @@ +@placeholderMaxWidth: 30rem; + +/* Key Content Sizing */ +@placeholderLineMargin: @relative12px; +@placeholderHeaderLineHeight: @relative9px; +@placeholderLineHeight: @relative7px; +@placeholderParagraphLineHeight: @placeholderLineHeight; + +@placeholderSpacing: @relative20px; + +/* Interval between consecutive placeholders */ +@placeholderAnimationInterval: 0.15s; + +/* Repeated Placeholder */ +@consecutivePlaceholderSpacing: 2rem; + +/* Image */ +@placeholderImageHeight: 100px; + +/* Header Image */ +@placeholderImageWidth: 3em; +@placeholderImageTextIndent: @10px; + +/* Paragraph */ +@placeholderHeaderLineOneOutdent: 20%; +@placeholderHeaderLineTwoOutdent: 60%; + +@placeholderLineOneOutdent: @placeholderFullLineOutdent; +@placeholderLineTwoOutdent: @placeholderMediumLineOutdent; +@placeholderLineThreeOutdent: @placeholderVeryLongLineOutdent; +@placeholderLineFourOutdent: @placeholderLongLineOutdent; +@placeholderLineFiveOutdent: @placeholderShortLineOutdent; + + +/* Glow Gradient */ +@placeholderLoadingAnimationDuration: 2s; +@placeholderLoadingGradientWidth: 1200px; +@placeholderLoadingGradient: linear-gradient(to right, + rgba(0, 0, 0, 0.08) 0%, + rgba(0, 0, 0, 0.15) 15%, + rgba(0, 0, 0, 0.08) 30% +); +@placeholderInvertedLoadingGradient: linear-gradient(to right, + rgba(255, 255, 255, 0.08) 0%, + rgba(255, 255, 255, 0.14) 15%, + rgba(255, 255, 255, 0.08) 30% +); + +/* Variations */ +@placeholderFullLineOutdent: 0%; +@placeholderVeryLongLineOutdent: 10%; +@placeholderLongLineOutdent: 35%; +@placeholderMediumLineOutdent: 50%; +@placeholderShortLineOutdent: 65%; +@placeholderVeryShortLineOutdent: 80%; diff --git a/src/theme/site/elements/rail.overrides b/src/theme/site/elements/rail.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/elements/rail.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/elements/rail.variables b/src/theme/site/elements/rail.variables new file mode 100644 index 0000000..321a26d --- /dev/null +++ b/src/theme/site/elements/rail.variables @@ -0,0 +1,34 @@ +/******************************* + Rail +*******************************/ + +/*------------------- + Element +--------------------*/ + +@width: 300px; +@height: 100%; + +@distance: 4rem; +@splitDistance: (@distance / 2); + +/*------------------- + Variations +--------------------*/ + +/* Close */ +@closeDistance: 2em; +@veryCloseDistance: 1em; + +@splitCloseDistance: (@closeDistance / 2); +@splitVeryCloseDistance: (@veryCloseDistance / 2); + +@closeWidth: ~"calc("@width~" + "@splitCloseDistance~")"; +@veryCloseWidth: ~"calc("@width~" + "@splitVeryCloseDistance~")"; + +/* Dividing */ +@dividingBorder: 1px solid @borderColor; +@dividingDistance: 5rem; +@splitDividingDistance: (@dividingDistance / 2); +@dividingWidth: @width + @splitDividingDistance; + diff --git a/src/theme/site/elements/reveal.overrides b/src/theme/site/elements/reveal.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/elements/reveal.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/elements/reveal.variables b/src/theme/site/elements/reveal.variables new file mode 100644 index 0000000..1c7fac4 --- /dev/null +++ b/src/theme/site/elements/reveal.variables @@ -0,0 +1,18 @@ +/******************************* + Reveal +*******************************/ + +@transitionDelay: 0.1s; +@transitionDuration: 0.5s; +@transitionEasing: cubic-bezier(0.175, 0.885, 0.320, 1); +@transition: all @transitionDuration @defaultEasing @transitionDelay; + +@bottomZIndex: 2; +@topZIndex: 3; +@activeZIndex: 4; +@overlayZIndex: 5; + +/* Types */ +@rotateDegrees: 110deg; +@moveTransition: transform @transitionDuration @transitionEasing @transitionDelay; +@slideTransition: transform @transitionDuration @defaultEasing @transitionDelay; diff --git a/src/theme/site/elements/segment.overrides b/src/theme/site/elements/segment.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/elements/segment.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/elements/segment.variables b/src/theme/site/elements/segment.variables new file mode 100644 index 0000000..9b2c4d4 --- /dev/null +++ b/src/theme/site/elements/segment.variables @@ -0,0 +1,154 @@ +/******************************* + Segment +*******************************/ + +/*------------------- + Element +--------------------*/ + +@background: @white; +@borderWidth: 1px; +@border: @borderWidth solid @borderColor; + +@boxShadow: @subtleShadow; +@verticalPadding: 1em; +@horizontalPadding: 1em; +@padding: @verticalPadding @horizontalPadding; + +@verticalMargin: 1rem; +@horizontalMargin: 0em; +@margin: @verticalMargin @horizontalMargin; +@borderRadius: @defaultBorderRadius; + +/*------------------- + Group +--------------------*/ + +@groupedMargin: @margin; +@groupedBorder: @border; +@groupedBoxShadow: @boxShadow; +@groupedBorderRadius: @borderRadius; + +@nestedGroupMargin: @verticalMargin @verticalMargin; + +@groupedSegmentBorder: none; +@groupedSegmentDivider: @border; +@groupedSegmentMargin: 0em; +@groupedSegmentWidth: auto; +@groupedSegmentBoxShadow: none; + +/*------------------- + Coupling +--------------------*/ + +/* Page Grid Segment */ +@pageGridMargin: (2 * @verticalPadding); + +/******************************* + Types +*******************************/ + +/* Placeholder */ +@placeholderBackground: @offWhite; +@placeholderPadding: @padding; +@placeholderBorderColor: @borderColor; +@placeholderBoxShadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset; +@placeholderMinHeight: 18rem; +@placeholderContentMaxWidth: 15rem; +@placeholderContentInlineButtonMargin: 0px @5px 0px 0px; + + +/* Piled */ +@piledZIndex: auto; +@piledMargin: 3em; +@piledBoxShadow: ''; +@piledDegrees: 1.2deg; +@piledBorder: @border; + +/* Circular */ +@circularPadding: 2em; + +/* Stacked */ +@stackedHeight: 6px; +@stackedPageBackground: @subtleTransparentBlack; +@stackedPadding: @verticalPadding + (0.4em); +@tallStackedPadding: @verticalPadding + (0.8em); + +/******************************* + States +*******************************/ + +/* Loading Dimmer */ +@loaderDimmerColor: rgba(255, 255, 255, 0.8); +@loaderDimmerZIndex: 100; + +/* Loading Spinner */ +@loaderSize: 3em; +@loaderLineZIndex: 101; + + +/******************************* + Variations +*******************************/ + + +/* Raised */ +@raisedBoxShadow: @floatingShadow; + +/* Padded */ +@paddedSegmentPadding: 1.5em; +@veryPaddedSegmentPadding: 3em; + +/* Attached */ +@attachedTopOffset: 0px; +@attachedBottomOffset: 0px; +@attachedHorizontalOffset: -@borderWidth; +@attachedWidth: calc(100% - (@attachedHorizontalOffset * 2)); +@attachedBoxShadow: none; +@attachedBorder: @borderWidth solid @solidBorderColor; +@attachedBottomBoxShadow: + @boxShadow, + @attachedBoxShadow +; + +/* Inverted */ +@invertedBackground: @black; + +/* Floated */ +@floatedDistance: 1em; + +/* Basic */ +@basicBackground: none transparent; +@basicBorder: none; +@basicBoxShadow: none; +@basicBorderRadius: 0px; + +/* Colors */ +@coloredBorderSize: 2px; + +/* Ordinality */ +@secondaryBackground: @darkWhite; +@secondaryColor: @mutedTextColor; + +@tertiaryBackground: @midWhite; +@tertiaryColor: @mutedTextColor; + +@secondaryInvertedLightness: 0.2; +@secondaryInvertedBackground: + lighten(@black, (@secondaryInvertedLightness * 100)) + linear-gradient( + rgba(255, 255, 255, @secondaryInvertedLightness) 0%, + rgba(255, 255, 255, @secondaryInvertedLightness) 100% + ) +; +@secondaryInvertedColor: @invertedMutedTextColor; + +@tertiaryInvertedLightness: 0.35; +@tertiaryInvertedBackground: + lighten(@black, (@tertiaryInvertedLightness * 100)) + linear-gradient( + rgba(255, 255, 255, @tertiaryInvertedLightness) 0%, + rgba(255, 255, 255, @tertiaryInvertedLightness) 100% + ) +; +@tertiaryInvertedColor: @invertedMutedTextColor; diff --git a/src/theme/site/elements/step.overrides b/src/theme/site/elements/step.overrides new file mode 100644 index 0000000..e7aca52 --- /dev/null +++ b/src/theme/site/elements/step.overrides @@ -0,0 +1,16 @@ +/******************************* + Theme Overrides +*******************************/ + +@font-face { + font-family: 'Step'; + src: + url(data:application/x-font-ttf;charset=utf-8;;base64,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) format('truetype'), + url(data:application/font-woff;charset=utf-8;base64,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) format('woff') + ; +} +.ui.steps .step.completed > .icon:before, +.ui.ordered.steps .step.completed:before { + font-family: 'Step'; + content: '\e800'; /* '' */ +} \ No newline at end of file diff --git a/src/theme/site/elements/step.variables b/src/theme/site/elements/step.variables new file mode 100644 index 0000000..332472d --- /dev/null +++ b/src/theme/site/elements/step.variables @@ -0,0 +1,130 @@ +/******************************* + Step +*******************************/ + +/*------------------- + Group +--------------------*/ + +@stepMargin: 1em 0em; +@stepsBorderRadius: @defaultBorderRadius; +@stepsBackground: ''; +@stepsBoxShadow: none; +@stepsBorder: 1px solid @borderColor; + +/*------------------- + Element +--------------------*/ + +@verticalMargin: 0em; +@horizontalMargin: 0em; + +@arrowSize: @relativeLarge; +@verticalPadding: @relativeLarge; +@horizontalPadding: 2em; + +@transition: + background-color @defaultDuration @defaultEasing, + opacity @defaultDuration @defaultEasing, + color @defaultDuration @defaultEasing, + box-shadow @defaultDuration @defaultEasing +; +@lineHeight: @relativeLarge; +@alignItems: center; +@justifyContent: center; +@backgroundColor: @white; +@background: @backgroundColor; +@borderRadius: 0em; +@borderWidth: 1px; +@boxShadow: none; +@border: none; +@divider: @borderWidth solid @borderColor; + +/* Icon */ +@iconDistance: 1rem; +@iconSize: 2.5em; +@iconAlign: middle; + +/* Title */ +@titleFontFamily: @headerFont; +@titleFontWeight: @bold; +@titleFontSize: @relativeLarge; +@titleColor: @darkTextColor; + +/* Description */ +@descriptionDistance: 0.25em; +@descriptionFontSize: @relativeSmall; +@descriptionFontWeight: @normal; +@descriptionColor: @textColor; + + +/* Arrow */ +@arrowBackgroundColor: @backgroundColor; +@arrowTopOffset: 50%; +@arrowRightOffset: 0%; +@arrowBorderWidth: 0px @borderWidth @borderWidth 0px; + +@arrowDisplay: block; +@lastArrowDisplay: none; + +@activeArrowDisplay: block; +@activeLastArrowDisplay: none; + +/* Mobile */ +@mobileIconDistance: @iconDistance; + +/*------------------- + Types +--------------------*/ + +/* Vertical */ +@verticalDivider: @divider; +@verticalArrowTopOffset: 50%; +@verticalArrowRightOffset: 0%; +@verticalArrowBorderWidth: 0px @borderWidth @borderWidth 0px; + +@verticalArrowDisplay: none; +@verticalLastArrowDisplay: @verticalArrowDisplay; + +@verticalActiveArrowDisplay: block; +@verticalActiveLastArrowDisplay: block; + +/*------------------- + Variations +--------------------*/ + +@attachedHorizontalOffset: -@borderWidth; +@attachedVerticalOffset: 0; +@attachedWidth: calc(100% + (-@attachedHorizontalOffset * 2)); + +@orderedFontFamily: inherit; +@orderedFontWeight: @bold; + +/*------------------- + States +--------------------*/ + +/* Completed */ +@completedColor: @positiveColor; + +/* Hover */ +@hoverBackground: @offWhite; +@hoverColor: @hoveredTextColor; + +/* Down */ +@downBackground: @darkWhite; +@downColor: @pressedTextColor; + +/* Active */ +@activeBackground: @darkWhite; +@activeColor: @linkColor; +@activeIconColor: @darkTextColor; + +/* Active + Hover */ +@activeHoverBackground: @lightGrey; +@activeHoverColor: @textColor; + + +/* Disabled */ +@disabledBackground: @background; +@disabledColor: @disabledTextColor; diff --git a/src/theme/site/extras/custom.overrides b/src/theme/site/extras/custom.overrides new file mode 100644 index 0000000..e69de29 diff --git a/src/theme/site/extras/custom.variables b/src/theme/site/extras/custom.variables new file mode 100644 index 0000000..e69de29 diff --git a/src/theme/site/extras/main.overrides b/src/theme/site/extras/main.overrides new file mode 100644 index 0000000..e69de29 diff --git a/src/theme/site/extras/main.variables b/src/theme/site/extras/main.variables new file mode 100644 index 0000000..e69de29 diff --git a/src/theme/site/globals/reset.overrides b/src/theme/site/globals/reset.overrides new file mode 100644 index 0000000..fa4e73d --- /dev/null +++ b/src/theme/site/globals/reset.overrides @@ -0,0 +1,447 @@ +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + 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 + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 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 + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * 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 style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * 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 + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 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; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * 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 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +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 and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[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 IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/src/theme/site/globals/reset.variables b/src/theme/site/globals/reset.variables new file mode 100644 index 0000000..0eedf27 --- /dev/null +++ b/src/theme/site/globals/reset.variables @@ -0,0 +1,3 @@ +/******************************* + Reset +*******************************/ \ No newline at end of file diff --git a/src/theme/site/globals/site.overrides b/src/theme/site/globals/site.overrides new file mode 100644 index 0000000..d756a10 --- /dev/null +++ b/src/theme/site/globals/site.overrides @@ -0,0 +1,3 @@ +/******************************* + Global Overrides +*******************************/ diff --git a/src/theme/site/globals/site.variables b/src/theme/site/globals/site.variables new file mode 100644 index 0000000..f297aef --- /dev/null +++ b/src/theme/site/globals/site.variables @@ -0,0 +1,973 @@ +/******************************* + Site Settings +*******************************/ + +/*------------------- + Fonts +--------------------*/ + +@fontName : 'Lato'; +@fontSmoothing : antialiased; + +@headerFont : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif; +@pageFont : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif; + +@googleFontName : @fontName; +@importGoogleFonts : true; +@googleFontSizes : '400,700,400italic,700italic'; +@googleSubset : 'latin'; + +@googleProtocol : 'https://'; +@googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}'; + + +@bold : bold; +@normal : normal; + +/*------------------- + Base Sizes +--------------------*/ + +/* This is the single variable that controls them all */ +@emSize : 14px; + +/* The size of page text */ +@fontSize : 14px; + + +/*------------------- + Border Radius +--------------------*/ + +/* See Power-user section below + for explanation of @px variables +*/ +@relativeBorderRadius: @relative4px; +@absoluteBorderRadius: @4px; + +@defaultBorderRadius: @absoluteBorderRadius; + +/*------------------- + Brand Colors +--------------------*/ + +@primaryColor : @blue; +@secondaryColor : @black; + +@lightPrimaryColor : @lightBlue; +@lightSecondaryColor : @lightBlack; + +/*-------------- + Page Heading +---------------*/ + +@headerFontWeight : @bold; +@headerLineHeight : unit((18 / 14), em); + +@h1 : unit((28 / 14), rem); +@h2 : unit((24 / 14), rem); +@h3 : unit((18 / 14), rem); +@h4 : unit((15 / 14), rem); +@h5 : unit((14 / 14), rem); + +/*-------------- + Form Input +---------------*/ + +/* This adjusts the default form input across all elements */ +@inputBackground : @white; +@inputVerticalPadding : @relative11px; +@inputHorizontalPadding : @relative14px; +@inputPadding : @inputVerticalPadding @inputHorizontalPadding; + +/* Input Text Color */ +@inputColor: @textColor; +@inputPlaceholderColor: lighten(@inputColor, 75); +@inputPlaceholderFocusColor: lighten(@inputColor, 45); + +/* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ +@inputLineHeight: unit((17 / 14), em); + +/*------------------- + Focused Input +--------------------*/ + +/* Used on inputs, textarea etc */ +@focusedFormBorderColor: #85B7D9; + +/* Used on dropdowns, other larger blocks */ +@focusedFormMutedBorderColor: #96C8DA; + +/*------------------- + Sizes +--------------------*/ + +/* + Sizes are all expressed in terms of 14px/em (default em) + This ensures these "ratios" remain constant despite changes in EM +*/ + +@miniSize : (11 / 14); +@tinySize : (12 / 14); +@smallSize : (13 / 14); +@mediumSize : (14 / 14); +@largeSize : (16 / 14); +@bigSize : (18 / 14); +@hugeSize : (20 / 14); +@massiveSize : (24 / 14); + + +/*------------------- + Page +--------------------*/ + +@pageBackground : #FFFFFF; +@pageOverflowX : hidden; + +@lineHeight : 1.4285em; +@textColor : rgba(0, 0, 0, 0.87); + +/*------------------- + Paragraph +--------------------*/ + +@paragraphMargin : 0em 0em 1em; +@paragraphLineHeight : @lineHeight; + +/*------------------- + Links +--------------------*/ + +@linkColor : #4183C4; +@linkUnderline : none; +@linkHoverColor : darken(saturate(@linkColor, 20), 15, relative); +@linkHoverUnderline : @linkUnderline; + +/*------------------- + Scroll Bars +--------------------*/ + +@useCustomScrollbars: true; + +@customScrollbarWidth: 10px; +@customScrollbarHeight: 10px; + +@trackBackground: rgba(0, 0, 0, 0.1); +@trackBorderRadius: 0px; + +@thumbBorderRadius: 5px; +@thumbBackground: rgba(0, 0, 0, 0.25); +@thumbTransition: color 0.2s ease; + +@thumbInactiveBackground: rgba(0, 0, 0, 0.15); +@thumbHoverBackground: rgba(128, 135, 139, 0.8); + +/* Inverted */ +@trackInvertedBackground: rgba(255, 255, 255, 0.1); +@thumbInvertedBackground: rgba(255, 255, 255, 0.25); +@thumbInvertedInactiveBackground: rgba(255, 255, 255, 0.15); +@thumbInvertedHoverBackground: rgba(255, 255, 255, 0.35); + +/*------------------- + Highlighted Text +--------------------*/ + +@highlightBackground : #CCE2FF; +@highlightColor : @textColor; + +@inputHighlightBackground : rgba(100, 100, 100, 0.4); +@inputHighlightColor : @textColor; + + +/*------------------- + Loader +--------------------*/ + +@loaderSize : @relativeBig; +@loaderSpeed : 0.6s; +@loaderLineWidth : 0.2em; +@loaderFillColor : rgba(0, 0, 0, 0.1); +@loaderLineColor : @grey; + +@invertedLoaderFillColor : rgba(255, 255, 255, 0.15); +@invertedLoaderLineColor : @white; + +/*------------------- + Grid +--------------------*/ + +@columnCount: 16; + +/*------------------- + Transitions +--------------------*/ + +@defaultDuration : 0.1s; +@defaultEasing : ease; + +/*------------------- + Breakpoints +--------------------*/ + +@mobileBreakpoint : 320px; +@tabletBreakpoint : 768px; +@computerBreakpoint : 992px; +@largeMonitorBreakpoint : 1200px; +@widescreenMonitorBreakpoint : 1920px; + +/*------------------- + Site Colors +--------------------*/ + +/*--- Colors ---*/ +@red : #DB2828; +@orange : #F2711C; +@yellow : #FBBD08; +@olive : #B5CC18; +@green : #21BA45; +@teal : #00B5AD; +@blue : #2185D0; +@violet : #6435C9; +@purple : #A333C8; +@pink : #E03997; +@brown : #A5673F; +@grey : #767676; +@black : #1B1C1D; + +/*--- Light Colors ---*/ +@lightRed : #FF695E; +@lightOrange : #FF851B; +@lightYellow : #FFE21F; +@lightOlive : #D9E778; +@lightGreen : #2ECC40; +@lightTeal : #6DFFFF; +@lightBlue : #54C8FF; +@lightViolet : #A291FB; +@lightPurple : #DC73FF; +@lightPink : #FF8EDF; +@lightBrown : #D67C1C; +@lightGrey : #DCDDDE; +@lightBlack : #545454; + +/*--- Neutrals ---*/ +@fullBlack : #000000; +@offWhite : #F9FAFB; +@darkWhite : #F3F4F5; +@midWhite : #DCDDDE; +@white : #FFFFFF; + +/*--- Colored Backgrounds ---*/ +@redBackground : #FFE8E6; +@orangeBackground : #FFEDDE; +@yellowBackground : #FFF8DB; +@oliveBackground : #FBFDEF; +@greenBackground : #E5F9E7; +@tealBackground : #E1F7F7; +@blueBackground : #DFF0FF; +@violetBackground : #EAE7FF; +@purpleBackground : #F6E7FF; +@pinkBackground : #FFE3FB; +@brownBackground : #F1E2D3; + +/*--- Colored Headers ---*/ +@redHeaderColor : darken(@redTextColor, 5); +@oliveHeaderColor : darken(@oliveTextColor, 5); +@greenHeaderColor : darken(@greenTextColor, 5); +@yellowHeaderColor : darken(@yellowTextColor, 5); +@blueHeaderColor : darken(@blueTextColor, 5); +@tealHeaderColor : darken(@tealTextColor, 5); +@pinkHeaderColor : darken(@pinkTextColor, 5); +@violetHeaderColor : darken(@violetTextColor, 5); +@purpleHeaderColor : darken(@purpleTextColor, 5); +@orangeHeaderColor : darken(@orangeTextColor, 5); +@brownHeaderColor : darken(@brownTextColor, 5); + +/*--- Colored Text ---*/ +@redTextColor : @red; +@orangeTextColor : @orange; +@yellowTextColor : #B58105; // Yellow text is difficult to read +@oliveTextColor : #8ABC1E; // Olive is difficult to read +@greenTextColor : #1EBC30; // Green is difficult to read +@tealTextColor : #10A3A3; // Teal text is difficult to read +@blueTextColor : @blue; +@violetTextColor : @violet; +@purpleTextColor : @purple; +@pinkTextColor : @pink; +@brownTextColor : @brown; + +/*--- Colored Border ---*/ +@redBorderColor : @redTextColor; +@orangeBorderColor : @orangeTextColor; +@yellowBorderColor : @yellowTextColor; +@oliveBorderColor : @oliveTextColor; +@greenBorderColor : @greenTextColor; +@tealBorderColor : @tealTextColor; +@blueBorderColor : @blueTextColor; +@violetBorderColor : @violetTextColor; +@purpleBorderColor : @purpleTextColor; +@pinkBorderColor : @pinkTextColor; +@brownBorderColor : @brownTextColor; + +/*------------------- + Alpha Colors +--------------------*/ + +@subtleTransparentBlack : rgba(0, 0, 0, 0.03); +@transparentBlack : rgba(0, 0, 0, 0.05); +@strongTransparentBlack : rgba(0, 0, 0, 0.10); +@veryStrongTransparentBlack : rgba(0, 0, 0, 0.15); + +@subtleTransparentWhite : rgba(255, 255, 255, 0.02); +@transparentWhite : rgba(255, 255, 255, 0.08); +@strongTransparentWhite : rgba(255, 255, 255, 0.15); + +/*------------------- + Accents +--------------------*/ + +/* Differentiating Neutrals */ +@subtleGradient: linear-gradient(transparent, @transparentBlack); + +/* Differentiating Layers */ +@subtleShadow: + 0px 1px 2px 0 @borderColor +; +@floatingShadow: + 0px 2px 4px 0px rgba(34, 36, 38, 0.12), + 0px 2px 10px 0px rgba(34, 36, 38, 0.15) +; + +/******************************* + Power-User +*******************************/ + + +/*------------------- + Emotive Colors +--------------------*/ + +/* Positive */ +@positiveColor : @green; +@positiveBackgroundColor : #FCFFF5; +@positiveBorderColor : #A3C293; +@positiveHeaderColor : #1A531B; +@positiveTextColor : #2C662D; + +/* Negative */ +@negativeColor : @red; +@negativeBackgroundColor : #FFF6F6; +@negativeBorderColor : #E0B4B4; +@negativeHeaderColor : #912D2B; +@negativeTextColor : #9F3A38; + +/* Info */ +@infoColor : #31CCEC; +@infoBackgroundColor : #F8FFFF; +@infoBorderColor : #A9D5DE; +@infoHeaderColor : #0E566C; +@infoTextColor : #276F86; + +/* Warning */ +@warningColor : #F2C037; +@warningBorderColor : #C9BA9B; +@warningBackgroundColor : #FFFAF3; +@warningHeaderColor : #794B02; +@warningTextColor : #573A08; + +/*------------------- + Paths +--------------------*/ + +/* For source only. Modified in gulp for dist */ +@imagePath : '../../themes/default/assets/images'; +@fontPath : '../../themes/default/assets/fonts'; + +/*------------------- + Em Sizes +--------------------*/ + +/* + This rounds @size values to the closest pixel then expresses that value in (r)em. + This ensures all size values round to exact pixels +*/ +@mini : unit( round(@miniSize * @emSize) / @emSize, rem); +@tiny : unit( round(@tinySize * @emSize) / @emSize, rem); +@small : unit( round(@smallSize * @emSize) / @emSize, rem); +@medium : unit( round(@mediumSize * @emSize) / @emSize, rem); +@large : unit( round(@largeSize * @emSize) / @emSize, rem); +@big : unit( round(@bigSize * @emSize) / @emSize, rem); +@huge : unit( round(@hugeSize * @emSize) / @emSize, rem); +@massive : unit( round(@massiveSize * @emSize) / @emSize, rem); + +/* em */ +@relativeMini : unit( round(@miniSize * @emSize) / @emSize, em); +@relativeTiny : unit( round(@tinySize * @emSize) / @emSize, em); +@relativeSmall : unit( round(@smallSize * @emSize) / @emSize, em); +@relativeMedium : unit( round(@mediumSize * @emSize) / @emSize, em); +@relativeLarge : unit( round(@largeSize * @emSize) / @emSize, em); +@relativeBig : unit( round(@bigSize * @emSize) / @emSize, em); +@relativeHuge : unit( round(@hugeSize * @emSize) / @emSize, em); +@relativeMassive : unit( round(@massiveSize * @emSize) / @emSize, em); + +/* rem */ +@absoluteMini : unit( round(@miniSize * @emSize) / @emSize, rem); +@absoluteTiny : unit( round(@tinySize * @emSize) / @emSize, rem); +@absoluteSmall : unit( round(@smallSize * @emSize) / @emSize, rem); +@absoluteMedium : unit( round(@mediumSize * @emSize) / @emSize, rem); +@absoluteLarge : unit( round(@largeSize * @emSize) / @emSize, rem); +@absoluteBig : unit( round(@bigSize * @emSize) / @emSize, rem); +@absoluteHuge : unit( round(@hugeSize * @emSize) / @emSize, rem); +@absoluteMassive : unit( round(@massiveSize * @emSize) / @emSize, rem); + +/*------------------- + Icons +--------------------*/ + +/* Maximum Glyph Width of Icon */ +@iconWidth : 1.18em; + +/*------------------- + Neutral Text +--------------------*/ + +@darkTextColor : rgba(0, 0, 0, 0.85); +@mutedTextColor : rgba(0, 0, 0, 0.6); +@lightTextColor : rgba(0, 0, 0, 0.4); + +@unselectedTextColor : rgba(0, 0, 0, 0.4); +@hoveredTextColor : rgba(0, 0, 0, 0.8); +@pressedTextColor : rgba(0, 0, 0, 0.9); +@selectedTextColor : rgba(0, 0, 0, 0.95); +@disabledTextColor : rgba(0, 0, 0, 0.2); + +@invertedTextColor : rgba(255, 255, 255, 0.9); +@invertedMutedTextColor : rgba(255, 255, 255, 0.8); +@invertedLightTextColor : rgba(255, 255, 255, 0.7); +@invertedUnselectedTextColor : rgba(255, 255, 255, 0.5); +@invertedHoveredTextColor : rgba(255, 255, 255, 1); +@invertedPressedTextColor : rgba(255, 255, 255, 1); +@invertedSelectedTextColor : rgba(255, 255, 255, 1); +@invertedDisabledTextColor : rgba(255, 255, 255, 0.2); + +/*------------------- + Brand Colors +--------------------*/ + +@facebookColor : #3B5998; +@twitterColor : #55ACEE; +@googlePlusColor : #DD4B39; +@linkedInColor : #1F88BE; +@youtubeColor : #FF0000; +@pinterestColor : #BD081C; +@vkColor : #4D7198; +@instagramColor : #49769C; + +/*------------------- + Borders +--------------------*/ + +@circularRadius : 500rem; + +@borderColor : rgba(34, 36, 38, 0.15); +@strongBorderColor : rgba(34, 36, 38, 0.22); +@internalBorderColor : rgba(34, 36, 38, 0.1); +@selectedBorderColor : rgba(34, 36, 38, 0.35); +@strongSelectedBorderColor : rgba(34, 36, 38, 0.5); +@disabledBorderColor : rgba(34, 36, 38, 0.5); + +@solidInternalBorderColor : #FAFAFA; +@solidBorderColor : #D4D4D5; +@solidSelectedBorderColor : #BCBDBD; + +@whiteBorderColor : rgba(255, 255, 255, 0.1); +@selectedWhiteBorderColor : rgba(255, 255, 255, 0.8); + +@solidWhiteBorderColor : #555555; +@selectedSolidWhiteBorderColor : #999999; + + +/*------------------- + Derived Values +--------------------*/ + +/* Loaders Position Offset */ +@loaderOffset : -(@loaderSize / 2); +@loaderMargin : @loaderOffset 0em 0em @loaderOffset; + +/* Rendered Scrollbar Width */ +@scrollbarWidth: 17px; + +/* Maximum Single Character Glyph Width, aka Capital "W" */ +@glyphWidth: 1.1em; + +/* Used to match floats with text */ +@lineHeightOffset : ((@lineHeight - 1em) / 2); +@headerLineHeightOffset : (@headerLineHeight - 1em) / 2; + +/* Header Spacing */ +@headerTopMargin : ~"calc(2rem - "@headerLineHeightOffset~")"; +@headerBottomMargin : 1rem; +@headerMargin : @headerTopMargin 0em @headerBottomMargin; + +/* Minimum Mobile Width */ +@pageMinWidth : 320px; + +/* Positive / Negative Dupes */ +@successBackgroundColor : @positiveBackgroundColor; +@successColor : @positiveColor; +@successBorderColor : @positiveBorderColor; +@successHeaderColor : @positiveHeaderColor; +@successTextColor : @positiveTextColor; + +@errorBackgroundColor : @negativeBackgroundColor; +@errorColor : @negativeColor; +@errorBorderColor : @negativeBorderColor; +@errorHeaderColor : @negativeHeaderColor; +@errorTextColor : @negativeTextColor; + + +/* Responsive */ +@largestMobileScreen : (@tabletBreakpoint - 1px); +@largestTabletScreen : (@computerBreakpoint - 1px); +@largestSmallMonitor : (@largeMonitorBreakpoint - 1px); +@largestLargeMonitor : (@widescreenMonitorBreakpoint - 1px); + + +/*------------------- + Exact Pixel Values +--------------------*/ +/* + These are used to specify exact pixel values in em + for things like borders that remain constantly + sized as emSize adjusts + + Since there are many more sizes than names for sizes, + these are named by their original pixel values. + +*/ + +@1px : unit( (1 / @emSize), rem); +@2px : unit( (2 / @emSize), rem); +@3px : unit( (3 / @emSize), rem); +@4px : unit( (4 / @emSize), rem); +@5px : unit( (5 / @emSize), rem); +@6px : unit( (6 / @emSize), rem); +@7px : unit( (7 / @emSize), rem); +@8px : unit( (8 / @emSize), rem); +@9px : unit( (9 / @emSize), rem); +@10px : unit( (10 / @emSize), rem); +@11px : unit( (11 / @emSize), rem); +@12px : unit( (12 / @emSize), rem); +@13px : unit( (13 / @emSize), rem); +@14px : unit( (14 / @emSize), rem); +@15px : unit( (15 / @emSize), rem); +@16px : unit( (16 / @emSize), rem); +@17px : unit( (17 / @emSize), rem); +@18px : unit( (18 / @emSize), rem); +@19px : unit( (19 / @emSize), rem); +@20px : unit( (20 / @emSize), rem); +@21px : unit( (21 / @emSize), rem); +@22px : unit( (22 / @emSize), rem); +@23px : unit( (23 / @emSize), rem); +@24px : unit( (24 / @emSize), rem); +@25px : unit( (25 / @emSize), rem); +@26px : unit( (26 / @emSize), rem); +@27px : unit( (27 / @emSize), rem); +@28px : unit( (28 / @emSize), rem); +@29px : unit( (29 / @emSize), rem); +@30px : unit( (30 / @emSize), rem); +@31px : unit( (31 / @emSize), rem); +@32px : unit( (32 / @emSize), rem); +@33px : unit( (33 / @emSize), rem); +@34px : unit( (34 / @emSize), rem); +@35px : unit( (35 / @emSize), rem); +@36px : unit( (36 / @emSize), rem); +@37px : unit( (37 / @emSize), rem); +@38px : unit( (38 / @emSize), rem); +@39px : unit( (39 / @emSize), rem); +@40px : unit( (40 / @emSize), rem); +@41px : unit( (41 / @emSize), rem); +@42px : unit( (42 / @emSize), rem); +@43px : unit( (43 / @emSize), rem); +@44px : unit( (44 / @emSize), rem); +@45px : unit( (45 / @emSize), rem); +@46px : unit( (46 / @emSize), rem); +@47px : unit( (47 / @emSize), rem); +@48px : unit( (48 / @emSize), rem); +@49px : unit( (49 / @emSize), rem); +@50px : unit( (50 / @emSize), rem); +@51px : unit( (51 / @emSize), rem); +@52px : unit( (52 / @emSize), rem); +@53px : unit( (53 / @emSize), rem); +@54px : unit( (54 / @emSize), rem); +@55px : unit( (55 / @emSize), rem); +@56px : unit( (56 / @emSize), rem); +@57px : unit( (57 / @emSize), rem); +@58px : unit( (58 / @emSize), rem); +@59px : unit( (59 / @emSize), rem); +@60px : unit( (60 / @emSize), rem); +@61px : unit( (61 / @emSize), rem); +@62px : unit( (62 / @emSize), rem); +@63px : unit( (63 / @emSize), rem); +@64px : unit( (64 / @emSize), rem); + +@relative1px : unit( (1 / @emSize), em); +@relative2px : unit( (2 / @emSize), em); +@relative3px : unit( (3 / @emSize), em); +@relative4px : unit( (4 / @emSize), em); +@relative5px : unit( (5 / @emSize), em); +@relative6px : unit( (6 / @emSize), em); +@relative7px : unit( (7 / @emSize), em); +@relative8px : unit( (8 / @emSize), em); +@relative9px : unit( (9 / @emSize), em); +@relative10px : unit( (10 / @emSize), em); +@relative11px : unit( (11 / @emSize), em); +@relative12px : unit( (12 / @emSize), em); +@relative13px : unit( (13 / @emSize), em); +@relative14px : unit( (14 / @emSize), em); +@relative15px : unit( (15 / @emSize), em); +@relative16px : unit( (16 / @emSize), em); +@relative17px : unit( (17 / @emSize), em); +@relative18px : unit( (18 / @emSize), em); +@relative19px : unit( (19 / @emSize), em); +@relative20px : unit( (20 / @emSize), em); +@relative21px : unit( (21 / @emSize), em); +@relative22px : unit( (22 / @emSize), em); +@relative23px : unit( (23 / @emSize), em); +@relative24px : unit( (24 / @emSize), em); +@relative25px : unit( (25 / @emSize), em); +@relative26px : unit( (26 / @emSize), em); +@relative27px : unit( (27 / @emSize), em); +@relative28px : unit( (28 / @emSize), em); +@relative29px : unit( (29 / @emSize), em); +@relative30px : unit( (30 / @emSize), em); +@relative31px : unit( (31 / @emSize), em); +@relative32px : unit( (32 / @emSize), em); +@relative33px : unit( (33 / @emSize), em); +@relative34px : unit( (34 / @emSize), em); +@relative35px : unit( (35 / @emSize), em); +@relative36px : unit( (36 / @emSize), em); +@relative37px : unit( (37 / @emSize), em); +@relative38px : unit( (38 / @emSize), em); +@relative39px : unit( (39 / @emSize), em); +@relative40px : unit( (40 / @emSize), em); +@relative41px : unit( (41 / @emSize), em); +@relative42px : unit( (42 / @emSize), em); +@relative43px : unit( (43 / @emSize), em); +@relative44px : unit( (44 / @emSize), em); +@relative45px : unit( (45 / @emSize), em); +@relative46px : unit( (46 / @emSize), em); +@relative47px : unit( (47 / @emSize), em); +@relative48px : unit( (48 / @emSize), em); +@relative49px : unit( (49 / @emSize), em); +@relative50px : unit( (50 / @emSize), em); +@relative51px : unit( (51 / @emSize), em); +@relative52px : unit( (52 / @emSize), em); +@relative53px : unit( (53 / @emSize), em); +@relative54px : unit( (54 / @emSize), em); +@relative55px : unit( (55 / @emSize), em); +@relative56px : unit( (56 / @emSize), em); +@relative57px : unit( (57 / @emSize), em); +@relative58px : unit( (58 / @emSize), em); +@relative59px : unit( (59 / @emSize), em); +@relative60px : unit( (60 / @emSize), em); +@relative61px : unit( (61 / @emSize), em); +@relative62px : unit( (62 / @emSize), em); +@relative63px : unit( (63 / @emSize), em); +@relative64px : unit( (64 / @emSize), em); + +/* Columns */ +@oneWide : (1 / @columnCount * 100%); +@twoWide : (2 / @columnCount * 100%); +@threeWide : (3 / @columnCount * 100%); +@fourWide : (4 / @columnCount * 100%); +@fiveWide : (5 / @columnCount * 100%); +@sixWide : (6 / @columnCount * 100%); +@sevenWide : (7 / @columnCount * 100%); +@eightWide : (8 / @columnCount * 100%); +@nineWide : (9 / @columnCount * 100%); +@tenWide : (10 / @columnCount * 100%); +@elevenWide : (11 / @columnCount * 100%); +@twelveWide : (12 / @columnCount * 100%); +@thirteenWide : (13 / @columnCount * 100%); +@fourteenWide : (14 / @columnCount * 100%); +@fifteenWide : (15 / @columnCount * 100%); +@sixteenWide : (16 / @columnCount * 100%); + +@oneColumn : (1 / 1 * 100%); +@twoColumn : (1 / 2 * 100%); +@threeColumn : (1 / 3 * 100%); +@fourColumn : (1 / 4 * 100%); +@fiveColumn : (1 / 5 * 100%); +@sixColumn : (1 / 6 * 100%); +@sevenColumn : (1 / 7 * 100%); +@eightColumn : (1 / 8 * 100%); +@nineColumn : (1 / 9 * 100%); +@tenColumn : (1 / 10 * 100%); +@elevenColumn : (1 / 11 * 100%); +@twelveColumn : (1 / 12 * 100%); +@thirteenColumn : (1 / 13 * 100%); +@fourteenColumn : (1 / 14 * 100%); +@fifteenColumn : (1 / 15 * 100%); +@sixteenColumn : (1 / 16 * 100%); + + +/******************************* + States +*******************************/ + +/*------------------- + Disabled +--------------------*/ + +@disabledOpacity: 0.45; +@disabledTextColor: rgba(40, 40, 40, 0.3); +@invertedDisabledTextColor: rgba(225, 225, 225, 0.3); + +/*------------------- + Hover +--------------------*/ + +/*--- Shadows ---*/ +@floatingShadowHover: + 0px 2px 4px 0px rgba(34, 36, 38, 0.15), + 0px 2px 10px 0px rgba(34, 36, 38, 0.25) +; + +/*--- Colors ---*/ +@primaryColorHover : saturate(darken(@primaryColor, 5), 10, relative); +@secondaryColorHover : saturate(lighten(@secondaryColor, 5), 10, relative); +@lightPrimaryColorHover : saturate(darken(@lightPrimaryColor, 5), 10, relative); +@lightSecondaryColorHover : saturate(lighten(@lightSecondaryColor, 5), 10, relative); + +@redHover : saturate(darken(@red, 5), 10, relative); +@orangeHover : saturate(darken(@orange, 5), 10, relative); +@yellowHover : saturate(darken(@yellow, 5), 10, relative); +@oliveHover : saturate(darken(@olive, 5), 10, relative); +@greenHover : saturate(darken(@green, 5), 10, relative); +@tealHover : saturate(darken(@teal, 5), 10, relative); +@blueHover : saturate(darken(@blue, 5), 10, relative); +@violetHover : saturate(darken(@violet, 5), 10, relative); +@purpleHover : saturate(darken(@purple, 5), 10, relative); +@pinkHover : saturate(darken(@pink, 5), 10, relative); +@brownHover : saturate(darken(@brown, 5), 10, relative); + +@lightRedHover : saturate(darken(@lightRed, 5), 10, relative); +@lightOrangeHover : saturate(darken(@lightOrange, 5), 10, relative); +@lightYellowHover : saturate(darken(@lightYellow, 5), 10, relative); +@lightOliveHover : saturate(darken(@lightOlive, 5), 10, relative); +@lightGreenHover : saturate(darken(@lightGreen, 5), 10, relative); +@lightTealHover : saturate(darken(@lightTeal, 5), 10, relative); +@lightBlueHover : saturate(darken(@lightBlue, 5), 10, relative); +@lightVioletHover : saturate(darken(@lightViolet, 5), 10, relative); +@lightPurpleHover : saturate(darken(@lightPurple, 5), 10, relative); +@lightPinkHover : saturate(darken(@lightPink, 5), 10, relative); +@lightBrownHover : saturate(darken(@lightBrown, 5), 10, relative); +@lightGreyHover : saturate(darken(@lightGrey, 5), 10, relative); +@lightBlackHover : saturate(darken(@fullBlack, 5), 10, relative); + +/*--- Emotive ---*/ +@positiveColorHover : saturate(darken(@positiveColor, 5), 10, relative); +@negativeColorHover : saturate(darken(@negativeColor, 5), 10, relative); + +/*--- Brand ---*/ +@facebookHoverColor : saturate(darken(@facebookColor, 5), 10, relative); +@twitterHoverColor : saturate(darken(@twitterColor, 5), 10, relative); +@googlePlusHoverColor : saturate(darken(@googlePlusColor, 5), 10, relative); +@linkedInHoverColor : saturate(darken(@linkedInColor, 5), 10, relative); +@youtubeHoverColor : saturate(darken(@youtubeColor, 5), 10, relative); +@instagramHoverColor : saturate(darken(@instagramColor, 5), 10, relative); +@pinterestHoverColor : saturate(darken(@pinterestColor, 5), 10, relative); +@vkHoverColor : saturate(darken(@vkColor, 5), 10, relative); + +/*--- Dark Tones ---*/ +@fullBlackHover : lighten(@fullBlack, 5); +@blackHover : lighten(@black, 5); +@greyHover : lighten(@grey, 5); + +/*--- Light Tones ---*/ +@whiteHover : darken(@white, 5); +@offWhiteHover : darken(@offWhite, 5); +@darkWhiteHover : darken(@darkWhite, 5); + +/*------------------- + Focus +--------------------*/ + +/*--- Colors ---*/ +@primaryColorFocus : saturate(darken(@primaryColor, 8), 20, relative); +@secondaryColorFocus : saturate(lighten(@secondaryColor, 8), 20, relative); +@lightPrimaryColorFocus : saturate(darken(@lightPrimaryColor, 8), 20, relative); +@lightSecondaryColorFocus : saturate(lighten(@lightSecondaryColor, 8), 20, relative); + +@redFocus : saturate(darken(@red, 8), 20, relative); +@orangeFocus : saturate(darken(@orange, 8), 20, relative); +@yellowFocus : saturate(darken(@yellow, 8), 20, relative); +@oliveFocus : saturate(darken(@olive, 8), 20, relative); +@greenFocus : saturate(darken(@green, 8), 20, relative); +@tealFocus : saturate(darken(@teal, 8), 20, relative); +@blueFocus : saturate(darken(@blue, 8), 20, relative); +@violetFocus : saturate(darken(@violet, 8), 20, relative); +@purpleFocus : saturate(darken(@purple, 8), 20, relative); +@pinkFocus : saturate(darken(@pink, 8), 20, relative); +@brownFocus : saturate(darken(@brown, 8), 20, relative); + +@lightRedFocus : saturate(darken(@lightRed, 8), 20, relative); +@lightOrangeFocus : saturate(darken(@lightOrange, 8), 20, relative); +@lightYellowFocus : saturate(darken(@lightYellow, 8), 20, relative); +@lightOliveFocus : saturate(darken(@lightOlive, 8), 20, relative); +@lightGreenFocus : saturate(darken(@lightGreen, 8), 20, relative); +@lightTealFocus : saturate(darken(@lightTeal, 8), 20, relative); +@lightBlueFocus : saturate(darken(@lightBlue, 8), 20, relative); +@lightVioletFocus : saturate(darken(@lightViolet, 8), 20, relative); +@lightPurpleFocus : saturate(darken(@lightPurple, 8), 20, relative); +@lightPinkFocus : saturate(darken(@lightPink, 8), 20, relative); +@lightBrownFocus : saturate(darken(@lightBrown, 8), 20, relative); +@lightGreyFocus : saturate(darken(@lightGrey, 8), 20, relative); +@lightBlackFocus : saturate(darken(@fullBlack, 8), 20, relative); + +/*--- Emotive ---*/ +@positiveColorFocus : saturate(darken(@positiveColor, 8), 20, relative); +@negativeColorFocus : saturate(darken(@negativeColor, 8), 20, relative); + +/*--- Brand ---*/ +@facebookFocusColor : saturate(darken(@facebookColor, 8), 20, relative); +@twitterFocusColor : saturate(darken(@twitterColor, 8), 20, relative); +@googlePlusFocusColor : saturate(darken(@googlePlusColor, 8), 20, relative); +@linkedInFocusColor : saturate(darken(@linkedInColor, 8), 20, relative); +@youtubeFocusColor : saturate(darken(@youtubeColor, 8), 20, relative); +@instagramFocusColor : saturate(darken(@instagramColor, 8), 20, relative); +@pinterestFocusColor : saturate(darken(@pinterestColor, 8), 20, relative); +@vkFocusColor : saturate(darken(@vkColor, 8), 20, relative); + +/*--- Dark Tones ---*/ +@fullBlackFocus : lighten(@fullBlack, 8); +@blackFocus : lighten(@black, 8); +@greyFocus : lighten(@grey, 8); + +/*--- Light Tones ---*/ +@whiteFocus : darken(@white, 8); +@offWhiteFocus : darken(@offWhite, 8); +@darkWhiteFocus : darken(@darkWhite, 8); + + +/*------------------- + Down (:active) +--------------------*/ + +/*--- Colors ---*/ +@primaryColorDown : darken(@primaryColor, 10); +@secondaryColorDown : lighten(@secondaryColor, 10); +@lightPrimaryColorDown : darken(@lightPrimaryColor, 10); +@lightSecondaryColorDown : lighten(@lightSecondaryColor, 10); + +@redDown : darken(@red, 10); +@orangeDown : darken(@orange, 10); +@yellowDown : darken(@yellow, 10); +@oliveDown : darken(@olive, 10); +@greenDown : darken(@green, 10); +@tealDown : darken(@teal, 10); +@blueDown : darken(@blue, 10); +@violetDown : darken(@violet, 10); +@purpleDown : darken(@purple, 10); +@pinkDown : darken(@pink, 10); +@brownDown : darken(@brown, 10); + +@lightRedDown : darken(@lightRed, 10); +@lightOrangeDown : darken(@lightOrange, 10); +@lightYellowDown : darken(@lightYellow, 10); +@lightOliveDown : darken(@lightOlive, 10); +@lightGreenDown : darken(@lightGreen, 10); +@lightTealDown : darken(@lightTeal, 10); +@lightBlueDown : darken(@lightBlue, 10); +@lightVioletDown : darken(@lightViolet, 10); +@lightPurpleDown : darken(@lightPurple, 10); +@lightPinkDown : darken(@lightPink, 10); +@lightBrownDown : darken(@lightBrown, 10); +@lightGreyDown : darken(@lightGrey, 10); +@lightBlackDown : darken(@fullBlack, 10); + +/*--- Emotive ---*/ +@positiveColorDown : darken(@positiveColor, 10); +@negativeColorDown : darken(@negativeColor, 10); + +/*--- Brand ---*/ +@facebookDownColor : darken(@facebookColor, 10); +@twitterDownColor : darken(@twitterColor, 10); +@googlePlusDownColor : darken(@googlePlusColor, 10); +@linkedInDownColor : darken(@linkedInColor, 10); +@youtubeDownColor : darken(@youtubeColor, 10); +@instagramDownColor : darken(@instagramColor, 10); +@pinterestDownColor : darken(@pinterestColor, 10); +@vkDownColor : darken(@vkColor, 10); + +/*--- Dark Tones ---*/ +@fullBlackDown : lighten(@fullBlack, 10); +@blackDown : lighten(@black, 10); +@greyDown : lighten(@grey, 10); + +/*--- Light Tones ---*/ +@whiteDown : darken(@white, 10); +@offWhiteDown : darken(@offWhite, 10); +@darkWhiteDown : darken(@darkWhite, 10); + + +/*------------------- + Active +--------------------*/ + +/*--- Colors ---*/ +@primaryColorActive : saturate(darken(@primaryColor, 5), 15, relative); +@secondaryColorActive : saturate(lighten(@secondaryColor, 5), 15, relative); +@lightPrimaryColorActive : saturate(darken(@lightPrimaryColor, 5), 15, relative); +@lightSecondaryColorActive : saturate(lighten(@lightSecondaryColor, 5), 15, relative); + +@redActive : saturate(darken(@red, 5), 15, relative); +@orangeActive : saturate(darken(@orange, 5), 15, relative); +@yellowActive : saturate(darken(@yellow, 5), 15, relative); +@oliveActive : saturate(darken(@olive, 5), 15, relative); +@greenActive : saturate(darken(@green, 5), 15, relative); +@tealActive : saturate(darken(@teal, 5), 15, relative); +@blueActive : saturate(darken(@blue, 5), 15, relative); +@violetActive : saturate(darken(@violet, 5), 15, relative); +@purpleActive : saturate(darken(@purple, 5), 15, relative); +@pinkActive : saturate(darken(@pink, 5), 15, relative); +@brownActive : saturate(darken(@brown, 5), 15, relative); + +@lightRedActive : saturate(darken(@lightRed, 5), 15, relative); +@lightOrangeActive : saturate(darken(@lightOrange, 5), 15, relative); +@lightYellowActive : saturate(darken(@lightYellow, 5), 15, relative); +@lightOliveActive : saturate(darken(@lightOlive, 5), 15, relative); +@lightGreenActive : saturate(darken(@lightGreen, 5), 15, relative); +@lightTealActive : saturate(darken(@lightTeal, 5), 15, relative); +@lightBlueActive : saturate(darken(@lightBlue, 5), 15, relative); +@lightVioletActive : saturate(darken(@lightViolet, 5), 15, relative); +@lightPurpleActive : saturate(darken(@lightPurple, 5), 15, relative); +@lightPinkActive : saturate(darken(@lightPink, 5), 15, relative); +@lightBrownActive : saturate(darken(@lightBrown, 5), 15, relative); +@lightGreyActive : saturate(darken(@lightGrey, 5), 15, relative); +@lightBlackActive : saturate(darken(@fullBlack, 5), 15, relative); + +/*--- Emotive ---*/ +@positiveColorActive : saturate(darken(@positiveColor, 5), 15, relative); +@negativeColorActive : saturate(darken(@negativeColor, 5), 15, relative); + +/*--- Brand ---*/ +@facebookActiveColor : saturate(darken(@facebookColor, 5), 15, relative); +@twitterActiveColor : saturate(darken(@twitterColor, 5), 15, relative); +@googlePlusActiveColor : saturate(darken(@googlePlusColor, 5), 15, relative); +@linkedInActiveColor : saturate(darken(@linkedInColor, 5), 15, relative); +@youtubeActiveColor : saturate(darken(@youtubeColor, 5), 15, relative); +@instagramActiveColor : saturate(darken(@instagramColor, 5), 15, relative); +@pinterestActiveColor : saturate(darken(@pinterestColor, 5), 15, relative); +@vkActiveColor : saturate(darken(@vkColor, 5), 15, relative); + +/*--- Dark Tones ---*/ +@fullBlackActive : darken(@fullBlack, 5); +@blackActive : darken(@black, 5); +@greyActive : darken(@grey, 5); + +/*--- Light Tones ---*/ +@whiteActive : darken(@white, 5); +@offWhiteActive : darken(@offWhite, 5); +@darkWhiteActive : darken(@darkWhite, 5); diff --git a/src/theme/site/modules/accordion.overrides b/src/theme/site/modules/accordion.overrides new file mode 100644 index 0000000..e4bd727 --- /dev/null +++ b/src/theme/site/modules/accordion.overrides @@ -0,0 +1,28 @@ +/******************************* + Theme Overrides +*******************************/ +@font-face { + font-family: 'Accordion'; + src: + url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), + url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff') + ; + font-weight: normal; + font-style: normal; +} + +/* Dropdown Icon */ +.ui.accordion .title .dropdown.icon, +.ui.accordion .accordion .title .dropdown.icon { + font-family: Accordion; + line-height: 1; + backface-visibility: hidden; + font-weight: normal; + font-style: normal; + text-align: center; +} + +.ui.accordion .title .dropdown.icon:before, +.ui.accordion .accordion .title .dropdown.icon:before { + content: '\f0da'/*rtl:'\f0d9'*/; +} diff --git a/src/theme/site/modules/accordion.variables b/src/theme/site/modules/accordion.variables new file mode 100644 index 0000000..64cef4e --- /dev/null +++ b/src/theme/site/modules/accordion.variables @@ -0,0 +1,100 @@ +/******************************* + Accordion +*******************************/ + +@boxShadow: none; + +/* Title */ +@titleFont: @headerFont; +@titlePadding: 0.5em 0em; +@titleFontSize: 1em; +@titleColor: @textColor; + +/* Icon */ +@iconOpacity: 1; +@iconFontSize: 1em; +@iconFloat: none; +@iconWidth: 1.25em; +@iconHeight: 1em; +@iconDisplay: inline-block; +@iconMargin: 0em 0.25rem 0em 0rem; +@iconPadding: 0em; +@iconTransition: + transform @defaultDuration @defaultEasing, + opacity @defaultDuration @defaultEasing +; +@iconVerticalAlign: baseline; +@iconTransform: none; + +/* Child Accordion */ +@childAccordionMargin: 1em 0em 0em; +@childAccordionPadding: 0em; + +/* Content */ +@contentMargin: ''; +@contentPadding: 0.5em 0em 1em; + +/*------------------- + Coupling +--------------------*/ + +@menuTitlePadding: 0em; +@menuIconFloat: right; +@menuIconMargin: @lineHeightOffset 0em 0em 1em; +@menuIconTransform: rotate(180deg); + + +/*------------------- + States +--------------------*/ + +@activeIconTransform: rotate(90deg); + +/*------------------- + Variations +--------------------*/ + +/* Styled */ +@styledWidth: 600px; +@styledBackground: @white; +@styledBorderRadius: @defaultBorderRadius; +@styledBoxShadow: + @subtleShadow, + 0px 0px 0px 1px @borderColor +; + +/* Content */ +@styledContentMargin: 0em; +@styledContentPadding: 0.5em 1em 1.5em; + +/* Child Content */ +@styledChildContentMargin: 0em; +@styledChildContentPadding: @styledContentPadding; + +/* Styled Title */ +@styledTitleMargin: 0em; +@styledTitlePadding: 0.75em 1em; +@styledTitleFontWeight: @bold; +@styledTitleColor: @unselectedTextColor; +@styledTitleTransition: background-color @defaultDuration @defaultEasing; +@styledTitleBorder: 1px solid @borderColor; +@styledTitleTransition: + background @defaultDuration @defaultEasing, + color @defaultDuration @defaultEasing +; + +/* Styled Title States */ +@styledTitleHoverBackground: transparent; +@styledTitleHoverColor: @textColor; +@styledActiveTitleBackground: transparent; +@styledActiveTitleColor: @selectedTextColor; + +/* Styled Child Title States */ +@styledHoverChildTitleBackground: @styledTitleHoverBackground; +@styledHoverChildTitleColor: @styledTitleHoverColor; +@styledActiveChildTitleBackground: @styledActiveTitleBackground; +@styledActiveChildTitleColor: @styledActiveTitleColor; + +/* Inverted */ +@invertedTitleColor: @invertedTextColor; + diff --git a/src/theme/site/modules/chatroom.overrides b/src/theme/site/modules/chatroom.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/modules/chatroom.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/modules/chatroom.variables b/src/theme/site/modules/chatroom.variables new file mode 100644 index 0000000..0da971c --- /dev/null +++ b/src/theme/site/modules/chatroom.variables @@ -0,0 +1,3 @@ +/******************************* + Chatroom +*******************************/ \ No newline at end of file diff --git a/src/theme/site/modules/checkbox.overrides b/src/theme/site/modules/checkbox.overrides new file mode 100644 index 0000000..e83ad9f --- /dev/null +++ b/src/theme/site/modules/checkbox.overrides @@ -0,0 +1,36 @@ +/******************************* + Theme Overrides +*******************************/ + +@font-face { + font-family: 'Checkbox'; + src: + url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype') + ; +} + +/* Checkmark */ +.ui.checkbox label:after, +.ui.checkbox .box:after { + font-family: 'Checkbox'; +} + +/* Checked */ +.ui.checkbox input:checked ~ .box:after, +.ui.checkbox input:checked ~ label:after { + content: '\e800'; +} + +/* Indeterminate */ +.ui.checkbox input:indeterminate ~ .box:after, +.ui.checkbox input:indeterminate ~ label:after { + font-size: 12px; + content: '\e801'; +} + + +/* UTF Reference +.check:before { content: '\e800'; } +.dash:before { content: '\e801'; } +.plus:before { content: '\e802'; } +*/ diff --git a/src/theme/site/modules/checkbox.variables b/src/theme/site/modules/checkbox.variables new file mode 100644 index 0000000..d262cbb --- /dev/null +++ b/src/theme/site/modules/checkbox.variables @@ -0,0 +1,193 @@ +/******************************* + Checkbox +*******************************/ + +@checkboxSize: 17px; +@checkboxColor: @textColor; +@checkboxLineHeight: @checkboxSize; + + +/* Label */ +@labelDistance: 1.85714em; /* 26px @ 14/em */ + +/* Checkbox */ +@checkboxBackground: @white; +@checkboxBorder: 1px solid @solidBorderColor; +@checkboxBorderRadius: @3px; +@checkboxTransition: + border @defaultDuration @defaultEasing, + opacity @defaultDuration @defaultEasing, + transform @defaultDuration @defaultEasing, + box-shadow @defaultDuration @defaultEasing +; + +/* Checkmark */ +@checkboxCheckFontSize: 14px; +@checkboxCheckTop: 0px; +@checkboxCheckLeft: 0px; +@checkboxCheckSize: @checkboxSize; + +/* Label */ +@labelFontSize: @relativeMedium; +@labelColor: @textColor; +@labelTransition: color @defaultDuration @defaultEasing; + +/*------------------- + States +--------------------*/ + +/* Hover */ +@checkboxHoverBackground: @checkboxBackground; +@checkboxHoverBorderColor: @selectedBorderColor; +@labelHoverColor: @hoveredTextColor; + +/* Pressed */ +@checkboxPressedBackground: @offWhite; +@checkboxPressedBorderColor: @selectedBorderColor; +@checkboxPressedColor: @selectedTextColor; +@labelPressedColor: @selectedTextColor; + +/* Focus */ +@checkboxFocusBackground: @white; +@checkboxFocusBorderColor: @focusedFormMutedBorderColor; +@checkboxFocusCheckColor: @selectedTextColor; +@labelFocusColor: @selectedTextColor; + +/* Active */ +@labelActiveColor: @selectedTextColor; +@checkboxActiveBackground: @white; +@checkboxActiveBorderColor: @selectedBorderColor; +@checkboxActiveCheckColor: @selectedTextColor; +@checkboxActiveCheckOpacity: 1; + +/* Active Focus */ +@checkboxActiveFocusBackground: @white; +@checkboxActiveFocusBorderColor: @checkboxFocusBorderColor; +@checkboxActiveFocusCheckColor: @selectedTextColor; + +/* Indeterminate */ +@checkboxIndeterminateBackground: @checkboxActiveBackground; +@checkboxIndeterminateBorderColor: @checkboxActiveBorderColor; +@checkboxIndeterminateCheckOpacity: 1; +@checkboxIndeterminateCheckColor: @checkboxActiveCheckColor; + +/* Disabled */ +@disabledCheckboxOpacity: 0.5; +@disabledCheckboxLabelColor: rgba(0, 0, 0, 1); + +/*------------------- + Types +--------------------*/ + +/* Radio */ +/* Uses px to avoid rounding issues with circles */ + +@radioSize: 15px; +@radioTop: 1px; +@radioLeft: 0px; +@radioLabelDistance: @labelDistance; + +@bulletTop: 1px; +@bulletLeft: 0px; +@bulletScale: (7 / 15); /* 7px as unitless value from radio size */ +@bulletColor: @textColor; +@bulletRadius: @circularRadius; + +@radioFocusBackground: @checkboxFocusBackground; +@radioFocusBulletColor: @checkboxFocusCheckColor; + +@radioActiveBackground: @checkboxActiveBackground; +@radioActiveBulletColor: @checkboxActiveCheckColor; + +@radioActiveFocusBackground: @checkboxActiveFocusBackground; +@radioActiveFocusBulletColor: @checkboxActiveFocusCheckColor; + +/* Slider & Toggle Handle */ +@handleBackground: @white @subtleGradient; +@handleBoxShadow: + @subtleShadow, + 0px 0px 0px 1px @borderColor inset +; + +/* Slider */ +@sliderHandleSize: 1.5rem; +@sliderLineWidth: 3.5rem; +@sliderTransitionDuration: 0.3s; + +@sliderHandleOffset: (1rem - @sliderHandleSize) / 2; +@sliderHandleTransition: left @sliderTransitionDuration @defaultEasing; + +@sliderWidth: @sliderLineWidth; +@sliderHeight: (@sliderHandleSize + @sliderHandleOffset); + +@sliderLineHeight: @3px; +@sliderLineVerticalOffset: 0.4rem; +@sliderLineColor: @transparentBlack; +@sliderLineRadius: @circularRadius; +@sliderLineTransition: background @sliderTransitionDuration @defaultEasing; + +@sliderTravelDistance: @sliderLineWidth - @sliderHandleSize; + +@sliderLabelDistance: @sliderLineWidth + 1rem; +@sliderOffLabelColor: @unselectedTextColor; + +@sliderLabelLineHeight: 1rem; + +/* Slider States */ +@sliderHoverLaneBackground: @veryStrongTransparentBlack; +@sliderHoverLabelColor: @hoveredTextColor; + +@sliderOnLineColor: @lightBlack; +@sliderOnLabelColor: @selectedTextColor; + +@sliderOnFocusLineColor: @lightBlackFocus; +@sliderOnFocusLabelColor: @sliderOnLabelColor; + + + +/* Toggle */ +@toggleLaneWidth: 3.5rem; +@toggleHandleSize: 1.5rem; +@toggleTransitionDuration: 0.2s; + +@toggleWidth: @toggleLaneWidth; +@toggleHeight: @toggleHandleSize; + +@toggleHandleRadius: @circularRadius; +@toggleHandleOffset: 0rem; +@toggleHandleTransition: + background @sliderTransitionDuration @defaultEasing, + left @sliderTransitionDuration @defaultEasing +; + +@toggleLaneBackground: @transparentBlack; +@toggleLaneHeight: @toggleHandleSize; +@toggleLaneBoxShadow: none; +@toggleLaneVerticalOffset: 0rem; +@toggleOffOffset: -0.05rem; +@toggleOnOffset: (@toggleLaneWidth - @toggleHandleSize) + 0.15rem; + +@toggleLabelDistance: @toggleLaneWidth + 1rem; +@toggleLabelLineHeight: 1.5rem; +@toggleLabelOffset: 0.15em; + + +@toggleFocusColor: @veryStrongTransparentBlack; +@toggleHoverColor: @toggleFocusColor; + +@toggleOffLabelColor: @checkboxColor; +@toggleOffHandleBoxShadow: @handleBoxShadow; + +@toggleOnLabelColor: @selectedTextColor; +@toggleOnLaneColor: @primaryColor; + +@toggleOnHandleBoxShadow: @handleBoxShadow; + +@toggleOnFocusLaneColor: @primaryColorFocus; +@toggleOnFocusLabelColor: @toggleOnLabelColor; + + + +/*------------------- + Variations +--------------------*/ diff --git a/src/theme/site/modules/dimmer.overrides b/src/theme/site/modules/dimmer.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/theme/site/modules/dimmer.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/theme/site/modules/dimmer.variables b/src/theme/site/modules/dimmer.variables new file mode 100644 index 0000000..81f6e86 --- /dev/null +++ b/src/theme/site/modules/dimmer.variables @@ -0,0 +1,58 @@ +/******************************* + Dimmer +*******************************/ + +@dimmablePosition: relative; +@dimmerPosition: absolute; + +@backgroundColor: rgba(0, 0, 0 , 0.85); +@lineHeight: 1; +@perspective: 2000px; +@padding: 1em; + +@duration: 0.5s; +@transition: + background-color @duration linear +; +@zIndex: 1000; +@textAlign: center; +@verticalAlign: middle; +@textColor: @white; +@overflow: hidden; + +@blurredStartFilter: ~"blur(0px) grayscale(0)"; +@blurredEndFilter: ~"blur(5px) grayscale(0.7)"; +@blurredTransition: 800ms filter @defaultEasing; + +@blurredBackgroundColor: rgba(0, 0, 0, 0.6); +@blurredInvertedBackgroundColor: rgba(255, 255, 255, 0.6); + +/* Hidden (Default) */ +@hiddenOpacity: 0; + +/* Visible */ +@visibleOpacity: 1; + +/*------------------- + Types +--------------------*/ + +/* Page Dimmer*/ +@transformStyle: ''; +@pageDimmerPosition: fixed; + + +/*------------------- + Variations +--------------------*/ + +/* Inverted */ +@invertedBackgroundColor: rgba(255, 255, 255, 0.85); +@invertedTextColor: @textColor; + +/* Simple */ +@simpleZIndex: 1; +@simpleStartBackgroundColor: rgba(0, 0, 0, 0); +@simpleEndBackgroundColor: @backgroundColor; +@simpleInvertedStartBackgroundColor: rgba(255, 255, 255, 0); +@simpleInvertedEndBackgroundColor: @invertedBackgroundColor; diff --git a/src/theme/site/modules/dropdown.overrides b/src/theme/site/modules/dropdown.overrides new file mode 100644 index 0000000..744898e --- /dev/null +++ b/src/theme/site/modules/dropdown.overrides @@ -0,0 +1,59 @@ +/******************************* + Theme Overrides +*******************************/ + +/* Dropdown Carets */ +@font-face { + font-family: 'Dropdown'; + src: + url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA8AAAAACFAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAchGgaq0dERUYAAAF0AAAAHAAAAB4AJwAPT1MvMgAAAZAAAABDAAAAVnW4TJdjbWFwAAAB1AAAAEsAAAFS8CcaqmN2dCAAAAIgAAAABAAAAAQAEQFEZ2FzcAAAAiQAAAAIAAAACP//AANnbHlmAAACLAAAAQoAAAGkrRHP9WhlYWQAAAM4AAAAMAAAADYPK8YyaGhlYQAAA2gAAAAdAAAAJANCAb1obXR4AAADiAAAACIAAAAiCBkAOGxvY2EAAAOsAAAAFAAAABQBnAIybWF4cAAAA8AAAAAfAAAAIAEVAF5uYW1lAAAD4AAAATAAAAKMFGlj5HBvc3QAAAUQAAAARgAAAHJoedjqd2ViZgAABVgAAAAGAAAABrO7W5UAAAABAAAAANXulPUAAAAA1r4hgAAAAADXu2Q1eNpjYGRgYOABYjEgZmJgBEIOIGYB8xgAA/YAN3jaY2BktGOcwMDKwMI4jTGNgYHBHUp/ZZBkaGFgYGJgZWbACgLSXFMYHFT/fLjFeOD/AQY9xjMMbkBhRpAcAN48DQYAeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMqn8+8H649f8/lHX9//9b7Pzf+fWgusCAkY0BzmUE6gHpQwGMDMMeAACbxg7SAAARAUQAAAAB//8AAnjadZBPSsNAGMXfS+yMqYgOhpSuSlKadmUhiVEhEMQzFF22m17BbbvzCh5BXCUn6EG8gjeQ4DepwYo4i+/ffL95j4EDA+CFC7jQuKyIeVHrI3wkleq9F7XrSInKteOeHdda8bOoaeepSc00NWPz/LRec9G8GabyGtEdF7h19z033GAMTK7zbM42xNEZpzYof0RtQ5CUHAQJ73OtVyutc+3b7Ou//b8XNlsPx3jgjUifABdhEohKJJL5iM5p39uqc7X1+sRQSqmGrUVhlsJ4lpmEUVwyT8SUYtg0P9DyNzPADDs+tjrGV6KRCRfsui3eHcL4/p8ZXvfMlcnEU+CLv7hDykOP+AKTPTxbAAB42mNgZGBgAGKuf5KP4vltvjLIMzGAwLV9ig0g+vruFFMQzdjACOJzMIClARh0CTJ42mNgZGBgPPD/AJD8wgAEjA0MjAyogAMAbOQEAQAAAAC7ABEAAAAAAKoAAAH0AAABgAAAAUAACAFAAAgAwAAXAAAAAAAAACoAKgAqADIAbACGAKAAugDSeNpjYGRgYOBkUGFgYgABEMkFhAwM/xn0QAIADdUBdAB42qWQvUoDQRSFv3GjaISUQaymSmGxJoGAsRC0iPYLsU50Y6IxrvlRtPCJJKUPIBb+PIHv4EN4djKuKAqCDHfmu+feOdwZoMCUAJNbAlYUMzaUlM14jjxbngOq7HnOia89z1Pk1vMCa9x7ztPkzfMyJbPj+ZGi6Xp+omxuPD+zaD7meaFg7mb8GrBqHmhwxoAxlm0uiRkpP9X5m26pKRoMxTGR1D49Dv/Yb/91o6l8qL6eu5n2hZQzn68utR9m3FU2cB4t9cdSLG2utI+44Eh/P9bqKO+oJ/WxmXssj77YkrjasZQD6SFddythk3Wtzrf+UF2p076Udla1VNzsERP3kkjVRKel7mp1udXYcHtZSlV7RfmJe1GiFWveluaeKD5/MuJcSk8Tpm/vvwPIbmJleNpjYGKAAFYG7ICTgYGRiZGZkYWRlZGNkZ2Rg5GTLT2nsiDDEEIZsZfmZRqZujmDaDcDAxcI7WIOpS2gtCWUdgQAZkcSmQAAAAFblbO6AAA=) format('woff') + ; + font-weight: normal; + font-style: normal; +} + +.ui.dropdown > .dropdown.icon { + font-family: 'Dropdown'; + line-height: 1; + height: 1em; + width: 1.23em; + backface-visibility: hidden; + font-weight: normal; + font-style: normal; + text-align: center; +} + +.ui.dropdown > .dropdown.icon { + width: auto; +} +.ui.dropdown > .dropdown.icon:before { + content: '\f0d7'; +} + +/* Sub Menu */ +.ui.dropdown .menu .item .dropdown.icon:before { + content: '\f0da'/*rtl:'\f0d9'*/; +} + +.ui.dropdown .item .left.dropdown.icon:before, +.ui.dropdown .left.menu .item .dropdown.icon:before { + content: "\f0d9"/*rtl:"\f0da"*/; +} + +/* Vertical Menu Dropdown */ +.ui.vertical.menu .dropdown.item > .dropdown.icon:before { + content: "\f0da"/*rtl:"\f0d9"*/; +} + +.ui.dropdown > .clear.icon:before { + content: "\f00d"; +} + +/* Icons for Reference (Subsetted in 2.4.0) + .dropdown.down:before { content: "\f0d7"; } + .dropdown.up:before { content: "\f0d8"; } + .dropdown.left:before { content: "\f0d9"; } + .dropdown.right:before { content: "\f0da"; } + .dropdown.close:before { content: "\f00d"; } +*/ + diff --git a/src/theme/site/modules/dropdown.variables b/src/theme/site/modules/dropdown.variables new file mode 100644 index 0000000..6a1cee6 --- /dev/null +++ b/src/theme/site/modules/dropdown.variables @@ -0,0 +1,379 @@ +/******************************* + Dropdown +*******************************/ + +/*------------------- + Element +--------------------*/ + +@transition: + box-shadow @defaultDuration @defaultEasing, + width @defaultDuration @defaultEasing +; +@borderRadius: @defaultBorderRadius; + +@raisedShadow: 0px 2px 3px 0px @borderColor; + +/*------------------- + Content +--------------------*/ + +/* Icon */ +@dropdownIconSize: @relative12px; +@dropdownIconMargin: 0em 0em 0em 1em; + +/* Current Text */ +@textTransition: none; + +/* Menu */ +@menuBackground: #FFFFFF; +@menuMargin: 0em; +@menuPadding: 0em 0em; +@menuTop: 100%; +@menuTextAlign: left; + +@menuBorderWidth: 1px; +@menuBorderColor: @borderColor; +@menuBorder: @menuBorderWidth solid @menuBorderColor; +@menuBoxShadow: @raisedShadow; +@menuBorderRadius: @borderRadius; +@menuTransition: opacity @defaultDuration @defaultEasing; +@menuMinWidth: ~"calc(100% + "(@menuBorderWidth * 2)~")"; +@menuZIndex: 11; + +/* Text */ +@textLineHeight: 1em; +@textLineHeightOffset: (@textLineHeight - 1em); +@textCursorSpacing: 1px; + +/* Menu Item */ +@itemFontSize: @medium; +@itemTextAlign: left; +@itemBorder: none; +@itemHeight: auto; +@itemDivider: none; +@itemColor: @textColor; +@itemVerticalPadding: @mini; +@itemHorizontalPadding: @large; +@itemPadding: @itemVerticalPadding @itemHorizontalPadding; +@itemFontWeight: @normal; +@itemLineHeight: 1em; +@itemLineHeightOffset: (@itemLineHeight - 1em); +@itemTextTransform: none; +@itemBoxShadow: none; + +/* Sub Menu */ +@subMenuTop: 0%; +@subMenuLeft: 100%; +@subMenuRight: auto; +@subMenuDistanceAway: -0.5em; +@subMenuMargin: 0em 0em 0em @subMenuDistanceAway; +@subMenuBorderRadius: @borderRadius; +@subMenuZIndex: 21; + +/* Menu Header */ +@menuHeaderColor: @darkTextColor; +@menuHeaderFontSize: @relative11px; +@menuHeaderFontWeight: @bold; +@menuHeaderTextTransform: uppercase; +@menuHeaderMargin: 1rem 0rem 0.75rem; +@menuHeaderPadding: 0em @itemHorizontalPadding; + +/* Menu Divider */ +@menuDividerMargin: 0.5em 0em; +@menuDividerColor: @internalBorderColor; +@menuDividerSize: 1px; +@menuDividerBorder: @menuDividerSize solid @menuDividerColor; + +/* Menu Input */ +@menuInputMargin: @large @mini; +@menuInputMinWidth: 10rem; +@menuInputVerticalPadding: 0.5em; +@menuInputHorizontalPadding: @inputHorizontalPadding; +@menuInputPadding: @menuInputVerticalPadding @menuInputHorizontalPadding; + +/* Menu Image */ +@menuImageMaxHeight: 2em; +@menuImageVerticalMargin: -(@menuImageMaxHeight - 1em) / 2; + +/* Item Sub-Element */ +@itemElementFloat: none; +@itemElementDistance: @mini; + +/* Sub-Menu Dropdown Icon */ +@itemDropdownIconDistance: 1em; +@itemDropdownIconFloat: right; +@itemDropdownIconMargin: @itemLineHeightOffset 0em 0em @itemDropdownIconDistance; + +/* Description */ +@itemDescriptionFloat: right; +@itemDescriptionMargin: 0em 0em 0em 1em; +@itemDescriptionColor: @lightTextColor; + +/* Message */ +@messagePadding: @selectionItemPadding; +@messageFontWeight: @normal; +@messageColor: @unselectedTextColor; + +/* Floated Content */ +@floatedDistance: 1em; + +/*------------------- + Types +--------------------*/ + +/*------------ + Selection +--------------*/ + +@selectionMinWidth: 14em; +@selectionVerticalPadding: @inputVerticalPadding; +@selectionHorizontalPadding: @inputHorizontalPadding; +@selectionBorderEmWidth: @relative1px; +@selectionMinHeight: @inputLineHeight + (@selectionVerticalPadding * 2) - @selectionBorderEmWidth; +@selectionBackground: @inputBackground; +@selectionDisplay: inline-block; +@selectionIconDistance: @inputHorizontalPadding + @glyphWidth; +@selectionPadding: @selectionVerticalPadding @selectionIconDistance @selectionVerticalPadding @selectionHorizontalPadding; +@selectionZIndex: 10; + +@selectionItemDivider: 1px solid @solidInternalBorderColor; +@selectionMessagePadding: @selectionItemPadding; + +/* + {!loading && value ? ( + { + search('', null); + setShowResults(false); + }} + /> + ) : ( + '' + )} + { + debounce(onChange, { value }); + setLoading(true); + }} + /> + + } + placeholder="Search for country, region, city or a site name" + onChange={(_, data) => { + debounce(onChange, data); + setValue(data.value); + setLoading(true); + }} + /> + {items.length && showResults && value.length >= 3 ? ( + + {items.map((item, index) => ( + { + search(item.text, item.type, item.magicKey); + setShowResults(false); + }} + > + + {item.type} + + ))} + + ) : ( + '' + )} + + ); +}; + +export default compose( + connect( + (state) => ({ + query: state.query.search, + }), + { + setQuery, + }, + ), +)(Search); diff --git a/src/components/manage/Blocks/FiltersBlock/SelectWrapper.jsx b/src/components/manage/Blocks/FiltersBlock/SelectWrapper.jsx new file mode 100644 index 0000000..5207904 --- /dev/null +++ b/src/components/manage/Blocks/FiltersBlock/SelectWrapper.jsx @@ -0,0 +1,139 @@ +import React from 'react'; +import { Dropdown } from 'semantic-ui-react'; +import { Icon } from '@plone/volto/components'; +import { noOptions } from './dictionary'; + +import circlePlus from '@plone/volto/icons/circle-plus.svg'; +import circleMinus from '@plone/volto/icons/circle-minus.svg'; + +const Actions = ({ inputs, filterName, options, setInputs, onChange }) => { + const addButtonVisible = React.useMemo(() => { + if (!options || !options.length) return false; + return inputs[filterName].length < options.length - 1; + }, [inputs, filterName, options]); + + const removeButtonVisible = React.useMemo(() => { + return inputs[filterName].length > 1; + }, [inputs, filterName]); + + return ( + <> + {addButtonVisible ? ( + { + let newInputs; + const newInput = inputs[filterName]; + if (!newInput.length) { + newInput.push(null); + } + newInput.push(null); + newInputs = { ...inputs, [filterName]: [...newInput] }; + setInputs(newInputs); + }} + name={circlePlus} + size="2em" + /> + ) : ( + '' + )} + + {removeButtonVisible ? ( + { + let newInputs; + const newInput = inputs[filterName]; + newInput.pop(); + newInputs = { ...inputs, [filterName]: [...newInput] }; + if (onChange) { + onChange({ type: 'REMOVE', inputs: newInputs }); + return; + } + setInputs(newInputs); + }} + name={circleMinus} + size="2em" + /> + ) : ( + '' + )} + + ); +}; + +const SelectWrapper = ({ + inputs, + name, + options, + placeholder, + setInputs, + onChange, +}) => { + const filterName = `filter_${name}`; + + if (!inputs[filterName] || options?.length <= 1) return ''; + return ( +
+ {!inputs[filterName].length ? ( + { + let newInputs; + const newInput = inputs[filterName]; + newInput[0] = data.value; + newInputs = { ...inputs, [filterName]: [...newInput] }; + if (onChange) { + onChange({ type: 'UPDATE', inputs: newInputs }); + return; + } + setInputs(newInputs); + }} + options={options || noOptions} + placeholder={placeholder} + value={inputs[filterName][0]} + /> + ) : ( + inputs[filterName].map((_, index) => { + return ( + { + let newInputs; + const newInput = inputs[filterName]; + newInput[index] = data.value; + newInputs = { ...inputs, [filterName]: [...newInput] }; + if (onChange) { + onChange({ type: 'UPDATE', inputs: newInputs }); + return; + } + setInputs(newInputs); + }} + options={(options || noOptions).filter((option) => { + return ( + option.value === null || + option.value === inputs[filterName][index] || + !inputs[filterName].includes(option.value) + ); + })} + placeholder={placeholder} + value={inputs[filterName][index]} + /> + ); + }) + )} + +
+ ); +}; + +export default SelectWrapper; diff --git a/src/components/manage/Blocks/FiltersBlock/View.jsx b/src/components/manage/Blocks/FiltersBlock/View.jsx new file mode 100644 index 0000000..abc8188 --- /dev/null +++ b/src/components/manage/Blocks/FiltersBlock/View.jsx @@ -0,0 +1,100 @@ +import React from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import { connectBlockToMultipleProviders } from '@eeacms/volto-datablocks/hocs'; +import { setQuery } from '@eeacms/volto-industry-theme/actions'; +import Search from './Search'; +import Modal from './Modal'; +import { getOptions, permitTypes } from './dictionary'; + +import './styles.less'; + +class View extends React.Component { + constructor(props) { + super(props); + this.timers = {}; + this.setOpen = this.setOpen.bind(this); + this.setInitialFilters = this.setInitialFilters.bind(this); + this.updateOptions = this.updateOptions.bind(this); + this.state = { + open: false, + options: {}, + }; + } + + setOpen(open, callback) { + this.setState({ open }, callback); + } + + setInitialFilters(filters = {}) { + const { dispatch, query = {} } = this.props; + const keys = Object.keys(filters); + const queryKeys = Object.keys(query); + for (const key of keys) { + if (queryKeys.includes(key)) { + return false; + } + } + dispatch(setQuery(filters)); + return true; + } + + updateOptions() { + const { data, providers_data } = this.props; + const newOptions = { ...this.options }; + if (data.providers) { + data.providers.forEach((source) => { + if ( + source.name && + !newOptions[source.name] && + providers_data[source.name] + ) { + newOptions[source.name] = getOptions(providers_data[source.name]); + } + }); + if (!newOptions['permit_types']) { + newOptions['permit_types'] = permitTypes; + } + this.setState({ options: newOptions }); + } + } + + componentDidUpdate(prevProps) { + const providersData = this.props.providers_data; + const prevProvidersData = prevProps.providers_data; + if (providersData !== prevProvidersData) { + this.updateOptions(); + } + } + + componentDidMount() { + this.setInitialFilters({ filter_reporting_years: [2019] }); + this.updateOptions(); + } + + render() { + const { data, providers_data } = this.props; + const { open, options } = this.state; + + return ( +
+ + + +
+ ); + } +} + +export default compose( + connectBlockToMultipleProviders, + connect((state) => ({ + query: state.query.search, + })), +)(View); diff --git a/src/components/manage/Blocks/FiltersBlock/dictionary.js b/src/components/manage/Blocks/FiltersBlock/dictionary.js new file mode 100644 index 0000000..efde416 --- /dev/null +++ b/src/components/manage/Blocks/FiltersBlock/dictionary.js @@ -0,0 +1,50 @@ +export const getOptions = (data) => { + if (!data || !data.opt_key || !data.opt_value || !data.opt_text) return []; + return [ + { key: 'no-value', value: null, text: 'No value' }, + ...data.opt_key.map((_, index) => ({ + key: data.opt_id?.[index] + ? `${data.opt_key[index]} - ${data.opt_id[index]}` + : data.opt_key[index], + value: data.opt_value[index], + text: data.opt_text[index], + })), + ]; +}; + +export const inputsKeys = [ + 'filter_bat_conclusions', + 'filter_countries', + 'filter_facility_types', + 'filter_industries', + 'filter_nuts_1', + 'filter_nuts_2', + 'filter_permit_types', + 'filter_permit_years', + 'filter_plant_types', + 'filter_pollutant_groups', + 'filter_pollutants', + 'filter_reporting_years', + 'filter_river_basin_districts', +]; + +export const permitTypes = [ + { key: null, value: null, text: 'No value' }, + { + key: 'permitGranted', + value: 'permitGranted', + text: 'Permit granted', + }, + { + key: 'permitReconsidered', + value: 'permitReconsidered', + text: 'Permit reconsidered', + }, + { + key: 'permitUpdated', + value: 'permitUpdated', + text: 'Permit updated', + }, +]; + +export const noOptions = [{ key: 'no-value', value: null, text: 'No value' }]; diff --git a/src/components/manage/Blocks/FiltersBlock/index.js b/src/components/manage/Blocks/FiltersBlock/index.js new file mode 100644 index 0000000..6ee17a5 --- /dev/null +++ b/src/components/manage/Blocks/FiltersBlock/index.js @@ -0,0 +1,22 @@ +import worldSVG from '@plone/volto/icons/world.svg'; +import FiltersBlockView from './View'; +import FiltersBlockEdit from './Edit'; + +export default (config) => { + config.blocks.blocksConfig.filtersBlock = { + id: 'filtersBlock', + title: 'Filters Block', + icon: worldSVG, + group: 'eprtr_blocks', + view: FiltersBlockView, + edit: FiltersBlockEdit, + restricted: false, + mostUsed: false, + sidebarTab: 1, + security: { + addPermission: [], + view: [], + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/FiltersBlock/schema.js b/src/components/manage/Blocks/FiltersBlock/schema.js new file mode 100644 index 0000000..68c629b --- /dev/null +++ b/src/components/manage/Blocks/FiltersBlock/schema.js @@ -0,0 +1,39 @@ +const providerSchema = { + title: 'Provider', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['name', 'url'], + }, + ], + properties: { + name: { + title: 'Provider name', + }, + url: { + title: 'Provider url', + widget: 'object_by_path', + }, + }, + required: [], +}; + +export default { + title: 'Filters block', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['providers'], + }, + ], + properties: { + providers: { + title: 'Providers', + schema: providerSchema, + widget: 'object_list', + }, + }, + required: [], +}; diff --git a/src/components/manage/Blocks/FiltersBlock/styles.less b/src/components/manage/Blocks/FiltersBlock/styles.less new file mode 100644 index 0000000..d05f11e --- /dev/null +++ b/src/components/manage/Blocks/FiltersBlock/styles.less @@ -0,0 +1,189 @@ +@import (multiple, reference, optional) '../../theme.config'; + +@type: extra; +@element: custom; + +@verticalPadding: @inputVerticalPadding; + +.filters-block { + @textColor: var(--text-color, @darkBlue); + display: flex; + flex-flow: row; + height: 100%; + + .search-container { + position: relative; + flex: 1; + + .ui.input { + width: 100%; + height: 100%; + + input { + margin-right: 1rem; + border-radius: 2em; + padding-right: 3.5em !important; + padding-left: 1em !important; + padding-top: @verticalPadding !important; + padding-bottom: @verticalPadding !important; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + } + + .icon { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + border: none; + padding: 0; + margin: 0; + width: 1em; + opacity: 0.8; + + &.search { + right: 2em; + } + + &.delete { + right: 3.5em; + } + } + + &:not(.loading) { + .icon { + pointer-events: all !important; + cursor: pointer; + color: @textColor; + + &:hover { + opacity: 1; + } + } + } + } + + .ui.list { + position: absolute; + background: #fff; + border-radius: 1em; + padding: 1rem; + margin-top: 0; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + width: calc(100% - 1rem); + z-index: 1; + + .item { + display: flex; + justify-content: space-between; + cursor: pointer; + padding: 6px 10px; + + &:hover { + background-color: @lightGrey; + border-radius: 1em; + } + + &::after { + display: none; + } + + span.text { + display: block; + margin-right: 1rem; + } + + span.type { + color: @grey; + opacity: 0.9; + } + } + } + } + + @media only screen and (max-width: @largestMobileScreen) { + flex-flow: column; + + .search-container { + margin-bottom: 1rem; + .ui.input { + input { + margin-right: 0; + } + } + } + } +} + +.ui.modal.filters-block { + > .header, + h3 { + color: @primaryColor; + margin-top: 1rem; + } + + > .header { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 0; + padding-top: 1rem !important; + padding-bottom: 1rem !important; + + .icon { + cursor: pointer; + fill: @orange !important; + + &:hover { + .darkenFilter(0.9); + } + } + } + + .dropdown-wrapper { + display: flex; + flex-wrap: wrap; + align-items: center; + + .icon { + cursor: pointer; + margin-bottom: 1rem; + fill: @orange !important; + color: @orange !important; + + &:hover { + .darkenFilter(0.9); + } + } + } + + .ui.dropdown { + display: inline-flex; + margin-bottom: 1rem; + margin-right: 1rem; + max-width: 14em; + + > .dropdown.icon:before { + color: @orange; + } + + .text { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + + .actions { + text-align: center; + padding: 1rem !important; + + button { + margin-right: 2rem; + } + + .clear-button { + --text-color: @orange; + } + } +} diff --git a/src/components/manage/Blocks/IndustryDataTable/View.jsx b/src/components/manage/Blocks/IndustryDataTable/View.jsx new file mode 100644 index 0000000..807264f --- /dev/null +++ b/src/components/manage/Blocks/IndustryDataTable/View.jsx @@ -0,0 +1,427 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { compose } from 'redux'; +import { Icon, UniversalLink } from '@plone/volto/components'; +import { Table, Menu, Loader } from 'semantic-ui-react'; +import cx from 'classnames'; +import RenderComponent from '@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/components'; +import { ConnectorContext } from '@eeacms/volto-datablocks/hocs'; +import { setQuery } from '@eeacms/volto-industry-theme/actions'; + +import leftSVG from '@plone/volto/icons/left-key.svg'; +import rightSVG from '@plone/volto/icons/right-key.svg'; +import upSVG from '@plone/volto/icons/up-key.svg'; +import downSVG from '@plone/volto/icons/down-key.svg'; + +import './styles.less'; + +const isNotEmpty = (item) => { + if (!item) return false; + if (Array.isArray(item) && item.filter((i) => i).length === 0) return false; + if (item === undefined || item === null) return false; + if (typeof item === 'object' && Object.keys(item).length === 0) return false; + return true; +}; + +const getQuery = (query) => { + const obj = { + ...(isNotEmpty(query.filter_pollutants) + ? { 'pollutants[like]': query.filter_pollutants } + : {}), + ...(isNotEmpty(query.filter_pollutant_groups) + ? { 'air_groups[like]': query.filter_pollutant_groups } + : {}), + ...(isNotEmpty(query.filter_permit_years) + ? { 'permit_years[like]': query.filter_permit_years } + : {}), + ...(isNotEmpty(query.filter_permit_types) + ? { 'permit_types[like]': query.filter_permit_types } + : {}), + ...(isNotEmpty(query.filter_bat_conclusions) + ? { 'bat_conclusions[like]': query.filter_bat_conclusions } + : {}), + ...(isNotEmpty(query.filter_reporting_years) + ? { 'Site_reporting_year[in]:list': query.filter_reporting_years } + : {}), + // ...(isNotEmpty(query.nuts_latest) + // ? { 'nuts_regions[like]': query.nuts_latest } + // : {}), + ...(isNotEmpty(query.filter_countries) + ? { 'countryCode[in]:list': query.filter_countries } + : {}), + ...(query.filter_search?.text && query.filter_search?.type === 'search-site' + ? { siteName: query.filter_search.text } + : {}), + }; + + return obj; +}; + +const View = (props) => { + const context = React.useContext(ConnectorContext); + const [openedRow, setOpenedRow] = React.useState(null); + const { + data = {}, + getAlignmentOfColumn, + getNameOfColumn, + getTitleOfColumn, + has_pagination, + pagination = {}, + placeholder, + row_size, + selectedColumns, + show_header, + tableData, + query = {}, + updatePagination = () => {}, + } = props; + + React.useEffect(() => { + const extent = query.map_extent || [ + -10686671.0000035, + -2430148.00000588, + 6199975.99999531, + 10421410.9999871, + ]; + + context.setState({ + ...context.state, + extraQuery: { + ...getQuery(query || {}), + 'shape_wm.STX[gte]:float': extent[0], + 'shape_wm.STX[lte]:float': extent[2], + 'shape_wm.STY[gte]:float': extent[1], + 'shape_wm.STY[lte]:float': extent[3], + }, + }); + /* eslint-disable-next-line */ + }, [JSON.stringify(query)]); + + return ( +
+ {row_size && tableData ? ( + + {show_header ? ( + + + {selectedColumns.map((colDef, j) => ( + + {getTitleOfColumn(colDef)} + + ))} + + + ) : null} + + {Array(Math.max(0, row_size)) + .fill() + .map((_, i) => { + const countFactypeEprtr = + tableData?.['count_factype_EPRTR']?.[i]; + const countFactypeNonEprtr = + tableData?.['count_factype_NONEPRTR']?.[i]; + const countInstypeIed = tableData?.['count_instype_IED']?.[i]; + const countInstypeNonIed = + tableData?.['count_instype_NONIED']?.[i]; + const countPlantypeLcp = + tableData?.['count_plantType_LCP']?.[i]; + const countPlantypeCoWi = + tableData?.['count_plantType_coWI']?.[i]; + const countPlantypeWi = tableData?.['count_plantType_WI']?.[i]; + return ( + + + {selectedColumns.map((colDef, j) => ( + + + + ))} + + + + + {/* ==== TABLE HIDDEN ROW ==== */} + + +
+
+
+ Regulation +
+ {countFactypeEprtr ? ( +

+ {`${countFactypeEprtr} ${ + countFactypeEprtr === 1 + ? 'EPRTR Facility' + : 'EPRTR Facilities' + }`} +

+ ) : ( + '' + )} + + {countFactypeNonEprtr ? ( +

+ {`${countFactypeNonEprtr} ${ + countFactypeNonEprtr === 1 + ? 'NON-EPRTR Facility' + : 'NON-EPRTR Facilities' + }`} +

+ ) : ( + '' + )} + + {countInstypeIed ? ( +

+ {`${countInstypeIed} ${ + countInstypeIed === 1 + ? 'IED Installation' + : 'IED Installations' + }`} +

+ ) : ( + '' + )} + + {countInstypeNonIed ? ( +

+ {`${countInstypeNonIed} ${ + countInstypeNonIed === 1 + ? 'NON-IED Installation' + : 'NON-IED Installations' + }`} +

+ ) : ( + '' + )} + + {countPlantypeLcp ? ( +

+ {`${countPlantypeLcp} ${ + countPlantypeLcp === 1 + ? 'Large combustion plant' + : 'Large combustion plants' + }`} +

+ ) : ( + '' + )} + + {countPlantypeCoWi ? ( +

+ {`${countPlantypeCoWi} ${ + countPlantypeCoWi === 1 + ? 'Co-waste incinerator' + : 'Large combustion plants' + }`} +

+ ) : ( + '' + )} + + {countPlantypeWi ? ( +

+ {`${countPlantypeWi} ${ + countPlantypeWi === 1 + ? 'Co-waste incinerator' + : 'Co-waste incinerator' + }`} +

+ ) : ( + '' + )} +
+
+
+ + Pollutant emissions + +
+

+ {tableData?.['pollutants']?.[i] || + 'Not reported'} +

+
+
+
+ + Regulatory Informations + +
+

+ Operating since:{' '} + {tableData?.['dateOfLatestOpStart']?.[i] || + 'not reported'} +

+

+ Last operating permit issued:{' '} + {tableData?.['dateOfLatestPermit']?.[i] || + 'not reported'} +

+

+ Number of inspections:{' '} + {tableData?.['numInspections']?.[i] || + 'not reported'} +

+
+
+
+
+
+
+
+ + Site details + +
+
+
+
+
+ + + + ); + })} + + {has_pagination ? ( + + + + + { + if (pagination.activePage > 1) { + updatePagination({ + activePage: pagination.activePage - 1, + }); + } + }} + > + + + + + + { + if (row_size === pagination.itemsPerPage) { + updatePagination({ + activePage: pagination.activePage + 1, + }); + } + }} + > + + + + + + + ) : null} +
+ ) : tableData ? ( + // TODO: find a better solution to keep headers + + {show_header ? ( + + + {data?.columns?.map((header) => ( + + {header.title} + + ))} + + + ) : null} + + + +

{placeholder}

+ + + +
+ ) : ( + + European Environment Agency + + )} +
+ ); +}; + +export default compose( + connect( + (state) => ({ + query: state.query.search, + }), + { setQuery }, + ), +)(View); diff --git a/src/components/manage/Blocks/IndustryDataTable/index.js b/src/components/manage/Blocks/IndustryDataTable/index.js new file mode 100644 index 0000000..fabee87 --- /dev/null +++ b/src/components/manage/Blocks/IndustryDataTable/index.js @@ -0,0 +1,17 @@ +import IndustryTableView from './View'; +import schema from './schema'; + +export default (config) => { + config.blocks.blocksConfig.simpleDataConnectedTable = { + ...config.blocks.blocksConfig.simpleDataConnectedTable, + templates: { + ...config.blocks.blocksConfig.simpleDataConnectedTable.templates, + industry_data_table: { + title: 'Industry data table', + view: IndustryTableView, + schema: schema, + }, + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/IndustryDataTable/schema.js b/src/components/manage/Blocks/IndustryDataTable/schema.js new file mode 100644 index 0000000..ae67982 --- /dev/null +++ b/src/components/manage/Blocks/IndustryDataTable/schema.js @@ -0,0 +1,17 @@ +export default () => ({ + title: 'Industry datatable', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['link'], + }, + ], + properties: { + link: { + title: 'Site details path', + widget: 'object_by_path', + }, + }, + required: [], +}); diff --git a/src/components/manage/Blocks/IndustryDataTable/styles.less b/src/components/manage/Blocks/IndustryDataTable/styles.less new file mode 100644 index 0000000..a86a65e --- /dev/null +++ b/src/components/manage/Blocks/IndustryDataTable/styles.less @@ -0,0 +1,186 @@ +@import (multiple, reference, optional) '../../theme.config'; + +@type: extra; +@element: custom; + +.industry-table { + display: flex; + overflow-x: auto; + min-height: 400px; + align-items: baseline; + + .ui.loader { + align-self: center; + } + + .ui.grid { + margin-top: 0 !important; + } + + .ui.table { + border: none; + border-collapse: separate; + border-spacing: 0 4px; + color: #323232; + + thead { + tr { + th { + border: none; + background: #fff; + color: #000; + font-weight: bold; + text-transform: none; + + &::after { + display: none; + border-bottom: none; + padding: 0; + } + } + } + } + + tbody { + tr { + border: none; + background-color: #f8f8f8; + &.hidden-row { + border: none; + display: none; + td { + padding: 0; + + .table-flex-container { + display: flex; + justify-content: space-between; + overflow: hidden; + transition: opacity 0.4s cubic-bezier(0, 0, 1, 1); + padding: 0 0.4rem; + + &.action { + padding: 0; + } + + > div { + position: relative; + flex: 1; + margin: 0 0.4rem; + } + + span.header { + font-weight: bold; + color: @primaryColor; + margin-bottom: 1em; + } + } + } + + &.show { + border: none; + display: table-row; + td { + padding: 20px 16px 20px 16px; + .table-flex-container { + padding: 1em; + max-height: fit-content; + opacity: 1; + &.action { + padding: 0; + margin-top: 1em; + } + &.white { + color: #000; + background: #fff; + } + } + } + } + } + + &.hide { + td { + .table-flex-container { + padding: 0; + max-height: 0; + opacity: 0; + } + } + } + + button { + cursor: pointer; + background: transparent; + border: none; + padding: 0; + + &:focus { + outline: none; + } + + svg.icon { + fill: #878787 !important; + + &:focus { + outline: none; + } + } + } + + &.row-active { + font-weight: bold; + button { + svg.icon { + fill: @orange !important; + } + } + } + + &:hover:not(.hidden-row):not(.row-active) { + button { + svg.icon { + fill: @orange !important; + } + } + } + } + } + + tfoot { + th { + border: none; + padding: 0.78571429em 0; + } + } + + td { + border: none; + padding: 4px 16px; + } + } + + .hidden-row-container { + --text-color: @darkBlue; + } + + .ui.pagination.menu { + border: 1px solid rgba(34, 36, 38, 0.15); + box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); + border-radius: 0.28571429rem; + .item { + &:before { + position: absolute; + content: ''; + top: 0; + right: 0; + height: 100%; + width: 1px; + background: rgba(34, 36, 38, 0.1); + } + + &:focus { + outline: none !important; + } + } + } +} diff --git a/src/components/manage/Blocks/IndustryMap/Edit.jsx b/src/components/manage/Blocks/IndustryMap/Edit.jsx new file mode 100644 index 0000000..ac40afe --- /dev/null +++ b/src/components/manage/Blocks/IndustryMap/Edit.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { SidebarPortal } from '@plone/volto/components'; +import InlineForm from '@plone/volto/components/manage/Form/InlineForm'; +import schema from './schema'; +import View from './View'; + +const Edit = (props) => ( + <> + + + + { + props.onChangeBlock(props.block, { + ...props.data, + [id]: value, + }); + }} + formData={props.data} + /> + + +); + +export default Edit; diff --git a/src/components/manage/Blocks/IndustryMap/Popup.jsx b/src/components/manage/Blocks/IndustryMap/Popup.jsx new file mode 100644 index 0000000..1117864 --- /dev/null +++ b/src/components/manage/Blocks/IndustryMap/Popup.jsx @@ -0,0 +1,79 @@ +import React from 'react'; +import { Grid } from 'semantic-ui-react'; + +class Popup extends React.PureComponent { + constructor(props) { + super(props); + this.onPointermove = this.onPointermove.bind(this); + this.state = { + data: {}, + }; + } + + onPointermove(e) { + if (JSON.stringify(e.detail) !== JSON.stringify(this.state.data)) { + this.setState({ data: e.detail }); + } + } + + componentDidMount() { + document + .querySelector('#industry-map') + .addEventListener('ol-pointermove', this.onPointermove); + } + + componentWillUnmount() { + document + .querySelector('#industry-map') + .removeEventListener('ol-pointermove', this.onPointermove); + } + + render() { + const { data } = this.state; + return ( + + ); + } +} + +export default Popup; diff --git a/src/components/manage/Blocks/IndustryMap/PopupDetailed.jsx b/src/components/manage/Blocks/IndustryMap/PopupDetailed.jsx new file mode 100644 index 0000000..d5d8b22 --- /dev/null +++ b/src/components/manage/Blocks/IndustryMap/PopupDetailed.jsx @@ -0,0 +1,111 @@ +import React from 'react'; +import { UniversalLink } from '@plone/volto/components'; +import { Modal } from 'semantic-ui-react'; + +class PopupDetailed extends React.PureComponent { + constructor(props) { + super(props); + this.onClick = this.onClick.bind(this); + this.onClose = this.onClose.bind(this); + this.state = { + data: {}, + }; + } + + onClick(e) { + if (JSON.stringify(e.detail) !== JSON.stringify(this.state.data)) { + this.setState({ data: e.detail }); + } + } + + onClose() { + this.setState({ data: {} }); + this.props.overlay.current.setPosition(undefined); + } + + componentDidMount() { + document + .querySelector('#industry-map') + .addEventListener('ol-click', this.onClick); + } + + componentWillUnmount() { + document + .querySelector('#industry-map') + .removeEventListener('ol-click', this.onClick); + } + + render() { + const { data } = this.state; + const open = !!Object.keys(data).length; + + return ( + + + {data.siteName} + + + +

Site contents

+ {data.nFacilities ? ( +

+ {data.nFacilities + ' '} + Facilit + {data.nFacilities > 1 ? 'ies' : 'y'} +

+ ) : ( + '' + )} + {data.nInstallations ? ( +

+ {data.nInstallations + ' '} + Installation + {data.nInstallations > 1 ? 's' : ''} +

+ ) : ( + '' + )} + {data.nLCP ? ( +

+ {data.nLCP + ' '} + Large combustion plant + {data.nLCP > 1 ? 's' : ''} +

+ ) : ( + '' + )} +

Pollutant emissions

+ {data.pollutants ? ( +

{data.pollutants}

+ ) : ( +

There are no data regarding the pollutants

+ )} +

Regulatory information

+ {data.Site_reporting_year ? ( +

+ Inspections in {data.Site_reporting_year}:{' '} + {data.numInspections || 0} +

+ ) : ( + '' + )} + + + + Site details + + + + ); + } +} + +export default PopupDetailed; diff --git a/src/components/manage/Blocks/IndustryMap/Sidebar.jsx b/src/components/manage/Blocks/IndustryMap/Sidebar.jsx new file mode 100644 index 0000000..82bd61b --- /dev/null +++ b/src/components/manage/Blocks/IndustryMap/Sidebar.jsx @@ -0,0 +1,231 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { Portal } from 'react-portal'; +import cs from 'classnames'; +import { Dropdown, Checkbox } from 'semantic-ui-react'; +import { Icon } from '@plone/volto/components'; +import { BodyClass } from '@plone/volto/helpers'; +import { setQuery } from '@eeacms/volto-industry-theme/actions'; +import { + getOptions, + noOptions, + inputsKeys, +} from '@eeacms/volto-industry-theme/components/manage/Blocks/FiltersBlock/dictionary'; + +import menuSVG from '@plone/volto/icons/menu-alt.svg'; + +class Sidebar extends React.Component { + constructor(props) { + super(props); + this.isChecked = this.isChecked.bind(this); + this.setCheckboxValue = this.setCheckboxValue.bind(this); + this.setDropdownValue = this.setDropdownValue.bind(this); + this.applyFilters = this.applyFilters.bind(this); + this.clearFilters = this.clearFilters.bind(this); + this.updateOptions = this.updateOptions.bind(this); + this.state = { + options: {}, + open: false, + }; + } + + isChecked(filter, label) { + const { query } = this.props; + return (query[filter] || []).indexOf(label) !== -1; + } + + setCheckboxValue(_, data) { + const { query } = this.props; + const values = [...(query[data.name] || [])]; + const checked = data.checked; + const index = values.indexOf(data.label); + if (checked && index === -1) { + values.push(data.label); + } + if (!checked && index !== -1) { + values.splice(index, 1); + } + this.applyFilters({ [data.name]: values }); + } + + setDropdownValue(data, filterName) { + this.applyFilters({ + [filterName]: Array.isArray(data.value) ? data.value : [data.value], + ...(filterName === 'filter_countries' + ? { + filter_nuts_1: [], + filter_nuts_2: [], + filter_river_basin_districts: [], + } + : {}), + }); + } + + applyFilters(filters) { + const { query } = this.props; + const newInputs = {}; + inputsKeys.forEach((key) => { + newInputs[key] = query[key] || []; + }); + this.props.dispatch( + setQuery({ + ...newInputs, + ...filters, + filter_change: { + counter: (query['filter_change']?.counter || 0) + 1, + type: 'simple-filter', + }, + filter_search: null, + filter_search_value: '', + }), + ); + } + + clearFilters() { + const { query, dispatch } = this.props; + const newInputs = {}; + inputsKeys.forEach((key) => { + newInputs[key] = []; + }); + dispatch( + setQuery({ + ...newInputs, + filter_change: { + counter: (query['filter_change']?.counter || 0) + 1, + type: 'clear', + }, + filter_search: null, + filter_search_value: '', + }), + ); + } + + updateOptions() { + const { data, providers_data } = this.props; + const newOptions = { ...this.options }; + if (data.providers) { + data.providers.forEach((source) => { + if ( + source.name && + !newOptions[source.name] && + providers_data[source.name] + ) { + newOptions[source.name] = getOptions(providers_data[source.name]); + } + }); + this.setState({ options: newOptions }); + } + } + + componentDidUpdate(prevProps) { + const providersData = this.props.providers_data; + const prevProvidersData = prevProps.providers_data; + if (providersData !== prevProvidersData) { + this.updateOptions(); + } + } + + componentDidMount() { + this.updateOptions(); + } + + render() { + const { query } = this.props; + const { options } = this.state; + if (__SERVER__) return ''; + return ( +
+

+ Dynamic filters{' '} + { + this.setState({ open: false }); + }} + /> +

+

Reporting year

+ { + this.setDropdownValue(data, 'filter_reporting_years'); + }} + options={options.reporting_years || noOptions} + placeholder={'Select reporting year'} + value={query.filter_reporting_years || []} + /> +

Country

+ { + this.setDropdownValue(data, 'filter_countries'); + }} + options={options.countries || noOptions} + placeholder={'Select country'} + value={query.filter_countries || []} + /> +

Industry

+ { + this.setDropdownValue(data, 'filter_industries'); + }} + options={options.industries || noOptions} + placeholder={'Select industry'} + value={query.filter_industries || []} + /> +

Facility type

+
+ + + + + + + + +
+ ); + } +} + +export default connect((state) => ({ + query: state.query.search, +}))(Sidebar); diff --git a/src/components/manage/Blocks/IndustryMap/View.jsx b/src/components/manage/Blocks/IndustryMap/View.jsx new file mode 100644 index 0000000..64936ca --- /dev/null +++ b/src/components/manage/Blocks/IndustryMap/View.jsx @@ -0,0 +1,792 @@ +import React from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import jsonp from 'jsonp'; +import qs from 'querystring'; +import { toast } from 'react-toastify'; +import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib'; +import { Icon, Toast } from '@plone/volto/components'; +import { connectBlockToMultipleProviders } from '@eeacms/volto-datablocks/hocs'; +import { Map } from '@eeacms/volto-openlayers-map/Map'; +import { Interactions } from '@eeacms/volto-openlayers-map/Interactions'; +import { Overlays } from '@eeacms/volto-openlayers-map/Overlays'; +import { Controls, Control } from '@eeacms/volto-openlayers-map/Controls'; +import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers'; +import { openlayers } from '@eeacms/volto-openlayers-map'; + +import PrivacyProtection from '@eeacms/volto-industry-theme/components/PrivacyProtection'; +import { inputsKeys } from '@eeacms/volto-industry-theme/components/manage/Blocks/FiltersBlock/dictionary'; +import { setQuery } from '@eeacms/volto-industry-theme/actions'; +import { emitEvent } from '@eeacms/volto-industry-theme/helpers'; +import { + dataprotection, + getStyles, + getLayerSitesURL, + getLayerRegionsURL, + getLayerBaseURL, + getLocationExtent, + getSiteExtent, + getCountriesExtent, +} from './index'; + +import Sidebar from './Sidebar'; +import Popup from './Popup'; +import PopupDetailed from './PopupDetailed'; + +import navigationSVG from '@plone/volto/icons/navigation.svg'; + +import './styles.less'; + +let _REQS = 0; +const zoomSwitch = 6; +let timer; + +const debounce = (func, ...args) => { + if (timer) clearTimeout(timer); + timer = setTimeout(func, 200, ...args); +}; + +const arrayContainsString = (arr = [], value) => { + let contains = false; + let nullValues = 0; + for (let i = 0; i < arr.length; i++) { + if (!arr[i]) { + nullValues++; + } else if ( + value && + typeof value === 'string' && + typeof arr[i] === 'string' && + arr[i].includes(value) + ) { + contains = true; + break; + /* eslint-disable-next-line */ + } else if (value && arr[i] == value) { + contains = true; + break; + } + } + if (!contains && nullValues === arr.length) return true; + return contains; +}; + +const stringContainedInArray = (value, arr = []) => { + let contains = false; + let nullValues = 0; + for (let i = 0; i < arr.length; i++) { + if (!arr[i]) { + nullValues++; + } else if (value && value.includes(arr[i])) { + contains = true; + break; + } + } + if (!contains && nullValues === arr.length) return true; + return contains; +}; + +const facility_types = { + 'EPRTR, NONEPRTR': 'EPRTR', + 'NONEPRTR, EPRTR': 'EPRTR', + EPRTR: 'EPRTR', + NONEPRTR: 'NONEPRTR', +}; + +class View extends React.PureComponent { + /** + * Property types. + * @property {Object} propTypes Property types. + * @static + */ + static propTypes = {}; + + /** + * Constructor + * @method constructor + * @param {Object} props Component properties + * @constructs Navigation + */ + constructor(props) { + super(props); + const { style } = openlayers; + this.updateLayersStyle = this.updateLayersStyle.bind(this); + this.onFeatureLoad = this.onFeatureLoad.bind(this); + this.centerToPosition = this.centerToPosition.bind(this); + this.centerToUserLocation = this.centerToUserLocation.bind(this); + this.getFeatureInRange = this.getFeatureInRange.bind(this); + this.onPointermove = this.onPointermove.bind(this); + this.onClick = this.onClick.bind(this); + this.onMoveend = this.onMoveend.bind(this); + this.isFeatureVisible = this.isFeatureVisible.bind(this); + this.state = { + hasFilters: false, + mapRendered: false, + loading: false, + }; + this.styles = __CLIENT__ ? getStyles(style) : {}; + this.map = React.createRef(); + this.layerRegions = React.createRef(); + this.layerSites = React.createRef(); + this.overlayPopup = React.createRef(); + this.overlayPopupDetailed = React.createRef(); + } + + componentDidMount() { + document + .querySelector('#industry-map') + .addEventListener('ol-features-load', this.onFeatureLoad); + } + + componentWillUnmount() { + document + .querySelector('#industry-map') + .removeEventListener('ol-features-load', this.onFeatureLoad); + this.setState({ mapRendered: false }); + } + + componentDidUpdate(prevProps, prevState) { + if (!this.state.mapRendered || !this.map.current) return; + const { extent, proj } = openlayers; + const { filter_change, filter_search } = this.props.query; + const filter_countries = (this.props.query.filter_countries || []).filter( + (value) => value, + ); + if (!prevState.mapRendered) { + this.centerToUserLocation(); + this.updateLayersStyle(); + } + if (filter_change?.counter !== prevProps.query.filter_change?.counter) { + /* Trigger update of features style */ + this.updateLayersStyle(); + /* Fit view if necessary */ + if (filter_change.type === 'search-location') { + getLocationExtent(filter_search).then(({ data }) => { + if (data.candidates?.length > 0) { + this.map.current + .getView() + .fit( + [ + data.candidates[0].extent.xmin, + data.candidates[0].extent.ymin, + data.candidates[0].extent.xmax, + data.candidates[0].extent.ymax, + ], + { + maxZoom: 16, + duration: 1000, + }, + ); + } + }); + } else if (filter_change.type === 'search-site') { + getSiteExtent(filter_search).then(({ data }) => { + const extent = data?.results?.[0] || {}; + if ( + extent.MIN_X === null || + extent.MIN_Y === null || + extent.MAX_X === null || + extent.MAX_Y === null + ) { + toast.warn( + , + ); + } else { + this.map.current + .getView() + .fit([extent.MIN_X, extent.MIN_Y, extent.MAX_X, extent.MAX_Y], { + maxZoom: 16, + duration: 1000, + }); + } + }); + } else if ( + (filter_change.type === 'advanced-filter' || + filter_change.type === 'simple-filter') && + filter_countries.length + ) { + const countriesOptions = this.props.providers_data.countries || {}; + const countries = []; + (countriesOptions.opt_key || []).forEach((code, index) => { + if ((filter_countries || []).includes(code)) { + countries.push(countriesOptions.opt_text[index]); + } + }); + getCountriesExtent(countries).then((responses) => { + let _extent = extent.createEmpty(); + responses.forEach(({ data }) => { + const reqExtent = data.candidates?.[0]?.extent || null; + if (reqExtent) { + extent.extend( + _extent, + proj.transformExtent( + [ + reqExtent.xmin, + reqExtent.ymin, + reqExtent.xmax, + reqExtent.ymax, + ], + 'EPSG:4326', + 'EPSG:3857', + ), + ); + } + }); + if (!extent.isEmpty(_extent)) { + this.map.current.getView().fit(_extent, { + maxZoom: 16, + duration: 1000, + }); + } + }); + } + } + } + + updateLayersStyle() { + const { query } = this.props; + let hasFilters = false; + for (const key of inputsKeys) { + if ((query[key] || []).filter((v) => v).length) { + hasFilters = true; + break; + } + } + if (query.filter_search?.text && query.filter_search?.type) { + hasFilters = true; + } + if (hasFilters) { + this.layerSites.current.setStyle((feature) => { + if (!this.map.current) return; + const zoom = this.map.current.getView().getZoom(); + const visible = this.isFeatureVisible(feature); + if (!visible) return; + const style = + zoom >= 8 + ? visible === 'highlight' + ? this.styles.bigGreenCircle + : this.styles.bigCircle + : visible === 'highlight' + ? this.styles.smallGreenCircle + : this.styles.smallCircle; + return style; + }); + this.layerRegions.current.setStyle(() => { + return; + }); + } else { + this.layerSites.current.setStyle((feature) => { + if (!this.map.current) return; + const zoom = this.map.current.getView().getZoom(); + if (zoom < zoomSwitch) return; + const visible = this.isFeatureVisible(feature); + if (!visible) return; + const style = + zoom >= 8 + ? visible === 'highlight' + ? this.styles.bigGreenCircle + : this.styles.bigCircle + : visible === 'highlight' + ? this.styles.smallGreenCircle + : this.styles.smallCircle; + return style; + }); + this.layerRegions.current.setStyle(() => { + if (!this.map.current) return; + const zoom = this.map.current.getView().getZoom(); + if (zoom >= zoomSwitch) return; + return this.styles.regionCircle; + }); + } + } + + onFeatureLoad(e) { + const { loaded } = e.detail; + if (loaded && this.state.loading) { + this.setState({ loading: false }); + } else if (!loaded && !this.state.loading) { + this.setState({ loading: true }); + } + } + + centerToPosition(position, zoom) { + const { proj } = openlayers; + return this.map.current.getView().animate({ + center: proj.fromLonLat([ + position.coords.longitude, + position.coords.latitude, + ]), + duration: 1000, + zoom, + }); + } + + centerToUserLocation(ignoreExtent = false) { + if (__SERVER__ || !this.map.current || !navigator?.geolocation) return; + const extent = this.props.query.map_extent; + if (!extent || ignoreExtent) { + navigator.geolocation.getCurrentPosition( + (position) => { + return this.centerToPosition(position, 12); + }, + // Errors + () => {}, + ); + } else { + this.map.current + .getView() + .fit([extent[0], extent[1], extent[2], extent[3]], { + maxZoom: 16, + duration: 1000, + }); + } + } + + getFeatureInRange(map, point, range = 3) { + let x = 0; + let y = 0; + let dx = 0; + let dy = -1; + for (let i = 0; i <= range * range; i++) { + const features = + map.getFeaturesAtPixel([point[0] + x, point[1] + y]) || null; + if (features?.length) { + return features; + } + if (x === y || (x < 0 && x === -y) || (x > 0 && x === 1 - y)) { + let temp = dx; + dx = -dy; + dy = temp; + } + x += dx; + y += dy; + } + return null; + } + + onPointermove(e) { + if (__SERVER__ || !this.overlayPopup.current) return; + if (e.dragging) { + e.map.getTarget().style.cursor = 'grabbing'; + return; + } + if ( + doesNodeContainClick( + document.querySelector('#map-sidebar'), + e.originalEvent, + ) + ) { + this.overlayPopup.current.setPosition(undefined); + e.map.getTarget().style.cursor = ''; + return; + } + const { coordinate, proj } = openlayers; + const mapElement = document.querySelector('#industry-map'); + const pixel = e.map.getEventPixel(e.originalEvent); + const hit = e.map.hasFeatureAtPixel(pixel); + debounce(() => { + if (hit) { + const features = e.map.getFeaturesAtPixel(pixel); + if (!features[0]) return; + let hdms = coordinate.toStringHDMS( + proj.toLonLat(features[0].getGeometry().flatCoordinates), + ); + const featuresProperties = features[0].getProperties(); + emitEvent(mapElement, 'ol-pointermove', { + bubbles: false, + detail: { + ...featuresProperties, + hdms, + flatCoordinates: features[0].getGeometry().flatCoordinates, + }, + }); + } + }); + if (hit) { + this.overlayPopup.current.setPosition(e.coordinate); + e.map.getTarget().style.cursor = 'pointer'; + } else { + this.overlayPopup.current.setPosition(undefined); + e.map.getTarget().style.cursor = 'grab'; + emitEvent(mapElement, 'ol-pointermove', { + bubbles: false, + detail: {}, + }); + } + } + + onClick(e) { + const zoom = e.map.getView().getZoom(); + if ( + __SERVER__ || + zoom < zoomSwitch || + !this.overlayPopup.current || + !this.overlayPopupDetailed.current + ) { + return; + } + const { coordinate, proj } = openlayers; + const mapElement = document.querySelector('#industry-map'); + const pixel = e.map.getEventPixel(e.originalEvent); + const features = this.getFeatureInRange(e.map, pixel, 9); + if (features?.length) { + let hdms = coordinate.toStringHDMS( + proj.toLonLat(features[0].getGeometry().flatCoordinates), + ); + const featuresProperties = features[0].getProperties(); + e.map.getTarget().style.cursor = ''; + this.overlayPopup.current.setPosition(undefined); + this.overlayPopupDetailed.current.setPosition(e.coordinate); + emitEvent(mapElement, 'ol-click', { + bubbles: false, + detail: { + ...featuresProperties, + hdms, + flatCoordinates: features[0].getGeometry().flatCoordinates, + }, + }); + } else { + emitEvent(mapElement, 'ol-click', { + bubbles: false, + detail: {}, + }); + } + } + + onMoveend(e) { + const extent = e.map.getView().calculateExtent(e.map.getSize()); + this.props.setQuery({ + map_extent: extent, + }); + } + + isFeatureVisible(feature) { + const properties = feature.getProperties(); + const { + filter_bat_conclusions, + filter_countries, + filter_facility_types, + filter_industries, + filter_nuts_1, + filter_nuts_2, + filter_permit_types, + filter_permit_years, + filter_plant_types, + filter_pollutant_groups, + filter_pollutants, + filter_reporting_years, + filter_river_basin_districts, + filter_search, + } = this.props.query; + const { + bat_conclusions, + countryCode, + facilityTypes, + eea_activities, + nuts_regions, + permit_types, + permit_years, + plantTypes, + air_groups, + water_groups, + pollutants, + Site_reporting_year, + rbds, + siteName, + } = properties; + if (filter_search?.type === 'site' && filter_search.text !== siteName) { + return false; + } else if ( + filter_search?.type === 'site' && + filter_search.text === siteName + ) { + return 'highlight'; + } + if (!arrayContainsString(filter_reporting_years, Site_reporting_year)) { + return false; + } + if (!arrayContainsString(filter_countries, countryCode)) return false; + if (!stringContainedInArray(nuts_regions, filter_nuts_2)) return false; + if (!stringContainedInArray(nuts_regions, filter_nuts_1)) return false; + if (!stringContainedInArray(rbds, filter_river_basin_districts)) { + return false; + } + if (!arrayContainsString(filter_bat_conclusions, bat_conclusions)) { + return false; + } + if (!arrayContainsString(filter_industries, eea_activities)) return false; + if (!stringContainedInArray(permit_types, filter_permit_types)) { + return false; + } + if (!arrayContainsString(filter_permit_years, permit_years)) return false; + if (!arrayContainsString(filter_plant_types, plantTypes)) return false; + if ( + !arrayContainsString(filter_pollutant_groups, air_groups) && + !arrayContainsString(filter_pollutant_groups, water_groups) + ) { + return false; + } + if (!stringContainedInArray(pollutants, filter_pollutants)) return false; + if ((filter_facility_types || []).filter((item) => item).length) { + const type = facility_types[facilityTypes]; + for (let i = 0; i < filter_facility_types.length; i++) { + if (filter_facility_types[i] === type) { + return true; + } + } + return false; + } + return true; + } + + render() { + const { format, loadingstrategy, proj, source, tilegrid } = openlayers; + + if (__SERVER__) return ''; + return ( +
+
+ + { + this.map.current = data?.map; + if (data?.mapRendered && !this.state.mapRendered) { + this.setState({ mapRendered: true }); + } + }} + view={{ + center: proj.fromLonLat([20, 50]), + showFullExtent: true, + maxZoom: 16, + minZoom: 2, + zoom: 2, + }} + renderer="webgl" + onPointermove={this.onPointermove} + onClick={this.onClick} + onMoveend={this.onMoveend} + > + + + + + + + + + { + this.layerRegions.current = data?.layer; + }} + source={ + new source.Vector({ + loader: function (extent, _, projection) { + const esrijsonFormat = new format.EsriJSON(); + let url = getLayerRegionsURL(extent); + jsonp(url, {}, (error, response) => { + if (!error) { + let features = esrijsonFormat.readFeatures( + response, + { + featureProjection: projection, + }, + ); + if (features?.length > 0) { + this.addFeatures(features); + } + } + }); + }, + strategy: loadingstrategy.tile( + tilegrid.createXYZ({ + tileSize: 256, + }), + ), + }) + } + style={null} + title="1.Regions" + zIndex={1} + /> + { + this.layerSites.current = data?.layer; + }} + className="ol-layer-sites" + source={ + new source.Vector({ + loader: function (extent, resolution, projection) { + const mapElement = document.querySelector( + '#industry-map', + ); + _REQS++; + const esrijsonFormat = new format.EsriJSON(); + this.resolution = resolution; + let url = getLayerSitesURL(extent); + jsonp(url, {}, (error, response) => { + if (!error) { + let features = esrijsonFormat.readFeatures( + response, + { + featureProjection: projection, + }, + ); + if (features?.length > 0) { + this.addFeatures(features); + } + } + if (!--_REQS) { + this.dispatchEvent('load'); + emitEvent(mapElement, 'ol-features-load', { + bubbles: false, + detail: { + loaded: true, + }, + }); + } + }); + emitEvent(mapElement, 'ol-features-load', { + bubbles: false, + detail: { + loaded: false, + }, + }); + }, + strategy: function (extent, resolution) { + const tileGrid = tilegrid.createXYZ({ + tileSize: 256, + }); + let z = tileGrid.getZForResolution(resolution); + let tileRange = tileGrid.getTileRangeForExtentAndZ( + extent, + z, + ); + /** @type {Array} */ + let extents = []; + /** @type {import("./tilecoord.js").TileCoord} */ + let tileCoord = [z, 0, 0]; + for ( + tileCoord[1] = tileRange.minX; + tileCoord[1] <= tileRange.maxX; + ++tileCoord[1] + ) { + for ( + tileCoord[2] = tileRange.minY; + tileCoord[2] <= tileRange.maxY; + ++tileCoord[2] + ) { + extents.push( + tileGrid.getTileCoordExtent(tileCoord), + ); + } + } + if (this.resolution && this.resolution !== resolution) { + extents.forEach((newExtent) => { + this.loadedExtentsRtree_.forEach((loadedExtent) => { + const bigExtent = loadedExtent.extent; + if ( + openlayers.extent.containsExtent( + bigExtent, + newExtent, + ) && + bigExtent[0] !== newExtent[0] && + bigExtent[1] !== newExtent[1] && + bigExtent[2] !== newExtent[2] && + bigExtent[3] !== newExtent[3] + ) { + this.loadedExtentsRtree_.remove(loadedExtent); + } + }); + }); + } + return extents; + }, + }) + } + style={null} + title="2.Sites" + zIndex={1} + /> + + { + this.overlayPopup.current = data?.overlay; + }} + className="ol-popup" + positioning="center-center" + stopEvent={true} + > + + + { + this.overlayPopupDetailed.current = data?.overlay; + }} + className="ol-popup-detailed" + positioning="center-center" + stopEvent={true} + > + + + + + + {this.state.loading ? ( +
Loading...
+ ) : ( + '' + )} + + +
+
+ ); + } +} + +export default compose( + connectBlockToMultipleProviders, + connect( + (state) => ({ + query: { + ...qs.parse(state.router.location.search.replace('?', '')), + ...state.query.search, + }, + }), + { + setQuery, + }, + ), +)(View); diff --git a/src/components/manage/Blocks/IndustryMap/index.js b/src/components/manage/Blocks/IndustryMap/index.js new file mode 100644 index 0000000..f77214d --- /dev/null +++ b/src/components/manage/Blocks/IndustryMap/index.js @@ -0,0 +1,256 @@ +import axios from 'axios'; +import config from '@plone/volto/registry'; +import sliderSVG from '@plone/volto/icons/slider.svg'; +import mapPlaceholder from '@eeacms/volto-industry-theme/components/PrivacyProtection/map_placeholder.png'; +import { getEncodedQueryString } from '@eeacms/volto-industry-theme/helpers'; +import IndustryMapEdit from './Edit'; +import IndustryMapView from './View'; + +const filters = [ + { + queryKey: 'batConclusionCode', + featureKey: 'batConclusionCode', + op: 'like', + }, + { queryKey: 'EEAActivity', featureKey: 'eea_activities', op: 'like' }, + { queryKey: 'nuts_latest', featureKey: 'nuts_regions', op: 'like' }, + { queryKey: 'permitType', featureKey: 'permit_types', op: 'like' }, + { queryKey: 'permitYear', featureKey: 'permitYears', op: 'like' }, + { queryKey: 'facilityTypes', featureKey: 'facilityTypes', op: 'eqStr' }, + { queryKey: 'plantTypes', featureKey: 'plantTypes', op: 'like' }, + { queryKey: 'pollutant', featureKey: 'pollutants', op: 'like' }, + { queryKey: 'pollutantGroup', featureKey: 'air_groups', op: 'like' }, + { queryKey: 'reportingYear', featureKey: 'Site_reporting_year', op: 'eq' }, + { queryKey: 'riverBasin', featureKey: 'rbds', op: 'like' }, + { queryKey: 'siteCountry', featureKey: 'countryCode', op: 'like' }, + { queryKey: 'siteTerm', featureKey: 'siteName', op: 'like' }, +]; + +export const dataprotection = { + enabled: true, + privacy_statement: + 'This map is hosted by a third party [Environmental Systems Research Institute, INC: "ESRI"]. By showing th external content you accept the terms and conditions of www.esri.com. This includes their cookie policies, which e have no control over.', + privacy_cookie_key: 'site-location-map', + placeholder_image: mapPlaceholder, + type: 'big', +}; + +export const getStyles = (style) => { + const obj = {}; + obj.smallCircle = new style.Style({ + image: new style.Circle({ + radius: 4, + fill: new style.Fill({ color: '#000' }), + stroke: new style.Stroke({ color: '#6A6A6A', width: 1 }), + zIndex: 0, + }), + }); + obj.bigCircle = new style.Style({ + image: new style.Circle({ + radius: 6, + fill: new style.Fill({ color: '#000' }), + stroke: new style.Stroke({ color: '#6A6A6A', width: 1 }), + zIndex: 0, + }), + }); + obj.smallGreenCircle = new style.Style({ + image: new style.Circle({ + radius: 4, + fill: new style.Fill({ color: '#00FF00' }), + stroke: new style.Stroke({ color: '#6A6A6A', width: 1 }), + zIndex: 0, + }), + }); + obj.bigGreenCircle = new style.Style({ + image: new style.Circle({ + radius: 6, + fill: new style.Fill({ color: '#00FF00' }), + stroke: new style.Stroke({ color: '#6A6A6A', width: 1 }), + zIndex: 0, + }), + }); + obj.regionCircle = new style.Style({ + image: new style.Circle({ + radius: 6, + fill: new style.Fill({ color: '#4296B2' }), + stroke: new style.Stroke({ color: '#6A6A6A', width: 1 }), + zIndex: 0, + }), + }); + + return obj; +}; + +export const getLayerSitesURL = (extent) => { + return `https://air.discomap.eea.europa.eu/arcgis/rest/services/Air/IED_SiteMap/FeatureServer/0/query/?f=json&returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=${encodeURIComponent( + '{"xmin":' + + extent[0] + + ',"ymin":' + + extent[1] + + ',"xmax":' + + extent[2] + + ',"ymax":' + + extent[3] + + ',"spatialReference":{"wkid":102100}}', + )}&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*&outSR=102100`; +}; + +export const getLayerRegionsURL = (extent) => { + return `https://air.discomap.eea.europa.eu/arcgis/rest/services/Air/IED_Clusters_WM/FeatureServer/0/query/?f=json&returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=${encodeURIComponent( + '{"xmin":' + + extent[0] + + ',"ymin":' + + extent[1] + + ',"xmax":' + + extent[2] + + ',"ymax":' + + extent[3] + + ',"spatialReference":{"wkid":102100}}', + )}&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*&outSR=102100`; +}; + +export const getLayerBaseURL = () => + 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}'; + +export const getLocationExtent = (data) => { + return axios.get( + encodeURI( + 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?SingleLine=' + + data.text + + '&f=json&outSR={"wkid":102100,"latestWkid":3857}&outFields=Match_addr,Addr_type,StAddr,City&magicKey=' + + data.magicKey + + '&maxLocations=6', + ), + ); +}; + +export const getSiteExtent = (data) => { + const db_version = + process.env.RAZZLE_DB_VERSION || config.settings.db_version || 'latest'; + return axios.get( + `${config.settings.providerUrl}?${getEncodedQueryString(`SELECT + MIN(shape_wm.STX) AS MIN_X, + MIN(shape_wm.STY) AS MIN_Y, + MAX(shape_wm.STX) AS MAX_X, + MAX(shape_wm.STY) AS MAX_Y + FROM [IED].[${db_version}].[SiteMap] + WHERE [siteName] COLLATE Latin1_General_CI_AI LIKE '%${data.text}%'`)}`, + ); +}; + +export const getCountriesExtent = (countries) => { + const requests = []; + countries.forEach((country) => { + requests.push( + axios.get( + `https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?SingleLine=${country}&f=pjson&maxLocations=1`, + ), + ); + }); + return Promise.all(requests); +}; + +// https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?SingleLine=Romania&f=pjson&maxLocations=1 + +export const filterFeature = (feature, query = {}) => { + let ok = true; + const properties = feature.getProperties(); + + for (let filter = 0; filter < filters.length; filter++) { + const { queryKey, featureKey, op } = filters[filter]; + if (!ok) { + break; + } + if (Array.isArray(query[queryKey])) { + for (let item = 0; item < query[queryKey].length; item++) { + const value = query[queryKey][item]; + if ( + value && + ((op === 'like' && !properties[featureKey]?.includes(value)) || + (op === 'eq' && properties[featureKey] !== value)) + ) { + ok = false; + break; + } + } + } else if (query[queryKey]) { + const value = query[queryKey]; + if ( + (op === 'like' && !properties[featureKey]?.includes(value)) || + (op === 'eq' && properties[featureKey] !== value) + ) { + ok = false; + break; + } + } + } + + return ok; +}; + +export const getWhereStatement = (query = {}) => { + let where = []; + for (let filter = 0; filter < filters.length; filter++) { + const { queryKey, featureKey, op } = filters[filter]; + if (Array.isArray(query[queryKey])) { + where[filter] = []; + for (let item = 0; item < query[queryKey].length; item++) { + const value = query[queryKey][item]; + if (op === 'like' && value) { + where[filter].push(`${featureKey} LIKE '%${value}%'`); + } else if (op === 'eq' && value) { + where[filter].push(`${featureKey} = ${value}`); + } else if (op === 'eqStr' && value) { + where[filter].push(`${featureKey} = '${value}''`); + } + } + } else if (query[queryKey]) { + where[filter] = []; + const value = query[queryKey]; + if (op === 'like' && value) { + where[filter].push(`${featureKey} LIKE '%${value}%'`); + } else if (op === 'eq' && value) { + where[filter].push(`${featureKey} = ${value}`); + } else if (op === 'eqStr' && value) { + where[filter].push(`${featureKey} = '${value}''`); + } + } + } + + return where + .filter((w) => w.length) + .map((w) => `(${w.join(' OR ')})`) + .join(' AND '); +}; + +export const getRegionsWhereStatement = (query = {}) => { + let where = []; + if (Array.isArray(query.siteCountry)) { + for (let item = 0; item < query.siteCountry.length; item++) { + const value = query.siteCountry[item]; + if (value) { + where.push(`CNTR_CODE LIKE '%${value}%'`); + } + } + } + return where.join(' AND '); +}; + +export default (config) => { + config.blocks.blocksConfig.industry_map = { + id: 'industry_map', + title: 'Industry map', + icon: sliderSVG, + group: 'eprtr_blocks', + edit: IndustryMapEdit, + view: IndustryMapView, + restricted: false, + mostUsed: false, + sidebarTab: 1, + security: { + addPermission: [], + view: [], + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/IndustryMap/schema.js b/src/components/manage/Blocks/IndustryMap/schema.js new file mode 100644 index 0000000..88ce673 --- /dev/null +++ b/src/components/manage/Blocks/IndustryMap/schema.js @@ -0,0 +1,41 @@ +const providerSchema = { + title: 'Provider', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['name', 'url'], + }, + ], + properties: { + name: { + title: 'Provider name', + }, + url: { + title: 'Provider url', + widget: 'object_by_path', + }, + }, + required: [], +}; + +const schema = { + title: 'Industry map', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['providers'], + }, + ], + properties: { + providers: { + title: 'Providers', + schema: providerSchema, + widget: 'object_list', + }, + }, + required: [], +}; + +export default schema; diff --git a/src/components/manage/Blocks/IndustryMap/styles.less b/src/components/manage/Blocks/IndustryMap/styles.less new file mode 100644 index 0000000..f42abac --- /dev/null +++ b/src/components/manage/Blocks/IndustryMap/styles.less @@ -0,0 +1,222 @@ +@import (multiple, reference, optional) '../../theme.config'; + +@type: extra; +@element: custom; + +.industry-map { + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + + .privacy-protection { + .wrapper { + opacity: 1; + } + } + + .ol-map { + height: 600px; + min-height: 600px; + + .ol-viewport { + overflow: visible !important; + } + } + + .ol-control { + &.ol-custom { + left: unset !important; + right: 0.5rem !important; + + .menu-button { + display: none; + + @media only screen and (max-width: @largestTabletScreen) { + display: block; + } + } + } + } + + .popover-header { + padding: 0.5rem 0.75rem; + border-bottom: 1px solid #ebebeb; + margin-bottom: 0; + background-color: #f7f7f7; + border-top-left-radius: calc(0.3rem - 1px); + border-top-right-radius: calc(0.3rem - 1px); + font-size: 1rem; + } + + .popover-actions { + padding: 1rem 2rem; + border-top: 1px solid #ebebeb; + background-color: #f7f7f7; + border-bottom-left-radius: calc(0.3rem - 1px); + border-bottom-right-radius: calc(0.3rem - 1px); + text-align: center; + } + + .popover-body { + padding: 0.5rem 0.75rem; + } + + .popover-body code { + color: #e83e8c; + font-size: 87.5%; + word-wrap: break-word; + } + + .ol-popup { + #popup { + position: absolute; + bottom: 10px; + min-width: 280px; + max-width: 280px; + transform: translateX(-50%); + background-color: white; + border: 1px solid #cccccc; + border-radius: 0.2em; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + + &::after, + &::before { + position: absolute; + top: 100%; + width: 0; + height: 0; + border: solid transparent; + content: ' '; + pointer-events: none; + } + + &::after { + left: 50%; + border-width: 10px; + border-top-color: white; + transform: translateX(-50%); + } + + &::before { + left: 50%; + border-width: 11px; + border-top-color: #cccccc; + margin-left: -11px; + } + } + } + + .ol-dynamic-filter { + display: block !important; + height: 100%; + min-width: 320px; + max-width: 320px; + left: 100px; + transition: opacity 0.3s ease-in-out; + overflow: auto; + + > div { + height: 100%; + } + + #map-sidebar { + background-color: #fff; + color: @primaryColor; + height: fit-content; + min-height: 100%; + padding: 2rem 1rem; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + + h2 .delete.icon { + display: none; + } + + .ui.dropdown { + > .dropdown.icon:before { + color: @orange; + } + + .text { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + + .clear-button { + --text-color: @orange; + margin-top: 1.5rem; + width: 100%; + } + + @media only screen and (max-width: @largestTabletScreen) { + h2 .delete.icon { + display: initial; + } + } + } + + @media only screen and (max-width: @largestTabletScreen) { + display: none !important; + } + } + + .loader { + background-color: rgba(255, 255, 255, 0.8); + border-radius: 4px; + padding: 4px 6px; + position: absolute; + font-size: 1em; + font-weight: bold; + z-index: 1; + bottom: 1rem; + right: 1rem; + color: @primaryColor; + } + + @media only screen and (max-width: @largestMobileScreen) { + padding: 0 1rem; + } +} + +.ui.modal#popup-detailed { + > .header, + h3 { + color: @primaryColor; + &:not(:first-child) { + margin-top: 1rem; + } + } + + > .header { + display: flex; + justify-content: space-between; + align-items: center; + + .icon { + cursor: pointer; + color: @orange !important; + + &:hover { + .darkenFilter(0.9); + } + } + } + + > .actions { + text-align: center; + padding: 1rem !important; + } + + p:not(:last-child) { + margin-bottom: 0.5em; + } +} + +body.map-sidebar-visible .industry-map .ol-dynamic-filter { + @media only screen and (max-width: @largestTabletScreen) { + display: block !important; + width: 100%; + left: 0; + z-index: 1; + } +} diff --git a/src/components/manage/Blocks/List/View.jsx b/src/components/manage/Blocks/List/View.jsx new file mode 100644 index 0000000..6fa0a89 --- /dev/null +++ b/src/components/manage/Blocks/List/View.jsx @@ -0,0 +1,78 @@ +import React from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import { UniversalLink } from '@plone/volto/components'; +import cx from 'classnames'; +import { setQuery } from '@eeacms/volto-industry-theme/actions'; + +import './styles.less'; + +const getLength = (length = 0, limit = 0) => { + if (!length) return 0; + return limit < length ? limit : length; +}; + +const View = (props) => { + const { data = {} } = props; + const provider_data = props.provider_data || {}; + const columns = getLength( + provider_data[Object.keys(provider_data)?.[0]]?.length, + data.limit, + ); + + return ( + <> + {props.mode === 'edit' ?

Connected list

: ''} + {data.queries?.length && data.value ? ( +
+ {Array(Math.max(0, columns)) + .fill() + .map((_, column) => { + const queries = {}; + data.queries.forEach((query) => { + if ( + query.paramToSet && + query.param && + provider_data[query.param] + ) { + queries[query.paramToSet] = + provider_data[query.param][column]; + } + }); + + return ( + { + props.setQuery({ + ...queries, + }); + }} + > + {provider_data[data.value][column]} + + ); + })} +
+ ) : ( +

Please add queries

+ )} + + ); +}; + +export default compose( + connect( + (state) => ({ + query: state.router.location.search, + search: state.query.search, + }), + { setQuery }, + ), +)(View); diff --git a/src/components/manage/Blocks/List/index.js b/src/components/manage/Blocks/List/index.js new file mode 100644 index 0000000..6d7d66b --- /dev/null +++ b/src/components/manage/Blocks/List/index.js @@ -0,0 +1,17 @@ +import ListView from './View'; +import getSchema from './schema'; + +export default (config) => { + config.blocks.blocksConfig.custom_connected_block = { + ...config.blocks.blocksConfig.custom_connected_block, + blocks: { + ...config.blocks.blocksConfig.custom_connected_block.blocks, + list: { + view: ListView, + getSchema: getSchema, + title: 'List', + }, + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/List/schema.js b/src/components/manage/Blocks/List/schema.js new file mode 100644 index 0000000..7a76604 --- /dev/null +++ b/src/components/manage/Blocks/List/schema.js @@ -0,0 +1,76 @@ +const getQuerySchema = (data) => { + const choices = Object.keys(data).map((key) => [key, key]); + + return { + title: 'Query', + fieldsets: [ + { id: 'default', title: 'Default', fields: ['param', 'paramToSet'] }, + ], + properties: { + param: { + title: 'Param', + type: 'array', + choices, + }, + paramToSet: { + title: 'Param to set', + widget: 'textarea', + }, + }, + required: [], + }; +}; + +const getSchema = (props) => { + const data = props.provider_data || {}; + const choices = Object.keys(data).map((key) => [key, key]); + + return { + title: 'List', + + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['url', 'value', 'limit', 'className'], + }, + { + id: 'advanced', + title: 'Advanced', + fields: ['queries'], + }, + ], + + properties: { + url: { + title: 'Url', + widget: 'object_by_path', + }, + value: { + title: 'Value', + type: 'array', + choices, + }, + limit: { + title: 'Limit', + type: 'number', + minimum: '0', + onBlur: () => null, + onClick: () => null, + }, + className: { + title: 'Class', + widget: 'textarea', + }, + queries: { + title: 'Queries', + widget: 'object_list', + schema: getQuerySchema(data), + }, + }, + + required: [], + }; +}; + +export default getSchema; diff --git a/src/components/manage/Blocks/List/styles.less b/src/components/manage/Blocks/List/styles.less new file mode 100644 index 0000000..a2caf75 --- /dev/null +++ b/src/components/manage/Blocks/List/styles.less @@ -0,0 +1,8 @@ +.connected-list .column .label { + margin-bottom: 0; + font-weight: bold; +} + +.connected-list .column .value { + margin-bottom: 1rem; +} diff --git a/src/components/manage/Blocks/NavigationBlock/Edit.jsx b/src/components/manage/Blocks/NavigationBlock/Edit.jsx new file mode 100644 index 0000000..ac40afe --- /dev/null +++ b/src/components/manage/Blocks/NavigationBlock/Edit.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { SidebarPortal } from '@plone/volto/components'; +import InlineForm from '@plone/volto/components/manage/Form/InlineForm'; +import schema from './schema'; +import View from './View'; + +const Edit = (props) => ( + <> + + + + { + props.onChangeBlock(props.block, { + ...props.data, + [id]: value, + }); + }} + formData={props.data} + /> + + +); + +export default Edit; diff --git a/src/components/manage/Blocks/NavigationBlock/View.jsx b/src/components/manage/Blocks/NavigationBlock/View.jsx new file mode 100644 index 0000000..974e92e --- /dev/null +++ b/src/components/manage/Blocks/NavigationBlock/View.jsx @@ -0,0 +1,64 @@ +import React, { useEffect, useState } from 'react'; +import { connect } from 'react-redux'; +import { Container, Menu } from 'semantic-ui-react'; +import { UniversalLink } from '@plone/volto/components'; +import { getBaseUrl } from '@plone/volto/helpers'; + +import './styles.less'; + +const MenuWrapper = ({ children, data }) => { + if (data.styles?.stretch === 'stretch') { + return {children}; + } + return children; +}; + +const View = ({ location, data, navigation }) => { + const [items, setItems] = useState([]); + const pages = data.pages || []; + const pathname = getBaseUrl(location.pathname); + + useEffect(() => { + const parent = navigation.filter((item) => item.url === data.parent)[0]; + setItems(parent?.items || []); + }, [data.parent, navigation]); + + return ( + + + {items.map((item) => ( + + + {item.title} + + + ))} + {pages.map((item) => { + return item.url ? ( + + + {item.title} + + + ) : ( + '' + ); + })} + + + ); +}; + +export default connect((state) => ({ + location: state.router.location, + navigation: state.navigation.items, +}))(View); diff --git a/src/components/manage/Blocks/NavigationBlock/index.js b/src/components/manage/Blocks/NavigationBlock/index.js new file mode 100644 index 0000000..ef0ff23 --- /dev/null +++ b/src/components/manage/Blocks/NavigationBlock/index.js @@ -0,0 +1,22 @@ +import imageSVG from '@plone/volto/icons/image.svg'; +import NavigationBlockView from './View'; +import NavigationBlockEdit from './Edit'; + +export default (config) => { + config.blocks.blocksConfig.navigationBlock = { + id: 'navigationBlock', + title: 'Navigation Block', + icon: imageSVG, + group: 'common', + view: NavigationBlockView, + edit: NavigationBlockEdit, + restricted: false, + mostUsed: false, + sidebarTab: 1, + security: { + addPermission: [], + view: [], + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/NavigationBlock/schema.js b/src/components/manage/Blocks/NavigationBlock/schema.js new file mode 100644 index 0000000..5aabbff --- /dev/null +++ b/src/components/manage/Blocks/NavigationBlock/schema.js @@ -0,0 +1,47 @@ +const pagesSchema = { + title: 'Page', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['title', 'url'], + }, + ], + properties: { + title: { + title: 'Title', + }, + url: { + title: 'Pages', + widget: 'textarea', + }, + }, + required: [], +}; + +export default { + title: 'Navigation block', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['ignoreScroll', 'parent', 'pages'], + }, + ], + properties: { + parent: { + title: 'Parent', + widget: 'object_by_path', + }, + pages: { + title: 'Pages', + schema: pagesSchema, + widget: 'object_list', + }, + ignoreScroll: { + title: 'Ignore scroll', + type: 'boolean', + }, + }, + required: [], +}; diff --git a/src/components/manage/Blocks/NavigationBlock/styles.less b/src/components/manage/Blocks/NavigationBlock/styles.less new file mode 100644 index 0000000..97c03f3 --- /dev/null +++ b/src/components/manage/Blocks/NavigationBlock/styles.less @@ -0,0 +1,107 @@ +@import (multiple, reference, optional) '../../theme.config'; + +@type: extra; +@element: custom; + +@borderSize: 3px; + +.industrial-site-style { + .ui.menu.navigation-block { + flex-wrap: wrap; + margin-bottom: 0; + box-shadow: none; + border: none; + } +} + +.ui.menu.navigation-block { + @textColor: var(--text-color, @blue); + background: transparent; + + .item { + margin-bottom: 0 !important; + border: none !important; + padding: @relative11px @relative14px; + + a { + color: @textColor; + font-weight: bold; + + &:hover { + .darkenFilter(0.9); + } + } + + &::before { + display: none; + } + + &.active { + background: transparent; + + &::before { + content: ''; + display: block; + position: absolute; + top: calc(100% - @borderSize + 1px); + height: @borderSize; + width: 100%; + background-color: @textColor; + } + + &:hover { + .darkenFilter(0.9); + } + } + } + + > .item:first-child { + border-radius: @defaultBorderRadius 0px 0px 0px; + } +} + +.type-1 { + > .ui.menu.navigation-block { + @textColor: var(--text-color, @blue); + border-radius: 2em; + border: 1px solid @textColor; + height: 100%; + + .item { + flex: 1; + justify-content: center; + padding: 0; + border-radius: 0; + margin: -1px; + transition: background-color 0.2s ease-in-out; + + a { + display: inline-block; + width: 100%; + text-align: center; + padding: @relative11px @relative14px; + transition: color 0.2s ease-in-out; + } + + &:first-child { + border-radius: 2em 0 0 2em; + } + + &:last-child { + border-radius: 0 2em 2em 0; + } + + &.active { + background-color: @textColor; + + a { + color: #fff; + } + + &::before { + display: none; + } + } + } + } +} diff --git a/src/components/manage/Blocks/PollutantIndex/Edit.jsx b/src/components/manage/Blocks/PollutantIndex/Edit.jsx new file mode 100644 index 0000000..ac40afe --- /dev/null +++ b/src/components/manage/Blocks/PollutantIndex/Edit.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { SidebarPortal } from '@plone/volto/components'; +import InlineForm from '@plone/volto/components/manage/Form/InlineForm'; +import schema from './schema'; +import View from './View'; + +const Edit = (props) => ( + <> + + + + { + props.onChangeBlock(props.block, { + ...props.data, + [id]: value, + }); + }} + formData={props.data} + /> + + +); + +export default Edit; diff --git a/src/components/manage/Blocks/PollutantIndex/View.jsx b/src/components/manage/Blocks/PollutantIndex/View.jsx new file mode 100644 index 0000000..e58f907 --- /dev/null +++ b/src/components/manage/Blocks/PollutantIndex/View.jsx @@ -0,0 +1,334 @@ +import React from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import { Tab, Dropdown, Table } from 'semantic-ui-react'; +import cx from 'classnames'; +import qs from 'querystring'; +import { connectBlockToMultipleProviders } from '@eeacms/volto-datablocks/hocs'; +import { setQuery, deleteQuery } from '@eeacms/volto-industry-theme/actions'; +import { getObjectByIndex } from '@eeacms/volto-industry-theme/helpers'; +import './styles.less'; + +const RenderTable = (props) => { + const { headless = false, headers = [], rows = [] } = props; + return ( + + {!headless && headers.length > 0 && ( + + + {headers.map((header, headerIndex) => ( + + {header.value} + + ))} + + + )} + + {rows.length > 0 && + headers.length > 0 && + rows.map((row, rowIndex) => ( + + {headers.map((header, headerIndex) => ( + +

+ + ))} + + ))} + +

+ ); +}; + +const panes = [ + { + menuItem: 'General infromation', + render: ({ data }) => { + const { pollutant = {} } = data; + const hasData = Object.keys(pollutant).length > 0; + + const molecular_formula_sub = pollutant?.molecular_formula_sub + ?.split('|') + .map((sub) => sub.replace(/['"]+/g, '')); + const molecular_formula = pollutant?.molecular_formula + ?.replace(/['"]+/g, '') + .split('\n') + .map( + (element, index) => + element + + (molecular_formula_sub?.[index] + ? `${molecular_formula_sub[index]}` + : ''), + ) + .join(''); + + const health_affects_sub = pollutant.health_affects_sub + ?.split('|') + ?.map((sub) => sub.replace(/['"]+/g, '')); + const health_affects = + pollutant.health_affects + ?.split('|') + ?.map((item, index) => + health_affects_sub?.[index] + ? item + .replace(/['"]+/g, '') + .replace('\n', `${health_affects_sub[index]}`) + : item.replace(/['"]+/g, ''), + ) || []; + + if (!hasData) { + return ; + } + + return ( + + + {pollutant.description ? ( + <> +

Description

+

{pollutant.description}

+ + ) : ( + '' + )} + {pollutant.main_uses ? ( + <> +

Main Uses

+

{pollutant.main_uses}

+ + ) : ( + '' + )} + {pollutant.main_uses ? ( + <> + {' '} +

Where do the releases originate?

+

+ + ) : ( + '' + )} + {health_affects?.length ? ( + <> +

How do the releases affect you and your environment?

+ {health_affects.map((item, index) => ( +

+ ))} + + ) : ( + '' + )} + + ); + }, + }, + { + menuItem: 'Pollutant thresholds', + render: ({ data }) => { + const { pollutant = {} } = data; + const hasData = Object.keys(pollutant).length > 0; + + if (!hasData) { + return ; + } + + return ( + +

Provisions under E-PRTR Regulation

+

Threshold for releases

+ +

+ * - indicates that the parameter and medium in question do not + trigger a reporting requirement. +

+ + ); + }, + }, +]; + +const View = ({ providers_data, query, setQuery, ...props }) => { + const id = query.index_pollutant_id || -1; + + React.useEffect(() => { + if (!query.index_pollutant_id) { + setQuery({ index_pollutant_id: 70 }); + } + /* eslint-disable-next-line */ + }, []); + + const index_data = React.useMemo(() => { + if (id < 0) return {}; + const { + index_pollutants, + index_pollutant_groups, + index_pollutant_iso, + index_pollutant_other_provisions, + index_pollutant_phrases, + } = providers_data || {}; + const pollutant = getObjectByIndex( + index_pollutants, + index_pollutants?.pollutantId?.indexOf(id), + ); + const pollutantGroup = getObjectByIndex( + index_pollutant_groups, + index_pollutant_groups?.pollutant_group_id?.indexOf(pollutant.parentId), + ); + const pollutantIso = getObjectByIndex( + index_pollutant_iso, + index_pollutant_iso?.pollutantId?.indexOf(pollutant.pollutantId), + ); + const pollutantOtherProvisions = []; + const pollutantPhrases = { + clp_phrases: [], + ghs_phrases: [], + r_phrases: [], + s_phrases: [], + }; + + const provisions_ids = + pollutant.other_provisions + ?.split('|') + ?.map((item) => Number.parseInt(item.replace(/['"]+/g, ''))) || []; + + provisions_ids.forEach((id) => { + const provision = getObjectByIndex( + index_pollutant_other_provisions, + index_pollutant_other_provisions?.other_provision_id?.indexOf(id), + ); + if (Object.keys(provision).length) { + pollutantOtherProvisions.push(provision); + } + }); + + Object.keys(pollutantPhrases) + .filter((key) => pollutant[key] && pollutant[key] !== 'NoData') + .forEach((key) => { + pollutant[key].split('|').forEach((item) => { + const id = item.replace(/['"]+/g, ''); + const phrase = getObjectByIndex( + index_pollutant_phrases, + index_pollutant_phrases?.phrase_id?.indexOf(id), + ); + if (Object.keys(phrase).length) { + pollutantPhrases[key].push(phrase); + } + }); + }); + + return { + pollutant, + pollutantGroup, + pollutantIso, + pollutantOtherProvisions, + pollutantPhrases, + }; + }, [id, providers_data]); + + const pollutantsOptions = React.useMemo(() => { + const { index_pollutants } = providers_data; + return ( + index_pollutants?.pollutantId?.map((_, index) => ({ + key: index_pollutants.code[index], + value: index_pollutants.pollutantId[index], + text: index_pollutants.name[index], + })) || [] + ); + }, [providers_data]); + + return ( +
+ { + setQuery({ index_pollutant_id: data.value }); + }} + placeholder={'Select pollutant'} + options={pollutantsOptions} + value={id} + /> + + +
+ ); +}; + +export default compose( + connectBlockToMultipleProviders, + connect( + (state) => ({ + query: { + ...(qs.parse(state.router.location?.search?.replace('?', '')) || {}), + ...(state.query.search || {}), + }, + }), + { + setQuery, + deleteQuery, + }, + ), +)(View); diff --git a/src/components/manage/Blocks/PollutantIndex/index.js b/src/components/manage/Blocks/PollutantIndex/index.js new file mode 100644 index 0000000..fd84e62 --- /dev/null +++ b/src/components/manage/Blocks/PollutantIndex/index.js @@ -0,0 +1,22 @@ +import imageSVG from '@plone/volto/icons/image.svg'; +import PollutantIndexView from './View'; +import PollutantIndexEdit from './Edit'; + +export default (config) => { + config.blocks.blocksConfig.pollutantIndex = { + id: 'pollutantIndex', + title: 'Pollutant Index', + icon: imageSVG, + group: 'eprtr_blocks', + view: PollutantIndexView, + edit: PollutantIndexEdit, + restricted: false, + mostUsed: false, + sidebarTab: 1, + security: { + addPermission: [], + view: [], + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/PollutantIndex/schema.js b/src/components/manage/Blocks/PollutantIndex/schema.js new file mode 100644 index 0000000..e5568c8 --- /dev/null +++ b/src/components/manage/Blocks/PollutantIndex/schema.js @@ -0,0 +1,46 @@ +const providerSchema = { + title: 'Provider', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['name', 'url'], + }, + ], + properties: { + name: { + title: 'Provider name', + }, + url: { + title: 'Provider url', + widget: 'object_by_path', + }, + }, + required: [], +}; + +export default { + title: 'Pollutants index', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['allowedParams', 'providers'], + }, + ], + properties: { + providers: { + title: 'Providers', + schema: providerSchema, + widget: 'object_list', + }, + allowedParams: { + title: 'Allowed params', + type: 'array', + items: { + choices: [], + }, + }, + }, + required: [], +}; diff --git a/src/components/manage/Blocks/PollutantIndex/styles.less b/src/components/manage/Blocks/PollutantIndex/styles.less new file mode 100644 index 0000000..9fb92f8 --- /dev/null +++ b/src/components/manage/Blocks/PollutantIndex/styles.less @@ -0,0 +1,106 @@ +@import (multiple, reference, optional) '../../theme.config'; + +@type: extra; +@element: custom; + +@borderSize: 3px; + +.index-pollutants { + border: 1px solid #d4d4d5; + border-radius: 0.25rem; + background-color: #f6f6f6; + padding-top: 1rem; + + .ui.selection.dropdown { + color: @primaryColor; + background: transparent; + width: fit-content; + margin-bottom: 1rem; + width: fit-content; + border: none; + font-size: 1em; + font-weight: bold; + + > .text { + color: @primaryColor !important; + font-weight: bold !important; + } + + > .text, + > .icon { + font-size: 1.5em; + } + + &.active { + border-bottom: none; + box-shadow: none; + } + + &:hover { + box-shadow: none !important; + } + } + + .ui.menu { + @textColor: var(--text-color, @blue); + background: transparent; + border: none; + box-shadow: none; + + .item { + margin-bottom: 0 !important; + border: none !important; + padding: @relative11px @relative14px; + color: @textColor; + font-weight: bold; + + &:hover { + .darkenFilter(0.9); + color: @textColor; + background: transparent !important; + } + + &::before { + display: none; + } + + &.active { + background: transparent; + color: @textColor; + font-weight: bold; + + &:hover { + color: @textColor; + } + + &::before { + content: ''; + display: block; + position: absolute; + top: calc(100% - @borderSize + 1px); + left: 0.875em; + height: @borderSize; + width: calc(100% - 1.75em); + background-color: @textColor; + } + + &:hover { + .darkenFilter(0.9); + } + } + } + + > .item:first-child { + border-radius: @defaultBorderRadius 0px 0px 0px; + } + } + + .ui.tab { + background-color: transparent !important; + border: none !important; + } + + h3 { + color: @orange; + } +} diff --git a/src/components/manage/Blocks/Select/View.jsx b/src/components/manage/Blocks/Select/View.jsx new file mode 100644 index 0000000..6c2c866 --- /dev/null +++ b/src/components/manage/Blocks/Select/View.jsx @@ -0,0 +1,83 @@ +import React from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import { Dropdown } from 'semantic-ui-react'; +import cx from 'classnames'; +import { setQuery } from '@eeacms/volto-industry-theme/actions'; +import './styles.less'; + +const View = (props) => { + const [value, setValue] = React.useState(null); + const { data = {} } = props; + const provider_data = props.provider_data || {}; + const columns = provider_data[Object.keys(provider_data)?.[0]]?.length || 0; + + const options = + data.value && data.text + ? Array(Math.max(0, columns)) + .fill() + .map((_, column) => ({ + key: provider_data[data.value][column], + value: provider_data[data.value][column], + text: provider_data[data.text][column], + })) + : []; + + React.useEffect(() => { + if (!value && options.length) { + const cachedValue = data.queries?.filter( + (query) => query.param === data.value, + )?.[0]?.paramToSet; + onChange(props.query[cachedValue] || options[0]?.value); + } + /* eslint-disable-next-line */ + }, [provider_data]); + + const onChange = (value) => { + let index; + const queries = {}; + for (let i = 0; i < options.length; i++) { + if (options[i].value === value) { + index = i; + break; + } + } + if (data.queries?.length) { + data.queries.forEach((query) => { + if (query.param && query.paramToSet) { + queries[query.paramToSet] = provider_data[query.param][index]; + } + }); + } + setValue(value); + props.setQuery({ + ...queries, + }); + }; + + return ( + <> + {props.mode === 'edit' ?

Connected select

: ''} +
+ { + onChange(data.value); + }} + placeholder={data.placeholder} + options={options} + value={value} + /> +
+ + ); +}; + +export default compose( + connect( + (state) => ({ + query: state.query.search, + }), + { setQuery }, + ), +)(View); diff --git a/src/components/manage/Blocks/Select/index.js b/src/components/manage/Blocks/Select/index.js new file mode 100644 index 0000000..abd8b71 --- /dev/null +++ b/src/components/manage/Blocks/Select/index.js @@ -0,0 +1,17 @@ +import SelectView from './View'; +import getSchema from './schema'; + +export default (config) => { + config.blocks.blocksConfig.custom_connected_block = { + ...config.blocks.blocksConfig.custom_connected_block, + blocks: { + ...config.blocks.blocksConfig.custom_connected_block.blocks, + select: { + view: SelectView, + getSchema: getSchema, + title: 'Select', + }, + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/Select/schema.js b/src/components/manage/Blocks/Select/schema.js new file mode 100644 index 0000000..72a8273 --- /dev/null +++ b/src/components/manage/Blocks/Select/schema.js @@ -0,0 +1,78 @@ +const getQuerySchema = (data) => { + const choices = Object.keys(data).map((key) => [key, key]); + + return { + title: 'Query', + fieldsets: [ + { id: 'default', title: 'Default', fields: ['param', 'paramToSet'] }, + ], + properties: { + param: { + title: 'Param', + type: 'array', + choices, + }, + paramToSet: { + title: 'Param to set', + widget: 'textarea', + }, + }, + required: [], + }; +}; + +const getSchema = (props) => { + const data = props.provider_data || {}; + const choices = Object.keys(data).map((key) => [key, key]); + + return { + title: 'Select', + + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['url', 'value', 'text', 'placeholder', 'className'], + }, + { + id: 'advanced', + title: 'Advanced', + fields: ['queries'], + }, + ], + + properties: { + url: { + title: 'Url', + widget: 'object_by_path', + }, + value: { + title: 'Value', + type: 'array', + choices, + }, + text: { + title: 'Text', + type: 'array', + choices, + }, + placeholder: { + title: 'Placeholder', + widget: 'textarea', + }, + className: { + title: 'Class', + widget: 'textarea', + }, + queries: { + title: 'Queries', + widget: 'object_list', + schema: getQuerySchema(data), + }, + }, + + required: [], + }; +}; + +export default getSchema; diff --git a/src/components/manage/Blocks/Select/styles.less b/src/components/manage/Blocks/Select/styles.less new file mode 100644 index 0000000..e69de29 diff --git a/src/components/manage/Blocks/SiteBlocks/BatConclusions.jsx b/src/components/manage/Blocks/SiteBlocks/BatConclusions.jsx new file mode 100644 index 0000000..b04d064 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/BatConclusions.jsx @@ -0,0 +1,204 @@ +import React from 'react'; +import { Popup, Grid } from 'semantic-ui-react'; +import Icon from '@plone/volto/components/theme/Icon/Icon'; +import { UniversalLink } from '@plone/volto/components'; +import { getDate } from './helpers'; +import cx from 'classnames'; +import infoSVG from '@plone/volto/icons/info.svg'; +import rightSVG from '@plone/volto/icons/right-key.svg'; +import downSVG from '@plone/volto/icons/down-key.svg'; + +const hasConclusions = (data, installations) => { + if (!installations.length) return false; + for (let i = 0; i < installations.length; i++) { + const conclusions = Object.keys(data[installations[i]] || {}); + if (conclusions.length) return true; + } + return false; +}; + +const View = (props) => { + const [activeAels, setActiveAels] = React.useState({}); + const { data = {}, installationsNth = {}, entity = '' } = props; + const installations = Object.keys(data).sort(); + + return ( +
+
+

BAT conclusions

+ + +
+ } + /> +
+ + {hasConclusions(data, installations) ? ( +
+ {installations.map((installation) => { + const conclusions = Object.keys(data[installation] || {}).sort(); + + return conclusions.length ? ( +
+

+ {entity === 'site' + ? `${installationsNth[installation]} ${installation}` + : ''} +

+ {conclusions.length + ? conclusions.map((conclusion) => { + const conclusionData = + data[installation][conclusion]?.[0]; + const batAels = data[installation][conclusion] + .filter((ael) => ael.derogationBATAELName) + .sort((a, b) => + a.derogationBATAELName > b.derogationBATAELName + ? 1 + : b.derogationBATAELName > a.derogationBATAELName + ? -1 + : 0, + ); + + return ( +
+
+

{conclusion}

+ {batAels.length ? ( +
+ + { + if ( + !activeAels[ + `${installation}.${conclusion}` + ] + ) { + setActiveAels({ + [`${installation}.${conclusion}`]: true, + }); + } else { + setActiveAels({}); + } + }} + /> +
+ } + /> +
+ ) : ( + '' + )} +
+ + + +

Status

+

+ {conclusionData.Status || '-'} +

+ + +

Status modified

+

+ {conclusionData.StatusModifiedYear || '-'} +

+ + + + {batAels.length && + activeAels[`${installation}.${conclusion}`] ? ( +
+

BAT AELs

+ {batAels.map((ael) => { + return ( +
+

+ + {ael.derogationBATAELName} + +

+ + + +

Start date

+

+ {getDate(ael.derogationStartDate) || + '-'} +

+ + +

End date

+

+ {getDate(ael.derogationEndDate)} +

+ + +

Status

+

+ {ael.Status || '-'} +

+ + + +
+ ); + })} +
+ ) : ( + '' + )} +
+ ); + }) + : ''} +
+ ) : ( + '' + ); + })} + + ) : ( +

No information provided about bat conclusions

+ )} + + ); +}; + +export default View; diff --git a/src/components/manage/Blocks/SiteBlocks/CompetentAuthority.jsx b/src/components/manage/Blocks/SiteBlocks/CompetentAuthority.jsx new file mode 100644 index 0000000..9fde45d --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/CompetentAuthority.jsx @@ -0,0 +1,87 @@ +import React from 'react'; +import Icon from '@plone/volto/components/theme/Icon/Icon'; +import { Popup, Grid } from 'semantic-ui-react'; +import RenderTable from './RenderTable'; +import infoSVG from '@plone/volto/icons/info.svg'; + +const CompetentAuthority = (props) => { + const competentAuthority = props.competentAuthority; + + return ( +
+
+

Competent Authority

+ + +
+ } + /> +
+ {competentAuthority.length === 0 ? ( +

+ No information provided about competent authority +

+ ) : ( + '' + )} + {competentAuthority.length === 1 ? ( +

+ Last updated: {competentAuthority[0].authLastUpdated} +

+ ) : ( + '' + )} + {competentAuthority.length > 1 || + (competentAuthority.length === 1 && props.type === 'site') ? ( +
+ +
+ ) : competentAuthority.length === 1 ? ( + + + +

Organization Name

+

{competentAuthority[0].organizationName}

+ + +

Contact Person

+

{competentAuthority[0].contactPerson}

+ + +

E-mail

+

{competentAuthority[0].email}

+ + + + ) : ( + '' + )} + + ); +}; + +export default CompetentAuthority; diff --git a/src/components/manage/Blocks/SiteBlocks/EnvironmentalFacilityDetails/View.jsx b/src/components/manage/Blocks/SiteBlocks/EnvironmentalFacilityDetails/View.jsx new file mode 100644 index 0000000..ce96091 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/EnvironmentalFacilityDetails/View.jsx @@ -0,0 +1,83 @@ +import React from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import CompetentAuthority from '../CompetentAuthority'; +import { getDate } from '../helpers'; +import qs from 'querystring'; +import '../style.css'; + +const getAllIndexes = (arr, val) => { + const indexes = []; + let i = -1; + while ((i = arr.indexOf(val, i + 1)) !== -1) { + indexes.push(i); + } + return indexes; +}; + +const View = (props) => { + const [facilities, setFacilities] = React.useState([]); + const { provider_data = {} } = props; + const query = { ...props.query }; + const siteReportingYear = parseInt(query.siteReportingYear || ''); + + const competentAuthority = facilities + .filter((facility) => facility.facilityOrganizationName) + .map((facility) => ({ + organizationName: facility.facilityOrganizationName, + contactPerson: facility.facilityContactPerson, + address: facility.facilityAddress, + email: facility.facilityContactMail, + authLastUpdated: getDate(facility.authLastUpdated), + })); + + React.useEffect(() => { + const keys = Object.keys(provider_data || {}); + if (keys.length) { + const indexes = getAllIndexes( + provider_data?.euregReportingYear || [], + siteReportingYear, + ); + const newFacilities = []; + indexes.forEach((index, i) => { + newFacilities[i] = {}; + keys.forEach((key) => { + newFacilities[i][key] = provider_data[key][index]; + }); + }); + setFacilities(newFacilities); + } + }, [provider_data, provider_data?.euregReportingYear, siteReportingYear]); + + return props.mode === 'edit' ? ( +

{props.blockTitle}

+ ) : ( +
+ {facilities?.[0] ? ( + <> +

{facilities[0]?.facilityName}

+

Industrial activity

+

+ + {facilities[0]?.facilityIndustrialActivity}{' '} + {facilities[0]?.facilityMainActivity} + +

+

Facility address

+

+ {facilities[0]?.facilityAddress} +

+ + ) : ( + '' + )} + +
+ ); +}; + +export default compose( + connect((state, props) => ({ + query: qs.parse(state.router.location.search.replace('?', '')), + })), +)(View); diff --git a/src/components/manage/Blocks/SiteBlocks/EnvironmentalFacilityDetails/index.js b/src/components/manage/Blocks/SiteBlocks/EnvironmentalFacilityDetails/index.js new file mode 100644 index 0000000..2e615f2 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/EnvironmentalFacilityDetails/index.js @@ -0,0 +1,17 @@ +import EnvironmentalFacilityDetails from './View'; +import getSchema from './schema'; + +export default (config) => { + config.blocks.blocksConfig.custom_connected_block = { + ...config.blocks.blocksConfig.custom_connected_block, + blocks: { + ...config.blocks.blocksConfig.custom_connected_block.blocks, + environmental_facility_details: { + view: EnvironmentalFacilityDetails, + title: 'Enivornmental facility details', + getSchema: getSchema, + }, + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/SiteBlocks/EnvironmentalFacilityDetails/schema.js b/src/components/manage/Blocks/SiteBlocks/EnvironmentalFacilityDetails/schema.js new file mode 100644 index 0000000..f2a3a43 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/EnvironmentalFacilityDetails/schema.js @@ -0,0 +1,19 @@ +const getSchema = (props) => { + return { + title: 'Environmental facility details', + + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: [], + }, + ], + + properties: {}, + + required: [], + }; +}; + +export default getSchema; diff --git a/src/components/manage/Blocks/SiteBlocks/EnvironmentalLcpDetails/View.jsx b/src/components/manage/Blocks/SiteBlocks/EnvironmentalLcpDetails/View.jsx new file mode 100644 index 0000000..033851f --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/EnvironmentalLcpDetails/View.jsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import { Grid } from 'semantic-ui-react'; +import qs from 'querystring'; +import '../style.css'; + +const View = (props) => { + const [lcp, setLcp] = React.useState({}); + const { provider_data = {} } = props; + const query = { ...props.query }; + const { lcpInspireId = null } = query; + const siteReportingYear = parseInt(query.siteReportingYear || ''); + const index = provider_data?.euregReportingYear?.indexOf(siteReportingYear); + + React.useEffect(() => { + const keys = Object.keys(provider_data || {}); + if (keys?.length) { + const newLcp = {}; + keys.forEach((key) => { + newLcp[key] = provider_data[key][index]; + }); + setLcp(newLcp); + } + }, [index, provider_data, lcpInspireId]); + + return props.mode === 'edit' ? ( +

{props.blockTitle}

+ ) : ( +
+

{lcp.installationPartName}

+ + + +

Plant Type

+

{lcp.plantType || '-'}

+ + +

Total rated thermal input

+

+ {lcp.totalRatedThermalInput + ? lcp.totalRatedThermalInput + : 'unspecified'} +

+ + +

Untreated municipal waste treate

+

{lcp.untreatedMunicipalWaste ? 'yes' : 'no'}

+ + +

Specific conditions apply?

+

{lcp.specificConditions ? lcp.specificConditions : 'no'}

+ + +

Significant hazardous waste incinerated

+

{lcp.heatReleaseHazardousWaste ? 'yes' : 'no'}

+ + +

Nominal capacity

+

+ {lcp.totalNominalCapacityAnyWaste + ? lcp.totalNominalCapacityAnyWaste + : 'unspecified'} +

+ + + +
+ ); +}; + +export default compose( + connect((state, props) => ({ + query: qs.parse(state.router.location.search.replace('?', '')), + })), +)(View); diff --git a/src/components/manage/Blocks/SiteBlocks/EnvironmentalLcpDetails/index.js b/src/components/manage/Blocks/SiteBlocks/EnvironmentalLcpDetails/index.js new file mode 100644 index 0000000..9b89cc7 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/EnvironmentalLcpDetails/index.js @@ -0,0 +1,17 @@ +import EnvironmentalLCPDetails from './View'; +import getSchema from './schema'; + +export default (config) => { + config.blocks.blocksConfig.custom_connected_block = { + ...config.blocks.blocksConfig.custom_connected_block, + blocks: { + ...config.blocks.blocksConfig.custom_connected_block.blocks, + environmental_lcp_details: { + view: EnvironmentalLCPDetails, + title: 'Environmental LCP details', + getSchema: getSchema, + }, + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/SiteBlocks/EnvironmentalLcpDetails/schema.js b/src/components/manage/Blocks/SiteBlocks/EnvironmentalLcpDetails/schema.js new file mode 100644 index 0000000..569b12a --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/EnvironmentalLcpDetails/schema.js @@ -0,0 +1,19 @@ +const getSchema = (props) => { + return { + title: 'Environmental LCP details', + + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: [], + }, + ], + + properties: {}, + + required: [], + }; +}; + +export default getSchema; diff --git a/src/components/manage/Blocks/SiteBlocks/EnvironmentalSiteDetails/View.jsx b/src/components/manage/Blocks/SiteBlocks/EnvironmentalSiteDetails/View.jsx new file mode 100644 index 0000000..b493c6f --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/EnvironmentalSiteDetails/View.jsx @@ -0,0 +1,140 @@ +import React from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import CompetentAuthority from '../CompetentAuthority'; +import { getDate, getLonLat } from '../helpers'; +import { Grid } from 'semantic-ui-react'; +import qs from 'querystring'; +import '../style.css'; + +const getAllIndexes = (arr, val) => { + const indexes = []; + let i = -1; + while ((i = arr.indexOf(val, i + 1)) !== -1) { + indexes.push(i); + } + return indexes; +}; + +const View = (props) => { + const [siteDetails, setSiteDetails] = React.useState({}); + const [facilities, setFacilities] = React.useState([]); + const { provider_data = {} } = props; + const query = { ...props.query }; + const siteReportingYear = parseInt(query.siteReportingYear || ''); + + const facilityList = [ + ...new Set(facilities.map((facility) => facility.facilityInspireId).sort()), + ]; + + const competentAuthority = facilities + .filter((facility) => facility.facilityOrganizationName) + .map((facility, index) => ({ + facilityInspireId: facility.facilityInspireId, + organizationName: facility.facilityOrganizationName, + contactPerson: facility.facilityContactPerson, + address: facility.facilityAddress, + email: facility.facilityContactMail, + authLastUpdated: getDate(facility.authLastUpdated), + nth: `${facilityList.indexOf(facility.facilityInspireId) + 1}.`, + })); + + React.useEffect(() => { + const keys = Object.keys(provider_data || {}); + if (keys.length) { + const indexes = getAllIndexes( + provider_data?.euregReportingYear || [], + siteReportingYear, + ); + const newSiteDetails = {}; + const newFacilities = []; + indexes.forEach((index, i) => { + newFacilities[i] = {}; + keys.forEach((key) => { + if (i === 0) { + newSiteDetails[key] = provider_data[key][index]; + } + newFacilities[i][key] = provider_data[key][index]; + }); + }); + setSiteDetails(newSiteDetails); + setFacilities( + newFacilities.sort((a, b) => + a.facilityInspireId > b.facilityInspireId + ? 1 + : b.facilityInspireId > a.facilityInspireId + ? -1 + : 0, + ), + ); + } + }, [provider_data, provider_data?.euregReportingYear, siteReportingYear]); + + return props.mode === 'edit' ? ( +

{props.blockTitle}

+ ) : ( +
+ {/* BLUE BANNER */} + {siteDetails.authLastUpdated ? ( +
+ + + +

Last report was submitted on:

+

+ {getDate(siteDetails.authLastUpdated)} +

+ + {siteDetails.eprtrReportingYear ? ( + +

EPRTR reporting year

+

+ {siteDetails.eprtrReportingYear} +

+ + ) : ( + '' + )} + + +
+ ) : ( + '' + )} +
+

Site details

+
+ + {/* SITE DETAILS */} + + + +

Coordinates

+

+ {getLonLat(siteDetails.shape_wm_as_text) || '-'} +

+ + +

NUTS Region

+

{siteDetails.NUTS || '-'}

+ + +

National ID

+

{siteDetails.nationalId || '-'}

+ + +

River Basin District

+

{siteDetails.riverBasin || '-'}

+ + + + +
+ ); +}; + +export default compose( + connect((state, props) => ({ + query: qs.parse(state.router.location.search.replace('?', '')), + })), +)(View); diff --git a/src/components/manage/Blocks/SiteBlocks/EnvironmentalSiteDetails/index.js b/src/components/manage/Blocks/SiteBlocks/EnvironmentalSiteDetails/index.js new file mode 100644 index 0000000..e38b07f --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/EnvironmentalSiteDetails/index.js @@ -0,0 +1,17 @@ +import EnvironmentalSiteDetails from './View'; +import getSchema from './schema'; + +export default (config) => { + config.blocks.blocksConfig.custom_connected_block = { + ...config.blocks.blocksConfig.custom_connected_block, + blocks: { + ...config.blocks.blocksConfig.custom_connected_block.blocks, + environmental_site_details: { + view: EnvironmentalSiteDetails, + title: 'Environmental site details', + getSchema: getSchema, + }, + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/SiteBlocks/EnvironmentalSiteDetails/schema.js b/src/components/manage/Blocks/SiteBlocks/EnvironmentalSiteDetails/schema.js new file mode 100644 index 0000000..c9b94af --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/EnvironmentalSiteDetails/schema.js @@ -0,0 +1,19 @@ +const getSchema = (props) => { + return { + title: 'Environmental site details', + + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: [], + }, + ], + + properties: {}, + + required: [], + }; +}; + +export default getSchema; diff --git a/src/components/manage/Blocks/SiteBlocks/Header/Edit.jsx b/src/components/manage/Blocks/SiteBlocks/Header/Edit.jsx new file mode 100644 index 0000000..380c488 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/Header/Edit.jsx @@ -0,0 +1,29 @@ +import React, { useState } from 'react'; +import { connect } from 'react-redux'; +import { compose } from 'redux'; +import _uniqueId from 'lodash/uniqueId'; +import View from './View'; +import config from '@plone/volto/registry'; +import './style.css'; + +const getSchema = (props) => { + return {}; +}; + +const Edit = (props) => { + const [state] = useState({ + schema: getSchema({ ...props, providerUrl: config.settings.providerUrl }), + id: _uniqueId('block_'), + }); + return ( +
+ +
+ ); +}; + +export default compose( + connect((state, props) => ({ + pathname: state.router.location.pathname, + })), +)(Edit); diff --git a/src/components/manage/Blocks/SiteBlocks/Header/View.jsx b/src/components/manage/Blocks/SiteBlocks/Header/View.jsx new file mode 100644 index 0000000..30f1eb9 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/Header/View.jsx @@ -0,0 +1,200 @@ +import React from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import { Grid, Dropdown } from 'semantic-ui-react'; +import { setQuery } from '@eeacms/volto-industry-theme/actions'; +import qs from 'querystring'; +import './style.css'; + +const getQueryString = (query) => { + if (!Object.keys(query).length) return ''; + return '?' + qs.stringify(query); +}; + +const getSiteByYear = (provider_data, year) => { + const index = provider_data?.euregReportingYear?.indexOf(year); + const keys = Object.keys(provider_data || {}); + const site = {}; + if (keys?.length) { + keys.forEach((key) => { + site[key] = provider_data[key][index]; + }); + } + return site; +}; + +const View = (props) => { + const [siteHeader, setSiteHeader] = React.useState({}); + const { provider_data = {} } = props; + const query = { ...props.query }; + const siteReportingYear = parseInt(query.siteReportingYear || ''); + + const reportingYears = provider_data?.euregReportingYear?.length + ? provider_data.euregReportingYear + .filter((year) => year) + .sort() + .map((year) => ({ + key: year, + value: year, + text: year, + })) + : []; + + React.useEffect(() => { + if ( + siteHeader?.siteName && + siteReportingYear && + (siteHeader.siteName !== props.query.siteTerm || + siteReportingYear !== props.query.reportingYear?.[0]) + ) { + props.setQuery({ + queryParam: { + siteTerm: siteHeader.siteName, + reportingYear: [siteReportingYear], + ...(props.query.siteTerm + ? { + filtersCounter: (props.query['filtersCounter'] || 0) + 1, + } + : {}), + }, + }); + } + /* eslint-disable-next-line */ + }, [JSON.stringify(siteHeader)]); + + React.useEffect(() => { + setSiteHeader(getSiteByYear(provider_data, siteReportingYear)); + /* eslint-disable-next-line */ + }, [JSON.stringify(provider_data), siteReportingYear]); + + return props.mode === 'edit' ? ( +

Site header

+ ) : Object.keys(siteHeader)?.length ? ( +
+
+ {/* + BACK + */} +
+

{siteHeader.siteName}

+ + + +

Country

+

{siteHeader.countryCode}

+ + +

Regulation

+ {siteHeader.count_factype_EPRTR ? ( +

+ {siteHeader.count_factype_EPRTR} EPRTR{' '} + {siteHeader.count_factype_EPRTR > 1 + ? 'Facilities' + : 'Facility'} +

+ ) : ( + '' + )} + {siteHeader.count_factype_NONEPRTR ? ( +

+ {siteHeader.count_factype_NONEPRTR} NON-EPRTR{' '} + {siteHeader.count_factype_NONEPRTR > 1 + ? 'Facilities' + : 'Facility'} +

+ ) : ( + '' + )} + {siteHeader.count_instype_IED ? ( +

+ {siteHeader.count_instype_IED} IED Installation + {siteHeader.count_instype_IED > 1 ? 's' : ''} +

+ ) : ( + '' + )} + {siteHeader.count_instype_NONIED ? ( +

+ {siteHeader.count_instype_NONIED} NON-IED Installation + {siteHeader.count_instype_NONIED > 1 ? 's' : ''} +

+ ) : ( + '' + )} + {siteHeader.count_plantType_LCP ? ( +

+ {siteHeader.count_plantType_LCP} Large combustion plant + {siteHeader.count_plantType_LCP > 1 ? 's' : ''} +

+ ) : ( + '' + )} + {siteHeader.count_plantType_WI ? ( +

+ {siteHeader.count_plantType_WI} Waste incinerator + {siteHeader.count_plantType_WI > 1 ? 's' : ''} +

+ ) : ( + '' + )} + {siteHeader.count_plantType_coWI ? ( +

+ {siteHeader.count_plantType_coWI} Co-waste incinerator + {siteHeader.count_plantType_WI > 1 ? 's' : ''} +

+ ) : ( + '' + )} + + +

Inspire id

+

{siteHeader.siteInspireId}

+ + +

Reporting year

+
+ { + const newSite = getSiteByYear(provider_data, data.value); + props.history.push({ + pathname: props.location.pathname, + search: getQueryString({ + ...props.query, + siteReportingYear: data.value, + siteName: newSite.siteName, + }), + state: { + ignoreScrollBehavior: true, + }, + }); + }} + placeholder={'Select'} + options={reportingYears} + value={siteReportingYear} + aria-label="Reporting year selector" + /> +
+ + + +
+
+
+ ) : ( + '' + ); +}; + +export default compose( + connect( + (state) => ({ + query: { + ...qs.parse(state.router.location.search.replace('?', '')), + ...(state.query.search || {}), + }, + }), + { setQuery }, + ), +)(View); diff --git a/src/components/manage/Blocks/SiteBlocks/Header/index.js b/src/components/manage/Blocks/SiteBlocks/Header/index.js new file mode 100644 index 0000000..8599263 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/Header/index.js @@ -0,0 +1,17 @@ +import SiteHeader from './View'; +import getSchema from './schema'; + +export default (config) => { + config.blocks.blocksConfig.custom_connected_block = { + ...config.blocks.blocksConfig.custom_connected_block, + blocks: { + ...config.blocks.blocksConfig.custom_connected_block.blocks, + site_header: { + view: SiteHeader, + title: 'Site header', + getSchema: getSchema, + }, + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/SiteBlocks/Header/schema.js b/src/components/manage/Blocks/SiteBlocks/Header/schema.js new file mode 100644 index 0000000..57031c3 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/Header/schema.js @@ -0,0 +1,19 @@ +const getSchema = (props) => { + return { + title: 'LCP details', + + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: [], + }, + ], + + properties: {}, + + required: [], + }; +}; + +export default getSchema; diff --git a/src/components/manage/Blocks/SiteBlocks/Header/style.css b/src/components/manage/Blocks/SiteBlocks/Header/style.css new file mode 100644 index 0000000..72629de --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/Header/style.css @@ -0,0 +1,48 @@ +.site-header > div { + display: flex; + align-items: center; +} + +.site-header .info { + word-break: break-all; +} + +.site-header h3.title { + margin-bottom: 1rem !important; + color: #4296b2; +} + +.site-header .label { + font-weight: bold; + margin-bottom: 0; +} + +.site-header .info { + margin-bottom: 0; +} + +.site-header .ui.selection.dropdown { + padding-top: 0; + padding-bottom: 0; + color: #989898; + border: none; + padding-left: 0; + justify-content: flex-start !important; + flex-flow: row; + min-height: auto; +} + +.site-header .ui.active.selection.dropdown:hover { + box-shadow: none !important; +} + +.site-header .ui.selection.dropdown .dropdown.icon { + float: none; + position: relative; + top: auto; + left: auto; + right: auto; + margin: 0; + margin-left: 0.5em !important; + font-size: 1em !important; +} diff --git a/src/components/manage/Blocks/SiteBlocks/PermitingAuthority.jsx b/src/components/manage/Blocks/SiteBlocks/PermitingAuthority.jsx new file mode 100644 index 0000000..f431339 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/PermitingAuthority.jsx @@ -0,0 +1,122 @@ +import React from 'react'; +import { Popup, Grid } from 'semantic-ui-react'; +import Icon from '@plone/volto/components/theme/Icon/Icon'; +import { UniversalLink } from '@plone/volto/components'; +import RenderTable from './RenderTable'; +import cx from 'classnames'; +import infoSVG from '@plone/volto/icons/info.svg'; + +const PermitingAuthority = (props) => { + const { entity = '' } = props; + const permitingAuthority = props.permitingAuthority; + + return ( +
+
+

Permiting Authority

+ + +
+ } + /> +
+ {!permitingAuthority.length ? ( +

+ No information provided about permiting authority +

+ ) : ( + '' + )} + {permitingAuthority.length > 1 || + (permitingAuthority.length === 1 && entity === 'site') ? ( +
+ +
+ ) : permitingAuthority.length === 1 ? ( +
+ + + +

Permit updated

+

+ {permitingAuthority[0].permitUpdated || '-'} +

+ + +

Permiting authority

+

+ {permitingAuthority[0].permitingAuthority || '-'} +

+ + +

Permit available

+

+ {permitingAuthority[0].permitAvailable ? ( + + {permitingAuthority[0].permitAvailable} + + ) : ( + '-' + )} +

+ + +

Seveso

+

{permitingAuthority[0].seveso || '-'}

+ + +

Status

+

+ {permitingAuthority[0].entityStatus || '-'} +

+ + + +
+ ) : ( + '' + )} + + ); +}; + +export default PermitingAuthority; diff --git a/src/components/manage/Blocks/SiteBlocks/RegulatoryBATConclusions/View.jsx b/src/components/manage/Blocks/SiteBlocks/RegulatoryBATConclusions/View.jsx new file mode 100644 index 0000000..83eb575 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/RegulatoryBATConclusions/View.jsx @@ -0,0 +1,94 @@ +import React from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import BatConclusions from '../BatConclusions'; +import qs from 'querystring'; +import '../style.css'; + +const getAllIndexes = (arr, val) => { + const indexes = []; + let i = -1; + while ((i = arr.indexOf(val, i + 1)) !== -1) { + indexes.push(i); + } + return indexes; +}; + +const View = (props) => { + const [batConclusions, setBatConclusions] = React.useState({}); + const [installationsNth, setInstallationsNth] = React.useState({}); + const { provider_data = {} } = props; + const query = { ...props.query }; + const siteReportingYear = parseInt(query.siteReportingYear || ''); + + React.useEffect(() => { + const keys = Object.keys(provider_data || {}); + if (keys.length) { + const indexes = getAllIndexes( + provider_data?.EUregReportingYear || [], + siteReportingYear, + ); + const facilities = [ + ...new Set(provider_data?.facilityInspireId || []), + ].sort(); + let newBatConclusions = {}; + const counter = {}; + const nth = {}; + indexes.forEach((index, i) => { + const obj = {}; + const installation = provider_data['installationInspireId'][index]; + const batConclusionName = provider_data['BATConclusionName'][index]; + if (!newBatConclusions[installation]) { + newBatConclusions[installation] = { + facility: provider_data['facilityInspireId'][index], + }; + } + if ( + batConclusionName && + !newBatConclusions[installation][batConclusionName] + ) { + newBatConclusions[installation][batConclusionName] = []; + keys.forEach((key) => { + obj[key] = provider_data[key][index]; + }); + newBatConclusions[installation][batConclusionName].push({ ...obj }); + } + }); + + Object.keys(newBatConclusions) + .sort() + .forEach((id, index) => { + const installation = newBatConclusions[id]; + const facility = installation.facility; + if (!nth[id]) { + counter[facility] = (counter[facility] || 0) + 1; + nth[id] = `${facilities.indexOf(facility) + 1}.${ + counter[facility] + }.`; + } + delete installation.facility; + }); + setInstallationsNth(nth); + setBatConclusions(newBatConclusions); + } + /* eslint-disable-next-line */ + }, [provider_data, provider_data?.EUregReportingYear, siteReportingYear]); + + return props.mode === 'edit' ? ( +

{props.blockTitle}

+ ) : ( +
+ +
+ ); +}; + +export default compose( + connect((state, props) => ({ + query: qs.parse(state.router.location.search.replace('?', '')), + })), +)(View); diff --git a/src/components/manage/Blocks/SiteBlocks/RegulatoryBATConclusions/index.js b/src/components/manage/Blocks/SiteBlocks/RegulatoryBATConclusions/index.js new file mode 100644 index 0000000..bf0285f --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/RegulatoryBATConclusions/index.js @@ -0,0 +1,17 @@ +import RegulatoryBATConclusions from './View'; +import getSchema from './schema'; + +export default (config) => { + config.blocks.blocksConfig.custom_connected_block = { + ...config.blocks.blocksConfig.custom_connected_block, + blocks: { + ...config.blocks.blocksConfig.custom_connected_block.blocks, + regulatory_bat_conclusions: { + view: RegulatoryBATConclusions, + title: 'Regulatory BAT conclusions', + getSchema: getSchema, + }, + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/SiteBlocks/RegulatoryBATConclusions/schema.js b/src/components/manage/Blocks/SiteBlocks/RegulatoryBATConclusions/schema.js new file mode 100644 index 0000000..1458a4d --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/RegulatoryBATConclusions/schema.js @@ -0,0 +1,28 @@ +const getSchema = (props) => { + return { + title: 'Site regulatory permits', + + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['entity'], + }, + ], + + properties: { + entity: { + title: 'Entity', + type: 'array', + choices: [ + ['site', 'Site'], + ['installation', 'Installation'], + ], + }, + }, + + required: [], + }; +}; + +export default getSchema; diff --git a/src/components/manage/Blocks/SiteBlocks/RegulatoryPermits/View.jsx b/src/components/manage/Blocks/SiteBlocks/RegulatoryPermits/View.jsx new file mode 100644 index 0000000..a2183f5 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/RegulatoryPermits/View.jsx @@ -0,0 +1,98 @@ +import React from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import PermitingAuthority from '../PermitingAuthority'; +import { getDate } from '../helpers'; +import qs from 'querystring'; +import '../style.css'; + +const getAllIndexes = (arr, val) => { + const indexes = []; + let i = -1; + while ((i = arr.indexOf(val, i + 1)) !== -1) { + indexes.push(i); + } + return indexes; +}; + +const View = (props) => { + const [permits, setPermits] = React.useState([]); + const { provider_data = {} } = props; + const query = { ...props.query }; + const siteReportingYear = parseInt(query.siteReportingYear || ''); + + React.useEffect(() => { + const keys = Object.keys(provider_data || {}); + if (keys.length) { + const indexes = getAllIndexes( + provider_data?.EUregReportingYear || [], + siteReportingYear, + ); + const facilities = [ + ...new Set(provider_data?.facilityInspireId || []), + ].sort(); + let newPermits = []; + const counter = {}; + indexes.forEach((index, i) => { + newPermits[i] = {}; + keys.forEach((key) => { + newPermits[i][key] = provider_data[key][index]; + }); + }); + + setPermits( + newPermits + .sort((a, b) => + a.installationInspireId > b.installationInspireId + ? 1 + : b.installationInspireId > a.installationInspireId + ? -1 + : 0, + ) + .map((permit, index) => { + const facility = permit.facilityInspireId; + const installation = permit.installationInspireId; + counter[installation] = (counter[installation] || 0) + 1; + counter[facility] = + counter[installation] < 2 + ? (counter[facility] || 0) + 1 + : counter[facility]; + + return { + ...permit, + nth: `${facilities.indexOf(facility) + 1}.${counter[facility]}`, + }; + }), + ); + } + /* eslint-disable-next-line */ + }, [provider_data, provider_data?.EUregReportingYear, siteReportingYear]); + + const permitingAuthority = permits.map((permit) => ({ + installationInspireId: permit.installationInspireId, + operatingSince: getDate(permit.operatingSince_), + permitUpdated: getDate(permit.permitUpdated), + permitingAuthority: permit.permitingAuthority, + permitAvailable: permit.permitAvailable, + seveso: permit.seveso, + entityStatus: permit.entityStatus, + nth: permit.nth, + })); + + return props.mode === 'edit' ? ( +

{props.blockTitle}

+ ) : ( +
+ +
+ ); +}; + +export default compose( + connect((state, props) => ({ + query: qs.parse(state.router.location.search.replace('?', '')), + })), +)(View); diff --git a/src/components/manage/Blocks/SiteBlocks/RegulatoryPermits/index.js b/src/components/manage/Blocks/SiteBlocks/RegulatoryPermits/index.js new file mode 100644 index 0000000..9cb311c --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/RegulatoryPermits/index.js @@ -0,0 +1,17 @@ +import RegulatoryPermits from './View'; +import getSchema from './schema'; + +export default (config) => { + config.blocks.blocksConfig.custom_connected_block = { + ...config.blocks.blocksConfig.custom_connected_block, + blocks: { + ...config.blocks.blocksConfig.custom_connected_block.blocks, + regulatory_permits: { + view: RegulatoryPermits, + title: 'Regulatory permits', + getSchema: getSchema, + }, + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/SiteBlocks/RegulatoryPermits/schema.js b/src/components/manage/Blocks/SiteBlocks/RegulatoryPermits/schema.js new file mode 100644 index 0000000..1458a4d --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/RegulatoryPermits/schema.js @@ -0,0 +1,28 @@ +const getSchema = (props) => { + return { + title: 'Site regulatory permits', + + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['entity'], + }, + ], + + properties: { + entity: { + title: 'Entity', + type: 'array', + choices: [ + ['site', 'Site'], + ['installation', 'Installation'], + ], + }, + }, + + required: [], + }; +}; + +export default getSchema; diff --git a/src/components/manage/Blocks/SiteBlocks/RegulatorySiteDetails/View.jsx b/src/components/manage/Blocks/SiteBlocks/RegulatorySiteDetails/View.jsx new file mode 100644 index 0000000..b211760 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/RegulatorySiteDetails/View.jsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import { Grid, Popup } from 'semantic-ui-react'; +import Icon from '@plone/volto/components/theme/Icon/Icon'; +import infoSVG from '@plone/volto/icons/info.svg'; +import qs from 'querystring'; +import '../style.css'; + +const View = (props) => { + const [siteDetails, setSiteDetails] = React.useState({}); + const { provider_data = {} } = props; + const query = { ...props.query }; + const siteReportingYear = parseInt(query.siteReportingYear || ''); + const index = provider_data?.euregReportingYear?.indexOf(siteReportingYear); + + React.useEffect(() => { + const keys = Object.keys(provider_data || {}); + if (keys?.length) { + const newSiteDetails = {}; + keys.forEach((key) => { + newSiteDetails[key] = provider_data[key][index]; + }); + setSiteDetails(newSiteDetails); + } + }, [provider_data, index]); + + return props.mode === 'edit' ? ( +

{props.blockTitle}

+ ) : ( +
+
+

About the entity

+ + +
+ } + /> +
+ + + +

Regulated activities

+

{siteDetails.regulatedActivities || '-'}

+ + +

Status

+

{siteDetails.entityStatus || '-'}

+ + +

seveso

+

{siteDetails.seveso || '-'}

+ + + + + ); +}; + +export default compose( + connect((state, props) => ({ + query: qs.parse(state.router.location.search.replace('?', '')), + })), +)(View); diff --git a/src/components/manage/Blocks/SiteBlocks/RegulatorySiteDetails/index.js b/src/components/manage/Blocks/SiteBlocks/RegulatorySiteDetails/index.js new file mode 100644 index 0000000..6926636 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/RegulatorySiteDetails/index.js @@ -0,0 +1,17 @@ +import RegulatorySiteDetails from './View'; +import getSchema from './schema'; + +export default (config) => { + config.blocks.blocksConfig.custom_connected_block = { + ...config.blocks.blocksConfig.custom_connected_block, + blocks: { + ...config.blocks.blocksConfig.custom_connected_block.blocks, + regulatory_site_details: { + view: RegulatorySiteDetails, + title: 'Regulatory site details', + getSchema: getSchema, + }, + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/SiteBlocks/RegulatorySiteDetails/schema.js b/src/components/manage/Blocks/SiteBlocks/RegulatorySiteDetails/schema.js new file mode 100644 index 0000000..83ad56d --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/RegulatorySiteDetails/schema.js @@ -0,0 +1,19 @@ +const getSchema = (props) => { + return { + title: 'Site regulatory information', + + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: [], + }, + ], + + properties: {}, + + required: [], + }; +}; + +export default getSchema; diff --git a/src/components/manage/Blocks/SiteBlocks/RegulatorySitePermits/View.jsx b/src/components/manage/Blocks/SiteBlocks/RegulatorySitePermits/View.jsx new file mode 100644 index 0000000..cea3e04 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/RegulatorySitePermits/View.jsx @@ -0,0 +1,95 @@ +import React from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import PermitingAuthority from '../PermitingAuthority'; +import { getDate } from '../helpers'; +import qs from 'querystring'; +import '../style.css'; + +const getAllIndexes = (arr, val) => { + const indexes = []; + let i = -1; + while ((i = arr.indexOf(val, i + 1)) !== -1) { + indexes.push(i); + } + return indexes; +}; + +const View = (props) => { + const [permits, setPermits] = React.useState([]); + const { provider_data = {} } = props; + const query = { ...props.query }; + const siteReportingYear = parseInt(query.siteReportingYear || ''); + + React.useEffect(() => { + const keys = Object.keys(provider_data || {}); + if (keys.length) { + const indexes = getAllIndexes( + provider_data?.EUregReportingYear || [], + siteReportingYear, + ); + const facilities = [ + ...new Set(provider_data?.facilityInspireId || []), + ].sort(); + let newPermits = []; + const counter = {}; + indexes.forEach((index, i) => { + newPermits[i] = {}; + keys.forEach((key) => { + newPermits[i][key] = provider_data[key][index]; + }); + }); + + setPermits( + newPermits + .sort((a, b) => + a.installationInspireId > b.installationInspireId + ? 1 + : b.installationInspireId > a.installationInspireId + ? -1 + : 0, + ) + .map((permit, index) => { + const facility = permit.facilityInspireId; + const installation = permit.installationInspireId; + counter[installation] = (counter[installation] || 0) + 1; + counter[facility] = + counter[installation] < 2 + ? (counter[facility] || 0) + 1 + : counter[facility]; + + return { + ...permit, + nth: `${facilities.indexOf(facility) + 1}.${counter[facility]}`, + }; + }), + ); + } + /* eslint-disable-next-line */ + }, [provider_data, provider_data?.EUregReportingYear, siteReportingYear]); + + const permitingAuthority = permits.map((permit) => ({ + installationInspireId: permit.installationInspireId, + operatingSince: getDate(permit.operatingSince_), + permitUpdated: getDate(permit.permitUpdated), + permitingAuthority: permit.permitingAuthority, + permitAvailable: permit.permitAvailable, + seveso: permit.seveso, + entityStatus: permit.entityStatus, + nth: permit.nth, + })); + + return props.mode === 'edit' ? ( +

{props.blockTitle}

+ ) : ( +
+ +
+ ); +}; + +export default compose( + connect((state, props) => ({ + query: qs.parse(state.router.location.search.replace('?', '')), + })), +)(View); diff --git a/src/components/manage/Blocks/SiteBlocks/RegulatorySitePermits/index.js b/src/components/manage/Blocks/SiteBlocks/RegulatorySitePermits/index.js new file mode 100644 index 0000000..f135f43 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/RegulatorySitePermits/index.js @@ -0,0 +1,17 @@ +import RegulatorySitePermits from './View'; +import getSchema from './schema'; + +export default (config) => { + config.blocks.blocksConfig.custom_connected_block = { + ...config.blocks.blocksConfig.custom_connected_block, + blocks: { + ...config.blocks.blocksConfig.custom_connected_block.blocks, + regulatory_site_permits: { + view: RegulatorySitePermits, + title: 'Regulatory site permits', + getSchema: getSchema, + }, + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/SiteBlocks/RegulatorySitePermits/schema.js b/src/components/manage/Blocks/SiteBlocks/RegulatorySitePermits/schema.js new file mode 100644 index 0000000..912b5c7 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/RegulatorySitePermits/schema.js @@ -0,0 +1,19 @@ +const getSchema = (props) => { + return { + title: 'Site regulatory permits', + + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: [], + }, + ], + + properties: {}, + + required: [], + }; +}; + +export default getSchema; diff --git a/src/components/manage/Blocks/SiteBlocks/RenderTable.jsx b/src/components/manage/Blocks/SiteBlocks/RenderTable.jsx new file mode 100644 index 0000000..02e9183 --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/RenderTable.jsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { Table, Popup } from 'semantic-ui-react'; +import { UniversalLink } from '@plone/volto/components'; +import cx from 'classnames'; +import './style.css'; + +const RenderTable = (props) => { + const { headless = false, headers = [], rows = [] } = props; + return ( + + {!headless && headers.length > 0 && ( + + + {headers.map((header, headerIndex) => ( + + {header.value} + + ))} + + + )} + + {rows.length > 0 && + headers.length > 0 && + rows.map((row, rowIndex) => ( + + {headers.map((header, headerIndex) => ( + + {row[header.key] && header.link ? ( + + {header.link.text || row[header.key]} + + ) : header.popup?.key ? ( + {row[header.key] || '-'}

} + /> + ) : ( +

{row[header.key] || '-'}

+ )} + + ))} + + ))} + +
+ ); +}; + +export default RenderTable; diff --git a/src/components/manage/Blocks/SiteBlocks/helpers.js b/src/components/manage/Blocks/SiteBlocks/helpers.js new file mode 100644 index 0000000..c20d6db --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/helpers.js @@ -0,0 +1,22 @@ +import moment from 'moment'; + +let toLonLat, toStringHDMS; + +if (__CLIENT__ && !toLonLat && !toStringHDMS) { + toLonLat = require('ol/proj').toLonLat; + toStringHDMS = require('ol/coordinate').toStringHDMS; +} + +export const getDate = (field) => { + if (!field) return '-'; + if (Date.parse(field) > 0) { + return moment(field).format('DD MMM YYYY'); + } +}; + +export const getLonLat = (point) => { + if (!point) return '-'; + const coordinates = point.slice(7)?.slice(0, -1)?.split(' '); + if (!coordinates || !toLonLat || !toStringHDMS) return '-'; + return toStringHDMS(toLonLat(coordinates)); +}; diff --git a/src/components/manage/Blocks/SiteBlocks/style.css b/src/components/manage/Blocks/SiteBlocks/style.css new file mode 100644 index 0000000..d6b7eaf --- /dev/null +++ b/src/components/manage/Blocks/SiteBlocks/style.css @@ -0,0 +1,418 @@ +.popup-svg { + height: 100%; + display: flex; + justify-content: center; +} + +h3.blue { + color: #4296b2; +} + +h3.orange { + color: #ed776a; +} + +.icon.button { + cursor: pointer; +} + +.site-block .mb-0 { + margin-bottom: 0; +} + +.site-block .bold { + font-weight: bold; +} + +.site-block .info { + color: #989898; +} + +.site-block h3.blue { + color: #4296b2; +} + +.site-block .title { + display: flex; + align-items: center; + margin-bottom: 1rem; +} + +.site-block .title > h3 { + margin-bottom: 0; + margin-right: 0.5rem; +} + +.site-block .title.marginless, +.site-block h3.marginless { + margin-bottom: 0; + margin-top: 0; +} + +.site-block > .activity { + font-weight: bold; + margin-bottom: 0; +} + +.site-block > .address { + font-weight: bold; + margin-bottom: 0; +} + +.site-block .ui.grid { + margin-top: 0; + margin-bottom: 0; +} + +.site-block .ui.grid .row { + padding: 0; +} + +/* ?? */ +.site-block .ui.grid .row .column { + /* padding: 0 1rem; */ + margin-bottom: 1rem; +} + +.site-block div.eprtrBanner { + color: #fff; + border-radius: 10px; + margin-bottom: 1rem; + padding: 1rem; + padding-bottom: 0; +} + +.site-block div.eprtrBanner.blue { + background-color: #4296b3; + margin-top: 1rem; +} + +.site-block div.eprtrBanner > .ui.grid .row .column { + display: flex; + justify-content: space-between; + flex-flow: column; +} + +.site-block div.eprtrBanner > .ui.grid .row .column:last-child { + padding-bottom: 0; +} + +.site-block-table { + overflow: auto; + margin-bottom: 1rem; +} + +.site-block-table .ui.table thead th { + text-transform: unset; +} + +.site-block-table .ui.table.description-table thead tr th { + background-color: unset; +} + +.site-block-table .ui.table.description-table thead tr { + background-color: #f6f6f6; +} + +.site-block-table .ui.table.description-table tbody tr:hover { + background-color: #f6f6f6 !important; +} + +/* width */ +.site-block-table::-webkit-scrollbar { + height: 14px; + border: 0; + border-radius: 1px; +} + +.site-block-table::-webkit-scrollbar-corner { + background-color: transparent; +} + +.site-block-table:hover::-webkit-scrollbar { + border-radius: 1px; + opacity: 1; +} + +/* Track */ +.site-block-table::-webkit-scrollbar-track { + background-color: #f5f5f5; + border-radius: 1px; +} + +/* Handle */ +.site-block-table::-webkit-scrollbar-thumb { + background-color: #e1e1e1; + border-radius: 1px; +} + +/* Handle on hover */ +.site-block-table::-webkit-scrollbar-thumb:hover { + background-color: #cbcbcb; +} + +.site-block-table::-webkit-scrollbar-thumb:active { + background-color: #b4b4b4; +} + +.ui.grid .row .column .label, +.ui.grid .row .column .info { + word-break: break-all; +} + +.ui.grid .row .column .label { + font-weight: bold; + margin-bottom: 0; +} + +.ui.grid .row .column .info { + color: #989898; +} + +.competent-authority > .info, +.bat-conclusions > .info { + margin-bottom: 1rem; +} + +.bat-conclusions .ui.grid, +.bat-conclusions .aels .ui.grid { + margin-top: 0; + margin-bottom: 0; +} + +.bat-conclusions .ui.grid .row, +.bat-conclusions .aels .ui.grid .row { + padding: 0; +} + +.bat-conclusions .ui.grid .row .column, +.bat-conclusions .aels .ui.grid .row .column { + margin-bottom: 1rem; +} + +.bat-conclusions > .title { + margin-bottom: 1rem; +} + +.bat-conclusions .bat-conclusions-wrapper { + position: relative; + width: 100%; + border: 1px solid #000; + margin-bottom: 1rem; + padding: 0 1rem; + border-radius: 10px; + overflow-wrap: break-word; +} + +.bat-conclusions .installation-conclusions-wrapper { + position: relative; + width: 100%; +} + +.bat-conclusions .installation-conclusions-wrapper:after { + content: ''; + display: block; + height: 1px; + width: calc(100% + 2rem); + margin-left: -1rem; + background-color: #000; +} + +.bat-conclusions .installation-conclusions-wrapper:last-child:after { + display: none; +} + +.bat-conclusions .installation-conclusions-wrapper .installation-id { + margin-top: 1rem; + color: #4296b2; +} + +.bat-conclusions .installation-conclusions-wrapper .conclusion-wrapper { + margin: 1rem 0; +} + +.bat-conclusions + .installation-conclusions-wrapper + .conclusion-wrapper + .conclusion-title { + display: flex; + align-items: center; +} + +.bat-conclusions + .installation-conclusions-wrapper + .conclusion-wrapper + .conclusion-title + h3 { + color: #e2776b; +} + +.bat-conclusions + .installation-conclusions-wrapper + .conclusion-wrapper + .conclusion-title + button { + border: 1px solid #000; + width: 16px; + height: 16px; + padding: 0; + border-radius: 100%; +} + +.bat-conclusions + .installation-conclusions-wrapper + .conclusion-wrapper + .conclusion-title + button.active { + background-color: #ec776a; +} + +.bat-conclusions + .installation-conclusions-wrapper + .conclusion-wrapper + .conclusion-title + > h3 { + margin-bottom: 0; + margin-right: 0.5rem; + word-break: break-all; +} + +.bat-conclusions .aels-wrapper { + margin-top: 1rem; + padding-left: 2rem; +} + +.bat-conclusions .aels-wrapper h3 { + color: #000; +} + +.bat-conclusions .aels-wrapper h4 { + color: #ec776a; + text-decoration: underline; +} + +.bat-conclusions .conclusion-wrapper button { + border: none; + background: transparent; + color: #ec776a; + cursor: pointer; + text-decoration: underline; + padding: 0; +} + +.custom-selector h1.ui.header { + margin-bottom: 0; +} + +.custom-selector .ui.selection.dropdown { + width: fit-content; + min-width: unset; + min-height: unset; + padding: 0; + border-bottom: none; + line-height: 1em; +} + +.custom-selector .ui.selection.dropdown > .default.text, +.custom-selector .ui.selection.dropdown > .text, +.custom-selector .ui.selection.visible.dropdown > .text:not(.default) { + padding-left: 0; +} + +.custom-selector .ui.selection.dropdown > .dropdown.icon { + position: relative; + top: unset; + right: unset; + bottom: unset; + left: unset; + margin: 0; + margin-left: 0 !important; + font-size: 1.7em !important; + line-height: 1em; +} + +.custom-selector .ui.active.selection.dropdown { + border-bottom: 0; +} + +.custom-selector.big h1.ui.header { + font-size: 36px; + font-weight: bold; + line-height: 45px; +} + +.custom-selector.big .ui.selection.dropdown > .dropdown.icon { + margin-right: 1em; + font-size: 30px !important; + line-height: 39px; +} + +.custom-selector.big .ui.selection.dropdown > .default.text, +.custom-selector.big .ui.selection.dropdown > .text, +.custom-selector.big .ui.selection.visible.dropdown > .text:not(.default) { + font-size: 30px; + font-weight: bold; + line-height: 39px; +} + +.custom-selector.red h1.ui.header, +.custom-selector.red .ui.selection.dropdown, +.custom-selector.red .ui.selection.dropdown > .default.text, +.custom-selector.red .ui.selection.dropdown > .text, +.custom-selector.red .ui.selection.visible.dropdown > .text:not(.default) { + background-color: transparent; + color: #ec776a; +} + +.custom-selector.grey h1.ui.header, +.custom-selector.grey .ui.selection.dropdown, +.custom-selector.grey .ui.selection.dropdown > .default.text, +.custom-selector.grey .ui.selection.dropdown > .text, +.custom-selector.grey .ui.selection.visible.dropdown > .text:not(.default) { + border-bottom: none; + background-color: transparent; + color: #989898; +} + +.custom-selector.grey .ui.selection.dropdown .menu { + width: 100% !important; + min-width: 100% !important; +} + +.custom-selector.grey .ui.selection.dropdown { + padding: 0 1rem; + margin-left: -1rem; +} + +.custom-selector.grey .ui.selection.dropdown .menu > .item { + padding-right: 1rem !important; + padding-left: 1rem !important; +} + +.custom-selector.grey .ui.selection.dropdown > .dropdown.icon { + font-size: 1.3em !important; +} + +.custom-selector.blue h1.ui.header, +.custom-selector.blue .ui.selection.dropdown, +.custom-selector.blue .ui.selection.dropdown > .default.text, +.custom-selector.blue .ui.selection.dropdown > .text, +.custom-selector.blue .ui.selection.visible.dropdown > .text:not(.default) { + background-color: transparent; + color: #4296b3; +} + +.custom-selector.white h1.ui.header, +.custom-selector.white .ui.selection.dropdown, +.custom-selector.white .ui.selection.dropdown > .default.text, +.custom-selector.white .ui.selection.dropdown > .text, +.custom-selector.white .ui.selection.visible.dropdown > .text:not(.default) { + background-color: transparent; + color: #fff; +} + +@media (max-width: 500px) { + .custom-selector .selector-container { + flex-flow: column; + } +} diff --git a/src/components/manage/Blocks/SiteLocationMap/Edit.jsx b/src/components/manage/Blocks/SiteLocationMap/Edit.jsx new file mode 100644 index 0000000..ac40afe --- /dev/null +++ b/src/components/manage/Blocks/SiteLocationMap/Edit.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { SidebarPortal } from '@plone/volto/components'; +import InlineForm from '@plone/volto/components/manage/Form/InlineForm'; +import schema from './schema'; +import View from './View'; + +const Edit = (props) => ( + <> + + + + { + props.onChangeBlock(props.block, { + ...props.data, + [id]: value, + }); + }} + formData={props.data} + /> + + +); + +export default Edit; diff --git a/src/components/manage/Blocks/SiteLocationMap/View.jsx b/src/components/manage/Blocks/SiteLocationMap/View.jsx new file mode 100644 index 0000000..967df8a --- /dev/null +++ b/src/components/manage/Blocks/SiteLocationMap/View.jsx @@ -0,0 +1,119 @@ +import React, { useState } from 'react'; +import { connect } from 'react-redux'; +import Map from '@eeacms/volto-openlayers-map/Map'; +import { Interactions } from '@eeacms/volto-openlayers-map/Interactions'; +import { Controls } from '@eeacms/volto-openlayers-map/Controls'; +import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers'; +import { openlayers } from '@eeacms/volto-openlayers-map'; +import { getSiteLocationURL } from './index'; +import qs from 'querystring'; +import PrivacyProtection from '@eeacms/volto-industry-theme/components/PrivacyProtection'; +import mapPlaceholder from '@eeacms/volto-industry-theme/components/PrivacyProtection/map_placeholder_small.jpg'; +import './styles.css'; + +const View = (props) => { + const [options, setOptions] = React.useState({}); + const [vectorSource, setVectorSource] = useState(null); + const { format, proj, source, style } = openlayers; + const { siteInspireId } = props.query; + + const dataprotection = { + enabled: true, + privacy_statement: + 'This map is hosted by a third party [Environmental Systems Research Institute, INC: "ESRI"]. By showing th external content you accept the terms and conditions of www.esri.com. This includes their cookie policies, which e have no control over.', + privacy_cookie_key: 'site-location-map', + placeholder_image: mapPlaceholder, + type: 'small', + }; + + React.useEffect(() => { + if (__SERVER__) return; + const vs = vectorSource || new source.Vector(); + if (!vectorSource) { + setVectorSource(vs); + } + if (!siteInspireId) return; + const esrijsonFormat = new format.EsriJSON(); + // Get site feature + const url = getSiteLocationURL(siteInspireId); + fetch(url).then(function (response) { + if (response.status !== 200) return; + response.json().then(function (data) { + const features = esrijsonFormat.readFeatures(data); + if (features.length > 0) { + vs.addFeatures(features); + setOptions({ + ...options, + extent: features[0].getGeometry().getExtent(), + }); + } + }); + }); + /* eslint-disable-next-line */ + }, [siteInspireId]); + + if (__SERVER__ || !vectorSource) return ''; + + const siteStyle = new style.Style({ + image: new style.Circle({ + radius: 6, + fill: new style.Fill({ color: '#00FF00' }), + stroke: new style.Stroke({ color: '#6A6A6A', width: 1 }), + zIndex: 0, + }), + }); + + return ( +
+ + + + + + + + + + +
+ ); +}; + +export default connect((state) => ({ + query: { + ...qs.parse(state.router.location.search.replace('?', '')), + ...(state.query.search || {}), + }, +}))(View); diff --git a/src/components/manage/Blocks/SiteLocationMap/index.js b/src/components/manage/Blocks/SiteLocationMap/index.js new file mode 100644 index 0000000..6570d63 --- /dev/null +++ b/src/components/manage/Blocks/SiteLocationMap/index.js @@ -0,0 +1,28 @@ +import sliderSVG from '@plone/volto/icons/slider.svg'; +import { getEncodedString } from '@eeacms/volto-industry-theme/helpers'; +import SiteLocationMapEdit from './Edit'; +import SiteLocationMapView from './View'; + +export const getSiteLocationURL = (siteInspireId) => { + const condition = `(InspireSiteId LIKE '${getEncodedString(siteInspireId)}')`; + return `https://air.discomap.eea.europa.eu/arcgis/rest/services/Air/IED_SiteMap/FeatureServer/0/query?f=json&where=${condition}&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=InspireSiteId&outSR=102100`; +}; + +export default (config) => { + config.blocks.blocksConfig.site_location = { + id: 'site_location', + title: 'Site location', + icon: sliderSVG, + group: 'eprtr_blocks', + edit: SiteLocationMapEdit, + view: SiteLocationMapView, + restricted: false, + mostUsed: false, + sidebarTab: 1, + security: { + addPermission: [], + view: [], + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/SiteLocationMap/schema.js b/src/components/manage/Blocks/SiteLocationMap/schema.js new file mode 100644 index 0000000..46ffae3 --- /dev/null +++ b/src/components/manage/Blocks/SiteLocationMap/schema.js @@ -0,0 +1,17 @@ +const schema = { + title: 'Site location', + + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: [], + }, + ], + + properties: {}, + + required: [], +}; + +export default schema; diff --git a/src/components/manage/Blocks/SiteLocationMap/styles.css b/src/components/manage/Blocks/SiteLocationMap/styles.css new file mode 100644 index 0000000..5271b29 --- /dev/null +++ b/src/components/manage/Blocks/SiteLocationMap/styles.css @@ -0,0 +1,14 @@ +.site-location-map { + display: flex; + justify-content: center; + height: 400px; +} + +.site-location-map.visible.transition { + display: flex !important; +} + +.site-location-map .ol-map { + height: 400px; + min-height: 400px; +} diff --git a/src/components/manage/Blocks/SiteStructureSidebar/View.jsx b/src/components/manage/Blocks/SiteStructureSidebar/View.jsx new file mode 100644 index 0000000..d9a1adb --- /dev/null +++ b/src/components/manage/Blocks/SiteStructureSidebar/View.jsx @@ -0,0 +1,252 @@ +import React from 'react'; +import { Menu } from 'semantic-ui-react'; +import { UniversalLink } from '@plone/volto/components'; +import { removeTralingSlash } from '@eeacms/volto-industry-theme/helpers'; +import qs from 'querystring'; +import cx from 'classnames'; +import './styles.css'; + +/* +SELECT facilities.siteName, + facilities.siteInspireId, + facilities.facilityInspireId, + installations.installationInspireId, + lcps.lcpInspireId +FROM [IED].[latest].[Browse6Header] as facilities +LEFT JOIN [IED].[latest].[Browse8Header] as installations + ON facilities.facilityInspireId = installations.facilityInspireId +LEFT JOIN [IED].[latest].[Browse10_Header] as lcps + ON installations.installationInspireId = lcps.installationInspireId +GROUP BY facilities.siteName, + facilities.siteInspireId, + facilities.facilityInspireId, + installations.installationInspireId, + lcps.lcpInspireId +*/ + +const getQueryString = (query) => { + if (!Object.keys(query).length) return ''; + return '?' + qs.stringify(query); +}; + +const View = (props) => { + const [siteStructure, setSiteStructure] = React.useState(null); + const [siteDetails, setSiteDetails] = React.useState({}); + const { provider_data = {} } = props; + const provider_data_string = JSON.stringify(provider_data); + const dataReady = provider_data?.siteInspireId?.length > 0; + const pathname = removeTralingSlash(props.location.pathname || ''); + const query = qs.parse(props.location?.search?.replace('?', '')); + const newQuery = qs.parse(props.location?.search?.replace('?', '')); + delete newQuery.facilityInspireId; + delete newQuery.installationInspireId; + delete newQuery.lcpInspireId; + + React.useEffect(() => { + setSiteDetails({ + ...siteDetails, + siteName: provider_data?.siteName?.[0], + siteInspireId: provider_data?.siteInspireId?.[0], + }); + if (dataReady) { + const newSiteStructure = { + facilities: [], + installations: {}, + lcps: {}, + }; + provider_data.facilityInspireId.forEach((facility, index) => { + const installation = provider_data.installationInspireId[index]; + const lcp = provider_data.lcpInspireId[index]; + // Add facilities + if (!newSiteStructure.facilities.includes(facility)) { + newSiteStructure.facilities.push(facility); + } + // Add installations + if (facility && !newSiteStructure.installations[facility]) { + newSiteStructure.installations[facility] = []; + } + if ( + installation && + !newSiteStructure.installations[facility].includes(installation) + ) { + newSiteStructure.installations[facility].push(installation); + } + // Add lcps + if (!newSiteStructure.lcps[installation]) { + newSiteStructure.lcps[installation] = []; + } + if (lcp && !newSiteStructure.lcps[installation].includes(lcp)) { + newSiteStructure.lcps[installation].push(lcp); + } + }); + setSiteStructure({ + ...newSiteStructure, + facilities: newSiteStructure.facilities.sort(), + }); + } + /* eslint-disable-next-line */ + }, [provider_data_string]); + + return props.mode === 'edit' ? ( +
+

Sidebar edit

+
+ ) : ( +
+ + + {siteDetails.siteName} + + + {dataReady && siteStructure + ? siteStructure.facilities?.length + ? siteStructure.facilities.map((facility, facilityIndex) => ( + + {facilityIndex === 0 ? ( + <> +
+ + Environmental overview + +
+
+ + Regulatory overview + +
+ + ) : ( + '' + )} +
+ + + {facilityIndex + 1}. {facility} + + + {siteStructure.installations?.[facility]?.length + ? siteStructure.installations?.[facility]?.map( + (installation, installationIndex) => ( + +
+ + + {facilityIndex + 1}.{installationIndex + 1}.{' '} + {installation} + + + {siteStructure.lcps?.[installation]?.length + ? siteStructure.lcps?.[installation]?.map( + (lcp, lcpIndex) => ( +
+ + + {facilityIndex + 1}. + {installationIndex + 1}. + {lcpIndex + 1}. {lcp} + + +
+ ), + ) + : ''} +
+ + ), + ) + : ''} +
+ + )) + : '' + : ''} + +
+ ); +}; + +export default View; diff --git a/src/components/manage/Blocks/SiteStructureSidebar/index.js b/src/components/manage/Blocks/SiteStructureSidebar/index.js new file mode 100644 index 0000000..6d1ab88 --- /dev/null +++ b/src/components/manage/Blocks/SiteStructureSidebar/index.js @@ -0,0 +1,17 @@ +import SiteStructureSidebar from './View'; +import getSchema from './schema'; + +export default (config) => { + config.blocks.blocksConfig.custom_connected_block = { + ...config.blocks.blocksConfig.custom_connected_block, + blocks: { + ...config.blocks.blocksConfig.custom_connected_block.blocks, + site_structure_sidebar: { + view: SiteStructureSidebar, + title: 'Site structure sidebar', + getSchema: getSchema, + }, + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/SiteStructureSidebar/schema.js b/src/components/manage/Blocks/SiteStructureSidebar/schema.js new file mode 100644 index 0000000..cb840f9 --- /dev/null +++ b/src/components/manage/Blocks/SiteStructureSidebar/schema.js @@ -0,0 +1,27 @@ +const getSchema = (props) => { + return { + title: 'Site structure sidebar', + + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['pathname', 'pages'], + }, + ], + + properties: { + pathname: { + title: 'Parent pathname', + widget: 'object_by_path', + }, + pages: { + title: 'Pages', + }, + }, + + required: [], + }; +}; + +export default getSchema; diff --git a/src/components/manage/Blocks/SiteStructureSidebar/styles.css b/src/components/manage/Blocks/SiteStructureSidebar/styles.css new file mode 100644 index 0000000..e602a27 --- /dev/null +++ b/src/components/manage/Blocks/SiteStructureSidebar/styles.css @@ -0,0 +1,137 @@ +.sidebar-block .ui.menu { + flex-flow: column; + border-bottom: none; + background: transparent; +} + +.sidebar-block .ui.menu .ui.menu { + position: relative; + padding: 0; + height: initial; + min-height: unset; +} + +.sidebar-block .ui.menu .item.site-name { + font-weight: bold; +} + +.sidebar-block .ui.menu .ui.menu.entity .entity-item { + position: relative; + border-left: 2px solid #4296b3; + margin-left: 1em; +} + +.sidebar-block + .ui.menu + .ui.menu.entity + .entity-item + > .ui.menu.entity + > .entity-item { + border-left: 2px solid #4296b3 !important; +} + +.sidebar-block .ui.menu .ui.menu.entity > .entity-item:last-child { + border-left: 2px solid transparent !important; +} + +.sidebar-block + .ui.menu + .ui.menu.entity + .entity-item + > .ui.menu.entity:last-child + > .entity-item { + border-left: 2px solid transparent !important; +} + +.sidebar-block .ui.menu .ui.menu.entity .entity-item > .entity-item:last-child { + border-left: 2px solid transparent !important; +} + +.sidebar-block .ui.menu .item { + position: relative; + background: transparent; +} + +.sidebar-block .ui.menu .item::before { + background: transparent !important; +} + +.sidebar-block .ui.menu .item:not(.site-name):hover { + color: #ed776a !important; +} + +.sidebar-block .ui.menu .item:hover { + background-color: transparent !important; +} + +.sidebar-block .ui.menu .item span { + display: block !important; + line-height: 1.1em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.sidebar-block .ui.menu .ui.menu.entity .item:before { + display: block !important; + height: initial; + content: ''; + position: absolute !important; + top: 0 !important; + left: -2px !important; + right: unset; + bottom: 50% !important; + width: 0.75em !important; + border: 2px solid #4296b3 !important; + border-left: 2px solid #4296b3 !important; + border-bottom: 2px solid #4296b3 !important; + border-top: 0 none transparent !important; + border-right: 0 none transparent !important; +} + +.sidebar-block .ui.menu .item, +.sidebar-block .ui.menu .item.active { + padding-bottom: 1rem; + border: none; + background-color: transparent; + color: #333333 !important; + cursor: pointer; + text-align: left; +} + +.sidebar-block .ui.menu .item.hidden { + display: none; +} + +.sidebar-block .ui.menu .item.show { + display: block; +} + +.sidebar-block .ui.menu .item.depth__1 { + margin-left: 1em; +} + +.sidebar-block .ui.menu .item.depth__2 { + margin-left: 2em; +} + +.sidebar-block .ui.menu .item.depth__3 { + margin-left: 3em; +} + +.sidebar-block .ui.menu .item.depth__4 { + margin-left: 4em; +} + +.sidebar-block .ui.menu .item.depth__5 { + margin-left: 5em; +} + +.sidebar-block .ui.menu .item.active { + background-color: transparent !important; + color: #ed776a !important; +} + +.sidebar-block .ui.menu .item.active.depth__3 { + color: #333333; +} diff --git a/src/components/manage/Blocks/SiteTableau/Edit.jsx b/src/components/manage/Blocks/SiteTableau/Edit.jsx new file mode 100644 index 0000000..6f187fd --- /dev/null +++ b/src/components/manage/Blocks/SiteTableau/Edit.jsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { SidebarPortal } from '@plone/volto/components'; +import InlineForm from '@plone/volto/components/manage/Form/InlineForm'; +import config from '@plone/volto/registry'; +import { connectBlockToProviderData } from '@eeacms/volto-datablocks/hocs'; +import getSchema from './schema'; +import View from './View'; + +const Edit = (props) => { + const { provider_data = null, data = {} } = props; + const provider_keys = Object.keys(provider_data || {}); + const [schema, setSchema] = React.useState(getSchema(config, provider_keys)); + + /** +Provider name: Site flags +Provider path: /data-connectors/site-flags +SELECT * +FROM ( + SELECT *, CONVERT(varchar(4), euregReportingYear) AS siteReportingYear + FROM [IED].[latest].[Browse5_Header] as B5H + LEFT JOIN [IED].[latest].[site_flags] as SF + ON B5H.[siteInspireId] = SF.[Site Inspire ID] +) as B5H +*/ + + React.useEffect(() => { + if (!data.provider_url) { + props.onChangeBlock(props.block, { + ...props.data, + provider_url: + config.blocks.blocksConfig.site_tableau_block.defaultProviderUrl, + }); + } + /* eslint-disable-next-line */ + }, []); + + React.useEffect(() => { + setSchema(getSchema(config, provider_keys)); + /* eslint-disable-next-line */ + }, [JSON.stringify(provider_keys)]); + + return ( + <> + + + + { + props.onChangeBlock(props.block, { + ...props.data, + [id]: value, + }); + }} + formData={props.data} + /> + + + ); +}; + +export default connectBlockToProviderData(Edit); diff --git a/src/components/manage/Blocks/SiteTableau/View.jsx b/src/components/manage/Blocks/SiteTableau/View.jsx new file mode 100644 index 0000000..e3473b7 --- /dev/null +++ b/src/components/manage/Blocks/SiteTableau/View.jsx @@ -0,0 +1,119 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { compose } from 'redux'; +import { withRouter } from 'react-router'; +import Tableau from '@eeacms/volto-tableau/Tableau/View'; +import config from '@plone/volto/registry'; +import { getLatestTableauVersion } from 'tableau-api-js'; +import { connectBlockToProviderData } from '@eeacms/volto-datablocks/hocs'; +import qs from 'querystring'; +import '@eeacms/volto-tableau/less/tableau.less'; + +const getDevice = (config, width) => { + const breakpoints = config.blocks.blocksConfig.tableau_block.breakpoints; + let device = 'default'; + Object.keys(breakpoints).forEach((breakpoint) => { + if ( + width <= breakpoints[breakpoint][0] && + width >= breakpoints[breakpoint][1] + ) { + device = breakpoint; + } + }); + return device; +}; + +const View = (props) => { + const [error, setError] = React.useState(null); + const [loaded, setLoaded] = React.useState(null); + const [mounted, setMounted] = React.useState(false); + const [extraFilters, setExtraFilters] = React.useState({}); + const { data = {}, query = {}, screen = {}, provider_data = null } = props; + const { + disabledKey = null, + breakpointUrls = [], + urlParameters = [], + title = null, + description = null, + autoScale = false, + } = data; + const version = + props.data.version || + config.settings.tableauVersion || + getLatestTableauVersion(); + const device = getDevice(config, screen.page?.width || Infinity); + const breakpointUrl = breakpointUrls.filter( + (breakpoint) => breakpoint.device === device, + )[0]?.url; + const url = breakpointUrl || data.url; + const disabled = disabledKey ? !provider_data?.[disabledKey]?.[0] : false; + + React.useEffect(() => { + setMounted(true); + /* eslint-disable-next-line */ + }, []); + + React.useEffect(() => { + const newExtraFilters = { ...extraFilters }; + urlParameters.forEach((element) => { + if (element.field && typeof query[element.urlParam] !== 'undefined') { + newExtraFilters[element.field] = query[element.urlParam]; + } else if (newExtraFilters[element.field]) { + delete newExtraFilters[element.field]; + } + }); + setExtraFilters(newExtraFilters); + /* eslint-disable-next-line */ + }, [JSON.stringify(query), JSON.stringify(urlParameters)]); + + return mounted ? ( +
+ {props.mode === 'edit' ? ( +
+

== Tableau {version} ==

+ {!props.data.url ?

URL required

: ''} + {error ?

{error}

: ''} +
+ ) : ( + '' + )} + {!disabled ? ( + <> + {loaded && title ?

{title}

: ''} + {loaded && description ? ( +

{description}

+ ) : ( + '' + )} + + + ) : ( + '' + )} +
+ ) : ( + '' + ); +}; + +export default compose( + connect((state) => ({ + query: { + ...(qs.parse(state.router.location?.search?.replace('?', '')) || {}), + ...(state.query.search || {}), + }, + tableau: state.tableau, + screen: state.screen, + })), +)(connectBlockToProviderData(withRouter(View))); diff --git a/src/components/manage/Blocks/SiteTableau/index.js b/src/components/manage/Blocks/SiteTableau/index.js new file mode 100644 index 0000000..050f810 --- /dev/null +++ b/src/components/manage/Blocks/SiteTableau/index.js @@ -0,0 +1,29 @@ +import sliderSVG from '@plone/volto/icons/slider.svg'; +import TableauEdit from './Edit'; +import TableauView from './View'; + +export default (config) => { + config.blocks.blocksConfig.site_tableau_block = { + id: 'site_tableau_block', + title: 'Site tableau', + icon: sliderSVG, + group: 'data_blocks', + edit: TableauEdit, + view: TableauView, + restricted: false, + mostUsed: false, + sidebarTab: 1, + blocks: {}, + security: { + addPermission: [], + view: [], + }, + breakpoints: { + desktop: [Infinity, 982], + tablet: [981, 768], + mobile: [767, 0], + }, + defaultProviderUrl: '/data-connectors/site-flags', + }; + return config; +}; diff --git a/src/components/manage/Blocks/SiteTableau/schema.js b/src/components/manage/Blocks/SiteTableau/schema.js new file mode 100644 index 0000000..23102b3 --- /dev/null +++ b/src/components/manage/Blocks/SiteTableau/schema.js @@ -0,0 +1,147 @@ +import { tableauVersions, getLatestTableauVersion } from 'tableau-api-js'; + +const urlParametersSchema = { + title: 'Parameter', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['field', 'urlParam'], + }, + ], + properties: { + field: { + title: 'Tableau fieldname', + type: 'text', + }, + urlParam: { + title: 'URL param', + type: 'text', + }, + }, + required: [], +}; + +const breakpointUrlSchema = (config) => { + const breakpoints = config.blocks.blocksConfig.tableau_block.breakpoints; + + return { + title: 'URL', + fieldsets: [{ id: 'default', title: 'Default', fields: ['device', 'url'] }], + properties: { + device: { + title: 'Device', + type: 'array', + choices: Object.keys(breakpoints).map((breakpoint) => [ + breakpoint, + breakpoint, + ]), + }, + url: { + title: 'Url', + widget: 'textarea', + }, + }, + required: [], + }; +}; + +export default (config, provider_keys = []) => ({ + title: 'Tableau', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['version', 'url', 'title', 'description'], + }, + { + id: 'data_connector', + title: 'Data connector options', + fields: ['provider_url', 'allowedParams', 'disabledKey'], + }, + { + id: 'options', + title: 'Options', + fields: ['sheetname', 'hideTabs', 'hideToolbar', 'toolbarPosition'], + }, + { + id: 'extra_options', + title: 'Extra options', + fields: ['urlParameters', 'breakpointUrls'], + }, + ], + properties: { + version: { + title: 'Version', + type: 'array', + choices: [ + ...tableauVersions.map((version) => [version, `tableau-${version}`]), + ], + default: config.settings.tableauVersion || getLatestTableauVersion(), + }, + url: { + title: 'Url', + widget: 'textarea', + }, + provider_url: { + title: 'Data provider', + widget: 'object_by_path', + }, + allowedParams: { + title: 'Allowed params', + type: 'array', + items: { + choices: [], + }, + }, + disabledKey: { + title: 'Disabled', + type: 'array', + choices: [...provider_keys.map((key) => [key, key])], + }, + title: { + title: 'Title', + widget: 'textarea', + }, + description: { + title: 'Description', + widget: 'textarea', + }, + sheetname: { + title: 'Sheetname', + type: 'text', + }, + hideTabs: { + title: 'Hide tabs', + type: 'boolean', + default: false, + }, + hideToolbar: { + title: 'Hide toolbar', + type: 'boolean', + default: false, + }, + toolbarPosition: { + title: 'Toolbar position', + type: 'array', + choices: [ + ['Top', 'Top'], + ['Bottom', 'Bottom'], + ], + default: 'Top', + }, + urlParameters: { + title: 'URL parameters', + widget: 'object_list', + schema: urlParametersSchema, + description: 'Set a list of url parameters to filter the tableau', + }, + breakpointUrls: { + title: 'Breakpoint urls', + widget: 'object_list', + schema: breakpointUrlSchema(config), + description: 'Set different vizualization for specific breakpoint', + }, + }, + required: ['version', 'url'], +}); diff --git a/src/components/theme/AppExtras/CopyPaste/CopyPaste.jsx b/src/components/theme/AppExtras/CopyPaste/CopyPaste.jsx new file mode 100644 index 0000000..9928fcd --- /dev/null +++ b/src/components/theme/AppExtras/CopyPaste/CopyPaste.jsx @@ -0,0 +1,176 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { compose } from 'redux'; +import { Portal } from 'react-portal'; +import { toast } from 'react-toastify'; +import { Button } from 'semantic-ui-react'; +import { getBaseUrl } from '@plone/volto/helpers'; +import { updateContent } from '@plone/volto/actions'; +import { Icon, Toast } from '@plone/volto/components'; +import copySVG from '@plone/volto/icons/copy.svg'; +import pasteSVG from '@plone/volto/icons/paste.svg'; + +import './style.less'; + +const TIMEOUT = 2000; + +const CopyPaste = (props) => { + const [readyToRender, setReadyToRender] = React.useState(false); + const clock = React.useRef(null); + const time = React.useRef(0); + const toolbar = React.useRef(null); + const { content } = props; + + const copyData = () => { + navigator.clipboard.writeText( + JSON.stringify({ + blocks: content.blocks, + blocks_layout: content.blocks_layout, + }), + ); + toast.success( + , + ); + }; + + const pasteData = () => { + const message = [ + '============= BRAKING CHANGE =============', + '\nAre you sure you want to paste from clipboard?', + '\nThis action will replace all the blocks with those from clipboard and will trigger SUBMIT !!!', + ]; + navigator.clipboard.readText().then((text) => { + if ( + // eslint-disable-next-line no-alert + window.confirm(message.join('')) + ) { + try { + const data = JSON.parse(text) || {}; + const { blocks = {}, blocks_layout = {} } = data; + const blocksIds = Object.keys(blocks); + let valid = true; + if ( + blocks_layout && + blocks_layout.items && + blocks_layout.items.length === blocksIds.length + ) { + blocks_layout.items.forEach((block) => { + if (valid && !blocksIds.includes(block)) { + valid = false; + } + }); + } + if (valid) { + props.updateContent(getBaseUrl(props.pathname), data); + toast.success( + , + ); + } else { + toast.error( + , + ); + } + } catch { + toast.error( + , + ); + } + } + }); + }; + + React.useEffect(() => { + clock.current = setInterval(() => { + const element = document.querySelector('#toolbar .toolbar-actions'); + if (element) { + setReadyToRender(true); + clearInterval(clock.current); + time.current = 0; + return; + } + if (time.current >= TIMEOUT) { + clearInterval(clock.current); + time.current = 0; + return; + } + time.current += 100; + }, 100); + return () => { + clearInterval(clock.current); + time.current = 0; + }; + }, []); + + if (!__CLIENT__ || !readyToRender) return ''; + + return ( + +
{ + if ( + e.altKey && + e.ctrlKey && + toolbar.current && + !toolbar.current.classList.contains('__dev_on') + ) { + toolbar.current.classList.add('__dev_on'); + } + }} + onMouseLeave={(e) => { + if ( + toolbar.current && + toolbar.current.classList.contains('__dev_on') + ) { + toolbar.current.classList.remove('__dev_on'); + } + }} + onFocus={() => {}} + > + + +
+ + ); +}; + +export default compose( + connect( + (state, props) => ({ + content: state.content.data, + updateRequest: state.content.update, + pathname: props.location.pathname, + }), + { + updateContent, + }, + ), +)(CopyPaste); diff --git a/src/components/theme/AppExtras/CopyPaste/index.js b/src/components/theme/AppExtras/CopyPaste/index.js new file mode 100644 index 0000000..4b4d44f --- /dev/null +++ b/src/components/theme/AppExtras/CopyPaste/index.js @@ -0,0 +1,3 @@ +import CopyPaste from './CopyPaste'; + +export default CopyPaste; diff --git a/src/components/theme/AppExtras/CopyPaste/style.less b/src/components/theme/AppExtras/CopyPaste/style.less new file mode 100644 index 0000000..965e963 --- /dev/null +++ b/src/components/theme/AppExtras/CopyPaste/style.less @@ -0,0 +1,18 @@ +#__developer_tools { + .ui.button { + color: #007eb1; + opacity: 0; + pointer-events: none; + + &.disabled { + opacity: 0 !important; + } + } + + &.__dev_on { + .ui.button { + opacity: 1; + pointer-events: all; + } + } +} diff --git a/src/components/theme/AppExtras/index.js b/src/components/theme/AppExtras/index.js new file mode 100644 index 0000000..c049e45 --- /dev/null +++ b/src/components/theme/AppExtras/index.js @@ -0,0 +1,13 @@ +import CopyPaste from './CopyPaste'; + +export default (config) => { + config.settings.appExtras = [ + ...(config.settings.appExtras || []), + { + match: '/**/edit', + component: CopyPaste, + }, + ]; + + return config; +}; diff --git a/src/components/theme/View/RedirectView.jsx b/src/components/theme/View/RedirectView.jsx new file mode 100644 index 0000000..b9a5def --- /dev/null +++ b/src/components/theme/View/RedirectView.jsx @@ -0,0 +1,35 @@ +/* REACT IMPORTS */ +import React, { useEffect, useState } from 'react'; +import { useHistory } from 'react-router-dom'; +import { connect } from 'react-redux'; +import { Dimmer, Loader } from 'semantic-ui-react'; +import { flattenToAppURL } from '@plone/volto/helpers'; + +import './style.less'; + +const RedirectView = (props) => { + const history = useHistory(); + const [redirect, setRedirect] = useState(false); + const currentPage = flattenToAppURL(props.content?.['@id'] || '/'); + const redirectPage = flattenToAppURL( + props.content?.relatedItems?.[0]?.['@id'] || '/', + ); + + useEffect(() => { + if (!redirect && currentPage !== redirectPage) { + history.push(redirectPage); + setRedirect(true); + } + /* eslint-disable-next-line */ + }, []); + + return ( + + European Environment Agency + + ); +}; + +export default connect((state) => ({ + navigation: state.navigation, +}))(RedirectView); diff --git a/src/components/theme/View/style.less b/src/components/theme/View/style.less new file mode 100644 index 0000000..1bbe8cb --- /dev/null +++ b/src/components/theme/View/style.less @@ -0,0 +1,3 @@ +.ui.dimmer.redirect-loader { + z-index: -1; +} diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js new file mode 100644 index 0000000..8596f44 --- /dev/null +++ b/src/constants/ActionTypes.js @@ -0,0 +1,12 @@ +/** + * Add your action types here. + * @module constants/ActionTypes + * @example + * export const UPDATE_CONTENT = 'UPDATE_CONTENT'; + */ +export const SET_SECTION_TABS = 'SET_SECTION_TABS'; +export const GET_PARENT_FOLDER_DATA = 'GET_PARENT_FOLDER_DATA'; +export const GET_NAV_ITEMS = 'GET_NAV_ITEMS'; +export const GET_PAGE = 'GET_PAGE'; +export const GET_SPARQL_DATA = 'GET_SPARQL_DATA'; +export const SET_FLAGS = 'SET_FLAGS'; diff --git a/src/constants/index.js b/src/constants/index.js new file mode 100644 index 0000000..a38910e --- /dev/null +++ b/src/constants/index.js @@ -0,0 +1 @@ +export * from './query'; diff --git a/src/constants/query.js b/src/constants/query.js new file mode 100644 index 0000000..f1931b7 --- /dev/null +++ b/src/constants/query.js @@ -0,0 +1,4 @@ +export const SET_QUERY = 'SET_QUERY'; +export const DELETE_QUERY = 'DELETE_QUERY'; +export const RESET_QUERY = 'RESET_QUERY'; +export const TRIGGER_QUERY_RENDER = 'TRIGGER_QUERY_RENDER'; diff --git a/src/customizations/volto/components/manage/Blocks/Title/Edit.jsx b/src/customizations/volto/components/manage/Blocks/Title/Edit.jsx new file mode 100644 index 0000000..f8f56dd --- /dev/null +++ b/src/customizations/volto/components/manage/Blocks/Title/Edit.jsx @@ -0,0 +1,230 @@ +/** + * Edit title block. + * @module components/manage/Blocks/Title/Edit + */ + +import React, { Component } from 'react'; +import { Map } from 'immutable'; +import PropTypes from 'prop-types'; +import { stateFromHTML } from 'draft-js-import-html'; +import { isEqual } from 'lodash'; +import { Editor, DefaultDraftBlockRenderMap, EditorState } from 'draft-js'; +import { defineMessages, injectIntl } from 'react-intl'; +import config from '@plone/volto/registry'; +import { SidebarPortal } from '@plone/volto/components'; +import InlineForm from '@plone/volto/components/manage/Form/InlineForm'; +import schema from './schema'; + +const messages = defineMessages({ + title: { + id: 'Type the title…', + defaultMessage: 'Type the title…', + }, +}); + +const blockRenderMap = Map({ + unstyled: { + element: 'h2', + }, +}); + +const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap); + +/** + * Edit title block class. + * @class Edit + * @extends Component + */ +class Edit extends Component { + /** + * Property types. + * @property {Object} propTypes Property types. + * @static + */ + static propTypes = { + properties: PropTypes.objectOf(PropTypes.any).isRequired, + selected: PropTypes.bool.isRequired, + index: PropTypes.number.isRequired, + onChangeField: PropTypes.func.isRequired, + onSelectBlock: PropTypes.func.isRequired, + onDeleteBlock: PropTypes.func.isRequired, + onAddBlock: PropTypes.func.isRequired, + onFocusPreviousBlock: PropTypes.func.isRequired, + onFocusNextBlock: PropTypes.func.isRequired, + block: PropTypes.string.isRequired, + editable: PropTypes.bool, + }; + + /** + * Default properties + * @property {Object} defaultProps Default properties. + * @static + */ + static defaultProps = { + editable: true, + }; + + /** + * Constructor + * @method constructor + * @param {Object} props Component properties + * @constructs WysiwygEditor + */ + constructor(props) { + super(props); + + if (!__SERVER__) { + let editorState; + if (props.properties && props.properties.title) { + const contentState = stateFromHTML(props.properties.title); + editorState = EditorState.createWithContent(contentState); + } else { + editorState = EditorState.createEmpty(); + } + this.state = { editorState, focus: true }; + } + + this.onChange = this.onChange.bind(this); + } + + /** + * Component did mount lifecycle method + * @method componentDidMount + * @returns {undefined} + */ + componentDidMount() { + if (this.node) { + this.node.focus(); + this.node._onBlur = () => this.setState({ focus: false }); + this.node._onFocus = () => this.setState({ focus: true }); + } + } + + /** + * @param {*} nextProps + * @returns {boolean} + * @memberof Edit + */ + shouldComponentUpdate(nextProps) { + return this.props.selected || !isEqual(this.props.data, nextProps.data); + } + /** + * Component will receive props + * @method componentWillReceiveProps + * @param {Object} nextProps Next properties + * @returns {undefined} + */ + UNSAFE_componentWillReceiveProps(nextProps) { + if ( + nextProps.properties.title && + this.props.properties.title !== nextProps.properties.title && + !this.state.focus + ) { + const contentState = stateFromHTML(nextProps.properties.title); + this.setState({ + editorState: nextProps.properties.title + ? EditorState.createWithContent(contentState) + : EditorState.createEmpty(), + }); + } + + if (!this.props.selected && nextProps.selected) { + this.node.focus(); + this.setState({ focus: true }); + } + } + + /** + * Change handler + * @method onChange + * @param {object} editorState Editor state. + * @returns {undefined} + */ + onChange(editorState) { + this.setState({ editorState }, () => { + this.props.onChangeField( + 'title', + editorState.getCurrentContent().getPlainText(), + ); + }); + } + + /** + * Render method. + * @method render + * @returns {string} Markup for the component. + */ + render() { + if (__SERVER__) { + return
; + } + + const placeholder = + this.props.data.placeholder || + this.props.intl.formatMessage(messages.title); + + return ( + <> + { + if (this.props.data.disableNewBlocks) { + return 'handled'; + } + this.props.onSelectBlock( + this.props.onAddBlock( + config.settings.defaultBlockType, + this.props.index + 1, + ), + ); + return 'handled'; + }} + placeholder={placeholder} + blockStyleFn={() => 'documentFirstHeading'} + onUpArrow={() => { + const selectionState = this.state.editorState.getSelection(); + const { editorState } = this.state; + if ( + editorState.getCurrentContent().getBlockMap().first().getKey() === + selectionState.getFocusKey() + ) { + this.props.onFocusPreviousBlock(this.props.block, this.node); + } + }} + onDownArrow={() => { + const selectionState = this.state.editorState.getSelection(); + const { editorState } = this.state; + if ( + editorState.getCurrentContent().getBlockMap().last().getKey() === + selectionState.getFocusKey() + ) { + this.props.onFocusNextBlock(this.props.block, this.node); + } + }} + ref={(node) => { + this.node = node; + }} + /> + + { + this.props.onChangeBlock(this.props.block, { + ...this.props.data, + [id]: value, + }); + }} + formData={this.props.data} + block={this.props.block} + /> + + + ); + } +} + +export default injectIntl(Edit); diff --git a/src/customizations/volto/components/manage/Blocks/Title/View.jsx b/src/customizations/volto/components/manage/Blocks/Title/View.jsx new file mode 100644 index 0000000..a0297d6 --- /dev/null +++ b/src/customizations/volto/components/manage/Blocks/Title/View.jsx @@ -0,0 +1,43 @@ +/** + * View title block. + * @module components/manage/Blocks/Title/View + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; +import { BodyClass } from '@plone/volto/helpers'; + +/** + * View title block class. + * @class View + * @extends Component + */ +const View = ({ data, properties }) => { + return ( + <> + + {!data.hide_title ? ( +

{properties.title}

+ ) : ( + '' + )} + + ); +}; + +/** + * Property types. + * @property {Object} propTypes Property types. + * @static + */ +View.propTypes = { + properties: PropTypes.objectOf(PropTypes.any).isRequired, +}; + +export default View; diff --git a/src/customizations/volto/components/manage/Blocks/Title/schema.js b/src/customizations/volto/components/manage/Blocks/Title/schema.js new file mode 100644 index 0000000..fb5c9f0 --- /dev/null +++ b/src/customizations/volto/components/manage/Blocks/Title/schema.js @@ -0,0 +1,28 @@ +export default { + title: 'Title settings', + + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['hide_title', 'no_space_top', 'no_space_bottom'], + }, + ], + + properties: { + hide_title: { + title: 'Hide title', + description: 'Hide page title on View', + type: 'boolean', + }, + no_space_top: { + title: 'No space top', + type: 'boolean', + }, + no_space_bottom: { + title: 'No space bottom', + type: 'boolean', + }, + }, + required: [], +}; diff --git a/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx b/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx new file mode 100644 index 0000000..2ae963c --- /dev/null +++ b/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx @@ -0,0 +1,146 @@ +/* + * UniversalLink + * @module components/UniversalLink + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import { Link, useHistory } from 'react-router-dom'; +import { useSelector } from 'react-redux'; +import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url'; +import URLUtils from '@plone/volto/components/manage/AnchorPlugin/utils/URLUtils'; +import { matchPath } from 'react-router'; + +import config from '@plone/volto/registry'; + +const UniversalLink = ({ + href, + item = null, + openLinkInNewTab, + download = false, + children, + className = null, + title = null, + stripHash = false, + delay = 0, + offset = null, + ignoreScroll = false, + onClick = () => {}, + ...props +}) => { + const history = useHistory(); + const token = useSelector((state) => state.userSession?.token); + + let url = href; + if (!href && item) { + if (!item['@id']) { + // eslint-disable-next-line no-console + console.error( + 'Invalid item passed to UniversalLink', + item, + props, + children, + ); + url = '#'; + } else { + url = flattenToAppURL(item['@id']); + if (!token && item.remoteUrl) { + url = item.remoteUrl; + } + } + } + + const isBlacklisted = + (config.settings.externalRoutes ?? []).find((route) => + matchPath(flattenToAppURL(url), route.match), + )?.length > 0; + const isExternal = !isInternalURL(url) || isBlacklisted; + const isDownload = (!isExternal && url.includes('@@download')) || download; + const appUrl = flattenToAppURL(url); + + const path = stripHash ? appUrl.split('#')[0] : appUrl; + const hash = appUrl.split('#')[1]; + + return isExternal ? ( + + {children} + + ) : isDownload ? ( + + {children} + + ) : ( + { + if (typeof onClick === 'function') { + onClick(); + if (!hash && !ignoreScroll) return; + } + e.preventDefault(); + if (delay) { + setTimeout(() => { + history.push(stripHash ? path : appUrl, { + ...(ignoreScroll ? { ignoreScroll } : {}), + ...(hash + ? { + volto_scroll_hash: hash, + volto_scroll_offset: + typeof offset === 'function' ? offset() : offset, + } + : {}), + }); + }, delay); + } else { + history.push(stripHash ? path : appUrl, { + ...(ignoreScroll ? { ignoreScroll } : {}), + ...(hash + ? { + volto_scroll_hash: hash, + volto_scroll_offset: + typeof offset === 'function' ? offset() : offset, + } + : {}), + }); + } + }} + {...props} + > + {children} + + ); +}; + +UniversalLink.propTypes = { + href: PropTypes.string, + openLinkInNewTab: PropTypes.bool, + download: PropTypes.bool, + className: PropTypes.string, + title: PropTypes.string, + item: PropTypes.shape({ + '@id': PropTypes.string.isRequired, + remoteUrl: PropTypes.string, //of plone @type 'Link' + }), + stripHash: PropTypes.bool, + delay: PropTypes.number, // ms + offset: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), + onClick: PropTypes.func, + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node, + ]), +}; + +export default UniversalLink; diff --git a/src/customizations/volto/components/theme/Footer/Footer.jsx b/src/customizations/volto/components/theme/Footer/Footer.jsx index 542e257..d700331 100644 --- a/src/customizations/volto/components/theme/Footer/Footer.jsx +++ b/src/customizations/volto/components/theme/Footer/Footer.jsx @@ -23,7 +23,7 @@ const Footer = () => ( id="footer" className="footer-wrapper" role="contentinfo" - color="primary" + color="blue" padded="very" > diff --git a/src/customizations/volto/components/theme/Header/Header.jsx b/src/customizations/volto/components/theme/Header/Header.jsx index 94e16ad..2fec23f 100644 --- a/src/customizations/volto/components/theme/Header/Header.jsx +++ b/src/customizations/volto/components/theme/Header/Header.jsx @@ -9,7 +9,7 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { Logo, Navigation } from '@plone/volto/components'; -import Parteners from '../Logo/Parteners'; +import { Parteners } from '@eeacms/volto-industry-theme/components'; /** * Header component class. @@ -48,7 +48,7 @@ class Header extends Component { inverted className="header-wrapper" role="banner" - color="primary" + color="blue" >
diff --git a/src/customizations/volto/components/theme/View/DefaultView.jsx b/src/customizations/volto/components/theme/View/DefaultView.jsx new file mode 100644 index 0000000..3a7b44b --- /dev/null +++ b/src/customizations/volto/components/theme/View/DefaultView.jsx @@ -0,0 +1,122 @@ +/** + * Document view component. + * @module components/theme/View/DefaultView + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import { defineMessages, injectIntl } from 'react-intl'; + +import { Container, Image } from 'semantic-ui-react'; +import { map } from 'lodash'; +import config from '@plone/volto/registry'; + +import { + getBlocksFieldname, + getBlocksLayoutFieldname, + hasBlocksData, + getBaseUrl, +} from '@plone/volto/helpers'; + +const messages = defineMessages({ + unknownBlock: { + id: 'Unknown Block', + defaultMessage: 'Unknown Block {block}', + }, +}); + +/** + * Component to display the default view. + * @function DefaultView + * @param {Object} content Content object. + * @returns {string} Markup of the component. + */ +const DefaultView = ({ content, intl, location }) => { + const blocksFieldname = getBlocksFieldname(content); + const blocksLayoutFieldname = getBlocksLayoutFieldname(content); + + return hasBlocksData(content) ? ( +
+ {map(content[blocksLayoutFieldname].items, (block) => { + const Block = + config.blocks.blocksConfig[ + content[blocksFieldname]?.[block]?.['@type'] + ]?.['view'] || null; + return Block !== null ? ( + + ) : ( +
+ {intl.formatMessage(messages.unknownBlock, { + block: content[blocksFieldname]?.[block]?.['@type'], + })} +
+ ); + })} +
+ ) : ( + +

{content.title}

+ {content.description && ( +

{content.description}

+ )} + {content.image && ( + + )} + {content.remoteUrl && ( + + The link address is: + {content.remoteUrl} + + )} + {content.text && ( +
+ )} + + ); +}; + +/** + * Property types. + * @property {Object} propTypes Property types. + * @static + */ +DefaultView.propTypes = { + /** + * Content of the object + */ + content: PropTypes.shape({ + /** + * Title of the object + */ + title: PropTypes.string, + /** + * Description of the object + */ + description: PropTypes.string, + /** + * Text of the object + */ + text: PropTypes.shape({ + /** + * Data of the text of the object + */ + data: PropTypes.string, + }), + }).isRequired, +}; + +export default injectIntl(DefaultView); diff --git a/src/customizations/volto/components/theme/View/View.jsx b/src/customizations/volto/components/theme/View/View.jsx new file mode 100644 index 0000000..9dba5a7 --- /dev/null +++ b/src/customizations/volto/components/theme/View/View.jsx @@ -0,0 +1,284 @@ +/** + * View container. + * @module components/theme/View/View + */ + +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { compose } from 'redux'; +import { Portal } from 'react-portal'; +import { injectIntl } from 'react-intl'; +import qs from 'query-string'; + +import { + ContentMetadataTags, + Comments, + Tags, + Toolbar, +} from '@plone/volto/components'; +import { listActions, getContent } from '@plone/volto/actions'; +import { + BodyClass, + getBaseUrl, + getLayoutFieldname, +} from '@plone/volto/helpers'; + +import config from '@plone/volto/registry'; + +/** + * View container class. + * @class View + * @extends Component + */ +class View extends Component { + /** + * Property types. + * @property {Object} propTypes Property types. + * @static + */ + static propTypes = { + actions: PropTypes.shape({ + object: PropTypes.arrayOf(PropTypes.object), + object_buttons: PropTypes.arrayOf(PropTypes.object), + user: PropTypes.arrayOf(PropTypes.object), + }), + listActions: PropTypes.func.isRequired, + /** + * Action to get the content + */ + getContent: PropTypes.func.isRequired, + /** + * Pathname of the object + */ + pathname: PropTypes.string.isRequired, + location: PropTypes.shape({ + search: PropTypes.string, + pathname: PropTypes.string, + }).isRequired, + /** + * Version id of the object + */ + versionId: PropTypes.string, + /** + * Content of the object + */ + content: PropTypes.shape({ + /** + * Layout of the object + */ + layout: PropTypes.string, + /** + * Allow discussion of the object + */ + allow_discussion: PropTypes.bool, + /** + * Title of the object + */ + title: PropTypes.string, + /** + * Description of the object + */ + description: PropTypes.string, + /** + * Type of the object + */ + '@type': PropTypes.string, + /** + * Subjects of the object + */ + subjects: PropTypes.arrayOf(PropTypes.string), + is_folderish: PropTypes.bool, + }), + error: PropTypes.shape({ + /** + * Error type + */ + status: PropTypes.number, + }), + }; + + /** + * Default properties. + * @property {Object} defaultProps Default properties. + * @static + */ + static defaultProps = { + actions: null, + content: null, + versionId: null, + error: null, + }; + + state = { + hasObjectButtons: null, + isClient: false, + }; + + componentDidMount() { + this.props.listActions(getBaseUrl(this.props.pathname)); + this.props.getContent( + getBaseUrl(this.props.pathname), + this.props.versionId, + ); + this.setState({ isClient: true }); + } + + /** + * Component will receive props + * @method componentWillReceiveProps + * @param {Object} nextProps Next properties + * @returns {undefined} + */ + UNSAFE_componentWillReceiveProps(nextProps) { + if (nextProps.pathname !== this.props.pathname) { + this.props.listActions(getBaseUrl(nextProps.pathname)); + this.props.getContent( + getBaseUrl(nextProps.pathname), + this.props.versionId, + ); + } + + if (nextProps.actions.object_buttons) { + const objectButtons = nextProps.actions.object_buttons; + this.setState({ + hasObjectButtons: !!objectButtons.length, + }); + } + } + + /** + * Default fallback view + * @method getViewDefault + * @returns {string} Markup for component. + */ + getViewDefault = () => config.views.defaultView; + + /** + * Get view by content type + * @method getViewByType + * @returns {string} Markup for component. + */ + getViewByType = () => + config.views.contentTypesViews[this.props.content['@type']] || null; + + /** + * Get view by content layout property + * @method getViewByLayout + * @returns {string} Markup for component. + */ + getViewByLayout = () => + config.views.layoutViews[ + this.props.content[getLayoutFieldname(this.props.content)] + ] || null; + + /** + * Cleans the component displayName (specially for connected components) + * which have the Connect(componentDisplayName) + * @method cleanViewName + * @param {string} dirtyDisplayName The displayName + * @returns {string} Clean displayName (no Connect(...)). + */ + cleanViewName = (dirtyDisplayName) => + dirtyDisplayName + .replace('Connect(', '') + .replace('injectIntl(', '') + .replace(')', '') + .replace('connect(', '') + .toLowerCase(); + + /** + * Render method. + * @method render + * @returns {string} Markup for the component. + */ + render() { + const { views } = config; + if (this.props.error && !this.props.connectionRefused) { + let FoundView; + if (this.props.error.status === undefined) { + // For some reason, while development and if CORS is in place and the + // requested resource is 404, it returns undefined as status, then the + // next statement will fail + FoundView = views.errorViews.corsError; + } else { + FoundView = views.errorViews[this.props.error.status.toString()]; + } + if (!FoundView) { + FoundView = views.errorViews['404']; // default to 404 + } + return ( +
+ +
+ ); + } + if (!this.props.content) { + return ; + } + const RenderedView = + this.getViewByType() || this.getViewByLayout() || this.getViewDefault(); + + return ( +
+ + {/* Body class if displayName in component is set */} + + + {config.settings.showTags && + this.props.content.subjects && + this.props.content.subjects.length > 0 && ( + + )} + {/* Add opt-in social sharing if required, disabled by default */} + {/* In the future this might be parameterized from the app config */} + {/* */} + {this.props.content.allow_discussion && ( + + )} + {this.state.isClient && ( + + } /> + + )} +
+ ); + } +} + +export default compose( + injectIntl, + connect( + (state, props) => ({ + actions: state.actions.actions, + token: state.userSession.token, + content: state.content.data, + error: state.content.get.error, + apiError: state.apierror.error, + connectionRefused: state.apierror.connectionRefused, + pathname: props.location.pathname, + versionId: + qs.parse(props.location.search) && + qs.parse(props.location.search).version, + }), + { + listActions, + getContent, + }, + ), +)(View); diff --git a/src/customizations/volto/helpers/ScrollToTop/ScrollToTop.jsx b/src/customizations/volto/helpers/ScrollToTop/ScrollToTop.jsx new file mode 100644 index 0000000..56a5e6e --- /dev/null +++ b/src/customizations/volto/helpers/ScrollToTop/ScrollToTop.jsx @@ -0,0 +1,163 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; +import config from '@plone/volto/registry'; + +const isBrowser = typeof window !== 'undefined'; + +if (isBrowser) { + // Handle scroll restoration manually + window.history.scrollRestoration = 'manual'; +} + +const DefaultKey = 'init-enter'; + +const TIMEOUT = 10000; + +const getScrollPage = () => { + let docScrollTop = 0; + if (document.documentElement && document.documentElement !== null) { + docScrollTop = document.documentElement.scrollTop; + } + return window.pageYOffset || docScrollTop; +}; + +/** + * @class ScrollToTop + * @extends {Component} + */ +class ScrollToTop extends React.Component { + clock; + timer = 0; + visitedUrl = new Map(); + /** + * Property types. + * @property {Object} propTypes Property types. + * @static + */ + static propTypes = { + location: PropTypes.shape({ + pathname: PropTypes.string, + hash: PropTypes.string, + search: PropTypes.string, + }).isRequired, + history: PropTypes.object.isRequired, + content: PropTypes.object.isRequired, + children: PropTypes.node.isRequired, + }; + + constructor(props) { + super(props); + this.scrollTo = this.scrollTo.bind(this); + this.handleRouteChange = this.handleRouteChange.bind(this); + this.handlePopStateChange = this.handlePopStateChange.bind(this); + } + + componentDidMount() { + window.addEventListener('popstate', this.handlePopStateChange); + this.handleRouteChange(); + } + + componentWillUnmount() { + window.removeEventListener('popstate', this.handlePopStateChange); + clearInterval(this.clock); + } + /** + * @param {*} prevProps Previous Props + * @returns {null} Null + * @memberof ScrollToTop + */ + componentDidUpdate(prevProps) { + this.handleRouteChange(prevProps); + } + /** + * Scroll to top position triggered if content is loaded + * @method scrollTo + * @param {Number} top Top position + * @returns {null} Null + */ + scrollTo(top) { + clearInterval(this.clock); + this.timer = 0; + this.clock = setInterval(() => { + if (!this.props.content.get.loading || this.timer >= TIMEOUT) { + window.requestAnimationFrame(() => { + window.scrollTo({ + top, + left: 0, + behavior: config.settings.scrollBehavior, + }); + }); + clearInterval(this.clock); + this.timer = 0; + } + this.timer += 100; + }, 100); + } + /** + * Scroll to top position triggered if content is loaded + * @method handleRouteChange + * @param {Object} prevProps Previous Props + * @returns {null} Null + */ + handleRouteChange(prevProps) { + const { location: prevLocation = {}, history = {} } = prevProps || {}; + const { location: nextLocation } = this.props; + + if (prevLocation === nextLocation) return; + + const key = prevLocation.key || DefaultKey; + + const ignoreScroll = nextLocation.state?.ignoreScroll; + + const hash = + nextLocation.state?.volto_scroll_hash || + nextLocation.hash.substring(1) || + ''; + const offset = nextLocation.state?.volto_scroll_offset || 0; + + const locationChanged = + nextLocation.pathname !== prevLocation.pathname && hash === ''; + + const element = hash ? document.getElementById(hash) : null; + + const scroll = getScrollPage(); + + if (locationChanged && history.action !== 'POP' && !ignoreScroll) { + this.scrollTo(0); + this.visitedUrl.set(key, scroll); + } else if (element && history.action !== 'POP') { + this.scrollTo(element.offsetTop - offset); + this.visitedUrl.set(key, scroll); + } else { + this.visitedUrl.set(key, scroll); + } + return; + } + /** + * Scroll restoration on popstate event + * @method handlePopStateChange + * @param {PopStateEvent} e Pop state event + * @returns {null} Null + */ + handlePopStateChange(e) { + const { key = DefaultKey } = e.state || {}; + const existingRecord = this.visitedUrl.get(key); + + if (existingRecord !== undefined) { + this.scrollTo(existingRecord); + } + } + /** + * @returns {node} Children + * @memberof ScrollToTop + */ + render() { + return this.props.children; + } +} + +export default connect((state) => ({ + content: state.content, +}))(withRouter(ScrollToTop)); diff --git a/src/customizations/volto/middleware/api.js b/src/customizations/volto/middleware/api.js new file mode 100644 index 0000000..1fffdc9 --- /dev/null +++ b/src/customizations/volto/middleware/api.js @@ -0,0 +1,237 @@ +/** + * Api middleware. + * @module middleware/api + */ + +import cookie from 'react-cookie'; +import jwtDecode from 'jwt-decode'; +import { compact, flatten, union } from 'lodash'; +import { matchPath } from 'react-router'; +import qs from 'query-string'; + +import config from '@plone/volto/registry'; + +import { + LOGIN, + RESET_APIERROR, + SET_APIERROR, +} from '@plone/volto/constants/ActionTypes'; + +let socket = null; + +/** + * + * Add configured expanders to an api call for an action + * @function addExpandersToPath + * @param {string} path The url/path including the querystring + * @param {*} type The action type + * @returns {string} The url/path with the configured expanders added to the query string + */ +export function addExpandersToPath(path, type) { + const { settings } = config; + const { apiExpanders = [] } = settings; + + const pathPart = path.split('?')[0] || ''; + const expanders = apiExpanders + .filter((expand) => matchPath(pathPart, expand.match) && expand[type]) + .map((expand) => expand[type]); + const query = qs.parse(qs.extract(path)); + const expand = compact(union([query.expand, ...flatten(expanders)])); + if (expand) { + query.expand = expand; + } + const stringifiedQuery = qs.stringify(query, { + encode: true, + }); + if (!stringifiedQuery) { + return pathPart; + } + + return `${pathPart}?${stringifiedQuery}`; +} + +/** + * Send a message on a websocket. + * @function sendOnSocket + * @param {Object} request Request object. + * @returns {Promise} message is send + */ +function sendOnSocket(request) { + return new Promise((resolve, reject) => { + switch (socket.readyState) { + case socket.CONNECTING: + socket.addEventListener('open', () => resolve(socket)); + socket.addEventListener('error', reject); + break; + case socket.OPEN: + resolve(socket); + break; + default: + reject(); + break; + } + }).then(() => { + socket.send(JSON.stringify(request)); + }); +} + +/** + * Api middleware. + * @function + * @param {Object} api Api object. + * @returns {Promise} Action promise. + */ +export default (api) => ({ dispatch, getState }) => (next) => (action) => { + if (typeof action === 'function') { + return action(dispatch, getState); + } + + const { request, type, mode = 'paralel', ...rest } = action; + let actionPromise; + + if (!request) { + return next(action); + } + + next({ ...rest, type: `${type}_PENDING` }); + + if (socket) { + actionPromise = Array.isArray(request) + ? Promise.all( + request.map((item) => + sendOnSocket({ + ...item, + path: addExpandersToPath(item.path, type), + id: type, + }), + ), + ) + : sendOnSocket({ + ...request, + path: addExpandersToPath(request.path, type), + id: type, + }); + } else { + actionPromise = Array.isArray(request) + ? mode === 'serial' + ? request.reduce((prevPromise, item) => { + return prevPromise.then((acc) => { + return api[item.op](addExpandersToPath(item.path, type), { + data: item.data, + type: item.type, + headers: item.headers, + params: request.params, + }).then((reqres) => { + return [...acc, reqres]; + }); + }); + }, Promise.resolve([])) + : Promise.all( + request.map((item) => + api[item.op](addExpandersToPath(item.path, type), { + data: item.data, + type: item.type, + headers: item.headers, + params: request.params, + }), + ), + ) + : api[request.op](addExpandersToPath(request.path, type), { + data: request.data, + type: request.type, + headers: request.headers, + params: request.params, + }); + actionPromise.then( + (result) => { + const { settings } = config; + if (getState().apierror.connectionRefused) { + next({ + ...rest, + type: RESET_APIERROR, + }); + } + if (type === LOGIN && settings.websockets) { + cookie.save('auth_token', result.token, { + path: '/', + expires: new Date(jwtDecode(result.token).exp * 1000), + }); + api.get('/@wstoken').then((res) => { + socket = new WebSocket( + `${settings.apiPath.replace('http', 'ws')}/@ws?ws_token=${ + res.token + }`, + ); + socket.onmessage = (message) => { + const packet = JSON.parse(message.data); + if (packet.error) { + dispatch({ + type: `${packet.id}_FAIL`, + error: packet.error, + }); + } else { + dispatch({ + type: `${packet.id}_SUCCESS`, + result: JSON.parse(packet.data), + }); + } + }; + }); + } + return next({ ...rest, result, type: `${type}_SUCCESS` }); + }, + (error) => { + const { settings } = config; + // Only SRR can set ECONNREFUSED + if (error.code === 'ECONNREFUSED') { + next({ + ...rest, + error, + statusCode: error.code, + connectionRefused: true, + type: SET_APIERROR, + }); + } + + // Response error is marked crossDomain if CORS error happen + else if (error.crossDomain) { + next({ + ...rest, + error, + statusCode: 'CORSERROR', + connectionRefused: false, + type: SET_APIERROR, + }); + } + + // Gateway timeout + else if (error?.response?.statusCode === 504) { + next({ + ...rest, + error, + statusCode: error.code, + connectionRefused: true, + type: SET_APIERROR, + }); + } + + // The rest + else if (settings.actions_raising_api_errors.includes(action.type)) { + if (error?.response?.statusCode === 401) { + next({ + ...rest, + error, + statusCode: error.response, + message: error.response.body.message, + connectionRefused: false, + type: SET_APIERROR, + }); + } + } + return next({ ...rest, error, type: `${type}_FAIL` }); + }, + ); + } + + return actionPromise; +}; diff --git a/src/helpers/index.js b/src/helpers/index.js new file mode 100644 index 0000000..c2d9a1d --- /dev/null +++ b/src/helpers/index.js @@ -0,0 +1,238 @@ +/** + * Add your helpers here. + * @module helpers + * @example + * export { Api } from './Api/Api'; + */ +import { isMatch } from 'lodash'; +import qs from 'querystring'; +import { getBaseUrl } from '@plone/volto/helpers'; +import config from '@plone/volto/registry'; +import { setConnectedDataParameters } from '@eeacms/volto-datablocks/actions'; + +export function removeValue(arr) { + if (!arr || arr.length === 0) return []; + let what, + a = arguments, + L = a.length, + ax; + while (L > 1 && arr.length) { + what = a[--L]; + while ((ax = arr.indexOf(what)) !== -1) { + arr.splice(ax, 1); + } + } + return arr; +} + +export function getBasePath(url) { + const parseUrl = url === '' ? '/' : url; + if (parseUrl) { + return getBaseUrl(url) + .replace(config.settings.apiPath, '') + .replace(config.settings.internalApiPath, ''); + } + return ''; +} + +export const getNavigationByParent = (items, parent) => { + if (items && parent !== undefined && typeof parent === 'string') { + const pathnameArray = removeValue(parent.split('/'), ''); + const location = pathnameArray; + const depth = pathnameArray.length; + if (!depth) { + return items; + } + return deepSearchNavigationParent({ + inputArray: items, + location, + depth, + }); + } + return {}; +}; + +export const isActive = (url, pathname) => { + return ( + (url === '' && pathname === '/') || + (url !== '' && isMatch(pathname?.split('/'), url?.split('/'))) + ); +}; + +export const objectHasData = (obj) => { + return typeof obj === 'object' && obj !== null && Object.keys(obj).length > 0; +}; + +export function deepSearch({ inputArray = [], pattern, depth }) { + const objFitCriteria = { + first: (index) => index === 0, + last: (index) => index === inputArray.length - 1, + }; + const validate = { + hasItems: (arr) => arr && arr.length > 0, + }; + for (let index = 0; index < inputArray.length; index++) { + if (depth <= 1 || !inputArray[index][pattern.propertyToValidate]) + return inputArray[index][pattern.propertyToReturn] || null; + if (!objFitCriteria[pattern.criteria]?.(index)) continue; + if ( + validate[pattern.validationType]?.( + inputArray[index][pattern.propertyToValidate], + ) + ) + return deepSearch({ + inputArray: inputArray[index][pattern.propertyToValidate], + pattern, + depth: depth - 1, + }); + } + + return null; +} + +export const deepSearchNavigationParent = ({ + inputArray = [], + location, + depth, + start = 1, +}) => { + for (let index = 0; index < inputArray.length; index++) { + if ( + depth === 1 && + removeValue(inputArray[index].url?.split('/'), '')[start - 1] === + location[start - 1] + ) { + return inputArray[index] || {}; + } + if ( + removeValue(inputArray[index].url?.split('/'), '')[start - 1] === + location[start - 1] + ) { + return deepSearchNavigationParent({ + inputArray: inputArray[index].items, + location, + depth: depth - 1, + start: start + 1, + }); + } + } + + return null; +}; + +export const getSchemaWithDataQuery = (props) => { + if (!props.schema) return {}; + let schemaWithDataQuery = {}; + Object.keys(props.schema).forEach((element) => { + if (props.schema[element].type === 'data-provider') { + if ( + !objectHasData( + props?.connected_data_parameters?.byProviderPath?.[props.path], + ) && + !objectHasData( + props?.connected_data_parameters?.byContextPath?.[props.path], + ) + ) { + const dataQuery = {}; + dataQuery[element + '_data_query'] = { + defaultformat: 'compactnumber', + type: 'data-query', + }; + schemaWithDataQuery[element] = props.schema[element]; + schemaWithDataQuery = { ...schemaWithDataQuery, ...dataQuery }; + } + } + schemaWithDataQuery[element] = props.schema[element]; + }); + return schemaWithDataQuery; +}; + +export const updateConnectedDataParameters = (props) => { + props.schema && + Object.keys(props.schema).forEach((element) => { + if (props.schema[element].type === 'data-query') { + if ( + props?.newData?.columns?.[element] && + (props?.newData?.columns?.[element]?.value?.i !== + props?.data?.columns?.[element]?.value?.i || + props?.newData?.columns?.[element]?.value?.v !== + props?.data?.columns?.[element]?.value?.v) + ) { + const path = getBasePath(props.pathname); + const byPath = props?.connected_data_parameters?.byPath; + const connected_data_parameters = + (byPath?.[path]?.override?.length > 0 && + byPath?.[path]?.override?.[`${props.id}_${element}`]) || + null; + if ( + connected_data_parameters === null || + connected_data_parameters?.i !== + props?.newData?.columns?.[element]?.value?.i || + connected_data_parameters?.v?.join(',') !== + props?.newData?.columns?.[element]?.value?.v + ) { + props.dispatch( + setConnectedDataParameters( + path.replace('/edit', ''), + props?.newData?.columns?.[element]?.value, + `${props.id}_${element}`, + ), + ); + } + } + } + }); +}; + +// USED + +export const getObjectByIndex = (provider_data, index) => { + if ((!index && index !== 0) || index === -1) return {}; + const obj = {}; + const keys = Object.keys(provider_data); + keys.forEach((key) => { + obj[key] = provider_data[key][index]; + }); + return obj; +}; + +export function removeTralingSlash(url) { + return getBasePath(url).replace(/\/+$/, ''); +} + +export const getEncodedQueryString = (query) => { + if (!query) return ''; + return qs.stringify( + { query }, + { + arrayFormat: 'comma', + encode: true, + }, + ); +}; + +export const emitEvent = (el, eventName, options) => { + let event; + if (window.CustomEvent) { + event = new CustomEvent(eventName, options); + } else { + event = document.createEvent('CustomEvent'); + event.initCustomEvent(eventName, true, true, options); + } + el.dispatchEvent(event); +}; + +export const getEncodedString = (str) => { + if (str) { + return qs + .stringify( + { str }, + { + arrayFormat: 'comma', + encode: true, + }, + ) + .replace('str=', ''); + } + return ''; +}; diff --git a/src/index.js b/src/index.js index 0eccde5..a4e2a31 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,109 @@ +import { + installCustomViews, + installNavigationBlock, + installEprtrSpecificBlocks, + installCustomConnectedBlocks, + installAppExtras, +} from '@eeacms/volto-industry-theme/components'; +import addonReducers from '@eeacms/volto-industry-theme/reducers'; + +import iconC from '@eeacms/volto-columns-block/ColumnsBlock/icons/one-third-right.svg'; + const applyConfig = (config) => { config.settings = { ...config.settings, + navDepth: 5, + providerUrl: 'https://discodata.eea.europa.eu/sql', excludeFromNavigation: ['/industrial-site'], + metaDescription: 'European Environment Agency', + matomoSiteId: 48, + tableauVersion: '2.3.0', + available_colors: [ + '#81C9DB', + '#5397B2', + '#12435D', + '#E2776B', + '#CD3B1F', + '#F6F6F6', + '#EDEDED', + ], + }; + + config.blocks.groupBlocksOrder = [ + ...config.blocks.groupBlocksOrder, + { id: 'eprtr_blocks', title: 'Eprtr Blocks' }, + ]; + + config.addonReducers = { + ...config.addonReducers, + ...addonReducers, + }; + + config.settings.pluggableStyles = [ + ...(config.settings.pluggableStyles || []), + { + id: 'outlineButton', + title: 'Outline button', + cssClass: 'outline-button', + }, + { + id: 'solidButton', + title: 'Solid button', + cssClass: 'solid-button', + }, + { + id: 'type1', + title: 'Type 1', + cssClass: 'type-1', + }, + { + id: 'industrialSiteStyle', + title: 'Industrial site style', + cssClass: 'industrial-site-style', + }, + { + id: 'padded', + title: 'Padded', + cssClass: 'padded', + }, + ]; + + config.blocks.blocksConfig.columnsBlock = { + ...(config.blocks.blocksConfig.columnsBlock || {}), + gridSizes: { + ...(config.blocks.blocksConfig.columnsBlock?.gridSizes || {}), + twoFifthsFull: { + mobile: 12, + tablet: 12, + computer: 5, + }, + threeFifthsFull: { + mobile: 12, + tablet: 12, + computer: 7, + }, + }, + variants: [ + ...(config.blocks.blocksConfig.columnsBlock?.variants || []), + { + icon: iconC, + defaultData: { + gridSize: 12, + gridCols: ['twoFifthsFull', 'threeFifthsFull'], + }, + common: true, + title: '40 / 60', + }, + ], }; - return config; + return [ + installCustomViews, + installNavigationBlock, + installEprtrSpecificBlocks, + installCustomConnectedBlocks, + installAppExtras, + ].reduce((acc, apply) => apply(acc), config); }; export default applyConfig; diff --git a/src/reducers/flags.js b/src/reducers/flags.js new file mode 100644 index 0000000..1c2eb56 --- /dev/null +++ b/src/reducers/flags.js @@ -0,0 +1,36 @@ +import { SET_FLAGS } from '~/constants/ActionTypes'; + +const initialState = { + items: {}, +}; + +export default function flags(state = initialState, action = {}) { + const items = { ...state.items }; + const packageKey = action.packageKey; + const id = action.id; + const flags = action.flags || {}; + switch (action.type) { + case SET_FLAGS: + if (!items[packageKey]) { + items[packageKey] = {}; + } + if (id) { + if (!items[packageKey][id]) { + items[packageKey][id] = {}; + } + Object.keys(flags).forEach((flag) => { + items[packageKey][id][flag] = flags[flag]; + }); + } else { + items[packageKey] = { + ...flags, + }; + } + return { + ...state, + items, + }; + default: + return state; + } +} diff --git a/src/reducers/index.js b/src/reducers/index.js new file mode 100644 index 0000000..f0c04b4 --- /dev/null +++ b/src/reducers/index.js @@ -0,0 +1,20 @@ +/** + * Root reducer. + * @module reducers/root + */ + +import flags from './flags'; +import query from './query'; +/** + * Root reducer. + * @function + * @param {Object} state Current state. + * @param {Object} action Action to be handled. + * @returns {Object} New state. + */ +const reducers = { + flags, + query, +}; + +export default reducers; diff --git a/src/reducers/query.js b/src/reducers/query.js new file mode 100644 index 0000000..c54c664 --- /dev/null +++ b/src/reducers/query.js @@ -0,0 +1,83 @@ +import { + SET_QUERY, + DELETE_QUERY, + RESET_QUERY, + TRIGGER_QUERY_RENDER, +} from '@eeacms/volto-industry-theme/constants'; + +const initialState = { + search: {}, + deletedQueryParams: {}, + counter: 0, + lastAction: '', +}; + +export default function query(state = initialState, action = {}) { + let search = { ...state.search }; + let deletedQueryParams = { ...state.deletedQueryParams }; + switch (action.type) { + case SET_QUERY: + if (typeof action.queryParam === 'string') { + search[action.queryParam] = action.value; + delete deletedQueryParams[action.queryParam]; + } else if ( + typeof action.queryParam === 'object' && + Object.keys(action.queryParam).length > 0 + ) { + action.queryParam && + Object.entries(action.queryParam).forEach(([key, value]) => { + search[key] = value; + delete deletedQueryParams[key]; + }); + } + return { + ...state, + search, + deletedQueryParams, + counter: state.counter + 1, + lastAction: SET_QUERY, + }; + case DELETE_QUERY: + if (Array.isArray(action.queryParam)) { + action.queryParam.forEach((param) => { + delete search?.[param]; + deletedQueryParams[param] = true; + }); + } else { + delete search?.[action.queryParam]; + deletedQueryParams[action.queryParam] = true; + } + return { + ...state, + search, + deletedQueryParams, + counter: state.counter + 1, + lastAction: DELETE_QUERY, + }; + case RESET_QUERY: + if (Array.isArray(action.queryParam)) { + action.queryParam.forEach((param) => { + delete search?.[param]; + deletedQueryParams[param] = true; + }); + } else { + delete search?.[action.queryParam]; + deletedQueryParams[action.queryParam] = true; + } + return { + ...state, + search: {}, + deletedQueryParams: {}, + counter: 0, + lastAction: RESET_QUERY, + }; + case `${TRIGGER_QUERY_RENDER}`: + return { + ...state, + counter: state.counter + 1, + lastAction: TRIGGER_QUERY_RENDER, + }; + default: + return state; + } +} diff --git a/src/theme/addons/volto-addons/columnsBlock/columns.variables b/src/theme/addons/volto-addons/columnsBlock/columns.variables new file mode 100644 index 0000000..b5588e5 --- /dev/null +++ b/src/theme/addons/volto-addons/columnsBlock/columns.variables @@ -0,0 +1 @@ +@columnGridPadding: 1rem; \ No newline at end of file diff --git a/src/theme/site/elements/button.overrides b/src/theme/site/elements/button.overrides index 14fb0da..bffd9e1 100644 --- a/src/theme/site/elements/button.overrides +++ b/src/theme/site/elements/button.overrides @@ -1,3 +1,22 @@ /******************************* Theme Overrides *******************************/ +button { + @color: attr(color); + @textColor: var(--text-color, @darkBlue); + display: inline-block; + font-weight: bold; + cursor: pointer; + background-color: transparent; + color: @textColor; + border: 1px solid @textColor; + border-radius: @borderRadius; + margin: 0em @horizontalMargin @verticalMargin 0em; + padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); + transition: color .2s ease-in-out, background-color .2s ease-in-out; + + &:hover { + background-color: @textColor; + color: #fff; + } +} \ No newline at end of file diff --git a/src/theme/site/elements/container.overrides b/src/theme/site/elements/container.overrides index 14fb0da..b272ef1 100644 --- a/src/theme/site/elements/container.overrides +++ b/src/theme/site/elements/container.overrides @@ -1,3 +1,41 @@ /******************************* Theme Overrides *******************************/ + +// Full width handle +body { + &.with-scrollbar { + .full-width { + width: calc(100vw - @customScrollbarWidth) !important; + left: calc(50% + @customScrollbarWidth / 2) !important; + + &.padded { + padding-left: 0; + padding-right: 0; + } + + &.padded { + @media only screen and (max-width: @largestTabletScreen) { + padding-left: 1rem; + padding-right: 1rem; + } + } + } + } + + &.has-toolbar { + @media only screen and (min-width: @largestMobileScreen) { + .full-width { + width: calc(100vw - 80px) !important; + left: calc(50% + 40px) !important; + } + + &.with-scrollbar { + .full-width { + width: calc(100vw - 80px - @customScrollbarWidth) !important; + left: calc(50% + 40px + @customScrollbarWidth / 2) !important; + } + } + } + } +} diff --git a/src/theme/site/elements/container.variables b/src/theme/site/elements/container.variables index 33f3a8c..c5f6ce0 100644 --- a/src/theme/site/elements/container.variables +++ b/src/theme/site/elements/container.variables @@ -55,4 +55,4 @@ @textWidth: 700px; @textFontFamily: @pageFont; @textLineHeight: 1.5; -@textSize: @large; \ No newline at end of file +@textSize: @large; diff --git a/src/theme/site/elements/header.overrides b/src/theme/site/elements/header.overrides index 814b7be..6ec3784 100644 --- a/src/theme/site/elements/header.overrides +++ b/src/theme/site/elements/header.overrides @@ -10,6 +10,10 @@ .navigation { margin-left: 1rem; + .hamburger { + display: flex; + } + .ui.menu { flex-wrap: wrap; margin-top: 0; diff --git a/src/theme/site/elements/segment.overrides b/src/theme/site/elements/segment.overrides index 2e955b8..14fb0da 100644 --- a/src/theme/site/elements/segment.overrides +++ b/src/theme/site/elements/segment.overrides @@ -1,11 +1,3 @@ /******************************* Theme Overrides *******************************/ -.ui.segment { - &.inverted { - &.primary { - background: @primaryColor; - border-bottom: 0; - } - } -} \ No newline at end of file diff --git a/src/theme/site/globals/pluggableStyles.less b/src/theme/site/globals/pluggableStyles.less new file mode 100644 index 0000000..8e95cb4 --- /dev/null +++ b/src/theme/site/globals/pluggableStyles.less @@ -0,0 +1,132 @@ +@verticalMargin: 0em; +@horizontalMargin: 0.25em; + +@verticalPadding: @inputVerticalPadding; +@horizontalPadding: 1.5em; + +@shadowDistance: 0em; +@shadowOffset: (@shadowDistance / 2); + +@borderRadius: 1.5em; + +.outline-button { + @textColor: var(--text-color, @darkBlue); + &.style-preview, + a, + button, + .slate-editor-link { + display: inline-block; + font-weight: bold; + cursor: pointer; + background-color: transparent; + color: @textColor; + border: 1px solid @textColor; + border-radius: @borderRadius; + margin: 0em @horizontalMargin @verticalMargin 0em; + padding: @verticalPadding @horizontalPadding + (@verticalPadding + @shadowOffset); + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; + + &:hover { + background-color: @textColor; + color: #fff; + } + } +} + +.solid-button { + @textColor: var(--text-color, @darkBlue); + &.style-preview, + a, + button, + .slate-editor-link { + display: inline-block; + font-weight: bold; + cursor: pointer; + background-color: transparent; + color: #fff; + border: 1px solid @textColor; + border-radius: @borderRadius; + margin: 0em @horizontalMargin @verticalMargin 0em; + padding: @verticalPadding @horizontalPadding + (@verticalPadding + @shadowOffset); + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; + background-color: @textColor; + + &:hover { + .darkenFilter(0.9); + } + } +} + +.type-1 { + height: 100%; + + > .columns-view { + .ui.grid.column-grid .column > div { + height: 100%; + > .styled { + height: 100%; + } + } + } +} + +.industrial-site-style { + margin-bottom: 0 !important; + + > .columns-view { + > .ui.grid { + > .column { + padding-top: 0 !important; + padding-bottom: 0 !important; + + &:first-child { + padding-right: 0; + + > div { + height: 100%; + min-height: 800px; + background: #f3efee; + } + + @media only screen and (max-width: @largestTabletScreen) { + padding-right: 1rem; + + > div { + height: fit-content; + min-height: auto; + } + } + } + + &:last-child { + padding-left: 0; + + > div { + height: 100%; + background: #f6f6f6; + padding: 1rem 1rem; + } + + @media only screen and (max-width: @largestTabletScreen) { + padding-left: 1rem; + + > div { + min-height: 800px; + } + } + } + } + } + } + + .sidebar-block { + .ui.menu { + box-shadow: none; + border: none; + } + } +} diff --git a/src/theme/site/globals/reset.overrides b/src/theme/site/globals/reset.overrides index fa4e73d..e909943 100644 --- a/src/theme/site/globals/reset.overrides +++ b/src/theme/site/globals/reset.overrides @@ -159,8 +159,8 @@ dfn { */ mark { - background-color: #ff0; - color: #000; + background-color: @markBackgroundColor; + color: @markColor; } /** diff --git a/src/theme/site/globals/reset.variables b/src/theme/site/globals/reset.variables index 0eedf27..ca2263c 100644 --- a/src/theme/site/globals/reset.variables +++ b/src/theme/site/globals/reset.variables @@ -1,3 +1,7 @@ /******************************* Reset -*******************************/ \ No newline at end of file +*******************************/ + +/*--- Mark ---*/ +@markColor: #000; +@markBackgroundColor: #ff0; \ No newline at end of file diff --git a/src/theme/site/globals/site.overrides b/src/theme/site/globals/site.overrides index d45d2f3..6036de1 100644 --- a/src/theme/site/globals/site.overrides +++ b/src/theme/site/globals/site.overrides @@ -1,11 +1,64 @@ /******************************* Global Overrides *******************************/ +@import "./pluggableStyles.less"; + +.addScrollbars() when (@useCustomScrollbars) { + /* Force Simple Scrollbars */ + body::-webkit-scrollbar { + -webkit-appearance: none; + width: @customScrollbarWidth; + height: @customScrollbarHeight; + } + body::-webkit-scrollbar-track { + background: @trackBackground; + border-radius: @trackBorderRadius; + } + body::-webkit-scrollbar-thumb { + cursor: pointer; + border-radius: @thumbBorderRadius; + background: @thumbBackground; + transition: @thumbTransition; + } + body::-webkit-scrollbar-thumb:window-inactive { + background: @thumbInactiveBackground; + } + body::-webkit-scrollbar-thumb:hover { + background: @thumbHoverBackground; + } +} + +.addScrollbars(); + +.no-space-top .ui.content-area { + margin-top: 0; + padding-top: 0; +} + +.no-space-bottom .ui.content-area { + margin-bottom: 0; + padding-bottom: 0; +} + +.stretch { + padding: 0 !important; +} .stagingBanner { - display: none; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08) !important; + + .ui.message { + box-shadow: none !important; + } } div#view .ui.container > * { - margin-bottom: 1rem; + margin-bottom: 1.5rem; +} + +.columns-view { + .ui.grid.column-grid { + margin-top: 0; + margin-bottom: 0; + } } diff --git a/src/theme/site/globals/site.variables b/src/theme/site/globals/site.variables index ccc8130..370e3db 100644 --- a/src/theme/site/globals/site.variables +++ b/src/theme/site/globals/site.variables @@ -6,7 +6,7 @@ Fonts --------------------*/ -@fontName : 'Lato'; +@fontName : 'Muli'; @fontSmoothing : antialiased; @headerFont : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif; @@ -29,10 +29,10 @@ --------------------*/ /* This is the single variable that controls them all */ -@emSize : 14px; +@emSize : 16px; /* The size of page text */ -@fontSize : 14px; +@fontSize : 16px; /*------------------- @@ -52,10 +52,10 @@ --------------------*/ @primaryColor : @blue; -@secondaryColor : @black; +@secondaryColor : @orange; @lightPrimaryColor : @lightBlue; -@lightSecondaryColor : @lightBlack; +@lightSecondaryColor : @lightOrange; /*-------------- Page Heading @@ -93,10 +93,10 @@ --------------------*/ /* Used on inputs, textarea etc */ -@focusedFormBorderColor: #85B7D9; +@focusedFormBorderColor: @primaryColor; /* Used on dropdowns, other larger blocks */ -@focusedFormMutedBorderColor: #96C8DA; +@focusedFormMutedBorderColor: @primaryColor; /*------------------- Sizes @@ -138,7 +138,7 @@ Links --------------------*/ -@linkColor : #4183C4; +@linkColor : @orange; @linkUnderline : none; @linkHoverColor : darken(saturate(@linkColor, 20), 15, relative); @linkHoverUnderline : @linkUnderline; @@ -220,7 +220,7 @@ --------------------*/ /*--- Colors ---*/ -@red : #DB2828; +@red : #CD3B1F; @orange : #E2776B; @yellow : #FBBD08; @olive : #B5CC18; @@ -236,21 +236,21 @@ /*--- Light Colors ---*/ @lightRed : #FF695E; -@lightOrange : #FF851B; +@lightOrange : #E4847A; @lightYellow : #FFE21F; @lightOlive : #D9E778; @lightGreen : #2ECC40; @lightTeal : #6DFFFF; -@lightBlue : #54C8FF; +@lightBlue : #81C9DB; @lightViolet : #A291FB; @lightPurple : #DC73FF; @lightPink : #FF8EDF; @lightBrown : #D67C1C; -@lightGrey : #DCDDDE; +@lightGrey : #EDEDED; @lightBlack : #545454; /*--- Dark colors ---*/ -@darkBlue : #11415D; +@darkBlue : #12435D; /*--- Neutrals ---*/ @fullBlack : #000000; diff --git a/src/theme/site/mixins.less b/src/theme/site/mixins.less new file mode 100644 index 0000000..cb8b14d --- /dev/null +++ b/src/theme/site/mixins.less @@ -0,0 +1,7 @@ +.darkenFilter(@percentage) { + filter: brightness(@percentage); + -webkit-filter: brightness(@percentage); + -moz-filter: brightness(@percentage); + -o-filter: brightness(@percentage); + -ms-filter: brightness(@percentage); +} diff --git a/src/theme/site/modules/dimmer.variables b/src/theme/site/modules/dimmer.variables index 81f6e86..9fac732 100644 --- a/src/theme/site/modules/dimmer.variables +++ b/src/theme/site/modules/dimmer.variables @@ -5,7 +5,7 @@ @dimmablePosition: relative; @dimmerPosition: absolute; -@backgroundColor: rgba(0, 0, 0 , 0.85); +@backgroundColor: rgba(0, 0, 0 , 0.35); @lineHeight: 1; @perspective: 2000px; @padding: 1em; diff --git a/src/theme/site/modules/dropdown.overrides b/src/theme/site/modules/dropdown.overrides index 744898e..3c466b5 100644 --- a/src/theme/site/modules/dropdown.overrides +++ b/src/theme/site/modules/dropdown.overrides @@ -49,6 +49,11 @@ content: "\f00d"; } +.ui.selection.dropdown.search > .dropdown.icon { + /* custom padding for dropdowns */ + font-size: 2em; +} + /* Icons for Reference (Subsetted in 2.4.0) .dropdown.down:before { content: "\f0d7"; } .dropdown.up:before { content: "\f0d8"; } diff --git a/src/theme/site/modules/dropdown.variables b/src/theme/site/modules/dropdown.variables index 6a1cee6..ae2d26a 100644 --- a/src/theme/site/modules/dropdown.variables +++ b/src/theme/site/modules/dropdown.variables @@ -160,7 +160,7 @@ @selectionIconZIndex: 3; @selectionIconHitbox: @selectionVerticalPadding; @selectionIconMargin: -@selectionIconHitbox; -@selectionIconPadding: @selectionIconHitbox / @dropdownIconSize; +@selectionIconPadding: 0; @selectionIconTransition: opacity @defaultDuration @defaultEasing; @selectionMenuBorderRadius: 0em 0em @borderRadius @borderRadius; diff --git a/src/theme/theme.config b/src/theme/theme.config index 9dea707..94ce5d2 100644 --- a/src/theme/theme.config +++ b/src/theme/theme.config @@ -74,6 +74,12 @@ /* Path to site override folder */ @siteFolder : "~@eeacms/volto-industry-theme/theme/site"; +/******************************* + Import Mixins & Functions +*******************************/ + +@import (multiple) "@{siteFolder}/mixins.less"; + /******************************* Import Theme *******************************/ diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 0000000..1cf357e --- /dev/null +++ b/src/utils.js @@ -0,0 +1,29 @@ +import qs from 'querystring'; + +export const getEncodedQueryString = (str) => { + if (str) { + return qs.stringify( + { query: str }, + { + arrayFormat: 'comma', + encode: true, + }, + ); + } + return ''; +}; + +export const getEncodedString = (str) => { + if (str) { + return qs + .stringify( + { str }, + { + arrayFormat: 'comma', + encode: true, + }, + ) + .replace('str=', ''); + } + return ''; +}; From 19ef60c117e427fa7f1df4ced8a9686e88b19c72 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Fri, 29 Oct 2021 00:56:02 +0300 Subject: [PATCH 5/8] Stylelint fix --- package.json | 13 +- .../manage/Blocks/ExploreEprtr/styles.less | 6 +- .../manage/Blocks/FiltersBlock/styles.less | 53 +- .../Blocks/IndustryDataTable/styles.less | 46 +- .../manage/Blocks/IndustryMap/styles.less | 45 +- .../manage/Blocks/NavigationBlock/styles.less | 20 +- .../manage/Blocks/PollutantIndex/styles.less | 26 +- .../manage/Blocks/SiteBlocks/Header/style.css | 16 +- .../manage/Blocks/SiteBlocks/style.css | 36 +- .../manage/Blocks/SiteLocationMap/styles.css | 2 +- .../Blocks/SiteStructureSidebar/styles.css | 18 +- src/theme/site/collections/grid.overrides | 1 - src/theme/site/elements/button.overrides | 17 +- src/theme/site/elements/container.overrides | 10 +- src/theme/site/elements/divider.overrides | 5 +- src/theme/site/elements/flag.overrides | 244 + src/theme/site/elements/header.overrides | 10 +- src/theme/site/elements/icon.overrides | 6457 +++++++++++++---- src/theme/site/elements/step.overrides | 13 +- src/theme/site/extras/main.overrides | 4 +- src/theme/site/globals/pluggableStyles.less | 37 +- src/theme/site/globals/reset.overrides | 51 +- src/theme/site/globals/site.overrides | 16 +- src/theme/site/mixins.less | 2 +- src/theme/site/modules/accordion.overrides | 18 +- src/theme/site/modules/checkbox.overrides | 8 +- src/theme/site/modules/dropdown.overrides | 25 +- src/theme/site/modules/rating.overrides | 18 +- src/theme/site/modules/transition.overrides | 343 +- 29 files changed, 5922 insertions(+), 1638 deletions(-) diff --git a/package.json b/package.json index 4390865..379864a 100644 --- a/package.json +++ b/package.json @@ -17,15 +17,18 @@ "url": "git@github.com:eea/volto-industry-theme.git" }, "addons": [ + "@eeacms/volto-tableau", "@eeacms/volto-datablocks", "@eeacms/volto-openlayers-map", "@eeacms/volto-columns-block" ], "dependencies": { "@cypress/code-coverage": "^3.9.5", - "@eeacms/volto-datablocks": "2.0.13", - "@eeacms/volto-openlayers-map": "0.1.2", - "@eeacms/volto-columns-block": "4.4.6", + "@eeacms/volto-tableau": "^1.2.4", + "@eeacms/volto-datablocks": "^2.0.13", + "@eeacms/volto-openlayers-map": "^0.1.2", + "@eeacms/volto-columns-block": "^4.4.6", + "tableau-api-js": "github:eea/tableau-api-js#1.1.1", "axios": "0.24.0", "babel-plugin-transform-class-properties": "^6.24.1", "react-highlight-words": "0.17.0", @@ -41,8 +44,8 @@ "test": "make test", "test:fix": "make test-update", "pre-commit": "yarn stylelint:fix && yarn prettier:fix && yarn lint:fix", - "stylelint": "if [ -d ./project ]; then ./project/node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'; else ../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'; fi", - "stylelint:overrides": "if [ -d ./project ]; then ./project/node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'; else ../../../node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'; fi", + "stylelint": "../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'", + "stylelint:overrides": "../../../node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'", "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix", "prettier": "if [ -d ./project ]; then ./project/node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'; else ../../../node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'; fi", "prettier:fix": "if [ -d ./project ]; then ./project/node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'; else ../../../node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'; fi", diff --git a/src/components/manage/Blocks/ExploreEprtr/styles.less b/src/components/manage/Blocks/ExploreEprtr/styles.less index 62c586e..0631716 100644 --- a/src/components/manage/Blocks/ExploreEprtr/styles.less +++ b/src/components/manage/Blocks/ExploreEprtr/styles.less @@ -28,8 +28,8 @@ .column.description { display: flex; flex-flow: column; - justify-content: space-between; align-self: stretch; + justify-content: space-between; font-size: @fontSize; .explore-tile { @@ -46,14 +46,14 @@ } p { - color: @lightBlue; margin-bottom: 0; + color: @lightBlue; font-weight: bold; &.title { + margin-bottom: 0.2rem; color: @darkBlue; font-size: 1.2em; - margin-bottom: 0.2rem; } } } diff --git a/src/components/manage/Blocks/FiltersBlock/styles.less b/src/components/manage/Blocks/FiltersBlock/styles.less index d05f11e..cca46a5 100644 --- a/src/components/manage/Blocks/FiltersBlock/styles.less +++ b/src/components/manage/Blocks/FiltersBlock/styles.less @@ -8,8 +8,8 @@ .filters-block { @textColor: var(--text-color, @darkBlue); display: flex; - flex-flow: row; height: 100%; + flex-flow: row; .search-container { position: relative; @@ -20,25 +20,25 @@ height: 100%; input { - margin-right: 1rem; - border-radius: 2em; - padding-right: 3.5em !important; - padding-left: 1em !important; padding-top: @verticalPadding !important; + padding-right: 3.5em !important; padding-bottom: @verticalPadding !important; + padding-left: 1em !important; + margin-right: 1rem; + border-radius: 2em; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); } .icon { position: absolute; - right: 0; top: 50%; - transform: translateY(-50%); - border: none; + right: 0; + width: 1em; padding: 0; + border: none; margin: 0; - width: 1em; opacity: 0.8; + transform: translateY(-50%); &.search { right: 2em; @@ -51,9 +51,9 @@ &:not(.loading) { .icon { - pointer-events: all !important; - cursor: pointer; color: @textColor; + cursor: pointer; + pointer-events: all !important; &:hover { opacity: 1; @@ -64,19 +64,19 @@ .ui.list { position: absolute; - background: #fff; - border-radius: 1em; + z-index: 1; + width: calc(100% - 1rem); padding: 1rem; margin-top: 0; + background: #fff; + border-radius: 1em; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); - width: calc(100% - 1rem); - z-index: 1; .item { display: flex; justify-content: space-between; - cursor: pointer; padding: 6px 10px; + cursor: pointer; &:hover { background-color: @lightGrey; @@ -105,6 +105,7 @@ .search-container { margin-bottom: 1rem; + .ui.input { input { margin-right: 0; @@ -117,17 +118,17 @@ .ui.modal.filters-block { > .header, h3 { - color: @primaryColor; margin-top: 1rem; + color: @primaryColor; } > .header { display: flex; - justify-content: space-between; align-items: center; - margin-top: 0; + justify-content: space-between; padding-top: 1rem !important; padding-bottom: 1rem !important; + margin-top: 0; .icon { cursor: pointer; @@ -145,10 +146,10 @@ align-items: center; .icon { - cursor: pointer; margin-bottom: 1rem; - fill: @orange !important; color: @orange !important; + cursor: pointer; + fill: @orange !important; &:hover { .darkenFilter(0.9); @@ -158,25 +159,25 @@ .ui.dropdown { display: inline-flex; - margin-bottom: 1rem; - margin-right: 1rem; max-width: 14em; + margin-right: 1rem; + margin-bottom: 1rem; > .dropdown.icon:before { color: @orange; } .text { - width: 100%; overflow: hidden; - white-space: nowrap; + width: 100%; text-overflow: ellipsis; + white-space: nowrap; } } .actions { - text-align: center; padding: 1rem !important; + text-align: center; button { margin-right: 2rem; diff --git a/src/components/manage/Blocks/IndustryDataTable/styles.less b/src/components/manage/Blocks/IndustryDataTable/styles.less index a86a65e..dea4117 100644 --- a/src/components/manage/Blocks/IndustryDataTable/styles.less +++ b/src/components/manage/Blocks/IndustryDataTable/styles.less @@ -5,9 +5,9 @@ .industry-table { display: flex; - overflow-x: auto; min-height: 400px; align-items: baseline; + overflow-x: auto; .ui.loader { align-self: center; @@ -34,8 +34,8 @@ &::after { display: none; - border-bottom: none; padding: 0; + border-bottom: none; } } } @@ -45,18 +45,20 @@ tr { border: none; background-color: #f8f8f8; + &.hidden-row { - border: none; display: none; + border: none; + td { padding: 0; .table-flex-container { display: flex; - justify-content: space-between; overflow: hidden; - transition: opacity 0.4s cubic-bezier(0, 0, 1, 1); + justify-content: space-between; padding: 0 0.4rem; + transition: opacity 0.4s cubic-bezier(0, 0, 1, 1); &.action { padding: 0; @@ -69,29 +71,33 @@ } span.header { - font-weight: bold; - color: @primaryColor; margin-bottom: 1em; + color: @primaryColor; + font-weight: bold; } } } &.show { - border: none; display: table-row; + border: none; + td { padding: 20px 16px 20px 16px; + .table-flex-container { - padding: 1em; max-height: fit-content; + padding: 1em; opacity: 1; + &.action { padding: 0; margin-top: 1em; } + &.white { - color: #000; background: #fff; + color: #000; } } } @@ -101,18 +107,18 @@ &.hide { td { .table-flex-container { - padding: 0; max-height: 0; + padding: 0; opacity: 0; } } } button { - cursor: pointer; - background: transparent; - border: none; padding: 0; + border: none; + background: transparent; + cursor: pointer; &:focus { outline: none; @@ -129,6 +135,7 @@ &.row-active { font-weight: bold; + button { svg.icon { fill: @orange !important; @@ -148,14 +155,14 @@ tfoot { th { - border: none; padding: 0.78571429em 0; + border: none; } } td { - border: none; padding: 4px 16px; + border: none; } } @@ -165,17 +172,18 @@ .ui.pagination.menu { border: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; + box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); + .item { &:before { position: absolute; - content: ''; top: 0; right: 0; - height: 100%; width: 1px; + height: 100%; background: rgba(34, 36, 38, 0.1); + content: ''; } &:focus { diff --git a/src/components/manage/Blocks/IndustryMap/styles.less b/src/components/manage/Blocks/IndustryMap/styles.less index f42abac..3de8701 100644 --- a/src/components/manage/Blocks/IndustryMap/styles.less +++ b/src/components/manage/Blocks/IndustryMap/styles.less @@ -23,8 +23,8 @@ .ol-control { &.ol-custom { - left: unset !important; right: 0.5rem !important; + left: unset !important; .menu-button { display: none; @@ -71,11 +71,11 @@ bottom: 10px; min-width: 280px; max-width: 280px; - transform: translateX(-50%); - background-color: white; border: 1px solid #cccccc; + background-color: white; border-radius: 0.2em; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + transform: translateX(-50%); &::after, &::before { @@ -105,25 +105,25 @@ } .ol-dynamic-filter { + left: 100px; display: block !important; - height: 100%; + overflow: auto; min-width: 320px; max-width: 320px; - left: 100px; + height: 100%; transition: opacity 0.3s ease-in-out; - overflow: auto; > div { height: 100%; } #map-sidebar { - background-color: #fff; - color: @primaryColor; height: fit-content; min-height: 100%; padding: 2rem 1rem; + background-color: #fff; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + color: @primaryColor; h2 .delete.icon { display: none; @@ -135,17 +135,17 @@ } .text { - width: 100%; overflow: hidden; - white-space: nowrap; + width: 100%; text-overflow: ellipsis; + white-space: nowrap; } } .clear-button { --text-color: @orange; - margin-top: 1.5rem; width: 100%; + margin-top: 1.5rem; } @media only screen and (max-width: @largestTabletScreen) { @@ -161,16 +161,16 @@ } .loader { - background-color: rgba(255, 255, 255, 0.8); - border-radius: 4px; - padding: 4px 6px; position: absolute; - font-size: 1em; - font-weight: bold; z-index: 1; - bottom: 1rem; right: 1rem; + bottom: 1rem; + padding: 4px 6px; + background-color: rgba(255, 255, 255, 0.8); + border-radius: 4px; color: @primaryColor; + font-size: 1em; + font-weight: bold; } @media only screen and (max-width: @largestMobileScreen) { @@ -182,6 +182,7 @@ > .header, h3 { color: @primaryColor; + &:not(:first-child) { margin-top: 1rem; } @@ -189,12 +190,12 @@ > .header { display: flex; - justify-content: space-between; align-items: center; + justify-content: space-between; .icon { - cursor: pointer; color: @orange !important; + cursor: pointer; &:hover { .darkenFilter(0.9); @@ -203,8 +204,8 @@ } > .actions { - text-align: center; padding: 1rem !important; + text-align: center; } p:not(:last-child) { @@ -214,9 +215,9 @@ body.map-sidebar-visible .industry-map .ol-dynamic-filter { @media only screen and (max-width: @largestTabletScreen) { + z-index: 1; + left: 0; display: block !important; width: 100%; - left: 0; - z-index: 1; } } diff --git a/src/components/manage/Blocks/NavigationBlock/styles.less b/src/components/manage/Blocks/NavigationBlock/styles.less index 97c03f3..a4fcc21 100644 --- a/src/components/manage/Blocks/NavigationBlock/styles.less +++ b/src/components/manage/Blocks/NavigationBlock/styles.less @@ -8,9 +8,9 @@ .industrial-site-style { .ui.menu.navigation-block { flex-wrap: wrap; + border: none; margin-bottom: 0; box-shadow: none; - border: none; } } @@ -19,9 +19,9 @@ background: transparent; .item { - margin-bottom: 0 !important; - border: none !important; padding: @relative11px @relative14px; + border: none !important; + margin-bottom: 0 !important; a { color: @textColor; @@ -40,13 +40,13 @@ background: transparent; &::before { - content: ''; - display: block; position: absolute; top: calc(100% - @borderSize + 1px); - height: @borderSize; + display: block; width: 100%; + height: @borderSize; background-color: @textColor; + content: ''; } &:hover { @@ -63,23 +63,23 @@ .type-1 { > .ui.menu.navigation-block { @textColor: var(--text-color, @blue); - border-radius: 2em; - border: 1px solid @textColor; height: 100%; + border: 1px solid @textColor; + border-radius: 2em; .item { flex: 1; justify-content: center; padding: 0; - border-radius: 0; margin: -1px; + border-radius: 0; transition: background-color 0.2s ease-in-out; a { display: inline-block; width: 100%; - text-align: center; padding: @relative11px @relative14px; + text-align: center; transition: color 0.2s ease-in-out; } diff --git a/src/components/manage/Blocks/PollutantIndex/styles.less b/src/components/manage/Blocks/PollutantIndex/styles.less index 9fb92f8..74978b4 100644 --- a/src/components/manage/Blocks/PollutantIndex/styles.less +++ b/src/components/manage/Blocks/PollutantIndex/styles.less @@ -6,18 +6,18 @@ @borderSize: 3px; .index-pollutants { + padding-top: 1rem; border: 1px solid #d4d4d5; - border-radius: 0.25rem; background-color: #f6f6f6; - padding-top: 1rem; + border-radius: 0.25rem; .ui.selection.dropdown { - color: @primaryColor; - background: transparent; width: fit-content; - margin-bottom: 1rem; width: fit-content; border: none; + margin-bottom: 1rem; + background: transparent; + color: @primaryColor; font-size: 1em; font-weight: bold; @@ -43,21 +43,21 @@ .ui.menu { @textColor: var(--text-color, @blue); - background: transparent; border: none; + background: transparent; box-shadow: none; .item { - margin-bottom: 0 !important; - border: none !important; padding: @relative11px @relative14px; + border: none !important; + margin-bottom: 0 !important; color: @textColor; font-weight: bold; &:hover { .darkenFilter(0.9); - color: @textColor; background: transparent !important; + color: @textColor; } &::before { @@ -74,14 +74,14 @@ } &::before { - content: ''; - display: block; position: absolute; top: calc(100% - @borderSize + 1px); left: 0.875em; - height: @borderSize; + display: block; width: calc(100% - 1.75em); + height: @borderSize; background-color: @textColor; + content: ''; } &:hover { @@ -96,8 +96,8 @@ } .ui.tab { - background-color: transparent !important; border: none !important; + background-color: transparent !important; } h3 { diff --git a/src/components/manage/Blocks/SiteBlocks/Header/style.css b/src/components/manage/Blocks/SiteBlocks/Header/style.css index 72629de..c3e4fd5 100644 --- a/src/components/manage/Blocks/SiteBlocks/Header/style.css +++ b/src/components/manage/Blocks/SiteBlocks/Header/style.css @@ -13,8 +13,8 @@ } .site-header .label { - font-weight: bold; margin-bottom: 0; + font-weight: bold; } .site-header .info { @@ -22,14 +22,14 @@ } .site-header .ui.selection.dropdown { + min-height: auto; + flex-flow: row; + justify-content: flex-start !important; padding-top: 0; padding-bottom: 0; - color: #989898; - border: none; padding-left: 0; - justify-content: flex-start !important; - flex-flow: row; - min-height: auto; + border: none; + color: #989898; } .site-header .ui.active.selection.dropdown:hover { @@ -37,12 +37,12 @@ } .site-header .ui.selection.dropdown .dropdown.icon { - float: none; position: relative; top: auto; - left: auto; right: auto; + left: auto; margin: 0; margin-left: 0.5em !important; + float: none; font-size: 1em !important; } diff --git a/src/components/manage/Blocks/SiteBlocks/style.css b/src/components/manage/Blocks/SiteBlocks/style.css index d6b7eaf..b4a33cd 100644 --- a/src/components/manage/Blocks/SiteBlocks/style.css +++ b/src/components/manage/Blocks/SiteBlocks/style.css @@ -1,6 +1,6 @@ .popup-svg { - height: 100%; display: flex; + height: 100%; justify-content: center; } @@ -39,24 +39,24 @@ h3.orange { } .site-block .title > h3 { - margin-bottom: 0; margin-right: 0.5rem; + margin-bottom: 0; } .site-block .title.marginless, .site-block h3.marginless { - margin-bottom: 0; margin-top: 0; + margin-bottom: 0; } .site-block > .activity { - font-weight: bold; margin-bottom: 0; + font-weight: bold; } .site-block > .address { - font-weight: bold; margin-bottom: 0; + font-weight: bold; } .site-block .ui.grid { @@ -75,22 +75,22 @@ h3.orange { } .site-block div.eprtrBanner { - color: #fff; - border-radius: 10px; - margin-bottom: 1rem; padding: 1rem; padding-bottom: 0; + margin-bottom: 1rem; + border-radius: 10px; + color: #fff; } .site-block div.eprtrBanner.blue { - background-color: #4296b3; margin-top: 1rem; + background-color: #4296b3; } .site-block div.eprtrBanner > .ui.grid .row .column { display: flex; - justify-content: space-between; flex-flow: column; + justify-content: space-between; } .site-block div.eprtrBanner > .ui.grid .row .column:last-child { @@ -161,8 +161,8 @@ h3.orange { } .ui.grid .row .column .label { - font-weight: bold; margin-bottom: 0; + font-weight: bold; } .ui.grid .row .column .info { @@ -197,9 +197,9 @@ h3.orange { .bat-conclusions .bat-conclusions-wrapper { position: relative; width: 100%; + padding: 0 1rem; border: 1px solid #000; margin-bottom: 1rem; - padding: 0 1rem; border-radius: 10px; overflow-wrap: break-word; } @@ -210,12 +210,12 @@ h3.orange { } .bat-conclusions .installation-conclusions-wrapper:after { - content: ''; display: block; - height: 1px; width: calc(100% + 2rem); + height: 1px; margin-left: -1rem; background-color: #000; + content: ''; } .bat-conclusions .installation-conclusions-wrapper:last-child:after { @@ -252,10 +252,10 @@ h3.orange { .conclusion-wrapper .conclusion-title button { - border: 1px solid #000; width: 16px; height: 16px; padding: 0; + border: 1px solid #000; border-radius: 100%; } @@ -272,14 +272,14 @@ h3.orange { .conclusion-wrapper .conclusion-title > h3 { - margin-bottom: 0; margin-right: 0.5rem; + margin-bottom: 0; word-break: break-all; } .bat-conclusions .aels-wrapper { - margin-top: 1rem; padding-left: 2rem; + margin-top: 1rem; } .bat-conclusions .aels-wrapper h3 { @@ -292,12 +292,12 @@ h3.orange { } .bat-conclusions .conclusion-wrapper button { + padding: 0; border: none; background: transparent; color: #ec776a; cursor: pointer; text-decoration: underline; - padding: 0; } .custom-selector h1.ui.header { diff --git a/src/components/manage/Blocks/SiteLocationMap/styles.css b/src/components/manage/Blocks/SiteLocationMap/styles.css index 5271b29..f923709 100644 --- a/src/components/manage/Blocks/SiteLocationMap/styles.css +++ b/src/components/manage/Blocks/SiteLocationMap/styles.css @@ -1,7 +1,7 @@ .site-location-map { display: flex; - justify-content: center; height: 400px; + justify-content: center; } .site-location-map.visible.transition { diff --git a/src/components/manage/Blocks/SiteStructureSidebar/styles.css b/src/components/manage/Blocks/SiteStructureSidebar/styles.css index e602a27..6f7a3ca 100644 --- a/src/components/manage/Blocks/SiteStructureSidebar/styles.css +++ b/src/components/manage/Blocks/SiteStructureSidebar/styles.css @@ -6,9 +6,9 @@ .sidebar-block .ui.menu .ui.menu { position: relative; - padding: 0; height: initial; min-height: unset; + padding: 0; } .sidebar-block .ui.menu .item.site-name { @@ -66,27 +66,27 @@ .sidebar-block .ui.menu .item span { display: block !important; - line-height: 1.1em; - white-space: nowrap; overflow: hidden; + line-height: 1.1em; text-overflow: ellipsis; + white-space: nowrap; } .sidebar-block .ui.menu .ui.menu.entity .item:before { - display: block !important; - height: initial; - content: ''; position: absolute !important; top: 0 !important; - left: -2px !important; right: unset; bottom: 50% !important; + left: -2px !important; + display: block !important; width: 0.75em !important; + height: initial; border: 2px solid #4296b3 !important; - border-left: 2px solid #4296b3 !important; - border-bottom: 2px solid #4296b3 !important; border-top: 0 none transparent !important; border-right: 0 none transparent !important; + border-bottom: 2px solid #4296b3 !important; + border-left: 2px solid #4296b3 !important; + content: ''; } .sidebar-block .ui.menu .item, diff --git a/src/theme/site/collections/grid.overrides b/src/theme/site/collections/grid.overrides index 0e06821..14fb0da 100644 --- a/src/theme/site/collections/grid.overrides +++ b/src/theme/site/collections/grid.overrides @@ -1,4 +1,3 @@ /******************************* Theme Overrides *******************************/ - diff --git a/src/theme/site/elements/button.overrides b/src/theme/site/elements/button.overrides index bffd9e1..0ab5143 100644 --- a/src/theme/site/elements/button.overrides +++ b/src/theme/site/elements/button.overrides @@ -5,18 +5,19 @@ button { @color: attr(color); @textColor: var(--text-color, @darkBlue); display: inline-block; - font-weight: bold; - cursor: pointer; - background-color: transparent; - color: @textColor; + padding: @verticalPadding @horizontalPadding + (@verticalPadding + @shadowOffset); border: 1px solid @textColor; - border-radius: @borderRadius; margin: 0em @horizontalMargin @verticalMargin 0em; - padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); - transition: color .2s ease-in-out, background-color .2s ease-in-out; + background-color: transparent; + border-radius: @borderRadius; + color: @textColor; + cursor: pointer; + font-weight: bold; + transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; &:hover { background-color: @textColor; color: #fff; } -} \ No newline at end of file +} diff --git a/src/theme/site/elements/container.overrides b/src/theme/site/elements/container.overrides index b272ef1..2d77416 100644 --- a/src/theme/site/elements/container.overrides +++ b/src/theme/site/elements/container.overrides @@ -6,18 +6,18 @@ body { &.with-scrollbar { .full-width { - width: calc(100vw - @customScrollbarWidth) !important; left: calc(50% + @customScrollbarWidth / 2) !important; + width: calc(100vw - @customScrollbarWidth) !important; &.padded { - padding-left: 0; padding-right: 0; + padding-left: 0; } &.padded { @media only screen and (max-width: @largestTabletScreen) { - padding-left: 1rem; padding-right: 1rem; + padding-left: 1rem; } } } @@ -26,14 +26,14 @@ body { &.has-toolbar { @media only screen and (min-width: @largestMobileScreen) { .full-width { - width: calc(100vw - 80px) !important; left: calc(50% + 40px) !important; + width: calc(100vw - 80px) !important; } &.with-scrollbar { .full-width { - width: calc(100vw - 80px - @customScrollbarWidth) !important; left: calc(50% + 40px + @customScrollbarWidth / 2) !important; + width: calc(100vw - 80px - @customScrollbarWidth) !important; } } } diff --git a/src/theme/site/elements/divider.overrides b/src/theme/site/elements/divider.overrides index 2690ca2..aa3a701 100644 --- a/src/theme/site/elements/divider.overrides +++ b/src/theme/site/elements/divider.overrides @@ -2,17 +2,16 @@ Theme Overrides *******************************/ - .ui.horizontal.divider:before, .ui.horizontal.divider:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC'); } -@media only screen and (max-width : (@tabletBreakpoint - 1px)) { +@media only screen and (max-width: (@tabletBreakpoint - 1px)) { .ui.stackable.grid .ui.vertical.divider:before, .ui.grid .stackable.row .ui.vertical.divider:before, .ui.stackable.grid .ui.vertical.divider:after, .ui.grid .stackable.row .ui.vertical.divider:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC'); } -} \ No newline at end of file +} diff --git a/src/theme/site/elements/flag.overrides b/src/theme/site/elements/flag.overrides index 6a0f921..37c68c3 100644 --- a/src/theme/site/elements/flag.overrides +++ b/src/theme/site/elements/flag.overrides @@ -8,983 +8,1227 @@ i.flag.ad:before, i.flag.andorra:before { background-position: 0px 0px; } + i.flag.ae:before, i.flag.united.arab.emirates:before, i.flag.uae:before { background-position: 0px -26px; } + i.flag.af:before, i.flag.afghanistan:before { background-position: 0px -52px; } + i.flag.ag:before, i.flag.antigua:before { background-position: 0px -78px; } + i.flag.ai:before, i.flag.anguilla:before { background-position: 0px -104px; } + i.flag.al:before, i.flag.albania:before { background-position: 0px -130px; } + i.flag.am:before, i.flag.armenia:before { background-position: 0px -156px; } + i.flag.an:before, i.flag.netherlands.antilles:before { background-position: 0px -182px; } + i.flag.ao:before, i.flag.angola:before { background-position: 0px -208px; } + i.flag.ar:before, i.flag.argentina:before { background-position: 0px -234px; } + i.flag.as:before, i.flag.american.samoa:before { background-position: 0px -260px; } + i.flag.at:before, i.flag.austria:before { background-position: 0px -286px; } + i.flag.au:before, i.flag.australia:before { background-position: 0px -312px; } + i.flag.aw:before, i.flag.aruba:before { background-position: 0px -338px; } + i.flag.ax:before, i.flag.aland.islands:before { background-position: 0px -364px; } + i.flag.az:before, i.flag.azerbaijan:before { background-position: 0px -390px; } + i.flag.ba:before, i.flag.bosnia:before { background-position: 0px -416px; } + i.flag.bb:before, i.flag.barbados:before { background-position: 0px -442px; } + i.flag.bd:before, i.flag.bangladesh:before { background-position: 0px -468px; } + i.flag.be:before, i.flag.belgium:before { background-position: 0px -494px; } + i.flag.bf:before, i.flag.burkina.faso:before { background-position: 0px -520px; } + i.flag.bg:before, i.flag.bulgaria:before { background-position: 0px -546px; } + i.flag.bh:before, i.flag.bahrain:before { background-position: 0px -572px; } + i.flag.bi:before, i.flag.burundi:before { background-position: 0px -598px; } + i.flag.bj:before, i.flag.benin:before { background-position: 0px -624px; } + i.flag.bm:before, i.flag.bermuda:before { background-position: 0px -650px; } + i.flag.bn:before, i.flag.brunei:before { background-position: 0px -676px; } + i.flag.bo:before, i.flag.bolivia:before { background-position: 0px -702px; } + i.flag.br:before, i.flag.brazil:before { background-position: 0px -728px; } + i.flag.bs:before, i.flag.bahamas:before { background-position: 0px -754px; } + i.flag.bt:before, i.flag.bhutan:before { background-position: 0px -780px; } + i.flag.bv:before, i.flag.bouvet.island:before { background-position: 0px -806px; } + i.flag.bw:before, i.flag.botswana:before { background-position: 0px -832px; } + i.flag.by:before, i.flag.belarus:before { background-position: 0px -858px; } + i.flag.bz:before, i.flag.belize:before { background-position: 0px -884px; } + i.flag.ca:before, i.flag.canada:before { background-position: 0px -910px; } + i.flag.cc:before, i.flag.cocos.islands:before { background-position: 0px -962px; } + i.flag.cd:before, i.flag.congo:before { background-position: 0px -988px; } + i.flag.cf:before, i.flag.central.african.republic:before { background-position: 0px -1014px; } + i.flag.cg:before, i.flag.congo.brazzaville:before { background-position: 0px -1040px; } + i.flag.ch:before, i.flag.switzerland:before { background-position: 0px -1066px; } + i.flag.ci:before, i.flag.cote.divoire:before { background-position: 0px -1092px; } + i.flag.ck:before, i.flag.cook.islands:before { background-position: 0px -1118px; } + i.flag.cl:before, i.flag.chile:before { background-position: 0px -1144px; } + i.flag.cm:before, i.flag.cameroon:before { background-position: 0px -1170px; } + i.flag.cn:before, i.flag.china:before { background-position: 0px -1196px; } + i.flag.co:before, i.flag.colombia:before { background-position: 0px -1222px; } + i.flag.cr:before, i.flag.costa.rica:before { background-position: 0px -1248px; } + i.flag.cs:before, i.flag.serbia:before { background-position: 0px -1274px; } + i.flag.cu:before, i.flag.cuba:before { background-position: 0px -1300px; } + i.flag.cv:before, i.flag.cape.verde:before { background-position: 0px -1326px; } + i.flag.cx:before, i.flag.christmas.island:before { background-position: 0px -1352px; } + i.flag.cy:before, i.flag.cyprus:before { background-position: 0px -1378px; } + i.flag.cz:before, i.flag.czech.republic:before { background-position: 0px -1404px; } + i.flag.de:before, i.flag.germany:before { background-position: 0px -1430px; } + i.flag.dj:before, i.flag.djibouti:before { background-position: 0px -1456px; } + i.flag.dk:before, i.flag.denmark:before { background-position: 0px -1482px; } + i.flag.dm:before, i.flag.dominica:before { background-position: 0px -1508px; } + i.flag.do:before, i.flag.dominican.republic:before { background-position: 0px -1534px; } + i.flag.dz:before, i.flag.algeria:before { background-position: 0px -1560px; } + i.flag.ec:before, i.flag.ecuador:before { background-position: 0px -1586px; } + i.flag.ee:before, i.flag.estonia:before { background-position: 0px -1612px; } + i.flag.eg:before, i.flag.egypt:before { background-position: 0px -1638px; } + i.flag.eh:before, i.flag.western.sahara:before { background-position: 0px -1664px; } + i.flag.gb.eng:before, i.flag.england:before { background-position: 0px -1690px; } + i.flag.er:before, i.flag.eritrea:before { background-position: 0px -1716px; } + i.flag.es:before, i.flag.spain:before { background-position: 0px -1742px; } + i.flag.et:before, i.flag.ethiopia:before { background-position: 0px -1768px; } + i.flag.eu:before, i.flag.european.union:before { background-position: 0px -1794px; } + i.flag.fi:before, i.flag.finland:before { background-position: 0px -1846px; } + i.flag.fj:before, i.flag.fiji:before { background-position: 0px -1872px; } + i.flag.fk:before, i.flag.falkland.islands:before { background-position: 0px -1898px; } + i.flag.fm:before, i.flag.micronesia:before { background-position: 0px -1924px; } + i.flag.fo:before, i.flag.faroe.islands:before { background-position: 0px -1950px; } + i.flag.fr:before, i.flag.france:before { background-position: 0px -1976px; } + i.flag.ga:before, i.flag.gabon:before { background-position: -36px 0px; } + i.flag.gb:before, i.flag.uk:before, i.flag.united.kingdom:before { background-position: -36px -26px; } + i.flag.gd:before, i.flag.grenada:before { background-position: -36px -52px; } + i.flag.ge:before, i.flag.georgia:before { background-position: -36px -78px; } + i.flag.gf:before, i.flag.french.guiana:before { background-position: -36px -104px; } + i.flag.gh:before, i.flag.ghana:before { background-position: -36px -130px; } + i.flag.gi:before, i.flag.gibraltar:before { background-position: -36px -156px; } + i.flag.gl:before, i.flag.greenland:before { background-position: -36px -182px; } + i.flag.gm:before, i.flag.gambia:before { background-position: -36px -208px; } + i.flag.gn:before, i.flag.guinea:before { background-position: -36px -234px; } + i.flag.gp:before, i.flag.guadeloupe:before { background-position: -36px -260px; } + i.flag.gq:before, i.flag.equatorial.guinea:before { background-position: -36px -286px; } + i.flag.gr:before, i.flag.greece:before { background-position: -36px -312px; } + i.flag.gs:before, i.flag.sandwich.islands:before { background-position: -36px -338px; } + i.flag.gt:before, i.flag.guatemala:before { background-position: -36px -364px; } + i.flag.gu:before, i.flag.guam:before { background-position: -36px -390px; } + i.flag.gw:before, i.flag.guinea-bissau:before { background-position: -36px -416px; } + i.flag.gy:before, i.flag.guyana:before { background-position: -36px -442px; } + i.flag.hk:before, i.flag.hong.kong:before { background-position: -36px -468px; } + i.flag.hm:before, i.flag.heard.island:before { background-position: -36px -494px; } + i.flag.hn:before, i.flag.honduras:before { background-position: -36px -520px; } + i.flag.hr:before, i.flag.croatia:before { background-position: -36px -546px; } + i.flag.ht:before, i.flag.haiti:before { background-position: -36px -572px; } + i.flag.hu:before, i.flag.hungary:before { background-position: -36px -598px; } + i.flag.id:before, i.flag.indonesia:before { background-position: -36px -624px; } + i.flag.ie:before, i.flag.ireland:before { background-position: -36px -650px; } + i.flag.il:before, i.flag.israel:before { background-position: -36px -676px; } + i.flag.in:before, i.flag.india:before { background-position: -36px -702px; } + i.flag.io:before, i.flag.indian.ocean.territory:before { background-position: -36px -728px; } + i.flag.iq:before, i.flag.iraq:before { background-position: -36px -754px; } + i.flag.ir:before, i.flag.iran:before { background-position: -36px -780px; } + i.flag.is:before, i.flag.iceland:before { background-position: -36px -806px; } + i.flag.it:before, i.flag.italy:before { background-position: -36px -832px; } + i.flag.jm:before, i.flag.jamaica:before { background-position: -36px -858px; } + i.flag.jo:before, i.flag.jordan:before { background-position: -36px -884px; } + i.flag.jp:before, i.flag.japan:before { background-position: -36px -910px; } + i.flag.ke:before, i.flag.kenya:before { background-position: -36px -936px; } + i.flag.kg:before, i.flag.kyrgyzstan:before { background-position: -36px -962px; } + i.flag.kh:before, i.flag.cambodia:before { background-position: -36px -988px; } + i.flag.ki:before, i.flag.kiribati:before { background-position: -36px -1014px; } + i.flag.km:before, i.flag.comoros:before { background-position: -36px -1040px; } + i.flag.kn:before, i.flag.saint.kitts.and.nevis:before { background-position: -36px -1066px; } + i.flag.kp:before, i.flag.north.korea:before { background-position: -36px -1092px; } + i.flag.kr:before, i.flag.south.korea:before { background-position: -36px -1118px; } + i.flag.kw:before, i.flag.kuwait:before { background-position: -36px -1144px; } + i.flag.ky:before, i.flag.cayman.islands:before { background-position: -36px -1170px; } + i.flag.kz:before, i.flag.kazakhstan:before { background-position: -36px -1196px; } + i.flag.la:before, i.flag.laos:before { background-position: -36px -1222px; } + i.flag.lb:before, i.flag.lebanon:before { background-position: -36px -1248px; } + i.flag.lc:before, i.flag.saint.lucia:before { background-position: -36px -1274px; } + i.flag.li:before, i.flag.liechtenstein:before { background-position: -36px -1300px; } + i.flag.lk:before, i.flag.sri.lanka:before { background-position: -36px -1326px; } + i.flag.lr:before, i.flag.liberia:before { background-position: -36px -1352px; } + i.flag.ls:before, i.flag.lesotho:before { background-position: -36px -1378px; } + i.flag.lt:before, i.flag.lithuania:before { background-position: -36px -1404px; } + i.flag.lu:before, i.flag.luxembourg:before { background-position: -36px -1430px; } + i.flag.lv:before, i.flag.latvia:before { background-position: -36px -1456px; } + i.flag.ly:before, i.flag.libya:before { background-position: -36px -1482px; } + i.flag.ma:before, i.flag.morocco:before { background-position: -36px -1508px; } + i.flag.mc:before, i.flag.monaco:before { background-position: -36px -1534px; } + i.flag.md:before, i.flag.moldova:before { background-position: -36px -1560px; } + i.flag.me:before, i.flag.montenegro:before { background-position: -36px -1586px; } + i.flag.mg:before, i.flag.madagascar:before { background-position: -36px -1613px; } + i.flag.mh:before, i.flag.marshall.islands:before { background-position: -36px -1639px; } + i.flag.mk:before, i.flag.macedonia:before { background-position: -36px -1665px; } + i.flag.ml:before, i.flag.mali:before { background-position: -36px -1691px; } + i.flag.mm:before, i.flag.myanmar:before, i.flag.burma:before { background-position: -73px -1821px; } + i.flag.mn:before, i.flag.mongolia:before { background-position: -36px -1743px; } + i.flag.mo:before, i.flag.macau:before { background-position: -36px -1769px; } + i.flag.mp:before, i.flag.northern.mariana.islands:before { background-position: -36px -1795px; } + i.flag.mq:before, i.flag.martinique:before { background-position: -36px -1821px; } + i.flag.mr:before, i.flag.mauritania:before { background-position: -36px -1847px; } + i.flag.ms:before, i.flag.montserrat:before { background-position: -36px -1873px; } + i.flag.mt:before, i.flag.malta:before { background-position: -36px -1899px; } + i.flag.mu:before, i.flag.mauritius:before { background-position: -36px -1925px; } + i.flag.mv:before, i.flag.maldives:before { background-position: -36px -1951px; } + i.flag.mw:before, i.flag.malawi:before { background-position: -36px -1977px; } + i.flag.mx:before, i.flag.mexico:before { background-position: -72px 0px; } + i.flag.my:before, i.flag.malaysia:before { background-position: -72px -26px; } + i.flag.mz:before, i.flag.mozambique:before { background-position: -72px -52px; } + i.flag.na:before, i.flag.namibia:before { background-position: -72px -78px; } + i.flag.nc:before, i.flag.new.caledonia:before { background-position: -72px -104px; } + i.flag.ne:before, i.flag.niger:before { background-position: -72px -130px; } + i.flag.nf:before, i.flag.norfolk.island:before { background-position: -72px -156px; } + i.flag.ng:before, i.flag.nigeria:before { background-position: -72px -182px; } + i.flag.ni:before, i.flag.nicaragua:before { background-position: -72px -208px; } + i.flag.nl:before, i.flag.netherlands:before { background-position: -72px -234px; } + i.flag.no:before, i.flag.norway:before { background-position: -72px -260px; } + i.flag.np:before, i.flag.nepal:before { background-position: -72px -286px; } + i.flag.nr:before, i.flag.nauru:before { background-position: -72px -312px; } + i.flag.nu:before, i.flag.niue:before { background-position: -72px -338px; } + i.flag.nz:before, i.flag.new.zealand:before { background-position: -72px -364px; } + i.flag.om:before, i.flag.oman:before { background-position: -72px -390px; } + i.flag.pa:before, i.flag.panama:before { background-position: -72px -416px; } + i.flag.pe:before, i.flag.peru:before { background-position: -72px -442px; } + i.flag.pf:before, i.flag.french.polynesia:before { background-position: -72px -468px; } + i.flag.pg:before, i.flag.new.guinea:before { background-position: -72px -494px; } + i.flag.ph:before, i.flag.philippines:before { background-position: -72px -520px; } + i.flag.pk:before, i.flag.pakistan:before { background-position: -72px -546px; } + i.flag.pl:before, i.flag.poland:before { background-position: -72px -572px; } + i.flag.pm:before, i.flag.saint.pierre:before { background-position: -72px -598px; } + i.flag.pn:before, i.flag.pitcairn.islands:before { background-position: -72px -624px; } + i.flag.pr:before, i.flag.puerto.rico:before { background-position: -72px -650px; } + i.flag.ps:before, i.flag.palestine:before { background-position: -72px -676px; } + i.flag.pt:before, i.flag.portugal:before { background-position: -72px -702px; } + i.flag.pw:before, i.flag.palau:before { background-position: -72px -728px; } + i.flag.py:before, i.flag.paraguay:before { background-position: -72px -754px; } + i.flag.qa:before, i.flag.qatar:before { background-position: -72px -780px; } + i.flag.re:before, i.flag.reunion:before { background-position: -72px -806px; } + i.flag.ro:before, i.flag.romania:before { background-position: -72px -832px; } + i.flag.rs:before, i.flag.serbia:before { background-position: -72px -858px; } + i.flag.ru:before, i.flag.russia:before { background-position: -72px -884px; } + i.flag.rw:before, i.flag.rwanda:before { background-position: -72px -910px; } + i.flag.sa:before, i.flag.saudi.arabia:before { background-position: -72px -936px; } + i.flag.sb:before, i.flag.solomon.islands:before { background-position: -72px -962px; } + i.flag.sc:before, i.flag.seychelles:before { background-position: -72px -988px; } + i.flag.gb.sct:before, i.flag.scotland:before { background-position: -72px -1014px; } + i.flag.sd:before, i.flag.sudan:before { background-position: -72px -1040px; } + i.flag.se:before, i.flag.sweden:before { background-position: -72px -1066px; } + i.flag.sg:before, i.flag.singapore:before { background-position: -72px -1092px; } + i.flag.sh:before, i.flag.saint.helena:before { background-position: -72px -1118px; } + i.flag.si:before, i.flag.slovenia:before { background-position: -72px -1144px; } + i.flag.sj:before, i.flag.svalbard:before, i.flag.jan.mayen:before { background-position: -72px -1170px; } + i.flag.sk:before, i.flag.slovakia:before { background-position: -72px -1196px; } + i.flag.sl:before, i.flag.sierra.leone:before { background-position: -72px -1222px; } + i.flag.sm:before, i.flag.san.marino:before { background-position: -72px -1248px; } + i.flag.sn:before, i.flag.senegal:before { background-position: -72px -1274px; } + i.flag.so:before, i.flag.somalia:before { background-position: -72px -1300px; } + i.flag.sr:before, i.flag.suriname:before { background-position: -72px -1326px; } + i.flag.st:before, i.flag.sao.tome:before { background-position: -72px -1352px; } + i.flag.sv:before, i.flag.el.salvador:before { background-position: -72px -1378px; } + i.flag.sy:before, i.flag.syria:before { background-position: -72px -1404px; } + i.flag.sz:before, i.flag.swaziland:before { background-position: -72px -1430px; } + i.flag.tc:before, i.flag.caicos.islands:before { background-position: -72px -1456px; } + i.flag.td:before, i.flag.chad:before { background-position: -72px -1482px; } + i.flag.tf:before, i.flag.french.territories:before { background-position: -72px -1508px; } + i.flag.tg:before, i.flag.togo:before { background-position: -72px -1534px; } + i.flag.th:before, i.flag.thailand:before { background-position: -72px -1560px; } + i.flag.tj:before, i.flag.tajikistan:before { background-position: -72px -1586px; } + i.flag.tk:before, i.flag.tokelau:before { background-position: -72px -1612px; } + i.flag.tl:before, i.flag.timorleste:before { background-position: -72px -1638px; } + i.flag.tm:before, i.flag.turkmenistan:before { background-position: -72px -1664px; } + i.flag.tn:before, i.flag.tunisia:before { background-position: -72px -1690px; } + i.flag.to:before, i.flag.tonga:before { background-position: -72px -1716px; } + i.flag.tr:before, i.flag.turkey:before { background-position: -72px -1742px; } + i.flag.tt:before, i.flag.trinidad:before { background-position: -72px -1768px; } + i.flag.tv:before, i.flag.tuvalu:before { background-position: -72px -1794px; } + i.flag.tw:before, i.flag.taiwan:before { background-position: -72px -1820px; } + i.flag.tz:before, i.flag.tanzania:before { background-position: -72px -1846px; } + i.flag.ua:before, i.flag.ukraine:before { background-position: -72px -1872px; } + i.flag.ug:before, i.flag.uganda:before { background-position: -72px -1898px; } + i.flag.um:before, i.flag.us.minor.islands:before { background-position: -72px -1924px; } + i.flag.us:before, i.flag.america:before, i.flag.united.states:before { background-position: -72px -1950px; } + i.flag.uy:before, i.flag.uruguay:before { background-position: -72px -1976px; } + i.flag.uz:before, i.flag.uzbekistan:before { background-position: -108px 0px; } + i.flag.va:before, i.flag.vatican.city:before { background-position: -108px -26px; } + i.flag.vc:before, i.flag.saint.vincent:before { background-position: -108px -52px; } + i.flag.ve:before, i.flag.venezuela:before { background-position: -108px -78px; } + i.flag.vg:before, i.flag.british.virgin.islands:before { background-position: -108px -104px; } + i.flag.vi:before, i.flag.us.virgin.islands:before { background-position: -108px -130px; } + i.flag.vn:before, i.flag.vietnam:before { background-position: -108px -156px; } + i.flag.vu:before, i.flag.vanuatu:before { background-position: -108px -182px; } + i.flag.gb.wls:before, i.flag.wales:before { background-position: -108px -208px; } + i.flag.wf:before, i.flag.wallis.and.futuna:before { background-position: -108px -234px; } + i.flag.ws:before, i.flag.samoa:before { background-position: -108px -260px; } + i.flag.ye:before, i.flag.yemen:before { background-position: -108px -286px; } + i.flag.yt:before, i.flag.mayotte:before { background-position: -108px -312px; } + i.flag.za:before, i.flag.south.africa:before { background-position: -108px -338px; } + i.flag.zm:before, i.flag.zambia:before { background-position: -108px -364px; } + i.flag.zw:before, i.flag.zimbabwe:before { background-position: -108px -390px; diff --git a/src/theme/site/elements/header.overrides b/src/theme/site/elements/header.overrides index 6ec3784..3ad8b75 100644 --- a/src/theme/site/elements/header.overrides +++ b/src/theme/site/elements/header.overrides @@ -15,19 +15,19 @@ } .ui.menu { + height: 100%; flex-wrap: wrap; margin-top: 0; - height: 100%; .item { + color: rgba(255, 255, 255, 0.8); text-decoration: none; text-transform: uppercase; - color: rgba(255, 255, 255, 0.8); &.active { + background: transparent; color: rgba(255, 255, 255, 1); font-weight: bold; - background: transparent; } &:hover { @@ -45,7 +45,7 @@ .header-partner-section { > * { - display: inline-block; + display: inline-block; } } @@ -69,4 +69,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/theme/site/elements/icon.overrides b/src/theme/site/elements/icon.overrides index 2befad7..df31c27 100644 --- a/src/theme/site/elements/icon.overrides +++ b/src/theme/site/elements/icon.overrides @@ -26,1188 +26,4692 @@ for instance `lemon icon` not `lemon outline icon` since there is only one lemon *******************************/ - /******************************* Icons *******************************/ /* Deprecated *In/Out Naming Conflict) */ -i.icon.linkedin.in:before { content: "\f0e1"; } -i.icon.zoom.in:before { content: "\f00e"; } -i.icon.zoom.out:before { content: "\f010"; } -i.icon.sign.in:before { content: "\f2f6"; } -i.icon.in.cart:before { content: "\f218"; } -i.icon.log.out:before { content: "\f2f5"; } -i.icon.sign.out:before { content: "\f2f5"; } +i.icon.linkedin.in:before { + content: '\f0e1'; +} + +i.icon.zoom.in:before { + content: '\f00e'; +} + +i.icon.zoom.out:before { + content: '\f010'; +} + +i.icon.sign.in:before { + content: '\f2f6'; +} + +i.icon.in.cart:before { + content: '\f218'; +} + +i.icon.log.out:before { + content: '\f2f5'; +} + +i.icon.sign.out:before { + content: '\f2f5'; +} + +/* Icons */ +i.icon.\35 00px:before { + content: '\f26e'; +} + +i.icon.accessible.icon:before { + content: '\f368'; +} + +i.icon.accusoft:before { + content: '\f369'; +} + +i.icon.address.book:before { + content: '\f2b9'; +} + +i.icon.address.card:before { + content: '\f2bb'; +} + +i.icon.adjust:before { + content: '\f042'; +} + +i.icon.adn:before { + content: '\f170'; +} + +i.icon.adversal:before { + content: '\f36a'; +} + +i.icon.affiliatetheme:before { + content: '\f36b'; +} + +i.icon.algolia:before { + content: '\f36c'; +} + +i.icon.align.center:before { + content: '\f037'; +} + +i.icon.align.justify:before { + content: '\f039'; +} + +i.icon.align.left:before { + content: '\f036'; +} + +i.icon.align.right:before { + content: '\f038'; +} + +i.icon.amazon:before { + content: '\f270'; +} + +i.icon.amazon.pay:before { + content: '\f42c'; +} + +i.icon.ambulance:before { + content: '\f0f9'; +} + +i.icon.american.sign.language.interpreting:before { + content: '\f2a3'; +} + +i.icon.amilia:before { + content: '\f36d'; +} + +i.icon.anchor:before { + content: '\f13d'; +} + +i.icon.android:before { + content: '\f17b'; +} + +i.icon.angellist:before { + content: '\f209'; +} + +i.icon.angle.double.down:before { + content: '\f103'; +} + +i.icon.angle.double.left:before { + content: '\f100'; +} + +i.icon.angle.double.right:before { + content: '\f101'; +} + +i.icon.angle.double.up:before { + content: '\f102'; +} + +i.icon.angle.down:before { + content: '\f107'; +} + +i.icon.angle.left:before { + content: '\f104'; +} + +i.icon.angle.right:before { + content: '\f105'; +} + +i.icon.angle.up:before { + content: '\f106'; +} + +i.icon.angrycreative:before { + content: '\f36e'; +} + +i.icon.angular:before { + content: '\f420'; +} + +i.icon.app.store:before { + content: '\f36f'; +} + +i.icon.app.store.ios:before { + content: '\f370'; +} + +i.icon.apper:before { + content: '\f371'; +} + +i.icon.apple:before { + content: '\f179'; +} + +i.icon.apple.pay:before { + content: '\f415'; +} + +i.icon.archive:before { + content: '\f187'; +} + +i.icon.arrow.alternate.circle.down:before { + content: '\f358'; +} + +i.icon.arrow.alternate.circle.left:before { + content: '\f359'; +} + +i.icon.arrow.alternate.circle.right:before { + content: '\f35a'; +} + +i.icon.arrow.alternate.circle.up:before { + content: '\f35b'; +} + +i.icon.arrow.circle.down:before { + content: '\f0ab'; +} + +i.icon.arrow.circle.left:before { + content: '\f0a8'; +} + +i.icon.arrow.circle.right:before { + content: '\f0a9'; +} + +i.icon.arrow.circle.up:before { + content: '\f0aa'; +} + +i.icon.arrow.down:before { + content: '\f063'; +} + +i.icon.arrow.left:before { + content: '\f060'; +} + +i.icon.arrow.right:before { + content: '\f061'; +} + +i.icon.arrow.up:before { + content: '\f062'; +} + +i.icon.arrows.alternate:before { + content: '\f0b2'; +} + +i.icon.arrows.alternate.horizontal:before { + content: '\f337'; +} + +i.icon.arrows.alternate.vertical:before { + content: '\f338'; +} + +i.icon.assistive.listening.systems:before { + content: '\f2a2'; +} + +i.icon.asterisk:before { + content: '\f069'; +} + +i.icon.asymmetrik:before { + content: '\f372'; +} + +i.icon.at:before { + content: '\f1fa'; +} + +i.icon.audible:before { + content: '\f373'; +} + +i.icon.audio.description:before { + content: '\f29e'; +} + +i.icon.autoprefixer:before { + content: '\f41c'; +} + +i.icon.avianex:before { + content: '\f374'; +} + +i.icon.aviato:before { + content: '\f421'; +} + +i.icon.aws:before { + content: '\f375'; +} + +i.icon.backward:before { + content: '\f04a'; +} + +i.icon.balance.scale:before { + content: '\f24e'; +} + +i.icon.ban:before { + content: '\f05e'; +} + +i.icon.band.aid:before { + content: '\f462'; +} + +i.icon.bandcamp:before { + content: '\f2d5'; +} + +i.icon.barcode:before { + content: '\f02a'; +} + +i.icon.bars:before { + content: '\f0c9'; +} + +i.icon.baseball.ball:before { + content: '\f433'; +} + +i.icon.basketball.ball:before { + content: '\f434'; +} + +i.icon.bath:before { + content: '\f2cd'; +} + +i.icon.battery.empty:before { + content: '\f244'; +} + +i.icon.battery.full:before { + content: '\f240'; +} + +i.icon.battery.half:before { + content: '\f242'; +} + +i.icon.battery.quarter:before { + content: '\f243'; +} + +i.icon.battery.three.quarters:before { + content: '\f241'; +} + +i.icon.bed:before { + content: '\f236'; +} + +i.icon.beer:before { + content: '\f0fc'; +} + +i.icon.behance:before { + content: '\f1b4'; +} + +i.icon.behance.square:before { + content: '\f1b5'; +} + +i.icon.bell:before { + content: '\f0f3'; +} + +i.icon.bell.slash:before { + content: '\f1f6'; +} + +i.icon.bicycle:before { + content: '\f206'; +} + +i.icon.bimobject:before { + content: '\f378'; +} + +i.icon.binoculars:before { + content: '\f1e5'; +} + +i.icon.birthday.cake:before { + content: '\f1fd'; +} + +i.icon.bitbucket:before { + content: '\f171'; +} + +i.icon.bitcoin:before { + content: '\f379'; +} + +i.icon.bity:before { + content: '\f37a'; +} + +i.icon.black.tie:before { + content: '\f27e'; +} + +i.icon.blackberry:before { + content: '\f37b'; +} + +i.icon.blind:before { + content: '\f29d'; +} + +i.icon.blogger:before { + content: '\f37c'; +} + +i.icon.blogger.b:before { + content: '\f37d'; +} + +i.icon.bluetooth:before { + content: '\f293'; +} + +i.icon.bluetooth.b:before { + content: '\f294'; +} + +i.icon.bold:before { + content: '\f032'; +} + +i.icon.bolt:before { + content: '\f0e7'; +} + +i.icon.bomb:before { + content: '\f1e2'; +} + +i.icon.book:before { + content: '\f02d'; +} + +i.icon.bookmark:before { + content: '\f02e'; +} + +i.icon.bowling.ball:before { + content: '\f436'; +} + +i.icon.box:before { + content: '\f466'; +} + +i.icon.boxes:before { + content: '\f468'; +} + +i.icon.braille:before { + content: '\f2a1'; +} + +i.icon.briefcase:before { + content: '\f0b1'; +} + +i.icon.btc:before { + content: '\f15a'; +} + +i.icon.bug:before { + content: '\f188'; +} + +i.icon.building:before { + content: '\f1ad'; +} + +i.icon.bullhorn:before { + content: '\f0a1'; +} + +i.icon.bullseye:before { + content: '\f140'; +} + +i.icon.buromobelexperte:before { + content: '\f37f'; +} + +i.icon.bus:before { + content: '\f207'; +} + +i.icon.buysellads:before { + content: '\f20d'; +} + +i.icon.calculator:before { + content: '\f1ec'; +} + +i.icon.calendar:before { + content: '\f133'; +} + +i.icon.calendar.alternate:before { + content: '\f073'; +} + +i.icon.calendar.check:before { + content: '\f274'; +} + +i.icon.calendar.minus:before { + content: '\f272'; +} + +i.icon.calendar.plus:before { + content: '\f271'; +} + +i.icon.calendar.times:before { + content: '\f273'; +} + +i.icon.camera:before { + content: '\f030'; +} + +i.icon.camera.retro:before { + content: '\f083'; +} + +i.icon.car:before { + content: '\f1b9'; +} + +i.icon.caret.down:before { + content: '\f0d7'; +} + +i.icon.caret.left:before { + content: '\f0d9'; +} + +i.icon.caret.right:before { + content: '\f0da'; +} + +i.icon.caret.square.down:before { + content: '\f150'; +} + +i.icon.caret.square.left:before { + content: '\f191'; +} + +i.icon.caret.square.right:before { + content: '\f152'; +} + +i.icon.caret.square.up:before { + content: '\f151'; +} + +i.icon.caret.up:before { + content: '\f0d8'; +} + +i.icon.cart.arrow.down:before { + content: '\f218'; +} + +i.icon.cart.plus:before { + content: '\f217'; +} + +i.icon.cc.amazon.pay:before { + content: '\f42d'; +} + +i.icon.cc.amex:before { + content: '\f1f3'; +} + +i.icon.cc.apple.pay:before { + content: '\f416'; +} + +i.icon.cc.diners.club:before { + content: '\f24c'; +} + +i.icon.cc.discover:before { + content: '\f1f2'; +} + +i.icon.cc.jcb:before { + content: '\f24b'; +} + +i.icon.cc.mastercard:before { + content: '\f1f1'; +} + +i.icon.cc.paypal:before { + content: '\f1f4'; +} + +i.icon.cc.stripe:before { + content: '\f1f5'; +} + +i.icon.cc.visa:before { + content: '\f1f0'; +} + +i.icon.centercode:before { + content: '\f380'; +} + +i.icon.certificate:before { + content: '\f0a3'; +} + +i.icon.chart.area:before { + content: '\f1fe'; +} + +i.icon.chart.bar:before { + content: '\f080'; +} + +i.icon.chart.line:before { + content: '\f201'; +} + +i.icon.chart.pie:before { + content: '\f200'; +} + +i.icon.check:before { + content: '\f00c'; +} + +i.icon.check.circle:before { + content: '\f058'; +} + +i.icon.check.square:before { + content: '\f14a'; +} + +i.icon.chess:before { + content: '\f439'; +} + +i.icon.chess.bishop:before { + content: '\f43a'; +} + +i.icon.chess.board:before { + content: '\f43c'; +} + +i.icon.chess.king:before { + content: '\f43f'; +} + +i.icon.chess.knight:before { + content: '\f441'; +} + +i.icon.chess.pawn:before { + content: '\f443'; +} + +i.icon.chess.queen:before { + content: '\f445'; +} + +i.icon.chess.rook:before { + content: '\f447'; +} + +i.icon.chevron.circle.down:before { + content: '\f13a'; +} + +i.icon.chevron.circle.left:before { + content: '\f137'; +} + +i.icon.chevron.circle.right:before { + content: '\f138'; +} + +i.icon.chevron.circle.up:before { + content: '\f139'; +} + +i.icon.chevron.down:before { + content: '\f078'; +} + +i.icon.chevron.left:before { + content: '\f053'; +} + +i.icon.chevron.right:before { + content: '\f054'; +} + +i.icon.chevron.up:before { + content: '\f077'; +} + +i.icon.child:before { + content: '\f1ae'; +} + +i.icon.chrome:before { + content: '\f268'; +} + +i.icon.circle:before { + content: '\f111'; +} + +i.icon.circle.notch:before { + content: '\f1ce'; +} + +i.icon.clipboard:before { + content: '\f328'; +} + +i.icon.clipboard.check:before { + content: '\f46c'; +} + +i.icon.clipboard.list:before { + content: '\f46d'; +} + +i.icon.clock:before { + content: '\f017'; +} + +i.icon.clone:before { + content: '\f24d'; +} + +i.icon.closed.captioning:before { + content: '\f20a'; +} + +i.icon.cloud:before { + content: '\f0c2'; +} + +i.icon.cloudscale:before { + content: '\f383'; +} + +i.icon.cloudsmith:before { + content: '\f384'; +} + +i.icon.cloudversify:before { + content: '\f385'; +} + +i.icon.code:before { + content: '\f121'; +} + +i.icon.code.branch:before { + content: '\f126'; +} + +i.icon.codepen:before { + content: '\f1cb'; +} + +i.icon.codiepie:before { + content: '\f284'; +} + +i.icon.coffee:before { + content: '\f0f4'; +} + +i.icon.cog:before { + content: '\f013'; +} + +i.icon.cogs:before { + content: '\f085'; +} + +i.icon.columns:before { + content: '\f0db'; +} + +i.icon.comment:before { + content: '\f075'; +} + +i.icon.comment.alternate:before { + content: '\f27a'; +} + +i.icon.comments:before { + content: '\f086'; +} + +i.icon.compass:before { + content: '\f14e'; +} + +i.icon.compress:before { + content: '\f066'; +} + +i.icon.connectdevelop:before { + content: '\f20e'; +} + +i.icon.contao:before { + content: '\f26d'; +} + +i.icon.copy:before { + content: '\f0c5'; +} + +i.icon.copyright:before { + content: '\f1f9'; +} + +i.icon.cpanel:before { + content: '\f388'; +} + +i.icon.creative.commons:before { + content: '\f25e'; +} + +i.icon.credit.card:before { + content: '\f09d'; +} + +i.icon.crop:before { + content: '\f125'; +} + +i.icon.crosshairs:before { + content: '\f05b'; +} + +i.icon.css3:before { + content: '\f13c'; +} + +i.icon.css3.alternate:before { + content: '\f38b'; +} + +i.icon.cube:before { + content: '\f1b2'; +} + +i.icon.cubes:before { + content: '\f1b3'; +} + +i.icon.cut:before { + content: '\f0c4'; +} + +i.icon.cuttlefish:before { + content: '\f38c'; +} + +i.icon.d.and.d:before { + content: '\f38d'; +} + +i.icon.dashcube:before { + content: '\f210'; +} + +i.icon.database:before { + content: '\f1c0'; +} + +i.icon.deaf:before { + content: '\f2a4'; +} + +i.icon.delicious:before { + content: '\f1a5'; +} + +i.icon.deploydog:before { + content: '\f38e'; +} + +i.icon.deskpro:before { + content: '\f38f'; +} + +i.icon.desktop:before { + content: '\f108'; +} + +i.icon.deviantart:before { + content: '\f1bd'; +} + +i.icon.digg:before { + content: '\f1a6'; +} + +i.icon.digital.ocean:before { + content: '\f391'; +} + +i.icon.discord:before { + content: '\f392'; +} + +i.icon.discourse:before { + content: '\f393'; +} + +i.icon.dna:before { + content: '\f471'; +} + +i.icon.dochub:before { + content: '\f394'; +} + +i.icon.docker:before { + content: '\f395'; +} + +i.icon.dollar.sign:before { + content: '\f155'; +} + +i.icon.dolly:before { + content: '\f472'; +} + +i.icon.dolly.flatbed:before { + content: '\f474'; +} + +i.icon.dot.circle:before { + content: '\f192'; +} + +i.icon.download:before { + content: '\f019'; +} + +i.icon.draft2digital:before { + content: '\f396'; +} + +i.icon.dribbble:before { + content: '\f17d'; +} + +i.icon.dribbble.square:before { + content: '\f397'; +} + +i.icon.dropbox:before { + content: '\f16b'; +} + +i.icon.drupal:before { + content: '\f1a9'; +} + +i.icon.dyalog:before { + content: '\f399'; +} + +i.icon.earlybirds:before { + content: '\f39a'; +} + +i.icon.edge:before { + content: '\f282'; +} + +i.icon.edit:before { + content: '\f044'; +} + +i.icon.eject:before { + content: '\f052'; +} + +i.icon.elementor:before { + content: '\f430'; +} + +i.icon.ellipsis.horizontal:before { + content: '\f141'; +} + +i.icon.ellipsis.vertical:before { + content: '\f142'; +} + +i.icon.ember:before { + content: '\f423'; +} + +i.icon.empire:before { + content: '\f1d1'; +} + +i.icon.envelope:before { + content: '\f0e0'; +} + +i.icon.envelope.open:before { + content: '\f2b6'; +} + +i.icon.envelope.square:before { + content: '\f199'; +} + +i.icon.envira:before { + content: '\f299'; +} + +i.icon.eraser:before { + content: '\f12d'; +} + +i.icon.erlang:before { + content: '\f39d'; +} + +i.icon.ethereum:before { + content: '\f42e'; +} + +i.icon.etsy:before { + content: '\f2d7'; +} + +i.icon.euro.sign:before { + content: '\f153'; +} + +i.icon.exchange.alternate:before { + content: '\f362'; +} + +i.icon.exclamation:before { + content: '\f12a'; +} + +i.icon.exclamation.circle:before { + content: '\f06a'; +} + +i.icon.exclamation.triangle:before { + content: '\f071'; +} + +i.icon.expand:before { + content: '\f065'; +} + +i.icon.expand.arrows.alternate:before { + content: '\f31e'; +} + +i.icon.expeditedssl:before { + content: '\f23e'; +} + +i.icon.external.alternate:before { + content: '\f35d'; +} + +i.icon.external.square.alternate:before { + content: '\f360'; +} + +i.icon.eye:before { + content: '\f06e'; +} + +i.icon.eye.dropper:before { + content: '\f1fb'; +} + +i.icon.eye.slash:before { + content: '\f070'; +} + +i.icon.facebook:before { + content: '\f09a'; +} + +i.icon.facebook.f:before { + content: '\f39e'; +} + +i.icon.facebook.messenger:before { + content: '\f39f'; +} + +i.icon.facebook.square:before { + content: '\f082'; +} + +i.icon.fast.backward:before { + content: '\f049'; +} + +i.icon.fast.forward:before { + content: '\f050'; +} + +i.icon.fax:before { + content: '\f1ac'; +} + +i.icon.female:before { + content: '\f182'; +} + +i.icon.fighter.jet:before { + content: '\f0fb'; +} + +i.icon.file:before { + content: '\f15b'; +} + +i.icon.file.alternate:before { + content: '\f15c'; +} + +i.icon.file.archive:before { + content: '\f1c6'; +} + +i.icon.file.audio:before { + content: '\f1c7'; +} + +i.icon.file.code:before { + content: '\f1c9'; +} + +i.icon.file.excel:before { + content: '\f1c3'; +} + +i.icon.file.image:before { + content: '\f1c5'; +} + +i.icon.file.pdf:before { + content: '\f1c1'; +} + +i.icon.file.powerpoint:before { + content: '\f1c4'; +} + +i.icon.file.video:before { + content: '\f1c8'; +} + +i.icon.file.word:before { + content: '\f1c2'; +} + +i.icon.film:before { + content: '\f008'; +} + +i.icon.filter:before { + content: '\f0b0'; +} + +i.icon.fire:before { + content: '\f06d'; +} + +i.icon.fire.extinguisher:before { + content: '\f134'; +} + +i.icon.firefox:before { + content: '\f269'; +} + +i.icon.first.aid:before { + content: '\f479'; +} + +i.icon.first.order:before { + content: '\f2b0'; +} + +i.icon.firstdraft:before { + content: '\f3a1'; +} + +i.icon.flag:before { + content: '\f024'; +} + +i.icon.flag.checkered:before { + content: '\f11e'; +} + +i.icon.flask:before { + content: '\f0c3'; +} + +i.icon.flickr:before { + content: '\f16e'; +} + +i.icon.flipboard:before { + content: '\f44d'; +} + +i.icon.fly:before { + content: '\f417'; +} + +i.icon.folder:before { + content: '\f07b'; +} + +i.icon.folder.open:before { + content: '\f07c'; +} + +i.icon.font:before { + content: '\f031'; +} + +i.icon.font.awesome:before { + content: '\f2b4'; +} + +i.icon.font.awesome.alternate:before { + content: '\f35c'; +} + +i.icon.font.awesome.flag:before { + content: '\f425'; +} + +i.icon.fonticons:before { + content: '\f280'; +} + +i.icon.fonticons.fi:before { + content: '\f3a2'; +} + +i.icon.football.ball:before { + content: '\f44e'; +} + +i.icon.fort.awesome:before { + content: '\f286'; +} + +i.icon.fort.awesome.alternate:before { + content: '\f3a3'; +} + +i.icon.forumbee:before { + content: '\f211'; +} + +i.icon.forward:before { + content: '\f04e'; +} + +i.icon.foursquare:before { + content: '\f180'; +} + +i.icon.free.code.camp:before { + content: '\f2c5'; +} + +i.icon.freebsd:before { + content: '\f3a4'; +} + +i.icon.frown:before { + content: '\f119'; +} + +i.icon.futbol:before { + content: '\f1e3'; +} + +i.icon.gamepad:before { + content: '\f11b'; +} + +i.icon.gavel:before { + content: '\f0e3'; +} + +i.icon.gem:before { + content: '\f3a5'; +} + +i.icon.genderless:before { + content: '\f22d'; +} + +i.icon.get.pocket:before { + content: '\f265'; +} + +i.icon.gg:before { + content: '\f260'; +} + +i.icon.gg.circle:before { + content: '\f261'; +} + +i.icon.gift:before { + content: '\f06b'; +} + +i.icon.git:before { + content: '\f1d3'; +} + +i.icon.git.square:before { + content: '\f1d2'; +} + +i.icon.github:before { + content: '\f09b'; +} + +i.icon.github.alternate:before { + content: '\f113'; +} + +i.icon.github.square:before { + content: '\f092'; +} + +i.icon.gitkraken:before { + content: '\f3a6'; +} + +i.icon.gitlab:before { + content: '\f296'; +} + +i.icon.gitter:before { + content: '\f426'; +} + +i.icon.glass.martini:before { + content: '\f000'; +} + +i.icon.glide:before { + content: '\f2a5'; +} + +i.icon.glide.g:before { + content: '\f2a6'; +} + +i.icon.globe:before { + content: '\f0ac'; +} + +i.icon.gofore:before { + content: '\f3a7'; +} + +i.icon.golf.ball:before { + content: '\f450'; +} + +i.icon.goodreads:before { + content: '\f3a8'; +} + +i.icon.goodreads.g:before { + content: '\f3a9'; +} + +i.icon.google:before { + content: '\f1a0'; +} + +i.icon.google.drive:before { + content: '\f3aa'; +} + +i.icon.google.play:before { + content: '\f3ab'; +} + +i.icon.google.plus:before { + content: '\f2b3'; +} + +i.icon.google.plus.g:before { + content: '\f0d5'; +} + +i.icon.google.plus.square:before { + content: '\f0d4'; +} + +i.icon.google.wallet:before { + content: '\f1ee'; +} + +i.icon.graduation.cap:before { + content: '\f19d'; +} + +i.icon.gratipay:before { + content: '\f184'; +} + +i.icon.grav:before { + content: '\f2d6'; +} + +i.icon.gripfire:before { + content: '\f3ac'; +} + +i.icon.grunt:before { + content: '\f3ad'; +} + +i.icon.gulp:before { + content: '\f3ae'; +} + +i.icon.h.square:before { + content: '\f0fd'; +} + +i.icon.hacker.news:before { + content: '\f1d4'; +} + +i.icon.hacker.news.square:before { + content: '\f3af'; +} + +i.icon.hand.lizard:before { + content: '\f258'; +} + +i.icon.hand.paper:before { + content: '\f256'; +} + +i.icon.hand.peace:before { + content: '\f25b'; +} + +i.icon.hand.point.down:before { + content: '\f0a7'; +} + +i.icon.hand.point.left:before { + content: '\f0a5'; +} + +i.icon.hand.point.right:before { + content: '\f0a4'; +} + +i.icon.hand.point.up:before { + content: '\f0a6'; +} + +i.icon.hand.pointer:before { + content: '\f25a'; +} + +i.icon.hand.rock:before { + content: '\f255'; +} + +i.icon.hand.scissors:before { + content: '\f257'; +} + +i.icon.hand.spock:before { + content: '\f259'; +} + +i.icon.handshake:before { + content: '\f2b5'; +} + +i.icon.hashtag:before { + content: '\f292'; +} + +i.icon.hdd:before { + content: '\f0a0'; +} + +i.icon.heading:before { + content: '\f1dc'; +} + +i.icon.headphones:before { + content: '\f025'; +} + +i.icon.heart:before { + content: '\f004'; +} + +i.icon.heartbeat:before { + content: '\f21e'; +} + +i.icon.hips:before { + content: '\f452'; +} + +i.icon.hire.a.helper:before { + content: '\f3b0'; +} + +i.icon.history:before { + content: '\f1da'; +} + +i.icon.hockey.puck:before { + content: '\f453'; +} + +i.icon.home:before { + content: '\f015'; +} + +i.icon.hooli:before { + content: '\f427'; +} + +i.icon.hospital:before { + content: '\f0f8'; +} + +i.icon.hospital.symbol:before { + content: '\f47e'; +} + +i.icon.hotjar:before { + content: '\f3b1'; +} + +i.icon.hourglass:before { + content: '\f254'; +} + +i.icon.hourglass.end:before { + content: '\f253'; +} + +i.icon.hourglass.half:before { + content: '\f252'; +} + +i.icon.hourglass.start:before { + content: '\f251'; +} + +i.icon.houzz:before { + content: '\f27c'; +} + +i.icon.html5:before { + content: '\f13b'; +} + +i.icon.hubspot:before { + content: '\f3b2'; +} + +i.icon.i.cursor:before { + content: '\f246'; +} + +i.icon.id.badge:before { + content: '\f2c1'; +} + +i.icon.id.card:before { + content: '\f2c2'; +} + +i.icon.image:before { + content: '\f03e'; +} + +i.icon.images:before { + content: '\f302'; +} + +i.icon.imdb:before { + content: '\f2d8'; +} + +i.icon.inbox:before { + content: '\f01c'; +} + +i.icon.indent:before { + content: '\f03c'; +} + +i.icon.industry:before { + content: '\f275'; +} + +i.icon.info:before { + content: '\f129'; +} + +i.icon.info.circle:before { + content: '\f05a'; +} + +i.icon.instagram:before { + content: '\f16d'; +} + +i.icon.internet.explorer:before { + content: '\f26b'; +} + +i.icon.ioxhost:before { + content: '\f208'; +} + +i.icon.italic:before { + content: '\f033'; +} + +i.icon.itunes:before { + content: '\f3b4'; +} + +i.icon.itunes.note:before { + content: '\f3b5'; +} + +i.icon.jenkins:before { + content: '\f3b6'; +} + +i.icon.joget:before { + content: '\f3b7'; +} + +i.icon.joomla:before { + content: '\f1aa'; +} + +i.icon.js:before { + content: '\f3b8'; +} + +i.icon.js.square:before { + content: '\f3b9'; +} + +i.icon.jsfiddle:before { + content: '\f1cc'; +} + +i.icon.key:before { + content: '\f084'; +} + +i.icon.keyboard:before { + content: '\f11c'; +} + +i.icon.keycdn:before { + content: '\f3ba'; +} + +i.icon.kickstarter:before { + content: '\f3bb'; +} + +i.icon.kickstarter.k:before { + content: '\f3bc'; +} + +i.icon.korvue:before { + content: '\f42f'; +} + +i.icon.language:before { + content: '\f1ab'; +} + +i.icon.laptop:before { + content: '\f109'; +} + +i.icon.laravel:before { + content: '\f3bd'; +} + +i.icon.lastfm:before { + content: '\f202'; +} + +i.icon.lastfm.square:before { + content: '\f203'; +} + +i.icon.leaf:before { + content: '\f06c'; +} + +i.icon.leanpub:before { + content: '\f212'; +} + +i.icon.lemon:before { + content: '\f094'; +} + +i.icon.less:before { + content: '\f41d'; +} + +i.icon.level.down.alternate:before { + content: '\f3be'; +} + +i.icon.level.up.alternate:before { + content: '\f3bf'; +} + +i.icon.life.ring:before { + content: '\f1cd'; +} + +i.icon.lightbulb:before { + content: '\f0eb'; +} + +i.icon.linechat:before { + content: '\f3c0'; +} + +i.icon.linkify:before { + content: '\f0c1'; +} + +i.icon.linkedin:before { + content: '\f08c'; +} + +i.icon.linkedin.alt:before { + content: '\f0e1'; +} + +i.icon.linode:before { + content: '\f2b8'; +} + +i.icon.linux:before { + content: '\f17c'; +} + +i.icon.lira.sign:before { + content: '\f195'; +} + +i.icon.list:before { + content: '\f03a'; +} + +i.icon.list.alternate:before { + content: '\f022'; +} + +i.icon.list.ol:before { + content: '\f0cb'; +} + +i.icon.list.ul:before { + content: '\f0ca'; +} + +i.icon.location.arrow:before { + content: '\f124'; +} + +i.icon.lock:before { + content: '\f023'; +} + +i.icon.lock.open:before { + content: '\f3c1'; +} + +i.icon.long.arrow.alternate.down:before { + content: '\f309'; +} + +i.icon.long.arrow.alternate.left:before { + content: '\f30a'; +} + +i.icon.long.arrow.alternate.right:before { + content: '\f30b'; +} + +i.icon.long.arrow.alternate.up:before { + content: '\f30c'; +} + +i.icon.low.vision:before { + content: '\f2a8'; +} + +i.icon.lyft:before { + content: '\f3c3'; +} + +i.icon.magento:before { + content: '\f3c4'; +} + +i.icon.magic:before { + content: '\f0d0'; +} + +i.icon.magnet:before { + content: '\f076'; +} + +i.icon.male:before { + content: '\f183'; +} + +i.icon.map:before { + content: '\f279'; +} + +i.icon.map.marker:before { + content: '\f041'; +} + +i.icon.map.marker.alternate:before { + content: '\f3c5'; +} + +i.icon.map.pin:before { + content: '\f276'; +} + +i.icon.map.signs:before { + content: '\f277'; +} + +i.icon.mars:before { + content: '\f222'; +} + +i.icon.mars.double:before { + content: '\f227'; +} + +i.icon.mars.stroke:before { + content: '\f229'; +} + +i.icon.mars.stroke.horizontal:before { + content: '\f22b'; +} + +i.icon.mars.stroke.vertical:before { + content: '\f22a'; +} + +i.icon.maxcdn:before { + content: '\f136'; +} + +i.icon.medapps:before { + content: '\f3c6'; +} + +i.icon.medium:before { + content: '\f23a'; +} + +i.icon.medium.m:before { + content: '\f3c7'; +} + +i.icon.medkit:before { + content: '\f0fa'; +} + +i.icon.medrt:before { + content: '\f3c8'; +} + +i.icon.meetup:before { + content: '\f2e0'; +} + +i.icon.meh:before { + content: '\f11a'; +} + +i.icon.mercury:before { + content: '\f223'; +} + +i.icon.microchip:before { + content: '\f2db'; +} + +i.icon.microphone:before { + content: '\f130'; +} + +i.icon.microphone.slash:before { + content: '\f131'; +} + +i.icon.microsoft:before { + content: '\f3ca'; +} + +i.icon.minus:before { + content: '\f068'; +} + +i.icon.minus.circle:before { + content: '\f056'; +} + +i.icon.minus.square:before { + content: '\f146'; +} + +i.icon.mix:before { + content: '\f3cb'; +} + +i.icon.mixcloud:before { + content: '\f289'; +} + +i.icon.mizuni:before { + content: '\f3cc'; +} + +i.icon.mobile:before { + content: '\f10b'; +} + +i.icon.mobile.alternate:before { + content: '\f3cd'; +} + +i.icon.modx:before { + content: '\f285'; +} + +i.icon.monero:before { + content: '\f3d0'; +} + +i.icon.money.bill.alternate:before { + content: '\f3d1'; +} + +i.icon.moon:before { + content: '\f186'; +} + +i.icon.motorcycle:before { + content: '\f21c'; +} + +i.icon.mouse.pointer:before { + content: '\f245'; +} + +i.icon.music:before { + content: '\f001'; +} + +i.icon.napster:before { + content: '\f3d2'; +} + +i.icon.neuter:before { + content: '\f22c'; +} + +i.icon.newspaper:before { + content: '\f1ea'; +} + +i.icon.nintendo.switch:before { + content: '\f418'; +} + +i.icon.node:before { + content: '\f419'; +} + +i.icon.node.js:before { + content: '\f3d3'; +} + +i.icon.npm:before { + content: '\f3d4'; +} + +i.icon.ns8:before { + content: '\f3d5'; +} + +i.icon.nutritionix:before { + content: '\f3d6'; +} + +i.icon.object.group:before { + content: '\f247'; +} + +i.icon.object.ungroup:before { + content: '\f248'; +} + +i.icon.odnoklassniki:before { + content: '\f263'; +} + +i.icon.odnoklassniki.square:before { + content: '\f264'; +} + +i.icon.opencart:before { + content: '\f23d'; +} + +i.icon.openid:before { + content: '\f19b'; +} + +i.icon.opera:before { + content: '\f26a'; +} + +i.icon.optin.monster:before { + content: '\f23c'; +} + +i.icon.osi:before { + content: '\f41a'; +} + +i.icon.outdent:before { + content: '\f03b'; +} + +i.icon.page4:before { + content: '\f3d7'; +} + +i.icon.pagelines:before { + content: '\f18c'; +} + +i.icon.paint.brush:before { + content: '\f1fc'; +} + +i.icon.palfed:before { + content: '\f3d8'; +} + +i.icon.pallet:before { + content: '\f482'; +} + +i.icon.paper.plane:before { + content: '\f1d8'; +} + +i.icon.paperclip:before { + content: '\f0c6'; +} + +i.icon.paragraph:before { + content: '\f1dd'; +} + +i.icon.paste:before { + content: '\f0ea'; +} + +i.icon.patreon:before { + content: '\f3d9'; +} + +i.icon.pause:before { + content: '\f04c'; +} + +i.icon.pause.circle:before { + content: '\f28b'; +} + +i.icon.paw:before { + content: '\f1b0'; +} + +i.icon.paypal:before { + content: '\f1ed'; +} + +i.icon.pen.square:before { + content: '\f14b'; +} + +i.icon.pencil.alternate:before { + content: '\f303'; +} + +i.icon.percent:before { + content: '\f295'; +} + +i.icon.periscope:before { + content: '\f3da'; +} + +i.icon.phabricator:before { + content: '\f3db'; +} + +i.icon.phoenix.framework:before { + content: '\f3dc'; +} + +i.icon.phone:before { + content: '\f095'; +} + +i.icon.phone.square:before { + content: '\f098'; +} + +i.icon.phone.volume:before { + content: '\f2a0'; +} + +i.icon.php:before { + content: '\f457'; +} + +i.icon.pied.piper:before { + content: '\f2ae'; +} + +i.icon.pied.piper.alternate:before { + content: '\f1a8'; +} + +i.icon.pied.piper.pp:before { + content: '\f1a7'; +} + +i.icon.pills:before { + content: '\f484'; +} + +i.icon.pinterest:before { + content: '\f0d2'; +} + +i.icon.pinterest.p:before { + content: '\f231'; +} + +i.icon.pinterest.square:before { + content: '\f0d3'; +} + +i.icon.plane:before { + content: '\f072'; +} + +i.icon.play:before { + content: '\f04b'; +} + +i.icon.play.circle:before { + content: '\f144'; +} + +i.icon.playstation:before { + content: '\f3df'; +} + +i.icon.plug:before { + content: '\f1e6'; +} + +i.icon.plus:before { + content: '\f067'; +} + +i.icon.plus.circle:before { + content: '\f055'; +} + +i.icon.plus.square:before { + content: '\f0fe'; +} + +i.icon.podcast:before { + content: '\f2ce'; +} + +i.icon.pound.sign:before { + content: '\f154'; +} + +i.icon.power.off:before { + content: '\f011'; +} + +i.icon.print:before { + content: '\f02f'; +} + +i.icon.product.hunt:before { + content: '\f288'; +} + +i.icon.pushed:before { + content: '\f3e1'; +} + +i.icon.puzzle.piece:before { + content: '\f12e'; +} + +i.icon.python:before { + content: '\f3e2'; +} + +i.icon.qq:before { + content: '\f1d6'; +} + +i.icon.qrcode:before { + content: '\f029'; +} + +i.icon.question:before { + content: '\f128'; +} + +i.icon.question.circle:before { + content: '\f059'; +} + +i.icon.quidditch:before { + content: '\f458'; +} + +i.icon.quinscape:before { + content: '\f459'; +} + +i.icon.quora:before { + content: '\f2c4'; +} + +i.icon.quote.left:before { + content: '\f10d'; +} + +i.icon.quote.right:before { + content: '\f10e'; +} + +i.icon.random:before { + content: '\f074'; +} + +i.icon.ravelry:before { + content: '\f2d9'; +} + +i.icon.react:before { + content: '\f41b'; +} + +i.icon.rebel:before { + content: '\f1d0'; +} + +i.icon.recycle:before { + content: '\f1b8'; +} + +i.icon.redriver:before { + content: '\f3e3'; +} + +i.icon.reddit:before { + content: '\f1a1'; +} + +i.icon.reddit.alien:before { + content: '\f281'; +} + +i.icon.reddit.square:before { + content: '\f1a2'; +} + +i.icon.redo:before { + content: '\f01e'; +} + +i.icon.redo.alternate:before { + content: '\f2f9'; +} + +i.icon.registered:before { + content: '\f25d'; +} + +i.icon.rendact:before { + content: '\f3e4'; +} + +i.icon.renren:before { + content: '\f18b'; +} + +i.icon.reply:before { + content: '\f3e5'; +} + +i.icon.reply.all:before { + content: '\f122'; +} + +i.icon.replyd:before { + content: '\f3e6'; +} + +i.icon.resolving:before { + content: '\f3e7'; +} + +i.icon.retweet:before { + content: '\f079'; +} + +i.icon.road:before { + content: '\f018'; +} + +i.icon.rocket:before { + content: '\f135'; +} + +i.icon.rocketchat:before { + content: '\f3e8'; +} + +i.icon.rockrms:before { + content: '\f3e9'; +} + +i.icon.rss:before { + content: '\f09e'; +} + +i.icon.rss.square:before { + content: '\f143'; +} + +i.icon.ruble.sign:before { + content: '\f158'; +} + +i.icon.rupee.sign:before { + content: '\f156'; +} + +i.icon.safari:before { + content: '\f267'; +} + +i.icon.sass:before { + content: '\f41e'; +} + +i.icon.save:before { + content: '\f0c7'; +} + +i.icon.schlix:before { + content: '\f3ea'; +} + +i.icon.scribd:before { + content: '\f28a'; +} + +i.icon.search:before { + content: '\f002'; +} + +i.icon.search.minus:before { + content: '\f010'; +} + +i.icon.search.plus:before { + content: '\f00e'; +} + +i.icon.searchengin:before { + content: '\f3eb'; +} + +i.icon.sellcast:before { + content: '\f2da'; +} + +i.icon.sellsy:before { + content: '\f213'; +} + +i.icon.server:before { + content: '\f233'; +} + +i.icon.servicestack:before { + content: '\f3ec'; +} + +i.icon.share:before { + content: '\f064'; +} + +i.icon.share.alternate:before { + content: '\f1e0'; +} + +i.icon.share.alternate.square:before { + content: '\f1e1'; +} + +i.icon.share.square:before { + content: '\f14d'; +} + +i.icon.shekel.sign:before { + content: '\f20b'; +} + +i.icon.shield.alternate:before { + content: '\f3ed'; +} + +i.icon.ship:before { + content: '\f21a'; +} + +i.icon.shipping.fast:before { + content: '\f48b'; +} + +i.icon.shirtsinbulk:before { + content: '\f214'; +} + +i.icon.shopping.bag:before { + content: '\f290'; +} + +i.icon.shopping.basket:before { + content: '\f291'; +} + +i.icon.shopping.cart:before { + content: '\f07a'; +} + +i.icon.shower:before { + content: '\f2cc'; +} + +i.icon.sign.language:before { + content: '\f2a7'; +} + +i.icon.signal:before { + content: '\f012'; +} + +i.icon.simplybuilt:before { + content: '\f215'; +} + +i.icon.sistrix:before { + content: '\f3ee'; +} + +i.icon.sitemap:before { + content: '\f0e8'; +} + +i.icon.skyatlas:before { + content: '\f216'; +} + +i.icon.skype:before { + content: '\f17e'; +} + +i.icon.slack:before { + content: '\f198'; +} + +i.icon.slack.hash:before { + content: '\f3ef'; +} + +i.icon.sliders.horizontal:before { + content: '\f1de'; +} + +i.icon.slideshare:before { + content: '\f1e7'; +} + +i.icon.smile:before { + content: '\f118'; +} + +i.icon.snapchat:before { + content: '\f2ab'; +} + +i.icon.snapchat.ghost:before { + content: '\f2ac'; +} + +i.icon.snapchat.square:before { + content: '\f2ad'; +} + +i.icon.snowflake:before { + content: '\f2dc'; +} + +i.icon.sort:before { + content: '\f0dc'; +} + +i.icon.sort.alphabet.down:before { + content: '\f15d'; +} + +i.icon.sort.alphabet.up:before { + content: '\f15e'; +} + +i.icon.sort.amount.down:before { + content: '\f160'; +} + +i.icon.sort.amount.up:before { + content: '\f161'; +} + +i.icon.sort.down:before { + content: '\f0dd'; +} + +i.icon.sort.numeric.down:before { + content: '\f162'; +} + +i.icon.sort.numeric.up:before { + content: '\f163'; +} + +i.icon.sort.up:before { + content: '\f0de'; +} + +i.icon.soundcloud:before { + content: '\f1be'; +} + +i.icon.space.shuttle:before { + content: '\f197'; +} + +i.icon.speakap:before { + content: '\f3f3'; +} + +i.icon.spinner:before { + content: '\f110'; +} + +i.icon.spotify:before { + content: '\f1bc'; +} + +i.icon.square:before { + content: '\f0c8'; +} + +i.icon.square.full:before { + content: '\f45c'; +} + +i.icon.stack.exchange:before { + content: '\f18d'; +} + +i.icon.stack.overflow:before { + content: '\f16c'; +} + +i.icon.star:before { + content: '\f005'; +} + +i.icon.star.half:before { + content: '\f089'; +} + +i.icon.staylinked:before { + content: '\f3f5'; +} + +i.icon.steam:before { + content: '\f1b6'; +} + +i.icon.steam.square:before { + content: '\f1b7'; +} + +i.icon.steam.symbol:before { + content: '\f3f6'; +} + +i.icon.step.backward:before { + content: '\f048'; +} + +i.icon.step.forward:before { + content: '\f051'; +} + +i.icon.stethoscope:before { + content: '\f0f1'; +} + +i.icon.sticker.mule:before { + content: '\f3f7'; +} + +i.icon.sticky.note:before { + content: '\f249'; +} + +i.icon.stop:before { + content: '\f04d'; +} + +i.icon.stop.circle:before { + content: '\f28d'; +} + +i.icon.stopwatch:before { + content: '\f2f2'; +} + +i.icon.strava:before { + content: '\f428'; +} + +i.icon.street.view:before { + content: '\f21d'; +} + +i.icon.strikethrough:before { + content: '\f0cc'; +} + +i.icon.stripe:before { + content: '\f429'; +} + +i.icon.stripe.s:before { + content: '\f42a'; +} + +i.icon.studiovinari:before { + content: '\f3f8'; +} + +i.icon.stumbleupon:before { + content: '\f1a4'; +} + +i.icon.stumbleupon.circle:before { + content: '\f1a3'; +} + +i.icon.subscript:before { + content: '\f12c'; +} + +i.icon.subway:before { + content: '\f239'; +} + +i.icon.suitcase:before { + content: '\f0f2'; +} + +i.icon.sun:before { + content: '\f185'; +} + +i.icon.superpowers:before { + content: '\f2dd'; +} + +i.icon.superscript:before { + content: '\f12b'; +} + +i.icon.supple:before { + content: '\f3f9'; +} + +i.icon.sync:before { + content: '\f021'; +} + +i.icon.sync.alternate:before { + content: '\f2f1'; +} + +i.icon.syringe:before { + content: '\f48e'; +} + +i.icon.table:before { + content: '\f0ce'; +} + +i.icon.table.tennis:before { + content: '\f45d'; +} + +i.icon.tablet:before { + content: '\f10a'; +} + +i.icon.tablet.alternate:before { + content: '\f3fa'; +} + +i.icon.tachometer.alternate:before { + content: '\f3fd'; +} + +i.icon.tag:before { + content: '\f02b'; +} + +i.icon.tags:before { + content: '\f02c'; +} + +i.icon.tasks:before { + content: '\f0ae'; +} + +i.icon.taxi:before { + content: '\f1ba'; +} + +i.icon.telegram:before { + content: '\f2c6'; +} + +i.icon.telegram.plane:before { + content: '\f3fe'; +} + +i.icon.tencent.weibo:before { + content: '\f1d5'; +} + +i.icon.terminal:before { + content: '\f120'; +} + +i.icon.text.height:before { + content: '\f034'; +} + +i.icon.text.width:before { + content: '\f035'; +} + +i.icon.th:before { + content: '\f00a'; +} + +i.icon.th.large:before { + content: '\f009'; +} + +i.icon.th.list:before { + content: '\f00b'; +} + +i.icon.themeisle:before { + content: '\f2b2'; +} + +i.icon.thermometer:before { + content: '\f491'; +} + +i.icon.thermometer.empty:before { + content: '\f2cb'; +} + +i.icon.thermometer.full:before { + content: '\f2c7'; +} + +i.icon.thermometer.half:before { + content: '\f2c9'; +} + +i.icon.thermometer.quarter:before { + content: '\f2ca'; +} + +i.icon.thermometer.three.quarters:before { + content: '\f2c8'; +} + +i.icon.thumbs.down:before { + content: '\f165'; +} + +i.icon.thumbs.up:before { + content: '\f164'; +} + +i.icon.thumbtack:before { + content: '\f08d'; +} + +i.icon.ticket.alternate:before { + content: '\f3ff'; +} + +i.icon.times:before { + content: '\f00d'; +} + +i.icon.times.circle:before { + content: '\f057'; +} + +i.icon.tint:before { + content: '\f043'; +} + +i.icon.toggle.off:before { + content: '\f204'; +} + +i.icon.toggle.on:before { + content: '\f205'; +} + +i.icon.trademark:before { + content: '\f25c'; +} + +i.icon.train:before { + content: '\f238'; +} + +i.icon.transgender:before { + content: '\f224'; +} + +i.icon.transgender.alternate:before { + content: '\f225'; +} + +i.icon.trash:before { + content: '\f1f8'; +} + +i.icon.trash.alternate:before { + content: '\f2ed'; +} + +i.icon.tree:before { + content: '\f1bb'; +} + +i.icon.trello:before { + content: '\f181'; +} + +i.icon.tripadvisor:before { + content: '\f262'; +} + +i.icon.trophy:before { + content: '\f091'; +} + +i.icon.truck:before { + content: '\f0d1'; +} + +i.icon.tty:before { + content: '\f1e4'; +} + +i.icon.tumblr:before { + content: '\f173'; +} + +i.icon.tumblr.square:before { + content: '\f174'; +} + +i.icon.tv:before { + content: '\f26c'; +} + +i.icon.twitch:before { + content: '\f1e8'; +} + +i.icon.twitter:before { + content: '\f099'; +} + +i.icon.twitter.square:before { + content: '\f081'; +} + +i.icon.typo3:before { + content: '\f42b'; +} + +i.icon.uber:before { + content: '\f402'; +} + +i.icon.uikit:before { + content: '\f403'; +} + +i.icon.umbrella:before { + content: '\f0e9'; +} + +i.icon.underline:before { + content: '\f0cd'; +} + +i.icon.undo:before { + content: '\f0e2'; +} + +i.icon.undo.alternate:before { + content: '\f2ea'; +} + +i.icon.uniregistry:before { + content: '\f404'; +} + +i.icon.universal.access:before { + content: '\f29a'; +} + +i.icon.university:before { + content: '\f19c'; +} + +i.icon.unlink:before { + content: '\f127'; +} + +i.icon.unlock:before { + content: '\f09c'; +} + +i.icon.unlock.alternate:before { + content: '\f13e'; +} + +i.icon.untappd:before { + content: '\f405'; +} + +i.icon.upload:before { + content: '\f093'; +} + +i.icon.usb:before { + content: '\f287'; +} + +i.icon.user:before { + content: '\f007'; +} + +i.icon.user.circle:before { + content: '\f2bd'; +} + +i.icon.user.md:before { + content: '\f0f0'; +} + +i.icon.user.plus:before { + content: '\f234'; +} + +i.icon.user.secret:before { + content: '\f21b'; +} + +i.icon.user.times:before { + content: '\f235'; +} + +i.icon.users:before { + content: '\f0c0'; +} + +i.icon.ussunnah:before { + content: '\f407'; +} + +i.icon.utensil.spoon:before { + content: '\f2e5'; +} + +i.icon.utensils:before { + content: '\f2e7'; +} + +i.icon.vaadin:before { + content: '\f408'; +} + +i.icon.venus:before { + content: '\f221'; +} + +i.icon.venus.double:before { + content: '\f226'; +} + +i.icon.venus.mars:before { + content: '\f228'; +} + +i.icon.viacoin:before { + content: '\f237'; +} + +i.icon.viadeo:before { + content: '\f2a9'; +} + +i.icon.viadeo.square:before { + content: '\f2aa'; +} + +i.icon.viber:before { + content: '\f409'; +} + +i.icon.video:before { + content: '\f03d'; +} + +i.icon.vimeo:before { + content: '\f40a'; +} + +i.icon.vimeo.square:before { + content: '\f194'; +} + +i.icon.vimeo.v:before { + content: '\f27d'; +} + +i.icon.vine:before { + content: '\f1ca'; +} + +i.icon.vk:before { + content: '\f189'; +} + +i.icon.vnv:before { + content: '\f40b'; +} + +i.icon.volleyball.ball:before { + content: '\f45f'; +} + +i.icon.volume.down:before { + content: '\f027'; +} + +i.icon.volume.off:before { + content: '\f026'; +} + +i.icon.volume.up:before { + content: '\f028'; +} + +i.icon.vuejs:before { + content: '\f41f'; +} + +i.icon.warehouse:before { + content: '\f494'; +} + +i.icon.weibo:before { + content: '\f18a'; +} + +i.icon.weight:before { + content: '\f496'; +} + +i.icon.weixin:before { + content: '\f1d7'; +} + +i.icon.whatsapp:before { + content: '\f232'; +} + +i.icon.whatsapp.square:before { + content: '\f40c'; +} + +i.icon.wheelchair:before { + content: '\f193'; +} + +i.icon.whmcs:before { + content: '\f40d'; +} + +i.icon.wifi:before { + content: '\f1eb'; +} + +i.icon.wikipedia.w:before { + content: '\f266'; +} + +i.icon.window.close:before { + content: '\f410'; +} + +i.icon.window.maximize:before { + content: '\f2d0'; +} + +i.icon.window.minimize:before { + content: '\f2d1'; +} + +i.icon.window.restore:before { + content: '\f2d2'; +} + +i.icon.windows:before { + content: '\f17a'; +} + +i.icon.won.sign:before { + content: '\f159'; +} + +i.icon.wordpress:before { + content: '\f19a'; +} + +i.icon.wordpress.simple:before { + content: '\f411'; +} + +i.icon.wpbeginner:before { + content: '\f297'; +} + +i.icon.wpexplorer:before { + content: '\f2de'; +} + +i.icon.wpforms:before { + content: '\f298'; +} + +i.icon.wrench:before { + content: '\f0ad'; +} + +i.icon.xbox:before { + content: '\f412'; +} + +i.icon.xing:before { + content: '\f168'; +} + +i.icon.xing.square:before { + content: '\f169'; +} + +i.icon.y.combinator:before { + content: '\f23b'; +} + +i.icon.yahoo:before { + content: '\f19e'; +} + +i.icon.yandex:before { + content: '\f413'; +} + +i.icon.yandex.international:before { + content: '\f414'; +} + +i.icon.yelp:before { + content: '\f1e9'; +} + +i.icon.yen.sign:before { + content: '\f157'; +} + +i.icon.yoast:before { + content: '\f2b1'; +} + +i.icon.youtube:before { + content: '\f167'; +} + +i.icon.youtube.square:before { + content: '\f431'; +} + +/* Aliases */ +i.icon.chess.rock:before { + content: '\f447'; +} + +i.icon.ordered.list:before { + content: '\f0cb'; +} + +i.icon.unordered.list:before { + content: '\f0ca'; +} + +i.icon.user.doctor:before { + content: '\f0f0'; +} + +i.icon.shield:before { + content: '\f3ed'; +} + +i.icon.puzzle:before { + content: '\f12e'; +} + +i.icon.credit.card.amazon.pay:before { + content: '\f42d'; +} + +i.icon.credit.card.american.express:before { + content: '\f1f3'; +} + +i.icon.credit.card.diners.club:before { + content: '\f24c'; +} + +i.icon.credit.card.discover:before { + content: '\f1f2'; +} + +i.icon.credit.card.jcb:before { + content: '\f24b'; +} + +i.icon.credit.card.mastercard:before { + content: '\f1f1'; +} + +i.icon.credit.card.paypal:before { + content: '\f1f4'; +} + +i.icon.credit.card.stripe:before { + content: '\f1f5'; +} + +i.icon.credit.card.visa:before { + content: '\f1f0'; +} + +i.icon.add.circle:before { + content: '\f055'; +} + +i.icon.add.square:before { + content: '\f0fe'; +} + +i.icon.add.to.calendar:before { + content: '\f271'; +} + +i.icon.add.to.cart:before { + content: '\f217'; +} + +i.icon.add.user:before { + content: '\f234'; +} + +i.icon.add:before { + content: '\f067'; +} + +i.icon.alarm.mute:before { + content: '\f1f6'; +} + +i.icon.alarm:before { + content: '\f0f3'; +} + +i.icon.ald:before { + content: '\f2a2'; +} + +i.icon.als:before { + content: '\f2a2'; +} + +i.icon.american.express.card:before { + content: '\f1f3'; +} + +i.icon.american.express:before { + content: '\f1f3'; +} + +i.icon.amex:before { + content: '\f1f3'; +} + +i.icon.announcement:before { + content: '\f0a1'; +} + +i.icon.area.chart:before { + content: '\f1fe'; +} + +i.icon.area.graph:before { + content: '\f1fe'; +} + +i.icon.arrow.down.cart:before { + content: '\f218'; +} + +i.icon.asexual:before { + content: '\f22d'; +} + +i.icon.asl.interpreting:before { + content: '\f2a3'; +} + +i.icon.asl:before { + content: '\f2a3'; +} + +i.icon.assistive.listening.devices:before { + content: '\f2a2'; +} + +i.icon.attach:before { + content: '\f0c6'; +} + +i.icon.attention:before { + content: '\f06a'; +} + +i.icon.balance:before { + content: '\f24e'; +} + +i.icon.bar:before { + content: '\f0fc'; +} + +i.icon.bathtub:before { + content: '\f2cd'; +} + +i.icon.battery.four:before { + content: '\f240'; +} + +i.icon.battery.high:before { + content: '\f241'; +} + +i.icon.battery.low:before { + content: '\f243'; +} + +i.icon.battery.medium:before { + content: '\f242'; +} + +i.icon.battery.one:before { + content: '\f243'; +} + +i.icon.battery.three:before { + content: '\f241'; +} + +i.icon.battery.two:before { + content: '\f242'; +} + +i.icon.battery.zero:before { + content: '\f244'; +} + +i.icon.birthday:before { + content: '\f1fd'; +} + +i.icon.block.layout:before { + content: '\f009'; +} + +i.icon.bluetooth.alternative:before { + content: '\f294'; +} + +i.icon.broken.chain:before { + content: '\f127'; +} + +i.icon.browser:before { + content: '\f022'; +} + +i.icon.call.square:before { + content: '\f098'; +} + +i.icon.call:before { + content: '\f095'; +} + +i.icon.cancel:before { + content: '\f00d'; +} + +i.icon.cart:before { + content: '\f07a'; +} + +i.icon.cc:before { + content: '\f20a'; +} + +i.icon.chain:before { + content: '\f0c1'; +} + +i.icon.chat:before { + content: '\f075'; +} + +i.icon.checked.calendar:before { + content: '\f274'; +} + +i.icon.checkmark:before { + content: '\f00c'; +} + +i.icon.circle.notched:before { + content: '\f1ce'; +} + +i.icon.close:before { + content: '\f00d'; +} + +i.icon.cny:before { + content: '\f157'; +} + +i.icon.cocktail:before { + content: '\f000'; +} + +i.icon.commenting:before { + content: '\f27a'; +} + +i.icon.computer:before { + content: '\f108'; +} + +i.icon.configure:before { + content: '\f0ad'; +} + +i.icon.content:before { + content: '\f0c9'; +} + +i.icon.deafness:before { + content: '\f2a4'; +} + +i.icon.delete.calendar:before { + content: '\f273'; +} + +i.icon.delete:before { + content: '\f00d'; +} + +i.icon.detective:before { + content: '\f21b'; +} + +i.icon.diners.club.card:before { + content: '\f24c'; +} + +i.icon.diners.club:before { + content: '\f24c'; +} + +i.icon.discover.card:before { + content: '\f1f2'; +} + +i.icon.discover:before { + content: '\f1f2'; +} + +i.icon.discussions:before { + content: '\f086'; +} + +i.icon.doctor:before { + content: '\f0f0'; +} + +i.icon.dollar:before { + content: '\f155'; +} + +i.icon.dont:before { + content: '\f05e'; +} + +i.icon.dribble:before { + content: '\f17d'; +} + +i.icon.drivers.license:before { + content: '\f2c2'; +} + +i.icon.dropdown:before { + content: '\f0d7'; +} + +i.icon.eercast:before { + content: '\f2da'; +} + +i.icon.emergency:before { + content: '\f0f9'; +} + +i.icon.envira.gallery:before { + content: '\f299'; +} + +i.icon.erase:before { + content: '\f12d'; +} + +i.icon.eur:before { + content: '\f153'; +} + +i.icon.euro:before { + content: '\f153'; +} + +i.icon.eyedropper:before { + content: '\f1fb'; +} + +i.icon.fa:before { + content: '\f2b4'; +} + +i.icon.factory:before { + content: '\f275'; +} + +i.icon.favorite:before { + content: '\f005'; +} + +i.icon.feed:before { + content: '\f09e'; +} + +i.icon.female.homosexual:before { + content: '\f226'; +} + +i.icon.file.text:before { + content: '\f15c'; +} + +i.icon.find:before { + content: '\f1e5'; +} + +i.icon.first.aid:before { + content: '\f0fa'; +} + +i.icon.five.hundred.pixels:before { + content: '\f26e'; +} + +i.icon.fork:before { + content: '\f126'; +} + +i.icon.game:before { + content: '\f11b'; +} + +i.icon.gay:before { + content: '\f227'; +} + +i.icon.gbp:before { + content: '\f154'; +} + +i.icon.gittip:before { + content: '\f184'; +} + +i.icon.google.plus.circle:before { + content: '\f2b3'; +} + +i.icon.google.plus.official:before { + content: '\f2b3'; +} + +i.icon.grab:before { + content: '\f255'; +} + +i.icon.graduation:before { + content: '\f19d'; +} + +i.icon.grid.layout:before { + content: '\f00a'; +} + +i.icon.group:before { + content: '\f0c0'; +} + +i.icon.h:before { + content: '\f0fd'; +} + +i.icon.hand.victory:before { + content: '\f25b'; +} + +i.icon.handicap:before { + content: '\f193'; +} + +i.icon.hard.of.hearing:before { + content: '\f2a4'; +} + +i.icon.header:before { + content: '\f1dc'; +} + +i.icon.help.circle:before { + content: '\f059'; +} + +i.icon.help:before { + content: '\f128'; +} + +i.icon.heterosexual:before { + content: '\f228'; +} + +i.icon.hide:before { + content: '\f070'; +} + +i.icon.hotel:before { + content: '\f236'; +} + +i.icon.hourglass.four:before { + content: '\f254'; +} + +i.icon.hourglass.full:before { + content: '\f254'; +} + +i.icon.hourglass.one:before { + content: '\f251'; +} + +i.icon.hourglass.three:before { + content: '\f253'; +} + +i.icon.hourglass.two:before { + content: '\f252'; +} + +i.icon.idea:before { + content: '\f0eb'; +} + +i.icon.ils:before { + content: '\f20b'; +} + +i.icon.in-cart:before { + content: '\f218'; +} + +i.icon.inr:before { + content: '\f156'; +} + +i.icon.intergender:before { + content: '\f224'; +} + +i.icon.intersex:before { + content: '\f224'; +} + +i.icon.japan.credit.bureau.card:before { + content: '\f24b'; +} + +i.icon.japan.credit.bureau:before { + content: '\f24b'; +} + +i.icon.jcb:before { + content: '\f24b'; +} + +i.icon.jpy:before { + content: '\f157'; +} + +i.icon.krw:before { + content: '\f159'; +} + +i.icon.lab:before { + content: '\f0c3'; +} + +i.icon.law:before { + content: '\f24e'; +} + +i.icon.legal:before { + content: '\f0e3'; +} + +i.icon.lesbian:before { + content: '\f226'; +} + +i.icon.lightning:before { + content: '\f0e7'; +} + +i.icon.like:before { + content: '\f004'; +} + +i.icon.line.graph:before { + content: '\f201'; +} + +i.icon.linkedin.square:before { + content: '\f08c'; +} + +i.icon.linkify:before { + content: '\f0c1'; +} + +i.icon.lira:before { + content: '\f195'; +} + +i.icon.list.layout:before { + content: '\f00b'; +} + +i.icon.magnify:before { + content: '\f00e'; +} + +i.icon.mail.forward:before { + content: '\f064'; +} + +i.icon.mail.square:before { + content: '\f199'; +} + +i.icon.mail:before { + content: '\f0e0'; +} + +i.icon.male.homosexual:before { + content: '\f227'; +} + +i.icon.man:before { + content: '\f222'; +} + +i.icon.marker:before { + content: '\f041'; +} + +i.icon.mars.alternate:before { + content: '\f229'; +} + +i.icon.mars.horizontal:before { + content: '\f22b'; +} + +i.icon.mars.vertical:before { + content: '\f22a'; +} + +i.icon.mastercard.card:before { + content: '\f1f1'; +} + +i.icon.mastercard:before { + content: '\f1f1'; +} + +i.icon.microsoft.edge:before { + content: '\f282'; +} + +i.icon.military:before { + content: '\f0fb'; +} + +i.icon.ms.edge:before { + content: '\f282'; +} + +i.icon.mute:before { + content: '\f131'; +} + +i.icon.new.pied.piper:before { + content: '\f2ae'; +} + +i.icon.non.binary.transgender:before { + content: '\f223'; +} + +i.icon.numbered.list:before { + content: '\f0cb'; +} + +i.icon.optinmonster:before { + content: '\f23c'; +} + +i.icon.options:before { + content: '\f1de'; +} + +i.icon.other.gender.horizontal:before { + content: '\f22b'; +} + +i.icon.other.gender.vertical:before { + content: '\f22a'; +} + +i.icon.other.gender:before { + content: '\f229'; +} + +i.icon.payment:before { + content: '\f09d'; +} + +i.icon.paypal.card:before { + content: '\f1f4'; +} + +i.icon.pencil.square:before { + content: '\f14b'; +} + +i.icon.photo:before { + content: '\f030'; +} + +i.icon.picture:before { + content: '\f03e'; +} + +i.icon.pie.chart:before { + content: '\f200'; +} + +i.icon.pie.graph:before { + content: '\f200'; +} + +i.icon.pied.piper.hat:before { + content: '\f2ae'; +} + +i.icon.pin:before { + content: '\f08d'; +} + +i.icon.plus.cart:before { + content: '\f217'; +} + +i.icon.pocket:before { + content: '\f265'; +} + +i.icon.point:before { + content: '\f041'; +} + +i.icon.pointing.down:before { + content: '\f0a7'; +} + +i.icon.pointing.left:before { + content: '\f0a5'; +} + +i.icon.pointing.right:before { + content: '\f0a4'; +} + +i.icon.pointing.up:before { + content: '\f0a6'; +} + +i.icon.pound:before { + content: '\f154'; +} + +i.icon.power.cord:before { + content: '\f1e6'; +} + +i.icon.power:before { + content: '\f011'; +} + +i.icon.privacy:before { + content: '\f084'; +} + +i.icon.r.circle:before { + content: '\f25d'; +} + +i.icon.rain:before { + content: '\f0e9'; +} + +i.icon.record:before { + content: '\f03d'; +} + +i.icon.refresh:before { + content: '\f021'; +} + +i.icon.remove.circle:before { + content: '\f057'; +} + +i.icon.remove.from.calendar:before { + content: '\f272'; +} + +i.icon.remove.user:before { + content: '\f235'; +} + +i.icon.remove:before { + content: '\f00d'; +} + +i.icon.repeat:before { + content: '\f01e'; +} + +i.icon.rmb:before { + content: '\f157'; +} + +i.icon.rouble:before { + content: '\f158'; +} + +i.icon.rub:before { + content: '\f158'; +} + +i.icon.ruble:before { + content: '\f158'; +} + +i.icon.rupee:before { + content: '\f156'; +} + +i.icon.s15:before { + content: '\f2cd'; +} + +i.icon.selected.radio:before { + content: '\f192'; +} + +i.icon.send:before { + content: '\f1d8'; +} + +i.icon.setting:before { + content: '\f013'; +} + +i.icon.settings:before { + content: '\f085'; +} + +i.icon.shekel:before { + content: '\f20b'; +} + +i.icon.sheqel:before { + content: '\f20b'; +} + +i.icon.shipping:before { + content: '\f0d1'; +} + +i.icon.shop:before { + content: '\f07a'; +} + +i.icon.shuffle:before { + content: '\f074'; +} + +i.icon.shutdown:before { + content: '\f011'; +} + +i.icon.sidebar:before { + content: '\f0c9'; +} + +i.icon.signing:before { + content: '\f2a7'; +} + +i.icon.signup:before { + content: '\f044'; +} + +i.icon.sliders:before { + content: '\f1de'; +} + +i.icon.soccer:before { + content: '\f1e3'; +} + +i.icon.sort.alphabet.ascending:before { + content: '\f15d'; +} + +i.icon.sort.alphabet.descending:before { + content: '\f15e'; +} + +i.icon.sort.ascending:before { + content: '\f0de'; +} + +i.icon.sort.content.ascending:before { + content: '\f160'; +} + +i.icon.sort.content.descending:before { + content: '\f161'; +} + +i.icon.sort.descending:before { + content: '\f0dd'; +} + +i.icon.sort.numeric.ascending:before { + content: '\f162'; +} + +i.icon.sort.numeric.descending:before { + content: '\f163'; +} + +i.icon.sound:before { + content: '\f025'; +} + +i.icon.spy:before { + content: '\f21b'; +} + +i.icon.stripe.card:before { + content: '\f1f5'; +} + +i.icon.student:before { + content: '\f19d'; +} + +i.icon.talk:before { + content: '\f27a'; +} + +i.icon.target:before { + content: '\f140'; +} + +i.icon.teletype:before { + content: '\f1e4'; +} + +i.icon.television:before { + content: '\f26c'; +} + +i.icon.text.cursor:before { + content: '\f246'; +} + +i.icon.text.telephone:before { + content: '\f1e4'; +} + +i.icon.theme.isle:before { + content: '\f2b2'; +} + +i.icon.theme:before { + content: '\f043'; +} + +i.icon.thermometer:before { + content: '\f2c7'; +} + +i.icon.thumb.tack:before { + content: '\f08d'; +} + +i.icon.time:before { + content: '\f017'; +} + +i.icon.tm:before { + content: '\f25c'; +} + +i.icon.toggle.down:before { + content: '\f150'; +} + +i.icon.toggle.left:before { + content: '\f191'; +} + +i.icon.toggle.right:before { + content: '\f152'; +} + +i.icon.toggle.up:before { + content: '\f151'; +} + +i.icon.translate:before { + content: '\f1ab'; +} + +i.icon.travel:before { + content: '\f0b1'; +} + +i.icon.treatment:before { + content: '\f0f1'; +} + +i.icon.triangle.down:before { + content: '\f0d7'; +} + +i.icon.triangle.left:before { + content: '\f0d9'; +} + +i.icon.triangle.right:before { + content: '\f0da'; +} + +i.icon.triangle.up:before { + content: '\f0d8'; +} + +i.icon.try:before { + content: '\f195'; +} + +i.icon.unhide:before { + content: '\f06e'; +} + +i.icon.unlinkify:before { + content: '\f127'; +} + +i.icon.unmute:before { + content: '\f130'; +} + +i.icon.usd:before { + content: '\f155'; +} + +i.icon.user.cancel:before { + content: '\f235'; +} + +i.icon.user.close:before { + content: '\f235'; +} + +i.icon.user.delete:before { + content: '\f235'; +} + +i.icon.user.x:before { + content: '\f235'; +} + +i.icon.vcard:before { + content: '\f2bb'; +} + +i.icon.video.camera:before { + content: '\f03d'; +} + +i.icon.video.play:before { + content: '\f144'; +} + +i.icon.visa.card:before { + content: '\f1f0'; +} + +i.icon.visa:before { + content: '\f1f0'; +} + +i.icon.volume.control.phone:before { + content: '\f2a0'; +} + +i.icon.wait:before { + content: '\f017'; +} + +i.icon.warning.circle:before { + content: '\f06a'; +} + +i.icon.warning.sign:before { + content: '\f071'; +} + +i.icon.warning:before { + content: '\f12a'; +} + +i.icon.wechat:before { + content: '\f1d7'; +} + +i.icon.wi-fi:before { + content: '\f1eb'; +} + +i.icon.wikipedia:before { + content: '\f266'; +} + +i.icon.winner:before { + content: '\f091'; +} + +i.icon.wizard:before { + content: '\f0d0'; +} + +i.icon.woman:before { + content: '\f221'; +} + +i.icon.won:before { + content: '\f159'; +} + +i.icon.wordpress.beginner:before { + content: '\f297'; +} + +i.icon.wordpress.forms:before { + content: '\f298'; +} + +i.icon.world:before { + content: '\f0ac'; +} + +i.icon.write.square:before { + content: '\f14b'; +} + +i.icon.x:before { + content: '\f00d'; +} + +i.icon.yc:before { + content: '\f23b'; +} + +i.icon.ycombinator:before { + content: '\f23b'; +} + +i.icon.yen:before { + content: '\f157'; +} + +i.icon.zip:before { + content: '\f187'; +} + +i.icon.zoom-in:before { + content: '\f00e'; +} + +i.icon.zoom-out:before { + content: '\f010'; +} + +i.icon.zoom:before { + content: '\f00e'; +} + +i.icon.bitbucket.square:before { + content: '\f171'; +} + +i.icon.checkmark.box:before { + content: '\f14a'; +} + +i.icon.circle.thin:before { + content: '\f111'; +} + +i.icon.cloud.download:before { + content: '\f381'; +} + +i.icon.cloud.upload:before { + content: '\f382'; +} + +i.icon.compose:before { + content: '\f303'; +} + +i.icon.conversation:before { + content: '\f086'; +} + +i.icon.credit.card.alternative:before { + content: '\f09d'; +} + +i.icon.currency:before { + content: '\f3d1'; +} + +i.icon.dashboard:before { + content: '\f3fd'; +} + +i.icon.diamond:before { + content: '\f3a5'; +} + +i.icon.disk:before { + content: '\f0a0'; +} + +i.icon.exchange:before { + content: '\f362'; +} + +i.icon.external.share:before { + content: '\f14d'; +} + +i.icon.external.square:before { + content: '\f360'; +} + +i.icon.external:before { + content: '\f35d'; +} + +i.icon.facebook.official:before { + content: '\f082'; +} + +i.icon.food:before { + content: '\f2e7'; +} + +i.icon.hourglass.zero:before { + content: '\f253'; +} + +i.icon.level.down:before { + content: '\f3be'; +} + +i.icon.level.up:before { + content: '\f3bf'; +} + +i.icon.logout:before { + content: '\f2f5'; +} + +i.icon.meanpath:before { + content: '\f0c8'; +} + +i.icon.money:before { + content: '\f3d1'; +} + +i.icon.move:before { + content: '\f0b2'; +} + +i.icon.pencil:before { + content: '\f303'; +} + +i.icon.protect:before { + content: '\f023'; +} + +i.icon.radio:before { + content: '\f192'; +} + +i.icon.remove.bookmark:before { + content: '\f02e'; +} + +i.icon.resize.horizontal:before { + content: '\f337'; +} + +i.icon.resize.vertical:before { + content: '\f338'; +} + +i.icon.sign-in:before { + content: '\f2f6'; +} + +i.icon.sign-out:before { + content: '\f2f5'; +} + +i.icon.spoon:before { + content: '\f2e5'; +} + +i.icon.star.half.empty:before { + content: '\f089'; +} + +i.icon.star.half.full:before { + content: '\f089'; +} -/* Icons */ -i.icon.\35 00px:before { content: "\f26e"; } -i.icon.accessible.icon:before { content: "\f368"; } -i.icon.accusoft:before { content: "\f369"; } -i.icon.address.book:before { content: "\f2b9"; } -i.icon.address.card:before { content: "\f2bb"; } -i.icon.adjust:before { content: "\f042"; } -i.icon.adn:before { content: "\f170"; } -i.icon.adversal:before { content: "\f36a"; } -i.icon.affiliatetheme:before { content: "\f36b"; } -i.icon.algolia:before { content: "\f36c"; } -i.icon.align.center:before { content: "\f037"; } -i.icon.align.justify:before { content: "\f039"; } -i.icon.align.left:before { content: "\f036"; } -i.icon.align.right:before { content: "\f038"; } -i.icon.amazon:before { content: "\f270"; } -i.icon.amazon.pay:before { content: "\f42c"; } -i.icon.ambulance:before { content: "\f0f9"; } -i.icon.american.sign.language.interpreting:before { content: "\f2a3"; } -i.icon.amilia:before { content: "\f36d"; } -i.icon.anchor:before { content: "\f13d"; } -i.icon.android:before { content: "\f17b"; } -i.icon.angellist:before { content: "\f209"; } -i.icon.angle.double.down:before { content: "\f103"; } -i.icon.angle.double.left:before { content: "\f100"; } -i.icon.angle.double.right:before { content: "\f101"; } -i.icon.angle.double.up:before { content: "\f102"; } -i.icon.angle.down:before { content: "\f107"; } -i.icon.angle.left:before { content: "\f104"; } -i.icon.angle.right:before { content: "\f105"; } -i.icon.angle.up:before { content: "\f106"; } -i.icon.angrycreative:before { content: "\f36e"; } -i.icon.angular:before { content: "\f420"; } -i.icon.app.store:before { content: "\f36f"; } -i.icon.app.store.ios:before { content: "\f370"; } -i.icon.apper:before { content: "\f371"; } -i.icon.apple:before { content: "\f179"; } -i.icon.apple.pay:before { content: "\f415"; } -i.icon.archive:before { content: "\f187"; } -i.icon.arrow.alternate.circle.down:before { content: "\f358"; } -i.icon.arrow.alternate.circle.left:before { content: "\f359"; } -i.icon.arrow.alternate.circle.right:before { content: "\f35a"; } -i.icon.arrow.alternate.circle.up:before { content: "\f35b"; } -i.icon.arrow.circle.down:before { content: "\f0ab"; } -i.icon.arrow.circle.left:before { content: "\f0a8"; } -i.icon.arrow.circle.right:before { content: "\f0a9"; } -i.icon.arrow.circle.up:before { content: "\f0aa"; } -i.icon.arrow.down:before { content: "\f063"; } -i.icon.arrow.left:before { content: "\f060"; } -i.icon.arrow.right:before { content: "\f061"; } -i.icon.arrow.up:before { content: "\f062"; } -i.icon.arrows.alternate:before { content: "\f0b2"; } -i.icon.arrows.alternate.horizontal:before { content: "\f337"; } -i.icon.arrows.alternate.vertical:before { content: "\f338"; } -i.icon.assistive.listening.systems:before { content: "\f2a2"; } -i.icon.asterisk:before { content: "\f069"; } -i.icon.asymmetrik:before { content: "\f372"; } -i.icon.at:before { content: "\f1fa"; } -i.icon.audible:before { content: "\f373"; } -i.icon.audio.description:before { content: "\f29e"; } -i.icon.autoprefixer:before { content: "\f41c"; } -i.icon.avianex:before { content: "\f374"; } -i.icon.aviato:before { content: "\f421"; } -i.icon.aws:before { content: "\f375"; } -i.icon.backward:before { content: "\f04a"; } -i.icon.balance.scale:before { content: "\f24e"; } -i.icon.ban:before { content: "\f05e"; } -i.icon.band.aid:before { content: "\f462"; } -i.icon.bandcamp:before { content: "\f2d5"; } -i.icon.barcode:before { content: "\f02a"; } -i.icon.bars:before { content: "\f0c9"; } -i.icon.baseball.ball:before { content: "\f433"; } -i.icon.basketball.ball:before { content: "\f434"; } -i.icon.bath:before { content: "\f2cd"; } -i.icon.battery.empty:before { content: "\f244"; } -i.icon.battery.full:before { content: "\f240"; } -i.icon.battery.half:before { content: "\f242"; } -i.icon.battery.quarter:before { content: "\f243"; } -i.icon.battery.three.quarters:before { content: "\f241"; } -i.icon.bed:before { content: "\f236"; } -i.icon.beer:before { content: "\f0fc"; } -i.icon.behance:before { content: "\f1b4"; } -i.icon.behance.square:before { content: "\f1b5"; } -i.icon.bell:before { content: "\f0f3"; } -i.icon.bell.slash:before { content: "\f1f6"; } -i.icon.bicycle:before { content: "\f206"; } -i.icon.bimobject:before { content: "\f378"; } -i.icon.binoculars:before { content: "\f1e5"; } -i.icon.birthday.cake:before { content: "\f1fd"; } -i.icon.bitbucket:before { content: "\f171"; } -i.icon.bitcoin:before { content: "\f379"; } -i.icon.bity:before { content: "\f37a"; } -i.icon.black.tie:before { content: "\f27e"; } -i.icon.blackberry:before { content: "\f37b"; } -i.icon.blind:before { content: "\f29d"; } -i.icon.blogger:before { content: "\f37c"; } -i.icon.blogger.b:before { content: "\f37d"; } -i.icon.bluetooth:before { content: "\f293"; } -i.icon.bluetooth.b:before { content: "\f294"; } -i.icon.bold:before { content: "\f032"; } -i.icon.bolt:before { content: "\f0e7"; } -i.icon.bomb:before { content: "\f1e2"; } -i.icon.book:before { content: "\f02d"; } -i.icon.bookmark:before { content: "\f02e"; } -i.icon.bowling.ball:before { content: "\f436"; } -i.icon.box:before { content: "\f466"; } -i.icon.boxes:before { content: "\f468"; } -i.icon.braille:before { content: "\f2a1"; } -i.icon.briefcase:before { content: "\f0b1"; } -i.icon.btc:before { content: "\f15a"; } -i.icon.bug:before { content: "\f188"; } -i.icon.building:before { content: "\f1ad"; } -i.icon.bullhorn:before { content: "\f0a1"; } -i.icon.bullseye:before { content: "\f140"; } -i.icon.buromobelexperte:before { content: "\f37f"; } -i.icon.bus:before { content: "\f207"; } -i.icon.buysellads:before { content: "\f20d"; } -i.icon.calculator:before { content: "\f1ec"; } -i.icon.calendar:before { content: "\f133"; } -i.icon.calendar.alternate:before { content: "\f073"; } -i.icon.calendar.check:before { content: "\f274"; } -i.icon.calendar.minus:before { content: "\f272"; } -i.icon.calendar.plus:before { content: "\f271"; } -i.icon.calendar.times:before { content: "\f273"; } -i.icon.camera:before { content: "\f030"; } -i.icon.camera.retro:before { content: "\f083"; } -i.icon.car:before { content: "\f1b9"; } -i.icon.caret.down:before { content: "\f0d7"; } -i.icon.caret.left:before { content: "\f0d9"; } -i.icon.caret.right:before { content: "\f0da"; } -i.icon.caret.square.down:before { content: "\f150"; } -i.icon.caret.square.left:before { content: "\f191"; } -i.icon.caret.square.right:before { content: "\f152"; } -i.icon.caret.square.up:before { content: "\f151"; } -i.icon.caret.up:before { content: "\f0d8"; } -i.icon.cart.arrow.down:before { content: "\f218"; } -i.icon.cart.plus:before { content: "\f217"; } -i.icon.cc.amazon.pay:before { content: "\f42d"; } -i.icon.cc.amex:before { content: "\f1f3"; } -i.icon.cc.apple.pay:before { content: "\f416"; } -i.icon.cc.diners.club:before { content: "\f24c"; } -i.icon.cc.discover:before { content: "\f1f2"; } -i.icon.cc.jcb:before { content: "\f24b"; } -i.icon.cc.mastercard:before { content: "\f1f1"; } -i.icon.cc.paypal:before { content: "\f1f4"; } -i.icon.cc.stripe:before { content: "\f1f5"; } -i.icon.cc.visa:before { content: "\f1f0"; } -i.icon.centercode:before { content: "\f380"; } -i.icon.certificate:before { content: "\f0a3"; } -i.icon.chart.area:before { content: "\f1fe"; } -i.icon.chart.bar:before { content: "\f080"; } -i.icon.chart.line:before { content: "\f201"; } -i.icon.chart.pie:before { content: "\f200"; } -i.icon.check:before { content: "\f00c"; } -i.icon.check.circle:before { content: "\f058"; } -i.icon.check.square:before { content: "\f14a"; } -i.icon.chess:before { content: "\f439"; } -i.icon.chess.bishop:before { content: "\f43a"; } -i.icon.chess.board:before { content: "\f43c"; } -i.icon.chess.king:before { content: "\f43f"; } -i.icon.chess.knight:before { content: "\f441"; } -i.icon.chess.pawn:before { content: "\f443"; } -i.icon.chess.queen:before { content: "\f445"; } -i.icon.chess.rook:before { content: "\f447"; } -i.icon.chevron.circle.down:before { content: "\f13a"; } -i.icon.chevron.circle.left:before { content: "\f137"; } -i.icon.chevron.circle.right:before { content: "\f138"; } -i.icon.chevron.circle.up:before { content: "\f139"; } -i.icon.chevron.down:before { content: "\f078"; } -i.icon.chevron.left:before { content: "\f053"; } -i.icon.chevron.right:before { content: "\f054"; } -i.icon.chevron.up:before { content: "\f077"; } -i.icon.child:before { content: "\f1ae"; } -i.icon.chrome:before { content: "\f268"; } -i.icon.circle:before { content: "\f111"; } -i.icon.circle.notch:before { content: "\f1ce"; } -i.icon.clipboard:before { content: "\f328"; } -i.icon.clipboard.check:before { content: "\f46c"; } -i.icon.clipboard.list:before { content: "\f46d"; } -i.icon.clock:before { content: "\f017"; } -i.icon.clone:before { content: "\f24d"; } -i.icon.closed.captioning:before { content: "\f20a"; } -i.icon.cloud:before { content: "\f0c2"; } -i.icon.cloudscale:before { content: "\f383"; } -i.icon.cloudsmith:before { content: "\f384"; } -i.icon.cloudversify:before { content: "\f385"; } -i.icon.code:before { content: "\f121"; } -i.icon.code.branch:before { content: "\f126"; } -i.icon.codepen:before { content: "\f1cb"; } -i.icon.codiepie:before { content: "\f284"; } -i.icon.coffee:before { content: "\f0f4"; } -i.icon.cog:before { content: "\f013"; } -i.icon.cogs:before { content: "\f085"; } -i.icon.columns:before { content: "\f0db"; } -i.icon.comment:before { content: "\f075"; } -i.icon.comment.alternate:before { content: "\f27a"; } -i.icon.comments:before { content: "\f086"; } -i.icon.compass:before { content: "\f14e"; } -i.icon.compress:before { content: "\f066"; } -i.icon.connectdevelop:before { content: "\f20e"; } -i.icon.contao:before { content: "\f26d"; } -i.icon.copy:before { content: "\f0c5"; } -i.icon.copyright:before { content: "\f1f9"; } -i.icon.cpanel:before { content: "\f388"; } -i.icon.creative.commons:before { content: "\f25e"; } -i.icon.credit.card:before { content: "\f09d"; } -i.icon.crop:before { content: "\f125"; } -i.icon.crosshairs:before { content: "\f05b"; } -i.icon.css3:before { content: "\f13c"; } -i.icon.css3.alternate:before { content: "\f38b"; } -i.icon.cube:before { content: "\f1b2"; } -i.icon.cubes:before { content: "\f1b3"; } -i.icon.cut:before { content: "\f0c4"; } -i.icon.cuttlefish:before { content: "\f38c"; } -i.icon.d.and.d:before { content: "\f38d"; } -i.icon.dashcube:before { content: "\f210"; } -i.icon.database:before { content: "\f1c0"; } -i.icon.deaf:before { content: "\f2a4"; } -i.icon.delicious:before { content: "\f1a5"; } -i.icon.deploydog:before { content: "\f38e"; } -i.icon.deskpro:before { content: "\f38f"; } -i.icon.desktop:before { content: "\f108"; } -i.icon.deviantart:before { content: "\f1bd"; } -i.icon.digg:before { content: "\f1a6"; } -i.icon.digital.ocean:before { content: "\f391"; } -i.icon.discord:before { content: "\f392"; } -i.icon.discourse:before { content: "\f393"; } -i.icon.dna:before { content: "\f471"; } -i.icon.dochub:before { content: "\f394"; } -i.icon.docker:before { content: "\f395"; } -i.icon.dollar.sign:before { content: "\f155"; } -i.icon.dolly:before { content: "\f472"; } -i.icon.dolly.flatbed:before { content: "\f474"; } -i.icon.dot.circle:before { content: "\f192"; } -i.icon.download:before { content: "\f019"; } -i.icon.draft2digital:before { content: "\f396"; } -i.icon.dribbble:before { content: "\f17d"; } -i.icon.dribbble.square:before { content: "\f397"; } -i.icon.dropbox:before { content: "\f16b"; } -i.icon.drupal:before { content: "\f1a9"; } -i.icon.dyalog:before { content: "\f399"; } -i.icon.earlybirds:before { content: "\f39a"; } -i.icon.edge:before { content: "\f282"; } -i.icon.edit:before { content: "\f044"; } -i.icon.eject:before { content: "\f052"; } -i.icon.elementor:before { content: "\f430"; } -i.icon.ellipsis.horizontal:before { content: "\f141"; } -i.icon.ellipsis.vertical:before { content: "\f142"; } -i.icon.ember:before { content: "\f423"; } -i.icon.empire:before { content: "\f1d1"; } -i.icon.envelope:before { content: "\f0e0"; } -i.icon.envelope.open:before { content: "\f2b6"; } -i.icon.envelope.square:before { content: "\f199"; } -i.icon.envira:before { content: "\f299"; } -i.icon.eraser:before { content: "\f12d"; } -i.icon.erlang:before { content: "\f39d"; } -i.icon.ethereum:before { content: "\f42e"; } -i.icon.etsy:before { content: "\f2d7"; } -i.icon.euro.sign:before { content: "\f153"; } -i.icon.exchange.alternate:before { content: "\f362"; } -i.icon.exclamation:before { content: "\f12a"; } -i.icon.exclamation.circle:before { content: "\f06a"; } -i.icon.exclamation.triangle:before { content: "\f071"; } -i.icon.expand:before { content: "\f065"; } -i.icon.expand.arrows.alternate:before { content: "\f31e"; } -i.icon.expeditedssl:before { content: "\f23e"; } -i.icon.external.alternate:before { content: "\f35d"; } -i.icon.external.square.alternate:before { content: "\f360"; } -i.icon.eye:before { content: "\f06e"; } -i.icon.eye.dropper:before { content: "\f1fb"; } -i.icon.eye.slash:before { content: "\f070"; } -i.icon.facebook:before { content: "\f09a"; } -i.icon.facebook.f:before { content: "\f39e"; } -i.icon.facebook.messenger:before { content: "\f39f"; } -i.icon.facebook.square:before { content: "\f082"; } -i.icon.fast.backward:before { content: "\f049"; } -i.icon.fast.forward:before { content: "\f050"; } -i.icon.fax:before { content: "\f1ac"; } -i.icon.female:before { content: "\f182"; } -i.icon.fighter.jet:before { content: "\f0fb"; } -i.icon.file:before { content: "\f15b"; } -i.icon.file.alternate:before { content: "\f15c"; } -i.icon.file.archive:before { content: "\f1c6"; } -i.icon.file.audio:before { content: "\f1c7"; } -i.icon.file.code:before { content: "\f1c9"; } -i.icon.file.excel:before { content: "\f1c3"; } -i.icon.file.image:before { content: "\f1c5"; } -i.icon.file.pdf:before { content: "\f1c1"; } -i.icon.file.powerpoint:before { content: "\f1c4"; } -i.icon.file.video:before { content: "\f1c8"; } -i.icon.file.word:before { content: "\f1c2"; } -i.icon.film:before { content: "\f008"; } -i.icon.filter:before { content: "\f0b0"; } -i.icon.fire:before { content: "\f06d"; } -i.icon.fire.extinguisher:before { content: "\f134"; } -i.icon.firefox:before { content: "\f269"; } -i.icon.first.aid:before { content: "\f479"; } -i.icon.first.order:before { content: "\f2b0"; } -i.icon.firstdraft:before { content: "\f3a1"; } -i.icon.flag:before { content: "\f024"; } -i.icon.flag.checkered:before { content: "\f11e"; } -i.icon.flask:before { content: "\f0c3"; } -i.icon.flickr:before { content: "\f16e"; } -i.icon.flipboard:before { content: "\f44d"; } -i.icon.fly:before { content: "\f417"; } -i.icon.folder:before { content: "\f07b"; } -i.icon.folder.open:before { content: "\f07c"; } -i.icon.font:before { content: "\f031"; } -i.icon.font.awesome:before { content: "\f2b4"; } -i.icon.font.awesome.alternate:before { content: "\f35c"; } -i.icon.font.awesome.flag:before { content: "\f425"; } -i.icon.fonticons:before { content: "\f280"; } -i.icon.fonticons.fi:before { content: "\f3a2"; } -i.icon.football.ball:before { content: "\f44e"; } -i.icon.fort.awesome:before { content: "\f286"; } -i.icon.fort.awesome.alternate:before { content: "\f3a3"; } -i.icon.forumbee:before { content: "\f211"; } -i.icon.forward:before { content: "\f04e"; } -i.icon.foursquare:before { content: "\f180"; } -i.icon.free.code.camp:before { content: "\f2c5"; } -i.icon.freebsd:before { content: "\f3a4"; } -i.icon.frown:before { content: "\f119"; } -i.icon.futbol:before { content: "\f1e3"; } -i.icon.gamepad:before { content: "\f11b"; } -i.icon.gavel:before { content: "\f0e3"; } -i.icon.gem:before { content: "\f3a5"; } -i.icon.genderless:before { content: "\f22d"; } -i.icon.get.pocket:before { content: "\f265"; } -i.icon.gg:before { content: "\f260"; } -i.icon.gg.circle:before { content: "\f261"; } -i.icon.gift:before { content: "\f06b"; } -i.icon.git:before { content: "\f1d3"; } -i.icon.git.square:before { content: "\f1d2"; } -i.icon.github:before { content: "\f09b"; } -i.icon.github.alternate:before { content: "\f113"; } -i.icon.github.square:before { content: "\f092"; } -i.icon.gitkraken:before { content: "\f3a6"; } -i.icon.gitlab:before { content: "\f296"; } -i.icon.gitter:before { content: "\f426"; } -i.icon.glass.martini:before { content: "\f000"; } -i.icon.glide:before { content: "\f2a5"; } -i.icon.glide.g:before { content: "\f2a6"; } -i.icon.globe:before { content: "\f0ac"; } -i.icon.gofore:before { content: "\f3a7"; } -i.icon.golf.ball:before { content: "\f450"; } -i.icon.goodreads:before { content: "\f3a8"; } -i.icon.goodreads.g:before { content: "\f3a9"; } -i.icon.google:before { content: "\f1a0"; } -i.icon.google.drive:before { content: "\f3aa"; } -i.icon.google.play:before { content: "\f3ab"; } -i.icon.google.plus:before { content: "\f2b3"; } -i.icon.google.plus.g:before { content: "\f0d5"; } -i.icon.google.plus.square:before { content: "\f0d4"; } -i.icon.google.wallet:before { content: "\f1ee"; } -i.icon.graduation.cap:before { content: "\f19d"; } -i.icon.gratipay:before { content: "\f184"; } -i.icon.grav:before { content: "\f2d6"; } -i.icon.gripfire:before { content: "\f3ac"; } -i.icon.grunt:before { content: "\f3ad"; } -i.icon.gulp:before { content: "\f3ae"; } -i.icon.h.square:before { content: "\f0fd"; } -i.icon.hacker.news:before { content: "\f1d4"; } -i.icon.hacker.news.square:before { content: "\f3af"; } -i.icon.hand.lizard:before { content: "\f258"; } -i.icon.hand.paper:before { content: "\f256"; } -i.icon.hand.peace:before { content: "\f25b"; } -i.icon.hand.point.down:before { content: "\f0a7"; } -i.icon.hand.point.left:before { content: "\f0a5"; } -i.icon.hand.point.right:before { content: "\f0a4"; } -i.icon.hand.point.up:before { content: "\f0a6"; } -i.icon.hand.pointer:before { content: "\f25a"; } -i.icon.hand.rock:before { content: "\f255"; } -i.icon.hand.scissors:before { content: "\f257"; } -i.icon.hand.spock:before { content: "\f259"; } -i.icon.handshake:before { content: "\f2b5"; } -i.icon.hashtag:before { content: "\f292"; } -i.icon.hdd:before { content: "\f0a0"; } -i.icon.heading:before { content: "\f1dc"; } -i.icon.headphones:before { content: "\f025"; } -i.icon.heart:before { content: "\f004"; } -i.icon.heartbeat:before { content: "\f21e"; } -i.icon.hips:before { content: "\f452"; } -i.icon.hire.a.helper:before { content: "\f3b0"; } -i.icon.history:before { content: "\f1da"; } -i.icon.hockey.puck:before { content: "\f453"; } -i.icon.home:before { content: "\f015"; } -i.icon.hooli:before { content: "\f427"; } -i.icon.hospital:before { content: "\f0f8"; } -i.icon.hospital.symbol:before { content: "\f47e"; } -i.icon.hotjar:before { content: "\f3b1"; } -i.icon.hourglass:before { content: "\f254"; } -i.icon.hourglass.end:before { content: "\f253"; } -i.icon.hourglass.half:before { content: "\f252"; } -i.icon.hourglass.start:before { content: "\f251"; } -i.icon.houzz:before { content: "\f27c"; } -i.icon.html5:before { content: "\f13b"; } -i.icon.hubspot:before { content: "\f3b2"; } -i.icon.i.cursor:before { content: "\f246"; } -i.icon.id.badge:before { content: "\f2c1"; } -i.icon.id.card:before { content: "\f2c2"; } -i.icon.image:before { content: "\f03e"; } -i.icon.images:before { content: "\f302"; } -i.icon.imdb:before { content: "\f2d8"; } -i.icon.inbox:before { content: "\f01c"; } -i.icon.indent:before { content: "\f03c"; } -i.icon.industry:before { content: "\f275"; } -i.icon.info:before { content: "\f129"; } -i.icon.info.circle:before { content: "\f05a"; } -i.icon.instagram:before { content: "\f16d"; } -i.icon.internet.explorer:before { content: "\f26b"; } -i.icon.ioxhost:before { content: "\f208"; } -i.icon.italic:before { content: "\f033"; } -i.icon.itunes:before { content: "\f3b4"; } -i.icon.itunes.note:before { content: "\f3b5"; } -i.icon.jenkins:before { content: "\f3b6"; } -i.icon.joget:before { content: "\f3b7"; } -i.icon.joomla:before { content: "\f1aa"; } -i.icon.js:before { content: "\f3b8"; } -i.icon.js.square:before { content: "\f3b9"; } -i.icon.jsfiddle:before { content: "\f1cc"; } -i.icon.key:before { content: "\f084"; } -i.icon.keyboard:before { content: "\f11c"; } -i.icon.keycdn:before { content: "\f3ba"; } -i.icon.kickstarter:before { content: "\f3bb"; } -i.icon.kickstarter.k:before { content: "\f3bc"; } -i.icon.korvue:before { content: "\f42f"; } -i.icon.language:before { content: "\f1ab"; } -i.icon.laptop:before { content: "\f109"; } -i.icon.laravel:before { content: "\f3bd"; } -i.icon.lastfm:before { content: "\f202"; } -i.icon.lastfm.square:before { content: "\f203"; } -i.icon.leaf:before { content: "\f06c"; } -i.icon.leanpub:before { content: "\f212"; } -i.icon.lemon:before { content: "\f094"; } -i.icon.less:before { content: "\f41d"; } -i.icon.level.down.alternate:before { content: "\f3be"; } -i.icon.level.up.alternate:before { content: "\f3bf"; } -i.icon.life.ring:before { content: "\f1cd"; } -i.icon.lightbulb:before { content: "\f0eb"; } -i.icon.linechat:before { content: "\f3c0"; } -i.icon.linkify:before { content: "\f0c1"; } -i.icon.linkedin:before { content: "\f08c"; } -i.icon.linkedin.alt:before { content: "\f0e1"; } -i.icon.linode:before { content: "\f2b8"; } -i.icon.linux:before { content: "\f17c"; } -i.icon.lira.sign:before { content: "\f195"; } -i.icon.list:before { content: "\f03a"; } -i.icon.list.alternate:before { content: "\f022"; } -i.icon.list.ol:before { content: "\f0cb"; } -i.icon.list.ul:before { content: "\f0ca"; } -i.icon.location.arrow:before { content: "\f124"; } -i.icon.lock:before { content: "\f023"; } -i.icon.lock.open:before { content: "\f3c1"; } -i.icon.long.arrow.alternate.down:before { content: "\f309"; } -i.icon.long.arrow.alternate.left:before { content: "\f30a"; } -i.icon.long.arrow.alternate.right:before { content: "\f30b"; } -i.icon.long.arrow.alternate.up:before { content: "\f30c"; } -i.icon.low.vision:before { content: "\f2a8"; } -i.icon.lyft:before { content: "\f3c3"; } -i.icon.magento:before { content: "\f3c4"; } -i.icon.magic:before { content: "\f0d0"; } -i.icon.magnet:before { content: "\f076"; } -i.icon.male:before { content: "\f183"; } -i.icon.map:before { content: "\f279"; } -i.icon.map.marker:before { content: "\f041"; } -i.icon.map.marker.alternate:before { content: "\f3c5"; } -i.icon.map.pin:before { content: "\f276"; } -i.icon.map.signs:before { content: "\f277"; } -i.icon.mars:before { content: "\f222"; } -i.icon.mars.double:before { content: "\f227"; } -i.icon.mars.stroke:before { content: "\f229"; } -i.icon.mars.stroke.horizontal:before { content: "\f22b"; } -i.icon.mars.stroke.vertical:before { content: "\f22a"; } -i.icon.maxcdn:before { content: "\f136"; } -i.icon.medapps:before { content: "\f3c6"; } -i.icon.medium:before { content: "\f23a"; } -i.icon.medium.m:before { content: "\f3c7"; } -i.icon.medkit:before { content: "\f0fa"; } -i.icon.medrt:before { content: "\f3c8"; } -i.icon.meetup:before { content: "\f2e0"; } -i.icon.meh:before { content: "\f11a"; } -i.icon.mercury:before { content: "\f223"; } -i.icon.microchip:before { content: "\f2db"; } -i.icon.microphone:before { content: "\f130"; } -i.icon.microphone.slash:before { content: "\f131"; } -i.icon.microsoft:before { content: "\f3ca"; } -i.icon.minus:before { content: "\f068"; } -i.icon.minus.circle:before { content: "\f056"; } -i.icon.minus.square:before { content: "\f146"; } -i.icon.mix:before { content: "\f3cb"; } -i.icon.mixcloud:before { content: "\f289"; } -i.icon.mizuni:before { content: "\f3cc"; } -i.icon.mobile:before { content: "\f10b"; } -i.icon.mobile.alternate:before { content: "\f3cd"; } -i.icon.modx:before { content: "\f285"; } -i.icon.monero:before { content: "\f3d0"; } -i.icon.money.bill.alternate:before { content: "\f3d1"; } -i.icon.moon:before { content: "\f186"; } -i.icon.motorcycle:before { content: "\f21c"; } -i.icon.mouse.pointer:before { content: "\f245"; } -i.icon.music:before { content: "\f001"; } -i.icon.napster:before { content: "\f3d2"; } -i.icon.neuter:before { content: "\f22c"; } -i.icon.newspaper:before { content: "\f1ea"; } -i.icon.nintendo.switch:before { content: "\f418"; } -i.icon.node:before { content: "\f419"; } -i.icon.node.js:before { content: "\f3d3"; } -i.icon.npm:before { content: "\f3d4"; } -i.icon.ns8:before { content: "\f3d5"; } -i.icon.nutritionix:before { content: "\f3d6"; } -i.icon.object.group:before { content: "\f247"; } -i.icon.object.ungroup:before { content: "\f248"; } -i.icon.odnoklassniki:before { content: "\f263"; } -i.icon.odnoklassniki.square:before { content: "\f264"; } -i.icon.opencart:before { content: "\f23d"; } -i.icon.openid:before { content: "\f19b"; } -i.icon.opera:before { content: "\f26a"; } -i.icon.optin.monster:before { content: "\f23c"; } -i.icon.osi:before { content: "\f41a"; } -i.icon.outdent:before { content: "\f03b"; } -i.icon.page4:before { content: "\f3d7"; } -i.icon.pagelines:before { content: "\f18c"; } -i.icon.paint.brush:before { content: "\f1fc"; } -i.icon.palfed:before { content: "\f3d8"; } -i.icon.pallet:before { content: "\f482"; } -i.icon.paper.plane:before { content: "\f1d8"; } -i.icon.paperclip:before { content: "\f0c6"; } -i.icon.paragraph:before { content: "\f1dd"; } -i.icon.paste:before { content: "\f0ea"; } -i.icon.patreon:before { content: "\f3d9"; } -i.icon.pause:before { content: "\f04c"; } -i.icon.pause.circle:before { content: "\f28b"; } -i.icon.paw:before { content: "\f1b0"; } -i.icon.paypal:before { content: "\f1ed"; } -i.icon.pen.square:before { content: "\f14b"; } -i.icon.pencil.alternate:before { content: "\f303"; } -i.icon.percent:before { content: "\f295"; } -i.icon.periscope:before { content: "\f3da"; } -i.icon.phabricator:before { content: "\f3db"; } -i.icon.phoenix.framework:before { content: "\f3dc"; } -i.icon.phone:before { content: "\f095"; } -i.icon.phone.square:before { content: "\f098"; } -i.icon.phone.volume:before { content: "\f2a0"; } -i.icon.php:before { content: "\f457"; } -i.icon.pied.piper:before { content: "\f2ae"; } -i.icon.pied.piper.alternate:before { content: "\f1a8"; } -i.icon.pied.piper.pp:before { content: "\f1a7"; } -i.icon.pills:before { content: "\f484"; } -i.icon.pinterest:before { content: "\f0d2"; } -i.icon.pinterest.p:before { content: "\f231"; } -i.icon.pinterest.square:before { content: "\f0d3"; } -i.icon.plane:before { content: "\f072"; } -i.icon.play:before { content: "\f04b"; } -i.icon.play.circle:before { content: "\f144"; } -i.icon.playstation:before { content: "\f3df"; } -i.icon.plug:before { content: "\f1e6"; } -i.icon.plus:before { content: "\f067"; } -i.icon.plus.circle:before { content: "\f055"; } -i.icon.plus.square:before { content: "\f0fe"; } -i.icon.podcast:before { content: "\f2ce"; } -i.icon.pound.sign:before { content: "\f154"; } -i.icon.power.off:before { content: "\f011"; } -i.icon.print:before { content: "\f02f"; } -i.icon.product.hunt:before { content: "\f288"; } -i.icon.pushed:before { content: "\f3e1"; } -i.icon.puzzle.piece:before { content: "\f12e"; } -i.icon.python:before { content: "\f3e2"; } -i.icon.qq:before { content: "\f1d6"; } -i.icon.qrcode:before { content: "\f029"; } -i.icon.question:before { content: "\f128"; } -i.icon.question.circle:before { content: "\f059"; } -i.icon.quidditch:before { content: "\f458"; } -i.icon.quinscape:before { content: "\f459"; } -i.icon.quora:before { content: "\f2c4"; } -i.icon.quote.left:before { content: "\f10d"; } -i.icon.quote.right:before { content: "\f10e"; } -i.icon.random:before { content: "\f074"; } -i.icon.ravelry:before { content: "\f2d9"; } -i.icon.react:before { content: "\f41b"; } -i.icon.rebel:before { content: "\f1d0"; } -i.icon.recycle:before { content: "\f1b8"; } -i.icon.redriver:before { content: "\f3e3"; } -i.icon.reddit:before { content: "\f1a1"; } -i.icon.reddit.alien:before { content: "\f281"; } -i.icon.reddit.square:before { content: "\f1a2"; } -i.icon.redo:before { content: "\f01e"; } -i.icon.redo.alternate:before { content: "\f2f9"; } -i.icon.registered:before { content: "\f25d"; } -i.icon.rendact:before { content: "\f3e4"; } -i.icon.renren:before { content: "\f18b"; } -i.icon.reply:before { content: "\f3e5"; } -i.icon.reply.all:before { content: "\f122"; } -i.icon.replyd:before { content: "\f3e6"; } -i.icon.resolving:before { content: "\f3e7"; } -i.icon.retweet:before { content: "\f079"; } -i.icon.road:before { content: "\f018"; } -i.icon.rocket:before { content: "\f135"; } -i.icon.rocketchat:before { content: "\f3e8"; } -i.icon.rockrms:before { content: "\f3e9"; } -i.icon.rss:before { content: "\f09e"; } -i.icon.rss.square:before { content: "\f143"; } -i.icon.ruble.sign:before { content: "\f158"; } -i.icon.rupee.sign:before { content: "\f156"; } -i.icon.safari:before { content: "\f267"; } -i.icon.sass:before { content: "\f41e"; } -i.icon.save:before { content: "\f0c7"; } -i.icon.schlix:before { content: "\f3ea"; } -i.icon.scribd:before { content: "\f28a"; } -i.icon.search:before { content: "\f002"; } -i.icon.search.minus:before { content: "\f010"; } -i.icon.search.plus:before { content: "\f00e"; } -i.icon.searchengin:before { content: "\f3eb"; } -i.icon.sellcast:before { content: "\f2da"; } -i.icon.sellsy:before { content: "\f213"; } -i.icon.server:before { content: "\f233"; } -i.icon.servicestack:before { content: "\f3ec"; } -i.icon.share:before { content: "\f064"; } -i.icon.share.alternate:before { content: "\f1e0"; } -i.icon.share.alternate.square:before { content: "\f1e1"; } -i.icon.share.square:before { content: "\f14d"; } -i.icon.shekel.sign:before { content: "\f20b"; } -i.icon.shield.alternate:before { content: "\f3ed"; } -i.icon.ship:before { content: "\f21a"; } -i.icon.shipping.fast:before { content: "\f48b"; } -i.icon.shirtsinbulk:before { content: "\f214"; } -i.icon.shopping.bag:before { content: "\f290"; } -i.icon.shopping.basket:before { content: "\f291"; } -i.icon.shopping.cart:before { content: "\f07a"; } -i.icon.shower:before { content: "\f2cc"; } -i.icon.sign.language:before { content: "\f2a7"; } -i.icon.signal:before { content: "\f012"; } -i.icon.simplybuilt:before { content: "\f215"; } -i.icon.sistrix:before { content: "\f3ee"; } -i.icon.sitemap:before { content: "\f0e8"; } -i.icon.skyatlas:before { content: "\f216"; } -i.icon.skype:before { content: "\f17e"; } -i.icon.slack:before { content: "\f198"; } -i.icon.slack.hash:before { content: "\f3ef"; } -i.icon.sliders.horizontal:before { content: "\f1de"; } -i.icon.slideshare:before { content: "\f1e7"; } -i.icon.smile:before { content: "\f118"; } -i.icon.snapchat:before { content: "\f2ab"; } -i.icon.snapchat.ghost:before { content: "\f2ac"; } -i.icon.snapchat.square:before { content: "\f2ad"; } -i.icon.snowflake:before { content: "\f2dc"; } -i.icon.sort:before { content: "\f0dc"; } -i.icon.sort.alphabet.down:before { content: "\f15d"; } -i.icon.sort.alphabet.up:before { content: "\f15e"; } -i.icon.sort.amount.down:before { content: "\f160"; } -i.icon.sort.amount.up:before { content: "\f161"; } -i.icon.sort.down:before { content: "\f0dd"; } -i.icon.sort.numeric.down:before { content: "\f162"; } -i.icon.sort.numeric.up:before { content: "\f163"; } -i.icon.sort.up:before { content: "\f0de"; } -i.icon.soundcloud:before { content: "\f1be"; } -i.icon.space.shuttle:before { content: "\f197"; } -i.icon.speakap:before { content: "\f3f3"; } -i.icon.spinner:before { content: "\f110"; } -i.icon.spotify:before { content: "\f1bc"; } -i.icon.square:before { content: "\f0c8"; } -i.icon.square.full:before { content: "\f45c"; } -i.icon.stack.exchange:before { content: "\f18d"; } -i.icon.stack.overflow:before { content: "\f16c"; } -i.icon.star:before { content: "\f005"; } -i.icon.star.half:before { content: "\f089"; } -i.icon.staylinked:before { content: "\f3f5"; } -i.icon.steam:before { content: "\f1b6"; } -i.icon.steam.square:before { content: "\f1b7"; } -i.icon.steam.symbol:before { content: "\f3f6"; } -i.icon.step.backward:before { content: "\f048"; } -i.icon.step.forward:before { content: "\f051"; } -i.icon.stethoscope:before { content: "\f0f1"; } -i.icon.sticker.mule:before { content: "\f3f7"; } -i.icon.sticky.note:before { content: "\f249"; } -i.icon.stop:before { content: "\f04d"; } -i.icon.stop.circle:before { content: "\f28d"; } -i.icon.stopwatch:before { content: "\f2f2"; } -i.icon.strava:before { content: "\f428"; } -i.icon.street.view:before { content: "\f21d"; } -i.icon.strikethrough:before { content: "\f0cc"; } -i.icon.stripe:before { content: "\f429"; } -i.icon.stripe.s:before { content: "\f42a"; } -i.icon.studiovinari:before { content: "\f3f8"; } -i.icon.stumbleupon:before { content: "\f1a4"; } -i.icon.stumbleupon.circle:before { content: "\f1a3"; } -i.icon.subscript:before { content: "\f12c"; } -i.icon.subway:before { content: "\f239"; } -i.icon.suitcase:before { content: "\f0f2"; } -i.icon.sun:before { content: "\f185"; } -i.icon.superpowers:before { content: "\f2dd"; } -i.icon.superscript:before { content: "\f12b"; } -i.icon.supple:before { content: "\f3f9"; } -i.icon.sync:before { content: "\f021"; } -i.icon.sync.alternate:before { content: "\f2f1"; } -i.icon.syringe:before { content: "\f48e"; } -i.icon.table:before { content: "\f0ce"; } -i.icon.table.tennis:before { content: "\f45d"; } -i.icon.tablet:before { content: "\f10a"; } -i.icon.tablet.alternate:before { content: "\f3fa"; } -i.icon.tachometer.alternate:before { content: "\f3fd"; } -i.icon.tag:before { content: "\f02b"; } -i.icon.tags:before { content: "\f02c"; } -i.icon.tasks:before { content: "\f0ae"; } -i.icon.taxi:before { content: "\f1ba"; } -i.icon.telegram:before { content: "\f2c6"; } -i.icon.telegram.plane:before { content: "\f3fe"; } -i.icon.tencent.weibo:before { content: "\f1d5"; } -i.icon.terminal:before { content: "\f120"; } -i.icon.text.height:before { content: "\f034"; } -i.icon.text.width:before { content: "\f035"; } -i.icon.th:before { content: "\f00a"; } -i.icon.th.large:before { content: "\f009"; } -i.icon.th.list:before { content: "\f00b"; } -i.icon.themeisle:before { content: "\f2b2"; } -i.icon.thermometer:before { content: "\f491"; } -i.icon.thermometer.empty:before { content: "\f2cb"; } -i.icon.thermometer.full:before { content: "\f2c7"; } -i.icon.thermometer.half:before { content: "\f2c9"; } -i.icon.thermometer.quarter:before { content: "\f2ca"; } -i.icon.thermometer.three.quarters:before { content: "\f2c8"; } -i.icon.thumbs.down:before { content: "\f165"; } -i.icon.thumbs.up:before { content: "\f164"; } -i.icon.thumbtack:before { content: "\f08d"; } -i.icon.ticket.alternate:before { content: "\f3ff"; } -i.icon.times:before { content: "\f00d"; } -i.icon.times.circle:before { content: "\f057"; } -i.icon.tint:before { content: "\f043"; } -i.icon.toggle.off:before { content: "\f204"; } -i.icon.toggle.on:before { content: "\f205"; } -i.icon.trademark:before { content: "\f25c"; } -i.icon.train:before { content: "\f238"; } -i.icon.transgender:before { content: "\f224"; } -i.icon.transgender.alternate:before { content: "\f225"; } -i.icon.trash:before { content: "\f1f8"; } -i.icon.trash.alternate:before { content: "\f2ed"; } -i.icon.tree:before { content: "\f1bb"; } -i.icon.trello:before { content: "\f181"; } -i.icon.tripadvisor:before { content: "\f262"; } -i.icon.trophy:before { content: "\f091"; } -i.icon.truck:before { content: "\f0d1"; } -i.icon.tty:before { content: "\f1e4"; } -i.icon.tumblr:before { content: "\f173"; } -i.icon.tumblr.square:before { content: "\f174"; } -i.icon.tv:before { content: "\f26c"; } -i.icon.twitch:before { content: "\f1e8"; } -i.icon.twitter:before { content: "\f099"; } -i.icon.twitter.square:before { content: "\f081"; } -i.icon.typo3:before { content: "\f42b"; } -i.icon.uber:before { content: "\f402"; } -i.icon.uikit:before { content: "\f403"; } -i.icon.umbrella:before { content: "\f0e9"; } -i.icon.underline:before { content: "\f0cd"; } -i.icon.undo:before { content: "\f0e2"; } -i.icon.undo.alternate:before { content: "\f2ea"; } -i.icon.uniregistry:before { content: "\f404"; } -i.icon.universal.access:before { content: "\f29a"; } -i.icon.university:before { content: "\f19c"; } -i.icon.unlink:before { content: "\f127"; } -i.icon.unlock:before { content: "\f09c"; } -i.icon.unlock.alternate:before { content: "\f13e"; } -i.icon.untappd:before { content: "\f405"; } -i.icon.upload:before { content: "\f093"; } -i.icon.usb:before { content: "\f287"; } -i.icon.user:before { content: "\f007"; } -i.icon.user.circle:before { content: "\f2bd"; } -i.icon.user.md:before { content: "\f0f0"; } -i.icon.user.plus:before { content: "\f234"; } -i.icon.user.secret:before { content: "\f21b"; } -i.icon.user.times:before { content: "\f235"; } -i.icon.users:before { content: "\f0c0"; } -i.icon.ussunnah:before { content: "\f407"; } -i.icon.utensil.spoon:before { content: "\f2e5"; } -i.icon.utensils:before { content: "\f2e7"; } -i.icon.vaadin:before { content: "\f408"; } -i.icon.venus:before { content: "\f221"; } -i.icon.venus.double:before { content: "\f226"; } -i.icon.venus.mars:before { content: "\f228"; } -i.icon.viacoin:before { content: "\f237"; } -i.icon.viadeo:before { content: "\f2a9"; } -i.icon.viadeo.square:before { content: "\f2aa"; } -i.icon.viber:before { content: "\f409"; } -i.icon.video:before { content: "\f03d"; } -i.icon.vimeo:before { content: "\f40a"; } -i.icon.vimeo.square:before { content: "\f194"; } -i.icon.vimeo.v:before { content: "\f27d"; } -i.icon.vine:before { content: "\f1ca"; } -i.icon.vk:before { content: "\f189"; } -i.icon.vnv:before { content: "\f40b"; } -i.icon.volleyball.ball:before { content: "\f45f"; } -i.icon.volume.down:before { content: "\f027"; } -i.icon.volume.off:before { content: "\f026"; } -i.icon.volume.up:before { content: "\f028"; } -i.icon.vuejs:before { content: "\f41f"; } -i.icon.warehouse:before { content: "\f494"; } -i.icon.weibo:before { content: "\f18a"; } -i.icon.weight:before { content: "\f496"; } -i.icon.weixin:before { content: "\f1d7"; } -i.icon.whatsapp:before { content: "\f232"; } -i.icon.whatsapp.square:before { content: "\f40c"; } -i.icon.wheelchair:before { content: "\f193"; } -i.icon.whmcs:before { content: "\f40d"; } -i.icon.wifi:before { content: "\f1eb"; } -i.icon.wikipedia.w:before { content: "\f266"; } -i.icon.window.close:before { content: "\f410"; } -i.icon.window.maximize:before { content: "\f2d0"; } -i.icon.window.minimize:before { content: "\f2d1"; } -i.icon.window.restore:before { content: "\f2d2"; } -i.icon.windows:before { content: "\f17a"; } -i.icon.won.sign:before { content: "\f159"; } -i.icon.wordpress:before { content: "\f19a"; } -i.icon.wordpress.simple:before { content: "\f411"; } -i.icon.wpbeginner:before { content: "\f297"; } -i.icon.wpexplorer:before { content: "\f2de"; } -i.icon.wpforms:before { content: "\f298"; } -i.icon.wrench:before { content: "\f0ad"; } -i.icon.xbox:before { content: "\f412"; } -i.icon.xing:before { content: "\f168"; } -i.icon.xing.square:before { content: "\f169"; } -i.icon.y.combinator:before { content: "\f23b"; } -i.icon.yahoo:before { content: "\f19e"; } -i.icon.yandex:before { content: "\f413"; } -i.icon.yandex.international:before { content: "\f414"; } -i.icon.yelp:before { content: "\f1e9"; } -i.icon.yen.sign:before { content: "\f157"; } -i.icon.yoast:before { content: "\f2b1"; } -i.icon.youtube:before { content: "\f167"; } -i.icon.youtube.square:before { content: "\f431"; } +i.icon.ticket:before { + content: '\f3ff'; +} -/* Aliases */ -i.icon.chess.rock:before { content: "\f447"; } -i.icon.ordered.list:before { content: "\f0cb"; } -i.icon.unordered.list:before { content: "\f0ca"; } -i.icon.user.doctor:before { content: "\f0f0"; } -i.icon.shield:before { content: "\f3ed"; } -i.icon.puzzle:before { content: "\f12e"; } -i.icon.credit.card.amazon.pay:before { content: "\f42d"; } -i.icon.credit.card.american.express:before { content: "\f1f3"; } -i.icon.credit.card.diners.club:before { content: "\f24c"; } -i.icon.credit.card.discover:before { content: "\f1f2"; } -i.icon.credit.card.jcb:before { content: "\f24b"; } -i.icon.credit.card.mastercard:before { content: "\f1f1"; } -i.icon.credit.card.paypal:before { content: "\f1f4"; } -i.icon.credit.card.stripe:before { content: "\f1f5"; } -i.icon.credit.card.visa:before { content: "\f1f0"; } -i.icon.add.circle:before { content: "\f055"; } -i.icon.add.square:before { content: "\f0fe"; } -i.icon.add.to.calendar:before { content: "\f271"; } -i.icon.add.to.cart:before { content: "\f217"; } -i.icon.add.user:before { content: "\f234"; } -i.icon.add:before { content: "\f067"; } -i.icon.alarm.mute:before { content: "\f1f6"; } -i.icon.alarm:before { content: "\f0f3"; } -i.icon.ald:before { content: "\f2a2"; } -i.icon.als:before { content: "\f2a2"; } -i.icon.american.express.card:before { content: "\f1f3"; } -i.icon.american.express:before { content: "\f1f3"; } -i.icon.amex:before { content: "\f1f3"; } -i.icon.announcement:before { content: "\f0a1"; } -i.icon.area.chart:before { content: "\f1fe"; } -i.icon.area.graph:before { content: "\f1fe"; } -i.icon.arrow.down.cart:before { content: "\f218"; } -i.icon.asexual:before { content: "\f22d"; } -i.icon.asl.interpreting:before { content: "\f2a3"; } -i.icon.asl:before { content: "\f2a3"; } -i.icon.assistive.listening.devices:before { content: "\f2a2"; } -i.icon.attach:before { content: "\f0c6"; } -i.icon.attention:before { content: "\f06a"; } -i.icon.balance:before { content: "\f24e"; } -i.icon.bar:before { content: "\f0fc"; } -i.icon.bathtub:before { content: "\f2cd"; } -i.icon.battery.four:before { content: "\f240"; } -i.icon.battery.high:before { content: "\f241"; } -i.icon.battery.low:before { content: "\f243"; } -i.icon.battery.medium:before { content: "\f242"; } -i.icon.battery.one:before { content: "\f243"; } -i.icon.battery.three:before { content: "\f241"; } -i.icon.battery.two:before { content: "\f242"; } -i.icon.battery.zero:before { content: "\f244"; } -i.icon.birthday:before { content: "\f1fd"; } -i.icon.block.layout:before { content: "\f009"; } -i.icon.bluetooth.alternative:before { content: "\f294"; } -i.icon.broken.chain:before { content: "\f127"; } -i.icon.browser:before { content: "\f022"; } -i.icon.call.square:before { content: "\f098"; } -i.icon.call:before { content: "\f095"; } -i.icon.cancel:before { content: "\f00d"; } -i.icon.cart:before { content: "\f07a"; } -i.icon.cc:before { content: "\f20a"; } -i.icon.chain:before { content: "\f0c1"; } -i.icon.chat:before { content: "\f075"; } -i.icon.checked.calendar:before { content: "\f274"; } -i.icon.checkmark:before { content: "\f00c"; } -i.icon.circle.notched:before { content: "\f1ce"; } -i.icon.close:before { content: "\f00d"; } -i.icon.cny:before { content: "\f157"; } -i.icon.cocktail:before { content: "\f000"; } -i.icon.commenting:before { content: "\f27a"; } -i.icon.computer:before { content: "\f108"; } -i.icon.configure:before { content: "\f0ad"; } -i.icon.content:before { content: "\f0c9"; } -i.icon.deafness:before { content: "\f2a4"; } -i.icon.delete.calendar:before { content: "\f273"; } -i.icon.delete:before { content: "\f00d"; } -i.icon.detective:before { content: "\f21b"; } -i.icon.diners.club.card:before { content: "\f24c"; } -i.icon.diners.club:before { content: "\f24c"; } -i.icon.discover.card:before { content: "\f1f2"; } -i.icon.discover:before { content: "\f1f2"; } -i.icon.discussions:before { content: "\f086"; } -i.icon.doctor:before { content: "\f0f0"; } -i.icon.dollar:before { content: "\f155"; } -i.icon.dont:before { content: "\f05e"; } -i.icon.dribble:before { content: "\f17d"; } -i.icon.drivers.license:before { content: "\f2c2"; } -i.icon.dropdown:before { content: "\f0d7"; } -i.icon.eercast:before { content: "\f2da"; } -i.icon.emergency:before { content: "\f0f9"; } -i.icon.envira.gallery:before { content: "\f299"; } -i.icon.erase:before { content: "\f12d"; } -i.icon.eur:before { content: "\f153"; } -i.icon.euro:before { content: "\f153"; } -i.icon.eyedropper:before { content: "\f1fb"; } -i.icon.fa:before { content: "\f2b4"; } -i.icon.factory:before { content: "\f275"; } -i.icon.favorite:before { content: "\f005"; } -i.icon.feed:before { content: "\f09e"; } -i.icon.female.homosexual:before { content: "\f226"; } -i.icon.file.text:before { content: "\f15c"; } -i.icon.find:before { content: "\f1e5"; } -i.icon.first.aid:before { content: "\f0fa"; } -i.icon.five.hundred.pixels:before { content: "\f26e"; } -i.icon.fork:before { content: "\f126"; } -i.icon.game:before { content: "\f11b"; } -i.icon.gay:before { content: "\f227"; } -i.icon.gbp:before { content: "\f154"; } -i.icon.gittip:before { content: "\f184"; } -i.icon.google.plus.circle:before { content: "\f2b3"; } -i.icon.google.plus.official:before { content: "\f2b3"; } -i.icon.grab:before { content: "\f255"; } -i.icon.graduation:before { content: "\f19d"; } -i.icon.grid.layout:before { content: "\f00a"; } -i.icon.group:before { content: "\f0c0"; } -i.icon.h:before { content: "\f0fd"; } -i.icon.hand.victory:before { content: "\f25b"; } -i.icon.handicap:before { content: "\f193"; } -i.icon.hard.of.hearing:before { content: "\f2a4"; } -i.icon.header:before { content: "\f1dc"; } -i.icon.help.circle:before { content: "\f059"; } -i.icon.help:before { content: "\f128"; } -i.icon.heterosexual:before { content: "\f228"; } -i.icon.hide:before { content: "\f070"; } -i.icon.hotel:before { content: "\f236"; } -i.icon.hourglass.four:before { content: "\f254"; } -i.icon.hourglass.full:before { content: "\f254"; } -i.icon.hourglass.one:before { content: "\f251"; } -i.icon.hourglass.three:before { content: "\f253"; } -i.icon.hourglass.two:before { content: "\f252"; } -i.icon.idea:before { content: "\f0eb"; } -i.icon.ils:before { content: "\f20b"; } -i.icon.in-cart:before { content: "\f218"; } -i.icon.inr:before { content: "\f156"; } -i.icon.intergender:before { content: "\f224"; } -i.icon.intersex:before { content: "\f224"; } -i.icon.japan.credit.bureau.card:before { content: "\f24b"; } -i.icon.japan.credit.bureau:before { content: "\f24b"; } -i.icon.jcb:before { content: "\f24b"; } -i.icon.jpy:before { content: "\f157"; } -i.icon.krw:before { content: "\f159"; } -i.icon.lab:before { content: "\f0c3"; } -i.icon.law:before { content: "\f24e"; } -i.icon.legal:before { content: "\f0e3"; } -i.icon.lesbian:before { content: "\f226"; } -i.icon.lightning:before { content: "\f0e7"; } -i.icon.like:before { content: "\f004"; } -i.icon.line.graph:before { content: "\f201"; } -i.icon.linkedin.square:before { content: "\f08c"; } -i.icon.linkify:before { content: "\f0c1"; } -i.icon.lira:before { content: "\f195"; } -i.icon.list.layout:before { content: "\f00b"; } -i.icon.magnify:before { content: "\f00e"; } -i.icon.mail.forward:before { content: "\f064"; } -i.icon.mail.square:before { content: "\f199"; } -i.icon.mail:before { content: "\f0e0"; } -i.icon.male.homosexual:before { content: "\f227"; } -i.icon.man:before { content: "\f222"; } -i.icon.marker:before { content: "\f041"; } -i.icon.mars.alternate:before { content: "\f229"; } -i.icon.mars.horizontal:before { content: "\f22b"; } -i.icon.mars.vertical:before { content: "\f22a"; } -i.icon.mastercard.card:before { content: "\f1f1"; } -i.icon.mastercard:before { content: "\f1f1"; } -i.icon.microsoft.edge:before { content: "\f282"; } -i.icon.military:before { content: "\f0fb"; } -i.icon.ms.edge:before { content: "\f282"; } -i.icon.mute:before { content: "\f131"; } -i.icon.new.pied.piper:before { content: "\f2ae"; } -i.icon.non.binary.transgender:before { content: "\f223"; } -i.icon.numbered.list:before { content: "\f0cb"; } -i.icon.optinmonster:before { content: "\f23c"; } -i.icon.options:before { content: "\f1de"; } -i.icon.other.gender.horizontal:before { content: "\f22b"; } -i.icon.other.gender.vertical:before { content: "\f22a"; } -i.icon.other.gender:before { content: "\f229"; } -i.icon.payment:before { content: "\f09d"; } -i.icon.paypal.card:before { content: "\f1f4"; } -i.icon.pencil.square:before { content: "\f14b"; } -i.icon.photo:before { content: "\f030"; } -i.icon.picture:before { content: "\f03e"; } -i.icon.pie.chart:before { content: "\f200"; } -i.icon.pie.graph:before { content: "\f200"; } -i.icon.pied.piper.hat:before { content: "\f2ae"; } -i.icon.pin:before { content: "\f08d"; } -i.icon.plus.cart:before { content: "\f217"; } -i.icon.pocket:before { content: "\f265"; } -i.icon.point:before { content: "\f041"; } -i.icon.pointing.down:before { content: "\f0a7"; } -i.icon.pointing.left:before { content: "\f0a5"; } -i.icon.pointing.right:before { content: "\f0a4"; } -i.icon.pointing.up:before { content: "\f0a6"; } -i.icon.pound:before { content: "\f154"; } -i.icon.power.cord:before { content: "\f1e6"; } -i.icon.power:before { content: "\f011"; } -i.icon.privacy:before { content: "\f084"; } -i.icon.r.circle:before { content: "\f25d"; } -i.icon.rain:before { content: "\f0e9"; } -i.icon.record:before { content: "\f03d"; } -i.icon.refresh:before { content: "\f021"; } -i.icon.remove.circle:before { content: "\f057"; } -i.icon.remove.from.calendar:before { content: "\f272"; } -i.icon.remove.user:before { content: "\f235"; } -i.icon.remove:before { content: "\f00d"; } -i.icon.repeat:before { content: "\f01e"; } -i.icon.rmb:before { content: "\f157"; } -i.icon.rouble:before { content: "\f158"; } -i.icon.rub:before { content: "\f158"; } -i.icon.ruble:before { content: "\f158"; } -i.icon.rupee:before { content: "\f156"; } -i.icon.s15:before { content: "\f2cd"; } -i.icon.selected.radio:before { content: "\f192"; } -i.icon.send:before { content: "\f1d8"; } -i.icon.setting:before { content: "\f013"; } -i.icon.settings:before { content: "\f085"; } -i.icon.shekel:before { content: "\f20b"; } -i.icon.sheqel:before { content: "\f20b"; } -i.icon.shipping:before { content: "\f0d1"; } -i.icon.shop:before { content: "\f07a"; } -i.icon.shuffle:before { content: "\f074"; } -i.icon.shutdown:before { content: "\f011"; } -i.icon.sidebar:before { content: "\f0c9"; } -i.icon.signing:before { content: "\f2a7"; } -i.icon.signup:before { content: "\f044"; } -i.icon.sliders:before { content: "\f1de"; } -i.icon.soccer:before { content: "\f1e3"; } -i.icon.sort.alphabet.ascending:before { content: "\f15d"; } -i.icon.sort.alphabet.descending:before { content: "\f15e"; } -i.icon.sort.ascending:before { content: "\f0de"; } -i.icon.sort.content.ascending:before { content: "\f160"; } -i.icon.sort.content.descending:before { content: "\f161"; } -i.icon.sort.descending:before { content: "\f0dd"; } -i.icon.sort.numeric.ascending:before { content: "\f162"; } -i.icon.sort.numeric.descending:before { content: "\f163"; } -i.icon.sound:before { content: "\f025"; } -i.icon.spy:before { content: "\f21b"; } -i.icon.stripe.card:before { content: "\f1f5"; } -i.icon.student:before { content: "\f19d"; } -i.icon.talk:before { content: "\f27a"; } -i.icon.target:before { content: "\f140"; } -i.icon.teletype:before { content: "\f1e4"; } -i.icon.television:before { content: "\f26c"; } -i.icon.text.cursor:before { content: "\f246"; } -i.icon.text.telephone:before { content: "\f1e4"; } -i.icon.theme.isle:before { content: "\f2b2"; } -i.icon.theme:before { content: "\f043"; } -i.icon.thermometer:before { content: "\f2c7"; } -i.icon.thumb.tack:before { content: "\f08d"; } -i.icon.time:before { content: "\f017"; } -i.icon.tm:before { content: "\f25c"; } -i.icon.toggle.down:before { content: "\f150"; } -i.icon.toggle.left:before { content: "\f191"; } -i.icon.toggle.right:before { content: "\f152"; } -i.icon.toggle.up:before { content: "\f151"; } -i.icon.translate:before { content: "\f1ab"; } -i.icon.travel:before { content: "\f0b1"; } -i.icon.treatment:before { content: "\f0f1"; } -i.icon.triangle.down:before { content: "\f0d7"; } -i.icon.triangle.left:before { content: "\f0d9"; } -i.icon.triangle.right:before { content: "\f0da"; } -i.icon.triangle.up:before { content: "\f0d8"; } -i.icon.try:before { content: "\f195"; } -i.icon.unhide:before { content: "\f06e"; } -i.icon.unlinkify:before { content: "\f127"; } -i.icon.unmute:before { content: "\f130"; } -i.icon.usd:before { content: "\f155"; } -i.icon.user.cancel:before { content: "\f235"; } -i.icon.user.close:before { content: "\f235"; } -i.icon.user.delete:before { content: "\f235"; } -i.icon.user.x:before { content: "\f235"; } -i.icon.vcard:before { content: "\f2bb"; } -i.icon.video.camera:before { content: "\f03d"; } -i.icon.video.play:before { content: "\f144"; } -i.icon.visa.card:before { content: "\f1f0"; } -i.icon.visa:before { content: "\f1f0"; } -i.icon.volume.control.phone:before { content: "\f2a0"; } -i.icon.wait:before { content: "\f017"; } -i.icon.warning.circle:before { content: "\f06a"; } -i.icon.warning.sign:before { content: "\f071"; } -i.icon.warning:before { content: "\f12a"; } -i.icon.wechat:before { content: "\f1d7"; } -i.icon.wi-fi:before { content: "\f1eb"; } -i.icon.wikipedia:before { content: "\f266"; } -i.icon.winner:before { content: "\f091"; } -i.icon.wizard:before { content: "\f0d0"; } -i.icon.woman:before { content: "\f221"; } -i.icon.won:before { content: "\f159"; } -i.icon.wordpress.beginner:before { content: "\f297"; } -i.icon.wordpress.forms:before { content: "\f298"; } -i.icon.world:before { content: "\f0ac"; } -i.icon.write.square:before { content: "\f14b"; } -i.icon.x:before { content: "\f00d"; } -i.icon.yc:before { content: "\f23b"; } -i.icon.ycombinator:before { content: "\f23b"; } -i.icon.yen:before { content: "\f157"; } -i.icon.zip:before { content: "\f187"; } -i.icon.zoom-in:before { content: "\f00e"; } -i.icon.zoom-out:before { content: "\f010"; } -i.icon.zoom:before { content: "\f00e"; } -i.icon.bitbucket.square:before { content: "\f171"; } -i.icon.checkmark.box:before { content: "\f14a"; } -i.icon.circle.thin:before { content: "\f111"; } -i.icon.cloud.download:before { content: "\f381"; } -i.icon.cloud.upload:before { content: "\f382"; } -i.icon.compose:before { content: "\f303"; } -i.icon.conversation:before { content: "\f086"; } -i.icon.credit.card.alternative:before { content: "\f09d"; } -i.icon.currency:before { content: "\f3d1"; } -i.icon.dashboard:before { content: "\f3fd"; } -i.icon.diamond:before { content: "\f3a5"; } -i.icon.disk:before { content: "\f0a0"; } -i.icon.exchange:before { content: "\f362"; } -i.icon.external.share:before { content: "\f14d"; } -i.icon.external.square:before { content: "\f360"; } -i.icon.external:before { content: "\f35d"; } -i.icon.facebook.official:before { content: "\f082"; } -i.icon.food:before { content: "\f2e7"; } -i.icon.hourglass.zero:before { content: "\f253"; } -i.icon.level.down:before { content: "\f3be"; } -i.icon.level.up:before { content: "\f3bf"; } -i.icon.logout:before { content: "\f2f5"; } -i.icon.meanpath:before { content: "\f0c8"; } -i.icon.money:before { content: "\f3d1"; } -i.icon.move:before { content: "\f0b2"; } -i.icon.pencil:before { content: "\f303"; } -i.icon.protect:before { content: "\f023"; } -i.icon.radio:before { content: "\f192"; } -i.icon.remove.bookmark:before { content: "\f02e"; } -i.icon.resize.horizontal:before { content: "\f337"; } -i.icon.resize.vertical:before { content: "\f338"; } -i.icon.sign-in:before { content: "\f2f6"; } -i.icon.sign-out:before { content: "\f2f5"; } -i.icon.spoon:before { content: "\f2e5"; } -i.icon.star.half.empty:before { content: "\f089"; } -i.icon.star.half.full:before { content: "\f089"; } -i.icon.ticket:before { content: "\f3ff"; } -i.icon.times.rectangle:before { content: "\f410"; } -i.icon.write:before { content: "\f303"; } -i.icon.youtube.play:before { content: "\f167"; } +i.icon.times.rectangle:before { + content: '\f410'; +} +i.icon.write:before { + content: '\f303'; +} +i.icon.youtube.play:before { + content: '\f167'; +} /******************************* Outline Icons @@ -1218,144 +4722,500 @@ i.icon.youtube.play:before { content: "\f167"; } /* Load & Define Icon Font */ @font-face { font-family: @outlineFontName; - src: @outlineFallbackSRC; - src: @outlineSrc; font-style: normal; - font-weight: @normal; font-variant: normal; + font-weight: @normal; + src: @outlineFallbackSRC; + src: @outlineSrc; text-decoration: inherit; text-transform: none; } + i.icon.outline { font-family: @outlineFontName; } /* Icon Definitions */ - i.icon.address.book.outline:before { content: "\f2b9"; } - i.icon.address.card.outline:before { content: "\f2bb"; } - i.icon.arrow.alternate.circle.down.outline:before { content: "\f358"; } - i.icon.arrow.alternate.circle.left.outline:before { content: "\f359"; } - i.icon.arrow.alternate.circle.right.outline:before { content: "\f35a"; } - i.icon.arrow.alternate.circle.up.outline:before { content: "\f35b"; } - i.icon.bell.outline:before { content: "\f0f3"; } - i.icon.bell.slash.outline:before { content: "\f1f6"; } - i.icon.bookmark.outline:before { content: "\f02e"; } - i.icon.building.outline:before { content: "\f1ad"; } - i.icon.calendar.outline:before { content: "\f133"; } - i.icon.calendar.alternate.outline:before { content: "\f073"; } - i.icon.calendar.check.outline:before { content: "\f274"; } - i.icon.calendar.minus.outline:before { content: "\f272"; } - i.icon.calendar.plus.outline:before { content: "\f271"; } - i.icon.calendar.times.outline:before { content: "\f273"; } - i.icon.caret.square.down.outline:before { content: "\f150"; } - i.icon.caret.square.left.outline:before { content: "\f191"; } - i.icon.caret.square.right.outline:before { content: "\f152"; } - i.icon.caret.square.up.outline:before { content: "\f151"; } - i.icon.chart.bar.outline:before { content: "\f080"; } - i.icon.check.circle.outline:before { content: "\f058"; } - i.icon.check.square.outline:before { content: "\f14a"; } - i.icon.circle.outline:before { content: "\f111"; } - i.icon.clipboard.outline:before { content: "\f328"; } - i.icon.clock.outline:before { content: "\f017"; } - i.icon.clone.outline:before { content: "\f24d"; } - i.icon.closed.captioning.outline:before { content: "\f20a"; } - i.icon.comment.outline:before { content: "\f075"; } - i.icon.comment.alternate.outline:before { content: "\f27a"; } - i.icon.comments.outline:before { content: "\f086"; } - i.icon.compass.outline:before { content: "\f14e"; } - i.icon.copy.outline:before { content: "\f0c5"; } - i.icon.copyright.outline:before { content: "\f1f9"; } - i.icon.credit.card.outline:before { content: "\f09d"; } - i.icon.dot.circle.outline:before { content: "\f192"; } - i.icon.edit.outline:before { content: "\f044"; } - i.icon.envelope.outline:before { content: "\f0e0"; } - i.icon.envelope.open.outline:before { content: "\f2b6"; } - i.icon.eye.slash.outline:before { content: "\f070"; } - i.icon.file.outline:before { content: "\f15b"; } - i.icon.file.alternate.outline:before { content: "\f15c"; } - i.icon.file.archive.outline:before { content: "\f1c6"; } - i.icon.file.audio.outline:before { content: "\f1c7"; } - i.icon.file.code.outline:before { content: "\f1c9"; } - i.icon.file.excel.outline:before { content: "\f1c3"; } - i.icon.file.image.outline:before { content: "\f1c5"; } - i.icon.file.pdf.outline:before { content: "\f1c1"; } - i.icon.file.powerpoint.outline:before { content: "\f1c4"; } - i.icon.file.video.outline:before { content: "\f1c8"; } - i.icon.file.word.outline:before { content: "\f1c2"; } - i.icon.flag.outline:before { content: "\f024"; } - i.icon.folder.outline:before { content: "\f07b"; } - i.icon.folder.open.outline:before { content: "\f07c"; } - i.icon.frown.outline:before { content: "\f119"; } - i.icon.futbol.outline:before { content: "\f1e3"; } - i.icon.gem.outline:before { content: "\f3a5"; } - i.icon.hand.lizard.outline:before { content: "\f258"; } - i.icon.hand.paper.outline:before { content: "\f256"; } - i.icon.hand.peace.outline:before { content: "\f25b"; } - i.icon.hand.point.down.outline:before { content: "\f0a7"; } - i.icon.hand.point.left.outline:before { content: "\f0a5"; } - i.icon.hand.point.right.outline:before { content: "\f0a4"; } - i.icon.hand.point.up.outline:before { content: "\f0a6"; } - i.icon.hand.pointer.outline:before { content: "\f25a"; } - i.icon.hand.rock.outline:before { content: "\f255"; } - i.icon.hand.scissors.outline:before { content: "\f257"; } - i.icon.hand.spock.outline:before { content: "\f259"; } - i.icon.handshake.outline:before { content: "\f2b5"; } - i.icon.hdd.outline:before { content: "\f0a0"; } - i.icon.heart.outline:before { content: "\f004"; } - i.icon.hospital.outline:before { content: "\f0f8"; } - i.icon.hourglass.outline:before { content: "\f254"; } - i.icon.id.badge.outline:before { content: "\f2c1"; } - i.icon.id.card.outline:before { content: "\f2c2"; } - i.icon.image.outline:before { content: "\f03e"; } - i.icon.images.outline:before { content: "\f302"; } - i.icon.keyboard.outline:before { content: "\f11c"; } - i.icon.lemon.outline:before { content: "\f094"; } - i.icon.life.ring.outline:before { content: "\f1cd"; } - i.icon.lightbulb.outline:before { content: "\f0eb"; } - i.icon.list.alternate.outline:before { content: "\f022"; } - i.icon.map.outline:before { content: "\f279"; } - i.icon.meh.outline:before { content: "\f11a"; } - i.icon.minus.square.outline:before { content: "\f146"; } - i.icon.money.bill.alternate.outline:before { content: "\f3d1"; } - i.icon.moon.outline:before { content: "\f186"; } - i.icon.newspaper.outline:before { content: "\f1ea"; } - i.icon.object.group.outline:before { content: "\f247"; } - i.icon.object.ungroup.outline:before { content: "\f248"; } - i.icon.paper.plane.outline:before { content: "\f1d8"; } - i.icon.pause.circle.outline:before { content: "\f28b"; } - i.icon.play.circle.outline:before { content: "\f144"; } - i.icon.plus.square.outline:before { content: "\f0fe"; } - i.icon.question.circle.outline:before { content: "\f059"; } - i.icon.registered.outline:before { content: "\f25d"; } - i.icon.save.outline:before { content: "\f0c7"; } - i.icon.share.square.outline:before { content: "\f14d"; } - i.icon.smile.outline:before { content: "\f118"; } - i.icon.snowflake.outline:before { content: "\f2dc"; } - i.icon.square.outline:before { content: "\f0c8"; } - i.icon.star.outline:before { content: "\f005"; } - i.icon.star.half.outline:before { content: "\f089"; } - i.icon.sticky.note.outline:before { content: "\f249"; } - i.icon.stop.circle.outline:before { content: "\f28d"; } - i.icon.sun.outline:before { content: "\f185"; } - i.icon.thumbs.down.outline:before { content: "\f165"; } - i.icon.thumbs.up.outline:before { content: "\f164"; } - i.icon.times.circle.outline:before { content: "\f057"; } - i.icon.trash.alternate.outline:before { content: "\f2ed"; } - i.icon.user.outline:before { content: "\f007"; } - i.icon.user.circle.outline:before { content: "\f2bd"; } - i.icon.window.close.outline:before { content: "\f410"; } - i.icon.window.maximize.outline:before { content: "\f2d0"; } - i.icon.window.minimize.outline:before { content: "\f2d1"; } - i.icon.window.restore.outline:before { content: "\f2d2"; } + i.icon.address.book.outline:before { + content: '\f2b9'; + } + + i.icon.address.card.outline:before { + content: '\f2bb'; + } + + i.icon.arrow.alternate.circle.down.outline:before { + content: '\f358'; + } + + i.icon.arrow.alternate.circle.left.outline:before { + content: '\f359'; + } + + i.icon.arrow.alternate.circle.right.outline:before { + content: '\f35a'; + } + + i.icon.arrow.alternate.circle.up.outline:before { + content: '\f35b'; + } + + i.icon.bell.outline:before { + content: '\f0f3'; + } + + i.icon.bell.slash.outline:before { + content: '\f1f6'; + } + + i.icon.bookmark.outline:before { + content: '\f02e'; + } + + i.icon.building.outline:before { + content: '\f1ad'; + } + + i.icon.calendar.outline:before { + content: '\f133'; + } + + i.icon.calendar.alternate.outline:before { + content: '\f073'; + } + + i.icon.calendar.check.outline:before { + content: '\f274'; + } + + i.icon.calendar.minus.outline:before { + content: '\f272'; + } + + i.icon.calendar.plus.outline:before { + content: '\f271'; + } + + i.icon.calendar.times.outline:before { + content: '\f273'; + } + + i.icon.caret.square.down.outline:before { + content: '\f150'; + } + + i.icon.caret.square.left.outline:before { + content: '\f191'; + } + + i.icon.caret.square.right.outline:before { + content: '\f152'; + } + + i.icon.caret.square.up.outline:before { + content: '\f151'; + } + + i.icon.chart.bar.outline:before { + content: '\f080'; + } + + i.icon.check.circle.outline:before { + content: '\f058'; + } + + i.icon.check.square.outline:before { + content: '\f14a'; + } + + i.icon.circle.outline:before { + content: '\f111'; + } + + i.icon.clipboard.outline:before { + content: '\f328'; + } + + i.icon.clock.outline:before { + content: '\f017'; + } + + i.icon.clone.outline:before { + content: '\f24d'; + } + + i.icon.closed.captioning.outline:before { + content: '\f20a'; + } + + i.icon.comment.outline:before { + content: '\f075'; + } + + i.icon.comment.alternate.outline:before { + content: '\f27a'; + } + + i.icon.comments.outline:before { + content: '\f086'; + } + + i.icon.compass.outline:before { + content: '\f14e'; + } + + i.icon.copy.outline:before { + content: '\f0c5'; + } + + i.icon.copyright.outline:before { + content: '\f1f9'; + } + + i.icon.credit.card.outline:before { + content: '\f09d'; + } + + i.icon.dot.circle.outline:before { + content: '\f192'; + } + + i.icon.edit.outline:before { + content: '\f044'; + } + + i.icon.envelope.outline:before { + content: '\f0e0'; + } + + i.icon.envelope.open.outline:before { + content: '\f2b6'; + } + + i.icon.eye.slash.outline:before { + content: '\f070'; + } + + i.icon.file.outline:before { + content: '\f15b'; + } + + i.icon.file.alternate.outline:before { + content: '\f15c'; + } + + i.icon.file.archive.outline:before { + content: '\f1c6'; + } + + i.icon.file.audio.outline:before { + content: '\f1c7'; + } + + i.icon.file.code.outline:before { + content: '\f1c9'; + } + + i.icon.file.excel.outline:before { + content: '\f1c3'; + } + + i.icon.file.image.outline:before { + content: '\f1c5'; + } + + i.icon.file.pdf.outline:before { + content: '\f1c1'; + } + + i.icon.file.powerpoint.outline:before { + content: '\f1c4'; + } + + i.icon.file.video.outline:before { + content: '\f1c8'; + } + + i.icon.file.word.outline:before { + content: '\f1c2'; + } + + i.icon.flag.outline:before { + content: '\f024'; + } + + i.icon.folder.outline:before { + content: '\f07b'; + } + + i.icon.folder.open.outline:before { + content: '\f07c'; + } + + i.icon.frown.outline:before { + content: '\f119'; + } + + i.icon.futbol.outline:before { + content: '\f1e3'; + } + + i.icon.gem.outline:before { + content: '\f3a5'; + } + + i.icon.hand.lizard.outline:before { + content: '\f258'; + } + + i.icon.hand.paper.outline:before { + content: '\f256'; + } + + i.icon.hand.peace.outline:before { + content: '\f25b'; + } + + i.icon.hand.point.down.outline:before { + content: '\f0a7'; + } + + i.icon.hand.point.left.outline:before { + content: '\f0a5'; + } + + i.icon.hand.point.right.outline:before { + content: '\f0a4'; + } + + i.icon.hand.point.up.outline:before { + content: '\f0a6'; + } + + i.icon.hand.pointer.outline:before { + content: '\f25a'; + } + + i.icon.hand.rock.outline:before { + content: '\f255'; + } + + i.icon.hand.scissors.outline:before { + content: '\f257'; + } + + i.icon.hand.spock.outline:before { + content: '\f259'; + } + + i.icon.handshake.outline:before { + content: '\f2b5'; + } + + i.icon.hdd.outline:before { + content: '\f0a0'; + } + + i.icon.heart.outline:before { + content: '\f004'; + } + + i.icon.hospital.outline:before { + content: '\f0f8'; + } + + i.icon.hourglass.outline:before { + content: '\f254'; + } + + i.icon.id.badge.outline:before { + content: '\f2c1'; + } + + i.icon.id.card.outline:before { + content: '\f2c2'; + } + + i.icon.image.outline:before { + content: '\f03e'; + } + + i.icon.images.outline:before { + content: '\f302'; + } + + i.icon.keyboard.outline:before { + content: '\f11c'; + } + + i.icon.lemon.outline:before { + content: '\f094'; + } + + i.icon.life.ring.outline:before { + content: '\f1cd'; + } + + i.icon.lightbulb.outline:before { + content: '\f0eb'; + } + + i.icon.list.alternate.outline:before { + content: '\f022'; + } + + i.icon.map.outline:before { + content: '\f279'; + } + + i.icon.meh.outline:before { + content: '\f11a'; + } + + i.icon.minus.square.outline:before { + content: '\f146'; + } + + i.icon.money.bill.alternate.outline:before { + content: '\f3d1'; + } + + i.icon.moon.outline:before { + content: '\f186'; + } + + i.icon.newspaper.outline:before { + content: '\f1ea'; + } + + i.icon.object.group.outline:before { + content: '\f247'; + } + + i.icon.object.ungroup.outline:before { + content: '\f248'; + } + + i.icon.paper.plane.outline:before { + content: '\f1d8'; + } + + i.icon.pause.circle.outline:before { + content: '\f28b'; + } + + i.icon.play.circle.outline:before { + content: '\f144'; + } + + i.icon.plus.square.outline:before { + content: '\f0fe'; + } + + i.icon.question.circle.outline:before { + content: '\f059'; + } + + i.icon.registered.outline:before { + content: '\f25d'; + } + + i.icon.save.outline:before { + content: '\f0c7'; + } + + i.icon.share.square.outline:before { + content: '\f14d'; + } + + i.icon.smile.outline:before { + content: '\f118'; + } + + i.icon.snowflake.outline:before { + content: '\f2dc'; + } + + i.icon.square.outline:before { + content: '\f0c8'; + } + + i.icon.star.outline:before { + content: '\f005'; + } + + i.icon.star.half.outline:before { + content: '\f089'; + } + + i.icon.sticky.note.outline:before { + content: '\f249'; + } + + i.icon.stop.circle.outline:before { + content: '\f28d'; + } + + i.icon.sun.outline:before { + content: '\f185'; + } + + i.icon.thumbs.down.outline:before { + content: '\f165'; + } + + i.icon.thumbs.up.outline:before { + content: '\f164'; + } + + i.icon.times.circle.outline:before { + content: '\f057'; + } + + i.icon.trash.alternate.outline:before { + content: '\f2ed'; + } + + i.icon.user.outline:before { + content: '\f007'; + } + + i.icon.user.circle.outline:before { + content: '\f2bd'; + } + + i.icon.window.close.outline:before { + content: '\f410'; + } + + i.icon.window.maximize.outline:before { + content: '\f2d0'; + } + + i.icon.window.minimize.outline:before { + content: '\f2d1'; + } + + i.icon.window.restore.outline:before { + content: '\f2d2'; + } /* Outline Aliases */ - i.icon.disk.outline:before { content: "\f0a0"; } + i.icon.disk.outline:before { + content: '\f0a0'; + } + i.icon.heart.empty, i.icon.star.empty { font-family: @outlineFontName; } - i.icon.heart.empty:before { content: "\f004"; } - i.icon.star.empty:before { content: "\f089"; } + i.icon.heart.empty:before { + content: '\f004'; + } + + i.icon.star.empty:before { + content: '\f089'; + } } .loadOutlineIcons(); @@ -1367,11 +5227,11 @@ i.icon.youtube.play:before { content: "\f167"; } /* Load & Define Brand Font */ @font-face { font-family: @brandFontName; - src: @brandFallbackSRC; - src: @brandSrc; font-style: normal; - font-weight: @normal; font-variant: normal; + font-weight: @normal; + src: @brandFallbackSRC; + src: @brandSrc; text-decoration: inherit; text-transform: none; } @@ -1711,6 +5571,5 @@ i.icon.youtube.play:before { content: "\f167"; } font-family: 'brand-icons'; } /* Brand Icons Ideally Would Be Defined Here */ - } .loadBrandIcons(); diff --git a/src/theme/site/elements/step.overrides b/src/theme/site/elements/step.overrides index e7aca52..4d86f3f 100644 --- a/src/theme/site/elements/step.overrides +++ b/src/theme/site/elements/step.overrides @@ -4,13 +4,14 @@ @font-face { font-family: 'Step'; - src: - url(data:application/x-font-ttf;charset=utf-8;;base64,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) format('truetype'), - url(data:application/font-woff;charset=utf-8;base64,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) format('woff') - ; + src: url(data:application/x-font-ttf;charset=utf-8;;base64,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) + format('truetype'), + url(data:application/font-woff;charset=utf-8;base64,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) + format('woff'); } + .ui.steps .step.completed > .icon:before, .ui.ordered.steps .step.completed:before { - font-family: 'Step'; content: '\e800'; /* 'î €' */ -} \ No newline at end of file + font-family: 'Step'; +} diff --git a/src/theme/site/extras/main.overrides b/src/theme/site/extras/main.overrides index 98e9a73..0f0d715 100644 --- a/src/theme/site/extras/main.overrides +++ b/src/theme/site/extras/main.overrides @@ -3,9 +3,9 @@ *******************************/ .documentFirstHeading { - color: @primaryColor; border-bottom: none; - + color: @primaryColor; + &::before { display: none; } diff --git a/src/theme/site/globals/pluggableStyles.less b/src/theme/site/globals/pluggableStyles.less index 8e95cb4..c3d37bb 100644 --- a/src/theme/site/globals/pluggableStyles.less +++ b/src/theme/site/globals/pluggableStyles.less @@ -11,21 +11,22 @@ .outline-button { @textColor: var(--text-color, @darkBlue); + &.style-preview, a, button, .slate-editor-link { display: inline-block; - font-weight: bold; - cursor: pointer; - background-color: transparent; - color: @textColor; - border: 1px solid @textColor; - border-radius: @borderRadius; - margin: 0em @horizontalMargin @verticalMargin 0em; padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); + border: 1px solid @textColor; + margin: 0em @horizontalMargin @verticalMargin 0em; + background-color: transparent; + border-radius: @borderRadius; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + color: @textColor; + cursor: pointer; + font-weight: bold; transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; &:hover { @@ -37,23 +38,24 @@ .solid-button { @textColor: var(--text-color, @darkBlue); + &.style-preview, a, button, .slate-editor-link { display: inline-block; - font-weight: bold; - cursor: pointer; - background-color: transparent; - color: #fff; - border: 1px solid @textColor; - border-radius: @borderRadius; - margin: 0em @horizontalMargin @verticalMargin 0em; padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); + border: 1px solid @textColor; + margin: 0em @horizontalMargin @verticalMargin 0em; + background-color: transparent; + background-color: @textColor; + border-radius: @borderRadius; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + color: #fff; + cursor: pointer; + font-weight: bold; transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; - background-color: @textColor; &:hover { .darkenFilter(0.9); @@ -67,6 +69,7 @@ > .columns-view { .ui.grid.column-grid .column > div { height: 100%; + > .styled { height: 100%; } @@ -107,8 +110,8 @@ > div { height: 100%; - background: #f6f6f6; padding: 1rem 1rem; + background: #f6f6f6; } @media only screen and (max-width: @largestTabletScreen) { @@ -125,8 +128,8 @@ .sidebar-block { .ui.menu { - box-shadow: none; border: none; + box-shadow: none; } } } diff --git a/src/theme/site/globals/reset.overrides b/src/theme/site/globals/reset.overrides index e909943..e495eb9 100644 --- a/src/theme/site/globals/reset.overrides +++ b/src/theme/site/globals/reset.overrides @@ -45,8 +45,8 @@ section { */ h1 { - font-size: 2em; margin: 0.67em 0; + font-size: 2em; } /* Grouping content @@ -59,7 +59,8 @@ h1 { figcaption, figure, -main { /* 1 */ +main { + /* 1 */ display: block; } @@ -77,9 +78,9 @@ figure { */ hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ overflow: visible; /* 2 */ + height: 0; /* 1 */ + box-sizing: content-box; /* 1 */ } /** @@ -178,9 +179,9 @@ small { sub, sup { + position: relative; font-size: 75%; line-height: 0; - position: relative; vertical-align: baseline; } @@ -242,10 +243,10 @@ input, optgroup, select, textarea { + margin: 0; /* 2 */ font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ } /** @@ -254,7 +255,8 @@ textarea { */ button, -input { /* 1 */ +input { + /* 1 */ overflow: visible; } @@ -264,7 +266,8 @@ input { /* 1 */ */ button, -select { /* 1 */ +select { + /* 1 */ text-transform: none; } @@ -286,11 +289,11 @@ html [type="button"], /* 1 */ */ button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { padding: 0; + border-style: none; } /** @@ -298,9 +301,9 @@ button::-moz-focus-inner, */ button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { +[type='button']:-moz-focusring, +[type='reset']:-moz-focusring, +[type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } @@ -320,11 +323,11 @@ fieldset { */ legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ + box-sizing: border-box; /* 1 */ padding: 0; /* 3 */ + color: inherit; /* 2 */ white-space: normal; /* 1 */ } @@ -351,8 +354,8 @@ textarea { * 2. Remove the padding in IE 10-. */ -[type="checkbox"], -[type="radio"] { +[type='checkbox'], +[type='radio'] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } @@ -361,8 +364,8 @@ textarea { * Correct the cursor style of increment and decrement buttons in Chrome. */ -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { height: auto; } @@ -371,7 +374,7 @@ textarea { * 2. Correct the outline style in Safari. */ -[type="search"] { +[type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } @@ -380,8 +383,8 @@ textarea { * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { +[type='search']::-webkit-search-cancel-button, +[type='search']::-webkit-search-decoration { -webkit-appearance: none; } diff --git a/src/theme/site/globals/site.overrides b/src/theme/site/globals/site.overrides index 6036de1..d2145ad 100644 --- a/src/theme/site/globals/site.overrides +++ b/src/theme/site/globals/site.overrides @@ -1,28 +1,32 @@ /******************************* Global Overrides *******************************/ -@import "./pluggableStyles.less"; +@import './pluggableStyles.less'; .addScrollbars() when (@useCustomScrollbars) { /* Force Simple Scrollbars */ body::-webkit-scrollbar { - -webkit-appearance: none; width: @customScrollbarWidth; height: @customScrollbarHeight; + -webkit-appearance: none; } + body::-webkit-scrollbar-track { background: @trackBackground; border-radius: @trackBorderRadius; } + body::-webkit-scrollbar-thumb { - cursor: pointer; - border-radius: @thumbBorderRadius; background: @thumbBackground; + border-radius: @thumbBorderRadius; + cursor: pointer; transition: @thumbTransition; } + body::-webkit-scrollbar-thumb:window-inactive { background: @thumbInactiveBackground; } + body::-webkit-scrollbar-thumb:hover { background: @thumbHoverBackground; } @@ -31,13 +35,13 @@ .addScrollbars(); .no-space-top .ui.content-area { - margin-top: 0; padding-top: 0; + margin-top: 0; } .no-space-bottom .ui.content-area { - margin-bottom: 0; padding-bottom: 0; + margin-bottom: 0; } .stretch { diff --git a/src/theme/site/mixins.less b/src/theme/site/mixins.less index cb8b14d..b2bb5ca 100644 --- a/src/theme/site/mixins.less +++ b/src/theme/site/mixins.less @@ -1,7 +1,7 @@ .darkenFilter(@percentage) { - filter: brightness(@percentage); -webkit-filter: brightness(@percentage); -moz-filter: brightness(@percentage); -o-filter: brightness(@percentage); -ms-filter: brightness(@percentage); + filter: brightness(@percentage); } diff --git a/src/theme/site/modules/accordion.overrides b/src/theme/site/modules/accordion.overrides index e4bd727..5fa9de3 100644 --- a/src/theme/site/modules/accordion.overrides +++ b/src/theme/site/modules/accordion.overrides @@ -3,26 +3,26 @@ *******************************/ @font-face { font-family: 'Accordion'; - src: - url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), - url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff') - ; - font-weight: normal; font-style: normal; + font-weight: normal; + src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) + format('truetype'), + url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) + format('woff'); } /* Dropdown Icon */ .ui.accordion .title .dropdown.icon, .ui.accordion .accordion .title .dropdown.icon { - font-family: Accordion; - line-height: 1; backface-visibility: hidden; - font-weight: normal; + font-family: Accordion; font-style: normal; + font-weight: normal; + line-height: 1; text-align: center; } .ui.accordion .title .dropdown.icon:before, .ui.accordion .accordion .title .dropdown.icon:before { - content: '\f0da'/*rtl:'\f0d9'*/; + content: '\f0da' /*rtl:'\f0d9'*/; } diff --git a/src/theme/site/modules/checkbox.overrides b/src/theme/site/modules/checkbox.overrides index e83ad9f..da4b87f 100644 --- a/src/theme/site/modules/checkbox.overrides +++ b/src/theme/site/modules/checkbox.overrides @@ -4,9 +4,8 @@ @font-face { font-family: 'Checkbox'; - src: - url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype') - ; + src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) + format('truetype'); } /* Checkmark */ @@ -24,11 +23,10 @@ /* Indeterminate */ .ui.checkbox input:indeterminate ~ .box:after, .ui.checkbox input:indeterminate ~ label:after { - font-size: 12px; content: '\e801'; + font-size: 12px; } - /* UTF Reference .check:before { content: '\e800'; } .dash:before { content: '\e801'; } diff --git a/src/theme/site/modules/dropdown.overrides b/src/theme/site/modules/dropdown.overrides index 3c466b5..2742831 100644 --- a/src/theme/site/modules/dropdown.overrides +++ b/src/theme/site/modules/dropdown.overrides @@ -5,48 +5,48 @@ /* Dropdown Carets */ @font-face { font-family: 'Dropdown'; - src: - url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA8AAAAACFAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAchGgaq0dERUYAAAF0AAAAHAAAAB4AJwAPT1MvMgAAAZAAAABDAAAAVnW4TJdjbWFwAAAB1AAAAEsAAAFS8CcaqmN2dCAAAAIgAAAABAAAAAQAEQFEZ2FzcAAAAiQAAAAIAAAACP//AANnbHlmAAACLAAAAQoAAAGkrRHP9WhlYWQAAAM4AAAAMAAAADYPK8YyaGhlYQAAA2gAAAAdAAAAJANCAb1obXR4AAADiAAAACIAAAAiCBkAOGxvY2EAAAOsAAAAFAAAABQBnAIybWF4cAAAA8AAAAAfAAAAIAEVAF5uYW1lAAAD4AAAATAAAAKMFGlj5HBvc3QAAAUQAAAARgAAAHJoedjqd2ViZgAABVgAAAAGAAAABrO7W5UAAAABAAAAANXulPUAAAAA1r4hgAAAAADXu2Q1eNpjYGRgYOABYjEgZmJgBEIOIGYB8xgAA/YAN3jaY2BktGOcwMDKwMI4jTGNgYHBHUp/ZZBkaGFgYGJgZWbACgLSXFMYHFT/fLjFeOD/AQY9xjMMbkBhRpAcAN48DQYAeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMqn8+8H649f8/lHX9//9b7Pzf+fWgusCAkY0BzmUE6gHpQwGMDMMeAACbxg7SAAARAUQAAAAB//8AAnjadZBPSsNAGMXfS+yMqYgOhpSuSlKadmUhiVEhEMQzFF22m17BbbvzCh5BXCUn6EG8gjeQ4DepwYo4i+/ffL95j4EDA+CFC7jQuKyIeVHrI3wkleq9F7XrSInKteOeHdda8bOoaeepSc00NWPz/LRec9G8GabyGtEdF7h19z033GAMTK7zbM42xNEZpzYof0RtQ5CUHAQJ73OtVyutc+3b7Ou//b8XNlsPx3jgjUifABdhEohKJJL5iM5p39uqc7X1+sRQSqmGrUVhlsJ4lpmEUVwyT8SUYtg0P9DyNzPADDs+tjrGV6KRCRfsui3eHcL4/p8ZXvfMlcnEU+CLv7hDykOP+AKTPTxbAAB42mNgZGBgAGKuf5KP4vltvjLIMzGAwLV9ig0g+vruFFMQzdjACOJzMIClARh0CTJ42mNgZGBgPPD/AJD8wgAEjA0MjAyogAMAbOQEAQAAAAC7ABEAAAAAAKoAAAH0AAABgAAAAUAACAFAAAgAwAAXAAAAAAAAACoAKgAqADIAbACGAKAAugDSeNpjYGRgYOBkUGFgYgABEMkFhAwM/xn0QAIADdUBdAB42qWQvUoDQRSFv3GjaISUQaymSmGxJoGAsRC0iPYLsU50Y6IxrvlRtPCJJKUPIBb+PIHv4EN4djKuKAqCDHfmu+feOdwZoMCUAJNbAlYUMzaUlM14jjxbngOq7HnOia89z1Pk1vMCa9x7ztPkzfMyJbPj+ZGi6Xp+omxuPD+zaD7meaFg7mb8GrBqHmhwxoAxlm0uiRkpP9X5m26pKRoMxTGR1D49Dv/Yb/91o6l8qL6eu5n2hZQzn68utR9m3FU2cB4t9cdSLG2utI+44Eh/P9bqKO+oJ/WxmXssj77YkrjasZQD6SFddythk3Wtzrf+UF2p076Udla1VNzsERP3kkjVRKel7mp1udXYcHtZSlV7RfmJe1GiFWveluaeKD5/MuJcSk8Tpm/vvwPIbmJleNpjYGKAAFYG7ICTgYGRiZGZkYWRlZGNkZ2Rg5GTLT2nsiDDEEIZsZfmZRqZujmDaDcDAxcI7WIOpS2gtCWUdgQAZkcSmQAAAAFblbO6AAA=) format('woff') - ; - font-weight: normal; font-style: normal; + font-weight: normal; + src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA8AAAAACFAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAchGgaq0dERUYAAAF0AAAAHAAAAB4AJwAPT1MvMgAAAZAAAABDAAAAVnW4TJdjbWFwAAAB1AAAAEsAAAFS8CcaqmN2dCAAAAIgAAAABAAAAAQAEQFEZ2FzcAAAAiQAAAAIAAAACP//AANnbHlmAAACLAAAAQoAAAGkrRHP9WhlYWQAAAM4AAAAMAAAADYPK8YyaGhlYQAAA2gAAAAdAAAAJANCAb1obXR4AAADiAAAACIAAAAiCBkAOGxvY2EAAAOsAAAAFAAAABQBnAIybWF4cAAAA8AAAAAfAAAAIAEVAF5uYW1lAAAD4AAAATAAAAKMFGlj5HBvc3QAAAUQAAAARgAAAHJoedjqd2ViZgAABVgAAAAGAAAABrO7W5UAAAABAAAAANXulPUAAAAA1r4hgAAAAADXu2Q1eNpjYGRgYOABYjEgZmJgBEIOIGYB8xgAA/YAN3jaY2BktGOcwMDKwMI4jTGNgYHBHUp/ZZBkaGFgYGJgZWbACgLSXFMYHFT/fLjFeOD/AQY9xjMMbkBhRpAcAN48DQYAeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMqn8+8H649f8/lHX9//9b7Pzf+fWgusCAkY0BzmUE6gHpQwGMDMMeAACbxg7SAAARAUQAAAAB//8AAnjadZBPSsNAGMXfS+yMqYgOhpSuSlKadmUhiVEhEMQzFF22m17BbbvzCh5BXCUn6EG8gjeQ4DepwYo4i+/ffL95j4EDA+CFC7jQuKyIeVHrI3wkleq9F7XrSInKteOeHdda8bOoaeepSc00NWPz/LRec9G8GabyGtEdF7h19z033GAMTK7zbM42xNEZpzYof0RtQ5CUHAQJ73OtVyutc+3b7Ou//b8XNlsPx3jgjUifABdhEohKJJL5iM5p39uqc7X1+sRQSqmGrUVhlsJ4lpmEUVwyT8SUYtg0P9DyNzPADDs+tjrGV6KRCRfsui3eHcL4/p8ZXvfMlcnEU+CLv7hDykOP+AKTPTxbAAB42mNgZGBgAGKuf5KP4vltvjLIMzGAwLV9ig0g+vruFFMQzdjACOJzMIClARh0CTJ42mNgZGBgPPD/AJD8wgAEjA0MjAyogAMAbOQEAQAAAAC7ABEAAAAAAKoAAAH0AAABgAAAAUAACAFAAAgAwAAXAAAAAAAAACoAKgAqADIAbACGAKAAugDSeNpjYGRgYOBkUGFgYgABEMkFhAwM/xn0QAIADdUBdAB42qWQvUoDQRSFv3GjaISUQaymSmGxJoGAsRC0iPYLsU50Y6IxrvlRtPCJJKUPIBb+PIHv4EN4djKuKAqCDHfmu+feOdwZoMCUAJNbAlYUMzaUlM14jjxbngOq7HnOia89z1Pk1vMCa9x7ztPkzfMyJbPj+ZGi6Xp+omxuPD+zaD7meaFg7mb8GrBqHmhwxoAxlm0uiRkpP9X5m26pKRoMxTGR1D49Dv/Yb/91o6l8qL6eu5n2hZQzn68utR9m3FU2cB4t9cdSLG2utI+44Eh/P9bqKO+oJ/WxmXssj77YkrjasZQD6SFddythk3Wtzrf+UF2p076Udla1VNzsERP3kkjVRKel7mp1udXYcHtZSlV7RfmJe1GiFWveluaeKD5/MuJcSk8Tpm/vvwPIbmJleNpjYGKAAFYG7ICTgYGRiZGZkYWRlZGNkZ2Rg5GTLT2nsiDDEEIZsZfmZRqZujmDaDcDAxcI7WIOpS2gtCWUdgQAZkcSmQAAAAFblbO6AAA=) + format('woff'); } .ui.dropdown > .dropdown.icon { - font-family: 'Dropdown'; - line-height: 1; - height: 1em; width: 1.23em; + height: 1em; backface-visibility: hidden; - font-weight: normal; + font-family: 'Dropdown'; font-style: normal; + font-weight: normal; + line-height: 1; text-align: center; } .ui.dropdown > .dropdown.icon { width: auto; } + .ui.dropdown > .dropdown.icon:before { content: '\f0d7'; } /* Sub Menu */ .ui.dropdown .menu .item .dropdown.icon:before { - content: '\f0da'/*rtl:'\f0d9'*/; + content: '\f0da' /*rtl:'\f0d9'*/; } .ui.dropdown .item .left.dropdown.icon:before, .ui.dropdown .left.menu .item .dropdown.icon:before { - content: "\f0d9"/*rtl:"\f0da"*/; + content: '\f0d9' /*rtl:"\f0da"*/; } /* Vertical Menu Dropdown */ .ui.vertical.menu .dropdown.item > .dropdown.icon:before { - content: "\f0da"/*rtl:"\f0d9"*/; + content: '\f0da' /*rtl:"\f0d9"*/; } .ui.dropdown > .clear.icon:before { - content: "\f00d"; + content: '\f00d'; } .ui.selection.dropdown.search > .dropdown.icon { @@ -61,4 +61,3 @@ .dropdown.right:before { content: "\f0da"; } .dropdown.close:before { content: "\f00d"; } */ - diff --git a/src/theme/site/modules/rating.overrides b/src/theme/site/modules/rating.overrides index 37ce3b6..6f79029 100644 --- a/src/theme/site/modules/rating.overrides +++ b/src/theme/site/modules/rating.overrides @@ -4,19 +4,20 @@ @font-face { font-family: 'Rating'; - src: - url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'), - url(data:application/font-woff;charset=utf-8;base64,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kIiRi5MI5vdUFfcni4vCBYufhJx8mn2ZepJ3i3aLeoR9fX18g3qLdwiLVAUO+yaLshWL+AQFi5GNkY+RjpCQj5KNj42PjI+LCPfAiwWPi4+Kj4mRiZCHj4aPhY2Fi4UIi/wEBYuEiYWHhoeGhoeFiIiKhoqHi4GLhI6EkQj7EvcN+xL7DQWEhYOIgouHi4eLh42EjoaPiJCHkImRi5IIDov3XRWLko2Rj5Kltq+vuKW4pbuZvYu9i7t9uHG4ca9npWCPhI2Fi4SLhYmEh4RxYGdoXnAIXnFbflmLWYtbmF6lXqZnrnG2h5KJkouRCLCLFaRkq2yxdLF0tH+4i7iLtJexorGiq6qksm64Z61goZZ3kXaLdItnfm1ycnJybX9oiwhoi22XcqRypH6pi6+LopGglp9gdWdpbl4I9xiwFYuHjIiOiI6IjoqPi4+LjoyOjo2OjY6Lj4ubkJmXl5eWmZGbi4+LjoyOjo2OjY6LjwiLj4mOiY6IjYiNh4tzi3eCenp6eoJ3i3MIDov3XRWLko2Sj5GouK+utqW3pbqYvouci5yJnIgIm6cFjY6NjI+LjIuNi42JjYqOio+JjomOiY6KjomOiY6JjoqNioyKjomMiYuHi4qLiouLCHdnbVVjQ2NDbVV3Zwh9cgWJiIiJiIuJi36SdJiIjYmOi46LjY+UlJlvl3KcdJ90oHeie6WHkYmSi5IIsIsVqlq0Z711CKGzBXqXfpqCnoKdhp6LoIuikaCWn2B1Z2luXgj3GLAVi4eMiI6IjoiOio+Lj4uOjI6OjY6NjouPi5uQmZeXl5aZkZuLj4uOjI6OjY6NjouPCIuPiY6JjoiNiI2Hi3OLd4J6enp6gneLcwji+10VoLAFtI+wmK2hrqKnqKKvdq1wp2uhCJ2rBZ1/nHycepx6mHqWeY+EjYWLhIuEiYWHhIR/gH1+fG9qaXJmeWV5Y4Jhiwi53BXb9yQFjIKMg4uEi3CDc3x1fHV3fHOBCA6L1BWL90sFi5WPlJKSkpKTj5aLCNmLBZKPmJqepJaZlZeVlY+Qj5ONl42WjpeOmI+YkZWTk5OSk46Vi5uLmYiYhZiFlIGSfgiSfo55i3WLeYd5gXgIvosFn4uchJl8mn2Seot3i3qGfIJ9jYSLhYuEi3yIfoR+i4eLh4uHi3eGen99i3CDdnt8CHt8dYNwiwhmiwV5i3mNeY95kHeRc5N1k36Ph4sIOYsFgIuDjoSShJKHlIuVCLCdFYuGjIePiI+Hj4mQi5CLj42Pj46OjY+LkIuQiZCIjoePh42Gi4aLh4mHh4eIioaLhgjUeRWUiwWNi46Lj4qOi4+KjYqOi4+Kj4mQio6KjYqNio+Kj4mQio6KjIqzfquEpIsIrosFr4uemouri5CKkYqQkY6QkI6SjpKNkouSi5KJkoiRlZWQlouYi5CKkImRiZGJj4iOCJGMkI+PlI+UjZKLkouViJODk4SSgo+CiwgmiwWLlpCalJ6UnpCbi5aLnoiYhJSFlH+QeYuGhoeDiYCJf4h/h3+IfoWBg4KHh4SCgH4Ii4qIiYiGh4aIh4mIiIiIh4eGh4aHh4eHiIiHiIeHiIiHiIeKh4mIioiLCIKLi/tLBQ6L90sVi/dLBYuVj5OSk5KSk46WiwjdiwWPi5iPoZOkk6CRnZCdj56Nn4sIq4sFpougg5x8m3yTd4txCIuJBZd8kHuLd4uHi4eLh5J+jn6LfIuEi4SJhZR9kHyLeot3hHp8fH19eoR3iwhYiwWVeI95i3mLdIh6hH6EfoKBfoV+hX2He4uBi4OPg5KFkYaTh5SHlYiTipOKk4qTiJMIiZSIkYiPgZSBl4CaeKR+moSPCD2LBYCLg4+EkoSSh5SLlQiw9zgVi4aMh4+Ij4ePiZCLkIuPjY+Pjo6Nj4uQi5CJkIiOh4+HjYaLhouHiYeHh4iKhouGCNT7OBWUiwWOi46Kj4mPio+IjoiPh4+IjoePiI+Hj4aPho6HjoiNiI6Hj4aOho6Ii4qWfpKDj4YIk4ORgY5+j36OgI1/jYCPg5CGnYuXj5GUkpSOmYuei5aGmoKfgp6GmouWCPCLBZSLlI+SkpOTjpOLlYuSiZKHlIeUho+Fi46PjY+NkY2RjJCLkIuYhpaBlY6RjZKLkgiLkomSiJKIkoaQhY6MkIyRi5CLm4aXgpOBkn6Pe4sIZosFcotrhGN9iouIioaJh4qHiomKiYqIioaKh4mHioiKiYuHioiLh4qIi4mLCIKLi/tLBQ77lIv3txWLkpCPlo0I9yOgzPcWBY6SkI+RiwiL/BL7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwgOi/fFFYu1l6yjoqOjrZe2i5aLl4mYh5eHloWWhJaElIWShZOE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) format('woff') - ; - font-weight: normal; font-style: normal; + font-weight: normal; + src: url(data:application/x-font-ttf;charset=utf-8;base64,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) + format('truetype'), + url(data:application/font-woff;charset=utf-8;base64,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kIiRi5MI5vdUFfcni4vCBYufhJx8mn2ZepJ3i3aLeoR9fX18g3qLdwiLVAUO+yaLshWL+AQFi5GNkY+RjpCQj5KNj42PjI+LCPfAiwWPi4+Kj4mRiZCHj4aPhY2Fi4UIi/wEBYuEiYWHhoeGhoeFiIiKhoqHi4GLhI6EkQj7EvcN+xL7DQWEhYOIgouHi4eLh42EjoaPiJCHkImRi5IIDov3XRWLko2Rj5Kltq+vuKW4pbuZvYu9i7t9uHG4ca9npWCPhI2Fi4SLhYmEh4RxYGdoXnAIXnFbflmLWYtbmF6lXqZnrnG2h5KJkouRCLCLFaRkq2yxdLF0tH+4i7iLtJexorGiq6qksm64Z61goZZ3kXaLdItnfm1ycnJybX9oiwhoi22XcqRypH6pi6+LopGglp9gdWdpbl4I9xiwFYuHjIiOiI6IjoqPi4+LjoyOjo2OjY6Lj4ubkJmXl5eWmZGbi4+LjoyOjo2OjY6LjwiLj4mOiY6IjYiNh4tzi3eCenp6eoJ3i3MIDov3XRWLko2Sj5GouK+utqW3pbqYvouci5yJnIgIm6cFjY6NjI+LjIuNi42JjYqOio+JjomOiY6KjomOiY6JjoqNioyKjomMiYuHi4qLiouLCHdnbVVjQ2NDbVV3Zwh9cgWJiIiJiIuJi36SdJiIjYmOi46LjY+UlJlvl3KcdJ90oHeie6WHkYmSi5IIsIsVqlq0Z711CKGzBXqXfpqCnoKdhp6LoIuikaCWn2B1Z2luXgj3GLAVi4eMiI6IjoiOio+Lj4uOjI6OjY6NjouPi5uQmZeXl5aZkZuLj4uOjI6OjY6NjouPCIuPiY6JjoiNiI2Hi3OLd4J6enp6gneLcwji+10VoLAFtI+wmK2hrqKnqKKvdq1wp2uhCJ2rBZ1/nHycepx6mHqWeY+EjYWLhIuEiYWHhIR/gH1+fG9qaXJmeWV5Y4Jhiwi53BXb9yQFjIKMg4uEi3CDc3x1fHV3fHOBCA6L1BWL90sFi5WPlJKSkpKTj5aLCNmLBZKPmJqepJaZlZeVlY+Qj5ONl42WjpeOmI+YkZWTk5OSk46Vi5uLmYiYhZiFlIGSfgiSfo55i3WLeYd5gXgIvosFn4uchJl8mn2Seot3i3qGfIJ9jYSLhYuEi3yIfoR+i4eLh4uHi3eGen99i3CDdnt8CHt8dYNwiwhmiwV5i3mNeY95kHeRc5N1k36Ph4sIOYsFgIuDjoSShJKHlIuVCLCdFYuGjIePiI+Hj4mQi5CLj42Pj46OjY+LkIuQiZCIjoePh42Gi4aLh4mHh4eIioaLhgjUeRWUiwWNi46Lj4qOi4+KjYqOi4+Kj4mQio6KjYqNio+Kj4mQio6KjIqzfquEpIsIrosFr4uemouri5CKkYqQkY6QkI6SjpKNkouSi5KJkoiRlZWQlouYi5CKkImRiZGJj4iOCJGMkI+PlI+UjZKLkouViJODk4SSgo+CiwgmiwWLlpCalJ6UnpCbi5aLnoiYhJSFlH+QeYuGhoeDiYCJf4h/h3+IfoWBg4KHh4SCgH4Ii4qIiYiGh4aIh4mIiIiIh4eGh4aHh4eHiIiHiIeHiIiHiIeKh4mIioiLCIKLi/tLBQ6L90sVi/dLBYuVj5OSk5KSk46WiwjdiwWPi5iPoZOkk6CRnZCdj56Nn4sIq4sFpougg5x8m3yTd4txCIuJBZd8kHuLd4uHi4eLh5J+jn6LfIuEi4SJhZR9kHyLeot3hHp8fH19eoR3iwhYiwWVeI95i3mLdIh6hH6EfoKBfoV+hX2He4uBi4OPg5KFkYaTh5SHlYiTipOKk4qTiJMIiZSIkYiPgZSBl4CaeKR+moSPCD2LBYCLg4+EkoSSh5SLlQiw9zgVi4aMh4+Ij4ePiZCLkIuPjY+Pjo6Nj4uQi5CJkIiOh4+HjYaLhouHiYeHh4iKhouGCNT7OBWUiwWOi46Kj4mPio+IjoiPh4+IjoePiI+Hj4aPho6HjoiNiI6Hj4aOho6Ii4qWfpKDj4YIk4ORgY5+j36OgI1/jYCPg5CGnYuXj5GUkpSOmYuei5aGmoKfgp6GmouWCPCLBZSLlI+SkpOTjpOLlYuSiZKHlIeUho+Fi46PjY+NkY2RjJCLkIuYhpaBlY6RjZKLkgiLkomSiJKIkoaQhY6MkIyRi5CLm4aXgpOBkn6Pe4sIZosFcotrhGN9iouIioaJh4qHiomKiYqIioaKh4mHioiKiYuHioiLh4qIi4mLCIKLi/tLBQ77lIv3txWLkpCPlo0I9yOgzPcWBY6SkI+RiwiL/BL7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwgOi/fFFYu1l6yjoqOjrZe2i5aLl4mYh5eHloWWhJaElIWShZOE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) + format('woff'); } + .ui.rating .icon { - font-family: 'Rating'; - line-height: 1; backface-visibility: hidden; - font-weight: normal; + font-family: 'Rating'; font-style: normal; + font-weight: normal; + line-height: 1; text-align: center; } @@ -46,6 +47,7 @@ .ui.star.rating .partial.icon:before { content: '\f006'; } + .ui.star.rating .partial.icon { content: '\f005'; } diff --git a/src/theme/site/modules/transition.overrides b/src/theme/site/modules/transition.overrides index f691c3b..3736553 100644 --- a/src/theme/site/modules/transition.overrides +++ b/src/theme/site/modules/transition.overrides @@ -17,13 +17,16 @@ .transition.browse { animation-duration: 500ms; } + .transition.browse.in { animation-name: browseIn; } + .transition.browse.out, .transition.browse.left.out { animation-name: browseOutLeft; } + .transition.browse.right.out { animation-name: browseOutRight; } @@ -31,22 +34,25 @@ /* In */ @keyframes browseIn { 0% { - transform: scale(0.8) translateZ(0px); z-index: -1; + transform: scale(0.8) translateZ(0px); } + 10% { - transform: scale(0.8) translateZ(0px); z-index: -1; opacity: 0.7; + transform: scale(0.8) translateZ(0px); } + 80% { - transform: scale(1.05) translateZ(0px); - opacity: 1; z-index: 999; + opacity: 1; + transform: scale(1.05) translateZ(0px); } + 100% { - transform: scale(1) translateZ(0px); z-index: 999; + transform: scale(1) translateZ(0px); } } @@ -56,17 +62,20 @@ z-index: 999; transform: translateX(0%) rotateY(0deg) rotateX(0deg); } + 50% { z-index: -1; transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } + 80% { opacity: 1; } + 100% { z-index: -1; - transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); } } @keyframes browseOutRight { @@ -74,33 +83,37 @@ z-index: 999; transform: translateX(0%) rotateY(0deg) rotateX(0deg); } + 50% { z-index: 1; transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } + 80% { opacity: 1; } + 100% { z-index: 1; - transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); } } - /*-------------- Drop ---------------*/ .drop.transition { - transform-origin: top center; animation-duration: 400ms; animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); + transform-origin: top center; } + .drop.transition.in { animation-name: dropIn; } + .drop.transition.out { animation-name: dropOut; } @@ -111,6 +124,7 @@ opacity: 0; transform: scale(0); } + 100% { opacity: 1; transform: scale(1); @@ -121,6 +135,7 @@ opacity: 1; transform: scale(1); } + 100% { opacity: 0; transform: scale(0); @@ -134,32 +149,40 @@ .transition.fade.in { animation-name: fadeIn; } -.transition[class*="fade up"].in { + +.transition[class*='fade up'].in { animation-name: fadeInUp; } -.transition[class*="fade down"].in { + +.transition[class*='fade down'].in { animation-name: fadeInDown; } -.transition[class*="fade left"].in { + +.transition[class*='fade left'].in { animation-name: fadeInLeft; } -.transition[class*="fade right"].in { + +.transition[class*='fade right'].in { animation-name: fadeInRight; } .transition.fade.out { animation-name: fadeOut; } -.transition[class*="fade up"].out { + +.transition[class*='fade up'].out { animation-name: fadeOutUp; } -.transition[class*="fade down"].out { + +.transition[class*='fade down'].out { animation-name: fadeOutDown; } -.transition[class*="fade left"].out { + +.transition[class*='fade left'].out { animation-name: fadeOutLeft; } -.transition[class*="fade right"].out { + +.transition[class*='fade right'].out { animation-name: fadeOutRight; } @@ -168,6 +191,7 @@ 0% { opacity: 0; } + 100% { opacity: 1; } @@ -177,6 +201,7 @@ opacity: 0; transform: translateY(10%); } + 100% { opacity: 1; transform: translateY(0%); @@ -187,6 +212,7 @@ opacity: 0; transform: translateY(-10%); } + 100% { opacity: 1; transform: translateY(0%); @@ -197,6 +223,7 @@ opacity: 0; transform: translateX(10%); } + 100% { opacity: 1; transform: translateX(0%); @@ -207,6 +234,7 @@ opacity: 0; transform: translateX(-10%); } + 100% { opacity: 1; transform: translateX(0%); @@ -218,6 +246,7 @@ 0% { opacity: 1; } + 100% { opacity: 0; } @@ -227,6 +256,7 @@ opacity: 1; transform: translateY(0%); } + 100% { opacity: 0; transform: translateY(5%); @@ -237,6 +267,7 @@ opacity: 1; transform: translateY(0%); } + 100% { opacity: 0; transform: translateY(-5%); @@ -247,6 +278,7 @@ opacity: 1; transform: translateX(0%); } + 100% { opacity: 0; transform: translateX(5%); @@ -257,6 +289,7 @@ opacity: 1; transform: translateX(0%); } + 100% { opacity: 0; transform: translateX(-5%); @@ -271,15 +304,19 @@ .flip.transition.out { animation-duration: 600ms; } + .horizontal.flip.transition.in { animation-name: horizontalFlipIn; } + .horizontal.flip.transition.out { animation-name: horizontalFlipOut; } + .vertical.flip.transition.in { animation-name: verticalFlipIn; } + .vertical.flip.transition.out { animation-name: verticalFlipOut; } @@ -287,44 +324,48 @@ /* In */ @keyframes horizontalFlipIn { 0% { - transform: perspective(2000px) rotateY(-90deg); opacity: 0; + transform: perspective(2000px) rotateY(-90deg); } + 100% { - transform: perspective(2000px) rotateY(0deg); opacity: 1; + transform: perspective(2000px) rotateY(0deg); } } @keyframes verticalFlipIn { 0% { - transform: perspective(2000px) rotateX(-90deg); opacity: 0; + transform: perspective(2000px) rotateX(-90deg); } + 100% { - transform: perspective(2000px) rotateX(0deg); opacity: 1; + transform: perspective(2000px) rotateX(0deg); } } /* Out */ @keyframes horizontalFlipOut { 0% { - transform: perspective(2000px) rotateY(0deg); opacity: 1; + transform: perspective(2000px) rotateY(0deg); } + 100% { - transform: perspective(2000px) rotateY(90deg); opacity: 0; + transform: perspective(2000px) rotateY(90deg); } } @keyframes verticalFlipOut { 0% { - transform: perspective(2000px) rotateX(0deg); opacity: 1; + transform: perspective(2000px) rotateX(0deg); } + 100% { - transform: perspective(2000px) rotateX(-90deg); opacity: 0; + transform: perspective(2000px) rotateX(-90deg); } } @@ -335,6 +376,7 @@ .scale.transition.in { animation-name: scaleIn; } + .scale.transition.out { animation-name: scaleOut; } @@ -344,6 +386,7 @@ opacity: 0; transform: scale(0.8); } + 100% { opacity: 1; transform: scale(1); @@ -356,13 +399,13 @@ opacity: 1; transform: scale(1); } + 100% { opacity: 0; transform: scale(0.9); } } - /*-------------- Fly ---------------*/ @@ -370,21 +413,26 @@ /* Inward */ .transition.fly { animation-duration: 0.6s; - transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } + .transition.fly.in { animation-name: flyIn; } -.transition[class*="fly up"].in { + +.transition[class*='fly up'].in { animation-name: flyInUp; } -.transition[class*="fly down"].in { + +.transition[class*='fly down'].in { animation-name: flyInDown; } -.transition[class*="fly left"].in { + +.transition[class*='fly left'].in { animation-name: flyInLeft; } -.transition[class*="fly right"].in { + +.transition[class*='fly right'].in { animation-name: flyInRight; } @@ -392,16 +440,20 @@ .transition.fly.out { animation-name: flyOut; } -.transition[class*="fly up"].out { + +.transition[class*='fly up'].out { animation-name: flyOutUp; } -.transition[class*="fly down"].out { + +.transition[class*='fly down'].out { animation-name: flyOutDown; } -.transition[class*="fly left"].out { + +.transition[class*='fly left'].out { animation-name: flyOutLeft; } -.transition[class*="fly right"].out { + +.transition[class*='fly right'].out { animation-name: flyOutRight; } @@ -409,21 +461,26 @@ @keyframes flyIn { 0% { opacity: 0; - transform: scale3d(.3, .3, .3); + transform: scale3d(0.3, 0.3, 0.3); } + 20% { transform: scale3d(1.1, 1.1, 1.1); } + 40% { - transform: scale3d(.9, .9, .9); + transform: scale3d(0.9, 0.9, 0.9); } + 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } + 80% { - transform: scale3d(.97, .97, .97); + transform: scale3d(0.97, 0.97, 0.97); } + 100% { opacity: 1; transform: scale3d(1, 1, 1); @@ -434,16 +491,20 @@ opacity: 0; transform: translate3d(0, 1500px, 0); } + 60% { opacity: 1; transform: translate3d(0, -20px, 0); } + 75% { transform: translate3d(0, 10px, 0); } + 90% { transform: translate3d(0, -5px, 0); } + 100% { transform: translate3d(0, 0, 0); } @@ -453,16 +514,20 @@ opacity: 0; transform: translate3d(0, -1500px, 0); } + 60% { opacity: 1; transform: translate3d(0, 25px, 0); } + 75% { transform: translate3d(0, -10px, 0); } + 90% { transform: translate3d(0, 5px, 0); } + 100% { transform: none; } @@ -472,16 +537,20 @@ opacity: 0; transform: translate3d(1500px, 0, 0); } + 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } + 75% { transform: translate3d(10px, 0, 0); } + 90% { transform: translate3d(-5px, 0, 0); } + 100% { transform: none; } @@ -491,16 +560,20 @@ opacity: 0; transform: translate3d(-1500px, 0, 0); } + 60% { opacity: 1; transform: translate3d(25px, 0, 0); } + 75% { transform: translate3d(-10px, 0, 0); } + 90% { transform: translate3d(5px, 0, 0); } + 100% { transform: none; } @@ -509,25 +582,31 @@ /* Out */ @keyframes flyOut { 20% { - transform: scale3d(.9, .9, .9); + transform: scale3d(0.9, 0.9, 0.9); } - 50%, 55% { + + 50%, + 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } + 100% { opacity: 0; - transform: scale3d(.3, .3, .3); + transform: scale3d(0.3, 0.3, 0.3); } } @keyframes flyOutUp { 20% { transform: translate3d(0, 10px, 0); } - 40%, 45% { + + 40%, + 45% { opacity: 1; transform: translate3d(0, -20px, 0); } + 100% { opacity: 0; transform: translate3d(0, 2000px, 0); @@ -537,10 +616,13 @@ 20% { transform: translate3d(0, -10px, 0); } - 40%, 45% { + + 40%, + 45% { opacity: 1; transform: translate3d(0, 20px, 0); } + 100% { opacity: 0; transform: translate3d(0, -2000px, 0); @@ -551,6 +633,7 @@ opacity: 1; transform: translate3d(20px, 0, 0); } + 100% { opacity: 0; transform: translate3d(-2000px, 0, 0); @@ -561,6 +644,7 @@ opacity: 1; transform: translate3d(-20px, 0, 0); } + 100% { opacity: 0; transform: translate3d(2000px, 0, 0); @@ -572,37 +656,43 @@ ---------------*/ .transition.slide.in, -.transition[class*="slide down"].in { +.transition[class*='slide down'].in { animation-name: slideInY; transform-origin: top center; } -.transition[class*="slide up"].in { + +.transition[class*='slide up'].in { animation-name: slideInY; transform-origin: bottom center; } -.transition[class*="slide left"].in { + +.transition[class*='slide left'].in { animation-name: slideInX; transform-origin: center right; } -.transition[class*="slide right"].in { + +.transition[class*='slide right'].in { animation-name: slideInX; transform-origin: center left; } .transition.slide.out, -.transition[class*="slide down"].out { +.transition[class*='slide down'].out { animation-name: slideOutY; transform-origin: top center; } -.transition[class*="slide up"].out { + +.transition[class*='slide up'].out { animation-name: slideOutY; transform-origin: bottom center; } -.transition[class*="slide left"].out { + +.transition[class*='slide left'].out { animation-name: slideOutX; transform-origin: center right; } -.transition[class*="slide right"].out { + +.transition[class*='slide right'].out { animation-name: slideOutX; transform-origin: center left; } @@ -613,6 +703,7 @@ opacity: 0; transform: scaleY(0); } + 100% { opacity: 1; transform: scaleY(1); @@ -623,6 +714,7 @@ opacity: 0; transform: scaleX(0); } + 100% { opacity: 1; transform: scaleX(1); @@ -635,6 +727,7 @@ opacity: 1; transform: scaleY(1); } + 100% { opacity: 0; transform: scaleY(0); @@ -645,13 +738,13 @@ opacity: 1; transform: scaleX(1); } + 100% { opacity: 0; transform: scaleX(0); } } - /*-------------- Swing ---------------*/ @@ -660,37 +753,43 @@ animation-duration: 800ms; } -.transition[class*="swing down"].in { +.transition[class*='swing down'].in { animation-name: swingInX; transform-origin: top center; } -.transition[class*="swing up"].in { + +.transition[class*='swing up'].in { animation-name: swingInX; transform-origin: bottom center; } -.transition[class*="swing left"].in { + +.transition[class*='swing left'].in { animation-name: swingInY; transform-origin: center right; } -.transition[class*="swing right"].in { + +.transition[class*='swing right'].in { animation-name: swingInY; transform-origin: center left; } .transition.swing.out, -.transition[class*="swing down"].out { +.transition[class*='swing down'].out { animation-name: swingOutX; transform-origin: top center; } -.transition[class*="swing up"].out { + +.transition[class*='swing up'].out { animation-name: swingOutX; transform-origin: bottom center; } -.transition[class*="swing left"].out { + +.transition[class*='swing left'].out { animation-name: swingOutY; transform-origin: center right; } -.transition[class*="swing right"].out { + +.transition[class*='swing right'].out { animation-name: swingOutY; transform-origin: center left; } @@ -698,38 +797,46 @@ /* In */ @keyframes swingInX { 0% { - transform: perspective(1000px) rotateX(90deg); opacity: 0; + transform: perspective(1000px) rotateX(90deg); } + 40% { - transform: perspective(1000px) rotateX(-30deg); opacity: 1; + transform: perspective(1000px) rotateX(-30deg); } + 60% { transform: perspective(1000px) rotateX(15deg); } + 80% { transform: perspective(1000px) rotateX(-7.5deg); } + 100% { transform: perspective(1000px) rotateX(0deg); } } @keyframes swingInY { 0% { - transform: perspective(1000px) rotateY(-90deg); opacity: 0; + transform: perspective(1000px) rotateY(-90deg); } + 40% { - transform: perspective(1000px) rotateY(30deg); opacity: 1; + transform: perspective(1000px) rotateY(30deg); } + 60% { transform: perspective(1000px) rotateY(-17.5deg); } + 80% { transform: perspective(1000px) rotateY(7.5deg); } + 100% { transform: perspective(1000px) rotateY(0deg); } @@ -740,42 +847,49 @@ 0% { transform: perspective(1000px) rotateX(0deg); } + 40% { transform: perspective(1000px) rotateX(-7.5deg); } + 60% { transform: perspective(1000px) rotateX(17.5deg); } + 80% { - transform: perspective(1000px) rotateX(-30deg); opacity: 1; + transform: perspective(1000px) rotateX(-30deg); } + 100% { - transform: perspective(1000px) rotateX(90deg); opacity: 0; + transform: perspective(1000px) rotateX(90deg); } } @keyframes swingOutY { 0% { transform: perspective(1000px) rotateY(0deg); } + 40% { transform: perspective(1000px) rotateY(7.5deg); } + 60% { transform: perspective(1000px) rotateY(-10deg); } + 80% { - transform: perspective(1000px) rotateY(30deg); opacity: 1; + transform: perspective(1000px) rotateY(30deg); } + 100% { - transform: perspective(1000px) rotateY(-90deg); opacity: 0; + transform: perspective(1000px) rotateY(-90deg); } } - /*-------------- Zoom ---------------*/ @@ -783,6 +897,7 @@ .transition.zoom.in { animation-name: zoomIn; } + .transition.zoom.out { animation-name: zoomOut; } @@ -791,6 +906,7 @@ opacity: 1; transform: scale(0); } + 100% { opacity: 1; transform: scale(1); @@ -801,13 +917,13 @@ opacity: 1; transform: scale(1); } + 100% { opacity: 1; transform: scale(0); } } - /******************************* Static Animations *******************************/ @@ -816,71 +932,96 @@ Emphasis ---------------*/ - .flash.transition { animation-duration: 750ms; animation-name: flash; } + .shake.transition { animation-duration: 750ms; animation-name: shake; } + .bounce.transition { animation-duration: 750ms; animation-name: bounce; } + .tada.transition { animation-duration: 750ms; animation-name: tada; } + .pulse.transition { animation-duration: 500ms; animation-name: pulse; } + .jiggle.transition { animation-duration: 750ms; animation-name: jiggle; } + .transition.glow { animation-duration: 2000ms; - animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); + animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } + .transition.glow { animation-name: glow; } - /* Flash */ @keyframes flash { - 0%, 50%, 100% { + 0%, + 50%, + 100% { opacity: 1; } - 25%, 75% { + + 25%, + 75% { opacity: 0; } } /* Shake */ @keyframes shake { - 0%, 100% { + 0%, + 100% { transform: translateX(0); } - 10%, 30%, 50%, 70%, 90% { + + 10%, + 30%, + 50%, + 70%, + 90% { transform: translateX(-10px); } - 20%, 40%, 60%, 80% { + + 20%, + 40%, + 60%, + 80% { transform: translateX(10px); } } /* Bounce */ @keyframes bounce { - 0%, 20%, 50%, 80%, 100% { + 0%, + 20%, + 50%, + 80%, + 100% { transform: translateY(0); } + 40% { transform: translateY(-30px); } + 60% { transform: translateY(-15px); } @@ -891,15 +1032,25 @@ 0% { transform: scale(1); } - 10%, 20% { + + 10%, + 20% { transform: scale(0.9) rotate(-3deg); } - 30%, 50%, 70%, 90% { + + 30%, + 50%, + 70%, + 90% { transform: scale(1.1) rotate(3deg); } - 40%, 60%, 80% { + + 40%, + 60%, + 80% { transform: scale(1.1) rotate(-3deg); } + 100% { transform: scale(1) rotate(0); } @@ -908,18 +1059,19 @@ /* Pulse */ @keyframes pulse { 0% { - transform: scale(1); opacity: 1; + transform: scale(1); } + 50% { - transform: scale(0.9); opacity: 0.7; + transform: scale(0.9); } + 100% { - transform: scale(1); opacity: 1; + transform: scale(1); } - } /* Jiggle */ @@ -927,21 +1079,27 @@ 0% { transform: scale3d(1, 1, 1); } + 30% { transform: scale3d(1.25, 0.75, 1); } + 40% { transform: scale3d(0.75, 1.25, 1); } + 50% { transform: scale3d(1.15, 0.85, 1); } + 65% { - transform: scale3d(.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); } + 75% { - transform: scale3d(1.05, .95, 1); + transform: scale3d(1.05, 0.95, 1); } + 100% { transform: scale3d(1, 1, 1); } @@ -950,13 +1108,14 @@ /* Glow */ @keyframes glow { 0% { - background-color: #FCFCFD; + background-color: #fcfcfd; } + 30% { - background-color: #FFF6CD; + background-color: #fff6cd; } + 100% { - background-color: #FCFCFD; + background-color: #fcfcfd; } } - From 384cd34d51b8debb1444cb241576149e4abfe432 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Fri, 29 Oct 2021 13:25:40 +0300 Subject: [PATCH 6/8] Use latest addons versions --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 379864a..e2d8971 100644 --- a/package.json +++ b/package.json @@ -25,8 +25,8 @@ "dependencies": { "@cypress/code-coverage": "^3.9.5", "@eeacms/volto-tableau": "^1.2.4", - "@eeacms/volto-datablocks": "^2.0.13", - "@eeacms/volto-openlayers-map": "^0.1.2", + "@eeacms/volto-datablocks": "^2.0.15", + "@eeacms/volto-openlayers-map": "^0.1.3", "@eeacms/volto-columns-block": "^4.4.6", "tableau-api-js": "github:eea/tableau-api-js#1.1.1", "axios": "0.24.0", From 80eb317730e92feef27316f87ba4f6080e5fa7fd Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Mon, 1 Nov 2021 13:41:00 +0200 Subject: [PATCH 7/8] Commented cypress --- Jenkinsfile | 97 ++++++++++--------- package.json | 4 +- .../manage/Blocks/FiltersBlock/Modal.jsx | 19 +++- .../manage/Blocks/FiltersBlock/Search.js | 8 ++ .../manage/Blocks/IndustryMap/Sidebar.jsx | 37 ++++--- .../manage/Blocks/IndustryMap/styles.less | 6 +- .../EnvironmentalFacilityDetails/View.jsx | 1 + .../EnvironmentalSiteDetails/View.jsx | 1 + .../manage/Blocks/SiteLocationMap/styles.css | 12 +++ src/theme/site/globals/site.overrides | 4 + 10 files changed, 127 insertions(+), 62 deletions(-) diff --git a/Jenkinsfile b/Jenkinsfile index 71591b7..6487e23 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -74,52 +74,52 @@ pipeline { } } - stage('Integration tests') { - steps { - parallel( - - "Cypress": { - node(label: 'docker') { - script { - try { - sh '''docker pull plone; docker run -d --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg''' - sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" plone/volto-addon-ci cypress''' - } finally { - try { - sh '''rm -rf cypress-reports cypress-results cypress-coverage''' - sh '''mkdir -p cypress-reports cypress-results cypress-coverage''' - sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/cypress/videos cypress-reports/''' - sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/cypress/reports cypress-results/''' - coverage = sh script: '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/coverage cypress-coverage/''', returnStatus: true - if ( coverage == 0 ) { - publishHTML (target : [allowMissing: false, - alwaysLinkToLastBuild: true, - keepAll: true, - reportDir: 'cypress-coverage/coverage/lcov-report', - reportFiles: 'index.html', - reportName: 'CypressCoverage', - reportTitles: 'Integration Tests Code Coverage']) - } - archiveArtifacts artifacts: 'cypress-reports/videos/*.mp4', fingerprint: true - stash name: "cypress-coverage", includes: "cypress-coverage/**", allowEmpty: true - } - finally { - catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') { - junit testResults: 'cypress-results/**/*.xml', allowEmptyResults: true - } - sh script: "docker stop $BUILD_TAG-plone", returnStatus: true - sh script: "docker rm -v $BUILD_TAG-plone", returnStatus: true - sh script: "docker rm -v $BUILD_TAG-cypress", returnStatus: true - - } - } - } - } - } - - ) - } - } + // stage('Integration tests') { + // steps { + // parallel( + + // "Cypress": { + // node(label: 'docker') { + // script { + // try { + // sh '''docker pull plone; docker run -d --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg''' + // sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" plone/volto-addon-ci cypress''' + // } finally { + // try { + // sh '''rm -rf cypress-reports cypress-results cypress-coverage''' + // sh '''mkdir -p cypress-reports cypress-results cypress-coverage''' + // sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/cypress/videos cypress-reports/''' + // sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/cypress/reports cypress-results/''' + // coverage = sh script: '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/coverage cypress-coverage/''', returnStatus: true + // if ( coverage == 0 ) { + // publishHTML (target : [allowMissing: false, + // alwaysLinkToLastBuild: true, + // keepAll: true, + // reportDir: 'cypress-coverage/coverage/lcov-report', + // reportFiles: 'index.html', + // reportName: 'CypressCoverage', + // reportTitles: 'Integration Tests Code Coverage']) + // } + // archiveArtifacts artifacts: 'cypress-reports/videos/*.mp4', fingerprint: true + // stash name: "cypress-coverage", includes: "cypress-coverage/**", allowEmpty: true + // } + // finally { + // catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') { + // junit testResults: 'cypress-results/**/*.xml', allowEmptyResults: true + // } + // sh script: "docker stop $BUILD_TAG-plone", returnStatus: true + // sh script: "docker rm -v $BUILD_TAG-plone", returnStatus: true + // sh script: "docker rm -v $BUILD_TAG-cypress", returnStatus: true + + // } + // } + // } + // } + // } + + // ) + // } + // } stage('Report to SonarQube') { // Exclude Pull-Requests @@ -133,12 +133,13 @@ pipeline { script{ checkout scm unstash "xunit-reports" - unstash "cypress-coverage" + // unstash "cypress-coverage" def scannerHome = tool 'SonarQubeScanner'; def nodeJS = tool 'NodeJS11'; withSonarQubeEnv('Sonarqube') { sh '''sed -i "s#/opt/frontend/my-volto-project/src/addons/${GIT_NAME}/##g" xunit-reports/coverage/lcov.info''' - sh "export PATH=$PATH:${scannerHome}/bin:${nodeJS}/bin; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER" + sh "export PATH=$PATH:${scannerHome}/bin:${nodeJS}/bin; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER" + // sh "export PATH=$PATH:${scannerHome}/bin:${nodeJS}/bin; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER" sh '''try=2; while [ \$try -gt 0 ]; do curl -s -XPOST -u "${SONAR_AUTH_TOKEN}:" "${SONAR_HOST_URL}api/project_tags/set?project=${GIT_NAME}-${BRANCH_NAME}&tags=${SONARQUBE_TAGS},${BRANCH_NAME}" > set_tags_result; if [ \$(grep -ic error set_tags_result ) -eq 0 ]; then try=0; else cat set_tags_result; echo "... Will retry"; sleep 60; try=\$(( \$try - 1 )); fi; done''' } } diff --git a/package.json b/package.json index e2d8971..111adc1 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "@eeacms/volto-tableau", "@eeacms/volto-datablocks", "@eeacms/volto-openlayers-map", - "@eeacms/volto-columns-block" + "@eeacms/volto-columns-block", + "@eeacms/volto-matomo" ], "dependencies": { "@cypress/code-coverage": "^3.9.5", @@ -28,6 +29,7 @@ "@eeacms/volto-datablocks": "^2.0.15", "@eeacms/volto-openlayers-map": "^0.1.3", "@eeacms/volto-columns-block": "^4.4.6", + "@eeacms/volto-matomo": "^2.0.3", "tableau-api-js": "github:eea/tableau-api-js#1.1.1", "axios": "0.24.0", "babel-plugin-transform-class-properties": "^6.24.1", diff --git a/src/components/manage/Blocks/FiltersBlock/Modal.jsx b/src/components/manage/Blocks/FiltersBlock/Modal.jsx index b6671d7..4a18481 100644 --- a/src/components/manage/Blocks/FiltersBlock/Modal.jsx +++ b/src/components/manage/Blocks/FiltersBlock/Modal.jsx @@ -3,6 +3,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { cloneDeep } from 'lodash'; import { Modal, Checkbox } from 'semantic-ui-react'; +import { trackSiteSearch } from '@eeacms/volto-matomo/utils'; import { setQuery } from '@eeacms/volto-industry-theme/actions'; import { inputsKeys, permitTypes } from './dictionary'; import SelectWrapper from './SelectWrapper'; @@ -111,7 +112,7 @@ const ModalView = ({ }, [query]); const applyFilters = React.useCallback(() => { - setQuery({ + const newQuery = { ...inputs, filter_change: { counter: (query['filter_change']?.counter || 0) + 1, @@ -119,6 +120,22 @@ const ModalView = ({ }, filter_search: null, filter_search_value: '', + }; + setQuery(newQuery); + trackSiteSearch({ + category: `Map/Table advanced-filter`, + keyword: JSON.stringify({ + ...Object.keys(newQuery) + .filter( + (key) => + inputsKeys.includes(key) && + newQuery[key]?.filter((value) => value)?.length, + ) + .reduce((obj, key) => { + obj[key] = newQuery[key]?.filter((value) => value); + return obj; + }, {}), + }), }); setOpen(false); /* eslint-disable-next-line */ diff --git a/src/components/manage/Blocks/FiltersBlock/Search.js b/src/components/manage/Blocks/FiltersBlock/Search.js index 87727af..b2e5182 100644 --- a/src/components/manage/Blocks/FiltersBlock/Search.js +++ b/src/components/manage/Blocks/FiltersBlock/Search.js @@ -6,6 +6,7 @@ import { Input, List } from 'semantic-ui-react'; import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib'; import Highlighter from 'react-highlight-words'; import config from '@plone/volto/registry'; +import { trackSiteSearch } from '@eeacms/volto-matomo/utils'; import { setQuery } from '@eeacms/volto-industry-theme/actions'; import { getEncodedQueryString } from '@eeacms/volto-industry-theme/helpers'; import { inputsKeys } from './dictionary'; @@ -141,6 +142,13 @@ const Search = ({ data, providers_data, query, setQuery, ...props }) => { type: value && type ? `search-${type}` : 'clear', }, }); + + if (value && type) { + trackSiteSearch({ + category: `Map/Table search-${type}`, + keyword: value, + }); + } }, [query, onChange, setQuery], ); diff --git a/src/components/manage/Blocks/IndustryMap/Sidebar.jsx b/src/components/manage/Blocks/IndustryMap/Sidebar.jsx index 82bd61b..1308b76 100644 --- a/src/components/manage/Blocks/IndustryMap/Sidebar.jsx +++ b/src/components/manage/Blocks/IndustryMap/Sidebar.jsx @@ -5,6 +5,7 @@ import cs from 'classnames'; import { Dropdown, Checkbox } from 'semantic-ui-react'; import { Icon } from '@plone/volto/components'; import { BodyClass } from '@plone/volto/helpers'; +import { trackSiteSearch } from '@eeacms/volto-matomo/utils'; import { setQuery } from '@eeacms/volto-industry-theme/actions'; import { getOptions, @@ -67,18 +68,32 @@ class Sidebar extends React.Component { inputsKeys.forEach((key) => { newInputs[key] = query[key] || []; }); - this.props.dispatch( - setQuery({ - ...newInputs, - ...filters, - filter_change: { - counter: (query['filter_change']?.counter || 0) + 1, - type: 'simple-filter', - }, - filter_search: null, - filter_search_value: '', + const newQuery = { + ...newInputs, + ...filters, + filter_change: { + counter: (query['filter_change']?.counter || 0) + 1, + type: 'simple-filter', + }, + filter_search: null, + filter_search_value: '', + }; + this.props.dispatch(setQuery(newQuery)); + trackSiteSearch({ + category: `Map/Table simple-filter`, + keyword: JSON.stringify({ + ...Object.keys(newQuery) + .filter( + (key) => + inputsKeys.includes(key) && + newQuery[key]?.filter((value) => value)?.length, + ) + .reduce((obj, key) => { + obj[key] = newQuery[key]?.filter((value) => value); + return obj; + }, {}), }), - ); + }); } clearFilters() { diff --git a/src/components/manage/Blocks/IndustryMap/styles.less b/src/components/manage/Blocks/IndustryMap/styles.less index 3de8701..49c5ad6 100644 --- a/src/components/manage/Blocks/IndustryMap/styles.less +++ b/src/components/manage/Blocks/IndustryMap/styles.less @@ -4,10 +4,14 @@ @element: custom; .industry-map { + height: 600px; + min-height: 600px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); .privacy-protection { - .wrapper { + width: 100%; + + .overlay .wrapped { opacity: 1; } } diff --git a/src/components/manage/Blocks/SiteBlocks/EnvironmentalFacilityDetails/View.jsx b/src/components/manage/Blocks/SiteBlocks/EnvironmentalFacilityDetails/View.jsx index ce96091..6e3b9b0 100644 --- a/src/components/manage/Blocks/SiteBlocks/EnvironmentalFacilityDetails/View.jsx +++ b/src/components/manage/Blocks/SiteBlocks/EnvironmentalFacilityDetails/View.jsx @@ -47,6 +47,7 @@ const View = (props) => { }); setFacilities(newFacilities); } + /* eslint-disable-next-line */ }, [provider_data, provider_data?.euregReportingYear, siteReportingYear]); return props.mode === 'edit' ? ( diff --git a/src/components/manage/Blocks/SiteBlocks/EnvironmentalSiteDetails/View.jsx b/src/components/manage/Blocks/SiteBlocks/EnvironmentalSiteDetails/View.jsx index b493c6f..8f89258 100644 --- a/src/components/manage/Blocks/SiteBlocks/EnvironmentalSiteDetails/View.jsx +++ b/src/components/manage/Blocks/SiteBlocks/EnvironmentalSiteDetails/View.jsx @@ -68,6 +68,7 @@ const View = (props) => { ), ); } + /* eslint-disable-next-line */ }, [provider_data, provider_data?.euregReportingYear, siteReportingYear]); return props.mode === 'edit' ? ( diff --git a/src/components/manage/Blocks/SiteLocationMap/styles.css b/src/components/manage/Blocks/SiteLocationMap/styles.css index f923709..d554fc4 100644 --- a/src/components/manage/Blocks/SiteLocationMap/styles.css +++ b/src/components/manage/Blocks/SiteLocationMap/styles.css @@ -12,3 +12,15 @@ height: 400px; min-height: 400px; } + +.site-location-map .privacy-protection { + width: 100%; +} + +.site-location-map .privacy-protection .overlay { + position: relative; +} + +.site-location-map .privacy-protection .overlay .wrapped { + opacity: 1; +} diff --git a/src/theme/site/globals/site.overrides b/src/theme/site/globals/site.overrides index d2145ad..6aff677 100644 --- a/src/theme/site/globals/site.overrides +++ b/src/theme/site/globals/site.overrides @@ -56,6 +56,10 @@ } } +.__react_component_tooltip { + max-width: 320px; +} + div#view .ui.container > * { margin-bottom: 1.5rem; } From f53985ad593bc6edc743c2d3f2897b81e5db2ca7 Mon Sep 17 00:00:00 2001 From: EEA Jenkins <@users.noreply.github.com> Date: Mon, 1 Nov 2021 12:08:43 +0000 Subject: [PATCH 8/8] Automated release 0.1.1 --- CHANGELOG.md | 22 +++++++++++++++++++--- package.json | 2 +- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3742d31..5028e8f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,21 @@ -# Changelog +### Changelog -## 0.1.0 +All notable changes to this project will be documented in this file. Dates are displayed in UTC. -- Initial release +Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). + +#### [0.1.1](https://github.com/eea/volto-industry-theme/compare/0.1.0...0.1.1) + +- Commented cypress [`80eb317`](https://github.com/eea/volto-industry-theme/commit/80eb317730e92feef27316f87ba4f6080e5fa7fd) +- Use latest addons versions [`384cd34`](https://github.com/eea/volto-industry-theme/commit/384cd34d51b8debb1444cb241576149e4abfe432) +- Stylelint fix [`19ef60c`](https://github.com/eea/volto-industry-theme/commit/19ef60c117e427fa7f1df4ced8a9686e88b19c72) +- Added eprtr blocks and more [`0ad23d2`](https://github.com/eea/volto-industry-theme/commit/0ad23d2e17fafff396137e53b5903b3b0b4b41e8) +- Improved Header & Footer [`cdbedcf`](https://github.com/eea/volto-industry-theme/commit/cdbedcf4cc75f71c8c892042db2d814f210348f0) +- Theme override [`c31ef7e`](https://github.com/eea/volto-industry-theme/commit/c31ef7e694b310508bace3b43a6ea2db142b7a54) +- Run bootstrap [`16b42cc`](https://github.com/eea/volto-industry-theme/commit/16b42cc3b48907fb0c803f256b549c034ca90d96) + +#### 0.1.0 + +> 1 November 2021 + +- Initial commit [`01a3e7c`](https://github.com/eea/volto-industry-theme/commit/01a3e7ce3982eb7e5eefb3d57dfa18bf3c622b93) diff --git a/package.json b/package.json index 111adc1..6a01dec 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@eeacms/volto-industry-theme", - "version": "0.1.0", + "version": "0.1.1", "description": "@eeacms/volto-industry-theme: Volto add-on", "main": "src/index.js", "author": "European Environment Agency: IDM2 A-Team",