Без опису

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. // Fonts
  2. // @import url('https://fonts.googleapis.com/css?family=Nunito');
  3. // Variables
  4. @import "variables";
  5. // Bootstrap
  6. @import "~bootstrap/scss/bootstrap";
  7. // Material Design
  8. // @import "material-components-web/material-components-web";
  9. @import "@material/typography/mdc-typography";
  10. @import "@material/layout-grid/mdc-layout-grid";
  11. @import "@material/elevation/mdc-elevation";
  12. @import "@material/button/mdc-button";
  13. @import "@material/icon-button/mdc-icon-button";
  14. @import "@material/checkbox/mdc-checkbox";
  15. @import "@material/card/mdc-card";
  16. @import "@material/select/mdc-select";
  17. @import "@material/list/mdc-list";
  18. @import "@material/textfield/mdc-text-field";
  19. @import "@material/textfield/helper-text/mdc-text-field-helper-text";
  20. @import "@material/data-table/mdc-data-table";
  21. body {
  22. padding-top: 80px;
  23. overflow-x: hidden;
  24. }
  25. /* Rules for sizing the icon. */
  26. .material-icons {
  27. .md-18 {
  28. font-size: 18px;
  29. }
  30. .md-24 {
  31. font-size: 24px;
  32. }
  33. .md-36 {
  34. font-size: 36px;
  35. }
  36. .md-48 {
  37. font-size: 48px;
  38. }
  39. }
  40. .landing-page-grid {
  41. // @include mdc-layout-grid-inner('desktop', 10vw, 32px);
  42. @media screen and (min-width: map-get($mdc-layout-grid-breakpoints, desktop)) {
  43. width: 80%;
  44. margin: auto 10%;
  45. }
  46. text-align: center;
  47. * {
  48. margin: 8px;
  49. }
  50. }
  51. .dashboard-grid {
  52. @media screen and (min-width: map-get($mdc-layout-grid-breakpoints, desktop)) {
  53. width: 80%;
  54. margin: auto 10%;
  55. }
  56. text-align: center;
  57. }
  58. // MDC card media
  59. #home-button-course {
  60. background-image: url("/images/course_1312478.png");
  61. }
  62. #home-button-professor {
  63. background-image: url("/images/chalkboard-teacher-solid.png");
  64. }
  65. #home-button-dashboard {
  66. background-image: url("/images/file-alt-regular.png");
  67. }
  68. #dash-button-csv {
  69. background-image: url("/images/file-csv.png");
  70. }
  71. #dash-button-schedule {
  72. background-image: url("/images/calendar-alt.png");
  73. }
  74. /* Rules for using icons as black on a light background. */
  75. .material-icons.md-dark {
  76. color: rgba(0, 0, 0, 0.54);
  77. }
  78. .material-icons.md-dark.md-inactive {
  79. color: rgba(0, 0, 0, 0.26);
  80. }
  81. /* Rules for using icons as white on a dark background. */
  82. .material-icons.md-light {
  83. color: rgba(255, 255, 255, 1);
  84. }
  85. .material-icons.md-light.md-inactive {
  86. color: rgba(255, 255, 255, 0.3);
  87. }
  88. .center-text {
  89. vertical-align: middle;
  90. text-align: center;
  91. white-space: nowrap;
  92. }
  93. // Fixes column headers in place
  94. // Apply to table wrapper
  95. .table-fixed-col-head {
  96. overflow-y: scroll;
  97. table thead th {
  98. position: -webkit-sticky;
  99. position: sticky;
  100. top: 0;
  101. background: white;
  102. }
  103. }
  104. // Fixes row headers in place
  105. // Apply to table wrapper
  106. .table-fixed-row-head {
  107. overflow-x: scroll;
  108. table tbody th {
  109. position: -webkit-sticky;
  110. position: sticky;
  111. left: 0;
  112. background: white;
  113. }
  114. table thead th:first-child {
  115. position: -webkit-sticky;
  116. position: sticky;
  117. left: 0;
  118. background: white;
  119. z-index: 1;
  120. }
  121. }
  122. .mdc-data-table {
  123. th {
  124. font-weight: bold;
  125. }
  126. .mdc-button {
  127. position: inherit;
  128. }
  129. .mdc-icon-button {
  130. position: inherit;
  131. }
  132. }
  133. .mdc-data-table__header-cell {
  134. font-weight: bold;
  135. }
  136. .table--fit-screen {
  137. height: 80vh;
  138. width: 96vw;
  139. }
  140. .course-sections-table {
  141. @include mdc-data-table-column-widths(10% 10% 40% 10% 10% 10%);
  142. }
  143. .ellipsis {
  144. @include mdc-typography-overflow-ellipsis;
  145. }
  146. #edit-course-btn {
  147. position: sticky;
  148. right: 0;
  149. }
  150. .dropdown-submenu {
  151. position: relative;
  152. }
  153. .dropdown-submenu > a:after {
  154. content: "\f0da";
  155. float: right;
  156. border: none;
  157. font-family: "FontAwesome";
  158. }
  159. .dropdown-submenu > .dropdown-menu {
  160. top: 0;
  161. left: 100%;
  162. margin-top: 0px;
  163. margin-left: 0px;
  164. }
  165. [onclick] {
  166. cursor: pointer;
  167. }
  168. [id|="delete-confirm"] {
  169. padding-top: 4px;
  170. }
  171. h1 {
  172. @include mdc-typography(headline1);
  173. font-size: 4.25rem;
  174. }
  175. h2 {
  176. @include mdc-typography(headline2);
  177. }
  178. h3 {
  179. @include mdc-typography(headline3);
  180. }
  181. h4 {
  182. @include mdc-typography(headline4);
  183. }
  184. h5 {
  185. @include mdc-typography(headline5);
  186. }
  187. h6 {
  188. @include mdc-typography(headline6);
  189. }
  190. button {
  191. @include mdc-typography(button);
  192. }
  193. p {
  194. @include mdc-typography(body1);
  195. }