Product Customization Guide

Table of Contents
01 CALCULATOR STRUCTURE
1.1 Colors
1.2 Input
1.3 Output
1.4 Comparator
1.5 Footer
1.6 RPGD

02 RE CONTRACTING
2.1 Steps
2.2 Body(PT)
2.2 Body (CA)

03 CONTRACTING

04 POP UP ALERTS

05 COMPONENTS
5.1 Buttons
5.2 Date Picker
5.3 Modal
5.4 Alerts
5.5 Carousel
5.6 Table

06 CONTACT
6.1 Form
6.2 Result
6.3 Conclusion
 01
Calculator Structure
1 Calculator Structure
Lorem ipsum dolor sit amet, consec-
tetuer adipiscing elit, sed diam nonum-
my nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nos-
trud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure
INPUT OUTPUT
dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla
facilisi.
Lorem ipsum dolor sit amet, cons
ectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consec-
tetuer adipiscing elit, sed diam nonum-
my nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut COMPARATOR
wisi enim ad minim veniam, quis nos-
trud exerci tation ullamcorp

FOOTER
 1.1
Calculator Structure | Colors
1.1 Calculator Structure | Colors

Main Colors

Main Color Secondary Color Third Color

#2A7DE1 #FBB040 #FFB71B
42, 125, 225 251, 176, 225 255, 183, 27

Other Colors

Dark Grey Light Grey Light Blue

#D6D6D6 #F8F8F8 #F3F5F7
214, 214, 214 248, 248, 248 243, 246, 247
 1.2
Calculator Structure | Input
1.2 Calculator Structure | Input
1.2 Calculator Structure | Input

@calculator_background-color: #FFFFFF;
@calculator_box-shadow: none;
@calculator_border-radius: 0px;
@calculator_padding: 25px 35px;
@calculator_border: 1px solid #D6D6D6;

@calcOutputConditionsList_font-family: @medium;
@calcOutputConditionsList_font-size: 11px;
@calcOutputConditionsList_color: #323E48;
@calcOutputConditionsList_line-height: 12px;
1.2 Calculator Structure | Input

@sliderHeight: 6px;
@sliderColor: @MainColor;
@sliderColor2: #F0F0F0;
@sliderColorThumb: @MainColor;
@sliderColorThumbBorder: @MainColor;
@sliderHeightMobile: 9.5px;
1.2 Calculator Structure | Input

Label icon

@tooltip_infoTooltip_width: 18px;
@tooltip_infoTooltip_height: 18px;
@imgTooltip: url('../images/generic/tooltip_icon.svg');

Balloon

@tooltip_background: @white;
@tooltip_font-family: @regular;
@tooltip_font-size: 12px;
@tooltip_line-height: 14px;
@tooltip_color: #323E48;
@tooltip_border-radius: 5px;
1.2 Calculator Structure | Input

Dropdown

@expandable_font-family: @semibold;
@expandable_font-size: 15px;
@expandable_color: @SecondaryColor;
@expandable_width: 100%;
@expandable_height: 65px;
@expandable_border-top: 1px solid #F2F2F2;
@expandable_border-bottom: 1px solid #F2F2F2;

@imgDownArrow: url('../images/generic/ic_ot_down.svg');

