Version

Input Sizes

Sizes of inputs

Example
<div ng-app="Example.input-size" ng-strict-di ng-controller="ExampleCtrl as exampleCtrl">
  <h3 class="example-block">Query Assists</h3>
  <div class="example-block">
    <div class="ring-error-bubble-wrapper">
      <rg-query-assist
        class="ring-input-size_xs"
        x-data-source="exampleCtrl.dataSource"
        glass="true"
        placeholder="'Extra-short'">
      </rg-query-assist>
      <div class="ring-error-bubble active">Extra-short Query Assist</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <rg-query-assist
        class="ring-input-size_s"
        x-data-source="exampleCtrl.dataSource"
        glass="true"
        placeholder="'Short'">
      </rg-query-assist>
      <div class="ring-error-bubble active">Short Query Assist</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <rg-query-assist
        class="ring-input-size_md"
        x-data-source="exampleCtrl.dataSource"
        glass="true"
        placeholder="'Medium'">
      </rg-query-assist>
      <div class="ring-error-bubble active">Medium Query Assist</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <rg-query-assist
        class="ring-input-size_l"
        x-data-source="exampleCtrl.dataSource"
        glass="true"
        placeholder="'Long'">
      </rg-query-assist>
      <div class="ring-error-bubble active">Long Query Assist</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <rg-query-assist
        x-data-source="exampleCtrl.dataSource"
        glass="true"
        placeholder="'Full-width'">
      </rg-query-assist>
      <div class="ring-error-bubble active">Full-width Query Assist</div>
    </div>
  </div>

  <h3 class="example-block">Rg Selects: Buttons</h3>
  <div class="example-block">
    <div class="ring-error-bubble-wrapper">
      <rg-select class="ring-input-size_xs"
        ng-model="exampleCtrl.selected"
        options="item in exampleCtrl.options"
        label="Select item"></rg-select>
      <div class="ring-error-bubble active">Extra-short Select</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <rg-select class="ring-input-size_s"
        ng-model="exampleCtrl.selected"
        options="item in exampleCtrl.options"
        label="Select item"></rg-select>
      <div class="ring-error-bubble active">Short Select</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <rg-select class="ring-input-size_md"
        ng-model="exampleCtrl.selected"
        options="item in exampleCtrl.options"
        label="Select item"></rg-select>
      <div class="ring-error-bubble active">Medium Select</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <rg-select class="ring-input-size_l"
        ng-model="exampleCtrl.selected"
        options="item in exampleCtrl.options"
        label="Select item"></rg-select>
      <div class="ring-error-bubble active">Long Select</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <rg-select ng-model="exampleCtrl.selected"
        options="item in exampleCtrl.options"
        label="Select item"></rg-select>
      <div class="ring-error-bubble active">Full-width Select</div>
    </div>
  </div>

  <h3 class="example-block">Rg Selects: Inputs</h3>
  <div class="example-block">
    <div class="ring-error-bubble-wrapper">
      <rg-select class="ring-input-size_xs"
        type="input"
        ng-model="exampleCtrl.selected"
        options="item in exampleCtrl.options"
        label="Select item"></rg-select>
      <div class="ring-error-bubble active">Extra-short Select</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <rg-select class="ring-input-size_s"
        type="input"
        ng-model="exampleCtrl.selected"
        options="item in exampleCtrl.options"
        label="Select item"></rg-select>
      <div class="ring-error-bubble active">Short Select</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <rg-select class="ring-input-size_md"
        type="input"
        ng-model="exampleCtrl.selected"
        options="item in exampleCtrl.options"
        label="Select item"></rg-select>
      <div class="ring-error-bubble active">Medium Select</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <rg-select class="ring-input-size_l"
        type="input"
        ng-model="exampleCtrl.selected"
        options="item in exampleCtrl.options"
        label="Select item"></rg-select>
      <div class="ring-error-bubble active">Long Select</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <rg-select ng-model="exampleCtrl.selected"
        type="input"
        options="item in exampleCtrl.options"
        label="Select item"></rg-select>
      <div class="ring-error-bubble active">Full-width Select</div>
    </div>
  </div>

  <h3 class="example-block">Inputs</h3>
  <div class="example-block">
    <div class="ring-error-bubble-wrapper">
      <input type="number" class="ring-input ring-input-size_xs">
      <div class="ring-error-bubble active">Extra-short Input</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <input type="number" class="ring-input ring-input-size_s">
      <div class="ring-error-bubble active">Short Input</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <input type="number" class="ring-input ring-input-size_md">
      <div class="ring-error-bubble active">Medium Input</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <input type="number" class="ring-input ring-input-size_l">
      <div class="ring-error-bubble active">Long Input</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <input type="number" class="ring-input">
      <div class="ring-error-bubble active">Full-width Input</div>
    </div>
  </div>

  <h3 class="example-block">Textareas</h3>
  <div class="example-block">
    <div class="ring-error-bubble-wrapper">
      <textarea class="ring-input ring-input-size_xs"></textarea>
      <div class="ring-error-bubble active">Extra-short Textarea</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <textarea class="ring-input ring-input-size_s"></textarea>
      <div class="ring-error-bubble active">Short Textarea</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <textarea class="ring-input ring-input-size_md"></textarea>
      <div class="ring-error-bubble active">Medium Textarea</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <textarea class="ring-input ring-input-size_l"></textarea>
      <div class="ring-error-bubble active">Long Textarea</div>
    </div>
    <div class="ring-error-bubble-wrapper">
      <textarea class="ring-input"></textarea>
      <div class="ring-error-bubble active">Full-width Textarea</div>
    </div>
  </div>

</div>
:global(.example-block) {
  margin: 16px;
  max-width: 600px;
}
import angular from 'angular';
import SelectNg from '@jetbrains/ring-ui/components/select-ng/select-ng';
import QueryAssistNg from '@jetbrains/ring-ui/components/query-assist-ng/query-assist-ng';
import '@jetbrains/ring-ui/components/input-size/input-size.scss';

angular.module('Example.input-size', [
  QueryAssistNg,
  SelectNg
]).controller('ExampleCtrl', [
  function () {
    var exampleCtrl = this;
    exampleCtrl.dataSource = function () {
      return [];
    };

    exampleCtrl.options = ['one', 'two', 'three'];
    exampleCtrl.selected = null;
  }
]);