@csdsesystems/central-styles 0.1.0 → 1.0.2

package/sass/components/_calendar.scss

@@ -0,0 +1,301 @@
+.fc table td {
+		background-color: #FFF;
+}
+
+.fc-event,
+.fc-agenda .fc-event-time,
+.fc-event a {
+	padding: 4px 6px;
+	background-color: transparent;
+	border: none !important;
+	margin-bottom: 5px;
+	color: $grey;
+}
+
+.fc-button {
+	text-transform: capitalize;    
+}
+
+.fc-toolbar {
+		margin-bottom: 0;
+
+		h2 {
+				margin-top: 4px;
+		}
+}
+
+.fc-state-active {
+	background-color: $navy;
+	border-color: $navy;
+}
+
+.fc-event {
+		padding: 6px;
+}
+
+.fc-event.alert-orange:hover {
+	color: darken($orange, 21%);
+}
+
+.fc-event.alert-pink:hover {
+	color: darken($pink, 21%);
+}
+
+.fc-event.alert-info:hover {
+	color: darken($info, 21%);
+}
+
+.fc-event.alert-red:hover {
+	color: darken($red, 21%);
+}
+
+.fc-event.alert-grey:hover {
+	color: darken($grey, 21%);
+}
+
+.fc-event.alert-grey {
+	opacity: 0.5;
+
+		.label {
+				opacity: 0.4;
+		}
+}
+
+.fc-past {
+	background-color: $lightest-grey;
+	opacity: 0.4;
+}
+
+.fc-unthemed .fc-today {
+	background: lighten($grey, 50%);
+	font-weight: bold;
+}
+
+.fc-row .fc-content-skeleton td, 
+.fc-row .fc-helper-skeleton td {
+	background: none !important;
+}
+
+.external-event {
+	cursor: auto;
+}
+
+.fc-toolbar {
+	.fc-left, .fc-right {
+		margin-bottom: 10px;
+	}
+}
+
+
+/* Datepicker */
+
+.datepicker {
+	background: #fff;
+	border-radius: 0px;
+	//box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
+	margin: 0;
+	overflow: hidden;
+	padding: 0;
+
+	table.table-condensed {
+		width: 100%;
+		text-align: center;
+
+		thead {
+			background: $accent-color;
+			border-top: 5px solid $accent-color;
+			color: #FFF;
+			padding-bottom: 20px;
+			border-radius: 0px;
+
+			th {
+				line-height: 30px;
+				height: 30px;
+				border-radius: 0px;
+				background: $accent-color;
+
+				&:hover {
+					background: darken($accent-color, 10%);
+				}
+
+				&.datepicker-title {
+					&:hover {
+						background: none !important;
+					}
+				}        
+
+				&.next.disabled {
+					background: $accent-color;
+					visibility: visible;
+					opacity: 1;
+					color: $accent-color;
+				}
+
+
+				&.prev, &.next {
+					padding: 10px 25px;
+				}
+			}
+		}
+
+		tr {
+			th.dow, td {
+				width: auto;
+				text-align: center;
+
+				&.day {
+					&:hover {
+						background: none;
+					}
+
+					.day-wrapper {
+						&:hover {
+							background: #EFEFEF;
+						}
+					}
+				}    
+
+				&.today {        
+					background: none;
+
+					.day-wrapper {
+						text-align: center;
+						background: $orangepeel;            
+
+						&:hover {
+							background: darken($orangepeel, 10%);
+							color: #FFF;
+						}
+					}          
+				}
+
+				&.active {
+					background: none !important;
+				}
+
+				&.active.day {
+					color: $accent-color;
+					font-weight: bold;
+				}
+
+			} //end of td
+		} //end of tr
+	}//end of table
+
+	tfoot {
+		tr {
+			th {
+				height: 50px;
+				&:hover {
+					background: none !important;
+					color: #000;
+				}
+			}				
+		}
+	}	
+}//end of datepicker
+
+.datepicker-container {
+	margin-bottom: 20px;
+}
+
+.day-wrapper {
+	display: block;
+	background: none;
+	padding: 8px 5px 5px 5px;
+	margin: 0 auto;
+	border-radius: 50%;
+	height: 38px;
+	width: 38px;
+}
+
+.affix {
+	top: 0;
+	width: 100%;
+}
+
+.affix-top {
+	width: 100%;
+}
+
+.affix-bottom {
+	position: absolute;
+	width: 100%;  
+}
+
+.datepicker-days {
+	table.table-condensed tr th.dow, 
+	.datepicker table.table-condensed tr td {
+		padding: 10px;
+	}
+}
+
+.datepicker-months {
+	table.table-condensed tr th.dow, 
+	.datepicker table.table-condensed tr td {
+		padding: 0px;
+	}
+}
+
+.datepicker-years {
+
+}
+
+
+@media only screen and (max-width : 1358px) {
+
+	.datepicker {
+		table, thead, tbody, th, td, tr { 
+			display: inline-block; 
+		}      
+
+		thead, tbody, tr {
+			display: block;
+			clear: both;
+		}
+
+		tr {
+			margin: 5px 0;
+		}
+
+		tfoot {
+			display: block;
+			width: 100%;
+
+			th {
+				display: block;
+				width: 100% !important;
+				margin: 0 auto;
+				text-align: center;
+				line-height: 30px;
+				height: 30px;
+			}
+		}
+
+		table.table-condensed {
+			.day-wrapper {
+				display: block;
+				background: none;
+				padding: 6px 8px;
+				margin: 0 auto;
+				height: 30px;
+				width: 30px;
+				font-size: 14px;
+			}
+		}
+	}
+
+	.datepicker-months,
+	.datepicker-years {
+		table.table-condensed {
+			tr {
+				th.dow, td {
+					display: block;
+					width: 100%;
+					text-align: center;
+				} //end of td
+			} //end of tr
+		} 
+	}
+
+}

