4 #core Helper classes

Common reusable classes

Example

.clickable

.clickable-size

.allow-select - unselectable text

.nomouse - pointer events none

.disabled - non clickable disabled button

.enabled - enabled button

.grab

.notap - disables color on tabon mobile

.uiyellow - text on a dark bg

.capitalize - increases first capital, rest lowercase

.first-big - increases just first capital

.flat - cancels 3d transformations

.shaky

.dotted

Markup

<div class="btn clickable">.clickable</div>
<div class="btn clickable-size">.clickable-size </div>
<div class="btn allow-select">.allow-select - unselectable text</div>
<div class="btn nomouse">.nomouse - pointer events none</div>
<div class="btn disabled">.disabled - non clickable disabled button</div>
<div class="btn enabled">.enabled - enabled button</div>
<div class="btn grab">.grab</div>
<div class="btn notap">.notap - disables color on tabon mobile</div>
<div class="btn uiyellow">.uiyellow - text on a dark bg</div>
<div class="btn capitalize">.capitalize - increases first capital, rest lowercase</div>
<div class="btn first-big">.first-big - increases just first capital</div>
<div class="btn flat">.flat - cancels 3d transformations</div>
<div class="btn shaky">.shaky</div>
<div class="btn dotted">.dotted</div>

Source: src/css/core/helper-classes.less, line 1

4.1 #core.00 .clickable

Just changes cursor

Source: src/css/core/helper-classes.less, line 33

4.2 #core.01 .clickable-size

NIce onhover transition

Source: src/css/core/helper-classes.less, line 56

4.3 #core.01a .shaky

Cool animation for promos and such

Source: src/css/core/helper-classes.less, line 43

4.4 #core.01c .dotted

Lightlly dotted underline

Source: src/css/core/helper-classes.less, line 23

4.5 #core.02 .allow-select

Unselectable text

Source: src/css/core/helper-classes.less, line 69

4.6 #core.2 .increaseClickArea()

Increses click area via addin transparent border. Unusable with something that has border.

Usage: increaseClickArea(10px);

Do not forge to offset border with negative margin.

Source: src/css/core/helper-classes.less, line 213

4.7 #core.03 .nomouse

Pointer events none

Source: src/css/core/helper-classes.less, line 97

4.8 #core.3 .flex-container

Flex with prefixes

Source: src/css/core/helper-classes.less, line 197

4.9 #core.04 .grab

Just cursor grab

Source: src/css/core/helper-classes.less, line 116

4.9 #core.04 .disabled

Non clickable disabled el

Source: src/css/core/helper-classes.less, line 137

4.10 #core.4 .fullscreen

Fixed div on fullscreen

Source: src/css/core/helper-classes.less, line 180

4.11 #core.5 .flat

Ensures, that all 3d transformations from parent elemnts are cancelled, and that all childern elents are painted on flat surface. Can help to fix safari z-index problems

Source: src/css/core/helper-classes.less, line 85

4.12 #core.05 .notap

Disables color on tap on mobile

Source: src/css/core/helper-classes.less, line 128

4.12 #core.05 .enabled

Reverts .disabled

Source: src/css/core/helper-classes.less, line 147

4.13 #core.06 .uiyellow

Yellow text on a dark bg

Source: src/css/core/helper-classes.less, line 106

4.14 #core.07 .first-big

Uppercase first letter

Source: src/css/core/helper-classes.less, line 157

4.15 #core.07b .capitalize

Uppercase first letter, and lowecarse the rest. Works onoy on block elements

Source: src/css/core/helper-classes.less, line 168

4.16 #core.borders .{ name }-border

Use this class to modify position o UIs

Usage: .left-broder { left: 10 };, of course use right, top, bottom etc

Parameters:

.right-border

class to be overwritten
.top-border

class to be overwritten

Source: src/css/core/helper-classes.less, line 247

4.17 #core.centered .centered

Centered & inlined elements

Example

Button 1

Button 2

Markup

<div class="centered">
             <div class="button">Button 1</div>
             <div class="button">Button 2</div>
        </div>

Source: src/css/core/helper-classes.less, line 228

4.18 #core.moving .mooving

Applied to BODY during picker moovement. Hide .shy classes

Source: src/css/core/helper-classes.less, line 275

4.19 #core.shy .shy

Hides element on moving during picker moovement

Source: src/css/core/helper-classes.less, line 266

4.20 #core.truncate .truncate

Truncates overflowing inline text with ellipsis.

Source: src/css/core/helper-classes.less, line 287