[Redizajn 1KA v2] Popupi: Urejanje --> Vprašalnik --> Predogled spremenljivke - v1

Poenotenje stylinga za preview s tem, kar je trenutno v Podatki - Vpogled

public/css/admin_new.css

@@ -8069,53 +8069,6 @@ div.setting_holder .setting_item input[type=checkbox][disabled] + label:before {
   pointer-events: none;
 }
 
-div#fullscreen div#preview_spremenljivka div#spremenljivka_preview div.spremenljivka div.naslov {
-  margin-bottom: 16px;
-  padding-bottom: 0;
-}
-div#fullscreen div#preview_spremenljivka div#spremenljivka_preview div.spremenljivka div.naslov p {
-  font-size: 18px !important;
-  font-weight: 600;
-}
-div#fullscreen div#preview_spremenljivka div#spremenljivka_preview div.spremenljivka div.naslov p.spremenljivka_info {
-  color: #777777;
-  font-size: 14px !important;
-  font-weight: 400;
-  margin-top: 16px;
-}
-div#fullscreen div#preview_spremenljivka div#spremenljivka_preview div.spremenljivka div.variable_holder {
-  margin-top: 0;
-}
-div#fullscreen div#preview_spremenljivka div#spremenljivka_preview div.spremenljivka div.variable_holder div.variabla {
-  padding: 0;
-}
-div#fullscreen div#preview_spremenljivka div#spremenljivka_preview div.spremenljivka div.variable_holder table td {
-  border: none;
-}
-div#fullscreen div#preview_spremenljivka div#spremenljivka_preview div.spremenljivka div.variable_holder table td.category label {
-  margin-right: 0;
-}
-div#fullscreen div#preview_spremenljivka div#spremenljivka_preview div.spremenljivka div.variable_holder table td.category textarea {
-  height: 30px !important;
-  width: 100% !important;
-  outline: 1px solid #C4C4C4;
-}
-div#fullscreen div#preview_spremenljivka div#spremenljivka_preview div.spremenljivka div.variable_holder table.grid_table tr:nth-child(2n+1) {
-  background-color: #F8F8F8;
-}
-div#fullscreen div#preview_spremenljivka div#spremenljivka_preview div.spremenljivka div.variable_holder table.ranking_table td div.dropzone {
-  border-top: 1px solid #E5E5E5;
-}
-div#fullscreen div#preview_spremenljivka div#spremenljivka_preview div.spremenljivka div.variable_holder table.text_vrednost td div.fotoresults_delete {
-  margin-left: 27px;
-  font-size: 14px !important;
-  color: #777777;
-  margin-top: 16px;
-}
-div#fullscreen div#preview_spremenljivka div#spremenljivka_preview div.spremenljivka div.variable_holder table.text_vrednost td div input.sig_clear_button {
-  margin-bottom: 16px;
-}
-
 div.qtip_comment {
   padding: 2px 16px 16px 16px;
 }
@@ -21909,7 +21862,7 @@ and open the template in the editor.
 /*
 * USED FROM: template.css
 */
-#preview_spremenljivka {
+#fullscreen #preview_spremenljivka {
   /*max-height: 90vh;
   overflow-y: scroll;*/
   max-width: 90vw;
@@ -21922,10 +21875,8 @@ and open the template in the editor.
   height: auto;
   max-height: 500px;
   width: 60vw;
-  /* font awesom za admin */
-  /* select, checked */
 }
-#preview_spremenljivka .popup_close {
+#fullscreen #preview_spremenljivka .popup_close {
   position: absolute !important;
   top: 10px;
   right: 10px;
@@ -21933,18 +21884,18 @@ and open the template in the editor.
   font-size: 12px !important;
   color: #777777;
 }
-#preview_spremenljivka .popup_close:hover {
+#fullscreen #preview_spremenljivka .popup_close:hover {
   color: #333333;
 }
-#preview_spremenljivka .popup_close a {
+#fullscreen #preview_spremenljivka .popup_close a {
   color: #777777;
   text-decoration: none;
 }