package/sass/components/_cards.scss

@@ -0,0 +1,218 @@
+
+.card-purple {
+  @include card($purple);
+
+    &.archived {
+        @include card($purple, false, true)
+    }  
+}
+
+.card-orange {
+  @include card($orange);
+}
+
+.card-orangepeel {
+    @include card($orangepeel);
+
+    &.archived {
+        @include card($orangepeel, false, true)
+    }
+}
+
+.card-teal {
+  @include card($teal); 
+
+    &.archived {
+        @include card($teal, false, true)
+    }  
+}
+
+.card-deepblue {
+  @include card($deep-blue); 
+}
+
+.card-pink {
+  @include card($pink); 
+}
+
+.card-navy {
+  @include card($accent-color);
+  a.editable.editable-click {
+    font-size: inherit;
+    font-weight: inherit !important;
+    background-color: transparent;
+    border-bottom: none !important;
+    &:hover {
+      font-weight: inherit !important;
+      border-bottom: none !important;
+    }
+  }
+}
+
+.card-jade {
+  @include card($jade); 
+}
+
+.card-pink {
+  @include card($pink); 
+}
+
+.card-disabled {
+  @include card($light-grey); 
+}
+
+.card-purple-disabled {
+  @include card($purple, true);
+}
+
+.card-orange-disabled {
+  @include card($orange, true);
+}
+
+.card-orangepeel-disabled {
+  @include card($orangepeel, true);
+}
+
+.card-teal-disabled {
+  @include card($teal, true); 
+}
+
+.card-teal-completed {
+  @include card($teal, false, true);
+}
+
+.card-deepblue-disabled {
+  @include card($deep-blue, true); 
+}
+
+.card-pink-disabled {
+  @include card($pink, true); 
+}
+
+.card-navy-disabled {
+  @include card($navy, true)
+}
+
+.card-jade-disabled {
+  @include card($jade, true); 
+}
+
+.card-pink-disabled {
+  @include card($pink, true); 
+}
+
+/* CARD MODIFIERS */
+.card-elearning {
+  .ibox-title {
+    //background-image: url("images/pattern_educ.png");
+  }
+  .triangle-corner {
+    &.right {
+      background: linear-gradient(
+          45deg, 
+          darken($purple, 10%) 88%, 
+          darken($purple, 25%) 88%  
+      ) !important; 
+    }
+  }
+}
+
+.card-blended {
+  .ibox-title {
+    //background-image: url("images/pattern_educ.png");
+  }
+  .triangle-corner {
+    &.right {
+        background: linear-gradient(
+            45deg, 
+            darken($orangepeel, 10%) 88%, 
+            darken($orangepeel, 25%) 88%  
+        ) !important; 
+    }
+  }
+}
+
+.card-facetoface {
+  .ibox-title {
+    //background-image: url("images/pattern_educ.png");
+  }
+  .triangle-corner {
+    &.right {
+      background: linear-gradient(
+          45deg, 
+          darken($teal, 10%) 88%, 
+          darken($teal, 25%) 88%  
+      ) !important;   
+    }
+  }
+}
+
+.card-pocketcentre {
+  .ibox-title {
+    
+  }
+
+  // Allowance of space because of the floating element
+  .feed-element:last-child {
+    margin-right: 50px;
+
+    & > p {
+      word-wrap: break-word;
+    }
+  }
+
+}
+
+// When an account is part of a PC
+.card-starred {
+  margin-bottom: 24px;
+
+  .label {
+    margin: 20px 0 0 20px;
+    text-transform: uppercase;
+  }  
+
+  .course-profile & {
+    .label {
+      margin: 0 !important;
+    }
+  }
+}
+
+
+.card-course-category {
+  border-top: none !important;
+  display: table;
+  width: 100%;
+
+    .ibox-title {
+        padding: 20px;
+        border-radius: 5px;
+        text-align: center;
+        display: table-cell;
+        vertical-align: middle;
+        width: 100%;
+
+        h3 {
+            color: #FFF;
+        }
+    }
+
+    &.card-alliedHealth {
+        .ibox-title {
+            background-image: url("images/courseCategory_alliedHealth.jpeg");
+            background-size: cover;
+            background-position: center center;
+            opacity: 0.3;
+        }
+    }
+
+    &.card-equipment-loans {
+        .ibox-title {
+            background-image: url("images/shop-equipmentloans.jpg");
+            background-size: cover;
+            background-position: top center;
+        }
+    }    
+}
+

