administraCursos/resources/sass/app.scss

// Fonts
// @import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// Material Design
@import '@material/layout-grid/mdc-layout-grid';
@import '@material/typography/mdc-typography';
@import '@material/button/mdc-button';
@import '@material/icon-button/mdc-icon-button';
@import '@material/data-table/mdc-data-table';

body {
    padding-top: 80px;
}

/* Rules for sizing the icon. */
.material-icons {
    .md-18 { font-size: 18px; }
    .md-24 { font-size: 24px; }
    .md-36 { font-size: 36px; }
    .md-48 { font-size: 48px; }
}


.landing-page-grid {
    // @include mdc-layout-grid-inner('desktop', 10vw, 32px);
    @media screen and (min-width: map-get($mdc-layout-grid-breakpoints, desktop)) {
        width: 80%;
        margin: auto 10%;
    }
    text-align: center;
    * {
        margin: 8px;
    }
}
.dashboard-grid {
    @media screen and (min-width: map-get($mdc-layout-grid-breakpoints, desktop)) {
        width: 80%;
        margin: auto 10%;
        text-align: center;
    }
}

// MDC card media
#home-button-course {
    background-image: url('/images/course_1312478.png');
}
#home-button-professor {
    background-image: url('/images/chalkboard-teacher-solid.png');
}
#home-button-dashboard {
    background-image: url('/images/file-alt-regular.png');
}
#dash-button-csv {
    background-image: url('/images/file-csv.png');
}
#dash-button-schedule {
    background-image: url('/images/calendar-alt.png')
}


/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.center-text {
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

// Fixes column headers in place
// Apply to table wrapper
.table-fixed-col-head {
    overflow-y: scroll;
    table thead th{
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        background: white;
    }
}

// Fixes row headers in place
// Apply to table wrapper
.table-fixed-row-head {
    overflow-x: scroll;
    table tbody th {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        background: white;
    }
    table thead th:first-child {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        background: white;
        z-index: 1;
    }
}


.mdc-data-table {
    th {
        font-weight: bold;
    }
    .mdc-button {
        position: inherit;
    }
    .mdc-icon-button {
        position: inherit;
    }
}
.mdc-data-table__header-cell {
    font-weight: bold;
}


.table--fit-screen {
    height: 80vh;
}

.course-sections-table {
    @include mdc-data-table-column-widths(10% 10% 40% 10% 10% 10%);
}

#prof-table {
    height: 80vh;
}

#course-table {
    @include mdc-data-table-column-widths(20px 50vw);
}

.ellipsis {
    @include mdc-typography-overflow-ellipsis;
}

#edit-course-btn {
    position: sticky;
    right: 0;
}

[onclick] {
    cursor: pointer;
}

[id|="delete-confirm"] {
    padding-top: 4px;
}