oracle banking digital experience · preface 1. intended audience this document is intended for the...
Post on 08-Jun-2020
10 Views
Preview:
TRANSCRIPT
Copyright © 2016, Oracle and/or its affiliates. All rights reserved.
Oracle Banking Digital Experience
Release 16.2.0.0.0
October 2016
Reference User Interface Style Guide
Part No. E79009-01
Reference User Interface Style Guide
October 2016
Oracle Financial Services Software Limited
Oracle Park
Off Western Express Highway
Goregaon (East)
Mumbai, Maharashtra 400 063
India
Worldwide Inquiries:
Phone: +91 22 6718 3000
Fax:+91 22 6718 3001
www.oracle.com/financialservices/
Copyright © 2016, Oracle and/or its affiliates. All rights reserved.
Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.
U.S. GOVERNMENT END USERS: Oracle programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, delivered to U.S. Government end users are “commercial computer
software” pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations. As such, use, duplication, disclosure, modification, and adaptation of the programs, including any operating system, integrated
software, any programs installed on the hardware, and/or documentation, shall be subject to license terms and license restrictions applicable to the programs. No other rights are granted to the U.S. Government.
This software or hardware is developed for general use in a variety of information management applications. It is not developed or intended for use in any inherently dangerous applications, including applications that may create a risk of personal
injury. If you use this software or hardware in dangerous applications, then you shall be responsible to take all appropriate failsafe, backup, redundancy, and other measures to ensure its safe use. Oracle Corporation and its affiliates disclaim any
liability for any damages caused by use of this software or hardware in dangerous applications.
This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by
law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish or display any part, in any form, or by any means. Reverse engineering, disassembly, or decompilation of this software,
unless required by law for interoperability, is prohibited.
The information contained herein is subject to change without notice and is not warranted to be error-free. If you find any errors, please report them to us in writing.
This software or hardware and documentation may provide access to or information on content, products and services from third parties. Oracle Corporation and its affiliates are not responsible for and expressly disclaim all warranties of any kind
with respect to third-party content, products, and services. Oracle Corporation and its affiliates will not be responsible for any loss, costs, or damages incurred due to your access to or use of third-party content, products, or services.
2
Preface
1. Intended Audience
This document is intended for the following audience:
• Customers
• Partners
2. Documentation Accessibility
For information about Oracle's commitment to accessibility, visit the Oracle Accessibility Program website at
http://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc
3. Access to Oracle Support
Oracle customers have access to electronic support through My Oracle Support. For information, visit
http://www.oracle.com/pls/topic/lookup?ctx=acc&id=info or visit
http://www.oracle.com/pls/topic/lookup?ctx=acc&id=trs if you are hearing impaired.
4. Structure
This manual includes reference user interface style guide for Desktop, Tablet and Mobile.
It covers screen layout and UI components details.
3
Desktop
4
We follow a 12 column grid.
Totalling to 964px
Column to gutter ratio: 3.1:1
Background color = #f5f5f5
$overview-analysis-card-text-color: #1b6d69;
$overview-analysis-card-bg-color: #dcdcdc;
.overview.summary .oj-buttonset {
.oj-button.oj-selected{ background: $overview-analysis-card-bg-
color !important;
border: 1px solid $overview-analysis-
card-bg-color;
width: 92px;
label { color: $overview-analysis-card-text-
color !important;
font-size: 1.4rem !important;
font-weight: 600;
}
}
.oj-button.oj-default{ background: transparent !important;
label { color: #a6a6a6 !important;
font-size: 1.4rem;
font-weight: normal;
}
}
}
overview.scss
.oj-button.oj-selected
.oj-button.oj-default
label
Overview Dashboard
5
.oj-menu { font-size: 1.6rem !important;
color: #353535 !important;
}
.oj-menu-text-only > .oj-menu-item > a { padding-left: 1.75rem !important;
}
.header
$header-height: 60px;
$header-bg-color: #fff;
$h1-font-sizes: ( small: 1.6rem, medium: 2.4rem, large: 2.8rem);
$page-title-color: #1b6d69;
$menu-divider: #a6a6a6;
$menu-sub-divider: #dcdcdc;
.header{
.header-container { background: $header-bg-color;
height: $header-height;
@include header-box-shadow;
.comp-title h1 { @include font-size($h1-font-sizes);
color: $page-title-color;
}
}
.icon-logo {
height:45px; }
.icon-profile {
height:45px; }
. icon-logo .header-container .comp-title h1 .icon-profile
header.scss
override.scss
.oj-menu
.oj-menu-item
.oj-menu-item a
Header
6
.launcher {
.divider { border-top: 1px solid $menu-divider;
margin: -1px;
}
.oj-menu-item { border-bottom: 1px solid $menu-sub-divider;
}
}
.login-screen { width: 415px;
@include login-box-shadow;
padding-bottom: 36px;
label { color: #a6a6a6;
font-size: 1.4rem;
font-weight: normal;
margin-top: 0.4rem;
}
.password-text { margin-top: 30px !important;
}
}
.login-screen-margin { width: 95%;
margin: 20px auto;
.login-button-primary { background:$btn-primary-bg-color;
color:$btn-primary-text-color !important;
height:$action-btn-height;
font-size:$action-btn-font-size;
font-weight:normal;
max-width: 140px;
margin-top:20px;
}
Pre Login
7
.pre-login
.login-screen
.login-screen-margin
label
.login-screen input
pre-login.scss
.login-button-primary
Overview Dashboard – Module Colors
8
$demand-deposits: #64c6c1;
$demand-deposits-secondary: #1b6d69;
demand-deposits.scss
$loans: #d37da4;
$loans-secondary: #82345b;
loans.scss
$payments: #f7bd1c;
$payments-secondary: #e27933;
payments.scss
$term-deposits: #f8786b;
$term-deposits-secondary: #b84b40;
term-deposits.scss
$cards: #91a8d1;
$cards-secondary: #3d6092;
cards.scss
.term-deposits .demand-deposits
.cards .loans
.payments
.product-card-count .overview{
.product-card-count{ font-size: 50px;
font-weight:300;
}
.product-card-name { font-size: $card-title-size;
}
.product-card-icon{
img{ height:50px;
}
}
}
overview.scss .product-card-name
.product-card-icon
.product-card-bottom-panel .label
.product-card-bottom-panel .value
product-card border
Module Summary on Overview Dashboard
9
Module Dashboard
10
Card width = 4 columns + 3 gutters
Vertical Spacing
18px
Module
Dashboard
11
.summary-card
.product-card
.activity-history
.object-card .action-card
Module Dashboard
12
$panel-bg-color: #fff;
.dashboard .oj-panel { background: $panel-bg-color;
margin-bottom: 18px; (for vertical spacing)
padding: 19px 10px; (for panel spacing)
@include panel-box-shadow;
}
dashboard.scss
.summary-card { $summary-card-height: 492px;
}
summary-card.scss
.product-card { $product-card-height: 210px;
}
product-card.scss
.object-card { $object-card-height: 168px;
}
object-card.scss
.action-card { $action-card-height: 126px;
}
action-card.scss
.activity-history { $list-card-height: 564px;
}
activity-details.scss
.product-card-title
$card-title-size: 2rem;
$card-sub-title-size: 1.4rem;
$card-sub-title-color: #a6a6a6;
$card-count-size: 5.3rem;
$card-count-color: #fff;
$panel-value-color: #353535;
$card-amount-sizes: (
small : 2.4rem,
medium : 2.8rem,
large: 2.8rem );
.product-card{
&-title{ font-size:$card-sub-title-size;
color:$card-sub-title-color;
}
&-name{ font-size:$card-title-size;
color:$panel-title-color;
}
&-feature{ font-size:$card-sub-title-size;
color:$card-sub-title-color;
}
product-card.scss
.product-card-name
.product-card-bottom-panel .label
.product-card-bottom-panel .value
product-card border
.product-card-feature
&-bottom-panel{
.label{ font-size:$card-sub-title-size;
color:$card-sub-title-color;
}
.value{ @include font-size($card-
amount-sizes);
color:$panel-value-color;
}
}
(product-card border)
(module-name) .product-card { border-bottom: 4px solid (#module color) !important;
}
Product Summary on Module Dashboard
13
$object-container-card-height: 168px;
.object-card { height: $object-container-card-height;
&-title { @include panel-title; (refer mixin.scss)
}
.view-all { @include view-all; (refer mixin.scss)
}
.content {
.count { font-size: 2.8rem;
}
}
.bottom-panel-icon {
img { height: 58px;
width: 58px;
}
}
}
object-card.scss
.object-card-title
.object-card .content
.count
.bottom-panel-icon .object-card .content
$panel-title-size: 2.1rem;
$panel-title-color:#353535;
@mixin panel-title {
font-size:$panel-title-size;
color:$panel-title-color;
text-transform:uppercase; }
mixin.scss
.object-card .view-all
Object Card
14
.object-card .view-all .oj-button .fa
$link-text-color: #353535;
$link-arrow-color: #a6a6a6;
$right-arrow-link-size:350%;
@mixin view-all{
border-top:1px solid $app-border-color1;
height:41px;
padding:0 10px;
line-height:41px;
.oj-button{
text-transform: uppercase;
color:$link-text-color !important;
font-size: 1.6rem !important;
&:link,
&:hover,
&:active,
&:visited{
background:transparent;
text-decoration: none; }
}
.fa{
color:$link-arrow-color !important;
-webkit-text-stroke: .13em #fff;
font-size:160%;
position:relative;
top:4px;
right:20px; }
}
mixin.scss Object Card – View All
15
$action-card-height: 126px;
$action-card-desc-color: #a6a6a6;
$action-card-desc-size:1.4rem;
.action-card { height: $action-card-height;
&-title { @include panel-title; (refer mixin.scss)
}
&-desc{ font-size:$action-card-desc-size;
color:$action-card-desc-color;
}
&-icon{ position:absolute;
bottom: 0;
right: 0;
height:70px;
}
}
action-card.scss .action-card-title
.action-card-icon
.action-card-desc
Action Card
16
$list-card-height: 564px;
$activity-amt-size:2.1rem;
$activity-identifier-name:1.8rem;
$activity-identifier-sub:1.4rem;
$activity-amt-color:#353535;
$activity-identifier-color:#9b9b9b;
$activity-identifier-sub-color:#353535;
.activity-history { padding:19px 0 !important;
max-height:$list-card-height;
&-title { @include panel-title; (refer mixin.scss)
}
ul { margin-bottom: 20px;
}
ul li { min-height: 95px;
position: relative;
.activity-date { padding: 0;
color: $activity-identifier-sub-color;
font-size: $activity-identifier-sub;
}
activity-details.scss .activity-history-title
.activity-history .oj-select-choice
.activity-date
.activity-desc
.credit
.debit
.view-all
.activity-history ul li
.activity-amt
Mini Statement – Activity Details
17
.activity-desc { padding: 0;
color: $activity-identifier-
color;
font-size: $activity-identifier-
sub;
}
}
$credit-color : #353535;
$debit-color :#d9534f;
.activity-history {
.activity-amt { position: absolute;
bottom: 11px;
font-size: $activity-amt-size;
width: 97%;
}
.credit { color: $credit-color;
}
.debit { color: $red-color;
}
}
.oj-select-choice { font-size: $activity-identifier-name;
color: $activity-identifier-color;
padding: 0 !important;
margin-top: 50px;
border: 0;
height: 34px;
border-bottom: 0 !important;
}
activity-details.scss
.activity-history-title
.activity-history .oj-select-choice
.activity-date
.activity-desc
.credit
.debit
.view-all
.activity-history ul li
.activity-amt
Mini Statement – Activity Details ...contd
18
.view-all { @include view-all; (refer
mixin.scss)
}
}
Forms - Details
19
20
Savings & Current - Summary
21
.summary-card-title .summary-card-name
.summary-card-count
.summary-net-balance-heading
.summary-net-balance-amount
$card-amount-size: 2.8rem;
$summary-heading-color:#a6a6a6;
$summary-heading-size:1.4rem;
$summary-maturity-amount-color:#353535;
.summary-card{
&-title{
@include panel-title;
}
&-count{ font-size:$card-count-size;
color:$card-count-color;
font-weight: 600;
position: relative;
left: 10px;
top: -17px;
}
summary-card.scss
.summary-title-bar
&-name{ font-size:$card-title-size;
margin-left: 30px;
color: #fff;
font-weight:600;
top: 3px;
}
&-title-bar{ height:36px;
position: relative;
margin:20px 0 55px 0;
left:-10px;
}
}
.demand-deposits {
.summary-net-balance-amount { font-weight: 600;
font-size: 2.8rem;
color: $demand-deposits;
}
.summary-net-balance-heading {
font-size: $summary-heading-size;
color: $summary-heading-color;
}
demand-deposits.scss
22
Credit Cards - Summary
23
.summary-card-count
.summary-net-balance-heading
.summary-net-balance-amount
$cards:#91a8d1;
$cards-secondary:#3d6092;
.cards{
.summary-balance {
&-amount {
font-weight: 600;
font-size: 2.8rem;
color: $cards;
}
&-heading {
font-size: $summary-heading-size;
color: $summary-heading-color;
}
}
.summary-investment {
&-amount {
font-weight: 600;
font-size: 2.1rem;
color: $cards-secondary;
}
&-heading {
font-size: $summary-heading-size;
color: $summary-heading-color;
}
}
}
cards.scss
.summary-investment-heading
.summary-investment-amount
.summary-card-title .summary-card-name
.summary-title-bar
24
Loans - Summary
25
.summary-card-count
.summary-label-heading
.totalBorrow-value
$loans: #d37da4;
$loans-secondary: #82345b;
.summary-card {
&-title-bar { background: $loans;
}
}
.summary-label {
&-heading { color: $summary-heading-color;
font-size: $summary-heading-size;
}
}
.totalBorrow-value { font-size: 2.8rem;
color: $loans;
}
.outstanding-value { font-size: 2.8rem;
color: $loans-secondary;
}
loans.scss
.summary-label-heading
. outstanding-value
.summary-card-title .summary-card-name
.summary-title-bar
26
Term Deposits - Summary
27
.summary-card-count
.summary-investment-heading
.summary-investment-amount
$term-deposits:#f8786b;
$term-deposits-secondary:#b84b40;
.summary-maturity{
&-amount { font-weight: 600;
font-size: 2.1rem;
color: $summary-maturity-amount-color; }
}
.summary-balance{
&-amount { font-weight: 600;
font-size: 2.8rem;
color: $term-deposits; }
&-chart svg g{
stroke: $term-deposits; }
}
.summary-investment{
&-amount { font-weight: 600;
font-size: 2.1rem;
color: $term-deposits;
}
&-chart svg rect{
fill: $term-deposits-secondary;
}
}
term-deposits.scss
.summary-maturity-heading
.summary-maturity-amount
.summary-card-title .summary-card-name
.summary-title-bar
.summary-balance-heading
.summary-balance-amount
Forms - Details
28
$highlight-text: 2.1rem;
$label-text:#a6a6a6;
$label-text-size: 1.5rem;
$form-heading-title-size:1.8rem;
$form-heading-title-color:#a6a6a6;
$form-heading-title-border:#dcdcdc;
$cust-details-color:#a6a6a6;
$cust-name-size:1.8rem;
$cust-details-heading-size:1.6rem;
$form-container-text-size:1.8rem;
.form-main-container { background: $white-color;
font-size: $form-container-text-size;
@include panel-box-shadow;
.form-title-heading { text-align: center;
border-bottom: 1px solid $form-heading-title-border;
line-height: 0.05em;
width:70%;
margin: 48px auto 0 auto;
.title-size { background: $product-main-container;
padding: 0 15px;
color: $form-heading-title-color;
font-size: $form-heading-title-size;
}
}
forms.scss
.cust-name
.cust-details-heading
.horizontal-line
.form-title-heading
.title-size
.form-main-container
label
.form-container
.highlight-text
.form-button-primary
.form-button-secondary
.highlight-text
.oj-row
(for spacing)
panel-box-shadow
.oj-select-choice
Forms - Details ... Contd.
29
.form-container { margin: 42px auto -18px;
.oj-row { padding-bottom: 18px;
}
label { color: $label-text;
font-size: $label-text-size;
font-weight: normal;
}
.highlight-text { font-size: $highlight-text;
}
.cust-name { font-size: $cust-name-size;
color: $cust-details-color;
}
.cust-details-heading { font-size: $cust-details-heading-size;
color: $cust-details-color;
.oj-select-choice { color: $cust-details-color;
margin-bottom: 20px;
font-size: $cust-details-heading-size; }
}
.horizontal-line { width: 200px;
margin: 15px auto 20px auto;
}
forms.scss
.cust-name
.cust-details-heading
.horizontal-line
.form-title-heading
.title-size
.form-main-container
label
.form-container
.highlight-text
.form-button-primary
.form-button-secondary
.highlight-text
.oj-row
(for spacing)
panel-box-shadow
.oj-select-choice
Forms - Review
30
$review-heading-size:1.8rem;
.form-main-container{
.form-container {
.review .form-title-heading {
.title-size { font-size: $review-heading-size;
}
}
}
}
forms.scss
.title-size
.form-main-container
.form-container
.review
Forms
31
$control-sizes: 1.8rem;
$control-sizes-small: 1.4rem;
$control-border-color: #a6a6a6;
$control-dropdown-border-color: #dcdcdc;
$control-dropdown-bg-color: #f5f5f5;
$control-dropdown-text-size: 1.6rem;
$control-dropdown-color: #353535;
.oj-select, .oj-inputtext, .oj-inputpassword,
.oj-textarea, .oj-inputtext-nocomp,
.oj-inputpassword-nocomp,
.oj-textarea-nocomp,
.oj-inputdatetime-input-container { font-size: $control-sizes;
}
.oj-inputtext-input, .oj-inputpassword-input { height: 2.3rem;
}
.oj-select-choice, .oj-textarea, .oj-inputtext-nocomp,
.oj-inputpassword-nocomp, .oj-textarea-nocomp,
.oj-inputtext-input, .oj-inputpassword-input { border: 0 !important;
border-bottom: 1px solid $control-border-color !important;
background: transparent !important;
border-radius: 0;
}
.oj-inputtext.oj-read-only .oj-inputtext-input { font-size: $control-dropdown-text-size;
}
forms.scss
.oj-listbox-results li
.oj-inputtext-input
.oj-inputdatetime-input
.oj-select,
.oj-select-choice
Forms ... Contd.
32
$control-sizes: 1.8rem;
$control-sizes-small: 1.4rem;
$control-border-color: #a6a6a6;
$control-dropdown-border-color: #dcdcdc;
$control-dropdown-bg-color: #f5f5f5;
$control-dropdown-text-size: 1.6rem;
$control-dropdown-color: #353535;
.oj-select,
.oj-select-choice { color: $control-dropdown-color;
}
.oj-listbox-results {
li { padding: 14px 8px;
border-bottom: 1px solid $control-dropdown-border-color
!important;
background: $control-dropdown-bg-color;
color: $control-dropdown-color;
font-size: $control-dropdown-text-size;
}
}
.oj-inputdatetime-input-container {
.oj-inputdatetime-input { border: 0 !important;
background: transparent !important;
border-bottom: 1px solid $control-border-color !important;
}
}
forms.scss
.oj-inputtext-input
.oj-inputdatetime-input
.oj-select,
.oj-select-choice
.oj-listbox-results li
In Form Buttons
33
.form-button-primary .form-button-secondary
$form-btn-height: 34px;
$form-btn-font-size: 1.6rem;
$form-btn-width:124px;
$form-btn-link-width:120px;
$btn-primary-bg-color : #42c5be;
$btn-primary-border-color: transparent;
$btn-primary-hover-bgcolor: transparent;
$btn-primary-hover-border-color: transparent;
$btn-primary-text-color:#fff;
$btn-secondary-bg-color : #e9e9e8;
$btn-secondary-border-color: transparent;
$btn-secondary-hover-bgcolor: transparent;
$btn-secondary-hover-border-color: transparent;
$btn-secondary-text-color:#126863;
$btnset-secondary-bg-color:#e9e9e8;
$btnset-primary-bg-color:#a6a6a6;
$btn-disabled-text-color:#a6a6a6;
$btnset-width:120px;
buttons.scss
.oj-buttonset
.oj-button.oj-selected
.oj-buttonset
.oj-button.oj-default
.form-button-link
Toggle Buttons
End Form Buttons
34
.action-button-primary .action-button-secondary
$action-btn-height: 44px;
$action-btn-font-size: 1.8rem;
$action-btn-link-width:200px;
$btn-primary-bg-color : #42c5be;
$btn-primary-border-color: transparent;
$btn-primary-hover-bgcolor: transparent;
$btn-primary-hover-border-color: transparent;
$btn-primary-text-color:#fff;
$btn-secondary-bg-color : #e9e9e8;
$btn-secondary-border-color: transparent;
$btn-secondary-hover-bgcolor: transparent;
$btn-secondary-hover-border-color: transparent;
$btn-secondary-text-color:#126863;
buttons.scss
.action-button-link
.action-button-icon
Confirmation Page
35
$confirm-text-size:1.6rem;
$confirm-color:#353535;
$message-font-sizes: ( small: 2.4rem, medium: 3.2rem, large:
3.2rem);
.confirm-container {
img{ height:150px;
position:relative;
} position: relative;
.confirm {
&-text-heading { @include font-size($message-font-sizes);
color: $confirm-color;
margin: 0 0 30px;
}
&-text { font-size: $confirm-text-size;
color: $confirm-color;
margin: 0 0 18px;
}
}
}
confirm.scss
.confirm-container
img
.confirm-text-heading
.confirm-text
Statement
36
.form-row-highlighted
.grid-sub-header
.activity-btn-container
.grid-table-header
.bal-amt-text
.dateBlock .ref-no-text
.debit
$form-row-highlighted:#ededed;
$form-row-highlighted-height:72px;
$grid-sub-header-bg:#ededed;
$grid-table-header-height:59px;
$grid-table-header-bg:#ededed;
$grid-sub-header-border:#cdcdcd;
$grid-table-header-color:#353535;
$grid-table-header-sort-
color:#a6a6a6;
$credit-color:#353535;
$pagination-text-size:1.4rem;
$highlight-grid-text: ( small: 1.8rem,
medium: 1.8rem, large: 2.1rem);
$ref-no-size:1.4rem;
$ref-no:#a6a6a6;
$bal-amt-size:1.6rem;
$bal-amt:#a6a6a6;
activity-details.scss
$date-text-size: 2.8rem;
$month-text-size: 1.4rem;
$date-text-size-medium: 2.4rem;
$month-text-size-medium: 1.2rem;
date-block.scss
Payments Overview
37
.activity-history (refer activity-details.scss)
.action-card (refer action-card.scss)
.payment-card (refer payment-card.scss)
.activity-history
.payment-card
.action-card
$payments:#f7bd1c;
.repeat { background: $payments;
border-radius: 15px;
height: 24px;
width: 80px;
}
payments.scss .activity-history-title *
.activity-date *
.activity-desc *
.debit *
.view-all **
.activity-history ul li *
.activity-amt *
.repeat
*Refer activity-details.scss
**Refer mixin.scss
Payments – Upcoming Payments
38
$payment-card-height: 168px;
$payment-features:#a6a6a6;
.payment-card { cursor: pointer;
height: $payment-card-height;
&-title { @include panel-title; (refer mixin.scss)
}
&-description { line-height: 100%;
color:$payment-features;
font-size: 1.4rem;
}
&-icon { position: absolute;
right: 17px;
bottom: 49px;
img { width: 70px;
height: 100%;
}
}
.view-all { @include view-all; (refer mixin.scss)
}
}
payment-card.scss
.payment-card-title
.payment-card-description .payment-card-icon
.object-card .view-all
Payments Card
39
Payments – Manage Payees Dashboard
40
$payee-container-card-height: 168px;
$payee-card-title-color:#353535;
$payee-card-title-size:1.8rem;
$badge-color:#126864;
.payee-card {
.oj-panel { height: $payee-container-card-height;
}
&-title { font-size: $payee-card-title-size;
color: $payee-card-title-color;
}
}
.bottom-panel-icon { left: 10px;
bottom: 20px;
img.icon-recipients { height: 58px;
width: 58px;
}
}
.badge.badge-success { background: $payments;
color: $payee-card-title-color; }
payee-card.scss
Payments – Payee Card
41
.payee-card .oj-panel
.payee-card-title
.badge.badge-success .icon-recipients
.user-bg-corner
.bottom-panel-icon .user-bg-corner img {
height: 90px;
top: -30px;
position: relative;
right: 0;
}
$add-new-text-size: 2.1rem;
$add-new-text-color: #a6a6a6;
.add-new{ position : relative;
height:100%;
&-icon{ padding-top:18%;
padding-bottom:10px;
img{ height:36px;
}
}
&-text{ font-size:$add-new-text-size;
color:$add-new-text-color;
}
}
add-new.scss
Payments – Payee Card
42
.payee-card .add-panel.oj-panel
.add-new-icon
.add-new-text
Payments – New Payee
43
.question-text
.payee-card-dialog
.action-button-primary .vertical-ruler
img
$add-new-text-size: 2.1rem;
$add-new-text-color: #a6a6a6;
.payee-card{
&-dialog {
img { height: 90px;
}
}
.close{ height: 24px;
}
.vertical-ruler { border-right: 1px solid $dialog-border-color;
}
}
.action-button-primary (refer buttons.scss)
add-new.scss
Payments – Manage Payees
44
.payee-sub-list
$payee-name-color:#a6a6a6;
$payee-name-size:1.6rem;
$payee-name-size-small:1.6rem;
$question-text-color:#a6a6a6;
.payee-sub-list{
.payee-account{
&-name{ font-size: $payee-name-size;
color: $payee-name-color;
padding:5px;
margin-bottom: 10px;
}
&-icon{ height:40px;
display:inline-block;
img{ height:40px;
}
}
}
}
.question-text{ color:$question-text-color;
}
payee.scss
.payee-account-icon
.payee-account-name .payee-data-card
Payments – Manage Payees ... Contd.
45
.payee-sub-list
$payee-data-container-
card-height: 168px;
.payee-data-card { cursor: pointer;
height: $payee-data-container-card-height;
&-title { @include panel-title;
text-transform:capitalize;
font-size:$payee-card-title-size;
}
&-icons{
img{ height:48px;
position:absolute;
top:0;
right:0;
}
}
payee-data-card.scss
.payee-account-icon
.payee-account-name .payee-data-card
.payee-data-card-title .payee-data-card-features .payee-data-card-icons
.feature-group
.feature
&-features{ font-size:$card-sub-title-size;
color:$card-sub-title-color;
.feature-group{ position:relative;
bottom:-10px;
.feature{ padding-bottom: 4px;
}
.feature-list{ padding-bottom: 18px;
}
}
}
}
Payments – Manage Payees... Contd.
46
.payee-sub-list
.payee-component-icon{ height:90px;
}
payee.scss
.payee-account-icon
.payee-account-name .payee-details
.payee-component-icon
Heading and
Details are
standard as
shown in
slide # 21
Form-Details
Error Message
47
.error-text
.error-container
.error-btn
$error-text-size: 1.5rem;
$error-color: #353535;
$message-font-sizes: ( small: 2.4rem, medium: 3.2rem,
large: 3.2rem);
$error-button-color :#42c5be;
error.scss
Calculator
48
.form-title-heading
.title-size
.error-container
.highlighted-text
.calculator{
.form-main-container .form-title-heading {
.title-size { font-size: 2.1rem;
}
}
.oj-inputtext-input { color: #353535;
font-size: 2.4rem;
&.highlighted-text { font-size: 2.8rem;
}
}
}
calculator.scss
label
Profile
49
.add-profile-icon
Heading and
Details are
standard as
shown in
slide # 21
Form-Details
.add-profile-icon{
height: 90px;
}
forms.scss
(refer constant.scss
for variables)
.application-summary-card{ background: $app-summary-card ;
font-size: 15px;
color :$app-summary-card-text;
border:1px solid $app-summary-card-border;
.application-summary-title{ font-size: 18px;
color :$app-summary-card-text;
}
.application-card-row{ margin-top: 10px;
}
}
.progress-bar{ width: 200px;
height: 18px;
margin:10px 0;
}
.application-status-text { font-weight: bold;
}
.oj-progressbar-value { background: $green-color;
}
My Application – App Tracker
50
.application-summary-card
.application-summary-title
.application-status-text
.progress-bar
track-application.scss
(refer constant.scss
for variables)
.upl-tracking-component{
.section-heading{
color: $app-heading-text-color;
font-size: 15px;
}
.pending-actions-container{ background-color: $offers-bgcolor;
padding: 10px;
border:1px solid $offers-border-color;
color:$offers-text-color;
.pending-text{ color:$offers-text-color;
}
.action-button{ background-color:$white-color;
}
}
.view-list-container{
margin-top: 15px;
margin-bottom: 15px;
}
Application Dashboard
51
upl-tracking.scss
.upl-tracking-component
.section-heading
.view-list-container
.pending-actions-container
Status History
52 .status-history-card
(refer constant.scss
for variable)
.status-history-card{
background: $offers-bgcolor;
height: 170px;
margin-bottom: 10px;
padding: 10px;
font-size: 15px;
color :$offers-text-color;
border:1px solid $offers-border-color;
.application-card-row{
margin-top: 10px;
}
.highlighted-text{
color: $offers-text-color;
}
}
upl-tracking.scss
.application-card-row
.highlighted-text
(refer constant.scss
for variables)
.accordion {
.card { background-color: $card-bg-color;
color: $card-text-color;
.card-header { background:$card-header-bg-color;
border-bottom:1px solid $card-border-color;
padding: 20px;
margin:0 10px;
.card-title{ color: $card-header-text-color;
font-size:$card-title-size;
padding-left:10px;
}
.fa { color: $card-header-icon-color;
font-size:$card-title-size;
}
.card-icon{ height: 45px;
}
}
Origination - Closed Accordion
53
.accordion
.card .card-header
.card-icon .fa .card-title
accordion.scss
Origination - Open Accordion
54
(refer constant.scss
for variables)
.accordion {
.card {
&.active {
& .card-header { background: $card-active-header-bg-color;
border-bottom:1px solid $card-active-
header-border-color;
.card-title{ color: $card-active-header-text-color;
font-weight: 600;
}
}
}
accordion.scss
Heading and
Details are
standard as
shown in
slide # 21
Form-Details
.card .active .card-header
.card-title
Mobile
55
We follow a 12 column grid.
9px space left on either side.
Column to gutter ratio = 1.6:1
Background color = #F5F5F5
56
Header $header-height-small:48px;
.header {
.header-container {
@include mq(small) { padding-top:6px;
height: $header-height-small;
}
.comp-title h1 {
@include mq(small) { line-height: $header-height-small;
font-weight: 600;
}
.icon-back-arrow {
@include mq(small) { height: 30px;
padding: 10px 0 0;
}
.icon-profile {
@include mq(small) { height: 35px;
}
}
header.scss
.icon-logo {
@include mq(small) { display: block;
height: 35px;
left:10px;
}
}
.header-container
.icon-logo .icon-profile
.comp-title h1
57
Module Summary on Overview Dashboard
For the Summary cards on the Dashboard, the vertical heights,
font sizes and colors are exactly the same as on the Desktop.
Please refer to the Desktop standards for specs.
58
Module Summary Card
.summary-card
.summary-card{ height: 390px;
}
For the Summary Visualization Cards, please take the font
sizes, colors, and graph shadow values from the Desktop >>
Summary Card standards.
summary-card.scss
59
Product Cards
.product-card
For the Product Cards, please take the font sizes, colors, and
graph shadow values from the Desktop standards.
Please refer to the Desktop >> Product Cards standards for
specs.
product-card.scss
.form-main-container {
.form-title-heading {
@include mq(small) { margin: 36px 0 0 0;
width:100%;
}
}
.form-container {
@include mq(small) { margin: 28px auto 0;
}
}
} For the Forms, please take the font sizes and colors of
Customer Details, Labels, Input Text, Combobox and Bottom
Buttons (In forms and End form) from the Desktop standards.
Please refer to the Desktop >> Forms standards for specs.
$form-btnset-font-size-small: 1.4rem;
$btnset-width-small: 75px;
60
Forms forms.scss
.form-main-container
.form-container
.oj-buttonset
buttons.scss
61
Confirmation
.confirm-text-heading
$message-font-sizes:
( small: 2.4rem,
medium: 3.2rem,
large: 3.2rem);
For the Confirmation Screen, please take the font sizes,
colors and bottom buttons from the Desktop standards.
Please refer to the Desktop >> Confirmation Page
standards for specs.
confirm.scss
62
Payments – Manage Payee
.payee-card {
.user-bg-corner img {
height: 65px;
top: -28px;
position: relative;
right: -12px;
}
}
For the Payments – Manage Payee, please take the font
sizes, colors and bottom buttons from the Desktop
standards.
Please refer to the Desktop >> Payments >> Mange
Payee standards for specs.
payee-card.scss
.confirm-text-heading
63
Payments – Add New Manage Payee Dialog
.payee-card-dialog {
img {
height: 60px;
}
}
For the Payments – Manage Payee, please take the font sizes,
colors and bottom buttons from the Desktop standards.
Please refer to the Desktop >> Payments >> Mange Payee
standards for specs.
payee-card.scss
.payee-card-dialog
img
64
Payments – Add New Payee
.payee-account-icon
img
.payments{
.payee-account-icon {
img {
height: 60px;
}
}
For the Payments – Manage Payee, please take the font
sizes, colors and buttons from the Desktop standards.
Please refer to the Desktop >> Payments >> Mange
Payee standards for specs.
payments.scss
65
Statement
.grid-main-container
.last-activity
img .grid-main-container
.last-activity
.label
.balance-header
.activity-date .ref-no-text
.activity-desc .activity-amt .debit
.credit
$activity-amt-size : 2.1rem;
$last-activity-color: #42c5be;
$activity-date-size: 1.4rem;
$activity-desc-size: 1.4rem;
$activity-desc-color: #a6a6a6;
$ref-no-size: 1.4rem;
$ref-no: #a6a6a6;
$bal-amt-size:1.6rem;
$bal-amt: #a6a6a6;
$credit-color: #353535;
$highlight-grid-text: ( small: 1.8rem, medium: 1.8rem, large:
2.1rem);
activity-details.scss
.bal-amt-text
top related