package/sass/components/_chips.scss

@@ -0,0 +1,23 @@
+.chips {
+	display: inline-block;
+	height: 32px;
+	font-size: 13px;
+	font-weight: 500;
+	line-height: 32px;
+	padding: 0 12px;
+	border-radius: 16px;
+	background-color: $lightest-grey;
+	margin-top: 10px;
+	margin-right: 4px;
+
+	i {
+		margin-left: 5px;
+		cursor: pointer;
+
+		&:hover {
+			color: #333;
+		}
+	}
+
+
+}

package/sass/components/_comments.scss

@@ -0,0 +1,129 @@
+/* COMMENTS & ACTIVITY */
+
+.btn-group-count div.text-muted {
+    display: inline-block;
+    opacity: 0.7;
+    font-size: 13px;
+    margin-right: 12px;
+}
+
+.social-feed-box  {
+    margin-bottom: 0;
+    border-width: 0 0 1px 0;
+
+    &:last-of-type {
+        border-width: 0;
+    }
+}
+
+.media-body {
+    font-size: 14px;
+    display: block;
+    width: auto;
+
+    .person-name {
+        font-weight: 700;
+        display: block;
+    }
+
+    .text-muted {
+        font-size: 12px;
+    }
+}
+
+.social-footer {
+    background: $lightest-grey;
+    margin-left: 17px;
+    margin-bottom: 15px;
+    border-left: 4px solid $lighter-grey;
+    padding: 12px 12px 12px 8px;
+}
+
+.social-reply,
+.social-comment {
+    margin-top: 15px;
+
+    &:first-child {
+        margin-top: 0;
+    }
+
+    img {
+        width: 32px;
+        margin-right: 10px;
+    }
+
+    .input-placeholder {
+        box-sizing: border-box;
+        background-color: #fff;
+        border: 1px solid #ddd;
+        color: #999;
+        cursor: text;
+        font-size: 12px;
+        height: auto;
+        margin: 0 0 0 0;
+        padding: 6px 8px;
+        width: 100%;
+    }
+
+
+    textarea {
+        font-size: 14px;
+    }
+}
+
+.social-comment {
+    margin-top: 0;
+
+    .input-placeholder {
+        font-size: 14px;
+        height: auto;
+        margin: 0 0 0 0;
+        padding: 9px 10px;
+    }
+
+    img {
+        height: 40px;
+        width: 40px;
+        margin-right: 10px;
+    }
+}
+
+
+.social-avatar {
+    padding: 15px 0 0 0;
+
+    .initialsCircle {
+        margin-right: 10px;
+    }
+
+}
+
+.social-reply {
+    .initialsCircle {
+        margin-right: 10px;
+    }
+
+    textarea {
+        border: 1px solid $lightest-grey;
+        width: 100%;
+        padding: 10px;
+    }
+
+    textarea:hover {
+        border: 1px solid darken($lightest-grey, 5%);
+    }
+
+    textarea:focus {
+        border-color: #C5C5C5;
+    }
+
+}
+
+.social-body {
+    padding: 15px 0;
+}
+
+
+.social-action {
+    margin: 15px 0 15px 5px;
+}