app/assets/stylesheets/application.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require bootstrap-datepicker
*= require_tree
*/
@import 'bootstrap';
/* Regular html elements */
ul {
list-style-type: none;
li {
margin: 5px 0;
}
}
/* Bootstrap classes */
.jumbotron{
padding-top: 3rem;
padding-bottom: 3rem;
}
.navbar{
background-color: #FFFAFA;
}
/* Multiple views */
.user-container{
margin: 10% auto;
width: 50%;
.actions{
width: 100%;
}
}
.actions {
padding-top: 2rem;
padding-bottom: 2rem;
width: 70%;
margin: 0 auto;
margin-bottom: 20px;
}
.white-bg{
background-color: white;
}
.email-subject{
margin-bottom: 10px;
}
#email_body{
margin-bottom: 20px;
}
/*Login/Signup*/
.sign-up {
width: 70%;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(50%);
}
/* Times */
.current-duration{
margin-top: 20px;
}
.times-index {
width: 70%;
margin: 3rem auto 2rem auto;
padding: 2rem !important;
}
.project-times-table{
margin: 20px 0 30px 0;
div {
max-width: 400px;
}
.project-times-dateentry{
margin-top: 20px;
}
.project-times-timeentry{
display: grid;
grid-template-columns: 50% 50%
}
.ranking-times-timeentry{
display: grid;
grid-template-columns: 50% 50%
}
}
.rankings-times-table{
margin: 20px 0 30px 0;
div {
width: 100%;
}
span {
font-size: 15px;
font-weight: normal;
margin-right: 10px;
}
.ranking-times-date-entry{
margin-top: 20px;
}
.ranking-times-time-entry{
display: grid;
grid-template-columns: auto auto
}
.ranking-times-selection-entry{
display: grid;
grid-template-columns: auto auto auto auto
}
}
#billboard{
display: grid;
margin: 1rem auto;
padding: 1.5rem 0;
#timeslot {
width: 70%;
margin: 0 auto;
margin-bottom: 2rem;
padding-top: 3rem;
padding-bottom: 3rem;
#timeslot-div {
width: 100%;
#timeslot-toggle {
margin-top: 20px;
}
#timeslot_hour, #timeslot_minute {
border-radius:4px;
border:1px solid #AAAAAA;
}
}
}
#dates {
width: 70%;
margin: 0 auto;
display: grid;
grid-template-columns: 50% 50%;
padding-top: 3rem;
padding-bottom: 3rem;
margin-bottom: 2rem;
.dates-chosen {
white-space: pre
}
}
#bottom-times {
width: 70%;
margin: 0 auto;
padding-top: 3rem;
padding-bottom: 3rem;
margin-bottom: 2rem;
}
#actions {
width: 70%;
margin: 0 auto;
padding-top: 2rem;
padding-bottom: 2rem;
}
}
.times-table-date{
font-weight:bold;
margin: 15px 0;
span {
font-size: 15px;
font-weight: normal;
margin-right: 10px;
}
button {
margin: 0 0 0 15px;
}
div {
margin: 10px 0;
}
.startInput, .endInput {
border-radius:4px;
border:1px solid #AAAAAA;
}
}
.datepicker{
width: 30%;
font-size: 14px;
table {
margin: auto;
width: 80%;
}
.dropdown-menu{
width: 25%;
}
.table-condensed{
width: 300px;
height: 300px;
}
.datepicker-inline {
width: 80%;
display: none !important;
}
}
/* Projects */
.project-header{
font-size: 30px;
}
#project_project_name{
margin-top: 20px;
}
.header {
border-bottom: 1px solid #e6e6e6;
padding: 15px;
}
.main {
border-left: 1px solid #e6e6e6;
}
.card{
margin: 15px;
padding: 0;
}
.display-participant{
margin: 0;
padding: 0;
}
.proj {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
transition: 0.5s;
}
.proj:hover {
background-color: #42bff4;
opacity: 0.5;
color: white;
}
.proj1 {
position:absolute;
width:100%;
height:100%;
top:0;
hover:1;
left: 0;
transition: 0.5s;
color: white;
}
.proj1:hover {
background-color: #cccccc;
opacity: 0.5;
}
/* Participants */
.participants{
width: 70%;
margin: 2rem auto;
.actions-participants{
width: 100%;
display: grid;
grid-template-columns: 50% 50%;
#new_participant{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
#participant_email{
grid-column-start: 1;
grid-column-end: 4;
}
#participant_match_degree{
grid-column-start: 1;
grid-column-end: 3;
}
}
.import-csv-form{
display: flex !important;
}
.add-new-participant{
width: 97.5%;
justify-self:start;
.manual-add-input{
margin-top: 10px;
input {
margin-right: 10px;
}
}
}
.import-participant{
width: 97.5%;
justify-self:end;
.upload-row{
div {
margin-right: 10px;
}
}
}
}
.email-participants {
width: 100%;
}
}
/* Matchings */
.matchings {
width: 70%;
margin: 2rem auto;
.button_to{
margin-top: 20px;
}
}
.matching-actions{
margin-top: 10px;
display: flex;
a, form {
margin-left: 5px;
margin-right: 5px;
}
}
/*Media Queries */
@media screen and (max-width: 800px) {
/* Multiple Views */
.user-container{
width: 90%;
}
.jumbotron {
padding-top: 2rem;
padding-bottom: 2rem;
margin-bottom: 1.5rem;
}
.btn{
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem;
}
.actions{
display: flex;
width: 90%;
justify-content: left;
padding: 1.25rem .5rem;
& *{
margin-left: .25rem;
margin-right: .25rem;
}
}
h1{
font-size: 2rem;
}
.form-control, .custom-file-label, .custom-file-label::after {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem;
height: calc(1.5em + 0.5rem);
}
textarea.form-control{
height: auto;
}
/* Sign Up */
.sign-up{
width: 90%;
transform: translateY(40%);
}
/*Projects */
#billboard {
width: 90%;
padding: 1rem 0 !important;
}
.times-index {
margin: 2rem auto;
padding: 1.5rem !important;
width: 90%;
}
.list-group-item{
padding: 0.5rem 1.0rem;
span{
font-size: 14px;
}
}
/* Times */
#timeslot, #dates, #bottom-times, #actions {
width: 100% !important;
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
#dates{
grid-template-columns: 100% !important;
}
.datepicker{
width: 80%;
}
.times-table-date{
font-size: 14px;
div {
display: flex;
span {
font-size: 13px;
button{
margin: 0;
padding: 0 0.5rem;
}
}
}
}
/* Participants */
.participants{
width: 90%;
}
.actions-participants{
grid-template-columns: 100% !important;
div {
width: 100% !important;
}
}
.listing-participants{
.table-column-email{
font-size: 14px;
}
.table-column-actions{
a {
margin-top: 5px;
font-size: 12px;
}
}
}
/*Matchings */
.matchings{
width: 90%;
.editing-matching{
padding-top: 2rem;
padding-bottom: 1rem;
.button_to{
margin-top: 10px;
}
}
.table{
font-size: 12px !important;
width: 100%;
.btn-group{
.dropdown-toggle{
line-height: 1;
font-size: 12px;
}
.dropdown-menu{
a {
font-size: 12px;
}
}
}
td{
padding: 0.5rem 0;
word-wrap: break-word
}
}
}
.matching-actions, .times-index-actions, .edit-participants-action{
display: grid;
grid-template-columns: 50% 50%;
grid-row-gap: 10px;
}
.edit-participants-action{
margin-bottom: 0;
padding-bottom: 0;
}
}