v1.1.4

Описание

# Установка, подключение

Установка в проект:
npm i goodt-framework-css --save
npm i less --save-dev
npm i less-loader --save-dev
Подключение в проекте:
// ваш <enty-point>.js
import 'goodt-framework-css/src/_all.less'
Stand-alone сборка:
npm run build

# Структура

Описание директории .src/
components/... набор компонентов
_all.less точка входа, собирает все части фреймворка воедино
_helpers.less набор вспомогательных примесей
_params.less основные параметры всего фреймворка, используются всеми частями фреймворка
grid.less отзывчивая flex сетка 5%, 1/12, 1/24
typography.less базовые стили, типографика
utility.less набор вспомогательных классов "утилит"

# Компоненты

Компонент условно делится на три части

[1] параметры параметры, которые использует компонент
[2] хуки встроенные в стили компонента хуки, которые позволяют внедрять кастомный стиль в то или иное правило компонента
[3] стиль стиль компонента, описывающий внешний вид компонента, используя параметры и хуки

Пример компонента

components/example.less
// [1] параметры, которые использует компонент
@example-font-size: .8rem;
@example-line-height: 1.5;
@example-padding: @spacer3 @spacer4;
@example-color: @color-white;
@example-background: @color-body;

// [2] хук, вызываемый в стиле компонента; позволяет переопределить стиль компонента
.hook-example() {}

// [3] стиль
.example {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: @example-padding; // <-- использование параметров [1]
    color: @example-color;
    font-size: @example-font-size;
    line-height: @example-line-height;
    background: @example-background;
    .hook-example(); // <-- вставка хука [2]
}

# Кастомизация

Для кастомизации необходимо импортировать точку входа _all.less в свой .less файл, далее можно уже переопределить любой параметр фреймворка в тч элементов или компонентов; или переопределить стили используя хуки.
Пример: my-theme.less
// импорт фреймворка
@import './<путь>/_all.less';

// переопределяем базовые параметры, используемые всеми частями фреймворка из ~ params.less
@font-family: Helvetica, Arial, sans-serif;
@font-family-headings: Helvetica, Arial, sans-serif;
@font-size: 16px;

// переопределяем параметры конкретного компонента  ~ components/toast.less
@toast-font-size: 1rem;
// используем хук компонента ~ toast.less
.hook-toast() {
    display: inline-flex; // <-- переопределяет "display", который изначально в компоненте "inline-block"
}

# Система отступов

В фреймворке реализована система отступов, которая используется для задания padding и margin
Отступы разделены на две группы: @spacer и @spacer-layout. Отступы расчитываются от базового значения 16px
Таблица отступов
название значение итог
@spacer1 0.125 2px
@spacer2 0.25 4px
@spacer3 0.5 8px
@spacer4 0.75 12px
@spacer5 1 16px
@spacer6 1.5 24px
@spacer7 2 32px
@spacer8 2 40px
@spacer9 2 48px
@layout-spacer1 1 16px
@layout-spacer2 1.5 24px
@layout-spacer3 2 32px
@layout-spacer4 3 48px
@layout-spacer5 4 64px
@layout-spacer6 6 96px
@layout-spacer7 10 160px

# Responsive

Фреймворк позволяет делать отзывчивые (responsive) интерфейсы засчет наличия отзывчивой сетки и набора утилит и хелперов.
Отзывчивость достигается за счет деления всех разрешений экранов по ширине на условные группы — {viewport}.
Утилиты, css-классы, которые поддерживают работу с режимами отзывчивости помечены responsive и имеют базовый вид:
.{viewport}-{classname}

// например
.s-text-small

// где
// {viewport} — s
// {classname} — text-small
Для использования групп {viewport} в кастомных компонентах или классах используйте less хелпер .media
@import './<путь>/_helpers.less'
// пример использования .media хелпера
.my-class {
    font-size: 1rem;
}
.media(@viewport-s, .my-class {
    font-size: .9rem;
})

# Viewport

Как было сказано выше, все разрешения экранов разбиты по ширине на {viewport}; ниже показан их список.
less переменная название {viewport} ширина экрана приоритет
— — ∞ самый низкий
@viewport-xl xl 0 - 1280px отменяет default
@viewport-l l 0 - 1024px отменяет xl default
@viewport-m m 0 - 840px отменяет l xl default
@viewport-s s 0 - 640px отменяет m l xl default

# Css переменные

