Managers common style
Managers common style.
Usage
Font size
OVH common style provides some classes for override font-size on a tag.
This example applies font-size
to 16px
:
<span class="fs16"></span>
You can do the same thing for line-height, default prefix is lh.
<span class="fs16 lh16"></span>
You can change default values by override less properties :
-
@font-size-values
-
@font-size-class
-
@line-height-values
-
@line-height-class
By default, font size class is : @font-size-class + @font-size-value. Same logic for line-height.
Helpers
Data exemple helper (helpers.less)
- Text center
this text is center
- Text opacity
this text has 0.4 opacity
- No style button
This button has not style
- Space (4, 8, 16, 20) (px)
margin : 20px margin-top : 16px margin-bottom : 8px padding-left : 8px padding-right : 4px
- responsive space (4, 8, 16, 20) (px) (xs, sm, md, lg like bootstrap 3)
margin : 20px for media min-width: 1200px margin-top : 16px for media min-width: 992px margin-bottom : 8px for media min-width: 801px padding-right : 4px for media min-width: 480px
- disable text selection (noselect)
This can't be selected with the mouse.
Bootstrap 3
Data exemple table (table.less) - work this- Responsive table
column title
animate.css
Data exemple animation (animation.less) - work thisYou can use all animation of animate.css
You can speed up animation with .animated-300 or infinite .animated-infinite
- simple animate (without 'animate' prefix)
this div animates opacity from 0.2 to 1 this div is animated by bounce of animate.css (!! animated class is important)
- angular animate (work with angular-animate) (with 'animate' prefix)
this div animates opacity from 0.4 to 1 when it shows and animates opacity from 1 to 0.5 when hidden
- angular animate (work with angular-animate and animate.css)
< this div animates opacity and moves right to left when it shows and animates opacity and moves left to right when hidden
datepicker
Datepicker style .datepicker-ui-pretty (datepicker-ui.less) -<div class="input-group">
<div class="input-group-addon"><i class="fa fa-calendar"></i></div>
<input type="text" class="form-control datepicker-ui-pretty"
id="searchDate"
name="searchDate"
placeholder="{{ 'search_date' | translate}}"
datepicker-popup="shortDate"
is-open="openedSearchDate"
ng-click="openedSearchDate = true"
ng-model="search.date">
<div class="input-group-addon" data-ng-show="search.date">
<button class="no-style" data-ng-click="search.date = null">
<i class="fa fa-times"></i>
</button>
</div>
</div>
Data exemple rotate animation
<button class="no-style" data-ng-click="open = !open">
<span>open</span>
<i class="fa fa-caret-down rotate" data-ng-class="{'rotate180': open}"></i>
</button>
Installation
Bower
bower install ovh-common-style --save
NPM
npm install ovh-common-style --save
Configuration
LESS style
'ovh-common-style/less/helpers.less'; 'ovh-common-style/less/animation.less'; 'ovh-common-style/less/table.less'; 'ovh-common-style/less/datepicker-ui.less'; 'ovh-common-style/less/spinner/spinner.less';
Fonts
'ovh-common-style/less/fonts/open-sans.less';
Get the sources
git clone https://github.com/ovh-ux/ovh-common-style.git cd ovh-common-style npm install bower install
You've developed a new cool feature ? Fixed an annoying bug ? We'd be happy to hear from you !
Have a look in CONTRIBUTING.md
Run the tests
npm test
Related links
- Contribute: https://github.com/ovh-ux/ovh-common-style
- Report bugs: https://github.com/ovh-ux/ovh-common-style/issues
- Get latest version: https://github.com/ovh-ux/ovh-common-style
License
See https://github.com/ovh-ux/ovh-common-style/blob/master/LICENSE