├── .editorconfig ├── .github └── workflows │ ├── aws.yml │ └── ci.yml ├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── docs ├── fonts │ ├── Antwerpen-Regular.woff2 │ ├── AntwerpenSmallCaps-Regular.woff2 │ ├── AntwerpenTall-Tall.woff2 │ ├── SunAntwerpen_300.woff2 │ ├── SunAntwerpen_300_italic.woff2 │ ├── SunAntwerpen_500.woff2 │ ├── SunAntwerpen_500_italic.woff2 │ ├── SunAntwerpen_700.woff2 │ ├── SunAntwerpen_700_italic.woff2 │ ├── SunAntwerpen_800.woff2 │ └── SunAntwerpen_800_italic.woff2 ├── images │ ├── a-logo.svg │ └── ai.svg ├── index.html ├── scripts │ └── main.js └── styles │ ├── main.css │ └── styleguide.css ├── gulp ├── build.js ├── clean.js ├── copy.js ├── iconsprite.js ├── styles.js ├── templates.js └── watch.js ├── gulpfile.js ├── package-lock.json ├── package.json └── src ├── fonts ├── Antwerpen-Regular.woff2 ├── AntwerpenSmallCaps-Regular.woff2 ├── AntwerpenTall-Tall.woff2 ├── SunAntwerpen_300.woff2 ├── SunAntwerpen_300_italic.woff2 ├── SunAntwerpen_500.woff2 ├── SunAntwerpen_500_italic.woff2 ├── SunAntwerpen_700.woff2 ├── SunAntwerpen_700_italic.woff2 ├── SunAntwerpen_800.woff2 └── SunAntwerpen_800_italic.woff2 ├── icons ├── a11y.svg ├── accounting-bill.svg ├── accounting-bills.svg ├── add-square.svg ├── add.svg ├── advertising-megaphone.svg ├── alarm-bell.svg ├── alert-circle.svg ├── alert-diamond.svg ├── alert-triangle.svg ├── analytics-bars.svg ├── analytics-pie-1.svg ├── angle-brackets.svg ├── app-window.svg ├── archive.svg ├── arrange-letter.svg ├── arrange-number.svg ├── arrow-button-down-1.svg ├── arrow-button-left-1.svg ├── arrow-button-right-1.svg ├── arrow-button-up-1.svg ├── arrow-down-1.svg ├── arrow-left-1.svg ├── arrow-right-1.svg ├── arrow-up-1.svg ├── attachment.svg ├── audio-file-volume.svg ├── bicycle.svg ├── bin.svg ├── bluetooth.svg ├── book-open.svg ├── bookmarks-2.svg ├── brightness-1.svg ├── brightness.svg ├── button-loop.svg ├── button-shuffle.svg ├── button-split.svg ├── calendar-3.svg ├── calendar.svg ├── camera-1.svg ├── car-retro-2.svg ├── chat-translate.svg ├── check-1.svg ├── close.svg ├── cloud.svg ├── cog-1.svg ├── cog-double-3.svg ├── common-file-double-2.svg ├── common-file-empty.svg ├── common-file-text.svg ├── compass-arrow.svg ├── computer-bug.svg ├── controls-forward.svg ├── controls-pause.svg ├── controls-play.svg ├── controls-record.svg ├── controls-rewind.svg ├── controls-stop.svg ├── copy-paste-1.svg ├── credit-card-1.svg ├── cursor-1.svg ├── cursor-hand-1.svg ├── cursor-hand-2.svg ├── cursor-select-frame-1.svg ├── cursor-select-frame.svg ├── cursor-target-1.svg ├── cursor.svg ├── data-transfer-diagonal.svg ├── database-2.svg ├── delete-2.svg ├── developer-community-github-1.svg ├── direction-button-arrows.svg ├── dislike-2.svg ├── download-bottom.svg ├── drawer-download.svg ├── drawer-file.svg ├── drawer-open.svg ├── drawer-upload.svg ├── earth-1.svg ├── earth-3.svg ├── email-action-unread.svg ├── expand-1.svg ├── expand-3.svg ├── expand-vertical-1.svg ├── expand-vertical-3.svg ├── face-id.svg ├── file-code-1.svg ├── file-code.svg ├── filter-1.svg ├── filter-text.svg ├── flag-1.svg ├── flash.svg ├── floppy-disk-2.svg ├── folder-open.svg ├── folder.svg ├── gauge-dashboard.svg ├── graph-stats-ascend.svg ├── graph-stats-descend.svg ├── graph-stats.svg ├── hammer-wench.svg ├── hand-drag-1.svg ├── hand-drag.svg ├── hard-drive.svg ├── headphones-customer-support-human.svg ├── help-wheel.svg ├── hierarchy-1.svg ├── house-chimney.svg ├── hyperlink-2.svg ├── image-file-landscape.svg ├── info.svg ├── iris-scan-1.svg ├── keyboard-arrow-bottom-left.svg ├── keyboard-arrow-bottom-right.svg ├── keyboard-arrow-down.svg ├── keyboard-arrow-left.svg ├── keyboard-arrow-right.svg ├── keyboard-arrow-top-left.svg ├── keyboard-arrow-top-right.svg ├── keyboard-arrow-up.svg ├── keyboard.svg ├── laptop.svg ├── layers.svg ├── layout-column.svg ├── layout-headline.svg ├── layout-module-1.svg ├── legal-scale-unequal-1.svg ├── light-bulb-shine.svg ├── like-2.svg ├── list-bullets.svg ├── list-numbers.svg ├── location-off-target.svg ├── location-target-1.svg ├── location-target.svg ├── location-user.svg ├── lock-2.svg ├── lock-unlock-1.svg ├── login-1.svg ├── login-key.svg ├── logout-1.svg ├── love-it.svg ├── maps.svg ├── meeting-camera.svg ├── meeting-headphones-1.svg ├── messages-bubble-double.svg ├── messages-bubble.svg ├── mobile-phone.svg ├── module-puzzle.svg ├── monitor.svg ├── mouse.svg ├── move-expand-vertical.svg ├── move-shrink-vertical.svg ├── multiple-neutral-2.svg ├── music-note-2.svg ├── navigation-menu-4.svg ├── navigation-menu-horizontal.svg ├── navigation-menu-vertical.svg ├── navigation-menu.svg ├── navigation-next.svg ├── navigation-previous.svg ├── newspaper-fold.svg ├── office-file-adobe.svg ├── office-file-graph.svg ├── office-file-hierarchy.svg ├── office-file-sheet.svg ├── office-file-text-graph.svg ├── office-file-text.svg ├── os-system-apple.svg ├── os-system-microsoft.svg ├── overview.svg ├── paragraph-center-align.svg ├── paragraph-justified-align.svg ├── paragraph-left-align.svg ├── paragraph-right-align.svg ├── paragraph.svg ├── pencil-1.svg ├── pencil-write-1.svg ├── phone-charger.svg ├── phone.svg ├── pin-1.svg ├── pin-3.svg ├── pin.svg ├── power-button.svg ├── print-text.svg ├── professional-network-linkedin.svg ├── professional-tool-dropbox.svg ├── professional-tool-google-drive.svg ├── programming-browser.svg ├── question-circle.svg ├── rating-half-star.svg ├── rating-star.svg ├── redo.svg ├── remove-square-1.svg ├── remove.svg ├── rss-feed.svg ├── ruler.svg ├── scissors-2.svg ├── scroll-horizontal.svg ├── scroll-vertical.svg ├── search.svg ├── send-email.svg ├── settings-horizontal.svg ├── settings-vertical.svg ├── share-1.svg ├── share-2.svg ├── shop-1.svg ├── shopping-basket-2.svg ├── shopping-cart-1.svg ├── shrink-1.svg ├── shrink-2.svg ├── single-neutral.svg ├── social-instagram.svg ├── social-media-facebook.svg ├── social-media-meetup-alternate.svg ├── social-media-snapchat.svg ├── social-media-tiktok.svg ├── social-media-twitter.svg ├── social-media-x.svg ├── social-media-yammer.svg ├── social-music-podcast.svg ├── social-video-youtube-clip.svg ├── subtract-square.svg ├── subtract.svg ├── switch-off-1.svg ├── switch-on-1.svg ├── synchronize-arrows-1.svg ├── synchronize-arrows-three.svg ├── tags-double.svg ├── tags.svg ├── text-bold.svg ├── text-italic.svg ├── text-strike-through.svg ├── text-underline.svg ├── time-clock-circle.svg ├── toilet-paper-1.svg ├── touch-id-5.svg ├── undo.svg ├── upload-bottom.svg ├── upload-button.svg ├── usb-port-1.svg ├── user-signal-1.svg ├── vectors-anchor-rectangle.svg ├── vectors-anchor-square.svg ├── vectors-anchor-triangle.svg ├── vectors-line-path.svg ├── video-file-camera.svg ├── video-player.svg ├── view-1.svg ├── view-off.svg ├── volume-control-full.svg ├── volume-control-low.svg ├── volume-control-medium.svg ├── volume-control-off.svg ├── watch-time.svg ├── wench-1.svg ├── wifi.svg ├── zip-file.svg ├── zoom-in.svg └── zoom-out.svg ├── images ├── a-logo.svg └── ai.svg ├── index.njk ├── scripts └── main.js ├── styles ├── antwerpen.scss ├── atoms │ ├── _atoms.avatar.scss │ ├── _atoms.badge.scss │ ├── _atoms.breadcrumb.scss │ ├── _atoms.button.scss │ ├── _atoms.code.scss │ ├── _atoms.copyright.scss │ ├── _atoms.form.scss │ ├── _atoms.input.scss │ ├── _atoms.label.scss │ ├── _atoms.link.scss │ ├── _atoms.list.scss │ ├── _atoms.page-indicator.scss │ ├── _atoms.progress.scss │ ├── _atoms.radio-checkbox.scss │ ├── _atoms.range-slider.scss │ ├── _atoms.spinner.scss │ ├── _atoms.switch.scss │ ├── _atoms.table.scss │ ├── _atoms.toggle.scss │ ├── _atoms.tooltip.scss │ └── _index.scss ├── aui │ ├── _aui.hero.scss │ ├── _aui.item-counter.scss │ ├── _aui.leaflet.scss │ ├── _aui.pane.scss │ ├── _aui.search-filter.scss │ ├── _aui.sidebar.scss │ ├── _aui.table.scss │ └── _index.scss ├── base │ ├── _base.fonts.antwerpen.scss │ ├── _base.fonts.sun-antwerpen.scss │ ├── _base.icons.scss │ ├── _base.layout.scss │ ├── _base.media.scss │ ├── _base.normalize.scss │ ├── _base.typography.scss │ └── _index.scss ├── brand │ ├── _brand.css-properties.scss │ ├── _brand.demo.scss │ ├── _brand.shared-properties.scss │ └── _index.scss ├── main.scss ├── molecules │ ├── _index.scss │ ├── _molecules.accordion.scss │ ├── _molecules.alert.scss │ ├── _molecules.button-group.scss │ ├── _molecules.button-list.scss │ ├── _molecules.card.scss │ ├── _molecules.collapsible-list.scss │ ├── _molecules.datepicker.scss │ ├── _molecules.flyout.scss │ ├── _molecules.image.scss │ ├── _molecules.modal.scss │ ├── _molecules.navigation.scss │ ├── _molecules.overlay.scss │ ├── _molecules.pagination.scss │ ├── _molecules.step-indicator.scss │ ├── _molecules.tag.scss │ └── _molecules.upload.scss ├── organisms │ ├── _index.scss │ ├── _organisms.article.scss │ ├── _organisms.footer.scss │ ├── _organisms.header.scss │ ├── _organisms.navigation-menu.scss │ ├── _organisms.slideshow.scss │ └── _organisms.tag-list.scss ├── quarks │ ├── _index.scss │ ├── _quarks.colors.scss │ ├── _quarks.mixins.scss │ └── _quarks.variables.scss ├── shared │ └── _shared.placeholders.scss ├── styleguide.scss ├── sun-antwerpen.scss └── utilities │ ├── _index.scss │ ├── _utilities.background.scss │ ├── _utilities.layout.scss │ ├── _utilities.list.scss │ ├── _utilities.spacing.scss │ └── _utilities.text.scss └── templates ├── atoms.njk ├── base.njk ├── intro.njk ├── macros └── icon.njk ├── molecules.njk ├── organisms.njk ├── quarks.njk ├── toc.njk └── utilities.njk /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | quote_type = single 11 | 12 | # Matches multiple files with brace expansion notation 13 | # Set default charset 14 | [*.{js,scss}] 15 | charset = utf-8 16 | 17 | # 4 space indentation 18 | [*.{njk,js}] 19 | indent_style = space 20 | indent_size = 4 21 | 22 | # 2 space indentation 23 | [*.{json,scss,yml,md}] 24 | indent_style = space 25 | indent_size = 2 26 | -------------------------------------------------------------------------------- /.github/workflows/aws.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to AWS 2 | on: 3 | push: 4 | tags: 5 | - v* 6 | jobs: 7 | build: 8 | name: Build 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: Checkout 12 | uses: actions/checkout@v4 13 | - name: Use Node 22.x 14 | uses: actions/setup-node@v4 15 | with: 16 | node-version: 22 17 | - name: Install dependencies 18 | run: npm ci 19 | - name: Build library 20 | run: npm run aws 21 | - name: Archive build 22 | if: success() 23 | uses: actions/upload-artifact@v4 24 | with: 25 | name: dist 26 | path: dist 27 | deploy: 28 | name: Deploy 29 | runs-on: ubuntu-latest 30 | needs: build 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | - name: Download build 35 | uses: actions/download-artifact@v4 36 | with: 37 | name: dist 38 | path: dist 39 | - name: Uploading to Amazon S3 40 | uses: jakejarvis/s3-sync-action@master 41 | env: 42 | AWS_S3_BUCKET: ${{ secrets.AWS_BUCKET }} 43 | AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} 44 | AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} 45 | AWS_REGION: ${{ secrets.AWS_DEFAULT_REGION }} 46 | SOURCE_DIR: dist 47 | DEST_DIR: ${{ github.event.repository.name }} 48 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: Continuous integration 2 | on: 3 | push: 4 | branches: 5 | - "*" 6 | - "!master" 7 | pull_request: 8 | branches: 9 | - master 10 | jobs: 11 | build: 12 | name: Build 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: Checkout 16 | uses: actions/checkout@v4 17 | - name: Use Node 22.x 18 | uses: actions/setup-node@v4 19 | with: 20 | node-version: 22 21 | - name: Install dependencies 22 | run: npm ci 23 | - name: Build documentation 24 | run: npm run build 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX System files 2 | .DS_Store 3 | .idea 4 | 5 | # Dependency directory 6 | node_modules 7 | 8 | # Project files 9 | .tmp 10 | dist 11 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | **/.* 2 | gulp 3 | Gulpfile.js 4 | -------------------------------------------------------------------------------- /docs/fonts/Antwerpen-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/docs/fonts/Antwerpen-Regular.woff2 -------------------------------------------------------------------------------- /docs/fonts/AntwerpenSmallCaps-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/docs/fonts/AntwerpenSmallCaps-Regular.woff2 -------------------------------------------------------------------------------- /docs/fonts/AntwerpenTall-Tall.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/docs/fonts/AntwerpenTall-Tall.woff2 -------------------------------------------------------------------------------- /docs/fonts/SunAntwerpen_300.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/docs/fonts/SunAntwerpen_300.woff2 -------------------------------------------------------------------------------- /docs/fonts/SunAntwerpen_300_italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/docs/fonts/SunAntwerpen_300_italic.woff2 -------------------------------------------------------------------------------- /docs/fonts/SunAntwerpen_500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/docs/fonts/SunAntwerpen_500.woff2 -------------------------------------------------------------------------------- /docs/fonts/SunAntwerpen_500_italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/docs/fonts/SunAntwerpen_500_italic.woff2 -------------------------------------------------------------------------------- /docs/fonts/SunAntwerpen_700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/docs/fonts/SunAntwerpen_700.woff2 -------------------------------------------------------------------------------- /docs/fonts/SunAntwerpen_700_italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/docs/fonts/SunAntwerpen_700_italic.woff2 -------------------------------------------------------------------------------- /docs/fonts/SunAntwerpen_800.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/docs/fonts/SunAntwerpen_800.woff2 -------------------------------------------------------------------------------- /docs/fonts/SunAntwerpen_800_italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/docs/fonts/SunAntwerpen_800_italic.woff2 -------------------------------------------------------------------------------- /gulp/build.js: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------------------- 2 | // :: BUILD 3 | // ------------------------------------------------------------------- 4 | 5 | var gulp = require('gulp'); 6 | var fs = require('fs'); 7 | var replace = require('gulp-replace'); 8 | 9 | gulp.task('cdn', function (callback) { 10 | var nodePackageFile = JSON.parse(fs.readFileSync('./package.json')); 11 | var version = nodePackageFile.version; 12 | 13 | fs.rename('dist/aws', 'dist/' + version, function (err) { 14 | if (err) { 15 | throw err; 16 | } 17 | console.log('\n----++++ https://cdn.antwerpen.be/core_branding_scss/' + version + '/main.min.css ++++----\n'); 18 | callback(); 19 | }); 20 | }); 21 | 22 | gulp.task('replace', function() { 23 | return gulp.src(['.tmp/**/main.css', '.tmp/**/styleguide.css']) 24 | .pipe(replace('../../', '../')) 25 | .pipe(gulp.dest('docs')); 26 | }); 27 | 28 | gulp.task('replace:dist', function() { 29 | // Get package version to generate correct font url 30 | var nodePackageFile = JSON.parse(fs.readFileSync(__dirname + '/../package.json')); 31 | var nodePackageVersion = nodePackageFile.version; 32 | var nodePackageDescription = nodePackageFile.description; 33 | return gulp.src(['dist/**/*.css']) 34 | .pipe(replace('../../', 'https://cdn.antwerpen.be/' + nodePackageDescription + '/' + nodePackageVersion + '/assets/')) 35 | .pipe(gulp.dest('dist')); 36 | }); 37 | 38 | gulp.task('readme', function() { 39 | var nodePackageFile = JSON.parse(fs.readFileSync('./package.json')); 40 | var version = nodePackageFile.version; 41 | 42 | return gulp.src(['README.md']) 43 | .pipe(replace(/core_branding_scss\/[0-9]\.[0-9]\.[0-9]\/main.min.css/g, 'core_branding_scss/' + version + '/main.min.css')) 44 | .pipe(gulp.dest('./')); 45 | }); 46 | -------------------------------------------------------------------------------- /gulp/clean.js: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------------------- 2 | // :: CLEAN 3 | // ------------------------------------------------------------------- 4 | 5 | var gulp = require('gulp'); 6 | var del = require('del'); 7 | 8 | gulp.task('clean:tmp', function () { 9 | return del(['.tmp']); 10 | }); 11 | 12 | gulp.task('clean:dist', function () { 13 | return del(['dist']); 14 | }); 15 | 16 | gulp.task('clean:docs', function () { 17 | return del(['docs']); 18 | }); 19 | -------------------------------------------------------------------------------- /gulp/copy.js: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------------------- 2 | // :: COPY 3 | // ------------------------------------------------------------------- 4 | 5 | var gulp = require('gulp'); 6 | const fs = require('fs-extra'); 7 | const path = require('path'); 8 | 9 | gulp.task('copy', async function() { 10 | const copyTasks = [ 11 | fs.copy('src/fonts', 'dist/assets/fonts'), 12 | fs.copy('src/icons', 'dist/assets/icons'), 13 | fs.copy('src/images', 'dist/assets/images'), 14 | fs.copy('src/styles', 'dist/assets/styles', { 15 | filter: (src) => !src.endsWith('styleguide.scss'), 16 | }), 17 | ]; 18 | 19 | await Promise.all(copyTasks); 20 | }); 21 | 22 | gulp.task('copy:docs', async function() { 23 | const copyDocsTasks = [ 24 | fs.copy('.tmp', 'docs', { 25 | filter: (src) => fs.lstatSync(src).isDirectory() || src.endsWith('.html'), 26 | }), 27 | fs.copy('src/images', 'docs/images'), 28 | fs.copy('src/fonts', 'docs/fonts'), 29 | fs.copy('src/scripts', 'docs/scripts'), 30 | ]; 31 | 32 | await Promise.all(copyDocsTasks); 33 | }); 34 | 35 | gulp.task('move:aws', async function() { 36 | const distPath = 'dist'; 37 | const awsPath = path.join(distPath, 'aws'); 38 | 39 | try { 40 | // Ensure 'aws' folder exists 41 | await fs.ensureDir(awsPath); 42 | 43 | // Read all files in the 'dist' folder 44 | const files = await fs.readdir(distPath); 45 | 46 | // Move files to 'aws', skipping the 'aws' folder itself 47 | for (const file of files) { 48 | const filePath = path.join(distPath, file); 49 | 50 | if (file !== 'aws') { 51 | const targetPath = path.join(awsPath, file); 52 | await fs.move(filePath, targetPath); 53 | } 54 | } 55 | } catch (error) { 56 | console.error('Error during move:', error); 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /gulp/iconsprite.js: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------------------- 2 | // :: ICONFONT 3 | // ------------------------------------------------------------------- 4 | 5 | var gulp = require('gulp'); 6 | var svgSprite = require('gulp-svg-sprite'); 7 | 8 | gulp.task('icon-sprite', function () { 9 | return gulp.src('src/icons/*.svg') 10 | .pipe(svgSprite({ 11 | dest: 'styles', 12 | shape: { 13 | dimension: { 14 | maxWidth: 24, 15 | maxHeight: 24 16 | }, 17 | id: { 18 | generator: 'ai-%s' 19 | }, 20 | spacing: { 21 | padding: 1 22 | } 23 | }, 24 | mode: { 25 | symbol: { 26 | dest: '', 27 | sprite: '../images/ai.svg', 28 | common: 'ai', 29 | inline: true, 30 | prefix: '.ai-' 31 | }, 32 | }, 33 | svg: { 34 | transform: [ 35 | { 36 | svgo: { 37 | plugins: [ 38 | { 39 | mergePaths: false 40 | } 41 | ] 42 | } 43 | }, 44 | function(svg) { 45 | return svg 46 | .replace(/()/g, "") 47 | .replace(/( fill=\"#([0-9a-fA-F]{3,6})\")/g, "") 48 | .replace(/( fill=\"none")/g, "") 49 | .replace(/( stroke=\"#([0-9a-fA-F]{3,6})\")/g, "") 50 | .replace(/( xmlns=\"http:\/\/www.w3.org\/2000\/svg\")/g, "") 51 | .replace(/(style=\"position:absolute\")/g, "style=\"position:absolute\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"") 52 | .replace(/( )/g, " "); 53 | 54 | } 55 | ] 56 | } 57 | })) 58 | .pipe(gulp.dest('src/styles/')); 59 | }); 60 | -------------------------------------------------------------------------------- /gulp/styles.js: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------------------- 2 | // :: SASS 3 | // ------------------------------------------------------------------- 4 | 5 | var gulp = require('gulp'); 6 | var fs = require('fs'); 7 | var sass = require('gulp-sass')(require('sass')); 8 | var sourcemaps = require('gulp-sourcemaps'); 9 | var postcss = require("gulp-postcss"); 10 | var autoprefixer = require("autoprefixer"); 11 | var cssnano = require("cssnano"); 12 | var rename = require('gulp-rename'); 13 | var replace = require('gulp-replace'); 14 | var browserSync = require('browser-sync'); 15 | 16 | var cssNano = [ 17 | cssnano({ 18 | discardComments: { 19 | removeAllButFirst: true 20 | }, 21 | discardUnused: false 22 | }) 23 | ]; 24 | 25 | var autoPrefixer = [ 26 | autoprefixer() 27 | ]; 28 | 29 | var sassOptions = { 30 | outputStyle: 'expanded', 31 | sourceComments: false, 32 | silenceDeprecations: ['legacy-js-api'], 33 | } 34 | 35 | var sourcemapOptions = { 36 | includeContent: false 37 | }; 38 | 39 | gulp.task('sass', function () { 40 | return gulp.src('src/styles/**/*.scss') 41 | .pipe(sourcemaps.init()) 42 | .pipe(sass(sassOptions).on('error', sass.logError)) 43 | .pipe(postcss(autoPrefixer)) 44 | .pipe(gulp.dest('.tmp/styles')) 45 | .pipe(browserSync.stream()); 46 | }); 47 | 48 | 49 | // ------------------------------------------------------------------- 50 | // :: SASS DIST 51 | // ------------------------------------------------------------------- 52 | 53 | gulp.task('sass:dist', function () { 54 | 55 | return gulp.src(['src/styles/**/*.scss', '!src/styles/**/styleguide.scss']) 56 | .pipe(sass(sassOptions).on('error', sass.logError)) 57 | .pipe(postcss(autoPrefixer)) 58 | .pipe(gulp.dest('dist')) 59 | .pipe(sourcemaps.init()) 60 | .pipe(gulp.dest('./dist/')) 61 | .pipe(rename({ extname: '.min.css' })) 62 | .pipe(postcss(cssNano)) 63 | .pipe(sourcemaps.write("./", sourcemapOptions)) 64 | .pipe(gulp.dest('dist')); 65 | }); 66 | 67 | gulp.task('add-license', () => { 68 | const license = '/*\n' + fs.readFileSync('LICENSE.md', 'utf8') + '*/\n'; 69 | return gulp.src('dist/**/*.css') 70 | .pipe(replace(/^/, license)) 71 | .pipe(gulp.dest('dist')); 72 | }); 73 | -------------------------------------------------------------------------------- /gulp/watch.js: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------------------- 2 | // :: WATCH 3 | // ------------------------------------------------------------------- 4 | 5 | var gulp = require('gulp'); 6 | var browserSync = require('browser-sync').create(); 7 | 8 | gulp.task('watch', function () { 9 | browserSync.init({ 10 | notify: false, 11 | server: { 12 | baseDir: ['.tmp', 'src'], 13 | }, 14 | port: 9000 15 | }); 16 | gulp.watch('src/icons/*.*', gulp.series('icon-sprite', 'sass', 'render-templates')); 17 | gulp.watch('src/styles/**/*.scss', gulp.series('sass')); 18 | gulp.watch('src/**/*.njk', gulp.series('render-templates')); 19 | gulp.watch([ 20 | '.tmp/**/*.css', 21 | 'src/scripts/**/*.js', 22 | '.tmp/**/*.html' 23 | ]).on('change', browserSync.reload); 24 | }); 25 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | require('./gulp/build'), 4 | require('./gulp/clean'), 5 | require('./gulp/copy'), 6 | require('./gulp/iconsprite'), 7 | require('./gulp/styles'), 8 | require('./gulp/templates'), 9 | require('./gulp/watch'); 10 | 11 | var gulp = require('gulp'); 12 | 13 | // Start a development server 14 | gulp.task('server', gulp.series('clean:tmp', gulp.parallel('icon-sprite', 'sass', 'render-templates'), 'watch')); 15 | 16 | // Create a build 17 | gulp.task('build', gulp.series('clean:dist', gulp.parallel('icon-sprite', 'sass:dist'), 'add-license', 'copy', 'replace:dist')); 18 | 19 | // Build documentation 20 | gulp.task('docs', gulp.series('clean:docs', gulp.parallel('icon-sprite', 'sass', 'render-templates', 'readme'), 'copy:docs', 'replace')); 21 | 22 | // Run AWS task: publish to CDN 23 | gulp.task('aws', gulp.series('build', 'move:aws', 'cdn')); 24 | 25 | // Default task 26 | gulp.task('default', gulp.series('server')); 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@a-ui/core", 3 | "version": "7.0.2", 4 | "description": "core_branding_scss", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/a-ui/core_branding_scss.git" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1", 11 | "build": "gulp build", 12 | "start": "gulp server", 13 | "docs": "gulp docs", 14 | "aws": "gulp aws", 15 | "version": "gulp docs && git add -A ." 16 | }, 17 | "contributors": [ 18 | { 19 | "name": "Jasper Van Proeyen", 20 | "email": "jasper.vanproeyen@digipolis.be" 21 | }, 22 | { 23 | "name": "Sander Geenen", 24 | "email": "sander.geenen@studiohyperdrive.be" 25 | } 26 | ], 27 | "license": "MIT", 28 | "browserslist": [ 29 | "> 0.5%", 30 | "last 2 versions", 31 | "Firefox ESR", 32 | "not dead" 33 | ], 34 | "devDependencies": { 35 | "autoprefixer": "^10.4.20", 36 | "browser-sync": "^3.0.3", 37 | "cssnano": "^5.1.15", 38 | "del": "^6.1.1", 39 | "glob": "^7.2.3", 40 | "gulp": "^5.0.0", 41 | "gulp-nunjucks": "^5.1.0", 42 | "gulp-postcss": "^10.0.0", 43 | "gulp-rename": "^1.4.0", 44 | "gulp-replace": "^1.1.4", 45 | "gulp-sass": "^5.1.0", 46 | "gulp-sourcemaps": "^2.6.5", 47 | "gulp-svg-sprite": "^2.0.3", 48 | "postcss": "^8.4.49", 49 | "postcss-selector-parser": "^7.0.0", 50 | "sass": "^1.82.0" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/fonts/Antwerpen-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/src/fonts/Antwerpen-Regular.woff2 -------------------------------------------------------------------------------- /src/fonts/AntwerpenSmallCaps-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/src/fonts/AntwerpenSmallCaps-Regular.woff2 -------------------------------------------------------------------------------- /src/fonts/AntwerpenTall-Tall.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/src/fonts/AntwerpenTall-Tall.woff2 -------------------------------------------------------------------------------- /src/fonts/SunAntwerpen_300.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/src/fonts/SunAntwerpen_300.woff2 -------------------------------------------------------------------------------- /src/fonts/SunAntwerpen_300_italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/src/fonts/SunAntwerpen_300_italic.woff2 -------------------------------------------------------------------------------- /src/fonts/SunAntwerpen_500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/src/fonts/SunAntwerpen_500.woff2 -------------------------------------------------------------------------------- /src/fonts/SunAntwerpen_500_italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/src/fonts/SunAntwerpen_500_italic.woff2 -------------------------------------------------------------------------------- /src/fonts/SunAntwerpen_700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/src/fonts/SunAntwerpen_700.woff2 -------------------------------------------------------------------------------- /src/fonts/SunAntwerpen_700_italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/src/fonts/SunAntwerpen_700_italic.woff2 -------------------------------------------------------------------------------- /src/fonts/SunAntwerpen_800.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/src/fonts/SunAntwerpen_800.woff2 -------------------------------------------------------------------------------- /src/fonts/SunAntwerpen_800_italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-ui/core_branding_scss/f6cec20955e887a6ff13c9d319863defeda454ad/src/fonts/SunAntwerpen_800_italic.woff2 -------------------------------------------------------------------------------- /src/icons/a11y.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/accounting-bill.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/accounting-bills.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/add-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/advertising-megaphone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/alarm-bell.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/alert-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/alert-diamond.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/alert-triangle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/analytics-bars.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/analytics-pie-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/angle-brackets.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/app-window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/archive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/arrange-letter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/arrange-number.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/arrow-button-down-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/arrow-button-left-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/arrow-button-right-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/arrow-button-up-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/arrow-down-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/arrow-left-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/arrow-right-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/arrow-up-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/attachment.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/audio-file-volume.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/bicycle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/bin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/bluetooth.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/book-open.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/bookmarks-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/brightness-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/brightness.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/button-loop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/button-shuffle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/button-split.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/calendar-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/camera-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/car-retro-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/chat-translate.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/check-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/cloud.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/cog-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/cog-double-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/common-file-double-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/common-file-empty.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/common-file-text.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/compass-arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/computer-bug.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/controls-forward.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/controls-pause.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/controls-play.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/controls-record.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/controls-rewind.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/controls-stop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/copy-paste-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/credit-card-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/cursor-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/cursor-hand-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/cursor-hand-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/cursor-select-frame-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/cursor-select-frame.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/cursor-target-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/cursor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/data-transfer-diagonal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/database-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/delete-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/developer-community-github-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/direction-button-arrows.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/dislike-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/download-bottom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/drawer-download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/drawer-file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/drawer-open.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/drawer-upload.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/earth-1.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/icons/earth-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/email-action-unread.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/expand-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/expand-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/expand-vertical-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/expand-vertical-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/face-id.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/file-code-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/file-code.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/filter-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/filter-text.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/flag-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/flash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/floppy-disk-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/folder-open.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/folder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/gauge-dashboard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/graph-stats-ascend.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/graph-stats-descend.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/graph-stats.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/hammer-wench.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/hand-drag-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/hand-drag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/hard-drive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/headphones-customer-support-human.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/help-wheel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/hierarchy-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/house-chimney.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/hyperlink-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/image-file-landscape.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/info.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/icons/iris-scan-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/keyboard-arrow-bottom-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/keyboard-arrow-bottom-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/keyboard-arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/keyboard-arrow-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/keyboard-arrow-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/keyboard-arrow-top-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/keyboard-arrow-top-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/keyboard-arrow-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/keyboard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/laptop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/layers.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/layout-column.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/layout-headline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/layout-module-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/legal-scale-unequal-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/light-bulb-shine.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/like-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/list-bullets.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/list-numbers.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/location-off-target.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/location-target-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/location-target.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/location-user.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/lock-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/lock-unlock-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/login-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/login-key.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/logout-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/love-it.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/maps.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/meeting-camera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/meeting-headphones-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/messages-bubble-double.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/messages-bubble.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/mobile-phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/module-puzzle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/monitor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/mouse.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/move-expand-vertical.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/move-shrink-vertical.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/multiple-neutral-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/music-note-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/navigation-menu-4.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/navigation-menu-horizontal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/navigation-menu-vertical.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/navigation-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/navigation-next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/navigation-previous.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/newspaper-fold.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/icons/office-file-adobe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/office-file-graph.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/office-file-hierarchy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/office-file-sheet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/office-file-text-graph.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/office-file-text.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/os-system-apple.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/os-system-microsoft.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/overview.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/icons/paragraph-center-align.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/paragraph-justified-align.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/paragraph-left-align.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/paragraph-right-align.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/paragraph.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/pencil-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/pencil-write-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/phone-charger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/pin-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/pin-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/pin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/power-button.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/print-text.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/professional-network-linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/professional-tool-dropbox.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/professional-tool-google-drive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/programming-browser.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/question-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/rating-half-star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/rating-star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/redo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/remove-square-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/remove.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/rss-feed.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/ruler.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/scissors-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/scroll-horizontal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/scroll-vertical.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/send-email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/settings-horizontal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/settings-vertical.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/share-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/share-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/shop-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/shopping-basket-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/shopping-cart-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/shrink-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/shrink-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/single-neutral.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/social-instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/social-media-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/social-media-snapchat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/social-media-tiktok.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/social-media-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/social-media-x.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/social-media-yammer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/social-music-podcast.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/social-video-youtube-clip.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/subtract-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/subtract.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/switch-off-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/switch-on-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/synchronize-arrows-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/synchronize-arrows-three.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/tags-double.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/tags.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/text-bold.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/text-italic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/text-strike-through.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/text-underline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/time-clock-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/toilet-paper-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/touch-id-5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/undo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/upload-bottom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/upload-button.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/usb-port-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/user-signal-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/vectors-anchor-rectangle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/vectors-anchor-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/vectors-anchor-triangle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/vectors-line-path.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/video-file-camera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/video-player.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/view-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/view-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/volume-control-full.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/volume-control-low.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/volume-control-medium.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/volume-control-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/watch-time.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/wench-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/wifi.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/zip-file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/zoom-in.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/zoom-out.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/styles/antwerpen.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * ANTWERPEN 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | @use 'quarks'; 7 | @use 'base/base.fonts.antwerpen'; 8 | -------------------------------------------------------------------------------- /src/styles/atoms/_atoms.breadcrumb.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | @use '../shared/shared.placeholders' as *; 3 | 4 | /** 5 | * BREADCRUMB VARIABLES 6 | * ------------------------------------------------------------------- 7 | */ 8 | 9 | .a-breadcrumb { 10 | --breadcrumb-arrow-color: var(--BORDER-COLOR); 11 | } 12 | 13 | /** 14 | * BREADCRUMB 15 | * ------------------------------------------------------------------- 16 | */ 17 | 18 | .a-breadcrumb { 19 | @extend %u-list-reset; 20 | @include clearfix; 21 | 22 | li { 23 | display: block; 24 | float: left; 25 | line-height: 1.5; 26 | margin-bottom: 0; 27 | 28 | &:not(:last-child):after { 29 | background: var(--breadcrumb-arrow-color); 30 | content: ''; 31 | display: inline-block; 32 | height: var(--ICON-SIZE-SMALL); 33 | margin: 0 var(--SPACER-XS); 34 | mask: url('data:image/svg+xml;utf8,') no-repeat center center; 35 | vertical-align: middle; 36 | width: var(--ICON-SIZE-SMALL); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/styles/atoms/_atoms.copyright.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * COPYRIGHT VARIABLES 5 | * ------------------------------------------------------------------- 6 | * This component has shared variables with _molecules.image.scss. You can find them in _quarks.css-properties.scss. 7 | */ 8 | 9 | .a-copyright { 10 | --copyright-height: var(--shared-copyright-height); 11 | --copyright-color: var(--shared-copyright-color); 12 | --copyright-bg-color: var(--OVERLAY-COLOR); 13 | } 14 | 15 | /** 16 | * COPYRIGHT 17 | * ------------------------------------------------------------------- 18 | */ 19 | 20 | .a-copyright { 21 | background-color: var(--copyright-bg-color); 22 | color: var(--copyright-color); 23 | display: inline-flex; 24 | font-size: var(--FONT-SIZE-BASE); 25 | min-height: var(--copyright-height); 26 | transition: transform var(--ANIMATION-NORMAL); 27 | max-width: 100%; 28 | } 29 | 30 | a.a-copyright { 31 | text-decoration: none; 32 | 33 | &:hover, 34 | &:active, 35 | &:focus { 36 | .a-copyright__label { 37 | text-decoration: underline; 38 | } 39 | } 40 | } 41 | 42 | /** 43 | * COPYRIGHT ELEMENTS 44 | * ------------------------------------------------------------------- 45 | */ 46 | 47 | .a-copyright__sign { 48 | display: flex; 49 | font-size: var(--FONT-SIZE-LARGE); 50 | justify-content: center; 51 | margin: .5625rem 0; 52 | width: var(--copyright-height); 53 | } 54 | 55 | .a-copyright__label { 56 | flex: 1; 57 | font-weight: var(--FONT-WEIGHT-BOLD); 58 | margin: .625rem var(--SPACER-XS) .625rem 0; 59 | min-width: 0; 60 | } 61 | -------------------------------------------------------------------------------- /src/styles/atoms/_atoms.form.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * FORM ELEMENTS 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | .a-form { 9 | .a-input:not(:last-child) { 10 | margin-bottom: var(--SPACER); 11 | } 12 | 13 | .m-flyout { 14 | margin-bottom: var(--SPACER); 15 | 16 | .a-input { 17 | margin-bottom: 0; 18 | } 19 | } 20 | } 21 | 22 | /** 23 | * FIELDSET 24 | * ------------------------------------------------------------------- 25 | */ 26 | 27 | fieldset { 28 | border: none; 29 | border-bottom: var(--BORDER-WIDTH) solid var(--BORDER-COLOR); 30 | border-top: var(--BORDER-WIDTH) solid var(--BORDER-COLOR); 31 | margin: 0; 32 | min-width: 0; 33 | padding: var(--SPACER-XL) 0; 34 | position: relative; 35 | 36 | + fieldset { 37 | margin-top: calc(var(--BORDER-WIDTH) * -1); 38 | } 39 | 40 | &.a-input { 41 | border: none; 42 | padding: 0; 43 | } 44 | } 45 | 46 | legend { 47 | &:not(.a-input__label) { 48 | color: #{$neutral-400}; 49 | font-size: var(--FONT-SIZE-LARGE); 50 | font-weight: var(--FONT-WEIGHT-BOLD); 51 | padding: 0 var(--SPACER-XXS) 0 0; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/styles/atoms/_atoms.link.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * LINKS 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | /** 9 | * LINK WITH ICON LEFT OR RIGHT 10 | * ------------------------------------------------------------------- 11 | */ 12 | 13 | a:not([class^='a-button']) { 14 | &.has-icon-left .ai, 15 | &.has-icon-right .ai { 16 | font-size: .875em; 17 | vertical-align: middle; 18 | } 19 | 20 | &.has-icon-left .ai { 21 | padding-right: var(--SPACER-XXS); 22 | } 23 | 24 | &.has-icon-right .ai { 25 | padding-left: var(--SPACER-XXS); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/styles/atoms/_atoms.progress.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * PROGRESS VARIABLES 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | .a-progress { 9 | --progress-height: var(--SPACER-3XS); 10 | --progress-label-size: .875rem; 11 | --progress-label-spacing: var(--SPACER-XXS); 12 | --progress-bg-color: var(--LINK-ALT-TINT); 13 | --progress-bar-bg-color: var(--LINK); 14 | } 15 | 16 | /** 17 | * PROGRESS 18 | * ------------------------------------------------------------------- 19 | */ 20 | 21 | /** 22 | * PROGRESS ELEMENTS 23 | * ------------------------------------------------------------------- 24 | */ 25 | 26 | .a-progress__label { 27 | display: block; 28 | font-size: var(--progress-label-size); 29 | margin-bottom: var(--SPACER-XXS); 30 | } 31 | 32 | .a-progress__inner { 33 | background-color: var(--progress-bg-color); 34 | display: flex; 35 | height: var(--progress-height); 36 | position: relative; 37 | width: 100%; 38 | } 39 | 40 | .a-progress__bar { 41 | background-color: var(--progress-bar-bg-color); 42 | height: 100%; 43 | } 44 | 45 | /** 46 | * PROGRESS MODIFIERS 47 | * ------------------------------------------------------------------- 48 | */ 49 | 50 | .a-progress.a-progress--l { 51 | --progress-height: 1.25rem; 52 | --progress-label-size: 1rem; 53 | --progress-label-spacing: var(--SPACER-XS); 54 | } 55 | -------------------------------------------------------------------------------- /src/styles/atoms/_atoms.range-slider.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * RANGE SLIDER VARIABLES 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | .a-range-slider { 9 | --range-slider-bg-color: var(--LINK-ALT-TINT); 10 | --range-slider-bar-bg-color: var(--LINK); 11 | --range-slider-handle-bg-color: var(--range-slider-bar-bg-color); 12 | --range-slider-tickmark-bg-color: var(--range-slider-bar-bg-color); 13 | } 14 | 15 | /** 16 | * RANGE SLIDER 17 | * ------------------------------------------------------------------- 18 | */ 19 | 20 | /** 21 | * RANGE SLIDER ELEMENTS 22 | * ------------------------------------------------------------------- 23 | */ 24 | 25 | .a-range-slider__labels, 26 | .a-range-slider__descriptions { 27 | display: flex; 28 | justify-content: space-between; 29 | } 30 | 31 | .a-range-slider__labels { 32 | margin-bottom: var(--SPACER-XS); 33 | } 34 | 35 | .a-range-slider__descriptions { 36 | margin-top: var(--SPACER-3XS); 37 | } 38 | 39 | .a-range-slider__inner { 40 | background-color: var(--range-slider-bg-color); 41 | height: var(--SPACER-3XS); 42 | position: relative; 43 | width: 100%; 44 | } 45 | 46 | .a-range-slider__bar { 47 | background-color: var(--range-slider-bar-bg-color); 48 | height: 100%; 49 | position: absolute; 50 | } 51 | 52 | .a-range-slider__handle { 53 | border-radius: 50%; 54 | cursor: grab; 55 | padding: var(--SPACER-S); 56 | position: absolute; 57 | top: 50%; 58 | transform: translate(-50%, -50%); 59 | z-index: var(--Z-TOP); 60 | 61 | &:before { 62 | background-color: var(--range-slider-handle-bg-color); 63 | border-radius: var(--SPACER-XS); 64 | content: ''; 65 | display: block; 66 | height: var(--SPACER-XS); 67 | width: var(--SPACER-XS); 68 | } 69 | } 70 | 71 | .a-range-slider__tickmarks { 72 | bottom: 0; 73 | display: flex; 74 | justify-content: space-between; 75 | left: 0; 76 | position: absolute; 77 | right: 0; 78 | top: 0; 79 | width: 100%; 80 | } 81 | 82 | .a-range-slider__tickmark { 83 | background-color: var(--range-slider-tickmark-bg-color); 84 | width: calc(var(--BORDER-WIDTH) * 2); 85 | } 86 | -------------------------------------------------------------------------------- /src/styles/atoms/_atoms.toggle.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * TOGGLE 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | .a-toggle { 9 | display: block; 10 | 11 | @include at($screen-xs) { 12 | display: inline-block; 13 | } 14 | } 15 | 16 | /** 17 | * TOGGLE ELEMENTS 18 | * ------------------------------------------------------------------- 19 | */ 20 | 21 | .a-toggle__button { 22 | background: transparent; 23 | border: none; 24 | display: flex; 25 | flex-direction: column; 26 | height: var(--SPACER-XL); 27 | overflow: hidden; 28 | padding: 0; 29 | 30 | &[aria-expanded='true'] { 31 | .a-toggle__on, 32 | .a-toggle__off { 33 | transform: translateY(-100%); 34 | } 35 | } 36 | } 37 | 38 | .a-toggle__on, 39 | .a-toggle__off { 40 | transition-property: background, box-shadow, color, transform; 41 | width: 100%; 42 | } 43 | 44 | .a-toggle__on { 45 | order: 1; 46 | } 47 | 48 | .a-toggle__off { 49 | order: 2; 50 | } 51 | 52 | /** 53 | * TOGGLE MODIFIERS 54 | * ------------------------------------------------------------------- 55 | */ 56 | 57 | .a-toggle { 58 | &.a-toggle--s { 59 | .a-toggle__button { 60 | height: var(--SPACER-L); 61 | } 62 | } 63 | 64 | &.a-toggle--l { 65 | .a-toggle__button { 66 | height: var(--SPACER-XXL); 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/styles/atoms/_atoms.tooltip.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * TOOLTIP VARIABLES 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | .a-tooltip { 9 | --tooltip-max-width: 13rem; 10 | 11 | --tooltip-color: #{$white}; 12 | --tooltip-bg-color: #{$neutral-500}; 13 | 14 | --tooltip-inverted-color: #{$neutral-600}; 15 | --tooltip-inverted-bg-color: #{$neutral-200}; 16 | } 17 | 18 | /** 19 | * TOOLTIP PLACEHOLDER 20 | * ------------------------------------------------------------------- 21 | */ 22 | 23 | .a-tooltip { 24 | display: inline-block; 25 | font-size: .875rem; 26 | max-width: var(--tooltip-max-width); 27 | padding: var(--SPACER-3XS) var(--SPACER-XXS); 28 | position: relative; 29 | 30 | a { 31 | color: inherit; 32 | } 33 | } 34 | 35 | /** 36 | * TOOLTIP COLORS 37 | * ------------------------------------------------------------------- 38 | */ 39 | 40 | .a-tooltip { 41 | background-color: var(--tooltip-bg-color); 42 | color: var(--tooltip-color); 43 | 44 | &.a-tooltip--inverted { 45 | --tooltip-color: var(--tooltip-inverted-color); 46 | --tooltip-bg-color: var(--tooltip-inverted-bg-color); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/styles/atoms/_index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * ATOMS 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | @forward 'atoms.avatar'; 7 | @forward 'atoms.badge'; 8 | @forward 'atoms.breadcrumb'; 9 | @forward 'atoms.button'; 10 | @forward 'atoms.code'; 11 | @forward 'atoms.copyright'; 12 | @forward 'atoms.form'; 13 | @forward 'atoms.input'; 14 | @forward 'atoms.label'; 15 | @forward 'atoms.link'; 16 | @forward 'atoms.list'; 17 | @forward 'atoms.page-indicator'; 18 | @forward 'atoms.progress'; 19 | @forward 'atoms.radio-checkbox'; 20 | @forward 'atoms.range-slider'; 21 | @forward 'atoms.spinner'; 22 | @forward 'atoms.switch'; 23 | @forward 'atoms.table'; 24 | @forward 'atoms.toggle'; 25 | @forward 'atoms.tooltip'; 26 | -------------------------------------------------------------------------------- /src/styles/aui/_aui.hero.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * AUI HERO 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | .o-hero { 7 | align-items: center; 8 | background: var(--BG-COLOR); 9 | display: flex; 10 | height: calc(var(--SPACER) * 8); 11 | 12 | &__card { 13 | flex: 1 1 auto; 14 | padding-left: var(--SPACER-XL); 15 | } 16 | 17 | &__cta { 18 | padding-right: var(--SPACER-XL); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/styles/aui/_aui.item-counter.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * AUI ITEM COUNTER 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | .m-items-per-page { 7 | .a-input { 8 | .a-input__wrapper { 9 | display: inline-block; 10 | margin-right: var(--SPACER-XS); 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/styles/aui/_aui.pane.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * AUI PANE 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | .m-pane { 7 | background-color: var(--BG-COLOR-LIGHT); 8 | height: 100%; 9 | width: 20rem; 10 | z-index: var(--Z-PANE); 11 | 12 | &__content { 13 | height: 100%; 14 | overflow-y: scroll; 15 | } 16 | 17 | &--left, 18 | &--right { 19 | position: absolute; 20 | transition: transform var(--ANIMATION-NORMAL); 21 | 22 | &.m-pane--open { 23 | transform: translate(0); 24 | } 25 | } 26 | 27 | &--left { 28 | transform: translate(-100%); 29 | } 30 | 31 | &--right { 32 | transform: translate(100%); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/styles/aui/_aui.sidebar.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * AUI SIDEBAR 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | .o-sidebar { 7 | --sidebar-width: 20rem; 8 | } 9 | 10 | /** 11 | * PANE 12 | * ------------------------------------------------------------------- 13 | */ 14 | 15 | .o-sidebar { 16 | background-color: var(--BG-COLOR-LIGHT); 17 | height: 100%; 18 | overflow: hidden; 19 | transition: width var(--ANIMATION-NORMAL); 20 | width: 0; 21 | 22 | &__content { 23 | height: 100%; 24 | overflow-x: hidden; 25 | overflow-y: auto; 26 | width: var(--sidebar-width); 27 | 28 | &--padding { 29 | padding: var(--SPACER-XL); 30 | } 31 | } 32 | 33 | &.o-sidebar--open { 34 | width: var(--sidebar-width); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/styles/aui/_aui.table.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * AUI TABLE 3 | * ------------------------------------------------------------------- 4 | * - Column selector 5 | * - Table bar 6 | */ 7 | 8 | /** 9 | * COLUMN SELECTOR 10 | * ------------------------------------------------------------------- 11 | */ 12 | 13 | .a-table-column-selector { 14 | margin: 0 0 -1px; 15 | max-height: 70vh; 16 | overflow: auto; 17 | 18 | &__actions { 19 | display: flex; 20 | flex-direction: column; 21 | margin-left: var(--SPACER-3XS); 22 | margin-right: 0; 23 | } 24 | 25 | > li { 26 | align-items: center; 27 | display: flex; 28 | justify-content: space-between; 29 | padding: 0; 30 | 31 | &:first-child { 32 | border-top: none; 33 | } 34 | 35 | &:last-child { 36 | border-bottom: none; 37 | } 38 | 39 | &.show { 40 | animation: fadeIn var(--ANIMATION-NORMAL); 41 | } 42 | 43 | &.active { 44 | background-color: var(--BG-COLOR); 45 | } 46 | } 47 | } 48 | 49 | /** 50 | * AUI ANIMATION 51 | * ------------------------------------------------------------------- 52 | */ 53 | 54 | @keyframes fadeIn { 55 | from { 56 | opacity: 0; 57 | } 58 | 59 | to { 60 | opacity: 1; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/styles/aui/_index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * AUI styling for dynamic components 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | @forward 'aui.hero'; 7 | @forward 'aui.item-counter'; 8 | @forward 'aui.leaflet'; 9 | @forward 'aui.pane'; 10 | @forward 'aui.search-filter'; 11 | @forward 'aui.sidebar'; 12 | @forward 'aui.table'; 13 | -------------------------------------------------------------------------------- /src/styles/base/_base.fonts.antwerpen.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * ANTWERPEN FONT 5 | * ------------------------------------------------------------------- 6 | * The 'double declarations' are there to fix faux-bold in some browsers: 7 | * https://alistapart.com/article/say-no-to-faux-bold/ 8 | */ 9 | 10 | @include font-face('Antwerpen Small', '../../fonts/AntwerpenSmallCaps-Regular', 500, normal); 11 | @include font-face('Antwerpen Small', '../../fonts/AntwerpenSmallCaps-Regular', 700, normal); 12 | @include font-face('Antwerpen Regular', '../../fonts/Antwerpen-Regular', 500, normal); 13 | @include font-face('Antwerpen Regular', '../../fonts/Antwerpen-Regular', 700, normal); 14 | @include font-face('Antwerpen Tall', '../../fonts/AntwerpenTall-Tall', 500, normal); 15 | @include font-face('Antwerpen Tall', '../../fonts/AntwerpenTall-Tall', 700, normal); 16 | -------------------------------------------------------------------------------- /src/styles/base/_base.fonts.sun-antwerpen.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * SUN ANTWERPEN FONT 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | @include font-face('Sun Antwerpen', '../../fonts/SunAntwerpen_300', 300, normal); 9 | @include font-face('Sun Antwerpen', '../../fonts/SunAntwerpen_300_italic', 300, italic); 10 | @include font-face('Sun Antwerpen', '../../fonts/SunAntwerpen_500', 500, normal); 11 | @include font-face('Sun Antwerpen', '../../fonts/SunAntwerpen_500_italic', 500, italic); 12 | @include font-face('Sun Antwerpen', '../../fonts/SunAntwerpen_700', 700, normal); 13 | @include font-face('Sun Antwerpen', '../../fonts/SunAntwerpen_700_italic', 700, italic); 14 | @include font-face('Sun Antwerpen', '../../fonts/SunAntwerpen_800', 800, normal); 15 | @include font-face('Sun Antwerpen', '../../fonts/SunAntwerpen_800_italic', 800, italic); 16 | -------------------------------------------------------------------------------- /src/styles/base/_base.icons.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * ICONS 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | .ai { 9 | align-self: center; 10 | display: inline-flex; 11 | justify-content: center; 12 | line-height: 1; 13 | vertical-align: middle; 14 | 15 | // Normalize the icons width and height and prepare them for scalability 16 | svg { 17 | fill: none; 18 | height: 1em; 19 | position: relative; 20 | stroke: currentColor; 21 | stroke-linecap: round; 22 | stroke-linejoin: round; 23 | stroke-width: 6.25%; // Percentages don't give weird results when zooming in, use increments of 1.5625% #notkidding 24 | width: 1em; 25 | } 26 | } 27 | 28 | .ai--thin { 29 | svg { 30 | stroke-width: 4.6875%; 31 | } 32 | } 33 | 34 | .ai--spin { 35 | svg { 36 | animation: spin 1.6s linear infinite reverse; 37 | } 38 | } 39 | 40 | @keyframes spin { 41 | from { 42 | transform: rotate(0deg); 43 | } 44 | 45 | to { 46 | transform: rotate(360deg); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/styles/base/_base.layout.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * LAYOUT 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | /** 9 | * HTML styling 10 | * ------------------------------------------------------------------- 11 | */ 12 | 13 | html { 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-font-smoothing: antialiased; 16 | -webkit-tap-highlight-color: rgba($black, 0); 17 | box-sizing: border-box; 18 | text-size-adjust: 100%; 19 | } 20 | 21 | *, 22 | *:before, 23 | *:after { 24 | box-sizing: inherit; 25 | } 26 | 27 | /** 28 | * Remove inner padding and 29 | * border in Firefox 4+ 30 | */ 31 | ::-moz-focus-inner { 32 | border: none; 33 | padding: 0; 34 | } 35 | 36 | /** 37 | * Hide OS controls for Windows 38 | * http://msdn.microsoft.com/en-us/library/windows/apps/hh465742.aspx 39 | */ 40 | ::-ms-expand { 41 | display: none; 42 | } 43 | 44 | /** 45 | * Hide clear button in input fields for Windows 46 | * https://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx 47 | */ 48 | ::-ms-clear { 49 | display: none; 50 | height: 0; 51 | width: 0; 52 | } 53 | -------------------------------------------------------------------------------- /src/styles/base/_base.media.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * MEDIA 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | /** 9 | * BASE STYLING 10 | * ------------------------------------------------------------------- 11 | */ 12 | 13 | img { 14 | vertical-align: middle; 15 | } 16 | 17 | figure { 18 | margin: 0; 19 | } 20 | 21 | figcaption { 22 | font-size: var(--FONT-SIZE-BASE); 23 | line-height: var(--LINE-HEIGHT-PARAGRAPH); 24 | padding: var(--SPACER-XS); 25 | 26 | @include at($screen-sm) { 27 | padding: var(--SPACER-S) var(--SPACER-XS); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/styles/base/_base.normalize.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * NORMALIZE 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | @import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'); 7 | -------------------------------------------------------------------------------- /src/styles/base/_index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * BASE 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | @forward 'base.normalize'; 7 | @forward 'base.fonts.antwerpen'; 8 | @forward 'base.fonts.sun-antwerpen'; 9 | @forward 'base.icons'; 10 | @forward 'base.layout'; 11 | @forward 'base.media'; 12 | @forward 'base.typography'; 13 | -------------------------------------------------------------------------------- /src/styles/brand/_brand.demo.scss: -------------------------------------------------------------------------------- 1 | @use 'quarks' as *; 2 | @use 'sass:color'; 3 | 4 | :root { 5 | --brand-1: #{$supernova-50}; 6 | --brand-1-tint: #{$supernova-100}; 7 | --brand-1-contrast: #{$supernova-600}; 8 | --brand-1-alt: #{$rouge-500}; 9 | --brand-1-alt-tint: #{$rouge-600}; 10 | --brand-1-alt-contrast: #{$rouge-100}; 11 | 12 | --brand-2: #{$mantis-600}; 13 | --brand-2-tint: #{$mantis-700}; 14 | --brand-2-contrast: #{$white}; 15 | --brand-2-alt: #{$white}; 16 | --brand-2-alt-tint: #{$mantis-50}; 17 | --brand-2-alt-contrast: #{$black}; 18 | 19 | --brand-3: #{$rouge-500}; 20 | --brand-3-tint: #{$rouge-600}; 21 | --brand-3-contrast: #{$white}; 22 | --brand-3-alt: #{$white}; 23 | --brand-3-alt-tint: #{$rouge-50}; 24 | --brand-3-alt-contrast: #{$black}; 25 | 26 | --link: #{$tropical-rain-forest-500}; 27 | --link-tint: #{$tropical-rain-forest-600}; 28 | --link-alt-tint: #{$tropical-rain-forest-100}; 29 | 30 | --state-selected: #{color.mix($tropical-rain-forest-500, $white, 20%)}; 31 | } 32 | -------------------------------------------------------------------------------- /src/styles/brand/_brand.shared-properties.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | /** 3 | * SHARED CSS PROPERTIES 4 | * ------------------------------------------------------------------- 5 | */ 6 | 7 | // Avatar 8 | --shared-avatar-size-s: var(--SPACER-L); // 36px 9 | --shared-avatar-size: var(--SPACER-XL); // 48px 10 | --shared-avatar-size-l: var(--SPACER-XXL); // 60px 11 | 12 | // Copyright 13 | --shared-copyright-color: var(--TEXT-COLOR-INVERTED); 14 | --shared-copyright-height: var(--SPACER-L); 15 | 16 | // Header 17 | --shared-header-height: var(--SPACER-XL); 18 | 19 | // Slideshow 20 | --shared-slideshow-footer-color-light: var(--TEXT-COLOR-INVERTED); 21 | } 22 | -------------------------------------------------------------------------------- /src/styles/brand/_index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * THEME 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | @forward 'brand.css-properties'; 7 | @forward 'brand.shared-properties'; 8 | -------------------------------------------------------------------------------- /src/styles/main.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * ANTWERP CORE BRANDING 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | @use 'brand'; 7 | @use 'base'; 8 | @use 'utilities'; 9 | @use 'atoms'; 10 | @use 'molecules'; 11 | @use 'organisms'; 12 | @use 'aui'; 13 | -------------------------------------------------------------------------------- /src/styles/molecules/_index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MOLECULES 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | @forward 'molecules.accordion'; 7 | @forward 'molecules.alert'; 8 | @forward 'molecules.button-group'; 9 | @forward 'molecules.button-list'; 10 | @forward 'molecules.card'; 11 | @forward 'molecules.collapsible-list'; 12 | @forward 'molecules.datepicker'; 13 | @forward 'molecules.flyout'; 14 | @forward 'molecules.image'; 15 | @forward 'molecules.modal'; 16 | @forward 'molecules.navigation'; 17 | @forward 'molecules.overlay'; 18 | @forward 'molecules.pagination'; 19 | @forward 'molecules.step-indicator'; 20 | @forward 'molecules.tag'; 21 | @forward 'molecules.upload'; 22 | -------------------------------------------------------------------------------- /src/styles/molecules/_molecules.button-list.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | @use '../shared/shared.placeholders' as *; 3 | 4 | /** 5 | * BUTTON LIST 6 | * ------------------------------------------------------------------- 7 | */ 8 | 9 | .m-button-list { 10 | @extend %u-list-reset; 11 | 12 | li:not(:last-child) { 13 | margin-bottom: var(--SPACER-XS); 14 | } 15 | } 16 | 17 | /** 18 | * BUTTON LIST MODIFIERS 19 | * ------------------------------------------------------------------- 20 | */ 21 | 22 | .m-button-list--horizontal { 23 | display: flex; 24 | flex-wrap: wrap; 25 | margin-bottom: calc(var(--SPACER-XS) * -1); 26 | 27 | li { 28 | margin-bottom: var(--SPACER-XS); 29 | 30 | &:not(:last-child) { 31 | margin-right: var(--SPACER-XS); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/styles/molecules/_molecules.card.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * CARD VARIABLES 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | .m-card { 9 | --card-bg-color: var(--BG-COLOR-LIGHT); 10 | --card-border-color: var(--BORDER-COLOR); 11 | } 12 | 13 | /** 14 | * CARD 15 | * ------------------------------------------------------------------- 16 | */ 17 | 18 | .m-card { 19 | background-color: var(--card-bg-color); 20 | border: var(--BORDER-WIDTH) solid var(--card-border-color); 21 | } 22 | 23 | /** 24 | * CARD ELEMENTS 25 | * ------------------------------------------------------------------- 26 | */ 27 | 28 | .m-card__image img { 29 | display: block; 30 | width: 100%; 31 | } 32 | 33 | .m-card__body { 34 | padding: var(--SPACER); 35 | } 36 | -------------------------------------------------------------------------------- /src/styles/molecules/_molecules.collapsible-list.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | @use '../shared/shared.placeholders' as *; 3 | 4 | /** 5 | * COLLAPSIBLE LIST 6 | * ------------------------------------------------------------------- 7 | */ 8 | 9 | .m-collapsible-list { 10 | @extend %u-list-unstyled; 11 | 12 | ul { 13 | margin-bottom: calc(var(--SPACER-XXS) * -1); 14 | margin-top: var(--SPACER-XXS); 15 | padding-left: var(--SPACER); 16 | } 17 | } 18 | 19 | .m-collapsible-list__item { 20 | padding: var(--SPACER-XXS) 0; 21 | 22 | &:not(.is-active) { 23 | > a { 24 | text-decoration: none; 25 | transition: none; 26 | 27 | &:link, 28 | &:visited { 29 | color: var(--TEXT-COLOR); 30 | } 31 | 32 | &:hover, 33 | &:active, 34 | &:focus { 35 | color: var(--LINK-TINT); 36 | text-decoration: underline; 37 | } 38 | } 39 | } 40 | 41 | .ai { 42 | font-size: .875em; 43 | padding: 0 var(--SPACER-XXS) 0 0; 44 | } 45 | } 46 | 47 | /** 48 | * COLLAPSIBLE LIST MODIFIERS 49 | * ------------------------------------------------------------------- 50 | */ 51 | 52 | .m-collapsible-list__item { 53 | &.is-active { 54 | > a { 55 | font-weight: var(--FONT-WEIGHT-BOLD); 56 | } 57 | } 58 | 59 | ul.is-collapsed { 60 | display: none; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/styles/molecules/_molecules.image.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * IMAGES 5 | * ------------------------------------------------------------------- 6 | * This component has shared variables with _atoms.copyright.scss. You can find them in _quarks.css-properties.scss. 7 | */ 8 | 9 | /** 10 | * IMAGES VARIABLES 11 | * ------------------------------------------------------------------- 12 | */ 13 | 14 | .m-image { 15 | --image-copyright-height: calc(var(--shared-copyright-height) * -1); 16 | --image-copyright-color: var(--shared-copyright-color); 17 | } 18 | 19 | /** 20 | * IMAGE 21 | * ------------------------------------------------------------------- 22 | */ 23 | 24 | .m-image { 25 | display: inline-block; 26 | overflow: hidden; 27 | position: relative; 28 | 29 | img { 30 | height: auto; 31 | max-width: 100%; 32 | } 33 | } 34 | 35 | /** 36 | * IMAGE ELEMENTS 37 | * ------------------------------------------------------------------- 38 | */ 39 | 40 | .m-image__copyright { 41 | bottom: 0; 42 | color: var(--image-copyright-color); 43 | position: absolute; 44 | right: 0; 45 | transform: translateX(100%) translateX(var(--image-copyright-height)) translateY(calc(100% + var(--image-copyright-height))); 46 | 47 | &:hover, 48 | &:active, 49 | &:focus { 50 | color: var(--image-copyright-color); 51 | transform: translate(0, 0); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/styles/molecules/_molecules.modal.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * MODAL VARIABLES 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | .m-modal { 9 | --modal-bg-color: var(--BG-COLOR-LIGHT); 10 | --modal-border-color: var(--BORDER-COLOR); 11 | 12 | --modal-width: calc(var(--SPACER) * 17); 13 | --modal-width-l: calc(var(--SPACER) * 25); 14 | } 15 | 16 | /** 17 | * MODAL 18 | * ------------------------------------------------------------------- 19 | */ 20 | 21 | .m-modal { 22 | background-color: var(--modal-bg-color); 23 | border: var(--BORDER-WIDTH) solid var(--modal-border-color); 24 | border-radius: var(--BORDER-RADIUS); 25 | width: 100%; 26 | 27 | @include at($screen-xs) { 28 | max-width: var(--modal-width); 29 | } 30 | 31 | .m-modal__close { 32 | position: absolute; 33 | right: 0; 34 | top: 0; 35 | 36 | + * { 37 | margin-right: var(--SPACER-L); 38 | } 39 | } 40 | } 41 | 42 | /** 43 | * MODAL ELEMENTS 44 | * ------------------------------------------------------------------- 45 | */ 46 | 47 | .m-modal__content { 48 | padding: var(--SPACER); 49 | position: relative; 50 | } 51 | 52 | .m-modal__footer { 53 | margin-bottom: calc(var(--SPACER-XS) * -1); 54 | 55 | @include at($screen-xs) { 56 | display: flex; 57 | margin-bottom: 0; 58 | } 59 | 60 | .a-button { 61 | margin-bottom: var(--SPACER-XS); 62 | 63 | @include at($screen-xs) { 64 | margin-bottom: 0; 65 | 66 | &:not(:first-child) { 67 | margin-left: var(--SPACER-XS); 68 | } 69 | } 70 | } 71 | } 72 | 73 | /** 74 | * MODAL MODIFIERS 75 | * ------------------------------------------------------------------- 76 | */ 77 | 78 | .m-modal--l { 79 | 80 | @include at($screen-xs) { 81 | --modal-width: var(--modal-width-l); 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/styles/molecules/_molecules.overlay.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | @use '../atoms/atoms.button'; 3 | 4 | /** 5 | * OVERLAY VARIABLES 6 | * ------------------------------------------------------------------- 7 | * This component has shared variables with _organisms.slideshow.scss. You can find them in _quarks.css-properties.scss. 8 | */ 9 | 10 | .m-overlay { 11 | --overlay-bg-color: var(--OVERLAY-COLOR); 12 | --overlay-button-color: var(--TEXT-COLOR-INVERTED); 13 | --overlay-button-hover-color: #{$neutral-200}; 14 | } 15 | 16 | /** 17 | * OVERLAY 18 | * ------------------------------------------------------------------- 19 | */ 20 | 21 | .m-overlay { 22 | background-color: var(--overlay-bg-color); 23 | bottom: 0; 24 | display: none; 25 | left: 0; 26 | outline: 0; 27 | overflow: hidden; 28 | position: fixed; 29 | right: 0; 30 | top: 0; 31 | z-index: var(--Z-OVERLAY); 32 | 33 | &.is-active { 34 | align-items: center; 35 | display: flex; 36 | justify-content: center; 37 | } 38 | } 39 | 40 | /** 41 | * OVERLAY ELEMENTS 42 | * ------------------------------------------------------------------- 43 | */ 44 | 45 | .a-button.has-icon.m-overlay__button { 46 | --btn-color: var(--TEXT-COLOR-INVERTED); 47 | --btn-hover-color: var(--BG-COLOR); 48 | --btn-bg-color: transparent; 49 | --btn-hover-bg-color: var(--btn-bg-color); 50 | --btn-border-color: transparent; 51 | --btn-hover-border-color: transparent; 52 | 53 | position: absolute; 54 | right: var(--SPACER-XS); 55 | top: var(--SPACER-XS); 56 | } 57 | 58 | .m-overlay__inner { 59 | max-height: calc(100vh - 8.75rem); 60 | overflow-x: hidden; 61 | overflow-y: auto; 62 | } 63 | 64 | .m-overlay__slideshow.o-slideshow { 65 | max-height: 80vh; 66 | max-width: 105vh; 67 | width: 100%; 68 | 69 | .o-slideshow__footer { 70 | color: var(--shared-slideshow-footer-color-light); 71 | } 72 | } 73 | 74 | .m-overlay__pane { 75 | position: absolute; 76 | z-index: var(--Z-PANE-OVERLAY); 77 | } 78 | -------------------------------------------------------------------------------- /src/styles/organisms/_index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * ORGANISMS 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | @forward 'organisms.article'; 7 | @forward 'organisms.footer'; 8 | @forward 'organisms.header'; 9 | @forward 'organisms.navigation-menu'; 10 | @forward 'organisms.slideshow'; 11 | @forward 'organisms.tag-list'; 12 | -------------------------------------------------------------------------------- /src/styles/organisms/_organisms.article.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * ARTICLE VARIABLES 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | .o-article { 9 | --article-h1-margin: var(--SPACER-XXL) 0 var(--SPACER); 10 | --article-h2-margin: var(--SPACER-XL) 0 var(--SPACER-S); 11 | --article-h3-margin: var(--SPACER-L) 0 var(--SPACER-S); 12 | --article-h4-margin: var(--SPACER) 0 var(--SPACER-XS); 13 | --article-h5-margin: var(--SPACER) 0 var(--SPACER-XS); 14 | --article-h6-margin: var(--SPACER) 0 var(--SPACER-XS); 15 | --article-p-margin: 0 0 var(--SPACER-XS); 16 | --article-ul-margin: 0 0 var(--SPACER-S); 17 | --article-ol-margin: 0 0 var(--SPACER-3XS); 18 | --article-li-margin: 0 0 var(--SPACER-3XS); 19 | } 20 | 21 | /** 22 | * ARTICLE 23 | * ------------------------------------------------------------------- 24 | */ 25 | 26 | .o-article { 27 | h1, 28 | h2, 29 | h3 { 30 | hyphens: auto; 31 | } 32 | 33 | h1 { 34 | margin: var(--article-h1-margin); 35 | } 36 | 37 | h2 { 38 | margin: var(--article-h2-margin); 39 | } 40 | 41 | h3 { 42 | margin: var(--article-h3-margin); 43 | } 44 | 45 | h4 { 46 | margin: var(--article-h4-margin); 47 | } 48 | 49 | h5 { 50 | margin: var(--article-h5-margin); 51 | } 52 | 53 | h6 { 54 | margin: var(--article-h6-margin); 55 | } 56 | 57 | p { 58 | margin: var(--article-p-margin); 59 | } 60 | 61 | ul, 62 | ol { 63 | li { 64 | margin: var(--article-li-margin); 65 | } 66 | 67 | ul, 68 | ol { 69 | margin: 0; 70 | padding-left: var(--SPACER); 71 | } 72 | } 73 | 74 | ul { 75 | margin: var(--article-ul-margin); 76 | } 77 | 78 | ol { 79 | margin: var(--article-ol-margin); 80 | } 81 | 82 | // Fix margin of first item in article 83 | > :first-child { 84 | margin-top: 0; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/styles/organisms/_organisms.footer.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * FOOTER VARIABLES 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | .o-footer { 9 | --footer-bg: #{$black}; 10 | --footer-color: var(--BG-COLOR-LIGHT); 11 | } 12 | 13 | /** 14 | * FOOTER 15 | * ------------------------------------------------------------------- 16 | */ 17 | 18 | .o-footer { 19 | align-items: center; 20 | background-color: var(--footer-bg); 21 | display: flex; 22 | flex: 0 0 auto; 23 | height: var(--SPACER-XL); 24 | justify-content: center; 25 | position: relative; 26 | text-align: center; 27 | 28 | .o-footer__button { 29 | border-radius: 0; 30 | 31 | @include at($screen-sm) { 32 | bottom: 0; 33 | position: absolute; 34 | right: 0; 35 | } 36 | } 37 | } 38 | 39 | /** 40 | * FOOTER ELEMENTS 41 | * ------------------------------------------------------------------- 42 | */ 43 | 44 | .o-footer__label { 45 | color: var(--footer-color); 46 | font-size: var(--FONT-SIZE-SMALL); 47 | line-height: var(--LINE-HEIGHT-PARAGRAPH); 48 | padding: 0 var(--SPACER-XS); 49 | 50 | @include to($screen-sm) { 51 | flex: 1 1 auto; 52 | } 53 | 54 | @include at($screen-sm) { 55 | padding: 0 var(--SPACER-XXL); 56 | } 57 | 58 | a { 59 | color: inherit; 60 | text-decoration: underline; 61 | 62 | &:hover, 63 | &:active, 64 | &:focus { 65 | text-decoration: none; 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/styles/organisms/_organisms.header.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * HEADER VARIABLES 5 | * ------------------------------------------------------------------- 6 | * This component has shared variables with _organisms.navigation-menu.scss. You can find them in _quarks.css-properties.scss. 7 | */ 8 | 9 | .o-header { 10 | --header-height: var(--shared-header-height); 11 | --header-bg-color: var(--BG-COLOR-LIGHT); 12 | --header-border: var(--BORDER-COLOR); 13 | } 14 | 15 | /** 16 | * HEADER 17 | * ------------------------------------------------------------------- 18 | */ 19 | 20 | .o-header { 21 | background-color: var(--header-bg-color); 22 | border-bottom: var(--BORDER-WIDTH) solid var(--header-border); 23 | box-sizing: content-box; 24 | height: var(--header-height); 25 | position: relative; 26 | 27 | *, 28 | *:after, 29 | *:before { 30 | box-sizing: border-box; 31 | } 32 | } 33 | 34 | /** 35 | * HEADER LAYOUT 36 | * ------------------------------------------------------------------- 37 | */ 38 | 39 | .o-header__content-wrapper { 40 | display: flex; 41 | flex-wrap: wrap; 42 | height: 100%; 43 | justify-content: flex-end; 44 | } 45 | 46 | .o-header__content { 47 | flex: 1; 48 | height: 100%; 49 | } 50 | 51 | .o-header__menu-items { 52 | display: flex; 53 | justify-content: flex-end; 54 | } 55 | 56 | /** 57 | * HEADER ELEMENTS 58 | * ------------------------------------------------------------------- 59 | */ 60 | 61 | .o-header__button { 62 | border-left: var(--BORDER-WIDTH) solid var(--header-border); 63 | 64 | &, 65 | .a-avatar { 66 | border-radius: 0; 67 | } 68 | } 69 | 70 | .o-header__button-skip { 71 | cursor: default; 72 | opacity: 0; 73 | position: absolute; 74 | transform: translateY(calc(var(--header-height) * -1)); 75 | z-index: var(--Z-HEADER); 76 | 77 | &:focus { 78 | cursor: pointer; 79 | opacity: 1; 80 | transform: translateY(0); 81 | } 82 | } 83 | 84 | .o-header__logo { 85 | margin-top: var(--BORDER-WIDTH); 86 | position: absolute; 87 | top: var(--header-height); 88 | 89 | img { 90 | height: calc(var(--SPACER) * 3); 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /src/styles/organisms/_organisms.tag-list.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | @use '../shared/shared.placeholders' as *; 3 | 4 | /** 5 | * TAG LIST 6 | * ------------------------------------------------------------------- 7 | */ 8 | 9 | .o-tag-list { 10 | @extend %u-list-reset; 11 | 12 | display: flex; 13 | flex-wrap: wrap; 14 | margin-bottom: calc(var(--SPACER-XXS) * -1); 15 | } 16 | 17 | /** 18 | * TAG LIST ELEMENTS 19 | * ------------------------------------------------------------------- 20 | */ 21 | 22 | .o-tag-list__item { 23 | margin-bottom: var(--SPACER-XXS); 24 | 25 | &:not(:last-child) { 26 | margin-right: var(--SPACER-XXS); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/styles/quarks/_index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * QUARKS 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | @forward 'quarks.mixins'; 7 | @forward 'quarks.colors'; 8 | @forward 'quarks.variables'; 9 | -------------------------------------------------------------------------------- /src/styles/quarks/_quarks.variables.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * GLOBAL VARIABLES 3 | * ------------------------------------------------------------------- 4 | * Leave here for renderer 5 | */ 6 | @use 'quarks.colors' as *; 7 | 8 | /** 9 | * BREAKPOINTS 10 | * ------------------------------------------------------------------- 11 | * CSS variables can't (yet) be used in media queries, so we need to define 12 | * them here as SCSS variables so we can use them like that in media queries. 13 | */ 14 | 15 | $screen-xs: 30rem !default; // 480px 16 | $screen-sm: 45rem !default; // 720px 17 | $screen-md: 62rem !default; // 992px 18 | $screen-lg: 75rem !default; // 1200px 19 | $screen-xl: 90rem !default; // 90rem - 1440px, $screen-xl = max-width of u-container + width of official logo * 2 + space between logo and u-container * 2 20 | 21 | $screen-xxs-max: 29.9375rem !default; // 479px ($screen-xs - 1px) 22 | $screen-xs-max: 44.9375rem !default; // 719px ($screen-sm - 1px) 23 | $screen-sm-max: 61.9375rem !default; // 991px ($screen-md - 1px) 24 | $screen-md-max: 74.9375rem !default; // 1199px ($screen-lg - 1px) 25 | $screen-lg-max: 89.9375rem !default; // 1439px ($screen-xl - 1px) 26 | -------------------------------------------------------------------------------- /src/styles/shared/_shared.placeholders.scss: -------------------------------------------------------------------------------- 1 | %u-list-reset { 2 | line-height: 1; 3 | list-style: none; 4 | margin: 0; 5 | padding: 0; 6 | 7 | ul, 8 | ol { 9 | list-style: none; 10 | padding: 0; 11 | } 12 | } 13 | 14 | %u-list-unstyled { 15 | list-style: none; 16 | padding: 0; 17 | 18 | ul, 19 | ol { 20 | list-style: none; 21 | } 22 | } 23 | 24 | %u-text-truncate { 25 | overflow: hidden; 26 | text-overflow: ellipsis; 27 | white-space: nowrap; 28 | } 29 | 30 | %a-list { 31 | padding-left: var(--SPACER-S); 32 | 33 | .a-list__content { 34 | display: inline-flex; 35 | padding: var(--SPACER-XXS) 0; 36 | } 37 | 38 | .a-list__text { 39 | flex-grow: 1; 40 | } 41 | 42 | .a-list__text + .ai, 43 | .ai + .a-list__text { 44 | margin-left: var(--SPACER-XS); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/styles/sun-antwerpen.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * SUN ANTWERPEN 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | @use 'quarks'; 7 | @use 'base/base.fonts.sun-antwerpen'; 8 | -------------------------------------------------------------------------------- /src/styles/utilities/_index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * UTILITIES 3 | * ------------------------------------------------------------------- 4 | */ 5 | 6 | @forward 'utilities.background'; 7 | @forward 'utilities.layout'; 8 | @forward 'utilities.list'; 9 | @forward 'utilities.spacing'; 10 | @forward 'utilities.text'; 11 | -------------------------------------------------------------------------------- /src/styles/utilities/_utilities.background.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * BACKGROUND COLOR CLASSES 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | .u-bg { 9 | background-color: var(--BG-COLOR); 10 | color: var(--TEXT-COLOR); 11 | } 12 | 13 | .u-bg-inverted { 14 | background-color: var(--BG-COLOR-INVERTED); 15 | color: var(--TEXT-COLOR-INVERTED); 16 | } 17 | 18 | .u-bg-primary { 19 | background-color: var(--BRAND-1); 20 | color: var(--BRAND-1-CONTRAST); 21 | } 22 | 23 | .u-bg-primary-inverted { 24 | background-color: var(--BRAND-1-ALT-TINT); 25 | color: var(--BRAND-1-ALT-CONTRAST); 26 | } 27 | 28 | .u-bg-secondary { 29 | background-color: var(--BRAND-2); 30 | color: var(--BRAND-2-CONTRAST); 31 | } 32 | 33 | .u-bg-secondary-inverted { 34 | background-color: var(--BRAND-2-ALT-TINT); 35 | color: var(--BRAND-2-ALT-CONTRAST); 36 | } 37 | 38 | .u-bg-tertiary { 39 | background-color: var(--BRAND-3); 40 | color: var(--BRAND-3-CONTRAST); 41 | } 42 | 43 | .u-bg-tertiary-inverted { 44 | background-color: var(--BRAND-3-ALT-TINT); 45 | color: var(--BRAND-3-ALT-CONTRAST); 46 | } 47 | 48 | .u-bg-info { 49 | background-color: var(--STATE-INFO); 50 | color: var(--STATE-INFO-CONTRAST); 51 | } 52 | 53 | .u-bg-success { 54 | background-color: var(--STATE-SUCCESS); 55 | color: var(--STATE-SUCCESS-CONTRAST); 56 | } 57 | 58 | .u-bg-warning { 59 | background-color: var(--STATE-WARNING); 60 | color: var(--STATE-WARNING-CONTRAST); 61 | } 62 | 63 | .u-bg-danger { 64 | background-color: var(--STATE-DANGER); 65 | color: var(--STATE-DANGER-CONTRAST); 66 | } 67 | 68 | .u-bg-white { 69 | background-color: $white; 70 | color: $black; 71 | } 72 | 73 | .u-bg-black { 74 | background-color: $black; 75 | color: $white; 76 | } 77 | -------------------------------------------------------------------------------- /src/styles/utilities/_utilities.layout.scss: -------------------------------------------------------------------------------- 1 | @use '../quarks' as *; 2 | 3 | /** 4 | * LAYOUT HELPERS 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | /** 9 | * LAYOUT CONTAINERS 10 | * ------------------------------------------------------------------- 11 | */ 12 | 13 | .u-container { 14 | margin: 0 auto; 15 | max-width: $screen-lg; 16 | padding: 0 var(--SPACER); 17 | width: 100%; 18 | } 19 | 20 | /** 21 | * VIEWPORT HELPERS 22 | * ------------------------------------------------------------------- 23 | */ 24 | .u-viewport-vertical { 25 | height: 100vh; 26 | overflow: hidden; 27 | position: relative; 28 | } 29 | 30 | /** 31 | * SCROLL HELPERS 32 | * ------------------------------------------------------------------- 33 | */ 34 | .u-horizontal-scroll { 35 | overflow-x: auto; 36 | overflow-y: hidden; 37 | } 38 | 39 | .u-vertical-scroll { 40 | overflow-x: hidden; 41 | overflow-y: auto; 42 | } 43 | 44 | .u-no-scroll { 45 | overflow: hidden; 46 | } 47 | 48 | /** 49 | * HORIZONTAL & VERTICAL CONTAINERS 50 | * ------------------------------------------------------------------- 51 | */ 52 | 53 | .u-container-horizontal, 54 | .u-container-vertical { 55 | display: flex; 56 | height: 100%; 57 | } 58 | 59 | .u-container-vertical { 60 | flex-direction: column; 61 | } 62 | 63 | .u-container--filled { 64 | flex: 1; 65 | overflow: hidden; 66 | position: relative; 67 | } 68 | 69 | /** 70 | * LAYOUT SCROLLING 71 | * ------------------------------------------------------------------- 72 | */ 73 | 74 | /** 75 | * LAYOUT CLEARANCE 76 | * ------------------------------------------------------------------- 77 | */ 78 | 79 | .u-clearfix { 80 | @include clearfix; 81 | } 82 | 83 | /** 84 | * ACCESSIBILITY CLASSES 85 | * ------------------------------------------------------------------- 86 | */ 87 | 88 | %u-screen-reader-only { 89 | clip: rect(1px, 1px, 1px, 1px); 90 | height: 1px; 91 | overflow: hidden; 92 | position: absolute !important; 93 | width: 1px; 94 | } 95 | 96 | .u-screen-reader-only { 97 | @extend %u-screen-reader-only; 98 | } 99 | -------------------------------------------------------------------------------- /src/styles/utilities/_utilities.list.scss: -------------------------------------------------------------------------------- 1 | @use '../shared/shared.placeholders' as *; 2 | 3 | /** 4 | * LIST HELPERS 5 | * ------------------------------------------------------------------- 6 | */ 7 | 8 | /** 9 | * List without default padding and standard list styling. 10 | */ 11 | 12 | .u-list-reset { 13 | @extend %u-list-reset; 14 | } 15 | 16 | /** 17 | * List without standard list styling. 18 | */ 19 | 20 | .u-list-unstyled { 21 | @extend %u-list-unstyled; 22 | } 23 | -------------------------------------------------------------------------------- /src/templates/macros/icon.njk: -------------------------------------------------------------------------------- 1 | {% macro render(name, hidden=true, class='ai', attr='') %}{% endmacro %} 2 | 3 | {% macro code(name, hidden=true, class='ai', attr='') %}<span class="{{ class | safe }}"{% if hidden %} aria-hidden="true"{% endif %}{{ attr | safe }}><svg><use href="https://cdn.antwerpen.be/core_branding_scss/{{ VERSION_INFO.version }}/assets/images/ai.svg#ai-{{ name }}" /></svg></span>{% endmacro %} 4 | --------------------------------------------------------------------------------