Skip to content

Commit

Permalink
Add custom styling for checkbox,
Browse files Browse the repository at this point in the history
sample files to test customized styling
  • Loading branch information
idl99 committed Nov 25, 2020
1 parent 31096a8 commit 812d6f3
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 84 deletions.
7 changes: 3 additions & 4 deletions css/base.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/base.css.map

Large diffs are not rendered by default.

70 changes: 70 additions & 0 deletions customized-theme-sample.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!--
THIS IS THE INDEX.HTML (SAMPLE FILE) INCLUDED IN THE DOWNLOAD
OF A CUSTOM THEME GENERATED USING JQUERY MOBILE THEME ROLLER
-->

<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Theme Download</title>

<!-- THESE STYLE SHEETS ARE INCLUDED IN THE BASE STYLE SHEET -->
<!-- <link rel="stylesheet" href="themes/theme-roller-base.min.css" /> -->
<!-- <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" /> -->
<!-- <link rel="stylesheet" ../libs/jquery.mobile-1.4.5/jquery.mobile.structure-1.4.5.min.css" /> -->

<script src="libs/jquery/jquery-1.11.1/jquery-1.11.1.min.js"></script>
<script src="libs/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="css/base.css">
</head>

<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>It Worked!</h1>
</div>
<div data-role="content" data-theme="a">
<p>Your theme was successfully downloaded. You can use this page as a reference for how to link it up!</p>
<pre>
<strong>&lt;link rel=&quot;stylesheet&quot; href=&quot;themes/theme-roller-base.min.css&quot; /&gt;</strong>
<strong>&lt;link rel=&quot;stylesheet&quot; href=&quot;themes/jquery.mobile.icons.min.css&quot; /&gt;</strong>
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css&quot; /&gt;
&lt;script src=&quot;http://code.jquery.com/jquery-1.11.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js&quot;&gt;&lt;/script&gt;
</pre>
<p>This is content color swatch "A" and a preview of a <a href="#" class="ui-link">link</a>.</p>

<!-- SLIDER
<form class="full-width-slider">
    <label for="slider-12" class="ui-hidden-accessible">Slider:</label>
    <input type="range" name="slider-12" id="slider-12" min="0" max="100" value="50"
data-highlight="true">
</form> -->

<!-- Checkbox -->
<form>
    <fieldset data-role="controlgroup" data-iconpos="right">
        <legend>Icon right:</legend>
        <input type="checkbox" name="checkbox-h-6a" id="checkbox-h-6a">
        <label for="checkbox-h-6a">One</label>
        <input type="checkbox" name="checkbox-h-6b" id="checkbox-h-6b">
        <label for="checkbox-h-6b">Two</label>
        <input type="checkbox" name="checkbox-h-6c" id="checkbox-h-6c">
        <label for="checkbox-h-6c">Three</label>
    </fieldset>
</form>

<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>Cache settings:</legend>
<input type="radio" name="radio-choice-a1" id="radio-choice-a1" value="on" checked="checked" />
<label for="radio-choice-a1">On</label>
<input type="radio" name="radio-choice-a1" id="radio-choice-b1" value="off" />
<label for="radio-choice-b1">Off</label>
</fieldset>
</div>
</div>
</body>

</html>
19 changes: 13 additions & 6 deletions theme.html → customized-theming-demo.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
<!--
THIS IS THE DEMO ON THEMING, TAKEN FROM JQUERY MOBILE
TO CHECK WHETHER THE THEMING WORKS.
-->

<!DOCTYPE html>
<html>

Expand All @@ -6,14 +11,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Default theme - jQuery Mobile Demos</title>

<!-- <link rel="stylesheet" href="themes/template/jquery.mobile.css" /> -->
<link rel="stylesheet" href="css/base.css" />

<!-- CDN resources -->
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" /> -->
<!-- <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> -->
<script src="libs/jquery/jquery-1.11.1/jquery-1.11.1.min.js"></script>

<!-- <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script> -->

<!-- This theme is being used in the base.css stylesheet -->
<!-- <link rel="stylesheet" href="themes/template/jquery.mobile.css" /> -->

<link rel="stylesheet" href="css/base.css" />
<script src="libs/jquery/jquery-1.11.1/jquery-1.11.1.min.js"></script>
<script src="libs/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>
Expand Down Expand Up @@ -205,7 +212,7 @@ <h2>Wolfgang Amadeus Phoenix</h2>
<input type="range" name="slider2" id="slider2" value="0" min="0" max="100" data-highlight="true">
</div>
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<fieldset data-role="controlgroup" data-iconpos="right">
<legend>Checkbox:</legend>
<input type="checkbox" name="checkbox-v-1a" id="checkbox-v-1a">
<label for="checkbox-v-1a">One</label>
Expand Down
88 changes: 38 additions & 50 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,65 +1,53 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Theme Download</title>
<title>Page Title</title>

