├── .gitignore
├── LICENSE
├── README.md
├── index.html
└── src
    ├── css
        ├── index.css
        ├── shared
        │   ├── index.css
        │   └── modules
        │   │   ├── background.css
        │   │   ├── border.css
        │   │   ├── button.css
        │   │   ├── flex.css
        │   │   ├── interactivity.css
        │   │   ├── layout.css
        │   │   ├── sizing.css
        │   │   ├── spacing.css
        │   │   ├── table.css
        │   │   └── typhography.css
        └── ui
        │   ├── index.css
        │   └── modules
        │       ├── chip.css
        │       ├── modal.css
        │       └── youtubeCard.css
    ├── images
        ├── readme
        │   ├── laptop_with_youtube_logo.png
        │   └── youtube_classroom_preview.png
        └── status
        │   └── not_found.png
    └── js
        └── index.js


/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 next-step
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="middle" >
  2 |   <img width="200px;" src="./src/images/readme/laptop_with_youtube_logo.png"/>
  3 | </p>
  4 | <h2 align="middle">level1 - 나만의 유튜브 강의실</h2>
  5 | <p align="middle">자바스크립트와 외부 API를 이용해 구현 하는 나만의 유튜브 강의실</p>
  6 | <p align="middle">
  7 |   <img src="https://img.shields.io/badge/version-1.0.0-blue?style=flat-square" alt="template version"/>
  8 |   <img src="https://img.shields.io/badge/language-html-red.svg?style=flat-square"/>
  9 |   <img src="https://img.shields.io/badge/language-css-blue.svg?style=flat-square"/>
 10 |   <img src="https://img.shields.io/badge/language-js-yellow.svg?style=flat-square"/>
 11 |   <img src="https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square"/>
 12 | </p>
 13 | 
 14 | <p align="middle">
 15 |   <a href="https://next-step.github.io/js-youtube-classroom/">🖥️ 데모 링크</a>
 16 | </p>
 17 | 
 18 | ## 🔥 Projects!
 19 | 
 20 | <p align="middle">
 21 |   <img src="./src/images/readme/youtube_classroom_preview.png">
 22 | </p>
 23 | 
 24 | ## 🎯 step1 검색 기능 UI
 25 | 
 26 | - [ ] [유튜브 검색 API](https://developers.google.com/youtube/v3/getting-started?hl=ko)를 통해서, 내가 추가로 보고 싶은 영상들을 검색할 수 있다.
 27 |   - [ ] 검색 시 엔터키를 눌렀을 때와 마우스로 검색 버튼을 눌렀을 때 검색 동작이 이루어진다.
 28 | - [ ] 로딩컴포넌트: 데이터를 불러오는 중일 때, 현재 데이터를 불러오는 중임을 skeleton UI로 보여준다.
 29 | - [ ] 검색 결과가 없는 경우 결과 없음 이미지를 추가하여, 사용자에게 메시지를 보여준다.
 30 |   - [ ] 검색 결과 없음 이미지는 `src/images/status/not_found.png` 경로에 있다.
 31 | - [ ] 최초 검색결과는 10개까지만 보여준다. 더 많은 데이터는 스크롤을 내릴 때 추가로 불러온다.
 32 |   - 검색 결과 화면에서 유저가 브라우저 스크롤 바를 끝까지 이동시켰을 경우, 그다음 10개 아이템을 추가로 api요청하여 불러온다.
 33 | - [ ] 내가 검색한 영상들의 json 데이터를 `저장`할 수 있다. (실제 저장이 아닌 영상 id를 Web Storage에 저장). 단 이미 저장된 경우는 저장 버튼이 보이지 않게 한다.
 34 | - [ ] 저장 가능한 최대 동영상의 갯수는 100개이다.
 35 | - [ ] 검색 모달에 다시 접근했을 때 가장 마지막에 검색한 키워드로 검색한 결과를 보여준다.
 36 | - [ ] 최근 검색 키워드를 3개까지 화면상에 검색창 하단에 보여준다.
 37 | 
 38 | ## 🎯🎯 step2 강의실 관리 기능과 SPA
 39 | 
 40 | ### 🚏 1) 라우팅 기능
 41 | - [ ] **Browser History Api**를 이용하여 SPA처럼 라우팅을 적용한다.
 42 |   - [ ] routing은 `볼 영상(to-watch)`, `본 영상(watched)`, `좋아요 한 영상(liked)` 로 관리한다.
 43 | 
 44 | ### 📚 2) 강의실 관리
 45 | - [ ] 가장 처음에는 저장된 영상이 없음으로, 비어있다는 것을 사용자에게 알려주는 상태를 보여준다.
 46 | - [ ] 이후 페이지를 방문했을 때 기본 메인 화면은 내가 **볼 영상**들의 리스트를 보여준다.
 47 | - [ ] 영상 카드의 이모지 버튼을 클릭하여 아래와 같은 상태 변경이 가능해야 한다.
 48 |   - [ ] ✅ 본 영상으로 체크
 49 |   - [ ] 🗑️ 버튼으로 저장된 리스트에서 삭제할 수 있습니다. (삭제 시 사용자에게 정말 삭제할 것인지 물어봅니다.)
 50 | - [ ] 본 영상, 볼 영상 버튼을 눌러 필터링 할 수 있다.
 51 | - [ ] 👍 좋아요 버튼을 누른 데이터만 필터링해서 보여줄 수 있는 메뉴를 만든다.
 52 |     - [ ] 👍 좋아요 버튼을 누른 경우, 로컬에서 데이터를 변경한다.
 53 |     - [ ] 👍 좋아요 버튼을 다시 클릭해서 해지할 수 있어야 한다.
 54 | 
 55 | ### 👋🏼 3) 사용자 경험
 56 | - [ ] 사용자가 버튼을 클릭했을 때 해당 행위가 정상적으로 동작하거나, 실패하였음을 `snackbar`를 통해 보여준다.
 57 | 
 58 | ## 🎯🎯 step3 with E2E Test
 59 | 
 60 | 아래 요구 사항들에 대한 E2E 테스트코드를 작성한다.
 61 | ```js
 62 | describe("유튜브 검색 테스트", () => {
 63 |   before(() => {});
 64 | 
 65 |   it("저장된 영상이 없을 경우, 비어있다는 것을 사용자에게 알려주는 상태를 보여준다.", () => {});
 66 | 
 67 |   it("동영상 검색 버튼을 클릭 시 모달을 화면에 띄운다.", () => {});
 68 | 
 69 |   it("검색 결과가 없는 경우 결과 없음 이미지와 메세지를 화면에 띄운다.", () => {});
 70 | 
 71 |   it(`최초 검색결과는 10개까지만 보여준다.`, () => {});
 72 | 
 73 |   it(`스크롤을 끝까지 내렸을 때, 추가로 10개의 검색 결과를 가지고 온다.`, () => {});
 74 | 
 75 |   it("동영상의 저장 버튼을 누르면, 동영상의 id를 localStorage에 저장한다.", () => {});
 76 | 
 77 |   it("동영상이 이미 저장된 경우에는 저장버튼을 누를 수 없게 한다.", () => {});
 78 | 
 79 |   it(`최근 검색 키워드를 3개 까지 화면상의 검색창 하단에 보여준다.`, () => {});
 80 | 
 81 |   it("검색 모달에 다시 접근했을 때 가장 마지막에 검색한 키워드로 검색한 결과를 보여준다.", () => {});
 82 | 
 83 |   it('저장된 영상 중 "볼 영상"이 있는 경우, 기본 메인 화면은 "볼 영상" 리스트를 보여준다.', () => {});
 84 | 
 85 |   it('✅ 버튼을 누르면 "본 영상"으로 상태가 변경된다.', () => {});
 86 | 
 87 |   it('👍 버튼을 누르면 "좋아요를 누른 영상" 탭에서 영상을 확인할 수 있다.', () => {});
 88 | 
 89 |   it("🗑️ 버튼을 누르면 사용자에게 정말 삭제할 것인지 물어본 후 저장된 리스트에서 해당 영상을 삭제한다.", () => {});
 90 | 
 91 |   it(`저장된 동영상의 개수가 100개일 때, 동영상 저장을 할 수 없다.`, () => {});
 92 | });
 93 | 
 94 | ```
 95 | 
 96 | 
 97 | <br>
 98 | 
 99 | ## ⚙️ Before Started
100 | 
101 | #### <img alt="Tip" src="https://img.shields.io/static/v1.svg?label=&message=Tip&style=flat-square&color=673ab8"> 로컬에서 서버 띄워서 손쉽게 static resources 변경 및 확인하는 방법
102 | 
103 | 로컬에서 웹서버를 띄워 html, css, js 등을 실시간으로 손쉽게 테스트해 볼 수 있습니다. 이를 위해서는 우선 npm이 설치되어 있어야 합니다. 구글에 `npm install` 이란 키워드로 각자의 운영체제에 맞게끔 npm을 설치해주세요. 이후 아래의 명령어를 통해 실시간으로 웹페이지를 테스트해볼 수 있습니다.
104 | 
105 | ```
106 | npm install -g live-server
107 | ```
108 | 
109 | 실행은 아래의 커맨드로 할 수 있습니다.
110 | 
111 | ```
112 | live-server 폴더명
113 | ```
114 | 
115 | <br>
116 | 
117 | ## 👏🏼 Contributing
118 | 
119 | 만약 미션 수행 중에 개선사항이 보인다면, 언제든 자유롭게 PR을 보내주세요.
120 | 
121 | <br>
122 | 
123 | ## 🐞 Bug Report
124 | 
125 | 버그를 발견한다면, [Issues](https://github.com/next-step/js-youtube-classroom/issues)에 등록해주세요.
126 | 
127 | <br>
128 | 
129 | ## 📝 License
130 | 
131 | This project is [MIT](https://github.com/next-step/js-youtube-classroom/blob/main/LICENSE) licensed.
132 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="kr">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <title>👩🏻‍💻 유튜브 강의실</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
  7 |     <link rel="stylesheet" href="./src/css/index.css" />
  8 |   </head>
  9 |   <body>
 10 |     <div id="app">
 11 |       <div class="d-flex justify-center mt-5 w-100">
 12 |         <div class="w-100">
 13 |           <header class="my-4">
 14 |             <h2 class="text-center font-bold">👩🏻‍💻 나만의 유튜브 강의실 👨🏻‍💻</h2>
 15 |             <nav class="d-flex justify-center">
 16 |               <button class="btn bg-cyan-100 mx-1">👁️ 볼 영상</button>
 17 |               <button class="btn mx-1">✅ 본 영상</button>
 18 |               <button id="search-button" class="btn mx-1">
 19 |                 🔍 동영상 검색
 20 |               </button>
 21 |             </nav>
 22 |           </header>
 23 |           <main class="mt-10">
 24 |             <section class="video-wrapper">
 25 |               <article class="clip">
 26 |                 <div class="preview-container">
 27 |                   <iframe
 28 |                     width="100%"
 29 |                     height="118"
 30 |                     src="https://www.youtube.com/embed/Ngj3498Tm_0"
 31 |                     frameborder="0"
 32 |                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 33 |                     allowfullscreen
 34 |                   ></iframe>
 35 |                 </div>
 36 |                 <div class="content-container pt-2 px-1">
 37 |                   <h3>아두이노 무드등</h3>
 38 |                   <div>
 39 |                     <a
 40 |                       href="https://www.youtube.com/channel/UC-mOekGSesms0agFntnQang"
 41 |                       target="_blank"
 42 |                       class="channel-name mt-1"
 43 |                     >
 44 |                       메이커준
 45 |                     </a>
 46 |                     <div class="meta">
 47 |                       <p>2021년 3월 2일</p>
 48 |                     </div>
 49 |                     <div>
 50 |                       <span class="opacity-hover">✅</span>
 51 |                       <span class="opacity-hover">👍</span>
 52 |                       <span class="opacity-hover">💬</span>
 53 |                       <span class="opacity-hover">🗑️</span>
 54 |                     </div>
 55 |                   </div>
 56 |                 </div>
 57 |               </article>
 58 |             </section>
 59 |           </main>
 60 |         </div>
 61 |       </div>
 62 |       <div class="modal">
 63 |         <div class="modal-inner p-8">
 64 |           <button class="modal-close">
 65 |             <svg viewbox="0 0 40 40">
 66 |               <path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" />
 67 |             </svg>
 68 |           </button>
 69 |           <header>
 70 |             <h2 class="text-center">🔎 유튜브 검색</h2>
 71 |           </header>
 72 |           <form class="d-flex">
 73 |             <input type="text" class="w-100 mr-2 pl-2" placeholder="검색" />
 74 |             <button type="button" class="btn bg-cyan-500">검색</button>
 75 |           </form>
 76 |           <section class="mt-2">
 77 |             <span class="text-gray-700">최근 검색어: </span>
 78 |             <a class="chip">메이커준</a>
 79 |             <a class="chip">블랙커피</a>
 80 |             <a class="chip">자바스크립트</a>
 81 |           </section>
 82 |           <section>
 83 |             <div class="d-flex justify-end text-gray-700">
 84 |               저장된 영상 갯수: 50개
 85 |             </div>
 86 |             <section class="video-wrapper">
 87 |               <article class="clip">
 88 |                 <div class="preview-container">
 89 |                   <iframe
 90 |                     width="100%"
 91 |                     height="118"
 92 |                     src="https://www.youtube.com/embed/Ngj3498Tm_0"
 93 |                     frameborder="0"
 94 |                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 95 |                     allowfullscreen
 96 |                   ></iframe>
 97 |                 </div>
 98 |                 <div class="content-container pt-2 px-1">
 99 |                   <h3>아두이노 무드등</h3>
100 |                   <div>
101 |                     <a
102 |                       href="https://www.youtube.com/channel/UC-mOekGSesms0agFntnQang"
103 |                       target="_blank"
104 |                       class="channel-name mt-1"
105 |                     >
106 |                       메이커준
107 |                     </a>
108 |                     <div class="meta">
109 |                       <p>2021년 3월 2일</p>
110 |                     </div>
111 |                     <div class="d-flex justify-end">
112 |                       <button class="btn">⬇️ 저장</button>
113 |                     </div>
114 |                   </div>
115 |                 </div>
116 |               </article>
117 |             </section>
118 |           </section>
119 |         </div>
120 |       </div>
121 |     </div>
122 |     <script type="module" src="./src/js/index.js"></script>
123 |   </body>
124 | </html>
125 | 


--------------------------------------------------------------------------------
/src/css/index.css:
--------------------------------------------------------------------------------
 1 | @import "./shared/index.css";
 2 | @import "./ui/index.css";
 3 | 
 4 | html,
 5 | body {
 6 |   margin: 0;
 7 |   height: 100%;
 8 |   font-size: 16px;
 9 | }
10 | 
11 | #app {
12 |   max-width: 960px;
13 |   margin: 0 auto;
14 | }
15 | 
16 | a {
17 |   text-decoration: none;
18 | }
19 | 
20 | .opacity-hover {
21 |   opacity: 0.3;
22 | }
23 | 
24 | .opacity-hover:hover {
25 |   opacity: 1;
26 | }
27 | 


--------------------------------------------------------------------------------
/src/css/shared/index.css:
--------------------------------------------------------------------------------
 1 | @import "modules/button.css";
 2 | @import "modules/layout.css";
 3 | @import "modules/sizing.css";
 4 | @import "modules/typhography.css";
 5 | @import "modules/spacing.css";
 6 | @import "modules/interactivity.css";
 7 | @import "modules/border.css";
 8 | @import "modules/flex.css";
 9 | @import "modules/background.css";
10 | 


--------------------------------------------------------------------------------
/src/css/shared/modules/background.css:
--------------------------------------------------------------------------------
  1 | /* Background Color */
  2 | .bg-transparent {
  3 |   background-color: transparent;
  4 | }
  5 | 
  6 | .bg-current {
  7 |   background-color: currentColor;
  8 | }
  9 | 
 10 | .bg-black {
 11 |   background-color: rgb(0, 0, 0);
 12 | }
 13 | 
 14 | .bg-white {
 15 |   background-color: rgb(255, 255, 255);
 16 | }
 17 | 
 18 | .bg-gray-50 {
 19 |   background-color: rgb(249, 250, 251);
 20 | }
 21 | 
 22 | .bg-gray-100 {
 23 |   background-color: rgb(243, 244, 246);
 24 | }
 25 | 
 26 | .bg-gray-200 {
 27 |   background-color: rgb(229, 231, 235);
 28 | }
 29 | 
 30 | .bg-gray-300 {
 31 |   background-color: rgb(209, 213, 219);
 32 | }
 33 | 
 34 | .bg-gray-400 {
 35 |   background-color: rgb(156, 163, 175);
 36 | }
 37 | 
 38 | .bg-gray-500 {
 39 |   background-color: rgb(107, 114, 128);
 40 | }
 41 | 
 42 | .bg-gray-600 {
 43 |   background-color: rgb(75, 85, 99);
 44 | }
 45 | 
 46 | .bg-gray-700 {
 47 |   background-color: rgb(55, 65, 81);
 48 | }
 49 | 
 50 | .bg-gray-800 {
 51 |   background-color: rgb(31, 41, 55);
 52 | }
 53 | 
 54 | .bg-gray-900 {
 55 |   background-color: rgb(17, 24, 39);
 56 | }
 57 | 
 58 | .bg-red-50 {
 59 |   background-color: rgb(254, 242, 242);
 60 | }
 61 | 
 62 | .bg-red-100 {
 63 |   background-color: rgb(254, 226, 226);
 64 | }
 65 | 
 66 | .bg-red-200 {
 67 |   background-color: rgb(254, 202, 202);
 68 | }
 69 | 
 70 | .bg-red-300 {
 71 |   background-color: rgb(252, 165, 165);
 72 | }
 73 | 
 74 | .bg-red-400 {
 75 |   background-color: rgb(248, 113, 113);
 76 | }
 77 | 
 78 | .bg-red-500 {
 79 |   background-color: rgb(239, 68, 68);
 80 | }
 81 | 
 82 | .bg-red-600 {
 83 |   background-color: rgb(220, 38, 38);
 84 | }
 85 | 
 86 | .bg-red-700 {
 87 |   background-color: rgb(185, 28, 28);
 88 | }
 89 | 
 90 | .bg-red-800 {
 91 |   background-color: rgb(153, 27, 27);
 92 | }
 93 | 
 94 | .bg-red-900 {
 95 |   background-color: rgb(127, 29, 29);
 96 | }
 97 | 
 98 | .bg-yellow-50 {
 99 |   background-color: rgb(255, 251, 235);
100 | }
101 | 
102 | .bg-yellow-100 {
103 |   background-color: rgb(254, 243, 199);
104 | }
105 | 
106 | .bg-yellow-200 {
107 |   background-color: rgb(253, 230, 138);
108 | }
109 | 
110 | .bg-yellow-300 {
111 |   background-color: rgb(252, 211, 77);
112 | }
113 | 
114 | .bg-yellow-400 {
115 |   background-color: rgb(251, 191, 36);
116 | }
117 | 
118 | .bg-yellow-500 {
119 |   background-color: rgb(245, 158, 11);
120 | }
121 | 
122 | .bg-yellow-600 {
123 |   background-color: rgb(217, 119, 6);
124 | }
125 | 
126 | .bg-yellow-700 {
127 |   background-color: rgb(180, 83, 9);
128 | }
129 | 
130 | .bg-yellow-800 {
131 |   background-color: rgb(146, 64, 14);
132 | }
133 | 
134 | .bg-yellow-900 {
135 |   background-color: rgb(120, 53, 15);
136 | }
137 | 
138 | .bg-green-50 {
139 |   background-color: rgb(236, 253, 245);
140 | }
141 | 
142 | .bg-green-100 {
143 |   background-color: rgb(209, 250, 229);
144 | }
145 | 
146 | .bg-green-200 {
147 |   background-color: rgb(167, 243, 208);
148 | }
149 | 
150 | .bg-green-300 {
151 |   background-color: rgb(110, 231, 183);
152 | }
153 | 
154 | .bg-green-400 {
155 |   background-color: rgb(52, 211, 153);
156 | }
157 | 
158 | .bg-green-500 {
159 |   background-color: rgb(16, 185, 129);
160 | }
161 | 
162 | .bg-green-600 {
163 |   background-color: rgb(5, 150, 105);
164 | }
165 | 
166 | .bg-green-700 {
167 |   background-color: rgb(4, 120, 87);
168 | }
169 | 
170 | .bg-green-800 {
171 |   background-color: rgb(6, 95, 70);
172 | }
173 | 
174 | .bg-green-900 {
175 |   background-color: rgb(6, 78, 59);
176 | }
177 | 
178 | .bg-blue-50 {
179 |   background-color: rgb(239, 246, 255);
180 | }
181 | 
182 | .bg-blue-100 {
183 |   background-color: rgb(219, 234, 254);
184 | }
185 | 
186 | .bg-blue-200 {
187 |   background-color: rgb(191, 219, 254);
188 | }
189 | 
190 | .bg-blue-300 {
191 |   background-color: rgb(147, 197, 253);
192 | }
193 | 
194 | .bg-blue-400 {
195 |   background-color: rgb(96, 165, 250);
196 | }
197 | 
198 | .bg-blue-500 {
199 |   background-color: rgb(59, 130, 246);
200 | }
201 | 
202 | .bg-blue-600 {
203 |   background-color: rgb(37, 99, 235);
204 | }
205 | 
206 | .bg-blue-700 {
207 |   background-color: rgb(29, 78, 216);
208 | }
209 | 
210 | .bg-blue-800 {
211 |   background-color: rgb(30, 64, 175);
212 | }
213 | 
214 | .bg-blue-900 {
215 |   background-color: rgb(30, 58, 138);
216 | }
217 | 
218 | .bg-cyan-50 {
219 |   background-color: rgb(224, 246, 249);
220 | }
221 | 
222 | .bg-cyan-100 {
223 |   background-color: rgb(179, 234, 242);
224 | }
225 | 
226 | .bg-cyan-200 {
227 |   background-color: rgb(129, 222, 234);
228 | }
229 | 
230 | .bg-cyan-300 {
231 |   background-color: rgb(78, 207, 224);
232 | }
233 | 
234 | .bg-cyan-400 {
235 |   background-color: rgb(39, 198, 218);
236 | }
237 | 
238 | .bg-cyan-500 {
239 |   background-color: rgb(0, 188, 212);
240 | }
241 | 
242 | .bg-cyan-600 {
243 |   background-color: rgb(5, 172, 193);
244 | }
245 | 
246 | .bg-cyan-700 {
247 |   background-color: rgb(0, 152, 167);
248 | }
249 | 
250 | .bg-cyan-800 {
251 |   background-color: rgb(2, 131, 143);
252 | }
253 | 
254 | .bg-cyan-900 {
255 |   background-color: rgb(5, 95, 100);
256 | }
257 | 
258 | .bg-indigo-50 {
259 |   background-color: rgb(238, 242, 255);
260 | }
261 | 
262 | .bg-indigo-100 {
263 |   background-color: rgb(224, 231, 255);
264 | }
265 | 
266 | .bg-indigo-200 {
267 |   background-color: rgb(199, 210, 254);
268 | }
269 | 
270 | .bg-indigo-300 {
271 |   background-color: rgb(165, 180, 252);
272 | }
273 | 
274 | .bg-indigo-400 {
275 |   background-color: rgb(129, 140, 248);
276 | }
277 | 
278 | .bg-indigo-500 {
279 |   background-color: rgb(99, 102, 241);
280 | }
281 | 
282 | .bg-indigo-600 {
283 |   background-color: rgb(79, 70, 229);
284 | }
285 | 
286 | .bg-indigo-700 {
287 |   background-color: rgb(67, 56, 202);
288 | }
289 | 
290 | .bg-indigo-800 {
291 |   background-color: rgb(55, 48, 163);
292 | }
293 | 
294 | .bg-indigo-900 {
295 |   background-color: rgb(49, 46, 129);
296 | }
297 | 
298 | .bg-purple-50 {
299 |   background-color: rgb(245, 243, 255);
300 | }
301 | 
302 | .bg-purple-100 {
303 |   background-color: rgb(237, 233, 254);
304 | }
305 | 
306 | .bg-purple-200 {
307 |   background-color: rgb(221, 214, 254);
308 | }
309 | 
310 | .bg-purple-300 {
311 |   background-color: rgb(196, 181, 253);
312 | }
313 | 
314 | .bg-purple-400 {
315 |   background-color: rgb(167, 139, 250);
316 | }
317 | 
318 | .bg-purple-500 {
319 |   background-color: rgb(139, 92, 246);
320 | }
321 | 
322 | .bg-purple-600 {
323 |   background-color: rgb(124, 58, 237);
324 | }
325 | 
326 | .bg-purple-700 {
327 |   background-color: rgb(109, 40, 217);
328 | }
329 | 
330 | .bg-purple-800 {
331 |   background-color: rgb(91, 33, 182);
332 | }
333 | 
334 | .bg-purple-900 {
335 |   background-color: rgb(76, 29, 149);
336 | }
337 | 
338 | .bg-pink-50 {
339 |   background-color: rgb(253, 242, 248);
340 | }
341 | 
342 | .bg-pink-100 {
343 |   background-color: rgb(252, 231, 243);
344 | }
345 | 
346 | .bg-pink-200 {
347 |   background-color: rgb(251, 207, 232);
348 | }
349 | 
350 | .bg-pink-300 {
351 |   background-color: rgb(249, 168, 212);
352 | }
353 | 
354 | .bg-pink-400 {
355 |   background-color: rgb(244, 114, 182);
356 | }
357 | 
358 | .bg-pink-500 {
359 |   background-color: rgb(236, 72, 153);
360 | }
361 | 
362 | .bg-pink-600 {
363 |   background-color: rgb(219, 39, 119);
364 | }
365 | 
366 | .bg-pink-700 {
367 |   background-color: rgb(190, 24, 93);
368 | }
369 | 
370 | .bg-pink-800 {
371 |   background-color: rgb(157, 23, 77);
372 | }
373 | 
374 | .bg-pink-900 {
375 |   background-color: rgb(131, 24, 67);
376 | }
377 | 


--------------------------------------------------------------------------------
/src/css/shared/modules/border.css:
--------------------------------------------------------------------------------
  1 | /* Border Width */
  2 | .border-0 {
  3 |   border-width: 0px;
  4 | }
  5 | 
  6 | .border-2 {
  7 |   border-width: 2px;
  8 | }
  9 | 
 10 | .border-4 {
 11 |   border-width: 4px;
 12 | }
 13 | 
 14 | .border-8 {
 15 |   border-width: 8px;
 16 | }
 17 | 
 18 | .border {
 19 |   border-width: 1px;
 20 | }
 21 | 
 22 | .border-t-0 {
 23 |   border-top-width: 0px;
 24 | }
 25 | 
 26 | .border-r-0 {
 27 |   border-right-width: 0px;
 28 | }
 29 | 
 30 | .border-b-0 {
 31 |   border-bottom-width: 0px;
 32 | }
 33 | 
 34 | .border-l-0 {
 35 |   border-left-width: 0px;
 36 | }
 37 | 
 38 | .border-t-2 {
 39 |   border-top-width: 2px;
 40 | }
 41 | 
 42 | .border-r-2 {
 43 |   border-right-width: 2px;
 44 | }
 45 | 
 46 | .border-b-2 {
 47 |   border-bottom-width: 2px;
 48 | }
 49 | 
 50 | .border-l-2 {
 51 |   border-left-width: 2px;
 52 | }
 53 | 
 54 | .border-t-4 {
 55 |   border-top-width: 4px;
 56 | }
 57 | 
 58 | .border-r-4 {
 59 |   border-right-width: 4px;
 60 | }
 61 | 
 62 | .border-b-4 {
 63 |   border-bottom-width: 4px;
 64 | }
 65 | 
 66 | .border-l-4 {
 67 |   border-left-width: 4px;
 68 | }
 69 | 
 70 | .border-t-8 {
 71 |   border-top-width: 8px;
 72 | }
 73 | 
 74 | .border-r-8 {
 75 |   border-right-width: 8px;
 76 | }
 77 | 
 78 | .border-b-8 {
 79 |   border-bottom-width: 8px;
 80 | }
 81 | 
 82 | .border-l-8 {
 83 |   border-left-width: 8px;
 84 | }
 85 | 
 86 | .border-t {
 87 |   border-top-width: 1px;
 88 | }
 89 | 
 90 | .border-r {
 91 |   border-right-width: 1px;
 92 | }
 93 | 
 94 | .border-b {
 95 |   border-bottom-width: 1px;
 96 | }
 97 | 
 98 | .border-l {
 99 |   border-left-width: 1px;
100 | }
101 | 
102 | /* Border Radius */
103 | .rounded-none {
104 |   border-radius: 0px;
105 | }
106 | 
107 | .rounded-sm {
108 |   border-radius: 0.125rem;
109 | }
110 | 
111 | rounded {
112 |   border-radius: 0.25rem;
113 | }
114 | 
115 | .rounded-md {
116 |   border-radius: 0.375rem;
117 | }
118 | 
119 | .rounded-lg {
120 |   border-radius: 0.5rem;
121 | }
122 | 
123 | .rounded-xl {
124 |   border-radius: 0.75rem;
125 | }
126 | 
127 | .rounded-2xl {
128 |   border-radius: 1rem;
129 | }
130 | 
131 | .rounded-3xl {
132 |   border-radius: 1.5rem;
133 | }
134 | 
135 | .rounded-full {
136 |   border-radius: 9999px;
137 | }
138 | 
139 | .rounded-t-none {
140 |   border-top-left-radius: 0px;
141 |   border-top-right-radius: 0px;
142 | }
143 | 
144 | .rounded-r-none {
145 |   border-top-right-radius: 0px;
146 |   border-bottom-right-radius: 0px;
147 | }
148 | 
149 | .rounded-b-none {
150 |   border-bottom-right-radius: 0px;
151 |   border-bottom-left-radius: 0px;
152 | }
153 | 
154 | .rounded-l-none {
155 |   border-top-left-radius: 0px;
156 |   border-bottom-left-radius: 0px;
157 | }
158 | 
159 | .rounded-t-sm {
160 |   border-top-left-radius: 0.125rem;
161 |   border-top-right-radius: 0.125rem;
162 | }
163 | 
164 | .rounded-r-sm {
165 |   border-top-right-radius: 0.125rem;
166 |   border-bottom-right-radius: 0.125rem;
167 | }
168 | 
169 | .rounded-b-sm {
170 |   border-bottom-right-radius: 0.125rem;
171 |   border-bottom-left-radius: 0.125rem;
172 | }
173 | 
174 | .rounded-l-sm {
175 |   border-top-left-radius: 0.125rem;
176 |   border-bottom-left-radius: 0.125rem;
177 | }
178 | 
179 | .rounded-t {
180 |   border-top-left-radius: 0.25rem;
181 |   border-top-right-radius: 0.25rem;
182 | }
183 | 
184 | .rounded-r {
185 |   border-top-right-radius: 0.25rem;
186 |   border-bottom-right-radius: 0.25rem;
187 | }
188 | 
189 | .rounded-b {
190 |   border-bottom-right-radius: 0.25rem;
191 |   border-bottom-left-radius: 0.25rem;
192 | }
193 | 
194 | .rounded-l {
195 |   border-top-left-radius: 0.25rem;
196 |   border-bottom-left-radius: 0.25rem;
197 | }
198 | 
199 | .rounded-t-md {
200 |   border-top-left-radius: 0.375rem;
201 |   border-top-right-radius: 0.375rem;
202 | }
203 | 
204 | .rounded-r-md {
205 |   border-top-right-radius: 0.375rem;
206 |   border-bottom-right-radius: 0.375rem;
207 | }
208 | 
209 | .rounded-b-md {
210 |   border-bottom-right-radius: 0.375rem;
211 |   border-bottom-left-radius: 0.375rem;
212 | }
213 | 
214 | .rounded-l-md {
215 |   border-top-left-radius: 0.375rem;
216 |   border-bottom-left-radius: 0.375rem;
217 | }
218 | 
219 | .rounded-t-lg {
220 |   border-top-left-radius: 0.5rem;
221 |   border-top-right-radius: 0.5rem;
222 | }
223 | 
224 | .rounded-r-lg {
225 |   border-top-right-radius: 0.5rem;
226 |   border-bottom-right-radius: 0.5rem;
227 | }
228 | 
229 | .rounded-b-lg {
230 |   border-bottom-right-radius: 0.5rem;
231 |   border-bottom-left-radius: 0.5rem;
232 | }
233 | 
234 | .rounded-l-lg {
235 |   border-top-left-radius: 0.5rem;
236 |   border-bottom-left-radius: 0.5rem;
237 | }
238 | 
239 | .rounded-t-xl {
240 |   border-top-left-radius: 0.75rem;
241 |   border-top-right-radius: 0.75rem;
242 | }
243 | 
244 | .rounded-r-xl {
245 |   border-top-right-radius: 0.75rem;
246 |   border-bottom-right-radius: 0.75rem;
247 | }
248 | 
249 | .rounded-b-xl {
250 |   border-bottom-right-radius: 0.75rem;
251 |   border-bottom-left-radius: 0.75rem;
252 | }
253 | 
254 | .rounded-l-xl {
255 |   border-top-left-radius: 0.75rem;
256 |   border-bottom-left-radius: 0.75rem;
257 | }
258 | 
259 | .rounded-t-2xl {
260 |   border-top-left-radius: 1rem;
261 |   border-top-right-radius: 1rem;
262 | }
263 | 
264 | .rounded-r-2xl {
265 |   border-top-right-radius: 1rem;
266 |   border-bottom-right-radius: 1rem;
267 | }
268 | 
269 | .rounded-b-2xl {
270 |   border-bottom-right-radius: 1rem;
271 |   border-bottom-left-radius: 1rem;
272 | }
273 | 
274 | .rounded-l-2xl {
275 |   border-top-left-radius: 1rem;
276 |   border-bottom-left-radius: 1rem;
277 | }
278 | 
279 | .rounded-t-3xl {
280 |   border-top-left-radius: 1.5rem;
281 |   border-top-right-radius: 1.5rem;
282 | }
283 | 
284 | .rounded-r-3xl {
285 |   border-top-right-radius: 1.5rem;
286 |   border-bottom-right-radius: 1.5rem;
287 | }
288 | 
289 | .rounded-b-3xl {
290 |   border-bottom-right-radius: 1.5rem;
291 |   border-bottom-left-radius: 1.5rem;
292 | }
293 | 
294 | .rounded-l-3xl {
295 |   border-top-left-radius: 1.5rem;
296 |   border-bottom-left-radius: 1.5rem;
297 | }
298 | 
299 | .rounded-t-full {
300 |   border-top-left-radius: 9999px;
301 |   border-top-right-radius: 9999px;
302 | }
303 | 
304 | .rounded-r-full {
305 |   border-top-right-radius: 9999px;
306 |   border-bottom-right-radius: 9999px;
307 | }
308 | 
309 | .rounded-b-full {
310 |   border-bottom-right-radius: 9999px;
311 |   border-bottom-left-radius: 9999px;
312 | }
313 | 
314 | .rounded-l-full {
315 |   border-top-left-radius: 9999px;
316 |   border-bottom-left-radius: 9999px;
317 | }
318 | 
319 | .rounded-tl-none {
320 |   border-top-left-radius: 0px;
321 | }
322 | 
323 | .rounded-tr-none {
324 |   border-top-right-radius: 0px;
325 | }
326 | 
327 | .rounded-br-none {
328 |   border-bottom-right-radius: 0px;
329 | }
330 | 
331 | .rounded-bl-none {
332 |   border-bottom-left-radius: 0px;
333 | }
334 | 
335 | .rounded-tl-sm {
336 |   border-top-left-radius: 0.125rem;
337 | }
338 | 
339 | .rounded-tr-sm {
340 |   border-top-right-radius: 0.125rem;
341 | }
342 | 
343 | .rounded-br-sm {
344 |   border-bottom-right-radius: 0.125rem;
345 | }
346 | 
347 | .rounded-bl-sm {
348 |   border-bottom-left-radius: 0.125rem;
349 | }
350 | 
351 | .rounded-tl {
352 |   border-top-left-radius: 0.25rem;
353 | }
354 | 
355 | .rounded-tr {
356 |   border-top-right-radius: 0.25rem;
357 | }
358 | 
359 | .rounded-br {
360 |   border-bottom-right-radius: 0.25rem;
361 | }
362 | 
363 | .rounded-bl {
364 |   border-bottom-left-radius: 0.25rem;
365 | }
366 | 
367 | .rounded-tl-md {
368 |   border-top-left-radius: 0.375rem;
369 | }
370 | 
371 | .rounded-tr-md {
372 |   border-top-right-radius: 0.375rem;
373 | }
374 | 
375 | .rounded-br-md {
376 |   border-bottom-right-radius: 0.375rem;
377 | }
378 | 
379 | .rounded-bl-md {
380 |   border-bottom-left-radius: 0.375rem;
381 | }
382 | 
383 | .rounded-tl-lg {
384 |   border-top-left-radius: 0.5rem;
385 | }
386 | 
387 | .rounded-tr-lg {
388 |   border-top-right-radius: 0.5rem;
389 | }
390 | 
391 | .rounded-br-lg {
392 |   border-bottom-right-radius: 0.5rem;
393 | }
394 | 
395 | .rounded-bl-lg {
396 |   border-bottom-left-radius: 0.5rem;
397 | }
398 | 
399 | .rounded-tl-xl {
400 |   border-top-left-radius: 0.75rem;
401 | }
402 | 
403 | .rounded-tr-xl {
404 |   border-top-right-radius: 0.75rem;
405 | }
406 | 
407 | .rounded-br-xl {
408 |   border-bottom-right-radius: 0.75rem;
409 | }
410 | 
411 | .rounded-bl-xl {
412 |   border-bottom-left-radius: 0.75rem;
413 | }
414 | 
415 | .rounded-tl-2xl {
416 |   border-top-left-radius: 1rem;
417 | }
418 | 
419 | .rounded-tr-2xl {
420 |   border-top-right-radius: 1rem;
421 | }
422 | 
423 | .rounded-br-2xl {
424 |   border-bottom-right-radius: 1rem;
425 | }
426 | 
427 | .rounded-bl-2xl {
428 |   border-bottom-left-radius: 1rem;
429 | }
430 | 
431 | .rounded-tl-3xl {
432 |   border-top-left-radius: 1.5rem;
433 | }
434 | 
435 | .rounded-tr-3xl {
436 |   border-top-right-radius: 1.5rem;
437 | }
438 | 
439 | .rounded-br-3xl {
440 |   border-bottom-right-radius: 1.5rem;
441 | }
442 | 
443 | .rounded-bl-3xl {
444 |   border-bottom-left-radius: 1.5rem;
445 | }
446 | 
447 | .rounded-tl-full {
448 |   border-top-left-radius: 9999px;
449 | }
450 | 
451 | .rounded-tr-full {
452 |   border-top-right-radius: 9999px;
453 | }
454 | 
455 | .rounded-br-full {
456 |   border-bottom-right-radius: 9999px;
457 | }
458 | 
459 | .rounded-bl-full {
460 |   border-bottom-left-radius: 9999px;
461 | }
462 | 
463 | .border-black {
464 |   border-color: black;
465 | }
466 | 


--------------------------------------------------------------------------------
/src/css/shared/modules/button.css:
--------------------------------------------------------------------------------
 1 | .btn {
 2 |   height: 36px;
 3 |   min-width: 64px;
 4 |   padding: 0 16px;
 5 |   border-radius: 4px;
 6 |   outline: 0;
 7 |   border-style: none;
 8 |   cursor: pointer;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/css/shared/modules/flex.css:
--------------------------------------------------------------------------------
  1 | /* Flex Direction */
  2 | .flex-row {
  3 |   flex-direction: row;
  4 | }
  5 | 
  6 | .flex-row-reverse {
  7 |   flex-direction: row-reverse;
  8 | }
  9 | 
 10 | .flex-col {
 11 |   flex-direction: column;
 12 | }
 13 | 
 14 | .flex-col-reverse {
 15 |   flex-direction: column-reverse;
 16 | }
 17 | 
 18 | /* Flex Wrap */
 19 | .flex-wrap {
 20 |   flex-wrap: wrap;
 21 | }
 22 | 
 23 | .flex-wrap-reverse {
 24 |   flex-wrap: wrap-reverse;
 25 | }
 26 | 
 27 | .flex-nowrap {
 28 |   flex-wrap: nowrap;
 29 | }
 30 | 
 31 | /* Flex */
 32 | .flex-1 {
 33 |   flex: 1 1 0%;
 34 | }
 35 | 
 36 | .flex-auto {
 37 |   flex: 1 1 auto;
 38 | }
 39 | 
 40 | .flex-initial {
 41 |   flex: 0 1 auto;
 42 | }
 43 | 
 44 | .flex-none {
 45 |   flex: none;
 46 | }
 47 | 
 48 | /* Flex Grow */
 49 | .flex-grow-0 {
 50 |   flex-grow: 0;
 51 | }
 52 | 
 53 | .flex-grow {
 54 |   flex-grow: 1;
 55 | }
 56 | 
 57 | /* Flex Shrink */
 58 | .flex-shrink-0 {
 59 |   flex-shrink: 0;
 60 | }
 61 | 
 62 | .flex-shrink {
 63 |   flex-shrink: 1;
 64 | }
 65 | 
 66 | /* Order */
 67 | .order-1 {
 68 |   order: 1;
 69 | }
 70 | 
 71 | .order-2 {
 72 |   order: 2;
 73 | }
 74 | 
 75 | .order-3 {
 76 |   order: 3;
 77 | }
 78 | 
 79 | .order-4 {
 80 |   order: 4;
 81 | }
 82 | 
 83 | .order-5 {
 84 |   order: 5;
 85 | }
 86 | 
 87 | .order-6 {
 88 |   order: 6;
 89 | }
 90 | 
 91 | .order-7 {
 92 |   order: 7;
 93 | }
 94 | 
 95 | .order-8 {
 96 |   order: 8;
 97 | }
 98 | 
 99 | .order-9 {
100 |   order: 9;
101 | }
102 | 
103 | .order-10 {
104 |   order: 10;
105 | }
106 | 
107 | .order-11 {
108 |   order: 11;
109 | }
110 | 
111 | .order-12 {
112 |   order: 12;
113 | }
114 | 
115 | .order-first {
116 |   order: -9999;
117 | }
118 | 
119 | .order-last {
120 |   order: 9999;
121 | }
122 | 
123 | .order-none {
124 |   order: 0;
125 | }
126 | 


--------------------------------------------------------------------------------
/src/css/shared/modules/interactivity.css:
--------------------------------------------------------------------------------
 1 | /* Cursor */
 2 | .cursor-auto {
 3 |   cursor: auto;
 4 | }
 5 | 
 6 | .cursor-default {
 7 |   cursor: default;
 8 | }
 9 | 
10 | .cursor-pointer {
11 |   cursor: pointer;
12 | }
13 | 
14 | .cursor-wait {
15 |   cursor: wait;
16 | }
17 | 
18 | .cursor-text {
19 |   cursor: text;
20 | }
21 | 
22 | .cursor-move {
23 |   cursor: move;
24 | }
25 | 
26 | .cursor-help {
27 |   cursor: help;
28 | }
29 | 
30 | .cursor-not-allowed {
31 |   cursor: not-allowed;
32 | }
33 | 


--------------------------------------------------------------------------------
/src/css/shared/modules/layout.css:
--------------------------------------------------------------------------------
  1 | /* Layout - Position */
  2 | .relative {
  3 |   position: relative;
  4 | }
  5 | 
  6 | .absolute {
  7 |   position: absolute;
  8 | }
  9 | 
 10 | .fixed {
 11 |   position: fixed;
 12 | }
 13 | 
 14 | /* Layout - Display */
 15 | .d-flex {
 16 |   display: flex;
 17 | }
 18 | 
 19 | .d-block {
 20 |   display: block;
 21 | }
 22 | 
 23 | .d-inline {
 24 |   display: inline;
 25 | }
 26 | 
 27 | .d-inline-block {
 28 |   display: inline-block;
 29 | }
 30 | 
 31 | /* Layout - Top / Right / Bottom / Left */
 32 | .mt-2 {
 33 |   margin-top: 8px;
 34 | }
 35 | 
 36 | .mt-3 {
 37 |   margin-top: 12px;
 38 | }
 39 | 
 40 | .mt-4 {
 41 |   margin-top: 16px;
 42 | }
 43 | 
 44 | .mt-5 {
 45 |   margin-top: 20px;
 46 | }
 47 | 
 48 | .mr-2 {
 49 |   margin-right: 8px;
 50 | }
 51 | 
 52 | /* Box Alignment - Justify Content*/
 53 | .justify-start {
 54 |   justify-content: flex-start;
 55 | }
 56 | 
 57 | .justify-end {
 58 |   justify-content: flex-end;
 59 | }
 60 | 
 61 | .justify-center {
 62 |   justify-content: center;
 63 | }
 64 | 
 65 | .justify-between {
 66 |   justify-content: space-between;
 67 | }
 68 | 
 69 | .justify-around {
 70 |   justify-content: space-around;
 71 | }
 72 | 
 73 | .justify-evenly {
 74 |   justify-content: space-evenly;
 75 | }
 76 | 
 77 | /* Box Alignment - Align Items*/
 78 | .items-start {
 79 |   align-items: flex-start;
 80 | }
 81 | 
 82 | .items-end {
 83 |   align-items: flex-end;
 84 | }
 85 | 
 86 | .items-center {
 87 |   align-items: center;
 88 | }
 89 | 
 90 | .items-baseline {
 91 |   align-items: baseline;
 92 | }
 93 | 
 94 | .items-stretch {
 95 |   align-items: stretch;
 96 | }
 97 | 
 98 | /* Box Alignment - Align Content*/
 99 | .content-center {
100 |   align-content: center;
101 | }
102 | 
103 | .content-start {
104 |   align-content: flex-start;
105 | }
106 | 
107 | .content-end {
108 |   align-content: flex-end;
109 | }
110 | 
111 | .content-between {
112 |   align-content: space-between;
113 | }
114 | 
115 | .content-around {
116 |   align-content: space-around;
117 | }
118 | 
119 | .content-evenly {
120 |   align-content: space-around;
121 | }
122 | 


--------------------------------------------------------------------------------
/src/css/shared/modules/sizing.css:
--------------------------------------------------------------------------------
1 | /* Sizing - Width */
2 | .w-100 {
3 |   width: 100%;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/css/shared/modules/spacing.css:
--------------------------------------------------------------------------------
   1 | /* Margin */
   2 | .m-0 {
   3 |   margin: 0px;
   4 | }
   5 | 
   6 | .m-1 {
   7 |   margin: 0.25rem;
   8 | }
   9 | 
  10 | .m-2 {
  11 |   margin: 0.5rem;
  12 | }
  13 | 
  14 | .m-3 {
  15 |   margin: 0.75rem;
  16 | }
  17 | 
  18 | .m-4 {
  19 |   margin: 1rem;
  20 | }
  21 | 
  22 | .m-5 {
  23 |   margin: 1.25rem;
  24 | }
  25 | 
  26 | .m-6 {
  27 |   margin: 1.5rem;
  28 | }
  29 | 
  30 | .m-7 {
  31 |   margin: 1.75rem;
  32 | }
  33 | 
  34 | .m-8 {
  35 |   margin: 2rem;
  36 | }
  37 | 
  38 | .m-9 {
  39 |   margin: 2.25rem;
  40 | }
  41 | 
  42 | .m-10 {
  43 |   margin: 2.5rem;
  44 | }
  45 | 
  46 | .m-11 {
  47 |   margin: 2.75rem;
  48 | }
  49 | 
  50 | .m-12 {
  51 |   margin: 3rem;
  52 | }
  53 | 
  54 | .m-14 {
  55 |   margin: 3.5rem;
  56 | }
  57 | 
  58 | .m-16 {
  59 |   margin: 4rem;
  60 | }
  61 | 
  62 | .m-20 {
  63 |   margin: 5rem;
  64 | }
  65 | 
  66 | .m-24 {
  67 |   margin: 6rem;
  68 | }
  69 | 
  70 | .m-28 {
  71 |   margin: 7rem;
  72 | }
  73 | 
  74 | .m-32 {
  75 |   margin: 8rem;
  76 | }
  77 | 
  78 | .m-36 {
  79 |   margin: 9rem;
  80 | }
  81 | 
  82 | .m-40 {
  83 |   margin: 10rem;
  84 | }
  85 | 
  86 | .m-44 {
  87 |   margin: 11rem;
  88 | }
  89 | 
  90 | .m-48 {
  91 |   margin: 12rem;
  92 | }
  93 | 
  94 | .m-52 {
  95 |   margin: 13rem;
  96 | }
  97 | 
  98 | .m-56 {
  99 |   margin: 14rem;
 100 | }
 101 | 
 102 | .m-60 {
 103 |   margin: 15rem;
 104 | }
 105 | 
 106 | .m-64 {
 107 |   margin: 16rem;
 108 | }
 109 | 
 110 | .m-72 {
 111 |   margin: 18rem;
 112 | }
 113 | 
 114 | .m-80 {
 115 |   margin: 20rem;
 116 | }
 117 | 
 118 | .m-96 {
 119 |   margin: 24rem;
 120 | }
 121 | 
 122 | .m-auto {
 123 |   margin: auto;
 124 | }
 125 | 
 126 | .m-px {
 127 |   margin: 1px;
 128 | }
 129 | 
 130 | .-m-0 {
 131 |   margin: 0px;
 132 | }
 133 | 
 134 | .-m-1 {
 135 |   margin: -0.25rem;
 136 | }
 137 | 
 138 | .-m-2 {
 139 |   margin: -0.5rem;
 140 | }
 141 | 
 142 | .-m-3 {
 143 |   margin: -0.75rem;
 144 | }
 145 | 
 146 | .-m-4 {
 147 |   margin: -1rem;
 148 | }
 149 | 
 150 | .-m-5 {
 151 |   margin: -1.25rem;
 152 | }
 153 | 
 154 | .-m-6 {
 155 |   margin: -1.5rem;
 156 | }
 157 | 
 158 | .-m-7 {
 159 |   margin: -1.75rem;
 160 | }
 161 | 
 162 | .-m-8 {
 163 |   margin: -2rem;
 164 | }
 165 | 
 166 | .-m-9 {
 167 |   margin: -2.25rem;
 168 | }
 169 | 
 170 | .-m-10 {
 171 |   margin: -2.5rem;
 172 | }
 173 | 
 174 | .-m-11 {
 175 |   margin: -2.75rem;
 176 | }
 177 | 
 178 | .-m-12 {
 179 |   margin: -3rem;
 180 | }
 181 | 
 182 | .-m-14 {
 183 |   margin: -3.5rem;
 184 | }
 185 | 
 186 | .-m-16 {
 187 |   margin: -4rem;
 188 | }
 189 | 
 190 | .-m-20 {
 191 |   margin: -5rem;
 192 | }
 193 | 
 194 | .-m-24 {
 195 |   margin: -6rem;
 196 | }
 197 | 
 198 | .-m-28 {
 199 |   margin: -7rem;
 200 | }
 201 | 
 202 | .-m-32 {
 203 |   margin: -8rem;
 204 | }
 205 | 
 206 | .-m-36 {
 207 |   margin: -9rem;
 208 | }
 209 | 
 210 | .-m-40 {
 211 |   margin: -10rem;
 212 | }
 213 | 
 214 | .-m-44 {
 215 |   margin: -11rem;
 216 | }
 217 | 
 218 | .-m-48 {
 219 |   margin: -12rem;
 220 | }
 221 | 
 222 | .-m-52 {
 223 |   margin: -13rem;
 224 | }
 225 | 
 226 | .-m-56 {
 227 |   margin: -14rem;
 228 | }
 229 | 
 230 | .-m-60 {
 231 |   margin: -15rem;
 232 | }
 233 | 
 234 | .-m-64 {
 235 |   margin: -16rem;
 236 | }
 237 | 
 238 | .-m-72 {
 239 |   margin: -18rem;
 240 | }
 241 | 
 242 | .-m-80 {
 243 |   margin: -20rem;
 244 | }
 245 | 
 246 | .-m-96 {
 247 |   margin: -24rem;
 248 | }
 249 | 
 250 | .-m-px {
 251 |   margin: -1px;
 252 | }
 253 | 
 254 | .my-0 {
 255 |   margin-top: 0px;
 256 |   margin-bottom: 0px;
 257 | }
 258 | 
 259 | .my-1 {
 260 |   margin-top: 0.25rem;
 261 |   margin-bottom: 0.25rem;
 262 | }
 263 | 
 264 | .my-2 {
 265 |   margin-top: 0.5rem;
 266 |   margin-bottom: 0.5rem;
 267 | }
 268 | 
 269 | .my-3 {
 270 |   margin-top: 0.75rem;
 271 |   margin-bottom: 0.75rem;
 272 | }
 273 | 
 274 | .my-4 {
 275 |   margin-top: 1rem;
 276 |   margin-bottom: 1rem;
 277 | }
 278 | 
 279 | .my-5 {
 280 |   margin-top: 1.25rem;
 281 |   margin-bottom: 1.25rem;
 282 | }
 283 | 
 284 | .my-6 {
 285 |   margin-top: 1.5rem;
 286 |   margin-bottom: 1.5rem;
 287 | }
 288 | 
 289 | .my-7 {
 290 |   margin-top: 1.75rem;
 291 |   margin-bottom: 1.75rem;
 292 | }
 293 | 
 294 | .my-8 {
 295 |   margin-top: 2rem;
 296 |   margin-bottom: 2rem;
 297 | }
 298 | 
 299 | .my-9 {
 300 |   margin-top: 2.25rem;
 301 |   margin-bottom: 2.25rem;
 302 | }
 303 | 
 304 | .my-10 {
 305 |   margin-top: 2.5rem;
 306 |   margin-bottom: 2.5rem;
 307 | }
 308 | 
 309 | .my-11 {
 310 |   margin-top: 2.75rem;
 311 |   margin-bottom: 2.75rem;
 312 | }
 313 | 
 314 | .my-12 {
 315 |   margin-top: 3rem;
 316 |   margin-bottom: 3rem;
 317 | }
 318 | 
 319 | .my-14 {
 320 |   margin-top: 3.5rem;
 321 |   margin-bottom: 3.5rem;
 322 | }
 323 | 
 324 | .my-16 {
 325 |   margin-top: 4rem;
 326 |   margin-bottom: 4rem;
 327 | }
 328 | 
 329 | .my-20 {
 330 |   margin-top: 5rem;
 331 |   margin-bottom: 5rem;
 332 | }
 333 | 
 334 | .my-24 {
 335 |   margin-top: 6rem;
 336 |   margin-bottom: 6rem;
 337 | }
 338 | 
 339 | .my-28 {
 340 |   margin-top: 7rem;
 341 |   margin-bottom: 7rem;
 342 | }
 343 | 
 344 | .my-32 {
 345 |   margin-top: 8rem;
 346 |   margin-bottom: 8rem;
 347 | }
 348 | 
 349 | .my-36 {
 350 |   margin-top: 9rem;
 351 |   margin-bottom: 9rem;
 352 | }
 353 | 
 354 | .my-40 {
 355 |   margin-top: 10rem;
 356 |   margin-bottom: 10rem;
 357 | }
 358 | 
 359 | .my-44 {
 360 |   margin-top: 11rem;
 361 |   margin-bottom: 11rem;
 362 | }
 363 | 
 364 | .my-48 {
 365 |   margin-top: 12rem;
 366 |   margin-bottom: 12rem;
 367 | }
 368 | 
 369 | .my-52 {
 370 |   margin-top: 13rem;
 371 |   margin-bottom: 13rem;
 372 | }
 373 | 
 374 | .my-56 {
 375 |   margin-top: 14rem;
 376 |   margin-bottom: 14rem;
 377 | }
 378 | 
 379 | .my-60 {
 380 |   margin-top: 15rem;
 381 |   margin-bottom: 15rem;
 382 | }
 383 | 
 384 | .my-64 {
 385 |   margin-top: 16rem;
 386 |   margin-bottom: 16rem;
 387 | }
 388 | 
 389 | .my-72 {
 390 |   margin-top: 18rem;
 391 |   margin-bottom: 18rem;
 392 | }
 393 | 
 394 | .my-80 {
 395 |   margin-top: 20rem;
 396 |   margin-bottom: 20rem;
 397 | }
 398 | 
 399 | .my-96 {
 400 |   margin-top: 24rem;
 401 |   margin-bottom: 24rem;
 402 | }
 403 | 
 404 | .my-auto {
 405 |   margin-top: auto;
 406 |   margin-bottom: auto;
 407 | }
 408 | 
 409 | .my-px {
 410 |   margin-top: 1px;
 411 |   margin-bottom: 1px;
 412 | }
 413 | 
 414 | .mx-0 {
 415 |   margin-left: 0px;
 416 |   margin-right: 0px;
 417 | }
 418 | 
 419 | .mx-1 {
 420 |   margin-left: 0.25rem;
 421 |   margin-right: 0.25rem;
 422 | }
 423 | 
 424 | .mx-2 {
 425 |   margin-left: 0.5rem;
 426 |   margin-right: 0.5rem;
 427 | }
 428 | 
 429 | .mx-3 {
 430 |   margin-left: 0.75rem;
 431 |   margin-right: 0.75rem;
 432 | }
 433 | 
 434 | .mx-4 {
 435 |   margin-left: 1rem;
 436 |   margin-right: 1rem;
 437 | }
 438 | 
 439 | .mx-5 {
 440 |   margin-left: 1.25rem;
 441 |   margin-right: 1.25rem;
 442 | }
 443 | 
 444 | .mx-6 {
 445 |   margin-left: 1.5rem;
 446 |   margin-right: 1.5rem;
 447 | }
 448 | 
 449 | .mx-7 {
 450 |   margin-left: 1.75rem;
 451 |   margin-right: 1.75rem;
 452 | }
 453 | 
 454 | .mx-8 {
 455 |   margin-left: 2rem;
 456 |   margin-right: 2rem;
 457 | }
 458 | 
 459 | .mx-9 {
 460 |   margin-left: 2.25rem;
 461 |   margin-right: 2.25rem;
 462 | }
 463 | 
 464 | .mx-10 {
 465 |   margin-left: 2.5rem;
 466 |   margin-right: 2.5rem;
 467 | }
 468 | 
 469 | .mx-11 {
 470 |   margin-left: 2.75rem;
 471 |   margin-right: 2.75rem;
 472 | }
 473 | 
 474 | .mx-12 {
 475 |   margin-left: 3rem;
 476 |   margin-right: 3rem;
 477 | }
 478 | 
 479 | .mx-14 {
 480 |   margin-left: 3.5rem;
 481 |   margin-right: 3.5rem;
 482 | }
 483 | 
 484 | .mx-16 {
 485 |   margin-left: 4rem;
 486 |   margin-right: 4rem;
 487 | }
 488 | 
 489 | .mx-20 {
 490 |   margin-left: 5rem;
 491 |   margin-right: 5rem;
 492 | }
 493 | 
 494 | .mx-24 {
 495 |   margin-left: 6rem;
 496 |   margin-right: 6rem;
 497 | }
 498 | 
 499 | .mx-28 {
 500 |   margin-left: 7rem;
 501 |   margin-right: 7rem;
 502 | }
 503 | 
 504 | .mx-32 {
 505 |   margin-left: 8rem;
 506 |   margin-right: 8rem;
 507 | }
 508 | 
 509 | .mx-36 {
 510 |   margin-left: 9rem;
 511 |   margin-right: 9rem;
 512 | }
 513 | 
 514 | .mx-40 {
 515 |   margin-left: 10rem;
 516 |   margin-right: 10rem;
 517 | }
 518 | 
 519 | .mx-44 {
 520 |   margin-left: 11rem;
 521 |   margin-right: 11rem;
 522 | }
 523 | 
 524 | .mx-48 {
 525 |   margin-left: 12rem;
 526 |   margin-right: 12rem;
 527 | }
 528 | 
 529 | .mx-52 {
 530 |   margin-left: 13rem;
 531 |   margin-right: 13rem;
 532 | }
 533 | 
 534 | .mx-56 {
 535 |   margin-left: 14rem;
 536 |   margin-right: 14rem;
 537 | }
 538 | 
 539 | .mx-60 {
 540 |   margin-left: 15rem;
 541 |   margin-right: 15rem;
 542 | }
 543 | 
 544 | .mx-64 {
 545 |   margin-left: 16rem;
 546 |   margin-right: 16rem;
 547 | }
 548 | 
 549 | .mx-72 {
 550 |   margin-left: 18rem;
 551 |   margin-right: 18rem;
 552 | }
 553 | 
 554 | .mx-80 {
 555 |   margin-left: 20rem;
 556 |   margin-right: 20rem;
 557 | }
 558 | 
 559 | .mx-96 {
 560 |   margin-left: 24rem;
 561 |   margin-right: 24rem;
 562 | }
 563 | 
 564 | .mx-auto {
 565 |   margin-left: auto;
 566 |   margin-right: auto;
 567 | }
 568 | 
 569 | .mx-px {
 570 |   margin-left: 1px;
 571 |   margin-right: 1px;
 572 | }
 573 | 
 574 | .-my-0 {
 575 |   margin-top: 0px;
 576 |   margin-bottom: 0px;
 577 | }
 578 | 
 579 | .-my-1 {
 580 |   margin-top: -0.25rem;
 581 |   margin-bottom: -0.25rem;
 582 | }
 583 | 
 584 | .-my-2 {
 585 |   margin-top: -0.5rem;
 586 |   margin-bottom: -0.5rem;
 587 | }
 588 | 
 589 | .-my-3 {
 590 |   margin-top: -0.75rem;
 591 |   margin-bottom: -0.75rem;
 592 | }
 593 | 
 594 | .-my-4 {
 595 |   margin-top: -1rem;
 596 |   margin-bottom: -1rem;
 597 | }
 598 | 
 599 | .-my-5 {
 600 |   margin-top: -1.25rem;
 601 |   margin-bottom: -1.25rem;
 602 | }
 603 | 
 604 | .-my-6 {
 605 |   margin-top: -1.5rem;
 606 |   margin-bottom: -1.5rem;
 607 | }
 608 | 
 609 | .-my-7 {
 610 |   margin-top: -1.75rem;
 611 |   margin-bottom: -1.75rem;
 612 | }
 613 | 
 614 | .-my-8 {
 615 |   margin-top: -2rem;
 616 |   margin-bottom: -2rem;
 617 | }
 618 | 
 619 | .-my-9 {
 620 |   margin-top: -2.25rem;
 621 |   margin-bottom: -2.25rem;
 622 | }
 623 | 
 624 | .-my-10 {
 625 |   margin-top: -2.5rem;
 626 |   margin-bottom: -2.5rem;
 627 | }
 628 | 
 629 | .-my-11 {
 630 |   margin-top: -2.75rem;
 631 |   margin-bottom: -2.75rem;
 632 | }
 633 | 
 634 | .-my-12 {
 635 |   margin-top: -3rem;
 636 |   margin-bottom: -3rem;
 637 | }
 638 | 
 639 | .-my-14 {
 640 |   margin-top: -3.5rem;
 641 |   margin-bottom: -3.5rem;
 642 | }
 643 | 
 644 | .-my-16 {
 645 |   margin-top: -4rem;
 646 |   margin-bottom: -4rem;
 647 | }
 648 | 
 649 | .-my-20 {
 650 |   margin-top: -5rem;
 651 |   margin-bottom: -5rem;
 652 | }
 653 | 
 654 | .-my-24 {
 655 |   margin-top: -6rem;
 656 |   margin-bottom: -6rem;
 657 | }
 658 | 
 659 | .-my-28 {
 660 |   margin-top: -7rem;
 661 |   margin-bottom: -7rem;
 662 | }
 663 | 
 664 | .-my-32 {
 665 |   margin-top: -8rem;
 666 |   margin-bottom: -8rem;
 667 | }
 668 | 
 669 | .-my-36 {
 670 |   margin-top: -9rem;
 671 |   margin-bottom: -9rem;
 672 | }
 673 | 
 674 | .-my-40 {
 675 |   margin-top: -10rem;
 676 |   margin-bottom: -10rem;
 677 | }
 678 | 
 679 | .-my-44 {
 680 |   margin-top: -11rem;
 681 |   margin-bottom: -11rem;
 682 | }
 683 | 
 684 | .-my-48 {
 685 |   margin-top: -12rem;
 686 |   margin-bottom: -12rem;
 687 | }
 688 | 
 689 | .-my-52 {
 690 |   margin-top: -13rem;
 691 |   margin-bottom: -13rem;
 692 | }
 693 | 
 694 | .-my-56 {
 695 |   margin-top: -14rem;
 696 |   margin-bottom: -14rem;
 697 | }
 698 | 
 699 | .-my-60 {
 700 |   margin-top: -15rem;
 701 |   margin-bottom: -15rem;
 702 | }
 703 | 
 704 | .-my-64 {
 705 |   margin-top: -16rem;
 706 |   margin-bottom: -16rem;
 707 | }
 708 | 
 709 | .-my-72 {
 710 |   margin-top: -18rem;
 711 |   margin-bottom: -18rem;
 712 | }
 713 | 
 714 | .-my-80 {
 715 |   margin-top: -20rem;
 716 |   margin-bottom: -20rem;
 717 | }
 718 | 
 719 | .-my-96 {
 720 |   margin-top: -24rem;
 721 |   margin-bottom: -24rem;
 722 | }
 723 | 
 724 | .-my-px {
 725 |   margin-top: -1px;
 726 |   margin-bottom: -1px;
 727 | }
 728 | 
 729 | .-mx-0 {
 730 |   margin-left: 0px;
 731 |   margin-right: 0px;
 732 | }
 733 | 
 734 | .-mx-1 {
 735 |   margin-left: -0.25rem;
 736 |   margin-right: -0.25rem;
 737 | }
 738 | 
 739 | .-mx-2 {
 740 |   margin-left: -0.5rem;
 741 |   margin-right: -0.5rem;
 742 | }
 743 | 
 744 | .-mx-3 {
 745 |   margin-left: -0.75rem;
 746 |   margin-right: -0.75rem;
 747 | }
 748 | 
 749 | .-mx-4 {
 750 |   margin-left: -1rem;
 751 |   margin-right: -1rem;
 752 | }
 753 | 
 754 | .-mx-5 {
 755 |   margin-left: -1.25rem;
 756 |   margin-right: -1.25rem;
 757 | }
 758 | 
 759 | .-mx-6 {
 760 |   margin-left: -1.5rem;
 761 |   margin-right: -1.5rem;
 762 | }
 763 | 
 764 | .-mx-7 {
 765 |   margin-left: -1.75rem;
 766 |   margin-right: -1.75rem;
 767 | }
 768 | 
 769 | .-mx-8 {
 770 |   margin-left: -2rem;
 771 |   margin-right: -2rem;
 772 | }
 773 | 
 774 | .-mx-9 {
 775 |   margin-left: -2.25rem;
 776 |   margin-right: -2.25rem;
 777 | }
 778 | 
 779 | .-mx-10 {
 780 |   margin-left: -2.5rem;
 781 |   margin-right: -2.5rem;
 782 | }
 783 | 
 784 | .-mx-11 {
 785 |   margin-left: -2.75rem;
 786 |   margin-right: -2.75rem;
 787 | }
 788 | 
 789 | .-mx-12 {
 790 |   margin-left: -3rem;
 791 |   margin-right: -3rem;
 792 | }
 793 | 
 794 | .-mx-14 {
 795 |   margin-left: -3.5rem;
 796 |   margin-right: -3.5rem;
 797 | }
 798 | 
 799 | .-mx-16 {
 800 |   margin-left: -4rem;
 801 |   margin-right: -4rem;
 802 | }
 803 | 
 804 | .-mx-20 {
 805 |   margin-left: -5rem;
 806 |   margin-right: -5rem;
 807 | }
 808 | 
 809 | .-mx-24 {
 810 |   margin-left: -6rem;
 811 |   margin-right: -6rem;
 812 | }
 813 | 
 814 | .-mx-28 {
 815 |   margin-left: -7rem;
 816 |   margin-right: -7rem;
 817 | }
 818 | 
 819 | .-mx-32 {
 820 |   margin-left: -8rem;
 821 |   margin-right: -8rem;
 822 | }
 823 | 
 824 | .-mx-36 {
 825 |   margin-left: -9rem;
 826 |   margin-right: -9rem;
 827 | }
 828 | 
 829 | .-mx-40 {
 830 |   margin-left: -10rem;
 831 |   margin-right: -10rem;
 832 | }
 833 | 
 834 | .-mx-44 {
 835 |   margin-left: -11rem;
 836 |   margin-right: -11rem;
 837 | }
 838 | 
 839 | .-mx-48 {
 840 |   margin-left: -12rem;
 841 |   margin-right: -12rem;
 842 | }
 843 | 
 844 | .-mx-52 {
 845 |   margin-left: -13rem;
 846 |   margin-right: -13rem;
 847 | }
 848 | 
 849 | .-mx-56 {
 850 |   margin-left: -14rem;
 851 |   margin-right: -14rem;
 852 | }
 853 | 
 854 | .-mx-60 {
 855 |   margin-left: -15rem;
 856 |   margin-right: -15rem;
 857 | }
 858 | 
 859 | .-mx-64 {
 860 |   margin-left: -16rem;
 861 |   margin-right: -16rem;
 862 | }
 863 | 
 864 | .-mx-72 {
 865 |   margin-left: -18rem;
 866 |   margin-right: -18rem;
 867 | }
 868 | 
 869 | .-mx-80 {
 870 |   margin-left: -20rem;
 871 |   margin-right: -20rem;
 872 | }
 873 | 
 874 | .-mx-96 {
 875 |   margin-left: -24rem;
 876 |   margin-right: -24rem;
 877 | }
 878 | 
 879 | .-mx-px {
 880 |   margin-left: -1px;
 881 |   margin-right: -1px;
 882 | }
 883 | 
 884 | .mt-0 {
 885 |   margin-top: 0px;
 886 | }
 887 | 
 888 | .mt-1 {
 889 |   margin-top: 0.25rem;
 890 | }
 891 | 
 892 | .mt-2 {
 893 |   margin-top: 0.5rem;
 894 | }
 895 | 
 896 | .mt-3 {
 897 |   margin-top: 0.75rem;
 898 | }
 899 | 
 900 | .mt-4 {
 901 |   margin-top: 1rem;
 902 | }
 903 | 
 904 | .mt-5 {
 905 |   margin-top: 1.25rem;
 906 | }
 907 | 
 908 | .mt-6 {
 909 |   margin-top: 1.5rem;
 910 | }
 911 | 
 912 | .mt-7 {
 913 |   margin-top: 1.75rem;
 914 | }
 915 | 
 916 | .mt-8 {
 917 |   margin-top: 2rem;
 918 | }
 919 | 
 920 | .mt-9 {
 921 |   margin-top: 2.25rem;
 922 | }
 923 | 
 924 | .mt-10 {
 925 |   margin-top: 2.5rem;
 926 | }
 927 | 
 928 | .mt-11 {
 929 |   margin-top: 2.75rem;
 930 | }
 931 | 
 932 | .mt-12 {
 933 |   margin-top: 3rem;
 934 | }
 935 | 
 936 | .mt-14 {
 937 |   margin-top: 3.5rem;
 938 | }
 939 | 
 940 | .mt-16 {
 941 |   margin-top: 4rem;
 942 | }
 943 | 
 944 | .mt-20 {
 945 |   margin-top: 5rem;
 946 | }
 947 | 
 948 | .mt-24 {
 949 |   margin-top: 6rem;
 950 | }
 951 | 
 952 | .mt-28 {
 953 |   margin-top: 7rem;
 954 | }
 955 | 
 956 | .mt-32 {
 957 |   margin-top: 8rem;
 958 | }
 959 | 
 960 | .mt-36 {
 961 |   margin-top: 9rem;
 962 | }
 963 | 
 964 | .mt-40 {
 965 |   margin-top: 10rem;
 966 | }
 967 | 
 968 | .mt-44 {
 969 |   margin-top: 11rem;
 970 | }
 971 | 
 972 | .mt-48 {
 973 |   margin-top: 12rem;
 974 | }
 975 | 
 976 | .mt-52 {
 977 |   margin-top: 13rem;
 978 | }
 979 | 
 980 | .mt-56 {
 981 |   margin-top: 14rem;
 982 | }
 983 | 
 984 | .mt-60 {
 985 |   margin-top: 15rem;
 986 | }
 987 | 
 988 | .mt-64 {
 989 |   margin-top: 16rem;
 990 | }
 991 | 
 992 | .mt-72 {
 993 |   margin-top: 18rem;
 994 | }
 995 | 
 996 | .mt-80 {
 997 |   margin-top: 20rem;
 998 | }
 999 | 
1000 | .mt-96 {
1001 |   margin-top: 24rem;
1002 | }
1003 | 
1004 | .mt-auto {
1005 |   margin-top: auto;
1006 | }
1007 | 
1008 | .mt-px {
1009 |   margin-top: 1px;
1010 | }
1011 | 
1012 | .mr-0 {
1013 |   margin-right: 0px;
1014 | }
1015 | 
1016 | .mr-1 {
1017 |   margin-right: 0.25rem;
1018 | }
1019 | 
1020 | .mr-2 {
1021 |   margin-right: 0.5rem;
1022 | }
1023 | 
1024 | .mr-3 {
1025 |   margin-right: 0.75rem;
1026 | }
1027 | 
1028 | .mr-4 {
1029 |   margin-right: 1rem;
1030 | }
1031 | 
1032 | .mr-5 {
1033 |   margin-right: 1.25rem;
1034 | }
1035 | 
1036 | .mr-6 {
1037 |   margin-right: 1.5rem;
1038 | }
1039 | 
1040 | .mr-7 {
1041 |   margin-right: 1.75rem;
1042 | }
1043 | 
1044 | .mr-8 {
1045 |   margin-right: 2rem;
1046 | }
1047 | 
1048 | .mr-9 {
1049 |   margin-right: 2.25rem;
1050 | }
1051 | 
1052 | .mr-10 {
1053 |   margin-right: 2.5rem;
1054 | }
1055 | 
1056 | .mr-11 {
1057 |   margin-right: 2.75rem;
1058 | }
1059 | 
1060 | .mr-12 {
1061 |   margin-right: 3rem;
1062 | }
1063 | 
1064 | .mr-14 {
1065 |   margin-right: 3.5rem;
1066 | }
1067 | 
1068 | .mr-16 {
1069 |   margin-right: 4rem;
1070 | }
1071 | 
1072 | .mr-20 {
1073 |   margin-right: 5rem;
1074 | }
1075 | 
1076 | .mr-24 {
1077 |   margin-right: 6rem;
1078 | }
1079 | 
1080 | .mr-28 {
1081 |   margin-right: 7rem;
1082 | }
1083 | 
1084 | .mr-32 {
1085 |   margin-right: 8rem;
1086 | }
1087 | 
1088 | .mr-36 {
1089 |   margin-right: 9rem;
1090 | }
1091 | 
1092 | .mr-40 {
1093 |   margin-right: 10rem;
1094 | }
1095 | 
1096 | .mr-44 {
1097 |   margin-right: 11rem;
1098 | }
1099 | 
1100 | .mr-48 {
1101 |   margin-right: 12rem;
1102 | }
1103 | 
1104 | .mr-52 {
1105 |   margin-right: 13rem;
1106 | }
1107 | 
1108 | .mr-56 {
1109 |   margin-right: 14rem;
1110 | }
1111 | 
1112 | .mr-60 {
1113 |   margin-right: 15rem;
1114 | }
1115 | 
1116 | .mr-64 {
1117 |   margin-right: 16rem;
1118 | }
1119 | 
1120 | .mr-72 {
1121 |   margin-right: 18rem;
1122 | }
1123 | 
1124 | .mr-80 {
1125 |   margin-right: 20rem;
1126 | }
1127 | 
1128 | .mr-96 {
1129 |   margin-right: 24rem;
1130 | }
1131 | 
1132 | .mr-auto {
1133 |   margin-right: auto;
1134 | }
1135 | 
1136 | .mr-px {
1137 |   margin-right: 1px;
1138 | }
1139 | 
1140 | .mb-0 {
1141 |   margin-bottom: 0px;
1142 | }
1143 | 
1144 | .mb-1 {
1145 |   margin-bottom: 0.25rem;
1146 | }
1147 | 
1148 | .mb-2 {
1149 |   margin-bottom: 0.5rem;
1150 | }
1151 | 
1152 | .mb-3 {
1153 |   margin-bottom: 0.75rem;
1154 | }
1155 | 
1156 | .mb-4 {
1157 |   margin-bottom: 1rem;
1158 | }
1159 | 
1160 | .mb-5 {
1161 |   margin-bottom: 1.25rem;
1162 | }
1163 | 
1164 | .mb-6 {
1165 |   margin-bottom: 1.5rem;
1166 | }
1167 | 
1168 | .mb-7 {
1169 |   margin-bottom: 1.75rem;
1170 | }
1171 | 
1172 | .mb-8 {
1173 |   margin-bottom: 2rem;
1174 | }
1175 | 
1176 | .mb-9 {
1177 |   margin-bottom: 2.25rem;
1178 | }
1179 | 
1180 | .mb-10 {
1181 |   margin-bottom: 2.5rem;
1182 | }
1183 | 
1184 | .mb-11 {
1185 |   margin-bottom: 2.75rem;
1186 | }
1187 | 
1188 | .mb-12 {
1189 |   margin-bottom: 3rem;
1190 | }
1191 | 
1192 | .mb-14 {
1193 |   margin-bottom: 3.5rem;
1194 | }
1195 | 
1196 | .mb-16 {
1197 |   margin-bottom: 4rem;
1198 | }
1199 | 
1200 | .mb-20 {
1201 |   margin-bottom: 5rem;
1202 | }
1203 | 
1204 | .mb-24 {
1205 |   margin-bottom: 6rem;
1206 | }
1207 | 
1208 | .mb-28 {
1209 |   margin-bottom: 7rem;
1210 | }
1211 | 
1212 | .mb-32 {
1213 |   margin-bottom: 8rem;
1214 | }
1215 | 
1216 | .mb-36 {
1217 |   margin-bottom: 9rem;
1218 | }
1219 | 
1220 | .mb-40 {
1221 |   margin-bottom: 10rem;
1222 | }
1223 | 
1224 | .mb-44 {
1225 |   margin-bottom: 11rem;
1226 | }
1227 | 
1228 | .mb-48 {
1229 |   margin-bottom: 12rem;
1230 | }
1231 | 
1232 | .mb-52 {
1233 |   margin-bottom: 13rem;
1234 | }
1235 | 
1236 | .mb-56 {
1237 |   margin-bottom: 14rem;
1238 | }
1239 | 
1240 | .mb-60 {
1241 |   margin-bottom: 15rem;
1242 | }
1243 | 
1244 | .mb-64 {
1245 |   margin-bottom: 16rem;
1246 | }
1247 | 
1248 | .mb-72 {
1249 |   margin-bottom: 18rem;
1250 | }
1251 | 
1252 | .mb-80 {
1253 |   margin-bottom: 20rem;
1254 | }
1255 | 
1256 | .mb-96 {
1257 |   margin-bottom: 24rem;
1258 | }
1259 | 
1260 | .mb-auto {
1261 |   margin-bottom: auto;
1262 | }
1263 | 
1264 | .mb-px {
1265 |   margin-bottom: 1px;
1266 | }
1267 | 
1268 | .ml-0 {
1269 |   margin-left: 0px;
1270 | }
1271 | 
1272 | .ml-1 {
1273 |   margin-left: 0.25rem;
1274 | }
1275 | 
1276 | .ml-2 {
1277 |   margin-left: 0.5rem;
1278 | }
1279 | 
1280 | .ml-3 {
1281 |   margin-left: 0.75rem;
1282 | }
1283 | 
1284 | .ml-4 {
1285 |   margin-left: 1rem;
1286 | }
1287 | 
1288 | .ml-5 {
1289 |   margin-left: 1.25rem;
1290 | }
1291 | 
1292 | .ml-6 {
1293 |   margin-left: 1.5rem;
1294 | }
1295 | 
1296 | .ml-7 {
1297 |   margin-left: 1.75rem;
1298 | }
1299 | 
1300 | .ml-8 {
1301 |   margin-left: 2rem;
1302 | }
1303 | 
1304 | .ml-9 {
1305 |   margin-left: 2.25rem;
1306 | }
1307 | 
1308 | .ml-10 {
1309 |   margin-left: 2.5rem;
1310 | }
1311 | 
1312 | .ml-11 {
1313 |   margin-left: 2.75rem;
1314 | }
1315 | 
1316 | .ml-12 {
1317 |   margin-left: 3rem;
1318 | }
1319 | 
1320 | .ml-14 {
1321 |   margin-left: 3.5rem;
1322 | }
1323 | 
1324 | .ml-16 {
1325 |   margin-left: 4rem;
1326 | }
1327 | 
1328 | .ml-20 {
1329 |   margin-left: 5rem;
1330 | }
1331 | 
1332 | .ml-24 {
1333 |   margin-left: 6rem;
1334 | }
1335 | 
1336 | .ml-28 {
1337 |   margin-left: 7rem;
1338 | }
1339 | 
1340 | .ml-32 {
1341 |   margin-left: 8rem;
1342 | }
1343 | 
1344 | .ml-36 {
1345 |   margin-left: 9rem;
1346 | }
1347 | 
1348 | .ml-40 {
1349 |   margin-left: 10rem;
1350 | }
1351 | 
1352 | .ml-44 {
1353 |   margin-left: 11rem;
1354 | }
1355 | 
1356 | .ml-48 {
1357 |   margin-left: 12rem;
1358 | }
1359 | 
1360 | .ml-52 {
1361 |   margin-left: 13rem;
1362 | }
1363 | 
1364 | .ml-56 {
1365 |   margin-left: 14rem;
1366 | }
1367 | 
1368 | .ml-60 {
1369 |   margin-left: 15rem;
1370 | }
1371 | 
1372 | .ml-64 {
1373 |   margin-left: 16rem;
1374 | }
1375 | 
1376 | .ml-72 {
1377 |   margin-left: 18rem;
1378 | }
1379 | 
1380 | .ml-80 {
1381 |   margin-left: 20rem;
1382 | }
1383 | 
1384 | .ml-96 {
1385 |   margin-left: 24rem;
1386 | }
1387 | 
1388 | .ml-auto {
1389 |   margin-left: auto;
1390 | }
1391 | 
1392 | .ml-px {
1393 |   margin-left: 1px;
1394 | }
1395 | 
1396 | .-mt-0 {
1397 |   margin-top: 0px;
1398 | }
1399 | 
1400 | .-mt-1 {
1401 |   margin-top: -0.25rem;
1402 | }
1403 | 
1404 | .-mt-2 {
1405 |   margin-top: -0.5rem;
1406 | }
1407 | 
1408 | .-mt-3 {
1409 |   margin-top: -0.75rem;
1410 | }
1411 | 
1412 | .-mt-4 {
1413 |   margin-top: -1rem;
1414 | }
1415 | 
1416 | .-mt-5 {
1417 |   margin-top: -1.25rem;
1418 | }
1419 | 
1420 | .-mt-6 {
1421 |   margin-top: -1.5rem;
1422 | }
1423 | 
1424 | .-mt-7 {
1425 |   margin-top: -1.75rem;
1426 | }
1427 | 
1428 | .-mt-8 {
1429 |   margin-top: -2rem;
1430 | }
1431 | 
1432 | .-mt-9 {
1433 |   margin-top: -2.25rem;
1434 | }
1435 | 
1436 | .-mt-10 {
1437 |   margin-top: -2.5rem;
1438 | }
1439 | 
1440 | .-mt-11 {
1441 |   margin-top: -2.75rem;
1442 | }
1443 | 
1444 | .-mt-12 {
1445 |   margin-top: -3rem;
1446 | }
1447 | 
1448 | .-mt-14 {
1449 |   margin-top: -3.5rem;
1450 | }
1451 | 
1452 | .-mt-16 {
1453 |   margin-top: -4rem;
1454 | }
1455 | 
1456 | .-mt-20 {
1457 |   margin-top: -5rem;
1458 | }
1459 | 
1460 | .-mt-24 {
1461 |   margin-top: -6rem;
1462 | }
1463 | 
1464 | .-mt-28 {
1465 |   margin-top: -7rem;
1466 | }
1467 | 
1468 | .-mt-32 {
1469 |   margin-top: -8rem;
1470 | }
1471 | 
1472 | .-mt-36 {
1473 |   margin-top: -9rem;
1474 | }
1475 | 
1476 | .-mt-40 {
1477 |   margin-top: -10rem;
1478 | }
1479 | 
1480 | .-mt-44 {
1481 |   margin-top: -11rem;
1482 | }
1483 | 
1484 | .-mt-48 {
1485 |   margin-top: -12rem;
1486 | }
1487 | 
1488 | .-mt-52 {
1489 |   margin-top: -13rem;
1490 | }
1491 | 
1492 | .-mt-56 {
1493 |   margin-top: -14rem;
1494 | }
1495 | 
1496 | .-mt-60 {
1497 |   margin-top: -15rem;
1498 | }
1499 | 
1500 | .-mt-64 {
1501 |   margin-top: -16rem;
1502 | }
1503 | 
1504 | .-mt-72 {
1505 |   margin-top: -18rem;
1506 | }
1507 | 
1508 | .-mt-80 {
1509 |   margin-top: -20rem;
1510 | }
1511 | 
1512 | .-mt-96 {
1513 |   margin-top: -24rem;
1514 | }
1515 | 
1516 | .-mt-px {
1517 |   margin-top: -1px;
1518 | }
1519 | 
1520 | .-mr-0 {
1521 |   margin-right: 0px;
1522 | }
1523 | 
1524 | .-mr-1 {
1525 |   margin-right: -0.25rem;
1526 | }
1527 | 
1528 | .-mr-2 {
1529 |   margin-right: -0.5rem;
1530 | }
1531 | 
1532 | .-mr-3 {
1533 |   margin-right: -0.75rem;
1534 | }
1535 | 
1536 | .-mr-4 {
1537 |   margin-right: -1rem;
1538 | }
1539 | 
1540 | .-mr-5 {
1541 |   margin-right: -1.25rem;
1542 | }
1543 | 
1544 | .-mr-6 {
1545 |   margin-right: -1.5rem;
1546 | }
1547 | 
1548 | .-mr-7 {
1549 |   margin-right: -1.75rem;
1550 | }
1551 | 
1552 | .-mr-8 {
1553 |   margin-right: -2rem;
1554 | }
1555 | 
1556 | .-mr-9 {
1557 |   margin-right: -2.25rem;
1558 | }
1559 | 
1560 | .-mr-10 {
1561 |   margin-right: -2.5rem;
1562 | }
1563 | 
1564 | .-mr-11 {
1565 |   margin-right: -2.75rem;
1566 | }
1567 | 
1568 | .-mr-12 {
1569 |   margin-right: -3rem;
1570 | }
1571 | 
1572 | .-mr-14 {
1573 |   margin-right: -3.5rem;
1574 | }
1575 | 
1576 | .-mr-16 {
1577 |   margin-right: -4rem;
1578 | }
1579 | 
1580 | .-mr-20 {
1581 |   margin-right: -5rem;
1582 | }
1583 | 
1584 | .-mr-24 {
1585 |   margin-right: -6rem;
1586 | }
1587 | 
1588 | .-mr-28 {
1589 |   margin-right: -7rem;
1590 | }
1591 | 
1592 | .-mr-32 {
1593 |   margin-right: -8rem;
1594 | }
1595 | 
1596 | .-mr-36 {
1597 |   margin-right: -9rem;
1598 | }
1599 | 
1600 | .-mr-40 {
1601 |   margin-right: -10rem;
1602 | }
1603 | 
1604 | .-mr-44 {
1605 |   margin-right: -11rem;
1606 | }
1607 | 
1608 | .-mr-48 {
1609 |   margin-right: -12rem;
1610 | }
1611 | 
1612 | .-mr-52 {
1613 |   margin-right: -13rem;
1614 | }
1615 | 
1616 | .-mr-56 {
1617 |   margin-right: -14rem;
1618 | }
1619 | 
1620 | .-mr-60 {
1621 |   margin-right: -15rem;
1622 | }
1623 | 
1624 | .-mr-64 {
1625 |   margin-right: -16rem;
1626 | }
1627 | 
1628 | .-mr-72 {
1629 |   margin-right: -18rem;
1630 | }
1631 | 
1632 | .-mr-80 {
1633 |   margin-right: -20rem;
1634 | }
1635 | 
1636 | .-mr-96 {
1637 |   margin-right: -24rem;
1638 | }
1639 | 
1640 | .-mr-px {
1641 |   margin-right: -1px;
1642 | }
1643 | 
1644 | .-mb-0 {
1645 |   margin-bottom: 0px;
1646 | }
1647 | 
1648 | .-mb-1 {
1649 |   margin-bottom: -0.25rem;
1650 | }
1651 | 
1652 | .-mb-2 {
1653 |   margin-bottom: -0.5rem;
1654 | }
1655 | 
1656 | .-mb-3 {
1657 |   margin-bottom: -0.75rem;
1658 | }
1659 | 
1660 | .-mb-4 {
1661 |   margin-bottom: -1rem;
1662 | }
1663 | 
1664 | .-mb-5 {
1665 |   margin-bottom: -1.25rem;
1666 | }
1667 | 
1668 | .-mb-6 {
1669 |   margin-bottom: -1.5rem;
1670 | }
1671 | 
1672 | .-mb-7 {
1673 |   margin-bottom: -1.75rem;
1674 | }
1675 | 
1676 | .-mb-8 {
1677 |   margin-bottom: -2rem;
1678 | }
1679 | 
1680 | .-mb-9 {
1681 |   margin-bottom: -2.25rem;
1682 | }
1683 | 
1684 | .-mb-10 {
1685 |   margin-bottom: -2.5rem;
1686 | }
1687 | 
1688 | .-mb-11 {
1689 |   margin-bottom: -2.75rem;
1690 | }
1691 | 
1692 | .-mb-12 {
1693 |   margin-bottom: -3rem;
1694 | }
1695 | 
1696 | .-mb-14 {
1697 |   margin-bottom: -3.5rem;
1698 | }
1699 | 
1700 | .-mb-16 {
1701 |   margin-bottom: -4rem;
1702 | }
1703 | 
1704 | .-mb-20 {
1705 |   margin-bottom: -5rem;
1706 | }
1707 | 
1708 | .-mb-24 {
1709 |   margin-bottom: -6rem;
1710 | }
1711 | 
1712 | .-mb-28 {
1713 |   margin-bottom: -7rem;
1714 | }
1715 | 
1716 | .-mb-32 {
1717 |   margin-bottom: -8rem;
1718 | }
1719 | 
1720 | .-mb-36 {
1721 |   margin-bottom: -9rem;
1722 | }
1723 | 
1724 | .-mb-40 {
1725 |   margin-bottom: -10rem;
1726 | }
1727 | 
1728 | .-mb-44 {
1729 |   margin-bottom: -11rem;
1730 | }
1731 | 
1732 | .-mb-48 {
1733 |   margin-bottom: -12rem;
1734 | }
1735 | 
1736 | .-mb-52 {
1737 |   margin-bottom: -13rem;
1738 | }
1739 | 
1740 | .-mb-56 {
1741 |   margin-bottom: -14rem;
1742 | }
1743 | 
1744 | .-mb-60 {
1745 |   margin-bottom: -15rem;
1746 | }
1747 | 
1748 | .-mb-64 {
1749 |   margin-bottom: -16rem;
1750 | }
1751 | 
1752 | .-mb-72 {
1753 |   margin-bottom: -18rem;
1754 | }
1755 | 
1756 | .-mb-80 {
1757 |   margin-bottom: -20rem;
1758 | }
1759 | 
1760 | .-mb-96 {
1761 |   margin-bottom: -24rem;
1762 | }
1763 | 
1764 | .-mb-px {
1765 |   margin-bottom: -1px;
1766 | }
1767 | 
1768 | .-ml-0 {
1769 |   margin-left: 0px;
1770 | }
1771 | 
1772 | .-ml-1 {
1773 |   margin-left: -0.25rem;
1774 | }
1775 | 
1776 | .-ml-2 {
1777 |   margin-left: -0.5rem;
1778 | }
1779 | 
1780 | .-ml-3 {
1781 |   margin-left: -0.75rem;
1782 | }
1783 | 
1784 | .-ml-4 {
1785 |   margin-left: -1rem;
1786 | }
1787 | 
1788 | .-ml-5 {
1789 |   margin-left: -1.25rem;
1790 | }
1791 | 
1792 | .-ml-6 {
1793 |   margin-left: -1.5rem;
1794 | }
1795 | 
1796 | .-ml-7 {
1797 |   margin-left: -1.75rem;
1798 | }
1799 | 
1800 | .-ml-8 {
1801 |   margin-left: -2rem;
1802 | }
1803 | 
1804 | .-ml-9 {
1805 |   margin-left: -2.25rem;
1806 | }
1807 | 
1808 | .-ml-10 {
1809 |   margin-left: -2.5rem;
1810 | }
1811 | 
1812 | .-ml-11 {
1813 |   margin-left: -2.75rem;
1814 | }
1815 | 
1816 | .-ml-12 {
1817 |   margin-left: -3rem;
1818 | }
1819 | 
1820 | .-ml-14 {
1821 |   margin-left: -3.5rem;
1822 | }
1823 | 
1824 | .-ml-16 {
1825 |   margin-left: -4rem;
1826 | }
1827 | 
1828 | .-ml-20 {
1829 |   margin-left: -5rem;
1830 | }
1831 | 
1832 | .-ml-24 {
1833 |   margin-left: -6rem;
1834 | }
1835 | 
1836 | .-ml-28 {
1837 |   margin-left: -7rem;
1838 | }
1839 | 
1840 | .-ml-32 {
1841 |   margin-left: -8rem;
1842 | }
1843 | 
1844 | .-ml-36 {
1845 |   margin-left: -9rem;
1846 | }
1847 | 
1848 | .-ml-40 {
1849 |   margin-left: -10rem;
1850 | }
1851 | 
1852 | .-ml-44 {
1853 |   margin-left: -11rem;
1854 | }
1855 | 
1856 | .-ml-48 {
1857 |   margin-left: -12rem;
1858 | }
1859 | 
1860 | .-ml-52 {
1861 |   margin-left: -13rem;
1862 | }
1863 | 
1864 | .-ml-56 {
1865 |   margin-left: -14rem;
1866 | }
1867 | 
1868 | .-ml-60 {
1869 |   margin-left: -15rem;
1870 | }
1871 | 
1872 | .-ml-64 {
1873 |   margin-left: -16rem;
1874 | }
1875 | 
1876 | .-ml-72 {
1877 |   margin-left: -18rem;
1878 | }
1879 | 
1880 | .-ml-80 {
1881 |   margin-left: -20rem;
1882 | }
1883 | 
1884 | .-ml-96 {
1885 |   margin-left: -24rem;
1886 | }
1887 | 
1888 | .-ml-px {
1889 |   margin-left: -1px;
1890 | }
1891 | 
1892 | /* Padding */
1893 | 
1894 | .p-0 {
1895 |   padding: 0px;
1896 | }
1897 | .p-1 {
1898 |   padding: 0.25rem;
1899 | }
1900 | .p-2 {
1901 |   padding: 0.5rem;
1902 | }
1903 | .p-3 {
1904 |   padding: 0.75rem;
1905 | }
1906 | .p-4 {
1907 |   padding: 1rem;
1908 | }
1909 | .p-5 {
1910 |   padding: 1.25rem;
1911 | }
1912 | .p-6 {
1913 |   padding: 1.5rem;
1914 | }
1915 | .p-7 {
1916 |   padding: 1.75rem;
1917 | }
1918 | .p-8 {
1919 |   padding: 2rem;
1920 | }
1921 | .p-9 {
1922 |   padding: 2.25rem;
1923 | }
1924 | .p-10 {
1925 |   padding: 2.5rem;
1926 | }
1927 | .p-11 {
1928 |   padding: 2.75rem;
1929 | }
1930 | .p-12 {
1931 |   padding: 3rem;
1932 | }
1933 | .p-14 {
1934 |   padding: 3.5rem;
1935 | }
1936 | .p-16 {
1937 |   padding: 4rem;
1938 | }
1939 | .p-20 {
1940 |   padding: 5rem;
1941 | }
1942 | .p-24 {
1943 |   padding: 6rem;
1944 | }
1945 | .p-28 {
1946 |   padding: 7rem;
1947 | }
1948 | .p-32 {
1949 |   padding: 8rem;
1950 | }
1951 | .p-36 {
1952 |   padding: 9rem;
1953 | }
1954 | .p-40 {
1955 |   padding: 10rem;
1956 | }
1957 | .p-44 {
1958 |   padding: 11rem;
1959 | }
1960 | .p-48 {
1961 |   padding: 12rem;
1962 | }
1963 | .p-52 {
1964 |   padding: 13rem;
1965 | }
1966 | .p-56 {
1967 |   padding: 14rem;
1968 | }
1969 | .p-60 {
1970 |   padding: 15rem;
1971 | }
1972 | .p-64 {
1973 |   padding: 16rem;
1974 | }
1975 | .p-72 {
1976 |   padding: 18rem;
1977 | }
1978 | .p-80 {
1979 |   padding: 20rem;
1980 | }
1981 | .p-96 {
1982 |   padding: 24rem;
1983 | }
1984 | .p-px {
1985 |   padding: 1px;
1986 | }
1987 | .py-0 {
1988 |   padding-top: 0px;
1989 |   padding-bottom: 0px;
1990 |   padding-bottom: 0.125rem;
1991 | }
1992 | .py-1 {
1993 |   padding-top: 0.25rem;
1994 |   padding-bottom: 0.25rem;
1995 |   padding-bottom: 0.375rem;
1996 | }
1997 | .py-2 {
1998 |   padding-top: 0.5rem;
1999 |   padding-bottom: 0.5rem;
2000 |   padding-bottom: 0.625rem;
2001 | }
2002 | .py-3 {
2003 |   padding-top: 0.75rem;
2004 |   padding-bottom: 0.75rem;
2005 |   padding-bottom: 0.875rem;
2006 | }
2007 | .py-4 {
2008 |   padding-top: 1rem;
2009 |   padding-bottom: 1rem;
2010 | }
2011 | .py-5 {
2012 |   padding-top: 1.25rem;
2013 |   padding-bottom: 1.25rem;
2014 | }
2015 | .py-6 {
2016 |   padding-top: 1.5rem;
2017 |   padding-bottom: 1.5rem;
2018 | }
2019 | .py-7 {
2020 |   padding-top: 1.75rem;
2021 |   padding-bottom: 1.75rem;
2022 | }
2023 | .py-8 {
2024 |   padding-top: 2rem;
2025 |   padding-bottom: 2rem;
2026 | }
2027 | .py-9 {
2028 |   padding-top: 2.25rem;
2029 |   padding-bottom: 2.25rem;
2030 | }
2031 | .py-10 {
2032 |   padding-top: 2.5rem;
2033 |   padding-bottom: 2.5rem;
2034 | }
2035 | .py-11 {
2036 |   padding-top: 2.75rem;
2037 |   padding-bottom: 2.75rem;
2038 | }
2039 | .py-12 {
2040 |   padding-top: 3rem;
2041 |   padding-bottom: 3rem;
2042 | }
2043 | .py-14 {
2044 |   padding-top: 3.5rem;
2045 |   padding-bottom: 3.5rem;
2046 | }
2047 | .py-16 {
2048 |   padding-top: 4rem;
2049 |   padding-bottom: 4rem;
2050 | }
2051 | .py-20 {
2052 |   padding-top: 5rem;
2053 |   padding-bottom: 5rem;
2054 | }
2055 | .py-24 {
2056 |   padding-top: 6rem;
2057 |   padding-bottom: 6rem;
2058 | }
2059 | .py-28 {
2060 |   padding-top: 7rem;
2061 |   padding-bottom: 7rem;
2062 | }
2063 | .py-32 {
2064 |   padding-top: 8rem;
2065 |   padding-bottom: 8rem;
2066 | }
2067 | .py-36 {
2068 |   padding-top: 9rem;
2069 |   padding-bottom: 9rem;
2070 | }
2071 | .py-40 {
2072 |   padding-top: 10rem;
2073 |   padding-bottom: 10rem;
2074 | }
2075 | .py-44 {
2076 |   padding-top: 11rem;
2077 |   padding-bottom: 11rem;
2078 | }
2079 | .py-48 {
2080 |   padding-top: 12rem;
2081 |   padding-bottom: 12rem;
2082 | }
2083 | .py-52 {
2084 |   padding-top: 13rem;
2085 |   padding-bottom: 13rem;
2086 | }
2087 | .py-56 {
2088 |   padding-top: 14rem;
2089 |   padding-bottom: 14rem;
2090 | }
2091 | .py-60 {
2092 |   padding-top: 15rem;
2093 |   padding-bottom: 15rem;
2094 | }
2095 | .py-64 {
2096 |   padding-top: 16rem;
2097 |   padding-bottom: 16rem;
2098 | }
2099 | .py-72 {
2100 |   padding-top: 18rem;
2101 |   padding-bottom: 18rem;
2102 | }
2103 | .py-80 {
2104 |   padding-top: 20rem;
2105 |   padding-bottom: 20rem;
2106 | }
2107 | .py-96 {
2108 |   padding-top: 24rem;
2109 |   padding-bottom: 24rem;
2110 | }
2111 | .py-px {
2112 |   padding-top: 1px;
2113 |   padding-bottom: 1px;
2114 | }
2115 | .px-0 {
2116 |   padding-left: 0px;
2117 |   padding-right: 0px;
2118 |   padding-right: 0.125rem;
2119 | }
2120 | .px-1 {
2121 |   padding-left: 0.25rem;
2122 |   padding-right: 0.25rem;
2123 |   padding-right: 0.375rem;
2124 | }
2125 | .px-2 {
2126 |   padding-left: 0.5rem;
2127 |   padding-right: 0.5rem;
2128 |   padding-right: 0.625rem;
2129 | }
2130 | .px-3 {
2131 |   padding-left: 0.75rem;
2132 |   padding-right: 0.75rem;
2133 |   padding-right: 0.875rem;
2134 | }
2135 | .px-4 {
2136 |   padding-left: 1rem;
2137 |   padding-right: 1rem;
2138 | }
2139 | .px-5 {
2140 |   padding-left: 1.25rem;
2141 |   padding-right: 1.25rem;
2142 | }
2143 | .px-6 {
2144 |   padding-left: 1.5rem;
2145 |   padding-right: 1.5rem;
2146 | }
2147 | .px-7 {
2148 |   padding-left: 1.75rem;
2149 |   padding-right: 1.75rem;
2150 | }
2151 | .px-8 {
2152 |   padding-left: 2rem;
2153 |   padding-right: 2rem;
2154 | }
2155 | .px-9 {
2156 |   padding-left: 2.25rem;
2157 |   padding-right: 2.25rem;
2158 | }
2159 | .px-10 {
2160 |   padding-left: 2.5rem;
2161 |   padding-right: 2.5rem;
2162 | }
2163 | .px-11 {
2164 |   padding-left: 2.75rem;
2165 |   padding-right: 2.75rem;
2166 | }
2167 | .px-12 {
2168 |   padding-left: 3rem;
2169 |   padding-right: 3rem;
2170 | }
2171 | .px-14 {
2172 |   padding-left: 3.5rem;
2173 |   padding-right: 3.5rem;
2174 | }
2175 | .px-16 {
2176 |   padding-left: 4rem;
2177 |   padding-right: 4rem;
2178 | }
2179 | .px-20 {
2180 |   padding-left: 5rem;
2181 |   padding-right: 5rem;
2182 | }
2183 | .px-24 {
2184 |   padding-left: 6rem;
2185 |   padding-right: 6rem;
2186 | }
2187 | .px-28 {
2188 |   padding-left: 7rem;
2189 |   padding-right: 7rem;
2190 | }
2191 | .px-32 {
2192 |   padding-left: 8rem;
2193 |   padding-right: 8rem;
2194 | }
2195 | .px-36 {
2196 |   padding-left: 9rem;
2197 |   padding-right: 9rem;
2198 | }
2199 | .px-40 {
2200 |   padding-left: 10rem;
2201 |   padding-right: 10rem;
2202 | }
2203 | .px-44 {
2204 |   padding-left: 11rem;
2205 |   padding-right: 11rem;
2206 | }
2207 | .px-48 {
2208 |   padding-left: 12rem;
2209 |   padding-right: 12rem;
2210 | }
2211 | .px-52 {
2212 |   padding-left: 13rem;
2213 |   padding-right: 13rem;
2214 | }
2215 | .px-56 {
2216 |   padding-left: 14rem;
2217 |   padding-right: 14rem;
2218 | }
2219 | .px-60 {
2220 |   padding-left: 15rem;
2221 |   padding-right: 15rem;
2222 | }
2223 | .px-64 {
2224 |   padding-left: 16rem;
2225 |   padding-right: 16rem;
2226 | }
2227 | .px-72 {
2228 |   padding-left: 18rem;
2229 |   padding-right: 18rem;
2230 | }
2231 | .px-80 {
2232 |   padding-left: 20rem;
2233 |   padding-right: 20rem;
2234 | }
2235 | .px-96 {
2236 |   padding-left: 24rem;
2237 |   padding-right: 24rem;
2238 | }
2239 | .px-px {
2240 |   padding-left: 1px;
2241 |   padding-right: 1px;
2242 | }
2243 | .pt-0 {
2244 |   padding-top: 0px;
2245 | }
2246 | .pt-1 {
2247 |   padding-top: 0.25rem;
2248 | }
2249 | .pt-2 {
2250 |   padding-top: 0.5rem;
2251 | }
2252 | .pt-3 {
2253 |   padding-top: 0.75rem;
2254 | }
2255 | .pt-4 {
2256 |   padding-top: 1rem;
2257 | }
2258 | .pt-5 {
2259 |   padding-top: 1.25rem;
2260 | }
2261 | .pt-6 {
2262 |   padding-top: 1.5rem;
2263 | }
2264 | .pt-7 {
2265 |   padding-top: 1.75rem;
2266 | }
2267 | .pt-8 {
2268 |   padding-top: 2rem;
2269 | }
2270 | .pt-9 {
2271 |   padding-top: 2.25rem;
2272 | }
2273 | .pt-10 {
2274 |   padding-top: 2.5rem;
2275 | }
2276 | .pt-11 {
2277 |   padding-top: 2.75rem;
2278 | }
2279 | .pt-12 {
2280 |   padding-top: 3rem;
2281 | }
2282 | .pt-14 {
2283 |   padding-top: 3.5rem;
2284 | }
2285 | .pt-16 {
2286 |   padding-top: 4rem;
2287 | }
2288 | .pt-20 {
2289 |   padding-top: 5rem;
2290 | }
2291 | .pt-24 {
2292 |   padding-top: 6rem;
2293 | }
2294 | .pt-28 {
2295 |   padding-top: 7rem;
2296 | }
2297 | .pt-32 {
2298 |   padding-top: 8rem;
2299 | }
2300 | .pt-36 {
2301 |   padding-top: 9rem;
2302 | }
2303 | .pt-40 {
2304 |   padding-top: 10rem;
2305 | }
2306 | .pt-44 {
2307 |   padding-top: 11rem;
2308 | }
2309 | .pt-48 {
2310 |   padding-top: 12rem;
2311 | }
2312 | .pt-52 {
2313 |   padding-top: 13rem;
2314 | }
2315 | .pt-56 {
2316 |   padding-top: 14rem;
2317 | }
2318 | .pt-60 {
2319 |   padding-top: 15rem;
2320 | }
2321 | .pt-64 {
2322 |   padding-top: 16rem;
2323 | }
2324 | .pt-72 {
2325 |   padding-top: 18rem;
2326 | }
2327 | .pt-80 {
2328 |   padding-top: 20rem;
2329 | }
2330 | .pt-96 {
2331 |   padding-top: 24rem;
2332 | }
2333 | .pt-px {
2334 |   padding-top: 1px;
2335 | }
2336 | .pr-0 {
2337 |   padding-right: 0px;
2338 | }
2339 | .pr-1 {
2340 |   padding-right: 0.25rem;
2341 | }
2342 | .pr-2 {
2343 |   padding-right: 0.5rem;
2344 | }
2345 | .pr-3 {
2346 |   padding-right: 0.75rem;
2347 | }
2348 | .pr-4 {
2349 |   padding-right: 1rem;
2350 | }
2351 | .pr-5 {
2352 |   padding-right: 1.25rem;
2353 | }
2354 | .pr-6 {
2355 |   padding-right: 1.5rem;
2356 | }
2357 | .pr-7 {
2358 |   padding-right: 1.75rem;
2359 | }
2360 | .pr-8 {
2361 |   padding-right: 2rem;
2362 | }
2363 | .pr-9 {
2364 |   padding-right: 2.25rem;
2365 | }
2366 | .pr-10 {
2367 |   padding-right: 2.5rem;
2368 | }
2369 | .pr-11 {
2370 |   padding-right: 2.75rem;
2371 | }
2372 | .pr-12 {
2373 |   padding-right: 3rem;
2374 | }
2375 | .pr-14 {
2376 |   padding-right: 3.5rem;
2377 | }
2378 | .pr-16 {
2379 |   padding-right: 4rem;
2380 | }
2381 | .pr-20 {
2382 |   padding-right: 5rem;
2383 | }
2384 | .pr-24 {
2385 |   padding-right: 6rem;
2386 | }
2387 | .pr-28 {
2388 |   padding-right: 7rem;
2389 | }
2390 | .pr-32 {
2391 |   padding-right: 8rem;
2392 | }
2393 | .pr-36 {
2394 |   padding-right: 9rem;
2395 | }
2396 | .pr-40 {
2397 |   padding-right: 10rem;
2398 | }
2399 | .pr-44 {
2400 |   padding-right: 11rem;
2401 | }
2402 | .pr-48 {
2403 |   padding-right: 12rem;
2404 | }
2405 | .pr-52 {
2406 |   padding-right: 13rem;
2407 | }
2408 | .pr-56 {
2409 |   padding-right: 14rem;
2410 | }
2411 | .pr-60 {
2412 |   padding-right: 15rem;
2413 | }
2414 | .pr-64 {
2415 |   padding-right: 16rem;
2416 | }
2417 | .pr-72 {
2418 |   padding-right: 18rem;
2419 | }
2420 | .pr-80 {
2421 |   padding-right: 20rem;
2422 | }
2423 | .pr-96 {
2424 |   padding-right: 24rem;
2425 | }
2426 | .pr-px {
2427 |   padding-right: 1px;
2428 | }
2429 | .pb-0 {
2430 |   padding-bottom: 0px;
2431 | }
2432 | .pb-1 {
2433 |   padding-bottom: 0.25rem;
2434 | }
2435 | .pb-2 {
2436 |   padding-bottom: 0.5rem;
2437 | }
2438 | .pb-3 {
2439 |   padding-bottom: 0.75rem;
2440 | }
2441 | .pb-4 {
2442 |   padding-bottom: 1rem;
2443 | }
2444 | .pb-5 {
2445 |   padding-bottom: 1.25rem;
2446 | }
2447 | .pb-6 {
2448 |   padding-bottom: 1.5rem;
2449 | }
2450 | .pb-7 {
2451 |   padding-bottom: 1.75rem;
2452 | }
2453 | .pb-8 {
2454 |   padding-bottom: 2rem;
2455 | }
2456 | .pb-9 {
2457 |   padding-bottom: 2.25rem;
2458 | }
2459 | .pb-10 {
2460 |   padding-bottom: 2.5rem;
2461 | }
2462 | .pb-11 {
2463 |   padding-bottom: 2.75rem;
2464 | }
2465 | .pb-12 {
2466 |   padding-bottom: 3rem;
2467 | }
2468 | .pb-14 {
2469 |   padding-bottom: 3.5rem;
2470 | }
2471 | .pb-16 {
2472 |   padding-bottom: 4rem;
2473 | }
2474 | .pb-20 {
2475 |   padding-bottom: 5rem;
2476 | }
2477 | .pb-24 {
2478 |   padding-bottom: 6rem;
2479 | }
2480 | .pb-28 {
2481 |   padding-bottom: 7rem;
2482 | }
2483 | .pb-32 {
2484 |   padding-bottom: 8rem;
2485 | }
2486 | .pb-36 {
2487 |   padding-bottom: 9rem;
2488 | }
2489 | .pb-40 {
2490 |   padding-bottom: 10rem;
2491 | }
2492 | .pb-44 {
2493 |   padding-bottom: 11rem;
2494 | }
2495 | .pb-48 {
2496 |   padding-bottom: 12rem;
2497 | }
2498 | .pb-52 {
2499 |   padding-bottom: 13rem;
2500 | }
2501 | .pb-56 {
2502 |   padding-bottom: 14rem;
2503 | }
2504 | .pb-60 {
2505 |   padding-bottom: 15rem;
2506 | }
2507 | .pb-64 {
2508 |   padding-bottom: 16rem;
2509 | }
2510 | .pb-72 {
2511 |   padding-bottom: 18rem;
2512 | }
2513 | .pb-80 {
2514 |   padding-bottom: 20rem;
2515 | }
2516 | .pb-96 {
2517 |   padding-bottom: 24rem;
2518 | }
2519 | .pb-px {
2520 |   padding-bottom: 1px;
2521 | }
2522 | .pl-0 {
2523 |   padding-left: 0px;
2524 | }
2525 | .pl-1 {
2526 |   padding-left: 0.25rem;
2527 | }
2528 | .pl-2 {
2529 |   padding-left: 0.5rem;
2530 | }
2531 | .pl-3 {
2532 |   padding-left: 0.75rem;
2533 | }
2534 | .pl-4 {
2535 |   padding-left: 1rem;
2536 | }
2537 | .pl-5 {
2538 |   padding-left: 1.25rem;
2539 | }
2540 | .pl-6 {
2541 |   padding-left: 1.5rem;
2542 | }
2543 | .pl-7 {
2544 |   padding-left: 1.75rem;
2545 | }
2546 | .pl-8 {
2547 |   padding-left: 2rem;
2548 | }
2549 | .pl-9 {
2550 |   padding-left: 2.25rem;
2551 | }
2552 | .pl-10 {
2553 |   padding-left: 2.5rem;
2554 | }
2555 | .pl-11 {
2556 |   padding-left: 2.75rem;
2557 | }
2558 | .pl-12 {
2559 |   padding-left: 3rem;
2560 | }
2561 | .pl-14 {
2562 |   padding-left: 3.5rem;
2563 | }
2564 | .pl-16 {
2565 |   padding-left: 4rem;
2566 | }
2567 | .pl-20 {
2568 |   padding-left: 5rem;
2569 | }
2570 | .pl-24 {
2571 |   padding-left: 6rem;
2572 | }
2573 | .pl-28 {
2574 |   padding-left: 7rem;
2575 | }
2576 | .pl-32 {
2577 |   padding-left: 8rem;
2578 | }
2579 | .pl-36 {
2580 |   padding-left: 9rem;
2581 | }
2582 | .pl-40 {
2583 |   padding-left: 10rem;
2584 | }
2585 | .pl-44 {
2586 |   padding-left: 11rem;
2587 | }
2588 | .pl-48 {
2589 |   padding-left: 12rem;
2590 | }
2591 | .pl-52 {
2592 |   padding-left: 13rem;
2593 | }
2594 | .pl-56 {
2595 |   padding-left: 14rem;
2596 | }
2597 | .pl-60 {
2598 |   padding-left: 15rem;
2599 | }
2600 | .pl-64 {
2601 |   padding-left: 16rem;
2602 | }
2603 | .pl-72 {
2604 |   padding-left: 18rem;
2605 | }
2606 | .pl-80 {
2607 |   padding-left: 20rem;
2608 | }
2609 | .pl-96 {
2610 |   padding-left: 24rem;
2611 | }
2612 | .pl-px {
2613 |   padding-left: 1px;
2614 | }
2615 | 


--------------------------------------------------------------------------------
/src/css/shared/modules/table.css:
--------------------------------------------------------------------------------
 1 | .border-collapse {
 2 |   border-collapse: collapse;
 3 | }
 4 | 
 5 | .border-separate {
 6 |   border-collapse: separate;
 7 | }
 8 | 
 9 | .table-auto {
10 |   table-layout: auto;
11 | }
12 | 
13 | .table-fixed {
14 |   table-layout: fixed;
15 | }
16 | 


--------------------------------------------------------------------------------
/src/css/shared/modules/typhography.css:
--------------------------------------------------------------------------------
  1 | /* Text Alignment */
  2 | .text-left {
  3 |   text-align: left;
  4 | }
  5 | 
  6 | .text-center {
  7 |   text-align: center;
  8 | }
  9 | 
 10 | .text-right {
 11 |   text-align: right;
 12 | }
 13 | 
 14 | .text-justify {
 15 |   text-align: justify;
 16 | }
 17 | 
 18 | /* Font Size */
 19 | .text-xs {
 20 |   font-size: 0.75rem;
 21 |   line-height: 1rem;
 22 | }
 23 | 
 24 | .text-sm {
 25 |   font-size: 0.875rem;
 26 |   line-height: 1.25rem;
 27 | }
 28 | 
 29 | .text-base {
 30 |   font-size: 1rem;
 31 |   line-height: 1.5rem;
 32 | }
 33 | 
 34 | .text-lg {
 35 |   font-size: 1.125rem;
 36 |   line-height: 1.75rem;
 37 | }
 38 | 
 39 | .text-xl {
 40 |   font-size: 1.25rem;
 41 |   line-height: 1.75rem;
 42 | }
 43 | .text-2xl {
 44 |   font-size: 1.5rem;
 45 |   line-height: 2rem;
 46 | }
 47 | 
 48 | .text-3xl {
 49 |   font-size: 1.875rem;
 50 |   line-height: 2.25rem;
 51 | }
 52 | 
 53 | .text-4xl {
 54 |   font-size: 2.25rem;
 55 |   line-height: 2.5rem;
 56 | }
 57 | .text-5xl {
 58 |   font-size: 3rem;
 59 |   line-height: 1;
 60 | }
 61 | .text-6xl {
 62 |   font-size: 3.75rem;
 63 |   line-height: 1;
 64 | }
 65 | .text-7xl {
 66 |   font-size: 4.5rem;
 67 |   line-height: 1;
 68 | }
 69 | 
 70 | .text-8xl {
 71 |   font-size: 6rem;
 72 |   line-height: 1;
 73 | }
 74 | 
 75 | .text-9xl {
 76 |   font-size: 8rem;
 77 |   line-height: 1;
 78 | }
 79 | 
 80 | /* Font Weight */
 81 | .font-thin {
 82 |   font-weight: 100;
 83 | }
 84 | .font-extralight {
 85 |   font-weight: 200;
 86 | }
 87 | .font-light {
 88 |   font-weight: 300;
 89 | }
 90 | .font-normal {
 91 |   font-weight: 400;
 92 | }
 93 | .font-medium {
 94 |   font-weight: 500;
 95 | }
 96 | .font-semibold {
 97 |   font-weight: 600;
 98 | }
 99 | .font-bold {
100 |   font-weight: 700;
101 | }
102 | .font-extrabold {
103 |   font-weight: 800;
104 | }
105 | .font-black {
106 |   font-weight: 900;
107 | }
108 | 
109 | /* Text Color */
110 | 
111 | .text-transparent {
112 |   color: transparent;
113 | }
114 | 
115 | .text-black {
116 |   color: black;
117 | }
118 | 
119 | .text-white {
120 |   color: white;
121 | }
122 | 
123 | .text-gray-50 {
124 |   color: rgb(249, 250, 251);
125 | }
126 | 
127 | .text-gray-100 {
128 |   color: rgb(249, 250, 251);
129 | }
130 | 
131 | .text-gray-100 {
132 |   color: rgb(243, 244, 246);
133 | }
134 | 
135 | .text-gray-200 {
136 |   color: rgb(229, 231, 235);
137 | }
138 | 
139 | .text-gray-300 {
140 |   color: rgb(209, 213, 219);
141 | }
142 | 
143 | .text-gray-400 {
144 |   color: rgb(156, 163, 175);
145 | }
146 | 
147 | .text-gray-500 {
148 |   color: rgb(107, 114, 128);
149 | }
150 | 
151 | .text-gray-600 {
152 |   color: rgb(75, 85, 99);
153 | }
154 | 
155 | .text-gray-700 {
156 |   color: rgb(55, 65, 81);
157 | }
158 | 
159 | .text-gray-800 {
160 |   color: rgb(31, 41, 55);
161 | }
162 | 
163 | .text-gray-900 {
164 |   color: rgb(17, 24, 39);
165 | }
166 | 


--------------------------------------------------------------------------------
/src/css/ui/index.css:
--------------------------------------------------------------------------------
1 | @import 'modules/modal.css';
2 | @import 'modules/chip.css';
3 | @import 'modules/youtubeCard.css';
4 | 


--------------------------------------------------------------------------------
/src/css/ui/modules/chip.css:
--------------------------------------------------------------------------------
 1 | .chip {
 2 |   padding: 0 12px;
 3 |   background-color: #efefef;
 4 |   border-radius: 100px;
 5 |   display: inline-flex;
 6 |   color: rgba(0, 0, 0, 0.87);
 7 |   align-items: center;
 8 |   height: 32px;
 9 |   font-size: 14px;
10 |   cursor: pointer;
11 |   border: none;
12 | }
13 | 
14 | .chip .icon {
15 |   font-size: 16px;
16 |   color: rgba(0, 0, 0, 0.54);
17 |   width: 20px;
18 |   text-align: center;
19 | }
20 | 


--------------------------------------------------------------------------------
/src/css/ui/modules/modal.css:
--------------------------------------------------------------------------------
 1 | .modal {
 2 |   opacity: 0;
 3 |   visibility: hidden;
 4 |   display: flex;
 5 |   position: fixed;
 6 |   top: 0;
 7 |   right: 0;
 8 |   bottom: 0;
 9 |   left: 0;
10 |   background: rgba(0, 0, 0, 0.5);
11 |   transition: opacity 0.25s ease;
12 |   z-index: 2;
13 | }
14 | 
15 | .modal.open {
16 |   opacity: 1;
17 |   visibility: visible;
18 | }
19 | 
20 | .modal-inner {
21 |   transition: top 0.25s ease;
22 |   width: 960px;
23 |   margin: auto;
24 |   overflow: auto;
25 |   background: #fff;
26 |   border-radius: 5px;
27 |   position: relative;
28 | }
29 | 
30 | .modal-close {
31 |   margin: 20px;
32 |   width: 20px;
33 |   position: absolute;
34 |   right: 10px;
35 |   top: 10px;
36 |   cursor: pointer;
37 |   background: no-repeat;
38 |   border: none;
39 |   padding: 0;
40 | }
41 | 
42 | svg {
43 |   display: block;
44 | }
45 | 
46 | .close-x {
47 |   stroke: gray;
48 |   fill: transparent;
49 |   stroke-linecap: round;
50 |   stroke-width: 5;
51 | }
52 | 
53 | @media screen and (max-width: 768px) {
54 |   .modal-inner {
55 |     width: 90%;
56 |     height: 90%;
57 |     box-sizing: border-box;
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/src/css/ui/modules/youtubeCard.css:
--------------------------------------------------------------------------------
 1 | .video-wrapper {
 2 |   display: grid;
 3 |   grid-template-columns: repeat(auto-fill, 236px);
 4 |   grid-row-gap: 0px;
 5 |   grid-column-gap: 4px;
 6 |   justify-content: center;
 7 | }
 8 | 
 9 | .clip {
10 |   height: 219px;
11 |   cursor: pointer;
12 |   text-decoration: none;
13 | }
14 | 
15 | .clip .preview-container {
16 |   width: 100%;
17 |   height: 120px;
18 |   position: relative;
19 | }
20 | 
21 | .clip .preview-container img {
22 |   width: 100%;
23 |   height: 100%;
24 |   object-fit: cover;
25 | }
26 | 
27 | .clip .overlay-preview {
28 |   position: absolute;
29 |   left: 0;
30 |   top: 0;
31 |   right: 0;
32 |   bottom: 0;
33 | }
34 | 
35 | .clip .content-container {
36 |   position: relative;
37 | }
38 | 
39 | .clip .content-container h3 {
40 |   display: -webkit-box;
41 |   margin: 0;
42 |   font-size: 14px;
43 |   font-weight: 500;
44 |   -webkit-box-orient: vertical;
45 |   text-overflow: ellipsis;
46 |   -webkit-line-clamp: 2;
47 |   overflow: hidden;
48 |   color: #0a0a0a;
49 | }
50 | 
51 | .clip .content-container .channel-name {
52 |   font-size: 12px;
53 |   color: #606060;
54 |   display: block;
55 |   width: 100%;
56 | }
57 | 
58 | .clip .content-container .meta p {
59 |   font-size: 12px;
60 |   display: inline-block;
61 |   margin: 0;
62 |   color: #606060;
63 | }
64 | 


--------------------------------------------------------------------------------
/src/images/readme/laptop_with_youtube_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/next-step/js-youtube-classroom/ea3b9b9d2596e9421009459ea9d6d4cbd8870e73/src/images/readme/laptop_with_youtube_logo.png


--------------------------------------------------------------------------------
/src/images/readme/youtube_classroom_preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/next-step/js-youtube-classroom/ea3b9b9d2596e9421009459ea9d6d4cbd8870e73/src/images/readme/youtube_classroom_preview.png


--------------------------------------------------------------------------------
/src/images/status/not_found.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/next-step/js-youtube-classroom/ea3b9b9d2596e9421009459ea9d6d4cbd8870e73/src/images/status/not_found.png


--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
 1 | const $searchButton = document.querySelector("#search-button");
 2 | const $modalClose = document.querySelector(".modal-close");
 3 | const $modal = document.querySelector(".modal");
 4 | 
 5 | const onModalShow = () => {
 6 |   $modal.classList.add("open");
 7 | };
 8 | 
 9 | const onModalClose = () => {
10 |   $modal.classList.remove("open");
11 | };
12 | 
13 | $searchButton.addEventListener("click", onModalShow);
14 | $modalClose.addEventListener("click", onModalClose);
15 | 


--------------------------------------------------------------------------------