Index: lams_learning/web/css/components-learner.scss =================================================================== diff -u -r0748e294672cacb5881d7f3f1d7254f0be9005a0 -r21aea119939539ce08a947354f84cb7dc6980d38 --- lams_learning/web/css/components-learner.scss (.../components-learner.scss) (revision 0748e294672cacb5881d7f3f1d7254f0be9005a0) +++ lams_learning/web/css/components-learner.scss (.../components-learner.scss) (revision 21aea119939539ce08a947354f84cb7dc6980d38) @@ -1,6 +1,22 @@ @import "../../../lams_central/web/css/components.scss"; @import "_lams_variables.scss"; + +@media (width <= 768px) { + .p-3 { + padding: 0rem !important; + } + .mb-3 { + margin-bottom: 0.3rem !important; + } +} + +@media (width <= 768px) { + .component-page-wrapper .component-page-content { + padding: 0.5rem 1rem 1rem 1rem; + } +} + .component-page-wrapper h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { color: var(--bs-gray-dark); } @@ -29,131 +45,146 @@ font-size: 1rem; } -.component-page-wrapper #hamb { - font-size: 2rem; - color: var(--bs-blue); - font-size: 1.8rem; - margin-bottom: -0.5rem; -} - -.component-page-wrapper .offcanvas-body { - text-align: -webkit-center; - text-align: -moz-center; - overflow-x: hidden; -} - .component-page-wrapper .component-page-content #header { - box-shadow: 0px 1px 0px var(--bs-gray-400); + padding: 2.8rem 2rem 0.2rem; + margin: -2rem -2rem 0.5rem; + box-shadow: 0px 1px 0px var(--bs-gray-300); + + >div:first-child { + margin-top: -0.35rem; + margin-bottom: 0.35rem; + } + + #lesson-name { + margin-left: 3rem; + margin-top: .2rem; + } + + .btn { + background-color: var(--bs-gray-200); + border-radius: 1.25rem; + box-shadow: 0px 3px 6px var(--bs-gray-100); + } + .btn:hover { + background-color: var(--bs-gray-300) !important; + } + .btn:focus { + box-shadow: 0 0 0 0.20rem rgba(99,99,99,.5); + /*border: var(--bs-btn-border-width) solid var(--bs-btn-hover-border-color);*/ + } + + #hamb { + font-size: 1.8rem; + margin: -0.2rem 0 0.3rem -0.5rem; + padding: 0.25rem 0.75rem; + color: var(--bs-gray-700); + } + + .top-menu { + margin: -0.6rem -0.5rem 0.6rem 0; + min-height: 3.5em; + + .btn { + margin-left: 0.75rem; + } + + #progress-bar-widget { + min-width: 11rem; + padding: 0rem 0.85rem; + font-size: 0.90rem; + + .progress { + height: .5rem; + background-color: var(--bs-gray-400); + } + + .progress .progress-bar { + background-color: var(--bs-blue); + } + } + + #return-to-index { + padding: 1.275rem 1.3rem; + opacity: 1; + } + } } -.component-page-wrapper .component-page-content #header>div:first-child { - margin-top: -0.35rem; - margin-bottom: 0.35rem; -} - -.component-page-wrapper .component-page-content #lesson-name { - margin-left: 1rem; - margin-top: .6rem; -} - -.component-page-wrapper .top-menu #progress-bar-widget { - min-width: 10rem; - margin: 0rem 1.5rem; - padding: 0; -} - -.component-page-wrapper .top-menu #progress-bar-widget .progress { - height: .5rem; - background-color: var(--bs-gray-400); -} - -.component-page-wrapper .top-menu #progress-bar-widget .progress .progress-bar { - background-color: var(--bs-blue); -} - -.component-page-wrapper .top-menu #return-to-index { - margin-top: 0.8rem; -} - - - - -.component-page-wrapper .offcanvas { +.component-page-wrapper #component-offcanvas { text-align: center; transition: all .3s ease; -} - -.component-page-wrapper .offcanvas .lams-logo { - display: block; - width: 3.6rem; - margin-bottom: 2rem; -} - - - - -.component-page-wrapper .offcanvas { top: 4.5rem; width: 20rem; max-width: 70rem; border-radius: 0 1.2rem 0 0; border: thin solid var(--bs-gray-400); box-shadow: 0px 3px 6px var(--bs-gray-400); -} -.component-page-wrapper .offcanvas .offcanvas-title { - font-weight: 500; - color: rgb(5, 112, 213); -} + .offcanvas-body { + text-align: -webkit-center; + text-align: -moz-center; + overflow-x: hidden; + } -.component-page-wrapper .offcanvas .offcanvas-bar { - background-color: var(--bs-gray-200); - border-radius: 1.2rem; -} + .lams-logo { + display: block; + width: 3.6rem; + margin-bottom: 2rem; + } -.component-page-wrapper .offcanvas.active { - left: 1rem; -} + .offcanvas-title { + font-weight: 500; + color: rgb(5, 112, 213); + } -.component-page-wrapper .offcanvas .progress-bar-items > li a { - color: var(--bs-gray-dark); -} + .offcanvas-bar { + background-color: var(--bs-gray-200); + border-radius: 1.2rem; + } -.component-page-wrapper .offcanvas .progress-bar-items > li > .progress-bar-icon { - margin-right: .5rem; -} - -.component-page-wrapper .offcanvas .progress-bar-items > li.progress-bar-item-incomplete, -.component-page-wrapper .offcanvas .progress-bar-items > li.progress-bar-item-incomplete > .progress-bar-icon { - color: var(--bs-gray-700); -} - -.component-page-wrapper .offcanvas .progress-bar-items > li.progress-bar-item-complete, -.component-page-wrapper .offcanvas .progress-bar-items > li.progress-bar-item-complete > .progress-bar-icon { - color: var(--bs-green); -} - -#component-offcanvas .list-group-item { - padding: 0; - - .icon { - display: flex; - align-items: center; - align-self: stretch; - width: 35px; - background-color: rgba(211,211,211,0.17); - padding: 22px 30px 22px 15px; - margin-left: 12px; + .progress-bar-items > li a { + color: var(--bs-gray-dark); } - .col { - padding-left: 0.2rem; - padding-right: 1rem; + .progress-bar-items > li > .progress-bar-icon { + margin-right: .5rem; } + + .progress-bar-items > li.progress-bar-item-incomplete, + .progress-bar-items > li.progress-bar-item-incomplete > .progress-bar-icon { + color: var(--bs-gray-700); + } + + .progress-bar-items > li.list-group-item-success, + .progress-bar-items > li.list-group-item-success > .progress-bar-icon { + color: var(--bs-green); + } + + .list-group-item { + padding: 0; + cursor: default; + + .icon { + display: flex; + align-items: center; + align-self: stretch; + width: 35px; + background-color: rgba(211,211,211,0.17); + padding: 22px 30px 22px 15px; + margin-left: 12px; + } + + .col { + padding-left: 0.2rem; + padding-right: 1rem; + } + } } .component-page-wrapper .activity-bottom-buttons { margin-top: 1rem; + padding-top: 1rem; + border-top: $border-thin-grey; display: flex; flex-direction: row-reverse; clear: both; @@ -163,23 +194,27 @@ box-shadow: 0px 3px 6px var(--bs-gray-400); } +@media (width <= 768px) { + .component-page-wrapper .btn { + font-size: 12px; + } +} + .component-page-wrapper .btn:focus { box-shadow: var(--bs-btn-focus-box-shadow); } -.component-page-wrapper #progress-bar-widget { - font-size: 0.90rem; -} - .wave-orange { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2Q1NmExMSIgd2lkdGg9IjEyNDAiIGhlaWdodD0iMzA0IiAgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBvcGFjaXR5PSIuMTUiIGQ9Ik0wIDBoMTIzOC4wOTV2Mjk2LjQ3N2MtMzQzLjQ0OCAyNi4xNjEtMzA1LjgxNi0yNC44NjEtNjE5LjA0OC0xNy45MDdTMjkxLjk5IDMxNS43ODggMCAyNzguNTdWMHoiLz48cGF0aCBkPSJNMTI0MCAwSC45NTN2MjY0LjgwNGM3Ni41NjYtNy4zNjUgMTQ2Ljg0NC0xOC4xMiAzMjcuMzUxLTcuMzY1czI0NC4yNDUgNTMuNzcxIDUwNi42MjggMTIuOTkxYzE3NC45MjItMjcuMTg3IDMwOS45NDUtMjUuMTg2IDQwNS4wNjggNi4wMDF6IiBmaWxsPSIjZjkzIi8+PC9zdmc+"); + background-image: url("data:image/svg+xml;utf8,"); text-align: center; color: white; background-size: cover; background-repeat: no-repeat; background-position: top; padding: 5% 0 12% 0; - margin: -16px + margin: -16px; + border-top-left-radius: 1.25rem; + border-top-right-radius: 1.25rem; } .wave-blue { @@ -190,7 +225,9 @@ background-repeat: no-repeat; background-position: top; padding: 5% 0 12% 0; - margin: -16px + margin: -16px; + border-top-left-radius: 1.25rem; + border-top-right-radius: 1.25rem; } .wave-purple { @@ -201,7 +238,9 @@ background-repeat: no-repeat; background-position: top; padding: 5% 0 12% 0; - margin: -16px + margin: -16px; + border-top-left-radius: 1.25rem; + border-top-right-radius: 1.25rem; } .wave-green { @@ -212,7 +251,9 @@ background-repeat: no-repeat; background-position: top; padding: 5% 0 12% 0; - margin: -16px + margin: -16px; + border-top-left-radius: 1.25rem; + border-top-right-radius: 1.25rem; } .wave-pink { @@ -223,7 +264,9 @@ background-repeat: no-repeat; background-position: top; padding: 5% 0 12% 0; - margin: -16px + margin: -16px; + border-top-left-radius: 1.25rem; + border-top-right-radius: 1.25rem; } .wave-red { @@ -234,7 +277,9 @@ background-repeat: no-repeat; background-position: top; padding: 5% 0 12% 0; - margin: -16px + margin: -16px; + border-top-left-radius: 1.25rem; + border-top-right-radius: 1.25rem; } .lcard { @@ -254,6 +299,14 @@ @extend .text-bg-secondary; } +@media (width <= 768px) { + + .lcard > .card-header { + font-size: 14px; + } + +} + .font-size-init { font-size: initial; } @@ -316,6 +369,14 @@ border-top: 1px solid #ddd; padding: 12px; } + +@media (width <= 768px) { + .div-hover>div { + padding: 3px; + } + +} + .div-hover>div:hover{ background-color: var(--bs-gray-200); } @@ -333,4 +394,4 @@ border-bottom: 1px solid $gray-lighter; border-top-right-radius: $border-radius-small; border-top-left-radius: $border-radius-small; -} \ No newline at end of file +}