<!-- THESE STYLE SHEETS ARE INCLUDED IN THE BASE STYLE SHEET -->
<!-- <link rel="stylesheet" href="themes/theme-roller-base.min.css" /> -->
<!-- <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" /> -->
<!-- <link rel="stylesheet" ../libs/jquery.mobile-1.4.5/jquery.mobile.structure-1.4.5.min.css" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/base.css" />
<script src="libs/jquery/jquery-1.11.1/jquery-1.11.1.min.js"></script>
<script src="libs/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="css/base.css">
</head>

<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>It Worked!</h1>
</div>
<div data-role="content" data-theme="a">
<p>Your theme was successfully downloaded. You can use this page as a reference for how to link it up!</p>
<pre>
<strong>&lt;link rel=&quot;stylesheet&quot; href=&quot;themes/theme-roller-base.min.css&quot; /&gt;</strong>
<strong>&lt;link rel=&quot;stylesheet&quot; href=&quot;themes/jquery.mobile.icons.min.css&quot; /&gt;</strong>
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css&quot; /&gt;
&lt;script src=&quot;http://code.jquery.com/jquery-1.11.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js&quot;&gt;&lt;/script&gt;
</pre>
<p>This is content color swatch "A" and a preview of a <a href="#" class="ui-link">link</a>.</p>

<!-- SLIDER
<form class="full-width-slider">
    <label for="slider-12" class="ui-hidden-accessible">Slider:</label>
    <input type="range" name="slider-12" id="slider-12" min="0" max="100" value="50"
data-highlight="true">
</form> -->

<!-- Checkbox -->
<form>
    <fieldset data-role="controlgroup" data-iconpos="right">
        <legend>Icon right:</legend>
        <input type="checkbox" name="checkbox-h-6a" id="checkbox-h-6a">
        <label for="checkbox-h-6a">One</label>
        <input type="checkbox" name="checkbox-h-6b" id="checkbox-h-6b">
        <label for="checkbox-h-6b">Two</label>
        <input type="checkbox" name="checkbox-h-6c" id="checkbox-h-6c">
        <label for="checkbox-h-6c">Three</label>
    </fieldset>
</form>
<div data-role="page">

<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->

<div role="main" class="ui-content">
<p>Page content goes here.</p>
<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-iconpos="right">
<legend>Checkbox:</legend>
<input type="checkbox" name="checkbox-v-1a" id="checkbox-v-1a">
<label for="checkbox-v-1a">One</label>
<input type="checkbox" name="checkbox-v-1b" id="checkbox-v-1b">
<label for="checkbox-v-1b">Two</label>
<input type="checkbox" name="checkbox-v-1c" id="checkbox-v-1c">
<label for="checkbox-v-1c">Three</label>
</fieldset>
<fieldset data-role="controlgroup" data-iconpos="left">
<legend>Checkbox:</legend>
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
<label for="checkbox-v-2a">One</label>
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
<label for="checkbox-v-2b">Two</label>
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
<label for="checkbox-v-2c">Three</label>
</fieldset>
</div>
</div><!-- /content -->

<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->

<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>Cache settings:</legend>
<input type="radio" name="radio-choice-a1" id="radio-choice-a1" value="on" checked="checked" />
<label for="radio-choice-a1">On</label>
<input type="radio" name="radio-choice-a1" id="radio-choice-b1" value="off" />
<label for="radio-choice-b1">Off</label>
</fieldset>
</div>
</div>
</body>

</html>
52 changes: 29 additions & 23 deletions styles/base.sass
Original file line number Diff line number Diff line change
Expand Up @@ -17,26 +17,32 @@ $white: #ffffff
// .ui-slider-track
// margin-left: 15px
body
div.ui-page.ui-page-theme-a.ui-page-active
div.ui-content.ui-body-a
form
fieldset
div.ui-controlgroup-controls
div
label // This is the checkbox row
background-color: $white
border: none
font-weight: 400
padding: 5px 0px 5px 0px

label.ui-checkbox-off // Checkbox in the inactive state
&:after
background-color: $white
opacity: 1.0
border: 2px solid $primary-color

label.ui-checkbox-on // Checkbox in the active state
&:after
background-color: $primary-color
border: 2px solid $primary-color
@mixin my-controlgroup-controls
background-color: $white
border: none
font-weight: 400
// padding: 5px
@mixin my-checkbox-off
&:after
background-color: $white
opacity: 1.0
border: 2px solid $primary-color

@mixin my-checkbox-on
&:after
background-color: $primary-color
border: 2px solid $primary-color

div[data-role="page"]
div.ui-controlgroup-controls
div
label.ui-checkbox // This is the checkbox row
&-off, &-on
@include my-controlgroup-controls

&-off // Checkbox in the inactive state
@include my-checkbox-off

&-on // Checkbox in the active state
@include my-checkbox-on

0 comments on commit 812d6f3

Please sign in to comment.