This is an automated email from the ASF dual-hosted git repository. carlosrovira pushed a commit to branch develop in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push: new d516b55 some css fixs, cleaning and reorganization d516b55 is described below commit d516b551b26061d87ccdb89c8b9ef19c52c8c065 Author: Carlos Rovira <carlosrov...@apache.org> AuthorDate: Sun Apr 15 12:36:55 2018 +0200 some css fixs, cleaning and reorganization --- .../JewelTheme/src/main/resources/defaults.css | 60 +++++++++++----------- .../themes/JewelTheme/src/main/sass/_mixins.sass | 18 +++---- .../main/sass/components-emphasized/_button.sass | 8 +-- .../src/main/sass/components-primary/_alert.sass | 16 +++--- .../src/main/sass/components-primary/_button.sass | 22 -------- .../main/sass/components-primary/_checkbox.sass | 23 +++++---- .../sass/components-primary/_itemRenderer.sass | 1 + .../main/sass/components-primary/_radiobutton.sass | 23 +++++---- .../src/main/sass/components-primary/_slider.sass | 37 +++++++------ .../main/sass/components-primary/_textfield.sass | 6 +-- 10 files changed, 98 insertions(+), 116 deletions(-) diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css index fb9d647..13e314f 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css @@ -73,9 +73,9 @@ div { min-width: 420px; min-height: 240px; border: 0px solid; - border-radius: 3px; - box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8); background-color: white; + box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8); + border-radius: 3px; } .jewel.alert .jewel.titlebar { padding: 20px 20px 0px 20px; @@ -101,13 +101,10 @@ div { font-weight: normal; } .jewel.alert .jewel.controlbar { - border-top: 1px solid #b3b3b3; background: linear-gradient(#e6e6e6, #cccccc); + border-top: 1px solid #b3b3b3; box-shadow: inset 0 1px 0 white; - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; + border-radius: 0px 0px 3px 3px; padding: 20px; position: absolute; bottom: 0; @@ -225,8 +222,8 @@ j|Alert { width: 22px; height: 22px; line-height: 22px; - border: 1px solid #b3b3b3; background: linear-gradient(white, #f3f3f3); + border: 1px solid #b3b3b3; border-radius: 3px; } .jewel.checkbox input:checked, .jewel.checkbox input:checked:active { @@ -249,29 +246,29 @@ j|Alert { } .jewel.checkbox input[disabled] { cursor: unset; - border: 1px solid #d9d9d9; background: #f3f3f3; + border: 1px solid #d9d9d9; } .jewel.checkbox input[disabled] + span { cursor: unset; color: silver; } .jewel.checkbox input[disabled]:checked { - border: 1px solid #d9d9d9; background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3; background-size: 90%; background-position: center; background-repeat: no-repeat; background-attachment: fixed; + border: 1px solid #d9d9d9; } .jewel.checkbox span { cursor: pointer; position: relative; - vertical-align: top; margin: 0; padding-left: 6px; - font-size: 16px; + vertical-align: top; line-height: 22px; + font-size: 16px; } .jewel.item { @@ -321,8 +318,8 @@ j|Alert { width: 22px; height: 22px; line-height: 22px; - border: 1px solid #b3b3b3; background: linear-gradient(white, #f3f3f3); + border: 1px solid #b3b3b3; border-radius: 50%; } .jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active { @@ -345,29 +342,29 @@ j|Alert { } .jewel.radiobutton input[disabled] { cursor: unset; - border: 1px solid #d9d9d9; background: #f3f3f3; + border: 1px solid #d9d9d9; } .jewel.radiobutton input[disabled] + span { cursor: unset; color: silver; } .jewel.radiobutton input[disabled]:checked { - border: 1px solid #d9d9d9; background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23cccccc' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f3f3f3; background-size: 60%; background-position: center; background-repeat: no-repeat; background-attachment: fixed; + border: 1px solid #d9d9d9; } .jewel.radiobutton span { cursor: pointer; position: relative; - vertical-align: top; margin: 0; padding-left: 6px; - font-size: 16px; + vertical-align: top; line-height: 22px; + font-size: 16px; } .jewel.slider { @@ -378,21 +375,21 @@ j|Alert { background: none; } .jewel.slider input { - outline: 0; cursor: pointer; + user-select: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; + outline: 0; + align-self: center; + z-index: 1; margin: 0 20px; padding: 0; width: calc(100% - 40px); height: 6px; background: transparent; - user-select: none; color: #3CADF1; - align-self: center; - z-index: 1; } .jewel.slider input::-webkit-slider-runnable-track { background: transparent; @@ -410,7 +407,7 @@ j|Alert { height: 18px; background: linear-gradient(#4ab3f2, #2ea7f0); border: 1px solid #0f88d1; - box-shadow: inset 0 1px 0 #9bd5f8; + box-shadow: inset 0 1px 0 #9bd5f8, 0 0 0 1px rgba(255, 255, 255, 0.3); border-radius: 50%; } .jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb { @@ -423,19 +420,22 @@ j|Alert { cursor: unset; } .jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb { - background: #d9d9d9; - border: 1px solid #b3b3b3; + background: #f3f3f3; + border: 1px solid silver; + box-shadow: none; } .jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb { transform: scale(1); } .jewel.slider input[disabled] + .slider-track-container > .slider-track-fill { - border: 1px solid #b3b3b3; - background: #d9d9d9; + background: #e6e6e6; + border: 1px solid silver; + box-shadow: none; } .jewel.slider input[disabled] + .slider-track-container > .slider-track { - border: 1px solid #b3b3b3; - background: #d9d9d9; + background: #f3f3f3; + border: 1px solid #d9d9d9; + box-shadow: none; } .slider-track-container { @@ -467,7 +467,7 @@ j|Alert { position: relative; flex: 0; padding: 0; - background: linear-gradient(#e6e6e6, #cccccc); + background: linear-gradient(white, #e6e6e6); border: 1px solid #b3b3b3; border-radius: 3px; } @@ -592,8 +592,8 @@ j|Alert { } .jewel.textfield input[disabled] { cursor: unset; - border: 1px solid #d9d9d9; background: #f3f3f3; + border: 1px solid #d9d9d9; box-shadow: none; color: silver; } diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass index 7e5787b..5bc6e7d 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass @@ -34,44 +34,44 @@ =jewel-bg-border($state, $bg-color, $border-radius: 0px) @if ($state == "normal") @if $flat - border: 0px solid background: $bg-color + border: 0px solid @else - border: 1px solid darken($bg-color, 15%)// .094em background: linear-gradient(lighten($bg-color, 5%), darken($bg-color, 5%)) + border: 1px solid darken($bg-color, 15%)// .094em box-shadow: inset 0 1px 0 lighten($bg-color, 20%) border-radius: $border-radius //.625em @else if ($state == "hover") @if $flat - border: 0px solid background: darken($bg-color, 5%) + border: 0px solid @else - border: 1px solid darken($bg-color, 20%)// .094em background: linear-gradient($bg-color, darken($bg-color, 10%)) + border: 1px solid darken($bg-color, 20%)// .094em @else if ($state == "active") @if $flat - border: 0px solid background: darken($bg-color, 15%) + border: 0px solid @else - border: 1px solid darken($bg-color, 30%)// .094em background: linear-gradient(darken($bg-color, 10%), darken($bg-color, 20%)) + border: 1px solid darken($bg-color, 30%)// .094em box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5) @else if ($state == "focus") @if $flat - border: 0px solid $bg-color background: lighten($bg-color, 5%) + border: 0px solid $bg-color @else border: 1px solid darken($bg-color, 15%) box-shadow: inset 0px 0px 0px 1px rgba(lighten($bg-color, 50%), .5), inset 0 1px 0 rgba(lighten($bg-color, 55%), .6) @else if ($state == "disabled") @if $flat - border: 0px solid background: $disabled-color + border: 0px solid @else - border: 1px solid $disabled-border-color// .094em background: $disabled-color + border: 1px solid $disabled-border-color// .094em box-shadow: none diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_button.sass index 47672f3..6875321 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_button.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_button.sass @@ -68,8 +68,6 @@ $button-border-radius: 3px //border-image-slice: 4; //border-image-width: 4; -//background-image: linear-gradient(#3BB0FF, #1E36FA); - //background-color: #006CEB; //background-size: cover; //background-repeat: no-repeat; @@ -78,8 +76,4 @@ $button-border-radius: 3px //background: url(assets/4slicewithpattern.svg); //background-size: cover; //width: fit-content; -//height: fit-content; - -//.button:active -//box-shadow: #E6431D 0 1px 0 inset; -//text-shadow: 0 -1px 0 #5F3A29; \ No newline at end of file +//height: fit-content; \ No newline at end of file diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass index b0d6da4..d685217 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass @@ -42,11 +42,14 @@ $alert-modal-opacity: .5 .jewel.alert display: block position: fixed + top: 50% left: 50% transform: translate(-50%, -50%) + margin: 0 padding: 0 + max-width: 100% max-height: 100% @@ -54,9 +57,9 @@ $alert-modal-opacity: .5 min-height: $alert-min-height border: 0px solid - border-radius: $alert-border-radius - box-shadow: 0px 20px 65px 0px rgba(0,0,0,0.8) background-color: $background-color + box-shadow: 0px 20px 65px 0px rgba(0,0,0,0.8) + border-radius: $alert-border-radius .jewel.titlebar padding: $alert-padding $alert-padding 0px $alert-padding @@ -85,16 +88,13 @@ $alert-modal-opacity: .5 .jewel.controlbar @if $flat - border: 0px solid background: $default-color + border: 0px solid @else - border-top: 1px solid darken($default-color, 15%) background: linear-gradient(lighten($default-color, 5%), darken($default-color, 5%)) + border-top: 1px solid darken($default-color, 15%) box-shadow: inset 0 1px 0 lighten($default-color, 20%) - border-top-left-radius: 0px - border-top-right-radius: 0px - border-bottom-left-radius: $alert-border-radius - border-bottom-right-radius: $alert-border-radius + border-radius: 0px 0px $alert-border-radius $alert-border-radius padding: $alert-padding position: absolute diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass index 34ccab3..6d0b37d 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass @@ -63,25 +63,3 @@ $button-border-radius: 3px .jewel.button.primary +button-theme($primary-color) - -//SVGs -//border:1px; /*without this svg shows scaled and bigger*/ -//border-image-source: url(assets/jewel-button.svg) ; -//border-image-slice: 4; -//border-image-width: 4; - -//background-image: linear-gradient(#3BB0FF, #1E36FA); - -//background-color: #006CEB; -//background-size: cover; -//background-repeat: no-repeat; -//background-clip: padding-box; - -//background: url(assets/4slicewithpattern.svg); -//background-size: cover; -//width: fit-content; -//height: fit-content; - -//.button:active -//box-shadow: #E6431D 0 1px 0 inset; -//text-shadow: 0 -1px 0 #5F3A29; \ No newline at end of file diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass index 68ac835..d7e1dbc 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass @@ -51,11 +51,11 @@ $checkbox-label-font-size: 16px line-height: $checkbox-button-size @if $flat - border: 1px solid transparent background: $default-color + border: 1px solid transparent @else - border: 1px solid darken($default-color, 15%) background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%)) + border: 1px solid darken($default-color, 15%) border-radius: $checkbox-border-radius &:checked, &:checked:active @@ -81,40 +81,43 @@ $checkbox-label-font-size: 16px &:focus outline: none @if $flat - border: 1px solid transparent background: lighten($primary-color, 25%) + border: 1px solid transparent @else border: 1px solid darken($primary-color, 15%) &[disabled] cursor: unset + background: $disabled-color @if $flat border: 1px solid transparent @else border: 1px solid $disabled-border-color// .094em - background: $disabled-color & + span cursor: unset color: $disabled-font-color &:checked - @if $flat - border: 1px solid transparent - @else - border: 1px solid $disabled-border-color// .094em background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='#{encodecolor(darken($disabled-color, 15%))}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), $disabled-color background-size: 90% background-position: center background-repeat: no-repeat background-attachment: fixed + @if $flat + border: 1px solid transparent + @else + border: 1px solid $disabled-border-color// .094em // -- LABEL span cursor: pointer position: relative - vertical-align: top + margin: 0 padding-left: $checkbox-label-separation - font-size: $checkbox-label-font-size + + vertical-align: top line-height: $checkbox-button-size + + font-size: $checkbox-label-font-size diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass index f80cb27..6793098 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass @@ -23,6 +23,7 @@ .jewel.item cursor: pointer padding: 8px + flex-shrink: 0 flex-grow: 1 diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass index 1a2ccdc..945c4b3 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass @@ -51,11 +51,11 @@ $radiobutton-label-font-size: 16px line-height: $radiobutton-button-size @if $flat - border: 1px solid transparent background: $default-color + border: 1px solid transparent @else - border: 1px solid darken($default-color, 15%) background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%)) + border: 1px solid darken($default-color, 15%) border-radius: $radiobutton-border-radius &:checked, &:checked:active @@ -81,40 +81,43 @@ $radiobutton-label-font-size: 16px &:focus outline: none @if $flat - border: 1px solid transparent background: lighten($primary-color, 25%) + border: 1px solid transparent @else border: 1px solid darken($primary-color, 15%) &[disabled] cursor: unset + background: $disabled-color @if $flat border: 1px solid transparent @else border: 1px solid $disabled-border-color// .094em - background: $disabled-color & + span cursor: unset color: $disabled-font-color &:checked - @if $flat - border: 1px solid transparent - @else - border: 1px solid $disabled-border-color// .094em background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='#{encodecolor(darken($disabled-color, 15%))}' cx='11' cy='11' r='6'></circle></g></g></svg>"), $disabled-color background-size: 60% background-position: center background-repeat: no-repeat background-attachment: fixed + @if $flat + border: 1px solid transparent + @else + border: 1px solid $disabled-border-color// .094em // -- LABEL span cursor: pointer position: relative - vertical-align: top + margin: 0 padding-left: $radiobutton-label-separation - font-size: $radiobutton-label-font-size + + vertical-align: top line-height: $radiobutton-button-size + + font-size: $radiobutton-label-font-size diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass index d37abc8..f0b545b 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass @@ -39,18 +39,23 @@ $slider-container-height: #{$slider-thumb-size + round($slider-thumb-size/2)} background: none input - outline: 0 cursor: pointer + user-select: none + +appear(none) + outline: 0 + + align-self: center + z-index: 1 + margin: 0 $slider-margin padding: $slider-padding + width: $slider-min-width height: $slider-track-min-height + background: transparent - user-select: none color: $primary-color - align-self: center - z-index: 1 // TRACK &::-webkit-slider-runnable-track @@ -65,7 +70,6 @@ $slider-container-height: #{$slider-thumb-size + round($slider-thumb-size/2)} +appear(none) width: $slider-thumb-size height: $slider-thumb-size - //overflow: visible @if $flat background: $primary-color border: 0 @@ -77,12 +81,9 @@ $slider-container-height: #{$slider-thumb-size + round($slider-thumb-size/2)} // background-position: center // background-attachment: fixed border: 1px solid darken($primary-color, 15%) - box-shadow: inset 0 1px 0 lighten($primary-color, 20%) + box-shadow: inset 0 1px 0 lighten($primary-color, 20%), 0 0 0 1px lighten(rgba($default-color, 0.3), 20%) border-radius: $slider-border-radius - //&:focus:not(:active)::-webkit-slider-thumb, &:focus:not(:active)::-moz-range-thumb - // box-shadow: 0 0 0 10px rgba($primary-color, 0.26) - &:active::-webkit-slider-thumb, &:active::-moz-range-thumb transform: scale(1.4) @@ -93,20 +94,22 @@ $slider-container-height: #{$slider-thumb-size + round($slider-thumb-size/2)} cursor: unset &::-webkit-slider-thumb, &::-moz-range-thumb - background: $disabled-border-color - border: 1px solid darken($disabled-border-color, 15%) + background: $disabled-color + border: 1px solid darken($disabled-border-color, 10%) + box-shadow: none &:active::-webkit-slider-thumb, &:active::-moz-range-thumb transform: scale(1.0) + .slider-track-container > .slider-track-fill - border: 1px solid darken($disabled-border-color, 15%) - background: $disabled-border-color + background: darken($disabled-color, 5%) + border: 1px solid darken($disabled-border-color, 10%) + box-shadow: none + .slider-track-container > .slider-track - border: 1px solid darken($disabled-border-color, 15%) - background: $disabled-border-color - + background: $disabled-color + border: 1px solid $disabled-border-color + box-shadow: none .slider-track-container position: absolute @@ -152,6 +155,6 @@ $slider-container-height: #{$slider-thumb-size + round($slider-thumb-size/2)} background: $default-color border: 0 @else - background: linear-gradient(lighten($default-color, 5%), darken($default-color, 5%)) + background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 5%)) border: 1px solid darken($default-color, 15%) border-radius: $slider-track-border-radius \ No newline at end of file diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textfield.sass index b3b57f5..f1e9b08 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textfield.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textfield.sass @@ -53,8 +53,8 @@ $textfield-border-radius: 3px color: $textfield-text-color @if $flat - border: 0px solid background: $default-color + border: 0px solid @else background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%)) border: 1px solid darken($default-color, 15%) @@ -82,11 +82,11 @@ $textfield-border-radius: 3px &[disabled] cursor: unset @if $flat - border: 0px solid background: $disabled-color + border: 0px solid @else - border: 1px solid $disabled-border-color// .094em background: $disabled-color + border: 1px solid $disabled-border-color// .094em box-shadow: none color: $disabled-font-color -- To stop receiving notification emails like this one, please contact carlosrov...@apache.org.