Начать беседу

Стили

Внешний вид личного кабинета в каждом конкретном проекте может быть полностью кастомизирован под заказчика.

Для кастомизации используются шаблоны (Layouts) - определяющие компоновку элементов на странице. Шаблоны используют файл стилей CSS, в котором определены классы, которые используются всеми элементами управления в личном кабинете.

Классы имеют определенную структуру, иерархию и правила именования. При создании нового внешнего вида личного кабинета необходимо определить все используемые классы стилей.

Важно: личным кабинетом используется css-framework bootstrap 3, при  верстке новых шаблонов стоит использовать предоставляемые им компоненты и стили.


Basic controls

Period Selector

Описание

Period Selector - виджет, используемый для выбора периода в модулях личного кабинета.

Структура

<span class="plain-period-selector">
    <span class="btn-group">
        <a href="..." class="btn btn-link btn-only-icon disabled" title="Previous period">
            <i class="arrow_carrot-left_alt2"></i>
        </a>                            
        <a href="..." class="btn btn-link btn-only-icon" title="Next period">
            <i class="arrow_carrot-right_alt2"></i>
        </a>            
    </span>
    <span class="plain-period-selector--period">Current month (Oct 31, 2016)</span>
</span>

Стили

/* Зададим стили для контейнера содержащего селектор периода */
.plain-period-selector {
    display: inline-block;
    ...
}
 
/* Зададим стили кнопок переключения периода */
.plain-period-selector .btn-group > .btn {
    ...
}
 
.plain-period-selector .btn-group > .btn:hover {
    ...
}

Flash Alert

Описание

Виджет используется модулями личного кабинета для уведомления о результатах выполнения тех или иных операций.

Структура

<div id="flash-alert-container">
  <div class="flash-alert-msg-holder alert alert-success visible" id="flash-alert-47212">
      <button class="close">
        <span class="glyphicon glyphicon-remove"></span>
      </button>
    <div class="flash-alert-msg-title">Well done</div>
      <span class="flash-alert-msg-text">Operation completed</span>
  </div>
</div>

Классы уведомлений

 
alert-success
Сообщение об успешном выполнении операции
alert-danger
Сообщение об ошибке
alert-info
Информационное сообщение
alert-warning
Предупреждение

Стили

/* Зададим стили контейнера для всплывающего уведомления */
#flash-alert-container {
    positionfixed;
    z-index4000;
    ...
}
 
/* Зададим стили контейнера для вложенного контейнера */
#flash-alert-container .alert
{
    positionrelative;
    ...
}
 
/* Зададим стили для заголовка уведомления */
#flash-alert-container .alert > .flash-alert-msg-title {
    ...
}
 
/* Зададим стили для кнопки закрытия уведомления */
#flash-alert-container .alert > .close {
 
positionabsolute;
    ...
}
 
#flash-alert-container .alert > .close:hover {
    ...
}
 
/* Зададим стили для уведомления об успехе */
#flash-alert-container .alert.alert-success {
    ...
}
 
/* Зададим стили для уведомления об ошибке */
#flash-alert-container .alert.alert-danger {
    ...
}
 
/* Зададим стили для информационного сообщения */
#flash-alert-container .alert.alert-info {
    ...
}
 
/* Зададим стили для предупреждения */
#flash-alert-container .alert.alert-warning {
    ...
}


Image Upload

Описание

 


Виджет используется модулями личного кабинета для загрузки изображений и просмотра\удаления уже загруженных.

Структура

<div id="w5" class="file-uploader" data-user-id="10" data-attribute-name="avatar_id">
    <input type="hidden" name="FileStorage[assignment_class]" value="common\models\kernel\User">
    <input type="hidden" name="FileStorage[assignment_object]" value="1">                                                                                        
    <input type="hidden" name="FileStorage[type]" value="16">
    <input type="hidden" name="field" value="avatar_id">
  <div class="files-preview">
     <div class="form-control">
         <div class="file-preview" data-id="5">
            <img src="...">
            <div class="file-remove b-icon btn btn-danger">
                <i class="glyphicon glyphicon-trash"></i>
            </div>
          </div>
      </div>
      <div class="clearfix"></div>
  </div>
  <div class="uploadFileButton">
    <input type="file" id="userform_1-avatar_id" class="upload-file-field" name="uploadFile">
        <a href="#" class="btn btn-default btn-sm" title="Upload file">Upload file</a>
  </div>
  <div class="fields" data-field-name="UserForm_1[avatar_id]">
    <input type="hidden" name="UserForm_1[avatar_id]" value="5"></div>
