oracle banking digital experience · preface 1. intended audience this document is intended for the...

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



http://www.oracle.com/pls/topic/lookup?ctx=acc&id=info

http://www.oracle.com/pls/topic/lookup?ctx=acc&id=trs

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;


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;


}

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;


}

.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;


}

&-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;


}

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-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

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

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 {



}

}

.summary-investment {

&-amount {

font-weight: 600;

font-size: 2.1rem;

color: $cards-secondary;

}

&-heading {



}

}

}

cards.scss

.summary-investment-heading

.summary-investment-amount


.summary-title-bar

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;


}

}

.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-title-bar

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{


font-size: 2.8rem;

color: $term-deposits; }

&-chart svg g{

stroke: $term-deposits; }

}

.summary-investment{


font-size: 2.1rem;

color: $term-deposits;

}

&-chart svg rect{

fill: $term-deposits-secondary;

}

}

term-deposits.scss

.summary-maturity-heading

.summary-maturity-amount


.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;


}

.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


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-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;


$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;


}

&-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;


}

&-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;


.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


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;


}

Application Dashboard

51

upl-tracking.scss

.upl-tracking-component

.section-heading

.view-list-container

.pending-actions-container

Status History

52 .status-history-card


for variable)

.status-history-card{

background: $offers-bgcolor;

height: 170px;


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


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


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-container

.oj-buttonset

buttons.scss

61

Confirmation


$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


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);


.bal-amt-text

oracle banking digital experience · preface 1. intended audience this document is intended for the...

Documents