lib2.scss

// Display
// https://getbootstrap.com/docs/4.3/utilities/display/
.d-none
.d-inline
.d-inline-block
.d-block
.d-table
.d-table-cell
.d-table-row
.d-flex
.d-inline-flex

// All combinations for xs, sm, md, lg
.d-md-none
.d-md-inline
.d-md-inline-block
.d-md-block
.d-md-table
.d-md-table-cell
.d-md-table-row
.d-md-flex
.d-md-inline-flex
.d-md-lg-none



// border
// https://getbootstrap.com/docs/4.3/utilities/borders/
.border
.border-top
.border-right
.border-bottom
.border-left

// remove border on a corresponding side
.border-0
.border-top-0
.border-right-0
.border-bottom-0
.border-left-0

// set border color
.border-red
.border-green
.border-light-grey-40
// ...and other colors



// text-align
// https://getbootstrap.com/docs/4.3/utilities/text/
.text-left
.text-center
.text-right
.text-justify

.text-sm-left
.text-md-left
.text-lg-left
// and so on

.text-nowrap // white-space nowrap
.text-wrap // white-space normal
.text-truncate // -> text-overflow ellipsis

.text-break // break-word
.text-lowercase
.text-uppercase
.text-capitalize

// text color
.text-red
.text-green
.text-light-grey-40
// ...and other colors from variables

.text-reset // inherits the color from its parent.
.text-decoration-none


// background color
.bg-red,
.bg-green
.bg-light-grey-40
// ...and other colors from variables





// https://getbootstrap.com/docs/4.3/utilities/sizing/

// Width only (no additional styles as for col-6 etc)
.w-25
.w-50
.w-75
.w-100
.w-auto

// Height only (no additional styles as for col-6 etc)
.h-25
.h-50
.h-75
.h-100
.h-auto

.mh-100 // max-height: 100%;
.mw-100 // max-width: 100%;

.min-vw-100 // Min-width 100vw
.min-vh-100 // Min-height 100vh
.vw-100 // Width 100vw
.vh-100 // Height 100vh



// Float
// https://getbootstrap.com/docs/4.3/utilities/float/
.float-left
.float-right
.float-none
.float-sm-left
.float-sm-right
.float-sm-none
.float-md-left
.float-md-right
.float-md-none
.float-lg-left
.float-lg-right
.float-lg-none
.float-xl-left
.float-xl-right
.float-xl-none


// Position
// https://getbootstrap.com/docs/4.3/utilities/position/
.position-static
.position-relative
.position-absolute
.position-fixed
.position-sticky

.fixed-top
.fixed-bottom
.sticky-top


// ========= NOT INCLUDED IN BOOTSRAP ==============






// default blue link style inluding hover/active/focus style
.link



// font-size in px
.f-12
.f-13
.f-14
.f-15
.f-16
.f-17
.f-18
.f-19
.f-20
.f-21
.f-22
.f-23
.f-24
.f-25
.f-26
.f-27
.f-28
.f-29
.f-30
.f-35
.f-40
.f-45
.f-50



// line-height in px
.l-16
.l-17
.l-18
.l-19
.l-20
.l-21
.l-22
.l-23
.l-24
.l-25
.l-26
.l-27
.l-28
.l-29
.l-30
.l-31
.l-32
.l-33
.l-34
.l-35
.l-40
.l-45
.l-50


// margin in px
.m-0
.m-1
.m-2
.m-3
.m-4
.m-5
.m-10
.m-15
.m-20
.m-25
.m-30
.m-35
.m-40
.m-45
.m-50

.mr-0
.mr-1
.mr-2
// ...and so on w/ mr, ml, mt, mb


.mx-auto // margin-left: auto + margin-right: auto



// padding in px
.p-0
.p-1
.p-2
.p-3
.p-4
.p-5
.p-10
.p-15
.p-20
.p-25
.p-30
.p-35
.p-40
.p-45
.p-50

.pr-0
.pr-1
.pr-2
// ...and so on w/ pr, pl, pt, pb


// font-weight
.font-300
.font-normal
.font-600
.font-bold


.font-italic      // italic
.font-monospace   // monospace






.scale-01 // transform: scale(0.1); // 10% size
.scale-02 // transform: scale(0.2); // 20% size
.scale-03 
.scale-04
.scale-05
.scale-06
.scale-07
.scale-08
.scale-09
.scale-10 
.scale-11
.scale-12
.scale-13
.scale-14 // transform: scale(1.4); // 140% size
.scale-15
.scale-16
.scale-17
.scale-18
.scale-19
.scale-20  // transform: scale(2); // 200% size
.scale-25
.scale-30
.scale-35
.scale-40
.scale-45
.scale-50




// https://gist.github.com/egorvinogradov/75917f73f78bd93f257af8b6a356813b#file-mixins-scss-L60
// ^ Когда речь пойдет об адаптации под разную ширину экранов, можно использовать этот mixin, чтобы писать код вроде:
// *   div
// *     @include l-media(xs,xs)
// *       font-size: 12px           <-- only works for xs screen sizes (from 0 to 768px)
// *
// *   div
// *     @include l-media(xs,md)
// *       color: red                <-- works on screen sizes from xs to md (xs, sm, md)
// *
// *   div
// *     @include l-media(md,lg)
// *       max-width: 980px          <-- works on md and lg screen sizes