a link

by VadimMalkov

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default-v2.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
  <div kendo-window width="550" height="400" k-title="'Задача'" k-scrollable="true">
    <ul class='form'>
      <li>
        <input placeholder="название" ng-model="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%;"
                  ng-model="task.context"></textarea>
      </li>
      <li>
        <input kendo-auto-complete ng-model="task.project" style="width:100%;" />
      </li>
      <li>
        <input kendo-auto-complete ng-model="task.part" style="width:100%;" />
      </li>
      <li>
        <input kendo-auto-complete ng-model="task.author" style="width:100%;" />
      </li>
      <li>
        <span style="width:200px;">
          <span>неделя: </span>
          <span></span>
          <span> - </span>
          <input kendo-date-picker k-format="'dd.MM.yy'" k-ng-model="task.sprint" style="width:100px;" />
          <kendo-button icon="'k-icon k-i-clock'"></kendo-button>
        </span>
      </li>
      <li style="line-height:30px;">
        <span style='margin-right:10px;'>статус: </span>
        <input type="radio" class='k-radio' id='chk1' name='status' value='1' ng-model='task.status' />
        <label class="k-radio-label" for='chk1'>список</label>

        <input type="radio" class='k-radio' id='chk2' name='status' value='2' ng-model='task.status' />
        <label class="k-radio-label" for='chk2'>в работе</label>

        <input type="radio" class='k-radio' id='chk3' name='status' value='3' ng-model='task.status' />
   ...

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;
}