first commit

This commit is contained in:
2024-07-15 11:28:08 +02:00
commit f52d538ea5
21891 changed files with 6161164 additions and 0 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,212 @@
@mixin button_base() {
position: relative;
display: inline-block;
font-size: 11px;
line-height: 18px;
text-decoration: none;
padding: 4px 22px;
color: $dark_color;
text-transform: uppercase;
border-radius: $border_radius_small;
border-width: 1px;
border-style: solid;
outline: none;
cursor: pointer;
transition: all 200ms linear;
&:before {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: $border_radius_small;
background-image: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
content: '';
}
&:hover {
&:before {
background-image: linear-gradient(0deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
}
}
&:active {
&:before {
opacity: 0;
}
}
}
@mixin button_normal() {
background: $dark_color_2;
&:hover {
background: $dark_color_2_h;
}
}
@mixin button_primary() {
background: $blue_color;
&:hover {
background: $blue_color_h;
}
}
@mixin button_success() {
background: $green_color;
&:hover {
background: $green_color_h;
}
}
@mixin button_danger() {
background: $red_color;
&:hover {
background: $red_color_h;
}
}
@mixin button_warning() {
background: $orange_color;
&:hover {
background: $orange_color_h;
}
}
@mixin secondary_button() {
color: $light_color;
border-color: $secondary_outset_1 $secondary_outset_2 $secondary_outset_2 $secondary_outset_1;
background-color: $secondary_gradint_2;
&:active {
background-color: $secondary_bg_color;
border-color: darken( $secondary_outset_2, 10%) $secondary_outset_1 $secondary_outset_1 darken( $secondary_outset_2, 10%);
}
}
@mixin input() {
font-size: 12px;
line-height: 16px;
color: $dark_color;
background-color: $bg_color;
border-radius: $border_radius_extra_small;
padding: 5px;
min-height: 28px;
border: 1px solid $border_color;
box-shadow: none;
&:focus{
border-color: darken( $border_color, 20% );
box-shadow: none;
}
}
@mixin button_icon( $icon ) {
content: $icon;
display: inline-block;
font-family: dashicons;
font-size: 16px;
font-style: normal;
font-weight: 400;
height: 18px;
line-height: 18px;
text-align: center;
text-decoration: inherit;
transition: all 200ms linear;
vertical-align: middle;
}
@mixin button_icon_before( $icon ) {
&:before {
@include button_icon( $icon );
padding: 0 5px 0 0;
}
}
@mixin button_icon_after( $icon ) {
&:after {
@include button_icon( $icon );
padding: 0 0 0 5px;
}
}
@mixin button_icon_middle( $icon ) {
&:before {
@include button_icon( $icon );
margin: 0 -5px;
}
}
@mixin link() {
display: inline-block;
text-decoration: none;
font-size: 12px;
line-height: 20px;
font-weight: bold;
color: $blue_color;
text-transform: uppercase;
transition: all 200ms linear;
&:hover {
color: $dark_color_1;
box-shadow: none;
}
&:focus,
&:active {
outline: none;
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
color: $blue_color;
}
}
@mixin link_icon_before( $icon ) {
&:before {
@include button_icon( $icon );
padding: 0 5px 0 0;
color: $grey_color_4;
}
&:hover {
&:before {
color: $blue_color;
}
}
}
@mixin container() {
padding: 30px;
border: 2px solid $grey_color_2;
background: $grey_color_3;
border-radius: $border_radius_large;
}
@mixin container_heading() {
margin: -30px -30px 30px -30px;
border-radius: $border_radius_large $border_radius_large 0 0;
border-bottom: 1px solid $grey_color_2;
padding: 20px 30px;
font-weight: bold;
font-size: 16px;
line-height: 18px;
text-align: center;
background: #fff;
}
@mixin box() {
margin: 0 0 30px;
padding: 20px;
background: #fff;
box-shadow: $box_shadow_box;
border-radius: $border_radius_small;
}
@mixin box_heading() {
margin: -20px -20px 20px -20px;
border-radius: $border_radius_small $border_radius_small 0 0;
border-bottom: 1px solid $grey_color_2;
padding: 20px 30px;
font-weight: bold;
font-size: 16px;
line-height: 18px;
background: #fff;
}

View File

@@ -0,0 +1,17 @@
.cx-ui-kit{
button{
*{
pointer-events: none;
}
}
}
.cx-component{
&__content{
.cx-settings__content{
display: none;
&.show{
display: inherit;
}
}
}
}

View File

@@ -0,0 +1,86 @@
$bg_color: #f1f1f1;
$border_color: #dcdcdc;
$bg_color_2: #e5e5e5;
$primary_color: #2a90fc;
$blue_color: #298ffc;
$remove_color: #e54343;
$light_color: #ffffff;
$dark_color: #23282d;
$normal_bg_color: #e1e1e1;
$normal_gradint_1: #ffffff;
$normal_gradint_2: #f0f0f0;
$normal_outset_1: #d7d7d7;
$normal_outset_2: #b7b7b7;
$primary_bg_color: #206ff4;
$primary_gradint_1: #5fadff;
$primary_gradint_2: #2a90fc;
$primary_outset_1: #5b9add;
$primary_outset_2: #3e6a99;
$secondary_bg_color: #495159;
$secondary_gradint_1: #4c5054;
$secondary_gradint_2: #495159;
$secondary_outset_1: #777879;
$secondary_outset_2: #41464d;
$success_bg_color: #3ba956;
$success_gradint_1: #71e18f;
$success_gradint_2: #49c66a;
$success_outset_1: #49c56a;
$success_outset_2: #3a9e54;
$danger_bg_color: #c73434;
$danger_gradint_1: #f98888;
$danger_gradint_2: #e64545;
$danger_outset_1: #e54444;
$danger_outset_2: #b83636;
$warning_bg_color: #ee8425;
$warning_gradint_1: #ffcb81;
$warning_gradint_2: #faa832;
$warning_outset_1: #faa832;
$warning_outset_2: #c98627;
$dark_color_1: #23282d;
$dark_color_2: #495159;
$dark_color_2_h: #393f45;
$grey_color_1: #96989a;
$grey_color_2: #e5e5e5;
$grey_color_3: #f1f1f1;
$grey_color_4: #b4b7ba;
$blue_color: #298ffc;
$blue_color_h: #206ff4;
$green_color: #48c569;
$green_color_h: #3ba956;
$red_color: #e54343;
$red_color_h: #c73434;
$orange_color: #faa730;
$orange_color_h: #ee8425;
$border_radius_extra_small: 2px;
$border_radius_small: 4px;
$border_radius_medium: 6px;
$border_radius_large: 8px;
$box_shadow: 0 5px 13px rgba(0,0,0,.18);
$box_shadow_box: 0 8px 21px rgba(0,0,0,.1);
$light_color: #ffffff;
$dark_color: #23282d;
$switcher_bg_color: #f1f1f1;
$switcher_border_color: #dcdcdc;
$true_state_gradint_1: #71e18f;
$true_state_gradint_2: #49c66a;
$true_state_outset_1: #43b05f;
$true_state_outset_2: #3b9b54;
$false_state_gradint_1: #f98888;
$false_state_gradint_2: #e64545;
$false_state_outset_1: #e54545;
$false_state_outset_2: #c13b3b;

View File

@@ -0,0 +1,63 @@
.cx-button{
@include button_base();
&.cx-button-normal-style {
color: $dark_color;
border-color: $normal_outset_1 $normal_outset_2 $normal_outset_2 $normal_outset_1;
background-color: $normal_gradint_2;
&:active {
background-color: $normal_bg_color;
border-color: darken( $normal_outset_2, 10%) $normal_outset_1 $normal_outset_1 darken( $normal_outset_2, 10%);
}
}
&.cx-button-success-style {
color: $light_color;
border-color: $success_outset_1 $success_outset_2 $success_outset_2 $success_outset_1;
background-color: $success_gradint_2;
&:active {
background-color: $success_bg_color;
border-color: darken( $success_outset_2, 10%) $success_outset_1 $success_outset_1 darken( $success_outset_2, 10%);
}
}
&.cx-button-primary-style {
color: $light_color;
border-color: $primary_outset_1 $primary_outset_2 $primary_outset_2 $primary_outset_1;
background-color: $primary_gradint_2;
&:active {
background-color: $primary_bg_color;
border-color: darken( $primary_outset_2, 10%) $primary_outset_1 $primary_outset_1 darken( $primary_outset_2, 10%);
}
}
&.cx-button-secondary-style {
color: $light_color;
border-color: $secondary_outset_1 $secondary_outset_2 $secondary_outset_2 $secondary_outset_1;
background-color: $secondary_gradint_2;
&:active {
background-color: $secondary_bg_color;
border-color: darken( $secondary_outset_2, 10%) $secondary_outset_1 $secondary_outset_1 darken( $secondary_outset_2, 10%);
}
}
&.cx-button-danger-style{
color: $light_color;
border-color: $danger_outset_1 $danger_outset_2 $danger_outset_2 $danger_outset_1;
background-color: $danger_gradint_2;
&:active {
background-color: $danger_bg_color;
border-color: darken( $danger_outset_2, 10%) $danger_outset_1 $danger_outset_1 darken( $danger_outset_2, 10%);
}
}
&.cx-button-warning-style{
color: $light_color;
border-color: $warning_outset_1 $warning_outset_2 $warning_outset_2 $warning_outset_1;
background-color: $warning_gradint_2;
&:active {
background-color: $warning_bg_color;
border-color: darken( $warning_outset_2, 10%) $warning_outset_1 $warning_outset_1 darken( $warning_outset_2, 10%);
}
}
}

View File

@@ -0,0 +1,55 @@
.cx-checkbox-item{
width: 20px;
height: 20px;
display: inline-block;
border-radius: $border_radius_extra_small;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
position: relative;
background-color: $grey_color_3;
user-select: none;
transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
.marker{
position: absolute;
width: 20px;
height: 20px;
top: 0px;
left: 0px;
color: #fff;
font-size: 20px;
transition:inherit;
transform: scale(0);
&:before{
transition:inherit;
position: relative;
left: -1px;
}
}
}
.cx-label-content {
display: flex;
}
.cx-checkbox-input{
&[checked]{
&+.cx-checkbox-item{
background-color: $green_color;
.marker{
transform: scale(1);
}
}
}
}
.cx-checkbox-label{
font-size: 12px;
line-height: 20px;
color: $dark_color_1;
user-select: none;
&:focus{
outline: 1px solid rgba(41, 143, 252, .6);
box-shadow: 0px 0px 2px rgba(41,143,252,0.6);
}
}

View File

@@ -0,0 +1,50 @@
$font_size: 14px;
.cx-ui-colorpicker-wrapper {
.wp-picker-container {
padding: 3px;
border-radius: 3px;
.wp-color-result-text {
line-height: 18px;
text-align: right;
display: none;
}
.wp-color-result {
width: 60px;
height: 26px;
padding: 0;
border: none;
margin: 0;
box-shadow: inset 0 0 0 3px white;
border: 1px solid #d5dadf;
&:focus {
border: 1px solid #9ba7b3;
outline: none;
}
&:after {
display: none;
}
}
.wp-picker-input-wrap {
margin: 1px 0;
}
&.wp-picker-active {
.wp-color-result {
margin-right: 6px;
}
}
.iris-picker {
position: absolute;
z-index: 999;
}
}
}

View File

@@ -0,0 +1,105 @@
.cx-ui-container{
margin: 10px 0 20px 0;
}
label.cx-label{
margin: 0 0 5px 0;
display: block;
}
.cx-ui-dimensions {
max-width: 300px;
&__units {
margin-right: 20%;
display: flex;
justify-content: flex-end;
}
&__unit {
color: #c2cbd2;
cursor: pointer;
font-size: 9px;
text-transform: uppercase;
margin: 0 2px;
&.is-active {
color: #6d7882;
text-decoration: underline;
}
}
&__values {
display: flex;
border: 1px solid #a4afb7;
border-radius: 3px;
}
&__value-item {
position: relative;
width: 20%;
input {
width: 100%;
margin: 0;
border: none;
box-shadow: none;
border-right: 1px solid #a4afb7;
font-size: 12px;
&:first-child {
border-radius: 3px 0 0 3px;
}
&:focus {
border-color: none;
}
}
}
&__value-label {
width: 100%;
display: block;
position: absolute;
bottom: -18px;
font-size: 9px;
text-transform: uppercase;
text-align: center;
color: #d5dadf;
}
&__is-linked {
width: 20%;
height: 28px;
background-color: white;
text-align: center;
color: #a4afb7;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 3px 3px 0;
.link-icon {
display: none;
}
.unlink-icon {
display: block;
}
&.is-linked {
color: white;
background-color: #a4afb7;
.link-icon {
display: block;
}
.unlink-icon {
display: none;
}
}
}
}

View File

@@ -0,0 +1,325 @@
.cx-ui-iconpicker-group {
position: relative;
.full &{
max-width: 100%;
}
.fixed &{
max-width: 150px;
}
.input-group-addon {
position: absolute;
width: 20px;
height: 20px;
left: 0px;
top: 0px;
background: $grey_color_3;
font-size: 14px;
line-height: 20px;
text-align: center;
border-radius: 3px 0 0 3px;
border-right: 1px solid #dddcdc;
margin: 3px;
.fa {
line-height: 20px;
}
}
.cx-ui-text{
@include input();
padding: 0px 0px 0px 30px;
}
}
.iconpicker-popover.popover {
position: absolute;
top: 0;
left: 0;
display: none;
max-width: none;
padding: 1px;
text-align: left;
width: 242px;
background: #f0f0f0;
z-index: 999;
}
.iconpicker-popover.popover.top,
.iconpicker-popover.popover.topLeftCorner,
.iconpicker-popover.popover.topLeft,
.iconpicker-popover.popover.topRight,
.iconpicker-popover.popover.topRightCorner {
margin-top: -10px;
}
.iconpicker-popover.popover.right,
.iconpicker-popover.popover.rightTop,
.iconpicker-popover.popover.rightBottom {
margin-left: 10px;
}
.iconpicker-popover.popover.bottom,
.iconpicker-popover.popover.bottomRightCorner,
.iconpicker-popover.popover.bottomRight,
.iconpicker-popover.popover.bottomLeft,
.iconpicker-popover.popover.bottomLeftCorner {
margin-top: 10px;
}
.iconpicker-popover.popover.left,
.iconpicker-popover.popover.leftBottom,
.iconpicker-popover.popover.leftTop {
margin-left: -10px;
}
.iconpicker-popover.popover.inline {
margin: 0 0 14px 0;
position: relative;
display: inline-block;
opacity: 1;
top: auto;
left: auto;
bottom: auto;
right: auto;
max-width: 100%;
box-shadow: none;
z-index: auto;
vertical-align: top;
}
.iconpicker-popover.popover.inline > .arrow {
display: none;
}
.dropdown-menu .iconpicker-popover.inline {
margin: 0;
border: none;
}
.dropdown-menu.iconpicker-container {
padding: 0;
}
.iconpicker-popover.popover .popover-title {
padding: 14px;
font-size: 14px;
line-height: 16px;
border-bottom: 1px solid #ebebeb;
background-color: #f0f0f0;
}
.iconpicker-popover.popover .popover-title input[type=search].iconpicker-search {
margin: 0 0 2px 0;
}
.iconpicker-popover.popover .popover-title-text ~ input[type=search].iconpicker-search {
margin-top: 14px;
}
.iconpicker-popover.popover .popover-content {
padding: 0px;
text-align: center;
}
.iconpicker-popover .popover-footer {
float: none;
clear: both;
padding: 14px;
text-align: right;
margin: 0;
border-top: 1px solid #ebebeb;
background-color: #f0f0f0;
}
.iconpicker-popover .popover-footer:before,
.iconpicker-popover .popover-footer:after {
content: " ";
display: table;
}
.iconpicker-popover .popover-footer:after {
clear: both;
}
.iconpicker-popover .popover-footer .iconpicker-btn {
margin-left: 10px;
}
.iconpicker-popover .popover-footer input[type=search].iconpicker-search {
margin-bottom: 14px;
}
.iconpicker-popover.popover > .arrow,
.iconpicker-popover.popover > .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.iconpicker-popover.popover > .arrow {
border-width: 11px;
}
.iconpicker-popover.popover > .arrow:after {
border-width: 10px;
content: "";
}
.iconpicker-popover.popover.top > .arrow,
.iconpicker-popover.popover.topLeft > .arrow,
.iconpicker-popover.popover.topRight > .arrow {
left: 50%;
margin-left: -11px;
border-bottom-width: 0;
border-top-color: #f0f0f0;
bottom: -11px;
}
.iconpicker-popover.popover.top > .arrow:after,
.iconpicker-popover.popover.topLeft > .arrow:after,
.iconpicker-popover.popover.topRight > .arrow:after {
content: " ";
bottom: 1px;
margin-left: -10px;
border-bottom-width: 0;
border-top-color: #ffffff;
}
.iconpicker-popover.popover.topLeft > .arrow {
left: 14px;
margin-left: 0;
}
.iconpicker-popover.popover.topRight > .arrow {
left: auto;
right: 14px;
margin-left: 0;
}
.iconpicker-popover.popover.right > .arrow,
.iconpicker-popover.popover.rightTop > .arrow,
.iconpicker-popover.popover.rightBottom > .arrow {
top: 50%;
left: -11px;
margin-top: -11px;
border-left-width: 0;
border-right-color: #f0f0f0;
}
.iconpicker-popover.popover.right > .arrow:after,
.iconpicker-popover.popover.rightTop > .arrow:after,
.iconpicker-popover.popover.rightBottom > .arrow:after {
content: " ";
left: 1px;
bottom: -10px;
border-left-width: 0;
border-right-color: #ffffff;
}
.iconpicker-popover.popover.rightTop > .arrow {
top: auto;
bottom: 14px;
margin-top: 0;
}
.iconpicker-popover.popover.rightBottom > .arrow {
top: 14px;
margin-top: 0;
}
.iconpicker-popover.popover.bottom > .arrow,
.iconpicker-popover.popover.bottomRight > .arrow,
.iconpicker-popover.popover.bottomLeft > .arrow {
left: 50%;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #f0f0f0;
top: -11px;
}
.iconpicker-popover.popover.bottom > .arrow:after,
.iconpicker-popover.popover.bottomRight > .arrow:after,
.iconpicker-popover.popover.bottomLeft > .arrow:after {
content: " ";
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: #f0f0f0;
}
.iconpicker-popover.popover.bottomLeft > .arrow {
left: 14px;
margin-left: 0;
}
.iconpicker-popover.popover.bottomRight > .arrow {
left: auto;
right: 14px;
margin-left: 0;
}
.iconpicker-popover.popover.left > .arrow,
.iconpicker-popover.popover.leftBottom > .arrow,
.iconpicker-popover.popover.leftTop > .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #f0f0f0;
}
.iconpicker-popover.popover.left > .arrow:after,
.iconpicker-popover.popover.leftBottom > .arrow:after,
.iconpicker-popover.popover.leftTop > .arrow:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: #ffffff;
bottom: -10px;
}
.iconpicker-popover.popover.leftBottom > .arrow {
top: 14px;
margin-top: 0;
}
.iconpicker-popover.popover.leftTop > .arrow {
top: auto;
bottom: 14px;
margin-top: 0;
}
.iconpicker {
position: relative;
text-align: left;
text-shadow: none;
line-height: 0;
display: block;
margin: 0;
overflow: hidden;
}
.iconpicker * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: relative;
}
.iconpicker:before,
.iconpicker:after {
content: " ";
display: table;
}
.iconpicker:after {
clear: both;
}
.iconpicker .iconpicker-items {
position: relative;
clear: both;
float: none;
padding: 10px 0 0 10px;
background: #fff;
margin: 0;
overflow: hidden;
overflow-y: auto;
min-height: 55px;
max-height: 275px;
}
.iconpicker .iconpicker-items:before,
.iconpicker .iconpicker-items:after {
content: " ";
display: table;
}
.iconpicker .iconpicker-items:after {
clear: both;
}
.iconpicker .iconpicker-item {
float: left;
width: 28px;
height: 28px;
line-height: 28px;
margin: 0 7px 7px 0;
text-align: center;
cursor: pointer;
border-radius: 3px;
font-size: 18px;
color: #444;
box-shadow: 0 0 0 1px #dddddd;
.fa {
line-height: 28px;
}
}
.iconpicker .iconpicker-item:hover:not(.iconpicker-selected) {
background-color: #eeeeee;
}
.iconpicker .iconpicker-item.iconpicker-selected {
box-shadow: none;
background: #ddd;
}
.iconpicker-component {
cursor: pointer;
}

