mirror of
https://bitbucket.org/bellord13/kit.git
synced 2026-11-13 19:06:11 +03:00
412 lines
9.6 KiB
CSS
412 lines
9.6 KiB
CSS
|
|
:root {
|
|
--flex-padding: 15px 15px;
|
|
--flex-line-count: 1;
|
|
--flex-col-count: 2;
|
|
}
|
|
.flex-line > *,
|
|
.flex-col > *,
|
|
.flex-line-wrap > *,
|
|
.flex-col-wrap > *,
|
|
.flex-line.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
|
|
.flex-col.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
|
|
.flex-line-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
|
|
.flex-col-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child
|
|
{
|
|
padding: var(--flex-padding);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* деф настрйоки для ячейки */
|
|
.flex-line > *,
|
|
.flex-line-wrap > *,
|
|
.flex-col > *,
|
|
.flex-col-wrap > *,
|
|
.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
|
|
.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child
|
|
{
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-flex-wrap: nowrap;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
-webkit-justify-content: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-align-content: stretch;
|
|
-ms-flex-line-pack: stretch;
|
|
align-content: stretch;
|
|
|
|
-webkit-box-flex: 0;
|
|
-ms-flex-positive: 0;
|
|
flex-grow: 0;
|
|
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
|
|
-ms-flex-preferred-size: auto;
|
|
-webkit-flex-basis: auto;
|
|
flex-basis: auto;
|
|
}
|
|
|
|
.flex-line > .flex-line,
|
|
.flex-line > .flex-col,
|
|
.flex-line > .flex-col-wrap,
|
|
.flex-line > .flex-line-wrap,
|
|
|
|
.flex-col > .flex-line,
|
|
.flex-col > .flex-col,
|
|
.flex-col > .flex-col-wrap,
|
|
.flex-col > .flex-line-wrap,
|
|
|
|
.flex-line-wrap > .flex-line,
|
|
.flex-line-wrap > .flex-col,
|
|
.flex-line-wrap > .flex-col-wrap,
|
|
.flex-line-wrap > .flex-line-wrap,
|
|
|
|
.flex-col-wrap > .flex-line,
|
|
.flex-col-wrap > .flex-col,
|
|
.flex-col-wrap > .flex-col-wrap,
|
|
.flex-col-wrap > .flex-line-wrap
|
|
{
|
|
-ms-flex-preferred-size: 0;
|
|
-webkit-flex-basis: 0;
|
|
flex-basis: 0;
|
|
}
|
|
|
|
/*.flex-line > .flex-line,*/
|
|
/*.flex-line > .flex-col,*/
|
|
/*.flex-line > .flex-col-wrap,*/
|
|
.flex-line > .flex-line-wrap:not(.flex-cell-full-content),
|
|
|
|
.flex-col > .flex-line:not(.flex-cell-full-content),
|
|
.flex-col > .flex-col:not(.flex-cell-full-content),
|
|
/*.flex-col > .flex-col-wrap,*/
|
|
.flex-col > .flex-line-wrap:not(.flex-cell-full-content),
|
|
|
|
.flex-line-wrap > .flex-line:not(.flex-cell-full-content),
|
|
/*.flex-line-wrap > .flex-col,*/
|
|
/*.flex-line-wrap > .flex-col-wrap,*/
|
|
.flex-line-wrap > .flex-line-wrap:not(.flex-cell-full-content),
|
|
|
|
.flex-col-wrap > .flex-line:not(.flex-cell-full-content),
|
|
/*.flex-col-wrap > .flex-col,*/
|
|
/*.flex-col-wrap > .flex-col-wrap,*/
|
|
.flex-col-wrap > .flex-line-wrap:not(.flex-cell-full-content)
|
|
{
|
|
-ms-flex-preferred-size: auto;
|
|
-webkit-flex-basis: auto;
|
|
flex-basis: auto;
|
|
}
|
|
|
|
|
|
|
|
.flex-col > *,
|
|
.flex-col-wrap > *,
|
|
.flex-line > *,
|
|
.flex-line-wrap > *,
|
|
.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
|
|
.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child
|
|
{
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
|
|
.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > *:not(:first-child)
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.flex-line:not(.flex-cell) > *:empty, .flex-col:not(.flex-cell) > *:empty, .flex-cell:empty {
|
|
/*display: none !important;*/
|
|
}
|
|
|
|
|
|
.flex-col,
|
|
.flex-col-wrap,
|
|
.flex-line,
|
|
.flex-line-wrap
|
|
{
|
|
/*width: 100%;*/
|
|
padding: 0 !important;
|
|
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
|
|
-webkit-justify-content: flex-start;
|
|
-ms-flex-pack: start;
|
|
justify-content: flex-start;
|
|
|
|
-webkit-align-content: stretch;
|
|
-ms-flex-line-pack: stretch;
|
|
align-content: stretch;
|
|
|
|
-webkit-align-items: stretch;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.flex-col, .flex-col-wrap {
|
|
-webkit-align-content: flex-start;
|
|
-ms-flex-line-pack: start;
|
|
align-content: flex-start;
|
|
}
|
|
.flex-col, .flex-line, .flex-line-wrap, .flex-col-wrap {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex-positive: 0;
|
|
flex-grow: 0;
|
|
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
|
|
-ms-flex-preferred-size: auto;
|
|
-webkit-flex-basis: auto;
|
|
flex-basis: auto;
|
|
}
|
|
|
|
.flex-col, .flex-col-wrap {
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.flex-line, .flex-line-wrap {
|
|
-webkit-flex-direction: row;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
}
|
|
/* flex-wrap: nowrap */
|
|
.flex-col,
|
|
.flex-line {
|
|
-webkit-flex-wrap: nowrap;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.flex-line-wrap, .flex-col-wrap
|
|
{
|
|
-webkit-flex-wrap: wrap;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
.flex-cell
|
|
{
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
/*-webkit-flex-direction: column;*/
|
|
/*-ms-flex-direction: column;*/
|
|
/*flex-direction: column;*/
|
|
/*-webkit-flex-wrap: nowrap;*/
|
|
/*-ms-flex-wrap: nowrap;*/
|
|
/*flex-wrap: nowrap;*/
|
|
-webkit-justify-content: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-align-content: stretch;
|
|
-ms-flex-line-pack: stretch;
|
|
align-content: stretch;
|
|
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
|
|
-webkit-box-flex: 0;
|
|
-ms-flex-positive: 0;
|
|
flex-grow: 0;
|
|
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
|
|
-ms-flex-preferred-size: auto;
|
|
-webkit-flex-basis: auto;
|
|
flex-basis: auto;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* применяем к таблице: ПРОДОЛЬНОЕ выравнивание элементов в строке или колонке */
|
|
.flex-align-start {
|
|
-webkit-justify-content: flex-start !important;
|
|
-ms-flex-pack: start !important;
|
|
justify-content: flex-start !important;
|
|
}
|
|
.flex-align-end {
|
|
-webkit-justify-content: flex-end !important;
|
|
-ms-flex-pack: end !important;
|
|
justify-content: flex-end !important;
|
|
}
|
|
.flex-align-center {
|
|
-webkit-justify-content: center !important;
|
|
-ms-flex-pack: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
.flex-align-around {
|
|
-webkit-justify-content: space-around;
|
|
-ms-flex-pack: distribute;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
/* попереное */
|
|
.flex-align--stretch {
|
|
-webkit-align-items: stretch;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
}
|
|
.flex-align--center {
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.flex-cells-v-align--start > *{
|
|
justify-content: start;
|
|
}
|
|
.flex-cells-v-align--end > *{
|
|
justify-content: end;
|
|
}
|
|
.flex-cells-v-align--stretch > *{
|
|
justify-content: stretch;
|
|
}
|
|
.flex-cells-g-align--start > *{
|
|
align-items: start;
|
|
}
|
|
.flex-cells-g-align--end > *{
|
|
align-items: end;
|
|
}
|
|
.flex-cells-g-align--stretch > *{
|
|
align-items: stretch;
|
|
}
|
|
|
|
/* применяем к ячейкам: поперечное выравнивание */
|
|
.flex-cell-align--start {
|
|
-webkit-align-self: flex-start;
|
|
-ms-flex-item-align: start;
|
|
align-self: flex-start;
|
|
}
|
|
.flex-cell-align--end {
|
|
-webkit-align-self: flex-end;
|
|
-ms-flex-item-align: end;
|
|
align-self: flex-end;
|
|
}
|
|
.flex-cell-align--center {
|
|
-webkit-align-self: center;
|
|
-ms-flex-item-align: center;
|
|
align-self: center;
|
|
}
|
|
.flex-cell-align--stretch {
|
|
-webkit-align-self: stretch;
|
|
-ms-flex-item-align: stretch;
|
|
align-self: stretch;
|
|
}
|
|
|
|
|
|
.flex-wrap
|
|
{
|
|
-webkit-flex-wrap: wrap;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* применяем к ячейке определяя макс возможное заполнение*/
|
|
.flex-cell-full-content {
|
|
-ms-flex-positive: 1;
|
|
-webkit-box-flex: 1;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.flex-cell-fill {
|
|
-ms-flex-negative: 1;
|
|
flex-shrink: 1;
|
|
|
|
-ms-flex-positive: 1;
|
|
-webkit-box-flex: 1;
|
|
flex-grow: 1;
|
|
flex-basis: auto;
|
|
}
|
|
|
|
.flex-box-fill > * {
|
|
-ms-flex-negative: 1;
|
|
flex-shrink: 1;
|
|
|
|
-ms-flex-positive: 1;
|
|
-webkit-box-flex: 1;
|
|
flex-grow: 1;
|
|
flex-basis: auto;
|
|
}
|
|
|
|
|
|
|
|
|
|
.flex-col-count {
|
|
|
|
}
|
|
|
|
@supports (--flex-col-count:property) {
|
|
.flex-col-count > * {
|
|
width: calc(100% / (var(--flex-col-count)));
|
|
max-width: calc(100% / (var(--flex-col-count)));
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.flex-line-wrap.flex-col-count > *,
|
|
.flex-line.flex-col-count > *
|
|
{
|
|
-ms-flex-preferred-size: calc(100% / var(--flex-col-count));
|
|
-webkit-flex-basis: calc(100% / var(--flex-col-count));
|
|
flex-basis: calc(100% / var(--flex-col-count));
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
|
|
.flex-col-count.flex-col-without-frame {
|
|
|
|
}
|
|
|
|
.flex-line-count {
|
|
|
|
}
|
|
@supports (--flex-line-count:property) {
|
|
.flex-col-wrap.flex-line-count > *,
|
|
.flex-col.flex-line-count > *
|
|
{
|
|
-ms-flex-preferred-size: calc(100% / (var(--flex-line-count)));
|
|
-webkit-flex-basis: calc(100% / (var(--flex-line-count)));
|
|
flex-basis: calc(100% / (var(--flex-line-count)));
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
|
|
.flex-cell-aspect-auto {
|
|
flex-grow: 1000;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
|
|
.col-count:not(.slick-slider) {
|
|
position: relative;
|
|
margin-left: calc(var(--gap) / -2) !important;
|
|
margin-right: calc(var(--gap) / -2) !important;
|
|
}
|
|
.col-count:not(.slick-slider) > * {
|
|
width: calc(100% / var(--col-count)) !important;
|
|
max-width: calc(100% / var(--col-count)) !important;
|
|
flex-basis: calc(100% / var(--col-count)) !important;
|
|
padding-left: calc(var(--gap) / 2);
|
|
padding-right: calc(var(--gap) / 2);
|
|
padding-bottom: var(--gap);
|
|
} |