dialog design

by VadimMalkov

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default-v2.min.css">
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/cultures/kendo.culture.ru-RU.min.js"></script>
<div id="ex">
  <div id="taskWindow"
       data-visible="true"
       data-width="550"
       data-height="400"
       data-role="window"  
       data-animation="false"
       data-title="Задача"
       data-actions="[ 'Close' ]"
       data-scrollable="true">
    <ul class='form'>
      <li>
        <input placeholder="название" 
               data-bind="value: task.name"
               style="width:100%;"
               class="k-textbox"/>
      </li>
      <li style='height:calc(100% - 260px);'>
        <textarea class="k-textbox"
                  placeholder="описание"
                  style="width:100%; height:100%;" 
                  data-bind="value: task.context"></textarea>
      </li>
      <li>
        <input data-role="autocomplete"
               data-bind="value: project"
               data-placeholder="проект"
               style="width:100%;"/> 
      </li>
      <li>
        <input data-role="autocomplete"
               data-bind="value: part"
               data-placeholder="раздел"
               style="width:100%;"/> 
      </li>
      <li>
        <input data-role="autocomplete"
               data-bind="value: author"
               data-placeholder="сотрудник"
               style="width:100%;"/> 
      </li>
      <li>
        <span style="width:200px;">
          <span>неделя: </span>
          <span></span>
          <span> - </span>
          <input data-role="datepicker"
                 data-format="dd.MM.yy"
                 data-bind="value: sprint"
                 data-placeholder="неделя"
                 style="width:100px;"/>
          <button data-role="button"
 ...

CSS

.form {
  margin: 0 0 0 0;
  padding: 0;
  height: 100%;
}

.form li {
  list-style: none;
  margin-bottom: 2px;
  width: 100%;
  
}

.k-window>.k-header
{
  background-color: #8fb1c2;
}

.k-button.k-primary
{
  background-color: #8fb1c2;
  background-image: none;
  border-color: transparent;
}

.k-button.k-primary:active
{
  background-color: #4b7c94;
}

.k-window-titlebar
{
  padding:2px;
}

.k-colorpicker
{
  vertical-align:middle;
}

.k-window-content
{
  padding:5px;
}

.k-radio:checked + .k-radio-label:before {
    background-color: #4b7c94;
    box-shadow: inset 0 0 1px 0 #4b7c94;
}

.k-radio:focus:checked + .k-radio-label:before {
    -webkit-box-shadow: 0 0 0 2px rgba(100,100,100,.3);
    box-shadow: 0 0 0 2px rgba(100,100,100,.3);
    border-color: #4b7c94;
}

JavaScript

kendo.culture("ru-RU");

var model = kendo.observable({
  task:{
    name:"",
    context: "",
    project: "" ,
    part: "" ,
    author: "" ,
    sprint: "" ,
    status: "",
    volume: 0,
    color: "" 
  }
});
kendo.bind($("#ex"),model);