Ниже приведен список доступных css переменных фреймворка (элемента :root)
css переменная значение
--viewport-xl 1280px
--viewport-l 1024px
--viewport-m 840px
--viewport-s 640px
--ratio-scaling-enabled false
--ratio-scaling-viewport-min-width 1600px
--container-max-width 1100px
--font-family 'PTRootUIWebRegular',Helvetica,Arial,sans-serif
--font-family-headings 'PTRootUIWebRegular',Helvetica,Arial,sans-serif
--font-size-base 16px
--font-size-h1 3rem ~ 48px
--h1-line-height 3.75rem ~ 60px
--h1-margin-bottom 2rem ~ 32px
--font-size-h2 2rem ~ 32px
--h2-line-height 2.5rem ~ 40px
--h2-margin-bottom 1.5rem ~ 24px
--font-size-h3 1.5rem ~ 24px
--h3-line-height 1.875rem ~ 30px
--h3-margin-bottom 1rem ~ 16px
--font-size-h4 1.125rem ~ 18px
--h4-line-height 1.4375rem ~ 23px
--h4-margin-bottom .5rem ~ 8px
--font-size-xsmaller .75rem ~ 12px
--font-size-smaller .875rem ~ 14px
--font-size-larger 1.125rem ~ 18px
--line-height 1.5
--color-body #2c2c2c
--color-link #1a67fe
--color-link-dark #013cb1
--color-link-light #80aafe
--color-link-focus rgba(26,103,254,0.3)
--color-link-hover #0156fd
--color-primary #1a67fe
--color-primary-dark #013cb1
--color-primary-light #80aafe
--color-primary-focus rgba(26,103,254,0.3)
--color-primary-hover #0156fd
--color-red #ed5564
--color-red-dark #c71527
--color-red-light #f7b1b8
--color-red-focus rgba(237,85,100,0.3)
--color-red-hover #eb3e4f
--color-green #0acf83
--color-green-dark #056e45
--color-green-light #49f6b3
--color-green-focus rgba(10,207,131,0.3)
--color-green-hover #09b774
--color-blue #5e9dec
--color-blue-dark #1868cc
--color-blue-light #b9d5f7
--color-blue-focus rgba(94,157,236,0.3)
--color-blue-hover #478fe9
--color-yellow #f7c844
--color-yellow-dark #cc9909
--color-yellow-light #fbe5a6
--color-yellow-focus rgba(247,200,68,0.3)
--color-yellow-hover #f6c12c
--color-orange #ff994d
--color-orange-dark #e66200
--color-orange-light #ffd3b3
--color-orange-focus rgba(255,153,77,0.3)
--color-orange-hover #ff8a33
--color-grey #999
--color-grey-dark #666
--color-grey-light #dcdcdc
--color-grey-lighter #f6f6f6
--color-white #fff
--color-black #000
--color-muted #dcdcdc
--color-disabled #eee
--color-disabled-dark #c8c8c8
--color-border #eee
--color-highlight #ffd
--color-focus rgba(26,103,254,0.3)
--color-scrollbar #ccc
--border-radius .25rem ~ 4px
--border-radius1 .25rem ~ 4px
--border-radius2 .5rem ~ 8px
--border-radius3 1rem ~ 16px
--border-radius4 2rem ~ 32px
--border-radius5 4rem ~ 64px
--unit .5rem ~ 8px
--spacer 1rem ~ 16px
--spacer1 .125rem ~ 2px
--spacer2 .25rem ~ 4px
--spacer3 .5rem ~ 8px
--spacer4 .75rem ~ 12px
--spacer5 1rem ~ 16px
--spacer6 1.5rem ~ 24px
--spacer7 2rem ~ 32px
--spacer8 2.5rem ~ 40px
--spacer9 3rem ~ 48px
--spacer-layout1 1rem ~ 16px
--spacer-layout2 1.5rem ~ 24px
--spacer-layout3 2rem ~ 32px
--spacer-layout4 3rem ~ 48px
--spacer-layout5 4rem ~ 64px
--spacer-layout6 6rem ~ 96px
--spacer-layout7 10rem ~ 160px
--width-fixed 8rem ~ 128px
--width-fixed1 8rem ~ 128px
--width-fixed2 16rem ~ 256px
--width-fixed3 24rem ~ 384px
--width-fixed4 32rem ~ 512px
--width-fixed5 40rem ~ 640px
--width-fixed6 48rem ~ 768px
--width-fixed7 56rem ~ 896px