View File

@@ -0,0 +1,141 @@
.cx-ui-media-wrap {
.cx-upload-preview {
display: block;
margin: 0 0 5px 0;
.cx-image-wrap {
position: relative;
display: inline-block;
vertical-align: top;
width: 128px;
height: 128px;
.inner {
width: 110px;
height: 110px;
margin: 3px;
position: relative;
border: 1px solid #d5dadf;
padding: 5px;
overflow: hidden;
.preview-holder {
width: 100%;
height: 100%;
position: relative;
background: $bg_color;
box-sizing: border-box;
.centered {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: translate(50%,50%);
}
img {
max-width: 100%;
height: auto;
transform: translate(-50%,-50%);
}
span {
width: auto;
height: auto;
font-size: 60px;
transform: translate(-50%,-50%);
}
}
.title {
position: absolute;
display: none;
width: 100px;
padding: 5px;
margin: 5px;
bottom: 0;
left: 0;
color: #fff;
background: #a4afb7;
text-align: center;
font-size: 11px;
overflow: hidden;
}
}
&:hover {
.inner {
border-color: #d5dadf;
}
.title {
display: block;
}
.cx-remove-image {
display: block;
}
}
}
.cx-media-thumb-sortable-placeholder {
width: 120px;
height: 120px;
margin: 3px;
vertical-align: top;
border: 1px dashed $border_color;
display: inline-block;
background-color: $bg_color;
}
}
.upload-button {
float: left;
}
.cx-remove-image {
width: 25px;
height: 25px;
color: $remove_color;
display: block;
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
text-decoration: none;
outline: 0;
display: none;
i {
width: 25px;
height: 25px;
font-size: 25px;
}
&:hover {
color: darken( $remove_color, 10% );
}
}
.cx-bgsetting {
float: left;
width: 32%;
margin-right: 1%;
&:nth-child(3n+1) {
width: 34%;
margin-right: 0;
}
select {
margin-bottom: 10px;
}
}
}
.button-default_ {
@include button_base();
@include secondary_button();
}

