Store Hours
- Mo-Fr : 7:00 AM - 7:00 PM
- Sa : 7:00 AM - 7:00 PM
less
|-- mixins
|-- table-div.less
|-- detail.less
|-- doc.less
|-- global.less
|-- input.less
|-- locator-list-item.less
|-- mixins.less
|-- rexall-style.less
|-- utility.less
|-- variables.less
|-- rexall-mobile-app-design-documentation.html
The css of Rexall mobile app is developed with LESS, each module of the app is encapsulated into one less file to make the development and update faster.
The root file of this project is rexall-style.less. It will be compiled into rexall-style.css which is use to replace the older version style sheet style.css.
So far both rexall-style.css and style.css are linked to this document to make sure there is no conflicts between these two style sheets. Once this project is finished, style.css should be removed.
Note:
* Do NOT update rexall-style.css directly.
* ALWAYS make change to development less files first and then compile to css to keep development and production synced.
variables.less defines a set of global variables such as font sizes and color codes that are used in the app.
Note:
This project is still a work in progress version. The fonts and colors are collected and organized from the pages/modules whose css has already been cleaned. The list below does NOT includes all font sizes and colors across the app.
Rexall mobile app document: @x-smallest-font
Rexall mobile app document: @smallest-font
Rexall mobile app document: @smaller-font
Rexall mobile app document: @small-font
Rexall mobile app document: @normal-small-font
Rexall mobile app document: @normal-font
input.less defines 3 types of input fields in the app:
The item in scrollable list of Store locator page and Clinic locator page are defined in locator-list-item.less.
The list item in Store locator is set as basic control.
Use .locator-list-item to create a basic list item structure.
MCI Clinic
595 Bay Street595 Bay Street595 Bay Street
Toronto, ON M5G 2C2
Route
3.55KM
OPEN Until 12:00 AM Today
Add .preferred to override the basic style.
MCI Clinic
595 Bay Street595 Bay Street595 Bay Street
Toronto, ON M5G 2C2
Route
3.55KM
OPEN Until 12:00 AM Today
Use .locator-list-item with .clinic to create a Clinic locator list item
MCI Clinic
595 Bay Street595 Bay Street595 Bay Street
Toronto, ON M5G 2C2
Route
3.55KM
OPEN Until 12:00 AM Today
Same as preferred Store locator list item, add .preferred on top of .locator-list-item and .clinic to create a preferred Clinic locator list item
MCI Clinic
595 Bay Street595 Bay Street595 Bay Street
Toronto, ON M5G 2C2
Route
3.55KM
OPEN Until 12:00 AM Today
detail.less defines a set of components that are used in Store detail page and Clinic detail page.
Similar with locator-list-item.less, detail.less defines the components in Store detail page as basic control, adding .clinic and .preferred on top of the basic class will create specific style.
.detail-msg-section creates the component contains the store's exception message.
This is a exception message. This is a exception message. This is a exception message. This is a exception message.
Add .med to define a message with medium priority.
This is a MEDIUM exception message. This is a exception message. This is a exception message.
Add .critical to define a message with critical priority.
This is a CRITICAL exception message. This is a exception message. This is a exception message.
.detail-address-section creates the component contains the store's address and logo.
120 Adelaide Street W. Unit # R28 Toronto, ON M5H 1T1
Add .preferred with .detail-address-section to indicate preferred store.
120 Adelaide Street W. Unit # R28 Toronto, ON M5H 1T1
Add .clinic with .detail-address-section to create a address section for clinic.
Medical center 120 Adelaide Street W. Unit # R28 Toronto, ON M5H 1T1
Add both .preferred and .clinic with .detail-address-section to create a address section for preferred clinic.
Medical center 120 Adelaide Street W. Unit # R28 Toronto, ON M5H 1T1
Use .detail-hours-section to create a component contains store hours.
Store Hours
Pharmacy Hours
Add .clinic to .detail-hours-section for clinic hours.
Medical Clinic Hours
Public Walk-In Clinic
This Medical Clinic is inside a Rexall Drugstore.
This Medical Clinic operates independently from any Phamacy Location.
Use .detail-holiday-hours-section for store holiday hours section.
Holiday Hours
Use .detail-service-section for services list.
Store Services