</div>


Стили

/* Зададим стиль для основного контейнера */
.file-uploader {
    ...
}
 
/* Зададим стиль для контейнера отображающего превью */
.file-uploader .files-preview {
    positionrelative;
    display: inline-block;
    ...
}
 
.file-uploader .files-preview > .form-control {
    ...
}
 
.file-uploader .files-preview > .form-control:empty {
    display:none;
}
 
.file-uploader .files-preview > .form-control .file-preview {
    positionrelative;
    display: inline-block;
    ...
}
 
/* Зададим стиль кнопки удаления изображения */
.file-uploader .files-preview >
.form-control .file-preview .file-remove {
    positionabsolute;
    ...
}
 
.file-uploader .files-preview >
.form-control .file-preview .file-remove:hover {
    ...
}
 
/* Зададим стиль кнопки загрузки изображения */
.file-uploader .uploadFileButton {
    positionrelative;
    ...
}
 
.file-uploader .uploadFileButton .upload-file-field {
    visibilityhidden;
    positionabsolute;
    pointer-events: none;
    ...
}


Editable

Описание

Виджет позволяющий “на лету” изменять значения текстовых полей.

Структура

<div id="user-firstname-1-cont" class="kv-editable">
  <button type="button" id="user-firstname-1-targ" class="kv-editable-value kv-editable-link" data-toggle="popover-x"
          data-placement="right" data-target="#user-firstname-1-popover">Wilmot
  </button>
  <div id="user-firstname-1-popover"
       class="kv-editable-popover skip-export popover popover-default popover-md has-footer right in" role="dialog"
       style="top: -47px; left: 64px; display: block; z-index: 1050; padding: 0px;">
      <div class="arrow"></div>
      <div class="popover-title">
          <button type="button" class="close" data-dismiss="popover-x" aria-hidden="true">×</button>
          <i class="glyphicon glyphicon-edit"></i> Edit First name
      </div>
      <div class="popover-content">
          <div class="kv-editable-content">
              <form id="w0" class="kv-editable-form" action="..." method="post">
                    <input type="hidden" name="_csrf" value="...">
                    <input type="hidden" name="hasEditable" value="0">
                  <div class="kv-editable-parent form-group field-userform_1-firstname required">
                      <input type="text" id="user-firstname-1" class="kv-editable-input form-control"
                             name="UserForm_1[firstname]" value="Wilmot">
                      <div class="help-block"></div>
                  </div>
              </form>
          </div>
      </div>
      <div
class="popover-footer">
          <div class="kv-editable-loading" style="display:none"> </div>
          <button type="button"
class="btn btn-sm btn-default kv-editable-reset"
title="Reset"><i
                  class="glyphicon glyphicon-ban-circle"></i></button>
          <button type="button" class="btn btn-sm btn-primary kv-editable-submit" title="Apply"><i
                  class="glyphicon glyphicon-save"></i></button>
      </div>
  </div>
</div>

Стили

.kv-editable-value {
    display: inline-block;
    ...
}
 
/* Зададим стили для ссылки со значением поля по которому открывается окно редактирования  */
.kv-editable-link {
    ...
}
 
.kv-editable-link:hover,
.kv-editable:focus {
    ...
}
 
.kv-editable-link:focus {
    ...
}
 
/* Зададим стили для кнопок сохранения/отмены */
.kv-editable-button.btn-sm,
button[disabled].kv-editable-button {
    ...
}
 
button[disabled].kv-editable-button {
    ...
}
 
/* Зададим стили для контейнера в котром размещен инпут для редактирования значения */
.kv-editable-content .form-group
{
    ...
}
 
/* Зададим стили для элемента выводящего ошибки валидации*/
.kv-editable-content .help-block {
    ...
}
 
