PHP Classes

File: resources/sass/app.scss

Recommend this page to a friend!
  Classes of Hillary Kollan   PHP Trello Clone using Laravel and Vue.js   resources/sass/app.scss   Download  
File: resources/sass/app.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Trello Clone using Laravel and Vue.js
Web app and API to manage tasks like Trello
Author: By
Last change:
Date: 1 year ago
Size: 8,044 bytes
 

Contents

Class file image Download
/* All grid code is placed in a 'supports' rule (feature query) at the bottom of the CSS (Line 320). The 'supports' rule will only run if your browser supports CSS grid. Flexbox is used as a fallback so that browsers which don't support grid will still recieve an identical layout. */ /* Base styles */ :root { font-size: 10px; } * { box-sizing: border-box; &::before, &::after { box-sizing: border-box; } } body { font-family: Arial, sans-serif; display: flex; flex-direction: column; background-color: #0079bf; } .img-up{ width:7px; float: right; } .img-down{ position: relative; width:7px; float: right; margin-top: 20px; margin-right: -7px; } .btn { display: flex; justify-content: center; align-items: center; font: inherit; background: none; border: none; color: inherit; padding: 0; cursor: pointer; } :focus { outline-color: #fa0; } /* Masthead */ .masthead { flex-basis: 4rem; display: flex; align-items: center; padding: 0 0.8rem; background-color: #0067a3; box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1); .btn { background-color: #4c94be; border-radius: 0.3rem; transition: background-color 150ms; &:hover { background-color: #3385b5; } } } .boards-menu { display: flex; flex-shrink: 0; } .boards-btn { flex-basis: 9rem; font-size: 1.4rem; font-weight: 700; color: #fff; margin-right: 0.8rem; padding: 0.6rem 0.8rem; } .boards-btn-icon { font-size: 1.7rem; padding-right: 1.2rem; } .board-search { flex-basis: 18rem; position: relative; } .board-search-input { height: 3rem; border: none; border-radius: 0.3rem; background-color: #4c94be; width: 100%; padding: 0 3rem 0 1rem; color: #fff; &:hover { background-color: #66a4c8; } } .search-icon { font-size: 1.5rem; position: absolute; top: 50%; right: 0.8rem; transform: translateY(-50%) rotate(90deg); color: #fff; } .logo { flex: 1; font-family: "Courgette", cursive; font-size: 2.2rem; font-weight: 700; color: rgba(255, 255, 255, 0.5); margin: 0 2rem; transition: color 150ms; text-align: center; white-space: nowrap; cursor: pointer; &:hover { color: rgba(255, 255, 255, 0.8); } } .logo-icon { padding-right: 0.4rem; } .user-settings { display: flex; height: 3rem; color: #fff; } .user-settings-btn { font-size: 1.5rem; width: 3rem; margin-right: 0.8rem; &:last-of-type { margin-right: 0; } } /* Board info bar */ .board-info-bar { flex-basis: 3rem; display: flex; align-items: center; justify-content: space-between; margin: 0.8rem 0; padding: 0 1rem; color: #f6f6f6; } .board-controls { display: flex; .btn { margin-right: 1rem; &:last-of-type { margin-right: 0; } } } .board-info-bar .btn { font-size: 1.4rem; font-weight: 400; transition: background-color 150ms; padding: 0 0.6rem; border-radius: 0.3rem; height: 3rem; &:hover { background-color: #006aa8; } } .private-btn-icon, .menu-btn-icon { padding-right: 0.6rem; white-space: nowrap; } .board-title h2 { font-size: 1.8rem; font-weight: 700; white-space: nowrap; } /* Lists */ .lists-container { &::-webkit-scrollbar { height: 2.4rem; } &::-webkit-scrollbar-thumb { background-color: #66a3c7; border: 0.8rem solid #0079bf; border-top-width: 0; } display: flex; align-items: flex-start; padding: 0 0.8rem 0.8rem; overflow-x: auto; height: calc(100vh - 8.6rem); } .list { flex: 0 0 27rem; display: flex; flex-direction: column; background-color: #e2e4e6; max-height: calc(100vh - 11.8rem); border-radius: 0.3rem; margin-right: 1rem; &:last-of-type { margin-right: 0; } } .list-title { font-size: 1.4rem; font-weight: 700; color: #333; padding: 1rem; } .list-items { flex: 1; display: flex; flex-direction: column; align-content: flex-start; padding: 0 0.6rem 0.5rem; overflow-y: auto; &::-webkit-scrollbar { width: 1.6rem; } &::-webkit-scrollbar-thumb { background-color: #c4c9cc; border-right: 0.6rem solid #e2e4e6; } li { font-size: 1.4rem; font-weight: 400; line-height: 1.3; background-color: #fff; padding: 0.65rem 0.6rem; color: #4d4d4d; border-bottom: 0.1rem solid #ccc; border-radius: 0.3rem; margin-bottom: 0.6rem; word-wrap: break-word; cursor: pointer; &:last-of-type { margin-bottom: 0; } &:hover { background-color: #eee; } } } .add-card-btn { display: block; font-size: 1.4rem; font-weight: 400; color: #838c91; padding: 1rem; text-align: left; cursor: pointer; &:hover { background-color: #cdd2d4; color: #4d4d4d; text-decoration: underline; } } .add-list-btn { flex: 0 0 27rem; display: block; font-size: 1.4rem; font-weight: 400; background-color: #006aa7; color: #a5cae0; padding: 1rem; border-radius: 0.3rem; cursor: pointer; transition: background-color 150ms; text-align: left; &:hover { background-color: #005485; } } .add-card-btn::after, .add-list-btn::after { content: '...'; } /* The following rule will only run if your browser supports CSS grid. Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling. */ @supports (display: grid) { body { display: grid; grid-template-rows: 4rem 3rem auto; grid-row-gap: 0.8rem; } .masthead { display: grid; grid-template-columns: auto 1fr auto; grid-column-gap: 2rem; } .boards-menu { display: grid; grid-template-columns: 9rem 18rem; grid-column-gap: 0.8rem; } .user-settings { display: grid; grid-template-columns: repeat(4, auto); grid-column-gap: 0.8rem; } .board-controls { display: grid; grid-auto-flow: column; grid-column-gap: 1rem; } .lists-container { display: grid; grid-auto-columns: 27rem; grid-auto-flow: column; grid-column-gap: 1rem; } .list { display: grid; grid-template-rows: auto minmax(auto, 1fr) auto; } .list-items { display: grid; grid-row-gap: 0.6rem; } .logo, .list, .list-items li, .boards-btn, .board-info-bar, .board-controls .btn, .user-settings-btn { margin: 0; } .modal { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: table; transition: opacity .3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } .modal-container { width: 300px; margin: 0px auto; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); transition: all .3s ease; font-family: Helvetica, Arial, sans-serif; } .modal-header h3 { margin-top: 0; color: #42b983; } .modal-body { margin: 20px 0; } .modal-default-button { float: right; } .modal-enter, .modal-leave-active { opacity: 0; } .modal-enter .modal-container, .modal-leave-active .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); } }