-#preview_spremenljivka .popup_close a:hover {
+#fullscreen #preview_spremenljivka .popup_close a:hover {
   color: #333333;
 }
-#preview_spremenljivka h2,
+#fullscreen #preview_spremenljivka h2,
-#preview_spremenljivka .divPopUp_top {
+#fullscreen #preview_spremenljivka .divPopUp_top {
   width: 100%;
   margin-bottom: 16px;
   padding-bottom: 8px;
@@ -21954,41 +21905,41 @@ and open the template in the editor.
   border-bottom: 1px #E5E5E5 solid;
   margin-block-start: 0;
 }
-#preview_spremenljivka h2 span.faicon,
+#fullscreen #preview_spremenljivka h2 span.faicon,
-#preview_spremenljivka h2 span.fa-brands,
+#fullscreen #preview_spremenljivka h2 span.fa-brands,
-#preview_spremenljivka .divPopUp_top span.faicon,
+#fullscreen #preview_spremenljivka .divPopUp_top span.faicon,
-#preview_spremenljivka .divPopUp_top span.fa-brands {
+#fullscreen #preview_spremenljivka .divPopUp_top span.fa-brands {
   margin-right: 6px;
   color: #1E88E5;
 }
-#preview_spremenljivka h2 span.faicon:before,
+#fullscreen #preview_spremenljivka h2 span.faicon:before,
-#preview_spremenljivka h2 span.fa-brands:before,
+#fullscreen #preview_spremenljivka h2 span.fa-brands:before,
-#preview_spremenljivka .divPopUp_top span.faicon:before,
+#fullscreen #preview_spremenljivka .divPopUp_top span.faicon:before,
-#preview_spremenljivka .divPopUp_top span.fa-brands:before {
+#fullscreen #preview_spremenljivka .divPopUp_top span.fa-brands:before {
   font-size: 14px;
 }
-#preview_spremenljivka p {
+#fullscreen #preview_spremenljivka p {
   line-height: 20px;
 }
-#preview_spremenljivka .popup_note,
+#fullscreen #preview_spremenljivka .popup_note,
-#preview_spremenljivka .profile_right_note {
+#fullscreen #preview_spremenljivka .profile_right_note {
   margin-bottom: 16px;
   padding: 8px;
   font-size: 16px;
   border: 1px #C4C4C4 solid;
 }
-#preview_spremenljivka .popup_main {
+#fullscreen #preview_spremenljivka .popup_main {
   display: flex;
   flex-direction: column;
   border-bottom: 1px #C4C4C4 solid;
 }
-#preview_spremenljivka .popup_main.no_border {
+#fullscreen #preview_spremenljivka .popup_main.no_border {
   border-bottom: none;
 }
-#preview_spremenljivka .popup_main.with_menu {
+#fullscreen #preview_spremenljivka .popup_main.with_menu {
   flex-direction: row;
 }
-#preview_spremenljivka .popup_main .popup_left {
+#fullscreen #preview_spremenljivka .popup_main .popup_left {
   box-sizing: border-box;
   width: 216px;
   min-width: 216px;
@@ -21997,11 +21948,11 @@ and open the template in the editor.
   margin-right: 16px;
   border-right: 1px #C4C4C4 solid;
 }
-#preview_spremenljivka .popup_main .popup_left .list {
+#fullscreen #preview_spremenljivka .popup_main .popup_left .list {
   display: flex;
   flex-direction: column;
 }
-#preview_spremenljivka .popup_main .popup_left .list .list-item {
+#fullscreen #preview_spremenljivka .popup_main .popup_left .list .list-item {
   cursor: pointer;
   display: flex;
   justify-content: space-between;
@@ -22013,38 +21964,38 @@ and open the template in the editor.
   border-radius: 2px;
   transition: 0.2s;
 }
-#preview_spremenljivka .popup_main .popup_left .list .list-item.active, #preview_spremenljivka .popup_main .popup_left .list .list-item:hover {
+#fullscreen #preview_spremenljivka .popup_main .popup_left .list .list-item.active, #fullscreen #preview_spremenljivka .popup_main .popup_left .list .list-item:hover {
   background-color: #F8F8F8;
   border-color: #1E88E5;
 }