View File

@@ -0,0 +1,91 @@
input.cx-radio-input{
display: none;
}
.cx-radio-item{
margin-bottom: 10px;
&:last-child{
margin-bottom: 0;
}
label {
display: inline-block;
font-size: 12px;
line-height: 14px;
color: $dark_color_1;
}
span.cx-radio-item {
width: 16px;
height: 16px;
border-radius: 25px;
margin-right: 10px;
cursor: pointer;
position: relative;
background-color: white;
display: inline-block;
float: left;
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
i {
width: 8px;
height: 8px;
background-color: #495159;
margin: 4px;
border-radius: 20px;
display: inline-block;
transform: scale(0);
transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
}
}
.cx-radio-item {
.cx-radio-input:checked{
& + label{
span{
i{
transform: scale(1);
}
}
}
}
}
.cx-radio-img {
float: left;
margin: 10px 5px 0 5px;
text-align: center;
max-width: 60px;
font-size: 12px;
position: relative;
.cx-lable-content {
display: flex;
flex-flow: column;
}
label{
display: inline-block;
}
img {
width: 100%;
height: auto;
margin: 0 0 5px 0;
pointer-events: none;
}
}
.cx-radio-img{
.cx-radio-input:checked{
& + label{
font-weight: bold;
.check{
display: block;
}
img{
box-shadow: 0 0 0 2px rgba(255, 254, 255, 1), 0 0 0 5px #49c66a;
}
}
}
}

View File

@@ -0,0 +1,140 @@
.cx-ui-repeater-container {
label.cx-label{
margin: 0 0 5px 0;
display: block;
}
}
.cx-ui-repeater {
&-add {
@include link();
@include link_icon_before( '\f132' );
}
&-item {
padding: 10px 10px 10px 30px;
position: relative;
}
&-remove {
position: absolute;
width: 20px;
height: 20px;
right: 18px;
top: 13px;
border-radius: 50%;
border: 1px solid currentColor;
color: red;
font-size: 18px;
line-height: 20px;
text-align: center;
cursor: pointer;
&:before {
content: "\00D7";
}
&:hover {
color: black;
}
}
}
.cx-ui-kit {
&.cx-ui-repeater-container {
@include container();
}
> label.cx-label {
@include container_heading();
}
.cx-ui-repeater {
&-item {
@include box();
}
&-actions-box {
@include box_heading();
padding: 15px 20px;
cursor: move;
position: relative;
text-align: center;
min-height: 18px;
}
&-toggle {
position: absolute;
color: $grey_color_4;
width: 20px;
height: 20px;
font-size: 22px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-decoration: none;
box-shadow: none;
outline: none;
top: 13px;
left: 18px;
&:before {
content: "\f142";
transition: all 200ms linear;
font-family: dashicons;
vertical-align: middle;
}
&:hover {
color: $dark_color_1;
}
}
&-remove {
position: absolute;
border: none;
color: $grey_color_4;
font-size: 20px;
line-height: 20px;
width: 20px;
height: 20px;
text-align: center;
vertical-align: middle;
text-decoration: none;
box-shadow: none;
outline: none;
top: 13px;
right: 18px;
&:before {
content: "\f158";
transition: all 200ms linear;
font-family: dashicons;
vertical-align: middle;
}
&:hover {
color: $dark_color_1;
}
}
&-title{
width: 70%;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
font-size: 14px;
}
&-add {
&:focus {
outline: none;
box-shadow: none;
}
}
}
.cx-ui-repeater-min {
padding-bottom: 0;
> .cheryr-ui-repeater-content-box {
display: none;
}
> .cx-ui-repeater-actions-box {
margin-bottom: 0;
border-bottom: none;
background: none;
.cx-ui-repeater-toggle {
&:before {
content: "\f140";
}
}
}
}
}

View File

@@ -0,0 +1,134 @@
select.cx-ui-select{
width: 100%;
outline: 0 none;
@include input();
&:focus{
box-shadow: none;
}
}
select.select2-hidden-accessible{
display: none;
}
.cx-ui-select-wrapper {
.select2{
color: $dark_color;
background-color: white;
border-radius: $border_radius_extra_small;
border: 1px solid $border_color;
.selection{
.select2-selection{
&.select2-selection--single{
background-color: transparent;
border: none;
border-radius: $border_radius_extra_small;
height: 28px;
.select2-selection__rendered{
padding: 5px;
font-size: 12px;
line-height: 18px;
}
.select2-selection__arrow{
height: 24px;
}
}
&.select2-selection--multiple{
background-color: transparent;
border: none;
border-radius: $border_radius_extra_small;
min-height: 25px;
.select2-selection__rendered{
font-size: 12px;
line-height: 14px;
padding: 0;
display: block;
&:focus {
outline: none;
}
.select2-selection__choice{
line-height: 14px;
margin: 2px;
border: none;
background-color: #e4e4e4;
border-radius: $border_radius_extra_small;
color: darken( $dark_color, 50% );
padding: 4px;
.select2-selection__choice__remove{
color: $remove_color;
margin-right: 5px;
font-size: 14px;
}
}
.select2-selection__clear{
}
.select2-search{
margin: 0;
.select2-search__field{
padding: 0;
border: none;
box-shadow: none;
line-height: 19px;
}
}
}
}
}
}
}
.select2-container{
.select2-dropdown{
background-color: white;
border: 1px solid $border_color;
border-radius: $border_radius_extra_small;
box-shadow: 0px 5px 21px rgba(0,0,0,0.1);
margin-top: 1px;
z-index: 500001;
.select2-search__field{
border: 1px solid $border_color;
box-shadow: none;
border-radius: $border_radius_extra_small;
margin: 0;
height: 25px;
&:focus{
outline: none;
}
}
.select2-results {
.select2-results__options{
.select2-results__option{
&[aria-selected=true]{
color: darken( $dark_color, 50% );
background-color: $dark_color;
}
&--highlighted{
color: #fff;
background-color: $primary_color;
}
}
.li[aria-disabled=true]{
display: none;
}
}
}
}
}
}

View File

@@ -0,0 +1,106 @@
.cx-slider-wrap{
display: flex;
flex-wrap: wrap;
.cx-slider-input{
flex: 0 1 10%;
min-width: 100px;
max-width: 200px;
}
.cx-slider-holder{
flex: 0 1 90%;
min-width: 200px;
max-width: 300px;
margin-right: 10px;
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 10px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
box-shadow: none;
background: #a4afb7;
border-radius: 25px;
border: none;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
height: 16px;
width: 16px;
margin-top: -6px;
border-radius: 15px;
background: white;
cursor: pointer;
-webkit-appearance: none;
transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #a4afb7;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
box-shadow: none;
background: #a4afb7;
border-radius: 25px;
border: none;
}
input[type=range]::-moz-range-thumb {
box-shadow: none;
border: none;
height: 16px;
width: 16px;
border-radius: 15px;
background: #a4afb7;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 10px;
cursor: pointer;
background: $grey_color_3;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: $grey_color_3;
border: none;
border-radius: 50px;
box-shadow: none;
}
input[type=range]::-ms-fill-upper {
background: $green_color;
border: none;
border-radius: 50px;
box-shadow: none;
}
input[type=range]::-ms-thumb {
box-shadow: none;
border: none;
height: 10px;
width: 10px;
border-radius: 15px;
background: #495159;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: $grey_color_3;
}
input[type=range]:focus::-ms-fill-upper {
background: $green_color;
}
}
.cx-input{
margin: 0;
width: 100%;
}
}

