forked from isabella232/nedbank
-
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 #146 from hlxsites/article-feed2
implementing article-feed for loans page
- Loading branch information
Showing
9 changed files
with
1,147 additions
and
0 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,343 @@ | ||
| /*! | ||
| * This is a autogenerated file. Please don't change the content directly. | ||
| * To change the css, change the same named .less file. | ||
| * After changing .less file, run 'npm run lessc' from terminal to autogenerate .css file. | ||
| */ | ||
| main .article-feed-container > div { | ||
| max-width: 748px; | ||
| margin: 0 22px; | ||
| padding: 0; | ||
| } | ||
| @media (min-width: 768px) { | ||
| main .article-feed-container > div { | ||
| max-width: 1260px; | ||
| padding: 0; | ||
| } | ||
| } | ||
| @media (min-width: 1025px) { | ||
| main .article-feed-container > div { | ||
| max-width: 1260px; | ||
| margin: 0 106px; | ||
| padding: 0; | ||
| } | ||
| } | ||
| @media (min-width: 1440px) { | ||
| main .article-feed-container > div { | ||
| max-width: 1228px; | ||
| margin: auto; | ||
| padding: 0; | ||
| } | ||
| } | ||
| main .article-feed-container { | ||
| background-color: #fafafa; | ||
| padding-bottom: 40px; | ||
| } | ||
| main .article-feed-container > .default-content-wrapper { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| padding-top: 40px; | ||
| padding-bottom: 40px; | ||
| } | ||
| main .article-feed-container > .default-content-wrapper > * { | ||
| padding-right: 15px; | ||
| padding-left: 15px; | ||
| } | ||
| main .article-feed-container > .default-content-wrapper h2 { | ||
| font-size: 20px; | ||
| line-height: 28px; | ||
| font-weight: 400; | ||
| margin: 0; | ||
| } | ||
| main .article-feed-container > .default-content-wrapper p { | ||
| margin: 0; | ||
| } | ||
| main .article-feed-container > .default-content-wrapper a { | ||
| font-size: 18px; | ||
| font-weight: 700; | ||
| line-height: 26px; | ||
| } | ||
| main .article-feed-container > .default-content-wrapper a + .icon { | ||
| transition: transform 900ms; | ||
| } | ||
| main .article-feed-container > .default-content-wrapper a:hover + .icon { | ||
| transform: translateX(8px) scale(1.2); | ||
| } | ||
| .article-feed.appear { | ||
| visibility: unset; | ||
| min-height: unset; | ||
| text-align: center; | ||
| --current-x: 0; | ||
| } | ||
| .article-cards { | ||
| position: relative; | ||
| width: auto; | ||
| display: flex; | ||
| transition-property: transform; | ||
| transition-duration: 300ms; | ||
| transform: translate3d(var(--current-x), 0, 0); | ||
| } | ||
| .article-cards .article-card { | ||
| position: relative; | ||
| margin-right: 30px; | ||
| margin-left: 0; | ||
| } | ||
| .article-card-image { | ||
| min-width: 284px; | ||
| height: 180px; | ||
| } | ||
| .article-card-image img { | ||
| height: 100%; | ||
| width: 100%; | ||
| object-fit: cover; | ||
| } | ||
| .article-card { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| .article-card-body { | ||
| border: 1.5px solid #e5edec; | ||
| background-color: #ffffff; | ||
| text-align: left; | ||
| padding: 16px; | ||
| flex: 1 1 auto; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| .article-card-body h3 { | ||
| font-family: 'Libre Franklin', Arial, Helvetica, sans-serif; | ||
| font-weight: 700; | ||
| margin-top: 0; | ||
| margin-bottom: 16px; | ||
| font-size: 20px; | ||
| line-height: 28px; | ||
| } | ||
| .article-card-body p { | ||
| font-family: 'Open Sans Regular', Arial, Helvetica, sans-serif; | ||
| margin: 0; | ||
| } | ||
| .article-card-body .article-card-description { | ||
| color: #494f50; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 3; | ||
| font-size: 14px; | ||
| line-height: 22px; | ||
| -webkit-box-orient: vertical; | ||
| overflow: hidden; | ||
| margin-bottom: 25px; | ||
| } | ||
| .article-card-body .article-card-date { | ||
| margin-bottom: 24px; | ||
| color: #94999c; | ||
| } | ||
| .article-feed .pagination-toolbar { | ||
| display: none; | ||
| } | ||
| .article-feed .pagination-toolbar span { | ||
| width: 40px; | ||
| height: 40px; | ||
| background-repeat: no-repeat; | ||
| cursor: pointer; | ||
| } | ||
| .article-card-author, | ||
| .article-card-date { | ||
| font-size: 12px; | ||
| line-height: 14px; | ||
| letter-spacing: 0; | ||
| } | ||
| .article-card-author { | ||
| color: #494f50; | ||
| padding-bottom: 8px; | ||
| } | ||
| .article-card-footer { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| flex: 1 1 auto; | ||
| align-items: flex-end; | ||
| } | ||
| .article-card-read { | ||
| font-size: 16px; | ||
| line-height: 24px; | ||
| letter-spacing: 0; | ||
| font-family: 'Open Sans Regular', Arial, Helvetica, sans-serif; | ||
| font-weight: 700; | ||
| } | ||
| .article-card-read::after { | ||
| height: 14px; | ||
| width: 24px; | ||
| margin: 5px 0px 0px 10px; | ||
| content: url(/icons/arrow.svg); | ||
| transition: transform 900ms; | ||
| display: inline-block; | ||
| } | ||
| .article-card:hover .article-card-read::after { | ||
| transform: translateX(10px); | ||
| width: 34px; | ||
| } | ||
| .article-card-time { | ||
| color: #94999c; | ||
| font-size: 14px; | ||
| line-height: 22px; | ||
| display: flex; | ||
| } | ||
| .article-card-time::before { | ||
| content: url(/icons/time_watch_clock.svg); | ||
| height: 14px; | ||
| width: 14px; | ||
| margin-right: 5px; | ||
| margin-top: 2px; | ||
| } | ||
| .article-feed { | ||
| width: 100%; | ||
| overflow-x: hidden; | ||
| } | ||
| .article-feed .article-pagination { | ||
| margin: 60px auto 20px auto; | ||
| display: flex; | ||
| } | ||
| .article-feed .pagination-bullets { | ||
| flex-grow: 2; | ||
| } | ||
| .article-feed .pagination-prev { | ||
| background-image: url(/icons/arrow-left-pagination.svg); | ||
| } | ||
| .article-feed .pagination-prev.disabled { | ||
| background-image: url(/icons/arrow-left-pagination-disabled.svg); | ||
| } | ||
| .article-feed .pagination-next { | ||
| background-image: url(/icons/arrow-right-pagination.svg); | ||
| } | ||
| .article-feed .pagination-next.disabled { | ||
| background-image: url(/icons/arrow-right-pagination-disabled.svg); | ||
| } | ||
| .article-feed .pagination-bullet { | ||
| display: inline-block; | ||
| width: 8px; | ||
| height: 8px; | ||
| border-radius: 100%; | ||
| background: #000; | ||
| opacity: 0.2; | ||
| margin: 5px; | ||
| cursor: pointer; | ||
| } | ||
| .article-feed .pagination-bullet.active { | ||
| background: #008533; | ||
| width: 26px; | ||
| border-radius: 35px; | ||
| opacity: 1; | ||
| } | ||
| @media (min-width: 576px) and (max-width: 1024px) { | ||
| .article-card-image { | ||
| width: 350px; | ||
| height: 226px; | ||
| } | ||
| .article-card-body h3 { | ||
| margin-bottom: 20px; | ||
| } | ||
| .article-card-body .article-card-description { | ||
| -webkit-line-clamp: 2; | ||
| font-size: 16px; | ||
| line-height: 24px; | ||
| } | ||
| .article-card-body .article-card-read { | ||
| font-size: 18px; | ||
| line-height: 26px; | ||
| } | ||
| } | ||
| @media (min-width: 576px) { | ||
| .article-card-body .article-card-read { | ||
| font-size: 18px; | ||
| line-height: 26px; | ||
| } | ||
| main .article-feed-container > .default-content-wrapper { | ||
| padding-top: 40px; | ||
| padding-bottom: 40px; | ||
| } | ||
| main .article-feed-container > .default-content-wrapper h2 { | ||
| font-size: 20px; | ||
| line-height: 28px; | ||
| } | ||
| } | ||
| @media (min-width: 768px) { | ||
| main .article-feed-container > .default-content-wrapper h2 { | ||
| font-size: 24px; | ||
| line-height: 32px; | ||
| } | ||
| } | ||
| @media (min-width: 1025px) { | ||
| .article-card-image { | ||
| height: 500px; | ||
| min-width: 562px; | ||
| } | ||
| .article-card-footer { | ||
| align-items: center; | ||
| } | ||
| .article-card-body { | ||
| box-sizing: border-box; | ||
| position: absolute; | ||
| padding: 40px 32px 40px 32px; | ||
| margin: 50px 24px 50px 0px; | ||
| top: 0; | ||
| right: 0; | ||
| height: 400px; | ||
| width: 390px; | ||
| border: 1.5px solid #e5edec; | ||
| background-color: #ffffff; | ||
| text-align: left; | ||
| } | ||
| .article-card-body h3 { | ||
| font-size: 24px; | ||
| line-height: 32px; | ||
| } | ||
| .article-card-body p.article-card-author { | ||
| padding: 0; | ||
| } | ||
| .article-card-body .article-card-description { | ||
| margin-bottom: 50px; | ||
| font-size: 20px; | ||
| line-height: 28px; | ||
| -webkit-line-clamp: 3; | ||
| } | ||
| main .article-feed-container > .default-content-wrapper { | ||
| padding-top: 80px; | ||
| padding-bottom: 48px; | ||
| } | ||
| main .article-feed-container > .default-content-wrapper h2 { | ||
| font-size: 32px; | ||
| line-height: 40px; | ||
| } | ||
| .article-feed .pagination-toolbar { | ||
| display: flex; | ||
| gap: 10px; | ||
| } | ||
| } | ||
| /* SPINNER */ | ||
| .spinner { | ||
| border: 2px dotted var(--color-gray-100); | ||
| border-bottom: 2px dotted var(--color-gray-200); | ||
| border-left: 2px dotted var(--color-gray-400); | ||
| border-top: 2px dotted var(--color-gray-800); | ||
| border-radius: 50%; | ||
| width: 1.6rem; | ||
| height: 1.6rem; | ||
| -webkit-animation: spin 2s linear infinite; | ||
| animation: spin 2s linear infinite; | ||
| } | ||
| @-webkit-keyframes spin { | ||
| 0% { | ||
| -webkit-transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: rotate(360deg); | ||
| } | ||
| } | ||
| @keyframes spin { | ||
| 0% { | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
| .article-card { | ||
| width: auto; | ||
| } |
Oops, something went wrong.