@imgUpArrow: url('../images/generic/ic_ot_up.svg'');
1.2 Calculator Structure | Input

Generic – Text/Email/Dropdown/Datepicker

@inputTitle_font-family: @medium;
@inputTitle_font-size: 14px;
@inputTitle_color: #323E48;

@input_height: 30px;
@input_background: @white;
@textColor: #323E48;
@input_border: 1px solid #D6D6D6;
@input_border-radius: 3px;
@input_font-family: @medium;
@input_font-size: 14px;
@input_font_color: #323E48;
@input_line-height: 26px;
@input_text-align: left;
@input_padding: 0 15px;
1.2 Calculator Structure | Input

Radio

@formRadio_font-family: @regular;
@formRadio_color: #323E48;
@formRadio_font-size: 14px;
@formRadio_line-height: 23px;
@formRadio_font-weight: normal;

@inputRadio_width: 16px;
@inputRadio_height: 16px;
@inputRadio_border-radius: 50%;
@inputRadio_background-color: @white;
@inputRadio_border: 1px solid @MainColor;

@inputRadioActive_background-color: @MainColor;
@inputRadioActive_border: none;
@inputRadioActive_box-shadow: none;
1.2 Calculator Structure | Input

@calcOutputHead_background-color: #F3F5F7;
@calcOutputHead_box-shadow: 0 2px 10px 0 rgba(0,0,0,0.09);
@calcOutputHead_padding: 25px 0;
@calcOutputHead_default_font-family: @semibold;
@calcOutputHead_default_font-size: 15px;
@calcOutputHead_default_line-height: 28px;
@calcOutputHead_default_color: #323E48;
 1.3
Calculator Structure | Output
1.3 Calculator Structure | Output
1.3 Calculator Structure | Output

@outputPayment_generic_height: 90px;
@outputPayment_width: 60%;
@outputPayment_height: 90px;
@outputPayment_background: @MainColor;
@outputPayment_padding: 15px 10px;
@outputPayment_font-size: 12px;
@outputPayment_line-height: 12px;
@outputPayment_color: @white;
@outputPayment_margin: 0;
@outputPayment_dataInfo_font-size: 26px;
@outputPayment_dataInfo_color: @white;
@outputPayment_dataInfo_line-height: 38px;

@output-paymentv2_width: 40%;
@output-paymentv2_background: @MainColor;
@output-paymentv2_height: 90px;
@output-paymentv2_padding: 5px 10px;
@output-paymentv2_margin-bottom: 5px;
@output-paymentv2_font-size: 12px;
@output-paymentv2_line-height: 12px;
@output-paymentv2_color: @white;
@outputPaymentv2_dataInfo_font-size: 15px;
@outputPaymentv2_dataInfo_color: @white;
@outputPaymentv2_dataInfo_line-height: 16px;
@outputPaymentv2_dataInfo_padding-left: 5px;
1.3 Calculator Structure | Output

@outputOthers_align-items: center;
@outputOthers_background-color: #E0EBFF;
@outputOthers_height: 50px;
@outputOthers_margin-bottom: 0;
@outputOthers_font-weight: normal;
@outputOthers_font-size: 14px;
@outputOthers_line-height: 14px;
@outputOthers_color: #323E48;
@outputOthers_span_font-weight: normal;
@outputOthers_span_font-size: 14px;
@outputOthers_span_line-height: 14px;
@outputOthers_span_color: #323E48;
1.3 Calculator Structure | Output

@outputOptions_height: 120px;
@outputOptions_width: 20%;
@outputOptions_background-color: @white;
@outputOptions_margin: 0;
@outputOptions_fieldImage_height: 40px;

@outputOptions_fieldText_height: 35px;
@outputOptions_fieldText_margin-top: 5px;
@outputOptions_fieldText_color: #323E48;
@outputOptions_fieldText_font-size: 10px;
@outputOptions_fieldText_font-weight: 300;
@outputOptions_fieldText_line-height: 11px;

@outputOptions_image_height: 34px;
@outputOptions_image_width: 34px;
@outputOptions_image_cursor: pointer;
@outputOptions_image_margin: 0 auto;

@imgFIN: url('../images/calculator/fin.svg');
@imgEmail: url('../images/calculator/email.svg');
@imgComparator: url('../images/calculator/comparator.svg');
@imgPDF: url('../images/calculator/pdf.svg');
@imgPlan: url('../images/calculator/plan.svg');
@imgScenarios: url('../images/calculator/scenarios.svg');
@imgSave: url('../images/calculator/ic_ac_save.svg');
1.3 Calculator Structure | Output

@calcExpand_height: 40px;
@calcExpand_background-color: #F0F0F0;
@calcExpand_cursor: pointer;
@calcExpand_border-right: 1px solid white;
@PlusImgHover: url('../images/generic/expand_hover.svg');
@MinusImgHover: url('../images/generic/minimize_hover.svg');

07 Simulator (PT) - Credit Result

@calcExpanded_height: 40px;

@calcExpanded_span_title_color: @labelColor;
@calcExpanded_span_title_font-family: @regular;
@calcExpanded_span_title_font-weight: 300;
@calcExpanded_span_title_font-size: 14px;
@calcExpanded_span_title_line-height: 18px;

@calcExpanded_span_value_color: @labelColor;
@calcExpanded_span_value_font-family: @regular;
@calcExpanded_span_value_font-weight: 300;
@calcExpanded_span_value_font-size: 14px;
@calcExpanded_span_value_margin: 0 0 0 5px;
1.3 Calculator Structure | Output
1.3 Calculator Structure | Output

@calcOutputHead_background-color: #F3F5F7;
@calcOutputHead_box-shadow: 0 2px 10px 0 rgba(0,0,0,0.09);
@calcOutputHead_padding: 25px 0;
@calcOutputHead_default_font-family: @semibold;
@calcOutputHead_default_font-size: 15px;
@calcOutputHead_default_line-height: 28px;
@calcOutputHead_default_color: #666666;

@calcOutputHead_text_font-family: @semibold;
@calcOutputHead_text_font-size: 27px;
@calcOutputHead_text_line-height: 32px;
@calcOutputHead_empty_font-family: @semibold;
@calcOutputHead_empty_font-size: 27px;
@calcOutputHead_empty_line-height: 32px;
@calcOutputHead_empty_color: @MainColor;
1.3 Calculator Structure | Output

@calcOutputHead_value_font-family: @semibold;
@calcOutputHead_value_font-size: 40px;
@calcOutputHead_value_line-height: 42px;
@calcOutputHead_value_color: @MainColor;
@calcOutputHead_value_margin: 4px 0 0 0;
@calcOutputHead_decimal_font-family: @semibold;
@calcOutputHead_decimal_font-size: 24px;
@calcOutputHead_decimal_line-height: 26px;
@calcOutputHead_decimal_color: @MainColor;

@calcOutputHead_years_font-family: @semibold;
@calcOutputHead_years_font-size: 40px;
@calcOutputHead_years_line-height: 42px;
@calcOutputHead_years_color: @MainColor;

@calcOutputHead_months_text-align: center;
@calcOutputHead_months_font-family: @semibold;
@calcOutputHead_months_font-size: 20px;
@calcOutputHead_months_line-height: 38px;
@calcOutputHead_months_color: @MainColor;
1.3 Calculator Structure | Output

@calcOutput_output_width: 90%;
@calcOutput_output_margin: 0 auto;
@calcOutput_output_border-top: 1px solid #CCCCCC;
@calcOutput_output_padding: 45px 0;

@calcOutput_elem_margin: 0 0 25px 0;
@calcOutput_elem_padding: 0 0 0 70px;

@calcOutputElemImg_width: 40px;
@calcOutputElemImg_height: 40px;

@calcOutputText_font-family: @regular;
@calcOutputText_font-size: 16px;
@calcOutputText_color: #323E48;
@calcOutputText_font-weight: normal;
@calcOutputText_line-height: 22px;

@calcOutputValue_font-family: @semibold;
@calcOutputValue_font-size: 16px;
@calcOutputValue_color: #323E48;
@calcOutputValue_font-weight: normal;
@calcOutputValue_line-height: 28px;
1.3 Calculator Structure | Output

Label Image
Loan Payment @imgLoanAmount
Total interest over term @imgInterestOverTerm
Total payment amount @imgTotalInterest
Mortgage Amount @imgMortgageAmount
Mortgage default insurance @imgNetMortgageInsurance
Net mortgage amount @imgNetMortgage
Amortization period @imgPeriod
Mortgage amount (comparator) @imgMonthly
Purchase price @imgPurchasePrice
Down payment @imgIndividualContributions
Mortgage product @imgMortgageProduct
Mortgage-free earlier @imgMortgageFreeEarlier
Total savings @imgSurplus
Balance owing at term @imgBalanceOwing
Government grants @imgGovernment
Projected earnings @imgEstimated
Estimated education costs @imgEducationCosts
Total @imgTotal
Age at last RRIF payment @imgAge
Prepayment type @imgPaymentType
Prepayment penalty method @imgIdea
You’ll save... @imgNotification
1.3 Calculator Structure | Output

@calcOutputOptions_height: 36px;
@calcOutputOptions_width: 36px;
@calcOutputOptions_font-family: @regular;
@calcOutputOptions_font-size: 13.3px;
@calcOutputOptions_line-height: 16px;
@calcOutputOptions_color: #323E48;
@calcOutputOptions_margin: 5px 0 0 0;
@calculatorOutput_options_background-position: center;
@calculatorOutput_options_background-size: 100% 100%;

@imgFullPLan: url('../images/calculator/plan.svg');
@imgPrint: url('../images/calculator/pdf.svg');
@imgSave: url('../images/calculator/ic_ac_save.svg');
@imgComparator: url('../images/calculator/comparator.svg');
 1.4
Calculator Structure | Comparator
1.4 Calculator Structure | Comparator

Comparator

@comparatorTitle_font-family: @semibold;
@comparatorTitle_font-size: 18px;
@compTitleColor: @MainColor;
@compTitleBorder: @MainColor;

@comparatorScenario_color: #323E48;
@comparatorScenario_font-family: @semibold;
@comparatorScenario_font-size: @defaultFontSize;
@comparatorScenario_line-height: 22px;
@comparatorEmptyScenario_min-height: 235px;
@comparatorEmptyScenario_text-align: center;
@comparatorEmptyScenario_background-color: @white;
@comparatorEmptyScenario_box-shadow: 0 4px 14px 0 rgba(0,0,0,0.1);
@comparatorEmptyScenario_border-radius: 5px;

@comparatorEmptyScenarioLabel_font-family: @regular;
@comparatorEmptyScenarioLabel_font-size: 12px;
@comparatorEmptyScenarioLabel_line-height: 18px;
@comparatorEmptyScenarioLabel_color: #323E48;
 1.5
Calculator Structure | Footer
1.5 Calculator Structure | Footer

@footer_width: 100%;
@footer_height: 45px;
@footer_mobile_height: 30px;
@footer_copyright_width: 250px;
@footer_copyright_heigth: 45px;
@footer_copyright_background-position: center;
@footer_copyright_background-size: 100% 100%;
@footer_p_width: 100%;
@footer_p_font-size: 14px;
@footer_p_line-height: 14px;
@footer_p_margin: 0;
@footer_p_top: 50%;
 1.6
Calculator Structure | RPGD
1.6 Calculator Structure | RPGD

@infoTextLabel_font-family: @regular;
@infoTextLabel_font-size: 12px;
@infoTextLabel_color: @labelColor;
@infoTextLabel_line-height: 18px;
@infoTextLabel_margin: 25px 15px;

@rpgd_font-family: @medium;
@rpgd_font-size: 12px;
@rpgd_color: @SecondaryColor;
@rpgd_line-height: 14px;
@rpgd_border: none;
@rpgd_padding: 0 15px;
@rpgd_height: 30px;
@rpgd_text-decoration: underline;
 02
Pre-Contracting
2 Structure STEPS
Lorem ipsum dolor sit amet, consec-
tetuer adipiscing elit, sed diam nonum-
my nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nos-
trud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla
facilisi.
Lorem ipsum dolor sit amet, cons
ectetuer adipiscing elit, sed diam Body
nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation

Footer
02 Pre-Contracting
 2.1
Pre Contracting | Steps
2.1 Pre-Contracting | Steps

@stepRequest_margin: 60px 0;
@stepRequest_li_height: 35px;
@stepRequest_li_background-color: #F2F2F2;
@stepRequest_li_text-align: left;
@stepRequest_li_margin: 0 1px;
@stepRequest_li_span_font-family: @regular;
@stepRequest_li_span_font-size: 14px;
@stepRequest_li_span_line-height: 18px;
@stepRequest_li_span_color: #444444;
@stepRequest_li_span_padding: 0 0 0 30px;
@stepRequest_li_active_background-color: #323E48;
@stepRequest_li_active_span_color: #FFFFFF;
@stepRequest_li_completed_background-color: #323E48;
@stepRequest_li_completed_span_color: #FFFFFF;
@stepRequest_mobile_margin: 65px 0 35px 0;
 2.2
Pre-Contracting | Body(PT)
2.2 Pre Contracting | Body (PT)

@textbox_margin: 45px 0;
@textbox_span_title_font-family: @semibold;
@textbox_span_font-family: @regular;
@textbox_span_font-size: 16px;
@textbox_span_line-height: 23px;
@textbox_span_color: #323E48;

@summaryResult_span_font-family: @regular;
@summaryResult_span_font-weight: 300;
@summaryResult_span_font-size: 12.5px;
@summaryResult_span_line-height: 140%;
@summaryResult_span_color: #FFFFFF;
@summaryResult_outputPaymentV1_span_color: #FFFFFF;
@summaryResult_outputPaymentV2_span_color: #FFFFFF;
2.2 Pre Contracting | Body (PT)

@summaryMessage_font-family: @regular;
@summaryMessage_font-size: 12px;
@summaryMessage_line-height: 18px;
@summaryMessage_color: @labelColor;
@summaryMessage_margin: 10px 25px 5px 25px;

@textbox_link_margin: 30px 0 10px 0;

@textbox_link_color: @MainColor;
@textbox_link_font-size: 12px;
@textbox_link_line-height: 14px;
@textbox_link_text-decoration: underline;
@textbox_link_cursor: pointer;
@textbox_link_image_width: 30px;
@textbox_link_image_height: 30px;
@textbox_link_image_background-image: @imgFile;
@textbox_link_image_margin: 0 10px;

@box_checked_background-color: @MainColor;
@box_checked_active_border: 1px solid #FFFFFF;
@box_checked_border: 1px solid #323E48;
@box_checked_border_check: 1px solid #FFFFFF;
16 Pre-contracting

2.3
Pre-Contracting | Body(CA)
2.3 Pre-Contracting | Body (CA)
2.3 Pre-Contracting | Body (CA)

@boxCA_section_background-color: #FFFFFF;
@boxCA_section_box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
@boxCA_section_border-radius: 3px;
@boxCA_section_padding: 25px 10%;
@boxCA_section_margin: 25px 0;

@boxCA_section_header_border-bottom: 1px solid #979797;

@boxCA_section_header_padding: 20px 0 30px;
@boxCA_section_header_span_value_font-family: @semibold;
@boxCA_section_header_span_value_font-size: 45px;
@boxCA_section_header_span_value_font-weight: 300;
@boxCA_section_header_span_value_line-height: 50px;
@boxCA_section_header_span_value_color: @ThirdColor;
@boxCA_section_header_span_description_font-size: 16px;
@boxCA_section_header_span_description_font-family: @regular;
@boxCA_section_header_span_description_color: #323E48;
2.3 Pre-Contracting | Body (CA)

@boxCA_section_card_align-items: center;
@boxCA_section_card_height: 80px;
@boxCA_section_card_margin: 15px 0;
@boxCA_section_card_padding: 0 30px;

@boxCA_section_card_img_width: 50px;
@boxCA_section_card_img_height: 50px;
@boxCA_section_card_img_background-size: 100% 100%;

@boxCA_section_card_text_width: 80%;
@boxCA_section_card_text_padding: 10px 20px;

@boxCA_section_card_text_span_font-family: @regular;
@boxCA_section_card_text_span_font-size: 16px;
@boxCA_section_card_text_span_color: #323E48;
@boxCA_section_card_text_span_font-weight: normal;
@boxCA_section_card_text_span_line-height: 18px;

@boxCA_section_card_text_span_value_font-family: @semibold;
@boxCA_section_card_text_span_value_line-height: 22px;
2.3 Pre-Contracting | Body (CA)

Images
@imgNetMortgage: url('../images/calculator/CA/ic_net_mortage.svg');
@imgNetMortgageInsurance: url('../images/calculator/CA/ic_mortgage_insurance.svg');
@imgMortgageAmount: url('../images/calculator/CA/ic_mortgage_amount.svg');
@imgPurchasePrice: url('../images/calculator/CA/ic_purchase_price.svg');
@imgLoanAmount: url('../images/calculator/CA/ic_loan_amount.svg');
@imgInterestOverTerm: url('../images/calculator/CA/ic_interest_over_term.svg');
@imgTotalInterest: url('../images/calculator/CA/ic_total_interest.svg');

@boxCA_section_status_right: 0;
@boxCA_section_status_top: 0;
@boxCA_section_status_height: 40px;
@boxCA_section_status_margin: 10px;

@boxCA_section_status_span_font-family: @regular;
@boxCA_section_status_span_font-size: 14px;
@boxCA_section_status_span_color: #007E3B;
@boxCA_section_status_span_font-weight: normal;
@boxCA_section_status_span_line-height: 18px;
@boxCA_section_status_span_white-space: nowrap;
@boxCA_section_status_span_padding: 0 0 0 32px;

@boxCA_section_status_span_img_width: 24px;
@boxCA_section_status_span_img_height: 24px;
@boxCA_section_status_span_img_background-image: @icSuccessv2;
@boxCA_section_status_span_img_background-size: 100% 100%;
@boxCA_section_status_span_img_left: 0;
@boxCA_section_status_span_img_top: 9px;
2.3 Pre-Contracting | Body (CA)

@boxCA_footer-card_height: 120px;
@boxCA_footer-card_margin: 20px 0;

@boxCA_footer-card_image_height: 40px;
@boxCA_footer-card_image_width: 40px;
@imgFile: url('../images/generic/ic_file.svg');
@imgFileActive: url('../images/generic/ic_file_active.svg');

@boxCA_footer-card_span_font-family: @regular;
@boxCA_footer-card_span_font-size: 14px;
@boxCA_footer-card_span_color: @MainColor;
@boxCA_footer-card_span_font-weight: normal;
@boxCA_footer-card_span_line-height: 20px;
@boxCA_footer-card_span_text-decoration: underline;
@boxCA_footer-card_span_margin: 15px 0;
 03
Contracting
03 Contracting
03 Contracting

@textbox_message_font-family: @regular;
@textbox_message_font-size: 13px;
@textbox_message_color: #323E48;
@textbox_message_font-weight: normal;
@textbox_message_line-height: 18px;
@textbox_message_margin: 15px 0;

@textbox_link_margin: 30px 0 10px 0;

@textbox_link_span_font-family: @regular;
@textbox_link_span_font-size: 12px;
@textbox_link_span_color: #2a7de1;
@textbox_link_span_line-height: 14px;
@textbox_link_span_text-decoration: underline;
@textbox_link_span_cursor: pointer;
@textbox_link_span_margin: 10px 0 0 0;
 04
Pop Up Alerts
04 Pop Up Alerts

Default

@modal_alert_body_margin: 25px auto;

@modal_alert_span_font-family: @regular;
@modal_alert_span_font-size: 16px;
@modal_alert_span_line-height: 20px;
@modal_alert_span_color: #323E48;

Warning

@modal_alert_warning_background-color: #F9992D;
@modal_alert_warning_title_color: #FFF;
@icModalWarning: url('../images/messages/ic_modal_warning.svg');
04 Pop Up Alerts

Success

@modal_alert_success_background-color: #007E3B;
@modal_alert_success_title_color: #FFF;
@icModalSuccess: url('../images/messages/ic_modal_success.svg');
04 Pop Up Alerts

Information

@modal_alert_info_background-color: #007CD1;
@modal_alert_info_title_color: #FFF;
@icModalInfo: url('../images/messages/ic_modal_info.svg');
Error

@modal_alert_info_background-color: #C91300;
@modal_alert_info_title_color: #FFF;
@icModalInfo: url('../images/messages/ic_modal_error.svg');

05
Components
 5.1
Components | Buttons
5.1 Components | Buttons

Primary

@btnSubmit_background-color: @ThirdColor;
@btnSubmit_height: 45px;
@btnSubmit_width: 100%;
@btnSubmit_border-radius: 0px;
@btnSubmit_font-family: @semibold;
@btnSubmit_color: #FFFFFF;
@btnSubmit_font-size: @defaultFontSize;
@btnSubmit_line-height: normal;

Secondary

@btnRequest_height: 45px;
@btnRequest_background-color: #FFFFFF;
@btnRequest_border-radius: 0px;
@btnRequest_border: 1px solid @ThirdColor;
@btnRequest_margin: 10px 0 0 0;
@btnRequest_font-family: @semibold;
@btnRequest_color: @ThirdColor;
@btnRequest_font-size: 16px;
@btnRequest_line-height: normal;
@btnRequest_text-transform: uppercase;
 5.2
Components | Date Picker
5.2 Components | Date Picker

@datepicker_width: 300px;
@datepicker_height: 300px;
@datepicker_background: #FFF;
@datepicker_padding: 10px;
@datepicker_box-shadow: 0 0 4px 3px rgba(0,0,0,0.13);
@datepicker_header_justify-content: space-around;
@datepicker_header_background-color: #FFF;
@datepicker_header_margin: 0 0 5px 0;
@datepicker_header_span_font-size: 14px;
@datepicker_header_span_font-family: @regular;
@datepicker_header_span_color: #323E48;
@datepicker_header_arrow_disabled: #CCCCCC;
@datepicker_header_arrow_enabled: : #323E48;
@datepicker_week_border-bottom: 1px solid #CCCCCC;
@datepicker_week_background-color: #FFF;
@datepicker_week_font-family: @semibold;
@datepicker_week_font-size: 12px;
@datepicker_week_line-height: 16px;
@datepicker_week_color: #323E48;
@datepicker_week_text-transform: uppercase;
@datepicker_days_background: transparent;
@datepicker_days_font-family: @regular;
@datepicker_days_font-size: 12px;
@datepicker_days_line-height: normal;
@datepicker_days_color: #323E48;
@datepicker_days_margin: 2.5px 0;
@datepicker_days_previous_color: #323E48;
@datepicker_days_current_background-color: transparent;
@datepicker_days_current_color: @MainColor;
@datepicker_days_selected_background-color: rgba(42, 125, 225, 0.6);
@datepicker_days_selected_border-radius: 50%;
@datepicker_days_selected_color: #FFF;
@datepicker_yearMonth_background-color: #FFF;
@datepicker_yearMonth_color: @MainColor;
 09
5.3
Components | Modal
5.3 Components | Modal

@modalOverlay: rgba(0,0,0,0.68);
@modalBoxShadow1: rgba(0, 0, 0, .22);
@modalBoxShadow2: rgba(0, 0, 0, .12);
@modalHeader_background-color: #f2f2f2;
@modalHeader_height: 70px;
@modalHeaderTitle_font-family: @semibold;
@modalHeaderTitle_font-size: 24px;
@modalHeaderTitle_color: @black;
@modalImgClose_height: 12px;
@modalImgClose_width: 14px;
@closeImg: url('../images/generic/closeBlue.svg');
 5.4
Components | Alerts
5.4 Components | Alerts

Default
box_output_font-family: @regular;
@box_output_font-size: 16px;
@box_output_line-height: 22px;
@box_output_color: #323E48;

Information

@box_info_background-color: #007CD1;
@box_info_color: #FFF;
@icInfo: ur l('../images/messages/ic_info.svg');

Warning

@box_info_background-color: #FFB405;
@box_info_color: #FFF;
@icInfo: url('../images/messages/ic_Warning.svg');
5.4 Components | Output Alerts

Default

@stepMessage_min-height: 80px;
@stepMessage_margin: 25px 0;
@stepMessage_span_font-family: @regular;
@stepMessage_span_font-size: 16px;
@stepMessage_span_line-height: 22px;
@stepMessage_span_color: #323E48;
@stepMessage_image_width: 55px;
@stepMessage_image_height: 55px;
@stepMessage_image_margin: 0 20px;

Sucsess

@icStepSuccess: url('../images/messages/ic_step_success.svg');

Warning

@icStepSuccess: url(''../images/messages/ic_step_warning.svg');
 5.5
Components | Carousel
5.5 Components | Carousel

@carousel_background-color: #F6F6F6;
@carousel_padding: 25px 10px;
@carousel_elem_height: 90px;
@carousel_elem_width: 265px;
@carousel_elem_padding: 5px 10px;
@carousel_elem_background-color: #FFFFFF;
@carousel_elem_box-shadow: 0 1px 6px 0 rgba(0,0,0,0.12);
@carousel_elem_margin: 0 15px 0 0;

@carousel_elem_active_border-bottom: 4px solid @MainColor;

@carousel_elem_active_background-color: #FFFFFF;
@carousel_elem_active_img_width: 30px;
@carousel_elem_active_img_height: 30px;
@carousel_elem_active_img_background-image: @imgHeart;

@carousel_elem_span_font-family: @regular;
@carousel_elem_span_font-size: 16px;
@carousel_elem_span_line-height: 22px;

@carousel_elem_span_product_font-family: @semibold;
@carousel_elem_span_product_color: @MainColor;
@carousel_elem_span_product_line-height: 24px;

@carousel_elem_span_code_font-size: 14px;
@carousel_elem_span_code_line-height: 16px;
@carousel_elem_span_code_color: #323E48;

@carousel_elem_span_amount_font-size: 18px;
@carousel_elem_span_amount_color: : #323E48;
@carousel_elem_span_amount_line-height: 30px;

@carousel_elem_span_value_font-size: 18px;
@carousel_elem_span_value_color: @MainColor;
@carousel_elem_span_value_margin: 0 3px 0 0;
 5.6
Components | Table
5.6 Components | Table

@tableTHBackground: @white;
@tableTextColor: #323E48;
@tableBorder: @MainColor;
@planTable_width: 100%;
@planTable_margin: 15px 0 30px 0;
@planTable_th_font-size: 13px;
@planTable_th_line-height: normal;
@planTable_th_padding-left: 0;
@planTable_th_height: 50px;
@planTable_td_font-size: 11.5px;
@planTable_td_line-height: normal;
@planTable_td_padding: 0;
@planTable_tdBefore_font-size: 12px;
@planTable_tdBefore_color: @black;
@planTable_tdBefore_padding: 2px 8px;
 5.7
Components | Tabs
5.7 Components | Tabs

Active Default

@tabSlider_margin: 0 0 55px 0;
@tabSlider_background-color: #FFFFFF;
@tabSlider_height: 40px;
@tabSlider_color: #323E48;
@tabSlider_font-family: @regular;
@tabSlider_font-size: @defaultFontSize;
@tabSliderActive_background-color: @MainColor;
@tabSliderActive_color: #FFFFFF;
@tabSliderActive_font-family: @semibold;
@tabSliderHover_background-color: rgba(42, 125, 225, 0.12);
 06
Contact | Form
 6.1
Contact | Form
6.1 Contact | Form
6.1 Contact | Form

@calculator_background-color: #FFFFFF;
@calculator_box-shadow: none;
@calculator_border-radius: 0px;
@calculator_padding: 25px 35px;

@contactArea_height: 60px;
@contactArea_text-align: left;
@contactArea_margin: 0 0 6px 0;
@contactArea_line-height: 140%;
@contactArea_color: @MainColor;
6.1 Contact | Form

@customCheckbox_padding: 10px;
@customCheckbox_padding_required: 0 5px 0 0;
@customCheckbox_margin: 0 0 0 30px;
@customCheckbox_font-weight: 300;
@customCheckbox_font-size: 14px;
@customCheckbox_line-height: 16px;
@customCheckbox_color: #323E48;
@customCheckbox_color_required: #002f87;
@customCheckbox_width: 16px;
@customCheckbox_height: 16px;
@customCheckbox_border-style: solid;
@customCheckbox_border-width: 1px;
@customCheckbox_border-color: #D6D6D6;
@customCheckbox_background-color: #FFFFFF;
@customCheckbox_border-radius: 3px;
@customCheckbox_width_after: 15px;
@customCheckbox_height_after: 15px;
@imgCheck: url('../images/generic/ic_checkbox.svg');
 6.2
Contact | Result
6.2 Contact | Result
6.2 Contact | Result

@contactOutputTitle_align-items: center;
@contactOutputTitle_height: 45px;
@contactOutputTitle_background-color: #F8F8F8;
@contactOutputTitle_font-family: @semibold;
@contactOutputTitle_font-size: 18px;
@contactOutputTitle_color: #323E48;
@contactOutputTitle_line-height: 140%;
@contactOutputTitle_margin: 0 auto;

@outputOptions_contact_background-color: #E0EBFF;
 6.3
Contact | Conclusion
6.3 Contact | Conclusion

@lastStep_padding: 10px 20px;

@lastStep_font-family: @regular;
@lastStep_font-size: 14px;
@lastStep_text-align: center;
@lastStep_line-height: 20px;
@lastStep_color: #323E48;
@lastStep_margin: 15px 0;
Thank you!

WWW.ITSCREDIT.COM