View File

@@ -0,0 +1,13 @@
.cx-ui-stepper{
position: relative;
max-width: 100px;
input[type=number]{
@include input();
}
}
.cx-ui-stepper-input{
min-width: 70px;
max-width: 70px;
text-align: left;
}

View File

@@ -0,0 +1,110 @@
.cx-switcher-wrap {
width: 54px;
height: 20px;
position: relative;
cursor: pointer;
user-select: none;
background-color: white;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
transform: translateZ(0);
.bg-cover {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #eceeef;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
pointer-events: none;
border-radius: 25px;
content: '';
z-index: 1;
transition: all 0.4s ease;
transform: translateZ(0);
}
label {
display: block;
z-index: 2;
span {
font-size: 7px;
line-height: 12px;
text-transform: uppercase;
color: #a4afb7;
text-align: center;
display: block;
opacity: 1;
transition: all 0.4s ease;
}
}
.sw-enable {
padding: 4px 4px 5px 12px;
span {
opacity: 0;
}
}
.sw-disable {
padding: 4px 12px 5px 4px;
span {
opacity: 1;
}
}
.state-marker {
background-color: white;
display: block;
position: absolute;
width: 18px;
height: 18px;
margin: 1px;
top: 0;
left: 0;
border-radius: 50%;
transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
box-sizing: border-box;
z-index: 3;
}
.cx-input-switcher {
display: none;
}
.cx-input-switcher-true:checked {
~ .sw-enable{
span{
opacity: 1;
color: white;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
}
}
~ .sw-disable{
span{
opacity: 0;
}
}
~ .state-marker {
left: 100%;
margin-left: -19px;
}
~ .bg-cover {
background-color: #49c66a;
}
}
}

