Skip to content

Commit

Permalink
chore: prettify things
Browse files Browse the repository at this point in the history
  • Loading branch information
@Destaq
Destaq committed Oct 29, 2024
1 parent 24537e2 commit 0c737aa
Show file tree
Hide file tree
Showing 2 changed files with 152 additions and 150 deletions.
6 changes: 4 additions & 2 deletions src/components/Modals/CollectionsSideBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,9 @@
:active="false"
:isSemesterCourseCard="false"
class="collection-course"
@delete-course-from-collection="deleteCourseFromCollection(collection, templatedCourse)"
@delete-course-from-collection="
deleteCourseFromCollection(collection, templatedCourse)
"
/>
</template>
</draggable>
Expand Down Expand Up @@ -251,7 +253,7 @@ export default defineComponent({
.collection-course {
touch-action: none;
cursor: grab;
&:active:hover {
touch-action: none;
cursor: grabbing;
Expand Down
296 changes: 148 additions & 148 deletions src/components/Modals/SaveCourseModal.scss
View file
Original file line number Diff line number Diff line change
@@ -1,137 +1,85 @@
@import '@/assets/scss/_variables.scss';
.saveCourseModal {
&-title {
display: flex;
justify-content: space-between;
padding-top: 0.6rem;
gap: 0.5rem;
img {
margin-top: 2%;
align-self: flex-start;
}
&-title {
display: flex;
justify-content: space-between;
padding-top: 0.6rem;
gap: 0.5rem;
img {
margin-top: 2%;
align-self: flex-start;
}

&-header {
}

&-header {
display: flex;
align-self: center;
margin-bottom: 0.7rem;
width: 112%;
height: 2rem;
border: 0.3px solid $lightGray;
color: $primaryGray;
padding: 1rem;

&-text {
display: flex;
align-self: center;
margin-bottom: 0.7rem;
width: 112%;
height: 2rem;
border: 0.3px solid $lightGray;
color: $primaryGray;
padding: 1rem;

&-text {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
font-weight: 900;
width: 100%;

&-addButton {
cursor: pointer;
&:hover {
opacity: 0.5;
}
align-items: center;
justify-content: space-between;
font-size: 13px;
font-weight: 900;
width: 100%;

&-addButton {
cursor: pointer;
&:hover {
opacity: 0.5;
}
}
}

&-body {
}

&-body {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
color: $primaryGray;
width: 100%;
position: relative;
max-height: 4.5rem;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;

::-webkit-scrollbar-button {
display: none; // Hide the up and down arrows
}

&-content {
display: flex;
flex-direction: column;
justify-content: flex-start;
justify-content: center;
align-items: flex-start;
color: $primaryGray;
gap: 0.5rem;
width: 100%;
position: relative;
max-height: 4.5rem;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;

::-webkit-scrollbar-button {
display: none; // Hide the up and down arrows
}

&-content {
display: flex;
flex-direction: column;

&.default-collection {
justify-content: center;
align-items: flex-start;
gap: 0.5rem;
width: 100%;

&.default-collection {
justify-content: center;
align-items: center;
}

&-collection {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
color: $primaryGray;
gap: 0.5rem;
padding: 0rem;

input[type='checkbox'] {
margin: 0;
padding: 0;
appearance: none;
width: 12px;
height: 12px;
border-radius: 10%;
border: 1px solid $lightGray;
background-color: white;
cursor: pointer;
position: relative; // For the ::before element positioning
user-select: none;
outline: none;

&:hover {
border: 1px solid $emGreen;
}

&:checked{
background-color: $emGreen;
border: 1px solid $emGreen;
}

// Show checkbox vector when checked
&:checked::before{
content: '';
background-image: url('@/assets/images/checkmark-color.svg');
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-48%, -38%);
width: 9px;
height: 9px;
}
}

label {
cursor: pointer;
user-select: none;
margin: 0;
padding: 0;
outline: none;
}
}
align-items: center;
}
&-bottom {

&-collection {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
justify-items: center;
width: 100%;

color: $primaryGray;
gap: 0.5rem;
padding: 0rem;

input[type='checkbox'] {
margin-right: 0.35rem;
margin: 0;
padding: 0;
appearance: none;
width: 12px;
height: 12px;
Expand All @@ -142,16 +90,16 @@
position: relative; // For the ::before element positioning
user-select: none;
outline: none;

&:hover {
border: 1px solid $emGreen;
}

&:checked {
background-color: $emGreen;
border: 1px solid $emGreen;
}

// Show checkbox vector when checked
&:checked::before {
content: '';
Expand All @@ -166,35 +114,87 @@
height: 9px;
}
}

.new-collection-label {
flex-grow: 1;
display: flex;
align-items: center;
margin-top: 0.3rem;

.editable-input {
border: 1px solid $lightGray;
border-radius: 4px;
box-sizing: border-box;
transition: border 0.2s ease;
width: 80%;
padding-left: 0.1rem;

&:focus {
outline: none;
border-color: $lightGray;
box-shadow: none;
}
}

label {
cursor: pointer;
user-select: none;
margin: 0;
padding: 0;
outline: none;
}
}
}
&-divider-line {
&-bottom {
display: flex;
align-self: center;
width: 112%;
height: 0.3px;
background-color: $lightGray;
align-items: center;
justify-items: center;
width: 100%;

input[type='checkbox'] {
margin-right: 0.35rem;
appearance: none;
width: 12px;
height: 12px;
border-radius: 10%;
border: 1px solid $lightGray;
background-color: white;
cursor: pointer;
position: relative; // For the ::before element positioning
user-select: none;
outline: none;

&:hover {
border: 1px solid $emGreen;
}

&:checked {
background-color: $emGreen;
border: 1px solid $emGreen;
}

// Show checkbox vector when checked
&:checked::before {
content: '';
background-image: url('@/assets/images/checkmark-color.svg');
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-48%, -38%);
width: 9px;
height: 9px;
}
}

.new-collection-label {
flex-grow: 1;
display: flex;
align-items: center;
margin-top: 0.3rem;

.editable-input {
border: 1px solid $lightGray;
border-radius: 4px;
box-sizing: border-box;
transition: border 0.2s ease;
width: 80%;
padding-left: 0.1rem;

&:focus {
outline: none;
border-color: $lightGray;
box-shadow: none;
}
}
}
}
}
}
&-divider-line {
display: flex;
align-self: center;
width: 112%;
height: 0.3px;
background-color: $lightGray;
}
}

0 comments on commit 0c737aa

Please sign in to comment.