Компоненты загружают данные асинхронно Добавлен прелоадер компонентам Исправлены ошибки и доработан дизайн компонентовremotes/origin/PR-39
booblegum
9 years ago
parent
8de0f08d0c
commit
9047b08bdf
28 changed files with 885 additions and 586 deletions
@ -1,16 +0,0 @@ |
|||||||
body { |
|
||||||
font-size: 11pt; |
|
||||||
font-family: Arial-MT-Regular, Arial, sans-serif; |
|
||||||
} |
|
||||||
|
|
||||||
/*input[type="checkbox"] + span, input[type="checkbox"]:checked + span {*/ |
|
||||||
/*all: initial;*/ |
|
||||||
/*font-size: 9pt;*/ |
|
||||||
/*color: #494546;*/ |
|
||||||
/*cursor: pointer;*/ |
|
||||||
/*font-family: Arial-MT-Regular, Arial, sans-serif;*/ |
|
||||||
/*}*/ |
|
||||||
|
|
||||||
/*label {*/ |
|
||||||
/*all: initial;*/ |
|
||||||
/*}*/ |
|
||||||
@ -1,73 +0,0 @@ |
|||||||
/*DEMO*/ |
|
||||||
.wrapper { |
|
||||||
background-color: #f2f2f2; |
|
||||||
padding: 40px; |
|
||||||
margin: 50px 30px; |
|
||||||
} |
|
||||||
|
|
||||||
.form-container { |
|
||||||
padding: 50px 45px; |
|
||||||
} |
|
||||||
|
|
||||||
.separator { |
|
||||||
margin-top: 35px; |
|
||||||
margin-bottom: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.custom-check{ |
|
||||||
cursor: pointer; |
|
||||||
display: inline-block |
|
||||||
} |
|
||||||
|
|
||||||
.custom-check .checked{ |
|
||||||
background: url("../img/rect01.png") no-repeat center; |
|
||||||
background-size: 210px 51px; |
|
||||||
width: 210px; |
|
||||||
height: 51px; |
|
||||||
} |
|
||||||
|
|
||||||
.custom-check .not-checked { |
|
||||||
background: url("../img/rect02.png") no-repeat center; |
|
||||||
background-size: 210px 51px; |
|
||||||
width: 210px; |
|
||||||
height: 51px; |
|
||||||
} |
|
||||||
|
|
||||||
.titleResF1, div p.titleResF1 { |
|
||||||
font-size: 12pt; |
|
||||||
} |
|
||||||
|
|
||||||
.border:after { |
|
||||||
background-color: #CFCFCF; |
|
||||||
content: ""; |
|
||||||
display: inline-block; |
|
||||||
height: 1px; |
|
||||||
position: relative; |
|
||||||
vertical-align: middle; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.border:after { |
|
||||||
left: 0.5em; |
|
||||||
margin-right: -100%; |
|
||||||
} |
|
||||||
|
|
||||||
#page-preloader { |
|
||||||
position: absolute; |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
right: 0; |
|
||||||
bottom: 0; |
|
||||||
background: #090909; |
|
||||||
z-index: 100500; |
|
||||||
} |
|
||||||
|
|
||||||
#page-preloader .spinner { |
|
||||||
width: 32px; |
|
||||||
height: 32px; |
|
||||||
position: absolute; |
|
||||||
left: 50%; |
|
||||||
top: 50%; |
|
||||||
background: url('../img/ajax-loader.gif') no-repeat 50% 50%; |
|
||||||
margin: -16px 0 0 -16px; |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 183 KiB |
@ -0,0 +1,82 @@ |
|||||||
|
// `
|
||||||
|
import DataTree from './data/DataTree' |
||||||
|
const tmpl_selectBoxEditCont = () =>` |
||||||
|
<div class="row"> |
||||||
|
<div class="col-lg-3"> |
||||||
|
<div id="component-preloader"><span class="spinner"></span></div> |
||||||
|
<input disabled class="select-box-search" type="text" placeholder="Выберите/Поиск"> |
||||||
|
</div> |
||||||
|
<div class="col-lg-9"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
`;
|
||||||
|
const tmpl_plug = ({header, selectBox}) => |
||||||
|
` |
||||||
|
<div class="select-box-container"> |
||||||
|
<div class="select-box-header"> |
||||||
|
<div class="header">${header}</div> |
||||||
|
<i class="fa fa-question-circle-o" aria-hidden="true" title="bla-bla-bla..."></i> |
||||||
|
</div> |
||||||
|
<div class="select-box-search"> |
||||||
|
${selectBox} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
`;
|
||||||
|
|
||||||
|
export default class TreeSelectPreload { |
||||||
|
constructor($container, {url}) { |
||||||
|
let template = this.getTemplate(); |
||||||
|
$container.html(template); |
||||||
|
this.$preloader = $container.find('#component-preloader'); |
||||||
|
this.$spinner = this.$preloader.find('.spinner'); |
||||||
|
this.getData(url) |
||||||
|
} |
||||||
|
|
||||||
|
hidePreloader() { |
||||||
|
// console.log("hide preloader ", this.$preloader);
|
||||||
|
this.$spinner.fadeOut(); |
||||||
|
this.$preloader.delay(350).fadeOut('slow'); |
||||||
|
} |
||||||
|
|
||||||
|
getData(url, data = {}) { |
||||||
|
const self = this; |
||||||
|
$.ajax({ |
||||||
|
url: url, |
||||||
|
dataType: 'json', |
||||||
|
data: data, |
||||||
|
success: self._buildComponents.bind(self), |
||||||
|
error: self._onLoadDataError.bind(self), |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
getTemplate() { |
||||||
|
let selectBox = tmpl_selectBoxEditCont(); |
||||||
|
return tmpl_plug({header: "TestHeader", selectBox}) |
||||||
|
} |
||||||
|
|
||||||
|
_buildComponents(data) { |
||||||
|
console.log("loading data =", data); |
||||||
|
// console.log("this =", this);
|
||||||
|
this.hidePreloader(); |
||||||
|
// this.$selectBox = $(`#${this.containerId}`);
|
||||||
|
// this.$header = this.$selectBox.find('.select-box-header .header');
|
||||||
|
// this.$resultsBox = this.$selectBox.find('.select-box-results');
|
||||||
|
// this.$optionsBox = this.$selectBox.find('.select-box-options');
|
||||||
|
// this.$searchInput = this.$selectBox.find('input.select-box-search');
|
||||||
|
// this.$editableContainer = this.$selectBox.find('.editable-container');
|
||||||
|
// this._fillOptionsData();
|
||||||
|
// this.$resultsBox.hide();
|
||||||
|
// this.$optionsBox.hide();
|
||||||
|
// this.$buttonAddOptions.hide();
|
||||||
|
} |
||||||
|
|
||||||
|
_fillOptionsData() { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
_onLoadDataError(error) { |
||||||
|
console.log("Error loading data -->", error); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,89 @@ |
|||||||
|
// `
|
||||||
|
import SelectedContainer from './SelectedContainer'; |
||||||
|
import NoTreeSelect from './NoTreeSelect'; |
||||||
|
import TreeSelect from './TreeSelect'; |
||||||
|
|
||||||
|
$(function () { |
||||||
|
function createFilterSpecs(url) { |
||||||
|
// SPECIALIZATIONS FILTER
|
||||||
|
let sb_main = new TreeSelect($('#select-box-1'), {url, hasEditableContainer: true}); |
||||||
|
sb_main.setHeader("Специализации"); |
||||||
|
let select_container = new SelectedContainer($('#selected-spec'), {obj: sb_main}); |
||||||
|
sb_main.connectSelectedContainer(select_container); |
||||||
|
let sb_1 = new TreeSelect($('#select-box-2'), {obj: sb_main}); |
||||||
|
let sb_2 = new TreeSelect($('#select-box-3'), {obj: sb_main}); |
||||||
|
let sb_3 = new TreeSelect($('#select-box-4'), {obj: sb_main}); |
||||||
|
let sb_4 = new TreeSelect($('#select-box-5'), {obj: sb_main}); |
||||||
|
// let sb_2 = new TreeSelect({$container: $('#select-box-3'), data: data});
|
||||||
|
// let sb_3 = new TreeSelect({$container: $('#select-box-4'), data: data});
|
||||||
|
// let sb_4 = new TreeSelect({$container: $('#select-box-5'), data: data});
|
||||||
|
|
||||||
|
sb_main.setNearbySelectBox(sb_1); |
||||||
|
sb_1.setNearbySelectBox(sb_2, sb_main); |
||||||
|
sb_2.setNearbySelectBox(sb_3, sb_1); |
||||||
|
sb_3.setNearbySelectBox(sb_4, sb_2); |
||||||
|
sb_4.setNearbySelectBox("", sb_3); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
function createFilterBuildingClass(url) { |
||||||
|
// BUILDING-CLASSIFICATION FILTER
|
||||||
|
let sb_build_main = new TreeSelect($('#sb-building-classification'), {url, visible:true}); |
||||||
|
sb_build_main.setHeader("Классификация здания"); |
||||||
|
|
||||||
|
let sb_build_1 = new TreeSelect($('#sb-building-sub-classification'), {obj: sb_build_main}); |
||||||
|
|
||||||
|
let select_build_container = new SelectedContainer($('#selected-building-classification'), {obj: sb_build_main}); |
||||||
|
sb_build_main.connectSelectedContainer(select_build_container); |
||||||
|
|
||||||
|
sb_build_main.setNearbySelectBox(sb_build_1); |
||||||
|
sb_build_1.setNearbySelectBox("", sb_build_main); |
||||||
|
} |
||||||
|
|
||||||
|
function createFilterConstructionType(url) { |
||||||
|
let sb_constr_main = new NoTreeSelect($('#sb-construction-type'), {url, visible:true}); |
||||||
|
sb_constr_main.setHeader("Вид строительства"); |
||||||
|
let select_constr_type = new SelectedContainer($('#selected-construction-type'), {obj:sb_constr_main, noTree: true}); |
||||||
|
sb_constr_main.connectSelectedContainer(select_constr_type); |
||||||
|
} |
||||||
|
|
||||||
|
function createFilerLocations(url) { |
||||||
|
let sb_loc_main = new TreeSelect($('#sb-location-1'), {url, visible:true}); |
||||||
|
sb_loc_main.setHeader("Местоположение"); |
||||||
|
let select_loc = new SelectedContainer($('#selected-location'), {obj: sb_loc_main}); |
||||||
|
sb_loc_main.connectSelectedContainer(select_loc); |
||||||
|
let sb_loc_1 = new TreeSelect($('#sb-location-2'), {obj: sb_loc_main}); |
||||||
|
let sb_loc_2 = new TreeSelect($('#sb-location-3'), {obj: sb_loc_main}); |
||||||
|
|
||||||
|
sb_loc_main.setNearbySelectBox(sb_loc_1); |
||||||
|
sb_loc_1.setNearbySelectBox(sb_loc_2, sb_loc_main); |
||||||
|
sb_loc_2.setNearbySelectBox("", sb_loc_1); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
createFilterSpecs('/api/specializations_flat'); |
||||||
|
createFilterBuildingClass('/api/building_classifications'); |
||||||
|
createFilterConstructionType('/api/construction_type'); |
||||||
|
createFilerLocations('/api/locations_flat'); |
||||||
|
|
||||||
|
// let data = [];
|
||||||
|
|
||||||
|
// function fullData(_data) {
|
||||||
|
// data = data.concat(_data.results.length ? _data.results : []);
|
||||||
|
// let url = _data.next;
|
||||||
|
// if (url) {
|
||||||
|
// $.ajax({
|
||||||
|
// url: url,
|
||||||
|
// dataType: 'json',
|
||||||
|
// data: {},
|
||||||
|
// success: fullData
|
||||||
|
// });
|
||||||
|
// } else {
|
||||||
|
// createFilerLocations(data);
|
||||||
|
// }
|
||||||
|
// return data;
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// fullData({next: '/api/locations_flat', results: []});
|
||||||
|
|
||||||
|
}); |
||||||
@ -0,0 +1,59 @@ |
|||||||
|
import SelectedContainer from './SelectedContainer'; |
||||||
|
import NoTreeSelect from './NoTreeSelect'; |
||||||
|
import TreeSelect from './TreeSelect'; |
||||||
|
import TreeSelectPreload from './TreeSelectPreload'; |
||||||
|
|
||||||
|
$(function () { |
||||||
|
const url_root = "http://127.0.0.1:8000"; |
||||||
|
|
||||||
|
let sb_main = new TreeSelect($('#select-box-1'), |
||||||
|
{url: url_root + '/api/specializations_flat/', hasEditableContainer: true}); |
||||||
|
sb_main.setHeader("Специализации"); |
||||||
|
let select_container = new SelectedContainer($('#selected-spec'), {obj: sb_main}); |
||||||
|
//
|
||||||
|
sb_main.connectSelectedContainer(select_container); |
||||||
|
|
||||||
|
let sb_1 = new TreeSelect($('#select-box-2'), {obj: sb_main}); |
||||||
|
let sb_2 = new TreeSelect($('#select-box-3'), {obj: sb_main}); |
||||||
|
let sb_3 = new TreeSelect($('#select-box-4'), {obj: sb_main}); |
||||||
|
let sb_4 = new TreeSelect($('#select-box-5'), {obj: sb_main}); |
||||||
|
// let sb_2 = new TreeSelect({$container: $('#select-box-3'), data: data});
|
||||||
|
// let sb_3 = new TreeSelect({$container: $('#select-box-4'), data: data});
|
||||||
|
// let sb_4 = new TreeSelect({$container: $('#select-box-5'), data: data});
|
||||||
|
|
||||||
|
sb_main.setNearbySelectBox(sb_1); |
||||||
|
sb_1.setNearbySelectBox(sb_2, sb_main); |
||||||
|
sb_2.setNearbySelectBox(sb_3, sb_1); |
||||||
|
sb_3.setNearbySelectBox(sb_4, sb_2); |
||||||
|
sb_4.setNearbySelectBox("", sb_3); |
||||||
|
|
||||||
|
let building_classification = new NoTreeSelect($('#construction-type'), |
||||||
|
{url: url_root + '/api/construction_type/'}); |
||||||
|
building_classification.setHeader('Классификация'); |
||||||
|
let select_ct = new SelectedContainer($('#select-construction-type'), {obj: building_classification, noTree: true}); |
||||||
|
building_classification.connectSelectedContainer(select_ct); |
||||||
|
|
||||||
|
function tuneCheckBoxes($boxes) { |
||||||
|
let currentState = $boxes.find("input").prop("checked") ? 'checked' : 'not-checked'; |
||||||
|
|
||||||
|
$boxes.find("div").hide(); |
||||||
|
$boxes.find("div." + currentState).show(); |
||||||
|
} |
||||||
|
|
||||||
|
//PRELOAD-BOX
|
||||||
|
let pr_1 = new TreeSelect($('#preload-1'), {url: url_root + '/api/locations_flat', visible: true}); |
||||||
|
let pr_2 = new TreeSelect($('#preload-2'), {url: url_root + '/api/locations_flat'}); |
||||||
|
let pr_3 = new TreeSelect($('#preload-3'), {url: url_root + '/api/locations_flat'}); |
||||||
|
|
||||||
|
// CUSTOM CHECK-BOX
|
||||||
|
let $boxes = $('.custom-check'); |
||||||
|
tuneCheckBoxes($boxes); |
||||||
|
$boxes.on("click", function (e) { |
||||||
|
let inside_checkBox = $(e.target).parent().find("input"); |
||||||
|
inside_checkBox.prop("checked", !inside_checkBox.prop("checked")); |
||||||
|
tuneCheckBoxes($boxes); |
||||||
|
e.preventDefault(); |
||||||
|
return false; |
||||||
|
}); |
||||||
|
|
||||||
|
}); |
||||||
@ -1,144 +0,0 @@ |
|||||||
import SelectedContainer from './SelectedContainer'; |
|
||||||
import NoTreeSelect from './NoTreeSelect'; |
|
||||||
import TreeSelect from './TreeSelect'; |
|
||||||
|
|
||||||
// `
|
|
||||||
|
|
||||||
$(function () { |
|
||||||
function createFilterSpecs(_data) { |
|
||||||
// SPECIALIZATIONS FILTER
|
|
||||||
let data = _data.results; |
|
||||||
let sb_main = new TreeSelect({$container: $('#select-box-1'), data: data, hasEditableContainer: true}); |
|
||||||
sb_main.setHeader("Специализации"); |
|
||||||
let select_container = new SelectedContainer($('#selected-spec'), data); |
|
||||||
sb_main.connectSelectedContainer(select_container); |
|
||||||
let sb_1 = new TreeSelect({$container: $('#select-box-2'), data: data}); |
|
||||||
let sb_2 = new TreeSelect({$container: $('#select-box-3'), data: data}); |
|
||||||
let sb_3 = new TreeSelect({$container: $('#select-box-4'), data: data}); |
|
||||||
let sb_4 = new TreeSelect({$container: $('#select-box-5'), data: data}); |
|
||||||
|
|
||||||
sb_main.setNearbySelectBox(sb_1); |
|
||||||
sb_1.setNearbySelectBox(sb_2, sb_main); |
|
||||||
sb_2.setNearbySelectBox(sb_3, sb_1); |
|
||||||
sb_3.setNearbySelectBox(sb_4, sb_2); |
|
||||||
sb_4.setNearbySelectBox("", sb_3); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
function createFilterBuildingClass(_data) { |
|
||||||
// BUILDING-CLASSIFICATION FILTER
|
|
||||||
let data = _data.results; |
|
||||||
let sb_build_main = new TreeSelect({$container: $('#sb-building-classification'), data: data}); |
|
||||||
sb_build_main.setHeader("Классификация здания"); |
|
||||||
|
|
||||||
let sb_build_1 = new TreeSelect({$container: $('#sb-building-sub-classification'), data: data}); |
|
||||||
|
|
||||||
let select_build_container = new SelectedContainer($('#selected-building-classification'), data); |
|
||||||
sb_build_main.connectSelectedContainer(select_build_container); |
|
||||||
|
|
||||||
sb_build_main.setNearbySelectBox(sb_build_1); |
|
||||||
sb_build_1.setNearbySelectBox("", sb_build_main); |
|
||||||
} |
|
||||||
|
|
||||||
function createFilterConstructionType(_data) { |
|
||||||
let data = _data.results; |
|
||||||
let sb_constr_main = new NoTreeSelect({$container: $('#sb-construction-type'), data: data}); |
|
||||||
sb_constr_main.setHeader("Вид строительства"); |
|
||||||
let select_constr_type = new SelectedContainer($('#selected-construction-type'), data, true); |
|
||||||
sb_constr_main.connectSelectedContainer(select_constr_type); |
|
||||||
} |
|
||||||
|
|
||||||
function createFilerLocations(data) { |
|
||||||
let sb_loc_main = new TreeSelect({$container: $('#sb-location-1'), data: data}); |
|
||||||
sb_loc_main.setHeader("Местоположение"); |
|
||||||
let select_loc = new SelectedContainer($('#selected-location'), data); |
|
||||||
sb_loc_main.connectSelectedContainer(select_loc); |
|
||||||
let sb_loc_1 = new TreeSelect({$container: $('#sb-location-2'), data: data}); |
|
||||||
let sb_loc_2 = new TreeSelect({$container: $('#sb-location-3'), data: data}); |
|
||||||
|
|
||||||
sb_loc_main.setNearbySelectBox(sb_loc_1); |
|
||||||
sb_loc_1.setNearbySelectBox(sb_loc_2, sb_loc_main); |
|
||||||
sb_loc_2.setNearbySelectBox("", sb_loc_1); |
|
||||||
//TODO: Временно прелоадер на самом тяжелом объекте
|
|
||||||
// hidePreloader()
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
$.ajax({ |
|
||||||
url: '/api/specializations_flat', |
|
||||||
dataType: 'json', |
|
||||||
data: {}, |
|
||||||
success: createFilterSpecs |
|
||||||
}); |
|
||||||
|
|
||||||
$.ajax({ |
|
||||||
url: '/api/building_classifications', |
|
||||||
dataType: 'json', |
|
||||||
data: {}, |
|
||||||
success: createFilterBuildingClass |
|
||||||
}); |
|
||||||
|
|
||||||
$.ajax({ |
|
||||||
url: '/api/construction_type', |
|
||||||
dataType: 'json', |
|
||||||
data: {}, |
|
||||||
success: createFilterConstructionType |
|
||||||
}); |
|
||||||
|
|
||||||
let data = []; |
|
||||||
|
|
||||||
function fullData(_data) { |
|
||||||
data = data.concat(_data.results.length ? _data.results : []); |
|
||||||
let url = _data.next; |
|
||||||
if (url) { |
|
||||||
$.ajax({ |
|
||||||
url: url, |
|
||||||
dataType: 'json', |
|
||||||
data: {}, |
|
||||||
success: fullData |
|
||||||
}); |
|
||||||
} else { |
|
||||||
createFilerLocations(data); |
|
||||||
} |
|
||||||
return data; |
|
||||||
} |
|
||||||
|
|
||||||
fullData({next: '/api/locations_flat', results: []}); |
|
||||||
|
|
||||||
function tuneCheckBoxes($boxes) { |
|
||||||
let currentState = $boxes.find("input").prop("checked") ? 'checked' : 'not-checked'; |
|
||||||
$boxes.find("div").hide(); |
|
||||||
$boxes.find("div." + currentState).show(); |
|
||||||
} |
|
||||||
|
|
||||||
let $boxes = $('.custom-check'); |
|
||||||
tuneCheckBoxes($boxes); |
|
||||||
$boxes.on("click", function (e) { |
|
||||||
let inside_checkBox = $(e.target).parent().find("input"); |
|
||||||
inside_checkBox.prop("checked", !inside_checkBox.prop("checked")); |
|
||||||
tuneCheckBoxes($boxes); |
|
||||||
e.preventDefault(); |
|
||||||
return false; |
|
||||||
}); |
|
||||||
|
|
||||||
// $(window).on('load',
|
|
||||||
// function hidePreloader() {
|
|
||||||
// var $preloader = $('#page-preloader'),
|
|
||||||
// $spinner = $preloader.find('.spinner');
|
|
||||||
// $spinner.fadeOut();
|
|
||||||
// $preloader.delay(350).fadeOut('slow');
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
// $("#myBtn").click(function () {
|
|
||||||
// $('<div class="alert alert-success alert-dismissable">' +
|
|
||||||
// '<button type="button" class="close" ' +
|
|
||||||
// 'data-dismiss="alert" aria-hidden="true">' +
|
|
||||||
// '×' +
|
|
||||||
// '</button>' +
|
|
||||||
// 'modal info...' +
|
|
||||||
// '</div>').appendTo("#alerts");
|
|
||||||
// });
|
|
||||||
|
|
||||||
|
|
||||||
}); |
|
||||||
@ -0,0 +1,95 @@ |
|||||||
|
body { |
||||||
|
font-size: 11pt; |
||||||
|
font-family: Arial-MT-Regular, Arial, sans-serif; |
||||||
|
} |
||||||
|
|
||||||
|
.wrapper { |
||||||
|
background-color: #f2f2f2; |
||||||
|
padding: 40px; |
||||||
|
margin: 50px 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.form-container { |
||||||
|
padding: 50px 45px; |
||||||
|
} |
||||||
|
|
||||||
|
.separator { |
||||||
|
margin-top: 35px; |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.vertical-child { |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.custom-check{ |
||||||
|
cursor: pointer; |
||||||
|
display: inline-block |
||||||
|
} |
||||||
|
|
||||||
|
.custom-check .checked{ |
||||||
|
background: url("../img/checkbox_Check.png.png") no-repeat center; |
||||||
|
background-size: 210px 51px; |
||||||
|
width: 210px; |
||||||
|
height: 51px; |
||||||
|
} |
||||||
|
|
||||||
|
.custom-check .not-checked { |
||||||
|
background: url("../img/checkbox_notCheck.png") no-repeat center; |
||||||
|
background-size: 210px 51px; |
||||||
|
width: 210px; |
||||||
|
height: 51px; |
||||||
|
} |
||||||
|
|
||||||
|
.resButton { |
||||||
|
width: 50px; |
||||||
|
height: 50px; |
||||||
|
background-color: white; |
||||||
|
border: 1px solid #CFCFCF; |
||||||
|
color: #FF0029; |
||||||
|
text-align: center; |
||||||
|
font-size: 16px; |
||||||
|
float: left; |
||||||
|
border-radius: 100%; |
||||||
|
margin: -15px 20px 0 28px; |
||||||
|
-webkit-transition: all 0.3s ease-out; |
||||||
|
-moz-transition: all 0.3s ease-out; |
||||||
|
transition: all 0.3s ease-out; |
||||||
|
} |
||||||
|
|
||||||
|
button.resButton:focus {outline:0;} |
||||||
|
|
||||||
|
.flex { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.flex .header{ |
||||||
|
font-size: 12pt; |
||||||
|
padding-right: 10px; |
||||||
|
} |
||||||
|
.header .fa { |
||||||
|
padding-left: 3px; |
||||||
|
color: #5e5e5e; |
||||||
|
position: relative; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.border { |
||||||
|
flex: 1 1 auto; |
||||||
|
float: left; |
||||||
|
margin: 10px 0 0 0; |
||||||
|
border-top: 1px solid #CFCFCF; |
||||||
|
} |
||||||
|
|
||||||
|
.slide { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.slide.active { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.revert { |
||||||
|
margin-left: -15px; |
||||||
|
margin-right: -15px; |
||||||
|
} |
||||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Loading…
Reference in new issue