| Current Path : /var/www/html/universidad.bristol.com.py/course/format/remuiformat/scss/ |
| Current File : /var/www/html/universidad.bristol.com.py/course/format/remuiformat/scss/list-layout.scss |
// List Layout
// Desktops, large screens
&.editing {
.remui-format-list {
.sections {
.section {
.side {
margin: 0;
&.left {
// padding: 0.5rem 0!important;
align-items: center;
// gap: 4px;
@media (max-width:1200px) {
flex-direction: column;
align-items: start;
}
.section-handle {
position: absolute;
top: 5px;
left: 5px;
}
}
&.right {
@media (max-width:$screen-900) {
width: 100%;
}
gap: $gap-8;
justify-content: space-between;
}
}
.sectionname {
display: flex;
align-items: center;
}
.card-title {
.fa-angle-up,
.fa-angle-down {
margin-right: 2%;
&:hover {
cursor: pointer;
}
}
}
}
#changenumsections {
width: 100%;
}
}
&.one-section-format {
.one-section-format-details-page-wrapper {
.course-section-header {
flex-direction: row;
}
}
}
}
}
.modtype_label {
.contentwithoutlink {
max-height: 100%;
padding: 0px;
}
.activity-badges{
.badge{
white-space: nowrap !important;
}
}
}
&:not(.editing) {
.remui-format-list {
.sections {
.section {
.side {
&.left {
// padding: 0.5rem 0!important;
align-items: center;
gap: $gap-4;
// .sectionname {
// order: 2;
// }
// .sectionbadges {
// order: 3;
// }
@media (max-width:$screen-900) {
flex-direction: column;
align-items: flex-start;
}
}
&.right {
margin-top: 0;
gap: $gap-24;
@media (max-width:$screen-900) {
width: 100%;
}
}
}
.sectionname {
.panel-title {
.float-right {
padding-right: 10px;
}
}
}
}
}
&.one-section-format {
.sections {
.section {
.sectionname {
.panel-title {
.float-right {
padding-right: 0;
}
}
}
}
}
}
}
}
// Styling for list format
// #list-container {
// margin-top: 48px;
// }
.remui-format-list {
.summary,.course-section-summary-wrapper{
@include frmt-font-styling(16px,24px,400);
color: $paragraph-color;
}
.sections {
list-style: none;
display: flex;
flex-direction: column;
gap: $gap-24;
& .section {
// padding: 24px;
.side {
&.left {
@media (max-width:$sm-screen-bp) {
gap: $gap-24;
}
}
&.right {}
}
&:not(#section-0) {
background: $white;
// overflow: hidden;
border-radius: $border-radius-8;
border: $border-height solid $light-border;
}
.content {
.panel-title,
h3 a {
margin: 0px;
color: $heading-color;
@include frmt-font-styling(24px, 32px, 700);
}
.course-section-summary-wrapper {
display: flex;
flex-direction: column;
gap: $gap-8;
padding: $pad-24;
& .no-overflow {
@include frmt-font-styling(14px, 22px, 400);
color: $paragraph-color;
}
}
}
.course-section-header {
justify-content: space-between;
align-items: center;
gap: $gap-24;
@media (max-width:$screen-900) {
flex-direction: column;
align-items: flex-start;
}
.sectionheading {
color: $heading-color;
@include frmt-font-styling(24px, 32px, 700);
}
}
&.main {
// background: transparent;
// border: 0;
// box-shadow: none;
// padding: 0;
}
// Highliging current section
.highlight {
position: absolute;
top: 0;
width: 3px;
bottom: 0;
left: 0;
}
width: 100%;
// Section contents.
.card-footer {
background: transparent;
}
// Indent classes for activities
ul.section {
padding: 0;
.mod-indent-1 {
width: 35px;
}
.mod-indent-2 {
width: 70px;
}
.mod-indent-3 {
width: 105px;
}
.mod-indent-4 {
width: 140px;
}
.mod-indent-5 {
width: 175px;
}
.mod-indent-6 {
width: 210px;
}
.mod-indent-7 {
width: 245px;
}
.mod-indent-8 {
width: 280px;
}
.mod-indent-9 {
width: 315px;
}
.mod-indent-10 {
width: 350px;
}
.mod-indent-11 {
width: 385px;
}
.mod-indent-12 {
width: 420px;
}
.mod-indent-13 {
width: 455px;
}
.mod-indent-14 {
width: 490px;
}
.mod-indent-15 {
width: 525px;
}
.mod-indent-16 {
width: 560px;
}
}
.right.side {
width: max-content;
.wdm-add-new-section {
white-space: nowrap
}
}
.section_action_menu.ml-auto {
margin: unset !important;
}
}
}
// Styling for main course page where all sections are listed.
&.all-section-format {
ul.sections {
li.section {
// Custom section content toggle icon.
.toggle-icon {
cursor: pointer;
transform: rotate(-90deg);
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: 0 !important;
&::before {
display: flex;
transition: all 0.5s ease;
font-size: 1.2rem;
}
}
// Rotating toggle icon when section is collapsed
&.collapsed {
.toggle-icon {
&::before {
transform: rotate(180deg);
}
}
}
.content {
ul.section {
border: unset !important;
border-radius: unset !important;
border-top: $border-height solid $light-border !important;
.activity {
padding: 0px;
.activitytitle {
gap: $gap-24;
}
}
}
}
}
}
}
// common activity changes in list view
.activities-list,
.card-footer {
padding: unset;
ul.section {
padding: $pad-24 !important;
li:not(:last-child) {
margin-bottom: $margin-16;
}
.activity{
.activitytitle {
gap: $gap-24;
@media (max-width:$sm-screen-bp) {
flex-direction: column;
}
}
.activity-info.mt-1 {
@media (max-width:$tb-screenp-bp) {
margin-top: $margin-24 !important;
}
}
.description{
.availabilityinfo{
margin: unset;
margin-top: $margin-8;
}
}
}
}
}
// Styling for section when single section is opened.
&.one-section-format {
&.all-section {
.sections {
.section:not(#section-0) {
ul.section {
display: none;
}
& .content {
display: flex;
flex-direction: column;
gap: $gap-16;
padding: $pad-24;
// .course-section-header{
// padding: $pad-24;
// }
}
}
}
}
.one-section-format-details-page-wrapper {
.section {
.course-section-summary-wrapper{
padding: $pad-24;
}
.content {
// padding-top: 24px;
}
}
}
// Single section activity list styling.
.activities-list {
ul.section {
margin: 0;
border: unset !important;
border-radius: unset !important;
border-top: $border-height solid $light-border !important;
.activity {
padding: 0px !important;
&:last-child {
border-bottom: 0 !important;
}
}
}
.section-modchooser {
// padding-top: 10px;
margin: 0px;
&.mb-3{
margin-bottom: 0px !important;
}
}
}
.section_availability.course-description-item{
padding:0px 0px $pad-24 0px;
}
}
.section_availability.course-description-item{
padding:0px $pad-24 $pad-24 $pad-24 ;
color: $paragraph-color;
@include frmt-font-styling(12px,15px,400);
.availabilityinfo{
background-color: $small-ui-bg;
border-radius: $border-radius-4;
padding: $pad-8;
.description-inner{
ul li{
margin-top: 4px;
}
}
}
strong{
@include frmt-font-styling(12px,15px,600);
}
}
}