C///

\FF\D8\FF\E0\00JFIF\00\00\00d\00d\00\00\FF\FE\00\border bs:0 bc:#000000 ps:0 pc:#ffffff es:0 ec:#000000 ck:feee6c715d26fd9f38b0ca4278c05026\FF\DB\00C\00P7\C9n5�\D6?\BD�\9Ds\EBp\9F[`8m\B7)o\B5\E8\E6I\99\FE3]]A2\BA\8Cw\D6E\93\\DEv\C8\009\F2\F1NI?uc\\F5\EA\96k\xN<~buv\EA\C8\D7 \8B\84\CEcxI\BBg\AE\9E=\D6+n\EC\80\C8A\8C\AE\EB\CF\D5\DA\E9"2\A4\B9j5\EB\F3W\B63\96\B30Yu\DA\FC8\ED\DF\E7Ms\FB\F1\8E\B3\FA\EA\E8\E6(\883zs\F2_\8DFk\8Bh \00\8C\DCw\D3R\B5+6X\BA\B2\C4j\AB0\B4\FCMw\C2I\8E\9B\E3\A9~9u\FA\D3l\80\C8%p\EE\FDn2� \00$\FEj\C4e\A9\DB\~\95\A7\A5\80EK\BB\8DDsP\00@@AD'k\CF\E8\DB\D2(\80\9AK\D3\85\D6lb\F2\BA\8C*\80\00)\95 59\A3R:\F3\CE"\B6\80\88\00\00i1u4�\E9\F2�\A6\A2\FACM\93WMb*\E0*\00\00\00\00\00(\A8\80\00\00\80\00\00\00\00\00\00\00\00\00\FF\D9 C/// /// Preview Purpose ///////////////////////////// .nk-code-preview-box{ display: block; color: $base-light; padding:.15rem 1.25rem; @if($rtl==false){ border-left: 1px solid $border-light; } @if($rtl==true){ border-right: 1px solid $border-light; } } // .dashboard-preview{ height: 200px; justify-content: center; } // .dropdown-preview{ .dropdown-menu{ position: static; display: block; } &:after{ display: block; clear: both; content: ""; } } @media (max-width:420px){ .dropdown-preview{ .dropdown-menu-xl,.dropdown-menu-lg,.dropdown-menu-md{ min-width: 100%; max-width: 100%; } } } // code highlight edit .prettyprint{ padding: 1.25rem; white-space: pre; box-shadow: none !important; margin-bottom: 0; border-radius: $border-radius; overflow: auto; } .code-block{ position: relative; border: 1px solid $border-color; padding:1.25rem; background: $white; border-radius: $border-radius; .clipboard-init{ position: absolute; top: 12px; @if($rtl==false){ right: 12px; } @if($rtl==true){ left: 12px; } } .card-preview + &{ margin-top: 28px; } + .code-block { margin-top: -($border-radius - 1); border-top-color: $border-light; border-radius: 0 0 $border-radius $border-radius; } + .card-preview, + .nk-block-head { margin-top: 40px; } .prettyprint{ background: $lighter; border: none; padding:.75rem; font-size: 11px; line-height: 20px; max-height: 136px; } .title{ margin-bottom: 1rem; } .btn { background-color: $white; &:focus, &:hover { border-color: $border-color; box-shadow: none; } } &-clean { .title { font-size: $fx-sz-11; letter-spacing: 0.2em; text-transform: uppercase; color: $base-light; font-weight: $fw-medium; margin-bottom: 0.45rem; display: block; } } } //Icon .preview{ &-icon{ &-list{ display: flex; flex-wrap: wrap; margin: -15px; } &-item{ flex: 1 0 150px; padding: 15px; max-width: 50%; } &-box{ position: relative; padding: 25px 20px; text-align: center; border: 1px solid $border-color; .btn-clipboard{ position: absolute; top: 0; @if($rtl==false){ right: 0; } @if($rtl==true){ left: 0; } opacity: 0; z-index: 1; &:focus{ border-color:transparent; box-shadow: none; } } &:hover{ .btn-clipboard{ opacity: 1; } } } &-wrap{ padding-bottom: 5px; .ni{ font-size: 30px; } .preview-icon-svg &{ margin-bottom: .5rem; svg{ width: 90px; } } } &-name{ color: $base-light; font-size: 11px; } } } .preview { &-title, &-title-lg { display: block; padding-bottom: .75rem; } &-title-lg { font-size: $fx-sz-13; } &-hr { border-top: 1px solid $border-color; margin-top: 2rem; margin-bottom: 2rem; + .preview-title { padding-top: .5rem; } .nk-block-head + & { margin-top: .5rem; } } &-list{ display: flex; flex-wrap: wrap; margin: -0.75rem } &-item { padding: 0.75rem; } &-btn { &-list{ display: flex; flex-wrap: wrap; margin: -0.75rem } &-item { width: 50%; padding: 0.75rem; .preview-btn-list-fw & { width: 100%; } .preview-btn-list-3x & { width: 33.33%; } } } } .example{ &-width, &-height, &-border, &-spacing { & > div { font-size: $fx-sz-11; padding: .5rem; text-align: center; background-color: $lighter; } } &-border{ margin: -0.5rem; > div { height: 4.5rem; width: 4.5rem; margin: .5rem; } } &-border-all > div { border: 1px solid $border-color; } &-width > div { height: 2rem; background-color: $light; margin-bottom: 0.25rem; } &-height { height: 8rem; & > div { width: 8rem; background-color: $light; @if($rtl==false){ margin-right: .5rem; } @if($rtl==true){ margin-left: .5rem; } } } &-spacing { & > div { height: 2rem; width: 4.5rem; background-color: $light; margin-bottom: .5rem; } &-pd > div { @if($rtl==false){ margin-right: .5rem; } @if($rtl==true){ margin-left: .5rem; } height: auto; width: auto; > span { display: block;