diff --git a/.azure-pipelines/linux-build-job.yml b/.azure-pipelines/linux-build-job.yml index e0a13e87..c5238d39 100644 --- a/.azure-pipelines/linux-build-job.yml +++ b/.azure-pipelines/linux-build-job.yml @@ -1,5 +1,5 @@ parameters: - nodeVersion: '8.x' + nodeVersion: '14.x' steps: - template: setup-node.yml diff --git a/.azure-pipelines/setup-node.yml b/.azure-pipelines/setup-node.yml index 4c1121f6..02b35723 100644 --- a/.azure-pipelines/setup-node.yml +++ b/.azure-pipelines/setup-node.yml @@ -1,5 +1,5 @@ parameters: - nodeVersion: '8.x' + nodeVersion: '14.x' steps: - task: NodeTool@0 diff --git a/.azure-pipelines/setup-project.yml b/.azure-pipelines/setup-project.yml index b199d09b..5f7f498f 100644 --- a/.azure-pipelines/setup-project.yml +++ b/.azure-pipelines/setup-project.yml @@ -1,5 +1,5 @@ parameters: - nodeVersion: '8.x' + nodeVersion: '14.x' globalDependencies: '' installCommand: yarn install --non-interactive diff --git a/.editorconfig b/.editorconfig index 219985c2..c35a0024 100644 --- a/.editorconfig +++ b/.editorconfig @@ -4,7 +4,6 @@ root = true - [*] end_of_line = lf charset = utf-8 diff --git a/.ember-cli.js b/.ember-cli.js index e0102ff0..681998d1 100644 --- a/.ember-cli.js +++ b/.ember-cli.js @@ -1,6 +1,6 @@ 'use strict'; -process.env.EMBER_VERSION = "OCTANE"; +process.env.EMBER_VERSION = 'OCTANE'; module.exports = { /** @@ -9,5 +9,5 @@ module.exports = { Setting `disableAnalytics` to true will prevent any data from being sent. */ - "disableAnalytics": false -} + disableAnalytics: false, +}; diff --git a/.eslintignore b/.eslintignore index 72df3730..701947ed 100644 --- a/.eslintignore +++ b/.eslintignore @@ -13,6 +13,8 @@ # misc /coverage/ !.* +.*/ +.eslintcache # ember-try /.node_modules.ember-try/ diff --git a/.eslintrc.js b/.eslintrc.js index a50a2e7d..0358cf1c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,12 +1,17 @@ +'use strict'; + module.exports = { root: true, parser: 'babel-eslint', parserOptions: { ecmaVersion: 2017, sourceType: 'module', + ecmaFeatures: { + legacyDecorators: true, + }, }, plugins: ['ember'], - extends: ['eslint:recommended', 'plugin:ember/recommended'], + extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:prettier/recommended'], env: { browser: true, }, @@ -15,6 +20,7 @@ module.exports = { 'no-debugger': 0, 'no-console': 0, 'no-unused-vars': 0, + 'no-self-assign': 0, }, overrides: [ // node files @@ -24,6 +30,9 @@ module.exports = { '.eslintrc.js', 'prod-server.js', 'server/**/*.js', + '.prettierrc.js', + 'postcss.config.js', + 'tailwind.config.js', '.template-lintrc.js', 'ember-cli-build.js', 'testem.js', @@ -34,21 +43,23 @@ module.exports = { excludedFiles: ['app/**'], parserOptions: { sourceType: 'script', - ecmaVersion: 2015, }, env: { browser: false, node: true, }, plugins: ['node'], - rules: Object.assign( - {}, - // eslint-disable-next-line node/no-unpublished-require - require('eslint-plugin-node').configs.recommended.rules, - { - // add your custom rules and overrides for node files here - } - ), + extends: ['plugin:node/recommended'], + rules: { + // this can be removed once the following is fixed + // https://github.com/mysticatea/eslint-plugin-node/issues/77 + 'node/no-unpublished-require': 'off', + }, + }, + { + // Test files: + files: ['tests/**/*-test.{js,ts}'], + extends: ['plugin:qunit/recommended'], }, ], }; diff --git a/.gitignore b/.gitignore index 29c9bc65..81fbed4c 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,7 @@ # misc /.sass-cache +/.eslintcache /connect.lock /coverage/ /libpeerconnection.log diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..92216555 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,21 @@ +# unconventional js +/blueprints/*/files/ +/vendor/ + +# compiled output +/dist/ +/tmp/ + +# dependencies +/bower_components/ +/node_modules/ + +# misc +/coverage/ +!.* +.eslintcache + +# ember-try +/.node_modules.ember-try/ +/bower.json.ember-try +/package.json.ember-try diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 0504489d..00000000 --- a/.prettierrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "singleQuote": true, - "trailingComma": "es5", - "printWidth": 80 -} diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 00000000..978b4d51 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,7 @@ +'use strict'; + +module.exports = { + singleQuote: true, + trailingComma: 'es5', + printWidth: 100, +}; diff --git a/.template-lintrc.js b/.template-lintrc.js index 83a453e6..e77a1829 100644 --- a/.template-lintrc.js +++ b/.template-lintrc.js @@ -1,12 +1,11 @@ 'use strict'; module.exports = { - extends: 'recommended', + extends: 'octane', rules: { 'no-html-comments': false, 'no-implicit-this': { allow: ['current-time'] }, - 'img-alt-attributes': false, 'self-closing-void-elements': false, - quotes: false - } + quotes: false, + }, }; diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 00000000..d908403e --- /dev/null +++ b/.travis.yml @@ -0,0 +1,28 @@ +--- +language: node_js +node_js: + - "12" + +dist: xenial + +addons: + chrome: stable + +cache: + yarn: true + +env: + global: + # See https://git.io/vdao3 for details. + - JOBS=1 + +branches: + only: + - master + +before_install: + - curl -o- -L https://yarnpkg.com/install.sh | bash + - export PATH=$HOME/.yarn/bin:$PATH + +script: + - yarn test diff --git a/app/app.js b/app/app.js index f08aaaf0..b950ae90 100644 --- a/app/app.js +++ b/app/app.js @@ -1,14 +1,12 @@ import Application from '@ember/application'; -import Resolver from './resolver'; +import Resolver from 'ember-resolver'; import loadInitializers from 'ember-load-initializers'; -import config from './config/environment'; +import config from 'shlack/config/environment'; -const App = Application.extend({ - modulePrefix: config.modulePrefix, - podModulePrefix: config.podModulePrefix, - Resolver, -}); +export default class App extends Application { + modulePrefix = config.modulePrefix; + podModulePrefix = config.podModulePrefix; + Resolver = Resolver; +} loadInitializers(App, config.modulePrefix); - -export default App; diff --git a/app/resolver.js b/app/resolver.js deleted file mode 100644 index 2fb563d6..00000000 --- a/app/resolver.js +++ /dev/null @@ -1,3 +0,0 @@ -import Resolver from 'ember-resolver'; - -export default Resolver; diff --git a/app/router.js b/app/router.js index 8f6f4598..7b4889ab 100644 --- a/app/router.js +++ b/app/router.js @@ -1,11 +1,9 @@ import EmberRouter from '@ember/routing/router'; -import config from './config/environment'; +import config from 'shlack/config/environment'; -const Router = EmberRouter.extend({ - location: config.locationType, - rootURL: config.rootURL, -}); +export default class Router extends EmberRouter { + location = config.locationType; + rootURL = config.rootURL; +} -Router.map(function() {}); - -export default Router; +Router.map(function () {}); diff --git a/app/tailwind/components/notification.css b/app/tailwind/components/notification.css deleted file mode 100644 index b1a56188..00000000 --- a/app/tailwind/components/notification.css +++ /dev/null @@ -1,23 +0,0 @@ -/** - * You can create Tailwind components using @apply here. - * - * Feel free to rename this file, define multiple components here, or make - * any other files in this directory. - - * Here's an example: -**/ - -/* -.btn-blue { - @apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded; -} -.btn-blue:hover { - @apply .bg-blue-dark; -} -*/ - -.notification { - transition-timing-function: ease-in-out; - transition-duration: 0.3s; - transition-property: top, left, margin-bottom; -} diff --git a/app/tailwind/config/background-colors.js b/app/tailwind/config/background-colors.js deleted file mode 100644 index bedd8b18..00000000 --- a/app/tailwind/config/background-colors.js +++ /dev/null @@ -1,17 +0,0 @@ -import colors from './colors'; - -/* -|----------------------------------------------------------------------------- -| Background colors https://tailwindcss.com/docs/background-color -|----------------------------------------------------------------------------- -| -| Here is where you define your background colors. By default these use -| the color palette we defined above, however you're welcome to set -| these independently if that makes sense for your project. -| -| Class name: .bg-{color} -| CSS property: background-color -| -*/ - -export default colors; diff --git a/app/tailwind/config/background-size.js b/app/tailwind/config/background-size.js deleted file mode 100644 index 55981dea..00000000 --- a/app/tailwind/config/background-size.js +++ /dev/null @@ -1,19 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Background sizes https://tailwindcss.com/docs/background-size -|----------------------------------------------------------------------------- -| -| Here is where you define your background sizes. We provide some common -| values that are useful in most projects, but feel free to add other sizes -| that are specific to your project here as well. -| -| Class name: .bg-{size} -| CSS property: background-size -| -*/ - -export default { - auto: 'auto', - cover: 'cover', - contain: 'contain', -}; diff --git a/app/tailwind/config/border-colors.js b/app/tailwind/config/border-colors.js deleted file mode 100644 index c6d6aad4..00000000 --- a/app/tailwind/config/border-colors.js +++ /dev/null @@ -1,24 +0,0 @@ -import colors from './colors'; - -/* -|----------------------------------------------------------------------------- -| Border colors https://tailwindcss.com/docs/border-color -|----------------------------------------------------------------------------- -| -| Here is where you define your border colors. By default these use the -| color palette we defined above, however you're welcome to set these -| independently if that makes sense for your project. -| -| Take note that border colors require a special "default" value set -| as well. This is the color that will be used when you do not -| specify a border color. -| -| Class name: .border-{color} -| CSS property: border-color -| -*/ - -export default Object.assign( - { default: colors['grey-light'] }, - colors -); diff --git a/app/tailwind/config/border-radius.js b/app/tailwind/config/border-radius.js deleted file mode 100644 index fafb74b9..00000000 --- a/app/tailwind/config/border-radius.js +++ /dev/null @@ -1,24 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Border radius https://tailwindcss.com/docs/border-radius -|----------------------------------------------------------------------------- -| -| Here is where you define your border radius values. If a `default` radius -| is provided, it will be made available as the non-suffixed `.rounded` -| utility. -| -| If your scale includes a `0` value to reset already rounded corners, it's -| a good idea to put it first so other values are able to override it. -| -| Class name: .rounded{-side?}{-size?} -| CSS property: border-radius -| -*/ - -export default { - none: '0', - sm: '.125rem', - default: '.25rem', - lg: '.5rem', - full: '9999px', -}; diff --git a/app/tailwind/config/border-widths.js b/app/tailwind/config/border-widths.js deleted file mode 100644 index 6045f1b5..00000000 --- a/app/tailwind/config/border-widths.js +++ /dev/null @@ -1,20 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Border widths https://tailwindcss.com/docs/border-width -|----------------------------------------------------------------------------- -| -| Here is where you define your border widths. Take note that border -| widths require a special "default" value set as well. This is the -| width that will be used when you do not specify a border width. -| -| Class name: .border{-side?}{-width?} -| CSS property: border-width -| -*/ - -export default { - default: '1px', - '0': '0', - '1': '1px', - '2': '2px', -}; diff --git a/app/tailwind/config/colors.js b/app/tailwind/config/colors.js deleted file mode 100644 index 68ff3078..00000000 --- a/app/tailwind/config/colors.js +++ /dev/null @@ -1,109 +0,0 @@ -/* -|------------------------------------------------------------------------------- -| Colors https://tailwindcss.com/docs/colors -|------------------------------------------------------------------------------- -| -| Here you can specify the colors used in your project. To get you started, -| we've provided a generous palette of great looking colors that are perfect -| for prototyping, but don't hesitate to change them for your project. You -| own these colors, nothing will break if you change everything about them. -| -| We've used literal color names ("red", "blue", etc.) for the default -| palette, but if you'd rather use functional names like "primary" and -| "secondary", or even a numeric scale like "100" and "200", go for it. -| -*/ - -export default { - transparent: 'transparent', - - black: '#22292f', - 'grey-darkest': '#3d4852', - 'grey-darker': '#606f7b', - 'grey-dark': '#8795a1', - grey: '#b8c2cc', - 'grey-light': '#dae1e7', - 'grey-lighter': '#f1f5f8', - 'grey-lightest': '#f8fafc', - white: '#ffffff', - - 'red-darkest': '#3b0d0c', - 'red-darker': '#621b18', - 'red-dark': '#cc1f1a', - red: '#e3342f', - 'red-light': '#ef5753', - 'red-lighter': '#f9acaa', - 'red-lightest': '#fcebea', - - 'orange-darkest': '#462a16', - 'orange-darker': '#613b1f', - 'orange-dark': '#de751f', - orange: '#f6993f', - 'orange-light': '#faad63', - 'orange-lighter': '#fcd9b6', - 'orange-lightest': '#fff5eb', - - 'yellow-darkest': '#453411', - 'yellow-darker': '#684f1d', - 'yellow-dark': '#f2d024', - yellow: '#ffed4a', - 'yellow-light': '#fff382', - 'yellow-lighter': '#fff9c2', - 'yellow-lightest': '#fcfbeb', - - 'green-darkest': '#0f2f21', - 'green-darker': '#1a4731', - 'green-dark': '#1f9d55', - green: '#38c172', - 'green-light': '#51d88a', - 'green-lighter': '#a2f5bf', - 'green-lightest': '#e3fcec', - - 'teal-darkest': '#0d3331', - 'teal-darker': '#20504f', - 'teal-dark': '#38a89d', - teal: '#4dc0b5', - 'teal-light': '#64d5ca', - 'teal-lighter': '#a0f0ed', - 'teal-lightest': '#e8fffe', - - 'blue-darkest': '#12283a', - 'blue-darker': '#1c3d5a', - 'blue-dark': '#2779bd', - blue: '#3490dc', - 'blue-light': '#6cb2eb', - 'blue-lighter': '#bcdefa', - 'blue-lightest': '#eff8ff', - - 'indigo-darkest': '#191e38', - 'indigo-darker': '#2f365f', - 'indigo-dark': '#5661b3', - indigo: '#6574cd', - 'indigo-light': '#7886d7', - 'indigo-lighter': '#b2b7ff', - 'indigo-lightest': '#e6e8ff', - - 'purple-darkest': '#21183c', - 'purple-darker': '#382b5f', - 'purple-dark': '#794acf', - purple: '#9561e2', - 'purple-light': '#a779e9', - 'purple-lighter': '#d6bbfc', - 'purple-lightest': '#f3ebff', - - 'pink-darkest': '#451225', - 'pink-darker': '#6f213f', - 'pink-dark': '#eb5286', - pink: '#f66d9b', - 'pink-light': '#fa7ea8', - 'pink-lighter': '#ffbbca', - 'pink-lightest': '#ffebef', - - 'smoke-darkest': 'rgba(0, 0, 0, 0.9)', - 'smoke-darker': 'rgba(0, 0, 0, 0.75)', - 'smoke-dark': 'rgba(0, 0, 0, 0.6)', - smoke: 'rgba(0, 0, 0, 0.5)', - 'smoke-light': 'rgba(0, 0, 0, 0.4)', - 'smoke-lighter': 'rgba(0, 0, 0, 0.25)', - 'smoke-lightest': 'rgba(0, 0, 0, 0.1)', -}; diff --git a/app/tailwind/config/font-weights.js b/app/tailwind/config/font-weights.js deleted file mode 100644 index 0378c196..00000000 --- a/app/tailwind/config/font-weights.js +++ /dev/null @@ -1,20 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Font weights https://tailwindcss.com/docs/font-weight -|----------------------------------------------------------------------------- -| -| Here is where you define your font weights. We've provided a list of -| common font weight names with their respective numeric scale values -| to get you started. It's unlikely that your project will require -| all of these, so we recommend removing those you don't need. -| -| Class name: .font-{weight} -| CSS property: font-weight -| -*/ - -export default { - light: 300, - normal: 400, - bold: 700, -}; diff --git a/app/tailwind/config/fonts.js b/app/tailwind/config/fonts.js deleted file mode 100644 index 9e9140fc..00000000 --- a/app/tailwind/config/fonts.js +++ /dev/null @@ -1,43 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Fonts https://tailwindcss.com/docs/fonts -|----------------------------------------------------------------------------- -| -| Here is where you define your project's font stack, or font families. -| Keep in mind that Tailwind doesn't actually load any fonts for you. -| If you're using custom fonts you'll need to import them prior to -| defining them here. -| -| By default we provide a native font stack that works remarkably well on -| any device or OS you're using, since it just uses the default fonts -| provided by the platform. -| -| Class name: .font-{name} -| CSS property: font-family -| -*/ - -export default { - sans: [ - 'system-ui', - 'BlinkMacSystemFont', - '-apple-system', - 'Segoe UI', - 'Roboto', - 'Oxygen', - 'Ubuntu', - 'Cantarell', - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - 'sans-serif', - ], - mono: [ - 'Menlo', - 'Monaco', - 'Consolas', - 'Liberation Mono', - 'Courier New', - 'monospace', - ], -}; diff --git a/app/tailwind/config/height.js b/app/tailwind/config/height.js deleted file mode 100644 index 23bfe521..00000000 --- a/app/tailwind/config/height.js +++ /dev/null @@ -1,36 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Height https://tailwindcss.com/docs/height -|----------------------------------------------------------------------------- -| -| Here is where you define your height utility sizes. These can be -| percentage based, pixels, rems, or any other units. By default -| we provide a sensible rem based numeric scale plus some other -| common use-cases. You can, of course, modify these values as -| needed. -| -| Class name: .h-{size} -| CSS property: height -| -*/ - -export default { - auto: 'auto', - px: '1px', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '24': '6rem', - '32': '8rem', - '48': '12rem', - '64': '16rem', - full: '100%', - screen: '100vh', -}; diff --git a/app/tailwind/config/letter-spacing.js b/app/tailwind/config/letter-spacing.js deleted file mode 100644 index b8a46d0b..00000000 --- a/app/tailwind/config/letter-spacing.js +++ /dev/null @@ -1,18 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing -|----------------------------------------------------------------------------- -| -| Here is where you define your letter spacing values, or as we call -| them in Tailwind, tracking. -| -| Class name: .tracking-{size} -| CSS property: letter-spacing -| -*/ - -export default { - tight: '-0.05em', - normal: '0', - wide: '0.05em', -}; diff --git a/app/tailwind/config/line-height.js b/app/tailwind/config/line-height.js deleted file mode 100644 index 610bc90e..00000000 --- a/app/tailwind/config/line-height.js +++ /dev/null @@ -1,19 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Leading (line height) https://tailwindcss.com/docs/line-height -|----------------------------------------------------------------------------- -| -| Here is where you define your line height values, or as we call -| them in Tailwind, leadings. -| -| Class name: .leading-{size} -| CSS property: line-height -| -*/ - -export default { - none: 1, - tight: 1.25, - normal: 1.5, - loose: 2, -}; diff --git a/app/tailwind/config/margin.js b/app/tailwind/config/margin.js deleted file mode 100644 index 0c0bb428..00000000 --- a/app/tailwind/config/margin.js +++ /dev/null @@ -1,34 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Margin https://tailwindcss.com/docs/margin -|----------------------------------------------------------------------------- -| -| Here is where you define your margin utility sizes. These can be -| percentage based, pixels, rems, or any other units. By default we -| provide a sensible rem based numeric scale plus a couple other -| common use-cases like "1px". You can, of course, modify these -| values as needed. -| -| Class name: .m{side?}-{size} -| CSS property: margin -| -*/ - -export default { - auto: 'auto', - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem', -}; diff --git a/app/tailwind/config/max-height.js b/app/tailwind/config/max-height.js deleted file mode 100644 index 1f23315c..00000000 --- a/app/tailwind/config/max-height.js +++ /dev/null @@ -1,19 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Maximum height https://tailwindcss.com/docs/max-height -|----------------------------------------------------------------------------- -| -| Here is where you define your maximum height utility sizes. These can -| be percentage based, pixels, rems, or any other units. We provide a -| couple common use-cases by default. You can, of course, modify -| these values as needed. -| -| Class name: .max-h-{size} -| CSS property: max-height -| -*/ - -export default { - full: '100%', - screen: '100vh', -}; diff --git a/app/tailwind/config/max-width.js b/app/tailwind/config/max-width.js deleted file mode 100644 index 5e845d18..00000000 --- a/app/tailwind/config/max-width.js +++ /dev/null @@ -1,28 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Maximum width https://tailwindcss.com/docs/max-width -|----------------------------------------------------------------------------- -| -| Here is where you define your maximum width utility sizes. These can -| be percentage based, pixels, rems, or any other units. By default -| we provide a sensible rem based scale and a "full width" size, -| which is basically a reset utility. You can, of course, -| modify these values as needed. -| -| Class name: .max-w-{size} -| CSS property: max-width -| -*/ - -export default { - xs: '20rem', - sm: '30rem', - md: '40rem', - lg: '50rem', - xl: '60rem', - '2xl': '70rem', - '3xl': '80rem', - '4xl': '90rem', - '5xl': '100rem', - full: '100%', -}; diff --git a/app/tailwind/config/min-height.js b/app/tailwind/config/min-height.js deleted file mode 100644 index 539eff88..00000000 --- a/app/tailwind/config/min-height.js +++ /dev/null @@ -1,20 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Minimum height https://tailwindcss.com/docs/min-height -|----------------------------------------------------------------------------- -| -| Here is where you define your minimum height utility sizes. These can -| be percentage based, pixels, rems, or any other units. We provide a -| few common use-cases by default. You can, of course, modify these -| values as needed. -| -| Class name: .min-h-{size} -| CSS property: min-height -| -*/ - -export default { - '0': '0', - full: '100%', - screen: '100vh', -}; diff --git a/app/tailwind/config/min-width.js b/app/tailwind/config/min-width.js deleted file mode 100644 index 8850564e..00000000 --- a/app/tailwind/config/min-width.js +++ /dev/null @@ -1,19 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Minimum width https://tailwindcss.com/docs/min-width -|----------------------------------------------------------------------------- -| -| Here is where you define your minimum width utility sizes. These can -| be percentage based, pixels, rems, or any other units. We provide a -| couple common use-cases by default. You can, of course, modify -| these values as needed. -| -| Class name: .min-w-{size} -| CSS property: min-width -| -*/ - -export default { - '0': '0', - full: '100%', -}; diff --git a/app/tailwind/config/negative-margin.js b/app/tailwind/config/negative-margin.js deleted file mode 100644 index 6bb21609..00000000 --- a/app/tailwind/config/negative-margin.js +++ /dev/null @@ -1,33 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Negative margin https://tailwindcss.com/docs/negative-margin -|----------------------------------------------------------------------------- -| -| Here is where you define your negative margin utility sizes. These can -| be percentage based, pixels, rems, or any other units. By default we -| provide matching values to the padding scale since these utilities -| generally get used together. You can, of course, modify these -| values as needed. -| -| Class name: .-m{side?}-{size} -| CSS property: margin -| -*/ - -export default { - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem', -}; diff --git a/app/tailwind/config/opacity.js b/app/tailwind/config/opacity.js deleted file mode 100644 index 68c7715b..00000000 --- a/app/tailwind/config/opacity.js +++ /dev/null @@ -1,21 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Opacity https://tailwindcss.com/docs/opacity -|----------------------------------------------------------------------------- -| -| Here is where you define your opacity utility values. By default we -| provide a sensible numeric scale. You can, of course, modify these -| values as needed. -| -| Class name: .opacity-{name} -| CSS property: opacity -| -*/ - -export default { - '0': '0', - '25': '.25', - '50': '.5', - '75': '.75', - '100': '1', -}; diff --git a/app/tailwind/config/padding.js b/app/tailwind/config/padding.js deleted file mode 100644 index f30dc005..00000000 --- a/app/tailwind/config/padding.js +++ /dev/null @@ -1,33 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Padding https://tailwindcss.com/docs/padding -|----------------------------------------------------------------------------- -| -| Here is where you define your padding utility sizes. These can be -| percentage based, pixels, rems, or any other units. By default we -| provide a sensible rem based numeric scale plus a couple other -| common use-cases like "1px". You can, of course, modify these -| values as needed. -| -| Class name: .p{side?}-{size} -| CSS property: padding -| -*/ - -export default { - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem', -}; diff --git a/app/tailwind/config/screens.js b/app/tailwind/config/screens.js deleted file mode 100644 index d6b5c891..00000000 --- a/app/tailwind/config/screens.js +++ /dev/null @@ -1,25 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Screens https://tailwindcss.com/docs/responsive-design -|----------------------------------------------------------------------------- -| -| Screens in Tailwind are translated to CSS media queries. They define the -| responsive breakpoints for your project. By default Tailwind takes a -| "mobile first" approach, where each screen size represents a minimum -| viewport width. Feel free to have as few or as many screens as you -| want, naming them in whatever way you'd prefer for your project. -| -| Tailwind also allows for more complex screen definitions, which can be -| useful in certain situations. Be sure to see the full responsive -| documentation for a complete list of options. -| -| Class name: .{screen}:{utility} -| -*/ - -export default { - sm: '576px', - md: '768px', - lg: '992px', - xl: '1200px', -}; diff --git a/app/tailwind/config/shadows.js b/app/tailwind/config/shadows.js deleted file mode 100644 index 692847e3..00000000 --- a/app/tailwind/config/shadows.js +++ /dev/null @@ -1,27 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Shadows https://tailwindcss.com/docs/shadows -|----------------------------------------------------------------------------- -| -| Here is where you define your shadow utilities. As you can see from -| the defaults we provide, it's possible to apply multiple shadows -| per utility using comma separation. -| -| If a `default` shadow is provided, it will be made available as the non- -| suffixed `.shadow` utility. -| -| Class name: .shadow-{size?} -| CSS property: box-shadow -| -*/ - -export default { - default: '0 2px 4px 0 rgba(0,0,0,0.10)', - md: - '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', - lg: - '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', - inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', - outline: '0 0 0 3px rgba(52,144,220,0.5)', - none: 'none', -}; diff --git a/app/tailwind/config/svg-fill.js b/app/tailwind/config/svg-fill.js deleted file mode 100644 index 173636b1..00000000 --- a/app/tailwind/config/svg-fill.js +++ /dev/null @@ -1,18 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| SVG fill https://tailwindcss.com/docs/svg -|----------------------------------------------------------------------------- -| -| Here is where you define your SVG fill colors. By default we just provide -| `fill-current` which sets the fill to the current text color. This lets you -| specify a fill color using existing text color utilities and helps keep the -| generated CSS file size down. -| -| Class name: .fill-{name} -| CSS property: fill -| -*/ - -export default { - current: 'currentColor', -}; diff --git a/app/tailwind/config/svg-stroke.js b/app/tailwind/config/svg-stroke.js deleted file mode 100644 index 3c4d8774..00000000 --- a/app/tailwind/config/svg-stroke.js +++ /dev/null @@ -1,18 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| SVG stroke https://tailwindcss.com/docs/svg -|----------------------------------------------------------------------------- -| -| Here is where you define your SVG stroke colors. By default we just provide -| `stroke-current` which sets the stroke to the current text color. This lets -| you specify a stroke color using existing text color utilities and helps -| keep the generated CSS file size down. -| -| Class name: .stroke-{name} -| CSS property: stroke -| -*/ - -export default { - current: 'currentColor', -}; diff --git a/app/tailwind/config/tailwind.js b/app/tailwind/config/tailwind.js deleted file mode 100644 index 12463b2f..00000000 --- a/app/tailwind/config/tailwind.js +++ /dev/null @@ -1,175 +0,0 @@ -import container from 'tailwindcss/plugins/container'; - -import colors from './colors'; -import screens from './screens'; -import fonts from './fonts'; -import textSizes from './text-sizes'; -import fontWeights from './font-weights'; -import leading from './line-height'; -import tracking from './letter-spacing'; -import textColors from './text-colors'; -import backgroundColors from './background-colors'; -import backgroundSize from './background-size'; -import borderWidths from './border-widths'; -import borderColors from './border-colors'; -import borderRadius from './border-radius'; -import width from './width'; -import height from './height'; -import minWidth from './min-width'; -import minHeight from './min-height'; -import maxWidth from './max-width'; -import maxHeight from './max-height'; -import padding from './padding'; -import margin from './margin'; -import negativeMargin from './negative-margin'; -import shadows from './shadows'; -import zIndex from './z-index'; -import opacity from './opacity'; -import svgFill from './svg-fill'; -import svgStroke from './svg-stroke'; - -export default { - colors, - fonts, - textSizes, - fontWeights, - leading, - tracking, - textColors, - backgroundColors, - backgroundSize, - borderWidths, - borderColors, - borderRadius, - width, - height, - minWidth, - minHeight, - maxWidth, - maxHeight, - padding, - margin, - negativeMargin, - shadows, - zIndex, - opacity, - svgFill, - svgStroke, - screens: { - sm: '520px', - // => @media (min-width: 640px) { ... } - - md: '769px', - // => @media (min-width: 1024px) { ... } - }, - - /* - |----------------------------------------------------------------------------- - | Modules https://tailwindcss.com/docs/configuration#modules - |----------------------------------------------------------------------------- - | - | Here is where you control which modules are generated and what variants are - | generated for each of those modules. - | - | Currently supported variants: - | - responsive - | - hover - | - focus - | - focus-within - | - active - | - group-hover - | - | To disable a module completely, use `false` instead of an array. - | - */ - - modules: { - appearance: ['responsive', 'hover', 'focus', 'active', 'group-hover'], - backgroundAttachment: ['responsive'], - backgroundColors: ['responsive', 'hover', 'focus'], - backgroundPosition: ['responsive'], - backgroundRepeat: ['responsive'], - backgroundSize: ['responsive'], - borderCollapse: [], - borderColors: ['responsive', 'hover', 'focus'], - borderRadius: ['responsive'], - borderStyle: ['responsive'], - borderWidths: ['responsive'], - cursor: ['responsive'], - display: ['responsive'], - flexbox: ['responsive'], - float: ['responsive'], - fonts: ['responsive'], - fontWeights: ['responsive', 'hover', 'focus'], - height: ['responsive'], - leading: ['responsive'], - lists: ['responsive'], - margin: ['responsive'], - maxHeight: ['responsive'], - maxWidth: ['responsive'], - minHeight: ['responsive'], - minWidth: ['responsive'], - negativeMargin: ['responsive'], - objectFit: false, - objectPosition: false, - opacity: ['responsive'], - outline: ['focus'], - overflow: ['responsive'], - padding: ['responsive'], - pointerEvents: ['responsive'], - position: ['responsive'], - resize: ['responsive'], - shadows: ['responsive', 'hover', 'focus'], - svgFill: [], - svgStroke: [], - tableLayout: ['responsive'], - textAlign: ['responsive'], - textColors: ['responsive', 'hover', 'focus'], - textSizes: ['responsive'], - textStyle: ['responsive', 'hover', 'focus'], - tracking: ['responsive'], - userSelect: ['responsive'], - verticalAlign: ['responsive'], - visibility: ['responsive'], - whitespace: ['responsive'], - width: ['responsive'], - zIndex: ['responsive'], - }, - - /* - |----------------------------------------------------------------------------- - | Plugins https://tailwindcss.com/docs/plugins - |----------------------------------------------------------------------------- - | - | Here is where you can register any plugins you'd like to use in your - | project. Tailwind's built-in `container` plugin is enabled by default to - | give you a Bootstrap-style responsive container component out of the box. - | - | Be sure to view the complete plugin documentation to learn more about how - | the plugin system works. - | - */ - - plugins: [ - container({ - // center: true, - // padding: '1rem', - }), - ], - - /* - |----------------------------------------------------------------------------- - | Advanced Options https://tailwindcss.com/docs/configuration#options - |----------------------------------------------------------------------------- - | - | Here is where you can tweak advanced configuration options. We recommend - | leaving these options alone unless you absolutely need to change them. - | - */ - - options: { - prefix: '', - important: false, - separator: ':', - }, -}; diff --git a/app/tailwind/config/text-colors.js b/app/tailwind/config/text-colors.js deleted file mode 100644 index 7c3ed77d..00000000 --- a/app/tailwind/config/text-colors.js +++ /dev/null @@ -1,17 +0,0 @@ -import colors from './colors'; - -/* -|----------------------------------------------------------------------------- -| Text colors https://tailwindcss.com/docs/text-color -|----------------------------------------------------------------------------- -| -| Here is where you define your text colors. By default these use the -| color palette we defined above, however you're welcome to set these -| independently if that makes sense for your project. -| -| Class name: .text-{color} -| CSS property: color -| -*/ - -export default colors; diff --git a/app/tailwind/config/text-sizes.js b/app/tailwind/config/text-sizes.js deleted file mode 100644 index f98f5fc5..00000000 --- a/app/tailwind/config/text-sizes.js +++ /dev/null @@ -1,31 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Text sizes https://tailwindcss.com/docs/text-sizing -|----------------------------------------------------------------------------- -| -| Here is where you define your text sizes. Name these in whatever way -| makes the most sense to you. We use size names by default, but -| you're welcome to use a numeric scale or even something else -| entirely. -| -| By default Tailwind uses the "rem" unit type for most measurements. -| This allows you to set a root font size which all other sizes are -| then based on. That said, you are free to use whatever units you -| prefer, be it rems, ems, pixels or other. -| -| Class name: .text-{size} -| CSS property: font-size -| -*/ - -export default { - xs: '.75rem', // 12px - sm: '.875rem', // 14px - base: '1rem', // 16px - lg: '1.125rem', // 18px - xl: '1.25rem', // 20px - '2xl': '1.5rem', // 24px - '3xl': '1.875rem', // 30px - '4xl': '2.25rem', // 36px - '5xl': '3rem', // 48px -}; diff --git a/app/tailwind/config/width.js b/app/tailwind/config/width.js deleted file mode 100644 index 1eb54b1d..00000000 --- a/app/tailwind/config/width.js +++ /dev/null @@ -1,52 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Width https://tailwindcss.com/docs/width -|----------------------------------------------------------------------------- -| -| Here is where you define your width utility sizes. These can be -| percentage based, pixels, rems, or any other units. By default -| we provide a sensible rem based numeric scale, a percentage -| based fraction scale, plus some other common use-cases. You -| can, of course, modify these values as needed. -| -| -| It's also worth mentioning that Tailwind automatically escapes -| invalid CSS class name characters, which allows you to have -| awesome classes like .w-2/3. -| -| Class name: .w-{size} -| CSS property: width -| -*/ - -export default { - auto: 'auto', - px: '1px', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '24': '6rem', - '32': '8rem', - '48': '12rem', - '64': '16rem', - '1/2': '50%', - '1/3': '33.33333%', - '2/3': '66.66667%', - '1/4': '25%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.66667%', - '5/6': '83.33333%', - full: '100%', - screen: '100vw', -}; diff --git a/app/tailwind/config/z-index.js b/app/tailwind/config/z-index.js deleted file mode 100644 index 5bd617c9..00000000 --- a/app/tailwind/config/z-index.js +++ /dev/null @@ -1,23 +0,0 @@ -/* -|----------------------------------------------------------------------------- -| Z-index https://tailwindcss.com/docs/z-index -|----------------------------------------------------------------------------- -| -| Here is where you define your z-index utility values. By default we -| provide a sensible numeric scale. You can, of course, modify these -| values as needed. -| -| Class name: .z-{index} -| CSS property: z-index -| -*/ - -export default { - auto: 'auto', - '0': 0, - '10': 10, - '20': 20, - '30': 30, - '40': 40, - '50': 50, -}; diff --git a/app/tailwind/modules.css b/app/tailwind/modules.css deleted file mode 100644 index 318bc86d..00000000 --- a/app/tailwind/modules.css +++ /dev/null @@ -1,32 +0,0 @@ -/** -* This injects Tailwind's base styles, which is a combination of -* Normalize.css and some additional base styles. -* -* You can see the styles here: -* https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css -*/ -@import "tailwindcss/preflight"; - -/** -* This injects any component classes registered by plugins. -*/ -@import "tailwindcss/components"; - -/** -* Here you would add any of your custom component classes; stuff that you'd -* want loaded *before* the utilities so that the utilities could still -* override them. -*/ -@import "./components/*.css"; - -/** -* This injects all of Tailwind's utility classes, generated based on your -* config file. -*/ -@import "tailwindcss/utilities"; - -/** -* Here you would add any custom utilities you need that don't come out of the -* box with Tailwind. -*/ -@import "./utilities/*.css"; diff --git a/app/tailwind/utilities/your-utility.css b/app/tailwind/utilities/your-utility.css deleted file mode 100644 index ca99578b..00000000 --- a/app/tailwind/utilities/your-utility.css +++ /dev/null @@ -1,12 +0,0 @@ -/** - * You can create new utilities here. - * - * Feel free to rename this file, define multiple utilities here, or make - * any other files in this directory. - - * Here's an example: -**/ - -/* .skew-45 { - transform: skewY(45deg); -} */ diff --git a/app/templates/application.hbs b/app/templates/application.hbs index 7b1b1040..39c2de9b 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -2,4 +2,4 @@ {{!-- Feel free to remove this! --}} -{{outlet}} \ No newline at end of file +{{outlet}} diff --git a/config/ember-cli-update.json b/config/ember-cli-update.json new file mode 100644 index 00000000..a25c4df1 --- /dev/null +++ b/config/ember-cli-update.json @@ -0,0 +1,20 @@ +{ + "schemaVersion": "1.0.0", + "packages": [ + { + "name": "ember-cli", + "version": "3.28.5", + "blueprints": [ + { + "name": "app", + "outputRepo": "https://github.com/ember-cli/ember-new-output", + "codemodsSource": "ember-app-codemods-manifest@1", + "isBaseBlueprint": true, + "options": [ + "--yarn" + ] + } + ] + } + ] +} diff --git a/config/environment.js b/config/environment.js index 856680ea..20d64cf5 100644 --- a/config/environment.js +++ b/config/environment.js @@ -1,6 +1,6 @@ 'use strict'; -module.exports = function(environment) { +module.exports = function (environment) { let ENV = { modulePrefix: 'shlack', environment, @@ -29,7 +29,7 @@ module.exports = function(environment) { // A11y testing config ['ember-a11y-testing']: { - componentOptions: { + componentOptions: { // Disable visual audit feature turnAuditOff: true, // Include axe-core in tests only diff --git a/config/optional-features.json b/config/optional-features.json index 77a734e9..b26286e2 100644 --- a/config/optional-features.json +++ b/config/optional-features.json @@ -1,5 +1,6 @@ { "application-template-wrapper": false, + "default-async-observers": true, "jquery-integration": false, "template-only-glimmer-components": true } diff --git a/config/targets.js b/config/targets.js index cc553928..6c153ac7 100644 --- a/config/targets.js +++ b/config/targets.js @@ -1,17 +1,21 @@ 'use strict'; -const browsers = [ - 'last 1 Chrome versions', - 'last 1 Firefox versions', - 'last 1 Safari versions', -]; +const browsers = ['last 1 Chrome versions', 'last 1 Firefox versions', 'last 1 Safari versions']; -const isCI = !!process.env.CI; -const isProduction = process.env.EMBER_ENV === 'production'; - -if (isCI || isProduction) { - browsers.push('ie 11'); -} +// Ember's browser support policy is changing, and IE11 support will end in +// v4.0 onwards. +// +// See https://deprecations.emberjs.com/v3.x#toc_3-0-browser-support-policy +// +// If you need IE11 support on a version of Ember that still offers support +// for it, uncomment the code block below. +// +// const isCI = Boolean(process.env.CI); +// const isProduction = process.env.EMBER_ENV === 'production'; +// +// if (isCI || isProduction) { +// browsers.push('ie 11'); +// } module.exports = { browsers, diff --git a/ember-cli-build.js b/ember-cli-build.js index 7281c5d6..3156c34d 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -3,8 +3,22 @@ // eslint-disable-next-line node/no-unpublished-require const EmberApp = require('ember-cli/lib/broccoli/ember-app'); -module.exports = function(defaults) { - let app = new EmberApp(defaults, {}); +module.exports = function (defaults) { + let app = new EmberApp(defaults, { + postcssOptions: { + compile: { + plugins: [ + { + module: require('postcss-import'), + options: { + path: ['node_modules'], + }, + }, + require('tailwindcss')('./tailwind.config.js'), + ], + }, + }, + }); // Use `app.import` to add additional libraries to the generated // output files. diff --git a/notes/01-templates.md b/notes/01-templates.md index 0674f0a1..a9bb53eb 100644 --- a/notes/01-templates.md +++ b/notes/01-templates.md @@ -17,7 +17,7 @@ For now, paste the following HTML in [`app/templates/application.hbs`](../app/te ```hbs {starter-file=starter.html} @@ -106,24 +106,24 @@ For now, paste the following HTML in [`app/templates/application.hbs`](../app/te
-

