diff --git a/.circleci/config.yml b/.circleci/config.yml index 2a506cd2804..cf0f5918eca 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,36 +1,26 @@ version: 2.1 orbs: - ruby: circleci/ruby@2.5.0 - node: circleci/node@7.1.0 - browser-tools: circleci/browser-tools@1.5.2 + ruby: circleci/ruby@2.5.4 + node: circleci/node@7.1.1 + browser-tools: circleci/browser-tools@2.3.2 jobs: build: docker: - - image: cimg/ruby:3.1.6-node + - image: cimg/ruby:3.4.3-node steps: - checkout - - run: - name: Configure Bundler - command: | - bundle config set --local force_ruby_platform true - bundle lock --add-platform ruby - ruby/install-deps - node/install: install-yarn: true - node-version: '20.9.0' + node-version: '22.19.0' - node/install-packages: pkg-manager: yarn check: docker: - - image: 'cimg/ruby:3.1.6-node' + - image: 'cimg/ruby:3.4.3-node' steps: - checkout - - run: - name: Configure Bundler - command: | - bundle config set --local force_ruby_platform true - bundle lock --add-platform ruby - ruby/install-deps - ruby/rubocop-check: format: progress @@ -49,7 +39,7 @@ jobs: command: FAIL_ON_ERROR=1 bundle exec rake traceroute - node/install: install-yarn: true - node-version: '20.9.0' + node-version: '22.19.0' - node/install-packages: pkg-manager: yarn - run: @@ -57,7 +47,7 @@ jobs: command: bin/yarn lint test: docker: - - image: cimg/ruby:3.1.6-browsers + - image: cimg/ruby:3.4.3-browsers environment: POSTGRES_USER: postgres POSTGRES_PASSWORD: postgres @@ -65,22 +55,18 @@ jobs: - image: cimg/postgres:14.4 resource_class: large environment: - BUNDLE_JOBS: "3" - BUNDLE_RETRY: "3" + BUNDLE_JOBS: '3' + BUNDLE_RETRY: '3' PGHOST: 127.0.0.1 PGUSER: postgres - PGPASSWORD: "postgres" + PGPASSWORD: 'postgres' RAILS_ENV: test - DATABASE_URL: "postgres://postgres:postgres@localhost/ci_test" + DATABASE_URL: 'postgres://postgres:postgres@localhost/ci_test' TZ: Asia/Tokyo - PARALLEL_WORKERS: 2 - parallelism: 3 + parallelism: 8 steps: - checkout - - browser-tools/install-chrome: - replace-existing: true - chrome-version: 130.0.6723.116 - - browser-tools/install-chromedriver + - browser-tools/install_browser_tools - run: command: | google-chrome --version @@ -95,7 +81,7 @@ jobs: clean-bundle: true - node/install: install-yarn: true - node-version: '20.9.0' + node-version: '22.19.0' - node/install-packages: pkg-manager: yarn - run: @@ -112,14 +98,11 @@ jobs: command: 'bundle exec rails db:setup' - run: name: Assets precompile - command: 'bundle exec rails assets:clean assets:precompile NODE_OPTIONS=--openssl-legacy-provider' + command: 'bundle exec rails assets:clean assets:precompile' - run: name: Test command: | - TEST_FILES=$(circleci tests glob "test/**/*_test.rb") - echo "$TEST_FILES" | circleci tests run --command="xargs bundle exec rails test $TESTFILES" --verbose --split-by=timings - no_output_timeout: 30m - when: always + circleci tests glob "test/**/*_test.rb" | circleci tests run --command="xargs bundle exec rails test" --verbose --split-by=timings --timings-type=filename - store_test_results: path: test/reports - store_artifacts: @@ -132,5 +115,3 @@ workflows: - test: requires: - build - -# VS Code Extension Version: 1.5.1 diff --git a/.cloudbuild/cloudbuild-staging.yaml b/.cloudbuild/cloudbuild-staging.yaml index 769475d2ac6..cae5eb7e2e9 100644 --- a/.cloudbuild/cloudbuild-staging.yaml +++ b/.cloudbuild/cloudbuild-staging.yaml @@ -23,6 +23,31 @@ steps: - 'asia.gcr.io/$PROJECT_ID/$REPO_NAME:$COMMIT_SHA' waitFor: - Build + # Cloud Runサービスを削除してDB接続を切断 + # Cloud SQLでは管理者権限がないためpg_terminate_backendが使えない + # サービスを削除することで接続を確実に切断し、Deployで再作成される + - id: StopCloudRun + name: gcr.io/google.com/cloudsdktool/cloud-sdk + entrypoint: bash + args: + - '-c' + - | + set -euo pipefail + echo "Deleting Cloud Run service to disconnect database connections..." + + # サービスが存在するか確認して削除 + if gcloud run services describe $_SERVICE_NAME --region=asia-northeast1 --quiet 2>/dev/null; then + gcloud run services delete $_SERVICE_NAME \ + --region=asia-northeast1 \ + --quiet + + echo "Cloud Run service deleted. Waiting 10 seconds for connections to close..." + sleep 10 + else + echo "Cloud Run service does not exist yet. Skipping delete." + fi + waitFor: + - Push - id: SqlProxy name: 'gcr.io/cloudsql-docker/gce-proxy:1.16' args: @@ -30,26 +55,26 @@ steps: - '-dir=/cloudsql' - '-instances=$_CLOUD_SQL_HOST' waitFor: - - '-' + - StopCloudRun volumes: - name: db path: /cloudsql - # 既存の接続を強制的に切断 - - name: 'asia.gcr.io/$PROJECT_ID/$REPO_NAME:$COMMIT_SHA' + # Cloud SQL Proxyの起動を待つ + - id: WaitForProxy + name: 'asia.gcr.io/$PROJECT_ID/$REPO_NAME:$COMMIT_SHA' args: - bash - '-c' - | set -euo pipefail - - # Cloud SQL Proxyの起動を待つ(最大60秒) + echo "Waiting for Cloud SQL Proxy to be ready..." TIMEOUT=60 ELAPSED=0 - + while [ $$ELAPSED -lt $$TIMEOUT ]; do echo "Attempting database connection... ($$ELAPSED/$$TIMEOUT seconds)" - if cat <<'TESTEOF' | bin/rails runner - 2>/dev/null + OUTPUT=$$(cat <<'TESTEOF' | bin/rails runner - 2>&1 begin ActiveRecord::Base.connection.execute("SELECT 1") puts "Database connection successful" @@ -59,36 +84,24 @@ steps: exit 1 end TESTEOF - then - echo "Database connection verified, proceeding to terminate connections..." - break + ) + EXITCODE=$$? + if [ $$EXITCODE -eq 0 ]; then + echo "$$OUTPUT" + echo "Cloud SQL Proxy is ready." + exit 0 else + echo "Rails runner output: $$OUTPUT" echo "Database not ready yet, waiting..." fi sleep 2 ELAPSED=$$(($$ELAPSED + 2)) done - - if [ $$ELAPSED -ge $$TIMEOUT ]; then - echo "ERROR: Timeout waiting for Cloud SQL Proxy to be ready after $$TIMEOUT seconds" - exit 1 - fi - - # 接続を強制切断 - echo "Terminating existing connections to bootcamp_staging database..." - cat <<'EOF' | bin/rails runner - - result = ActiveRecord::Base.connection.execute(" - SELECT pg_terminate_backend(pid) - FROM pg_stat_activity - WHERE datname = 'bootcamp_staging' - AND pid <> pg_backend_pid() - ") - terminated_count = result.ntuples - puts "Terminated #{terminated_count} connection(s) to bootcamp_staging database" - EOF - id: TerminateConnections + + echo "ERROR: Timeout waiting for Cloud SQL Proxy after $$TIMEOUT seconds" + exit 1 waitFor: - - Push + - StopCloudRun volumes: - name: db path: /cloudsql @@ -100,19 +113,37 @@ steps: - DB_PASS=$_DB_PASS - DB_USER=$_DB_USER - RAILS_MASTER_KEY=$_RAILS_MASTER_KEY - # データベースを削除 + - APP_HOST_NAME=$_APP_HOST_NAME + # データベースを削除(リトライ付き) + # WaitForProxyの接続がCloud SQL Proxy経由で残っている場合があるため、 + # 接続が切れるまでリトライする - name: gcr.io/google.com/cloudsdktool/cloud-sdk - args: - - sql - - databases - - delete - - bootcamp_staging - - '--instance=bootcamp' - - '--quiet' id: DeleteDB + entrypoint: bash + args: + - '-c' + - | + set -euo pipefail + MAX_RETRIES=5 + RETRY_DELAY=5 + + for i in $$(seq 1 $$MAX_RETRIES); do + echo "Attempt $$i/$$MAX_RETRIES: Deleting database bootcamp_staging..." + if gcloud sql databases delete bootcamp_staging --instance=bootcamp --quiet 2>&1; then + echo "Database deleted successfully." + exit 0 + else + if [ $$i -lt $$MAX_RETRIES ]; then + echo "Database delete failed (likely still has connections). Waiting $$RETRY_DELAY seconds before retry..." + sleep $$RETRY_DELAY + fi + fi + done + + echo "ERROR: Failed to delete database after $$MAX_RETRIES attempts." + exit 1 waitFor: - - TerminateConnections - entrypoint: gcloud + - WaitForProxy volumes: - name: db path: /cloudsql @@ -150,6 +181,7 @@ steps: - DB_PASS=$_DB_PASS - DB_USER=$_DB_USER - RAILS_MASTER_KEY=$_RAILS_MASTER_KEY + - APP_HOST_NAME=$_APP_HOST_NAME - id: Kill_SqlProxy name: gcr.io/cloud-builders/docker entrypoint: sh diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index cc7ce7fdb7e..dbcfff20342 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -5,7 +5,7 @@ ARG VARIANT=3.1-bullseye FROM mcr.microsoft.com/vscode/devcontainers/ruby:${VARIANT} # [Choice] Node.js version: none, lts/*, 16, 14, 12, 10 -ARG NODE_VERSION="lts/*" +ARG NODE_VERSION="22.19.0" RUN if [ "${NODE_VERSION}" != "none" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi # Install OS packages diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index d6a0661769d..00000000000 --- a/.eslintignore +++ /dev/null @@ -1,4 +0,0 @@ -// ESLintの構文エラー回避のため、一時的に追加しています -// ecmaVersion: 2020ではstaticに対応していないため、 -// 別issueでecmaVersion: 2022に対応してもらいます -app/javascript/controllers/report_template_controller.js diff --git a/.eslintrc.json b/.eslintrc.json index 0fe84153f29..57e46729ccb 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -19,7 +19,7 @@ }, "root": true, "parserOptions": { - "ecmaVersion": 2020 + "ecmaVersion": 2022 }, "rules": { "no-unused-vars": [ diff --git a/.gitignore b/.gitignore index d9ceb3871ea..d1aa6aac20c 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,10 @@ storage/ .envrc .env.local /test/reports + +/public/packs +/public/packs-test +/node_modules +/yarn-error.log +yarn-debug.log* +.yarn-integrity diff --git a/.mise.toml b/.mise.toml index ed6604e3b35..bf338e729bd 100644 --- a/.mise.toml +++ b/.mise.toml @@ -1,3 +1,3 @@ [tools] -ruby = "3.1.6" -node = "20.9.0" +ruby = "3.4.3" +node = "22.19.0" diff --git a/.node-version b/.node-version index f3f52b42d3d..e2228113dd0 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -20.9.0 +22.19.0 diff --git a/.nvmrc b/.nvmrc index f3f52b42d3d..e2228113dd0 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -20.9.0 +22.19.0 diff --git a/.rubocop.yml b/.rubocop.yml index b9b31c0fcb3..8c7b8fac89c 100644 --- a/.rubocop.yml +++ b/.rubocop.yml @@ -1,6 +1,8 @@ require: - rubocop-minitest - rubocop-capybara + - rubocop-performance + - rubocop-rails inherit_gem: rubocop-fjord: @@ -19,6 +21,8 @@ AllCops: - config/**/* - config.ru - node_modules/**/* + - db/data/* + - db/data_schema.rb - db/migrate/* - db/schema.rb - storage/**/* diff --git a/.ruby-version b/.ruby-version index 9cec7165ab0..6cb9d3dd0d6 100644 --- a/.ruby-version +++ b/.ruby-version @@ -1 +1 @@ -3.1.6 +3.4.3 diff --git a/.tool-versions b/.tool-versions index 7b9b33cd5b4..234140c7e21 100644 --- a/.tool-versions +++ b/.tool-versions @@ -1,2 +1,2 @@ -ruby 3.1.6 -nodejs 20.9.0 +ruby 3.4.3 +nodejs 22.19.0 diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 00000000000..b190071fc81 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,42 @@ +# Repository Guidelines + +## Project Structure & Module Organization +- `app/` Rails app code: `models/`, `controllers/`, `views/`, `jobs/`, `helpers/`, and frontend under `javascript/` (Shakapacker). +- `config/` environment, routes, and lints (see `.rubocop.yml`, `config/slim_lint.yml`). +- `db/` migrations and schema; `lib/` app-specific utilities; `public/` static assets. +- `test/` Minitest suite: `system/`, `models/`, `controllers/`, fixtures in `test/fixtures/`. +- `bin/` helper scripts; `Procfile.dev` runs Rails and asset dev server. + +## Build, Test, and Development Commands +- Setup: `bin/setup` — install gems, prepare DB, yarn, etc. +- Run (dev): `foreman start -f Procfile.dev` — Rails on `:3000` + Shakapacker. +- Tests (headless): `rails test:all`. +- Tests (browser): `HEADFUL=1 rails test:all`. +- Tests (no parallel): `PARALLEL_WORKERS=1 rails test:all`. +- Lint: `./bin/lint` — RuboCop (auto-correct), Slim-Lint, ESLint/Prettier. +- Profiler: `PROFILE=1 rails server` to enable rack-mini-profiler. + +## Coding Style & Naming Conventions +- Ruby: 2-space indent, snake_case methods, CamelCase classes; enforced by RuboCop (`.rubocop.yml`). +- Views: Slim templates, linted by `config/slim_lint.yml`. +- JS/TS: Code in `app/javascript/`; ESLint + Prettier via `yarn lint` scripts; React 17 and Shakapacker/Webpack 5. +- Files follow Rails conventions (e.g., `app/models/user.rb`, test `test/models/user_test.rb`). + +## Testing Guidelines +- Frameworks: Minitest + Capybara for system tests. +- Structure: place unit/integration tests under matching `test/*` directories; name files `*_test.rb`. +- Run a single test or line: `rails test test/models/user_test.rb:42`. +- Keep tests deterministic; use fixtures in `test/fixtures/`. + +## Commit & Pull Request Guidelines +- Commits: imperative mood and focused scope; reference issues (e.g., "Fix profile validation #123"). +- PRs: clear description, linked issues, screenshots for UI changes, migration notes, and rollback plan if relevant. +- Quality gates: all linters pass (`bin/lint`) and CI (CircleCI) green; add/adjust tests when changing behavior. + +## Security & Configuration Tips +- Never commit secrets; use `.env.local`. Respect `.ruby-version`, `.tool-versions`, and Node versions in `.node-version`/`.nvmrc`. +- Use `bin/setup` for local DB and dependencies; avoid manual tweaks in `config/` without discussion. + +## Agent-Specific Instructions +- Follow these guidelines for any edits. Keep changes minimal, scoped to the task, and update docs/tests when adding commands or changing behavior. + diff --git a/Dockerfile b/Dockerfile index 1843de4b872..5bada408c6e 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,5 @@ -FROM ruby:3.1.6-slim +# Build stage - includes devDependencies for asset compilation +FROM ruby:3.4.3-slim as builder ENV RAILS_ENV production WORKDIR /app @@ -8,32 +9,39 @@ RUN gem update --system RUN printf "install: --no-rdoc --no-ri\nupdate: --no-rdoc --no-ri" > ~/.gemrc RUN gem install --no-document --force bundler -v 2.4.21 -# Install packages -RUN apt-get update -qq && apt-get install -y \ +# Install build dependencies with minimal footprint +RUN apt-get update -qq && apt-get install -y --no-install-recommends \ build-essential \ git \ - nodejs \ postgresql-client \ libpq-dev \ tzdata \ curl \ gnupg2 \ - libyaml-dev + libyaml-dev \ + ca-certificates \ + libvips-dev && \ + rm -rf /var/lib/apt/lists/* + +# Install Node.js 22.x +RUN curl -fsSL https://deb.nodesource.com/setup_22.x | bash - && \ + apt-get update && \ + apt-get install -y --no-install-recommends nodejs && \ + rm -rf /var/lib/apt/lists/* # Install latest yarn RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \ echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \ - apt-get update && apt-get install -y yarn + apt-get update && \ + apt-get install -y --no-install-recommends yarn && \ + rm -rf /var/lib/apt/lists/* # Set timezone RUN ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime -# libvips -RUN apt-get install -y libvips-dev - -# Install npm packages +# Install ALL npm packages (including devDependencies for asset compilation) COPY package.json yarn.lock ./ -RUN yarn install --prod --ignore-engines +RUN yarn install --ignore-engines # Install gems COPY Gemfile Gemfile.lock ./ @@ -42,11 +50,71 @@ RUN bundle install -j4 # Copy application code COPY . ./ -# Compile assets +# Compile assets (now with devDependencies available) ENV RAILS_LOG_TO_STDOUT true -RUN SECRET_KEY_BASE=dummy NODE_OPTIONS=--openssl-legacy-provider bundle exec rails assets:precompile +RUN SECRET_KEY_BASE=dummy bundle exec rails assets:precompile + +# Production stage - minimal runtime image +FROM ruby:3.4.3-slim as production + +ENV RAILS_ENV production +WORKDIR /app + +# Update rubygems +RUN gem update --system +RUN printf "install: --no-rdoc --no-ri\nupdate: --no-rdoc --no-ri" > ~/.gemrc +RUN gem install --no-document --force bundler -v 2.4.21 + +# Install runtime and build dependencies +RUN apt-get update -qq && apt-get install -y --no-install-recommends \ + build-essential \ + postgresql-client \ + libpq-dev \ + libyaml-dev \ + tzdata \ + curl \ + gnupg2 \ + git \ + ca-certificates \ + libvips && \ + rm -rf /var/lib/apt/lists/* + +# Set timezone +RUN ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime + +# Install Node.js 22.x (runtime only) +RUN curl -fsSL https://deb.nodesource.com/setup_22.x | bash - && \ + apt-get update && \ + apt-get install -y --no-install-recommends nodejs && \ + rm -rf /var/lib/apt/lists/* + +# Install yarn for runtime +RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \ + echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \ + apt-get update && \ + apt-get install -y --no-install-recommends yarn && \ + rm -rf /var/lib/apt/lists/* + +# Copy gems configuration +COPY Gemfile Gemfile.lock ./ +RUN bundle install -j4 + +# Install only production npm packages +COPY package.json yarn.lock ./ +RUN yarn install --prod --ignore-engines + +# Copy application code from builder (excluding large directories) +COPY --from=builder /app/app ./app +COPY --from=builder /app/bin ./bin +COPY --from=builder /app/config ./config +COPY --from=builder /app/db ./db +COPY --from=builder /app/lib ./lib +COPY --from=builder /app/public ./public +COPY --from=builder /app/Rakefile ./Rakefile +COPY --from=builder /app/config.ru ./config.ru ENV PORT 3000 +ENV RAILS_LOG_TO_STDOUT true EXPOSE 3000 CMD bin/rails server -p $PORT -e $RAILS_ENV diff --git a/Gemfile b/Gemfile index b6842536d4c..78cb53f5b67 100644 --- a/Gemfile +++ b/Gemfile @@ -3,15 +3,16 @@ source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } -ruby '3.1.6' +ruby '3.4.3' gem 'bootsnap', '>= 1.4.4', require: false gem 'ffi', '1.17.1' gem 'image_processing', '~> 1.12' gem 'jbuilder', '~> 2.7' -gem 'puma', '~> 5.0' -gem 'rails', '~> 6.1.7.10' -gem 'webpacker', '~> 5.0' +gem 'puma', '~> 6.0' +gem 'rails', '7.2.2.2' +gem 'shakapacker', '~> 7.0' +gem 'sprockets-rails', '>= 2.0.0' # not default gem 'abstract_notifier', '~> 0.3.2' @@ -27,12 +28,13 @@ gem 'cocooned' gem 'concurrent-ruby', '1.3.4' gem 'countries', '>= 5.5.0' gem 'country_select' -gem 'data_migrate', '9.2.0' +gem 'csv' +gem 'data_migrate' gem 'diffy' gem 'discord-notifier' gem 'discordrb', '~> 3.5', require: false gem 'doorkeeper' -gem 'good_job', '~> 3.14', github: 'komagata/good_job' +gem 'good_job', '~> 4.5' gem 'google-cloud-storage', '~> 1.25', require: false gem 'holiday_jp' gem 'icalendar', '~> 2.8' @@ -62,9 +64,9 @@ gem 'postmark-rails' gem 'rack-cors', require: 'rack/cors' gem 'rack-user_agent' gem 'rails_autolink' -gem 'rails-i18n', '~> 6.0.0' +gem 'rails-i18n', '~> 7.0.0' gem 'rails-patterns', '~> 0.2' -gem 'ransack', '3.1.0' +gem 'ransack', '~> 4.3' gem 'react-rails' gem 'recaptcha', '~> 5.12' gem 'rollbar' @@ -74,7 +76,7 @@ gem 'rubyzip' gem 'slim-rails' gem 'sorcery', '~> 0.16.2' gem 'sorcery-jwt' -gem 'stringio', '3.0.1.2' +gem 'stringio', '>= 3.1.3' gem 'stripe' gem 'stripe-i18n', git: 'https://github.com/komagata/stripe-i18n', branch: 'update-depencency' gem 'switchlet' @@ -92,8 +94,6 @@ end group :development do gem 'listen', '~> 3.3' - gem 'spring' - gem 'spring-watcher-listen', '~> 2.0.0' gem 'web-console', '>= 4.1.0' # not default @@ -104,7 +104,7 @@ group :development do gem 'rack-mini-profiler', '~> 2.0', require: false gem 'rubocop', require: false gem 'rubocop-capybara', require: false - gem 'rubocop-fjord', '~> 0.3.0', require: false + gem 'rubocop-fjord', '~> 0.4.0', require: false gem 'rubocop-minitest', require: false gem 'rubocop-performance', require: false gem 'rubocop-rails', require: false diff --git a/Gemfile.lock b/Gemfile.lock index de18dcdb5aa..ef9f130267c 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,16 +1,3 @@ -GIT - remote: https://github.com/komagata/good_job.git - revision: 8b8d2702d9ab62588de0e3a3600dfd0e500e3ccd - specs: - good_job (3.14.1) - activejob (>= 6.0.0) - activerecord (>= 6.0.0) - concurrent-ruby (>= 1.0.2) - fugit (>= 1.1) - railties (>= 6.0.0) - thor (>= 0.14.1) - webrick (>= 1.3) - GIT remote: https://github.com/komagata/stripe-i18n revision: 584c711fc66ad71a5293a9dc21d717ec608c4692 @@ -24,45 +11,51 @@ GEM remote: https://rubygems.org/ specs: abstract_notifier (0.3.2) - actioncable (6.1.7.10) - actionpack (= 6.1.7.10) - activesupport (= 6.1.7.10) + actioncable (7.2.2.2) + actionpack (= 7.2.2.2) + activesupport (= 7.2.2.2) nio4r (~> 2.0) websocket-driver (>= 0.6.1) - actionmailbox (6.1.7.10) - actionpack (= 6.1.7.10) - activejob (= 6.1.7.10) - activerecord (= 6.1.7.10) - activestorage (= 6.1.7.10) - activesupport (= 6.1.7.10) - mail (>= 2.7.1) - actionmailer (6.1.7.10) - actionpack (= 6.1.7.10) - actionview (= 6.1.7.10) - activejob (= 6.1.7.10) - activesupport (= 6.1.7.10) - mail (~> 2.5, >= 2.5.4) - rails-dom-testing (~> 2.0) - actionpack (6.1.7.10) - actionview (= 6.1.7.10) - activesupport (= 6.1.7.10) - rack (~> 2.0, >= 2.0.9) + zeitwerk (~> 2.6) + actionmailbox (7.2.2.2) + actionpack (= 7.2.2.2) + activejob (= 7.2.2.2) + activerecord (= 7.2.2.2) + activestorage (= 7.2.2.2) + activesupport (= 7.2.2.2) + mail (>= 2.8.0) + actionmailer (7.2.2.2) + actionpack (= 7.2.2.2) + actionview (= 7.2.2.2) + activejob (= 7.2.2.2) + activesupport (= 7.2.2.2) + mail (>= 2.8.0) + rails-dom-testing (~> 2.2) + actionpack (7.2.2.2) + actionview (= 7.2.2.2) + activesupport (= 7.2.2.2) + nokogiri (>= 1.8.5) + racc + rack (>= 2.2.4, < 3.2) + rack-session (>= 1.0.1) rack-test (>= 0.6.3) - rails-dom-testing (~> 2.0) - rails-html-sanitizer (~> 1.0, >= 1.2.0) - actiontext (6.1.7.10) - actionpack (= 6.1.7.10) - activerecord (= 6.1.7.10) - activestorage (= 6.1.7.10) - activesupport (= 6.1.7.10) + rails-dom-testing (~> 2.2) + rails-html-sanitizer (~> 1.6) + useragent (~> 0.16) + actiontext (7.2.2.2) + actionpack (= 7.2.2.2) + activerecord (= 7.2.2.2) + activestorage (= 7.2.2.2) + activesupport (= 7.2.2.2) + globalid (>= 0.6.0) nokogiri (>= 1.8.5) - actionview (6.1.7.10) - activesupport (= 6.1.7.10) + actionview (7.2.2.2) + activesupport (= 7.2.2.2) builder (~> 3.1) - erubi (~> 1.4) - rails-dom-testing (~> 2.0) - rails-html-sanitizer (~> 1.1, >= 1.2.0) - active_decorator (1.4.1) + erubi (~> 1.11) + rails-dom-testing (~> 2.2) + rails-html-sanitizer (~> 1.6) + active_decorator (1.5.1) activesupport active_delivery (0.4.4) active_flag (2.0.3) @@ -70,41 +63,48 @@ GEM bigdecimal logger mutex_m - active_storage_validations (2.0.2) + active_storage_validations (3.0.2) activejob (>= 6.1.4) activemodel (>= 6.1.4) activestorage (>= 6.1.4) activesupport (>= 6.1.4) marcel (>= 1.0.3) - activejob (6.1.7.10) - activesupport (= 6.1.7.10) + activejob (7.2.2.2) + activesupport (= 7.2.2.2) globalid (>= 0.3.6) - activemodel (6.1.7.10) - activesupport (= 6.1.7.10) - activerecord (6.1.7.10) - activemodel (= 6.1.7.10) - activesupport (= 6.1.7.10) - activestorage (6.1.7.10) - actionpack (= 6.1.7.10) - activejob (= 6.1.7.10) - activerecord (= 6.1.7.10) - activesupport (= 6.1.7.10) + activemodel (7.2.2.2) + activesupport (= 7.2.2.2) + activerecord (7.2.2.2) + activemodel (= 7.2.2.2) + activesupport (= 7.2.2.2) + timeout (>= 0.4.0) + activestorage (7.2.2.2) + actionpack (= 7.2.2.2) + activejob (= 7.2.2.2) + activerecord (= 7.2.2.2) + activesupport (= 7.2.2.2) marcel (~> 1.0) - mini_mime (>= 1.1.0) - activesupport (6.1.7.10) - concurrent-ruby (~> 1.0, >= 1.0.2) + activesupport (7.2.2.2) + base64 + benchmark (>= 0.3) + bigdecimal + concurrent-ruby (~> 1.0, >= 1.3.1) + connection_pool (>= 2.2.5) + drb i18n (>= 1.6, < 2) + logger (>= 1.4.2) minitest (>= 5.1) - tzinfo (~> 2.0) - zeitwerk (~> 2.3) - acts-as-taggable-on (10.0.0) - activerecord (>= 6.1, < 7.2) - acts_as_list (1.2.4) + securerandom (>= 0.3) + tzinfo (~> 2.0, >= 2.0.5) + acts-as-taggable-on (13.0.0) + activerecord (>= 7.1, < 8.2) + zeitwerk (>= 2.4, < 3.0) + acts_as_list (1.2.6) activerecord (>= 6.1) activesupport (>= 6.1) addressable (2.8.7) public_suffix (>= 2.0.2, < 7.0) - any_login (1.6.0) + any_login (1.7.0) rails (>= 6.1) ast (2.4.3) axiom-types (0.1.1) @@ -115,18 +115,18 @@ GEM babel-transpiler (0.7.0) babel-source (>= 4.0, < 6) execjs (~> 2.0) - base64 (0.3.0) + base64 (0.2.0) bcrypt (3.1.20) - benchmark (0.4.0) - bigdecimal (3.1.9) + benchmark (0.5.0) + bigdecimal (3.3.1) bindex (0.8.1) - bootsnap (1.18.4) + bootsnap (1.19.0) msgpack (~> 1.2) builder (3.3.0) - bullet (8.0.1) + bullet (8.1.0) activesupport (>= 3.0.0) uniform_notifier (~> 1.11) - byebug (11.1.3) + byebug (12.0.0) capybara (3.40.0) addressable matrix @@ -138,39 +138,41 @@ GEM xpath (~> 3.2) childprocess (5.1.0) logger (~> 1.5) - cocooned (2.3.0) - rails (>= 6.1, <= 8.0) + cocooned (2.5.0) + rails (>= 7.2, < 8.2) coderay (1.1.3) coercible (1.0.0) descendants_tracker (~> 0.0.1) concurrent-ruby (1.3.4) - connection_pool (2.5.0) - countries (7.1.1) + connection_pool (2.5.5) + countries (8.0.4) unaccent (~> 0.3) - country_select (10.0.1) - countries (> 5.0, < 8.0) - crack (1.0.0) + country_select (11.0.0) + countries (> 6.0, < 9.0) + crack (1.0.1) bigdecimal rexml crass (1.0.6) - data_migrate (9.2.0) + csv (3.3.5) + data_migrate (11.3.1) activerecord (>= 6.1) railties (>= 6.1) - date (3.4.1) + date (3.5.0) declarative (0.0.20) descendants_tracker (0.0.4) thread_safe (~> 0.3, >= 0.3.1) - diffy (3.4.3) + diffy (3.4.4) digest-crc (0.7.0) rake (>= 12.0.0, < 14.0.0) discord-notifier (1.0.3) - discordrb (3.5.0) - discordrb-webhooks (~> 3.5.0) + discordrb (3.6.1) + base64 (~> 0.2.0) + discordrb-webhooks (~> 3.6.1) ffi (>= 1.9.24) opus-ruby rest-client (>= 2.0.0) - websocket-client-simple (>= 0.3.0) - discordrb-webhooks (3.5.0) + websocket-client-simple (>= 0.9.0) + discordrb-webhooks (3.6.1) rest-client (>= 2.0.0) domain_name (0.6.20240107) doorkeeper (5.8.2) @@ -179,95 +181,118 @@ GEM dotenv-rails (3.1.8) dotenv (= 3.1.8) railties (>= 6.1) + drb (2.2.3) + erb (6.0.0) erubi (1.13.1) - et-orbi (1.2.11) + et-orbi (1.4.0) tzinfo event_emitter (0.2.6) event_stream_parser (1.0.0) execjs (2.10.0) - faraday (2.12.2) + faraday (2.14.0) faraday-net_http (>= 2.0, < 3.5) json logger - faraday-multipart (1.1.0) + faraday-follow_redirects (0.4.0) + faraday (>= 1, < 3) + faraday-multipart (1.1.1) multipart-post (~> 2.0) - faraday-net_http (3.4.0) - net-http (>= 0.5.0) - ffi (1.17.1) + faraday-net_http (3.4.2) + net-http (~> 0.5) + ffi (1.17.1-aarch64-linux-gnu) + ffi (1.17.1-aarch64-linux-musl) + ffi (1.17.1-arm-linux-gnu) + ffi (1.17.1-arm-linux-musl) ffi (1.17.1-arm64-darwin) + ffi (1.17.1-x86_64-darwin) ffi (1.17.1-x86_64-linux-gnu) - foreman (0.88.1) - fugit (1.11.1) - et-orbi (~> 1, >= 1.2.11) + ffi (1.17.1-x86_64-linux-musl) + foreman (0.90.0) + thor (~> 1.4) + fugit (1.12.1) + et-orbi (~> 1.4) raabro (~> 1.4) - globalid (1.2.1) + globalid (1.3.0) activesupport (>= 6.1) - google-apis-core (0.16.0) - addressable (~> 2.5, >= 2.5.1) - googleauth (~> 1.9) - httpclient (>= 2.8.3, < 3.a) - mini_mime (~> 1.0) - mutex_m + good_job (4.12.1) + activejob (>= 6.1.0) + activerecord (>= 6.1.0) + concurrent-ruby (>= 1.3.1) + fugit (>= 1.11.0) + railties (>= 6.1.0) + thor (>= 1.0.0) + google-apis-core (1.0.2) + addressable (~> 2.8, >= 2.8.7) + faraday (~> 2.13) + faraday-follow_redirects (~> 0.3) + googleauth (~> 1.14) + mini_mime (~> 1.1) representable (~> 3.0) - retriable (>= 2.0, < 4.a) - google-apis-iamcredentials_v1 (0.22.0) + retriable (~> 3.1) + google-apis-iamcredentials_v1 (0.26.0) google-apis-core (>= 0.15.0, < 2.a) - google-apis-storage_v1 (0.50.0) + google-apis-storage_v1 (0.57.0) google-apis-core (>= 0.15.0, < 2.a) google-cloud-core (1.8.0) google-cloud-env (>= 1.0, < 3.a) google-cloud-errors (~> 1.0) - google-cloud-env (2.2.2) + google-cloud-env (2.3.1) base64 (~> 0.2) faraday (>= 1.0, < 3.a) google-cloud-errors (1.5.0) - google-cloud-storage (1.55.0) + google-cloud-storage (1.57.1) addressable (~> 2.8) digest-crc (~> 0.4) - google-apis-core (~> 0.13) + google-apis-core (>= 0.18, < 2) google-apis-iamcredentials_v1 (~> 0.18) google-apis-storage_v1 (>= 0.42) google-cloud-core (~> 1.6) googleauth (~> 1.9) mini_mime (~> 1.0) - google-logging-utils (0.1.0) - googleauth (1.14.0) + google-logging-utils (0.2.0) + googleauth (1.15.1) faraday (>= 1.0, < 3.a) google-cloud-env (~> 2.2) google-logging-utils (~> 0.1) - jwt (>= 1.4, < 3.0) + jwt (>= 1.4, < 4.0) multi_json (~> 1.11) os (>= 0.9, < 2.0) signet (>= 0.16, < 2.a) - hashdiff (1.2.0) + hashdiff (1.2.1) hashie (5.0.0) holiday_jp (0.8.1) http-accept (1.7.0) - http-cookie (1.0.8) + http-cookie (1.1.0) domain_name (~> 0.5) - httpclient (2.9.0) - mutex_m i18n (1.14.7) concurrent-ruby (~> 1.0) - icalendar (2.10.3) + icalendar (2.12.1) + base64 ice_cube (~> 0.16) + logger ostruct ice_cube (0.17.0) ice_nine (0.11.2) image_processing (1.14.0) mini_magick (>= 4.9.5, < 6) ruby-vips (>= 2.0.17, < 3) - interactor (3.1.2) - jbuilder (2.13.0) - actionview (>= 5.0.0) - activesupport (>= 5.0.0) + interactor (3.2.0) + ostruct + io-console (0.8.1) + irb (1.15.3) + pp (>= 0.6.0) + rdoc (>= 4.0.0) + reline (>= 0.4.2) + jbuilder (2.14.1) + actionview (>= 7.0.0) + activesupport (>= 7.0.0) jp_prefecture (1.1.2) - jquery-rails (4.6.0) + jquery-rails (4.6.1) rails-dom-testing (>= 1, < 3) railties (>= 4.2.0) thor (>= 0.14, < 2.0) - json (2.10.2) - jwt (2.10.1) + json (2.16.0) + jwt (2.10.2) base64 kaminari (1.2.2) activesupport (>= 4.1.0) @@ -285,7 +310,7 @@ GEM rexml (>= 3.3.9) kramdown-parser-gfm (1.1.0) kramdown (~> 2.0) - language_server-protocol (3.17.0.4) + language_server-protocol (3.17.0.5) launchy (3.1.1) addressable (~> 2.8) childprocess (~> 5.0) @@ -300,47 +325,46 @@ GEM listen (3.9.0) rb-fsevent (~> 0.10, >= 0.10.3) rb-inotify (~> 0.9, >= 0.9.10) - logger (1.6.6) + logger (1.7.0) loofah (2.24.1) crass (~> 1.0.2) nokogiri (>= 1.12.0) - mail (2.8.1) + mail (2.9.0) + logger mini_mime (>= 0.1.1) net-imap net-pop net-smtp - marcel (1.0.4) - matrix (0.4.2) + marcel (1.1.0) + matrix (0.4.3) mentionable (0.3.0) activerecord railties - meta-tags (2.22.1) - actionpack (>= 6.0.0, < 8.1) + meta-tags (2.22.2) + actionpack (>= 6.0.0, < 8.2) method_source (1.1.0) - mime-types (3.6.1) + mime-types (3.7.0) logger - mime-types-data (~> 3.2015) - mime-types-data (3.2025.0318) - mini_magick (5.2.0) - benchmark + mime-types-data (~> 3.2025, >= 3.2025.0507) + mime-types-data (3.2025.0924) + mini_magick (5.3.1) logger mini_mime (1.1.5) - mini_portile2 (2.8.9) - minitest (5.25.5) + minitest (5.26.2) minitest-ci (3.4.0) minitest (>= 5.0.6) minitest-retry (0.2.5) minitest (>= 5.0) minitest-stub_any_instance (1.0.3) msgpack (1.8.0) - multi_json (1.15.0) - multi_xml (0.7.1) + multi_json (1.17.0) + multi_xml (0.7.2) bigdecimal (~> 3.1) multipart-post (2.4.1) mutex_m (0.1.1) - net-http (0.6.0) - uri - net-imap (0.5.9) + net-http (0.8.0) + uri (>= 0.11.1) + net-imap (0.5.12) date net-protocol net-pop (0.1.2) @@ -351,29 +375,41 @@ GEM net-protocol netrc (0.11.0) newspaper (0.2.0) - nio4r (2.7.4) - nokogiri (1.18.9) - mini_portile2 (~> 2.8.2) + nio4r (2.7.5) + nokogiri (1.18.10-aarch64-linux-gnu) + racc (~> 1.4) + nokogiri (1.18.10-aarch64-linux-musl) + racc (~> 1.4) + nokogiri (1.18.10-arm-linux-gnu) racc (~> 1.4) - nokogiri (1.18.9-arm64-darwin) + nokogiri (1.18.10-arm-linux-musl) racc (~> 1.4) - nokogiri (1.18.9-x86_64-linux-gnu) + nokogiri (1.18.10-arm64-darwin) racc (~> 1.4) - oauth (1.1.0) - oauth-tty (~> 1.0, >= 1.0.1) + nokogiri (1.18.10-x86_64-darwin) + racc (~> 1.4) + nokogiri (1.18.10-x86_64-linux-gnu) + racc (~> 1.4) + nokogiri (1.18.10-x86_64-linux-musl) + racc (~> 1.4) + oauth (1.1.3) + base64 (~> 0.1) + oauth-tty (~> 1.0, >= 1.0.6) snaky_hash (~> 2.0) - version_gem (~> 1.1) - oauth-tty (1.0.5) - version_gem (~> 1.1, >= 1.1.1) - oauth2 (2.0.9) - faraday (>= 0.17.3, < 3.0) - jwt (>= 1.0, < 3.0) + version_gem (~> 1.1, >= 1.1.9) + oauth-tty (1.0.6) + version_gem (~> 1.1, >= 1.1.9) + oauth2 (2.0.18) + faraday (>= 0.17.3, < 4.0) + jwt (>= 1.0, < 4.0) + logger (~> 1.2) multi_xml (~> 0.5) rack (>= 1.2, < 4) - snaky_hash (~> 2.0) - version_gem (~> 1.1) - omniauth (2.1.3) + snaky_hash (~> 2.0, >= 2.0.3) + version_gem (~> 1.1, >= 1.1.9) + omniauth (2.1.4) hashie (>= 3.4.6) + logger rack (>= 2.2.3) rack-protection omniauth-discord (1.2.0) @@ -393,8 +429,9 @@ GEM opus-ruby (1.0.1) ffi os (1.1.4) - ostruct (0.6.1) - parallel (1.26.3) + ostruct (0.6.3) + package_json (0.2.0) + parallel (1.27.0) parser (3.2.2.4) ast (~> 2.4.1) racc @@ -404,49 +441,61 @@ GEM postmark-rails (0.22.1) actionmailer (>= 3.0.0) postmark (>= 1.21.3, < 2.0) - pry (0.14.2) + pp (0.6.3) + prettyprint + prettyprint (0.2.0) + pry (0.15.2) coderay (~> 1.1) method_source (~> 1.0) - pry-byebug (3.10.1) - byebug (~> 11.0) - pry (>= 0.13, < 0.15) - public_suffix (6.0.1) - puma (5.6.9) + pry-byebug (3.11.0) + byebug (~> 12.0) + pry (>= 0.13, < 0.16) + psych (5.2.6) + date + stringio + public_suffix (6.0.2) + puma (6.6.1) nio4r (~> 2.0) raabro (1.4.0) racc (1.8.1) - rack (2.2.18) - rack-cors (2.0.2) - rack (>= 2.0.0) - rack-dev-mark (0.8.0) + rack (3.1.19) + rack-cors (3.0.0) + logger + rack (>= 3.0.14) + rack-dev-mark (0.8.1) rack (>= 1.1, < 4.0) rack-mini-profiler (2.3.4) rack (>= 1.2.0) - rack-protection (3.2.0) + rack-protection (4.2.1) base64 (>= 0.1.0) - rack (~> 2.2, >= 2.2.4) + logger (>= 1.6.0) + rack (>= 3.0.0, < 4) rack-proxy (0.7.7) rack + rack-session (2.1.1) + base64 (>= 0.1.0) + rack (>= 3.0.0) rack-test (2.2.0) rack (>= 1.3) - rack-user_agent (0.5.3) + rack-user_agent (0.6.0) rack (>= 1.5) woothee (>= 1.0.0) - rails (6.1.7.10) - actioncable (= 6.1.7.10) - actionmailbox (= 6.1.7.10) - actionmailer (= 6.1.7.10) - actionpack (= 6.1.7.10) - actiontext (= 6.1.7.10) - actionview (= 6.1.7.10) - activejob (= 6.1.7.10) - activemodel (= 6.1.7.10) - activerecord (= 6.1.7.10) - activestorage (= 6.1.7.10) - activesupport (= 6.1.7.10) + rackup (2.2.1) + rack (>= 3) + rails (7.2.2.2) + actioncable (= 7.2.2.2) + actionmailbox (= 7.2.2.2) + actionmailer (= 7.2.2.2) + actionpack (= 7.2.2.2) + actiontext (= 7.2.2.2) + actionview (= 7.2.2.2) + activejob (= 7.2.2.2) + activemodel (= 7.2.2.2) + activerecord (= 7.2.2.2) + activestorage (= 7.2.2.2) + activesupport (= 7.2.2.2) bundler (>= 1.15.0) - railties (= 6.1.7.10) - sprockets-rails (>= 2.0.0) + railties (= 7.2.2.2) rails-dom-testing (2.3.0) activesupport (>= 5.0.0) minitest @@ -454,9 +503,9 @@ GEM rails-html-sanitizer (1.6.2) loofah (~> 2.21) nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0) - rails-i18n (6.0.0) + rails-i18n (7.0.10) i18n (>= 0.7, < 2) - railties (>= 6.0.0, < 7) + railties (>= 6.0.0, < 8) rails-patterns (0.11.0) actionpack (>= 4.2.6) activerecord (>= 4.2.6) @@ -466,29 +515,37 @@ GEM actionview (> 3.1) activesupport (> 3.1) railties (> 3.1) - railties (6.1.7.10) - actionpack (= 6.1.7.10) - activesupport (= 6.1.7.10) - method_source + railties (7.2.2.2) + actionpack (= 7.2.2.2) + activesupport (= 7.2.2.2) + irb (~> 1.13) + rackup (>= 1.0.0) rake (>= 12.2) - thor (~> 1.0) + thor (~> 1.0, >= 1.2.2) + zeitwerk (~> 2.6) rainbow (3.1.1) - rake (13.3.0) - ransack (3.1.0) - activerecord (>= 6.0.4) - activesupport (>= 6.0.4) + rake (13.3.1) + ransack (4.4.1) + activerecord (>= 7.2) + activesupport (>= 7.2) i18n rb-fsevent (0.11.2) rb-inotify (0.11.1) ffi (~> 1.0) + rdoc (6.16.1) + erb + psych (>= 4.0.0) + tsort react-rails (3.2.1) babel-transpiler (>= 0.7.0) connection_pool execjs railties (>= 3.2) tilt - recaptcha (5.19.0) - regexp_parser (2.10.0) + recaptcha (5.21.1) + regexp_parser (2.11.3) + reline (0.6.3) + io-console (~> 0.5) representable (3.2.0) declarative (< 0.1.0) trailblazer-option (>= 0.1.1, < 0.2.0) @@ -499,8 +556,8 @@ GEM mime-types (>= 1.16, < 4.0) netrc (~> 0.8) retriable (3.1.2) - rexml (3.4.1) - rollbar (3.6.1) + rexml (3.4.4) + rollbar (3.7.0) rss (0.3.1) rexml rubocop (1.59.0) @@ -518,7 +575,7 @@ GEM parser (>= 3.2.1.0) rubocop-capybara (2.21.0) rubocop (~> 1.41) - rubocop-fjord (0.3.0) + rubocop-fjord (0.4.0) rubocop (>= 1.0) rubocop-performance rubocop-minitest (0.34.5) @@ -532,26 +589,33 @@ GEM rack (>= 1.1) rubocop (>= 1.33.0, < 2.0) rubocop-ast (>= 1.30.0, < 2.0) - ruby-openai (8.0.0) + ruby-openai (8.3.0) event_stream_parser (>= 0.3.0, < 2.0.0) faraday (>= 1) faraday-multipart (>= 1) ruby-progressbar (1.13.0) - ruby-vips (2.2.3) + ruby-vips (2.2.5) ffi (~> 1.12) logger ruby2_keywords (0.0.5) rubyzip (2.4.1) + securerandom (0.4.1) selenium-webdriver (4.17.0) base64 (~> 0.2) rexml (~> 3.2, >= 3.2.5) rubyzip (>= 1.2.2, < 3.0) websocket (~> 1.0) semantic_range (3.1.0) - signet (0.19.0) + shakapacker (7.2.3) + activesupport (>= 5.2) + package_json + rack-proxy (>= 0.6.1) + railties (>= 5.2) + semantic_range (>= 2.3.0) + signet (0.21.0) addressable (~> 2.8) faraday (>= 0.17.5, < 3.a) - jwt (>= 1.5, < 3.0) + jwt (>= 1.5, < 4.0) multi_json (~> 1.10) slim (5.2.1) temple (~> 0.10.0) @@ -560,13 +624,13 @@ GEM actionpack (>= 3.1) railties (>= 3.1) slim (>= 3.0, < 6.0, != 5.0.0) - slim_lint (0.32.2) + slim_lint (0.33.0) rexml (~> 3.2) rubocop (>= 1.0, < 2.0) slim (>= 3.0, < 6.0) - snaky_hash (2.0.1) - hashie - version_gem (~> 1.1, >= 1.1.1) + snaky_hash (2.0.3) + hashie (>= 0.1.0, < 6) + version_gem (>= 1.1.8, < 3) sorcery (0.16.5) bcrypt (~> 3.1) oauth (>= 0.6) @@ -574,10 +638,6 @@ GEM sorcery-jwt (0.1.13) jwt (>= 1.0, < 3.0) sorcery (>= 0.13, < 0.17) - spring (2.1.1) - spring-watcher-listen (2.0.1) - listen (>= 2.7, < 4.0) - spring (>= 1.2, < 3.0) sprockets (4.2.2) concurrent-ruby (~> 1.0) logger @@ -586,32 +646,34 @@ GEM actionpack (>= 6.1) activesupport (>= 6.1) sprockets (>= 3.0.0) - stringio (3.0.1.2) - stripe (13.5.0) + stringio (3.1.9) + stripe (18.0.0) switchlet (0.3.1) rails (>= 6.1) - temple (0.10.3) + temple (0.10.4) thor (1.4.0) thread_safe (0.3.6) - tilt (2.6.0) - timeout (0.4.3) + tilt (2.6.1) + timeout (0.4.4) traceroute (0.8.1) rails (>= 3.0.0) trailblazer-option (0.1.2) + tsort (0.2.0) tzinfo (2.0.6) concurrent-ruby (~> 1.0) uber (0.1.0) unaccent (0.4.0) unicode-display_width (2.6.0) - uniform_notifier (1.16.0) - uri (1.0.3) + uniform_notifier (1.18.0) + uri (1.1.1) + useragent (0.16.11) vcr (6.3.1) base64 - version_gem (1.1.6) - view_component (3.21.0) - activesupport (>= 5.2.0, < 8.1) - concurrent-ruby (~> 1.0) - method_source (~> 1.0) + version_gem (1.1.9) + view_component (4.1.1) + actionview (>= 7.1.0, < 8.2) + activesupport (>= 7.1.0, < 8.2) + concurrent-ruby (~> 1) view_source_map (0.3.0) rails (>= 5) virtus (2.0.0) @@ -623,16 +685,10 @@ GEM activemodel (>= 6.0.0) bindex (>= 0.4.0) railties (>= 6.0.0) - webmock (3.25.1) + webmock (3.26.1) addressable (>= 2.8.0) crack (>= 0.3.2) hashdiff (>= 0.4.0, < 2.0.0) - webpacker (5.4.4) - activesupport (>= 5.2) - rack-proxy (>= 0.6.1) - railties (>= 5.2) - semantic_range (>= 2.3.0) - webrick (1.9.1) websocket (1.2.11) websocket-client-simple (0.9.0) base64 @@ -646,13 +702,17 @@ GEM woothee (1.13.0) xpath (3.2.0) nokogiri (~> 1.8) - zeitwerk (2.6.18) + zeitwerk (2.7.3) PLATFORMS - arm64-darwin-22 - arm64-darwin-24 - ruby - x86_64-linux + aarch64-linux-gnu + aarch64-linux-musl + arm-linux-gnu + arm-linux-musl + arm64-darwin + x86_64-darwin + x86_64-linux-gnu + x86_64-linux-musl DEPENDENCIES abstract_notifier (~> 0.3.2) @@ -672,7 +732,8 @@ DEPENDENCIES concurrent-ruby (= 1.3.4) countries (>= 5.5.0) country_select - data_migrate (= 9.2.0) + csv + data_migrate diffy discord-notifier discordrb (~> 3.5) @@ -680,7 +741,7 @@ DEPENDENCIES dotenv-rails ffi (= 1.17.1) foreman - good_job (~> 3.14)! + good_job (~> 4.5) google-cloud-storage (~> 1.25) holiday_jp icalendar (~> 2.8) @@ -715,36 +776,36 @@ DEPENDENCIES pg (~> 1.4.6) postmark-rails pry-byebug - puma (~> 5.0) + puma (~> 6.0) rack-cors rack-dev-mark rack-mini-profiler (~> 2.0) rack-user_agent - rails (~> 6.1.7.10) - rails-i18n (~> 6.0.0) + rails (= 7.2.2.2) + rails-i18n (~> 7.0.0) rails-patterns (~> 0.2) rails_autolink - ransack (= 3.1.0) + ransack (~> 4.3) react-rails recaptcha (~> 5.12) rollbar rss rubocop rubocop-capybara - rubocop-fjord (~> 0.3.0) + rubocop-fjord (~> 0.4.0) rubocop-minitest rubocop-performance rubocop-rails ruby-openai rubyzip selenium-webdriver (~> 4.17.0) + shakapacker (~> 7.0) slim-rails slim_lint sorcery (~> 0.16.2) sorcery-jwt - spring - spring-watcher-listen (~> 2.0.0) - stringio (= 3.0.1.2) + sprockets-rails (>= 2.0.0) + stringio (>= 3.1.3) stripe stripe-i18n! switchlet @@ -755,10 +816,9 @@ DEPENDENCIES view_source_map web-console (>= 4.1.0) webmock - webpacker (~> 5.0) RUBY VERSION - ruby 3.1.6p260 + ruby 3.4.3p32 BUNDLED WITH - 2.6.5 + 2.7.2 diff --git a/Procfile.dev b/Procfile.dev index 90246696f4a..65d9e59fea3 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,2 +1,2 @@ rails: rails s -b 0.0.0.0 -p 3000 -webpacker: ./bin/webpack-dev-server +webpacker: ./bin/shakapacker-dev-server diff --git a/app/components/skipped_practice_component.html.slim b/app/components/skipped_practice_component.html.slim index 75dd2d0192e..1f5b1bb9ebd 100644 --- a/app/components/skipped_practice_component.html.slim +++ b/app/components/skipped_practice_component.html.slim @@ -1,8 +1,8 @@ - @user_course_practice.categories_for_skip_practice.each do |category| .skip-practices - input.a-toggle-checkbox(type='checkbox' id="category-#{category}") + input.a-toggle-checkbox(type='checkbox' id="category-#{category.id}") .skip-practices__inner - label.skip-practices__header(for='category-#{category}') + label.skip-practices__header(for="category-#{category.id}") .skip-practices__start .skip-practices__category-name | #{category.name} @@ -12,7 +12,7 @@ .skip-practices__category-angle-icon i.fa-regular.fa-angle-down .skip-practices__body - = @f.collection_check_boxes :practice_ids, category.practices , :id, :title, include_hidden: false, class: 'label-checkbox' do |b| + = @f.collection_check_boxes :practice_ids, category.practices, :id, :title, include_hidden: false, class: 'label-checkbox' do |b| .checkboxes .checkboxes__items .checkboxes__item.is-sm diff --git a/app/components/study_streak/study_streak_tracker_component.html.slim b/app/components/study_streak/study_streak_tracker_component.html.slim new file mode 100644 index 00000000000..075abd116a3 --- /dev/null +++ b/app/components/study_streak/study_streak_tracker_component.html.slim @@ -0,0 +1,31 @@ +.a-card.streak-card + .card-header.is-sm + h2.card-header__title + | 学習連続記録 + hr.a-border-tint + .card-body + .streak-container + .streak-item + .streak-item__content + .streak-item__label + | 現在の連続記録 + .streak-item__days + .streak-item__number + = current_streak_days + .streak-item__unit + | 日 + - if current_streak? + .streak-item__period + = current_streak_period + .streak-item + .streak-item__content + .streak-item__label + | 連続最高記録 + .streak-item__days + .streak-item__number + = longest_streak_days + .streak-item__unit + | 日 + - if longest_streak? + .streak-item__period + = longest_streak_period diff --git a/app/components/study_streak/study_streak_tracker_component.rb b/app/components/study_streak/study_streak_tracker_component.rb new file mode 100644 index 00000000000..28a5230d9c4 --- /dev/null +++ b/app/components/study_streak/study_streak_tracker_component.rb @@ -0,0 +1,52 @@ +# frozen_string_literal: true + +class StudyStreak::StudyStreakTrackerComponent < ViewComponent::Base + def initialize(study_streak:) + @study_streak = study_streak + end + + def current_streak? + @study_streak.current_days.to_i.positive? + end + + def longest_streak? + @study_streak.longest_days.to_i.positive? + end + + def current_streak_days + @study_streak.current_days.to_i + end + + def longest_streak_days + @study_streak.longest_days.to_i + end + + def current_streak_period + format_period( + days: @study_streak.current_days, + start_on: @study_streak.current_start_on, + end_on: @study_streak.current_end_on + ) + end + + def longest_streak_period + format_period( + days: @study_streak.longest_days, + start_on: @study_streak.longest_start_on, + end_on: @study_streak.longest_end_on + ) + end + + private + + def format_period(days:, start_on:, end_on:) + return '' if days.to_i.zero? || start_on.blank? || end_on.blank? + + format = if start_on.year == end_on.year && start_on.year == Time.zone.today.year + :sm + else + :short + end + "#{I18n.l(start_on, format:)} 〜 #{I18n.l(end_on, format:)}" + end +end diff --git a/app/controllers/admin/home_controller.rb b/app/controllers/admin/home_controller.rb index 3579f59937a..a1c1ceafcdf 100644 --- a/app/controllers/admin/home_controller.rb +++ b/app/controllers/admin/home_controller.rb @@ -2,6 +2,4 @@ class Admin::HomeController < AdminController def index; end - - def test; end end diff --git a/app/controllers/api/checks_controller.rb b/app/controllers/api/checks_controller.rb index 08450480392..8620b6efebd 100644 --- a/app/controllers/api/checks_controller.rb +++ b/app/controllers/api/checks_controller.rb @@ -11,22 +11,30 @@ def index def create if checkable.checks.empty? - @check = Check.create!( - user: current_user, - checkable: - ) - ActiveSupport::Notifications.instrument('check.create', check: @check) - head :created + begin + Check.transaction do + @check = Check.create!(user: current_user, checkable:) + ActiveSupport::Notifications.instrument('check.create', check: @check) + end + head :created + rescue StandardError => e + Rails.logger.error("[API::ChecksController#create] チェック作成でエラー: #{e.message}") + render json: { message: 'エラーが発生しました。' }, status: :internal_server_error + end else render json: { message: "この#{checkable.class.model_name.human}は確認済です。" }, status: :unprocessable_entity end end def destroy - @check = Check.find(params[:id]).destroy - ActiveSupport::Notifications.instrument('check.cancel', check: @check) - + Check.transaction do + @check = Check.find(params[:id]).destroy! + ActiveSupport::Notifications.instrument('check.cancel', check: @check) + end head :no_content + rescue StandardError => e + Rails.logger.error("[API::ChecksController#destroy] チェック削除でエラー: #{e.message}") + render json: { message: 'エラーが発生しました。' }, status: :internal_server_error end private diff --git a/app/controllers/api/notifications_controller.rb b/app/controllers/api/notifications_controller.rb index f09a1d21139..65418f437a4 100644 --- a/app/controllers/api/notifications_controller.rb +++ b/app/controllers/api/notifications_controller.rb @@ -4,16 +4,8 @@ class API::NotificationsController < API::BaseController def index target = params[:target].presence&.to_sym status = params[:status] - latest_notifications = current_user.notifications - .by_target(target) - .by_read_status(status) - .latest_of_each_link - # latest_notifications のクエリで指定している ORDER BY の順序を他と混ぜないようにするため、 - # from を使ってサブクエリとした - @notifications = Notification.with_avatar - .from(latest_notifications, :notifications) - .order(created_at: :desc) + @notifications = UserNotificationsQuery.new(user: current_user, target:, status:).call page = params[:page] return @notifications unless page diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 8fef365f37e..53fef684a98 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -1,6 +1,7 @@ # frozen_string_literal: true class ApplicationController < ActionController::Base + include ActiveStorage::SetCurrent include Authentication include TestAuthentication if Rails.env.test? include PolicyHelper @@ -11,7 +12,6 @@ class ApplicationController < ActionController::Base before_action :test_login, if: :test? before_action :init_user before_action :allow_cross_domain_access - before_action :set_host_for_disk_storage before_action :require_active_user_login before_action :set_current_user_practice @@ -38,12 +38,6 @@ def set_available_emojis @available_emojis = Reaction.emojis.map { |key, value| { kind: key, value: } } end - def set_host_for_disk_storage - return unless %i[local test].include? Rails.application.config.active_storage.service - - ActiveStorage::Current.host = request.base_url - end - def require_card redirect_to root_path, notice: 'カード登録が必要です。' unless current_user&.card? end diff --git a/app/controllers/checks_controller.rb b/app/controllers/checks_controller.rb index d290d19d507..425706e42ad 100644 --- a/app/controllers/checks_controller.rb +++ b/app/controllers/checks_controller.rb @@ -14,15 +14,15 @@ def create @check = @checkable.checks.build(user: current_user) - if @check.save - Newspaper.publish(:check_create, { check: @check }) - if @checkable.is_a?(Product) - @checkable.change_learning_status(:complete) - redirect_back(fallback_location: @checkable, notice: '提出物を合格にしました。') - else - redirect_back(fallback_location: @checkable, notice: '日報を確認済みにしました。') + begin + Check.transaction do + @check.save! + ActiveSupport::Notifications.instrument('check.create', check: @check) end - else + notice = @checkable.is_a?(Product) ? '提出物を合格にしました。' : '日報を確認済みにしました。' + redirect_back(fallback_location: @checkable, notice:) + rescue StandardError => e + Rails.logger.error("[ChecksController#create] チェック作成でエラー: #{e.message}") redirect_back(fallback_location: @checkable, alert: 'エラーが発生しました。') end end @@ -31,10 +31,16 @@ def destroy @check = Check.find(params[:id]) @checkable = @check.checkable - @check.destroy - Newspaper.publish(:check_cancel, { check: @check }) - @checkable.change_learning_status(:submitted) if @checkable.is_a?(Product) - redirect_back(fallback_location: @checkable) + begin + Check.transaction do + @check.destroy! + ActiveSupport::Notifications.instrument('check.cancel', check: @check) + end + redirect_back(fallback_location: @checkable) + rescue StandardError => e + Rails.logger.error("[ChecksController#destroy] チェック削除でエラー: #{e.message}") + redirect_back(fallback_location: @checkable, alert: 'エラーが発生しました。') + end end private diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb index ffb4743b7d4..a506ca6b1ad 100644 --- a/app/controllers/home_controller.rb +++ b/app/controllers/home_controller.rb @@ -20,10 +20,6 @@ def index def pricing; end - def test - render :test, layout: false - end - private def set_required_fields @@ -54,6 +50,7 @@ def display_dashboard @target_end_date = GrassDateParameter.new(params[:end_date]).target_end_date @times = Grass.times(current_user, @target_end_date) @users_for_time_slot = User.currently_learning_except(current_user) + @study_streak = StudyStreak.new(current_user.reports_with_learning_times, include_wip: false) end def display_events_on_dashboard diff --git a/app/controllers/stripe/webhooks_controller.rb b/app/controllers/stripe/webhooks_controller.rb index 035fb898e57..f0e271dd81f 100644 --- a/app/controllers/stripe/webhooks_controller.rb +++ b/app/controllers/stripe/webhooks_controller.rb @@ -1,7 +1,7 @@ # frozen_string_literal: true class Stripe::WebhooksController < ApplicationController - SECRET = Rails.application.secrets['stripe'][:endpoint_secret] + SECRET = Rails.application.config_for(:secrets)['stripe'][:endpoint_secret] ERROR_EVENTS = %w[ payment_intent.payment_failed payment_intent.requires_payment_method diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb index d6967744d7d..dfa7ff032f0 100644 --- a/app/controllers/users_controller.rb +++ b/app/controllers/users_controller.rb @@ -45,6 +45,9 @@ def show @target_end_date = GrassDateParameter.new(params[:end_date]).target_end_date @times = Grass.times(@user, @target_end_date) + reports = @user.reports_with_learning_times + @study_streak = StudyStreak.new(reports, include_wip: false) + if logged_in? render :show else diff --git a/app/decorators/user_decorator.rb b/app/decorators/user_decorator.rb index ba588c7dece..3f119478219 100644 --- a/app/decorators/user_decorator.rb +++ b/app/decorators/user_decorator.rb @@ -61,7 +61,7 @@ def subdivisions_of_country return if country_code.blank? country = ISO3166::Country[country_code] - country.subdivision_names_with_codes(I18n.locale.to_s) + country.subdivision_names_with_codes(I18n.locale.to_sym) end def address diff --git a/app/helpers/page_tabs/dashboard_helper.rb b/app/helpers/page_tabs/dashboard_helper.rb index 0d697a982ca..646e0590c9c 100644 --- a/app/helpers/page_tabs/dashboard_helper.rb +++ b/app/helpers/page_tabs/dashboard_helper.rb @@ -5,6 +5,11 @@ module DashboardHelper def dashboard_page_tabs(active_tab:) tabs = [] tabs << { name: 'ダッシュボード', link: '/' } + if Rails.env.in? %w[development test] + tabs << { name: '自分の分報', + link: "#{user_micro_reports_path(current_user, page: current_user.latest_micro_report_page)}#latest-micro-report", + count: current_user.micro_reports.length } + end tabs << { name: '自分の日報', link: current_user_reports_path, count: current_user.reports.length } tabs << { name: '自分の提出物', link: current_user_products_path, count: current_user.products.length } tabs << { name: 'ブックマーク', link: current_user_bookmarks_path, count: current_user.bookmarks.length } diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb index 733731e4ea6..377afc6aced 100644 --- a/app/helpers/users_helper.rb +++ b/app/helpers/users_helper.rb @@ -68,7 +68,7 @@ def desc_paragraphs(user) def all_countries_with_subdivisions ISO3166::Country.all - .map { |country| [country.alpha2, country.subdivision_names_with_codes(I18n.locale.to_s)] } + .map { |country| [country.alpha2, country.subdivision_names_with_codes(I18n.locale.to_sym)] } .to_h .to_json end diff --git a/app/assets/images/background/people.png b/app/javascript/assets/images/background/people.png similarity index 100% rename from app/assets/images/background/people.png rename to app/javascript/assets/images/background/people.png diff --git a/app/javascript/card.js b/app/javascript/card.js index b46d02a9bb6..093ee25075c 100644 --- a/app/javascript/card.js +++ b/app/javascript/card.js @@ -43,7 +43,7 @@ document.addEventListener('DOMContentLoaded', () => { } // Create an instance of the card Element. - const card = elements.create('card', { style: style, hidePostalCode: true }) + const card = elements.create('card', { style, hidePostalCode: true }) if (!userRole || checkedCreditCardCheckBox) { card.mount('#card-element') diff --git a/app/javascript/controllers/report_template_controller.js b/app/javascript/controllers/report_template_controller.js index 352b948efa1..804b13b5cff 100644 --- a/app/javascript/controllers/report_template_controller.js +++ b/app/javascript/controllers/report_template_controller.js @@ -14,6 +14,7 @@ export default class extends Controller { 'templateContent', 'previewContent' ] + static values = { registeredTemplate: String, registeredTemplateId: Number, diff --git a/app/javascript/fileinput.js b/app/javascript/fileinput.js index aa49d627882..d38888cc0f3 100644 --- a/app/javascript/fileinput.js +++ b/app/javascript/fileinput.js @@ -29,6 +29,14 @@ function initializeFileInput(target) { if (!inputs) return null inputs.forEach((input) => { + const dropArea = input.closest('.js-file-input') + dropArea.addEventListener('dragover', (e) => e.preventDefault()) + dropArea.addEventListener('drop', (e) => { + e.preventDefault() + input.files = e.dataTransfer.files + input.dispatchEvent(new Event('change')) + }) + input.addEventListener('change', async (e) => { let file = e.target.files[0] diff --git a/app/javascript/initializeAnswer.js b/app/javascript/initializeAnswer.js index eff9d9908a2..b87a1c607cd 100644 --- a/app/javascript/initializeAnswer.js +++ b/app/javascript/initializeAnswer.js @@ -172,7 +172,7 @@ export default function initializeAnswer(answer) { } const params = { id: answerId, - answer: { description: description } + answer: { description } } fetch(`/api/answers/${answerId}`, { method: 'PUT', diff --git a/app/javascript/initializeComment.js b/app/javascript/initializeComment.js index 68a14f5f6dc..8b73c1f859b 100644 --- a/app/javascript/initializeComment.js +++ b/app/javascript/initializeComment.js @@ -135,7 +135,7 @@ function updateComment(commentId, description) { } const params = { id: commentId, - comment: { description: description } + comment: { description } } fetch(`/api/comments/${commentId}`, { method: 'PUT', diff --git a/app/javascript/markdown-it-headings.js b/app/javascript/markdown-it-headings.js index 59a26abf654..f0391207116 100644 --- a/app/javascript/markdown-it-headings.js +++ b/app/javascript/markdown-it-headings.js @@ -9,5 +9,5 @@ const options = { } export default function (md) { - return plugin(md, options) + return md.use(plugin, options) } diff --git a/app/javascript/micro-reports-edit.js b/app/javascript/micro-reports-edit.js index e3f7caa2a98..86fc3d7a5b7 100644 --- a/app/javascript/micro-reports-edit.js +++ b/app/javascript/micro-reports-edit.js @@ -102,7 +102,7 @@ document.addEventListener('DOMContentLoaded', () => { } const params = { id: microReportId, - micro_report: { content: content } + micro_report: { content } } const url = `/api/micro_reports/${microReportId}` return Bootcamp.patch(url, params).catch((error) => { diff --git a/app/javascript/new-answer.js b/app/javascript/new-answer.js index 22b53199945..6476b7fa54e 100644 --- a/app/javascript/new-answer.js +++ b/app/javascript/new-answer.js @@ -81,7 +81,7 @@ async function createAnswer(description, questionId) { const params = { question_id: questionId, answer: { - description: description + description } } try { diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 7dba229e934..42c89b21ff5 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -86,7 +86,7 @@ import '../tag.js' import '../tag_edit.js' import '../bookmark-button.js' -import '../stylesheets/application' +import '../stylesheets/application.sass' // Support component names relative to this directory: const componentRequireContext = require.context('components', true) diff --git a/app/javascript/packs/lp.js b/app/javascript/packs/lp.js index 82a3a8d860d..13fd282bc5f 100644 --- a/app/javascript/packs/lp.js +++ b/app/javascript/packs/lp.js @@ -7,7 +7,6 @@ // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate // layout file, like app/views/layouts/application.html.erb -import '../stylesheets/lp' +import '../stylesheets/lp.sass' // Import images to ensure they are copied by webpack -import '../../assets/images/background/people.png' diff --git a/app/javascript/packs/not-logged-in.js b/app/javascript/packs/not-logged-in.js index af9383650bb..36e035cc37d 100644 --- a/app/javascript/packs/not-logged-in.js +++ b/app/javascript/packs/not-logged-in.js @@ -7,4 +7,4 @@ // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate // layout file, like app/views/layouts/application.html.erb -import '../stylesheets/not-logged-in' +import '../stylesheets/not-logged-in.sass' diff --git a/app/javascript/packs/paper.js b/app/javascript/packs/paper.js index b5e9ddf5bfa..84bdaed6405 100644 --- a/app/javascript/packs/paper.js +++ b/app/javascript/packs/paper.js @@ -7,4 +7,4 @@ // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate // layout file, like app/views/layouts/application.html.erb -import '../stylesheets/paper' +import '../stylesheets/paper.sass' diff --git a/app/javascript/practice_memo.js b/app/javascript/practice_memo.js index fc4e3bf5fab..f4597d7cc30 100644 --- a/app/javascript/practice_memo.js +++ b/app/javascript/practice_memo.js @@ -99,7 +99,7 @@ document.addEventListener('DOMContentLoaded', () => { function updateMemo(memo, practiceId) { const params = { practice: { - memo: memo + memo } } fetch(`/api/practices/${practiceId}`, { diff --git a/app/javascript/stylesheets/_common-imports.sass b/app/javascript/stylesheets/_common-imports.sass index d44754d6278..fe397badbd8 100644 --- a/app/javascript/stylesheets/_common-imports.sass +++ b/app/javascript/stylesheets/_common-imports.sass @@ -3,212 +3,213 @@ //////////// // functions //////////// -@import config/variables/text-inputs-list -@import config/functions/math -@import config/functions/number -@import config/functions/list -@import config/functions/text -@import config/functions/color -@import config/functions/assign-inputs -@import config/functions/position -@import config/functions/border +@use "sass:meta" +@use "config/variables/text-inputs-list" +@use "config/functions/math" +@use "config/functions/number" +@use "config/functions/list" +@use "config/functions/text" +@use "config/functions/color" +@use "config/functions/assign-inputs" +@use "config/functions/position" +@use "config/functions/border" //////////// // variables //////////// -@import config/variables/colors -@import config/variables/welcome-colors -@import config/variables/layout -@import config/variables/fonts -@import config/variables/choices -@import config/variables/css-variables +@use "config/variables/colors" +@use "config/variables/welcome-colors" +@use "config/variables/layout" +@use "config/variables/fonts" +@use "config/variables/choices" +@use "config/variables/css-variables" //////////// // mixins //////////// -@import config/mixins/override -@import config/mixins/size -@import config/mixins/position -@import config/mixins/text -@import config/mixins/border-radius -@import config/mixins/link -@import config/mixins/margin-padding -@import config/mixins/word-wrap -@import config/mixins/grid/grid-framework -@import config/mixins/grid/grid -@import config/mixins/break-points -@import config/mixins/grid -@import config/mixins/border -@import config/mixins/font-awsome -@import config/mixins/placeholder +@use "config/mixins/override" +@use "config/mixins/size" +@use "config/mixins/position" as position2 +@use "config/mixins/text" as text2 +@use "config/mixins/border-radius" +@use "config/mixins/link" +@use "config/mixins/margin-padding" +@use "config/mixins/word-wrap" +@use "config/mixins/grid/grid-framework" +@use "config/mixins/grid/grid" +@use "config/mixins/break-points" +@use "config/mixins/grid" as grid2 +@use "config/mixins/border" as border2 +@use "config/mixins/font-awsome" +@use "config/mixins/placeholder" -@import config/mixins/long-text-style -@import config/mixins/short-text-style -@import config/mixins/button -@import config/mixins/badge -@import config/mixins/user-role -@import config/mixins/practice-color +@use "config/mixins/long-text-style" +@use "config/mixins/short-text-style" +@use "config/mixins/button" +@use "config/mixins/badge" +@use "config/mixins/user-role" +@use "config/mixins/practice-color" //////////// // initializers //////////// -@import initializers/ress -@import initializers/reset +@use "initializers/ress" +@use "initializers/reset" //////////// // modules //////////// @import choices.js/public/assets/styles/choices.min.css -@import modules/any_login -@import modules/choices -@import modules/github -@import modules/multiselect -@import modules/select2 -@import modules/stripe -@import modules/toasts -@import modules/tagify -@import modules/embla +@include meta.load-css("modules/any_login") +@include meta.load-css("modules/choices") +@include meta.load-css("modules/github") +@include meta.load-css("modules/multiselect") +@include meta.load-css("modules/select2") +@include meta.load-css("modules/stripe") +@include meta.load-css("modules/toasts") +@include meta.load-css("modules/tagify") +@include meta.load-css("modules/embla") //////////// // atoms //////////// -@import atoms/a-badge -@import atoms/a-block-check -@import atoms/a-image-check -@import atoms/a-bookmark-button -@import atoms/a-border -@import atoms/a-button -@import atoms/a-cancel-button -@import atoms/a-copy-button -@import atoms/a-card -@import atoms/a-category-link -@import atoms/a-checkbox -@import atoms/a-completion-message -@import atoms/a-count-badge -@import atoms/a-dropdown -@import atoms/a-elapsed-days -@import atoms/a-empty-message -@import atoms/a-file-input -@import atoms/a-pdf-input -@import atoms/a-form-frame -@import atoms/a-form-help -@import atoms/a-form-label -@import atoms/a-form-tabs -@import atoms/a-grab -@import atoms/a-grass -@import atoms/a-help -@import atoms/a-horizontal-dashed -@import atoms/a-list-item-badge -@import atoms/a-long-text -@import atoms/a-markdown-input -@import atoms/a-meta -@import atoms/a-notification-count -@import atoms/a-on-off-checkbox -@import atoms/a-overlay -@import atoms/a-page-notice -@import atoms/a-panels -@import atoms/a-placeholder -@import atoms/a-short-text -@import atoms/a-switch -@import atoms/a-text-input -@import atoms/a-raw -@import atoms/a-text-link -@import atoms/a-text -@import atoms/a-title-label -@import atoms/a-user-icon -@import atoms/a-user-icons -@import atoms/a-user-name -@import atoms/a-user-role -@import atoms/a-user-role-badge -@import atoms/a-watch-button -@import atoms/a-checker -@import atoms/a-file-insert -@import atoms/a-icon-label -@import atoms/a-side-nav -@import atoms/a-notice-block -@import atoms/a-table -@import atoms/a-tags -@import atoms/a-link-card -@import atoms/o-empty-message -@import atoms/a-hidden-scrollbar +@include meta.load-css("atoms/a-badge") +@include meta.load-css("atoms/a-block-check") +@include meta.load-css("atoms/a-image-check") +@include meta.load-css("atoms/a-bookmark-button") +@include meta.load-css("atoms/a-border") +@include meta.load-css("atoms/a-button") +@include meta.load-css("atoms/a-cancel-button") +@include meta.load-css("atoms/a-copy-button") +@include meta.load-css("atoms/a-card") +@include meta.load-css("atoms/a-category-link") +@include meta.load-css("atoms/a-checkbox") +@include meta.load-css("atoms/a-completion-message") +@include meta.load-css("atoms/a-count-badge") +@include meta.load-css("atoms/a-dropdown") +@include meta.load-css("atoms/a-elapsed-days") +@include meta.load-css("atoms/a-empty-message") +@include meta.load-css("atoms/a-file-input") +@include meta.load-css("atoms/a-pdf-input") +@include meta.load-css("atoms/a-form-frame") +@include meta.load-css("atoms/a-form-help") +@include meta.load-css("atoms/a-form-label") +@include meta.load-css("atoms/a-form-tabs") +@include meta.load-css("atoms/a-grab") +@include meta.load-css("atoms/a-grass") +@include meta.load-css("atoms/a-help") +@include meta.load-css("atoms/a-horizontal-dashed") +@include meta.load-css("atoms/a-list-item-badge") +@include meta.load-css("atoms/a-long-text") +@include meta.load-css("atoms/a-markdown-input") +@include meta.load-css("atoms/a-meta") +@include meta.load-css("atoms/a-notification-count") +@include meta.load-css("atoms/a-on-off-checkbox") +@include meta.load-css("atoms/a-overlay") +@include meta.load-css("atoms/a-page-notice") +@include meta.load-css("atoms/a-panels") +@include meta.load-css("atoms/a-placeholder") +@include meta.load-css("atoms/a-short-text") +@include meta.load-css("atoms/a-switch") +@include meta.load-css("atoms/a-text-input") +@include meta.load-css("atoms/a-raw") +@include meta.load-css("atoms/a-text-link") +@include meta.load-css("atoms/a-text") +@include meta.load-css("atoms/a-title-label") +@include meta.load-css("atoms/a-user-icon") +@include meta.load-css("atoms/a-user-icons") +@include meta.load-css("atoms/a-user-name") +@include meta.load-css("atoms/a-user-role") +@include meta.load-css("atoms/a-user-role-badge") +@include meta.load-css("atoms/a-watch-button") +@include meta.load-css("atoms/a-checker") +@include meta.load-css("atoms/a-file-insert") +@include meta.load-css("atoms/a-icon-label") +@include meta.load-css("atoms/a-side-nav") +@include meta.load-css("atoms/a-notice-block") +@include meta.load-css("atoms/a-table") +@include meta.load-css("atoms/a-tags") +@include meta.load-css("atoms/a-link-card") +@include meta.load-css("atoms/o-empty-message") +@include meta.load-css("atoms/a-hidden-scrollbar") //////////// // layouts //////////// -@import shared/layouts/wrapper -@import shared/layouts/container -@import shared/layouts/columns -@import shared/layouts/l-container -@import shared/layouts/l-inner-container +@include meta.load-css("shared/layouts/wrapper") +@include meta.load-css("shared/layouts/container") +@include meta.load-css("shared/layouts/columns") +@include meta.load-css("shared/layouts/l-container") +@include meta.load-css("shared/layouts/l-inner-container") //////////// // blocks //////////// -@import shared/test/test +@include meta.load-css("shared/test/test") -@import shared/blocks/code-toolbar -@import shared/blocks/errors -@import shared/blocks/flash -@import shared/blocks/footprints -@import shared/blocks/global-nav -@import shared/blocks/modal -@import shared/blocks/page-nav -@import shared/blocks/page-search -@import shared/blocks/page-tags-nav -@import shared/blocks/pagination -@import shared/blocks/pill-nav -@import shared/blocks/prism-ghcolors -@import shared/blocks/tab-nav -@import shared/blocks/hour-filter -@import shared/blocks/not-logged-in-footer +@include meta.load-css("shared/blocks/code-toolbar") +@include meta.load-css("shared/blocks/errors") +@include meta.load-css("shared/blocks/flash") +@include meta.load-css("shared/blocks/footprints") +@include meta.load-css("shared/blocks/global-nav") +@include meta.load-css("shared/blocks/modal") +@include meta.load-css("shared/blocks/page-nav") +@include meta.load-css("shared/blocks/page-search") +@include meta.load-css("shared/blocks/page-tags-nav") +@include meta.load-css("shared/blocks/pagination") +@include meta.load-css("shared/blocks/pill-nav") +@include meta.load-css("shared/blocks/prism-ghcolors") +@include meta.load-css("shared/blocks/tab-nav") +@include meta.load-css("shared/blocks/hour-filter") +@include meta.load-css("shared/blocks/not-logged-in-footer") -@import shared/blocks/card/card-body -@import shared/blocks/card/card-message -@import shared/blocks/card/card-books -@import shared/blocks/card/card-eyecatch -@import shared/blocks/card/card-footer -@import shared/blocks/card/card-header -@import shared/blocks/card/card-main-actions -@import shared/blocks/card/congrats-card-body -@import shared/blocks/card/practice-books -@import shared/blocks/card/thumbnail-card -@import shared/blocks/card/tags-highlight +@include meta.load-css("shared/blocks/card/card-body") +@include meta.load-css("shared/blocks/card/card-message") +@include meta.load-css("shared/blocks/card/card-books") +@include meta.load-css("shared/blocks/card/card-eyecatch") +@include meta.load-css("shared/blocks/card/card-footer") +@include meta.load-css("shared/blocks/card/card-header") +@include meta.load-css("shared/blocks/card/card-main-actions") +@include meta.load-css("shared/blocks/card/congrats-card-body") +@include meta.load-css("shared/blocks/card/practice-books") +@include meta.load-css("shared/blocks/card/thumbnail-card") +@include meta.load-css("shared/blocks/card/tags-highlight") -@import shared/blocks/card-list/card-list-item-actions -@import shared/blocks/card-list/card-list-item-meta -@import shared/blocks/card-list/card-list-item-tags-edit -@import shared/blocks/card-list/card-list-item-title -@import shared/blocks/card-list/card-list-item -@import shared/blocks/card-list/card-list-tools -@import shared/blocks/card-list/card-list +@include meta.load-css("shared/blocks/card-list/card-list-item-actions") +@include meta.load-css("shared/blocks/card-list/card-list-item-meta") +@include meta.load-css("shared/blocks/card-list/card-list-item-tags-edit") +@include meta.load-css("shared/blocks/card-list/card-list-item-title") +@include meta.load-css("shared/blocks/card-list/card-list-item") +@include meta.load-css("shared/blocks/card-list/card-list-tools") +@include meta.load-css("shared/blocks/card-list/card-list") -@import shared/blocks/form/block-checks -@import shared/blocks/form/books-form-item -@import shared/blocks/form/books-form -@import shared/blocks/form/checkboxes -@import shared/blocks/form/form-actions -@import shared/blocks/form/form-added-choice -@import shared/blocks/form/form-item-actions -@import shared/blocks/form/form-item-block -@import shared/blocks/form/form-item-group -@import shared/blocks/form/form-item -@import shared/blocks/form/form-link-block -@import shared/blocks/form/form-notice -@import shared/blocks/form/form-selects -@import shared/blocks/form/form-tabs-item -@import shared/blocks/form/form-tabs -@import shared/blocks/form/form-times -@import shared/blocks/form/form -@import shared/blocks/form/hidden-form-item -@import shared/blocks/form/important-message -@import shared/blocks/form/linear-scale -@import shared/blocks/form/many-check-boxes -@import shared/blocks/form/markdown-form -@import shared/blocks/form/radios -@import shared/blocks/form/vue-tags-input -@import shared/blocks/form/form-textarea -@import shared/blocks/form/form-table -@import shared/blocks/o-empty-message +@include meta.load-css("shared/blocks/form/block-checks") +@include meta.load-css("shared/blocks/form/books-form-item") +@include meta.load-css("shared/blocks/form/books-form") +@include meta.load-css("shared/blocks/form/checkboxes") +@include meta.load-css("shared/blocks/form/form-actions") +@include meta.load-css("shared/blocks/form/form-added-choice") +@include meta.load-css("shared/blocks/form/form-item-actions") +@include meta.load-css("shared/blocks/form/form-item-block") +@include meta.load-css("shared/blocks/form/form-item-group") +@include meta.load-css("shared/blocks/form/form-item") +@include meta.load-css("shared/blocks/form/form-link-block") +@include meta.load-css("shared/blocks/form/form-notice") +@include meta.load-css("shared/blocks/form/form-selects") +@include meta.load-css("shared/blocks/form/form-tabs-item") +@include meta.load-css("shared/blocks/form/form-tabs") +@include meta.load-css("shared/blocks/form/form-times") +@include meta.load-css("shared/blocks/form/form") +@include meta.load-css("shared/blocks/form/hidden-form-item") +@include meta.load-css("shared/blocks/form/important-message") +@include meta.load-css("shared/blocks/form/linear-scale") +@include meta.load-css("shared/blocks/form/many-check-boxes") +@include meta.load-css("shared/blocks/form/markdown-form") +@include meta.load-css("shared/blocks/form/radios") +@include meta.load-css("shared/blocks/form/vue-tags-input") +@include meta.load-css("shared/blocks/form/form-textarea") +@include meta.load-css("shared/blocks/form/form-table") +@include meta.load-css("shared/blocks/o-empty-message") -@import shared/helpers/state +@include meta.load-css("shared/helpers/state") diff --git a/app/javascript/stylesheets/application.sass b/app/javascript/stylesheets/application.sass index fecd079cebc..08fd9a3d95b 100644 --- a/app/javascript/stylesheets/application.sass +++ b/app/javascript/stylesheets/application.sass @@ -1,140 +1,141 @@ @charset "UTF-8" -@import common-imports - -@import application/base/base - -@import application/blocks/admin/admin-table -@import application/blocks/admin/admin-users - -@import application/blocks/auth-form/auth-form-nav -@import application/blocks/auth-form/auth-form -@import application/blocks/auth-form/next-settlement-time -@import application/blocks/auth-form/skip-practices - -@import application/blocks/cards/card-counts -@import application/blocks/cards/card-body-main-actions - -@import application/blocks/company/company-links -@import application/blocks/company/company-profile - -@import application/blocks/course/courses - -@import application/blocks/dashboard/current-user-icon-list -@import application/blocks/dashboard/dashboard-categories-item -@import application/blocks/dashboard/dashboard-contents -@import application/blocks/dashboard/welcome-message -@import application/blocks/dashboard/unchecked-report-alert - -@import application/blocks/event/event-main-actions -@import application/blocks/event/event-meta - -@import application/blocks/footer/footer-nav -@import application/blocks/footer/footer - -@import application/blocks/header/header-current-user -@import application/blocks/header/header-dropdown -@import application/blocks/header/header-links -@import application/blocks/header/header-notification-icon -@import application/blocks/header/header - -@import application/blocks/mention/mention - -@import application/blocks/modal/modal-celebrate-report-count-body - -@import application/blocks/page/o-page-info -@import application/blocks/page/page-body-actions -@import application/blocks/page/page-body -@import application/blocks/page/page-header -@import application/blocks/page/page-header-actions -@import application/blocks/page/page-main-header-actions -@import application/blocks/page/page-main-header -@import application/blocks/page/page-notices -@import application/blocks/page/page-optional-header -@import application/blocks/page/page-tabs -@import application/blocks/page/page -@import application/blocks/page/page-filter -@import application/blocks/page/page-main-filter - -@import application/blocks/page-content/page-content -@import application/blocks/page-content/page-content-header-actions -@import application/blocks/page-content/page-content-header-metas -@import application/blocks/page-content/page-content-header -@import application/blocks/page-content/page-content-members -@import application/blocks/page-content/page-content-prev-next - -@import application/blocks/practice/categories -@import application/blocks/practice/category-practices-item -@import application/blocks/practice/completion-massage -@import application/blocks/practice/practice-content-actions -@import application/blocks/practice/practice-content -@import application/blocks/practice/practice-contents -@import application/blocks/practice/practice-first-actions -@import application/blocks/practice/practice-status-buttons -@import application/blocks/practice/sticky-message - -@import application/blocks/question/answer-badge - -@import application/blocks/reaction/reaction - -@import application/blocks/report/learning-times -@import application/blocks/report/stamp - -@import application/blocks/side/side-tabs-contents -@import application/blocks/side/side-tabs-nav -@import application/blocks/side/side-tabs -@import application/blocks/side/user-statuses - -@import application/blocks/static-pages/thanks-message -@import application/blocks/static-pages/thanks - -@import application/blocks/survey/survey-added-question -@import application/blocks/survey/survey-additional-question -@import application/blocks/survey/survey-questions-item -@import application/blocks/survey/survey-questions -@import application/blocks/survey/survey-answer -@import application/blocks/survey/survey-result -@import application/blocks/survey/survey-answers - -@import application/blocks/tags/random-tags -@import application/blocks/tags/tag-links -@import application/blocks/tags/tag-input - -@import application/blocks/thread/thread-comment-form -@import application/blocks/thread/thread-comment -@import application/blocks/thread/thread-comments-more -@import application/blocks/thread/thread-comments -@import application/blocks/thread/thread-form -@import application/blocks/thread/thread-header -@import application/blocks/thread/action-completed - -@import application/blocks/user/active-practices-list -@import application/blocks/user/companies-item -@import application/blocks/user/completed-practices-progress -@import application/blocks/user/following -@import application/blocks/user/group-company-name -@import application/blocks/user/niconico-calendar -@import application/blocks/user/sns-links -@import application/blocks/user/user-data -@import application/blocks/user/user-grass -@import application/blocks/user/user-group -@import application/blocks/user/user-metas -@import application/blocks/user/user-profile -@import application/blocks/user/user-secret-attributes -@import application/blocks/user/users-item - -@import application/blocks/coding-test/code-editor -@import application/blocks/coding-test/io-sample -@import application/blocks/coding-test/test-case -@import application/blocks/coding-test/coding-test -@import application/blocks/coding-test/result-table -@import application/blocks/coding-test/coding-tests-item - -@import application/blocks/micro-report/micro-reports -@import application/blocks/micro-report/micro-report -@import application/blocks/micro-report/micro-report-form -@import application/blocks/micro-report/micro-report-form-tabs -@import application/blocks/micro-report/micro-report-actions - -@import form/zip-tel-input -@import "initializers/tailwind" +@use "common-imports" + +@use "application/base/base" + +@use "application/blocks/admin/admin-table" +@use "application/blocks/admin/admin-users" + +@use "application/blocks/auth-form/auth-form-nav" +@use "application/blocks/auth-form/auth-form" +@use "application/blocks/auth-form/next-settlement-time" +@use "application/blocks/auth-form/skip-practices" + +@use "application/blocks/cards/card-counts" +@use "application/blocks/cards/card-body-main-actions" + +@use "application/blocks/company/company-links" +@use "application/blocks/company/company-profile" + +@use "application/blocks/course/courses" + +@use "application/blocks/dashboard/current-user-icon-list" +@use "application/blocks/dashboard/dashboard-categories-item" +@use "application/blocks/dashboard/dashboard-contents" +@use "application/blocks/dashboard/welcome-message" +@use "application/blocks/dashboard/unchecked-report-alert" + +@use "application/blocks/event/event-main-actions" +@use "application/blocks/event/event-meta" + +@use "application/blocks/footer/footer-nav" +@use "application/blocks/footer/footer" + +@use "application/blocks/header/header-current-user" +@use "application/blocks/header/header-dropdown" +@use "application/blocks/header/header-links" +@use "application/blocks/header/header-notification-icon" +@use "application/blocks/header/header" + +@use "application/blocks/mention/mention" + +@use "application/blocks/modal/modal-celebrate-report-count-body" + +@use "application/blocks/page/o-page-info" +@use "application/blocks/page/page-body-actions" +@use "application/blocks/page/page-body" +@use "application/blocks/page/page-header" +@use "application/blocks/page/page-header-actions" +@use "application/blocks/page/page-main-header-actions" +@use "application/blocks/page/page-main-header" +@use "application/blocks/page/page-notices" +@use "application/blocks/page/page-optional-header" +@use "application/blocks/page/page-tabs" +@use "application/blocks/page/page" +@use "application/blocks/page/page-filter" +@use "application/blocks/page/page-main-filter" + +@use "application/blocks/page-content/page-content" +@use "application/blocks/page-content/page-content-header-actions" +@use "application/blocks/page-content/page-content-header-metas" +@use "application/blocks/page-content/page-content-header" +@use "application/blocks/page-content/page-content-members" +@use "application/blocks/page-content/page-content-prev-next" + +@use "application/blocks/practice/categories" +@use "application/blocks/practice/category-practices-item" +@use "application/blocks/practice/completion-massage" +@use "application/blocks/practice/practice-content-actions" +@use "application/blocks/practice/practice-content" +@use "application/blocks/practice/practice-contents" +@use "application/blocks/practice/practice-first-actions" +@use "application/blocks/practice/practice-status-buttons" +@use "application/blocks/practice/sticky-message" + +@use "application/blocks/question/answer-badge" + +@use "application/blocks/reaction/reaction" + +@use "application/blocks/report/learning-times" +@use "application/blocks/report/stamp" + +@use "application/blocks/side/side-tabs-contents" +@use "application/blocks/side/side-tabs-nav" +@use "application/blocks/side/side-tabs" +@use "application/blocks/side/user-statuses" + +@use "application/blocks/static-pages/thanks-message" +@use "application/blocks/static-pages/thanks" + +@use "application/blocks/survey/survey-added-question" +@use "application/blocks/survey/survey-additional-question" +@use "application/blocks/survey/survey-questions-item" +@use "application/blocks/survey/survey-questions" +@use "application/blocks/survey/survey-answer" +@use "application/blocks/survey/survey-result" +@use "application/blocks/survey/survey-answers" + +@use "application/blocks/tags/random-tags" +@use "application/blocks/tags/tag-links" +@use "application/blocks/tags/tag-input" + +@use "application/blocks/thread/thread-comment-form" +@use "application/blocks/thread/thread-comment" +@use "application/blocks/thread/thread-comments-more" +@use "application/blocks/thread/thread-comments" +@use "application/blocks/thread/thread-form" +@use "application/blocks/thread/thread-header" +@use "application/blocks/thread/action-completed" + +@use "application/blocks/user/active-practices-list" +@use "application/blocks/user/companies-item" +@use "application/blocks/user/completed-practices-progress" +@use "application/blocks/user/following" +@use "application/blocks/user/group-company-name" +@use "application/blocks/user/niconico-calendar" +@use "application/blocks/user/sns-links" +@use "application/blocks/user/user-data" +@use "application/blocks/user/user-grass" +@use "application/blocks/user/user-group" +@use "application/blocks/user/user-metas" +@use "application/blocks/user/user-profile" +@use "application/blocks/user/user-secret-attributes" +@use "application/blocks/user/users-item" +@use "application/blocks/user/user-study-streak-tracker" + +@use "application/blocks/coding-test/code-editor" +@use "application/blocks/coding-test/io-sample" +@use "application/blocks/coding-test/test-case" +@use "application/blocks/coding-test/coding-test" +@use "application/blocks/coding-test/result-table" +@use "application/blocks/coding-test/coding-tests-item" + +@use "application/blocks/micro-report/micro-reports" +@use "application/blocks/micro-report/micro-report" +@use "application/blocks/micro-report/micro-report-form" +@use "application/blocks/micro-report/micro-report-form-tabs" +@use "application/blocks/micro-report/micro-report-actions" + +@use "form/zip-tel-input" +@use "initializers/tailwind" diff --git a/app/javascript/stylesheets/application/base/_base.sass b/app/javascript/stylesheets/application/base/_base.sass index a79e6b7c7bd..27291878ef7 100644 --- a/app/javascript/stylesheets/application/base/_base.sass +++ b/app/javascript/stylesheets/application/base/_base.sass @@ -1,7 +1,12 @@ +@use "../../config/mixins/break-points" +@use "../../config/mixins/position" +@use "../../config/mixins/size" +@use "../../config/variables/fonts" + html.is-application - font-family: $sans-serif + font-family: fonts.$sans-serif color: var(--default-text) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) scroll-padding-top: var(--header-height__md-up) body.is-application @@ -17,22 +22,22 @@ body.is-no-scroll body.is-piyo-background &::before content: '' - +position(fixed, left 0, top 0, right 0, bottom 0) - +size(100%) + +position.position(fixed, left 0, top 0, right 0, bottom 0) + +size.size(100%) background-image: url(https://bootcamp.fjord.jp/images/background/background.svg) background-repeat: repeat overflow-y: auto opacity: .04 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) background-size: 20rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) background-size: 4.5rem .wrapper - +position(relative, 1) + +position.position(relative, 1) .wrapper &.is-application - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-left: var(--global-nav-width) padding-top: var(--header-height__md-up) body.no-global-nav & diff --git a/app/javascript/stylesheets/application/blocks/admin/_admin-table.sass b/app/javascript/stylesheets/application/blocks/admin/_admin-table.sass index dff2269a336..161bca0dd2c 100644 --- a/app/javascript/stylesheets/application/blocks/admin/_admin-table.sass +++ b/app/javascript/stylesheets/application/blocks/admin/_admin-table.sass @@ -1,3 +1,12 @@ +@use "../../../config/functions/color" +@use "../../../config/mixins/border" +@use "../../../config/mixins/border-radius" +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" +@use "../../../config/variables/colors" + @keyframes grab-background-color 0% background-color: var(--warning) @@ -6,7 +15,7 @@ .admin-table margin-bottom: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) overflow-x: auto .admin-table__table @@ -16,17 +25,17 @@ .admin-table__header background-color: var(--background-semi-shade) border: solid 1px var(--border-shade) - +border-radius(top, .25rem) + +border-radius.border-radius(top, .25rem) .admin-table__items - +border(horizontal, solid 1px var(--border)) + +border.border(horizontal, solid 1px var(--border)) .admin-table-item__title - +text-block(1.5rem 1.45) + +text.text-block(1.5rem 1.45) color: var(--default-text) .admin-table__label - +text-block(.75rem 1.4) + +text.text-block(.75rem 1.4) text-align: center font-weight: 700 color: var(--main) @@ -52,12 +61,12 @@ &.is-retired:hover background-color: var(--background) &:last-child - +border-radius(bottom, .25rem) + +border-radius.border-radius(bottom, .25rem) &.sortable-chosen - background-color: tint($warning, 80%) + background-color: color.tint(colors.$warning, 80%) &:hover, .admin-table.is-grab &:hover - background-color: tint($primary, 90%) + background-color: color.tint(colors.$primary, 90%) &[draggable="false"] background-color: var(--base) animation: grab-background-color 1.25s ease 0s 1 normal none running @@ -65,7 +74,7 @@ .admin-table__item-value padding: .375rem .75rem border: solid 1px var(--border) - +text-block(.8125rem 1.45) + +text.text-block(.8125rem 1.45) &.is-text-align-center text-align: center .a-button @@ -76,7 +85,7 @@ padding: 0 .admin-table__item-blank - +text-block(.75rem 1.45) + +text.text-block(.75rem 1.45) color: var(--muted-text) .admin-table__item-logo-image @@ -96,7 +105,7 @@ gap: .25rem .25rem .admin-table__user-icon - +size(2.125rem) + +size.size(2.125rem) display: inline-block flex: 0 0 2.125rem &:not(:last-child) @@ -112,7 +121,7 @@ color: var(--main-text) .is-user-icon-xl - +size(100% auto) + +size.size(100% auto) margin-inline: auto border-radius: .25rem @@ -120,8 +129,8 @@ padding-top: .25em font-size: .75rem a - +hover-link-reversal - color: $danger + +link.hover-link-reversal + color: colors.$danger .admin-table.is-loading .admin-table__header diff --git a/app/javascript/stylesheets/application/blocks/auth-form/_auth-form-nav.sass b/app/javascript/stylesheets/application/blocks/auth-form/_auth-form-nav.sass index c5186f74bd9..d949d3bede1 100644 --- a/app/javascript/stylesheets/application/blocks/auth-form/_auth-form-nav.sass +++ b/app/javascript/stylesheets/application/blocks/auth-form/_auth-form-nav.sass @@ -1,3 +1,6 @@ +@use "../../../config/mixins/link" +@use "../../../config/mixins/text" + .auth-form-nav display: flex justify-content: flex-end @@ -10,6 +13,6 @@ .auth-form-nav__item-link cursor: pointer - +text-block(.75rem 1.45) + +text.text-block(.75rem 1.45) color: var(--main) - +hover-link + +link.hover-link diff --git a/app/javascript/stylesheets/application/blocks/auth-form/_auth-form.sass b/app/javascript/stylesheets/application/blocks/auth-form/_auth-form.sass index 1f5851f9511..624a8d9aefc 100644 --- a/app/javascript/stylesheets/application/blocks/auth-form/_auth-form.sass +++ b/app/javascript/stylesheets/application/blocks/auth-form/_auth-form.sass @@ -1,9 +1,14 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/text" +@use "../../../config/variables/colors" + .auth-form-logo-image display: block - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: 10rem margin: 4rem auto 2rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) max-width: 10rem margin: 2rem auto @@ -12,15 +17,15 @@ width: 28rem max-width: calc(100vw - 2rem) margin-bottom: 2rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-inline: auto - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-inline: 1rem &.is-lg width: 34rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-top: 3rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-top: 1rem .page-header + & margin-top: 1.5rem @@ -30,16 +35,16 @@ padding: 1rem 1.75rem .auth-form__body - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1.5rem 1.75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: 1.25rem 1rem .auth-form__footer padding: 1rem 1.75rem .auth-form__title - +text-block(1.25rem 1.4) + +text.text-block(1.25rem 1.4) text-align: center font-weight: 700 @@ -48,12 +53,12 @@ .auth-form__alert padding: .5rem 1.5rem - background-color: $danger + background-color: colors.$danger text-align: center - +text-block(.8125rem 1.4) + +text.text-block(.8125rem 1.4) color: var(--reversal-text) margin: 1rem 1rem 0 border-radius: .25rem a - +hover-link-reversal + +link.hover-link-reversal color: var(--reversal-text) diff --git a/app/javascript/stylesheets/application/blocks/auth-form/_next-settlement-time.sass b/app/javascript/stylesheets/application/blocks/auth-form/_next-settlement-time.sass index 783da0a71fa..ba4a610182b 100644 --- a/app/javascript/stylesheets/application/blocks/auth-form/_next-settlement-time.sass +++ b/app/javascript/stylesheets/application/blocks/auth-form/_next-settlement-time.sass @@ -1,16 +1,19 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .next-settlement-time - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex align-items: center justify-content: center .next-settlement-time__title - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) font-weight: 400 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-right: .5em .next-settlement-time__time - +text-block(1rem 1.4) + +text.text-block(1rem 1.4) font-weight: 700 color: var(--danger) diff --git a/app/javascript/stylesheets/application/blocks/auth-form/_skip-practices.sass b/app/javascript/stylesheets/application/blocks/auth-form/_skip-practices.sass index 0fff55957bd..c127a4af895 100644 --- a/app/javascript/stylesheets/application/blocks/auth-form/_skip-practices.sass +++ b/app/javascript/stylesheets/application/blocks/auth-form/_skip-practices.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/text" + .skip-practices .skip-practices + & margin-top: .5rem @@ -14,7 +16,7 @@ display: flex justify-content: space-between height: 2.5rem - +text-block(.875rem 1.5) + +text.text-block(.875rem 1.5) padding: .75rem align-items: center cursor: pointer diff --git a/app/javascript/stylesheets/application/blocks/cards/_card-body-main-actions.sass b/app/javascript/stylesheets/application/blocks/cards/_card-body-main-actions.sass index 45c1d1cd5bb..a6961bb5125 100644 --- a/app/javascript/stylesheets/application/blocks/cards/_card-body-main-actions.sass +++ b/app/javascript/stylesheets/application/blocks/cards/_card-body-main-actions.sass @@ -1,12 +1,17 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .card-body-main-actions - +position(relative, 1) + +position.position(relative, 1) padding-block: .75rem margin-inline: 1rem border-radius: 4px - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding-inline: 2rem margin-bottom: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-inline: .75rem margin-bottom: 1rem &.is-success @@ -27,7 +32,7 @@ color: var(--danger-text) .card-body-main-actions__description - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) margin-bottom: .75em text-align: center @@ -38,10 +43,10 @@ .card-body-main-actions__item text-align: center flex: 1 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: 16rem .card-body-main-actions__item-cancel - +hover-link-reversal + +link.hover-link-reversal color: var(--muted-text) font-size: .8125rem diff --git a/app/javascript/stylesheets/application/blocks/cards/_card-counts.sass b/app/javascript/stylesheets/application/blocks/cards/_card-counts.sass index 7ea00794f5a..1ef38654bd1 100644 --- a/app/javascript/stylesheets/application/blocks/cards/_card-counts.sass +++ b/app/javascript/stylesheets/application/blocks/cards/_card-counts.sass @@ -1,8 +1,12 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/text" + .card-counts &.is-user - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-bottom: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-bottom: 1.25rem .card-counts__items @@ -32,7 +36,7 @@ border-radius: 3px .card-counts__item-label - +text-block(.625rem 1.4) + +text.text-block(.625rem 1.4) white-space: nowrap max-width: 100% overflow: hidden @@ -49,12 +53,12 @@ .card-counts__item-value color: var(--muted-text) - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) padding-bottom: .125rem text-align: center &.is-empty color: var(--muted-text) a - +hover-link + +link.hover-link display: block color: var(--link-text) diff --git a/app/javascript/stylesheets/application/blocks/coding-test/_coding-test.sass b/app/javascript/stylesheets/application/blocks/coding-test/_coding-test.sass index 34f43f8bb4e..762afc68208 100644 --- a/app/javascript/stylesheets/application/blocks/coding-test/_coding-test.sass +++ b/app/javascript/stylesheets/application/blocks/coding-test/_coding-test.sass @@ -1,2 +1,4 @@ +@use "../../../config/mixins/text" + .coding-test__language - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) diff --git a/app/javascript/stylesheets/application/blocks/coding-test/_coding-tests-item.sass b/app/javascript/stylesheets/application/blocks/coding-test/_coding-tests-item.sass index 0bc2c501dff..807576625be 100644 --- a/app/javascript/stylesheets/application/blocks/coding-test/_coding-tests-item.sass +++ b/app/javascript/stylesheets/application/blocks/coding-test/_coding-tests-item.sass @@ -1,7 +1,9 @@ +@use "../../../config/mixins/text" + .coding-tests-item display: flex gap: .5rem align-items: center .coding-tests-item__test-link - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) diff --git a/app/javascript/stylesheets/application/blocks/coding-test/_io-sample.sass b/app/javascript/stylesheets/application/blocks/coding-test/_io-sample.sass index 560be672b55..035d378246e 100644 --- a/app/javascript/stylesheets/application/blocks/coding-test/_io-sample.sass +++ b/app/javascript/stylesheets/application/blocks/coding-test/_io-sample.sass @@ -1,5 +1,7 @@ +@use "../../../config/mixins/text" + .io-sample__title - +text-block(.875rem 1.4, 700) + +text.text-block(.875rem 1.4, 700) .io-sample__body margin-top: .5rem diff --git a/app/javascript/stylesheets/application/blocks/company/_company-links.sass b/app/javascript/stylesheets/application/blocks/company/_company-links.sass index 2179f215a8b..5225dbb028a 100644 --- a/app/javascript/stylesheets/application/blocks/company/_company-links.sass +++ b/app/javascript/stylesheets/application/blocks/company/_company-links.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/break-points" + .company-links margin-top: .5rem @@ -7,7 +9,7 @@ flex-wrap: wrap .company-links__item - +media-breakpoint-up(xxl) + +break-points.media-breakpoint-up(xxl) flex: 0 0 calc((100% - (.5rem * 2)) / 3) - +media-breakpoint-down(xl) + +break-points.media-breakpoint-down(xl) flex: 0 0 calc((100% - (.5rem * 1)) / 2) diff --git a/app/javascript/stylesheets/application/blocks/company/_company-profile.sass b/app/javascript/stylesheets/application/blocks/company/_company-profile.sass index c85a112d560..75d22326587 100644 --- a/app/javascript/stylesheets/application/blocks/company/_company-profile.sass +++ b/app/javascript/stylesheets/application/blocks/company/_company-profile.sass @@ -1,12 +1,16 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .company-profile__header padding: 1rem .company-links__items justify-content: flex-start .company-profile__header-inner - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) text-align: center .company-profile__header-start @@ -16,7 +20,7 @@ flex: 1 .company-profile__logo - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) position: static text-align: center margin-bottom: .25rem @@ -25,24 +29,24 @@ background-color: var(--base) object-fit: contain border-radius: .25rem - +media-breakpoint-up(md) - +size(4.5rem) - +media-breakpoint-down(sm) - +size(3.5rem) + +break-points.media-breakpoint-up(md) + +size.size(4.5rem) + +break-points.media-breakpoint-down(sm) + +size.size(3.5rem) .company-profile__name font-weight: 800 color: var(--main-text) - +media-breakpoint-up(md) - +text-block(1.5rem 1.45) - +media-breakpoint-down(sm) - +text-block(1.25rem 1.45) + +break-points.media-breakpoint-up(md) + +text.text-block(1.5rem 1.45) + +break-points.media-breakpoint-down(sm) + +text.text-block(1.25rem 1.45) .company-profile__body padding: 1rem .company-profile__description - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .9375rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .8125rem diff --git a/app/javascript/stylesheets/application/blocks/course/_courses.sass b/app/javascript/stylesheets/application/blocks/course/_courses.sass index ad02331233b..f063722e9c9 100644 --- a/app/javascript/stylesheets/application/blocks/course/_courses.sass +++ b/app/javascript/stylesheets/application/blocks/course/_courses.sass @@ -1,3 +1,7 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/text" + .courses-item height: 100% @@ -8,10 +12,10 @@ padding: .75rem 1.25rem 0 .courses-item__title - +text-block(1.125rem 1.4) + +text.text-block(1.125rem 1.4) .courses-item__title-icon - +text-block(.6875rem 1) + +text.text-block(.6875rem 1) color: var(--semi-muted-text) display: inline-flex white-space: nowrap @@ -23,15 +27,15 @@ align-items: center justify-content: center position: relative - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) top: -.125rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) top: -.1875rem &.is-closed background-color: var(--background-tint) .courses-item__title-link - +block-link + +link.block-link .courses-item__title-label color: var(--main-text) @@ -47,4 +51,4 @@ .courses-item__description padding: .5rem 1.25rem .75rem p - +text-block(.8125rem 1.6) + +text.text-block(.8125rem 1.6) diff --git a/app/javascript/stylesheets/application/blocks/dashboard/_current-user-icon-list.sass b/app/javascript/stylesheets/application/blocks/dashboard/_current-user-icon-list.sass index fc59befe5ec..82806d1f7b8 100644 --- a/app/javascript/stylesheets/application/blocks/dashboard/_current-user-icon-list.sass +++ b/app/javascript/stylesheets/application/blocks/dashboard/_current-user-icon-list.sass @@ -1,3 +1,6 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .current-user-icon-list margin-bottom: 1rem background-color: #eaeaf1 @@ -23,16 +26,16 @@ .current-user-icon-list__item flex: 0 0 2.5rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 0 0 3rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex: 0 0 2rem .current-user-icon-list__title-label - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) font-weight: 700 white-space: nowrap .current-user-icon-list__title-time - +text-block(.75rem 1.4) + +text.text-block(.75rem 1.4) white-space: nowrap diff --git a/app/javascript/stylesheets/application/blocks/dashboard/_dashboard-categories-item.sass b/app/javascript/stylesheets/application/blocks/dashboard/_dashboard-categories-item.sass index 578255d639e..ccd37c77b67 100644 --- a/app/javascript/stylesheets/application/blocks/dashboard/_dashboard-categories-item.sass +++ b/app/javascript/stylesheets/application/blocks/dashboard/_dashboard-categories-item.sass @@ -1,9 +1,11 @@ +@use "../../../config/mixins/text" + .dashboard-category__header padding-bottom: .25rem border-bottom: dashed 1px var(--border) .dashboard-category__title - +text-block(.75rem 1.4) + +text.text-block(.75rem 1.4) font-weight: 700 .dashboard-category__body diff --git a/app/javascript/stylesheets/application/blocks/dashboard/_dashboard-contents.sass b/app/javascript/stylesheets/application/blocks/dashboard/_dashboard-contents.sass index e43e87656b6..4c681ade6da 100644 --- a/app/javascript/stylesheets/application/blocks/dashboard/_dashboard-contents.sass +++ b/app/javascript/stylesheets/application/blocks/dashboard/_dashboard-contents.sass @@ -1,15 +1,17 @@ +@use "../../../config/mixins/break-points" + .dashboard-contents__cols display: flex gap: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-direction: column .dashboard-contents__col width: 100% &.is-sub - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: 20rem - +media-breakpoint-up(sm) + +break-points.media-breakpoint-up(sm) flex: 1 &.is-main flex: 1 diff --git a/app/javascript/stylesheets/application/blocks/dashboard/_unchecked-report-alert.sass b/app/javascript/stylesheets/application/blocks/dashboard/_unchecked-report-alert.sass index 484fd2894c8..8a5f0da97a7 100644 --- a/app/javascript/stylesheets/application/blocks/dashboard/_unchecked-report-alert.sass +++ b/app/javascript/stylesheets/application/blocks/dashboard/_unchecked-report-alert.sass @@ -1,9 +1,11 @@ +@use "../../../config/mixins/text" + .unchecked-report-alert__header background-color: var(--danger) padding: .125rem 1rem .unchecked-report-alert__header-title - +text-block(.75rem 1.4, 700) + +text.text-block(.75rem 1.4, 700) color: var(--reversal-text) .unchecked-report-alert__inner @@ -16,7 +18,7 @@ font-size: 2rem .unchecked-report-alert__message - +text-block(.8125rem 1.4, center) + +text.text-block(.8125rem 1.4, center) flex: 1 .unchecked-report-alert__message-link diff --git a/app/javascript/stylesheets/application/blocks/dashboard/_welcome-message.sass b/app/javascript/stylesheets/application/blocks/dashboard/_welcome-message.sass index 8c100dd92d7..6c5c6b51c5a 100644 --- a/app/javascript/stylesheets/application/blocks/dashboard/_welcome-message.sass +++ b/app/javascript/stylesheets/application/blocks/dashboard/_welcome-message.sass @@ -1,20 +1,27 @@ +@use "../../../config/functions/color" +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" +@use "../../../config/variables/colors" + .welcome-message position: relative padding-top: 2.5rem .welcome-message__inner - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 3.5rem 3rem 2rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: 3.5rem 1rem 1rem .welcome-message__author - +size(5rem) + +size.size(5rem) margin-inline: auto padding: .75rem border-radius: 50% - border: solid 1px shade($warning, 10%) - +position(absolute, top 0, left 50%) + border: solid 1px color.shade(colors.$warning, 10%) + +position.position(absolute, top 0, left 50%) transform: translate(-50%, 0) background-color: var(--warning) @@ -23,7 +30,7 @@ margin-bottom: 1em .welcome-message__title - +text-block(1em 1.4) + +text.text-block(1em 1.4) text-align: center font-weight: 800 diff --git a/app/javascript/stylesheets/application/blocks/event/_event-main-actions.sass b/app/javascript/stylesheets/application/blocks/event/_event-main-actions.sass index 49143836221..8c83fdd77ca 100644 --- a/app/javascript/stylesheets/application/blocks/event/_event-main-actions.sass +++ b/app/javascript/stylesheets/application/blocks/event/_event-main-actions.sass @@ -1,12 +1,17 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .event-main-actions - +position(relative, 1) + +position.position(relative, 1) padding-block: .75rem margin-inline: 1rem border-radius: 4px - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding-inline: 2rem margin-bottom: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-inline: .75rem margin-bottom: 1rem &.is-participationed @@ -27,7 +32,7 @@ color: var(--danger) .event-main-actions__description - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) margin-bottom: .75em text-align: center @@ -38,10 +43,10 @@ .event-main-actions__item text-align: center flex: 1 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: 16rem .event-main-actions__item-cancel - +hover-link-reversal + +link.hover-link-reversal color: var(--muted-text) font-size: .8125rem diff --git a/app/javascript/stylesheets/application/blocks/event/_event-meta.sass b/app/javascript/stylesheets/application/blocks/event/_event-meta.sass index 99ee6d7f6a0..aa817afcb52 100644 --- a/app/javascript/stylesheets/application/blocks/event/_event-meta.sass +++ b/app/javascript/stylesheets/application/blocks/event/_event-meta.sass @@ -1,18 +1,22 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/variables/colors" + .event-meta - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .8125rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .75rem .event-meta__inner - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: .75rem 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .5rem .75rem .event-meta__item line-height: 1.5 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex align-items: center &:not(:first-child) @@ -25,23 +29,23 @@ margin-right: .75em white-space: nowrap font-weight: 600 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) text-align: right - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .875em .event-meta__item-value flex: 1 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex align-items: center a:not(.a-button) - +default-link - +hover-link-reversal + +colors.default-link + +link.hover-link-reversal .event-meta__item-value-main display: block - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-right: .5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-bottom: .25rem diff --git a/app/javascript/stylesheets/application/blocks/footer/_footer-nav.sass b/app/javascript/stylesheets/application/blocks/footer/_footer-nav.sass index 0dff1a7e82f..0638580a198 100644 --- a/app/javascript/stylesheets/application/blocks/footer/_footer-nav.sass +++ b/app/javascript/stylesheets/application/blocks/footer/_footer-nav.sass @@ -1,27 +1,30 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" + .footer-nav__items display: flex line-height: 1.4 flex-wrap: wrap align-items: center - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .8125rem justify-content: center gap: 1.75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .75rem .footer-nav__item - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex: 0 0 50% &:nth-child(odd) border-right: solid 1px var(--border) .footer-nav__item-link color: var(--semi-muted-text) - +media-breakpoint-up(md) - +hover-link - +media-breakpoint-down(sm) - +flex-link + +break-points.media-breakpoint-up(md) + +link.hover-link + +break-points.media-breakpoint-down(sm) + +link.flex-link padding: .25rem 1rem min-height: 2.75rem align-items: center diff --git a/app/javascript/stylesheets/application/blocks/footer/_footer.sass b/app/javascript/stylesheets/application/blocks/footer/_footer.sass index dc6ee6066f9..a0799ca0513 100644 --- a/app/javascript/stylesheets/application/blocks/footer/_footer.sass +++ b/app/javascript/stylesheets/application/blocks/footer/_footer.sass @@ -1,8 +1,11 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" + .footer color: var(--semi-muted-text) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding-block: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) .container padding-inline: 0 @@ -11,14 +14,14 @@ display: block text-align: center color: var(--semi-muted-text) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .8125rem margin-top: 1.5em - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .75rem padding-block: 1.25rem .footer__copyright-link margin-inline: .25em - +hover-link + +link.hover-link color: var(--semi-muted-text) diff --git a/app/javascript/stylesheets/application/blocks/header/_header-current-user.sass b/app/javascript/stylesheets/application/blocks/header/_header-current-user.sass index e2a836d7503..0c9737eeabc 100644 --- a/app/javascript/stylesheets/application/blocks/header/_header-current-user.sass +++ b/app/javascript/stylesheets/application/blocks/header/_header-current-user.sass @@ -1,7 +1,10 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/size" + .header-current-user__icon display: block margin-inline: auto - +media-breakpoint-up(md) - +size(1.5rem) - +media-breakpoint-down(sm) - +size(1.125rem) + +break-points.media-breakpoint-up(md) + +size.size(1.5rem) + +break-points.media-breakpoint-down(sm) + +size.size(1.125rem) diff --git a/app/javascript/stylesheets/application/blocks/header/_header-dropdown.sass b/app/javascript/stylesheets/application/blocks/header/_header-dropdown.sass index 6151ae3a22c..340150b4f8d 100644 --- a/app/javascript/stylesheets/application/blocks/header/_header-dropdown.sass +++ b/app/javascript/stylesheets/application/blocks/header/_header-dropdown.sass @@ -1,11 +1,18 @@ +@use "../../../config/mixins/border-radius" +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .header-dropdown - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: none input:checked + &, .is-opened-dropdown & display: block - +media-breakpoint-down(sm) - +position(fixed, left 0, top 0, bottom 0, 100) + +break-points.media-breakpoint-down(sm) + +position.position(fixed, left 0, top 0, bottom 0, 100) background-color: rgba(black, 0) width: 0 cursor: pointer @@ -19,8 +26,8 @@ .header-dropdown__inner overflow-y: auto - +media-breakpoint-up(md) - +position(absolute, right 0, top 100%, 2) + +break-points.media-breakpoint-up(md) + +position.position(absolute, right 0, top 100%, 2) background-color: var(--base) border: solid 1px var(--border-shade) width: 14rem @@ -29,9 +36,9 @@ max-height: calc(100vh - 6rem) &.is-notification width: 15rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) background-color: var(--main) - +position(fixed, top 0, bottom 0, right auto, 1) + +position.position(fixed, top 0, bottom 0, right auto, 1) transition: left .2s ease-out width: var(--global-nav-width-sm) left: calc(var(--global-nav-width-sm) * -1) @@ -39,7 +46,7 @@ .is-opened-dropdown & left: 0 &.is-notification - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) left: 0 .pill-nav__item-link border-color: var(--base) @@ -53,83 +60,83 @@ .header-dropdown__header padding: 1rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) border-bottom: solid 1px var(--border-tint) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) border-bottom: solid 1px var(--main-semi-shade) .header-dropdown__label - +text-block(.625rem 1.4) + +text.text-block(.625rem 1.4) font-weight: 700 padding: .25rem .75rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) background-color: var(--background-semi-shade) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) color: var(--reversal-text) background-color: var(--main-semi-shade) .header-dropdown__items .header-dropdown__inner.is-notification & overflow-y: auto - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-height: calc(100vh - 16rem) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) max-height: calc(100vh - 134px) margin-bottom: -1px .header-dropdown__item-link - +text-block(.875rem 1.4) - +flex-link + +text.text-block(.875rem 1.4) + +link.flex-link padding: .75rem transition: all .2s ease-out - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) color: var(--default-text) .header-dropdown__item:not(:last-child) & border-bottom: solid 1px var(--border-tint) &:hover background-color: var(--primary-tint) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) color: var(--reversal-text) border-bottom: solid 1px var(--main-semi-shade) &:hover background-color: var(--main-shade) .header-dropdown__footer - +border-radius(bottom, .25rem) + +border-radius.border-radius(bottom, .25rem) overflow: hidden - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) border-top: solid 1px var(--border-tint) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) border-top: solid 1px var(--main-semi-shade) .header-dropdown__footer-link - +text-block(.875rem 1.4) - +flex-link + +text.text-block(.875rem 1.4) + +link.flex-link align-items: center justify-content: center - +size(100% 2.75rem) + +size.size(100% 2.75rem) transition: all .2s ease-out - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) color: var(--main-text) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) color: var(--reversal-text) &:hover - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) background-color: var(--background-more-tint) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) background-color: var(--main-shade) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) &:not(:last-child) border-bottom: solid 1px var(--border-tint) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) border-bottom: solid 1px var(--main-semi-shade) .header-dropdown__background - +media-breakpoint-up(md) - +position(fixed, left 0, top 0, right 0, bottom 0, 2) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-up(md) + +position.position(fixed, left 0, top 0, right 0, bottom 0, 2) + +break-points.media-breakpoint-down(sm) background-color: rgba(black, .6) - +position(fixed, left 0, top 0, bottom 0, 1) + +position.position(fixed, left 0, top 0, bottom 0, 1) height: 100% width: 0 display: inline @@ -139,7 +146,7 @@ width: 100% display: block &.is-notification - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) opacity: 1 width: 100% @@ -151,10 +158,10 @@ margin-top: 1rem .header-dropdown__page-link - +text-block(.875rem 1.4) - +hover-link-reversal + +text.text-block(.875rem 1.4) + +link.hover-link-reversal transition: all .2s ease-out - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) color: var(--main-text) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) color: var(--reversal-text) diff --git a/app/javascript/stylesheets/application/blocks/header/_header-links.sass b/app/javascript/stylesheets/application/blocks/header/_header-links.sass index 7c8d44786a2..28aaf845278 100644 --- a/app/javascript/stylesheets/application/blocks/header/_header-links.sass +++ b/app/javascript/stylesheets/application/blocks/header/_header-links.sass @@ -1,3 +1,8 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .header-links height: 100% display: flex @@ -11,24 +16,24 @@ display: flex height: 100% border-left: solid var(--border-tint) .0625rem - +position(relative) + +position.position(relative) transition: color .2s ease-in, background-color .2s ease-in .header-links__link - +flex-link + +link.flex-link flex-direction: column align-items: center justify-content: center height: 100% - +text-block(1em 1) + +text.text-block(1em 1) color: var(--default-text) - +position(relative) + +position.position(relative) transition: all .2s ease-in cursor: pointer - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1.375rem width: 3.75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1.125rem width: 2.75rem &:hover @@ -39,24 +44,24 @@ .header-links__link-label margin-top: .375em - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .6875rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .625rem .header-links__link-count - +position(right .25rem, top .25rem) + +position.position(right .25rem, top .25rem) .header-links__image - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) width: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: 1.125rem .header-links__link-icon - +text-block(1.25rem 1) + +text.text-block(1.25rem 1) text-align: center - +media-breakpoint-down(sm) - +text-block(1.125rem 1) + +break-points.media-breakpoint-down(sm) + +text.text-block(1.125rem 1) .has-count & color: var(--default-text) diff --git a/app/javascript/stylesheets/application/blocks/header/_header-notification-icon.sass b/app/javascript/stylesheets/application/blocks/header/_header-notification-icon.sass index 788f1875fd0..cde2059f398 100644 --- a/app/javascript/stylesheets/application/blocks/header/_header-notification-icon.sass +++ b/app/javascript/stylesheets/application/blocks/header/_header-notification-icon.sass @@ -1,17 +1,22 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .header-notification-count position: absolute - +media-breakpoint-up(md) - +position(right .25rem, top .25rem) - +media-breakpoint-down(sm) - +position(right .125rem, top .125rem) + +break-points.media-breakpoint-up(md) + +position.position(right .25rem, top .25rem) + +break-points.media-breakpoint-down(sm) + +position.position(right .125rem, top .125rem) &.is-loading.a-notification-count background-color: transparent &.is-loading::before content: ' .' color: var(--default-text) animation: dots 1s steps(5, end) infinite - +text-block(1rem 1) - +position(absolute, left .25rem, bottom .25rem) + +text.text-block(1rem 1) + +position.position(absolute, left .25rem, bottom .25rem) @keyframes dots 0%, 20% @@ -27,14 +32,14 @@ .header-notifications-item__body width: 100% - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) color: var(--default-text) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) color: var(--reversal-text) .header-notifications-item__user-icon float: left - +size(2rem) + +size.size(2rem) margin-right: .5rem margin-bottom: .25rem @@ -42,15 +47,15 @@ p line-height: 1.45 margin-bottom: .375em - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .8125rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .75rem .header-notifications-item__created-at text-align: right display: block - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .625rem diff --git a/app/javascript/stylesheets/application/blocks/header/_header.sass b/app/javascript/stylesheets/application/blocks/header/_header.sass index 5a290be8ae0..1ff5d6b51c0 100644 --- a/app/javascript/stylesheets/application/blocks/header/_header.sass +++ b/app/javascript/stylesheets/application/blocks/header/_header.sass @@ -1,11 +1,14 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" + .header background-color: var(--base) z-index: 5 - +media-breakpoint-up(md) - +position(fixed, top 0, right 0) + +break-points.media-breakpoint-up(md) + +position.position(fixed, top 0, right 0) left: var(--global-nav-width) height: var(--header-height__md-up) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) position: relative height: var(--header-height__sm-down) .a-switch @@ -34,9 +37,9 @@ opacity: .8 .header__title-image - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) height: 2.25rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) height: 1.75rem .header-show-mobile-nav @@ -46,12 +49,12 @@ justify-content: center align-items: center width: 3rem - +position(relative) + +position.position(relative) display: flex .header-show-mobile-nav-items display: none - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: flex height: 100% margin-right: -1rem diff --git a/app/javascript/stylesheets/application/blocks/mention/_mention.sass b/app/javascript/stylesheets/application/blocks/mention/_mention.sass index d117f1c9e6b..46067c4fbd9 100644 --- a/app/javascript/stylesheets/application/blocks/mention/_mention.sass +++ b/app/javascript/stylesheets/application/blocks/mention/_mention.sass @@ -1,3 +1,6 @@ +@use "sass:color" +@use "../../../config/variables/colors" + .tribute-container position: absolute top: 0 @@ -25,7 +28,7 @@ &.highlight background-color: var(--main) color: var(--reversal-text) - box-shadow: inset 0 0 3px darken($main, 10%) + box-shadow: inset 0 0 3px color.adjust(colors.$main, $lightness: -10%) span font-weight: bold &.mention diff --git a/app/javascript/stylesheets/application/blocks/micro-report/_micro-report-actions.sass b/app/javascript/stylesheets/application/blocks/micro-report/_micro-report-actions.sass index a04e5048d19..7f4ed9f759d 100644 --- a/app/javascript/stylesheets/application/blocks/micro-report/_micro-report-actions.sass +++ b/app/javascript/stylesheets/application/blocks/micro-report/_micro-report-actions.sass @@ -1,3 +1,6 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" + .micro-report-actions__items display: flex gap: .5rem @@ -19,7 +22,7 @@ color: var(--reversal-text) .micro-report-actions__user-link - +block-link + +link.block-link .micro-report__footer .reactions__items @@ -29,10 +32,10 @@ .reactions__item.is-reacted border: 1px solid var(--border) border-radius: .25rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) height: 2.25rem .reactions__dropdown-toggle margin-left: .5rem border: none - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) height: 2.25rem diff --git a/app/javascript/stylesheets/application/blocks/micro-report/_micro-report-form-tabs.sass b/app/javascript/stylesheets/application/blocks/micro-report/_micro-report-form-tabs.sass index e00b269dd87..92d9946cdb0 100644 --- a/app/javascript/stylesheets/application/blocks/micro-report/_micro-report-form-tabs.sass +++ b/app/javascript/stylesheets/application/blocks/micro-report/_micro-report-form-tabs.sass @@ -1,3 +1,6 @@ +@use "../../../config/mixins/link" +@use "../../../config/mixins/text" + .micro-report-form-tabs background-color: var(--background) @@ -8,9 +11,9 @@ display: flex .micro-report-form-tabs__item-link - +flex-link + +link.flex-link padding: .5rem .75rem 1rem - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) .micro-report-form__preview, .micro-report-form__form diff --git a/app/javascript/stylesheets/application/blocks/micro-report/_micro-report-form.sass b/app/javascript/stylesheets/application/blocks/micro-report/_micro-report-form.sass index 8c6e1c1f14e..b7bb63aa6ff 100644 --- a/app/javascript/stylesheets/application/blocks/micro-report/_micro-report-form.sass +++ b/app/javascript/stylesheets/application/blocks/micro-report/_micro-report-form.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/break-points" + .micro-report-form padding-bottom: 1rem position: fixed @@ -6,7 +8,7 @@ right: 0 background-color: var(--background) z-index: 2 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-left: 5rem .micro-report-form__inner diff --git a/app/javascript/stylesheets/application/blocks/micro-report/_micro-report.sass b/app/javascript/stylesheets/application/blocks/micro-report/_micro-report.sass index 8a51e4b5799..eb2d793820a 100644 --- a/app/javascript/stylesheets/application/blocks/micro-report/_micro-report.sass +++ b/app/javascript/stylesheets/application/blocks/micro-report/_micro-report.sass @@ -1,20 +1,26 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .micro-report - +position(relative) + +position.position(relative) display: flex &:not(:last-child) margin-top: 1.5rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) gap: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: .75rem .micro-report__start flex: 0 0 2.75rem - +size(2.75rem 100%) + +size.size(2.75rem 100%) .micro-report__end flex: 1 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: calc(100% - var(--thread-header-author)) .micro-report__header @@ -24,28 +30,28 @@ margin-bottom: .25rem .micro-report__title - +text-block(.875rem 1.4, 600) - +media-breakpoint-up(md) + +text.text-block(.875rem 1.4, 600) + +break-points.media-breakpoint-up(md) margin-right: .5rem flex: 1 - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: flex .micro-report__title-user-icon - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: none - +media-breakpoint-down(sm) - +size(1.5rem) + +break-points.media-breakpoint-down(sm) + +size.size(1.5rem) display: inline-block vertical-align: middle margin-right: .25rem .micro-report__title-link - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) height: 100% display: inline-flex align-items: center - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: inline-block white-space: nowrap max-width: calc(100vw - 15.5rem) @@ -57,35 +63,35 @@ height: 1.4em .micro-report__title-icon - +size(1.5rem) + +size.size(1.5rem) margin-right: .5rem .micro-report__title-label - +text-block(.8125rem, block 400) + +text.text-block(.8125rem, block 400) color: var(--muted-text) margin-bottom: .125rem i margin-right: .1875rem .micro-report__body - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) word-wrap: break-word .micro-report__user-icon - +size(3.5rem) + +size.size(3.5rem) object-fit: cover border-radius: 50% - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: none .micro-report__created-at display: block - +text-block(.8125rem 1.4, nowrap) + +text.text-block(.8125rem 1.4, nowrap) color: var(--muted-text) - +hover-link-reversal + +link.hover-link-reversal cursor: pointer - +position(relative) - +media-breakpoint-down(sm) + +position.position(relative) + +break-points.media-breakpoint-down(sm) font-size: .75rem &:active, &:focus, @@ -97,9 +103,9 @@ background-color: rgba(black, .4) border-radius: .125rem padding: .25rem - +text-block(.625rem 1) + +text.text-block(.625rem 1) color: var(--reversal-text) - +position(absolute, left 0, top 100%) + +position.position(absolute, left 0, top 100%) &.a-placeholder width: 30% height: 1.4em @@ -112,9 +118,9 @@ align-items: center .micro-report__actions-item-link - +text-block(1.25rem 1, center flex) + +text.text-block(1.25rem 1, center flex) color: var(--muted-text) - +size(2.375rem) + +size.size(2.375rem) align-items: center justify-content: center border-radius: 50% @@ -130,13 +136,13 @@ .micro-report__footer display: flex - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) justify-content: space-between .reactions justify-content: flex-end .card-footer flex: 1 - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-direction: column gap: .5rem .reactions @@ -148,4 +154,4 @@ flex: 1 .micro-report_user-icon.a-user-icon - +size(2.75rem) + +size.size(2.75rem) diff --git a/app/javascript/stylesheets/application/blocks/modal/_modal-celebrate-report-count-body.sass b/app/javascript/stylesheets/application/blocks/modal/_modal-celebrate-report-count-body.sass index 0f457940dfd..41ba5890328 100644 --- a/app/javascript/stylesheets/application/blocks/modal/_modal-celebrate-report-count-body.sass +++ b/app/javascript/stylesheets/application/blocks/modal/_modal-celebrate-report-count-body.sass @@ -1,5 +1,7 @@ +@use "../../../config/mixins/text" + .modal-celebrate-report-count-body__description - +text-block(.875rem 1.6) + +text.text-block(.875rem 1.6) text-align: center .modal-celebrate-report-count-body__image-container diff --git a/app/javascript/stylesheets/application/blocks/page-content/_page-content-header-actions.sass b/app/javascript/stylesheets/application/blocks/page-content/_page-content-header-actions.sass index 310e6dc24ab..95cdd2d3446 100644 --- a/app/javascript/stylesheets/application/blocks/page-content/_page-content-header-actions.sass +++ b/app/javascript/stylesheets/application/blocks/page-content/_page-content-header-actions.sass @@ -1,35 +1,37 @@ +@use "../../../config/mixins/break-points" + .page-content-header-actions padding-top: .25rem display: flex flex-wrap: wrap - +media-breakpoint-up(sm) + +break-points.media-breakpoint-up(sm) justify-content: space-between gap: .5rem - +media-breakpoint-down(xs) + +break-points.media-breakpoint-down(xs) justify-content: center gap: .25rem .page-content-header-actions__start, .page-content-header-actions__end display: flex - +media-breakpoint-up(sm) + +break-points.media-breakpoint-up(sm) flex: 1 gap: .5rem - +media-breakpoint-down(xs) + +break-points.media-breakpoint-down(xs) gap: .25rem .page-content-header-actions__start justify-content: flex-start .page-content-header-actions__end - +media-breakpoint-up(sm) + +break-points.media-breakpoint-up(sm) justify-content: flex-end .page-content-header-actions__action min-width: 5.4rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) min-width: 7rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: 50% .a-button padding-inline: 0 diff --git a/app/javascript/stylesheets/application/blocks/page-content/_page-content-header-metas.sass b/app/javascript/stylesheets/application/blocks/page-content/_page-content-header-metas.sass index 16a32a337c1..bc03d4dc981 100644 --- a/app/javascript/stylesheets/application/blocks/page-content/_page-content-header-metas.sass +++ b/app/javascript/stylesheets/application/blocks/page-content/_page-content-header-metas.sass @@ -1,5 +1,7 @@ +@use "../../../config/mixins/break-points" + .page-content-header-metas - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex justify-content: space-between diff --git a/app/javascript/stylesheets/application/blocks/page-content/_page-content-header.sass b/app/javascript/stylesheets/application/blocks/page-content/_page-content-header.sass index 76290c4b092..01bf344ad0b 100644 --- a/app/javascript/stylesheets/application/blocks/page-content/_page-content-header.sass +++ b/app/javascript/stylesheets/application/blocks/page-content/_page-content-header.sass @@ -1,12 +1,18 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .page-content-header - +position(relative) - +media-breakpoint-up(md) + +position.position(relative) + +break-points.media-breakpoint-up(md) display: flex gap: 1rem &:not(:last-child) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-bottom: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-bottom: 1.25rem .a-watch-button.is-inactive, .a-bookmark-button.is-inactive @@ -24,29 +30,29 @@ gap: .5rem .page-content-header__end - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 1 - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) .page-content-header__start + & margin-top: .5rem .page-content-header__user - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: flex justify-content: center .page-content-header__category - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: flex justify-content: center .page-content-header__category-icon - +size(3.5rem) + +size.size(3.5rem) border-radius: 50% display: flex align-items: center justify-content: center - +text-block(.875rem 1, 600) + +text.text-block(.875rem 1, 600) // regular_events &.is-meeting background-color: #7f6fb7 @@ -65,28 +71,28 @@ color: var(--default-text) .page-content-header__user-link - +block-link + +link.block-link .page-content-header__user-icon-image - +size(3.5rem) + +size.size(3.5rem) .page-content-header__company-logo-image background-color: var(--base) object-fit: contain border-radius: .25rem - +media-breakpoint-up(md) - +size(3.5rem) - +media-breakpoint-down(sm) - +size(2.75rem) - +position(absolute, left 0, top 0) + +break-points.media-breakpoint-up(md) + +size.size(3.5rem) + +break-points.media-breakpoint-down(sm) + +size.size(2.75rem) + +position.position(absolute, left 0, top 0) .page-content-header__before-title gap: .25rem 1rem flex-wrap: wrap - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: inline-flex margin-bottom: .25rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: flex justify-content: center text-align: center @@ -99,14 +105,14 @@ .page-content-header__title font-feature-settings: "palt" letter-spacing: .02em - +text-block(1em 1.4, 700) + +text.text-block(1em 1.4, 700) color: var(--main) padding-bottom: .25rem border-bottom: solid 1px var(--border-shade) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1.625rem word-wrap: break-word - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1.125rem word-break: break-all &.is-wip @@ -116,13 +122,13 @@ .a-title-label display: inline-flex vertical-align: top - +media-breakpoint-up(md) - +position(relative, top .75em) - +media-breakpoint-down(sm) - +position(relative, top .5em) + +break-points.media-breakpoint-up(md) + +position.position(relative, top .75em) + +break-points.media-breakpoint-down(sm) + +position.position(relative, top .5em) .page-content-header__title-link - +hover-link + +link.hover-link color: var(--main) .page-content-header__title.is-wip & color: var(--muted-text) @@ -137,48 +143,48 @@ margin-bottom: 1rem .page-content-header__description - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding-block: .25rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-block: .25rem &.a-long-text - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .9375rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .8125rem .page-content-header__emotion display: inline-flex vertical-align: middle - +position(relative, top -.125em) - +size(1em) - +media-breakpoint-up(md) + +position.position(relative, top -.125em) + +size.size(1em) + +break-points.media-breakpoint-up(md) font-size: 1.75rem margin-right: .375em - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1.25rem margin-right: .25em .page-content-header__emotion-image - +size(100%) + +size.size(100%) .page-content-header__checker - +position(absolute, right 0, top -.5rem) + +position.position(absolute, right 0, top -.5rem) .user-profile__company-logo-image background-color: var(--base) object-fit: contain border-radius: .25rem - +media-breakpoint-up(md) - +size(4.5rem) - +media-breakpoint-down(sm) - +size(3.5rem) - +position(absolute, right 0, top 0) + +break-points.media-breakpoint-up(md) + +size.size(4.5rem) + +break-points.media-breakpoint-down(sm) + +size.size(3.5rem) + +position.position(absolute, right 0, top 0) .page-content-header__alert background-color: var(--danger-tint) color: var(--danger-text) - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) text-align: center padding: .5rem 1rem border: solid 1px var(--danger) diff --git a/app/javascript/stylesheets/application/blocks/page-content/_page-content-members.sass b/app/javascript/stylesheets/application/blocks/page-content/_page-content-members.sass index e9931541689..566648e3736 100644 --- a/app/javascript/stylesheets/application/blocks/page-content/_page-content-members.sass +++ b/app/javascript/stylesheets/application/blocks/page-content/_page-content-members.sass @@ -1,3 +1,7 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .page-content-members background: var(--base) padding: .75rem 1rem @@ -5,7 +9,7 @@ border: solid 1px var(--border-shade) .page-content-members__title - +text-block(.8125rem 1.4, 600) + +text.text-block(.8125rem 1.4, 600) .page-content-members__items display: flex @@ -15,16 +19,16 @@ .page-content-members__item display: flex gap: .25rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .875rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .75rem .a-user-name - +text-block(1em 1.4) + +text.text-block(1em 1.4) color: var(--default-text) .page-content-members__user-icon - +media-breakpoint-up(md) - +size(1.5rem) - +media-breakpoint-down(sm) - +size(1.25rem) + +break-points.media-breakpoint-up(md) + +size.size(1.5rem) + +break-points.media-breakpoint-down(sm) + +size.size(1.25rem) diff --git a/app/javascript/stylesheets/application/blocks/page-content/_page-content-prev-next.sass b/app/javascript/stylesheets/application/blocks/page-content/_page-content-prev-next.sass index 35f5e0aeecd..6a75607f545 100644 --- a/app/javascript/stylesheets/application/blocks/page-content/_page-content-prev-next.sass +++ b/app/javascript/stylesheets/application/blocks/page-content/_page-content-prev-next.sass @@ -1,3 +1,6 @@ +@use "../../../config/mixins/link" +@use "../../../config/mixins/text" + .page-content-prev-next display: flex justify-content: space-between @@ -8,9 +11,9 @@ max-width: 33.33% .page-content-prev-next__item-link - +text-block(.8125rem 1.4, block center nowrap) + +text.text-block(.8125rem 1.4, block center nowrap) color: var(--main) - +hover-link-reversal + +link.hover-link-reversal &.is-prev text-align: left &.is-next diff --git a/app/javascript/stylesheets/application/blocks/page-content/_page-content.sass b/app/javascript/stylesheets/application/blocks/page-content/_page-content.sass index 7c8b5949f72..371092acbe2 100644 --- a/app/javascript/stylesheets/application/blocks/page-content/_page-content.sass +++ b/app/javascript/stylesheets/application/blocks/page-content/_page-content.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/break-points" + .page-content &.is-products, &.is-questions, @@ -5,12 +7,12 @@ &.is-users width: 100% &:not(:first-child) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-top: 1.25rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-top: 1rem &:not(:last-child) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-bottom: 2rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-bottom: 1rem diff --git a/app/javascript/stylesheets/application/blocks/page/_page-body.sass b/app/javascript/stylesheets/application/blocks/page/_page-body.sass index 73e42b1c462..326a918a4ae 100644 --- a/app/javascript/stylesheets/application/blocks/page/_page-body.sass +++ b/app/javascript/stylesheets/application/blocks/page/_page-body.sass @@ -1,39 +1,42 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/short-text-style" + .page-body padding-block: 1.5rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 1 display: flex flex-direction: column min-height: calc(100vh - 321px) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-block: 1.125rem .page-body__inner position: relative - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) flex: 1 .page-body__rows display: flex flex-direction: column - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) gap: 1.25rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: 1rem > * width: 100% .page-body__columns - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) display: flex gap: 1.5rem position: relative &.is-reverse display: flex - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex-direction: row gap: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-direction: column-reverse gap: 1rem .page-body__column @@ -49,10 +52,10 @@ flex: 0 0 14rem .page-body__description - +short-text-style - +media-breakpoint-up(md) + +short-text-style.short-text-style + +break-points.media-breakpoint-up(md) font-size: .875rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .8125rem &:not(:last-child) margin-bottom: 1.5em diff --git a/app/javascript/stylesheets/application/blocks/page/_page-header-actions.sass b/app/javascript/stylesheets/application/blocks/page/_page-header-actions.sass index f12bdaaffed..62e667aeffd 100644 --- a/app/javascript/stylesheets/application/blocks/page/_page-header-actions.sass +++ b/app/javascript/stylesheets/application/blocks/page/_page-header-actions.sass @@ -1,27 +1,30 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" + .page-header-actions - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-inline: -1rem .page-header-actions__items display: flex gap: .5rem justify-content: center - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-inline: 1rem .page-header-actions__item position: relative > * width: 100% - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) min-width: 10rem display: flex justify-content: center - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex: 1 max-width: 50% &:first-child:last-child max-width: 100% .page-header-actions__item-help - +position(absolute, right -.25rem, top -.25rem) + +position.position(absolute, right -.25rem, top -.25rem) diff --git a/app/javascript/stylesheets/application/blocks/page/_page-header.sass b/app/javascript/stylesheets/application/blocks/page/_page-header.sass index 0360cfc108a..d4e66a5a5ce 100644 --- a/app/javascript/stylesheets/application/blocks/page/_page-header.sass +++ b/app/javascript/stylesheets/application/blocks/page/_page-header.sass @@ -1,17 +1,22 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .page-header background-color: var(--base) .page-header__inner - +position(relative) + +position.position(relative) display: flex - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) height: 3.25rem align-items: center justify-content: space-between - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) padding-block: .75rem flex-direction: column - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-block: .5rem flex-direction: column gap: .5rem @@ -20,7 +25,7 @@ display: flex align-items: center flex: 1 - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) max-width: calc(100% - 21rem) .page-header__title @@ -32,20 +37,20 @@ overflow: hidden text-overflow: ellipsis white-space: nowrap - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) font-size: 1.25rem - +media-breakpoint-down(md) + +break-points.media-breakpoint-down(md) font-size: 1.125rem flex: 1 img - +size(2.5rem auto) + +size.size(2.5rem auto) margin-right: .5rem - +media-breakpoint-down(sm) - +text-block(1rem 1.4) + +break-points.media-breakpoint-down(sm) + +text.text-block(1rem 1.4) color: var(--main) .page-header__start & align-self: center .page-header__action - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: none diff --git a/app/javascript/stylesheets/application/blocks/page/_page-main-header-actions.sass b/app/javascript/stylesheets/application/blocks/page/_page-main-header-actions.sass index 615c185aea8..36dbd4eb513 100644 --- a/app/javascript/stylesheets/application/blocks/page/_page-main-header-actions.sass +++ b/app/javascript/stylesheets/application/blocks/page/_page-main-header-actions.sass @@ -1,14 +1,16 @@ +@use "../../../config/mixins/break-points" + .page-main-header-actions__items display: flex gap: .5rem justify-content: center .page-main-header-actions__item - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) min-width: 10rem display: flex justify-content: center - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex: 1 &.is-remove .is-muted diff --git a/app/javascript/stylesheets/application/blocks/page/_page-main-header.sass b/app/javascript/stylesheets/application/blocks/page/_page-main-header.sass index 153e18eacaa..5438c93f36c 100644 --- a/app/javascript/stylesheets/application/blocks/page/_page-main-header.sass +++ b/app/javascript/stylesheets/application/blocks/page/_page-main-header.sass @@ -1,10 +1,13 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .page-main-header__inner padding-block: .5rem display: flex - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) min-height: calc(3.5rem - 1px) align-items: center - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-direction: column gap: .5rem @@ -17,7 +20,7 @@ .page-main-header__title color: var(--main) font-weight: 700 - +media-breakpoint-up(md) - +text-block(1.125rem 1.4) - +media-breakpoint-down(sm) - +text-block(1rem 1.4) + +break-points.media-breakpoint-up(md) + +text.text-block(1.125rem 1.4) + +break-points.media-breakpoint-down(sm) + +text.text-block(1rem 1.4) diff --git a/app/javascript/stylesheets/application/blocks/page/_page-optional-header.sass b/app/javascript/stylesheets/application/blocks/page/_page-optional-header.sass index 1c11502551a..d96335294a6 100644 --- a/app/javascript/stylesheets/application/blocks/page/_page-optional-header.sass +++ b/app/javascript/stylesheets/application/blocks/page/_page-optional-header.sass @@ -1,18 +1,21 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .page-optional-header padding-block: .5rem background-color: var(--background) .page-optional-header__inner - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex align-items: center .page-optional-header__start - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 1 .page-optional-header__title - +text-block(1rem 1.4) + +text.text-block(1rem 1.4) align-items: center display: flex text-align: center diff --git a/app/javascript/stylesheets/application/blocks/page/_page-tabs.sass b/app/javascript/stylesheets/application/blocks/page/_page-tabs.sass index 3d452c857ff..b9e6bb34fc9 100644 --- a/app/javascript/stylesheets/application/blocks/page/_page-tabs.sass +++ b/app/javascript/stylesheets/application/blocks/page/_page-tabs.sass @@ -1,3 +1,9 @@ +@use "../../../config/mixins/border-radius" +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .page-tabs background-color: var(--base) border-bottom: solid 1px var(--border) @@ -12,26 +18,26 @@ padding-inline: 1rem .page-tabs__item - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) min-width: 8.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) min-width: 7rem .page-tabs__item-link - +flex-link - +text-block(.825rem 1, 600 nowrap) + +link.flex-link + +text.text-block(.825rem 1, 600 nowrap) color: var(--muted-text) align-items: center justify-content: center background-color: var(--base) padding-inline: 1.25rem - +border-radius(top, .25rem) + +border-radius.border-radius(top, .25rem) border: solid 1px var(--border) - +position(relative) + +position.position(relative) transition: all .2s ease-out - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) height: 2.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) height: 2.75rem font-size: .75rem &:hover @@ -49,4 +55,4 @@ background-color: var(--background-semi-shade) .page-tabs__item-count - +position(right .125rem, top .125rem) + +position.position(right .125rem, top .125rem) diff --git a/app/javascript/stylesheets/application/blocks/page/_page.sass b/app/javascript/stylesheets/application/blocks/page/_page.sass index 37c7bf49334..b0a2d9f83d3 100644 --- a/app/javascript/stylesheets/application/blocks/page/_page.sass +++ b/app/javascript/stylesheets/application/blocks/page/_page.sass @@ -1,8 +1,10 @@ +@use "../../../config/mixins/break-points" + .page height: 100% display: flex flex-direction: column - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 1 .page-main diff --git a/app/javascript/stylesheets/application/blocks/practice/_categories.sass b/app/javascript/stylesheets/application/blocks/practice/_categories.sass index b77aedc6b30..47ff5a714ce 100644 --- a/app/javascript/stylesheets/application/blocks/practice/_categories.sass +++ b/app/javascript/stylesheets/application/blocks/practice/_categories.sass @@ -1,35 +1,41 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .is-hidden-users .a-user-icons display: none .categories-item &:not(:last-child) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-bottom: 3rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-bottom: 2rem .categories-item__title - +text-block(1.5rem 1.4, 700) + +text.text-block(1.5rem 1.4, 700) color: var(--main-text) position: relative - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1.25rem .stamp - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) right: -3rem top: -.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) right: -3rem top: -.75rem transform: rotate(25deg) scale(.7) .categories-item__show-handle - +size(2rem) + +size.size(2rem) display: flex align-items: center justify-content: center cursor: pointer - +text-block(1rem 1) + +text.text-block(1rem 1) color: var(--muted-text) transition: all .2s ease-out &:hover @@ -46,21 +52,21 @@ clear: both .categories-item__description - +position(relative) + +position.position(relative) margin-bottom: 1rem .categories-item__edit float: right margin-left: .5rem - +position(relative, top -.25rem) + +position.position(relative, top -.25rem) z-index: 2 .categories-item__edit-link - +size(2rem) - +flex-link + +size.size(2rem) + +link.flex-link align-items: center justify-content: center - +text-block(1rem 1) + +text.text-block(1rem 1) color: var(--muted-text) transition: all .2s ease-out &:hover diff --git a/app/javascript/stylesheets/application/blocks/practice/_category-practices-item.sass b/app/javascript/stylesheets/application/blocks/practice/_category-practices-item.sass index 2f7332a00fd..9b820834514 100644 --- a/app/javascript/stylesheets/application/blocks/practice/_category-practices-item.sass +++ b/app/javascript/stylesheets/application/blocks/practice/_category-practices-item.sass @@ -1,15 +1,24 @@ +@use "../../../config/functions/color" +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/practice-color" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" +@use "../../../config/variables/colors" + .category-practices-item padding: .75rem 1rem - +position(relative) + +position.position(relative) &:not(:last-child) border-bottom: solid 1px var(--border-tint) &:nth-child(even) background-color: var(--background-more-tint) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-wrap: wrap padding: .5rem .75rem .75rem &.sortable-chosen - background-color: tint($warning, 90%) + background-color: color.tint(colors.$warning, 90%) &.is-skip-on background-color: var(--background-tint) &[draggable="false"] @@ -20,37 +29,37 @@ flex: 0 0 2.75rem .category-practices-item__anchor - +media-breakpoint-up(md) - +position(relative, top -3.5rem) + +break-points.media-breakpoint-up(md) + +position.position(relative, top -3.5rem) .category-practices-item__status - +text-block(.8125rem 1, 600) - +flex-link + +text.text-block(.8125rem 1, 600) + +link.flex-link align-items: center justify-content: center - +size(4rem 2.125rem) + +size.size(4rem 2.125rem) border-radius: .25rem - +practice-color + +practice-color.practice-color .category-practices-item__header display: flex - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: block .category-practices-item__title flex: 1 margin-right: .5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-right: 0 margin-bottom: .5rem .category-practices-item__title-link - +text-block(.875rem 1.4, flex) + +text.text-block(.875rem 1.4, flex) color: var(--default-text) align-items: center min-height: 1.875rem text-decoration: none - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .8125rem .a-badge margin-right: .25rem @@ -62,9 +71,9 @@ text-decoration: underline .category-practices-item__learning-time - +text-block(.75rem 1.4) + +text.text-block(.75rem 1.4) color: var(--muted-text) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-top: -.25rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-top: .5rem diff --git a/app/javascript/stylesheets/application/blocks/practice/_practice-content-actions.sass b/app/javascript/stylesheets/application/blocks/practice/_practice-content-actions.sass index 73ec6863d15..96a29b9f484 100644 --- a/app/javascript/stylesheets/application/blocks/practice/_practice-content-actions.sass +++ b/app/javascript/stylesheets/application/blocks/practice/_practice-content-actions.sass @@ -1,11 +1,14 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .practice-content-actions__description - +text-block(.75rem 1.5 0 .75rem, center) + +text.text-block(.75rem 1.5 0 .75rem, center) .practice-content-actions__items display: flex align-items: flex-end justify-content: center - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-direction: column .practice-content-actions__item @@ -13,7 +16,7 @@ > * width: 10rem max-width: 100% - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: 100% padding-inline: 0 &:nth-child(2), diff --git a/app/javascript/stylesheets/application/blocks/practice/_practice-content.sass b/app/javascript/stylesheets/application/blocks/practice/_practice-content.sass index 6ad367a62e0..913cb905f82 100644 --- a/app/javascript/stylesheets/application/blocks/practice/_practice-content.sass +++ b/app/javascript/stylesheets/application/blocks/practice/_practice-content.sass @@ -1,3 +1,8 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/text" +@use "../../../config/variables/colors" + .practice-content position: relative display: block @@ -16,28 +21,28 @@ .practice-content__body-notice border: solid 1px var(--success) margin-top: 1rem - background-color: rgba($success, .1) - +media-breakpoint-up(md) + background-color: rgba(colors.$success, .1) + +break-points.media-breakpoint-up(md) padding: .75rem .875rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .375rem .625rem p - +text-block(.875rem 1.5) + +text.text-block(.875rem 1.5) color: var(--success-text) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .75rem .card-footer__alert text-align: center margin-top: 1em - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .875rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .75rem >a - +text-block(1em 1.5) + +text.text-block(1em 1.5) color: var(--danger) - +hover-link-reversal + +link.hover-link-reversal .js-markdown-view display: none diff --git a/app/javascript/stylesheets/application/blocks/practice/_practice-contents.sass b/app/javascript/stylesheets/application/blocks/practice/_practice-contents.sass index ec1175f88dd..26ca41bd53a 100644 --- a/app/javascript/stylesheets/application/blocks/practice/_practice-contents.sass +++ b/app/javascript/stylesheets/application/blocks/practice/_practice-contents.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/size" + .practice-contents__pub-date margin-bottom: .75rem @@ -10,7 +12,7 @@ .a-meta font-size: 1em .a-help - +size(1rem) + +size.size(1rem) font-size: .75em margin-left: .375em transition: all .2s ease-out diff --git a/app/javascript/stylesheets/application/blocks/practice/_practice-first-actions.sass b/app/javascript/stylesheets/application/blocks/practice/_practice-first-actions.sass index d8aa8d00d42..91e47c67f10 100644 --- a/app/javascript/stylesheets/application/blocks/practice/_practice-first-actions.sass +++ b/app/javascript/stylesheets/application/blocks/practice/_practice-first-actions.sass @@ -1,15 +1,17 @@ +@use "../../../config/mixins/break-points" + .practice-first-actions width: 100% - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex .practice-first-actions__start flex: 1 .practice-first-actions__end - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) min-width: 6rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: 100% .is-inactive background-color: var(--background-semi-shade) diff --git a/app/javascript/stylesheets/application/blocks/practice/_practice-status-buttons.sass b/app/javascript/stylesheets/application/blocks/practice/_practice-status-buttons.sass index 62f5d274713..88e1eb596cc 100644 --- a/app/javascript/stylesheets/application/blocks/practice/_practice-status-buttons.sass +++ b/app/javascript/stylesheets/application/blocks/practice/_practice-status-buttons.sass @@ -1,3 +1,8 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/practice-color" +@use "../../../config/mixins/text" + .practice-status-buttons__start text-align: center width: 100% @@ -5,21 +10,21 @@ align-items: center .practice-status-buttons__label - +media-breakpoint-up(md) - +text-block(.75rem, 600 nowrap) + +break-points.media-breakpoint-up(md) + +text.text-block(.75rem, 600 nowrap) margin-right: 1em - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: none .practice-status-buttons__items white-space: nowrap flex: 1 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: 25rem .practice-status-buttons__item flex: 1 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: 4.75rem .practice-status-buttons__button @@ -30,19 +35,19 @@ border-color: var(--background-shade) transition: all .2s ease-out &:hover - +practice-hover-color(true) + +practice-color.practice-hover-color(true) &.is-active pointer-events: none - +practice-color(true) - +position(relative, 1) + +practice-color.practice-color(true) + +position.position(relative, 1) .practice-status__buttons-item - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: 33.33% .a-button width: 100% .practice-status-buttons__note - +text-block(.75rem 1.4, left) + +text.text-block(.75rem 1.4, left) color: var(--muted-text) margin-top: .5em diff --git a/app/javascript/stylesheets/application/blocks/practice/_sticky-message.sass b/app/javascript/stylesheets/application/blocks/practice/_sticky-message.sass index a33b39bdf69..34c522d8e57 100644 --- a/app/javascript/stylesheets/application/blocks/practice/_sticky-message.sass +++ b/app/javascript/stylesheets/application/blocks/practice/_sticky-message.sass @@ -1,13 +1,18 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .sticky-message - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) background-color: var(--success) width: 100% - +position(sticky, left 0, bottom 0, 2) + +position.position(sticky, left 0, bottom 0, 2) padding-block: .5rem - +text-block(.875rem 1.4, center) + +text.text-block(.875rem 1.4, center) color: var(--reversal-text) a - +hover-link-reversal + +link.hover-link-reversal color: var(--reversal-text) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: none diff --git a/app/javascript/stylesheets/application/blocks/question/_answer-badge.sass b/app/javascript/stylesheets/application/blocks/question/_answer-badge.sass index c5d263b1b7b..8b6408be369 100644 --- a/app/javascript/stylesheets/application/blocks/question/_answer-badge.sass +++ b/app/javascript/stylesheets/application/blocks/question/_answer-badge.sass @@ -1,18 +1,23 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .answer-badge border: double .1875rem var(--stamp-color) border-radius: .75rem - +size(4rem 3.5rem) + +size.size(4rem 3.5rem) padding: .125rem - +position(absolute, right 0, top -.125rem, 1) + +position.position(absolute, right 0, top -.125rem, 1) transform: rotate(25deg) - +text-block(.625rem 1, flex center) + +text.text-block(.625rem 1, flex center) color: var(--stamp-color) flex-direction: column align-items: center justify-content: center pointer-events: none - +media-breakpoint-down(sm) - +position(absolute, left 80%, top 0) + +break-points.media-breakpoint-down(sm) + +position.position(absolute, left 80%, top 0) .answer-badge__icon font-size: 1.5rem diff --git a/app/javascript/stylesheets/application/blocks/reaction/_reaction.sass b/app/javascript/stylesheets/application/blocks/reaction/_reaction.sass index 447635b1d19..96f0d8b1f0e 100644 --- a/app/javascript/stylesheets/application/blocks/reaction/_reaction.sass +++ b/app/javascript/stylesheets/application/blocks/reaction/_reaction.sass @@ -1,3 +1,8 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .reactions display: flex justify-content: space-between @@ -11,10 +16,10 @@ display: flex flex-wrap: wrap gap: .5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) overflow: hidden .reactions__dropdown & - +position(absolute, top 100%, left -1px, right -1px, 1) + +position.position(absolute, top 100%, left -1px, right -1px, 1) border: 1px solid var(--border) background-color: var(--background) padding: .5rem @@ -47,7 +52,7 @@ .reactions__item-count margin-left: .25rem - +text-block(.75rem 1) + +text.text-block(.75rem 1) .reactions__item-login-names display: none @@ -75,8 +80,8 @@ line-height: 1.4 .reactions__dropdown-toggle - +size(2.8125rem 2.375rem) - +text-block(1.25rem 1, flex) + +size.size(2.8125rem 2.375rem) + +text.text-block(1.25rem 1, flex) color: var(--main) cursor: pointer align-items: center @@ -123,4 +128,4 @@ padding-bottom: .5rem .reaction-user__avatar - +size(1.75rem) + +size.size(1.75rem) diff --git a/app/javascript/stylesheets/application/blocks/report/_learning-times.sass b/app/javascript/stylesheets/application/blocks/report/_learning-times.sass index 42ef17c89b7..aaf573e2648 100644 --- a/app/javascript/stylesheets/application/blocks/report/_learning-times.sass +++ b/app/javascript/stylesheets/application/blocks/report/_learning-times.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/text" + .learning-times flex: 1 display: flex @@ -7,7 +9,7 @@ display: flex align-items: center white-space: nowrap - +text-block(.8125rem 1.4, 600) + +text.text-block(.8125rem 1.4, 600) gap: .25rem .learning-times__items @@ -15,7 +17,7 @@ flex-wrap: wrap .learning-times__item - +text-block(.8125rem 1.4) + +text.text-block(.8125rem 1.4) color: var(--semi-muted-text) &:not(:last-child)::after content: "、" diff --git a/app/javascript/stylesheets/application/blocks/report/_stamp.sass b/app/javascript/stylesheets/application/blocks/report/_stamp.sass index c2a3b38c73d..effcbc42a76 100644 --- a/app/javascript/stylesheets/application/blocks/report/_stamp.sass +++ b/app/javascript/stylesheets/application/blocks/report/_stamp.sass @@ -1,18 +1,24 @@ +@use "../../../config/mixins/border" +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .stamp border: solid 1px var(--stamp-color) border-radius: .75rem pointer-events: none - +size(4rem 3.5rem) - +position(absolute, right -.25rem, top 0) + +size.size(4rem 3.5rem) + +position.position(absolute, right -.25rem, top 0) transform: rotate(25deg) - +text-block(.625rem 1, block center 400) + +text.text-block(.625rem 1, block center 400) color: var(--stamp-color) font-feature-settings: "palt" letter-spacing: 0 - +media-breakpoint-down(sm) - +position(right 0, top 0) + +break-points.media-breakpoint-down(sm) + +position.position(right 0, top 0) &.is-circle - +size(3.5rem) + +size.size(3.5rem) border-radius: 50% &.is-solved display: flex @@ -29,8 +35,8 @@ font-family: serif justify-content: center &.is-sm - +size(4.125em 2.25rem) - +position(absolute, right .5rem, top .5rem) + +size.size(4.125em 2.25rem) + +position.position(absolute, right .5rem, top .5rem) border-radius: .5rem display: flex align-items: center @@ -41,10 +47,10 @@ justify-content: center &.is-title, &.is-user-name - +size(100% 32%) + +size.size(100% 32%) &.is-created-at - +size(100% 36%) - +border(vertical, solid 1px var(--stamp-color)) + +size.size(100% 36%) + +border.border(vertical, solid 1px var(--stamp-color)) .stamp__content-inner max-width: 100% diff --git a/app/javascript/stylesheets/application/blocks/side/_side-tabs-contents.sass b/app/javascript/stylesheets/application/blocks/side/_side-tabs-contents.sass index 049ab4109a0..f68d27b9867 100644 --- a/app/javascript/stylesheets/application/blocks/side/_side-tabs-contents.sass +++ b/app/javascript/stylesheets/application/blocks/side/_side-tabs-contents.sass @@ -1,5 +1,8 @@ +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .side-tabs-contents - +position(relative, 1) + +position.position(relative, 1) #side-tabs-1:checked ~ .side-tabs-contents #side-tabs-content-1 display: block @@ -32,7 +35,7 @@ padding: .25rem .5rem font-size: .75rem .user-metas__item - +text-block(.75rem 1.6) + +text.text-block(.75rem 1.6) border: solid 1px var(--border) margin: -1px .user-metas__item-label diff --git a/app/javascript/stylesheets/application/blocks/side/_side-tabs-nav.sass b/app/javascript/stylesheets/application/blocks/side/_side-tabs-nav.sass index 43010e57d21..149052f67b7 100644 --- a/app/javascript/stylesheets/application/blocks/side/_side-tabs-nav.sass +++ b/app/javascript/stylesheets/application/blocks/side/_side-tabs-nav.sass @@ -1,6 +1,10 @@ +@use "../../../config/mixins/border-radius" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .side-tabs-nav__items display: flex - +position(relative, 2) + +position.position(relative, 2) overflow-y: hidden overflow-x: auto transform: translateY(1px) @@ -16,15 +20,15 @@ color: var(--default-text) .side-tabs-nav__item-link - +text-block(.8125rem 1.4, flex 600 center) + +text.text-block(.8125rem 1.4, flex 600 center) white-space: nowrap justify-content: center cursor: pointer padding: .75em 1em border: solid 1px var(--border) border-bottom: none - +position(relative, bottom -1px) - +border-radius(top, .25rem) + +position.position(relative, bottom -1px) + +border-radius.border-radius(top, .25rem) color: var(--muted-text) transition: all .2s ease-out .side-tabs-nav__item:not(:first-child) & diff --git a/app/javascript/stylesheets/application/blocks/side/_side-tabs.sass b/app/javascript/stylesheets/application/blocks/side/_side-tabs.sass index afef230061e..d03dcd63d54 100644 --- a/app/javascript/stylesheets/application/blocks/side/_side-tabs.sass +++ b/app/javascript/stylesheets/application/blocks/side/_side-tabs.sass @@ -1,5 +1,8 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" + .side-tabs - +media-breakpoint-up(lg) - +position(sticky, top 3.125rem) - +media-breakpoint-down(md) + +break-points.media-breakpoint-up(lg) + +position.position(sticky, top 3.125rem) + +break-points.media-breakpoint-down(md) margin-top: 1.5rem diff --git a/app/javascript/stylesheets/application/blocks/side/_user-statuses.sass b/app/javascript/stylesheets/application/blocks/side/_user-statuses.sass index a5cfc63bdad..8db234c5836 100644 --- a/app/javascript/stylesheets/application/blocks/side/_user-statuses.sass +++ b/app/javascript/stylesheets/application/blocks/side/_user-statuses.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/text" + .user-statuses padding: .75rem 1rem & + .a-card @@ -9,7 +11,7 @@ gap: .75rem .user-statuses__title - +text-block(.8125rem 1.4, 600) + +text.text-block(.8125rem 1.4, 600) .user-statuses__items flex: 1 @@ -26,4 +28,4 @@ display: flex justify-content: flex-end margin-top: .75rem - +text-block(.8125rem 1.4) + +text.text-block(.8125rem 1.4) diff --git a/app/javascript/stylesheets/application/blocks/static-pages/_thanks-message.sass b/app/javascript/stylesheets/application/blocks/static-pages/_thanks-message.sass index 17ab4710690..851323463c7 100644 --- a/app/javascript/stylesheets/application/blocks/static-pages/_thanks-message.sass +++ b/app/javascript/stylesheets/application/blocks/static-pages/_thanks-message.sass @@ -1,3 +1,6 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .thanks-message__header color: var(--reversal-text) & + .a-card @@ -8,9 +11,9 @@ text-align: center font-weight: 800 color: var(--main) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1.75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1.75rem .thanks-message__body @@ -19,10 +22,10 @@ display: flex flex-direction: column gap: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .875rem p - +text-block(1em 1.6 0 1em) + +text.text-block(1em 1.6 0 1em) &:last-child margin-bottom: 0 strong @@ -34,7 +37,7 @@ margin-inline: 0 .thanks-message__inputed-values-title - +text-block(.875rem 1.4, 800) + +text.text-block(.875rem 1.4, 800) background-color: var(--background-shade) padding: .25rem .5rem margin-bottom: 1rem diff --git a/app/javascript/stylesheets/application/blocks/static-pages/_thanks.sass b/app/javascript/stylesheets/application/blocks/static-pages/_thanks.sass index 7b7c53a7e43..5ab897e2843 100644 --- a/app/javascript/stylesheets/application/blocks/static-pages/_thanks.sass +++ b/app/javascript/stylesheets/application/blocks/static-pages/_thanks.sass @@ -1,3 +1,7 @@ +@use "../../../config/mixins/link" +@use "../../../config/mixins/text" +@use "../../../config/variables/colors" + .thanks max-width: 26rem padding-inline: 1rem @@ -16,15 +20,15 @@ border-radius: .25rem .thanks__icon - +text-block(4rem 1 0 .5rem, center) + +text.text-block(4rem 1 0 .5rem, center) color: var(--main) .thanks__title - +text-block(.875rem 1.4 0 .75rem, center 600) + +text.text-block(.875rem 1.4 0 .75rem, center 600) .thanks__message p - +text-block(.75rem 1.6, center) + +text.text-block(.75rem 1.6, center) a - +default-link - +hover-link-reversal + +colors.default-link + +link.hover-link-reversal diff --git a/app/javascript/stylesheets/application/blocks/tags/_random-tags.sass b/app/javascript/stylesheets/application/blocks/tags/_random-tags.sass index a6aa315cc69..151a893076e 100644 --- a/app/javascript/stylesheets/application/blocks/tags/_random-tags.sass +++ b/app/javascript/stylesheets/application/blocks/tags/_random-tags.sass @@ -1,9 +1,14 @@ +@use "../../../config/mixins/font-awsome" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .random-tags-item &:not(:last-child) border-bottom: solid 1px var(--border) .random-tags-item__link - +flex-link + +link.flex-link padding-left: 1rem padding-right: .5rem padding-block: .5rem @@ -14,13 +19,13 @@ background-color: var(--primary-tint) .random-tags-item__link-inner - +position(relative) + +position.position(relative) flex: 1 padding-right: 2em .random-tags-item__count - +position(absolute, right 0, top 2px) - +text-block(.625rem, flex center) + +position.position(absolute, right 0, top 2px) + +text.text-block(.625rem, flex center) color: var(--default-text) justify-content: center align-items: center @@ -30,7 +35,7 @@ border-radius: 1em .random-tags-item__name - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) color: var(--semi-muted-text) .is-first &, .is-second &, @@ -40,7 +45,7 @@ .is-second &::before, .is-third &::before margin-right: .5em - +fa(fas '\f521') + +font-awsome.fa(fas '\f521') .is-first &, .is-first &::before color: var(--gold) diff --git a/app/javascript/stylesheets/application/blocks/tags/_tag-input.sass b/app/javascript/stylesheets/application/blocks/tags/_tag-input.sass index 78efb96720c..cdcd87e2643 100644 --- a/app/javascript/stylesheets/application/blocks/tags/_tag-input.sass +++ b/app/javascript/stylesheets/application/blocks/tags/_tag-input.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/text" + .tag-input margin-top: .5rem border-radius: .25rem @@ -6,7 +8,7 @@ border: dashed 1px var(--border) .tag-input__title - +text-block(.875rem 1.5 0 .5rem, block 600) + +text.text-block(.875rem 1.5 0 .5rem, block 600) .tag-input__items display: flex diff --git a/app/javascript/stylesheets/application/blocks/tags/_tag-links.sass b/app/javascript/stylesheets/application/blocks/tags/_tag-links.sass index 62a0c450976..7fcbbb3df43 100644 --- a/app/javascript/stylesheets/application/blocks/tags/_tag-links.sass +++ b/app/javascript/stylesheets/application/blocks/tags/_tag-links.sass @@ -1,8 +1,13 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/text" +@use "../../../config/variables/colors" + .tag-links .form-actions margin-top: 1rem .form-actions__item.is-main - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) min-width: 12rem .tag-links__items @@ -12,7 +17,7 @@ gap: .5rem .tag-links__item-link - +text-block(.6875rem 1.4, block) + +text.text-block(.6875rem 1.4, block) color: var(--muted-text) background-color: transparent border: solid 1px var(--muted-text) @@ -21,12 +26,12 @@ transition: all .2s ease-in text-decoration: none &:hover - background-color: rgba($base, .7) + background-color: rgba(colors.$base, .7) color: var(--semi-muted-text) border-color: var(--semi-muted-text) .tag-links__item-edit - +text-block(.75rem 1.4, block) + +text.text-block(.75rem 1.4, block) color: var(--main) - +hover-link-reversal + +link.hover-link-reversal cursor: pointer diff --git a/app/javascript/stylesheets/application/blocks/thread/_action-completed.sass b/app/javascript/stylesheets/application/blocks/thread/_action-completed.sass index dff0364dda1..19a7640ee13 100644 --- a/app/javascript/stylesheets/application/blocks/thread/_action-completed.sass +++ b/app/javascript/stylesheets/application/blocks/thread/_action-completed.sass @@ -1,13 +1,16 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/margin-padding" + .action-completed__action - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: 16rem - +margin(horizontal, auto) + +margin-padding.margin(horizontal, auto) .action-completed__description margin-top: .75rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: 28rem - +margin(horizontal, auto) + +margin-padding.margin(horizontal, auto) p font-size: .75rem line-height: 1.5 diff --git a/app/javascript/stylesheets/application/blocks/thread/_thread-comment-form.sass b/app/javascript/stylesheets/application/blocks/thread/_thread-comment-form.sass index 44764f6256a..fa63743b4cf 100644 --- a/app/javascript/stylesheets/application/blocks/thread/_thread-comment-form.sass +++ b/app/javascript/stylesheets/application/blocks/thread/_thread-comment-form.sass @@ -1,29 +1,33 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" + .thread-comment-form - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex .card-footer border-top: none &.is-action-completed - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-top: 1.5rem padding-left: var(--thread-header-author) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-top: 1rem .thread-comment-form__author flex: 0 0 var(--thread-header-author) - +size(var(--thread-header-author) 100%) + +size.size(var(--thread-header-author) 100%) padding-right: 2rem border-right: solid 1px var(--border-tint) .thread-comment-form__user-icon - +size(100% auto) + +size.size(100% auto) border-radius: 50% .thread-comment-form__form, .thread-action-completed-form__form flex: 1 - +position(relative) + +position.position(relative) overflow: hidden .thread-comment-form__action-completed diff --git a/app/javascript/stylesheets/application/blocks/thread/_thread-comment.sass b/app/javascript/stylesheets/application/blocks/thread/_thread-comment.sass index 1162cc4fd7c..9d52b8aab9d 100644 --- a/app/javascript/stylesheets/application/blocks/thread/_thread-comment.sass +++ b/app/javascript/stylesheets/application/blocks/thread/_thread-comment.sass @@ -1,49 +1,55 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .thread-comment - +position(relative) + +position.position(relative) border-radius: .25rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex margin-bottom: 2rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-left: 0 margin-bottom: 1rem .thread-comment__start - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 0 0 var(--thread-header-author) - +size(var(--thread-header-author) 100%) - +media-breakpoint-down(sm) + +size.size(var(--thread-header-author) 100%) + +break-points.media-breakpoint-down(sm) display: none .thread-comment__end - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: calc(100% - var(--thread-header-author)) flex: 1 .thread-comment__title - +text-block(.875rem 1.4, 600) - +media-breakpoint-up(md) + +text.text-block(.875rem 1.4, 600) + +break-points.media-breakpoint-up(md) margin-right: .5rem flex: 1 - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: flex .thread-comment__title-user-icon - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: none - +media-breakpoint-down(sm) - +size(1.5rem) + +break-points.media-breakpoint-down(sm) + +size.size(1.5rem) display: inline-block vertical-align: middle margin-right: .25rem .thread-comment__title-link - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) height: 100% display: inline-flex align-items: center - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: inline-block white-space: nowrap max-width: calc(100vw - 15.5rem) @@ -55,11 +61,11 @@ height: 1.4em .thread-comment__title-icon - +size(1.5rem) + +size.size(1.5rem) margin-right: .5rem .thread-comment__title-label - +text-block(.8125rem, block 400) + +text.text-block(.8125rem, block 400) color: var(--muted-text) margin-bottom: .125rem i @@ -70,39 +76,39 @@ min-height: 5rem padding-block: 1rem padding-inline: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .75rem word-wrap: break-word .thread-comment__user-icon - +size(3.5rem) + +size.size(3.5rem) object-fit: cover border-radius: 50% - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: none .thread-comment__company-logo - +size(3.5rem) + +size.size(3.5rem) object-fit: cover border-radius: .25rem border: solid 1px var(--border) background-color: white - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-top: .5rem - +media-breakpoint-down(sm) - +size(2.25rem) + +break-points.media-breakpoint-down(sm) + +size.size(2.25rem) float: right margin-left: .75rem margin-bottom: .5rem .thread-comment__created-at display: block - +text-block(.8125rem 1.4, nowrap) + +text.text-block(.8125rem 1.4, nowrap) color: var(--muted-text) - +hover-link-reversal + +link.hover-link-reversal cursor: pointer - +position(relative) - +media-breakpoint-down(sm) + +position.position(relative) + +break-points.media-breakpoint-down(sm) font-size: .75rem &:active, &:focus, @@ -114,9 +120,9 @@ background-color: rgba(black, .4) border-radius: .125rem padding: .25rem - +text-block(.625rem 1) + +text.text-block(.625rem 1) color: var(--reversal-text) - +position(absolute, left 0, top 100%) + +position.position(absolute, left 0, top 100%) &.a-placeholder width: 30% height: 1.4em @@ -129,9 +135,9 @@ align-items: center .thread-comment__actions-item-link - +text-block(1.25rem 1, center flex) + +text.text-block(1.25rem 1, center flex) color: var(--muted-text) - +size(2.375rem) + +size.size(2.375rem) align-items: center justify-content: center border-radius: 50% diff --git a/app/javascript/stylesheets/application/blocks/thread/_thread-comments-more.sass b/app/javascript/stylesheets/application/blocks/thread/_thread-comments-more.sass index 86e6d706482..6e0f0a746f8 100644 --- a/app/javascript/stylesheets/application/blocks/thread/_thread-comments-more.sass +++ b/app/javascript/stylesheets/application/blocks/thread/_thread-comments-more.sass @@ -1,23 +1,28 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/variables/colors" + .thread-comments-more - +position(relative) - +media-breakpoint-up(md) + +position.position(relative) + +break-points.media-breakpoint-up(md) margin-bottom: 2rem padding-left: var(--thread-header-author) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-left: 0 margin-bottom: 1rem &::before, &::after content: '' display: block - +size(100% 7px) - background: repeating-linear-gradient(-45deg, $border-shade, $border-shade 3px, transparent 3px, transparent 6px) + +size.size(100% 7px) + background: repeating-linear-gradient(-45deg, colors.$border-shade, colors.$border-shade 3px, transparent 3px, transparent 6px) .thread-comments-more__inner padding-block: 1rem .thread-comments-more__action - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: 16rem padding-inline: .375rem margin-inline: auto diff --git a/app/javascript/stylesheets/application/blocks/thread/_thread-comments.sass b/app/javascript/stylesheets/application/blocks/thread/_thread-comments.sass index 24e41cec941..7f0e76621ab 100644 --- a/app/javascript/stylesheets/application/blocks/thread/_thread-comments.sass +++ b/app/javascript/stylesheets/application/blocks/thread/_thread-comments.sass @@ -1,25 +1,31 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" +@use "../../../config/variables/layout" + .thread-comments - +position(relative) + +position.position(relative) .thread-comments__header - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-bottom: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-bottom: 1rem .thread-comments__title align-items: center display: flex font-weight: 700 - +media-breakpoint-up(md) - +text-block(1.125rem 1.45) - +media-breakpoint-down(sm) - +text-block(1rem 1.45) + +break-points.media-breakpoint-up(md) + +text.text-block(1.125rem 1.45) + +break-points.media-breakpoint-down(sm) + +text.text-block(1rem 1.45) .thread-comments__title-count - +text-block(.875rem 1, 600 flex) + +text.text-block(.875rem 1, 600 flex) align-items: center - +size(auto 1.25rem) + +size.size(auto 1.25rem) background-color: var(--base) padding-inline: .5rem border-radius: 1.5rem @@ -27,5 +33,5 @@ .thread-comments .form-actions - +media-breakpoint-up(md) - padding-left: $thread-header-author + +break-points.media-breakpoint-up(md) + padding-left: layout.$thread-header-author diff --git a/app/javascript/stylesheets/application/blocks/thread/_thread-form.sass b/app/javascript/stylesheets/application/blocks/thread/_thread-form.sass index 0b544613055..0e9968f7b8b 100644 --- a/app/javascript/stylesheets/application/blocks/thread/_thread-form.sass +++ b/app/javascript/stylesheets/application/blocks/thread/_thread-form.sass @@ -1,20 +1,22 @@ +@use "../../../config/mixins/break-points" + .thread-form - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1rem 2rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .75rem 1rem .thread-form__actions margin-top: 1rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex justify-content: center gap: .75rem .thread-form__action - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 0 0 14rem max-width: 50% - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) &:not(:first-child) margin-top: .5rem diff --git a/app/javascript/stylesheets/application/blocks/thread/_thread-header.sass b/app/javascript/stylesheets/application/blocks/thread/_thread-header.sass index 4936ea91d5a..2edc739be37 100644 --- a/app/javascript/stylesheets/application/blocks/thread/_thread-header.sass +++ b/app/javascript/stylesheets/application/blocks/thread/_thread-header.sass @@ -1,8 +1,12 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" + .thread-header - +position(relative) - +media-breakpoint-up(md) + +position.position(relative) + +break-points.media-breakpoint-up(md) padding: 1rem 2rem .75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: 2.25rem .75rem .5rem .thread-header__user-icon-link @@ -12,7 +16,7 @@ align-items: center .thread-header__user-icon - +media-breakpoint-up(md) - +size(1rem) - +media-breakpoint-down(sm) - +size(1rem) + +break-points.media-breakpoint-up(md) + +size.size(1rem) + +break-points.media-breakpoint-down(sm) + +size.size(1rem) diff --git a/app/javascript/stylesheets/application/blocks/user/_active-practices-list.sass b/app/javascript/stylesheets/application/blocks/user/_active-practices-list.sass index 7ff5ca222c9..2ce1ac0765c 100644 --- a/app/javascript/stylesheets/application/blocks/user/_active-practices-list.sass +++ b/app/javascript/stylesheets/application/blocks/user/_active-practices-list.sass @@ -1,3 +1,7 @@ +@use "../../../config/mixins/font-awsome" +@use "../../../config/mixins/link" +@use "../../../config/mixins/text" + .active-practices-list__items margin-bottom: -.25rem @@ -5,13 +9,13 @@ border-bottom: dotted .0625rem var(--border-tint) .active-practices-list-item__link - +text-block(.875rem 1.55, block) + +text.text-block(.875rem 1.55, block) color: var(--main) padding-block: .5rem padding-inline: 1rem - +hover-link + +link.hover-link &::before - +fa(fas '\f060') + +font-awsome.fa(fas '\f060') display: inline-block margin-right: .5rem color: var(--accent) diff --git a/app/javascript/stylesheets/application/blocks/user/_companies-item.sass b/app/javascript/stylesheets/application/blocks/user/_companies-item.sass index 2b496f5fa50..335caac7be7 100644 --- a/app/javascript/stylesheets/application/blocks/user/_companies-item.sass +++ b/app/javascript/stylesheets/application/blocks/user/_companies-item.sass @@ -1,8 +1,13 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .companies-item height: 100% .companies-item__inner - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) height: 100% .companies-item__header @@ -15,35 +20,35 @@ gap: 1rem .companies-item__header-start - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 0 0 3.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex: 0 0 2.5rem .companies-item__user-icon-image background-color: white - +media-breakpoint-up(md) - +size(3.5rem) - +media-breakpoint-down(sm) - +size(2.5rem) + +break-points.media-breakpoint-up(md) + +size.size(3.5rem) + +break-points.media-breakpoint-down(sm) + +size.size(2.5rem) .companies-item__header-end flex: 1 .companies-item__name - +text-block(1em 1.4, 600 block) + +text.text-block(1em 1.4, 600 block) color: var(--main) margin-bottom: .125rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1.125rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1rem .companies-item__name-link color: var(--main-text) display: block - +hover-link + +link.hover-link .companies-item__body padding: 1rem @@ -54,4 +59,4 @@ .companies-item__description p - +text-block(.75rem 1.6) + +text.text-block(.75rem 1.6) diff --git a/app/javascript/stylesheets/application/blocks/user/_completed-practices-progress.sass b/app/javascript/stylesheets/application/blocks/user/_completed-practices-progress.sass index 3916c542a5f..e21bfff198d 100644 --- a/app/javascript/stylesheets/application/blocks/user/_completed-practices-progress.sass +++ b/app/javascript/stylesheets/application/blocks/user/_completed-practices-progress.sass @@ -1,3 +1,7 @@ +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + $bar-height: .75rem .completed-practices-progress padding: .75rem 1rem @@ -12,13 +16,13 @@ $bar-height: .75rem overflow: hidden .completed-practices-progress__bar - +size(100% $bar-height) + +size.size(100% $bar-height) background-color: var(--background-semi-shade) .completed-practices-progress__percentage-bar height: $bar-height background-color: var(--success) - +position(relative, top $bar-height * -1) + +position.position(relative, top $bar-height * -1) box-shadow: rgba(black, .2) 0 .0625rem .0625rem .completed-practices-progress__counts @@ -33,7 +37,7 @@ $bar-height: .75rem text-decoration: underline .completed-practices-progress__percentage - +text-block(.8125rem, right nowrap) + +text.text-block(.8125rem, right nowrap) .completed-practices-progress__number position: absolute @@ -42,7 +46,7 @@ $bar-height: .75rem background-color: var(--base) border: solid 1px var(--border) padding: .25rem .5rem - +text-block(.8125rem 1.4, right nowrap) + +text.text-block(.8125rem 1.4, right nowrap) border-radius: .25rem .completed-practices-progress__counts diff --git a/app/javascript/stylesheets/application/blocks/user/_following.sass b/app/javascript/stylesheets/application/blocks/user/_following.sass index fd55e71646e..d2cd4a88034 100644 --- a/app/javascript/stylesheets/application/blocks/user/_following.sass +++ b/app/javascript/stylesheets/application/blocks/user/_following.sass @@ -1,3 +1,7 @@ +@use "../../../config/mixins/font-awsome" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .following position: relative width: 100% @@ -26,16 +30,16 @@ position: relative padding-left: 1.5rem .following-option.is-active &::before - +fa(fas '\f00c') - +position(absolute, left 0, top 0) + +font-awsome.fa(fas '\f00c') + +position.position(absolute, left 0, top 0) .following-option__label - +text-block(.875rem 1.4, 600) + +text.text-block(.875rem 1.4, 600) color: var(--semi-muted-text) .following-option.is-active & color: var(--default-text) .following-option__desciption - +text-block(.75rem 1.5) + +text.text-block(.75rem 1.5) color: var(--muted-text) margin-top: .125rem diff --git a/app/javascript/stylesheets/application/blocks/user/_group-company-name.sass b/app/javascript/stylesheets/application/blocks/user/_group-company-name.sass index d2a2d0784b1..fc1018c8de9 100644 --- a/app/javascript/stylesheets/application/blocks/user/_group-company-name.sass +++ b/app/javascript/stylesheets/application/blocks/user/_group-company-name.sass @@ -1,7 +1,10 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/size" + .group-company-name - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1.125rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1rem .group-company-name__link @@ -12,11 +15,11 @@ .group-company-name__icon display: block - +size(2.5rem) + +size.size(2.5rem) margin-right: .75rem .group-company-name__icon-image - +size(100%) + +size.size(100%) object-fit: cover border-radius: .25rem @@ -27,7 +30,7 @@ .group-company-name__label display: block font-weight: 600 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-right: .25em a:hover & text-decoration: underline diff --git a/app/javascript/stylesheets/application/blocks/user/_niconico-calendar.sass b/app/javascript/stylesheets/application/blocks/user/_niconico-calendar.sass index 073f8bdafd2..a2d7e3adabe 100644 --- a/app/javascript/stylesheets/application/blocks/user/_niconico-calendar.sass +++ b/app/javascript/stylesheets/application/blocks/user/_niconico-calendar.sass @@ -1,3 +1,8 @@ +@use "../../../config/mixins/link" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" +@use "../../../config/variables/colors" + .niconico-calendar-nav display: flex justify-content: center @@ -7,12 +12,12 @@ .niconico-calendar-nav__previous, .niconico-calendar-nav__next - +size(2.75rem) + +size.size(2.75rem) display: flex align-items: center justify-content: center cursor: pointer - +hover-link + +link.hover-link transition: all .2s ease-out &:hover color: var(--main-text) @@ -38,7 +43,7 @@ .niconico-calendar__header-day width: calc(100% / 7) - +text-block(.75rem 1, center) + +text.text-block(.75rem 1, center) padding-block: .25em &.is-sunday color: var(--danger) @@ -62,33 +67,33 @@ color: var(--success) .niconico-calendar__day-inner - +block-link + +link.block-link padding-block: .25rem .125rem - +size(100%) + +size.size(100%) a.niconico-calendar__day-inner transition: all .2s ease-out cursor: pointer &:hover - background-color: rgba($warning, .1) + background-color: rgba(colors.$warning, .1) box-shadow: var(--warning) 0 0 0 1px inset position: relative .niconico-calendar__day-label - +text-block(.625rem 1, center) + +text.text-block(.625rem 1, center) color: var(--default-text) margin-bottom: .125rem .niconico-calendar__day.is-blank & color: var(--muted-text) .niconico-calendar__day-value - +text-block(1.75rem 1, center flex) + +text.text-block(1.75rem 1, center flex) align-items: center justify-content: center - +size(100% 1.875rem) + +size.size(100% 1.875rem) .niconico-calendar__day.is-blank & color: var(--muted-text) font-size: 1.25rem .niconico-calendar__emotion-image - +size(1em) + +size.size(1em) diff --git a/app/javascript/stylesheets/application/blocks/user/_sns-links.sass b/app/javascript/stylesheets/application/blocks/user/_sns-links.sass index c25a90c3916..bc4d80a86a7 100644 --- a/app/javascript/stylesheets/application/blocks/user/_sns-links.sass +++ b/app/javascript/stylesheets/application/blocks/user/_sns-links.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/break-points" + .sns-links margin-top: .5rem display: flex @@ -6,7 +8,7 @@ justify-content: space-between .sns-links__items - +media-breakpoint-down(xs) + +break-points.media-breakpoint-down(xs) justify-content: center .sns-links__item-link diff --git a/app/javascript/stylesheets/application/blocks/user/_user-data.sass b/app/javascript/stylesheets/application/blocks/user/_user-data.sass index b1024806f99..7f0a205fc87 100644 --- a/app/javascript/stylesheets/application/blocks/user/_user-data.sass +++ b/app/javascript/stylesheets/application/blocks/user/_user-data.sass @@ -1,22 +1,26 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .user-data padding: 1rem 1.5rem - +position(relative) + +position.position(relative) display: flex flex-direction: column - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) gap: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .75rem gap: .75rem .user-data__description flex: 0 0 100% - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .9375rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .8125rem p - +text-block(1em 1.8 0 .8em) + +text.text-block(1em 1.8 0 .8em) &:last-child margin-bottom: 0 diff --git a/app/javascript/stylesheets/application/blocks/user/_user-grass.sass b/app/javascript/stylesheets/application/blocks/user/_user-grass.sass index 1016d450759..ce07bb92fb5 100644 --- a/app/javascript/stylesheets/application/blocks/user/_user-grass.sass +++ b/app/javascript/stylesheets/application/blocks/user/_user-grass.sass @@ -1,6 +1,10 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/size" + .user-grass padding: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .75rem .user-grass__link @@ -19,12 +23,12 @@ .user-grass-nav__previous, .user-grass-nav__next - +size(2.75rem) + +size.size(2.75rem) display: flex align-items: center justify-content: center cursor: pointer - +hover-link + +link.hover-link transition: all .2s ease-out &:hover color: var(--main-text) diff --git a/app/javascript/stylesheets/application/blocks/user/_user-group.sass b/app/javascript/stylesheets/application/blocks/user/_user-group.sass index 31c7daf67d6..726a5de70e1 100644 --- a/app/javascript/stylesheets/application/blocks/user/_user-group.sass +++ b/app/javascript/stylesheets/application/blocks/user/_user-group.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/break-points" + .user-group padding: 1rem &:not(:first-child) @@ -6,15 +8,15 @@ .user-group__header display: flex gap: .5rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) justify-content: space-between - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-direction: column .user-group__title - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1rem .user-group__title-link @@ -22,9 +24,9 @@ color: var(--main-text) display: flex gap: .5rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) align-items: flex-end - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-direction: column .user-group__title.is-inline & flex-direction: row @@ -55,7 +57,7 @@ color: var(--muted-text) .user-group__counts - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-top: -.5rem flex: 1 max-width: 29rem diff --git a/app/javascript/stylesheets/application/blocks/user/_user-metas.sass b/app/javascript/stylesheets/application/blocks/user/_user-metas.sass index d0a7eb6cf78..3798c8f6794 100644 --- a/app/javascript/stylesheets/application/blocks/user/_user-metas.sass +++ b/app/javascript/stylesheets/application/blocks/user/_user-metas.sass @@ -1,3 +1,7 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" +@use "../../../config/variables/colors" + .user-metas background-color: var(--base) @@ -5,7 +9,7 @@ border: solid 1px var(--border) margin-bottom: -1px padding: .375rem .75rem - +text-block(.75rem 1.4, 600) + +text.text-block(.75rem 1.4, 600) background-color: var(--background-tint) position: relative @@ -17,14 +21,14 @@ .user-metas__items-label border-bottom: solid 1px var(--border) padding: .25rem .75rem - +text-block(.75rem 1.4, 600) + +text.text-block(.75rem 1.4, 600) background-color: var(--background) span font-weight: 400 .user-metas__item - +text-block(.75rem 1.4, flex) - +media-breakpoint-down(sm) + +text.text-block(.75rem 1.4, flex) + +break-points.media-breakpoint-down(sm) display: block &:nth-child(even) background-color: var(--input-background) @@ -36,7 +40,7 @@ border-right: dashed 1px var(--border) flex: 0 0 9rem padding: .375rem .5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) text-align: left border-right: none border-bottom: dashed 1px var(--border) @@ -56,5 +60,5 @@ .user-metas__item-value-text &.is-danger - color: $danger + color: colors.$danger font-weight: 700 diff --git a/app/javascript/stylesheets/application/blocks/user/_user-profile.sass b/app/javascript/stylesheets/application/blocks/user/_user-profile.sass index d9a353a608d..4221f5a24f7 100644 --- a/app/javascript/stylesheets/application/blocks/user/_user-profile.sass +++ b/app/javascript/stylesheets/application/blocks/user/_user-profile.sass @@ -1,17 +1,20 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/size" + .user-profile__icon - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) position: static text-align: center margin-bottom: .25rem .user-profile__user-icon-image - +media-breakpoint-up(md) - +size(5rem) - +media-breakpoint-down(sm) - +size(4rem) + +break-points.media-breakpoint-up(md) + +size.size(5rem) + +break-points.media-breakpoint-down(sm) + +size.size(4rem) .user-company-profile__description - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .9375rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .8125rem diff --git a/app/javascript/stylesheets/application/blocks/user/_user-secret-attributes.sass b/app/javascript/stylesheets/application/blocks/user/_user-secret-attributes.sass index 69c3365fa18..d0c8eaa15ed 100644 --- a/app/javascript/stylesheets/application/blocks/user/_user-secret-attributes.sass +++ b/app/javascript/stylesheets/application/blocks/user/_user-secret-attributes.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/text" + .user-secret-attributes font-size: .75rem border: solid 1px var(--border) @@ -6,7 +8,7 @@ margin-top: .25em .user-secret-attributes__title - +text-block(.75rem 1.4, 600) + +text.text-block(.75rem 1.4, 600) margin-bottom: .25em .user-secret-attributes__items diff --git a/app/javascript/stylesheets/application/blocks/user/_user-study-streak-tracker.sass b/app/javascript/stylesheets/application/blocks/user/_user-study-streak-tracker.sass new file mode 100644 index 00000000000..21d52cdd331 --- /dev/null +++ b/app/javascript/stylesheets/application/blocks/user/_user-study-streak-tracker.sass @@ -0,0 +1,65 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + +.streak-card + margin-bottom: 1.5rem + +.streak-container + display: flex + justify-content: center + +break-points.media-breakpoint-up(md) + gap: 1rem + +break-points.media-breakpoint-down(sm) + gap: .5rem + +.streak-item + flex: 1 + max-width: 10rem + display: flex + justify-content: center + align-items: center + +break-points.media-breakpoint-up(md) + padding-block: 1rem + +break-points.media-breakpoint-down(sm) + padding-block: .75rem + +.streak-item__content + display: flex + flex-direction: column + align-items: center + +.streak-item__days + display: flex + align-items: baseline + +.streak-item__number + font-weight: 700 + color: #f7941d + +break-points.media-breakpoint-up(md) + +text.text-block(2.5rem 1) + +break-points.media-breakpoint-down(sm) + +text.text-block(2rem 1) + +.streak-item__label + font-weight: 600 + text-align: center + +break-points.media-breakpoint-up(md) + +text.text-block(1rem 1.4) + +break-points.media-breakpoint-down(sm) + +text.text-block(.875rem 1.4) + +.streak-item__unit + text-align: center + color: var(--muted-text) + +break-points.media-breakpoint-up(md) + +text.text-block(1rem 1.4) + +break-points.media-breakpoint-down(sm) + +text.text-block(.75rem 1.4) + +.streak-item__period + margin-top: .125rem + text-align: center + +break-points.media-breakpoint-up(md) + +text.text-block(.875rem 1.4) + +break-points.media-breakpoint-down(sm) + +text.text-block(.75rem 1.4) diff --git a/app/javascript/stylesheets/application/blocks/user/_users-item.sass b/app/javascript/stylesheets/application/blocks/user/_users-item.sass index d48f3b688d7..56d56a3c87a 100644 --- a/app/javascript/stylesheets/application/blocks/user/_users-item.sass +++ b/app/javascript/stylesheets/application/blocks/user/_users-item.sass @@ -1,22 +1,28 @@ +@use "../../../config/mixins/border-radius" +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .users-item height: 100% container: users-item / inline-size .users-item__inactive-message background-color: var(--disabled) - +text-block(.625rem 1.4, center) + +text.text-block(.625rem 1.4, center) padding: .25rem - +border-radius(top, .1875rem) + +border-radius.border-radius(top, .1875rem) margin: -1px -1px -.25rem .users-item__inner - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) height: 100% display: flex flex-direction: column .users-item__header - +position(relative) + +position.position(relative) padding: .75rem 1rem border-bottom: solid 1px var(--border-tint) @@ -34,25 +40,25 @@ flex: 1 .users-item__icon - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) min-width: 3.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) min-width: 2.5rem .users-item__user-icon-image background-color: var(--base) - +media-breakpoint-up(md) - +size(3.5rem) - +media-breakpoint-down(sm) - +size(2.5rem) + +break-points.media-breakpoint-up(md) + +size.size(3.5rem) + +break-points.media-breakpoint-down(sm) + +size.size(2.5rem) .users-item__name - +text-block(1em 1.4, 600 block) + +text.text-block(1em 1.4, 600 block) color: var(--main) margin-bottom: .125rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1.125rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1rem i color: var(--danger) @@ -61,12 +67,12 @@ .users-item__body padding: .75rem 1rem 0 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 1 .users-item__description p - +text-block(.75rem 1.6) + +text.text-block(.75rem 1.6) .users-item__tags margin-top: .75rem @@ -77,7 +83,7 @@ padding-bottom: 1rem .user-item__company-logo-image - +size(3.5rem) + +size.size(3.5rem) min-width: 3.5rem object-fit: cover background-color: var(--base) diff --git a/app/javascript/stylesheets/atoms/_a-badge.sass b/app/javascript/stylesheets/atoms/_a-badge.sass index 95798bb280a..e5dcb067448 100644 --- a/app/javascript/stylesheets/atoms/_a-badge.sass +++ b/app/javascript/stylesheets/atoms/_a-badge.sass @@ -1,51 +1,55 @@ +@use "../config/mixins/badge" +@use "../config/mixins/button" +@use "../config/variables/colors" + .a-badge - +badge-base + +badge.badge-base // color &.is-primary - +badge-color($primary) + +badge.badge-color(colors.$primary) &.is-secondary - +badge-color($secondary) + +badge.badge-color(colors.$secondary) &.is-info - +badge-color($info) + +badge.badge-color(colors.$info) &.is-success - +badge-color($success) + +badge.badge-color(colors.$success) &.is-warning - +badge-color($warning) + +badge.badge-color(colors.$warning) &.is-danger - +badge-color($danger) + +badge.badge-color(colors.$danger) &.is-disabled - +badge-color($disabled) + +badge.badge-color(colors.$disabled) &.is-main - +badge-color($main) + +badge.badge-color(colors.$main) &.is-muted border: none - color: $muted-text + color: colors.$muted-text font-weight: 400 - background-color: $background + background-color: colors.$background &.is-dark-muted border: none - color: $semi-muted-text + color: colors.$semi-muted-text font-weight: 400 background-color: var(--background-semi-shade) //size &.is-xs - +button-size(.625rem, 1, .5) + +button.button-size(.625rem, 1, .5) font-weight: 500 &:not(:first-child) margin-left: .5em &:not(:last-child) margin-right: .5em &.is-sm - +button-size(.6875rem, 1, .5) + +button.button-size(.6875rem, 1, .5) font-weight: 600 &.is-md - +button-size(.8125rem, 1, .5) + +button.button-size(.8125rem, 1, .5) font-weight: 600 &.is-lg - +button-size(1rem, 1, .5) + +button.button-size(1rem, 1, .5) font-weight: 600 &.is-xl - +button-size(1.25rem, 1, .5) + +button.button-size(1.25rem, 1, .5) font-weight: 800 diff --git a/app/javascript/stylesheets/atoms/_a-block-check.sass b/app/javascript/stylesheets/atoms/_a-block-check.sass index c2b08ca7094..c68140a066d 100644 --- a/app/javascript/stylesheets/atoms/_a-block-check.sass +++ b/app/javascript/stylesheets/atoms/_a-block-check.sass @@ -1,3 +1,8 @@ +@use "../config/mixins/font-awsome" +@use "../config/mixins/position" +@use "../config/mixins/size" +@use "../config/mixins/text" + .a-block-check height: 100% @@ -5,7 +10,7 @@ background-color: var(--input-background) height: 100% min-height: 2.5rem - +text-block(.8125rem 1.4, flex center) + +text.text-block(.8125rem 1.4, flex center) gap: .25rem align-items: center justify-content: center @@ -32,7 +37,7 @@ color: var(--input-selected-text) .a-block-check &::before display: block - +position(absolute, left .75rem, top 50%) + +position.position(absolute, left .75rem, top 50%) transform: translateY(-50%) .form-item-block__item & border: none @@ -43,7 +48,7 @@ // radio .a-block-check.is-radio &::before content: '' - +size(.875rem) + +size.size(.875rem) border: solid 1px var(--input-border) border-radius: 50% background-color: var(--base) @@ -54,23 +59,23 @@ // checkbox .a-block-check.is-checkbox &::before content: '' - +size(.875rem) + +size.size(.875rem) border: solid 1px var(--input-border) border-radius: 3px background-color: var(--base) .a-block-check.is-checkbox input:checked + &::before border-color: var(--primary) background-color: var(--primary) - +fa(fas "\f00c") + +font-awsome.fa(fas "\f00c") color: var(--reversal-text) .a-block-check__name - +text-block(.875rem 1.4, block center) + +text.text-block(.875rem 1.4, block center) .a-block-check__image - +size(2rem) + +size.size(2rem) .a-block-check__label.has-icon & - +size(1.5rem) + +size.size(1.5rem) .a-block-check__account margin-left: .25em diff --git a/app/javascript/stylesheets/atoms/_a-button.sass b/app/javascript/stylesheets/atoms/_a-button.sass index 8bb2ff7cf24..78ff3927393 100644 --- a/app/javascript/stylesheets/atoms/_a-button.sass +++ b/app/javascript/stylesheets/atoms/_a-button.sass @@ -1,37 +1,46 @@ +@use "../config/mixins/border-radius" +@use "../config/mixins/break-points" +@use "../config/mixins/button" +@use "../config/mixins/font-awsome" +@use "../config/mixins/link" +@use "../config/mixins/position" +@use "../config/mixins/text" +@use "../config/variables/colors" + .a-button - +button-base + +button.button-base // color &.is-primary - +button-color($primary) + +button.button-color(colors.$primary) &.is-secondary - +button-color($secondary) + +button.button-color(colors.$secondary) &.is-active - +button-color($primary) + +button.button-color(colors.$primary) &.is-info - +button-color($info) + +button.button-color(colors.$info) &.is-success - +button-color($success) + +button.button-color(colors.$success) &.is-warning - +button-color($warning) + +button.button-color(colors.$warning) &.is-danger - +button-color($danger) + +button.button-color(colors.$danger) &.is-disabled - +button-color($disabled) + +button.button-color(colors.$disabled) &.is-main - +button-color($main) + +button.button-color(colors.$main) &.is-primary-border - +border-button-color($primary) + +button.border-button-color(colors.$primary) &.is-secondary-border - +border-button-color($secondary) + +button.border-button-color(colors.$secondary) &.is-muted border: none color: var(--muted-text) font-weight: 400 !important background-color: var(--background) &.is-muted-bordered - border-color: $border - color: $muted-text + border-color: colors.$border + color: colors.$muted-text font-weight: 400 !important background-color: var(--base) &:hover @@ -48,90 +57,90 @@ background: none border: none font-weight: 400 - +hover-link-reversal - +default-link + +link.hover-link-reversal + +colors.default-link height: auto !important padding: 0 !important &.is-text-reversal background: none border: none font-weight: 400 - +hover-link - +muted-link + +link.hover-link + +colors.muted-link height: auto !important padding: 0 !important &.is-muted-text background: none border: none font-weight: 400 - +hover-link-reversal - +muted-link + +link.hover-link-reversal + +colors.muted-link height: auto !important padding: 0 !important //size &.is-xxs, &.is-xxs input[type="submit"] - +button-size(.625rem, 1, 1.4rem) + +button.button-size(.625rem, 1, 1.4rem) font-weight: 400 &.is-xs, &.is-xs input[type="submit"] - +button-size(.75rem, 1, 1.7rem) + +button.button-size(.75rem, 1, 1.7rem) font-weight: 400 &.is-sm, &.is-sm input[type="submit"] - +button-size(.75rem, 1.25, 2rem) + +button.button-size(.75rem, 1.25, 2rem) &.is-md, &.is-md input[type="submit"] - +button-size(.8125rem, 1.4, 2.25rem) + +button.button-size(.8125rem, 1.4, 2.25rem) &.is-lg, &.is-lg input[type="submit"] - +button-size(1rem, 1, 2.75rem) + +button.button-size(1rem, 1, 2.75rem) &.is-xl, &.is-xl input[type="submit"] - +button-size(1.25rem, 1, 57px) + +button.button-size(1.25rem, 1, 57px) font-weight: 800 - +media-breakpoint-down(sm) - +button-size(1.125rem, 1, 3rem) + +break-points.media-breakpoint-down(sm) + +button.button-size(1.125rem, 1, 3rem) &.is-submit-input padding: 0 &.is-left-icon, &.is-right-icon - +position(relative) + +position.position(relative) i - +text-block(1.125em, flex) + +text.text-block(1.125em, flex) align-items: center justify-content: center - +position(absolute, top 0, bottom 0) + +position.position(absolute, top 0, bottom 0) &.is-left-icon i - +position(left 0) + +position.position(left 0) margin-left: .45em input[type="submit"] padding-left: 2.25em &.is-right-icon - +position(relative) + +position.position(relative) i - +position(right 0) + +position.position(right 0) margin-right: .45em input[type="submit"] padding-right: 2.25em //icon &.is-back - +position(relative) + +position.position(relative) padding-left: .75em padding-right: 0 &::before - +fa(fas '\f104') - +position(absolute, left .75em, top 50%) + +font-awsome.fa(fas '\f104') + +position.position(absolute, left .75em, top 50%) transform: translate(0, -50%) input[type="submit"], input[type="reset"], input[type="button"] &.a-button - +input-button-base + +button.input-button-base .is-button-group display: flex @@ -141,10 +150,10 @@ input[type="button"] margin-right: -1px li:first-child .a-button - +border-radius(right, 0) + +border-radius.border-radius(right, 0) li:last-child .a-button - +border-radius(left, 0) + +border-radius.border-radius(left, 0) li:not(:first-child):not(:last-child) .a-button border-radius: 0 diff --git a/app/javascript/stylesheets/atoms/_a-cancel-button.sass b/app/javascript/stylesheets/atoms/_a-cancel-button.sass index 19f4f067843..f66dec01e88 100644 --- a/app/javascript/stylesheets/atoms/_a-cancel-button.sass +++ b/app/javascript/stylesheets/atoms/_a-cancel-button.sass @@ -1,9 +1,12 @@ +@use "../config/mixins/link" +@use "../config/mixins/size" + .a-cancel-button margin-left: .5em color: var(--background) font-size: .875rem - +flex-link - +size(1.5em) + +link.flex-link + +size.size(1.5em) background-color: var(--muted-text) align-items: center justify-content: center diff --git a/app/javascript/stylesheets/atoms/_a-card.sass b/app/javascript/stylesheets/atoms/_a-card.sass index eeb16d6193f..3919f0c6dd4 100644 --- a/app/javascript/stylesheets/atoms/_a-card.sass +++ b/app/javascript/stylesheets/atoms/_a-card.sass @@ -1,7 +1,12 @@ +@use "../config/mixins/border-radius" +@use "../config/mixins/break-points" +@use "../config/mixins/link" +@use "../config/mixins/text" + @mixin anAdjacentCard - +media-breakpoint-up(xl) + +break-points.media-breakpoint-up(xl) margin-top: 1.25rem - +media-breakpoint-down(lg) + +break-points.media-breakpoint-down(lg) margin-top: 1rem .a-card @@ -16,7 +21,7 @@ border-color: var(--danger) color: var(--danger-text) background-color: var(--danger-tint) - +media-breakpoint-down(lg) + +break-points.media-breakpoint-down(lg) &:not(:last-child) margin-bottom: 1rem .a-card + & @@ -30,7 +35,7 @@ &.is-modal width: 42.5rem max-width: 100% - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-inline: 1rem &.is-toggle label @@ -63,14 +68,14 @@ table.a-card padding: .5rem 1.25rem background-color: var(--danger) text-align: center - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) color: var(--reversal-text) - +border-radius(top, .25rem) + +border-radius.border-radius(top, .25rem) a - +hover-link-reversal + +link.hover-link-reversal color: var(--reversal-text) .a-card__columns display: flex - +media-breakpoint-down(md) + +break-points.media-breakpoint-down(md) flex-direction: column diff --git a/app/javascript/stylesheets/atoms/_a-category-link.sass b/app/javascript/stylesheets/atoms/_a-category-link.sass index 2ebe5013250..b79f6c0f7d2 100644 --- a/app/javascript/stylesheets/atoms/_a-category-link.sass +++ b/app/javascript/stylesheets/atoms/_a-category-link.sass @@ -1,7 +1,10 @@ +@use "../config/mixins/link" +@use "../config/mixins/text" + .a-category-link - +text-block(.8125rem 1.4) + +text.text-block(.8125rem 1.4) color: var(--muted-text) - +hover-link + +link.hover-link transition: all .2s ease-out &:hover color: var(--default-text) diff --git a/app/javascript/stylesheets/atoms/_a-checkbox.sass b/app/javascript/stylesheets/atoms/_a-checkbox.sass index 20937e9b7a9..f40768986ad 100644 --- a/app/javascript/stylesheets/atoms/_a-checkbox.sass +++ b/app/javascript/stylesheets/atoms/_a-checkbox.sass @@ -1,12 +1,17 @@ +@use "../config/mixins/font-awsome" +@use "../config/mixins/position" +@use "../config/mixins/size" +@use "../config/mixins/text" + .a-checkbox - +position(relative) + +position.position(relative) input[type="checkbox"] - +position(absolute, left 0, top 0) + +position.position(absolute, left 0, top 0) visibility: hidden opacity: 0 pointer-events: none span - +position(relative) + +position.position(relative) display: inline-block margin-bottom: 0 padding-left: 1.5em @@ -14,15 +19,15 @@ &::before content: '' display: block - +size(.875rem) + +size.size(.875rem) border: solid 1px var(--muted-text) border-radius: .1875rem - +position(absolute, left 0, top 50%) + +position.position(absolute, left 0, top 50%) margin-top: -.4375rem background-color: var(--base) input:checked + span::before - +fa(fas '\f00c') - +text-block(.75rem .875rem, center flex) + +font-awsome.fa(fas '\f00c') + +text.text-block(.75rem .875rem, center flex) align-items: center justify-content: center color: var(--reversal-text) @@ -36,9 +41,9 @@ text-decoration: none .a-toggle-checkbox - +size(0) + +size.size(0) display: block - +position(fixed, left 0) + +position.position(fixed, left 0) opacity: 0 overflow: hidden visibility: hidden diff --git a/app/javascript/stylesheets/atoms/_a-checker.sass b/app/javascript/stylesheets/atoms/_a-checker.sass index 97429191269..f3a5a2208c3 100644 --- a/app/javascript/stylesheets/atoms/_a-checker.sass +++ b/app/javascript/stylesheets/atoms/_a-checker.sass @@ -1,12 +1,15 @@ +@use "../config/mixins/text" +@use "../config/variables/colors" + .a-checker display: flex align-items: center justify-content: center - border: solid 1px $danger + border: solid 1px colors.$danger border-radius: 1rem - background-color: $danger-tint + background-color: colors.$danger-tint padding: .125rem .5rem .125rem .25rem .a-checker__status - +text-block(.625rem 1, $danger-text) + +text.text-block(.625rem 1, colors.$danger-text) margin-left: .25rem diff --git a/app/javascript/stylesheets/atoms/_a-completion-message.sass b/app/javascript/stylesheets/atoms/_a-completion-message.sass index 63c2c7a938a..89d8bd1c2f4 100644 --- a/app/javascript/stylesheets/atoms/_a-completion-message.sass +++ b/app/javascript/stylesheets/atoms/_a-completion-message.sass @@ -1,3 +1,6 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/text" + .a-completion-message background-color: var(--success) padding-block: .5rem @@ -6,20 +9,20 @@ .a-completion-message__inner display: flex - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) justify-content: center align-items: center gap: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-direction: column gap: .75rem .a-completion-message__title - +text-block(1em 1.4, center 600) + +text.text-block(1em 1.4, center 600) color: var(--reversal-text) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .8125rem .a-completion-message__actions-items @@ -27,7 +30,7 @@ gap: .75rem .a-completion-message__actions-item - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) width: 9rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex: 1 diff --git a/app/javascript/stylesheets/atoms/_a-count-badge.sass b/app/javascript/stylesheets/atoms/_a-count-badge.sass index a8dfe5fa162..8caf656af0e 100644 --- a/app/javascript/stylesheets/atoms/_a-count-badge.sass +++ b/app/javascript/stylesheets/atoms/_a-count-badge.sass @@ -1,5 +1,7 @@ +@use "../config/mixins/text" + .a-count-badge - +text-block(1.125rem 1, center) + +text.text-block(1.125rem 1, center) border: solid 1px var(--border-shade) vertical-align: middle border-radius: .25rem diff --git a/app/javascript/stylesheets/atoms/_a-elapsed-days.sass b/app/javascript/stylesheets/atoms/_a-elapsed-days.sass index d5b9d73af3e..8056ff4323c 100644 --- a/app/javascript/stylesheets/atoms/_a-elapsed-days.sass +++ b/app/javascript/stylesheets/atoms/_a-elapsed-days.sass @@ -1,3 +1,6 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/text" + .card-header.a-elapsed-days letter-spacing: .125em text-indent: .125em @@ -6,11 +9,11 @@ border: solid 1px var(--border) >* width: 100% - +media-breakpoint-up(md) - +text-block(1rem 1.4, 600 center) + +break-points.media-breakpoint-up(md) + +text.text-block(1rem 1.4, 600 center) padding: .375rem 1rem - +media-breakpoint-down(sm) - +text-block(.875rem 1.4, 600 center) + +break-points.media-breakpoint-down(sm) + +text.text-block(.875rem 1.4, 600 center) padding: .375rem .75rem &.is-reply-warning background-color: var(--reply-warning-background) diff --git a/app/javascript/stylesheets/atoms/_a-empty-message.sass b/app/javascript/stylesheets/atoms/_a-empty-message.sass index 6624b004635..b798cba47b4 100644 --- a/app/javascript/stylesheets/atoms/_a-empty-message.sass +++ b/app/javascript/stylesheets/atoms/_a-empty-message.sass @@ -1,10 +1,13 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/text" + .a-empty-message - +text-block(1rem 1.6, center) + +text.text-block(1rem 1.6, center) margin-inline: auto max-width: 100% - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) width: 42.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .8125rem &.is-info border: solid 1px var(--info) @@ -12,7 +15,7 @@ border-radius: .25rem background-color: var(--info-tint) color: var(--info-text) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .75rem 1rem p - +text-block(.875em 1.6, left) + +text.text-block(.875em 1.6, left) diff --git a/app/javascript/stylesheets/atoms/_a-file-input.sass b/app/javascript/stylesheets/atoms/_a-file-input.sass index 64a4ba7a398..83dc46bcc2d 100644 --- a/app/javascript/stylesheets/atoms/_a-file-input.sass +++ b/app/javascript/stylesheets/atoms/_a-file-input.sass @@ -1,7 +1,11 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/position" +@use "../config/mixins/size" + .a-pdf-input display: flex gap: .75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-direction: column .a-pdf-input__inner @@ -10,7 +14,7 @@ display: flex align-items: center justify-content: center - +position(relative) + +position.position(relative) overflow: hidden cursor: pointer border-radius: .25rem @@ -26,7 +30,7 @@ display: flex align-items: center justify-content: center - +position(relative) + +position.position(relative) overflow: hidden cursor: pointer border-radius: .25rem @@ -44,7 +48,7 @@ &:hover opacity: .6 &.is-square img - +size(7rem) + +size.size(7rem) object-fit: cover &.is-book img max-height: 100% @@ -54,8 +58,8 @@ input overflow: hidden - +size(0) - +position(absolute, left 0, top 0) + +size.size(0) + +position.position(absolute, left 0, top 0) opacity: 0 a.a-pdf-input__inner @@ -76,9 +80,9 @@ a.a-pdf-input__inner overflow: hidden text-overflow: ellipsis display: block - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: 18rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) max-width: 8rem .a-pdf-input__upload.a-button diff --git a/app/javascript/stylesheets/atoms/_a-file-insert.sass b/app/javascript/stylesheets/atoms/_a-file-insert.sass index fffeacda66b..d5c658202c1 100644 --- a/app/javascript/stylesheets/atoms/_a-file-insert.sass +++ b/app/javascript/stylesheets/atoms/_a-file-insert.sass @@ -1,7 +1,10 @@ +@use "../config/mixins/position" +@use "../config/mixins/size" + .a-file-insert cursor: pointer input - +position(absolute, left -44px, top 0) - +size(44px 20px) + +position.position(absolute, left -44px, top 0) + +size.size(44px 20px) background: red opacity: 0 diff --git a/app/javascript/stylesheets/atoms/_a-form-help.sass b/app/javascript/stylesheets/atoms/_a-form-help.sass index 8a124785b8f..a3b6b574d71 100644 --- a/app/javascript/stylesheets/atoms/_a-form-help.sass +++ b/app/javascript/stylesheets/atoms/_a-form-help.sass @@ -1,3 +1,7 @@ +@use "../config/mixins/link" +@use "../config/mixins/text" +@use "../config/variables/colors" + .a-form-help font-size: .75rem color: var(--semi-muted-text) @@ -23,18 +27,18 @@ .form-item-block & margin-top: .75em p - +text-block(1em 1.6) + +text.text-block(1em 1.6) &:not(:last-child) margin-bottom: .75em a - +hover-link-reversal + +link.hover-link-reversal *:last-child margin-bottom: 0 a - +text-block(.75rem 1.6) - +hover-link-reversal + +text.text-block(.75rem 1.6) + +link.hover-link-reversal cursor: pointer - +default-link + +colors.default-link ul list-style-type: disc list-style-position: outside @@ -47,20 +51,20 @@ margin-top: .125em .a-form-help-link - +text-block(.75rem 1.6) + +text.text-block(.75rem 1.6) cursor: pointer - +default-link + +colors.default-link .a-form-help &.is-danger color: var(--danger) &.is-muted-text color: var(--muted-text) .a-form-help-link__label - +hover-link-reversal + +link.hover-link-reversal .a-text-help-link cursor: pointer - +default-link + +colors.default-link .a-text-help-link__label - +hover-link-reversal + +link.hover-link-reversal diff --git a/app/javascript/stylesheets/atoms/_a-form-label.sass b/app/javascript/stylesheets/atoms/_a-form-label.sass index 19a2544d12c..d1bd659a658 100644 --- a/app/javascript/stylesheets/atoms/_a-form-label.sass +++ b/app/javascript/stylesheets/atoms/_a-form-label.sass @@ -1,19 +1,24 @@ +@use "../config/mixins/font-awsome" +@use "../config/mixins/position" +@use "../config/mixins/size" +@use "../config/mixins/text" + .a-form-label - +text-block(.875rem 1.5 0 .5rem, block 600) + +text.text-block(.875rem 1.5 0 .5rem, block 600) &:last-child margin-bottom: 0 &.is-required &::after - +fa(fas '\f069') - +text-block(.625rem, inline-block) + +font-awsome.fa(fas '\f069') + +text.text-block(.625rem, inline-block) color: var(--danger) margin-left: .125rem vertical-align: top transform: scale(.7) &.is-sm - +text-block(.75rem 1.5) + +text.text-block(.75rem 1.5) &.is-lg - +text-block(1.125rem 1.5) + +text.text-block(1.125rem 1.5) border-bottom: solid 1px var(--border) padding-bottom: .5rem &.is-inline @@ -23,7 +28,7 @@ margin-bottom: 0 .form-item__label-checkbox - +position(relative) + +position.position(relative) .a-form-label display: inline-block margin-bottom: 0 @@ -32,17 +37,17 @@ &::before content: '' display: block - +size(.875rem) + +size.size(.875rem) border: solid 1px var(--muted-text) border-radius: .1875rem - +position(absolute, left 0, top 50%) + +position.position(absolute, left 0, top 50%) margin-top: -.4375rem box-shadow: rgba(black, .1) 0 1px 2px inset background-color: var(--base) input:checked + .a-form-label::after - +fa(fas '\f00c') - +text-block(.75rem .875rem, center block) + +font-awsome.fa(fas '\f00c') + +text.text-block(.75rem .875rem, center block) color: var(--primary) - +size(.875rem) - +position(absolute, left 0, top 50%) + +size.size(.875rem) + +position.position(absolute, left 0, top 50%) margin-top: -.4375rem diff --git a/app/javascript/stylesheets/atoms/_a-form-tabs.sass b/app/javascript/stylesheets/atoms/_a-form-tabs.sass index 8b9fc84403b..5dee02492ed 100644 --- a/app/javascript/stylesheets/atoms/_a-form-tabs.sass +++ b/app/javascript/stylesheets/atoms/_a-form-tabs.sass @@ -1,3 +1,8 @@ +@use "../config/mixins/border-radius" +@use "../config/mixins/position" +@use "../config/mixins/size" +@use "../config/mixins/text" + .a-form-tabs display: flex background-color: var(--background) @@ -7,16 +12,16 @@ border-radius: .1875rem .1875rem 0 0 .a-form-tabs__tab - +size(6.5rem 2.5rem) - +text-block(.8125rem 1, flex 600) + +size.size(6.5rem 2.5rem) + +text.text-block(.8125rem 1, flex 600) color: var(--muted-text) align-items: center justify-content: center border-bottom: none cursor: pointer - +border-radius(top, .25rem) + +border-radius.border-radius(top, .25rem) border: solid 1px transparent - +position(relative, bottom -1px) + +position.position(relative, bottom -1px) transition: all .2s ease-out &:hover color: var(--default-text) diff --git a/app/javascript/stylesheets/atoms/_a-grab.sass b/app/javascript/stylesheets/atoms/_a-grab.sass index 11eb85fe413..cc48f606bd7 100644 --- a/app/javascript/stylesheets/atoms/_a-grab.sass +++ b/app/javascript/stylesheets/atoms/_a-grab.sass @@ -1,7 +1,9 @@ +@use "../config/mixins/size" + .a-grab display: flex align-items: center justify-content: center - +size(100%) + +size.size(100%) min-height: 2.5rem cursor: grab diff --git a/app/javascript/stylesheets/atoms/_a-help.sass b/app/javascript/stylesheets/atoms/_a-help.sass index 0d61bb8843d..222416db394 100644 --- a/app/javascript/stylesheets/atoms/_a-help.sass +++ b/app/javascript/stylesheets/atoms/_a-help.sass @@ -1,7 +1,10 @@ +@use "../config/mixins/size" +@use "../config/mixins/text" + .a-help - +text-block(.75em 1, inline-flex) + +text.text-block(.75em 1, inline-flex) color: var(--reversal-text) - +size(1.75em) + +size.size(1.75em) text-decoration: none background-color: var(--muted-text) vertical-align: middle diff --git a/app/javascript/stylesheets/atoms/_a-horizontal-dashed.sass b/app/javascript/stylesheets/atoms/_a-horizontal-dashed.sass index 5a52f9725ff..6423cfcf380 100644 --- a/app/javascript/stylesheets/atoms/_a-horizontal-dashed.sass +++ b/app/javascript/stylesheets/atoms/_a-horizontal-dashed.sass @@ -1,3 +1,5 @@ +@use "../config/mixins/size" + .a-horizontal-dashed - +size(100% 1px) + +size.size(100% 1px) border-top: dashed 1px var(--border-shade) diff --git a/app/javascript/stylesheets/atoms/_a-image-check.sass b/app/javascript/stylesheets/atoms/_a-image-check.sass index 5609ef48192..890679af06c 100644 --- a/app/javascript/stylesheets/atoms/_a-image-check.sass +++ b/app/javascript/stylesheets/atoms/_a-image-check.sass @@ -1,3 +1,8 @@ +@use "../config/mixins/font-awsome" +@use "../config/mixins/position" +@use "../config/mixins/size" +@use "../config/mixins/text" + .a-image-check height: 100% @@ -5,7 +10,7 @@ background-color: var(--input-background) height: 100% min-height: 2.5rem - +text-block(.8125rem 1.4, flex center) + +text.text-block(.8125rem 1.4, flex center) gap: .5rem flex-direction: column align-items: center @@ -29,12 +34,12 @@ background-color: var(--primary) .a-image-check &::before display: block - +position(absolute, left .75rem, top .75rem, 2) + +position.position(absolute, left .75rem, top .75rem, 2) // radio .a-image-check.is-radio &::before content: '' - +size(.875rem) + +size.size(.875rem) border: solid 1px var(--input-border) border-radius: 50% background-color: var(--base) @@ -45,14 +50,14 @@ // checkbox .a-image-check.is-checkbox &::before content: '' - +size(.875rem) + +size.size(.875rem) border: solid 1px var(--input-border) border-radius: 3px background-color: var(--base) .a-image-check.is-checkbox input:checked + &::before border-color: var(--primary) background-color: var(--primary) - +fa(fas "\f00c") + +font-awsome.fa(fas "\f00c") color: var(--reversal-text) .a-image-check__start @@ -63,12 +68,12 @@ width: 100% .a-image-check__name - +text-block(.875rem 1.4, block center) + +text.text-block(.875rem 1.4, block center) .a-image-check__image - +size(2rem) + +size.size(2rem) .a-image-check__inner.has-icon & - +size(1.75rem) + +size.size(1.75rem) margin-right: .5rem .a-image-check__upload-image @@ -78,6 +83,6 @@ aspect-ratio: 120 / 63 position: relative i - +position(absolute, left 50%, top 50%) + +position.position(absolute, left 50%, top 50%) transform: translate(-50%, -50%) font-size: 3rem diff --git a/app/javascript/stylesheets/atoms/_a-link-card.sass b/app/javascript/stylesheets/atoms/_a-link-card.sass index ec404825dbe..547c13aac58 100644 --- a/app/javascript/stylesheets/atoms/_a-link-card.sass +++ b/app/javascript/stylesheets/atoms/_a-link-card.sass @@ -1,3 +1,7 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/position" +@use "../config/mixins/text" + .a-long-text .a-link-card, .twitter-tweet @@ -28,7 +32,7 @@ text-overflow: ellipsis -webkit-box-orient: vertical -webkit-line-clamp: 2 - +text-block(1em 1.4) + +text.text-block(1em 1.4) .a-link-card__favicon-image width: 1em @@ -42,7 +46,7 @@ display: none .a-link-card__body - +text-block(.875em 1.4) + +text.text-block(.875em 1.4) color: var(--muted-text) display: flex gap: 1em @@ -64,9 +68,9 @@ -webkit-line-clamp: 2 .a-link-card__image - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: 12rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) max-width: 7.5rem &.is-blank display: none @@ -86,7 +90,7 @@ align-items: center .a-link-card__site-title-text - +text-block(.875em 1.4) + +text.text-block(.875em 1.4) flex: 1 .twitter-tweet @@ -94,16 +98,16 @@ line-height: 1.4 font-size: .875em color: var(--muted-text) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 2em 3em 1em 2em - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: 2em 3em 1em 1em &::before font-family: "Font Awesome 6 Brands" font-weight: 400 font-size: 1.5em content: "\e61b" - +position(absolute, right .5em, top .5em) + +position.position(absolute, right .5em, top .5em) display: flex justify-content: center align-items: center diff --git a/app/javascript/stylesheets/atoms/_a-list-item-badge.sass b/app/javascript/stylesheets/atoms/_a-list-item-badge.sass index e6abdbe57cc..bc7b0ae349d 100644 --- a/app/javascript/stylesheets/atoms/_a-list-item-badge.sass +++ b/app/javascript/stylesheets/atoms/_a-list-item-badge.sass @@ -1,14 +1,18 @@ +@use "../config/mixins/position" +@use "../config/mixins/size" +@use "../config/mixins/text" + .a-list-item-badge - +text-block(.625rem, inline-flex nowrap 400) + +text.text-block(.625rem, inline-flex nowrap 400) color: var(--semi-muted-text) border-radius: .75rem align-self: flex-start align-items: center justify-content: center position: relative - +size(3.75rem .8125rem) + +size.size(3.75rem .8125rem) span - +position(absolute, left 50%, top 50%) + +position.position(absolute, left 50%, top 50%) transform: translate(-50%, -50%) scale(.8) letter-spacing: -.05em &.is-wip diff --git a/app/javascript/stylesheets/atoms/_a-long-text.sass b/app/javascript/stylesheets/atoms/_a-long-text.sass index 00eee1c652c..4e5b7997323 100644 --- a/app/javascript/stylesheets/atoms/_a-long-text.sass +++ b/app/javascript/stylesheets/atoms/_a-long-text.sass @@ -1,14 +1,18 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/long-text-style" +@use "../config/mixins/text" + .a-long-text - +long-text-style(1em, 1em) + +long-text-style.long-text-style(1em, 1em) &.is-md - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .8125rem &.is-sm - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .8125rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .75rem &.has-no-headding h1, @@ -17,7 +21,7 @@ h4, h5, h6 - +text-block(1em 1.6 0 .625em, 600) + +text.text-block(1em 1.6 0 .625em, 600) border: none padding: 0 .a-long-text + & diff --git a/app/javascript/stylesheets/atoms/_a-markdown-input.sass b/app/javascript/stylesheets/atoms/_a-markdown-input.sass index 85a6faf8696..66bab79777b 100644 --- a/app/javascript/stylesheets/atoms/_a-markdown-input.sass +++ b/app/javascript/stylesheets/atoms/_a-markdown-input.sass @@ -1,10 +1,13 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/text" + .a-markdown-input padding-inline: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-inline: .75rem .card-body__description & padding-inline: 0 - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-inline: 0 .a-markdown-input__inner @@ -18,7 +21,7 @@ .a-markdown-input__preview background-color: var(--base) - +text-block(.875rem 1.8) + +text.text-block(.875rem 1.8) border-radius: .25rem min-height: 10rem &.has-max-height diff --git a/app/javascript/stylesheets/atoms/_a-meta.sass b/app/javascript/stylesheets/atoms/_a-meta.sass index cce71ca97a8..79c35e74407 100644 --- a/app/javascript/stylesheets/atoms/_a-meta.sass +++ b/app/javascript/stylesheets/atoms/_a-meta.sass @@ -1,11 +1,15 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/link" +@use "../config/mixins/text" + .a-meta - +text-block(1em 1.4, flex) + +text.text-block(1em 1.4, flex) color: var(--muted-text) align-items: center flex-wrap: wrap - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .75rem .is-important, &.is-important @@ -16,7 +20,7 @@ .is-emphasized color: var(--default-text) font-weight: 600 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) .a-meta + & margin-left: .25em &::before @@ -25,7 +29,7 @@ content: ")" a.a-meta - +hover-link + +link.hover-link color: var(--muted-text) transition: all .2s ease-out &:hover diff --git a/app/javascript/stylesheets/atoms/_a-notice-block.sass b/app/javascript/stylesheets/atoms/_a-notice-block.sass index 9c2d3b941ae..0b654eee4c7 100644 --- a/app/javascript/stylesheets/atoms/_a-notice-block.sass +++ b/app/javascript/stylesheets/atoms/_a-notice-block.sass @@ -1,3 +1,5 @@ +@use "../config/mixins/short-text-style" + .a-notice-block width: 34rem max-width: 100% @@ -7,7 +9,7 @@ color: var(--success-text) background-color: #f8fff2 border-radius: 4px - +short-text-style + +short-text-style.short-text-style font-size: .875rem &.is-danger background-color: var(--danger-tint) diff --git a/app/javascript/stylesheets/atoms/_a-notification-count.sass b/app/javascript/stylesheets/atoms/_a-notification-count.sass index 3c3467eb1d9..5cab5ae87a3 100644 --- a/app/javascript/stylesheets/atoms/_a-notification-count.sass +++ b/app/javascript/stylesheets/atoms/_a-notification-count.sass @@ -1,10 +1,14 @@ +@use "../config/mixins/position" +@use "../config/mixins/size" +@use "../config/mixins/text" + .a-notification-count - +size(1.25rem .875rem) + +size.size(1.25rem .875rem) font-family: var(--monospace) border-radius: 1rem background-color: var(--danger) - +position(absolute) - +text-block(.625rem, flex) + +position.position(absolute) + +text.text-block(.625rem, flex) color: var(--reversal-text) align-items: center justify-content: center diff --git a/app/javascript/stylesheets/atoms/_a-on-off-checkbox.sass b/app/javascript/stylesheets/atoms/_a-on-off-checkbox.sass index 0d43589d1b8..3daf76663a3 100644 --- a/app/javascript/stylesheets/atoms/_a-on-off-checkbox.sass +++ b/app/javascript/stylesheets/atoms/_a-on-off-checkbox.sass @@ -1,13 +1,17 @@ +@use "../config/mixins/position" +@use "../config/mixins/size" +@use "../config/mixins/text" + =on-off-checkbox($border-width: 1px, $height: 1.5rem, $width: 4.5rem, $font-size: .8125rem) span - +size($width calc(#{$height} + #{$border-width} * 2)) + +size.size($width calc(#{$height} + #{$border-width} * 2)) border: solid $border-width var(--input-border) border-radius: $height font-size: $font-size &::before - +size($height) + +size.size($height) &::after - +size(100% calc(100% - #{$border-width} * 2)) + +size.size(100% calc(100% - #{$border-width} * 2)) padding-left: $height padding-right: .75em input:checked + span @@ -16,39 +20,39 @@ padding-right: $height .a-on-off-checkbox - +position(relative) + +position.position(relative) display: block cursor: pointer padding-block: .5rem margin-block: -.5rem input opacity: 0 - +position(absolute, left -1rem, top 0) - +size(0) + +position.position(absolute, left -1rem, top 0) + +size.size(0) display: block overflow: hidden span display: block background-color: var(--background) - +position(relative) + +position.position(relative) transition: all .2s ease-out &::before content: "" display: block border-radius: 50% background-color: var(--base) - +position(absolute, left 0, top 0) + +position.position(absolute, left 0, top 0) border: solid 1px var(--input-border) &::after content: "OFF" - +text-block(1em 1, flex center 600) + +text.text-block(1em 1, flex center 600) align-items: center justify-content: center input:checked + span background-color: var(--danger) border-color: var(--danger) &::before - +position(absolute, left auto, right 0) + +position.position(absolute, left auto, right 0) &::after content: "ON" color: var(--reversal-text) diff --git a/app/javascript/stylesheets/atoms/_a-overlay.sass b/app/javascript/stylesheets/atoms/_a-overlay.sass index c640765d5a5..95c0855ac68 100644 --- a/app/javascript/stylesheets/atoms/_a-overlay.sass +++ b/app/javascript/stylesheets/atoms/_a-overlay.sass @@ -1,7 +1,10 @@ +@use "../config/mixins/position" +@use "../config/mixins/size" + .a-overlay - +position(fixed, left 0, top 0, bottom 0, 1) + +position.position(fixed, left 0, top 0, bottom 0, 1) background-color: rgba(black, .6) - +size(100%) + +size.size(100%) opacity: 0 &.is-js opacity: 1 diff --git a/app/javascript/stylesheets/atoms/_a-page-notice.sass b/app/javascript/stylesheets/atoms/_a-page-notice.sass index 1a434963102..392a8a2dc0b 100644 --- a/app/javascript/stylesheets/atoms/_a-page-notice.sass +++ b/app/javascript/stylesheets/atoms/_a-page-notice.sass @@ -1,3 +1,8 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/link" +@use "../config/mixins/size" +@use "../config/mixins/text" + .a-page-notice background-color: var(--success) color: var(--reversal-text) @@ -17,36 +22,36 @@ .a-page-notice__inner padding-block: .5rem color: var(--reversal-text) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) text-align: center font-size: .875rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .75rem &.has-close position: relative display: flex text-align: left p - +text-block(1em 1.5) - +media-breakpoint-up(md) + +text.text-block(1em 1.5) + +break-points.media-breakpoint-up(md) font-size: .875rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .75rem a color: var(--reversal-text) - +hover-link-reversal + +link.hover-link-reversal &.has-badge text-decoration: none - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: block .a-badge margin-right: .75rem background-color: rgba(black, .4) border: none - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) .a-page-notice__label - +hover-link-reversal - +media-breakpoint-up(md) + +link.hover-link-reversal + +break-points.media-breakpoint-up(md) max-width: 17.5rem overflow: hidden text-overflow: ellipsis @@ -58,7 +63,7 @@ flex: 1 .a-page-notice__close - +size(2.75rem) + +size.size(2.75rem) display: flex align-items: center justify-content: center diff --git a/app/javascript/stylesheets/atoms/_a-panels.sass b/app/javascript/stylesheets/atoms/_a-panels.sass index e3a21c6c4fc..152bedbb896 100644 --- a/app/javascript/stylesheets/atoms/_a-panels.sass +++ b/app/javascript/stylesheets/atoms/_a-panels.sass @@ -1,9 +1,12 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/size" + .a-panels__items display: grid gap: 1rem - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) grid-template: repeat(auto-fill, minmax(10rem, 1fr))/ repeat(auto-fill, minmax(20rem, 1fr)) .a-panels__item .a-card - +size(100%) + +size.size(100%) diff --git a/app/javascript/stylesheets/atoms/_a-pdf-input.sass b/app/javascript/stylesheets/atoms/_a-pdf-input.sass index ef68141d9e7..36a3c1da136 100644 --- a/app/javascript/stylesheets/atoms/_a-pdf-input.sass +++ b/app/javascript/stylesheets/atoms/_a-pdf-input.sass @@ -1,7 +1,11 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/position" +@use "../config/mixins/size" + .a-pdf-input display: flex gap: .75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-direction: column .a-pdf-input__inner @@ -10,15 +14,15 @@ display: flex align-items: center justify-content: center - +position(relative) + +position.position(relative) overflow: hidden cursor: pointer border-radius: .25rem height: 2.25rem input overflow: hidden - +size(0) - +position(absolute, left 0, top 0) + +size.size(0) + +position.position(absolute, left 0, top 0) opacity: 0 a.a-pdf-input__inner @@ -39,9 +43,9 @@ a.a-pdf-input__inner overflow: hidden text-overflow: ellipsis display: block - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: 18rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) max-width: 8rem .a-pdf-input__upload.a-button diff --git a/app/javascript/stylesheets/atoms/_a-placeholder.sass b/app/javascript/stylesheets/atoms/_a-placeholder.sass index f0e15e9e2cf..b187f5ab741 100644 --- a/app/javascript/stylesheets/atoms/_a-placeholder.sass +++ b/app/javascript/stylesheets/atoms/_a-placeholder.sass @@ -1,3 +1,5 @@ +@use "../config/variables/colors" + @keyframes loadingNow 0% opacity: .4 @@ -125,4 +127,4 @@ .a-card.is-loading border: none - background-color: rgba($base, .8) + background-color: rgba(colors.$base, .8) diff --git a/app/javascript/stylesheets/atoms/_a-raw.sass b/app/javascript/stylesheets/atoms/_a-raw.sass index 1518091ab7a..86638381a95 100644 --- a/app/javascript/stylesheets/atoms/_a-raw.sass +++ b/app/javascript/stylesheets/atoms/_a-raw.sass @@ -1,5 +1,7 @@ +@use "../config/mixins/text" + .a-raw - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) white-space: pre-line background-color: var(--input-background) width: 100% diff --git a/app/javascript/stylesheets/atoms/_a-short-text.sass b/app/javascript/stylesheets/atoms/_a-short-text.sass index 3baf3aa07a4..baeaa479546 100644 --- a/app/javascript/stylesheets/atoms/_a-short-text.sass +++ b/app/javascript/stylesheets/atoms/_a-short-text.sass @@ -1,15 +1,22 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/link" +@use "../config/mixins/position" +@use "../config/mixins/size" +@use "../config/mixins/text" +@use "../config/variables/colors" + .a-short-text h3 - +text-block(1.25em 1.4 .75em) + +text.text-block(1.25em 1.4 .75em) &.is-sm - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .8125rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .75rem p - +text-block(1em 1.6 .75em) + +text.text-block(1em 1.6 .75em) li - +text-block(1em 1.6) + +text.text-block(1em 1.6) ol, ul margin-left: 1.25em @@ -34,11 +41,11 @@ >ul list-style-type: square a - +hover-link-reversal - +default-link + +link.hover-link-reversal + +colors.default-link hr display: block - +size(100% 0) + +size.size(100% 0) border: none border-top: dashed 1px var(--border) margin-block: 1.25em @@ -46,12 +53,12 @@ b font-weight: 700 h1 - +text-block(1.75em 1.4 0 .5em, 600) + +text.text-block(1.75em 1.4 0 .5em, 600) color: var(--main-text) padding-bottom: .25em border-bottom: 3px solid var(--border) h2 - +text-block(1.5em 1.4 0 .5em, 600) + +text.text-block(1.5em 1.4 0 .5em, 600) padding-bottom: .25em border-bottom: 1px solid var(--border) * + h2, @@ -60,22 +67,22 @@ * + h5 margin-top: .75em h3 - +text-block(1.25em 1.4, 600) + +text.text-block(1.25em 1.4, 600) margin-bottom: .625em & + * margin-top: 0 !important h4 - +text-block(1.125em 1.5, 600) + +text.text-block(1.125em 1.5, 600) margin-bottom: .625em & + * margin-top: 0 !important h5 - +text-block(1em 1.5, 600) + +text.text-block(1em 1.5, 600) margin-bottom: .625em & + * margin-top: 0 !important h6 - +text-block(.875rem 1.5, 600) + +text.text-block(.875rem 1.5, 600) margin-bottom: .625em & + * margin-top: 0 !important @@ -97,12 +104,12 @@ .header-anchor display: flex - +text-block(.75rem, 400) + +text.text-block(.75rem, 400) float: left - +position(absolute) + +position.position(absolute) margin-left: -1.5rem text-decoration: none !important - +size(1.5rem 100%) + +size.size(1.5rem 100%) align-items: center justify-content: center transition: all .2s ease-out @@ -127,7 +134,7 @@ h4, h5, h6 - +text-block(1em 1.6 0 .625em, 700) + +text.text-block(1em 1.6 0 .625em, 700) border: none padding: 0 diff --git a/app/javascript/stylesheets/atoms/_a-side-nav.sass b/app/javascript/stylesheets/atoms/_a-side-nav.sass index 724042d6834..a6e6d8765dc 100644 --- a/app/javascript/stylesheets/atoms/_a-side-nav.sass +++ b/app/javascript/stylesheets/atoms/_a-side-nav.sass @@ -1,25 +1,30 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/link" +@use "../config/mixins/position" +@use "../config/mixins/text" + .page-body__inner.has-side-nav - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) padding-right: var(--side-nav-width) .a-side-nav background-color: var(--base) - +media-breakpoint-up(lg) - +position(absolute, right 0, top -1.5rem, bottom -1.5rem) + +break-points.media-breakpoint-up(lg) + +position.position(absolute, right 0, top -1.5rem, bottom -1.5rem) width: var(--side-nav-width) border-left: solid 1px var(--border) height: calc(100% + 3rem) - +media-breakpoint-down(md) + +break-points.media-breakpoint-down(md) border: solid 1px var(--border) border-radius: .25rem margin-top: 1rem - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) margin-inline: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-inline: 1rem .a-side-nav__inner - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) max-height: 100% position: sticky top: var(--header-height__md-up) @@ -31,17 +36,17 @@ display: flex align-items: center justify-content: space-between - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: .75rem 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .5rem .75rem .a-side-nav__title - +text-block(.875rem 1.4, 600) + +text.text-block(.875rem 1.4, 600) width: 100% .a-side-nav__title-link - +block-link + +link.block-link width: 100% text-align: center color: var(--default-text) @@ -56,21 +61,21 @@ display: flex align-items: center justify-content: flex-end - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: .5rem 1.25rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .5rem .75rem .a-side-nav__footer-link - +text-block(.8125rem 1.4) + +text.text-block(.8125rem 1.4) color: var(--muted-text) - +hover-link-reversal + +link.hover-link-reversal .a-side-nav__body overflow: auto =a-side-nav-current($background-color, $border-color, $text-color, $pointer-events-none) - +position(relative, 1) + +position.position(relative, 1) border: solid 1px $border-color background-color: $background-color .a-side-nav__item-link @@ -91,9 +96,9 @@ .a-side-nav__item-link padding: .75rem - +text-block(.8125rem 1.4) + +text.text-block(.8125rem 1.4) color: var(--semi-muted-text) - +block-link + +link.block-link transition: all .1s ease-in background-color: transparent &:not(.has-metas):hover @@ -110,7 +115,7 @@ margin-right: .25rem .a-side-nav__item-title - +text-block(.875rem 1.4, 600 inline) + +text.text-block(.875rem 1.4, 600 inline) .a-side-nav-metas margin-top: .25rem diff --git a/app/javascript/stylesheets/atoms/_a-switch.sass b/app/javascript/stylesheets/atoms/_a-switch.sass index ec29c264638..6842b8b29a2 100644 --- a/app/javascript/stylesheets/atoms/_a-switch.sass +++ b/app/javascript/stylesheets/atoms/_a-switch.sass @@ -1,3 +1,7 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/position" +@use "../config/mixins/text" + .a-switch display: flex align-items: center @@ -5,17 +9,17 @@ transition: all .2s ease-out * cursor: pointer - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) align-items: center justify-content: center height: 100% .a-switch__label - +text-block(.75rem 1.4, center) + +text.text-block(.75rem 1.4, center) color: var(--muted-text) margin-right: .5em .a-help - +position(relative, top -1px) + +position.position(relative, top -1px) &:hover .a-switch__label-text color: var(--main-text) diff --git a/app/javascript/stylesheets/atoms/_a-table.sass b/app/javascript/stylesheets/atoms/_a-table.sass index fb3b074cc92..1f39099673b 100644 --- a/app/javascript/stylesheets/atoms/_a-table.sass +++ b/app/javascript/stylesheets/atoms/_a-table.sass @@ -1,5 +1,10 @@ +@use "../config/mixins/border" +@use "../config/mixins/border-radius" +@use "../config/mixins/break-points" +@use "../config/mixins/text" + .a-table - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) overflow-x: auto overflow-x: auto &.is-sm @@ -20,13 +25,13 @@ .a-table thead background-color: var(--background-semi-shade) border: solid 1px var(--border-shade) - +border-radius(top, .25rem) + +border-radius.border-radius(top, .25rem) .a-table tr - +border(horizontal, solid 1px var(--border)) + +border.border(horizontal, solid 1px var(--border)) .a-table th - +text-block(.75rem 1.4, center 600) + +text.text-block(.75rem 1.4, center 600) border: solid 1px var(--border-shade) white-space: nowrap height: 2rem @@ -37,7 +42,7 @@ background-color: var(--base) padding: .375rem .75rem border: solid 1px var(--border) - +text-block(.8125rem 1.45) + +text.text-block(.8125rem 1.45) .card-body >.a-table table diff --git a/app/javascript/stylesheets/atoms/_a-text-input.sass b/app/javascript/stylesheets/atoms/_a-text-input.sass index a524ec807d9..21b872e095c 100644 --- a/app/javascript/stylesheets/atoms/_a-text-input.sass +++ b/app/javascript/stylesheets/atoms/_a-text-input.sass @@ -1,14 +1,19 @@ -.a-text-input - +text-block(1em 1.4, block) +@use "../config/mixins/break-points" +@use "../config/mixins/position" +@use "../config/mixins/size" +@use "../config/mixins/text" + +@mixin text-input-base + +text.text-block(1em 1.4, block) background-color: var(--input-background) width: 100% padding: .5rem border: solid 1px var(--input-border) border-radius: .25rem transition: border-color .2s ease-in, background-color .2s ease-in, box-shadow .2s ease-in - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .875rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1rem .field_with_errors & border-color: #e1a7b6 @@ -33,6 +38,9 @@ padding: 0 background-color: transparent +.a-text-input + +text-input-base + input[type=date].a-text-input, input[type=month].a-text-input, input[type=week].a-text-input @@ -40,12 +48,12 @@ input[type=week].a-text-input &::-webkit-inner-spin-button -webkit-appearance: none &::-webkit-clear-button - +position(relative, 1) + +position.position(relative, 1) &::-webkit-calendar-picker-indicator color: transparent background-color: transparent - +position(absolute, left 0, right 0, top 0, bottom 0) - +size(100%) + +position.position(absolute, left 0, right 0, top 0, bottom 0) + +size.size(100%) cursor: pointer opacity: 0 diff --git a/app/javascript/stylesheets/atoms/_a-text-link.sass b/app/javascript/stylesheets/atoms/_a-text-link.sass index 7302b5bf325..3f7a6362117 100644 --- a/app/javascript/stylesheets/atoms/_a-text-link.sass +++ b/app/javascript/stylesheets/atoms/_a-text-link.sass @@ -1,22 +1,25 @@ +@use "../config/mixins/link" +@use "../config/variables/colors" + .a-text-link - +hover-link-reversal - +default-link + +link.hover-link-reversal + +colors.default-link &.has-badge text-decoration: none .a-text-link__text - +hover-link-reversal - +default-link + +link.hover-link-reversal + +colors.default-link .a-hover-link - +hover-link + +link.hover-link .a-hover-link-reversal - +hover-link-reversal + +link.hover-link-reversal .a-reversal-text-link - +hover-link-reversal - +reversal-link + +link.hover-link-reversal + +colors.reversal-link .a-muted-text-link - +hover-link-reversal - +muted-link + +link.hover-link-reversal + +colors.muted-link diff --git a/app/javascript/stylesheets/atoms/_a-title-label.sass b/app/javascript/stylesheets/atoms/_a-title-label.sass index d129d588e17..8882144f389 100644 --- a/app/javascript/stylesheets/atoms/_a-title-label.sass +++ b/app/javascript/stylesheets/atoms/_a-title-label.sass @@ -1,19 +1,23 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/position" +@use "../config/mixins/text" + .a-title-label - +text-block(.5em 1, inline-flex nowrap 500) + +text.text-block(.5em 1, inline-flex nowrap 500) vertical-align: top background-color: var(--background-semi-shade) padding-inline: 1em border-radius: .75rem align-items: center - +position(relative, top .75em) + +position.position(relative, top .75em) margin-right: .5em - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) height: 1.5em - +position(top .75em) - +media-breakpoint-down(sm) + +position.position(top .75em) + +break-points.media-breakpoint-down(sm) font-size: .625rem height: 1.75em - +position(top .375em) + +position.position(top .375em) &.is-solved color: var(--reversal-text) &.is-wip diff --git a/app/javascript/stylesheets/atoms/_a-user-icon.sass b/app/javascript/stylesheets/atoms/_a-user-icon.sass index 9e15d33cf70..ff0151aef20 100644 --- a/app/javascript/stylesheets/atoms/_a-user-icon.sass +++ b/app/javascript/stylesheets/atoms/_a-user-icon.sass @@ -1,14 +1,18 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/size" +@use "../config/mixins/user-role" + .a-user-icon display: block object-fit: cover border-radius: 50% background-color: var(--base) - +size(100%) - +icon-role-style + +size.size(100%) + +user-role.icon-role-style &.is-sm - +size(2rem) + +size.size(2rem) &.is-xs - +media-breakpoint-up(md) - +size(1.5rem) - +media-breakpoint-down(sm) - +size(1.125rem) + +break-points.media-breakpoint-up(md) + +size.size(1.5rem) + +break-points.media-breakpoint-down(sm) + +size.size(1.125rem) diff --git a/app/javascript/stylesheets/atoms/_a-user-icons.sass b/app/javascript/stylesheets/atoms/_a-user-icons.sass index bc5e0cc484e..ea663125fd5 100644 --- a/app/javascript/stylesheets/atoms/_a-user-icons.sass +++ b/app/javascript/stylesheets/atoms/_a-user-icons.sass @@ -1,3 +1,5 @@ +@use "../config/mixins/size" + .a-user-icons padding-top: .5rem margin-top: .75rem @@ -10,4 +12,4 @@ gap: .25rem .a-user-icons__item-icon - +size(2rem) + +size.size(2rem) diff --git a/app/javascript/stylesheets/atoms/_a-user-name.sass b/app/javascript/stylesheets/atoms/_a-user-name.sass index 77949a9b13c..fba3500ba90 100644 --- a/app/javascript/stylesheets/atoms/_a-user-name.sass +++ b/app/javascript/stylesheets/atoms/_a-user-name.sass @@ -1,3 +1,5 @@ +@use "../config/mixins/link" + .a-user-name color: var(--muted-text) font-size: .75rem @@ -6,7 +8,7 @@ font-weight: 400 a.a-user-name - +hover-link + +link.hover-link display: inline-block max-width: 100% overflow: hidden diff --git a/app/javascript/stylesheets/atoms/_a-user-role-badge.sass b/app/javascript/stylesheets/atoms/_a-user-role-badge.sass index 30102d2b00c..63b248c913f 100644 --- a/app/javascript/stylesheets/atoms/_a-user-role-badge.sass +++ b/app/javascript/stylesheets/atoms/_a-user-role-badge.sass @@ -1,20 +1,23 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/text" + .a-user-role-badge border: solid 1px var(--main) padding-inline: .75em height: 1.75em - +text-block(.625rem 1, center flex nowrap) + +text.text-block(.625rem 1, center flex nowrap) color: var(--main) align-items: center margin-right: .5rem border-radius: 1rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) transform: scale(.9375, .9375) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) transform: scale(.875, .875) &.is-header margin-left: .5rem margin-right: 0 - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-left: .125rem .a-user-role-badge__label diff --git a/app/javascript/stylesheets/atoms/_a-user-role.sass b/app/javascript/stylesheets/atoms/_a-user-role.sass index f7b3d73a65d..c907d6777a1 100644 --- a/app/javascript/stylesheets/atoms/_a-user-role.sass +++ b/app/javascript/stylesheets/atoms/_a-user-role.sass @@ -1,5 +1,7 @@ +@use "../config/mixins/user-role" + .a-user-role display: inline-block border-radius: 50% background-color: var(--base) - +icon-role-style + +user-role.icon-role-style diff --git a/app/javascript/stylesheets/atoms/_o-empty-message.sass b/app/javascript/stylesheets/atoms/_o-empty-message.sass index 12bfc3e2368..6fb8857d757 100644 --- a/app/javascript/stylesheets/atoms/_o-empty-message.sass +++ b/app/javascript/stylesheets/atoms/_o-empty-message.sass @@ -1,3 +1,5 @@ +@use "../config/mixins/text" + .o-empty-message max-width: 50rem margin-inline: auto @@ -7,9 +9,9 @@ margin-top: 1.5rem .o-empty-message__icon - +text-block(5rem 1) + +text.text-block(5rem 1) .o-empty-message__text - +text-block(1rem 1.4) + +text.text-block(1rem 1.4) margin-top: 1em text-align: center diff --git a/app/javascript/stylesheets/config/functions/_assign-inputs.sass b/app/javascript/stylesheets/config/functions/_assign-inputs.sass index 23d72f6d902..5d38d3fbbcb 100644 --- a/app/javascript/stylesheets/config/functions/_assign-inputs.sass +++ b/app/javascript/stylesheets/config/functions/_assign-inputs.sass @@ -1,13 +1,17 @@ +@use "sass:list" +@use "sass:string" +@use "../variables/text-inputs-list" + @function _assign-inputs($inputs, $pseudo: null) $list: () @each $input in $inputs - $input: unquote($input) + $input: string.unquote($input) $input: if($pseudo, $input + ":" + $pseudo, $input) - $list: append($list, $input, comma) + $list: list.append($list, $input, comma) @return $list -$all-text-inputs: _assign-inputs($_text-inputs-list) -$all-text-inputs-active: _assign-inputs($_text-inputs-list, active) -$all-text-inputs-focus: _assign-inputs($_text-inputs-list, focus) -$all-text-inputs-hover: _assign-inputs($_text-inputs-list, hover) -$all-text-inputs-invalid: _assign-inputs($_text-inputs-list, invalid) +$all-text-inputs: _assign-inputs(text-inputs-list.$text-inputs-list) +$all-text-inputs-active: _assign-inputs(text-inputs-list.$text-inputs-list, active) +$all-text-inputs-focus: _assign-inputs(text-inputs-list.$text-inputs-list, focus) +$all-text-inputs-hover: _assign-inputs(text-inputs-list.$text-inputs-list, hover) +$all-text-inputs-invalid: _assign-inputs(text-inputs-list.$text-inputs-list, invalid) diff --git a/app/javascript/stylesheets/config/functions/_border.sass b/app/javascript/stylesheets/config/functions/_border.sass index 911704c6f61..ca841c152cb 100644 --- a/app/javascript/stylesheets/config/functions/_border.sass +++ b/app/javascript/stylesheets/config/functions/_border.sass @@ -1,3 +1,6 @@ +@use "list" +@use "number" + @function border-color($value) @if optional_color_list($value) @return true @@ -5,15 +8,15 @@ @return null @function border-width($value) - @if number($value) + @if number.number($value) @return true @else if $value == 'thin' or $value == 'medium' or $value == 'thick' @return true - @else if list($value) + @else if list.list($value) @each $assign in $value @if $assign == 'thin' or $assign == 'medium' or $assign == 'thick' @return true - @else if number($assign) + @else if number.number($assign) @return true @else @return null @@ -23,7 +26,7 @@ @function border-style($value) @if $value == 'none' or $value == 'hidden' or $value == 'solid' or $value == 'double' or $value == 'groove' or $value == 'ridge' or $value == 'inset' or $value == 'outset' or $value == 'dashed' or $value == 'dotted' @return true - @else if list($value) + @else if list.list($value) @each $assign in $value @if $value == 'none' or $value == 'hidden' or $value == 'solid' or $value == 'double' or $value == 'groove' or $value == 'ridge' or $value == 'inset' or $value == 'outset' or $value == 'dashed' or $value == 'dotted' @return true @@ -35,7 +38,7 @@ @function border-position($value) @if $value == "top" or $value == "bottom" or $value == "left" or $value == "right" or $value == "all" or $value == "horizontal" or $value == "vertical" @return true - @else if list($value) + @else if list.list($value) @each $assign in $value @if $value == "top" or $value == "bottom" or $value == "left" or $value == "right" or $value == "all" or $value == "horizontal" or $value == "vertical" @return true diff --git a/app/javascript/stylesheets/config/functions/_color.sass b/app/javascript/stylesheets/config/functions/_color.sass index ae214a126c3..265625ea754 100644 --- a/app/javascript/stylesheets/config/functions/_color.sass +++ b/app/javascript/stylesheets/config/functions/_color.sass @@ -1,21 +1,26 @@ +@use "sass:color" +@use "sass:list" +@use "math" as functions-math +@use "text" + @use "sass:math" @function tint($color, $percentage) - @return mix(white, $color, $percentage) + @return color.mix(white, $color, $percentage) @function shade($color, $percentage) - @return mix(black, $color, $percentage) + @return color.mix(black, $color, $percentage) // Adapted from: https://gist.github.com/voxpelli/6304812 @function luma($color) - @if color($color) - $rgba: red($color), green($color), blue($color) + @if text.color($color) + $rgba: color.channel($color, 'red', $space: rgb), color.channel($color, 'green', $space: rgb), color.channel($color, 'blue', $space: rgb) $rgba2: () @for $i from 1 through 3 - $rgb: nth($rgba, $i) + $rgb: list.nth($rgba, $i) $rgb: math.div($rgb, 255) - $rgb: if($rgb < .03928, math.div($rgb, 12.92), pow(math.div($rgb + .055, 1.055), 2.4)) - $rgba2: append($rgba2, $rgb) - @return (.2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + .0722 * nth($rgba2, 3))*100 + $rgb: if($rgb < .03928, math.div($rgb, 12.92), functions-math.pow(math.div($rgb + .055, 1.055), 2.4)) + $rgba2: list.append($rgba2, $rgb) + @return (.2126 * list.nth($rgba2, 1) + .7152 * list.nth($rgba2, 2) + .0722 * list.nth($rgba2, 3))*100 @else @return $color diff --git a/app/javascript/stylesheets/config/functions/_list.sass b/app/javascript/stylesheets/config/functions/_list.sass index 32e1a2e288f..f769bbd30e1 100644 --- a/app/javascript/stylesheets/config/functions/_list.sass +++ b/app/javascript/stylesheets/config/functions/_list.sass @@ -1,26 +1,28 @@ +@use "sass:list" +@use "sass:meta" @function list($value) - @if type-of($value) == list + @if meta.type-of($value) == list @return true @else @return null // $nのときにtrue @function equal_nth($value, $n) - @if length($value) == $n + @if list.length($value) == $n @return true @else @return null // $n以上のときにtrue @function or_more_nth($value, $n) - @if length($value) >= $n + @if list.length($value) >= $n @return true @else @return null // $n以下のときにtrue @function or_less_nth($value, $n) - @if length($value) <= $n + @if list.length($value) <= $n @return true @else @return null @@ -28,6 +30,6 @@ // $n以上のときだけ$valueを出す @function optional_nth($value, $n, $false-value: null) @if or_more_nth($value, $n) - @return nth($value, $n) + @return list.nth($value, $n) @else @return $false-value diff --git a/app/javascript/stylesheets/config/functions/_math.sass b/app/javascript/stylesheets/config/functions/_math.sass index ac60ad54f64..9eb21d61701 100644 --- a/app/javascript/stylesheets/config/functions/_math.sass +++ b/app/javascript/stylesheets/config/functions/_math.sass @@ -9,13 +9,13 @@ @if ($b != 0) @return gcd($b, $a % $b) @else - @return abs($a) + @return math.abs($a) @function pow($base, $exponent, $prec: 12) // Handles decimal exponents by trying to convert them into a fraction and then use a nthRoot-algorithm for parts of the calculation - @if (floor($exponent) != $exponent) + @if (math.floor($exponent) != $exponent) $prec2 : pow(10, $prec) - $exponent: round($exponent * $prec2) + $exponent: math.round($exponent * $prec2) $denominator: gcd($exponent, $prec2) @return nthRoot(pow($base, math.div($exponent, $denominator)), math.div($prec2, $denominator), $prec) $value: $base @@ -38,10 +38,10 @@ @return math.div($n2 * $n3, $n1) @function second_decimal_place_floor($num) - @return floor($num * 10) * 0.1 + @return math.floor($num * 10) * 0.1 @function second_decimal_place_ceil($num) - @return ceil($num * 10) * 0.1 + @return math.ceil($num * 10) * 0.1 @function second_decimal_place_round($num) - @return round($num * 10) * 0.1 + @return math.round($num * 10) * 0.1 diff --git a/app/javascript/stylesheets/config/functions/_number.sass b/app/javascript/stylesheets/config/functions/_number.sass index 8e7b1e7e14b..75136d66e10 100644 --- a/app/javascript/stylesheets/config/functions/_number.sass +++ b/app/javascript/stylesheets/config/functions/_number.sass @@ -1,8 +1,9 @@ +@use "sass:meta" @use "sass:math" // 数字のときにtrue @function number($number) - @if type-of($number) == number + @if meta.type-of($number) == number @return true @else @return null @@ -15,32 +16,32 @@ // 単位がない数字のときにtrue @function unitless_number($number) - @if number($number) and unitless($number) + @if number($number) and math.is-unitless($number) @return true @else @return null // 単位がある数字のときにtrue @function unit_number($value) - @if number($value) and not unitless($value) + @if number($value) and not math.is-unitless($value) @return true @else @return null @function px($value) - @if number($value) and unit($value) == "px" + @if number($value) and math.unit($value) == "px" @return true @else @return null @function em($value) - @if number($value) and unit($value) == "em" + @if number($value) and math.unit($value) == "em" @return true @else @return null @function percent($value) - @if number($value) and unit($value) == "%" + @if number($value) and math.unit($value) == "%" @return true @else @return null diff --git a/app/javascript/stylesheets/config/functions/_text.sass b/app/javascript/stylesheets/config/functions/_text.sass index 8fbb93aecff..a566c95a1da 100644 --- a/app/javascript/stylesheets/config/functions/_text.sass +++ b/app/javascript/stylesheets/config/functions/_text.sass @@ -1,3 +1,6 @@ +@use "sass:meta" +@use "number" + @function display($value) @if $value == "inline" or $value == "block" or $value == "list-item" or $value == "run-in" or $value == "inline-block" or $value == "table" or $value == "inline-table" or $value == "table-row-group" or $value == "table-header-group" or $value == "table-footer-group" or $value == "table-row" or $value == "table-column-group" or $value == "table-column" or $value == "table-cell" or $value == "table-caption" or $value == "none" or $value == "flex" or $value == "inline-flex" @return true @@ -11,7 +14,7 @@ @return null @function color($value) - @if type-of($value) == color + @if meta.type-of($value) == color @return true @else @return null @@ -19,7 +22,7 @@ @function font_weight($value) @if $value == "bold" or $value == "normal" @return true - @else if unitless_number($value) + @else if number.unitless_number($value) @if $value >= 100 @return true @else diff --git a/app/javascript/stylesheets/config/mixins/_badge.sass b/app/javascript/stylesheets/config/mixins/_badge.sass index 4834bdbe0c4..5b6feb2cf27 100644 --- a/app/javascript/stylesheets/config/mixins/_badge.sass +++ b/app/javascript/stylesheets/config/mixins/_badge.sass @@ -1,3 +1,7 @@ +@use "../functions/color" +@use "../functions/number" +@use "../variables/colors" + =badge-base text-transform: none display: inline-flex @@ -21,14 +25,14 @@ =badge-color($color) background-color: $color - $text-color: if(luma($color) > 50, $default-text, $reversal-text) + $text-color: if(color.luma($color) > 50, colors.$default-text, colors.$reversal-text) color: $text-color - border-color: if(luma($color) > 80, shade($color, 18%), $color) + border-color: if(color.luma($color) > 80, color.shade($color, 18%), $color) =badge-size($font-size: 1rem, $horizontal: .75, $vertical: .625) font-size: $font-size - padding-inline: #{strip_unit($horizontal * $font-size)}em - @if unitless_number($vertical) - height: #{strip_unit(($font-size * 1.4) + (($vertical * $font-size) * 2))}em + padding-inline: #{number.strip_unit($horizontal * $font-size)}em + @if number.unitless_number($vertical) + height: #{number.strip_unit(($font-size * 1.4) + (($vertical * $font-size) * 2))}em @else height: $vertical diff --git a/app/javascript/stylesheets/config/mixins/_border-radius.sass b/app/javascript/stylesheets/config/mixins/_border-radius.sass index 0ce988c85cd..06c3eb4f5cd 100644 --- a/app/javascript/stylesheets/config/mixins/_border-radius.sass +++ b/app/javascript/stylesheets/config/mixins/_border-radius.sass @@ -1,22 +1,25 @@ +@use "sass:list" +@use "../functions/number" + // 使い方 // +border-radius(vertical, 4px) =border-radius($value1: null, $value2: null) - @if number(nth($value1, 1)) + @if number.number(list.nth($value1, 1)) border-radius: $value1 @else - @for $i from 1 through length($value1) - @if nth($value1, $i) == 'all' + @for $i from 1 through list.length($value1) + @if list.nth($value1, $i) == 'all' border-radius: $value2 - @else if nth($value1, $i) == 'top' + @else if list.nth($value1, $i) == 'top' border-top-left-radius: $value2 border-top-right-radius: $value2 - @else if nth($value1, $i) == 'bottom' + @else if list.nth($value1, $i) == 'bottom' border-bottom-left-radius: $value2 border-bottom-right-radius: $value2 - @else if nth($value1, $i) == 'left' + @else if list.nth($value1, $i) == 'left' border-top-left-radius: $value2 border-bottom-left-radius: $value2 - @else if nth($value1, $i) == 'right' + @else if list.nth($value1, $i) == 'right' border-top-right-radius: $value2 border-bottom-right-radius: $value2 diff --git a/app/javascript/stylesheets/config/mixins/_border.sass b/app/javascript/stylesheets/config/mixins/_border.sass index 838bbe8901e..7deae411e1a 100644 --- a/app/javascript/stylesheets/config/mixins/_border.sass +++ b/app/javascript/stylesheets/config/mixins/_border.sass @@ -1,28 +1,33 @@ +@use "sass:list" +@use "../functions/border" +@use "../functions/position" +@use "../variables/layout" + =assign-border-position($border-position, $border-values) #{if($border-position, border-#{$border-position}, border)}: - @for $i from 1 through length($border-values) - @if border-width(nth($border-values, $i)) - width: nth($border-values, $i) - @else if border-style(nth($border-values, $i)) - style: nth($border-values, $i) - @else if border-color(nth($border-values, $i)) - color: nth($border-values, $i) + @for $i from 1 through list.length($border-values) + @if border.border-width(list.nth($border-values, $i)) + width: list.nth($border-values, $i) + @else if border.border-style(list.nth($border-values, $i)) + style: list.nth($border-values, $i) + @else if border.border-color(list.nth($border-values, $i)) + color: list.nth($border-values, $i) // 使い方 // +border(vertical left, solid white 4px) =border($value1: null, $value2: null) - @for $i from 1 through length($value1) - @if all(nth($value1, $i)) + @for $i from 1 through list.length($value1) + @if position.all(list.nth($value1, $i)) +assign-border-position(false, $value2) - @else if vertical(nth($value1, $i)) - $border-positions: $vertical + @else if position.vertical(list.nth($value1, $i)) + $border-positions: layout.$vertical @each $border-position in $border-positions +assign-border-position($border-position, $value2) - @else if horizontal(nth($value1, $i)) - $border-positions: $horizontal + @else if position.horizontal(list.nth($value1, $i)) + $border-positions: layout.$horizontal @each $border-position in $border-positions +assign-border-position($border-position, $value2) - @else if four_positions(nth($value1, $i)) - $border-positions: nth($value1, $i) + @else if four_positions(list.nth($value1, $i)) + $border-positions: list.nth($value1, $i) @each $border-position in $border-positions +assign-border-position($border-position, $value2) diff --git a/app/javascript/stylesheets/config/mixins/_break-points.sass b/app/javascript/stylesheets/config/mixins/_break-points.sass index a8d340d3acd..86ea807a75a 100644 --- a/app/javascript/stylesheets/config/mixins/_break-points.sass +++ b/app/javascript/stylesheets/config/mixins/_break-points.sass @@ -1,16 +1,20 @@ -@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) - $n: index($breakpoint-names, $name) - @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null) +@use "sass:list" +@use "sass:map" +@use "../variables/layout" -@function breakpoint-min($name, $breakpoints: $grid-breakpoints) - $min: map-get($breakpoints, $name) +@function breakpoint-next($name, $breakpoints: layout.$grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) + $n: list.index($breakpoint-names, $name) + @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null) + +@function breakpoint-min($name, $breakpoints: layout.$grid-breakpoints) + $min: map.get($breakpoints, $name) @return if($min != 0, $min, null) -@function breakpoint-max($name, $breakpoints: $grid-breakpoints) +@function breakpoint-max($name, $breakpoints: layout.$grid-breakpoints) $next: breakpoint-next($name, $breakpoints) @return if($next, breakpoint-min($next, $breakpoints) - 0.0625em, null) -=media-breakpoint-up($name, $breakpoints: $grid-breakpoints) +=media-breakpoint-up($name, $breakpoints: layout.$grid-breakpoints) $min: breakpoint-min($name, $breakpoints) @if $min @media (min-width: $min) @@ -18,7 +22,7 @@ @else @content -=media-breakpoint-down($name, $breakpoints: $grid-breakpoints) +=media-breakpoint-down($name, $breakpoints: layout.$grid-breakpoints) $max: breakpoint-max($name, $breakpoints) @if $max @media (max-width: $max) @@ -26,12 +30,12 @@ @else @content -=media-breakpoint-only($name, $breakpoints: $grid-breakpoints) +=media-breakpoint-only($name, $breakpoints: layout.$grid-breakpoints) +media-breakpoint-up($name, $breakpoints) +media-breakpoint-down($name, $breakpoints) @content -=media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) +=media-breakpoint-between($lower, $upper, $breakpoints: layout.$grid-breakpoints) +media-breakpoint-up($lower, $breakpoints) +media-breakpoint-down($upper, $breakpoints) @content diff --git a/app/javascript/stylesheets/config/mixins/_button.sass b/app/javascript/stylesheets/config/mixins/_button.sass index 1f5983c55fd..12b5326b7c6 100644 --- a/app/javascript/stylesheets/config/mixins/_button.sass +++ b/app/javascript/stylesheets/config/mixins/_button.sass @@ -1,3 +1,12 @@ +@use "sass:color" +@use "../functions/color" as functions-color +@use "../functions/number" +@use "../variables/colors" +@use "font-awsome" +@use "position" +@use "size" +@use "text" + =button-base text-transform: none font-weight: 600 @@ -30,7 +39,7 @@ cursor: default &.is-select select - +size(100%) + +size.size(100%) cursor: pointer i margin-right: .35em @@ -38,27 +47,27 @@ font-size: 1.07em &.is-icon i - +text-block(1.35em 1) + +text.text-block(1.35em 1) margin-right: 0 &.is-checkbox - +position(relative) + +position.position(relative) &::before content: "" - +size(.9375em) + +size.size(.9375em) border-radius: .1875em display: block border: solid 1px var(--background-shade) background-color: var(--base) - +position(absolute, left 1em, top 50%) + +position.position(absolute, left 1em, top 50%) transform: translate(0, -50%) &::after - +fa(fas "\f00c") - +text-block(1em 1, flex) + +font-awsome.fa(fas "\f00c") + +text.text-block(1em 1, flex) color: var(--reversal-text) align-items: center justify-content: center - +size(.9375em) - +position(absolute, left 1em, top 50%) + +size.size(.9375em) + +position.position(absolute, left 1em, top 50%) transform: translate(0, -50%) opacity: 0 input:checked + &::before @@ -75,8 +84,8 @@ display: block =button-color($color) - $text-color: if(luma($color) > 50, $default-text, $reversal-text) - $border-color: if(luma($color) > 80, saturate(darken($color, 12%), 2%), $color) + $text-color: if(functions-color.luma($color) > 50, colors.$default-text, colors.$reversal-text) + $border-color: if(functions-color.luma($color) > 80, color.adjust(color.adjust($color, $lightness: -12%), $saturation: 2%), $color) background-color: $color color: $text-color border-color: $border-color @@ -88,14 +97,14 @@ &:hover, &:focus, &:active - $button-color: saturate(darken($color, 4%), 2%) - $border-color: if(luma($color) > 80, saturate(darken($color, 18%), 2%), $color) + $button-color: color.adjust(color.adjust($color, $lightness: -4%), $saturation: 2%) + $border-color: if(functions-color.luma($color) > 80, color.adjust(color.adjust($color, $lightness: -18%), $saturation: 2%), $color) background-color: $button-color border-color: $border-color &.is-disabled, &:disabled color: rgba($text-color, .4) - border-color: shade($color, 6%) + border-color: functions-color.shade($color, 6%) pointer-events: none =border-button-color($color) @@ -116,33 +125,33 @@ &.is-disabled, &:disabled color: rgba($text-color, .4) - border-color: shade($color, 6%) + border-color: functions-color.shade($color, 6%) pointer-events: none =button-size($font-size: 1rem, $horizontal: .75, $vertical: .625) font-size: $font-size - padding-inline: #{strip_unit($horizontal * $font-size)}em - @if unitless_number($vertical) - height: #{strip_unit(($font-size * 1.4) + (($vertical * $font-size) * 2))}em + padding-inline: #{number.strip_unit($horizontal * $font-size)}em + @if number.unitless_number($vertical) + height: #{number.strip_unit(($font-size * 1.4) + (($vertical * $font-size) * 2))}em @else height: $vertical &.is-icon - padding-inline: #{strip_unit($horizontal * $font-size * 1)}em + padding-inline: #{number.strip_unit($horizontal * $font-size * 1)}em &.is-select padding-inline: 0 - +position(relative) + +position.position(relative) &::before - +fa(fas "\f0d7") - +size(2em 100%) - +position(absolute, right 0, top 0, bottom 0) - +text-block(1em 1, flex) + +font-awsome.fa(fas "\f0d7") + +size.size(2em 100%) + +position.position(absolute, right 0, top 0, bottom 0) + +text.text-block(1em 1, flex) color: var(--muted-text) align-items: center justify-content: center select padding-left: 1em padding-right: 2em - +position(relative, 1) + +position.position(relative, 1) &.is-checkbox padding-left: 2.75em diff --git a/app/javascript/stylesheets/config/mixins/_font-awsome.sass b/app/javascript/stylesheets/config/mixins/_font-awsome.sass index 1cec577897a..b5254f817d4 100644 --- a/app/javascript/stylesheets/config/mixins/_font-awsome.sass +++ b/app/javascript/stylesheets/config/mixins/_font-awsome.sass @@ -1,3 +1,6 @@ +@use "sass:list" +@use "../functions/list" as functions-list + =font-awsome-4-core font-family: FontAwesome font-style: normal @@ -13,29 +16,29 @@ line-height: 1 =fa($value) - @if equal_nth($value, 1) + @if functions-list.equal_nth($value, 1) +font-awsome-4-core content: "#{$value}" - @else if equal_nth($value, 2) + @else if functions-list.equal_nth($value, 2) +font-awsome-5-core - content: "#{nth($value, 2)}" - @if nth($value, 1) == fa or nth($value, 1) == fas + content: "#{list.nth($value, 2)}" + @if list.nth($value, 1) == fa or list.nth($value, 1) == fas font-family: 'Font Awesome 6 Pro' font-style: normal font-weight: 900 - @else if nth($value, 1) == far + @else if list.nth($value, 1) == far font-family: 'Font Awesome 6 Pro' font-style: normal font-weight: 400 - @else if nth($value, 1) == fal + @else if list.nth($value, 1) == fal font-family: 'Font Awesome 6 Pro' font-style: normal font-weight: 300 - @else if nth($value, 1) == fab + @else if list.nth($value, 1) == fab font-family: 'Font Awesome 6 Brands' font-style: normal font-weight: normal - @else if nth($value, 1) == fad + @else if list.nth($value, 1) == fad font-family: 'Font Awesome 6 Duotone' font-style: normal font-weight: 900 diff --git a/app/javascript/stylesheets/config/mixins/_grid.sass b/app/javascript/stylesheets/config/mixins/_grid.sass index b3f3147ac39..4f50d837577 100644 --- a/app/javascript/stylesheets/config/mixins/_grid.sass +++ b/app/javascript/stylesheets/config/mixins/_grid.sass @@ -1,15 +1,20 @@ +@use "../functions/number" +@use "../variables/layout" +@use "grid/grid" +@use "grid/grid-framework" + @use "sass:math" .row - +make-row - +make-grid-columns + +grid-framework.make-row + +grid.make-grid-columns =grid($gutter-size) &.row - gap: px_to_rem($gutter-size) + gap: number.px_to_rem($gutter-size) .row @for $i from 0 through 16 $gutter-size: $i * 4 &.is-gutter-width-#{$gutter-size} gap: #{math.div($gutter-size, 16)}rem - +make-grid-columns($grid-columns, #{math.div($gutter-size, 16)}rem) + +grid.make-grid-columns(layout.$grid-columns, #{math.div($gutter-size, 16)}rem) diff --git a/app/javascript/stylesheets/config/mixins/_long-text-style.sass b/app/javascript/stylesheets/config/mixins/_long-text-style.sass index 1cef18df534..b4c9cc9f565 100644 --- a/app/javascript/stylesheets/config/mixins/_long-text-style.sass +++ b/app/javascript/stylesheets/config/mixins/_long-text-style.sass @@ -1,3 +1,12 @@ +@use "sass:color" +@use "../variables/colors" +@use "break-points" +@use "font-awsome" +@use "link" +@use "position" +@use "size" +@use "text" + =blocks video, canvas, @@ -28,7 +37,7 @@ list-style-position: outside margin-left: 1.75em li - +text-block(1em 1.86) + +text.text-block(1em 1.86) margin-block: .5em &:first-child margin-top: 0 @@ -83,7 +92,7 @@ margin-bottom: 0 .speak__speaker-name flex: 1 - +text-block(1em 1.6, 700) + +text.text-block(1em 1.6, 700) text-decoration: none white-space: nowrap .speak__body @@ -91,12 +100,12 @@ =headdings h1 - +text-block(1.875em 1.466 0 .75em, 600) + +text.text-block(1.875em 1.466 0 .75em, 600) color: var(--main-text) padding-bottom: .25em border-bottom: 3px solid var(--border) h2 - +text-block(1.625em 1.4615 0 .75em, 600) + +text.text-block(1.625em 1.4615 0 .75em, 600) padding-bottom: .25em border-bottom: 1px solid var(--border) * + h2 @@ -109,22 +118,22 @@ * + h5 margin-top: 1.5em h3 - +text-block(1.375em 1.6, 600) + +text.text-block(1.375em 1.6, 600) margin-bottom: .625em & + * margin-top: 0 !important h4 - +text-block(1.25em 1.6, 600) + +text.text-block(1.25em 1.6, 600) margin-bottom: .625em & + * margin-top: 0 !important h5 - +text-block(1.125em 1.6, 600) + +text.text-block(1.125em 1.6, 600) margin-bottom: .625em & + * margin-top: 0 !important h6 - +text-block(1em 1.6, 600) + +text.text-block(1em 1.6, 600) margin-bottom: .625em & + * margin-top: 0 !important @@ -145,12 +154,12 @@ opacity: 1 .header-anchor display: flex - +text-block(.75rem, 400) + +text.text-block(.75rem, 400) float: left - +position(absolute) + +position.position(absolute) margin-left: -1.5rem text-decoration: none !important - +size(1.5rem 100%) + +size.size(1.5rem 100%) align-items: center justify-content: center transition: all .2s ease-out @@ -167,18 +176,18 @@ td border: solid 1px var(--border-shade) padding: .5em .625em - +text-block(.875em 1.6, left) + +text.text-block(.875em 1.6, left) th background-color: var(--background) tbody tr &:nth-child(even) - background-color: mix($default-text, $background, 2%) + background-color: color.mix(colors.$default-text, colors.$background, 2%) =figure figure:has(figcaption) > *:first-child margin-bottom: 0 figcaption - +text-block(.875em 1.6) + +text.text-block(.875em 1.6) margin-top: .75em text-align: center @@ -190,8 +199,8 @@ background-color: var(--warning-tint) color: var(--warning-text) &::before - +fa(fas '\f06a') - +position(absolute, left .25em, top .25em) + +font-awsome.fa(fas '\f06a') + +position.position(absolute, left .25em, top .25em) font-size: 1.5em color: var(--warning) &.alert, @@ -229,23 +238,23 @@ position: relative padding-left: 1.375em .task-list-item-checkbox - +position(absolute, top .5em, left 0) + +position.position(absolute, top .5em, left 0) -=long-text-style($pc-font-size: 1rem, $mobile-font-size: .8125rem, $background: $base, $font: $default-text) +=long-text-style($pc-font-size: 1rem, $mobile-font-size: .8125rem, $background: colors.$base, $font: colors.$default-text) word-wrap: break-word - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: $pc-font-size - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: $mobile-font-size +headdings p - +text-block(1em 1.86) + +text.text-block(1em 1.86) a - +hover-link-reversal - +default-link + +link.hover-link-reversal + +colors.default-link &:hover img - border-color: mix($font, $background, 16%) + border-color: color.mix($font, $background, 16%) a, a:link, a:visited, @@ -254,14 +263,14 @@ code text-decoration: none !important dl - border: 1px solid mix($font, $background, 20%) + border: 1px solid color.mix($font, $background, 20%) padding: 1em border-radius: .25rem dt - +text-block(1em 1.6, 600) + +text.text-block(1em 1.6, 600) margin-bottom: .25em dd - +text-block(1em 1.6) + +text.text-block(1em 1.6) &:not(:last-child) margin-block: 1em code @@ -272,7 +281,7 @@ padding: 0 code border: none - +text-block(.9375em 1.5) + +text.text-block(.9375em 1.5) overflow: auto display: block width: 100% @@ -296,13 +305,13 @@ blockquote + ul margin-top: -2em >code - +text-block(.875em 1.7, inline-flex) + +text.text-block(.875em 1.7, inline-flex) color: var(--default-text) align-items: center letter-spacing: 0 padding-inline: .25rem border: solid 1px var(--border) - background-color: mix($font, $background, 4%) + background-color: color.mix($font, $background, 4%) margin-inline: .25rem border-radius: .125rem pre[class*=language-] @@ -316,14 +325,14 @@ height: auto display: block margin-inline: auto - border: 1px solid mix($font, $background, 10%) + border: 1px solid color.mix($font, $background, 10%) &.is-xs max-width: 10em &.is-sm max-width: 20em &.is-md max-width: 30em - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) max-width: 100% !important br + img margin-block: 1em @@ -334,7 +343,7 @@ blockquote padding-left: 1.5em - +position(relative) + +position.position(relative) border-left: solid .25em var(--border-tint) +list p + & @@ -345,17 +354,17 @@ margin-bottom: 0 !important details - +text-block(.875rem 1.8) + +text.text-block(.875rem 1.8) margin-bottom: 1.5em border: solid 1px var(--border) padding: .5em 1em border-radius: .25rem +list summary - +text-block(1em 1.8) + +text.text-block(1em 1.8) cursor: pointer outline: none - +hover-link + +link.hover-link &[open] summary border-bottom: solid 1px var(--border) padding-bottom: .5em @@ -407,7 +416,7 @@ pointer-events: none .a-user-emoji-link - +size(2em) + +size.size(2em) display: inline-block &:not(:first-child) margin-left: .5em @@ -416,7 +425,7 @@ .header-anchor + .a-user-emoji-link margin-left: 0 .a-user-emoji - +size(1.8em) + +size.size(1.8em) object-fit: cover background-color: var(--base) border-radius: 2px diff --git a/app/javascript/stylesheets/config/mixins/_margin-padding.sass b/app/javascript/stylesheets/config/mixins/_margin-padding.sass index b1bde26ee64..d6022d68c3e 100644 --- a/app/javascript/stylesheets/config/mixins/_margin-padding.sass +++ b/app/javascript/stylesheets/config/mixins/_margin-padding.sass @@ -1,26 +1,30 @@ +@use "sass:list" +@use "../functions/list" as functions-list +@use "../functions/number" + =margin($value1, $value2: null) - @if number(nth($value1, 1)) or nth($value1, 1) == 'auto' - @if equal_nth($value1, 1) + @if number.number(list.nth($value1, 1)) or list.nth($value1, 1) == 'auto' + @if functions-list.equal_nth($value1, 1) margin: $value1 - @else if equal_nth($value1, 2) - margin-top: nth($value1, 1) - margin-bottom: nth($value1, 2) - @else if equal_nth($value1, 3) - margin-top: nth($value1, 1) - margin-left: nth($value1, 2) - margin-right: nth($value1, 2) - margin-bottom: nth($value1, 3) - @else if equal_nth($value1, 4) - margin-top: nth($value1, 1) - margin-right: nth($value1, 2) - margin-bottom: nth($value1, 3) - margin-left: nth($value1, 4) - @else if length($value1) == 1 and nth($value1, 1) == 'vertical' - margin-top: if(list($value2), nth($value2, 1), $value2) - margin-bottom: if(list($value2),nth($value2, 2), $value2) - @else if length($value1) == 1 and nth($value1, 1) == 'horizontal' - margin-left: if(list($value2), nth($value2, 1), $value2) - margin-right: if(list($value2),nth($value2, 2), $value2) + @else if functions-list.equal_nth($value1, 2) + margin-top: list.nth($value1, 1) + margin-bottom: list.nth($value1, 2) + @else if functions-list.equal_nth($value1, 3) + margin-top: list.nth($value1, 1) + margin-left: list.nth($value1, 2) + margin-right: list.nth($value1, 2) + margin-bottom: list.nth($value1, 3) + @else if functions-list.equal_nth($value1, 4) + margin-top: list.nth($value1, 1) + margin-right: list.nth($value1, 2) + margin-bottom: list.nth($value1, 3) + margin-left: list.nth($value1, 4) + @else if list.length($value1) == 1 and list.nth($value1, 1) == 'vertical' + margin-top: if(functions-list.list($value2), list.nth($value2, 1), $value2) + margin-bottom: if(functions-list.list($value2),list.nth($value2, 2), $value2) + @else if list.length($value1) == 1 and list.nth($value1, 1) == 'horizontal' + margin-left: if(functions-list.list($value2), list.nth($value2, 1), $value2) + margin-right: if(functions-list.list($value2),list.nth($value2, 2), $value2) @else @each $position in $value1 @if $position == 'all' @@ -35,28 +39,28 @@ margin-#{$position}: $value2 =padding($value1: null, $value2: null) - @if number(nth($value1, 1)) or nth($value1, 1) == 'auto' - @if equal_nth($value1, 1) + @if number.number(list.nth($value1, 1)) or list.nth($value1, 1) == 'auto' + @if functions-list.equal_nth($value1, 1) padding: $value1 - @else if equal_nth($value1, 2) - padding-top: nth($value1, 1) - padding-bottom: nth($value1, 2) - @else if equal_nth($value1, 3) - padding-top: nth($value1, 1) - padding-left: nth($value1, 2) - padding-right: nth($value1, 2) - padding-bottom: nth($value1, 3) - @else if equal_nth($value1, 4) - padding-top: nth($value1, 1) - padding-right: nth($value1, 2) - padding-bottom: nth($value1, 3) - padding-left: nth($value1, 4) - @else if length($value1) == 1 and nth($value1, 1) == 'vertical' - padding-top: if(list($value2), nth($value2, 1), $value2) - padding-bottom: if(list($value2),nth($value2, 2), $value2) - @else if length($value1) == 1 and nth($value1, 1) == 'horizontal' - padding-left: if(list($value2), nth($value2, 1), $value2) - padding-right: if(list($value2),nth($value2, 2), $value2) + @else if functions-list.equal_nth($value1, 2) + padding-top: list.nth($value1, 1) + padding-bottom: list.nth($value1, 2) + @else if functions-list.equal_nth($value1, 3) + padding-top: list.nth($value1, 1) + padding-left: list.nth($value1, 2) + padding-right: list.nth($value1, 2) + padding-bottom: list.nth($value1, 3) + @else if functions-list.equal_nth($value1, 4) + padding-top: list.nth($value1, 1) + padding-right: list.nth($value1, 2) + padding-bottom: list.nth($value1, 3) + padding-left: list.nth($value1, 4) + @else if list.length($value1) == 1 and list.nth($value1, 1) == 'vertical' + padding-top: if(functions-list.list($value2), list.nth($value2, 1), $value2) + padding-bottom: if(functions-list.list($value2),list.nth($value2, 2), $value2) + @else if list.length($value1) == 1 and list.nth($value1, 1) == 'horizontal' + padding-left: if(functions-list.list($value2), list.nth($value2, 1), $value2) + padding-right: if(functions-list.list($value2),list.nth($value2, 2), $value2) @else @each $position in $value1 @if $position == 'all' diff --git a/app/javascript/stylesheets/config/mixins/_position.sass b/app/javascript/stylesheets/config/mixins/_position.sass index 5f58553231e..57fb40dcd44 100644 --- a/app/javascript/stylesheets/config/mixins/_position.sass +++ b/app/javascript/stylesheets/config/mixins/_position.sass @@ -1,11 +1,15 @@ +@use "sass:list" +@use "../functions/list" as functions-list +@use "../functions/number" + =position-list($value1, $value2, $value3, $value4, $value5, $value6) $values: $value1 $value2 $value3 $value4 $value5 $value6 @each $value in $values - @if optional_nth($value, 2) - #{nth($value, 1)}: nth($value, 2) - @else if unitless_number($value) - z-index: nth($value, 1) + @if functions-list.optional_nth($value, 2) + #{list.nth($value, 1)}: list.nth($value, 2) + @else if number.unitless_number($value) + z-index: list.nth($value, 1) @else position: $value diff --git a/app/javascript/stylesheets/config/mixins/_practice-color.sass b/app/javascript/stylesheets/config/mixins/_practice-color.sass index 64e0ab0cc9b..cdb448c0945 100644 --- a/app/javascript/stylesheets/config/mixins/_practice-color.sass +++ b/app/javascript/stylesheets/config/mixins/_practice-color.sass @@ -1,7 +1,11 @@ -=practice-button($color: $background, $border: false, $border-color: false, $text-color: false) +@use "../functions/color" +@use "../variables/colors" +@use "position" + +=practice-button($color: colors.$background, $border: false, $border-color: false, $text-color: false) background-color: $color @if $border == true - border-color: shade($color, 24%) + border-color: color.shade($color, 24%) @if $border-color border-color: $border-color @if $text-color @@ -9,16 +13,16 @@ =practice-color($border: false) &.is-not_complete - +practice-button($background, $border) + +practice-button(colors.$background, $border) color: var(--muted-text) &.is-started - +practice-button($danger, $border) + +practice-button(colors.$danger, $border) color: var(--reversal-text) &.is-submitted - +practice-button($warning, $border) + +practice-button(colors.$warning, $border) color: var(--default-text) &.is-complete - +practice-button($success, $border) + +practice-button(colors.$success, $border) color: var(--reversal-text) &.is-unstarted +practice-button(#fff) @@ -35,15 +39,15 @@ border: solid 1px =practice-hover-color($border: false) - +position(relative, 2) + +position.position(relative, 2) $border-status: $border @if $border == true border: solid 1px &.is-not_complete - +practice-button($background, $border-status, shade($background, 24%), $default-text) + +practice-button(colors.$background, $border-status, color.shade(colors.$background, 24%), colors.$default-text) &.is-started - +practice-button(tint($danger, 90%), $border-status, $danger, shade($danger, 20%)) + +practice-button(color.tint(colors.$danger, 90%), $border-status, colors.$danger, color.shade(colors.$danger, 20%)) &.is-submitted - +practice-button(tint($warning, 90%), $border-status, shade($warning, 20%), shade($warning, 20%)) + +practice-button(color.tint(colors.$warning, 90%), $border-status, color.shade(colors.$warning, 20%), color.shade(colors.$warning, 20%)) &.is-complete - +practice-button(tint($success, 90%), $border-status, $success, shade($success, 20%)) + +practice-button(color.tint(colors.$success, 90%), $border-status, colors.$success, color.shade(colors.$success, 20%)) diff --git a/app/javascript/stylesheets/config/mixins/_short-text-style.sass b/app/javascript/stylesheets/config/mixins/_short-text-style.sass index 8ab64de8f39..af3cb751513 100644 --- a/app/javascript/stylesheets/config/mixins/_short-text-style.sass +++ b/app/javascript/stylesheets/config/mixins/_short-text-style.sass @@ -1,3 +1,9 @@ +@use "font-awsome" +@use "link" +@use "position" +@use "size" +@use "text" + =short-text-style >*:first-child margin-top: 0 @@ -5,16 +11,16 @@ margin-bottom: 0 hr display: block - +size(100% 0) + +size.size(100% 0) border: none border-top: dashed 1px var(--border) margin-block: 1.5em p - +text-block(1em 1.7 0 .75em) + +text.text-block(1em 1.7 0 .75em) li - +text-block(1em 1.7 0 .125em) + +text.text-block(1em 1.7 0 .125em) a - +hover-link-reversal + +link.hover-link-reversal .message background: red @@ -24,8 +30,8 @@ background-color: var(--warning-tint) color: var(--warning-text) &::before - +fa(fas '\f06a') - +position(absolute, left .25em, top .25em) + +font-awsome.fa(fas '\f06a') + +position.position(absolute, left .25em, top .25em) font-size: 1.5em color: var(--warning) &.alert, diff --git a/app/javascript/stylesheets/config/mixins/_size.sass b/app/javascript/stylesheets/config/mixins/_size.sass index 70dad305ea1..51e64527c0c 100644 --- a/app/javascript/stylesheets/config/mixins/_size.sass +++ b/app/javascript/stylesheets/config/mixins/_size.sass @@ -1,8 +1,9 @@ +@use "sass:list" =size($sizes) - $width: nth($sizes, 1) + $width: list.nth($sizes, 1) $height: $width - @if length($sizes) > 1 - $height: nth($sizes, 2) + @if list.length($sizes) > 1 + $height: list.nth($sizes, 2) @if is-size($height) height: $height @else @@ -13,10 +14,10 @@ @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin." =max-size($sizes) - $width: nth($sizes, 1) + $width: list.nth($sizes, 1) $height: $width - @if length($sizes) > 1 - $height: nth($sizes, 2) + @if list.length($sizes) > 1 + $height: list.nth($sizes, 2) @if is-size($height) max-height: $height @else @@ -27,10 +28,10 @@ @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin." =min-size($sizes) - $width: nth($sizes, 1) + $width: list.nth($sizes, 1) $height: $width - @if length($sizes) > 1 - $height: nth($sizes, 2) + @if list.length($sizes) > 1 + $height: list.nth($sizes, 2) @if is-size($height) min-height: $height @else @@ -41,10 +42,10 @@ @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin." =all-size($sizes) - $width: nth($sizes, 1) + $width: list.nth($sizes, 1) $height: $width - @if length($sizes) > 1 - $height: nth($sizes, 2) + @if list.length($sizes) > 1 + $height: list.nth($sizes, 2) @if is-size($height) min-height: $height max-height: $height @@ -59,29 +60,29 @@ @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin." =ratio($value1: null, $value2: null) - @if nth($value2, 1) == 'horizontal' + @if list.nth($value2, 1) == 'horizontal' @if $value1 == gold $ratio: 1.618 - +size(nth($value2, 2) calc(#{nth($value2, 2)} / #{$ratio})) + +size(list.nth($value2, 2) calc(#{list.nth($value2, 2)} / #{$ratio})) @else if $value1 == silver $ratio: 1.414 - +size(nth($value2, 2) calc(#{nth($value2, 2)} / #{$ratio})) + +size(list.nth($value2, 2) calc(#{list.nth($value2, 2)} / #{$ratio})) @else if $value1 == bronze $ratio: 3.303 - +size(nth($value2, 2) calc(#{nth($value2, 2)} / #{$ratio})) + +size(list.nth($value2, 2) calc(#{list.nth($value2, 2)} / #{$ratio})) @else $ratio: $value1 - +size(nth($value2, 2) calc(#{nth($value2, 2)} / #{$ratio})) - @else if nth($value2, 1) == 'vertical' + +size(list.nth($value2, 2) calc(#{list.nth($value2, 2)} / #{$ratio})) + @else if list.nth($value2, 1) == 'vertical' @if $value1 == gold $ratio: 1.618 - +size(calc(#{nth($value2, 2)} * #{$ratio}) nth($value2, 2)) + +size(calc(#{list.nth($value2, 2)} * #{$ratio}) list.nth($value2, 2)) @else if $value1 == silver $ratio: 1.414 - +size(calc(#{nth($value2, 2)} * #{$ratio}) nth($value2, 2)) + +size(calc(#{list.nth($value2, 2)} * #{$ratio}) list.nth($value2, 2)) @else if $value1 == bronze $ratio: 3.303 - +size(calc(#{nth($value2, 2)} * #{$ratio}) nth($value2, 2)) + +size(calc(#{list.nth($value2, 2)} * #{$ratio}) list.nth($value2, 2)) @else $ratio: $value1 - +size(calc(#{nth($value2, 2)} * #{$ratio}) nth($value2, 2)) + +size(calc(#{list.nth($value2, 2)} * #{$ratio}) list.nth($value2, 2)) diff --git a/app/javascript/stylesheets/config/mixins/_text.sass b/app/javascript/stylesheets/config/mixins/_text.sass index 7aa4845b118..10805dbb5ed 100644 --- a/app/javascript/stylesheets/config/mixins/_text.sass +++ b/app/javascript/stylesheets/config/mixins/_text.sass @@ -1,11 +1,16 @@ +@use "sass:list" +@use "../functions/list" as functions-list +@use "../functions/number" +@use "../functions/text" + // どこでも font-weight と text-align と color と +top() が書ける設定 =text-block-options($value) - font-weight: if(font_weight($value), $value, null) - text-align: if(text_align($value), $value, null) - color: if(color($value), $value, null) - white-space: if(white_space($value), $value, null) - display: if(display($value), $value, null) - text-decoration: if(text_decoration($value), $value, null) + font-weight: if(text.font_weight($value), $value, null) + text-align: if(text.text_align($value), $value, null) + color: if(text.color($value), $value, null) + white-space: if(text.white_space($value), $value, null) + display: if(text.display($value), $value, null) + text-decoration: if(text.text_decoration($value), $value, null) =letter-spacing-center($space-width: null) letter-spacing: $space-width @@ -13,19 +18,19 @@ // +text-block($font-size $line-height $margin-top $margin-bottom, $font-weight $text-align $color $top) =text-block($value1: null, $value2: null) - font-size: nth($value1, 1) - line-height: optional_nth($value1, 2) - margin-top: optional_nth($value1, 3) - margin-bottom: optional_nth($value1, 4) + font-size: list.nth($value1, 1) + line-height: functions-list.optional_nth($value1, 2) + margin-top: functions-list.optional_nth($value1, 3) + margin-bottom: functions-list.optional_nth($value1, 4) @if ($value2) - @for $i from 1 through length($value2) - +text-block-options(nth($value2, $i)) - @if unit_number(nth($value2, $i)) - @if index($value2, center) - letter-spacing: nth($value2, $i) - text-indent: nth($value2, $i) + @for $i from 1 through list.length($value2) + +text-block-options(list.nth($value2, $i)) + @if number.unit_number(list.nth($value2, $i)) + @if list.index($value2, center) + letter-spacing: list.nth($value2, $i) + text-indent: list.nth($value2, $i) @else - letter-spacing: nth($value2, $i) + letter-spacing: list.nth($value2, $i) =open-face($color: black) text-shadow: $color 1px 1px 0, $color -1px -1px 0, $color -1px 1px 0, $color 1px -1px 0, $color 0px 1px 0, $color 0 -1px 0, $color -1px 0 0, $color 1px 0 0 diff --git a/app/javascript/stylesheets/config/mixins/_user-role.sass b/app/javascript/stylesheets/config/mixins/_user-role.sass index 26d97e86400..300bd21ca2f 100644 --- a/app/javascript/stylesheets/config/mixins/_user-role.sass +++ b/app/javascript/stylesheets/config/mixins/_user-role.sass @@ -1,17 +1,19 @@ +@use "../variables/colors" + =icon-role-style &.is-admin, &.is-mentor .a-user-icon - border: solid 2px rgba($danger, .7) + border: solid 2px rgba(colors.$danger, .7) &.is-graduate .a-user-icon - border: solid 2px rgba($success, .7) + border: solid 2px rgba(colors.$success, .7) &.is-adviser .a-user-icon - border: solid 2px rgba($warning, .7) + border: solid 2px rgba(colors.$warning, .7) &.is-trainee .a-user-icon - border: solid 2px rgba($main, .7) + border: solid 2px rgba(colors.$main, .7) body.is-mentor-mode &.is-retired, body.is-mentor-mode &.is-training_completed background-color: black diff --git a/app/javascript/stylesheets/config/mixins/grid/_grid-framework.sass b/app/javascript/stylesheets/config/mixins/grid/_grid-framework.sass index 78a8474b69d..3fa11693443 100644 --- a/app/javascript/stylesheets/config/mixins/grid/_grid-framework.sass +++ b/app/javascript/stylesheets/config/mixins/grid/_grid-framework.sass @@ -1,20 +1,22 @@ +@use "../../variables/layout" + /// Grid system // // Generate semantic grid columns with these mixins. @use "sass:math" -=make-row($gutter: $grid-gutter-width) +=make-row($gutter: layout.$grid-gutter-width) display: flex flex-wrap: wrap gap: $gutter -=make-col-span($size, $columns: $grid-columns, $grid-gutter-width: 1rem) +=make-col-span($size, $columns: layout.$grid-columns, $grid-gutter-width: 1rem) $one-line-columns-count: math.div($columns, $size) $gutter-count: $one-line-columns-count - 1 $total-gutter-width: calc(#{$grid-gutter-width} * #{$gutter-count}) $column-margin: calc($total-gutter-width / $one-line-columns-count) - flex: 0 0 calc(#{percentage(math.div($size, $columns))} - #{$column-margin}) - width: calc(#{percentage(math.div($size, $columns))} - #{$column-margin}) - max-width: calc(#{percentage(math.div($size, $columns))} - #{$column-margin}) + flex: 0 0 calc(#{math.percentage(math.div($size, $columns))} - #{$column-margin}) + width: calc(#{math.percentage(math.div($size, $columns))} - #{$column-margin}) + max-width: calc(#{math.percentage(math.div($size, $columns))} - #{$column-margin}) diff --git a/app/javascript/stylesheets/config/mixins/grid/_grid.sass b/app/javascript/stylesheets/config/mixins/grid/_grid.sass index e997d0932f7..4645acd16aa 100644 --- a/app/javascript/stylesheets/config/mixins/grid/_grid.sass +++ b/app/javascript/stylesheets/config/mixins/grid/_grid.sass @@ -1,11 +1,16 @@ +@use "sass:map" +@use "../../variables/layout" +@use "../break-points" +@use "grid-framework" + // Framework grid generation // // Used only by Bootstrap to generate the correct number of grid classes given // any value of `$grid-columns`. -=make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) - @each $breakpoint in map-keys($breakpoints) - +media-breakpoint-up($breakpoint) +=make-grid-columns($columns: layout.$grid-columns, $gutter: layout.$grid-gutter-width, $breakpoints: layout.$grid-breakpoints) + @each $breakpoint in map.keys($breakpoints) + +break-points.media-breakpoint-up($breakpoint) @for $i from 1 through $columns >.col-#{$breakpoint}-#{$i} - +make-col-span($i, $columns, $gutter) + +grid-framework.make-col-span($i, $columns, $gutter) diff --git a/app/javascript/stylesheets/config/variables/_colors.sass b/app/javascript/stylesheets/config/variables/_colors.sass index 39f86375973..0a3db8f384f 100644 --- a/app/javascript/stylesheets/config/variables/_colors.sass +++ b/app/javascript/stylesheets/config/variables/_colors.sass @@ -1,3 +1,5 @@ +@use "../functions/color" + $main: hsl(242, 51%, 51%) $accent: hsl(44, 96%, 54%) $base: white @@ -63,26 +65,26 @@ $danger: hsl(349, 90%, 62%) $disabled: $background-shade $stamp-color: hsl(0, 80%, 62%) -$danger-text: shade($danger, 40%) -$danger-tint: tint($danger, 90%) +$danger-text: color.shade($danger, 40%) +$danger-tint: color.tint($danger, 90%) -$success-text: shade($success, 60%) -$success-tint: tint($success, 90%) +$success-text: color.shade($success, 60%) +$success-tint: color.tint($success, 90%) -$info-text: shade($info, 60%) -$info-tint: tint($info, 90%) +$info-text: color.shade($info, 60%) +$info-tint: color.tint($info, 90%) -$primary-text: shade($primary, 40%) -$primary-tint: tint($primary, 90%) -$primary-semi-tint: tint($primary, 60%) +$primary-text: color.shade($primary, 40%) +$primary-tint: color.tint($primary, 90%) +$primary-semi-tint: color.tint($primary, 60%) $primary-background: #ebebf7 -$warning-text: shade($warning, 60%) -$warning-tint: tint($warning, 90%) +$warning-text: color.shade($warning, 60%) +$warning-tint: color.tint($warning, 90%) -$main-text: shade($main, 10%) -$main-tint: tint($main, 90%) +$main-text: color.shade($main, 10%) +$main-tint: color.tint($main, 90%) $main-shade: hsl(254, 60%, 34%) $main-semi-shade: hsl(254, 52%, 40%) diff --git a/app/javascript/stylesheets/config/variables/_css-variables.sass b/app/javascript/stylesheets/config/variables/_css-variables.sass index 00ddd82db91..b823664c24c 100644 --- a/app/javascript/stylesheets/config/variables/_css-variables.sass +++ b/app/javascript/stylesheets/config/variables/_css-variables.sass @@ -1,138 +1,142 @@ +@use "colors" +@use "fonts" +@use "layout" + \:root ///////////////////// // Colors ///////////////////// - --main: #{$main} - --accent: #{$accent} - --base: #{$base} + --main: #{colors.$main} + --accent: #{colors.$accent} + --base: #{colors.$base} // completion - --completion: #{$completion} - --completion-dark: #{$completion-dark} + --completion: #{colors.$completion} + --completion-dark: #{colors.$completion-dark} // background - --background-shade: #{$background-shade} - --background-semi-shade: #{$background-semi-shade} - --background: #{$background} - --background-tint: #{$background-tint} - --background-more-tint: #{$background-more-tint} + --background-shade: #{colors.$background-shade} + --background-semi-shade: #{colors.$background-semi-shade} + --background: #{colors.$background} + --background-tint: #{colors.$background-tint} + --background-more-tint: #{colors.$background-more-tint} // nikoniko - --positive-background: #{$positive-background} - --negative-background: #{$negative-background} - --neutral-background: #{$neutral-background} + --positive-background: #{colors.$positive-background} + --negative-background: #{colors.$negative-background} + --neutral-background: #{colors.$neutral-background} // ranking - --gold: #{$gold} - --silver: #{$silver} - --bronze: #{$bronze} + --gold: #{colors.$gold} + --silver: #{colors.$silver} + --bronze: #{colors.$bronze} // text - --default-text: #{$default-text} - --reversal-text: #{$reversal-text} - --muted-text: #{$muted-text} - --semi-muted-text: #{$semi-muted-text} - --link-text: #{$link-text} - --hover-text: #{$hover-text} + --default-text: #{colors.$default-text} + --reversal-text: #{colors.$reversal-text} + --muted-text: #{colors.$muted-text} + --semi-muted-text: #{colors.$semi-muted-text} + --link-text: #{colors.$link-text} + --hover-text: #{colors.$hover-text} --transparent-text: rgba(0, 0, 0, 0) // placeholder - --placeholder: #{$placeholder} - --placeholder-text: #{$placeholder-text} + --placeholder: #{colors.$placeholder} + --placeholder-text: #{colors.$placeholder-text} // border - --border: #{$border} - --border-tint: #{$border-tint} - --border-shade: #{$border-shade} - --border-more-shade: #{$border-more-shade} + --border: #{colors.$border} + --border-tint: #{colors.$border-tint} + --border-shade: #{colors.$border-shade} + --border-more-shade: #{colors.$border-more-shade} // Welcome Colors - --welcome-blue: #{$welcome-blue} - --welcome-light-blue: #{$welcome-light-blue} - --welcome-yellow: #{$welcome-yellow} - --welcome-orange: #{$welcome-orange} - --welcome-pink: #{$welcome-pink} + --welcome-blue: #{colors.$welcome-blue} + --welcome-light-blue: #{colors.$welcome-light-blue} + --welcome-yellow: #{colors.$welcome-yellow} + --welcome-orange: #{colors.$welcome-orange} + --welcome-pink: #{colors.$welcome-pink} // UI colors - --primary: #{$primary} - --secondary: #{$secondary} - --success: #{$success} - --info: #{$info} - --warning: #{$warning} - --danger: #{$danger} - --disabled: #{$disabled} - --stamp-color: #{$stamp-color} + --primary: #{colors.$primary} + --secondary: #{colors.$secondary} + --success: #{colors.$success} + --info: #{colors.$info} + --warning: #{colors.$warning} + --danger: #{colors.$danger} + --disabled: #{colors.$disabled} + --stamp-color: #{colors.$stamp-color} - --danger-text: #{$danger-text} - --danger-tint: #{$danger-tint} + --danger-text: #{colors.$danger-text} + --danger-tint: #{colors.$danger-tint} - --success-text: #{$success-text} - --success-tint: #{$success-tint} + --success-text: #{colors.$success-text} + --success-tint: #{colors.$success-tint} - --info-text: #{$info-text} - --info-tint: #{$info-tint} + --info-text: #{colors.$info-text} + --info-tint: #{colors.$info-tint} - --primary-text: #{$primary-text} - --primary-tint: #{$primary-tint} - --primary-semi-tint: #{$primary-semi-tint} - --primary-background: #{$primary-background} + --primary-text: #{colors.$primary-text} + --primary-tint: #{colors.$primary-tint} + --primary-semi-tint: #{colors.$primary-semi-tint} + --primary-background: #{colors.$primary-background} - --warning-text: #{$warning-text} - --warning-tint: #{$warning-tint} + --warning-text: #{colors.$warning-text} + --warning-tint: #{colors.$warning-tint} - --main-text: #{$main-text} - --main-tint: #{$main-tint} - --main-shade: #{$main-shade} - --main-semi-shade: #{$main-semi-shade} + --main-text: #{colors.$main-text} + --main-tint: #{colors.$main-tint} + --main-shade: #{colors.$main-shade} + --main-semi-shade: #{colors.$main-semi-shade} // lp-bg - --lp-bg-3: #{$lp-bg-3} + --lp-bg-3: #{colors.$lp-bg-3} --lp-bg-2: var(--primary-background) --lp-bg-1: var(--background) // reply - --reply-warning-background: #{$reply-warning-background} - --reply-warning-border: #{$reply-warning-border} + --reply-warning-background: #{colors.$reply-warning-background} + --reply-warning-border: #{colors.$reply-warning-border} - --reply-alert-background: #{$reply-alert-background} - --reply-alert-border: #{$reply-alert-border} + --reply-alert-background: #{colors.$reply-alert-background} + --reply-alert-border: #{colors.$reply-alert-border} - --reply-deadline-background: #{$reply-deadline-background} - --reply-deadline-border: #{$reply-deadline-border} + --reply-deadline-background: #{colors.$reply-deadline-background} + --reply-deadline-border: #{colors.$reply-deadline-border} // input - --input-border: #{$input-border} - --input-background: #{$input-background} + --input-border: #{colors.$input-border} + --input-background: #{colors.$input-background} - --input-hover-border: #{$input-hover-border} - --input-hover-background: #{$input-hover-background} + --input-hover-border: #{colors.$input-hover-border} + --input-hover-background: #{colors.$input-hover-background} - --input-selected-background: #{$input-selected-background} - --input-selected-border: #{$input-selected-border} - --input-selected-text: #{$input-selected-text} + --input-selected-background: #{colors.$input-selected-background} + --input-selected-border: #{colors.$input-selected-border} + --input-selected-text: #{colors.$input-selected-text} - --input-focus-background: #{$input-focus-background} - --input-focus-border: #{$input-focus-border} - --input-focus-shadow: #{$input-focus-shadow} + --input-focus-background: #{colors.$input-focus-background} + --input-focus-border: #{colors.$input-focus-border} + --input-focus-shadow: #{colors.$input-focus-shadow} ///////////////////// // Layout ///////////////////// - --header-height__md-up: #{$header-height__md-up} - --header-height__sm-down: #{$header-height__sm-down} + --header-height__md-up: #{layout.$header-height__md-up} + --header-height__sm-down: #{layout.$header-height__sm-down} - --global-nav-width: #{$global-nav-width} - --global-nav-width-sm: #{$global-nav-width-sm} + --global-nav-width: #{layout.$global-nav-width} + --global-nav-width-sm: #{layout.$global-nav-width-sm} - --thread-header-author: #{$thread-header-author} + --thread-header-author: #{layout.$thread-header-author} - --side-nav-width: #{$side-nav-width} + --side-nav-width: #{layout.$side-nav-width} ///////////////////// // Fonts ///////////////////// - --sans-serif: #{$sans-serif} - --monospace: #{$monospace} + --sans-serif: #{fonts.$sans-serif} + --monospace: #{fonts.$monospace} diff --git a/app/javascript/stylesheets/config/variables/_text-inputs-list.sass b/app/javascript/stylesheets/config/variables/_text-inputs-list.sass index b9b372ab40a..e9464923ade 100644 --- a/app/javascript/stylesheets/config/variables/_text-inputs-list.sass +++ b/app/javascript/stylesheets/config/variables/_text-inputs-list.sass @@ -1 +1 @@ -$_text-inputs-list: "[type='color']", "[type='date']", "[type='datetime']", "[type='datetime-local']", "[type='email']", "[type='month']", "[type='number']", "[type='password']", "[type='search']", "[type='tel']", "[type='text']", "[type='time']", "[type='url']", "[type='week']", "input:not([type])", "textarea" +$text-inputs-list: "[type='color']", "[type='date']", "[type='datetime']", "[type='datetime-local']", "[type='email']", "[type='month']", "[type='number']", "[type='password']", "[type='search']", "[type='tel']", "[type='text']", "[type='time']", "[type='url']", "[type='week']", "input:not([type])", "textarea" diff --git a/app/javascript/stylesheets/initializers/_reset.sass b/app/javascript/stylesheets/initializers/_reset.sass index 9d68fc852e7..60809cda8e8 100644 --- a/app/javascript/stylesheets/initializers/_reset.sass +++ b/app/javascript/stylesheets/initializers/_reset.sass @@ -1,3 +1,6 @@ +@use "../config/functions/assign-inputs" +@use "../config/mixins/placeholder" + * font-family: inherit font-size: inherit @@ -7,7 +10,7 @@ html //overflow-y: auto line-height: 1 -#{$all-text-inputs}, +#{assign-inputs.$all-text-inputs}, select, button outline: none @@ -44,7 +47,7 @@ ol input[type="submit"] outline: none -+placeholder ++placeholder.placeholder color: var(--placeholder-text) font-weight: 400 diff --git a/app/javascript/stylesheets/lp.sass b/app/javascript/stylesheets/lp.sass index e0102d2013a..1a67e1a299e 100644 --- a/app/javascript/stylesheets/lp.sass +++ b/app/javascript/stylesheets/lp.sass @@ -1,87 +1,87 @@ @charset "UTF-8" -@import common-imports -@import lp/base/base +@use "common-imports" +@use "lp/base/base" //////////// // layouts //////////// -@import lp/layouts/l-cards -@import lp/layouts/l-sections +@use "lp/layouts/l-cards" +@use "lp/layouts/l-sections" //////////// // blocks //////////// -@import lp/blocks/lp/lp-header -@import lp/blocks/lp/lp-header-nav +@use "lp/blocks/lp/lp-header" +@use "lp/blocks/lp/lp-header-nav" -@import lp/blocks/lp/welcome-top-info +@use "lp/blocks/lp/welcome-top-info" // top -@import lp/blocks/lp/lp-top-cover +@use "lp/blocks/lp/lp-top-cover" // lp-content -@import lp/blocks/lp/lp-content -@import lp/blocks/lp/lp-content-stack -@import lp/blocks/lp/lp-hero-info -@import lp/blocks/lp/lp-hero-visual -@import lp/blocks/lp/lp-content-section +@use "lp/blocks/lp/lp-content" +@use "lp/blocks/lp/lp-content-stack" +@use "lp/blocks/lp/lp-hero-info" +@use "lp/blocks/lp/lp-hero-visual" +@use "lp/blocks/lp/lp-content-section" // lp-title -@import lp/blocks/lp/lp-content-title -@import lp/blocks/lp/lp-content-sub-title -@import lp/blocks/lp/lp-card-title +@use "lp/blocks/lp/lp-content-title" +@use "lp/blocks/lp/lp-content-sub-title" +@use "lp/blocks/lp/lp-card-title" // lp-description -@import lp/blocks/lp/lp-card-description +@use "lp/blocks/lp/lp-card-description" // lp-actions -@import lp/blocks/lp/lp-card-actions +@use "lp/blocks/lp/lp-card-actions" // lp-section -@import lp/blocks/lp/lp-left-image-section -@import lp/blocks/lp/lp-left-number-section -@import lp/blocks/lp/lp-capture-section -@import lp/blocks/lp/lp-top-image-sections -@import lp/blocks/lp/lp-supplementary-info +@use "lp/blocks/lp/lp-left-image-section" +@use "lp/blocks/lp/lp-left-number-section" +@use "lp/blocks/lp/lp-capture-section" +@use "lp/blocks/lp/lp-top-image-sections" +@use "lp/blocks/lp/lp-supplementary-info" // lp-page -@import lp/blocks/lp/lp-page-header -@import lp/blocks/lp/lp-page-header-nav +@use "lp/blocks/lp/lp-page-header" +@use "lp/blocks/lp/lp-page-header-nav" -@import lp/blocks/lp/lp-price -@import lp/blocks/lp/lp-actions -@import lp/blocks/lp/lp-company-logos -@import lp/blocks/lp/lp-movie -@import lp/blocks/lp/lp-practices-table -@import lp/blocks/lp/lp-table +@use "lp/blocks/lp/lp-price" +@use "lp/blocks/lp/lp-actions" +@use "lp/blocks/lp/lp-company-logos" +@use "lp/blocks/lp/lp-movie" +@use "lp/blocks/lp/lp-practices-table" +@use "lp/blocks/lp/lp-table" // lp-faqs -@import lp/blocks/lp/lp-faqs -@import lp/blocks/lp/lp-faq -@import lp/blocks/lp/side-filter +@use "lp/blocks/lp/lp-faqs" +@use "lp/blocks/lp/lp-faq" +@use "lp/blocks/lp/side-filter" // lp-course-selection -@import lp/blocks/lp/lp-course-selection -@import lp/blocks/lp/lp-course-selection-nav -@import lp/blocks/lp/lp-course-selection-item -@import lp/blocks/lp/lp-category-practices +@use "lp/blocks/lp/lp-course-selection" +@use "lp/blocks/lp/lp-course-selection-nav" +@use "lp/blocks/lp/lp-course-selection-item" +@use "lp/blocks/lp/lp-category-practices" -@import lp/blocks/lp/lp-mentor-books -@import lp/blocks/lp/lp-mentor +@use "lp/blocks/lp/lp-mentor-books" +@use "lp/blocks/lp/lp-mentor" // articles -@import lp/blocks/articles/article -@import lp/blocks/articles/articles -@import lp/blocks/articles/articles-item -@import lp/blocks/articles/share-buttons -@import lp/blocks/articles/article-author +@use "lp/blocks/articles/article" +@use "lp/blocks/articles/articles" +@use "lp/blocks/articles/articles-item" +@use "lp/blocks/articles/share-buttons" +@use "lp/blocks/articles/article-author" ///////////////////// -@import lp/corporate-training/corporate-training-examples -@import lp/corporate-training/corporate-training-example -@import lp/corporate-training/corporate-training-testimonial +@use "lp/corporate-training/corporate-training-examples" +@use "lp/corporate-training/corporate-training-example" +@use "lp/corporate-training/corporate-training-testimonial" -@import "initializers/tailwind" +@use "initializers/tailwind" diff --git a/app/javascript/stylesheets/lp/base/_base.sass b/app/javascript/stylesheets/lp/base/_base.sass index 3b9dc7f024e..2a1404c47b9 100644 --- a/app/javascript/stylesheets/lp/base/_base.sass +++ b/app/javascript/stylesheets/lp/base/_base.sass @@ -1,7 +1,14 @@ +@use "../../config/mixins/break-points" +@use "../../config/mixins/text" +@use "../../config/variables/fonts" + html.is-lp - font-family: $sans-serif + font-family: fonts.$sans-serif color: var(--default-text) +:root + --people-bg-image: url("~assets/images/background/people.png") + body.is-lp background-color: var(--background) @@ -15,7 +22,7 @@ body.is-lp color: var(--default-text) .card-body__inner-title - +text-block(1.5rem 1.5, 700) + +text.text-block(1.5rem 1.5, 700) padding-bottom: .25rem color: var(--main) border-bottom: solid 1px var(--border) @@ -24,18 +31,18 @@ body.is-lp margin-top: 1.25rem display: flex flex-wrap: wrap - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) gap: .75rem .5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-direction: column .welcome-practices__item line-height: 1.6 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .875rem &:not(:last-child)::after content: '、' - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .8125rem padding-block: .5rem .welcome-practices__item + & @@ -53,5 +60,5 @@ body.is-lp margin-top: 1.5rem .faqs-item__title - +text-block(1.25rem 1.6, 700) + +text.text-block(1.25rem 1.6, 700) color: var(--main) diff --git a/app/javascript/stylesheets/lp/blocks/articles/_article-author.sass b/app/javascript/stylesheets/lp/blocks/articles/_article-author.sass index 59c2462b523..07719a58ce6 100644 --- a/app/javascript/stylesheets/lp/blocks/articles/_article-author.sass +++ b/app/javascript/stylesheets/lp/blocks/articles/_article-author.sass @@ -1,3 +1,7 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .article-author &.is-welcome-index height: 100% @@ -6,9 +10,9 @@ display: flex flex-direction: column gap: 1rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1.25rem 1.5rem 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .75rem 1rem 1rem .article-author.is-articles-show & padding: .75rem 1rem 0 @@ -31,9 +35,9 @@ .article-author__image border-radius: .25rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) width: 100% - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: 4rem display: block margin-inline: auto @@ -41,29 +45,29 @@ .article-author__name font-weight: 800 color: var(--main) - +media-breakpoint-up(md) - +text-block(1.5rem 1.2) - +media-breakpoint-down(sm) - +text-block(1.5rem 1.2) + +break-points.media-breakpoint-up(md) + +text.text-block(1.5rem 1.2) + +break-points.media-breakpoint-down(sm) + +text.text-block(1.5rem 1.2) .article-author__job font-weight: 400 - +text-block(.875rem 1) + +text.text-block(.875rem 1) margin-bottom: .125rem color: var(--main) .article-author__sns - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex gap: .75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: none .article-author__sns-item-link - +text-block(1.25rem 1.45) + +text.text-block(1.25rem 1.45) color: var(--main) display: flex - +size(2.5rem) + +size.size(2.5rem) justify-content: center align-items: center text-decoration: none @@ -81,13 +85,13 @@ text-overflow: ellipsis -webkit-box-orient: vertical -webkit-line-clamp: 3 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) height: 67.2px - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: none &.is-temp - +text-block(.875rem 1.6) + +text.text-block(.875rem 1.6) img width: 6.25rem float: right diff --git a/app/javascript/stylesheets/lp/blocks/articles/_article.sass b/app/javascript/stylesheets/lp/blocks/articles/_article.sass index 5f978a26a7b..1bac2cda8fc 100644 --- a/app/javascript/stylesheets/lp/blocks/articles/_article.sass +++ b/app/javascript/stylesheets/lp/blocks/articles/_article.sass @@ -1,13 +1,17 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .article - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding-block: 2rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-block: 1.5rem .article__inner - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1.25rem 2rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: 1rem .article__header @@ -19,9 +23,9 @@ font-feature-settings: "palt" letter-spacing: .025em color: var(--main) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 2.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1.625rem &.is-wip color: var(--muted-text) @@ -42,25 +46,25 @@ .article__metas display: flex margin-top: .75rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .875rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .8125rem .article__meta:not(:first-child) margin-left: .75em .article__published-at - +text-block(1em 1.4) + +text.text-block(1em 1.4) color: var(--semi-muted-text) .article__author display: flex align-items: center - +text-block(1em 1.4) + +text.text-block(1em 1.4) color: var(--default-text) img - +size(1.125rem) + +size.size(1.125rem) object-fit: cover margin-right: .25rem border-radius: 50% @@ -77,9 +81,9 @@ &:not(:first-child) margin-top: 1.5rem &.a-long-text - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .875rem .article__actions diff --git a/app/javascript/stylesheets/lp/blocks/articles/_articles-item.sass b/app/javascript/stylesheets/lp/blocks/articles/_articles-item.sass index 2bfb3e2a64e..50d774572e8 100644 --- a/app/javascript/stylesheets/lp/blocks/articles/_articles-item.sass +++ b/app/javascript/stylesheets/lp/blocks/articles/_articles-item.sass @@ -1,9 +1,14 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .articles-item - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) height: 100% .articles-item__link - +block-link + +link.block-link padding: 1rem &:hover .articles-item__title @@ -20,7 +25,7 @@ object-fit: cover .articles-item__title - +text-block(1.125rem 1.4, 700) + +text.text-block(1.125rem 1.4, 700) color: var(--default-text) .articles-item.is-wip & color: var(--muted-text) @@ -34,18 +39,18 @@ .articles-item__author display: flex align-items: center - +text-block(.8125rem 1.4) + +text.text-block(.8125rem 1.4) color: var(--default-text) img - +size(1.125rem) + +size.size(1.125rem) object-fit: cover margin-right: .25rem border-radius: 50% .articles-item__published-at - +text-block(.8125rem 1.4) + +text.text-block(.8125rem 1.4) color: var(--semi-muted-text) .articles-item__description - +text-block(.875rem 1.6) + +text.text-block(.875rem 1.6) color: var(--semi-muted-text) diff --git a/app/javascript/stylesheets/lp/blocks/articles/_articles.sass b/app/javascript/stylesheets/lp/blocks/articles/_articles.sass index 79720de5f4d..280e43aeba8 100644 --- a/app/javascript/stylesheets/lp/blocks/articles/_articles.sass +++ b/app/javascript/stylesheets/lp/blocks/articles/_articles.sass @@ -1,23 +1,26 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .articles__header background-color: var(--base) .articles__header-inner display: flex align-items: center - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) height: 3.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) height: 3rem .articles__title font-weight: 700 - +media-breakpoint-up(md) - +text-block(1.25rem 1.4) - +media-breakpoint-down(sm) - +text-block(1rem 1.4) + +break-points.media-breakpoint-up(md) + +text.text-block(1.25rem 1.4) + +break-points.media-breakpoint-down(sm) + +text.text-block(1rem 1.4) .articles__body - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding-block: 2rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-block: 1.5rem diff --git a/app/javascript/stylesheets/lp/blocks/articles/_share-buttons.sass b/app/javascript/stylesheets/lp/blocks/articles/_share-buttons.sass index 10bfaad62a1..a1b9a906315 100644 --- a/app/javascript/stylesheets/lp/blocks/articles/_share-buttons.sass +++ b/app/javascript/stylesheets/lp/blocks/articles/_share-buttons.sass @@ -1,3 +1,6 @@ +@use "../../../config/mixins/link" +@use "../../../config/mixins/text" + .share-buttons margin-top: .75rem @@ -17,12 +20,12 @@ width: 5.5rem height: 2.5rem background-color: white - +flex-link + +link.flex-link flex-direction: column border-radius: .25rem align-items: center justify-content: center - +text-block(.6875rem 1, 700) + +text.text-block(.6875rem 1, 700) color: var(--reversal-text) border: solid 1px black overflow: hidden diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-actions.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-actions.sass index 264510c0e5c..ef6d5059b35 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-actions.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-actions.sass @@ -1,6 +1,8 @@ +@use "../../../config/mixins/break-points" + .lp-actions align-self: stretch - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: 42.5rem width: 100% margin-inline: auto diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-capture-section.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-capture-section.sass index 1b7a7336b30..47fa68258e1 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-capture-section.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-capture-section.sass @@ -1,10 +1,13 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .lp-capture-section__inner display: flex .lp-content-stack__item:nth-child(even) & flex-direction: row-reverse - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) gap: 3rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: 1rem .lp-content-sub-title br @@ -16,45 +19,45 @@ align-items: center .lp-capture-section__start - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) flex: 1 - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) flex: 1 - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex: 0 0 40% &.is-sm - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) max-width: 20rem - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) max-width: 16rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) max-width: 10rem .lp-capture-section__end - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) flex: 1 - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) flex: 1.5 - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex: 1 .lp-capture-section__content display: flex flex-direction: column - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) gap: 2rem - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) gap: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: 1rem .lp-capture-section__body - +media-breakpoint-up(md) - +text-block(1rem 1.6) - +media-breakpoint-down(sm) - +text-block(.875rem 1.6) + +break-points.media-breakpoint-up(md) + +text.text-block(1rem 1.6) + +break-points.media-breakpoint-down(sm) + +text.text-block(.875rem 1.6) .lp-capture-section__border height: 1px @@ -64,7 +67,7 @@ .lp-capture-section__image width: 100% - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) max-width: 14rem margin-inline: auto display: block diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-card-description.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-card-description.sass index 482909317d3..756b26617d7 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-card-description.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-card-description.sass @@ -1,8 +1,11 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" + .lp-card-description - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .875rem a color: #0098f9 - +hover-link-reversal + +link.hover-link-reversal diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-card-title.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-card-title.sass index 8968351f712..fa08d5183d9 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-card-title.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-card-title.sass @@ -1,29 +1,33 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .lp-card-title font-feature-settings: "palt" letter-spacing: .02em font-weight: 800 color: var(--main) - +media-breakpoint-up(lg) - +text-block(1.5rem 1.4) - +media-breakpoint-only(md) - +text-block(1.25rem 1.4) - +media-breakpoint-down(sm) - +text-block(1.125rem 1.4) + +break-points.media-breakpoint-up(lg) + +text.text-block(1.5rem 1.4) + +break-points.media-breakpoint-only(md) + +text.text-block(1.25rem 1.4) + +break-points.media-breakpoint-down(sm) + +text.text-block(1.125rem 1.4) br display: none &.is-sm - +media-breakpoint-up(md) - +text-block(1.125rem 1.4) - +media-breakpoint-down(sm) - +text-block(1rem 1.4) + +break-points.media-breakpoint-up(md) + +text.text-block(1.125rem 1.4) + +break-points.media-breakpoint-down(sm) + +text.text-block(1rem 1.4) .lp-card-title-number - +text-block(.9375rem 1, inline-flex 800) + +text.text-block(.9375rem 1, inline-flex 800) font-family: 'Roboto Mono', monospace align-items: center justify-content: center border-radius: 50% - +size(1.75rem) + +size.size(1.75rem) background-color: var(--lp-bg-3) margin-right: .5rem vertical-align: middle diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-category-practices.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-category-practices.sass index 20e2f28662f..f0020a87c64 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-category-practices.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-category-practices.sass @@ -1,8 +1,10 @@ +@use "../../../config/mixins/text" + .lp-category-practices background-color: var(--base) .lp-category-practices__category - +text-block(1rem 1.4, 800) + +text.text-block(1rem 1.4, 800) background-color: var(--main) color: var(--reversal-text) display: flex @@ -15,7 +17,7 @@ border-radius: 0 0 .25rem .25rem .lp-category-practices__practice - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) display: flex align-items: center padding: .5rem 1rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-company-logos.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-company-logos.sass index 558013cfec1..8bc87fd4d34 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-company-logos.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-company-logos.sass @@ -1,15 +1,17 @@ +@use "../../../config/mixins/break-points" + .lp-company-logos display: flex flex-wrap: wrap justify-content: center align-items: center - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) gap: 1.5rem 2rem - +media-breakpoint-down(md) + +break-points.media-breakpoint-down(md) gap: 1rem 1rem .lp-company-logos__item img - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) height: 5rem - +media-breakpoint-down(md) + +break-points.media-breakpoint-down(md) height: 3.5rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-content-section.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-content-section.sass index be3dce4f7a5..ead195f2e32 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-content-section.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-content-section.sass @@ -1,13 +1,15 @@ +@use "../../../config/mixins/break-points" + .lp-content-section display: flex flex-direction: column - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) gap: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: 1rem .lp-content__description - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .875rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-content-stack.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-content-stack.sass index 8cf79d328b2..f591499f429 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-content-stack.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-content-stack.sass @@ -1,7 +1,9 @@ +@use "../../../config/mixins/break-points" + .lp-content-stack display: flex flex-direction: column - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) gap: 3rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: 1.5rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-content-sub-title.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-content-sub-title.sass index d7b8f2947f8..6b16429aed2 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-content-sub-title.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-content-sub-title.sass @@ -1,22 +1,25 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .lp-content-sub-title i margin-right: .25em color: var(--main) strong color: var(--main) - +media-breakpoint-up(lg) - +text-block(2.125rem 1.4, 800) - +media-breakpoint-only(md) - +text-block(1.75rem 1.4, 800) - +media-breakpoint-down(sm) - +text-block(1.375rem 1.4, 800) + +break-points.media-breakpoint-up(lg) + +text.text-block(2.125rem 1.4, 800) + +break-points.media-breakpoint-only(md) + +text.text-block(1.75rem 1.4, 800) + +break-points.media-breakpoint-down(sm) + +text.text-block(1.375rem 1.4, 800) &.is-course-name font-size: .875rem &.is-sm color: var(--main) - +media-breakpoint-up(lg) - +text-block(1.5rem 1.4, 800) - +media-breakpoint-only(md) - +text-block(1.25rem 1.4, 800) - +media-breakpoint-down(sm) - +text-block(1.125rem 1.4, 800) + +break-points.media-breakpoint-up(lg) + +text.text-block(1.5rem 1.4, 800) + +break-points.media-breakpoint-only(md) + +text.text-block(1.25rem 1.4, 800) + +break-points.media-breakpoint-down(sm) + +text.text-block(1.125rem 1.4, 800) diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-content-title.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-content-title.sass index aef32d0c78c..c1363a67e41 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-content-title.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-content-title.sass @@ -1,3 +1,7 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .lp-content-title font-feature-settings: "palt" letter-spacing: .02em @@ -10,16 +14,16 @@ border-radius: 10rem //background-color: var(--main) background-color: #9b9ace - +media-breakpoint-up(xl) + +break-points.media-breakpoint-up(xl) white-space: nowrap - +text-block(3rem 1.4, 800) + +text.text-block(3rem 1.4, 800) &.is-vertical writing-mode: vertical-rl &.is-border-bottom padding-bottom: 2.5rem position: relative &::before - +position(absolute, left 50%, bottom 0) + +position.position(absolute, left 50%, bottom 0) width: 4.5em height: .5rem transform: translate(-50%) @@ -27,38 +31,38 @@ padding-left: 3.5rem position: relative &::before - +position(absolute, left 0) + +position.position(absolute, left 0) width: .5rem height: 3.5em top: .25em &.is-vertical.is-border-left &::before top: .125em - +media-breakpoint-down(lg) + +break-points.media-breakpoint-down(lg) text-align: center position: relative &[class*=is-border-] &::before - +position(absolute, left 50%, bottom 0) + +position.position(absolute, left 50%, bottom 0) transform: translate(-50%) - +media-breakpoint-only(lg) - +text-block(2.75rem 1.4, 800) + +break-points.media-breakpoint-only(lg) + +text.text-block(2.75rem 1.4, 800) &.is-border-bottom padding-bottom: 2.25rem &[class*=is-border-] &::before width: 4.5em height: .5rem - +media-breakpoint-only(md) - +text-block(2.25rem 1.4, 800) + +break-points.media-breakpoint-only(md) + +text.text-block(2.25rem 1.4, 800) &.is-border-bottom padding-bottom: 2.25rem &[class*=is-border-] &::before width: 4.5em height: .5rem - +media-breakpoint-down(sm) - +text-block(1.75rem 1.4, 800) + +break-points.media-breakpoint-down(sm) + +text.text-block(1.75rem 1.4, 800) &.is-border-bottom padding-bottom: 1.5rem &[class*=is-border-] @@ -68,37 +72,37 @@ &.is-sm padding-bottom: 0 - +media-breakpoint-up(lg) - +text-block(2.25rem 1.3, 700) - +media-breakpoint-only(md) - +text-block(1.5rem 1.3, 700) - +media-breakpoint-down(sm) - +text-block(1.25rem 1.3, 700) + +break-points.media-breakpoint-up(lg) + +text.text-block(2.25rem 1.3, 700) + +break-points.media-breakpoint-only(md) + +text.text-block(1.5rem 1.3, 700) + +break-points.media-breakpoint-down(sm) + +text.text-block(1.25rem 1.3, 700) &.is-xs - +media-breakpoint-up(lg) - +text-block(1.75rem 1.3, 700) - +media-breakpoint-only(md) - +text-block(1.5rem 1.3, 700) - +media-breakpoint-down(sm) - +text-block(1.25rem 1.3, 700) + +break-points.media-breakpoint-up(lg) + +text.text-block(1.75rem 1.3, 700) + +break-points.media-breakpoint-only(md) + +text.text-block(1.5rem 1.3, 700) + +break-points.media-breakpoint-down(sm) + +text.text-block(1.25rem 1.3, 700) .lp-content-title__option display: block color: #6e6d9c - +media-breakpoint-up(xl) - +text-block(1.5rem 1.4) + +break-points.media-breakpoint-up(xl) + +text.text-block(1.5rem 1.4) margin-top: -1rem margin-bottom: 1rem - +media-breakpoint-only(lg) - +text-block(1.25rem 1.4) + +break-points.media-breakpoint-only(lg) + +text.text-block(1.25rem 1.4) margin-top: -.75rem margin-bottom: .75rem - +media-breakpoint-only(md) - +text-block(1rem 1.4) + +break-points.media-breakpoint-only(md) + +text.text-block(1rem 1.4) margin-top: -.5rem margin-bottom: .5rem - +media-breakpoint-down(sm) - +text-block(1rem 1.4) + +break-points.media-breakpoint-down(sm) + +text.text-block(1rem 1.4) margin-top: -.25rem margin-bottom: .25rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-content.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-content.sass index 8b09e8c7942..0808128d968 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-content.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-content.sass @@ -1,14 +1,16 @@ +@use "../../../config/mixins/break-points" + .lp-content position: relative .lp-content__inner display: flex - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) padding-top: 4rem padding-bottom: 4rem - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) padding-top: 2.5rem padding-bottom: 2.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-top: 2rem padding-bottom: 2rem &.is-campaign @@ -28,45 +30,45 @@ &.is-hero position: relative - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding-top: 3rem padding-bottom: 4rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-top: 2rem padding-bottom: 3rem .lp-content__inner - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex-direction: row align-items: center gap: 3.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-direction: column gap: 1rem .lp-content__start - +media-breakpoint-up(xl) + +break-points.media-breakpoint-up(xl) flex: 14 - +media-breakpoint-only(lg) + +break-points.media-breakpoint-only(lg) flex: 14 - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) flex: 14 .lp-content__end - +media-breakpoint-up(xl) + +break-points.media-breakpoint-up(xl) flex: 10 - +media-breakpoint-only(lg) + +break-points.media-breakpoint-only(lg) flex: 8 - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) flex: 6 .lp-hero-info height: 100% display: flex flex-direction: column justify-content: center - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) gap: 2rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: 1rem - +media-breakpoint-up(xl) + +break-points.media-breakpoint-up(xl) &.is-top-title .lp-content__inner gap: 3.5rem @@ -90,13 +92,13 @@ max-width: 42.5rem .lp-content__inner - +media-breakpoint-down(lg) + +break-points.media-breakpoint-down(lg) flex-direction: column - +media-breakpoint-only(lg) + +break-points.media-breakpoint-only(lg) gap: 3.5rem - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) gap: 2.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: 2rem .lp-content__body diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection-item.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection-item.sass index 5542feb5e7b..591efc36399 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection-item.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection-item.sass @@ -1,7 +1,10 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .lp-course-selection-item__anchor position: relative top: -4rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) &#front-engineer-course margin-top: 4rem @@ -12,10 +15,10 @@ .lp-course-selection-item__title font-weight: 700 - +media-breakpoint-up(md) - +text-block(1.5rem 1.4) - +media-breakpoint-down(sm) - +text-block(1.25rem 1.4) + +break-points.media-breakpoint-up(md) + +text.text-block(1.5rem 1.4) + +break-points.media-breakpoint-down(sm) + +text.text-block(1.25rem 1.4) .lp-course-selection-item__action max-width: 20rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection-nav.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection-nav.sass index 6a0b2816a4d..4dedd40f2d4 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection-nav.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection-nav.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/text" + .lp-course-selection-nav position: sticky top: 0 @@ -15,7 +17,7 @@ .lp-course-selection-nav__item-link border: solid 1px var(--main) background-color: var(--base) - +text-block(.75rem 1.4, center) + +text.text-block(.75rem 1.4, center) display: flex text-decoration: none height: 2.75rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection.sass index bb36b9ae9ed..8b8fcc83a73 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection.sass @@ -1,6 +1,8 @@ +@use "../../../config/mixins/break-points" + .lp-course-selection__descritpion - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .875rem margin-bottom: .5rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-faq.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-faq.sass index 56807b58ed2..13d7a36bc55 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-faq.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-faq.sass @@ -1,3 +1,7 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .lp-faq__inner display: flex flex-direction: column @@ -8,8 +12,8 @@ padding-left: 2.5rem position: relative &::before - +position(absolute, left 0, top 0) - +text-block(1.25rem 1, 900) + +position.position(absolute, left 0, top 0) + +text.text-block(1.25rem 1, 900) color: var(--main) font-family: "Lato", sans-serif @@ -22,19 +26,19 @@ content: 'A.' .lp-faq__title - +text-block(1.125rem 1.4, 800) + +text.text-block(1.125rem 1.4, 800) .lp-faq__body - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .875rem .lp-faq__edit margin-top: .75rem .lp-faq__edit-link - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) color: var(--muted-text) &:hover color: var(--main) diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-header-nav.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-header-nav.sass index 52b91519170..eddd2a53c8f 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-header-nav.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-header-nav.sass @@ -1,30 +1,33 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" + .lp-header-nav height: 100% - +media-breakpoint-down(lg) + +break-points.media-breakpoint-down(lg) display: none input:checked + & display: block .lp-header-nav__items display: flex - +media-breakpoint-up(xxl) + +break-points.media-breakpoint-up(xxl) gap: 1rem - +media-breakpoint-up(xl) + +break-points.media-breakpoint-up(xl) height: 100% align-items: center gap: .5rem font-size: .875rem - +media-breakpoint-only(xl) + +break-points.media-breakpoint-only(xl) gap: .25rem - +media-breakpoint-down(lg) + +break-points.media-breakpoint-down(lg) flex-direction: column - +position(fixed, left 0, top 0, bottom 0, 2) + +position.position(fixed, left 0, top 0, bottom 0, 2) background-color: var(--base) width: 20rem max-width: calc(100vw - 3rem) .lp-header-nav__item - +media-breakpoint-down(lg) + +break-points.media-breakpoint-down(lg) border-bottom: solid 1px var(--border-tint) .lp-header-nav__item-link @@ -38,7 +41,7 @@ transition: all .2s ease-out span white-space: nowrap - +media-breakpoint-up(xl) + +break-points.media-breakpoint-up(xl) height: 2.25rem padding-inline: .75rem font-size: .875rem @@ -46,16 +49,16 @@ border-radius: .5rem &:hover background-color: var(--lp-bg-3) - +media-breakpoint-down(lg) + +break-points.media-breakpoint-down(lg) height: 3rem padding-inline: 2rem font-size: .875rem .lp-header-nav__overlay - +media-breakpoint-up(xl) + +break-points.media-breakpoint-up(xl) display: none - +media-breakpoint-down(lg) - +position(fixed, left 0, top 0, right 0, bottom 0, 1) + +break-points.media-breakpoint-down(lg) + +position.position(fixed, left 0, top 0, right 0, bottom 0, 1) background-color: #27272ccc .lp-header__home-link-image @@ -66,17 +69,17 @@ display: flex height: 100% align-items: center - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) width: 7.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: auto .a-button font-size: .6875rem .lp-header__mobile-nav-trigger - +media-breakpoint-up(xl) + +break-points.media-breakpoint-up(xl) display: none - +media-breakpoint-down(lg) + +break-points.media-breakpoint-down(lg) display: flex width: 2.75rem height: 2.75rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-header.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-header.sass index ec14be0c5e6..197a7116b0d 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-header.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-header.sass @@ -1,6 +1,9 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" + .lp-header background-color: var(--base) - +position(sticky, top 0, 10) + +position.position(sticky, top 0, 10) .lp-header__inner height: 3.5rem @@ -16,9 +19,9 @@ height: 100% display: flex align-items: center - +media-breakpoint-down(lg) + +break-points.media-breakpoint-down(lg) margin-right: -1rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) gap: 1rem - +media-breakpoint-down(md) + +break-points.media-breakpoint-down(md) gap: .25rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-hero-info.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-hero-info.sass index 21ee1226828..39286f0f6d2 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-hero-info.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-hero-info.sass @@ -1,33 +1,36 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .lp-hero-info__titles display: flex flex-direction: column - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) gap: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: .75rem .lp-hero-info__title - +media-breakpoint-up(md) - +text-block(1.5rem 1.4, 800) - +media-breakpoint-down(sm) - +text-block(1rem 1.4, 800) + +break-points.media-breakpoint-up(md) + +text.text-block(1.5rem 1.4, 800) + +break-points.media-breakpoint-down(sm) + +text.text-block(1rem 1.4, 800) .lp-hero-info__catchcopy - +media-breakpoint-up(xl) - +text-block(4rem 1.2, 800) - +media-breakpoint-only(lg) - +text-block(3.25rem 1.2, 800) - +media-breakpoint-only(md) - +text-block(2.75rem 1.2, 800) - +media-breakpoint-down(sm) - +text-block(2rem 1.2, 800) + +break-points.media-breakpoint-up(xl) + +text.text-block(4rem 1.2, 800) + +break-points.media-breakpoint-only(lg) + +text.text-block(3.25rem 1.2, 800) + +break-points.media-breakpoint-only(md) + +text.text-block(2.75rem 1.2, 800) + +break-points.media-breakpoint-down(sm) + +text.text-block(2rem 1.2, 800) br display: none .lp-hero-info__description - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) p - +text-block(1rem 1.5, 600) - +media-breakpoint-down(sm) + +text.text-block(1rem 1.5, 600) + +break-points.media-breakpoint-down(sm) p - +text-block(.875rem 1.5, 600) + +text.text-block(.875rem 1.5, 600) diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-hero-visual.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-hero-visual.sass index a425a1b4ccb..68697fcd7bf 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-hero-visual.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-hero-visual.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/break-points" + .lp-hero-visual width: 100% height: 100% @@ -6,7 +8,7 @@ align-items: center .lp-hero-visual__image - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-height: 26.25rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) max-height: 12rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-left-image-section.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-left-image-section.sass index ceccf01d64f..f87bb662f21 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-left-image-section.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-left-image-section.sass @@ -1,22 +1,24 @@ +@use "../../../config/mixins/break-points" + .lp-left-image-section - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: 1rem .lp-left-image-section__inner display: flex align-items: center - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) gap: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: 1rem .lp-left-image-section__start font-size: 5rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 0 0 8rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex: 0 0 4rem .lp-left-image-section__end @@ -29,7 +31,7 @@ display: flex justify-content: center align-items: center - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) float: left width: 6rem height: 6rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-left-number-section.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-left-number-section.sass index fab5b841b0e..630ba49e5d8 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-left-number-section.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-left-number-section.sass @@ -1,3 +1,6 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .lp-left-number-sections__items counter-reset: number 0 @@ -5,15 +8,15 @@ flex-direction: row padding: 1.5rem display: flex - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) gap: 2rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: 1rem .lp-left-number-section__start - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 0 0 12rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex: 0 0 6rem .lp-left-number-section__header @@ -26,10 +29,10 @@ .lp-left-number-section__title text-align: center color: var(--main) - +media-breakpoint-up(md) - +text-block(1.5rem 1.4, 800) - +media-breakpoint-down(sm) - +text-block(1.25rem 1.4, 800) + +break-points.media-breakpoint-up(md) + +text.text-block(1.5rem 1.4, 800) + +break-points.media-breakpoint-down(sm) + +text.text-block(1.25rem 1.4, 800) br display: none &::before @@ -42,10 +45,10 @@ -webkit-text-stroke-color: var(--main) color: #dedef2 margin-bottom: -.125rem - +media-breakpoint-up(md) - +text-block(2.5rem 1.4, 900) - +media-breakpoint-down(sm) - +text-block(2rem 1.4, 900) + +break-points.media-breakpoint-up(md) + +text.text-block(2.5rem 1.4, 900) + +break-points.media-breakpoint-down(sm) + +text.text-block(2rem 1.4, 900) .lp-left-number-section__end display: flex diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-mentor-books.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-mentor-books.sass index 037e5fbb84b..21998fab9a6 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-mentor-books.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-mentor-books.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/break-points" + .lp-mentor-books__items display: flex flex-wrap: wrap @@ -5,9 +7,9 @@ align-items: flex-end .lp-mentor-books__item - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 0 0 4.75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex: 1 .lp-mentor-books__item-link diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-mentor.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-mentor.sass index 1ef75c01ccc..83980fefdbc 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-mentor.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-mentor.sass @@ -1,3 +1,7 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .lp-mentor &.is-welcome-index height: 100% @@ -6,9 +10,9 @@ display: flex flex-direction: column gap: 1rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1.25rem 1.5rem 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .75rem 1rem 1rem .lp-mentor.is-articles-show & padding: .75rem 1rem 0 @@ -19,14 +23,14 @@ display: flex gap: 1rem align-items: flex-start - +media-breakpoint-up(md) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-up(md) + +break-points.media-breakpoint-down(sm) flex-direction: column .lp-mentor__header-start - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 0 0 4.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: 100% display: flex align-items: center @@ -36,16 +40,16 @@ display: flex flex-direction: column gap: .5rem - +media-breakpoint-up(md) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-up(md) + +break-points.media-breakpoint-down(sm) width: 100% .lp-mentor__image border-radius: .25rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) width: 100% - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: 3rem display: block margin-inline: auto @@ -53,28 +57,28 @@ .lp-mentor__name font-weight: 800 color: var(--main) - +media-breakpoint-up(md) - +text-block(1.5rem 1.2) - +media-breakpoint-down(sm) - +text-block(1.125rem 1.2) + +break-points.media-breakpoint-up(md) + +text.text-block(1.5rem 1.2) + +break-points.media-breakpoint-down(sm) + +text.text-block(1.125rem 1.2) text-align: center .lp-mentor__job font-weight: 400 color: var(--main) - +media-breakpoint-up(md) - +text-block(.875rem 1) + +break-points.media-breakpoint-up(md) + +text.text-block(.875rem 1) margin-bottom: .125rem - +media-breakpoint-down(sm) - +text-block(.625rem 1) + +break-points.media-breakpoint-down(sm) + +text.text-block(.625rem 1) text-align: center margin-bottom: .125rem .lp-mentor__sns display: flex - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) gap: .75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: .5rem flex-wrap: wrap justify-content: center @@ -90,12 +94,12 @@ transition: all .2s ease-out &:hover color: var(--welcome-pink) - +media-breakpoint-up(md) - +size(2.25rem) - +text-block(1.25rem 1.45) - +media-breakpoint-down(sm) - +size(1.75rem) - +text-block(1rem 1.45) + +break-points.media-breakpoint-up(md) + +size.size(2.25rem) + +text.text-block(1.25rem 1.45) + +break-points.media-breakpoint-down(sm) + +size.size(1.75rem) + +text.text-block(1rem 1.45) .lp-mentor__body @@ -106,13 +110,13 @@ text-overflow: ellipsis -webkit-box-orient: vertical -webkit-line-clamp: 3 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) height: 67.2px - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: none &.is-temp - +text-block(.875rem 1.6) + +text.text-block(.875rem 1.6) img width: 6.25rem float: right diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-page-header-nav.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-page-header-nav.sass index 8be92bd9dbb..d97c4f69803 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-page-header-nav.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-page-header-nav.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/break-points" + .lp-page-header-nav display: flex height: 100% @@ -9,11 +11,11 @@ .lp-page-header-nav__item position: relative - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) min-width: 10rem display: flex justify-content: center - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex: 1 max-width: 50% min-width: 10rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-page-header.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-page-header.sass index 8bd89741e87..0838f87bf5c 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-page-header.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-page-header.sass @@ -1,12 +1,15 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .lp-page-header background-color: var(--main) .lp-page-header__title color: var(--reversal-text) - +media-breakpoint-up(md) - +text-block(1.5rem 1.4, 700) - +media-breakpoint-down(sm) - +text-block(1.25rem 1.4, 700) + +break-points.media-breakpoint-up(md) + +text.text-block(1.5rem 1.4, 700) + +break-points.media-breakpoint-down(sm) + +text.text-block(1.25rem 1.4, 700) max-width: calc(100vw - 2rem) white-space: nowrap overflow: hidden diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-practices-table.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-practices-table.sass index bc810c9c745..921a4db5134 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-practices-table.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-practices-table.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/text" + .lp-practices-table width: 100% tr @@ -5,7 +7,7 @@ border-bottom: solid 1px var(--border) th, td - +text-block(.8125rem 1.5) + +text.text-block(.8125rem 1.5) padding: .5rem 1rem th text-align: right diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-price.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-price.sass index 60e08c5c225..86f3a8ce79f 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-price.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-price.sass @@ -1,35 +1,39 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .lp-price color: var(--main) display: flex justify-content: center gap: .75em - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) font-size: 1rem - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) font-size: .875rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .5625rem &.is-total gap: .25em &.is-sm justify-content: flex-start - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) font-size: .5625em .lp-price__tax font-size: 1.5rem - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) font-size: .5em .lp-price__tax font-size: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .375em .lp-price__tax font-size: .875rem .lp-price__label - +text-block(1.25em 1, 700) + +text.text-block(1.25em 1, 700) align-self: center - +size(4em) + +size.size(4em) border: solid 1px display: flex align-items: center @@ -45,16 +49,16 @@ flex-wrap: wrap .lp-price__amount - +text-block(6.25em 1, 900) + +text.text-block(6.25em 1, 900) align-self: baseline font-family: 'Lato', sans-serif .lp-price__currency - +text-block(3.25em 1, 800) + +text.text-block(3.25em 1, 800) align-self: baseline .lp-price__details - +text-block(2.25em 1, 800) + +text.text-block(2.25em 1, 800) display: flex align-self: baseline gap: .125em diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-supplementary-info.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-supplementary-info.sass index f63a5862cbc..80d990e7f1f 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-supplementary-info.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-supplementary-info.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/break-points" + .lp-supplementary-info background-color: var(--lp-bg-3) border-radius: .5rem @@ -5,9 +7,9 @@ .lp-supplementary-info__inner display: flex flex-direction: column - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1.5rem 2rem gap: 1.25rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .75rem 1rem gap: .75rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-table.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-table.sass index 5b61dcb66bd..637abca0d47 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-table.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-table.sass @@ -1,9 +1,11 @@ +@use "../../../config/mixins/text" + .lp-table width: 100% background-color: var(--base) th, td - +text-block(.8125rem 1.5) + +text.text-block(.8125rem 1.5) padding: .5rem 1rem border: solid 1px var(--border) text-align: left diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-top-cover.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-top-cover.sass index e9932d2386c..8a8a4b6d5b6 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-top-cover.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-top-cover.sass @@ -1,15 +1,19 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .lp-top-cover - background-image: image-url('background/people.png') + background-image: var(--people-bg-image) background-color: var(--lp-bg-2) background-repeat: repeat position: relative - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) height: 38rem background-size: 32rem - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) height: 28rem background-size: 26rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) height: 24rem background-size: 20rem @@ -22,7 +26,7 @@ z-index: 2 display: flex align-items: center - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-block: 1rem 1.5rem .lp-top-cover__contents @@ -35,19 +39,19 @@ align-items: center .lp-top-cover__logo - +size(38rem auto) + +size.size(38rem auto) display: block margin-top: 1.125rem margin-inline: auto - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) max-width: 90% margin-top: .75rem .lp-top-cover__description - +text-block(1.5rem 1.4, center 800) + +text.text-block(1.5rem 1.4, center 800) color: var(--reversal-text) font-feature-settings: "palt" - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .875rem .lp-top-cover__title @@ -58,9 +62,9 @@ padding: .5rem 1rem font-weight: 800 text-align: center - +media-breakpoint-up(lg) - +text-block(2.5rem 1.4) - +media-breakpoint-only(md) - +text-block(2rem 1.4) - +media-breakpoint-down(sm) - +text-block(1.25rem 1.4) + +break-points.media-breakpoint-up(lg) + +text.text-block(2.5rem 1.4) + +break-points.media-breakpoint-only(md) + +text.text-block(2rem 1.4) + +break-points.media-breakpoint-down(sm) + +text.text-block(1.25rem 1.4) diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-top-image-sections.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-top-image-sections.sass index 4542d914b65..a8ea9683f4e 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-top-image-sections.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_lp-top-image-sections.sass @@ -1,7 +1,10 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/size" + @use "sass:math" .lp-top-image-sections__title-icon - +size(3rem) + +size.size(3rem) margin-right: .75rem .lp-top-image-section @@ -11,10 +14,10 @@ height: 100% display: flex flex-direction: column - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1.25rem 1.5rem 1.5rem gap: 1.25rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: 1rem 1.25rem 1.25rem gap: .75rem @@ -24,30 +27,30 @@ display: flex justify-content: center align-items: center - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) width: 8rem font-size: 5rem - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) width: 6rem font-size: 4rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: 6rem font-size: 4rem .lp-top-image-section__chart-container - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) aspect-ratio: 5 / 3 - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) aspect-ratio: 3 / 4 .lp-top-image-section__float-image float: left border-radius: .25rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) width: 6.75rem margin-right: 1.5rem margin-bottom: .75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: 4rem margin-right: 1rem margin-bottom: .75rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_side-filter.sass b/app/javascript/stylesheets/lp/blocks/lp/_side-filter.sass index 959a1cc5689..a760d0a7aaa 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_side-filter.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_side-filter.sass @@ -1,3 +1,6 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .side-filter position: sticky top: 4rem @@ -5,13 +8,13 @@ margin: 0 .a-card overflow: hidden - +media-breakpoint-down(md) + +break-points.media-breakpoint-down(md) display: none .side-filter__item-link display: flex padding: .75rem - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) overflow: hidden text-decoration: none transition: all .2s ease-out diff --git a/app/javascript/stylesheets/lp/blocks/lp/_welcome-top-info.sass b/app/javascript/stylesheets/lp/blocks/lp/_welcome-top-info.sass index d20dcd64ace..176d07a0cb9 100644 --- a/app/javascript/stylesheets/lp/blocks/lp/_welcome-top-info.sass +++ b/app/javascript/stylesheets/lp/blocks/lp/_welcome-top-info.sass @@ -1,9 +1,13 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/text" + .welcome-top-info background-color: var(--danger) .welcome-top-info__inner padding-block: .75rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex align-items: center justify-content: center @@ -11,23 +15,23 @@ .welcome-top-info__label border: solid 1px var(--reversal-text) background-color: var(--danger) - +text-block(.75rem 1.4, flex 700 nowrap) + +text.text-block(.75rem 1.4, flex 700 nowrap) color: var(--reversal-text) padding: .25rem .75rem border-radius: 1rem align-items: center justify-content: center - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-right: .5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-bottom: .5rem width: 10rem margin: -26px auto .5rem .welcome-top-info__link color: var(--reversal-text) - +hover-link - +media-breakpoint-up(md) - +text-block(1.125rem 1.5) - +media-breakpoint-down(sm) - +text-block(.875rem 1.5) + +link.hover-link + +break-points.media-breakpoint-up(md) + +text.text-block(1.125rem 1.5) + +break-points.media-breakpoint-down(sm) + +text.text-block(.875rem 1.5) diff --git a/app/javascript/stylesheets/lp/corporate-training/_corporate-training-example.sass b/app/javascript/stylesheets/lp/corporate-training/_corporate-training-example.sass index b876406bd8d..7f5aee40b43 100644 --- a/app/javascript/stylesheets/lp/corporate-training/_corporate-training-example.sass +++ b/app/javascript/stylesheets/lp/corporate-training/_corporate-training-example.sass @@ -1,40 +1,45 @@ +@use "../../config/mixins/break-points" +@use "../../config/mixins/position" +@use "../../config/mixins/size" +@use "../../config/mixins/text" + .corporate-training-example__header display: flex justify-content: center align-items: center color: var(--main) border: solid 1px var(--main) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) height: 9rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) height: 6rem .corporate-training-example__title - +text-block(1rem 1.4) + +text.text-block(1rem 1.4) .corporate-training-example__divider position: relative width: .5rem margin: 1.75rem auto span - +size(.5rem) + +size.size(.5rem) border-radius: 1rem background-color: var(--main) display: block &::before, &::after content: '' - +size(.5rem) + +size.size(.5rem) border-radius: 1rem background-color: var(--main) display: block &::before - +position(absolute, left 0, top -1rem) + +position.position(absolute, left 0, top -1rem) opacity: .2 span opacity: .5 &::after - +position(absolute, left 0, bottom -1rem) + +position.position(absolute, left 0, bottom -1rem) opacity: 1 .corporate-training-example-content @@ -52,9 +57,9 @@ .corporate-training-example-content__title line-height: 1.4 text-align: center - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1.125rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .875rem .corporate-training-example-content__body @@ -63,10 +68,10 @@ list-style: disc outside margin-left: 1.5rem li - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) li + li margin-top: .5rem .corporate-training-example-content__period - +text-block(1.25rem 1.4, 800) + +text.text-block(1.25rem 1.4, 800) text-align: center diff --git a/app/javascript/stylesheets/lp/corporate-training/_corporate-training-examples.sass b/app/javascript/stylesheets/lp/corporate-training/_corporate-training-examples.sass index bce45e40e77..746b2d145b7 100644 --- a/app/javascript/stylesheets/lp/corporate-training/_corporate-training-examples.sass +++ b/app/javascript/stylesheets/lp/corporate-training/_corporate-training-examples.sass @@ -1,8 +1,10 @@ +@use "../../config/mixins/break-points" + .corporate-training-examples__items display: grid - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) grid-template-columns: repeat(3, 1fr) gap: 2rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) grid-template-columns: repeat(2, 1fr) gap: 1rem diff --git a/app/javascript/stylesheets/lp/corporate-training/_corporate-training-testimonial.sass b/app/javascript/stylesheets/lp/corporate-training/_corporate-training-testimonial.sass index 6ef36fdba66..708d8f205e8 100644 --- a/app/javascript/stylesheets/lp/corporate-training/_corporate-training-testimonial.sass +++ b/app/javascript/stylesheets/lp/corporate-training/_corporate-training-testimonial.sass @@ -1,3 +1,5 @@ +@use "../../config/mixins/text" + .corporate-training-testimonials__items display: flex width: 100% @@ -13,4 +15,4 @@ padding-block: 1.5rem .corporate-training-testimonial__title - +text-block(1.25rem 1.4, 800) + +text.text-block(1.25rem 1.4, 800) diff --git a/app/javascript/stylesheets/lp/layouts/_l-cards.sass b/app/javascript/stylesheets/lp/layouts/_l-cards.sass index accf9d8b1a2..3742ea99d7f 100644 --- a/app/javascript/stylesheets/lp/layouts/_l-cards.sass +++ b/app/javascript/stylesheets/lp/layouts/_l-cards.sass @@ -1,9 +1,11 @@ +@use "../../config/mixins/break-points" + .l-cards display: flex flex-direction: column - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) gap: 3rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: 2rem &.is-zigzag .l-cards__item diff --git a/app/javascript/stylesheets/modules/_any_login.sass b/app/javascript/stylesheets/modules/_any_login.sass index 1a40ae9611a..f2ca11ccd91 100644 --- a/app/javascript/stylesheets/modules/_any_login.sass +++ b/app/javascript/stylesheets/modules/_any_login.sass @@ -1,3 +1,5 @@ +@use "../config/mixins/size" + body #any_login background: black @@ -17,7 +19,7 @@ body cursor: pointer vertical-align: middle padding: 1rem - +size(3.25rem) + +size.size(3.25rem) opacity: 1 transition: all .2s ease-out &:hover diff --git a/app/javascript/stylesheets/modules/_choices.sass b/app/javascript/stylesheets/modules/_choices.sass index 71e9329925f..4f977e2e792 100644 --- a/app/javascript/stylesheets/modules/_choices.sass +++ b/app/javascript/stylesheets/modules/_choices.sass @@ -1,3 +1,6 @@ +@use "../config/mixins/position" +@use "../config/variables/choices" + body .choices.is-open z-index: 5 @@ -50,14 +53,14 @@ body border-left-color: var(--input-selected-border) color: var(--input-selected-text) height: 100% - background-image: $choices-icon-cross + background-image: choices.$choices-icon-cross margin: 0 0 0 .5rem width: 1.75rem - +position(absolute, right 0, top 0) + +position.position(absolute, right 0, top 0) transition: all .2s ease-out &:hover background-color: var(--primary-semi-tint) - background-image: $choices-icon-cross-inverse + background-image: choices.$choices-icon-cross-inverse .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item line-height: 1.5 diff --git a/app/javascript/stylesheets/modules/_multiselect.sass b/app/javascript/stylesheets/modules/_multiselect.sass index 70d7c75891c..78ec5dc7456 100644 --- a/app/javascript/stylesheets/modules/_multiselect.sass +++ b/app/javascript/stylesheets/modules/_multiselect.sass @@ -1,15 +1,20 @@ +@use "../atoms/a-text-input" as textInput +@use "../config/mixins/border-radius" +@use "../config/mixins/break-points" +@use "../config/mixins/position" + .multiselect - +position(absolute, left 0, top 0, right 0) + +position.position(absolute, left 0, top 0, right 0) .multiselect.book - +position(initial) + +position.position(initial) .multiselect__single, .multiselect__input - @extend .a-text-input + +textInput.text-input-base .multiselect__single - +position(relative, 1) + +position.position(relative, 1) white-space: nowrap overflow: hidden text-overflow: ellipsis @@ -19,7 +24,7 @@ overflow-y: scroll background-color: var(--base) border: solid 1px var(--border) - +border-radius(bottom, .25rem) + +border-radius.border-radius(bottom, .25rem) .multiselect--active overflow-y: hidden !important @@ -28,9 +33,9 @@ display: block !important .multiselect__element - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .875rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1rem &:not(:first-child) border-top: solid 1px var(--border) diff --git a/app/javascript/stylesheets/modules/_select2.sass b/app/javascript/stylesheets/modules/_select2.sass index 60e5954cea5..9fc0ab6ac1d 100644 --- a/app/javascript/stylesheets/modules/_select2.sass +++ b/app/javascript/stylesheets/modules/_select2.sass @@ -1,11 +1,18 @@ +@use "sass:color" +@use "../config/mixins/break-points" +@use "../config/mixins/position" +@use "../config/mixins/size" +@use "../config/mixins/text" +@use "../config/variables/colors" + $select2-height: 2.25rem $select2-font-size: .8125rem $select2-border-color: var(--background-shade) $select2-option-border-color: var(--background) -$select2-highlighted-color: rgba($main, .8) +$select2-highlighted-color: rgba(colors.$main, .8) $select2-results-height: 200px -$select2-selection-choice-border: $main -$select2-selection-choice-background: mix($main, $base, 10%) +$select2-selection-choice-border: colors.$main +$select2-selection-choice-background: color.mix(colors.$main, colors.$base, 10%) .select2-container display: inline-block @@ -24,11 +31,11 @@ $select2-selection-choice-background: mix($main, $base, 10%) overflow: hidden text-overflow: ellipsis white-space: nowrap - +text-block($select2-font-size 1) + +text.text-block($select2-font-size 1) .select2-search line-height: 28px - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex: 0 0 100% // single @@ -80,7 +87,7 @@ $select2-selection-choice-background: mix($main, $base, 10%) z-index: 1051 .select2-results__option - +text-block($select2-font-size 1.5) + +text.text-block($select2-font-size 1.5) padding: 6px user-select: none -webkit-user-select: none @@ -168,17 +175,17 @@ $select2-selection-choice-background: mix($main, $base, 10%) .select2-container--default .select2-selection--single .select2-selection__arrow height: $select2-height - +position(absolute, right 1px, top 1px) + +position.position(absolute, right 1px, top 1px) width: 2em .select2-container--default .select2-selection--single .select2-selection__arrow b border-color: #888 transparent transparent transparent border-style: solid border-width: 5px 4px 0 4px - +size(0) + +size.size(0) margin-left: -4px margin-top: -2px - +position(absolute, left 50%, top 50%) + +position.position(absolute, left 50%, top 50%) .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear float: left @@ -240,14 +247,14 @@ $select2-selection-choice-background: mix($main, $base, 10%) cursor: pointer align-items: center justify-content: center - +size(1.5rem 100%) + +size.size(1.5rem 100%) flex: 0 0 1.5rem margin-right: .5rem - +text-block(1.125rem, 700 flex) + +text.text-block(1.125rem, 700 flex) color: var(--reversal-text) background-color: $select2-selection-choice-border &:hover - background-color: mix($select2-selection-choice-border, $base, 80%) + background-color: color.mix($select2-selection-choice-border, colors.$base, 80%) .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline float: right diff --git a/app/javascript/stylesheets/modules/_stripe.sass b/app/javascript/stylesheets/modules/_stripe.sass index 8852d74cdc5..a950b5a99f5 100644 --- a/app/javascript/stylesheets/modules/_stripe.sass +++ b/app/javascript/stylesheets/modules/_stripe.sass @@ -1,3 +1,5 @@ +@use "../config/mixins/text" + .StripeElement background-color: var(--base) height: 40px @@ -17,5 +19,5 @@ #card-errors color: var(--danger) - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) margin-top: .25em diff --git a/app/javascript/stylesheets/modules/_tagify.sass b/app/javascript/stylesheets/modules/_tagify.sass index 1d1a2f7e4bf..1af0a8463c4 100644 --- a/app/javascript/stylesheets/modules/_tagify.sass +++ b/app/javascript/stylesheets/modules/_tagify.sass @@ -1,6 +1,8 @@ +@use "../atoms/a-text-input" as textInput + body .tagify - @extend .a-text-input + +textInput.text-input-base display: flex !important align-items: center padding: .5rem diff --git a/app/javascript/stylesheets/modules/_toasts.sass b/app/javascript/stylesheets/modules/_toasts.sass index c618998c4c6..445d4489575 100644 --- a/app/javascript/stylesheets/modules/_toasts.sass +++ b/app/javascript/stylesheets/modules/_toasts.sass @@ -1,3 +1,5 @@ +@use "../config/variables/colors" + $swal2-white: #fff !default $swal2-black: #000 !default $swal2-outline-color: rgba(100, 150, 200, 0.5) !default @@ -87,7 +89,7 @@ $swal2-toast-footer-font-size: 0.8em !default grid-template-columns: 1fr 99fr 1fr padding: $swal2-toast-padding overflow-y: hidden - background: rgba($success, 0.9) + background: rgba(colors.$success, 0.9) box-shadow: $swal2-toast-box-shadow //pointer-events: all; pointer-events: none @@ -254,6 +256,6 @@ $swal2-toast-footer-font-size: 0.8em !default animation: none &.is-success - background: rgba($success, .9) + background: rgba(colors.$success, .9) &.is-error - background: rgba($danger, .9) + background: rgba(colors.$danger, .9) diff --git a/app/javascript/stylesheets/not-logged-in.sass b/app/javascript/stylesheets/not-logged-in.sass index 54fade93a2f..d596c5e08bd 100644 --- a/app/javascript/stylesheets/not-logged-in.sass +++ b/app/javascript/stylesheets/not-logged-in.sass @@ -1,10 +1,10 @@ @charset "UTF-8" -@import common-imports +@use "common-imports" -@import not-logged-in/base/base -@import not-logged-in/not-logged-in-wrapper -@import not-logged-in/completion -@import not-logged-in/unauthorized -@import not-logged-in/unauthorized-header -@import not-logged-in/join-us-nav +@use "not-logged-in/base/base" +@use "not-logged-in/not-logged-in-wrapper" +@use "not-logged-in/completion" +@use "not-logged-in/unauthorized" +@use "not-logged-in/unauthorized-header" +@use "not-logged-in/join-us-nav" diff --git a/app/javascript/stylesheets/not-logged-in/_completion.sass b/app/javascript/stylesheets/not-logged-in/_completion.sass index 7ba3ac5fb6f..694a604dc5c 100644 --- a/app/javascript/stylesheets/not-logged-in/_completion.sass +++ b/app/javascript/stylesheets/not-logged-in/_completion.sass @@ -1,13 +1,16 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/text" + .completion padding-block: 4rem 2rem .completion__title - +text-block(1em 1.4, 800 center) + +text.text-block(1em 1.4, 800 center) color: var(--reversal-text) font-family: var(--sans-serif) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 2rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1.5rem .completion__body @@ -15,7 +18,7 @@ .completion__image border-radius: 1rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) border: solid .75rem var(--completion-dark) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) border: solid .5rem var(--completion-dark) diff --git a/app/javascript/stylesheets/not-logged-in/_not-logged-in-wrapper.sass b/app/javascript/stylesheets/not-logged-in/_not-logged-in-wrapper.sass index 5c05f9bce65..f9490be9852 100644 --- a/app/javascript/stylesheets/not-logged-in/_not-logged-in-wrapper.sass +++ b/app/javascript/stylesheets/not-logged-in/_not-logged-in-wrapper.sass @@ -1,3 +1,7 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/position" +@use "../config/mixins/size" + .not-logged-in-wrapper min-height: 100vh display: flex @@ -6,26 +10,26 @@ content: '' background-image: url(https://bootcamp.fjord.jp/images/background/background.svg) background-repeat: repeat - +position(fixed, left 0, top 0, right 0, bottom 0, 1) - +size(100%) + +position.position(fixed, left 0, top 0, right 0, bottom 0, 1) + +size.size(100%) opacity: .075 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) background-size: 22rem auto - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) background-size: 16rem auto body.is-completion &::before content: '' background-image: url('https://bootcamp.fjord.jp/images/background/completion_background.svg') background-repeat: repeat - +position(fixed, left 0, top 0, right 0, bottom 0, 1) - +size(100%) + +position.position(fixed, left 0, top 0, right 0, bottom 0, 1) + +size.size(100%) opacity: .075 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) background-size: 16rem auto .not-logged-in-wrapper__start flex: 1 - +position(relative, 2) + +position.position(relative, 2) .not-logged-in-wrapper__end - +position(relative, 2) + +position.position(relative, 2) diff --git a/app/javascript/stylesheets/not-logged-in/_unauthorized-header.sass b/app/javascript/stylesheets/not-logged-in/_unauthorized-header.sass index d424ca35966..4c572efb3e6 100644 --- a/app/javascript/stylesheets/not-logged-in/_unauthorized-header.sass +++ b/app/javascript/stylesheets/not-logged-in/_unauthorized-header.sass @@ -1,10 +1,13 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/text" + .unauthorized-header__image display: block margin-inline: auto - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-width: 6rem margin-bottom: .75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) max-width: 4.5rem margin-bottom: .5rem @@ -16,15 +19,15 @@ .unauthorized-header__title-label display: block font-weight: 700 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1.25rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .875rem .unauthorized-header__title - +text-block(1em 1.4, 800) + +text.text-block(1em 1.4, 800) margin-top: .25em - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 2rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1.5rem diff --git a/app/javascript/stylesheets/not-logged-in/_unauthorized.sass b/app/javascript/stylesheets/not-logged-in/_unauthorized.sass index 0cefadd8a3d..3f413c555bd 100644 --- a/app/javascript/stylesheets/not-logged-in/_unauthorized.sass +++ b/app/javascript/stylesheets/not-logged-in/_unauthorized.sass @@ -1,13 +1,16 @@ +@use "../config/mixins/break-points" +@use "../config/mixins/text" + .unauthorized - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding-block: 3rem 2rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-block: 2rem .unauthorized__body - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-top: 3rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-top: 2rem .unauthorized__contents @@ -16,9 +19,9 @@ .unauthorized__content color: var(--reversal-text) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: 1rem & + .unauthorized__content padding-top: 0 @@ -27,10 +30,10 @@ border-top: dashed 1px rgb(white, 10%) .must-be-enrolled - +media-breakpoint-up(md) - +text-block(1rem 1.8, center) - +media-breakpoint-down(sm) - +text-block(1rem 1.8) + +break-points.media-breakpoint-up(md) + +text.text-block(1rem 1.8, center) + +break-points.media-breakpoint-down(sm) + +text.text-block(1rem 1.8) .unauthorized-actions__items display: flex diff --git a/app/javascript/stylesheets/not-logged-in/base/_base.sass b/app/javascript/stylesheets/not-logged-in/base/_base.sass index 134f0f8f68f..23ce2f09356 100644 --- a/app/javascript/stylesheets/not-logged-in/base/_base.sass +++ b/app/javascript/stylesheets/not-logged-in/base/_base.sass @@ -1,5 +1,7 @@ +@use "../../config/variables/fonts" + html - font-family: $sans-serif + font-family: fonts.$sans-serif color: var(--default-text) body.is-not-logged-in diff --git a/app/javascript/stylesheets/shared/blocks/_code-toolbar.scss b/app/javascript/stylesheets/shared/blocks/_code-toolbar.scss index 202b534a1a3..756173cdeef 100644 --- a/app/javascript/stylesheets/shared/blocks/_code-toolbar.scss +++ b/app/javascript/stylesheets/shared/blocks/_code-toolbar.scss @@ -1,3 +1,5 @@ +@use "../../config/mixins/border-radius"; + pre.code-toolbar { position: relative; } @@ -44,7 +46,7 @@ pre.code-toolbar > .toolbar span { justify-content: center; padding: 0 .5em; background-color: #322931; - @include border-radius(top, .125rem); + @include border-radius.border-radius(top, .125rem); text-decoration: none; } diff --git a/app/javascript/stylesheets/shared/blocks/_errors.sass b/app/javascript/stylesheets/shared/blocks/_errors.sass index 2217ecc44fe..f23717857a8 100644 --- a/app/javascript/stylesheets/shared/blocks/_errors.sass +++ b/app/javascript/stylesheets/shared/blocks/_errors.sass @@ -1,3 +1,6 @@ +@use "../../config/mixins/break-points" +@use "../../config/mixins/text" + .errors background-color: var(--danger-tint) border: solid 1px var(--danger) @@ -5,21 +8,21 @@ max-width: 30rem margin-inline: auto border-radius: .25rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1rem 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .875rem 1rem .errors__title - +text-block(.875rem 1.45 0 .8em, center 600) + +text.text-block(.875rem 1.45 0 .8em, center 600) color: var(--danger-text) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .8125rem .errors__item - +text-block(.8125rem 1.6 0 .2em) + +text.text-block(.8125rem 1.6 0 .2em) color: var(--danger-text) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .75rem &:last-child margin-bottom: 0 diff --git a/app/javascript/stylesheets/shared/blocks/_flash.sass b/app/javascript/stylesheets/shared/blocks/_flash.sass index ae14b31faf9..2f757f0715b 100644 --- a/app/javascript/stylesheets/shared/blocks/_flash.sass +++ b/app/javascript/stylesheets/shared/blocks/_flash.sass @@ -1,3 +1,8 @@ +@use "../../config/mixins/link" +@use "../../config/mixins/position" +@use "../../config/mixins/size" +@use "../../config/mixins/text" + .flash background-color: var(--danger) padding-block: .75rem @@ -9,21 +14,21 @@ display: none .flash__container - +position(relative) + +position.position(relative) .flash__message - +text-block(.875rem 1.4, center) + +text.text-block(.875rem 1.4, center) color: var(--reversal-text) a - +hover-link-reversal + +link.hover-link-reversal color: var(--reversal-text) .flash__close - +position(absolute, right 0, top 50%) + +position.position(absolute, right 0, top 50%) display: flex justify-content: center align-items: center - +size(2.75rem) + +size.size(2.75rem) transform: translate(0, -50%) cursor: pointer opacity: .7 @@ -32,9 +37,9 @@ &::after content: "" display: block - +size(50% 2px) + +size.size(50% 2px) background-color: var(--reversal-text) - +position(absolute, left 50%, top 50%) + +position.position(absolute, left 50%, top 50%) border-radius: 2px &::before transform: translate(-50%, -50%) rotate(45deg) diff --git a/app/javascript/stylesheets/shared/blocks/_footprints.sass b/app/javascript/stylesheets/shared/blocks/_footprints.sass index a9bc82c8361..09b898de076 100644 --- a/app/javascript/stylesheets/shared/blocks/_footprints.sass +++ b/app/javascript/stylesheets/shared/blocks/_footprints.sass @@ -1,22 +1,26 @@ +@use "../../config/mixins/break-points" +@use "../../config/mixins/link" +@use "../../config/mixins/text" + .user-icons, .user-icons__wrapper margin-top: 1.5rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex gap: .75rem .user-icons__title - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) text-align: right - +text-block(.875rem 2rem, 600 nowrap) - +media-breakpoint-down(sm) - +text-block(.875rem 1.4, 600 nowrap) + +text.text-block(.875rem 2rem, 600 nowrap) + +break-points.media-breakpoint-down(sm) + +text.text-block(.875rem 1.4, 600 nowrap) .user-icons__items display: flex gap: .5rem flex-wrap: wrap - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-top: .75rem .user-icons-item @@ -25,13 +29,13 @@ gap: .25rem .user-icons-item__delete - +text-block(.75rem 1.4) + +text.text-block(.75rem 1.4) .user-icons__more - +text-block(.8125rem 1.4, block nowrap) + +text.text-block(.8125rem 1.4, block nowrap) color: var(--main) - +hover-link-reversal - +media-breakpoint-up(md) + +link.hover-link-reversal + +break-points.media-breakpoint-up(md) align-self: center - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-top: .75rem diff --git a/app/javascript/stylesheets/shared/blocks/_global-nav.sass b/app/javascript/stylesheets/shared/blocks/_global-nav.sass index 244dc52fc77..e0ef90076d8 100644 --- a/app/javascript/stylesheets/shared/blocks/_global-nav.sass +++ b/app/javascript/stylesheets/shared/blocks/_global-nav.sass @@ -1,5 +1,11 @@ +@use "../../config/mixins/break-points" +@use "../../config/mixins/link" +@use "../../config/mixins/position" +@use "../../config/mixins/size" +@use "../../config/mixins/text" + .global-nav - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) background-color: transparent .global-nav__background.a-overlay @@ -12,15 +18,15 @@ display: block .global-nav__inner - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) background-color: var(--main) - +size(var(--global-nav-width) 100%) - +position(fixed, left 0, top 0, bottom 0, 3) + +size.size(var(--global-nav-width) 100%) + +position.position(fixed, left 0, top 0, bottom 0, 3) overflow-y: auto .global-nav-links__link position: relative - +flex-link + +link.flex-link white-space: nowrap align-items: center justify-content: center @@ -28,11 +34,11 @@ color: var(--reversal-text) transition: color .2s ease-in, background-color .2s ease-in width: 100% - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex-direction: column height: 4.125rem gap: .25rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-direction: row height: 2.75rem padding-inline: 1rem @@ -44,23 +50,23 @@ color: var(--main) .global-nav-links__link-icon - +media-breakpoint-up(md) - +text-block(1.125rem 1 0 .25rem, center) - +media-breakpoint-down(sm) - +text-block(1rem 1, center) + +break-points.media-breakpoint-up(md) + +text.text-block(1.125rem 1 0 .25rem, center) + +break-points.media-breakpoint-down(sm) + +text.text-block(1rem 1, center) margin-right: .5rem .fa-rocket font-size: 1.15em .global-nav-links__link-label - +text-block(.625rem 1.2, center) - +media-breakpoint-down(sm) + +text.text-block(.625rem 1.2, center) + +break-points.media-breakpoint-down(sm) font-size: .875rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) &.is-sm transform: scale(.875) margin-top: -.125rem line-height: 1.2 .global-nav__item-count - +position(right .25rem, top .25rem) + +position.position(right .25rem, top .25rem) diff --git a/app/javascript/stylesheets/shared/blocks/_hour-filter.sass b/app/javascript/stylesheets/shared/blocks/_hour-filter.sass index f3cf28d296c..bbe64e80b64 100644 --- a/app/javascript/stylesheets/shared/blocks/_hour-filter.sass +++ b/app/javascript/stylesheets/shared/blocks/_hour-filter.sass @@ -1,3 +1,6 @@ +@use "../../config/mixins/link" +@use "../../config/mixins/text" + .activity-time-filter padding-block: .875rem border-bottom: solid 1px var(--border) @@ -21,8 +24,8 @@ display: inline-block .dropdown-button - +block-link - +text-block(.75rem 2.3, left nowrap) + +link.block-link + +text.text-block(.75rem 2.3, left nowrap) color: var(--semi-muted-text) border: solid 1px var(--border-shade) border-radius: 20rem @@ -74,7 +77,7 @@ padding: .5rem 1rem cursor: pointer transition: background-color .2s ease-out - +text-block(.75rem 1.5, left nowrap) + +text.text-block(.75rem 1.5, left nowrap) &:hover background-color: var(--background-semi-shade) &:first-child @@ -83,8 +86,8 @@ border-radius: 0 0 .5rem .5rem .search-button - +block-link - +text-block(.75rem 2.3, center nowrap) + +link.block-link + +text.text-block(.75rem 2.3, center nowrap) background-color: var(--main) border: solid 1px var(--main) color: var(--reversal-text) diff --git a/app/javascript/stylesheets/shared/blocks/_modal.sass b/app/javascript/stylesheets/shared/blocks/_modal.sass index 2d39fe6714a..26da945c181 100644 --- a/app/javascript/stylesheets/shared/blocks/_modal.sass +++ b/app/javascript/stylesheets/shared/blocks/_modal.sass @@ -1,13 +1,17 @@ +@use "../../config/mixins/break-points" +@use "../../config/mixins/position" +@use "../../config/mixins/size" + .modal display: none - +position(fixed, left 0, top 0, right 0, bottom 0, 100) + +position.position(fixed, left 0, top 0, right 0, bottom 0, 100) padding: 1rem input:checked + &, &.is-shown display: block .modal__overlay - +position(fixed, left 0, top 0, right 0, bottom 0) + +position.position(fixed, left 0, top 0, right 0, bottom 0) background-color: rgba(black, .8) .modal__description @@ -23,31 +27,31 @@ align-items: center justify-content: space-between border-bottom: solid 1px var(--border-tint) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: .25rem 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .25rem 1rem .modal-header__close display: flex align-items: center justify-content: center - +size(2.75rem) + +size.size(2.75rem) cursor: pointer opacity: .4 transition: all .2s ease-out position: relative - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-right: -1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-right: -1rem &::before, &::after content: "" display: block - +size(40% 2px) + +size.size(40% 2px) background-color: var(--default-text) - +position(absolute, left 50%, top 50%) + +position.position(absolute, left 50%, top 50%) border-radius: 2px &::before transform: translate(-50%, -50%) rotate(45deg) @@ -57,7 +61,7 @@ opacity: 1 .modal-content - +position(absolute, left 50%, top 50%, 1) + +position.position(absolute, left 50%, top 50%, 1) transform: translate(-50%, -50%) background-color: var(--base) border-radius: .25rem @@ -72,20 +76,20 @@ max-height: calc(100vh - 11.5rem) overflow: auto border-bottom: solid 1px var(--border-tint) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1rem 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: 1rem .modal-title font-weight: 600 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1.25rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1rem .modal-footer - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: .25rem 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .25rem 1rem diff --git a/app/javascript/stylesheets/shared/blocks/_not-logged-in-footer.sass b/app/javascript/stylesheets/shared/blocks/_not-logged-in-footer.sass index e3e6725e06a..23a7c1352f5 100644 --- a/app/javascript/stylesheets/shared/blocks/_not-logged-in-footer.sass +++ b/app/javascript/stylesheets/shared/blocks/_not-logged-in-footer.sass @@ -1,7 +1,13 @@ +@use "../../config/mixins/break-points" +@use "../../config/mixins/link" +@use "../../config/mixins/size" +@use "../../config/mixins/text" +@use "../../config/variables/colors" + .not-logged-in-footer - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding-block: 3rem - +media-breakpoint-down(md) + +break-points.media-breakpoint-down(md) padding-bottom: 1.5rem .container padding-inline: 0 @@ -10,41 +16,41 @@ margin-bottom: 1.5rem .not-logged-in-footer__nav-items - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) gap: 1rem justify-content: center align-items: center - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex flex-wrap: wrap - +media-breakpoint-down(md) - border-top: solid 1px rgba($border, 10%) + +break-points.media-breakpoint-down(md) + border-top: solid 1px rgba(colors.$border, 10%) body.is-lp & border-top: none .not-logged-in-footer__nav-item - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) flex: 50% 0 0 - border-bottom: solid 1px rgba($border, 10%) + border-bottom: solid 1px rgba(colors.$border, 10%) &:nth-child(odd) - border-right: solid 1px rgba($border, 10%) - +media-breakpoint-down(sm) - border-bottom: solid 1px rgba($border, 10%) + border-right: solid 1px rgba(colors.$border, 10%) + +break-points.media-breakpoint-down(sm) + border-bottom: solid 1px rgba(colors.$border, 10%) body.is-lp & border-color: var(--border) .not-logged-in-footer__nav-item-link - +text-block(.875rem 1) + +text.text-block(.875rem 1) color: var(--reversal-text) - +media-breakpoint-up(md) - +hover-link - +media-breakpoint-down(md) + +break-points.media-breakpoint-up(md) + +link.hover-link + +break-points.media-breakpoint-down(md) text-decoration: none display: flex align-items: center padding-inline: 1rem - +size(100% 2.75rem) + +size.size(100% 2.75rem) i font-size: .75em position: relative @@ -57,7 +63,7 @@ .not-logged-in-footer-copyright justify-content: center align-items: center - +text-block(.875rem 1.4, flex) + +text.text-block(.875rem 1.4, flex) color: var(--reversal-text) gap: .25rem body.is-lp & @@ -67,7 +73,7 @@ display: block .not-logged-in-footer-copyright__author-link - +hover-link + +link.hover-link color: var(--reversal-text) margin-right: .5em body.is-lp & diff --git a/app/javascript/stylesheets/shared/blocks/_o-empty-message.sass b/app/javascript/stylesheets/shared/blocks/_o-empty-message.sass index 12bfc3e2368..133ed63f4f7 100644 --- a/app/javascript/stylesheets/shared/blocks/_o-empty-message.sass +++ b/app/javascript/stylesheets/shared/blocks/_o-empty-message.sass @@ -1,3 +1,5 @@ +@use "../../config/mixins/text" + .o-empty-message max-width: 50rem margin-inline: auto @@ -7,9 +9,9 @@ margin-top: 1.5rem .o-empty-message__icon - +text-block(5rem 1) + +text.text-block(5rem 1) .o-empty-message__text - +text-block(1rem 1.4) + +text.text-block(1rem 1.4) margin-top: 1em text-align: center diff --git a/app/javascript/stylesheets/shared/blocks/_page-nav.sass b/app/javascript/stylesheets/shared/blocks/_page-nav.sass index 44154fc769d..6c292778018 100644 --- a/app/javascript/stylesheets/shared/blocks/_page-nav.sass +++ b/app/javascript/stylesheets/shared/blocks/_page-nav.sass @@ -1,13 +1,18 @@ +@use "../../config/mixins/break-points" +@use "../../config/mixins/link" +@use "../../config/mixins/position" +@use "../../config/mixins/text" + .page-nav - +media-breakpoint-up(lg) - +position(right 0, top 3.5rem) + +break-points.media-breakpoint-up(lg) + +position.position(right 0, top 3.5rem) position: sticky overflow: hidden - +media-breakpoint-down(md) + +break-points.media-breakpoint-down(md) position: static .page-nav__title - +text-block(.875rem 1.4, 600) + +text.text-block(.875rem 1.4, 600) .page-nav__title-inner display: block @@ -24,8 +29,8 @@ a.page-nav__title-inner text-decoration: underline .page-nav__footer-link - +block-link - +text-block(.8125rem 1.4) + +link.block-link + +text.text-block(.8125rem 1.4) text-align: right padding: .5rem .75rem color: var(--default-text) @@ -37,14 +42,14 @@ a.page-nav__title-inner .page-nav__items overflow-y: auto - +position(relative, 1) - +media-breakpoint-up(lg) + +position.position(relative, 1) + +break-points.media-breakpoint-up(lg) max-height: calc(100vh - 8.5rem) - +media-breakpoint-down(md) + +break-points.media-breakpoint-down(md) max-height: 12rem =page-nav-current($background-color, $border-color, $text-color, $pointer-events-none) - +position(relative, 1) + +position.position(relative, 1) box-shadow: 0 0 0 1px $border-color inset background-color: $background-color border-bottom: none @@ -84,9 +89,9 @@ a.page-nav__title-inner .page-nav__item-link padding: .75rem - +text-block(.8125rem 1.4) + +text.text-block(.8125rem 1.4) color: var(--semi-muted-text) - +block-link + +link.block-link transition: all .1s ease-in background-color: transparent &:hover @@ -98,7 +103,7 @@ a.page-nav__title-inner margin-right: .25rem .page-nav__item-title - +text-block(.875rem 1.4, 600 inline) + +text.text-block(.875rem 1.4, 600 inline) .page-nav-metas margin-top: .25rem @@ -108,6 +113,6 @@ a.page-nav__title-inner gap: .25rem .75rem .page-nav__item-link-inner - +flex-link + +link.flex-link gap: .5rem align-items: center diff --git a/app/javascript/stylesheets/shared/blocks/_page-search.sass b/app/javascript/stylesheets/shared/blocks/_page-search.sass index 784f60d1c4b..512fd4d7506 100644 --- a/app/javascript/stylesheets/shared/blocks/_page-search.sass +++ b/app/javascript/stylesheets/shared/blocks/_page-search.sass @@ -1,3 +1,5 @@ +@use "../../config/mixins/border-radius" + .page-search padding-block: .75rem border-top: solid 1px var(--border-shade) @@ -16,9 +18,9 @@ .page-search__text-input height: 2rem - +border-radius(right, 0) + +border-radius.border-radius(right, 0) border-right: none .is-icon.page-search__submit height: 2rem - +border-radius(left, 0) + +border-radius.border-radius(left, 0) diff --git a/app/javascript/stylesheets/shared/blocks/_page-tags-nav.sass b/app/javascript/stylesheets/shared/blocks/_page-tags-nav.sass index 81efa354bf0..be7531bbb6e 100644 --- a/app/javascript/stylesheets/shared/blocks/_page-tags-nav.sass +++ b/app/javascript/stylesheets/shared/blocks/_page-tags-nav.sass @@ -1,3 +1,6 @@ +@use "../../config/mixins/link" +@use "../../config/mixins/text" + .page-tags-nav padding: .5rem .75rem @@ -9,13 +12,13 @@ .page-tags-nav__item-link padding: .3125rem .5rem border-radius: 1.5em - +text-block(.625rem 1.4, nowrap) + +text.text-block(.625rem 1.4, nowrap) color: var(--main) max-width: 8.5rem overflow: hidden text-overflow: ellipsis border: solid 1px var(--main) - +block-link + +link.block-link transition: all .1s ease-in background-color: transparent &:hover diff --git a/app/javascript/stylesheets/shared/blocks/_pagination.sass b/app/javascript/stylesheets/shared/blocks/_pagination.sass index 2701fe455cf..daba1668b3f 100644 --- a/app/javascript/stylesheets/shared/blocks/_pagination.sass +++ b/app/javascript/stylesheets/shared/blocks/_pagination.sass @@ -1,14 +1,20 @@ +@use "../../config/mixins/break-points" +@use "../../config/mixins/link" +@use "../../config/mixins/position" +@use "../../config/mixins/size" +@use "../../config/mixins/text" + .pagination - +position(relative, 1) + +position.position(relative, 1) &:first-child - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-bottom: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-bottom: .75rem &:not(:first-child) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-top: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-top: .75rem .pagination__items @@ -24,12 +30,12 @@ pointer-events: none .pagination__item-link - +size(2.5rem) + +size.size(2.5rem) border-radius: 50% outline: none - +text-block(.875rem 1) + +text.text-block(.875rem 1) color: var(--muted-text) - +flex-link + +link.flex-link justify-content: center align-items: center transition: all .2s ease-in diff --git a/app/javascript/stylesheets/shared/blocks/_pill-nav.sass b/app/javascript/stylesheets/shared/blocks/_pill-nav.sass index 5a70988e310..73a3ceb6c96 100644 --- a/app/javascript/stylesheets/shared/blocks/_pill-nav.sass +++ b/app/javascript/stylesheets/shared/blocks/_pill-nav.sass @@ -1,3 +1,7 @@ +@use "../../config/mixins/border-radius" +@use "../../config/mixins/link" +@use "../../config/mixins/text" + .pill-nav &:not(:first-child) padding-top: 1.25rem @@ -10,15 +14,15 @@ .pill-nav__item &:first-child .pill-nav__item-link - +border-radius(left, 10em) + +border-radius.border-radius(left, 10em) &:last-child .pill-nav__item-link - +border-radius(right, 10em) + +border-radius.border-radius(right, 10em) .is-half & width: 50% .pill-nav__item-link - +block-link - +text-block(.75rem 2.3, center nowrap) + +link.block-link + +text.text-block(.75rem 2.3, center nowrap) color: var(--muted-text) border: solid 1px var(--border-shade) border-left-width: .5px diff --git a/app/javascript/stylesheets/shared/blocks/_tab-nav.sass b/app/javascript/stylesheets/shared/blocks/_tab-nav.sass index b817794ad17..2dccf134ea4 100644 --- a/app/javascript/stylesheets/shared/blocks/_tab-nav.sass +++ b/app/javascript/stylesheets/shared/blocks/_tab-nav.sass @@ -1,3 +1,6 @@ +@use "../../config/mixins/link" +@use "../../config/mixins/text" + .tab-nav padding-block: .875rem border-bottom: solid 1px var(--border) @@ -17,8 +20,8 @@ flex: 0 0 7rem .tab-nav__item-link - +block-link - +text-block(.75rem 2.3, center nowrap) + +link.block-link + +text.text-block(.75rem 2.3, center nowrap) color: var(--semi-muted-text) border: solid 1px var(--border-shade) border-radius: 20rem diff --git a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-actions.sass b/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-actions.sass index 46986af15c7..11da8d0fbd4 100644 --- a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-actions.sass +++ b/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-actions.sass @@ -1,25 +1,32 @@ +@use "../../../config/functions/color" +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/variables/colors" + .card-list-item-actions__trigger - +size(2.25rem) + +size.size(2.25rem) display: flex align-items: center justify-content: center cursor: pointer color: var(--muted-text) align-self: flex-start - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-top: -.5rem margin-right: -.5rem - +media-breakpoint-down(sm) - +position(absolute, left 0, top 2.75rem) + +break-points.media-breakpoint-down(sm) + +position.position(absolute, left 0, top 2.75rem) .card-list-item-actions__inner display: none - +position(absolute, right -.5rem, top -.5rem, 3) + +position.position(absolute, right -.5rem, top -.5rem, 3) input:checked + & display: block .card-list-item-actions__items - +position(relative, 2) + +position.position(relative, 2) border: solid 1px var(--border) width: 10rem border-radius: .25rem @@ -32,7 +39,7 @@ .card-list-item-actions__action font-size: .8125rem color: var(--default-text) - +flex-link + +link.flex-link align-items: center background-color: var(--base) transition: all .2s ease-out @@ -41,5 +48,5 @@ i margin-right: .5em &:hover - background-color: tint($main, 95%) + background-color: color.tint(colors.$main, 95%) color: var(--main-text) diff --git a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-meta.sass b/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-meta.sass index f7d7712c395..3abcd94e36b 100644 --- a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-meta.sass +++ b/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-meta.sass @@ -1,29 +1,33 @@ +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .card-list-item-meta__items - +text-block(.75rem 1.4, flex) + +text.text-block(.75rem 1.4, flex) flex-wrap: wrap gap: 0 .5rem .card-list-item-meta__item overflow: hidden .a-user-icon - +size(1rem) + +size.size(1rem) a overflow: hidden text-overflow: ellipsis .card-list-item-meta__item-note - +text-block(.75rem 1.4) + +text.text-block(.75rem 1.4) color: var(--default-text) &::before content: "※" - +position(relative, top -.0625em) + +position.position(relative, top -.0625em) .card-list-item-meta__checkers display: inline-block margin-left: .75rem .card-list-item-meta__created-at - +text-block(.75rem 1.4) + +text.text-block(.75rem 1.4) color: var(--muted-text) .card-list-item-meta__user diff --git a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-tags-edit.sass b/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-tags-edit.sass index 5710ea268d5..bccad64c929 100644 --- a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-tags-edit.sass +++ b/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-tags-edit.sass @@ -1,8 +1,10 @@ +@use "../../../config/mixins/link" + .card-list-item-tags-edit width: 100% .card-list-item-tags__item-edit - +hover-link-reversal + +link.hover-link-reversal cursor: pointer color: var(--main-text) diff --git a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-title.sass b/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-title.sass index f1ad79ba70f..3cdda9101d9 100644 --- a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-title.sass +++ b/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-title.sass @@ -1,24 +1,28 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .card-list-item-title display: flex justify-content: space-between - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) align-items: center - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-direction: column align-items: flex-start .a-list-item-badge - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-top: .3125rem margin-right: .5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-bottom: .25rem .card-list-item-title__start - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex align-items: center flex: 1 - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: 100% .card-list-item-title__end @@ -28,7 +32,7 @@ width: 100% .card-list-item-title__title - +text-block(.875rem 1.4, 600) + +text.text-block(.875rem 1.4, 600) width: 100% flex-basis: 100% word-break: break-all @@ -46,13 +50,13 @@ vertical-align: middle .card-list-item-title__emotion-image - +size(1.125em) + +size.size(1.125em) margin-right: .375rem transform: translate(0, -.0625em) .card-list-item-title__link word-break: break-all - +line-clamp(2) + +text.line-clamp(2) .card-list-item.is-wip &, .card-list-item.is-read & color: var(--muted-text) diff --git a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item.sass b/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item.sass index 78491eadcca..29af92686e7 100644 --- a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item.sass +++ b/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item.sass @@ -1,10 +1,16 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .card-list-item position: relative &:not(:last-child) border-bottom: solid 1px var(--border-tint) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: .75rem 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .75rem .a-side-nav &:not(:last-child) border-bottom-color: var(--border-shade) @@ -25,18 +31,18 @@ gap: .25rem .products-self_assigned-index .card-list-item__notresponded - +position(absolute, left -.25rem, top -.25rem, 2) - +size(.5rem) + +position.position(absolute, left -.25rem, top -.25rem, 2) + +size.size(.5rem) border-radius: 50% background-color: var(--danger) .card-list-item__inner - +position(relative) + +position.position(relative) display: flex gap: 1rem a.card-list-item__inner - +flex-link + +link.flex-link color: var(--default-text) &:hover .card-list-item-title__title @@ -45,7 +51,7 @@ a.card-list-item__inner .card-list-item__assignee margin-top: .5rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) width: 8rem .card-list-item__assignee-button.a-button @@ -58,7 +64,7 @@ a.card-list-item__inner flex: 0 0 1.25rem margin-right: .375rem .a-user-icon - +size(1.25rem) + +size.size(1.25rem) .card-list-item__assignee-name display: block @@ -73,13 +79,13 @@ a.card-list-item__inner display: flex align-items: center justify-content: center - +text-block(.625rem 1.4, center) + +text.text-block(.625rem 1.4, center) position: relative font-feature-settings: "palt" - +media-breakpoint-up(md) - +size(2.75rem) - +media-breakpoint-down(sm) - +size(2.5rem) + +break-points.media-breakpoint-up(md) + +size.size(2.75rem) + +break-points.media-breakpoint-down(sm) + +size.size(2.5rem) &.is-no-holding background-color: transparent border: none @@ -90,25 +96,25 @@ a.card-list-item__inner margin: -1rem .card-list-item__user - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) min-width: 2.75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) min-width: 2.5rem .card-list-item__user-icon - +media-breakpoint-up(md) - +size(2.75rem) - +media-breakpoint-down(sm) - +size(2.5rem) + +break-points.media-breakpoint-up(md) + +size.size(2.75rem) + +break-points.media-breakpoint-down(sm) + +size.size(2.5rem) .card-list-item.is-wip & opacity: .6 .card-list-item__row-separator border-top: dashed 1px var(--border) height: 1px - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-block: .5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-block: .75rem .25rem .card-list-item__row @@ -116,17 +122,17 @@ a.card-list-item__inner margin-top: .25rem .card-list-item__show-user-detail - +size(2.75rem) + +size.size(2.75rem) display: flex align-items: center justify-content: center cursor: pointer transition: all .2s ease-out position: relative - +media-breakpoint-up(md) - +position(right -1rem) - +media-breakpoint-down(sm) - +position(right -.75rem) + +break-points.media-breakpoint-up(md) + +position.position(right -1rem) + +break-points.media-breakpoint-down(sm) + +position.position(right -.75rem) &:hover opacity: .7 @@ -137,18 +143,18 @@ a.card-list-item__inner display: block .card-list-item__user-description - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .8125rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .75rem .card-list-item__close-user-detail margin-top: 1rem - +text-block(.8125rem 1.4, flex) + +text.text-block(.8125rem 1.4, flex) color: var(--main) align-items: center justify-content: center - +hover-link-reversal + +link.hover-link-reversal cursor: pointer .card-list-item__summary @@ -158,11 +164,11 @@ a.card-list-item__inner word-break: break-all overflow-wrap: anywhere p - +text-block(.75rem 1.5) - +line-clamp(2) + +text.text-block(.75rem 1.5) + +text.line-clamp(2) .card-list-item__option - +position(absolute, right 0, top 0) + +position.position(absolute, right 0, top 0) .a-button min-width: 4rem @@ -175,19 +181,19 @@ a.card-list-item__inner display: block .card-list-item__thumbnail-image - +size(100%) - +position(absolute, left 0, top 0, right 0, bottom 0) + +size.size(100%) + +position.position(absolute, left 0, top 0, right 0, bottom 0) object-fit: cover border-radius: 4px .card-list-item__checker - +media-breakpoint-up(md) - +position(absolute, right .5rem, top .5rem) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-up(md) + +position.position(absolute, right .5rem, top .5rem) + +break-points.media-breakpoint-down(sm) margin-top: .5rem .card-list-item__empty - +text-block(.8125rem 1.4, center) + +text.text-block(.8125rem 1.4, center) color: var(--muted-text) .card-list-item__badge @@ -195,5 +201,5 @@ a.card-list-item__inner .card-list-item__small-link display: flex - +text-block(.75rem 1.4) + +text.text-block(.75rem 1.4) margin-top: .5rem diff --git a/app/javascript/stylesheets/shared/blocks/card-list/_card-list.sass b/app/javascript/stylesheets/shared/blocks/card-list/_card-list.sass index 22d26336822..9c3d3067d12 100644 --- a/app/javascript/stylesheets/shared/blocks/card-list/_card-list.sass +++ b/app/javascript/stylesheets/shared/blocks/card-list/_card-list.sass @@ -1,13 +1,18 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .card-list flex: 1 &.has-scroll max-height: 25.5rem overflow-y: auto - +position(relative) + +position.position(relative) .completed-practices-progress + & border-top: solid 1px var(--border-tint) .side-tabs-contents__item & - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) max-height: calc(100vh - 6rem) overflow-y: auto @@ -21,8 +26,8 @@ .card-list__deacription padding: .75rem 1rem p - +text-block(.8125rem 1.6) - +media-breakpoint-down(sm) + +text.text-block(.8125rem 1.6) + +break-points.media-breakpoint-down(sm) font-size: .75rem .card-list__notice @@ -30,19 +35,19 @@ background-color: var(--success-tint) padding: .75rem 1rem color: var(--success-text) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .5rem .75rem a color: inherit - +hover-link-reversal + +link.hover-link-reversal .card-list__label - +text-block(.75rem 1.4, 700) - +position(sticky, top 0, 2) + +text.text-block(.75rem 1.4, 700) + +position.position(sticky, top 0, 2) background-color: var(--background) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: .25rem 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .25rem .75rem &:first-child border-top: solid 1px var(--border) @@ -51,7 +56,7 @@ .card-list__deacription + & border-top: dotted .0625rem var(--border-tint) &.is-md-only-2-items - +media-breakpoint-only(md) + +break-points.media-breakpoint-only(md) display: flex flex-wrap: wrap .card-list-item diff --git a/app/javascript/stylesheets/shared/blocks/card/_card-body.sass b/app/javascript/stylesheets/shared/blocks/card/_card-body.sass index 4d682c55a48..2b74a7a7aaa 100644 --- a/app/javascript/stylesheets/shared/blocks/card/_card-body.sass +++ b/app/javascript/stylesheets/shared/blocks/card/_card-body.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/break-points" + .card-body flex: 1 &.has-scroll @@ -5,14 +7,14 @@ overflow-y: auto .card-body__description - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .75rem &.a-long-text - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .9375rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .8125rem .card__main-movie @@ -22,7 +24,7 @@ .card-body__inner max-width: 100% width: 100% - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1rem 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: 1rem diff --git a/app/javascript/stylesheets/shared/blocks/card/_card-books.sass b/app/javascript/stylesheets/shared/blocks/card/_card-books.sass index 0841e814811..dc3680a86c8 100644 --- a/app/javascript/stylesheets/shared/blocks/card/_card-books.sass +++ b/app/javascript/stylesheets/shared/blocks/card/_card-books.sass @@ -1,26 +1,31 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .card-books-item - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) height: 100% .card-books-item__body - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 1 .card-books-item__inner padding: .75rem 1rem text-decoration: none - +media-breakpoint-up(md) - +flex-link + +break-points.media-breakpoint-up(md) + +link.flex-link gap: 1rem align-items: flex-start - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: block overflow: hidden .card-books-item__start - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 0 0 4rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) float: left margin-right: 1rem width: 3.5rem @@ -47,17 +52,17 @@ border-radius: 2px .card-books-item__title - +text-block(.875rem 1.4, 600) + +text.text-block(.875rem 1.4, 600) color: var(--default-text) transition: all .2s ease-out .a-badge - +position(relative, top -.125em) + +position.position(relative, top -.125em) margin-right: .5em .card-books-item__title-link text-decoration: none .card-books-item__title-label - +hover-link-reversal + +link.hover-link-reversal color: var(--main-text) a.card-books-item__inner:hover @@ -66,7 +71,7 @@ a.card-books-item__inner:hover color: var(--main-text) .card-books-item__price - +text-block(.75rem 1.4) + +text.text-block(.75rem 1.4) color: var(--default-text) .card-books-item__description diff --git a/app/javascript/stylesheets/shared/blocks/card/_card-eyecatch.sass b/app/javascript/stylesheets/shared/blocks/card/_card-eyecatch.sass index f608552a057..bb217273cee 100644 --- a/app/javascript/stylesheets/shared/blocks/card/_card-eyecatch.sass +++ b/app/javascript/stylesheets/shared/blocks/card/_card-eyecatch.sass @@ -1,7 +1,9 @@ +@use "../../../config/mixins/break-points" + .card-eyecatch - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1rem 1rem 0 - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .75rem .75rem 0 .card-eyecatch__image diff --git a/app/javascript/stylesheets/shared/blocks/card/_card-footer.sass b/app/javascript/stylesheets/shared/blocks/card/_card-footer.sass index 2a1a671ca57..27ae8d86249 100644 --- a/app/javascript/stylesheets/shared/blocks/card/_card-footer.sass +++ b/app/javascript/stylesheets/shared/blocks/card/_card-footer.sass @@ -1,23 +1,28 @@ +@use "../../../config/mixins/border-radius" +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/text" + .card-footer - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: .5rem 1rem min-height: 3rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .5rem .75rem &:last-child - +border-radius(bottom, .25rem) + +border-radius.border-radius(bottom, .25rem) .card-footer__description - +text-block(.75rem 1.4 .5rem, center) + +text.text-block(.75rem 1.4 .5rem, center) color: var(--muted-text) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) text-align: left font-size: .625rem br display: none .card-footer__notice - +text-block(.8125rem 1.4 .5rem, center) + +text.text-block(.8125rem 1.4 .5rem, center) color: var(--success) .card-footer__footer-link @@ -27,6 +32,6 @@ align-items: flex-end .card-footer__footer-text-link - +text-block(.8125rem 1.4) + +text.text-block(.8125rem 1.4) color: var(--muted-text) - +hover-link-reversal + +link.hover-link-reversal diff --git a/app/javascript/stylesheets/shared/blocks/card/_card-header.sass b/app/javascript/stylesheets/shared/blocks/card/_card-header.sass index 028014ed2be..eb26b3c2e1e 100644 --- a/app/javascript/stylesheets/shared/blocks/card/_card-header.sass +++ b/app/javascript/stylesheets/shared/blocks/card/_card-header.sass @@ -1,17 +1,23 @@ +@use "../../../config/mixins/border-radius" +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .card-header display: flex align-items: center justify-content: space-between - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: .75rem 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .5rem .75rem &.is-sm padding-block: .625rem .a-button.is-xs margin-block: -.25rem &:first-child - +border-radius(top, .25rem) + +border-radius.border-radius(top, .25rem) & + .a-form-tabs margin-top: -1px @@ -22,11 +28,11 @@ gap: 1rem .card-header__title - +text-block(1em 1.4, 600) + +text.text-block(1em 1.4, 600) flex: 1 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .875rem .card-header.is-sm & font-size: .875rem @@ -39,15 +45,15 @@ margin-left: .125rem .card-header__title-emotion-image - +size(1.25em) + +size.size(1.25em) display: inline-block vertical-align: middle margin-inline: .125em - +position(relative, top -.125em) + +position.position(relative, top -.125em) .card-header__sub-title - +text-block(.8125rem 1.4) - +media-breakpoint-down(sm) + +text.text-block(.8125rem 1.4) + +break-points.media-breakpoint-down(sm) font-size: .75rem .card-header__action diff --git a/app/javascript/stylesheets/shared/blocks/card/_card-main-actions.sass b/app/javascript/stylesheets/shared/blocks/card/_card-main-actions.sass index e7704ee38df..795a083e7e3 100644 --- a/app/javascript/stylesheets/shared/blocks/card/_card-main-actions.sass +++ b/app/javascript/stylesheets/shared/blocks/card/_card-main-actions.sass @@ -1,3 +1,7 @@ +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .card-main-actions container: card-main-actions / inline-size &:not(:first-child) @@ -9,7 +13,7 @@ display: flex gap: .5rem @container card-main-actions (min-width: 20em) - +position(relative) + +position.position(relative) justify-content: center flex-wrap: wrap align-items: flex-end @@ -45,8 +49,8 @@ flex: 1 .card-main-actions__muted-action - +hover-link-reversal - +text-block(.8125rem 1.4) + +link.hover-link-reversal + +text.text-block(.8125rem 1.4) color: var(--muted-text) &:hover color: var(--danger) diff --git a/app/javascript/stylesheets/shared/blocks/card/_card-message.sass b/app/javascript/stylesheets/shared/blocks/card/_card-message.sass index acfd0bfc1bb..67ba49d74a1 100644 --- a/app/javascript/stylesheets/shared/blocks/card/_card-message.sass +++ b/app/javascript/stylesheets/shared/blocks/card/_card-message.sass @@ -1,11 +1,14 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .card-message text-align: center &.is-notice background-color: var(--success) color: var(--reversal-text) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: .75rem 1rem - +text-block(.875rem 1.5) - +media-breakpoint-down(sm) + +text.text-block(.875rem 1.5) + +break-points.media-breakpoint-down(sm) padding: .75rem - +text-block(.75rem 1.5) + +text.text-block(.75rem 1.5) diff --git a/app/javascript/stylesheets/shared/blocks/card/_congrats-card-body.sass b/app/javascript/stylesheets/shared/blocks/card/_congrats-card-body.sass index a99ed5cf4a9..de6fd655cdf 100644 --- a/app/javascript/stylesheets/shared/blocks/card/_congrats-card-body.sass +++ b/app/javascript/stylesheets/shared/blocks/card/_congrats-card-body.sass @@ -1,8 +1,11 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .congrats-card-body__title - +text-block(1.5rem 1.4, 700) - +media-breakpoint-up(md) + +text.text-block(1.5rem 1.4, 700) + +break-points.media-breakpoint-up(md) font-size: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: 1rem .congrats-card-body__image-container diff --git a/app/javascript/stylesheets/shared/blocks/card/_practice-books.sass b/app/javascript/stylesheets/shared/blocks/card/_practice-books.sass index 98cdfa3fafe..e6bee2a8944 100644 --- a/app/javascript/stylesheets/shared/blocks/card/_practice-books.sass +++ b/app/javascript/stylesheets/shared/blocks/card/_practice-books.sass @@ -1,11 +1,17 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .practice-books__items margin-top: -1px - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex flex-wrap: wrap .practice-books-item - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) border-top: solid 1px var(--border-tint) flex: 0 0 50% height: 100% @@ -13,31 +19,31 @@ flex-direction: column &:nth-child(odd) border-right: solid 1px var(--border-tint) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) &:not(:first-child) border-top: solid 1px var(--border-tint) .practice-books-item__body - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 1 .practice-books-item__inner padding: .75rem 1rem text-decoration: none .practice-books & - +size(100%) - +media-breakpoint-up(md) - +flex-link + +size.size(100%) + +break-points.media-breakpoint-up(md) + +link.flex-link gap: 1rem align-items: flex-start - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: block overflow: hidden .practice-books-item__start - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 0 0 4rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) float: left margin-right: 1rem width: 3.5rem @@ -60,11 +66,11 @@ border-radius: 2px .practice-books-item__title - +text-block(.875rem 1.4, 600) + +text.text-block(.875rem 1.4, 600) color: var(--default-text) transition: all .2s ease-out .a-badge - +position(relative, top -.125em) + +position.position(relative, top -.125em) margin-right: .5em a.practice-books-item__inner:hover @@ -73,7 +79,7 @@ a.practice-books-item__inner:hover color: var(--main-text) .practice-books-item__price - +text-block(.75rem 1.4) + +text.text-block(.75rem 1.4) color: var(--default-text) .practice-books-item__description diff --git a/app/javascript/stylesheets/shared/blocks/card/_thumbnail-card.sass b/app/javascript/stylesheets/shared/blocks/card/_thumbnail-card.sass index 05471ead5f2..2c06aa77356 100644 --- a/app/javascript/stylesheets/shared/blocks/card/_thumbnail-card.sass +++ b/app/javascript/stylesheets/shared/blocks/card/_thumbnail-card.sass @@ -1,8 +1,13 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .thumbnail-card padding: 1rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) height: 100% - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) .col-xs-6 & height: 100% @@ -10,13 +15,13 @@ display: flex flex-direction: column position: relative - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: .5rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) gap: .75rem a.thumbnail-card__inner - +flex-link + +link.flex-link &:hover .thumbnail-card__title text-decoration: underline @@ -34,7 +39,7 @@ a.thumbnail-card__inner object-fit: cover .thumbnail-card__title - +text-block(1.125rem 1.4, 700) + +text.text-block(1.125rem 1.4, 700) color: var(--default-text) overflow: hidden display: -webkit-box @@ -46,7 +51,7 @@ a.thumbnail-card__inner color: var(--muted-text) .thumbnail-card__title-link - +hover-link-reversal + +link.hover-link-reversal .thumbnail-card__metas display: flex @@ -60,15 +65,15 @@ a.thumbnail-card__inner font-size: .875rem color: var(--default-text) img - +size(1.125rem) + +size.size(1.125rem) object-fit: cover margin-right: .25rem border-radius: 50% .thumbnail-card__date - +text-block(.8125rem 1.4) + +text.text-block(.8125rem 1.4) color: var(--semi-muted-text) .thumbnail-card__description - +text-block(.875rem 1.6) + +text.text-block(.875rem 1.6) color: var(--semi-muted-text) diff --git a/app/javascript/stylesheets/shared/blocks/form/_block-checks.sass b/app/javascript/stylesheets/shared/blocks/form/_block-checks.sass index 637865bc747..b44118a3d77 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_block-checks.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_block-checks.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/break-points" + .block-checks display: flex flex-wrap: wrap @@ -13,17 +15,17 @@ .block-checks.is-1-item.is-centered & width: 20rem .block-checks.is-2-items & - +media-breakpoint-up(sm) + +break-points.media-breakpoint-up(sm) flex: 0 0 calc((100% - .5rem) / 2) max-width: calc((100% - .5rem) / 2) - +media-breakpoint-down(xs) + +break-points.media-breakpoint-down(xs) flex: 0 0 100% max-width: 100% .block-checks.is-3-items & width: calc((100% - 1rem) / 3) flex: 0 0 calc((100% - 1rem) / 3) .block-checks.sm-down\:is-3-items & - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: calc((100% - 1rem) / 3) flex: 0 0 calc((100% - 1rem) / 3) @@ -31,6 +33,6 @@ width: calc((100% - 1.5rem) / 4) flex: 0 0 calc((100% - 1.5rem) / 4) .block-checks.sm-down\:is-2-items & - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: calc((100% - .5rem) / 2) flex: 0 0 calc((100% - .5rem) / 2) diff --git a/app/javascript/stylesheets/shared/blocks/form/_books-form.sass b/app/javascript/stylesheets/shared/blocks/form/_books-form.sass index 0609b665aa7..e9e7ca2beb6 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_books-form.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_books-form.sass @@ -1,3 +1,8 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" + .books-form border: solid 1px var(--border) background-color: var(--base) @@ -9,16 +14,16 @@ position: relative .books-form__delete - +position(absolute, right 0, top 0) - +size(2.5rem) + +position.position(absolute, right 0, top 0) + +size.size(2.5rem) transform: translate(25%, -25%) .books-form__delete-link border: solid 1px var(--border-shade) font-size: 1.25rem color: var(--muted-text) - +size(100%) - +flex-link + +size.size(100%) + +link.flex-link align-items: center justify-content: center border-radius: 50% @@ -29,13 +34,13 @@ border-color: var(--danger) .books-form__items - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .75rem .books-form__add .a-button min-width: 12rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: 100% diff --git a/app/javascript/stylesheets/shared/blocks/form/_checkboxes.sass b/app/javascript/stylesheets/shared/blocks/form/_checkboxes.sass index 05b6560f151..edee13f7b06 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_checkboxes.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_checkboxes.sass @@ -1,3 +1,10 @@ +@use "../../../config/mixins/font-awsome" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" +@use "../../../config/variables/colors" + $checkbox-size: .875rem .checkboxes__items @@ -8,11 +15,11 @@ $checkbox-size: .875rem .checkboxes__item label - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) display: block color: var(--semi-muted-text) - +position(relative) - +hover-link + +position.position(relative) + +link.hover-link cursor: pointer padding-left: calc(#{$checkbox-size} * 1.4) &.is-sm @@ -20,21 +27,21 @@ $checkbox-size: .875rem &::before content: "" text-decoration: none - +size($checkbox-size) + +size.size($checkbox-size) border: solid 1px var(--input-border) display: block - +position(absolute, left 0, top 50%) + +position.position(absolute, left 0, top 50%) transform: translate(0, -50%) background-color: var(--base) border-radius: .1875rem - +text-block(.75rem 1) + +text.text-block(.75rem 1) display: flex color: var(--reversal-text) align-items: center justify-content: center transition: all .2s ease-out label:hover::before - background-color: rgba($primary, .4) + background-color: rgba(colors.$primary, .4) border-color: var(--primary) label:hover::after text-decoration: none @@ -45,7 +52,7 @@ $checkbox-size: .875rem .is-dammy label::before background-color: var(--primary) border-color: var(--primary) - +fa(fas "\f00c") + +font-awsome.fa(fas "\f00c") input:checked + label:hover::before border-color: var(--primary) input:checked + label::after, diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-actions.sass b/app/javascript/stylesheets/shared/blocks/form/_form-actions.sass index bb0887ad63c..dd974ff2b6f 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_form-actions.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_form-actions.sass @@ -1,22 +1,27 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .form-actions - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-top: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-top: 1rem &.is-report - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding-bottom: 1.5rem .form-actions + & border-top: dashed 1px var(--border) - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-top: 1rem padding-top: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-top: 1rem .form-actions__items gap: .75rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex align-items: flex-end justify-content: center @@ -24,34 +29,34 @@ position: relative max-width: 45em margin-inline: auto - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-direction: column .form-actions__item - +position(relative) + +position.position(relative) &.is-sub - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) flex: 0 0 auto - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) text-align: center &.is-muted - +media-breakpoint-up(md) - +position(absolute, right 0, bottom 0) - +media-breakpoint-down(sm) + +break-points.media-breakpoint-up(md) + +position.position(absolute, right 0, bottom 0) + +break-points.media-breakpoint-down(sm) text-align: right &.is-help - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-bottom: 1rem &.is-main - +media-breakpoint-up(sm) + +break-points.media-breakpoint-up(sm) min-width: 13rem - +media-breakpoint-down(xs) + +break-points.media-breakpoint-down(xs) width: 100% &.has-help - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) position: relative padding-bottom: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: 100% padding-inline: 0 &:nth-child(2), @@ -64,27 +69,27 @@ width: auto .form-actions__item-help - +text-block(.8125rem 1) + +text.text-block(.8125rem 1) text-align: center padding-top: .5rem .a-form-help-link margin-left: .5em - +media-breakpoint-up(md) - +position(absolute, left 0, bottom 0, right 0) + +break-points.media-breakpoint-up(md) + +position.position(absolute, left 0, bottom 0, right 0) .form-actions__item-checkbox margin-bottom: .5rem .form-actions__delete text-align: right - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-top: .5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-top: .75rem .form-actions__delete-link - +hover-link-reversal - +text-block(.875rem 1.4) + +link.hover-link-reversal + +text.text-block(.875rem 1.4) color: var(--muted-text) &:hover color: var(--danger) diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-added-choice.sass b/app/javascript/stylesheets/shared/blocks/form/_form-added-choice.sass index 65e1d17abe8..51f274bed1a 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_form-added-choice.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_form-added-choice.sass @@ -1,9 +1,11 @@ +@use "../../../config/mixins/break-points" + .form-added-choice .form-added-choice + & margin-top: 1rem .form-added-choice__inner - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex align-items: flex-start gap: .75rem @@ -14,11 +16,11 @@ .form-added-choice__items display: flex - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: 1rem .form-added-choice__action - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-top: .75rem display: flex justify-content: flex-end diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-item-actions.sass b/app/javascript/stylesheets/shared/blocks/form/_form-item-actions.sass index 1da81d3c20c..3105c581008 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_form-item-actions.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_form-item-actions.sass @@ -1,7 +1,10 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/link" + .form-item-actions - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-top: -.75rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-top: -.5rem .form-item-actions__items @@ -10,12 +13,12 @@ gap: .75rem .form-item-actions__text-link - +hover-link-reversal + +link.hover-link-reversal cursor: pointer line-height: 1.4 - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) font-size: .8125rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) font-size: .75rem &.is-danger color: var(--danger) diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-item-block.sass b/app/javascript/stylesheets/shared/blocks/form/_form-item-block.sass index e9c400ef341..5193eaa3bce 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_form-item-block.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_form-item-block.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/text" + .form-item-block &:not(:last-child) margin-bottom: 1.75rem @@ -27,7 +29,7 @@ background-color: var(--base) .form-item-block__title - +text-block(.8125rem 1.4) + +text.text-block(.8125rem 1.4) display: block font-weight: 700 diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-item-group.sass b/app/javascript/stylesheets/shared/blocks/form/_form-item-group.sass index c9253aea45d..bfc7ec61465 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_form-item-group.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_form-item-group.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/text" + .form-item-group .form-item-group + & margin-top: .75rem @@ -9,7 +11,7 @@ margin-top: .25rem .form-item-group__title - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) font-weight: 700 .form-item-group__help diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-item.sass b/app/javascript/stylesheets/shared/blocks/form/_form-item.sass index ccf507c0e0b..5bbfe1c7eda 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_form-item.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_form-item.sass @@ -1,3 +1,10 @@ +@use "../../../config/mixins/border-radius" +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/font-awsome" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" + .form-item &:not(:last-child) margin-bottom: 1.75rem @@ -32,7 +39,7 @@ &.is-centered justify-content: center &.is-inline-md-up - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex align-items: center .a-form-label @@ -60,15 +67,15 @@ margin-top: .75rem .form-item__one-checkbox - +text-block(.875rem) + +text.text-block(.875rem) cursor: pointer .form-item__pp p - +text-block(.8125rem 1.8) + +text.text-block(.8125rem 1.8) margin-bottom: 1em h2 - +text-block(.8125rem 1.8) + +text.text-block(.8125rem 1.8) margin-bottom: .4em font-weight: 700 ul @@ -76,7 +83,7 @@ list-style: disc outside margin-left: 1.5rem li - +text-block(.8125rem 1.8) + +text.text-block(.8125rem 1.8) margin-bottom: .4em *:last-child margin-bottom: 0 @@ -85,15 +92,15 @@ position: relative &::before content: '@' - +fa(far '\f1fa') - +text-block(1rem 1) + +font-awsome.fa(far '\f1fa') + +text.text-block(1rem 1) display: flex align-items: center justify-content: center - +size(2rem 100%) - +position(absolute, left 0, top 0) + +size.size(2rem 100%) + +position.position(absolute, left 0, top 0) background-color: var(--background) - +border-radius(left, .25rem) + +border-radius.border-radius(left, .25rem) border: solid 1px #c1c5b9 input padding-left: 2.5rem @@ -127,9 +134,9 @@ font-weight: 400 .form-item__add-times - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-top: -.125rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-top: -1.25rem .form-item__add-choice diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-link-block.sass b/app/javascript/stylesheets/shared/blocks/form/_form-link-block.sass index 06b34062022..d75fa6e0a26 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_form-link-block.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_form-link-block.sass @@ -1,5 +1,7 @@ +@use "../../../config/mixins/text" + .form-link-block__link - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) display: block overflow: hidden text-overflow: ellipsis diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-notice.sass b/app/javascript/stylesheets/shared/blocks/form/_form-notice.sass index a1cc9b09174..e83885f7082 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_form-notice.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_form-notice.sass @@ -1,7 +1,9 @@ +@use "../../../config/mixins/break-points" + .form-notice &:not(:first-child) margin-top: 1em - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-bottom: 2rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-bottom: 1.5rem diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-selects.sass b/app/javascript/stylesheets/shared/blocks/form/_form-selects.sass index c3b5902e09f..447954aa8d0 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_form-selects.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_form-selects.sass @@ -1,35 +1,38 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/position" + .form-selects display: flex .form-selects__item display: flex align-items: center - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) flex-basis: 50% position: relative &:first-child - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-right: .375rem &:last-child - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-left: .375rem &.has-colon::after content: ":" display: flex align-items: center justify-content: center - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding-inline: .5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: .75rem - +position(absolute, right -.375rem, top 0, bottom 0) + +position.position(absolute, right -.375rem, top 0, bottom 0) &.has-slash::after content: "/" display: flex align-items: center justify-content: center - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding-inline: .5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) width: .75rem - +position(absolute, right -.375rem, top 0, bottom 0) + +position.position(absolute, right -.375rem, top 0, bottom 0) diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-table.sass b/app/javascript/stylesheets/shared/blocks/form/_form-table.sass index e6bdfe0d3c9..e7105159fd0 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_form-table.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_form-table.sass @@ -1,3 +1,6 @@ +@use "../../../config/mixins/font-awsome" +@use "../../../config/mixins/size" + .form-table overflow: auto max-width: 100% @@ -27,7 +30,7 @@ pointer-events: none &::after content: "" - +size(.875rem) + +size.size(.875rem) border: solid 1px var(--border-shade) border-radius: .25rem &:has(:checked) @@ -36,7 +39,7 @@ box-shadow: 0 0 0 1px var(--input-selected-border) inset label::after border: none - +fa(fas '\f00c') + +font-awsome.fa(fas '\f00c') color: var(--main) &.is-sticky thead th diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-tabs-item.sass b/app/javascript/stylesheets/shared/blocks/form/_form-tabs-item.sass index 9edc96056d3..5a02cbbc3b7 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_form-tabs-item.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_form-tabs-item.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/text" + .form-tabs-item__markdown height: 100% display: none @@ -10,5 +12,5 @@ .form-tabs-item__preview background-color: var(--base) - +text-block(.875rem 1.8) + +text.text-block(.875rem 1.8) min-height: 9rem diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-tabs.sass b/app/javascript/stylesheets/shared/blocks/form/_form-tabs.sass index 2e3c67dced3..8033b050894 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_form-tabs.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_form-tabs.sass @@ -1,3 +1,6 @@ +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .form-tabs display: flex border-bottom: solid 1px var(--border) @@ -5,7 +8,7 @@ .form-tabs__tab width: 5.5rem padding-block: .75rem 1rem - +text-block(.8125rem 1, flex) + +text.text-block(.8125rem 1, flex) display: flex white-space: nowrap color: var(--muted-text) @@ -25,5 +28,5 @@ content: '' display: block height: .375rem - +position(absolute, left 0, bottom 0, right 0) + +position.position(absolute, left 0, bottom 0, right 0) background-color: var(--warning) diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-textarea.sass b/app/javascript/stylesheets/shared/blocks/form/_form-textarea.sass index 78ef963c79c..07dbc8b6b46 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_form-textarea.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_form-textarea.sass @@ -1,15 +1,21 @@ +@use "../../../config/mixins/border-radius" +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/margin-padding" +@use "../../../config/mixins/position" +@use "../../../config/mixins/text" + .form-textarea - +position(relative) + +position.position(relative) textarea.a-text-input padding-bottom: 3rem -+media-breakpoint-down(md) ++break-points.media-breakpoint-down(md) .form-textarea__bottom-note display: none -+media-breakpoint-up(lg) ++break-points.media-breakpoint-up(lg) .form-textarea__bottom-note - +text-block(.75rem 1.4) + +text.text-block(.75rem 1.4) text-align: center .form-textarea__footer @@ -18,14 +24,14 @@ gap: 1rem align-items: center background-color: var(--background) - +position(absolute, left 1px, bottom 1px, right 1px) - +border-radius(bottom, 3px) - +padding(horizontal, .5rem) + +position.position(absolute, left 1px, bottom 1px, right 1px) + +border-radius.border-radius(bottom, 3px) + +margin-padding.padding(horizontal, .5rem) border-top: solid 1px var(--border-shade) .form-textarea__bottom-note - +media-breakpoint-down(md) + +break-points.media-breakpoint-down(md) display: none - +media-breakpoint-up(lg) - +text-block(.75rem 1.4) + +break-points.media-breakpoint-up(lg) + +text.text-block(.75rem 1.4) text-align: center diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-times.sass b/app/javascript/stylesheets/shared/blocks/form/_form-times.sass index 20e24f59520..941f9925ffe 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_form-times.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_form-times.sass @@ -1,23 +1,26 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .form-times - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex align-items: flex-end - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: block .form-times__inner margin-bottom: 1rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex align-items: flex-end .form-times__items display: flex - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) gap: 1rem .form-times__action - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-top: .75rem display: flex justify-content: flex-end @@ -27,13 +30,13 @@ .form-times__time display: flex flex-direction: column - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) margin-right: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-right: 0 flex-basis: 50% .form-times__time-label - +text-block(.75rem 1.4) + +text.text-block(.75rem 1.4) margin-bottom: .5em display: block diff --git a/app/javascript/stylesheets/shared/blocks/form/_form.sass b/app/javascript/stylesheets/shared/blocks/form/_form.sass index bade8628c3e..ffad235bdb9 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_form.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_form.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/text" + .form margin-inline: auto .a-card + & @@ -12,7 +14,7 @@ margin-top: 1.75rem .form__items-title - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) margin-bottom: 1.5rem font-weight: 700 color: var(--reversal-text) diff --git a/app/javascript/stylesheets/shared/blocks/form/_important-message.sass b/app/javascript/stylesheets/shared/blocks/form/_important-message.sass index 65e9a35289a..d317e56b3fc 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_important-message.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_important-message.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/text" + .important-message border: solid 2px var(--danger) border-radius: .25rem @@ -11,7 +13,7 @@ background-color: var(--danger-tint) .important-message__title - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) font-weight: 800 color: var(--danger-text) diff --git a/app/javascript/stylesheets/shared/blocks/form/_linear-scale.sass b/app/javascript/stylesheets/shared/blocks/form/_linear-scale.sass index 5a8e17a64f1..086cf965fd4 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_linear-scale.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_linear-scale.sass @@ -1,3 +1,8 @@ +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" +@use "../../../config/variables/colors" + $radio-size: .875rem .linear-scale @@ -5,7 +10,7 @@ $radio-size: .875rem align-items: center .linear-scale__label - +text-block(.8125rem 1.4) + +text.text-block(.8125rem 1.4) &:first-child margin-right: 1rem &:last-child @@ -21,10 +26,10 @@ $radio-size: .875rem .linear-scale__point display: flex flex-direction: column - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) display: block color: var(--semi-muted-text) - +position(relative) + +position.position(relative) cursor: pointer padding-bottom: $radio-size width: 2.25rem @@ -32,21 +37,21 @@ $radio-size: .875rem &::before content: "" text-decoration: none - +size($radio-size) + +size.size($radio-size) border: solid 1px var(--input-border) display: block - +position(absolute, left 50%, bottom 0) + +position.position(absolute, left 50%, bottom 0) transform: translate(-50%, 0) background-color: var(--base) border-radius: 50% - +text-block(.75rem 1) + +text.text-block(.75rem 1) display: flex color: var(--reversal-text) align-items: center justify-content: center transition: all .2s ease-out &:hover::before - background-color: rgba($primary, .4) + background-color: rgba(colors.$primary, .4) border-color: var(--primary) &:hover::after text-decoration: none diff --git a/app/javascript/stylesheets/shared/blocks/form/_many-check-boxes.sass b/app/javascript/stylesheets/shared/blocks/form/_many-check-boxes.sass index 7bbf106147e..69ce4b67e39 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_many-check-boxes.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_many-check-boxes.sass @@ -1,3 +1,5 @@ +@use "../../../config/mixins/text" + .many-check-boxes max-height: 16rem overflow-y: auto @@ -6,7 +8,7 @@ border-radius: .25rem .many-check-boxes__item-label - +text-block(.8125rem 1.4) + +text.text-block(.8125rem 1.4) display: block padding: .5rem border-bottom: solid 1px #ccc diff --git a/app/javascript/stylesheets/shared/blocks/form/_markdown-form.sass b/app/javascript/stylesheets/shared/blocks/form/_markdown-form.sass index 4b8d7124e06..925c09b4828 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_markdown-form.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_markdown-form.sass @@ -1,15 +1,18 @@ +@use "../../../config/mixins/break-points" +@use "../../../config/mixins/text" + .markdown-form__text-area &.a-text-input min-height: 30rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) margin-bottom: 1rem .markdown-form__preview background-color: var(--base) - +text-block(.875rem 1.8) + +text.text-block(.875rem 1.8) border-radius: .25rem min-height: 30rem - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding: 1rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding: .5rem diff --git a/app/javascript/stylesheets/shared/blocks/form/_radios.sass b/app/javascript/stylesheets/shared/blocks/form/_radios.sass index f4925eae8ae..4d8f80cda40 100644 --- a/app/javascript/stylesheets/shared/blocks/form/_radios.sass +++ b/app/javascript/stylesheets/shared/blocks/form/_radios.sass @@ -1,3 +1,10 @@ +@use "../../../config/mixins/link" +@use "../../../config/mixins/position" +@use "../../../config/mixins/size" +@use "../../../config/mixins/text" +@use "../../../config/variables/colors" +@use "linear-scale" + $radio-size: .875rem .radios__items @@ -8,32 +15,32 @@ $radio-size: .875rem .radios__item label - +text-block(.875rem 1.4) + +text.text-block(.875rem 1.4) display: block color: var(--semi-muted-text) - +position(relative) - +hover-link + +position.position(relative) + +link.hover-link cursor: pointer - padding-left: calc(#{$radio-size} * 1.4) + padding-left: calc(#{linear-scale.$radio-size} * 1.4) &.is-sm font-size: .8125rem &::before content: "" text-decoration: none - +size($radio-size) + +size.size(linear-scale.$radio-size) border: solid 1px var(--input-border) display: block - +position(absolute, left 0, top 50%) + +position.position(absolute, left 0, top 50%) transform: translate(0, -50%) background-color: var(--base) border-radius: 50% - +text-block(.75rem 1) + +text.text-block(.75rem 1) color: var(--reversal-text) align-items: center justify-content: center transition: all .2s ease-out label:hover::before - background-color: rgba($primary, .4) + background-color: rgba(colors.$primary, .4) border-color: var(--primary) label:hover::after text-decoration: none diff --git a/app/javascript/stylesheets/shared/helpers/_state.sass b/app/javascript/stylesheets/shared/helpers/_state.sass index b7706072605..1073db3d52d 100644 --- a/app/javascript/stylesheets/shared/helpers/_state.sass +++ b/app/javascript/stylesheets/shared/helpers/_state.sass @@ -1,3 +1,5 @@ +@use "../../config/mixins/break-points" + html *[hidden], @@ -6,23 +8,23 @@ html body .is-hidden-lg-up - +media-breakpoint-up(lg) + +break-points.media-breakpoint-up(lg) display: none .is-hidden-lg-down - +media-breakpoint-down(lg) + +break-points.media-breakpoint-down(lg) display: none .is-hidden-md-up - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: none !important .is-hidden-md-down - +media-breakpoint-down(md) + +break-points.media-breakpoint-down(md) display: none .is-hidden-sm-down - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) display: none .is-only-mentor diff --git a/app/javascript/stylesheets/shared/layouts/_container.sass b/app/javascript/stylesheets/shared/layouts/_container.sass index 40d4027a56e..1ca8a05e442 100644 --- a/app/javascript/stylesheets/shared/layouts/_container.sass +++ b/app/javascript/stylesheets/shared/layouts/_container.sass @@ -1,10 +1,12 @@ +@use "../../config/mixins/break-points" + .container width: 100% max-width: 100% margin-inline: auto - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding-inline: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-inline: 1rem &.is-xxxl max-width: 108rem diff --git a/app/javascript/stylesheets/shared/layouts/_l-container.sass b/app/javascript/stylesheets/shared/layouts/_l-container.sass index cfc3dc2824d..cf1631b2821 100644 --- a/app/javascript/stylesheets/shared/layouts/_l-container.sass +++ b/app/javascript/stylesheets/shared/layouts/_l-container.sass @@ -1,10 +1,12 @@ +@use "../../config/mixins/break-points" + .l-container width: 100% max-width: 100vw margin-inline: auto - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) padding-inline: 1.5rem - +media-breakpoint-down(sm) + +break-points.media-breakpoint-down(sm) padding-inline: 1rem &.is-xxxl max-width: 108rem diff --git a/app/javascript/stylesheets/shared/layouts/_wrapper.sass b/app/javascript/stylesheets/shared/layouts/_wrapper.sass index 08630be5f3c..4efc77af482 100644 --- a/app/javascript/stylesheets/shared/layouts/_wrapper.sass +++ b/app/javascript/stylesheets/shared/layouts/_wrapper.sass @@ -1,9 +1,11 @@ +@use "../../config/mixins/break-points" + .wrapper min-height: 100vh scroll-behavior: smooth overflow-y: visible height: auto - +media-breakpoint-up(md) + +break-points.media-breakpoint-up(md) display: flex flex-direction: column diff --git a/app/javascript/stylesheets/shared/test/_test.sass b/app/javascript/stylesheets/shared/test/_test.sass index fc91f00358b..b9c1e54d465 100644 --- a/app/javascript/stylesheets/shared/test/_test.sass +++ b/app/javascript/stylesheets/shared/test/_test.sass @@ -1,8 +1,10 @@ +@use "../../config/mixins/position" + html body.is-test .wrapper height: auto .test-fixed-bottom - +position(fixed, right 10rem, bottom 10rem) + +position.position(fixed, right 10rem, bottom 10rem) .test-inline-block display: inline-block .test-block diff --git a/app/javascript/survey_result_chart.js b/app/javascript/survey_result_chart.js index 9d04c9af6ff..7b460282078 100644 --- a/app/javascript/survey_result_chart.js +++ b/app/javascript/survey_result_chart.js @@ -320,7 +320,7 @@ function initLinearScaleCharts() { } }, annotation: { - annotations: annotations + annotations } } } diff --git a/app/javascript/textarea-autocomplte-emoji.js b/app/javascript/textarea-autocomplte-emoji.js index 88b502ed9c9..fece13d1d3c 100644 --- a/app/javascript/textarea-autocomplte-emoji.js +++ b/app/javascript/textarea-autocomplte-emoji.js @@ -50,7 +50,7 @@ export default class { _fetchValues() { this.values = Object.keys(emojis) .map((key) => { - return { key: key, value: emojis[key] } + return { key, value: emojis[key] } }) .concat(this.userValues) } diff --git a/app/javascript/textarea-initializer.js b/app/javascript/textarea-initializer.js index d42348cba10..8faa8ca6f71 100644 --- a/app/javascript/textarea-initializer.js +++ b/app/javascript/textarea-initializer.js @@ -47,7 +47,7 @@ export default class { mention.values.unshift({ login_name: 'mentor', name: 'メンター' }) const collection = [emoji.params(), mention.params()] const tribute = new Tribute({ - collection: collection + collection }) textareas.forEach((textarea) => { diff --git a/app/javascript/vanillaToast.js b/app/javascript/vanillaToast.js index 231f4049368..baed290a1df 100644 --- a/app/javascript/vanillaToast.js +++ b/app/javascript/vanillaToast.js @@ -2,7 +2,7 @@ import Swal from 'sweetalert2' export function toast(title, status = 'success') { Swal.fire({ - title: title, + title, toast: true, position: 'top-end', showConfirmButton: false, diff --git a/app/jobs/ai_answer_create_job.rb b/app/jobs/ai_answer_create_job.rb index 5c0bc6c6a66..5a7bc342dcf 100644 --- a/app/jobs/ai_answer_create_job.rb +++ b/app/jobs/ai_answer_create_job.rb @@ -5,7 +5,7 @@ class AIAnswerCreateJob < ApplicationJob def perform(question_id:) question = Question.find(question_id) - token = Rails.application.secrets[:open_ai][:access_token] + token = Rails.application.config_for(:secrets)[:open_ai][:access_token] generator = AI::AnswerGenerator.new(open_ai_access_token: token) ai_answer = generator.call("#{question.body}\n#{question.description}") question.update(ai_answer:) diff --git a/app/mailers/notification_mailer.rb b/app/mailers/notification_mailer.rb index 4d09a880843..ba2c827120d 100644 --- a/app/mailers/notification_mailer.rb +++ b/app/mailers/notification_mailer.rb @@ -19,6 +19,7 @@ class NotificationMailer < ApplicationMailer @event = params[:event] @page = params[:page] @regular_event = params[:regular_event] + @notification = params[:notification] end # required params: mentionable, receiver @@ -49,7 +50,7 @@ def retired # required params: report, receiver def trainee_report @user = @receiver - @notification = @user.notifications.find_by(link: "/reports/#{@report.id}") + @notification ||= @user.notifications.find_by(link: "/reports/#{@report.id}") subject = "[FBC] #{@report.user.login_name}さんが日報【 #{@report.title} 】を書きました!" mail to: @user.email, subject: end diff --git a/app/models/announcement.rb b/app/models/announcement.rb index 7c5cb41b154..65bfe963979 100644 --- a/app/models/announcement.rb +++ b/app/models/announcement.rb @@ -9,11 +9,11 @@ class Announcement < ApplicationRecord include Watchable include Bookmarkable - enum target: { + enum :target, { all: 0, students: 1, job_seekers: 2 - }, _prefix: true + }, prefix: true has_many :watches, as: :watchable, dependent: :destroy has_many :footprints, as: :footprintable, dependent: :destroy @@ -28,6 +28,14 @@ class Announcement < ApplicationRecord scope :wip, -> { where(wip: true) } + def self.ransackable_attributes(_auth_object = nil) + %w[title description target wip created_at updated_at user_id] + end + + def self.ransackable_associations(_auth_object = nil) + %w[user comments reactions watches] + end + def self.copy_announcement(announcement_id) original = find(announcement_id) new(title: original.title, description: original.description, target: original.target) diff --git a/app/models/answer.rb b/app/models/answer.rb index d2cf0ed0c79..fede10e1dfe 100644 --- a/app/models/answer.rb +++ b/app/models/answer.rb @@ -16,6 +16,14 @@ class Answer < ApplicationRecord mentionable_as :description + def self.ransackable_attributes(_auth_object = nil) + %w[description created_at updated_at user_id question_id] + end + + def self.ransackable_associations(_auth_object = nil) + %w[user question reactions] + end + def receiver question.user end diff --git a/app/models/area.rb b/app/models/area.rb index ab16e2caca9..cc0715bf7be 100644 --- a/app/models/area.rb +++ b/app/models/area.rb @@ -79,7 +79,7 @@ def translate(country_subdivision_pairs) country_subdivision_pairs.map do |country_code, subdivision_code| country = ISO3166::Country[country_code] subdivision = country.subdivisions[subdivision_code] - [country.translations['ja'], subdivision.translations['ja']] + [country.translations[:ja], subdivision.translations[:ja]] end end diff --git a/app/models/article.rb b/app/models/article.rb index 47c3e2d4dc0..b83960e3941 100644 --- a/app/models/article.rb +++ b/app/models/article.rb @@ -1,7 +1,7 @@ # frozen_string_literal: true class Article < ApplicationRecord - enum thumbnail_type: { + enum :thumbnail_type, { prepared_thumbnail: 0, ruby: 1, ruby_on_rails: 2, @@ -17,12 +17,12 @@ class Article < ApplicationRecord blue: 12 } - enum target: { + enum :target, { all: 0, students: 1, job_seekers: 2, none: 3 - }, _prefix: true + }, prefix: true belongs_to :user alias sender user diff --git a/app/models/check.rb b/app/models/check.rb index 006cda209e7..97452f79aaa 100644 --- a/app/models/check.rb +++ b/app/models/check.rb @@ -3,8 +3,8 @@ class Check < ApplicationRecord belongs_to :user belongs_to :checkable, polymorphic: true - after_create CheckCallbacks.new - after_destroy CheckCallbacks.new + after_create_commit -> { CheckCallbacks.new.after_create(self) } + after_destroy_commit -> { CheckCallbacks.new.after_destroy(self) } alias sender user validates :user_id, uniqueness: { scope: %i[checkable_id checkable_type] } diff --git a/app/models/coding_test.rb b/app/models/coding_test.rb index 3212e0d1b8a..e11e462dd18 100644 --- a/app/models/coding_test.rb +++ b/app/models/coding_test.rb @@ -1,10 +1,10 @@ # frozen_string_literal: true class CodingTest < ApplicationRecord - enum language: { + enum :language, { ruby: 1, javascript: 2 - }, _prefix: true + }, prefix: true belongs_to :practice belongs_to :user diff --git a/app/models/comment.rb b/app/models/comment.rb index 24801f53f64..9e492a4afc5 100644 --- a/app/models/comment.rb +++ b/app/models/comment.rb @@ -20,6 +20,14 @@ class Comment < ApplicationRecord scope :without_private_comment, -> { where.not(commentable_type: %w[Talk Inquiry CorporateTrainingInquiry]) } + def self.ransackable_attributes(_auth_object = nil) + %w[description commentable_type commentable_id created_at updated_at user_id] + end + + def self.ransackable_associations(_auth_object = nil) + %w[user commentable reactions] + end + class << self def commented_users User.with_attached_avatar diff --git a/app/models/company.rb b/app/models/company.rb index 8b87133d09b..8701f59cfe8 100644 --- a/app/models/company.rb +++ b/app/models/company.rb @@ -19,4 +19,12 @@ def logo_url rescue ActiveStorage::FileNotFoundError image_url('/images/companies/logos/default.png') end + + def self.ransackable_attributes(_auth_object = nil) + %w[name description created_at updated_at] + end + + def self.ransackable_associations(_auth_object = nil) + %w[users] + end end diff --git a/app/models/correct_answer.rb b/app/models/correct_answer.rb index efb74c82e17..40b5a9f0725 100644 --- a/app/models/correct_answer.rb +++ b/app/models/correct_answer.rb @@ -2,6 +2,7 @@ class CorrectAnswer < Answer belongs_to :question + validates :question, uniqueness: true def search_label I18n.t('activerecord.search_labels.correct_answer') diff --git a/app/models/discord_profile.rb b/app/models/discord_profile.rb index e97cce77dc6..19173a2299d 100644 --- a/app/models/discord_profile.rb +++ b/app/models/discord_profile.rb @@ -3,6 +3,10 @@ class DiscordProfile < ApplicationRecord belongs_to :user + def self.ransackable_attributes(_auth_object = nil) + %w[account_name] + end + validates :times_url, format: { allow_blank: true, diff --git a/app/models/event.rb b/app/models/event.rb index 5de529bf4ba..5c85b294782 100644 --- a/app/models/event.rb +++ b/app/models/event.rb @@ -48,6 +48,14 @@ class Event < ApplicationRecord # rubocop:todo Metrics/ClassLength scope :not_ended, -> { where('end_at > ?', Time.current) } scope :scheduled_on_without_ended, ->(date) { scheduled_on(date).not_ended } + def self.ransackable_attributes(_auth_object = nil) + %w[title description location capacity start_at end_at open_start_at open_end_at wip created_at updated_at user_id job_hunting] + end + + def self.ransackable_associations(_auth_object = nil) + %w[user participations users comments reactions watches] + end + def opening? Time.current.between?(open_start_at, open_end_at) end diff --git a/app/models/graduation_notifier.rb b/app/models/graduation_notifier.rb index 91ff553a82e..42ad4617955 100644 --- a/app/models/graduation_notifier.rb +++ b/app/models/graduation_notifier.rb @@ -9,12 +9,12 @@ def call(_name, _started, _finished, _unique_id, payload) DiscordNotifier.graduated( sender: user, - webhook_url: Rails.application.secrets[:webhook][:admin] + webhook_url: Rails.application.config_for(:secrets)[:webhook][:admin] ).notify_now DiscordNotifier.graduated( sender: user, - webhook_url: Rails.application.secrets[:webhook][:mentor] + webhook_url: Rails.application.config_for(:secrets)[:webhook][:mentor] ).notify_now end end diff --git a/app/models/learning.rb b/app/models/learning.rb index 6f75ba3201c..a15f1e323cb 100644 --- a/app/models/learning.rb +++ b/app/models/learning.rb @@ -1,7 +1,7 @@ # frozen_string_literal: true class Learning < ApplicationRecord - enum status: { unstarted: 0, started: 1, submitted: 2, complete: 3 } + enum :status, { unstarted: 0, started: 1, submitted: 2, complete: 3 } belongs_to :user, touch: true belongs_to :practice diff --git a/app/models/movie.rb b/app/models/movie.rb index e0e21ff8aab..0d2e94808be 100644 --- a/app/models/movie.rb +++ b/app/models/movie.rb @@ -21,4 +21,12 @@ class Movie < ApplicationRecord scope :wip, -> { where(wip: true) } scope :by_tag, ->(tag) { tag.present? ? tagged_with(tag) : all } + + def self.ransackable_attributes(_auth_object = nil) + %w[title description wip created_at updated_at user_id] + end + + def self.ransackable_associations(_auth_object = nil) + %w[user practices comments reactions watches bookmarks] + end end diff --git a/app/models/notification.rb b/app/models/notification.rb index aec03e5694c..d9e933e4a39 100644 --- a/app/models/notification.rb +++ b/app/models/notification.rb @@ -15,7 +15,7 @@ class Notification < ApplicationRecord paginates_per 20 - enum kind: { + enum :kind, { came_comment: 0, checked: 1, mentioned: 2, diff --git a/app/models/notification_facade.rb b/app/models/notification_facade.rb index 5a39828fad5..a3107d4f261 100644 --- a/app/models/notification_facade.rb +++ b/app/models/notification_facade.rb @@ -2,13 +2,15 @@ class NotificationFacade def self.trainee_report(report, receiver) - ActivityNotifier.with(report:, receiver:).trainee_report.notify_now + notification = ActivityNotifier.with(report:, receiver:).trainee_report.notify_now return unless receiver.mail_notification? && !receiver.retired? - NotificationMailer.with( - report:, - receiver: - ).trainee_report.deliver_later(wait: 5) + mailer = NotificationMailer.with(report:, receiver:, notification:).trainee_report + if Rails.env.test? + mailer.deliver_now + else + mailer.deliver_later(wait: 5) + end end def self.coming_soon_regular_events(today_events, tomorrow_events) diff --git a/app/models/page.rb b/app/models/page.rb index 14fe492e1f9..c1b12bb5ae9 100644 --- a/app/models/page.rb +++ b/app/models/page.rb @@ -24,6 +24,14 @@ class Page < ApplicationRecord before_validation :empty_slug_to_nil + def self.ransackable_attributes(_auth_object = nil) + %w[title body slug wip created_at updated_at user_id last_updated_user_id practice_id] + end + + def self.ransackable_associations(_auth_object = nil) + %w[user practice last_updated_user comments reactions watches bookmarks] + end + def self.search_by_slug_or_id!(params) attr_name = params.start_with?(/[a-z]/) ? :slug : :id Page.find_by!(attr_name => params) diff --git a/app/models/practice.rb b/app/models/practice.rb index 258483d840b..749c27e3304 100644 --- a/app/models/practice.rb +++ b/app/models/practice.rb @@ -76,6 +76,14 @@ class Practice < ApplicationRecord # rubocop:todo Metrics/ClassLength .order(:id) } + def self.ransackable_attributes(_auth_object = nil) + %w[title description goal created_at updated_at last_updated_user_id submission] + end + + def self.ransackable_associations(_auth_object = nil) + %w[learnings categories products questions pages movies books last_updated_user] + end + class << self def save_learning_minute_statistics Practice.all.find_each do |practice| diff --git a/app/models/product.rb b/app/models/product.rb index 8512b24c529..6a889aecf89 100644 --- a/app/models/product.rb +++ b/app/models/product.rb @@ -59,6 +59,14 @@ class Product < ApplicationRecord # rubocop:todo Metrics/ClassLength scope :order_for_self_assigned_list, -> { order('commented_at asc nulls first, published_at asc') } scope :unhibernated_user_products, -> { joins(:user).where(user: { hibernated_at: nil }) } + def self.ransackable_attributes(_auth_object = nil) + %w[body wip published_at commented_at created_at updated_at user_id practice_id checker_id] + end + + def self.ransackable_associations(_auth_object = nil) + %w[user practice checker comments reactions checks bookmarks] + end + def self.add_latest_commented_at Product.all.includes(:comments).find_each do |product| next if product.comments.blank? @@ -96,7 +104,7 @@ def change_learning_status(status) user_id: user.id, practice_id: practice.id ) - learning.update(status:) + learning.update!(status:) end # nilの場合あり diff --git a/app/models/question.rb b/app/models/question.rb index 61765b76d65..fb55bf053a2 100644 --- a/app/models/question.rb +++ b/app/models/question.rb @@ -49,6 +49,14 @@ class Question < ApplicationRecord mentionable_as :description + def self.ransackable_attributes(_auth_object = nil) + %w[title description wip published_at created_at updated_at user_id practice_id] + end + + def self.ransackable_associations(_auth_object = nil) + %w[user practice correct_answer answers reactions watches bookmarks] + end + class << self def notify_certain_period_passed_after_last_answer return if Question.not_solved_and_certain_period_has_passed.blank? diff --git a/app/models/reaction.rb b/app/models/reaction.rb index 636a41733ca..41cf17f2144 100644 --- a/app/models/reaction.rb +++ b/app/models/reaction.rb @@ -1,7 +1,7 @@ # frozen_string_literal: true class Reaction < ApplicationRecord - enum kind: { + enum :kind, { thumbsup: 0, thumbsdown: 1, smile: 2, diff --git a/app/models/regular_event.rb b/app/models/regular_event.rb index 66a81fcb9c7..a7cc95eb0df 100644 --- a/app/models/regular_event.rb +++ b/app/models/regular_event.rb @@ -10,7 +10,9 @@ class RegularEvent < ApplicationRecord # rubocop:disable Metrics/ClassLength ['第1', 1], ['第2', 2], ['第3', 3], - ['第4', 4] + ['第4', 4], + ['奇数週', 5], + ['偶数週', 6] ].freeze DAY_OF_THE_WEEK_LIST = [ @@ -30,13 +32,13 @@ class RegularEvent < ApplicationRecord # rubocop:disable Metrics/ClassLength include Watchable include Searchable - enum category: { + enum :category, { reading_circle: 0, chat: 1, question: 2, meeting: 3, others: 4 - }, _prefix: true + }, prefix: true validates :title, presence: true, markdown_prohibited: true validates :user_ids, presence: true @@ -56,7 +58,7 @@ class RegularEvent < ApplicationRecord # rubocop:disable Metrics/ClassLength scope :holding, -> { where(finished: false) } scope :participated_by, ->(user) { where(id: all.filter { |e| e.participated_by?(user) }.map(&:id)) } - scope :organizer_event, ->(user) { where(id: user.organizers.map(&:regular_event_id)) } + scope :organizer_event, ->(user) { joins(:organizers).where(organizers: { user_id: user.id }) } scope :scheduled_on, ->(date) { holding.filter { |event| event.scheduled_on?(date) } } scope :scheduled_on_without_ended, ->(date) { holding.filter { |event| event.scheduled_on?(date) && !event.ended?(date) } } @@ -75,6 +77,14 @@ class RegularEvent < ApplicationRecord # rubocop:disable Metrics/ClassLength columns_for_keyword_search :title, :description + def self.ransackable_attributes(_auth_object = nil) + %w[title description category start_at end_at finished hold_national_holiday created_at updated_at user_id] + end + + def self.ransackable_associations(_auth_object = nil) + %w[user organizers users regular_event_repeat_rules participants comments reactions watches] + end + def scheduled_on?(date) all_scheduled_dates.include?(date) end @@ -92,7 +102,7 @@ def next_event_date end def organizers - users.with_attached_avatar.order('organizers.created_at') + users.preload(avatar_attachment: :blob).order('organizers.created_at') end def cancel_participation(user) @@ -165,8 +175,13 @@ def upcoming_scheduled_dates def date_match_the_rules?(date, rules) rules.any? do |rule| - if rule.frequency.zero? + case rule.frequency + when 0 rule.day_of_the_week == date.wday + when 5 + date.cweek.odd? && rule.day_of_the_week == date.wday + when 6 + date.cweek.even? && rule.day_of_the_week == date.wday else rule.frequency == nth_wday(date) && rule.day_of_the_week == date.wday end diff --git a/app/models/report.rb b/app/models/report.rb index 327b2343c84..4e7c2f0a2a2 100644 --- a/app/models/report.rb +++ b/app/models/report.rb @@ -12,7 +12,7 @@ class Report < ApplicationRecord # rubocop:todo Metrics/ClassLength include Bookmarkable include Taskable - enum emotion: { + enum :emotion, { negative: 1, neutral: 0, positive: 2 @@ -61,6 +61,14 @@ class Report < ApplicationRecord # rubocop:todo Metrics/ClassLength scope :user, ->(user) { where(user_id: user.id) } + def self.ransackable_attributes(_auth_object = nil) + %w[title description reported_on emotion wip created_at updated_at user_id] + end + + def self.ransackable_associations(_auth_object = nil) + %w[user practices comments checks reactions bookmarks] + end + class << self def faces @faces ||= emotions.keys diff --git a/app/models/search_user.rb b/app/models/search_user.rb index e3dbd165c07..92e72dca1de 100644 --- a/app/models/search_user.rb +++ b/app/models/search_user.rb @@ -10,8 +10,8 @@ def initialize(word:, users: nil, target: nil, require_retire_user: false) def search validated_search_word = validate_search_word - # 検索ワードが短すぎる場合はユーザー一覧をそのまま返す - return @users || User.all if validated_search_word.nil? + # 検索ワードが無効な場合は空の結果を返す + return User.none if validated_search_word.nil? # Searcherを使ってユーザーを検索 query_builder = Searcher::QueryBuilder.new(validated_search_word) @@ -34,7 +34,7 @@ def search end def validate_search_word - return '' if @word.nil? + return nil if @word.nil? stripped_word = @word.strip return nil if stripped_word.blank? diff --git a/app/models/study_streak.rb b/app/models/study_streak.rb new file mode 100644 index 00000000000..c59c2b42065 --- /dev/null +++ b/app/models/study_streak.rb @@ -0,0 +1,44 @@ +# frozen_string_literal: true + +class StudyStreak + attr_reader :current_start_on, :current_end_on, :current_days, :longest_start_on, :longest_end_on, :longest_days + + def initialize(reports, include_wip: false) + @include_wip = include_wip + @study_dates = report_dates(reports) + + current_period = streak_periods.last + @current_start_on = current_period&.[](:start_on) + @current_end_on = current_period&.[](:end_on) + @current_days = current_period&.[](:days) + + longest_period = find_longest_period + @longest_start_on = longest_period&.[](:start_on) + @longest_end_on = longest_period&.[](:end_on) + @longest_days = longest_period&.[](:days) + end + + private + + attr_reader :study_dates, :include_wip + + def report_dates(reports) + reports = reports.not_wip unless include_wip + reports.order(reported_on: :asc).pluck(:reported_on) + end + + def streak_periods + @streak_periods ||= begin + return [] if study_dates.empty? + + study_dates.chunk_while { |a, b| b == a.next_day }.map do |chunk| + { start_on: chunk.first, end_on: chunk.last, days: chunk.size } + end + end + end + + def find_longest_period + # days が最大、同点ならより新しい end_on を優先 + streak_periods.max_by { |p| [p[:days], p[:end_on]] } + end +end diff --git a/app/models/subscription.rb b/app/models/subscription.rb index 7beb89b9b25..58d8506f6e1 100644 --- a/app/models/subscription.rb +++ b/app/models/subscription.rb @@ -17,7 +17,7 @@ def create(customer_id, idempotency_key = SecureRandom.uuid, trial: 3) customer: customer_id, items: [{ plan: Plan.standard_plan.id, - tax_rates: [Rails.application.secrets[:stripe][:tax_rate_id]] + tax_rates: [Rails.application.config_for(:secrets)[:stripe][:tax_rate_id]] }] } options[:trial_end] = trial.days.since.to_i if trial.positive? diff --git a/app/models/survey_question.rb b/app/models/survey_question.rb index cb876c6cf4b..40a300a045d 100644 --- a/app/models/survey_question.rb +++ b/app/models/survey_question.rb @@ -15,13 +15,13 @@ class SurveyQuestion < ApplicationRecord has_many :surveys, through: :survey_question_listings has_many :survey_question_answers, dependent: :destroy - enum format: { + enum :format, { text_area: 0, text_field: 1, radio_button: 2, check_box: 3, linear_scale: 4 - }, _prefix: true + }, prefix: true validates :title, presence: true diff --git a/app/models/user.rb b/app/models/user.rb index d41057a6b59..7cf7eb62a57 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -38,38 +38,38 @@ class User < ApplicationRecord # rubocop:todo Metrics/ClassLength [I18n.t('invitation_role.mentor'), :mentor] ].freeze - enum job: { + enum :job, { student: 0, office_worker: 2, part_time_worker: 3, vacation: 4, unemployed: 5 - }, _prefix: true + }, prefix: true - enum os: { + enum :os, { mac: 0, mac_apple: 2, linux: 1, windows_wsl2: 3 - }, _prefix: true + }, prefix: true - enum editor: { + enum :editor, { vscode: 0, ruby_mine: 1, vim: 2, emacs: 3, other_editor: 99 - }, _prefix: true + }, prefix: true - enum satisfaction: { + enum :satisfaction, { excellent: 0, good: 1, average: 2, poor: 3, very_poor: 4 - }, _prefix: true + }, prefix: true - enum referral_source: { + enum :referral_source, { search_engine: 0, referral: 1, event: 2, @@ -78,9 +78,9 @@ class User < ApplicationRecord # rubocop:todo Metrics/ClassLength blog: 5, web_ad: 6, other: 99 - }, _prefix: true + }, prefix: true - enum career_path: { + enum :career_path, { unset: 0, job_seeking: 1, employed_via_referral: 2, @@ -88,7 +88,7 @@ class User < ApplicationRecord # rubocop:todo Metrics/ClassLength employed_non_it: 4, internal_transfer_to_programmer: 5, not_employed: 6 - }, _prefix: true + }, prefix: true belongs_to :company, optional: true belongs_to :course @@ -717,7 +717,7 @@ def avatar_url else image_url DEFAULT_IMAGE_PATH end - rescue ActiveStorage::FileNotFoundError, ActiveStorage::InvariableError => e + rescue ActiveStorage::FileNotFoundError, ActiveStorage::Error => e log_avatar_error('avatar_url', e) image_url DEFAULT_IMAGE_PATH end @@ -728,7 +728,7 @@ def profile_image_url else image_url DEFAULT_IMAGE_PATH end - rescue ActiveStorage::FileNotFoundError, ActiveStorage::InvariableError => e + rescue ActiveStorage::FileNotFoundError, ActiveStorage::Error => e log_avatar_error('profile_image_url', e) image_url DEFAULT_IMAGE_PATH end @@ -856,13 +856,13 @@ def training_remaining_days def country_name country = ISO3166::Country[country_code] - country.translations[I18n.locale.to_s] + country.translations[I18n.locale.to_sym] end def subdivision_name country = ISO3166::Country[country_code] subdivision = country.subdivisions[subdivision_code] - subdivision.translations[I18n.locale.to_s] + subdivision.translations[I18n.locale.to_sym] end def subdivision_codes @@ -909,10 +909,10 @@ def clear_github_data def area if country_code == 'JP' subdivision = ISO3166::Country['JP'].subdivisions[subdivision_code] - subdivision ? subdivision.translations['ja'] : nil + subdivision ? subdivision.translations[:ja] : nil else country = ISO3166::Country[country_code] - country ? country.translations['ja'] : nil + country ? country.translations[:ja] : nil end end @@ -934,6 +934,29 @@ def search_title login_name end + def self.ransackable_attributes(_auth_object = nil) + %w[ + login_name name name_kana email twitter_account facebook_url + blog_url github_account description profile_text + created_at updated_at last_activity_at + company_id course_id graduated_on retired_on + admin mentor adviser trainee job_seeker hibernated_at + experiences career_path job os editor subdivision_code country_code + ] + end + + def self.ransackable_scopes(_auth_object = nil) + %i[job_seeking] + end + + def self.ransackable_associations(_auth_object = nil) + %w[company course discord_profile] + end + + def reports_with_learning_times + reports.joins(:learning_times).distinct.order(reported_on: :asc) + end + private def password_required? @@ -966,18 +989,21 @@ def attach_custom_avatar custom_key = "avatars/#{login_name}.#{AVATAR_FORMAT}" variant_avatar = avatar.variant(resize_to_fill: AVATAR_SIZE, autorot: true, saver: { strip: true, quality: 60 }, format: AVATAR_FORMAT).processed io = StringIO.new(variant_avatar.download) - custom_blob = ActiveStorage::Blob.create_or_find_by!(key: custom_key) do |blob| - blob.filename = "#{login_name}.#{AVATAR_FORMAT}" - blob.content_type = "image/#{AVATAR_FORMAT}" - blob.byte_size = io.size - blob.checksum = Digest::MD5.base64digest(io.read) - io.rewind - end - return if custom_blob.id_previously_was.present? - custom_blob.upload(io, identify: false) - avatar.attach(custom_blob) - rescue ActiveStorage::FileNotFoundError, ActiveStorage::InvariableError, Vips::Error => e + # Use ActiveStorage's create_and_upload! for proper checksum handling + custom_blob = ActiveStorage::Blob.find_by(key: custom_key) + + unless custom_blob + custom_blob = ActiveStorage::Blob.create_and_upload!( + io:, + filename: "#{login_name}.#{AVATAR_FORMAT}", + content_type: "image/#{AVATAR_FORMAT}", + key: custom_key, + identify: false + ) + avatar.attach(custom_blob) + end + rescue ActiveStorage::FileNotFoundError, ActiveStorage::Error => e log_avatar_error('attach_custom_avatar', e) end diff --git a/app/models/user_course_practice.rb b/app/models/user_course_practice.rb index e5d65308480..de9885c9987 100644 --- a/app/models/user_course_practice.rb +++ b/app/models/user_course_practice.rb @@ -106,10 +106,18 @@ def category_having_unstarted_practice end def filter_category_by_practice_ids(category, practice_ids) - copied_category = category.dup + filtered_practices = [] category.practices.each do |practice| - copied_category.practices << practice if practice_ids.delete(practice.id) + filtered_practices << practice if practice_ids.delete(practice.id) end - [copied_category, practice_ids] + # OpenStructを使用してカテゴリのようなオブジェクトを作成 + # category.dupとhas_many throughの<<の組み合わせはメモリリークを引き起こすため + category_proxy = OpenStruct.new( + id: category.id, + name: category.name, + practices: filtered_practices, + practice_ids: filtered_practices.map(&:id) + ) + [category_proxy, practice_ids] end end diff --git a/app/models/webhook.rb b/app/models/webhook.rb index c212c487044..b05f8d9237a 100644 --- a/app/models/webhook.rb +++ b/app/models/webhook.rb @@ -2,7 +2,7 @@ class Webhook class << self - SECREDT = Rails.application.secrets['stripe'][:endpoint_secret] + SECREDT = Rails.application.config_for(:secrets)['stripe'][:endpoint_secret] def construct_event( payload:, diff --git a/app/notifiers/discord_notifier.rb b/app/notifiers/discord_notifier.rb index a700de58f07..4c3cd1d9a3a 100644 --- a/app/notifiers/discord_notifier.rb +++ b/app/notifiers/discord_notifier.rb @@ -16,7 +16,7 @@ def graduated(params = {}) def hibernated(params = {}) params.merge!(@params) - webhook_url = params[:webhook_url] || Rails.application.secrets[:webhook][:admin] + webhook_url = params[:webhook_url] || Rails.application.config_for(:secrets)[:webhook][:admin] notification( body: "#{params[:sender].login_name}さんが休会しました。", @@ -27,7 +27,7 @@ def hibernated(params = {}) def announced(params = {}) params.merge!(@params) - webhook_url = params[:webhook_url] || Rails.application.secrets[:webhook][:all] + webhook_url = params[:webhook_url] || Rails.application.config_for(:secrets)[:webhook][:all] path = Rails.application.routes.url_helpers.polymorphic_path(params[:announce]) url = "https://bootcamp.fjord.jp#{path}" @@ -41,7 +41,7 @@ def announced(params = {}) def coming_soon_regular_events(params = {}) params.merge!(@params) - webhook_url = params[:webhook_url] || Rails.application.secrets[:webhook][:all] + webhook_url = params[:webhook_url] || Rails.application.config_for(:secrets)[:webhook][:all] today_events = params[:today_events].sort_by { |event| event.start_at.strftime('%H%M') } tomorrow_events = params[:tomorrow_events].sort_by { |event| event.start_at.strftime('%H%M') } today = Time.current @@ -85,7 +85,7 @@ def add_event_info(events, date_message, date) def invalid_user(params = {}) params.merge!(@params) - webhook_url = params[:webhook_url] || Rails.application.secrets[:webhook][:admin] + webhook_url = params[:webhook_url] || Rails.application.config_for(:secrets)[:webhook][:admin] body = params[:body].slice(0, 2000) # Discord API restriction notification( @@ -97,7 +97,7 @@ def invalid_user(params = {}) def payment_failed(params = {}) params.merge!(@params) - webhook_url = params[:webhook_url] || Rails.application.secrets[:webhook][:admin] + webhook_url = params[:webhook_url] || Rails.application.config_for(:secrets)[:webhook][:admin] notification( body: params[:body], @@ -108,7 +108,7 @@ def payment_failed(params = {}) def product_review_not_completed(params = {}) params.merge!(@params) - webhook_url = params[:webhook_url] || Rails.application.secrets[:webhook][:mentor] + webhook_url = params[:webhook_url] || Rails.application.config_for(:secrets)[:webhook][:mentor] comment = params[:comment] product_checker_name = comment.commentable.checker.discord_profile&.account_name @@ -131,7 +131,7 @@ def product_review_not_completed(params = {}) def first_report(params = {}) params.merge!(@params) - webhook_url = params[:webhook_url] || Rails.application.secrets[:webhook][:introduction] + webhook_url = params[:webhook_url] || Rails.application.config_for(:secrets)[:webhook][:introduction] report = params[:report] body = <<~TEXT.chomp 🎉 #{report.user.login_name}さんがはじめての日報を書きました! diff --git a/app/queries/user_notifications_query.rb b/app/queries/user_notifications_query.rb new file mode 100644 index 00000000000..6405236deb4 --- /dev/null +++ b/app/queries/user_notifications_query.rb @@ -0,0 +1,25 @@ +# frozen_string_literal: true + +class UserNotificationsQuery < Patterns::Query + queries Notification + + private + + def initialize(relation = Notification.all, user:, target: nil, status: nil) + super(relation) + @user = user + @target = target + @status = status + end + + def query + latest_notifications = @user.notifications + .by_target(@target) + .by_read_status(@status) + .latest_of_each_link + + Notification.with_avatar + .from(latest_notifications, :notifications) + .order(created_at: :desc) + end +end diff --git a/app/views/admin/home/test.html.erb b/app/views/admin/home/test.html.erb deleted file mode 100644 index ddaf53f19da..00000000000 --- a/app/views/admin/home/test.html.erb +++ /dev/null @@ -1,2 +0,0 @@ -

Test

-
diff --git a/app/views/application/_stripe.html.erb b/app/views/application/_stripe.html.erb index da3c2604ccb..831fc3d9bb9 100644 --- a/app/views/application/_stripe.html.erb +++ b/app/views/application/_stripe.html.erb @@ -1,3 +1,3 @@ diff --git a/app/views/books/_book.html.slim b/app/views/books/_book.html.slim index c30221ef3e4..79134698b8f 100644 --- a/app/views/books/_book.html.slim +++ b/app/views/books/_book.html.slim @@ -26,7 +26,7 @@ | #{book.title} .card-books-item__row p.card-books-item__price - | #{book.price.to_s(:delimited)}円(税込) + | #{number_with_delimiter(book.price)}円(税込) - if book.description .card-books-item__row .card-books-item__description diff --git a/app/views/courses/books/index.html.slim b/app/views/courses/books/index.html.slim index b2409aefa9d..540a0aef27d 100644 --- a/app/views/courses/books/index.html.slim +++ b/app/views/courses/books/index.html.slim @@ -55,7 +55,7 @@ header.page-header | #{book.title} .card-books-item__row p.card-books-item__price - | #{book.price.to_s(:delimited)}円(税込) + | #{number_with_delimiter(book.price)}円(税込) - if book.description.present? .card-books-item__row .card-books-item__description diff --git a/app/views/home/index.html.slim b/app/views/home/index.html.slim index fd7087a00ba..0ac8a3c9679 100644 --- a/app/views/home/index.html.slim +++ b/app/views/home/index.html.slim @@ -42,6 +42,8 @@ = render 'required_field', user: current_user - if current_user.after_graduation_hope? = render 'after_graduation_hope', user: current_user + - if current_user.total_learning_time.positive? + = render(StudyStreak::StudyStreakTrackerComponent.new(study_streak: @study_streak)) - if current_user.student_or_trainee? && cookies[:user_grass] != current_user.id.to_s = render(Grass::GrassComponent.new(user: current_user, times: @times, target_end_date: @target_end_date, path: :root_path)) - if current_user.github_account.present? diff --git a/app/views/home/test.html.slim b/app/views/home/test.html.slim deleted file mode 100644 index 22a9bfbd705..00000000000 --- a/app/views/home/test.html.slim +++ /dev/null @@ -1 +0,0 @@ -h1 TEST diff --git a/app/views/users/_form.html.slim b/app/views/users/_form.html.slim index 5139a144582..0d05c870533 100644 --- a/app/views/users/_form.html.slim +++ b/app/views/users/_form.html.slim @@ -112,7 +112,7 @@ = f.hidden_field :remove_diploma, value: '0', id: 'js-remove-pdf-flag' = f.label :diploma_file, class: 'a-form-label' .a-pdf-input - - if @user.diploma_file.attached? + - if @user.diploma_file.attached? && @user.diploma_file.persisted? = link_to url_for(@user.diploma_file), class: 'a-pdf-input__inner', id: 'js-pdf-file-link', target: '_blank', rel: 'noopener' do .a-pdf-input__file span.a-pdf-input__file-name diff --git a/app/views/users/show.html.slim b/app/views/users/show.html.slim index afbc033c88a..e1108bdacf8 100644 --- a/app/views/users/show.html.slim +++ b/app/views/users/show.html.slim @@ -64,26 +64,8 @@ = render 'users/metas', user: @user, user_course_practice: UserCoursePractice.new(@user) .col-xs-12(class="#{visible_learning_time_frames?(@user) ? 'col-lg-4 col-xxl-4' : 'col-lg-6 col-xxl-6'}") - - if admin_login? - .a-card.is-only-mentor - .card-header.is-sm - h2.card-header__title - | 卒業後の進路 - | (#{t("activerecord.enums.user.career_path.#{@user.career_path}")}) - hr.a-border-tint - .card-body - .card-body__description - - if @user.career_memo.present? - .a-long-text.is-sm - = simple_format(@user.career_memo) - - else - .o-empty-message - .o-empty-message__icon - i.fa-regular.fa-sad-tear - .o-empty-message__text - | 進路メモはまだありません。 - - if admin_or_mentor_login? - = render 'users/user_mentor_memo', user_id: @user.id + - if @user.student_or_trainee? && @user.total_learning_time.positive? + = render(StudyStreak::StudyStreakTrackerComponent.new(study_streak: @study_streak)) - unless @user.total_learning_time.zero? || @user.mentor? = render(Grass::GrassComponent.new(user: @user, times: @times, target_end_date: @target_end_date, path: :user_path)) - if @user.student_or_trainee? @@ -116,6 +98,26 @@ .user-statuses__delete = link_to 'このユーザーを削除する', admin_user_path(@user), method: :delete, id: "delete-#{@user.id}", class: 'a-muted-text-link', data: { confirm: '本当によろしいですか?この操作はデータを削除するため元に戻すことができません。' } + - if admin_login? + .a-card.is-only-mentor + .card-header.is-sm + h2.card-header__title + | 卒業後の進路 + | (#{t("activerecord.enums.user.career_path.#{@user.career_path}")}) + hr.a-border-tint + .card-body + .card-body__description + - if @user.career_memo.present? + .a-long-text.is-sm + = simple_format(@user.career_memo) + - else + .o-empty-message + .o-empty-message__icon + i.fa-regular.fa-sad-tear + .o-empty-message__text + | 進路メモはまだありません。 + - if admin_or_mentor_login? + = render 'users/user_mentor_memo', user_id: @user.id - if visible_learning_time_frames?(@user) .col-xs-12.col-lg-4.col-xxl-3 diff --git a/app/views/works/_form.html.slim b/app/views/works/_form.html.slim index 41d476691de..02089ceddd5 100644 --- a/app/views/works/_form.html.slim +++ b/app/views/works/_form.html.slim @@ -24,7 +24,7 @@ = f.label :thumbnail, class: 'a-form-label' .form-item-file-input.js-file-input.a-file-input.is-thumbnail label.js-file-input__preview - - if work.thumbnail.attached? + - if work.persisted? && work.thumbnail.attached? = image_tag work.thumbnail p 画像を変更 - else diff --git a/bin/rails b/bin/rails index 21d3e02d896..efc0377492f 100755 --- a/bin/rails +++ b/bin/rails @@ -1,5 +1,4 @@ #!/usr/bin/env ruby -load File.expand_path("spring", __dir__) -APP_PATH = File.expand_path('../config/application', __dir__) +APP_PATH = File.expand_path("../config/application", __dir__) require_relative "../config/boot" require "rails/commands" diff --git a/bin/rake b/bin/rake index 7327f471e4e..4fbf10b960e 100755 --- a/bin/rake +++ b/bin/rake @@ -1,5 +1,4 @@ #!/usr/bin/env ruby -load File.expand_path("spring", __dir__) require_relative "../config/boot" require "rake" Rake.application.run diff --git a/bin/rubocop b/bin/rubocop index 369a05bedb5..40330c0ff1c 100755 --- a/bin/rubocop +++ b/bin/rubocop @@ -1,27 +1,8 @@ #!/usr/bin/env ruby -# frozen_string_literal: true - -# -# This file was generated by Bundler. -# -# The application 'rubocop' is installed as part of a gem, and -# this file is here to facilitate running it. -# - -ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../Gemfile", __dir__) - -bundle_binstub = File.expand_path("bundle", __dir__) - -if File.file?(bundle_binstub) - if File.read(bundle_binstub, 300).include?("This file was generated by Bundler") - load(bundle_binstub) - else - abort("Your `bin/bundle` was not generated by Bundler, so this binstub cannot run. -Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.") - end -end - require "rubygems" require "bundler/setup" +# explicit rubocop config increases performance slightly while avoiding config confusion. +ARGV.unshift("--config", File.expand_path("../.rubocop.yml", __dir__)) + load Gem.bin_path("rubocop", "rubocop") diff --git a/bin/setup b/bin/setup index 90700ac4f9a..62de954afbe 100755 --- a/bin/setup +++ b/bin/setup @@ -1,11 +1,11 @@ #!/usr/bin/env ruby require "fileutils" -# path to your application root. -APP_ROOT = File.expand_path('..', __dir__) +APP_ROOT = File.expand_path("..", __dir__) +APP_NAME = "bootcamp" def system!(*args) - system(*args) || abort("\n== Command #{args} failed ==") + system(*args, exception: true) end FileUtils.chdir APP_ROOT do @@ -13,24 +13,37 @@ FileUtils.chdir APP_ROOT do # This script is idempotent, so that you can run it at any time and get an expectable outcome. # Add necessary setup steps to this file. - puts '== Installing dependencies ==' - system! 'gem install bundler --conservative' - system('bundle check') || system!('bundle install') + puts "== Installing dependencies ==" + system! "gem install bundler --conservative" + system("bundle check") || system!("bundle install") # Install JavaScript dependencies - system! 'bin/yarn' + puts "\n== Installing JavaScript dependencies ==" + if File.exist?("bin/yarn") && File.executable?("bin/yarn") + system!("bin/yarn install") + elsif system("yarn --version", out: File::NULL, err: File::NULL) + system!("yarn install") + else + puts "ERROR: yarn is not available. Please install yarn to continue." + puts "Visit https://yarnpkg.com/getting-started/install for installation instructions." + exit 1 + end # puts "\n== Copying sample files ==" - # unless File.exist?('config/database.yml') - # FileUtils.cp 'config/database.yml.sample', 'config/database.yml' + # unless File.exist?("config/database.yml") + # FileUtils.cp "config/database.yml.sample", "config/database.yml" # end puts "\n== Preparing database ==" - system! 'bin/rails db:prepare' + system! "bin/rails db:prepare" puts "\n== Removing old logs and tempfiles ==" - system! 'bin/rails log:clear tmp:clear' + system! "bin/rails log:clear tmp:clear" puts "\n== Restarting application server ==" - system! 'bin/rails restart' + system! "bin/rails restart" + + # puts "\n== Configuring puma-dev ==" + # system "ln -nfs #{APP_ROOT} ~/.puma-dev/#{APP_NAME}" + # system "curl -Is https://#{APP_NAME}.test/up | head -n 1" end diff --git a/bin/shakapacker b/bin/shakapacker new file mode 100755 index 00000000000..13a008dcfe1 --- /dev/null +++ b/bin/shakapacker @@ -0,0 +1,13 @@ +#!/usr/bin/env ruby + +ENV["RAILS_ENV"] ||= "development" +ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", __FILE__) + +require "bundler/setup" +require "shakapacker" +require "shakapacker/webpack_runner" + +APP_ROOT = File.expand_path("..", __dir__) +Dir.chdir(APP_ROOT) do + Shakapacker::WebpackRunner.run(ARGV) +end diff --git a/bin/shakapacker-dev-server b/bin/shakapacker-dev-server new file mode 100755 index 00000000000..5ae8897989d --- /dev/null +++ b/bin/shakapacker-dev-server @@ -0,0 +1,13 @@ +#!/usr/bin/env ruby + +ENV["RAILS_ENV"] ||= "development" +ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", __FILE__) + +require "bundler/setup" +require "shakapacker" +require "shakapacker/dev_server_runner" + +APP_ROOT = File.expand_path("..", __dir__) +Dir.chdir(APP_ROOT) do + Shakapacker::DevServerRunner.run(ARGV) +end diff --git a/bin/spring b/bin/spring deleted file mode 100755 index b4147e84378..00000000000 --- a/bin/spring +++ /dev/null @@ -1,14 +0,0 @@ -#!/usr/bin/env ruby -if !defined?(Spring) && [nil, "development", "test"].include?(ENV["RAILS_ENV"]) - gem "bundler" - require "bundler" - - # Load Spring without loading other gems in the Gemfile, for speed. - Bundler.locked_gems&.specs&.find { |spec| spec.name == "spring" }&.tap do |spring| - Gem.use_paths Gem.dir, Bundler.bundle_path.to_s, *Gem.path - gem "spring", spring.version - require "spring/binstub" - rescue Gem::LoadError - # Ignore when Spring is not installed. - end -end diff --git a/bin/webpack b/bin/webpack deleted file mode 100755 index 1031168d012..00000000000 --- a/bin/webpack +++ /dev/null @@ -1,18 +0,0 @@ -#!/usr/bin/env ruby - -ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development" -ENV["NODE_ENV"] ||= "development" - -require "pathname" -ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", - Pathname.new(__FILE__).realpath) - -require "bundler/setup" - -require "webpacker" -require "webpacker/webpack_runner" - -APP_ROOT = File.expand_path("..", __dir__) -Dir.chdir(APP_ROOT) do - Webpacker::WebpackRunner.run(ARGV) -end diff --git a/bin/webpack-dev-server b/bin/webpack-dev-server deleted file mode 100755 index dd9662737a6..00000000000 --- a/bin/webpack-dev-server +++ /dev/null @@ -1,18 +0,0 @@ -#!/usr/bin/env ruby - -ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development" -ENV["NODE_ENV"] ||= "development" - -require "pathname" -ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", - Pathname.new(__FILE__).realpath) - -require "bundler/setup" - -require "webpacker" -require "webpacker/dev_server_runner" - -APP_ROOT = File.expand_path("..", __dir__) -Dir.chdir(APP_ROOT) do - Webpacker::DevServerRunner.run(ARGV) -end diff --git a/bin/yarn b/bin/yarn index 9fab2c35079..fe7338622b8 100755 --- a/bin/yarn +++ b/bin/yarn @@ -1,9 +1,10 @@ #!/usr/bin/env ruby -APP_ROOT = File.expand_path('..', __dir__) + +APP_ROOT = File.expand_path("..", __dir__) Dir.chdir(APP_ROOT) do yarn = ENV["PATH"].split(File::PATH_SEPARATOR). select { |dir| File.expand_path(dir) != __dir__ }. - product(["yarn", "yarn.cmd", "yarn.ps1"]). + product(["yarn", "yarnpkg", "yarn.cmd", "yarn.ps1"]). map { |dir, file| File.expand_path(file, dir) }. find { |file| File.executable?(file) } diff --git a/config/application.rb b/config/application.rb index c07a4a1c333..c375bf6a840 100644 --- a/config/application.rb +++ b/config/application.rb @@ -9,7 +9,12 @@ module Bootcamp class Application < Rails::Application # Initialize configuration defaults for originally generated Rails version. - config.load_defaults 6.1 + config.load_defaults 7.2 + + # Please, add to the `ignore` list any other `lib` subdirectories that do + # not contain `.rb` files, or that should not be reloaded or eager loaded. + # Common ones are `templates`, `generators`, or `middleware`, for example. + config.autoload_lib(ignore: %w[assets tasks]) # Configuration for the application, engines, and railties goes here. # @@ -21,16 +26,18 @@ class Application < Rails::Application config.time_zone = "Tokyo" config.i18n.default_locale = :ja - config.paths.add "lib", eager_load: true config.paths.add "app/presenters", eager_load: true config.action_view.field_error_proc = Proc.new do |html_tag, instance| html_tag.html_safe end - config.active_storage.resolve_model_to_route = :rails_storage_proxy config.active_storage.variant_processor = :vips + # Disable foreign key validation for fixtures + # Cloud SQL restricts access to pg_constraint system table + config.active_record.verify_foreign_keys_for_fixtures = false + config.view_component.capture_compatibility_patch_enabled = true config.to_prepare do diff --git a/config/boot.rb b/config/boot.rb index 3cda23b4db4..988a5ddc460 100644 --- a/config/boot.rb +++ b/config/boot.rb @@ -1,4 +1,4 @@ -ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../Gemfile', __dir__) +ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../Gemfile", __dir__) require "bundler/setup" # Set up gems listed in the Gemfile. require "bootsnap/setup" # Speed up boot time by caching expensive operations. diff --git a/config/environments/development.rb b/config/environments/development.rb index ef73762e3af..4a0e1b3eb2a 100644 --- a/config/environments/development.rb +++ b/config/environments/development.rb @@ -6,7 +6,7 @@ # In the development environment your application's code is reloaded any time # it changes. This slows down response time but is perfect for development # since you don't have to restart the web server when you make code changes. - config.cache_classes = false + config.enable_reloading = true # Do not eager load code on boot. config.eager_load = false @@ -14,16 +14,17 @@ # Show full error reports. config.consider_all_requests_local = true + # Enable server timing. + config.server_timing = true + # Enable/disable caching. By default caching is disabled. # Run rails dev:cache to toggle caching. - if Rails.root.join('tmp', 'caching-dev.txt').exist? + if Rails.root.join("tmp/caching-dev.txt").exist? config.action_controller.perform_caching = true config.action_controller.enable_fragment_cache_logging = true config.cache_store = :memory_store, { size: 128.megabytes } - config.public_file_server.headers = { - 'Cache-Control' => "public, max-age=#{2.days.to_i}" - } + config.public_file_server.headers = { "Cache-Control" => "public, max-age=#{2.days.to_i}" } else config.action_controller.perform_caching = false @@ -37,8 +38,13 @@ # Don't care if the mailer can't send. config.action_mailer.raise_delivery_errors = false + # Disable caching for Action Mailer templates even if Action Controller + # caching is enabled. config.action_mailer.perform_caching = false + config.action_mailer.delivery_method = :letter_opener_web + config.action_mailer.default_url_options = { host: "localhost", port: 3000 } + # Print deprecation notices to the Rails logger. config.active_support.deprecation = :log @@ -54,6 +60,9 @@ # Highlight code that triggered database queries in logs. config.active_record.verbose_query_logs = true + # Highlight code that enqueued background job in logs. + config.active_job.verbose_enqueue_logs = true + # Debug mode disables concatenation and preprocessing of assets. # This option may cause significant delays in view rendering with a large # number of complex assets. @@ -66,23 +75,20 @@ # config.i18n.raise_on_missing_translations = true # Annotate rendered view with file names. - # config.action_view.annotate_rendered_view_with_filenames = true - - # Use an evented file watcher to asynchronously detect changes in source code, - # routes, locales, etc. This feature depends on the listen gem. - config.file_watcher = ActiveSupport::EventedFileUpdateChecker + config.action_view.annotate_rendered_view_with_filenames = true # Uncomment if you wish to allow Action Cable access from any origin. # config.action_cable.disable_request_forgery_protection = true + # Raise error when a before_action's only/except options reference missing actions. + config.action_controller.raise_on_missing_callback_actions = true + + # Apply autocorrection by RuboCop to files generated by `bin/rails generate`. + # config.generators.apply_rubocop_autocorrect_after_generate! + config.active_job.queue_adapter = :good_job config.good_job.execution_mode = :async - config.action_mailer.delivery_method = :letter_opener_web - config.action_mailer.default_url_options = { host: "localhost", port: 3000 } - config.action_controller.asset_host = "http://localhost:3000" - config.action_mailer.asset_host = "http://localhost:3000" - config.rack_dev_mark.enable = true config.rack_dev_mark.theme = [:title, Rack::DevMark::Theme::GithubForkRibbon.new(position: 'right-bottom')] diff --git a/config/environments/production.rb b/config/environments/production.rb index 5a02e1dcbf0..5cdf240fc75 100644 --- a/config/environments/production.rb +++ b/config/environments/production.rb @@ -4,7 +4,7 @@ # Settings specified here will take precedence over those in config/application.rb. # Code is not reloaded between requests. - config.cache_classes = true + config.enable_reloading = false # Eager load code on boot. This eager loads most of Rails and # your application in memory, allowing both threaded web servers @@ -13,29 +13,26 @@ config.eager_load = true # Full error reports are disabled and caching is turned on. - config.consider_all_requests_local = false + config.consider_all_requests_local = false config.action_controller.perform_caching = true - # Ensures that a master key has been made available in either ENV["RAILS_MASTER_KEY"] - # or in config/master.key. This key is used to decrypt credentials (and other encrypted files). + # Ensures that a master key has been made available in ENV["RAILS_MASTER_KEY"], config/master.key, or an environment + # key such as config/credentials/production.key. This key is used to decrypt credentials (and other encrypted files). # config.require_master_key = true # Disable serving static files from the `/public` folder by default since # Apache or NGINX already handles this. config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present? - # Compress CSS using a preprocessor. - # config.assets.css_compressor = :sass - # Do not fallback to assets pipeline if a precompiled asset is missed. config.assets.compile = false # Enable serving of images, stylesheets, and JavaScripts from an asset server. - # config.asset_host = 'http://assets.example.com' + # config.asset_host = "http://assets.example.com" # Specifies the header that your server uses for sending files. - # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache - # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX + # config.action_dispatch.x_sendfile_header = "X-Sendfile" # for Apache + # config.action_dispatch.x_sendfile_header = "X-Accel-Redirect" # for NGINX # Store uploaded files on the local file system (see config/storage.yml for options). config.active_storage.service = :google @@ -43,19 +40,32 @@ # Mount Action Cable outside main process or domain. # config.action_cable.mount_path = nil - # config.action_cable.url = 'wss://example.com/cable' - # config.action_cable.allowed_request_origins = [ 'http://example.com', /http:\/\/example.*/ ] + # config.action_cable.url = "wss://example.com/cable" + # config.action_cable.allowed_request_origins = [ "http://example.com", /http:\/\/example.*/ ] + + # Assume all access to the app is happening through a SSL-terminating reverse proxy. + # Can be used together with config.force_ssl for Strict-Transport-Security and secure cookies. + # config.assume_ssl = true # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies. config.force_ssl = true - # Include generic and useful information about system operation, but avoid logging too much - # information to avoid inadvertent exposure of personally identifiable information (PII). - config.log_level = :info + # Skip http-to-https redirect for the default health check endpoint. + # config.ssl_options = { redirect: { exclude: ->(request) { request.path == "/up" } } } + + # Log to STDOUT by default + config.logger = ActiveSupport::Logger.new(STDOUT) + .tap { |logger| logger.formatter = ::Logger::Formatter.new } + .then { |logger| ActiveSupport::TaggedLogging.new(logger) } # Prepend all log lines with the following tags. config.log_tags = [ :request_id ] + # "info" includes generic and useful information about system operation, but avoids logging too much + # information to avoid inadvertent exposure of personally identifiable information (PII). If you + # want to log everything, set the level to "debug". + config.log_level = ENV.fetch("RAILS_LOG_LEVEL", "info") + # Use a different cache store in production. # config.cache_store = :mem_cache_store config.cache_store = :memory_store, { size: 128.megabytes } @@ -65,6 +75,8 @@ config.good_job.execution_mode = :async # config.active_job.queue_name_prefix = "bootcamp_production" + # Disable caching for Action Mailer templates even if Action Controller + # caching is enabled. config.action_mailer.perform_caching = true # Ignore bad email addresses and do not raise email delivery errors. @@ -75,69 +87,47 @@ # the I18n.default_locale when a translation cannot be found). config.i18n.fallbacks = true - # Send deprecation notices to registered listeners. - config.active_support.deprecation = :notify - - # Log disallowed deprecations. - config.active_support.disallowed_deprecation = :log - - # Tell Active Support which deprecation messages to disallow. - config.active_support.disallowed_deprecation_warnings = [] - - # Use default logging formatter so that PID and timestamp are not suppressed. - config.log_formatter = ::Logger::Formatter.new - - # Use a different logger for distributed setups. - # require "syslog/logger" - # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name') - - if ENV["RAILS_LOG_TO_STDOUT"].present? - logger = ActiveSupport::Logger.new(STDOUT) - logger.formatter = config.log_formatter - config.logger = ActiveSupport::TaggedLogging.new(logger) - end + # Don't log any deprecations. + config.active_support.report_deprecations = false # Do not dump schema after migrations. config.active_record.dump_schema_after_migration = false - # Inserts middleware to perform automatic connection switching. - # The `database_selector` hash is used to pass options to the DatabaseSelector - # middleware. The `delay` is used to determine how long to wait after a write - # to send a subsequent read to the primary. - # - # The `database_resolver` class is used by the middleware to determine which - # database is appropriate to use based on the time delay. - # - # The `database_resolver_context` class is used by the middleware to set - # timestamps for the last write to the primary. The resolver uses the context - # class timestamps to determine how long to wait before reading from the - # replica. - # - # By default Rails will store a last write timestamp in the session. The - # DatabaseSelector middleware is designed as such you can define your own - # strategy for connection switching and pass that into the middleware through - # these configuration options. - # config.active_record.database_selector = { delay: 2.seconds } - # config.active_record.database_resolver = ActiveRecord::Middleware::DatabaseSelector::Resolver - # config.active_record.database_resolver_context = ActiveRecord::Middleware::DatabaseSelector::Resolver::Session - - config.action_mailer.default_url_options = { host: ENV["APP_HOST_NAME"], protocol: "https" } - config.action_mailer.asset_host = "https://#{ENV["APP_HOST_NAME"]}" - config.action_controller.asset_host = "https://#{ENV["APP_HOST_NAME"]}" - - # Set asset host for webpacker - config.webpacker.check_yarn_integrity = false if respond_to?(:webpacker) + # Only use :id for inspections in production. + config.active_record.attributes_for_inspect = [ :id ] + + # Enable DNS rebinding protection and other `Host` header attacks. + # config.hosts = [ + # "example.com", # Allow requests from example.com + # /.*\.example\.com/ # Allow requests from subdomains like `www.example.com` + # ] + # Skip DNS rebinding protection for the default health check endpoint. + # config.host_authorization = { exclude: ->(request) { request.path == "/up" } } + + # Validate APP_HOST_NAME at boot time (skip during asset precompilation) + app_host_name = ENV["APP_HOST_NAME"] + unless ENV["SECRET_KEY_BASE"] == "dummy" + if app_host_name.nil? || app_host_name.strip.empty? + abort "ERROR: APP_HOST_NAME environment variable is required for production but not set or blank" + end + end + + if app_host_name.present? + config.action_mailer.default_url_options = { host: app_host_name, protocol: "https" } + config.action_mailer.asset_host = "https://#{app_host_name}" + config.action_controller.asset_host = "https://#{app_host_name}" + end config.action_mailer.delivery_method = :postmark config.action_mailer.postmark_settings = { api_token: ENV["POSTMARK_API_TOKEN"] } config.hosts << ENV["CLOUD_RUN_HOST_NAME"] if ENV["CLOUD_RUN_HOST_NAME"] - config.hosts << ENV["APP_HOST_NAME"] if ENV["APP_HOST_NAME"] + config.hosts << app_host_name AnyLogin.setup do |config| config.enabled = false end - Rails.application.routes.default_url_options[:host] = ENV["APP_HOST_NAME"] + Rails.application.routes.default_url_options[:host] = app_host_name Rails.application.routes.default_url_options[:protocol] = 'https' end diff --git a/config/environments/test.rb b/config/environments/test.rb index 1e1fef8bcaa..5c387d38c0a 100644 --- a/config/environments/test.rb +++ b/config/environments/test.rb @@ -8,7 +8,8 @@ Rails.application.configure do # Settings specified here will take precedence over those in config/application.rb. - config.cache_classes = false + # While tests run files are not watched, reloading is not necessary. + config.enable_reloading = false config.action_view.cache_template_loading = true # Do not eager load code on boot. This avoids loading your whole application @@ -18,12 +19,10 @@ # Configure public file server for tests with Cache-Control for performance. config.public_file_server.enabled = true - config.public_file_server.headers = { - 'Cache-Control' => "public, max-age=#{1.hour.to_i}" - } + config.public_file_server.headers = { "Cache-Control" => "public, max-age=#{1.hour.to_i}" } # Show full error reports and disable caching. - config.consider_all_requests_local = true + config.consider_all_requests_local = true config.action_controller.perform_caching = false config.cache_store = :null_store @@ -35,7 +34,10 @@ # Store uploaded files on the local file system in a temporary directory. config.active_storage.service = :test + config.active_storage.url_options = { protocol: 'http', host: 'localhost', port: '3000' } + # Disable caching for Action Mailer templates even if Action Controller + # caching is enabled. config.action_mailer.perform_caching = false # Tell Action Mailer not to deliver emails to the real world. @@ -43,6 +45,8 @@ # ActionMailer::Base.deliveries array. config.action_mailer.delivery_method = :test + # Unlike controllers, the mailer instance doesn't have any context about the + # incoming request so you'll need to provide the :host parameter yourself. config.action_mailer.default_url_options = { host: "localhost", port: 3000 } # Print deprecation notices to the stderr. @@ -59,5 +63,12 @@ # Annotate rendered view with file names. # config.action_view.annotate_rendered_view_with_filenames = true + + # Raise error when a before_action's only/except options reference missing actions. + config.action_controller.raise_on_missing_callback_actions = true + + # Use inline adapter for Active Job in system tests + config.active_job.queue_adapter = :inline + Rails.application.routes.default_url_options[:host] = 'localhost:3000' end diff --git a/config/initializers/content_security_policy.rb b/config/initializers/content_security_policy.rb index 35d0f26fcdc..b3076b38fe1 100644 --- a/config/initializers/content_security_policy.rb +++ b/config/initializers/content_security_policy.rb @@ -1,30 +1,25 @@ # Be sure to restart your server when you modify this file. -# Define an application-wide content security policy -# For further information see the following documentation -# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy +# Define an application-wide content security policy. +# See the Securing Rails Applications Guide for more information: +# https://guides.rubyonrails.org/security.html#content-security-policy-header -# Rails.application.config.content_security_policy do |policy| -# policy.default_src :self, :https -# policy.font_src :self, :https, :data -# policy.img_src :self, :https, :data -# policy.object_src :none -# policy.script_src :self, :https -# policy.style_src :self, :https -# # If you are using webpack-dev-server then specify webpack-dev-server host -# policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development? - -# # Specify URI for violation reports -# # policy.report_uri "/csp-violation-report-endpoint" +# Rails.application.configure do +# config.content_security_policy do |policy| +# policy.default_src :self, :https +# policy.font_src :self, :https, :data +# policy.img_src :self, :https, :data +# policy.object_src :none +# policy.script_src :self, :https +# policy.style_src :self, :https +# # Specify URI for violation reports +# # policy.report_uri "/csp-violation-report-endpoint" +# end +# +# # Generate session nonces for permitted importmap, inline scripts, and inline styles. +# config.content_security_policy_nonce_generator = ->(request) { request.session.id.to_s } +# config.content_security_policy_nonce_directives = %w(script-src style-src) +# +# # Report violations without enforcing the policy. +# # config.content_security_policy_report_only = true # end - -# If you are using UJS then enable automatic nonce generation -# Rails.application.config.content_security_policy_nonce_generator = -> request { SecureRandom.base64(16) } - -# Set the nonce only to specific directives -# Rails.application.config.content_security_policy_nonce_directives = %w(script-src) - -# Report CSP violations to a specified URI -# For further information see the following documentation: -# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only -# Rails.application.config.content_security_policy_report_only = true diff --git a/config/initializers/filter_parameter_logging.rb b/config/initializers/filter_parameter_logging.rb index 4dea6dde6bd..9b30991b622 100644 --- a/config/initializers/filter_parameter_logging.rb +++ b/config/initializers/filter_parameter_logging.rb @@ -1,6 +1,8 @@ # Be sure to restart your server when you modify this file. -# Configure sensitive parameters which will be filtered from the log file. +# Configure parameters to be partially matched (e.g. passw matches password) and filtered from the log file. +# Use this to limit dissemination of sensitive information. +# See the ActiveSupport::ParameterFilter documentation for supported notations and behaviors. Rails.application.config.filter_parameters += [ - :passw, :secret, :token, :_key, :crypt, :salt, :certificate, :otp, :ssn, :'g-recaptcha' + :passw, :secret, :token, :_key, :crypt, :salt, :certificate, :otp, :ssn, 'g-recaptcha' ] diff --git a/config/initializers/inflections.rb b/config/initializers/inflections.rb index c741ac2b097..f149fc7593a 100644 --- a/config/initializers/inflections.rb +++ b/config/initializers/inflections.rb @@ -4,9 +4,9 @@ # are locale specific, and you may define rules for as many different # locales as you wish. All of these examples are active by default: # ActiveSupport::Inflector.inflections(:en) do |inflect| -# inflect.plural /^(ox)$/i, '\1en' -# inflect.singular /^(ox)en/i, '\1' -# inflect.irregular 'person', 'people' +# inflect.plural /^(ox)$/i, "\\1en" +# inflect.singular /^(ox)en/i, "\\1" +# inflect.irregular "person", "people" # inflect.uncountable %w( fish sheep ) # end diff --git a/config/initializers/new_framework_defaults_7_0.rb b/config/initializers/new_framework_defaults_7_0.rb new file mode 100644 index 00000000000..b13ef5ed163 --- /dev/null +++ b/config/initializers/new_framework_defaults_7_0.rb @@ -0,0 +1,143 @@ +# Be sure to restart your server when you modify this file. +# +# This file eases your Rails 7.0 framework defaults upgrade. +# +# Uncomment each configuration one by one to switch to the new default. +# Once your application is ready to run with all new defaults, you can remove +# this file and set the `config.load_defaults` to `7.0`. +# +# Read the Guide for Upgrading Ruby on Rails for more info on each option. +# https://guides.rubyonrails.org/upgrading_ruby_on_rails.html + +# `button_to` view helper will render `
クリックしてね
クリックしてね