Your search did not match any results.

Overview

DevExtreme ASP.NET MVC Editors is a set of jQuery-powered server-side controls for editing and validating data. They can be configured using strongly-typed HTML helpers (see Validation demo), which provides client-side validation based on Data Annotations by default. You can use DevExtreme ASP.NET MVC Editors in Razor C# or Razor VB views.

Backend API
<div class="settings"> <div class="column"> <div class="field"> <div class="label">Title</div> <div class="value"> @(Html.DevExtreme().TextBox() .Value("UI Superhero") .ValueChangeEvent("keyup") .InputAttr("aria-label", "Title") .MaxLength(40) .OnValueChanged(@<text> function(e){ $(".text").text(e.value); } </text>) ) </div> </div> <div class="field"> <div class="label">Color</div> <div class="value"> @(Html.DevExtreme().ColorBox() .Value("#f05b41") .ApplyValueMode(EditorApplyValueMode.Instantly) .InputAttr("aria-label", "Color") .OnValueChanged(@<text> function(e) { $(".color").css("fill", e.value); $(".text").css("color", e.value); $(".picture-container").css("outline-color", e.value); } </text>) ) </div> </div> </div> <div class="column"> <div class="field"> <div class="label">Width</div> <div class="value"> @(Html.DevExtreme().NumberBox() .ID("width") .Value(370) .Max(700) .Min(70) .InputAttr("aria-label", "Width") .ShowSpinButtons(true) .Format("#0px") .OnValueChanged(@<text> function(e) { var width = e.value; $("svg").width(width); $("#height").dxNumberBox("instance").option("value", width*26/37); } </text>) ) </div> </div> <div class="field"> <div class="label">Height</div> <div class="value"> @(Html.DevExtreme().NumberBox() .ID("height") .Value(260) .Max(700) .Min(70) .InputAttr("aria-label", "Height") .ShowSpinButtons(true) .Format("#0px") .OnValueChanged(@<text> function(e) { var height = e.value; $("svg").height(height); $("#width").dxNumberBox("instance").option("value", height*37/26); } </text>) ) </div> </div> </div> <div class="column"> <div class="field"> <div class="label">Transform</div> <div class="value"> @(Html.DevExtreme().SelectBox() .Items(i => { i.Add() .Option("key", "Scale") .Option("items", new [] { new { name = "0 degrees", value = "scaleX(1)" }, new { name = "180 degrees", value = "scaleX(-1)" } }); i.Add() .Option("key", "Rotate") .Option("items", new [] { new { name="0 degrees", value = "rotate(0)" }, new { name="15 degrees", value = "rotate(15deg)" }, new { name="30 degrees", value = "rotate(30deg)" }, new { name="-15 degrees", value = "rotate(-15deg)" }, new { name="-30 degrees", value = "rotate(-30deg)" } }); }) .Grouped(true) .InputAttr("aria-label", "Transform") .ValueExpr("value") .DisplayExpr("name") .Value("scaleX(1)") .OnValueChanged(@<text> function(e) { $(".picture").css("transform", e.value); } </text>) ) </div> </div> <div class="field"> <div class="label">Border</div> <div class="value"> @(Html.DevExtreme().Switch() .Value(false) .OnValueChanged(@<text> function(e) { $(".picture-container").css("outline-style", e.value ? "solid" : "none"); } </text>) ) </div> </div> </div> </div> <div class="picture-container"> <div class="picture"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="370px" height="260px" viewBox="0 0 370 260"> <g> <path class="color" d="M242.694,150.939c-0.861,0.656-1.819,0.915-2.875,0.78c-0.657-1.19-1.777-1.907-2.942-2.017 c-0.34-2.188-2.7-3.496-4.938-2.304c0.002-0.013,0.007-0.023,0.007-0.034c0.554-2.685-2.365-4.228-4.579-3.51 c-1.256,0.409-2.38,0.966-3.424,1.613c0.338-1.628,0.396-3.326-0.014-5.133c-0.588-2.578-3.092-3.572-5.315-2.18 c-1.551,0.969-2.982,2.08-4.35,3.271c2.348-3.47,4.315-7.176,5.359-11.471c0.576-2.372-2.284-4.158-4.3-3.296 c-1.739,0.746-3.359,1.621-4.891,2.597c1.028-1.794,1.977-3.639,2.795-5.568c1.188-2.8-2.344-5.685-4.762-3.649 c-5.884,4.955-11.146,10.422-16.21,16.137c2.368-3.929,4.446-8.02,5.88-12.475c0.971-3.012-2.062-5.27-4.7-3.602 c-6.807,4.302-12.4,9.738-17.547,15.614c2.373-5.129,4.011-10.486,4.105-16.298c0.046-2.834-3.08-4.374-5.081-2.121 c-7.114,8.019-13.298,16.692-19.181,25.583c2.527-7.618,4.654-15.322,4.816-23.453c0.055-2.729-3.565-5.099-5.44-2.271 c-5.529,8.344-9.471,17.476-13.1,26.774c-2.178,5.585-3.809,11.945-6.341,17.672c0.18-9.319,1.896-18.642,0.355-27.959 c-0.43-2.603-4.181-3.297-5.21-0.7c-3.76,9.482-6.355,18.964-7.485,28.68c-0.451-3.893-0.767-7.823-1.205-11.737 c-0.162-1.435-2.173-1.077-2.162,0.287c0.088,11.142-1.787,23.359,3.537,33.66c1.385,2.682,5.667,1.771,5.255-1.435 c-1.41-10.988-0.719-21.349,1.779-31.545c-0.664,7.17-1.582,14.345-0.574,21.564c0.403,2.896,3.888,3.549,5.686,1.521 c5.987-6.742,7.588-15.995,10.77-24.177c1.061-2.729,2.119-5.474,3.21-8.206c-2.613,7.698-5.672,15.305-7.578,23.144 c-0.778,3.196,4.105,5.121,5.866,2.45c8.168-12.371,15.066-25.549,23.975-37.351c-4.654,11.928-14.628,22.079-19.224,33.973 c-1.449,3.755,3.225,6.041,5.776,3.348c10.146-10.694,17.808-23.962,28.452-34.138c-5.993,9.9-13.957,18.709-18.645,29.41 c-1.259,2.878,1.718,5.146,4.34,4.329c2.544-0.796,4.758-2.239,6.751-4.025c-0.333,0.748-0.666,1.496-0.956,2.271 c-1.13,2.988,2.462,6.189,5.126,3.927c10.191-8.665,16.146-22.761,26.354-31.454c-4.896,7.848-12.828,14.274-16.389,22.904 c-1.055,2.563,1.687,5.768,4.396,4.379c7.171-3.68,11.873-10.008,17.425-15.428c-2.079,3.542-5.031,7.007-6.216,10.287 c-1.188,3.286,2.343,5.792,5.157,3.954c1.553-1.017,2.907-2.308,4.194-3.695c-0.136,0.43-0.261,0.864-0.353,1.314 c-0.654,3.188,3.162,4.612,5.445,3.144c1.591-1.023,2.925-2.304,4.188-3.661c0.873,1.101,2.326,1.692,3.786,0.936 c2.022-1.046,3.709-2.297,5.277-3.746c2.425,1.307,5.39,0.883,8.549-0.673C249.2,155.244,246.641,149.062,242.694,150.939z" /> <path class="color" d="M322.669,187.137c-8.097,4.924-14.469,12.804-22.83,17.257c2.212-3.702,4.8-7.146,7.624-10.406 c3.058-2.843,5.857-6.029,8.677-9.132c1.706-1.879-1.172-4.347-2.932-2.579c-2.564,2.569-5.096,5.157-7.515,7.829 c-1.943,1.841-3.999,3.545-6.244,4.976c0.99-1.832,2.069-3.624,3.232-5.376c7.497-6.049,13.649-14.516,20.18-20.872 c1.733-1.686-0.745-3.983-2.549-2.598c-7.552,5.798-14.69,12.652-20.334,20.489c-2.288,1.747-4.707,3.252-7.296,4.372 c0.804-1.174,1.621-2.34,2.445-3.498c6.68-6.351,12.193-14.069,19.31-20.035c1.662-1.393-0.609-4.067-2.359-2.9 c-4.592,3.063-8.573,6.739-12.211,10.751c5.188-6.566,10.552-12.994,16.365-19.044c1.526-1.593-0.642-4.114-2.297-2.587 c-10.005,9.269-18.002,22.695-29.951,29.826c2.176-3.125,4.368-6.262,6.641-9.33c6.622-6.338,12.31-14.018,18.987-19.957 c1.402-1.244-0.109-3.657-1.695-2.469c-7.606,5.703-13.782,12.688-19.487,20.1c-2.918,2.728-6.021,5.179-9.463,7.115 c2.494-3.901,5.159-7.761,8.011-11.48c7.284-6.177,12.541-14.518,20.38-20.177c1.244-0.896-0.254-2.654-1.491-1.818 c-7.211,4.88-13.556,11.072-19.212,17.86c2.254-3.781,4.627-7.625,7.241-11.251c4.974-5.408,9.816-10.986,15.573-14.943 c0.659-0.45-0.07-1.347-0.729-0.966c-6.714,3.891-12.007,9.242-16.639,15.212c-1.523,1.593-3.051,3.179-4.618,4.714 c-3.862,3.784-8.07,7.241-12.936,9.632c-5.167,2.543-1.042-1.812,0.133-3.594c1.623-2.475,3.466-4.799,5.117-7.261 c0.447-0.671-0.545-1.428-1.012-0.755c-3.087,4.437-6.63,8.503-8.825,13.484c-0.227,0.528,0.359,1.113,0.878,0.983 c5.876-1.441,10.736-4.625,15.159-8.543c-2.029,3.102-3.979,6.257-5.94,9.37c-0.412,0.655-0.092,1.452,0.479,1.802 c-2.502,3.461-4.861,6.992-7.086,10.531c-0.866,1.377,0.357,3.013,1.931,2.449c2.151-0.76,4.156-1.756,6.067-2.889 c-1.341,1.865-2.668,3.732-4.011,5.595c-1.095,1.517,0.686,3.02,2.166,2.486c2.67-0.959,5.139-2.227,7.457-3.717 c-1.781,2.26-3.562,4.519-5.356,6.77c-1.131,1.417,0.267,4.067,2.161,3.141c0.567-0.278,1.113-0.578,1.662-0.885 c0.004,1.2,0.982,2.343,2.359,2.097c2.535-0.44,4.901-1.246,7.143-2.305c-0.772,1.439-1.495,2.895-2.153,4.383 c-0.804,1.818,1.226,3.325,2.854,2.697c0.464-0.174,0.906-0.365,1.355-0.558c-1.36,2.101-2.602,4.287-3.689,6.588 c-0.851,1.797,1.08,3.18,2.68,2.717c6.369-1.869,11.415-5.935,16.325-10.239c-2.256,2.719-4.413,5.508-6.153,8.615 c-1.165,2.087,0.938,4.284,3.019,2.902c5.273-3.529,10.2-7.469,14.918-11.707c1.796-1.617-0.838-4.086-2.64-2.596 c-1.699,1.409-3.454,2.753-5.223,4.072c3.086-3.878,6.344-7.644,8.978-11.85C326.322,188.001,324.217,186.192,322.669,187.137z" /> </g> <path class="base-color" d="M317.701,212.845c4.012-1.212,7.902-2.737,11.738-4.424c1.991-0.87,12.222-3.949,8.456-7.836 c-0.187-0.196-0.381-0.396-0.571-0.592c-0.17-0.175-0.355-0.311-0.545-0.42c-0.413-8.474-4.351-17.478-7.564-24.812 c-5.031-11.492-11.536-22.25-17.854-33.058c-0.841-1.442-3.164-0.088-2.521,1.4c4.231,9.842,8.829,19.522,12.942,29.414 c2.032,4.886,3.711,9.903,5.401,14.915c1.589,4.686,2.145,9.611,3.451,14.327c-4.359,2.156-8.869,3.975-13.496,5.49 c-11.07,3.639-21.057,3.271-31.982,1.128c-3.475-11.145-7.065-22.163-9.174-33.704c-1.021-5.609-1.942-18.377-8.747-20.388 c-0.817-0.24-1.473,0.584-0.987,1.31c4.865,7.29,5.378,16.597,6.56,25.039c1.689,12.063,6.062,23.931,10.05,35.392 c0.841,2.414,4.835,1.094,4.237-1.359c-0.144-0.659-0.319-1.313-0.508-1.958c0.356,1.234,6.464,2.179,7.606,2.379 c2.694,0.479,5.056-0.237,7.74-0.214C307.563,214.931,312.235,214.5,317.701,212.845z" /> <path class="base-color" d="M300.838,217.832c-2.585,2.274-5.951,4.116-8.358,5.857c-4.705,3.41-9.471,6.727-14.177,10.128 c-4.029,2.908-8.895,5.627-10.707,10.53c-1.896,5.128,2.568,10.222,5.738,13.62c2.439,2.613,6.802-0.9,4.33-3.52 c-2.146-2.271-5.874-5.509-4.603-9.014c0.81-2.222,3.969-3.988,5.781-5.322c4.099-3.018,8.044-6.236,12.115-9.29 c1.69-1.263,4.956-4.708,8.838-8.652C299.472,220.698,301.54,219.004,300.838,217.832z" /> <path class="base-color" d="M342.682,227.619c-3.253-2.264-6.922-3.989-10.304-6.049c-2.18-1.319-8.151-4.349-8.622-7.236 c-0.069-0.429-0.712-0.568-0.809-0.077c-1.565,7.942,14.088,15.609,19.435,19.546c9.579,7.045,15.489,3.578,23.84-3.453 c2.815-2.37-0.749-6.932-3.526-4.504c-2.64,2.319-5.289,4.988-8.496,6.521C350.41,234.176,345.41,229.514,342.682,227.619z" /> <path class="base-color" d="M214.979,166.093c4.312-2.351,8.693,0.412,12.641,2.078c11.557,4.872,22.296-5.731,32.651-10.131 c-4.168,8.78-13.598,13.942-18.092,22.682c-4.657,9.057-4.271,24.715-1.842,34.31c0.677,2.671,4.112,1.457,4.66-0.543 c3.313-12.039-3.04-24.435,4.719-35.8c5.013-7.337,12.154-11.86,14.251-20.997c0.088-0.389,0.017-0.742-0.142-1.038 c1.079-0.691,1.316-1.916,0.977-3.042c1.59,0.269,3.189,0.497,4.796,0.674c0.525,0.059,0.966-0.057,1.32-0.272 c10.754,2.613,23.923-4.089,32.13-9.7c13.709-9.356,25.461-25.249,24.938-42.493c-0.072-2.376-3.754-2.361-4.083-0.087 c-0.03,0.171-0.063,0.329-0.089,0.498c-0.132-0.001-0.264-0.002-0.407,0.018c-5.358,0.786-10.965-0.77-16.082-2.227 c-6.263-1.777-16.01-4.803-20.914-10.2c6.757-0.563,14.314-4.186,20.443-6.139c7.033-2.238,16.689-6.199,18.846-14.035 c0.087-0.306,0.059-0.586-0.013-0.854c0.554-0.112,1.025-0.655,0.718-1.325c-8.674-19.038-22.907-35.871-44.299-40.051 c-7.498-1.462-15.321-1.026-22.89,0.831c8.994-4.625,14.334-16.99,15.459-26.151c0.101-0.774-1.117-1.255-1.376-0.431 c-3.28,10.5-8.601,20.091-17.919,25.867c5.314-6.491,8.1-15.095,5.063-22.819c-0.322-0.815-1.681-0.534-1.52,0.365 c1.985,11.029-4.558,20.579-12.412,27.684c-8.391,4.007-15.936,9.705-21.643,16.432c-14.94,17.625-17.278,43.629-10.302,64.975 c0.455,1.39,0.965,2.741,1.516,4.061c-3.083-1.926-6.544-3.436-9.37-3.074c-8.88,1.138-15.539,8.628-24.948,5.51 c-8.411-2.789-18.34-13.081-27.478-9.112c-0.065-0.065-0.147-0.12-0.246-0.147c-0.925-1.195-2.797-1.665-4.34-0.109 c-11.941,12.04-27.155,20.108-34.271,36.237c-3.306,7.491-2.556,15.358-1.783,23.236c1.061,10.823-1.103,19.744-4.998,29.719 c-0.887,2.271,2.267,4.235,3.749,2.172c0.504-0.697,0.968-1.424,1.413-2.157c1.188,0.28,2.537-0.104,2.986-1.448 c1.675-5.017,6.751-8.493,10.772-11.579c5.395-4.146,10.948-7.852,17.077-10.832c8.009-3.896,16.557-4.885,25.118-2.325 c6.473,1.934,13.089,4.027,19.94,3.728c5.789-0.255,11.862-1.435,16.487-5.133C209.133,170.566,211.635,167.917,214.979,166.093z M227.593,53.307c11.969-16.62,35.721-25.171,55.607-21.458c18.907,3.532,32.337,19.335,40.96,35.539 c-0.639-0.147-1.33-0.009-1.794,0.565c-5.699,7.057-12.789,10.055-21.176,12.926c-5.297,1.819-12.751,3.19-17.37,6.64 c-0.375,0.283-0.543,0.658-0.56,1.037c-0.373,0.36-0.57,0.896-0.328,1.499c2.829,7.135,11.316,10.685,17.984,13.196 c6.637,2.499,14.562,5.017,21.817,4.314c-3.052,12.091-9.787,21.721-19.726,29.922c-4.969,4.105-10.603,7.303-16.603,9.623 c-6.353,2.454-12.081,2.556-18.568,1.839c-9.433-3.021-18.879-4.926-27.713-9.897c-10.28-5.788-16.694-15.624-20.678-26.45 C212.249,93.038,215.46,70.149,227.593,53.307z M175.879,170.373c-7.56-1.841-13.882-3.9-21.783-2.874 c-7.591,0.985-14.645,4.913-21.072,8.818c-4.326,2.628-9.895,6.271-14.293,10.607c0.317-1.888,0.512-3.791,0.589-5.69 c0.346-8.505-2.253-16.858-1.821-25.298c0.946-18.421,24.512-29.528,36.115-40.752c0.219-0.213,0.383-0.434,0.528-0.657 c11.186-2.512,18.826,7.631,29.447,10.506c5.98,1.619,11.612-1.209,16.784-3.834c5.661-2.877,9.759-1.855,14.377,1.982 c2.036,1.691,3.1,2.411,5.215,2.553c8.45,13.568,22.534,22.408,38.233,26.468c-5.845,2.355-11.021,5.918-16.671,8.755 c-4.489,2.254-8.621,2.734-13.376,0.738c-2.844-1.197-5.762-2.781-8.947-2.698c-6.324,0.168-10.757,3.752-15.262,7.843 C196.13,173.934,185.343,172.68,175.879,170.373z" /> <path class="base-color" d="M269.751,65.55c1.737,0.646,2.911,2.334,3.942,3.798c0.943,1.344,1.581,3.502,3.395,3.876 c0.457,0.093,1.009-0.025,1.238-0.482c1.069-2.113-0.876-4.421-2.086-6.046c-1.401-1.88-3.325-3.415-5.691-3.793 C269.02,62.659,268.238,64.991,269.751,65.55z" /> <path class="base-color" d="M290.724,56.965c1.394,1.457,2.192,3.59,3.796,4.768c0.447,0.327,1.226,0.117,1.269-0.5 c0.152-2.119-1.575-3.82-2.916-5.296c-1.728-1.887-3.806-3.33-5.808-4.887c-0.77-0.59-1.552,0.453-0.934,1.124 C287.637,53.8,289.195,55.372,290.724,56.965z" /> <path class="base-color" d="M320.685,141.241c-0.073,0.022-0.04,0.131,0.033,0.108C320.789,141.327,320.753,141.221,320.685,141.241z" /> <path class="base-color" d="M316.826,139.985c5.269,2.261,13.137,1.209,18.645-0.172c6.092-1.522,10.875-6.212,14.12-11.379 c3.974-6.322,6.535-13.217,7.767-20.576c0.821-4.893,1.685-12.207-2.59-15.771c-1.544-1.288-3.654-0.581-3.896,1.486 c-0.451,3.946,0.588,7.867,0.285,11.872c-0.473,6.239-2.802,12.383-5.47,17.976c-2.854,5.979-6.823,10.299-13.314,12.346 c-5.033,1.585-11.236,0.154-15.66,3.212C316.344,139.23,316.425,139.815,316.826,139.985z" /> <path class="base-color" d="M52.903,143.83c20.248-4.477,40.597-7.995,60.43-14.158c1.264-0.392,0.665-2.422-0.605-2.218 c-20.347,3.25-40.276,8.063-60.271,13.004C50.368,140.978,50.743,144.307,52.903,143.83z" /> <path class="base-color" d="M6.124,192.832c16.139-5.448,32.71-9.904,48.688-15.765c1.176-0.432,0.649-2.318-0.575-2.113 c-16.805,2.781-33.665,8.429-49.186,15.342C3.417,191.024,4.458,193.393,6.124,192.832z" /> <path class="base-color" d="M66.057,214.314c-12.354,4.633-24.47,9.855-36.52,15.23c-8.521,3.801-19.409,7.234-26.205,13.937 c-0.914,0.902-0.667,2.449,0.719,2.692c2.678,0.469,4.972-1.073,7.249-2.292c5.776-3.087,12.006-5.505,17.973-8.2 c12.837-5.798,25.609-11.896,37.814-18.934C68.531,215.918,67.695,213.699,66.057,214.314z" /> </svg> </div> <div class="text">UI Superhero</div> </div>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.SampleData; using DevExtreme.MVC.Demos.ViewModels; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using DevExtreme.MVC.Demos.Models.DataGrid; namespace DevExtreme.MVC.Demos.Controllers { public class CommonController : Controller { public ActionResult EditorsOverview() { return View(); } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly string[] Cities = new[] { "Albuquerque", "Anaheim", "Anchorage", "Arlington", "Atlanta", "Aurora", "Austin", "Bakersfield", "Baltimore", "Baton Rouge", "Boise", "Boston", "Buffalo", "Chandler", "Charlotte", "Chesapeake", "Chicago", "Chula Vista", "Cincinnati", "Cleveland", "Colorado Springs", "Columbus", "Corpus Christi", "Dallas", "Denver", "Detroit", "Durham", "El Paso", "Fort Wayne", "Fort Worth", "Fremont", "Fresno", "Garland", "Gilbert", "Glendale", "Greensboro", "Henderson", "Hialeah", "Honolulu", "Houston", "Indianapolis", "Irvine", "Irving", "Jacksonville", "Jersey City", "Kansas City", "Laredo", "Las Vegas", "Lexington", "Lincoln", "Long Beach", "Los Angeles", "Louisville", "Lubbock", "Madison", "Memphis", "Mesa", "Miami", "Milwaukee", "Minneapolis", "Nashville", "New Orleans", "New York", "Newark", "Norfolk", "North Las Vegas", "Oakland", "Oklahoma City", "Omaha", "Orlando", "Philadelphia", "Phoenix", "Pittsburgh", "Plano", "Portland", "Raleigh", "Reno", "Richmond", "Riverside", "Sacramento", "Saint Paul", "San Antonio", "San Diego", "San Francisco", "San Jose", "Santa Ana", "Scottsdale", "Seattle", "St. Louis", "St. Petersburg", "Stockton", "Tampa", "Toledo", "Tucson", "Tulsa", "Virginia Beach", "Washington", "Wichita", "Winston–Salem" }; } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly string[] Countries = new[] { "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "The Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Democratic Republic of the Congo", "Republic of the Congo", "Costa Rica", "Ivory Coast", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "The Gambia", "Georgia", "Germany", "Ghana", "Greece", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Republic of Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "North Korea", "South Korea", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Republic of Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Federated States of Micronesia", "Moldova", "Monaco", "Mongolia", "Montenegro", "Morocco", "Mozambique", "Namibia", "Nauru", "Nepal", "Kingdom of the Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Palau", "State of Palestine", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Saint Kitts and Nevis", "Saint Lucia", "Saint Vincent and the Grenadines", "Samoa", "San Marino", "São Tomé and Príncipe", "Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Sudan", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Vatican City", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe" }; } }
.settings { background-color: rgba(191, 191, 191, 0.15); display: flex; justify-content: space-between; padding: 15px; } .settings .column .field { padding: 5px 0; display: flex; align-items: center; justify-content: space-between; } .settings .column .field .label { padding-right: 10px; } .settings .column .field .value { width: 155px; } .dx-theme-generic .settings .column .field .value .dx-switch { height: 36px; } .dx-theme-material .settings .column .field .value .dx-switch { height:48px; } .picture-container { text-align: center; margin: 20px 2px 5px 2px; padding-top: 20px; overflow: hidden; outline-width: 2px; outline-style: none; outline-color: #f05b41; } .picture { transition: transform ease-in-out 400ms; display: inline-block; padding: 10px; } .color { fill: #f05b41; } .text { text-align: center; color: #f05b41; font-size: 30px; padding: 30px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .dx-color-scheme-light .base-color, .dx-color-scheme-carmine .base-color, .dx-color-scheme-softblue .base-color { fill: #333; } .dx-color-scheme-contrast .base-color, .dx-color-scheme-darkmoon .base-color { fill: #fff; } .dx-color-scheme-dark .base-color { fill: #dedede; } .dx-color-scheme-darkviolet .base-color { fill: #f5f6f7; } .dx-color-scheme-greenmist .base-color { fill: #28484f; }