+

general

-

+

Generally chatting about general things

+ class="ml-auto md:block border border-gray-500 rounded-lg pl-3 pr-2 py-1 flex flex-row-reverse items-center search-form"> -
+
@@ -176,7 +176,7 @@ For now, paste the following HTML in [`app/templates/application.hbs`](../app/te Mike North at -
@@ -198,12 +198,12 @@ For now, paste the following HTML in [`app/templates/application.hbs`](../app/te
- +

Message Input

-
-
+
@@ -153,9 +153,9 @@ First, open up [`app/templates/components/team-sidebar.hbs`](../app/templates/co
-

+

A validation message

diff --git a/starter-files/date-test.js b/starter-files/date-test.js index d5980843..5a608c6a 100644 --- a/starter-files/date-test.js +++ b/starter-files/date-test.js @@ -1,19 +1,11 @@ import { dateToString } from 'shlack/utils/date'; import { module, test } from 'qunit'; -module('Unit | Utility | date', function() { +module('Unit | Utility | date', function () { // Replace this with your real tests. - test('string inputs', function(assert) { - assert.equal( - dateToString('04/05/1983 1:31 AM'), - 'Apr 5, 1983 01:31.00 AM', - 'MM/DD/YYYY' - ); - assert.equal( - dateToString('4/5/1983'), - 'Apr 5, 1983 00:00.00 AM', - 'M/D/YYYY' - ); + test('string inputs', function (assert) { + assert.equal(dateToString('04/05/1983 1:31 AM'), 'Apr 5, 1983 01:31.00 AM', 'MM/DD/YYYY'); + assert.equal(dateToString('4/5/1983'), 'Apr 5, 1983 00:00.00 AM', 'M/D/YYYY'); assert.equal( dateToString('26 June 2010 13:14'), 'Jun 26, 2010 01:14.00 PM', @@ -21,7 +13,7 @@ module('Unit | Utility | date', function() { ); }); - test('empty and invalid inputs', function(assert) { + test('empty and invalid inputs', function (assert) { // @ts-ignore assert.equal(dateToString(), null); // @ts-ignore diff --git a/starter-files/date.js b/starter-files/date.js index 7470c152..c1da87e9 100644 --- a/starter-files/date.js +++ b/starter-files/date.js @@ -37,26 +37,13 @@ function padLeadingZeroes(val, digits) { * @returns {string} */ export function dateToString(date) { - if ( - !( - typeof date === 'string' || - typeof date === 'number' || - date instanceof Date - ) - ) - return null; + if (!(typeof date === 'string' || typeof date === 'number' || date instanceof Date)) return null; const d = new Date(date); const ampm = d.getHours() >= 12 ? 'PM' : 'AM'; - const hrsConverted = - d.getHours() > 12 ? Math.abs(12 - d.getHours()) : d.getHours(); + const hrsConverted = d.getHours() > 12 ? Math.abs(12 - d.getHours()) : d.getHours(); - return `${ - MONTH_NAMES[d.getMonth()] - } ${d.getDate()}, ${d.getFullYear()} ${padLeadingZeroes( + return `${MONTH_NAMES[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()} ${padLeadingZeroes( hrsConverted, 2 - )}:${padLeadingZeroes(d.getMinutes(), 2)}.${padLeadingZeroes( - d.getSeconds(), - 2 - )} ${ampm}`; + )}:${padLeadingZeroes(d.getMinutes(), 2)}.${padLeadingZeroes(d.getSeconds(), 2)} ${ampm}`; } diff --git a/starter-files/starter.css b/starter-files/starter.css index 93bec6e2..94e5094a 100644 --- a/starter-files/starter.css +++ b/starter-files/starter.css @@ -1,4 +1,7 @@ -@import 'tailwind.css'; +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; + .hover-target .show-on-hover { opacity: 0; @@ -10,14 +13,3 @@ opacity: 1; filter: alpha(opacity=1); } - -.sr-only { - clip-path: inset(50%); - clip: rect(1px, 1px, 1px, 1px); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} diff --git a/starter-files/starter.html b/starter-files/starter.html index 2b8b84fc..088e8b56 100644 --- a/starter-files/starter.html +++ b/starter-files/starter.html @@ -1,6 +1,6 @@