diff --git a/.circleci/config.yml b/.circleci/config.yml index d6f4ce5a7b9..8446fc92625 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -56,11 +56,11 @@ jobs: test: docker: - image: cimg/ruby:3.4.3-browsers + - image: pgvector/pgvector:pg14 environment: POSTGRES_USER: postgres POSTGRES_PASSWORD: postgres POSTGRES_DB: ci_test - - image: cimg/postgres:14.4 resource_class: large environment: BUNDLE_JOBS: '3' @@ -101,6 +101,14 @@ jobs: - run: name: Wait for DB command: 'dockerize -wait tcp://localhost:5432 -timeout 1m' + - run: + name: Install PostgreSQL client + command: | + sudo apt-get update && sudo apt-get install -y postgresql-client + - run: + name: Enable pgvector extension + command: | + psql -h localhost -U postgres -d ci_test -c "CREATE EXTENSION IF NOT EXISTS vector;" - run: name: Database setup command: 'bundle exec rails db:prepare' diff --git a/.cloudbuild/cloudbuild-staging.yaml b/.cloudbuild/cloudbuild-staging.yaml index bfb08fb4c41..75ec4006d5a 100644 --- a/.cloudbuild/cloudbuild-staging.yaml +++ b/.cloudbuild/cloudbuild-staging.yaml @@ -23,9 +23,7 @@ steps: - 'asia.gcr.io/$PROJECT_ID/$REPO_NAME:$COMMIT_SHA' waitFor: - Build - # Cloud Runサービスを削除してDB接続を切断 - # Cloud SQLでは管理者権限がないためpg_terminate_backendが使えない - # サービスを削除することで接続を確実に切断し、Deployで再作成される + # Cloud Runサービスを削除してDB接続を切断し、Deployで再作成される - id: StopCloudRun name: gcr.io/google.com/cloudsdktool/cloud-sdk entrypoint: bash @@ -114,54 +112,99 @@ steps: - 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 - id: DeleteDB + # bootcamp_stagingへの接続を強制切断してからデータベースを削除 + - id: DeleteDB + name: 'asia.gcr.io/$PROJECT_ID/$REPO_NAME:$COMMIT_SHA' entrypoint: bash args: - '-c' - | set -euo pipefail - MAX_RETRIES=12 - RETRY_DELAY=10 - 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 "Terminating all connections to bootcamp_staging..." + cat <<'SQLEOF' | bin/rails runner - 2>&1 + result = ActiveRecord::Base.connection.execute(<<~SQL) + SELECT pg_terminate_backend(pid) + FROM pg_stat_activity + WHERE datname = 'bootcamp_staging' + AND pid <> pg_backend_pid() + SQL + puts "Terminated #{result.count} connection(s)" + SQLEOF - echo "ERROR: Failed to delete database after $$MAX_RETRIES attempts." - exit 1 + echo "Dropping database bootcamp_staging..." + cat <<'SQLEOF' | bin/rails runner - 2>&1 + ActiveRecord::Base.connection.execute("DROP DATABASE IF EXISTS bootcamp_staging") + puts "Database dropped successfully" + SQLEOF waitFor: - WaitForProxy volumes: - name: db path: /cloudsql - - name: gcr.io/google.com/cloudsdktool/cloud-sdk + env: + - RAILS_ENV=production + - DISABLE_DATABASE_ENVIRONMENT_CHECK=1 + - DB_HOST=/cloudsql/$_CLOUD_SQL_HOST + - DB_NAME=postgres + - DB_PASS=$_DB_PASS + - DB_USER=$_DB_USER + - RAILS_MASTER_KEY=$_RAILS_MASTER_KEY + - APP_HOST_NAME=$_APP_HOST_NAME + - id: CreateDB + name: 'asia.gcr.io/$PROJECT_ID/$REPO_NAME:$COMMIT_SHA' + entrypoint: bash args: - - sql - - databases - - create - - bootcamp_staging - - '--instance=bootcamp' - - '--quiet' - id: CreateDB + - '-c' + - | + set -euo pipefail + + echo "Creating database bootcamp_staging..." + cat <<'SQLEOF' | bin/rails runner - 2>&1 + ActiveRecord::Base.connection.execute("CREATE DATABASE bootcamp_staging") + puts "Database created successfully" + SQLEOF waitFor: - DeleteDB - entrypoint: gcloud volumes: - name: db path: /cloudsql + env: + - RAILS_ENV=production + - DISABLE_DATABASE_ENVIRONMENT_CHECK=1 + - DB_HOST=/cloudsql/$_CLOUD_SQL_HOST + - DB_NAME=postgres + - DB_PASS=$_DB_PASS + - DB_USER=$_DB_USER + - RAILS_MASTER_KEY=$_RAILS_MASTER_KEY + - APP_HOST_NAME=$_APP_HOST_NAME + - id: EnablePgvector + name: 'asia.gcr.io/$PROJECT_ID/$REPO_NAME:$COMMIT_SHA' + entrypoint: bash + args: + - '-c' + - | + set -euo pipefail + + echo "Enabling pgvector extension on bootcamp_staging..." + cat <<'SQLEOF' | bin/rails runner - 2>&1 + ActiveRecord::Base.connection.execute("CREATE EXTENSION IF NOT EXISTS vector") + puts "pgvector extension enabled" + SQLEOF + waitFor: + - CreateDB + volumes: + - name: db + path: /cloudsql + env: + - RAILS_ENV=production + - DISABLE_DATABASE_ENVIRONMENT_CHECK=1 + - DB_HOST=/cloudsql/$_CLOUD_SQL_HOST + - DB_NAME=$_DB_NAME + - DB_PASS=$_DB_PASS + - DB_USER=$_DB_USER + - RAILS_MASTER_KEY=$_RAILS_MASTER_KEY + - APP_HOST_NAME=$_APP_HOST_NAME - id: DBMigrate name: 'asia.gcr.io/$PROJECT_ID/$REPO_NAME:$COMMIT_SHA' args: @@ -169,7 +212,7 @@ steps: - db:migrate - db:seed waitFor: - - DeleteDB + - EnablePgvector volumes: - name: db path: /cloudsql diff --git a/.cloudbuild/cloudbuild-task.yaml b/.cloudbuild/cloudbuild-task.yaml index 0a0baca99c7..a316cec4c19 100644 --- a/.cloudbuild/cloudbuild-task.yaml +++ b/.cloudbuild/cloudbuild-task.yaml @@ -27,10 +27,12 @@ steps: env: - 'RAILS_ENV=production' - 'RAILS_MASTER_KEY=$_RAILS_MASTER_KEY' + - 'APP_HOST_NAME=$_APP_HOST_NAME' - 'DB_HOST=/cloudsql/$_CLOUD_SQL_HOST' - 'DB_NAME=$_DB_NAME' - 'DB_PASS=$_DB_PASS' - 'DB_USER=$_DB_USER' + - 'OPEN_AI_ACCESS_TOKEN=$_OPEN_AI_ACCESS_TOKEN' - id: Kill_SqlProxy name: "gcr.io/cloud-builders/docker" waitFor: ["Task"] @@ -40,10 +42,12 @@ images: ['asia.gcr.io/$PROJECT_ID/$REPO_NAME:$COMMIT_SHA'] options: substitutionOption: ALLOW_LOOSE substitutions: + _APP_HOST_NAME: _ _CLOUD_SQL_HOST: _ _DB_NAME: _ _DB_PASS: _ _DB_USER: _ + _OPEN_AI_ACCESS_TOKEN: _ _RAILS_MASTER_KEY: _ tags: - gcp-cloud-build-task diff --git a/.gitignore b/.gitignore index d1aa6aac20c..943266470d1 100644 --- a/.gitignore +++ b/.gitignore @@ -24,6 +24,8 @@ vendor/bundle/ /public/assets /public/packs /public/packs-test +/app/assets/builds/* +!/app/assets/builds/.gitkeep /public/system yarn-debug.log* diff --git a/Gemfile b/Gemfile index 96f548dd30c..b1c9a448b22 100644 --- a/Gemfile +++ b/Gemfile @@ -13,6 +13,7 @@ gem 'puma', '>= 5.0' gem 'rails', '8.1.1' gem 'shakapacker', '~> 9.0' gem 'sprockets-rails', '>= 2.0.0' +gem 'tailwindcss-rails', '~> 4.0' # not default gem 'abstract_notifier', '~> 0.3.2' @@ -50,6 +51,7 @@ gem 'meta-tags' gem 'mini_magick' gem 'mission_control-jobs' gem 'mutex_m', '0.1.1' +gem 'neighbor' gem 'net-imap', require: false gem 'net-pop', require: false gem 'net-smtp', require: false # TODO: Remove it if you use rails 7.0.1 @@ -70,12 +72,14 @@ gem 'rails_autolink' gem 'rails-i18n' gem 'rails-patterns', '~> 0.2' gem 'ransack', '~> 4.3' +gem 'solid_cache' gem 'solid_queue' # TODO: connection_pool互換性が修正された安定版リリース後にgem版に戻す gem 'react-rails', github: 'reactjs/react-rails', ref: '224d03b8e04b95e4d16197fc6ecf75601543154a' gem 'recaptcha', '~> 5.12' gem 'rollbar' gem 'rss' +gem 'ruby_llm' gem 'ruby-openai' gem 'rubyzip' gem 'slim-rails' diff --git a/Gemfile.lock b/Gemfile.lock index 16f3f2eea07..d72ae1d4520 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -213,6 +213,8 @@ GEM net-http (~> 0.5) faraday-retry (2.4.0) faraday (~> 2.0) + ffi (1.17.1-arm64-darwin) + ffi (1.17.1-x86_64-darwin) ffi (1.17.1-x86_64-linux-gnu) foreman (0.90.0) thor (~> 1.4) @@ -268,6 +270,15 @@ GEM google-id-token (1.4.2) jwt (>= 1) google-logging-utils (0.2.0) + google-protobuf (4.33.3) + bigdecimal + rake (>= 13) + google-protobuf (4.33.3-arm64-darwin) + bigdecimal + rake (>= 13) + google-protobuf (4.33.3-x86_64-darwin) + bigdecimal + rake (>= 13) google-protobuf (4.33.3-x86_64-linux-gnu) bigdecimal rake (>= 13) @@ -285,6 +296,15 @@ GEM multi_json (~> 1.11) os (>= 0.9, < 2.0) signet (>= 0.16, < 2.a) + grpc (1.76.0) + google-protobuf (>= 3.25, < 5.0) + googleapis-common-protos-types (~> 1.0) + grpc (1.76.0-arm64-darwin) + google-protobuf (>= 3.25, < 5.0) + googleapis-common-protos-types (~> 1.0) + grpc (1.76.0-x86_64-darwin) + google-protobuf (>= 3.25, < 5.0) + googleapis-common-protos-types (~> 1.0) grpc (1.76.0-x86_64-linux-gnu) google-protobuf (>= 3.25, < 5.0) googleapis-common-protos-types (~> 1.0) @@ -407,6 +427,8 @@ GEM bigdecimal (>= 3.1, < 5) multipart-post (2.4.1) mutex_m (0.1.1) + neighbor (0.6.0) + activerecord (>= 7.1) net-http (0.9.1) uri (>= 0.11.1) net-imap (0.6.2) @@ -421,6 +443,10 @@ GEM netrc (0.11.0) newspaper (0.2.0) nio4r (2.7.5) + nokogiri (1.19.0-arm64-darwin) + racc (~> 1.4) + nokogiri (1.19.0-x86_64-darwin) + racc (~> 1.4) nokogiri (1.19.0-x86_64-linux-gnu) racc (~> 1.4) oauth (1.1.3) @@ -625,6 +651,17 @@ GEM ffi (~> 1.12) logger ruby2_keywords (0.0.5) + ruby_llm (1.11.0) + base64 + event_stream_parser (~> 1) + faraday (>= 1.10.0) + faraday-multipart (>= 1) + faraday-net_http (>= 1) + faraday-retry (>= 1) + marcel (~> 1.0) + ruby_llm-schema (~> 0.2.1) + zeitwerk (~> 2) + ruby_llm-schema (0.2.5) rubyzip (3.2.2) securerandom (0.4.1) selenium-webdriver (4.39.0) @@ -659,6 +696,10 @@ GEM snaky_hash (2.0.3) hashie (>= 0.1.0, < 6) version_gem (>= 1.1.8, < 3) + solid_cache (1.0.10) + activejob (>= 7.2) + activerecord (>= 7.2) + railties (>= 7.2) solid_queue (1.3.0) activejob (>= 7.1) activerecord (>= 7.1) @@ -687,6 +728,12 @@ GEM stripe (18.1.0) switchlet (0.3.1) rails (>= 6.1) + tailwindcss-rails (4.4.0) + railties (>= 7.0.0) + tailwindcss-ruby (~> 4.0) + tailwindcss-ruby (4.1.18-arm64-darwin) + tailwindcss-ruby (4.1.18-x86_64-darwin) + tailwindcss-ruby (4.1.18-x86_64-linux-gnu) temple (0.10.4) thor (1.5.0) thread_safe (0.3.6) @@ -744,8 +791,8 @@ GEM zeitwerk (2.7.4) PLATFORMS + universal-darwin x86_64-linux - x86_64-linux-gnu DEPENDENCIES abstract_notifier (~> 0.3.2) @@ -799,6 +846,7 @@ DEPENDENCIES minitest-stub_any_instance mission_control-jobs mutex_m (= 0.1.1) + neighbor net-imap net-pop net-smtp @@ -835,11 +883,13 @@ DEPENDENCIES rubocop-performance rubocop-rails ruby-openai + ruby_llm rubyzip selenium-webdriver shakapacker (~> 9.0) slim-rails slim_lint + solid_cache solid_queue sorcery (~> 0.16.2) sorcery-jwt @@ -848,6 +898,7 @@ DEPENDENCIES stripe stripe-i18n! switchlet + tailwindcss-rails (~> 4.0) traceroute tzinfo (~> 2.0, >= 2.0.6) vcr diff --git a/Procfile.dev b/Procfile.dev index 65d9e59fea3..25eeb561a41 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,2 +1,3 @@ rails: rails s -b 0.0.0.0 -p 3000 webpacker: ./bin/shakapacker-dev-server +css: bin/rails tailwindcss:watch diff --git a/app/javascript/stylesheets/lp/layouts/_l-sections.sass b/app/assets/builds/.gitkeep similarity index 100% rename from app/javascript/stylesheets/lp/layouts/_l-sections.sass rename to app/assets/builds/.gitkeep diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index f3dd737cb87..832535c8483 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -1,2 +1,3 @@ //= link_tree ../images //= link_directory ../javascripts .js +//= link_directory ../builds .css diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css new file mode 100644 index 00000000000..e2d6d54fc12 --- /dev/null +++ b/app/assets/stylesheets/application.css @@ -0,0 +1,122 @@ +@import "tailwindcss" source(none); +@source "../../views/**/*.slim"; +@source "../../components/**/*.slim"; +@source "../../../app/javascript/**/*.{js,vue,jsx}"; +@source "./**/*.css"; + +@theme { + --container-*: initial; +} + +@import "./common-imports.css"; +@import "./application/base/_base.css"; +@import "./application/blocks/admin/_admin-table.css"; +@import "./application/blocks/admin/_admin-users.css"; +@import "./application/blocks/admin/_embedding-status.css"; +@import "./application/blocks/auth-form/_auth-form-nav.css"; +@import "./application/blocks/auth-form/_auth-form.css"; +@import "./application/blocks/auth-form/_next-settlement-time.css"; +@import "./application/blocks/auth-form/_skip-practices.css"; +@import "./application/blocks/cards/_card-counts.css"; +@import "./application/blocks/cards/_card-body-main-actions.css"; +@import "./application/blocks/company/_company-links.css"; +@import "./application/blocks/company/_company-profile.css"; +@import "./application/blocks/course/_courses.css"; +@import "./application/blocks/dashboard/_current-user-icon-list.css"; +@import "./application/blocks/dashboard/_dashboard-categories-item.css"; +@import "./application/blocks/dashboard/_dashboard-contents.css"; +@import "./application/blocks/dashboard/_welcome-message.css"; +@import "./application/blocks/dashboard/_unchecked-report-alert.css"; +@import "./application/blocks/event/_event-main-actions.css"; +@import "./application/blocks/event/_event-meta.css"; +@import "./application/blocks/footer/_footer-nav.css"; +@import "./application/blocks/footer/_footer.css"; +@import "./application/blocks/header/_header-current-user.css"; +@import "./application/blocks/header/_header-dropdown.css"; +@import "./application/blocks/header/_header-links.css"; +@import "./application/blocks/header/_header-notification-icon.css"; +@import "./application/blocks/header/_header.css"; +@import "./application/blocks/mention/_mention.css"; +@import "./application/blocks/modal/_modal-celebrate-report-count-body.css"; +@import "./application/blocks/page/_o-page-info.css"; +@import "./application/blocks/page/_page-body-actions.css"; +@import "./application/blocks/page/_page-body.css"; +@import "./application/blocks/page/_page-header.css"; +@import "./application/blocks/page/_page-header-actions.css"; +@import "./application/blocks/page/_page-main-header-actions.css"; +@import "./application/blocks/page/_page-main-header.css"; +@import "./application/blocks/page/_page-notices.css"; +@import "./application/blocks/page/_page-optional-header.css"; +@import "./application/blocks/page/_page-tabs.css"; +@import "./application/blocks/page/_page.css"; +@import "./application/blocks/page/_page-filter.css"; +@import "./application/blocks/page/_page-main-filter.css"; +@import "./application/blocks/page-content/_page-content.css"; +@import "./application/blocks/page-content/_page-content-header-actions.css"; +@import "./application/blocks/page-content/_page-content-header-metas.css"; +@import "./application/blocks/page-content/_page-content-header.css"; +@import "./application/blocks/page-content/_page-content-members.css"; +@import "./application/blocks/page-content/_page-content-prev-next.css"; +@import "./application/blocks/practice/_categories.css"; +@import "./application/blocks/practice/_category-practices-item.css"; +@import "./application/blocks/practice/_completion-massage.css"; +@import "./application/blocks/practice/_practice-content-actions.css"; +@import "./application/blocks/practice/_practice-content.css"; +@import "./application/blocks/practice/_practice-contents.css"; +@import "./application/blocks/practice/_practice-first-actions.css"; +@import "./application/blocks/practice/_practice-status-buttons.css"; +@import "./application/blocks/practice/_sticky-message.css"; +@import "./application/blocks/question/_answer-badge.css"; +@import "./application/blocks/reaction/_reaction.css"; +@import "./application/blocks/report/_learning-times.css"; +@import "./application/blocks/report/_stamp.css"; +@import "./application/blocks/side/_side-tabs-contents.css"; +@import "./application/blocks/side/_side-tabs-nav.css"; +@import "./application/blocks/side/_side-tabs.css"; +@import "./application/blocks/side/_user-statuses.css"; +@import "./application/blocks/static-pages/_thanks-message.css"; +@import "./application/blocks/static-pages/_thanks.css"; +@import "./application/blocks/survey/_survey-added-question.css"; +@import "./application/blocks/survey/_survey-additional-question.css"; +@import "./application/blocks/survey/_survey-questions-item.css"; +@import "./application/blocks/survey/_survey-questions.css"; +@import "./application/blocks/survey/survey-answer.css"; +@import "./application/blocks/survey/survey-result.css"; +@import "./application/blocks/survey/survey-answers.css"; +@import "./application/blocks/tags/_random-tags.css"; +@import "./application/blocks/tags/_tag-links.css"; +@import "./application/blocks/tags/_tag-input.css"; +@import "./application/blocks/thread/_thread-comment-form.css"; +@import "./application/blocks/thread/_thread-comment.css"; +@import "./application/blocks/thread/_thread-comments-more.css"; +@import "./application/blocks/thread/_thread-comments.css"; +@import "./application/blocks/thread/_thread-form.css"; +@import "./application/blocks/thread/_thread-header.css"; +@import "./application/blocks/thread/_action-completed.css"; +@import "./application/blocks/user/_active-practices-list.css"; +@import "./application/blocks/user/_companies-item.css"; +@import "./application/blocks/user/_completed-practices-progress.css"; +@import "./application/blocks/user/_following.css"; +@import "./application/blocks/user/_group-company-name.css"; +@import "./application/blocks/user/_niconico-calendar.css"; +@import "./application/blocks/user/_sns-links.css"; +@import "./application/blocks/user/_user-data.css"; +@import "./application/blocks/user/_user-grass.css"; +@import "./application/blocks/user/_user-group.css"; +@import "./application/blocks/user/_user-metas.css"; +@import "./application/blocks/user/_user-profile.css"; +@import "./application/blocks/user/_user-secret-attributes.css"; +@import "./application/blocks/user/_users-item.css"; +@import "./application/blocks/user/_user-study-streak-tracker.css"; +@import "./application/blocks/coding-test/_code-editor.css"; +@import "./application/blocks/coding-test/_io-sample.css"; +@import "./application/blocks/coding-test/_test-case.css"; +@import "./application/blocks/coding-test/_coding-test.css"; +@import "./application/blocks/coding-test/_result-table.css"; +@import "./application/blocks/coding-test/_coding-tests-item.css"; +@import "./application/blocks/micro-report/_micro-reports.css"; +@import "./application/blocks/micro-report/_micro-report.css"; +@import "./application/blocks/micro-report/_micro-report-form.css"; +@import "./application/blocks/micro-report/_micro-report-form-tabs.css"; +@import "./application/blocks/micro-report/_micro-report-actions.css"; +@import "./form/_zip-tel-input.css"; diff --git a/app/assets/stylesheets/application/base/_base.css b/app/assets/stylesheets/application/base/_base.css new file mode 100644 index 00000000000..0d95a028fbc --- /dev/null +++ b/app/assets/stylesheets/application/base/_base.css @@ -0,0 +1,67 @@ +html.is-application { + font-family: var(--sans-serif); + color: var(--default-text); +} + +body.is-application { + background-color: var(--background); +} + +body.is-no-scroll { + overflow-y: hidden; +} +body.is-no-scroll .header { + position: static; +} +body.is-no-scroll .wrapper { + padding-top: 0; +} + +body.is-piyo-background::before { + content: ""; + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + width: 100%; + height: 100%; + background-image: url(https://bootcamp.fjord.jp/images/background/background.svg); + background-repeat: repeat; + overflow-y: auto; + opacity: 0.04; + background-size: 20rem; +} +body.is-piyo-background .wrapper { + position: relative; + z-index: 1; +} + +body.no-global-nav .wrapper { + margin-left: 0; +} +body.no-header .wrapper { + padding-top: 0; +} +body.is-error-page .wrapper { + padding-top: 4rem; + overflow-y: auto; +} +body.is-thanks-page .wrapper { + padding-block: 4rem; +} + +@media (min-width: 48em) { + html.is-application { + scroll-padding-top: var(--header-height__md-up); + } + .wrapper.is-application { + margin-left: var(--global-nav-width); + padding-top: var(--header-height__md-up); + } +} +@media (max-width: 47.9375em) { + body.is-piyo-background::before { + background-size: 4.5rem auto; + } +} diff --git a/app/assets/stylesheets/application/blocks/admin/_admin-table.css b/app/assets/stylesheets/application/blocks/admin/_admin-table.css new file mode 100644 index 00000000000..ebc486c5bc5 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/admin/_admin-table.css @@ -0,0 +1,221 @@ + +@keyframes grab-background-color { + 0% { + background-color: var(--warning); + } + 100% { + background-color: var(--base); + } +} + +.admin-table { + margin-bottom: 1.5rem; +} + +@media (max-width: 47.9375em) { + .admin-table { + overflow-x: auto; + } +} + +.admin-table__table { + border-radius: .25rem; + width: 100%; +} + +.admin-table__header { + background-color: var(--background-semi-shade); + border: solid 1px var(--border-shade); + border-top-left-radius: .25rem; + border-top-right-radius: .25rem; +} + +.admin-table__items { + border-left: solid 1px var(--border); + border-right: solid 1px var(--border); +} + +.admin-table-item__title { + font-size: 1.5rem; + line-height: 1.45; + color: var(--default-text); +} + +.admin-table__label { + font-size: .75rem; + line-height: 1.4; + text-align: center; + font-weight: 700; + color: var(--main); + border: solid 1px var(--border-shade); + white-space: nowrap; + height: 2rem; + padding-inline: .5rem; +} + +.admin-table__label .a-button.is-icon { + min-height: 1.25rem; + height: 1.25rem; + font-size: .75rem; + margin-left: .5rem; + padding-inline: .375rem; + background-color: var(--base); + border-color: var(--border-shade); + color: var(--default-text); +} + +.admin-table__item { + transition: all .2s ease-out; + background-color: var(--base); +} + +.admin-table__item.is-retired { + background-color: var(--background-tint); +} + +.admin-table__item.is-retired:hover { + background-color: var(--background); +} + +.admin-table__item:last-child { + border-bottom-left-radius: .25rem; + border-bottom-right-radius: .25rem; +} + +.admin-table__item.sortable-chosen { + background-color: color-mix(in srgb, var(--warning) 20%, white); +} + +.admin-table__item:hover, +.admin-table.is-grab .admin-table__item:hover { + background-color: color-mix(in srgb, var(--primary) 10%, white); +} + +.admin-table__item[draggable="false"] { + background-color: var(--base); + animation: grab-background-color 1.25s ease 0s 1 normal none running; +} + +.admin-table__item-value { + padding: .375rem .75rem; + border: solid 1px var(--border); + font-size: .8125rem; + line-height: 1.45; +} + +.admin-table__item-value.is-text-align-center { + text-align: center; +} + +.admin-table__item-value .a-button { + margin-inline: .1875rem; +} + +.admin-table__item-value .is-button-group .a-button { + margin-inline: 0; +} + +.admin-table__item-value.is-grab { + padding: 0; +} + +.admin-table__item-blank { + font-size: .75rem; + line-height: 1.45; + color: var(--muted-text); +} + +.admin-table__item-logo-image { + border: solid 1px var(--border); + width: 2.5rem; + border-radius: .25rem; +} + +.admin-table-item__body { + border-radius: .25rem; + background-color: var(--base); + box-shadow: rgba(0, 0, 0, .2) 0 1px 4px; + overflow: hidden; +} + +.admin-table__user { + display: inline-flex; + align-items: center; + gap: .25rem .25rem; +} + +.admin-table__user-icon { + height: 2.125rem; + width: 2.125rem; + display: inline-block; + flex: 0 0 2.125rem; +} + +.admin-table__user-icon:not(:last-child) { + margin-right: .5rem; +} + +.admin-table__user-login-name { + overflow-wrap: break-word; + word-wrap: break-word; + color: var(--main-text); +} + +.admin-table__user:hover .admin-table__user-login-name { + text-decoration: underline; +} + +.is-user-icon-xl { + height: auto; + width: 100%; + margin-inline: auto; + border-radius: .25rem; +} + +.admin-table__item-block-link-container { + padding-top: .25em; + font-size: .75rem; +} + +.admin-table__item-block-link-container a { + text-decoration: none; + cursor: pointer; + color: var(--danger); +} + +.admin-table__item-block-link-container a:hover, +.admin-table__item-block-link-container a:active { + text-decoration: underline; +} + +.admin-table.is-loading .admin-table__header { + border: solid 1px var(--border); + background-color: var(--background); +} + +.admin-table.is-loading .admin-table__label { + border: solid 1px var(--border); + text-align: center; +} + +.admin-table.is-loading .admin-table__label .a-placeholder { + height: 1.05rem; + width: 30%; + display: inline-block; + vertical-align: middle; +} + +.admin-table.is-loading .admin-table__item-value { + height: 2.75rem; + border: solid 1px var(--border); + pointer-events: none; + text-align: center; + vertical-align: middle; +} + +.admin-table.is-loading .admin-table__item-value .a-placeholder { + height: 1.1875rem; + width: 60%; + display: inline-block; + vertical-align: middle; +} diff --git a/app/assets/stylesheets/application/blocks/admin/_admin-users.css b/app/assets/stylesheets/application/blocks/admin/_admin-users.css new file mode 100644 index 00000000000..7c9664994be --- /dev/null +++ b/app/assets/stylesheets/application/blocks/admin/_admin-users.css @@ -0,0 +1,3 @@ +.admin-users { + width: 100%; +} diff --git a/app/assets/stylesheets/application/blocks/admin/_embedding-status.css b/app/assets/stylesheets/application/blocks/admin/_embedding-status.css new file mode 100644 index 00000000000..9fbf01ac149 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/admin/_embedding-status.css @@ -0,0 +1,19 @@ +/* テーブル内プログレスバー */ +.embedding-status-progress { + background-color: var(--background-semi-shade); + border-radius: 0.25rem; + height: 0.5rem; + overflow: hidden; + min-width: 8rem; +} + +.embedding-status-progress__bar { + height: 100%; + background-color: var(--primary); + border-radius: 0.25rem; + transition: width 0.3s ease; +} + +.embedding-status-progress__bar.is-complete { + background-color: var(--success); +} diff --git a/app/assets/stylesheets/application/blocks/auth-form/_auth-form-nav.css b/app/assets/stylesheets/application/blocks/auth-form/_auth-form-nav.css new file mode 100644 index 00000000000..9bffac99a97 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/auth-form/_auth-form-nav.css @@ -0,0 +1,23 @@ +.auth-form-nav { + display: flex; + justify-content: flex-end; +} + +.auth-form-nav__items { + display: flex; + gap: 3rem; + justify-content: center; + width: 100%; +} + +.auth-form-nav__item-link { + cursor: pointer; + font-size: 0.75rem; + line-height: 1.45; + color: var(--main); + text-decoration: none; + cursor: pointer; +} +.auth-form-nav__item-link:hover, .auth-form-nav__item-link:active { + text-decoration: underline; +} diff --git a/app/assets/stylesheets/application/blocks/auth-form/_auth-form.css b/app/assets/stylesheets/application/blocks/auth-form/_auth-form.css new file mode 100644 index 00000000000..1a2db9249fd --- /dev/null +++ b/app/assets/stylesheets/application/blocks/auth-form/_auth-form.css @@ -0,0 +1,113 @@ + +.auth-form-logo-image { + display: block; +} + +@media (min-width: 48em) { + .auth-form-logo-image { + max-width: 10rem; + margin: 4rem auto 2rem; + } +} + +@media (max-width: 47.9375em) { + .auth-form-logo-image { + max-width: 10rem; + margin: 2rem auto; + } +} + +.auth-form { + width: 28rem; + max-width: calc(100vw - 2rem); + margin-bottom: 2rem; +} + +@media (min-width: 48em) { + .auth-form { + margin-inline: auto; + } +} + +@media (max-width: 47.9375em) { + .auth-form { + margin-inline: 1rem; + } +} + +.auth-form.is-lg { + width: 34rem; +} + +@media (min-width: 48em) { + .auth-form.is-lg { + margin-top: 3rem; + } +} + +@media (max-width: 47.9375em) { + .auth-form.is-lg { + margin-top: 1rem; + } +} + +.page-header + .auth-form { + margin-top: 1.5rem; +} + +.auth-form__header { + border-bottom: solid 1px var(--border-tint); + padding: 1rem 1.75rem; +} + +.auth-form__body { +} + +@media (min-width: 48em) { + .auth-form__body { + padding: 1.5rem 1.75rem; + } +} + +@media (max-width: 47.9375em) { + .auth-form__body { + padding: 1.25rem 1rem; + } +} + +.auth-form__footer { + padding: 1rem 1.75rem; +} + +.auth-form__title { + font-size: 1.25rem; + line-height: 1.4; + text-align: center; + font-weight: 700; +} + +.auth-form-items { + margin-bottom: 1.25rem; +} + +.auth-form__alert { + padding: .5rem 1.5rem; + background-color: var(--danger); + text-align: center; + font-size: .8125rem; + line-height: 1.4; + color: var(--reversal-text); + margin: 1rem 1rem 0; + border-radius: .25rem; +} + +.auth-form__alert a { + text-decoration: none; + cursor: pointer; + color: var(--reversal-text); +} + +.auth-form__alert a:hover, +.auth-form__alert a:active { + text-decoration: underline; +} diff --git a/app/assets/stylesheets/application/blocks/auth-form/_next-settlement-time.css b/app/assets/stylesheets/application/blocks/auth-form/_next-settlement-time.css new file mode 100644 index 00000000000..f0d47a1f06b --- /dev/null +++ b/app/assets/stylesheets/application/blocks/auth-form/_next-settlement-time.css @@ -0,0 +1,25 @@ + +.next-settlement-time { + @media (min-width: 48em) { + display: flex; + align-items: center; + justify-content: center; + + } +} +.next-settlement-time__title { + font-size: .875rem; + line-height: 1.4; + font-weight: 400; + @media (min-width: 48em) { + margin-right: .5em; + + } +} +.next-settlement-time__time { + font-size: 1rem; + line-height: 1.4; + font-weight: 700; + color: var(--danger); + +} diff --git a/app/assets/stylesheets/application/blocks/auth-form/_skip-practices.css b/app/assets/stylesheets/application/blocks/auth-form/_skip-practices.css new file mode 100644 index 00000000000..e849be562fc --- /dev/null +++ b/app/assets/stylesheets/application/blocks/auth-form/_skip-practices.css @@ -0,0 +1,72 @@ +.skip-practices + .skip-practices { + margin-top: 0.5rem; +} + +.skip-practices__inner { + border-radius: 0.25rem; + border: solid 1px var(--border); + overflow: hidden; + transition: all 0.2s ease-out; +} + +input:checked + .skip-practices__inner { + border-color: var(--primary); +} + +.skip-practices__header { + display: flex; + justify-content: space-between; + height: 2.5rem; + font-size: 0.875rem; + line-height: 1.5; + padding: 0.75rem; + align-items: center; + cursor: pointer; + color: var(--semi-muted-text); + transition: all 0.2s ease-out; +} + +.skip-practices__header:hover { + background-color: var(--background); +} + +input:checked + .skip-practices__inner .skip-practices__header { + background-color: var(--primary-tint); + color: var(--primary-text); +} + +.skip-practices__category-angle-icon { + transition: all 0.2s ease-out; +} + +input:checked + .skip-practices__inner .skip-practices__category-angle-icon { + transform: rotate(180deg); +} + +.skip-practices__category-name { + transition: all 0.2s ease-out; +} + +.skip-practices__header:hover .skip-practices__category-name { + text-decoration: underline; + color: var(--default-text); +} + +.skip-practices__start { + display: flex; + gap: 0.25rem; +} + +.skip-practices__body { + transition: all 0.2s ease-out; + display: none; + border-top: solid 1px var(--primary-semi-tint); + margin-top: -1px; + padding: 0.75rem; + font-size: 0.8125rem; + background-color: var(--primary-tint); +} + +input:checked + .skip-practices__inner .skip-practices__body { + display: block; +} diff --git a/app/assets/stylesheets/application/blocks/cards/_card-body-main-actions.css b/app/assets/stylesheets/application/blocks/cards/_card-body-main-actions.css new file mode 100644 index 00000000000..e1233b4fb05 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/cards/_card-body-main-actions.css @@ -0,0 +1,81 @@ + +.card-body-main-actions { + position: relative; + z-index: 1; + padding-block: .75rem; + margin-inline: 1rem; + border-radius: 4px; +} + +@media (min-width: 48em) { + .card-body-main-actions { + padding-inline: 2rem; + margin-bottom: 1.5rem; + } +} + +@media (max-width: 47.9375em) { + .card-body-main-actions { + padding-inline: .75rem; + margin-bottom: 1rem; + } +} + +.card-body-main-actions.is-success { + background-color: #f8fff2; + border: 1px solid var(--success); + color: var(--success-text); +} + +.card-body-main-actions.is-primary { + border: 1px solid var(--primary); + background-color: #f5f5ff; + color: var(--primary-text); +} + +.card-body-main-actions.is-warning { + border: 1px solid var(--warning); + background-color: #fff9e7; + color: var(--warning-text); +} + +.card-body-main-actions.is-danger { + border: 1px solid var(--danger); + background-color: var(--danger-tint); + color: var(--danger-text); +} + +.card-body-main-actions__description { + font-size: .875rem; + line-height: 1.4; + margin-bottom: .75em; + text-align: center; +} + +.card-body-main-actions__items { + display: flex; + justify-content: center; +} + +.card-body-main-actions__item { + text-align: center; + flex: 1; +} + +@media (min-width: 48em) { + .card-body-main-actions__item { + max-width: 16rem; + } +} + +.card-body-main-actions__item-cancel { + text-decoration: none; + cursor: pointer; + color: var(--muted-text); + font-size: .8125rem; +} + +.card-body-main-actions__item-cancel:hover, +.card-body-main-actions__item-cancel:active { + text-decoration: underline; +} diff --git a/app/assets/stylesheets/application/blocks/cards/_card-counts.css b/app/assets/stylesheets/application/blocks/cards/_card-counts.css new file mode 100644 index 00000000000..0b8e1834351 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/cards/_card-counts.css @@ -0,0 +1,102 @@ + +.card-counts { +} + +@media (min-width: 48em) { + .card-counts.is-user { + margin-bottom: 1.5rem; + } +} + +@media (max-width: 47.9375em) { + .card-counts.is-user { + margin-bottom: 1.25rem; + } +} + +.card-counts__items { + display: flex; + gap: .5rem; + flex-wrap: wrap; + container-type: inline-size; + container-name: users-item; +} + +.card-counts__item { + background-color: var(--base); +} + +@container users-item (max-width: 299px) { + .card-counts__item { + flex: 0 0 calc((100% - (.5rem * 2)) / 3); + max-width: calc((100% - (.5rem * 2)) / 3); + } +} + +@container users-item (min-width: 300px) { + .card-counts__item { + flex: 0 0 calc((100% - (.5rem * 3)) / 4); + max-width: calc((100% - (.5rem * 3)) / 4); + } +} + +@container users-item (min-width: 401px) { + .card-counts__item { + flex: 0 0 calc((100% - (.5rem * 4)) / 5); + max-width: calc((100% - (.5rem * 4)) / 5); + } +} + +@container users-item (min-width: 460px) { + .card-counts__item { + flex: 0 0 calc((100% - (.5rem * 5)) / 6); + max-width: calc((100% - (.5rem * 5)) / 6); + } +} + +.card-counts__item-inner { + border: solid 1px var(--border); + border-radius: 3px; +} + +.card-counts__item-label { + font-size: .625rem; + line-height: 1.4; + white-space: nowrap; + max-width: 100%; + overflow: hidden; + text-align: center; + color: var(--semi-muted-text); + padding: .125rem .125rem; + border-bottom: solid 1px var(--border); + height: 1.25rem; + text-overflow: ellipsis; +} + +.card-counts__item-label.is-sm span { + transform: scale(.85); +} + +.card-counts__item-value { + color: var(--muted-text); + font-size: .875rem; + line-height: 1.4; + padding-bottom: .125rem; + text-align: center; +} + +.card-counts__item-value.is-empty { + color: var(--muted-text); +} + +.card-counts__item-value a { + text-decoration: none; + cursor: pointer; + display: block; + color: var(--link-text); +} + +.card-counts__item-value a:hover, +.card-counts__item-value a:active { + text-decoration: underline; +} diff --git a/app/assets/stylesheets/application/blocks/coding-test/_code-editor.css b/app/assets/stylesheets/application/blocks/coding-test/_code-editor.css new file mode 100644 index 00000000000..23e12d7029a --- /dev/null +++ b/app/assets/stylesheets/application/blocks/coding-test/_code-editor.css @@ -0,0 +1,6 @@ +.code-editor { + font-size: 0.875rem; + line-height: 1.5; + field-sizing: content; + min-height: 20lh; +} diff --git a/app/assets/stylesheets/application/blocks/coding-test/_coding-test.css b/app/assets/stylesheets/application/blocks/coding-test/_coding-test.css new file mode 100644 index 00000000000..f6ea50b583d --- /dev/null +++ b/app/assets/stylesheets/application/blocks/coding-test/_coding-test.css @@ -0,0 +1,4 @@ +.coding-test__language { + font-size: 0.875rem; + line-height: 1.4; +} diff --git a/app/assets/stylesheets/application/blocks/coding-test/_coding-tests-item.css b/app/assets/stylesheets/application/blocks/coding-test/_coding-tests-item.css new file mode 100644 index 00000000000..91675f1f4a4 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/coding-test/_coding-tests-item.css @@ -0,0 +1,10 @@ +.coding-tests-item { + display: flex; + gap: 0.5rem; + align-items: center; +} + +.coding-tests-item__test-link { + font-size: 0.875rem; + line-height: 1.4; +} diff --git a/app/assets/stylesheets/application/blocks/coding-test/_io-sample.css b/app/assets/stylesheets/application/blocks/coding-test/_io-sample.css new file mode 100644 index 00000000000..331cd1675ab --- /dev/null +++ b/app/assets/stylesheets/application/blocks/coding-test/_io-sample.css @@ -0,0 +1,16 @@ +.io-sample__title { + font-size: 0.875rem; + line-height: 1.4; + font-weight: 700; +} + +.io-sample__body { + margin-top: 0.5rem; + font-size: 0.875rem; +} + +.io-sample__code { + padding: 0.75rem; + border-radius: 0.25rem; + font-family: var(--monospace); +} diff --git a/app/assets/stylesheets/application/blocks/coding-test/_result-table.css b/app/assets/stylesheets/application/blocks/coding-test/_result-table.css new file mode 100644 index 00000000000..23b1f86863e --- /dev/null +++ b/app/assets/stylesheets/application/blocks/coding-test/_result-table.css @@ -0,0 +1,17 @@ +.result-table tr.is-wa td, .result-table tr.is-re td { + background-color: var(--danger-tint); +} +.result-table tr.is-ac td { + background-color: var(--success-tint); +} +.result-table .status.wa, +.result-table .status.re { + color: var(--danger-text); +} +.result-table .status.ac { + color: var(--success-text); +} +.result-table pre, +.result-table code { + font-family: var(--monospace); +} diff --git a/app/assets/stylesheets/application/blocks/coding-test/_test-case.css b/app/assets/stylesheets/application/blocks/coding-test/_test-case.css new file mode 100644 index 00000000000..62f12491f85 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/coding-test/_test-case.css @@ -0,0 +1,3 @@ +.test-case__header { + position: relative; +} diff --git a/app/assets/stylesheets/application/blocks/company/_company-links.css b/app/assets/stylesheets/application/blocks/company/_company-links.css new file mode 100644 index 00000000000..8d51f1c1e8e --- /dev/null +++ b/app/assets/stylesheets/application/blocks/company/_company-links.css @@ -0,0 +1,24 @@ +.company-links { + margin-top: 0.5rem; +} + +.company-links__items { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.company-links__item { + flex: 0 0 auto; +} + +@media (min-width: 96em) { + .company-links__item { + flex: 0 0 calc((100% - 1rem) / 3); + } +} +@media (max-width: 79.9375em) { + .company-links__item { + flex: 0 0 calc((100% - 0.5rem) / 2); + } +} diff --git a/app/assets/stylesheets/application/blocks/company/_company-profile.css b/app/assets/stylesheets/application/blocks/company/_company-profile.css new file mode 100644 index 00000000000..9b81b3b9012 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/company/_company-profile.css @@ -0,0 +1,68 @@ +.company-profile__header { + padding: 1rem; +} +.company-profile__header .company-links__items { + justify-content: flex-start; +} + +.company-profile__header-inner { + text-align: center; +} + +.company-profile__header-start { + margin-right: 1.25rem; +} + +.company-profile__header-end { + flex: 1; +} + +.company-profile__logo { + position: static; + text-align: center; + margin-bottom: 0.25rem; +} + +.company-profile__logo-image { + background-color: var(--base); + object-fit: contain; + border-radius: 0.25rem; + width: 3.5rem; + height: 3.5rem; +} + +.company-profile__name { + font-weight: 800; + color: var(--main-text); + font-size: 1.25rem; + line-height: 1.45; +} + +.company-profile__body { + padding: 1rem; +} + +.company-profile__description { + font-size: 0.8125rem; +} + +@media (min-width: 48em) { + .company-profile__header-inner { + display: flex; + text-align: left; + } + .company-profile__logo { + margin-bottom: 0; + text-align: left; + } + .company-profile__logo-image { + width: 4.5rem; + height: 4.5rem; + } + .company-profile__name { + font-size: 1.5rem; + } + .company-profile__description { + font-size: 0.9375rem; + } +} diff --git a/app/assets/stylesheets/application/blocks/course/_courses.css b/app/assets/stylesheets/application/blocks/course/_courses.css new file mode 100644 index 00000000000..7efe49e8f47 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/course/_courses.css @@ -0,0 +1,79 @@ + +.courses-item { + height: 100%; +} + +.courses-item__inner { + height: 100%; +} + +.courses-item__header { + padding: .75rem 1.25rem 0; +} + +.courses-item__title { + font-size: 1.125rem; + line-height: 1.4; +} + +.courses-item__title-icon { + font-size: .6875rem; + line-height: 1; + color: var(--semi-muted-text); + display: inline-flex; + white-space: nowrap; + font-weight: 400; + padding-inline: .5rem; + height: 1.125rem; + margin-right: .5rem; + border-radius: .75rem; + align-items: center; + justify-content: center; + position: relative; +} + +@media (min-width: 48em) { + .courses-item__title-icon { + top: -.125rem; + } +} + +@media (max-width: 47.9375em) { + .courses-item__title-icon { + top: -.1875rem; + } +} + +.courses-item__title-icon.is-closed { + background-color: var(--background-tint); +} + +.courses-item__title-link { + display: block; + text-decoration: none; +} + +.courses-item__title-label { + color: var(--main-text); + transition: all .2s ease-out; + font-weight: 700; +} + +.is-closed .courses-item__title-label { + color: var(--muted-text); +} + +.is-closed .courses-item__title-link:hover .courses-item__title-label, +.courses-item__title-link:hover .courses-item__title-label { + text-decoration: underline; + color: var(--main-text); +} + +.courses-item__description { + padding: .5rem 1.25rem .75rem; +} + +.courses-item__description p { + font-size: .8125rem; + line-height: 1.6; +} diff --git a/app/assets/stylesheets/application/blocks/dashboard/_current-user-icon-list.css b/app/assets/stylesheets/application/blocks/dashboard/_current-user-icon-list.css new file mode 100644 index 00000000000..17925432d2e --- /dev/null +++ b/app/assets/stylesheets/application/blocks/dashboard/_current-user-icon-list.css @@ -0,0 +1,56 @@ + +.current-user-icon-list { + margin-bottom: 1rem; + background-color: #eaeaf1; + padding-block: .5rem; + /* fallback for older UA */ + padding-top: .5rem; + padding-bottom: .5rem; +} + +.current-user-icon-list__inner { + display: flex; + align-items: center; + gap: .5rem; +} + +.current-user-icon-list__items { + display: flex; + align-items: center; + gap: .25rem; + flex: 1 1 auto; + min-width: 0; + flex-wrap: nowrap; + overflow-x: auto; + overflow-y: hidden; + scrollbar-gutter: stable both-edges; +} + +.current-user-icon-list__item { + flex: 0 0 2.5rem; +} + +@media (min-width: 48em) { + .current-user-icon-list__item { + flex: 0 0 3rem; + } +} + +@media (max-width: 47.9375em) { + .current-user-icon-list__item { + flex: 0 0 2rem; + } +} + +.current-user-icon-list__title-label { + font-size: .875rem; + line-height: 1.4; + font-weight: 700; + white-space: nowrap; +} + +.current-user-icon-list__title-time { + font-size: .75rem; + line-height: 1.4; + white-space: nowrap; +} diff --git a/app/assets/stylesheets/application/blocks/dashboard/_dashboard-categories-item.css b/app/assets/stylesheets/application/blocks/dashboard/_dashboard-categories-item.css new file mode 100644 index 00000000000..000d35dfc48 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/dashboard/_dashboard-categories-item.css @@ -0,0 +1,15 @@ +.dashboard-category__header { + padding-bottom: 0.25rem; + border-bottom: dashed 1px var(--border); +} + +.dashboard-category__title { + font-size: 0.75rem; + line-height: 1.4; + font-weight: 700; +} + +.dashboard-category__body:not(:first-child) { + flex: 1; + margin-top: 1rem; +} diff --git a/app/assets/stylesheets/application/blocks/dashboard/_dashboard-contents.css b/app/assets/stylesheets/application/blocks/dashboard/_dashboard-contents.css new file mode 100644 index 00000000000..88f722c01af --- /dev/null +++ b/app/assets/stylesheets/application/blocks/dashboard/_dashboard-contents.css @@ -0,0 +1,32 @@ +.dashboard-contents__cols { + display: flex; + gap: 1rem; +} +@media (max-width: 47.9375em) { + .dashboard-contents__cols { + flex-direction: column; + } +} + +.dashboard-contents__col { + width: 100%; +} +@media (min-width: 48em) { + .dashboard-contents__col.is-sub { + max-width: 20rem; + } +} +@media (min-width: 40em) { + .dashboard-contents__col.is-sub { + flex: 1; + } +} +.dashboard-contents__col.is-main { + flex: 1; +} + +.dashboard-contents__categories { + display: flex; + flex-direction: column; + gap: 1rem; +} diff --git a/app/assets/stylesheets/application/blocks/dashboard/_unchecked-report-alert.css b/app/assets/stylesheets/application/blocks/dashboard/_unchecked-report-alert.css new file mode 100644 index 00000000000..08f096e41d4 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/dashboard/_unchecked-report-alert.css @@ -0,0 +1,42 @@ +.unchecked-report-alert__header { + background-color: var(--danger); + padding: 0.125rem 1rem; +} + +.unchecked-report-alert__header-title { + font-size: 0.75rem; + line-height: 1.4; + font-weight: 700; + color: var(--reversal-text); +} + +.unchecked-report-alert__inner { + padding: 0.25rem 1rem; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.unchecked-report-alert__icon { + font-size: 2rem; +} + +.unchecked-report-alert__message { + font-size: 0.8125rem; + line-height: 1.4; + text-align: center; + flex: 1; +} + +.unchecked-report-alert__message-link { + color: var(--danger-text); +} + +.unchecked-report-alert__count { + margin-inline: 0.125rem; +} + +.unchecked-report-alert__count-number { + font-size: 1.25rem; + margin-right: 0.0625rem; +} diff --git a/app/assets/stylesheets/application/blocks/dashboard/_welcome-message.css b/app/assets/stylesheets/application/blocks/dashboard/_welcome-message.css new file mode 100644 index 00000000000..43ed8629530 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/dashboard/_welcome-message.css @@ -0,0 +1,45 @@ + +.welcome-message { + position: relative; + padding-top: 2.5rem; + +} +.welcome-message__inner { + @media (min-width: 48em) { + padding: 3.5rem 3rem 2rem; + } + @media (max-width: 47.9375em) { + padding: 3.5rem 1rem 1rem; + + } +} +.welcome-message__author { + height: 5rem; + width: 5rem; + margin-inline: auto; + padding: .75rem; + border-radius: 50%; + border: solid 1px color.shade(var(--warning), 10%); + left: 50%; + position: absolute; + top: 0; + transform: translate(-50%, 0); + background-color: var(--warning); + +} +.welcome-message__header { + font-size: 1.5rem; + margin-bottom: 1em; + +} +.welcome-message__title { + font-size: 1em; + line-height: 1.4; + text-align: center; + font-weight: 800; + +} +.welcome-message__body { + font-size: .9375rem; + +} diff --git a/app/assets/stylesheets/application/blocks/event/_event-main-actions.css b/app/assets/stylesheets/application/blocks/event/_event-main-actions.css new file mode 100644 index 00000000000..d18f20e3acd --- /dev/null +++ b/app/assets/stylesheets/application/blocks/event/_event-main-actions.css @@ -0,0 +1,81 @@ + +.event-main-actions { + position: relative; + z-index: 1; + padding-block: .75rem; + margin-inline: 1rem; + border-radius: 4px; +} + +@media (min-width: 48em) { + .event-main-actions { + padding-inline: 2rem; + margin-bottom: 1.5rem; + } +} + +@media (max-width: 47.9375em) { + .event-main-actions { + padding-inline: .75rem; + margin-bottom: 1rem; + } +} + +.event-main-actions.is-participationed { + background-color: #f8fff2; + border: 1px solid var(--success); + color: #4e732e; +} + +.event-main-actions.is-unparticipationed.is-available { + border: 1px solid var(--primary); + background-color: #f5f5ff; + color: #28248c; +} + +.event-main-actions.is-unparticipationed.is-capacity-over { + border: 1px solid var(--warning); + background-color: #fff9e7; + color: #6f5819; +} + +.event-main-actions.is-non-participationed { + border: 1px solid var(--danger); + background-color: var(--danger-tint); + color: var(--danger); +} + +.event-main-actions__description { + font-size: .875rem; + line-height: 1.4; + margin-bottom: .75em; + text-align: center; +} + +.event-main-actions__items { + display: flex; + justify-content: center; +} + +.event-main-actions__item { + text-align: center; + flex: 1; +} + +@media (min-width: 48em) { + .event-main-actions__item { + max-width: 16rem; + } +} + +.event-main-actions__item-cancel { + text-decoration: none; + cursor: pointer; + color: var(--muted-text); + font-size: .8125rem; +} + +.event-main-actions__item-cancel:hover, +.event-main-actions__item-cancel:active { + text-decoration: underline; +} diff --git a/app/assets/stylesheets/application/blocks/event/_event-meta.css b/app/assets/stylesheets/application/blocks/event/_event-meta.css new file mode 100644 index 00000000000..08b74c6e7a2 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/event/_event-meta.css @@ -0,0 +1,103 @@ + +.event-meta { +} + +@media (min-width: 48em) { + .event-meta { + font-size: .8125rem; + } +} + +@media (max-width: 47.9375em) { + .event-meta { + font-size: .75rem; + } +} + +.event-meta__inner { +} + +@media (min-width: 48em) { + .event-meta__inner { + padding: .75rem 1.5rem; + } +} + +@media (max-width: 47.9375em) { + .event-meta__inner { + padding: .5rem .75rem; + } +} + +.event-meta__item { + line-height: 1.5; +} + +@media (min-width: 48em) { + .event-meta__item { + display: flex; + align-items: center; + } +} + +.event-meta__item:not(:first-child) { + margin-top: .5rem; + padding-top: .5rem; + border-top: solid var(--border-tint) 1px; +} + +.event-meta__item-label { + flex-basis: 5em; + margin-right: .75em; + white-space: nowrap; + font-weight: 600; +} + +@media (min-width: 48em) { + .event-meta__item-label { + text-align: right; + } +} + +@media (max-width: 47.9375em) { + .event-meta__item-label { + font-size: .875em; + } +} + +.event-meta__item-value { + flex: 1; +} + +@media (min-width: 48em) { + .event-meta__item-value { + display: flex; + align-items: center; + } +} + +.event-meta__item-value a:not(.a-button) { + text-decoration: none; + cursor: pointer; +} + +.event-meta__item-value a:not(.a-button):hover, +.event-meta__item-value a:not(.a-button):active { + text-decoration: underline; +} + +.event-meta__item-value-main { + display: block; +} + +@media (min-width: 48em) { + .event-meta__item-value-main { + margin-right: .5rem; + } +} + +@media (max-width: 47.9375em) { + .event-meta__item-value-main { + margin-bottom: .25rem; + } +} diff --git a/app/assets/stylesheets/application/blocks/footer/_footer-nav.css b/app/assets/stylesheets/application/blocks/footer/_footer-nav.css new file mode 100644 index 00000000000..5f9a35a2cea --- /dev/null +++ b/app/assets/stylesheets/application/blocks/footer/_footer-nav.css @@ -0,0 +1,61 @@ + +.footer-nav__items { + display: flex; + line-height: 1.4; + flex-wrap: wrap; + align-items: center; +} + +@media (min-width: 48em) { + .footer-nav__items { + font-size: .8125rem; + justify-content: center; + gap: 1.75rem; + } +} + +@media (max-width: 47.9375em) { + .footer-nav__items { + font-size: .75rem; + } +} + +.footer-nav__item { +} + +@media (max-width: 47.9375em) { + .footer-nav__item { + flex: 0 0 50%; + } + + .footer-nav__item:nth-child(odd) { + border-right: solid 1px var(--border); + } +} + +.footer-nav__item-link { + color: var(--semi-muted-text); +} + +@media (min-width: 48em) { + .footer-nav__item-link { + text-decoration: none; + cursor: pointer; + } + + .footer-nav__item-link:hover, + .footer-nav__item-link:active { + text-decoration: underline; + } +} + +@media (max-width: 47.9375em) { + .footer-nav__item-link { + display: flex; + text-decoration: none; + padding: .25rem 1rem; + min-height: 2.75rem; + align-items: center; + border-bottom: solid 1px var(--border); + } +} diff --git a/app/assets/stylesheets/application/blocks/footer/_footer.css b/app/assets/stylesheets/application/blocks/footer/_footer.css new file mode 100644 index 00000000000..e69a79c0c6f --- /dev/null +++ b/app/assets/stylesheets/application/blocks/footer/_footer.css @@ -0,0 +1,49 @@ + +.footer { + color: var(--semi-muted-text); +} + +@media (min-width: 48em) { + .footer { + padding-block: 1.5rem; + } +} + +@media (max-width: 47.9375em) { + .footer .container { + padding-inline: 0; + } +} + +.footer__copyright { + line-height: 1.4; + display: block; + text-align: center; + color: var(--semi-muted-text); +} + +@media (min-width: 48em) { + .footer__copyright { + font-size: .8125rem; + margin-top: 1.5em; + } +} + +@media (max-width: 47.9375em) { + .footer__copyright { + font-size: .75rem; + padding-block: 1.25rem; + } +} + +.footer__copyright-link { + margin-inline: .25em; + text-decoration: none; + cursor: pointer; + color: var(--semi-muted-text); +} + +.footer__copyright-link:hover, +.footer__copyright-link:active { + text-decoration: underline; +} diff --git a/app/assets/stylesheets/application/blocks/header/_header-current-user.css b/app/assets/stylesheets/application/blocks/header/_header-current-user.css new file mode 100644 index 00000000000..868bba6470e --- /dev/null +++ b/app/assets/stylesheets/application/blocks/header/_header-current-user.css @@ -0,0 +1,14 @@ + +.header-current-user__icon { + display: block; + margin-inline: auto; + @media (min-width: 48em) { + width: 1.5rem; + height: 1.5rem; + } + @media (max-width: 47.9375em) { + width: 1.125rem; + height: 1.125rem; + + } +} diff --git a/app/assets/stylesheets/application/blocks/header/_header-dropdown.css b/app/assets/stylesheets/application/blocks/header/_header-dropdown.css new file mode 100644 index 00000000000..278198b85cb --- /dev/null +++ b/app/assets/stylesheets/application/blocks/header/_header-dropdown.css @@ -0,0 +1,259 @@ +.header-dropdown { + position: fixed; + left: 0; + top: 0; + bottom: 0; + z-index: 100; + background-color: rgba(0, 0, 0, 0); + width: 0; + cursor: pointer; + transition: background-color 0.4s ease-in; + overflow: hidden; + display: block; +} +input:checked + .header-dropdown, .is-opened-dropdown .header-dropdown { + opacity: 1; + width: 100%; +} + +@media (max-width: 47.9375em) { + .header-dropdown__inner { + overflow-y: auto; + background-color: var(--main); + position: fixed; + top: 0; + bottom: 0; + right: auto; + z-index: 1; + transition: left 0.2s ease-out; + width: var(--global-nav-width-sm); + left: calc(var(--global-nav-width-sm) * -1); + } + input:checked + .header-dropdown .header-dropdown__inner, .is-opened-dropdown .header-dropdown__inner { + left: 0; + } +} + +.header-dropdown__inner.is-notification { + left: 0; +} + +@media (max-width: 47.9375em) { + .header-dropdown__inner.is-notification .pill-nav__item-link { + border-color: var(--base); + color: var(--reversal-text); + width: 100%; + } +} + +.header-dropdown__inner.is-notification .o-empty-message { + opacity: 0.7; + color: var(--reversal-text); +} + +.header-dropdown__header { + padding: 1rem; + border-bottom: solid 1px var(--main-semi-shade); +} + +.header-dropdown__label { + font-size: 0.625rem; + line-height: 1.4; + font-weight: 700; + padding: 0.25rem 0.75rem; + color: var(--reversal-text); + background-color: var(--main-semi-shade); +} + +.header-dropdown__inner.is-notification .header-dropdown__items { + overflow-y: auto; + max-height: calc(100vh - 134px); + margin-bottom: -1px; +} + +.header-dropdown__item-link { + font-size: 0.875rem; + line-height: 1.4; + display: flex; + text-decoration: none; + padding: 0.75rem; + transition: all 0.2s ease-out; + color: var(--reversal-text); + border-bottom: solid 1px var(--main-semi-shade); +} +.header-dropdown__item-link:hover { + background-color: var(--main-shade); +} + +.header-dropdown__footer { + border-bottom-left-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + overflow: hidden; + border-top: solid 1px var(--main-semi-shade); +} + +.header-dropdown__footer-link { + font-size: 0.875rem; + line-height: 1.4; + display: flex; + text-decoration: none; + align-items: center; + justify-content: center; + width: 100%; + height: 2.75rem; + transition: all 0.2s ease-out; + color: var(--reversal-text); +} +.header-dropdown__footer-link:hover { + background-color: var(--main-shade); +} +.header-dropdown__footer-link { + border-bottom: solid 1px var(--main-semi-shade); +} + +.header-dropdown__background { + background-color: rgba(0, 0, 0, 0.6); + bottom: 0; + left: 0; + position: fixed; + top: 0; + z-index: 1; + height: 100%; + width: 0; + display: inline; + opacity: 0; +} +input:checked + .header-dropdown .header-dropdown__background { + opacity: 1; + width: 100%; + display: block; +} +.header-dropdown__background.is-notification { + opacity: 1; + width: 100%; +} + +.header-dropdown__page-link-container { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + margin-top: 1rem; +} + +.header-dropdown__page-link { + font-size: 0.875rem; + line-height: 1.4; + text-decoration: none; + cursor: pointer; +} +.header-dropdown__page-link:hover, .header-dropdown__page-link:active { + text-decoration: underline; +} +.header-dropdown__page-link { + transition: all 0.2s ease-out; + color: var(--reversal-text); +} + +@media (min-width: 48em) { + .header-dropdown { + display: none; + position: static; + width: auto; + background-color: transparent; + overflow: visible; + } + input:checked + .header-dropdown, .is-opened-dropdown .header-dropdown { + display: block; + } + .header-dropdown__inner { + position: absolute; + right: 0; + top: 100%; + z-index: 2; + background-color: var(--base); + border: solid 1px var(--border-shade); + width: 14rem; + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0.375rem; + border-radius: 0.25rem; + max-height: calc(100vh - 6rem); + left: auto; + overflow: auto; + } + .header-dropdown__inner.is-notification { + width: 15rem; + } + .header-dropdown__inner.is-notification { + left: auto; + background-color: var(--base); + } + .header-dropdown__inner.is-notification .o-empty-message { + color: var(--muted-text); + opacity: 1; + } + .header-dropdown__header { + border-bottom: solid 1px var(--border-tint); + } + .header-dropdown__label { + color: var(--default-text); + background-color: var(--background-semi-shade); + } + .header-dropdown__inner.is-notification .header-dropdown__items { + max-height: calc(100vh - 16rem); + margin-bottom: 0; + } + .header-dropdown__item-link { + color: var(--default-text); + border-bottom: none; + } + .header-dropdown__item:not(:last-child) .header-dropdown__item-link { + border-bottom: solid 1px var(--border-tint); + } + .header-dropdown__item-link:hover { + background-color: var(--primary-tint); + } + .header-dropdown__footer { + border-top: solid 1px var(--border-tint); + } + .header-dropdown__footer-link { + color: var(--main-text); + border-bottom: none; + } + .header-dropdown__footer-link:not(:last-child) { + border-bottom: solid 1px var(--border-tint); + } + .header-dropdown__footer-link:hover { + background-color: var(--background-more-tint); + } + .header-dropdown__background { + background-color: rgba(0, 0, 0, 0.2); + z-index: 2; + } +} + +@media (max-width: 47.9375em) { + .header-dropdown__inner.is-notification .pill-nav__item-link { + border-color: var(--base); + color: var(--reversal-text); + } +} + + +@media (max-width: 47.9375em) { + .header-dropdown__inner.is-notification .pill-nav__item-link.is-active { + background-color: var(--base); + color: var(--main); + } +} + +/* +.header-dropdown__inner.is-notification .pill-nav__item-link.is-active { + background-color: var(--base); + color: var(--main); +} +.header-dropdown__inner.is-notification .pill-nav__item-link { + border-color: var(--border); + color: var(--default-text); +} + +*/ diff --git a/app/assets/stylesheets/application/blocks/header/_header-links.css b/app/assets/stylesheets/application/blocks/header/_header-links.css new file mode 100644 index 00000000000..a11e9e8885b --- /dev/null +++ b/app/assets/stylesheets/application/blocks/header/_header-links.css @@ -0,0 +1,80 @@ +.header-links { + height: 100%; + display: flex; + align-items: center; +} + +.header-links__items { + display: flex; + height: 100%; +} + +.header-links__item { + display: flex; + height: 100%; + border-left: solid var(--border-tint) 0.0625rem; + position: relative; + transition: color 0.2s ease-in, background-color 0.2s ease-in; +} + +.header-links__link { + display: flex; + text-decoration: none; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + font-size: 1em; + line-height: 1; + color: var(--default-text); + position: relative; + transition: all 0.2s ease-in; + cursor: pointer; + font-size: 1.125rem; + width: 2.75rem; +} +.header-links__link:hover { + background-color: #f8f8f8; +} +.header-links__link.is-active { + background-color: var(--warning); + color: var(--main-text); +} + +.header-links__link-label { + margin-top: 0.375em; + font-size: 0.625rem; +} + +.header-links__link-count { + position: absolute; + right: 0.25rem; + top: 0.25rem; +} + +.header-links__image { + width: 1.125rem; +} + +.header-links__link-icon { + font-size: 1.25rem; + line-height: 1; + text-align: center; + font-size: 1.125rem; +} +.has-count .header-links__link-icon { + color: var(--default-text); +} + +@media (min-width: 48em) { + .header-links__link { + font-size: 1.375rem; + width: 3.75rem; + } + .header-links__link-label { + font-size: 0.6875rem; + } + .header-links__image { + width: 1.5rem; + } +} diff --git a/app/assets/stylesheets/application/blocks/header/_header-notification-icon.css b/app/assets/stylesheets/application/blocks/header/_header-notification-icon.css new file mode 100644 index 00000000000..cac48a33606 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/header/_header-notification-icon.css @@ -0,0 +1,108 @@ + +.header-notification-count { + position: absolute; +} + +@media (min-width: 48em) { + .header-notification-count { + right: .25rem; + top: .25rem; + } +} + +@media (max-width: 47.9375em) { + .header-notification-count { + right: .125rem; + top: .125rem; + } +} + +.header-notification-count.is-loading.a-notification-count { + background-color: transparent; +} + +.header-notification-count.is-loading::before { + content: ' .'; + color: var(--default-text); + animation: dots 1s steps(5, end) infinite; + font-size: 1rem; + line-height: 1; + position: absolute; + left: .25rem; + bottom: .25rem; +} + +@keyframes dots { + 0%, 20% { + color: var(--transparent-text); + text-shadow: .25em 0 0 var(--transparent-text), .5em 0 0 var(--transparent-text); + } + 40% { + color: var(--default-text); + text-shadow: .25em 0 0 var(--transparent-text), .5em 0 0 var(--transparent-text); + } + 60% { + text-shadow: .25em 0 0 var(--default-text), .5em 0 0 var(--transparent-text); + } + 80%, 100% { + text-shadow: .25em 0 0 var(--default-text), .5em 0 0 var(--default-text); + } +} + +.header-notifications-item__body { + width: 100%; +} + +@media (min-width: 48em) { + .header-notifications-item__body { + color: var(--default-text); + } +} + +@media (max-width: 47.9375em) { + .header-notifications-item__body { + color: var(--reversal-text); + } +} + +.header-notifications-item__user-icon { + float: left; + height: 2rem; + width: 2rem; + margin-right: .5rem; + margin-bottom: .25rem; +} + +.header-notifications-item__message p { + line-height: 1.45; + margin-bottom: .375em; +} + +@media (min-width: 48em) { + .header-notifications-item__message p { + font-size: .8125rem; + } +} + +@media (max-width: 47.9375em) { + .header-notifications-item__message p { + font-size: .75rem; + } +} + +.header-notifications-item__created-at { + text-align: right; + display: block; +} + +@media (min-width: 48em) { + .header-notifications-item__created-at { + font-size: .75rem; + } +} + +@media (max-width: 47.9375em) { + .header-notifications-item__created-at { + font-size: .625rem; + } +} diff --git a/app/assets/stylesheets/application/blocks/header/_header.css b/app/assets/stylesheets/application/blocks/header/_header.css new file mode 100644 index 00000000000..fbdbc08060b --- /dev/null +++ b/app/assets/stylesheets/application/blocks/header/_header.css @@ -0,0 +1,89 @@ +.header { + background-color: var(--base); + z-index: 5; +} + +@media (min-width: 48em) { + .header { + position: fixed; + top: 0; + right: 0; + left: var(--global-nav-width); + height: var(--header-height__md-up); + } +} + +@media (max-width: 47.9375em) { + .header { + position: relative; + height: var(--header-height__sm-down); + } +} + +.header .a-switch { + margin-left: .5rem; +} + +.header__inner { + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; +} + +.header__start { + display: flex; +} + +.header__end { + display: flex; + height: 100%; +} + +.header__title { + text-decoration: none; + display: flex; + align-items: center; + transition: all .2s ease-out; +} + +.header__title:hover { + opacity: .8; +} + +.header__title-image { +} + +@media (min-width: 48em) { + .header__title-image { + height: 2.25rem; + } +} + +@media (max-width: 47.9375em) { + .header__title-image { + height: 1.75rem; + } +} + +.header-show-mobile-nav { + display: flex; + cursor: pointer; + height: 100%; + justify-content: center; + align-items: center; + width: 3rem; + position: relative; +} + +.header-show-mobile-nav-items { + display: none; +} + +@media (max-width: 47.9375em) { + .header-show-mobile-nav-items { + display: flex; + height: 100%; + margin-right: -1rem; + } +} diff --git a/app/assets/stylesheets/application/blocks/mention/_mention.css b/app/assets/stylesheets/application/blocks/mention/_mention.css new file mode 100644 index 00000000000..d2793b26459 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/mention/_mention.css @@ -0,0 +1,42 @@ +.tribute-container { + position: absolute; + top: 0; + left: 0; + margin-top: 0.5rem; + height: auto; + max-height: 176px; + max-width: 500px; + overflow: auto; + display: block; + z-index: 999; + border: 1px solid #c1c5b9; + border-radius: 3px; + background: var(--reversal-text); +} +.tribute-container ul { + margin: 0; + list-style: none; +} +.tribute-container ul li { + font-size: 0.875rem; + border-bottom: 1px solid #c1c5b9; + padding: 10px 11px; + cursor: pointer; +} +.tribute-container ul li:last-child { + border-bottom: none; +} +.tribute-container ul li.highlight { + background-color: var(--main); + color: var(--reversal-text); + box-shadow: inset 0 0 3px hsl(242, 51%, 41%); +} +.tribute-container ul li span { + font-weight: bold; +} +.tribute-container ul li span.mention { + padding-right: 9px; +} +.tribute-container ul li span.emoji { + padding-left: 4px; +} diff --git a/app/assets/stylesheets/application/blocks/micro-report/_micro-report-actions.css b/app/assets/stylesheets/application/blocks/micro-report/_micro-report-actions.css new file mode 100644 index 00000000000..858733d48c8 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/micro-report/_micro-report-actions.css @@ -0,0 +1,59 @@ + +.micro-report-actions__items { + display: flex; + gap: .5rem; + padding-top: .375rem; +} + +.micro-report-actions__action { + font-size: .75rem; + display: flex; + height: 2rem; + align-items: center; + text-decoration: none; + padding-inline: .75rem; + background-color: var(--background-shade); + border-radius: .25rem; + color: var(--muted-text); + transition: all .2s ease-out; +} + +.micro-report-actions__action:hover { + background-color: var(--main); + color: var(--reversal-text); +} + +.micro-report-actions__user-link { + display: block; + text-decoration: none; +} + +.micro-report__footer .reactions__items { + margin: 0; +} + +.micro-report__footer .reactions__items.is-reacted { + gap: .5rem; +} + +.micro-report__footer .reactions__items.is-reacted .reactions__item.is-reacted { + border: 1px solid var(--border); + border-radius: .25rem; +} + +@media (max-width: 47.9375em) { + .micro-report__footer .reactions__items.is-reacted .reactions__item.is-reacted { + height: 2.25rem; + } +} + +.micro-report__footer .reactions__dropdown-toggle { + margin-left: .5rem; + border: none; +} + +@media (max-width: 47.9375em) { + .micro-report__footer .reactions__dropdown-toggle { + height: 2.25rem; + } +} diff --git a/app/assets/stylesheets/application/blocks/micro-report/_micro-report-form-tabs.css b/app/assets/stylesheets/application/blocks/micro-report/_micro-report-form-tabs.css new file mode 100644 index 00000000000..da19b7639a6 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/micro-report/_micro-report-form-tabs.css @@ -0,0 +1,27 @@ +.micro-report-form-tabs { + background-color: var(--background); +} + +.micro-report-form-tabs + .tab-content { + margin-top: 0.5rem; +} + +.micro-report-form-tabs__items { + display: flex; +} + +.micro-report-form-tabs__item-link { + display: flex; + text-decoration: none; + padding: 0.5rem 0.75rem 1rem; + font-size: 0.875rem; + line-height: 1.4; +} + +.micro-report-form__preview, +.micro-report-form__form { + min-height: 3.75rem; + padding: 0.5rem; + max-height: calc(100vh - 14rem); + overflow-y: auto; +} diff --git a/app/assets/stylesheets/application/blocks/micro-report/_micro-report-form.css b/app/assets/stylesheets/application/blocks/micro-report/_micro-report-form.css new file mode 100644 index 00000000000..d2014669205 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/micro-report/_micro-report-form.css @@ -0,0 +1,29 @@ + +.micro-report-form { + padding-bottom: 1rem; + position: fixed; + bottom: 0; + left: 0; + right: 0; + background-color: var(--background); + z-index: 2; + @media (min-width: 48em) { + margin-left: 5rem; + + } +} +.micro-report-form__inner { + display: flex; + align-items: flex-end; + gap: .75rem; + +} +.micro-report-form__start { + flex: 1; + +} +.micro-report-form__text-area.a-text-input { + height: 3.75rem; + min-height: 0; + +} diff --git a/app/assets/stylesheets/application/blocks/micro-report/_micro-report.css b/app/assets/stylesheets/application/blocks/micro-report/_micro-report.css new file mode 100644 index 00000000000..3dba34f91b0 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/micro-report/_micro-report.css @@ -0,0 +1,274 @@ + + +.micro-report { + position: relative; + display: flex; +} + +.micro-report:not(:last-child) { + margin-top: 1.5rem; +} + +@media (min-width: 48em) { + .micro-report { + gap: 1rem; + } +} + +@media (max-width: 47.9375em) { + .micro-report { + gap: .75rem; + } +} + +.micro-report__start { + flex: 0 0 2.75rem; + width: 2.75rem; + height: 100%; +} + +.micro-report__end { + flex: 1; +} + +@media (min-width: 48em) { + .micro-report__end { + max-width: calc(100% - var(--thread-header-author)); + } +} + +.micro-report__header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: .25rem; +} + +.micro-report__title { + font-size: .875rem; + line-height: 1.4; + font-weight: 600; +} + +@media (min-width: 48em) { + .micro-report__title { + margin-right: .5rem; + flex: 1; + } +} + +@media (max-width: 47.9375em) { + .micro-report__title { + display: flex; + } +} + +.micro-report__title-user-icon { +} + +@media (min-width: 48em) { + .micro-report__title-user-icon { + display: none; + } +} + +@media (max-width: 47.9375em) { + .micro-report__title-user-icon { + width: 1.5rem; + height: 1.5rem; + display: inline-block; + vertical-align: middle; + margin-right: .25rem; + } +} + +.micro-report__title-link { +} + +@media (min-width: 48em) { + .micro-report__title-link { + height: 100%; + display: inline-flex; + align-items: center; + } +} + +@media (max-width: 47.9375em) { + .micro-report__title-link { + display: inline-block; + white-space: nowrap; + max-width: calc(100vw - 15.5rem); + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + } +} + +.micro-report__title-link.a-placeholder { + width: 15%; + height: 1.4em; +} + +.micro-report__title-icon { + width: 1.5rem; + height: 1.5rem; + margin-right: .5rem; +} + +.micro-report__title-label { + font-size: .8125rem; + display: block; + font-weight: 400; + color: var(--muted-text); + margin-bottom: .125rem; +} + +.micro-report__title-label i { + margin-right: .1875rem; +} + +.micro-report__body { +} + +@media (max-width: 47.9375em) { + .micro-report__body { + word-wrap: break-word; + } +} + +.micro-report__user-icon { + width: 3.5rem; + height: 3.5rem; + object-fit: cover; + border-radius: 50%; +} + +@media (max-width: 47.9375em) { + .micro-report__user-icon { + display: none; + } +} + +.micro-report__created-at { + display: block; + font-size: .8125rem; + line-height: 1.4; + white-space: nowrap; + color: var(--muted-text); + text-decoration: none; + cursor: pointer; + position: relative; +} + +@media (max-width: 47.9375em) { + .micro-report__created-at { + font-size: .75rem; + } +} + +.micro-report__created-at:hover, +.micro-report__created-at:active { + text-decoration: underline; +} + +.micro-report__created-at:active, +.micro-report__created-at:focus, +.micro-report__created-at.is-active { + color: var(--danger); +} + +.micro-report__created-at:active::after, +.micro-report__created-at:focus::after, +.micro-report__created-at.is-active::after { + content: "Copied!"; + display: block; + background-color: rgba(black, .4); + border-radius: .125rem; + padding: .25rem; + font-size: .625rem; + line-height: 1; + color: var(--reversal-text); + left: 0; + position: absolute; + top: 100%; +} + +.micro-report__created-at.a-placeholder { + width: 30%; + height: 1.4em; +} + +.micro-report__actions { + padding-block: 0 1rem; +} + +.micro-report__actions-items { + display: flex; + align-items: center; +} + +.micro-report__actions-item-link { + font-size: 1.25rem; + line-height: 1; + display: flex; + text-align: center; + color: var(--muted-text); + width: 2.375rem; + height: 2.375rem; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: color .2s ease-in, background-color .2s ease-in; +} + +.micro-report__actions-item-link.is-success:hover { + background-color: #e0eefe; + color: var(--primary); +} + +.micro-report__actions-item-link.is-danger:hover { + background-color: #f5e6ea; + color: var(--danger); +} + +.micro-report__footer { + display: flex; +} + +@media (min-width: 48em) { + .micro-report__footer { + justify-content: space-between; + } + + .micro-report__footer .reactions { + justify-content: flex-end; + } + + .micro-report__footer .card-footer { + flex: 1; + } +} + +@media (max-width: 47.9375em) { + .micro-report__footer { + flex-direction: column; + gap: .5rem; + } + + .micro-report__footer .reactions { + justify-content: flex-start; + } + + .micro-report__footer .card-footer { + flex: 1; + } +} + +.micro-report__reactions { + flex: 1; +} + +.micro-report_user-icon.a-user-icon { + width: 2.75rem; + height: 2.75rem; +} diff --git a/app/assets/stylesheets/application/blocks/micro-report/_micro-reports.css b/app/assets/stylesheets/application/blocks/micro-report/_micro-reports.css new file mode 100644 index 00000000000..ba1104037df --- /dev/null +++ b/app/assets/stylesheets/application/blocks/micro-report/_micro-reports.css @@ -0,0 +1,24 @@ +.micro-reports { + height: calc(100vh - 10.5rem); + overflow: hidden; + display: flex; + flex-direction: column; + gap: 1.5rem; +} +.micro-reports .thread-comment:last-child { + margin-bottom: 0; +} + +.micro-reports__start { + height: 100%; + overflow-y: scroll; + padding-bottom: 0.5rem; +} + +.micro-reports-with-form { + padding-bottom: 8.75rem; +} + +.micro-reports-without-form { + padding-bottom: 0; +} diff --git a/app/assets/stylesheets/application/blocks/modal/_modal-celebrate-report-count-body.css b/app/assets/stylesheets/application/blocks/modal/_modal-celebrate-report-count-body.css new file mode 100644 index 00000000000..d806355270a --- /dev/null +++ b/app/assets/stylesheets/application/blocks/modal/_modal-celebrate-report-count-body.css @@ -0,0 +1,9 @@ +.modal-celebrate-report-count-body__description { + font-size: 0.875rem; + line-height: 1.6; + text-align: center; +} + +.modal-celebrate-report-count-body__image-container:not(:first-child) { + margin-top: 1rem; +} diff --git a/app/assets/stylesheets/application/blocks/page-content/_page-content-header-actions.css b/app/assets/stylesheets/application/blocks/page-content/_page-content-header-actions.css new file mode 100644 index 00000000000..5b52a04b831 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page-content/_page-content-header-actions.css @@ -0,0 +1,81 @@ + +.page-content-header-actions { + padding-top: .25rem; + display: flex; + flex-wrap: wrap; +} + +@media (min-width: 40em) { + .page-content-header-actions { + justify-content: space-between; + gap: .5rem; + } +} + +@media (max-width: 39.9375em) { + .page-content-header-actions { + justify-content: center; + gap: .25rem; + } +} + +.page-content-header-actions__start { + justify-content: flex-start; +} + +.page-content-header-actions__start, +.page-content-header-actions__end { + display: flex; +} + +@media (min-width: 40em) { + .page-content-header-actions__start, + .page-content-header-actions__end { + flex: 1; + gap: .5rem; + } +} + +.page-content-header-actions__end { + display: flex; +} + +@media (min-width: 40em) { + .page-content-header-actions__end { + flex: 1; + gap: .5rem; + justify-content: flex-end; + } +} + +@media (max-width: 39.9375em) { + .page-content-header-actions__start, + .page-content-header-actions__end { + gap: .25rem; + } +} + +.page-content-header-actions__start { + justify-content: flex-start; + +} + +.page-content-header-actions__action { + min-width: 5.4rem; +} + +.page-content-header-actions__action .a-button { + padding-inline: 0; +} + +@media (min-width: 48em) { + .page-content-header-actions__action { + min-width: 7rem; + } +} + +@media (max-width: 47.9375em) { + .page-content-header-actions__action { + width: 50%; + } +} diff --git a/app/assets/stylesheets/application/blocks/page-content/_page-content-header-metas.css b/app/assets/stylesheets/application/blocks/page-content/_page-content-header-metas.css new file mode 100644 index 00000000000..184a0999d9b --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page-content/_page-content-header-metas.css @@ -0,0 +1,23 @@ + +.page-content-header-metas { +} + +@media (min-width: 48em) { + .page-content-header-metas { + display: flex; + justify-content: space-between; + } +} + +.page-content-header-metas__start { + display: flex; + align-items: center; + flex-wrap: wrap; +} + +.page-content-header-metas__meta { +} + +.page-content-header-metas__meta:not(:last-child) { + margin-right: .75em; +} diff --git a/app/assets/stylesheets/application/blocks/page-content/_page-content-header.css b/app/assets/stylesheets/application/blocks/page-content/_page-content-header.css new file mode 100644 index 00000000000..e20eeb96919 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page-content/_page-content-header.css @@ -0,0 +1,347 @@ + +.page-content-header { + position: relative; +} + +@media (min-width: 48em) { + .page-content-header { + display: flex; + gap: 1rem; + } +} + +@media (min-width: 48em) { + .page-content-header:not(:last-child) { + margin-bottom: 1.5rem; + } +} + +@media (max-width: 47.9375em) { + .page-content-header { + margin-bottom: 1.25rem; + } +} + +.page-content-header .a-watch-button.is-inactive, +.page-content-header .a-bookmark-button.is-inactive { + color: var(--semi-muted-text); + background-color: var(--background-semi-shade); +} + +.page-content-header .a-count-badge { + float: right; + margin-left: .5rem; + margin-top: -.5rem; +} + +.page-content-header__start { + display: flex; + flex-direction: column; + align-items: center; + gap: .5rem; +} + +@media (min-width: 48em) { + .page-content-header__end { + flex: 1; + } +} + +@media (max-width: 47.9375em) { + .page-content-header__start + .page-content-header__end { + margin-top: .5rem; + } +} + +.page-content-header__user { +} + +@media (max-width: 47.9375em) { + .page-content-header__user { + display: flex; + justify-content: center; + } +} + +.page-content-header__category { +} + +@media (max-width: 47.9375em) { + .page-content-header__category { + display: flex; + justify-content: center; + } +} + +.page-content-header__category-icon { + height: 3.5rem; + width: 3.5rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: .875rem; + line-height: 1; + font-weight: 600; +} + +.page-content-header__category-icon.is-meeting { + background-color: #7f6fb7; + color: var(--reversal-text); +} + +.page-content-header__category-icon.is-reading-circle { + background-color: #79bcc3; + color: var(--reversal-text); +} + +.page-content-header__category-icon.is-question { + background-color: #de9172; + color: var(--reversal-text); +} + +.page-content-header__category-icon.is-chat { + background-color: #56925c; + color: var(--reversal-text); +} + +.page-content-header__category-icon.is-others { + background-color: #f7cd5b; + color: var(--default-text); +} + +.page-content-header__user-link { + display: block; + text-decoration: none; +} + +.page-content-header__user-icon-image { + height: 3.5rem; + width: 3.5rem; +} + +.page-content-header__company-logo-image { + background-color: var(--base); + object-fit: contain; + border-radius: .25rem; +} + +@media (min-width: 48em) { + .page-content-header__company-logo-image { + height: 3.5rem; + width: 3.5rem; + } +} + +@media (max-width: 47.9375em) { + .page-content-header__company-logo-image { + height: 2.75rem; + width: 2.75rem; + left: 0; + position: absolute; + top: 0; + } +} + +.page-content-header__before-title { + gap: .25rem 1rem; + flex-wrap: wrap; +} + +@media (min-width: 48em) { + .page-content-header__before-title { + display: inline-flex; + margin-bottom: .25rem; + } +} + +@media (max-width: 47.9375em) { + .page-content-header__before-title { + display: flex; + justify-content: center; + text-align: center; + margin-bottom: .5rem; + } +} + +.page-content-header__before-title .a-user-name { +} + +.page-content-header__before-title .a-meta { +} + +.page-content-header__before-title .a-category-link { + font-size: .75rem; +} + +.page-content-header__title { + font-feature-settings: "palt"; + letter-spacing: .02em; + font-size: 1em; + line-height: 1.4; + font-weight: 700; + color: var(--main); + padding-bottom: .25rem; + border-bottom: solid 1px var(--border-shade); +} + +@media (min-width: 48em) { + .page-content-header__title { + font-size: 1.625rem; + word-wrap: break-word; + } +} + +@media (max-width: 47.9375em) { + .page-content-header__title { + font-size: 1.125rem; + word-break: break-all; + } +} + +.page-content-header__title.is-wip { + color: var(--muted-text); +} + +.page-content-header__title.is-skip-on { + color: var(--muted-text); +} + +.page-content-header__title .a-title-label { + display: inline-flex; + vertical-align: top; +} + +@media (min-width: 48em) { + .page-content-header__title .a-title-label { + position: relative; + top: .75em; + } +} + +@media (max-width: 47.9375em) { + .page-content-header__title .a-title-label { + position: relative; + top: .5em; + } +} + +.page-content-header__title-link { + text-decoration: none; + cursor: pointer; + color: var(--main); +} + +.page-content-header__title-link:hover, +.page-content-header__title-link:active { + text-decoration: underline; +} + +.page-content-header__title.is-wip .page-content-header__title-link { + color: var(--muted-text); +} + +.page-content-header__tags { + margin-top: .75rem; +} + +.page-content-header__row { +} + +.page-content-header__row:not(:last-child) { + margin-bottom: .5rem; +} + +.page-content-header__row .a-horizontal-dashed { + margin-bottom: 1rem; +} + +.page-content-header__description { +} + +@media (min-width: 48em) { + .page-content-header__description { + padding-block: .25rem; + } +} + +@media (max-width: 47.9375em) { + .page-content-header__description { + padding-block: .25rem; + } +} + +@media (min-width: 48em) { + .page-content-header__description.a-long-text { + font-size: .9375rem; + } +} + +@media (max-width: 47.9375em) { + .page-content-header__description.a-long-text { + font-size: .8125rem; + } +} + +.page-content-header__emotion { + display: inline-flex; + vertical-align: middle; + position: relative; + top: -.125em; + height: 1em; + width: 1em; +} + +@media (min-width: 48em) { + .page-content-header__emotion { + font-size: 1.75rem; + margin-right: .375em; + } +} + +@media (max-width: 47.9375em) { + .page-content-header__emotion { + font-size: 1.25rem; + margin-right: .25em; + } +} + +.page-content-header__emotion-image { + height: 100%; + width: 100%; +} + +.page-content-header__checker { + position: absolute; + right: 0; + top: -.5rem; +} + +.user-profile__company-logo-image { + background-color: var(--base); + object-fit: contain; + border-radius: .25rem; + height: 4.5rem; + width: 4.5rem; +} + +@media (max-width: 47.9375em) { + .user-profile__company-logo-image { + height: 3.5rem; + width: 3.5rem; + position: absolute; + right: 0; + top: 0; + } +} + +.page-content-header__alert { + background-color: var(--danger-tint); + color: var(--danger-text); + font-size: .875rem; + line-height: 1.4; + text-align: center; + padding: .5rem 1rem; + border: solid 1px var(--danger); + border-radius: .25rem; +} diff --git a/app/assets/stylesheets/application/blocks/page-content/_page-content-members.css b/app/assets/stylesheets/application/blocks/page-content/_page-content-members.css new file mode 100644 index 00000000000..8a5524372f9 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page-content/_page-content-members.css @@ -0,0 +1,47 @@ + +.page-content-members { + background: var(--base); + padding: .75rem 1rem; + border-radius: .25rem; + border: solid 1px var(--border-shade); + +} +.page-content-members__title { + font-size: .8125rem; + line-height: 1.4; + font-weight: 600; + +} +.page-content-members__items { + display: flex; + gap: .75rem; + flex-wrap: wrap; + +} +.page-content-members__item { + display: flex; + gap: .25rem; + @media (min-width: 48em) { + font-size: .875rem; + } + @media (max-width: 47.9375em) { + font-size: .75rem; + } + .a-user-name { + font-size: 1em; + line-height: 1.4; + color: var(--default-text); + + } +} +.page-content-members__user-icon { + @media (min-width: 48em) { + height: 1.5rem; + width: 1.5rem; + } + @media (max-width: 47.9375em) { + height: 1.25rem; + width: 1.25rem; + + } +} diff --git a/app/assets/stylesheets/application/blocks/page-content/_page-content-prev-next.css b/app/assets/stylesheets/application/blocks/page-content/_page-content-prev-next.css new file mode 100644 index 00000000000..97accff8b94 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page-content/_page-content-prev-next.css @@ -0,0 +1,36 @@ +.page-content-prev-next { + display: flex; + justify-content: space-between; + margin-top: 1rem; +} + +.page-content-prev-next__item { + width: 8rem; + max-width: 33.33%; +} + +.page-content-prev-next__item-link { + font-size: 0.8125rem; + line-height: 1.4; + display: block; + text-align: center; + white-space: nowrap; + color: var(--main); + text-decoration: none; + cursor: pointer; +} +.page-content-prev-next__item-link:hover, .page-content-prev-next__item-link:active { + text-decoration: underline; +} +.page-content-prev-next__item-link.is-prev { + text-align: left; +} +.page-content-prev-next__item-link.is-next { + text-align: right; +} +.page-content-prev-next__item-link i:first-child { + margin-right: 0.5rem; +} +.page-content-prev-next__item-link i:last-child { + margin-left: 0.5rem; +} diff --git a/app/assets/stylesheets/application/blocks/page-content/_page-content.css b/app/assets/stylesheets/application/blocks/page-content/_page-content.css new file mode 100644 index 00000000000..0c6d6d11c9e --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page-content/_page-content.css @@ -0,0 +1,40 @@ + +.page-content { +} + +.page-content.is-products { +} + +.page-content.is-questions { +} + +.page-content.is-books { +} + +.page-content.is-users { + width: 100%; +} + +@media (min-width: 48em) { + .page-content:not(:first-child) { + margin-top: 1.25rem; + } +} + +@media (max-width: 47.9375em) { + .page-content:not(:first-child) { + margin-top: 1rem; + } +} + +@media (min-width: 48em) { + .page-content:not(:last-child) { + margin-bottom: 2rem; + } +} + +@media (max-width: 47.9375em) { + .page-content:not(:last-child) { + margin-bottom: 1rem; + } +} diff --git a/app/assets/stylesheets/application/blocks/page/_o-page-info.css b/app/assets/stylesheets/application/blocks/page/_o-page-info.css new file mode 100644 index 00000000000..09394a7ad0b --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page/_o-page-info.css @@ -0,0 +1,7 @@ +.o-page-info { + background-color: var(--success-tint); + font-size: 0.875rem; + padding-block: 0.75em; + color: var(--success-text); + border-bottom: solid 1px var(--success); +} diff --git a/app/assets/stylesheets/application/blocks/page/_page-body-actions.css b/app/assets/stylesheets/application/blocks/page/_page-body-actions.css new file mode 100644 index 00000000000..d34d297ae4b --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page/_page-body-actions.css @@ -0,0 +1,7 @@ +.page-body-actions { + margin-top: 1.5rem; +} + +.a-empty-message + .page-body-actions { + margin-top: 1rem; +} diff --git a/app/assets/stylesheets/application/blocks/page/_page-body.css b/app/assets/stylesheets/application/blocks/page/_page-body.css new file mode 100644 index 00000000000..72780c689a1 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page/_page-body.css @@ -0,0 +1,239 @@ + +.page-body { + padding-block: 1.5rem; +} + +@media (min-width: 48em) { + .page-body { + flex: 1; + display: flex; + flex-direction: column; + min-height: calc(100vh - 321px); + } +} + +@media (max-width: 47.9375em) { + .page-body { + padding-block: 1.125rem; + } +} + +.page-body__inner { + position: relative; +} + +@media (min-width: 64em) { + .page-body__inner { + flex: 1; + } +} + +@media (min-width: 64em) { + .page-body__inner.has-side-nav { + padding-right: var(--side-nav-width); + } +} + +.page-body__rows { + display: flex; + flex-direction: column; +} + +@media (min-width: 48em) { + .page-body__rows { + gap: 1.25rem; + } +} + +@media (max-width: 47.9375em) { + .page-body__rows { + gap: 1rem; + } +} + +.page-body__rows > * { + width: 100%; +} + +.page-body__columns { +} + +@media (min-width: 64em) { + .page-body__columns { + display: flex; + gap: 1.5rem; + position: relative; + } +} + +.page-body__columns.is-reverse { + display: flex; +} + +@media (min-width: 48em) { + .page-body__columns.is-reverse { + flex-direction: row; + gap: 1.5rem; + } +} + +@media (max-width: 47.9375em) { + .page-body__columns.is-reverse { + flex-direction: column-reverse; + gap: 1rem; + } + + .page-body__columns.is-reverse .page-body__column { + width: 100%; + } +} + +.page-body__column { +} + +.page-body__column.is-main { + flex: 1; + margin-inline: auto; +} + +.page-body__column.is-sub { + flex: 0 0 20rem; +} + +.page-body__column.is-sub.is-sm { + flex: 0 0 14rem; +} + +.page-body__description { +} + +@media (min-width: 48em) { + .page-body__description { + font-size: .875rem; + } +} + +@media (max-width: 47.9375em) { + .page-body__description { + font-size: .8125rem; + } +} + +.page-body__description:not(:last-child) { + margin-bottom: 1.5em; +} + +.page-body__description > *:first-child { + margin-top: 0; +} + +.page-body__description > *:last-child { + margin-bottom: 0; +} + +.page-body__description hr { + display: block; + width: 100%; + height: 0; + border: none; + border-top: dashed 1px var(--border); + margin-block: 1.5em; +} + +.page-body__description p { + font-size: 1em; + line-height: 1.7; + margin-top: 0; + margin-bottom: .75em; +} + +.page-body__description li { + font-size: 1em; + line-height: 1.7; + margin-top: 0; + margin-bottom: .125em; +} + +.page-body__description a { + text-decoration: none; + cursor: pointer; +} + +.page-body__description a:hover, +.page-body__description a:active { + text-decoration: underline; +} + +.page-body__description .message { + background: red; + padding: 1em 1.25em 1em 2.75em; + border-radius: .25rem; + margin-block: 1.5em 2em; + background-color: var(--warning-tint); + color: var(--warning-text); +} + +.page-body__description .message::before { + content: "\f06a"; + font-family: 'Font Awesome 6 Pro'; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + left: .25em; + position: absolute; + top: .25em; + font-size: 1.5em; + color: var(--warning); +} + +.page-body__description .message.alert { +} + +.page-body__description .message.danger { + background-color: var(--danger-tint); + color: var(--danger-text); +} + +.page-body__description .message.danger::before { + color: var(--danger); +} + +.page-body__description .message.warning { + background-color: var(--warning-tint); + color: var(--warning-text); +} + +.page-body__description .message.warning::before { + color: var(--warning); +} + +.page-body__description .message.info { + background-color: var(--info-tint); + color: var(--info-text); +} + +.page-body__description .message.info::before { + color: var(--info); +} + +.page-body__description .message.primary { + background-color: var(--primary-tint); + color: var(--primary-text); +} + +.page-body__description .message.primary::before { + color: var(--primary); +} + +.page-body__description .message.success { + background-color: var(--success-tint); + color: var(--success-text); +} + +.page-body__description .message.success::before { + color: var(--success); +} diff --git a/app/assets/stylesheets/application/blocks/page/_page-filter.css b/app/assets/stylesheets/application/blocks/page/_page-filter.css new file mode 100644 index 00000000000..a12adf213c9 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page/_page-filter.css @@ -0,0 +1,3 @@ +.page-filter { + padding-block: 1rem; +} diff --git a/app/assets/stylesheets/application/blocks/page/_page-header-actions.css b/app/assets/stylesheets/application/blocks/page/_page-header-actions.css new file mode 100644 index 00000000000..1c6a79e81e2 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page/_page-header-actions.css @@ -0,0 +1,53 @@ +.page-header-actions { +} + +@media (max-width: 47.9375em) { + .page-header-actions { + margin-inline: -1rem; + } +} + +.page-header-actions__items { + display: flex; + gap: .5rem; + justify-content: center; +} + +@media (max-width: 47.9375em) { + .page-header-actions__items { + padding-inline: 1rem; + } +} + +.page-header-actions__item { + position: relative; +} + +.page-header-actions__item > * { + width: 100%; +} + +@media (min-width: 48em) { + .page-header-actions__item { + min-width: 10rem; + display: flex; + justify-content: center; + } +} + +@media (max-width: 47.9375em) { + .page-header-actions__item { + flex: 1; + max-width: 50%; + } + + .page-header-actions__item:first-child:last-child { + max-width: 100%; + } +} + +.page-header-actions__item-help { + position: absolute; + right: -.25rem; + top: -.25rem; +} diff --git a/app/assets/stylesheets/application/blocks/page/_page-header.css b/app/assets/stylesheets/application/blocks/page/_page-header.css new file mode 100644 index 00000000000..be7c0a80b87 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page/_page-header.css @@ -0,0 +1,95 @@ + +.page-header { + background-color: var(--base); +} + +.page-header__inner { + position: relative; + display: flex; +} + +@media (min-width: 64em) { + .page-header__inner { + height: 3.25rem; + align-items: center; + justify-content: space-between; + } +} + +@media (min-width: 48em) and (max-width: 63.9375em) { + .page-header__inner { + padding-block: .75rem; + flex-direction: column; + } +} + +@media (max-width: 47.9375em) { + .page-header__inner { + padding-block: .5rem; + flex-direction: column; + gap: .5rem; + } +} + +.page-header__start { + display: flex; + align-items: center; + flex: 1; +} + +@media (min-width: 64em) { + .page-header__start { + max-width: calc(100% - 21rem); + } +} + +.page-header__title { + color: var(--main); + line-height: 1.4; + font-weight: 700; + font-feature-settings: "palt"; + letter-spacing: .02em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +@media (min-width: 64em) { + .page-header__title { + font-size: 1.25rem; + } +} + +@media (max-width: 63.9375em) { + .page-header__title { + font-size: 1.125rem; + flex: 1; + } +} + +.page-header__title img { + height: auto; + width: 2.5rem; + margin-right: .5rem; +} + +@media (max-width: 47.9375em) { + .page-header__title { + font-size: 1rem; + line-height: 1.4; + color: var(--main); + } +} + +.page-header__start .page-header__title { + align-self: center; +} + +.page-header__action { +} + +@media (max-width: 47.9375em) { + .page-header__action { + display: none; + } +} diff --git a/app/assets/stylesheets/application/blocks/page/_page-main-filter.css b/app/assets/stylesheets/application/blocks/page/_page-main-filter.css new file mode 100644 index 00000000000..8318cc8f22f --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page/_page-main-filter.css @@ -0,0 +1,14 @@ +.page-main-filter__inner { + display: block; + padding-block: 0.75rem; +} + +.page-main-filter__row { + display: flex; + gap: 1rem; + align-items: center; + flex-wrap: wrap; +} +.page-main-filter__row .page-main-filter__row { + gap: 0.5rem; +} diff --git a/app/assets/stylesheets/application/blocks/page/_page-main-header-actions.css b/app/assets/stylesheets/application/blocks/page/_page-main-header-actions.css new file mode 100644 index 00000000000..d95fcb8a73e --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page/_page-main-header-actions.css @@ -0,0 +1,36 @@ + +.page-main-header-actions__items { + display: flex; + gap: .5rem; + justify-content: center; +} + +.page-main-header-actions__item { +} + +@media (min-width: 48em) { + .page-main-header-actions__item { + min-width: 10rem; + display: flex; + justify-content: center; + } +} + +@media (max-width: 47.9375em) { + .page-main-header-actions__item { + flex: 1; + } +} + +.page-main-header-actions__item.is-remove .is-muted { + border: solid 1px var(--border-shade); +} + +.page-main-header-actions__item.is-remove .is-muted:hover { + color: var(--default-text); + background-color: var(--base); +} + +.page-main-header-actions__item .a-button { + height: 2.25rem; +} diff --git a/app/assets/stylesheets/application/blocks/page/_page-main-header.css b/app/assets/stylesheets/application/blocks/page/_page-main-header.css new file mode 100644 index 00000000000..cd49acc496d --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page/_page-main-header.css @@ -0,0 +1,46 @@ + +.page-main-header__inner { + padding-block: .5rem; + display: flex; +} + +@media (min-width: 48em) { + .page-main-header__inner { + min-height: calc(3.5rem - 1px); + align-items: center; + } +} + +@media (max-width: 47.9375em) { + .page-main-header__inner { + flex-direction: column; + gap: .5rem; + } +} + +.a-page-notice + .page-main .page-main-header__inner { + padding-top: .5em; +} + +.page-main-header__start { + flex: 1; +} + +.page-main-header__title { + color: var(--main); + font-weight: 700; +} + +@media (min-width: 48em) { + .page-main-header__title { + font-size: 1.125rem; + line-height: 1.4; + } +} + +@media (max-width: 47.9375em) { + .page-main-header__title { + font-size: 1rem; + line-height: 1.4; + } +} diff --git a/app/assets/stylesheets/application/blocks/page/_page-notices.css b/app/assets/stylesheets/application/blocks/page/_page-notices.css new file mode 100644 index 00000000000..f4176d4a8d2 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page/_page-notices.css @@ -0,0 +1,11 @@ +.page-notices { + margin-block: -0.5rem 1rem; + background-color: var(--success); +} + +.page-notices__item .a-badge { + min-width: 5rem; +} +.page-notices__item:not(:first-child) { + border-top: dashed 1px rgba(255, 255, 255, 0.2); +} diff --git a/app/assets/stylesheets/application/blocks/page/_page-optional-header.css b/app/assets/stylesheets/application/blocks/page/_page-optional-header.css new file mode 100644 index 00000000000..dd4083e3cb2 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page/_page-optional-header.css @@ -0,0 +1,28 @@ + +.page-optional-header { + padding-block: .5rem; + background-color: var(--background); + +} +.page-optional-header__inner { + @media (min-width: 48em) { + display: flex; + align-items: center; + + } +} +.page-optional-header__start { + @media (min-width: 48em) { + flex: 1; + + } +} +.page-optional-header__title { + font-size: 1rem; + line-height: 1.4; + align-items: center; + display: flex; + text-align: center; + font-weight: 700; + +} diff --git a/app/assets/stylesheets/application/blocks/page/_page-tabs.css b/app/assets/stylesheets/application/blocks/page/_page-tabs.css new file mode 100644 index 00000000000..1686060d014 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page/_page-tabs.css @@ -0,0 +1,89 @@ + +.page-tabs { + background-color: var(--base); + border-bottom: solid 1px var(--border); +} + +.page-tabs__items { + display: flex; + gap: .25rem; + transform: translateY(1px); + overflow-y: visible; + overflow-x: auto; + margin-inline: -1rem; + padding-inline: 1rem; +} + +.page-tabs__item { +} + +@media (min-width: 48em) { + .page-tabs__item { + min-width: 8.5rem; + } +} + +@media (max-width: 47.9375em) { + .page-tabs__item { + min-width: 7rem; + } +} + +.page-tabs__item-link { + display: flex; + text-decoration: none; + font-size: .825rem; + line-height: 1; + font-weight: 600; + white-space: nowrap; + color: var(--muted-text); + align-items: center; + justify-content: center; + background-color: var(--base); + padding-inline: 1.25rem; + border-top-left-radius: .25rem; + border-top-right-radius: .25rem; + border: solid 1px var(--border); + position: relative; + transition: all .2s ease-out; +} + +@media (min-width: 48em) { + .page-tabs__item-link { + height: 2.5rem; + } +} + +@media (max-width: 47.9375em) { + .page-tabs__item-link { + height: 2.75rem; + font-size: .75rem; + } +} + +.page-tabs__item-link:hover { + background-color: var(--background-more-tint); + color: var(--muted-text); +} + +.page-tabs__item-link.is-active { + background-color: var(--background); + border-bottom-color: var(--background); + color: var(--default-text); +} + +.page-tabs__item-link.is-sm { + font-size: .75rem; +} + +.page-tabs__item-link.is-inactive { + color: var(--muted-text); + pointer-events: none; + background-color: var(--background-semi-shade); +} + +.page-tabs__item-count { + position: absolute; + right: .125rem; + top: .125rem; +} diff --git a/app/assets/stylesheets/application/blocks/page/_page.css b/app/assets/stylesheets/application/blocks/page/_page.css new file mode 100644 index 00000000000..b295a637610 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/page/_page.css @@ -0,0 +1,14 @@ + +.page { + height: 100%; + display: flex; + flex-direction: column; + @media (min-width: 48em) { + flex: 1; + + } +} +.page-main { + flex: 1; + +} diff --git a/app/assets/stylesheets/application/blocks/practice/_categories.css b/app/assets/stylesheets/application/blocks/practice/_categories.css new file mode 100644 index 00000000000..7b203c4e6e6 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/practice/_categories.css @@ -0,0 +1,91 @@ +.is-hidden-users .a-user-icons { + display: none; +} + +.categories-item:not(:last-child) { + margin-bottom: 2rem; +} + +.categories-item__title { + font-size: 1.25rem; + line-height: 1.4; + font-weight: 700; + color: var(--main-text); + position: relative; +} +.categories-item__title .stamp { + right: -3rem; + top: -0.75rem; + transform: rotate(25deg) scale(0.7); +} + +.categories-item__show-handle { + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 1rem; + line-height: 1; + color: var(--muted-text); + transition: all 0.2s ease-out; +} +.categories-item__show-handle:hover { + color: var(--main-text); +} + +.categories-item__header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; +} + +.categories-item__body { + overflow: hidden; + clear: both; +} + +.categories-item__description { + position: relative; + margin-bottom: 1rem; +} + +.categories-item__edit { + float: right; + margin-left: 0.5rem; + position: relative; + top: -0.25rem; + z-index: 2; +} + +.categories-item__edit-link { + width: 2rem; + height: 2rem; + display: flex; + text-decoration: none; + align-items: center; + justify-content: center; + font-size: 1rem; + line-height: 1; + color: var(--muted-text); + transition: all 0.2s ease-out; +} +.categories-item__edit-link:hover { + color: var(--main-text); +} + +@media (min-width: 48em) { + .categories-item:not(:last-child) { + margin-bottom: 3rem; + } + .categories-item__title { + font-size: 1.5rem; + } + .categories-item__title .stamp { + right: -3rem; + top: -0.5rem; + transform: rotate(25deg); + } +} diff --git a/app/assets/stylesheets/application/blocks/practice/_category-practices-item.css b/app/assets/stylesheets/application/blocks/practice/_category-practices-item.css new file mode 100644 index 00000000000..b3b0f6933b2 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/practice/_category-practices-item.css @@ -0,0 +1,165 @@ + +.category-practices-item { + padding: .75rem 1rem; + position: relative; +} + +.category-practices-item:not(:last-child) { + border-bottom: solid 1px var(--border-tint); +} + +.category-practices-item:nth-child(even) { + background-color: var(--background-more-tint); +} + +@media (max-width: 47.9375em) { + .category-practices-item { + flex-wrap: wrap; + padding: .5rem .75rem .75rem; + } +} + +.category-practices-item.sortable-chosen { + background-color: color.tint(var(--warning), 90%); +} + +.category-practices-item.is-skip-on { + background-color: var(--background-tint); +} + +.category-practices-item[draggable="false"] { + background-color: var(--base); + animation: grab-background-color 1.25s ease 0s 1 normal none running; +} + +.category-practices-item__grab { + flex: 0 0 2.75rem; +} + +.category-practices-item__anchor { +} + +@media (min-width: 48em) { + .category-practices-item__anchor { + position: relative; + top: -3.5rem; + } +} + +.category-practices-item__status { + font-size: .8125rem; + line-height: 1; + font-weight: 600; + display: flex; + text-decoration: none; + align-items: center; + justify-content: center; + height: 2.125rem; + width: 4rem; + border-radius: .25rem; +} + +.category-practices-item__status.is-not_complete { + background-color: var(--background); + color: var(--muted-text); +} + +.category-practices-item__status.is-started { + background-color: var(--danger); + color: var(--reversal-text); +} + +.category-practices-item__status.is-submitted { + background-color: var(--warning); + color: var(--default-text); +} + +.category-practices-item__status.is-complete { + background-color: var(--success); + color: var(--reversal-text); +} + +.category-practices-item__status.is-unstarted { + background-color: #fff; + color: var(--muted-text); + border: solid 1px var(--border); +} + +.category-practices-item__status.is-unstarted.is-active { + color: var(--muted-text); + border-color: var(--muted-text); + background-color: var(--background-tint); +} + +.category-practices-item__status.is-skip-on { + background-color: #dcdcdc; + color: var(--muted-text); +} + +.category-practices-item__header { + display: flex; +} + +@media (max-width: 47.9375em) { + .category-practices-item__header { + display: block; + } +} + +.category-practices-item__title { + flex: 1; + margin-right: .5rem; +} + +@media (max-width: 47.9375em) { + .category-practices-item__title { + margin-right: 0; + margin-bottom: .5rem; + } +} + +.category-practices-item__title-link { + font-size: .875rem; + line-height: 1.4; + display: flex; + color: var(--default-text); + align-items: center; + min-height: 1.875rem; + text-decoration: none; +} + +@media (max-width: 47.9375em) { + .category-practices-item__title-link { + font-size: .8125rem; + } +} + +.category-practices-item__title-link .a-badge { + margin-right: .25rem; +} + +.category-practices-item__title-link.is-skip-on { + color: var(--muted-text); +} + +a.category-practices-item__title-link:hover .category-practices-item__title-link-label { + text-decoration: underline; +} + +.category-practices-item__learning-time { + font-size: .75rem; + line-height: 1.4; + color: var(--muted-text); +} + +@media (min-width: 48em) { + .category-practices-item__learning-time { + margin-top: -.25rem; + } +} + +@media (max-width: 47.9375em) { + .category-practices-item__learning-time { + margin-top: .5rem; + } +} diff --git a/app/assets/stylesheets/application/blocks/practice/_completion-massage.css b/app/assets/stylesheets/application/blocks/practice/_completion-massage.css new file mode 100644 index 00000000000..7f11a9bb6a5 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/practice/_completion-massage.css @@ -0,0 +1,3 @@ +.completion-massage { + background-color: var(--success); +} diff --git a/app/assets/stylesheets/application/blocks/practice/_practice-content-actions.css b/app/assets/stylesheets/application/blocks/practice/_practice-content-actions.css new file mode 100644 index 00000000000..e976ea031c0 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/practice/_practice-content-actions.css @@ -0,0 +1,45 @@ + +.practice-content-actions__description { + font-size: .75rem; + line-height: 1.5; + margin-top: 0; + margin-bottom: .75rem; + text-align: center; +} + +.practice-content-actions__items { + display: flex; + align-items: flex-end; + justify-content: center; +} + +@media (max-width: 47.9375em) { + .practice-content-actions__items { + flex-direction: column; + } +} + +.practice-content-actions__item { + padding-inline: .375rem; +} + +.practice-content-actions__item > * { + width: 10rem; + max-width: 100%; +} + +@media (max-width: 47.9375em) { + .practice-content-actions__item { + width: 100%; + padding-inline: 0; + } + + .practice-content-actions__item:nth-child(2), + .practice-content-actions__item:nth-child(3) { + margin-top: .75rem; + } + + .practice-content-actions__item > * { + width: 100%; + } +} diff --git a/app/assets/stylesheets/application/blocks/practice/_practice-content.css b/app/assets/stylesheets/application/blocks/practice/_practice-content.css new file mode 100644 index 00000000000..8a1593648ab --- /dev/null +++ b/app/assets/stylesheets/application/blocks/practice/_practice-content.css @@ -0,0 +1,87 @@ + +.practice-content { + position: relative; + display: block; + margin-bottom: 2rem; +} + +.practice-content.is-memo .a-card { + height: 100%; +} + +.practice-content.is-memo .a-markdown-input__inner { + height: 100%; + margin-bottom: 0; +} + +.practice-content.is-memo .a-markdown-input__inner.is-preview { + overflow: auto; +} + +.practice-content.is-memo .card-footer { + margin-top: 1rem; +} + +.practice-content__body-notice { + border: solid 1px var(--success); + margin-top: 1rem; + background-color: rgba(var(--success), .1); +} + +@media (min-width: 48em) { + .practice-content__body-notice { + padding: .75rem .875rem; + } +} + +@media (max-width: 47.9375em) { + .practice-content__body-notice { + padding: .375rem .625rem; + } +} + +.practice-content__body-notice p { + font-size: .875rem; + line-height: 1.5; + color: var(--success-text); +} + +@media (max-width: 47.9375em) { + .practice-content__body-notice p { + font-size: .75rem; + } +} + +.card-footer__alert { + text-align: center; + margin-top: 1em; +} + +@media (min-width: 48em) { + .card-footer__alert { + font-size: .875rem; + } +} + +@media (max-width: 47.9375em) { + .card-footer__alert { + font-size: .75rem; + } +} + +.card-footer__alert > a { + font-size: 1em; + line-height: 1.5; + color: var(--danger); + text-decoration: none; + cursor: pointer; +} + +.card-footer__alert > a:hover, +.card-footer__alert > a:active { + text-decoration: underline; +} + +.js-markdown-view { + display: none; +} diff --git a/app/assets/stylesheets/application/blocks/practice/_practice-contents.css b/app/assets/stylesheets/application/blocks/practice/_practice-contents.css new file mode 100644 index 00000000000..fb3a7b4b3f8 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/practice/_practice-contents.css @@ -0,0 +1,27 @@ +.practice-contents__pub-date { + margin-bottom: 0.75rem; +} + +.practice-contents__time { + display: inline-flex; + align-items: center; + margin-bottom: 0.5em; + cursor: pointer; + font-size: 0.875rem; +} +.practice-contents__time .a-meta { + font-size: 1em; +} +.practice-contents__time .a-help { + height: 1rem; + width: 1rem; + font-size: 0.75em; + margin-left: 0.375em; + transition: all 0.2s ease-out; +} +.practice-contents__time:hover .a-meta { + color: var(--main-text); +} +.practice-contents__time:hover .a-help { + background-color: var(--main); +} diff --git a/app/assets/stylesheets/application/blocks/practice/_practice-first-actions.css b/app/assets/stylesheets/application/blocks/practice/_practice-first-actions.css new file mode 100644 index 00000000000..b379f5e6684 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/practice/_practice-first-actions.css @@ -0,0 +1,28 @@ +.practice-first-actions { + width: 100%; +} + +@media (min-width: 48em) { + .practice-first-actions { + display: flex; + } +} + +.practice-first-actions__start { + flex: 1; +} + +.practice-first-actions__end { + width: 100%; +} + +@media (min-width: 48em) { + .practice-first-actions__end { + min-width: 6rem; + width: auto; + } +} + +.practice-first-actions__end .is-inactive { + background-color: var(--background-semi-shade); +} diff --git a/app/assets/stylesheets/application/blocks/practice/_practice-status-buttons.css b/app/assets/stylesheets/application/blocks/practice/_practice-status-buttons.css new file mode 100644 index 00000000000..a746740373b --- /dev/null +++ b/app/assets/stylesheets/application/blocks/practice/_practice-status-buttons.css @@ -0,0 +1,123 @@ + +.practice-status-buttons__start { + text-align: center; + width: 100%; + display: flex; + align-items: center; +} + +.practice-status-buttons__label { +} + +@media (min-width: 48em) { + .practice-status-buttons__label { + font-size: .75rem; + font-weight: 600; + white-space: nowrap; + margin-right: 1em; + } +} + +@media (max-width: 47.9375em) { + .practice-status-buttons__label { + display: none; + } +} + +.practice-status-buttons__items { + white-space: nowrap; + flex: 1; +} + +@media (min-width: 48em) { + .practice-status-buttons__items { + max-width: 25rem; + } +} + +.practice-status-buttons__item { + flex: 1; +} + +@media (min-width: 48em) { + .practice-status-buttons__item { + max-width: 4.75rem; + } +} + +.practice-status-buttons__button.is-inactive { + color: var(--muted-text); + background-color: var(--base); + border-color: var(--background-shade); + transition: all .2s ease-out; +} + +.practice-status-buttons__button.is-inactive:hover { + background-color: var(--background-tint); + color: var(--default-text); +} + +.practice-status-buttons__button.is-active { + pointer-events: none; + position: relative; + z-index: 1; + border: solid 1px; +} + +.practice-status-buttons__button.is-active.is-not_complete { + background-color: var(--background); + border-color: var(--background-shade); + color: var(--muted-text); +} + +.practice-status-buttons__button.is-active.is-started { + background-color: var(--danger); + border-color: var(--danger-shade); + color: var(--reversal-text); +} + +.practice-status-buttons__button.is-active.is-submitted { + background-color: var(--warning); + border-color: var(--warning-shade); + color: var(--default-text); +} + +.practice-status-buttons__button.is-active.is-complete { + background-color: var(--success); + border-color: var(--success-shade); + color: var(--reversal-text); +} + +.practice-status-buttons__button.is-active.is-unstarted { + background-color: #fff; + color: var(--muted-text); + border-color: var(--muted-text); + background-color: var(--background-tint); +} + +.practice-status-buttons__button.is-active.is-skip-on { + background-color: #dcdcdc; + border-color: #b0b0b0; + color: var(--muted-text); +} + +.practice-status__buttons-item { +} + +@media (max-width: 47.9375em) { + .practice-status__buttons-item { + width: 33.33%; + } + + .practice-status__buttons-item .a-button { + width: 100%; + } +} + +.practice-status-buttons__note { + font-size: .75rem; + line-height: 1.4; + text-align: left; + color: var(--muted-text); + margin-top: .5em; +} diff --git a/app/assets/stylesheets/application/blocks/practice/_sticky-message.css b/app/assets/stylesheets/application/blocks/practice/_sticky-message.css new file mode 100644 index 00000000000..7e884b0dc2f --- /dev/null +++ b/app/assets/stylesheets/application/blocks/practice/_sticky-message.css @@ -0,0 +1,31 @@ +.sticky-message { + display: none; +} + +@media (min-width: 48em) { + .sticky-message { + background-color: var(--success); + width: 100%; + position: sticky; + left: 0; + bottom: 0; + z-index: 2; + padding-block: 0.5rem; + font-size: 0.875rem; + line-height: 1.4; + text-align: center; + color: var(--reversal-text); + display: block; + } + + .sticky-message a { + text-decoration: none; + cursor: pointer; + color: var(--reversal-text); + } + + .sticky-message a:hover, + .sticky-message a:active { + text-decoration: underline; + } +} diff --git a/app/assets/stylesheets/application/blocks/question/_answer-badge.css b/app/assets/stylesheets/application/blocks/question/_answer-badge.css new file mode 100644 index 00000000000..74aa016ab7f --- /dev/null +++ b/app/assets/stylesheets/application/blocks/question/_answer-badge.css @@ -0,0 +1,32 @@ + +.answer-badge { + border: double .1875rem var(--stamp-color); + border-radius: .75rem; + width: 4rem; + height: 3.5rem; + padding: .125rem; + position: absolute; + right: 0; + top: -.125rem; + z-index: 1; + transform: rotate(25deg); + font-size: .625rem; + line-height: 1; + display: flex; + text-align: center; + color: var(--stamp-color); + flex-direction: column; + align-items: center; + justify-content: center; + pointer-events: none; + @media (max-width: 47.9375em) { + position: absolute; + left: 80%; + top: 0; + + } +} +.answer-badge__icon { + font-size: 1.5rem; + +} diff --git a/app/assets/stylesheets/application/blocks/reaction/_reaction.css b/app/assets/stylesheets/application/blocks/reaction/_reaction.css new file mode 100644 index 00000000000..c2f4d844b8d --- /dev/null +++ b/app/assets/stylesheets/application/blocks/reaction/_reaction.css @@ -0,0 +1,167 @@ + +.reactions { + display: flex; + justify-content: space-between; + position: relative; + user-select: none; + padding: .5rem; +} +.card-body + .reactions { + border-top: none; +} +.reactions__items { + display: flex; + flex-wrap: wrap; + gap: .5rem; +} +.reactions__items[hidden] { + display: none; +} +@media (max-width: 47.9375em) { + .reactions__items { + overflow: hidden; + } +} +.reactions__dropdown .reactions__items { + left: -1px; + position: absolute; + right: -1px; + top: 100%; + z-index: 10; + border: 1px solid var(--border); + background-color: var(--background); + padding: .5rem; + justify-content: flex-end; + border-radius: 0 0 .25rem .25rem; +} +.reactions__item { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + height: 2.375rem; + padding-inline: .5rem; + border-radius: .25rem; + background-color: var(--base); + border: 1px solid var(--border); + transition: all .2s ease-out; + position: relative; +} +.reactions__item.is-reacted { + background-color: #f1f1ff; + border-color: #dad9ff; +} +.reactions__item:hover { + background-color: var(--background-more-tint); +} +@media (pointer: fine) { + .reactions__item:hover .reactions__item-login-names { + display: block; + } +} +.reactions__dropdown .reactions__item { + width: 2.75rem; + border-color: var(--border-shade); +} +.reactions__item-emoji { + font-size: 1.125rem; + line-height: 1; + vertical-align: middle; + pointer-events: none; +} +.reactions__item-count { + margin-left: .25rem; + font-size: .75rem; + line-height: 1; +} +.reactions__item-login-names { + display: none; + position: absolute; + top: 2.9rem; + left: .1rem; + font-size: .625rem; + color: var(--reversal-text); + background: var(--main); + padding: 5px 11px 7px; + border-radius: .2rem; + pointer-events: none; + white-space: nowrap; + z-index: 1; +} +.reactions__item-login-names::after { + content: " "; + position: absolute; + bottom: 100%; + left: 1.5rem; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent var(--main) transparent; +} +.reactions__item-login-names li { + line-height: 1.4; +} +.reactions__dropdown { + position: relative; +} +.reactions__dropdown-toggle { + height: 2.375rem; + width: 2.8125rem; + font-size: 1.25rem; + line-height: 1; + display: flex; + color: var(--main); + cursor: pointer; + align-items: center; + justify-content: center; + border: 1px solid var(--border); + border-radius: .25rem; + transition: all .2s ease-out; +} +.reactions__dropdown-toggle:hover { + color: var(--hover-text); + background: var(--background-more-tint); +} +.reactions__dropdown-toggle.is-disabled { + cursor: not-allowed; + color: var(--disabled); + background: var(--background); +} +.reactions__dropdown-toggle-plus { + font-size: .4em; + margin-right: .3em; +} +.reactions__actions { + display: flex; + gap: .5rem; +} +.reactions__users-list { + position: absolute; + top: 100%; + right: -1px; + left: -1px; + background-color: var(--background); + border: 1px solid var(--border); + padding: 0.5rem; + z-index: 10; + border-radius: 0 0 .25rem .25rem; + display: flex; + flex-direction: column; + gap: .5rem; +} +.reactions__users-list.hidden { + display: none; +} +.reaction-users-line { + display: flex; + align-items: center; + gap: .5rem; +} +.reaction-users-line:not(:last-child) { + border-bottom: 1px dashed var(--border); + padding-bottom: .5rem; +} +.reaction-user__avatar { + height: 1.75rem; + width: 1.75rem; +} diff --git a/app/assets/stylesheets/application/blocks/report/_learning-times.css b/app/assets/stylesheets/application/blocks/report/_learning-times.css new file mode 100644 index 00000000000..a8595659d94 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/report/_learning-times.css @@ -0,0 +1,30 @@ +@charset "UTF-8"; +.learning-times { + flex: 1; + display: flex; + gap: 0.5rem; +} + +.learning-times__header { + display: flex; + align-items: center; + white-space: nowrap; + font-size: 0.8125rem; + line-height: 1.4; + font-weight: 600; + gap: 0.25rem; +} + +.learning-times__items { + display: flex; + flex-wrap: wrap; +} + +.learning-times__item { + font-size: 0.8125rem; + line-height: 1.4; + color: var(--semi-muted-text); +} +.learning-times__item:not(:last-child)::after { + content: "、"; +} diff --git a/app/assets/stylesheets/application/blocks/report/_stamp.css b/app/assets/stylesheets/application/blocks/report/_stamp.css new file mode 100644 index 00000000000..a0fa9c6e527 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/report/_stamp.css @@ -0,0 +1,92 @@ + +.stamp { + border: solid 1px var(--stamp-color); + border-radius: .75rem; + pointer-events: none; + height: 3.5rem; + width: 4rem; + position: absolute; + right: -.25rem; + top: 0; + transform: rotate(25deg); + font-size: .625rem; + line-height: 1; + display: block; + text-align: center; + font-weight: 400; + color: var(--stamp-color); + font-feature-settings: "palt"; + letter-spacing: 0; +} + +@media (max-width: 47.9375em) { + .stamp { + right: 0; + top: 0; + } +} + +.stamp.is-circle { + height: 3.5rem; + width: 3.5rem; + border-radius: 50%; +} + +.stamp.is-solved { + display: flex; + flex-direction: column; + font-size: 1.5rem; + font-weight: 800; + font-family: serif; + justify-content: center; +} + +.stamp.is-cleared { + display: flex; + flex-direction: column; + font-size: 1.125rem; + font-weight: 800; + font-family: serif; + justify-content: center; +} + +.stamp.is-sm { + height: 2.25rem; + width: 4.125em; + position: absolute; + right: .5rem; + top: .5rem; + border-radius: .5rem; + display: flex; + align-items: center; +} + +.stamp__content { + display: flex; + align-items: center; + justify-content: center; +} + +.stamp__content.is-title { +} + +.stamp__content.is-user-name { + height: 32%; + width: 100%; +} + +.stamp__content.is-created-at { + height: 36%; + width: 100%; + border-top: solid 1px var(--stamp-color); + border-bottom: solid 1px var(--stamp-color); +} + +.stamp__content-inner { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + padding-inline: .25rem; + height: 100%; + line-height: 1.55; +} diff --git a/app/assets/stylesheets/application/blocks/side/_side-tabs-contents.css b/app/assets/stylesheets/application/blocks/side/_side-tabs-contents.css new file mode 100644 index 00000000000..a472cbfa6d8 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/side/_side-tabs-contents.css @@ -0,0 +1,79 @@ +.side-tabs-contents { + position: relative; + z-index: 1; +} + +#side-tabs-1:checked ~ .side-tabs-contents #side-tabs-content-1 { + display: block; +} + +#side-tabs-2:checked ~ .side-tabs-contents #side-tabs-content-2 { + display: block; +} + +#side-tabs-3:checked ~ .side-tabs-contents #side-tabs-content-3 { + display: block; +} + +#side-tabs-4:checked ~ .side-tabs-contents #side-tabs-content-4 { + display: block; +} + +.side-tabs-contents__item { + display: none; +} + +.side-tabs-contents__item .a-card { + border-top-left-radius: 0; + max-height: 76vh; + overflow-y: auto; +} + +.side-tabs-contents__item .card-header { + display: none; +} + +.side-tabs-contents__item .card-header + [class*=a-border] { + display: none; +} + +.side-tabs-contents__item .card-body { + max-height: calc(100vh - 181px); + overflow-y: auto; +} + +.side-tabs-contents__item .user-metas { + margin-top: 0; +} + +.side-tabs-contents__item .user-metas__title { + padding: 0.25rem 0.5rem; + font-size: 0.75rem; +} + +.side-tabs-contents__item .user-metas__item { + font-size: 0.75rem; + line-height: 1.6; + border: solid 1px var(--border); + margin: -1px; +} + +.side-tabs-contents__item .user-metas__item-label { + flex: 0 0 9rem; +} + +.side-tabs-contents__item .a-markdown-input { + padding-inline: 0; +} + +.side-tabs-contents__item .a-long-text { + font-size: 0.8125rem; +} + +.side-tabs-contents__item .page-body { + padding-block: 0; +} + +.side-tabs-contents__item .container { + padding-inline: 0; +} diff --git a/app/assets/stylesheets/application/blocks/side/_side-tabs-nav.css b/app/assets/stylesheets/application/blocks/side/_side-tabs-nav.css new file mode 100644 index 00000000000..1975640e623 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/side/_side-tabs-nav.css @@ -0,0 +1,46 @@ +.side-tabs-nav__items { + display: flex; + position: relative; + z-index: 2; + overflow-y: hidden; + overflow-x: auto; + transform: translateY(1px); +} + +.side-tabs-nav__item { + min-width: 6.5rem; +} + +#side-tabs-1:checked ~ .side-tabs-nav #side-tabs-nav-1, +#side-tabs-2:checked ~ .side-tabs-nav #side-tabs-nav-2, +#side-tabs-3:checked ~ .side-tabs-nav #side-tabs-nav-3, +#side-tabs-4:checked ~ .side-tabs-nav #side-tabs-nav-4 { + background-color: var(--base); + color: var(--default-text); +} + +.side-tabs-nav__item-link { + font-size: 0.8125rem; + line-height: 1.4; + display: flex; + text-align: center; + font-weight: 600; + white-space: nowrap; + justify-content: center; + cursor: pointer; + padding: 0.75em 1em; + border: solid 1px var(--border); + border-bottom: none; + position: relative; + bottom: -1px; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; + color: var(--muted-text); + transition: all 0.2s ease-out; +} +.side-tabs-nav__item:not(:first-child) .side-tabs-nav__item-link { + margin-left: -1px; +} +.side-tabs-nav__item-link:hover { + color: var(--default-text); +} diff --git a/app/assets/stylesheets/application/blocks/side/_side-tabs.css b/app/assets/stylesheets/application/blocks/side/_side-tabs.css new file mode 100644 index 00000000000..79da2d1eb11 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/side/_side-tabs.css @@ -0,0 +1,10 @@ +.side-tabs { + @media (min-width: 64em) { + position: sticky; + top: 3.125rem; + } + @media (max-width: 63.9375em) { + margin-top: 1.5rem; + + } +} diff --git a/app/assets/stylesheets/application/blocks/side/_user-statuses.css b/app/assets/stylesheets/application/blocks/side/_user-statuses.css new file mode 100644 index 00000000000..f46dbc32bcc --- /dev/null +++ b/app/assets/stylesheets/application/blocks/side/_user-statuses.css @@ -0,0 +1,40 @@ +.user-statuses { + padding: 0.75rem 1rem; +} + +.user-statuses + .a-card { + border-radius: 0 0 4px 4px; +} + +.user-statuses__actions { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.user-statuses__title { + font-size: 0.8125rem; + line-height: 1.4; + font-weight: 600; +} + +.user-statuses__items { + flex: 1; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.75rem; +} + +.user-statuses__item { + flex: 1; + max-width: calc(50% - 0.75rem); +} + +.user-statuses__delete { + display: flex; + justify-content: flex-end; + margin-top: 0.75rem; + font-size: 0.8125rem; + line-height: 1.4; +} diff --git a/app/assets/stylesheets/application/blocks/static-pages/_thanks-message.css b/app/assets/stylesheets/application/blocks/static-pages/_thanks-message.css new file mode 100644 index 00000000000..2f93647eea3 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/static-pages/_thanks-message.css @@ -0,0 +1,73 @@ + +.thanks-message__header { + color: var(--reversal-text); +} + +.thanks-message__header + .a-card { + margin-top: 2rem; +} + +.thanks-message__title { + line-height: 1.4; + text-align: center; + font-weight: 800; + color: var(--main); +} + +@media (min-width: 48em) { + .thanks-message__title { + font-size: 1.75rem; + } +} + +@media (max-width: 47.9375em) { + .thanks-message__title { + font-size: 1.75rem; + } +} + +.thanks-message__body { + padding: 1.25em 1.5em; + font-size: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; +} + +@media (max-width: 47.9375em) { + .thanks-message__body { + font-size: .875rem; + } +} + +.thanks-message__body p { + font-size: 1em; + line-height: 1.6; + margin-top: 0; + margin-bottom: 1em; +} + +.thanks-message__body p:last-child { + margin-bottom: 0; +} + +.thanks-message__body strong { + font-weight: 600; + display: inline-block; + margin-inline: .25em; +} + +.thanks-message__inputed-values.form { + margin-inline: 0; +} + +.thanks-message__inputed-values-title { + font-size: .875rem; + line-height: 1.4; + font-weight: 800; + background-color: var(--background-shade); + padding: .25rem .5rem; + margin-bottom: 1rem; + border-left: solid .5rem var(--main); + border-radius: .25rem; +} diff --git a/app/assets/stylesheets/application/blocks/static-pages/_thanks.css b/app/assets/stylesheets/application/blocks/static-pages/_thanks.css new file mode 100644 index 00000000000..512fe4ecc2c --- /dev/null +++ b/app/assets/stylesheets/application/blocks/static-pages/_thanks.css @@ -0,0 +1,66 @@ +.thanks { + max-width: 26rem; + padding-inline: 1rem; + margin-inline: auto; + margin-top: 6rem; +} + +.thanks__logo-image { + max-width: 20rem; + display: block; + margin-inline: auto; + margin-bottom: 3rem; +} + +.thanks__body { + background-color: var(--base); + padding: 1.5rem; + border-radius: 0.25rem; +} + +.thanks__icon { + font-size: 4rem; + line-height: 1; + margin-top: 0; + margin-bottom: 0.5rem; + text-align: center; + color: var(--main); +} + +.thanks__title { + font-size: 0.875rem; + line-height: 1.4; + margin-top: 0; + margin-bottom: 0.75rem; + text-align: center; + font-weight: 600; +} + +.thanks__message p { + font-size: 0.75rem; + line-height: 1.6; + text-align: center; +} +.thanks__message a { + transition: color 0.2s ease-in; + color: var(--link-text); +} +.thanks__message a:link { + color: var(--link-text); +} +.thanks__message a:visited { + color: hsl(233, 33%, 58%); +} +.thanks__message a:hover { + color: var(--hover-text); +} +.thanks__message a:active { + color: var(--hover-text); +} +.thanks__message a { + text-decoration: none; + cursor: pointer; +} +.thanks__message a:hover, .thanks__message a:active { + text-decoration: underline; +} diff --git a/app/assets/stylesheets/application/blocks/survey/_survey-added-question.css b/app/assets/stylesheets/application/blocks/survey/_survey-added-question.css new file mode 100644 index 00000000000..43b05509c4c --- /dev/null +++ b/app/assets/stylesheets/application/blocks/survey/_survey-added-question.css @@ -0,0 +1,17 @@ +.survey-added-question + .survey-added-question { + margin-top: 1rem; +} + +.survey-added-question__inner { + display: flex; + gap: 0.75rem; + align-items: flex-end; +} + +.survey-added-question__col.is-main { + flex: 1; +} + +.survey-added-question__col.is-main select { + width: 100%; +} diff --git a/app/assets/stylesheets/application/blocks/survey/_survey-additional-question.css b/app/assets/stylesheets/application/blocks/survey/_survey-additional-question.css new file mode 100644 index 00000000000..139c6beba12 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/survey/_survey-additional-question.css @@ -0,0 +1,7 @@ +.survey-additional-question { + margin-top: 1.5rem; +} + +.survey-additional-question__input { + margin-top: 1rem; +} diff --git a/app/assets/stylesheets/application/blocks/survey/_survey-questions-item.css b/app/assets/stylesheets/application/blocks/survey/_survey-questions-item.css new file mode 100644 index 00000000000..cbbdb90aaa0 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/survey/_survey-questions-item.css @@ -0,0 +1,3 @@ +.survey-questions-item__input { + margin-top: 1rem; +} diff --git a/app/assets/stylesheets/application/blocks/survey/_survey-questions.css b/app/assets/stylesheets/application/blocks/survey/_survey-questions.css new file mode 100644 index 00000000000..543cd489fc4 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/survey/_survey-questions.css @@ -0,0 +1,8 @@ +.survey-questions { + margin-top: 2rem; +} + +.survey-questions-item__description { + margin-top: 0.75rem; + color: var(--semi-muted-text); +} diff --git a/app/assets/stylesheets/application/blocks/survey/survey-answer.css b/app/assets/stylesheets/application/blocks/survey/survey-answer.css new file mode 100644 index 00000000000..607fc3eaa86 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/survey/survey-answer.css @@ -0,0 +1,128 @@ +.survey-answer-summary { + margin-bottom: 2rem; + background-color: #fff; + border-radius: 0.5rem; + box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); + padding: 1.5rem; +} +.survey-answer-summary__header { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; +} +.survey-answer-summary__user, .survey-answer-summary__date { + display: flex; + align-items: center; + gap: 0.5rem; +} +.survey-answer-summary__icon { + color: #6f7b8a; + font-size: 1rem; +} +.survey-answer-summary__name { + font-weight: bold; + color: #4a90e2; + text-decoration: none; +} +.survey-answer-summary__name:hover { + text-decoration: underline; +} + +.survey-answer-questions { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.survey-answer-question { + background-color: #fff; + border-radius: 0.5rem; + box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); + overflow: hidden; +} +.survey-answer-question__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 1.5rem; + background-color: #f8f9fa; + border-bottom: 1px solid #e9ecef; + flex-wrap: wrap; + gap: 0.5rem; +} +.survey-answer-question__title { + font-size: 1.125rem; + font-weight: bold; + margin: 0; + flex: 1; +} +.survey-answer-question__badge { + display: inline-flex; + align-items: center; + gap: 0.25rem; + font-size: 0.75rem; + padding: 0.25rem 0.5rem; + border-radius: 1rem; +} +.survey-answer-question__badge i { + font-size: 0.75rem; +} +.survey-answer-question__badge.is-text { + background-color: #e3f2fd; + color: #0d47a1; +} +.survey-answer-question__badge.is-radio { + background-color: #e8f5e9; + color: #1b5e20; +} +.survey-answer-question__badge.is-checkbox { + background-color: #fff3e0; + color: #e65100; +} +.survey-answer-question__badge.is-scale { + background-color: #f3e5f5; + color: #4a148c; +} +.survey-answer-question__content { + padding: 1.5rem; +} +.survey-answer-question__text { + line-height: 1.6; + color: #212529; +} +.survey-answer-question__choice, .survey-answer-question__reason { + margin-bottom: 1rem; + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} +.survey-answer-question__choice-label, .survey-answer-question__reason-label { + font-weight: bold; + min-width: 3rem; +} +.survey-answer-question__choice-value { + color: #212529; +} +.survey-answer-question__reason-text { + color: #495057; + line-height: 1.6; + flex: 1; + width: 100%; + margin-top: 0.5rem; +} + +@media (max-width: 767px) { + .survey-answer-question__header { + flex-direction: column; + align-items: flex-start; + } + .survey-answer-question__badge { + margin-top: 0.5rem; + } + .survey-answer-question__choice, .survey-answer-question__reason { + flex-direction: column; + gap: 0.25rem; + } +} diff --git a/app/assets/stylesheets/application/blocks/survey/survey-answers.css b/app/assets/stylesheets/application/blocks/survey/survey-answers.css new file mode 100644 index 00000000000..3b2e1eee9ee --- /dev/null +++ b/app/assets/stylesheets/application/blocks/survey/survey-answers.css @@ -0,0 +1,7 @@ +.user-link { + color: #4a90e2; + text-decoration: none; +} +.user-link:hover { + text-decoration: underline; +} diff --git a/app/assets/stylesheets/application/blocks/survey/survey-result.css b/app/assets/stylesheets/application/blocks/survey/survey-result.css new file mode 100644 index 00000000000..1fc05bef291 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/survey/survey-result.css @@ -0,0 +1,161 @@ +.survey-result-summary { + margin-bottom: 2rem; + background-color: #fff; + border-radius: 0.5rem; + box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); + padding: 1.5rem; +} +.survey-result-summary__header { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; +} +.survey-result-summary__count, .survey-result-summary__date { + display: flex; + align-items: center; + gap: 0.5rem; +} +.survey-result-summary__icon { + color: #6f7b8a; + font-size: 1rem; +} +.survey-result-summary__value { + font-weight: bold; + font-size: 1.125rem; +} + +.survey-result-questions { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.survey-result-question { + background-color: #fff; + border-radius: 0.5rem; + box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); + overflow: hidden; + margin-bottom: 2rem; +} +.survey-result-question__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 1.5rem; + background-color: #f8f9fa; + border-bottom: 1px solid #e9ecef; + flex-wrap: wrap; + gap: 0.5rem; +} +.survey-result-question__title { + font-size: 1.125rem; + font-weight: bold; + margin: 0; + flex: 1; +} +.survey-result-question__badge { + display: inline-flex; + align-items: center; + gap: 0.25rem; + font-size: 0.75rem; + padding: 0.25rem 0.5rem; + border-radius: 1rem; +} +.survey-result-question__badge i { + font-size: 0.75rem; +} +.survey-result-question__badge.is-text { + background-color: #e3f2fd; + color: #0d47a1; +} +.survey-result-question__badge.is-radio { + background-color: #e8f5e9; + color: #1b5e20; +} +.survey-result-question__badge.is-checkbox { + background-color: #fff3e0; + color: #e65100; +} +.survey-result-question__badge.is-scale { + background-color: #f3e5f5; + color: #4a148c; +} +.survey-result-question__content { + padding: 1.5rem; +} +.survey-result-question__content .row { + margin-bottom: 1rem; +} +.survey-result-question__content .table { + border-collapse: collapse; + width: 100%; + margin-bottom: 1rem; +} +.survey-result-question__content .table th, .survey-result-question__content .table td { + padding: 0.75rem; + vertical-align: top; + border-top: 1px solid #dee2e6; +} +.survey-result-question__content .table thead th { + vertical-align: bottom; + border-bottom: 2px solid #dee2e6; + background-color: #f8f9fa; +} +.survey-result-question__content .table tbody + tbody { + border-top: 2px solid #dee2e6; +} +.survey-result-question__content .table .table-info { + background-color: #e3f2fd; +} +.survey-result-question__content .table-responsive { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} +.survey-result-question__content canvas { + max-width: 100%; + height: auto !important; +} +.survey-result-question__content h4 { + font-size: 1rem; + font-weight: bold; + margin-top: 0; + color: #495057; +} +.survey-result-question__content .text-break { + word-break: break-word; +} +.survey-result-question__content .font-weight-bold { + font-weight: bold; +} +.survey-result-question__content a { + color: #4a90e2; + text-decoration: none; +} +.survey-result-question__content a:hover { + text-decoration: underline; +} + +@media (max-width: 767px) { + .survey-result-question__header { + flex-direction: column; + align-items: flex-start; + } + .survey-result-question__badge { + margin-top: 0.5rem; + } + .survey-result-question__content .row { + margin-left: 0; + margin-right: 0; + } + .survey-result-question__content .col-md-6, .survey-result-question__content .col-md-12 { + padding-left: 0; + padding-right: 0; + margin-bottom: 1.5rem; + } +} + +/*# sourceMappingURL=survey-result.css.map */ diff --git a/app/assets/stylesheets/application/blocks/tags/_random-tags.css b/app/assets/stylesheets/application/blocks/tags/_random-tags.css new file mode 100644 index 00000000000..57ef080a40e --- /dev/null +++ b/app/assets/stylesheets/application/blocks/tags/_random-tags.css @@ -0,0 +1,75 @@ +.random-tags-item:not(:last-child) { + border-bottom: solid 1px var(--border); +} + +.random-tags-item__link { + display: flex; + text-decoration: none; + padding-left: 1rem; + padding-right: 0.5rem; + padding-block: 0.5rem; + min-height: 2.75rem; + align-items: center; + transition: all 0.2s ease-out; +} +.random-tags-item__link:hover { + background-color: var(--primary-tint); +} + +.random-tags-item__link-inner { + position: relative; + flex: 1; + padding-right: 2em; +} + +.random-tags-item__count { + position: absolute; + right: 0; + top: 2px; + font-size: 0.625rem; + display: flex; + text-align: center; + color: var(--default-text); + justify-content: center; + align-items: center; + padding-inline: 0.75em; + background-color: var(--background); + height: 1.5em; + border-radius: 1em; +} + +.random-tags-item__name { + font-size: 0.875rem; + line-height: 1.4; + color: var(--semi-muted-text); +} +.is-first .random-tags-item__name, .is-second .random-tags-item__name, .is-third .random-tags-item__name { + font-weight: 600; +} +.is-first .random-tags-item__name::before, .is-second .random-tags-item__name::before, .is-third .random-tags-item__name::before { + margin-right: 0.5em; + content: "\f521"; + font-family: "Font Awesome 6 Pro"; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} +.is-first .random-tags-item__name, .is-first .random-tags-item__name::before { + color: var(--gold); +} +.is-second .random-tags-item__name, .is-second .random-tags-item__name::before { + color: var(--silver); +} +.is-third .random-tags-item__name, .is-third .random-tags-item__name::before { + color: var(--bronze); +} +.is-up .random-tags-item__name { + font-size: 1.125em; +} +.is-low .random-tags-item__name { + font-size: 0.875em; +} diff --git a/app/assets/stylesheets/application/blocks/tags/_tag-input.css b/app/assets/stylesheets/application/blocks/tags/_tag-input.css new file mode 100644 index 00000000000..7ad0c6a5300 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/tags/_tag-input.css @@ -0,0 +1,22 @@ +.tag-input { + margin-top: 0.5rem; + border-radius: 0.25rem; + background-color: var(--background-more-tint); + padding: 0.75rem 1rem; + border: dashed 1px var(--border); +} + +.tag-input__title { + font-size: 0.875rem; + line-height: 1.5; + margin-top: 0; + margin-bottom: 0.5rem; + display: block; + font-weight: 600; +} + +.tag-input__items { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} diff --git a/app/assets/stylesheets/application/blocks/tags/_tag-links.css b/app/assets/stylesheets/application/blocks/tags/_tag-links.css new file mode 100644 index 00000000000..64564232843 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/tags/_tag-links.css @@ -0,0 +1,50 @@ + +.tag-links .form-actions { + margin-top: 1rem; +} + +@media (min-width: 48em) { + .tag-links .form-actions__item.is-main { + min-width: 12rem; + } +} + +.tag-links__items { + display: flex; + align-items: flex-end; + flex-wrap: wrap; + gap: .5rem; +} + +.tag-links__item-link { + font-size: .6875rem; + line-height: 1.4; + display: block; + color: var(--muted-text); + background-color: transparent; + border: solid 1px var(--muted-text); + padding: .1875rem .625rem; + border-radius: 2rem; + transition: all .2s ease-in; + text-decoration: none; +} + +.tag-links__item-link:hover { + background-color: rgba(var(--base), .7); + color: var(--semi-muted-text); + border-color: var(--semi-muted-text); +} + +.tag-links__item-edit { + font-size: .75rem; + line-height: 1.4; + display: block; + color: var(--main); + text-decoration: none; + cursor: pointer; +} + +.tag-links__item-edit:hover, +.tag-links__item-edit:active { + text-decoration: underline; +} diff --git a/app/assets/stylesheets/application/blocks/thread/_action-completed.css b/app/assets/stylesheets/application/blocks/thread/_action-completed.css new file mode 100644 index 00000000000..19e357d9c0a --- /dev/null +++ b/app/assets/stylesheets/application/blocks/thread/_action-completed.css @@ -0,0 +1,22 @@ + +.action-completed__action { + @media (min-width: 48em) { + max-width: 16rem; + margin-left: auto; + margin-right: auto; + + } +} +.action-completed__description { + margin-top: .75rem; + @media (min-width: 48em) { + max-width: 28rem; + margin-left: auto; + margin-right: auto; + } + p { + font-size: .75rem; + line-height: 1.5; + + } +} diff --git a/app/assets/stylesheets/application/blocks/thread/_thread-comment-form.css b/app/assets/stylesheets/application/blocks/thread/_thread-comment-form.css new file mode 100644 index 00000000000..afccf047f55 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/thread/_thread-comment-form.css @@ -0,0 +1,52 @@ +.thread-comment-form { +} + +@media (min-width: 48em) { + .thread-comment-form { + display: flex; + } +} + +.thread-comment-form .card-footer { + border-top: none; +} + +@media (min-width: 48em) { + .thread-comment-form.is-action-completed { + margin-top: 1.5rem; + padding-left: var(--thread-header-author); + } +} + +@media (max-width: 47.9375em) { + .thread-comment-form.is-action-completed { + margin-top: 1rem; + } +} + +.thread-comment-form__author { + flex: 0 0 var(--thread-header-author); + height: 100%; + width: var(--thread-header-author); + padding-right: 2rem; + border-right: solid 1px var(--border-tint); +} + +.thread-comment-form__user-icon { + height: auto; + width: 100%; + border-radius: 50%; +} + +.thread-comment-form__form { +} + +.thread-action-completed-form__form { + flex: 1; + position: relative; + overflow: hidden; +} + +.thread-comment-form__action-completed { + flex: 1; +} diff --git a/app/assets/stylesheets/application/blocks/thread/_thread-comment.css b/app/assets/stylesheets/application/blocks/thread/_thread-comment.css new file mode 100644 index 00000000000..7ab82f12c31 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/thread/_thread-comment.css @@ -0,0 +1,263 @@ + +.thread-comment { + position: relative; + border-radius: .25rem; +} + +@media (min-width: 48em) { + .thread-comment { + display: flex; + margin-bottom: 2rem; + } +} + +@media (max-width: 47.9375em) { + .thread-comment { + padding-left: 0; + margin-bottom: 1rem; + } +} + +.thread-comment__start { +} + +@media (min-width: 48em) { + .thread-comment__start { + flex: 0 0 var(--thread-header-author); + height: 100%; + width: var(--thread-header-author); + } +} + +@media (max-width: 47.9375em) { + .thread-comment__start { + display: none; + } +} + +.thread-comment__end { +} + +@media (min-width: 48em) { + .thread-comment__end { + max-width: calc(100% - var(--thread-header-author)); + flex: 1; + } +} + +.thread-comment__title { + font-size: .875rem; + line-height: 1.4; + font-weight: 600; +} + +@media (min-width: 48em) { + .thread-comment__title { + margin-right: .5rem; + flex: 1; + } +} + +@media (max-width: 47.9375em) { + .thread-comment__title { + display: flex; + } +} + +.thread-comment__title-user-icon { +} + +@media (min-width: 48em) { + .thread-comment__title-user-icon { + display: none; + } +} + +@media (max-width: 47.9375em) { + .thread-comment__title-user-icon { + height: 1.5rem; + width: 1.5rem; + display: inline-block; + vertical-align: middle; + margin-right: .25rem; + } +} + +.thread-comment__title-link { +} + +@media (min-width: 48em) { + .thread-comment__title-link { + height: 100%; + display: inline-flex; + align-items: center; + } +} + +@media (max-width: 47.9375em) { + .thread-comment__title-link { + display: inline-block; + white-space: nowrap; + max-width: calc(100vw - 15.5rem); + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + } +} + +.thread-comment__title-link.a-placeholder { + width: 15%; + height: 1.4em; +} + +.thread-comment__title-icon { + height: 1.5rem; + width: 1.5rem; + margin-right: .5rem; +} + +.thread-comment__title-label { + font-size: .8125rem; + display: block; + font-weight: 400; + color: var(--muted-text); + margin-bottom: .125rem; +} + +.thread-comment__title-label i { + margin-right: .1875rem; +} + +.thread-comment__description { + overflow: hidden; + min-height: 5rem; + padding-block: 1rem; + padding-inline: 1rem; +} + +@media (max-width: 47.9375em) { + .thread-comment__description { + padding: .75rem; + word-wrap: break-word; + } +} + +.thread-comment__user-icon { + height: 3.5rem; + width: 3.5rem; + object-fit: cover; + border-radius: 50%; +} + +@media (max-width: 47.9375em) { + .thread-comment__user-icon { + display: none; + } +} + +.thread-comment__company-logo { + height: 3.5rem; + width: 3.5rem; + object-fit: cover; + border-radius: .25rem; + border: solid 1px var(--border); + background-color: white; +} + +@media (min-width: 48em) { + .thread-comment__company-logo { + margin-top: .5rem; + } +} + +@media (max-width: 47.9375em) { + .thread-comment__company-logo { + height: 2.25rem; + width: 2.25rem; + float: right; + margin-left: .75rem; + margin-bottom: .5rem; + } +} + +.thread-comment__created-at { + display: block; + font-size: .8125rem; + line-height: 1.4; + white-space: nowrap; + color: var(--muted-text); + text-decoration: none; + cursor: pointer; + position: relative; +} + +@media (max-width: 47.9375em) { + .thread-comment__created-at { + font-size: .75rem; + } +} + +.thread-comment__created-at:hover, +.thread-comment__created-at:active { + text-decoration: underline; +} + +.thread-comment__created-at:active, +.thread-comment__created-at:focus, +.thread-comment__created-at.is-active { + color: var(--danger); +} + +.thread-comment__created-at:active::after, +.thread-comment__created-at:focus::after, +.thread-comment__created-at.is-active::after { + content: "Copied!"; + display: block; + background-color: rgba(black, .4); + border-radius: .125rem; + padding: .25rem; + font-size: .625rem; + line-height: 1; + color: var(--reversal-text); + left: 0; + position: absolute; + top: 100%; +} + +.thread-comment__created-at.a-placeholder { + width: 30%; + height: 1.4em; +} + +.thread-comment__actions { + padding-block: 0 1rem; +} + +.thread-comment__actions-items { + display: flex; + align-items: center; +} + +.thread-comment__actions-item-link { + font-size: 1.25rem; + line-height: 1; + display: flex; + text-align: center; + color: var(--muted-text); + height: 2.375rem; + width: 2.375rem; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: color .2s ease-in, background-color .2s ease-in; +} + +.thread-comment__actions-item-link.is-success:hover { + background-color: #e0eefe; + color: var(--primary); +} + +.thread-comment__actions-item-link.is-danger:hover { + background-color: #f5e6ea; + color: var(--danger); +} diff --git a/app/assets/stylesheets/application/blocks/thread/_thread-comments-more.css b/app/assets/stylesheets/application/blocks/thread/_thread-comments-more.css new file mode 100644 index 00000000000..1c0a54c24b4 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/thread/_thread-comments-more.css @@ -0,0 +1,42 @@ + +.thread-comments-more { + position: relative; +} + +@media (min-width: 48em) { + .thread-comments-more { + margin-bottom: 2rem; + padding-left: var(--thread-header-author); + } +} + +@media (max-width: 47.9375em) { + .thread-comments-more { + padding-left: 0; + margin-bottom: 1rem; + } +} + +.thread-comments-more::before, +.thread-comments-more::after { + content: ''; + display: block; + height: 7px; + width: 100%; + background: repeating-linear-gradient(-45deg, var(--border)-shade, var(--border)-shade 3px, transparent 3px, transparent 6px); +} + +.thread-comments-more__inner { + padding-block: 1rem; +} + +.thread-comments-more__action { +} + +@media (min-width: 48em) { + .thread-comments-more__action { + max-width: 16rem; + padding-inline: .375rem; + margin-inline: auto; + } +} diff --git a/app/assets/stylesheets/application/blocks/thread/_thread-comments.css b/app/assets/stylesheets/application/blocks/thread/_thread-comments.css new file mode 100644 index 00000000000..9dfa1a3c4ab --- /dev/null +++ b/app/assets/stylesheets/application/blocks/thread/_thread-comments.css @@ -0,0 +1,50 @@ + +.thread-comments { + position: relative; + +} +.thread-comments__header { + @media (min-width: 48em) { + margin-bottom: 1.5rem; + } + @media (max-width: 47.9375em) { + margin-bottom: 1rem; + + } +} +.thread-comments__title { + align-items: center; + display: flex; + font-weight: 700; + @media (min-width: 48em) { + font-size: 1.125rem; + line-height: 1.45; + } + @media (max-width: 47.9375em) { + font-size: 1rem; + line-height: 1.45; + + } +} +.thread-comments__title-count { + font-size: .875rem; + line-height: 1; + display: flex; + font-weight: 600; + align-items: center; + height: 1.25rem; + width: auto; + background-color: var(--base); + padding-inline: .5rem; + border-radius: 1.5rem; + margin-left: .5rem; + +} +.thread-comments { + .form-actions { + @media (min-width: 48em) { + padding-left: var(--thread)-header-author; + + } + } +} diff --git a/app/assets/stylesheets/application/blocks/thread/_thread-form.css b/app/assets/stylesheets/application/blocks/thread/_thread-form.css new file mode 100644 index 00000000000..cdfb6d11920 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/thread/_thread-form.css @@ -0,0 +1,43 @@ + +.thread-form { +} + +@media (min-width: 48em) { + .thread-form { + padding: 1rem 2rem; + } +} + +@media (max-width: 47.9375em) { + .thread-form { + padding: .75rem 1rem; + } +} + +.thread-form__actions { + margin-top: 1rem; +} + +@media (min-width: 48em) { + .thread-form__actions { + display: flex; + justify-content: center; + gap: .75rem; + } +} + +.thread-form__action { +} + +@media (min-width: 48em) { + .thread-form__action { + flex: 0 0 14rem; + max-width: 50%; + } +} + +@media (max-width: 47.9375em) { + .thread-form__action:not(:first-child) { + margin-top: .5rem; + } +} diff --git a/app/assets/stylesheets/application/blocks/thread/_thread-header.css b/app/assets/stylesheets/application/blocks/thread/_thread-header.css new file mode 100644 index 00000000000..1b111bb1693 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/thread/_thread-header.css @@ -0,0 +1,23 @@ + +.thread-header { + position: relative; + @media (min-width: 48em) { + padding: 1rem 2rem .75rem; + } + @media (max-width: 47.9375em) { + padding: 2.25rem .75rem .5rem; + + } +} +.thread-header__user-icon-link { + margin-inline: .5rem .25rem; + display: flex; + justify-content: center; + align-items: center; + +} +.thread-header__user-icon { + height: 1rem; + width: 1rem; + +} diff --git a/app/assets/stylesheets/application/blocks/user/_a-list-item-badge.css b/app/assets/stylesheets/application/blocks/user/_a-list-item-badge.css new file mode 100644 index 00000000000..07815c36e94 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_a-list-item-badge.css @@ -0,0 +1,77 @@ +.a-list-item-badge { + font-size: 0.625rem; + display: inline-flex; + font-weight: 400; + white-space: nowrap; + color: var(--semi-muted-text); + border-radius: 0.75rem; + align-self: flex-start; + align-items: center; + justify-content: center; + position: relative; + width: 3.75rem; + height: 0.8125rem; +} +.a-list-item-badge span { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) scale(0.8); + letter-spacing: -0.05em; +} +.a-list-item-badge.is-wip { + background-color: var(--background-semi-shade); + color: var(--semi-muted-text); +} +.a-list-item-badge.is-active { + background-color: var(--danger); + color: var(--reversal-text); +} +.a-list-item-badge.is-unread { + background-color: var(--danger); + color: var(--reversal-text); +} +.a-list-item-badge.is-searchable { + border: solid 1px var(--muted-text); + color: var(--muted-text); +} +.a-list-item-badge.is-ended { + background-color: var(--muted-text); + color: var(--reversal-text); +} +.a-list-item-badge.is-report { + background-color: #7f6fb7; + color: var(--reversal-text); +} +.a-list-item-badge.is-practice { + background-color: #5bbcc7; + color: var(--reversal-text); +} +.a-list-item-badge.is-question { + background-color: #e2965b; + color: var(--reversal-text); +} +.a-list-item-badge.is-page { + background-color: #56925c; + color: var(--reversal-text); +} +.a-list-item-badge.is-announcement { + background-color: #f7cd5b; + color: var(--default-text); +} +.a-list-item-badge.is-event { + background-color: #fb96a3; + color: var(--reversal-text); +} +.a-list-item-badge.is-regular_event { + background-color: #dc6ed2; + color: var(--reversal-text); +} +.a-list-item-badge.is-product { + background-color: #909b3c; + color: var(--reversal-text); +} +.a-list-item-badge.is-user { + background-color: #7cbd9c; + color: var(--reversal-text); +} diff --git a/app/assets/stylesheets/application/blocks/user/_active-practices-list.css b/app/assets/stylesheets/application/blocks/user/_active-practices-list.css new file mode 100644 index 00000000000..ce9f734caa6 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_active-practices-list.css @@ -0,0 +1,38 @@ +.active-practices-list__items { + margin-bottom: -0.25rem; +} + +.active-practices-list-item:not(:last-child) { + border-bottom: dotted 0.0625rem var(--border-tint); +} + +.active-practices-list-item__link { + font-size: 0.875rem; + line-height: 1.55; + display: block; + color: var(--main); + padding-block: 0.5rem; + padding-inline: 1rem; + text-decoration: none; + cursor: pointer; +} +.active-practices-list-item__link:hover, .active-practices-list-item__link:active { + text-decoration: underline; +} +.active-practices-list-item__link::before { + content: "\f060"; + font-family: "Font Awesome 6 Pro"; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + margin-right: 0.5rem; + color: var(--accent); +} +.active-practices-list-item__link:hover::before { + text-decoration: none; +} diff --git a/app/assets/stylesheets/application/blocks/user/_companies-item.css b/app/assets/stylesheets/application/blocks/user/_companies-item.css new file mode 100644 index 00000000000..970d98ecd5d --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_companies-item.css @@ -0,0 +1,109 @@ + +.companies-item { + height: 100%; +} + +.companies-item__inner { +} + +@media (min-width: 48em) { + .companies-item__inner { + height: 100%; + } +} + +.companies-item__header { + padding: 1rem; +} + +.companies-item__header:not(:last-child) { + border-bottom: solid 1px var(--border-tint); +} + +.companies-item__header-inner { + display: flex; + gap: 1rem; +} + +.companies-item__header-start { +} + +@media (min-width: 48em) { + .companies-item__header-start { + flex: 0 0 3.5rem; + } +} + +@media (max-width: 47.9375em) { + .companies-item__header-start { + flex: 0 0 2.5rem; + } +} + +.companies-item__user-icon-image { + background-color: white; +} + +@media (min-width: 48em) { + .companies-item__user-icon-image { + height: 3.5rem; + width: 3.5rem; + } +} + +@media (max-width: 47.9375em) { + .companies-item__user-icon-image { + height: 2.5rem; + width: 2.5rem; + } +} + +.companies-item__header-end { + flex: 1; +} + +.companies-item__name { + font-size: 1em; + line-height: 1.4; + display: block; + font-weight: 600; + color: var(--main); + margin-bottom: .125rem; +} + +@media (min-width: 48em) { + .companies-item__name { + font-size: 1.125rem; + } +} + +@media (max-width: 47.9375em) { + .companies-item__name { + font-size: 1rem; + } +} + +.companies-item__name-link { + color: var(--main-text); + display: block; + text-decoration: none; + cursor: pointer; +} + +.companies-item__name-link:hover, +.companies-item__name-link:active { + text-decoration: underline; +} + +.companies-item__body { + padding: 1rem; +} + +.companies-item__body-row:not(:first-child) { + margin-top: .75rem; +} + +.companies-item__description p { + font-size: .75rem; + line-height: 1.6; +} diff --git a/app/assets/stylesheets/application/blocks/user/_completed-practices-progress.css b/app/assets/stylesheets/application/blocks/user/_completed-practices-progress.css new file mode 100644 index 00000000000..3c22dc2ca26 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_completed-practices-progress.css @@ -0,0 +1,69 @@ +.completed-practices-progress { + padding: 0.75rem 1rem; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.completed-practices-progress__bar-container { + flex: 1; + border-radius: 20rem; + height: 0.75rem; + overflow: hidden; +} + +.completed-practices-progress__bar { + height: 0.75rem; + width: 100%; + background-color: var(--background-semi-shade); +} + +.completed-practices-progress__percentage-bar { + height: 0.75rem; + background-color: var(--success); + position: relative; + top: -0.75rem; + box-shadow: rgba(0, 0, 0, 0.2) 0 0.0625rem 0.0625rem; +} + +.completed-practices-progress__counts { + position: relative; + cursor: pointer; + display: block; +} + +.completed-practices-progress__counts-inner { + cursor: pointer; +} + +.completed-practices-progress__counts-inner:hover .completed-practices-progress__percentage { + text-decoration: underline; +} + +.completed-practices-progress__percentage { + font-size: 0.8125rem; + text-align: right; + white-space: nowrap; +} + +.completed-practices-progress__number { + position: absolute; + right: 0; + bottom: calc(100% + 0.5rem); + background-color: var(--base); + border: solid 1px var(--border); + padding: 0.25rem 0.5rem; + font-size: 0.8125rem; + line-height: 1.4; + text-align: right; + white-space: nowrap; + border-radius: 0.25rem; +} + +.completed-practices-progress__counts input:checked ~ label .completed-practices-progress__number { + display: block; +} + +.completed-practices-progress__counts input:not(:checked) ~ label .completed-practices-progress__number { + display: none; +} diff --git a/app/assets/stylesheets/application/blocks/user/_following.css b/app/assets/stylesheets/application/blocks/user/_following.css new file mode 100644 index 00000000000..a0743dfc21a --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_following.css @@ -0,0 +1,65 @@ +.following { + position: relative; + width: 100%; +} +.following summary { + display: block; +} +.following summary::-webkit-details-marker, +.following summary::marker { + display: none; +} + +.following__dropdown { + position: absolute; + z-index: 3; + width: 18.75rem; +} + +.following-option { + cursor: pointer; + width: 100%; + padding: 0.75rem; + display: block; + text-align: left; + transition: all 0.2s ease-out; +} +.following-option:hover { + background-color: var(--background-more-tint); +} + +.following-option__inner { + position: relative; + padding-left: 1.5rem; +} +.following-option.is-active .following-option__inner::before { + content: "\f00c"; + font-family: "Font Awesome 6 Pro"; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + left: 0; + position: absolute; + top: 0; +} + +.following-option__label { + font-size: 0.875rem; + line-height: 1.4; + font-weight: 600; + color: var(--semi-muted-text); +} +.following-option.is-active .following-option__label { + color: var(--default-text); +} + +.following-option__desciption { + font-size: 0.75rem; + line-height: 1.5; + color: var(--muted-text); + margin-top: 0.125rem; +} diff --git a/app/assets/stylesheets/application/blocks/user/_group-company-name.css b/app/assets/stylesheets/application/blocks/user/_group-company-name.css new file mode 100644 index 00000000000..94a837c18c0 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_group-company-name.css @@ -0,0 +1,68 @@ + +.group-company-name { +} + +@media (min-width: 48em) { + .group-company-name { + font-size: 1.125rem; + } +} + +@media (max-width: 47.9375em) { + .group-company-name { + font-size: 1rem; + } +} + +.group-company-name__link { + text-decoration: none; + color: var(--main-text); + display: flex; + align-items: center; +} + +.group-company-name__icon { + display: block; + height: 2.5rem; + width: 2.5rem; + margin-right: .75rem; +} + +.group-company-name__icon-image { + height: 100%; + width: 100%; + object-fit: cover; + border-radius: .25rem; +} + +.group-company-name__name { + display: block; + flex: 1; +} + +.group-company-name__label { + display: block; + font-weight: 600; +} + +@media (min-width: 48em) { + .group-company-name__label { + margin-right: .25em; + } + + a:hover .group-company-name__label { + text-decoration: underline; + } +} + +.group-company-name__label-option { + font-size: .75rem; + font-weight: 400; + color: var(--muted-text); + margin-top: .5rem; + display: block; +} + +a:hover .group-company-name__label-option { + text-decoration: none; +} diff --git a/app/assets/stylesheets/application/blocks/user/_niconico-calendar.css b/app/assets/stylesheets/application/blocks/user/_niconico-calendar.css new file mode 100644 index 00000000000..8c1167c8fc2 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_niconico-calendar.css @@ -0,0 +1,141 @@ +.niconico-calendar-nav { + display: flex; + justify-content: center; + align-items: center; + margin-top: -1rem; + font-size: 0.875rem; +} + +.niconico-calendar-nav__previous, +.niconico-calendar-nav__next { + height: 2.75rem; + width: 2.75rem; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + text-decoration: none; + cursor: pointer; +} +.niconico-calendar-nav__previous:hover, .niconico-calendar-nav__previous:active, +.niconico-calendar-nav__next:hover, +.niconico-calendar-nav__next:active { + text-decoration: underline; +} +.niconico-calendar-nav__previous, +.niconico-calendar-nav__next { + transition: all 0.2s ease-out; +} +.niconico-calendar-nav__previous:hover, +.niconico-calendar-nav__next:hover { + color: var(--main-text); +} +.niconico-calendar-nav__previous.is-blank, +.niconico-calendar-nav__next.is-blank { + cursor: default; + pointer-events: none; +} + +.niconico-calendar-nav__year--month { + width: 6rem; + text-align: center; +} + +.niconico-calendar { + width: 100%; + table-layout: fixed; +} +.niconico-calendar th, +.niconico-calendar td { + border: solid 1px var(--border-shade); +} +.niconico-calendar td { + height: 3rem; +} + +.niconico-calendar__header { + background-color: var(--background-tint); +} + +.niconico-calendar__header-day { + width: 14.2857142857%; + font-size: 0.75rem; + line-height: 1; + text-align: center; + padding-block: 0.25em; +} +.niconico-calendar__header-day.is-sunday { + color: var(--danger); +} +.niconico-calendar__header-day.is-saturday { + color: var(--main-text); +} + +.niconico-calendar__day.is-blank { + background-color: var(--background-more-tint); +} +.niconico-calendar__day.is-positive { + background-color: var(--positive-background); +} +.niconico-calendar__day.is-negative { + background-color: var(--negative-background); +} +.niconico-calendar__day.is-neutral { + background-color: var(--neutral-background); +} +.niconico-calendar__day.is-today .niconico-calendar__day-inner { + border: dashed 2px var(--success); +} +.niconico-calendar__day.is-today .niconico-calendar__day-label { + font-weight: 600; + color: var(--success); +} + +.niconico-calendar__day-inner { + display: block; + text-decoration: none; + padding-block: 0.25rem 0.125rem; + height: 100%; + width: 100%; +} + +a.niconico-calendar__day-inner { + transition: all 0.2s ease-out; + cursor: pointer; +} +a.niconico-calendar__day-inner:hover { + background-color: color-mix(in srgb, var(--warning) 10%, transparent); + box-shadow: var(--warning) 0 0 0 1px inset; + position: relative; +} + +.niconico-calendar__day-label { + font-size: 0.625rem; + line-height: 1; + text-align: center; + color: var(--default-text); + margin-bottom: 0.125rem; +} +.niconico-calendar__day.is-blank .niconico-calendar__day-label { + color: var(--muted-text); +} + +.niconico-calendar__day-value { + font-size: 1.75rem; + line-height: 1; + display: flex; + text-align: center; + align-items: center; + justify-content: center; + height: 1.875rem; + width: 100%; +} +.niconico-calendar__day.is-blank .niconico-calendar__day-value { + color: var(--muted-text); + font-size: 1.25rem; +} + +.niconico-calendar__emotion-image { + height: 1em; + width: 1em; +} diff --git a/app/assets/stylesheets/application/blocks/user/_sns-links.css b/app/assets/stylesheets/application/blocks/user/_sns-links.css new file mode 100644 index 00000000000..9bc8ed77e03 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_sns-links.css @@ -0,0 +1,19 @@ + +.sns-links { + margin-top: .5rem; + display: flex; + gap: 1rem; + align-items: center; + justify-content: space-between; +} + +.sns-links__items { +} + +.sns-links__item-link { + font-size: .875rem; +} + +.sns-links__item-link:hover { + color: var(--main-text); +} diff --git a/app/assets/stylesheets/application/blocks/user/_user-data.css b/app/assets/stylesheets/application/blocks/user/_user-data.css new file mode 100644 index 00000000000..aa5d55736d4 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_user-data.css @@ -0,0 +1,51 @@ + +.user-data { + padding: 1rem 1.5rem; + position: relative; + display: flex; + flex-direction: column; +} + +@media (min-width: 48em) { + .user-data { + gap: 1rem; + } +} + +@media (max-width: 47.9375em) { + .user-data { + padding: .75rem; + gap: .75rem; + } +} + +.user-data__description { + flex: 0 0 100%; +} + +@media (min-width: 48em) { + .user-data__description { + font-size: .9375rem; + } +} + +@media (max-width: 47.9375em) { + .user-data__description { + font-size: .8125rem; + } +} + +.user-data__description p { + font-size: 1em; + line-height: 1.8; + margin-top: 0; + margin-bottom: .8em; +} + +.user-data__description p:last-child { + margin-bottom: 0; +} + +.user-data__tags { + margin-top: .75rem; +} diff --git a/app/assets/stylesheets/application/blocks/user/_user-grass.css b/app/assets/stylesheets/application/blocks/user/_user-grass.css new file mode 100644 index 00000000000..fc6ecdfb754 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_user-grass.css @@ -0,0 +1,62 @@ + +.user-grass { + padding: 1rem; +} + +@media (max-width: 47.9375em) { + .user-grass { + padding: .75rem; + } +} + +.user-grass__link { + position: relative; + display: block; +} + +.user-grass__link .user-grass__image.is-loading { + animation: loadingNow .5s ease infinite alternate; +} + +.user-grass-nav { + font-size: .875rem; + display: flex; + justify-content: center; + align-items: center; + margin-top: -1rem; +} + +.user-grass-nav__previous, +.user-grass-nav__next { + height: 2.75rem; + width: 2.75rem; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + text-decoration: none; + transition: all .2s ease-out; +} + +.user-grass-nav__previous:hover, +.user-grass-nav__previous:active, +.user-grass-nav__next:hover, +.user-grass-nav__next:active { + text-decoration: underline; +} + +.user-grass-nav__previous:hover, +.user-grass-nav__next:hover { + color: var(--main-text); +} + +.user-grass-nav__previous.is-blank, +.user-grass-nav__next.is-blank { + cursor: default; + pointer-events: none; +} + +.user-grass-nav__year--month { + width: 13rem; + text-align: center; +} diff --git a/app/assets/stylesheets/application/blocks/user/_user-group.css b/app/assets/stylesheets/application/blocks/user/_user-group.css new file mode 100644 index 00000000000..4a08b90c4b5 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_user-group.css @@ -0,0 +1,113 @@ + +.user-group { + padding: 1rem; +} + +.user-group:not(:first-child) { + border-top: solid 1px var(--border-tint); +} + +.user-group__header { + display: flex; + gap: .5rem; +} + +@media (min-width: 48em) { + .user-group__header { + justify-content: space-between; + } +} + +@media (max-width: 47.9375em) { + .user-group__header { + flex-direction: column; + } +} + +.user-group__title { +} + +@media (min-width: 48em) { + .user-group__title { + font-size: 1rem; + } +} + +@media (max-width: 47.9375em) { + .user-group__title { + font-size: 1rem; + } +} + +.user-group__title-link { + text-decoration: none; + color: var(--main-text); + display: flex; + gap: .5rem; +} + +@media (min-width: 48em) { + .user-group__title-link { + align-items: flex-end; + } +} + +@media (max-width: 47.9375em) { + .user-group__title-link { + flex-direction: column; + } +} + +.user-group__title.is-inline .user-group__title-link { + flex-direction: row; + align-items: flex-end; +} + +.user-group__title-label { + display: block; + font-weight: 600; +} + +.user-group__title-link:hover .user-group__title-label { + text-decoration: underline; +} + +.user-group__title-icon.is-first { + color: var(--gold); +} + +.user-group__title-icon.is-second { + color: var(--silver); +} + +.user-group__title-icon.is-third { + color: var(--bronze); +} + +.user-group__date { + font-size: .75rem; + font-weight: 400; + color: var(--muted-text); +} + +.user-group__count { + font-size: .75rem; + font-weight: 400; + color: var(--muted-text); +} + +.user-group__counts { +} + +@media (min-width: 48em) { + .user-group__counts { + margin-top: -.5rem; + flex: 1; + max-width: 29rem; + } +} + +.user-group__counts .card-counts__item { + width: 3.5rem; + color: var(--default-text); +} diff --git a/app/assets/stylesheets/application/blocks/user/_user-metas.css b/app/assets/stylesheets/application/blocks/user/_user-metas.css new file mode 100644 index 00000000000..e91d3658c42 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_user-metas.css @@ -0,0 +1,97 @@ +.user-metas { + background-color: var(--base); +} + +.user-metas__title { + border: solid 1px var(--border); + margin-bottom: -1px; + padding: .375rem .75rem; + font-size: .75rem; + line-height: 1.4; + font-weight: 600; + background-color: var(--background-tint); + position: relative; +} + +.user-metas__items { + border: solid 1px var(--border); +} + +.user-metas__items + .user-metas__items { + border-top: none; +} + +.user-metas__items-label { + border-bottom: solid 1px var(--border); + padding: .25rem .75rem; + font-size: .75rem; + line-height: 1.4; + font-weight: 600; + background-color: var(--background); +} + +.user-metas__items-label span { + font-weight: 400; +} + +.user-metas__item { + font-size: .75rem; + line-height: 1.4; + display: flex; +} + +@media (max-width: 47.9375em) { + .user-metas__item { + display: block; + } +} + +.user-metas__item:nth-child(even) { + background-color: var(--input-background); +} + +.user-metas__item:not(:last-child) { + border-bottom: solid 1px var(--border); +} + +.user-metas__item-label { + text-align: right; + border-right: dashed 1px var(--border); + flex: 0 0 9rem; + padding: .375rem .5rem; +} + +@media (max-width: 47.9375em) { + .user-metas__item-label { + text-align: left; + border-right: none; + border-bottom: dashed 1px var(--border); + } +} + +.user-metas__item-value { + flex: 1; + padding: .375rem .5rem; +} + +.user-metas__item-value ul { + list-style: disc; + margin-left: 2em; +} + +.user-metas__item-value li { + margin-block: .25rem; +} + +.user-metas__item-value *:first-child { + margin-top: 0; +} + +.user-metas__item-value *:last-child { + margin-bottom: 0; +} + +.user-metas__item-value-text.is-danger { + color: var(--danger); + font-weight: 700; +} diff --git a/app/assets/stylesheets/application/blocks/user/_user-profile.css b/app/assets/stylesheets/application/blocks/user/_user-profile.css new file mode 100644 index 00000000000..c5f3884c3a8 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_user-profile.css @@ -0,0 +1,29 @@ + +.user-profile__icon { + @media (max-width: 47.9375em) { + position: static; + text-align: center; + margin-bottom: .25rem; + + } +} +.user-profile__user-icon-image { + @media (min-width: 48em) { + height: 5rem; + width: 5rem; + } + @media (max-width: 47.9375em) { + height: 4rem; + width: 4rem; + + } +} +.user-company-profile__description { + @media (min-width: 48em) { + font-size: .9375rem; + } + @media (max-width: 47.9375em) { + font-size: .8125rem; + + } +} diff --git a/app/assets/stylesheets/application/blocks/user/_user-secret-attributes.css b/app/assets/stylesheets/application/blocks/user/_user-secret-attributes.css new file mode 100644 index 00000000000..18df8d9a1f3 --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_user-secret-attributes.css @@ -0,0 +1,46 @@ +.user-secret-attributes { + font-size: 0.75rem; + border: solid 1px var(--border); + padding: 0.75em 1em; +} + +.user-secret-attributes:not(:first-child) { + margin-top: 0.25em; +} + +.user-secret-attributes__title { + font-size: 0.75rem; + line-height: 1.4; + font-weight: 600; + margin-bottom: 0.25em; +} + +.user-secret-attributes__items { + display: flex; + flex-wrap: wrap; + color: var(--muted-text); +} + +.user-secret-attributes__items + .user-secret-attributes__items { + margin-top: 0.125rem; +} + +.user-secret-attributes__item { + line-height: 1.4; + display: flex; + align-items: center; +} + +.user-secret-attributes__item:not(:first-child)::before { + content: "、"; +} + +.user-secret-attributes__item-label::after { + content: ":"; + margin-right: 0.25rem; +} + +.user-secret-attributes__item-value.is-important { + font-weight: 600; + color: var(--danger); +} diff --git a/app/assets/stylesheets/application/blocks/user/_user-study-streak-tracker.css b/app/assets/stylesheets/application/blocks/user/_user-study-streak-tracker.css new file mode 100644 index 00000000000..4ed031a6c3e --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_user-study-streak-tracker.css @@ -0,0 +1,127 @@ +.streak-card { + margin-bottom: 1.5rem; +} + +.streak-container { + display: flex; + justify-content: center; +} + +@media (min-width: 48em) { + .streak-container { + gap: 1rem; + } +} + +@media (max-width: 47.9375em) { + .streak-container { + gap: .5rem; + } +} + +.streak-item { + flex: 1; + max-width: 10rem; + display: flex; + justify-content: center; + align-items: center; +} + +@media (min-width: 48em) { + .streak-item { + padding-block: 1rem; + } +} + +@media (max-width: 47.9375em) { + .streak-item { + 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; +} + +@media (min-width: 48em) { + .streak-item__number { + font-size: 2.5rem; + line-height: 1; + } +} + +@media (max-width: 47.9375em) { + .streak-item__number { + font-size: 2rem; + line-height: 1; + } +} + +.streak-item__label { + font-weight: 600; + text-align: center; +} + +@media (min-width: 48em) { + .streak-item__label { + font-size: 1rem; + line-height: 1.4; + } +} + +@media (max-width: 47.9375em) { + .streak-item__label { + font-size: .875rem; + line-height: 1.4; + } +} + +.streak-item__unit { + text-align: center; + color: var(--muted-text); +} + +@media (min-width: 48em) { + .streak-item__unit { + font-size: 1rem; + line-height: 1.4; + } +} + +@media (max-width: 47.9375em) { + .streak-item__unit { + font-size: .75rem; + line-height: 1.4; + } +} + +.streak-item__period { + margin-top: .125rem; + text-align: center; +} + +@media (min-width: 48em) { + .streak-item__period { + font-size: .875rem; + line-height: 1.4; + } +} + +@media (max-width: 47.9375em) { + .streak-item__period { + font-size: .75rem; + line-height: 1.4; + } +} diff --git a/app/assets/stylesheets/application/blocks/user/_users-item.css b/app/assets/stylesheets/application/blocks/user/_users-item.css new file mode 100644 index 00000000000..9202e03dd9a --- /dev/null +++ b/app/assets/stylesheets/application/blocks/user/_users-item.css @@ -0,0 +1,126 @@ + +.users-item { + height: 100%; + container: users-item / inline-size; + +} +.users-item__inactive-message { + background-color: var(--disabled); + font-size: .625rem; + line-height: 1.4; + text-align: center; + padding: .25rem; + border-top-left-radius: .1875rem; + border-top-right-radius: .1875rem; + margin: -1px -1px -.25rem; + +} +.users-item__inner { + @media (min-width: 48em) { + height: 100%; + display: flex; + flex-direction: column; + + } +} +.users-item__header { + position: relative; + padding: .75rem 1rem; + border-bottom: solid 1px var(--border-tint); + +} +.users-item__header-inner { + display: flex; + gap: 1rem; + +} +.users-item__header-start { + display: flex; + flex-direction: column; + gap: .25rem; + align-items: center; + +} +.users-item__header-end { + flex: 1; + +} +.users-item__icon { + @media (min-width: 48em) { + min-width: 3.5rem; + } + @media (max-width: 47.9375em) { + min-width: 2.5rem; + + } +} +.users-item__user-icon-image { + background-color: var(--base); + @media (min-width: 48em) { + height: 3.5rem; + width: 3.5rem; + } + @media (max-width: 47.9375em) { + height: 2.5rem; + width: 2.5rem; + + } +} +.users-item__name { + font-size: 1em; + line-height: 1.4; + display: block; + font-weight: 600; + color: var(--main); + margin-bottom: .125rem; + @media (min-width: 48em) { + font-size: 1.125rem; + } + @media (max-width: 47.9375em) { + font-size: 1rem; + } + i { + color: var(--danger); + margin-left: .25em; + font-size: .75em; + + } +} +.users-item__body { + padding: .75rem 1rem 0; + @media (min-width: 48em) { + flex: 1; + + } +} +.users-item__description { + p { + font-size: .75rem; + line-height: 1.6; + + } +} +.users-item__tags { + margin-top: .75rem; + +} +.users-item__edit { + text-align: center; + margin-top: -.25rem; + padding-bottom: 1rem; + +} +.user-item__company-logo-image { + height: 3.5rem; + width: 3.5rem; + min-width: 3.5rem; + object-fit: cover; + background-color: var(--base); + border-radius: .25rem; + border: solid 1px var(--border-tint); + +} +.users-item__footer { + position: relative; + +} diff --git a/app/assets/stylesheets/atoms/_a-badge.css b/app/assets/stylesheets/atoms/_a-badge.css new file mode 100644 index 00000000000..64f9f9e54d2 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-badge.css @@ -0,0 +1,113 @@ +.a-badge { + text-transform: none; + display: inline-flex; + border: solid 1px; + border-radius: 1em; + font-family: var(--sans-serif); + white-space: nowrap; + text-decoration: none; + align-items: center; + justify-content: center; +} +.a-badge:not(:first-child) { + margin-left: 0.1875em; +} +.a-badge:not(:last-child) { + margin-right: 0.1875em; +} +.a-badge.is-block { + width: 100%; + display: flex; +} +.a-badge.is-block .a-badge__inner { + overflow: hidden; + text-overflow: ellipsis; +} +.a-badge.is-primary { + background-color: var(--primary); + color: var(--reversal-text); + border-color: var(--primary); +} +.a-badge.is-secondary { + background-color: var(--secondary); + color: var(--default-text); + border-color: #d1d1d1; +} +.a-badge.is-info { + background-color: var(--info); + color: var(--reversal-text); + border-color: var(--info); +} +.a-badge.is-success { + background-color: var(--success); + color: var(--reversal-text); + border-color: var(--success); +} +.a-badge.is-warning { + background-color: var(--warning); + color: var(--default-text); + border-color: var(--warning); +} +.a-badge.is-danger { + background-color: var(--danger); + color: var(--reversal-text); + border-color: var(--danger); +} +.a-badge.is-disabled { + background-color: var(--disabled); + color: var(--default-text); + border-color: #d1d1d1; +} +.a-badge.is-main { + background-color: var(--main); + color: var(--reversal-text); + border-color: var(--main); +} +.a-badge.is-muted { + border: none; + color: var(--muted-text); + font-weight: 400; + background-color: var(--background); +} +.a-badge.is-dark-muted { + border: none; + color: var(--semi-muted-text); + font-weight: 400; + background-color: var(--background-semi-shade); +} +.a-badge.is-xs { + font-size: 0.625rem; + padding-inline: 0.625rem; + height: 1.5em; + font-weight: 500; +} +.a-badge.is-xs:not(:first-child) { + margin-left: 0.5em; +} +.a-badge.is-xs:not(:last-child) { + margin-right: 0.5em; +} +.a-badge.is-sm { + font-size: 0.6875rem; + padding-inline: 0.6875rem; + height: 1.65em; + font-weight: 600; +} +.a-badge.is-md { + font-size: 0.8125rem; + padding-inline: 0.8125rem; + height: 1.95em; + font-weight: 600; +} +.a-badge.is-lg { + font-size: 1rem; + padding-inline: 1rem; + height: 2.4em; + font-weight: 600; +} +.a-badge.is-xl { + font-size: 1.25rem; + padding-inline: 1.25rem; + height: 3em; + font-weight: 800; +} diff --git a/app/assets/stylesheets/atoms/_a-block-check.css b/app/assets/stylesheets/atoms/_a-block-check.css new file mode 100644 index 00000000000..4fcaadf0af0 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-block-check.css @@ -0,0 +1,127 @@ +.a-block-check { + height: 100%; +} + +.a-block-check__label { + background-color: var(--input-background); + height: 100%; + min-height: 2.5rem; + font-size: 0.8125rem; + line-height: 1.4; + display: flex; + text-align: center; + gap: 0.25rem; + align-items: center; + justify-content: center; + border: solid 1px var(--input-border); + padding: 0.5rem 1.25rem 0.5rem 2.25rem; + cursor: pointer; + border-radius: 0.25rem; + transition: all 0.2s ease-in; + position: relative; +} + +.a-block-check__label.is-ta-left { + justify-content: flex-start; + text-align: left; +} + +.a-block-check__label.has-input { + flex-wrap: wrap; +} + +.a-block-check__label.has-input label { + flex: 0 0 100%; + cursor: pointer; +} + +.a-block-check__label:hover { + background-color: var(--input-hover-background); + border-color: var(--input-hover-border); +} + +input:checked + .a-block-check__label { + background-color: var(--input-selected-background); + border-color: var(--input-selected-border); + color: var(--input-selected-text); +} + +.a-block-check .a-block-check__label::before { + display: block; + position: absolute; + left: 0.75rem; + top: 50%; + transform: translateY(-50%); +} + +.form-item-block__item .a-block-check__label { + border: none; + border-radius: none; +} + +.a-block-check__label.is-dammy { + pointer-events: none; +} + +/* radio */ +.a-block-check.is-radio .a-block-check__label::before { + content: ""; + width: 0.875rem; + height: 0.875rem; + border: solid 1px var(--input-border); + border-radius: 50%; + background-color: var(--base); +} + +.a-block-check.is-radio input:checked + .a-block-check__label::before { + border-color: var(--primary); + background-color: var(--primary); + box-shadow: inset 0 0 0 2px var(--base); +} + +/* checkbox */ +.a-block-check.is-checkbox .a-block-check__label::before { + content: ""; + width: 0.875rem; + height: 0.875rem; + border: solid 1px var(--input-border); + border-radius: 3px; + background-color: var(--base); +} + +.a-block-check.is-checkbox input:checked + .a-block-check__label::before { + border-color: var(--primary); + background-color: var(--primary); + content: "\f00c"; + font-family: "Font Awesome 6 Pro"; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: var(--reversal-text); +} + +.a-block-check__name { + font-size: 0.875rem; + line-height: 1.4; + display: block; + text-align: center; +} + +.a-block-check__image { + width: 2rem; + height: 2rem; +} + +.a-block-check__label.has-icon .a-block-check__image { + width: 1.5rem; + height: 1.5rem; +} + +.a-block-check__account { + margin-left: 0.25em; + font-weight: 400; +} diff --git a/app/assets/stylesheets/atoms/_a-bookmark-button.css b/app/assets/stylesheets/atoms/_a-bookmark-button.css new file mode 100644 index 00000000000..c931781095e --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-bookmark-button.css @@ -0,0 +1,13 @@ +.a-bookmark-button { + border: none; +} +.a-bookmark-button:hover { + border: none; +} +.a-bookmark-button.is-inactive { + color: var(--semi-muted-text); +} +.a-bookmark-button.is-inactive:hover { + color: var(--default-text); + background-color: var(--background-semi-shade); +} diff --git a/app/assets/stylesheets/atoms/_a-border.css b/app/assets/stylesheets/atoms/_a-border.css new file mode 100644 index 00000000000..a697c9cec94 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-border.css @@ -0,0 +1,20 @@ +.a-border { + height: 1px; + width: 100%; + display: block; + border-top: solid 1px var(--border); +} + +.a-border-tint { + height: 1px; + width: 100%; + display: block; + border-top: solid 1px var(--border-tint); +} + +.a-border-shade { + height: 1px; + width: 100%; + display: block; + border-top: solid 1px var(--border-shade); +} diff --git a/app/assets/stylesheets/atoms/_a-button.css b/app/assets/stylesheets/atoms/_a-button.css new file mode 100644 index 00000000000..996202276fa --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-button.css @@ -0,0 +1,549 @@ +.a-button { + text-transform: none; + font-weight: 600; + display: inline-flex; + border: solid 1px; + border-radius: 0.25rem; + font-family: var(--sans-serif); + line-height: 1.4; + white-space: nowrap; + text-decoration: none; + cursor: pointer; + user-select: none; + align-items: center; + justify-content: center; + transition: all 0.2s ease-out; +} +.a-button.is-block { + display: flex; + width: 100%; + max-width: 100%; +} +.a-button.is-block.is-select { + margin-inline: 0; +} +.a-button:focus { + outline: none; +} +.a-button:disabled { + cursor: default; + pointer-events: none; +} +.a-button:disabled * { + cursor: default; +} +.a-button.is-select { + padding-inline: 0; + position: relative; +} +.a-button.is-select::before { + content: "\f0d7"; + font-family: "Font Awesome 6 Pro"; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + height: 100%; + width: 2em; + right: 0; + position: absolute; + top: 0; + bottom: 0; + font-size: 1em; + line-height: 1; + display: flex; + color: var(--muted-text); + align-items: center; + justify-content: center; +} +.a-button select { + width: 100%; + height: 100%; + border: none; + background: none; + font-size: inherit; + font-weight: inherit; + font-family: inherit; + padding: 0 2.5em 0 1em; + position: relative; + z-index: 1; + min-width: 5rem; +} +.a-button * { + cursor: pointer; +} +.a-button i { + margin-right: 0.35em; + margin-top: 0.02em; + font-size: 1.07em; +} +.a-button.is-icon i { + font-size: 1.35em; + line-height: 1; + margin-right: 0; +} +.a-button.is-checkbox { + position: relative; +} +.a-button.is-checkbox::before { + content: ""; + height: 0.9375em; + width: 0.9375em; + border-radius: 0.1875em; + display: block; + border: solid 1px var(--background-shade); + background-color: var(--base); + left: 1em; + position: absolute; + top: 50%; + transform: translate(0, -50%); +} +.a-button.is-checkbox::after { + content: "\f00c"; + font-family: "Font Awesome 6 Pro"; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-size: 1em; + line-height: 1; + display: flex; + color: var(--reversal-text); + align-items: center; + justify-content: center; + height: 0.9375em; + width: 0.9375em; + left: 1em; + position: absolute; + top: 50%; + transform: translate(0, -50%); + opacity: 0; +} +input:checked + .a-button.is-checkbox::before { + border-color: var(--primary); + background-color: var(--primary); +} +input:checked + .a-button.is-checkbox::after { + opacity: 1; +} + +.a-button.is-primary { + background-color: #5752e8; + color: white; + border-color: #5752e8; +} +.a-button.is-primary:focus, .a-button.is-primary:active { + box-shadow: 0 0 0 0.1875rem rgba(87, 82, 232, 0.25); +} +.a-button.is-primary:hover, .a-button.is-primary:focus, .a-button.is-primary:active { + background-color: rgb(67.494552381, 61.829877551, 231.770122449); + border-color: #5752e8; +} +.a-button.is-primary.is-disabled, .a-button.is-primary:disabled { + color: rgba(255, 255, 255, 0.4); + border-color: rgb(81.78, 77.08, 218.08); + pointer-events: none; +} + +.a-button.is-secondary { + background-color: hsl(242, 1%, 100%); + color: hsl(242, 10%, 30%); + border-color: hsl(242, 3%, 88%); + border-color: var(--input-border); +} +.a-button.is-secondary:focus, .a-button.is-secondary:active { + box-shadow: 0 0 0 0.1875rem rgba(255, 255, 255, 0.25); +} +.a-button.is-secondary:hover, .a-button.is-secondary:focus, .a-button.is-secondary:active { + background-color: hsl(242, 3%, 96%); + border-color: hsl(242, 3%, 82%); +} +.a-button.is-secondary.is-disabled, .a-button.is-secondary:disabled { + color: rgba(69.36, 68.85, 84.15, 0.4); + border-color: rgb(239.7, 239.7, 239.7); + pointer-events: none; +} + +.a-button.is-info { + background-color: hsl(190, 73%, 48%); + color: white; + border-color: hsl(190, 73%, 48%); +} +.a-button.is-info:focus, .a-button.is-info:active { + box-shadow: 0 0 0 0.1875rem rgba(33.048, 181.968, 211.752, 0.25); +} +.a-button.is-info:hover, .a-button.is-info:focus, .a-button.is-info:active { + background-color: hsl(190, 75%, 44%); + border-color: hsl(190, 73%, 48%); +} +.a-button.is-info.is-disabled, .a-button.is-info:disabled { + color: rgba(255, 255, 255, 0.4); + border-color: rgb(31.06512, 171.04992, 199.04688); + pointer-events: none; +} + +.a-button.is-success { + background-color: hsl(150, 39%, 49%); + color: white; + border-color: hsl(150, 39%, 49%); +} +.a-button.is-success:focus, .a-button.is-success:active { + box-shadow: 0 0 0 0.1875rem rgba(76.2195, 173.6805, 124.95, 0.25); +} +.a-button.is-success:hover, .a-button.is-success:focus, .a-button.is-success:active { + background-color: hsl(150, 41%, 45%); + border-color: hsl(150, 39%, 49%); +} +.a-button.is-success.is-disabled, .a-button.is-success:disabled { + color: rgba(255, 255, 255, 0.4); + border-color: rgb(71.64633, 163.25967, 117.453); + pointer-events: none; +} + +.a-button.is-warning { + background-color: hsl(44, 96%, 54%); + color: hsl(242, 10%, 30%); + border-color: hsl(44, 96%, 54%); +} +.a-button.is-warning:focus, .a-button.is-warning:active { + box-shadow: 0 0 0 0.1875rem rgba(250.308, 190.2504, 25.092, 0.25); +} +.a-button.is-warning:hover, .a-button.is-warning:focus, .a-button.is-warning:active { + background-color: hsl(44, 98%, 50%); + border-color: hsl(44, 96%, 54%); +} +.a-button.is-warning.is-disabled, .a-button.is-warning:disabled { + color: rgba(69.36, 68.85, 84.15, 0.4); + border-color: rgb(235.28952, 178.835376, 23.58648); + pointer-events: none; +} + +.a-button.is-danger { + background-color: hsl(349, 90%, 62%); + color: white; + border-color: hsl(349, 90%, 62%); +} +.a-button.is-danger:focus, .a-button.is-danger:active { + box-shadow: 0 0 0 0.1875rem rgba(245.31, 70.89, 102.867, 0.25); +} +.a-button.is-danger:hover, .a-button.is-danger:focus, .a-button.is-danger:active { + background-color: hsl(349, 92%, 58%); + border-color: hsl(349, 90%, 62%); +} +.a-button.is-danger.is-disabled, .a-button.is-danger:disabled { + color: rgba(255, 255, 255, 0.4); + border-color: rgb(230.5914, 66.6366, 96.69498); + pointer-events: none; +} + +.a-button.is-disabled { + background-color: hsl(242, 11%, 85%); + color: hsl(242, 10%, 30%); + border-color: hsl(242, 11%, 85%); +} +.a-button.is-disabled:focus, .a-button.is-disabled:active { + box-shadow: 0 0 0 0.1875rem rgba(212.823, 212.5425, 220.9575, 0.25); +} +.a-button.is-disabled:hover, .a-button.is-disabled:focus, .a-button.is-disabled:active { + background-color: hsl(242, 13%, 81%); + border-color: hsl(242, 11%, 85%); +} +.a-button.is-disabled.is-disabled, .a-button.is-disabled:disabled { + color: rgba(69.36, 68.85, 84.15, 0.4); + border-color: rgb(200.05362, 199.78995, 207.70005); + pointer-events: none; +} + +.a-button.is-main { + background-color: hsl(242, 51%, 51%); + color: white; + border-color: hsl(242, 51%, 51%); +} +.a-button.is-main:focus, .a-button.is-main:active { + box-shadow: 0 0 0 0.1875rem rgba(70.5738, 66.3255, 193.7745, 0.25); +} +.a-button.is-main:hover, .a-button.is-main:focus, .a-button.is-main:active { + background-color: hsl(242, 53%, 47%); + border-color: hsl(242, 51%, 51%); +} +.a-button.is-main.is-disabled, .a-button.is-main:disabled { + color: rgba(255, 255, 255, 0.4); + border-color: rgb(66.339372, 62.34597, 182.14803); + pointer-events: none; +} + +.a-button.is-secondary.is-active { + background-color: #5752e8; + color: white; + border-color: #5752e8; +} +.a-button.is-secondary.is-active:focus, .a-button.is-secondary.is-active:active { + box-shadow: 0 0 0 0.1875rem rgba(87, 82, 232, 0.25); +} +.a-button.is-secondary.is-active:hover, .a-button.is-secondary.is-active:focus, .a-button.is-secondary.is-active:active { + background-color: rgb(67.494552381, 61.829877551, 231.770122449); + border-color: #5752e8; +} +.a-button.is-secondary.is-active.is-disabled, .a-button.is-secondary.is-active:disabled { + color: rgba(255, 255, 255, 0.4); + border-color: rgb(81.78, 77.08, 218.08); + pointer-events: none; +} + +.a-button.is-muted { + border: none; + color: var(--muted-text); + font-weight: 400 !important; + background-color: var(--background); +} + +.a-button.is-muted-bordered { + border-color: hsl(242, 7%, 89%); + color: hsl(242, 5%, 64%); + font-weight: 400 !important; + background-color: white; +} +.a-button.is-muted-bordered:hover { + background-color: var(--background-more-tint); + color: var(--semi-muted-text); +} + +.a-button.is-primary-border { + background-color: rgba(255, 255, 255, 0.1); + color: #5752e8; + border-color: #5752e8; +} +.a-button.is-primary-border:focus, .a-button.is-primary-border:active { + box-shadow: 0 0 0 0.1875rem rgba(87, 82, 232, 0.25); +} +.a-button.is-primary-border:hover, .a-button.is-primary-border:focus, .a-button.is-primary-border:active { + background-color: rgba(87, 82, 232, 0.25); +} +.a-button.is-primary-border.is-disabled, .a-button.is-primary-border:disabled { + color: rgba(87, 82, 232, 0.4); + border-color: rgb(81.78, 77.08, 218.08); + pointer-events: none; +} + +.a-button.is-secondary-border { + background-color: rgba(255, 255, 255, 0.1); + color: hsl(242, 1%, 100%); + border-color: hsl(242, 1%, 100%); +} +.a-button.is-secondary-border:focus, .a-button.is-secondary-border:active { + box-shadow: 0 0 0 0.1875rem rgba(255, 255, 255, 0.25); +} +.a-button.is-secondary-border:hover, .a-button.is-secondary-border:focus, .a-button.is-secondary-border:active { + background-color: rgba(255, 255, 255, 0.25); +} +.a-button.is-secondary-border.is-disabled, .a-button.is-secondary-border:disabled { + color: rgba(255, 255, 255, 0.4); + border-color: rgb(239.7, 239.7, 239.7); + pointer-events: none; +} + +.a-button.is-sm-text span { + font-size: 0.875em; +} + +.a-button.is-lg-icon i { + font-size: 1.5em; +} + +.a-button.is-text, +.a-button.is-text-reversal, +.a-button.is-muted-text { + background: none; + border: none; + font-weight: 400; + text-decoration: none; + cursor: pointer; +} +.a-button.is-text:hover, .a-button.is-text:active, +.a-button.is-text-reversal:hover, +.a-button.is-text-reversal:active, +.a-button.is-muted-text:hover, +.a-button.is-muted-text:active { + text-decoration: underline; +} +.a-button.is-text, +.a-button.is-text-reversal, +.a-button.is-muted-text { + height: auto !important; + padding: 0 !important; +} + +.a-button.is-text { + color: #5752e8; +} + +.a-button.is-text-reversal, +.a-button.is-muted-text { + color: hsl(242, 5%, 64%); +} + +.a-button.is-xxs, +.a-button.is-xxs input[type=submit] { + font-size: 0.625rem; + padding-inline: 0.625rem; + height: 1.4rem; + font-weight: 400; +} + +.a-button.is-xs, +.a-button.is-xs input[type=submit] { + font-size: 0.75rem; + padding-inline: 0.75rem; + height: 1.7rem; + font-weight: 400; +} + +.a-button.is-sm, +.a-button.is-sm input[type=submit] { + font-size: 0.75rem; + padding-inline: .625rem; + height: 2rem; +} + +.a-button.is-md, +.a-button.is-md input[type=submit] { + font-size: 0.8125rem; + padding-inline: 1.1375rem; + height: 2.25rem; +} + +.a-button.is-lg, +.a-button.is-lg input[type=submit] { + font-size: 1rem; + padding-inline: 1rem; + height: 2.75rem; +} + +.a-button.is-xl, +.a-button.is-xl input[type=submit] { + font-size: 1.25rem; + padding-inline: 1.25rem; + height: 57px; + font-weight: 800; +} + +.a-button.is-submit-input { + padding: 0; +} +.a-button.is-submit-input.is-left-icon, .a-button.is-submit-input.is-right-icon { + position: relative; +} +.a-button.is-submit-input.is-left-icon i, .a-button.is-submit-input.is-right-icon i { + font-size: 1.125em; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + bottom: 0; +} +.a-button.is-submit-input.is-left-icon i { + left: 0; + margin-left: 0.45em; +} +.a-button.is-submit-input.is-left-icon input[type=submit] { + padding-left: 2.25em; +} +.a-button.is-submit-input.is-right-icon i { + right: 0; + margin-right: 0.45em; +} +.a-button.is-submit-input.is-right-icon input[type=submit] { + padding-right: 2.25em; +} + +.a-button.is-back { + position: relative; + padding-left: 0.75em; + padding-right: 0; +} +.a-button.is-back::before { + content: "\f104"; + font-family: "Font Awesome 6 Pro"; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + left: 0.75em; + position: absolute; + top: 50%; + transform: translate(0, -50%); +} + +input[type=submit].a-button, +input[type=reset].a-button, +input[type=button].a-button { + display: inline-block; + vertical-align: middle; +} +input[type=submit].a-button.is-block, +input[type=reset].a-button.is-block, +input[type=button].a-button.is-block { + width: 100%; + display: block; +} + +.is-button-group { + display: flex; +} +.is-text-align-center .is-button-group { + justify-content: center; +} +.is-button-group > *:not(:last-child) { + margin-right: -1px; +} +.is-button-group li:first-child .a-button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.is-button-group li:last-child .a-button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.is-button-group li:not(:first-child):not(:last-child) .a-button { + border-radius: 0; +} + +.is-inline-buttons { + display: flex; + gap: 0.5rem; +} +.is-text-align-center .is-inline-buttons { + justify-content: center; +} + +[class*=a-button]:not(input) { + padding-block: 0; +} + +[class*=a-button][class*=-primary]:disabled { + background-color: var(--primary); + cursor: default; +} + +@media (max-width: 47.9375em) { + .a-button.is-xl, + .a-button.is-xl input[type=submit] { + font-size: 1.125rem; + padding-inline: 1.125rem; + height: 3rem; + } +} + +.a-button.is-md.is-select, .a-button.is-md input[type=submit].is-select { + padding-inline: 0; +} diff --git a/app/assets/stylesheets/atoms/_a-cancel-button.css b/app/assets/stylesheets/atoms/_a-cancel-button.css new file mode 100644 index 00000000000..709e74b78f9 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-cancel-button.css @@ -0,0 +1,18 @@ +.a-cancel-button { + margin-left: 0.5em; + color: var(--background); + font-size: 0.875rem; + display: flex; + text-decoration: none; + height: 1.5em; + width: 1.5em; + background-color: var(--muted-text); + align-items: center; + justify-content: center; + border-radius: 50%; + transition: all 0.2s ease-out; +} +.a-cancel-button:hover { + background-color: var(--primary); + color: var(--reversal-text); +} diff --git a/app/assets/stylesheets/atoms/_a-card.css b/app/assets/stylesheets/atoms/_a-card.css new file mode 100644 index 00000000000..5bb548f1b74 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-card.css @@ -0,0 +1,141 @@ +.a-card { + display: flex; + flex-direction: column; + border-radius: 0.25rem; + width: 100%; + margin-inline: auto; + background-color: var(--base); + border: solid 1px var(--border); +} + +.a-card.is-danger { + border-color: var(--danger); + color: var(--danger-text); + background-color: var(--danger-tint); +} + +.a-card:not(:last-child) { + margin-bottom: 0; +} + +.a-card + .a-card { + margin-top: 1rem; +} + +.a-card + .a-card-react, +.a-card-react + .a-card { + margin-top: 1rem; +} + +.a-card.is-borderd { + border: solid 4px var(--default-text); +} + +.a-card.is-modal { + width: 42.5rem; + max-width: 100%; +} + +.a-card.is-toggle label { + cursor: pointer; +} + +.a-card.is-toggle > input:not(:checked) + * + * { + display: none; +} + +.a-card.is-toggle > input:not(:checked) + * { + border-bottom: none; +} + +.a-card.is-toggle > input:checked + * + * { + display: block; +} + +.a-card.is-toggle > input:not(:checked) + * .is-hidden-then-unchecked { + display: none; +} + +.a-card.is-toggle > input:checked + * .is-hidden-then-checked { + display: none; +} + +.a-card.is-toggle .card-body { + max-height: 50vh; + overflow-y: auto; +} + +.a-card:has(.a-table) { + border: none; +} + +.a-card:has(.a-table) .card-header { + border: solid 1px var(--border); + border-bottom: none; +} + +.a-card.is-danger { + border: solid 0.25rem var(--danger); +} + +table.a-card { + display: table; +} + +.a-card__alert { + padding: 0.5rem 1.25rem; + background-color: var(--danger); + text-align: center; + font-size: 0.875rem; + line-height: 1.4; + color: var(--reversal-text); + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} + +.a-card__alert a { + text-decoration: none; + cursor: pointer; + color: var(--reversal-text); +} + +.a-card__alert a:hover, +.a-card__alert a:active { + text-decoration: underline; +} + +.a-card__columns { + display: flex; +} + +@media (max-width: 79.9375em) { + .a-card:not(:last-child) { + margin-bottom: 1rem; + } + + .a-card + .a-card, + .a-card + .a-card-react, + .a-card-react + .a-card { + margin-top: 1rem; + } +} + +@media (min-width: 80em) { + .a-card + .a-card, + .a-card + .a-card-react, + .a-card-react + .a-card { + margin-top: 1.25rem; + } +} + +@media (max-width: 47.9375em) { + .a-card.is-modal { + margin-inline: 1rem; + } +} + +@media (max-width: 63.9375em) { + .a-card__columns { + flex-direction: column; + } +} diff --git a/app/assets/stylesheets/atoms/_a-category-link.css b/app/assets/stylesheets/atoms/_a-category-link.css new file mode 100644 index 00000000000..6fe91aa67b0 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-category-link.css @@ -0,0 +1,16 @@ +.a-category-link { + font-size: 0.8125rem; + line-height: 1.4; + color: var(--muted-text); + text-decoration: none; + cursor: pointer; +} +.a-category-link:hover, .a-category-link:active { + text-decoration: underline; +} +.a-category-link { + transition: all 0.2s ease-out; +} +.a-category-link:hover { + color: var(--default-text); +} diff --git a/app/assets/stylesheets/atoms/_a-checkbox.css b/app/assets/stylesheets/atoms/_a-checkbox.css new file mode 100644 index 00000000000..5c23f867df1 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-checkbox.css @@ -0,0 +1,76 @@ +.a-checkbox { + position: relative; +} + +.a-checkbox input[type="checkbox"] { + position: absolute; + left: 0; + top: 0; + visibility: hidden; + opacity: 0; + pointer-events: none; +} + +.a-checkbox span { + position: relative; + display: inline-block; + margin-bottom: 0; + padding-left: 1.5em; + cursor: pointer; +} + +.a-checkbox span::before { + content: ""; + display: block; + height: 0.875rem; + width: 0.875rem; + border: solid 1px var(--muted-text); + border-radius: 0.1875rem; + left: 0; + position: absolute; + top: 50%; + margin-top: -0.4375rem; + background-color: var(--base); +} + +.a-checkbox input:checked + span::before { + content: "\f00c"; + font-family: "Font Awesome 6 Pro"; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-size: 0.75rem; + line-height: 0.875rem; + display: flex; + text-align: center; + align-items: center; + justify-content: center; + color: var(--reversal-text); + background-color: var(--primary); + border-color: var(--primary-text); +} + +.a-checkbox:hover span { + text-decoration: underline; +} + +.a-checkbox:hover span::before, +.a-checkbox:hover span::after { + text-decoration: none; +} + +.a-toggle-checkbox { + height: 0; + width: 0; + display: block; + left: 0; + position: fixed; + opacity: 0; + overflow: hidden; + visibility: hidden; + pointer-events: none; +} diff --git a/app/assets/stylesheets/atoms/_a-checker.css b/app/assets/stylesheets/atoms/_a-checker.css new file mode 100644 index 00000000000..951b5dbf8bc --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-checker.css @@ -0,0 +1,15 @@ +.a-checker { + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--danger); + border-radius: 1rem; + background-color: var(--danger-tint); + padding: 0.125rem 0.5rem 0.125rem 0.25rem; +} + +.a-checker__status { + font-size: 0.625rem; + line-height: 1; + margin-left: 0.25rem; +} diff --git a/app/assets/stylesheets/atoms/_a-completion-message.css b/app/assets/stylesheets/atoms/_a-completion-message.css new file mode 100644 index 00000000000..c4268315bad --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-completion-message.css @@ -0,0 +1,45 @@ +.a-completion-message { + background-color: var(--success); + padding-block: 0.5rem; +} +.a-completion-message:not(:last-child) { + margin-bottom: 1.25rem; +} + +.a-completion-message__inner { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; +} + +.a-completion-message__title { + font-size: 1em; + line-height: 1.4; + text-align: center; + font-weight: 600; + color: var(--reversal-text); + font-size: 1rem; +} + +.a-completion-message__actions-items { + display: flex; + gap: 0.75rem; +} + +.a-completion-message__actions-item { + width: 9rem; +} + +@media (max-width: 47.9375em) { + .a-completion-message__inner { + flex-direction: column; + gap: 0.75rem; + } + .a-completion-message__title { + font-size: 0.8125rem; + } + .a-completion-message__actions-item { + width: 100%; + } +} diff --git a/app/assets/stylesheets/atoms/_a-copy-button.css b/app/assets/stylesheets/atoms/_a-copy-button.css new file mode 100644 index 00000000000..0e1ba79e186 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-copy-button.css @@ -0,0 +1,27 @@ +.a-copy-button { + position: relative; + color: var(--semi-muted-text); + background-color: var(--background-semi-shade); + border: none; +} +.a-copy-button.is-muted { + color: var(--semi-muted-text); + background-color: var(--background-semi-shade); +} +.a-copy-button.is-active { + background-color: hsl(242, 51%, 51%); + color: var(--reversal-text); +} +.a-copy-button.is-active::after { + content: "Copied!"; + display: block; + background-color: rgba(0, 0, 0, 0.4); + border-radius: 0.125rem; + padding: 0.25rem; + font-size: 0.625rem; + line-height: 1; + color: var(--reversal-text); + position: absolute; + left: 0; + top: 100%; +} diff --git a/app/assets/stylesheets/atoms/_a-count-badge.css b/app/assets/stylesheets/atoms/_a-count-badge.css new file mode 100644 index 00000000000..bf3fae49bc8 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-count-badge.css @@ -0,0 +1,58 @@ +.a-count-badge { + font-size: 1.125rem; + line-height: 1; + text-align: center; + border: solid 1px var(--border-shade); + vertical-align: middle; + border-radius: 0.25rem; + overflow: hidden; + background-color: var(--base); + transition: all 0.2s ease-out; + display: flex; + flex-direction: column; + min-width: 2.75em; +} + +a.a-count-badge { + text-decoration: none; +} + +a.a-count-badge:hover { + background-color: var(--background-more-tint); +} + +.a-count-badge__label { + font-size: 0.625rem; + color: var(--default-text); + border-bottom: solid 1px var(--border-shade); + padding-block: 0.25rem; +} + +.a-count-badge__value { + font-size: 1em; + font-weight: 700; + color: var(--danger); + transition: all 0.2s ease-out; + display: flex; + align-items: center; + justify-content: center; + padding: 0.0625em 0.125em 0.1875em; + line-height: 0.9375; +} + +.a-count-badge__value.is-zero { + color: var(--muted-text); +} + +.a-count-badge__value.is-counting { + color: var(--muted-text); + padding: 0; +} + +.a-count-badge__value.is-counting i { + font-size: 0.75em; +} + +.a-count-badge__value + .a-count-badge__value { + display: none; +} diff --git a/app/assets/stylesheets/atoms/_a-dropdown.css b/app/assets/stylesheets/atoms/_a-dropdown.css new file mode 100644 index 00000000000..1107c7ab019 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-dropdown.css @@ -0,0 +1,11 @@ +.a-dropdown { + overflow: hidden; + background-color: var(--base); + border: solid 1px var(--border-shade); + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0.375rem; + border-radius: 0.25rem; +} + +.a-dropdown__item:not(:last-child) { + border-bottom: solid 1px var(--border); +} diff --git a/app/assets/stylesheets/atoms/_a-elapsed-days.css b/app/assets/stylesheets/atoms/_a-elapsed-days.css new file mode 100644 index 00000000000..beb5fb35e72 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-elapsed-days.css @@ -0,0 +1,43 @@ +.card-header.a-elapsed-days { + letter-spacing: 0.125em; + text-indent: 0.125em; + margin: -1px -1px 0; + background-color: var(--base); + border: solid 1px var(--border); +} +.card-header.a-elapsed-days > * { + width: 100%; +} +.card-header.a-elapsed-days.is-reply-warning { + background-color: var(--reply-warning-background); + border-color: var(--reply-warning-border); +} +.card-header.a-elapsed-days.is-reply-alert { + color: var(--reversal-text); + background-color: var(--reply-alert-background); + border-color: var(--reply-alert-border); +} +.card-header.a-elapsed-days.is-reply-deadline { + color: var(--reversal-text); + background-color: var(--reply-deadline-background); + border-color: var(--reply-deadline-border); +} + +@media (min-width: 48em) { + .card-header.a-elapsed-days { + font-size: 1rem; + line-height: 1.4; + text-align: center; + font-weight: 600; + padding: 0.375rem 1rem; + } +} +@media (max-width: 47.9375em) { + .card-header.a-elapsed-days { + font-size: 0.875rem; + line-height: 1.4; + text-align: center; + font-weight: 600; + padding: 0.375rem 0.75rem; + } +} diff --git a/app/assets/stylesheets/atoms/_a-empty-message.css b/app/assets/stylesheets/atoms/_a-empty-message.css new file mode 100644 index 00000000000..69bbf533707 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-empty-message.css @@ -0,0 +1,33 @@ +.a-empty-message { + font-size: 1rem; + line-height: 1.6; + text-align: center; + margin-inline: auto; + max-width: 100%; +} +.a-empty-message.is-info { + border: solid 1px var(--info); + padding: 0.75rem 1.25rem; + border-radius: 0.25rem; + background-color: var(--info-tint); + color: var(--info-text); +} +.a-empty-message p { + font-size: 0.875em; + line-height: 1.6; + text-align: left; +} + +@media (min-width: 48em) { + .a-empty-message { + width: 42.5rem; + } +} +@media (max-width: 47.9375em) { + .a-empty-message { + font-size: 0.8125rem; + } + .a-empty-message.is-info { + padding: 0.75rem 1rem; + } +} diff --git a/app/assets/stylesheets/atoms/_a-file-input.css b/app/assets/stylesheets/atoms/_a-file-input.css new file mode 100644 index 00000000000..6795e317a34 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-file-input.css @@ -0,0 +1,118 @@ +.a-pdf-input { + display: flex; + gap: .75rem; +} + +@media (max-width: 47.9375em) { + .a-pdf-input { + flex-direction: column; + } +} + +.a-pdf-input__inner { + flex: 1; + background-color: var(--base); + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: pointer; + border-radius: .25rem; + height: 2.25rem; +} + +.a-file-input label { + height: 10rem; + max-width: 100%; + margin-inline: auto; + border: solid 1px var(--input-border); + background-color: var(--base); + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: pointer; + border-radius: .25rem; + padding: .5rem .5rem 2.75rem .5rem; +} + +.a-file-input.is-movie label { + height: auto; + aspect-ratio: 16 / 10; +} + +.a-file-input.is-thumbnail label { + height: 15rem; +} + +.a-file-input img { + max-height: 100%; + transition: all .2s ease-out; +} + +.a-file-input img:hover { + opacity: .6; +} + +.a-file-input.is-square img { + width: 7rem; + height: 7rem; + object-fit: cover; +} + +.a-file-input.is-book img { + max-height: 100%; + max-width: 100%; + object-fit: contain; + border: solid 1px var(--border-tint); +} + +.a-file-input input { + overflow: hidden; + width: 0; + height: 0; + position: absolute; + left: 0; + top: 0; + opacity: 0; +} + +a.a-pdf-input__inner { + text-decoration: none; + color: var(--default-text); +} + +.a-pdf-input__file { + padding: .5rem; + flex: 1; + border-radius: .25rem 0 0 .25rem; + border: solid 1px var(--input-border); + border-right: none; + height: 2.25rem; +} + +.a-pdf-input__file-name { + font-size: .875rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; +} + +@media (min-width: 48em) { + .a-pdf-input__file-name { + max-width: 18rem; + } +} + +@media (max-width: 47.9375em) { + .a-pdf-input__file-name { + max-width: 8rem; + } +} + +.a-pdf-input__upload.a-button { + border-radius: 0 .25rem .25rem 0; +} diff --git a/app/assets/stylesheets/atoms/_a-file-insert.css b/app/assets/stylesheets/atoms/_a-file-insert.css new file mode 100644 index 00000000000..4434c900775 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-file-insert.css @@ -0,0 +1,12 @@ +.a-file-insert { + cursor: pointer; +} +.a-file-insert input { + position: absolute; + left: -44px; + top: 0; + height: 20px; + width: 44px; + background: red; + opacity: 0; +} diff --git a/app/assets/stylesheets/atoms/_a-form-frame.css b/app/assets/stylesheets/atoms/_a-form-frame.css new file mode 100644 index 00000000000..19e3cd0cc68 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-form-frame.css @@ -0,0 +1,8 @@ +.a-form-frame { + max-height: 10rem; + overflow-y: auto; + width: 100%; + padding: 0.5rem; + border: solid 1px var(--input-border); + border-radius: 0.25rem; +} diff --git a/app/assets/stylesheets/atoms/_a-form-help.css b/app/assets/stylesheets/atoms/_a-form-help.css new file mode 100644 index 00000000000..6ce6d52acfd --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-form-help.css @@ -0,0 +1,150 @@ +.a-form-help { + font-size: 0.75rem; + color: var(--semi-muted-text); +} +.a-form-help:not(:first-child) { + margin-top: 0.5rem; +} +label + .a-form-help:not(:first-child) { + margin-top: 0; +} +.a-form-help + input, .a-form-help + textarea { + margin-top: 0.5rem; +} +.a-form-help em { + font-style: normal; + font-weight: 600; +} +.a-form-help.is-danger, +.a-form-help .is-danger { + color: var(--danger); +} +.a-form-help.is-text-align-center { + text-align: center; +} +[class*=a-button] + .a-form-help { + margin-top: 1em; +} +[class*=is-select] + .a-form-help { + margin-top: 0.5em; +} +.form-item-block .a-form-help { + margin-top: 0.75em; +} +.a-form-help p { + font-size: 1em; + line-height: 1.6; +} +.a-form-help p:not(:last-child) { + margin-bottom: 0.75em; +} +.a-form-help a { + text-decoration: none; + cursor: pointer; +} +.a-form-help a:hover, .a-form-help a:active { + text-decoration: underline; +} +.a-form-help *:last-child { + margin-bottom: 0; +} +.a-form-help a { + font-size: 0.75rem; + line-height: 1.6; + text-decoration: none; + cursor: pointer; +} +.a-form-help a:hover, .a-form-help a:active { + text-decoration: underline; +} +.a-form-help a { + cursor: pointer; + transition: color 0.2s ease-in; + color: var(--link-text); +} +.a-form-help a:link { + color: var(--link-text); +} +.a-form-help a:visited { + color: hsl(233, 33%, 58%); +} +.a-form-help a:hover { + color: var(--hover-text); +} +.a-form-help a:active { + color: var(--hover-text); +} +.a-form-help ul { + list-style-type: disc; + list-style-position: outside; + margin-left: 1.5em; +} +.a-form-help ul:not(:last-child) { + margin-bottom: 0.75em; +} +.a-form-help li { + line-height: 1.6; +} +.a-form-help li:not(:first-child) { + margin-top: 0.125em; +} + +.a-form-help-link { + font-size: 0.75rem; + line-height: 1.6; + cursor: pointer; + transition: color 0.2s ease-in; + color: var(--link-text); +} +.a-form-help-link:link { + color: var(--link-text); +} +.a-form-help-link:visited { + color: hsl(233, 33%, 58%); +} +.a-form-help-link:hover { + color: var(--hover-text); +} +.a-form-help-link:active { + color: var(--hover-text); +} +.a-form-help .a-form-help-link.is-danger { + color: var(--danger); +} +.a-form-help-link.is-muted-text { + color: var(--muted-text); +} + +.a-form-help-link__label { + text-decoration: none; + cursor: pointer; +} +.a-form-help-link__label:hover, .a-form-help-link__label:active { + text-decoration: underline; +} + +.a-text-help-link { + cursor: pointer; + transition: color 0.2s ease-in; + color: var(--link-text); +} +.a-text-help-link:link { + color: var(--link-text); +} +.a-text-help-link:visited { + color: hsl(233, 33%, 58%); +} +.a-text-help-link:hover { + color: var(--hover-text); +} +.a-text-help-link:active { + color: var(--hover-text); +} + +.a-text-help-link__label { + text-decoration: none; + cursor: pointer; +} +.a-text-help-link__label:hover, .a-text-help-link__label:active { + text-decoration: underline; +} diff --git a/app/assets/stylesheets/atoms/_a-form-label.css b/app/assets/stylesheets/atoms/_a-form-label.css new file mode 100644 index 00000000000..9591a838969 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-form-label.css @@ -0,0 +1,91 @@ +.a-form-label { + font-size: 0.875rem; + line-height: 1.5; + margin-top: 0; + margin-bottom: 0.5rem; + display: block; + font-weight: 600; +} +.a-form-label:last-child { + margin-bottom: 0; +} +.a-form-label.is-required::after { + content: "\f069"; + font-family: "Font Awesome 6 Pro"; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-size: 0.625rem; + display: inline-block; + color: var(--danger); + margin-left: 0.125rem; + vertical-align: top; + transform: scale(0.7); +} +.a-form-label.is-sm { + font-size: 0.75rem; + line-height: 1.5; +} +.a-form-label.is-lg { + font-size: 1.125rem; + line-height: 1.5; + border-bottom: solid 1px var(--border); + padding-bottom: 0.5rem; +} +.a-form-label.is-inline { + margin-bottom: 0; + margin-right: 0.5rem; +} +.a-form-label.is-margin-bottom-0 { + margin-bottom: 0; +} + +.form-item__label-checkbox { + position: relative; +} +.form-item__label-checkbox .a-form-label { + display: inline-block; + margin-bottom: 0; + padding-left: 0.75em; + cursor: pointer; +} +.form-item__label-checkbox .a-form-label::before { + content: ""; + display: block; + height: 0.875rem; + width: 0.875rem; + border: solid 1px var(--muted-text); + border-radius: 0.1875rem; + left: 0; + position: absolute; + top: 50%; + margin-top: -0.4375rem; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px inset; + background-color: var(--base); +} +.form-item__label-checkbox input:checked + .a-form-label::after { + content: "\f00c"; + font-family: "Font Awesome 6 Pro"; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-size: 0.75rem; + line-height: 0.875rem; + display: block; + text-align: center; + color: var(--primary); + height: 0.875rem; + width: 0.875rem; + left: 0; + position: absolute; + top: 50%; + margin-top: -0.4375rem; +} diff --git a/app/assets/stylesheets/atoms/_a-form-tabs.css b/app/assets/stylesheets/atoms/_a-form-tabs.css new file mode 100644 index 00000000000..bce1585b4b8 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-form-tabs.css @@ -0,0 +1,51 @@ +.a-form-tabs { + display: flex; + background-color: var(--background); + border-bottom: solid 1px var(--border); + margin-bottom: 1rem; + padding: 0.5rem 0.75rem 0; + border-radius: 0.1875rem 0.1875rem 0 0; +} + +.a-form-tabs__tab { + height: 2.5rem; + width: 6.5rem; + font-size: 0.8125rem; + line-height: 1; + display: flex; + font-weight: 600; + color: var(--muted-text); + align-items: center; + justify-content: center; + border-bottom: none; + cursor: pointer; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; + border: solid 1px transparent; + position: relative; + bottom: -1px; + transition: all 0.2s ease-out; +} +.a-form-tabs__tab:hover { + color: var(--default-text); +} +.a-form-tabs__tab.is-active { + background-color: var(--base); + color: var(--main-text); + border-color: var(--border); + border-bottom-color: var(--base); +} + +.micro-report-editor .a-form-tabs { + padding: 0; +} +.micro-report-editor .a-markdown-input { + padding-inline: 0; +} +.micro-report-editor .a-markdown-input__preview { + background-color: transparent; +} +.micro-report-editor .a-form-tabs__tab.is-active { + background-color: transparent; + border-bottom-color: var(--background); +} diff --git a/app/assets/stylesheets/atoms/_a-grab.css b/app/assets/stylesheets/atoms/_a-grab.css new file mode 100644 index 00000000000..a626167189e --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-grab.css @@ -0,0 +1,9 @@ +.a-grab { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + min-height: 2.5rem; + cursor: grab; +} diff --git a/app/assets/stylesheets/atoms/_a-grass.css b/app/assets/stylesheets/atoms/_a-grass.css new file mode 100644 index 00000000000..8ccd91681ad --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-grass.css @@ -0,0 +1,5 @@ +.a-grass { + max-width: 100%; + display: block; + margin-inline: auto; +} diff --git a/app/assets/stylesheets/atoms/_a-help.css b/app/assets/stylesheets/atoms/_a-help.css new file mode 100644 index 00000000000..cf2b6f45ddf --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-help.css @@ -0,0 +1,26 @@ +.a-help { + font-size: 0.75em; + line-height: 1; + display: inline-flex; + color: var(--reversal-text); + width: 1.75em; + height: 1.75em; + text-decoration: none; + background-color: var(--muted-text); + vertical-align: middle; + align-items: center; + justify-content: center; + border-radius: 50%; + cursor: pointer; + transition: all 0.2s ease-out; +} +.a-help:hover { + background-color: var(--main); + color: var(--reversal-text); +} +.a-help:last-child { + margin-left: 0.25em; +} +.is-danger .a-help { + background-color: var(--danger); +} diff --git a/app/assets/stylesheets/atoms/_a-hidden-scrollbar.css b/app/assets/stylesheets/atoms/_a-hidden-scrollbar.css new file mode 100644 index 00000000000..af2cae432ab --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-hidden-scrollbar.css @@ -0,0 +1,8 @@ +.a-hidden-scrollbar { + -ms-overflow-style: none; + scrollbar-width: none; +} + +.a-hidden-scrollbar::-webkit-scrollbar { + display: none; +} diff --git a/app/assets/stylesheets/atoms/_a-horizontal-dashed.css b/app/assets/stylesheets/atoms/_a-horizontal-dashed.css new file mode 100644 index 00000000000..f4735cfd40c --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-horizontal-dashed.css @@ -0,0 +1,5 @@ +.a-horizontal-dashed { + width: 100%; + height: 1px; + border-top: dashed 1px var(--border-shade); +} diff --git a/app/assets/stylesheets/atoms/_a-icon-label.css b/app/assets/stylesheets/atoms/_a-icon-label.css new file mode 100644 index 00000000000..c5492e18cc8 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-icon-label.css @@ -0,0 +1,12 @@ +.a-icon-label { + display: flex; + flex-direction: column; +} +.a-icon-label.is-no-holding { + color: var(--muted-text); +} + +.a-icon-label__icon { + font-size: 1.5rem; + line-height: 0.5; +} diff --git a/app/assets/stylesheets/atoms/_a-image-check.css b/app/assets/stylesheets/atoms/_a-image-check.css new file mode 100644 index 00000000000..16ed13d5394 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-image-check.css @@ -0,0 +1,132 @@ +.a-image-check { + height: 100%; +} + +.a-image-check__inner { + background-color: var(--input-background); + height: 100%; + min-height: 2.5rem; + font-size: 0.8125rem; + line-height: 1.4; + display: flex; + text-align: center; + gap: 0.5rem; + flex-direction: column; + align-items: center; + justify-content: center; + border: solid 1px var(--input-border); + cursor: pointer; + border-radius: 0.25rem; + transition: all 0.2s ease-in; + position: relative; + overflow: hidden; +} + +.a-image-check__inner:hover { + background-color: var(--input-hover-background); + border-color: var(--input-hover-border); +} + +input:checked + .a-image-check__inner { + background-color: var(--input-selected-background); + border-color: var(--input-selected-border); + color: var(--input-selected-text); +} + +input:checked + .a-image-check__inner img { + opacity: 0.7; +} + +input:checked + .a-image-check__inner .a-image-check__start { + background-color: var(--primary); +} + +.a-image-check .a-image-check__inner::before { + display: block; + left: 0.75rem; + position: absolute; + top: 0.75rem; + z-index: 2; +} + +.a-image-check.is-radio .a-image-check__inner::before { + content: ""; + height: 0.875rem; + width: 0.875rem; + border: solid 1px var(--input-border); + border-radius: 50%; + background-color: var(--base); +} + +.a-image-check.is-radio input:checked + .a-image-check__inner::before { + border-color: var(--primary); + background-color: var(--primary); + box-shadow: inset 0 0 0 2px var(--base); +} + +.a-image-check.is-checkbox .a-image-check__inner::before { + content: ""; + height: 0.875rem; + width: 0.875rem; + border: solid 1px var(--input-border); + border-radius: 3px; + background-color: var(--base); +} + +.a-image-check.is-checkbox input:checked + .a-image-check__inner::before { + border-color: var(--primary); + background-color: var(--primary); + content: "\f00c"; + font-family: "Font Awesome 6 Pro"; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: var(--reversal-text); +} + +.a-image-check__start { + width: 100%; +} + +.a-image-check__end { + padding-bottom: 0.5rem; + width: 100%; +} + +.a-image-check__name { + font-size: 0.875rem; + line-height: 1.4; + display: block; + text-align: center; +} + +.a-image-check__image { + height: 2rem; + width: 2rem; +} + +.a-image-check__inner.has-icon .a-image-check__image { + height: 1.75rem; + width: 1.75rem; + margin-right: 0.5rem; +} + +.a-image-check__upload-image { + display: block; + width: 100%; + background-color: var(--background-shade); + aspect-ratio: 120 / 63; + position: relative; +} + +.a-image-check__upload-image i { + left: 50%; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + font-size: 3rem; +} diff --git a/app/assets/stylesheets/atoms/_a-link-card.css b/app/assets/stylesheets/atoms/_a-link-card.css new file mode 100644 index 00000000000..e9140274312 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-link-card.css @@ -0,0 +1,157 @@ +.a-long-text .a-link-card, +.a-long-text .twitter-tweet { + background-color: var(--base); + border: solid 1px var(--border); + padding: 1em; + border-radius: 4px; + width: 36rem; + max-width: 100%; + margin-inline: auto; + display: flex; + flex-direction: column; + gap: 0.5em; +} +.a-long-text .a-link-card img, +.a-long-text .twitter-tweet img { + border: none; +} +.a-long-text .a-link-card div, +.a-long-text .twitter-tweet div { + margin: 0; +} +.a-long-text .a-link-card .a-link-card__title-link, +.a-long-text .twitter-tweet .a-link-card__title-link { + display: inline-block; + max-width: 100%; +} +.a-long-text .a-link-card .a-link-card__title-text, +.a-long-text .twitter-tweet .a-link-card__title-text { + font-weight: 700; + max-width: 100%; + overflow: hidden; + display: -webkit-box; + text-overflow: ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + font-size: 1em; + line-height: 1.4; +} +.a-long-text .a-link-card .a-link-card__favicon-image, +.a-long-text .twitter-tweet .a-link-card__favicon-image { + width: 1em; + min-width: 1em; + max-width: 1em; + height: 1em; + min-height: 1em; + max-height: 1em; + display: block; +} +.a-long-text .a-link-card .a-link-card__favicon-image.is-blank, +.a-long-text .twitter-tweet .a-link-card__favicon-image.is-blank { + display: none; +} +.a-long-text .a-link-card .a-link-card__body, +.a-long-text .twitter-tweet .a-link-card__body { + font-size: 0.875em; + line-height: 1.4; + color: var(--muted-text); + display: flex; + gap: 1em; +} +.a-long-text .a-link-card .a-link-card__body p, +.a-long-text .twitter-tweet .a-link-card__body p { + line-height: 1.4; + margin: 0; +} +.a-long-text .a-link-card .a-link-card__body-start, +.a-long-text .twitter-tweet .a-link-card__body-start { + flex: 2; +} +.a-long-text .a-link-card .a-link-card__body-end, +.a-long-text .twitter-tweet .a-link-card__body-end { + flex: 1; +} +.a-long-text .a-link-card .a-link-card__body-url-link, +.a-long-text .twitter-tweet .a-link-card__body-url-link { + overflow: hidden; + display: -webkit-box; + text-overflow: ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} +.a-long-text .a-link-card .a-link-card__image, +.a-long-text .twitter-tweet .a-link-card__image { + max-width: 12rem; +} +.a-long-text .a-link-card .a-link-card__image.is-blank, +.a-long-text .twitter-tweet .a-link-card__image.is-blank { + display: none; +} +.a-long-text .a-link-card .a-link-card__image-ogp, +.a-long-text .twitter-tweet .a-link-card__image-ogp { + object-fit: cover; + width: 100%; + aspect-ratio: 1.91/1; + border-radius: 0.25rem; +} +.a-long-text .a-link-card .a-link-card__site-title, +.a-long-text .twitter-tweet .a-link-card__site-title { + margin-top: 0.5em; +} +.a-long-text .a-link-card .a-link-card__site-title-link, +.a-long-text .twitter-tweet .a-link-card__site-title-link { + display: inline-flex; + gap: 0.25em; + align-items: center; +} +.a-long-text .a-link-card .a-link-card__site-title-text, +.a-long-text .twitter-tweet .a-link-card__site-title-text { + font-size: 0.875em; + line-height: 1.4; + flex: 1; +} +.a-long-text .twitter-tweet { + position: relative; + line-height: 1.4; + font-size: 0.875em; + color: var(--muted-text); + padding: 2em 3em 1em 2em; +} +.a-long-text .twitter-tweet::before { + font-family: "Font Awesome 6 Brands"; + font-weight: 400; + font-size: 1.5em; + content: "\e61b"; + position: absolute; + right: 0.5em; + top: 0.5em; + display: flex; + justify-content: center; + align-items: center; + width: 1em; + height: 1em; + color: #0f1419; +} +.a-long-text .twitter-tweet p { + font-size: 1.125em; + line-height: 1.6; + margin-bottom: 1em; + color: var(--default-text); +} +.a-long-text .twitter-tweet > a:last-child { + color: var(--muted-text); + text-decoration: none; +} +.a-long-text .twitter-tweet > a:last-child:hover { + color: var(--hover-text); + text-decoration: underline; +} + +@media (max-width: 47.9375em) { + .a-long-text .a-link-card__image { + max-width: 7.5rem; + } + .a-long-text .twitter-tweet { + padding: 2em 3em 1em 1em; + } +} diff --git a/app/assets/stylesheets/atoms/_a-list-item-badge.css b/app/assets/stylesheets/atoms/_a-list-item-badge.css new file mode 100644 index 00000000000..07815c36e94 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-list-item-badge.css @@ -0,0 +1,77 @@ +.a-list-item-badge { + font-size: 0.625rem; + display: inline-flex; + font-weight: 400; + white-space: nowrap; + color: var(--semi-muted-text); + border-radius: 0.75rem; + align-self: flex-start; + align-items: center; + justify-content: center; + position: relative; + width: 3.75rem; + height: 0.8125rem; +} +.a-list-item-badge span { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) scale(0.8); + letter-spacing: -0.05em; +} +.a-list-item-badge.is-wip { + background-color: var(--background-semi-shade); + color: var(--semi-muted-text); +} +.a-list-item-badge.is-active { + background-color: var(--danger); + color: var(--reversal-text); +} +.a-list-item-badge.is-unread { + background-color: var(--danger); + color: var(--reversal-text); +} +.a-list-item-badge.is-searchable { + border: solid 1px var(--muted-text); + color: var(--muted-text); +} +.a-list-item-badge.is-ended { + background-color: var(--muted-text); + color: var(--reversal-text); +} +.a-list-item-badge.is-report { + background-color: #7f6fb7; + color: var(--reversal-text); +} +.a-list-item-badge.is-practice { + background-color: #5bbcc7; + color: var(--reversal-text); +} +.a-list-item-badge.is-question { + background-color: #e2965b; + color: var(--reversal-text); +} +.a-list-item-badge.is-page { + background-color: #56925c; + color: var(--reversal-text); +} +.a-list-item-badge.is-announcement { + background-color: #f7cd5b; + color: var(--default-text); +} +.a-list-item-badge.is-event { + background-color: #fb96a3; + color: var(--reversal-text); +} +.a-list-item-badge.is-regular_event { + background-color: #dc6ed2; + color: var(--reversal-text); +} +.a-list-item-badge.is-product { + background-color: #909b3c; + color: var(--reversal-text); +} +.a-list-item-badge.is-user { + background-color: #7cbd9c; + color: var(--reversal-text); +} diff --git a/app/assets/stylesheets/atoms/_a-long-text.css b/app/assets/stylesheets/atoms/_a-long-text.css new file mode 100644 index 00000000000..2acc4e23a21 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-long-text.css @@ -0,0 +1,648 @@ +.a-long-text { + word-wrap: break-word; +} +.a-long-text h1 { + font-size: 1.875em; + line-height: 1.466; + margin-top: 0; + margin-bottom: 0.75em; + font-weight: 600; + color: var(--main-text); + padding-bottom: 0.25em; + border-bottom: 3px solid var(--border); +} +.a-long-text h2 { + font-size: 1.625em; + line-height: 1.4615; + margin-top: 0; + margin-bottom: 0.75em; + font-weight: 600; + padding-bottom: 0.25em; + border-bottom: 1px solid var(--border); +} +.a-long-text * + h2 { + margin-top: 1.4em; +} +.a-long-text h2 + h3 { + margin-top: 1.4em; +} +.a-long-text * + h2, +.a-long-text * + h3, +.a-long-text * + h4, +.a-long-text * + h5 { + margin-top: 1.5em; +} +.a-long-text h3 { + font-size: 1.375em; + line-height: 1.6; + font-weight: 600; + margin-bottom: 0.625em; +} +.a-long-text h3 + * { + margin-top: 0 !important; +} +.a-long-text h4 { + font-size: 1.25em; + line-height: 1.6; + font-weight: 600; + margin-bottom: 0.625em; +} +.a-long-text h4 + * { + margin-top: 0 !important; +} +.a-long-text h5 { + font-size: 1.125em; + line-height: 1.6; + font-weight: 600; + margin-bottom: 0.625em; +} +.a-long-text h5 + * { + margin-top: 0 !important; +} +.a-long-text h6 { + font-size: 1em; + line-height: 1.6; + font-weight: 600; + margin-bottom: 0.625em; +} +.a-long-text h6 + * { + margin-top: 0 !important; +} +.a-long-text h1, +.a-long-text h2, +.a-long-text h3, +.a-long-text h4, +.a-long-text h5, +.a-long-text h6 { + scroll-snap-align: start; + scroll-snap-stop: always; + position: relative; + outline-style: none; +} +.a-long-text h1:hover .header-anchor, +.a-long-text h2:hover .header-anchor, +.a-long-text h3:hover .header-anchor, +.a-long-text h4:hover .header-anchor, +.a-long-text h5:hover .header-anchor, +.a-long-text h6:hover .header-anchor { + opacity: 1; +} +.a-long-text .header-anchor { + display: flex; + font-size: 0.75rem; + font-weight: 400; + float: left; + position: absolute; + margin-left: -1.5rem; + text-decoration: none !important; + height: 100%; + width: 1.5rem; + align-items: center; + justify-content: center; + transition: all 0.2s ease-out; + opacity: 0; + color: var(--main); +} +.a-long-text video, +.a-long-text canvas, +.a-long-text iframe, +.a-long-text textarea, +.a-long-text figure, +.a-long-text details, +.a-long-text blockquote, +.a-long-text div, +.a-long-text p, +.a-long-text img, +.a-long-text dl, +.a-long-text ol, +.a-long-text ul, +.a-long-text table, +.a-long-text pre, +.a-long-text .speak, +.a-long-text .message { + max-width: 100%; + margin-block: 1.75em; +} +.a-long-text hr { + max-width: 100%; + margin-block: 2.5em; +} +.a-long-text ul, +.a-long-text ol { + list-style-position: outside; + margin-left: 1.75em; +} +.a-long-text li { + font-size: 1em; + line-height: 1.86; + margin-block: 0.5em; +} +.a-long-text li:first-child { + margin-top: 0; +} +.a-long-text li:last-child { + margin-bottom: 0; +} +.a-long-text li input { + margin-right: 0.25rem; +} +.a-long-text li p:last-of-type { + margin-bottom: 0; +} +.a-long-text > p + ul, +.a-long-text > p + ol { + margin-top: 1em; +} +.a-long-text ol { + list-style-type: decimal; +} +.a-long-text ol.is-aiu { + list-style: katakana; +} +.a-long-text > ul { + list-style-type: disc; +} +.a-long-text > ol { + list-style-type: decimal; +} +.a-long-text li ul, +.a-long-text li ol { + margin-block: 0.375em; +} +.a-long-text li ul:first-child, +.a-long-text li ol:first-child { + margin-top: 0.375em; +} +.a-long-text li ul:last-child, +.a-long-text li ol:last-child { + margin-bottom: 0.375em; +} +.a-long-text li > ul { + list-style-type: circle; +} +.a-long-text li > ul > li > ul { + list-style-type: square; +} +.a-long-text .speak.is-mc { + font-weight: 700; +} +.a-long-text .speak__speaker { + margin-bottom: 0.75em; +} +.a-long-text .speak__speaker > a, .a-long-text .speak__speaker > span { + display: flex; + align-items: center; + gap: 0.5rem; + text-decoration: none; + color: var(--default-text); +} +.a-long-text .speak__speaker > a:hover .speak__speaker-name { + text-decoration: underline; +} +.a-long-text .speak__speaker img { + margin-bottom: 0; +} +.a-long-text .speak__speaker-name { + flex: 1; + font-size: 1em; + line-height: 1.6; + font-weight: 700; + text-decoration: none; + white-space: nowrap; +} +.a-long-text .speak__body { + margin-top: 0.5rem; +} +.a-long-text table { + width: 100%; + background-color: var(--base); +} +.a-long-text th, +.a-long-text td { + border: solid 1px var(--border-shade); + padding: 0.5em 0.625em; + font-size: 0.875em; + line-height: 1.6; + text-align: left; +} +.a-long-text th { + background-color: var(--background); +} +.a-long-text tbody tr:nth-child(even) { + background-color: color-mix(in srgb, var(--default-text) 2%, var(--background) 98%); +} +.a-long-text figure:has(figcaption) > *:first-child { + margin-bottom: 0; +} +.a-long-text figcaption { + font-size: 0.875em; + line-height: 1.6; + margin-top: 0.75em; + text-align: center; +} +.a-long-text .message { + padding: 1em 1.25em 1em 2.75em; + border-radius: 0.25rem; + background-color: var(--warning-tint); + color: var(--warning-text); + position: relative; +} +.a-long-text .message::before { + content: "\\f06a"; + font-family: "Font Awesome 6 Pro"; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + left: 0.25em; + position: absolute; + top: 0.25em; + font-size: 1.5em; + color: var(--warning); +} +.a-long-text .message.alert, .a-long-text .message.danger { + background-color: var(--danger-tint); + color: var(--danger-text); +} +.a-long-text .message.alert::before, .a-long-text .message.danger::before { + color: var(--danger); +} +.a-long-text .message.warning { + background-color: var(--warning-tint); + color: var(--warning-text); +} +.a-long-text .message.warning::before { + color: var(--warning); +} +.a-long-text .message.info { + background-color: var(--info-tint); + color: var(--info-text); +} +.a-long-text .message.info::before { + color: var(--info); +} +.a-long-text .message.primary { + background-color: var(--primary-tint); + color: var(--primary-text); +} +.a-long-text .message.primary::before { + color: var(--primary); +} +.a-long-text .message.success { + background-color: var(--success-tint); + color: var(--success-text); +} +.a-long-text .message.success::before { + color: var(--success); +} +.a-long-text ul.contains-task-list { + list-style: none; + margin-left: 0; +} +.a-long-text li.task-list-item { + position: relative; + padding-left: 1.375em; +} +.a-long-text li.task-list-item .task-list-item-checkbox { + left: 0; + position: absolute; + top: 0.5em; +} +.a-long-text p { + font-size: 1em; + line-height: 1.86; +} +.a-long-text a { + text-decoration: none; + cursor: pointer; + transition: color 0.2s ease-in; + color: var(--link-text); +} +.a-long-text a:link { + color: var(--link-text); +} +.a-long-text a:visited { + color: hsl(233, 33%, 58%); +} +.a-long-text a:hover { + color: var(--hover-text); +} +.a-long-text a:active { + color: var(--hover-text); +} +.a-long-text a:hover, .a-long-text a:active { + text-decoration: underline; +} +.a-long-text a:hover img { + border-color: color-mix(in srgb, var(--default-text) 16%, var(--base) 84%); +} +.a-long-text a pre, +.a-long-text a code, +.a-long-text a:link pre, +.a-long-text a:link code, +.a-long-text a:visited pre, +.a-long-text a:visited code, +.a-long-text a:hover pre, +.a-long-text a:hover code { + text-decoration: none !important; +} +.a-long-text dl { + border: 1px solid color-mix(in srgb, var(--default-text) 20%, var(--base) 80%); + padding: 1em; + border-radius: 0.25rem; +} +.a-long-text dt { + font-size: 1em; + line-height: 1.6; + font-weight: 600; + margin-bottom: 0.25em; +} +.a-long-text dd { + font-size: 1em; + line-height: 1.6; +} +.a-long-text dd:not(:last-child) { + margin-block: 1em; +} +.a-long-text code { + font-family: var(--monospace); + tab-size: 2; + hyphens: none; +} +.a-long-text pre { + padding: 0; +} +.a-long-text pre code { + border: none; + font-size: 0.9375em; + line-height: 1.5; + overflow: auto; + display: block; + width: 100%; + padding: 0.875em; +} +.a-long-text code[class*=language-], +.a-long-text pre[class*=language-] { + border: none; + tab-size: 2; +} +.a-long-text pre[class*=language-] { + padding: 0; +} +.a-long-text p *:not(ol):not(ul):first-child, +.a-long-text li *:not(ol):not(ul):first-child { + margin-top: 0; +} +.a-long-text p *:not(ol):not(ul):last-child, +.a-long-text li *:not(ol):not(ul):last-child { + margin-bottom: 0; +} +.a-long-text p pre:not(ol):not(ul):last-child, +.a-long-text li pre:not(ol):not(ul):last-child { + margin-block: 1em; +} +.a-long-text p blockquote, +.a-long-text li blockquote { + margin-left: calc(0.75em + 1px); +} +.a-long-text p blockquote + ul, +.a-long-text li blockquote + ul { + margin-top: -2em; +} +.a-long-text img { + height: auto; + display: block; + margin-inline: auto; + border: 1px solid color-mix(in srgb, var(--default-text) 10%, var(--base) 90%); +} +.a-long-text img.is-xs { + max-width: 10em; +} +.a-long-text img.is-sm { + max-width: 20em; +} +.a-long-text img.is-md { + max-width: 30em; +} +.a-long-text br + img { + margin-block: 1em; +} +.a-long-text div { + position: relative; + width: 100%; +} +.a-long-text div ul, +.a-long-text div ol { + list-style-position: outside; + margin-left: 1.75em; +} +.a-long-text div li { + font-size: 1em; + line-height: 1.86; + margin-block: 0.5em; +} +.a-long-text div li:first-child { + margin-top: 0; +} +.a-long-text div li:last-child { + margin-bottom: 0; +} +.a-long-text div li input { + margin-right: 0.25rem; +} +.a-long-text div li p:last-of-type { + margin-bottom: 0; +} +.a-long-text div > p + ul, +.a-long-text div > p + ol { + margin-top: 1em; +} +.a-long-text div ol { + list-style-type: decimal; +} +.a-long-text div ol.is-aiu { + list-style: katakana; +} +.a-long-text div > ul { + list-style-type: disc; +} +.a-long-text div > ol { + list-style-type: decimal; +} +.a-long-text div li ul, +.a-long-text div li ol { + margin-block: 0.375em; +} +.a-long-text div li ul:first-child, +.a-long-text div li ol:first-child { + margin-top: 0.375em; +} +.a-long-text div li ul:last-child, +.a-long-text div li ol:last-child { + margin-bottom: 0.375em; +} +.a-long-text div li > ul { + list-style-type: circle; +} +.a-long-text div li > ul > li > ul { + list-style-type: square; +} +.a-long-text blockquote { + padding-left: 1.5em; + position: relative; + border-left: solid 0.25em var(--border-tint); +} +.a-long-text blockquote ul, +.a-long-text blockquote ol { + list-style-position: outside; + margin-left: 1.75em; +} +.a-long-text blockquote li { + font-size: 1em; + line-height: 1.86; + margin-block: 0.5em; +} +.a-long-text blockquote li:first-child { + margin-top: 0; +} +.a-long-text blockquote li:last-child { + margin-bottom: 0; +} +p + .a-long-text blockquote { + margin-block: 3em 2.5em; +} +.a-long-text blockquote code { + font-style: normal; +} +.a-long-text blockquote > *:last-child { + margin-bottom: 0 !important; +} +.a-long-text details { + font-size: 0.875rem; + line-height: 1.8; + margin-bottom: 1.5em; + border: solid 1px var(--border); + padding: 0.5em 1em; + border-radius: 0.25rem; +} +.a-long-text details ul, +.a-long-text details ol { + list-style-position: outside; + margin-left: 1.75em; +} +.a-long-text details summary { + font-size: 1em; + line-height: 1.8; + cursor: pointer; + outline: none; + text-decoration: none; +} +.a-long-text details summary:hover, .a-long-text details summary:active { + text-decoration: underline; +} +.a-long-text details[open] summary { + border-bottom: solid 1px var(--border); + padding-bottom: 0.5em; + margin-bottom: 0.5em; +} +.a-long-text iframe { + display: block; + margin-inline: auto; +} +.a-long-text code { + word-break: break-all; + word-wrap: break-word; + white-space: pre-wrap; +} +.a-long-text strong, +.a-long-text b { + font-weight: 700; +} +.a-long-text textarea { + background-color: var(--input-background); + width: 100%; + padding: 0.75em; + border: solid 1px var(--input-border); + border-radius: 0.25rem; + min-height: 16rem; + transition: border-color 0.2s ease-in, background-color 0.2s ease-in, box-shadow 0.2s ease-in; +} +.a-long-text textarea:hover { + background-color: var(--input-hover-background); + border-color: var(--input-hover-border); +} +.a-long-text textarea:focus { + background-color: var(--input-focus-background); + border-color: var(--input-focus-border); + box-shadow: var(--input-focus-shadow); +} +.a-long-text textarea:disabled { + color: #999; + background-color: #dedede; + pointer-events: none; +} +.a-long-text .a-user-emoji-link { + height: 2em; + width: 2em; + display: inline-block; +} +.a-long-text .a-user-emoji-link:not(:first-child) { + margin-left: 0.5em; +} +.a-long-text .a-user-emoji-link .a-user-emoji { + margin-block: 0; +} +.a-long-text .header-anchor + .a-user-emoji-link { + margin-left: 0; +} +.a-long-text .a-user-emoji { + height: 1.8em; + width: 1.8em; + object-fit: cover; + background-color: var(--base); + border-radius: 2px; + display: inline-block !important; + border: none !important; + margin-inline: 0 !important; + vertical-align: middle; +} +.a-long-text *:first-child { + margin-top: 0 !important; +} +.a-long-text *:last-child { + margin-bottom: 0 !important; +} +.a-long-text.is-md { + font-size: 1rem; +} +.a-long-text.is-sm { + font-size: 0.8125rem; +} +.a-long-text.has-no-headding h1, +.a-long-text.has-no-headding h2, +.a-long-text.has-no-headding h3, +.a-long-text.has-no-headding h4, +.a-long-text.has-no-headding h5, +.a-long-text.has-no-headding h6 { + font-size: 1em; + line-height: 1.6; + margin-top: 0; + margin-bottom: 0.625em; + font-weight: 600; + border: none; + padding: 0; +} + +body.articles .a-long-text .a-user-emoji-link, +body.buzz .a-long-text .a-user-emoji-link { + pointer-events: none; +} + +.a-long-text + .a-long-text { + margin-top: 2em; + padding-top: 2em; + border-top: solid 0.25rem var(--border-shade); +} diff --git a/app/assets/stylesheets/atoms/_a-markdown-input.css b/app/assets/stylesheets/atoms/_a-markdown-input.css new file mode 100644 index 00000000000..6a93599e0b1 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-markdown-input.css @@ -0,0 +1,39 @@ +.a-markdown-input { + padding-inline: 1rem; +} +.card-body__description .a-markdown-input { + padding-inline: 0; +} + +.a-markdown-input__inner { + display: none; +} +.a-markdown-input__inner.is-active { + display: block; +} + +.a-markdown-input__textare { + min-height: 9rem; + overflow: hidden; +} + +.a-markdown-input__preview { + background-color: var(--base); + font-size: 0.875rem; + line-height: 1.8; + border-radius: 0.25rem; + min-height: 10rem; +} +.a-markdown-input__preview.has-max-height { + max-height: 70vh; + overflow: auto; +} + +@media (max-width: 47.9375em) { + .a-markdown-input { + padding-inline: 0.75rem; + } + .card-body__description .a-markdown-input { + padding-inline: 0; + } +} diff --git a/app/assets/stylesheets/atoms/_a-meta.css b/app/assets/stylesheets/atoms/_a-meta.css new file mode 100644 index 00000000000..6cc0054b364 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-meta.css @@ -0,0 +1,99 @@ +.a-meta { + font-size: 1em; + line-height: 1.4; + display: flex; + color: var(--muted-text); + align-items: center; + flex-wrap: wrap; +} + +.a-meta .is-important, +.a-meta.is-important { + color: var(--danger); + font-weight: 600; +} + +.a-meta .is-muted { + color: var(--muted-text); +} + +.a-meta .is-emphasized { + color: var(--default-text); + font-weight: 600; +} + +a.a-meta { + text-decoration: none; + cursor: pointer; + color: var(--muted-text); + transition: all 0.2s ease-out; +} + +a.a-meta:hover, +a.a-meta:active { + text-decoration: underline; +} + +a.a-meta:hover { + color: var(--main-text); +} + +a.a-meta.is-disabled { + pointer-events: none; +} + +.a-meta__label::after { + content: ":"; + display: inline-flex; + margin-inline: 0.125em; +} + +.a-meta__icon { + margin-right: 0.125em; +} + +.a-meta__value { + display: flex; + align-items: center; +} + +.a-user-icon + .a-meta__value { + margin-left: 0.25rem; +} + +.a-meta__value.is-danger { + font-weight: 600; + color: var(--danger); +} + +.a-meta__list { + display: inline-flex; +} + +.a-meta__list-item:not(:first-child)::before { + content: "、"; +} + +@media (min-width: 48em) { + .a-meta { + font-size: 0.75rem; + } + + .a-meta + .a-meta { + margin-left: 0.25em; + } + + .a-meta + .a-meta::before { + content: "（"; + } + + .a-meta + .a-meta::after { + content: "）"; + } +} + +@media (max-width: 47.9375em) { + .a-meta { + font-size: 0.75rem; + } +} diff --git a/app/assets/stylesheets/atoms/_a-notice-block.css b/app/assets/stylesheets/atoms/_a-notice-block.css new file mode 100644 index 00000000000..6f7c60b2dda --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-notice-block.css @@ -0,0 +1,108 @@ +.a-notice-block { + width: 34rem; + max-width: 100%; + margin-inline: auto; + border: solid var(--success) 2px; + padding: 1em 1.25em; + color: var(--success-text); + background-color: #f8fff2; + border-radius: 4px; + font-size: 0.875rem; +} +.a-notice-block > *:first-child { + margin-top: 0; +} +.a-notice-block > *:last-child { + margin-bottom: 0; +} +.a-notice-block hr { + display: block; + width: 100%; + height: 0; + border: none; + border-top: dashed 1px var(--border); + margin-block: 1.5em; +} +.a-notice-block p { + font-size: 1em; + line-height: 1.7; + margin-top: 0; + margin-bottom: 0.75em; +} +.a-notice-block li { + font-size: 1em; + line-height: 1.7; + margin-top: 0; + margin-bottom: 0.125em; +} +.a-notice-block a { + text-decoration: none; + cursor: pointer; +} +.a-notice-block a:hover, .a-notice-block a:active { + text-decoration: underline; +} +.a-notice-block .message { + background: red; + padding: 1em 1.25em 1em 2.75em; + border-radius: 0.25rem; + margin-block: 1.5em 2em; + background-color: var(--warning-tint); + color: var(--warning-text); +} +.a-notice-block .message::before { + content: "\f06a"; + font-family: "Font Awesome 6 Pro"; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + left: 0.25em; + position: absolute; + top: 0.25em; + font-size: 1.5em; + color: var(--warning); +} +.a-notice-block .message.alert, .a-notice-block .message.danger { + background-color: var(--danger-tint); + color: var(--danger-text); +} +.a-notice-block .message.alert::before, .a-notice-block .message.danger::before { + color: var(--danger); +} +.a-notice-block .message.warning { + background-color: var(--warning-tint); + color: var(--warning-text); +} +.a-notice-block .message.warning::before { + color: var(--warning); +} +.a-notice-block .message.info { + background-color: var(--info-tint); + color: var(--info-text); +} +.a-notice-block .message.info::before { + color: var(--info); +} +.a-notice-block .message.primary { + background-color: var(--primary-tint); + color: var(--primary-text); +} +.a-notice-block .message.primary::before { + color: var(--primary); +} +.a-notice-block .message.success { + background-color: var(--success-tint); + color: var(--success-text); +} +.a-notice-block .message.success::before { + color: var(--success); +} +.a-notice-block.is-danger { + background-color: var(--danger-tint); + border-color: var(--danger); + color: var(--danger-text); +} diff --git a/app/assets/stylesheets/atoms/_a-notification-count.css b/app/assets/stylesheets/atoms/_a-notification-count.css new file mode 100644 index 00000000000..89e9d42fae1 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-notification-count.css @@ -0,0 +1,13 @@ +.a-notification-count { + height: 0.875rem; + width: 1.25rem; + font-family: var(--monospace); + border-radius: 1rem; + background-color: var(--danger); + position: absolute; + font-size: 0.625rem; + display: flex; + color: var(--reversal-text); + align-items: center; + justify-content: center; +} diff --git a/app/assets/stylesheets/atoms/_a-on-off-checkbox.css b/app/assets/stylesheets/atoms/_a-on-off-checkbox.css new file mode 100644 index 00000000000..ec3c8826550 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-on-off-checkbox.css @@ -0,0 +1,113 @@ +.a-on-off-checkbox { + position: relative; + display: block; + cursor: pointer; + padding-block: 0.5rem; + margin-block: -0.5rem; +} + +.a-on-off-checkbox input { + opacity: 0; + left: -1rem; + position: absolute; + top: 0; + height: 0; + width: 0; + display: block; + overflow: hidden; +} + +.a-on-off-checkbox span { + display: block; + background-color: var(--background); + position: relative; + transition: all 0.2s ease-out; +} + +.a-on-off-checkbox span::before { + content: ""; + display: block; + border-radius: 50%; + background-color: var(--base); + left: 0; + position: absolute; + top: 0; + border: solid 1px var(--input-border); +} + +.a-on-off-checkbox span::after { + content: "OFF"; + font-size: 1em; + line-height: 1; + display: flex; + text-align: center; + font-weight: 600; + align-items: center; + justify-content: center; +} + +.a-on-off-checkbox input:checked + span { + background-color: var(--danger); + border-color: var(--danger); +} + +.a-on-off-checkbox input:checked + span::before { + left: auto; + position: absolute; + right: 0; +} + +.a-on-off-checkbox input:checked + span::after { + content: "ON"; + color: var(--reversal-text); +} + +.a-on-off-checkbox.is-md span { + height: calc(1.5rem + 2px); + width: 4.5rem; + border: solid 1px var(--input-border); + border-radius: 1.5rem; + font-size: 0.8125rem; +} + +.a-on-off-checkbox.is-md span::before { + height: 1.5rem; + width: 1.5rem; +} + +.a-on-off-checkbox.is-md span::after { + height: calc(100% - 2px); + width: 100%; + padding-left: 1.5rem; + padding-right: 0.75em; +} + +.a-on-off-checkbox.is-md input:checked + span::after { + padding-left: 1em; + padding-right: 1.5rem; +} + +.a-on-off-checkbox.is-sm span { + height: calc(1.125rem + 2px); + width: 3.5rem; + border: solid 1px var(--input-border); + border-radius: 1.125rem; + font-size: 0.75rem; +} + +.a-on-off-checkbox.is-sm span::before { + height: 1.125rem; + width: 1.125rem; +} + +.a-on-off-checkbox.is-sm span::after { + height: calc(100% - 2px); + width: 100%; + padding-left: 1.125rem; + padding-right: 0.75em; +} + +.a-on-off-checkbox.is-sm input:checked + span::after { + padding-left: 1em; + padding-right: 1.125rem; +} diff --git a/app/assets/stylesheets/atoms/_a-overlay.css b/app/assets/stylesheets/atoms/_a-overlay.css new file mode 100644 index 00000000000..7f1f85bd639 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-overlay.css @@ -0,0 +1,22 @@ +.a-overlay { + position: fixed; + left: 0; + top: 0; + bottom: 0; + z-index: 1; + background-color: rgba(0, 0, 0, 0.6); + width: 100%; + height: 100%; + opacity: 0; +} +.a-overlay.is-js { + opacity: 1; + z-index: 3; + background-color: rgba(0, 0, 0, 0.6); + display: flex; + align-items: center; + justify-content: center; +} +.a-overlay.is-js.hidden { + display: none; +} diff --git a/app/assets/stylesheets/atoms/_a-page-notice.css b/app/assets/stylesheets/atoms/_a-page-notice.css new file mode 100644 index 00000000000..a2d33179596 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-page-notice.css @@ -0,0 +1,128 @@ +.a-page-notice { + background-color: var(--success); + color: var(--reversal-text); +} + +.a-page-notice.is-danger { + background-color: var(--danger); +} + +.a-page-notice.is-muted { + background-color: var(--background-shade); +} + +.a-page-notice.is-muted .a-page-notice__inner { + color: var(--default-text); +} + +.page-body .a-page-notice { + margin-block: -0.5rem 1rem; +} + +.page-body .page-notices__item .a-page-notice { + margin-block: 0; +} + +.page-tabs + .a-page-notice { + margin-top: 1rem; +} + +.a-page-notice__inner { + padding-block: 0.5rem; + color: var(--reversal-text); + text-align: center; + font-size: 0.875rem; +} + +.a-page-notice__inner.has-close { + position: relative; + display: flex; + text-align: left; +} + +.a-page-notice__inner p { + font-size: 0.875rem; + line-height: 1.5; +} + +.a-page-notice__inner a { + color: var(--reversal-text); + text-decoration: none; + cursor: pointer; +} + +.a-page-notice__inner a:hover, +.a-page-notice__inner a:active { + text-decoration: underline; +} + +.a-page-notice__inner a.has-badge { + text-decoration: none; +} + +.a-page-notice__inner a.has-badge .a-badge { + margin-right: 0.75rem; + background-color: rgba(0, 0, 0, 0.4); + border: none; +} + +.a-page-notice__inner a.has-badge .a-page-notice__label { + text-decoration: none; + cursor: pointer; +} + +.a-page-notice__inner a.has-badge .a-page-notice__label:hover, +.a-page-notice__inner a.has-badge .a-page-notice__label:active { + text-decoration: underline; +} + +.a-page-notice__inner-start { + flex: 1; +} + +.a-page-notice__close { + height: 2.75rem; + width: 2.75rem; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 1.5rem; + opacity: 0.6; + transition: all 0.2s ease-out; + transform: translateX(1rem); + margin-block: -0.75rem; +} + +.a-page-notice__close:hover { + opacity: 1; +} + +@media (max-width: 47.9375em) { + .a-page-notice__inner { + font-size: 0.75rem; + text-align: center; + } + + .a-page-notice__inner p { + font-size: 0.75rem; + } + + .a-page-notice__inner.has-close { + flex-direction: column; + text-align: left; + } + + .a-page-notice__inner a.has-badge { + display: block; + } + + .a-page-notice__inner a.has-badge .a-badge { + display: inline-flex; + } + + .a-page-notice__close { + transform: none; + margin-block: 0; + } +} diff --git a/app/assets/stylesheets/atoms/_a-panels.css b/app/assets/stylesheets/atoms/_a-panels.css new file mode 100644 index 00000000000..83017506ff0 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-panels.css @@ -0,0 +1,15 @@ +.a-panels__items { + display: grid; + gap: 1rem; +} + +.a-panels__item .a-card { + width: 100%; + height: 100%; +} + +@media (min-width: 64em) { + .a-panels__items { + grid-template: repeat(auto-fill, minmax(10rem, 1fr))/repeat(auto-fill, minmax(20rem, 1fr)); + } +} diff --git a/app/assets/stylesheets/atoms/_a-pdf-input.css b/app/assets/stylesheets/atoms/_a-pdf-input.css new file mode 100644 index 00000000000..c3a5ae44308 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-pdf-input.css @@ -0,0 +1,62 @@ +.a-pdf-input { + display: flex; + gap: 0.75rem; +} + +.a-pdf-input__inner { + flex: 1; + background-color: var(--base); + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: pointer; + border-radius: 0.25rem; + height: 2.25rem; +} +.a-pdf-input__inner input { + overflow: hidden; + height: 0; + width: 0; + left: 0; + position: absolute; + top: 0; + opacity: 0; +} + +a.a-pdf-input__inner { + text-decoration: none; + color: var(--default-text); +} + +.a-pdf-input__file { + padding: 0.5rem; + flex: 1; + border-radius: 0.25rem 0 0 0.25rem; + border: solid 1px var(--input-border); + border-right: none; + height: 2.25rem; +} + +.a-pdf-input__file-name { + font-size: 0.875rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + max-width: 18rem; +} + +.a-pdf-input__upload.a-button { + border-radius: 0 0.25rem 0.25rem 0; +} + +@media (max-width: 47.9375em) { + .a-pdf-input { + flex-direction: column; + } + .a-pdf-input__file-name { + max-width: 8rem; + } +} diff --git a/app/assets/stylesheets/atoms/_a-placeholder.css b/app/assets/stylesheets/atoms/_a-placeholder.css new file mode 100644 index 00000000000..23542b46725 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-placeholder.css @@ -0,0 +1,171 @@ +@keyframes loadingNow { + 0% { + opacity: 0.4; + } + 100% { + opacity: 1; + } +} +.a-placeholder { + background-color: var(--placeholder); + animation: loadingNow 0.75s ease infinite alternate; +} +.a-placeholder.a-user-icon { + background-color: var(--placeholder); + display: block; +} +.a-placeholder.page-content-header-metas { + height: 1.4em; + background-color: var(--placeholder); + width: 50%; +} +.a-placeholder.thread-header-title { + height: 1.5em; + width: 70%; +} +.a-placeholder.card-list-item-title { + height: 1.5em; + width: 50%; +} +.a-placeholder.card-list-item-meta__items { + height: 1.4em; + width: 70%; + margin-inline: 0; +} +.a-placeholder.a-button { + background-color: var(--placeholder); + border: none; +} +.a-placeholder.page-nav__item { + border: none; +} +.a-placeholder.page-nav__item .page-nav__item-link-inner { + height: 1.4em; + width: 100%; + background-color: var(--placeholder); + display: block; +} +.a-placeholder.practice-status.category-practices-item__status { + background-color: var(--placeholder); +} +.a-placeholder.categories-item__title { + height: 1.5em; + width: 50%; + background-color: var(--placeholder); +} +.a-placeholder.category-practices-item__title-link { + height: 1.5em; + width: 50%; + background-color: var(--placeholder); +} +.a-placeholder.group-company-name__label { + height: 1em; + width: 50%; + background-color: var(--placeholder); + display: block; +} +.a-placeholder.group-company-name__label-option { + height: 1em; + width: 50%; + background-color: var(--placeholder); + display: block; +} +.a-placeholder.user-group__title-label { + height: 1.2em; + width: 10%; + background-color: var(--placeholder); +} +.a-placeholder.user-group__date { + height: 1em; + width: 20%; + background-color: var(--placeholder); +} +.a-placeholder.a-long-text { + background-color: transparent; +} +.a-placeholder.a-long-text p { + background-color: var(--placeholder); + height: auto; + margin-bottom: 0; +} +.a-placeholder.a-long-text p:not(:first-child) { + margin-top: 0.5em; +} +.a-placeholder.a-long-text p:nth-child(1) { + width: 70%; +} +.a-placeholder.a-long-text p:nth-child(2) { + width: 100%; +} +.a-placeholder.a-long-text p:nth-child(3) { + width: 100%; +} +.a-placeholder.a-long-text p:nth-child(4) { + width: 80%; +} +.a-placeholder.a-long-text p:nth-child(5) { + width: 60%; +} +.a-placeholder.a-long-text p:nth-child(6) { + width: 20%; +} +.a-placeholder.a-long-text p:nth-child(7) { + width: 100%; +} +.a-placeholder.a-long-text p:nth-child(8) { + width: 80%; +} +.a-placeholder.a-long-text p:nth-child(9) { + width: 60%; +} +.a-placeholder.a-long-text p:nth-child(10) { + width: 20%; +} +.a-placeholder.a-long-text p:nth-child(11) { + width: 80%; +} +.a-placeholder.a-long-text p:nth-child(12) { + width: 60%; +} +.a-placeholder.a-long-text p:nth-child(13) { + width: 20%; +} +.a-placeholder.card-list-item-title { + height: 1.2em; + width: 30%; +} +.a-placeholder.card-list-item-meta__item { + height: 1em; + width: 35%; +} +.a-placeholder.sns-links__items.is-button-group { + height: 1.8em; + width: 60%; +} +.a-placeholder.users-item__description.a-short-text { + height: 0.8em; + width: 50%; +} +.a-placeholder.tag-links__item { + height: 1.3em; + width: 20%; +} +.a-placeholder.completed-practices-progress__bar { + height: 1em; + width: 100%; + background-color: var(--placeholder); +} +.a-placeholder.completed-practices-progress__number { + height: 1em; + width: 10%; +} +.a-placeholder.card-counts__item-inner { + height: 2.8125rem; + background-color: var(--placeholder); + border: none; +} + +.a-card.is-loading { + border: none; + background-color: rgba(255, 255, 255, 0.8); +} diff --git a/app/assets/stylesheets/atoms/_a-raw.css b/app/assets/stylesheets/atoms/_a-raw.css new file mode 100644 index 00000000000..ff3813d81ce --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-raw.css @@ -0,0 +1,11 @@ +.a-raw { + font-size: 0.875rem; + line-height: 1.4; + white-space: pre-line; + background-color: var(--input-background); + width: 100%; + padding: 0.5rem; + border: solid 1px var(--input-border); + border-radius: 0.25rem; + transition: border-color 0.2s ease-in, background-color 0.2s ease-in, box-shadow 0.2s ease-in; +} diff --git a/app/assets/stylesheets/atoms/_a-short-text.css b/app/assets/stylesheets/atoms/_a-short-text.css new file mode 100644 index 00000000000..7beee598aba --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-short-text.css @@ -0,0 +1,249 @@ +.a-short-text h3 { + font-size: 1.25em; + line-height: 1.4; + margin-top: 0.75em; +} +.a-short-text p { + font-size: 1em; + line-height: 1.6; + margin-top: 0.75em; +} +.a-short-text li { + font-size: 1em; + line-height: 1.6; +} +.a-short-text ol, +.a-short-text ul { + margin-left: 1.25em; + margin-top: 0.75em; +} +.a-short-text ol { + list-style-type: decimal; +} +.a-short-text > ul { + list-style-type: disc; +} +.a-short-text > ol { + list-style-type: decimal; +} +.a-short-text li ul, +.a-short-text li ol { + margin-block: 0.375em; +} +.a-short-text li ul:first-child, +.a-short-text li ol:first-child { + margin-top: 0.375em; +} +.a-short-text li ul:last-child, +.a-short-text li ol:last-child { + margin-bottom: 0.375em; +} +.a-short-text li > ul { + list-style-type: circle; +} +.a-short-text li > ul > li > ul { + list-style-type: square; +} +.a-short-text a { + text-decoration: none; + cursor: pointer; +} +.a-short-text a:hover, .a-short-text a:active { + text-decoration: underline; +} +.a-short-text a { + transition: color 0.2s ease-in; + color: var(--link-text); +} +.a-short-text a:link { + color: var(--link-text); +} +.a-short-text a:visited { + color: hsl(233, 33%, 58%); +} +.a-short-text a:hover { + color: var(--hover-text); +} +.a-short-text a:active { + color: var(--hover-text); +} +.a-short-text hr { + display: block; + height: 0; + width: 100%; + border: none; + border-top: dashed 1px var(--border); + margin-block: 1.25em; +} +.a-short-text strong, +.a-short-text b { + font-weight: 700; +} +.a-short-text h1 { + font-size: 1.75em; + line-height: 1.4; + margin-top: 0; + margin-bottom: 0.5em; + font-weight: 600; + color: var(--main-text); + padding-bottom: 0.25em; + border-bottom: 3px solid var(--border); +} +.a-short-text h2 { + font-size: 1.5em; + line-height: 1.4; + margin-top: 0; + margin-bottom: 0.5em; + font-weight: 600; + padding-bottom: 0.25em; + border-bottom: 1px solid var(--border); +} +.a-short-text * + h2, +.a-short-text * + h3, +.a-short-text * + h4, +.a-short-text * + h5 { + margin-top: 0.75em; +} +.a-short-text h3 { + font-size: 1.25em; + line-height: 1.4; + font-weight: 600; + margin-bottom: 0.625em; +} +.a-short-text h3 + * { + margin-top: 0 !important; +} +.a-short-text h4 { + font-size: 1.125em; + line-height: 1.5; + font-weight: 600; + margin-bottom: 0.625em; +} +.a-short-text h4 + * { + margin-top: 0 !important; +} +.a-short-text h5 { + font-size: 1em; + line-height: 1.5; + font-weight: 600; + margin-bottom: 0.625em; +} +.a-short-text h5 + * { + margin-top: 0 !important; +} +.a-short-text h6 { + font-size: 0.875rem; + line-height: 1.5; + font-weight: 600; + margin-bottom: 0.625em; +} +.a-short-text h6 + * { + margin-top: 0 !important; +} +.a-short-text h1, +.a-short-text h2, +.a-short-text h3, +.a-short-text h4, +.a-short-text h5, +.a-short-text h6 { + scroll-snap-align: start; + scroll-snap-stop: always; + position: relative; + outline-style: none; +} +.a-short-text h1:hover .header-anchor, +.a-short-text h2:hover .header-anchor, +.a-short-text h3:hover .header-anchor, +.a-short-text h4:hover .header-anchor, +.a-short-text h5:hover .header-anchor, +.a-short-text h6:hover .header-anchor { + opacity: 1; +} +.a-short-text .header-anchor { + display: flex; + font-size: 0.75rem; + font-weight: 400; + float: left; + position: absolute; + margin-left: -1.5rem; + text-decoration: none !important; + height: 100%; + width: 1.5rem; + align-items: center; + justify-content: center; + transition: all 0.2s ease-out; + opacity: 0; +} +.a-short-text .header-anchor:link, .a-short-text .header-anchor:visited { + color: var(--main); +} +.a-short-text .is-danger { + color: var(--danger) !important; +} +.a-short-text .is-warning { + color: var(--warning) !important; +} +.a-short-text.is-ta-center, +.a-short-text .is-ta-center { + text-align: center; +} +.a-short-text.is-sm { + font-size: 0.8125rem; +} +.a-short-text.has-no-headding h1, +.a-short-text.has-no-headding h2, +.a-short-text.has-no-headding h3, +.a-short-text.has-no-headding h4, +.a-short-text.has-no-headding h5, +.a-short-text.has-no-headding h6 { + font-size: 1em; + line-height: 1.6; + margin-top: 0; + margin-bottom: 0.625em; + font-weight: 700; + border: none; + padding: 0; +} +.a-short-text .message { + padding: 0.875rem 1em; + border-radius: 0.25rem; + margin-block: 1em 1em; + background-color: var(--warning-tint); + color: var(--warning-text); +} +.a-short-text .message.alert, .a-short-text .message.danger { + background-color: var(--danger-tint); + color: var(--danger-text); +} +.a-short-text .message.warning { + background-color: var(--warning-tint); + color: var(--warning-text); +} +.a-short-text .message.info { + background-color: var(--info-tint); + color: var(--info-text); +} +.a-short-text .message.primary { + background-color: var(--primary-tint); + color: var(--primary-text); +} +.a-short-text .message.success { + background-color: var(--success-tint); + color: var(--success-text); +} +.a-short-text .a-help { + width: 1.25em; + height: 1.25em; +} +.a-short-text *:first-child { + margin-top: 0; +} +.a-short-text *:last-child { + margin-bottom: 0; +} + +@media (max-width: 47.9375em) { + .a-short-text.is-sm { + font-size: 0.75rem; + } +} diff --git a/app/assets/stylesheets/atoms/_a-side-nav.css b/app/assets/stylesheets/atoms/_a-side-nav.css new file mode 100644 index 00000000000..0e8ff4b3401 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-side-nav.css @@ -0,0 +1,160 @@ +.a-side-nav { + background-color: var(--base); +} + +@media (min-width: 64em) { + .a-side-nav { + position: absolute; + right: 0px; + top: -1.5rem; + bottom: -1.5rem; + width: var(--side-nav-width); + height: calc(100% + 3rem); + border-left: solid 1px var(--border); + } +} + +@media (max-width: 63.9375em) { + .a-side-nav { + margin-top: 1rem; + margin-inline: 1rem; + border-radius: 0.25rem; + border: solid 1px var(--border); + } +} + +.a-side-nav__inner { + display: flex; + flex-direction: column; + max-height: none; + position: static; +} + +@media (min-width: 64em) { + .a-side-nav__inner { + max-height: 100%; + position: sticky; + top: var(--header-height__md-up); + display: flex; + flex-direction: column; + } +} + +.a-side-nav__header { + height: 2.5rem; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.5rem 0.75rem; +} + +.a-side-nav__title { + font-size: 0.875rem; + line-height: 1.4; + font-weight: 600; + width: 100%; +} + +.a-side-nav__title-link { + display: block; + text-decoration: none; + width: 100%; + text-align: center; + color: var(--default-text); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.a-side-nav__title-link:hover { + text-decoration: underline; +} + +.a-side-nav__footer { + height: 2.5rem; + display: flex; + align-items: center; + justify-content: flex-end; + padding: 0.5rem 0.75rem; +} + +.a-side-nav__footer-link { + font-size: 0.8125rem; + line-height: 1.4; + color: var(--muted-text); + text-decoration: none; + cursor: pointer; +} + +.a-side-nav__footer-link:hover, +.a-side-nav__footer-link:active { + text-decoration: underline; +} + +.a-side-nav__body { + overflow: auto; +} + +.a-side-nav__item:not(:first-child) { + border-top: solid 1px var(--border); +} + +.a-side-nav__item.is-active .a-side-nav__item-link { + color: var(--default-text); + font-weight: 700; +} + +.a-side-nav__item.is-current { + position: relative; + z-index: 1; + border: solid 1px var(--primary); + background-color: var(--primary-tint); +} + +.a-side-nav__item.is-current .a-side-nav__item-link { + background-color: transparent; + color: var(--primary-text); + pointer-events: none; +} + +.a-side-nav__item-link { + padding: 0.75rem; + font-size: 0.8125rem; + line-height: 1.4; + color: var(--semi-muted-text); + display: block; + text-decoration: none; + transition: all 0.1s ease-in; + background-color: transparent; +} + +.a-side-nav__item-link:not(.has-metas):hover { + color: var(--primary-text); + text-decoration: underline; +} + +.a-side-nav__item-link.has-metas:hover .a-side-nav__item-title { + transition: all 0.2s ease-out; + color: var(--primary-text); + text-decoration: underline; +} + +.a-side-nav__item-header .a-badge { + transform: translateY(-0.125em); + margin-right: 0.25rem; +} + +.a-side-nav__item-title { + font-size: 0.875rem; + line-height: 1.4; + display: inline; + font-weight: 600; +} + +.a-side-nav-metas { + margin-top: 0.25rem; + font-size: 0.75rem; + display: flex; + flex-wrap: wrap; + gap: 0.25rem 0.75rem; +} diff --git a/app/assets/stylesheets/atoms/_a-switch.css b/app/assets/stylesheets/atoms/_a-switch.css new file mode 100644 index 00000000000..9e608915afb --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-switch.css @@ -0,0 +1,36 @@ +.a-switch { + display: flex; + align-items: center; + cursor: pointer; + transition: all 0.2s ease-out; +} +.a-switch * { + cursor: pointer; +} + +.a-switch__label { + font-size: 0.75rem; + line-height: 1.4; + text-align: center; + color: var(--muted-text); + margin-right: 0.5em; +} +.a-switch__label .a-help { + position: relative; + top: -1px; +} +.a-switch__label:hover .a-switch__label-text { + color: var(--main-text); + text-decoration: underline; +} +.a-switch__label:hover .a-help { + background-color: var(--main); +} + +@media (max-width: 47.9375em) { + .a-switch { + align-items: center; + justify-content: center; + height: 100%; + } +} diff --git a/app/assets/stylesheets/atoms/_a-table.css b/app/assets/stylesheets/atoms/_a-table.css new file mode 100644 index 00000000000..0b0aa14bb3b --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-table.css @@ -0,0 +1,63 @@ +.a-table { + overflow-x: auto; +} + +.a-table.is-sm { + font-size: 0.8125rem; +} + +.a-table td, +.a-table th { + padding: 0.5rem; +} + +.a-table th { + background-color: var(--background-tint); + border: solid 1px var(--border-shade); +} + +.a-table td { + border: solid 1px var(--border); +} + +.a-table table { + border-radius: 0.25rem; + width: 100%; +} + +.a-table thead { + background-color: var(--background-semi-shade); + border: solid 1px var(--border-shade); + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} + +.a-table tr { + border-left: solid 1px var(--border); + border-right: solid 1px var(--border); +} + +.a-table th { + font-size: 0.75rem; + line-height: 1.4; + text-align: center; + font-weight: 600; + border: solid 1px var(--border-shade); + white-space: nowrap; + height: 2rem; + padding-inline: 0.5rem; +} + +.a-table td { + transition: all 0.2s ease-out; + background-color: var(--base); + padding: 0.375rem 0.75rem; + border: solid 1px var(--border); + font-size: 0.8125rem; + line-height: 1.45; +} + +.card-body > .a-table table { + margin: -1px; + width: calc(100% + 2px); +} diff --git a/app/assets/stylesheets/atoms/_a-tags.css b/app/assets/stylesheets/atoms/_a-tags.css new file mode 100644 index 00000000000..59dc03bcc7b --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-tags.css @@ -0,0 +1,5 @@ +.a-tags__items { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} diff --git a/app/assets/stylesheets/atoms/_a-text-input.css b/app/assets/stylesheets/atoms/_a-text-input.css new file mode 100644 index 00000000000..00b81e08cd4 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-text-input.css @@ -0,0 +1,127 @@ +.a-text-input, +.tagify, +.multiselect__single, +.multiselect__input { + font-size: 1em; + line-height: 1.4; + display: block; + background-color: var(--input-background); + width: 100%; + padding: 0.5rem; + border: solid 1px var(--input-border); + border-radius: 0.25rem; + transition: border-color 0.2s ease-in, background-color 0.2s ease-in, box-shadow 0.2s ease-in; +} + +.field_with_errors .a-text-input, +.field_with_errors .tagify, +.field_with_errors .multiselect__single, +.field_with_errors .multiselect__input { + border-color: #e1a7b6; + background-color: #fefafb; +} + +.a-text-input:hover, +.tagify:hover, +.multiselect__single:hover, +.multiselect__input:hover { + background-color: var(--input-hover-background); + border-color: var(--input-hover-border); +} + +.a-text-input:focus, +.tagify:focus, +.multiselect__single:focus, +.multiselect__input:focus { + background-color: var(--input-focus-background); + border-color: var(--input-focus-border); + box-shadow: var(--input-focus-shadow); +} + +.a-text-input:disabled, +.tagify:disabled, +.multiselect__single:disabled, +.multiselect__input:disabled, +.a-text-input[readonly], +.tagify[readonly], +.multiselect__single[readonly], +.multiselect__input[readonly] { + color: var(--muted-text); + background-color: var(--background); + pointer-events: none; +} + +.a-text-input.is-stripe, +.tagify.is-stripe, +.multiselect__single.is-stripe, +.multiselect__input.is-stripe { + box-shadow: none; + padding-top: 0.625rem; +} + +.a-text-input.is-inputed, +.tagify.is-inputed, +.multiselect__single.is-inputed, +.multiselect__input.is-inputed { + border: none; + padding: 0; + background-color: transparent; +} + +input[type="date"].a-text-input, +input[type="month"].a-text-input, +input[type="week"].a-text-input { + position: relative; +} + +input[type="date"].a-text-input::-webkit-inner-spin-button, +input[type="month"].a-text-input::-webkit-inner-spin-button, +input[type="week"].a-text-input::-webkit-inner-spin-button { + -webkit-appearance: none; +} + +input[type="date"].a-text-input::-webkit-clear-button, +input[type="month"].a-text-input::-webkit-clear-button, +input[type="week"].a-text-input::-webkit-clear-button { + position: relative; + z-index: 1; +} + +input[type="date"].a-text-input::-webkit-calendar-picker-indicator, +input[type="month"].a-text-input::-webkit-calendar-picker-indicator, +input[type="week"].a-text-input::-webkit-calendar-picker-indicator { + color: transparent; + background-color: transparent; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + cursor: pointer; + opacity: 0; +} + +textarea.a-text-input { + line-height: 1.5; + min-height: 10rem; + overflow: hidden; +} + +textarea.a-text-input.is-xs { + min-height: 6rem; +} + +textarea.a-text-input.is-sm { + min-height: 10rem; +} + +textarea.a-text-input.is-md { + min-height: 16rem; +} + +textarea.a-text-input.has-max-height { + max-height: 70vh; + overflow: auto; +} diff --git a/app/assets/stylesheets/atoms/_a-text-link.css b/app/assets/stylesheets/atoms/_a-text-link.css new file mode 100644 index 00000000000..9b8491dca4d --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-text-link.css @@ -0,0 +1,99 @@ +.a-text-link { + text-decoration: none; + cursor: pointer; + transition: color 0.2s ease-in; + color: var(--link-text); +} + +.a-text-link:link { + color: var(--link-text); +} + +.a-text-link:visited { + color: hsl(233, 33%, 58%); +} + +.a-text-link:hover, +.a-text-link:active { + text-decoration: underline; + color: var(--hover-text); +} + +.a-text-link.has-badge { + text-decoration: none; +} + +.a-text-link.has-badge .a-text-link__text { + text-decoration: none; + cursor: pointer; + transition: color 0.2s ease-in; + color: var(--link-text); +} + +.a-text-link.has-badge .a-text-link__text:link { + color: var(--link-text); +} + +.a-text-link.has-badge .a-text-link__text:visited { + color: hsl(233, 33%, 58%); +} + +.a-text-link.has-badge .a-text-link__text:hover, +.a-text-link.has-badge .a-text-link__text:active { + text-decoration: underline; + color: var(--hover-text); +} + +.a-hover-link, +.a-hover-link-reversal, +.a-reversal-text-link, +.a-muted-text-link { + text-decoration: none; + cursor: pointer; +} + +.a-hover-link:hover, +.a-hover-link:active, +.a-hover-link-reversal:hover, +.a-hover-link-reversal:active { + text-decoration: underline; +} + +.a-reversal-text-link { + transition: color 0.2s ease-in; + color: var(--reversal-text); +} + +.a-reversal-text-link:link { + color: var(--reversal-text); +} + +.a-reversal-text-link:visited { + color: hsl(242, 62%, 74%); +} + +.a-reversal-text-link:hover { + text-decoration: underline; + color: hsl(210, 100%, 80%); +} + +.a-reversal-text-link:active { + text-decoration: underline; + color: hsl(316, 90%, 66%); +} + +.a-muted-text-link { + transition: color 0.2s ease-in; + color: var(--muted-text); +} + +.a-muted-text-link:link, +.a-muted-text-link:visited { + color: var(--muted-text); +} + +.a-muted-text-link:hover, +.a-muted-text-link:active { + text-decoration: underline; + color: var(--link-text); +} diff --git a/app/assets/stylesheets/atoms/_a-text.css b/app/assets/stylesheets/atoms/_a-text.css new file mode 100644 index 00000000000..83a7bff98a6 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-text.css @@ -0,0 +1,3 @@ +.a-text.is-danger { + color: var(--danger-text); +} diff --git a/app/assets/stylesheets/atoms/_a-textarea-bottom-note.css b/app/assets/stylesheets/atoms/_a-textarea-bottom-note.css new file mode 100644 index 00000000000..4a00314e8fd --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-textarea-bottom-note.css @@ -0,0 +1,30 @@ +@media (max-width: 63.9375em) { + .a-textarea-bottom-note__banner { + display: none; + } +} + +@media (min-width: 64em) { + .a-textarea-bottom-note { + position: relative; + } + + .a-textarea-bottom-note .a-text-input { + padding-bottom: 3rem; + } + + .a-textarea-bottom-note__banner { + background-color: var(--background-semi-shade); + position: absolute; + left: 1px; + right: 1px; + bottom: 1px; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + padding: 0.5rem; + font-size: 0.75rem; + line-height: 1.4; + text-align: center; + border-top: solid 1px var(--border-shade); + } +} diff --git a/app/assets/stylesheets/atoms/_a-title-label.css b/app/assets/stylesheets/atoms/_a-title-label.css new file mode 100644 index 00000000000..8995cdd165c --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-title-label.css @@ -0,0 +1,44 @@ +.a-title-label { + font-size: 0.5em; + line-height: 1; + display: inline-flex; + font-weight: 500; + white-space: nowrap; + vertical-align: top; + background-color: var(--background-semi-shade); + padding-inline: 1em; + border-radius: 0.75rem; + align-items: center; + position: relative; + top: 0.75em; + margin-right: 0.5em; +} +.a-title-label.is-solved { + color: var(--reversal-text); +} +.a-title-label.is-wip { + color: var(--semi-muted-text); + background-color: var(--background-semi-shade); +} +.a-title-label.is-success { + color: var(--reversal-text); + background-color: var(--success); +} +.a-title-label.is-danger { + color: var(--reversal-text); + background-color: var(--danger); +} + +@media (min-width: 48em) { + .a-title-label { + height: 1.5em; + top: 0.75em; + } +} +@media (max-width: 47.9375em) { + .a-title-label { + font-size: 0.625rem; + height: 1.75em; + top: 0.375em; + } +} diff --git a/app/assets/stylesheets/atoms/_a-user-icon.css b/app/assets/stylesheets/atoms/_a-user-icon.css new file mode 100644 index 00000000000..0023d196d61 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-user-icon.css @@ -0,0 +1,23 @@ +.a-user-icon { + display: block; + object-fit: cover; + border-radius: 50%; + background-color: var(--base); + width: 100%; + height: 100%; +} +.a-user-icon.is-sm { + width: 2rem; + height: 2rem; +} +.a-user-icon.is-xs { + width: 1.5rem; + height: 1.5rem; +} + +@media (max-width: 47.9375em) { + .a-user-icon.is-xs { + width: 1.125rem; + height: 1.125rem; + } +} diff --git a/app/assets/stylesheets/atoms/_a-user-icons.css b/app/assets/stylesheets/atoms/_a-user-icons.css new file mode 100644 index 00000000000..23308e5c362 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-user-icons.css @@ -0,0 +1,17 @@ +.a-user-icons { + padding-top: 0.5rem; + margin-top: 0.75rem; + border-top: dashed 1px var(--border); + margin-bottom: -0.25rem; +} + +.a-user-icons__items { + display: flex; + flex-wrap: wrap; + gap: 0.25rem; +} + +.a-user-icons__item-icon { + width: 2rem; + height: 2rem; +} diff --git a/app/assets/stylesheets/atoms/_a-user-name.css b/app/assets/stylesheets/atoms/_a-user-name.css new file mode 100644 index 00000000000..17e4ff4ba34 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-user-name.css @@ -0,0 +1,21 @@ +.a-user-name { + color: var(--muted-text); + font-size: 0.75rem; + line-height: 1.5; + white-space: nowrap; + font-weight: 400; +} + +a.a-user-name { + text-decoration: none; + cursor: pointer; +} +a.a-user-name:hover, a.a-user-name:active { + text-decoration: underline; +} +a.a-user-name { + display: inline-block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/app/assets/stylesheets/atoms/_a-user-role-badge.css b/app/assets/stylesheets/atoms/_a-user-role-badge.css new file mode 100644 index 00000000000..68349298c60 --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-user-role-badge.css @@ -0,0 +1,45 @@ +.a-user-role-badge { + border: solid 1px var(--main); + padding-inline: 0.75em; + height: 1.75em; + font-size: 0.625rem; + line-height: 1; + display: flex; + text-align: center; + white-space: nowrap; + color: var(--main); + align-items: center; + margin-right: 0.5rem; + border-radius: 1rem; +} + +.a-user-role-badge.is-header { + margin-left: 0.5rem; + margin-right: 0; +} + +.a-user-role-badge__label { + display: inline-block; +} + +.a-user-role-badge__label + .a-user-role-badge__label::before { + content: "/"; + display: inline-block; + margin-inline: 0.25em; +} + +@media (min-width: 48em) { + .a-user-role-badge { + transform: scale(0.9375, 0.9375); + } +} + +@media (max-width: 47.9375em) { + .a-user-role-badge { + transform: scale(0.875, 0.875); + } + + .a-user-role-badge.is-header { + margin-left: 0.125rem; + } +} diff --git a/app/assets/stylesheets/atoms/_a-user-role.css b/app/assets/stylesheets/atoms/_a-user-role.css new file mode 100644 index 00000000000..9fd1d4eef8b --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-user-role.css @@ -0,0 +1,5 @@ +.a-user-role { + display: inline-block; + border-radius: 50%; + background-color: var(--base); +} diff --git a/app/assets/stylesheets/atoms/_a-watch-button.css b/app/assets/stylesheets/atoms/_a-watch-button.css new file mode 100644 index 00000000000..b92ae13533e --- /dev/null +++ b/app/assets/stylesheets/atoms/_a-watch-button.css @@ -0,0 +1,13 @@ +.a-watch-button { + border: none; +} +.a-watch-button:hover { + border: none; +} +.a-watch-button.is-inactive { + color: var(--semi-muted-text); +} +.a-watch-button.is-inactive:hover { + color: var(--default-text); + background-color: var(--background-semi-shade); +} diff --git a/app/assets/stylesheets/atoms/_o-empty-message.css b/app/assets/stylesheets/atoms/_o-empty-message.css new file mode 100644 index 00000000000..c7fd5145542 --- /dev/null +++ b/app/assets/stylesheets/atoms/_o-empty-message.css @@ -0,0 +1,21 @@ +.o-empty-message { + max-width: 50rem; + margin-inline: auto; + text-align: center; + color: var(--semi-muted-text); +} +.o-empty-message:not(:first-child) { + margin-top: 1.5rem; +} + +.o-empty-message__icon { + font-size: 5rem; + line-height: 1; +} + +.o-empty-message__text { + font-size: 1rem; + line-height: 1.4; + margin-top: 1em; + text-align: center; +} diff --git a/app/assets/stylesheets/common-imports.css b/app/assets/stylesheets/common-imports.css new file mode 100644 index 00000000000..cb7bca44dc8 --- /dev/null +++ b/app/assets/stylesheets/common-imports.css @@ -0,0 +1,142 @@ +@import "./config/variables/_css-variables.css"; +@import "./config/variables/_fonts.css"; +@import "./config/variables/_welcome-colors.css"; +@import "./config/variables/_choices.css"; +@import "./vendor/choices.min.css"; +@import "./modules/_any_login.css"; +@import "./modules/_choices.css"; +@import "./modules/_github.css"; +@import "./modules/_multiselect.css"; +@import "./modules/_select2.css"; +@import "./modules/_stripe.css"; +@import "./modules/_toasts.css"; +@import "./vendor/tagify.css"; +@import "./modules/_tagify.css"; +@import "./modules/_embla.css"; +@import "./shared/helpers/_state.css"; +@import "./shared/utilities/_visibility.css"; +@import "./atoms/_a-badge.css"; +@import "./atoms/_a-block-check.css"; +@import "./atoms/_a-image-check.css"; +@import "./atoms/_a-bookmark-button.css"; +@import "./atoms/_a-border.css"; +@import "./atoms/_a-button.css"; +@import "./atoms/_a-cancel-button.css"; +@import "./atoms/_a-copy-button.css"; +@import "./atoms/_a-card.css"; +@import "./atoms/_a-category-link.css"; +@import "./atoms/_a-checkbox.css"; +@import "./atoms/_a-completion-message.css"; +@import "./atoms/_a-count-badge.css"; +@import "./atoms/_a-dropdown.css"; +@import "./atoms/_a-elapsed-days.css"; +@import "./atoms/_a-empty-message.css"; +@import "./atoms/_a-pdf-input.css"; +@import "./atoms/_a-file-input.css"; +@import "./atoms/_a-form-frame.css"; +@import "./atoms/_a-form-help.css"; +@import "./atoms/_a-form-label.css"; +@import "./atoms/_a-form-tabs.css"; +@import "./atoms/_a-grab.css"; +@import "./atoms/_a-grass.css"; +@import "./atoms/_a-help.css"; +@import "./atoms/_a-horizontal-dashed.css"; +@import "./atoms/_a-list-item-badge.css"; +@import "./atoms/_a-long-text.css"; +@import "./atoms/_a-markdown-input.css"; +@import "./atoms/_a-meta.css"; +@import "./atoms/_a-notification-count.css"; +@import "./atoms/_a-on-off-checkbox.css"; +@import "./atoms/_a-overlay.css"; +@import "./atoms/_a-page-notice.css"; +@import "./atoms/_a-panels.css"; +@import "./atoms/_a-placeholder.css"; +@import "./atoms/_a-short-text.css"; +@import "./atoms/_a-switch.css"; +@import "./atoms/_a-text-input.css"; +@import "./atoms/_a-raw.css"; +@import "./atoms/_a-text-link.css"; +@import "./atoms/_a-text.css"; +@import "./atoms/_a-title-label.css"; +@import "./atoms/_a-user-icon.css"; +@import "./atoms/_a-user-icons.css"; +@import "./atoms/_a-user-name.css"; +@import "./atoms/_a-user-role.css"; +@import "./atoms/_a-user-role-badge.css"; +@import "./atoms/_a-watch-button.css"; +@import "./atoms/_a-checker.css"; +@import "./atoms/_a-file-insert.css"; +@import "./atoms/_a-icon-label.css"; +@import "./atoms/_a-side-nav.css"; +@import "./atoms/_a-notice-block.css"; +@import "./atoms/_a-table.css"; +@import "./atoms/_a-tags.css"; +@import "./atoms/_a-link-card.css"; +@import "./atoms/_o-empty-message.css"; +@import "./atoms/_a-hidden-scrollbar.css"; +@import "./shared/layouts/_wrapper.css"; +@import "./shared/layouts/_container.css"; +@import "./shared/layouts/_columns.css"; +@import "./shared/layouts/_l-container.css"; +@import "./shared/layouts/_l-inner-container.css"; +@import "./shared/test/_test.css"; +@import "./shared/blocks/_code-toolbar.css"; +@import "./shared/blocks/_errors.css"; +@import "./shared/blocks/_flash.css"; +@import "./shared/blocks/_footprints.css"; +@import "./shared/blocks/_global-nav.css"; +@import "./shared/blocks/_modal.css"; +@import "./shared/blocks/_page-nav.css"; +@import "./shared/blocks/_page-search.css"; +@import "./shared/blocks/_page-tags-nav.css"; +@import "./shared/blocks/_pagination.css"; +@import "./shared/blocks/_pill-nav.css"; +@import "./shared/blocks/_prism-ghcolors.css"; +@import "./shared/blocks/_tab-nav.css"; +@import "./shared/blocks/_hour-filter.css"; +@import "./shared/blocks/_not-logged-in-footer.css"; +@import "./shared/blocks/card/_card-body.css"; +@import "./shared/blocks/card/_card-message.css"; +@import "./shared/blocks/card/_card-books.css"; +@import "./shared/blocks/card/_card-eyecatch.css"; +@import "./shared/blocks/card/_card-footer.css"; +@import "./shared/blocks/card/_card-header.css"; +@import "./shared/blocks/card/_card-main-actions.css"; +@import "./shared/blocks/card/_congrats-card-body.css"; +@import "./shared/blocks/card/_practice-books.css"; +@import "./shared/blocks/card/_thumbnail-card.css"; +@import "./shared/blocks/card/_tags-highlight.css"; +@import "./shared/blocks/card-list/_card-list-item-actions.css"; +@import "./shared/blocks/card-list/_card-list-item-meta.css"; +@import "./shared/blocks/card-list/_card-list-item-tags-edit.css"; +@import "./shared/blocks/card-list/_card-list-item-title.css"; +@import "./shared/blocks/card-list/_card-list-item.css"; +@import "./shared/blocks/card-list/_card-list-tools.css"; +@import "./shared/blocks/card-list/_card-list.css"; +@import "./shared/blocks/form/_block-checks.css"; +@import "./shared/blocks/form/_books-form-item.css"; +@import "./shared/blocks/form/_books-form.css"; +@import "./shared/blocks/form/_checkboxes.css"; +@import "./shared/blocks/form/_form-actions.css"; +@import "./shared/blocks/form/_form-added-choice.css"; +@import "./shared/blocks/form/_form-item-actions.css"; +@import "./shared/blocks/form/_form-item-block.css"; +@import "./shared/blocks/form/_form-item-group.css"; +@import "./shared/blocks/form/_form-item.css"; +@import "./shared/blocks/form/_form-link-block.css"; +@import "./shared/blocks/form/_form-notice.css"; +@import "./shared/blocks/form/_form-selects.css"; +@import "./shared/blocks/form/_form-tabs-item.css"; +@import "./shared/blocks/form/_form-tabs.css"; +@import "./shared/blocks/form/_form-times.css"; +@import "./shared/blocks/form/_form.css"; +@import "./shared/blocks/form/_hidden-form-item.css"; +@import "./shared/blocks/form/_important-message.css"; +@import "./shared/blocks/form/_linear-scale.css"; +@import "./shared/blocks/form/_many-check-boxes.css"; +@import "./shared/blocks/form/_markdown-form.css"; +@import "./shared/blocks/form/_radios.css"; +@import "./shared/blocks/form/_vue-tags-input.css"; +@import "./shared/blocks/form/_form-textarea.css"; +@import "./shared/blocks/form/_form-table.css"; +@import "./shared/blocks/_o-empty-message.css"; diff --git a/app/assets/stylesheets/config/variables/_choices.css b/app/assets/stylesheets/config/variables/_choices.css new file mode 100644 index 00000000000..e796fa4006f --- /dev/null +++ b/app/assets/stylesheets/config/variables/_choices.css @@ -0,0 +1,22 @@ +:root { + --choices-selector: "choices"; + --choices-font-size-lg: 1rem; + --choices-font-size-md: 0.875rem; + --choices-font-size-sm: 0.75rem; + --choices-guttering: 1.5rem; + --choices-border-radius: 4px; + --choices-border-radius-item: 4px; + --choices-bg-color: #f9f9f9; + --choices-bg-color-disabled: var(--disabled); + --choices-bg-color-dropdown: var(--base); + --choices-text-color: var(--main-text); + --choices-keyline-color: #ddd; + --choices-primary-color: var(--main-tint); + --choices-disabled-color: var(--disabled); + --choices-highlight-color: var(--main-tint); + --choices-button-dimension: 8px; + --choices-button-offset: 8px; + --choices-icon-cross: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%20style%3D%22enable-background%3Anew%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.st0%7Bfill%3A%233f3290%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M2.6%200%2021%2018.4%2018.4%2021%200%202.6%202.6%200z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2018.4%2018.4%200l2.5%202.5L2.5%2020.9%200%2018.4z%22%2F%3E%3C%2Fsvg%3E"); + --choices-icon-cross-inverse: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%20style%3D%22enable-background%3Anew%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.st0%7Bfill%3A%23ffffff%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M2.6%200%2021%2018.4%2018.4%2021%200%202.6%202.6%200z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2018.4%2018.4%200l2.5%202.5L2.5%2020.9%200%2018.4z%22%2F%3E%3C%2Fsvg%3E"); + --choices-z-index: 1; +} diff --git a/app/assets/stylesheets/config/variables/_css-variables.css b/app/assets/stylesheets/config/variables/_css-variables.css new file mode 100644 index 00000000000..b651655649c --- /dev/null +++ b/app/assets/stylesheets/config/variables/_css-variables.css @@ -0,0 +1,90 @@ +:root { + --main: hsl(242, 51%, 51%); + --accent: hsl(44, 96%, 54%); + --base: white; + --completion: hsl(197, 83%, 49%); + --completion-dark: rgba(0, 0, 0, 0.2); + --background-shade: hsl(242, 11%, 85%); + --background-semi-shade: hsl(242, 24%, 92%); + --background: hsl(242, 34%, 98%); + --background-tint: hsl(242, 20%, 93%); + --background-more-tint: hsl(242, 8%, 98.5%); + --positive-background: #ffecdf; + --negative-background: #ecf3f7; + --neutral-background: #fff9e8; + --gold: #e3a822; + --silver: #898888; + --bronze: #dc7e61; + --default-text: hsl(242, 10%, 30%); + --reversal-text: white; + --muted-text: hsl(242, 5%, 64%); + --semi-muted-text: hsl(242, 7%, 57%); + --link-text: hsl(242, 62%, 33%); + --hover-text: hsl(215, 78%, 50%); + --transparent-text: rgba(0, 0, 0, 0); + --placeholder: rgba(0, 0, 0, 0.075); + --placeholder-text: hsl(242, 0%, 73%); + --border: hsl(242, 7%, 89%); + --border-tint: hsl(242, 14%, 95%); + --border-shade: hsl(242, 7%, 84%); + --border-more-shade: hsl(242, 5%, 64%); + --welcome-blue: hsl(210, 100%, 55%); + --welcome-light-blue: hsl(199, 100%, 92%); + --welcome-yellow: hsl(57, 100%, 49%); + --welcome-orange: hsl(40, 98%, 59%); + --welcome-pink: hsl(344, 80%, 66%); + --primary: #5752e8; + --secondary: hsl(242, 1%, 100%); + --success: hsl(150, 39%, 49%); + --success-shade: hsl(150, 39%, 37%); + --info: hsl(190, 73%, 48%); + --warning: hsl(44, 96%, 54%); + --warning-shade: hsl(44, 96%, 41%); + --danger: hsl(349, 90%, 62%); + --danger-shade: hsl(349, 90%, 47%); + --disabled: hsl(242, 11%, 85%); + --stamp-color: hsl(0, 80%, 62%); + --danger-text: rgb(147.186, 42.534, 61.7202); + --danger-tint: rgb(254.031, 236.589, 239.7867); + --success-text: rgb(30.4878, 69.4722, 49.98); + --success-tint: rgb(237.12195, 246.86805, 241.995); + --info-text: rgb(13.2192, 72.7872, 84.7008); + --info-tint: rgb(232.8048, 247.6968, 250.6752); + --primary-text: rgb(52.2, 49.2, 139.2); + --primary-tint: rgb(238.2, 237.7, 252.7); + --primary-semi-tint: rgb(187.8, 185.8, 245.8); + --primary-background: #ebebf7; + --warning-text: rgb(100.1232, 76.10016, 10.0368); + --warning-tint: rgb(254.5308, 248.52504, 232.0092); + --main-text: rgb(63.51642, 59.69295, 174.39705); + --main-tint: rgb(236.55738, 236.13255, 248.87745); + --main-shade: hsl(254, 60%, 34%); + --main-semi-shade: hsl(254, 52%, 40%); + --lp-bg-3: #DEDEF2; + --lp-bg-2: var(--primary-background); + --lp-bg-1: var(--background); + --reply-warning-background: hsl(44, 96%, 54%); + --reply-warning-border: #d09a0e; + --reply-alert-background: #ff7500; + --reply-alert-border: #d06305; + --reply-deadline-background: hsl(349, 90%, 62%); + --reply-deadline-border: #b50f38; + --input-border: hsl(242, 7%, 84%); + --input-background: hsl(242, 8%, 98.5%); + --input-hover-border: hsl(242, 7%, 84%); + --input-hover-background: white; + --input-selected-background: rgb(238.2, 237.7, 252.7); + --input-selected-border: #5752e8; + --input-selected-text: rgb(52.2, 49.2, 139.2); + --input-focus-background: white; + --input-focus-border: #5752e8; + --input-focus-shadow: rgba(87, 82, 232, 0.4) 0 0 1px 2px; + --header-height__md-up: 3.125rem; + --header-height__sm-down: 2.75rem; + --global-nav-width: 5.5rem; + --global-nav-width-sm: 13rem; + --thread-header-author: 4.75rem; + --side-nav-width: 17rem; +} + +/*# sourceMappingURL=_css-variables.css.map */ diff --git a/app/assets/stylesheets/config/variables/_fonts.css b/app/assets/stylesheets/config/variables/_fonts.css new file mode 100644 index 00000000000..491bc98a2d3 --- /dev/null +++ b/app/assets/stylesheets/config/variables/_fonts.css @@ -0,0 +1,4 @@ +:root { + --sans-serif: YakuHanJPs, "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; + --monospace: "Source Code Pro", monospace; +} diff --git a/app/assets/stylesheets/config/variables/_welcome-colors.css b/app/assets/stylesheets/config/variables/_welcome-colors.css new file mode 100644 index 00000000000..e9db1592c22 --- /dev/null +++ b/app/assets/stylesheets/config/variables/_welcome-colors.css @@ -0,0 +1,4 @@ +:root { + --welcome-main-color: #0bb5e1; + --welcome-accent-color: #f4e90f; +} diff --git a/app/assets/stylesheets/form/_zip-tel-input.css b/app/assets/stylesheets/form/_zip-tel-input.css new file mode 100644 index 00000000000..f187da219c5 --- /dev/null +++ b/app/assets/stylesheets/form/_zip-tel-input.css @@ -0,0 +1,22 @@ +.a-zip-input, +.a-tel-input, +.a-name-input { + display: flex; + align-items: center; + gap: 0.5rem; +} +.a-zip-input__label, +.a-tel-input__label, +.a-name-input__label { + font-size: 1.25rem; + color: var(--muted-text); +} + +.a-name-input__field { + flex: 1; +} +.a-name-input__field .a-form-label { + margin-bottom: 0.25rem; +} + +/*# sourceMappingURL=_zip-tel-input.css.map */ diff --git a/app/assets/stylesheets/lp.css b/app/assets/stylesheets/lp.css new file mode 100644 index 00000000000..a6360ebe56e --- /dev/null +++ b/app/assets/stylesheets/lp.css @@ -0,0 +1,58 @@ +@import "tailwindcss" source(none); +@source "../../views/**/*.slim"; +@source "../../components/**/*.slim"; +@source "../../../app/javascript/**/*.{js,vue,jsx}"; +@source "./**/*.css"; + +@theme { + --container-*: initial; +} + +@import "./lp/base/_base.css"; +@import "./common-imports.css"; +@import "./lp/layouts/_l-cards.css"; +@import "./lp/layouts/_l-sections.css"; +@import "./lp/blocks/lp/_lp-header.css"; +@import "./lp/blocks/lp/_lp-header-nav.css"; +@import "./lp/blocks/lp/_welcome-top-info.css"; +@import "./lp/blocks/lp/_lp-top-cover.css"; +@import "./lp/blocks/lp/_lp-content.css"; +@import "./lp/blocks/lp/_lp-content-stack.css"; +@import "./lp/blocks/lp/_lp-hero-info.css"; +@import "./lp/blocks/lp/_lp-hero-visual.css"; +@import "./lp/blocks/lp/_lp-content-section.css"; +@import "./lp/blocks/lp/_lp-content-title.css"; +@import "./lp/blocks/lp/_lp-content-sub-title.css"; +@import "./lp/blocks/lp/_lp-card-title.css"; +@import "./lp/blocks/lp/_lp-card-description.css"; +@import "./lp/blocks/lp/_lp-card-actions.css"; +@import "./lp/blocks/lp/_lp-left-image-section.css"; +@import "./lp/blocks/lp/_lp-left-number-section.css"; +@import "./lp/blocks/lp/_lp-capture-section.css"; +@import "./lp/blocks/lp/_lp-top-image-sections.css"; +@import "./lp/blocks/lp/_lp-supplementary-info.css"; +@import "./lp/blocks/lp/_lp-page-header.css"; +@import "./lp/blocks/lp/_lp-page-header-nav.css"; +@import "./lp/blocks/lp/_lp-price.css"; +@import "./lp/blocks/lp/_lp-actions.css"; +@import "./lp/blocks/lp/_lp-company-logos.css"; +@import "./lp/blocks/lp/_lp-movie.css"; +@import "./lp/blocks/lp/_lp-practices-table.css"; +@import "./lp/blocks/lp/_lp-table.css"; +@import "./lp/blocks/lp/_lp-faqs.css"; +@import "./lp/blocks/lp/_lp-faq.css"; +@import "./lp/blocks/lp/_side-filter.css"; +@import "./lp/blocks/lp/_lp-course-selection.css"; +@import "./lp/blocks/lp/_lp-course-selection-nav.css"; +@import "./lp/blocks/lp/_lp-course-selection-item.css"; +@import "./lp/blocks/lp/_lp-category-practices.css"; +@import "./lp/blocks/lp/_lp-mentor-books.css"; +@import "./lp/blocks/lp/_lp-mentor.css"; +@import "./lp/blocks/articles/_article.css"; +@import "./lp/blocks/articles/_articles.css"; +@import "./lp/blocks/articles/_articles-item.css"; +@import "./lp/blocks/articles/_share-buttons.css"; +@import "./lp/blocks/articles/_article-author.css"; +@import "./lp/corporate-training/_corporate-training-examples.css"; +@import "./lp/corporate-training/_corporate-training-example.css"; +@import "./lp/corporate-training/_corporate-training-testimonial.css"; diff --git a/app/assets/stylesheets/lp/base/_base.css b/app/assets/stylesheets/lp/base/_base.css new file mode 100644 index 00000000000..fd13293faf8 --- /dev/null +++ b/app/assets/stylesheets/lp/base/_base.css @@ -0,0 +1,85 @@ +html.is-lp { + font-family: var(--sans-serif); + color: var(--default-text); +} + +:root { + --people-bg-image: url("/images/background/people.png"); +} + +body.is-lp { + background-color: var(--background); +} + +.not-logged-in-footer { + color: var(--default-text); +} + +.not-logged-in-footer__nav-item-link { + color: var(--default-text); +} + +.not-logged-in-footer-copyright { + color: var(--default-text); +} + +.card-body__inner-title { + font-size: 1.5rem; + line-height: 1.5; + font-weight: 700; + padding-bottom: 0.25rem; + color: var(--main); + border-bottom: solid 1px var(--border); +} + +.welcome-practices { + margin-top: 1.25rem; + display: flex; + flex-wrap: wrap; + gap: 0.75rem 0.5rem; + flex-direction: column; +} + +.welcome-practices__item { + line-height: 1.6; + font-size: 0.8125rem; + padding-block: 0.5rem; +} +.welcome-practices__item + .welcome-practices__item { + border-top: solid 1px var(--border-tint); +} +.welcome-practices__item:first-child { + padding-top: 0; +} +.welcome-practices__item:last-child { + padding-bottom: 0; +} + +@media (min-width: 48em) { + .welcome-practices { + flex-direction: row; + } + .welcome-practices__item { + font-size: 0.875rem; + padding-block: 0; + border-top: none !important; + } + .welcome-practices__item:not(:last-child)::after { + content: "、"; + } +} +.faqs-item__header { + padding-bottom: 0.5rem; + border-bottom: solid 1px var(--border); +} + +.faqs-item__body { + margin-top: 1.5rem; +} + +.faqs-item__title { + font-size: 1.25rem; + line-height: 1.6; + font-weight: 700; + color: var(--main); +} diff --git a/app/assets/stylesheets/lp/blocks/articles/_article-author.css b/app/assets/stylesheets/lp/blocks/articles/_article-author.css new file mode 100644 index 00000000000..1adf62dff1f --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/articles/_article-author.css @@ -0,0 +1,135 @@ +.article-author.is-welcome-index { + height: 100%; +} + +.article-author__inner { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 0.75rem 1rem 1rem; +} +@media (min-width: 48em) { + .article-author__inner { + padding: 1.25rem 1.5rem 1.5rem; + } +} +.article-author.is-articles-show .article-author__inner { + padding: 0.75rem 1rem 0; +} +.article-author.is-articles-show .article-author__inner:last-child { + padding-bottom: 1rem; +} + +.article-author__header { + display: flex; + gap: 1.5rem; + align-items: flex-start; +} + +.article-author__header-start { + flex: 0 0 4.5rem; +} + +.article-author__header-end { + flex: 1; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.article-author__image { + border-radius: 0.25rem; + width: 4rem; + display: block; + margin-inline: auto; +} +@media (min-width: 48em) { + .article-author__image { + width: 100%; + margin-inline: 0; + } +} + +.article-author__name { + font-weight: 800; + color: var(--main); + font-size: 1.5rem; + line-height: 1.2; +} + +.article-author__job { + font-weight: 400; + font-size: 0.875rem; + line-height: 1; + margin-bottom: 0.125rem; + color: var(--main); +} + +.article-author__sns { + display: none; +} +@media (min-width: 48em) { + .article-author__sns { + display: flex; + gap: 0.75rem; + } +} + +.article-author__sns-item-link { + font-size: 1.25rem; + line-height: 1.45; + color: var(--main); + display: flex; + height: 2.5rem; + width: 2.5rem; + justify-content: center; + align-items: center; + text-decoration: none; + border: solid 1px var(--main); + border-radius: 0.25rem; + transition: all 0.2s ease-out; +} +.article-author__sns-item-link:hover { + color: var(--welcome-pink); +} + +.article-author__body { + font-size: 0.875rem; +} +.article-author__body.is-trancate { + overflow: hidden; + text-overflow: ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + display: none; +} +@media (min-width: 48em) { + .article-author__body.is-trancate { + display: -webkit-box; + height: 67.2px; + } +} +.article-author__body.is-temp { + font-size: 0.875rem; + line-height: 1.6; +} +.article-author__body.is-temp img { + width: 6.25rem; + float: right; + margin-left: 1rem; + margin-bottom: 0.75rem; +} +.article-author__body.is-temp img.has-3-books { + width: 8.25rem; +} +.article-author__body.is-temp img.has-5-books { + width: 10rem; +} +.article-author__body.is-temp a { + color: var(--link-text); + text-decoration: underline; + cursor: pointer; +} +.article-author__body.is-temp a:hover { + text-decoration: none; +} diff --git a/app/assets/stylesheets/lp/blocks/articles/_article.css b/app/assets/stylesheets/lp/blocks/articles/_article.css new file mode 100644 index 00000000000..0b4d3866f14 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/articles/_article.css @@ -0,0 +1,132 @@ +.article { + padding-block: 1.5rem; +} +@media (min-width: 48em) { + .article { + padding-block: 2rem; + } +} + +.article__inner { + padding: 1rem; +} +@media (min-width: 48em) { + .article__inner { + padding: 1.25rem 2rem; + } +} + +.article__header { + margin-bottom: 3rem; +} + +.article__title { + line-height: 1.4; + font-weight: 700; + font-feature-settings: "palt"; + letter-spacing: 0.025em; + color: var(--main); + font-size: 1.625rem; +} +@media (min-width: 48em) { + .article__title { + font-size: 2.5rem; + } +} +.article__title.is-wip { + color: var(--muted-text); +} + +.article__title-label { + background-color: var(--background-semi-shade); + font-size: 0.625rem; + display: inline-block; + vertical-align: middle; + padding: 0.25rem 0.5rem; + margin-right: 0.25rem; + border-radius: 1rem; + margin-top: -0.5em; + font-weight: 400; + color: var(--default-text); + line-height: 1; +} + +.article__metas { + display: flex; + margin-top: 0.75rem; + font-size: 0.8125rem; +} +@media (min-width: 48em) { + .article__metas { + font-size: 0.875rem; + } +} + +.article__meta:not(:first-child) { + margin-left: 0.75em; +} + +.article__published-at { + font-size: 1em; + line-height: 1.4; + color: var(--semi-muted-text); +} + +.article__author { + display: flex; + align-items: center; + font-size: 1em; + line-height: 1.4; + color: var(--default-text); +} +.article__author img { + width: 1.125rem; + height: 1.125rem; + object-fit: cover; + margin-right: 0.25rem; + border-radius: 50%; +} + +.article__image { + margin-top: 1.5rem; + border-radius: 4px; + aspect-ratio: 40/21; + object-fit: cover; + width: 100%; +} + +.article__body:not(:first-child) { + margin-top: 1.5rem; +} +.article__body.a-long-text { + font-size: 0.875rem; +} +@media (min-width: 48em) { + .article__body.a-long-text { + font-size: 1rem; + } +} + +.article__actions { + margin-top: 2rem; + border-top: dashed 2px var(--border); + padding-top: 1rem; +} +.article__actions ul { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; +} +.article__actions li { + flex: 1; + max-width: 15rem; +} + +.article__header-row:not(:first-child) { + margin-top: 0.75rem; +} + +.article__ad { + font-size: 0.875rem; +} diff --git a/app/assets/stylesheets/lp/blocks/articles/_articles-item.css b/app/assets/stylesheets/lp/blocks/articles/_articles-item.css new file mode 100644 index 00000000000..fcb176508d8 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/articles/_articles-item.css @@ -0,0 +1,70 @@ +@media (min-width: 48em) { + .articles-item { + height: 100%; + } +} + +.articles-item__link { + display: block; + text-decoration: none; + padding: 1rem; +} +.articles-item__link:hover .articles-item__title { + text-decoration: underline; +} + +.articles-item__row:not(:first-child) { + margin-top: 0.5rem; +} + +.articles-item__image { + display: block; + border-radius: 4px; + aspect-ratio: 40/21; + object-fit: cover; +} + +.articles-item__title { + font-size: 1.125rem; + line-height: 1.4; + font-weight: 700; + color: var(--default-text); +} +.articles-item.is-wip .articles-item__title { + color: var(--muted-text); +} + +.articles-item__metas { + display: flex; +} + +.articles-item__meta:not(:first-child) { + margin-left: 0.75rem; +} + +.articles-item__author { + display: flex; + align-items: center; + font-size: 0.8125rem; + line-height: 1.4; + color: var(--default-text); +} +.articles-item__author img { + width: 1.125rem; + height: 1.125rem; + object-fit: cover; + margin-right: 0.25rem; + border-radius: 50%; +} + +.articles-item__published-at { + font-size: 0.8125rem; + line-height: 1.4; + color: var(--semi-muted-text); +} + +.articles-item__description { + font-size: 0.875rem; + line-height: 1.6; + color: var(--semi-muted-text); +} diff --git a/app/assets/stylesheets/lp/blocks/articles/_articles.css b/app/assets/stylesheets/lp/blocks/articles/_articles.css new file mode 100644 index 00000000000..43f3d943ff1 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/articles/_articles.css @@ -0,0 +1,34 @@ +.articles__header { + background-color: var(--base); +} + +.articles__header-inner { + display: flex; + align-items: center; + height: 3rem; +} +@media (min-width: 48em) { + .articles__header-inner { + height: 3.5rem; + } +} + +.articles__title { + font-weight: 700; + font-size: 1rem; + line-height: 1.4; +} +@media (min-width: 48em) { + .articles__title { + font-size: 1.25rem; + } +} + +.articles__body { + padding-block: 1.5rem; +} +@media (min-width: 48em) { + .articles__body { + padding-block: 2rem; + } +} diff --git a/app/assets/stylesheets/lp/blocks/articles/_share-buttons.css b/app/assets/stylesheets/lp/blocks/articles/_share-buttons.css new file mode 100644 index 00000000000..0f7fd8181b1 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/articles/_share-buttons.css @@ -0,0 +1,68 @@ +.share-buttons { + margin-top: 0.75rem; +} + +.share-buttons__items { + display: flex; + gap: 0.5rem; +} +@media (max-width: 20em) { + .share-buttons__items { + gap: 0.25rem; + } +} + +@media (max-width: 20em) { + .share-buttons__item.is-x { + flex: 1; + } +} + +.x-share-button { + width: 5.5rem; + height: 2.5rem; + background-color: white; + display: flex; + text-decoration: none; + flex-direction: column; + border-radius: 0.25rem; + align-items: center; + justify-content: center; + font-size: 0.6875rem; + line-height: 1; + font-weight: 700; + color: var(--reversal-text); + border: solid 1px black; + overflow: hidden; +} +.x-share-button i { + font-size: 0.875rem; + color: black; + flex: 1; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease-out; +} +.x-share-button span { + background-color: var(--default-text); + display: flex; + width: 100%; + height: 1.25rem; + align-items: center; + justify-content: center; + transition: all 0.2s ease-out; + padding-top: 1px; +} +.x-share-button:hover i { + background-color: var(--background-tint); +} +.x-share-button:hover span { + background-color: black; +} +@media (max-width: 20em) { + .x-share-button { + width: 100%; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-actions.css b/app/assets/stylesheets/lp/blocks/lp/_lp-actions.css new file mode 100644 index 00000000000..b4b99d4ba38 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-actions.css @@ -0,0 +1,21 @@ +.lp-actions { + align-self: stretch; + width: 100%; +} +@media (min-width: 48em) { + .lp-actions { + max-width: 42.5rem; + margin-inline: auto; + } +} + +.lp-actions__items { + display: flex; + gap: 1rem; + justify-content: center; +} + +.lp-actions__item { + flex: 1; + max-width: 22rem; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-capture-section.css b/app/assets/stylesheets/lp/blocks/lp/_lp-capture-section.css new file mode 100644 index 00000000000..b0a8e2e7ba2 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-capture-section.css @@ -0,0 +1,103 @@ +.lp-capture-section__inner { + display: flex; + gap: 1rem; +} +.lp-content-stack__item:nth-child(even) .lp-capture-section__inner { + flex-direction: row-reverse; +} +@media (min-width: 48em) { + .lp-capture-section__inner { + gap: 3rem; + } +} +@media (max-width: 47.9375em) { + .lp-capture-section__inner .lp-content-sub-title br { + display: none; + } +} + +.lp-capture-section__start, +.lp-capture-section__end { + display: flex; + align-items: center; +} + +.lp-capture-section__start { + flex: 0 0 40%; +} +@media (min-width: 48em) { + .lp-capture-section__start { + flex: 1; + } +} +.lp-capture-section__start.is-sm { + max-width: 10rem; +} +@media (min-width: 48em) and (max-width: 63.9375em) { + .lp-capture-section__start.is-sm { + max-width: 16rem; + } +} +@media (min-width: 64em) { + .lp-capture-section__start.is-sm { + max-width: 20rem; + } +} + +.lp-capture-section__end { + flex: 1; +} +@media (min-width: 48em) and (max-width: 63.9375em) { + .lp-capture-section__end { + flex: 1.5; + } +} +@media (min-width: 64em) { + .lp-capture-section__end { + flex: 1; + } +} + +.lp-capture-section__content { + display: flex; + flex-direction: column; + gap: 1rem; +} +@media (min-width: 48em) { + .lp-capture-section__content { + gap: 1.5rem; + } +} +@media (min-width: 64em) { + .lp-capture-section__content { + gap: 2rem; + } +} + +.lp-capture-section__body { + font-size: 0.875rem; + line-height: 1.6; +} +@media (min-width: 48em) { + .lp-capture-section__body { + font-size: 1rem; + } +} + +.lp-capture-section__border { + height: 1px; + width: 100%; + display: block; + border-top: dashed 1px var(--border-more-shade); +} + +.lp-capture-section__image { + width: 100%; +} +@media (max-width: 47.9375em) { + .lp-capture-section__image { + max-width: 14rem; + margin-inline: auto; + display: block; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-card-actions.css b/app/assets/stylesheets/lp/blocks/lp/_lp-card-actions.css new file mode 100644 index 00000000000..26442c59ce1 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-card-actions.css @@ -0,0 +1,11 @@ +.lp-card-actions__items { + display: flex; + width: 100%; + justify-content: center; + gap: 1.5rem; +} + +.lp-card-actions__item { + width: 12rem; + max-width: 100%; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-card-description.css b/app/assets/stylesheets/lp/blocks/lp/_lp-card-description.css new file mode 100644 index 00000000000..08cb062b1c1 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-card-description.css @@ -0,0 +1,16 @@ +.lp-card-description { + font-size: 0.875rem; +} +@media (min-width: 48em) { + .lp-card-description { + font-size: 1rem; + } +} +.lp-card-description a { + color: #0098f9; + text-decoration: none; + cursor: pointer; +} +.lp-card-description a:hover, .lp-card-description a:active { + text-decoration: underline; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-card-title.css b/app/assets/stylesheets/lp/blocks/lp/_lp-card-title.css new file mode 100644 index 00000000000..c5305de5d08 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-card-title.css @@ -0,0 +1,52 @@ +.lp-card-title { + font-feature-settings: "palt"; + letter-spacing: 0.02em; + font-weight: 800; + color: var(--main); + font-size: 1.125rem; + line-height: 1.4; +} +.lp-card-title br { + display: none; +} +@media (min-width: 48em) { + .lp-card-title { + font-size: 1.25rem; + } + .lp-card-title br { + display: inline; + } +} +@media (min-width: 64em) { + .lp-card-title { + font-size: 1.5rem; + } +} +.lp-card-title.is-sm { + font-size: 1rem; + line-height: 1.4; +} +@media (min-width: 48em) { + .lp-card-title.is-sm { + font-size: 1.125rem; + } +} + +.lp-card-title-number { + font-size: 0.9375rem; + line-height: 1; + display: inline-flex; + font-weight: 800; + font-family: "Roboto Mono", monospace; + align-items: center; + justify-content: center; + border-radius: 50%; + height: 1.75rem; + width: 1.75rem; + background-color: var(--lp-bg-3); + margin-right: 0.5rem; + vertical-align: middle; + border: solid 2px var(--main); + position: relative; + top: -1px; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-category-practices.css b/app/assets/stylesheets/lp/blocks/lp/_lp-category-practices.css new file mode 100644 index 00000000000..ed9ad65d893 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-category-practices.css @@ -0,0 +1,37 @@ +.lp-category-practices { + background-color: var(--base); +} + +.lp-category-practices__category { + font-size: 1rem; + line-height: 1.4; + font-weight: 800; + background-color: var(--main); + color: var(--reversal-text); + display: flex; + align-items: center; + padding: 0.5rem 1rem; + border-radius: 0.25rem 0.25rem 0 0; +} + +.lp-category-practices__practices { + border: solid 1px var(--border); + border-radius: 0 0 0.25rem 0.25rem; +} + +.lp-category-practices__practice { + font-size: 0.875rem; + line-height: 1.4; + display: flex; + align-items: center; + padding: 0.5rem 1rem; +} +.lp-category-practices__practice:nth-child(even) { + background-color: var(--background-more-tint); +} +.lp-category-practices__practice:not(:last-child) { + border-bottom: solid 1px var(--border); +} +.lp-category-practices__practice:last-child { + border-radius: 0 0 0.25rem 0.25rem; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-company-logos.css b/app/assets/stylesheets/lp/blocks/lp/_lp-company-logos.css new file mode 100644 index 00000000000..bc5b6587013 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-company-logos.css @@ -0,0 +1,21 @@ +.lp-company-logos { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 1rem; +} +@media (min-width: 64em) { + .lp-company-logos { + gap: 1.5rem 2rem; + } +} + +.lp-company-logos__item img { + height: 3.5rem; +} +@media (min-width: 64em) { + .lp-company-logos__item img { + height: 5rem; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-content-section.css b/app/assets/stylesheets/lp/blocks/lp/_lp-content-section.css new file mode 100644 index 00000000000..364b0ab8ca2 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-content-section.css @@ -0,0 +1,19 @@ +.lp-content-section { + display: flex; + flex-direction: column; + gap: 1rem; +} +@media (min-width: 48em) { + .lp-content-section { + gap: 1.5rem; + } +} + +.lp-content__description { + font-size: 0.875rem; +} +@media (min-width: 48em) { + .lp-content__description { + font-size: 1rem; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-content-stack.css b/app/assets/stylesheets/lp/blocks/lp/_lp-content-stack.css new file mode 100644 index 00000000000..90d59e12d71 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-content-stack.css @@ -0,0 +1,10 @@ +.lp-content-stack { + display: flex; + flex-direction: column; + gap: 1.5rem; +} +@media (min-width: 48em) { + .lp-content-stack { + gap: 3rem; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-content-sub-title.css b/app/assets/stylesheets/lp/blocks/lp/_lp-content-sub-title.css new file mode 100644 index 00000000000..4ddf6b67d12 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-content-sub-title.css @@ -0,0 +1,45 @@ +.lp-content-sub-title i { + margin-right: 0.25em; + color: var(--main); +} +.lp-content-sub-title strong { + color: var(--main); +} +.lp-content-sub-title { + font-size: 1.375rem; + line-height: 1.4; + font-weight: 800; +} + +@media (max-width: 47.9375em) { + .lp-content-sub-title.is-course-name { + font-size: 0.875rem; + } +} + +@media (min-width: 48em) { + .lp-content-sub-title { + font-size: 1.75rem; + } +} +@media (min-width: 64em) { + .lp-content-sub-title { + font-size: 2.125rem; + } +} +.lp-content-sub-title.is-sm { + color: var(--main); + font-size: 1.125rem; + line-height: 1.4; + font-weight: 800; +} +@media (min-width: 48em) { + .lp-content-sub-title.is-sm { + font-size: 1.25rem; + } +} +@media (min-width: 64em) { + .lp-content-sub-title.is-sm { + font-size: 1.5rem; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-content-title.css b/app/assets/stylesheets/lp/blocks/lp/_lp-content-title.css new file mode 100644 index 00000000000..e86b2d9762f --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-content-title.css @@ -0,0 +1,151 @@ +.lp-content-title { + font-feature-settings: "palt"; + letter-spacing: 0.02em; + position: relative; + text-align: center; + font-size: 1.75rem; + line-height: 1.4; + font-weight: 800; +} + +.lp-content-title strong { + color: var(--main); +} + +.lp-content-title[class*="is-border-"]::before { + content: ""; + display: block; + border-radius: 10rem; + background-color: #9b9ace; + position: absolute; + left: 50%; + bottom: 0; + transform: translate(-50%); + width: 3.5em; + height: 0.25rem; +} + +@media (max-width: 47.9375em) { + .lp-content-title { + padding-bottom: 1.5rem; + } +} + +@media (min-width: 80em) { + .lp-content-title.is-vertical { + writing-mode: vertical-rl; + text-align: start; + } +} + +@media (min-width: 48em) { + .lp-content-title { + font-size: 2.25rem; + } + + .lp-content-title { + padding-bottom: 2.25rem; + } + + .lp-content-title[class*="is-border-"]::before { + width: 4.5em; + height: 0.5rem; + } +} + +@media (min-width: 64em) { + .lp-content-title { + font-size: 2.75rem; + } +} + +@media (min-width: 80em) { + .lp-content-title { + font-size: 3rem; + white-space: nowrap; + } + + .lp-content-title.is-border-left { + padding-left: 3.5rem; + } + + .lp-content-title.is-border-left::before { + left: 0; + top: 0.25em; + width: 0.5rem; + height: 3.5em; + } + + .lp-content-title.is-vertical.is-border-left::before { + top: 0.125em; + } +} + +.lp-content-title.is-sm { + padding-bottom: 0; + font-size: 1.25rem; + line-height: 1.3; + font-weight: 700; +} + +@media (min-width: 48em) { + .lp-content-title.is-sm { + font-size: 1.5rem; + } +} + +@media (min-width: 64em) { + .lp-content-title.is-sm { + font-size: 2.25rem; + } +} + +.lp-content-title.is-xs { + font-size: 1.25rem; + line-height: 1.3; + font-weight: 700; +} + +@media (min-width: 48em) { + .lp-content-title.is-xs { + font-size: 1.5rem; + } +} + +@media (min-width: 64em) { + .lp-content-title.is-xs { + font-size: 1.75rem; + } +} + +.lp-content-title__option { + display: block; + color: #6e6d9c; + font-size: 1rem; + line-height: 1.4; + margin-top: -0.25rem; + margin-bottom: 0.25rem; +} + +@media (min-width: 48em) { + .lp-content-title__option { + margin-top: -0.5rem; + margin-bottom: 0.5rem; + } +} + +@media (min-width: 64em) { + .lp-content-title__option { + font-size: 1.25rem; + margin-top: -0.75rem; + margin-bottom: 0.75rem; + } +} + +@media (min-width: 80em) { + .lp-content-title__option { + font-size: 1.5rem; + margin-top: -1rem; + margin-bottom: 1rem; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-content.css b/app/assets/stylesheets/lp/blocks/lp/_lp-content.css new file mode 100644 index 00000000000..b90967b6e2f --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-content.css @@ -0,0 +1,163 @@ +.lp-content { + position: relative; +} +.lp-content .lp-content__inner { + display: flex; +} +.lp-content { + padding-top: 2rem; + padding-bottom: 2rem; +} +@media (min-width: 48em) { + .lp-content { + padding-top: 2.5rem; + padding-bottom: 2.5rem; + } +} +@media (min-width: 64em) { + .lp-content { + padding-top: 4rem; + padding-bottom: 4rem; + } +} +.lp-content.is-campaign { + background-color: var(--main); + padding-top: 1.5rem; + padding-bottom: 2rem; + background-image: var(--campaign-bg-image); + background-repeat: repeat; + background-size: 40rem; + color: var(--reversal-text); +} +.lp-content.is-lp-bg-1 { + background-color: var(--lp-bg-1); +} +.lp-content.is-lp-bg-2 { + background-color: var(--lp-bg-2); +} +.lp-content.is-lp-bg-3 { + background-color: var(--lp-bg-3); +} +.lp-content.is-lp-bg-main { + background-color: var(--main); + color: var(--reversal-text); +} +.lp-content.is-hero { + position: relative; + padding-top: 2rem; + padding-bottom: 3rem; +} +@media (min-width: 48em) { + .lp-content.is-hero { + padding-top: 3rem; + padding-bottom: 4rem; + } +} +.lp-content.is-hero .lp-content__inner { + flex-direction: column; + gap: 1rem; +} +@media (min-width: 48em) { + .lp-content.is-hero .lp-content__inner { + flex-direction: row; + align-items: center; + gap: 3.5rem; + } +} +.lp-content.is-hero .lp-content__start { + flex: 14; +} +.lp-content.is-hero .lp-content__end { + flex: 6; +} +@media (min-width: 64em) { + .lp-content.is-hero .lp-content__end { + flex: 8; + } +} +@media (min-width: 80em) { + .lp-content.is-hero .lp-content__end { + flex: 10; + } +} +.lp-content.is-hero .lp-hero-info { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + gap: 1rem; +} +@media (min-width: 48em) { + .lp-content.is-hero .lp-hero-info { + gap: 2rem; + } +} +.lp-content.is-top-title .lp-content__inner { + gap: 2rem; + flex-direction: column; +} +@media (min-width: 80em) { + .lp-content.is-top-title .lp-content__inner { + gap: 3.5rem; + } +} +.lp-content.is-right-title .lp-content__inner { + flex-direction: column; + gap: 2rem; +} +@media (min-width: 80em) { + .lp-content.is-right-title .lp-content__inner { + flex-direction: row-reverse; + justify-content: space-between; + gap: 3rem; + } +} +.lp-content.is-right-title .lp-content__end { + flex: 1; + max-width: 100%; +} +@media (min-width: 80em) { + .lp-content.is-right-title .lp-content__end { + max-width: 50rem; + } +} +.lp-content.is-left-title .lp-content__inner { + gap: 2rem; + flex-direction: column; +} +@media (min-width: 80em) { + .lp-content.is-left-title .lp-content__inner { + gap: 3rem; + justify-content: space-between; + flex-direction: row; + } +} +.lp-content.is-left-title .lp-content__end { + flex: 1; + max-width: 100%; +} +@media (min-width: 80em) { + .lp-content.is-left-title .lp-content__end { + max-width: 42.5rem; + } +} +.lp-content .lp-content__inner { + flex-direction: column; + gap: 2rem; +} +@media (min-width: 48em) { + .lp-content .lp-content__inner { + gap: 2.5rem; + } +} +@media (min-width: 64em) { + .lp-content .lp-content__inner { + gap: 3.5rem; + } +} + +.lp-content__body { + display: flex; + flex-direction: column; + gap: 2.5rem; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-course-selection-item.css b/app/assets/stylesheets/lp/blocks/lp/_lp-course-selection-item.css new file mode 100644 index 00000000000..f08307f61f4 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-course-selection-item.css @@ -0,0 +1,45 @@ +.lp-course-selection-item__anchor { + position: relative; + top: -4rem; +} +@media (max-width: 47.9375em) { + .lp-course-selection-item__anchor#front-engineer-course { + margin-top: 4rem; + } +} + +.lp-course-selection-item__inner { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.lp-course-selection-item__title { + font-weight: 700; + font-size: 1.25rem; + line-height: 1.4; +} +@media (min-width: 48em) { + .lp-course-selection-item__title { + font-size: 1.5rem; + } +} + +.lp-course-selection-item__action { + max-width: 20rem; + width: 100%; + margin-inline: auto; +} + +.lp-course-selection-item__categories { + display: flex; + flex-direction: column; + gap: 1.5rem; +} +.lp-course-selection-item__categories details { + background-color: var(--base); +} + +.lp-course-selection-item__body { + padding: 1.5rem; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-course-selection-nav.css b/app/assets/stylesheets/lp/blocks/lp/_lp-course-selection-nav.css new file mode 100644 index 00000000000..8d249ed8ea3 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-course-selection-nav.css @@ -0,0 +1,37 @@ +.lp-course-selection-nav { + position: sticky; + top: 0; + z-index: 2; +} + +.lp-course-selection-nav__inner { + padding-block: 0.5rem; +} + +.lp-course-selection-nav__items { + display: flex; +} + +.lp-course-selection-nav__item { + flex: 1; +} + +.lp-course-selection-nav__item-link { + border: solid 1px var(--main); + background-color: var(--base); + font-size: 0.75rem; + line-height: 1.4; + text-align: center; + display: flex; + text-decoration: none; + height: 2.75rem; + justify-content: center; + align-items: center; +} +.lp-course-selection-nav__item:first-child .lp-course-selection-nav__item-link { + border-radius: 0.25rem 0 0 0.25rem; + margin-right: -1px; +} +.lp-course-selection-nav__item:last-child .lp-course-selection-nav__item-link { + border-radius: 0 0.25rem 0.25rem 0; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-course-selection.css b/app/assets/stylesheets/lp/blocks/lp/_lp-course-selection.css new file mode 100644 index 00000000000..9c2b075daa6 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-course-selection.css @@ -0,0 +1,9 @@ +.lp-course-selection__descritpion { + font-size: 0.875rem; + margin-bottom: 0.5rem; +} +@media (min-width: 48em) { + .lp-course-selection__descritpion { + font-size: 1rem; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-faq.css b/app/assets/stylesheets/lp/blocks/lp/_lp-faq.css new file mode 100644 index 00000000000..b99696b5068 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-faq.css @@ -0,0 +1,58 @@ +.lp-faq__inner { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.lp-faq__header, +.lp-faq__body { + padding-left: 2.5rem; + position: relative; +} +.lp-faq__header::before, +.lp-faq__body::before { + left: 0; + position: absolute; + top: 0; + font-size: 1.25rem; + line-height: 1; + font-weight: 900; + color: var(--main); + font-family: "Lato", sans-serif; +} + +.lp-faq__header::before { + content: "Q."; +} + +.lp-faq__body::before { + content: "A."; +} + +.lp-faq__title { + font-size: 1.125rem; + line-height: 1.4; + font-weight: 800; +} + +.lp-faq__body { + font-size: 0.875rem; +} +@media (min-width: 48em) { + .lp-faq__body { + font-size: 1rem; + } +} + +.lp-faq__edit { + margin-top: 0.75rem; +} + +.lp-faq__edit-link { + font-size: 0.875rem; + line-height: 1.4; + color: var(--muted-text); +} +.lp-faq__edit-link:hover { + color: var(--main); +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-faqs.css b/app/assets/stylesheets/lp/blocks/lp/_lp-faqs.css new file mode 100644 index 00000000000..a8f09469f55 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-faqs.css @@ -0,0 +1,7 @@ +.lp-faqs__items { + display: flex; + flex-direction: column; + gap: 2rem; + max-width: 40rem; + margin-inline: auto; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-header-nav.css b/app/assets/stylesheets/lp/blocks/lp/_lp-header-nav.css new file mode 100644 index 00000000000..887cea3e10c --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-header-nav.css @@ -0,0 +1,142 @@ +.lp-header-nav { + height: 100%; +} +@media (max-width: 79.9375em) { + .lp-header-nav { + display: none; + } + input:checked + .lp-header-nav { + display: block; + } +} +.lp-header-nav__items { + display: flex; +} +@media (min-width: 96em) { + .lp-header-nav__items { + gap: 1rem; + } +} +@media (min-width: 80em) { + .lp-header-nav__items { + height: 100%; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + } +} +@media (min-width: 80em) and (max-width: 95.9375em) { + .lp-header-nav__items { + gap: 0.25rem; + } +} +@media (max-width: 79.9375em) { + .lp-header-nav__items { + flex-direction: column; + position: fixed; + left: 0; + top: 0; + bottom: 0; + z-index: 2; + background-color: white; + background-color: var(--base); + width: 20rem; + max-width: calc(100vw - 3rem); + } + .lp-header-nav__item { + border-bottom: solid 1px hsl(242, 14%, 95%); + border-bottom: solid 1px var(--border-tint); + } +} +.lp-header-nav__item-link { + text-decoration: none; + font-weight: 700; + color: hsl(242, 51%, 51%); + color: var(--main); + white-space: nowrap; + display: flex; + justify-content: center; + align-items: center; + transition: all 0.2s ease-out; +} +.lp-header-nav__item-link span { + white-space: nowrap; +} +@media (min-width: 80em) { + .lp-header-nav__item-link { + height: 2.25rem; + padding-inline: 0.75rem; + font-size: 0.875rem; + background-color: white; + background-color: var(--base); + border-radius: 0.5rem; + } + .lp-header-nav__item-link:hover { + background-color: #DEDEF2; + background-color: var(--lp-bg-3); + } +} +@media (max-width: 79.9375em) { + .lp-header-nav__item-link { + height: 3rem; + padding-inline: 2rem; + font-size: 0.875rem; + } +} +@media (min-width: 80em) { + .lp-header-nav__overlay { + display: none; + } +} +@media (max-width: 79.9375em) { + .lp-header-nav__overlay { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 1; + background-color: rgba(39, 39, 44, 0.8); + } +} +.lp-header__home-link-image { + width: 9.75rem; + min-width: 9.75rem; +} +.lp-header__login { + display: flex; + height: 100%; + align-items: center; +} +@media (min-width: 48em) { + .lp-header__login { + width: 7.5rem; + } +} +@media (max-width: 47.9375em) { + .lp-header__login { + width: auto; + } + .lp-header__login .a-button { + font-size: 0.6875rem; + } +} +@media (min-width: 80em) { + .lp-header__mobile-nav-trigger { + display: none; + } +} +@media (max-width: 79.9375em) { + .lp-header__mobile-nav-trigger { + display: flex; + width: 2.75rem; + height: 2.75rem; + justify-content: center; + align-items: center; + } +} +.lp-header__home { + height: 100%; + display: flex; + align-items: center; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-header.css b/app/assets/stylesheets/lp/blocks/lp/_lp-header.css new file mode 100644 index 00000000000..aa0b0ba4feb --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-header.css @@ -0,0 +1,36 @@ +.lp-header { + background-color: var(--base); + position: sticky; + top: 0; + z-index: 10; +} + +.lp-header__inner { + height: 3.5rem; + display: flex; +} + +.lp-header__start { + height: 100%; + flex: 1; + display: flex; + gap: 2.5rem; +} + +.lp-header__end { + height: 100%; + display: flex; + align-items: center; + margin-right: -1rem; + gap: 0.25rem; +} +@media (min-width: 48em) { + .lp-header__end { + gap: 1rem; + } +} +@media (min-width: 64em) { + .lp-header__end { + margin-right: 0; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-hero-info.css b/app/assets/stylesheets/lp/blocks/lp/_lp-hero-info.css new file mode 100644 index 00000000000..0c893650d21 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-hero-info.css @@ -0,0 +1,59 @@ +.lp-hero-info__titles { + display: flex; + flex-direction: column; + gap: 0.75rem; +} +@media (min-width: 48em) { + .lp-hero-info__titles { + gap: 1rem; + } +} + +.lp-hero-info__title { + font-size: 1rem; + line-height: 1.4; + font-weight: 800; +} +@media (min-width: 48em) { + .lp-hero-info__title { + font-size: 1.5rem; + } +} + +.lp-hero-info__catchcopy { + font-size: 2rem; + line-height: 1.2; + font-weight: 800; +} +.lp-hero-info__catchcopy br { + display: none; +} +@media (min-width: 48em) { + .lp-hero-info__catchcopy { + font-size: 2.75rem; + } + .lp-hero-info__catchcopy br { + display: inline; + } +} +@media (min-width: 64em) { + .lp-hero-info__catchcopy { + font-size: 3.25rem; + } +} +@media (min-width: 80em) { + .lp-hero-info__catchcopy { + font-size: 4rem; + } +} + +.lp-hero-info__description p { + font-size: 0.875rem; + line-height: 1.5; + font-weight: 600; +} +@media (min-width: 48em) { + .lp-hero-info__description p { + font-size: 1rem; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-hero-visual.css b/app/assets/stylesheets/lp/blocks/lp/_lp-hero-visual.css new file mode 100644 index 00000000000..4a21e49b8ee --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-hero-visual.css @@ -0,0 +1,16 @@ +.lp-hero-visual { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.lp-hero-visual__image { + max-height: 12rem; +} +@media (min-width: 48em) { + .lp-hero-visual__image { + max-height: 26.25rem; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-left-image-section.css b/app/assets/stylesheets/lp/blocks/lp/_lp-left-image-section.css new file mode 100644 index 00000000000..98a01d56264 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-left-image-section.css @@ -0,0 +1,53 @@ +.lp-left-image-section { + padding: 1rem; +} +@media (min-width: 48em) { + .lp-left-image-section { + padding: 1.5rem; + } +} + +.lp-left-image-section__inner { + display: flex; + align-items: center; + gap: 1rem; +} +@media (min-width: 48em) { + .lp-left-image-section__inner { + gap: 1.5rem; + } +} + +.lp-left-image-section__start { + font-size: 5rem; + flex: 0 0 4rem; +} +@media (min-width: 48em) { + .lp-left-image-section__start { + flex: 0 0 8rem; + } +} + +.lp-left-image-section__end { + display: flex; + flex-direction: column; + justify-content: center; + gap: 1rem; +} + +.lp-left-image-section__icon { + display: flex; + justify-content: center; + align-items: center; + float: left; + width: 6rem; + height: 6rem; + margin-right: 1rem; + margin-bottom: 0.75rem; + font-size: 4rem; +} +@media (min-width: 48em) { + .lp-left-image-section__icon { + float: none; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-left-number-section.css b/app/assets/stylesheets/lp/blocks/lp/_lp-left-number-section.css new file mode 100644 index 00000000000..72d8330d66b --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-left-number-section.css @@ -0,0 +1,75 @@ +.lp-left-number-sections__items { + counter-reset: number 0; +} + +.lp-left-number-section { + padding: 1.5rem; + display: flex; + gap: 1rem; +} +@media (min-width: 48em) { + .lp-left-number-section { + gap: 2rem; + } +} + +.lp-left-number-section__start { + flex: 0 0 6rem; +} +@media (min-width: 48em) { + .lp-left-number-section__start { + flex: 0 0 12rem; + } +} + +.lp-left-number-section__header { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.lp-left-number-section__title { + text-align: center; + color: var(--main); + font-size: 1.25rem; + line-height: 1.4; + font-weight: 800; +} +.lp-left-number-section__title br { + display: none; +} +@media (min-width: 48em) { + .lp-left-number-section__title { + font-size: 1.5rem; + } + .lp-left-number-section__title br { + display: inline; + } +} +.lp-left-number-section__title::before { + counter-increment: number 1; + content: "0" counter(number); + display: block; + font-family: "Lato", sans-serif; + font-style: italic; + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: var(--main); + color: #dedef2; + margin-bottom: -0.125rem; + font-size: 2rem; + line-height: 1.4; + font-weight: 900; +} +@media (min-width: 48em) { + .lp-left-number-section__title::before { + font-size: 2.5rem; + } +} + +.lp-left-number-section__end { + display: flex; + flex-direction: column; + gap: 1.25rem; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-mentor-books.css b/app/assets/stylesheets/lp/blocks/lp/_lp-mentor-books.css new file mode 100644 index 00000000000..1f256c33d3d --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-mentor-books.css @@ -0,0 +1,24 @@ +.lp-mentor-books__items { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + align-items: flex-end; +} + +.lp-mentor-books__item { + flex: 1; +} +@media (min-width: 48em) { + .lp-mentor-books__item { + flex: 0 0 4.75rem; + } +} + +.lp-mentor-books__item-link { + box-shadow: 0 0 0 1px var(--background); + display: block; + transition: all 0.2s ease-out; +} +.lp-mentor-books__item-link:hover { + box-shadow: 0 0 0 1px var(--warning); +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-mentor.css b/app/assets/stylesheets/lp/blocks/lp/_lp-mentor.css new file mode 100644 index 00000000000..85b858d1a6d --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-mentor.css @@ -0,0 +1,182 @@ +.lp-mentor.is-welcome-index { + height: 100%; +} + +.lp-mentor__inner { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 0.75rem 1rem 1rem; +} +@media (min-width: 48em) { + .lp-mentor__inner { + padding: 1.25rem 1.5rem 1.5rem; + } +} +.lp-mentor.is-articles-show .lp-mentor__inner { + padding: 0.75rem 1rem 0; +} +.lp-mentor.is-articles-show .lp-mentor__inner:last-child { + padding-bottom: 1rem; +} + +.lp-mentor__header { + display: flex; + flex-direction: column; + gap: 1rem; + align-items: flex-start; +} +@media (min-width: 48em) { + .lp-mentor__header { + flex-direction: row; + } +} + +.lp-mentor__header-start { + width: 100%; + display: flex; + align-items: center; +} +@media (min-width: 48em) { + .lp-mentor__header-start { + flex: 0 0 4.5rem; + width: auto; + } +} + +.lp-mentor__header-end { + flex: 1; + display: flex; + flex-direction: column; + gap: 0.5rem; + width: 100%; +} +@media (min-width: 48em) { + .lp-mentor__header-end { + width: auto; + } +} + +.lp-mentor__image { + border-radius: 0.25rem; + width: 3rem; + display: block; + margin-inline: auto; +} +@media (min-width: 48em) { + .lp-mentor__image { + width: 100%; + margin-inline: 0; + } +} + +.lp-mentor__name { + font-weight: 800; + color: var(--main); + font-size: 1.125rem; + line-height: 1.2; + text-align: center; +} +@media (min-width: 48em) { + .lp-mentor__name { + font-size: 1.5rem; + text-align: left; + } +} + +.lp-mentor__job { + font-weight: 400; + color: var(--main); + font-size: 0.625rem; + line-height: 1; + text-align: center; + margin-bottom: 0.125rem; +} +@media (min-width: 48em) { + .lp-mentor__job { + font-size: 0.875rem; + text-align: left; + } +} + +.lp-mentor__sns { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + justify-content: center; +} +@media (min-width: 48em) { + .lp-mentor__sns { + gap: 0.75rem; + flex-wrap: nowrap; + justify-content: flex-start; + } +} + +.lp-mentor__sns-item-link { + color: var(--main); + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + border: solid 1px var(--main); + border-radius: 0.25rem; + transition: all 0.2s ease-out; +} +.lp-mentor__sns-item-link:hover { + color: var(--welcome-pink); +} +.lp-mentor__sns-item-link { + height: 1.75rem; + width: 1.75rem; + font-size: 1rem; + line-height: 1.45; +} +@media (min-width: 48em) { + .lp-mentor__sns-item-link { + height: 2.25rem; + width: 2.25rem; + font-size: 1.25rem; + } +} + +.lp-mentor__body { + font-size: 0.875rem; +} +.lp-mentor__body.is-trancate { + overflow: hidden; + text-overflow: ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + display: none; +} +@media (min-width: 48em) { + .lp-mentor__body.is-trancate { + display: -webkit-box; + height: 67.2px; + } +} +.lp-mentor__body.is-temp { + font-size: 0.875rem; + line-height: 1.6; +} +.lp-mentor__body.is-temp img { + width: 6.25rem; + float: right; + margin-left: 1rem; + margin-bottom: 0.75rem; +} +.lp-mentor__body.is-temp img.has-3-books { + width: 8.25rem; +} +.lp-mentor__body.is-temp img.has-5-books { + width: 10rem; +} +.lp-mentor__body.is-temp a { + color: var(--link-text); + text-decoration: underline; + cursor: pointer; +} +.lp-mentor__body.is-temp a:hover { + text-decoration: none; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-movie.css b/app/assets/stylesheets/lp/blocks/lp/_lp-movie.css new file mode 100644 index 00000000000..1d2111c7335 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-movie.css @@ -0,0 +1,15 @@ +.lp-movie { + max-width: 40rem; + margin-inline: auto; +} + +.lp-movie__inner { + width: 100%; + padding: 1rem; + aspect-ratio: 16/9; +} +.lp-movie__inner iframe { + width: 100%; + height: 100%; + aspect-ratio: 16/9; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-page-header-nav.css b/app/assets/stylesheets/lp/blocks/lp/_lp-page-header-nav.css new file mode 100644 index 00000000000..0086de9968f --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-page-header-nav.css @@ -0,0 +1,28 @@ +.lp-page-header-nav { + display: flex; + height: 100%; +} + +.lp-page-header-nav__items { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.lp-page-header-nav__item { + position: relative; + flex: 1; + max-width: 50%; + min-width: 10rem; +} +.lp-page-header-nav__item:first-child:last-child { + max-width: 100%; +} +@media (min-width: 48em) { + .lp-page-header-nav__item { + flex: none; + max-width: none; + display: flex; + justify-content: center; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-page-header.css b/app/assets/stylesheets/lp/blocks/lp/_lp-page-header.css new file mode 100644 index 00000000000..8216df0dd84 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-page-header.css @@ -0,0 +1,38 @@ +.lp-page-header { + background-color: var(--main); +} + +.lp-page-header__title { + color: var(--reversal-text); + font-size: 1.25rem; + line-height: 1.4; + font-weight: 700; + max-width: calc(100vw - 2rem); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +@media (min-width: 48em) { + .lp-page-header__title { + font-size: 1.5rem; + max-width: none; + } +} + +.lp-page-header__inner { + height: 4rem; + display: flex; + align-items: center; +} + +.lp-page-header__start { + flex: 1; + height: 100%; + display: flex; + align-items: center; + height: 100%; +} + +.lp-page-header__end { + height: 100%; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-practices-table.css b/app/assets/stylesheets/lp/blocks/lp/_lp-practices-table.css new file mode 100644 index 00000000000..1c0ea520090 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-practices-table.css @@ -0,0 +1,20 @@ +.lp-practices-table { + width: 100%; +} +.lp-practices-table tr:not(:last-child) { + border-bottom: solid 1px var(--border); +} +.lp-practices-table th, +.lp-practices-table td { + font-size: 0.8125rem; + line-height: 1.5; + padding: 0.5rem 1rem; +} +.lp-practices-table th { + text-align: right; + white-space: nowrap; + font-weight: 400; +} +.lp-practices-table td { + text-align: left; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-price.css b/app/assets/stylesheets/lp/blocks/lp/_lp-price.css new file mode 100644 index 00000000000..9bc716e2163 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-price.css @@ -0,0 +1,116 @@ +.lp-price { + color: var(--main); + display: flex; + justify-content: center; + gap: 0.75em; + font-size: 0.5625rem; +} +@media (min-width: 48em) { + .lp-price { + font-size: 0.875rem; + } +} +@media (min-width: 64em) { + .lp-price { + font-size: 1rem; + } +} +.lp-price.is-total { + gap: 0.25em; +} +.lp-price.is-sm { + justify-content: flex-start; + font-size: 0.375em; +} +.lp-price.is-sm .lp-price__tax { + font-size: 0.875rem; +} +@media (min-width: 48em) { + .lp-price.is-sm { + font-size: 0.5em; + } + .lp-price.is-sm .lp-price__tax { + font-size: 1rem; + } +} +@media (min-width: 64em) { + .lp-price.is-sm { + font-size: 0.5625em; + } + .lp-price.is-sm .lp-price__tax { + font-size: 1.5rem; + } +} + +.lp-price__label { + font-size: 1.25em; + line-height: 1; + font-weight: 700; + align-self: center; + height: 4em; + width: 4em; + border: solid 1px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + letter-spacing: -0.0625em; + text-indent: -0.0625em; +} + +.lp-price__value { + display: flex; + align-self: baseline; + gap: 0.5em; + flex-wrap: wrap; +} + +.lp-price__amount { + font-size: 6.25em; + line-height: 1; + font-weight: 900; + align-self: baseline; + font-family: "Lato", sans-serif; +} + +.lp-price__currency { + font-size: 3.25em; + line-height: 1; + font-weight: 800; + align-self: baseline; +} + +.lp-price__details { + font-size: 2.25em; + line-height: 1; + font-weight: 800; + display: flex; + align-self: baseline; + gap: 0.125em; +} + +.lp-price__separator { + font-weight: 100; + align-self: baseline; +} + +.lp-price__per-person { + align-self: baseline; +} + +.lp-price__tax { + font-size: 1.25em; + align-self: baseline; +} + +.lp-price__total-value { + display: flex; + align-self: baseline; + gap: 0.25em; + font-size: 1.5em; + font-weight: 600; +} + +.lp-price-note { + line-height: 1.4; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-supplementary-info.css b/app/assets/stylesheets/lp/blocks/lp/_lp-supplementary-info.css new file mode 100644 index 00000000000..5da8917fdb8 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-supplementary-info.css @@ -0,0 +1,17 @@ +.lp-supplementary-info { + background-color: var(--lp-bg-3); + border-radius: 0.5rem; +} + +.lp-supplementary-info__inner { + display: flex; + flex-direction: column; + padding: 0.75rem 1rem; + gap: 0.75rem; +} +@media (min-width: 48em) { + .lp-supplementary-info__inner { + padding: 1.5rem 2rem; + gap: 1.25rem; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-table.css b/app/assets/stylesheets/lp/blocks/lp/_lp-table.css new file mode 100644 index 00000000000..5b408e93e89 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-table.css @@ -0,0 +1,38 @@ +.lp-table { + width: 100%; + background-color: var(--base); +} +.lp-table th, +.lp-table td { + font-size: 0.8125rem; + line-height: 1.5; + padding: 0.5rem 1rem; + border: solid 1px var(--border); + text-align: left; +} +.lp-table th { + font-weight: 400; + width: 30%; + background-color: var(--lp-bg-2); +} +.lp-table td { + text-align: left; +} +.lp-table td *:first-child { + margin-top: 0; +} +.lp-table td *:last-child { + margin-bottom: 0; +} +.lp-table p, +.lp-table ul, +.lp-table ol { + margin-block: 0.75em; +} +.lp-table ul { + list-style-type: disc; + margin-left: 1.5em; +} +.lp-table li { + margin-block: 0.25em; +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-top-cover.css b/app/assets/stylesheets/lp/blocks/lp/_lp-top-cover.css new file mode 100644 index 00000000000..d061b3d94a6 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-top-cover.css @@ -0,0 +1,98 @@ +.lp-top-cover { + background-image: var(--people-bg-image); + background-color: var(--lp-bg-2); + background-repeat: repeat; + position: relative; + height: 24rem; + background-size: 20rem; +} +@media (min-width: 48em) { + .lp-top-cover { + height: 28rem; + background-size: 26rem; + } +} +@media (min-width: 64em) { + .lp-top-cover { + height: 38rem; + background-size: 32rem; + } +} + +.lp-top-cover__container { + height: 100%; +} + +.lp-top-cover__inner { + height: 100%; + position: relative; + z-index: 2; + display: flex; + align-items: center; +} +@media (max-width: 47.9375em) { + .lp-top-cover__inner { + padding-block: 1rem 1.5rem; + } +} + +.lp-top-cover__contents { + max-width: 920px; + margin-inline: auto; +} + +.lp-top-cover__image-container { + display: flex; + justify-content: center; + align-items: center; +} + +.lp-top-cover__logo { + height: auto; + width: 38rem; + display: block; + margin-top: 1.125rem; + margin-inline: auto; +} +@media (max-width: 47.9375em) { + .lp-top-cover__logo { + max-width: 90%; + margin-top: 0.75rem; + } +} + +.lp-top-cover__description { + font-size: 1.5rem; + line-height: 1.4; + text-align: center; + font-weight: 800; + color: var(--reversal-text); + font-feature-settings: "palt"; +} +@media (max-width: 47.9375em) { + .lp-top-cover__description { + font-size: 0.875rem; + } +} + +.lp-top-cover__title { + color: var(--reversal-text); + font-feature-settings: "palt"; + background-color: var(--accent); + color: var(--main); + padding: 0.5rem 1rem; + font-weight: 800; + text-align: center; + font-size: 1.25rem; + line-height: 1.4; +} +@media (min-width: 48em) { + .lp-top-cover__title { + font-size: 2rem; + } +} +@media (min-width: 64em) { + .lp-top-cover__title { + font-size: 2.5rem; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_lp-top-image-sections.css b/app/assets/stylesheets/lp/blocks/lp/_lp-top-image-sections.css new file mode 100644 index 00000000000..aac98e9f320 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_lp-top-image-sections.css @@ -0,0 +1,62 @@ +.lp-top-image-sections__title-icon { + height: 3rem; + width: 3rem; + margin-right: 0.75rem; +} + +.lp-top-image-section { + height: 100%; +} + +.lp-top-image-section__inner { + height: 100%; + display: flex; + flex-direction: column; + padding: 1rem 1.25rem 1.25rem; + gap: 0.75rem; +} +@media (min-width: 48em) { + .lp-top-image-section__inner { + padding: 1.25rem 1.5rem 1.5rem; + gap: 1.25rem; + } +} + +.lp-top-image-section__icon { + display: block; + margin-inline: auto; + display: flex; + justify-content: center; + align-items: center; + width: 6rem; + font-size: 4rem; +} +@media (min-width: 64em) { + .lp-top-image-section__icon { + width: 8rem; + font-size: 5rem; + } +} + +.lp-top-image-section__chart-container { + aspect-ratio: 3/4; +} +@media (min-width: 48em) { + .lp-top-image-section__chart-container { + aspect-ratio: 5/3; + } +} + +.lp-top-image-section__float-image { + float: left; + border-radius: 0.25rem; + width: 4rem; + margin-right: 1rem; + margin-bottom: 0.75rem; +} +@media (min-width: 48em) { + .lp-top-image-section__float-image { + width: 6.75rem; + margin-right: 1.5rem; + } +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_side-filter.css b/app/assets/stylesheets/lp/blocks/lp/_side-filter.css new file mode 100644 index 00000000000..d4995b2aa59 --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_side-filter.css @@ -0,0 +1,39 @@ +.side-filter { + position: sticky; + top: 4rem; + max-width: 14rem; + margin: 0; +} +.side-filter .a-card { + overflow: hidden; +} +.side-filter { + display: none; +} +@media (min-width: 64em) { + .side-filter { + display: block; + } +} + +.side-filter__item-link { + display: flex; + padding: 0.75rem; + font-size: 0.875rem; + line-height: 1.4; + overflow: hidden; + text-decoration: none; + transition: all 0.2s ease-out; +} +.side-filter__item:not(:last-child) .side-filter__item-link { + border-bottom: solid 1px var(--border-tint); +} +.side-filter__item-link:hover { + background-color: var(--primary-tint); +} +.side-filter__item-link.is-active { + background-color: var(--main); + pointer-events: none; + text-decoration: none; + color: var(--reversal-text); +} diff --git a/app/assets/stylesheets/lp/blocks/lp/_welcome-top-info.css b/app/assets/stylesheets/lp/blocks/lp/_welcome-top-info.css new file mode 100644 index 00000000000..0c920afcc6b --- /dev/null +++ b/app/assets/stylesheets/lp/blocks/lp/_welcome-top-info.css @@ -0,0 +1,55 @@ +.welcome-top-info { + background-color: var(--danger); +} + +.welcome-top-info__inner { + padding-block: 0.75rem; +} +@media (min-width: 48em) { + .welcome-top-info__inner { + display: flex; + align-items: center; + justify-content: center; + } +} + +.welcome-top-info__label { + border: solid 1px var(--reversal-text); + background-color: var(--danger); + font-size: 0.75rem; + line-height: 1.4; + display: flex; + font-weight: 700; + white-space: nowrap; + color: var(--reversal-text); + padding: 0.25rem 0.75rem; + border-radius: 1rem; + align-items: center; + justify-content: center; + width: 10rem; + margin: -26px auto 0.5rem; +} +@media (min-width: 48em) { + .welcome-top-info__label { + margin: 0 0.5rem 0 0; + width: auto; + } +} + +.welcome-top-info__link { + color: var(--reversal-text); + text-decoration: none; + cursor: pointer; +} +.welcome-top-info__link:hover, .welcome-top-info__link:active { + text-decoration: underline; +} +.welcome-top-info__link { + font-size: 0.875rem; + line-height: 1.5; +} +@media (min-width: 48em) { + .welcome-top-info__link { + font-size: 1.125rem; + } +} diff --git a/app/assets/stylesheets/lp/corporate-training/_corporate-training-example.css b/app/assets/stylesheets/lp/corporate-training/_corporate-training-example.css new file mode 100644 index 00000000000..46230a63e81 --- /dev/null +++ b/app/assets/stylesheets/lp/corporate-training/_corporate-training-example.css @@ -0,0 +1,109 @@ +.corporate-training-example__header { + display: flex; + justify-content: center; + align-items: center; + color: var(--main); + border: solid 1px var(--main); + height: 6rem; +} + +@media (min-width: 48em) { + .corporate-training-example__header { + height: 9rem; + } +} + +.corporate-training-example__title { + font-size: 1rem; + line-height: 1.4; +} + +.corporate-training-example__divider { + position: relative; + width: .5rem; + margin: 1.75rem auto; +} + +.corporate-training-example__divider span { + width: .5rem; + height: .5rem; + border-radius: 1rem; + background-color: var(--main); + display: block; + opacity: .5; +} + +.corporate-training-example__divider::before, +.corporate-training-example__divider::after { + content: ''; + width: .5rem; + height: .5rem; + border-radius: 1rem; + background-color: var(--main); + display: block; +} + +.corporate-training-example__divider::before { + left: 0; + position: absolute; + top: -1rem; + opacity: .2; +} + +.corporate-training-example__divider::after { + bottom: -1rem; + left: 0; + position: absolute; + opacity: 1; +} + +.corporate-training-example-content { + padding: 1rem; +} + +.corporate-training-example-content__header { + background-color: var(--main); + color: var(--reversal-text); + display: flex; + justify-content: center; + align-items: center; + height: 3rem; + border-radius: .1875rem; +} + +.corporate-training-example-content__title { + line-height: 1.4; + text-align: center; + font-size: .875rem; +} + +@media (min-width: 48em) { + .corporate-training-example-content__title { + font-size: 1.125rem; + } +} + +.corporate-training-example-content__body { + margin-top: 1.5rem; +} + +.corporate-training-example-content__body ul { + list-style: disc outside; + margin-left: 1.5rem; +} + +.corporate-training-example-content__body li { + font-size: .875rem; + line-height: 1.4; +} + +.corporate-training-example-content__body li + li { + margin-top: .5rem; +} + +.corporate-training-example-content__period { + font-size: 1.25rem; + line-height: 1.4; + font-weight: 800; + text-align: center; +} diff --git a/app/assets/stylesheets/lp/corporate-training/_corporate-training-examples.css b/app/assets/stylesheets/lp/corporate-training/_corporate-training-examples.css new file mode 100644 index 00000000000..634dc487148 --- /dev/null +++ b/app/assets/stylesheets/lp/corporate-training/_corporate-training-examples.css @@ -0,0 +1,11 @@ +.corporate-training-examples__items { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; +} +@media (min-width: 48em) { + .corporate-training-examples__items { + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + } +} diff --git a/app/assets/stylesheets/lp/corporate-training/_corporate-training-testimonial.css b/app/assets/stylesheets/lp/corporate-training/_corporate-training-testimonial.css new file mode 100644 index 00000000000..2641abc239b --- /dev/null +++ b/app/assets/stylesheets/lp/corporate-training/_corporate-training-testimonial.css @@ -0,0 +1,23 @@ +.corporate-training-testimonials__items { + display: flex; + width: 100%; + gap: 2rem; +} + +.corporate-training-testimonial__inner { + padding-inline: 1.5rem; +} +.corporate-training-testimonial__inner.a-card { + margin-inline: 0; +} + +.corporate-training-testimonial__header, +.corporate-training-testimonial__body { + padding-block: 1.5rem; +} + +.corporate-training-testimonial__title { + font-size: 1.25rem; + line-height: 1.4; + font-weight: 800; +} diff --git a/app/assets/stylesheets/lp/layouts/_l-cards.css b/app/assets/stylesheets/lp/layouts/_l-cards.css new file mode 100644 index 00000000000..f320f8b73b8 --- /dev/null +++ b/app/assets/stylesheets/lp/layouts/_l-cards.css @@ -0,0 +1,51 @@ +.l-cards { + display: flex; + flex-direction: column; + gap: 2rem; +} +@media (min-width: 48em) { + .l-cards { + gap: 3rem; + } +} +.l-cards.is-zigzag .l-cards__item:nth-child(odd) { + justify-content: flex-start; +} +.l-cards.is-zigzag .l-cards__item:nth-child(even) { + justify-content: flex-end; +} +.l-cards.is-step-by-step .l-cards__item:first-child { + justify-content: flex-start; +} +.l-cards.is-step-by-step .l-cards__item:nth-child(2) { + justify-content: center; +} +.l-cards.is-step-by-step .l-cards__item:last-child { + justify-content: flex-end; +} +.l-cards.is-stacked { + flex-direction: column; + align-items: center; +} +.l-cards.is-stacked .l-cards__item { + justify-content: center; +} +.l-cards.is-stacked .l-cards__item.is-wide { + flex: 0 0 100%; + max-width: 100%; +} +.l-cards.is-stacked .l-cards__item.is-wide .l-cards__item-inner { + flex: 0 0 100%; +} + +.l-cards__item { + display: flex; +} + +.l-cards__item-inner { + flex: 0 0 40rem; + max-width: calc(100vw - 2rem); +} +.l-cards__item-inner .a-card { + margin-inline: 0; +} diff --git a/app/assets/stylesheets/lp/layouts/_l-sections.css b/app/assets/stylesheets/lp/layouts/_l-sections.css new file mode 100644 index 00000000000..d843667c33a --- /dev/null +++ b/app/assets/stylesheets/lp/layouts/_l-sections.css @@ -0,0 +1 @@ +/* intentionally left blank */ diff --git a/app/assets/stylesheets/modules/_any_login.css b/app/assets/stylesheets/modules/_any_login.css new file mode 100644 index 00000000000..dcd6d8778b2 --- /dev/null +++ b/app/assets/stylesheets/modules/_any_login.css @@ -0,0 +1,76 @@ +body #any_login { + background: black; + opacity: 1; + overflow: hidden; + border-top-right-radius: 0.75rem; +} + +body #any_login #any_login_form_toggle_label { + padding-inline: 1rem; +} + +body #any_login #back_to_previous_id { + margin-right: 1rem; +} + +body #any_login form { + padding: 0; + height: 3.25rem; + display: flex; + align-items: center; +} + +body #any_login form img { + cursor: pointer; + vertical-align: middle; + padding: 1rem; + width: 3.25rem; + height: 3.25rem; + opacity: 1; + transition: all 0.2s ease-out; +} + +body #any_login form img:hover { + opacity: 0.7; +} + +body #any_login form select, +body #any_login form input[type="text"], +body #any_login form input[type="submit"] { + background-color: var(--base); + height: 2rem; + border-radius: 0.25rem; + padding-inline: 0.75rem; +} + +body #any_login form select { + cursor: pointer; + min-width: 10rem; +} + +body #any_login form input[type="text"] { + min-width: 6rem; +} + +body #any_login form input[type="submit"] { + background-color: var(--danger); + color: var(--reversal-text); + font-weight: 600; + margin-inline: 0.5em; + height: 2rem; + padding-inline: 0.75em; +} + +body #any_login form .visible_box { + padding-right: 0.875rem; +} + +body #any_login form .any_login_user_information { + font-size: 0.875rem; + padding-left: 0; +} + +body #any_login form #anylogin_back_to_user { + padding-inline: 0.5rem; + color: var(--reversal-text); +} diff --git a/app/assets/stylesheets/modules/_choices.css b/app/assets/stylesheets/modules/_choices.css new file mode 100644 index 00000000000..b695ca72e87 --- /dev/null +++ b/app/assets/stylesheets/modules/_choices.css @@ -0,0 +1,77 @@ +body .choices.is-open { + z-index: 5; +} +body .choices__inner { + background-color: var(--input-background); + border-color: var(--input-border); + padding: 0.25rem; + border-radius: 4px; + min-height: 2.5rem; +} +body .choices.is-focused .choices__inner { + background-color: var(--base); +} +body .choices[data-type*=select-one] .choices__inner { + padding-block: 0; + display: flex; +} +body .choices__list--single { + padding: 0.25rem 2.5rem 0.25rem 0.5rem; + display: flex; + align-items: center; +} +body .choices__list--single .choices__item { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +body .choices__list--multiple .choices__item, +body .choices__list--multiple .choices__item[data-deletable] { + display: inline-block; + position: relative; + max-width: calc(100% - 0.25rem); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + align-items: center; + border-color: var(--input-selected-border); + color: var(--input-selected-text); + background-color: var(--input-selected-background); + border-radius: 4px; + line-height: 1.625rem; + height: 1.75rem; + padding: 0 2.25rem 0 0.5rem; + margin: 0.125rem; +} +body .choices__list--multiple .choices__item.is-highlighted, +body .choices__list--multiple .choices__item[data-deletable].is-highlighted { + border-color: var(--input-selected-border); + color: var(--input-selected-text); + background-color: var(--input-selected-background); +} +body .choices[data-type*=select-multiple] .choices__button, +body .choices[data-type*=text] .choices__button { + border-left-color: var(--input-selected-border); + color: var(--input-selected-text); + height: 100%; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%20style%3D%22enable-background%3Anew%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.st0%7Bfill%3A%233f3290%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M2.6%200%2021%2018.4%2018.4%2021%200%202.6%202.6%200z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2018.4%2018.4%200l2.5%202.5L2.5%2020.9%200%2018.4z%22%2F%3E%3C%2Fsvg%3E"); + margin: 0 0 0 0.5rem; + width: 1.75rem; + position: absolute; + right: 0; + top: 0; + transition: all 0.2s ease-out; +} +body .choices[data-type*=select-multiple] .choices__button:hover, +body .choices[data-type*=text] .choices__button:hover { + background-color: var(--primary-semi-tint); + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%20style%3D%22enable-background%3Anew%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.st0%7Bfill%3A%23ffffff%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M2.6%200%2021%2018.4%2018.4%2021%200%202.6%202.6%200z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2018.4%2018.4%200l2.5%202.5L2.5%2020.9%200%2018.4z%22%2F%3E%3C%2Fsvg%3E"); +} + +.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item { + line-height: 1.5; + padding: 0.5rem; +} +.choices__list--dropdown .choices__item:not(:first-child), .choices__list[aria-expanded] .choices__item:not(:first-child) { + border-top: solid 1px var(--border-tint); +} diff --git a/app/javascript/stylesheets/modules/_embla.css b/app/assets/stylesheets/modules/_embla.css similarity index 100% rename from app/javascript/stylesheets/modules/_embla.css rename to app/assets/stylesheets/modules/_embla.css diff --git a/app/assets/stylesheets/modules/_github.css b/app/assets/stylesheets/modules/_github.css new file mode 100644 index 00000000000..90ea104807a --- /dev/null +++ b/app/assets/stylesheets/modules/_github.css @@ -0,0 +1,535 @@ +:root { + --color-scale-black: #1b1f23; + --color-scale-white: #fff; + --color-scale-gray-0: #fafbfc; + --color-scale-gray-1: #f6f8fa; + --color-scale-gray-2: #e1e4e8; + --color-scale-gray-3: #d1d5da; + --color-scale-gray-4: #959da5; + --color-scale-gray-5: #6a737d; + --color-scale-gray-6: #586069; + --color-scale-gray-7: #444d56; + --color-scale-gray-8: #2f363d; + --color-scale-gray-9: #24292e; + --color-scale-blue-0: #f1f8ff; + --color-scale-blue-1: #dbedff; + --color-scale-blue-2: #c8e1ff; + --color-scale-blue-3: #79b8ff; + --color-scale-blue-4: #2188ff; + --color-scale-blue-5: #0366d6; + --color-scale-blue-6: #005cc5; + --color-scale-blue-7: #044289; + --color-scale-blue-8: #032f62; + --color-scale-blue-9: #05264c; + --color-scale-green-0: #f0fff4; + --color-scale-green-1: #dcffe4; + --color-scale-green-2: #bef5cb; + --color-scale-green-3: #85e89d; + --color-scale-green-4: #34d058; + --color-scale-green-5: #28a745; + --color-scale-green-6: #22863a; + --color-scale-green-7: #176f2c; + --color-scale-green-8: #165c26; + --color-scale-green-9: #144620; + --color-scale-yellow-0: #fffdef; + --color-scale-yellow-1: #fffbdd; + --color-scale-yellow-2: #fff5b1; + --color-scale-yellow-3: #ffea7f; + --color-scale-yellow-4: #ffdf5d; + --color-scale-yellow-5: #ffd33d; + --color-scale-yellow-6: #f9c513; + --color-scale-yellow-7: #dbab09; + --color-scale-yellow-8: #b08800; + --color-scale-yellow-9: #735c0f; + --color-scale-orange-0: #fff8f2; + --color-scale-orange-1: #ffebda; + --color-scale-orange-2: #ffd1ac; + --color-scale-orange-3: #ffab70; + --color-scale-orange-4: #fb8532; + --color-scale-orange-5: #f66a0a; + --color-scale-orange-6: #e36209; + --color-scale-orange-7: #d15704; + --color-scale-orange-8: #c24e00; + --color-scale-orange-9: #a04100; + --color-scale-red-0: #ffeef0; + --color-scale-red-1: #ffdce0; + --color-scale-red-2: #fdaeb7; + --color-scale-red-3: #f97583; + --color-scale-red-4: #ea4a5a; + --color-scale-red-5: #d73a49; + --color-scale-red-6: #cb2431; + --color-scale-red-7: #b31d28; + --color-scale-red-8: #9e1c23; + --color-scale-red-9: #86181d; + --color-scale-purple-0: #f5f0ff; + --color-scale-purple-1: #e6dcfd; + --color-scale-purple-2: #d1bcf9; + --color-scale-purple-3: #b392f0; + --color-scale-purple-4: #8a63d2; + --color-scale-purple-5: #6f42c1; + --color-scale-purple-6: #5a32a3; + --color-scale-purple-7: #4c2889; + --color-scale-purple-8: #3a1d6e; + --color-scale-purple-9: #29134e; + --color-scale-pink-0: #ffeef8; + --color-scale-pink-1: #fedbf0; + --color-scale-pink-2: #f9b3dd; + --color-scale-pink-3: #f692ce; + --color-scale-pink-4: #ec6cb9; + --color-scale-pink-5: #ea4aaa; + --color-scale-pink-6: #d03592; + --color-scale-pink-7: #b93a86; + --color-scale-pink-8: #99306f; + --color-scale-pink-9: #6d224f; + --color-auto-black: #1b1f23; + --color-auto-white: #fff; + --color-auto-gray-0: #fafbfc; + --color-auto-gray-1: #f6f8fa; + --color-auto-gray-2: #e1e4e8; + --color-auto-gray-3: #d1d5da; + --color-auto-gray-4: #959da5; + --color-auto-gray-5: #6a737d; + --color-auto-gray-6: #586069; + --color-auto-gray-7: #444d56; + --color-auto-gray-8: #2f363d; + --color-auto-gray-9: #24292e; + --color-auto-blue-0: #f1f8ff; + --color-auto-blue-1: #dbedff; + --color-auto-blue-2: #c8e1ff; + --color-auto-blue-3: #79b8ff; + --color-auto-blue-4: #2188ff; + --color-auto-blue-5: #0366d6; + --color-auto-blue-6: #005cc5; + --color-auto-blue-7: #044289; + --color-auto-blue-8: #032f62; + --color-auto-blue-9: #05264c; + --color-auto-green-0: #f0fff4; + --color-auto-green-1: #dcffe4; + --color-auto-green-2: #bef5cb; + --color-auto-green-3: #85e89d; + --color-auto-green-4: #34d058; + --color-auto-green-5: #28a745; + --color-auto-green-6: #22863a; + --color-auto-green-7: #176f2c; + --color-auto-green-8: #165c26; + --color-auto-green-9: #144620; + --color-auto-yellow-0: #fffdef; + --color-auto-yellow-1: #fffbdd; + --color-auto-yellow-2: #fff5b1; + --color-auto-yellow-3: #ffea7f; + --color-auto-yellow-4: #ffdf5d; + --color-auto-yellow-5: #ffd33d; + --color-auto-yellow-6: #f9c513; + --color-auto-yellow-7: #dbab09; + --color-auto-yellow-8: #b08800; + --color-auto-yellow-9: #735c0f; + --color-auto-orange-0: #fff8f2; + --color-auto-orange-1: #ffebda; + --color-auto-orange-2: #ffd1ac; + --color-auto-orange-3: #ffab70; + --color-auto-orange-4: #fb8532; + --color-auto-orange-5: #f66a0a; + --color-auto-orange-6: #e36209; + --color-auto-orange-7: #d15704; + --color-auto-orange-8: #c24e00; + --color-auto-orange-9: #a04100; + --color-auto-red-0: #ffeef0; + --color-auto-red-1: #ffdce0; + --color-auto-red-2: #fdaeb7; + --color-auto-red-3: #f97583; + --color-auto-red-4: #ea4a5a; + --color-auto-red-5: #d73a49; + --color-auto-red-6: #cb2431; + --color-auto-red-7: #b31d28; + --color-auto-red-8: #9e1c23; + --color-auto-red-9: #86181d; + --color-auto-purple-0: #f5f0ff; + --color-auto-purple-1: #e6dcfd; + --color-auto-purple-2: #d1bcf9; + --color-auto-purple-3: #b392f0; + --color-auto-purple-4: #8a63d2; + --color-auto-purple-5: #6f42c1; + --color-auto-purple-6: #5a32a3; + --color-auto-purple-7: #4c2889; + --color-auto-purple-8: #3a1d6e; + --color-auto-purple-9: #29134e; + --color-auto-pink-0: #ffeef8; + --color-auto-pink-1: #fedbf0; + --color-auto-pink-2: #f9b3dd; + --color-auto-pink-3: #f692ce; + --color-auto-pink-4: #ec6cb9; + --color-auto-pink-5: #ea4aaa; + --color-auto-pink-6: #d03592; + --color-auto-pink-7: #b93a86; + --color-auto-pink-8: #99306f; + --color-auto-pink-9: #6d224f; + --color-text-primary: #24292e; + --color-text-secondary: #586069; + --color-text-tertiary: #6a737d; + --color-text-placeholder: #6a737d; + --color-text-disabled: #6a737d; + --color-text-inverse: #fff; + --color-text-link: #0366d6; + --color-text-danger: #cb2431; + --color-text-success: #22863a; + --color-text-warning: #b08800; + --color-icon-primary: #24292e; + --color-icon-secondary: #586069; + --color-icon-tertiary: #959da5; + --color-icon-info: #0366d6; + --color-icon-danger: #d73a49; + --color-icon-success: #22863a; + --color-icon-warning: #b08800; + --color-border-primary: #e1e4e8; + --color-border-secondary: #eaecef; + --color-border-tertiary: #d1d5da; + --color-border-inverse: #fff; + --color-border-info: #0366d6; + --color-border-danger: #d73a49; + --color-border-success: #34d058; + --color-border-warning: #f9c513; + --color-bg-canvas: #fff; + --color-bg-canvas-mobile: #fff; + --color-bg-canvas-inverse: #24292e; + --color-bg-primary: #fff; + --color-bg-secondary: #fafbfc; + --color-bg-tertiary: #f6f8fa; + --color-bg-overlay: #fff; + --color-bg-info: #f1f8ff; + --color-bg-info-inverse: #0366d6; + --color-bg-danger: #ffeef0; + --color-bg-danger-inverse: #d73a49; + --color-bg-success: #dcffe4; + --color-bg-success-inverse: #28a745; + --color-bg-warning: #fff5b1; + --color-bg-warning-inverse: #ffd33d; + --color-shadow-small: 0 1px 0 rgba(27,31,35,0.04); + --color-shadow-medium: 0 3px 6px rgba(149,157,165,0.15); + --color-shadow-large: 0 8px 24px rgba(149,157,165,0.2); + --color-shadow-extra-large: 0 12px 48px rgba(149,157,165,0.3); + --color-shadow-highlight: inset 0 1px 0 hsla(0,0%,100%,0.25); + --color-shadow-inset: inset 0 1px 0 rgba(225,228,232,0.2); + --color-state-hover-primary-bg: #0366d6; + --color-state-hover-primary-border: #0366d6; + --color-state-hover-primary-text: #fff; + --color-state-hover-primary-icon: #fff; + --color-state-hover-secondary-bg: #f6f8fa; + --color-state-hover-secondary-border: #f6f8fa; + --color-state-selected-primary-bg: #0366d6; + --color-state-selected-primary-border: #0366d6; + --color-state-selected-primary-text: #fff; + --color-state-selected-primary-icon: #fff; + --color-state-focus-border: #0366d6; + --color-state-focus-shadow: 0 0 0 3px rgba(3,102,214,0.3); + --color-fade-black-10: rgba(27,31,35,0.1); + --color-fade-black-15: rgba(27,31,35,0.15); + --color-fade-black-30: rgba(27,31,35,0.3); + --color-fade-black-50: rgba(27,31,35,0.5); + --color-fade-black-70: rgba(27,31,35,0.7); + --color-fade-black-85: rgba(27,31,35,0.85); + --color-fade-white-10: hsla(0,0%,100%,0.1); + --color-fade-white-15: hsla(0,0%,100%,0.15); + --color-fade-white-30: hsla(0,0%,100%,0.3); + --color-fade-white-50: hsla(0,0%,100%,0.5); + --color-fade-white-70: hsla(0,0%,100%,0.7); + --color-fade-white-85: hsla(0,0%,100%,0.85); + --color-alert-info-text: #24292e; + --color-alert-info-icon: rgba(4,66,137,0.6); + --color-alert-info-bg: #dbedff; + --color-alert-info-border: rgba(4,66,137,0.2); + --color-alert-warn-text: #24292e; + --color-alert-warn-icon: #b08800; + --color-alert-warn-bg: #fffbdd; + --color-alert-warn-border: rgba(176,136,0,0.2); + --color-alert-error-text: #24292e; + --color-alert-error-icon: rgba(158,28,35,0.6); + --color-alert-error-bg: #ffe3e6; + --color-alert-error-border: rgba(158,28,35,0.2); + --color-alert-success-text: #24292e; + --color-alert-success-icon: rgba(23,111,44,0.8); + --color-alert-success-bg: #dcffe4; + --color-alert-success-border: rgba(23,111,44,0.2); + --color-autocomplete-bg: #fff; + --color-autocomplete-border: #e1e4e8; + --color-autocomplete-shadow: 0 3px 6px rgba(149,157,165,0.15); + --color-autocomplete-row-border: #eaecef; + --color-blankslate-icon: #a3aab1; + --color-btn-bg: #fafbfc; + --color-btn-border: rgba(27,31,35,0.15); + --color-btn-text: #24292e; + --color-btn-ic: #6a737d; + --color-btn-shadow: 0 1px 0 rgba(27,31,35,0.04); + --color-btn-shadow-highlight: inset 0 1px 0 hsla(0,0%,100%,0.25); + --color-btn-bg-hover: #f3f4f6; + --color-btn-bg-active: #edeff2; + --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(27,31,35,0.15); + --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(3,102,214,0.3); + --color-btn-primary-bg: #2ea44f; + --color-btn-primary-border: rgba(27,31,35,0.15); + --color-btn-primary-border-disabled: rgba(27,31,35,0.1); + --color-btn-primary-text: #fff; + --color-btn-primary-ic: hsla(0,0%,100%,0.8); + --color-btn-primary-shadow: 0 1px 0 rgba(27,31,35,0.1); + --color-btn-primary-shadow-highlight: inset 0 1px 0 hsla(0,0%,100%,0.03); + --color-btn-primary-shadow-selected: inset 0 1px 0 rgba(20,70,32,0.2); + --color-btn-primary-bg-hover: #2c974b; + --color-btn-primary-bg-active: #2a8f47; + --color-btn-primary-bg-disabled: #94d3a2; + --color-btn-primary-disabled-text: hsla(0,0%,100%,0.8); + --color-btn-primary-disabled-shadow: 0 0 0 3px rgba(46,164,79,0.4); + --color-btn-primary-counter-bg: hsla(0,0%,100%,0.2); + --color-btn-inverse-on-hover-border: rgba(27,31,35,0.15); + --color-btn-inverse-on-hover-shadow: 0 1px 0 rgba(27,31,35,0.1); + --color-btn-inverse-on-hover-shadow-inset: inset 0 1px 0 hsla(0,0%,100%,0.03); + --color-btn-inverse-on-hover-counter-bg: hsla(0,0%,100%,0.2); + --color-btn-danger-text: #d73a49; + --color-btn-danger-text-disabled: rgba(215,58,73,0.5); + --color-btn-danger-bg-hover: #cb2431; + --color-btn-danger-bg-active: #be222e; + --color-btn-danger-shadow: inset 0 1px 0 rgba(134,24,29,0.2); + --color-btn-danger-shadow-focus: 0 0 0 3px rgba(203,36,49,0.4); + --color-btn-danger-counter-bg: rgba(215,58,73,0.1); + --color-btn-danger-counter-bg-disabled: rgba(215,58,73,0.05); + --color-btn-outline-text: #0366d6; + --color-btn-outline-text-disabled: rgba(3,102,214,0.5); + --color-btn-outline-bg-hover: #0366d6; + --color-btn-outline-bg-active: #035fc7; + --color-btn-outline-shadow: inset 0 1px 0 rgba(5,38,76,0.2); + --color-btn-outline-shadow-focus: 0 0 0 3px rgba(0,92,197,0.4); + --color-btn-outline-counter-bg: rgba(3,102,214,0.1); + --color-btn-outline-counter-bg-disabled: rgba(3,102,214,0.05); + --color-btn-counter-bg: rgba(27,31,35,0.08); + --color-counter-text: #24292e; + --color-counter-bg: rgba(209,213,218,0.5); + --color-counter-primary-text: #fff; + --color-counter-primary-bg: #6a737d; + --color-counter-secondary-text: #6a737d; + --color-dropdown-bg: #fff; + --color-dropdown-border: #e1e4e8; + --color-dropdown-shadow: 0 8px 24px rgba(149,157,165,0.2); + --color-label-border: #e1e4e8; + --color-label-primary-text: #24292e; + --color-label-primary-border: #6a737d; + --color-label-secondary-text: #586069; + --color-label-secondary-border: #e1e4e8; + --color-label-info-text: #0366d6; + --color-label-info-border: #0366d6; + --color-label-success-text: #22863a; + --color-label-success-border: #28a745; + --color-label-warning-text: #735c0f; + --color-label-warning-border: #b08800; + --color-label-danger-text: #d73a49; + --color-label-danger-border: #cb2431; + --color-topic-tag-bg: #f1f8ff; + --color-topic-tag-border: #f1f8ff; + --color-topic-tag-text: #0366d6; + --color-input-bg: #fff; + --color-input-contrast-bg: #fafbfc; + --color-input-border: #e1e4e8; + --color-input-shadow: inset 0 1px 2px rgba(27,31,35,0.075); + --color-input-disabled-bg: #fff; + --color-input-disabled-border: #e1e4e8; + --color-input-warning-border: #f9c513; + --color-input-error-border: #cb2431; + --color-input-tooltip-success-text: #144620; + --color-input-tooltip-success-bg: #dcffe4; + --color-input-tooltip-success-border: #34d058; + --color-input-tooltip-warning-text: #735c0f; + --color-input-tooltip-warning-bg: #fff5b1; + --color-input-tooltip-warning-border: #f9c513; + --color-input-tooltip-error-text: #86181d; + --color-input-tooltip-error-bg: #ffeef0; + --color-input-tooltip-error-border: #f97583; + --color-avatar-border: transparent; + --color-avatar-stack-fade: #d1d5da; + --color-avatar-stack-fade-more: #e1e4e8; + --color-avatar-child-shadow: -2px -2px 0 hsla(0,0%,100%,0.8); + --color-toast-ic-bg-loading: #586069; + --color-timeline-text: #444d56; + --color-timeline-badge-bg: #e1e4e8; + --color-timeline-target-badge-border: #2188ff; + --color-timeline-target-badge-shadow: #c8e1ff; + --color-select-menu-bg: #fff; + --color-select-menu-border: #e1e4e8; + --color-select-menu-border-secondary: #eaecef; + --color-select-menu-shadow: 0 0 18px rgba(27,31,35,0.4); + --color-select-menu-backdrop-bg: rgba(27,31,35,0.5); + --color-select-menu-backdrop-border: transparent; + --color-select-menu-tap-highlight: rgba(209,213,218,0.5); + --color-select-menu-tap-focus-bg: #dbedff; + --color-box-blue-border: #c8e1ff; + --color-box-row-yellow-bg: #fffbdd; + --color-box-row-blue-bg: #f1f8ff; + --color-box-header-blue-bg: #f1f8ff; + --color-box-header-blue-border: #c8e1ff; + --color-popover-border: rgba(27,31,35,0.15); + --color-branch-name-text: rgba(27,31,35,0.6); + --color-branch-name-icon: #a8bbd0; + --color-branch-name-bg: #eaf5ff; + --color-branch-name-link-text: #0366d6; + --color-branch-name-link-icon: #a8bbd0; + --color-branch-name-link-bg: #eaf5ff; + --color-markdown-code-bg: rgba(27,31,35,0.05); + --color-markdown-frame-border: #dfe2e5; + --color-markdown-blockquote-border: #dfe2e5; + --color-markdown-table-border: #dfe2e5; + --color-markdown-table-tr-border: #c6cbd1; + --color-menu-heading-text: #24292e; + --color-menu-border-active: #f9826c; + --color-sidenav-selected-bg: #fff; + --color-sidenav-border-active: #f9826c; + --color-tabnav-selected-bg: #fff; + --color-header-text: hsla(0,0%,100%,0.7); + --color-header-bg: #24292e; + --color-header-logo: #fff; + --color-filter-item-bar-bg: #eff3f6; + --color-hidden-text-expander-bg: #dfe2e5; + --color-hidden-text-expander-bg-hover: #c6cbd1; + --color-drag-and-drop-border: #c3c8cf; + --color-upload-enabled-border: #dfe2e5; + --color-upload-enabled-border-focused: #4a9eff; + --color-previewable-comment-form-border: #c3c8cf; + --color-previewable-comment-form-bg: #fff; + --color-underlinenav-border: rgba(209,213,218,0); + --color-underlinenav-border-hover: #d1d5da; + --color-underlinenav-border-active: #f9826c; + --color-underlinenav-text: #24292e; + --color-underlinenav-text-hover: #24292e; + --color-underlinenav-text-active: #24292e; + --color-underlinenav-icon: #959da5; + --color-underlinenav-icon-hover: #959da5; + --color-underlinenav-icon-active: #24292e; + --color-underlinenav-counter-text: #24292e; + --color-social-count-bg: #fff; + --color-header-search-bg: #24292e; + --color-header-search-border: #444d56; + --color-icon-folder: #79b8ff; + --color-hl-author-bg: #f1f8ff; + --color-hl-author-border: #c8e1ff; + --color-logo-subdued: #d1d5da; + --color-discussion-border: #a2cbac; + --color-diff-neutral-bg: #d1d5da; + --color-diff-neutral-border: #d1d5da; + --color-diff-deletion-bg: #d73a49; + --color-diff-deletion-bg-strong: #1b1f23; + --color-diff-deletion-border: #d73a49; + --color-diff-deletion-border-strong: #1b1f23; + --color-diff-addition-bg: #28a745; + --color-diff-addition-bg-strong: #1b1f23; + --color-diff-addition-border: #28a745; + --color-diff-addition-border-strong: #1b1f23; + --color-global-nav-logo: #fff; + --color-global-nav-bg: #24292e; + --color-global-nav-text: #fff; + --color-global-nav-icon: #fff; + --color-global-nav-input-bg: #fafbfc; + --color-global-nav-input-border: #fafbfc; + --color-global-nav-input-icon: #d1d5da; + --color-global-nav-input-placeholder: #959da5; + --color-calendar-graph-day-bg: #ebedf0; + --color-calendar-graph-day-border: rgba(27,31,35,0.06); + --color-calendar-graph-day-L1-bg: #9be9a8; + --color-calendar-graph-day-L2-bg: #40c463; + --color-calendar-graph-day-L3-bg: #30a14e; + --color-calendar-graph-day-L4-bg: #216e39; + --color-calendar-graph-day-L4-border: rgba(27,31,35,0.06); + --color-calendar-graph-day-L3-border: rgba(27,31,35,0.06); + --color-calendar-graph-day-L2-border: rgba(27,31,35,0.06); + --color-calendar-graph-day-L1-border: rgba(27,31,35,0.06); + --color-calendar-halloween-graph-day-L1-bg: #ffee4a; + --color-calendar-halloween-graph-day-L2-bg: #ffc501; + --color-calendar-halloween-graph-day-L3-bg: #fe9600; + --color-calendar-halloween-graph-day-L4-bg: #03001c; + --color-footer-invertocat-octicon: #d1d5da; + --color-footer-invertocat-octicon-hover: #6a737d; + --color-pr-state-draft-text: #fff; + --color-pr-state-draft-bg: #6a737d; + --color-pr-state-draft-border: transparent; + --color-pr-state-open-text: #fff; + --color-pr-state-open-bg: #28a745; + --color-pr-state-open-border: transparent; + --color-pr-state-merged-text: #fff; + --color-pr-state-merged-bg: #6f42c1; + --color-pr-state-merged-border: transparent; + --color-pr-state-closed-text: #fff; + --color-pr-state-closed-bg: #d73a49; + --color-pr-state-closed-border: transparent; +} + +.ContributionCalendar-day, +.ContributionCalendar-day[data-level="0"] { + fill: var(--color-calendar-graph-day-bg); + shape-rendering: geometricPrecision; + background-color: var(--color-calendar-graph-day-bg); + shape-rendering: geometricPrecision; + border-radius: 2px; + outline: 1px solid var(--color-calendar-graph-day-border); + outline-offset: -1px; +} + +.ContributionCalendar-day[data-level="1"] { + background-color: var(--color-calendar-graph-day-L1-bg); + outline: 1px solid var(--color-calendar-graph-day-L1-border); +} + +.ContributionCalendar-day[data-level="2"] { + background-color: var(--color-calendar-graph-day-L2-bg); + outline: 1px solid var(--color-calendar-graph-day-L2-border); +} + +.ContributionCalendar-day[data-level="3"] { + background-color: var(--color-calendar-graph-day-L3-bg); + outline: 1px solid var(--color-calendar-graph-day-L3-border); +} + +.ContributionCalendar-day[data-level="4"] { + background-color: var(--color-calendar-graph-day-L4-bg); + outline: 1px solid var(--color-calendar-graph-day-L4-border); +} + +.ContributionCalendar[data-holiday=halloween].ContributionCalendar-day[data-level="1"] { + background-color: var(--color-calendar-halloween-graph-day-L1-bg); +} + +.ContributionCalendar[data-holiday=halloween].ContributionCalendar-day[data-level="2"] { + background-color: var(--color-calendar-halloween-graph-day-L2-bg); +} + +.ContributionCalendar[data-holiday=halloween].ContributionCalendar-day[data-level="3"] { + background-color: var(--color-calendar-halloween-graph-day-L3-bg); +} + +.ContributionCalendar[data-holiday=halloween].ContributionCalendar-day[data-level="4"] { + background-color: var(--color-calendar-halloween-graph-day-L4-bg); +} + +.ContributionCalendar-label { + font-size: 0.625rem; +} + +.github-grass { + overflow-x: auto; +} + +.ContributionCalendar-grid, +.user-grass__image { + border-spacing: 3px !important; + border-collapse: separate; + overflow: hidden; + position: relative; + color: var(--default-text); + min-width: 707px; + transform: scale(0.75); + margin: -0.8rem -5.5rem -0.8rem -5.3rem; +} +.ContributionCalendar-grid thead tr:first-child td:first-child, +.user-grass__image thead tr:first-child td:first-child { + width: 0.75rem !important; +} + +.ContributionCalendar-label:first-child span { + right: 2px; + bottom: 0 !important; +} + +/*# sourceMappingURL=_github.css.map */ diff --git a/app/assets/stylesheets/modules/_multiselect.css b/app/assets/stylesheets/modules/_multiselect.css new file mode 100644 index 00000000000..c9e79405d54 --- /dev/null +++ b/app/assets/stylesheets/modules/_multiselect.css @@ -0,0 +1,71 @@ +.multiselect { + position: absolute; + left: 0; + top: 0; + right: 0; +} + +.multiselect.book { + position: initial; +} + +.multiselect__single { + position: relative; + z-index: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; +} + +.multiselect__content-wrapper { + overflow-y: scroll; + background-color: var(--base); + border: solid 1px var(--border); + border-bottom-left-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; +} + +.multiselect--active { + overflow-y: hidden !important; +} + +.multiselect__content { + display: block !important; +} + +.multiselect__element { + font-size: 0.875rem; +} +.multiselect__element:not(:first-child) { + border-top: solid 1px var(--border); +} +.multiselect__element > span { + display: flex; + height: 2.75rem; + padding-inline: 0.75rem; + align-items: center; + cursor: pointer; + transition: all 0.2s ease-out; +} +.multiselect__element > span:hover { + background-color: var(--background-tint); +} +.multiselect__element > span > span { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; +} + +.multiselect__option--selected { + pointer-events: none; + background-color: #fff5db; +} + +@media (max-width: 47.9375em) { + .multiselect__element { + font-size: 1rem; + } +} diff --git a/app/assets/stylesheets/modules/_select2.css b/app/assets/stylesheets/modules/_select2.css new file mode 100644 index 00000000000..302dc0f3fd5 --- /dev/null +++ b/app/assets/stylesheets/modules/_select2.css @@ -0,0 +1,403 @@ +.select2-container { + display: inline-block; + position: relative; + vertical-align: middle; + max-width: 100%; +} +.form-item .select2-container { + width: 100% !important; +} + +.select2-selection { + cursor: pointer; + display: block; + min-height: 2.25rem; +} + +.select2-selection__rendered { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 0.8125rem; + line-height: 1; +} + +.select2-search { + line-height: 28px; +} + +.select2-selection--single { + height: 2.25rem; + user-select: none; + -webkit-user-select: none; +} + +.select2-selection--single .select2-selection__rendered { + display: block; + padding-left: 1em; + padding-right: 2em; +} + +.select2-selection--single .select2-selection__clear { + position: relative; +} + +.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered { + padding-right: 1em; + padding-left: 2em; +} + +.select2-selection--multiple { + user-select: none; + -webkit-user-select: none; +} + +.select2-selection--multiple .select2-selection__rendered { + display: inline-block; + padding-left: 8px; +} + +.select2-search--inline .select2-search__field { + border: none; + font-size: 100%; + margin-top: 5px; + padding: 0; +} + +.select2-search--inline .select2-search__field::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +.select2-dropdown { + background-color: white; + border: 1px solid var(--background-shade); + border-radius: 4px; + display: block; + position: absolute; + left: -100000px; + width: 100%; + z-index: 1051; +} + +.select2-results__option { + font-size: 0.8125rem; + line-height: 1.5; + padding: 6px; + user-select: none; + -webkit-user-select: none; + transition: all 0.1s ease-out; +} +.select2-results__option:not(:last-child) { + border-bottom: dashed 1px var(--background); +} + +.select2-results__option[aria-selected] { + cursor: pointer; +} + +.select2-results__message { + text-align: center; +} + +.select2-container--open .select2-dropdown { + left: 0; +} + +.select2-container--open .select2-dropdown--above { + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-container--open .select2-dropdown--below { + border-top: none; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.select2-search--dropdown { + display: block; + padding: 0.5rem; + border-bottom: solid 1px var(--background-shade); +} + +.select2-search--dropdown .select2-search__field { + padding: 4px; + width: 100%; +} + +.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +.select2-search--dropdown.select2-search--hide { + display: none; +} + +.select2-close-mask { + display: block; + position: fixed; + left: 0; + top: 0; + min-height: 100%; + min-width: 100%; + height: auto; + width: auto; + opacity: 0; + z-index: 99; + background-color: #fff; + filter: alpha(opacity=0); +} + +.select2-hidden-accessible { + border: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(50%) !important; + clip-path: inset(50%) !important; + height: 1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + width: 1px !important; + white-space: nowrap !important; +} + +@media (max-width: 47.9375em) { + .select2-search { + flex: 0 0 100%; + } +} +.select2-container--default .select2-selection--single { + background-color: #fff; + border: 1px solid var(--background-shade); + border-radius: 4px; + outline: 0; +} + +.select2-container--default .select2-selection--single .select2-selection__rendered { + color: #444; + line-height: 2.25rem; +} + +.select2-container--default .select2-selection--single .select2-selection__clear { + cursor: pointer; + float: right; + font-weight: bold; +} + +.select2-container--default .select2-selection--single .select2-selection__placeholder { + color: #999; +} + +.select2-container--default .select2-selection--single .select2-selection__arrow { + height: 2.25rem; + 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; + width: 0; + height: 0; + margin-left: -4px; + margin-top: -2px; + left: 50%; + position: absolute; + top: 50%; +} + +.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear { + float: left; +} + +.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow { + left: 1px; + right: auto; +} + +.select2-container--default.select2-container--disabled .select2-selection--single { + background-color: #eee; + cursor: default; +} + +.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { + display: none; +} + +.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { + border-color: transparent transparent #888 transparent; + border-width: 0 4px 5px 4px; +} + +.select2-container--default .select2-selection--multiple { + background-color: white; + border: 1px solid var(--background-shade); + border-radius: 4px; + cursor: text; +} + +.select2-container--default .select2-selection--multiple .select2-selection__rendered { + padding: 0.125rem 0.5rem; + width: 100%; + display: flex; + flex-wrap: wrap; + margin: 0 -0.25rem; +} + +.select2-container--default .select2-selection--multiple .select2-selection__placeholder { + color: #999; + margin-top: 5px; +} + +.select2-container--default .select2-selection--multiple .select2-selection__clear { + cursor: pointer; + float: right; + font-weight: bold; + margin-top: 5px; + margin-right: 10px; +} + +.select2-container--default .select2-selection--multiple .select2-selection__choice { + background-color: rgb(236.55738, 236.13255, 248.87745); + border: 1px solid hsl(242, 51%, 51%); + color: hsl(242, 51%, 51%); + border-radius: 4px; + cursor: default; + margin: 0.125rem 0.25rem; + padding-right: 0.5rem; + display: flex; + align-items: center; + height: 1.75rem; + max-width: 100%; + overflow: hidden; +} + +.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { + cursor: pointer; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 100%; + flex: 0 0 1.5rem; + margin-right: 0.5rem; + font-size: 1.125rem; + display: flex; + font-weight: 700; + color: var(--reversal-text); + background-color: hsl(242, 51%, 51%); +} +.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { + background-color: rgb(107.45904, 104.0604, 206.0196); +} + +.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; +} + +.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice { + margin-inline: 5px auto; +} + +.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove { + margin-inline: 2px auto; +} + +.select2-container--default.select2-container--focus .select2-selection--multiple { + outline: 0; +} + +.select2-container--default.select2-container--disabled .select2-selection--multiple { + background-color: #eee; + cursor: default; +} + +.select2-container--default.select2-container--disabled .select2-selection__choice__remove { + display: none; +} + +.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-container--default .select2-search--dropdown .select2-search__field { + border: 1px solid var(--background-shade); +} + +.select2-container--default .select2-search--inline .select2-search__field { + background: transparent; + border: none; + outline: 0; + box-shadow: none; + -webkit-appearance: textfield; +} + +.select2-container--default .select2-results > .select2-results__options { + max-height: 200px; + overflow-y: auto; +} + +.select2-container--default .select2-results__option[role=group] { + padding: 0; +} + +.select2-container--default .select2-results__option[aria-disabled=true] { + color: #999; +} + +.select2-container--default .select2-results__option[aria-selected=true] { + background-color: var(--background-shade); +} + +.select2-container--default .select2-results__option .select2-results__option { + padding-left: 1em; +} + +.select2-container--default .select2-results__option .select2-results__option .select2-results__group { + padding-left: 0; +} + +.select2-container--default .select2-results__option .select2-results__option .select2-results__option { + margin-left: -1em; + padding-left: 2em; +} + +.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { + margin-left: -2em; + padding-left: 3em; +} + +.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { + margin-left: -3em; + padding-left: 4em; +} + +.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { + margin-left: -4em; + padding-left: 5em; +} + +.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { + margin-left: -5em; + padding-left: 6em; +} + +.select2-container--default .select2-results__option--highlighted[aria-selected] { + background-color: rgba(70.5738, 66.3255, 193.7745, 0.8); + color: var(--reversal-text); +} + +.select2-container--default .select2-results__group { + cursor: default; + display: block; + padding: 6px; +} diff --git a/app/assets/stylesheets/modules/_stripe.css b/app/assets/stylesheets/modules/_stripe.css new file mode 100644 index 00000000000..24a28f73c25 --- /dev/null +++ b/app/assets/stylesheets/modules/_stripe.css @@ -0,0 +1,27 @@ +.StripeElement { + background-color: var(--base); + height: 40px; + padding: 10px 12px; + border-radius: 0.25rem; + box-shadow: 0 1px 3px 0 #e6ebf1; + transition: box-shadow 150ms ease; +} + +.StripeElement--focus { + box-shadow: 0 1px 3px 0 #cfd7df; +} + +.StripeElement--invalid { + border-color: var(--danger); +} + +.StripeElement--webkit-autofill { + background-color: #fefde5 !important; +} + +#card-errors { + color: var(--danger); + font-size: 0.875rem; + line-height: 1.4; + margin-top: 0.25em; +} diff --git a/app/assets/stylesheets/modules/_tagify.css b/app/assets/stylesheets/modules/_tagify.css new file mode 100644 index 00000000000..f0d34afa820 --- /dev/null +++ b/app/assets/stylesheets/modules/_tagify.css @@ -0,0 +1,20 @@ +body .tagify { + display: flex !important; + align-items: center; + padding: 0.5rem; + gap: 0.5rem; + --tag-bg: var(--background-semi-shade); + --tag-inset-shadow-size: 2em; + --tag-text-color: var(--default-text); + --tag-text-color--edit: var(--default-text); + --tag-hover: var(--success-tint); + --tag-invalid-color: var(--danger-text); + --tag-invalid-bg: var(--danger-tint); + --tag-remove-bg: var(--danger-tint); + --tag-remove-btn-color: var(--muted-text); + --tag-remove-btn-bg--hover: var(--danger); +} +body .tagify__input, +body .tagify__tag { + margin: 0; +} diff --git a/app/assets/stylesheets/modules/_toasts.css b/app/assets/stylesheets/modules/_toasts.css new file mode 100644 index 00000000000..ddbe0ab8a90 --- /dev/null +++ b/app/assets/stylesheets/modules/_toasts.css @@ -0,0 +1,199 @@ +@keyframes swal2-toast-show { + 0% { + transform: translateY(0) rotateZ(0deg); + opacity: 0; + } + 33% { + transform: translateY(0) rotateZ(0deg); + } + 66% { + transform: translateY(0) rotateZ(0deg); + } + 100% { + transform: translateY(0) rotateZ(0deg); + opacity: 1; + } +} +@keyframes swal2-toast-hide { + 100% { + transform: rotateZ(0deg); + opacity: 0; + } +} +.swal2-popup.swal2-toast { + box-sizing: border-box; + grid-column: 1/4 !important; + grid-row: 1/4 !important; + grid-template-columns: 1fr 99fr 1fr; + padding: 1em; + overflow-y: hidden; + background: rgba(76.2195, 173.6805, 124.95, 0.9); + box-shadow: none; + pointer-events: none; +} +.swal2-popup.swal2-toast > * { + grid-column: 2; +} +.swal2-popup.swal2-toast .swal2-title { + margin: 0; + padding: 0; + font-size: 0.875rem; + text-align: initial; + color: var(--reversal-text); +} +.swal2-popup.swal2-toast .swal2-loading { + justify-content: center; +} +.swal2-popup.swal2-toast .swal2-input { + height: 2em; + margin: 0.5em; + font-size: 1em; +} +.swal2-popup.swal2-toast .swal2-validation-message { + font-size: 1em; +} +.swal2-popup.swal2-toast .swal2-footer { + margin: 0.5em 0 0; + padding: 0.5em 0 0; + font-size: 0.8em; +} +.swal2-popup.swal2-toast .swal2-close { + grid-column: 3/3; + grid-row: 1/99; + align-self: center; + width: 0.8em; + height: 0.8em; + margin: 0; + font-size: 2em; +} +.swal2-popup.swal2-toast .swal2-html-container { + margin: 1em; + padding: 0; + font-size: 1em; + text-align: initial; +} +.swal2-popup.swal2-toast .swal2-html-container:empty { + padding: 0; +} +.swal2-popup.swal2-toast .swal2-loader { + grid-column: 1; + grid-row: 1/99; + align-self: center; + width: 2em; + height: 2em; + margin: 0.25em; +} +.swal2-popup.swal2-toast .swal2-icon { + grid-column: 1; + grid-row: 1/99; + align-self: center; + width: 2em; + min-width: 2em; + height: 2em; + margin: 0 0.5em 0 0; +} +.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content { + display: flex; + align-items: center; + font-size: 1.8em; + font-weight: bold; +} +.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring { + width: 2em; + height: 2em; +} +.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] { + top: 0.875em; + width: 1.375em; +} +.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] { + left: 0.3125em; +} +.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] { + right: 0.3125em; +} +.swal2-popup.swal2-toast .swal2-actions { + justify-content: flex-start; + height: auto; + margin: 0; + margin-top: 0.3125em; + padding: 0; +} +.swal2-popup.swal2-toast .swal2-styled { + margin: 0.25em 0.5em; + padding: 0.4em 0.6em; + font-size: 1em; +} +.swal2-popup.swal2-toast .swal2-styled:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(100, 150, 200, 0.5); +} +.swal2-popup.swal2-toast .swal2-success { + border-color: #a5dc86; +} +.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line] { + position: absolute; + width: 1.6em; + height: 3em; + transform: rotate(45deg); + border-radius: 50%; +} +.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left] { + top: -0.8em; + left: -0.5em; + transform: rotate(-45deg); + transform-origin: 2em 2em; + border-radius: 4em 0 0 4em; +} +.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right] { + top: -0.25em; + left: 0.9375em; + transform-origin: 0 1.5em; + border-radius: 0 4em 4em 0; +} +.swal2-popup.swal2-toast .swal2-success .swal2-success-ring { + width: 2em; + height: 2em; +} +.swal2-popup.swal2-toast .swal2-success .swal2-success-fix { + top: 0; + left: 0.4375em; + width: 0.4375em; + height: 2.6875em; +} +.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line] { + height: 0.3125em; +} +.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip] { + top: 1.125em; + left: 0.1875em; + width: 0.75em; +} +.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long] { + top: 0.9375em; + right: 0.1875em; + width: 1.375em; +} +.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip { + animation: swal2-toast-animate-success-line-tip 0.75s; +} +.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long { + animation: swal2-toast-animate-success-line-long 0.75s; +} +.swal2-popup.swal2-toast.swal2-show { + animation: swal2-toast-show 0.5s; +} +body.is-text .swal2-popup.swal2-toast.swal2-show { + animation: none; +} +.swal2-popup.swal2-toast.swal2-hide { + animation: swal2-toast-hide 0.1s forwards; +} +body.is-text .swal2-popup.swal2-toast.swal2-hide { + animation: none; +} +.swal2-popup.swal2-toast.is-success { + background: rgba(76.2195, 173.6805, 124.95, 0.9); +} +.swal2-popup.swal2-toast.is-error { + background: rgba(245.31, 70.89, 102.867, 0.9); +} diff --git a/app/assets/stylesheets/not-logged-in.css b/app/assets/stylesheets/not-logged-in.css new file mode 100644 index 00000000000..d49fa9543c1 --- /dev/null +++ b/app/assets/stylesheets/not-logged-in.css @@ -0,0 +1,17 @@ +@import "tailwindcss" source(none); +@source "../../views/**/*.slim"; +@source "../../components/**/*.slim"; +@source "../../../app/javascript/**/*.{js,vue,jsx}"; +@source "./**/*.css"; + +@theme { + --container-*: initial; +} + +@import "./common-imports.css"; +@import "./not-logged-in/base/_base.css"; +@import "./not-logged-in/_not-logged-in-wrapper.css"; +@import "./not-logged-in/_completion.css"; +@import "./not-logged-in/_unauthorized.css"; +@import "./not-logged-in/_unauthorized-header.css"; +@import "./not-logged-in/_join-us-nav.css"; diff --git a/app/assets/stylesheets/not-logged-in/_completion.css b/app/assets/stylesheets/not-logged-in/_completion.css new file mode 100644 index 00000000000..ffccccf6aee --- /dev/null +++ b/app/assets/stylesheets/not-logged-in/_completion.css @@ -0,0 +1,31 @@ +.completion { + padding-block: 4rem 2rem; +} + +.completion__title { + font-size: 1em; + line-height: 1.4; + text-align: center; + font-weight: 800; + color: var(--reversal-text); + font-family: var(--sans-serif); + font-size: 2rem; +} + +.completion__body { + margin-top: 3rem; +} + +.completion__image { + border-radius: 1rem; + border: solid 0.75rem var(--completion-dark); +} + +@media (max-width: 47.9375em) { + .completion__title { + font-size: 1.5rem; + } + .completion__image { + border: solid 0.5rem var(--completion-dark); + } +} diff --git a/app/assets/stylesheets/not-logged-in/_join-us-nav.css b/app/assets/stylesheets/not-logged-in/_join-us-nav.css new file mode 100644 index 00000000000..3fc0bb18e50 --- /dev/null +++ b/app/assets/stylesheets/not-logged-in/_join-us-nav.css @@ -0,0 +1,20 @@ +.join-us-nav__items { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; +} + +.join-us-nav__item { + width: 100%; + display: flex; + justify-content: center; +} +.join-us-nav__item.is-main .join-us-nav__item-link { + width: 22.5rem; + max-width: 100%; +} +.join-us-nav__item.is-sub { + text-align: center; +} diff --git a/app/assets/stylesheets/not-logged-in/_not-logged-in-wrapper.css b/app/assets/stylesheets/not-logged-in/_not-logged-in-wrapper.css new file mode 100644 index 00000000000..9ab226abacf --- /dev/null +++ b/app/assets/stylesheets/not-logged-in/_not-logged-in-wrapper.css @@ -0,0 +1,55 @@ +.not-logged-in-wrapper { + min-height: 100vh; + display: flex; + flex-direction: column; +} +.not-logged-in-wrapper::before { + 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; + z-index: 1; + z-index-width: 100%; + height: 100%; + opacity: 0.075; + background-size: 22rem auto; +} +body.is-completion .not-logged-in-wrapper::before { + content: ""; + background-image: url("https://bootcamp.fjord.jp/images/background/completion_background.svg"); + background-repeat: repeat; + background-repeat-position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 1; + z-index-width: 100%; + height: 100%; + opacity: 0.075; + background-size: 16rem auto; +} + +.not-logged-in-wrapper__start { + flex: 1; + position: relative; + z-index: 2; +} + +.not-logged-in-wrapper__end { + position: relative; + z-index: 2; +} + +@media (max-width: 47.9375em) { + .not-logged-in-wrapper::before { + background-size: 16rem auto; + } + body.is-completion .not-logged-in-wrapper::before { + background-size: auto; + } +} diff --git a/app/assets/stylesheets/not-logged-in/_unauthorized-header.css b/app/assets/stylesheets/not-logged-in/_unauthorized-header.css new file mode 100644 index 00000000000..ee19ae897d7 --- /dev/null +++ b/app/assets/stylesheets/not-logged-in/_unauthorized-header.css @@ -0,0 +1,39 @@ +.unauthorized-header__image { + display: block; + margin-inline: auto; + max-width: 6rem; + margin-bottom: 0.75rem; +} + +.unauthorized-header__titles { + color: var(--reversal-text); + font-family: var(--sans-serif); + text-align: center; +} + +.unauthorized-header__title-label { + display: block; + font-weight: 700; + font-size: 1.25rem; +} + +.unauthorized-header__title { + font-size: 1em; + line-height: 1.4; + font-weight: 800; + margin-top: 0.25em; + font-size: 2rem; +} + +@media (max-width: 47.9375em) { + .unauthorized-header__image { + max-width: 4.5rem; + margin-bottom: 0.5rem; + } + .unauthorized-header__title-label { + font-size: 0.875rem; + } + .unauthorized-header__title { + font-size: 1.5rem; + } +} diff --git a/app/assets/stylesheets/not-logged-in/_unauthorized.css b/app/assets/stylesheets/not-logged-in/_unauthorized.css new file mode 100644 index 00000000000..07f77c490cb --- /dev/null +++ b/app/assets/stylesheets/not-logged-in/_unauthorized.css @@ -0,0 +1,66 @@ +.unauthorized { + padding-block: 3rem 2rem; +} + +.unauthorized__body { + margin-top: 3rem; +} + +.unauthorized__contents { + background-color: rgba(0, 0, 0, 0.3); + border-radius: 0.25rem; +} + +.unauthorized__content { + color: var(--reversal-text); + padding: 1.5rem; +} + +.unauthorized__content + .unauthorized__content { + padding-top: 0; +} + +.unauthorized__content-separalor { + border-top: dashed 1px rgba(255, 255, 255, 0.1); +} + +.must-be-enrolled { + font-size: 1rem; + line-height: 1.8; + text-align: center; +} + +.unauthorized-actions__items { + display: flex; + justify-content: center; + gap: 1.5rem; +} + +.unauthorized-actions.is-vertical .unauthorized-actions__items { + flex-direction: column; + align-items: center; +} + +.unauthorized-actions__item { + flex: 1; + max-width: 50%; + text-align: center; +} + +.unauthorized-actions.is-vertical .unauthorized-actions__item { + width: 100%; +} + +@media (max-width: 47.9375em) { + .unauthorized { + padding-block: 2rem; + } + + .unauthorized__body { + margin-top: 2rem; + } + + .unauthorized__content { + padding: 1rem; + } +} diff --git a/app/assets/stylesheets/not-logged-in/base/_base.css b/app/assets/stylesheets/not-logged-in/base/_base.css new file mode 100644 index 00000000000..1baa90e14ea --- /dev/null +++ b/app/assets/stylesheets/not-logged-in/base/_base.css @@ -0,0 +1,12 @@ +html { + font-family: var(--sans-serif); + color: var(--default-text); +} + +body.is-not-logged-in { + background-color: var(--main); +} + +body.is-completion { + background-color: var(--completion); +} diff --git a/app/assets/stylesheets/paper.css b/app/assets/stylesheets/paper.css new file mode 100644 index 00000000000..5f56cef9fe8 --- /dev/null +++ b/app/assets/stylesheets/paper.css @@ -0,0 +1,20 @@ +.book-name { + font-size: 2.3em; + text-align: center; + margin: 9em 0 10em 0; +} + +.book-company_name { + font-size: 1.5em; + text-align: center; +} + +.book-updated { + font-size: 1.5em; + text-align: center; + margin-bottom: 8em; +} + +img { + max-width: 90%; +} diff --git a/app/assets/stylesheets/shared/blocks/_code-toolbar.css b/app/assets/stylesheets/shared/blocks/_code-toolbar.css new file mode 100644 index 00000000000..86b40e12765 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/_code-toolbar.css @@ -0,0 +1,60 @@ +pre.code-toolbar { + position: relative; +} + +pre.code-toolbar > .toolbar { + position: absolute; + top: calc(-1rem + 1px); + right: 0; + transition: opacity 0.3s ease-in-out; +} + +pre.code-toolbar > .toolbar .toolbar-item { + display: inline-block; +} + +pre.code-toolbar > .toolbar .toolbar-item:last-child * { + border-left: none; +} + +pre.code-toolbar > .toolbar a { + cursor: pointer; +} + +pre.code-toolbar > .toolbar button { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; /* for button */ + -moz-user-select: none; + -ms-user-select: none; +} + +pre.code-toolbar > .toolbar a, +pre.code-toolbar > .toolbar button, +pre.code-toolbar > .toolbar span { + font-size: 0.625rem; + height: 1rem; + display: flex; + align-items: center; + justify-content: center; + padding: 0 0.5em; + background-color: #322931; + border-top-left-radius: 0.125rem; + border-top-right-radius: 0.125rem; + text-decoration: none; +} + +:not(pre) > code[class*=language-] { + padding: 0.2em; + padding-top: 1px; + padding-bottom: 1px; + background: #f8f8f8; + border: 1px solid #dddddd; +} + +/*# sourceMappingURL=_code-toolbar.css.map */ diff --git a/app/assets/stylesheets/shared/blocks/_errors.css b/app/assets/stylesheets/shared/blocks/_errors.css new file mode 100644 index 00000000000..1c67eab7f11 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/_errors.css @@ -0,0 +1,45 @@ +.errors { + background-color: var(--danger-tint); + border: solid 1px var(--danger); + margin-bottom: 1.25rem; + max-width: 30rem; + margin-inline: auto; + border-radius: 0.25rem; + padding: 0.875rem 1rem; +} +@media (min-width: 48em) { + .errors { + padding: 1rem 1.5rem; + } +} + +.errors__title { + font-size: 0.875rem; + line-height: 1.45; + margin-top: 0; + margin-bottom: 0.8em; + text-align: center; + font-weight: 600; + color: var(--danger-text); +} +@media (max-width: 47.9375em) { + .errors__title { + font-size: 0.8125rem; + } +} + +.errors__item { + font-size: 0.8125rem; + line-height: 1.6; + margin-top: 0; + margin-bottom: 0.2em; + color: var(--danger-text); +} +@media (max-width: 47.9375em) { + .errors__item { + font-size: 0.75rem; + } +} +.errors__item:last-child { + margin-bottom: 0; +} diff --git a/app/assets/stylesheets/shared/blocks/_flash.css b/app/assets/stylesheets/shared/blocks/_flash.css new file mode 100644 index 00000000000..20f6671e0f9 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/_flash.css @@ -0,0 +1,78 @@ +.flash { + background-color: var(--danger); + padding-block: 0.75rem; +} + +.flash.is-alert { + background-color: var(--danger); +} + +.flash.is-notice { + background-color: var(--success); +} + +input:checked + .flash { + display: none; +} + +.flash__container { + position: relative; +} + +.flash__message { + font-size: 0.875rem; + line-height: 1.4; + text-align: center; + color: var(--reversal-text); +} + +.flash__message a { + text-decoration: none; + cursor: pointer; + color: var(--reversal-text); +} + +.flash__message a:hover, +.flash__message a:active { + text-decoration: underline; +} + +.flash__close { + position: absolute; + right: 0; + top: 50%; + display: flex; + justify-content: center; + align-items: center; + height: 2.75rem; + width: 2.75rem; + transform: translate(0, -50%); + cursor: pointer; + opacity: 0.7; + transition: all 0.2s ease-out; +} + +.flash__close::before, +.flash__close::after { + content: ""; + display: block; + height: 2px; + width: 50%; + background-color: var(--reversal-text); + position: absolute; + left: 50%; + top: 50%; + border-radius: 2px; +} + +.flash__close::before { + transform: translate(-50%, -50%) rotate(45deg); +} + +.flash__close::after { + transform: translate(-50%, -50%) rotate(-45deg); +} + +.flash__close:hover { + opacity: 1; +} diff --git a/app/assets/stylesheets/shared/blocks/_footprints.css b/app/assets/stylesheets/shared/blocks/_footprints.css new file mode 100644 index 00000000000..5a2985a28a5 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/_footprints.css @@ -0,0 +1,70 @@ +.user-icons, +.user-icons__wrapper { + margin-top: 1.5rem; + display: flex; + gap: 0.75rem; +} + +.user-icons__title { + text-align: right; + font-size: 0.875rem; + line-height: 2rem; + font-weight: 600; + white-space: nowrap; +} + +.user-icons__items { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +@media (max-width: 47.9375em) { + .user-icons__items { + margin-top: 0.75rem; + } +} + +.user-icons-item { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.user-icons-item__delete { + font-size: 0.75rem; + line-height: 1.4; +} + +.user-icons__more { + font-size: 0.8125rem; + line-height: 1.4; + display: block; + white-space: nowrap; + color: var(--main); + text-decoration: none; + cursor: pointer; +} +.user-icons__more:hover, .user-icons__more:active { + text-decoration: underline; +} +.user-icons__more { + align-self: center; +} + +@media (max-width: 47.9375em) { + .user-icons, + .user-icons__wrapper { + display: block; + } + .user-icons__title { + text-align: left; + line-height: 1.4; + } + .user-icons__items { + margin-top: 0.75rem; + } + .user-icons__more { + margin-top: 0.75rem; + } +} diff --git a/app/assets/stylesheets/shared/blocks/_global-nav.css b/app/assets/stylesheets/shared/blocks/_global-nav.css new file mode 100644 index 00000000000..52cbfff4d68 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/_global-nav.css @@ -0,0 +1,106 @@ +.global-nav { + background-color: transparent; +} +@media (min-width: 48em) { + .global-nav { + background-color: inherit; + } +} + +.global-nav__background.a-overlay { + background-color: rgba(0, 0, 0, 0.6); + width: 0; + display: inline; +} +input:checked + .global-nav .global-nav__background.a-overlay { + opacity: 1; + width: 100%; + display: block; +} + +@media (min-width: 48em) { + .global-nav__inner { + background-color: var(--main); + height: 100%; + width: var(--global-nav-width); + bottom: 0; + left: 0; + position: fixed; + top: 0; + z-index: 3; + overflow-y: auto; + } +} + +.global-nav-links__link { + position: relative; + display: flex; + text-decoration: none; + white-space: nowrap; + align-items: center; + justify-content: center; + border-bottom: solid 1px var(--main-semi-shade); + color: var(--reversal-text); + transition: color 0.2s ease-in, background-color 0.2s ease-in; + width: 100%; + flex-direction: row; + height: 2.75rem; + padding-inline: 1rem; + justify-content: flex-start; +} +@media (min-width: 48em) { + .global-nav-links__link { + flex-direction: column; + height: 4.125rem; + gap: 0.25rem; + padding-inline: 0; + justify-content: center; + } +} +.global-nav-links__link:hover { + background-color: var(--main-shade); +} +.global-nav-links__link.is-active { + background-color: var(--accent); + color: var(--main); +} + +.global-nav-links__link-icon { + font-size: 1rem; + line-height: 1; + text-align: center; + margin-right: 0.5rem; +} +@media (min-width: 48em) { + .global-nav-links__link-icon { + font-size: 1.125rem; + margin-right: 0; + margin-bottom: 0.25rem; + } +} +.global-nav-links__link-icon .fa-rocket { + font-size: 1.15em; +} + +.global-nav-links__link-label { + font-size: 0.625rem; + line-height: 1.2; + text-align: center; +} +@media (max-width: 47.9375em) { + .global-nav-links__link-label { + font-size: 0.875rem; + } +} +@media (min-width: 48em) { + .global-nav-links__link-label.is-sm { + transform: scale(0.875); + margin-top: -0.125rem; + } +} + +.global-nav__item-count { + position: absolute; + right: 0.25rem; + top: 0.25rem; +} diff --git a/app/assets/stylesheets/shared/blocks/_hour-filter.css b/app/assets/stylesheets/shared/blocks/_hour-filter.css new file mode 100644 index 00000000000..7a19faca7f6 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/_hour-filter.css @@ -0,0 +1,144 @@ +.activity-time-filter { + padding-block: 0.875rem; + border-bottom: solid 1px var(--border); +} + +.activity-time-filter__form { + width: 100%; +} + +.activity-time-filter__controls { + display: flex; + gap: 1rem; + align-items: center; + flex-wrap: wrap; +} + +.dropdown-group { + display: flex; + gap: 0.5rem; + align-items: center; +} + +.dropdown-wrapper { + position: relative; + display: inline-block; +} + +.dropdown-button { + display: block; + text-decoration: none; + font-size: 0.75rem; + line-height: 2.3; + text-align: left; + white-space: nowrap; + color: var(--semi-muted-text); + border: solid 1px var(--border-shade); + border-radius: 20rem; + transition: all 0.2s ease-out; + padding: 0.5rem 1rem; + background-color: var(--background); + cursor: pointer; + display: flex; + align-items: center; + gap: 0.5rem; + min-width: 8rem; +} +.dropdown-button:hover { + background-color: var(--background-semi-shade); +} +.dropdown-button:focus { + outline: none; + box-shadow: 0 0 0 2px var(--main-alpha); +} + +.dropdown-button__text { + flex: 1; +} + +.dropdown-button__icon { + font-size: 0.75rem; + transition: transform 0.2s ease-out; +} + +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + background-color: var(--background); + border: solid 1px var(--border-shade); + border-radius: 0.5rem; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + min-width: 100%; + max-height: 200px; + overflow-y: auto; + opacity: 0; + visibility: hidden; + transform: translateY(-10px); + transition: all 0.2s ease-out; +} +.dropdown-menu.is-open { + opacity: 1; + visibility: visible; + transform: translateY(0); +} +.dropdown-menu.is-open .dropdown-button__icon { + transform: rotate(180deg); +} + +.dropdown-item { + padding: 0.5rem 1rem; + cursor: pointer; + transition: background-color 0.2s ease-out; + font-size: 0.75rem; + line-height: 1.5; + text-align: left; + white-space: nowrap; +} +.dropdown-item:hover { + background-color: var(--background-semi-shade); +} +.dropdown-item:first-child { + border-radius: 0.5rem 0.5rem 0 0; +} +.dropdown-item:last-child { + border-radius: 0 0 0.5rem 0.5rem; +} + +.search-button { + display: block; + text-decoration: none; + font-size: 0.75rem; + line-height: 2.3; + text-align: center; + white-space: nowrap; + background-color: var(--main); + border: solid 1px var(--main); + color: var(--reversal-text); + border-radius: 20rem; + transition: all 0.2s ease-out; + padding: 0.5rem 1.5rem; + cursor: pointer; + display: flex; + align-items: center; + gap: 0.5rem; +} +.search-button:hover { + background-color: var(--main-shade); + border-color: var(--main-shade); +} +.search-button:focus { + outline: none; + box-shadow: 0 0 0 2px var(--main-alpha); +} + +@media (max-width: 768px) { + .activity-time-filter__controls { + flex-direction: column; + gap: 0.75rem; + } + .dropdown-button { + width: 100%; + } +} diff --git a/app/assets/stylesheets/shared/blocks/_modal.css b/app/assets/stylesheets/shared/blocks/_modal.css new file mode 100644 index 00000000000..d0e2e69e53b --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/_modal.css @@ -0,0 +1,171 @@ +.modal { + display: none; + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 100; + padding: 1rem; +} + +input:checked + .modal, +.modal.is-shown { + display: block; +} + +.modal__overlay { + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + background-color: rgba(0, 0, 0, .8); +} + +.modal__description.is-md { + font-size: .875rem; +} + +.modal__description + .modal__description { + margin-top: 1.25em; + padding-top: 1.25em; + border-top: dashed 1px var(--border); +} + +.modal-header { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: solid 1px var(--border-tint); +} + +@media (min-width: 48em) { + .modal-header { + padding: .25rem 1.5rem; + } +} + +@media (max-width: 47.9375em) { + .modal-header { + padding: .25rem 1rem; + } +} + +.modal-header__close { + display: flex; + align-items: center; + justify-content: center; + height: 2.75rem; + width: 2.75rem; + cursor: pointer; + opacity: .4; + transition: all .2s ease-out; + position: relative; +} + +@media (min-width: 48em) { + .modal-header__close { + margin-right: -1.5rem; + } +} + +@media (max-width: 47.9375em) { + .modal-header__close { + margin-right: -1rem; + } +} + +.modal-header__close::before, +.modal-header__close::after { + content: ""; + display: block; + height: 2px; + width: 40%; + background-color: var(--default-text); + left: 50%; + position: absolute; + top: 50%; + border-radius: 2px; +} + +.modal-header__close::before { + transform: translate(-50%, -50%) rotate(45deg); +} + +.modal-header__close::after { + transform: translate(-50%, -50%) rotate(-45deg); +} + +.modal-header__close:hover { + opacity: 1; +} + +.modal-content { + left: 50%; + position: absolute; + top: 50%; + z-index: 1; + transform: translate(-50%, -50%); + background-color: var(--base); + border-radius: .25rem; + width: 40rem; + max-width: calc(100% - 2rem); +} + +.modal-content.is-sm { + width: 24rem; +} + +.modal-content > *:last-child { + border-bottom: none; +} + +.modal-body { + max-height: calc(100vh - 11.5rem); + overflow: auto; + border-bottom: solid 1px var(--border-tint); +} + +@media (min-width: 48em) { + .modal-body { + padding: 1rem 1.5rem; + } +} + +@media (max-width: 47.9375em) { + .modal-body { + padding: 1rem; + } +} + +.modal-title { + font-weight: 600; +} + +@media (min-width: 48em) { + .modal-title { + font-size: 1.25rem; + } +} + +@media (max-width: 47.9375em) { + .modal-title { + font-size: 1rem; + } +} + +.modal-footer { +} + +@media (min-width: 48em) { + .modal-footer { + padding: .25rem 1.5rem; + } +} + +@media (max-width: 47.9375em) { + .modal-footer { + padding: .25rem 1rem; + } +} diff --git a/app/assets/stylesheets/shared/blocks/_not-logged-in-footer.css b/app/assets/stylesheets/shared/blocks/_not-logged-in-footer.css new file mode 100644 index 00000000000..3cd553b1e54 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/_not-logged-in-footer.css @@ -0,0 +1,146 @@ +.not-logged-in-footer { + padding-bottom: 1.5rem; +} + +.not-logged-in-footer .container { + padding-inline: 0; +} + +@media (min-width: 48em) { + .not-logged-in-footer { + padding-block: 3rem; + } + + .not-logged-in-footer .container { + padding-inline: inherit; + } +} + +.not-logged-in-footer__nav { + margin-bottom: 1.5rem; +} + +@media (max-width: 63.9375em) { + .not-logged-in-footer__nav-items { + border-top: solid 1px rgba(225, 225, 229, 0.1); + } +} + +body.is-lp .not-logged-in-footer__nav-items { + border-top: none; +} + +@media (min-width: 48em) { + .not-logged-in-footer__nav-items { + display: flex; + flex-wrap: wrap; + } +} + +@media (min-width: 64em) { + .not-logged-in-footer__nav-items { + gap: 1rem; + justify-content: center; + align-items: center; + } +} + +@media (max-width: 63.9375em) { + .not-logged-in-footer__nav-item { + border-bottom: solid 1px rgba(225, 225, 229, 0.1); + } +} +body.is-lp .not-logged-in-footer__nav-item { + border-color: var(--border); +} + +@media (min-width: 48em) and (max-width: 63.9375em) { + .not-logged-in-footer__nav-item { + flex: 50% 0 0; + } + + .not-logged-in-footer__nav-item:nth-child(odd) { + border-right: solid 1px rgba(225, 225, 229, 0.1); + } +} + +@media (min-width: 64em) { + .not-logged-in-footer__nav-item { + border-bottom: none; + } +} + +.not-logged-in-footer__nav-item-link { + font-size: 0.875rem; + line-height: 1; + color: var(--reversal-text); + text-decoration: none; + cursor: pointer; + display: flex; + align-items: center; + padding-inline: 1rem; + height: 2.75rem; + width: 100%; +} + +.not-logged-in-footer__nav-item-link:hover, +.not-logged-in-footer__nav-item-link:active { + text-decoration: underline; +} + +@media (min-width: 64em) { + .not-logged-in-footer__nav-item-link { + padding-inline: 0; + height: auto; + width: auto; + display: block; + } +} + +.not-logged-in-footer__nav-item-link i { + font-size: 0.75em; + position: relative; + top: -0.0625em; +} + +.not-logged-in-footer__nav-item-link i:first-child { + margin-right: 0.375em; +} + +body.is-lp .not-logged-in-footer__nav-item-link { + color: var(--default-text); +} + +.not-logged-in-footer-copyright { + justify-content: center; + align-items: center; + font-size: 0.875rem; + line-height: 1.4; + display: flex; + color: var(--reversal-text); + gap: 0.25rem; +} + +body.is-lp .not-logged-in-footer-copyright { + color: var(--default-text); +} + +.not-logged-in-footer-copyright__author { + display: block; +} + +.not-logged-in-footer-copyright__author-link { + text-decoration: none; + cursor: pointer; + color: var(--reversal-text); + margin-right: 0.5em; +} + +.not-logged-in-footer-copyright__author-link:hover, +.not-logged-in-footer-copyright__author-link:active { + text-decoration: underline; +} + +body.is-lp .not-logged-in-footer-copyright__author-link { + color: var(--default-text); +} diff --git a/app/assets/stylesheets/shared/blocks/_o-empty-message.css b/app/assets/stylesheets/shared/blocks/_o-empty-message.css new file mode 100644 index 00000000000..c7fd5145542 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/_o-empty-message.css @@ -0,0 +1,21 @@ +.o-empty-message { + max-width: 50rem; + margin-inline: auto; + text-align: center; + color: var(--semi-muted-text); +} +.o-empty-message:not(:first-child) { + margin-top: 1.5rem; +} + +.o-empty-message__icon { + font-size: 5rem; + line-height: 1; +} + +.o-empty-message__text { + font-size: 1rem; + line-height: 1.4; + margin-top: 1em; + text-align: center; +} diff --git a/app/assets/stylesheets/shared/blocks/_page-nav.css b/app/assets/stylesheets/shared/blocks/_page-nav.css new file mode 100644 index 00000000000..5ffbd7ea730 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/_page-nav.css @@ -0,0 +1,197 @@ +.page-nav { + position: static; +} + +@media (min-width: 64em) { + .page-nav { + right: 0; + top: 3.5rem; + position: sticky; + overflow: hidden; + } +} + +.page-nav__title { + font-size: 0.875rem; + line-height: 1.4; + font-weight: 600; +} + +.page-nav__title-inner { + display: block; + text-align: center; + padding: 0.5rem 0.75rem; + color: var(--default-text); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +a.page-nav__title-inner { + text-decoration: none; +} + +a.page-nav__title-inner:hover { + text-decoration: underline; +} + +.page-nav__footer-link { + display: block; + text-decoration: none; + font-size: 0.8125rem; + line-height: 1.4; + text-align: right; + padding: 0.5rem 0.75rem; + color: var(--default-text); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.page-nav__footer-link:hover { + text-decoration: underline; +} + +.page-nav__items { + overflow-y: auto; + position: relative; + z-index: 1; + max-height: 12rem; +} + +@media (min-width: 64em) { + .page-nav__items { + max-height: calc(100vh - 8.5rem); + } +} + +.page-nav__item { + border-bottom: solid 1px var(--border-tint); +} + +.page-nav__item:last-child { + border-bottom: none; +} + +.page-nav__item.is-active .page-nav__item-link { + color: var(--default-text); + font-weight: 700; +} + +.page-nav__item.is-current { + position: relative; + z-index: 1; + box-shadow: 0 0 0 1px var(--primary) inset; + background-color: var(--primary-tint); + border-bottom: none; +} + +.page-nav__item.is-current .page-nav__item-link { + background-color: transparent; + color: var(--primary-text); + pointer-events: none; +} + +.page-nav__item.is-current:not(:last-child) { + margin-bottom: -1px; +} + +.page-nav__item.is-current:last-child { + border-radius: 0 0 0.25rem 0.25rem; +} + +.page-nav__item.is-reply-warning { + position: relative; + z-index: 1; + box-shadow: 0 0 0 1px var(--reply-warning-border) inset; + background-color: var(--reply-warning-background); + border-bottom: none; +} + +.page-nav__item.is-reply-warning .page-nav__item-link { + background-color: transparent; + color: var(--default-text); +} + +.page-nav__item.is-reply-alert { + position: relative; + z-index: 1; + box-shadow: 0 0 0 1px var(--reply-alert-border) inset; + background-color: var(--reply-alert-background); + border-bottom: none; +} + +.page-nav__item.is-reply-alert .page-nav__item-link { + background-color: transparent; + color: var(--reversal-text); +} + +.page-nav__item.is-reply-deadline { + position: relative; + z-index: 1; + box-shadow: 0 0 0 1px var(--reply-deadline-border) inset; + background-color: var(--reply-deadline-background); + border-bottom: none; +} + +.page-nav__item.is-reply-deadline .page-nav__item-link { + background-color: transparent; + color: var(--reversal-text); +} + +.page-nav__item.is-inactive { + position: static; +} + +.page-nav__item.is-inactive:not(:last-child) { + border-bottom: solid 1px var(--border); +} + +.page-nav__item.is-inactive .page-nav__item-link { + background-color: var(--background); + color: var(--muted-text); + pointer-events: none; +} + +.page-nav__item-link { + padding: 0.75rem; + font-size: 0.8125rem; + line-height: 1.4; + color: var(--semi-muted-text); + display: block; + text-decoration: none; + transition: all 0.1s ease-in; + background-color: transparent; +} + +.page-nav__item-link:hover { + color: var(--primary-text); + text-decoration: underline; +} + +.page-nav__item-header .a-badge { + transform: translateY(-0.125em); + margin-right: 0.25rem; +} + +.page-nav__item-title { + font-size: 0.875rem; + line-height: 1.4; + display: inline; + font-weight: 600; +} + +.page-nav-metas { + margin-top: 0.25rem; + font-size: 0.75rem; + display: flex; + flex-wrap: wrap; + gap: 0.25rem 0.75rem; +} + +.page-nav__item-link-inner { + display: flex; + text-decoration: none; + gap: 0.5rem; + align-items: center; +} diff --git a/app/assets/stylesheets/shared/blocks/_page-search.css b/app/assets/stylesheets/shared/blocks/_page-search.css new file mode 100644 index 00000000000..b93f32f1c37 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/_page-search.css @@ -0,0 +1,32 @@ +.page-search { + padding-block: 0.75rem; + border-top: solid 1px var(--border-shade); + border-bottom: solid 1px var(--border-shade); +} + +.page-tabs + .page-search { + padding-block: 0; +} + +.page-search__form { + width: 30rem; + max-width: 100%; + margin-inline: auto; + display: flex; + height: 100%; + align-items: center; + padding-right: 0.75rem; +} + +.page-search__text-input { + height: 2rem; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: none; +} + +.is-icon.page-search__submit { + height: 2rem; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} diff --git a/app/assets/stylesheets/shared/blocks/_page-tags-nav.css b/app/assets/stylesheets/shared/blocks/_page-tags-nav.css new file mode 100644 index 00000000000..79930588021 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/_page-tags-nav.css @@ -0,0 +1,29 @@ +.page-tags-nav { + padding: 0.5rem 0.75rem; +} + +.page-tags-nav__items { + display: flex; + flex-wrap: wrap; + gap: 0.25rem; +} + +.page-tags-nav__item-link { + padding: 0.3125rem 0.5rem; + border-radius: 1.5em; + font-size: 0.625rem; + line-height: 1.4; + white-space: nowrap; + color: var(--main); + max-width: 8.5rem; + overflow: hidden; + text-overflow: ellipsis; + border: solid 1px var(--main); + display: block; + text-decoration: none; + transition: all 0.1s ease-in; + background-color: transparent; +} +.page-tags-nav__item-link:hover { + background-color: var(--main-tint); +} diff --git a/app/assets/stylesheets/shared/blocks/_pagination.css b/app/assets/stylesheets/shared/blocks/_pagination.css new file mode 100644 index 00000000000..99b69bd5b37 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/_pagination.css @@ -0,0 +1,63 @@ +.pagination { + position: relative; + z-index: 1; +} +.pagination:first-child { + margin-bottom: 0.75rem; +} +@media (min-width: 48em) { + .pagination:first-child { + margin-bottom: 1.5rem; + } +} +.pagination:not(:first-child) { + margin-top: 0.75rem; +} +@media (min-width: 48em) { + .pagination:not(:first-child) { + margin-top: 1.5rem; + } +} + +.pagination__items { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.25rem; + overflow-x: auto; +} + +.pagination__item.is-disabled { + opacity: 0.4; + pointer-events: none; +} + +.pagination__item-link { + height: 2.5rem; + width: 2.5rem; + border-radius: 50%; + outline: none; + font-size: 0.875rem; + line-height: 1; + color: var(--muted-text); + display: flex; + text-decoration: none; + justify-content: center; + align-items: center; + transition: all 0.2s ease-in; +} +.pagination__item-link:hover { + background-color: rgba(0, 0, 0, 0.1); +} +.pagination__item-link.is-active { + background-color: var(--main); + color: var(--reversal-text); +} +.pagination__item.is-active .pagination__item-link { + background-color: var(--main); + color: var(--reversal-text); +} +.pagination__item-link.is-disabled { + opacity: 0.4; + pointer-events: none; +} diff --git a/app/assets/stylesheets/shared/blocks/_pill-nav.css b/app/assets/stylesheets/shared/blocks/_pill-nav.css new file mode 100644 index 00000000000..6c4039b461c --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/_pill-nav.css @@ -0,0 +1,53 @@ +.pill-nav:not(:first-child) { + padding-top: 1.25rem; +} + +.pill-nav__items { + display: flex; + justify-content: center; +} + +.pill-nav__item:first-child .pill-nav__item-link { + border-top-left-radius: 10em; + border-bottom-left-radius: 10em; +} +.pill-nav__item:last-child .pill-nav__item-link { + border-top-right-radius: 10em; + border-bottom-right-radius: 10em; +} +.is-half .pill-nav__item { + flex: 0 0 50%; +} + +.pill-nav__item-link { + display: block; + text-decoration: none; + font-size: 0.75rem; + line-height: 2.3; + text-align: center; + white-space: nowrap; + color: var(--muted-text); + border: solid 1px var(--border-shade); + border-left-width: 0.5px; + border-right-width: 0.5px; + width: 7rem; + transition: all 0.2s ease-out; +} +.pill-nav__item:first-child .pill-nav__item-link { + border-left-width: 1px; +} +.pill-nav__item:last-child .pill-nav__item-link { + border-right-width: 1px; +} +.pill-nav__item-link:hover { + background-color: var(--background-more-tint); +} +.pill-nav__item-link.is-active { + background-color: var(--main); + color: var(--reversal-text); + border-color: var(--main); +} + +div.pill-nav__item-link { + cursor: pointer; +} diff --git a/app/javascript/stylesheets/shared/blocks/_prism-ghcolors.scss b/app/assets/stylesheets/shared/blocks/_prism-ghcolors.css similarity index 85% rename from app/javascript/stylesheets/shared/blocks/_prism-ghcolors.scss rename to app/assets/stylesheets/shared/blocks/_prism-ghcolors.css index 4af4eb31bd3..f28b8687e57 100644 --- a/app/javascript/stylesheets/shared/blocks/_prism-ghcolors.scss +++ b/app/assets/stylesheets/shared/blocks/_prism-ghcolors.css @@ -1,4 +1,3 @@ -@import url(https://fonts.googleapis.com/css?family=Fira+Mono); /* * Hopscotch * by Jan T. Sott @@ -6,9 +5,8 @@ * * This work is licensed under the Creative Commons CC0 1.0 Universal License */ - -code[class*="language-"], -pre[class*="language-"] { +code[class*=language-], +pre[class*=language-] { background: #322931; color: #ffffff; } @@ -25,7 +23,7 @@ pre[class*="language-"] { } .namespace { - opacity: .7; + opacity: 0.7; } .token.null, @@ -34,21 +32,27 @@ pre[class*="language-"] { .token.number { color: #fd8b19; } + .token.property { color: #fdcc59; } + .token.tag { color: #1290bf; } + .token.string { color: #1fcdc2; } + .token.selector { color: #ea8aa4; } + .token.attr-name { color: #fd8b19; } + .token.entity, .token.url, .language-css .token.string, @@ -85,6 +89,8 @@ pre[class*="language-"] { } pre > code.highlight { - outline: .4em solid red; - outline-offset: .4em; + outline: 0.4em solid red; + outline-offset: 0.4em; } + +/*# sourceMappingURL=_prism-ghcolors.css.map */ diff --git a/app/assets/stylesheets/shared/blocks/_tab-nav.css b/app/assets/stylesheets/shared/blocks/_tab-nav.css new file mode 100644 index 00000000000..eb87f5e4c6a --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/_tab-nav.css @@ -0,0 +1,45 @@ +.tab-nav { + padding-block: 0.875rem; + border-bottom: solid 1px var(--border); +} + +.page-main-header + .tab-nav { + border-bottom: none; + padding-bottom: 0; +} + +.tab-nav__items { + display: flex; + gap: 0.5rem; + overflow-x: auto; + overflow-y: hidden; + margin-inline: -1rem; + padding-inline: 1rem; +} + +.tab-nav__item { + flex: 0 0 7rem; +} + +.tab-nav__item-link { + display: block; + text-decoration: none; + font-size: 0.75rem; + line-height: 2.3; + text-align: center; + white-space: nowrap; + color: var(--semi-muted-text); + border: solid 1px var(--border-shade); + border-radius: 20rem; + transition: all 0.2s ease-out; +} + +.tab-nav__item-link:hover { + background-color: var(--background-semi-shade); +} + +.tab-nav__item-link.is-active { + background-color: var(--main); + border-color: var(--main); + color: var(--reversal-text); +} diff --git a/app/assets/stylesheets/shared/blocks/card-list/_card-list-item-actions.css b/app/assets/stylesheets/shared/blocks/card-list/_card-list-item-actions.css new file mode 100644 index 00000000000..54319ada224 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card-list/_card-list-item-actions.css @@ -0,0 +1,63 @@ +.card-list-item-actions__trigger { + height: 2.25rem; + width: 2.25rem; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: var(--muted-text); + align-self: flex-start; + position: absolute; + left: 0; + top: 2.75rem; +} +@media (min-width: 48em) { + .card-list-item-actions__trigger { + position: static; + margin-top: -0.5rem; + margin-right: -0.5rem; + } +} + +.card-list-item-actions__inner { + display: none; + position: absolute; + right: -0.5rem; + top: -0.5rem; + z-index: 3; +} +input:checked + .card-list-item-actions__inner { + display: block; +} + +.card-list-item-actions__items { + position: relative; + z-index: 2; + border: solid 1px var(--border); + width: 10rem; + border-radius: 0.25rem; + overflow: hidden; +} + +.card-list-item-actions__item + .card-list-item-actions__item { + border-top: dashed 1px var(--border); +} + +.card-list-item-actions__action { + font-size: 0.8125rem; + color: var(--default-text); + display: flex; + text-decoration: none; + align-items: center; + background-color: var(--base); + transition: all 0.2s ease-out; + padding: 0.5em 1em; + min-height: 2.75rem; +} +.card-list-item-actions__action i { + margin-right: 0.5em; +} +.card-list-item-actions__action:hover { + background-color: rgb(245, 246, 252); + color: var(--main-text); +} diff --git a/app/assets/stylesheets/shared/blocks/card-list/_card-list-item-meta.css b/app/assets/stylesheets/shared/blocks/card-list/_card-list-item-meta.css new file mode 100644 index 00000000000..5ab2776bddd --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card-list/_card-list-item-meta.css @@ -0,0 +1,47 @@ +@charset "UTF-8"; +.card-list-item-meta__items { + font-size: 0.75rem; + line-height: 1.4; + display: flex; + flex-wrap: wrap; + gap: 0 0.5rem; +} + +.card-list-item-meta__item { + overflow: hidden; +} +.card-list-item-meta__item .a-user-icon { + height: 1rem; + width: 1rem; +} +.card-list-item-meta__item a { + overflow: hidden; + text-overflow: ellipsis; +} + +.card-list-item-meta__item-note { + font-size: 0.75rem; + line-height: 1.4; + color: var(--default-text); +} +.card-list-item-meta__item-note::before { + content: "※"; + position: relative; + top: -0.0625em; +} + +.card-list-item-meta__checkers { + display: inline-block; + margin-left: 0.75rem; +} + +.card-list-item-meta__created-at { + font-size: 0.75rem; + line-height: 1.4; + color: var(--muted-text); +} + +.card-list-item-meta__user { + display: flex; + gap: 0.25rem; +} diff --git a/app/assets/stylesheets/shared/blocks/card-list/_card-list-item-tags-edit.css b/app/assets/stylesheets/shared/blocks/card-list/_card-list-item-tags-edit.css new file mode 100644 index 00000000000..4d0b8e5f681 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card-list/_card-list-item-tags-edit.css @@ -0,0 +1,21 @@ +.card-list-item-tags-edit { + width: 100%; +} + +.card-list-item-tags__item-edit { + text-decoration: none; + cursor: pointer; +} +.card-list-item-tags__item-edit:hover, .card-list-item-tags__item-edit:active { + text-decoration: underline; +} +.card-list-item-tags__item-edit { + cursor: pointer; + color: var(--main-text); +} + +.card-list-item-tags-edit__actions { + margin-top: 0.5rem; + display: flex; + gap: 0.5rem; +} diff --git a/app/assets/stylesheets/shared/blocks/card-list/_card-list-item-title.css b/app/assets/stylesheets/shared/blocks/card-list/_card-list-item-title.css new file mode 100644 index 00000000000..0aeee71b954 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card-list/_card-list-item-title.css @@ -0,0 +1,104 @@ + +.card-list-item-title { + display: flex; + justify-content: space-between; +} + +@media (min-width: 48em) { + .card-list-item-title { + align-items: center; + } +} + +@media (max-width: 47.9375em) { + .card-list-item-title { + flex-direction: column; + align-items: flex-start; + } +} + +@media (min-width: 48em) { + .card-list-item-title .a-list-item-badge { + margin-top: .3125rem; + margin-right: .5rem; + } +} + +@media (max-width: 47.9375em) { + .card-list-item-title .a-list-item-badge { + margin-bottom: .25rem; + } +} + +.card-list-item-title__start { +} + +@media (min-width: 48em) { + .card-list-item-title__start { + display: flex; + align-items: center; + flex: 1; + } +} + +@media (max-width: 47.9375em) { + .card-list-item-title__start { + width: 100%; + } +} + +.card-list-item-title__end { + align-self: flex-start; +} + +.card-list-item-title__end:first-child { + flex: 1; + width: 100%; +} + +.card-list-item-title__title { + font-size: .875rem; + line-height: 1.4; + font-weight: 600; + width: 100%; + flex-basis: 100%; + word-break: break-all; + overflow: hidden; + display: -webkit-box; + text-overflow: ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} + +.card-list-item-title__title.is-lg { + font-size: 1rem; +} + +.card-list-item-title__title.is-sm { + font-size: .8125rem; + font-weight: 400; +} + +.card-list-item-title__title .a-user-role { + vertical-align: middle; +} + +.card-list-item-title__emotion-image { + height: 1.125em; + width: 1.125em; + margin-right: .375rem; + transform: translate(0, -.0625em); + display: inline; +} + +.card-list-item-title__link { + word-break: break-all; + display: -webkit-box; + -webkit-line-clamp: 2; + overflow: hidden; + -webkit-box-orient: vertical; +} + +.card-list-item.is-read .card-list-item-title__link { + color: var(--muted-text); +} diff --git a/app/assets/stylesheets/shared/blocks/card-list/_card-list-item.css b/app/assets/stylesheets/shared/blocks/card-list/_card-list-item.css new file mode 100644 index 00000000000..379fba2bcfc --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card-list/_card-list-item.css @@ -0,0 +1,355 @@ + +.card-list-item { + position: relative; +} + +.card-list-item:not(:last-child) { + border-bottom: solid 1px var(--border-tint); +} + +@media (min-width: 48em) { + .card-list-item { + padding: .75rem 1rem; + } +} + +@media (max-width: 47.9375em) { + .card-list-item { + padding: .75rem; + } +} + +.a-side-nav .card-list-item:not(:last-child) { + border-bottom-color: var(--border-shade); +} + +.card-list-item__icon { + font-size: 1.25rem; + margin-right: -.25rem; +} + +.card-list-item__icon.is-danger { + color: var(--danger); +} + +.card-list-item__rows { + flex: 1; + min-width: 0; +} + +.card-list-item__user-icons { + display: flex; + flex-wrap: wrap; + gap: .25rem; +} + +.products-self_assigned-index .card-list-item__notresponded { + position: absolute; + left: -.25rem; + top: -.25rem; + z-index: 2; + height: .5rem; + width: .5rem; + border-radius: 50%; + background-color: var(--danger); +} + +.card-list-item__inner { + position: relative; + display: flex; + gap: 1rem; +} + +a.card-list-item__inner { + display: flex; + text-decoration: none; + color: var(--default-text); +} + +a.card-list-item__inner:hover .card-list-item-title__title { + color: var(--main); + text-decoration: underline; +} + +.card-list-item__assignee { + margin-top: .5rem; +} + +@media (min-width: 48em) { + .card-list-item__assignee { + width: 8rem; + } +} + +.card-list-item__assignee-button.a-button { + border: solid 1px var(--border-shade); + pointer-events: none; + color: var(--muted-text); + background-color: var(--background); +} + +.card-list-item__assignee-image { + flex: 0 0 1.25rem; + margin-right: .375rem; +} + +.card-list-item__assignee-image .a-user-icon { + height: 1.25rem; + width: 1.25rem; +} + +.card-list-item__assignee-name { + display: block; + overflow: hidden; + text-overflow: ellipsis; +} + +.card-list-item__label { + border-radius: .25rem; + color: var(--main); + background-color: var(--base); + border: solid 1px var(--main); + display: flex; + align-items: center; + justify-content: center; + font-size: .625rem; + line-height: 1.4; + text-align: center; + position: relative; + font-feature-settings: "palt"; +} + +@media (min-width: 48em) { + .card-list-item__label { + height: 2.75rem; + width: 2.75rem; + } +} + +@media (max-width: 47.9375em) { + .card-list-item__label { + height: 2.5rem; + width: 2.5rem; + } +} + +.card-list-item__label.is-no-holding { + background-color: transparent; + border: none; +} + +.card-list-item__label-inner.is-sm { + transform: scale(.9); + margin: -1rem; +} + +.card-list-item__user { +} + +@media (min-width: 48em) { + .card-list-item__user { + min-width: 2.75rem; + } +} + +@media (max-width: 47.9375em) { + .card-list-item__user { + min-width: 2.5rem; + } +} + +.card-list-item__user-icon { +} + +@media (min-width: 48em) { + .card-list-item__user-icon { + height: 2.75rem; + width: 2.75rem; + } +} + +@media (max-width: 47.9375em) { + .card-list-item__user-icon { + height: 2.5rem; + width: 2.5rem; + } +} + +.card-list-item.is-wip .card-list-item__user-icon { + opacity: .6; +} + +.card-list-item__row-separator { + border-top: dashed 1px var(--border); + height: 1px; +} + +@media (min-width: 48em) { + .card-list-item__row-separator { + margin-block: .5rem; + } +} + +@media (max-width: 47.9375em) { + .card-list-item__row-separator { + margin-block: .75rem .25rem; + } +} + +.card-list-item__row:not(:first-child) { + margin-top: .25rem; +} + +.card-list-item__show-user-detail { + height: 2.75rem; + width: 2.75rem; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all .2s ease-out; + position: relative; +} + +@media (min-width: 48em) { + .card-list-item__show-user-detail { + right: -1rem; + } +} + +@media (max-width: 47.9375em) { + .card-list-item__show-user-detail { + right: -.75rem; + } +} + +.card-list-item__show-user-detail:hover { + opacity: .7; +} + +.card-list-item__user-detail { + margin-top: 1rem; + display: none; +} + +input:checked + .card-list-item__user-detail { + display: block; +} + +.card-list-item__user-description { +} + +@media (min-width: 48em) { + .card-list-item__user-description { + font-size: .8125rem; + } +} + +@media (max-width: 47.9375em) { + .card-list-item__user-description { + font-size: .75rem; + } +} + +.card-list-item__close-user-detail { + margin-top: 1rem; + font-size: .8125rem; + line-height: 1.4; + display: flex; + color: var(--main); + align-items: center; + justify-content: center; + text-decoration: none; + cursor: pointer; +} + +.card-list-item__close-user-detail:hover, +.card-list-item__close-user-detail:active { + text-decoration: underline; +} + +.card-list-item__summary { + color: var(--muted-text); + word-break: break-all; +} + +.card-list-item__summary * { + word-break: break-all; + overflow-wrap: anywhere; +} + +.card-list-item__summary p { + font-size: .75rem; + line-height: 1.5; + display: -webkit-box; + -webkit-line-clamp: 2; + overflow: hidden; + -webkit-box-orient: vertical; +} + +.card-list-item__option { + position: absolute; + right: 0; + top: 0; +} + +.card-list-item__option .a-button { + min-width: 4rem; +} + +.card-list-item__thumbnail { + flex: 0 0 6rem; +} + +.card-list-item__thumbnail-inner { + position: relative; + padding-top: 52.5%; + display: block; +} + +.card-list-item__thumbnail-image { + height: 100%; + width: 100%; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + object-fit: cover; + border-radius: 4px; +} + +.card-list-item__checker { +} + +@media (min-width: 48em) { + .card-list-item__checker { + position: absolute; + right: .5rem; + top: .5rem; + } +} + +@media (max-width: 47.9375em) { + .card-list-item__checker { + margin-top: .5rem; + } +} + +.card-list-item__empty { + font-size: .8125rem; + line-height: 1.4; + text-align: center; + color: var(--muted-text); +} + +.card-list-item__badge { + margin-right: .25rem; +} + +.card-list-item__small-link { + display: flex; + font-size: .75rem; + line-height: 1.4; + margin-top: .5rem; +} diff --git a/app/assets/stylesheets/shared/blocks/card-list/_card-list-tools.css b/app/assets/stylesheets/shared/blocks/card-list/_card-list-tools.css new file mode 100644 index 00000000000..089287957db --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card-list/_card-list-tools.css @@ -0,0 +1,3 @@ +.card-list-tools + .card-list { + margin-top: 1rem; +} diff --git a/app/assets/stylesheets/shared/blocks/card-list/_card-list.css b/app/assets/stylesheets/shared/blocks/card-list/_card-list.css new file mode 100644 index 00000000000..06f1d406465 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card-list/_card-list.css @@ -0,0 +1,99 @@ + +.card-list { + flex: 1; +} + +.card-list.has-scroll { + max-height: 25.5rem; + overflow-y: auto; + position: relative; +} + +.completed-practices-progress + .card-list { + border-top: solid 1px var(--border-tint); +} + +@media (min-width: 48em) { + .side-tabs-contents__item .card-list { + max-height: calc(100vh - 6rem); + overflow-y: auto; + } +} + +.card-list__description { + padding: .75rem 1rem; + background-color: var(--background); +} + +.card-list__message { + padding-block: 2rem; +} + +.card-list__deacription { + padding: .75rem 1rem; +} + +.card-list__deacription p { + font-size: .8125rem; + line-height: 1.6; +} + +@media (max-width: 47.9375em) { + .card-list__deacription p { + font-size: .75rem; + } +} + +.card-list__notice { + border: solid 1px var(--success); + background-color: var(--success-tint); + padding: .75rem 1rem; + color: var(--success-text); +} + +@media (max-width: 47.9375em) { + .card-list__notice { + padding: .5rem .75rem; + } +} + +.card-list__notice a { + color: inherit; + text-decoration: none; + cursor: pointer; +} + +.card-list__notice a:hover, +.card-list__notice a:active { + text-decoration: underline; +} + +.card-list__label { + font-size: .75rem; + line-height: 1.4; + font-weight: 700; + position: sticky; + top: 0; + z-index: 2; + background-color: var(--background); +} + +@media (min-width: 48em) { + .card-list__label { + padding: .25rem 1rem; + } +} + +@media (max-width: 47.9375em) { + .card-list__label { + padding: .25rem .75rem; + } +} + +.card-list__label:first-child { + border-top: solid 1px var(--border); +} + +.card-list__deacription + .card-list__items { + border-top: dotted .0625rem var(--border-tint); +} diff --git a/app/assets/stylesheets/shared/blocks/card/_card-body.css b/app/assets/stylesheets/shared/blocks/card/_card-body.css new file mode 100644 index 00000000000..0ae16d0e4d5 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card/_card-body.css @@ -0,0 +1,54 @@ + +.card-body { + flex: 1; +} + +.card-body.has-scroll { + max-height: 18rem; + overflow-y: auto; +} + +@media (min-width: 48em) { + .card-body__description { + padding: 1rem; + } +} + +@media (max-width: 47.9375em) { + .card-body__description { + padding: .75rem; + } +} + +@media (min-width: 48em) { + .card-body__description.a-long-text { + font-size: .9375rem; + } +} + +@media (max-width: 47.9375em) { + .card-body__description.a-long-text { + font-size: .8125rem; + } +} + +.card__main-movie video { + border-radius: .25rem .25rem 0 0; +} + +.card-body__inner { + max-width: 100%; + width: 100%; +} + +@media (min-width: 48em) { + .card-body__inner { + padding: 1rem 1.5rem; + } +} + +@media (max-width: 47.9375em) { + .card-body__inner { + padding: 1rem; + } +} diff --git a/app/assets/stylesheets/shared/blocks/card/_card-books.css b/app/assets/stylesheets/shared/blocks/card/_card-books.css new file mode 100644 index 00000000000..262242c6177 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card/_card-books.css @@ -0,0 +1,136 @@ + +.card-books-item { +} + +@media (min-width: 48em) { + .card-books-item { + height: 100%; + } +} + +.card-books-item__body { +} + +@media (min-width: 48em) { + .card-books-item__body { + flex: 1; + } +} + +.card-books-item__inner { + padding: .75rem 1rem; + text-decoration: none; +} + +@media (min-width: 48em) { + .card-books-item__inner { + display: flex; + text-decoration: none; + gap: 1rem; + align-items: flex-start; + } +} + +@media (max-width: 47.9375em) { + .card-books-item__inner { + display: block; + overflow: hidden; + } +} + +.card-books-item__start { +} + +@media (min-width: 48em) { + .card-books-item__start { + flex: 0 0 4rem; + } +} + +@media (max-width: 47.9375em) { + .card-books-item__start { + float: left; + margin-right: 1rem; + width: 3.5rem; + } +} + +.card-books-item__end { + flex: 1; +} + +.card-books-item__row:not(:first-child) { + margin-top: .25rem; +} + +.card-books-item__cover-container { + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.card-books-item__image { + max-height: 100%; + max-width: 100%; + object-fit: contain; + object-position: 50% 0; + border: solid 1px var(--border-tint); + border-radius: 2px; +} + +.card-books-item__title { + font-size: .875rem; + line-height: 1.4; + font-weight: 600; + color: var(--default-text); + transition: all .2s ease-out; +} + +.card-books-item__title .a-badge { + position: relative; + top: -.125em; + margin-right: .5em; +} + +.card-books-item__title-link { + text-decoration: none; +} + +.card-books-item__title-link .card-books-item__title-label { + text-decoration: none; + cursor: pointer; + color: var(--main-text); +} + +.card-books-item__title-link .card-books-item__title-label:hover, +.card-books-item__title-link .card-books-item__title-label:active { + text-decoration: underline; +} + +a.card-books-item__inner:hover .card-books-item__title-label { + text-decoration: underline; + color: var(--main-text); +} + +.card-books-item__price { + font-size: .75rem; + line-height: 1.4; + color: var(--default-text); +} + +.card-books-item__description { + font-size: .75rem; + color: var(--semi-muted-text); +} + +.card-books-item__practices { + padding: 0 1rem .75rem; +} + +.card-books-item__practices .tag-links__item-link { + max-width: 9rem; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} diff --git a/app/assets/stylesheets/shared/blocks/card/_card-eyecatch.css b/app/assets/stylesheets/shared/blocks/card/_card-eyecatch.css new file mode 100644 index 00000000000..a427b04bf22 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card/_card-eyecatch.css @@ -0,0 +1,19 @@ + +.card-eyecatch { + @media (min-width: 48em) { + padding: 1rem 1rem 0; + } + @media (max-width: 47.9375em) { + padding: .75rem .75rem 0; + + } +} +.card-eyecatch__image { + display: block; + border-radius: 4px; + aspect-ratio: 1.91 / 1; + width: 100%; + object-fit: cover; + border-radius: .25rem; + +} diff --git a/app/assets/stylesheets/shared/blocks/card/_card-footer.css b/app/assets/stylesheets/shared/blocks/card/_card-footer.css new file mode 100644 index 00000000000..4106b92fc70 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card/_card-footer.css @@ -0,0 +1,62 @@ + +.card-footer { + position: relative; + z-index: 1; +} +@media (min-width: 48em) { + .card-footer { + padding: .5rem 1rem; + min-height: 3rem; + } +} +@media (max-width: 47.9375em) { + .card-footer { + padding: .5rem .75rem; + } +} +.card-footer:last-child { + border-bottom-left-radius: .25rem; + border-bottom-right-radius: .25rem; +} +.card-footer__description { + font-size: .75rem; + line-height: 1.4; + margin-top: .5rem; + text-align: center; + color: var(--muted-text); +} +@media (max-width: 47.9375em) { + .card-footer__description { + text-align: left; + font-size: .625rem; + } + .card-footer__description br { + display: none; + } +} +.card-footer__notice { + font-size: .8125rem; + line-height: 1.4; + margin-top: .5rem; + text-align: center; + color: var(--success); + +} +.card-footer__footer-link { + height: 100%; + display: flex; + justify-content: flex-end; + align-items: flex-end; + +} +.card-footer__footer-text-link { + font-size: .8125rem; + line-height: 1.4; + color: var(--muted-text); + text-decoration: none; + cursor: pointer; +} +.card-footer__footer-text-link:hover, +.card-footer__footer-text-link:active { + text-decoration: underline; +} diff --git a/app/assets/stylesheets/shared/blocks/card/_card-header.css b/app/assets/stylesheets/shared/blocks/card/_card-header.css new file mode 100644 index 00000000000..2bfd30d4883 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card/_card-header.css @@ -0,0 +1,88 @@ +.card-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.5rem 0.75rem; +} + +@media (min-width: 48em) { + .card-header { + padding: 0.75rem 1rem; + } +} + +.card-header.is-sm { + padding-block: 0.625rem; +} + +.card-header.is-sm .a-button.is-xs { + margin-block: -0.25rem; +} + +.card-header:first-child { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} + +.card-header + .a-form-tabs { + margin-top: -1px; +} + +.card-header__inner { + display: flex; + align-items: center; + width: 100%; + gap: 1rem; +} + +.card-header__title { + line-height: 1.4; + font-weight: 600; + flex: 1; + font-size: 0.875rem; +} + +@media (min-width: 48em) { + .card-header__title { + font-size: 1rem; + } +} + +.card-header.is-sm .card-header__title { + font-size: 0.875rem; +} + +.card-header.is-lg .card-header__title { + font-size: 1.5rem; +} + +.card-header__count { + font-weight: 400; + letter-spacing: 0; + margin-left: 0.125rem; +} + +.card-header__title-emotion-image { + height: 1.25em; + width: 1.25em; + display: inline-block; + vertical-align: middle; + margin-inline: 0.125em; + position: relative; + top: -0.125em; +} + +.card-header__sub-title { + font-size: 0.8125rem; + line-height: 1.4; +} + +@media (max-width: 47.9375em) { + .card-header__sub-title { + font-size: 0.75rem; + } +} + +.card-header__action { + display: flex; +} diff --git a/app/assets/stylesheets/shared/blocks/card/_card-main-actions.css b/app/assets/stylesheets/shared/blocks/card/_card-main-actions.css new file mode 100644 index 00000000000..6461660ce81 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card/_card-main-actions.css @@ -0,0 +1,101 @@ +.card-main-actions { + container: card-main-actions / inline-size; +} + +.card-main-actions:not(:first-child) { + margin-top: 0.5rem; +} + +.form__items + .card-main-actions { + margin-top: 1rem; +} + +.card-main-actions__items { + display: flex; + gap: 0.5rem; +} + +@container card-main-actions (min-width: 20em) { + .card-main-actions__items { + position: relative; + justify-content: center; + flex-wrap: wrap; + align-items: flex-end; + min-height: 1.875rem; + } +} + +@container card-main-actions (max-width: 19.9375em) { + .card-main-actions__items { + flex-direction: column; + } +} + +.card-main-actions__items.is-sub-actions { + justify-content: flex-end; +} + +@container card-main-actions (max-width: 19.9375em) { + .card-main-actions__items.is-sub-actions { + flex-direction: row; + } +} + +.card-main-actions__items.is-sub-actions .card-main-actions__item.is-sub { + position: static; + flex: 0 0 auto; +} + +.card-main-actions__item { + flex-basis: 100%; + max-width: 100%; +} + +@container card-main-actions (min-width: 20em) { + .card-main-actions__item { + flex: 1; + max-width: 13rem; + } + + .card-main-actions__item.is-sub { + flex: 0 0 auto; + } +} + +@container card-main-actions (max-width: 19.9375em) { + .card-main-actions__item.is-sub { + text-align: right; + } + + .card-main-actions__item:last-child { + margin-bottom: 0; + } +} + +.card-main-actions__item.is-end { + margin-left: auto; + flex-basis: 2.5rem; +} + +@container card-main-actions (min-width: 20em) { + .card-main-actions.is-3-items .card-main-actions__item { + flex: 1; + } +} + +.card-main-actions__muted-action { + text-decoration: none; + cursor: pointer; + font-size: 0.8125rem; + line-height: 1.4; + color: var(--muted-text); +} + +.card-main-actions__muted-action:hover, +.card-main-actions__muted-action:active { + text-decoration: underline; +} + +.card-main-actions__muted-action:hover { + color: var(--danger); +} diff --git a/app/assets/stylesheets/shared/blocks/card/_card-message.css b/app/assets/stylesheets/shared/blocks/card/_card-message.css new file mode 100644 index 00000000000..f0c143d9f35 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card/_card-message.css @@ -0,0 +1,25 @@ + +.card-message { + text-align: center; +} + +.card-message.is-notice { + background-color: var(--success); + color: var(--reversal-text); +} + +@media (min-width: 48em) { + .card-message { + padding: .75rem 1rem; + font-size: .875rem; + line-height: 1.5; + } +} + +@media (max-width: 47.9375em) { + .card-message { + padding: .75rem; + font-size: .75rem; + line-height: 1.5; + } +} diff --git a/app/assets/stylesheets/shared/blocks/card/_congrats-card-body.css b/app/assets/stylesheets/shared/blocks/card/_congrats-card-body.css new file mode 100644 index 00000000000..edd9a18e757 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card/_congrats-card-body.css @@ -0,0 +1,34 @@ + +.congrats-card-body__title { + font-size: 1.5rem; + line-height: 1.4; + font-weight: 700; + @media (min-width: 48em) { + font-size: 1.5rem; + } + @media (max-width: 47.9375em) { + font-size: 1rem; + + } +} +.congrats-card-body__image-container { + margin-top: 1.25rem; + +} +.congrats-card-body__image-container { + width: 100%; + max-width: 28rem; + margin-inline: auto; + +} +.congrats-card-body__image { + border-radius: .75rem; + border: solid .5rem var(--border-tint); + +} +.congrats-card-body { + .card-main-actions { + margin-top: 1.25rem; + + } +} diff --git a/app/assets/stylesheets/shared/blocks/card/_practice-books.css b/app/assets/stylesheets/shared/blocks/card/_practice-books.css new file mode 100644 index 00000000000..bf2f0ff992a --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card/_practice-books.css @@ -0,0 +1,114 @@ +.practice-books__items { + margin-top: -1px; + display: block; +} +@media (min-width: 48em) { + .practice-books__items { + display: flex; + flex-wrap: wrap; + } +} + +.practice-books-item:not(:first-child) { + border-top: solid 1px var(--border-tint); +} +@media (min-width: 48em) { + .practice-books-item { + border-top: solid 1px var(--border-tint); + flex: 0 0 50%; + height: 100%; + display: flex; + flex-direction: column; + } + .practice-books-item:nth-child(odd) { + border-right: solid 1px var(--border-tint); + } +} + +@media (min-width: 48em) { + .practice-books-item__body { + flex: 1; + } +} + +.practice-books-item__inner { + padding: 0.75rem 1rem; + text-decoration: none; +} +.practice-books .practice-books-item__inner { + height: 100%; + width: 100%; +} +.practice-books-item__inner { + display: block; + overflow: hidden; +} +@media (min-width: 48em) { + .practice-books-item__inner { + display: flex; + gap: 1rem; + align-items: flex-start; + } +} + +.practice-books-item__start { + float: left; + margin-right: 1rem; + width: 3.5rem; +} +@media (min-width: 48em) { + .practice-books-item__start { + float: none; + margin-right: 0; + flex: 0 0 4rem; + } +} + +.practice-books-item__end { + flex: 1; +} + +.practice-books-item__cover-container { + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.practice-books-item__image { + max-height: 100%; + max-width: 100%; + object-fit: contain; + object-position: 50% 0; + border: solid 1px var(--border-tint); + border-radius: 2px; +} + +.practice-books-item__title { + font-size: 0.875rem; + line-height: 1.4; + font-weight: 600; + color: var(--default-text); + transition: all 0.2s ease-out; +} +.practice-books-item__title .a-badge { + position: relative; + top: -0.125em; + margin-right: 0.5em; +} + +a.practice-books-item__inner:hover .practice-books-item__title-label { + text-decoration: underline; + color: var(--main-text); +} + +.practice-books-item__price { + font-size: 0.75rem; + line-height: 1.4; + color: var(--default-text); +} + +.practice-books-item__description { + font-size: 0.75rem; + color: var(--semi-muted-text); +} diff --git a/app/assets/stylesheets/shared/blocks/card/_tags-highlight.css b/app/assets/stylesheets/shared/blocks/card/_tags-highlight.css new file mode 100644 index 00000000000..c20a26b09e0 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card/_tags-highlight.css @@ -0,0 +1,18 @@ +.tags-highlight { + position: absolute; + left: 0; + top: 0; + padding: 0.5rem 0.75rem; + display: flex; + gap: 0.25rem; + width: 100%; + flex-wrap: wrap; +} + +.tags-highlight__item { + width: 25%; + max-width: 6rem; +} +.tags-highlight__item .a-badge { + border: solid 1px var(--base); +} diff --git a/app/assets/stylesheets/shared/blocks/card/_thumbnail-card.css b/app/assets/stylesheets/shared/blocks/card/_thumbnail-card.css new file mode 100644 index 00000000000..cbef0cca039 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/card/_thumbnail-card.css @@ -0,0 +1,121 @@ + +.thumbnail-card { + padding: 1rem; +} + +@media (min-width: 48em) { + .thumbnail-card { + height: 100%; + } +} + +@media (max-width: 47.9375em) { + .col-xs-6 .thumbnail-card { + height: 100%; + } +} + +.thumbnail-card__inner { + display: flex; + flex-direction: column; + position: relative; +} + +@media (max-width: 47.9375em) { + .thumbnail-card__inner { + gap: .5rem; + } +} + +@media (min-width: 48em) { + .thumbnail-card__inner { + gap: .75rem; + } +} + +a.thumbnail-card__inner { + display: flex; + text-decoration: none; +} + +a.thumbnail-card__inner:hover .thumbnail-card__title { + text-decoration: underline; +} + +.thumbnail-card__image-link { + transition: all .2s ease-out; +} + +.thumbnail-card__image-link:hover { + opacity: .7; +} + +.thumbnail-card__image { + display: block; + border-radius: 4px; + aspect-ratio: 1.91 / 1; + width: 100%; + object-fit: cover; +} + +.thumbnail-card__title { + font-size: 1.125rem; + line-height: 1.4; + font-weight: 700; + color: var(--default-text); + overflow: hidden; + display: -webkit-box; + text-overflow: ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + max-height: calc(1.125rem * 1.4 * 2); +} + +.thumbnail-card.is-wip .thumbnail-card__title { + color: var(--muted-text); +} + +.thumbnail-card__title-link { + text-decoration: none; + cursor: pointer; +} + +.thumbnail-card__title-link:hover, +.thumbnail-card__title-link:active { + text-decoration: underline; +} + +.thumbnail-card__metas { + display: flex; +} + +.thumbnail-card__meta:not(:first-child) { + margin-left: .75rem; +} + +.thumbnail-card__author { + display: flex; + align-items: center; + font-size: .875rem; + color: var(--default-text); +} + +.thumbnail-card__author img { + height: 1.125rem; + width: 1.125rem; + object-fit: cover; + margin-right: .25rem; + border-radius: 50%; +} + +.thumbnail-card__date { + font-size: .8125rem; + line-height: 1.4; + color: var(--semi-muted-text); +} + +.thumbnail-card__description { + font-size: .875rem; + line-height: 1.6; + color: var(--semi-muted-text); +} diff --git a/app/javascript/stylesheets/shared/blocks/card/_welcome-article.sass b/app/assets/stylesheets/shared/blocks/card/_welcome-article.css similarity index 100% rename from app/javascript/stylesheets/shared/blocks/card/_welcome-article.sass rename to app/assets/stylesheets/shared/blocks/card/_welcome-article.css diff --git a/app/assets/stylesheets/shared/blocks/form/_block-checks.css b/app/assets/stylesheets/shared/blocks/form/_block-checks.css new file mode 100644 index 00000000000..fa26b0fce07 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_block-checks.css @@ -0,0 +1,65 @@ + +.block-checks { + display: flex; + flex-wrap: wrap; + gap: .5rem; +} + +.block-checks.is-margin-top-12 { + margin-top: .75rem; +} + +.block-checks__item { + flex: 1; + max-width: 20rem; +} + +.block-checks.is-vertical { + flex-direction: column; +} + +.block-checks.is-1-item .block-checks__item { + max-width: 100%; +} + +.block-checks.is-1-item.is-centered .block-checks__item { + width: 20rem; +} + +@media (min-width: 40em) { + .block-checks.is-2-items .block-checks__item { + flex: 0 0 calc((100% - .5rem) / 2); + max-width: calc((100% - .5rem) / 2); + } +} + +@media (max-width: 39.9375em) { + .block-checks.is-2-items .block-checks__item { + flex: 0 0 100%; + max-width: 100%; + } +} + +.block-checks.is-3-items .block-checks__item { + width: calc((100% - 1rem) / 3); + flex: 0 0 calc((100% - 1rem) / 3); +} + +@media (max-width: 47.9375em) { + .block-checks.sm-down\:is-3-items .block-checks__item { + width: calc((100% - 1rem) / 3); + flex: 0 0 calc((100% - 1rem) / 3); + } +} + +.block-checks.is-4-items .block-checks__item { + width: calc((100% - 1.5rem) / 4); + flex: 0 0 calc((100% - 1.5rem) / 4); +} + +@media (max-width: 47.9375em) { + .block-checks.sm-down\:is-2-items .block-checks__item { + width: calc((100% - .5rem) / 2); + flex: 0 0 calc((100% - .5rem) / 2); + } +} diff --git a/app/assets/stylesheets/shared/blocks/form/_books-form-item.css b/app/assets/stylesheets/shared/blocks/form/_books-form-item.css new file mode 100644 index 00000000000..c40e44bc762 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_books-form-item.css @@ -0,0 +1,36 @@ +.books-form-item .a-form-label { + font-size: 0.8125rem; + margin-bottom: 0.25em; +} + +.books-form-item .a-form-help { + margin-top: 0.25em; +} + +.books-form-item + .books-form-item { + margin-top: 0.75rem; +} + +.books-form-item.is-inline { + display: flex; +} + +.books-form-item.is-inline *:first-child { + margin-right: 1em; +} + +.books-form-item textarea.a-text-input { + height: 10rem; +} + +.books-form-item__price-container { + position: relative; + display: flex; + align-items: flex-end; + max-width: 10rem; +} + +.books-form-item__price-unit { + padding-bottom: 0.25rem; + margin-left: 0.25rem; +} diff --git a/app/assets/stylesheets/shared/blocks/form/_books-form.css b/app/assets/stylesheets/shared/blocks/form/_books-form.css new file mode 100644 index 00000000000..85dc076efac --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_books-form.css @@ -0,0 +1,67 @@ +.books-form { + border: solid 1px var(--border); + background-color: var(--base); + border-radius: .25rem; +} + +.books-form + .books-form { + margin-top: 2rem; +} + +.books-form__header { + position: relative; +} + +.books-form__delete { + position: absolute; + right: 0; + top: 0; + height: 2.5rem; + width: 2.5rem; + transform: translate(25%, -25%); +} + +.books-form__delete-link { + border: solid 1px var(--border-shade); + font-size: 1.25rem; + color: var(--muted-text); + height: 100%; + width: 100%; + display: flex; + text-decoration: none; + align-items: center; + justify-content: center; + border-radius: 50%; + background-color: var(--base); + transition: all .2s ease-out; +} + +.books-form__delete-link:hover { + color: var(--danger); + border-color: var(--danger); +} + +.books-form__items { +} + +@media (min-width: 48em) { + .books-form__items { + padding: 1rem; + } +} + +@media (max-width: 47.9375em) { + .books-form__items { + padding: .75rem; + } +} + +.books-form__add .a-button { + min-width: 12rem; +} + +@media (max-width: 47.9375em) { + .books-form__add .a-button { + width: 100%; + } +} diff --git a/app/assets/stylesheets/shared/blocks/form/_checkboxes.css b/app/assets/stylesheets/shared/blocks/form/_checkboxes.css new file mode 100644 index 00000000000..346515e05a4 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_checkboxes.css @@ -0,0 +1,123 @@ +.checkboxes__items { + display: flex; + flex-wrap: wrap; + column-gap: 1.5rem; + row-gap: 0.75rem; +} + +.checkboxes__item label { + font-size: 0.875rem; + line-height: 1.4; + display: block; + color: var(--semi-muted-text); + position: relative; + text-decoration: none; + cursor: pointer; + padding-left: calc(0.875rem * 1.4); + transition: text-decoration 0.2s ease-out; +} + +.checkboxes__item label:hover, +.checkboxes__item label:active { + text-decoration: underline; +} + +.checkboxes__item label.is-sm { + font-size: 0.8125rem; +} + +.checkboxes__item label::before { + content: ""; + height: 0.875rem; + width: 0.875rem; + border: solid 1px var(--input-border); + left: 0; + position: absolute; + top: 50%; + transform: translate(0, -50%); + background-color: var(--base); + border-radius: 0.1875rem; + font-size: 0.75rem; + display: flex; + color: var(--reversal-text); + align-items: center; + justify-content: center; + transition: all 0.2s ease-out; +} + +.checkboxes__item label:hover::before { + background-color: rgba(87, 82, 232, 0.4); + border-color: var(--primary); +} + +.checkboxes__item input:checked + label, +.checkboxes__item .is-dammy label { + color: var(--default-text); +} + +.checkboxes__item input:checked + label::before, +.checkboxes__item .is-dammy label::before { + background-color: var(--primary); + border-color: var(--primary); + content: "\f00c"; + font-family: "Font Awesome 6 Pro"; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} + +.checkboxes__item input:checked + label:hover::before { + border-color: var(--primary); +} + +.checkboxes__item.is-radio label::before { + border-radius: 50%; +} + +.checkboxes__item.is-radio input:checked + label::before, +.checkboxes__item.is-radio .is-dammy label::before { + content: ""; + box-shadow: inset 0 0 0 2px var(--base); +} + +.checkboxes.has-children > .checkboxes__items { + flex-direction: column; +} + +.checkboxes.has-children > .checkboxes__items > .checkboxes__item { + border: solid 1px var(--border); + border-radius: 0.25rem; + background-color: var(--base); +} + +.checkboxes.has-children > .checkboxes__items > .checkboxes__item > label { + font-size: 1rem; + font-weight: 700; + margin: 0.75rem; +} + +.checkboxes.has-children > .checkboxes__items > .checkboxes__item .checkboxes { + display: none; + border-top: solid 1px var(--border-tint); +} + +.checkboxes.has-children > .checkboxes__items > .checkboxes__item .checkboxes__items { + gap: 0.5rem 1rem; +} + +.checkboxes.has-children > .checkboxes__items > .checkboxes__item input:checked + label + .checkboxes { + display: block; +} + +.checkboxes__item .checkboxes { + padding: 0.75rem; +} + +.checkboxes__title { + margin-bottom: 0.75rem; + color: var(--muted-text); +} diff --git a/app/assets/stylesheets/shared/blocks/form/_form-actions.css b/app/assets/stylesheets/shared/blocks/form/_form-actions.css new file mode 100644 index 00000000000..392a8e1de78 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_form-actions.css @@ -0,0 +1,201 @@ + +.form-actions { +} + +@media (min-width: 48em) { + .form-actions { + margin-top: 1.5rem; + } +} + +@media (max-width: 47.9375em) { + .form-actions { + margin-top: 1rem; + } +} + +@media (min-width: 48em) { + .form-actions.is-report { + padding-bottom: 1.5rem; + } +} + +.form-actions + .form-actions { + border-top: dashed 1px var(--border); +} + +@media (min-width: 48em) { + .form-actions + .form-actions { + margin-top: 1rem; + padding-top: 1rem; + } +} + +@media (max-width: 47.9375em) { + .form-actions + .form-actions { + padding-top: 1rem; + } +} + +.form-actions__items { + gap: .75rem; +} + +@media (min-width: 48em) { + .form-actions__items { + display: flex; + align-items: flex-end; + justify-content: center; + flex-wrap: wrap; + position: relative; + max-width: 45em; + margin-inline: auto; + } +} + +@media (max-width: 47.9375em) { + .form-actions__items { + flex-direction: column; + } +} + +.form-actions__item { + position: relative; +} + +@media (min-width: 48em) { + .form-actions__item.is-sub { + flex: 0 0 auto; + } +} + +@media (max-width: 47.9375em) { + .form-actions__item.is-sub { + text-align: center; + } +} + +@media (min-width: 48em) { + .form-actions__item.is-muted { + position: absolute; + right: 0; + bottom: 0; + } +} + +@media (max-width: 47.9375em) { + .form-actions__item.is-muted { + text-align: right; + } +} + +@media (max-width: 47.9375em) { + .form-actions__item.is-help { + margin-bottom: 1rem; + } +} + +@media (min-width: 40em) { + .form-actions__item.is-main { + min-width: 13rem; + } +} + +@media (max-width: 39.9375em) { + .form-actions__item.is-main { + width: 100%; + } +} + +@media (min-width: 48em) { + .form-actions__item.has-help { + position: relative; + padding-bottom: 1.5rem; + } +} + +@media (max-width: 47.9375em) { + .form-actions__item { + width: 100%; + padding-inline: 0; + } + + .form-actions__item:nth-child(2), + .form-actions__item:nth-child(3) { + margin-top: .75rem; + } + + .form-actions__item > * { + width: 100%; + } + + .form-actions__item .a-button.is-text, + .form-actions__item .a-button.is-muted-text { + width: auto; + } +} + +.form-actions__item-help { + font-size: .8125rem; + line-height: 1; + text-align: center; + padding-top: .5rem; +} + +.form-actions__item-help .a-form-help-link { + margin-left: .5em; +} + +@media (min-width: 48em) { + .form-actions__item-help { + position: absolute; + left: 0; + bottom: 0; + right: 0; + } +} + +.form-actions__item-checkbox { + margin-bottom: .5rem; +} + +.form-actions__delete { + text-align: right; +} + +@media (min-width: 48em) { + .form-actions__delete { + margin-top: .5rem; + } +} + +@media (max-width: 47.9375em) { + .form-actions__delete { + margin-top: .75rem; + } +} + +.form-actions__delete-link { + text-decoration: none; + cursor: pointer; + font-size: .875rem; + line-height: 1.4; + color: var(--muted-text); +} + +.form-actions__delete-link:hover, +.form-actions__delete-link:active { + text-decoration: underline; +} + +.form-actions__delete-link:hover { + color: var(--danger); +} + +.form-action-before-option { + margin-bottom: .5rem; +} + +.form-action-before-option.has-help { + display: flex; +} diff --git a/app/assets/stylesheets/shared/blocks/form/_form-added-choice.css b/app/assets/stylesheets/shared/blocks/form/_form-added-choice.css new file mode 100644 index 00000000000..df8613db4ed --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_form-added-choice.css @@ -0,0 +1,59 @@ + +.form-added-choice { +} + +.form-added-choice + .form-added-choice { + margin-top: 1rem; +} + +.form-added-choice__inner { +} + +@media (min-width: 48em) { + .form-added-choice__inner { + display: flex; + align-items: flex-start; + gap: .75rem; + } +} + +.form-added-choice__col.is-main { + flex: 1; +} + +.form-added-choice__items { + display: flex; +} + +@media (max-width: 47.9375em) { + .form-added-choice__items { + gap: 1rem; + } +} + +.form-added-choice__action { +} + +@media (max-width: 47.9375em) { + .form-added-choice__action { + margin-top: .75rem; + display: flex; + justify-content: flex-end; + } +} + +.form-added-choice__label { + display: flex; + height: 2.75rem; + align-items: center; +} + +.form-added-choice__label.is-count { + width: 1.5rem; + text-align: center; + justify-content: center; +} + +.form-item__vertical-separator .form-added-choice__label.is-count { + height: 1.5rem; +} diff --git a/app/assets/stylesheets/shared/blocks/form/_form-item-actions.css b/app/assets/stylesheets/shared/blocks/form/_form-item-actions.css new file mode 100644 index 00000000000..97d38aa644a --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_form-item-actions.css @@ -0,0 +1,49 @@ + +.form-item-actions { +} + +@media (min-width: 48em) { + .form-item-actions { + margin-top: -.75rem; + } +} + +@media (max-width: 47.9375em) { + .form-item-actions { + margin-top: -.5rem; + } +} + +.form-item-actions__items { + display: flex; + align-items: center; + gap: .75rem; +} + +.form-item-actions__text-link { + text-decoration: none; + cursor: pointer; + line-height: 1.4; +} + +@media (min-width: 48em) { + .form-item-actions__text-link { + font-size: .8125rem; + } +} + +@media (max-width: 47.9375em) { + .form-item-actions__text-link { + font-size: .75rem; + } +} + +.form-item-actions__text-link:hover, +.form-item-actions__text-link:active { + text-decoration: underline; +} + +.form-item-actions__text-link.is-danger { + color: var(--danger); + font-weight: 600; +} diff --git a/app/assets/stylesheets/shared/blocks/form/_form-item-block.css b/app/assets/stylesheets/shared/blocks/form/_form-item-block.css new file mode 100644 index 00000000000..d40684f57e1 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_form-item-block.css @@ -0,0 +1,46 @@ +.form-item-block:not(:last-child) { + margin-bottom: 1.75rem; +} + +.form-item-block .form-checkbox__label { + margin-bottom: 0; + border-radius: 0; + border: none; + color: var(--muted-text); + padding-block: 0.625rem; + background-color: var(--background-more-tint); + transition: all 0.2s ease-out; +} + +.form-item-block .form-checkbox__label:hover { + color: var(--default-text); + background-color: var(--background-tint); +} + +.form-item-block input:checked + .form-checkbox__label { + background-color: #fff7e0; + color: var(--default-text); +} + +.form-item-block__inner { + border: solid var(--border-shade) 1px; + border-radius: 0.25rem; + overflow: hidden; +} + +.form-item-block__header { + padding: 0.5rem 0.75rem; + border-bottom: solid 1px var(--border-shade); + background-color: var(--base); +} + +.form-item-block__title { + font-size: 0.8125rem; + line-height: 1.4; + display: block; + font-weight: 700; +} + +.form-item-block__item:not(:last-child) { + border-bottom: solid 1px var(--border); +} diff --git a/app/assets/stylesheets/shared/blocks/form/_form-item-group.css b/app/assets/stylesheets/shared/blocks/form/_form-item-group.css new file mode 100644 index 00000000000..2121fb2f985 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_form-item-group.css @@ -0,0 +1,19 @@ +.form-item-group + .form-item-group { + margin-top: 0.75rem; + border-top: dashed 1px var(--border); + padding-top: 0.75rem; +} + +.form-item-group__header + .form-item-group__body { + margin-top: 0.25rem; +} + +.form-item-group__title { + font-size: 0.875rem; + line-height: 1.4; + font-weight: 700; +} + +.form-item-group__help { + margin-top: 0.5rem; +} diff --git a/app/assets/stylesheets/shared/blocks/form/_form-item.css b/app/assets/stylesheets/shared/blocks/form/_form-item.css new file mode 100644 index 00000000000..8afd96f7609 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_form-item.css @@ -0,0 +1,223 @@ +.form-item { +} + +.form-item:not(:last-child) { + margin-bottom: 1.75rem; +} + +.form-item.is-hidden { + display: none; +} + +.form-item.is-sm { + width: 30rem; + max-width: 100%; +} + +.form-item.is-md { + width: 40rem; + max-width: 100%; +} + +.form-item .choices { + width: 100%; + z-index: 2; +} + +.form-item .a-page-notice { + margin-bottom: 1rem; + border-radius: .25rem; +} + +.edit_report .form-item .a-page-notice { + margin-bottom: 1.75rem; +} + +.form-item .checkboxes:not(:last-child) { + margin-bottom: 1rem; +} + +.form-item.is-inline { + display: flex; + align-items: center; +} + +.form-item.is-inline .a-form-label { + margin-bottom: 0; + margin-right: .75em; + white-space: nowrap; +} + +.form-item.is-inline .a-form-label.is-sm { + margin-right: .5rem; +} + +.form-item.is-inline.is-centered { + justify-content: center; +} + +@media (min-width: 48em) { + .form-item.is-inline-md-up { + display: flex; + align-items: center; + } + + .form-item.is-inline-md-up .a-form-label { + margin-bottom: 0; + margin-right: .75em; + white-space: nowrap; + } +} + +.form-item__row { + display: flex; + gap: .75rem; +} + +.form-item__column.is-sm { + flex: 0 0 6rem; +} + +.form-item__column.is-unit { + align-self: flex-end; + padding-bottom: .25em; +} + +.form-item__column.is-action { + align-self: flex-end; +} + +.form-item__button { + text-align: center; +} + +.form-item__pp { + margin-top: .75rem; +} + +.form-item__one-checkbox { + font-size: .875rem; + cursor: pointer; +} + +.form-item__pp p { + font-size: .8125rem; + line-height: 1.8; + margin-bottom: 1em; +} + +.form-item__pp h2 { + font-size: .8125rem; + line-height: 1.8; + margin-bottom: .4em; + font-weight: 700; +} + +.form-item__pp ul { + margin-bottom: 1em; + list-style: disc outside; + margin-left: 1.5rem; +} + +.form-item__pp li { + font-size: .8125rem; + line-height: 1.8; + margin-bottom: .4em; +} + +.form-item__pp *:last-child { + margin-bottom: 0; +} + +.form-item__mention-input { + position: relative; +} + +.form-item__mention-input::before { + content: '@'; + font-family: 'Font Awesome 6 Pro'; + font-style: normal; + font-weight: 400; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + content: "\f1fa"; + font-size: 1rem; + line-height: 1; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 2rem; + left: 0; + position: absolute; + top: 0; + background-color: var(--background); + border-top-left-radius: .25rem; + border-bottom-left-radius: .25rem; + border: solid 1px #c1c5b9; +} + +.form-item__mention-input input { + padding-left: 2.5rem; +} + +.form-item__lerning-times { + margin-bottom: 1rem; +} + +.form-item__header { + display: flex; + justify-content: space-between; + margin-bottom: .5rem; +} + +.form-item__header .a-form-label { + margin-bottom: 0; +} + +.form-item__price-container { + position: relative; + display: flex; + align-items: flex-end; + max-width: 10rem; +} + +.form-item__price-unit { + padding-bottom: .25rem; + margin-left: .25rem; +} + +.form-item__inline-form-item { + display: flex; + align-items: center; + flex: 0 0 100%; + padding-top: .25rem; + color: var(--default-text); + font-weight: 400; +} + +.form-item__add-times { +} + +@media (min-width: 48em) { + .form-item__add-times { + margin-top: -.125rem; + } +} + +@media (max-width: 47.9375em) { + .form-item__add-times { + margin-top: -1.25rem; + } +} + +.form-item__add-choice { + margin-top: 1rem; +} + +.form-item__option { + margin-top: .5rem; +} diff --git a/app/assets/stylesheets/shared/blocks/form/_form-link-block.css b/app/assets/stylesheets/shared/blocks/form/_form-link-block.css new file mode 100644 index 00000000000..d8bbb4c9baf --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_form-link-block.css @@ -0,0 +1,7 @@ +.form-link-block__link { + font-size: 0.875rem; + line-height: 1.4; + display: block; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/app/assets/stylesheets/shared/blocks/form/_form-notice.css b/app/assets/stylesheets/shared/blocks/form/_form-notice.css new file mode 100644 index 00000000000..1a49d5ff4e4 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_form-notice.css @@ -0,0 +1,19 @@ + +.form-notice { +} + +.form-notice:not(:first-child) { + margin-top: 1em; +} + +@media (min-width: 48em) { + .form-notice { + margin-bottom: 2rem; + } +} + +@media (max-width: 47.9375em) { + .form-notice { + margin-bottom: 1.5rem; + } +} diff --git a/app/assets/stylesheets/shared/blocks/form/_form-selects.css b/app/assets/stylesheets/shared/blocks/form/_form-selects.css new file mode 100644 index 00000000000..2542cde4fe8 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_form-selects.css @@ -0,0 +1,73 @@ +.form-selects { + display: flex; +} + +.form-selects__item { + display: flex; + align-items: center; +} + +@media (max-width: 47.9375em) { + .form-selects__item { + flex-basis: 50%; + position: relative; + } +} + +@media (max-width: 47.9375em) { + .form-selects__item:first-child { + padding-right: .375rem; + } +} + +@media (max-width: 47.9375em) { + .form-selects__item:last-child { + padding-left: .375rem; + } +} + +.form-selects__item.has-colon::after { + content: ":"; + display: flex; + align-items: center; + justify-content: center; +} + +@media (min-width: 48em) { + .form-selects__item.has-colon::after { + padding-inline: .5rem; + } +} + +@media (max-width: 47.9375em) { + .form-selects__item.has-colon::after { + width: .75rem; + position: absolute; + right: -.375rem; + top: 0; + bottom: 0; + } +} + +.form-selects__item.has-slash::after { + content: "/"; + display: flex; + align-items: center; + justify-content: center; +} + +@media (min-width: 48em) { + .form-selects__item.has-slash::after { + padding-inline: .5rem; + } +} + +@media (max-width: 47.9375em) { + .form-selects__item.has-slash::after { + width: .75rem; + position: absolute; + right: -.375rem; + top: 0; + bottom: 0; + } +} diff --git a/app/assets/stylesheets/shared/blocks/form/_form-table.css b/app/assets/stylesheets/shared/blocks/form/_form-table.css new file mode 100644 index 00000000000..20f0e364fe7 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_form-table.css @@ -0,0 +1,68 @@ +.form-table { + overflow: auto; + max-width: 100%; +} +.form-table.is-sm { + font-size: 0.8125rem; +} +.form-table table { + border: solid 1px var(--border); +} +.form-table td, +.form-table th { + padding: 0.5rem; + border: solid 1px var(--border); +} +.form-table th { + background-color: var(--background-tint); + border: solid 1px var(--border-shade); +} +.form-table .form-table__check { + padding: 0; +} +.form-table .form-table__check label { + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem; + cursor: pointer; + border-radius: 0.25rem; +} +.form-table .form-table__check label input { + opacity: 0; + position: absolute; + pointer-events: none; +} +.form-table .form-table__check label::after { + content: ""; + height: 0.875rem; + width: 0.875rem; + border: solid 1px var(--border-shade); + border-radius: 0.25rem; +} +.form-table .form-table__check:has(:checked) label { + background: var(--input-selected-background); + box-shadow: 0 0 0 1px var(--input-selected-border) inset; +} +.form-table .form-table__check:has(:checked) label::after { + border: none; + content: "\f00c"; + font-family: "Font Awesome 6 Pro"; + font-style: normal; + font-weight: 900; + font-variant: normal; + text-rendering: auto; + line-height: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: var(--main); +} +.form-table.is-sticky thead th { + position: sticky; + top: 0; + z-index: 1; +} +.form-table.is-sticky thead th:first-child { + position: sticky; + left: 0; +} diff --git a/app/assets/stylesheets/shared/blocks/form/_form-tabs-item.css b/app/assets/stylesheets/shared/blocks/form/_form-tabs-item.css new file mode 100644 index 00000000000..25f2496d4ed --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_form-tabs-item.css @@ -0,0 +1,19 @@ +.form-tabs-item__markdown { + height: 100%; + display: none; +} +.form-tabs-item__markdown.is-active { + display: block; +} + +.form-tabs-item__textarea { + min-height: 9rem; + overflow: hidden; +} + +.form-tabs-item__preview { + background-color: var(--base); + font-size: 0.875rem; + line-height: 1.8; + min-height: 9rem; +} diff --git a/app/assets/stylesheets/shared/blocks/form/_form-tabs.css b/app/assets/stylesheets/shared/blocks/form/_form-tabs.css new file mode 100644 index 00000000000..6e8bc5d5ee7 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_form-tabs.css @@ -0,0 +1,39 @@ +.form-tabs { + display: flex; + border-bottom: solid 1px var(--border); +} + +.form-tabs__tab { + width: 5.5rem; + padding-block: 0.75rem 1rem; + font-size: 0.8125rem; + line-height: 1; + display: flex; + display: flex; + white-space: nowrap; + color: var(--muted-text); + align-items: center; + justify-content: center; + cursor: pointer; + position: relative; + transition: all 0.2s ease-out; +} +.form-tabs__tab:hover { + color: var(--default-text); + text-decoration: underline; +} +.form-tabs__tab.is-active { + color: var(--default-text); + font-weight: 600; + pointer-events: none; +} +.form-tabs__tab.is-active::before { + content: ""; + display: block; + height: 0.375rem; + position: absolute; + left: 0; + right: 0; + bottom: 0; + background-color: var(--warning); +} diff --git a/app/assets/stylesheets/shared/blocks/form/_form-textarea.css b/app/assets/stylesheets/shared/blocks/form/_form-textarea.css new file mode 100644 index 00000000000..4ed9ec3e5e3 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_form-textarea.css @@ -0,0 +1,50 @@ + +.form-textarea { + position: relative; + textarea.a-text-input { + padding-bottom: 3rem; + + } +} +@media (max-width: 63.9375em) { + .form-textarea__bottom-note { + display: none; + + } +} +@media (min-width: 64em) { + .form-textarea__bottom-note { + font-size: .75rem; + line-height: 1.4; + text-align: center; + + } +} +.form-textarea__footer { + height: 2rem; + display: flex; + gap: 1rem; + align-items: center; + background-color: var(--background); + position: absolute; + left: 1px; + bottom: 1px; + right: 1px; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + padding-left: .5rem; + padding-right: .5rem; + border-top: solid 1px var(--border-shade); + +} +.form-textarea__bottom-note { + @media (max-width: 63.9375em) { + display: none; + } + @media (min-width: 64em) { + font-size: .75rem; + line-height: 1.4; + text-align: center; + + } +} diff --git a/app/assets/stylesheets/shared/blocks/form/_form-times.css b/app/assets/stylesheets/shared/blocks/form/_form-times.css new file mode 100644 index 00000000000..a4c7bee9498 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_form-times.css @@ -0,0 +1,77 @@ + +.form-times { +} + +@media (min-width: 48em) { + .form-times { + display: flex; + align-items: flex-end; + } +} + +@media (max-width: 47.9375em) { + .form-times { + display: block; + } +} + +.form-times__inner { + margin-bottom: 1rem; +} + +@media (min-width: 48em) { + .form-times__inner { + display: flex; + align-items: flex-end; + } +} + +.form-times__items { + display: flex; +} + +@media (max-width: 47.9375em) { + .form-times__items { + gap: 1rem; + } +} + +.form-times__action { +} + +@media (max-width: 47.9375em) { + .form-times__action { + margin-top: .75rem; + display: flex; + justify-content: flex-end; + } +} + +#tasks .form-item:first-child .form-times__action { + display: none; +} + +.form-times__time { + display: flex; + flex-direction: column; +} + +@media (min-width: 48em) { + .form-times__time { + margin-right: 1rem; + } +} + +@media (max-width: 47.9375em) { + .form-times__time { + margin-right: 0; + flex-basis: 50%; + } +} + +.form-times__time-label { + font-size: .75rem; + line-height: 1.4; + margin-bottom: .5em; + display: block; +} diff --git a/app/assets/stylesheets/shared/blocks/form/_form.css b/app/assets/stylesheets/shared/blocks/form/_form.css new file mode 100644 index 00000000000..6aa9d5c9aa7 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_form.css @@ -0,0 +1,38 @@ + +.form { + margin-inline: auto; +} + +.a-card + .form { + margin-top: 1.25rem; +} + +.form + .form { + margin-top: 1rem; + border-top: dashed 1px var(--border); + padding-top: 1rem; +} + +.form__items + .form__items { + margin-top: 1.75rem; +} + +.form__items-title { + font-size: .875rem; + line-height: 1.4; + margin-bottom: 1.5rem; + font-weight: 700; + color: var(--reversal-text); + background-color: var(--main); + padding: .625rem 1rem; + border-radius: .25rem; +} + +.form__items > .a-form-label { + margin-bottom: .875rem; +} + +.form__items-inner { + width: 42.5rem; + max-width: 100%; +} diff --git a/app/assets/stylesheets/shared/blocks/form/_hidden-form-item.css b/app/assets/stylesheets/shared/blocks/form/_hidden-form-item.css new file mode 100644 index 00000000000..4b58d556f1f --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_hidden-form-item.css @@ -0,0 +1,11 @@ +.hidden-form-item__target { + display: none; +} + +input:checked + .hidden-form-item__trigger + .hidden-form-item__target { + display: block; +} + +input:checked + .hidden-form-item__trigger { + display: none; +} diff --git a/app/assets/stylesheets/shared/blocks/form/_important-message.css b/app/assets/stylesheets/shared/blocks/form/_important-message.css new file mode 100644 index 00000000000..193536b9538 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_important-message.css @@ -0,0 +1,28 @@ + +.important-message { + border: solid 2px var(--danger); + border-radius: .25rem; + overflow: hidden; +} + +.important-message + form { + margin-top: 2rem; +} + +.important-message__header { + border-bottom: solid 1px var(--danger); + padding: .5rem 1rem; + background-color: var(--danger-tint); +} + +.important-message__title { + font-size: .875rem; + line-height: 1.4; + font-weight: 800; + color: var(--danger-text); +} + +.important-message__body { + padding: .75rem 1rem; + background-color: var(--danger-tint); +} diff --git a/app/assets/stylesheets/shared/blocks/form/_linear-scale.css b/app/assets/stylesheets/shared/blocks/form/_linear-scale.css new file mode 100644 index 00000000000..3f5bb348e12 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_linear-scale.css @@ -0,0 +1,75 @@ +.linear-scale { + display: flex; + align-items: center; +} + +.linear-scale__label { + font-size: 0.8125rem; + line-height: 1.4; +} + +.linear-scale__label:first-child { + margin-right: 1rem; +} + +.linear-scale__label:last-child { + margin-left: 1rem; +} + +.linear-scale__points { + flex: 1; +} + +.linear-scale__points-items { + display: flex; + justify-content: space-between; +} + +.linear-scale__point { + display: flex; + flex-direction: column; + font-size: 0.875rem; + line-height: 1.4; + color: var(--semi-muted-text); + position: relative; + cursor: pointer; + padding-bottom: 0.875rem; + width: 2.25rem; + text-align: center; + transition: color 0.2s ease-out; +} + +.linear-scale__point::before { + content: ""; + height: 0.875rem; + width: 0.875rem; + border: solid 1px var(--input-border); + bottom: 0; + left: 50%; + position: absolute; + transform: translate(-50%, 0); + background-color: var(--base); + border-radius: 50%; + font-size: 0.75rem; + color: var(--reversal-text); + transition: all 0.2s ease-out; +} + +.linear-scale__point:hover::before { + background-color: rgba(87, 82, 232, 0.4); + border-color: var(--primary); +} + +input:checked + .linear-scale__point { + color: var(--default-text); +} + +input:checked + .linear-scale__point::before { + background-color: var(--primary); + border-color: var(--primary); + box-shadow: inset 0 0 0 1px var(--background); +} + +input:checked + .linear-scale__point:hover::before { + border-color: var(--primary); +} diff --git a/app/assets/stylesheets/shared/blocks/form/_many-check-boxes.css b/app/assets/stylesheets/shared/blocks/form/_many-check-boxes.css new file mode 100644 index 00000000000..818d1106cac --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_many-check-boxes.css @@ -0,0 +1,26 @@ +.many-check-boxes { + max-height: 16rem; + overflow-y: auto; + background-color: #f7f7f7; + border: solid 1px #c1c5b9; + border-radius: 0.25rem; +} + +.many-check-boxes__item-label { + font-size: 0.8125rem; + line-height: 1.4; + display: block; + padding: 0.5rem; + border-bottom: solid 1px #ccc; + cursor: pointer; +} +.many-check-boxes__item-label.is-checked { + background-color: var(--accent); + color: var(--main-text); +} +.many-check-boxes__item:last-child .many-check-boxes__item-label { + border-bottom: none; +} +.many-check-boxes__item-label input { + margin-right: 0.75rem; +} diff --git a/app/assets/stylesheets/shared/blocks/form/_markdown-form.css b/app/assets/stylesheets/shared/blocks/form/_markdown-form.css new file mode 100644 index 00000000000..8d8bfb9e597 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_markdown-form.css @@ -0,0 +1,30 @@ + +.markdown-form__text-area.a-text-input { + min-height: 30rem; +} + +@media (max-width: 47.9375em) { + .markdown-form__text-area.a-text-input { + margin-bottom: 1rem; + } +} + +.markdown-form__preview { + background-color: var(--base); + font-size: .875rem; + line-height: 1.8; + border-radius: .25rem; + min-height: 30rem; +} + +@media (min-width: 48em) { + .markdown-form__preview { + padding: 1rem; + } +} + +@media (max-width: 47.9375em) { + .markdown-form__preview { + padding: .5rem; + } +} diff --git a/app/assets/stylesheets/shared/blocks/form/_radios.css b/app/assets/stylesheets/shared/blocks/form/_radios.css new file mode 100644 index 00000000000..87f547af914 --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_radios.css @@ -0,0 +1,62 @@ +.radios__items { + display: flex; + flex-wrap: wrap; + column-gap: 1.5rem; + row-gap: 0.75rem; +} + +.radios__item label { + font-size: 0.875rem; + line-height: 1.4; + display: block; + color: var(--semi-muted-text); + position: relative; + text-decoration: none; + cursor: pointer; + padding-left: calc(0.875rem * 1.4); + transition: text-decoration 0.2s ease-out; +} + +.radios__item label:hover, +.radios__item label:active { + text-decoration: underline; +} + +.radios__item label.is-sm { + font-size: 0.8125rem; +} + +.radios__item label::before { + content: ""; + height: 0.875rem; + width: 0.875rem; + border: solid 1px var(--input-border); + position: absolute; + left: 0; + top: 50%; + transform: translate(0, -50%); + background-color: var(--base); + border-radius: 50%; + font-size: 0.75rem; + color: var(--reversal-text); + transition: all 0.2s ease-out; +} + +.radios__item label:hover::before { + background-color: rgba(87, 82, 232, 0.4); + border-color: var(--primary); +} + +.radios__item input:checked + label { + color: var(--default-text); +} + +.radios__item input:checked + label::before { + background-color: var(--primary); + border-color: var(--primary); + box-shadow: inset 0 0 0 1px var(--background); +} + +.radios__item input:checked + label:hover::before { + border-color: var(--primary); +} diff --git a/app/assets/stylesheets/shared/blocks/form/_vue-tags-input.css b/app/assets/stylesheets/shared/blocks/form/_vue-tags-input.css new file mode 100644 index 00000000000..5b575d0f7dc --- /dev/null +++ b/app/assets/stylesheets/shared/blocks/form/_vue-tags-input.css @@ -0,0 +1,14 @@ +.vue-tags-input { + max-width: 100% !important; +} + +body .vue-tags-input .ti-input { + border-radius: 4px; + background-color: var(--input-background); + border-color: var(--input-border); + transition: all 0.2s ease-out; +} +body .vue-tags-input .ti-input:hover { + background-color: var(--input-hover-background); + border-color: var(--input-hover-border); +} diff --git a/app/assets/stylesheets/shared/helpers/_state.css b/app/assets/stylesheets/shared/helpers/_state.css new file mode 100644 index 00000000000..13e3b6f6f08 --- /dev/null +++ b/app/assets/stylesheets/shared/helpers/_state.css @@ -0,0 +1,47 @@ +html *[hidden], +html .is-hidden { + display: none !important; +} + +@media (min-width: 64em) { + body .is-hidden-lg-up { + display: none; + } +} + +@media (max-width: 63.9375em) { + body .is-hidden-lg-down { + display: none; + } +} + +@media (min-width: 48em) { + body .is-hidden-md-up { + display: none !important; + } +} + +@media (max-width: 47.9375em) { + body .is-hidden-md-down { + display: none; + } +} + +@media (max-width: 47.9375em) { + body .is-hidden-sm-down { + display: none; + } +} + +body:not(.is-mentor-mode) .is-only-mentor { + display: none !important; +} + +body:not(.is-adviser-mode) .is-only-adviser { + display: none !important; +} + +body.is-mentor-mode .is-only-mentor.is-only-adviser, +body.is-adviser-mode .is-only-mentor.is-only-adviser { + display: block !important; +} diff --git a/app/assets/stylesheets/shared/layouts/_columns.css b/app/assets/stylesheets/shared/layouts/_columns.css new file mode 100644 index 00000000000..0d842a1f9fe --- /dev/null +++ b/app/assets/stylesheets/shared/layouts/_columns.css @@ -0,0 +1,145 @@ +/* ========================================================= + Layout containers +========================================================= */ +:is(.columns, .row) { + display: flex; + flex-wrap: wrap; + + /* defaults */ + --grid-columns: 12; + --gutter: 1rem; + + gap: var(--gutter); + + /* 1 column width (no outer gutters; only between columns) */ + --one-col: calc( + (100% - (var(--grid-columns) - 1) * var(--gutter)) / var(--grid-columns) + ); +} + +:is(.row, .columns).justify-center { + justify-content: center; +} + +.columns + .columns { + margin-top: 1.5rem; +} + + +/* ========================================================= + Gutter variations +========================================================= */ +:is(.row, .columns).is-gutter-width-0 { --gutter: 0; gap: 0; } +:is(.row, .columns).is-gutter-width-24 { --gutter: 1.5rem; gap: 1.5rem; } +:is(.row, .columns).is-gutter-width-32 { --gutter: 2rem; gap: 2rem; } +:is(.row, .columns).is-gutter-width-56 { --gutter: 3.5rem; gap: 3.5rem; } + +/* ========================================================= + Column width helpers (formula) + width(n) = one-col * n + (n - 1) * gutter +========================================================= */ +.col-xs-1 { flex: 0 0 var(--one-col); max-width: var(--one-col); } +.col-xs-2 { flex: 0 0 calc(var(--one-col) * 2 + 1 * var(--gutter)); max-width: calc(var(--one-col) * 2 + 1 * var(--gutter)); } +.col-xs-3 { flex: 0 0 calc(var(--one-col) * 3 + 2 * var(--gutter)); max-width: calc(var(--one-col) * 3 + 2 * var(--gutter)); } +.col-xs-4 { flex: 0 0 calc(var(--one-col) * 4 + 3 * var(--gutter)); max-width: calc(var(--one-col) * 4 + 3 * var(--gutter)); } +.col-xs-5 { flex: 0 0 calc(var(--one-col) * 5 + 4 * var(--gutter)); max-width: calc(var(--one-col) * 5 + 4 * var(--gutter)); } +.col-xs-6 { flex: 0 0 calc(var(--one-col) * 6 + 5 * var(--gutter)); max-width: calc(var(--one-col) * 6 + 5 * var(--gutter)); } +.col-xs-7 { flex: 0 0 calc(var(--one-col) * 7 + 6 * var(--gutter)); max-width: calc(var(--one-col) * 7 + 6 * var(--gutter)); } +.col-xs-8 { flex: 0 0 calc(var(--one-col) * 8 + 7 * var(--gutter)); max-width: calc(var(--one-col) * 8 + 7 * var(--gutter)); } +.col-xs-9 { flex: 0 0 calc(var(--one-col) * 9 + 8 * var(--gutter)); max-width: calc(var(--one-col) * 9 + 8 * var(--gutter)); } +.col-xs-10 { flex: 0 0 calc(var(--one-col) * 10 + 9 * var(--gutter)); max-width: calc(var(--one-col) * 10 + 9 * var(--gutter)); } +.col-xs-11 { flex: 0 0 calc(var(--one-col) * 11 + 10 * var(--gutter)); max-width: calc(var(--one-col) * 11 + 10 * var(--gutter)); } +.col-xs-12 { flex: 0 0 100%; max-width: 100%; } + +/* ========================================================= + Breakpoints +========================================================= */ +@media (min-width: 40em) { + .col-sm-1 { flex: 0 0 var(--one-col); max-width: var(--one-col); } + .col-sm-2 { flex: 0 0 calc(var(--one-col) * 2 + 1 * var(--gutter)); max-width: calc(var(--one-col) * 2 + 1 * var(--gutter)); } + .col-sm-3 { flex: 0 0 calc(var(--one-col) * 3 + 2 * var(--gutter)); max-width: calc(var(--one-col) * 3 + 2 * var(--gutter)); } + .col-sm-4 { flex: 0 0 calc(var(--one-col) * 4 + 3 * var(--gutter)); max-width: calc(var(--one-col) * 4 + 3 * var(--gutter)); } + .col-sm-5 { flex: 0 0 calc(var(--one-col) * 5 + 4 * var(--gutter)); max-width: calc(var(--one-col) * 5 + 4 * var(--gutter)); } + .col-sm-6 { flex: 0 0 calc(var(--one-col) * 6 + 5 * var(--gutter)); max-width: calc(var(--one-col) * 6 + 5 * var(--gutter)); } + .col-sm-7 { flex: 0 0 calc(var(--one-col) * 7 + 6 * var(--gutter)); max-width: calc(var(--one-col) * 7 + 6 * var(--gutter)); } + .col-sm-8 { flex: 0 0 calc(var(--one-col) * 8 + 7 * var(--gutter)); max-width: calc(var(--one-col) * 8 + 7 * var(--gutter)); } + .col-sm-9 { flex: 0 0 calc(var(--one-col) * 9 + 8 * var(--gutter)); max-width: calc(var(--one-col) * 9 + 8 * var(--gutter)); } + .col-sm-10 { flex: 0 0 calc(var(--one-col) * 10 + 9 * var(--gutter)); max-width: calc(var(--one-col) * 10 + 9 * var(--gutter)); } + .col-sm-11 { flex: 0 0 calc(var(--one-col) * 11 + 10 * var(--gutter)); max-width: calc(var(--one-col) * 11 + 10 * var(--gutter)); } + .col-sm-12 { flex: 0 0 100%; max-width: 100%; } +} + +@media (min-width: 48em) { + .col-md-1 { flex: 0 0 var(--one-col); max-width: var(--one-col); } + .col-md-2 { flex: 0 0 calc(var(--one-col) * 2 + 1 * var(--gutter)); max-width: calc(var(--one-col) * 2 + 1 * var(--gutter)); } + .col-md-3 { flex: 0 0 calc(var(--one-col) * 3 + 2 * var(--gutter)); max-width: calc(var(--one-col) * 3 + 2 * var(--gutter)); } + .col-md-4 { flex: 0 0 calc(var(--one-col) * 4 + 3 * var(--gutter)); max-width: calc(var(--one-col) * 4 + 3 * var(--gutter)); } + .col-md-5 { flex: 0 0 calc(var(--one-col) * 5 + 4 * var(--gutter)); max-width: calc(var(--one-col) * 5 + 4 * var(--gutter)); } + .col-md-6 { flex: 0 0 calc(var(--one-col) * 6 + 5 * var(--gutter)); max-width: calc(var(--one-col) * 6 + 5 * var(--gutter)); } + .col-md-7 { flex: 0 0 calc(var(--one-col) * 7 + 6 * var(--gutter)); max-width: calc(var(--one-col) * 7 + 6 * var(--gutter)); } + .col-md-8 { flex: 0 0 calc(var(--one-col) * 8 + 7 * var(--gutter)); max-width: calc(var(--one-col) * 8 + 7 * var(--gutter)); } + .col-md-9 { flex: 0 0 calc(var(--one-col) * 9 + 8 * var(--gutter)); max-width: calc(var(--one-col) * 9 + 8 * var(--gutter)); } + .col-md-10 { flex: 0 0 calc(var(--one-col) * 10 + 9 * var(--gutter)); max-width: calc(var(--one-col) * 10 + 9 * var(--gutter)); } + .col-md-11 { flex: 0 0 calc(var(--one-col) * 11 + 10 * var(--gutter)); max-width: calc(var(--one-col) * 11 + 10 * var(--gutter)); } + .col-md-12 { flex: 0 0 100%; max-width: 100%; } +} + +@media (min-width: 64em) { + .col-lg-1 { flex: 0 0 var(--one-col); max-width: var(--one-col); } + .col-lg-2 { flex: 0 0 calc(var(--one-col) * 2 + 1 * var(--gutter)); max-width: calc(var(--one-col) * 2 + 1 * var(--gutter)); } + .col-lg-3 { flex: 0 0 calc(var(--one-col) * 3 + 2 * var(--gutter)); max-width: calc(var(--one-col) * 3 + 2 * var(--gutter)); } + .col-lg-4 { flex: 0 0 calc(var(--one-col) * 4 + 3 * var(--gutter)); max-width: calc(var(--one-col) * 4 + 3 * var(--gutter)); } + .col-lg-5 { flex: 0 0 calc(var(--one-col) * 5 + 4 * var(--gutter)); max-width: calc(var(--one-col) * 5 + 4 * var(--gutter)); } + .col-lg-6 { flex: 0 0 calc(var(--one-col) * 6 + 5 * var(--gutter)); max-width: calc(var(--one-col) * 6 + 5 * var(--gutter)); } + .col-lg-7 { flex: 0 0 calc(var(--one-col) * 7 + 6 * var(--gutter)); max-width: calc(var(--one-col) * 7 + 6 * var(--gutter)); } + .col-lg-8 { flex: 0 0 calc(var(--one-col) * 8 + 7 * var(--gutter)); max-width: calc(var(--one-col) * 8 + 7 * var(--gutter)); } + .col-lg-9 { flex: 0 0 calc(var(--one-col) * 9 + 8 * var(--gutter)); max-width: calc(var(--one-col) * 9 + 8 * var(--gutter)); } + .col-lg-10 { flex: 0 0 calc(var(--one-col) * 10 + 9 * var(--gutter)); max-width: calc(var(--one-col) * 10 + 9 * var(--gutter)); } + .col-lg-11 { flex: 0 0 calc(var(--one-col) * 11 + 10 * var(--gutter)); max-width: calc(var(--one-col) * 11 + 10 * var(--gutter)); } + .col-lg-12 { flex: 0 0 100%; max-width: 100%; } +} + +@media (min-width: 80em) { + .col-xl-1 { flex: 0 0 var(--one-col); max-width: var(--one-col); } + .col-xl-2 { flex: 0 0 calc(var(--one-col) * 2 + 1 * var(--gutter)); max-width: calc(var(--one-col) * 2 + 1 * var(--gutter)); } + .col-xl-3 { flex: 0 0 calc(var(--one-col) * 3 + 2 * var(--gutter)); max-width: calc(var(--one-col) * 3 + 2 * var(--gutter)); } + .col-xl-4 { flex: 0 0 calc(var(--one-col) * 4 + 3 * var(--gutter)); max-width: calc(var(--one-col) * 4 + 3 * var(--gutter)); } + .col-xl-5 { flex: 0 0 calc(var(--one-col) * 5 + 4 * var(--gutter)); max-width: calc(var(--one-col) * 5 + 4 * var(--gutter)); } + .col-xl-6 { flex: 0 0 calc(var(--one-col) * 6 + 5 * var(--gutter)); max-width: calc(var(--one-col) * 6 + 5 * var(--gutter)); } + .col-xl-7 { flex: 0 0 calc(var(--one-col) * 7 + 6 * var(--gutter)); max-width: calc(var(--one-col) * 7 + 6 * var(--gutter)); } + .col-xl-8 { flex: 0 0 calc(var(--one-col) * 8 + 7 * var(--gutter)); max-width: calc(var(--one-col) * 8 + 7 * var(--gutter)); } + .col-xl-9 { flex: 0 0 calc(var(--one-col) * 9 + 8 * var(--gutter)); max-width: calc(var(--one-col) * 9 + 8 * var(--gutter)); } + .col-xl-10 { flex: 0 0 calc(var(--one-col) * 10 + 9 * var(--gutter)); max-width: calc(var(--one-col) * 10 + 9 * var(--gutter)); } + .col-xl-11 { flex: 0 0 calc(var(--one-col) * 11 + 10 * var(--gutter)); max-width: calc(var(--one-col) * 11 + 10 * var(--gutter)); } + .col-xl-12 { flex: 0 0 100%; max-width: 100%; } +} + +@media (min-width: 96em) { + .col-xxl-1 { flex: 0 0 var(--one-col); max-width: var(--one-col); } + .col-xxl-2 { flex: 0 0 calc(var(--one-col) * 2 + 1 * var(--gutter)); max-width: calc(var(--one-col) * 2 + 1 * var(--gutter)); } + .col-xxl-3 { flex: 0 0 calc(var(--one-col) * 3 + 2 * var(--gutter)); max-width: calc(var(--one-col) * 3 + 2 * var(--gutter)); } + .col-xxl-4 { flex: 0 0 calc(var(--one-col) * 4 + 3 * var(--gutter)); max-width: calc(var(--one-col) * 4 + 3 * var(--gutter)); } + .col-xxl-5 { flex: 0 0 calc(var(--one-col) * 5 + 4 * var(--gutter)); max-width: calc(var(--one-col) * 5 + 4 * var(--gutter)); } + .col-xxl-6 { flex: 0 0 calc(var(--one-col) * 6 + 5 * var(--gutter)); max-width: calc(var(--one-col) * 6 + 5 * var(--gutter)); } + .col-xxl-7 { flex: 0 0 calc(var(--one-col) * 7 + 6 * var(--gutter)); max-width: calc(var(--one-col) * 7 + 6 * var(--gutter)); } + .col-xxl-8 { flex: 0 0 calc(var(--one-col) * 8 + 7 * var(--gutter)); max-width: calc(var(--one-col) * 8 + 7 * var(--gutter)); } + .col-xxl-9 { flex: 0 0 calc(var(--one-col) * 9 + 8 * var(--gutter)); max-width: calc(var(--one-col) * 9 + 8 * var(--gutter)); } + .col-xxl-10 { flex: 0 0 calc(var(--one-col) * 10 + 9 * var(--gutter)); max-width: calc(var(--one-col) * 10 + 9 * var(--gutter)); } + .col-xxl-11 { flex: 0 0 calc(var(--one-col) * 11 + 10 * var(--gutter)); max-width: calc(var(--one-col) * 11 + 10 * var(--gutter)); } + .col-xxl-12 { flex: 0 0 100%; max-width: 100%; } +} + +@media (min-width: 120em) { + .col-xxxl-1 { flex: 0 0 var(--one-col); max-width: var(--one-col); } + .col-xxxl-2 { flex: 0 0 calc(var(--one-col) * 2 + 1 * var(--gutter)); max-width: calc(var(--one-col) * 2 + 1 * var(--gutter)); } + .col-xxxl-3 { flex: 0 0 calc(var(--one-col) * 3 + 2 * var(--gutter)); max-width: calc(var(--one-col) * 3 + 2 * var(--gutter)); } + .col-xxxl-4 { flex: 0 0 calc(var(--one-col) * 4 + 3 * var(--gutter)); max-width: calc(var(--one-col) * 4 + 3 * var(--gutter)); } + .col-xxxl-5 { flex: 0 0 calc(var(--one-col) * 5 + 4 * var(--gutter)); max-width: calc(var(--one-col) * 5 + 4 * var(--gutter)); } + .col-xxxl-6 { flex: 0 0 calc(var(--one-col) * 6 + 5 * var(--gutter)); max-width: calc(var(--one-col) * 6 + 5 * var(--gutter)); } + .col-xxxl-7 { flex: 0 0 calc(var(--one-col) * 7 + 6 * var(--gutter)); max-width: calc(var(--one-col) * 7 + 6 * var(--gutter)); } + .col-xxxl-8 { flex: 0 0 calc(var(--one-col) * 8 + 7 * var(--gutter)); max-width: calc(var(--one-col) * 8 + 7 * var(--gutter)); } + .col-xxxl-9 { flex: 0 0 calc(var(--one-col) * 9 + 8 * var(--gutter)); max-width: calc(var(--one-col) * 9 + 8 * var(--gutter)); } + .col-xxxl-10 { flex: 0 0 calc(var(--one-col) * 10 + 9 * var(--gutter)); max-width: calc(var(--one-col) * 10 + 9 * var(--gutter)); } + .col-xxxl-11 { flex: 0 0 calc(var(--one-col) * 11 + 10 * var(--gutter)); max-width: calc(var(--one-col) * 11 + 10 * var(--gutter)); } + .col-xxxl-12 { flex: 0 0 100%; max-width: 100%; } +} diff --git a/app/assets/stylesheets/shared/layouts/_container.css b/app/assets/stylesheets/shared/layouts/_container.css new file mode 100644 index 00000000000..d41e0a4d0fd --- /dev/null +++ b/app/assets/stylesheets/shared/layouts/_container.css @@ -0,0 +1,36 @@ +.container { + width: 100%; + max-width: 100%; + margin-inline: auto; + padding-inline: 1rem; +} +.container.is-xxxl { + max-width: 108rem; +} +.container.is-xxl { + max-width: 96rem; +} +.container.is-xl { + max-width: 80rem; +} +.container.is-lg { + max-width: 64rem; +} +.container.is-md { + max-width: 48rem; +} +.container.is-sm { + max-width: 40rem; +} +.container.is-xs { + width: 32rem; +} +.container.is-xxs { + max-width: 28rem; +} + +@media (min-width: 48em) { + .container { + padding-inline: 1.5rem; + } +} diff --git a/app/assets/stylesheets/shared/layouts/_l-container.css b/app/assets/stylesheets/shared/layouts/_l-container.css new file mode 100644 index 00000000000..e66dab4d96f --- /dev/null +++ b/app/assets/stylesheets/shared/layouts/_l-container.css @@ -0,0 +1,36 @@ +.l-container { + width: 100%; + max-width: 100vw; + margin-inline: auto; + padding-inline: 1rem; +} +.l-container.is-xxxl { + max-width: 108rem; +} +.l-container.is-xxl { + max-width: 96rem; +} +.l-container.is-xl { + max-width: 80rem; +} +.l-container.is-lg { + max-width: 64rem; +} +.l-container.is-md { + max-width: 48rem; +} +.l-container.is-sm { + width: 40rem; +} +.l-container.is-xs { + width: 32rem; +} +.l-container.is-xxs { + width: 28rem; +} + +@media (min-width: 48em) { + .l-container { + padding-inline: 1.5rem; + } +} diff --git a/app/assets/stylesheets/shared/layouts/_l-inner-container.css b/app/assets/stylesheets/shared/layouts/_l-inner-container.css new file mode 100644 index 00000000000..eb905369c74 --- /dev/null +++ b/app/assets/stylesheets/shared/layouts/_l-inner-container.css @@ -0,0 +1,29 @@ +.l-inner-container { + width: 100%; + max-width: calc(100vw - 32px); + margin-inline: auto; +} +.l-inner-container.is-xxxl { + max-width: 108rem; +} +.l-inner-container.is-xxl { + max-width: 96rem; +} +.l-inner-container.is-xl { + max-width: 80rem; +} +.l-inner-container.is-lg { + max-width: 64rem; +} +.l-inner-container.is-md { + max-width: 48rem; +} +.l-inner-container.is-sm { + width: 40rem; +} +.l-inner-container.is-xs { + width: 32rem; +} +.l-inner-container.is-xxs { + width: 28rem; +} diff --git a/app/assets/stylesheets/shared/layouts/_wrapper.css b/app/assets/stylesheets/shared/layouts/_wrapper.css new file mode 100644 index 00000000000..2cdd2b802f5 --- /dev/null +++ b/app/assets/stylesheets/shared/layouts/_wrapper.css @@ -0,0 +1,18 @@ +.wrapper { + min-height: 100vh; + scroll-behavior: smooth; + overflow-y: visible; + height: auto; + display: block; +} + +.wrapper__main { + flex: 1; +} + +@media (min-width: 48em) { + .wrapper { + display: flex; + flex-direction: column; + } +} diff --git a/app/assets/stylesheets/shared/test/_test.css b/app/assets/stylesheets/shared/test/_test.css new file mode 100644 index 00000000000..bca7edf7d69 --- /dev/null +++ b/app/assets/stylesheets/shared/test/_test.css @@ -0,0 +1,14 @@ +html body.is-test .wrapper { + height: auto; +} +html body.is-test .test-fixed-bottom { + position: fixed; + right: 10rem; + bottom: 10rem; +} +html body.is-test .test-inline-block { + display: inline-block; +} +html body.is-test .test-block { + display: block; +} diff --git a/app/assets/stylesheets/shared/utilities/_visibility.css b/app/assets/stylesheets/shared/utilities/_visibility.css new file mode 100644 index 00000000000..ee59ce7e1b9 --- /dev/null +++ b/app/assets/stylesheets/shared/utilities/_visibility.css @@ -0,0 +1,27 @@ +.is-hidden { + display: none !important; +} + +@media (max-width: 47.9375em) { + .is-hidden-sm-down { + display: none !important; + } +} + +@media (min-width: 48em) { + .is-hidden-md-up { + display: none !important; + } +} + +@media (max-width: 63.9375em) { + .is-hidden-md-down { + display: none !important; + } +} + +@media (min-width: 64em) { + .is-hidden-lg-up { + display: none !important; + } +} diff --git a/app/assets/stylesheets/vendor/choices.min.css b/app/assets/stylesheets/vendor/choices.min.css new file mode 100644 index 00000000000..9260536aa77 --- /dev/null +++ b/app/assets/stylesheets/vendor/choices.min.css @@ -0,0 +1 @@ +.choices{position:relative;overflow:hidden;margin-bottom:24px;font-size:16px}.choices:focus{outline:0}.choices:last-child{margin-bottom:0}.choices.is-open{overflow:visible}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;-webkit-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices [hidden]{display:none!important}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__inner{padding-bottom:7.5px}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;margin:0}.choices[data-type*=select-one] .choices__button{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);padding:0;background-size:8px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:25px;height:20px;width:20px;border-radius:10em;opacity:.25}.choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover{opacity:1}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px #00bcd4}.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button{display:none}.choices[data-type*=select-one]::after{content:"";height:0;width:0;border-style:solid;border-color:#333 transparent transparent;border-width:5px;position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none}.choices[data-type*=select-one].is-open::after{border-color:transparent transparent #333;margin-top:-7.5px}.choices[data-type*=select-one][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one][dir=rtl] .choices__button{right:auto;left:0;margin-left:25px;margin-right:0}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;margin:0-4px 0 8px;padding-left:16px;border-left:1px solid #008fa1;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);background-size:8px;width:8px;line-height:1;opacity:.75;border-radius:0}.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover{opacity:1}.choices__inner{display:inline-block;vertical-align:top;width:100%;background-color:#f9f9f9;padding:7.5px 7.5px 3.75px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;min-height:44px;overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:#b7b7b7}.is-open .choices__inner{border-radius:2.5px 2.5px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 2.5px 2.5px}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:inline-block;padding:4px 16px 4px 4px;width:100%}[dir=rtl] .choices__list--single{padding-right:4px;padding-left:16px}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#00bcd4;border:1px solid #00a5bb;color:#fff;word-break:break-all;box-sizing:border-box}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}[dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.choices__list--multiple .choices__item.is-highlighted{background-color:#00a5bb;border:1px solid #008fa1}.is-disabled .choices__list--multiple .choices__item{background-color:#aaa;border:1px solid #919191}.choices__list--dropdown,.choices__list[aria-expanded]{visibility:hidden;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px;overflow:hidden;word-break:break-all;will-change:visibility}.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded]{visibility:visible}.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded]{border-color:#b7b7b7}.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded]{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item{position:relative;padding:10px;font-size:14px}[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item{text-align:right}@media (min-width:640px){.choices__list--dropdown .choices__item--selectable,.choices__list[aria-expanded] .choices__item--selectable{padding-right:100px}.choices__list--dropdown .choices__item--selectable::after,.choices__list[aria-expanded] .choices__item--selectable::after{content:attr(data-select-text);font-size:12px;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}[dir=rtl] .choices__list--dropdown .choices__item--selectable,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable{text-align:right;padding-left:100px;padding-right:10px}[dir=rtl] .choices__list--dropdown .choices__item--selectable::after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after{right:auto;left:10px}}.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted::after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after{opacity:.5}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;user-select:none;opacity:.5}.choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid #f7f7f7;color:gray}.choices__button{text-indent:-9999px;-webkit-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__button:focus,.choices__input:focus{outline:0}.choices__input{display:inline-block;vertical-align:baseline;background-color:#f9f9f9;font-size:14px;margin-bottom:5px;border:0;border-radius:0;max-width:100%;padding:4px 0 4px 2px}.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration{display:none}.choices__input::-ms-clear,.choices__input::-ms-reveal{display:none;width:0;height:0}[dir=rtl] .choices__input{padding-right:2px;padding-left:0}.choices__placeholder{opacity:.5} \ No newline at end of file diff --git a/app/assets/stylesheets/vendor/tagify.css b/app/assets/stylesheets/vendor/tagify.css new file mode 100644 index 00000000000..009e2d93c76 --- /dev/null +++ b/app/assets/stylesheets/vendor/tagify.css @@ -0,0 +1 @@ +@charset "UTF-8";:root{--tagify-dd-color-primary:rgb(53,149,246);--tagify-dd-bg-color:white;--tagify-dd-item-pad:.3em .5em}.tagify{--tags-disabled-bg:#F1F1F1;--tags-border-color:#DDD;--tags-hover-border-color:#CCC;--tags-focus-border-color:#3595f6;--tag-border-radius:3px;--tag-bg:#E5E5E5;--tag-hover:#D3E2E2;--tag-text-color:black;--tag-text-color--edit:black;--tag-pad:0.3em 0.5em;--tag-inset-shadow-size:1.1em;--tag-invalid-color:#D39494;--tag-invalid-bg:rgba(211, 148, 148, 0.5);--tag-remove-bg:rgba(211, 148, 148, 0.3);--tag-remove-btn-color:black;--tag-remove-btn-bg:none;--tag-remove-btn-bg--hover:#c77777;--input-color:inherit;--tag--min-width:1ch;--tag--max-width:auto;--tag-hide-transition:0.3s;--placeholder-color:rgba(0, 0, 0, 0.4);--placeholder-color-focus:rgba(0, 0, 0, 0.25);--loader-size:.8em;--readonly-striped:1;display:inline-flex;align-items:flex-start;flex-wrap:wrap;border:1px solid var(--tags-border-color);padding:0;line-height:0;cursor:text;outline:0;position:relative;box-sizing:border-box;transition:.1s}@keyframes tags--bump{30%{transform:scale(1.2)}}@keyframes rotateLoader{to{transform:rotate(1turn)}}.tagify:hover:not(.tagify--focus):not(.tagify--invalid){--tags-border-color:var(--tags-hover-border-color)}.tagify[disabled]{background:var(--tags-disabled-bg);filter:saturate(0);opacity:.5;pointer-events:none}.tagify[disabled].tagify--select,.tagify[readonly].tagify--select{pointer-events:none}.tagify[disabled]:not(.tagify--mix):not(.tagify--select),.tagify[readonly]:not(.tagify--mix):not(.tagify--select){cursor:default}.tagify[disabled]:not(.tagify--mix):not(.tagify--select)>.tagify__input,.tagify[readonly]:not(.tagify--mix):not(.tagify--select)>.tagify__input{visibility:hidden;width:0;margin:5px 0}.tagify[disabled]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div,.tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div{padding:var(--tag-pad)}.tagify[disabled]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div::before,.tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div::before{animation:readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused}@keyframes readonlyStyles{0%{background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;box-shadow:none;filter:brightness(.95)}}.tagify[disabled] .tagify__tag__removeBtn,.tagify[readonly] .tagify__tag__removeBtn{display:none}.tagify--loading .tagify__input>br:last-child{display:none}.tagify--loading .tagify__input::before{content:none}.tagify--loading .tagify__input::after{content:"";vertical-align:middle;opacity:1;width:.7em;height:.7em;width:var(--loader-size);height:var(--loader-size);min-width:0;border:3px solid;border-color:#eee #bbb #888 transparent;border-radius:50%;animation:rotateLoader .4s infinite linear;content:""!important;margin:-2px 0 -2px .5em}.tagify--loading .tagify__input:empty::after{margin-left:0}.tagify+input,.tagify+textarea{position:absolute!important;left:-9999em!important;transform:scale(0)!important}.tagify__tag{display:inline-flex;align-items:center;margin:5px 0 5px 5px;position:relative;z-index:1;outline:0;line-height:normal;cursor:default;transition:.13s ease-out}.tagify__tag>div{vertical-align:top;box-sizing:border-box;max-width:100%;padding:var(--tag-pad);color:var(--tag-text-color);line-height:inherit;border-radius:var(--tag-border-radius);white-space:nowrap;transition:.13s ease-out}.tagify__tag>div>*{white-space:pre-wrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:top;min-width:var(--tag--min-width);max-width:var(--tag--max-width);transition:.8s ease,.1s color}.tagify__tag>div>[contenteditable]{outline:0;-webkit-user-select:text;user-select:text;cursor:text;margin:-2px;padding:2px;max-width:350px}.tagify__tag>div::before{content:"";position:absolute;border-radius:inherit;inset:var(--tag-bg-inset,0);z-index:-1;pointer-events:none;transition:120ms ease;animation:tags--bump .3s ease-out 1;box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-bg) inset}.tagify__tag:focus div::before,.tagify__tag:hover:not([readonly]) div::before{--tag-bg-inset:-2.5px;--tag-bg:var(--tag-hover)}.tagify__tag--loading{pointer-events:none}.tagify__tag--loading .tagify__tag__removeBtn{display:none}.tagify__tag--loading::after{--loader-size:.4em;content:"";vertical-align:middle;opacity:1;width:.7em;height:.7em;width:var(--loader-size);height:var(--loader-size);min-width:0;border:3px solid;border-color:#eee #bbb #888 transparent;border-radius:50%;animation:rotateLoader .4s infinite linear;margin:0 .5em 0 -.1em}.tagify__tag--flash div::before{animation:none}.tagify__tag--hide{width:0!important;padding-left:0;padding-right:0;margin-left:0;margin-right:0;opacity:0;transform:scale(0);transition:var(--tag-hide-transition);pointer-events:none}.tagify__tag--hide>div>*{white-space:nowrap}.tagify__tag.tagify--noAnim>div::before{animation:none}.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div>span{opacity:.5}.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div::before{--tag-bg:var(--tag-invalid-bg);transition:.2s}.tagify__tag[readonly] .tagify__tag__removeBtn{display:none}.tagify__tag[readonly]>div::before{animation:readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused}@keyframes readonlyStyles{0%{background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;box-shadow:none;filter:brightness(.95)}}.tagify__tag--editable>div{color:var(--tag-text-color--edit)}.tagify__tag--editable>div::before{box-shadow:0 0 0 2px var(--tag-hover) inset!important}.tagify__tag--editable>.tagify__tag__removeBtn{pointer-events:none}.tagify__tag--editable>.tagify__tag__removeBtn::after{opacity:0;transform:translateX(100%) translateX(5px)}.tagify__tag--editable.tagify--invalid>div::before{box-shadow:0 0 0 2px var(--tag-invalid-color) inset!important}.tagify__tag__removeBtn{order:5;display:inline-flex;align-items:center;justify-content:center;border-radius:50px;cursor:pointer;font:14px/1 Arial;background:var(--tag-remove-btn-bg);color:var(--tag-remove-btn-color);width:14px;height:14px;margin-right:4.6666666667px;margin-left:auto;overflow:hidden;transition:.2s ease-out}.tagify__tag__removeBtn::after{content:"×";transition:.3s,color 0s}.tagify__tag__removeBtn:hover{color:#fff;background:var(--tag-remove-btn-bg--hover)}.tagify__tag__removeBtn:hover+div>span{opacity:.5}.tagify__tag__removeBtn:hover+div::before{box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg,rgba(211,148,148,.3)) inset!important;transition:box-shadow .2s}.tagify:not(.tagify--mix) .tagify__input br{display:none}.tagify:not(.tagify--mix) .tagify__input *{display:inline;white-space:nowrap}.tagify__input{flex-grow:1;display:inline-block;min-width:110px;margin:5px;padding:var(--tag-pad);line-height:normal;position:relative;white-space:pre-wrap;color:var(--input-color);box-sizing:inherit}.tagify__input:empty::before{position:static}.tagify__input:focus{outline:0}.tagify__input:focus::before{transition:.2s ease-out;opacity:0;transform:translatex(6px)}@supports (-ms-ime-align:auto){.tagify__input:focus::before{display:none}}.tagify__input:focus:empty::before{transition:.2s ease-out;opacity:1;transform:none;color:rgba(0,0,0,.25);color:var(--placeholder-color-focus)}@-moz-document url-prefix(){.tagify__input:focus:empty::after{display:none}}.tagify__input::before{content:attr(data-placeholder);height:1em;line-height:1em;margin:auto 0;z-index:1;color:var(--placeholder-color);white-space:nowrap;pointer-events:none;opacity:0;position:absolute}.tagify__input::after{content:attr(data-suggest);display:inline-block;vertical-align:middle;position:absolute;min-width:calc(100% - 1.5em);text-overflow:ellipsis;overflow:hidden;white-space:pre;color:var(--tag-text-color);opacity:.3;pointer-events:none;max-width:100px}.tagify__input .tagify__tag{margin:0 1px}.tagify--mix{display:block}.tagify--mix .tagify__input{padding:5px;margin:0;width:100%;height:100%;line-height:1.5;display:block}.tagify--mix .tagify__input::before{height:auto;display:none;line-height:inherit}.tagify--mix .tagify__input::after{content:none}.tagify--select::after{content:">";opacity:.5;position:absolute;top:50%;right:0;bottom:0;font:16px monospace;line-height:8px;height:8px;pointer-events:none;transform:translate(-150%,-50%) scaleX(1.2) rotate(90deg);transition:.2s ease-in-out}.tagify--select[aria-expanded=true]::after{transform:translate(-150%,-50%) rotate(270deg) scaleY(1.2)}.tagify--select .tagify__tag{position:absolute;top:0;right:1.8em;bottom:0}.tagify--select .tagify__tag div{display:none}.tagify--select .tagify__input{width:100%}.tagify--empty .tagify__input::before{transition:.2s ease-out;opacity:1;transform:none;display:inline-block;width:auto}.tagify--mix .tagify--empty .tagify__input::before{display:inline-block}.tagify--focus{--tags-border-color:var(--tags-focus-border-color);transition:0s}.tagify--invalid{--tags-border-color:#D39494}.tagify__dropdown{position:absolute;z-index:9999;transform:translateY(1px);overflow:hidden}.tagify__dropdown[placement=top]{margin-top:0;transform:translateY(-100%)}.tagify__dropdown[placement=top] .tagify__dropdown__wrapper{border-top-width:1.1px;border-bottom-width:0}.tagify__dropdown[position=text]{box-shadow:0 0 0 3px rgba(var(--tagify-dd-color-primary),.1);font-size:.9em}.tagify__dropdown[position=text] .tagify__dropdown__wrapper{border-width:1px}.tagify__dropdown__wrapper{max-height:300px;overflow:auto;overflow-x:hidden;background:var(--tagify-dd-bg-color);border:1px solid;border-color:var(--tagify-dd-color-primary);border-bottom-width:1.5px;border-top-width:0;box-shadow:0 2px 4px -2px rgba(0,0,0,.2);transition:.25s cubic-bezier(0,1,.5,1)}.tagify__dropdown__header:empty{display:none}.tagify__dropdown__footer{display:inline-block;margin-top:.5em;padding:var(--tagify-dd-item-pad);font-size:.7em;font-style:italic;opacity:.5}.tagify__dropdown__footer:empty{display:none}.tagify__dropdown--initial .tagify__dropdown__wrapper{max-height:20px;transform:translateY(-1em)}.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper{transform:translateY(2em)}.tagify__dropdown__item{box-sizing:border-box;padding:var(--tagify-dd-item-pad);margin:1px;white-space:pre-wrap;cursor:pointer;border-radius:2px;position:relative;outline:0;max-height:60px;max-width:100%}.tagify__dropdown__item--active{background:var(--tagify-dd-color-primary);color:#fff}.tagify__dropdown__item:active{filter:brightness(105%)}.tagify__dropdown__item--hidden{padding-top:0;padding-bottom:0;margin:0 1px;pointer-events:none;overflow:hidden;max-height:0;transition:var(--tagify-dd-item--hidden-duration,.3s)!important}.tagify__dropdown__item--hidden>*{transform:translateY(-100%);opacity:0;transition:inherit} \ No newline at end of file diff --git a/app/components/products/unassigned_products_component.html.slim b/app/components/products/unassigned_products_component.html.slim index 9e21eb8bf65..b03de57430e 100644 --- a/app/components/products/unassigned_products_component.html.slim +++ b/app/components/products/unassigned_products_component.html.slim @@ -19,7 +19,7 @@ .under-cards .under-cards__links.mt-4.text-center.leading-normal.text-sm - = link_to "/products/unassigned##{@reply_warning_days - 1}days-elapsed", + = link_to "/products/unassigned#elapsed-#{@reply_warning_days - 1}days", class: "divide-indigo-800 block p-2 border rounded border-solid text-indigo-800 a-hover-link" do - if count_almost_passed_reply_warning_days > 0 strong = count_almost_passed_reply_warning_days diff --git a/app/components/products/unassigned_products_component.rb b/app/components/products/unassigned_products_component.rb index b86917a79d9..930cc43f864 100644 --- a/app/components/products/unassigned_products_component.rb +++ b/app/components/products/unassigned_products_component.rb @@ -44,7 +44,7 @@ def elapsed_days_text(elapsed_days) end def elapsed_days_id(elapsed_days) - "#{elapsed_days}days-elapsed" + "elapsed-#{elapsed_days}days" end def count_almost_passed_reply_warning_days diff --git a/app/controllers/admin/embedding_status_controller.rb b/app/controllers/admin/embedding_status_controller.rb new file mode 100644 index 00000000000..4b97e92a317 --- /dev/null +++ b/app/controllers/admin/embedding_status_controller.rb @@ -0,0 +1,37 @@ +# frozen_string_literal: true + +class Admin::EmbeddingStatusController < AdminController + def index + @embedding_stats = fetch_embedding_stats + @total_stats = calculate_total_stats(@embedding_stats) + end + + private + + def fetch_embedding_stats + SmartSearch::Configuration::EMBEDDING_MODELS.filter_map do |model_name| + model_class = model_name.safe_constantize + next if model_class.nil? + next unless model_class.column_names.include?('embedding') + + total = model_class.count + with_embedding = model_class.where.not(embedding: nil).count + percentage = total.positive? ? (with_embedding.to_f / total * 100).round(1) : 0 + + { + model_name:, + total:, + with_embedding:, + percentage: + } + end + end + + def calculate_total_stats(stats) + total = stats.sum { |s| s[:total] } + with_embedding = stats.sum { |s| s[:with_embedding] } + percentage = total.positive? ? (with_embedding.to_f / total * 100).round(1) : 0 + + { total:, with_embedding:, percentage: } + end +end diff --git a/app/controllers/searchables_controller.rb b/app/controllers/searchables_controller.rb index dd9d280496b..b8486fef5d2 100644 --- a/app/controllers/searchables_controller.rb +++ b/app/controllers/searchables_controller.rb @@ -6,12 +6,14 @@ class SearchablesController < ApplicationController def index @word = params[:word].to_s @document_type = params[:document_type]&.to_sym || :all + @mode = params[:mode]&.to_sym || :keyword searcher = Searcher.new( keyword: params[:word], document_type: params[:document_type], only_me: params[:only_me].present?, - current_user: + current_user:, + mode: @mode ) results = searcher.search @searchables = Kaminari.paginate_array(results).page(params[:page]).per(PER_PAGE) diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index bedf46919de..768588c202d 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -6,4 +6,13 @@ def my_practice?(practice) [:everyone, current_user.job].include?(practice.target) end + + # development/test環境では常に有効、それ以外はフィーチャーフラグで制御 + def smart_search_available? + Rails.env.local? || Switchlet.enabled?(:smart_search) + end + + def movie_available? + Rails.env.local? || Switchlet.enabled?(:movie) + end end diff --git a/app/helpers/label_helper.rb b/app/helpers/label_helper.rb new file mode 100644 index 00000000000..4e478684eb4 --- /dev/null +++ b/app/helpers/label_helper.rb @@ -0,0 +1,12 @@ +# frozen_string_literal: true + +module LabelHelper + def bookmarkable_label(bookmarkable) + case bookmarkable.model_name.name + when 'RegularEvent' + safe_join(%w[定期 イベント], tag.br) + else + bookmarkable.model_name.human + end + end +end diff --git a/app/helpers/page_tabs/practices_helper.rb b/app/helpers/page_tabs/practices_helper.rb index 14298271c4b..ff0e9a2b6ff 100644 --- a/app/helpers/page_tabs/practices_helper.rb +++ b/app/helpers/page_tabs/practices_helper.rb @@ -8,8 +8,7 @@ def practice_page_tabs(practice, active_tab:) tabs << { name: '日報', link: practice_reports_path(practice), count: practice.reports.length } tabs << { name: '質問', link: practice_questions_path(practice), count: practice.questions.length } tabs << { name: 'Docs', link: practice_pages_path(practice), count: practice.pages.length } - # TODO: 動画機能の完成時に本番環境で公開。動画リンクを隠した状態でのリリース。 - tabs << { name: '動画', link: practice_movies_path(practice), count: practice.movies.length } unless Rails.env.production? + tabs << { name: '動画', link: practice_movies_path(practice), count: practice.movies.length } if movie_available? tabs << { name: '提出物', link: practice_products_path(practice) } tabs << { name: '模範解答', link: practice_submission_answer_path(practice) } if practice.submission_answer.present? tabs << { name: 'コーディングテスト', link: practice_coding_tests_path(practice) } if practice.coding_tests.present? diff --git a/app/javascript/components/BookmarksInDashboard.jsx b/app/javascript/components/BookmarksInDashboard.jsx index e815df8977c..1c77dab64ec 100644 --- a/app/javascript/components/BookmarksInDashboard.jsx +++ b/app/javascript/components/BookmarksInDashboard.jsx @@ -119,7 +119,17 @@ const Bookmark = ({ bookmark, editable, bookmarksUrl }) => { {bookmark.modelName === 'Talk' ? (
) : ( -
{bookmark.modelNameI18n}
+
+ {bookmark.modelName === 'RegularEvent' ? ( + <> + 定期 +
+ イベント + + ) : ( + bookmark.modelNameI18n + )} +
)}
diff --git a/app/javascript/components/PracticeFilterDropdown.jsx b/app/javascript/components/PracticeFilterDropdown.jsx deleted file mode 100644 index 2d6bf6bf602..00000000000 --- a/app/javascript/components/PracticeFilterDropdown.jsx +++ /dev/null @@ -1,67 +0,0 @@ -import React, { useState, useEffect, useRef } from 'react' -import Choices from 'choices.js' - -export default function PracticeFilterDropdown({ - practices, - setPracticeId, - practiceId -}) { - const [selectedId, setSelectedId] = useState(practiceId) - - const onChange = (event) => { - const value = event.target.value - setSelectedId(value) - setPracticeId(value) - } - - const selectRef = useRef(null) - - useEffect(() => { - const selectElement = selectRef.current - const choicesInstance = new Choices(selectElement, { - searchEnabled: true, - allowHTML: true, - searchResultLimit: 20, - searchPlaceholderValue: '検索ワード', - noResultsText: '一致する情報は見つかりません', - itemSelectText: '選択', - shouldSort: false - }) - - return () => { - choicesInstance.destroy() - } - }, []) - - return ( - <> - -
- - ) -} diff --git a/app/javascript/components/Products.jsx b/app/javascript/components/Products.jsx index df88a0f14c8..074f66b1045 100644 --- a/app/javascript/components/Products.jsx +++ b/app/javascript/components/Products.jsx @@ -90,7 +90,7 @@ export default function Products({ } const elapsedDaysId = (elapsedDays) => { - return `${elapsedDays}days-elapsed` + return `elapsed-${elapsedDays}days` } const elapsedDaysRef = useRef(null) diff --git a/app/javascript/components/Reports.jsx b/app/javascript/components/Reports.jsx index afb77ea0c0f..83b2a8935a7 100644 --- a/app/javascript/components/Reports.jsx +++ b/app/javascript/components/Reports.jsx @@ -1,10 +1,9 @@ -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' import useSWR from 'swr' import fetcher from '../fetcher' import LoadingListPlaceholder from './LoadingListPlaceholder' import Report from './Report' import Pagination from './Pagination' -import PracticeFilterDropdown from './PracticeFilterDropdown' import UnconfirmedLink from './UnconfirmedLink' import usePage from './hooks/usePage' @@ -19,17 +18,48 @@ export default function Reports({ }) { const per = 20 const { page, setPage } = usePage() - const [userPracticeId, setUserPracticeId] = useState('') + const [selectedPracticeId, setSelectedPracticeId] = useState('') let reportsUrl = `/api/reports.json?page=${page}` if (userId) reportsUrl += `&user_id=${userId}` if (companyId) reportsUrl += `&company_id=${companyId}` - const pid = userPracticeId || practiceId + const pid = selectedPracticeId || practiceId if (pid) reportsUrl += `&practice_id=${pid}` if (unchecked) reportsUrl += `&target=unchecked_reports` const { data, error } = useSWR(reportsUrl, fetcher) + useEffect(() => { + if (!data || !practices) return + + let dropdown = null + const initDropdown = async () => { + const targetElement = document.querySelector( + '[data-practice-filter-dropdown]' + ) + if (!targetElement || dropdown) return + + const PracticeFilterDropdown = ( + await import('../practice-filter-dropdown') + ).default + dropdown = new PracticeFilterDropdown( + practices, + selectedPracticeId, + setSelectedPracticeId + ) + dropdown.render(targetElement) + } + + initDropdown() + + return () => { + if (dropdown) { + dropdown.destroy() + dropdown = null + } + } + }, [data, practices, setSelectedPracticeId]) + if (error) return <>エラーが発生しました。 if (!data) { return ( @@ -47,25 +77,13 @@ export default function Reports({
{data.totalPages === 0 && (
- {practices && ( - - )} + {practices &&
}
)} {data.totalPages > 0 && (
- {practices && ( - - )} + {practices &&
}
diff --git a/app/javascript/elapsed-days.js b/app/javascript/elapsed-days.js index 6faaf15ce76..f58b330f23e 100644 --- a/app/javascript/elapsed-days.js +++ b/app/javascript/elapsed-days.js @@ -29,7 +29,7 @@ export default function elapsedDays({ const createAnchor = (elapsedDays) => { const a = document.createElement('a') a.className = 'page-nav__item-link' - a.href = `#${elapsedDays}days-elapsed` + a.href = `#elapsed-${elapsedDays}days` return a } diff --git a/app/javascript/images/background/people.png b/app/javascript/images/background/people.png new file mode 100644 index 00000000000..22c1455ada0 Binary files /dev/null and b/app/javascript/images/background/people.png differ diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index a751411e65f..19765bed5fb 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -87,8 +87,6 @@ import '../tag_edit.js' import '../bookmark-button.js' import '../notifications_remove_after_open.js' -import '../stylesheets/application.sass' - // Support component names relative to this directory: const componentRequireContext = require.context('components', true) const ReactRailsUJS = require('react_ujs') diff --git a/app/javascript/packs/lp.js b/app/javascript/packs/lp.js index 13fd282bc5f..d1035412dfe 100644 --- a/app/javascript/packs/lp.js +++ b/app/javascript/packs/lp.js @@ -7,6 +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/lp.sass' - // Import images to ensure they are copied by webpack diff --git a/app/javascript/packs/not-logged-in.js b/app/javascript/packs/not-logged-in.js index 36e035cc37d..81b5ba345ea 100644 --- a/app/javascript/packs/not-logged-in.js +++ b/app/javascript/packs/not-logged-in.js @@ -6,5 +6,3 @@ // // 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.sass' diff --git a/app/javascript/packs/paper.js b/app/javascript/packs/paper.js index 84bdaed6405..81b5ba345ea 100644 --- a/app/javascript/packs/paper.js +++ b/app/javascript/packs/paper.js @@ -6,5 +6,3 @@ // // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate // layout file, like app/views/layouts/application.html.erb - -import '../stylesheets/paper.sass' diff --git a/app/javascript/practice-filter-dropdown.js b/app/javascript/practice-filter-dropdown.js new file mode 100644 index 00000000000..a840a4f595c --- /dev/null +++ b/app/javascript/practice-filter-dropdown.js @@ -0,0 +1,76 @@ +import Choices from 'choices.js' + +export default class { + constructor(practices, practiceId, setPracticeId) { + this.practices = practices + this.practiceId = practiceId + this.setPracticeId = setPracticeId + this.choices = null + this.selectElement = null + this.handleSelectChange = null + } + + render(element) { + element.innerHTML = ` + +
+ ` + + this.selectElement = element.querySelector('#js-choices-single-select') + + const defaultOption = document.createElement('option') + defaultOption.value = '' + defaultOption.textContent = '全ての日報を表示' + this.selectElement.appendChild(defaultOption) + + this.practices.forEach((practice) => { + const option = document.createElement('option') + option.value = practice.id + option.textContent = practice.title + this.selectElement.appendChild(option) + }) + + this.choices = new Choices(this.selectElement, { + searchEnabled: true, + allowHTML: true, + searchResultLimit: 20, + searchPlaceholderValue: '検索ワード', + noResultsText: '一致する情報は見つかりません', + itemSelectText: '選択', + shouldSort: false + }) + + if (this.practiceId) { + this.choices.setChoiceByValue(this.practiceId) + } + + this.handleSelectChange = (event) => { + const value = event.target.value + this.setPracticeId(value) + } + + this.selectElement.addEventListener('change', this.handleSelectChange) + } + + destroy() { + if (this.selectElement && this.handleSelectChange) { + this.selectElement.removeEventListener('change', this.handleSelectChange) + } + if (this.choices) { + this.choices.destroy() + this.choices = null + } + this.selectElement = null + this.handleSelectChange = null + } +} diff --git a/app/javascript/stylesheets/_common-imports.sass b/app/javascript/stylesheets/_common-imports.sass deleted file mode 100644 index fe397badbd8..00000000000 --- a/app/javascript/stylesheets/_common-imports.sass +++ /dev/null @@ -1,215 +0,0 @@ -@charset "UTF-8" - -//////////// -// functions -//////////// -@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 -//////////// -@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 -//////////// -@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" - -@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 -//////////// -@use "initializers/ress" -@use "initializers/reset" - -//////////// -// modules -//////////// -@import choices.js/public/assets/styles/choices.min.css -@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 -//////////// - -@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 -//////////// -@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 -//////////// -@include meta.load-css("shared/test/test") - -@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") - -@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") - -@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") - -@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") - -@include meta.load-css("shared/helpers/state") diff --git a/app/javascript/stylesheets/application.sass b/app/javascript/stylesheets/application.sass deleted file mode 100644 index 08fd9a3d95b..00000000000 --- a/app/javascript/stylesheets/application.sass +++ /dev/null @@ -1,141 +0,0 @@ -@charset "UTF-8" - -@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 deleted file mode 100644 index 27291878ef7..00000000000 --- a/app/javascript/stylesheets/application/base/_base.sass +++ /dev/null @@ -1,51 +0,0 @@ -@use "../../config/mixins/break-points" -@use "../../config/mixins/position" -@use "../../config/mixins/size" -@use "../../config/variables/fonts" - -html.is-application - font-family: fonts.$sans-serif - color: var(--default-text) - +break-points.media-breakpoint-up(md) - scroll-padding-top: var(--header-height__md-up) - -body.is-application - background-color: var(--background) - -body.is-no-scroll - overflow-y: hidden - .header - position: static - .wrapper - padding-top: 0 - -body.is-piyo-background - &::before - content: '' - +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 - +break-points.media-breakpoint-up(md) - background-size: 20rem - +break-points.media-breakpoint-down(sm) - background-size: 4.5rem - .wrapper - +position.position(relative, 1) - -.wrapper - &.is-application - +break-points.media-breakpoint-up(md) - margin-left: var(--global-nav-width) - padding-top: var(--header-height__md-up) - body.no-global-nav & - margin-left: 0 - body.no-header & - padding-top: 0 - body.is-error-page & - padding-top: 4rem - overflow-y: auto - body.is-thanks-page & - padding-block: 4rem diff --git a/app/javascript/stylesheets/application/blocks/admin/_admin-table.sass b/app/javascript/stylesheets/application/blocks/admin/_admin-table.sass deleted file mode 100644 index 161bca0dd2c..00000000000 --- a/app/javascript/stylesheets/application/blocks/admin/_admin-table.sass +++ /dev/null @@ -1,157 +0,0 @@ -@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) - 100% - background-color: var(--base) - -.admin-table - margin-bottom: 1.5rem - +break-points.media-breakpoint-down(sm) - overflow-x: auto - -.admin-table__table - border-radius: .25rem - width: 100% - -.admin-table__header - background-color: var(--background-semi-shade) - border: solid 1px var(--border-shade) - +border-radius.border-radius(top, .25rem) - -.admin-table__items - +border.border(horizontal, solid 1px var(--border)) - -.admin-table-item__title - +text.text-block(1.5rem 1.45) - color: var(--default-text) - -.admin-table__label - +text.text-block(.75rem 1.4) - text-align: center - font-weight: 700 - color: var(--main) - border: solid 1px var(--border-shade) - white-space: nowrap - height: 2rem - padding-inline: .5rem - .a-button.is-icon - min-height: 1.25rem - height: 1.25rem - font-size: .75rem - margin-left: .5rem - padding-inline: .375rem - background-color: var(--base) - border-color: var(--border-shade) - color: var(--default-text) - -.admin-table__item - transition: all .2s ease-out - background-color: var(--base) - &.is-retired - background-color: var(--background-tint) - &.is-retired:hover - background-color: var(--background) - &:last-child - +border-radius.border-radius(bottom, .25rem) - &.sortable-chosen - background-color: color.tint(colors.$warning, 80%) - &:hover, - .admin-table.is-grab &:hover - 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 - -.admin-table__item-value - padding: .375rem .75rem - border: solid 1px var(--border) - +text.text-block(.8125rem 1.45) - &.is-text-align-center - text-align: center - .a-button - margin-inline: .1875rem - .is-button-group .a-button - margin-inline: 0 - &.is-grab - padding: 0 - -.admin-table__item-blank - +text.text-block(.75rem 1.45) - color: var(--muted-text) - -.admin-table__item-logo-image - border: solid 1px var(--border) - width: 2.5rem - border-radius: .25rem - -.admin-table-item__body - border-radius: .25rem - background-color: var(--base) - box-shadow: rgba(black, .2) 0 1px 4px - overflow: hidden - -.admin-table__user - display: inline-flex - align-items: center - gap: .25rem .25rem - -.admin-table__user-icon - +size.size(2.125rem) - display: inline-block - flex: 0 0 2.125rem - &:not(:last-child) - margin-right: .5rem - -.admin-table__user-login-name - overflow-wrap: break-word - word-wrap: break-word - .admin-table__user:hover & - text-decoration: underline - -.admin-table__user-login-name - color: var(--main-text) - -.is-user-icon-xl - +size.size(100% auto) - margin-inline: auto - border-radius: .25rem - -.admin-table__item-block-link-container - padding-top: .25em - font-size: .75rem - a - +link.hover-link-reversal - color: colors.$danger - -.admin-table.is-loading - .admin-table__header - border: solid 1px var(--border) - background-color: var(--background) - .admin-table__label - border: solid 1px var(--border) - text-align: center - .a-placeholder - height: 1.05rem - width: 30% - display: inline-block - vertical-align: middle - .admin-table__item-value - height: 2.75rem - border: solid 1px var(--border) - pointer-events: none - text-align: center - vertical-align: middle - .a-placeholder - height: 1.1875rem - width: 60% - display: inline-block - vertical-align: middle diff --git a/app/javascript/stylesheets/application/blocks/admin/_admin-users.sass b/app/javascript/stylesheets/application/blocks/admin/_admin-users.sass deleted file mode 100644 index d8e110402b0..00000000000 --- a/app/javascript/stylesheets/application/blocks/admin/_admin-users.sass +++ /dev/null @@ -1,2 +0,0 @@ -.admin-users - width: 100% 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 deleted file mode 100644 index d949d3bede1..00000000000 --- a/app/javascript/stylesheets/application/blocks/auth-form/_auth-form-nav.sass +++ /dev/null @@ -1,18 +0,0 @@ -@use "../../../config/mixins/link" -@use "../../../config/mixins/text" - -.auth-form-nav - display: flex - justify-content: flex-end - -.auth-form-nav__items - display: flex - gap: 3rem - justify-content: center - width: 100% - -.auth-form-nav__item-link - cursor: pointer - +text.text-block(.75rem 1.45) - color: var(--main) - +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 deleted file mode 100644 index 624a8d9aefc..00000000000 --- a/app/javascript/stylesheets/application/blocks/auth-form/_auth-form.sass +++ /dev/null @@ -1,64 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/text" -@use "../../../config/variables/colors" - -.auth-form-logo-image - display: block - +break-points.media-breakpoint-up(md) - max-width: 10rem - margin: 4rem auto 2rem - +break-points.media-breakpoint-down(sm) - max-width: 10rem - margin: 2rem auto - - -.auth-form - width: 28rem - max-width: calc(100vw - 2rem) - margin-bottom: 2rem - +break-points.media-breakpoint-up(md) - margin-inline: auto - +break-points.media-breakpoint-down(sm) - margin-inline: 1rem - &.is-lg - width: 34rem - +break-points.media-breakpoint-up(md) - margin-top: 3rem - +break-points.media-breakpoint-down(sm) - margin-top: 1rem - .page-header + & - margin-top: 1.5rem - -.auth-form__header - border-bottom: solid 1px var(--border-tint) - padding: 1rem 1.75rem - -.auth-form__body - +break-points.media-breakpoint-up(md) - padding: 1.5rem 1.75rem - +break-points.media-breakpoint-down(sm) - padding: 1.25rem 1rem - -.auth-form__footer - padding: 1rem 1.75rem - -.auth-form__title - +text.text-block(1.25rem 1.4) - text-align: center - font-weight: 700 - -.auth-form-items - margin-bottom: 1.25rem - -.auth-form__alert - padding: .5rem 1.5rem - background-color: colors.$danger - text-align: center - +text.text-block(.8125rem 1.4) - color: var(--reversal-text) - margin: 1rem 1rem 0 - border-radius: .25rem - a - +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 deleted file mode 100644 index ba4a610182b..00000000000 --- a/app/javascript/stylesheets/application/blocks/auth-form/_next-settlement-time.sass +++ /dev/null @@ -1,19 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.next-settlement-time - +break-points.media-breakpoint-up(md) - display: flex - align-items: center - justify-content: center - -.next-settlement-time__title - +text.text-block(.875rem 1.4) - font-weight: 400 - +break-points.media-breakpoint-up(md) - margin-right: .5em - -.next-settlement-time__time - +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 deleted file mode 100644 index c127a4af895..00000000000 --- a/app/javascript/stylesheets/application/blocks/auth-form/_skip-practices.sass +++ /dev/null @@ -1,55 +0,0 @@ -@use "../../../config/mixins/text" - -.skip-practices - .skip-practices + & - margin-top: .5rem - -.skip-practices__inner - border-radius: .25rem - border: solid 1px var(--border) - overflow: hidden - transition: all .2s ease-out - input:checked + & - border-color: var(--primary) - -.skip-practices__header - display: flex - justify-content: space-between - height: 2.5rem - +text.text-block(.875rem 1.5) - padding: .75rem - align-items: center - cursor: pointer - color: var(--semi-muted-text) - transition: all .2s ease-out - &:hover - background-color: var(--background) - input:checked + .skip-practices__inner & - background-color: var(--primary-tint) - color: var(--primary-text) - -.skip-practices__category-angle-icon - transition: all .2s ease-out - input:checked + .skip-practices__inner & - transform: rotate(180deg) - -.skip-practices__category-name - transition: all .2s ease-out - .skip-practices__header:hover & - text-decoration: underline - color: var(--default-text) - -.skip-practices__start - display: flex - gap: .25rem - -.skip-practices__body - transition: all .2s ease-out - display: none - border-top: solid 1px var(--primary-semi-tint) - margin-top: -1px - padding: .75rem - font-size: .8125rem - background-color: var(--primary-tint) - input:checked + .skip-practices__inner & - display: block 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 deleted file mode 100644 index a6961bb5125..00000000000 --- a/app/javascript/stylesheets/application/blocks/cards/_card-body-main-actions.sass +++ /dev/null @@ -1,52 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/position" -@use "../../../config/mixins/text" - -.card-body-main-actions - +position.position(relative, 1) - padding-block: .75rem - margin-inline: 1rem - border-radius: 4px - +break-points.media-breakpoint-up(md) - padding-inline: 2rem - margin-bottom: 1.5rem - +break-points.media-breakpoint-down(sm) - padding-inline: .75rem - margin-bottom: 1rem - &.is-success - background-color: #f8fff2 - border: 1px solid var(--success) - color: var(--success-text) - &.is-primary - border: 1px solid var(--primary) - background-color: #f5f5ff - color: var(--primary-text) - &.is-warning - border: 1px solid var(--warning) - background-color: #fff9e7 - color: var(--warning-text) - &.is-danger - border: 1px solid var(--danger) - background-color: var(--danger-tint) - color: var(--danger-text) - -.card-body-main-actions__description - +text.text-block(.875rem 1.4) - margin-bottom: .75em - text-align: center - -.card-body-main-actions__items - display: flex - justify-content: center - -.card-body-main-actions__item - text-align: center - flex: 1 - +break-points.media-breakpoint-up(md) - max-width: 16rem - -.card-body-main-actions__item-cancel - +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 deleted file mode 100644 index 1ef38654bd1..00000000000 --- a/app/javascript/stylesheets/application/blocks/cards/_card-counts.sass +++ /dev/null @@ -1,64 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/text" - -.card-counts - &.is-user - +break-points.media-breakpoint-up(md) - margin-bottom: 1.5rem - +break-points.media-breakpoint-down(sm) - margin-bottom: 1.25rem - -.card-counts__items - display: flex - gap: .5rem - flex-wrap: wrap - container-type: inline-size - container-name: users-item - -=nowrap-items($one-line-items-count) - flex: 0 0 calc((100% - (.5rem * (#{$one-line-items-count} - 1))) / $one-line-items-count) - max-width: calc((100% - (.5rem * (#{$one-line-items-count} - 1))) / $one-line-items-count) - -.card-counts__item - background-color: var(--base) - @container users-item (max-width: 299px) - +nowrap-items(3) - @container users-item (min-width: 300px) - +nowrap-items(4) - @container users-item (min-width: 401px) - +nowrap-items(5) - @container users-item (min-width: 460px) - +nowrap-items(6) - -.card-counts__item-inner - border: solid 1px var(--border) - border-radius: 3px - -.card-counts__item-label - +text.text-block(.625rem 1.4) - white-space: nowrap - max-width: 100% - overflow: hidden - text-align: center - color: var(--semi-muted-text) - padding: .125rem .125rem - border-bottom: solid 1px var(--border) - height: 1.25rem - text-overflow: ellipsis - overflow: hidden - white-space: nowrap - &.is-sm span - transform: scale(.85) - -.card-counts__item-value - color: var(--muted-text) - +text.text-block(.875rem 1.4) - padding-bottom: .125rem - text-align: center - &.is-empty - color: var(--muted-text) - a - +link.hover-link - display: block - color: var(--link-text) diff --git a/app/javascript/stylesheets/application/blocks/coding-test/_code-editor.sass b/app/javascript/stylesheets/application/blocks/coding-test/_code-editor.sass deleted file mode 100644 index 4b1a736e91b..00000000000 --- a/app/javascript/stylesheets/application/blocks/coding-test/_code-editor.sass +++ /dev/null @@ -1,5 +0,0 @@ -.code-editor - font-size: .875rem - line-height: 1.5 - field-sizing: content - min-height: 20lh diff --git a/app/javascript/stylesheets/application/blocks/coding-test/_coding-test.sass b/app/javascript/stylesheets/application/blocks/coding-test/_coding-test.sass deleted file mode 100644 index 762afc68208..00000000000 --- a/app/javascript/stylesheets/application/blocks/coding-test/_coding-test.sass +++ /dev/null @@ -1,4 +0,0 @@ -@use "../../../config/mixins/text" - -.coding-test__language - +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 deleted file mode 100644 index 807576625be..00000000000 --- a/app/javascript/stylesheets/application/blocks/coding-test/_coding-tests-item.sass +++ /dev/null @@ -1,9 +0,0 @@ -@use "../../../config/mixins/text" - -.coding-tests-item - display: flex - gap: .5rem - align-items: center - -.coding-tests-item__test-link - +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 deleted file mode 100644 index 035d378246e..00000000000 --- a/app/javascript/stylesheets/application/blocks/coding-test/_io-sample.sass +++ /dev/null @@ -1,13 +0,0 @@ -@use "../../../config/mixins/text" - -.io-sample__title - +text.text-block(.875rem 1.4, 700) - -.io-sample__body - margin-top: .5rem - font-size: .875rem - -.io-sample__code - padding: .75rem - border-radius: .25rem - font-family: var(--monospace) diff --git a/app/javascript/stylesheets/application/blocks/coding-test/_result-table.sass b/app/javascript/stylesheets/application/blocks/coding-test/_result-table.sass deleted file mode 100644 index 3c69388f3bf..00000000000 --- a/app/javascript/stylesheets/application/blocks/coding-test/_result-table.sass +++ /dev/null @@ -1,15 +0,0 @@ -.result-table - tr - &.is-wa td, - &.is-re td - background-color: var(--danger-tint) - &.is-ac td - background-color: var(--success-tint) - .status.wa, - .status.re - color: var(--danger-text) - .status.ac - color: var(--success-text) - pre, - code - font-family: var(--monospace) diff --git a/app/javascript/stylesheets/application/blocks/coding-test/_test-case.sass b/app/javascript/stylesheets/application/blocks/coding-test/_test-case.sass deleted file mode 100644 index 1fb93121911..00000000000 --- a/app/javascript/stylesheets/application/blocks/coding-test/_test-case.sass +++ /dev/null @@ -1,2 +0,0 @@ -.test-case__header - position: relative diff --git a/app/javascript/stylesheets/application/blocks/company/_company-links.sass b/app/javascript/stylesheets/application/blocks/company/_company-links.sass deleted file mode 100644 index 5225dbb028a..00000000000 --- a/app/javascript/stylesheets/application/blocks/company/_company-links.sass +++ /dev/null @@ -1,15 +0,0 @@ -@use "../../../config/mixins/break-points" - -.company-links - margin-top: .5rem - -.company-links__items - display: flex - gap: .5rem - flex-wrap: wrap - -.company-links__item - +break-points.media-breakpoint-up(xxl) - flex: 0 0 calc((100% - (.5rem * 2)) / 3) - +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 deleted file mode 100644 index 75d22326587..00000000000 --- a/app/javascript/stylesheets/application/blocks/company/_company-profile.sass +++ /dev/null @@ -1,52 +0,0 @@ -@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 - +break-points.media-breakpoint-up(md) - display: flex - +break-points.media-breakpoint-down(sm) - text-align: center - -.company-profile__header-start - margin-right: 1.25rem - -.company-profile__header-end - flex: 1 - -.company-profile__logo - +break-points.media-breakpoint-down(sm) - position: static - text-align: center - margin-bottom: .25rem - -.company-profile__logo-image - background-color: var(--base) - object-fit: contain - border-radius: .25rem - +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) - +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 - +break-points.media-breakpoint-up(md) - font-size: .9375rem - +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 deleted file mode 100644 index f063722e9c9..00000000000 --- a/app/javascript/stylesheets/application/blocks/course/_courses.sass +++ /dev/null @@ -1,54 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/text" - -.courses-item - height: 100% - -.courses-item__inner - height: 100% - -.courses-item__header - padding: .75rem 1.25rem 0 - -.courses-item__title - +text.text-block(1.125rem 1.4) - -.courses-item__title-icon - +text.text-block(.6875rem 1) - color: var(--semi-muted-text) - display: inline-flex - white-space: nowrap - font-weight: 400 - padding-inline: .5rem - height: 1.125rem - margin-right: .5rem - border-radius: .75rem - align-items: center - justify-content: center - position: relative - +break-points.media-breakpoint-up(md) - top: -.125rem - +break-points.media-breakpoint-down(sm) - top: -.1875rem - &.is-closed - background-color: var(--background-tint) - -.courses-item__title-link - +link.block-link - -.courses-item__title-label - color: var(--main-text) - transition: all .2s ease-out - font-weight: 700 - .is-closed & - color: var(--muted-text) - .is-closed .courses-item__title-link:hover &, - .courses-item__title-link:hover & - text-decoration: underline - color: var(--main-text) - -.courses-item__description - padding: .5rem 1.25rem .75rem - p - +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 deleted file mode 100644 index 82806d1f7b8..00000000000 --- a/app/javascript/stylesheets/application/blocks/dashboard/_current-user-icon-list.sass +++ /dev/null @@ -1,41 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.current-user-icon-list - margin-bottom: 1rem - background-color: #eaeaf1 - padding-block: .5rem - // fallback for older UA - padding-top: .5rem - padding-bottom: .5rem - -.current-user-icon-list__inner - display: flex - align-items: center - gap: .5rem - -.current-user-icon-list__items - display: flex - align-items: center - gap: .25rem - flex: 1 1 auto - min-width: 0 - flex-wrap: nowrap - overflow-x: auto - scrollbar-gutter: stable both-edges - -.current-user-icon-list__item - flex: 0 0 2.5rem - +break-points.media-breakpoint-up(md) - flex: 0 0 3rem - +break-points.media-breakpoint-down(sm) - flex: 0 0 2rem - -.current-user-icon-list__title-label - +text.text-block(.875rem 1.4) - font-weight: 700 - white-space: nowrap - -.current-user-icon-list__title-time - +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 deleted file mode 100644 index ccd37c77b67..00000000000 --- a/app/javascript/stylesheets/application/blocks/dashboard/_dashboard-categories-item.sass +++ /dev/null @@ -1,14 +0,0 @@ -@use "../../../config/mixins/text" - -.dashboard-category__header - padding-bottom: .25rem - border-bottom: dashed 1px var(--border) - -.dashboard-category__title - +text.text-block(.75rem 1.4) - font-weight: 700 - -.dashboard-category__body - &:not(:first-child) - flex: 1 - margin-top: 1rem diff --git a/app/javascript/stylesheets/application/blocks/dashboard/_dashboard-contents.sass b/app/javascript/stylesheets/application/blocks/dashboard/_dashboard-contents.sass deleted file mode 100644 index 4c681ade6da..00000000000 --- a/app/javascript/stylesheets/application/blocks/dashboard/_dashboard-contents.sass +++ /dev/null @@ -1,22 +0,0 @@ -@use "../../../config/mixins/break-points" - -.dashboard-contents__cols - display: flex - gap: 1rem - +break-points.media-breakpoint-down(sm) - flex-direction: column - -.dashboard-contents__col - width: 100% - &.is-sub - +break-points.media-breakpoint-up(md) - max-width: 20rem - +break-points.media-breakpoint-up(sm) - flex: 1 - &.is-main - flex: 1 - -.dashboard-contents__categories - display: flex - flex-direction: column - gap: 1rem diff --git a/app/javascript/stylesheets/application/blocks/dashboard/_unchecked-report-alert.sass b/app/javascript/stylesheets/application/blocks/dashboard/_unchecked-report-alert.sass deleted file mode 100644 index 8a5f0da97a7..00000000000 --- a/app/javascript/stylesheets/application/blocks/dashboard/_unchecked-report-alert.sass +++ /dev/null @@ -1,32 +0,0 @@ -@use "../../../config/mixins/text" - -.unchecked-report-alert__header - background-color: var(--danger) - padding: .125rem 1rem - -.unchecked-report-alert__header-title - +text.text-block(.75rem 1.4, 700) - color: var(--reversal-text) - -.unchecked-report-alert__inner - padding: .25rem 1rem - display: flex - align-items: center - gap: .5rem - -.unchecked-report-alert__icon - font-size: 2rem - -.unchecked-report-alert__message - +text.text-block(.8125rem 1.4, center) - flex: 1 - -.unchecked-report-alert__message-link - color: var(--danger-text) - -.unchecked-report-alert__count - margin-inline:.125rem - -.unchecked-report-alert__count-number - font-size: 1.25rem - margin-right: .0625rem diff --git a/app/javascript/stylesheets/application/blocks/dashboard/_welcome-message.sass b/app/javascript/stylesheets/application/blocks/dashboard/_welcome-message.sass deleted file mode 100644 index 6c5c6b51c5a..00000000000 --- a/app/javascript/stylesheets/application/blocks/dashboard/_welcome-message.sass +++ /dev/null @@ -1,38 +0,0 @@ -@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 - +break-points.media-breakpoint-up(md) - padding: 3.5rem 3rem 2rem - +break-points.media-breakpoint-down(sm) - padding: 3.5rem 1rem 1rem - -.welcome-message__author - +size.size(5rem) - margin-inline: auto - padding: .75rem - border-radius: 50% - border: solid 1px color.shade(colors.$warning, 10%) - +position.position(absolute, top 0, left 50%) - transform: translate(-50%, 0) - background-color: var(--warning) - -.welcome-message__header - font-size: 1.5rem - margin-bottom: 1em - -.welcome-message__title - +text.text-block(1em 1.4) - text-align: center - font-weight: 800 - -.welcome-message__body - font-size: .9375rem diff --git a/app/javascript/stylesheets/application/blocks/event/_event-main-actions.sass b/app/javascript/stylesheets/application/blocks/event/_event-main-actions.sass deleted file mode 100644 index 8c83fdd77ca..00000000000 --- a/app/javascript/stylesheets/application/blocks/event/_event-main-actions.sass +++ /dev/null @@ -1,52 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/position" -@use "../../../config/mixins/text" - -.event-main-actions - +position.position(relative, 1) - padding-block: .75rem - margin-inline: 1rem - border-radius: 4px - +break-points.media-breakpoint-up(md) - padding-inline: 2rem - margin-bottom: 1.5rem - +break-points.media-breakpoint-down(sm) - padding-inline: .75rem - margin-bottom: 1rem - &.is-participationed - background-color: #f8fff2 - border: 1px solid var(--success) - color: #4e732e - &.is-unparticipationed.is-available - border: 1px solid var(--primary) - background-color: #f5f5ff - color: #28248c - &.is-unparticipationed.is-capacity-over - border: 1px solid var(--warning) - background-color: #fff9e7 - color: #6f5819 - &.is-non-participationed - border: 1px solid var(--danger) - background-color: var(--danger-tint) - color: var(--danger) - -.event-main-actions__description - +text.text-block(.875rem 1.4) - margin-bottom: .75em - text-align: center - -.event-main-actions__items - display: flex - justify-content: center - -.event-main-actions__item - text-align: center - flex: 1 - +break-points.media-breakpoint-up(md) - max-width: 16rem - -.event-main-actions__item-cancel - +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 deleted file mode 100644 index aa817afcb52..00000000000 --- a/app/javascript/stylesheets/application/blocks/event/_event-meta.sass +++ /dev/null @@ -1,51 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/variables/colors" - -.event-meta - +break-points.media-breakpoint-up(md) - font-size: .8125rem - +break-points.media-breakpoint-down(sm) - font-size: .75rem - -.event-meta__inner - +break-points.media-breakpoint-up(md) - padding: .75rem 1.5rem - +break-points.media-breakpoint-down(sm) - padding: .5rem .75rem - -.event-meta__item - line-height: 1.5 - +break-points.media-breakpoint-up(md) - display: flex - align-items: center - &:not(:first-child) - margin-top: .5rem - padding-top: .5rem - border-top: solid var(--border-tint) 1px - -.event-meta__item-label - flex-basis: 5em - margin-right: .75em - white-space: nowrap - font-weight: 600 - +break-points.media-breakpoint-up(md) - text-align: right - +break-points.media-breakpoint-down(sm) - font-size: .875em - -.event-meta__item-value - flex: 1 - +break-points.media-breakpoint-up(md) - display: flex - align-items: center - a:not(.a-button) - +colors.default-link - +link.hover-link-reversal - -.event-meta__item-value-main - display: block - +break-points.media-breakpoint-up(md) - margin-right: .5rem - +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 deleted file mode 100644 index 0638580a198..00000000000 --- a/app/javascript/stylesheets/application/blocks/footer/_footer-nav.sass +++ /dev/null @@ -1,31 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" - -.footer-nav__items - display: flex - line-height: 1.4 - flex-wrap: wrap - align-items: center - +break-points.media-breakpoint-up(md) - font-size: .8125rem - justify-content: center - gap: 1.75rem - +break-points.media-breakpoint-down(sm) - font-size: .75rem - -.footer-nav__item - +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) - +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 - border-bottom: solid 1px var(--border) diff --git a/app/javascript/stylesheets/application/blocks/footer/_footer.sass b/app/javascript/stylesheets/application/blocks/footer/_footer.sass deleted file mode 100644 index a0799ca0513..00000000000 --- a/app/javascript/stylesheets/application/blocks/footer/_footer.sass +++ /dev/null @@ -1,27 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" - -.footer - color: var(--semi-muted-text) - +break-points.media-breakpoint-up(md) - padding-block: 1.5rem - +break-points.media-breakpoint-down(sm) - .container - padding-inline: 0 - -.footer__copyright - line-height: 1.4 - display: block - text-align: center - color: var(--semi-muted-text) - +break-points.media-breakpoint-up(md) - font-size: .8125rem - margin-top: 1.5em - +break-points.media-breakpoint-down(sm) - font-size: .75rem - padding-block: 1.25rem - -.footer__copyright-link - margin-inline: .25em - +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 deleted file mode 100644 index 0c9737eeabc..00000000000 --- a/app/javascript/stylesheets/application/blocks/header/_header-current-user.sass +++ /dev/null @@ -1,10 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/size" - -.header-current-user__icon - display: block - margin-inline: auto - +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 deleted file mode 100644 index 340150b4f8d..00000000000 --- a/app/javascript/stylesheets/application/blocks/header/_header-dropdown.sass +++ /dev/null @@ -1,167 +0,0 @@ -@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 - +break-points.media-breakpoint-up(md) - display: none - input:checked + &, - .is-opened-dropdown & - display: block - +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 - transition: background-color .4s ease-in - overflow: hidden - input:checked + &, - .is-opened-dropdown & - opacity: 1 - width: 100% - display: block - -.header-dropdown__inner - overflow-y: auto - +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 - box-shadow: rgba(black, .2) 0 0 .375rem - border-radius: .25rem - max-height: calc(100vh - 6rem) - &.is-notification - width: 15rem - +break-points.media-breakpoint-down(sm) - background-color: var(--main) - +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) - input:checked + .header-dropdown &, - .is-opened-dropdown & - left: 0 - &.is-notification - +break-points.media-breakpoint-down(sm) - left: 0 - .pill-nav__item-link - border-color: var(--base) - color: var(--reversal-text) - .pill-nav__item-link.is-active - background-color: var(--base) - color: var(--main) - .o-empty-message - opacity: .7 - color: var(--reversal-text) - -.header-dropdown__header - padding: 1rem - +break-points.media-breakpoint-up(md) - border-bottom: solid 1px var(--border-tint) - +break-points.media-breakpoint-down(sm) - border-bottom: solid 1px var(--main-semi-shade) - -.header-dropdown__label - +text.text-block(.625rem 1.4) - font-weight: 700 - padding: .25rem .75rem - +break-points.media-breakpoint-up(md) - background-color: var(--background-semi-shade) - +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 - +break-points.media-breakpoint-up(md) - max-height: calc(100vh - 16rem) - +break-points.media-breakpoint-down(sm) - max-height: calc(100vh - 134px) - margin-bottom: -1px - -.header-dropdown__item-link - +text.text-block(.875rem 1.4) - +link.flex-link - padding: .75rem - transition: all .2s ease-out - +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) - +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.border-radius(bottom, .25rem) - overflow: hidden - +break-points.media-breakpoint-up(md) - border-top: solid 1px var(--border-tint) - +break-points.media-breakpoint-down(sm) - border-top: solid 1px var(--main-semi-shade) - -.header-dropdown__footer-link - +text.text-block(.875rem 1.4) - +link.flex-link - align-items: center - justify-content: center - +size.size(100% 2.75rem) - transition: all .2s ease-out - +break-points.media-breakpoint-up(md) - color: var(--main-text) - +break-points.media-breakpoint-down(sm) - color: var(--reversal-text) - &:hover - +break-points.media-breakpoint-up(md) - background-color: var(--background-more-tint) - +break-points.media-breakpoint-down(sm) - background-color: var(--main-shade) - +break-points.media-breakpoint-up(md) - &:not(:last-child) - border-bottom: solid 1px var(--border-tint) - +break-points.media-breakpoint-down(sm) - border-bottom: solid 1px var(--main-semi-shade) - -.header-dropdown__background - +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.position(fixed, left 0, top 0, bottom 0, 1) - height: 100% - width: 0 - display: inline - opacity: 0 - input:checked + .header-dropdown & - opacity: 1 - width: 100% - display: block - &.is-notification - +break-points.media-breakpoint-down(sm) - opacity: 1 - width: 100% - -.header-dropdown__page-link-container - display: flex - align-items: center - justify-content: center - width: 100% - margin-top: 1rem - -.header-dropdown__page-link - +text.text-block(.875rem 1.4) - +link.hover-link-reversal - transition: all .2s ease-out - +break-points.media-breakpoint-up(md) - color: var(--main-text) - +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 deleted file mode 100644 index 28aaf845278..00000000000 --- a/app/javascript/stylesheets/application/blocks/header/_header-links.sass +++ /dev/null @@ -1,67 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/position" -@use "../../../config/mixins/text" - -.header-links - height: 100% - display: flex - align-items: center - -.header-links__items - display: flex - height: 100% - -.header-links__item - display: flex - height: 100% - border-left: solid var(--border-tint) .0625rem - +position.position(relative) - transition: color .2s ease-in, background-color .2s ease-in - -.header-links__link - +link.flex-link - flex-direction: column - align-items: center - justify-content: center - height: 100% - +text.text-block(1em 1) - color: var(--default-text) - +position.position(relative) - transition: all .2s ease-in - cursor: pointer - +break-points.media-breakpoint-up(md) - font-size: 1.375rem - width: 3.75rem - +break-points.media-breakpoint-down(sm) - font-size: 1.125rem - width: 2.75rem - &:hover - background-color: #f8f8f8 - &.is-active - background-color: var(--warning) - color: var(--main-text) - -.header-links__link-label - margin-top: .375em - +break-points.media-breakpoint-up(md) - font-size: .6875rem - +break-points.media-breakpoint-down(sm) - font-size: .625rem - -.header-links__link-count - +position.position(right .25rem, top .25rem) - -.header-links__image - +break-points.media-breakpoint-up(md) - width: 1.5rem - +break-points.media-breakpoint-down(sm) - width: 1.125rem - -.header-links__link-icon - +text.text-block(1.25rem 1) - text-align: center - +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 deleted file mode 100644 index cde2059f398..00000000000 --- a/app/javascript/stylesheets/application/blocks/header/_header-notification-icon.sass +++ /dev/null @@ -1,61 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/position" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" - -.header-notification-count - position: absolute - +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.text-block(1rem 1) - +position.position(absolute, left .25rem, bottom .25rem) - -@keyframes dots - 0%, 20% - color: var(--transparent-text) - text-shadow: .25em 0 0 var(--transparent-text), .5em 0 0 var(--transparent-text) - 40% - color: var(--default-text) - text-shadow: .25em 0 0 var(--transparent-text), .5em 0 0 var(--transparent-text) - 60% - text-shadow: .25em 0 0 var(--default-text), .5em 0 0 var(--transparent-text) - 80%, 100% - text-shadow: .25em 0 0 var(--default-text), .5em 0 0 var(--default-text) - -.header-notifications-item__body - width: 100% - +break-points.media-breakpoint-up(md) - color: var(--default-text) - +break-points.media-breakpoint-down(sm) - color: var(--reversal-text) - -.header-notifications-item__user-icon - float: left - +size.size(2rem) - margin-right: .5rem - margin-bottom: .25rem - -.header-notifications-item__message - p - line-height: 1.45 - margin-bottom: .375em - +break-points.media-breakpoint-up(md) - font-size: .8125rem - +break-points.media-breakpoint-down(sm) - font-size: .75rem - -.header-notifications-item__created-at - text-align: right - display: block - +break-points.media-breakpoint-up(md) - font-size: .75rem - +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 deleted file mode 100644 index 1ff5d6b51c0..00000000000 --- a/app/javascript/stylesheets/application/blocks/header/_header.sass +++ /dev/null @@ -1,60 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/position" - -.header - background-color: var(--base) - z-index: 5 - +break-points.media-breakpoint-up(md) - +position.position(fixed, top 0, right 0) - left: var(--global-nav-width) - height: var(--header-height__md-up) - +break-points.media-breakpoint-down(sm) - position: relative - height: var(--header-height__sm-down) - .a-switch - margin-left: .5rem - -.header__inner - display: flex - justify-content: space-between - align-items: center - height: 100% - -.header__start - display: flex - -.header__end - display: flex - height: 100% - -.header__title - text-decoration: none - display: flex - align-items: center - transition: all .2s ease-out - text-decoration: none - &:hover - opacity: .8 - -.header__title-image - +break-points.media-breakpoint-up(md) - height: 2.25rem - +break-points.media-breakpoint-down(sm) - height: 1.75rem - -.header-show-mobile-nav - display: none - cursor: pointer - height: 100% - justify-content: center - align-items: center - width: 3rem - +position.position(relative) - display: flex - -.header-show-mobile-nav-items - display: none - +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 deleted file mode 100644 index 46067c4fbd9..00000000000 --- a/app/javascript/stylesheets/application/blocks/mention/_mention.sass +++ /dev/null @@ -1,37 +0,0 @@ -@use "sass:color" -@use "../../../config/variables/colors" - -.tribute-container - position: absolute - top: 0 - left: 0 - margin-top: .5rem - height: auto - max-height: 176px - max-width: 500px - overflow: auto - display: block - z-index: 999 - border: 1px solid #c1c5b9 - border-radius: 3px - background: var(--reversal-text) - ul - margin: 0 - list-style: none - li - font-size: .875rem - border-bottom: 1px solid #c1c5b9 - padding: 10px 11px - cursor: pointer - &:last-child - border-bottom: none - &.highlight - background-color: var(--main) - color: var(--reversal-text) - box-shadow: inset 0 0 3px color.adjust(colors.$main, $lightness: -10%) - span - font-weight: bold - &.mention - padding-right: 9px - &.emoji - padding-left: 4px 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 deleted file mode 100644 index 7f4ed9f759d..00000000000 --- a/app/javascript/stylesheets/application/blocks/micro-report/_micro-report-actions.sass +++ /dev/null @@ -1,41 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" - -.micro-report-actions__items - display: flex - gap: .5rem - padding-top: .375rem - -.micro-report-actions__action - font-size: .75rem - display: flex - height: 2rem - align-items: center - text-decoration: none - padding-inline: .75rem - background-color: var(--background-shade) - border-radius: .25rem - color: var(--muted-text) - transition: all .2s ease-out - &:hover - background-color: var(--main) - color: var(--reversal-text) - -.micro-report-actions__user-link - +link.block-link - -.micro-report__footer - .reactions__items - margin: 0 - .reactions__items.is-reacted - gap: .5rem - .reactions__item.is-reacted - border: 1px solid var(--border) - border-radius: .25rem - +break-points.media-breakpoint-down(sm) - height: 2.25rem - .reactions__dropdown-toggle - margin-left: .5rem - border: none - +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 deleted file mode 100644 index 92d9946cdb0..00000000000 --- a/app/javascript/stylesheets/application/blocks/micro-report/_micro-report-form-tabs.sass +++ /dev/null @@ -1,23 +0,0 @@ -@use "../../../config/mixins/link" -@use "../../../config/mixins/text" - -.micro-report-form-tabs - background-color: var(--background) - -.micro-report-form-tabs + .tab-content - margin-top: .5rem - -.micro-report-form-tabs__items - display: flex - -.micro-report-form-tabs__item-link - +link.flex-link - padding: .5rem .75rem 1rem - +text.text-block(.875rem 1.4) - -.micro-report-form__preview, -.micro-report-form__form - min-height: 3.75rem - padding: .5rem - max-height: calc(100vh - 14rem) - overflow-y: auto 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 deleted file mode 100644 index b7bb63aa6ff..00000000000 --- a/app/javascript/stylesheets/application/blocks/micro-report/_micro-report-form.sass +++ /dev/null @@ -1,24 +0,0 @@ -@use "../../../config/mixins/break-points" - -.micro-report-form - padding-bottom: 1rem - position: fixed - bottom: 0 - left: 0 - right: 0 - background-color: var(--background) - z-index: 2 - +break-points.media-breakpoint-up(md) - margin-left: 5rem - -.micro-report-form__inner - display: flex - align-items: flex-end - gap: .75rem - -.micro-report-form__start - flex: 1 - -.micro-report-form__text-area.a-text-input - height: 3.75rem - min-height: 0 diff --git a/app/javascript/stylesheets/application/blocks/micro-report/_micro-report.sass b/app/javascript/stylesheets/application/blocks/micro-report/_micro-report.sass deleted file mode 100644 index eb2d793820a..00000000000 --- a/app/javascript/stylesheets/application/blocks/micro-report/_micro-report.sass +++ /dev/null @@ -1,157 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/position" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" - -.micro-report - +position.position(relative) - display: flex - &:not(:last-child) - margin-top: 1.5rem - +break-points.media-breakpoint-up(md) - gap: 1rem - +break-points.media-breakpoint-down(sm) - gap: .75rem - -.micro-report__start - flex: 0 0 2.75rem - +size.size(2.75rem 100%) - -.micro-report__end - flex: 1 - +break-points.media-breakpoint-up(md) - max-width: calc(100% - var(--thread-header-author)) - -.micro-report__header - display: flex - align-items: center - justify-content: space-between - margin-bottom: .25rem - -.micro-report__title - +text.text-block(.875rem 1.4, 600) - +break-points.media-breakpoint-up(md) - margin-right: .5rem - flex: 1 - +break-points.media-breakpoint-down(sm) - display: flex - -.micro-report__title-user-icon - +break-points.media-breakpoint-up(md) - display: none - +break-points.media-breakpoint-down(sm) - +size.size(1.5rem) - display: inline-block - vertical-align: middle - margin-right: .25rem - -.micro-report__title-link - +break-points.media-breakpoint-up(md) - height: 100% - display: inline-flex - align-items: center - +break-points.media-breakpoint-down(sm) - display: inline-block - white-space: nowrap - max-width: calc(100vw - 15.5rem) - overflow: hidden - text-overflow: ellipsis - vertical-align: middle - &.a-placeholder - width: 15% - height: 1.4em - -.micro-report__title-icon - +size.size(1.5rem) - margin-right: .5rem - -.micro-report__title-label - +text.text-block(.8125rem, block 400) - color: var(--muted-text) - margin-bottom: .125rem - i - margin-right: .1875rem - -.micro-report__body - +break-points.media-breakpoint-down(sm) - word-wrap: break-word - -.micro-report__user-icon - +size.size(3.5rem) - object-fit: cover - border-radius: 50% - +break-points.media-breakpoint-down(sm) - display: none - -.micro-report__created-at - display: block - +text.text-block(.8125rem 1.4, nowrap) - color: var(--muted-text) - +link.hover-link-reversal - cursor: pointer - +position.position(relative) - +break-points.media-breakpoint-down(sm) - font-size: .75rem - &:active, - &:focus, - &.is-active - color: var(--danger) - &::after - content: "Copied!" - display: block - background-color: rgba(black, .4) - border-radius: .125rem - padding: .25rem - +text.text-block(.625rem 1) - color: var(--reversal-text) - +position.position(absolute, left 0, top 100%) - &.a-placeholder - width: 30% - height: 1.4em - -.micro-report__actions - padding-block: 0 1rem - -.micro-report__actions-items - display: flex - align-items: center - -.micro-report__actions-item-link - +text.text-block(1.25rem 1, center flex) - color: var(--muted-text) - +size.size(2.375rem) - align-items: center - justify-content: center - border-radius: 50% - transition: color .2s ease-in, background-color .2s ease-in - &.is-success - &:hover - background-color: #e0eefe - color: var(--primary) - &.is-danger - &:hover - background-color: #f5e6ea - color: var(--danger) - -.micro-report__footer - display: flex - +break-points.media-breakpoint-up(md) - justify-content: space-between - .reactions - justify-content: flex-end - .card-footer - flex: 1 - +break-points.media-breakpoint-down(sm) - flex-direction: column - gap: .5rem - .reactions - justify-content: flex-start - .card-footer - flex: 1 - -.micro-report__reactions - flex: 1 - -.micro-report_user-icon.a-user-icon - +size.size(2.75rem) diff --git a/app/javascript/stylesheets/application/blocks/micro-report/_micro-reports.sass b/app/javascript/stylesheets/application/blocks/micro-report/_micro-reports.sass deleted file mode 100644 index fbd8a0abc82..00000000000 --- a/app/javascript/stylesheets/application/blocks/micro-report/_micro-reports.sass +++ /dev/null @@ -1,19 +0,0 @@ -.micro-reports - height: calc(100vh - 10.5rem) - overflow: hidden - display: flex - flex-direction: column - gap: 1.5rem - .thread-comment:last-child - margin-bottom: 0 - -.micro-reports__start - height: 100% - overflow-y: scroll - padding-bottom: .5rem - -.micro-reports-with-form - padding-bottom: 8.75rem - -.micro-reports-without-form - padding-bottom: 0 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 deleted file mode 100644 index 41ba5890328..00000000000 --- a/app/javascript/stylesheets/application/blocks/modal/_modal-celebrate-report-count-body.sass +++ /dev/null @@ -1,9 +0,0 @@ -@use "../../../config/mixins/text" - -.modal-celebrate-report-count-body__description - +text.text-block(.875rem 1.6) - text-align: center - -.modal-celebrate-report-count-body__image-container - &:not(:first-child) - margin-top: 1rem 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 deleted file mode 100644 index 95cdd2d3446..00000000000 --- a/app/javascript/stylesheets/application/blocks/page-content/_page-content-header-actions.sass +++ /dev/null @@ -1,37 +0,0 @@ -@use "../../../config/mixins/break-points" - -.page-content-header-actions - padding-top: .25rem - display: flex - flex-wrap: wrap - +break-points.media-breakpoint-up(sm) - justify-content: space-between - gap: .5rem - +break-points.media-breakpoint-down(xs) - justify-content: center - gap: .25rem - -.page-content-header-actions__start, -.page-content-header-actions__end - display: flex - +break-points.media-breakpoint-up(sm) - flex: 1 - gap: .5rem - +break-points.media-breakpoint-down(xs) - gap: .25rem - -.page-content-header-actions__start - justify-content: flex-start - -.page-content-header-actions__end - +break-points.media-breakpoint-up(sm) - justify-content: flex-end - -.page-content-header-actions__action - min-width: 5.4rem - +break-points.media-breakpoint-up(md) - min-width: 7rem - +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 deleted file mode 100644 index bc03d4dc981..00000000000 --- a/app/javascript/stylesheets/application/blocks/page-content/_page-content-header-metas.sass +++ /dev/null @@ -1,15 +0,0 @@ -@use "../../../config/mixins/break-points" - -.page-content-header-metas - +break-points.media-breakpoint-up(md) - display: flex - justify-content: space-between - -.page-content-header-metas__start - display: flex - align-items: center - flex-wrap: wrap - -.page-content-header-metas__meta - &:not(:last-child) - margin-right: .75em 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 deleted file mode 100644 index 01bf344ad0b..00000000000 --- a/app/javascript/stylesheets/application/blocks/page-content/_page-content-header.sass +++ /dev/null @@ -1,191 +0,0 @@ -@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.position(relative) - +break-points.media-breakpoint-up(md) - display: flex - gap: 1rem - &:not(:last-child) - +break-points.media-breakpoint-up(md) - margin-bottom: 1.5rem - +break-points.media-breakpoint-down(sm) - margin-bottom: 1.25rem - .a-watch-button.is-inactive, - .a-bookmark-button.is-inactive - color: var(--semi-muted-text) - background-color: var(--background-semi-shade) - .a-count-badge - float: right - margin-left: .5rem - margin-top: -.5rem - -.page-content-header__start - display: flex - flex-direction: column - align-items: center - gap: .5rem - -.page-content-header__end - +break-points.media-breakpoint-up(md) - flex: 1 - +break-points.media-breakpoint-down(sm) - .page-content-header__start + & - margin-top: .5rem - -.page-content-header__user - +break-points.media-breakpoint-down(sm) - display: flex - justify-content: center - -.page-content-header__category - +break-points.media-breakpoint-down(sm) - display: flex - justify-content: center - -.page-content-header__category-icon - +size.size(3.5rem) - border-radius: 50% - display: flex - align-items: center - justify-content: center - +text.text-block(.875rem 1, 600) - // regular_events - &.is-meeting - background-color: #7f6fb7 - color: var(--reversal-text) - &.is-reading-circle - background-color: #79bcc3 - color: var(--reversal-text) - &.is-question - background-color: #de9172 - color: var(--reversal-text) - &.is-chat - background-color: #56925c - color: var(--reversal-text) - &.is-others - background-color: #f7cd5b - color: var(--default-text) - -.page-content-header__user-link - +link.block-link - -.page-content-header__user-icon-image - +size.size(3.5rem) - -.page-content-header__company-logo-image - background-color: var(--base) - object-fit: contain - border-radius: .25rem - +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 - +break-points.media-breakpoint-up(md) - display: inline-flex - margin-bottom: .25rem - +break-points.media-breakpoint-down(sm) - display: flex - justify-content: center - text-align: center - margin-bottom: .5rem - .a-user-name, - .a-meta, - .a-category-link - font-size: .75rem - -.page-content-header__title - font-feature-settings: "palt" - letter-spacing: .02em - +text.text-block(1em 1.4, 700) - color: var(--main) - padding-bottom: .25rem - border-bottom: solid 1px var(--border-shade) - +break-points.media-breakpoint-up(md) - font-size: 1.625rem - word-wrap: break-word - +break-points.media-breakpoint-down(sm) - font-size: 1.125rem - word-break: break-all - &.is-wip - color: var(--muted-text) - &.is-skip-on - color: var(--muted-text) - .a-title-label - display: inline-flex - vertical-align: top - +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 - +link.hover-link - color: var(--main) - .page-content-header__title.is-wip & - color: var(--muted-text) - -.page-content-header__tags - margin-top: .75rem - -.page-content-header__row - &:not(:last-child) - margin-bottom: .5rem - .a-horizontal-dashed - margin-bottom: 1rem - -.page-content-header__description - +break-points.media-breakpoint-up(md) - padding-block: .25rem - +break-points.media-breakpoint-down(sm) - padding-block: .25rem - &.a-long-text - +break-points.media-breakpoint-up(md) - font-size: .9375rem - +break-points.media-breakpoint-down(sm) - font-size: .8125rem - -.page-content-header__emotion - display: inline-flex - vertical-align: middle - +position.position(relative, top -.125em) - +size.size(1em) - +break-points.media-breakpoint-up(md) - font-size: 1.75rem - margin-right: .375em - +break-points.media-breakpoint-down(sm) - font-size: 1.25rem - margin-right: .25em - -.page-content-header__emotion-image - +size.size(100%) - -.page-content-header__checker - +position.position(absolute, right 0, top -.5rem) - -.user-profile__company-logo-image - background-color: var(--base) - object-fit: contain - border-radius: .25rem - +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.text-block(.875rem 1.4) - text-align: center - padding: .5rem 1rem - border: solid 1px var(--danger) - border-radius: .25rem 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 deleted file mode 100644 index 566648e3736..00000000000 --- a/app/javascript/stylesheets/application/blocks/page-content/_page-content-members.sass +++ /dev/null @@ -1,34 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" - -.page-content-members - background: var(--base) - padding: .75rem 1rem - border-radius: .25rem - border: solid 1px var(--border-shade) - -.page-content-members__title - +text.text-block(.8125rem 1.4, 600) - -.page-content-members__items - display: flex - gap: .75rem - flex-wrap: wrap - -.page-content-members__item - display: flex - gap: .25rem - +break-points.media-breakpoint-up(md) - font-size: .875rem - +break-points.media-breakpoint-down(sm) - font-size: .75rem - .a-user-name - +text.text-block(1em 1.4) - color: var(--default-text) - -.page-content-members__user-icon - +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 deleted file mode 100644 index 6a75607f545..00000000000 --- a/app/javascript/stylesheets/application/blocks/page-content/_page-content-prev-next.sass +++ /dev/null @@ -1,24 +0,0 @@ -@use "../../../config/mixins/link" -@use "../../../config/mixins/text" - -.page-content-prev-next - display: flex - justify-content: space-between - margin-top: 1rem - -.page-content-prev-next__item - width: 8rem - max-width: 33.33% - -.page-content-prev-next__item-link - +text.text-block(.8125rem 1.4, block center nowrap) - color: var(--main) - +link.hover-link-reversal - &.is-prev - text-align: left - &.is-next - text-align: right - i:first-child - margin-right: .5rem - i:last-child - margin-left: .5rem diff --git a/app/javascript/stylesheets/application/blocks/page-content/_page-content.sass b/app/javascript/stylesheets/application/blocks/page-content/_page-content.sass deleted file mode 100644 index 371092acbe2..00000000000 --- a/app/javascript/stylesheets/application/blocks/page-content/_page-content.sass +++ /dev/null @@ -1,18 +0,0 @@ -@use "../../../config/mixins/break-points" - -.page-content - &.is-products, - &.is-questions, - &.is-books, - &.is-users - width: 100% - &:not(:first-child) - +break-points.media-breakpoint-up(md) - margin-top: 1.25rem - +break-points.media-breakpoint-down(sm) - margin-top: 1rem - &:not(:last-child) - +break-points.media-breakpoint-up(md) - margin-bottom: 2rem - +break-points.media-breakpoint-down(sm) - margin-bottom: 1rem diff --git a/app/javascript/stylesheets/application/blocks/page/_o-page-info.sass b/app/javascript/stylesheets/application/blocks/page/_o-page-info.sass deleted file mode 100644 index 501a1014206..00000000000 --- a/app/javascript/stylesheets/application/blocks/page/_o-page-info.sass +++ /dev/null @@ -1,6 +0,0 @@ -.o-page-info - background-color: var(--success-tint) - font-size: .875rem - padding-block: .75em - color: var(--success-text) - border-bottom: solid 1px var(--success) diff --git a/app/javascript/stylesheets/application/blocks/page/_page-body-actions.sass b/app/javascript/stylesheets/application/blocks/page/_page-body-actions.sass deleted file mode 100644 index 0f4a1fd4425..00000000000 --- a/app/javascript/stylesheets/application/blocks/page/_page-body-actions.sass +++ /dev/null @@ -1,4 +0,0 @@ -.page-body-actions - margin-top: 1.5rem - .a-empty-message + & - margin-top: 1rem diff --git a/app/javascript/stylesheets/application/blocks/page/_page-body.sass b/app/javascript/stylesheets/application/blocks/page/_page-body.sass deleted file mode 100644 index 326a918a4ae..00000000000 --- a/app/javascript/stylesheets/application/blocks/page/_page-body.sass +++ /dev/null @@ -1,61 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/short-text-style" - -.page-body - padding-block: 1.5rem - +break-points.media-breakpoint-up(md) - flex: 1 - display: flex - flex-direction: column - min-height: calc(100vh - 321px) - +break-points.media-breakpoint-down(sm) - padding-block: 1.125rem - -.page-body__inner - position: relative - +break-points.media-breakpoint-up(lg) - flex: 1 - -.page-body__rows - display: flex - flex-direction: column - +break-points.media-breakpoint-up(md) - gap: 1.25rem - +break-points.media-breakpoint-down(sm) - gap: 1rem - > * - width: 100% - -.page-body__columns - +break-points.media-breakpoint-up(lg) - display: flex - gap: 1.5rem - position: relative - &.is-reverse - display: flex - +break-points.media-breakpoint-up(md) - flex-direction: row - gap: 1.5rem - +break-points.media-breakpoint-down(sm) - flex-direction: column-reverse - gap: 1rem - .page-body__column - width: 100% - -.page-body__column - &.is-main - flex: 1 - margin-inline: auto - &.is-sub - flex: 0 0 20rem - &.is-sm - flex: 0 0 14rem - -.page-body__description - +short-text-style.short-text-style - +break-points.media-breakpoint-up(md) - font-size: .875rem - +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-filter.sass b/app/javascript/stylesheets/application/blocks/page/_page-filter.sass deleted file mode 100644 index 2b365a761d9..00000000000 --- a/app/javascript/stylesheets/application/blocks/page/_page-filter.sass +++ /dev/null @@ -1,2 +0,0 @@ -.page-filter - padding-block: 1rem diff --git a/app/javascript/stylesheets/application/blocks/page/_page-header-actions.sass b/app/javascript/stylesheets/application/blocks/page/_page-header-actions.sass deleted file mode 100644 index 62e667aeffd..00000000000 --- a/app/javascript/stylesheets/application/blocks/page/_page-header-actions.sass +++ /dev/null @@ -1,30 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/position" - -.page-header-actions - +break-points.media-breakpoint-down(sm) - margin-inline: -1rem - -.page-header-actions__items - display: flex - gap: .5rem - justify-content: center - +break-points.media-breakpoint-down(sm) - padding-inline: 1rem - -.page-header-actions__item - position: relative - > * - width: 100% - +break-points.media-breakpoint-up(md) - min-width: 10rem - display: flex - justify-content: center - +break-points.media-breakpoint-down(sm) - flex: 1 - max-width: 50% - &:first-child:last-child - max-width: 100% - -.page-header-actions__item-help - +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 deleted file mode 100644 index d4e66a5a5ce..00000000000 --- a/app/javascript/stylesheets/application/blocks/page/_page-header.sass +++ /dev/null @@ -1,56 +0,0 @@ -@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.position(relative) - display: flex - +break-points.media-breakpoint-up(lg) - height: 3.25rem - align-items: center - justify-content: space-between - +break-points.media-breakpoint-only(md) - padding-block: .75rem - flex-direction: column - +break-points.media-breakpoint-down(sm) - padding-block: .5rem - flex-direction: column - gap: .5rem - -.page-header__start - display: flex - align-items: center - flex: 1 - +break-points.media-breakpoint-up(lg) - max-width: calc(100% - 21rem) - -.page-header__title - color: var(--main) - line-height: 1.4 - font-weight: 700 - font-feature-settings: "palt" - letter-spacing: .02em - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - +break-points.media-breakpoint-up(lg) - font-size: 1.25rem - +break-points.media-breakpoint-down(md) - font-size: 1.125rem - flex: 1 - img - +size.size(2.5rem auto) - margin-right: .5rem - +break-points.media-breakpoint-down(sm) - +text.text-block(1rem 1.4) - color: var(--main) - .page-header__start & - align-self: center - -.page-header__action - +break-points.media-breakpoint-down(sm) - display: none diff --git a/app/javascript/stylesheets/application/blocks/page/_page-main-filter.sass b/app/javascript/stylesheets/application/blocks/page/_page-main-filter.sass deleted file mode 100644 index d722439fca7..00000000000 --- a/app/javascript/stylesheets/application/blocks/page/_page-main-filter.sass +++ /dev/null @@ -1,11 +0,0 @@ -.page-main-filter__inner - display: block - padding-block: .75rem - -.page-main-filter__row - display: flex - gap: 1rem - align-items: center - flex-wrap: wrap - .page-main-filter__row - gap: .5rem 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 deleted file mode 100644 index 36dbd4eb513..00000000000 --- a/app/javascript/stylesheets/application/blocks/page/_page-main-header-actions.sass +++ /dev/null @@ -1,22 +0,0 @@ -@use "../../../config/mixins/break-points" - -.page-main-header-actions__items - display: flex - gap: .5rem - justify-content: center - -.page-main-header-actions__item - +break-points.media-breakpoint-up(md) - min-width: 10rem - display: flex - justify-content: center - +break-points.media-breakpoint-down(sm) - flex: 1 - &.is-remove - .is-muted - border: solid 1px var(--border-shade) - &:hover - color: var(--default-text) - background-color: var(--base) - .a-button - height: 2.25rem diff --git a/app/javascript/stylesheets/application/blocks/page/_page-main-header.sass b/app/javascript/stylesheets/application/blocks/page/_page-main-header.sass deleted file mode 100644 index 5438c93f36c..00000000000 --- a/app/javascript/stylesheets/application/blocks/page/_page-main-header.sass +++ /dev/null @@ -1,26 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.page-main-header__inner - padding-block: .5rem - display: flex - +break-points.media-breakpoint-up(md) - min-height: calc(3.5rem - 1px) - align-items: center - +break-points.media-breakpoint-down(sm) - flex-direction: column - gap: .5rem - - .a-page-notice + .page-main & - padding-top: .5em - -.page-main-header__start - flex: 1 - -.page-main-header__title - color: var(--main) - font-weight: 700 - +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-notices.sass b/app/javascript/stylesheets/application/blocks/page/_page-notices.sass deleted file mode 100644 index 72575063a4c..00000000000 --- a/app/javascript/stylesheets/application/blocks/page/_page-notices.sass +++ /dev/null @@ -1,9 +0,0 @@ -.page-notices - margin-block: -.5rem 1rem - background-color: var(--success) - -.page-notices__item - .a-badge - min-width: 5rem - &:not(:first-child) - border-top: dashed 1px rgba(white, .2) diff --git a/app/javascript/stylesheets/application/blocks/page/_page-optional-header.sass b/app/javascript/stylesheets/application/blocks/page/_page-optional-header.sass deleted file mode 100644 index d96335294a6..00000000000 --- a/app/javascript/stylesheets/application/blocks/page/_page-optional-header.sass +++ /dev/null @@ -1,22 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.page-optional-header - padding-block: .5rem - background-color: var(--background) - -.page-optional-header__inner - +break-points.media-breakpoint-up(md) - display: flex - align-items: center - -.page-optional-header__start - +break-points.media-breakpoint-up(md) - flex: 1 - -.page-optional-header__title - +text.text-block(1rem 1.4) - align-items: center - display: flex - text-align: center - font-weight: 700 diff --git a/app/javascript/stylesheets/application/blocks/page/_page-tabs.sass b/app/javascript/stylesheets/application/blocks/page/_page-tabs.sass deleted file mode 100644 index b9e6bb34fc9..00000000000 --- a/app/javascript/stylesheets/application/blocks/page/_page-tabs.sass +++ /dev/null @@ -1,58 +0,0 @@ -@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) - -.page-tabs__items - display: flex - gap: .25rem - transform: translateY(1px) - overflow-y: visible - overflow-x: auto - margin-inline: -1rem - padding-inline: 1rem - -.page-tabs__item - +break-points.media-breakpoint-up(md) - min-width: 8.5rem - +break-points.media-breakpoint-down(sm) - min-width: 7rem - -.page-tabs__item-link - +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.border-radius(top, .25rem) - border: solid 1px var(--border) - +position.position(relative) - transition: all .2s ease-out - +break-points.media-breakpoint-up(md) - height: 2.5rem - +break-points.media-breakpoint-down(sm) - height: 2.75rem - font-size: .75rem - &:hover - background-color: var(--background-more-tint) - color: var(--muted-text) - &.is-active - background-color: var(--background) - border-bottom-color: var(--background) - color: var(--default-text) - &.is-sm - font-size: .75rem - &.is-inactive - color: var(--muted-text) - pointer-events: none - background-color: var(--background-semi-shade) - -.page-tabs__item-count - +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 deleted file mode 100644 index b0a2d9f83d3..00000000000 --- a/app/javascript/stylesheets/application/blocks/page/_page.sass +++ /dev/null @@ -1,11 +0,0 @@ -@use "../../../config/mixins/break-points" - -.page - height: 100% - display: flex - flex-direction: column - +break-points.media-breakpoint-up(md) - flex: 1 - -.page-main - flex: 1 diff --git a/app/javascript/stylesheets/application/blocks/practice/_categories.sass b/app/javascript/stylesheets/application/blocks/practice/_categories.sass deleted file mode 100644 index 47ff5a714ce..00000000000 --- a/app/javascript/stylesheets/application/blocks/practice/_categories.sass +++ /dev/null @@ -1,73 +0,0 @@ -@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) - +break-points.media-breakpoint-up(md) - margin-bottom: 3rem - +break-points.media-breakpoint-down(sm) - margin-bottom: 2rem - -.categories-item__title - +text.text-block(1.5rem 1.4, 700) - color: var(--main-text) - position: relative - +break-points.media-breakpoint-down(sm) - font-size: 1.25rem - .stamp - +break-points.media-breakpoint-up(md) - right: -3rem - top: -.5rem - +break-points.media-breakpoint-down(sm) - right: -3rem - top: -.75rem - transform: rotate(25deg) scale(.7) - -.categories-item__show-handle - +size.size(2rem) - display: flex - align-items: center - justify-content: center - cursor: pointer - +text.text-block(1rem 1) - color: var(--muted-text) - transition: all .2s ease-out - &:hover - color: var(--main-text) - -.categories-item__header - display: flex - justify-content: space-between - align-items: center - margin-bottom: .5rem - -.categories-item__body - overflow: hidden - clear: both - -.categories-item__description - +position.position(relative) - margin-bottom: 1rem - -.categories-item__edit - float: right - margin-left: .5rem - +position.position(relative, top -.25rem) - z-index: 2 - -.categories-item__edit-link - +size.size(2rem) - +link.flex-link - align-items: center - justify-content: center - +text.text-block(1rem 1) - color: var(--muted-text) - transition: all .2s ease-out - &:hover - color: var(--main-text) diff --git a/app/javascript/stylesheets/application/blocks/practice/_category-practices-item.sass b/app/javascript/stylesheets/application/blocks/practice/_category-practices-item.sass deleted file mode 100644 index 9b820834514..00000000000 --- a/app/javascript/stylesheets/application/blocks/practice/_category-practices-item.sass +++ /dev/null @@ -1,79 +0,0 @@ -@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.position(relative) - &:not(:last-child) - border-bottom: solid 1px var(--border-tint) - &:nth-child(even) - background-color: var(--background-more-tint) - +break-points.media-breakpoint-down(sm) - flex-wrap: wrap - padding: .5rem .75rem .75rem - &.sortable-chosen - background-color: color.tint(colors.$warning, 90%) - &.is-skip-on - background-color: var(--background-tint) - &[draggable="false"] - background-color: var(--base) - animation: grab-background-color 1.25s ease 0s 1 normal none running - -.category-practices-item__grab - flex: 0 0 2.75rem - -.category-practices-item__anchor - +break-points.media-breakpoint-up(md) - +position.position(relative, top -3.5rem) - -.category-practices-item__status - +text.text-block(.8125rem 1, 600) - +link.flex-link - align-items: center - justify-content: center - +size.size(4rem 2.125rem) - border-radius: .25rem - +practice-color.practice-color - -.category-practices-item__header - display: flex - +break-points.media-breakpoint-down(sm) - display: block - -.category-practices-item__title - flex: 1 - margin-right: .5rem - +break-points.media-breakpoint-down(sm) - margin-right: 0 - margin-bottom: .5rem - -.category-practices-item__title-link - +text.text-block(.875rem 1.4, flex) - color: var(--default-text) - align-items: center - min-height: 1.875rem - text-decoration: none - +break-points.media-breakpoint-down(sm) - font-size: .8125rem - .a-badge - margin-right: .25rem - &.is-skip-on - color: var(--muted-text) - -.category-practices-item__title-link-label - a.category-practices-item__title-link:hover & - text-decoration: underline - -.category-practices-item__learning-time - +text.text-block(.75rem 1.4) - color: var(--muted-text) - +break-points.media-breakpoint-up(md) - margin-top: -.25rem - +break-points.media-breakpoint-down(sm) - margin-top: .5rem diff --git a/app/javascript/stylesheets/application/blocks/practice/_completion-massage.sass b/app/javascript/stylesheets/application/blocks/practice/_completion-massage.sass deleted file mode 100644 index 813030c9835..00000000000 --- a/app/javascript/stylesheets/application/blocks/practice/_completion-massage.sass +++ /dev/null @@ -1,2 +0,0 @@ -.completion-massage - background-color: var(--success) diff --git a/app/javascript/stylesheets/application/blocks/practice/_practice-content-actions.sass b/app/javascript/stylesheets/application/blocks/practice/_practice-content-actions.sass deleted file mode 100644 index 96a29b9f484..00000000000 --- a/app/javascript/stylesheets/application/blocks/practice/_practice-content-actions.sass +++ /dev/null @@ -1,26 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.practice-content-actions__description - +text.text-block(.75rem 1.5 0 .75rem, center) - -.practice-content-actions__items - display: flex - align-items: flex-end - justify-content: center - +break-points.media-breakpoint-down(sm) - flex-direction: column - -.practice-content-actions__item - padding-inline: .375rem - > * - width: 10rem - max-width: 100% - +break-points.media-breakpoint-down(sm) - width: 100% - padding-inline: 0 - &:nth-child(2), - &:nth-child(3) - margin-top: .75rem - > * - width: 100% diff --git a/app/javascript/stylesheets/application/blocks/practice/_practice-content.sass b/app/javascript/stylesheets/application/blocks/practice/_practice-content.sass deleted file mode 100644 index 913cb905f82..00000000000 --- a/app/javascript/stylesheets/application/blocks/practice/_practice-content.sass +++ /dev/null @@ -1,48 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/text" -@use "../../../config/variables/colors" - -.practice-content - position: relative - display: block - margin-bottom: 2rem - &.is-memo - .a-card - height: 100% - .a-markdown-input__inner - height: 100% - margin-bottom: 0 - .a-markdown-input__inner.is-preview - overflow: auto - .card-footer - margin-top: 1rem - -.practice-content__body-notice - border: solid 1px var(--success) - margin-top: 1rem - background-color: rgba(colors.$success, .1) - +break-points.media-breakpoint-up(md) - padding: .75rem .875rem - +break-points.media-breakpoint-down(sm) - padding: .375rem .625rem - p - +text.text-block(.875rem 1.5) - color: var(--success-text) - +break-points.media-breakpoint-down(sm) - font-size: .75rem - -.card-footer__alert - text-align: center - margin-top: 1em - +break-points.media-breakpoint-up(md) - font-size: .875rem - +break-points.media-breakpoint-down(sm) - font-size: .75rem - >a - +text.text-block(1em 1.5) - color: var(--danger) - +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 deleted file mode 100644 index 26ca41bd53a..00000000000 --- a/app/javascript/stylesheets/application/blocks/practice/_practice-contents.sass +++ /dev/null @@ -1,23 +0,0 @@ -@use "../../../config/mixins/size" - -.practice-contents__pub-date - margin-bottom: .75rem - -.practice-contents__time - display: inline-flex - align-items: center - margin-bottom: .5em - cursor: pointer - font-size: .875rem - .a-meta - font-size: 1em - .a-help - +size.size(1rem) - font-size: .75em - margin-left: .375em - transition: all .2s ease-out - &:hover - .a-meta - color: var(--main-text) - .a-help - background-color: var(--main) diff --git a/app/javascript/stylesheets/application/blocks/practice/_practice-first-actions.sass b/app/javascript/stylesheets/application/blocks/practice/_practice-first-actions.sass deleted file mode 100644 index 91e47c67f10..00000000000 --- a/app/javascript/stylesheets/application/blocks/practice/_practice-first-actions.sass +++ /dev/null @@ -1,17 +0,0 @@ -@use "../../../config/mixins/break-points" - -.practice-first-actions - width: 100% - +break-points.media-breakpoint-up(md) - display: flex - -.practice-first-actions__start - flex: 1 - -.practice-first-actions__end - +break-points.media-breakpoint-up(md) - min-width: 6rem - +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 deleted file mode 100644 index 88e1eb596cc..00000000000 --- a/app/javascript/stylesheets/application/blocks/practice/_practice-status-buttons.sass +++ /dev/null @@ -1,53 +0,0 @@ -@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% - display: flex - align-items: center - -.practice-status-buttons__label - +break-points.media-breakpoint-up(md) - +text.text-block(.75rem, 600 nowrap) - margin-right: 1em - +break-points.media-breakpoint-down(sm) - display: none - -.practice-status-buttons__items - white-space: nowrap - flex: 1 - +break-points.media-breakpoint-up(md) - max-width: 25rem - -.practice-status-buttons__item - flex: 1 - +break-points.media-breakpoint-up(md) - max-width: 4.75rem - -.practice-status-buttons__button - &.is-inactive - $color: var(--base) - color: var(--muted-text) - background-color: $color - border-color: var(--background-shade) - transition: all .2s ease-out - &:hover - +practice-color.practice-hover-color(true) - &.is-active - pointer-events: none - +practice-color.practice-color(true) - +position.position(relative, 1) - -.practice-status__buttons-item - +break-points.media-breakpoint-down(sm) - width: 33.33% - .a-button - width: 100% - -.practice-status-buttons__note - +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 deleted file mode 100644 index 34c522d8e57..00000000000 --- a/app/javascript/stylesheets/application/blocks/practice/_sticky-message.sass +++ /dev/null @@ -1,18 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/position" -@use "../../../config/mixins/text" - -.sticky-message - +break-points.media-breakpoint-up(md) - background-color: var(--success) - width: 100% - +position.position(sticky, left 0, bottom 0, 2) - padding-block: .5rem - +text.text-block(.875rem 1.4, center) - color: var(--reversal-text) - a - +link.hover-link-reversal - color: var(--reversal-text) - +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 deleted file mode 100644 index 8b6408be369..00000000000 --- a/app/javascript/stylesheets/application/blocks/question/_answer-badge.sass +++ /dev/null @@ -1,23 +0,0 @@ -@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.size(4rem 3.5rem) - padding: .125rem - +position.position(absolute, right 0, top -.125rem, 1) - transform: rotate(25deg) - +text.text-block(.625rem 1, flex center) - color: var(--stamp-color) - flex-direction: column - align-items: center - justify-content: center - pointer-events: none - +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 deleted file mode 100644 index 96f0d8b1f0e..00000000000 --- a/app/javascript/stylesheets/application/blocks/reaction/_reaction.sass +++ /dev/null @@ -1,131 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/position" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" - -.reactions - display: flex - justify-content: space-between - position: relative - user-select: none - padding: .5rem - .card-body + & - border-top: none - -.reactions__items - display: flex - flex-wrap: wrap - gap: .5rem - +break-points.media-breakpoint-down(sm) - overflow: hidden - .reactions__dropdown & - +position.position(absolute, top 100%, left -1px, right -1px, 1) - border: 1px solid var(--border) - background-color: var(--background) - padding: .5rem - justify-content: flex-end - border-radius: 0 0 .25rem .25rem - -.reactions__item - cursor: pointer - display: inline-flex - align-items: center - justify-content: center - height: 2.375rem - padding-inline: .5rem - border-radius: .25rem - background-color: var(--base) - border: 1px solid var(--border) - transition: all .2s ease-out - position: relative - &.is-reacted - background-color: #f1f1ff - border-color: #dad9ff - &:hover - background-color: var(--background-more-tint) - @media (pointer: fine) - &:hover .reactions__item-login-names - display: block - .reactions__dropdown & - width: 2.75rem - border-color: var(--border-shade) - -.reactions__item-count - margin-left: .25rem - +text.text-block(.75rem 1) - -.reactions__item-login-names - display: none - position: absolute - top: 2.9rem - left: .1rem - font-size: .625rem - color: var(--reversal-text) - background: var(--main) - padding: 5px 11px 7px - border-radius: .2rem - pointer-events: none - white-space: nowrap - z-index: 1 - &::after - content: " " - position: absolute - bottom: 100% - left: 1.5rem - margin-left: -5px - border-width: 5px - border-style: solid - border-color: transparent transparent var(--main) transparent - li - line-height: 1.4 - -.reactions__dropdown-toggle - +size.size(2.8125rem 2.375rem) - +text.text-block(1.25rem 1, flex) - color: var(--main) - cursor: pointer - align-items: center - justify-content: center - border: 1px solid var(--border) - border-radius: .25rem - transition: all .2s ease-out - &:hover - color: var(--hover-text) - background: var(--background-more-tint) - &.is-disabled - cursor: not-allowed - color: var(--disabled) - background: var(--background) - -.reactions__dropdown-toggle-plus - font-size: .4em - margin-right: .3em - -.reactions__actions - display: flex - gap: .5rem - -.reactions__users-list - position: absolute - top: 100% - right: -1px - left: -1px - background-color: var(--background) - border: 1px solid var(--border) - padding: 0.5rem - z-index: 1 - border-radius: 0 0 .25rem .25rem - display: flex - flex-direction: column - gap: .5rem - -.reaction-users-line - display: flex - align-items: center - gap: .5rem - &:not(:last-child) - border-bottom: 1px dashed var(--border) - padding-bottom: .5rem - -.reaction-user__avatar - +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 deleted file mode 100644 index aaf573e2648..00000000000 --- a/app/javascript/stylesheets/application/blocks/report/_learning-times.sass +++ /dev/null @@ -1,23 +0,0 @@ -@use "../../../config/mixins/text" - -.learning-times - flex: 1 - display: flex - gap: .5rem - -.learning-times__header - display: flex - align-items: center - white-space: nowrap - +text.text-block(.8125rem 1.4, 600) - gap: .25rem - -.learning-times__items - display: flex - flex-wrap: wrap - -.learning-times__item - +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 deleted file mode 100644 index effcbc42a76..00000000000 --- a/app/javascript/stylesheets/application/blocks/report/_stamp.sass +++ /dev/null @@ -1,61 +0,0 @@ -@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.size(4rem 3.5rem) - +position.position(absolute, right -.25rem, top 0) - transform: rotate(25deg) - +text.text-block(.625rem 1, block center 400) - color: var(--stamp-color) - font-feature-settings: "palt" - letter-spacing: 0 - +break-points.media-breakpoint-down(sm) - +position.position(right 0, top 0) - &.is-circle - +size.size(3.5rem) - border-radius: 50% - &.is-solved - display: flex - flex-direction: column - font-size: 1.5rem - font-weight: 800 - font-family: serif - justify-content: center - &.is-cleared - display: flex - flex-direction: column - font-size: 1.125rem - font-weight: 800 - font-family: serif - justify-content: center - &.is-sm - +size.size(4.125em 2.25rem) - +position.position(absolute, right .5rem, top .5rem) - border-radius: .5rem - display: flex - align-items: center - -.stamp__content - display: flex - align-items: center - justify-content: center - &.is-title, - &.is-user-name - +size.size(100% 32%) - &.is-created-at - +size.size(100% 36%) - +border.border(vertical, solid 1px var(--stamp-color)) - -.stamp__content-inner - max-width: 100% - overflow: hidden - text-overflow: ellipsis - padding-inline: .25rem - height: 100% - line-height: 1.55 diff --git a/app/javascript/stylesheets/application/blocks/side/_side-tabs-contents.sass b/app/javascript/stylesheets/application/blocks/side/_side-tabs-contents.sass deleted file mode 100644 index f68d27b9867..00000000000 --- a/app/javascript/stylesheets/application/blocks/side/_side-tabs-contents.sass +++ /dev/null @@ -1,50 +0,0 @@ -@use "../../../config/mixins/position" -@use "../../../config/mixins/text" - -.side-tabs-contents - +position.position(relative, 1) - -#side-tabs-1:checked ~ .side-tabs-contents #side-tabs-content-1 - display: block - -#side-tabs-2:checked ~ .side-tabs-contents #side-tabs-content-2 - display: block - -#side-tabs-3:checked ~ .side-tabs-contents #side-tabs-content-3 - display: block - -#side-tabs-4:checked ~ .side-tabs-contents #side-tabs-content-4 - display: block - -.side-tabs-contents__item - display: none - .a-card - border-top-left-radius: 0 - max-height: 76vh - overflow-y: auto - .card-header - display: none - .card-header + [class*=a-border] - display: none - .card-body - max-height: calc(100vh - 181px) - overflow-y: auto - .user-metas - margin-top: 0 - .user-metas__title - padding: .25rem .5rem - font-size: .75rem - .user-metas__item - +text.text-block(.75rem 1.6) - border: solid 1px var(--border) - margin: -1px - .user-metas__item-label - flex: 0 0 9rem - .a-markdown-input - padding-inline: 0 - .a-long-text - font-size: .8125rem - .page-body - padding-block: 0 - .container - padding-inline: 0 diff --git a/app/javascript/stylesheets/application/blocks/side/_side-tabs-nav.sass b/app/javascript/stylesheets/application/blocks/side/_side-tabs-nav.sass deleted file mode 100644 index 149052f67b7..00000000000 --- a/app/javascript/stylesheets/application/blocks/side/_side-tabs-nav.sass +++ /dev/null @@ -1,37 +0,0 @@ -@use "../../../config/mixins/border-radius" -@use "../../../config/mixins/position" -@use "../../../config/mixins/text" - -.side-tabs-nav__items - display: flex - +position.position(relative, 2) - overflow-y: hidden - overflow-x: auto - transform: translateY(1px) - -.side-tabs-nav__item - min-width: 6.5rem - -#side-tabs-1:checked ~ .side-tabs-nav #side-tabs-nav-1, -#side-tabs-2:checked ~ .side-tabs-nav #side-tabs-nav-2, -#side-tabs-3:checked ~ .side-tabs-nav #side-tabs-nav-3, -#side-tabs-4:checked ~ .side-tabs-nav #side-tabs-nav-4 - background-color: var(--base) - color: var(--default-text) - -.side-tabs-nav__item-link - +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.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) & - margin-left: -1px - &:hover - color: var(--default-text) diff --git a/app/javascript/stylesheets/application/blocks/side/_side-tabs.sass b/app/javascript/stylesheets/application/blocks/side/_side-tabs.sass deleted file mode 100644 index d03dcd63d54..00000000000 --- a/app/javascript/stylesheets/application/blocks/side/_side-tabs.sass +++ /dev/null @@ -1,8 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/position" - -.side-tabs - +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 deleted file mode 100644 index 8db234c5836..00000000000 --- a/app/javascript/stylesheets/application/blocks/side/_user-statuses.sass +++ /dev/null @@ -1,31 +0,0 @@ -@use "../../../config/mixins/text" - -.user-statuses - padding: .75rem 1rem - & + .a-card - border-radius: 0 0 4px 4px - -.user-statuses__actions - display: flex - align-items: center - gap: .75rem - -.user-statuses__title - +text.text-block(.8125rem 1.4, 600) - -.user-statuses__items - flex: 1 - display: flex - align-items: center - flex-wrap: wrap - gap: .75rem - -.user-statuses__item - flex: 1 - max-width: calc(50% - .75rem) - -.user-statuses__delete - display: flex - justify-content: flex-end - margin-top: .75rem - +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 deleted file mode 100644 index 851323463c7..00000000000 --- a/app/javascript/stylesheets/application/blocks/static-pages/_thanks-message.sass +++ /dev/null @@ -1,45 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.thanks-message__header - color: var(--reversal-text) - & + .a-card - margin-top: 2rem - -.thanks-message__title - line-height: 1.4 - text-align: center - font-weight: 800 - color: var(--main) - +break-points.media-breakpoint-up(md) - font-size: 1.75rem - +break-points.media-breakpoint-down(sm) - font-size: 1.75rem - -.thanks-message__body - padding: 1.25em 1.5em - font-size: 1rem - display: flex - flex-direction: column - gap: 1rem - +break-points.media-breakpoint-down(sm) - font-size: .875rem - p - +text.text-block(1em 1.6 0 1em) - &:last-child - margin-bottom: 0 - strong - font-weight: 600 - display: inline-block - margin-inline: .25em - -.thanks-message__inputed-values.form - margin-inline: 0 - -.thanks-message__inputed-values-title - +text.text-block(.875rem 1.4, 800) - background-color: var(--background-shade) - padding: .25rem .5rem - margin-bottom: 1rem - border-left: solid .5rem var(--main) - border-radius: .25rem diff --git a/app/javascript/stylesheets/application/blocks/static-pages/_thanks.sass b/app/javascript/stylesheets/application/blocks/static-pages/_thanks.sass deleted file mode 100644 index 5ab897e2843..00000000000 --- a/app/javascript/stylesheets/application/blocks/static-pages/_thanks.sass +++ /dev/null @@ -1,34 +0,0 @@ -@use "../../../config/mixins/link" -@use "../../../config/mixins/text" -@use "../../../config/variables/colors" - -.thanks - max-width: 26rem - padding-inline: 1rem - margin-inline: auto - margin-top: 6rem - -.thanks__logo-image - max-width: 20rem - display: block - margin-inline: auto - margin-bottom: 3rem - -.thanks__body - background-color: var(--base) - padding: 1.5rem - border-radius: .25rem - -.thanks__icon - +text.text-block(4rem 1 0 .5rem, center) - color: var(--main) - -.thanks__title - +text.text-block(.875rem 1.4 0 .75rem, center 600) - -.thanks__message - p - +text.text-block(.75rem 1.6, center) - a - +colors.default-link - +link.hover-link-reversal diff --git a/app/javascript/stylesheets/application/blocks/survey/_survey-added-question.sass b/app/javascript/stylesheets/application/blocks/survey/_survey-added-question.sass deleted file mode 100644 index c9f82f2cc97..00000000000 --- a/app/javascript/stylesheets/application/blocks/survey/_survey-added-question.sass +++ /dev/null @@ -1,14 +0,0 @@ -.survey-added-question - .survey-added-question + & - margin-top: 1rem - -.survey-added-question__inner - display: flex - gap: .75rem - align-items: flex-end - -.survey-added-question__col - &.is-main - flex: 1 - select - width: 100% diff --git a/app/javascript/stylesheets/application/blocks/survey/_survey-additional-question.sass b/app/javascript/stylesheets/application/blocks/survey/_survey-additional-question.sass deleted file mode 100644 index 535409e70db..00000000000 --- a/app/javascript/stylesheets/application/blocks/survey/_survey-additional-question.sass +++ /dev/null @@ -1,5 +0,0 @@ -.survey-additional-question - margin-top: 1.5rem - -.survey-additional-question__input - margin-top: 1rem diff --git a/app/javascript/stylesheets/application/blocks/survey/_survey-questions-item.sass b/app/javascript/stylesheets/application/blocks/survey/_survey-questions-item.sass deleted file mode 100644 index af4095c58b9..00000000000 --- a/app/javascript/stylesheets/application/blocks/survey/_survey-questions-item.sass +++ /dev/null @@ -1,2 +0,0 @@ -.survey-questions-item__input - margin-top: 1rem diff --git a/app/javascript/stylesheets/application/blocks/survey/_survey-questions.sass b/app/javascript/stylesheets/application/blocks/survey/_survey-questions.sass deleted file mode 100644 index 23c748f9e77..00000000000 --- a/app/javascript/stylesheets/application/blocks/survey/_survey-questions.sass +++ /dev/null @@ -1,6 +0,0 @@ -.survey-questions - margin-top: 2rem - -.survey-questions-item__description - margin-top: .75rem - color: var(--semi-muted-text) diff --git a/app/javascript/stylesheets/application/blocks/survey/survey-answer.sass b/app/javascript/stylesheets/application/blocks/survey/survey-answer.sass deleted file mode 100644 index 5d95001ef72..00000000000 --- a/app/javascript/stylesheets/application/blocks/survey/survey-answer.sass +++ /dev/null @@ -1,103 +0,0 @@ -.survey-answer-summary - margin-bottom: 2rem - background-color: #fff - border-radius: 0.5rem - box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1) - padding: 1.5rem - &__header - display: flex - justify-content: space-between - align-items: center - flex-wrap: wrap - gap: 1rem - &__user, &__date - display: flex - align-items: center - gap: 0.5rem - &__icon - color: #6f7b8a - font-size: 1rem - &__name - font-weight: bold - color: #4a90e2 - text-decoration: none - &:hover - text-decoration: underline - -.survey-answer-questions - display: flex - flex-direction: column - gap: 1.5rem - -.survey-answer-question - background-color: #fff - border-radius: 0.5rem - box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1) - overflow: hidden - &__header - display: flex - justify-content: space-between - align-items: center - padding: 1rem 1.5rem - background-color: #f8f9fa - border-bottom: 1px solid #e9ecef - flex-wrap: wrap - gap: 0.5rem - &__title - font-size: 1.125rem - font-weight: bold - margin: 0 - flex: 1 - &__badge - display: inline-flex - align-items: center - gap: 0.25rem - font-size: 0.75rem - padding: 0.25rem 0.5rem - border-radius: 1rem - i - font-size: 0.75rem - &.is-text - background-color: #e3f2fd - color: #0d47a1 - &.is-radio - background-color: #e8f5e9 - color: #1b5e20 - &.is-checkbox - background-color: #fff3e0 - color: #e65100 - &.is-scale - background-color: #f3e5f5 - color: #4a148c - &__content - padding: 1.5rem - &__text - line-height: 1.6 - color: #212529 - &__choice, &__reason - margin-bottom: 1rem - display: flex - gap: 0.5rem - flex-wrap: wrap - &__choice-label, &__reason-label - font-weight: bold - min-width: 3rem - &__choice-value - color: #212529 - &__reason-text - color: #495057 - line-height: 1.6 - flex: 1 - width: 100% - margin-top: 0.5rem - -@media (max-width: 767px) - .survey-answer-question - &__header - flex-direction: column - align-items: flex-start - &__badge - margin-top: 0.5rem - &__choice, &__reason - flex-direction: column - gap: 0.25rem diff --git a/app/javascript/stylesheets/application/blocks/survey/survey-answers.sass b/app/javascript/stylesheets/application/blocks/survey/survey-answers.sass deleted file mode 100644 index 8b9a960e5ec..00000000000 --- a/app/javascript/stylesheets/application/blocks/survey/survey-answers.sass +++ /dev/null @@ -1,5 +0,0 @@ -.user-link - color: #4a90e2 - text-decoration: none - &:hover - text-decoration: underline diff --git a/app/javascript/stylesheets/application/blocks/survey/survey-result.sass b/app/javascript/stylesheets/application/blocks/survey/survey-result.sass deleted file mode 100644 index 153ea12b18b..00000000000 --- a/app/javascript/stylesheets/application/blocks/survey/survey-result.sass +++ /dev/null @@ -1,127 +0,0 @@ -.survey-result-summary - margin-bottom: 2rem - background-color: #fff - border-radius: 0.5rem - box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1) - padding: 1.5rem - &__header - display: flex - justify-content: space-between - align-items: center - flex-wrap: wrap - gap: 1rem - &__count, &__date - display: flex - align-items: center - gap: 0.5rem - &__icon - color: #6f7b8a - font-size: 1rem - &__value - font-weight: bold - font-size: 1.125rem - -.survey-result-questions - display: flex - flex-direction: column - gap: 1.5rem - -.survey-result-question - background-color: #fff - border-radius: 0.5rem - box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1) - overflow: hidden - margin-bottom: 2rem - &__header - display: flex - justify-content: space-between - align-items: center - padding: 1rem 1.5rem - background-color: #f8f9fa - border-bottom: 1px solid #e9ecef - flex-wrap: wrap - gap: 0.5rem - &__title - font-size: 1.125rem - font-weight: bold - margin: 0 - flex: 1 - &__badge - display: inline-flex - align-items: center - gap: 0.25rem - font-size: 0.75rem - padding: 0.25rem 0.5rem - border-radius: 1rem - i - font-size: 0.75rem - &.is-text - background-color: #e3f2fd - color: #0d47a1 - &.is-radio - background-color: #e8f5e9 - color: #1b5e20 - &.is-checkbox - background-color: #fff3e0 - color: #e65100 - &.is-scale - background-color: #f3e5f5 - color: #4a148c - &__content - padding: 1.5rem - .row - margin-bottom: 1rem - .table - border-collapse: collapse - width: 100% - margin-bottom: 1rem - th, td - padding: 0.75rem - vertical-align: top - border-top: 1px solid #dee2e6 - thead th - vertical-align: bottom - border-bottom: 2px solid #dee2e6 - background-color: #f8f9fa - tbody + tbody - border-top: 2px solid #dee2e6 - .table-info - background-color: #e3f2fd - .table-responsive - display: block - width: 100% - overflow-x: auto - -webkit-overflow-scrolling: touch - canvas - max-width: 100% - height: auto !important - h4 - font-size: 1rem - font-weight: bold - margin-top: 0 - color: #495057 - .text-break - word-break: break-word - .font-weight-bold - font-weight: bold - a - color: #4a90e2 - text-decoration: none - &:hover - text-decoration: underline - -@media (max-width: 767px) - .survey-result-question - &__header - flex-direction: column - align-items: flex-start - &__badge - margin-top: 0.5rem - &__content - .row - margin-left: 0 - margin-right: 0 - .col-md-6, .col-md-12 - padding-left: 0 - padding-right: 0 - margin-bottom: 1.5rem diff --git a/app/javascript/stylesheets/application/blocks/tags/_random-tags.sass b/app/javascript/stylesheets/application/blocks/tags/_random-tags.sass deleted file mode 100644 index 151a893076e..00000000000 --- a/app/javascript/stylesheets/application/blocks/tags/_random-tags.sass +++ /dev/null @@ -1,61 +0,0 @@ -@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 - +link.flex-link - padding-left: 1rem - padding-right: .5rem - padding-block: .5rem - min-height: 2.75rem - align-items: center - transition: all .2s ease-out - &:hover - background-color: var(--primary-tint) - -.random-tags-item__link-inner - +position.position(relative) - flex: 1 - padding-right: 2em - -.random-tags-item__count - +position.position(absolute, right 0, top 2px) - +text.text-block(.625rem, flex center) - color: var(--default-text) - justify-content: center - align-items: center - padding-inline: .75em - background-color: var(--background) - height: 1.5em - border-radius: 1em - -.random-tags-item__name - +text.text-block(.875rem 1.4) - color: var(--semi-muted-text) - .is-first &, - .is-second &, - .is-third & - font-weight: 600 - .is-first &::before, - .is-second &::before, - .is-third &::before - margin-right: .5em - +font-awsome.fa(fas '\f521') - .is-first &, - .is-first &::before - color: var(--gold) - .is-second &, - .is-second &::before - color: var(--silver) - .is-third &, - .is-third &::before - color: var(--bronze) - .is-up & - font-size: 1.125em - .is-low & - font-size: .875em diff --git a/app/javascript/stylesheets/application/blocks/tags/_tag-input.sass b/app/javascript/stylesheets/application/blocks/tags/_tag-input.sass deleted file mode 100644 index cdcd87e2643..00000000000 --- a/app/javascript/stylesheets/application/blocks/tags/_tag-input.sass +++ /dev/null @@ -1,16 +0,0 @@ -@use "../../../config/mixins/text" - -.tag-input - margin-top: .5rem - border-radius: .25rem - background-color: var(--background-more-tint) - padding: .75rem 1rem - border: dashed 1px var(--border) - -.tag-input__title - +text.text-block(.875rem 1.5 0 .5rem, block 600) - -.tag-input__items - display: flex - flex-wrap: wrap - gap: .5rem diff --git a/app/javascript/stylesheets/application/blocks/tags/_tag-links.sass b/app/javascript/stylesheets/application/blocks/tags/_tag-links.sass deleted file mode 100644 index 7fcbbb3df43..00000000000 --- a/app/javascript/stylesheets/application/blocks/tags/_tag-links.sass +++ /dev/null @@ -1,37 +0,0 @@ -@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 - +break-points.media-breakpoint-up(md) - min-width: 12rem - -.tag-links__items - display: flex - align-items: flex-end - flex-wrap: wrap - gap: .5rem - -.tag-links__item-link - +text.text-block(.6875rem 1.4, block) - color: var(--muted-text) - background-color: transparent - border: solid 1px var(--muted-text) - padding: .1875rem .625rem - border-radius: 2rem - transition: all .2s ease-in - text-decoration: none - &:hover - background-color: rgba(colors.$base, .7) - color: var(--semi-muted-text) - border-color: var(--semi-muted-text) - -.tag-links__item-edit - +text.text-block(.75rem 1.4, block) - color: var(--main) - +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 deleted file mode 100644 index 19a7640ee13..00000000000 --- a/app/javascript/stylesheets/application/blocks/thread/_action-completed.sass +++ /dev/null @@ -1,16 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/margin-padding" - -.action-completed__action - +break-points.media-breakpoint-up(md) - max-width: 16rem - +margin-padding.margin(horizontal, auto) - -.action-completed__description - margin-top: .75rem - +break-points.media-breakpoint-up(md) - max-width: 28rem - +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 deleted file mode 100644 index fa63743b4cf..00000000000 --- a/app/javascript/stylesheets/application/blocks/thread/_thread-comment-form.sass +++ /dev/null @@ -1,34 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/position" -@use "../../../config/mixins/size" - -.thread-comment-form - +break-points.media-breakpoint-up(md) - display: flex - .card-footer - border-top: none - &.is-action-completed - +break-points.media-breakpoint-up(md) - margin-top: 1.5rem - padding-left: var(--thread-header-author) - +break-points.media-breakpoint-down(sm) - margin-top: 1rem - -.thread-comment-form__author - flex: 0 0 var(--thread-header-author) - +size.size(var(--thread-header-author) 100%) - padding-right: 2rem - border-right: solid 1px var(--border-tint) - -.thread-comment-form__user-icon - +size.size(100% auto) - border-radius: 50% - -.thread-comment-form__form, -.thread-action-completed-form__form - flex: 1 - +position.position(relative) - overflow: hidden - -.thread-comment-form__action-completed - flex: 1 diff --git a/app/javascript/stylesheets/application/blocks/thread/_thread-comment.sass b/app/javascript/stylesheets/application/blocks/thread/_thread-comment.sass deleted file mode 100644 index 9d52b8aab9d..00000000000 --- a/app/javascript/stylesheets/application/blocks/thread/_thread-comment.sass +++ /dev/null @@ -1,152 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/position" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" - -.thread-comment - +position.position(relative) - border-radius: .25rem - +break-points.media-breakpoint-up(md) - display: flex - margin-bottom: 2rem - +break-points.media-breakpoint-down(sm) - padding-left: 0 - margin-bottom: 1rem - -.thread-comment__start - +break-points.media-breakpoint-up(md) - flex: 0 0 var(--thread-header-author) - +size.size(var(--thread-header-author) 100%) - +break-points.media-breakpoint-down(sm) - display: none - -.thread-comment__end - +break-points.media-breakpoint-up(md) - max-width: calc(100% - var(--thread-header-author)) - flex: 1 - - -.thread-comment__title - +text.text-block(.875rem 1.4, 600) - +break-points.media-breakpoint-up(md) - margin-right: .5rem - flex: 1 - +break-points.media-breakpoint-down(sm) - display: flex - -.thread-comment__title-user-icon - +break-points.media-breakpoint-up(md) - display: none - +break-points.media-breakpoint-down(sm) - +size.size(1.5rem) - display: inline-block - vertical-align: middle - margin-right: .25rem - -.thread-comment__title-link - +break-points.media-breakpoint-up(md) - height: 100% - display: inline-flex - align-items: center - +break-points.media-breakpoint-down(sm) - display: inline-block - white-space: nowrap - max-width: calc(100vw - 15.5rem) - overflow: hidden - text-overflow: ellipsis - vertical-align: middle - &.a-placeholder - width: 15% - height: 1.4em - -.thread-comment__title-icon - +size.size(1.5rem) - margin-right: .5rem - -.thread-comment__title-label - +text.text-block(.8125rem, block 400) - color: var(--muted-text) - margin-bottom: .125rem - i - margin-right: .1875rem - -.thread-comment__description - overflow: hidden - min-height: 5rem - padding-block: 1rem - padding-inline: 1rem - +break-points.media-breakpoint-down(sm) - padding: .75rem - word-wrap: break-word - -.thread-comment__user-icon - +size.size(3.5rem) - object-fit: cover - border-radius: 50% - +break-points.media-breakpoint-down(sm) - display: none - -.thread-comment__company-logo - +size.size(3.5rem) - object-fit: cover - border-radius: .25rem - border: solid 1px var(--border) - background-color: white - +break-points.media-breakpoint-up(md) - margin-top: .5rem - +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.text-block(.8125rem 1.4, nowrap) - color: var(--muted-text) - +link.hover-link-reversal - cursor: pointer - +position.position(relative) - +break-points.media-breakpoint-down(sm) - font-size: .75rem - &:active, - &:focus, - &.is-active - color: var(--danger) - &::after - content: "Copied!" - display: block - background-color: rgba(black, .4) - border-radius: .125rem - padding: .25rem - +text.text-block(.625rem 1) - color: var(--reversal-text) - +position.position(absolute, left 0, top 100%) - &.a-placeholder - width: 30% - height: 1.4em - -.thread-comment__actions - padding-block: 0 1rem - -.thread-comment__actions-items - display: flex - align-items: center - -.thread-comment__actions-item-link - +text.text-block(1.25rem 1, center flex) - color: var(--muted-text) - +size.size(2.375rem) - align-items: center - justify-content: center - border-radius: 50% - transition: color .2s ease-in, background-color .2s ease-in - &.is-success - &:hover - background-color: #e0eefe - color: var(--primary) - &.is-danger - &:hover - background-color: #f5e6ea - color: var(--danger) diff --git a/app/javascript/stylesheets/application/blocks/thread/_thread-comments-more.sass b/app/javascript/stylesheets/application/blocks/thread/_thread-comments-more.sass deleted file mode 100644 index 6e0f0a746f8..00000000000 --- a/app/javascript/stylesheets/application/blocks/thread/_thread-comments-more.sass +++ /dev/null @@ -1,28 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/position" -@use "../../../config/mixins/size" -@use "../../../config/variables/colors" - -.thread-comments-more - +position.position(relative) - +break-points.media-breakpoint-up(md) - margin-bottom: 2rem - padding-left: var(--thread-header-author) - +break-points.media-breakpoint-down(sm) - padding-left: 0 - margin-bottom: 1rem - &::before, - &::after - content: '' - display: block - +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 - +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 deleted file mode 100644 index 7f0e76621ab..00000000000 --- a/app/javascript/stylesheets/application/blocks/thread/_thread-comments.sass +++ /dev/null @@ -1,37 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/position" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" -@use "../../../config/variables/layout" - -.thread-comments - +position.position(relative) - -.thread-comments__header - +break-points.media-breakpoint-up(md) - margin-bottom: 1.5rem - +break-points.media-breakpoint-down(sm) - margin-bottom: 1rem - -.thread-comments__title - align-items: center - display: flex - font-weight: 700 - +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.text-block(.875rem 1, 600 flex) - align-items: center - +size.size(auto 1.25rem) - background-color: var(--base) - padding-inline: .5rem - border-radius: 1.5rem - margin-left: .5rem - -.thread-comments - .form-actions - +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 deleted file mode 100644 index 0e9968f7b8b..00000000000 --- a/app/javascript/stylesheets/application/blocks/thread/_thread-form.sass +++ /dev/null @@ -1,22 +0,0 @@ -@use "../../../config/mixins/break-points" - -.thread-form - +break-points.media-breakpoint-up(md) - padding: 1rem 2rem - +break-points.media-breakpoint-down(sm) - padding: .75rem 1rem - -.thread-form__actions - margin-top: 1rem - +break-points.media-breakpoint-up(md) - display: flex - justify-content: center - gap: .75rem - -.thread-form__action - +break-points.media-breakpoint-up(md) - flex: 0 0 14rem - max-width: 50% - +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 deleted file mode 100644 index 2edc739be37..00000000000 --- a/app/javascript/stylesheets/application/blocks/thread/_thread-header.sass +++ /dev/null @@ -1,22 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/position" -@use "../../../config/mixins/size" - -.thread-header - +position.position(relative) - +break-points.media-breakpoint-up(md) - padding: 1rem 2rem .75rem - +break-points.media-breakpoint-down(sm) - padding: 2.25rem .75rem .5rem - -.thread-header__user-icon-link - margin-inline: .5rem .25rem - display: flex - justify-content: center - align-items: center - -.thread-header__user-icon - +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/_a-list-item-badge.sass b/app/javascript/stylesheets/application/blocks/user/_a-list-item-badge.sass deleted file mode 100644 index e6abdbe57cc..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_a-list-item-badge.sass +++ /dev/null @@ -1,55 +0,0 @@ -.a-list-item-badge - +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) - span - +position(absolute, left 50%, top 50%) - transform: translate(-50%, -50%) scale(.8) - letter-spacing: -.05em - &.is-wip - background-color: var(--background-semi-shade) - color: var(--semi-muted-text) - &.is-active - background-color: var(--danger) - color: var(--reversal-text) - &.is-unread - background-color: var(--danger) - color: var(--reversal-text) - &.is-searchable - border: solid 1px var(--muted-text) - color: var(--muted-text) - &.is-ended - background-color: var(--muted-text) - color: var(--reversal-text) - &.is-report - background-color: #7f6fb7 - color: var(--reversal-text) - &.is-practice - background-color: #5bbcc7 - color: var(--reversal-text) - &.is-question - background-color: #e2965b - color: var(--reversal-text) - &.is-page - background-color: #56925c - color: var(--reversal-text) - &.is-announcement - background-color: #f7cd5b - color: var(--default-text) - &.is-event - background-color: #fb96a3 - color: var(--reversal-text) - &.is-regular_event - background-color: #dc6ed2 - color: var(--reversal-text) - &.is-product - background-color: #909b3c - color: var(--reversal-text) - &.is-user - background-color: #7cbd9c - color: var(--reversal-text) diff --git a/app/javascript/stylesheets/application/blocks/user/_active-practices-list.sass b/app/javascript/stylesheets/application/blocks/user/_active-practices-list.sass deleted file mode 100644 index 2ce1ac0765c..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_active-practices-list.sass +++ /dev/null @@ -1,23 +0,0 @@ -@use "../../../config/mixins/font-awsome" -@use "../../../config/mixins/link" -@use "../../../config/mixins/text" - -.active-practices-list__items - margin-bottom: -.25rem - -.active-practices-list-item:not(:last-child) - border-bottom: dotted .0625rem var(--border-tint) - -.active-practices-list-item__link - +text.text-block(.875rem 1.55, block) - color: var(--main) - padding-block: .5rem - padding-inline: 1rem - +link.hover-link - &::before - +font-awsome.fa(fas '\f060') - display: inline-block - margin-right: .5rem - color: var(--accent) - &:hover::before - text-decoration: none diff --git a/app/javascript/stylesheets/application/blocks/user/_companies-item.sass b/app/javascript/stylesheets/application/blocks/user/_companies-item.sass deleted file mode 100644 index 335caac7be7..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_companies-item.sass +++ /dev/null @@ -1,62 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" - -.companies-item - height: 100% - -.companies-item__inner - +break-points.media-breakpoint-up(md) - height: 100% - -.companies-item__header - padding: 1rem - &:not(:last-child) - border-bottom: solid 1px var(--border-tint) - -.companies-item__header-inner - display: flex - gap: 1rem - -.companies-item__header-start - +break-points.media-breakpoint-up(md) - flex: 0 0 3.5rem - +break-points.media-breakpoint-down(sm) - flex: 0 0 2.5rem - -.companies-item__user-icon-image - background-color: white - +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.text-block(1em 1.4, 600 block) - color: var(--main) - margin-bottom: .125rem - +break-points.media-breakpoint-up(md) - font-size: 1.125rem - +break-points.media-breakpoint-down(sm) - font-size: 1rem - -.companies-item__name-link - color: var(--main-text) - display: block - +link.hover-link - -.companies-item__body - padding: 1rem - -.companies-item__body-row - &:not(:first-child) - margin-top: .75rem - -.companies-item__description - p - +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 deleted file mode 100644 index e21bfff198d..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_completed-practices-progress.sass +++ /dev/null @@ -1,58 +0,0 @@ -@use "../../../config/mixins/position" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" - -$bar-height: .75rem -.completed-practices-progress - padding: .75rem 1rem - display: flex - align-items: center - gap: .5rem - -.completed-practices-progress__bar-container - flex: 1 - border-radius: 20rem - height: $bar-height - overflow: hidden - -.completed-practices-progress__bar - +size.size(100% $bar-height) - background-color: var(--background-semi-shade) - -.completed-practices-progress__percentage-bar - height: $bar-height - background-color: var(--success) - +position.position(relative, top $bar-height * -1) - box-shadow: rgba(black, .2) 0 .0625rem .0625rem - -.completed-practices-progress__counts - position: relative - cursor: pointer - display: block - -.completed-practices-progress__counts-inner - cursor: pointer - &:hover - .completed-practices-progress__percentage - text-decoration: underline - -.completed-practices-progress__percentage - +text.text-block(.8125rem, right nowrap) - -.completed-practices-progress__number - position: absolute - right: 0 - bottom: calc(100% + .5rem) - background-color: var(--base) - border: solid 1px var(--border) - padding: .25rem .5rem - +text.text-block(.8125rem 1.4, right nowrap) - border-radius: .25rem - -.completed-practices-progress__counts - input:checked ~ label .completed-practices-progress__number - display: block - -.completed-practices-progress__counts - input:not(:checked) ~ label .completed-practices-progress__number - display: none diff --git a/app/javascript/stylesheets/application/blocks/user/_following.sass b/app/javascript/stylesheets/application/blocks/user/_following.sass deleted file mode 100644 index d2cd4a88034..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_following.sass +++ /dev/null @@ -1,45 +0,0 @@ -@use "../../../config/mixins/font-awsome" -@use "../../../config/mixins/position" -@use "../../../config/mixins/text" - -.following - position: relative - width: 100% - summary - display: block - summary::-webkit-details-marker, - summary::marker - display: none - -.following__dropdown - position: absolute - z-index: 3 - width: 18.75rem - -.following-option - cursor: pointer - width: 100% - padding: .75rem - display: block - text-align: left - transition: all .2s ease-out - &:hover - background-color: var(--background-more-tint) - -.following-option__inner - position: relative - padding-left: 1.5rem - .following-option.is-active &::before - +font-awsome.fa(fas '\f00c') - +position.position(absolute, left 0, top 0) - -.following-option__label - +text.text-block(.875rem 1.4, 600) - color: var(--semi-muted-text) - .following-option.is-active & - color: var(--default-text) - -.following-option__desciption - +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 deleted file mode 100644 index fc1018c8de9..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_group-company-name.sass +++ /dev/null @@ -1,45 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/size" - -.group-company-name - +break-points.media-breakpoint-up(md) - font-size: 1.125rem - +break-points.media-breakpoint-down(sm) - font-size: 1rem - -.group-company-name__link - text-decoration: none - color: var(--main-text) - display: flex - align-items: center - -.group-company-name__icon - display: block - +size.size(2.5rem) - margin-right: .75rem - -.group-company-name__icon-image - +size.size(100%) - object-fit: cover - border-radius: .25rem - -.group-company-name__name - display: block - flex: 1 - -.group-company-name__label - display: block - font-weight: 600 - +break-points.media-breakpoint-up(md) - margin-right: .25em - a:hover & - text-decoration: underline - -.group-company-name__label-option - font-size: .75rem - font-weight: 400 - color: var(--muted-text) - margin-top: .5rem - display: block - a:hover & - text-decoration: none diff --git a/app/javascript/stylesheets/application/blocks/user/_niconico-calendar.sass b/app/javascript/stylesheets/application/blocks/user/_niconico-calendar.sass deleted file mode 100644 index a2d7e3adabe..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_niconico-calendar.sass +++ /dev/null @@ -1,99 +0,0 @@ -@use "../../../config/mixins/link" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" -@use "../../../config/variables/colors" - -.niconico-calendar-nav - display: flex - justify-content: center - align-items: center - margin-top: -1rem - font-size: .875rem - -.niconico-calendar-nav__previous, -.niconico-calendar-nav__next - +size.size(2.75rem) - display: flex - align-items: center - justify-content: center - cursor: pointer - +link.hover-link - transition: all .2s ease-out - &:hover - color: var(--main-text) - &.is-blank - cursor: default - pointer-events: none - -.niconico-calendar-nav__year--month - width: 6rem - text-align: center - -.niconico-calendar - width: 100% - table-layout: fixed - th, - td - border: solid 1px var(--border-shade) - td - height: 3rem - -.niconico-calendar__header - background-color: var(--background-tint) - -.niconico-calendar__header-day - width: calc(100% / 7) - +text.text-block(.75rem 1, center) - padding-block: .25em - &.is-sunday - color: var(--danger) - &.is-saturday - color: var(--main-text) - -.niconico-calendar__day - &.is-blank - background-color: var(--background-more-tint) - &.is-positive - background-color: var(--positive-background) - &.is-negative - background-color: var(--negative-background) - &.is-neutral - background-color: var(--neutral-background) - &.is-today - .niconico-calendar__day-inner - border: dashed 2px var(--success) - .niconico-calendar__day-label - font-weight: 600 - color: var(--success) - -.niconico-calendar__day-inner - +link.block-link - padding-block: .25rem .125rem - +size.size(100%) - -a.niconico-calendar__day-inner - transition: all .2s ease-out - cursor: pointer - &:hover - background-color: rgba(colors.$warning, .1) - box-shadow: var(--warning) 0 0 0 1px inset - position: relative - -.niconico-calendar__day-label - +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.text-block(1.75rem 1, center flex) - align-items: center - justify-content: center - +size.size(100% 1.875rem) - .niconico-calendar__day.is-blank & - color: var(--muted-text) - font-size: 1.25rem - -.niconico-calendar__emotion-image - +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 deleted file mode 100644 index bc4d80a86a7..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_sns-links.sass +++ /dev/null @@ -1,17 +0,0 @@ -@use "../../../config/mixins/break-points" - -.sns-links - margin-top: .5rem - display: flex - gap: 1rem - align-items: center - justify-content: space-between - -.sns-links__items - +break-points.media-breakpoint-down(xs) - justify-content: center - -.sns-links__item-link - font-size: .875rem - &:hover - color: var(--main-text) diff --git a/app/javascript/stylesheets/application/blocks/user/_user-data.sass b/app/javascript/stylesheets/application/blocks/user/_user-data.sass deleted file mode 100644 index 7f0a205fc87..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_user-data.sass +++ /dev/null @@ -1,28 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/position" -@use "../../../config/mixins/text" - -.user-data - padding: 1rem 1.5rem - +position.position(relative) - display: flex - flex-direction: column - +break-points.media-breakpoint-up(md) - gap: 1rem - +break-points.media-breakpoint-down(sm) - padding: .75rem - gap: .75rem - -.user-data__description - flex: 0 0 100% - +break-points.media-breakpoint-up(md) - font-size: .9375rem - +break-points.media-breakpoint-down(sm) - font-size: .8125rem - p - +text.text-block(1em 1.8 0 .8em) - &:last-child - margin-bottom: 0 - -.user-data__tags - margin-top: .75rem diff --git a/app/javascript/stylesheets/application/blocks/user/_user-grass.sass b/app/javascript/stylesheets/application/blocks/user/_user-grass.sass deleted file mode 100644 index ce07bb92fb5..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_user-grass.sass +++ /dev/null @@ -1,41 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/size" - -.user-grass - padding: 1rem - +break-points.media-breakpoint-down(sm) - padding: .75rem - -.user-grass__link - position: relative - display: block - .user-grass__image - &.is-loading - animation: loadingNow .5s ease infinite alternate - -.user-grass-nav - font-size: .875rem - display: flex - justify-content: center - align-items: center - margin-top: -1rem - -.user-grass-nav__previous, -.user-grass-nav__next - +size.size(2.75rem) - display: flex - align-items: center - justify-content: center - cursor: pointer - +link.hover-link - transition: all .2s ease-out - &:hover - color: var(--main-text) - &.is-blank - cursor: default - pointer-events: none - -.user-grass-nav__year--month - width: 13rem - text-align: center diff --git a/app/javascript/stylesheets/application/blocks/user/_user-group.sass b/app/javascript/stylesheets/application/blocks/user/_user-group.sass deleted file mode 100644 index 726a5de70e1..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_user-group.sass +++ /dev/null @@ -1,66 +0,0 @@ -@use "../../../config/mixins/break-points" - -.user-group - padding: 1rem - &:not(:first-child) - border-top: solid 1px var(--border-tint) - -.user-group__header - display: flex - gap: .5rem - +break-points.media-breakpoint-up(md) - justify-content: space-between - +break-points.media-breakpoint-down(sm) - flex-direction: column - -.user-group__title - +break-points.media-breakpoint-up(md) - font-size: 1rem - +break-points.media-breakpoint-down(sm) - font-size: 1rem - -.user-group__title-link - text-decoration: none - color: var(--main-text) - display: flex - gap: .5rem - +break-points.media-breakpoint-up(md) - align-items: flex-end - +break-points.media-breakpoint-down(sm) - flex-direction: column - .user-group__title.is-inline & - flex-direction: row - align-items: flex-end - -.user-group__title-label - display: block - font-weight: 600 - .user-group__title-link:hover & - text-decoration: underline - -.user-group__title-icon - &.is-first - color: var(--gold) - &.is-second - color: var(--silver) - &.is-third - color: var(--bronze) - -.user-group__date - font-size: .75rem - font-weight: 400 - color: var(--muted-text) - -.user-group__count - font-size: .75rem - font-weight: 400 - color: var(--muted-text) - -.user-group__counts - +break-points.media-breakpoint-up(md) - margin-top: -.5rem - flex: 1 - max-width: 29rem - .card-counts__item - width: 3.5rem - color: var(--default-text) diff --git a/app/javascript/stylesheets/application/blocks/user/_user-metas.sass b/app/javascript/stylesheets/application/blocks/user/_user-metas.sass deleted file mode 100644 index 3798c8f6794..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_user-metas.sass +++ /dev/null @@ -1,64 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" -@use "../../../config/variables/colors" - -.user-metas - background-color: var(--base) - -.user-metas__title - border: solid 1px var(--border) - margin-bottom: -1px - padding: .375rem .75rem - +text.text-block(.75rem 1.4, 600) - background-color: var(--background-tint) - position: relative - -.user-metas__items - border: solid 1px var(--border) - .user-metas__items + & - border-top: none - -.user-metas__items-label - border-bottom: solid 1px var(--border) - padding: .25rem .75rem - +text.text-block(.75rem 1.4, 600) - background-color: var(--background) - span - font-weight: 400 - -.user-metas__item - +text.text-block(.75rem 1.4, flex) - +break-points.media-breakpoint-down(sm) - display: block - &:nth-child(even) - background-color: var(--input-background) - &:not(:last-child) - border-bottom: solid 1px var(--border) - -.user-metas__item-label - text-align: right - border-right: dashed 1px var(--border) - flex: 0 0 9rem - padding: .375rem .5rem - +break-points.media-breakpoint-down(sm) - text-align: left - border-right: none - border-bottom: dashed 1px var(--border) - -.user-metas__item-value - flex: 1 - padding: .375rem .5rem - ul - list-style: disc - margin-left: 2em - li - margin-block: .25rem - *:first-child - margin-top: 0 - *:last-child - margin-bottom: 0 - -.user-metas__item-value-text - &.is-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 deleted file mode 100644 index 4221f5a24f7..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_user-profile.sass +++ /dev/null @@ -1,20 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/size" - -.user-profile__icon - +break-points.media-breakpoint-down(sm) - position: static - text-align: center - margin-bottom: .25rem - -.user-profile__user-icon-image - +break-points.media-breakpoint-up(md) - +size.size(5rem) - +break-points.media-breakpoint-down(sm) - +size.size(4rem) - -.user-company-profile__description - +break-points.media-breakpoint-up(md) - font-size: .9375rem - +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 deleted file mode 100644 index d0c8eaa15ed..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_user-secret-attributes.sass +++ /dev/null @@ -1,37 +0,0 @@ -@use "../../../config/mixins/text" - -.user-secret-attributes - font-size: .75rem - border: solid 1px var(--border) - padding: .75em 1em - &:not(:first-child) - margin-top: .25em - -.user-secret-attributes__title - +text.text-block(.75rem 1.4, 600) - margin-bottom: .25em - -.user-secret-attributes__items - display: flex - flex-wrap: wrap - color: var(--muted-text) - & + .user-secret-attributes__items - margin-top: .125rem - -.user-secret-attributes__item - line-height: 1.4 - display: flex - align-items: center - &:not(:first-child) - &::before - content: "、" - -.user-secret-attributes__item-label - &::after - content: ":" - margin-right: .25rem - -.user-secret-attributes__item-value - &.is-important - font-weight: 600 - color: var(--danger) 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 deleted file mode 100644 index 21d52cdd331..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_user-study-streak-tracker.sass +++ /dev/null @@ -1,65 +0,0 @@ -@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 deleted file mode 100644 index 56d56a3c87a..00000000000 --- a/app/javascript/stylesheets/application/blocks/user/_users-item.sass +++ /dev/null @@ -1,94 +0,0 @@ -@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.text-block(.625rem 1.4, center) - padding: .25rem - +border-radius.border-radius(top, .1875rem) - margin: -1px -1px -.25rem - -.users-item__inner - +break-points.media-breakpoint-up(md) - height: 100% - display: flex - flex-direction: column - -.users-item__header - +position.position(relative) - padding: .75rem 1rem - border-bottom: solid 1px var(--border-tint) - -.users-item__header-inner - display: flex - gap: 1rem - -.users-item__header-start - display: flex - flex-direction: column - gap: .25rem - align-items: center - -.users-item__header-end - flex: 1 - -.users-item__icon - +break-points.media-breakpoint-up(md) - min-width: 3.5rem - +break-points.media-breakpoint-down(sm) - min-width: 2.5rem - -.users-item__user-icon-image - background-color: var(--base) - +break-points.media-breakpoint-up(md) - +size.size(3.5rem) - +break-points.media-breakpoint-down(sm) - +size.size(2.5rem) - -.users-item__name - +text.text-block(1em 1.4, 600 block) - color: var(--main) - margin-bottom: .125rem - +break-points.media-breakpoint-up(md) - font-size: 1.125rem - +break-points.media-breakpoint-down(sm) - font-size: 1rem - i - color: var(--danger) - margin-left: .25em - font-size: .75em - -.users-item__body - padding: .75rem 1rem 0 - +break-points.media-breakpoint-up(md) - flex: 1 - -.users-item__description - p - +text.text-block(.75rem 1.6) - -.users-item__tags - margin-top: .75rem - -.users-item__edit - text-align: center - margin-top: -.25rem - padding-bottom: 1rem - -.user-item__company-logo-image - +size.size(3.5rem) - min-width: 3.5rem - object-fit: cover - background-color: var(--base) - border-radius: .25rem - border: solid 1px var(--border-tint) - -.users-item__footer - position: relative diff --git a/app/javascript/stylesheets/atoms/_a-badge.sass b/app/javascript/stylesheets/atoms/_a-badge.sass deleted file mode 100644 index e5dcb067448..00000000000 --- a/app/javascript/stylesheets/atoms/_a-badge.sass +++ /dev/null @@ -1,55 +0,0 @@ -@use "../config/mixins/badge" -@use "../config/mixins/button" -@use "../config/variables/colors" - -.a-badge - +badge.badge-base - - // color - &.is-primary - +badge.badge-color(colors.$primary) - &.is-secondary - +badge.badge-color(colors.$secondary) - &.is-info - +badge.badge-color(colors.$info) - &.is-success - +badge.badge-color(colors.$success) - &.is-warning - +badge.badge-color(colors.$warning) - &.is-danger - +badge.badge-color(colors.$danger) - &.is-disabled - +badge.badge-color(colors.$disabled) - &.is-main - +badge.badge-color(colors.$main) - &.is-muted - border: none - color: colors.$muted-text - font-weight: 400 - background-color: colors.$background - &.is-dark-muted - border: none - color: colors.$semi-muted-text - font-weight: 400 - background-color: var(--background-semi-shade) - - //size - &.is-xs - +button.button-size(.625rem, 1, .5) - font-weight: 500 - &:not(:first-child) - margin-left: .5em - &:not(:last-child) - margin-right: .5em - &.is-sm - +button.button-size(.6875rem, 1, .5) - font-weight: 600 - &.is-md - +button.button-size(.8125rem, 1, .5) - font-weight: 600 - &.is-lg - +button.button-size(1rem, 1, .5) - font-weight: 600 - &.is-xl - +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 deleted file mode 100644 index c68140a066d..00000000000 --- a/app/javascript/stylesheets/atoms/_a-block-check.sass +++ /dev/null @@ -1,82 +0,0 @@ -@use "../config/mixins/font-awsome" -@use "../config/mixins/position" -@use "../config/mixins/size" -@use "../config/mixins/text" - -.a-block-check - height: 100% - -.a-block-check__label - background-color: var(--input-background) - height: 100% - min-height: 2.5rem - +text.text-block(.8125rem 1.4, flex center) - gap: .25rem - align-items: center - justify-content: center - border: solid 1px var(--input-border) - padding: .5rem 1.25rem .5rem 2.25rem - cursor: pointer - border-radius: .25rem - transition: all .2s ease-in - position: relative - &.is-ta-left - justify-content: flex-start - text-align: left - &.has-input - flex-wrap: wrap - label - flex: 0 0 100% - cursor: pointer - &:hover - background-color: var(--input-hover-background) - border-color: var(--input-hover-border) - input:checked + & - background-color: var(--input-selected-background) - border-color: var(--input-selected-border) - color: var(--input-selected-text) - .a-block-check &::before - display: block - +position.position(absolute, left .75rem, top 50%) - transform: translateY(-50%) - .form-item-block__item & - border: none - border-radius: none - &.is-dammy - pointer-events: none - - // radio - .a-block-check.is-radio &::before - content: '' - +size.size(.875rem) - border: solid 1px var(--input-border) - border-radius: 50% - background-color: var(--base) - .a-block-check.is-radio input:checked + &::before - border-color: var(--primary) - background-color: var(--primary) - box-shadow: inset 0 0 0 2px var(--base) - // checkbox - .a-block-check.is-checkbox &::before - content: '' - +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) - +font-awsome.fa(fas "\f00c") - color: var(--reversal-text) - -.a-block-check__name - +text.text-block(.875rem 1.4, block center) - -.a-block-check__image - +size.size(2rem) - .a-block-check__label.has-icon & - +size.size(1.5rem) - -.a-block-check__account - margin-left: .25em - font-weight: 400 diff --git a/app/javascript/stylesheets/atoms/_a-bookmark-button.sass b/app/javascript/stylesheets/atoms/_a-bookmark-button.sass deleted file mode 100644 index c963f158f2e..00000000000 --- a/app/javascript/stylesheets/atoms/_a-bookmark-button.sass +++ /dev/null @@ -1,9 +0,0 @@ -.a-bookmark-button - border: none - &:hover - border: none - &.is-inactive - color: var(--semi-muted-text) - &:hover - color: var(--default-text) - background-color: var(--background-semi-shade) diff --git a/app/javascript/stylesheets/atoms/_a-border.sass b/app/javascript/stylesheets/atoms/_a-border.sass deleted file mode 100644 index ea7864c41f1..00000000000 --- a/app/javascript/stylesheets/atoms/_a-border.sass +++ /dev/null @@ -1,17 +0,0 @@ -.a-border - height: 1px - width: 100% - display: block - border-top: solid 1px var(--border) - -.a-border-tint - height: 1px - width: 100% - display: block - border-top: solid 1px var(--border-tint) - -.a-border-shade - height: 1px - width: 100% - display: block - border-top: solid 1px var(--border-shade) diff --git a/app/javascript/stylesheets/atoms/_a-button.sass b/app/javascript/stylesheets/atoms/_a-button.sass deleted file mode 100644 index 78ff3927393..00000000000 --- a/app/javascript/stylesheets/atoms/_a-button.sass +++ /dev/null @@ -1,173 +0,0 @@ -@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.button-base - - // color - &.is-primary - +button.button-color(colors.$primary) - &.is-secondary - +button.button-color(colors.$secondary) - &.is-active - +button.button-color(colors.$primary) - &.is-info - +button.button-color(colors.$info) - &.is-success - +button.button-color(colors.$success) - &.is-warning - +button.button-color(colors.$warning) - &.is-danger - +button.button-color(colors.$danger) - &.is-disabled - +button.button-color(colors.$disabled) - &.is-main - +button.button-color(colors.$main) - &.is-primary-border - +button.border-button-color(colors.$primary) - &.is-secondary-border - +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: colors.$border - color: colors.$muted-text - font-weight: 400 !important - background-color: var(--base) - &:hover - background-color: var(--background-more-tint) - color: var(--semi-muted-text) - - &.is-sm-text - span - font-size: .875em - &.is-lg-icon - i - font-size: 1.5em - &.is-text - background: none - border: none - font-weight: 400 - +link.hover-link-reversal - +colors.default-link - height: auto !important - padding: 0 !important - &.is-text-reversal - background: none - border: none - font-weight: 400 - +link.hover-link - +colors.muted-link - height: auto !important - padding: 0 !important - &.is-muted-text - background: none - border: none - font-weight: 400 - +link.hover-link-reversal - +colors.muted-link - height: auto !important - padding: 0 !important - - //size - &.is-xxs, - &.is-xxs input[type="submit"] - +button.button-size(.625rem, 1, 1.4rem) - font-weight: 400 - &.is-xs, - &.is-xs input[type="submit"] - +button.button-size(.75rem, 1, 1.7rem) - font-weight: 400 - &.is-sm, - &.is-sm input[type="submit"] - +button.button-size(.75rem, 1.25, 2rem) - &.is-md, - &.is-md input[type="submit"] - +button.button-size(.8125rem, 1.4, 2.25rem) - &.is-lg, - &.is-lg input[type="submit"] - +button.button-size(1rem, 1, 2.75rem) - &.is-xl, - &.is-xl input[type="submit"] - +button.button-size(1.25rem, 1, 57px) - font-weight: 800 - +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.position(relative) - i - +text.text-block(1.125em, flex) - align-items: center - justify-content: center - +position.position(absolute, top 0, bottom 0) - &.is-left-icon - i - +position.position(left 0) - margin-left: .45em - input[type="submit"] - padding-left: 2.25em - &.is-right-icon - +position.position(relative) - i - +position.position(right 0) - margin-right: .45em - input[type="submit"] - padding-right: 2.25em - - //icon - &.is-back - +position.position(relative) - padding-left: .75em - padding-right: 0 - &::before - +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 - +button.input-button-base - -.is-button-group - display: flex - .is-text-align-center & - justify-content: center - >*:not(:last-child) - margin-right: -1px - li:first-child - .a-button - +border-radius.border-radius(right, 0) - li:last-child - .a-button - +border-radius.border-radius(left, 0) - li:not(:first-child):not(:last-child) - .a-button - border-radius: 0 - -.is-inline-buttons - display: flex - gap: .5rem - .is-text-align-center & - justify-content: center - -[class*=a-button]:not(input) - padding-block: 0 - -[class*=a-button] - &[class*=-primary]:disabled - background-color: var(--primary) - cursor: default diff --git a/app/javascript/stylesheets/atoms/_a-cancel-button.sass b/app/javascript/stylesheets/atoms/_a-cancel-button.sass deleted file mode 100644 index f66dec01e88..00000000000 --- a/app/javascript/stylesheets/atoms/_a-cancel-button.sass +++ /dev/null @@ -1,17 +0,0 @@ -@use "../config/mixins/link" -@use "../config/mixins/size" - -.a-cancel-button - margin-left: .5em - color: var(--background) - font-size: .875rem - +link.flex-link - +size.size(1.5em) - background-color: var(--muted-text) - align-items: center - justify-content: center - border-radius: 50% - transition: all .2s ease-out - &:hover - background-color: var(--primary) - color: var(--reversal-text) diff --git a/app/javascript/stylesheets/atoms/_a-card.sass b/app/javascript/stylesheets/atoms/_a-card.sass deleted file mode 100644 index 3919f0c6dd4..00000000000 --- a/app/javascript/stylesheets/atoms/_a-card.sass +++ /dev/null @@ -1,81 +0,0 @@ -@use "../config/mixins/border-radius" -@use "../config/mixins/break-points" -@use "../config/mixins/link" -@use "../config/mixins/text" - -@mixin anAdjacentCard - +break-points.media-breakpoint-up(xl) - margin-top: 1.25rem - +break-points.media-breakpoint-down(lg) - margin-top: 1rem - -.a-card - display: flex - flex-direction: column - border-radius: .25rem - width: 100% - margin-inline: auto - background-color: var(--base) - border: solid 1px var(--border) - &.is-danger - border-color: var(--danger) - color: var(--danger-text) - background-color: var(--danger-tint) - +break-points.media-breakpoint-down(lg) - &:not(:last-child) - margin-bottom: 1rem - .a-card + & - @include anAdjacentCard - & + .a-card-react - @include anAdjacentCard - .a-card-react + & - @include anAdjacentCard - &.is-borderd - border: solid 4px var(--default-text) - &.is-modal - width: 42.5rem - max-width: 100% - +break-points.media-breakpoint-down(sm) - margin-inline: 1rem - &.is-toggle - label - cursor: pointer - > input:not(:checked) + * + * - display: none - > input:not(:checked) + * - border-bottom: none - > input:checked + * + * - display: block - > input:not(:checked) + * .is-hidden-then-unchecked - display: none - > input:checked + * .is-hidden-then-checked - display: none - .card-body - max-height: 50vh - overflow-y: auto - &:has(.a-table) - border: none - .card-header - border: solid 1px var(--border) - border-bottom: none - &.is-danger - border: solid .25rem var(--danger) - -table.a-card - display: table - -.a-card__alert - padding: .5rem 1.25rem - background-color: var(--danger) - text-align: center - +text.text-block(.875rem 1.4) - color: var(--reversal-text) - +border-radius.border-radius(top, .25rem) - a - +link.hover-link-reversal - color: var(--reversal-text) - -.a-card__columns - display: flex - +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 deleted file mode 100644 index b79f6c0f7d2..00000000000 --- a/app/javascript/stylesheets/atoms/_a-category-link.sass +++ /dev/null @@ -1,10 +0,0 @@ -@use "../config/mixins/link" -@use "../config/mixins/text" - -.a-category-link - +text.text-block(.8125rem 1.4) - color: var(--muted-text) - +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 deleted file mode 100644 index f40768986ad..00000000000 --- a/app/javascript/stylesheets/atoms/_a-checkbox.sass +++ /dev/null @@ -1,50 +0,0 @@ -@use "../config/mixins/font-awsome" -@use "../config/mixins/position" -@use "../config/mixins/size" -@use "../config/mixins/text" - -.a-checkbox - +position.position(relative) - input[type="checkbox"] - +position.position(absolute, left 0, top 0) - visibility: hidden - opacity: 0 - pointer-events: none - span - +position.position(relative) - display: inline-block - margin-bottom: 0 - padding-left: 1.5em - cursor: pointer - &::before - content: '' - display: block - +size.size(.875rem) - border: solid 1px var(--muted-text) - border-radius: .1875rem - +position.position(absolute, left 0, top 50%) - margin-top: -.4375rem - background-color: var(--base) - input:checked + span::before - +font-awsome.fa(fas '\f00c') - +text.text-block(.75rem .875rem, center flex) - align-items: center - justify-content: center - color: var(--reversal-text) - background-color: var(--primary) - border-color: var(--primary-text) - &:hover - span - text-decoration: underline - &::before, - &::after - text-decoration: none - -.a-toggle-checkbox - +size.size(0) - display: block - +position.position(fixed, left 0) - opacity: 0 - overflow: hidden - visibility: hidden - pointer-events: none diff --git a/app/javascript/stylesheets/atoms/_a-checker.sass b/app/javascript/stylesheets/atoms/_a-checker.sass deleted file mode 100644 index f3a5a2208c3..00000000000 --- a/app/javascript/stylesheets/atoms/_a-checker.sass +++ /dev/null @@ -1,15 +0,0 @@ -@use "../config/mixins/text" -@use "../config/variables/colors" - -.a-checker - display: flex - align-items: center - justify-content: center - border: solid 1px colors.$danger - border-radius: 1rem - background-color: colors.$danger-tint - padding: .125rem .5rem .125rem .25rem - -.a-checker__status - +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 deleted file mode 100644 index 89d8bd1c2f4..00000000000 --- a/app/javascript/stylesheets/atoms/_a-completion-message.sass +++ /dev/null @@ -1,36 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/text" - -.a-completion-message - background-color: var(--success) - padding-block: .5rem - &:not(:last-child) - margin-bottom: 1.25rem - -.a-completion-message__inner - display: flex - +break-points.media-breakpoint-up(md) - justify-content: center - align-items: center - gap: 1rem - +break-points.media-breakpoint-down(sm) - flex-direction: column - gap: .75rem - -.a-completion-message__title - +text.text-block(1em 1.4, center 600) - color: var(--reversal-text) - +break-points.media-breakpoint-up(md) - font-size: 1rem - +break-points.media-breakpoint-down(sm) - font-size: .8125rem - -.a-completion-message__actions-items - display: flex - gap: .75rem - -.a-completion-message__actions-item - +break-points.media-breakpoint-up(md) - width: 9rem - +break-points.media-breakpoint-down(sm) - flex: 1 diff --git a/app/javascript/stylesheets/atoms/_a-copy-button.sass b/app/javascript/stylesheets/atoms/_a-copy-button.sass deleted file mode 100644 index 93aac079ce4..00000000000 --- a/app/javascript/stylesheets/atoms/_a-copy-button.sass +++ /dev/null @@ -1,23 +0,0 @@ -.a-copy-button - position: relative - color: var(--semi-muted-text) - background-color: var(--background-semi-shade) - border: none - &.is-muted - color: var(--semi-muted-text) - background-color: var(--background-semi-shade) - &.is-active - background-color: hsl(242, 51%, 51%) - color: var(--reversal-text) - &.is-active::after - content: "Copied!" - display: block - background-color: rgba(0, 0, 0, 0.4) - border-radius: .125rem - padding: .25rem - font-size: .625rem - line-height: 1 - color: var(--reversal-text) - position: absolute - left: 0 - top: 100% diff --git a/app/javascript/stylesheets/atoms/_a-count-badge.sass b/app/javascript/stylesheets/atoms/_a-count-badge.sass deleted file mode 100644 index 8caf656af0e..00000000000 --- a/app/javascript/stylesheets/atoms/_a-count-badge.sass +++ /dev/null @@ -1,44 +0,0 @@ -@use "../config/mixins/text" - -.a-count-badge - +text.text-block(1.125rem 1, center) - border: solid 1px var(--border-shade) - vertical-align: middle - border-radius: .25rem - overflow: hidden - background-color: var(--base) - transition: all .2s ease-out - display: flex - flex-direction: column - min-width: 2.75em - -a.a-count-badge - text-decoration: none - &:hover - background-color: var(--background-more-tint) - -.a-count-badge__label - font-size: .625rem - color: var(--default-text) - border-bottom: solid 1px var(--border-shade) - padding-block: .25rem - -.a-count-badge__value - font-size: 1em - font-weight: 700 - color: var(--danger) - transition: all .2s ease-out - display: flex - align-items: center - justify-content: center - padding: .0625em .125em .1875em - line-height: .9375 - &.is-zero - color: var(--muted-text) - &.is-counting - color: var(--muted-text) - padding: 0 - i - font-size: .75em - .a-count-badge__value + & - display: none diff --git a/app/javascript/stylesheets/atoms/_a-dropdown.sass b/app/javascript/stylesheets/atoms/_a-dropdown.sass deleted file mode 100644 index 3c1aa7dac17..00000000000 --- a/app/javascript/stylesheets/atoms/_a-dropdown.sass +++ /dev/null @@ -1,10 +0,0 @@ -.a-dropdown - overflow: hidden - background-color: var(--base) - border: solid 1px var(--border-shade) - box-shadow: rgba(black, .2) 0 0 .375rem - border-radius: .25rem - -.a-dropdown__item - &:not(:last-child) - border-bottom: solid 1px var(--border) diff --git a/app/javascript/stylesheets/atoms/_a-elapsed-days.sass b/app/javascript/stylesheets/atoms/_a-elapsed-days.sass deleted file mode 100644 index 8056ff4323c..00000000000 --- a/app/javascript/stylesheets/atoms/_a-elapsed-days.sass +++ /dev/null @@ -1,28 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/text" - -.card-header.a-elapsed-days - letter-spacing: .125em - text-indent: .125em - margin: -1px -1px 0 - background-color: var(--base) - border: solid 1px var(--border) - >* - width: 100% - +break-points.media-breakpoint-up(md) - +text.text-block(1rem 1.4, 600 center) - padding: .375rem 1rem - +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) - border-color: var(--reply-warning-border) - &.is-reply-alert - color: var(--reversal-text) - background-color: var(--reply-alert-background) - border-color: var(--reply-alert-border) - &.is-reply-deadline - color: var(--reversal-text) - background-color: var(--reply-deadline-background) - border-color: var(--reply-deadline-border) diff --git a/app/javascript/stylesheets/atoms/_a-empty-message.sass b/app/javascript/stylesheets/atoms/_a-empty-message.sass deleted file mode 100644 index b798cba47b4..00000000000 --- a/app/javascript/stylesheets/atoms/_a-empty-message.sass +++ /dev/null @@ -1,21 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/text" - -.a-empty-message - +text.text-block(1rem 1.6, center) - margin-inline: auto - max-width: 100% - +break-points.media-breakpoint-up(md) - width: 42.5rem - +break-points.media-breakpoint-down(sm) - font-size: .8125rem - &.is-info - border: solid 1px var(--info) - padding: .75rem 1.25rem - border-radius: .25rem - background-color: var(--info-tint) - color: var(--info-text) - +break-points.media-breakpoint-down(sm) - padding: .75rem 1rem - p - +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 deleted file mode 100644 index 83dc46bcc2d..00000000000 --- a/app/javascript/stylesheets/atoms/_a-file-input.sass +++ /dev/null @@ -1,89 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/position" -@use "../config/mixins/size" - -.a-pdf-input - display: flex - gap: .75rem - +break-points.media-breakpoint-down(sm) - flex-direction: column - -.a-pdf-input__inner - flex: 1 - background-color: var(--base) - display: flex - align-items: center - justify-content: center - +position.position(relative) - overflow: hidden - cursor: pointer - border-radius: .25rem - height: 2.25rem - -.a-file-input - label - height: 10rem - max-width: 100% - margin-inline: auto - border: solid 1px var(--input-border) - background-color: var(--base) - display: flex - align-items: center - justify-content: center - +position.position(relative) - overflow: hidden - cursor: pointer - border-radius: .25rem - padding: .5rem .5rem 2.75rem .5rem - &.is-movie - label - height: auto - aspect-ratio: 16 / 10 - &.is-thumbnail - label - height: 15rem - img - max-height: 100% - transition: all .2s ease-out - &:hover - opacity: .6 - &.is-square img - +size.size(7rem) - object-fit: cover - &.is-book img - max-height: 100% - max-width: 100% - object-fit: contain - border: solid 1px var(--border-tint) - - input - overflow: hidden - +size.size(0) - +position.position(absolute, left 0, top 0) - opacity: 0 - -a.a-pdf-input__inner - text-decoration: none - color: var(--default-text) - -.a-pdf-input__file - padding: .5rem - flex: 1 - border-radius: .25rem 0 0 .25rem - border: solid 1px var(--input-border) - border-right: none - height: 2.25rem - -.a-pdf-input__file-name - font-size: .875rem - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - display: block - +break-points.media-breakpoint-up(md) - max-width: 18rem - +break-points.media-breakpoint-down(sm) - max-width: 8rem - -.a-pdf-input__upload.a-button - border-radius: 0 .25rem .25rem 0 diff --git a/app/javascript/stylesheets/atoms/_a-file-insert.sass b/app/javascript/stylesheets/atoms/_a-file-insert.sass deleted file mode 100644 index d5c658202c1..00000000000 --- a/app/javascript/stylesheets/atoms/_a-file-insert.sass +++ /dev/null @@ -1,10 +0,0 @@ -@use "../config/mixins/position" -@use "../config/mixins/size" - -.a-file-insert - cursor: pointer - input - +position.position(absolute, left -44px, top 0) - +size.size(44px 20px) - background: red - opacity: 0 diff --git a/app/javascript/stylesheets/atoms/_a-form-frame.sass b/app/javascript/stylesheets/atoms/_a-form-frame.sass deleted file mode 100644 index ad9614dea30..00000000000 --- a/app/javascript/stylesheets/atoms/_a-form-frame.sass +++ /dev/null @@ -1,7 +0,0 @@ -.a-form-frame - max-height: 10rem - overflow-y: auto - width: 100% - padding: .5rem - border: solid 1px var(--input-border) - border-radius: .25rem diff --git a/app/javascript/stylesheets/atoms/_a-form-help.sass b/app/javascript/stylesheets/atoms/_a-form-help.sass deleted file mode 100644 index a3b6b574d71..00000000000 --- a/app/javascript/stylesheets/atoms/_a-form-help.sass +++ /dev/null @@ -1,70 +0,0 @@ -@use "../config/mixins/link" -@use "../config/mixins/text" -@use "../config/variables/colors" - -.a-form-help - font-size: .75rem - color: var(--semi-muted-text) - &:not(:first-child) - margin-top: .5rem - label + &:not(:first-child) - margin-top: 0 - & + input, - & + textarea - margin-top: .5rem - em - font-style: normal - font-weight: 600 - &.is-danger, - .is-danger - color: var(--danger) - &.is-text-align-center - text-align: center - [class*=a-button] + & - margin-top: 1em - [class*=is-select] + & - margin-top: .5em - .form-item-block & - margin-top: .75em - p - +text.text-block(1em 1.6) - &:not(:last-child) - margin-bottom: .75em - a - +link.hover-link-reversal - *:last-child - margin-bottom: 0 - a - +text.text-block(.75rem 1.6) - +link.hover-link-reversal - cursor: pointer - +colors.default-link - ul - list-style-type: disc - list-style-position: outside - margin-left: 1.5em - &:not(:last-child) - margin-bottom: .75em - li - line-height: 1.6 - &:not(:first-child) - margin-top: .125em - -.a-form-help-link - +text.text-block(.75rem 1.6) - cursor: pointer - +colors.default-link - .a-form-help &.is-danger - color: var(--danger) - &.is-muted-text - color: var(--muted-text) - -.a-form-help-link__label - +link.hover-link-reversal - -.a-text-help-link - cursor: pointer - +colors.default-link - -.a-text-help-link__label - +link.hover-link-reversal diff --git a/app/javascript/stylesheets/atoms/_a-form-label.sass b/app/javascript/stylesheets/atoms/_a-form-label.sass deleted file mode 100644 index d1bd659a658..00000000000 --- a/app/javascript/stylesheets/atoms/_a-form-label.sass +++ /dev/null @@ -1,53 +0,0 @@ -@use "../config/mixins/font-awsome" -@use "../config/mixins/position" -@use "../config/mixins/size" -@use "../config/mixins/text" - -.a-form-label - +text.text-block(.875rem 1.5 0 .5rem, block 600) - &:last-child - margin-bottom: 0 - &.is-required - &::after - +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.text-block(.75rem 1.5) - &.is-lg - +text.text-block(1.125rem 1.5) - border-bottom: solid 1px var(--border) - padding-bottom: .5rem - &.is-inline - margin-bottom: 0 - margin-right: .5rem - &.is-margin-bottom-0 - margin-bottom: 0 - -.form-item__label-checkbox - +position.position(relative) - .a-form-label - display: inline-block - margin-bottom: 0 - padding-left: .75em - cursor: pointer - &::before - content: '' - display: block - +size.size(.875rem) - border: solid 1px var(--muted-text) - border-radius: .1875rem - +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 - +font-awsome.fa(fas '\f00c') - +text.text-block(.75rem .875rem, center block) - color: var(--primary) - +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 deleted file mode 100644 index 5dee02492ed..00000000000 --- a/app/javascript/stylesheets/atoms/_a-form-tabs.sass +++ /dev/null @@ -1,43 +0,0 @@ -@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) - border-bottom: solid 1px var(--border) - margin-bottom: 1rem - padding: .5rem .75rem 0 - border-radius: .1875rem .1875rem 0 0 - -.a-form-tabs__tab - +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.border-radius(top, .25rem) - border: solid 1px transparent - +position.position(relative, bottom -1px) - transition: all .2s ease-out - &:hover - color: var(--default-text) - &.is-active - background-color: var(--base) - color: var(--main-text) - border-color: var(--border) - border-bottom-color: var(--base) - -.micro-report-editor - .a-form-tabs - padding: 0 - .a-markdown-input - padding-inline: 0 - .a-markdown-input__preview - background-color: transparent - .a-form-tabs__tab.is-active - background-color: transparent - border-bottom-color: var(--background) diff --git a/app/javascript/stylesheets/atoms/_a-grab.sass b/app/javascript/stylesheets/atoms/_a-grab.sass deleted file mode 100644 index cc48f606bd7..00000000000 --- a/app/javascript/stylesheets/atoms/_a-grab.sass +++ /dev/null @@ -1,9 +0,0 @@ -@use "../config/mixins/size" - -.a-grab - display: flex - align-items: center - justify-content: center - +size.size(100%) - min-height: 2.5rem - cursor: grab diff --git a/app/javascript/stylesheets/atoms/_a-grass.sass b/app/javascript/stylesheets/atoms/_a-grass.sass deleted file mode 100644 index e6c546ee92d..00000000000 --- a/app/javascript/stylesheets/atoms/_a-grass.sass +++ /dev/null @@ -1,4 +0,0 @@ -.a-grass - max-width: 100% - display: block - margin-inline: auto diff --git a/app/javascript/stylesheets/atoms/_a-help.sass b/app/javascript/stylesheets/atoms/_a-help.sass deleted file mode 100644 index 222416db394..00000000000 --- a/app/javascript/stylesheets/atoms/_a-help.sass +++ /dev/null @@ -1,22 +0,0 @@ -@use "../config/mixins/size" -@use "../config/mixins/text" - -.a-help - +text.text-block(.75em 1, inline-flex) - color: var(--reversal-text) - +size.size(1.75em) - text-decoration: none - background-color: var(--muted-text) - vertical-align: middle - align-items: center - justify-content: center - border-radius: 50% - cursor: pointer - transition: all .2s ease-out - &:hover - background-color: var(--main) - color: var(--reversal-text) - &:last-child - margin-left: .25em - .is-danger & - background-color: var(--danger) diff --git a/app/javascript/stylesheets/atoms/_a-hidden-scrollbar.sass b/app/javascript/stylesheets/atoms/_a-hidden-scrollbar.sass deleted file mode 100644 index 4dee7dfc6fb..00000000000 --- a/app/javascript/stylesheets/atoms/_a-hidden-scrollbar.sass +++ /dev/null @@ -1,6 +0,0 @@ -.a-hidden-scrollbar - -ms-overflow-style: none - scrollbar-width: none - -.a-hidden-scrollbar::-webkit-scrollbar - display: none diff --git a/app/javascript/stylesheets/atoms/_a-horizontal-dashed.sass b/app/javascript/stylesheets/atoms/_a-horizontal-dashed.sass deleted file mode 100644 index 6423cfcf380..00000000000 --- a/app/javascript/stylesheets/atoms/_a-horizontal-dashed.sass +++ /dev/null @@ -1,5 +0,0 @@ -@use "../config/mixins/size" - -.a-horizontal-dashed - +size.size(100% 1px) - border-top: dashed 1px var(--border-shade) diff --git a/app/javascript/stylesheets/atoms/_a-icon-label.sass b/app/javascript/stylesheets/atoms/_a-icon-label.sass deleted file mode 100644 index f82ceebef6b..00000000000 --- a/app/javascript/stylesheets/atoms/_a-icon-label.sass +++ /dev/null @@ -1,9 +0,0 @@ -.a-icon-label - display: flex - flex-direction: column - &.is-no-holding - color: var(--muted-text) - -.a-icon-label__icon - font-size: 1.5rem - line-height: .5 diff --git a/app/javascript/stylesheets/atoms/_a-image-check.sass b/app/javascript/stylesheets/atoms/_a-image-check.sass deleted file mode 100644 index 890679af06c..00000000000 --- a/app/javascript/stylesheets/atoms/_a-image-check.sass +++ /dev/null @@ -1,88 +0,0 @@ -@use "../config/mixins/font-awsome" -@use "../config/mixins/position" -@use "../config/mixins/size" -@use "../config/mixins/text" - -.a-image-check - height: 100% - -.a-image-check__inner - background-color: var(--input-background) - height: 100% - min-height: 2.5rem - +text.text-block(.8125rem 1.4, flex center) - gap: .5rem - flex-direction: column - align-items: center - justify-content: center - border: solid 1px var(--input-border) - cursor: pointer - border-radius: .25rem - transition: all .2s ease-in - position: relative - overflow: hidden - &:hover - background-color: var(--input-hover-background) - border-color: var(--input-hover-border) - input:checked + & - background-color: var(--input-selected-background) - border-color: var(--input-selected-border) - color: var(--input-selected-text) - img - opacity: .7 - .a-image-check__start - background-color: var(--primary) - .a-image-check &::before - display: block - +position.position(absolute, left .75rem, top .75rem, 2) - - // radio - .a-image-check.is-radio &::before - content: '' - +size.size(.875rem) - border: solid 1px var(--input-border) - border-radius: 50% - background-color: var(--base) - .a-image-check.is-radio input:checked + &::before - border-color: var(--primary) - background-color: var(--primary) - box-shadow: inset 0 0 0 2px var(--base) - // checkbox - .a-image-check.is-checkbox &::before - content: '' - +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) - +font-awsome.fa(fas "\f00c") - color: var(--reversal-text) - -.a-image-check__start - width: 100% - -.a-image-check__end - padding-bottom: .5rem - width: 100% - -.a-image-check__name - +text.text-block(.875rem 1.4, block center) - -.a-image-check__image - +size.size(2rem) - .a-image-check__inner.has-icon & - +size.size(1.75rem) - margin-right: .5rem - -.a-image-check__upload-image - display: block - width: 100% - background-color: var(--background-shade) - aspect-ratio: 120 / 63 - position: relative - i - +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 deleted file mode 100644 index 547c13aac58..00000000000 --- a/app/javascript/stylesheets/atoms/_a-link-card.sass +++ /dev/null @@ -1,127 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/position" -@use "../config/mixins/text" - -.a-long-text - .a-link-card, - .twitter-tweet - background-color: var(--base) - border: solid 1px var(--border) - padding: 1em - border-radius: 4px - width: 36rem - max-width: 100% - margin-inline: auto - display: flex - flex-direction: column - gap: .5em - img - border: none - div - margin: 0 - - .a-link-card__title-link - display: inline-block - max-width: 100% - - .a-link-card__title-text - font-weight: 700 - max-width: 100% - overflow: hidden - display: -webkit-box - text-overflow: ellipsis - -webkit-box-orient: vertical - -webkit-line-clamp: 2 - +text.text-block(1em 1.4) - - .a-link-card__favicon-image - width: 1em - min-width: 1em - max-width: 1em - height: 1em - min-height: 1em - max-height: 1em - display: block - &.is-blank - display: none - - .a-link-card__body - +text.text-block(.875em 1.4) - color: var(--muted-text) - display: flex - gap: 1em - p - line-height: 1.4 - margin: 0 - - .a-link-card__body-start - flex: 2 - - .a-link-card__body-end - flex: 1 - - .a-link-card__body-url-link - overflow: hidden - display: -webkit-box - text-overflow: ellipsis - -webkit-box-orient: vertical - -webkit-line-clamp: 2 - - .a-link-card__image - +break-points.media-breakpoint-up(md) - max-width: 12rem - +break-points.media-breakpoint-down(sm) - max-width: 7.5rem - &.is-blank - display: none - - .a-link-card__image-ogp - object-fit: cover - width: 100% - aspect-ratio: 1.91 / 1 - border-radius: .25rem - - .a-link-card__site-title - margin-top: .5em - - .a-link-card__site-title-link - display: inline-flex - gap: .25em - align-items: center - - .a-link-card__site-title-text - +text.text-block(.875em 1.4) - flex: 1 - - .twitter-tweet - position: relative - line-height: 1.4 - font-size: .875em - color: var(--muted-text) - +break-points.media-breakpoint-up(md) - padding: 2em 3em 1em 2em - +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.position(absolute, right .5em, top .5em) - display: flex - justify-content: center - align-items: center - width: 1em - height: 1em - color: #0f1419 - p - font-size: 1.125em - line-height: 1.6 - margin-bottom: 1em - color: var(--default-text) - >a:last-child - color: var(--muted-text) - text-decoration: none - >a:last-child:hover - color: var(--hover-text) - text-decoration: underline diff --git a/app/javascript/stylesheets/atoms/_a-list-item-badge.sass b/app/javascript/stylesheets/atoms/_a-list-item-badge.sass deleted file mode 100644 index bc7b0ae349d..00000000000 --- a/app/javascript/stylesheets/atoms/_a-list-item-badge.sass +++ /dev/null @@ -1,59 +0,0 @@ -@use "../config/mixins/position" -@use "../config/mixins/size" -@use "../config/mixins/text" - -.a-list-item-badge - +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.size(3.75rem .8125rem) - span - +position.position(absolute, left 50%, top 50%) - transform: translate(-50%, -50%) scale(.8) - letter-spacing: -.05em - &.is-wip - background-color: var(--background-semi-shade) - color: var(--semi-muted-text) - &.is-active - background-color: var(--danger) - color: var(--reversal-text) - &.is-unread - background-color: var(--danger) - color: var(--reversal-text) - &.is-searchable - border: solid 1px var(--muted-text) - color: var(--muted-text) - &.is-ended - background-color: var(--muted-text) - color: var(--reversal-text) - &.is-report - background-color: #7f6fb7 - color: var(--reversal-text) - &.is-practice - background-color: #5bbcc7 - color: var(--reversal-text) - &.is-question - background-color: #e2965b - color: var(--reversal-text) - &.is-page - background-color: #56925c - color: var(--reversal-text) - &.is-announcement - background-color: #f7cd5b - color: var(--default-text) - &.is-event - background-color: #fb96a3 - color: var(--reversal-text) - &.is-regular_event - background-color: #dc6ed2 - color: var(--reversal-text) - &.is-product - background-color: #909b3c - color: var(--reversal-text) - &.is-user - background-color: #7cbd9c - color: var(--reversal-text) diff --git a/app/javascript/stylesheets/atoms/_a-long-text.sass b/app/javascript/stylesheets/atoms/_a-long-text.sass deleted file mode 100644 index 4e5b7997323..00000000000 --- a/app/javascript/stylesheets/atoms/_a-long-text.sass +++ /dev/null @@ -1,30 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/long-text-style" -@use "../config/mixins/text" - -.a-long-text - +long-text-style.long-text-style(1em, 1em) - &.is-md - +break-points.media-breakpoint-up(md) - font-size: 1rem - +break-points.media-breakpoint-down(sm) - font-size: .8125rem - &.is-sm - +break-points.media-breakpoint-up(md) - font-size: .8125rem - +break-points.media-breakpoint-down(sm) - font-size: .75rem - &.has-no-headding - h1, - h2, - h3, - h4, - h5, - h6 - +text.text-block(1em 1.6 0 .625em, 600) - border: none - padding: 0 - .a-long-text + & - margin-top: 2em - padding-top: 2em - border-top: solid .25rem var(--border-shade) diff --git a/app/javascript/stylesheets/atoms/_a-markdown-input.sass b/app/javascript/stylesheets/atoms/_a-markdown-input.sass deleted file mode 100644 index 66bab79777b..00000000000 --- a/app/javascript/stylesheets/atoms/_a-markdown-input.sass +++ /dev/null @@ -1,29 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/text" - -.a-markdown-input - padding-inline: 1rem - +break-points.media-breakpoint-down(sm) - padding-inline: .75rem - .card-body__description & - padding-inline: 0 - +break-points.media-breakpoint-down(sm) - padding-inline: 0 - -.a-markdown-input__inner - display: none - &.is-active - display: block - -.a-markdown-input__textare - min-height: 9rem - overflow: hidden - -.a-markdown-input__preview - background-color: var(--base) - +text.text-block(.875rem 1.8) - border-radius: .25rem - min-height: 10rem - &.has-max-height - max-height: 70vh - overflow: auto diff --git a/app/javascript/stylesheets/atoms/_a-meta.sass b/app/javascript/stylesheets/atoms/_a-meta.sass deleted file mode 100644 index 79c35e74407..00000000000 --- a/app/javascript/stylesheets/atoms/_a-meta.sass +++ /dev/null @@ -1,64 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/link" -@use "../config/mixins/text" - -.a-meta - +text.text-block(1em 1.4, flex) - color: var(--muted-text) - align-items: center - flex-wrap: wrap - +break-points.media-breakpoint-up(md) - font-size: .75rem - +break-points.media-breakpoint-down(sm) - font-size: .75rem - .is-important, - &.is-important - color: var(--danger) - font-weight: 600 - .is-muted - color: var(--muted-text) - .is-emphasized - color: var(--default-text) - font-weight: 600 - +break-points.media-breakpoint-up(md) - .a-meta + & - margin-left: .25em - &::before - content: "（" - &::after - content: "）" - -a.a-meta - +link.hover-link - color: var(--muted-text) - transition: all .2s ease-out - &:hover - color: var(--main-text) - &.is-disabled - pointer-events: none - -.a-meta__label - &::after - content: ":" - display: inline-flex - margin-inline: .125em - -.a-meta__icon - margin-right: .125em - -.a-meta__value - display: flex - align-items: center - .a-user-icon + & - margin-left: .25rem - &.is-danger - font-weight: 600 - color: var(--danger) - -.a-meta__list - display: inline-flex - -.a-meta__list-item - &:not(:first-child) - &::before - content: '、' diff --git a/app/javascript/stylesheets/atoms/_a-notice-block.sass b/app/javascript/stylesheets/atoms/_a-notice-block.sass deleted file mode 100644 index 0b654eee4c7..00000000000 --- a/app/javascript/stylesheets/atoms/_a-notice-block.sass +++ /dev/null @@ -1,17 +0,0 @@ -@use "../config/mixins/short-text-style" - -.a-notice-block - width: 34rem - max-width: 100% - margin-inline: auto - border: solid var(--success) 2px - padding: 1em 1.25em - color: var(--success-text) - background-color: #f8fff2 - border-radius: 4px - +short-text-style.short-text-style - font-size: .875rem - &.is-danger - background-color: var(--danger-tint) - border-color: var(--danger) - color: var(--danger-text) diff --git a/app/javascript/stylesheets/atoms/_a-notification-count.sass b/app/javascript/stylesheets/atoms/_a-notification-count.sass deleted file mode 100644 index 5cab5ae87a3..00000000000 --- a/app/javascript/stylesheets/atoms/_a-notification-count.sass +++ /dev/null @@ -1,14 +0,0 @@ -@use "../config/mixins/position" -@use "../config/mixins/size" -@use "../config/mixins/text" - -.a-notification-count - +size.size(1.25rem .875rem) - font-family: var(--monospace) - border-radius: 1rem - background-color: var(--danger) - +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 deleted file mode 100644 index 3daf76663a3..00000000000 --- a/app/javascript/stylesheets/atoms/_a-on-off-checkbox.sass +++ /dev/null @@ -1,62 +0,0 @@ -@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.size($width calc(#{$height} + #{$border-width} * 2)) - border: solid $border-width var(--input-border) - border-radius: $height - font-size: $font-size - &::before - +size.size($height) - &::after - +size.size(100% calc(100% - #{$border-width} * 2)) - padding-left: $height - padding-right: .75em - input:checked + span - &::after - padding-left: 1em - padding-right: $height - -.a-on-off-checkbox - +position.position(relative) - display: block - cursor: pointer - padding-block: .5rem - margin-block: -.5rem - input - opacity: 0 - +position.position(absolute, left -1rem, top 0) - +size.size(0) - display: block - overflow: hidden - span - display: block - background-color: var(--background) - +position.position(relative) - transition: all .2s ease-out - &::before - content: "" - display: block - border-radius: 50% - background-color: var(--base) - +position.position(absolute, left 0, top 0) - border: solid 1px var(--input-border) - &::after - content: "OFF" - +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.position(absolute, left auto, right 0) - &::after - content: "ON" - color: var(--reversal-text) - &.is-md - +on-off-checkbox - &.is-sm - +on-off-checkbox($border-width: 1px, $height: 1.125rem, $width: 3.5rem, $font-size: .75rem) diff --git a/app/javascript/stylesheets/atoms/_a-overlay.sass b/app/javascript/stylesheets/atoms/_a-overlay.sass deleted file mode 100644 index 95c0855ac68..00000000000 --- a/app/javascript/stylesheets/atoms/_a-overlay.sass +++ /dev/null @@ -1,15 +0,0 @@ -@use "../config/mixins/position" -@use "../config/mixins/size" - -.a-overlay - +position.position(fixed, left 0, top 0, bottom 0, 1) - background-color: rgba(black, .6) - +size.size(100%) - opacity: 0 - &.is-js - opacity: 1 - z-index: 3 - background-color: rgba(black, .6) - display: flex - align-items: center - justify-content: center diff --git a/app/javascript/stylesheets/atoms/_a-page-notice.sass b/app/javascript/stylesheets/atoms/_a-page-notice.sass deleted file mode 100644 index 392a8a2dc0b..00000000000 --- a/app/javascript/stylesheets/atoms/_a-page-notice.sass +++ /dev/null @@ -1,77 +0,0 @@ -@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) - &.is-danger - background-color: var(--danger) - &.is-muted - background-color: var(--background-shade) - .a-page-notice__inner - color: var(--default-text) - .page-body & - margin-block: -.5rem 1rem - .page-body .page-notices__item & - margin-block: 0 - .page-tabs + & - margin-top: 1rem - -.a-page-notice__inner - padding-block: .5rem - color: var(--reversal-text) - +break-points.media-breakpoint-up(md) - text-align: center - font-size: .875rem - +break-points.media-breakpoint-down(sm) - font-size: .75rem - &.has-close - position: relative - display: flex - text-align: left - p - +text.text-block(1em 1.5) - +break-points.media-breakpoint-up(md) - font-size: .875rem - +break-points.media-breakpoint-down(sm) - font-size: .75rem - a - color: var(--reversal-text) - +link.hover-link-reversal - &.has-badge - text-decoration: none - +break-points.media-breakpoint-down(sm) - display: block - .a-badge - margin-right: .75rem - background-color: rgba(black, .4) - border: none - +break-points.media-breakpoint-down(sm) - .a-page-notice__label - +link.hover-link-reversal - +break-points.media-breakpoint-up(md) - max-width: 17.5rem - overflow: hidden - text-overflow: ellipsis - display: inline-block - white-space: nowrap - vertical-align: bottom - -.a-page-notice__inner-start - flex: 1 - -.a-page-notice__close - +size.size(2.75rem) - display: flex - align-items: center - justify-content: center - cursor: pointer - font-size: 1.5rem - opacity: .6 - transition: all .2s ease-out - transform: translateX(1rem) - margin-block: -.75rem - &:hover - opacity: 1 diff --git a/app/javascript/stylesheets/atoms/_a-panels.sass b/app/javascript/stylesheets/atoms/_a-panels.sass deleted file mode 100644 index 152bedbb896..00000000000 --- a/app/javascript/stylesheets/atoms/_a-panels.sass +++ /dev/null @@ -1,12 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/size" - -.a-panels__items - display: grid - gap: 1rem - +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.size(100%) diff --git a/app/javascript/stylesheets/atoms/_a-pdf-input.sass b/app/javascript/stylesheets/atoms/_a-pdf-input.sass deleted file mode 100644 index 36a3c1da136..00000000000 --- a/app/javascript/stylesheets/atoms/_a-pdf-input.sass +++ /dev/null @@ -1,52 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/position" -@use "../config/mixins/size" - -.a-pdf-input - display: flex - gap: .75rem - +break-points.media-breakpoint-down(sm) - flex-direction: column - -.a-pdf-input__inner - flex: 1 - background-color: var(--base) - display: flex - align-items: center - justify-content: center - +position.position(relative) - overflow: hidden - cursor: pointer - border-radius: .25rem - height: 2.25rem - input - overflow: hidden - +size.size(0) - +position.position(absolute, left 0, top 0) - opacity: 0 - -a.a-pdf-input__inner - text-decoration: none - color: var(--default-text) - -.a-pdf-input__file - padding: .5rem - flex: 1 - border-radius: .25rem 0 0 .25rem - border: solid 1px var(--input-border) - border-right: none - height: 2.25rem - -.a-pdf-input__file-name - font-size: .875rem - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - display: block - +break-points.media-breakpoint-up(md) - max-width: 18rem - +break-points.media-breakpoint-down(sm) - max-width: 8rem - -.a-pdf-input__upload.a-button - border-radius: 0 .25rem .25rem 0 diff --git a/app/javascript/stylesheets/atoms/_a-placeholder.sass b/app/javascript/stylesheets/atoms/_a-placeholder.sass deleted file mode 100644 index b187f5ab741..00000000000 --- a/app/javascript/stylesheets/atoms/_a-placeholder.sass +++ /dev/null @@ -1,130 +0,0 @@ -@use "../config/variables/colors" - -@keyframes loadingNow - 0% - opacity: .4 - 100% - opacity: 1 - -.a-placeholder - background-color: var(--placeholder) - animation: loadingNow .75s ease infinite alternate - &.a-user-icon - background-color: var(--placeholder) - display: block - &.page-content-header-metas - height: 1.4em - background-color: var(--placeholder) - width: 50% - &.thread-header-title - height: 1.5em - width: 70% - &.card-list-item-title - height: 1.5em - width: 50% - &.card-list-item-meta__items - height: 1.4em - width: 70% - margin-inline: 0 - &.a-button - background-color: var(--placeholder) - border: none - &.page-nav__item - border: none - .page-nav__item-link-inner - height: 1.4em - width: 100% - background-color: var(--placeholder) - display: block - &.practice-status.category-practices-item__status - background-color: var(--placeholder) - &.categories-item__title - height: 1.5em - width: 50% - background-color: var(--placeholder) - &.category-practices-item__title-link - height: 1.5em - width: 50% - background-color: var(--placeholder) - &.group-company-name__label - height: 1em - width: 50% - background-color: var(--placeholder) - display: block - &.group-company-name__label-option - height: 1em - width: 50% - background-color: var(--placeholder) - display: block - &.user-group__title-label - height: 1.2em - width: 10% - background-color: var(--placeholder) - &.user-group__date - height: 1em - width: 20% - background-color: var(--placeholder) - &.a-long-text - background-color: transparent - p - background-color: var(--placeholder) - height: auto - margin-bottom: 0 - &:not(:first-child) - margin-top: .5em - &:nth-child(1) - width: 70% - &:nth-child(2) - width: 100% - &:nth-child(3) - width: 100% - &:nth-child(4) - width: 80% - &:nth-child(5) - width: 60% - &:nth-child(6) - width: 20% - &:nth-child(7) - width: 100% - &:nth-child(8) - width: 80% - &:nth-child(9) - width: 60% - &:nth-child(10) - width: 20% - &:nth-child(11) - width: 80% - &:nth-child(12) - width: 60% - &:nth-child(13) - width: 20% - &.card-list-item-title - height: 1.2em - width: 30% - &.card-list-item-meta__item - height: 1em - width: 35% - &.sns-links__items.is-button-group - height: 1.8em - width: 60% - &.users-item__description.a-short-text - height: 0.8em - width: 50% - &.tag-links__item - height: 1.3em - width: 20% - &.completed-practices-progress__bar - height: 1em - width: 100% - background-color: var(--placeholder) - &.completed-practices-progress__number - height: 1em - width: 10% - &.card-counts__item-inner - height: 2.8125rem - background-color: var(--placeholder) - border: none - -.a-card.is-loading - border: none - background-color: rgba(colors.$base, .8) diff --git a/app/javascript/stylesheets/atoms/_a-raw.sass b/app/javascript/stylesheets/atoms/_a-raw.sass deleted file mode 100644 index 86638381a95..00000000000 --- a/app/javascript/stylesheets/atoms/_a-raw.sass +++ /dev/null @@ -1,11 +0,0 @@ -@use "../config/mixins/text" - -.a-raw - +text.text-block(.875rem 1.4) - white-space: pre-line - 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 diff --git a/app/javascript/stylesheets/atoms/_a-short-text.sass b/app/javascript/stylesheets/atoms/_a-short-text.sass deleted file mode 100644 index baeaa479546..00000000000 --- a/app/javascript/stylesheets/atoms/_a-short-text.sass +++ /dev/null @@ -1,171 +0,0 @@ -@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.text-block(1.25em 1.4 .75em) - &.is-sm - +break-points.media-breakpoint-up(md) - font-size: .8125rem - +break-points.media-breakpoint-down(sm) - font-size: .75rem - p - +text.text-block(1em 1.6 .75em) - li - +text.text-block(1em 1.6) - ol, - ul - margin-left: 1.25em - margin-top: .75em - ol - list-style-type: decimal - >ul - list-style-type: disc - >ol - list-style-type: decimal - li - ul, - ol - margin-block: .375em - &:first-child - margin-top: .375em - &:last-child - margin-bottom: .375em - >ul - list-style-type: circle - >li - >ul - list-style-type: square - a - +link.hover-link-reversal - +colors.default-link - hr - display: block - +size.size(100% 0) - border: none - border-top: dashed 1px var(--border) - margin-block: 1.25em - strong, - b - font-weight: 700 - h1 - +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.text-block(1.5em 1.4 0 .5em, 600) - padding-bottom: .25em - border-bottom: 1px solid var(--border) - * + h2, - * + h3, - * + h4, - * + h5 - margin-top: .75em - h3 - +text.text-block(1.25em 1.4, 600) - margin-bottom: .625em - & + * - margin-top: 0 !important - h4 - +text.text-block(1.125em 1.5, 600) - margin-bottom: .625em - & + * - margin-top: 0 !important - h5 - +text.text-block(1em 1.5, 600) - margin-bottom: .625em - & + * - margin-top: 0 !important - h6 - +text.text-block(.875rem 1.5, 600) - margin-bottom: .625em - & + * - margin-top: 0 !important - - // header-anchor - h1, - h2, - h3, - h4, - h5, - h6 - scroll-snap-align: start - scroll-snap-stop: always - position: relative - outline-style: none - &:hover - .header-anchor - opacity: 1 - - .header-anchor - display: flex - +text.text-block(.75rem, 400) - float: left - +position.position(absolute) - margin-left: -1.5rem - text-decoration: none !important - +size.size(1.5rem 100%) - align-items: center - justify-content: center - transition: all .2s ease-out - opacity: 0 - &:link, - &:visited - color: var(--main) - - .is-danger - color: var(--danger) !important - .is-warning - color: var(--warning) !important - &.is-ta-center, - .is-ta-center - text-align: center - &.is-sm - font-size: .8125rem - &.has-no-headding - h1, - h2, - h3, - h4, - h5, - h6 - +text.text-block(1em 1.6 0 .625em, 700) - border: none - padding: 0 - - .message - padding: .875rem 1em - border-radius: .25rem - margin-block: 1em 1em - background-color: var(--warning-tint) - color: var(--warning-text) - &.alert, - &.danger - background-color: var(--danger-tint) - color: var(--danger-text) - &.warning - background-color: var(--warning-tint) - color: var(--warning-text) - &.info - background-color: var(--info-tint) - color: var(--info-text) - &.primary - background-color: var(--primary-tint) - color: var(--primary-text) - &.success - background-color: var(--success-tint) - color: var(--success-text) - - .a-help - width: 1.25em - height: 1.25em - - *:first-child - margin-top: 0 - *:last-child - margin-bottom: 0 diff --git a/app/javascript/stylesheets/atoms/_a-side-nav.sass b/app/javascript/stylesheets/atoms/_a-side-nav.sass deleted file mode 100644 index a6e6d8765dc..00000000000 --- a/app/javascript/stylesheets/atoms/_a-side-nav.sass +++ /dev/null @@ -1,125 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/link" -@use "../config/mixins/position" -@use "../config/mixins/text" - -.page-body__inner.has-side-nav - +break-points.media-breakpoint-up(lg) - padding-right: var(--side-nav-width) - -.a-side-nav - background-color: var(--base) - +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) - +break-points.media-breakpoint-down(md) - border: solid 1px var(--border) - border-radius: .25rem - margin-top: 1rem - +break-points.media-breakpoint-only(md) - margin-inline: 1.5rem - +break-points.media-breakpoint-down(sm) - margin-inline: 1rem - -.a-side-nav__inner - +break-points.media-breakpoint-up(lg) - max-height: 100% - position: sticky - top: var(--header-height__md-up) - display: flex - flex-direction: column - -.a-side-nav__header - height: 2.5rem - display: flex - align-items: center - justify-content: space-between - +break-points.media-breakpoint-up(md) - padding: .75rem 1rem - +break-points.media-breakpoint-down(sm) - padding: .5rem .75rem - -.a-side-nav__title - +text.text-block(.875rem 1.4, 600) - width: 100% - -.a-side-nav__title-link - +link.block-link - width: 100% - text-align: center - color: var(--default-text) - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - &:hover - text-decoration: underline - -.a-side-nav__footer - height: 2.5rem - display: flex - align-items: center - justify-content: flex-end - +break-points.media-breakpoint-up(md) - padding: .5rem 1.25rem - +break-points.media-breakpoint-down(sm) - padding: .5rem .75rem - -.a-side-nav__footer-link - +text.text-block(.8125rem 1.4) - color: var(--muted-text) - +link.hover-link-reversal - -.a-side-nav__body - overflow: auto - -=a-side-nav-current($background-color, $border-color, $text-color, $pointer-events-none) - +position.position(relative, 1) - border: solid 1px $border-color - background-color: $background-color - .a-side-nav__item-link - background-color: transparent - color: $text-color - @if $pointer-events-none == true - pointer-events: none - -.a-side-nav__item - &:not(:first-child) - border-top: solid 1px var(--border) - &.is-active - .a-side-nav__item-link - color: var(--default-text) - font-weight: 700 - &.is-current - +a-side-nav-current(var(--primary-tint), var(--primary), var(--primary-text), true) - -.a-side-nav__item-link - padding: .75rem - +text.text-block(.8125rem 1.4) - color: var(--semi-muted-text) - +link.block-link - transition: all .1s ease-in - background-color: transparent - &:not(.has-metas):hover - color: var(--primary-text) - text-decoration: underline - &.has-metas:hover - .a-side-nav__item-title - transition: all .2s ease-out - color: var(--primary-text) - text-decoration: underline - -.a-side-nav__item-header .a-badge - transform: translateY(-.125em) - margin-right: .25rem - -.a-side-nav__item-title - +text.text-block(.875rem 1.4, 600 inline) - -.a-side-nav-metas - margin-top: .25rem - font-size: .75rem - display: flex - flex-wrap: wrap - gap: .25rem .75rem diff --git a/app/javascript/stylesheets/atoms/_a-switch.sass b/app/javascript/stylesheets/atoms/_a-switch.sass deleted file mode 100644 index 6842b8b29a2..00000000000 --- a/app/javascript/stylesheets/atoms/_a-switch.sass +++ /dev/null @@ -1,28 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/position" -@use "../config/mixins/text" - -.a-switch - display: flex - align-items: center - cursor: pointer - transition: all .2s ease-out - * - cursor: pointer - +break-points.media-breakpoint-down(sm) - align-items: center - justify-content: center - height: 100% - -.a-switch__label - +text.text-block(.75rem 1.4, center) - color: var(--muted-text) - margin-right: .5em - .a-help - +position.position(relative, top -1px) - &:hover - .a-switch__label-text - color: var(--main-text) - text-decoration: underline - .a-help - background-color: var(--main) diff --git a/app/javascript/stylesheets/atoms/_a-table.sass b/app/javascript/stylesheets/atoms/_a-table.sass deleted file mode 100644 index 1f39099673b..00000000000 --- a/app/javascript/stylesheets/atoms/_a-table.sass +++ /dev/null @@ -1,50 +0,0 @@ -@use "../config/mixins/border" -@use "../config/mixins/border-radius" -@use "../config/mixins/break-points" -@use "../config/mixins/text" - -.a-table - +break-points.media-breakpoint-down(sm) - overflow-x: auto - overflow-x: auto - &.is-sm - font-size: .8125rem - td, - th - padding: .5rem - th - background-color: var(--background-tint) - border: solid 1px var(--border-shade) - td - border: solid 1px var(--border) - -.a-table table - border-radius: .25rem - width: 100% - -.a-table thead - background-color: var(--background-semi-shade) - border: solid 1px var(--border-shade) - +border-radius.border-radius(top, .25rem) - -.a-table tr - +border.border(horizontal, solid 1px var(--border)) - -.a-table th - +text.text-block(.75rem 1.4, center 600) - border: solid 1px var(--border-shade) - white-space: nowrap - height: 2rem - padding-inline: .5rem - -.a-table td - transition: all .2s ease-out - background-color: var(--base) - padding: .375rem .75rem - border: solid 1px var(--border) - +text.text-block(.8125rem 1.45) - -.card-body - >.a-table table - margin: -1px - width: calc(100% + 2px) diff --git a/app/javascript/stylesheets/atoms/_a-tags.sass b/app/javascript/stylesheets/atoms/_a-tags.sass deleted file mode 100644 index 91977877d0a..00000000000 --- a/app/javascript/stylesheets/atoms/_a-tags.sass +++ /dev/null @@ -1,4 +0,0 @@ -.a-tags__items - display: flex - flex-wrap: wrap - gap: .5rem diff --git a/app/javascript/stylesheets/atoms/_a-text-input.sass b/app/javascript/stylesheets/atoms/_a-text-input.sass deleted file mode 100644 index 21b872e095c..00000000000 --- a/app/javascript/stylesheets/atoms/_a-text-input.sass +++ /dev/null @@ -1,72 +0,0 @@ -@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 - +break-points.media-breakpoint-up(md) - font-size: .875rem - +break-points.media-breakpoint-down(sm) - font-size: 1rem - .field_with_errors & - border-color: #e1a7b6 - background-color: #fefafb - &:hover - background-color: var(--input-hover-background) - border-color: var(--input-hover-border) - &:focus - background-color: var(--input-focus-background) - border-color: var(--input-focus-border) - box-shadow: var(--input-focus-shadow) - &:disabled, - &[readonly] - color: var(--muted-text) - background-color: var(--background) - pointer-events: none - &.is-stripe - box-shadow: none - padding-top: .625rem - &.is-inputed - border: none - 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 - position: relative - &::-webkit-inner-spin-button - -webkit-appearance: none - &::-webkit-clear-button - +position.position(relative, 1) - &::-webkit-calendar-picker-indicator - color: transparent - background-color: transparent - +position.position(absolute, left 0, right 0, top 0, bottom 0) - +size.size(100%) - cursor: pointer - opacity: 0 - -textarea.a-text-input - line-height: 1.5 - min-height: 10rem - overflow: hidden - &.is-xs - min-height: 6rem - &.is-sm - min-height: 10rem - &.is-md - min-height: 16rem - &.has-max-height - max-height: 70vh - overflow: auto diff --git a/app/javascript/stylesheets/atoms/_a-text-link.sass b/app/javascript/stylesheets/atoms/_a-text-link.sass deleted file mode 100644 index 3f7a6362117..00000000000 --- a/app/javascript/stylesheets/atoms/_a-text-link.sass +++ /dev/null @@ -1,25 +0,0 @@ -@use "../config/mixins/link" -@use "../config/variables/colors" - -.a-text-link - +link.hover-link-reversal - +colors.default-link - &.has-badge - text-decoration: none - .a-text-link__text - +link.hover-link-reversal - +colors.default-link - -.a-hover-link - +link.hover-link - -.a-hover-link-reversal - +link.hover-link-reversal - -.a-reversal-text-link - +link.hover-link-reversal - +colors.reversal-link - -.a-muted-text-link - +link.hover-link-reversal - +colors.muted-link diff --git a/app/javascript/stylesheets/atoms/_a-text.sass b/app/javascript/stylesheets/atoms/_a-text.sass deleted file mode 100644 index 2cbab4307a2..00000000000 --- a/app/javascript/stylesheets/atoms/_a-text.sass +++ /dev/null @@ -1,3 +0,0 @@ -.a-text - &.is-danger - color: var(--danger-text) diff --git a/app/javascript/stylesheets/atoms/_a-textarea-bottom-note.sass b/app/javascript/stylesheets/atoms/_a-textarea-bottom-note.sass deleted file mode 100644 index aa9c3bec93c..00000000000 --- a/app/javascript/stylesheets/atoms/_a-textarea-bottom-note.sass +++ /dev/null @@ -1,17 +0,0 @@ -+media-breakpoint-down(md) - .a-textarea-bottom-note__banner - display: none - -+media-breakpoint-up(lg) - .a-textarea-bottom-note - position: relative - .a-text-input - padding-bottom: 3rem - - .a-textarea-bottom-note__banner - background-color: var(--background-semi-shade) - +position(absolute, left 1px, bottom 1px, right 1px) - +border-radius(bottom, 3px) - padding: .5rem - +text-block(.75rem 1.4, center) - border-top: solid 1px var(--border-shade) diff --git a/app/javascript/stylesheets/atoms/_a-title-label.sass b/app/javascript/stylesheets/atoms/_a-title-label.sass deleted file mode 100644 index 8882144f389..00000000000 --- a/app/javascript/stylesheets/atoms/_a-title-label.sass +++ /dev/null @@ -1,31 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/position" -@use "../config/mixins/text" - -.a-title-label - +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.position(relative, top .75em) - margin-right: .5em - +break-points.media-breakpoint-up(md) - height: 1.5em - +position.position(top .75em) - +break-points.media-breakpoint-down(sm) - font-size: .625rem - height: 1.75em - +position.position(top .375em) - &.is-solved - color: var(--reversal-text) - &.is-wip - color: var(--semi-muted-text) - background-color: var(--background-semi-shade) - &.is-success - color: var(--reversal-text) - background-color: var(--success) - &.is-danger - color: var(--reversal-text) - background-color: var(--danger) diff --git a/app/javascript/stylesheets/atoms/_a-user-icon.sass b/app/javascript/stylesheets/atoms/_a-user-icon.sass deleted file mode 100644 index ff0151aef20..00000000000 --- a/app/javascript/stylesheets/atoms/_a-user-icon.sass +++ /dev/null @@ -1,18 +0,0 @@ -@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.size(100%) - +user-role.icon-role-style - &.is-sm - +size.size(2rem) - &.is-xs - +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 deleted file mode 100644 index ea663125fd5..00000000000 --- a/app/javascript/stylesheets/atoms/_a-user-icons.sass +++ /dev/null @@ -1,15 +0,0 @@ -@use "../config/mixins/size" - -.a-user-icons - padding-top: .5rem - margin-top: .75rem - border-top: dashed 1px var(--border) - margin-bottom: -.25rem - -.a-user-icons__items - display: flex - flex-wrap: wrap - gap: .25rem - -.a-user-icons__item-icon - +size.size(2rem) diff --git a/app/javascript/stylesheets/atoms/_a-user-name.sass b/app/javascript/stylesheets/atoms/_a-user-name.sass deleted file mode 100644 index fba3500ba90..00000000000 --- a/app/javascript/stylesheets/atoms/_a-user-name.sass +++ /dev/null @@ -1,15 +0,0 @@ -@use "../config/mixins/link" - -.a-user-name - color: var(--muted-text) - font-size: .75rem - line-height: 1.5 - white-space: nowrap - font-weight: 400 - -a.a-user-name - +link.hover-link - display: inline-block - max-width: 100% - overflow: hidden - text-overflow: ellipsis diff --git a/app/javascript/stylesheets/atoms/_a-user-role-badge.sass b/app/javascript/stylesheets/atoms/_a-user-role-badge.sass deleted file mode 100644 index 63b248c913f..00000000000 --- a/app/javascript/stylesheets/atoms/_a-user-role-badge.sass +++ /dev/null @@ -1,28 +0,0 @@ -@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.text-block(.625rem 1, center flex nowrap) - color: var(--main) - align-items: center - margin-right: .5rem - border-radius: 1rem - +break-points.media-breakpoint-up(md) - transform: scale(.9375, .9375) - +break-points.media-breakpoint-down(sm) - transform: scale(.875, .875) - &.is-header - margin-left: .5rem - margin-right: 0 - +break-points.media-breakpoint-down(sm) - margin-left: .125rem - -.a-user-role-badge__label - display: inline-block - .a-user-role-badge__label + &::before - content: "/" - display: inline-block - margin-inline: .25em diff --git a/app/javascript/stylesheets/atoms/_a-user-role.sass b/app/javascript/stylesheets/atoms/_a-user-role.sass deleted file mode 100644 index c907d6777a1..00000000000 --- a/app/javascript/stylesheets/atoms/_a-user-role.sass +++ /dev/null @@ -1,7 +0,0 @@ -@use "../config/mixins/user-role" - -.a-user-role - display: inline-block - border-radius: 50% - background-color: var(--base) - +user-role.icon-role-style diff --git a/app/javascript/stylesheets/atoms/_a-watch-button.sass b/app/javascript/stylesheets/atoms/_a-watch-button.sass deleted file mode 100644 index eca8e9c1754..00000000000 --- a/app/javascript/stylesheets/atoms/_a-watch-button.sass +++ /dev/null @@ -1,9 +0,0 @@ -.a-watch-button - border: none - &:hover - border: none - &.is-inactive - color: var(--semi-muted-text) - &:hover - color: var(--default-text) - background-color: var(--background-semi-shade) diff --git a/app/javascript/stylesheets/atoms/_o-empty-message.sass b/app/javascript/stylesheets/atoms/_o-empty-message.sass deleted file mode 100644 index 6fb8857d757..00000000000 --- a/app/javascript/stylesheets/atoms/_o-empty-message.sass +++ /dev/null @@ -1,17 +0,0 @@ -@use "../config/mixins/text" - -.o-empty-message - max-width: 50rem - margin-inline: auto - text-align: center - color: var(--semi-muted-text) - &:not(:first-child) - margin-top: 1.5rem - -.o-empty-message__icon - +text.text-block(5rem 1) - -.o-empty-message__text - +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 deleted file mode 100644 index 5d38d3fbbcb..00000000000 --- a/app/javascript/stylesheets/config/functions/_assign-inputs.sass +++ /dev/null @@ -1,17 +0,0 @@ -@use "sass:list" -@use "sass:string" -@use "../variables/text-inputs-list" - -@function _assign-inputs($inputs, $pseudo: null) - $list: () - @each $input in $inputs - $input: string.unquote($input) - $input: if($pseudo, $input + ":" + $pseudo, $input) - $list: list.append($list, $input, comma) - @return $list - -$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 deleted file mode 100644 index ca841c152cb..00000000000 --- a/app/javascript/stylesheets/config/functions/_border.sass +++ /dev/null @@ -1,48 +0,0 @@ -@use "list" -@use "number" - -@function border-color($value) - @if optional_color_list($value) - @return true - @else - @return null - -@function border-width($value) - @if number.number($value) - @return true - @else if $value == 'thin' or $value == 'medium' or $value == 'thick' - @return true - @else if list.list($value) - @each $assign in $value - @if $assign == 'thin' or $assign == 'medium' or $assign == 'thick' - @return true - @else if number.number($assign) - @return true - @else - @return null - @else - @return null - -@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.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 - @else - @return null - @else - @return null - -@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.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 - @else - @return null - @else - @return null diff --git a/app/javascript/stylesheets/config/functions/_color.sass b/app/javascript/stylesheets/config/functions/_color.sass deleted file mode 100644 index 265625ea754..00000000000 --- a/app/javascript/stylesheets/config/functions/_color.sass +++ /dev/null @@ -1,26 +0,0 @@ -@use "sass:color" -@use "sass:list" -@use "math" as functions-math -@use "text" - -@use "sass:math" - -@function tint($color, $percentage) - @return color.mix(white, $color, $percentage) - -@function shade($color, $percentage) - @return color.mix(black, $color, $percentage) - -// Adapted from: https://gist.github.com/voxpelli/6304812 -@function luma($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: list.nth($rgba, $i) - $rgb: math.div($rgb, 255) - $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 deleted file mode 100644 index f769bbd30e1..00000000000 --- a/app/javascript/stylesheets/config/functions/_list.sass +++ /dev/null @@ -1,35 +0,0 @@ -@use "sass:list" -@use "sass:meta" -@function list($value) - @if meta.type-of($value) == list - @return true - @else - @return null - -// $nのときにtrue -@function equal_nth($value, $n) - @if list.length($value) == $n - @return true - @else - @return null - -// $n以上のときにtrue -@function or_more_nth($value, $n) - @if list.length($value) >= $n - @return true - @else - @return null - -// $n以下のときにtrue -@function or_less_nth($value, $n) - @if list.length($value) <= $n - @return true - @else - @return null - -// $n以上のときだけ$valueを出す -@function optional_nth($value, $n, $false-value: null) - @if or_more_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 deleted file mode 100644 index 9eb21d61701..00000000000 --- a/app/javascript/stylesheets/config/functions/_math.sass +++ /dev/null @@ -1,47 +0,0 @@ -// https://gist.github.com/voxpelli/6304812 -@use "sass:math" - -@function pi() - @return 3.14159265359 - -@function gcd($a, $b) - // From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript - @if ($b != 0) - @return gcd($b, $a % $b) - @else - @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 (math.floor($exponent) != $exponent) - $prec2 : pow(10, $prec) - $exponent: math.round($exponent * $prec2) - $denominator: gcd($exponent, $prec2) - @return nthRoot(pow($base, math.div($exponent, $denominator)), math.div($prec2, $denominator), $prec) - $value: $base - @if $exponent > 1 - @for $i from 2 through $exponent - $value: $value * $base - @else if $exponent < 1 - @for $i from 0 through -$exponent - $value: math.div($value, $base) - @return $value - -@function nthRoot($num, $n: 2, $prec: 12) - // From: http://rosettacode.org/wiki/Nth_root#JavaScript - $x: 1 - @for $i from 0 through $prec - $x: math.div(1, $n) * (($n - 1) * $x + math.div($num, pow($x, $n - 1))) - @return $x - -@function ratio_calculation($n1, $n2, $n3) - @return math.div($n2 * $n3, $n1) - -@function second_decimal_place_floor($num) - @return math.floor($num * 10) * 0.1 - -@function second_decimal_place_ceil($num) - @return math.ceil($num * 10) * 0.1 - -@function second_decimal_place_round($num) - @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 deleted file mode 100644 index 75136d66e10..00000000000 --- a/app/javascript/stylesheets/config/functions/_number.sass +++ /dev/null @@ -1,87 +0,0 @@ -@use "sass:meta" -@use "sass:math" - -// 数字のときにtrue -@function number($number) - @if meta.type-of($number) == number - @return true - @else - @return null - -@function strip_unit($number) - // strip the units - // That works. strip_unit(13.48cm) will return 13.48 - @if number($number) - @return math.div($number, $number * 0 + 1) - -// 単位がない数字のときにtrue -@function unitless_number($number) - @if number($number) and math.is-unitless($number) - @return true - @else - @return null - -// 単位がある数字のときにtrue -@function unit_number($value) - @if number($value) and not math.is-unitless($value) - @return true - @else - @return null - -@function px($value) - @if number($value) and math.unit($value) == "px" - @return true - @else - @return null - -@function em($value) - @if number($value) and math.unit($value) == "em" - @return true - @else - @return null - -@function percent($value) - @if number($value) and math.unit($value) == "%" - @return true - @else - @return null - -@function px_to_em($px, $base-px: $base-px) - @if strip_unit($px) == 0 - @return 0 - @else if px($px) - @return math.div(strip_unit($px), strip_unit($base-px)) * 1em - @else if em($px) - @return $px - -@function em_to_px($em, $base-px: $base-px) - @if $em == 0 - @return 0 - @else if em($em) - @return (strip_unit($em) * strip_unit($base-px)) * 1px - @else if px($em) - @return $em - -@function px_to_rem($px, $base-px: $base-px) - @if strip_unit($px) == 0 - @return 0 - @else if px($px) - @return math.div(strip_unit($px), strip_unit($base-px)) * 1rem - @else if rem($px) - @return $px - -@function rem_to_px($rem, $base-px: $base-px) - @if strip_unit($rem) == 0 - @return 0 - @else if rem($rem) - @return (strip_unit($rem) * strip_unit($base-px)) * 1px - @else if px($px) - @return $rem - -@function multiple($number, $multiple_number) - // $multiple_number で割り切れる $number に近い数を出す - $remainder: $number % $multiple_number - @if $remainder == 0 - @return "#{$number - $remainder}" - @else - @return "#{$number - $remainder} and #{$number + $remainder}" diff --git a/app/javascript/stylesheets/config/functions/_position.sass b/app/javascript/stylesheets/config/functions/_position.sass deleted file mode 100644 index 1f44630fac1..00000000000 --- a/app/javascript/stylesheets/config/functions/_position.sass +++ /dev/null @@ -1,80 +0,0 @@ -@function position($value) - @if $value == "top" or $value == "bottom" or $value == "left" or $value == "right" or $value == "center" - @return true - @else - @return null - -@function direction($value) - @if string($value) - @if $value == "top" or $value == "bottom" or $value == "left" or $value == "right" or $value == "horizontal" or $value == "vertical" or $value == "all" - @return true - @else - @return null - @else - @return null - -@function four_position($value) - @if $value == "top" or $value == "bottom" or $value == "left" or $value == "right" - @return true - @else - @return null - -@function top($value) - @if $value == "top" - @return true - @else - @return null - -@function bottom($value) - @if $value == "bottom" - @return true - @else - @return null - -@function left($value) - @if $value == "left" - @return true - @else - @return null - -@function right($value) - @if $value == "right" - @return true - @else - @return null - -@function center($value) - @if $value == "center" - @return true - @else - @return null - -@function position_vertical($value) - @if $value == 'bottom' or $value == 'top' - @return true - @else - @return null - -@function position_horizontal($value) - @if $value == 'left' or $value == 'right' - @return true - @else - @return null - -@function all($value) - @if $value == "all" - @return true - @else - @return null - -@function horizontal($value) - @if $value == "horizontal" - @return true - @else - @return null - -@function vertical($value) - @if $value == "vertical" - @return true - @else - @return null diff --git a/app/javascript/stylesheets/config/functions/_text.sass b/app/javascript/stylesheets/config/functions/_text.sass deleted file mode 100644 index a566c95a1da..00000000000 --- a/app/javascript/stylesheets/config/functions/_text.sass +++ /dev/null @@ -1,49 +0,0 @@ -@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 - @else - @return null - -@function text_align($value) - @if $value == "left" or $value == "right" or $value == "center" - @return true - @else - @return null - -@function color($value) - @if meta.type-of($value) == color - @return true - @else - @return null - -@function font_weight($value) - @if $value == "bold" or $value == "normal" - @return true - @else if number.unitless_number($value) - @if $value >= 100 - @return true - @else - @return null - @else - @return null - -@function font_style($value) - @if $value == "normal" or $value == "italic" or $value == "oblique" - @return true - @else - @return null - -@function white_space($value) - @if $value == "normal" or $value == "pre" or $value == "nowrap" - @return true - @else - @return null - -@function text_decoration($value) - @if $value == "none" or $value == "underline" or $value == "overline" or $value == "line-through" or $value == "blink" - @return true - @else - @return null diff --git a/app/javascript/stylesheets/config/mixins/_badge.sass b/app/javascript/stylesheets/config/mixins/_badge.sass deleted file mode 100644 index 5b6feb2cf27..00000000000 --- a/app/javascript/stylesheets/config/mixins/_badge.sass +++ /dev/null @@ -1,38 +0,0 @@ -@use "../functions/color" -@use "../functions/number" -@use "../variables/colors" - -=badge-base - text-transform: none - display: inline-flex - border: solid 1px - border-radius: 1em - font-family: var(--sans-serif) - white-space: nowrap - text-decoration: none - align-items: center - justify-content: center - &:not(:first-child) - margin-left: .1875em - &:not(:last-child) - margin-right: .1875em - &.is-block - width: 100% - display: flex - .a-badge__inner - overflow: hidden - text-overflow: ellipsis - -=badge-color($color) - background-color: $color - $text-color: if(color.luma($color) > 50, colors.$default-text, colors.$reversal-text) - color: $text-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: #{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 deleted file mode 100644 index 06c3eb4f5cd..00000000000 --- a/app/javascript/stylesheets/config/mixins/_border-radius.sass +++ /dev/null @@ -1,25 +0,0 @@ -@use "sass:list" -@use "../functions/number" - -// 使い方 -// +border-radius(vertical, 4px) - -=border-radius($value1: null, $value2: null) - @if number.number(list.nth($value1, 1)) - border-radius: $value1 - @else - @for $i from 1 through list.length($value1) - @if list.nth($value1, $i) == 'all' - border-radius: $value2 - @else if list.nth($value1, $i) == 'top' - border-top-left-radius: $value2 - border-top-right-radius: $value2 - @else if list.nth($value1, $i) == 'bottom' - border-bottom-left-radius: $value2 - border-bottom-right-radius: $value2 - @else if list.nth($value1, $i) == 'left' - border-top-left-radius: $value2 - border-bottom-left-radius: $value2 - @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 deleted file mode 100644 index 7deae411e1a..00000000000 --- a/app/javascript/stylesheets/config/mixins/_border.sass +++ /dev/null @@ -1,33 +0,0 @@ -@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 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 list.length($value1) - @if position.all(list.nth($value1, $i)) - +assign-border-position(false, $value2) - @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 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(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 deleted file mode 100644 index 86ea807a75a..00000000000 --- a/app/javascript/stylesheets/config/mixins/_break-points.sass +++ /dev/null @@ -1,41 +0,0 @@ -@use "sass:list" -@use "sass:map" -@use "../variables/layout" - -@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: layout.$grid-breakpoints) - $next: breakpoint-next($name, $breakpoints) - @return if($next, breakpoint-min($next, $breakpoints) - 0.0625em, null) - -=media-breakpoint-up($name, $breakpoints: layout.$grid-breakpoints) - $min: breakpoint-min($name, $breakpoints) - @if $min - @media (min-width: $min) - @content - @else - @content - -=media-breakpoint-down($name, $breakpoints: layout.$grid-breakpoints) - $max: breakpoint-max($name, $breakpoints) - @if $max - @media (max-width: $max) - @content - @else - @content - -=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: 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 deleted file mode 100644 index 12b5326b7c6..00000000000 --- a/app/javascript/stylesheets/config/mixins/_button.sass +++ /dev/null @@ -1,157 +0,0 @@ -@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 - display: inline-flex - border: solid 1px - border-radius: .25rem - font-family: var(--sans-serif) - line-height: 1.4 - white-space: nowrap - text-decoration: none - cursor: pointer - user-select: none - align-items: center - justify-content: center - transition: all .2s ease-out - * - cursor: pointer - &.is-block - display: flex - width: 100% - max-width: 100% - &.is-select - margin-inline: 0 - &:focus - outline: none - &:disabled - cursor: default - pointer-events: none - * - cursor: default - &.is-select - select - +size.size(100%) - cursor: pointer - i - margin-right: .35em - margin-top: .02em - font-size: 1.07em - &.is-icon - i - +text.text-block(1.35em 1) - margin-right: 0 - &.is-checkbox - +position.position(relative) - &::before - content: "" - +size.size(.9375em) - border-radius: .1875em - display: block - border: solid 1px var(--background-shade) - background-color: var(--base) - +position.position(absolute, left 1em, top 50%) - transform: translate(0, -50%) - &::after - +font-awsome.fa(fas "\f00c") - +text.text-block(1em 1, flex) - color: var(--reversal-text) - align-items: center - justify-content: center - +size.size(.9375em) - +position.position(absolute, left 1em, top 50%) - transform: translate(0, -50%) - opacity: 0 - input:checked + &::before - border-color: var(--primary) - background-color: var(--primary) - input:checked + &::after - opacity: 1 - -=input-button-base - display: inline-block - vertical-align: middle - &.is-block - width: 100% - display: block - -=button-color($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 - &.is-secondary - border-color: var(--input-border) - &:focus, - &:active - box-shadow: 0 0 0 .1875rem rgba($color, .25) - &:hover, - &:focus, - &:active - $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: functions-color.shade($color, 6%) - pointer-events: none - -=border-button-color($color) - $text-color: $color - $border-color: $color - background-color: rgba(255, 255, 255, .1) - color: $text-color - border-color: $border-color - &:focus, - &:active - box-shadow: 0 0 0 .1875rem rgba($color, .25) - &:hover, - &:focus, - &:active - $button-color: rgba($color, .25) - background-color: $button-color - border-color: $border-color - &.is-disabled, - &:disabled - color: rgba($text-color, .4) - 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: #{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: #{number.strip_unit($horizontal * $font-size * 1)}em - &.is-select - padding-inline: 0 - +position.position(relative) - &::before - +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.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 deleted file mode 100644 index b5254f817d4..00000000000 --- a/app/javascript/stylesheets/config/mixins/_font-awsome.sass +++ /dev/null @@ -1,44 +0,0 @@ -@use "sass:list" -@use "../functions/list" as functions-list - -=font-awsome-4-core - font-family: FontAwesome - font-style: normal - font-weight: normal - line-height: 1 - -=font-awsome-5-core - -moz-osx-font-smoothing: grayscale - -webkit-font-smoothing: antialiased - font-style: normal - font-variant: normal - text-rendering: auto - line-height: 1 - -=fa($value) - @if functions-list.equal_nth($value, 1) - +font-awsome-4-core - content: "#{$value}" - @else if functions-list.equal_nth($value, 2) - +font-awsome-5-core - 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 list.nth($value, 1) == far - font-family: 'Font Awesome 6 Pro' - font-style: normal - font-weight: 400 - @else if list.nth($value, 1) == fal - font-family: 'Font Awesome 6 Pro' - font-style: normal - font-weight: 300 - @else if list.nth($value, 1) == fab - font-family: 'Font Awesome 6 Brands' - font-style: normal - font-weight: normal - @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 deleted file mode 100644 index 4f50d837577..00000000000 --- a/app/javascript/stylesheets/config/mixins/_grid.sass +++ /dev/null @@ -1,20 +0,0 @@ -@use "../functions/number" -@use "../variables/layout" -@use "grid/grid" -@use "grid/grid-framework" - -@use "sass:math" -.row - +grid-framework.make-row - +grid.make-grid-columns - -=grid($gutter-size) - &.row - 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 - +grid.make-grid-columns(layout.$grid-columns, #{math.div($gutter-size, 16)}rem) diff --git a/app/javascript/stylesheets/config/mixins/_link.sass b/app/javascript/stylesheets/config/mixins/_link.sass deleted file mode 100644 index 051cbc194d9..00000000000 --- a/app/javascript/stylesheets/config/mixins/_link.sass +++ /dev/null @@ -1,35 +0,0 @@ -=all-link-state - @content - &:link, - &:hover, - &:active, - &:visited, - &:focus, - &:focus-within - @content - -=hover-link($modifire-class: null) - text-decoration: none - cursor: pointer - &:hover, - &:active - text-decoration: underline - @if $modifire-class - #{$modifire-class}: underline - -=hover-link-reversal($modifire-class: null) - text-decoration: underline - cursor: pointer - &:hover, - &:active - text-decoration: none - @if $modifire-class - #{$modifire-class}: none - -=flex-link - display: flex - text-decoration: none - -=block-link - display: block - text-decoration: none diff --git a/app/javascript/stylesheets/config/mixins/_long-text-style.sass b/app/javascript/stylesheets/config/mixins/_long-text-style.sass deleted file mode 100644 index b4c9cc9f565..00000000000 --- a/app/javascript/stylesheets/config/mixins/_long-text-style.sass +++ /dev/null @@ -1,443 +0,0 @@ -@use "sass:color" -@use "../variables/colors" -@use "break-points" -@use "font-awsome" -@use "link" -@use "position" -@use "size" -@use "text" - -=blocks - video, - canvas, - iframe, - textarea, - figure, - details, - blockquote, - div, - p, - img, - dl, - ol, - ul, - table, - pre, - .speak, - .message - max-width: 100% - margin-block: 1.75em - hr - max-width: 100% - margin-block: 2.5em - -=list - ul, - ol - list-style-position: outside - margin-left: 1.75em - li - +text.text-block(1em 1.86) - margin-block: .5em - &:first-child - margin-top: 0 - &:last-child - margin-bottom: 0 - input - margin-right: .25rem - p:last-of-type - margin-bottom: 0 - > p + ul, - > p + ol - margin-top: 1em - ol - list-style-type: decimal - &.is-aiu - list-style: katakana - >ul - list-style-type: disc - >ol - list-style-type: decimal - li - ul, - ol - margin-block: .375em - &:first-child - margin-top: .375em - &:last-child - margin-bottom: .375em - >ul - list-style-type: circle - >li - >ul - list-style-type: square - -=speak - .speak - &.is-mc - font-weight: 700 - .speak__speaker - margin-bottom: .75em - & > a, - & > span - display: flex - align-items: center - gap: .5rem - text-decoration: none - color: var(--default-text) - >a:hover - .speak__speaker-name - text-decoration: underline - img - margin-bottom: 0 - .speak__speaker-name - flex: 1 - +text.text-block(1em 1.6, 700) - text-decoration: none - white-space: nowrap - .speak__body - margin-top: .5rem - -=headdings - h1 - +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.text-block(1.625em 1.4615 0 .75em, 600) - padding-bottom: .25em - border-bottom: 1px solid var(--border) - * + h2 - margin-top: 1.4em - h2 + h3 - margin-top: 1.4em - * + h2, - * + h3, - * + h4, - * + h5 - margin-top: 1.5em - h3 - +text.text-block(1.375em 1.6, 600) - margin-bottom: .625em - & + * - margin-top: 0 !important - h4 - +text.text-block(1.25em 1.6, 600) - margin-bottom: .625em - & + * - margin-top: 0 !important - h5 - +text.text-block(1.125em 1.6, 600) - margin-bottom: .625em - & + * - margin-top: 0 !important - h6 - +text.text-block(1em 1.6, 600) - margin-bottom: .625em - & + * - margin-top: 0 !important - -=header-anchor - h1, - h2, - h3, - h4, - h5, - h6 - scroll-snap-align: start - scroll-snap-stop: always - position: relative - outline-style: none - &:hover - .header-anchor - opacity: 1 - .header-anchor - display: flex - +text.text-block(.75rem, 400) - float: left - +position.position(absolute) - margin-left: -1.5rem - text-decoration: none !important - +size.size(1.5rem 100%) - align-items: center - justify-content: center - transition: all .2s ease-out - opacity: 0 - &:link, - &:visited - color: var(--main) - -=table - table - width: 100% - background-color: var(--base) - th, - td - border: solid 1px var(--border-shade) - padding: .5em .625em - +text.text-block(.875em 1.6, left) - th - background-color: var(--background) - tbody tr - &:nth-child(even) - background-color: color.mix(colors.$default-text, colors.$background, 2%) - -=figure - figure:has(figcaption) > *:first-child - margin-bottom: 0 - figcaption - +text.text-block(.875em 1.6) - margin-top: .75em - text-align: center - - -=message - .message - padding: 1em 1.25em 1em 2.75em - border-radius: .25rem - background-color: var(--warning-tint) - color: var(--warning-text) - &::before - +font-awsome.fa(fas '\f06a') - +position.position(absolute, left .25em, top .25em) - font-size: 1.5em - color: var(--warning) - &.alert, - &.danger - background-color: var(--danger-tint) - color: var(--danger-text) - &::before - color: var(--danger) - &.warning - background-color: var(--warning-tint) - color: var(--warning-text) - &::before - color: var(--warning) - &.info - background-color: var(--info-tint) - color: var(--info-text) - &::before - color: var(--info) - &.primary - background-color: var(--primary-tint) - color: var(--primary-text) - &::before - color: var(--primary) - &.success - background-color: var(--success-tint) - color: var(--success-text) - &::before - color: var(--success) - -=task-list - ul.contains-task-list - list-style: none - margin-left: 0 - li.task-list-item - position: relative - padding-left: 1.375em - .task-list-item-checkbox - +position.position(absolute, top .5em, left 0) - -=long-text-style($pc-font-size: 1rem, $mobile-font-size: .8125rem, $background: colors.$base, $font: colors.$default-text) - word-wrap: break-word - +break-points.media-breakpoint-up(md) - font-size: $pc-font-size - +break-points.media-breakpoint-down(sm) - font-size: $mobile-font-size - +headdings - p - +text.text-block(1em 1.86) - a - +link.hover-link-reversal - +colors.default-link - &:hover - img - border-color: color.mix($font, $background, 16%) - a, - a:link, - a:visited, - a:hover - pre, - code - text-decoration: none !important - dl - border: 1px solid color.mix($font, $background, 20%) - padding: 1em - border-radius: .25rem - dt - +text.text-block(1em 1.6, 600) - margin-bottom: .25em - dd - +text.text-block(1em 1.6) - &:not(:last-child) - margin-block: 1em - code - font-family: var(--monospace) - tab-size: 2 - hyphens: none - pre - padding: 0 - code - border: none - +text.text-block(.9375em 1.5) - overflow: auto - display: block - width: 100% - padding: .875em - code[class*="language-"], - pre[class*="language-"] - border: none - tab-size: 2 - pre[class*="language-"] - padding: 0 - p, - li - *:not(ol):not(ul):first-child - margin-top: 0 - *:not(ol):not(ul):last-child - margin-bottom: 0 - pre:not(ol):not(ul):last-child - margin-block: 1em - blockquote - margin-left: calc(.75em + 1px) - blockquote + ul - margin-top: -2em - >code - +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: color.mix($font, $background, 4%) - margin-inline: .25rem - border-radius: .125rem - pre[class*=language-] - margin-block: 1em - hr - display: block - height: .25rem - background-color: #dadbdc - border: none - img - height: auto - display: block - margin-inline: auto - border: 1px solid color.mix($font, $background, 10%) - &.is-xs - max-width: 10em - &.is-sm - max-width: 20em - &.is-md - max-width: 30em - +break-points.media-breakpoint-down(sm) - max-width: 100% !important - br + img - margin-block: 1em - +figure - +list - div - +list - - blockquote - padding-left: 1.5em - +position.position(relative) - border-left: solid .25em var(--border-tint) - +list - p + & - margin-block: 3em 2.5em - code - font-style: normal - >*:last-child - margin-bottom: 0 !important - - details - +text.text-block(.875rem 1.8) - margin-bottom: 1.5em - border: solid 1px var(--border) - padding: .5em 1em - border-radius: .25rem - +list - summary - +text.text-block(1em 1.8) - cursor: pointer - outline: none - +link.hover-link - &[open] summary - border-bottom: solid 1px var(--border) - padding-bottom: .5em - margin-bottom: .5em - - iframe - display: block - margin-inline: auto - - code - word-break: break-all - word-wrap: break-word - white-space: pre-wrap - - strong, - b - font-weight: 700 - - div - position: relative - width: 100% - +list - - +message - +table - +task-list - +speak - +header-anchor - +blocks - - textarea - background-color: var(--input-background) - width: 100% - padding: .75em - border: solid 1px var(--input-border) - border-radius: .25rem - min-height: 16rem - transition: border-color .2s ease-in, background-color .2s ease-in, box-shadow .2s ease-in - &:hover - background-color: var(--input-hover-background) - border-color: var(--input-hover-border) - &:focus - background-color: var(--input-focus-background) - border-color: var(--input-focus-border) - box-shadow: var(--input-focus-shadow) - &:disabled - color: #999 - background-color: #dedede - pointer-events: none - - .a-user-emoji-link - +size.size(2em) - display: inline-block - &:not(:first-child) - margin-left: .5em - .a-user-emoji - margin-block: 0 - .header-anchor + .a-user-emoji-link - margin-left: 0 - .a-user-emoji - +size.size(1.8em) - object-fit: cover - background-color: var(--base) - border-radius: 2px - display: inline-block !important - border: none !important - margin-inline: 0 !important - vertical-align: middle - body.articles & .a-user-emoji-link, - body.buzz & .a-user-emoji-link - pointer-events: none - - *:first-child - margin-top: 0 !important - *:last-child - margin-bottom: 0 !important diff --git a/app/javascript/stylesheets/config/mixins/_margin-padding.sass b/app/javascript/stylesheets/config/mixins/_margin-padding.sass deleted file mode 100644 index d6022d68c3e..00000000000 --- a/app/javascript/stylesheets/config/mixins/_margin-padding.sass +++ /dev/null @@ -1,75 +0,0 @@ -@use "sass:list" -@use "../functions/list" as functions-list -@use "../functions/number" - -=margin($value1, $value2: null) - @if number.number(list.nth($value1, 1)) or list.nth($value1, 1) == 'auto' - @if functions-list.equal_nth($value1, 1) - margin: $value1 - @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' - margin: $value2 - @else if $position == 'vertical' - margin-top: $value2 - margin-bottom: $value2 - @else if $position == 'horizontal' - margin-left: $value2 - margin-right: $value2 - @else - margin-#{$position}: $value2 - -=padding($value1: null, $value2: null) - @if number.number(list.nth($value1, 1)) or list.nth($value1, 1) == 'auto' - @if functions-list.equal_nth($value1, 1) - padding: $value1 - @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' - padding: $value2 - @else if $position == 'vertical' - padding-top: $value2 - padding-bottom: $value2 - @else if $position == 'horizontal' - padding-left: $value2 - padding-right: $value2 - @else - padding-#{$position}: $value2 diff --git a/app/javascript/stylesheets/config/mixins/_override.sass b/app/javascript/stylesheets/config/mixins/_override.sass deleted file mode 100644 index 4722a94ad07..00000000000 --- a/app/javascript/stylesheets/config/mixins/_override.sass +++ /dev/null @@ -1,3 +0,0 @@ -=override - html body & - @content diff --git a/app/javascript/stylesheets/config/mixins/_placeholder.sass b/app/javascript/stylesheets/config/mixins/_placeholder.sass deleted file mode 100644 index 296bad4c5d4..00000000000 --- a/app/javascript/stylesheets/config/mixins/_placeholder.sass +++ /dev/null @@ -1,11 +0,0 @@ -=placeholder - input, - textarea - &::-webkit-input-placeholder - @content - &:-moz-placeholder - @content - &::-moz-placeholde - @content - &:-ms-input-placeholder - @content diff --git a/app/javascript/stylesheets/config/mixins/_position.sass b/app/javascript/stylesheets/config/mixins/_position.sass deleted file mode 100644 index 57fb40dcd44..00000000000 --- a/app/javascript/stylesheets/config/mixins/_position.sass +++ /dev/null @@ -1,27 +0,0 @@ -@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 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 - -// +position(absolute, left 0, top 0, right 0, bottom 0, 2) -=position($value1: null, $value2: null, $value3: null, $value4: null, $value5: null, $value6: null) - +position-list($value1, $value2, $value3, $value4, $value5, $value6) - -=top($position, $z-index: null) - +position(relative, top $position, $z-index) -=bottom($position, $z-index: null) - +position(relative, bottom $position, $z-index) -=left($position, $z-index: null) - +position(relative, left $position, $z-index) -=right($position, $z-index: null) - +position(relative, right $position, $z-index: null) diff --git a/app/javascript/stylesheets/config/mixins/_practice-color.sass b/app/javascript/stylesheets/config/mixins/_practice-color.sass deleted file mode 100644 index cdb448c0945..00000000000 --- a/app/javascript/stylesheets/config/mixins/_practice-color.sass +++ /dev/null @@ -1,53 +0,0 @@ -@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: color.shade($color, 24%) - @if $border-color - border-color: $border-color - @if $text-color - color: $text-color - -=practice-color($border: false) - &.is-not_complete - +practice-button(colors.$background, $border) - color: var(--muted-text) - &.is-started - +practice-button(colors.$danger, $border) - color: var(--reversal-text) - &.is-submitted - +practice-button(colors.$warning, $border) - color: var(--default-text) - &.is-complete - +practice-button(colors.$success, $border) - color: var(--reversal-text) - &.is-unstarted - +practice-button(#fff) - color: var(--muted-text) - border: solid 1px var(--border) - &.is-active - color: var(--muted-text) - border-color: var(--muted-text) - background-color: var(--background-tint) - &.is-skip-on - +practice-button(#dcdcdc, $border) - color: var(--muted-text) - @if $border == true - border: solid 1px - -=practice-hover-color($border: false) - +position.position(relative, 2) - $border-status: $border - @if $border == true - border: solid 1px - &.is-not_complete - +practice-button(colors.$background, $border-status, color.shade(colors.$background, 24%), colors.$default-text) - &.is-started - +practice-button(color.tint(colors.$danger, 90%), $border-status, colors.$danger, color.shade(colors.$danger, 20%)) - &.is-submitted - +practice-button(color.tint(colors.$warning, 90%), $border-status, color.shade(colors.$warning, 20%), color.shade(colors.$warning, 20%)) - &.is-complete - +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 deleted file mode 100644 index af3cb751513..00000000000 --- a/app/javascript/stylesheets/config/mixins/_short-text-style.sass +++ /dev/null @@ -1,62 +0,0 @@ -@use "font-awsome" -@use "link" -@use "position" -@use "size" -@use "text" - -=short-text-style - >*:first-child - margin-top: 0 - >*:last-child - margin-bottom: 0 - hr - display: block - +size.size(100% 0) - border: none - border-top: dashed 1px var(--border) - margin-block: 1.5em - p - +text.text-block(1em 1.7 0 .75em) - li - +text.text-block(1em 1.7 0 .125em) - a - +link.hover-link-reversal - - .message - background: red - padding: 1em 1.25em 1em 2.75em - border-radius: .25rem - margin-block: 1.5em 2em - background-color: var(--warning-tint) - color: var(--warning-text) - &::before - +font-awsome.fa(fas '\f06a') - +position.position(absolute, left .25em, top .25em) - font-size: 1.5em - color: var(--warning) - &.alert, - &.danger - background-color: var(--danger-tint) - color: var(--danger-text) - &::before - color: var(--danger) - &.warning - background-color: var(--warning-tint) - color: var(--warning-text) - &::before - color: var(--warning) - &.info - background-color: var(--info-tint) - color: var(--info-text) - &::before - color: var(--info) - &.primary - background-color: var(--primary-tint) - color: var(--primary-text) - &::before - color: var(--primary) - &.success - background-color: var(--success-tint) - color: var(--success-text) - &::before - color: var(--success) diff --git a/app/javascript/stylesheets/config/mixins/_size.sass b/app/javascript/stylesheets/config/mixins/_size.sass deleted file mode 100644 index 51e64527c0c..00000000000 --- a/app/javascript/stylesheets/config/mixins/_size.sass +++ /dev/null @@ -1,88 +0,0 @@ -@use "sass:list" -=size($sizes) - $width: list.nth($sizes, 1) - $height: $width - @if list.length($sizes) > 1 - $height: list.nth($sizes, 2) - @if is-size($height) - height: $height - @else - @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin." - @if is-size($width) - width: $width - @else - @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin." - -=max-size($sizes) - $width: list.nth($sizes, 1) - $height: $width - @if list.length($sizes) > 1 - $height: list.nth($sizes, 2) - @if is-size($height) - max-height: $height - @else - @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin." - @if is-size($width) - max-width: $width - @else - @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin." - -=min-size($sizes) - $width: list.nth($sizes, 1) - $height: $width - @if list.length($sizes) > 1 - $height: list.nth($sizes, 2) - @if is-size($height) - min-height: $height - @else - @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin." - @if is-size($width) - min-width: $width - @else - @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin." - -=all-size($sizes) - $width: list.nth($sizes, 1) - $height: $width - @if list.length($sizes) > 1 - $height: list.nth($sizes, 2) - @if is-size($height) - min-height: $height - max-height: $height - height: $height - @else - @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin." - @if is-size($width) - min-width: $width - max-width: $width - width: $width - @else - @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin." - -=ratio($value1: null, $value2: null) - @if list.nth($value2, 1) == 'horizontal' - @if $value1 == gold - $ratio: 1.618 - +size(list.nth($value2, 2) calc(#{list.nth($value2, 2)} / #{$ratio})) - @else if $value1 == silver - $ratio: 1.414 - +size(list.nth($value2, 2) calc(#{list.nth($value2, 2)} / #{$ratio})) - @else if $value1 == bronze - $ratio: 3.303 - +size(list.nth($value2, 2) calc(#{list.nth($value2, 2)} / #{$ratio})) - @else - $ratio: $value1 - +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(#{list.nth($value2, 2)} * #{$ratio}) list.nth($value2, 2)) - @else if $value1 == silver - $ratio: 1.414 - +size(calc(#{list.nth($value2, 2)} * #{$ratio}) list.nth($value2, 2)) - @else if $value1 == bronze - $ratio: 3.303 - +size(calc(#{list.nth($value2, 2)} * #{$ratio}) list.nth($value2, 2)) - @else - $ratio: $value1 - +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 deleted file mode 100644 index 10805dbb5ed..00000000000 --- a/app/javascript/stylesheets/config/mixins/_text.sass +++ /dev/null @@ -1,42 +0,0 @@ -@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(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 - text-indent: $space-width - -// +text-block($font-size $line-height $margin-top $margin-bottom, $font-weight $text-align $color $top) -=text-block($value1: null, $value2: null) - 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 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: 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 - -=line-clamp($line-clamp: 2) - display: -webkit-box - -webkit-line-clamp: $line-clamp - overflow: hidden - -webkit-box-orient: vertical diff --git a/app/javascript/stylesheets/config/mixins/_user-role.sass b/app/javascript/stylesheets/config/mixins/_user-role.sass deleted file mode 100644 index 300bd21ca2f..00000000000 --- a/app/javascript/stylesheets/config/mixins/_user-role.sass +++ /dev/null @@ -1,30 +0,0 @@ -@use "../variables/colors" - -=icon-role-style - &.is-admin, - &.is-mentor - .a-user-icon - border: solid 2px rgba(colors.$danger, .7) - &.is-graduate - .a-user-icon - border: solid 2px rgba(colors.$success, .7) - &.is-adviser - .a-user-icon - border: solid 2px rgba(colors.$warning, .7) - &.is-trainee - .a-user-icon - border: solid 2px rgba(colors.$main, .7) - body.is-mentor-mode &.is-retired, - body.is-mentor-mode &.is-training_completed - background-color: black - .a-user-icon - opacity: .7 - body.is-mentor-mode &.is-new-user - .a-user-icon - box-shadow: 0 0 1px 2px var(--warning) - &.is-student - .a-user-icon - border: dashed 2px var(--danger) - &.is-trainee - .a-user-icon - border: dashed 2px var(--main) diff --git a/app/javascript/stylesheets/config/mixins/_word-wrap.sass b/app/javascript/stylesheets/config/mixins/_word-wrap.sass deleted file mode 100644 index ba2b267641f..00000000000 --- a/app/javascript/stylesheets/config/mixins/_word-wrap.sass +++ /dev/null @@ -1,8 +0,0 @@ -=word-wrap($wrap: break-word) - overflow-wrap: $wrap - word-wrap: $wrap - - @if $wrap == break-word - word-break: break-all - @else - word-break: $wrap diff --git a/app/javascript/stylesheets/config/mixins/grid/_grid-framework.sass b/app/javascript/stylesheets/config/mixins/grid/_grid-framework.sass deleted file mode 100644 index 3fa11693443..00000000000 --- a/app/javascript/stylesheets/config/mixins/grid/_grid-framework.sass +++ /dev/null @@ -1,22 +0,0 @@ -@use "../../variables/layout" - -/// Grid system -// -// Generate semantic grid columns with these mixins. - -@use "sass:math" - -=make-row($gutter: layout.$grid-gutter-width) - display: flex - flex-wrap: wrap - gap: $gutter - -=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(#{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 deleted file mode 100644 index 4645acd16aa..00000000000 --- a/app/javascript/stylesheets/config/mixins/grid/_grid.sass +++ /dev/null @@ -1,16 +0,0 @@ -@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: 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} - +grid-framework.make-col-span($i, $columns, $gutter) diff --git a/app/javascript/stylesheets/config/variables/_choices.sass b/app/javascript/stylesheets/config/variables/_choices.sass deleted file mode 100644 index 55e2c6f9e69..00000000000 --- a/app/javascript/stylesheets/config/variables/_choices.sass +++ /dev/null @@ -1,24 +0,0 @@ -$choices-selector: "choices" !default -$choices-font-size-lg: 1rem -$choices-font-size-md: .875rem -$choices-font-size-sm: .75rem -$choices-guttering: 1.5rem -$choices-border-radius: 4px -$choices-border-radius-item: 4px -$choices-bg-color: #f9f9f9 !default -$choices-bg-color-disabled: var(--disabled) !default -$choices-bg-color-dropdown: var(--base) !default -$choices-text-color: var(--main-text) -$choices-keyline-color: #ddd !default -$choices-primary-color: var(--main-tint) -$choices-disabled-color: var(--disabled) !default -$choices-highlight-color: var(--main-tint) -$choices-button-dimension: 8px !default -$choices-button-offset: 8px !default -$choices-icon-cross: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%20style%3D%22enable-background%3Anew%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.st0%7Bfill%3A%233f3290%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M2.6%200%2021%2018.4%2018.4%2021%200%202.6%202.6%200z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2018.4%2018.4%200l2.5%202.5L2.5%2020.9%200%2018.4z%22%2F%3E%3C%2Fsvg%3E') -$choices-icon-cross-inverse: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%20style%3D%22enable-background%3Anew%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.st0%7Bfill%3A%23ffffff%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M2.6%200%2021%2018.4%2018.4%2021%200%202.6%202.6%200z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2018.4%2018.4%200l2.5%202.5L2.5%2020.9%200%2018.4z%22%2F%3E%3C%2Fsvg%3E') - -$choices-z-index: 1 - -// -// diff --git a/app/javascript/stylesheets/config/variables/_colors.sass b/app/javascript/stylesheets/config/variables/_colors.sass deleted file mode 100644 index 0a3db8f384f..00000000000 --- a/app/javascript/stylesheets/config/variables/_colors.sass +++ /dev/null @@ -1,150 +0,0 @@ -@use "../functions/color" - -$main: hsl(242, 51%, 51%) -$accent: hsl(44, 96%, 54%) -$base: white - -// completion -$completion: hsl(197deg 83% 49%) -$completion-dark: rgb(0 0 0 / 20%) - -// background -$background-shade: hsl(242, 11%, 85%) // #d5d5dd -$background-semi-shade: hsl(242, 24%, 92%) // #e6e6ef -$background: hsl(242, 34%, 98%) // #f8f8fc -$background-tint: hsl(242, 20%, 93%) // #ececef -$background-more-tint: hsl(242, 8%, 98.5%) // #fbfbfb - -// lp-bg -$lp-bg-3: #DEDEF2 -$lp-bg-2: #EBEBF7 -$lp-bg-1: $background - -// nikoniko -$positive-background: #ffecdf -$negative-background: #ecf3f7 -$neutral-background: #fff9e8 - -// ranking -$gold: #e3a822 -$silver: #898888 -$bronze: #dc7e61 - -// text -$default-text: hsl(242, 10%, 30%) -$reversal-text: white -$muted-text: hsl(242, 5%, 64%) -$semi-muted-text: hsl(242, 7%, 57%) -$link-text: hsl(242, 62%, 33%) -$hover-text: hsl(215, 78%, 50%) - -// placeholder -$placeholder: rgba(black, .075) -$placeholder-text: hsl(242, 0%, 73%) - -// border -$border: hsl(242, 7%, 89%) -$border-tint: hsl(242, 14%, 95%) -$border-shade: hsl(242, 7%, 84%) -$border-more-shade: $muted-text - -// Welcome Colors -$welcome-blue: hsl(210, 100%, 55%) -$welcome-light-blue: hsl(199, 100%, 92%) -$welcome-yellow: hsl(57, 100%, 49%) -$welcome-orange: hsl(40, 98%, 59%) -$welcome-pink: hsl(344, 80%, 66%) - -// UI colors -$primary: #5752e8 -$secondary: hsl(242, 1%, 100%) -$success: hsl(150, 39%, 49%) -$info: hsl(190, 73%, 48%) -$warning: $accent -$danger: hsl(349, 90%, 62%) -$disabled: $background-shade -$stamp-color: hsl(0, 80%, 62%) - -$danger-text: color.shade($danger, 40%) -$danger-tint: color.tint($danger, 90%) - -$success-text: color.shade($success, 60%) -$success-tint: color.tint($success, 90%) - -$info-text: color.shade($info, 60%) -$info-tint: color.tint($info, 90%) - -$primary-text: color.shade($primary, 40%) -$primary-tint: color.tint($primary, 90%) -$primary-semi-tint: color.tint($primary, 60%) - -$primary-background: #ebebf7 - -$warning-text: color.shade($warning, 60%) -$warning-tint: color.tint($warning, 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%) - -// reply -$reply-warning-background: $warning -$reply-warning-border: #d09a0e - -$reply-alert-background: #ff7500 -$reply-alert-border: #d06305 - -$reply-deadline-background: $danger -$reply-deadline-border: #b50f38 - -// input -$input-border: $border-shade -$input-background: $background-more-tint - -$input-hover-border: $border-shade -$input-hover-background: $base - -$input-selected-background: $primary-tint -$input-selected-border: $primary -$input-selected-text: $primary-text - -$input-focus-background: $base -$input-focus-border: $primary -$input-focus-shadow: rgba($primary, .4) 0 0 1px 2px - -=default-link - transition: color .2s ease-in - color: var(--link-text) - &:link - color: var(--link-text) - &:visited - color: hsl(233, 33%, 58%) - &:hover - color: var(--hover-text) - &:active - color: var(--hover-text) - -=reversal-link - transition: color .2s ease-in - color: var(--reversal-text) - &:link - color: var(--reversal-text) - &:visited - color: hsl(242, 62%, 74%) - &:hover - color: hsl(210, 100%, 80%) - &:active - color: hsl(316, 90%, 66%) - -=muted-link - transition: color .2s ease-in - color: var(--muted-text) - &:link - color: var(--muted-text) - &:visited - color: var(--muted-text) - &:hover - color: var(--link-text) - &:active - color: var(--link-text) diff --git a/app/javascript/stylesheets/config/variables/_css-variables.sass b/app/javascript/stylesheets/config/variables/_css-variables.sass deleted file mode 100644 index b823664c24c..00000000000 --- a/app/javascript/stylesheets/config/variables/_css-variables.sass +++ /dev/null @@ -1,142 +0,0 @@ -@use "colors" -@use "fonts" -@use "layout" - -\:root - ///////////////////// - // Colors - ///////////////////// - - --main: #{colors.$main} - --accent: #{colors.$accent} - --base: #{colors.$base} - - // completion - --completion: #{colors.$completion} - --completion-dark: #{colors.$completion-dark} - - // background - --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: #{colors.$positive-background} - --negative-background: #{colors.$negative-background} - --neutral-background: #{colors.$neutral-background} - - // ranking - --gold: #{colors.$gold} - --silver: #{colors.$silver} - --bronze: #{colors.$bronze} - - // 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: #{colors.$placeholder} - --placeholder-text: #{colors.$placeholder-text} - - // border - --border: #{colors.$border} - --border-tint: #{colors.$border-tint} - --border-shade: #{colors.$border-shade} - --border-more-shade: #{colors.$border-more-shade} - - // Welcome Colors - --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: #{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: #{colors.$danger-text} - --danger-tint: #{colors.$danger-tint} - - --success-text: #{colors.$success-text} - --success-tint: #{colors.$success-tint} - - --info-text: #{colors.$info-text} - --info-tint: #{colors.$info-tint} - - --primary-text: #{colors.$primary-text} - --primary-tint: #{colors.$primary-tint} - --primary-semi-tint: #{colors.$primary-semi-tint} - --primary-background: #{colors.$primary-background} - - --warning-text: #{colors.$warning-text} - --warning-tint: #{colors.$warning-tint} - - --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: #{colors.$lp-bg-3} - --lp-bg-2: var(--primary-background) - --lp-bg-1: var(--background) - - // reply - --reply-warning-background: #{colors.$reply-warning-background} - --reply-warning-border: #{colors.$reply-warning-border} - - --reply-alert-background: #{colors.$reply-alert-background} - --reply-alert-border: #{colors.$reply-alert-border} - - --reply-deadline-background: #{colors.$reply-deadline-background} - --reply-deadline-border: #{colors.$reply-deadline-border} - - // input - --input-border: #{colors.$input-border} - --input-background: #{colors.$input-background} - - --input-hover-border: #{colors.$input-hover-border} - --input-hover-background: #{colors.$input-hover-background} - - --input-selected-background: #{colors.$input-selected-background} - --input-selected-border: #{colors.$input-selected-border} - --input-selected-text: #{colors.$input-selected-text} - - --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: #{layout.$header-height__md-up} - --header-height__sm-down: #{layout.$header-height__sm-down} - - --global-nav-width: #{layout.$global-nav-width} - --global-nav-width-sm: #{layout.$global-nav-width-sm} - - --thread-header-author: #{layout.$thread-header-author} - - --side-nav-width: #{layout.$side-nav-width} - - ///////////////////// - // Fonts - ///////////////////// - - --sans-serif: #{fonts.$sans-serif} - --monospace: #{fonts.$monospace} diff --git a/app/javascript/stylesheets/config/variables/_fonts.sass b/app/javascript/stylesheets/config/variables/_fonts.sass deleted file mode 100644 index f17fd16e9e4..00000000000 --- a/app/javascript/stylesheets/config/variables/_fonts.sass +++ /dev/null @@ -1,2 +0,0 @@ -$sans-serif: YakuHanJPs, "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "Apple Color Emoji","Segoe UI Emoji", sans-serif -$monospace: 'Source Code Pro', monospace diff --git a/app/javascript/stylesheets/config/variables/_layout.sass b/app/javascript/stylesheets/config/variables/_layout.sass deleted file mode 100644 index b100a235339..00000000000 --- a/app/javascript/stylesheets/config/variables/_layout.sass +++ /dev/null @@ -1,65 +0,0 @@ -///////////////// -// grids -//////////////// - -$base-px: 16px !default -$container-class-name: container !default - -=_assert-ascending($map, $map-name) - $prev-key: null - $prev-num: null - @each $key, $num in $map - @if $prev-num != null and $prev-num >= $num - @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !" - $prev-key: $key - $prev-num: $num - -$grid-breakpoints: (xs: 0, sm: 40em, md: 48em, lg: 64em, xl: 80em, xxl: 96em, xxxl: 120em) - -// breakpoints -// -// xs: 0 〜 639 -// @media screen and (max-width:639px) -// -// sm: 640 〜 767 -// @media screen and (min-width:640px) and (max-width:767px) -// -// md: 768 〜 1023 -// @media screen and (min-width:768px) and (max-width:1023px) -// -// lg: 1024 〜 1279 -// @media screen and (min-width:1024px) and (max-width:1279px) -// -// xl: 1280 〜 1535 -// @media screen and (min-width:1280px) and (max-width:1535px) -// -// xxl: 1536 〜 1919 -// @media screen and (min-width:1536px) and (max-width:1919px) -// -// xxxl: 1920 〜 ∞ -// @media screen and (min-width:1920px) - -+_assert-ascending($grid-breakpoints, "$grid-breakpoints") -$container-max-width: 72.25rem !default - -// 横一列の最大カラム数 -$grid-columns: 12 !default -// カラムとカラムの間のスペース -$grid-gutter-width: 1rem - -///////////////// -// layout -//////////////// - -$horizontal: left right !default -$vertical: top bottom !default - -$header-height__md-up: 3.125rem -$header-height__sm-down: 2.75rem - -$global-nav-width: 5.5rem -$global-nav-width-sm: 13rem - -$thread-header-author: 4.75rem - -$side-nav-width: 17rem diff --git a/app/javascript/stylesheets/config/variables/_text-inputs-list.sass b/app/javascript/stylesheets/config/variables/_text-inputs-list.sass deleted file mode 100644 index e9464923ade..00000000000 --- a/app/javascript/stylesheets/config/variables/_text-inputs-list.sass +++ /dev/null @@ -1 +0,0 @@ -$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/config/variables/_welcome-colors.sass b/app/javascript/stylesheets/config/variables/_welcome-colors.sass deleted file mode 100644 index 7f582e4b170..00000000000 --- a/app/javascript/stylesheets/config/variables/_welcome-colors.sass +++ /dev/null @@ -1,6 +0,0 @@ -///////////////////// -// welcome -///////////////////// - -$welcome-main-color: #0bb5e1 -$welcome-accent-color: #f4e90f diff --git a/app/javascript/stylesheets/form/_zip-tel-input.scss b/app/javascript/stylesheets/form/_zip-tel-input.scss deleted file mode 100644 index d29cd4b3655..00000000000 --- a/app/javascript/stylesheets/form/_zip-tel-input.scss +++ /dev/null @@ -1,22 +0,0 @@ -.a-zip-input, -.a-tel-input, -.a-name-input { - display: flex; - align-items: center; - gap: 0.5rem; - - &__label { - font-size: 1.25rem; - color: var(--muted-text); - } -} - -.a-name-input { - &__field { - flex: 1; - - .a-form-label { - margin-bottom: 0.25rem; - } - } -} diff --git a/app/javascript/stylesheets/initializers/_reset.sass b/app/javascript/stylesheets/initializers/_reset.sass deleted file mode 100644 index 60809cda8e8..00000000000 --- a/app/javascript/stylesheets/initializers/_reset.sass +++ /dev/null @@ -1,84 +0,0 @@ -@use "../config/functions/assign-inputs" -@use "../config/mixins/placeholder" - -* - font-family: inherit - font-size: inherit - line-height: inherit - -html - //overflow-y: auto - line-height: 1 - -#{assign-inputs.$all-text-inputs}, -select, -button - outline: none - -video, -img, -canvas, -iframe - vertical-align: bottom - max-width: 100% - -img - vertical-align: middle - -h1, -h2, -h3, -h4, -h5, -h6, -p, -li - line-height: inherit - font-weight: inherit - -table - border-spacing: 0 - border-collapse: collapse - -ul, -ol - list-style: none - -input[type="submit"] - outline: none - -+placeholder.placeholder - color: var(--placeholder-text) - font-weight: 400 - -hr - border: none - -details, -details *, -summary - box-sizing: border-box - -a - color: var(--main) - word-break: break-all - overflow-wrap: break-word - -body - min-height: 100vh - height: 100% - -textarea - overflow-anchor: none - -p - word-wrap: break-word - -code, -kbd, -pre, -samp - font-family: var(--monospace) - -em - font-style: normal diff --git a/app/javascript/stylesheets/initializers/_ress.scss b/app/javascript/stylesheets/initializers/_ress.scss deleted file mode 100644 index b5f49d559fe..00000000000 --- a/app/javascript/stylesheets/initializers/_ress.scss +++ /dev/null @@ -1,338 +0,0 @@ -/*! - * ress.css • v1.2.2 - * MIT License - * github.com/filipelinhares/ress - */ - -/* # ================================================================= - # Global selectors - # ================================================================= */ - -html { - box-sizing: border-box; - //overflow-y: scroll; /* All browsers without overlaying scrollbars */ - -webkit-text-size-adjust: 100%; /* iOS 8+ */ -} - -body { - overflow-y: scroll; /* All browsers without overlaying scrollbars */ -} - -*, -::before, -::after { - background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */ - box-sizing: inherit; -} - -::before, -::after { - text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */ - vertical-align: inherit; -} - -* { - padding: 0; /* Reset `padding` and `margin` of all elements */ - margin: 0; -} - -/* # ================================================================= - # General elements - # ================================================================= */ - -/* Add the correct display in iOS 4-7.*/ -audio:not([controls]) { - display: none; - height: 0; -} - -hr { - overflow: visible; /* Show the overflow in Edge and IE */ -} - -/* -* Correct `block` display not defined for any HTML5 element in IE 8/9 -* Correct `block` display not defined for `details` or `summary` in IE 10/11 -* and Firefox -* Correct `block` display not defined for `main` in IE 11 -*/ -article, -aside, -details, -figcaption, -figure, -footer, -header, -main, -menu, -nav, -section, -summary { - display: block; -} - -summary { - display: list-item; /* Add the correct display in all browsers */ -} - -small { - font-size: 80%; /* Set font-size to 80% in `small` elements */ -} - -[hidden], -template { - display: none; /* Add the correct display in IE */ -} - -abbr[title] { - border-bottom: 1px dotted; /* Add a bordered underline effect in all browsers */ - text-decoration: none; /* Remove text decoration in Firefox 40+ */ -} - -a { - background-color: transparent; /* Remove the gray background on active links in IE 10 */ - -webkit-text-decoration-skip: objects; /* Remove gaps in links underline in iOS 8+ and Safari 8+ */ -} - -a:active, -a:hover { - outline-width: 0; /* Remove the outline when hovering in all browsers */ -} - -code, -kbd, -pre, -samp { - font-family: monospace; /* Specify the font family of code elements */ -} - -b, -strong { - font-weight: bolder; /* Correct style set to `bold` in Edge 12+, Safari 6.2+, and Chrome 18+ */ -} - -dfn { - font-style: italic; /* Address styling not present in Safari and Chrome */ -} - -/* Address styling not present in IE 8/9 */ -mark { - background-color: #ff0; - color: #000; -} - -/* https://gist.github.com/unruthless/413930 */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* # ================================================================= - # Forms - # ================================================================= */ - -input { - border-radius: 0; -} - -/* Apply cursor pointer to button elements */ -button, -[type="button"], -[type="reset"], -[type="submit"], -[role="button"] { - cursor: pointer; -} - -/* Replace pointer cursor in disabled elements */ -[disabled] { - cursor: default; -} - -[type="number"] { - width: auto; /* Firefox 36+ */ -} - -[type="search"] { - -webkit-appearance: textfield; /* Safari 8+ */ -} - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; /* Safari 8 */ -} - -textarea { - overflow: auto; /* Internet Explorer 11+ */ - resize: vertical; /* Specify textarea resizability */ -} - -button, -input, -optgroup, -select, -textarea { - font: inherit; /* Specify font inheritance of form elements */ -} - -optgroup { - font-weight: bold; /* Restore the font weight unset by the previous rule. */ -} - -button { - overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */ -} - -/* Remove inner padding and border in Firefox 4+ */ -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: 0; - padding: 0; -} - -/* Replace focus style removed in the border reset above */ -button:-moz-focusring, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - outline: 1px dotted ButtonText; -} - -button, -html [type="button"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */ -[type="reset"], -[type="submit"] { - -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */ -} - -button, -select { - text-transform: none; /* Firefox 40+, Internet Explorer 11- */ -} - -/* Remove the default button styling in all browsers */ -button, -input, -select, -textarea { - background-color: transparent; - border-style: none; - color: inherit; -} - -/* Style select like a standard input */ -select { - -moz-appearance: none; /* Firefox 36+ */ - -webkit-appearance: none; /* Chrome 41+ */ -} - -select::-ms-expand { - display: none; /* Internet Explorer 11+ */ -} - -select::-ms-value { - color: currentColor; /* Internet Explorer 11+ */ -} - -legend { - border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */ - color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */ - display: table; /* Correct the text wrapping in Edge and IE */ - max-width: 100%; /* Correct the text wrapping in Edge and IE */ - white-space: normal; /* Correct the text wrapping in Edge and IE */ -} - -::-webkit-file-upload-button { - -webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari */ - font: inherit; /* Change font properties to `inherit` in Chrome and Safari */ -} - -[type="search"] { - -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */ - outline-offset: -2px; /* Correct the outline style in Safari */ -} - -/* # ================================================================= - # Specify media element style - # ================================================================= */ - -img { - border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */ -} - -/* Add the correct vertical alignment in Chrome, Firefox, and Opera */ -progress { - vertical-align: baseline; -} - -svg:not(:root) { - overflow: hidden; /* Internet Explorer 11- */ -} - -audio, -canvas, -progress, -video { - display: inline-block; /* Internet Explorer 11+, Windows Phone 8.1+ */ -} - -/* # ================================================================= - # Accessibility - # ================================================================= */ - -/* Hide content from screens but not screenreaders */ -@media screen { - [hidden~="screen"] { - display: inherit; - } - [hidden~="screen"]:not(:active):not(:focus):not(:target) { - position: absolute !important; - clip: rect(0 0 0 0) !important; - } -} - -/* Specify the progress cursor of updating elements */ -[aria-busy="true"] { - cursor: progress; -} - -/* Specify the pointer cursor of trigger elements */ -[aria-controls] { - cursor: pointer; -} - -/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */ -[aria-disabled] { - cursor: default; -} - -/* # ================================================================= - # Selection - # ================================================================= */ - -/* Specify text selection background color and omit drop shadow */ - -::-moz-selection { - background-color: #b3d4fc; /* Required when declaring ::selection */ - color: #000; - text-shadow: none; -} - -::selection { - background-color: #b3d4fc; /* Required when declaring ::selection */ - color: #000; - text-shadow: none; -} diff --git a/app/javascript/stylesheets/initializers/_tailwind.sass b/app/javascript/stylesheets/initializers/_tailwind.sass deleted file mode 100644 index 9050d10ebd1..00000000000 --- a/app/javascript/stylesheets/initializers/_tailwind.sass +++ /dev/null @@ -1 +0,0 @@ -@tailwind utilities diff --git a/app/javascript/stylesheets/lp.sass b/app/javascript/stylesheets/lp.sass deleted file mode 100644 index 1a67e1a299e..00000000000 --- a/app/javascript/stylesheets/lp.sass +++ /dev/null @@ -1,87 +0,0 @@ -@charset "UTF-8" - -@use "common-imports" -@use "lp/base/base" - -//////////// -// layouts -//////////// -@use "lp/layouts/l-cards" -@use "lp/layouts/l-sections" - -//////////// -// blocks -//////////// - -@use "lp/blocks/lp/lp-header" -@use "lp/blocks/lp/lp-header-nav" - -@use "lp/blocks/lp/welcome-top-info" - -// top -@use "lp/blocks/lp/lp-top-cover" - -// lp-content -@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 -@use "lp/blocks/lp/lp-content-title" -@use "lp/blocks/lp/lp-content-sub-title" -@use "lp/blocks/lp/lp-card-title" - -// lp-description -@use "lp/blocks/lp/lp-card-description" - -// lp-actions -@use "lp/blocks/lp/lp-card-actions" - -// lp-section -@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 -@use "lp/blocks/lp/lp-page-header" -@use "lp/blocks/lp/lp-page-header-nav" - -@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 -@use "lp/blocks/lp/lp-faqs" -@use "lp/blocks/lp/lp-faq" -@use "lp/blocks/lp/side-filter" - -// lp-course-selection -@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" - -@use "lp/blocks/lp/lp-mentor-books" -@use "lp/blocks/lp/lp-mentor" - -// articles -@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" - -///////////////////// - -@use "lp/corporate-training/corporate-training-examples" -@use "lp/corporate-training/corporate-training-example" -@use "lp/corporate-training/corporate-training-testimonial" - -@use "initializers/tailwind" diff --git a/app/javascript/stylesheets/lp/base/_base.sass b/app/javascript/stylesheets/lp/base/_base.sass deleted file mode 100644 index 4fb26be361f..00000000000 --- a/app/javascript/stylesheets/lp/base/_base.sass +++ /dev/null @@ -1,65 +0,0 @@ -@use "../../config/mixins/break-points" -@use "../../config/mixins/text" -@use "../../config/variables/fonts" - -html.is-lp - font-family: fonts.$sans-serif - color: var(--default-text) - -:root - --people-bg-image: url("~assets/images/background/people.png") - --campaign-bg-image: url("~assets/images/background/campaingn.png") - -body.is-lp - background-color: var(--background) - -.not-logged-in-footer - color: var(--default-text) - -.not-logged-in-footer__nav-item-link - color: var(--default-text) - -.not-logged-in-footer-copyright - color: var(--default-text) - -.card-body__inner-title - +text.text-block(1.5rem 1.5, 700) - padding-bottom: .25rem - color: var(--main) - border-bottom: solid 1px var(--border) - -.welcome-practices - margin-top: 1.25rem - display: flex - flex-wrap: wrap - +break-points.media-breakpoint-up(md) - gap: .75rem .5rem - +break-points.media-breakpoint-down(sm) - flex-direction: column - -.welcome-practices__item - line-height: 1.6 - +break-points.media-breakpoint-up(md) - font-size: .875rem - &:not(:last-child)::after - content: '、' - +break-points.media-breakpoint-down(sm) - font-size: .8125rem - padding-block: .5rem - .welcome-practices__item + & - border-top: solid 1px var(--border-tint) - &:first-child - padding-top: 0 - &:last-child - padding-bottom: 0 - -.faqs-item__header - padding-bottom: .5rem - border-bottom: solid 1px var(--border) - -.faqs-item__body - margin-top: 1.5rem - -.faqs-item__title - +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 deleted file mode 100644 index 07719a58ce6..00000000000 --- a/app/javascript/stylesheets/lp/blocks/articles/_article-author.sass +++ /dev/null @@ -1,109 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" - -.article-author - &.is-welcome-index - height: 100% - -.article-author__inner - display: flex - flex-direction: column - gap: 1rem - +break-points.media-breakpoint-up(md) - padding: 1.25rem 1.5rem 1.5rem - +break-points.media-breakpoint-down(sm) - padding: .75rem 1rem 1rem - .article-author.is-articles-show & - padding: .75rem 1rem 0 - .article-author.is-articles-show &:last-child - padding-bottom: 1rem - -.article-author__header - display: flex - gap: 1.5rem - align-items: flex-start - -.article-author__header-start - flex: 0 0 4.5rem - -.article-author__header-end - flex: 1 - display: flex - flex-direction: column - gap: .5rem - -.article-author__image - border-radius: .25rem - +break-points.media-breakpoint-up(md) - width: 100% - +break-points.media-breakpoint-down(sm) - width: 4rem - display: block - margin-inline: auto - -.article-author__name - font-weight: 800 - color: var(--main) - +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.text-block(.875rem 1) - margin-bottom: .125rem - color: var(--main) - -.article-author__sns - +break-points.media-breakpoint-up(md) - display: flex - gap: .75rem - +break-points.media-breakpoint-down(sm) - display: none - -.article-author__sns-item-link - +text.text-block(1.25rem 1.45) - color: var(--main) - display: flex - +size.size(2.5rem) - justify-content: center - align-items: center - text-decoration: none - border: solid 1px var(--main) - border-radius: .25rem - transition: all .2s ease-out - &:hover - color: var(--welcome-pink) - -.article-author__body - font-size: .875rem - &.is-trancate - overflow: hidden - display: -webkit-box - text-overflow: ellipsis - -webkit-box-orient: vertical - -webkit-line-clamp: 3 - +break-points.media-breakpoint-up(md) - height: 67.2px - +break-points.media-breakpoint-down(sm) - display: none - - &.is-temp - +text.text-block(.875rem 1.6) - img - width: 6.25rem - float: right - margin-left: 1rem - margin-bottom: 0.75rem - &.has-3-books - width: 8.25rem - &.has-5-books - width: 10rem - a - color: var(--link-text) - text-decoration: underline - cursor: pointer - a:hover - text-decoration: none diff --git a/app/javascript/stylesheets/lp/blocks/articles/_article.sass b/app/javascript/stylesheets/lp/blocks/articles/_article.sass deleted file mode 100644 index 1bac2cda8fc..00000000000 --- a/app/javascript/stylesheets/lp/blocks/articles/_article.sass +++ /dev/null @@ -1,107 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" - -.article - +break-points.media-breakpoint-up(md) - padding-block: 2rem - +break-points.media-breakpoint-down(sm) - padding-block: 1.5rem - -.article__inner - +break-points.media-breakpoint-up(md) - padding: 1.25rem 2rem - +break-points.media-breakpoint-down(sm) - padding: 1rem - -.article__header - margin-bottom: 3rem - -.article__title - line-height: 1.4 - font-weight: 700 - font-feature-settings: "palt" - letter-spacing: .025em - color: var(--main) - +break-points.media-breakpoint-up(md) - font-size: 2.5rem - +break-points.media-breakpoint-down(sm) - font-size: 1.625rem - &.is-wip - color: var(--muted-text) - -.article__title-label - background-color: var(--background-semi-shade) - font-size: .625rem - display: inline-block - vertical-align: middle - padding: .25rem .5rem - margin-right: .25rem - border-radius: 1rem - margin-top: -.5em - font-weight: 400 - color: var(--default-text) - line-height: 1 - -.article__metas - display: flex - margin-top: .75rem - +break-points.media-breakpoint-up(md) - font-size: .875rem - +break-points.media-breakpoint-down(sm) - font-size: .8125rem - -.article__meta:not(:first-child) - margin-left: .75em - -.article__published-at - +text.text-block(1em 1.4) - color: var(--semi-muted-text) - -.article__author - display: flex - align-items: center - +text.text-block(1em 1.4) - color: var(--default-text) - img - +size.size(1.125rem) - object-fit: cover - margin-right: .25rem - border-radius: 50% - -.article__image - margin-top: 1.5rem - border-radius: 4px - aspect-ratio: 40 / 21 - object-fit: cover - width: 100% - - -.article__body - &:not(:first-child) - margin-top: 1.5rem - &.a-long-text - +break-points.media-breakpoint-up(md) - font-size: 1rem - +break-points.media-breakpoint-down(sm) - font-size: .875rem - -.article__actions - margin-top: 2rem - border-top: dashed 2px var(--border) - padding-top: 1rem - ul - display: flex - justify-content: center - align-items: center - gap: 1rem - li - flex: 1 - max-width: 15rem - -.article__header-row - &:not(:first-child) - margin-top: .75rem - -.article__ad - font-size: .875rem diff --git a/app/javascript/stylesheets/lp/blocks/articles/_articles-item.sass b/app/javascript/stylesheets/lp/blocks/articles/_articles-item.sass deleted file mode 100644 index 50d774572e8..00000000000 --- a/app/javascript/stylesheets/lp/blocks/articles/_articles-item.sass +++ /dev/null @@ -1,56 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" - -.articles-item - +break-points.media-breakpoint-up(md) - height: 100% - -.articles-item__link - +link.block-link - padding: 1rem - &:hover - .articles-item__title - text-decoration: underline - -.articles-item__row - &:not(:first-child) - margin-top: .5rem - -.articles-item__image - display: block - border-radius: 4px - aspect-ratio: 40 / 21 - object-fit: cover - -.articles-item__title - +text.text-block(1.125rem 1.4, 700) - color: var(--default-text) - .articles-item.is-wip & - color: var(--muted-text) - -.articles-item__metas - display: flex - -.articles-item__meta:not(:first-child) - margin-left: .75rem - -.articles-item__author - display: flex - align-items: center - +text.text-block(.8125rem 1.4) - color: var(--default-text) - img - +size.size(1.125rem) - object-fit: cover - margin-right: .25rem - border-radius: 50% - -.articles-item__published-at - +text.text-block(.8125rem 1.4) - color: var(--semi-muted-text) - -.articles-item__description - +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 deleted file mode 100644 index 280e43aeba8..00000000000 --- a/app/javascript/stylesheets/lp/blocks/articles/_articles.sass +++ /dev/null @@ -1,26 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.articles__header - background-color: var(--base) - -.articles__header-inner - display: flex - align-items: center - +break-points.media-breakpoint-up(md) - height: 3.5rem - +break-points.media-breakpoint-down(sm) - height: 3rem - -.articles__title - font-weight: 700 - +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 - +break-points.media-breakpoint-up(md) - padding-block: 2rem - +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 deleted file mode 100644 index a1b9a906315..00000000000 --- a/app/javascript/stylesheets/lp/blocks/articles/_share-buttons.sass +++ /dev/null @@ -1,56 +0,0 @@ -@use "../../../config/mixins/link" -@use "../../../config/mixins/text" - -.share-buttons - margin-top: .75rem - -.share-buttons__items - display: flex - gap: .5rem - @media (max-width: 20em) - gap: .25rem - -.share-buttons__item - @media (max-width: 20em) - &.is-x - flex: 1 - - -.x-share-button - width: 5.5rem - height: 2.5rem - background-color: white - +link.flex-link - flex-direction: column - border-radius: .25rem - align-items: center - justify-content: center - +text.text-block(.6875rem 1, 700) - color: var(--reversal-text) - border: solid 1px black - overflow: hidden - i - font-size: .875rem - color: black - flex: 1 - width: 100% - display: flex - align-items: center - justify-content: center - transition: all .2s ease-out - span - background-color: var(--default-text) - display: flex - width: 100% - height: 1.25rem - align-items: center - justify-content: center - transition: all .2s ease-out - padding-top: 1px - &:hover - i - background-color: var(--background-tint) - span - background-color: black - @media (max-width: 20em) - width: 100% diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-actions.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-actions.sass deleted file mode 100644 index ef6d5059b35..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-actions.sass +++ /dev/null @@ -1,17 +0,0 @@ -@use "../../../config/mixins/break-points" - -.lp-actions - align-self: stretch - +break-points.media-breakpoint-up(md) - max-width: 42.5rem - width: 100% - margin-inline: auto - -.lp-actions__items - display: flex - gap: 1rem - justify-content: center - -.lp-actions__item - flex: 1 - max-width: 22rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-capture-section.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-capture-section.sass deleted file mode 100644 index 47fa68258e1..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-capture-section.sass +++ /dev/null @@ -1,73 +0,0 @@ -@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 - +break-points.media-breakpoint-up(md) - gap: 3rem - +break-points.media-breakpoint-down(sm) - gap: 1rem - .lp-content-sub-title - br - display: none - -.lp-capture-section__start, -.lp-capture-section__end - display: flex - align-items: center - -.lp-capture-section__start - +break-points.media-breakpoint-up(lg) - flex: 1 - +break-points.media-breakpoint-only(md) - flex: 1 - +break-points.media-breakpoint-down(sm) - flex: 0 0 40% - - &.is-sm - +break-points.media-breakpoint-up(lg) - max-width: 20rem - +break-points.media-breakpoint-only(md) - max-width: 16rem - +break-points.media-breakpoint-down(sm) - max-width: 10rem - -.lp-capture-section__end - +break-points.media-breakpoint-up(lg) - flex: 1 - +break-points.media-breakpoint-only(md) - flex: 1.5 - +break-points.media-breakpoint-down(sm) - flex: 1 - - -.lp-capture-section__content - display: flex - flex-direction: column - +break-points.media-breakpoint-up(lg) - gap: 2rem - +break-points.media-breakpoint-only(md) - gap: 1.5rem - +break-points.media-breakpoint-down(sm) - gap: 1rem - -.lp-capture-section__body - +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 - width: 100% - display: block - border-top: dashed 1px var(--border-more-shade) - -.lp-capture-section__image - width: 100% - +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-actions.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-card-actions.sass deleted file mode 100644 index 2684935f859..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-card-actions.sass +++ /dev/null @@ -1,9 +0,0 @@ -.lp-card-actions__items - display: flex - width: 100% - justify-content: center - gap: 1.5rem - -.lp-card-actions__item - width: 12rem - max-width: 100% diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-card-description.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-card-description.sass deleted file mode 100644 index 756b26617d7..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-card-description.sass +++ /dev/null @@ -1,11 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" - -.lp-card-description - +break-points.media-breakpoint-up(md) - font-size: 1rem - +break-points.media-breakpoint-down(sm) - font-size: .875rem - a - color: #0098f9 - +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 deleted file mode 100644 index fa08d5183d9..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-card-title.sass +++ /dev/null @@ -1,36 +0,0 @@ -@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) - +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 - +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.text-block(.9375rem 1, inline-flex 800) - font-family: 'Roboto Mono', monospace - align-items: center - justify-content: center - border-radius: 50% - +size.size(1.75rem) - background-color: var(--lp-bg-3) - margin-right: .5rem - vertical-align: middle - border: solid 2px var(--main) - position: relative - top: -1px diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-category-practices.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-category-practices.sass deleted file mode 100644 index f0020a87c64..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-category-practices.sass +++ /dev/null @@ -1,29 +0,0 @@ -@use "../../../config/mixins/text" - -.lp-category-practices - background-color: var(--base) - -.lp-category-practices__category - +text.text-block(1rem 1.4, 800) - background-color: var(--main) - color: var(--reversal-text) - display: flex - align-items: center - padding: .5rem 1rem - border-radius: .25rem .25rem 0 0 - -.lp-category-practices__practices - border: solid 1px var(--border) - border-radius: 0 0 .25rem .25rem - -.lp-category-practices__practice - +text.text-block(.875rem 1.4) - display: flex - align-items: center - padding: .5rem 1rem - &:nth-child(even) - background-color: var(--background-more-tint) - &:not(:last-child) - border-bottom: solid 1px var(--border) - &:last-child - border-radius: 0 0 .25rem .25rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-company-logos.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-company-logos.sass deleted file mode 100644 index 8bc87fd4d34..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-company-logos.sass +++ /dev/null @@ -1,17 +0,0 @@ -@use "../../../config/mixins/break-points" - -.lp-company-logos - display: flex - flex-wrap: wrap - justify-content: center - align-items: center - +break-points.media-breakpoint-up(lg) - gap: 1.5rem 2rem - +break-points.media-breakpoint-down(md) - gap: 1rem 1rem - -.lp-company-logos__item img - +break-points.media-breakpoint-up(lg) - height: 5rem - +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 deleted file mode 100644 index ead195f2e32..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-content-section.sass +++ /dev/null @@ -1,15 +0,0 @@ -@use "../../../config/mixins/break-points" - -.lp-content-section - display: flex - flex-direction: column - +break-points.media-breakpoint-up(md) - gap: 1.5rem - +break-points.media-breakpoint-down(sm) - gap: 1rem - -.lp-content__description - +break-points.media-breakpoint-up(md) - font-size: 1rem - +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 deleted file mode 100644 index f591499f429..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-content-stack.sass +++ /dev/null @@ -1,9 +0,0 @@ -@use "../../../config/mixins/break-points" - -.lp-content-stack - display: flex - flex-direction: column - +break-points.media-breakpoint-up(md) - gap: 3rem - +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 deleted file mode 100644 index 6b16429aed2..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-content-sub-title.sass +++ /dev/null @@ -1,25 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.lp-content-sub-title - i - margin-right: .25em - color: var(--main) - strong - color: var(--main) - +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) - +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 deleted file mode 100644 index c1363a67e41..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-content-title.sass +++ /dev/null @@ -1,108 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/position" -@use "../../../config/mixins/text" - -.lp-content-title - font-feature-settings: "palt" - letter-spacing: .02em - strong - color: var(--main) - &[class*=is-border-] - &::before - content: '' - display: block - border-radius: 10rem - //background-color: var(--main) - background-color: #9b9ace - +break-points.media-breakpoint-up(xl) - white-space: nowrap - +text.text-block(3rem 1.4, 800) - &.is-vertical - writing-mode: vertical-rl - &.is-border-bottom - padding-bottom: 2.5rem - position: relative - &::before - +position.position(absolute, left 50%, bottom 0) - width: 4.5em - height: .5rem - transform: translate(-50%) - &.is-border-left - padding-left: 3.5rem - position: relative - &::before - +position.position(absolute, left 0) - width: .5rem - height: 3.5em - top: .25em - &.is-vertical.is-border-left - &::before - top: .125em - +break-points.media-breakpoint-down(lg) - text-align: center - position: relative - &[class*=is-border-] - &::before - +position.position(absolute, left 50%, bottom 0) - transform: translate(-50%) - +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 - +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 - +break-points.media-breakpoint-down(sm) - +text.text-block(1.75rem 1.4, 800) - &.is-border-bottom - padding-bottom: 1.5rem - &[class*=is-border-] - &::before - width: 3.5em - height: .25rem - - &.is-sm - padding-bottom: 0 - +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 - +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 - +break-points.media-breakpoint-up(xl) - +text.text-block(1.5rem 1.4) - margin-top: -1rem - margin-bottom: 1rem - +break-points.media-breakpoint-only(lg) - +text.text-block(1.25rem 1.4) - margin-top: -.75rem - margin-bottom: .75rem - +break-points.media-breakpoint-only(md) - +text.text-block(1rem 1.4) - margin-top: -.5rem - margin-bottom: .5rem - +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 deleted file mode 100644 index d2163b53145..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-content.sass +++ /dev/null @@ -1,110 +0,0 @@ -@use "../../../config/mixins/break-points" - -.lp-content - position: relative - .lp-content__inner - display: flex - +break-points.media-breakpoint-up(lg) - padding-top: 4rem - padding-bottom: 4rem - +break-points.media-breakpoint-only(md) - padding-top: 2.5rem - padding-bottom: 2.5rem - +break-points.media-breakpoint-down(sm) - padding-top: 2rem - padding-bottom: 2rem - &.is-campaign - background-color: var(--main) - padding-top: 1.5rem - padding-bottom: 2rem - background-image: var(--campaign-bg-image) - color: var(--reversal-text) - background-repeat: repeat - background-size: 40rem - &.is-lp-bg-1 - background-color: var(--lp-bg-1) - &.is-lp-bg-2 - background-color: var(--lp-bg-2) - &.is-lp-bg-3 - background-color: var(--lp-bg-3) - &.is-lp-bg-main - background-color: var(--main) - color: var(--reversal-text) - - &.is-hero - position: relative - +break-points.media-breakpoint-up(md) - padding-top: 3rem - padding-bottom: 4rem - +break-points.media-breakpoint-down(sm) - padding-top: 2rem - padding-bottom: 3rem - .lp-content__inner - +break-points.media-breakpoint-up(md) - flex-direction: row - align-items: center - gap: 3.5rem - +break-points.media-breakpoint-down(sm) - flex-direction: column - gap: 1rem - .lp-content__start - +break-points.media-breakpoint-up(xl) - flex: 14 - +break-points.media-breakpoint-only(lg) - flex: 14 - +break-points.media-breakpoint-only(md) - flex: 14 - .lp-content__end - +break-points.media-breakpoint-up(xl) - flex: 10 - +break-points.media-breakpoint-only(lg) - flex: 8 - +break-points.media-breakpoint-only(md) - flex: 6 - .lp-hero-info - height: 100% - display: flex - flex-direction: column - justify-content: center - +break-points.media-breakpoint-up(md) - gap: 2rem - +break-points.media-breakpoint-down(sm) - gap: 1rem - - +break-points.media-breakpoint-up(xl) - &.is-top-title - .lp-content__inner - gap: 3.5rem - flex-direction: column - - &.is-right-title - .lp-content__inner - flex-direction: row-reverse - justify-content: space-between - gap: 3rem - .lp-content__end - flex: 1 - max-width: 50rem - - &.is-left-title - .lp-content__inner - gap: 3rem - justify-content: space-between - .lp-content__end - flex: 1 - max-width: 42.5rem - - .lp-content__inner - +break-points.media-breakpoint-down(lg) - flex-direction: column - +break-points.media-breakpoint-only(lg) - gap: 3.5rem - +break-points.media-breakpoint-only(md) - gap: 2.5rem - +break-points.media-breakpoint-down(sm) - gap: 2rem - -.lp-content__body - display: flex - flex-direction: column - gap: 2.5rem 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 deleted file mode 100644 index 591efc36399..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection-item.sass +++ /dev/null @@ -1,36 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.lp-course-selection-item__anchor - position: relative - top: -4rem - +break-points.media-breakpoint-down(sm) - &#front-engineer-course - margin-top: 4rem - -.lp-course-selection-item__inner - display: flex - flex-direction: column - gap: 1.5rem - -.lp-course-selection-item__title - font-weight: 700 - +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 - width: 100% - margin-inline: auto - -.lp-course-selection-item__categories - display: flex - flex-direction: column - gap: 1.5rem - details - background-color: var(--base) - -.lp-course-selection-item__body - padding: 1.5rem 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 deleted file mode 100644 index 4dedd40f2d4..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection-nav.sass +++ /dev/null @@ -1,30 +0,0 @@ -@use "../../../config/mixins/text" - -.lp-course-selection-nav - position: sticky - top: 0 - z-index: 2 - -.lp-course-selection-nav__inner - padding-block: .5rem - -.lp-course-selection-nav__items - display: flex - -.lp-course-selection-nav__item - flex: 1 - -.lp-course-selection-nav__item-link - border: solid 1px var(--main) - background-color: var(--base) - +text.text-block(.75rem 1.4, center) - display: flex - text-decoration: none - height: 2.75rem - justify-content: center - align-items: center - .lp-course-selection-nav__item:first-child & - border-radius: .25rem 0 0 .25rem - margin-right: -1px - .lp-course-selection-nav__item:last-child & - border-radius: 0 .25rem .25rem 0 diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection.sass deleted file mode 100644 index 8b8fcc83a73..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-course-selection.sass +++ /dev/null @@ -1,8 +0,0 @@ -@use "../../../config/mixins/break-points" - -.lp-course-selection__descritpion - +break-points.media-breakpoint-up(md) - font-size: 1rem - +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 deleted file mode 100644 index 13d7a36bc55..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-faq.sass +++ /dev/null @@ -1,44 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/position" -@use "../../../config/mixins/text" - -.lp-faq__inner - display: flex - flex-direction: column - gap: 1.5rem - -.lp-faq__header, -.lp-faq__body - padding-left: 2.5rem - position: relative - &::before - +position.position(absolute, left 0, top 0) - +text.text-block(1.25rem 1, 900) - color: var(--main) - font-family: "Lato", sans-serif - -.lp-faq__header - &::before - content: 'Q.' - -.lp-faq__body - &::before - content: 'A.' - -.lp-faq__title - +text.text-block(1.125rem 1.4, 800) - -.lp-faq__body - +break-points.media-breakpoint-up(md) - font-size: 1rem - +break-points.media-breakpoint-down(sm) - font-size: .875rem - -.lp-faq__edit - margin-top: .75rem - -.lp-faq__edit-link - +text.text-block(.875rem 1.4) - color: var(--muted-text) - &:hover - color: var(--main) diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-faqs.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-faqs.sass deleted file mode 100644 index 3ad02bcc819..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-faqs.sass +++ /dev/null @@ -1,6 +0,0 @@ -.lp-faqs__items - display: flex - flex-direction: column - gap: 2rem - max-width: 40rem - margin: 0 diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-header-nav.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-header-nav.sass deleted file mode 100644 index eddd2a53c8f..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-header-nav.sass +++ /dev/null @@ -1,93 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/position" - -.lp-header-nav - height: 100% - +break-points.media-breakpoint-down(lg) - display: none - input:checked + & - display: block - -.lp-header-nav__items - display: flex - +break-points.media-breakpoint-up(xxl) - gap: 1rem - +break-points.media-breakpoint-up(xl) - height: 100% - align-items: center - gap: .5rem - font-size: .875rem - +break-points.media-breakpoint-only(xl) - gap: .25rem - +break-points.media-breakpoint-down(lg) - flex-direction: column - +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 - +break-points.media-breakpoint-down(lg) - border-bottom: solid 1px var(--border-tint) - -.lp-header-nav__item-link - text-decoration: none - font-weight: 700 - color: var(--main) - white-space: nowrap - display: flex - justify-content: center - align-items: center - transition: all .2s ease-out - span - white-space: nowrap - +break-points.media-breakpoint-up(xl) - height: 2.25rem - padding-inline: .75rem - font-size: .875rem - background-color: var(--base) - border-radius: .5rem - &:hover - background-color: var(--lp-bg-3) - +break-points.media-breakpoint-down(lg) - height: 3rem - padding-inline: 2rem - font-size: .875rem - -.lp-header-nav__overlay - +break-points.media-breakpoint-up(xl) - display: none - +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 - width: 9.75rem - min-width: 9.75rem - -.lp-header__login - display: flex - height: 100% - align-items: center - +break-points.media-breakpoint-up(md) - width: 7.5rem - +break-points.media-breakpoint-down(sm) - width: auto - .a-button - font-size: .6875rem - -.lp-header__mobile-nav-trigger - +break-points.media-breakpoint-up(xl) - display: none - +break-points.media-breakpoint-down(lg) - display: flex - width: 2.75rem - height: 2.75rem - justify-content: center - align-items: center - - -.lp-header__home - height: 100% - display: flex - align-items: center diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-header.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-header.sass deleted file mode 100644 index 197a7116b0d..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-header.sass +++ /dev/null @@ -1,27 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/position" - -.lp-header - background-color: var(--base) - +position.position(sticky, top 0, 10) - -.lp-header__inner - height: 3.5rem - display: flex - -.lp-header__start - height: 100% - flex: 1 - display: flex - gap: 2.5rem - -.lp-header__end - height: 100% - display: flex - align-items: center - +break-points.media-breakpoint-down(lg) - margin-right: -1rem - +break-points.media-breakpoint-up(md) - gap: 1rem - +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 deleted file mode 100644 index 39286f0f6d2..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-hero-info.sass +++ /dev/null @@ -1,36 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.lp-hero-info__titles - display: flex - flex-direction: column - +break-points.media-breakpoint-up(md) - gap: 1rem - +break-points.media-breakpoint-down(sm) - gap: .75rem - -.lp-hero-info__title - +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 - +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 - +break-points.media-breakpoint-up(md) - p - +text.text-block(1rem 1.5, 600) - +break-points.media-breakpoint-down(sm) - p - +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 deleted file mode 100644 index 68697fcd7bf..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-hero-visual.sass +++ /dev/null @@ -1,14 +0,0 @@ -@use "../../../config/mixins/break-points" - -.lp-hero-visual - width: 100% - height: 100% - display: flex - justify-content: center - align-items: center - -.lp-hero-visual__image - +break-points.media-breakpoint-up(md) - max-height: 26.25rem - +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 deleted file mode 100644 index f87bb662f21..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-left-image-section.sass +++ /dev/null @@ -1,40 +0,0 @@ -@use "../../../config/mixins/break-points" - -.lp-left-image-section - +break-points.media-breakpoint-up(md) - padding: 1.5rem - +break-points.media-breakpoint-down(sm) - padding: 1rem - -.lp-left-image-section__inner - display: flex - align-items: center - +break-points.media-breakpoint-up(md) - gap: 1.5rem - +break-points.media-breakpoint-down(sm) - gap: 1rem - -.lp-left-image-section__start - font-size: 5rem - +break-points.media-breakpoint-up(md) - flex: 0 0 8rem - +break-points.media-breakpoint-down(sm) - flex: 0 0 4rem - -.lp-left-image-section__end - display: flex - flex-direction: column - justify-content: center - gap: 1rem - -.lp-left-image-section__icon - display: flex - justify-content: center - align-items: center - +break-points.media-breakpoint-down(sm) - float: left - width: 6rem - height: 6rem - margin-right: 1rem - margin-bottom: .75rem - font-size: 4rem 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 deleted file mode 100644 index 630ba49e5d8..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-left-number-section.sass +++ /dev/null @@ -1,56 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.lp-left-number-sections__items - counter-reset: number 0 - -.lp-left-number-section - flex-direction: row - padding: 1.5rem - display: flex - +break-points.media-breakpoint-up(md) - gap: 2rem - +break-points.media-breakpoint-down(sm) - gap: 1rem - -.lp-left-number-section__start - +break-points.media-breakpoint-up(md) - flex: 0 0 12rem - +break-points.media-breakpoint-down(sm) - flex: 0 0 6rem - -.lp-left-number-section__header - height: 100% - display: flex - flex-direction: column - justify-content: center - align-items: center - -.lp-left-number-section__title - text-align: center - color: var(--main) - +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 - counter-increment: number 1 - content: '0'counter(number) - display: block - font-family: "Lato", sans-serif - font-style: italic - -webkit-text-stroke-width: 1px - -webkit-text-stroke-color: var(--main) - color: #dedef2 - margin-bottom: -.125rem - +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 - flex-direction: column - gap: 1.25rem diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-mentor-books.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-mentor-books.sass deleted file mode 100644 index 21998fab9a6..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-mentor-books.sass +++ /dev/null @@ -1,20 +0,0 @@ -@use "../../../config/mixins/break-points" - -.lp-mentor-books__items - display: flex - flex-wrap: wrap - gap: .75rem - align-items: flex-end - -.lp-mentor-books__item - +break-points.media-breakpoint-up(md) - flex: 0 0 4.75rem - +break-points.media-breakpoint-down(sm) - flex: 1 - -.lp-mentor-books__item-link - box-shadow: 0 0 0 1px var(--background) - display: block - transition: all .2s ease-out - &:hover - box-shadow: 0 0 0 1px var(--warning) diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-mentor.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-mentor.sass deleted file mode 100644 index 83980fefdbc..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-mentor.sass +++ /dev/null @@ -1,134 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" - -.lp-mentor - &.is-welcome-index - height: 100% - -.lp-mentor__inner - display: flex - flex-direction: column - gap: 1rem - +break-points.media-breakpoint-up(md) - padding: 1.25rem 1.5rem 1.5rem - +break-points.media-breakpoint-down(sm) - padding: .75rem 1rem 1rem - .lp-mentor.is-articles-show & - padding: .75rem 1rem 0 - .lp-mentor.is-articles-show &:last-child - padding-bottom: 1rem - -.lp-mentor__header - display: flex - gap: 1rem - align-items: flex-start - +break-points.media-breakpoint-up(md) - +break-points.media-breakpoint-down(sm) - flex-direction: column - -.lp-mentor__header-start - +break-points.media-breakpoint-up(md) - flex: 0 0 4.5rem - +break-points.media-breakpoint-down(sm) - width: 100% - display: flex - align-items: center - -.lp-mentor__header-end - flex: 1 - display: flex - flex-direction: column - gap: .5rem - +break-points.media-breakpoint-up(md) - +break-points.media-breakpoint-down(sm) - width: 100% - - -.lp-mentor__image - border-radius: .25rem - +break-points.media-breakpoint-up(md) - width: 100% - +break-points.media-breakpoint-down(sm) - width: 3rem - display: block - margin-inline: auto - -.lp-mentor__name - font-weight: 800 - color: var(--main) - +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) - +break-points.media-breakpoint-up(md) - +text.text-block(.875rem 1) - margin-bottom: .125rem - +break-points.media-breakpoint-down(sm) - +text.text-block(.625rem 1) - text-align: center - margin-bottom: .125rem - -.lp-mentor__sns - display: flex - +break-points.media-breakpoint-up(md) - gap: .75rem - +break-points.media-breakpoint-down(sm) - gap: .5rem - flex-wrap: wrap - justify-content: center - -.lp-mentor__sns-item-link - color: var(--main) - display: flex - justify-content: center - align-items: center - text-decoration: none - border: solid 1px var(--main) - border-radius: .25rem - transition: all .2s ease-out - &:hover - color: var(--welcome-pink) - +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 - font-size: .875rem - &.is-trancate - overflow: hidden - display: -webkit-box - text-overflow: ellipsis - -webkit-box-orient: vertical - -webkit-line-clamp: 3 - +break-points.media-breakpoint-up(md) - height: 67.2px - +break-points.media-breakpoint-down(sm) - display: none - - &.is-temp - +text.text-block(.875rem 1.6) - img - width: 6.25rem - float: right - margin-left: 1rem - margin-bottom: 0.75rem - &.has-3-books - width: 8.25rem - &.has-5-books - width: 10rem - a - color: var(--link-text) - text-decoration: underline - cursor: pointer - a:hover - text-decoration: none diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-movie.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-movie.sass deleted file mode 100644 index 8eedabebc06..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-movie.sass +++ /dev/null @@ -1,12 +0,0 @@ -.lp-movie - max-width: 40rem - margin-inline: auto - -.lp-movie__inner - width: 100% - padding: 1rem - aspect-ratio: 16 / 9 - iframe - width: 100% - height: 100% - aspect-ratio: 16 / 9 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 deleted file mode 100644 index d97c4f69803..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-page-header-nav.sass +++ /dev/null @@ -1,23 +0,0 @@ -@use "../../../config/mixins/break-points" - -.lp-page-header-nav - display: flex - height: 100% - -.lp-page-header-nav__items - display: flex - align-items: center - gap: .75rem - -.lp-page-header-nav__item - position: relative - +break-points.media-breakpoint-up(md) - min-width: 10rem - display: flex - justify-content: center - +break-points.media-breakpoint-down(sm) - flex: 1 - max-width: 50% - min-width: 10rem - &:first-child:last-child - max-width: 100% diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-page-header.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-page-header.sass deleted file mode 100644 index 0838f87bf5c..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-page-header.sass +++ /dev/null @@ -1,31 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.lp-page-header - background-color: var(--main) - -.lp-page-header__title - color: var(--reversal-text) - +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 - text-overflow: ellipsis - -.lp-page-header__inner - height: 4rem - display: flex - align-items: center - -.lp-page-header__start - flex: 1 - height: 100% - display: flex - align-items: center - height: 100% - -.lp-page-header__end - height: 100% diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-practices-table.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-practices-table.sass deleted file mode 100644 index 921a4db5134..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-practices-table.sass +++ /dev/null @@ -1,17 +0,0 @@ -@use "../../../config/mixins/text" - -.lp-practices-table - width: 100% - tr - &:not(:last-child) - border-bottom: solid 1px var(--border) - th, - td - +text.text-block(.8125rem 1.5) - padding: .5rem 1rem - th - text-align: right - white-space: nowrap - font-weight: 400 - td - text-align: left diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-price.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-price.sass deleted file mode 100644 index 86f3a8ce79f..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-price.sass +++ /dev/null @@ -1,85 +0,0 @@ -@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 - +break-points.media-breakpoint-up(lg) - font-size: 1rem - +break-points.media-breakpoint-only(md) - font-size: .875rem - +break-points.media-breakpoint-down(sm) - font-size: .5625rem - &.is-total - gap: .25em - &.is-sm - justify-content: flex-start - +break-points.media-breakpoint-up(lg) - font-size: .5625em - .lp-price__tax - font-size: 1.5rem - +break-points.media-breakpoint-only(md) - font-size: .5em - .lp-price__tax - font-size: 1rem - +break-points.media-breakpoint-down(sm) - font-size: .375em - .lp-price__tax - font-size: .875rem - -.lp-price__label - +text.text-block(1.25em 1, 700) - align-self: center - +size.size(4em) - border: solid 1px - display: flex - align-items: center - justify-content: center - border-radius: 50% - letter-spacing: -.0625em - text-indent: -.0625em - -.lp-price__value - display: flex - align-self: baseline - gap: .5em - flex-wrap: wrap - -.lp-price__amount - +text.text-block(6.25em 1, 900) - align-self: baseline - font-family: 'Lato', sans-serif - -.lp-price__currency - +text.text-block(3.25em 1, 800) - align-self: baseline - -.lp-price__details - +text.text-block(2.25em 1, 800) - display: flex - align-self: baseline - gap: .125em - -.lp-price__separator - font-weight: 100 - align-self: baseline - -.lp-price__per-person - align-self: baseline - -.lp-price__tax - font-size: 1.25em - align-self: baseline - -.lp-price__total-value - display: flex - align-self: baseline - gap: .25em - font-size: 1.5em - font-weight: 600 - -.lp-price-note - line-height: 1.4 diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-supplementary-info.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-supplementary-info.sass deleted file mode 100644 index 80d990e7f1f..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-supplementary-info.sass +++ /dev/null @@ -1,15 +0,0 @@ -@use "../../../config/mixins/break-points" - -.lp-supplementary-info - background-color: var(--lp-bg-3) - border-radius: .5rem - -.lp-supplementary-info__inner - display: flex - flex-direction: column - +break-points.media-breakpoint-up(md) - padding: 1.5rem 2rem - gap: 1.25rem - +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 deleted file mode 100644 index 637abca0d47..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-table.sass +++ /dev/null @@ -1,30 +0,0 @@ -@use "../../../config/mixins/text" - -.lp-table - width: 100% - background-color: var(--base) - th, - td - +text.text-block(.8125rem 1.5) - padding: .5rem 1rem - border: solid 1px var(--border) - text-align: left - th - font-weight: 400 - width: 30% - background-color: var(--lp-bg-2) - td - text-align: left - *:first-child - margin-top: 0 - *:last-child - margin-bottom: 0 - p, - ul, - ol - margin-block: .75em - ul - list-style-type: disc - margin-left: 1.5em - li - margin-block: .25em diff --git a/app/javascript/stylesheets/lp/blocks/lp/_lp-top-cover.sass b/app/javascript/stylesheets/lp/blocks/lp/_lp-top-cover.sass deleted file mode 100644 index 8a8a4b6d5b6..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-top-cover.sass +++ /dev/null @@ -1,70 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" - -.lp-top-cover - background-image: var(--people-bg-image) - background-color: var(--lp-bg-2) - background-repeat: repeat - position: relative - +break-points.media-breakpoint-up(lg) - height: 38rem - background-size: 32rem - +break-points.media-breakpoint-only(md) - height: 28rem - background-size: 26rem - +break-points.media-breakpoint-down(sm) - height: 24rem - background-size: 20rem - -.lp-top-cover__container - height: 100% - -.lp-top-cover__inner - height: 100% - position: relative - z-index: 2 - display: flex - align-items: center - +break-points.media-breakpoint-down(sm) - padding-block: 1rem 1.5rem - -.lp-top-cover__contents - max-width: 920px - margin-inline: auto - -.lp-top-cover__image-container - display: flex - justify-content: center - align-items: center - -.lp-top-cover__logo - +size.size(38rem auto) - display: block - margin-top: 1.125rem - margin-inline: auto - +break-points.media-breakpoint-down(sm) - max-width: 90% - margin-top: .75rem - -.lp-top-cover__description - +text.text-block(1.5rem 1.4, center 800) - color: var(--reversal-text) - font-feature-settings: "palt" - +break-points.media-breakpoint-down(sm) - font-size: .875rem - -.lp-top-cover__title - color: var(--reversal-text) - font-feature-settings: "palt" - background-color: var(--accent) - color: var(--main) - padding: .5rem 1rem - font-weight: 800 - text-align: center - +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 deleted file mode 100644 index a8ea9683f4e..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_lp-top-image-sections.sass +++ /dev/null @@ -1,56 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/size" - -@use "sass:math" - -.lp-top-image-sections__title-icon - +size.size(3rem) - margin-right: .75rem - -.lp-top-image-section - height: 100% - -.lp-top-image-section__inner - height: 100% - display: flex - flex-direction: column - +break-points.media-breakpoint-up(md) - padding: 1.25rem 1.5rem 1.5rem - gap: 1.25rem - +break-points.media-breakpoint-down(sm) - padding: 1rem 1.25rem 1.25rem - gap: .75rem - -.lp-top-image-section__icon - display: block - margin-inline: auto - display: flex - justify-content: center - align-items: center - +break-points.media-breakpoint-up(lg) - width: 8rem - font-size: 5rem - +break-points.media-breakpoint-only(md) - width: 6rem - font-size: 4rem - +break-points.media-breakpoint-down(sm) - width: 6rem - font-size: 4rem - -.lp-top-image-section__chart-container - +break-points.media-breakpoint-up(md) - aspect-ratio: 5 / 3 - +break-points.media-breakpoint-down(sm) - aspect-ratio: 3 / 4 - -.lp-top-image-section__float-image - float: left - border-radius: .25rem - +break-points.media-breakpoint-up(md) - width: 6.75rem - margin-right: 1.5rem - margin-bottom: .75rem - +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 deleted file mode 100644 index a760d0a7aaa..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_side-filter.sass +++ /dev/null @@ -1,29 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.side-filter - position: sticky - top: 4rem - max-width: 14rem - margin: 0 - .a-card - overflow: hidden - +break-points.media-breakpoint-down(md) - display: none - -.side-filter__item-link - display: flex - padding: .75rem - +text.text-block(.875rem 1.4) - overflow: hidden - text-decoration: none - transition: all .2s ease-out - .side-filter__item:not(:last-child) & - border-bottom: solid 1px var(--border-tint) - &:hover - background-color: var(--primary-tint) - &.is-active - background-color: var(--main) - pointer-events: none - text-decoration: none - color: var(--reversal-text) diff --git a/app/javascript/stylesheets/lp/blocks/lp/_welcome-top-info.sass b/app/javascript/stylesheets/lp/blocks/lp/_welcome-top-info.sass deleted file mode 100644 index 176d07a0cb9..00000000000 --- a/app/javascript/stylesheets/lp/blocks/lp/_welcome-top-info.sass +++ /dev/null @@ -1,37 +0,0 @@ -@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 - +break-points.media-breakpoint-up(md) - display: flex - align-items: center - justify-content: center - -.welcome-top-info__label - border: solid 1px var(--reversal-text) - background-color: var(--danger) - +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 - +break-points.media-breakpoint-up(md) - margin-right: .5rem - +break-points.media-breakpoint-down(sm) - margin-bottom: .5rem - width: 10rem - margin: -26px auto .5rem - -.welcome-top-info__link - color: var(--reversal-text) - +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 deleted file mode 100644 index 7f5aee40b43..00000000000 --- a/app/javascript/stylesheets/lp/corporate-training/_corporate-training-example.sass +++ /dev/null @@ -1,77 +0,0 @@ -@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) - +break-points.media-breakpoint-up(md) - height: 9rem - +break-points.media-breakpoint-down(sm) - height: 6rem - -.corporate-training-example__title - +text.text-block(1rem 1.4) - -.corporate-training-example__divider - position: relative - width: .5rem - margin: 1.75rem auto - span - +size.size(.5rem) - border-radius: 1rem - background-color: var(--main) - display: block - &::before, - &::after - content: '' - +size.size(.5rem) - border-radius: 1rem - background-color: var(--main) - display: block - &::before - +position.position(absolute, left 0, top -1rem) - opacity: .2 - span - opacity: .5 - &::after - +position.position(absolute, left 0, bottom -1rem) - opacity: 1 - -.corporate-training-example-content - padding: 1rem - -.corporate-training-example-content__header - background-color: var(--main) - color: var(--reversal-text) - display: flex - justify-content: center - align-items: center - height: 3rem - border-radius: .1875rem - -.corporate-training-example-content__title - line-height: 1.4 - text-align: center - +break-points.media-breakpoint-up(md) - font-size: 1.125rem - +break-points.media-breakpoint-down(sm) - font-size: .875rem - -.corporate-training-example-content__body - margin-top: 1.5rem - ul - list-style: disc outside - margin-left: 1.5rem - li - +text.text-block(.875rem 1.4) - li + li - margin-top: .5rem - -.corporate-training-example-content__period - +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 deleted file mode 100644 index 746b2d145b7..00000000000 --- a/app/javascript/stylesheets/lp/corporate-training/_corporate-training-examples.sass +++ /dev/null @@ -1,10 +0,0 @@ -@use "../../config/mixins/break-points" - -.corporate-training-examples__items - display: grid - +break-points.media-breakpoint-up(md) - grid-template-columns: repeat(3, 1fr) - gap: 2rem - +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 deleted file mode 100644 index 708d8f205e8..00000000000 --- a/app/javascript/stylesheets/lp/corporate-training/_corporate-training-testimonial.sass +++ /dev/null @@ -1,18 +0,0 @@ -@use "../../config/mixins/text" - -.corporate-training-testimonials__items - display: flex - width: 100% - gap: 2rem - -.corporate-training-testimonial__inner - padding-inline: 1.5rem - &.a-card - margin-inline: 0 - -.corporate-training-testimonial__header, -.corporate-training-testimonial__body - padding-block: 1.5rem - -.corporate-training-testimonial__title - +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 deleted file mode 100644 index 3742ea99d7f..00000000000 --- a/app/javascript/stylesheets/lp/layouts/_l-cards.sass +++ /dev/null @@ -1,42 +0,0 @@ -@use "../../config/mixins/break-points" - -.l-cards - display: flex - flex-direction: column - +break-points.media-breakpoint-up(md) - gap: 3rem - +break-points.media-breakpoint-down(sm) - gap: 2rem - &.is-zigzag - .l-cards__item - &:nth-child(odd) - justify-content: flex-start - &:nth-child(even) - justify-content: flex-end - &.is-step-by-step - .l-cards__item - &:first-child - justify-content: flex-start - &:nth-child(2) - justify-content: center - &:last-child - justify-content: flex-end - &.is-stacked - flex-direction: column - align-items: center - .l-cards__item - justify-content: center - .l-cards__item.is-wide - flex: 0 0 100% - max-width: 100% - .l-cards__item-inner - flex: 0 0 100% - -.l-cards__item - display: flex - -.l-cards__item-inner - flex: 0 0 40rem - max-width: calc(100vw - 2rem) - .a-card - margin-inline: 0 diff --git a/app/javascript/stylesheets/modules/_any_login.sass b/app/javascript/stylesheets/modules/_any_login.sass deleted file mode 100644 index f2ca11ccd91..00000000000 --- a/app/javascript/stylesheets/modules/_any_login.sass +++ /dev/null @@ -1,55 +0,0 @@ -@use "../config/mixins/size" - -body - #any_login - background: black - opacity: 1 - overflow: hidden - border-top-right-radius: .75rem - #any_login_form_toggle_label - padding-inline: 1rem - #back_to_previous_id - margin-right: 1rem - form - padding: 0 - height: 3.25rem - display: flex - align-items: center - img - cursor: pointer - vertical-align: middle - padding: 1rem - +size.size(3.25rem) - opacity: 1 - transition: all .2s ease-out - &:hover - opacity: .7 - select, - input[type="text"], - input[type="submit"] - background-color: var(--base) - height: 2rem - border-radius: .25rem - padding-inline: .75rem - select - cursor: pointer - min-width: 10rem - input[type="text"] - min-width: 6rem - input[type="submit"] - background-color: var(--danger) - color: var(--reversal-text) - font-weight: 600 - margin-inline: .5em - height: 2rem - padding-inline: .75em - .visible_box - padding-right: .875rem - .any_login_user_information - font-size: .875rem - padding-left: 0 - #anylogin_back_to_user - padding-inline: .5rem - color: var(--reversal-text) - #anylogin_back_to_user - color: var(--reversal-text) diff --git a/app/javascript/stylesheets/modules/_choices.sass b/app/javascript/stylesheets/modules/_choices.sass deleted file mode 100644 index 4f977e2e792..00000000000 --- a/app/javascript/stylesheets/modules/_choices.sass +++ /dev/null @@ -1,69 +0,0 @@ -@use "../config/mixins/position" -@use "../config/variables/choices" - -body - .choices.is-open - z-index: 5 - .choices__inner - background-color: var(--input-background) - border-color: var(--input-border) - padding: .25rem - border-radius: 4px - min-height: 2.5rem - .choices.is-focused .choices__inner - background-color: var(--base) - .choices[data-type*=select-one] .choices__inner - padding-block: 0 - display: flex - - .choices__list--single - padding: .25rem 2.5rem .25rem .5rem - display: flex - align-items: center - .choices__item - white-space: nowrap - text-overflow: ellipsis - overflow: hidden - - .choices__list--multiple - .choices__item, - .choices__item[data-deletable] - display: inline-block - position: relative - max-width: calc(100% - .25rem) - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - align-items: center - border-color: var(--input-selected-border) - color: var(--input-selected-text) - background-color: var(--input-selected-background) - border-radius: 4px - line-height: calc(1.75rem - .125rem) - height: 1.75rem - padding: 0 2.25rem 0 .5rem - margin: .125rem - &.is-highlighted - border-color: var(--input-selected-border) - color: var(--input-selected-text) - background-color: var(--input-selected-background) - - .choices[data-type*=select-multiple] .choices__button, - .choices[data-type*=text] .choices__button - border-left-color: var(--input-selected-border) - color: var(--input-selected-text) - height: 100% - background-image: choices.$choices-icon-cross - margin: 0 0 0 .5rem - width: 1.75rem - +position.position(absolute, right 0, top 0) - transition: all .2s ease-out - &:hover - background-color: var(--primary-semi-tint) - background-image: choices.$choices-icon-cross-inverse - -.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item - line-height: 1.5 - padding: .5rem - &:not(:first-child) - border-top: solid 1px var(--border-tint) diff --git a/app/javascript/stylesheets/modules/_github.sass b/app/javascript/stylesheets/modules/_github.sass deleted file mode 100644 index f29c751269a..00000000000 --- a/app/javascript/stylesheets/modules/_github.sass +++ /dev/null @@ -1,526 +0,0 @@ -\:root - --color-scale-black: #1b1f23 - --color-scale-white: #fff - --color-scale-gray-0: #fafbfc - --color-scale-gray-1: #f6f8fa - --color-scale-gray-2: #e1e4e8 - --color-scale-gray-3: #d1d5da - --color-scale-gray-4: #959da5 - --color-scale-gray-5: #6a737d - --color-scale-gray-6: #586069 - --color-scale-gray-7: #444d56 - --color-scale-gray-8: #2f363d - --color-scale-gray-9: #24292e - --color-scale-blue-0: #f1f8ff - --color-scale-blue-1: #dbedff - --color-scale-blue-2: #c8e1ff - --color-scale-blue-3: #79b8ff - --color-scale-blue-4: #2188ff - --color-scale-blue-5: #0366d6 - --color-scale-blue-6: #005cc5 - --color-scale-blue-7: #044289 - --color-scale-blue-8: #032f62 - --color-scale-blue-9: #05264c - --color-scale-green-0: #f0fff4 - --color-scale-green-1: #dcffe4 - --color-scale-green-2: #bef5cb - --color-scale-green-3: #85e89d - --color-scale-green-4: #34d058 - --color-scale-green-5: #28a745 - --color-scale-green-6: #22863a - --color-scale-green-7: #176f2c - --color-scale-green-8: #165c26 - --color-scale-green-9: #144620 - --color-scale-yellow-0: #fffdef - --color-scale-yellow-1: #fffbdd - --color-scale-yellow-2: #fff5b1 - --color-scale-yellow-3: #ffea7f - --color-scale-yellow-4: #ffdf5d - --color-scale-yellow-5: #ffd33d - --color-scale-yellow-6: #f9c513 - --color-scale-yellow-7: #dbab09 - --color-scale-yellow-8: #b08800 - --color-scale-yellow-9: #735c0f - --color-scale-orange-0: #fff8f2 - --color-scale-orange-1: #ffebda - --color-scale-orange-2: #ffd1ac - --color-scale-orange-3: #ffab70 - --color-scale-orange-4: #fb8532 - --color-scale-orange-5: #f66a0a - --color-scale-orange-6: #e36209 - --color-scale-orange-7: #d15704 - --color-scale-orange-8: #c24e00 - --color-scale-orange-9: #a04100 - --color-scale-red-0: #ffeef0 - --color-scale-red-1: #ffdce0 - --color-scale-red-2: #fdaeb7 - --color-scale-red-3: #f97583 - --color-scale-red-4: #ea4a5a - --color-scale-red-5: #d73a49 - --color-scale-red-6: #cb2431 - --color-scale-red-7: #b31d28 - --color-scale-red-8: #9e1c23 - --color-scale-red-9: #86181d - --color-scale-purple-0: #f5f0ff - --color-scale-purple-1: #e6dcfd - --color-scale-purple-2: #d1bcf9 - --color-scale-purple-3: #b392f0 - --color-scale-purple-4: #8a63d2 - --color-scale-purple-5: #6f42c1 - --color-scale-purple-6: #5a32a3 - --color-scale-purple-7: #4c2889 - --color-scale-purple-8: #3a1d6e - --color-scale-purple-9: #29134e - --color-scale-pink-0: #ffeef8 - --color-scale-pink-1: #fedbf0 - --color-scale-pink-2: #f9b3dd - --color-scale-pink-3: #f692ce - --color-scale-pink-4: #ec6cb9 - --color-scale-pink-5: #ea4aaa - --color-scale-pink-6: #d03592 - --color-scale-pink-7: #b93a86 - --color-scale-pink-8: #99306f - --color-scale-pink-9: #6d224f - --color-auto-black: #1b1f23 - --color-auto-white: #fff - --color-auto-gray-0: #fafbfc - --color-auto-gray-1: #f6f8fa - --color-auto-gray-2: #e1e4e8 - --color-auto-gray-3: #d1d5da - --color-auto-gray-4: #959da5 - --color-auto-gray-5: #6a737d - --color-auto-gray-6: #586069 - --color-auto-gray-7: #444d56 - --color-auto-gray-8: #2f363d - --color-auto-gray-9: #24292e - --color-auto-blue-0: #f1f8ff - --color-auto-blue-1: #dbedff - --color-auto-blue-2: #c8e1ff - --color-auto-blue-3: #79b8ff - --color-auto-blue-4: #2188ff - --color-auto-blue-5: #0366d6 - --color-auto-blue-6: #005cc5 - --color-auto-blue-7: #044289 - --color-auto-blue-8: #032f62 - --color-auto-blue-9: #05264c - --color-auto-green-0: #f0fff4 - --color-auto-green-1: #dcffe4 - --color-auto-green-2: #bef5cb - --color-auto-green-3: #85e89d - --color-auto-green-4: #34d058 - --color-auto-green-5: #28a745 - --color-auto-green-6: #22863a - --color-auto-green-7: #176f2c - --color-auto-green-8: #165c26 - --color-auto-green-9: #144620 - --color-auto-yellow-0: #fffdef - --color-auto-yellow-1: #fffbdd - --color-auto-yellow-2: #fff5b1 - --color-auto-yellow-3: #ffea7f - --color-auto-yellow-4: #ffdf5d - --color-auto-yellow-5: #ffd33d - --color-auto-yellow-6: #f9c513 - --color-auto-yellow-7: #dbab09 - --color-auto-yellow-8: #b08800 - --color-auto-yellow-9: #735c0f - --color-auto-orange-0: #fff8f2 - --color-auto-orange-1: #ffebda - --color-auto-orange-2: #ffd1ac - --color-auto-orange-3: #ffab70 - --color-auto-orange-4: #fb8532 - --color-auto-orange-5: #f66a0a - --color-auto-orange-6: #e36209 - --color-auto-orange-7: #d15704 - --color-auto-orange-8: #c24e00 - --color-auto-orange-9: #a04100 - --color-auto-red-0: #ffeef0 - --color-auto-red-1: #ffdce0 - --color-auto-red-2: #fdaeb7 - --color-auto-red-3: #f97583 - --color-auto-red-4: #ea4a5a - --color-auto-red-5: #d73a49 - --color-auto-red-6: #cb2431 - --color-auto-red-7: #b31d28 - --color-auto-red-8: #9e1c23 - --color-auto-red-9: #86181d - --color-auto-purple-0: #f5f0ff - --color-auto-purple-1: #e6dcfd - --color-auto-purple-2: #d1bcf9 - --color-auto-purple-3: #b392f0 - --color-auto-purple-4: #8a63d2 - --color-auto-purple-5: #6f42c1 - --color-auto-purple-6: #5a32a3 - --color-auto-purple-7: #4c2889 - --color-auto-purple-8: #3a1d6e - --color-auto-purple-9: #29134e - --color-auto-pink-0: #ffeef8 - --color-auto-pink-1: #fedbf0 - --color-auto-pink-2: #f9b3dd - --color-auto-pink-3: #f692ce - --color-auto-pink-4: #ec6cb9 - --color-auto-pink-5: #ea4aaa - --color-auto-pink-6: #d03592 - --color-auto-pink-7: #b93a86 - --color-auto-pink-8: #99306f - --color-auto-pink-9: #6d224f - --color-text-primary: #24292e - --color-text-secondary: #586069 - --color-text-tertiary: #6a737d - --color-text-placeholder: #6a737d - --color-text-disabled: #6a737d - --color-text-inverse: #fff - --color-text-link: #0366d6 - --color-text-danger: #cb2431 - --color-text-success: #22863a - --color-text-warning: #b08800 - --color-icon-primary: #24292e - --color-icon-secondary: #586069 - --color-icon-tertiary: #959da5 - --color-icon-info: #0366d6 - --color-icon-danger: #d73a49 - --color-icon-success: #22863a - --color-icon-warning: #b08800 - --color-border-primary: #e1e4e8 - --color-border-secondary: #eaecef - --color-border-tertiary: #d1d5da - --color-border-inverse: #fff - --color-border-info: #0366d6 - --color-border-danger: #d73a49 - --color-border-success: #34d058 - --color-border-warning: #f9c513 - --color-bg-canvas: #fff - --color-bg-canvas-mobile: #fff - --color-bg-canvas-inverse: #24292e - --color-bg-primary: #fff - --color-bg-secondary: #fafbfc - --color-bg-tertiary: #f6f8fa - --color-bg-overlay: #fff - --color-bg-info: #f1f8ff - --color-bg-info-inverse: #0366d6 - --color-bg-danger: #ffeef0 - --color-bg-danger-inverse: #d73a49 - --color-bg-success: #dcffe4 - --color-bg-success-inverse: #28a745 - --color-bg-warning: #fff5b1 - --color-bg-warning-inverse: #ffd33d - --color-shadow-small: 0 1px 0 rgba(27,31,35,0.04) - --color-shadow-medium: 0 3px 6px rgba(149,157,165,0.15) - --color-shadow-large: 0 8px 24px rgba(149,157,165,0.2) - --color-shadow-extra-large: 0 12px 48px rgba(149,157,165,0.3) - --color-shadow-highlight: inset 0 1px 0 hsla(0,0%,100%,0.25) - --color-shadow-inset: inset 0 1px 0 rgba(225,228,232,0.2) - --color-state-hover-primary-bg: #0366d6 - --color-state-hover-primary-border: #0366d6 - --color-state-hover-primary-text: #fff - --color-state-hover-primary-icon: #fff - --color-state-hover-secondary-bg: #f6f8fa - --color-state-hover-secondary-border: #f6f8fa - --color-state-selected-primary-bg: #0366d6 - --color-state-selected-primary-border: #0366d6 - --color-state-selected-primary-text: #fff - --color-state-selected-primary-icon: #fff - --color-state-focus-border: #0366d6 - --color-state-focus-shadow: 0 0 0 3px rgba(3,102,214,0.3) - --color-fade-black-10: rgba(27,31,35,0.1) - --color-fade-black-15: rgba(27,31,35,0.15) - --color-fade-black-30: rgba(27,31,35,0.3) - --color-fade-black-50: rgba(27,31,35,0.5) - --color-fade-black-70: rgba(27,31,35,0.7) - --color-fade-black-85: rgba(27,31,35,0.85) - --color-fade-white-10: hsla(0,0%,100%,0.1) - --color-fade-white-15: hsla(0,0%,100%,0.15) - --color-fade-white-30: hsla(0,0%,100%,0.3) - --color-fade-white-50: hsla(0,0%,100%,0.5) - --color-fade-white-70: hsla(0,0%,100%,0.7) - --color-fade-white-85: hsla(0,0%,100%,0.85) - --color-alert-info-text: #24292e - --color-alert-info-icon: rgba(4,66,137,0.6) - --color-alert-info-bg: #dbedff - --color-alert-info-border: rgba(4,66,137,0.2) - --color-alert-warn-text: #24292e - --color-alert-warn-icon: #b08800 - --color-alert-warn-bg: #fffbdd - --color-alert-warn-border: rgba(176,136,0,0.2) - --color-alert-error-text: #24292e - --color-alert-error-icon: rgba(158,28,35,0.6) - --color-alert-error-bg: #ffe3e6 - --color-alert-error-border: rgba(158,28,35,0.2) - --color-alert-success-text: #24292e - --color-alert-success-icon: rgba(23,111,44,0.8) - --color-alert-success-bg: #dcffe4 - --color-alert-success-border: rgba(23,111,44,0.2) - --color-autocomplete-bg: #fff - --color-autocomplete-border: #e1e4e8 - --color-autocomplete-shadow: 0 3px 6px rgba(149,157,165,0.15) - --color-autocomplete-row-border: #eaecef - --color-blankslate-icon: #a3aab1 - --color-btn-bg: #fafbfc - --color-btn-border: rgba(27,31,35,0.15) - --color-btn-text: #24292e - --color-btn-ic: #6a737d - --color-btn-shadow: 0 1px 0 rgba(27,31,35,0.04) - --color-btn-shadow-highlight: inset 0 1px 0 hsla(0,0%,100%,0.25) - --color-btn-bg-hover: #f3f4f6 - --color-btn-bg-active: #edeff2 - --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(27,31,35,0.15) - --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(3,102,214,0.3) - --color-btn-primary-bg: #2ea44f - --color-btn-primary-border: rgba(27,31,35,0.15) - --color-btn-primary-border-disabled: rgba(27,31,35,0.1) - --color-btn-primary-text: #fff - --color-btn-primary-ic: hsla(0,0%,100%,0.8) - --color-btn-primary-shadow: 0 1px 0 rgba(27,31,35,0.1) - --color-btn-primary-shadow-highlight: inset 0 1px 0 hsla(0,0%,100%,0.03) - --color-btn-primary-shadow-selected: inset 0 1px 0 rgba(20,70,32,0.2) - --color-btn-primary-bg-hover: #2c974b - --color-btn-primary-bg-active: #2a8f47 - --color-btn-primary-bg-disabled: #94d3a2 - --color-btn-primary-disabled-text: hsla(0,0%,100%,0.8) - --color-btn-primary-disabled-shadow: 0 0 0 3px rgba(46,164,79,0.4) - --color-btn-primary-counter-bg: hsla(0,0%,100%,0.2) - --color-btn-inverse-on-hover-border: rgba(27,31,35,0.15) - --color-btn-inverse-on-hover-shadow: 0 1px 0 rgba(27,31,35,0.1) - --color-btn-inverse-on-hover-shadow-inset: inset 0 1px 0 hsla(0,0%,100%,0.03) - --color-btn-inverse-on-hover-counter-bg: hsla(0,0%,100%,0.2) - --color-btn-danger-text: #d73a49 - --color-btn-danger-text-disabled: rgba(215,58,73,0.5) - --color-btn-danger-bg-hover: #cb2431 - --color-btn-danger-bg-active: #be222e - --color-btn-danger-shadow: inset 0 1px 0 rgba(134,24,29,0.2) - --color-btn-danger-shadow-focus: 0 0 0 3px rgba(203,36,49,0.4) - --color-btn-danger-counter-bg: rgba(215,58,73,0.1) - --color-btn-danger-counter-bg-disabled: rgba(215,58,73,0.05) - --color-btn-outline-text: #0366d6 - --color-btn-outline-text-disabled: rgba(3,102,214,0.5) - --color-btn-outline-bg-hover: #0366d6 - --color-btn-outline-bg-active: #035fc7 - --color-btn-outline-shadow: inset 0 1px 0 rgba(5,38,76,0.2) - --color-btn-outline-shadow-focus: 0 0 0 3px rgba(0,92,197,0.4) - --color-btn-outline-counter-bg: rgba(3,102,214,0.1) - --color-btn-outline-counter-bg-disabled: rgba(3,102,214,0.05) - --color-btn-counter-bg: rgba(27,31,35,0.08) - --color-counter-text: #24292e - --color-counter-bg: rgba(209,213,218,0.5) - --color-counter-primary-text: #fff - --color-counter-primary-bg: #6a737d - --color-counter-secondary-text: #6a737d - --color-dropdown-bg: #fff - --color-dropdown-border: #e1e4e8 - --color-dropdown-shadow: 0 8px 24px rgba(149,157,165,0.2) - --color-label-border: #e1e4e8 - --color-label-primary-text: #24292e - --color-label-primary-border: #6a737d - --color-label-secondary-text: #586069 - --color-label-secondary-border: #e1e4e8 - --color-label-info-text: #0366d6 - --color-label-info-border: #0366d6 - --color-label-success-text: #22863a - --color-label-success-border: #28a745 - --color-label-warning-text: #735c0f - --color-label-warning-border: #b08800 - --color-label-danger-text: #d73a49 - --color-label-danger-border: #cb2431 - --color-topic-tag-bg: #f1f8ff - --color-topic-tag-border: #f1f8ff - --color-topic-tag-text: #0366d6 - --color-input-bg: #fff - --color-input-contrast-bg: #fafbfc - --color-input-border: #e1e4e8 - --color-input-shadow: inset 0 1px 2px rgba(27,31,35,0.075) - --color-input-disabled-bg: #fff - --color-input-disabled-border: #e1e4e8 - --color-input-warning-border: #f9c513 - --color-input-error-border: #cb2431 - --color-input-tooltip-success-text: #144620 - --color-input-tooltip-success-bg: #dcffe4 - --color-input-tooltip-success-border: #34d058 - --color-input-tooltip-warning-text: #735c0f - --color-input-tooltip-warning-bg: #fff5b1 - --color-input-tooltip-warning-border: #f9c513 - --color-input-tooltip-error-text: #86181d - --color-input-tooltip-error-bg: #ffeef0 - --color-input-tooltip-error-border: #f97583 - --color-avatar-border: transparent - --color-avatar-stack-fade: #d1d5da - --color-avatar-stack-fade-more: #e1e4e8 - --color-avatar-child-shadow: -2px -2px 0 hsla(0,0%,100%,0.8) - --color-toast-ic-bg-loading: #586069 - --color-timeline-text: #444d56 - --color-timeline-badge-bg: #e1e4e8 - --color-timeline-target-badge-border: #2188ff - --color-timeline-target-badge-shadow: #c8e1ff - --color-select-menu-bg: #fff - --color-select-menu-border: #e1e4e8 - --color-select-menu-border-secondary: #eaecef - --color-select-menu-shadow: 0 0 18px rgba(27,31,35,0.4) - --color-select-menu-backdrop-bg: rgba(27,31,35,0.5) - --color-select-menu-backdrop-border: transparent - --color-select-menu-tap-highlight: rgba(209,213,218,0.5) - --color-select-menu-tap-focus-bg: #dbedff - --color-box-blue-border: #c8e1ff - --color-box-row-yellow-bg: #fffbdd - --color-box-row-blue-bg: #f1f8ff - --color-box-header-blue-bg: #f1f8ff - --color-box-header-blue-border: #c8e1ff - --color-popover-border: rgba(27,31,35,0.15) - --color-branch-name-text: rgba(27,31,35,0.6) - --color-branch-name-icon: #a8bbd0 - --color-branch-name-bg: #eaf5ff - --color-branch-name-link-text: #0366d6 - --color-branch-name-link-icon: #a8bbd0 - --color-branch-name-link-bg: #eaf5ff - --color-markdown-code-bg: rgba(27,31,35,0.05) - --color-markdown-frame-border: #dfe2e5 - --color-markdown-blockquote-border: #dfe2e5 - --color-markdown-table-border: #dfe2e5 - --color-markdown-table-tr-border: #c6cbd1 - --color-menu-heading-text: #24292e - --color-menu-border-active: #f9826c - --color-sidenav-selected-bg: #fff - --color-sidenav-border-active: #f9826c - --color-tabnav-selected-bg: #fff - --color-header-text: hsla(0,0%,100%,0.7) - --color-header-bg: #24292e - --color-header-logo: #fff - --color-filter-item-bar-bg: #eff3f6 - --color-hidden-text-expander-bg: #dfe2e5 - --color-hidden-text-expander-bg-hover: #c6cbd1 - --color-drag-and-drop-border: #c3c8cf - --color-upload-enabled-border: #dfe2e5 - --color-upload-enabled-border-focused: #4a9eff - --color-previewable-comment-form-border: #c3c8cf - --color-previewable-comment-form-bg: #fff - --color-underlinenav-border: rgba(209,213,218,0) - --color-underlinenav-border-hover: #d1d5da - --color-underlinenav-border-active: #f9826c - --color-underlinenav-text: #24292e - --color-underlinenav-text-hover: #24292e - --color-underlinenav-text-active: #24292e - --color-underlinenav-icon: #959da5 - --color-underlinenav-icon-hover: #959da5 - --color-underlinenav-icon-active: #24292e - --color-underlinenav-counter-text: #24292e - --color-social-count-bg: #fff - --color-header-search-bg: #24292e - --color-header-search-border: #444d56 - --color-icon-folder: #79b8ff - --color-hl-author-bg: #f1f8ff - --color-hl-author-border: #c8e1ff - --color-logo-subdued: #d1d5da - --color-discussion-border: #a2cbac - --color-diff-neutral-bg: #d1d5da - --color-diff-neutral-border: #d1d5da - --color-diff-deletion-bg: #d73a49 - --color-diff-deletion-bg-strong: #1b1f23 - --color-diff-deletion-border: #d73a49 - --color-diff-deletion-border-strong: #1b1f23 - --color-diff-addition-bg: #28a745 - --color-diff-addition-bg-strong: #1b1f23 - --color-diff-addition-border: #28a745 - --color-diff-addition-border-strong: #1b1f23 - --color-global-nav-logo: #fff - --color-global-nav-bg: #24292e - --color-global-nav-text: #fff - --color-global-nav-icon: #fff - --color-global-nav-input-bg: #fafbfc - --color-global-nav-input-border: #fafbfc - --color-global-nav-input-icon: #d1d5da - --color-global-nav-input-placeholder: #959da5 - --color-calendar-graph-day-bg: #ebedf0 - --color-calendar-graph-day-border: rgba(27,31,35,0.06) - --color-calendar-graph-day-L1-bg: #9be9a8 - --color-calendar-graph-day-L2-bg: #40c463 - --color-calendar-graph-day-L3-bg: #30a14e - --color-calendar-graph-day-L4-bg: #216e39 - --color-calendar-graph-day-L4-border: rgba(27,31,35,0.06) - --color-calendar-graph-day-L3-border: rgba(27,31,35,0.06) - --color-calendar-graph-day-L2-border: rgba(27,31,35,0.06) - --color-calendar-graph-day-L1-border: rgba(27,31,35,0.06) - --color-calendar-halloween-graph-day-L1-bg: #ffee4a - --color-calendar-halloween-graph-day-L2-bg: #ffc501 - --color-calendar-halloween-graph-day-L3-bg: #fe9600 - --color-calendar-halloween-graph-day-L4-bg: #03001c - --color-footer-invertocat-octicon: #d1d5da - --color-footer-invertocat-octicon-hover: #6a737d - --color-pr-state-draft-text: #fff - --color-pr-state-draft-bg: #6a737d - --color-pr-state-draft-border: transparent - --color-pr-state-open-text: #fff - --color-pr-state-open-bg: #28a745 - --color-pr-state-open-border: transparent - --color-pr-state-merged-text: #fff - --color-pr-state-merged-bg: #6f42c1 - --color-pr-state-merged-border: transparent - --color-pr-state-closed-text: #fff - --color-pr-state-closed-bg: #d73a49 - --color-pr-state-closed-border: transparent - -.ContributionCalendar-day, -.ContributionCalendar-day[data-level="0"] - fill: var(--color-calendar-graph-day-bg) - shape-rendering: geometricPrecision - background-color: var(--color-calendar-graph-day-bg) - shape-rendering: geometricPrecision - border-radius: 2px - outline: 1px solid var(--color-calendar-graph-day-border) - outline-offset: -1px - -.ContributionCalendar-day[data-level="1"] - background-color: var(--color-calendar-graph-day-L1-bg) - outline: 1px solid var(--color-calendar-graph-day-L1-border) - -.ContributionCalendar-day[data-level="2"] - background-color: var(--color-calendar-graph-day-L2-bg) - outline: 1px solid var(--color-calendar-graph-day-L2-border) - -.ContributionCalendar-day[data-level="3"] - background-color: var(--color-calendar-graph-day-L3-bg) - outline: 1px solid var(--color-calendar-graph-day-L3-border) - -.ContributionCalendar-day[data-level="4"] - background-color: var(--color-calendar-graph-day-L4-bg) - outline: 1px solid var(--color-calendar-graph-day-L4-border) - -.ContributionCalendar[data-holiday="halloween"] - &.ContributionCalendar-day[data-level="1"] - background-color: var(--color-calendar-halloween-graph-day-L1-bg) - -.ContributionCalendar[data-holiday="halloween"] - &.ContributionCalendar-day[data-level="2"] - background-color: var(--color-calendar-halloween-graph-day-L2-bg) - -.ContributionCalendar[data-holiday="halloween"] - &.ContributionCalendar-day[data-level="3"] - background-color: var(--color-calendar-halloween-graph-day-L3-bg) - -.ContributionCalendar[data-holiday="halloween"] - &.ContributionCalendar-day[data-level="4"] - background-color: var(--color-calendar-halloween-graph-day-L4-bg) - -.ContributionCalendar-label - font-size: .625rem - -// FBC -.github-grass - overflow-x: auto - -.ContributionCalendar-grid, -.user-grass__image - border-spacing: 3px !important - border-collapse: separate - overflow: hidden - position: relative - color: var(--default-text) - min-width: 707px - transform: scale(.75) - margin: -.8rem -5.5rem -.8rem -5.3rem - thead - tr:first-child - td:first-child - width: .75rem !important - -.ContributionCalendar-label - &:first-child - span - right: 2px - bottom: 0 !important diff --git a/app/javascript/stylesheets/modules/_multiselect.sass b/app/javascript/stylesheets/modules/_multiselect.sass deleted file mode 100644 index 78ec5dc7456..00000000000 --- a/app/javascript/stylesheets/modules/_multiselect.sass +++ /dev/null @@ -1,61 +0,0 @@ -@use "../atoms/a-text-input" as textInput -@use "../config/mixins/border-radius" -@use "../config/mixins/break-points" -@use "../config/mixins/position" - -.multiselect - +position.position(absolute, left 0, top 0, right 0) - -.multiselect.book - +position.position(initial) - -.multiselect__single, -.multiselect__input - +textInput.text-input-base - -.multiselect__single - +position.position(relative, 1) - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - width: 100% - -.multiselect__content-wrapper - overflow-y: scroll - background-color: var(--base) - border: solid 1px var(--border) - +border-radius.border-radius(bottom, .25rem) - -.multiselect--active - overflow-y: hidden !important - -.multiselect__content - display: block !important - -.multiselect__element - +break-points.media-breakpoint-up(md) - font-size: .875rem - +break-points.media-breakpoint-down(sm) - font-size: 1rem - &:not(:first-child) - border-top: solid 1px var(--border) - >span - display: flex - height: 2.75rem - padding-inline: .75rem - align-items: center - cursor: pointer - transition: all .2s ease-out - &:hover - background-color: var(--background-tint) - >span - display: block - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - width: 100% - -.multiselect__option--selected - pointer-events: none - // TODO 変数に - background-color: #fff5db diff --git a/app/javascript/stylesheets/modules/_select2.sass b/app/javascript/stylesheets/modules/_select2.sass deleted file mode 100644 index 9fc0ab6ac1d..00000000000 --- a/app/javascript/stylesheets/modules/_select2.sass +++ /dev/null @@ -1,342 +0,0 @@ -@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(colors.$main, .8) -$select2-results-height: 200px -$select2-selection-choice-border: colors.$main -$select2-selection-choice-background: color.mix(colors.$main, colors.$base, 10%) - -.select2-container - display: inline-block - position: relative - vertical-align: middle - max-width: 100% - .form-item & - width: 100% !important - -.select2-selection - cursor: pointer - display: block - min-height: $select2-height - -.select2-selection__rendered - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - +text.text-block($select2-font-size 1) - -.select2-search - line-height: 28px - +break-points.media-breakpoint-down(sm) - flex: 0 0 100% - -// single - -.select2-selection--single - height: $select2-height - user-select: none - -webkit-user-select: none - -.select2-selection--single .select2-selection__rendered - display: block - padding-left: 1em - padding-right: 2em - -.select2-selection--single .select2-selection__clear - position: relative - -.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered - padding-right: 1em - padding-left: 2em - -// multiple - -.select2-selection--multiple - user-select: none - -webkit-user-select: none - -.select2-selection--multiple .select2-selection__rendered - display: inline-block - padding-left: 8px - -.select2-search--inline .select2-search__field - border: none - font-size: 100% - margin-top: 5px - padding: 0 - -.select2-search--inline .select2-search__field::-webkit-search-cancel-button - -webkit-appearance: none - -.select2-dropdown - background-color: white - border: 1px solid $select2-border-color - border-radius: 4px - display: block - position: absolute - left: -100000px - width: 100% - z-index: 1051 - -.select2-results__option - +text.text-block($select2-font-size 1.5) - padding: 6px - user-select: none - -webkit-user-select: none - transition: all .1s ease-out - &:not(:last-child) - border-bottom: dashed 1px $select2-option-border-color - -.select2-results__option[aria-selected] - cursor: pointer - -.select2-results__message - text-align: center - -.select2-container--open .select2-dropdown - left: 0 - -.select2-container--open .select2-dropdown--above - border-bottom: none - border-bottom-left-radius: 0 - border-bottom-right-radius: 0 - -.select2-container--open .select2-dropdown--below - border-top: none - border-top-left-radius: 0 - border-top-right-radius: 0 - -.select2-search--dropdown - display: block - padding: .5rem - border-bottom: solid 1px $select2-border-color - -.select2-search--dropdown .select2-search__field - padding: 4px - width: 100% - -.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button - -webkit-appearance: none - -.select2-search--dropdown.select2-search--hide - display: none - -.select2-close-mask - display: block - position: fixed - left: 0 - top: 0 - min-height: 100% - min-width: 100% - height: auto - width: auto - opacity: 0 - z-index: 99 - background-color: #fff - filter: alpha(opacity = 0) - -.select2-hidden-accessible - border: 0 !important - clip: rect(0 0 0 0) !important - -webkit-clip-path: inset(50%) !important - clip-path: inset(50%) !important - height: 1px !important - overflow: hidden !important - padding: 0 !important - position: absolute !important - width: 1px !important - white-space: nowrap !important - -.select2-container--default .select2-selection--single - background-color: #fff - border: 1px solid $select2-border-color - border-radius: 4px - outline: 0 - -.select2-container--default .select2-selection--single .select2-selection__rendered - color: #444 - line-height: $select2-height - -.select2-container--default .select2-selection--single .select2-selection__clear - cursor: pointer - float: right - font-weight: bold - -.select2-container--default .select2-selection--single .select2-selection__placeholder - color: #999 - -.select2-container--default .select2-selection--single .select2-selection__arrow - height: $select2-height - +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.size(0) - margin-left: -4px - margin-top: -2px - +position.position(absolute, left 50%, top 50%) - -.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear - float: left - -.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow - left: 1px - right: auto - -.select2-container--default.select2-container--disabled .select2-selection--single - background-color: #eee - cursor: default - -.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear - display: none - -.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b - border-color: transparent transparent #888 transparent - border-width: 0 4px 5px 4px - -.select2-container--default .select2-selection--multiple - background-color: white - border: 1px solid $select2-border-color - border-radius: 4px - cursor: text - -.select2-container--default .select2-selection--multiple .select2-selection__rendered - padding: .125rem .5rem - width: 100% - display: flex - flex-wrap: wrap - margin: 0 -.25rem - -.select2-container--default .select2-selection--multiple .select2-selection__placeholder - color: #999 - margin-top: 5px - -.select2-container--default .select2-selection--multiple .select2-selection__clear - cursor: pointer - float: right - font-weight: bold - margin-top: 5px - margin-right: 10px - -.select2-container--default .select2-selection--multiple .select2-selection__choice - background-color: $select2-selection-choice-background - border: 1px solid $select2-selection-choice-border - color: $select2-selection-choice-border - border-radius: 4px - cursor: default - margin: .125rem .25rem - padding-right: .5rem - display: flex - align-items: center - height: 1.75rem - max-width: 100% - overflow: hidden - -.select2-container--default .select2-selection--multiple .select2-selection__choice__remove - cursor: pointer - align-items: center - justify-content: center - +size.size(1.5rem 100%) - flex: 0 0 1.5rem - margin-right: .5rem - +text.text-block(1.125rem, 700 flex) - color: var(--reversal-text) - background-color: $select2-selection-choice-border - &:hover - 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 - -.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice - margin-inline: 5px auto - -.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove - margin-inline: 2px auto - -.select2-container--default.select2-container--focus .select2-selection--multiple - outline: 0 - -.select2-container--default.select2-container--disabled .select2-selection--multiple - background-color: #eee - cursor: default - -.select2-container--default.select2-container--disabled .select2-selection__choice__remove - display: none - -.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple - border-top-left-radius: 0 - border-top-right-radius: 0 - -.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple - border-bottom-left-radius: 0 - border-bottom-right-radius: 0 - -.select2-container--default .select2-search--dropdown .select2-search__field - border: 1px solid $select2-border-color - -.select2-container--default .select2-search--inline .select2-search__field - background: transparent - border: none - outline: 0 - box-shadow: none - -webkit-appearance: textfield - -.select2-container--default .select2-results > .select2-results__options - max-height: $select2-results-height - overflow-y: auto - -.select2-container--default .select2-results__option[role=group] - padding: 0 - -.select2-container--default .select2-results__option[aria-disabled=true] - color: #999 - -.select2-container--default .select2-results__option[aria-selected=true] - background-color: var(--background-shade) - -.select2-container--default .select2-results__option .select2-results__option - padding-left: 1em - -.select2-container--default .select2-results__option .select2-results__option .select2-results__group - padding-left: 0 - -.select2-container--default .select2-results__option .select2-results__option .select2-results__option - margin-left: -1em - padding-left: 2em - -.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option - margin-left: -2em - padding-left: 3em - -.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option - margin-left: -3em - padding-left: 4em - -.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option - margin-left: -4em - padding-left: 5em - -.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option - margin-left: -5em - padding-left: 6em - -.select2-container--default .select2-results__option--highlighted[aria-selected] - background-color: $select2-highlighted-color - color: var(--reversal-text) - -.select2-container--default .select2-results__group - cursor: default - display: block - padding: 6px diff --git a/app/javascript/stylesheets/modules/_stripe.sass b/app/javascript/stylesheets/modules/_stripe.sass deleted file mode 100644 index a950b5a99f5..00000000000 --- a/app/javascript/stylesheets/modules/_stripe.sass +++ /dev/null @@ -1,23 +0,0 @@ -@use "../config/mixins/text" - -.StripeElement - background-color: var(--base) - height: 40px - padding: 10px 12px - border-radius: .25rem - box-shadow: 0 1px 3px 0 #e6ebf1 - transition: box-shadow 150ms ease - -.StripeElement--focus - box-shadow: 0 1px 3px 0 #cfd7df - -.StripeElement--invalid - border-color: var(--danger) - -.StripeElement--webkit-autofill - background-color: #fefde5 !important - -#card-errors - color: var(--danger) - +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 deleted file mode 100644 index 1af0a8463c4..00000000000 --- a/app/javascript/stylesheets/modules/_tagify.sass +++ /dev/null @@ -1,23 +0,0 @@ -@use "../atoms/a-text-input" as textInput - -body - .tagify - +textInput.text-input-base - display: flex !important - align-items: center - padding: .5rem - gap: .5rem - --tag-bg: var(--background-semi-shade) - --tag-inset-shadow-size: 2em - --tag-text-color: var(--default-text) - --tag-text-color--edit: var(--default-text) - --tag-hover: var(--success-tint) - --tag-invalid-color: var(--danger-text) - --tag-invalid-bg: var(--danger-tint) - --tag-remove-bg: var(--danger-tint) - --tag-remove-btn-color: var(--muted-text) - --tag-remove-btn-bg--hover: var(--danger) - - .tagify__input, - .tagify__tag - margin: 0 diff --git a/app/javascript/stylesheets/modules/_toasts.sass b/app/javascript/stylesheets/modules/_toasts.sass deleted file mode 100644 index 445d4489575..00000000000 --- a/app/javascript/stylesheets/modules/_toasts.sass +++ /dev/null @@ -1,261 +0,0 @@ -@use "../config/variables/colors" - -$swal2-white: #fff !default -$swal2-black: #000 !default -$swal2-outline-color: rgba(100, 150, 200, 0.5) !default - -// ICONS -$swal2-icon-size: 5em !default -$swal2-icon-animations: true !default -$swal2-icon-margin: 2.5em auto 0.6em !default -$swal2-icon-font-family: inherit !default -$swal2-icon-font-size: 3.75em !default -$swal2-icon-border-color: #000 !default -$swal2-icon-zoom: null !default -$swal2-success: #a5dc86 !default -$swal2-success-border: rgba($swal2-success, 0.3) !default -$swal2-error: #f27474 !default -$swal2-warning: #f8bb86 !default -$swal2-info: #3fc3ee !default -$swal2-question: #87adbd !default - -// BACKGROUND -$swal2-background: $swal2-white !default - -// TIMER POGRESS BAR -$swal2-timer-progress-bar-height: 0.25em -$swal2-timer-progress-bar-background: rgba($swal2-black, 0.2) !default - -// TOASTS -$swal2-toast-show-animation: swal2-toast-show 0.5s !default -$swal2-toast-hide-animation: swal2-toast-hide 0.1s forwards !default -$swal2-toast-border: none !default - -//$swal2-toast-box-shadow: 0 0 .625em #d9d9d9 !default; -$swal2-toast-box-shadow: none -$swal2-toast-background: $swal2-white !default -$swal2-toast-close-button-width: 0.8em !default -$swal2-toast-close-button-height: 0.8em !default -$swal2-toast-close-button-margin: 0 !default -$swal2-toast-close-button-font-size: 2em !default -$swal2-toast-width: 360px !default -$swal2-toast-padding: 1em !default - -//$swal2-toast-title-margin: 1em !default; -$swal2-toast-title-margin: 0 -$swal2-toast-title-padding: 0 !default - -//$swal2-toast-title-font-size: 1em !default; -$swal2-toast-title-font-size: 0.875rem -$swal2-toast-icon-font-size: 1.8em !default -$swal2-toast-html-container-margin: 1em !default -$swal2-toast-html-container-padding: 0 !default -$swal2-toast-html-container-font-size: 1em !default -$swal2-toast-input-height: 2em !default -$swal2-toast-input-margin: 0.5em !default -$swal2-toast-input-font-size: 1em !default -$swal2-toast-validation-font-size: 1em !default -$swal2-toast-buttons-font-size: 1em !default -$swal2-toast-button-focus-box-shadow: 0 0 0 1px $swal2-background, 0 0 0 3px $swal2-outline-color !default -$swal2-toast-footer-margin: 0.5em 0 0 !default -$swal2-toast-footer-padding: 0.5em 0 0 !default -$swal2-toast-footer-font-size: 0.8em !default - -@keyframes swal2-toast-show - 0% - transform: translateY(0) rotateZ(0deg) - opacity: 0 - - 33% - transform: translateY(0) rotateZ(0deg) - - 66% - transform: translateY(0) rotateZ(0deg) - - 100% - transform: translateY(0) rotateZ(0deg) - opacity: 1 - -@keyframes swal2-toast-hide - 100% - transform: rotateZ(0deg) - opacity: 0 - -.swal2-popup - &.swal2-toast - box-sizing: border-box - grid-column: 1/4 !important - grid-row: 1/4 !important - grid-template-columns: 1fr 99fr 1fr - padding: $swal2-toast-padding - overflow-y: hidden - background: rgba(colors.$success, 0.9) - box-shadow: $swal2-toast-box-shadow - //pointer-events: all; - pointer-events: none - > * - grid-column: 2 - .swal2-title - margin: $swal2-toast-title-margin - padding: $swal2-toast-title-padding - font-size: $swal2-toast-title-font-size - text-align: initial - // color - color: var(--reversal-text) - - .swal2-loading - justify-content: center - - .swal2-input - height: $swal2-toast-input-height - margin: $swal2-toast-input-margin - font-size: $swal2-toast-input-font-size - - .swal2-validation-message - font-size: $swal2-toast-validation-font-size - - .swal2-footer - margin: $swal2-toast-footer-margin - padding: $swal2-toast-footer-margin - font-size: $swal2-toast-footer-font-size - - .swal2-close - grid-column: 3/3 - grid-row: 1/99 - align-self: center - width: $swal2-toast-close-button-width - height: $swal2-toast-close-button-height - margin: $swal2-toast-close-button-margin - font-size: $swal2-toast-close-button-font-size - - .swal2-html-container - margin: $swal2-toast-html-container-margin - padding: $swal2-toast-html-container-padding - font-size: $swal2-toast-html-container-font-size - text-align: initial - &:empty - padding: 0 - - .swal2-loader - grid-column: 1 - grid-row: 1/99 - align-self: center - width: 2em - height: 2em - margin: .25em - - .swal2-icon - grid-column: 1 - grid-row: 1/99 - align-self: center - width: 2em - min-width: 2em - height: 2em - margin: 0 .5em 0 0 - - .swal2-icon-content - display: flex - align-items: center - font-size: $swal2-toast-icon-font-size - font-weight: bold - - &.swal2-success - .swal2-success-ring - width: 2em - height: 2em - - &.swal2-error - [class^='swal2-x-mark-line'] - top: .875em - width: 1.375em - - &[class$='left'] - left: .3125em - - &[class$='right'] - right: .3125em - - .swal2-actions - justify-content: flex-start - height: auto - margin: 0 - margin-top: .3125em - padding: 0 - - .swal2-styled - margin: .25em .5em - padding: .4em .6em - font-size: $swal2-toast-buttons-font-size - - &:focus - box-shadow: $swal2-toast-button-focus-box-shadow - - .swal2-success - border-color: $swal2-success - - [class^='swal2-success-circular-line'] - // Emulate moving circular line - position: absolute - width: 1.6em - height: 3em - transform: rotate(45deg) - border-radius: 50% - - &[class$='left'] - top: -.8em - left: -.5em - transform: rotate(-45deg) - transform-origin: 2em 2em - border-radius: 4em 0 0 4em - - &[class$='right'] - top: -.25em - left: .9375em - transform-origin: 0 1.5em - border-radius: 0 4em 4em 0 - - .swal2-success-ring - width: 2em - height: 2em - - .swal2-success-fix - top: 0 - left: .4375em - width: .4375em - height: 2.6875em - - [class^='swal2-success-line'] - height: .3125em - - &[class$='tip'] - top: 1.125em - left: .1875em - width: .75em - - &[class$='long'] - top: .9375em - right: .1875em - width: 1.375em - - &.swal2-icon-show - @if $swal2-icon-animations - .swal2-success-line-tip - animation: swal2-toast-animate-success-line-tip .75s - - .swal2-success-line-long - animation: swal2-toast-animate-success-line-long .75s - - &.swal2-show - animation: $swal2-toast-show-animation - body.is-text & - animation: none - - &.swal2-hide - animation: $swal2-toast-hide-animation - body.is-text & - animation: none - - &.is-success - background: rgba(colors.$success, .9) - &.is-error - background: rgba(colors.$danger, .9) diff --git a/app/javascript/stylesheets/not-logged-in.sass b/app/javascript/stylesheets/not-logged-in.sass deleted file mode 100644 index d596c5e08bd..00000000000 --- a/app/javascript/stylesheets/not-logged-in.sass +++ /dev/null @@ -1,10 +0,0 @@ -@charset "UTF-8" - -@use "common-imports" - -@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 deleted file mode 100644 index 694a604dc5c..00000000000 --- a/app/javascript/stylesheets/not-logged-in/_completion.sass +++ /dev/null @@ -1,24 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/text" - -.completion - padding-block: 4rem 2rem - -.completion__title - +text.text-block(1em 1.4, 800 center) - color: var(--reversal-text) - font-family: var(--sans-serif) - +break-points.media-breakpoint-up(md) - font-size: 2rem - +break-points.media-breakpoint-down(sm) - font-size: 1.5rem - -.completion__body - margin-top: 3rem - -.completion__image - border-radius: 1rem - +break-points.media-breakpoint-up(md) - border: solid .75rem var(--completion-dark) - +break-points.media-breakpoint-down(sm) - border: solid .5rem var(--completion-dark) diff --git a/app/javascript/stylesheets/not-logged-in/_join-us-nav.sass b/app/javascript/stylesheets/not-logged-in/_join-us-nav.sass deleted file mode 100644 index 847925a5f21..00000000000 --- a/app/javascript/stylesheets/not-logged-in/_join-us-nav.sass +++ /dev/null @@ -1,17 +0,0 @@ -.join-us-nav__items - display: flex - flex-direction: column - align-items: center - justify-content: center - gap: 1rem - -.join-us-nav__item - width: 100% - display: flex - justify-content: center - &.is-main - .join-us-nav__item-link - width: 22.5rem - max-width: 100% - &.is-sub - text-align: center 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 deleted file mode 100644 index f9490be9852..00000000000 --- a/app/javascript/stylesheets/not-logged-in/_not-logged-in-wrapper.sass +++ /dev/null @@ -1,35 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/position" -@use "../config/mixins/size" - -.not-logged-in-wrapper - min-height: 100vh - display: flex - flex-direction: column - &::before - content: '' - background-image: url(https://bootcamp.fjord.jp/images/background/background.svg) - background-repeat: repeat - +position.position(fixed, left 0, top 0, right 0, bottom 0, 1) - +size.size(100%) - opacity: .075 - +break-points.media-breakpoint-up(md) - background-size: 22rem auto - +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.position(fixed, left 0, top 0, right 0, bottom 0, 1) - +size.size(100%) - opacity: .075 - +break-points.media-breakpoint-up(md) - background-size: 16rem auto - -.not-logged-in-wrapper__start - flex: 1 - +position.position(relative, 2) - -.not-logged-in-wrapper__end - +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 deleted file mode 100644 index 4c572efb3e6..00000000000 --- a/app/javascript/stylesheets/not-logged-in/_unauthorized-header.sass +++ /dev/null @@ -1,33 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/text" - -.unauthorized-header__image - display: block - margin-inline: auto - +break-points.media-breakpoint-up(md) - max-width: 6rem - margin-bottom: .75rem - +break-points.media-breakpoint-down(sm) - max-width: 4.5rem - margin-bottom: .5rem - -.unauthorized-header__titles - color: var(--reversal-text) - font-family: var(--sans-serif) - text-align: center - -.unauthorized-header__title-label - display: block - font-weight: 700 - +break-points.media-breakpoint-up(md) - font-size: 1.25rem - +break-points.media-breakpoint-down(sm) - font-size: .875rem - -.unauthorized-header__title - +text.text-block(1em 1.4, 800) - margin-top: .25em - +break-points.media-breakpoint-up(md) - font-size: 2rem - +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 deleted file mode 100644 index 3f413c555bd..00000000000 --- a/app/javascript/stylesheets/not-logged-in/_unauthorized.sass +++ /dev/null @@ -1,51 +0,0 @@ -@use "../config/mixins/break-points" -@use "../config/mixins/text" - -.unauthorized - +break-points.media-breakpoint-up(md) - padding-block: 3rem 2rem - +break-points.media-breakpoint-down(sm) - padding-block: 2rem - -.unauthorized__body - +break-points.media-breakpoint-up(md) - margin-top: 3rem - +break-points.media-breakpoint-down(sm) - margin-top: 2rem - -.unauthorized__contents - background-color: rgba(black, 30%) - border-radius: .25rem - -.unauthorized__content - color: var(--reversal-text) - +break-points.media-breakpoint-up(md) - padding: 1.5rem - +break-points.media-breakpoint-down(sm) - padding: 1rem - & + .unauthorized__content - padding-top: 0 - -.unauthorized__content-separalor - border-top: dashed 1px rgb(white, 10%) - -.must-be-enrolled - +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 - justify-content: center - gap: 1.5rem - .unauthorized-actions.is-vertical & - flex-direction: column - align-items: center - -.unauthorized-actions__item - flex: 1 - max-width: 50% - text-align: center - .unauthorized-actions.is-vertical & - width: 100% diff --git a/app/javascript/stylesheets/not-logged-in/base/_base.sass b/app/javascript/stylesheets/not-logged-in/base/_base.sass deleted file mode 100644 index 23ce2f09356..00000000000 --- a/app/javascript/stylesheets/not-logged-in/base/_base.sass +++ /dev/null @@ -1,11 +0,0 @@ -@use "../../config/variables/fonts" - -html - font-family: fonts.$sans-serif - color: var(--default-text) - -body.is-not-logged-in - background-color: var(--main) - -body.is-completion - background-color: var(--completion) diff --git a/app/javascript/stylesheets/paper.sass b/app/javascript/stylesheets/paper.sass deleted file mode 100644 index a578ca89639..00000000000 --- a/app/javascript/stylesheets/paper.sass +++ /dev/null @@ -1,16 +0,0 @@ -.book-name - font-size: 2.3em - text-align: center - margin: 9em 0 10em 0 - -.book-company_name - font-size: 1.5em - text-align: center - -.book-updated - font-size: 1.5em - text-align: center - margin-bottom: 8em - -img - max-width: 90% diff --git a/app/javascript/stylesheets/shared/blocks/_code-toolbar.scss b/app/javascript/stylesheets/shared/blocks/_code-toolbar.scss deleted file mode 100644 index 756173cdeef..00000000000 --- a/app/javascript/stylesheets/shared/blocks/_code-toolbar.scss +++ /dev/null @@ -1,59 +0,0 @@ -@use "../../config/mixins/border-radius"; - -pre.code-toolbar { - position: relative; -} - -pre.code-toolbar > .toolbar { - position: absolute; - top: calc(-1rem + 1px); - right: 0; - transition: opacity 0.3s ease-in-out; -} - -pre.code-toolbar > .toolbar .toolbar-item { - display: inline-block; -} - -pre.code-toolbar > .toolbar .toolbar-item:last-child * { - border-left: none; -} - -pre.code-toolbar > .toolbar a { - cursor: pointer; -} - -pre.code-toolbar > .toolbar button { - background: none; - border: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - padding: 0; - -webkit-user-select: none; /* for button */ - -moz-user-select: none; - -ms-user-select: none; -} - -pre.code-toolbar > .toolbar a, -pre.code-toolbar > .toolbar button, -pre.code-toolbar > .toolbar span { - font-size: .625rem; - height: 1rem; - display: flex; - align-items: center; - justify-content: center; - padding: 0 .5em; - background-color: #322931; - @include border-radius.border-radius(top, .125rem); - text-decoration: none; -} - -:not(pre) > code[class*="language-"] { - padding: .2em; - padding-top: 1px; - padding-bottom: 1px; - background: #f8f8f8; - border: 1px solid #dddddd; -} diff --git a/app/javascript/stylesheets/shared/blocks/_errors.sass b/app/javascript/stylesheets/shared/blocks/_errors.sass deleted file mode 100644 index f23717857a8..00000000000 --- a/app/javascript/stylesheets/shared/blocks/_errors.sass +++ /dev/null @@ -1,28 +0,0 @@ -@use "../../config/mixins/break-points" -@use "../../config/mixins/text" - -.errors - background-color: var(--danger-tint) - border: solid 1px var(--danger) - margin-bottom: 1.25rem - max-width: 30rem - margin-inline: auto - border-radius: .25rem - +break-points.media-breakpoint-up(md) - padding: 1rem 1.5rem - +break-points.media-breakpoint-down(sm) - padding: .875rem 1rem - -.errors__title - +text.text-block(.875rem 1.45 0 .8em, center 600) - color: var(--danger-text) - +break-points.media-breakpoint-down(sm) - font-size: .8125rem - -.errors__item - +text.text-block(.8125rem 1.6 0 .2em) - color: var(--danger-text) - +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 deleted file mode 100644 index 2f757f0715b..00000000000 --- a/app/javascript/stylesheets/shared/blocks/_flash.sass +++ /dev/null @@ -1,49 +0,0 @@ -@use "../../config/mixins/link" -@use "../../config/mixins/position" -@use "../../config/mixins/size" -@use "../../config/mixins/text" - -.flash - background-color: var(--danger) - padding-block: .75rem - &.is-alert - background-color: var(--danger) - &.is-notice - background-color: var(--success) - input:checked + & - display: none - -.flash__container - +position.position(relative) - -.flash__message - +text.text-block(.875rem 1.4, center) - color: var(--reversal-text) - a - +link.hover-link-reversal - color: var(--reversal-text) - -.flash__close - +position.position(absolute, right 0, top 50%) - display: flex - justify-content: center - align-items: center - +size.size(2.75rem) - transform: translate(0, -50%) - cursor: pointer - opacity: .7 - transition: all .2s ease-out - &::before, - &::after - content: "" - display: block - +size.size(50% 2px) - background-color: var(--reversal-text) - +position.position(absolute, left 50%, top 50%) - border-radius: 2px - &::before - transform: translate(-50%, -50%) rotate(45deg) - &::after - transform: translate(-50%, -50%) rotate(-45deg) - &:hover - opacity: 1 diff --git a/app/javascript/stylesheets/shared/blocks/_footprints.sass b/app/javascript/stylesheets/shared/blocks/_footprints.sass deleted file mode 100644 index 09b898de076..00000000000 --- a/app/javascript/stylesheets/shared/blocks/_footprints.sass +++ /dev/null @@ -1,41 +0,0 @@ -@use "../../config/mixins/break-points" -@use "../../config/mixins/link" -@use "../../config/mixins/text" - -.user-icons, -.user-icons__wrapper - margin-top: 1.5rem - +break-points.media-breakpoint-up(md) - display: flex - gap: .75rem - -.user-icons__title - +break-points.media-breakpoint-up(md) - text-align: right - +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 - +break-points.media-breakpoint-down(sm) - margin-top: .75rem - -.user-icons-item - display: flex - align-items: center - gap: .25rem - -.user-icons-item__delete - +text.text-block(.75rem 1.4) - -.user-icons__more - +text.text-block(.8125rem 1.4, block nowrap) - color: var(--main) - +link.hover-link-reversal - +break-points.media-breakpoint-up(md) - align-self: center - +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 deleted file mode 100644 index e0ef90076d8..00000000000 --- a/app/javascript/stylesheets/shared/blocks/_global-nav.sass +++ /dev/null @@ -1,72 +0,0 @@ -@use "../../config/mixins/break-points" -@use "../../config/mixins/link" -@use "../../config/mixins/position" -@use "../../config/mixins/size" -@use "../../config/mixins/text" - -.global-nav - +break-points.media-breakpoint-down(sm) - background-color: transparent - -.global-nav__background.a-overlay - background-color: rgba(black, .6) - width: 0 - display: inline - input:checked + .global-nav & - opacity: 1 - width: 100% - display: block - -.global-nav__inner - +break-points.media-breakpoint-up(md) - background-color: var(--main) - +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 - +link.flex-link - white-space: nowrap - align-items: center - justify-content: center - border-bottom: solid 1px var(--main-semi-shade) - color: var(--reversal-text) - transition: color .2s ease-in, background-color .2s ease-in - width: 100% - +break-points.media-breakpoint-up(md) - flex-direction: column - height: 4.125rem - gap: .25rem - +break-points.media-breakpoint-down(sm) - flex-direction: row - height: 2.75rem - padding-inline: 1rem - justify-content: flex-start - &:hover - background-color: var(--main-shade) - &.is-active - background-color: var(--accent) - color: var(--main) - -.global-nav-links__link-icon - +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.text-block(.625rem 1.2, center) - +break-points.media-breakpoint-down(sm) - font-size: .875rem - +break-points.media-breakpoint-up(md) - &.is-sm - transform: scale(.875) - margin-top: -.125rem - line-height: 1.2 - -.global-nav__item-count - +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 deleted file mode 100644 index bbe64e80b64..00000000000 --- a/app/javascript/stylesheets/shared/blocks/_hour-filter.sass +++ /dev/null @@ -1,115 +0,0 @@ -@use "../../config/mixins/link" -@use "../../config/mixins/text" - -.activity-time-filter - padding-block: .875rem - border-bottom: solid 1px var(--border) - -.activity-time-filter__form - width: 100% - -.activity-time-filter__controls - display: flex - gap: 1rem - align-items: center - flex-wrap: wrap - -.dropdown-group - display: flex - gap: .5rem - align-items: center - -.dropdown-wrapper - position: relative - display: inline-block - -.dropdown-button - +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 - transition: all .2s ease-out - padding: .5rem 1rem - background-color: var(--background) - cursor: pointer - display: flex - align-items: center - gap: .5rem - min-width: 8rem - &:hover - background-color: var(--background-semi-shade) - &:focus - outline: none - box-shadow: 0 0 0 2px var(--main-alpha) - -.dropdown-button__text - flex: 1 - -.dropdown-button__icon - font-size: .75rem - transition: transform .2s ease-out - -.dropdown-menu - position: absolute - top: 100% - left: 0 - z-index: 1000 - background-color: var(--background) - border: solid 1px var(--border-shade) - border-radius: .5rem - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) - min-width: 100% - max-height: 200px - overflow-y: auto - opacity: 0 - visibility: hidden - transform: translateY(-10px) - transition: all .2s ease-out - &.is-open - opacity: 1 - visibility: visible - transform: translateY(0) - .dropdown-button__icon - transform: rotate(180deg) - -.dropdown-item - padding: .5rem 1rem - cursor: pointer - transition: background-color .2s ease-out - +text.text-block(.75rem 1.5, left nowrap) - &:hover - background-color: var(--background-semi-shade) - &:first-child - border-radius: .5rem .5rem 0 0 - &:last-child - border-radius: 0 0 .5rem .5rem - -.search-button - +link.block-link - +text.text-block(.75rem 2.3, center nowrap) - background-color: var(--main) - border: solid 1px var(--main) - color: var(--reversal-text) - border-radius: 20rem - transition: all .2s ease-out - padding: .5rem 1.5rem - cursor: pointer - display: flex - align-items: center - gap: .5rem - &:hover - background-color: var(--main-shade) - border-color: var(--main-shade) - &:focus - outline: none - box-shadow: 0 0 0 2px var(--main-alpha) - -// レスポンシブ対応 -@media (max-width: 768px) - .activity-time-filter__controls - flex-direction: column - gap: .75rem - - .dropdown-button - width: 100% diff --git a/app/javascript/stylesheets/shared/blocks/_modal.sass b/app/javascript/stylesheets/shared/blocks/_modal.sass deleted file mode 100644 index 26da945c181..00000000000 --- a/app/javascript/stylesheets/shared/blocks/_modal.sass +++ /dev/null @@ -1,95 +0,0 @@ -@use "../../config/mixins/break-points" -@use "../../config/mixins/position" -@use "../../config/mixins/size" - -.modal - display: none - +position.position(fixed, left 0, top 0, right 0, bottom 0, 100) - padding: 1rem - input:checked + &, - &.is-shown - display: block - -.modal__overlay - +position.position(fixed, left 0, top 0, right 0, bottom 0) - background-color: rgba(black, .8) - -.modal__description - &.is-md - font-size: .875rem - .modal__description + & - margin-top: 1.25em - padding-top: 1.25em - border-top: dashed 1px var(--border) - -.modal-header - display: flex - align-items: center - justify-content: space-between - border-bottom: solid 1px var(--border-tint) - +break-points.media-breakpoint-up(md) - padding: .25rem 1.5rem - +break-points.media-breakpoint-down(sm) - padding: .25rem 1rem - -.modal-header__close - display: flex - align-items: center - justify-content: center - +size.size(2.75rem) - cursor: pointer - opacity: .4 - transition: all .2s ease-out - position: relative - +break-points.media-breakpoint-up(md) - margin-right: -1.5rem - +break-points.media-breakpoint-down(sm) - margin-right: -1rem - &::before, - &::after - content: "" - display: block - +size.size(40% 2px) - background-color: var(--default-text) - +position.position(absolute, left 50%, top 50%) - border-radius: 2px - &::before - transform: translate(-50%, -50%) rotate(45deg) - &::after - transform: translate(-50%, -50%) rotate(-45deg) - &:hover - opacity: 1 - -.modal-content - +position.position(absolute, left 50%, top 50%, 1) - transform: translate(-50%, -50%) - background-color: var(--base) - border-radius: .25rem - width: 40rem - max-width: calc(100% - 2rem) - &.is-sm - width: 24rem - > *:last-child - border-bottom: none - -.modal-body - max-height: calc(100vh - 11.5rem) - overflow: auto - border-bottom: solid 1px var(--border-tint) - +break-points.media-breakpoint-up(md) - padding: 1rem 1.5rem - +break-points.media-breakpoint-down(sm) - padding: 1rem - -.modal-title - font-weight: 600 - +break-points.media-breakpoint-up(md) - font-size: 1.25rem - +break-points.media-breakpoint-down(sm) - font-size: 1rem - -.modal-footer - +break-points.media-breakpoint-up(md) - padding: .25rem 1.5rem - +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 deleted file mode 100644 index 23a7c1352f5..00000000000 --- a/app/javascript/stylesheets/shared/blocks/_not-logged-in-footer.sass +++ /dev/null @@ -1,80 +0,0 @@ -@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 - +break-points.media-breakpoint-up(md) - padding-block: 3rem - +break-points.media-breakpoint-down(md) - padding-bottom: 1.5rem - .container - padding-inline: 0 - -.not-logged-in-footer__nav - margin-bottom: 1.5rem - -.not-logged-in-footer__nav-items - +break-points.media-breakpoint-up(lg) - gap: 1rem - justify-content: center - align-items: center - +break-points.media-breakpoint-up(md) - display: flex - flex-wrap: wrap - +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 - +break-points.media-breakpoint-only(md) - flex: 50% 0 0 - border-bottom: solid 1px rgba(colors.$border, 10%) - &:nth-child(odd) - 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.text-block(.875rem 1) - color: var(--reversal-text) - +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.size(100% 2.75rem) - i - font-size: .75em - position: relative - top: -.0625em - i:first-child - margin-right: .375em - body.is-lp & - color: var(--default-text) - -.not-logged-in-footer-copyright - justify-content: center - align-items: center - +text.text-block(.875rem 1.4, flex) - color: var(--reversal-text) - gap: .25rem - body.is-lp & - color: var(--default-text) - -.not-logged-in-footer-copyright__author - display: block - -.not-logged-in-footer-copyright__author-link - +link.hover-link - color: var(--reversal-text) - margin-right: .5em - body.is-lp & - color: var(--default-text) diff --git a/app/javascript/stylesheets/shared/blocks/_o-empty-message.sass b/app/javascript/stylesheets/shared/blocks/_o-empty-message.sass deleted file mode 100644 index 133ed63f4f7..00000000000 --- a/app/javascript/stylesheets/shared/blocks/_o-empty-message.sass +++ /dev/null @@ -1,17 +0,0 @@ -@use "../../config/mixins/text" - -.o-empty-message - max-width: 50rem - margin-inline: auto - text-align: center - color: var(--semi-muted-text) - &:not(:first-child) - margin-top: 1.5rem - -.o-empty-message__icon - +text.text-block(5rem 1) - -.o-empty-message__text - +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 deleted file mode 100644 index 6c292778018..00000000000 --- a/app/javascript/stylesheets/shared/blocks/_page-nav.sass +++ /dev/null @@ -1,118 +0,0 @@ -@use "../../config/mixins/break-points" -@use "../../config/mixins/link" -@use "../../config/mixins/position" -@use "../../config/mixins/text" - -.page-nav - +break-points.media-breakpoint-up(lg) - +position.position(right 0, top 3.5rem) - position: sticky - overflow: hidden - +break-points.media-breakpoint-down(md) - position: static - -.page-nav__title - +text.text-block(.875rem 1.4, 600) - -.page-nav__title-inner - display: block - text-align: center - padding: .5rem .75rem - color: var(--default-text) - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - -a.page-nav__title-inner - text-decoration: none - &:hover - text-decoration: underline - -.page-nav__footer-link - +link.block-link - +text.text-block(.8125rem 1.4) - text-align: right - padding: .5rem .75rem - color: var(--default-text) - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - &:hover - text-decoration: underline - -.page-nav__items - overflow-y: auto - +position.position(relative, 1) - +break-points.media-breakpoint-up(lg) - max-height: calc(100vh - 8.5rem) - +break-points.media-breakpoint-down(md) - max-height: 12rem - -=page-nav-current($background-color, $border-color, $text-color, $pointer-events-none) - +position.position(relative, 1) - box-shadow: 0 0 0 1px $border-color inset - background-color: $background-color - border-bottom: none - .page-nav__item-link - background-color: transparent - color: $text-color - @if $pointer-events-none == true - pointer-events: none - -.page-nav__item - &:not(:last-child) - border-bottom: solid 1px var(--border-tint) - &.is-active - .page-nav__item-link - color: var(--default-text) - font-weight: 700 - &.is-current - +page-nav-current(var(--primary-tint), var(--primary), var(--primary-text), true) - &.is-current:not(:last-child) - margin-bottom: -1px - &.is-current:last-child - border-radius: 0 0 .25rem .25rem - &.is-reply-warning - +page-nav-current(var(--reply-warning-background), var(--reply-warning-border), var(--default-text), false) - &.is-reply-alert - +page-nav-current(var(--reply-alert-background), var(--reply-alert-border), var(--reversal-text), false) - &.is-reply-deadline - +page-nav-current(var(--reply-deadline-background), var(--reply-deadline-border), var(--reversal-text), false) - &.is-inactive - position: static - &:not(:last-child) - border-bottom: solid 1px var(--border) - .page-nav__item-link - background-color: var(--background) - color: var(--muted-text) - pointer-events: none - -.page-nav__item-link - padding: .75rem - +text.text-block(.8125rem 1.4) - color: var(--semi-muted-text) - +link.block-link - transition: all .1s ease-in - background-color: transparent - &:hover - color: var(--primary-text) - text-decoration: underline - -.page-nav__item-header .a-badge - transform: translateY(-.125em) - margin-right: .25rem - -.page-nav__item-title - +text.text-block(.875rem 1.4, 600 inline) - -.page-nav-metas - margin-top: .25rem - font-size: .75rem - display: flex - flex-wrap: wrap - gap: .25rem .75rem - -.page-nav__item-link-inner - +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 deleted file mode 100644 index 512fd4d7506..00000000000 --- a/app/javascript/stylesheets/shared/blocks/_page-search.sass +++ /dev/null @@ -1,26 +0,0 @@ -@use "../../config/mixins/border-radius" - -.page-search - padding-block: .75rem - border-top: solid 1px var(--border-shade) - border-bottom: solid 1px var(--border-shade) - .page-tabs + & - padding-block: 0 - -.page-search__form - width: 30rem - max-width: 100% - margin-inline: auto - display: flex - height: 100% - align-items: center - padding-right: .75rem - -.page-search__text-input - height: 2rem - +border-radius.border-radius(right, 0) - border-right: none - -.is-icon.page-search__submit - height: 2rem - +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 deleted file mode 100644 index be7531bbb6e..00000000000 --- a/app/javascript/stylesheets/shared/blocks/_page-tags-nav.sass +++ /dev/null @@ -1,25 +0,0 @@ -@use "../../config/mixins/link" -@use "../../config/mixins/text" - -.page-tags-nav - padding: .5rem .75rem - -.page-tags-nav__items - display: flex - flex-wrap: wrap - gap: .25rem - -.page-tags-nav__item-link - padding: .3125rem .5rem - border-radius: 1.5em - +text.text-block(.625rem 1.4, nowrap) - color: var(--main) - max-width: 8.5rem - overflow: hidden - text-overflow: ellipsis - border: solid 1px var(--main) - +link.block-link - transition: all .1s ease-in - background-color: transparent - &:hover - background-color: var(--main-tint) diff --git a/app/javascript/stylesheets/shared/blocks/_pagination.sass b/app/javascript/stylesheets/shared/blocks/_pagination.sass deleted file mode 100644 index daba1668b3f..00000000000 --- a/app/javascript/stylesheets/shared/blocks/_pagination.sass +++ /dev/null @@ -1,52 +0,0 @@ -@use "../../config/mixins/break-points" -@use "../../config/mixins/link" -@use "../../config/mixins/position" -@use "../../config/mixins/size" -@use "../../config/mixins/text" - -.pagination - +position.position(relative, 1) - &:first-child - +break-points.media-breakpoint-up(md) - margin-bottom: 1.5rem - +break-points.media-breakpoint-down(sm) - margin-bottom: .75rem - &:not(:first-child) - +break-points.media-breakpoint-up(md) - margin-top: 1.5rem - +break-points.media-breakpoint-down(sm) - margin-top: .75rem - -.pagination__items - display: flex - flex-wrap: wrap - justify-content: center - gap: .25rem - overflow-x: auto - -.pagination__item - &.is-disabled - opacity: .4 - pointer-events: none - -.pagination__item-link - +size.size(2.5rem) - border-radius: 50% - outline: none - +text.text-block(.875rem 1) - color: var(--muted-text) - +link.flex-link - justify-content: center - align-items: center - transition: all .2s ease-in - &:hover - background-color: rgba(black, .1) - &.is-active - background-color: var(--main) - color: var(--reversal-text) - .pagination__item.is-active & - background-color: var(--main) - color: var(--reversal-text) - &.is-disabled - opacity: .4 - pointer-events: none diff --git a/app/javascript/stylesheets/shared/blocks/_pill-nav.sass b/app/javascript/stylesheets/shared/blocks/_pill-nav.sass deleted file mode 100644 index 73a3ceb6c96..00000000000 --- a/app/javascript/stylesheets/shared/blocks/_pill-nav.sass +++ /dev/null @@ -1,44 +0,0 @@ -@use "../../config/mixins/border-radius" -@use "../../config/mixins/link" -@use "../../config/mixins/text" - -.pill-nav - &:not(:first-child) - padding-top: 1.25rem - -.pill-nav__items - display: flex - overflow-x: auto - overflow-y: hidden - justify-content: center - -.pill-nav__item - &:first-child .pill-nav__item-link - +border-radius.border-radius(left, 10em) - &:last-child .pill-nav__item-link - +border-radius.border-radius(right, 10em) - .is-half & - width: 50% - -.pill-nav__item-link - +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 - border-right-width: .5px - width: 7rem - transition: all .2s ease-out - .pill-nav__item:first-child & - border-left-width: 1px - .pill-nav__item:last-child & - border-right-width: 1px - &:hover - background-color: var(--background-more-tint) - &.is-active - background-color: var(--main) - color: var(--reversal-text) - border-color: var(--main) - -div.pill-nav__item-link - cursor: pointer diff --git a/app/javascript/stylesheets/shared/blocks/_tab-nav.sass b/app/javascript/stylesheets/shared/blocks/_tab-nav.sass deleted file mode 100644 index 2dccf134ea4..00000000000 --- a/app/javascript/stylesheets/shared/blocks/_tab-nav.sass +++ /dev/null @@ -1,34 +0,0 @@ -@use "../../config/mixins/link" -@use "../../config/mixins/text" - -.tab-nav - padding-block: .875rem - border-bottom: solid 1px var(--border) - .page-main-header + & - border-bottom: none - padding-bottom: 0 - -.tab-nav__items - display: flex - gap: .5rem - overflow-x: auto - overflow-y: hidden - margin-inline: -1rem - padding-inline: 1rem - -.tab-nav__item - flex: 0 0 7rem - -.tab-nav__item-link - +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 - transition: all .2s ease-out - &:hover - background-color: var(--background-semi-shade) - &.is-active - background-color: var(--main) - border-color: var(--main) - color: var(--reversal-text) 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 deleted file mode 100644 index 11da8d0fbd4..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-actions.sass +++ /dev/null @@ -1,52 +0,0 @@ -@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.size(2.25rem) - display: flex - align-items: center - justify-content: center - cursor: pointer - color: var(--muted-text) - align-self: flex-start - +break-points.media-breakpoint-up(md) - margin-top: -.5rem - margin-right: -.5rem - +break-points.media-breakpoint-down(sm) - +position.position(absolute, left 0, top 2.75rem) - -.card-list-item-actions__inner - display: none - +position.position(absolute, right -.5rem, top -.5rem, 3) - input:checked + & - display: block - -.card-list-item-actions__items - +position.position(relative, 2) - border: solid 1px var(--border) - width: 10rem - border-radius: .25rem - overflow: hidden - -.card-list-item-actions__item - .card-list-item-actions__item + & - border-top: dashed 1px var(--border) - -.card-list-item-actions__action - font-size: .8125rem - color: var(--default-text) - +link.flex-link - align-items: center - background-color: var(--base) - transition: all .2s ease-out - padding: .5em 1em - min-height: 2.75rem - i - margin-right: .5em - &:hover - 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 deleted file mode 100644 index 3abcd94e36b..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-meta.sass +++ /dev/null @@ -1,35 +0,0 @@ -@use "../../../config/mixins/position" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" - -.card-list-item-meta__items - +text.text-block(.75rem 1.4, flex) - flex-wrap: wrap - gap: 0 .5rem - -.card-list-item-meta__item - overflow: hidden - .a-user-icon - +size.size(1rem) - a - overflow: hidden - text-overflow: ellipsis - -.card-list-item-meta__item-note - +text.text-block(.75rem 1.4) - color: var(--default-text) - &::before - content: "※" - +position.position(relative, top -.0625em) - -.card-list-item-meta__checkers - display: inline-block - margin-left: .75rem - -.card-list-item-meta__created-at - +text.text-block(.75rem 1.4) - color: var(--muted-text) - -.card-list-item-meta__user - display: flex - gap: .25rem 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 deleted file mode 100644 index bccad64c929..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-tags-edit.sass +++ /dev/null @@ -1,14 +0,0 @@ -@use "../../../config/mixins/link" - -.card-list-item-tags-edit - width: 100% - -.card-list-item-tags__item-edit - +link.hover-link-reversal - cursor: pointer - color: var(--main-text) - -.card-list-item-tags-edit__actions - margin-top: .5rem - display: flex - gap: .5rem 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 deleted file mode 100644 index 3cdda9101d9..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item-title.sass +++ /dev/null @@ -1,62 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" - -.card-list-item-title - display: flex - justify-content: space-between - +break-points.media-breakpoint-up(md) - align-items: center - +break-points.media-breakpoint-down(sm) - flex-direction: column - align-items: flex-start - .a-list-item-badge - +break-points.media-breakpoint-up(md) - margin-top: .3125rem - margin-right: .5rem - +break-points.media-breakpoint-down(sm) - margin-bottom: .25rem - -.card-list-item-title__start - +break-points.media-breakpoint-up(md) - display: flex - align-items: center - flex: 1 - +break-points.media-breakpoint-down(sm) - width: 100% - -.card-list-item-title__end - align-self: flex-start - &:first-child - flex: 1 - width: 100% - -.card-list-item-title__title - +text.text-block(.875rem 1.4, 600) - width: 100% - flex-basis: 100% - word-break: break-all - overflow: hidden - display: -webkit-box - text-overflow: ellipsis - -webkit-box-orient: vertical - -webkit-line-clamp: 3 - &.is-lg - font-size: 1rem - &.is-sm - font-size: .8125rem - font-weight: 400 - .a-user-role - vertical-align: middle - -.card-list-item-title__emotion-image - +size.size(1.125em) - margin-right: .375rem - transform: translate(0, -.0625em) - -.card-list-item-title__link - word-break: break-all - +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 deleted file mode 100644 index 29af92686e7..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-item.sass +++ /dev/null @@ -1,205 +0,0 @@ -@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) - +break-points.media-breakpoint-up(md) - padding: .75rem 1rem - +break-points.media-breakpoint-down(sm) - padding: .75rem - .a-side-nav &:not(:last-child) - border-bottom-color: var(--border-shade) - -.card-list-item__icon - font-size: 1.25rem - margin-right: -.25rem - &.is-danger - color: var(--danger) - -.card-list-item__rows - flex: 1 - min-width: 0 - -.card-list-item__user-icons - display: flex - flex-wrap: wrap - gap: .25rem - -.products-self_assigned-index .card-list-item__notresponded - +position.position(absolute, left -.25rem, top -.25rem, 2) - +size.size(.5rem) - border-radius: 50% - background-color: var(--danger) - -.card-list-item__inner - +position.position(relative) - display: flex - gap: 1rem - -a.card-list-item__inner - +link.flex-link - color: var(--default-text) - &:hover - .card-list-item-title__title - color: var(--main) - text-decoration: underline - -.card-list-item__assignee - margin-top: .5rem - +break-points.media-breakpoint-up(md) - width: 8rem - -.card-list-item__assignee-button.a-button - border: solid 1px var(--border-shade) - pointer-events: none - color: var(--muted-text) - background-color: var(--background) - -.card-list-item__assignee-image - flex: 0 0 1.25rem - margin-right: .375rem - .a-user-icon - +size.size(1.25rem) - -.card-list-item__assignee-name - display: block - overflow: hidden - text-overflow: ellipsis - -.card-list-item__label - border-radius: .25rem - color: var(--main) - background-color: var(--base) - border: solid 1px var(--main) - display: flex - align-items: center - justify-content: center - +text.text-block(.625rem 1.4, center) - position: relative - font-feature-settings: "palt" - +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 - -.card-list-item__label-inner - &.is-sm - transform: scale(.9) - margin: -1rem - -.card-list-item__user - +break-points.media-breakpoint-up(md) - min-width: 2.75rem - +break-points.media-breakpoint-down(sm) - min-width: 2.5rem - -.card-list-item__user-icon - +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 - +break-points.media-breakpoint-up(md) - margin-block: .5rem - +break-points.media-breakpoint-down(sm) - margin-block: .75rem .25rem - -.card-list-item__row - &:not(:first-child) - margin-top: .25rem - -.card-list-item__show-user-detail - +size.size(2.75rem) - display: flex - align-items: center - justify-content: center - cursor: pointer - transition: all .2s ease-out - position: relative - +break-points.media-breakpoint-up(md) - +position.position(right -1rem) - +break-points.media-breakpoint-down(sm) - +position.position(right -.75rem) - &:hover - opacity: .7 - -.card-list-item__user-detail - margin-top: 1rem - display: none - input:checked + & - display: block - -.card-list-item__user-description - +break-points.media-breakpoint-up(md) - font-size: .8125rem - +break-points.media-breakpoint-down(sm) - font-size: .75rem - -.card-list-item__close-user-detail - margin-top: 1rem - +text.text-block(.8125rem 1.4, flex) - color: var(--main) - align-items: center - justify-content: center - +link.hover-link-reversal - cursor: pointer - -.card-list-item__summary - color: var(--muted-text) - word-break: break-all - * - word-break: break-all - overflow-wrap: anywhere - p - +text.text-block(.75rem 1.5) - +text.line-clamp(2) - -.card-list-item__option - +position.position(absolute, right 0, top 0) - .a-button - min-width: 4rem - -.card-list-item__thumbnail - flex: 0 0 6rem - -.card-list-item__thumbnail-inner - position: relative - padding-top: 52.5% - display: block - -.card-list-item__thumbnail-image - +size.size(100%) - +position.position(absolute, left 0, top 0, right 0, bottom 0) - object-fit: cover - border-radius: 4px - -.card-list-item__checker - +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.text-block(.8125rem 1.4, center) - color: var(--muted-text) - -.card-list-item__badge - margin-right: .25rem - -.card-list-item__small-link - display: flex - +text.text-block(.75rem 1.4) - margin-top: .5rem diff --git a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-tools.sass b/app/javascript/stylesheets/shared/blocks/card-list/_card-list-tools.sass deleted file mode 100644 index d6b558746aa..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card-list/_card-list-tools.sass +++ /dev/null @@ -1,2 +0,0 @@ -.card-list-tools + .card-list - margin-top: 1rem diff --git a/app/javascript/stylesheets/shared/blocks/card-list/_card-list.sass b/app/javascript/stylesheets/shared/blocks/card-list/_card-list.sass deleted file mode 100644 index 9c3d3067d12..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card-list/_card-list.sass +++ /dev/null @@ -1,65 +0,0 @@ -@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.position(relative) - .completed-practices-progress + & - border-top: solid 1px var(--border-tint) - .side-tabs-contents__item & - +break-points.media-breakpoint-up(md) - max-height: calc(100vh - 6rem) - overflow-y: auto - -.card-list__description - padding: .75rem 1rem - background-color: var(--background) - -.card-list__message - padding-block: 2rem - -.card-list__deacription - padding: .75rem 1rem - p - +text.text-block(.8125rem 1.6) - +break-points.media-breakpoint-down(sm) - font-size: .75rem - -.card-list__notice - border: solid 1px var(--success) - background-color: var(--success-tint) - padding: .75rem 1rem - color: var(--success-text) - +break-points.media-breakpoint-down(sm) - padding: .5rem .75rem - a - color: inherit - +link.hover-link-reversal - -.card-list__label - +text.text-block(.75rem 1.4, 700) - +position.position(sticky, top 0, 2) - background-color: var(--background) - +break-points.media-breakpoint-up(md) - padding: .25rem 1rem - +break-points.media-breakpoint-down(sm) - padding: .25rem .75rem - &:first-child - border-top: solid 1px var(--border) - -.card-list__items - .card-list__deacription + & - border-top: dotted .0625rem var(--border-tint) - &.is-md-only-2-items - +break-points.media-breakpoint-only(md) - display: flex - flex-wrap: wrap - .card-list-item - flex: 0 0 50% - &:nth-child(odd) - border-right: solid 1px var(--border-tint) diff --git a/app/javascript/stylesheets/shared/blocks/card/_card-body.sass b/app/javascript/stylesheets/shared/blocks/card/_card-body.sass deleted file mode 100644 index 2b74a7a7aaa..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card/_card-body.sass +++ /dev/null @@ -1,30 +0,0 @@ -@use "../../../config/mixins/break-points" - -.card-body - flex: 1 - &.has-scroll - max-height: 18rem - overflow-y: auto - -.card-body__description - +break-points.media-breakpoint-up(md) - padding: 1rem - +break-points.media-breakpoint-down(sm) - padding: .75rem - &.a-long-text - +break-points.media-breakpoint-up(md) - font-size: .9375rem - +break-points.media-breakpoint-down(sm) - font-size: .8125rem - -.card__main-movie - video - border-radius: .25rem .25rem 0 0 - -.card-body__inner - max-width: 100% - width: 100% - +break-points.media-breakpoint-up(md) - padding: 1rem 1.5rem - +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 deleted file mode 100644 index dc3680a86c8..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card/_card-books.sass +++ /dev/null @@ -1,87 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/position" -@use "../../../config/mixins/text" - -.card-books-item - +break-points.media-breakpoint-up(md) - height: 100% - -.card-books-item__body - +break-points.media-breakpoint-up(md) - flex: 1 - -.card-books-item__inner - padding: .75rem 1rem - text-decoration: none - +break-points.media-breakpoint-up(md) - +link.flex-link - gap: 1rem - align-items: flex-start - +break-points.media-breakpoint-down(sm) - display: block - overflow: hidden - -.card-books-item__start - +break-points.media-breakpoint-up(md) - flex: 0 0 4rem - +break-points.media-breakpoint-down(sm) - float: left - margin-right: 1rem - width: 3.5rem - -.card-books-item__end - flex: 1 - -.card-books-item__row - &:not(:first-child) - margin-top: .25rem - -.card-books-item__cover-container - height: 100% - display: flex - align-items: center - justify-content: center - -.card-books-item__image - max-height: 100% - max-width: 100% - object-fit: contain - object-position: 50% 0 - border: solid 1px var(--border-tint) - border-radius: 2px - -.card-books-item__title - +text.text-block(.875rem 1.4, 600) - color: var(--default-text) - transition: all .2s ease-out - .a-badge - +position.position(relative, top -.125em) - margin-right: .5em - -.card-books-item__title-link - text-decoration: none - .card-books-item__title-label - +link.hover-link-reversal - color: var(--main-text) - -a.card-books-item__inner:hover - .card-books-item__title-label - text-decoration: underline - color: var(--main-text) - -.card-books-item__price - +text.text-block(.75rem 1.4) - color: var(--default-text) - -.card-books-item__description - font-size: .75rem - color: var(--semi-muted-text) - -.card-books-item__practices - padding: 0 1rem .75rem - .tag-links__item-link - max-width: 9rem - text-overflow: ellipsis - overflow: hidden - white-space: nowrap diff --git a/app/javascript/stylesheets/shared/blocks/card/_card-eyecatch.sass b/app/javascript/stylesheets/shared/blocks/card/_card-eyecatch.sass deleted file mode 100644 index bb217273cee..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card/_card-eyecatch.sass +++ /dev/null @@ -1,15 +0,0 @@ -@use "../../../config/mixins/break-points" - -.card-eyecatch - +break-points.media-breakpoint-up(md) - padding: 1rem 1rem 0 - +break-points.media-breakpoint-down(sm) - padding: .75rem .75rem 0 - -.card-eyecatch__image - display: block - border-radius: 4px - aspect-ratio: 1.91 / 1 - width: 100% - object-fit: cover - border-radius: .25rem diff --git a/app/javascript/stylesheets/shared/blocks/card/_card-footer.sass b/app/javascript/stylesheets/shared/blocks/card/_card-footer.sass deleted file mode 100644 index 27ae8d86249..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card/_card-footer.sass +++ /dev/null @@ -1,37 +0,0 @@ -@use "../../../config/mixins/border-radius" -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/text" - -.card-footer - +break-points.media-breakpoint-up(md) - padding: .5rem 1rem - min-height: 3rem - +break-points.media-breakpoint-down(sm) - padding: .5rem .75rem - &:last-child - +border-radius.border-radius(bottom, .25rem) - -.card-footer__description - +text.text-block(.75rem 1.4 .5rem, center) - color: var(--muted-text) - +break-points.media-breakpoint-down(sm) - text-align: left - font-size: .625rem - br - display: none - -.card-footer__notice - +text.text-block(.8125rem 1.4 .5rem, center) - color: var(--success) - -.card-footer__footer-link - height: 100% - display: flex - justify-content: flex-end - align-items: flex-end - -.card-footer__footer-text-link - +text.text-block(.8125rem 1.4) - color: var(--muted-text) - +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 deleted file mode 100644 index eb26b3c2e1e..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card/_card-header.sass +++ /dev/null @@ -1,60 +0,0 @@ -@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 - +break-points.media-breakpoint-up(md) - padding: .75rem 1rem - +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.border-radius(top, .25rem) - & + .a-form-tabs - margin-top: -1px - -.card-header__inner - display: flex - align-items: center - width: 100% - gap: 1rem - -.card-header__title - +text.text-block(1em 1.4, 600) - flex: 1 - +break-points.media-breakpoint-up(md) - font-size: 1rem - +break-points.media-breakpoint-down(sm) - font-size: .875rem - .card-header.is-sm & - font-size: .875rem - .card-header.is-lg & - font-size: 1.5rem - -.card-header__count - font-weight: 400 - letter-spacing: 0 - margin-left: .125rem - -.card-header__title-emotion-image - +size.size(1.25em) - display: inline-block - vertical-align: middle - margin-inline: .125em - +position.position(relative, top -.125em) - -.card-header__sub-title - +text.text-block(.8125rem 1.4) - +break-points.media-breakpoint-down(sm) - font-size: .75rem - -.card-header__action - display: flex diff --git a/app/javascript/stylesheets/shared/blocks/card/_card-main-actions.sass b/app/javascript/stylesheets/shared/blocks/card/_card-main-actions.sass deleted file mode 100644 index 795a083e7e3..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card/_card-main-actions.sass +++ /dev/null @@ -1,56 +0,0 @@ -@use "../../../config/mixins/link" -@use "../../../config/mixins/position" -@use "../../../config/mixins/text" - -.card-main-actions - container: card-main-actions / inline-size - &:not(:first-child) - margin-top: .5rem - .form__items + & - margin-top: 1rem - -.card-main-actions__items - display: flex - gap: .5rem - @container card-main-actions (min-width: 20em) - +position.position(relative) - justify-content: center - flex-wrap: wrap - align-items: flex-end - min-height: 1.875rem - @container card-main-actions (max-width: 19.9375em) - flex-direction: column - &.is-sub-actions - justify-content: flex-end - @container card-main-actions (max-width: 19.9375em) - flex-direction: row - .card-main-actions__item.is-sub - position: static - flex: 0 0 auto - -.card-main-actions__item - @container card-main-actions (min-width: 20em) - flex: 1 - max-width: 13rem - &.is-sub - flex: 0 0 auto - @container card-main-actions (max-width: 19.9375em) - flex-basis: 100% - max-width: 100% - &.is-sub - text-align: right - &:last-child - margin-bottom: 0 - &.is-end - margin-left: auto - flex-basis: 2.5rem - .card-main-actions.is-3-items & - @container card-main-actions (min-width: 20em) - flex: 1 - -.card-main-actions__muted-action - +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 deleted file mode 100644 index 67ba49d74a1..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card/_card-message.sass +++ /dev/null @@ -1,14 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.card-message - text-align: center - &.is-notice - background-color: var(--success) - color: var(--reversal-text) - +break-points.media-breakpoint-up(md) - padding: .75rem 1rem - +text.text-block(.875rem 1.5) - +break-points.media-breakpoint-down(sm) - padding: .75rem - +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 deleted file mode 100644 index de6fd655cdf..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card/_congrats-card-body.sass +++ /dev/null @@ -1,25 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.congrats-card-body__title - +text.text-block(1.5rem 1.4, 700) - +break-points.media-breakpoint-up(md) - font-size: 1.5rem - +break-points.media-breakpoint-down(sm) - font-size: 1rem - -.congrats-card-body__image-container - margin-top: 1.25rem - -.congrats-card-body__image-container - width: 100% - max-width: 28rem - margin-inline: auto - -.congrats-card-body__image - border-radius: .75rem - border: solid .5rem var(--border-tint) - -.congrats-card-body - .card-main-actions - margin-top: 1.25rem diff --git a/app/javascript/stylesheets/shared/blocks/card/_practice-books.sass b/app/javascript/stylesheets/shared/blocks/card/_practice-books.sass deleted file mode 100644 index e6bee2a8944..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card/_practice-books.sass +++ /dev/null @@ -1,87 +0,0 @@ -@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 - +break-points.media-breakpoint-up(md) - display: flex - flex-wrap: wrap - -.practice-books-item - +break-points.media-breakpoint-up(md) - border-top: solid 1px var(--border-tint) - flex: 0 0 50% - height: 100% - display: flex - flex-direction: column - &:nth-child(odd) - border-right: solid 1px var(--border-tint) - +break-points.media-breakpoint-down(sm) - &:not(:first-child) - border-top: solid 1px var(--border-tint) - -.practice-books-item__body - +break-points.media-breakpoint-up(md) - flex: 1 - -.practice-books-item__inner - padding: .75rem 1rem - text-decoration: none - .practice-books & - +size.size(100%) - +break-points.media-breakpoint-up(md) - +link.flex-link - gap: 1rem - align-items: flex-start - +break-points.media-breakpoint-down(sm) - display: block - overflow: hidden - -.practice-books-item__start - +break-points.media-breakpoint-up(md) - flex: 0 0 4rem - +break-points.media-breakpoint-down(sm) - float: left - margin-right: 1rem - width: 3.5rem - -.practice-books-item__end - flex: 1 - -.practice-books-item__cover-container - height: 100% - display: flex - align-items: center - justify-content: center - -.practice-books-item__image - max-height: 100% - max-width: 100% - object-fit: contain - object-position: 50% 0 - border: solid 1px var(--border-tint) - border-radius: 2px - -.practice-books-item__title - +text.text-block(.875rem 1.4, 600) - color: var(--default-text) - transition: all .2s ease-out - .a-badge - +position.position(relative, top -.125em) - margin-right: .5em - -a.practice-books-item__inner:hover - .practice-books-item__title-label - text-decoration: underline - color: var(--main-text) - -.practice-books-item__price - +text.text-block(.75rem 1.4) - color: var(--default-text) - -.practice-books-item__description - font-size: .75rem - color: var(--semi-muted-text) diff --git a/app/javascript/stylesheets/shared/blocks/card/_tags-highlight.sass b/app/javascript/stylesheets/shared/blocks/card/_tags-highlight.sass deleted file mode 100644 index 6ea472d4404..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card/_tags-highlight.sass +++ /dev/null @@ -1,15 +0,0 @@ -.tags-highlight - position: absolute - left: 0 - top: 0 - padding: .5rem .75rem - display: flex - gap: .25rem - width: 100% - flex-wrap: wrap - -.tags-highlight__item - width: 25% - max-width: 6rem - .a-badge - border: solid 1px var(--base) diff --git a/app/javascript/stylesheets/shared/blocks/card/_thumbnail-card.sass b/app/javascript/stylesheets/shared/blocks/card/_thumbnail-card.sass deleted file mode 100644 index 2c06aa77356..00000000000 --- a/app/javascript/stylesheets/shared/blocks/card/_thumbnail-card.sass +++ /dev/null @@ -1,79 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" - -.thumbnail-card - padding: 1rem - +break-points.media-breakpoint-up(md) - height: 100% - +break-points.media-breakpoint-down(sm) - .col-xs-6 & - height: 100% - -.thumbnail-card__inner - display: flex - flex-direction: column - position: relative - +break-points.media-breakpoint-down(sm) - gap: .5rem - +break-points.media-breakpoint-up(md) - gap: .75rem - -a.thumbnail-card__inner - +link.flex-link - &:hover - .thumbnail-card__title - text-decoration: underline - -.thumbnail-card__image-link - transition: all .2s ease-out - &:hover - opacity: .7 - -.thumbnail-card__image - display: block - border-radius: 4px - aspect-ratio: 1.91 / 1 - width: 100% - object-fit: cover - -.thumbnail-card__title - +text.text-block(1.125rem 1.4, 700) - color: var(--default-text) - overflow: hidden - display: -webkit-box - text-overflow: ellipsis - -webkit-box-orient: vertical - -webkit-line-clamp: 2 - max-height: calc(1.125rem * 1.4 * 2) - .thumbnail-card.is-wip & - color: var(--muted-text) - -.thumbnail-card__title-link - +link.hover-link-reversal - -.thumbnail-card__metas - display: flex - -.thumbnail-card__meta:not(:first-child) - margin-left: .75rem - -.thumbnail-card__author - display: flex - align-items: center - font-size: .875rem - color: var(--default-text) - img - +size.size(1.125rem) - object-fit: cover - margin-right: .25rem - border-radius: 50% - -.thumbnail-card__date - +text.text-block(.8125rem 1.4) - color: var(--semi-muted-text) - -.thumbnail-card__description - +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 deleted file mode 100644 index b44118a3d77..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_block-checks.sass +++ /dev/null @@ -1,38 +0,0 @@ -@use "../../../config/mixins/break-points" - -.block-checks - display: flex - flex-wrap: wrap - gap: .5rem - &.is-margin-top-12 - margin-top: .75rem - -.block-checks__item - flex: 1 - max-width: 20rem - .block-checks.is-1-item & - max-width: 100% - .block-checks.is-1-item.is-centered & - width: 20rem - .block-checks.is-2-items & - +break-points.media-breakpoint-up(sm) - flex: 0 0 calc((100% - .5rem) / 2) - max-width: calc((100% - .5rem) / 2) - +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 & - +break-points.media-breakpoint-down(sm) - width: calc((100% - 1rem) / 3) - flex: 0 0 calc((100% - 1rem) / 3) - - .block-checks.is-4-items & - width: calc((100% - 1.5rem) / 4) - flex: 0 0 calc((100% - 1.5rem) / 4) - .block-checks.sm-down\:is-2-items & - +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-item.sass b/app/javascript/stylesheets/shared/blocks/form/_books-form-item.sass deleted file mode 100644 index cb6e23895d7..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_books-form-item.sass +++ /dev/null @@ -1,24 +0,0 @@ -.books-form-item - .a-form-label - font-size: .8125rem - margin-bottom: .25em - .a-form-help - margin-top: .25em - & + .books-form-item - margin-top: .75rem - &.is-inline - display: flex - *:first-child - margin-right: 1em - textarea.a-text-input - height: 10rem - -.books-form-item__price-container - position: relative - display: flex - align-items: flex-end - max-width: 10rem - -.books-form-item__price-unit - padding-bottom: .25rem - margin-left: .25rem diff --git a/app/javascript/stylesheets/shared/blocks/form/_books-form.sass b/app/javascript/stylesheets/shared/blocks/form/_books-form.sass deleted file mode 100644 index e9e7ca2beb6..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_books-form.sass +++ /dev/null @@ -1,46 +0,0 @@ -@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) - border-radius: .25rem - .books-form + & - margin-top: 2rem - -.books-form__header - position: relative - -.books-form__delete - +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.size(100%) - +link.flex-link - align-items: center - justify-content: center - border-radius: 50% - background-color: var(--base) - transition: all .2s ease-out - &:hover - color: var(--danger) - border-color: var(--danger) - -.books-form__items - +break-points.media-breakpoint-up(md) - padding: 1rem - +break-points.media-breakpoint-down(sm) - padding: .75rem - -.books-form__add - .a-button - min-width: 12rem - +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 deleted file mode 100644 index edee13f7b06..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_checkboxes.sass +++ /dev/null @@ -1,93 +0,0 @@ -@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 - display: flex - flex-wrap: wrap - column-gap: 1.5rem - row-gap: .75rem - -.checkboxes__item - label - +text.text-block(.875rem 1.4) - display: block - color: var(--semi-muted-text) - +position.position(relative) - +link.hover-link - cursor: pointer - padding-left: calc(#{$checkbox-size} * 1.4) - &.is-sm - font-size: .8125rem - &::before - content: "" - text-decoration: none - +size.size($checkbox-size) - border: solid 1px var(--input-border) - display: block - +position.position(absolute, left 0, top 50%) - transform: translate(0, -50%) - background-color: var(--base) - border-radius: .1875rem - +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(colors.$primary, .4) - border-color: var(--primary) - label:hover::after - text-decoration: none - input:checked + label, - .is-dammy label - color: var(--default-text) - input:checked + label::before, - .is-dammy label::before - background-color: var(--primary) - border-color: var(--primary) - +font-awsome.fa(fas "\f00c") - input:checked + label:hover::before - border-color: var(--primary) - input:checked + label::after, - .is-dammy label::after - opacity: 1 - - &.is-radio label::before - border-radius: 50% - &.is-radio input:checked + label::before, - &.is-radio .is-dammy label::before - content: '' - box-shadow: 0 0 0 2px inset var(--base) -.checkboxes.has-children - > .checkboxes__items - flex-direction: column - > .checkboxes__item - border: solid 1px var(--border) - border-radius: .25rem - background-color: var(--base) - > label - font-size: 1rem - font-weight: 700 - margin: .75rem - .checkboxes - display: none - border-top: solid 1px var(--border-tint) - .checkboxes__items - gap: .5rem 1rem - input:checked + label + .checkboxes - display: block - -.checkboxes - .checkboxes__item & - padding: .75rem - -.checkboxes__title - margin-bottom: .75rem - color: var(--muted-text) diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-actions.sass b/app/javascript/stylesheets/shared/blocks/form/_form-actions.sass deleted file mode 100644 index dd974ff2b6f..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_form-actions.sass +++ /dev/null @@ -1,100 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" -@use "../../../config/mixins/position" -@use "../../../config/mixins/text" - -.form-actions - +break-points.media-breakpoint-up(md) - margin-top: 1.5rem - +break-points.media-breakpoint-down(sm) - margin-top: 1rem - &.is-report - +break-points.media-breakpoint-up(md) - padding-bottom: 1.5rem - .form-actions + & - border-top: dashed 1px var(--border) - +break-points.media-breakpoint-up(md) - margin-top: 1rem - padding-top: 1rem - +break-points.media-breakpoint-down(sm) - padding-top: 1rem - -.form-actions__items - gap: .75rem - +break-points.media-breakpoint-up(md) - display: flex - align-items: flex-end - justify-content: center - flex-wrap: wrap - position: relative - max-width: 45em - margin-inline: auto - +break-points.media-breakpoint-down(sm) - flex-direction: column - -.form-actions__item - +position.position(relative) - &.is-sub - +break-points.media-breakpoint-up(md) - flex: 0 0 auto - +break-points.media-breakpoint-down(sm) - text-align: center - &.is-muted - +break-points.media-breakpoint-up(md) - +position.position(absolute, right 0, bottom 0) - +break-points.media-breakpoint-down(sm) - text-align: right - &.is-help - +break-points.media-breakpoint-down(sm) - margin-bottom: 1rem - &.is-main - +break-points.media-breakpoint-up(sm) - min-width: 13rem - +break-points.media-breakpoint-down(xs) - width: 100% - &.has-help - +break-points.media-breakpoint-up(md) - position: relative - padding-bottom: 1.5rem - +break-points.media-breakpoint-down(sm) - width: 100% - padding-inline: 0 - &:nth-child(2), - &:nth-child(3) - margin-top: .75rem - > * - width: 100% - .a-button.is-text, - .a-button.is-muted-text - width: auto - -.form-actions__item-help - +text.text-block(.8125rem 1) - text-align: center - padding-top: .5rem - .a-form-help-link - margin-left: .5em - +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 - +break-points.media-breakpoint-up(md) - margin-top: .5rem - +break-points.media-breakpoint-down(sm) - margin-top: .75rem - -.form-actions__delete-link - +link.hover-link-reversal - +text.text-block(.875rem 1.4) - color: var(--muted-text) - &:hover - color: var(--danger) - -.form-action-before-option - margin-bottom: .5rem - &.has-help - display: flex diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-added-choice.sass b/app/javascript/stylesheets/shared/blocks/form/_form-added-choice.sass deleted file mode 100644 index 51f274bed1a..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_form-added-choice.sass +++ /dev/null @@ -1,37 +0,0 @@ -@use "../../../config/mixins/break-points" - -.form-added-choice - .form-added-choice + & - margin-top: 1rem - -.form-added-choice__inner - +break-points.media-breakpoint-up(md) - display: flex - align-items: flex-start - gap: .75rem - -.form-added-choice__col - &.is-main - flex: 1 - -.form-added-choice__items - display: flex - +break-points.media-breakpoint-down(sm) - gap: 1rem - -.form-added-choice__action - +break-points.media-breakpoint-down(sm) - margin-top: .75rem - display: flex - justify-content: flex-end - -.form-added-choice__label - display: flex - height: 2.75rem - align-items: center - &.is-count - width: 1.5rem - text-align: center - justify-content: center - .form-item__vertical-separator & - height: 1.5rem diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-item-actions.sass b/app/javascript/stylesheets/shared/blocks/form/_form-item-actions.sass deleted file mode 100644 index 3105c581008..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_form-item-actions.sass +++ /dev/null @@ -1,25 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/link" - -.form-item-actions - +break-points.media-breakpoint-up(md) - margin-top: -.75rem - +break-points.media-breakpoint-down(sm) - margin-top: -.5rem - -.form-item-actions__items - display: flex - align-items: center - gap: .75rem - -.form-item-actions__text-link - +link.hover-link-reversal - cursor: pointer - line-height: 1.4 - +break-points.media-breakpoint-up(md) - font-size: .8125rem - +break-points.media-breakpoint-down(sm) - font-size: .75rem - &.is-danger - color: var(--danger) - font-weight: 600 diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-item-block.sass b/app/javascript/stylesheets/shared/blocks/form/_form-item-block.sass deleted file mode 100644 index 5193eaa3bce..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_form-item-block.sass +++ /dev/null @@ -1,38 +0,0 @@ -@use "../../../config/mixins/text" - -.form-item-block - &:not(:last-child) - margin-bottom: 1.75rem - .form-checkbox__label - margin-bottom: 0 - border-radius: 0 - border: none - color: var(--muted-text) - padding-block: .625rem - background-color: var(--background-more-tint) - transition: all .2s ease-out - &:hover - color: var(--default-text) - background-color: var(--background-tint) - input:checked + & - background-color: #fff7e0 - color: var(--default-text) - -.form-item-block__inner - border: solid var(--border-shade) 1px - border-radius: .25rem - overflow: hidden - -.form-item-block__header - padding: .5rem .75rem - border-bottom: solid 1px var(--border-shade) - background-color: var(--base) - -.form-item-block__title - +text.text-block(.8125rem 1.4) - display: block - font-weight: 700 - -.form-item-block__item - &:not(:last-child) - border-bottom: solid 1px var(--border) diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-item-group.sass b/app/javascript/stylesheets/shared/blocks/form/_form-item-group.sass deleted file mode 100644 index bfc7ec61465..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_form-item-group.sass +++ /dev/null @@ -1,18 +0,0 @@ -@use "../../../config/mixins/text" - -.form-item-group - .form-item-group + & - margin-top: .75rem - border-top: dashed 1px var(--border) - padding-top: .75rem - -.form-item-group__body - .form-item-group__header + & - margin-top: .25rem - -.form-item-group__title - +text.text-block(.875rem 1.4) - font-weight: 700 - -.form-item-group__help - margin-top: .5rem diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-item.sass b/app/javascript/stylesheets/shared/blocks/form/_form-item.sass deleted file mode 100644 index 5bbfe1c7eda..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_form-item.sass +++ /dev/null @@ -1,146 +0,0 @@ -@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 - &.is-hidden - display: none - &.is-sm - width: 30rem - max-width: 100% - &.is-md - width: 40rem - max-width: 100% - .choices - width: 100% - z-index: 2 - .a-page-notice - margin-bottom: 1rem - border-radius: .25rem - .edit_report & .a-page-notice - margin-bottom: 1.75rem - .checkboxes - &:not(:last-child) - margin-bottom: 1rem - &.is-inline - display: flex - align-items: center - .a-form-label - margin-bottom: 0 - margin-right: .75em - white-space: nowrap - &.is-sm - margin-right: .5rem - &.is-centered - justify-content: center - &.is-inline-md-up - +break-points.media-breakpoint-up(md) - display: flex - align-items: center - .a-form-label - margin-bottom: 0 - margin-right: .75em - white-space: nowrap - -.form-item__row - display: flex - gap: .75rem - -.form-item__column - &.is-sm - flex: 0 0 6rem - &.is-unit - align-self: flex-end - padding-bottom: .25em - &.is-action - align-self: flex-end - -.form-item__button - text-align: center - -.form-item__pp - margin-top: .75rem - -.form-item__one-checkbox - +text.text-block(.875rem) - cursor: pointer - -.form-item__pp - p - +text.text-block(.8125rem 1.8) - margin-bottom: 1em - h2 - +text.text-block(.8125rem 1.8) - margin-bottom: .4em - font-weight: 700 - ul - margin-bottom: 1em - list-style: disc outside - margin-left: 1.5rem - li - +text.text-block(.8125rem 1.8) - margin-bottom: .4em - *:last-child - margin-bottom: 0 - -.form-item__mention-input - position: relative - &::before - content: '@' - +font-awsome.fa(far '\f1fa') - +text.text-block(1rem 1) - display: flex - align-items: center - justify-content: center - +size.size(2rem 100%) - +position.position(absolute, left 0, top 0) - background-color: var(--background) - +border-radius.border-radius(left, .25rem) - border: solid 1px #c1c5b9 - input - padding-left: 2.5rem - -.form-item__lerning-times - margin-bottom: 1rem - -.form-item__header - display: flex - justify-content: space-between - margin-bottom: .5rem - .a-form-label - margin-bottom: 0 - -.form-item__price-container - position: relative - display: flex - align-items: flex-end - max-width: 10rem - -.form-item__price-unit - padding-bottom: .25rem - margin-left: .25rem - -.form-item__inline-form-item - display: flex - align-items: center - flex: 0 0 100% - padding-top: .25rem - color: var(--default-text) - font-weight: 400 - -.form-item__add-times - +break-points.media-breakpoint-up(md) - margin-top: -.125rem - +break-points.media-breakpoint-down(sm) - margin-top: -1.25rem - -.form-item__add-choice - margin-top: 1rem - -.form-item__option - margin-top: .5rem diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-link-block.sass b/app/javascript/stylesheets/shared/blocks/form/_form-link-block.sass deleted file mode 100644 index d75fa6e0a26..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_form-link-block.sass +++ /dev/null @@ -1,7 +0,0 @@ -@use "../../../config/mixins/text" - -.form-link-block__link - +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 deleted file mode 100644 index e83885f7082..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_form-notice.sass +++ /dev/null @@ -1,9 +0,0 @@ -@use "../../../config/mixins/break-points" - -.form-notice - &:not(:first-child) - margin-top: 1em - +break-points.media-breakpoint-up(md) - margin-bottom: 2rem - +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 deleted file mode 100644 index 447954aa8d0..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_form-selects.sass +++ /dev/null @@ -1,38 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/position" - -.form-selects - display: flex - -.form-selects__item - display: flex - align-items: center - +break-points.media-breakpoint-down(sm) - flex-basis: 50% - position: relative - &:first-child - +break-points.media-breakpoint-down(sm) - padding-right: .375rem - &:last-child - +break-points.media-breakpoint-down(sm) - padding-left: .375rem - &.has-colon::after - content: ":" - display: flex - align-items: center - justify-content: center - +break-points.media-breakpoint-up(md) - padding-inline: .5rem - +break-points.media-breakpoint-down(sm) - width: .75rem - +position.position(absolute, right -.375rem, top 0, bottom 0) - &.has-slash::after - content: "/" - display: flex - align-items: center - justify-content: center - +break-points.media-breakpoint-up(md) - padding-inline: .5rem - +break-points.media-breakpoint-down(sm) - width: .75rem - +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 deleted file mode 100644 index e7105159fd0..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_form-table.sass +++ /dev/null @@ -1,52 +0,0 @@ -@use "../../../config/mixins/font-awsome" -@use "../../../config/mixins/size" - -.form-table - overflow: auto - max-width: 100% - &.is-sm - font-size: .8125rem - table - border: solid 1px var(--border) - td, - th - padding: .5rem - border: solid 1px var(--border) - th - background-color: var(--background-tint) - border: solid 1px var(--border-shade) - .form-table__check - padding: 0 - label - display: flex - align-items: center - justify-content: center - padding: .5rem - cursor: pointer - border-radius: .25rem - input - opacity: 0 - position: absolute - pointer-events: none - &::after - content: "" - +size.size(.875rem) - border: solid 1px var(--border-shade) - border-radius: .25rem - &:has(:checked) - label - background: var(--input-selected-background) - box-shadow: 0 0 0 1px var(--input-selected-border) inset - label::after - border: none - +font-awsome.fa(fas '\f00c') - color: var(--main) - &.is-sticky - thead th - position: sticky - top: 0 - z-index: 1 - - thead th:first-child - position: sticky - left: 0 diff --git a/app/javascript/stylesheets/shared/blocks/form/_form-tabs-item.sass b/app/javascript/stylesheets/shared/blocks/form/_form-tabs-item.sass deleted file mode 100644 index 5a02cbbc3b7..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_form-tabs-item.sass +++ /dev/null @@ -1,16 +0,0 @@ -@use "../../../config/mixins/text" - -.form-tabs-item__markdown - height: 100% - display: none - &.is-active - display: block - -.form-tabs-item__textarea - min-height: 9rem - overflow: hidden - -.form-tabs-item__preview - background-color: var(--base) - +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 deleted file mode 100644 index 8033b050894..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_form-tabs.sass +++ /dev/null @@ -1,32 +0,0 @@ -@use "../../../config/mixins/position" -@use "../../../config/mixins/text" - -.form-tabs - display: flex - border-bottom: solid 1px var(--border) - -.form-tabs__tab - width: 5.5rem - padding-block: .75rem 1rem - +text.text-block(.8125rem 1, flex) - display: flex - white-space: nowrap - color: var(--muted-text) - align-items: center - justify-content: center - cursor: pointer - position: relative - transition: all .2s ease-out - &:hover - color: var(--default-text) - text-decoration: underline - &.is-active - color: var(--default-text) - font-weight: 600 - pointer-events: none - &.is-active::before - content: '' - display: block - height: .375rem - +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 deleted file mode 100644 index 07dbc8b6b46..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_form-textarea.sass +++ /dev/null @@ -1,37 +0,0 @@ -@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.position(relative) - textarea.a-text-input - padding-bottom: 3rem - -+break-points.media-breakpoint-down(md) - .form-textarea__bottom-note - display: none - -+break-points.media-breakpoint-up(lg) - .form-textarea__bottom-note - +text.text-block(.75rem 1.4) - text-align: center - -.form-textarea__footer - height: 2rem - display: flex - gap: 1rem - align-items: center - background-color: var(--background) - +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 - +break-points.media-breakpoint-down(md) - display: none - +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 deleted file mode 100644 index 941f9925ffe..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_form-times.sass +++ /dev/null @@ -1,42 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.form-times - +break-points.media-breakpoint-up(md) - display: flex - align-items: flex-end - +break-points.media-breakpoint-down(sm) - display: block - -.form-times__inner - margin-bottom: 1rem - +break-points.media-breakpoint-up(md) - display: flex - align-items: flex-end - -.form-times__items - display: flex - +break-points.media-breakpoint-down(sm) - gap: 1rem - -.form-times__action - +break-points.media-breakpoint-down(sm) - margin-top: .75rem - display: flex - justify-content: flex-end - #tasks .form-item:first-child & - display: none - -.form-times__time - display: flex - flex-direction: column - +break-points.media-breakpoint-up(md) - margin-right: 1rem - +break-points.media-breakpoint-down(sm) - margin-right: 0 - flex-basis: 50% - -.form-times__time-label - +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 deleted file mode 100644 index ffad235bdb9..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_form.sass +++ /dev/null @@ -1,31 +0,0 @@ -@use "../../../config/mixins/text" - -.form - margin-inline: auto - .a-card + & - margin-top: 1.25rem - .form + & - margin-top: 1rem - border-top: dashed 1px var(--border) - padding-top: 1rem - -.form__items - .form__items + & - margin-top: 1.75rem - -.form__items-title - +text.text-block(.875rem 1.4) - margin-bottom: 1.5rem - font-weight: 700 - color: var(--reversal-text) - background-color: var(--main) - padding: .625rem 1rem - border-radius: .25rem - -.form__items - >.a-form-label - margin-bottom: .875rem - -.form__items-inner - width: 42.5rem - max-width: 100% diff --git a/app/javascript/stylesheets/shared/blocks/form/_hidden-form-item.sass b/app/javascript/stylesheets/shared/blocks/form/_hidden-form-item.sass deleted file mode 100644 index a14dcb99d1e..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_hidden-form-item.sass +++ /dev/null @@ -1,7 +0,0 @@ -.hidden-form-item__target - display: none - input:checked + .hidden-form-item__trigger + & - display: block - -input:checked + .hidden-form-item__trigger - display: none diff --git a/app/javascript/stylesheets/shared/blocks/form/_important-message.sass b/app/javascript/stylesheets/shared/blocks/form/_important-message.sass deleted file mode 100644 index d317e56b3fc..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_important-message.sass +++ /dev/null @@ -1,22 +0,0 @@ -@use "../../../config/mixins/text" - -.important-message - border: solid 2px var(--danger) - border-radius: .25rem - overflow: hidden - & + form - margin-top: 2rem - -.important-message__header - border-bottom: solid 1px var(--danger) - padding: .5rem 1rem - background-color: var(--danger-tint) - -.important-message__title - +text.text-block(.875rem 1.4) - font-weight: 800 - color: var(--danger-text) - -.important-message__body - padding: .75rem 1rem - background-color: var(--danger-tint) diff --git a/app/javascript/stylesheets/shared/blocks/form/_linear-scale.sass b/app/javascript/stylesheets/shared/blocks/form/_linear-scale.sass deleted file mode 100644 index 086cf965fd4..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_linear-scale.sass +++ /dev/null @@ -1,67 +0,0 @@ -@use "../../../config/mixins/position" -@use "../../../config/mixins/size" -@use "../../../config/mixins/text" -@use "../../../config/variables/colors" - -$radio-size: .875rem - -.linear-scale - display: flex - align-items: center - -.linear-scale__label - +text.text-block(.8125rem 1.4) - &:first-child - margin-right: 1rem - &:last-child - margin-left: 1rem - -.linear-scale__points - flex: 1 - -.linear-scale__points-items - display: flex - justify-content: space-between - -.linear-scale__point - display: flex - flex-direction: column - +text.text-block(.875rem 1.4) - display: block - color: var(--semi-muted-text) - +position.position(relative) - cursor: pointer - padding-bottom: $radio-size - width: 2.25rem - text-align: center - &::before - content: "" - text-decoration: none - +size.size($radio-size) - border: solid 1px var(--input-border) - display: block - +position.position(absolute, left 50%, bottom 0) - transform: translate(-50%, 0) - background-color: var(--base) - border-radius: 50% - +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(colors.$primary, .4) - border-color: var(--primary) - &:hover::after - text-decoration: none - input:checked + & - color: var(--default-text) - input:checked + &::before - background-color: var(--primary) - border-color: var(--primary) - box-shadow: var(--background) 0 0 0 1px inset - input:checked + &:hover::before - border-color: var(--primary) - input:checked + &::after - opacity: 1 diff --git a/app/javascript/stylesheets/shared/blocks/form/_many-check-boxes.sass b/app/javascript/stylesheets/shared/blocks/form/_many-check-boxes.sass deleted file mode 100644 index 69ce4b67e39..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_many-check-boxes.sass +++ /dev/null @@ -1,22 +0,0 @@ -@use "../../../config/mixins/text" - -.many-check-boxes - max-height: 16rem - overflow-y: auto - background-color: #f7f7f7 - border: solid 1px #c1c5b9 - border-radius: .25rem - -.many-check-boxes__item-label - +text.text-block(.8125rem 1.4) - display: block - padding: .5rem - border-bottom: solid 1px #ccc - cursor: pointer - &.is-checked - background-color: var(--accent) - color: var(--main-text) - .many-check-boxes__item:last-child & - border-bottom: none - input - margin-right: .75rem diff --git a/app/javascript/stylesheets/shared/blocks/form/_markdown-form.sass b/app/javascript/stylesheets/shared/blocks/form/_markdown-form.sass deleted file mode 100644 index 925c09b4828..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_markdown-form.sass +++ /dev/null @@ -1,18 +0,0 @@ -@use "../../../config/mixins/break-points" -@use "../../../config/mixins/text" - -.markdown-form__text-area - &.a-text-input - min-height: 30rem - +break-points.media-breakpoint-down(sm) - margin-bottom: 1rem - -.markdown-form__preview - background-color: var(--base) - +text.text-block(.875rem 1.8) - border-radius: .25rem - min-height: 30rem - +break-points.media-breakpoint-up(md) - padding: 1rem - +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 deleted file mode 100644 index 4d8f80cda40..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_radios.sass +++ /dev/null @@ -1,56 +0,0 @@ -@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 - display: flex - flex-wrap: wrap - column-gap: 1.5rem - row-gap: .75rem - -.radios__item - label - +text.text-block(.875rem 1.4) - display: block - color: var(--semi-muted-text) - +position.position(relative) - +link.hover-link - cursor: pointer - padding-left: calc(#{linear-scale.$radio-size} * 1.4) - &.is-sm - font-size: .8125rem - &::before - content: "" - text-decoration: none - +size.size(linear-scale.$radio-size) - border: solid 1px var(--input-border) - display: block - +position.position(absolute, left 0, top 50%) - transform: translate(0, -50%) - background-color: var(--base) - border-radius: 50% - +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(colors.$primary, .4) - border-color: var(--primary) - label:hover::after - text-decoration: none - input:checked + label - color: var(--default-text) - input:checked + label::before - background-color: var(--primary) - border-color: var(--primary) - box-shadow: var(--background) 0 0 0 1px inset - input:checked + label:hover::before - border-color: var(--primary) - input:checked + label::after - opacity: 1 diff --git a/app/javascript/stylesheets/shared/blocks/form/_vue-tags-input.sass b/app/javascript/stylesheets/shared/blocks/form/_vue-tags-input.sass deleted file mode 100644 index faef8aeedc5..00000000000 --- a/app/javascript/stylesheets/shared/blocks/form/_vue-tags-input.sass +++ /dev/null @@ -1,12 +0,0 @@ -.vue-tags-input - max-width: 100% !important - -body .vue-tags-input - .ti-input - border-radius: 4px - background-color: var(--input-background) - border-color: var(--input-border) - transition: all .2s ease-out - &:hover - background-color: var(--input-hover-background) - border-color: var(--input-hover-border) diff --git a/app/javascript/stylesheets/shared/helpers/_state.sass b/app/javascript/stylesheets/shared/helpers/_state.sass deleted file mode 100644 index 1073db3d52d..00000000000 --- a/app/javascript/stylesheets/shared/helpers/_state.sass +++ /dev/null @@ -1,41 +0,0 @@ -@use "../../config/mixins/break-points" - -html - - *[hidden], - .is-hidden - display: none !important - - body - .is-hidden-lg-up - +break-points.media-breakpoint-up(lg) - display: none - - .is-hidden-lg-down - +break-points.media-breakpoint-down(lg) - display: none - - .is-hidden-md-up - +break-points.media-breakpoint-up(md) - display: none !important - - .is-hidden-md-down - +break-points.media-breakpoint-down(md) - display: none - - .is-hidden-sm-down - +break-points.media-breakpoint-down(sm) - display: none - -.is-only-mentor - body:not(.is-mentor-mode) & - display: none !important - -.is-only-adviser - body:not(.is-adviser-mode) & - display: none !important - - -body.is-mentor-mode .is-only-mentor.is-only-adviser, -body.is-adviser-mode .is-only-mentor.is-only-adviser - display: block !important diff --git a/app/javascript/stylesheets/shared/layouts/_columns.sass b/app/javascript/stylesheets/shared/layouts/_columns.sass deleted file mode 100644 index 478fcc36d92..00000000000 --- a/app/javascript/stylesheets/shared/layouts/_columns.sass +++ /dev/null @@ -1,3 +0,0 @@ -.columns - .columns + & - margin-top: 1.5rem diff --git a/app/javascript/stylesheets/shared/layouts/_container.sass b/app/javascript/stylesheets/shared/layouts/_container.sass deleted file mode 100644 index 1ca8a05e442..00000000000 --- a/app/javascript/stylesheets/shared/layouts/_container.sass +++ /dev/null @@ -1,26 +0,0 @@ -@use "../../config/mixins/break-points" - -.container - width: 100% - max-width: 100% - margin-inline: auto - +break-points.media-breakpoint-up(md) - padding-inline: 1.5rem - +break-points.media-breakpoint-down(sm) - padding-inline: 1rem - &.is-xxxl - max-width: 108rem - &.is-xxl - max-width: 96rem - &.is-xl - max-width: 80rem - &.is-lg - max-width: 64rem - &.is-md - max-width: 48rem - &.is-sm - width: 40rem - &.is-xs - width: 32rem - &.is-xxs - width: 28rem diff --git a/app/javascript/stylesheets/shared/layouts/_l-container.sass b/app/javascript/stylesheets/shared/layouts/_l-container.sass deleted file mode 100644 index cf1631b2821..00000000000 --- a/app/javascript/stylesheets/shared/layouts/_l-container.sass +++ /dev/null @@ -1,26 +0,0 @@ -@use "../../config/mixins/break-points" - -.l-container - width: 100% - max-width: 100vw - margin-inline: auto - +break-points.media-breakpoint-up(md) - padding-inline: 1.5rem - +break-points.media-breakpoint-down(sm) - padding-inline: 1rem - &.is-xxxl - max-width: 108rem - &.is-xxl - max-width: 96rem - &.is-xl - max-width: 80rem - &.is-lg - max-width: 64rem - &.is-md - max-width: 48rem - &.is-sm - width: 40rem - &.is-xs - width: 32rem - &.is-xxs - width: 28rem diff --git a/app/javascript/stylesheets/shared/layouts/_l-inner-container.sass b/app/javascript/stylesheets/shared/layouts/_l-inner-container.sass deleted file mode 100644 index ab6181f31c0..00000000000 --- a/app/javascript/stylesheets/shared/layouts/_l-inner-container.sass +++ /dev/null @@ -1,20 +0,0 @@ -.l-inner-container - width: 100% - max-width: calc(100vw - 32px) - margin-inline: auto - &.is-xxxl - max-width: 108rem - &.is-xxl - max-width: 96rem - &.is-xl - max-width: 80rem - &.is-lg - max-width: 64rem - &.is-md - max-width: 48rem - &.is-sm - width: 40rem - &.is-xs - width: 32rem - &.is-xxs - width: 28rem diff --git a/app/javascript/stylesheets/shared/layouts/_wrapper.sass b/app/javascript/stylesheets/shared/layouts/_wrapper.sass deleted file mode 100644 index 4efc77af482..00000000000 --- a/app/javascript/stylesheets/shared/layouts/_wrapper.sass +++ /dev/null @@ -1,13 +0,0 @@ -@use "../../config/mixins/break-points" - -.wrapper - min-height: 100vh - scroll-behavior: smooth - overflow-y: visible - height: auto - +break-points.media-breakpoint-up(md) - display: flex - flex-direction: column - -.wrapper__main - flex: 1 diff --git a/app/javascript/stylesheets/shared/test/_test.sass b/app/javascript/stylesheets/shared/test/_test.sass deleted file mode 100644 index b9c1e54d465..00000000000 --- a/app/javascript/stylesheets/shared/test/_test.sass +++ /dev/null @@ -1,11 +0,0 @@ -@use "../../config/mixins/position" - -html body.is-test - .wrapper - height: auto - .test-fixed-bottom - +position.position(fixed, right 10rem, bottom 10rem) - .test-inline-block - display: inline-block - .test-block - display: block diff --git a/app/jobs/bulk_embedding_job.rb b/app/jobs/bulk_embedding_job.rb new file mode 100644 index 00000000000..f76b0f43fa2 --- /dev/null +++ b/app/jobs/bulk_embedding_job.rb @@ -0,0 +1,75 @@ +# frozen_string_literal: true + +class BulkEmbeddingJob < ApplicationJob + queue_as :default + + def perform(model_name: nil, force_regenerate: false) + generator = SmartSearch::EmbeddingGenerator.new + unless generator.api_available? + Rails.logger.info '[SmartSearch] Bulk embedding skipped - API key not configured' + return + end + + models = model_name ? validate_and_wrap_model(model_name) : SmartSearch::Configuration::EMBEDDING_MODELS + models.each { |name| process_model(name, force_regenerate, generator) } + end + + def validate_and_wrap_model(model_name) + unless SmartSearch::Configuration::EMBEDDING_MODELS.include?(model_name) + Rails.logger.warn "[SmartSearch] Invalid model_name: #{model_name}. Skipping." + return [] + end + [model_name] + end + + private + + def process_model(model_name, force_regenerate, generator) + model_class = model_name.constantize + return unless model_class.column_names.include?('embedding') + + scope = force_regenerate ? model_class.all : model_class.where(embedding: nil) + total = scope.count + + Rails.logger.info "[SmartSearch] Processing #{total} #{model_name} records" + + scope.find_in_batches(batch_size: SmartSearch::Configuration::BATCH_SIZE) do |batch| + process_batch(batch, generator) + sleep(0.1) # Rate limiting to avoid API throttling + end + + Rails.logger.info "[SmartSearch] Completed #{model_name} embedding generation" + end + + def process_batch(records, generator) + valid_pairs = extract_valid_pairs(records) + return if valid_pairs.empty? + + embeddings = generator.generate_batch(valid_pairs.map(&:last)) + return unless valid_embedding_count?(embeddings, valid_pairs) + + update_embeddings(valid_pairs, embeddings) + rescue StandardError => e + Rails.logger.error "[SmartSearch] Batch processing failed: #{e.message}" + end + + def extract_valid_pairs(records) + texts = records.map(&:text_for_embedding) + records.zip(texts).select { |_, text| text.present? } + end + + def valid_embedding_count?(embeddings, valid_pairs) + return true if embeddings.size == valid_pairs.size + + Rails.logger.warn "[SmartSearch] Embedding count mismatch: expected #{valid_pairs.size}, got #{embeddings.size}" + false + end + + def update_embeddings(valid_pairs, embeddings) + valid_pairs.each_with_index do |(record, _), index| + next if embeddings[index].blank? + + record.update_column(:embedding, embeddings[index]) # rubocop:disable Rails/SkipsModelValidations + end + end +end diff --git a/app/jobs/embedding_generate_job.rb b/app/jobs/embedding_generate_job.rb new file mode 100644 index 00000000000..98defe1ed45 --- /dev/null +++ b/app/jobs/embedding_generate_job.rb @@ -0,0 +1,27 @@ +# frozen_string_literal: true + +class EmbeddingGenerateJob < ApplicationJob + queue_as :default + + retry_on StandardError, wait: :polynomially_longer, attempts: 3 + + def perform(model_name:, record_id:) + model_class = model_name.safe_constantize + return if model_class.nil? + + record = model_class.find_by(id: record_id) + return if record.nil? + + generator = SmartSearch::EmbeddingGenerator.new + return unless generator.api_available? + + text = record.text_for_embedding + return if text.blank? + + embedding = generator.generate(text) + return if embedding.blank? + + record.update_column(:embedding, embedding) # rubocop:disable Rails/SkipsModelValidations + Rails.logger.info "[SmartSearch] Generated embedding for #{model_name}##{record_id}" + end +end diff --git a/app/models/concerns/searchable.rb b/app/models/concerns/searchable.rb index da8a0e54c91..60c8d202df0 100644 --- a/app/models/concerns/searchable.rb +++ b/app/models/concerns/searchable.rb @@ -5,6 +5,13 @@ module Searchable REQUIRED_SEARCH_METHODS = %i[search_title search_label search_url].freeze + # ベクトル類似度検索はSemanticSearcherで生SQLを使用して処理 + # クラスロード時のデータベース利用可否問題を回避するため + + included do + after_commit :schedule_embedding_generation, on: %i[create update], if: :should_generate_embedding? + end + class_methods do def columns_for_keyword_search(*columns) define_singleton_method :ransackable_attributes do |_auth_object = nil| @@ -88,4 +95,30 @@ def user_role(user = self) 'student' if user.student? end + + # embedding生成用のテキストを返す + # 各モデルで必要に応じてオーバーライド + def text_for_embedding + text = [try(:title), try(:description)].compact.join("\n\n") + truncate_for_embedding(text) + end + + private + + def truncate_for_embedding(text) + return nil if text.blank? + + max_length = SmartSearch::Configuration::MAX_TEXT_LENGTH + text.length > max_length ? text[0...max_length] : text + end + + def schedule_embedding_generation + EmbeddingGenerateJob.perform_later(model_name: self.class.name, record_id: id) + end + + def should_generate_embedding? + return false unless self.class.column_names.include?('embedding') + + SmartSearch::Configuration::EMBEDDING_MODELS.include?(self.class.name) + end end diff --git a/app/models/image.rb b/app/models/image.rb index d7a73613377..9fcf7220427 100644 --- a/app/models/image.rb +++ b/app/models/image.rb @@ -3,4 +3,24 @@ class Image < ApplicationRecord belongs_to :user has_one_attached :image + + after_commit :strip_exif, on: :create + + private + + def strip_exif + original_image = image + copied_image = MiniMagick::Image.read(original_image.download) + copied_image.strip + + ext = File.extname(original_image.filename.to_s) + timestamp = Time.current.strftime('%Y%m%d%H%M%S%L') + File.open(copied_image.path) do |file| + original_image.attach(io: file, filename: "#{user.id}_#{timestamp}#{ext}") + end + rescue StandardError => e + Rails.logger.error("Failed to strip EXIF: #{e.message}") + ensure + copied_image&.destroy! + end end diff --git a/app/models/practice.rb b/app/models/practice.rb index 749c27e3304..986ce8ae0eb 100644 --- a/app/models/practice.rb +++ b/app/models/practice.rb @@ -143,6 +143,11 @@ def body [description, goal].join("\n") end + def text_for_embedding + text = [title, description, goal].compact.join("\n\n") + truncate_for_embedding(text) + end + def product(user) products.find_by(user:) end diff --git a/app/models/product.rb b/app/models/product.rb index 6a889aecf89..538feb83cd2 100644 --- a/app/models/product.rb +++ b/app/models/product.rb @@ -115,6 +115,10 @@ def learning ) end + def text_for_embedding + truncate_for_embedding(body) + end + def last_commented_user Rails.cache.fetch "/model/product/#{id}/last_commented_user" do commented_users.last diff --git a/app/models/searcher.rb b/app/models/searcher.rb index 705c37815a8..697a94a89b8 100644 --- a/app/models/searcher.rb +++ b/app/models/searcher.rb @@ -1,32 +1,83 @@ # frozen_string_literal: true class Searcher - attr_reader :keyword, :document_type, :current_user, :only_me + MODES = %i[keyword semantic hybrid].freeze + MODES_FOR_SELECT = [ + %w[キーワード検索 keyword], + %w[AI検索 semantic], + %w[ハイブリッド hybrid] + ].freeze + + attr_reader :keyword, :document_type, :current_user, :only_me, :mode def self.split_keywords(text) text.to_s.split(/[[:blank:]]+/).reject(&:blank?) end - def initialize(keyword:, current_user:, document_type: :all, only_me: false) + def initialize(keyword:, current_user:, document_type: :all, only_me: false, mode: :keyword) @keyword = keyword.to_s.strip @document_type = validate_document_type(document_type) @only_me = only_me @current_user = current_user + @mode = validate_mode(mode) end def search return [] if keyword.blank? - query_builder = QueryBuilder.new(keyword) - type_searcher = TypeSearcher.new(query_builder, document_type) - filter = Filter.new(current_user, only_me:) + results = case mode + when :keyword then keyword_search + when :semantic then semantic_search + when :hybrid then hybrid_search + end - results = type_searcher.search + filter = Filter.new(current_user, only_me:) filter.apply(results) end private + def keyword_search + query_builder = QueryBuilder.new(keyword) + type_searcher = TypeSearcher.new(query_builder, document_type) + type_searcher.search + end + + def semantic_search + searcher = SmartSearch::SemanticSearcher.new + searcher.search(keyword, document_type:) + end + + def hybrid_search + keyword_results = keyword_search + semantic_results = semantic_search + + merge_results(semantic_results, keyword_results) + end + + def merge_results(primary, secondary) + seen_ids = {} + merged = [] + + primary.each do |record| + key = "#{record.class.name}-#{record.id}" + next if seen_ids[key] + + merged << record + seen_ids[key] = true + end + + secondary.each do |record| + key = "#{record.class.name}-#{record.id}" + next if seen_ids[key] + + merged << record + seen_ids[key] = true + end + + merged + end + def validate_document_type(document_type) type_sym = document_type&.to_sym || :all available_keys = Configuration.available_types + [:all] @@ -35,4 +86,12 @@ def validate_document_type(document_type) raise ArgumentError, "Invalid document_type: #{document_type}. Available types: #{available_keys.join(', ')}" end + + def validate_mode(mode) + mode_sym = mode&.to_sym || :keyword + return mode_sym if MODES.include?(mode_sym) + + Rails.logger.warn "[Searcher] Invalid mode: #{mode.inspect}. Fallback to :keyword" + :keyword + end end diff --git a/app/models/smart_search/configuration.rb b/app/models/smart_search/configuration.rb new file mode 100644 index 00000000000..d4140567bc8 --- /dev/null +++ b/app/models/smart_search/configuration.rb @@ -0,0 +1,23 @@ +# frozen_string_literal: true + +module SmartSearch + class Configuration + EMBEDDING_DIMENSION = 1536 + BATCH_SIZE = 50 + MAX_TEXT_LENGTH = 8000 + DEFAULT_LIMIT = 50 + + # embeddingカラムを持つモデル + # CorrectAnswerはAnswerのembeddingを使用（STI） + EMBEDDING_MODELS = %w[ + Practice Report Product Page Question Announcement + Event RegularEvent Answer Comment + ].freeze + + class << self + def embedding_models + EMBEDDING_MODELS.map(&:constantize) + end + end + end +end diff --git a/app/models/smart_search/embedding_generator.rb b/app/models/smart_search/embedding_generator.rb new file mode 100644 index 00000000000..3a7413ab319 --- /dev/null +++ b/app/models/smart_search/embedding_generator.rb @@ -0,0 +1,69 @@ +# frozen_string_literal: true + +module SmartSearch + class EmbeddingGenerator + MODEL = 'text-embedding-3-small' + + def initialize + @api_available = ENV['OPEN_AI_ACCESS_TOKEN'].present? + end + + def api_available? + @api_available + end + + def generate(text) + return nil unless api_available? + return nil if text.blank? + + normalized = normalize_text(text) + return nil if normalized.blank? + + response = RubyLLM.embed(normalized, model: MODEL) + response.vectors + rescue StandardError => e + Rails.logger.error "[SmartSearch] Embedding generation failed: #{e.message}" + nil + end + + def generate_batch(texts) + return [] unless api_available? + return [] if texts.blank? + + valid_entries = extract_valid_entries(texts) + return Array.new(texts.size) if valid_entries.empty? + + vectors = fetch_embeddings(valid_entries.map(&:first)) + build_result_array(texts.size, valid_entries, vectors) + rescue StandardError => e + Rails.logger.error "[SmartSearch] Batch embedding generation failed: #{e.message}" + [] + end + + private + + def extract_valid_entries(texts) + texts.each_with_index.map { |t, i| [normalize_text(t), i] }.reject { |t, _| t.blank? } + end + + def fetch_embeddings(valid_texts) + RubyLLM.embed(valid_texts, model: MODEL).vectors + end + + def build_result_array(size, valid_entries, vectors) + result = Array.new(size) + valid_entries.each_with_index do |(_, original_index), response_index| + result[original_index] = vectors[response_index] + end + result + end + + def normalize_text(text) + return '' if text.blank? + + sanitized = ActionView::Base.full_sanitizer.sanitize(text) + sanitized = sanitized.gsub(/\s+/, ' ').strip + sanitized.truncate(Configuration::MAX_TEXT_LENGTH, omission: '') + end + end +end diff --git a/app/models/smart_search/semantic_searcher.rb b/app/models/smart_search/semantic_searcher.rb new file mode 100644 index 00000000000..8db3a21b565 --- /dev/null +++ b/app/models/smart_search/semantic_searcher.rb @@ -0,0 +1,87 @@ +# frozen_string_literal: true + +module SmartSearch + class SemanticSearcher + def initialize + @generator = EmbeddingGenerator.new + end + + def search(query, document_type: :all, limit: Configuration::DEFAULT_LIMIT) + perform_search(query, document_type, limit) + rescue StandardError => e + Rails.logger.error "[SmartSearch] Semantic search failed: #{e.message}" + [] + end + + private + + def perform_search(query, document_type, limit) + return [] if query.blank? + + limit = normalize_limit(limit) + return [] unless @generator.api_available? + + query_embedding = @generator.generate(query) + return [] if query_embedding.blank? + + results = search_by_type(query_embedding, document_type, limit) + results.sort_by { |r| r[:distance] }.first(limit).map { |r| r[:record] } + end + + def normalize_limit(limit) + normalized = limit.to_i + normalized.positive? ? normalized : Configuration::DEFAULT_LIMIT + end + + def search_by_type(query_embedding, document_type, limit) + if document_type == :all + search_all_types(query_embedding, limit) + else + search_specific_type(query_embedding, document_type, limit) + end + end + + def search_all_types(query_embedding, limit) + Configuration.embedding_models.flat_map do |model_class| + search_model(model_class, query_embedding, limit) + end + end + + def search_specific_type(query_embedding, document_type, limit) + model_class = type_to_model(document_type) + return [] unless model_class + + search_model(model_class, query_embedding, limit) + end + + def search_model(model_class, query_embedding, limit) + return [] unless model_class.column_names.include?('embedding') + return [] unless valid_embedding?(query_embedding) + + table_name = model_class.connection.quote_table_name(model_class.table_name) + embedding_str = "[#{query_embedding.map(&:to_f).join(',')}]" + quoted_embedding = model_class.connection.quote(embedding_str) + + model_class + .where.not(embedding: nil) + .select(Arel.sql("#{table_name}.*, embedding <=> #{quoted_embedding} AS neighbor_distance")) + .order(Arel.sql("embedding <=> #{quoted_embedding}")) + .limit(limit) + .map { |record| { record:, distance: record.neighbor_distance } } + rescue StandardError => e + Rails.logger.error "[SmartSearch] Search failed for #{model_class}: #{e.message}" + [] + end + + def valid_embedding?(embedding) + embedding.is_a?(Array) && embedding.all? { |v| v.is_a?(Numeric) } + end + + def type_to_model(document_type) + return nil if document_type.blank? + + config = Searcher::Configuration::CONFIGS[document_type.to_sym] + config&.dig(:model) + end + end +end diff --git a/app/views/admin/_admin_page_tabs.html.slim b/app/views/admin/_admin_page_tabs.html.slim index 7f14e02f03b..fcf0a950dbc 100644 --- a/app/views/admin/_admin_page_tabs.html.slim +++ b/app/views/admin/_admin_page_tabs.html.slim @@ -33,3 +33,7 @@ = link_to '給付金対応コース受講申請', admin_grant_course_applications_path, class: "page-tabs__item-link #{current_link(/^admin-grant_course_applications/)}" + li.page-tabs__item + = link_to 'Embedding', + admin_embedding_status_index_path, + class: "page-tabs__item-link #{current_link(/^admin-embedding_status/)}" diff --git a/app/views/admin/embedding_status/index.html.slim b/app/views/admin/embedding_status/index.html.slim new file mode 100644 index 00000000000..b3172f67878 --- /dev/null +++ b/app/views/admin/embedding_status/index.html.slim @@ -0,0 +1,102 @@ +- title 'Embedding' + +header.page-header + .container + .page-header__inner + .page-header__start + h2.page-header__title + | 管理ページ + += render 'admin/admin_page_tabs' + +main.page-main + header.page-main-header + .container + .page-main-header__inner + .page-main-header__start + h1.page-main-header__title + | Embedding + .page-main-header__end + .page-main-header-actions + .page-main-header-actions__items + .page-main-header-actions__item + = link_to '/jobs', + class: 'a-button is-md is-secondary is-block', + target: '_blank', rel: 'noopener' do + i.fa-solid.fa-gears + span + | ジョブ管理 + hr.a-border + .page-body + .container.is-lg + / モデル別進捗 + .admin-table + table.admin-table__table + thead.admin-table__header + tr.admin-table__labels + th.admin-table__label + | モデル + th.admin-table__label + | 進捗 + th.admin-table__label.text-right + | 生成済み + th.admin-table__label.text-right + | 全件 + th.admin-table__label.text-right + | 進捗率 + tbody.admin-table__items + - @embedding_stats.each do |stat| + tr.admin-table__item + td.admin-table__item-value + = stat[:model_name] + td.admin-table__item-value + .embedding-status-progress + .embedding-status-progress__bar( + style="width: #{stat[:percentage]}%;" + class="#{stat[:percentage] >= 100 ? 'is-complete' : ''}") + td.admin-table__item-value.text-right + = number_with_delimiter(stat[:with_embedding]) + td.admin-table__item-value.text-right + = number_with_delimiter(stat[:total]) + td.admin-table__item-value.text-right + = "#{stat[:percentage]}%" + .a-card.mb-8 + .a-card__body + .completed-practices-progress + .completed-practices-progress__bar-container + .completed-practices-progress__bar + - stats_pct = @total_stats[:percentage] + - pct = number_to_percentage stats_pct, precision: 0 + .completed-practices-progress__percentage-bar( + aria-valuemax='100' + aria-valuemin='0' + aria-valuenow="#{@total_stats[:percentage]}" + role='progressbar' + style="width: #{pct};") + .completed-practices-progress__counts + .completed-practices-progress__counts-inner + .completed-practices-progress__percentage + = "#{@total_stats[:percentage]}%" + .completed-practices-progress__number + = "#{@total_stats[:with_embedding]} / #{@total_stats[:total]}" + + .a-card.mt-8 + header.card-header + h2.card-header__title + | Embedding生成コマンド + hr.a-border-tint + .card-body + .card-body__description + pre: code + | + # 未生成レコードの一括生成 + rails smart_search:generate_all + + # 特定モデルのみ生成 + rails smart_search:generate[Practice] + + # 全レコード再生成 + rails smart_search:regenerate_all + + # 統計表示 + rails smart_search:stats diff --git a/app/views/admin/invitation_url/index.html.slim b/app/views/admin/invitation_url/index.html.slim index 36ff6d50ec0..8e9b420b42b 100644 --- a/app/views/admin/invitation_url/index.html.slim +++ b/app/views/admin/invitation_url/index.html.slim @@ -17,31 +17,31 @@ header.page-header hr.a-border .page-body .container.is-lg - .invitation.flex.flex-col.gap-4 - .invitation__elements.flex.gap-4.flex-col(class='md:flex-row') - .invitation__element.flex-1 + .invitation(class='!flex !flex-col !gap-4') + .invitation__elements(class='!flex !gap-4 !flex-col md:!flex-row') + .invitation__element(class='!flex-1') = label_tag :company, '企業', class: 'a-form-label' .a-button.is-md.is-secondary.is-select.is-block = select_tag :company, options_from_collection_for_select(Company.order(created_at: :desc), :id, :name), class: 'js-invitation-company' - .invitation__element.flex-1 + .invitation__element(class='!flex-1') = label_tag :role, 'ロール', class: 'a-form-label' .a-button.is-md.is-secondary.is-select.is-block = select_tag :role, options_for_select(User::INVITATION_ROLES), class: 'js-invitation-role' - .invitation__element.flex-1 + .invitation__element(class='!flex-1') = label_tag :course, 'コース', class: 'a-form-label' .a-button.is-md.is-secondary.is-select.is-block = select_tag :course, options_from_collection_for_select(Course.order(:created_at), :id, :title), class: 'js-invitation-course' .invitation__url data-invitation-url-template=@invitation_url_template .a-form-label | URL - .invitation__url-inner.flex.gap-1 + .invitation__url-inner(class='!flex !gap-1') input.js-invitation-url-text.a-text-input(type="text") - a.js-invitation-url.a-button.is-md.is-secondary.is-icon(class='h-[2.375rem]') + a.js-invitation-url.a-button.is-md.is-secondary.is-icon(class='!h-[2.375rem]') i.fa-solid.fa-arrow-up-right-from-square .grant_invitation_url .a-form-label 給金対応コース登録URL - .invitation__url-inner.flex.gap-1 + .invitation__url-inner(class='!flex !gap-1') input.a-text-input(type="text" value="#{new_grant_course_user_url}") = link_to new_grant_course_user_url, - class: 'a-button is-md is-secondary is-icon h-[2.375rem]' do + class: 'a-button is-md is-secondary is-icon !h-[2.375rem]' do i.fa-solid.fa-arrow-up-right-from-square diff --git a/app/views/admin/users/_table.html.slim b/app/views/admin/users/_table.html.slim index e5570274089..4ace9f5908d 100644 --- a/app/views/admin/users/_table.html.slim +++ b/app/views/admin/users/_table.html.slim @@ -29,7 +29,7 @@ tbody.admin-table__items - users.each do |user| - next if params[:target] == 'campaign' && user.adviser? - tr.admin-table__item class="text-center #{user.retired_on? ? 'is-retired' : ''} #{user.hibernated? ? 'is-retired' : ''}" + tr.admin-table__item class="!text-center #{user.retired_on? ? 'is-retired' : ''} #{user.hibernated? ? 'is-retired' : ''}" td.admin-table__item-value - if user.admin? && user.mentor? span.admin-table__role @@ -68,7 +68,7 @@ br span.a-badge.is-secondary.is-xs | 非ア - td.admin-table__item-value.text-left + td.admin-table__item-value(class='!text-left') = link_to user, class: 'admin-table__user', target: '_blank', rel: 'noopener' do span.admin-table__user-icon span class=user.user_icon_frame_class @@ -76,45 +76,45 @@ span.admin-table__user-login-name = user.login_name | （#{user.name}） - td.admin-table__item-value.text-center + td.admin-table__item-value(class='!text-center') = user.email - td.admin-table__item-value.text-center + td.admin-table__item-value(class='!text-center') - if user.company.present? = user.company.name - else | - - td.admin-table__item-value.text-center - span.whitespace-nowrap + td.admin-table__item-value(class='!text-center') + span(class='!whitespace-nowrap') - if user.job = t("activerecord.enums.user.job.#{user.job}") - else | 回答なし - td.admin-table__item-value.text-center + td.admin-table__item-value(class='!text-center') - if user.job_seeker? | 希望する - else | 希望しない - td.admin-table__item-value.text-center + td.admin-table__item-value(class='!text-center') - if user.discord_profile.present? = user.discord_profile.account_name || '-' - td.admin-table__item-value.text-center + td.admin-table__item-value(class='!text-center') - if user.last_activity_at? = l user.last_activity_at - td.admin-table__item-value.text-center + td.admin-table__item-value(class='!text-center') = l user.created_at - td.admin-table__item-value.text-center + td.admin-table__item-value(class='!text-center') - if user.talk - = link_to '相談部屋', talk_url(user.talk, anchor: 'latest-comment'), class: 'whitespace-nowrap' + = link_to '相談部屋', talk_url(user.talk, anchor: 'latest-comment'), class: '!whitespace-nowrap' - else | - - td.admin-table__item-value.text-center + td.admin-table__item-value(class='!text-center') - if user.trainee && !user.invoice_payment | クレジットカード払い - elsif user.trainee && user.invoice_payment | 請求書払い - else | - - td.admin-table__item-value.text-center + td.admin-table__item-value(class='!text-center') - if user.card? = link_to user.customer_url, class: 'a-button is-sm is-success is-icon', @@ -122,7 +122,7 @@ i.fa-solid.fa-credit-card - else | - - td.admin-table__item-value.text-center + td.admin-table__item-value(class='!text-center') - if user.subscription_id? = link_to user.subscription_url, class: 'subscription-status', @@ -132,7 +132,7 @@ i.fa-solid.fa-spinner.fa-pulse - else | - - td.admin-table__item-value.text-center + td.admin-table__item-value(class='!text-center') = link_to edit_admin_user_path(user), id: "edit-#{user.id}", class: 'a-button is-sm is-secondary is-icon' do i.fa-solid.fa-pen diff --git a/app/views/application/header/_header.html.slim b/app/views/application/header/_header.html.slim index aa2cf0e1a9e..86f7c7de493 100644 --- a/app/views/application/header/_header.html.slim +++ b/app/views/application/header/_header.html.slim @@ -1,5 +1,5 @@ header.header - .container.pr-0.h-full + .container(class='!pr-0 !h-full') .header__inner .header__start = link_to root_path, class: 'header__title' do diff --git a/app/views/application/header/_header_links.html.slim b/app/views/application/header/_header_links.html.slim index 168c112b10d..117c8951386 100644 --- a/app/views/application/header/_header_links.html.slim +++ b/app/views/application/header/_header_links.html.slim @@ -4,7 +4,8 @@ = render 'application/header/header_search', select_id: 'header-search-select', text_field_id: 'header-search-word', - submit_id: 'test-search' + submit_id: 'test-search', + mode_id_prefix: 'header-mode' li.header-links__item button.header-links__link.test-show-menu.js-modal-search-shown-trigger .header-links__link-icon @@ -54,4 +55,5 @@ = render 'application/header/header_search', select_id: 'header-search-select-modal', text_field_id: 'header-search-word-modal', - submit_id: 'test-search-modal' + submit_id: 'test-search-modal', + mode_id_prefix: 'modal-mode' diff --git a/app/views/application/header/_header_search.html.slim b/app/views/application/header/_header_search.html.slim index 633a4fb1026..6118b8a93a9 100644 --- a/app/views/application/header/_header_search.html.slim +++ b/app/views/application/header/_header_search.html.slim @@ -6,10 +6,17 @@ | カテゴリー .a-button.is-md.is-secondary.is-select.is-block = select_tag 'document_type', options_for_select(Searcher::Configuration.available_types_for_select, params[:document_type]), id: select_id - - if Switchlet.enabled?('smart_search') + - if smart_search_available? .form-item label.a-form-label | 検索方法 + ul.block-checks.is-vertical + - Searcher::MODES_FOR_SELECT.each do |label, value| + li.block-checks__item + .a-block-check.is-radio + = radio_button_tag 'mode', value, (params[:mode] || 'keyword') == value, id: "#{mode_id_prefix}-#{value}", class: 'a-toggle-checkbox' + label.a-block-check__label(for="#{mode_id_prefix}-#{value}") + = label .form-item label.a-form-label | 絞り込み条件 diff --git a/app/views/companies/users/_user.html.slim b/app/views/companies/users/_user.html.slim index d1fa4a2dd09..1d705b124ad 100644 --- a/app/views/companies/users/_user.html.slim +++ b/app/views/companies/users/_user.html.slim @@ -49,7 +49,7 @@ i.fa-brands.fa-discord | #{user.discord_profile.account_name} = render 'user_sns', user: - .card-counts.is-users.mt-3(v-if='user.student_or_trainee') + .card-counts.is-users(class='!mt-3' v-if='user.student_or_trainee') dl.card-counts__items .card-counts__item .card-counts__item-inner diff --git a/app/views/current_user/bookmarks/_list.html.slim b/app/views/current_user/bookmarks/_list.html.slim index 6d6d8a817c8..2a4412f2a84 100644 --- a/app/views/current_user/bookmarks/_list.html.slim +++ b/app/views/current_user/bookmarks/_list.html.slim @@ -27,7 +27,7 @@ hr.a-border - if bookmark.bookmarkable_type == 'Talk' = image_tag bookmark.bookmarkable.user.avatar_url, class: 'card-list-item__user-icon a-user-icon' - else - .card-list-item__label = bookmark.bookmarkable.model_name.human + .card-list-item__label = bookmarkable_label(bookmark.bookmarkable) .card-list-item__rows .card-list-item__row diff --git a/app/views/generations/_user_activity_counts.html.slim b/app/views/generations/_user_activity_counts.html.slim index 96d0bdf80b4..5b09b6e8267 100644 --- a/app/views/generations/_user_activity_counts.html.slim +++ b/app/views/generations/_user_activity_counts.html.slim @@ -1,5 +1,5 @@ - if user.student_or_trainee? - .card-counts.is-users.mt-3 + .card-counts.is-users(class='!mt-3') dl.card-counts__items .card-counts__item .card-counts__item-inner diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim index 2a98f7a9372..85763c24253 100644 --- a/app/views/layouts/application.html.slim +++ b/app/views/layouts/application.html.slim @@ -5,13 +5,13 @@ html.is-application lang='ja' = display_meta_tags default_meta_tags = render 'layouts/common/common_head' - if page_classes.include?('welcome') - = stylesheet_pack_tag 'lp', media: 'all' + = stylesheet_link_tag 'lp', media: 'all' - if page_classes.include?('welcome-home') link(rel='canonical' href='https://bootcamp.fjord.jp/') - else = render 'available_emojis' = render 'stripe' - = stylesheet_pack_tag 'application', media: 'all' + = stylesheet_link_tag 'application', media: 'all' = render 'x' if Rails.env.production? = content_for(:head_last) if content_for?(:head_last) body.is-application#body(class="#{body_class}") diff --git a/app/views/layouts/common/_common_head.html.slim b/app/views/layouts/common/_common_head.html.slim index 7f6cf894a95..afe46068a6e 100644 --- a/app/views/layouts/common/_common_head.html.slim +++ b/app/views/layouts/common/_common_head.html.slim @@ -15,6 +15,7 @@ link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=true = stylesheet_link_tag 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap', media: 'all' = stylesheet_link_tag 'https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp_s.css', media: 'all' = stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Source+Code+Pro', media: 'all' += stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Fira+Mono', media: 'all' // Feed = auto_discovery_link_tag(:atom, 'https://bootcamp.fjord.jp/articles.atom', { title: 'フィヨルドブートキャンプブログ' }) diff --git a/app/views/layouts/lp.html.slim b/app/views/layouts/lp.html.slim index 62bbaee1a1f..164965fb66e 100644 --- a/app/views/layouts/lp.html.slim +++ b/app/views/layouts/lp.html.slim @@ -8,7 +8,7 @@ html.is-lp lang='ja' - if defined?(@article) && @article.wip? = meta_robots_tag = render 'layouts/common/common_head' - = stylesheet_pack_tag 'lp', media: 'all' + = stylesheet_link_tag 'lp', media: 'all' = render 'layouts/lp/lp_web_fonts' = render 'x' if Rails.env.production? = content_for(:head_last) if content_for?(:head_last) diff --git a/app/views/layouts/not_logged_in.html.slim b/app/views/layouts/not_logged_in.html.slim index 943e5e07285..1cb1f2bf545 100644 --- a/app/views/layouts/not_logged_in.html.slim +++ b/app/views/layouts/not_logged_in.html.slim @@ -3,7 +3,7 @@ html lang='ja' head = display_meta_tags default_meta_tags = render 'layouts/common/common_head' - = stylesheet_pack_tag 'not-logged-in', media: 'all' + = stylesheet_link_tag 'not-logged-in', media: 'all' = content_for(:head_last) if content_for?(:head_last) body.is-not-logged-in(class="#{body_class}") .not-logged-in-wrapper diff --git a/app/views/layouts/paper.html.slim b/app/views/layouts/paper.html.slim index 2878efcdb4a..0b98998b8b3 100644 --- a/app/views/layouts/paper.html.slim +++ b/app/views/layouts/paper.html.slim @@ -3,6 +3,6 @@ html(lang='ja') head = javascript_include_tag 'application' = javascript_pack_tag 'application' - = stylesheet_pack_tag 'paper', media: 'all' + = stylesheet_link_tag 'paper', media: 'all' body = yield diff --git a/app/views/pages/_doc_movie_header.html.slim b/app/views/pages/_doc_movie_header.html.slim index 559b1374703..c80fd20f137 100644 --- a/app/views/pages/_doc_movie_header.html.slim +++ b/app/views/pages/_doc_movie_header.html.slim @@ -3,8 +3,7 @@ header.page-header .page-header__inner .page-header__start h2.page-header__title - - if Rails.env.production? - // 動画リンクを隠した状態でのリリース。リリース後にDocs・動画に変更する - | Docs - - else + - if movie_available? | Docs・動画 + - else + | Docs diff --git a/app/views/pages/_tabs.html.slim b/app/views/pages/_tabs.html.slim index e792a6ff63a..f0d3c3ed859 100644 --- a/app/views/pages/_tabs.html.slim +++ b/app/views/pages/_tabs.html.slim @@ -4,8 +4,7 @@ li.page-tabs__item = link_to pages_path, class: "page-tabs__item-link #{current_link(/^pages/)}" | Docs - - unless Rails.env.production? - // リンクを隠した状態でのリリース + - if movie_available? li.page-tabs__item = link_to movies_path, class: "page-tabs__item-link #{current_link(/^movies/)}" | 動画 diff --git a/app/views/regular_events/_regular_event.html.slim b/app/views/regular_events/_regular_event.html.slim index 84d12102223..a60ee33c111 100644 --- a/app/views/regular_events/_regular_event.html.slim +++ b/app/views/regular_events/_regular_event.html.slim @@ -35,6 +35,18 @@ .page-content-header-actions .page-content-header-actions__start = render 'watches/watch_toggle', type: regular_event.class.to_s, id: regular_event.id, watch: regular_event.watch_by(current_user) + .page-content-header-actions__action + button( + type="button" + id="bookmark-button" + data-bookmarkable-id="#{regular_event.id}" + data-bookmarkable-type="RegularEvent" + class="a-bookmark-button a-button is-sm is-block is-inactive is-muted" + disabled + aria-pressed="false" + aria-busy="true" + ) + | Bookmark .page-content-header-actions__end .page-content-header-actions__action = link_to new_regular_event_path(id: regular_event), class: 'a-button is-sm is-secondary is-block', id: 'copy' do diff --git a/app/views/reports/_learning_time_fields.html.slim b/app/views/reports/_learning_time_fields.html.slim index f36e0b18696..f6479fafc5f 100644 --- a/app/views/reports/_learning_time_fields.html.slim +++ b/app/views/reports/_learning_time_fields.html.slim @@ -2,7 +2,8 @@ .form-times .form-times__inner - tag = '
'\ - '
' + '
'\ + '
' .form-times__items.learning-time .form-times__time = f.label :started_at, class: 'form-times__time-label' diff --git a/app/views/talks/show.html.slim b/app/views/talks/show.html.slim index 682607817a4..92a4deeeee6 100644 --- a/app/views/talks/show.html.slim +++ b/app/views/talks/show.html.slim @@ -10,7 +10,7 @@ .page-body .container.is-xxl - .row.justify-center + .row(class='!justify-center') .col-xl-7.col-xs-12 .talk.page-content header.page-content-header diff --git a/app/views/users/_learning_time_frames.html.slim b/app/views/users/_learning_time_frames.html.slim index b64e675f025..1430bf1a1ef 100644 --- a/app/views/users/_learning_time_frames.html.slim +++ b/app/views/users/_learning_time_frames.html.slim @@ -2,8 +2,8 @@ .card-header.is-sm h2.card-header__title | 主な活動予定時間 - .a-table.is-sm.text-center - table.w-full + .a-table.is-sm(class='!text-center') + table(class='!w-full') thead tr th @@ -11,16 +11,15 @@ th = day tbody#learning_time_frame - 24.times do |hour| - tr(class='hover:bg-[var(--background-more-tint)]') - th.text-center + tr(class='hover:!bg-[var(--background-more-tint)]') + th(class='!text-center') | #{hour}:00 - 7.times do |day_index| - value = day_index * 24 + hour + 1 - - name = "checked_#{value}" - if user.learning_time_frames.ids.include?(value) - td.p-0.h-6 name=name - span.flex.h-full.text-center.justify-center.items-center.p-1.border.border-solid.rounded(class='text-[var(--main)] bg-[var(--input-selected-background)] border-[var(--main)]') + td(class='!p-0 !h-6' name="checked_#{value}") + span(class='!flex !h-full !text-center !justify-center !items-center !p-1 !border !border-solid !rounded !text-[var(--main)] !bg-[var(--input-selected-background)] !border-[var(--main)]') i.fa-duotone.fa-solid.fa-check - else - td.p-0.h-6 - span.flex.h-full.text-center.justify-center.items-center.p-1.rounded + td(class='!p-0 !h-6') + span(class='!flex !h-full !text-center !justify-center !items-center !p-1 !rounded') diff --git a/app/views/users/_user.html.slim b/app/views/users/_user.html.slim index eb553f81f31..d90e4657687 100644 --- a/app/views/users/_user.html.slim +++ b/app/views/users/_user.html.slim @@ -53,7 +53,7 @@ .card-list-item__row = render 'users/sns', user: user - if user.student_or_trainee? - .card-counts.is-users.mt-3 + .card-counts.is-users(class='!mt-3') = render 'users/activity_counts', user: user .users-item__body .users-item__description.a-short-text diff --git a/app/views/users/events/index.html.slim b/app/views/users/events/index.html.slim index 9043f84f490..deb9c99791a 100644 --- a/app/views/users/events/index.html.slim +++ b/app/views/users/events/index.html.slim @@ -5,7 +5,6 @@ = user_page_tabs(@user, active_tab: 'イベント') .page-main - hr.a-border .page-body .page-body__inner.has-side-nav .container.is-md diff --git a/app/views/users/form/_learning_time_frames.html.slim b/app/views/users/form/_learning_time_frames.html.slim index d77992055dc..4d2116e2e99 100644 --- a/app/views/users/form/_learning_time_frames.html.slim +++ b/app/views/users/form/_learning_time_frames.html.slim @@ -6,8 +6,8 @@ br | この情報は他のフィヨルドブートキャンプ参加者に公開され、 | ペアワークや就職相談、勉強会、輪読会などのイベント開催を行う際の参考に使われます。 - .form-table.is-sm.max-h-96.is-sticky.mt-4 - table.min-w-full + .form-table.is-sm.is-sticky(class='!max-h-96 !mt-4') + table(class='!min-w-full') thead tr th @@ -16,7 +16,7 @@ tbody#learning_time_frame = hidden_field_tag 'user[learning_time_frame_ids][]', '' - 24.times do |hour| - tr(class='hover:bg-[var(--background-more-tint)]') + tr(class='hover:!bg-[var(--background-more-tint)]') th | #{hour}:00 - 7.times do |day_index| diff --git a/app/views/users/show.html.slim b/app/views/users/show.html.slim index e1108bdacf8..6be94494287 100644 --- a/app/views/users/show.html.slim +++ b/app/views/users/show.html.slim @@ -32,93 +32,92 @@ | このページは他のユーザーから見た、あなたのプロフィールページです。 | （ #{link_to '登録情報変更', edit_current_user_path} ） .container(class="#{visible_learning_time_frames?(@user) ? 'is-xxl' : 'is-xl'}") - .columns - .row - .col-xs-12(class="#{visible_learning_time_frames?(@user) ? 'col-lg-4 col-xxl-5' : 'col-lg-6 col-xxl-6'}") - .page-content.is-user - = render 'users/profile', user: @user - .card-counts.is-user - = render 'users/activity_counts', user: @user - .a-card - .user-data + .row + .col-xs-12(class="#{visible_learning_time_frames?(@user) ? 'col-lg-4 col-xxl-5' : 'col-lg-6 col-xxl-6'}") + .page-content.is-user + = render 'users/profile', user: @user + .card-counts.is-user + = render 'users/activity_counts', user: @user + .a-card + .user-data + .user-data__row + .user-data__description.a-short-text.is-md + = auto_link simple_format h @user.description + - if @user.tag_list.present? || current_user == @user .user-data__row - .user-data__description.a-short-text.is-md - = auto_link simple_format h @user.description - - if @user.tag_list.present? || current_user == @user - .user-data__row - .user-data__tags - = render(Tag::FormComponent.new(taggable: @user, param_name: 'user[tag_list]', input_id: 'user_tag_list', editable: (@user.id == current_user.id))) - - if admin_or_mentor_login? && @user.hibernated? - .user-data__row - = render 'users/hibernation_info', user: @user - - if admin_or_mentor_login? && @user.training_completed? - .user-data__row - = render 'users/training_completion_info', user: @user - - if admin_or_mentor_login? && @user.retired? - .user-data__row - = render 'users/retire_info', user: @user - - if admin_or_mentor_login? && @user.student_or_trainee_or_retired? - .user-data__row - = render 'users/user_secret_attributes', user: @user + .user-data__tags + = render(Tag::FormComponent.new(taggable: @user, param_name: 'user[tag_list]', input_id: 'user_tag_list', editable: (@user.id == current_user.id))) + - if admin_or_mentor_login? && @user.hibernated? .user-data__row - = render 'users/metas', user: @user, user_course_practice: UserCoursePractice.new(@user) + = render 'users/hibernation_info', user: @user + - if admin_or_mentor_login? && @user.training_completed? + .user-data__row + = render 'users/training_completion_info', user: @user + - if admin_or_mentor_login? && @user.retired? + .user-data__row + = render 'users/retire_info', user: @user + - if admin_or_mentor_login? && @user.student_or_trainee_or_retired? + .user-data__row + = render 'users/user_secret_attributes', user: @user + .user-data__row + = 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 @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? - = render(Calendar::NicoNicoCalendarComponent.new(user: @user, path: :niconico_calendar_date_in_profile_path, current_date: @calendar.current_date, current_calendar: @calendar.with_reports)) - - if @user.github_account.present? - = render 'users/github_grass', user: @user - - if @user.completed_practices.present? - - cache [@user, @completed_learnings] do - = render '/users/practices/completed_practices', user: @user, completed_learnings: @completed_learnings - - if admin_login? - .a-card.is-only-mentor - .card-header.is-sm - h2.card-header__title - | ステータス変更 - hr.a-border-tint - .user-statuses - .user-statuses__items - .user-statuses__item - = link_to '管理者として情報変更', edit_admin_user_path, class: 'card-main-actions__action a-button is-sm is-secondary is-block' - .user-statuses__item - - if @user.graduated? - .a-button.is-sm.is-disabled.is-block - | 卒業済 - - else - = link_to '卒業にする', user_graduation_path(@user, redirect_url: "/users/#{@user.id}"), - method: :patch, - data: { confirm: '本当によろしいですか？' }, - class: 'a-button is-sm is-danger is-block' - - if @user != current_user - .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) + .col-xs-12(class="#{visible_learning_time_frames?(@user) ? 'col-lg-4 col-xxl-4' : 'col-lg-6 col-xxl-6'}") + - 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? + = render(Calendar::NicoNicoCalendarComponent.new(user: @user, path: :niconico_calendar_date_in_profile_path, current_date: @calendar.current_date, current_calendar: @calendar.with_reports)) + - if @user.github_account.present? + = render 'users/github_grass', user: @user + - if @user.completed_practices.present? + - cache [@user, @completed_learnings] do + = render '/users/practices/completed_practices', user: @user, completed_learnings: @completed_learnings + - if admin_login? + .a-card.is-only-mentor + .card-header.is-sm + h2.card-header__title + | ステータス変更 + hr.a-border-tint + .user-statuses + .user-statuses__items + .user-statuses__item + = link_to '管理者として情報変更', edit_admin_user_path, class: 'card-main-actions__action a-button is-sm is-secondary is-block' + .user-statuses__item + - if @user.graduated? + .a-button.is-sm.is-disabled.is-block + | 卒業済 - 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 + = link_to '卒業にする', user_graduation_path(@user, redirect_url: "/users/#{@user.id}"), + method: :patch, + data: { confirm: '本当によろしいですか？' }, + class: 'a-button is-sm is-danger is-block' + - if @user != current_user + .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 - = render 'users/learning_time_frames', user: @user + - if visible_learning_time_frames?(@user) + .col-xs-12.col-lg-4.col-xxl-3 + = render 'users/learning_time_frames', user: @user diff --git a/app/views/welcome/_campaign.html.slim b/app/views/welcome/_campaign.html.slim index 615d33c49dc..7e546924968 100644 --- a/app/views/welcome/_campaign.html.slim +++ b/app/views/welcome/_campaign.html.slim @@ -11,6 +11,10 @@ section.lp-content.is-top-title.is-campaign .lp-content__end .lp-content__description .a-short-text + h3.font-semibold.text-center + | お試し期間が + = '倍以上に' if trial_period >= 6 + | 延長 p.font-semibold | #{l Campaign.recently_campaign.first, format: :mdw_unique}〜 | #{l Campaign.recently_campaign.last, format: :mdw_unique}の期間中にご入会いただくと、 diff --git a/app/views/welcome/choose_courses.html.slim b/app/views/welcome/choose_courses.html.slim index 7a18350ec4f..c62af229669 100644 --- a/app/views/welcome/choose_courses.html.slim +++ b/app/views/welcome/choose_courses.html.slim @@ -8,7 +8,7 @@ .lp-page-header__inner h1.lp-page-header__title | 参加登録 - i.fa-solid.fa-right(class='mx-[0.5em]') + i.fa-solid.fa-right(class='!mx-[0.5em]') = title .lp @@ -17,7 +17,7 @@ .lp-content__inner .lp-content__start header.lp-content__header - h2.lp-content-title.text-center.is-border-bottom + h2.lp-content-title.is-border-bottom(class='!text-center') | コースを選択してください。 .lp-content__end section.lp-content-stack @@ -36,8 +36,8 @@ | コース選びに迷ったら、まずはRailsエンジニアコースを選んでみてください。 | 入会後はメンターに相談ができるので、その時にしっかり考えましょう。 | 途中でのコースの変更、卒業後に別コースの必要なカリキュラムだけを受講することも可能です。 - .a-notice-block.is-danger.mt-4 - p.text-base + .a-notice-block.is-danger(class='!mt-4') + p(class='!text-base') | 受講料の最大80%の給付金が適用される専門実践教育訓練給付制度対象講座 | 「給付金対象Railsエンジニアコース」は = link_to certified_reskill_courses_rails_developer_course_root_path do diff --git a/app/views/welcome/logo.html.slim b/app/views/welcome/logo.html.slim index c36da9ad530..0724612ab36 100644 --- a/app/views/welcome/logo.html.slim +++ b/app/views/welcome/logo.html.slim @@ -66,7 +66,7 @@ hr.a-border p | 縦組と横組みのバリエーションがあります。 | 表示領域に合わせてより視認性が高い方を使用してください。 - .inline-grid.gap-8.w-auto.mt-0(class='grid-cols-[auto,auto]') + div(class='!grid-cols-[auto_auto] !inline-grid !gap-8 !w-auto !mt-0') .m-0 h5 | 縦組み @@ -81,13 +81,13 @@ hr.a-border h3 色 p ロゴはブルー、背景色が指定できる場合はホワイトを使用してください。 - .inline-grid.gap-8.w-auto.mt-0(class='grid-cols-[auto,auto]') - .m-0 + div(class='!grid-cols-[auto_auto] !inline-grid !gap-8 !w-auto !mt-0') + div(class='!m-0') h5 ブルー - .grid.gap-4.m-0(class='grid-cols-[auto,1fr]') - .m-0 + div(class='!grid-cols-[auto,1fr] !grid !gap-4 !m-0') + div(class='!m-0') .h-10.w-10(class='bg-[#4843c2] md:h-16 md:w-16') - .m-0 + div(class='!m-0') ul li | HEX #4843c2 @@ -97,12 +97,12 @@ hr.a-border | CMYK(82, 74, 0, 0) li | DIC 185 - .m-0 + div(class='!m-0') h5 ホワイト - .grid.gap-4.m-0(class='grid-cols-[auto,1fr]') - .m-0 + div(class='!grid-cols-[auto,1fr] !grid !gap-4 !m-0') + div(class='!m-0') .border.border-gray-200.bg-white.border-solid.h-10.w-10(class='md:h-16 md:w-16') - .m-0 + div(class='!m-0') ul li | HEX #fff @@ -128,11 +128,11 @@ hr.a-border h3 余白 p ロゴの周囲には、「FBC」の高さの1/3以上の余白を確保してください。 - .inline-grid.gap-8.w-auto.mt-0(class='grid-cols-[auto,auto]') - .m-0 + div(class='!grid-cols-[auto_auto] !inline-grid !gap-8 !w-auto !mt-0') + div(class='!m-0') p = image_tag('press-kit/isolation-vertical.png', alt: 'logo', class: 'block w-80') - .m-0 + div(class='!m-0') p = image_tag('press-kit/isolation-horizontal.png', alt: 'logo', class: 'block w-100') @@ -140,59 +140,59 @@ hr.a-border p | 背景によってロゴの視認性が悪くなる場合、ホワイトにするか、 | ホワイトで縁取りを施してください。 - .inline-grid.gap-8.w-auto.mt-0(class='grid-cols-[auto,auto]') - .m-0 + div(class='!grid-cols-[auto_auto] !inline-grid !gap-8 !w-auto !mt-0') + div(class='!m-0') p = image_tag('press-kit/background-blue.png', alt: 'logo', class: 'block w-80') - .m-0 + div(class='!m-0') p = image_tag('press-kit/background-people.png', alt: 'logo', class: 'block w-80') h3 使用禁止例 p 下記のような色や割合、配列など、ロゴの要素変更をしないようにしてください。 .grid.gap-8.grid-cols-3(class='md:grid-cols-4') - .m-0 - p.m-0 + div(class='!m-0') + p(class='!m-0') = image_tag('press-kit/ng-1.png', alt: 'logo', class: 'block w-80') - p.mt-2.leading-snug + p(class='!mt-2 !leading-snug') | 縦横比を変える。 - .m-0 - p.m-0 + div(class='!m-0') + p(class='!m-0') = image_tag('press-kit/ng-2.png', alt: 'logo', class: 'block w-80') - p.mt-2.leading-snug + p(class='!mt-2 !leading-snug') | 色を変える。 - .m-0 - p.m-0 + div(class='!m-0') + p(class='!m-0') = image_tag('press-kit/ng-3.png', alt: 'logo', class: 'block w-80') - p.mt-2.leading-snug + p(class='!mt-2 !leading-snug') | 回転する。 - .m-0 - p.m-0 + div(class='!m-0') + p(class='!m-0') = image_tag('press-kit/ng-4.png', alt: 'logo', class: 'block w-80') - p.mt-2.leading-snug + p(class='!mt-2 !leading-snug') | 半透明にする。 - .m-0 - p.m-0 + div(class='!m-0') + p(class='!m-0') = image_tag('press-kit/ng-5.png', alt: 'logo', class: 'block w-80') - p.mt-2.leading-snug + p(class='!mt-2 !leading-snug') | 影を付ける。 - .m-0 - p.m-0 + div(class='!m-0') + p(class='!m-0') = image_tag('press-kit/ng-6.png', alt: 'logo', class: 'block w-80') - p.mt-2.leading-snug + p(class='!mt-2 !leading-snug') | トリミングする。 - .m-0 - p.m-0 + div(class='!m-0') + p(class='!m-0') = image_tag('press-kit/ng-7.png', alt: 'logo', class: 'block w-80') - p.mt-2.leading-snug + p(class='!mt-2 !leading-snug') | ぼかす。 - .m-0 - p.m-0 + div(class='!m-0') + p(class='!m-0') = image_tag('press-kit/ng-8.png', alt: 'logo', class: 'block w-80') - p.mt-2.leading-snug + p(class='!mt-2 !leading-snug') | 文章の一部に使う。 - .m-0 - p.m-0 + div(class='!m-0') + p(class='!m-0') = image_tag('press-kit/ng-9.png', alt: 'logo', class: 'block w-80') - p.mt-2.leading-snug + p(class='!mt-2 !leading-snug') | 視認性が悪い。 diff --git a/bin/dev b/bin/dev index 5f91c205453..8807c1928a5 100755 --- a/bin/dev +++ b/bin/dev @@ -1,2 +1,2 @@ -#!/usr/bin/env ruby -exec "./bin/rails", "server", *ARGV +#!/usr/bin/env sh +exec foreman start -f Procfile.dev "$@" diff --git a/config/cache.yml b/config/cache.yml new file mode 100644 index 00000000000..ae55ceb3cd3 --- /dev/null +++ b/config/cache.yml @@ -0,0 +1,15 @@ +default: &default + store_options: + # Cap age of oldest cache entry to fulfill retention policies + # max_age: <%= 60.days.to_i %> + max_size: <%= 256.megabytes %> + namespace: <%= Rails.env %> + +development: + <<: *default + +test: + <<: *default + +production: + <<: *default diff --git a/config/environments/production.rb b/config/environments/production.rb index 5b027499de2..9577d8579f2 100644 --- a/config/environments/production.rb +++ b/config/environments/production.rb @@ -47,7 +47,7 @@ config.active_support.report_deprecations = false # Replace the default in-process memory cache store with a durable alternative. - config.cache_store = :memory_store, { size: 128.megabytes } + config.cache_store = :solid_cache_store # Use a real queuing backend for Active Job (and separate queues per environment). config.active_job.queue_adapter = :solid_queue diff --git a/config/initializers/ruby_llm.rb b/config/initializers/ruby_llm.rb new file mode 100644 index 00000000000..a03e9903cd4 --- /dev/null +++ b/config/initializers/ruby_llm.rb @@ -0,0 +1,5 @@ +# frozen_string_literal: true + +RubyLLM.configure do |config| + config.openai_api_key = ENV['OPEN_AI_ACCESS_TOKEN'] +end diff --git a/config/queue.yml b/config/queue.yml index 9eace59c41e..47c6814bf54 100644 --- a/config/queue.yml +++ b/config/queue.yml @@ -4,7 +4,7 @@ default: &default batch_size: 500 workers: - queues: "*" - threads: 3 + threads: 1 processes: <%= ENV.fetch("JOB_CONCURRENCY", 1) %> polling_interval: 0.1 diff --git a/config/routes/admin.rb b/config/routes/admin.rb index ea07e35e9b9..83a1ab9c835 100644 --- a/config/routes/admin.rb +++ b/config/routes/admin.rb @@ -19,5 +19,6 @@ end resources :grant_course_applications, only: %i(index show) resources :course_diffs, only: %i(index show) + resources :embedding_status, only: %i(index) end end diff --git a/config/webpack/environment.js b/config/webpack/environment.js index ac1241b01a0..15777e4785c 100644 --- a/config/webpack/environment.js +++ b/config/webpack/environment.js @@ -10,20 +10,6 @@ environment.config.resolve.alias = { // Configure public path for CSS assets - use relative path in production environment.config.output.publicPath = '/packs/' -// Fix sass-loader to handle Rails asset helpers -const sassLoader = environment.loaders.get('sass') -const sassLoaderConfig = sassLoader.use.find(use => use.loader === 'sass-loader') -if (sassLoaderConfig) { - sassLoaderConfig.options = sassLoaderConfig.options || {} - sassLoaderConfig.options.sassOptions = sassLoaderConfig.options.sassOptions || {} - sassLoaderConfig.options.sassOptions.functions = { - 'image-url($path)': function(path) { - const sass = require('sass') - const pathValue = path.getValue().replace(/['"]/g, '') - return new sass.types.String(`url("~images/${pathValue}")`) - } - } -} module.exports = environment function hotfixPostcssLoaderConfig (subloader) { diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js index 9ee7afe9b60..994a258a4e7 100644 --- a/config/webpack/webpack.config.js +++ b/config/webpack/webpack.config.js @@ -1,42 +1,9 @@ // See the shakacode/shakapacker README and docs directory for advice on customizing your webpackConfig. const { generateWebpackConfig } = require('shakapacker') -const sassEmbedded = require('sass-embedded') const webpack = require('webpack') const webpackConfig = generateWebpackConfig() -const normalizeUseEntries = (use) => { - if (!use) return [] - return Array.isArray(use) ? use : [use] -} - -const visitRule = (rule) => { - if (!rule) return - normalizeUseEntries(rule.use).forEach((loaderConfig, index, array) => { - const loaderPath = typeof loaderConfig === 'string' ? loaderConfig : loaderConfig.loader - if (!loaderPath || !loaderPath.includes('sass-loader')) return - - if (typeof loaderConfig === 'string') { - array[index] = loaderConfig = { loader: loaderPath, options: {} } - } - - loaderConfig.options = loaderConfig.options || {} - loaderConfig.options.implementation = sassEmbedded - loaderConfig.options.api = 'modern' - const sassOptions = loaderConfig.options.sassOptions || {} - const silence = new Set(sassOptions.silenceDeprecations || []) - ;['legacy-js-api', 'import', 'global-builtin'].forEach((id) => silence.add(id)) - loaderConfig.options.sassOptions = { - ...sassOptions, - silenceDeprecations: Array.from(silence) - } - }) - - normalizeUseEntries(rule.oneOf).forEach(visitRule) -} - -normalizeUseEntries(webpackConfig.module?.rules).forEach(visitRule) - // Add custom configuration for JSX files webpackConfig.module.rules.push({ test: /\.jsx?$/, diff --git a/db/migrate/20201203035119_add_index_to_reactions.rb b/db/migrate/20201203035119_add_index_to_reactions.rb index 5a7efb902ab..3de2a54648d 100644 --- a/db/migrate/20201203035119_add_index_to_reactions.rb +++ b/db/migrate/20201203035119_add_index_to_reactions.rb @@ -2,10 +2,6 @@ class AddIndexToReactions < ActiveRecord::Migration[6.0] def change - # インデックス名の長さ制限を超えてしまうため短い名前にする - add_index :reactions, - %i[user_id reactionable_id reactionable_type kind], - unique: true, - name: 'index_reactions_on_reactionable_u_k' + add_index :reactions, [:user_id, :reactionable_id, :reactionable_type, :kind], unique: true, name: 'index_reactions_on_reactionable' end end diff --git a/db/migrate/20240321092012_create_movies.rb b/db/migrate/20240321092012_create_movies.rb index ab915be43a3..5640ff2ce76 100644 --- a/db/migrate/20240321092012_create_movies.rb +++ b/db/migrate/20240321092012_create_movies.rb @@ -3,9 +3,7 @@ def change create_table :movies do |t| t.string :title , null: false t.text :description - t.string :tag_list - t.references :user, foreign_key: true, null: false - t.references :practice, foreign_key: true + t.references :user, foreign_key: true, null: true t.timestamps end diff --git a/db/migrate/20250618142946_add_index_on_source_id_to_practices.rb b/db/migrate/20250618142946_add_index_on_source_id_to_practices.rb new file mode 100644 index 00000000000..973c8fdfdac --- /dev/null +++ b/db/migrate/20250618142946_add_index_on_source_id_to_practices.rb @@ -0,0 +1,5 @@ +class AddIndexOnSourceIdToPractices < ActiveRecord::Migration[6.1] + def change + add_index :practices, :source_id + end +end diff --git a/db/migrate/20250618144325_add_foreign_key_to_practices_source_id.rb b/db/migrate/20250618144325_add_foreign_key_to_practices_source_id.rb new file mode 100644 index 00000000000..0c658a29717 --- /dev/null +++ b/db/migrate/20250618144325_add_foreign_key_to_practices_source_id.rb @@ -0,0 +1,5 @@ +class AddForeignKeyToPracticesSourceId < ActiveRecord::Migration[6.1] + def change + add_foreign_key :practices, :practices, column: :source_id + end +end diff --git a/db/migrate/20260117205428_create_solid_cache_entries.rb b/db/migrate/20260117205428_create_solid_cache_entries.rb new file mode 100644 index 00000000000..38f2aeac1c6 --- /dev/null +++ b/db/migrate/20260117205428_create_solid_cache_entries.rb @@ -0,0 +1,18 @@ +# frozen_string_literal: true + +class CreateSolidCacheEntries < ActiveRecord::Migration[8.1] + def change + return if table_exists?(:solid_cache_entries) + + create_table "solid_cache_entries", force: :cascade do |t| + t.binary "key", limit: 1024, null: false + t.binary "value", limit: 536870912, null: false + t.datetime "created_at", null: false + t.integer "key_hash", limit: 8, null: false + t.integer "byte_size", limit: 4, null: false + t.index ["byte_size"], name: "index_solid_cache_entries_on_byte_size" + t.index ["key_hash", "byte_size"], name: "index_solid_cache_entries_on_key_hash_and_byte_size" + t.index ["key_hash"], name: "index_solid_cache_entries_on_key_hash", unique: true + end + end +end diff --git a/db/migrate/20260119100000_enable_vector_extension.rb b/db/migrate/20260119100000_enable_vector_extension.rb new file mode 100644 index 00000000000..1a489ba453e --- /dev/null +++ b/db/migrate/20260119100000_enable_vector_extension.rb @@ -0,0 +1,9 @@ +# frozen_string_literal: true + +class EnableVectorExtension < ActiveRecord::Migration[8.1] + def change + enable_extension 'vector' + rescue ActiveRecord::StatementInvalid + # pgvector is not available on this PostgreSQL server, skip + end +end diff --git a/db/migrate/20260119100001_add_embedding_to_searchable_tables.rb b/db/migrate/20260119100001_add_embedding_to_searchable_tables.rb new file mode 100644 index 00000000000..67814591757 --- /dev/null +++ b/db/migrate/20260119100001_add_embedding_to_searchable_tables.rb @@ -0,0 +1,29 @@ +# frozen_string_literal: true + +class AddEmbeddingToSearchableTables < ActiveRecord::Migration[8.1] + # CorrectAnswer is STI of Answer, so it shares the answers table + # User, Movie, Talk include Searchable but don't need embedding + TABLES = %i[ + practices reports products pages questions announcements + events regular_events answers comments + ].freeze + + def change + # pgvectorが利用不可の環境（テスト用SQLite等）ではスキップ + return unless vector_extension_available? + + TABLES.each do |table| + add_column table, :embedding, :vector, limit: 1536 + end + end + + private + + def vector_extension_available? + # 前のマイグレーションで有効化されていなければ、ここで試みる + execute("CREATE EXTENSION IF NOT EXISTS vector") + true + rescue ActiveRecord::StatementInvalid + false + end +end diff --git a/db/schema.rb b/db/schema.rb index 9a20b345b88..099dbfff895 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -10,7 +10,7 @@ # # It's strongly recommended that you check this file into your version control system. -ActiveRecord::Schema[8.1].define(version: 2026_01_07_094500) do +ActiveRecord::Schema[8.1].define(version: 2026_01_19_100001) do # These are extensions that must be enabled in order to support this database enable_extension "pg_catalog.plpgsql" enable_extension "pgcrypto" @@ -264,9 +264,6 @@ t.index ["course_id", "category_id"], name: "index_courses_categories_on_course_id_and_category_id", unique: true end - create_table "data_migrations", primary_key: "version", id: :string, force: :cascade do |t| - end - create_table "discord_profiles", force: :cascade do |t| t.string "account_name" t.datetime "created_at", null: false @@ -751,6 +748,17 @@ t.index ["user_id", "practice_id"], name: "index_skipped_practices_on_user_id_and_practice_id", unique: true end + create_table "solid_cache_entries", force: :cascade do |t| + t.integer "byte_size", null: false + t.datetime "created_at", null: false + t.binary "key", null: false + t.bigint "key_hash", null: false + t.binary "value", null: false + t.index ["byte_size"], name: "index_solid_cache_entries_on_byte_size" + t.index ["key_hash", "byte_size"], name: "index_solid_cache_entries_on_key_hash_and_byte_size" + t.index ["key_hash"], name: "index_solid_cache_entries_on_key_hash", unique: true + end + create_table "solid_queue_blocked_executions", force: :cascade do |t| t.string "concurrency_key", null: false t.datetime "created_at", null: false @@ -1004,7 +1012,6 @@ t.boolean "invoice_payment", default: false, null: false t.integer "job" t.boolean "job_seeker", default: false, null: false - t.boolean "job_seeking", default: false, null: false t.datetime "last_activity_at" t.integer "last_negative_report_id" t.string "login_name", limit: 255, null: false diff --git a/lib/tasks/bootcamp.rake b/lib/tasks/bootcamp.rake index d85a65d5f51..13a001169df 100644 --- a/lib/tasks/bootcamp.rake +++ b/lib/tasks/bootcamp.rake @@ -110,7 +110,7 @@ namespace :bootcamp do task cloudbuild: :environment do puts '== START Cloud Build Task ==' - Rake::Task['bootcamp:copy_practices'].invoke + Rake::Task['smart_search:generate_all'].invoke puts '== END Cloud Build Task ==' end diff --git a/lib/tasks/smart_search.rake b/lib/tasks/smart_search.rake new file mode 100644 index 00000000000..ff233d926a6 --- /dev/null +++ b/lib/tasks/smart_search.rake @@ -0,0 +1,138 @@ +# frozen_string_literal: true + +namespace :smart_search do # rubocop:disable Metrics/BlockLength + desc 'Generate embeddings for all searchable models' + task generate_all: :environment do # rubocop:disable Metrics/BlockLength + generator = SmartSearch::EmbeddingGenerator.new + puts "[SmartSearch] OPEN_AI_ACCESS_TOKEN present: #{ENV['OPEN_AI_ACCESS_TOKEN'].present?}" + puts "[SmartSearch] API available: #{generator.api_available?}" + + # Check pgvector extension status + begin + result = ActiveRecord::Base.connection.execute("SELECT 1 FROM pg_extension WHERE extname = 'vector'") + puts "[SmartSearch] pgvector extension installed: #{result.any?}" + + if result.any? + version = ActiveRecord::Base.connection.execute("SELECT extversion FROM pg_extension WHERE extname = 'vector'").first + puts "[SmartSearch] pgvector version: #{version['extversion']}" if version + end + rescue ActiveRecord::StatementInvalid => e + puts "[SmartSearch] Error checking pgvector: #{e.message}" + end + + # Check migration status for embedding columns + migration_name = 'AddEmbeddingToSearchableTables' + migration_executed = ActiveRecord::Base.connection.execute( + "SELECT version FROM schema_migrations WHERE version = '20260119100001'" + ).any? + puts "[SmartSearch] Migration #{migration_name} executed: #{migration_executed}" + + unless generator.api_available? + puts '[SmartSearch] Skipped - API key not configured' + next + end + + # embeddingカラムが存在しない場合、直接追加を試みる + conn = ActiveRecord::Base.connection + tables = %w[practices reports products pages questions announcements events regular_events answers comments] + missing_tables = tables.reject { |t| conn.column_exists?(t, :embedding) } + if missing_tables.any? + puts "[SmartSearch] Missing embedding column in: #{missing_tables.join(', ')}" + puts '[SmartSearch] Attempting to add embedding columns...' + missing_tables.each do |table| + conn.execute("ALTER TABLE #{table} ADD COLUMN embedding vector(1536)") + puts "[SmartSearch] Added embedding column to #{table}" + rescue StandardError => e + puts "[SmartSearch] Failed to add column to #{table}: #{e.message}" + end + # カラムキャッシュをリセット + SmartSearch::Configuration::EMBEDDING_MODELS.each { |m| m.constantize.reset_column_information } + end + + SmartSearch::Configuration::EMBEDDING_MODELS.each do |model_name| + model_class = model_name.constantize + unless model_class.column_names.include?('embedding') + puts "[SmartSearch] #{model_name}: embedding column not found, skipping" + next + end + total = model_class.count + pending = model_class.where(embedding: nil).count + puts "[SmartSearch] #{model_name}: #{pending}/#{total} pending" + end + + BulkEmbeddingJob.perform_now + + puts '[SmartSearch] Done. Final stats:' + SmartSearch::Configuration::EMBEDDING_MODELS.each do |model_name| + model_class = model_name.constantize + next unless model_class.column_names.include?('embedding') + + total = model_class.count + done = model_class.where.not(embedding: nil).count + puts "[SmartSearch] #{model_name}: #{done}/#{total} embedded" + end + end + + desc 'Generate embeddings for a specific model (e.g., rails smart_search:generate[Practice])' + task :generate, [:model_name] => :environment do |_, args| + model_name = args[:model_name] + abort 'Please specify a model name' if model_name.blank? + + allowed_models = SmartSearch::Configuration::EMBEDDING_MODELS + abort "Invalid model: #{model_name}. Allowed models: #{allowed_models.join(', ')}" unless allowed_models.include?(model_name) + + BulkEmbeddingJob.perform_now(model_name:) + end + + desc 'Regenerate all embeddings (force update)' + task regenerate_all: :environment do + BulkEmbeddingJob.perform_now(force_regenerate: true) + end + + desc 'Show embedding statistics' + task stats: :environment do + puts 'Embedding Statistics:' + puts '-' * 50 + + total_all = 0 + with_embedding_all = 0 + + SmartSearch::Configuration::EMBEDDING_MODELS.each do |model_name| + model_class = model_name.constantize + next unless model_class.column_names.include?('embedding') + + total = model_class.count + with_embedding = model_class.where.not(embedding: nil).count + percentage = total.positive? ? (with_embedding.to_f / total * 100).round(1) : 0 + + puts "#{model_name.ljust(20)}: #{with_embedding}/#{total} (#{percentage}%)" + + total_all += total + with_embedding_all += with_embedding + rescue NameError, ActiveRecord::StatementInvalid => e + puts "#{model_name.ljust(20)}: Error - #{e.message}" + end + + puts '-' * 50 + overall_percentage = total_all.positive? ? (with_embedding_all.to_f / total_all * 100).round(1) : 0 + puts "Total: #{with_embedding_all}/#{total_all} (#{overall_percentage}%)" + end + + desc 'Test embedding generation with a sample text' + task :test, [:text] => :environment do |_, args| + text = args[:text] || 'This is a test text for embedding generation' + generator = SmartSearch::EmbeddingGenerator.new + + abort 'Error: OPEN_AI_ACCESS_TOKEN is not configured' unless generator.api_available? + + puts "Generating embedding for: #{text.truncate(50)}" + embedding = generator.generate(text) + + if embedding.is_a?(Array) + puts "Success! Generated embedding with #{embedding.size} dimensions" + puts "First 5 values: #{embedding.first(5).map { |v| v.round(6) }}" + else + puts 'Failed to generate embedding' + end + end +end diff --git a/lib/tasks/tailwindcss.rake b/lib/tasks/tailwindcss.rake new file mode 100644 index 00000000000..feed5905748 --- /dev/null +++ b/lib/tasks/tailwindcss.rake @@ -0,0 +1,62 @@ +# frozen_string_literal: true + +# Clear the default tailwindcss:build task before redefining +Rake::Task['tailwindcss:build'].clear if Rake::Task.task_defined?('tailwindcss:build') +Rake::Task['tailwindcss:watch'].clear if Rake::Task.task_defined?('tailwindcss:watch') + +TAILWIND_STYLESHEETS = %w[application lp not-logged-in paper].freeze + +def tailwind_build_command(input, output, watch: false) + command = [ + Tailwindcss::Ruby.executable, + '-i', input.to_s, + '-o', output.to_s, + '--cwd', Rails.root.to_s + ] + command << '--minify' unless watch + command << '-w' if watch + command +end + +# rubocop:disable Metrics/BlockLength +namespace :tailwindcss do + desc 'Build all Tailwind CSS files' + task build: :environment do + TAILWIND_STYLESHEETS.each do |stylesheet| + input = Rails.root.join("app/assets/stylesheets/#{stylesheet}.css") + output = Rails.root.join("app/assets/builds/#{stylesheet}.css") + + next unless File.exist?(input) + + puts "Building #{stylesheet}.css..." + system(*tailwind_build_command(input, output), exception: true) + end + end + + desc 'Watch and build Tailwind CSS files on changes' + task watch: :environment do + pids = [] + + TAILWIND_STYLESHEETS.each do |stylesheet| + input = Rails.root.join("app/assets/stylesheets/#{stylesheet}.css") + output = Rails.root.join("app/assets/builds/#{stylesheet}.css") + + next unless File.exist?(input) + + puts "Watching #{stylesheet}.css..." + pids << spawn(*tailwind_build_command(input, output, watch: true)) + end + + trap('INT') do + pids.each do |pid| + Process.kill('INT', pid) + rescue StandardError + nil + end + exit + end + + Process.waitall + end +end +# rubocop:enable Metrics/BlockLength diff --git a/package-lock.json b/package-lock.json index 38f00dace23..74bb0e85df0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50,11 +50,6 @@ "markdown-it-regexp": "^0.4.0", "markdown-it-task-lists": "^2.1.1", "mem": "^4.0.0", - "postcss": "^8.4.31", - "postcss-flexbugs-fixes": "^5.0.2", - "postcss-import": "^15.1.0", - "postcss-loader": "^7.0.0", - "postcss-preset-env": "7", "prettier-config-standard": "^5.0.0", "prismjs": "^1.30.0", "process": "^0.11.10", @@ -64,9 +59,6 @@ "react_ujs": "^2.5.0", "react-dom": "^18.3.1", "react-router-dom": "^6.4.1", - "sass": "^1.83.1", - "sass-embedded": "^1.83.0", - "sass-loader": "^14.2.1", "select2": "^4.0.7-rc.0", "set-value": "^4.0.1", "shakapacker": "9.5.0", @@ -74,7 +66,6 @@ "stimulus": "^3.2.2", "sweetalert2": "^11.1.5", "swr": "^1.3.0", - "tailwindcss": "^3.1.8", "terser-webpack-plugin": "^5.3.10", "textarea-markdown": "^1.6.1", "tributejs": "^5.1.3", @@ -126,18 +117,6 @@ "node": ">=0.10.0" } }, - "node_modules/@alloc/quick-lru": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", - "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", - "license": "MIT", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/@asamuzakjp/css-color": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz", @@ -1780,7 +1759,9 @@ "version": "2.10.2", "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.10.2.tgz", "integrity": "sha512-uFsRXwIGyu+r6AMdz+XijIIZJYpoWeYzILt5yZ2d3mCjQrWUTVpVD9WL/jZAbvp+Ed04rOhrsk7FiTcEDseB5A==", - "license": "(Apache-2.0 AND BSD-3-Clause)" + "license": "(Apache-2.0 AND BSD-3-Clause)", + "optional": true, + "peer": true }, "node_modules/@codemirror/autocomplete": { "version": "0.20.3", @@ -1985,328 +1966,6 @@ "node": ">=18" } }, - "node_modules/@csstools/postcss-cascade-layers": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.1.1.tgz", - "integrity": "sha512-+KdYrpKC5TgomQr2DlZF4lDEpHcoxnj5IGddYYfBWJAKfj1JtuHUIqMa+E1pJJ+z3kvDViWMqyqPlG4Ja7amQA==", - "license": "CC0-1.0", - "dependencies": { - "@csstools/selector-specificity": "^2.0.2", - "postcss-selector-parser": "^6.0.10" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/@csstools/postcss-cascade-layers/node_modules/@csstools/selector-specificity": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz", - "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==", - "license": "CC0-1.0", - "engines": { - "node": "^14 || ^16 || >=18" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss-selector-parser": "^6.0.10" - } - }, - "node_modules/@csstools/postcss-cascade-layers/node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@csstools/postcss-color-function": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-1.1.1.tgz", - "integrity": "sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==", - "license": "CC0-1.0", - "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^1.1.0", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/@csstools/postcss-font-format-keywords": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-1.0.1.tgz", - "integrity": "sha512-ZgrlzuUAjXIOc2JueK0X5sZDjCtgimVp/O5CEqTcs5ShWBa6smhWYbS0x5cVc/+rycTDbjjzoP0KTDnUneZGOg==", - "license": "CC0-1.0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/@csstools/postcss-hwb-function": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-1.0.2.tgz", - "integrity": "sha512-YHdEru4o3Rsbjmu6vHy4UKOXZD+Rn2zmkAmLRfPet6+Jz4Ojw8cbWxe1n42VaXQhD3CQUXXTooIy8OkVbUcL+w==", - "license": "CC0-1.0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/@csstools/postcss-ic-unit": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-1.0.1.tgz", - "integrity": "sha512-Ot1rcwRAaRHNKC9tAqoqNZhjdYBzKk1POgWfhN4uCOE47ebGcLRqXjKkApVDpjifL6u2/55ekkpnFcp+s/OZUw==", - "license": "CC0-1.0", - "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^1.1.0", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/@csstools/postcss-is-pseudo-class": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-2.0.7.tgz", - "integrity": "sha512-7JPeVVZHd+jxYdULl87lvjgvWldYu+Bc62s9vD/ED6/QTGjy0jy0US/f6BG53sVMTBJ1lzKZFpYmofBN9eaRiA==", - "license": "CC0-1.0", - "dependencies": { - "@csstools/selector-specificity": "^2.0.0", - "postcss-selector-parser": "^6.0.10" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/@csstools/postcss-is-pseudo-class/node_modules/@csstools/selector-specificity": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz", - "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==", - "license": "CC0-1.0", - "engines": { - "node": "^14 || ^16 || >=18" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss-selector-parser": "^6.0.10" - } - }, - "node_modules/@csstools/postcss-is-pseudo-class/node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@csstools/postcss-nested-calc": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-1.0.0.tgz", - "integrity": "sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==", - "license": "CC0-1.0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/@csstools/postcss-normalize-display-values": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-1.0.1.tgz", - "integrity": "sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==", - "license": "CC0-1.0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/@csstools/postcss-oklab-function": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.1.tgz", - "integrity": "sha512-nJpJgsdA3dA9y5pgyb/UfEzE7W5Ka7u0CX0/HIMVBNWzWemdcTH3XwANECU6anWv/ao4vVNLTMxhiPNZsTK6iA==", - "license": "CC0-1.0", - "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^1.1.0", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/@csstools/postcss-progressive-custom-properties": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-1.3.0.tgz", - "integrity": "sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==", - "license": "CC0-1.0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "peerDependencies": { - "postcss": "^8.3" - } - }, - "node_modules/@csstools/postcss-stepped-value-functions": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-1.0.1.tgz", - "integrity": "sha512-dz0LNoo3ijpTOQqEJLY8nyaapl6umbmDcgj4AD0lgVQ572b2eqA1iGZYTTWhrcrHztWDDRAX2DGYyw2VBjvCvQ==", - "license": "CC0-1.0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/@csstools/postcss-text-decoration-shorthand": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-1.0.0.tgz", - "integrity": "sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==", - "license": "CC0-1.0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/@csstools/postcss-trigonometric-functions": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-1.0.2.tgz", - "integrity": "sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==", - "license": "CC0-1.0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/@csstools/postcss-unset-value": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz", - "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==", - "license": "CC0-1.0", - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -2668,6 +2327,7 @@ "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dev": true, "license": "MIT", "dependencies": { "@nodelib/fs.stat": "2.0.5", @@ -2681,6 +2341,7 @@ "version": "2.0.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "dev": true, "license": "MIT", "engines": { "node": ">= 8" @@ -2690,6 +2351,7 @@ "version": "1.2.8", "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dev": true, "license": "MIT", "dependencies": { "@nodelib/fs.scandir": "2.1.5", @@ -2715,6 +2377,7 @@ "hasInstallScript": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", @@ -2756,6 +2419,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2776,6 +2440,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2796,6 +2461,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2816,6 +2482,7 @@ "os": [ "freebsd" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2836,6 +2503,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2856,6 +2524,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2876,6 +2545,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2896,6 +2566,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2916,6 +2587,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2936,6 +2608,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2956,6 +2629,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2976,6 +2650,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2996,6 +2671,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -3727,16 +3403,11 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/any-promise": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", - "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", - "license": "MIT" - }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "devOptional": true, "license": "ISC", "dependencies": { "normalize-path": "^3.0.0", @@ -3746,12 +3417,6 @@ "node": ">= 8" } }, - "node_modules/arg": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", - "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", - "license": "MIT" - }, "node_modules/argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", @@ -3919,43 +3584,6 @@ "has-symbols": "^1.0.3" } }, - "node_modules/autoprefixer": { - "version": "10.4.16", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz", - "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/autoprefixer" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "browserslist": "^4.21.10", - "caniuse-lite": "^1.0.30001538", - "fraction.js": "^4.3.6", - "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", - "postcss-value-parser": "^4.2.0" - }, - "bin": { - "autoprefixer": "bin/autoprefixer" - }, - "engines": { - "node": "^10 || ^12 || >=14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, "node_modules/autosize": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.4.tgz", @@ -4069,6 +3697,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true, "license": "MIT" }, "node_modules/base64-js": { @@ -4120,6 +3749,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "devOptional": true, "license": "MIT", "engines": { "node": ">=8" @@ -4213,6 +3843,7 @@ "version": "1.1.12", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz", "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==", + "dev": true, "license": "MIT", "dependencies": { "balanced-match": "^1.0.0", @@ -4223,6 +3854,7 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "devOptional": true, "license": "MIT", "dependencies": { "fill-range": "^7.1.1" @@ -4292,7 +3924,9 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz", "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==", - "license": "MIT/X11" + "license": "MIT/X11", + "optional": true, + "peer": true }, "node_modules/buffer-from": { "version": "1.1.2", @@ -4413,20 +4047,12 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, "license": "MIT", "engines": { "node": ">=6" } }, - "node_modules/camelcase-css": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", - "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", - "license": "MIT", - "engines": { - "node": ">= 6" - } - }, "node_modules/caniuse-lite": { "version": "1.0.30001747", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001747.tgz", @@ -4508,6 +4134,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "devOptional": true, "license": "MIT", "dependencies": { "anymatch": "~3.1.2", @@ -4602,16 +4229,9 @@ "version": "0.5.2", "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz", "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==", - "license": "MIT" - }, - "node_modules/commander": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", - "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", "license": "MIT", - "engines": { - "node": ">= 6" - } + "optional": true, + "peer": true }, "node_modules/common-path-prefix": { "version": "3.0.0", @@ -4702,6 +4322,7 @@ "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true, "license": "MIT" }, "node_modules/connect-history-api-fallback": { @@ -4817,68 +4438,6 @@ "node": ">= 8" } }, - "node_modules/css-blank-pseudo": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-3.0.3.tgz", - "integrity": "sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==", - "license": "CC0-1.0", - "dependencies": { - "postcss-selector-parser": "^6.0.9" - }, - "bin": { - "css-blank-pseudo": "dist/cli.cjs" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/css-blank-pseudo/node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/css-has-pseudo": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz", - "integrity": "sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==", - "license": "CC0-1.0", - "dependencies": { - "postcss-selector-parser": "^6.0.9" - }, - "bin": { - "css-has-pseudo": "dist/cli.cjs" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/css-has-pseudo/node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/css-loader": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.2.tgz", @@ -4947,37 +4506,6 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "license": "ISC" }, - "node_modules/css-prefers-color-scheme": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz", - "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==", - "license": "CC0-1.0", - "bin": { - "css-prefers-color-scheme": "dist/cli.cjs" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/cssdb": { - "version": "7.9.0", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.9.0.tgz", - "integrity": "sha512-WPMT9seTQq6fPAa1yN4zjgZZeoTriSN2LqW9C+otjar12DQIWA4LuSfFrvFJiKp4oD0xIk1vumDLw8K9ur4NBw==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - } - ], - "license": "CC0-1.0" - }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -5229,6 +4757,7 @@ "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", "license": "Apache-2.0", "optional": true, + "peer": true, "bin": { "detect-libc": "bin/detect-libc.js" }, @@ -5243,18 +4772,6 @@ "devOptional": true, "license": "MIT" }, - "node_modules/didyoumean": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", - "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", - "license": "Apache-2.0" - }, - "node_modules/dlv": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", - "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", - "license": "MIT" - }, "node_modules/dns-packet": { "version": "5.6.1", "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz", @@ -5383,6 +4900,7 @@ "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dev": true, "license": "MIT", "dependencies": { "is-arrayish": "^0.2.1" @@ -6316,22 +5834,6 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "license": "MIT" }, - "node_modules/fast-glob": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", - "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==", - "license": "MIT", - "dependencies": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" - }, - "engines": { - "node": ">=8.6.0" - } - }, "node_modules/fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -6374,6 +5876,7 @@ "version": "1.15.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==", + "dev": true, "license": "ISC", "dependencies": { "reusify": "^1.0.4" @@ -6473,6 +5976,7 @@ "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "devOptional": true, "license": "MIT", "dependencies": { "to-regex-range": "^5.0.1" @@ -6635,19 +6139,6 @@ "node": ">= 0.6" } }, - "node_modules/fraction.js": { - "version": "4.3.7", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", - "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", - "license": "MIT", - "engines": { - "node": "*" - }, - "funding": { - "type": "patreon", - "url": "https://github.com/sponsors/rawify" - } - }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -6662,12 +6153,14 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true, "license": "ISC" }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, "hasInstallScript": true, "license": "MIT", "optional": true, @@ -6839,6 +6332,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "devOptional": true, "license": "ISC", "dependencies": { "is-glob": "^4.0.1" @@ -7271,12 +6765,15 @@ "version": "5.1.4", "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz", "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==", - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, "license": "MIT", "dependencies": { "parent-module": "^1.0.0", @@ -7396,6 +6893,7 @@ "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.", + "dev": true, "license": "ISC", "dependencies": { "once": "^1.3.0", @@ -7480,6 +6978,7 @@ "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", + "dev": true, "license": "MIT" }, "node_modules/is-async-function": { @@ -7522,6 +7021,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "devOptional": true, "license": "MIT", "dependencies": { "binary-extensions": "^2.0.0" @@ -7645,6 +7145,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "devOptional": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -7694,6 +7195,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "devOptional": true, "license": "MIT", "dependencies": { "is-extglob": "^2.1.1" @@ -7764,6 +7266,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "devOptional": true, "license": "MIT", "engines": { "node": ">=0.12.0" @@ -8061,15 +7564,6 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, - "node_modules/jiti": { - "version": "1.21.0", - "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz", - "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==", - "license": "MIT", - "bin": { - "jiti": "bin/jiti.js" - } - }, "node_modules/jp-postal": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/jp-postal/-/jp-postal-3.2.0.tgz", @@ -8251,19 +7745,11 @@ "node": ">= 0.8.0" } }, - "node_modules/lilconfig": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", - "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==", - "license": "MIT", - "engines": { - "node": ">=10" - } - }, "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true, "license": "MIT" }, "node_modules/linkify-it": { @@ -8661,15 +8147,6 @@ "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", "license": "MIT" }, - "node_modules/merge2": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", - "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", - "license": "MIT", - "engines": { - "node": ">= 8" - } - }, "node_modules/methods": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", @@ -8684,6 +8161,7 @@ "version": "4.0.8", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "devOptional": true, "license": "MIT", "dependencies": { "braces": "^3.0.3", @@ -8768,6 +8246,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, "license": "ISC", "dependencies": { "brace-expansion": "^1.1.7" @@ -8806,17 +8285,6 @@ "multicast-dns": "cli.js" } }, - "node_modules/mz": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", - "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", - "license": "MIT", - "dependencies": { - "any-promise": "^1.0.0", - "object-assign": "^4.0.1", - "thenify-all": "^1.0.0" - } - }, "node_modules/nanoid": { "version": "3.3.11", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", @@ -8870,7 +8338,8 @@ "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", "license": "MIT", - "optional": true + "optional": true, + "peer": true }, "node_modules/node-forge": { "version": "1.3.3", @@ -8915,15 +8384,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/normalize-range": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", - "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", + "devOptional": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -9121,15 +8582,6 @@ "node": ">=0.10.0" } }, - "node_modules/object-hash": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", - "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", - "license": "MIT", - "engines": { - "node": ">= 6" - } - }, "node_modules/object-inspect": { "version": "1.13.4", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", @@ -9286,6 +8738,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dev": true, "license": "ISC", "dependencies": { "wrappy": "1" @@ -9425,6 +8878,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, "license": "MIT", "dependencies": { "callsites": "^3.0.0" @@ -9437,6 +8891,7 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.0.0", @@ -9503,6 +8958,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -9534,6 +8990,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -9562,6 +9019,7 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "devOptional": true, "license": "MIT", "engines": { "node": ">=8.6" @@ -9583,24 +9041,6 @@ "node": ">=0.10" } }, - "node_modules/pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/pirates": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz", - "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==", - "license": "MIT", - "engines": { - "node": ">= 6" - } - }, "node_modules/pkg-dir": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-7.0.0.tgz", @@ -9653,973 +9093,107 @@ "node": "^10 || ^12 || >=14" } }, - "node_modules/postcss-attribute-case-insensitive": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz", - "integrity": "sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==", - "license": "MIT", - "dependencies": { - "postcss-selector-parser": "^6.0.10" - }, + "node_modules/postcss-modules-extract-imports": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz", + "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==", + "license": "ISC", "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" + "node": "^10 || ^12 || >= 14" }, "peerDependencies": { - "postcss": "^8.2" + "postcss": "^8.1.0" } }, - "node_modules/postcss-attribute-case-insensitive/node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "node_modules/postcss-modules-local-by-default": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz", + "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==", "license": "MIT", "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" + "icss-utils": "^5.0.0", + "postcss-selector-parser": "^7.0.0", + "postcss-value-parser": "^4.1.0" }, "engines": { - "node": ">=4" + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" } }, - "node_modules/postcss-clamp": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/postcss-clamp/-/postcss-clamp-4.1.0.tgz", - "integrity": "sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==", - "license": "MIT", + "node_modules/postcss-modules-scope": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz", + "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==", + "license": "ISC", "dependencies": { - "postcss-value-parser": "^4.2.0" + "postcss-selector-parser": "^7.0.0" }, "engines": { - "node": ">=7.6.0" + "node": "^10 || ^12 || >= 14" }, "peerDependencies": { - "postcss": "^8.4.6" + "postcss": "^8.1.0" } }, - "node_modules/postcss-color-functional-notation": { - "version": "4.2.4", - "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.4.tgz", - "integrity": "sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==", - "license": "CC0-1.0", + "node_modules/postcss-modules-values": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", + "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", + "license": "ISC", "dependencies": { - "postcss-value-parser": "^4.2.0" + "icss-utils": "^5.0.0" }, "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" + "node": "^10 || ^12 || >= 14" }, "peerDependencies": { - "postcss": "^8.2" + "postcss": "^8.1.0" } }, - "node_modules/postcss-color-hex-alpha": { - "version": "8.0.4", - "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-8.0.4.tgz", - "integrity": "sha512-nLo2DCRC9eE4w2JmuKgVA3fGL3d01kGq752pVALF68qpGLmx2Qrk91QTKkdUqqp45T1K1XV8IhQpcu1hoAQflQ==", + "node_modules/postcss-selector-parser": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", + "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", "dependencies": { - "postcss-value-parser": "^4.2.0" + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" }, "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.4" + "node": ">=4" } }, - "node_modules/postcss-color-rebeccapurple": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-7.1.1.tgz", - "integrity": "sha512-pGxkuVEInwLHgkNxUc4sdg4g3py7zUeCQ9sMfwyHAT+Ezk8a4OaaVZ8lIY5+oNqA/BXXgLyXv0+5wHP68R79hg==", - "license": "CC0-1.0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "license": "MIT" + }, + "node_modules/prelude-ls": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", + "dev": true, + "license": "MIT", "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" + "node": ">= 0.8.0" } }, - "node_modules/postcss-custom-media": { - "version": "8.0.2", - "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.2.tgz", - "integrity": "sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==", + "node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", "license": "MIT", - "dependencies": { - "postcss-value-parser": "^4.2.0" + "bin": { + "prettier": "bin-prettier.js" }, "engines": { - "node": "^12 || ^14 || >=16" + "node": ">=10.13.0" }, "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.3" - } - }, - "node_modules/postcss-custom-properties": { - "version": "12.1.11", - "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.11.tgz", - "integrity": "sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==", - "license": "MIT", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/postcss-custom-selectors": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-6.0.3.tgz", - "integrity": "sha512-fgVkmyiWDwmD3JbpCmB45SvvlCD6z9CG6Ie6Iere22W5aHea6oWa7EM2bpnv2Fj3I94L3VbtvX9KqwSi5aFzSg==", - "license": "MIT", - "dependencies": { - "postcss-selector-parser": "^6.0.4" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.3" - } - }, - "node_modules/postcss-custom-selectors/node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/postcss-dir-pseudo-class": { - "version": "6.0.5", - "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.5.tgz", - "integrity": "sha512-eqn4m70P031PF7ZQIvSgy9RSJ5uI2171O/OO/zcRNYpJbvaeKFUlar1aJ7rmgiQtbm0FSPsRewjpdS0Oew7MPA==", - "license": "CC0-1.0", - "dependencies": { - "postcss-selector-parser": "^6.0.10" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/postcss-dir-pseudo-class/node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/postcss-double-position-gradients": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-3.1.2.tgz", - "integrity": "sha512-GX+FuE/uBR6eskOK+4vkXgT6pDkexLokPaz/AbJna9s5Kzp/yl488pKPjhy0obB475ovfT1Wv8ho7U/cHNaRgQ==", - "license": "CC0-1.0", - "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^1.1.0", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/postcss-env-function": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-4.0.6.tgz", - "integrity": "sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==", - "license": "CC0-1.0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/postcss-flexbugs-fixes": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", - "license": "MIT", - "peerDependencies": { - "postcss": "^8.1.4" - } - }, - "node_modules/postcss-focus-visible": { - "version": "6.0.4", - "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-6.0.4.tgz", - "integrity": "sha512-QcKuUU/dgNsstIK6HELFRT5Y3lbrMLEOwG+A4s5cA+fx3A3y/JTq3X9LaOj3OC3ALH0XqyrgQIgey/MIZ8Wczw==", - "license": "CC0-1.0", - "dependencies": { - "postcss-selector-parser": "^6.0.9" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/postcss-focus-visible/node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/postcss-focus-within": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-5.0.4.tgz", - "integrity": "sha512-vvjDN++C0mu8jz4af5d52CB184ogg/sSxAFS+oUJQq2SuCe7T5U2iIsVJtsCp2d6R4j0jr5+q3rPkBVZkXD9fQ==", - "license": "CC0-1.0", - "dependencies": { - "postcss-selector-parser": "^6.0.9" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/postcss-focus-within/node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/postcss-font-variant": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz", - "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==", - "license": "MIT", - "peerDependencies": { - "postcss": "^8.1.0" - } - }, - "node_modules/postcss-gap-properties": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz", - "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==", - "license": "CC0-1.0", - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/postcss-image-set-function": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-4.0.7.tgz", - "integrity": "sha512-9T2r9rsvYzm5ndsBE8WgtrMlIT7VbtTfE7b3BQnudUqnBcBo7L758oc+o+pdj/dUV0l5wjwSdjeOH2DZtfv8qw==", - "license": "CC0-1.0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/postcss-import": { - "version": "15.1.0", - "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", - "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", - "license": "MIT", - "dependencies": { - "postcss-value-parser": "^4.0.0", - "read-cache": "^1.0.0", - "resolve": "^1.1.7" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "postcss": "^8.0.0" - } - }, - "node_modules/postcss-initial": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz", - "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==", - "license": "MIT", - "peerDependencies": { - "postcss": "^8.0.0" - } - }, - "node_modules/postcss-js": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz", - "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==", - "license": "MIT", - "dependencies": { - "camelcase-css": "^2.0.1" - }, - "engines": { - "node": "^12 || ^14 || >= 16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - "peerDependencies": { - "postcss": "^8.4.21" - } - }, - "node_modules/postcss-lab-function": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-4.2.1.tgz", - "integrity": "sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==", - "license": "CC0-1.0", - "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^1.1.0", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/postcss-load-config": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz", - "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==", - "license": "MIT", - "dependencies": { - "lilconfig": "^2.0.5", - "yaml": "^2.1.1" - }, - "engines": { - "node": ">= 14" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - "peerDependencies": { - "postcss": ">=8.0.9", - "ts-node": ">=9.0.0" - }, - "peerDependenciesMeta": { - "postcss": { - "optional": true - }, - "ts-node": { - "optional": true - } - } - }, - "node_modules/postcss-load-config/node_modules/yaml": { - "version": "2.3.4", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", - "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==", - "license": "ISC", - "engines": { - "node": ">= 14" - } - }, - "node_modules/postcss-loader": { - "version": "7.3.4", - "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.4.tgz", - "integrity": "sha512-iW5WTTBSC5BfsBJ9daFMPVrLT36MrNiC6fqOZTTaHjBNX6Pfd5p+hSBqe/fEeNd7pc13QiAyGt7VdGMw4eRC4A==", - "license": "MIT", - "dependencies": { - "cosmiconfig": "^8.3.5", - "jiti": "^1.20.0", - "semver": "^7.5.4" - }, - "engines": { - "node": ">= 14.15.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - }, - "peerDependencies": { - "postcss": "^7.0.0 || ^8.0.1", - "webpack": "^5.0.0" - } - }, - "node_modules/postcss-loader/node_modules/argparse": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "license": "Python-2.0" - }, - "node_modules/postcss-loader/node_modules/cosmiconfig": { - "version": "8.3.6", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", - "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", - "license": "MIT", - "dependencies": { - "import-fresh": "^3.3.0", - "js-yaml": "^4.1.0", - "parse-json": "^5.2.0", - "path-type": "^4.0.0" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/d-fischer" - }, - "peerDependencies": { - "typescript": ">=4.9.5" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, - "node_modules/postcss-loader/node_modules/js-yaml": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz", - "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==", - "license": "MIT", - "dependencies": { - "argparse": "^2.0.1" - }, - "bin": { - "js-yaml": "bin/js-yaml.js" - } - }, - "node_modules/postcss-loader/node_modules/lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", - "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "license": "ISC", - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/postcss-loader/node_modules/semver": { - "version": "7.5.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", - "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", - "license": "ISC", - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/postcss-loader/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "license": "ISC" - }, - "node_modules/postcss-logical": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz", - "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==", - "license": "CC0-1.0", - "engines": { - "node": "^12 || ^14 || >=16" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/postcss-media-minmax": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz", - "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==", - "license": "MIT", - "engines": { - "node": ">=10.0.0" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, - "node_modules/postcss-modules-extract-imports": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz", - "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==", - "license": "ISC", - "engines": { - "node": "^10 || ^12 || >= 14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, - "node_modules/postcss-modules-local-by-default": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz", - "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==", - "license": "MIT", - "dependencies": { - "icss-utils": "^5.0.0", - "postcss-selector-parser": "^7.0.0", - "postcss-value-parser": "^4.1.0" - }, - "engines": { - "node": "^10 || ^12 || >= 14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, - "node_modules/postcss-modules-scope": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz", - "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==", - "license": "ISC", - "dependencies": { - "postcss-selector-parser": "^7.0.0" - }, - "engines": { - "node": "^10 || ^12 || >= 14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, - "node_modules/postcss-modules-values": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", - "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", - "license": "ISC", - "dependencies": { - "icss-utils": "^5.0.0" - }, - "engines": { - "node": "^10 || ^12 || >= 14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, - "node_modules/postcss-nested": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz", - "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==", - "license": "MIT", - "dependencies": { - "postcss-selector-parser": "^6.0.11" - }, - "engines": { - "node": ">=12.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - "peerDependencies": { - "postcss": "^8.2.14" - } - }, - "node_modules/postcss-nested/node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/postcss-nesting": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.2.0.tgz", - "integrity": "sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==", - "license": "CC0-1.0", - "dependencies": { - "@csstools/selector-specificity": "^2.0.0", - "postcss-selector-parser": "^6.0.10" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/postcss-nesting/node_modules/@csstools/selector-specificity": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz", - "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==", - "license": "CC0-1.0", - "engines": { - "node": "^14 || ^16 || >=18" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss-selector-parser": "^6.0.10" - } - }, - "node_modules/postcss-nesting/node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/postcss-opacity-percentage": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.3.tgz", - "integrity": "sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A==", - "funding": [ - { - "type": "kofi", - "url": "https://ko-fi.com/mrcgrtz" - }, - { - "type": "liberapay", - "url": "https://liberapay.com/mrcgrtz" - } - ], - "license": "MIT", - "engines": { - "node": "^12 || ^14 || >=16" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/postcss-overflow-shorthand": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.4.tgz", - "integrity": "sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==", - "license": "CC0-1.0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/postcss-page-break": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz", - "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==", - "license": "MIT", - "peerDependencies": { - "postcss": "^8" - } - }, - "node_modules/postcss-place": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-7.0.5.tgz", - "integrity": "sha512-wR8igaZROA6Z4pv0d+bvVrvGY4GVHihBCBQieXFY3kuSuMyOmEnnfFzHl/tQuqHZkfkIVBEbDvYcFfHmpSet9g==", - "license": "CC0-1.0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/postcss-preset-env": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-7.8.3.tgz", - "integrity": "sha512-T1LgRm5uEVFSEF83vHZJV2z19lHg4yJuZ6gXZZkqVsqv63nlr6zabMH3l4Pc01FQCyfWVrh2GaUeCVy9Po+Aag==", - "license": "CC0-1.0", - "dependencies": { - "@csstools/postcss-cascade-layers": "^1.1.1", - "@csstools/postcss-color-function": "^1.1.1", - "@csstools/postcss-font-format-keywords": "^1.0.1", - "@csstools/postcss-hwb-function": "^1.0.2", - "@csstools/postcss-ic-unit": "^1.0.1", - "@csstools/postcss-is-pseudo-class": "^2.0.7", - "@csstools/postcss-nested-calc": "^1.0.0", - "@csstools/postcss-normalize-display-values": "^1.0.1", - "@csstools/postcss-oklab-function": "^1.1.1", - "@csstools/postcss-progressive-custom-properties": "^1.3.0", - "@csstools/postcss-stepped-value-functions": "^1.0.1", - "@csstools/postcss-text-decoration-shorthand": "^1.0.0", - "@csstools/postcss-trigonometric-functions": "^1.0.2", - "@csstools/postcss-unset-value": "^1.0.2", - "autoprefixer": "^10.4.13", - "browserslist": "^4.21.4", - "css-blank-pseudo": "^3.0.3", - "css-has-pseudo": "^3.0.4", - "css-prefers-color-scheme": "^6.0.3", - "cssdb": "^7.1.0", - "postcss-attribute-case-insensitive": "^5.0.2", - "postcss-clamp": "^4.1.0", - "postcss-color-functional-notation": "^4.2.4", - "postcss-color-hex-alpha": "^8.0.4", - "postcss-color-rebeccapurple": "^7.1.1", - "postcss-custom-media": "^8.0.2", - "postcss-custom-properties": "^12.1.10", - "postcss-custom-selectors": "^6.0.3", - "postcss-dir-pseudo-class": "^6.0.5", - "postcss-double-position-gradients": "^3.1.2", - "postcss-env-function": "^4.0.6", - "postcss-focus-visible": "^6.0.4", - "postcss-focus-within": "^5.0.4", - "postcss-font-variant": "^5.0.0", - "postcss-gap-properties": "^3.0.5", - "postcss-image-set-function": "^4.0.7", - "postcss-initial": "^4.0.1", - "postcss-lab-function": "^4.2.1", - "postcss-logical": "^5.0.4", - "postcss-media-minmax": "^5.0.0", - "postcss-nesting": "^10.2.0", - "postcss-opacity-percentage": "^1.1.2", - "postcss-overflow-shorthand": "^3.0.4", - "postcss-page-break": "^3.0.4", - "postcss-place": "^7.0.5", - "postcss-pseudo-class-any-link": "^7.1.6", - "postcss-replace-overflow-wrap": "^4.0.0", - "postcss-selector-not": "^6.0.1", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/postcss-pseudo-class-any-link": { - "version": "7.1.6", - "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.6.tgz", - "integrity": "sha512-9sCtZkO6f/5ML9WcTLcIyV1yz9D1rf0tWc+ulKcvV30s0iZKS/ONyETvoWsr6vnrmW+X+KmuK3gV/w5EWnT37w==", - "license": "CC0-1.0", - "dependencies": { - "postcss-selector-parser": "^6.0.10" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/postcss-pseudo-class-any-link/node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/postcss-replace-overflow-wrap": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz", - "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==", - "license": "MIT", - "peerDependencies": { - "postcss": "^8.0.3" - } - }, - "node_modules/postcss-selector-not": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz", - "integrity": "sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==", - "license": "MIT", - "dependencies": { - "postcss-selector-parser": "^6.0.10" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, - "node_modules/postcss-selector-not/node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/postcss-value-parser": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "license": "MIT" - }, - "node_modules/prelude-ls": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", - "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", - "license": "MIT", - "bin": { - "prettier": "bin-prettier.js" - }, - "engines": { - "node": ">=10.13.0" - }, - "funding": { - "url": "https://github.com/prettier/prettier?sponsor=1" + "url": "https://github.com/prettier/prettier?sponsor=1" } }, "node_modules/prettier-config-standard": { @@ -10738,6 +9312,7 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", + "dev": true, "funding": [ { "type": "github", @@ -10888,15 +9463,6 @@ "react-dom": ">=16.8" } }, - "node_modules/read-cache": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", - "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", - "license": "MIT", - "dependencies": { - "pify": "^2.3.0" - } - }, "node_modules/read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -10969,6 +9535,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "devOptional": true, "license": "MIT", "dependencies": { "picomatch": "^2.2.1" @@ -11165,6 +9732,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -11194,6 +9762,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", + "dev": true, "license": "MIT", "engines": { "iojs": ">=1.0.0", @@ -11240,6 +9809,7 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", + "dev": true, "funding": [ { "type": "github", @@ -11264,6 +9834,8 @@ "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz", "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==", "license": "Apache-2.0", + "optional": true, + "peer": true, "dependencies": { "tslib": "^2.1.0" } @@ -11354,6 +9926,8 @@ "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.2.tgz", "integrity": "sha512-y5LWb0IlbO4e97Zr7c3mlpabcbBtS+ieiZ9iwDooShpFKWXf62zz5pEPdwrLYm+Bxn1fnbwFGzHuCLSA9tBmrw==", "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -11374,6 +9948,8 @@ "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.97.2.tgz", "integrity": "sha512-lKJcskySwAtJ4QRirKrikrWMFa2niAuaGenY2ElHjd55IwHUiur5IdKu6R1hEmGYMs4Qm+6rlRW0RvuAkmcryg==", "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "@bufbuild/protobuf": "^2.5.0", "buffer-builder": "^0.2.0", @@ -11423,6 +9999,7 @@ ], "license": "MIT", "optional": true, + "peer": true, "dependencies": { "sass": "1.97.2" } @@ -11439,6 +10016,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11455,6 +10033,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11471,6 +10050,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11487,6 +10067,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11503,6 +10084,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11519,6 +10101,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11535,6 +10118,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11551,6 +10135,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11567,6 +10152,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11583,6 +10169,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11599,6 +10186,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11615,6 +10203,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11631,6 +10220,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11647,6 +10237,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11663,6 +10254,7 @@ "!linux", "!win32" ], + "peer": true, "dependencies": { "sass": "1.97.2" } @@ -11679,6 +10271,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11695,6 +10288,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11704,6 +10298,8 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -11719,6 +10315,8 @@ "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-14.2.1.tgz", "integrity": "sha512-G0VcnMYU18a4N7VoNDegg2OuMjYtxnqzQWARVWCIVSZwJeiL9kg8QMsuIZOplsJgTzZLF6jGxI3AClj8I9nRdQ==", "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "neo-async": "^2.6.2" }, @@ -11759,6 +10357,8 @@ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==", "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "readdirp": "^4.0.1" }, @@ -11774,6 +10374,8 @@ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==", "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">= 14.18.0" }, @@ -12766,49 +11368,6 @@ "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==", "license": "MIT" }, - "node_modules/sucrase": { - "version": "3.34.0", - "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz", - "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==", - "license": "MIT", - "dependencies": { - "@jridgewell/gen-mapping": "^0.3.2", - "commander": "^4.0.0", - "glob": "7.1.6", - "lines-and-columns": "^1.1.6", - "mz": "^2.7.0", - "pirates": "^4.0.1", - "ts-interface-checker": "^0.1.9" - }, - "bin": { - "sucrase": "bin/sucrase", - "sucrase-node": "bin/sucrase-node" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/sucrase/node_modules/glob": { - "version": "7.1.6", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", - "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", - "deprecated": "Glob versions prior to v9 are no longer supported", - "license": "ISC", - "dependencies": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - }, - "engines": { - "node": "*" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -12863,6 +11422,8 @@ "resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz", "integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==", "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "sync-message-port": "^1.0.0" }, @@ -12875,72 +11436,12 @@ "resolved": "https://registry.npmjs.org/sync-message-port/-/sync-message-port-1.1.3.tgz", "integrity": "sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==", "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=16.0.0" } }, - "node_modules/tailwindcss": { - "version": "3.3.5", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz", - "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==", - "license": "MIT", - "dependencies": { - "@alloc/quick-lru": "^5.2.0", - "arg": "^5.0.2", - "chokidar": "^3.5.3", - "didyoumean": "^1.2.2", - "dlv": "^1.1.3", - "fast-glob": "^3.3.0", - "glob-parent": "^6.0.2", - "is-glob": "^4.0.3", - "jiti": "^1.19.1", - "lilconfig": "^2.1.0", - "micromatch": "^4.0.5", - "normalize-path": "^3.0.0", - "object-hash": "^3.0.0", - "picocolors": "^1.0.0", - "postcss": "^8.4.23", - "postcss-import": "^15.1.0", - "postcss-js": "^4.0.1", - "postcss-load-config": "^4.0.1", - "postcss-nested": "^6.0.1", - "postcss-selector-parser": "^6.0.11", - "resolve": "^1.22.2", - "sucrase": "^3.32.0" - }, - "bin": { - "tailwind": "lib/cli.js", - "tailwindcss": "lib/cli.js" - }, - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/tailwindcss/node_modules/glob-parent": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", - "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", - "license": "ISC", - "dependencies": { - "is-glob": "^4.0.3" - }, - "engines": { - "node": ">=10.13.0" - } - }, - "node_modules/tailwindcss/node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/tapable": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz", @@ -13071,27 +11572,6 @@ "markdown-it": "bin/markdown-it.js" } }, - "node_modules/thenify": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", - "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", - "license": "MIT", - "dependencies": { - "any-promise": "^1.0.0" - } - }, - "node_modules/thenify-all": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", - "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", - "license": "MIT", - "dependencies": { - "thenify": ">= 3.1.0 < 4" - }, - "engines": { - "node": ">=0.8" - } - }, "node_modules/thingies": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/thingies/-/thingies-2.5.0.tgz", @@ -13138,6 +11618,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "devOptional": true, "license": "MIT", "dependencies": { "is-number": "^7.0.0" @@ -13220,12 +11701,6 @@ "integrity": "sha512-B5CXihaVzXw+1UHhNFyAwUTMDk1EfoLP5Tj1VhD9yybZ1I8DZJEv8tZ1l0RJo0t0tk9ZhR8eG5tEsaCvRigmdQ==", "license": "MIT" }, - "node_modules/ts-interface-checker": { - "version": "0.1.13", - "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", - "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", - "license": "Apache-2.0" - }, "node_modules/tsconfig-paths": { "version": "3.14.2", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz", @@ -13256,6 +11731,7 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "devOptional": true, "license": "0BSD" }, "node_modules/type-check": { @@ -13559,7 +12035,9 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz", "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==", - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/vary": { "version": "1.1.2", @@ -14132,6 +12610,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "dev": true, "license": "ISC" }, "node_modules/ws": { diff --git a/package.json b/package.json index 6d7a23eb600..bbb3dd721f5 100644 --- a/package.json +++ b/package.json @@ -49,11 +49,6 @@ "markdown-it-regexp": "^0.4.0", "markdown-it-task-lists": "^2.1.1", "mem": "^4.0.0", - "postcss": "^8.4.31", - "postcss-flexbugs-fixes": "^5.0.2", - "postcss-import": "^15.1.0", - "postcss-loader": "^7.0.0", - "postcss-preset-env": "7", "prettier-config-standard": "^5.0.0", "prismjs": "^1.30.0", "process": "^0.11.10", @@ -63,9 +58,6 @@ "react_ujs": "^2.5.0", "react-dom": "^18.3.1", "react-router-dom": "^6.4.1", - "sass": "^1.83.1", - "sass-embedded": "^1.83.0", - "sass-loader": "^14.2.1", "select2": "^4.0.7-rc.0", "set-value": "^4.0.1", "shakapacker": "9.5.0", @@ -73,7 +65,6 @@ "stimulus": "^3.2.2", "sweetalert2": "^11.1.5", "swr": "^1.3.0", - "tailwindcss": "^3.1.8", "terser-webpack-plugin": "^5.3.10", "textarea-markdown": "^1.6.1", "tributejs": "^5.1.3", diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index d5a930f8f2a..00000000000 --- a/postcss.config.js +++ /dev/null @@ -1,13 +0,0 @@ -module.exports = { - plugins: [ - require('tailwindcss'), - require('postcss-import'), - require('postcss-flexbugs-fixes'), - require('postcss-preset-env')({ - autoprefixer: { - flexbox: 'no-2009' - }, - stage: 3 - }) - ] -} diff --git a/public/404.html b/public/404.html index d7f0f14222d..bde5ef74834 100644 --- a/public/404.html +++ b/public/404.html @@ -1,135 +1,107 @@ - - - - - - - The page you were looking for doesn't exist (404 Not found) - - - - - - - - - - - - - -
-
- + background-size: 72px; + } + } + + .container { + padding-left: 1rem; + padding-right: 1rem; + } + + .error-message { + max-width: 40rem; + margin-inline: auto; + background-color: white; + border: solid 4px #5a5f60; + border-radius: .25rem; + } + + .error-message__header { + border-bottom: solid 1px #e6e6e6; + padding: .88em 1.33em; + font-size: 1.125rem; + } + + .error-message__title { + font-size: 1em; + line-height: 1.4; + text-align: center; + } + + .error-message__body { + padding: 1.25em 1.5em; + font-size: 1rem; + } + + @media (max-width: 47.9375em) { + .error-message__body { + font-size: .875rem; + } + } + + .error-message__body p { + font-size: 1em; + line-height: 1.6; + margin-bottom: 1em; + } + + .error-message__body .error-message__number { + text-align: center; + font-size: 1.125em; + font-weight: 900; + margin-bottom: .875em; + } + + .error-message__body p:last-child { + margin-bottom: 0; + } + + + + + +
+
+
+

ご指定のページが見つかりません

-
-

The page you were looking for doesn't exist. You may have mistyped the address or the page may have moved. If you're the application owner check the logs for more information.

-
-
- - +
+

404: Not Found

+

お探しのページは一時的にアクセスができない状況にあるか、移動もしくは削除された可能性があります。また、URL、ファイル名にタイプミスがないか再度ご確認ください。

+
+
+
+ diff --git a/public/406-unsupported-browser.html b/public/406-unsupported-browser.html index 43d2811e8c5..3f6606cc8e6 100644 --- a/public/406-unsupported-browser.html +++ b/public/406-unsupported-browser.html @@ -1,135 +1,107 @@ - - - - - - - Your browser is not supported (406 Not Acceptable) - - - - - - - - - - - - - -
-
- + background-size: 72px; + } + } + + .container { + padding-left: 1rem; + padding-right: 1rem; + } + + .error-message { + max-width: 40rem; + margin-inline: auto; + background-color: white; + border: solid 4px #5a5f60; + border-radius: .25rem; + } + + .error-message__header { + border-bottom: solid 1px #e6e6e6; + padding: .88em 1.33em; + font-size: 1.125rem; + } + + .error-message__title { + font-size: 1em; + line-height: 1.4; + text-align: center; + } + + .error-message__body { + padding: 1.25em 1.5em; + font-size: 1rem; + } + + @media (max-width: 47.9375em) { + .error-message__body { + font-size: .875rem; + } + } + + .error-message__body p { + font-size: 1em; + line-height: 1.6; + margin-bottom: 1em; + } + + .error-message__body .error-message__number { + text-align: center; + font-size: 1.125em; + font-weight: 900; + margin-bottom: .875em; + } + + .error-message__body p:last-child { + margin-bottom: 0; + } + + + + + +
+
+
+

お使いのブラウザはサポートされていません

-
-

Your browser is not supported.
Please upgrade your browser to continue.

-
-
- - +
+

406: Not Acceptable

+

このサイトをご利用いただくには、ブラウザを最新版にアップグレードしてください。

+
+
+
+ diff --git a/public/422.html b/public/422.html index f12fb4aa175..46b3bf1d231 100644 --- a/public/422.html +++ b/public/422.html @@ -1,135 +1,108 @@ - - - - - - - The change you wanted was rejected (422 Unprocessable Entity) - - - - - - - - - - - - - -
-
- + background-size: 72px; + } + } + + .container { + padding-left: 1rem; + padding-right: 1rem; + } + + .error-message { + max-width: 40rem; + margin-left: auto; + margin-right: auto; + background-color: white; + border: solid 4px #5a5f60; + border-radius: .25rem; + } + + .error-message__header { + border-bottom: solid 1px #e6e6e6; + padding: .88em 1.33em; + font-size: 1.125rem; + } + + .error-message__title { + font-size: 1em; + line-height: 1.4; + text-align: center; + } + + .error-message__body { + padding: 1.25em 1.5em; + font-size: 1rem; + } + + @media (max-width: 47.9375em) { + .error-message__body { + font-size: .875rem; + } + } + + .error-message__body p { + font-size: 1em; + line-height: 1.6; + margin-bottom: 1em; + } + + .error-message__body .error-message__number { + text-align: center; + font-size: 1.125em; + font-weight: 900; + margin-bottom: .875em; + } + + .error-message__body p:last-child { + margin-bottom: 0; + } + + + + + +
+
+
+

ページが表示できません

-
-

The change you wanted was rejected. Maybe you tried to change something you didn't have access to. If you're the application owner check the logs for more information.

-
-
- - +
+

422: Unprocessable Entity

+

ご不便をおかけし申し訳ございません。正常にご覧いただけるよう、解決に取り組んでおります。

+
+
+
+ diff --git a/public/500.html b/public/500.html index e4eb18a7599..5240f6d1f3f 100644 --- a/public/500.html +++ b/public/500.html @@ -1,135 +1,107 @@ - - - - - - - We're sorry, but something went wrong (500 Internal Server Error) - - - - - - - - - - - - - -
-
- + background-size: 72px; + } + } + + .container { + padding-left: 1rem; + padding-right: 1rem; + } + + .error-message { + max-width: 40rem; + margin-inline: auto; + background-color: white; + border: solid 4px #5a5f60; + border-radius: .25rem; + } + + .error-message__header { + border-bottom: solid 1px #e6e6e6; + padding: .88em 1.33em; + font-size: 1.125rem; + } + + .error-message__title { + font-size: 1em; + line-height: 1.4; + text-align: center; + } + + .error-message__body { + padding: 1.25em 1.5em; + font-size: 1rem; + } + + @media (max-width: 47.9375em) { + .error-message__body { + font-size: .875rem; + } + } + + .error-message__body p { + font-size: 1em; + line-height: 1.6; + margin-bottom: 1em; + } + + .error-message__body .error-message__number { + text-align: center; + font-size: 1.125em; + font-weight: 900; + margin-bottom: .875em; + } + + .error-message__body p:last-child { + margin-bottom: 0; + } + + + + + +
+
+
+

ページが表示できません

-
-

We're sorry, but something went wrong.
If you're the application owner check the logs for more information.

-
-
- - +
+

500: Internal Server Error

+

ご不便をおかけし申し訳ございません。正常にご覧いただけるよう、解決に取り組んでおります。

+
+
+
+ diff --git a/public/images/background/campaingn.png b/public/images/background/campaingn.png new file mode 100644 index 00000000000..89be6f29bde Binary files /dev/null and b/public/images/background/campaingn.png differ diff --git a/public/images/background/people.png b/public/images/background/people.png new file mode 100644 index 00000000000..22c1455ada0 Binary files /dev/null and b/public/images/background/people.png differ diff --git a/tailwind.config.js b/tailwind.config.js deleted file mode 100644 index 7e8ed14d6fe..00000000000 --- a/tailwind.config.js +++ /dev/null @@ -1,13 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: [ - './app/views/**/*.html.slim', - './app/components/**/*.html.slim', - './app/javascript/**/*.{js,vue,jsx}' - ], - theme: { - extend: {} - }, - plugins: [], - important: true -} diff --git a/test/components/product/unassigned_products_component_test.rb b/test/components/product/unassigned_products_component_test.rb index 7b955bdd05e..394e6250401 100644 --- a/test/components/product/unassigned_products_component_test.rb +++ b/test/components/product/unassigned_products_component_test.rb @@ -29,9 +29,9 @@ def test_default reply_warning_days: @reply_warning_days )) - assert_selector '.is-reply-deadline#6days-elapsed', text: '6日以上経過（3）' - assert_selector '.is-reply-alert#5days-elapsed', text: '5日経過（1）' - assert_selector '.is-reply-warning#4days-elapsed', text: '4日経過（1）' + assert_selector '.is-reply-deadline#elapsed-6days', text: '6日以上経過（3）' + assert_selector '.is-reply-alert#elapsed-5days', text: '5日経過（1）' + assert_selector '.is-reply-warning#elapsed-4days', text: '4日経過（1）' end def test_any_products diff --git a/test/fixtures/bookmarks.yml b/test/fixtures/bookmarks.yml index e89516dbc7b..70b3f8d0fa3 100644 --- a/test/fixtures/bookmarks.yml +++ b/test/fixtures/bookmarks.yml @@ -1,3 +1,7 @@ +bookmark33: + user: kimura + bookmarkable: regular_event1 (RegularEvent) + bookmark32: user: kimura bookmarkable: movie1 (Movie) diff --git a/test/helpers/label_helper_test.rb b/test/helpers/label_helper_test.rb new file mode 100644 index 00000000000..968396e2f8b --- /dev/null +++ b/test/helpers/label_helper_test.rb @@ -0,0 +1,13 @@ +# frozen_string_literal: true + +require 'test_helper' + +class LabelHelperTest < ActionView::TestCase + test '#bookmarkable_label' do + regular_event = bookmarks(:bookmark33).bookmarkable + assert_dom_equal bookmarkable_label(regular_event), '定期
イベント' + + report = bookmarks(:bookmark_report).bookmarkable + assert_dom_equal bookmarkable_label(report), '日報' + end +end diff --git a/test/integration/api/image_test.rb b/test/integration/api/image_test.rb new file mode 100644 index 00000000000..bff0982a9c7 --- /dev/null +++ b/test/integration/api/image_test.rb @@ -0,0 +1,28 @@ +# frozen_string_literal: true + +require 'test_helper' + +class API::ImageTest < ActionDispatch::IntegrationTest + test 'remove exif data from image when uploaded' do + post user_sessions_path, params: { + user: { + login: 'hajime', + password: 'testtest' + } + } + + image_path = Rails.root.join('test/fixtures/files/articles/ogp_images/test.jpg') + original_image = MiniMagick::Image.open(image_path) + + assert_not_empty original_image.exif + + image_uploaded = fixture_file_upload(image_path, 'test/jpg') + post api_image_path(format: :json), params: { file: image_uploaded } + assert_response :created + + saved_image = Image.order(:created_at).last + processed_image = MiniMagick::Image.read(saved_image.image.download) + + assert_empty processed_image.exif + end +end diff --git a/test/jobs/bulk_embedding_job_test.rb b/test/jobs/bulk_embedding_job_test.rb new file mode 100644 index 00000000000..bae0d29310c --- /dev/null +++ b/test/jobs/bulk_embedding_job_test.rb @@ -0,0 +1,42 @@ +# frozen_string_literal: true + +require 'test_helper' + +class BulkEmbeddingJobTest < ActiveJob::TestCase + test 'performs without error when API is not available' do + original_key = ENV['OPEN_AI_ACCESS_TOKEN'] + ENV['OPEN_AI_ACCESS_TOKEN'] = nil + + assert_nothing_raised do + BulkEmbeddingJob.perform_now + end + ensure + ENV['OPEN_AI_ACCESS_TOKEN'] = original_key + end + + test 'accepts model_name parameter' do + original_key = ENV['OPEN_AI_ACCESS_TOKEN'] + ENV['OPEN_AI_ACCESS_TOKEN'] = nil + + assert_nothing_raised do + BulkEmbeddingJob.perform_now(model_name: 'Practice') + end + ensure + ENV['OPEN_AI_ACCESS_TOKEN'] = original_key + end + + test 'accepts force_regenerate parameter' do + original_key = ENV['OPEN_AI_ACCESS_TOKEN'] + ENV['OPEN_AI_ACCESS_TOKEN'] = nil + + assert_nothing_raised do + BulkEmbeddingJob.perform_now(force_regenerate: true) + end + ensure + ENV['OPEN_AI_ACCESS_TOKEN'] = original_key + end + + test 'job is enqueued to default queue' do + assert_equal 'default', BulkEmbeddingJob.queue_name + end +end diff --git a/test/jobs/embedding_generate_job_test.rb b/test/jobs/embedding_generate_job_test.rb new file mode 100644 index 00000000000..57a1bcc74ba --- /dev/null +++ b/test/jobs/embedding_generate_job_test.rb @@ -0,0 +1,27 @@ +# frozen_string_literal: true + +require 'test_helper' + +class EmbeddingGenerateJobTest < ActiveJob::TestCase + test 'performs without error when API is not available' do + original_key = ENV['OPEN_AI_ACCESS_TOKEN'] + ENV['OPEN_AI_ACCESS_TOKEN'] = nil + + practice = practices(:practice1) + assert_nothing_raised do + EmbeddingGenerateJob.perform_now(model_name: 'Practice', record_id: practice.id) + end + ensure + ENV['OPEN_AI_ACCESS_TOKEN'] = original_key + end + + test 'handles missing record gracefully' do + assert_nothing_raised do + EmbeddingGenerateJob.perform_now(model_name: 'Practice', record_id: -1) + end + end + + test 'job is enqueued to default queue' do + assert_equal 'default', EmbeddingGenerateJob.queue_name + end +end diff --git a/test/jobs/transcode_job_test.rb b/test/jobs/transcode_job_test.rb index 0ed4bb684b7..18beb85d871 100644 --- a/test/jobs/transcode_job_test.rb +++ b/test/jobs/transcode_job_test.rb @@ -7,9 +7,14 @@ class TranscodeJobTest < ActiveJob::TestCase setup do @movie = movies(:movie1) + @original_transcoder_enabled = Rails.application.config.transcoder['enabled'] Rails.application.config.transcoder['enabled'] = true end + teardown do + Rails.application.config.transcoder['enabled'] = @original_transcoder_enabled + end + test 'calls transcode on Transcoder::Client' do mock_client = Minitest::Mock.new mock_client.expect :transcode, nil @@ -22,12 +27,8 @@ class TranscodeJobTest < ActiveJob::TestCase test 'does not perform when transcoder is disabled' do Rails.application.config.transcoder['enabled'] = false client_called = false - begin - Transcoder::Client.stub :new, ->(*) { client_called = true } do - TranscodeJob.perform_now(@movie) - end - ensure - Rails.application.config.transcoder['enabled'] = true + Transcoder::Client.stub :new, ->(*) { client_called = true } do + TranscodeJob.perform_now(@movie) end assert_not client_called, 'Transcoder::Client should not be called when disabled' end diff --git a/test/models/searcher_mode_test.rb b/test/models/searcher_mode_test.rb new file mode 100644 index 00000000000..a63f0347268 --- /dev/null +++ b/test/models/searcher_mode_test.rb @@ -0,0 +1,59 @@ +# frozen_string_literal: true + +require 'test_helper' + +class SearcherModeTest < ActiveSupport::TestCase + def current_user + users(:kimura) + end + + test 'default mode is keyword' do + searcher = Searcher.new(keyword: 'test', current_user:) + assert_equal :keyword, searcher.mode + end + + test 'mode can be set to keyword' do + searcher = Searcher.new(keyword: 'test', current_user:, mode: :keyword) + assert_equal :keyword, searcher.mode + end + + test 'mode can be set to semantic' do + searcher = Searcher.new(keyword: 'test', current_user:, mode: :semantic) + assert_equal :semantic, searcher.mode + end + + test 'mode can be set to hybrid' do + searcher = Searcher.new(keyword: 'test', current_user:, mode: :hybrid) + assert_equal :hybrid, searcher.mode + end + + test 'invalid mode falls back to keyword' do + searcher = Searcher.new(keyword: 'test', current_user:, mode: :invalid) + assert_equal :keyword, searcher.mode + end + + test 'string mode is converted to symbol' do + searcher = Searcher.new(keyword: 'test', current_user:, mode: 'semantic') + assert_equal :semantic, searcher.mode + end + + test 'MODES constant contains all valid modes' do + expected_modes = %i[keyword semantic hybrid].to_set + assert_equal expected_modes, Searcher::MODES.to_set + end + + test 'keyword search returns array' do + results = Searcher.new(keyword: 'テスト', current_user:, mode: :keyword).search + assert_kind_of Array, results + end + + test 'semantic search returns array' do + results = Searcher.new(keyword: 'テスト', current_user:, mode: :semantic).search + assert_kind_of Array, results + end + + test 'hybrid search returns array' do + results = Searcher.new(keyword: 'テスト', current_user:, mode: :hybrid).search + assert_kind_of Array, results + end +end diff --git a/test/models/smart_search/embedding_generator_test.rb b/test/models/smart_search/embedding_generator_test.rb new file mode 100644 index 00000000000..ca613fd4d25 --- /dev/null +++ b/test/models/smart_search/embedding_generator_test.rb @@ -0,0 +1,76 @@ +# frozen_string_literal: true + +require 'test_helper' + +class SmartSearch::EmbeddingGeneratorTest < ActiveSupport::TestCase + test 'api_available? returns false when API key is not set' do + original_key = ENV['OPEN_AI_ACCESS_TOKEN'] + ENV['OPEN_AI_ACCESS_TOKEN'] = nil + + generator = SmartSearch::EmbeddingGenerator.new + assert_not generator.api_available? + ensure + ENV['OPEN_AI_ACCESS_TOKEN'] = original_key + end + + test 'api_available? returns true when API key is set' do + original_key = ENV['OPEN_AI_ACCESS_TOKEN'] + ENV['OPEN_AI_ACCESS_TOKEN'] = 'test-key' + + generator = SmartSearch::EmbeddingGenerator.new + assert generator.api_available? + ensure + ENV['OPEN_AI_ACCESS_TOKEN'] = original_key + end + + test 'generate returns nil when API is not available' do + original_key = ENV['OPEN_AI_ACCESS_TOKEN'] + ENV['OPEN_AI_ACCESS_TOKEN'] = nil + + generator = SmartSearch::EmbeddingGenerator.new + result = generator.generate('test text') + + assert_nil result + ensure + ENV['OPEN_AI_ACCESS_TOKEN'] = original_key + end + + test 'generate returns nil for blank text' do + original_key = ENV['OPEN_AI_ACCESS_TOKEN'] + ENV['OPEN_AI_ACCESS_TOKEN'] = 'test-key' + + generator = SmartSearch::EmbeddingGenerator.new + assert_nil generator.generate(nil) + assert_nil generator.generate('') + assert_nil generator.generate(' ') + ensure + ENV['OPEN_AI_ACCESS_TOKEN'] = original_key + end + + test 'generate_batch returns empty array when API is not available' do + original_key = ENV['OPEN_AI_ACCESS_TOKEN'] + ENV['OPEN_AI_ACCESS_TOKEN'] = nil + + generator = SmartSearch::EmbeddingGenerator.new + result = generator.generate_batch(%w[text1 text2]) + + assert_empty result + ensure + ENV['OPEN_AI_ACCESS_TOKEN'] = original_key + end + + test 'generate_batch returns empty array for blank input' do + original_key = ENV['OPEN_AI_ACCESS_TOKEN'] + ENV['OPEN_AI_ACCESS_TOKEN'] = 'test-key' + + generator = SmartSearch::EmbeddingGenerator.new + assert_empty generator.generate_batch(nil) + assert_empty generator.generate_batch([]) + ensure + ENV['OPEN_AI_ACCESS_TOKEN'] = original_key + end + + test 'MODEL constant is text-embedding-3-small' do + assert_equal 'text-embedding-3-small', SmartSearch::EmbeddingGenerator::MODEL + end +end diff --git a/test/models/smart_search/semantic_searcher_test.rb b/test/models/smart_search/semantic_searcher_test.rb new file mode 100644 index 00000000000..6d07951fa0d --- /dev/null +++ b/test/models/smart_search/semantic_searcher_test.rb @@ -0,0 +1,56 @@ +# frozen_string_literal: true + +require 'test_helper' + +class SmartSearch::SemanticSearcherTest < ActiveSupport::TestCase + def setup + @original_key = ENV['OPEN_AI_ACCESS_TOKEN'] + ENV['OPEN_AI_ACCESS_TOKEN'] = nil + @searcher = SmartSearch::SemanticSearcher.new + end + + def teardown + ENV['OPEN_AI_ACCESS_TOKEN'] = @original_key + end + + test 'search returns empty array for blank query' do + result = @searcher.search('') + assert_empty result + + result = @searcher.search(nil) + assert_empty result + end + + test 'search returns empty array when API is not available' do + result = @searcher.search('test query') + assert_empty result + end + + test 'search accepts document_type parameter' do + result = @searcher.search('test', document_type: :practice) + assert_kind_of Array, result + end + + test 'search accepts limit parameter' do + result = @searcher.search('test', limit: 5) + assert_kind_of Array, result + end + + test 'search returns array on error' do + result = @searcher.search('test') + assert_kind_of Array, result + end + + test 'search handles nil document_type' do + result = @searcher.search('test', document_type: nil) + assert_kind_of Array, result + end + + test 'search handles invalid limit' do + result = @searcher.search('test', limit: -1) + assert_kind_of Array, result + + result = @searcher.search('test', limit: nil) + assert_kind_of Array, result + end +end diff --git a/test/system/admin/companies_test.rb b/test/system/admin/companies_test.rb index 5fab093b87e..3a3d40ca7cc 100644 --- a/test/system/admin/companies_test.rb +++ b/test/system/admin/companies_test.rb @@ -82,29 +82,43 @@ class Admin::CompaniesTest < ApplicationSystemTestCase end test 'adviser edits own company and cannot edit others' do + own_company = companies(:company1) + other_company = companies(:company2) + + # アドバイザーが自分の企業を設定 visit_with_auth '/current_user/edit', 'advijirou' find('.choices__inner').click - find('div.choices__item[data-value="636488896"]').click + find('.choices__item--choice', text: own_company.name).click click_button '更新する' - find('.user-profile__company-link').click - find('a.card-main-actions__action', text: 'アドバイザーとして編集').click + assert_text 'ユーザー情報を更新しました' + + # 自分の企業を編集できる + visit company_path(own_company) + assert_text 'アドバイザーとして編集' + click_link 'アドバイザーとして編集' within 'form[name=company]' do fill_in 'company[description]', with: '更新しました。' end click_button '更新する' - assert_text '更新しました。' + assert_text '企業を更新しました' - find('a.a-button.is-md.is-secondary.is-block.is-back').click - find('a.companies-item__name-link[href="/companies/998823850"]').click + # 他の企業は編集できない + visit company_path(other_company) assert_no_text 'アドバイザーとして編集' end test 'mentor cannot edit as admin' do + company = companies(:company1) + + # メンターが自分の企業を設定 visit_with_auth '/current_user/edit', 'mentormentaro' find('.choices__inner').click - find('div.choices__item[data-value="636488896"]').click + find('.choices__item--choice', text: company.name).click click_button '更新する' - find('.user-profile__company-link').click + assert_text 'ユーザー情報を更新しました' + + # メンターは管理者として編集できない + visit company_path(company) assert_no_text '管理者として編集' end end diff --git a/test/system/admin/embedding_status_test.rb b/test/system/admin/embedding_status_test.rb new file mode 100644 index 00000000000..39063ae68fd --- /dev/null +++ b/test/system/admin/embedding_status_test.rb @@ -0,0 +1,33 @@ +# frozen_string_literal: true + +require 'application_system_test_case' + +class Admin::EmbeddingStatusTest < ApplicationSystemTestCase + test 'admin can view embedding status page' do + visit_with_auth admin_embedding_status_index_path, 'komagata' + assert_text 'Embedding' + assert_text 'モデル' + assert_text '進捗率' + end + + test 'non-admin cannot view embedding status page' do + visit_with_auth admin_embedding_status_index_path, 'kimura' + assert_text '管理者としてログインしてください' + end + + test 'displays job management link' do + visit_with_auth admin_embedding_status_index_path, 'komagata' + assert_selector 'a[href="/jobs"]', text: 'ジョブ管理' + end + + test 'displays help commands' do + visit_with_auth admin_embedding_status_index_path, 'komagata' + assert_text 'rails smart_search:generate_all' + assert_text 'rails smart_search:stats' + end + + test 'navigation tab is displayed and active' do + visit_with_auth admin_embedding_status_index_path, 'komagata' + assert_selector '.page-tabs__item-link.is-active', text: 'Embedding' + end +end diff --git a/test/system/bookmark/regular_events_test.rb b/test/system/bookmark/regular_events_test.rb new file mode 100644 index 00000000000..f2223e3d268 --- /dev/null +++ b/test/system/bookmark/regular_events_test.rb @@ -0,0 +1,46 @@ +# frozen_string_literal: true + +require 'application_system_test_case' + +class Bookmark::RegularEventTest < ApplicationSystemTestCase + setup do + @regular_event = regular_events(:regular_event1) + end + + test 'shows regular event link on list when clicking bookmark button' do + visit_with_auth regular_event_path(@regular_event), 'machida' + wait_for_javascript_components + assert_selector '#bookmark-button', text: 'Bookmark' + click_button 'Bookmark' + wait_for_javascript_components + assert_selector '#bookmark-button', text: 'Bookmark中' + + visit current_user_bookmarks_path + assert_selector 'a.card-list-item-title__link', text: @regular_event.title + click_link @regular_event.title + + assert_current_path regular_event_path(@regular_event) + end + + test 'updates bookmarks list when toggling bookmark' do + visit_with_auth regular_event_path(@regular_event), 'machida' + wait_for_javascript_components + assert_selector '#bookmark-button', text: 'Bookmark' + click_button 'Bookmark' + wait_for_javascript_components + assert_selector '#bookmark-button', text: 'Bookmark中' + + visit current_user_bookmarks_path + assert_selector 'a.card-list-item-title__link', text: @regular_event.title + + visit regular_event_path(@regular_event) + wait_for_javascript_components + assert_selector '#bookmark-button', text: 'Bookmark中' + click_button 'Bookmark中' + wait_for_javascript_components + assert_selector '#bookmark-button', text: 'Bookmark' + + visit current_user_bookmarks_path + assert_no_selector 'a.card-list-item-title__link', text: @regular_event.title + end +end diff --git a/test/system/current_user/learning_time_frame_test.rb b/test/system/current_user/learning_time_frame_test.rb index d3c70e3ee69..4b3f6ee27bd 100644 --- a/test/system/current_user/learning_time_frame_test.rb +++ b/test/system/current_user/learning_time_frame_test.rb @@ -30,6 +30,7 @@ class LearningTimeFrameTest < ApplicationSystemTestCase visit_with_auth '/current_user/edit', 'kimura' assert_selector 'h1.auth-form__title', text: '登録情報変更' assert_selector 'label.a-form-label', text: '主な活動予定時間' + assert_selector '#learning_time_frame' find('label[for="user_learning_time_frame_ids_1"]').click find('label[for="user_learning_time_frame_ids_25"]').click @@ -41,9 +42,9 @@ class LearningTimeFrameTest < ApplicationSystemTestCase assert_selector 'h1.page-main-header__title', text: 'プロフィール' assert_selector 'h2.card-header__title', text: '主な活動予定時間' - assert page.has_selector?('td[name="checked_1"]') - assert page.has_selector?('td[name="checked_25"]') - assert page.has_selector?('td[name="checked_49"]') + assert_selector 'td[name="checked_1"]' + assert_selector 'td[name="checked_25"]' + assert_selector 'td[name="checked_49"]' end end end diff --git a/test/system/product/unassigned_test.rb b/test/system/product/unassigned_test.rb index cf1df217263..1ff179da5a4 100644 --- a/test/system/product/unassigned_test.rb +++ b/test/system/product/unassigned_test.rb @@ -62,9 +62,9 @@ class Product::UnassignedTest < ApplicationSystemTestCase test 'show elapsed days links that jump to elements on the same page' do visit_with_auth '/products/unassigned', 'komagata' within '.page-nav__items.elapsed-days' do - assert_link('6日以上経過', href: '#6days-elapsed') + assert_link('6日以上経過', href: '#elapsed-6days') assert has_selector?('li.is-active', text: '6日以上経過') - assert_link('1日経過', href: '#1days-elapsed') + assert_link('1日経過', href: '#elapsed-1days') assert has_selector?('li.is-inactive', text: '1日経過') end end diff --git a/test/system/reactions/users_list_test.rb b/test/system/reactions/users_list_test.rb index 208463d821e..32fb749fd46 100644 --- a/test/system/reactions/users_list_test.rb +++ b/test/system/reactions/users_list_test.rb @@ -69,7 +69,9 @@ class UsersListTest < ApplicationSystemTestCase add_reaction('smile') assert_selector('.js-reactions-users-toggle:not(.is-disabled)') - find("li[data-reaction-kind='smile'].is-reacted").click + within('.reactions__items.is-selected') do + find("li[data-reaction-kind='smile'].is-reacted").click + end assert_selector('.js-reactions-users-toggle.is-disabled') end end diff --git a/test/system/require_login/articles_test.rb b/test/system/require_login/articles_test.rb index b6289761073..0191ac0592a 100644 --- a/test/system/require_login/articles_test.rb +++ b/test/system/require_login/articles_test.rb @@ -5,6 +5,13 @@ class ArticlesLoginTest < ApplicationSystemTestCase include LoginAssertHelper + + setup do + Capybara.reset_sessions! + rescue Net::ReadTimeout + # セッションリセット時のタイムアウトは無視して続行 + end + test 'can access articles without login' do assert_no_login_required('/articles', 'ブログ') end diff --git a/test/system/require_login/hibernation_test.rb b/test/system/require_login/hibernation_test.rb index da344721793..b82de927317 100644 --- a/test/system/require_login/hibernation_test.rb +++ b/test/system/require_login/hibernation_test.rb @@ -5,6 +5,13 @@ class HibernationLoginTest < ApplicationSystemTestCase include LoginAssertHelper + + setup do + Capybara.reset_sessions! + rescue Net::ReadTimeout + # セッションリセット時のタイムアウトは無視して続行 + end + test 'can access hibernating complete screen without login' do assert_no_login_required('/hibernation', '休会手続きが完了しました') end diff --git a/test/system/require_login/retirement_test.rb b/test/system/require_login/retirement_test.rb index 8feaa155331..4f24536b490 100644 --- a/test/system/require_login/retirement_test.rb +++ b/test/system/require_login/retirement_test.rb @@ -5,6 +5,13 @@ class RetirementLoginTest < ApplicationSystemTestCase include LoginAssertHelper + + setup do + Capybara.reset_sessions! + rescue Net::ReadTimeout + # セッションリセット時のタイムアウトは無視して続行 + end + test 'can access retirement complete screen without login' do assert_no_login_required('/retirement', '退会処理が完了しました') end diff --git a/test/system/require_login/users_test.rb b/test/system/require_login/users_test.rb index b15d841d84a..7b89d36cbe5 100644 --- a/test/system/require_login/users_test.rb +++ b/test/system/require_login/users_test.rb @@ -5,11 +5,20 @@ class UsersLoginTest < ApplicationSystemTestCase include LoginAssertHelper + + setup do + Capybara.reset_sessions! + rescue Net::ReadTimeout + # セッションリセット時のタイムアウトは無視して続行 + end + test 'cannot access users list without login' do assert_login_required('/users') end test 'can access user create screen without login' do - assert_no_login_required('/users/new', 'FBC参加登録') + visit '/users/new' + assert_selector 'h1.auth-form__title', text: 'FBC参加登録' + assert_no_text 'ログインしてください' end end diff --git a/test/system/sign_up/card_test.rb b/test/system/sign_up/card_test.rb index ba6d85c5cc3..46edc54f0cb 100644 --- a/test/system/sign_up/card_test.rb +++ b/test/system/sign_up/card_test.rb @@ -8,6 +8,8 @@ class CardTest < ApplicationSystemTestCase @bot_token = Discord::Server.authorize_token Discord::Server.authorize_token = nil Capybara.reset_sessions! + rescue Net::ReadTimeout + # セッションリセット時のタイムアウトは無視して続行 end teardown do diff --git a/test/system/sign_up/role_test.rb b/test/system/sign_up/role_test.rb index b82580e3485..94d92b5634e 100644 --- a/test/system/sign_up/role_test.rb +++ b/test/system/sign_up/role_test.rb @@ -8,6 +8,8 @@ class RoleTest < ApplicationSystemTestCase @bot_token = Discord::Server.authorize_token Discord::Server.authorize_token = nil Capybara.reset_sessions! + rescue Net::ReadTimeout + # セッションリセット時のタイムアウトは無視して続行 end teardown do diff --git a/test/system/sign_up/trainee_test.rb b/test/system/sign_up/trainee_test.rb index f8f181ce5c9..503674d678e 100644 --- a/test/system/sign_up/trainee_test.rb +++ b/test/system/sign_up/trainee_test.rb @@ -8,6 +8,8 @@ class TraineeTest < ApplicationSystemTestCase @bot_token = Discord::Server.authorize_token Discord::Server.authorize_token = nil Capybara.reset_sessions! + rescue Net::ReadTimeout + # セッションリセット時のタイムアウトは無視して続行 end teardown do diff --git a/test/system/sign_up/validation_test.rb b/test/system/sign_up/validation_test.rb index 378e0041362..934df7aa772 100644 --- a/test/system/sign_up/validation_test.rb +++ b/test/system/sign_up/validation_test.rb @@ -8,6 +8,8 @@ class ValidationTest < ApplicationSystemTestCase @bot_token = Discord::Server.authorize_token Discord::Server.authorize_token = nil Capybara.reset_sessions! + rescue Net::ReadTimeout + # セッションリセット時のタイムアウトは無視して続行 end teardown do diff --git a/test/system/sign_up_test.rb b/test/system/sign_up_test.rb index b627c11fb22..f31845b0526 100644 --- a/test/system/sign_up_test.rb +++ b/test/system/sign_up_test.rb @@ -7,6 +7,8 @@ class SignUpTest < ApplicationSystemTestCase @bot_token = Discord::Server.authorize_token Discord::Server.authorize_token = nil Capybara.reset_sessions! + rescue Net::ReadTimeout + # セッションリセット時のタイムアウトは無視して続行 end teardown do diff --git a/test/system/smart_search_test.rb b/test/system/smart_search_test.rb new file mode 100644 index 00000000000..bc9756e9feb --- /dev/null +++ b/test/system/smart_search_test.rb @@ -0,0 +1,45 @@ +# frozen_string_literal: true + +require 'application_system_test_case' + +class SmartSearchTest < ApplicationSystemTestCase + test 'search mode selector is displayed' do + visit_with_auth '/', 'hatsuno' + find('.js-modal-search-shown-trigger').click + within('form[name=search]') do + assert_text '検索方法' + assert_text 'キーワード検索' + assert_text 'AI検索' + assert_text 'ハイブリッド' + end + end + + test 'search with keyword mode' do + visit_with_auth '/', 'hatsuno' + find('.js-modal-search-shown-trigger').click + within('form[name=search]') do + select 'すべて' + choose 'キーワード検索', allow_label_click: true + fill_in 'word', with: '検索結果テスト用' + end + find('#test-search-modal').click + assert_selector '.card-list-item' + assert_text '検索結果テスト用' + end + + test 'search mode is preserved in search results page' do + visit_with_auth searchables_path(word: 'テスト', mode: 'semantic'), 'hatsuno' + find('.js-modal-search-shown-trigger').click + within('form[name=search]') do + assert_selector 'input[name=mode][value=semantic][checked]', visible: :all + end + end + + test 'keyword mode is default when mode param is not specified' do + visit_with_auth searchables_path(word: 'テスト'), 'hatsuno' + find('.js-modal-search-shown-trigger').click + within('form[name=search]') do + assert_selector 'input[name=mode][value=keyword][checked]', visible: :all + end + end +end diff --git a/test/system/users/registration_test.rb b/test/system/users/registration_test.rb index 9877aa7e9eb..1f060f602ed 100644 --- a/test/system/users/registration_test.rb +++ b/test/system/users/registration_test.rb @@ -6,21 +6,25 @@ module Users class RegistrationTest < ApplicationSystemTestCase test 'GET /users/new' do visit '/users/new' + assert_selector 'form[name=user]' assert_equal 'FBC参加登録 | FJORD BOOT CAMP（フィヨルドブートキャンプ）', title end test 'GET /users/new as an adviser' do visit '/users/new?role=adviser' + assert_selector 'form[name=user]' assert_equal 'FBCアドバイザー参加登録 | FJORD BOOT CAMP（フィヨルドブートキャンプ）', title end test 'GET /users/new as a trainee' do visit '/users/new?role=trainee_invoice_payment' + assert_selector 'form[name=user]' assert_equal 'FBC研修生参加登録 | FJORD BOOT CAMP（フィヨルドブートキャンプ）', title end test 'GET /users/new as a mentor' do visit '/users/new?role=mentor' + assert_selector 'form[name=user]' assert_equal 'FBCメンター参加登録 | FJORD BOOT CAMP（フィヨルドブートキャンプ）', title end end