次のコードを使用して、チェックボックスリスト型セルを作成します。
チェックボックスリスト型セルには、 ラジオボタンリスト型セルと同じメソッドがあります。
mode メソッドを使用して、チェックボックスリストモードを取得および設定できます。cellType には "checkbox"、"toggle"、"modern" を設定できます。"modern" モードでは、セルの foreColor がチェックボックスの外観に影響するモダンなチェックボックススタイルが提供されます。
toggleOptions メソッドを使用して、チェックボックスリストのトグルオプションを取得および設定できます。パラメータの詳細については、GC.Spread.Sheets.CellTypes.IToggleOptions を参照してください。
var spread;
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
initSpread(spread);
initEvent(spread);
readSetting(new GC.Spread.Sheets.CellTypes.CheckBoxList());
};
function initCellStyle(fontSize, foreColor = '#000000', backColor = '#ffffff', bold=true) {
const style = new GC.Spread.Sheets.Style();
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.font = `${bold ? 'bold' : 'normal'} ${fontSize}pt Calibri`;
style.foreColor = foreColor;
style.backColor = backColor;
return style;
}
function initLayoutStyle(sheet) {
sheet.setRowCount(11);
sheet.setColumnCount(10);
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
sheet.setRowHeight(0, 30);
sheet.setRowHeight(1, 50);
sheet.setRowHeight(2, 40);
sheet.setRowHeight(3, 40);
sheet.setRowHeight(4, 40);
sheet.setRowHeight(5, 40);
sheet.setRowHeight(6, 40);
sheet.setRowHeight(7, 40);
sheet.setRowHeight(8, 40);
sheet.setRowHeight(9, 40);
sheet.setRowHeight(10, 30);
sheet.setColumnWidth(0, 30);
sheet.setColumnWidth(1, 110);
sheet.setColumnWidth(2, 100);
sheet.setColumnWidth(3, 100);
sheet.setColumnWidth(4, 100);
sheet.setColumnWidth(5, 100);
sheet.setColumnWidth(6, 100);
sheet.setColumnWidth(7, 100);
sheet.setColumnWidth(8, 100);
sheet.setColumnWidth(9, 30);
sheet.addSpan(1, 1, 1, 8);
sheet.setValue(1, 1, "在庫一覧");
sheet.getCell(1, 1).setStyle(initCellStyle(24, "Text 2 -50", "Text 2 40"));
sheet.setValue(2, 1, "フィルター行");
sheet.getCell(2, 1).setStyle(initCellStyle(11, "Text 2 -50", "Text 2 40"));
sheet.addSpan(2, 2, 1, 7);
sheet.getCell(2, 2).setStyle(initCellStyle(11, "Text 2 -50", "Text 2 80"));
sheet.getCell(2, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.left);
sheet.setValue(3, 1, "フィルター行");
sheet.getCell(3, 1).setStyle(initCellStyle(11, "Text 2 -50", "Text 2 40"));
sheet.addSpan(3, 2, 1, 7);
sheet.getCell(3, 2).setStyle(initCellStyle(11, "Text 2 -50", "Text 2 80"));
sheet.getCell(3, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.left);
}
function initData(sheet) {
sheet.setValue(4, 1, "在庫 ID");
sheet.setValue(4, 2, "Name");
sheet.setValue(4, 3, "単価");
sheet.setValue(4, 4, "在庫数量");
sheet.setValue(4, 5, "在庫金額");
sheet.setValue(4, 6, "再発注レベル");
sheet.setValue(4, 7, "再発注までの日数");
sheet.setValue(4, 8, "再発注数量");
sheet.setValue(2, 2, ['1', '2', '3', '4', '5']);
sheet.setValue(3, 2, ['1', '2', '3', '4', '5']);
sheet.setValue(5, 1, "IN0001");
sheet.setValue(5, 2, "商品 1");
sheet.setValue(5, 3, "51");
sheet.setValue(5, 4, "25");
sheet.setValue(5, 5, "1275");
sheet.setValue(5, 6, "29");
sheet.setValue(5, 7, "13");
sheet.setValue(5, 8, "50");
sheet.setValue(6, 1, "IN0002");
sheet.setValue(6, 2, "商品 2");
sheet.setValue(6, 3, "93");
sheet.setValue(6, 4, "132");
sheet.setValue(6, 5, "12276");
sheet.setValue(6, 6, "231");
sheet.setValue(6, 7, "4");
sheet.setValue(6, 8, "50");
sheet.setValue(7, 1, "IN0003");
sheet.setValue(7, 2, "商品 3");
sheet.setValue(7, 3, "57");
sheet.setValue(7, 4, "151");
sheet.setValue(7, 5, "8607");
sheet.setValue(7, 6, "114");
sheet.setValue(7, 7, "11");
sheet.setValue(7, 8, "150");
sheet.setValue(8, 1, "IN0004");
sheet.setValue(8, 2, "商品 4");
sheet.setValue(8, 3, "75");
sheet.setValue(8, 4, "62");
sheet.setValue(8, 5, "4650");
sheet.setValue(8, 6, "39");
sheet.setValue(8, 7, "12");
sheet.setValue(8, 8, "50");
sheet.setValue(9, 1, "IN0005");
sheet.setValue(9, 2, "商品 5");
sheet.setValue(9, 3, "100");
sheet.setValue(9, 4, "100");
sheet.setValue(9, 5, "10000");
sheet.setValue(9, 6, "100");
sheet.setValue(9, 7, "10");
sheet.setValue(9, 8, "100");
for(var i = 1; i < 9; i++) {
sheet.getCell(4, i).setStyle(initCellStyle(11, "Accent 1 -75", "Text 2 60"));
for(var j = 5; j < 10; j++) {
sheet.getCell(j, i).setStyle(initCellStyle(11, undefined, "Accent 1 80", false));
}
}
for (let i = 4; i < 10; i++) {
for(var j = 1; j < 10; j++) {
sheet.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.left).vAlign(GC.Spread.Sheets.VerticalAlign.center);
sheet.getCell(i, j).wordWrap(true);
}
}
}
function bindEvent(spread) {
let sheet = spread.getActiveSheet();
var range = new GC.Spread.Sheets.Range(5, 1, 5, 1);
var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(range);
sheet.rowFilter(rowFilter);
rowFilter.filterButtonVisible(false);
spread.bind(GC.Spread.Sheets.Events.ValueChanged, function (e, info) {
if ((info.row === 2 || info.row === 3) && info.col === 2) {
if (info.row === 2) {
sheet.setValue(3, 2, info.newValue);
} else {
sheet.setValue(2, 2, info.newValue);
}
rowFilter.removeFilterItems(1);
if (info.newValue.length > 0) {
for(var i = 0; i < info.newValue.length; i++) {
var condition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition, {
compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.equalsTo,
expected: 'IN000' + info.newValue[i]
});
rowFilter.addFilterItem(1, condition);
}
}
rowFilter.filter(1);
sheet.invalidateLayout();
sheet.repaint();
}
});
}
function initSpread(spread) {
var sheet = spread.getSheet(0);
sheet.suspendPaint();
bindEvent(spread);
initLayoutStyle(sheet);
var radio = new GC.Spread.Sheets.CellTypes.CheckBoxList();
radio.items([
{ text: "IN0001", value: "1" },
{ text: "IN0002", value: "2" },
{ text: "IN0003", value: "3" },
{ text: "IN0004", value: "4" },
{ text: "IN0005", value: "5" },
]);
sheet.setCellType(2, 2, radio);
sheet.getCell(2, 2).vAlign(GC.Spread.Sheets.VerticalAlign.center);
var toggle = new GC.Spread.Sheets.CellTypes.CheckBoxList();
toggle.items([
{ text: "IN0001", value: "1" },
{ text: "IN0002", value: "2" },
{ text: "IN0003", value: "3" },
{ text: "IN0004", value: "4" },
{ text: "IN0005", value: "5" },
]);
toggle.mode('toggle');
toggle.direction(GC.Spread.Sheets.CellTypes.Direction.vertical);
toggle.toggleOptions({
width: 30,
height: 15,
animationDuration: 300,
trackColorOn: "Text 2 40",
trackColorOff: "Background 2 -10",
sliderColorOn: "Text 2 -50",
sliderColorOff: "Background 1",
});
sheet.setCellType(3, 2, toggle);
sheet.getCell(3, 2).vAlign(GC.Spread.Sheets.VerticalAlign.center);
initData(sheet);
sheet.resumePaint();
};
function initEvent(spread) {
spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function () {
var sheet = spread.getActiveSheet();
var row = sheet.getActiveRowIndex();
var column = sheet.getActiveColumnIndex();
var cellType = sheet.getCellType(row, column);
if (cellType instanceof GC.Spread.Sheets.CellTypes.CheckBoxList) {
readSetting(cellType);
} else {
readSetting(new GC.Spread.Sheets.CellTypes.CheckBoxList());
}
});
_getElementById("apply").addEventListener('click', function () {
applySetting();
});
_getElementById("addItem").addEventListener('click', function () {
var select = _getElementById("items");
var d = new Date();
d.setMonth(d.getMonth() + select.length);
var str = d.getFullYear() + "-" + (d.getMonth() + 1);
_getElementById("items").add(new Option(str, select.length));
});
_getElementById("removeItem").addEventListener('click', function () {
var select = _getElementById("items");
select[select.length - 1].remove();
});
_getElementById("direction-horizontal").addEventListener('change', function () {
refreshMaxCountVisible();
});
_getElementById("direction-vertical").addEventListener('change', function () {
refreshMaxCountVisible();
});
_getElementById("isFlowLayout").addEventListener('change', function () {
refreshMaxCountVisible();
});
_getElementById("boxSize").addEventListener('change', function () {
applySetting();
})
_getElementById("checkBoxListMode").addEventListener('change', function () {
const mode = _getElementById("checkBoxListMode").value;
const cellType = new GC.Spread.Sheets.CellTypes.CheckBoxList();
cellType.mode(mode);
var select = _getElementById("items");
var items = [];
for (var i = 0; i < select.length; i++) {
items.push({ text: select[i].text, value: select[i].value });
}
cellType.items(items);
readSetting(cellType);
})
_getElementById("toggleCheckBoxCellAutoSize").addEventListener('change', function (e) {
_getElementById("toggleCheckBoxCellWidth").toggleAttribute('disabled', e.target.checked);
_getElementById("toggleCheckBoxCellHeight").toggleAttribute('disabled', e.target.checked);
})
};
function readSetting(cellType) {
var select = _getElementById("items");
select.options.length = 0;
var items = cellType.items();
for(var i=0; i<items.length; i++){
select.add(new Option(items[i].text, items[i].value));
}
if(cellType.direction() === GC.Spread.Sheets.CellTypes.Direction.horizontal) {
_getElementById("direction-horizontal").checked = true;
} else {
_getElementById("direction-vertical").checked = true;
}
var currentMode = cellType.mode();
_getElementById("checkBoxListMode").value = currentMode;
if (currentMode === 'toggle') {
_getElementById("toggleOptions").style.display = 'flex';
_getElementById("checkboxListBoxSize").style.display = 'none';
_getElementById("checkboxTextAlign").style.display = 'none';
_getElementById("toggleTextAlign").style.display = 'flex';
} else {
_getElementById("toggleOptions").style.display = 'none';
_getElementById("checkboxListBoxSize").style.display = 'flex';
_getElementById("checkboxTextAlign").style.display = 'flex';
_getElementById("toggleTextAlign").style.display = 'none';
}
const textAlignId = currentMode === 'toggle' ? 'toggle-textAlign-' : 'textAlign-';
if(cellType.textAlign() === GC.Spread.Sheets.CellTypes.TextAlign.right) {
_getElementById(textAlignId + 'right').checked = true;
} else if(cellType.textAlign() === GC.Spread.Sheets.CellTypes.TextAlign.inside) {
_getElementById(textAlignId + 'inside').checked = true;
} else {
_getElementById(textAlignId + 'left').checked = true;
}
_getElementById("isFlowLayout").checked = cellType.isFlowLayout();
_getElementById("rowCount").value = cellType.maxRowCount();
_getElementById("columnCount").value = cellType.maxColumnCount();
_getElementById("space-horizontal").value = cellType.itemSpacing().horizontal;
_getElementById("space-vertical").value = cellType.itemSpacing().vertical;
_getElementById("boxSize").value = cellType.boxSize();
refreshMaxCountVisible();
}
function refreshMaxCountVisible() {
if (_getElementById("isFlowLayout").checked) {
_getElementById("rowCountDiv").style.display="none";
_getElementById("columnCountDiv").style.display="none";
} else if (_getElementById("direction-vertical").checked) {
_getElementById("rowCountDiv").style.display="flex";
_getElementById("columnCountDiv").style.display="none";
} else {
_getElementById("rowCountDiv").style.display="none";
_getElementById("columnCountDiv").style.display="flex";
}
}
function applySetting() {
var sheet = spread.getActiveSheet();
var row = sheet.getActiveRowIndex();
var column = sheet.getActiveColumnIndex();
var cellType = new GC.Spread.Sheets.CellTypes.CheckBoxList();
const mode = _getElementById("checkBoxListMode").value;
cellType.mode(mode);
var items = [];
var select = _getElementById("items");
for (var i = 0; i < select.length; i++) {
items.push({ text: select[i].text, value: select[i].value });
}
cellType.items(items);
if (_getElementById("direction-horizontal").checked) {
cellType.direction(GC.Spread.Sheets.CellTypes.Direction.horizontal);
} else {
cellType.direction(GC.Spread.Sheets.CellTypes.Direction.vertical);
}
cellType.isFlowLayout(_getElementById("isFlowLayout").checked);
if (_getElementById("rowCount").value) {
cellType.maxRowCount(_getElementById("rowCount").value);
}
if (_getElementById("columnCount").value) {
cellType.maxColumnCount(_getElementById("columnCount").value);
}
cellType.itemSpacing({
horizontal: _getElementById("space-horizontal").value,
vertical: _getElementById("space-vertical").value
});
if (mode === 'toggle') {
const sliderRadius = _getElementById("toggleCheckBoxCellSliderRadius").value;
const trackRadius = _getElementById("toggleCheckBoxCellTrackRadius").value;
cellType.toggleOptions({
autoSize: _getElementById("toggleCheckBoxCellAutoSize").checked,
width: _getElementById("toggleCheckBoxCellWidth").value - 0,
height: _getElementById("toggleCheckBoxCellHeight").value - 0,
sliderMargin: _getElementById("toggleCheckBoxCellSliderMargin").value - 0,
sliderRadius: sliderRadius === '' ? null : (sliderRadius - 0),
trackRadius: trackRadius === '' ? null : (trackRadius - 0),
sliderColorOn: _getElementById("toggleCheckBoxCellSliderColorOn").value,
sliderColorOff: _getElementById("toggleCheckBoxCellSliderColorOff").value,
trackColorOn: _getElementById("toggleCheckBoxCellTrackColorOn").value,
trackColorOff: _getElementById("toggleCheckBoxCellTrackColorOff").value,
animationDuration: _getElementById("toggleCheckBoxCellAnimationDuration").value - 0,
});
if (_getElementById("toggle-textAlign-right").checked) {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.right);
} else if (_getElementById("toggle-textAlign-inside").checked) {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.inside);
} else {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.left);
}
} else {
if (_getElementById("textAlign-right").checked) {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.right);
} else {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.left);
}
var boxSizeValue = _getElementById("boxSize").value;
var boxSize = Number(boxSizeValue);
if (isNaN(boxSize)) {
cellType.boxSize(boxSizeValue);
} else {
cellType.boxSize(boxSize);
}
}
sheet.getCell(row, column).cellType(cellType);
}
function _getElementById(id) {
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ja-jp" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<p>下記のオプションを変更し、［設定］ボタンをクリックして変更を適用します。</p>
<label>項目:</label>
</div>
<div class="option-row">
<select id="items" size="5"></select>
<input type="button" id="addItem" value="追加" />
<input type="button" id="removeItem" value="削除" />
</div>
<hr>
<div class="option-row">
<label>モード:</label>
</div>
<div class="option-row">
<select id="checkBoxListMode">
<option value="checkbox" selected="selected">チェックボックス</option>
<option value="toggle">トグルボタン</option>
<option value="modern">モダン</option>
</select>
</div>
<div class="option-row">
<label>方向:</label>
</div>
<div class="option-row">
<input type="radio" name="direction" id="direction-horizontal" checked="checked" /><label for="direction-horizontal">水平</label>
<input type="radio" name="direction" id="direction-vertical" /><label for="direction-vertical">垂直</label>
</div>
<div class="option-row">
<label>テキスト配置:</label>
</div>
<div id="checkboxTextAlign" class="option-row">
<input type="radio" name="textAlign" id="textAlign-left" checked="checked" /><label for="textAlign-left">左</label>
<input type="radio" name="textAlign" id="textAlign-right" /><label for="textAlign-right">右</label>
</div>
<div id="toggleTextAlign" class="option-row" style="display: none;">
<input type="radio" name="textAlign" id="toggle-textAlign-left" checked="checked" /><label for="toggle-textAlign-left">左</label>
<input type="radio" name="textAlign" id="toggle-textAlign-right" /><label for="toggle-textAlign-right">右</label>
<input type="radio" name="textAlign" id="toggle-textAlign-inside" /><label for="toggle-textAlign-inside">内側</label>
</div>
<hr>
<div class="option-row">
<label for="isFlowLayout">フローレイアウト</label>
<input type="checkbox" id="isFlowLayout" checked />
</div>
<div class="option-row" id="rowCountDiv">
<label for="rowCount">最大行数:</label>
<input type="text" id="rowCount" value="2" />
</div>
<div class="option-row" id="columnCountDiv">
<label for="columnCount">最大列数:</label>
<input type="text" id="columnCount" value="2" />
</div>
<div class="option-row">
<label for="space-horizontal">水平方向の間隔:</label>
<input type="text" id="space-horizontal" value="8" />
</div>
<div class="option-row">
<label for="space-vertical">垂直方向の間隔:</label>
<input type="text" id="space-vertical" value="2" />
</div>
<hr>
<div id="checkboxListBoxSize" class="option-row">
<label for="boxSize">チェックボックスの大きさ:</label>
<input type="text" id="boxSize" class="boxSize"/>
</div>
<div id="toggleOptions" class="option-row" style="display: none;">
<label class="toggle-checkbox-cell-auto-size"><input type="checkbox" id="toggleCheckBoxCellAutoSize" /> 自動サイズ</label>
<label>幅:</label>
<input type="text" id="toggleCheckBoxCellWidth" value="30" />
<label>高さ:</label>
<input type="text" id="toggleCheckBoxCellHeight" value="15" />
<label>スライダー余白:</label>
<input type="text" id="toggleCheckBoxCellSliderMargin" value="2" />
<label>スライダー半径:</label>
<input type="text" id="toggleCheckBoxCellSliderRadius" value="" />
<label>トラック半径:</label>
<input type="text" id="toggleCheckBoxCellTrackRadius" value="" />
<label>オン時のスライダー色:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOn" value="#1565c0" />
<label>オフ時のスライダー色:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOff" value="#ffffff" />
<label>オン時のトラック色:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOn" value="#8cbae8" />
<label>オフ時のトラック色:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOff" value="#9e9e9e" />
<label>アニメーション時間:</label>
<input type="text" id="toggleCheckBoxCellAnimationDuration" value="300" />
</div>
<div class="option-row">
<input type="button" id="apply" value="設定" />
</div>
</div>
</div>
</body>
</html>
html,
body {
height: 100%;
margin: 0;
}
body {
position: absolute;
inset: 0;
color: #1f2933;
background: #f7f8fa;
}
.sample-tutorial {
display: flex;
height: 100%;
overflow: hidden;
}
.sample-tutorial > .sample-tutorial {
flex: 1 1 auto;
min-width: 0;
}
.sample-spreadsheets,
.sample-tutorial > gc-spread-sheets {
flex: 1 1 auto;
min-width: 0;
height: 100%;
overflow: hidden;
}
.options-container {
flex: 0 0 340px;
width: 340px;
height: 100%;
padding: 22px 20px;
box-sizing: border-box;
overflow: auto;
background: #ffffff;
border-left: 1px solid #e5e7eb;
}
.option-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px 8px;
margin: 0 0 14px;
padding: 0;
font-size: 14px;
}
.option-row > label {
flex: 0 0 auto;
white-space: nowrap;
}
.option-row p {
flex: 0 0 100%;
margin: 0;
color: #6b7280;
font-size: 13px;
line-height: 1.6;
}
hr {
height: 1px;
margin: 18px 0;
background: #eef0f3;
border: 0;
}
label {
display: block;
color: #374151;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
}
input,
select {
flex: 1 1 100%;
width: 100%;
min-height: 34px;
padding: 0 10px;
color: #111827;
font: inherit;
background: #ffffff;
border: 1px solid #d8dde5;
border-radius: 6px;
box-sizing: border-box;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
select[size] {
flex-basis: 100%;
height: auto;
min-height: 108px;
padding: 6px;
}
.option-row > label + input:not([type="checkbox"]):not([type="radio"]):not([type="button"]),
.option-row > label + select:not([size]) {
flex: 1 1 86px;
width: auto;
min-width: 86px;
max-width: 108px;
}
input:focus,
select:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
input[type="checkbox"],
input[type="radio"] {
flex: 0 0 auto;
width: 16px;
min-height: 16px;
height: 16px;
margin: 2px 0 0;
padding: 0;
accent-color: #2563eb;
}
input[type="checkbox"] + label,
input[type="radio"] + label,
.toggle-checkbox-cell-auto-size {
display: inline-flex;
align-items: flex-start;
width: auto;
}
#toggleOptions br {
display: none;
}
#toggleOptions .toggle-checkbox-cell-auto-size {
width: 100%;
margin-bottom: 8px;
}
#toggleOptions label:not(.toggle-checkbox-cell-auto-size) {
display: inline-block;
width: 178px;
margin: 0 8px 8px 0;
vertical-align: middle;
white-space: nowrap;
}
#toggleOptions input[type="text"] {
display: inline-block;
width: calc(100% - 190px);
margin: 0 0 8px;
vertical-align: middle;
}
input[type="button"] {
flex: 1 1 120px;
display: inline-flex;
align-items: center;
justify-content: center;
height: 34px;
color: #fff;
font-weight: 600;
background: #2563eb;
border-color: #2563eb;
cursor: pointer;
}
input[type="button"]:hover {
background: #1d4ed8;
border-color: #1d4ed8;
}
.radio-item {
display: flex;
align-items: center;
min-height: 24px;
}
.radio-item label,
.option-row > input[type="radio"] + label {
margin-right: 12px;
}
.disabled {
opacity: .55;
cursor: not-allowed;
}
.boxSize {
display: block;
}
@media (max-width: 760px) {
.sample-tutorial {
flex-direction: column;
}
.sample-spreadsheets,
.sample-tutorial > gc-spread-sheets {
min-height: 55%;
}
.options-container {
flex: 0 0 45%;
width: 100%;
height: 45%;
border-top: 1px solid #e5e7eb;
border-left: 0;
}
}
