ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Change grayscale, add border

This commit is contained in:
Christian Cueni 2019-07-09 14:20:04 +02:00
parent 03d8ed6712
commit 695a9a8ccb
56 changed files with 92 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/AddContentBlockButton.vue
View File

@ -47,7 +47,7 @@
&__icon {
height: 57px;
fill: $color-grey;
fill: $color-silver-dark;
}
}
</style>

4
client/src/components/AddContentElement.vue
View File

@ -22,14 +22,14 @@
.add-content-element {
display: flex;
justify-content: center;
border-bottom: 2px solid $color-grey;
border-bottom: 2px solid $color-silver-dark;
margin-bottom: 21px + 25px;
cursor: pointer;
&__icon {
width: 40px;
height: 40px;
fill: $color-grey;
fill: $color-silver-dark;
margin-bottom: -21px;
background-color: $color-white;
border-radius: 50px;

4
client/src/components/AddObjectiveGroupButton.vue
View File

@ -54,11 +54,11 @@
&__icon {
width: 25px;
height: 25px;
fill: $color-grey;
fill: $color-silver-dark;
}
&__text {
color: $color-grey;
color: $color-silver-dark;
font-family: $sans-serif-font-family;
}
}

2
client/src/components/AddWidget.vue
View File

@ -60,7 +60,7 @@
&__add {
width: 80px;
fill: $color-grey;
fill: $color-silver-dark;
}
&--reverse {

2
client/src/components/AssignmentWithSubmissions.vue
View File

@ -84,7 +84,7 @@
&__link {
display: block;
&:first-of-type {
border-top: 1px solid $color-grey;
border-top: 1px solid $color-silver-dark;
}
}

4
client/src/components/ColorChooser.vue
View File

@ -56,13 +56,13 @@
padding: 10px;
&--selected {
border: 1px solid $color-darkgrey-1;
border: 1px solid $color-charcoal-dark;
}
}
&__selected-icon {
width: 17px;
fill: $color-darkgrey-1;
fill: $color-charcoal-dark;
}
&__color {

2
client/src/components/ContentBlock.vue
View File

@ -150,6 +150,8 @@
}
&--task {
@include light-border(bottom);
.content-block__title {
color: $color-brand;
margin-top: $default-padding;

2
client/src/components/FilterBar.vue
View File

@ -65,7 +65,7 @@
z-index: 9;
padding: 0 24px;
height: 50px;
background-color: $color-lightgrey;
background-color: $color-silver-light;
display: flex;
align-items: center;
justify-items: left;

8
client/src/components/HelpfulTooltip.vue
View File

@ -31,7 +31,7 @@
&__icon {
width: 20px;
height: 20px;
fill: $color-grey;
fill: $color-silver-dark;
}
&__tooltip {
@ -47,7 +47,7 @@
width: auto;
background-color: $color-white;
border: 1px solid $color-grey;
border: 1px solid $color-silver-dark;
border-radius: 5px;
padding: $small-spacing;
@include small-text;
@ -58,8 +58,8 @@
left: 0;
top: 18px;
margin-left: -1px;
border-left: 1px solid $color-grey;
border-top: 1px solid $color-grey;
border-left: 1px solid $color-silver-dark;
border-top: 1px solid $color-silver-dark;
background-color: $color-white;
width: 10px;
height: 10px;

2
client/src/components/LogoutWidget.vue
View File

@ -25,7 +25,7 @@
@import "@/styles/_variables.scss";
.logout-widget {
color: $color-grey;
color: $color-silver-dark;
display: flex;
align-items: center;

2
client/src/components/MobileHeader.vue
View File

@ -48,7 +48,7 @@
&__hamburger {
width: 30px;
height: 30px;
fill: $color-grey;
fill: $color-silver-dark;
}
}
</style>

6
client/src/components/Modal.vue
View File

@ -58,7 +58,7 @@
background-color: $color-white;
border-radius: 12px;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
border: 1px solid $color-lightgrey;
border: 1px solid $color-silver-light;
display: -ms-grid;
@supports (display: grid) {
display: grid;
@ -130,7 +130,7 @@
grid-area: header;
-ms-grid-row: 1;
padding: 10px $modal-lateral-padding;
border-bottom: 1px solid $color-lightgrey;
border-bottom: 1px solid $color-silver-light;
}
&__body {
@ -162,7 +162,7 @@
&__footer {
grid-area: footer;
-ms-grid-row: 3;
border-top: 1px solid $color-lightgrey;
border-top: 1px solid $color-silver-light;
padding: 16px $modal-lateral-padding;
}
}

2
client/src/components/MoreOptionsWidget.vue
View File

@ -39,7 +39,7 @@
&__ellipses {
width: 30px;
height: 30px;
fill: $color-darkgrey-1;
fill: $color-charcoal-dark;
margin-top: -7px;
}

4
client/src/components/NewsTeaser.vue
View File

@ -22,13 +22,13 @@
.news-teaser {
display: flex;
border-bottom: 1px solid $color-lightgrey;
border-bottom: 1px solid $color-silver-light;
padding-bottom: $large-spacing;
text-align: center;
@include desktop {
border-bottom: 0;
border-left: 1px solid $color-lightgrey;
border-left: 1px solid $color-silver-light;
padding-bottom: 0;
text-align: left;
}

4
client/src/components/SectionBlock.vue
View File

@ -54,7 +54,7 @@
.block-title {
&__title, &__subtitle {
color: $color-darkgrey-1;
color: $color-charcoal-dark;
font-family: $sans-serif-font-family;
}
@ -86,7 +86,7 @@
font-weight: 600;
&--disabled {
color: $color-grey;
color: $color-silver-dark;
}
}
}

2
client/src/components/StudentSubmission.vue
View File

@ -54,7 +54,7 @@
grid-template-columns: 170px 1fr;
grid-column-gap: 80px;
align-items: center;
border-bottom: 1px solid $color-grey;
border-bottom: 1px solid $color-silver-dark;
padding: 15px 0;
&__student-name {

2
client/src/components/TopNavigation.vue
View File

@ -39,7 +39,7 @@
padding: 0 24px;
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
color: $color-grey;
color: $color-silver-dark;
&--active {
color: $color-brand;

6
client/src/components/UserWidget.vue
View File

@ -29,13 +29,13 @@
@import "@/styles/_variables.scss";
.user-widget {
color: $color-grey;
color: $color-silver-dark;
display: flex;
align-items: center;
&__name {
padding: 0px 10px;
color: $color-grey;
color: $color-silver-dark;
font-family: $sans-serif-font-family;
}
@ -46,7 +46,7 @@
&__avatar {
width: 30px;
height: 30px;
fill: $color-grey;
fill: $color-silver-dark;
}
&--is-profile {

2
client/src/components/book-navigation/BookTopicNavigation.vue
View File

@ -34,7 +34,7 @@
font-family: $sans-serif-font-family;
font-size: toRem(14px);
margin-bottom: 20px;
color: $color-grey;
color: $color-silver-dark;
&--active {
color: $color-brand;

2
client/src/components/content-blocks/DocumentBlock.vue
View File

@ -66,7 +66,7 @@
&__trash-icon {
width: 25px;
height: 25px;
fill: $color-grey;
fill: $color-silver-dark;
cursor: pointer;
justify-self: center;
}

6
client/src/components/content-blocks/Solution.vue
View File

@ -42,7 +42,7 @@
&__toggle {
font-family: $sans-serif-font-family;
color: $color-grey;
color: $color-silver-dark;
font-size: toRem(15px);
/*margin-bottom: 15px;*/
display: block;
@ -52,11 +52,11 @@
&__text {
font-size: toRem(18px);
color: $color-grey;
color: $color-silver-dark;
/deep/ p {
font-size: toRem(18px);
color: $color-grey;
color: $color-silver-dark;
}
}
}

6
client/src/components/content-blocks/assignment/Assignment.vue
View File

@ -254,13 +254,13 @@
padding: 5px 0;
margin-right: 15px;
outline: 0;
color: $color-grey;
color: $color-silver-dark;
cursor: pointer;
border-bottom: 2px solid transparent;
&--active {
border-bottom-color: $color-darkgrey-1;
color: $color-darkgrey-1;
border-bottom-color: $color-charcoal-dark;
color: $color-charcoal-dark;
}
}

4
client/src/components/content-blocks/assignment/SubmissionForm.vue
View File

@ -66,13 +66,13 @@
&__save-status-icon {
width: 22px;
height: 22px;
fill: $color-grey;
fill: $color-silver-dark;
margin-right: 8px;
}
&__save-status-text {
font-size: toRem(14px);
color: $color-grey;
color: $color-silver-dark;
}
@keyframes spin {

4
client/src/components/content-forms/ContentBlockElementChooserWidget.vue
View File

@ -84,7 +84,7 @@
grid-column-gap: 0px;
font-family: $sans-serif-font-family;
text-align: center;
border: 2px solid $color-grey;
border: 2px solid $color-silver-dark;
padding: 30px 5px;
border-radius: 12px;
margin-top: 20px;
@ -126,7 +126,7 @@
position: absolute;
width: 20px;
height: 20px;
border: 2px solid $color-grey;
border: 2px solid $color-silver-dark;
border-bottom: 0;
border-right: 0;
background-color: white;

2
client/src/components/content-forms/DocumentForm.vue
View File

@ -73,7 +73,7 @@
& + label {
cursor: pointer;
background-color: $color-lightgrey;
background-color: $color-silver-light;
height: 150px;
display: flex;
width: 100%;

2
client/src/components/content-forms/ImageForm.vue
View File

@ -101,7 +101,7 @@
& + label {
cursor: pointer;
background-color: $color-lightgrey;
background-color: $color-silver-light;
height: 150px;
display: flex;
width: 100%;

2
client/src/components/inputs/BaseInput.vue
View File

@ -68,7 +68,7 @@
width: 20px;
height: 20px;
display: flex;
border: 2px solid $color-grey;
border: 2px solid $color-silver-dark;
justify-content: center;
align-items: center;
box-sizing: border-box;

2
client/src/components/modules/Module.vue
View File

@ -166,7 +166,7 @@
}
&__meta-title {
color: $color-grey;
color: $color-silver-dark;
font-size: 2.25rem;
font-weight: 300;
font-family: $serif-font-family;

2
client/src/components/modules/ModuleNavigation.vue
View File

@ -101,7 +101,7 @@
@mixin module-navigation-typography {
font-family: $sans-serif-font-family;
color: $color-grey;
color: $color-silver-dark;
font-weight: $font-weight-regular;
}

2
client/src/components/modules/ModuleTeaser.vue
View File

@ -56,7 +56,7 @@
}
&__meta-title {
color: $color-grey;
color: $color-silver-dark;
margin-bottom: $large-spacing;
@include regular-text;
}

2
client/src/components/page-form/PageForm.vue
View File

@ -57,7 +57,7 @@
}
&__footer {
border-top: 1px solid $color-lightgrey;
border-top: 1px solid $color-silver-light;
padding: $small-spacing $medium-spacing;
}
}

2
client/src/components/portfolio/ProjectActions.vue
View File

@ -108,7 +108,7 @@
svg {
width: 30px;
fill: $color-darkgrey-1;
fill: $color-charcoal-dark;
margin-right: 15px;
}
}

2
client/src/components/portfolio/ProjectEntry.vue
View File

@ -98,7 +98,7 @@
&__date {
font-family: $sans-serif-font-family;
color: $color-grey;
color: $color-silver-dark;
font-size: toRem(17px);
}

2
client/src/components/profile/Avatar.vue
View File

@ -47,7 +47,7 @@
&__placeholder {
height: $max-width;
fill: $color-grey;
fill: $color-silver-dark;
&--highlighted {
fill: $color-brand;

2
client/src/components/profile/Classlist.vue
View File

@ -35,7 +35,7 @@
&__item {
line-height: $height;
height: $height;
border-bottom: 1px solid $color-grey;
border-bottom: 1px solid $color-silver-dark;
}
}

2
client/src/components/profile/ModuleActivity.vue
View File

@ -65,7 +65,7 @@
&__module-name {
@include small-text;
color: $color-grey;
color: $color-silver-dark;
}
}

2
client/src/components/profile/PasswordChangeForm.vue
View File

@ -109,7 +109,7 @@
&__hint {
margin-top: $small-spacing;
font-family: $sans-serif-font-family;
color: $color-grey;
color: $color-silver-dark;
}
}

2
client/src/components/rooms/EntryCountWidget.vue
View File

@ -27,7 +27,7 @@
svg {
width: 30px;
fill: $color-darkgrey-1;
fill: $color-charcoal-dark;
margin-right: 15px;
}

2
client/src/components/rooms/RoomActions.vue
View File

@ -74,7 +74,7 @@
svg {
width: 30px;
fill: $color-darkgrey-1;
fill: $color-charcoal-dark;
margin-right: 15px;
}
}

2
client/src/components/rooms/RoomGroupWidget.vue
View File

@ -29,7 +29,7 @@
svg {
width: 30px;
fill: $color-darkgrey-1;
fill: $color-charcoal-dark;
margin-right: 15px;
}

4
client/src/components/rooms/RoomWidget.vue
View File

@ -79,13 +79,13 @@
svg {
width: 30px;
fill: $color-darkgrey-1;
fill: $color-charcoal-dark;
margin-right: 15px;
}
&__content {
padding: 22px;
color: $color-darkgrey-1;
color: $color-charcoal-dark;
cursor: pointer;
/*

2
client/src/components/rooms/WidgetPopover.vue
View File

@ -40,7 +40,7 @@
&__link {
& > a {
display: inline-block;
color: $color-grey;
color: $color-silver-dark;
font-family: $sans-serif-font-family;
font-size: toRem(14px);
line-height: 1.5;

2
client/src/components/visibility/VisibilityPopover.vue
View File

@ -112,7 +112,7 @@
.visibility-menu {
border-radius: 13px;
border: 1px solid $color-lightgrey;
border: 1px solid $color-silver-light;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
width: 180px;
box-sizing: border-box;

2
client/src/pages/project.vue
View File

@ -165,7 +165,7 @@
}
&__content {
background-color: rgba($color-darkgrey-1, 0.18);
background-color: rgba($color-charcoal-dark, 0.18);
display: flex;
flex-direction: column;
/*max-width: 840px;*/

2
client/src/pages/room.vue
View File

@ -131,7 +131,7 @@
&__content {
padding: 50px 15px;
background-color: rgba($color-darkgrey-1, 0.18);
background-color: rgba($color-charcoal-dark, 0.18);
@include desktop {
columns: 4;
padding: 50px 60px;

6
client/src/pages/start.vue
View File

@ -122,7 +122,7 @@
&__title {
color: $color-brand;
text-align: center;
border-bottom: 1px solid $color-lightgrey;
border-bottom: 1px solid $color-silver-light;
padding-bottom: 30px;
margin-left: 30px;
margin-right: 30px;
@ -182,7 +182,7 @@
}
.news {
background-color: $color-darkgrey-1;
background-color: $color-charcoal-dark;
color: $color-white;
padding-top: $large-spacing;
padding-bottom: $large-spacing;
@ -246,7 +246,7 @@
@include desktop {
text-align: left;
border-left: 1px solid $color-lightgrey;
border-left: 1px solid $color-silver-light;
}
}
}

2
client/src/pages/topic.vue
View File

@ -69,7 +69,7 @@
.topic {
&__teaser {
color: $color-darkgrey-1;
color: $color-charcoal-dark;
width: 90%;
@include lead-paragraph;
margin-bottom: $large-spacing;

2
client/src/styles/_actions.scss
View File

@ -1,5 +1,5 @@
.action-icon {
width: 40px;
height: 40px;
fill: $color-grey;
fill: $color-silver-dark;
}

2
client/src/styles/_article.scss
View File

@ -11,7 +11,7 @@
}
&__meta {
border-bottom: 1px solid $color-lightgrey;
border-bottom: 1px solid $color-silver-light;
align-self: end;
padding: 20px 0;
width: 100%;

8
client/src/styles/_buttons.scss
View File

@ -1,6 +1,6 @@
.button {
background: transparent;
border: 2px solid $color-grey;
border: 2px solid $color-silver-dark;
padding: 5px 15px;
border-radius: 3px;
font-family: $sans-serif-font-family;
@ -20,8 +20,8 @@
background-color: $color-white;
}
&--disabled {
border: 2px solid $color-lightgrey;
background-color: $color-lightgrey;
border: 2px solid $color-silver-light;
background-color: $color-silver-light;
}
}
@ -35,7 +35,7 @@
&__icon {
width: 25px;
height: 25px;
fill: $color-grey;
fill: $color-silver-dark;
cursor: pointer;
justify-self: center;
}

2
client/src/styles/_forms.scss
View File

@ -4,7 +4,7 @@
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-sizing: border-box;
border: 1px solid $color-lightgrey;
border: 1px solid $color-silver-light;
max-width: 100%;
background-color: $color-white;
}

6
client/src/styles/_mixins.scss
View File

@ -8,7 +8,7 @@
@mixin widget-shadow {
@include widget-shadow-base;
border: 1px solid $color-lightgrey;
border: 1px solid $color-silver-light;
}
@mixin widget-shadow-reverse {
@ -19,7 +19,7 @@
@mixin room-widget-text-style {
font-family: $sans-serif-font-family;
font-size: 1rem;
fill: $color-darkgrey-1;
fill: $color-charcoal-dark;
}
@mixin input-box-shadow {
@ -140,5 +140,5 @@
}
@mixin light-border($border-position) {
border-#{$border-position}: 1px solid $color-lightgrey;
border-#{$border-position}: 1px solid $color-silver;
}

2
client/src/styles/_top-navigation.scss
View File

@ -6,7 +6,7 @@
padding: 0 24px;
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
color: $color-grey;
color: $color-silver-dark;
&--active {
color: $color-brand;

2
client/src/styles/_typography.scss
View File

@ -5,7 +5,7 @@
* {
font-size: $base-font-size;
font-weight: $font-weight-regular;
color: $color-darkgrey-1;
color: $color-charcoal-dark;
}
h1, h2, h3, h4, h5 {

2
client/src/styles/_uploadcare_overwrite.scss
View File

@ -1,5 +1,5 @@
.uploadcare--panel {
background: $color-lightgrey;
background: $color-silver-light;
height: 200px;
border: none;
border-radius: 0;

17
client/src/styles/_variables.scss
View File

@ -27,17 +27,20 @@ $color-brand-light: #DCF2ED;
$color-error: #C02108;
/* greyscale */
$color-darkgrey-1: #333333;
$color-grey: #999999;
$color-silver: #d0d0d0;
$color-silver-light: #f0f0f0;
$color-silver-dark: #aaaaaa;
$color-charcoal: #616161;
$color-charcoal-light: #828282;
$color-charcoal-dark: #333333;
//$color-grey--lighter: rgba(51, 51, 51, 0.18);
$color-grey--lighter: transparent;
$color-lightgrey: #f0f0f0;
$color-white: #ffffff;
$header-color: $color-darkgrey-1;
$intro-color: $color-grey;
$header-color: $color-charcoal-dark;
$intro-color: $color-silver-dark;
$sans-serif-font-family: 'Montserrat', Arial, sans-serif;
$serif-font-family: "ff-meta-serif-web-pro", serif;