├── .editorconfig ├── .gitignore ├── .gitlab-ci.yml ├── .gitlab └── merge_request_templates │ └── pr.md ├── .prettierignore ├── .prettierrc ├── .stylelintignore ├── .stylelintrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── _includes └── sprite-icons.svg ├── assets ├── css │ ├── android-dark-mode.css │ └── android-reset.css └── img │ ├── bank-icons │ ├── 3d-secure.svg │ ├── amex-safekey.svg │ ├── discover-protectbuy.svg │ ├── mastercard-securecode.svg │ ├── paypal.svg │ └── visa-secure.svg │ ├── credit-card-icons │ ├── cc-american-express.svg │ ├── cc-dankort.svg │ ├── cc-diners-club.svg │ ├── cc-discover.svg │ ├── cc-forbrugs.svg │ ├── cc-jcb.svg │ ├── cc-maestro.svg │ ├── cc-master.svg │ ├── cc-paypal.svg │ ├── cc-unionpay.svg │ ├── cc-visa-electron.svg │ └── cc-visa.svg │ ├── errors │ ├── broken-file.svg │ ├── broken-image.svg │ ├── error-404.svg │ ├── error-500.svg │ ├── generic-error.svg │ ├── no-access-page.svg │ ├── preview-unavailable.svg │ └── unsupported-browser.svg │ ├── flags │ ├── AD.svg │ ├── AE.svg │ ├── AF.svg │ ├── AG.svg │ ├── AI.svg │ ├── AL.svg │ ├── AM.svg │ ├── AO.svg │ ├── AR.svg │ ├── AS.svg │ ├── AT.svg │ ├── AU.svg │ ├── AW.svg │ ├── AZ.svg │ ├── BA.svg │ ├── BB.svg │ ├── BD.svg │ ├── BE.svg │ ├── BF.svg │ ├── BG.svg │ ├── BH.svg │ ├── BI.svg │ ├── BJ.svg │ ├── BL.svg │ ├── BM.svg │ ├── BN.svg │ ├── BO.svg │ ├── BQ.svg │ ├── BR.svg │ ├── BS.svg │ ├── BT.svg │ ├── BW.svg │ ├── BY.svg │ ├── BZ.svg │ ├── CA.svg │ ├── CD.svg │ ├── CF.svg │ ├── CG.svg │ ├── CH.svg │ ├── CI.svg │ ├── CK.svg │ ├── CL.svg │ ├── CM.svg │ ├── CN.svg │ ├── CO.svg │ ├── CR.svg │ ├── CU.svg │ ├── CV.svg │ ├── CW.svg │ ├── CY.svg │ ├── CZ.svg │ ├── DE.svg │ ├── DJ.svg │ ├── DK.svg │ ├── DM.svg │ ├── DO.svg │ ├── DZ.svg │ ├── EC.svg │ ├── EE.svg │ ├── EG.svg │ ├── EH.svg │ ├── ER.svg │ ├── ES.svg │ ├── ET.svg │ ├── FI.svg │ ├── FJ.svg │ ├── FK.svg │ ├── FM.svg │ ├── FO.svg │ ├── FR.svg │ ├── GA.svg │ ├── GB.svg │ ├── GD.svg │ ├── GE.svg │ ├── GF.svg │ ├── GG.svg │ ├── GH.svg │ ├── GI.svg │ ├── GL.svg │ ├── GM.svg │ ├── GN.svg │ ├── GP.svg │ ├── GQ.svg │ ├── GR.svg │ ├── GT.svg │ ├── GU.svg │ ├── GW.svg │ ├── GY.svg │ ├── HK.svg │ ├── HN.svg │ ├── HR.svg │ ├── HT.svg │ ├── HU.svg │ ├── ID.svg │ ├── IE.svg │ ├── IL.svg │ ├── IM.svg │ ├── IN.svg │ ├── IO.svg │ ├── IQ.svg │ ├── IR.svg │ ├── IS.svg │ ├── IT.svg │ ├── JE.svg │ ├── JM.svg │ ├── JO.svg │ ├── JP.svg │ ├── KE.svg │ ├── KG.svg │ ├── KH.svg │ ├── KI.svg │ ├── KM.svg │ ├── KN.svg │ ├── KP.svg │ ├── KR.svg │ ├── KW.svg │ ├── KY.svg │ ├── KZ.svg │ ├── LA.svg │ ├── LB.svg │ ├── LC.svg │ ├── LI.svg │ ├── LK.svg │ ├── LR.svg │ ├── LS.svg │ ├── LT.svg │ ├── LU.svg │ ├── LV.svg │ ├── LY.svg │ ├── MA.svg │ ├── MC.svg │ ├── MD.svg │ ├── ME.svg │ ├── MF.svg │ ├── MG.svg │ ├── MH.svg │ ├── MK.svg │ ├── ML.svg │ ├── MM.svg │ ├── MN.svg │ ├── MO.svg │ ├── MP.svg │ ├── MQ.svg │ ├── MR.svg │ ├── MS.svg │ ├── MT.svg │ ├── MU.svg │ ├── MV.svg │ ├── MW.svg │ ├── MX.svg │ ├── MY.svg │ ├── MZ.svg │ ├── NA.svg │ ├── NC.svg │ ├── NE.svg │ ├── NF.svg │ ├── NG.svg │ ├── NI.svg │ ├── NL.svg │ ├── NO.svg │ ├── NP.svg │ ├── NR.svg │ ├── NU.svg │ ├── NZ.svg │ ├── OM.svg │ ├── PA.svg │ ├── PE.svg │ ├── PF.svg │ ├── PG.svg │ ├── PH.svg │ ├── PK.svg │ ├── PL.svg │ ├── PM.svg │ ├── PR.svg │ ├── PS.svg │ ├── PT.svg │ ├── PW.svg │ ├── PY.svg │ ├── QA.svg │ ├── RE.svg │ ├── RO.svg │ ├── RS.svg │ ├── RU.svg │ ├── RW.svg │ ├── SA.svg │ ├── SB.svg │ ├── SC.svg │ ├── SD.svg │ ├── SE.svg │ ├── SG.svg │ ├── SH.svg │ ├── SI.svg │ ├── SK.svg │ ├── SL.svg │ ├── SM.svg │ ├── SN.svg │ ├── SO.svg │ ├── SR.svg │ ├── SS.svg │ ├── ST.svg │ ├── SV.svg │ ├── SX.svg │ ├── SY.svg │ ├── SZ.svg │ ├── TC.svg │ ├── TD.svg │ ├── TG.svg │ ├── TH.svg │ ├── TJ.svg │ ├── TK.svg │ ├── TL.svg │ ├── TM.svg │ ├── TN.svg │ ├── TO.svg │ ├── TR.svg │ ├── TT.svg │ ├── TV.svg │ ├── TW.svg │ ├── TZ.svg │ ├── UA.svg │ ├── UG.svg │ ├── US.svg │ ├── UY.svg │ ├── UZ.svg │ ├── VA.svg │ ├── VC.svg │ ├── VE.svg │ ├── VG.svg │ ├── VI.svg │ ├── VN.svg │ ├── VU.svg │ ├── WF.svg │ ├── WS.svg │ ├── XK.svg │ ├── YE.svg │ ├── YT.svg │ ├── ZA.svg │ ├── ZM.svg │ └── ZW.svg │ ├── import-instructions │ ├── gmail-2FA.jpg │ ├── gmail-captcha.jpg │ ├── gmail-folder-imap.jpg │ ├── gmail-imap.jpg │ ├── gmail-less-secure-apps.jpg │ └── yahoo.jpg │ ├── onboarding │ ├── calendar-unlock.svg │ ├── calendar-welcome.svg │ ├── contacts-welcome.svg │ ├── discover.svg │ ├── display-name.svg │ ├── drive-upgrade.svg │ ├── drive-welcome.svg │ ├── early-access.svg │ ├── import-assistant.svg │ ├── mail-welcome.svg │ ├── new-look.svg │ ├── organization.svg │ ├── proton-welcome.svg │ └── vpn-welcome.svg │ ├── placeholders │ ├── app-teaser.svg │ ├── drag-and-drop.svg │ ├── empty-address-book.svg │ ├── empty-folder.svg │ ├── empty-mailbox.svg │ ├── empty-search.svg │ ├── empty-trash.svg │ ├── file-recovery.svg │ ├── file-share.svg │ ├── import-contacts.svg │ ├── selected-contacts.svg │ ├── selected-emails.svg │ ├── upgrade.svg │ └── welcome-pane.svg │ ├── pm-images │ ├── android.svg │ ├── comfortable-density.svg │ ├── compact-density.svg │ ├── composer-maximized.svg │ ├── composer-popup.svg │ ├── conversation-group.svg │ ├── conversation-single.svg │ ├── iOS.svg │ ├── inbox-column.svg │ ├── inbox-row.svg │ ├── linux.svg │ ├── macOS.svg │ ├── thank-you-mail.svg │ └── windows.svg │ ├── pv-images │ ├── plans │ │ ├── basic.svg │ │ ├── free.svg │ │ ├── plus.svg │ │ └── visionary.svg │ ├── redeem │ │ ├── background.jpg │ │ ├── dns.svg │ │ ├── encryption.svg │ │ ├── gadgets.png │ │ ├── kill_switch.svg │ │ ├── no_logs.svg │ │ ├── secure_core.svg │ │ └── swiss_based.svg │ └── thank-you-vpn.svg │ ├── shared │ ├── app-store.svg │ ├── loading-atom.svg │ ├── play-store.svg │ ├── proton-logo.svg │ └── world.svg │ ├── sprite-icons │ └── file-icons.svg │ └── themes │ ├── theme-contrast.svg │ ├── theme-dark.svg │ ├── theme-default.svg │ ├── theme-legacy.svg │ ├── theme-light.svg │ └── theme-monokai.svg ├── package-lock.json ├── package.json ├── scss ├── _proton-account.scss ├── _proton-admin.scss ├── _proton-calendar.scss ├── _proton-contacts.scss ├── _proton-drive.scss ├── _proton-mail.scss ├── _proton-ui-storybook.scss ├── _proton-vpn-settings.scss ├── base │ ├── _buttons.scss │ ├── _colors.scss │ ├── _index.scss │ ├── _init.scss │ ├── _media.scss │ ├── _reset.scss │ ├── _scrollbar.scss │ ├── _typo.scss │ ├── _viewport.scss │ └── forms │ │ ├── _checkbox.scss │ │ ├── _field.scss │ │ ├── _index.scss │ │ ├── _input.scss │ │ ├── _label.scss │ │ ├── _radio.scss │ │ └── _toggle.scss ├── components │ ├── _alert.scss │ ├── _app-infos.scss │ ├── _app-link.scss │ ├── _apps-dropdown.scss │ ├── _autocomplete.scss │ ├── _avatar.scss │ ├── _badges.scss │ ├── _breadcrumb.scss │ ├── _button-account.scss │ ├── _button-group.scss │ ├── _circle-chart.scss │ ├── _circle-loader.scss │ ├── _collapsing-breadcrumb.scss │ ├── _color-selector.scss │ ├── _dropdown.scss │ ├── _editable-section.scss │ ├── _ellipsis-loader.scss │ ├── _fab.scss │ ├── _file-preview.scss │ ├── _full-loader.scss │ ├── _index.scss │ ├── _input-button.scss │ ├── _item-initials.scss │ ├── _label-stack.scss │ ├── _meter-bar.scss │ ├── _minicalendar.scss │ ├── _modal.scss │ ├── _notification.scss │ ├── _overview-grid.scss │ ├── _progress-bar.scss │ ├── _scale.scss │ ├── _scrollshadow.scss │ ├── _searchbox.scss │ ├── _simple-table.scss │ ├── _stepdots.scss │ ├── _sticky-title.scss │ ├── _tabs.scss │ ├── _theme-modal-list.scss │ ├── _tooltip.scss │ ├── _topnav.scss │ ├── _treeview.scss │ ├── _user-dropdown.scss │ ├── _vr.scss │ └── _wizard.scss ├── config │ ├── _index.scss │ ├── _variables.scss │ ├── functions │ │ ├── _easing.scss │ │ ├── _em.scss │ │ ├── _line-height.scss │ │ ├── _margin-em.scss │ │ ├── _rem.scss │ │ └── _str-replace.scss │ └── mixins │ │ ├── _body-before.scss │ │ ├── _margin-generator.scss │ │ ├── _padding-generator.scss │ │ ├── _respond-to.scss │ │ ├── _rhythm.scss │ │ └── _vendor-prefix.scss ├── helpers │ ├── _colors.scss │ ├── _containers.scss │ ├── _cursors.scss │ ├── _flex.scss │ ├── _grid.scss │ ├── _icons.scss │ ├── _index.scss │ ├── _layout.scss │ ├── _misc.scss │ ├── _position.scss │ ├── _print.scss │ ├── _responsive.scss │ ├── _sizing.scss │ ├── _spacing.scss │ └── _typo.scss ├── layout │ ├── _context-bar.scss │ ├── _index.scss │ ├── _navigation.scss │ ├── _structure.scss │ └── _toolbar.scss ├── specifics │ ├── _list.scss │ ├── _placeholder-loading.scss │ ├── _settings.scss │ ├── android-dark-mode.scss │ └── android-reset.scss └── themes │ ├── contrast-theme.scss │ ├── dark-theme.scss │ ├── default-theme.scss │ ├── legacy-theme.scss │ ├── light-theme.scss │ └── monokai-theme.scss └── tasks └── lint-svg.sh /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 4 9 | indent_style = tab 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | .DS_Store 3 | desktop.ini 4 | /node_modules 5 | .stylelintcache 6 | _site 7 | -------------------------------------------------------------------------------- /.gitlab-ci.yml: -------------------------------------------------------------------------------- 1 | include: 2 | - project: 'deploy-app/fe-scripts' 3 | ref: master 4 | file: '/jobs/shared-jobs/run-linked-branch-pipelines.gitlab-ci.yml' 5 | 6 | default: 7 | image: node:lts-slim 8 | 9 | stages: 10 | - test 11 | 12 | lint:scss: 13 | stage: test 14 | interruptible: true 15 | only: 16 | - master 17 | - merge_requests 18 | script: 19 | - npm ci 20 | - npm run lint:scss 21 | 22 | lint:svg: 23 | stage: test 24 | only: 25 | - master 26 | - merge_requests 27 | tags: 28 | - medium 29 | interruptible: true 30 | variables: 31 | NODE_OPTIONS: '--max_old_space_size=4000' 32 | script: 33 | - ./tasks/lint-svg.sh 34 | 35 | 36 | run-app-pipeline: 37 | extends: .run-linked-branch-pipelines-shared 38 | stage: test 39 | -------------------------------------------------------------------------------- /.gitlab/merge_request_templates/pr.md: -------------------------------------------------------------------------------- 1 | - [ ] Try to keep the pull requests small; a pull request should try its very best to address only a single concern. 2 | - [ ] Make sure all tests pass and add additional tests for the code you submit. 3 | - [ ] Document your reasoning behind the changes. Explain why you wrote the code in the way you did; the code should explain what it does. 4 | - [ ] If there's an existing issue related to the pull request, reference to it by adding `Fix #305`, where 305 is the issue number. 5 | - [ ] If applicable (simple fix), please add a snapshot to save time for reviewers 6 | 7 | ## Short description of what this resolves: 8 | 9 | 10 | 11 | ## Changes proposed in this pull request: 12 | 13 | - 14 | - 15 | 16 | Snapshot -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | scss/**/_index.scss 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | scss/**/_index.scss 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2021 Proton Technologies AG 2 | 3 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. 4 | 5 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Design system 2 | 3 | Proton Design system, for all Proton Projects: https://design-system.protontech.ch/ 4 | 5 | ## How to install it 6 | 7 | First clone the project, then do a `npm i`. 8 | 9 | ## Linting 10 | 11 | We suggest to use the extension stylelint (`stylelint.vscode-stylelint`) to take avantage of our linter config. 12 | 13 | ## Commands 14 | 15 | ### CSS Reset used by Android app 16 | 17 | If you need to refresh the CSS build, you can perform a `npm run build:reset`. 18 | 19 | ## MISC 20 | 21 | ### Where is the documentation? 22 | 23 | Actually there is a static website, but it will be soon revamped. Stay tuned. 24 | -------------------------------------------------------------------------------- /assets/css/android-dark-mode.css: -------------------------------------------------------------------------------- 1 | :root{--background-norm: #262a33;--text-norm: white} 2 | -------------------------------------------------------------------------------- /assets/img/credit-card-icons/cc-american-express.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/img/credit-card-icons/cc-dankort.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/img/credit-card-icons/cc-diners-club.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/img/credit-card-icons/cc-forbrugs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/img/credit-card-icons/cc-maestro.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /assets/img/credit-card-icons/cc-master.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /assets/img/errors/generic-error.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/AD.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/AE.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/AF.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/AG.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/AL.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/AM.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/AO.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/AR.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/AS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/AT.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/AW.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/AZ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/BB.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/BD.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/BE.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/BF.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/BG.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/BH.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/img/flags/BJ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/BL.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/flags/BN.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/img/flags/BO.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/BQ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/BR.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/BS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/BT.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/BW.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/BY.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/img/flags/BZ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/img/flags/CA.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/CD.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/CF.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/CG.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/CH.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/CI.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/CL.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/CM.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/CN.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/CO.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/CR.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/CU.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/CW.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/CY.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/CZ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/DE.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/DJ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/DK.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/DO.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /assets/img/flags/DZ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/EC.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/flags/EE.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/EG.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/EH.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/ER.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/ES.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/ET.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/flags/FI.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/FM.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/FO.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/FR.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/GA.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/GE.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/GF.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/GG.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/GH.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/GI.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/GL.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/GM.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/GN.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/GQ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/img/flags/GR.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/GT.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/GU.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /assets/img/flags/GW.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/GY.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/HK.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/HN.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/HT.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /assets/img/flags/HU.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/ID.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/IE.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/IL.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/IM.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/IN.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/flags/IQ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/IS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/IT.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/JE.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/JM.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/JO.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/JP.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/KH.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/KN.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/KP.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/flags/KW.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/KZ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/LA.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/LB.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/LC.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/LI.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/LR.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/LS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/LT.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/LU.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/LV.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/LY.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/MA.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/MC.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/MD.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/flags/ME.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/MF.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/MG.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/MH.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/MK.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/ML.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/MM.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/MN.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/MR.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/MT.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/MU.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/MV.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/MW.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/MX.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/MY.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/MZ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /assets/img/flags/NA.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/NC.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/NE.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/NF.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/NG.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/NI.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/flags/NL.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/NO.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/NP.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/NR.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/OM.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/PA.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/PE.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/PF.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/PH.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/PK.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/PL.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/PR.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/PS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/PT.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/PW.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/PY.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/QA.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/img/flags/RE.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/RO.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/RS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/flags/RU.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/RW.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/SA.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/SB.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/SC.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/SD.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/SE.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/SG.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/SI.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/flags/SK.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/img/flags/SL.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/SN.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/SO.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/SR.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/SS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/flags/ST.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/SV.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/SX.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/img/flags/SY.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/SZ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/TD.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/TG.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/TH.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/TK.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/TL.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/TN.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/TO.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/TR.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/TT.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/TW.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/flags/TZ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/UA.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/UG.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/img/flags/UY.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/VA.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/VC.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/VN.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/flags/VU.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/flags/WF.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/img/flags/WS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/XK.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/YE.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/flags/ZA.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/flags/ZM.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/img/import-instructions/gmail-2FA.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProtonMail/design-system/f59d2e5084e1fa5a119fd161d6ac38e244900f69/assets/img/import-instructions/gmail-2FA.jpg -------------------------------------------------------------------------------- /assets/img/import-instructions/gmail-captcha.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProtonMail/design-system/f59d2e5084e1fa5a119fd161d6ac38e244900f69/assets/img/import-instructions/gmail-captcha.jpg -------------------------------------------------------------------------------- /assets/img/import-instructions/gmail-folder-imap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProtonMail/design-system/f59d2e5084e1fa5a119fd161d6ac38e244900f69/assets/img/import-instructions/gmail-folder-imap.jpg -------------------------------------------------------------------------------- /assets/img/import-instructions/gmail-imap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProtonMail/design-system/f59d2e5084e1fa5a119fd161d6ac38e244900f69/assets/img/import-instructions/gmail-imap.jpg -------------------------------------------------------------------------------- /assets/img/import-instructions/gmail-less-secure-apps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProtonMail/design-system/f59d2e5084e1fa5a119fd161d6ac38e244900f69/assets/img/import-instructions/gmail-less-secure-apps.jpg -------------------------------------------------------------------------------- /assets/img/import-instructions/yahoo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProtonMail/design-system/f59d2e5084e1fa5a119fd161d6ac38e244900f69/assets/img/import-instructions/yahoo.jpg -------------------------------------------------------------------------------- /assets/img/placeholders/empty-folder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/placeholders/upgrade.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/pm-images/composer-maximized.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/pm-images/composer-popup.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/pm-images/windows.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/img/pv-images/plans/basic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/pv-images/plans/free.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/pv-images/plans/plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/pv-images/plans/visionary.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/pv-images/redeem/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProtonMail/design-system/f59d2e5084e1fa5a119fd161d6ac38e244900f69/assets/img/pv-images/redeem/background.jpg -------------------------------------------------------------------------------- /assets/img/pv-images/redeem/dns.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/pv-images/redeem/encryption.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/pv-images/redeem/gadgets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProtonMail/design-system/f59d2e5084e1fa5a119fd161d6ac38e244900f69/assets/img/pv-images/redeem/gadgets.png -------------------------------------------------------------------------------- /assets/img/pv-images/redeem/kill_switch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/pv-images/redeem/no_logs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/pv-images/redeem/secure_core.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/pv-images/redeem/swiss_based.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/themes/theme-contrast.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/img/themes/theme-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/img/themes/theme-default.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/img/themes/theme-legacy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/img/themes/theme-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/img/themes/theme-monokai.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /scss/_proton-account.scss: -------------------------------------------------------------------------------- 1 | // Variables specific overrides 2 | // Nope 3 | 4 | // Configuration 5 | @import 'config/'; 6 | 7 | // Initialisation 8 | @import 'base/'; 9 | 10 | // Layout 11 | @import 'layout/'; 12 | 13 | // Components 14 | @import 'components/'; 15 | 16 | // Helpers 17 | @import 'helpers/'; 18 | -------------------------------------------------------------------------------- /scss/_proton-admin.scss: -------------------------------------------------------------------------------- 1 | // Variables specific overrides 2 | // Nope 3 | 4 | // Configuration 5 | @import 'config/'; 6 | 7 | // Initialisation 8 | @import 'base/'; 9 | 10 | // Layout 11 | @import 'layout/'; 12 | 13 | // Components 14 | @import 'components/'; 15 | 16 | // Helpers 17 | @import 'helpers/'; 18 | -------------------------------------------------------------------------------- /scss/_proton-calendar.scss: -------------------------------------------------------------------------------- 1 | // Variables specific overrides 2 | $breakpoint-medium: 1000; 3 | $breakpoint-small: 870; 4 | $breakpoint-tiny: 520; 5 | 6 | // Configuration 7 | @import 'config/'; 8 | 9 | // Initialisation 10 | @import 'base/'; 11 | 12 | // Layout 13 | @import 'layout/'; 14 | 15 | // Components 16 | @import 'components/'; 17 | 18 | // Helpers 19 | @import 'helpers/'; 20 | -------------------------------------------------------------------------------- /scss/_proton-contacts.scss: -------------------------------------------------------------------------------- 1 | // Variables specific overrides 2 | // Nope 3 | 4 | // Configuration 5 | @import 'config/'; 6 | 7 | // Initialisation 8 | @import 'base/'; 9 | 10 | // Layout 11 | @import 'layout/'; 12 | 13 | // Components 14 | @import 'components/'; 15 | 16 | // Helpers 17 | @import 'helpers/'; 18 | -------------------------------------------------------------------------------- /scss/_proton-drive.scss: -------------------------------------------------------------------------------- 1 | // Variables specific overrides 2 | // Nope 3 | 4 | // Configuration 5 | @import 'config/'; 6 | 7 | // Initialisation 8 | @import 'base/'; 9 | 10 | // Layout 11 | @import 'layout/'; 12 | 13 | // Components 14 | @import 'components/'; 15 | 16 | // Helpers 17 | @import 'helpers/'; 18 | -------------------------------------------------------------------------------- /scss/_proton-mail.scss: -------------------------------------------------------------------------------- 1 | // Variables specific overrides 2 | $breakpoint-medium: 940; 3 | $use-height-auto-td: false; 4 | $use-height-auto-img: false; 5 | $use-height-auto-table: false; 6 | 7 | // Configuration 8 | @import 'config/'; 9 | 10 | // Initialisation 11 | @import 'base/'; 12 | 13 | // Layout 14 | @import 'layout/'; 15 | 16 | // Components 17 | @import 'components/'; 18 | 19 | // Helpers 20 | @import 'helpers/'; 21 | -------------------------------------------------------------------------------- /scss/_proton-ui-storybook.scss: -------------------------------------------------------------------------------- 1 | // Variables specific overrides 2 | // Nope 3 | 4 | // Temporary addition 5 | @import 'themes/default-theme'; 6 | 7 | // Configuration 8 | @import 'config/'; 9 | 10 | // Initialisation 11 | @import 'base/'; 12 | 13 | // Layout 14 | @import 'layout/'; 15 | 16 | // Components 17 | @import 'components/'; 18 | 19 | // Helpers 20 | @import 'helpers/'; 21 | -------------------------------------------------------------------------------- /scss/_proton-vpn-settings.scss: -------------------------------------------------------------------------------- 1 | // Configuration 2 | @import 'config/'; 3 | 4 | // Initialisation 5 | @import 'base/'; 6 | 7 | // Layout 8 | @import 'layout/'; 9 | 10 | // Components 11 | @import 'components/'; 12 | 13 | // Helpers 14 | @import 'helpers/'; 15 | 16 | // Theme color overrides 17 | // REMOVE THIS AS SOON AS POSSIBLE! 18 | :root, 19 | .ui-standard, 20 | .ui-prominent { 21 | --primary: #4da358 !important; 22 | --primary-contrast: white !important; 23 | 24 | --interaction-norm: #4da358 !important; 25 | --interaction-norm-hover: #3e8447 !important; 26 | --interaction-norm-active: #2e7037 !important; 27 | --interaction-norm-contrast: white !important; 28 | } 29 | -------------------------------------------------------------------------------- /scss/base/_colors.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Static colors that keep the same between each visual theme 3 | */ 4 | 5 | :root { 6 | --shadow-norm: 0 calc(var(--px)) calc(var(--px) * 4) 7 | rgb(0 0 0 / var(--shadow-norm-opacity, 0.1)); 8 | --shadow-lifted: 0 calc(var(--px) * 8) calc(var(--px) * 24) 9 | rgb(0 0 0 / var(--shadow-lifted-opacity, 0.2)); 10 | } 11 | -------------------------------------------------------------------------------- /scss/base/_index.scss: -------------------------------------------------------------------------------- 1 | @import 2 | 'viewport', 3 | 'reset', 4 | 'init', 5 | 'colors', 6 | 'typo', 7 | 'buttons', 8 | 'forms/', 9 | 'scrollbar', 10 | 'media'; 11 | -------------------------------------------------------------------------------- /scss/base/_media.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * reduced motion MQ: for vestibular disorders 3 | */ 4 | @media (prefers-reduced-motion: reduce) { 5 | *, 6 | *::before, 7 | *::after { 8 | animation-duration: 0s !important; 9 | transition-duration: 0s !important; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /scss/base/_typo.scss: -------------------------------------------------------------------------------- 1 | @each $tag, $size in $title-sizes { 2 | #{$tag}, 3 | .#{$tag} { 4 | display: block; 5 | @include rhythm($size); 6 | font-weight: normal; 7 | } 8 | } 9 | 10 | /* avoid margin problems */ 11 | @if $vertical-rhythm == 12 | 'single_top' or 13 | $vertical-rhythm == 14 | 'double_top_single_bottom' 15 | { 16 | h1, 17 | .h1, 18 | h2, 19 | .h2, 20 | h3, 21 | .h3, 22 | h4, 23 | .h4, 24 | h5, 25 | .h5, 26 | h6, 27 | .h6 { 28 | &:first-child { 29 | margin-top: 0; 30 | } 31 | } 32 | 33 | /* remove bottom margin on last child */ 34 | p, 35 | ul, 36 | ol, 37 | dl, 38 | blockquote, 39 | pre, 40 | table { 41 | &:last-child { 42 | margin-bottom: 0; 43 | } 44 | } 45 | } 46 | 47 | /* Hyphenation: Thou shalt not pass (Moïse or Gandalf, don’t remember) */ 48 | @if $hyphenation == true { 49 | textarea, 50 | table, 51 | td, 52 | th, 53 | code, 54 | pre, 55 | samp, 56 | div, 57 | p { 58 | word-break: break-word; 59 | 60 | @supports (-webkit-hyphens: auto) or (hyphens: auto) { 61 | word-break: normal; 62 | @include vendor-prefix(hyphens, auto, webkit); 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /scss/base/_viewport.scss: -------------------------------------------------------------------------------- 1 | /* fix viewport for Win8 (snap mode) and preparing day 2 | * when viewport will be supported by all render engines 3 | * 4 | * Examples: http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ 5 | * width=device-width => width: device-width; 6 | * height=device-height => height: device-height; 7 | * initial-scale=2 => zoom: 2; 8 | * maximum-scale=2 => max-zoom: 2; 9 | * minimum-scale=0.5 => min-zoom: 0.5; 10 | * user-scalable=no => user-zoom: fixed; 11 | * 12 | * for Win8 snap mode => only width: device-width; works for the moment 13 | */ 14 | 15 | @-webkit-viewport { 16 | width: device-width; 17 | } 18 | 19 | @-moz-viewport { 20 | width: device-width; 21 | } 22 | 23 | @-ms-viewport { 24 | width: device-width; 25 | } 26 | 27 | @-o-viewport { 28 | width: device-width; 29 | } 30 | 31 | @viewport { 32 | width: device-width; 33 | } 34 | -------------------------------------------------------------------------------- /scss/base/forms/_index.scss: -------------------------------------------------------------------------------- 1 | @import 2 | 'field', 3 | 'checkbox', 4 | 'radio', 5 | 'toggle', 6 | 'input', 7 | 'label'; 8 | -------------------------------------------------------------------------------- /scss/base/forms/_label.scss: -------------------------------------------------------------------------------- 1 | /* label */ 2 | // $label-width defined in global vars 3 | .label { 4 | padding-top: 0.5em; 5 | width: var(--label-width, $label-width); 6 | padding-right: 0.5em; 7 | max-width: 100%; 8 | flex-shrink: 0; 9 | 10 | &.pt0 { 11 | padding-top: 0; 12 | } 13 | 14 | &.auto { 15 | width: auto; 16 | } 17 | 18 | &--small { 19 | font-size: rem(12); 20 | line-height: 2; 21 | } 22 | } 23 | 24 | // case for forms labelled only with icons (calendar popover, etc.) 25 | $label-icon-width: 2.4em !default; 26 | 27 | .form--icon-labels .label { 28 | width: $label-icon-width; 29 | } 30 | -------------------------------------------------------------------------------- /scss/components/_alert.scss: -------------------------------------------------------------------------------- 1 | $alert-block-border-width: 3px !default; 2 | 3 | [class*='alert-block'] { 4 | padding: 0.2em 1.2em; 5 | color: var(--text-norm); 6 | border-left-width: $alert-block-border-width; 7 | border-left-style: solid; 8 | } 9 | 10 | @each $color in (info, danger, warning, success) { 11 | $class: ''; 12 | @if $color != 'info' { 13 | $class: '--' + $color; 14 | } 15 | 16 | .alert-block#{$class} { 17 | border-color: var(--signal-#{$color}); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /scss/components/_app-infos.scss: -------------------------------------------------------------------------------- 1 | .app-infos { 2 | &-fake-meter { 3 | height: em(4); 4 | } 5 | 6 | &-storage, 7 | &-version { 8 | color: var(--text-weak); 9 | } 10 | 11 | a#{&}-storage, 12 | &-version { 13 | &:hover, 14 | &:focus { 15 | color: var(--text-norm); 16 | } 17 | } 18 | 19 | // If storage is displayed, hide app name 20 | &-storage + &-version &-name { 21 | @extend .sr-only; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/components/_app-link.scss: -------------------------------------------------------------------------------- 1 | .aside-link { 2 | border-radius: 50%; 3 | width: rem(32); 4 | height: rem(32); 5 | padding: rem(7); 6 | background: var(--interaction-weak); 7 | color: var(--text-norm); 8 | 9 | &:hover, 10 | &:focus { 11 | background: var(--interaction-weak-hover); 12 | color: var(--primary); 13 | } 14 | 15 | &:active, 16 | &[aria-current='true'] { 17 | background: var(--interaction-weak-active); 18 | color: var(--primary); 19 | } 20 | 21 | &-icon { 22 | width: rem(17); 23 | height: rem(17); 24 | fill: currentColor; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /scss/components/_apps-dropdown.scss: -------------------------------------------------------------------------------- 1 | .apps-dropdown { 2 | &#{&}.dropdown { 3 | --min-width: #{em(200)}; 4 | --max-height: #{em(400)}; 5 | } 6 | 7 | &-button { 8 | @extend .interactive; 9 | 10 | border-radius: $global-border-radius; 11 | padding: 0.25em; 12 | 13 | & &-icon { 14 | // override icon-16p 15 | width: 1em; 16 | height: 1em; 17 | font-size: 2em; 18 | } 19 | } 20 | 21 | &-list { 22 | display: grid; 23 | grid-template-columns: repeat(2, 1fr); 24 | } 25 | 26 | &-item-hr { 27 | margin: 0.5em 0; 28 | grid-column: 1 / -1; 29 | } 30 | 31 | &-link { 32 | @extend .interactive; 33 | 34 | display: block; 35 | padding: 0.75em; 36 | border-radius: $global-border-radius; 37 | text-align: center; 38 | text-decoration: none; 39 | } 40 | 41 | &-icon { 42 | color: #657ee4; // Hard coded because it should not come from theme 43 | 44 | &-vpn { 45 | color: #4da358; // Hard coded because it should not come from theme 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /scss/components/_autocomplete.scss: -------------------------------------------------------------------------------- 1 | .autocomplete-suggestions { 2 | position: absolute; 3 | z-index: -1; 4 | top: calc(100% - 2px); 5 | left: 0.35em; 6 | right: 0.35em; 7 | min-height: 80%; 8 | max-height: calc(5 * 2.3em); 9 | overflow: scroll; 10 | background-color: var(--background-norm); 11 | box-shadow: var(--shadow-lifted); 12 | color: var(--text-norm); 13 | border: 1px solid var(--border-norm); 14 | transform: translateY(-1.5em); 15 | opacity: 0; 16 | transition: transform 100ms ease-in, opacity 100ms ease-out 20ms; 17 | 18 | &, 19 | div:last-child { 20 | border-bottom-left-radius: $global-border-radius; 21 | border-bottom-right-radius: $global-border-radius; 22 | } 23 | 24 | div { 25 | @extend .interactive; 26 | 27 | &.selected { 28 | background-color: var(--interaction-norm); 29 | color: var(--interaction-norm-contrast); 30 | pointer-events: none; 31 | } 32 | } 33 | 34 | .button.button-link { 35 | color: inherit; 36 | } 37 | 38 | &--open { 39 | transform: translateY(0); 40 | opacity: 1; 41 | } 42 | } 43 | 44 | .autocomplete-input { 45 | z-index: 1; 46 | } 47 | -------------------------------------------------------------------------------- /scss/components/_avatar.scss: -------------------------------------------------------------------------------- 1 | .avatar { 2 | width: rem($conversation-icon-size); 3 | height: rem($conversation-icon-size); 4 | font-size: 0.75rem; // 12 5 | background-color: var(--primary); 6 | color: var(--primary-contrast); 7 | } 8 | -------------------------------------------------------------------------------- /scss/components/_badges.scss: -------------------------------------------------------------------------------- 1 | [class*='badge-label'] { 2 | @extend .text-uppercase; 3 | @extend .inline-flex; 4 | font-size: rem(11); // to be sure this is the same height everywhere 5 | padding: em(2) em(4) em(3); 6 | line-height: 1; 7 | border-radius: $global-border-radius; 8 | } 9 | 10 | @each $color in (primary, danger, warning, success, info) { 11 | $prefix: ''; 12 | @if $color != 'primary' { 13 | $prefix: 'signal-'; 14 | } 15 | 16 | .badge-label-#{$color} { 17 | background-color: var(--#{$prefix + $color}); 18 | color: var(--#{$prefix + $color}-contrast); 19 | } 20 | } 21 | 22 | @each $color in (norm, weak, strong) { 23 | .badge-label-#{$color} { 24 | background-color: var(--background-#{$color}); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /scss/components/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | &-container { 3 | @extend .bordered; 4 | } 5 | 6 | &-button { 7 | padding: 0.4em; 8 | opacity: 0.3; 9 | color: inherit; 10 | 11 | &[disabled][aria-current='step'] { 12 | font-weight: bold; 13 | opacity: 1; 14 | color: inherit; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /scss/components/_button-account.scss: -------------------------------------------------------------------------------- 1 | .button-account { 2 | &-container { 3 | border: 1px solid var(--border-norm); // inconsistent with borders... 4 | max-height: 50vh; 5 | 6 | @include respond-to($breakpoint-small) { 7 | max-height: none; 8 | } 9 | 10 | &-inner { 11 | border-right: 1px solid var(--border-norm); // inconsistent with borders... 12 | } 13 | } 14 | 15 | &-login { 16 | transition: opacity 0.35s easing(easeInOut), visibility 0s; 17 | opacity: 0; 18 | width: 0; 19 | transition-delay: 0s, 0.35s; 20 | } 21 | 22 | &:focus, 23 | &:hover, 24 | &:active { 25 | background-color: var(--background-norm); 26 | color: var(--text-norm); 27 | 28 | .button-account-login { 29 | opacity: 1; 30 | width: auto; 31 | transition-delay: 0s; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/components/_circle-chart.scss: -------------------------------------------------------------------------------- 1 | // be careful to udpate SVG if you want to update this value 2 | $stroke-width: 3px !default; 3 | 4 | // this component is used for VPN 5 | // and for the moment on Angular/React sidebar 6 | .circle-chart { 7 | &-background { 8 | stroke: var(--background-strong); 9 | stroke-width: $stroke-width; 10 | fill: transparent; 11 | 12 | &--bigger & { 13 | stroke: var(--background-weak); 14 | } 15 | } 16 | 17 | &-circle { 18 | stroke: var(--signal-success); 19 | stroke-width: $stroke-width; 20 | fill: transparent; 21 | animation: anime-circle-chart-fill 2s reverse; 22 | transform: rotate(-90deg); 23 | transform-origin: center; 24 | } 25 | 26 | &-percent { 27 | fill: var(--text-norm); 28 | } 29 | 30 | &-info { 31 | color: var(--text-weak); 32 | } 33 | 34 | .circle-bar--medium &-circle { 35 | stroke: var(--signal-warning); 36 | } 37 | 38 | .circle-bar--full &-circle { 39 | stroke: var(--signal-danger); 40 | } 41 | } 42 | 43 | @keyframes anime-circle-chart-fill { 44 | to { 45 | stroke-dasharray: 0 100; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /scss/components/_collapsing-breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .collapsing-breadcrumbs { 2 | @extend .flex-nowrap; 3 | @extend .flex-align-items-center; 4 | @extend .pt0-25; 5 | @extend .pb0-25; 6 | @extend .pl0; 7 | @extend .m0; 8 | min-height: 2.5em; 9 | display: flex; 10 | } 11 | 12 | .collapsing-breadcrumb { 13 | @extend .flex-nowrap; 14 | display: flex; 15 | flex: 0 1 auto; 16 | 17 | &:not(#{&}--no-shrink) { 18 | min-width: 1.5em; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /scss/components/_editable-section.scss: -------------------------------------------------------------------------------- 1 | .editable-section-container { 2 | grid-template-columns: min-content minmax(5em, 1fr); 3 | 4 | & > .border-bottom { 5 | padding-bottom: 1em; 6 | } 7 | 8 | & > :not(.border-bottom) { 9 | margin-top: 1em; 10 | } 11 | 12 | // not enough place 13 | &--size-tablet { 14 | @include respond-to(780) { 15 | --label-width: 15em; 16 | } 17 | } 18 | 19 | @include respond-to($breakpoint-small) { 20 | grid-template-columns: auto; 21 | gap: 0.5em; 22 | 23 | & > .on-mobile-pb0 { 24 | padding-bottom: 0; 25 | } 26 | 27 | & > :not(.border-bottom) { 28 | margin-top: 0; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /scss/components/_ellipsis-loader.scss: -------------------------------------------------------------------------------- 1 | .ellipsis-loader { 2 | display: inline-block; 3 | width: 1.4em; 4 | vertical-align: baseline; 5 | text-align: left; 6 | 7 | &::before { 8 | content: '\00a0'; 9 | font-family: monospace; 10 | animation: anime-ellipsis-loading linear 1s infinite; 11 | } 12 | } 13 | 14 | @keyframes anime-ellipsis-loading { 15 | 0% { 16 | content: '\00a0'; 17 | } 18 | 25% { 19 | content: '.'; 20 | } 21 | 50% { 22 | content: '..'; 23 | } 24 | 75% { 25 | content: '...'; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /scss/components/_fab.scss: -------------------------------------------------------------------------------- 1 | .fab { 2 | &#{&} { 3 | // Specificity -_-v 4 | position: fixed; 5 | bottom: 1em; 6 | right: 1.6em; 7 | z-index: 77; 8 | height: rem(66); 9 | width: rem(66); 10 | border-radius: 50%; 11 | padding: 0.5em; 12 | box-shadow: var(--shadow-lifted); 13 | transition: bottom 0.5s easing(easeOutQuart); 14 | 15 | &--is-higher { 16 | bottom: 4em; 17 | } 18 | 19 | &--inBackground { 20 | z-index: 0; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/components/_file-preview.scss: -------------------------------------------------------------------------------- 1 | .file-preview { 2 | color: var(--file-preview-text-color, var(--text-norm)); 3 | background-color: var( 4 | --file-preview-background-color, 5 | var(--background-norm) 6 | ); 7 | @extend .flex-item-fluid-auto; 8 | @extend .flex-column; 9 | position: fixed; 10 | top: 0; 11 | bottom: 0; 12 | right: 0; 13 | left: 0; 14 | z-index: 78; 15 | display: flex; 16 | 17 | &-container { 18 | @extend .relative; 19 | @extend .flex-column; 20 | @extend .flex-item-fluid-auto; 21 | @extend .scroll-if-needed; 22 | @extend .flex-no-min-children; 23 | } 24 | 25 | &-filename { 26 | max-width: calc(50% - 5em); 27 | } 28 | 29 | &-text { 30 | background-color: whitesmoke; 31 | color: black; 32 | @extend .p2; 33 | @extend .center; 34 | @extend .flex-item-fluid-auto; 35 | @extend .mt0; 36 | @extend .mb2; 37 | word-break: break-word; 38 | white-space: pre-wrap; 39 | width: 100%; 40 | max-width: rem(800); 41 | } 42 | 43 | &-image { 44 | @extend .mauto; 45 | object-fit: cover; 46 | max-width: none; 47 | position: absolute; 48 | top: 0; 49 | left: 0; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | /* Components | Alphabetical order */ 2 | @import 3 | 'app-infos', 4 | 'app-link', 5 | 'apps-dropdown', 6 | 'autocomplete', 7 | 'avatar', 8 | 'badges', 9 | 'alert', 10 | 'breadcrumb', 11 | 'button-account', 12 | 'button-group', 13 | 'circle-chart', 14 | 'circle-loader', 15 | 'collapsing-breadcrumb', 16 | 'color-selector', 17 | 'dropdown', 18 | 'user-dropdown', 19 | 'editable-section', 20 | 'ellipsis-loader', 21 | 'fab', 22 | 'file-preview', 23 | 'full-loader', 24 | 'input-button', 25 | 'item-initials', 26 | 'label-stack', 27 | 'meter-bar', 28 | 'minicalendar', 29 | 'modal', 30 | 'notification', 31 | 'overview-grid', 32 | 'progress-bar', 33 | 'scale', 34 | 'scrollshadow', 35 | 'searchbox', 36 | 'simple-table', 37 | 'stepdots', 38 | 'sticky-title', 39 | 'tabs', 40 | 'theme-modal-list', 41 | 'tooltip', 42 | 'topnav', 43 | 'treeview', 44 | 'vr', 45 | 'wizard'; 46 | -------------------------------------------------------------------------------- /scss/components/_item-initials.scss: -------------------------------------------------------------------------------- 1 | .item-icon { 2 | width: rem($conversation-icon-size); 3 | height: rem($conversation-icon-size); 4 | font-size: rem(12); 5 | background-color: var(--background-strong); 6 | } 7 | -------------------------------------------------------------------------------- /scss/components/_meter-bar.scss: -------------------------------------------------------------------------------- 1 | .meter-bar { 2 | --size: #{em(10)}; 3 | 4 | width: 100%; 5 | overflow: hidden; 6 | background: var(--background-weak); 7 | 8 | &, 9 | &-thumb { 10 | height: var(--size); 11 | } 12 | 13 | &:not(.is-squared), 14 | &:not(.is-squared) &-thumb { 15 | border-radius: calc(var(--size) / 2); 16 | } 17 | 18 | &.is-thin { 19 | --size: #{em(4)}; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /scss/components/_overview-grid.scss: -------------------------------------------------------------------------------- 1 | .overview-grid { 2 | display: grid; 3 | grid-template-columns: repeat(auto-fill, minmax(#{rem(250)}, 1fr)); 4 | grid-auto-flow: row dense; 5 | grid-gap: rem(20); 6 | 7 | &-item { 8 | &--tall { 9 | grid-row: span 2; 10 | } 11 | 12 | &--full { 13 | grid-column: 1 / -1; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /scss/components/_scale.scss: -------------------------------------------------------------------------------- 1 | .scale-buttons-container { 2 | display: grid; 3 | grid-template-columns: repeat(auto-fit, 2.5em); 4 | grid-gap: rem(5); 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /scss/components/_scrollshadow.scss: -------------------------------------------------------------------------------- 1 | $scrollshadow-height: rem(5) !default; 2 | 3 | .scrollshadow { 4 | &-sticky { 5 | position: sticky; 6 | display: block; 7 | height: $scrollshadow-height; 8 | 9 | &--top { 10 | top: 0; 11 | background-image: radial-gradient( 12 | farthest-side at 50% 0, 13 | var(--background-strong), 14 | transparent 15 | ); 16 | } 17 | 18 | &--bottom { 19 | bottom: 0; 20 | background-image: radial-gradient( 21 | farthest-side at 50% 100%, 22 | var(--background-strong), 23 | transparent 24 | ); 25 | } 26 | } 27 | 28 | &-static { 29 | position: absolute; 30 | display: block; 31 | left: 0; 32 | right: 0; 33 | height: $scrollshadow-height; 34 | background: var(--background-norm); 35 | 36 | &--top { 37 | top: 0; 38 | } 39 | 40 | &--bottom { 41 | bottom: 0; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /scss/components/_stepdots.scss: -------------------------------------------------------------------------------- 1 | .step-dots { 2 | &-item:not(:last-child) { 3 | margin-right: 0.5em; 4 | } 5 | 6 | &-dot { 7 | width: rem(8); 8 | height: rem(8); 9 | background-color: var(--interaction-weak); 10 | color: var(--text-norm); 11 | transition: background-color 0.25s easing(ease); 12 | 13 | &:focus, 14 | &:hover, 15 | &:active { 16 | background-color: var(--interaction-norm); 17 | color: var(--interaction-norm-contrast); 18 | } 19 | 20 | &[aria-selected='true'] { 21 | background-color: var(--text-norm); 22 | color: var(--text-invert); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /scss/components/_theme-modal-list.scss: -------------------------------------------------------------------------------- 1 | .theme-modal-list { 2 | display: grid; 3 | width: 100%; 4 | grid-template-columns: repeat(auto-fill, minmax(em(130), 1fr)); 5 | grid-gap: 1em; 6 | justify-items: center; 7 | } 8 | -------------------------------------------------------------------------------- /scss/components/_user-dropdown.scss: -------------------------------------------------------------------------------- 1 | .user-dropdown { 2 | &-button { 3 | @include respond-to(1500) { 4 | margin-left: 0.5em; 5 | } 6 | 7 | .user-initials { 8 | background-color: var(--interaction-default); 9 | transition: 0.15s easing(easeOutQuint), background-position 0s; 10 | } 11 | 12 | &:hover, 13 | &:focus { 14 | .user-initials { 15 | background-color: var(--interaction-default-hover); 16 | } 17 | } 18 | 19 | &:active, 20 | &.is-active, 21 | &[aria-expanded='true'] { 22 | .user-initials { 23 | background-color: var(--interaction-default-active); 24 | } 25 | } 26 | } 27 | 28 | &-text { 29 | &#{&} { 30 | // Specificity -_-v 31 | max-width: em(200); 32 | } 33 | 34 | @include respond-to(1500) { 35 | display: none; 36 | } 37 | } 38 | } 39 | 40 | // used on switch account, summary section and user dropdown 41 | .user-initials { 42 | &#{&} { 43 | // Specificity -_-v 44 | min-width: 2.5em; 45 | min-height: 2.5em; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /scss/components/_vr.scss: -------------------------------------------------------------------------------- 1 | // Vr for vertical rule 2 | 3 | .vr { 4 | display: inline-flex; 5 | width: 0; 6 | height: auto; 7 | flex: 0 0 0; 8 | border-right: 1px solid var(--border-norm); 9 | } 10 | -------------------------------------------------------------------------------- /scss/config/_index.scss: -------------------------------------------------------------------------------- 1 | // Main configurations 2 | @import 3 | 'variables'; 4 | 5 | // Functions 6 | @import 7 | 'functions/em', 8 | 'functions/rem', 9 | 'functions/line-height', 10 | 'functions/margin-em', 11 | 'functions/str-replace', 12 | 'functions/easing'; 13 | 14 | // Mixins 15 | @import 16 | 'mixins/rhythm', 17 | 'mixins/vendor-prefix', 18 | 'mixins/margin-generator', 19 | 'mixins/padding-generator', 20 | 'mixins/respond-to', 21 | 'mixins/body-before'; 22 | -------------------------------------------------------------------------------- /scss/config/functions/_em.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | /** 3 | * Calculate an em value from a px value 4 | * @param {Number} $px - A value to be converted in em 5 | * @param {Number} $base - The base pixel value of the app 6 | * @return {Number} - The $px value converted in em 7 | */ 8 | @function em($px, $base: $base-font-size) { 9 | @return (math.div($px, $base)) * 1em; 10 | } 11 | -------------------------------------------------------------------------------- /scss/config/functions/_line-height.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | /** 3 | * Calculate the vertical rhythm from a font size 4 | * Based on http://soqr.fr/vertical-rhythm/ thanks @goetter & @eQRoeil 5 | * @param {Number} $font-size - The font size from which calculate the line height 6 | * @param {Number} $base-height - The base line height from which to calculate 7 | * @param {Number} $base-font-size - The base font size from which calculate 8 | * @return {Number} - The $px value converted in rem 9 | */ 10 | @function line-height($font-size, $base-height, $base-font-size) { 11 | $coef: ceil( 12 | math.div(1, (math.div(($base-height * $base-font-size), $font-size))) 13 | ); 14 | $height: math.div($base-font-size * $base-height, $font-size); 15 | 16 | @return ($height * $coef); 17 | } 18 | -------------------------------------------------------------------------------- /scss/config/functions/_rem.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | /** 3 | * Calculate an rem value from a px value 4 | * @param {Number} $px - A value to be converted in em 5 | * @param {Boolean} $reset-applied - Check if the root font-size is equivalent to 10px 6 | * @param {Number} $user-default-font-size - The default font-size of the browser. Should be equivalent to 16px 7 | * @return {Number} - The $px value converted in rem 8 | */ 9 | @function rem( 10 | $px, 11 | $reset-applied: $root-equiv-10-px, 12 | $user-default-font-size: $root-default-font-size 13 | ) { 14 | @if ($reset-applied==true) { 15 | @return (math.div($px, 10)) * 1rem; 16 | } @else { 17 | @return (math.div($px, $user-default-font-size)) * 1rem; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /scss/config/functions/_str-replace.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Replace `$search` with `$replace` in `$string` 3 | * @author Hugo Giraudel 4 | * @param {String} $string - Initial string 5 | * @param {String} $search - Substring to replace 6 | * @param {String} $replace ('') - New value 7 | * @return {String} - Updated string 8 | */ 9 | @function str-replace($string, $search, $replace: '') { 10 | $index: str-index($string, $search); 11 | 12 | @if $index { 13 | @return str-slice($string, 1, $index - 1) + $replace + 14 | str-replace( 15 | str-slice($string, $index + str-length($search)), 16 | $search, 17 | $replace 18 | ); 19 | } 20 | 21 | @return $string; 22 | } 23 | -------------------------------------------------------------------------------- /scss/config/mixins/_body-before.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Add a pseudo-element '::before' on body tag with a wanted content 3 | * @param {String} $value-content - The wanted content 4 | * @param {Boolean} $display-none - Display or not this content 5 | * @returns {String} - The CSS rule for adding the content inside a pseudo-element on body tag 6 | */ 7 | @mixin body-before($value-content, $display-none: false) { 8 | @if $value-content != '' { 9 | body::before { 10 | content: '#{$value-content}'; 11 | 12 | @if $display-none == true { 13 | display: none; 14 | } 15 | } 16 | } @else { 17 | @warn '$value-content not specified'; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /scss/config/mixins/_respond-to.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Generate media queries in em 3 | * @param {Number} $breakpoint - The wanted breakpoint in pixels 4 | * @param {String} $query-type - The media query type, between 'max', 'min', 'height' and 'min-height' 5 | * @returns {String} - The content contained inside the wanted media query 6 | */ 7 | @mixin respond-to($breakpoint, $query-type: 'max') { 8 | @if $query-type== 'max' { 9 | @media (max-width: em($breakpoint, $root-default-font-size)) { 10 | @content; 11 | } 12 | } @else if $query-type== 'min' { 13 | @media (min-width: em($breakpoint + 1, $root-default-font-size)) { 14 | @content; 15 | } 16 | } @else if $query-type== 'height' { 17 | @media (max-height: em($breakpoint, $root-default-font-size)) { 18 | @content; 19 | } 20 | } @else if $query-type== 'min-height' { 21 | @media (min-height: em($breakpoint, $root-default-font-size)) { 22 | @content; 23 | } 24 | } @else { 25 | @warn 'Type non supported.'; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /scss/config/mixins/_rhythm.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Calculate line height and margins for right vertical rhythm 3 | * @param {Number} $value - The font size of the element to calculate from 4 | * @param {String} $type-vr - The type of wanted vertical rhythm 5 | * @param {String} $type-unit - The wanted unit in return 6 | * @return {String} - Line height and margin for vertical rhythm 7 | */ 8 | @mixin rhythm($value, $type-vr: $vertical-rhythm, $type-unit: $typo-unit) { 9 | @if $type-unit== 'use_em' { 10 | font-size: em($value); 11 | } @else if $type-unit== 'use_rem' { 12 | font-size: rem($value); 13 | } @else if $type-unit== 'use_rem_with_em_fallback' { 14 | font-size: em($value); 15 | font-size: rem($value); 16 | } 17 | 18 | line-height: line-height($value, $base-line-height, $base-font-size); 19 | margin: margin-em($value, $base-line-height, $base-font-size, $type-vr); 20 | } 21 | -------------------------------------------------------------------------------- /scss/config/mixins/_vendor-prefix.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Generate vendor prefixes for a given property 3 | * @param {String} $property - The given property from which generate vendor prefixes 4 | * @param {String} $value - The value of the property 5 | * @param {String} $prefixes - Wanted prefix•es 6 | * @return {String} - The property with each prefix 7 | */ 8 | @mixin vendor-prefix($property, $value, $prefixes: (webkit, moz, ms, o)) { 9 | @if $prefixes { 10 | @each $prefix in $prefixes { 11 | #{'-' + $prefix + '-' + $property}: $value; 12 | } 13 | } 14 | 15 | #{$property}: $value; 16 | } 17 | -------------------------------------------------------------------------------- /scss/helpers/_cursors.scss: -------------------------------------------------------------------------------- 1 | @each $cursor in (default, help, wait, grab, row-resize, pointer) { 2 | .cursor-#{$cursor} { 3 | cursor: #{$cursor}; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /scss/helpers/_grid.scss: -------------------------------------------------------------------------------- 1 | .grid-align-icon { 2 | display: grid; 3 | grid-template-columns: auto 1fr; 4 | align-items: center; 5 | } 6 | 7 | .grid-align-icon > *:not(svg) { 8 | grid-column-start: 2; 9 | } 10 | -------------------------------------------------------------------------------- /scss/helpers/_icons.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | %icon { 3 | display: inline-block; 4 | vertical-align: middle; 5 | fill: currentColor; 6 | } 7 | 8 | @each $width 9 | in ( 10 | 6, 11 | 8, 12 | 10, 13 | 11, 14 | 12, 15 | 14, 16 | 16, 17 | 18, 18 | 20, 19 | 22, 20 | 24, 21 | 28, 22 | 40, 23 | 42, 24 | 48, 25 | 56, 26 | 60, 27 | 100, 28 | 110 29 | ) 30 | { 31 | .icon-#{$width}p { 32 | @extend %icon; // 🤔 33 | width: rem($width); 34 | height: rem($width); 35 | } 36 | } 37 | 38 | @each $width in (50) { 39 | .icon-#{$width} { 40 | @extend %icon; // 🤔 41 | width: percentage(math.div($width, 100)); 42 | height: percentage(math.div($width, 100)); 43 | } 44 | } 45 | 46 | .path2x { 47 | stroke-width: 1px; 48 | } 49 | -------------------------------------------------------------------------------- /scss/helpers/_index.scss: -------------------------------------------------------------------------------- 1 | @import 2 | 'misc', 3 | 'icons', 4 | 'typo', 5 | 'colors', 6 | 'layout', 7 | 'position', 8 | 'sizing', 9 | 'spacing', 10 | 'flex', 11 | 'cursors', 12 | 'containers', 13 | 'responsive', 14 | 'print', 15 | 'grid'; 16 | -------------------------------------------------------------------------------- /scss/layout/_context-bar.scss: -------------------------------------------------------------------------------- 1 | .context-bar { 2 | background: var(--background-strong); 3 | 4 | @include respond-to($breakpoint-medium, 'min') { 5 | width: $context-bar-width; 6 | min-width: rem($context-bar-min-width); 7 | max-width: var(--width-context-bar, $context-bar-max-width); 8 | border-left: 1px solid var(--border-norm); 9 | } 10 | 11 | @include respond-to($breakpoint-medium) { 12 | border-top: 1px solid var(--border-norm); 13 | } 14 | 15 | &-inner { 16 | position: sticky; 17 | top: 0; 18 | padding: 2em; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @import 2 | 'structure', 3 | 'navigation', 4 | 'toolbar', 5 | 'context-bar'; 6 | -------------------------------------------------------------------------------- /scss/specifics/_placeholder-loading.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Shared for placeholder loading 3 | */ 4 | @keyframes anime-loading-item { 5 | from { 6 | opacity: 0.05; 7 | } 8 | to { 9 | opacity: 0.15; 10 | } 11 | } 12 | 13 | %item-loading-pseudo { 14 | content: '\00a0'; 15 | display: inline-block; 16 | border-radius: $global-border-radius; 17 | background-color: currentColor; 18 | line-height: 1.2; 19 | opacity: 0; 20 | } 21 | 22 | %appearing-container { 23 | animation: anime-item-fade-in 0.5s easing(easeOutQuint); 24 | } 25 | 26 | %placeholder-loading { 27 | animation: anime-loading-item 0.5s calc(var(--index, 0) * 20ms) 28 | easing(easeOutSine) infinite alternate; 29 | } 30 | 31 | @keyframes anime-item-fade-in { 32 | from { 33 | opacity: 0; 34 | } 35 | to { 36 | opacity: 1; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /scss/specifics/_settings.scss: -------------------------------------------------------------------------------- 1 | .settings-loading-page-title, 2 | .settings-loading-section-title, 3 | .settings-loading-paragraph-line { 4 | &::before { 5 | @extend %item-loading-pseudo; 6 | @extend %placeholder-loading; 7 | } 8 | } 9 | 10 | .settings-loading-page-title { 11 | &::before { 12 | width: 30%; 13 | } 14 | } 15 | 16 | .settings-loading-section-title { 17 | &::before { 18 | width: 50%; 19 | } 20 | } 21 | 22 | .settings-loading-paragraph-line { 23 | &:nth-child(1) { 24 | &::before { 25 | width: 90%; 26 | } 27 | } 28 | 29 | &:nth-child(2) { 30 | &::before { 31 | width: 100%; 32 | } 33 | } 34 | 35 | &:nth-child(3) { 36 | &::before { 37 | width: 40%; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /scss/specifics/android-dark-mode.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Vars override 3 | */ 4 | :root { 5 | --background-norm: #262a33; 6 | --text-norm: white; 7 | } 8 | -------------------------------------------------------------------------------- /tasks/lint-svg.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | set -eo pipefail 3 | 4 | npm i svgo; 5 | 6 | for file in $(find . -type f -name "*.svg" -not -path "./node_modules/*"); do 7 | echo "[LINT]: $file"; 8 | npx svgo "$file" -q 2>&1 -o /dev/null; 9 | done; 10 | --------------------------------------------------------------------------------