-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #29 from JuzerShakir/upgrade-ui
Upgrade UI
- Loading branch information
Showing
132 changed files
with
1,126 additions
and
1,138 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
Binary file not shown.
File renamed without changes.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
.create-sabeel-btn { | ||
background-image: linear-gradient( | ||
to right, | ||
$primary 0%, | ||
$success 51%, | ||
$secondary 100% | ||
); | ||
transition: 0.7s; | ||
background-size: 200% auto; | ||
|
||
&:hover { | ||
background-position: right center; | ||
color: white; /* change the direction of the change here */ | ||
text-decoration: none; | ||
} | ||
} | ||
|
||
// styles defined here will take precedence over the in-line styles defined | ||
.default-btn { | ||
@extend .col-7; | ||
@extend .col-md-3; | ||
@extend .btn; | ||
@extend .rounded-pill; | ||
@extend .fw-medium; | ||
@extend .mb-3; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
$primary: #1f2605 !default; | ||
$secondary: #53900f !default; | ||
$info: #a4a71e !default; | ||
$success: #1f6521 !default; | ||
$danger: #6f2232 !default; | ||
$dropdown-bg: $primary !default; | ||
$light: #d6ce15 !default; | ||
$lighter: #cac886 !default; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
// * Form defaults | ||
$input-color: $secondary; | ||
$input-placeholder-color: $lighter; | ||
$input-font-weight: 500; | ||
$input-border-color: $light; | ||
$input-focus-border-color: $secondary; | ||
$input-border-width: 2px; | ||
$form-check-input-checked-bg-color: $success; | ||
$form-check-input-checked-border-color: $success; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,150 +1,22 @@ | ||
@import "bootstrap/scss/bootstrap"; | ||
@import "bootstrap-icons/font/bootstrap-icons"; | ||
|
||
body { | ||
background: url("background.png") no-repeat center center; | ||
background-size: cover; | ||
background-attachment: fixed; | ||
font-family: lato, sans-serif; | ||
} | ||
|
||
// for mobile-devices | ||
@media (max-width: 767px) { | ||
.button, | ||
.button-contact { | ||
width: 100%; | ||
} | ||
|
||
.about { | ||
margin-top: 4rem; | ||
} | ||
} | ||
|
||
// for non-mobile-devices | ||
@media (min-width: 767px) { | ||
.button { | ||
width: 35%; | ||
} | ||
|
||
.m-left { | ||
margin-left: 10%; | ||
} | ||
|
||
.button-contact { | ||
width: 25%; | ||
} | ||
|
||
.desktop-mt { | ||
margin-top: 4rem; | ||
} | ||
} | ||
|
||
.note { | ||
font-size: 0.7rem; | ||
} | ||
|
||
.c-bg { | ||
background-color: rgba(255, 255, 255, 0.63); | ||
} | ||
|
||
.about { | ||
background-color: rgba(252, 244, 253, 0.5); | ||
border-color: rgba(251, 224, 253); | ||
border-radius: 2px; | ||
} | ||
|
||
.c-shadow { | ||
box-shadow: 0px -7px 10px rgba(0, 0, 0, 0.15); | ||
} | ||
|
||
.error-message { | ||
margin: 0; | ||
position: absolute; | ||
top: 50%; | ||
left: 50%; | ||
-ms-transform: translate(-50%, -50%); | ||
transform: translate(-50%, -50%); | ||
h1 { | ||
font-size: 15vw; | ||
} | ||
} | ||
|
||
#flash { | ||
position: absolute; | ||
z-index: 2; | ||
right: 10px; | ||
background-color: rgba(0, 0, 0, 0.737); | ||
font-size: larger; | ||
padding: 15px; | ||
border-radius: 25px; | ||
} | ||
// ? Using the 7-1 pattern for a manageable CSS | ||
// More info here: https://openclassrooms.com/en/courses/5625786-produce-maintainable-css-with-sass/5723581-use-the-7-1-pattern-for-a-manageable-codebase | ||
|
||
#flash-success { | ||
color: rgb(0, 255, 0); | ||
} | ||
// ! IMPORTANT - load these files before any other css files | ||
@import "abstracts/themes"; | ||
@import "abstracts/variables"; | ||
@import "base/typography"; | ||
|
||
#flash-alert { | ||
color: rgb(255, 0, 0); | ||
} | ||
|
||
#flash-notice { | ||
color: rgb(255, 255, 0); | ||
} | ||
|
||
#show-header-transaction { | ||
background-color: #d7fcd7; | ||
} | ||
|
||
#show-transaction { | ||
background-color: #d7fcd7; | ||
} | ||
|
||
#show-thaali { | ||
background-color: #d4d4d4; | ||
} | ||
|
||
#show-header-thaali { | ||
background-color: #afeeee; | ||
} | ||
|
||
#show-sabeel, | ||
#show-user { | ||
background-color: #f7e6bc; | ||
} | ||
|
||
#show-header-sabeel { | ||
background-color: #ffefd5; | ||
} | ||
|
||
#show-header-users { | ||
background-color: #ffa07a; | ||
} | ||
|
||
#all-sabeels { | ||
border-style: solid; | ||
border-width: 2px; | ||
border-color: rgb(255, 193, 7); | ||
} | ||
|
||
#all-thaalis { | ||
border-style: solid; | ||
border-width: 2px; | ||
border-color: rgb(13, 202, 240); | ||
} | ||
|
||
#all-transactions { | ||
border-style: solid; | ||
border-width: 2px; | ||
border-color: rgb(25, 135, 84); | ||
} | ||
|
||
#all-users { | ||
border-style: solid; | ||
border-width: 2px; | ||
border-color: rgb(220, 53, 69); | ||
} | ||
|
||
#footer { | ||
background-color: rgb(33, 37, 41); | ||
font-size: 14px; | ||
} | ||
// * load other sass files from here | ||
@import "bootstrap/scss/bootstrap"; | ||
// base | ||
@import "base/base"; | ||
@import "base/utilities"; | ||
@import "base/animations"; | ||
// layouts | ||
@import "layouts/flash"; | ||
@import "layouts/form"; | ||
@import "layouts/index"; | ||
@import "layouts/search"; | ||
@import "layouts/show"; | ||
|
||
@import "components"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
@keyframes flash { | ||
0% { | ||
transform: translateX(-15rem); | ||
} | ||
35% { | ||
transform: translateX(1.5rem); | ||
} | ||
65% { | ||
transform: translateX(1.5rem); | ||
} | ||
100% { | ||
transform: translateX(-15rem); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
body { | ||
background: url("background.png") no-repeat center center; | ||
background-size: cover; | ||
background-attachment: fixed; | ||
} | ||
|
||
input[type="search"] { | ||
&::-webkit-search-decoration, | ||
&::-webkit-search-cancel-button, | ||
&::-webkit-search-results-button, | ||
&::-webkit-search-results-decoration { | ||
display: none; | ||
} | ||
} | ||
|
||
.form-control { | ||
&::-moz-placeholder { | ||
opacity: 0.85; | ||
} | ||
|
||
&:-ms-input-placeholder { | ||
opacity: 0.85; | ||
} | ||
|
||
&::-webkit-input-placeholder { | ||
opacity: 0.85; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
// * Josefin Sans (400) & Nunito (200, 300, 400, 500) | ||
// source: https://fonts.google.com/specimen/Nunito | ||
// source: https://fonts.google.com/specimen/Josefin+Sans | ||
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Nunito:wght@200;300;400;500&display=swap"); | ||
|
||
$font-family-base: "Nunito", sans-serif; | ||
$font-weight-base: 300; | ||
|
||
.heading { | ||
font-family: "Josefin Sans", sans-serif; | ||
font-weight: 400; | ||
text-align: center; | ||
color: $primary; | ||
} | ||
|
||
.fs-bigger { | ||
font-size: 15dvh !important; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.mt-6 { | ||
margin-top: 4rem !important; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
#flash { | ||
transform: translateX(-15rem); | ||
animation: flash 5s; | ||
|
||
&-alert { | ||
color: $red; | ||
} | ||
|
||
&-notice { | ||
color: $yellow; | ||
} | ||
|
||
&-success { | ||
color: $secondary; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
#form-login { | ||
height: 70dvh !important; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
#sabeels, | ||
#thaalis, | ||
#transactions, | ||
#users { | ||
.row:not(:last-child) { | ||
border-bottom: 2px solid $secondary; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
#search { | ||
input { | ||
padding: 0.75rem 1.5rem; | ||
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' fill='%23a4a71e' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E"); | ||
background-repeat: no-repeat; | ||
background-size: 18px 18px; | ||
background-position: 94% center; | ||
|
||
background-color: transparent; | ||
backface-visibility: hidden; | ||
|
||
border-radius: 2rem; | ||
transform-style: preserve-3d; | ||
transition: all 300ms ease-in-out; | ||
|
||
&:hover, | ||
&:focus { | ||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' fill='%2353900f' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E"); | ||
padding: 0.75rem 0.5rem; | ||
outline: 0; | ||
border: 2px solid transparent; | ||
border-bottom: 2px solid $input-focus-border-color; | ||
border-radius: 0; | ||
box-shadow: none; | ||
background-position: 98% center; | ||
} | ||
} | ||
} |
Oops, something went wrong.