This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/feature/jewel-ui-set by this
push:
new 95ceb5c initial work on checkbox. get inline svg with color variable
substitution
95ceb5c is described below
commit 95ceb5c5d988766197547e89a4a360b1fdf1abdc
Author: Carlos Rovira <[email protected]>
AuthorDate: Sat Mar 24 21:32:37 2018 +0100
initial work on checkbox. get inline svg with color variable substitution
---
.../src/main/resources/assets/checkbox-tick.svg | 29 ++++
.../JewelTheme/src/main/resources/defaults.css | 20 +--
.../src/main/sass/components/_checkbox.sass | 150 ++++++++++++++++++++-
3 files changed, 185 insertions(+), 14 deletions(-)
diff --git
a/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
b/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
new file mode 100644
index 0000000..64606dc
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
@@ -0,0 +1,29 @@
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<svg viewBox="0 0 16 13" version="1.1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";>
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g transform="translate(-763.000000, -350.000000)" fill="#777777">
+ <g transform="translate(760.000000, 345.000000)">
+ <g>
+ <polygon points="3 13 9 18 19 7 16 5 9 13 6 10"></polygon>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 22b39bc..789eec4 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -203,18 +203,18 @@ span {
border: 1px solid #3CADF1;
border-radius: 3px;
}
-.jewel.checkbox .input:checked {
- border: 3px solid #3CADF1;
+.jewel.checkbox .input:checked, .jewel.checkbox .input:checked:active {
+ border: 1px solid #0f88d1;
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13'
version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'><g stroke='none' stroke-width='1'
fill='none' fill-rule='evenodd'><g transform='translate(-763.000000,
-350.000000)' fill='#3CADF1'><g transform='translate(760.000000,
345.000000)'><g><polygon id='Tick' points='3 13 9 18 19 7 16 5 9 13 6
10'></polygon></g></g></g></g></svg>");
+ background-size: cover;
+ padding: 2px;
}
-.jewel.checkbox .input:checked:active {
- border: 4px solid #EF5A2A;
+.jewel.checkbox .input:checked path, .jewel.checkbox .input:checked:active
path {
+ fill: #ff0000;
}
-.jewel.checkbox .input:checked:after {
- font-size: 14px;
- position: absolute;
- top: 0px;
- left: 3px;
- color: #99a1a7;
+.jewel.checkbox .input:focus {
+ outline: none;
+ border: 1px solid #0f88d1;
}
.jewel.checkbox .input[disabled] {
cursor: unset;
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
index 485b972..af39fc9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
@@ -17,14 +17,156 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel CheckBox
+
+// CheckBox variables
+$checkbox-label-height: 24px
+$checkbox-button-size: 22px
+
.jewel.checkbox
+ cursor: pointer
+ display: inline-block
+
+ margin: 0
+ padding: 0
+
+ position: relative
+ vertical-align: middle
+
+ box-sizing: border-box
+
+ width: 100%
+ height: $checkbox-label-height
+
+ // INPUT
+ .input
+ +appear(none)
+ // position: absolute
+ // cursor: pointer
+ // overflow: hidden
+ // display: inline-block
+
+ // box-sizing: border-box
+ // margin: 0
+ // top: 0//$checkbox-top-offset
+ // left: 0
+
+ width: $checkbox-button-size
+ height: $checkbox-button-size
+
+ line-height: $checkbox-label-height
+
+ border: 1px solid $primary-color
+ border-radius: 3px
+ &:checked, &:checked:active
+ @if $flat
+ background: lighten($primary-color, 25%)
+ @else
+ border: 1px solid darken($primary-color, 15%)
+ //background: url(assets/checkbox-tick.svg)
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16
13' version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'><g stroke='none' stroke-width='1'
fill='none' fill-rule='evenodd'><g transform='translate(-763.000000,
-350.000000)' fill='#{$primary-color}'><g transform='translate(760.000000,
345.000000)'><g><polygon id='Tick' points='3 13 9 18 19 7 16 5 9 13 6
10'></polygon></g></g></g></g></svg>")
+ background-size: cover
+ padding: 2px
+
+ & path
+ fill: #ff0000
+
+
+ //&:checked:after
+ //content: url(assets/jewel-button.svg)
+ //background: #3f51b5
url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSI
[...]
+ //background: url('data:image/svg+xml;utf8,<svg
xmlns="http://www.w3.org/2000/svg"; width="24" height="24" viewBox="0 0 24
24"><path d="M22 2v20h-20v-20h20zm2-2h-24v24h24v-24zm-6 16.538l-4.592-4.548
4.546-4.587-1.416-1.403-4.545 4.589-4.588-4.543-1.405 1.405 4.593 4.552-4.547
4.592 1.405 1.405 4.555-4.596 4.591 4.55 1.403-1.416z"/></svg>')
+ //background-image: url("data:image/svg+xml;utf8,<svg
xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient
id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%'
stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0'
y='0' width='100%' height='100%'/></svg>")
+ //background:
url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSA
[...]
+ //content: url(assets/jewel-button.svg)
+ //font-size: 14px
+ //position: absolute
+ //top: 0px
+ //left: 3px
+ //color: #99a1a7
+
+ &:focus
+ outline: none
+ @if $flat
+ background: lighten($primary-color, 25%)
+ @else
+ border: 1px solid darken($primary-color, 15%)
+
+ &[disabled]
+ cursor: unset
+ border: 1px solid darken($disabled-color, 20%)
+ background: $disabled-color
+ //box-shadow: none
+
+ // LABEL
.span
padding-left: 5px
- .input
- width: 15px
- height: 15px
- border: 1px solid
+
+
+// [type="checkbox"]:not(:checked) + label,
+// [type="checkbox"]:checked + label {
+// position: relative;
+// padding-left: 32px;
+// margin-bottom: 4px;
+// display: inline-block;
+// font-size: 16px;
+// }
+// /* checkbox aspect */
+// [type="checkbox"]:not(:checked) + label:before,
+// [type="checkbox"]:checked + label:before {
+// content: '';
+// position: absolute;
+// left: 0px; top: 0px;
+// width: 22px; height: 22px;
+// border: 2px solid #cccccc;
+// background: #ffffff;
+// border-radius: 4px;
+// box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
+// }
+// /* checked mark aspect */
+// [type="checkbox"]:not(:checked) + label:after,
+// [type="checkbox"]:checked + label:after {
+// content: '✔';
+// position: absolute;
+// top: 0px; left: 5px;
+// font-size: 20px;
+// line-height: 1.2;
+// color: #09ad7e;
+// transition: all .2s;
+// }
+// /* checked mark aspect changes */
+// [type="checkbox"]:not(:checked) + label:after {
+// opacity: 0;
+// transform: scale(0);
+// }
+// [type="checkbox"]:checked + label:after {
+// opacity: 1;
+// transform: scale(1);
+// }
+// /* disabled checkbox */
+// [type="checkbox"]:disabled:not(:checked) + label:before,
+// [type="checkbox"]:disabled:checked + label:before {
+// box-shadow: none;
+// border-color: #999999;
+// background-color: #dddddd;
+// }
+// [type="checkbox"]:disabled:checked + label:after {
+// color: #999999;
+// }
+// [type="checkbox"]:disabled + label {
+// color: #aaaaaa;
+// }
+// /* accessibility */
+// [type="checkbox"]:checked:focus + label:before,
+// [type="checkbox"]:not(:checked):focus + label:before {
+// border: 2px dotted #0000ff;
+// }
+// /* hover style just for information */
+// label:hover:before {
+// border: 2px solid #4778d9!important;
+// background: #ffffff
+
// > input[type="checkbox"]
// width: 50px
--
To stop receiving notification emails like this one, please contact
[email protected].