-#preview_spremenljivka .popup_main .popup_left .list .list-item .profile_icons a {
+#fullscreen #preview_spremenljivka .popup_main .popup_left .list .list-item .profile_icons a {
   margin-left: 8px;
 }
-#preview_spremenljivka .popup_main .popup_left button {
+#fullscreen #preview_spremenljivka .popup_main .popup_left button {
   display: flex;
   align-items: center;
   width: 100%;
   font-weight: 400;
 }
-#preview_spremenljivka .popup_main .popup_left button .faicon {
+#fullscreen #preview_spremenljivka .popup_main .popup_left button .faicon {
   font-size: 12px;
   line-height: 14px;
 }
-#preview_spremenljivka .popup_main .popup_left button .faicon::before {
+#fullscreen #preview_spremenljivka .popup_main .popup_left button .faicon::before {
   margin-right: 8px;
   font-size: 14px;
   color: #1E88E5;
 }
-#preview_spremenljivka .popup_main .popup_right {
+#fullscreen #preview_spremenljivka .popup_main .popup_right {
   overflow-y: auto;
   max-height: 70vh;
   width: 100%;
 }
-#preview_spremenljivka .popup_main .popup_right .popup_right_note {
+#fullscreen #preview_spremenljivka .popup_main .popup_right .popup_right_note {
   margin-bottom: 16px;
   font-size: 16px;
 }
-#preview_spremenljivka .popup_main fieldset {
+#fullscreen #preview_spremenljivka .popup_main fieldset {
   display: flex;
   flex-direction: column;
   padding: 16px 0 0 0;
@@ -22052,47 +22003,406 @@ and open the template in the editor.
   border: 0;
   border-top: 1px #E5E5E5 solid;
 }
-#preview_spremenljivka .popup_main fieldset legend {
+#fullscreen #preview_spremenljivka .popup_main fieldset legend {
   padding: 0 8px 0 0;
   font-size: 14px;
 }
-#preview_spremenljivka .popup_main span {
+#fullscreen #preview_spremenljivka .popup_main span {
   font-size: 14px;
 }
-#preview_spremenljivka .popup_main .setting_line {
+#fullscreen #preview_spremenljivka .popup_main .setting_line {
   margin-bottom: 8px;
   font-size: 14px;
 }
-#preview_spremenljivka .popup_main .setting_line:last-of-type {
+#fullscreen #preview_spremenljivka .popup_main .setting_line:last-of-type {
   margin-bottom: 0;
 }
-#preview_spremenljivka .popup_main .setting_line label,
+#fullscreen #preview_spremenljivka .popup_main .setting_line label,
-#preview_spremenljivka .popup_main .setting_line span {
+#fullscreen #preview_spremenljivka .popup_main .setting_line span {
   font-size: 14px;
 }
-#preview_spremenljivka .popup_main .settings_block {
+#fullscreen #preview_spremenljivka .popup_main .settings_block {
   display: flex;
   flex-direction: column;
   margin-bottom: 16px;
 }
-#preview_spremenljivka .popup_main .settings_block label,
+#fullscreen #preview_spremenljivka .popup_main .settings_block label,
-#preview_spremenljivka .popup_main .settings_block span {
+#fullscreen #preview_spremenljivka .popup_main .settings_block span {
   font-size: 14px;
 }
-#preview_spremenljivka .button_holder {
+#fullscreen #preview_spremenljivka .button_holder {
   justify-content: end !important;
   margin: 20px 0 0 0;
 }
-#preview_spremenljivka .button_holder button:last-child {
+#fullscreen #preview_spremenljivka .button_holder button:last-child {
   margin-right: 0;
 }
