docs/customization/readme.md

1 # Presentation Layer Architecture
6 [Read more about Bootstrap Theming](https://getbootstrap.com/docs/4.0/getting-started/theming)
24          └─ _obmc-custom.scss
31 agreed-upon design. The file naming convention closely follows the Bootstrap or
32 Boostrap-vue library file naming since most of the ruleset selectors in these
45                ├─ _bootstrap-grid.scss
60          └─ _obmc-custom.scss
81          └─ _obmc-custom.scss
96 $blue-500: #2d60e5;
97 $green-500: #0a7d06;
98 $red-500: #da1416;
99 $yellow-500: #efc100;
101 $gray-100: #f4f4f4;
102 $gray-200: #e6e6e6;
103 $gray-300: #d8d8d8;
104 $gray-400: #cccccc;
105 $gray-500: #b3b3b3;
106 $gray-600: #999999;
107 $gray-700: #666666;
108 $gray-800: #3f3f3f;
109 $gray-900: #161616;
116 $blue: $blue-500;
117 $green: $green-500;
118 $red: $red-500;
119 $yellow: $yellow-500;
139 $dark: $gray-900;
141 $light: $gray-100;
142 $primary: $blue;
143 $secondary: $gray-800;
151 $theme-colors: (
152   "primary": $primary,
163 - [Learn more about Bootstrap colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#co…
164 - [Learn more about Bootstrap variables](https://getbootstrap.com/docs/4.0/getting-started/theming/…
165 - [View the color palette and hex values in the color guidelines](/guide/guidelines/colors)
170 `theme-color-light` and `theme-color-dark` are custom functions used to create
172 set color highlights for some pseudo-elements like `: hover`.
179 @function theme-color-light($variant) {
180   @return theme-color-level($variant, -11.3);
183 @function theme-color-dark($variant) {
184   @return theme-color-level($variant, 2);
190 ```scss{8-10,16}
191 .b-table-sort-icon-left {
192     background-position: left calc(1.5rem / 2) center !important;
193     padding-left: calc(1.2rem + 0.65em) !important;
196       box-shadow: inset 0 0 0 2px theme-color('primary') !important;
199       background-color: theme-color-dark('light');
204 &.alert-info {
205 border-left-color: theme-color("info");
206 background-color: theme-color-light("info");
207 fill: theme-color("info");
220 $duration--fast-01: 70ms; //Micro-interactions such as button and toggle
221 $duration--fast-02: 110ms; //Micro-interactions such as fade
222 $duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements
223 $duration--moderate-02: 240ms; //Expansion, system communication, toast
224 $duration--slow-01: 400ms; //Large expansion, important system notifications
225 $duration--slow-02: 700ms; //Background dimming
227 $standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9);
228 $standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
229 $entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9);
230 $entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1);
231 $exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9);
232 $exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
238 .link-skip-nav {
240   top: -60px;
242   z-index: $zindex-popover;
243   transition: $duration--moderate-01 $exit-easing--expressive;
246     transition-timing-function: $entrance-easing--expressive;
253 - [Including Animation In Your Design System](https://www.smashingmagazine.com/2019/02/animation-de…
254 - [Carbon Design System motion guidelines](https://www.carbondesignsystem.com/guidelines/motion/bas…
277          └─ _obmc-custom.scss
289 ### `_obmc-custom.scss`
298          └─ _obmc-custom.scss
301 The `obmc-custom.scss` file defines all of the presentational layer
304 - [Read more about Bootstrap options](https://getbootstrap.com/docs/4.0/getting-started/theming/#sa…
305 - [Read more about Importing](https://getbootstrap.com/docs/4.0/getting-started/theming/#importing)
309 Some stylistic changes only apply to a single-file component or view instance.
332 ### Example - PageSection.vue
336   .page-section {
337     margin-bottom: $spacer * 2;
341     @include font-size($h3-font-size);
342     margin-bottom: $spacer;
347       border: 1px solid $gray-300;
348       margin-top: 10px;
355 example. This is an anti-pattern in global `.scss` files. However, in a single
358 [Learn more about single file components](https://vuejs.org/v2/guide/single-file-components.html)
361 will require becoming familiar with the Bootstrap and Bootstrap-Vue component