View File

@@ -0,0 +1,3 @@
input.cx-ui-text{
@include input();
}

View File

@@ -0,0 +1,5 @@
textarea.cx-ui-textarea{
width: 100%;
@include input();
height: 100px;
}

View File

@@ -0,0 +1,548 @@
$color-1: #fff; // Background color.
$widget-bg: #495159; // Background color in widgets.
$color-2: #efefef; // Background color.
$color-3: #96989a; // Description color and tabs button text color.
$color-4: #b4b7ba; //
$color-5: #f1f1f1; // Scrollbar background
$color-6: #e5e5e5; // Hover scrollbar background
$color-7: #206ff4; // Scrollbar track background
$link-color: #298ffc; // link color.
$link-hover-color: #23282d; // link hover color.
$shadow: 0px 5px 21px rgba(0, 0, 0, 0.1); //Shadow.
$border: 1px solid rgba(0, 0, 0, 0.1) ;
$br-radius: 5px; // Border radius.
$padding: 5px;
$margin: 10px;
$max-height: 700px;
@import "components/use-in-js";
@import "components/variables";
@import "components/mixins";
@import "controls/button";
@import "controls/checkbox";
@import "controls/colorpicker";
@import "controls/iconpicker";
@import "controls/media";
@import "controls/radio";
@import "controls/repeater";
@import "controls/select";
@import "controls/slider";
@import "controls/stepper";
@import "controls/switcher";
@import "controls/text";
@import "controls/textarea";
@import "controls/dimensions";
.cherry-ui-container{
margin: 10px 0 20px 0
}
label.cherry-label{
margin: 0 0 5px 0;
display: block;
}
.hide{
display: none !important;
}
.cx-ui-kit{
font-size: 13px;
h1{
font-weight: 700;
line-height: 1.2em;
margin: 0;
.dashicons{
font-size: 3em;
line-height: inherit;
width: 20px;
margin: 0 $margin * 2 0 $margin * -0.5;
}
}
h2{
font-weight: 600;
font-size: 1.538em;
line-height: 1.538em;
.dashicons{
font-size: 2em;
line-height: inherit;
width: 20px;
margin-right: $margin * 2;
}
}
h3{
font-weight: 600;
font-size: 1.231em;
line-height: 1.231em;
.dashicons{
font-size: 1.7em;
line-height: inherit;
margin-right: $margin * 0.5;
}
}
h4{
font-weight: 500;
font-size: 1.077em;
line-height: 1.077em;
}
h5{
font-weight: 500;
font-size: 1.077em;
line-height: 1.077em;
}
h6{
font-weight: 400;
font-size: 1em;
line-height: 1em;
}
a{
color: $link-color;
text-decoration: none;
&:hover{
color: $link-hover-color;
}
&:focus{
outline: 1px solid rgba(41, 143, 252, .6);
box-shadow: 0px 0px 2px rgba(41,143,252,0.6);
}
}
&__description{
font-size: 0.9em;
color: $color-3;
margin: $margin 0;
}
&__title{
margin: $margin*2 0;
}
&.hide{
display: none;
}
}
.cx-control + .cx-control, .cx-settings + .cx-control{
border-top: $border;
}
.cx-section{
padding: $padding;
background-color: $color-1;
margin-left: -10px;
&__title, &__description{
margin: $margin 0 0 0;
}
& + .cx-ui-kit {
border-top: $border;
}
@media ( min-width: 783px ) {
box-shadow:$shadow;
border-radius: $br-radius;
border: $border;
padding: $padding * 1.5;
margin: $margin * 1.5 $margin * 1.5 0 0;
&__holder{
background-color: $color-2;
border-radius: $br-radius;
padding: $padding * 1.5;
}
&__inner{
}
&__info{
background-color: $color-1;
border-radius: $br-radius;
padding: $padding * 1.5;
box-shadow: $shadow;
margin-bottom: $padding * 1.5;
}
.cx-settings{
box-shadow: $shadow;
border-radius: $br-radius;
border: $border;
background-color: $color-1;
margin-top: $padding * 1.5;
&:first-child{
margin-top: 0;
}
}
}
@media ( min-width: 961px ) {
padding: $padding * 3;
margin: $margin * 2 $margin * 2 0 0;
&__info{
padding: $padding * 3;
margin-bottom: $padding * 3;
}
&__holder{
padding: $padding * 3;
}
.cx-settings{
margin-top: $padding * 3;
}
}
}
.cx-component{
padding: $padding * 2 0;
@media ( min-width: 783px ) {
padding: $padding * 1.5;
}
@media ( min-width: 961px ) {
padding: $padding * 3;
}
& + * {
border-top: $border;
}
&__title{
margin-top: 0;
}
& &__content{
.cx-settings{
padding: 0;
border-top: none;
}
}
&__button{
display: block;
min-height: 45px;
.cx-ui-kit__title {
color: inherit;
}
&.active, &:hover{
color: $link-color;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
&:focus{
outline: none;
box-shadow: inset 0px 0px 10px rgba(41,143,252,0.5);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
&.cx-accordion, &.cx-toggle{
.cx-component__button{
width: 100%;
padding: $padding * 1.5 $padding * 2;
border:0;
background: none;
cursor: pointer;
position: relative;
.widget &{
background-color: $widget-bg;
color: $color-1;
}
.cx-toggle__title {
font-weight: 700;
font-size: 14px;
float: left;
margin: 0;
}
>span[class*="icon"]{
position: absolute;
top: 50%;
right: 5px;
margin-top: -10px;
font-size: 25px;
color: $color-4;
padding: 5px 5px;
width: 10px;
height: 9px;
text-align: left;
overflow: hidden;
.widget &{
color: $color-1;
}
&.hide-icon{
&:before{
position: relative;
top: -8px;
left: -9px;
}
transform:scaleX(1);
transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
&.show-icon{
&:before{
position: relative;
top: -7px;
left: -9px;
}
transform:scaleX(0);
transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
}
&.active{
>span[class*="icon"]{
&.show-icon{
transform:scaleX(1);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
&.hide-icon{
transform:scaleX(0);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
}
}
}
.cx-component__button + .cx-settings__content{
border-top: $border;
}
> .cx-ui-kit__content{
& > .cx-settings + .cx-settings{
margin-top: $margin;
}
> .cx-settings{
box-shadow:$shadow;
border-radius: $br-radius;
border: $border;
.widget &{
box-shadow:none;
border-radius: 0;
border-left: 0;
border-right: 0;
}
}
}
}
&.cx-tab{
.cx-tab__tabs{
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
border-bottom: $border;
.cx-component__button{
order: 0;
flex: 0 1 100%;
align-self: auto;
padding: $padding * 1.5 $padding * 2;
border: 0;
background: none;
cursor: pointer;
&.active{
-ms-box-shadow: inset 0px -3px 0px 0px $link-color;
box-shadow: inset 0px -3px 0px 0px $link-color;
}
.cx-tab__title {
font-weight: 700;
font-size: 14px;
float: left;
margin: 0;
}
& + button{
border-top: $border;
}
}
}
.cx-tab__body{
box-shadow:$shadow;
border-radius: $br-radius;
border: $border;
background-color: $color-1;
.cx-settings{
box-shadow: none;
border-radius: 0;
border: none;
background-color: inherit;
margin: 0;
}
}
@media ( min-width: 783px ) {
.cx-tab__tabs{
border: solid 1px rgba(0,0,0,0.1);
.cx-component__button{
& + button{
border-top: none;
}
}
}
.cx-tab__body{
border: none;
.cx-tab__content{
border: $border;
}
}
&--horizontal{
>.cx-tab__body{
border-radius: none;
>.cx-tab__tabs{
flex-wrap: nowrap;
flex-direction: row;
border-radius:$br-radius $br-radius 0 0;
border-bottom: none;
.cx-component__button{
flex: 0 1 auto;
}
}
>.cx-tab__content{
border-radius: 0 0 $br-radius $br-radius;
}
}
}
&--vertical{
>.cx-tab__body{
display: flex;
border-radius: none;
>.cx-tab__tabs{
flex-direction: row;
-webkit-box-flex: 0;
flex: 0 1 20%;
border-radius:$br-radius 0 0 $br-radius;
border-right: none;
.cx-component__button{
text-align: right;
.cx-tab__title {
width: 100%;
}
&.active{
box-shadow: inset -3px 0px 0px $link-color;
}
}
}
>.cx-tab__content{
-webkit-box-flex: 0;
flex: 0 1 80%;
border-radius: 0 $br-radius $br-radius 0;
}
}
}
}
@media ( min-width: 1200px ) {
&--vertical{
.cx-tab__tabs{
flex: 0 1 20%;
}
.cx-tab__content{
flex: 0 1 80%;
}
}
}
}
.widget &{
padding: 0;
&__content{
margin: 0 $margin * -1.5 $margin * 2;
.cx-control{
padding: $padding * 1.5 $padding * 2;
}
}
}
}
.cx-settings{
& + & {
border-top: $border;
}
& &__title{
margin-bottom: $margin;
}
&__description, & &__title{
margin-left: $margin;
@media ( min-width: 783px ) {
margin-left: $margin * 1.5;
}
@media ( min-width: 961px ) {
margin-left: $margin * 3;
}
}
}
.cx-control {
padding: $padding * 1.5 $padding * 2;
&__title{
margin: 0 0 $margin 0 ;
}
&__description{
margin-top: 0;
}
.cx-ui-container {
margin: 0;
}
@media (min-width: 783px) {
padding: $padding * 1.5;
display: flex;
flex-flow: row nowrap;
&__info{
-webkit-box-flex: 0;
flex: 0 1 30%;
padding-right: $padding * 1.5;
}
&__content{
-webkit-box-flex: 0;
flex: 0 1 70%;
}
}
@media ( min-width: 961px ) {
padding: $padding * 3;
}
.widget & {
padding: $padding * 1.5 0;
flex-direction: column;
&__content{
-webkit-box-flex: 0;
flex: 0 1 100%;
}
&__info{
-webkit-box-flex: 0;
flex: 0 1 100%;
padding-right: 0;
}
}
&-hidden {
display: none;
}
}
.cx-section.cx-scroll > .cx-section__holder > .cx-section__inner,
.cx-tab__content > .cx-scroll,
.cx-accordion__content > .cx-scroll > .cx-settings__content,
.cx-toggle__content > .cx-scroll > .cx-settings__content {
@media ( min-width: 783px ) {
max-height: $max-height;
overflow-y: auto;
position: relative;
&::-webkit-scrollbar {
width: 10px;
height: 10px;
&-button {
width: 0px;
height: 0px;
}
&-thumb {
background-color: $link-color;
border: none;
border-radius: $br-radius;
&:hover, &:active {
background: $color-7;
}
}
&-track {
background-color: $color-1;
border: none;
border-radius: $br-radius;
}
&-corner {
background: transparent;
}
}
}
}