716 lines
11 KiB
SCSS
716 lines
11 KiB
SCSS
.cx-vui-notices {
|
|
z-index: 1000;
|
|
}
|
|
|
|
.jet-dashboard-page {
|
|
font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
|
|
margin: 25px 15px 0 15px;
|
|
|
|
&__header {
|
|
position: relative;
|
|
padding: 40px;
|
|
background: linear-gradient(90deg, #5B77E7 0%, #49B5D2 53.65%, #26E8A8 100%);
|
|
border-radius: 6px 6px 0px 0px;
|
|
|
|
.header-title {
|
|
color: white;
|
|
font-size: 18px;
|
|
font-weight: normal;
|
|
margin: 0;
|
|
}
|
|
|
|
.header-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
position: relative;
|
|
font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
|
|
}
|
|
|
|
&__footer {}
|
|
|
|
p {
|
|
font-size: 12px;
|
|
color: #7b7e81;
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
.dashicons {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.cx-vui-subtitle {
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
margin-bottom: 40px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid #DCDCDD;
|
|
}
|
|
|
|
.cx-vui-button {
|
|
background-color: transparent;
|
|
|
|
&:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.cx-vui-button__content {
|
|
> span {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.button-icon {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
&.cx-vui-button--style-accent {
|
|
color: #007cba;
|
|
box-shadow: inset 0px 0px 0px 1px #007cba;
|
|
|
|
.cx-vui-button__loader {
|
|
svg, path {
|
|
fill: #007cba;
|
|
}
|
|
}
|
|
|
|
.button-icon, path {
|
|
fill: #007cba;
|
|
}
|
|
}
|
|
|
|
&.cx-vui-button--style-danger {
|
|
color: #D6336C;
|
|
box-shadow: inset 0px 0px 0px 1px #D6336C;
|
|
|
|
.cx-vui-button__loader {
|
|
svg, path {
|
|
fill: #D6336C;
|
|
}
|
|
}
|
|
|
|
.button-icon, path {
|
|
fill: #D6336C;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cx-vui-alert {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 10px 20px;
|
|
margin-top: 20px;
|
|
background-color: #F4F4F5;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
|
|
.cx-vui-alert__icon {
|
|
margin-top: 3px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.cx-vui-alert__message {
|
|
flex: 1 1 auto;
|
|
color: #7B7E81;
|
|
font-size: 13px;
|
|
}
|
|
|
|
&.info-type {
|
|
background-color: #EDF6FA;
|
|
|
|
.cx-vui-alert__icon {
|
|
svg {
|
|
fill: #007CBA;
|
|
}
|
|
}
|
|
|
|
.cx-vui-alert__message {
|
|
color: #007CBA;
|
|
}
|
|
}
|
|
|
|
&.success-type {
|
|
background-color: #E9F6EA;
|
|
|
|
.cx-vui-alert__icon {
|
|
svg {
|
|
fill: #46B450;
|
|
}
|
|
}
|
|
|
|
.cx-vui-alert__message {
|
|
color: #46B450;
|
|
}
|
|
}
|
|
|
|
&.error-type {
|
|
background-color: #FBF0F0;
|
|
|
|
.cx-vui-alert__icon {
|
|
svg {
|
|
fill: #C92C2C;
|
|
}
|
|
}
|
|
|
|
.cx-vui-alert__message {
|
|
color: #C92C2C;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cx-vui-popup {
|
|
.cx-vui-popup__header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.cx-vui-popup__header-label {
|
|
font-weight: 500;
|
|
font-size: 24px;
|
|
line-height: 36px;
|
|
text-align: center;
|
|
color: #23282D;
|
|
}
|
|
|
|
.cx-vui-popup__content {
|
|
|
|
}
|
|
|
|
&.license-manager-popup {
|
|
|
|
.cx-vui-popup__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
overflow: hidden;
|
|
max-height: calc( 100% - 100px );
|
|
}
|
|
|
|
.cx-vui-popup__header {
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #DCDCDD;
|
|
|
|
.cx-vui-popup__header-inner {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.cx-vui-popup__content {
|
|
flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
|
|
.license-manager {
|
|
width: 100%;
|
|
max-width: 1260px;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
&.license-activation-popup {
|
|
|
|
.cx-vui-popup__header {
|
|
text-align: center;
|
|
}
|
|
|
|
.cx-vui-popup__body {
|
|
|
|
}
|
|
|
|
.popup-licence-control {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
margin-top: 10px;
|
|
|
|
p {
|
|
width: 100%;
|
|
}
|
|
|
|
.popup-licence__key {
|
|
flex: 1 1 auto;
|
|
|
|
input {
|
|
border-radius: 4px 0 0 4px;
|
|
}
|
|
}
|
|
|
|
.popup-licence__action-button {
|
|
border-radius: 0 4px 4px 0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.license-deactivation-popup {
|
|
.cx-vui-popup__content {
|
|
text-align: center;
|
|
|
|
.show-license-manager {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.update-check-popup {
|
|
|
|
.cx-vui-popup__content {
|
|
text-align: center;
|
|
|
|
svg {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
line-height: 30px;
|
|
|
|
span {
|
|
font-size: 20px;
|
|
color: #23282d;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.cx-vui-button {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.jet-dashboard-license-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
|
|
.ready-for-use-plugins {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
padding: 40px;
|
|
}
|
|
|
|
.avaliable-plugins {
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.license-manager-button {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.plugin-list--more-plugins {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
flex-wrap: wrap;
|
|
|
|
.plugin-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
flex-wrap: wrap;
|
|
width: 19%;
|
|
min-width: 200px;
|
|
margin-right: 1%;
|
|
margin-bottom: 30px;
|
|
|
|
&__inner {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
|
|
.plugin-tumbnail {
|
|
flex: 1 1 100%;
|
|
|
|
img {
|
|
width: auto;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.plugin-list {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
|
|
.plugin-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
width: 30%;
|
|
min-width: 400px;
|
|
margin-right: 2%;
|
|
margin-bottom: 40px;
|
|
|
|
&__inner {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
&.is-installed {}
|
|
|
|
&.is-activated {}
|
|
|
|
&.update-avaliable {
|
|
.plugin-version {
|
|
background-color: #D6336C;
|
|
}
|
|
}
|
|
|
|
&--more {
|
|
|
|
.plugin-item__inner {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
|
|
.plugin-tumbnail {
|
|
margin: 0;
|
|
|
|
img {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.plugin-tumbnail {
|
|
position: relative;
|
|
margin-right: 20px;
|
|
|
|
img {
|
|
width: 100px;
|
|
}
|
|
}
|
|
|
|
.plugin-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.plugin-name {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
font-size: 15px;
|
|
color: #23282d;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.plugin-desc {
|
|
margin: 10px 0 0 0;
|
|
}
|
|
|
|
.plugin-version {
|
|
font-size: 12px;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
background-color: #46B450;
|
|
color: white;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.plugin-actions {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin-top: 20px;
|
|
|
|
.cx-vui-button {
|
|
font-size: 13px;
|
|
margin-left: 20px;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
}
|
|
|
|
.show-license-control {
|
|
color: #46B450;
|
|
}
|
|
|
|
.deactivate-plugin-button {
|
|
color: #D6336C;
|
|
}
|
|
}
|
|
|
|
.plugin-update-label {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
color: #7B7E81;
|
|
font-size: 13px;
|
|
|
|
.latest-version {
|
|
color: #007DBA;
|
|
font-weight: 500;
|
|
margin: 0 3px;
|
|
}
|
|
|
|
.cx-vui-button {
|
|
font-size: 13px;
|
|
margin-left: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.add-new-license {
|
|
display: flex;
|
|
|
|
.cx-vui-button__content {
|
|
> span {
|
|
display: flex;
|
|
}
|
|
.dashicons {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.license-manager {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
|
|
.license-list {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
flex-wrap: wrap;
|
|
|
|
.license-item {
|
|
margin: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.license-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
width: 400px;
|
|
|
|
&__label {
|
|
font-weight: 500;
|
|
font-size: 24px;
|
|
line-height: 36px;
|
|
text-align: center;
|
|
color: #23282D;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
&__control {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
|
|
.license-item__activation-message {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.license-item__key {
|
|
}
|
|
|
|
.license-item__action-button {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
&__details {
|
|
flex-direction: 1 1 auto;
|
|
}
|
|
|
|
&__deactivation {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
&.license-activated {
|
|
.license-status {
|
|
color: #46B450;
|
|
}
|
|
|
|
.license-item__deactivation {
|
|
color: #D6336C;
|
|
box-shadow: inset 0px 0px 0px 1px #D6336C;
|
|
}
|
|
}
|
|
}
|
|
|
|
.license-details {
|
|
margin: 30px 0;
|
|
|
|
&__label {
|
|
color: #23282D;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
&__fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
}
|
|
|
|
&__field {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
margin-bottom: 10px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.label {
|
|
min-width: 120px;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
color: #23282D;
|
|
}
|
|
|
|
.status-label {
|
|
text-transform: capitalize;
|
|
color: #46B450;
|
|
}
|
|
|
|
.license-type {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
svg {
|
|
width: 110px;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.included-plugin-list {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
flex: 1 1 auto;
|
|
|
|
.included-plugin {
|
|
width: 50%;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
svg {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.license-status {
|
|
color: #C92C2C;
|
|
font-weight: 700;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
&.license-type {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
&.license-plugins {
|
|
flex: 1 1 auto;
|
|
}
|
|
}
|
|
|
|
&__actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
|
|
.show-license-manager {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.cx-vui-button {
|
|
margin-left: 5px;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup-enter {
|
|
opacity: 0;
|
|
|
|
.cx-vui-popup__body {
|
|
transform: translateY(10px);
|
|
}
|
|
}
|
|
.popup-enter-active {
|
|
transition: opacity .3s;
|
|
|
|
.cx-vui-popup__body {
|
|
transition: transform .3s;
|
|
}
|
|
}
|
|
.popup-enter-to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
|
|
.cx-vui-popup__body {
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
.popup-leave {
|
|
opacity: 1;
|
|
}
|
|
.popup-leave-leave {
|
|
transition: opacity .1s;
|
|
}
|
|
.popup-leave-to {
|
|
opacity: 0;
|
|
}
|