dashing-framework

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/example.css" rel="stylesheet"> <title>Actions</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="../../scripts/scripts.js"></script> <script src="../../scripts/prism.js"></script> </head> <body class="example-body"> <div class="main-content"> <div id="sidebarNavigation" class="example-sidebar"></div> <div class="sidebar--overlay is-hidden"></div> <div class="main"> <div class="page-header"> <button class="button--sidebar-icon float-left"><i class="sidebar-icon--menu"></i></button> <h1>Actions</h1> <a href="http://design.samaritanministries.org/product/components/actions/" target="_blank" class="button button--small button--smooth float-right"> View Guidelines </a> </div> <div class="app-content"> <div class="row"> <div class="column column--full"> <h2 class="example-header no-margin--top">Default Button <button class="button button--transparent button--copy-link" data-id="copyurl" id="Default_Button"></button></h2> <div class="row example-container"> <div class="column column--full"> <button class="button button--primary">Primary Button</button> <button class="button button--secondary">Secondary Button</button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><button class="button button--primary">Primary Button</button> <button class="button button--secondary">Secondary Button</button></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Disabled Button <button class="button button--transparent button--copy-link" data-id="copyurl" id="Disabled_Button"></button></h2> <div class="row example-container"> <div class="column column--full"> <button class="button button--primary" disabled>Disabled Button</button> <button class="button button--secondary" disabled>Disabled Button</button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><button class="button button--primary" disabled>Disabled Button</button> <button class="button button--secondary" disabled>Disabled Button</button></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Small Button <button class="button button--transparent button--copy-link" data-id="copyurl" id="Small_Button"></button></h2> <div class="row example-container"> <div class="column column--full"> <button class="button button--primary button--small">Small Button</button> <button class="button button--secondary button--small">Small Button</button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><button class="button button--primary button--small">Small Button</button> <button class="button button--secondary button--small">Small Button</button></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Large Button <button class="button button--transparent button--copy-link" data-id="copyurl" id="Large_Button"></button></h2> <div class="row example-container"> <div class="column column--full"> <button class="button button--primary button--large">Large Button</button> <button class="button button--secondary button--large">Large Button</button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><button class="button button--primary button--large">Large Button</button> <button class="button button--secondary button--large">Large Button</button></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Border Button <button class="button button--transparent button--copy-link" data-id="copyurl" id="Border_Button"></button></h2> <div class="row example-container"> <div class="column column--full"> <button class="button button--primary button--border">Border Button</button> <button class="button button--secondary button--border">Border Button</button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><button class="button button--primary button--border">Border Button</button> <button class="button button--secondary button--border">Border Button</button></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Transparent Button <button class="button button--transparent button--copy-link" data-id="copyurl" id="Transparent_Button"></button></h2> <div class="row example-container"> <div class="column column--full"> <button class="button button--primary button--transparent">Transparent Button</button> <button class="button button--secondary button--transparent">Transparent Button</button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><button class="button button--primary button--transparent">Transparent Button</button> <button class="button button--secondary button--transparent">Transparent Button</button></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Button Color Options <button class="button button--transparent button--copy-link" data-id="copyurl" id="Button_Color_Options"></button></h2> <div class="row example-container"> <div class="column column--full"> <button class="button button--blue">Blue Button</button> <button class="button button--gray">Gray Button</button> <button class="button button--green">Green Button</button> <button class="button button--orange">Orange Button</button> <button class="button button--purple">Purple Button</button> <button class="button button--red">Red Button</button> <button class="button button--white">White Button</button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><button class="button button--blue">Blue Button</button> <button class="button button--gray">Gray Button</button> <button class="button button--green">Green Button</button> <button class="button button--orange">Orange Button</button> <button class="button button--purple">Purple Button</button> <button class="button button--red">Red Button</button> <button class="button button--white">White Button</button></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Border Button Color Options <button class="button button--transparent button--copy-link" data-id="copyurl" id="Border_Color_Options"></button></h2> <div class="row example-container"> <div class="column column--full"> <button class="button button--blue button--border">Blue Button</button> <button class="button button--gray button--border">Gray Button</button> <button class="button button--green button--border">Green Button</button> <button class="button button--orange button--border">Orange Button</button> <button class="button button--purple button--border">Purple Button</button> <button class="button button--red button--border">Red Button</button> <button class="button button--white button--border">White Button</button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><button class="button button--blue button--border">Blue Button</button> <button class="button button--gray button--border">Gray Button</button> <button class="button button--green button--border">Green Button</button> <button class="button button--orange button--border">Orange Button</button> <button class="button button--purple button--border">Purple Button</button> <button class="button button--red button--border">Red Button</button> <button class="button button--white button--border">White Button</button></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Button with Icon <button class="button button--transparent button--copy-link" data-id="copyurl" id="Button_With_Icon"></button></h2> <div class="row example-container"> <div class="column column--full"> <button class="button button--primary"> <i class="dashing-icon dashing-icon--add"></i> Button </button> <button class="button button--secondary"> <i class="dashing-icon dashing-icon--close"></i> Button </button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <button class="button button--primary"> <i class="dashing-icon dashing-icon--add"></i> Button </button>  <button class="button button--secondary"> <i class="dashing-icon dashing-icon--close"></i> Button </button></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Border Button with Icon <button class="button button--transparent button--copy-link" data-id="copyurl" id="Border_Button_With_Icon"></button></h2> <div class="row example-container"> <div class="column column--full"> <button class="button button--blue button--border"> <i class="dashing-icon dashing-icon--pencil"></i> Button </button> <button class="button button--gray button--border"> <i class="dashing-icon dashing-icon--question-filled"></i> Button </button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <button class="button button--blue button--border"> <i class="dashing-icon dashing-icon--pencil dashing-icon--blue"></i> Button </button>  <button class="button button--gray button--border"> <i class="dashing-icon dashing-icon--question-filled dashing-icon--gray"></i> Button </button></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Transparent Button with Icon <button class="button button--transparent button--copy-link" data-id="copyurl" id="Transparent_Button_With_Icon"></button></h2> <div class="row example-container"> <div class="column column--full"> <button class="button button--primary button--transparent"> <i class="dashing-icon dashing-icon--search"></i> Button </button> <button class="button button--secondary button--transparent"> Button <i class="dashing-icon dashing-icon--new-tab flow-opposite"></i> </button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <button class="button button--primary button--transparent"> <i class="dashing-icon dashing-icon--search dashing-icon--blue"></i> Button </button>  <button class="button button--secondary button--transparent"> Button <i class="dashing-icon dashing-icon--new-tab flow-opposite"></i> </button></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Icon Button <button class="button button--transparent button--copy-link" data-id="copyurl" id="Icon_Button"></button></h2> <div class="row example-container"> <div class="column column--full"> <button class="button button--icon button--primary"> <i class="dashing-icon dashing-icon--add dashing-icon--white"></i> </button> <button class="button button--icon button--red"> <i class="dashing-icon dashing-icon--trash dashing-icon--white"></i> </button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <button class="button button--icon button--primary"> <i class="dashing-icon dashing-icon--add dashing-icon--white"></i> </button>  <button class="button button--icon button--red"> <i class="dashing-icon dashing-icon--trash dashing-icon--white"></i> </button></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Small Icon Button <button class="button button--transparent button--copy-link" data-id="copyurl" id="Small_Icon_Button"></button></h2> <div class="row example-container"> <div class="column column--full"> <button class="button button--primary button--icon button--icon--small"> <i class="dashing-icon dashing-icon--add dashing-icon--white"></i> </button> <button class="button button--red button--icon button--icon--small"> <i class="dashing-icon dashing-icon--trash dashing-icon--white"></i> </button> <button class="button button--transparent button--icon button--icon--small"> <i class="dashing-icon dashing-icon--question-filled dashing-icon--gray"></i> </button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <button class="button button--primary button--icon button--icon--small"> <i class="dashing-icon dashing-icon--add dashing-icon--white"></i> </button>  <button class="button button--red button--icon button--icon--small"> <i class="dashing-icon dashing-icon--trash dashing-icon--white"></i> </button>  <button class="button button--transparent button--icon button--icon--small"> <i class="dashing-icon dashing-icon--question-filled dashing-icon--gray"></i> </button></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Main Icon Button <button class="button button--transparent button--copy-link" data-id="copyurl" id="Main_Icon_Button"></button></h2> <div class="row example-container"> <div class="column column--full"> <button class="button button--icon button--icon--main button--primary"> <i class="dashing-icon dashing-icon--add dashing-icon--white"></i> </button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <button class="button button--icon button--icon--main button--primary"> <i class="dashing-icon dashing-icon--add dashing-icon--white"></i> </button></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Toggle Button <button class="button button--transparent button--copy-link" data-id="copyurl" id="Toggle_Button"></button></h2> <div class="row example-container"> <div class="column column--full"> <ul class="button-group button-group--blue"> <li class="button--radio"> <input type="radio" name="options-blue" id="blue1" checked> <label for="blue1" class="button">Left</label> </li> <li class="button--radio"> <input type="radio" name="options-blue" id="blue2"> <label for="blue2" class="button">Middle</label> </li> <li class="button--radio"> <input type="radio" name="options-blue" id="blue3"> <label for="blue3" class="button">Right</label> </li> </ul> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <ul class="button-group button-group--blue"> <li class="button--radio"> <input type="radio" name="options-blue" id="blue1" checked> <label for="blue1" class="button">Left</label> </li> <li class="button--radio"> <input type="radio" name="options-blue" id="blue2"> <label for="blue2" class="button">Middle</label> </li> <li class="button--radio"> <input type="radio" name="options-blue" id="blue3"> <label for="blue3" class="button">Right</label> </li> </ul></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Toggle Button · Border Button <button class="button button--transparent button--copy-link" data-id="copyurl" id="Toggle_Button_Border_Button"></button></h2> <div class="row example-container"> <div class="column column--full"> <ul class="button-group button-group--green button-group--border"> <li class="button--radio"> <input type="radio" name="options-green" id="green1" checked> <label for="green1" class="button">1</label> </li> <li class="button--radio"> <input type="radio" name="options-green" id="green2"> <label for="green2" class="button">2</label> </li> <li class="button--radio"> <input type="radio" name="options-green" id="green3"> <label for="green3" class="button">3</label> </li> <li class="button--radio"> <input type="radio" name="options-green" id="green4"> <label for="green4" class="button">4</label> </li> <li class="button--radio"> <input type="radio" name="options-green" id="green5"> <label for="green5" class="button">5</label> </li> <li class="button--radio"> <input type="radio" name="options-green" id="green6"> <label for="green6" class="button">6</label> </li> <li class="button--radio"> <input type="radio" name="options-green" id="green7"> <label for="green7" class="button">7</label> </li> </ul> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <ul class="button-group button-group--green button-group--border"> <li class="button--radio"> <input type="radio" name="options-green" id="green1" checked> <label for="green1" class="button">Left</label> </li> <li class="button--radio"> <input type="radio" name="options-green" id="green2"> <label for="green2" class="button">Middle</label> </li> <li class="button--radio"> <input type="radio" name="options-green" id="green3"> <label for="green3" class="button">Middle</label> </li> <li class="button--radio"> <input type="radio" name="options-green" id="green4"> <label for="green4" class="button">Middle</label> </li> <li class="button--radio"> <input type="radio" name="options-green" id="green5"> <label for="green5" class="button">Middle</label> </li> <li class="button--radio"> <input type="radio" name="options-green" id="green6"> <label for="green6" class="button">Middle</label> </li> <li class="button--radio"> <input type="radio" name="options-green" id="green7"> <label for="green7" class="button">Right</label> </li> </ul></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Toggle Button · Vertical Button · Border Button <button class="button button--transparent button--copy-link" data-id="copyurl" id="Toggle_Button_Verticle_Button_Border_Button"></button></h2> <div class="row example-container"> <div class="column column--full"> <ul class="button-group button-group--vertical button-group--gray button-group--border"> <li class="button--radio"> <input type="radio" name="options-gray" id="toggle-gray1" checked> <label for="toggle-gray1" class="button">Top</label> </li> <li class="button--radio"> <input type="radio" name="options-gray" id="toggle-gray2"> <label for="toggle-gray2" class="button">Middle</label> </li> <li class="button--radio"> <input type="radio" name="options-gray" id="toggle-gray3"> <label for="toggle-gray3" class="button">Bottom</label> </li> </ul> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <ul class="button-group button-group--vertical button-group--gray button-group--border"> <li class="button--radio"> <input type="radio" name="options-gray" id="toggle-gray1" checked> <label for="toggle-gray1" class="button">Top</label> </li> <li class="button--radio"> <input type="radio" name="options-gray" id="toggle-gray2"> <label for="toggle-gray2" class="button">Middle</label> </li> <li class="button--radio"> <input type="radio" name="options-gray" id="toggle-gray3"> <label for="toggle-gray3" class="button">Bottom</label> </li> </ul></code> </pre> <pre><code class="language-html"> <ul class="button-group button-group--vertical_phone button-group--gray button-group--border"> </ul></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Theme Options <button class="button button--transparent button--copy-link" data-id="copyurl" id="Theme_Options"></button></h2> <div class="row example-container"> <div class="column column--full"> <button class="button button--round">Round Button</button> <button class="button button--smooth">Smooth Button</button> <button class="button button--square">Square Button</button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <button class="button button--round">Round Button</button>  <button class="button button--smooth">Smooth Button</button>  <button class="button button--square">Square Button</button></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Global Button Themes <button class="button button--transparent button--copy-link" data-id="copyurl" id="Global_Button_Themes"></button></h2> <p>Apply one of the following extendables to apply a button theme your entire project.</p> <div class="row example-container"> <div class="column column--full"> <button class="button button--round">Round Button</button> <button class="button button--smooth">Smooth Button</button> <button class="button button--square">Square Button</button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-scss">// Round Button Theme (Default) button { @extend %button--round; } // Smooth Button Theme button { @extend %button--smooth; } // Square Button Theme button { @extend %button--square; }</code> </pre> </div> </div> </div> </div> </div> </body> </html>