/* Зададим стили лоадера */
.kv-editable-loading {
    floatleft;
    width30px;
    backgroundtransparent url('../img/loading.gif'8px 8px no-repeat;
    ...
}
 
/*Зададим стили для нижней панели окна редактирования */
.kv-editable-inline
.panel-footer {
  text-alignright;
  padding5px;
}
 
/* Зададим стили  для кнопки закрытия всплывающего окна редактирования */
.kv-editable-form-inline
.kv-editable-close {
  margin-top6px;
}



Basic styles

Базовые стили можно использовать при верстке новых шаблонов и оформлении контента, всего можно выделить следующие группы базовых стилей:

  • Стили форм и элементов ввода

  • Стили позиционирования элементов

  • Типографические стили

Стили форм и элементов ввода

  
Класс
Назначение
Где используется
btn
Стандартный класс кнопки
Везде, например во всплывающих окна кнопки “Ok”, “Cancel”
button-holder
Контейнер для нескольких кнопок
Во всплывающих окна кнопки “Ok”, “Cancel” помещены в контейнеры этого класса
form-group
Класс для контейнера группирующего элементы формы
Используется на всех формах
form-control
Класс для стандартного инпута
Применяется в большинстве форм
form-fieldset
Контейнер указанного класса обрамляется рамкой со скругленными углами, используется для декорирования форм
 
module-box Контейнер указанного класса обрамляется рамкой с белым фоном и небольшой тенью, используется для декорирования форм Применяется для выделение контента или фильтра от основного фона

Стили позиционирования элементов

 
Класс
Назначение
margin-top-0
Убирает внешний отступ сверху
margin-right-0
Убирает внешний отступ справа
margin-bottom-0
Убирает внешний отступ снизу
margin-left-0
Убирает внешний отступ слева
margin-0
Убирает внешние отступы со всех сторон
margin-top-10
Устанавливает внешний верхний отступ в 10px
margin-top-100
Устанавливает внешний верхний отступ в 100px
press-right
Убирает внутренний отступ справа
press-left
Убирает внутренний отступ слева
press-both
Убирает внутренний отступ справа и слева

Типографические стили

 
Класс
Назначение
align-right
Выравнивает текст по правому краю
align-center
Выравнивает текст по центру
align-left
Выравнивает текст по левому краю
weight-thin
Устанавливает font-weight: 100
weight-normal
Делает шрифт нормальным
weight-bold
Делает шрифт жирным
font-size-xl
Задает очень большой размер шрифта
font-size-large
Задает большой размер шрифта
font-size-base
Задает базовый размер шрифта
font-size-small
Задает маленький размер шрифта
font-size-xs
Задает очень маленький размер шрифта
text-uppercase
Трансформирует регистр текста в верхний
cursor-pointer
Задает курсов в pointer



Diagrams

Описание


Для построения графиков используется библиотека c3.js, поэтому при кастомизации графиков можно пользоваться документацией предоставляемой разработчиками этой библиотеки.

Структура

Графики рендерятся с помощью svg-элеменета.

Стили

/* Зададим стили для контейнера с графиком */
.c3 {
    ...
}
 
/* Зададим стили для svg-элемента в котором рендерится график */
.c3 svg {
    ...
}
 
/* Зададим стили для элементов path, line */
.c3 path,
.c3 line {
    ...
}
 
/* Зададим стили для элементов text */
.c3 text {
    ... 
}
 
/* Зададим стили для линейной диаграммы */
.c3-line {
    ...
}
 
/* Зададим стили для круговой диаграммы */
.c3-circle {
    ...
}
 
.c3-selected-circle {
    ...
}
 
/* Зададим стили для диаграммы в виде столбцов */
.c3-bar {
    ...
}
 
.c3-bar._expanded_ {
    ...
}
 
/* Зададим стили для элементов в фокусе */
.c3-target.c3-focused {
    ...
}
 
.c3-target.c3-focused path.c3-line,
.c3-target.c3-focused path.c3-step {
    ...
}
 
.c3-target.c3-defocused {
    ...
}
 
/* Зададим стили для легенды */
.c3-legend-item {
    ...
}
 
.c3-legend-item-hidden {
    ...
}
 
.c3-legend-background {
    ...
}



Grids

Описание

 Изображение 1. Грид в модуле “My structure”

Изображение 2. Грид в модуле “Network Dynamic”


Грид - является одним из виджетов с очень широкой областью применения. В личном кабинете его используют некоторые модули для вывода информации, например, модуль “My structure”(Изображение 1) или модуль “Network Dynamic”(Изображение 2).

Структура

С точки зрения верстки грид является обычной таблицей:

<div class="panel primary grid-panel row">
  <div class="kv-panel-before">
      <div>
          <div class="btn-toolbar kv-grid-toolbar" role="toolbar">
          </div>
      </div>
 
 
      <div class="clearfix"></div>
  </div>
  <div class="kv-grid-container table-responsive">
      <table class="kv-grid-table table table-bordered table-striped kv-table-wrap">
          <thead>
          <tr>
              <th>Period</th>
              <th>All network</th>
              <th>Novice</th>
              <th>Consultant</th>
          </tr>
          </thead>
          <tbody>
          <tr class="odd">
              <td>Jun, 16</td>
              <td>1136</td>
              <td>0</td>
              <td>1</td>
          </tr>
          <tr class="even">
              <td>May, 16</td>
              <td>1136</td>
              <td>0</td>
              <td>0</td>
          </tr>
          ...
          </tbody>
      </table>
  </div>
  <div class="kv-panel-after"></div>
  <div class="panel-footer">
      <div class="panel-summary-info">
          <div class="summary">Showing <b>1-5</b> of <b>5</b> items.</div>
      </div>
      <div class="kv-panel-pager">
      </div>
      <div class="clearfix"></div>
  </div>
</div>


Стили

Для оформления гридов используются стандартные стили предлагаемые bootstrap и лишь некоторые из них дополняются кастомными. При стилизации гридов следует учитывать что они бывают разных типов и отличаются друг от друга не только визуально, но и по функциональности, некоторые классы могут быть не задействованы в одном типе гридов, но использованы в другом, поэтому чтобы тема оформления работала всегда корректно, следует, определять все стили перечисленные в этом разделе.

.grid-view {
    margin-top5px;
    margin-bottom5px;
}
 
.grid-view--small .grid-panel {
    margin-right:0;
    margin-left:0;
}


Стили вспомогательных блоков грида

/* Задаем стили блока внутри которого отображается грид и вспомогательные блоки */
.grid-panel {
overflow-x: hidden;
    ...
}
 
/* Задаем стили контейнера, который предшествует гриду(может содержать контент, а может и нет в зависимости от конкретного грида) */
.grid-panel .kv-panel-before {
    ...
}
 
/* Задаем оформление тулбара и кнопок на нем */
.grid-panel .kv-panel-before .btn-toolbar > .btn-group
{
    ...
}
 
.grid-panel .kv-panel-before .btn-toolbar > .btn,
.grid-panel .kv-panel-before .btn-toolbar > .btn-group > .btn {
    ...
}
 
/* Задаем стили контейнера который следует после грида(может содержать контент, а может и нет в зависимости от конкретного грида) */
.grid-panel .kv-panel-after {
    ...
}
.grid-panel .kv-panel-after:empty {
    ...
}
 
/* Задаем стили контейнера который следует самым последним в контейнере grid-panel */
.grid-panel .panel-footer {
    ...
}
 
/* Задаем стили контейнера содержащего информацию о количестве записей */
.grid-panel .panel-summary-info {
 
display: inline-block;
    ...
}
 
.grid-panel .kv-panel-pager {
display: inline-block;
    ...
}
 
.grid-panel .kv-panel-pager .pagination {
    ...
}
 
/* Задаем стили контейнера содержащего селектор количества отображаемых на странице записей */
.grid-panel .line-count-chooser {
display:inline-block;
    ...
}
 
.grid-panel .line-count-chooser .field-pagesize-size,
.grid-panel .line-count-chooser label {
    ...
}
 
.grid-panel .line-count-chooser .field-pagesize-size {
    ...
}
 
.grid-panel .line-count-chooser label {
    ...
}


Стили лоадера

Действия требующие обновление грида(сортировка, пагинация, фильтрация) во время получения данных могут показывать, для его кастомизации следует воспользоваться следующими стилями:

.grid-panel .kv-grid-loading {
    positionrelative;
    opacity: 1;
    ...
}
 
.grid-panel .kv-grid-loading:after {
    displayblock;
    content'';
    positionabsolute;
    ...
    z-index1;
    background:
  rgba(255,255,255,0.5)url('../img/loading.gif')
   no-repeat center;
}


Стили таблицы

/* Задаем стили ячеек таблицы */
.grid-panel .kv-grid-table td {
    ...
}
 
/* Задаем стили таблицы */
.table {
    ...
}
 
/* Задаем стили для ячеек с неустановленным значением */
.not-set
{
    ...
}
 
/* Задаем стили для ячеек в заголовках таблицы */
.table.table-bordered > thead > tr th,
.table.table-bordered > thead > tr td {
    ...
}


Стили фильтра

/* Задаем стили для ячеек в которых расположены элементы фильтра */
.table tr.filters.shown > td {
    ...
}
 
/* Задаем стили для элементов фильтра */
.table tr.filters.shown > td > input,
.table tr.filters.shown > td > select
{
    display:inline-block;
    ...
}
 
/* Задаем стили для активных элементов фильтра */
.table tr.filters td.has-active-filter {
    positionrelative;
    ...
}
 
/* Задаем стили для  кнопки сброса активного элемента фильтра */
.table tr.filters td.has-active-filter .clear-column-filter {
    displayblock;
    positionabsolute;
    z-index10;
    ...
}
 
.table tr.filters td.has-active-filter .clear-column-filter:hover {
    opacity:1;
    ...
}


Стили подсветки строк грида

/* Задаем стили для нечетных строк таблицы */
.table > tbody > tr.odd {
    ...
}
 
/* Задаем стили для четных строк таблицы */
.table > tbody > tr.even {
    ...
}
 
/* Задаем стили для родительсткой строки(актуально там где грид представляет из себя дерево) */
.table tr.highlight-parent {
    ...
}
 
/* Задаем стили для выбранной строки(актуально там где грид представляет из себя дерево) */
.table tr.highlight-selected {
    ...
}
 
/* Задаем стили для дочерней строки(актуально там где грид представляет из себя дерево) */
.table tr.highlight-child {
    ...
}


Стили заголовка таблицы

/* Зададим стили для контейнера сортировки по колонке */
.table th.has-sorting .grid-sorting-holder {
    position:
    absolute;
    ...
}
 
/* Зададим стили для кнопок сортировки */
.table th.has-sorting .grid-sorting-holder > .sort-asc,
.table th.has-sorting .grid-sorting-holder > .sort-desc {
    displayblock;
    overflowhidden;
    ...
}
 
.table th.has-sorting .grid-sorting-holder > .sort-asc > i,
.table th.has-sorting .grid-sorting-holder > .sort-desc > i {
    ...
}
 
.table th.has-sorting .grid-sorting-holder > .sort-asc.active,
.table th.has-sorting .grid-sorting-holder > .sort-desc.active {
    ...
}
 
.table th.has-sorting .grid-sorting-holder > .sort-asc.active:hover,
.table th.has-sorting .grid-sorting-holder > .sort-desc.active:hover {
    ...
}


Стили всплывающего окна настроек грида

Некоторые гриды позволяют настраивать отображаемые колонки и порядок вывода колонок, по нажатии на кнопку на настройки на тулбаре. Для настройки грида используется модальное окно настроек грида.

/* Задаем стили для заголовка виджета выбора порядка полей */
.grid-columns-settings-modal .sortable-holder-caption {
    ...
}
 
/* Задаем стили для виджета сортировки выбора порядка полей */
.grid-columns-settings-modal .sortable-holder .sortable {
    ...
}
 
/* Задаем стили для полей в виджете выбора порядка полей */
.grid-columns-settings-modal .sortable-holder .sortable li {
    ...
}
 
.grid-columns-settings-modal .sortable-holder .sortable li:hover {
    ...
}
 
/* Задаем стили для разделителя между виджетом с видимыми и виджетом со скрытыми полями */
.grid-columns-settings-modal .dynagrid-sortable-separator {
    positionrelative;
    ...
}
 
.grid-columns-settings-modal .dynagrid-sortable-separator > i {
    positionabsolute;
    ...
}
 
/* Задаем стили контейнера для кнопок: "Ok", "Cancel" */
.grid-columns-settings-modal .button-holder {
    ...
}
 
/* Задаем стили для кнопок: "Ok", "Cancel" */
.grid-columns-settings-modal .button-holder .btn {
    ...
}



Main menu


Главное навигационное меню располагается в сайд-баре шаблона.

Структура

Навигационное меню представляет вложенную древовидную структуру и сверстано с помощью вложенных маркированных списков.

<div class="yaybar yay-shrink yay-hide-to-small yay-gestures">
    <div class="yaybar-top-area">
        <a href="#" class="icon-hide yay-toggle" title="Toggle menu"></a>
        <a href="/" class="company-logo">
            <div class="logo-text">DemoCompany</div>
        </a>
        <div class="logo-line"></div>
        <divclass="clearfix"></div>
    </div>
    <div class="nano has-scrollbar">
      <div class="nano-content" tabindex="0" style="right:-15px;">
          <ul>
              <li class="open" data-id="f32c3ed">
                <a class="yay-sub-toggle-ext" href="#">
                    <span class="toggle-icon-holder">
                        <span class="yay-collapse-icon arrow_carrot-down_alt2"></span>
                    </span>
                      Metrics
                </a>
                  <ul>
                      <li data-id="2906121">
                          <a href="/Metrics/Summary">Summary</a>
                      </li>
                    ...
                  </ul>
              </li>
              <li data-id="eec8908" class="open">
                  <a class="yay-sub-toggle-ext" href="#">
                    <span class="toggle-icon-holder">
                        <span class="yay-collapse-icon arrow_carrot-down_alt2"></span>
                    </span>
                      Network
                 </a>
                  <ul style="display:block;">
                      <li data-id="638f3ab">
                          <a href="/Network/Genealogy">
                              Genealogy
                          </a>
                      </li>
                    ... 
                  </ul>
              </li>
             ...
           </ul>
      </div>
      <div class="nano-pane" style="display:block;">
          <div class="nano-slider" style="height:305px; transform:translate(0px, 0px);"></div>
      </div>
  </div>
</div>

Стили

/* Зададим стили для контейнера меню в развернутом состоянии */
yaybar.yay-shrink ~
.content-wrap {
    margin-left230px;
}
 
/* Зададим стили для контейнера меню в свернутом состоянии */
.yay-hide .yaybar.yay-shrink.yay-hide-to-small ~
.content-wrap {
    margin-left30px;
}
 
/* Зададим стили для контейнера меню */
.yaybar {
    overflowvisible;
    ...
}

Стили заголовка меню

/* Зададим стили для иконок используемых в меню */
.yaybar .glyphicon,
.yaybar .fa {
    display: inline-block;
    text-aligncenter;
    ...
}
 
/* Зададим стили для кнопки сворачивания пункта меню */
.yaybar .glyphicon.yay-collapse-icon,
.yaybar .fa.yay-collapse-icon {
    widthauto;
}
 
/* Зададим стили для контейнера хедера меню */
.yaybar .yaybar-top-area {
    positionabsolute;
    z-index1;
    displayblock;
    white-spacenowrap;
    ...
}
 
/* Зададим стили для ссылок в хедере(кнопка сворачивания меню, логотип компании) */
.yaybar .yaybar-top-area > a {
    display: inline-block;
    ...
}
 
.yaybar .yaybar-top-area > a:hover {
    ...
}
 
/* Зададим стили для кнопки сворачивания/разворачивания меню */
.yaybar .yaybar-top-area > a.yay-toggle {
    ...
}
 
 
/* Зададим стили для логотипа компании */
.yaybar .yaybar-top-area > a.company-logo {
    ...
}
 
.yaybar .yaybar-top-area > a.company-logo:hover {
    ...
}
  
/* Зададим стили для линии под логотипом */
.logo-line {
  background: rgba(139198651);
}
.logo-line:before {
  background: rgba(141902171);
}
.logo-line:after {
  background: rgba(1231231231);
}

Стили навигационного меню

/* Зададим стили списков из которых формируется меню/подменю */
.yaybar .nano .nano-content ul {
    ...
}
 
/* Зададим стили элементов меню/подменю */
.yaybar .nano .nano-content ul >
li {
    positionrelative;
    white-spacenowrap;
}
 
/* Зададим стили для ссылок содержащихся в пунктах меню и контейнеров кнопок разворачивания подменю */
.yaybar .nano .nano-content ul > li > a,
.yaybar .nano .nano-content ul > li .toggle-icon-holder {
    displayblock;
    ...
}
 
.yaybar .nano .nano-content ul > li > a:hover {
    ...
}
 
/* Зададим стили для кнопок разворачивания подменю */
.yaybar .nano .nano-content ul > li > .toggle-icon-holder > .yay-collapse-icon,
.yaybar .nano .nano-content ul > li > * > .toggle-icon-holder > .yay-collapse-icon {
    ...
}
 
/* Зададим стили для активных пунктов меню */
.yaybar .nano .nano-content ul > li.active > a:not(.toggle-icon-holder) {
    ...
}
 
.yaybar .nano .nano-content ul > li.active:hover > a:not(.toggle-icon-holder) {
    ...
}
 
.yaybar .nano .nano-content ul > li.open:hover > a,
.yaybar .nano .nano-content ul > li.active:hover > a {
    ...
}
 
/* Зададим стили для пунктов подменю */
.yaybar .nano .nano-content ul > li > ul > li > ul > li > a {
    ...
}
 
/* Зададим стили для меню в свернутом состоянии */
.yay-hide .yaybar .nano .nano-content {
    ...
}
 
.yay-hide .yaybar .nano .nano-content ul > li > a {
    transition: font-size 0s;
    ...
}
 
.yay-hide .yaybar .nano .nano-content ul > li > a.has-child {
    ...
}
 
.yay-hide .yaybar .nano .nano-content ul > li > .toggle-icon-holder > .yay-collapse-icon,
.yay-hide .yaybar .nano .nano-content ul > li > * > .toggle-icon-holder > .yay-collapse-icon {
    -webkit-transform:
    rotate(-90deg);
    -ms-transform:
    rotate(-90deg);
    transform:
    rotate(-90deg);
}
 
.yay-hide .yaybar .nano .nano-content ul > li > ul {
    visibilityhidden;
    positionabsolute;
    ...
}
 
.yay-hide .yaybar .nano .nano-content ul > li:hover > ul {
    visibilityvisible;
    displayblock !important;
    ...
}
 
.yay-hide .yaybar .nano .nano-content ul > li > .yay-text-item {
    displaynone;
    ...
}
 
.yay-hide .yaybar .nano >.nano-pane {
    opacity: 0;
    pointer-events: none;
    ...
}



Modals

Описание

Всплывающие окна реализованы на основе bootstrap modal, данный css-фреймворк во многом определяет структуру и стилевое оформление всплывающих окон.

Структура

<div class="modal fade in" id="send-confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
style="display: block;">
  <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
              </button>
              <h2>Send confirmation</h2>
          </div>
          <div class="modal-body">
              In order to reset your password you have to confirm your identity entering secret code which will be
              sent in SMS.
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" id="send-confirmation-button"
                      data-confirmation-type="phone">
                  Send confirmation
              </button>
          </div>
      </div>
  </div>
</div>


Стили

Для отображения модальных окон используются стили bootstrap, кастомные стили, в стандартной, теме используются только для задания определенным модальным окнам размеров, или для специфичного отображения элементов форм в модальных окнах.

 /* Зададим стили окну выбора позиции */
.modal-dialog.modal-position {
    ...
}
 
/* Зададим стили окну подтверждения */
.modal-dialog.modal-confirmation {
    ...
}
 
/* Зададим стили контейнеру с чекбоксами которые должны выводиться в строку */
.modal .checkbox-inline span,
.modal .checkbox-inline input[type=radio] {
    display: inline-block;
    vertical-alignmiddle;
    ...
}


Основные модальные окна

  
Селектор
Название
Использование
#send-confirmation-modal
Send confirmation
Предупреждает что на следующем шаге будет произведена отправка email или sms пользователю. Используется на страницах смены и восстановления пароля.
.modal-confirmation
Confirmation
Предлагает пользователю ввести полученный код подтверждения используется для сброса и востановления пароля, для подтверждения контактных данных, а так же опционально в ряде других модулей.
#need-specify-phone
Specify phone
Сообщает пользователю после авторизации о необходимости заполнить номер телефона и предлает это сделать
#need-confirm-phone
Confirm phone
Сообщает пользователю о необходимости наличия подтвержденного телефона и предлагает выполнить подтверждение
#need-specify-email
Specify email
Предлагает пользователю заполнить адрес электронной почты
#need-confirm-email
Confirm email
Предлагает пользователю подтвердить адрес электронной почты



System menu

Описание

Традиционно системное меню располагается в правом верхнем углу экрана, некоторые пункты этого меню могут содержать вложенные подпункты:

Структура

Меню сверстано с использованием маркированных списков, имеет следующую структуру:

 <div class="system-menu-container">
    <ul class="clearfix">
        <li>
            <div class="user-control-blocks-holder">
                <a class="ucp-open" href="#" title="Help">
                    <span class="icon_question_alt2 icon_lk_custom"></span>
                </a>
            </div>
        </li>
        <li>
            <ul class="navbar-nav navbar-right language-menu nav" title="Choose language">
                <li class="dropdown">
                    <a class="dropdown-toggle" href="/account/index" data-toggle="dropdown">
                        <div class="language-select">En</div>
                        <i class="icon-down"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="/site/language?language=ru-RU" tabindex="-1">Russian</a></li>
                        <li><a href="/site/language?language=en-US" tabindex="-1">English</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <ul class="navbar-nav navbar-right user-menu user-profile-btn nav">
                <li class="dropdown open">
                    <a class="dropdown-toggle" href="/system/profile" data-toggle="dropdown" aria-expanded="true">
                        <div class="user-avatar-img">
                            <div class="user-avatar-default-img" title="My profile"></div>
                        </div>
                        <span class="user-name">User name</span>
                        <i class="icon-down"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="user-menu-header">User menu</li>
                        <li class="divider"></li>
                        <li>
                            <a href="/system/profile" tabindex="-1">
                                <i class="icon-profile"></i>
                                <span title="Profile">Profile</span>
                            </a>
                        </li>
                        <li>
                            <a href="/system/settings" tabindex="-1">
                                <i class="icon-settings"></i>
                                <span title="Settings">Settings</span>
                            </a>
                        </li>
                        <li>
                            <a href="/site/logout" data-method="post" tabindex="-1">
                                <i class="icon-logout fa fa-sign-out fa-lg"></i>
                                <span title="Log out">Log out</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Стили

Стили компоновки пунктов меню

/* Зададим стиль контейнера в котором располагается системное меню */
.system-menu-container {
  floatright;
  font-size0;
    positionrelative;
    ...
}
 
/* Зададим стили маркированного списка элементы которого - пункты меню верхнего уровня */
.system-menu-container > ul {
    ...
}
 
/* Зададим стили пунктов меню верхнего уровня */
.system-menu-container > ul > li {
    list-stylenone;
    ...
}


Стили значков используемых в пунктов меню и кнопок

.system-menu-container .ucp-open span {
    ...
}

Стили пунктов меню

.system-menu-container .user-control-blocks-holder {
    display: inline-block;
    positionrelative;
    ...
}
 
/* Зададим стили для пунктов меню */
.system-menu-container .navbar-nav.language-menu .dropdown-toggle,
.system-menu-container .user-control-blocks-holder >
a {
    display: inline-block;
    transition: all 0.3s;
    ...
}
 
/* Зададим стили пункта меню на который наведена мышь */
.system-menu-container .navbar-nav.language-menu .dropdown-toggle:hover,
.system-menu-container .user-control-blocks-holder >
a:hover {
    ...
}
 
/* Зададим стили для развернутого, выпадающего пункта меню */
.system-menu-container > ul > li .dropdown-toggle {
    ...
}
 
.system-menu-container .language-menu .dropdown.open .dropdown-toggle {
    ...
}
/* Зададим стили для развернутого, выпадающего пункта меню на который наведен курсор мыши */
.system-menu-container .language-menu .dropdown.open .dropdown-toggle:hover {
    ...
}
 
/* Зададим стили аватара пользователя */
.user-avatar-img {
    ...
}
.user-avatar-img .user-avatar-default-img {
    ...
}
 
/* Зададим стили контейнера выпадающего меню */
.system-menu-container .dropdown-menu {
    ...
}

Стили вложенных пунктов меню(выпадающего меню)

 /* Зададим стили пунктов выпадающего меню */
.system-menu-container .dropdown-menu a {
    ...
}
 
/* Зададим стили пунктов выпадающего меню при наведении мыши */
.system-menu-container .dropdown-menu a:hover {
    ...
}
Выберите файлы или перетащите файлы
Была ли эта статья Вам полезна?
Да
Нет
  1. Yunis Mamedov

  2. Опубликовано
  3. Обновлено

Комментарии