kj
/
lms-app
1
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Angular LMS app
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
Den här utvecklingskatalogen är arkiverad. Du kan se filer och klona katalogen, men inte öppna ärenden eller genomföra push- eller pull-förfrågningar.
78 Incheckningar
1 Gren
605 KiB
 
 
 
 
Träd: 84c1970d78
Grenar Taggar
${ item.name }
Skapa branchen ${ searchTerm }
från '84c1970d78'
${ noResults }
lms-app/src/app/reusable-components/class-card-list/class-card-list.component.scss

114 rader
2.3 KiB
Rå Blame Historik 

  1. .subject-list {

  2.     position: relative;

  3.     width: 100%;

  4.     margin: 0 auto;

  5.     list-style: none;

  6. 

  7.     @media screen and (min-width: 1023px) {

  8.         width: 33%;

  9.         margin: 0;

  10.         max-height: 50vh;

  11.         position: fixed;

  12.         right: 2%;

  13.         top: calc(50vh - 30px);

  14.         background-color: white;

  15.         border-radius: 30px;

  16.         padding: 15px;

  17.         box-shadow: 0px 0px 10px rgba(black, 0.3);

  18.         z-index: 1;

  19.         overflow: auto;

  20.     }

  21. 

  22.     li {

  23.         background-color: white;

  24.         border-radius: 15px;

  25.         overflow: hidden;

  26.         display: flex;

  27.         align-items: center;

  28.         padding: 15px 10px;

  29.         margin-top: 15px;

  30.         box-shadow: 0px 0px 5px -2px var(--black);

  31.         position: relative;

  32. 

  33.         &::before {

  34.             content: '';

  35.             position: absolute;

  36.             left: 0;

  37.             top: 0;

  38.             width: 7px;

  39.             height: 100%;

  40.             background-color: transparent;

  41.         }

  42. 

  43.         &.attended::before {

  44.             background-color: var(--teal-green);

  45.         }

  46. 

  47.         &.absent::before {

  48.             background-color: var(--danger);

  49.         }

  50. 

  51.         &.late::before {

  52.             background-color: rgba(orange, 0.5);

  53.         }

  54.     }

  55. 

  56.     .schedule {

  57.         width: 80px;

  58.         padding-right: 15px;

  59.         text-align: center;

  60.     }

  61. 

  62.     .subject {

  63.         flex-grow: 1;

  64.         border-left: 1px solid #cecece;

  65.         padding-left: 15px;

  66.         overflow: hidden;

  67. 

  68.         p {

  69.             margin-top: 5px;

  70.         }

  71.     }

  72. 

  73.     .view-button {

  74.         height: 33px;

  75.         border-radius: 5px;

  76.         border: 0px;

  77.         background-color: var(--teal-green);

  78.         color: white;

  79.         font-size: 14px;

  80.         width: 80px;

  81.         margin-left: 10px;

  82.     }

  83. 

  84.     label {

  85.         font-size: 14px;

  86.         color: var(--black);

  87.         font-weight: 500;

  88.     }

  89. 

  90.     p {

  91.         font-size: 13px;

  92.         color: var(--dark-grey);

  93.         margin-top: 2px;

  94.         white-space: nowrap;

  95.         text-overflow: ellipsis;

  96.         overflow: hidden;

  97. 

  98.         img {

  99.             width: 20px;

  100.             height: 20px;

  101.             border-radius: 50%;

  102.             overflow: hidden;

  103.             object-fit: cover;

  104.             object-position: top;

  105.             vertical-align: middle;

  106.         }

  107. 

  108.         span {

  109.             vertical-align: middle;

  110.             margin-left: 3px;

  111.         }

  112.     }

  113. }