Skip to content

GitLab

Verified Commit fd1f89de authored by Sli's avatar Sli
Browse files
Options

pedagogy: wrap all css inside a class named pedagogy to avoid name clashes

parent c15ea345
Pipeline #1898 failed with stage
    in 60 minutes and 4 seconds
    Hide whitespace changes
    Inline Side-by-side
    Showing with 390 additions and 388 deletions
    core/static/core/style.scss
    View file @ fd1f89de
    ......@@ -1683,392 +1683,391 @@ $pedagogy-light-blue: #caf0ff;
    $pedagogy-white-text: #f0f0f0;
    .pedagogy {
    &.star-not-checked {
    color : #f7f7f7;
    margin-bottom: 0px;
    margin-top: 0px;
    }
    &.star-checked {
    color: $pedagogy-orange;
    margin-bottom: 0px;
    margin-top: 0px;
    }
    font-family: "Fira Sans";
    @media screen and (max-width: $large-devices){
    &.star-not-checked {
    margin-left: 5px;
    margin-right: 5px;
    color : #f7f7f7;
    margin-bottom: 0px;
    margin-top: 0px;
    }
    &.star-checked {
    margin-left: 5px;
    margin-right: 5px;
    color: $pedagogy-orange;
    margin-bottom: 0px;
    margin-top: 0px;
    }
    }
    }
    #dynamic_view {
    font-family: "Fira Sans";
    font-size: 1.1em;
    table {
    }
    td {
    text-align: center;
    border: none;
    }
    }
    #search_form {
    font-family: "Fira Sans";
    margin: 0px;
    width: 100%;
    .input-search {
    background: $pedagogy-light-blue;
    width: 300px;
    height: 21px;
    }
    .button-search {
    background: $pedagogy-orange;
    color: white;
    font-weight: bold;
    margin-left: 20px;
    }
    .radio-guide input[type="radio"],input[type="checkbox"] {
    display:none;
    }
    .radio-guide {
    margin-top: 10px;
    color: white;
    }
    .radio-guide label {
    display:inline-block;
    background-color: $pedagogy-blue;
    padding: 10px 20px;
    font-family:Arial;
    font-size:16px;
    border-radius: 4px;
    }
    .radio-guide input[type="radio"]:checked + label {
    background-color:$pedagogy-orange;
    }
    .radio-guide input[type="checkbox"]:checked + label {
    background-color:$pedagogy-orange;
    }
    .radio-guide label:hover {
    background-color: $pedagogy-hover-blue;
    }
    #radioAUTUMN + label {
    margin-left: 50px;
    }
    }
    #pedagogy {
    font-family: "Fira Sans";
    color: #062f38;
    .uv-quick-info-container {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% auto;
    grid-template-rows: auto auto;
    grid-template-areas: "hours-cm hours-td hours-tp hours-te hours-the" "department credit-type semester . ." ;
    }
    .department {
    grid-area: department;
    }
    .credit-type {
    grid-area: credit-type;
    }
    .semester {
    grid-area: semester;
    }
    .hours-cm {
    grid-area: hours-cm;
    }
    @media screen and (max-width: $large-devices){
    &.star-not-checked {
    margin-left: 5px;
    margin-right: 5px;
    }
    &.star-checked {
    margin-left: 5px;
    margin-right: 5px;
    }
    }
    .hours-td {
    grid-area: hours-td;
    }
    #dynamic_view {
    font-size: 1.1em;
    .hours-tp {
    grid-area: hours-tp;
    }
    table {
    }
    .hours-te {
    grid-area: hours-te;
    }
    td {
    text-align: center;
    border: none;
    }
    .hours-the {
    grid-area: hours-the;
    }
    #leave_comment {
    .leave-comment-grid-container {
    display: grid;
    grid-template-columns: 270px auto;
    grid-template-rows: 100%;
    grid-template-areas: "stars comment";
    #search_form {
    margin: 0px;
    width: 100%;
    @media screen and (max-width: $large-devices){
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
    grid-template-areas: "stars" "comment";
    }
    .input-search {
    background: $pedagogy-light-blue;
    width: 300px;
    height: 21px;
    }
    .ui-accordion-content {
    background-color: $white-color;
    border-color: $pedagogy-orange;
    border-right: none;
    .button-search {
    background: $pedagogy-orange;
    color: white;
    font-weight: bold;
    margin-left: 20px;
    }
    .form-stars {
    grid-area: stars;
    .radio-guide input[type="radio"],input[type="checkbox"] {
    display:none;
    }
    .form-comment {
    grid-area: comment;
    .radio-guide {
    margin-top: 10px;
    color: white;
    }
    .ui-accordion-header {
    background-color: $pedagogy-orange;
    color: $pedagogy-white-text;
    clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
    @media screen and (max-width: $large-devices){
    clip-path: none;
    }
    .radio-guide label {
    display:inline-block;
    background-color: $pedagogy-blue;
    padding: 10px 20px;
    font-family:Arial;
    font-size:16px;
    border-radius: 4px;
    }
    .ui-accordion-header-icon {
    color: $pedagogy-white-text;
    margin-right: 10px;
    .radio-guide input[type="radio"]:checked + label {
    background-color:$pedagogy-orange;
    }
    .input-stars {
    margin-top: 20px;
    .radio-guide input[type="checkbox"]:checked + label {
    background-color:$pedagogy-orange;
    }
    .radio-guide label:hover {
    background-color: $pedagogy-hover-blue;
    }
    input[type="submit"] {
    float: right;
    #radioAUTUMN + label {
    margin-left: 50px;
    }
    }
    .uv-details-container {
    display: grid;
    grid-template-columns: 150px 100px auto;
    grid-template-rows: 156px 1fr;
    grid-template-areas: "grade grade-stars uv-infos" ". . uv-infos";
    #uv_detail {
    color: #062f38;
    @media screen and (max-width: $large-devices){
    grid-template-columns: 50% 50%;
    .uv-quick-info-container {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% auto;
    grid-template-rows: auto auto;
    grid-template-areas: "grade grade-stars" "uv-infos uv-infos";
    grid-template-areas: "hours-cm hours-td hours-tp hours-te hours-the" "department credit-type semester . ." ;
    }
    }
    .grade {
    grid-area: grade;
    color: $pedagogy-white-text;
    background-color: $pedagogy-blue;
    padding-right: 10px;
    > p {
    text-align: right;
    font-weight: bold;
    .department {
    grid-area: department;
    }
    }
    .grade-stars {
    grid-area: grade-stars;
    color: $pedagogy-white-text;
    background-color: $pedagogy-blue;
    font-weight: bold;
    }
    .credit-type {
    grid-area: credit-type;
    }
    .uv-infos {
    grid-area: uv-infos;
    padding-left: 10px;
    }
    .semester {
    grid-area: semester;
    }
    .comment-container {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 156px auto auto;
    grid-template-areas: "grade-block comment" "grade-block info" "comment-end-bar comment-end-bar";
    margin-bottom: 30px;
    margin-top: 10px;
    .hours-cm {
    grid-area: hours-cm;
    }
    @media screen and (max-width: $large-devices){
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "grade-block" "comment" "info" "comment-end-bar"
    .hours-td {
    grid-area: hours-td;
    }
    .grade-block {
    grid-area: grade-block;
    width: 300px;
    .hours-tp {
    grid-area: hours-tp;
    }
    display: grid;
    grid-template-columns: 150px 150px;
    grid-template-rows: auto;
    grid-template-areas: "grade-type grade-stars";
    grid-gap: 15px;
    .hours-te {
    grid-area: hours-te;
    }
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20%, 80% 0);
    align-content: space-evenly;
    .hours-the {
    grid-area: hours-the;
    }
    background-color: $pedagogy-blue;
    #leave_comment {
    .leave-comment-grid-container {
    display: grid;
    grid-template-columns: 270px auto;
    grid-template-rows: 100%;
    grid-template-areas: "stars comment";
    @media screen and (max-width: $large-devices){
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    grid-template-areas: "grade-type grade-stars";
    width: auto;
    clip-path: none;
    @media screen and (max-width: $large-devices){
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
    grid-template-areas: "stars" "comment";
    }
    }
    .grade-type {
    grid-area: grade-type;
    .ui-accordion-content {
    background-color: $white-color;
    border-color: $pedagogy-orange;
    border-right: none;
    }
    > p {
    color: $pedagogy-white-text;
    font-weight: bold;
    text-align: right;
    }
    .form-stars {
    grid-area: stars;
    }
    .grade-stars {
    grid-area: grade-stars;
    .form-comment {
    grid-area: comment;
    }
    }
    .comment {
    grid-area: comment;
    .ui-accordion-header {
    background-color: $pedagogy-orange;
    color: $pedagogy-white-text;
    clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    grid-template-areas: "anchor" "markdown";
    @media screen and (max-width: $large-devices){
    clip-path: none;
    }
    }
    @media screen and (max-width: $large-devices){
    border-left: solid;
    border-right: solid;
    border-color: $pedagogy-blue;
    .ui-accordion-header-icon {
    color: $pedagogy-white-text;
    margin-right: 10px;
    }
    .anchor {
    grid-area: anchor;
    text-align: right;
    margin-right: 15px;
    .input-stars {
    margin-top: 20px;
    }
    .markdown {
    grid-area: markdown;
    overflow: scroll;
    margin-top: 0px;
    margin-right: 0px;
    padding: 10px;
    padding-left: 40px;
    text-align: justify;
    input[type="submit"] {
    float: right;
    }
    }
    .info {
    grid-area: info;
    margin-bottom: 0px;
    .uv-details-container {
    display: grid;
    grid-template-columns: 150px 100px auto;
    grid-template-rows: 156px 1fr;
    grid-template-areas: "grade grade-stars uv-infos" ". . uv-infos";
    @media screen and (max-width: $large-devices){
    border-left: solid;
    border-right: solid;
    border-color: $pedagogy-blue;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto;
    grid-template-areas: "grade grade-stars" "uv-infos uv-infos";
    }
    }
    .status-reported {
    color: red;
    float: left;
    padding-left: 10px;
    padding-bottom: 10px;
    }
    .grade {
    grid-area: grade;
    color: $pedagogy-white-text;
    background-color: $pedagogy-blue;
    padding-right: 10px;
    .actions {
    float: right;
    > p {
    text-align: right;
    font-weight: bold;
    }
    }
    .comment-end-bar {
    grid-area: comment-end-bar;
    .grade-stars {
    grid-area: grade-stars;
    color: $pedagogy-white-text;
    background-color: $pedagogy-blue;
    font-weight: bold;
    }
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 2.5em;
    grid-template-areas: "report date author";
    .uv-infos {
    grid-area: uv-infos;
    padding-left: 10px;
    }
    background-color: $pedagogy-blue;
    margin-top: 0px;
    .comment-container {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 156px auto auto;
    grid-template-areas: "grade-block comment" "grade-block info" "comment-end-bar comment-end-bar";
    margin-bottom: 30px;
    margin-top: 10px;
    @media screen and (max-width: $large-devices){
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "author" "date" "report"
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "grade-block" "comment" "info" "comment-end-bar"
    }
    .report {
    grid-area: report;
    padding-top: 6px;
    padding-left: 20px;
    background-color: $pedagogy-orange;
    clip-path: polygon(0 0%, 0 200%, 300px 200%, 250px 0);
    .grade-block {
    grid-area: grade-block;
    width: 300px;
    display: grid;
    grid-template-columns: 150px 150px;
    grid-template-rows: auto;
    grid-template-areas: "grade-type grade-stars";
    grid-gap: 15px;
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20%, 80% 0);
    align-content: space-evenly;
    background-color: $pedagogy-blue;
    @media screen and (max-width: $large-devices){
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    grid-template-areas: "grade-type grade-stars";
    width: auto;
    clip-path: none;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 0px;
    }
    & a {
    color: $pedagogy-white-text;
    font-weight: bold;
    .grade-type {
    grid-area: grade-type;
    > p {
    color: $pedagogy-white-text;
    font-weight: bold;
    text-align: right;
    }
    }
    .grade-stars {
    grid-area: grade-stars;
    }
    }
    .date {
    grid-area: date;
    color: $pedagogy-white-text;
    .comment {
    grid-area: comment;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    grid-template-areas: "anchor" "markdown";
    @media screen and (max-width: $large-devices){
    text-align: center;
    border-left: solid;
    border-right: solid;
    border-color: $pedagogy-blue;
    }
    .anchor {
    grid-area: anchor;
    text-align: right;
    margin-right: 15px;
    }
    .markdown {
    grid-area: markdown;
    overflow: scroll;
    margin-top: 0px;
    margin-right: 0px;
    padding: 10px;
    padding-left: 40px;
    text-align: justify;
    }
    }
    .author {
    grid-area: author;
    justify-self: right;
    padding-right: 30px;
    .info {
    grid-area: info;
    margin-bottom: 0px;
    a {
    color: $pedagogy-white-text;
    font-weight: bold;
    @media screen and (max-width: $large-devices){
    border-left: solid;
    border-right: solid;
    border-color: $pedagogy-blue;
    }
    a:hover {
    color: $pedagogy-light-blue;
    .status-reported {
    color: red;
    float: left;
    padding-left: 10px;
    padding-bottom: 10px;
    }
    .actions {
    float: right;
    }
    }
    .comment-end-bar {
    grid-area: comment-end-bar;