# Less переменные

Ниже приведен список доступных less переменных фреймворка
core
переменная значение
@viewport-xl
1280px
@viewport-l
1024px
@viewport-m
840px
@viewport-s
640px
@ratio-scaling-enabled
false
@ratio-scaling-viewport-min-width
1600px
@container-max-width
1100px
@font-family
'PTRootUIWebRegular', Helvetica, Arial, sans-serif
@font-family-headings
'PTRootUIWebRegular', Helvetica, Arial, sans-serif
@font-size-base
16px
@font-size
1rem ~ 16px
@line-height
1.5
@font-size-h1
3rem ~ 48px
@h1-line-height
3.75rem ~ 60px
@h1-margin-bottom
@spacer7
@font-size-h2
2rem ~ 32px
@h2-line-height
2.5rem ~ 40px
@h2-margin-bottom
@spacer6
@font-size-h3
1.5rem ~ 24px
@h3-line-height
1.875rem ~ 30px
@h3-margin-bottom
@spacer5
@font-size-h4
1.125rem ~ 18px
@h4-line-height
1.4375rem ~ 23px
@h4-margin-bottom
@spacer3
@font-size-xsmaller
0.75rem ~ 12px
@font-size-smaller
0.875rem ~ 14px
@font-size-larger
1.125rem ~ 18px
@color-body
#2c2c2c
@color-link
#1a67fe
@color-link-light
.color-light(@color-link)[@return]
@color-link-dark
.color-dark(@color-link)[@return]
@color-link-focus
.color-focus(@color-link)[@return]
@color-link-hover
.color-hover(@color-link)[@return]
@color-primary
#1a67fe
@color-primary-light
.color-light(@color-primary)[@return]
@color-primary-dark
.color-dark(@color-primary)[@return]
@color-primary-focus
.color-focus(@color-primary)[@return]
@color-primary-hover
.color-hover(@color-primary)[@return]
@color-red
#ed5564
@color-red-light
.color-light(@color-red)[@return]
@color-red-dark
.color-dark(@color-red)[@return]
@color-red-focus
.color-focus(@color-red)[@return]
@color-red-hover
.color-hover(@color-red)[@return]
@color-green
#0acf83
@color-green-light
.color-light(@color-green)[@return]
@color-green-dark
.color-dark(@color-green)[@return]
@color-green-focus
.color-focus(@color-green)[@return]
@color-green-hover
.color-hover(@color-green)[@return]
@color-blue
#5e9dec
@color-blue-light
.color-light(@color-blue)[@return]
@color-blue-dark
.color-dark(@color-blue)[@return]
@color-blue-focus
.color-focus(@color-blue)[@return]
@color-blue-hover
.color-hover(@color-blue)[@return]
@color-yellow
#f7c844
@color-yellow-light
.color-light(@color-yellow)[@return]
@color-yellow-dark
.color-dark(@color-yellow)[@return]
@color-yellow-focus
.color-focus(@color-yellow)[@return]
@color-yellow-hover
.color-hover(@color-yellow)[@return]
@color-orange
#ff994d
@color-orange-light
.color-light(@color-orange)[@return]
@color-orange-dark
.color-dark(@color-orange)[@return]
@color-orange-focus
.color-focus(@color-orange)[@return]
@color-orange-hover
.color-hover(@color-orange)[@return]
@color-grey
#999
@color-grey-dark
#666
@color-grey-light
#dcdcdc
@color-grey-lighter
#f6f6f6
@color-white
#fff
@color-black
#000
@color-muted
@color-grey-light
@color-disabled
#eee
@color-disabled-dark
darken(@color-disabled, 15%)
@color-border
#eee
@color-highlight
#ffd
@color-focus
@color-primary-focus
@color-scrollbar
#ccc
@border-radius
unit((4px / @font-size-base), rem)
@border-radius1
@border-radius
@border-radius2
@border-radius*2
@border-radius3
@border-radius*4
@border-radius4
@border-radius*8
@border-radius5
@border-radius*16
@unit
unit((8px / @font-size-base), rem)
@spacer
@unit*2
@spacer1
@spacer*0.125
@spacer2
@spacer*0.25
@spacer3
@spacer*0.5
@spacer4
@spacer*0.75
@spacer5
@spacer
@spacer6
@spacer*1.5
@spacer7
@spacer*2
@spacer8
@spacer*2.5
@spacer9
@spacer*3
@spacer-layout1
@spacer
@spacer-layout2
@spacer*1.5
@spacer-layout3
@spacer*2
@spacer-layout4
@spacer*3
@spacer-layout5
@spacer*4
@spacer-layout6
@spacer*6
@spacer-layout7
@spacer*10
@width-fixed
(@unit*16)
@width-fixed1
@width-fixed*1
@width-fixed2
@width-fixed*2
@width-fixed3
@width-fixed*3
@width-fixed4
@width-fixed*4
@width-fixed5
@width-fixed*5
@width-fixed6
@width-fixed*6
@width-fixed7
@width-fixed*7
components
alert
переменная значение
@alert-border-radius
@border-radius
@alert-close-right
@spacer3
@alert-close-top
@spacer3
@alert-body-padding
@spacer-layout1 @spacer-layout1
@alert-success-color
@color-green-dark
@alert-success-background
@color-green-light
@alert-error-color
@color-red-dark
@alert-error-background
@color-red-light
@alert-warn-color
@color-yellow-dark
@alert-warn-background
@color-yellow-light
badge
переменная значение
@badge-margin
1px 0
@badge-padding
@spacer2 @spacer3
@badge-font-size
1rem ~ 16px
@badge-border-radius
@border-radius
@badge-background
@color-grey-light
@badge-primary-color
@color-white
@badge-primary-background
@color-primary
@badge-success-color
@color-white
@badge-success-background
@color-green
@badge-warn-color
@color-white
@badge-warn-background
@color-yellow
@badge-error-color
@color-white
@badge-error-background
@color-red
@badge-misc-color
@color-white
@badge-misc-background
@color-orange
breadcrumbs
переменная значение
@breadcrumbs-spacer
@spacer3
@breadcrumbs-spacer-text
"/"
@breadcrumbs-spacer-color
@color-grey-light
@breadcrumbs-item-link-color
@color-grey-dark
@breadcrumbs-item-link-hover-color
@color-link
button
переменная значение
@btn-border-radius
@border-radius
@btn-color
@color-body
@btn-height
@unit*5
@btn-padding
0 @spacer5
@btn-font-size
@font-size
@btn-line-height
@line-height
@btn-disabled-color
@color-grey
@btn-disabled-background
@color-disabled
@btn-small-height
@unit*4
@btn-small-padding
0 @spacer4
@btn-small-font-size
@font-size-smaller
@btn-large-height
@unit*7
@btn-large-padding
0 @spacer7
@btn-large-font-size
@font-size-larger
@btn-primary-color
@color-white
@btn-primary-background
@color-primary
@btn-primary-focus
@color-primary-focus
@btn-primary-hover-background
@color-primary-hover
@btn-success-color
@color-white
@btn-success-background
@color-green
@btn-success-focus
@color-green-focus
@btn-success-hover-background
@color-green-hover
@btn-error-color
@color-white
@btn-error-background
@color-red
@btn-error-focus
@color-red-focus
@btn-error-hover-background
@color-red-hover
@btn-warn-color
@color-white
@btn-warn-background
@color-yellow
@btn-warn-focus
@color-yellow-focus
@btn-warn-hover-background
@color-yellow-hover
@btn-misc-color
@color-white
@btn-misc-background
@color-orange
@btn-misc-focus
@color-orange-focus
@btn-misc-hover-background
@color-orange-hover
@btn-outline-color
@color-primary
@btn-outline-background
transparent
@btn-outline-focus
@color-primary-focus
@btn-outline-border-color
@color-primary
@btn-outline-hover-color
@color-primary-hover
@btn-outline-hover-border-color
@color-primary-hover
@btn-ghost-color
@color-primary
@btn-ghost-focus
@color-primary-focus
@btn-ghost-background
transparent
@btn-ghost-hover-color
@color-primary-hover
@btn-loading-preloader-border-width
unit((2px / @font-size-base), rem)
divider
переменная значение
@divider-color
@color-grey-light
@divider-border
1px solid @color-border
dropdown
переменная значение
@dropdown-z
10
@dropdown-min-width
@unit*12
@dropdown-background
@color-white
@dropdown-border-radius
@border-radius1
@dropdown-list-max-height
(@spacer3*2 + @font-size* @line-height) * 5
@dropdown-list-item-padding
@spacer3 @spacer4
@dropdown-list-item-color
@color-grey-dark
@dropdown-list-item-hr-margin
0
@dropdown-list-item-active-color
@color-white
@dropdown-list-item-active-background
@color-primary
@dropdown-list-item-hover-color
@color-link
@dropdown-list-item-hover-background
@color-grey-lighter
@dropdown-list-item-disabled-color
@color-disabled-dark
@dropdown-content-padding
@spacer-layout1
@dropdown-small-font-size
@font-size-smaller
@dropdown-small-list-item-padding
@spacer2 @spacer4
@dropdown-small-list-max-height
(@spacer2*2 + @dropdown-small-font-size* @line-height) * 5
form
переменная значение
@form-elem-border-radius
@border-radius
@form-elem-height
@unit*5
@form-elem-line-height
@line-height
@form-elem-padding
@spacer2 @spacer3
@form-elem-background
@color-white
@form-elem-placeholder-color
@color-grey
@form-elem-color
@color-body
@form-elem-font-size
@font-size
@form-elem-border-size
1px
@form-elem-border-color
@color-grey-light
@form-elem-disabled-color
@color-disabled-dark
@form-elem-disabled-background
@color-disabled
@form-elem-disabled-secondary-background
@color-disabled-dark
@form-elem-focus-border-color
@color-grey
@form-elem-invalid-color
@color-red
@form-elem-invalid-border-color
@color-red
@form-elem-invalid-placeholder-color
@color-red
@form-elem-invalid-focus-border-color
@color-red-dark
@form-elem-invalid-focus
@color-red-focus
@form-elem-valid-color
@color-green
@form-elem-valid-border-color
@color-green
@form-elem-valid-placeholder-color
@color-green
@form-elem-valid-focus-border-color
@color-green-dark
@form-elem-valid-focus
@color-green-focus
@form-elem-small-height
@unit*4
@form-elem-small-font-size
@font-size-smaller
@form-elem-large-height
@unit*7
@form-elem-large-font-size
@font-size-larger
@form-control-icon-width
@unit*5
@form-label-font-size
@font-size
@form-label-color
@color-grey-dark
@form-label-margin
0
@form-label-xsmall-font-size
@font-size-xsmaller
@form-label-small-font-size
@font-size-smaller
@form-label-large-font-size
@font-size-larger
@form-label-sticky-margin
0 @spacer3
@form-label-sticky-padding
0 0
@form-label-sticky-background
@color-white
@form-label-float-margin
0 @spacer3
@form-label-float-padding
0 0
@form-label-float-background
@color-white
@select-icon
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20"><path fill="@{form-elem-placeholder-color}" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>'
@select-valid-icon
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20"><path fill="@{form-elem-valid-color}" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>'
@select-invalid-icon
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20"><path fill="@{form-elem-invalid-color}" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>'
@select-disabled-icon
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20"><path fill="@{form-elem-disabled-secondary-background}" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>'
@checkbox-size
@unit*2.5
@checkbox-small-size
@unit*2
@checkbox-checked-background
@color-primary
@checkbox-icon
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 34 34"><path fill="@{color-white}" d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" /></svg>'
@checkbox-indeterminate-icon
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="@{color-white}" d="M19,13H5V11H19V13Z" /></svg>'
@radio-size
@unit*2.5
@radio-small-size
@unit*2
@radio-checked-background
@color-primary
@radio-icon
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 3 18 18"><path fill="@{color-white}" d="M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8Z" /></svg>'
@switch-width
@unit*5
@switch-height
@unit*2.5
@switch-small-width
@unit*4
@switch-small-height
@unit*2
@switch-icon
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="@{form-elem-placeholder-color}" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>'
@switch-valid-icon
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="@{form-elem-valid-color}" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>'
@switch-invalid-icon
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="@{form-elem-invalid-color}" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>'
@switch-checked-icon
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="@{color-white}" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>'
header
переменная значение
@header-z
1
@header-min-height
@unit*9
@header-background
@color-white
@header-padding
@spacer-layout1 @spacer-layout1
menu
переменная значение
@menu-z
10
@menu-min-width
@unit*15
@menu-padding
@spacer2 0
@menu-background
@color-white
@menu-border-radius
@border-radius1
@menu-sub-margin
-@spacer2 0 0 0
@menu-item-hr-margin
@spacer1 @spacer4
@menu-item-link-padding
@spacer3 @spacer4
@menu-item-link-color
@color-grey-dark
@menu-item-link-hover-color
@color-link
@menu-item-icon-gap
@spacer3
@menu-item-active-link-color
@color-link
@menu-item-disabled-link-color
@color-disabled-dark
@menu-small-padding
@spacer2 0
@menu-small-item-hr-margin
@spacer1 @spacer4
@menu-small-item-link-font-size
@font-size-smaller
@menu-small-item-link-padding
@spacer2 @spacer4
nav
переменная значение
@nav-item-link-padding
@spacer2 0
@nav-item-link-color
@color-grey-dark
@nav-item-link-hover-color
@color-link
@nav-item-active-link-color
@color-link
@nav-item-active-link-hover-color
darken(@color-link, 10%)
@nav-horizontal-item-link-padding
@spacer2 0
@nav-horizontal-item-link-margin
0 @spacer5 0 0
offcanvas
переменная значение
@offcanvas-z
1000
@offcanvas-content-width
@width-fixed2
@offcanvas-content-background
@color-white
@offcanvas-overlay-background
rgba(0, 0, 0, .5)
pagination
переменная значение
@pagination-spacer
0
@pagination-item-link-color
@color-grey-dark
@pagination-item-link-hover-color
@color-link
@pagination-item-link-padding
@spacer1 @spacer3
@pagination-item-text-color
@color-grey-dark
@pagination-item-text-padding
@spacer1 @spacer3
@pagination-item-active-link-color
@color-link
@pagination-item-active-link-hover-color
darken(@color-link, 10%)
@pagination-item-disabled-link-color
@color-disabled-dark
panel
переменная значение
@panel-background
@color-white
@panel-header-padding
@spacer-layout2
@panel-body-padding
@spacer-layout2
@panel-footer-padding
@spacer-layout2
popup
переменная значение
@popup-z
1000
@popup-background
rgba(0, 0, 0, .5)
@popup-dialog-background
@color-white
@popup-dialog-close-right
@spacer3
@popup-dialog-close-top
@spacer3
@popup-dialog-header-padding
@spacer-layout2
@popup-dialog-body-padding
@spacer-layout2
@popup-dialog-footer-padding
@spacer-layout2
preloader
переменная значение
@preloader-size
1rem ~ 16px
@preloader-border-width
unit((2px/@font-size-base), rem)
@preloader-color
@color-grey-dark
shim
переменная значение
@shim-z
1
@shim-overlay-opacity
.75
@shim-overlay-background
@color-white
sidebar
переменная значение
@sidebar-width
@width-fixed2
@sidebar-background
@color-white
@sidebar-small-width
@unit*7
skeleton
переменная значение
@skeleton-border-radius
@border-radius
@skeleton-background-color
@color-muted
@skeleton-height
@line-height*@font-size
@skeleton-small-height
@line-height*@font-size*.5
@skeleton-large-height
@line-height*@font-size*2
table
переменная значение
@table-cell-padding
@spacer3 @spacer3
@table-cell-responsive-padding
@spacer1 @spacer3
@table-row-responsive-padding
@spacer3
@table-borders-row-border
1px solid @color-border
@table-zebra-row-odd-background
@color-grey-lighter
@table-hover-row-hover-background
@color-highlight
tabs
переменная значение
@tabs-spacer
0
@tabs-item-border
2px solid transparent
@tabs-item-active-border
2px solid @color-link
@tabs-item-active-link-color
@color-link
@tabs-item-active-link-hover-color
darken(@tabs-item-active-link-color, 10%)
@tabs-item-link-padding
@spacer3 @spacer-layout2
@tabs-item-link-color
@color-grey-dark
@tabs-item-link-hover-color
@color-link
@tabs-container-padding
@spacer-layout2 0
tile
переменная значение
@tile-background
@color-white
@tile-body-padding
@spacer-layout2
toast
переменная значение
@toast-z
10
@toast-font-size
@font-size-smaller
@toast-line-height
@line-height
@toast-padding
@spacer3 @spacer4
@toast-color
@color-white
@toast-background
@color-body
@toast-border-radius
@border-radius
tooltip
переменная значение
@tooltip-z
10
@tooltip-font-size
@font-size-smaller
@tooltip-line-height
@line-height
@tooltip-padding
@spacer3 @spacer4
@tooltip-color
@color-white
@tooltip-background-color
@color-body
@tooltip-border-radius
@border-radius
@tooltip-triangle-size
unit((5px/@font-size-base), rem)