generator-addin

<!DOCTYPE html> <html> <head> <title>Public Style</title> <link rel="stylesheet" href="https://my.geotab.com/geotab/checkmate/main.css?skin=my_geotab"> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="parent" class="container"> <div class="item"> <h2>Main colors</h2> <div class="example"> <div class="boxWrapper"> <div> Background colors </div> <div class="box geotabPrimaryFill"></div> <div class="box geotabSecondaryFill"></div> </div> <div class="boxWrapper"> <div> Text colors </div> <div class="box geotabPrimaryText">A</div> <div class="box geotabSecondaryText">B</div> <div class="box geotabUsualText">C</div> </div> <div class="boxWrapper"> <div> Border colors </div> <div class="box geotabPrimaryBorder"></div> <div class="box geotabSecondaryBorder"></div> </div> <div class="boxWrapper"> <div> Standard UI element </div> <div class="box geotabUIElement">A</div> </div> </div> <div class="code"> <pre> <code><div class="<mark>geotabPrimaryFill</mark>"></div></code> <code><div class="<mark>geotabSecondaryFill</mark>"></div></code> <br> <code><div class="<mark>geotabPrimaryText</mark>">A</div></code> <code><div class="<mark>geotabSecondaryText</mark>">B</div></code> <code><div class="<mark>geotabUsualText</mark>">C</div></code> <br> <code><div class="<mark>geotabPrimaryBorder</mark>"></div></code> <code><div class="<mark>geotabSecondaryBorder</mark>"></div></code> <br> <code><div class="<mark>geotabUIElement</mark>">A</div></code> </pre> </div> </div> <div class="item"> <h2>Page Name</h2> <div class="example"> <div class="geotabPageHeader"> <h1 class="geotabPageName">Page Name <span class="subdued">with sub title</span></h1> <div class="pageNameSecondary"> <h3 class="geotabSecondaryTitle">and additional information</h3> </div> </div> </div> <div class="code"> <pre> <code><div class="<mark>geotabPageHeader</mark>"></code> <code> <h1 class="<mark>geotabPageName</mark>">Page Name <span class="<mark>subdued</mark>">with sub title</span></h1></code> <code> <div class="<mark>pageNameSecondary</mark>"></code> <code> <h3 class="<mark>geotabSecondaryTitle</mark>">and additional information</h3></code> <code> </div></code> <code></div></code> </pre> </div> </div> <div class="item"> <h2>Buttons</h2> <div class="example"> <div class="buttons"> <button class="geotabButton">Button</button> <button class="geotabButton" disabled>Disabled button</button> <button class="geotabButton negativeButton">Refuse</button> <button class="geotabButton positiveButton">Approve</button> <a href="https://www.geotab.com/connect.html" target="_blank" class="geotabButton">Link to Connect</a> <input type="checkbox" id="someCheckbox" class="geotabSwitchButton"> <label class="geotabButton" for="someCheckbox">Checkbox</label> <input type="radio" name="someRadio" id="someRadio1" class="geotabSwitchButton" checked> <label class="geotabButton" for="someRadio1">On</label> <input type="radio" name="someRadio" id="someRadio2" class="geotabSwitchButton"> <label class="geotabButton" for="someRadio2">Off</label> </div> </div> <div class="code"> <pre> <code><button class="<mark>geotabButton</mark>">Button</button></code> <br> <code><button class="<mark>geotabButton</mark> disabled">Disabled button</button></code> <br> <code><button class="<mark>geotabButton negativeButton</mark>">Button</button></code> <br> <code><button class="<mark>geotabButton positiveButton</mark>">Button</button></code> <br> <code><a href="#" class="<mark>geotabButton</mark>">Link</a></code> <br> <code><input type="checkbox" id="someCheckbox" class="<mark>geotabSwitchButton</mark>"></code> <code><label class="<mark>geotabButton</mark>" for="someCheckbox">Checkbox</label></code> <br> <code><input type="radio" name="someRadio" id="someRadio1" class="<mark>geotabSwitchButton</mark>" checked></code> <code><label class="<mark>geotabButton</mark>" for="someRadio1">On</label></code> <code><input type="radio" name="someRadio" id="someRadio2" class="<mark>geotabSwitchButton</mark>"></code> <code><label class="<mark>geotabButton</mark>" for="someRadio2">Off</label></code> </pre> </div> </div> <div class="item"> <h2>Horizontal button sets</h2> <div class="example"> <div class="horizontalButtonSet"> <button class="geotabButton">Button 1</button> <button class="geotabButton">Button 2</button> <button class="geotabButton">Button 3</button> </div> </div> <div class="code"> <pre> <code><div class="<mark>horizontalButtonSet</mark>"></code> <code> <button class="<mark>geotabButton</mark>">Button 1</button></code> <code> <button class="<mark>geotabButton</mark>">Button 2</button></code> <code> <button class="<mark>geotabButton</mark>">Button 3</button></code> <code></div></code> </pre> </div> </div> <div class="item"> <h2>Vertical button sets</h2> <div class="example"> <div class="verticalButtonSet w"> <button class="geotabButton">Button 1</button> <button class="geotabButton">Button 2</button> <button class="geotabButton">Button 3</button> </div> </div> <div class="code"> <pre> <code><div class="<mark>verticalButtonSet</mark>"></code> <code> <button class="<mark>geotabButton</mark>">Button 1</button></code> <code> <button class="<mark>geotabButton</mark>">Button 2</button></code> <code> <button class="<mark>geotabButton</mark>">Button 3</button></code> <code></div></code> </pre> </div> </div> <div class="item"> <h2>Form</h2> <div class="example"> <fieldset class="geotabFieldset"> <div class="geotabField"> <label>Name:</label> <input placeholder="Field with label" type="text" class="geotabFormEditField" maxlength="255"> </div> <div class="geotabField"> <label>Disabled field:</label> <input placeholder="Disabled field" type="text" class="geotabFormEditField" maxlength="255" disabled> </div> <div class="geotabField"> <input placeholder="Field without label" class="fieldWithoutLabel geotabFormEditField" maxlength="255"> </div> <div class="geotabField"> <label>Comment:</label> <textarea placeholder="Textarea with label" cols="30" class="geotabFormEditField" rows="5"></textarea> </div> <div class="geotabField"> <div class="fieldWithoutLabel singleField"> <q>Sir, in my heart there was a kind of fighting That would not let me sleep. Methought I lay Worse than the mutines in the bilboes. Rashly— And prais'd be rashness for it—let us know Our indiscretion sometimes serves us well...</q> <cite class="quote">Hamlet, Act 5, Scene 2, 4–8</cite> </div> </div> <div class="geotabField"> <label>Switcher:</label> <span class="horizontalButtonSet"> <input type="radio" name="switcher" class="geotabSwitchButton" id="switcher1" checked> <label class="geotabButton" for="switcher1">Yes</label> <input type="radio" name="switcher" id="switcher2" class="geotabSwitchButton"> <label class="geotabButton" for="switcher2">No</label> </span> </div> <div class="geotabField"> <label>Actions</label> <div class="verticalButtonSet"> <input type="checkbox" class="geotabSwitchButton" id="Actions1" /> <label class="geotabButton" for="Actions1">Action 1</label> <input type="checkbox" id="Actions2" class="geotabSwitchButton"> <label class="geotabButton" for="Actions2">Action 2</label> <input type="checkbox" id="Actions3" class="geotabSwitchButton"> <label class="geotabButton" for="Actions3">Action 3</label> </div> </div> </fieldset> </div> <div class="code"> <pre> <code><fieldset class="<mark>geotabFieldset</mark>"></code> <code> <div class="<mark>geotabField</mark>"></code> <code> <label>Name:</label></code> <code> <input type="text" class="<mark>geotabFormEditField</mark>" maxlength="255"></code> <code> </div></code> <br> <code> <div class="<mark>geotabField</mark>"></code> <code> <input type="text" class="<mark>fieldWithoutLabel geotabFormEditField</mark>" maxlength="255"></code> <code> </div></code> <br> <code> <div class="<mark>geotabField</mark>"></code> <code> <label>Comment:</label></code> <code> <textarea cols="30" class="<mark>geotabFormEditField</mark>" rows="5"></textarea></code> <code> </div></code> <br> <code> <div class="<mark>geotabField</mark>"></code> <code> <div class="<mark>fieldWithoutLabel singleField</mark>"><q>Sir, in ... us well</q></div></code> <code> </div></code> <br> <code> <div class="<mark>geotabField</mark>"></code> <code> <label>Switcher:</label></code> <code> <span class="<mark>horizontalButtonSet</mark>"></code> <code> <input type="radio" name="switcher" class="geotabSwitchButton" id="switcher1" checked></code> <code> <label class="geotabButton" for="switcher1">Yes</label></code> <code> <input type="radio" name="switcher" id="switcher2" class="geotabSwitchButton"></code> <code> <label class="geotabButton" for="switcher2">No</label></code> <code> </span></code> <code> </div></code> <br> <code> <div class="<mark>geotabField</mark>"></code> <code> <label>Actions</label></code> <code> <div class="<mark>verticalButtonSet</mark>"></code> <code> <input type="checkbox" class="geotabSwitchButton" id="Actions1" /></code> <code> <label class="geotabButton" for="Actions1">Action 1</label></code> <code> <input type="checkbox" id="Actions2" class="geotabSwitchButton"></code> <code> <label class="geotabButton" for="Actions2">Action 2</label></code> <code> <input type="checkbox" id="Actions3" class="geotabSwitchButton"></code> <code> <label class="geotabButton" for="Actions3">Action 3</label></code> <code> </div></code> <code> </div></code> <code></fieldset></code> </pre> </div> </div> <div class="item"> <h2>Toolbar</h2> <div class="example"> <div class="geotabToolbar"> <input type="text" placeholder="Search something" class="geotabFormEditField w" /> <button class="geotabButton">Button</button> <a href="https://www.geotab.com/connect.html" target="_blank" class="geotabButton">Link to Connect</a> <div class="horizontalButtonSet"> <input type="radio" name="someRadio2" id="toolbarRadio1" class="geotabSwitchButton" checked> <label class="geotabButton" for="toolbarRadio1">First option</label> <input type="radio" name="someRadio2" id="toolbarRadio2" class="geotabSwitchButton"> <label class="geotabButton" for="toolbarRadio2">Second option</label> </div> </div> </div> <div class="code"> <pre> <code><div class="<mark>geotabToolbar</mark>"></code> <code> <input type="text" placeholder="Search something" class="<mark>geotabFormEditField</mark>" /></code> <br> <code> <button class="<mark>geotabButton</mark>">Button</button></code> <br> <code> <a href="https://www.geotab.com/connect.html" target="_blank" class="<mark>geotabButton</mark>">Link to Connect</a></code> <br> <code> <div class="<mark>horizontalButtonSet</mark>"></code> <code> <input type="radio" name="someRadio2" id="toolbarRadio1" class="<mark>geotabSwitchButton</mark>" checked> </code> <code> <label class="<mark>geotabButton</mark>" for="toolbarRadio1">First option</label></code> <code> <input type="radio" name="someRadio2" id="toolbarRadio2" class="<mark>geotabSwitchButton</mark>"> </code> <code> <label class="<mark>geotabButton</mark>" for="toolbarRadio2">Second option</label></code> <code> </div></code> <code></div></code> </pre> </div> </div> </div> </body> </html>