-#preview_spremenljivka.warning_popup h2::before {
+#fullscreen #preview_spremenljivka.warning_popup h2::before {
   padding-right: 8px;
   font-family: "Font Awesome 5 Free";
   content: "\f071";
   font-size: 14px;
   color: #FFC700;
 }
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 24px 0;
+  color: #333333;
+  /* awesome radio in checkboxi */
+  /* custom checkbox and radio buttons */
+  /* Obstoječe skrijemo*/
+  /* Disabled radio / checkbox */
+  /* checkbox */
+  /* radio */
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .naslov {
+  margin: 0 0 24px 0;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .naslov p {
+  margin: 0;
+  font-weight: 700;
+  font-size: 20px;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .naslov .spremenljivka_info {
+  margin-top: 4px;
+  color: #a9a9a9;
+  font-size: 14px;
+  font-weight: 400;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .variable_holder {
+  height: auto !important;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .variable_holder .variabla {
+  padding: 0 0 16px 0;
+  font-size: 16px;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .variable_holder .variabla:last-child {
+  padding-bottom: 0;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=text], #fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka textarea, #fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka select {
+  margin: 0;
+  padding: 5px 7px;
+  min-width: 100px;
+  border-radius: 3px;
+  border: 1px #3e3e3e solid;
+  background-color: #fff;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=checkbox], #fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=radio] {
+  opacity: 0;
+  position: absolute !important;
+  width: 30px;
+  height: 24px;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=checkbox] + span.enka-checkbox-radio:before,
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=radio] + span.enka-checkbox-radio:before,
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=radio] + span.enka-custom-radio:before,
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=radio] + span.enka-vizualna-skala::before {
+  font-family: "Font Awesome 5 Free";
+  display: inline-block;
+  font-weight: 400;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=checkbox]:disabled + span.enka-checkbox-radio:before,
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=radio]:disabled + span.enka-checkbox-radio:before {
+  opacity: 0.5;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=checkbox] + span.enka-checkbox-radio,
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=radio] + span.enka-checkbox-radio {
+  font-size: 15px;
+  -webkit-text-stroke: 0.35px;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=checkbox] + span.enka-checkbox-radio:before {
+  content: "\f0c8";
+  letter-spacing: 10px;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=checkbox]:checked + span.enka-checkbox-radio:before {
+  content: "\f14a";
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=radio] + span.enka-checkbox-radio:before {
+  content: "\f111";
+  letter-spacing: 10px;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=radio]:checked + span.enka-checkbox-radio:before {
+  content: "\f192";
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=checkbox] + span.enka-checkbox-radio,
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=radio] + span.enka-checkbox-radio,
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .custom_radio_picture.obarvan > label > span.enka-custom-radio:before,
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .visual-radio-scale.checked .enka-vizualna-skala {
+  color: #1E88E5;
+  font-size: 20px;
+  vertical-align: -1px;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=text]:focus,
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=number]:focus,
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=email]:focus,
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka input[type=password]:focus,
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka textarea:focus {
+  border-color: #1E88E5;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka table.grid_table {
+  margin: 0;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka table.grid_table tr td,
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka table.grid_table tr th {
+  border: 0;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka table.grid_table tr td.category {
+  text-align: center;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka table.grid_table tr td.category label {
+  margin: 0;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka table.grid_table tr td.category span.enka-checkbox-radio:before {
+  letter-spacing: 0 !important;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka table.grid_table tr:nth-child(2n+1) {
+  background-color: #F1F8FD;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka table.text_vrednost {
+  table-layout: fixed;
+  text-align: left;
+  width: 100%;
+  border-spacing: 0;
+  margin: 0;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka table.text_vrednost tr td,
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka table.text_vrednost tr th {
+  border: 0;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_5 {
+  width: 5%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_10 {
+  width: 10%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_15 {
+  width: 15%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_20 {
+  width: 20%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_25 {
+  width: 25%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_30 {
+  width: 30%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_33 {
+  width: 33.3%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_35 {
+  width: 35%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_40 {
+  width: 40%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_45 {
+  width: 45%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_50 {
+  width: 50%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_55 {
+  width: 55%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_60 {
+  width: 60%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_65 {
+  width: 65%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_70 {
+  width: 70%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_75 {
+  width: 75%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_80 {
+  width: 80%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_85 {
+  width: 85%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_90 {
+  width: 90%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_95 {
+  width: 95%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .width_100 {
+  width: 100%;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .frame_dropping_titles {
+  width: 230px;
+  padding: 5px;
+  margin: 0px auto 0px auto;
+  height: 15px;
+  text-align: center;
+  background-color: white;
+  border-top: 1px solid #E5E5E5;
+  border-left: 1px solid #E5E5E5;
+  border-right: 1px solid #E5E5E5;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .frame_dropping {
+  width: 230px;
+  padding: 5px;
+  margin: 0px auto 10px auto;
+  height: 15px;
+  text-indent: -25px;
+  background-color: #F2F2F2;
+  border: 1px solid #E5E5E5;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka table.ranking_table {
+  width: 100%;
+  table-layout: fixed;
+  border-spacing: 0;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka table.ranking_table td {
+  width: 45%;
+  padding: 5px;
+  vertical-align: top;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka table.ranking_table td.middle {
+  width: 10%;
+  vertical-align: top;
+  text-align: center;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka table.ranking_table ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka td.middle img {
+  display: block;
+  margin: 50% 0 0 20px;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .ranking {
+  width: 230px;
+  padding: 5px;
+  margin: 0 auto 10px auto;
+  border: 1px solid black;
+  height: 15px;
+  text-align: center;
+  overflow: hidden;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .ranking_long {
+  width: 230px;
+  padding: 5px;
+  margin: 0 auto 10px auto;
+  border: 1px solid black;
+  height: 15px;
+  text-align: center;
+  overflow: hidden;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .handle {
+  width: 230px;
+  padding: 5px;
+  margin: 0 auto 10px auto;
+  border: 1px solid black;
+  height: 15px;
+  text-align: center;
+  overflow: hidden;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .handle_long {
+  width: 230px;
+  padding: 5px;
+  margin: 0 auto 10px auto;
+  border: 1px solid black;
+  height: 15px;
+  text-align: center;
+  overflow: hidden;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .ime {
+  width: 230px;
+  padding: 5px;
+  margin: 0 auto 10px auto;
+  border: 1px solid black;
+  height: 15px;
+  text-align: center;
+  overflow: hidden;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .izbran {
+  width: 230px;
+  padding: 5px;
+  margin: 0 auto 10px auto;
+  border: 1px solid black;
+  height: 15px;
+  text-align: center;
+  overflow: hidden;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .frame_ranking {
+  width: 230px;
+  padding: 5px;
+  margin: 0px auto 10px auto;
+  border: 1px dashed black;
+  height: 15px;
+  text-indent: -25px;
+  font-weight: bold;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .dropholder {
+  position: relative;
+  padding-top: 11px;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .dropholder .dropzone {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .dropzone {
+  border-top: 1px solid black;
+  min-height: 100px;
+  padding-top: 10px;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .moving {
+  cursor: pointer;
+  margin-left: auto;
+  margin-right: auto;
+  width: 230px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .frame_moving {
+  width: 230px;
+  padding: 5px;
+  margin: 0px auto 10px auto;
+  border: 1px dashed black;
+  height: 15px;
+  text-indent: -25px;
+  font-weight: bold;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka ul.sorting {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .sortholder {
+  margin: 0 auto;
+  width: 250px;
+  padding: 5px;
+}
+#fullscreen #preview_spremenljivka #spremenljivka_preview .spremenljivka .sortzone {
+  position: absolute;
+  margin: 0 auto 0 auto;
+  width: 250px;
+}
+
+#preview_spremenljivka {
+  /* font awesom za admin */
+  /* select, checked */
+}
 #preview_spremenljivka .buttons_holder {
   margin-top: 30px;
 }

resources/sass/admin_new/components/popup/page_specific.scss

@@ -129,99 +129,6 @@ div.setting_holder {
     }
 }
 
-//Preview spremenljivka
-div#fullscreen {
-    div#preview_spremenljivka {
-        div#spremenljivka_preview {
-            div.spremenljivka {
-                div.naslov {
-                    p {
-                        font-size: 18px !important;
-                        font-weight: $semi-bold;
-
-                        //Opomba na vprašanje
-                        &.spremenljivka_info {
-                            color: $very-dark-gray;
-                            font-size: 14px !important;
-                            font-weight: $regular;
-                            margin-top: 16px;
-                        }
-                    }
-
-                    margin-bottom: 16px;
-                    padding-bottom: 0;
-                }
-
-                div.variable_holder {
-
-                    margin-top: 0;
-
-                    div.variabla {
-                        padding: 0;
-                    }
-
-                    table {
-                        td {
-                            border: none;
-
-                            &.category {
-                                label {
-                                    margin-right: 0; //za centriranje radio buttonov v tabelah
-                                }
-
-                                textarea {
-                                    height: 30px !important;
-                                    width: 100% !important;
-                                    outline: 1px solid $dark-gray;
-                                }
-                            }
-                        }
-
-                        //Tabele
-                        &.grid_table {
-
-                            tr:nth-child(2n+1) {
-                                background-color: $light-gray;
-                            }
-
-                        }
-
-                        //Razvršanje
-                        &.ranking_table {
-
-                            td {
-                                div.dropzone {
-                                    border-top: 1px solid $gray;
-                                }
-                            }
-
-                        }
-
-                        //Fotografiraj
-                        &.text_vrednost {
-
-                            td {
-                                div.fotoresults_delete {
-                                    margin-left: 27px;
-                                    font-size: 14px!important;
-                                    color: $very-dark-gray;
-                                    margin-top: 16px;
-                                }
-
-                                div {
-                                    input.sig_clear_button {
-                                        margin-bottom: 16px;
-                                    }
-                                }
-                            }
-                            
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
 
 //Komentarji
 div.qtip_comment {

resources/sass/admin_new/pages/survey_edit/popups/preview_question.scss

@@ -26,6 +26,8 @@ $progress_bar_background: black;
 * USED FROM: template.css
 */
 
+//Preview spremenljivka
+#fullscreen {
     #preview_spremenljivka {
 		@include popup_general();
 
@@ -35,6 +37,410 @@ $progress_bar_background: black;
 		max-height: 500px;
 		width: 60vw;
 
+        #spremenljivka_preview {
+            .spremenljivka {
+                box-sizing: border-box;
+                width: 100%;
+                margin: 0;
+                padding: 24px 0;
+
+                color: $black;
+
+                .naslov {
+                    margin: 0 0 24px 0;
+
+                    p {
+                        margin: 0;
+
+                        font-weight: 700;
+                        font-size: 20px;
+                    }
+                    
+                    .spremenljivka_info{
+                        margin-top: 4px;
+                        
+                        color:#a9a9a9;
+                        font-size: 14px;
+                        font-weight: 400;
+                    }
+                }
+                .variable_holder {
+                    height: auto !important;
+
+                    .variabla{
+                        padding: 0 0 16px 0;
+                        font-size: 16px;
+
+                        &:last-child{
+                            padding-bottom: 0;
+                        }
+                    }
+                }
+
+
+                input[type="text"], textarea, select{
+                    margin: 0;
+                    padding: 5px 7px;
+                    min-width: 100px;
+                    
+                    border-radius: 3px;
+                    border: 1px #3e3e3e solid;
+                    background-color: #fff;
+                }
+
+                /* awesome radio in checkboxi */
+                /* custom checkbox and radio buttons */
+                /* Obstoječe skrijemo*/
+                input[type="checkbox"], input[type="radio"] {
+                    //display: none !important;
+                    opacity: 0;
+                    position: absolute !important;
+
+                    width: 30px;
+                    height: 24px;
+                }
+
+                input[type="checkbox"] + span.enka-checkbox-radio:before,
+                input[type="radio"] + span.enka-checkbox-radio:before,
+                input[type="radio"] + span.enka-custom-radio:before,
+                input[type="radio"] + span.enka-vizualna-skala::before{
+                    font-family: "Font Awesome 5 Free";
+                    display: inline-block;
+                    
+                    font-weight: 400;
+                }
+
+                /* Disabled radio / checkbox */
+                input[type="checkbox"]:disabled + span.enka-checkbox-radio:before,
+                input[type="radio"]:disabled + span.enka-checkbox-radio:before{
+                    opacity: 0.5;
+                }
+
+                input[type="checkbox"] + span.enka-checkbox-radio,
+                input[type="radio"] + span.enka-checkbox-radio {
+                    font-size: 15px;
+                    -webkit-text-stroke: 0.35px;
+                }
+
+                /* checkbox */
+                input[type="checkbox"] + span.enka-checkbox-radio:before {
+                    content: "\f0c8";
+                    letter-spacing: 10px;
+                }
+
+                input[type="checkbox"]:checked + span.enka-checkbox-radio:before {
+                    content: "\f14a";
+                }
+
+                /* radio */
+                input[type="radio"] + span.enka-checkbox-radio:before {
+                    content: "\f111";
+                    letter-spacing: 10px;
+                }
+
+                input[type="radio"]:checked + span.enka-checkbox-radio:before {
+                    content: "\f192";
+                }
+
+                input[type="checkbox"] + span.enka-checkbox-radio,
+                input[type="radio"] + span.enka-checkbox-radio,
+                .custom_radio_picture.obarvan > label > span.enka-custom-radio:before,
+                .visual-radio-scale.checked .enka-vizualna-skala{
+                    color: $blue;
+                    font-size: 20px;
+                    vertical-align: -1px;
+                }
+
+                input[type="text"]:focus,
+                input[type="number"]:focus,
+                input[type="email"]:focus,
+                input[type="password"]:focus,
+                textarea:focus{
+                    border-color: $blue;
+                }
+
+
+                table.grid_table{
+                    margin: 0;
+
+                    tr{
+                        td,
+                        th{
+                            border: 0;
+                        }
+
+                        td.category{
+                            text-align: center;
+        
+                            label{
+                                margin: 0;
+                            }
+        
+                            span.enka-checkbox-radio:before{
+                                letter-spacing: 0 !important;
+                            }
+                        }
+
+                        &:nth-child(2n+1){
+                            background-color: #F1F8FD;
+                        }
+                    }
+                } 
+
+                table.text_vrednost {
+                    table-layout: fixed;
+                    text-align: left;
+                    width: 100%;
+                    border-spacing: 0;
+                    margin: 0;
+
+                    tr{
+
+                        td,
+                        th{
+                            border: 0;
+                        }
+                    }
+                }
+                .width_5 {
+                    width: 5%;
+                }
+                .width_10 {
+                    width: 10%;
+                }
+                .width_15 {
+                    width: 15%;
+                }
+                .width_20 {
+                    width: 20%;
+                }
+                .width_25 {
+                    width: 25%;
+                }
+                .width_30 {
+                    width: 30%;
+                }
+                .width_33 {
+                    width: 33.3%;
+                }
+                .width_35 {
+                    width: 35%;
+                }
+                .width_40 {
+                    width: 40%;
+                }
+                .width_45 {
+                    width: 45%;
+                }
+                .width_50 {
+                    width: 50%;
+                }
+                .width_55 {
+                    width: 55%;
+                }
+                .width_60 {
+                    width: 60%;
+                }
+                .width_65 {
+                    width: 65%;
+                }
+                .width_70 {
+                    width: 70%;
+                }
+                .width_75 {
+                    width: 75%;
+                }
+                .width_80 {
+                    width: 80%;
+                }
+                .width_85 {
+                    width: 85%;
+                }
+                .width_90 {
+                    width: 90%;
+                }
+                .width_95 {
+                    width: 95%;
+                }
+                .width_100 {
+                    width: 100%;
+                }
+                .frame_dropping_titles {
+                    width: 230px;
+                    padding: 5px;
+                    margin: 0px auto 0px auto;
+                    height: 15px;
+                    text-align: center;
+                    background-color: white;
+                    border-top: 1px solid $gray;
+                    border-left: 1px solid $gray;
+                    border-right: 1px solid $gray;
+                }
+                .frame_dropping {
+                    width: 230px;
+                    padding: 5px;
+                    margin: 0px auto 10px auto;
+                    height: 15px;
+                    text-indent: -25px;
+                    background-color: $light-gray2;
+                    border: 1px solid $gray;
+                }
+
+                table.ranking_table {
+                    width: 100%;
+                    table-layout: fixed;
+                    border-spacing: 0;
+                    td {
+                        width: 45%;
+                        padding: 5px;
+                        vertical-align: top;
+                    }
+                    td.middle {
+                        width: 10%;
+                        vertical-align: top;
+                        text-align: center;
+                    }
+                    ul {
+                        list-style: none;
+                        margin: 0;
+                        padding: 0;
+                    }
+                }
+                td.middle {
+                    img {
+                        display: block;
+                        margin: 50% 0 0 20px;
+                    }
+                }
+                .ranking {
+                    width: 230px;
+                    padding: 5px;
+                    margin: 0 auto 10px auto;
+                    border: 1px solid black;
+                    height: 15px;
+                    text-align: center;
+                    overflow: hidden;
+                    cursor: pointer;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                .ranking_long {
+                    width: 230px;
+                    padding: 5px;
+                    margin: 0 auto 10px auto;
+                    border: 1px solid black;
+                    height: 15px;
+                    text-align: center;
+                    overflow: hidden;
+                    cursor: pointer;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                .handle {
+                    width: 230px;
+                    padding: 5px;
+                    margin: 0 auto 10px auto;
+                    border: 1px solid black;
+                    height: 15px;
+                    text-align: center;
+                    overflow: hidden;
+                }
+                .handle_long {
+                    width: 230px;
+                    padding: 5px;
+                    margin: 0 auto 10px auto;
+                    border: 1px solid black;
+                    height: 15px;
+                    text-align: center;
+                    overflow: hidden;
+                }
+                .ime {
+                    width: 230px;
+                    padding: 5px;
+                    margin: 0 auto 10px auto;
+                    border: 1px solid black;
+                    height: 15px;
+                    text-align: center;
+                    overflow: hidden;
+                }
+                .izbran {
+                    width: 230px;
+                    padding: 5px;
+                    margin: 0 auto 10px auto;
+                    border: 1px solid black;
+                    height: 15px;
+                    text-align: center;
+                    overflow: hidden;
+                }
+                .frame_ranking {
+                    width: 230px;
+                    padding: 5px;
+                    margin: 0px auto 10px auto;
+                    border: 1px dashed black;
+                    height: 15px;
+                    text-indent: -25px;
+                    font-weight: bold;
+                }
+                .dropholder {
+                    position: relative;
+                    padding-top: 11px;
+                    .dropzone {
+                        position: absolute;
+                        left: 0;
+                        right: 0;
+                        top: 0;
+                        bottom: 0;
+                    }
+                }
+                .dropzone {
+                    border-top: 1px solid black;
+                    min-height: 100px;
+                    padding-top: 10px;
+                }
+                .moving {
+                    cursor: pointer;
+                    margin-left: auto;
+                    margin-right: auto;
+                    width: 230px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                .frame_moving {
+                    width: 230px;
+                    padding: 5px;
+                    margin: 0px auto 10px auto;
+                    border: 1px dashed black;
+                    height: 15px;
+                    text-indent: -25px;
+                    font-weight: bold;
+                }
+                ul.sorting {
+                    list-style: none;
+                    margin: 0;
+                    padding: 0;
+                }
+                .sortholder {
+                    margin: 0 auto;
+                    width: 250px;
+                    padding: 5px;
+                }
+                .sortzone {
+                    position: absolute;
+                    margin: 0 auto 0 auto;
+                    width: 250px;
+                }
+            }
+        }
+    }
+}
+
+
+////// - stari styling
+#preview_spremenljivka {
+    
     .buttons_holder{
         margin-top: 30px;
     }