From 27432a327d3f9d64aa4c8c483b99e2e28cd57c0d Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Thu, 7 Feb 2019 14:54:46 +0530 Subject: [PATCH 01/17] Issue #SB-10394 feat: css changes sunbird ui components --- _variables.scss | 79 +++++++-------- component/_buttons.scss | 10 +- component/_modal.scss | 215 +++++++++++++++++++++++----------------- dist/sb-components.css | 95 +++++++++++------- global.scss | 41 +++----- 5 files changed, 238 insertions(+), 202 deletions(-) diff --git a/_variables.scss b/_variables.scss index 4badd1d..db7a8c9 100644 --- a/_variables.scss +++ b/_variables.scss @@ -67,13 +67,6 @@ $font-stack-ur: Cantarell, 'Helvetica Neue', sans-serif; -/* gray colors */ -$gray-0: #f3f3f3; // place holder active bg -$gray-100: #cccccc; // disable btn bg, icon color -$gray-200: #979797; // disable text, place holder text -$gray-300: #999999; // sub heading 2 -$gray-400: #666666; // sub heading -$gray-800: #333333; // text color // Base Colors $blue: #024f9d; $green: #008840; @@ -86,6 +79,7 @@ $pink: #e83e8c; $yellow: #ffc107; $teal: #20c997; $cyan: #17a2b8; +$gray: #333333; // brand Colors $primary-color: $blue; $secondary-color: $green; @@ -98,27 +92,23 @@ $danger-color: $red; // Nuetral Colors $white-color: $white; $theme-colors: () !default; -$theme-colors: map-merge(( - "primary": $primary-color, - "secondary": $secondary-color, - "tertiary": $tertiary-color, - "success": $success-color, - "info": $info-color, - "warning": $warning-color, - "danger": $danger-color, - "light": $gray-100, - "dark": $gray-800 -), $theme-colors); -// primary colors shades +// gray colors shades +$gray-800: $gray; // text color +$gray-0: lighten($gray-800,75%); // #f3f3f3; place holder active bg +$gray-100: lighten($gray-800,60%); // #cccccc; disable btn bg, icon color +$gray-200: lighten($gray-800,39%); // #979797; disable text, place holder text +$gray-300: lighten($gray-800,40%); // #999999; sub heading 2 +$gray-400: lighten($gray-800,20%); // #666666; sub heading, button bg, heading, table titles, links, toggles +// primary colors shades $primary-0: lighten($primary-color,65%); // bg -$primary-100: lighten($primary-color,15%); // default button bg -$primary-200: lighten($primary-color,10%); // divider -$primary-300: lighten($primary-color,5%); // outline, focus fields +$primary-100: lighten($primary-color,62%); // default button bg +$primary-200: lighten($primary-color,45%); // divider +$primary-300: lighten($primary-color,40%); // outline, focus fields $primary-400: $primary-color; // button bg, heading, table titles, links, toggles -$primary-600: darken($primary-color,15%); // on press -$primary-800: darken($primary-color,30%); // hover +$primary-600: darken($primary-color,10%); // on press +$primary-800: darken($primary-color,20%); // hover // secondary colors shades -$secondary-0: lighten($secondary-color,50%); // toast bg +$secondary-0: lighten($secondary-color,70%); // toast bg $secondary-100: lighten($secondary-color,15%); // buttong bg, toast $secondary-200: lighten($secondary-color,10%); // button hover $secondary-400: $secondary-color; // icon @@ -130,6 +120,17 @@ $tertiary-400: $tertiary-color; // icon, label, notification bg $red-0: lighten($red,50%); // toast bg $red-100: lighten($red,15%); // buttong bg, toast $red-400: $red; // icon color, lable, notification bg +$theme-colors: map-merge(( + "primary": $primary-color, + "secondary": $secondary-color, + "tertiary": $tertiary-color, + "success": $success-color, + "info": $info-color, + "warning": $warning-color, + "danger": $danger-color, + "light": $gray-100, + "dark": $gray-800 +), $theme-colors); // Settings for the `` element. $bg-body: $primary-0; $body-color: $gray-800; @@ -140,24 +141,24 @@ $link-decoration: none; $link-hover-decoration: underline; // Fonts // $font-default-size: 14px; -$font-size-base: 1rem; // Assumes the browser default, typically `16px` +$font-size-base: 14px; // Assumes the browser default, typically `16px` $font-weight-light: 300; $font-weight-normal: 400; $font-weight-bold: 700; $font-weight-base: $font-weight-normal; -$line-height-base: $font-size-base * .25; -$h1-font-size: $font-size-base * 2.5; // 40px -$h2-font-size: $font-size-base * 2; // 32px -$h3-font-size: $font-size-base * 1.75; // 28px -$h4-font-size: $font-size-base * 1.5; // 24px -$h5-font-size: $font-size-base * 1.25; // 20px -$h6-font-size: $font-size-base; // 16px -$font-size-lg: ($h4-font-size); //24px -$font-size-normal: ($h6-font-size); // 16px -$font-size-md: ($font-size-base * .825); // 14px -$font-size-sm: ($font-size-base * .75); // 12px -$font-size-xs: ($font-size-base * .625); // 10px -$p-font-size: $font-size-md; +$line-height-base: ($font-size-base + 8); +$h1-font-size: $font-size-base * 2.286; // 32px +$h2-font-size: $font-size-base * 2; // 28px +$h3-font-size: $font-size-base * 1.714; // 24px +$h4-font-size: $font-size-base * 1.429; // 20px +$h5-font-size: $font-size-base * 1.143; // 16px +$h6-font-size: $font-size-base * 1; // 14px +$font-size-lg: ($h3-font-size); //24px +$font-size-normal: ($h5-font-size); // 16px +$font-size-md: ($font-size-base * 1); // 14px +$font-size-sm: ($font-size-base * 0.8571); // 12px +$font-size-xs: ($font-size-base * 0.7143); // 10px +$p-font-size: $font-size-md; // spaces $base-block-space: 8px; $block-padding-y-x: ($base-block-space * 1) ($base-block-space * 3); // any block default spacing diff --git a/component/_buttons.scss b/component/_buttons.scss index 0d79363..f7909c8 100644 --- a/component/_buttons.scss +++ b/component/_buttons.scss @@ -7,11 +7,6 @@ input[type="button"] { width: 100%; } } -.d-flex-btns { - display: flex; - align-items: center; - justify-content: space-between; -} // base button styles .sb-btn { -webkit-tap-highlight-color: transparent; @@ -24,6 +19,7 @@ input[type="button"] { color:#fff; cursor:pointer; margin:0px 0px 0px 8px; + min-width:($base-block-space * 8); text: { transform: capitalize; decoration: none; @@ -63,11 +59,13 @@ input[type="button"] { background-color: $gray-100; color:$gray-200; border:1px solid $gray-100; + cursor: not-allowed; } .sb-btn-outline-disabled { background-color: $white-color; color:$gray-100; border:1px solid $gray-100; + cursor: not-allowed; } // default outline colored btns .sb-btn-outline-primary{ @@ -116,4 +114,4 @@ input[type="button"] { } .sb-btn-error{ @include btn-theme($danger-color); -} \ No newline at end of file +} \ No newline at end of file diff --git a/component/_modal.scss b/component/_modal.scss index 7b4b822..ce3d251 100644 --- a/component/_modal.scss +++ b/component/_modal.scss @@ -1,99 +1,130 @@ - - - // modal +// modal .sb-modal{ - .ui.modal { - margin: 0 auto; - left:0px; - right:0px; - @include size(100%,auto); //bourbon - - &>.sb-modal-header { - background-color: $primary-color; - color: $white-color; - font-weight: $font-weight-bold; - font-size: $h6-font-size; - padding:$block-padding-y-x; - border-bottom:0px solid $gray-100; - @include size(auto,2.5rem); //bourbon - } - - &>.sb-modal-content { - min-height: 100px; - padding:$block-padding-xy; - } - - &>.close { - color: $white-color; - top: 0px; - right: 0px; - font-size: $font-size-base; - padding: 0; - margin: 0; - @include size(($base-block-space * 5),($base-block-space * 5)); //bourbon + .ui.modal { + margin: 0 auto; + left: 0; + right: 0; + @include size(100%,auto); //bourbon + .sb-modal-header { + background-color: $primary-color; + color: $white-color; + font-weight: $font-weight-bold; + font-size: $h5-font-size; + padding: $block-padding-y-x; + border-bottom: 0 solid $gray-100; + //@include size(auto,($base-block-space * 5)); //bourbon + min-height: ($base-block-space * 5); + line-height: ($h5-font-size + 8); + } + + .sb-modal-content { + min-height: 100px; + padding:$block-padding-xy; + } + + .close { + color: $white-color; + top: 0; + right: 0; + font-size: $font-size-base; + padding: 0; + margin: 0; + @include size(($base-block-space * 5),($base-block-space * 5)); //bourbon + display: flex; + align-items: center; + justify-content: center; + } + + .sb-modal-actions { + padding:$block-padding-y-x; + background: $white-color; + border-top: 1px solid $gray-100; + min-height: ($base-block-space * 7); + display: flex; + flex-direction: row-reverse; + align-items: center; + } + + .sb-modal-fullscreen { + top: 0; + position: fixed; + bottom: 0; + left: 0; + right: 0; + width: 100%; + margin: 0; + overflow-y: auto; + overflow-x: hidden; + .sb-modal-header { + height: 4rem; + width: auto; + border-radius: 0px; display: flex; - align-items: center; - justify-content: center; - } - - &>.sb-modal-actions { - padding:$block-padding-y-x; - background: $white-color; - border-top: 1px solid $gray-100; - min-height: ($base-block-space * 7); - } - - .small { - color: $text-lightDark; - } - - &.scroll { - margin: 0 !important; - } - - &.small { - max-width: 300px; + justify-content: space-between; } - - &.normal { - max-width: 720px; - .content { - max-height: 380px; - } + .sb-modal-content { + height: calc(100vh - 120px); + } + } + .small { + color: $text-lightDark; + } + + + &.small { + max-width: 300px; + } + + &.normal { + max-width: 720px; + .content { + max-height: 380px; } - - &.large { - max-width: 100%; - top: 0 !important; - - .content { - height: calc(100vh - 100px); - } + } + + &.large { + max-width: 100%; + top: 0 !important; + + .content { + height: calc(100vh - 100px); } } } - .modals.dimmer .ui.scrolling.modal { - position: absolute!important; - margin: 0!important; - } - @include respond-below(sm) { - .sb-modal{ - .ui.modal { - position: absolute; - width: 95%; - margin: 0 auto !important; - top:50%; - transform: translate(0%, -50%); - height:inherit; - } - .ui.modal .scrolling.content { - max-height: calc(100vh - 10rem); - overflow: auto; - } - .ui.page.dimmer { - display: flex !important; - align-items: center; - justify-content: center; - } - } - } \ No newline at end of file +} +[dir="rtl"] .sb-modal .ui.modal > .close{ + right: auto; + left: 0; +} +.modals.dimmer .ui.scrolling.modal { + position: absolute!important; + margin: 0 !important; +} +@include respond-below(sm) { + .sb-modal { + .ui.modal { + position: absolute; + width: 95%; + margin: 0 auto !important; + top:50%; + transform: translate(0, -50%); + height:inherit; + .close { + top: 0 !important; + right: 0 !important; + } + .sb-modal-actions{ + padding:$block-padding-y-x; + } + } + .ui.modal .scrolling.content { + max-height: calc(100vh - 10rem); + overflow: auto; + } + .ui.page.dimmer { + display: flex !important; + align-items: center; + justify-content: center; + } + } + } \ No newline at end of file diff --git a/dist/sb-components.css b/dist/sb-components.css index f2ddfda..c151ef4 100644 --- a/dist/sb-components.css +++ b/dist/sb-components.css @@ -1,13 +1,9 @@ -/* gray colors */ -* { - transition: all 300ms ease-in-out; } - -html, body { +html, +body { height: 100%; - font-size: 1rem; } + font-size: 14px; } body { - background: #ecf5ff; position: relative; font-family: "Noto Sans", "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans Bengali", "Noto Sans Malayalam", "Noto Sans Gurmukhi", "Noto Sans Gujarati", "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Oriya", "Noto Nastaliq Urdu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; letter-spacing: 0.2px; @@ -22,9 +18,6 @@ body { *[lang="ur"] body { font-family: "Noto Sans", "Noto Nastaliq Urdu", "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans Bengali", "Noto Sans Malayalam", "Noto Sans Gurmukhi", "Noto Sans Gujarati", "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Oriya", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } -*[lang="ur"] { - font-size: 0.525rem; } - button, input, textarea, @@ -963,11 +956,6 @@ input[type="reset"].btn-block, input[type="button"].btn-block { width: 100%; } -.d-flex-btns { - display: flex; - align-items: center; - justify-content: space-between; } - .sb-btn { -webkit-tap-highlight-color: transparent; -webkit-appearance: button; @@ -979,6 +967,7 @@ input[type="button"].btn-block { color: #fff; cursor: pointer; margin: 0px 0px 0px 8px; + min-width: 64px; text-transform: capitalize; text-decoration: none; } @@ -992,7 +981,7 @@ input[type="button"].btn-block { .sb-btn-small { height: 24px; padding: 4px 16px; - font-size: 0.625rem; + font-size: 10.0002px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } @@ -1000,7 +989,7 @@ input[type="button"].btn-block { .sb-btn-normal { height: 32px; padding: 8px 24px; - font-size: 0.75rem; + font-size: 11.9994px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } @@ -1008,20 +997,22 @@ input[type="button"].btn-block { .sb-btn-big { height: 40px; padding: 8px 24px; - font-size: 1rem; + font-size: 16.002px; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; } .sb-btn-disabled { background-color: #cccccc; - color: #979797; - border: 1px solid #cccccc; } + color: #969696; + border: 1px solid #cccccc; + cursor: not-allowed; } .sb-btn-outline-disabled { background-color: #fff; color: #cccccc; - border: 1px solid #cccccc; } + border: 1px solid #cccccc; + cursor: not-allowed; } .sb-btn-outline-primary { border-color: #024a93; @@ -1161,27 +1152,27 @@ input[type="button"].btn-block { .sb-modal .ui.modal { margin: 0 auto; - left: 0px; - right: 0px; + left: 0; + right: 0; height: auto; width: 100%; } - .sb-modal .ui.modal > .sb-modal-header { + .sb-modal .ui.modal .sb-modal-header { background-color: #024f9d; color: #fff; font-weight: 700; - font-size: 1rem; + font-size: 16.002px; padding: 8px 24px; - border-bottom: 0px solid #cccccc; - height: 2.5rem; - width: auto; } - .sb-modal .ui.modal > .sb-modal-content { + border-bottom: 0 solid #cccccc; + min-height: 40px; + line-height: 24.002px; } + .sb-modal .ui.modal .sb-modal-content { min-height: 100px; padding: 24px; } - .sb-modal .ui.modal > .close { + .sb-modal .ui.modal .close { color: #fff; - top: 0px; - right: 0px; - font-size: 1rem; + top: 0; + right: 0; + font-size: 14px; padding: 0; margin: 0; height: 40px; @@ -1189,15 +1180,34 @@ input[type="button"].btn-block { display: flex; align-items: center; justify-content: center; } - .sb-modal .ui.modal > .sb-modal-actions { + .sb-modal .ui.modal .sb-modal-actions { padding: 8px 24px; background: #fff; border-top: 1px solid #cccccc; - min-height: 56px; } + min-height: 56px; + display: flex; + flex-direction: row-reverse; + align-items: center; } + .sb-modal .ui.modal .sb-modal-fullscreen { + top: 0; + position: fixed; + bottom: 0; + left: 0; + right: 0; + width: 100%; + margin: 0; + overflow-y: auto; + overflow-x: hidden; } + .sb-modal .ui.modal .sb-modal-fullscreen .sb-modal-header { + height: 4rem; + width: auto; + border-radius: 0px; + display: flex; + justify-content: space-between; } + .sb-modal .ui.modal .sb-modal-fullscreen .sb-modal-content { + height: calc(100vh - 120px); } .sb-modal .ui.modal .small { color: #666; } - .sb-modal .ui.modal.scroll { - margin: 0 !important; } .sb-modal .ui.modal.small { max-width: 300px; } .sb-modal .ui.modal.normal { @@ -1210,6 +1220,10 @@ input[type="button"].btn-block { .sb-modal .ui.modal.large .content { height: calc(100vh - 100px); } +[dir="rtl"] .sb-modal .ui.modal > .close { + right: auto; + left: 0; } + .modals.dimmer .ui.scrolling.modal { position: absolute !important; margin: 0 !important; } @@ -1220,8 +1234,13 @@ input[type="button"].btn-block { width: 95%; margin: 0 auto !important; top: 50%; - transform: translate(0%, -50%); + transform: translate(0, -50%); height: inherit; } + .sb-modal .ui.modal .close { + top: 0 !important; + right: 0 !important; } + .sb-modal .ui.modal .sb-modal-actions { + padding: 8px 24px; } .sb-modal .ui.modal .scrolling.content { max-height: calc(100vh - 10rem); overflow: auto; } diff --git a/global.scss b/global.scss index fd29bc8..b03c23c 100644 --- a/global.scss +++ b/global.scss @@ -1,35 +1,28 @@ // global styles - -*{ - transition: all 300ms ease-in-out - } -html, body { - height:100%; +// *{ +// transition: all 300ms ease-in-out +// } +html, +body { + height: 100%; font-size:$font-size-base; } - body { - background:$bg-body; - position: relative; -font-family: $font-stack-en; -letter-spacing: 0.2px; -height: auto; - } - +body { + // background:$bg-body; + position: relative; + font-family: $font-stack-en; + letter-spacing: 0.2px; + height: auto; +} *[lang="en"] body { font-family: $font-stack-en; } - *[lang="hi"] body { font-family: $font-stack-hi; } - *[lang="ur"] body { font-family: $font-stack-ur; } -*[lang="ur"] { - font-size: ($font-size-base * .525); -} - button, input, textarea, @@ -78,34 +71,28 @@ h5, .ui.form input[type=url], .ui.menu, .ui.dropdown, -.ui.category.search> .results .category> .name { +.ui.category.search>.results .category>.name { font-family: inherit; } - .ui.tiny.header .icon { line-height: 1; font-size: 0.75em; } - .ui.pagination.menu { flex-wrap: wrap; } - input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; } - .ui.dimmer { background-color: rgba(0, 0, 0, 0.35); } - .ui.modal>.close { opacity: 1; } - .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 1); } \ No newline at end of file From 15d83faac1aed44cd4b919c6cdb74cbd3e7eb586 Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Thu, 7 Feb 2019 14:55:24 +0530 Subject: [PATCH 02/17] 1.0.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b504415..c293ded 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sunbird-ui-components", - "version": "1.0.0", + "version": "1.0.1", "description": "Repository of common Sunbird UI components which are used across all Sunbird apps", "main": "gulpfile.js", "dependencies": {}, From 718fbdde4e601dc5458c9eb1f8efd1cac7e38711 Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Thu, 7 Feb 2019 17:57:47 +0530 Subject: [PATCH 03/17] Issue #SB-10394 feat: css changes sunbird ui components --- component/_modal.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/component/_modal.scss b/component/_modal.scss index ce3d251..2e116e9 100644 --- a/component/_modal.scss +++ b/component/_modal.scss @@ -45,7 +45,7 @@ align-items: center; } - .sb-modal-fullscreen { + &.sb-modal-fullscreen { top: 0; position: fixed; bottom: 0; @@ -66,7 +66,7 @@ height: calc(100vh - 120px); } } - .small { + &.small { color: $text-lightDark; } From ec04fac2d7e87b3fe917611e1ee4d19b053eac39 Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Thu, 7 Feb 2019 17:58:02 +0530 Subject: [PATCH 04/17] 1.0.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c293ded..100c676 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sunbird-ui-components", - "version": "1.0.1", + "version": "1.0.2", "description": "Repository of common Sunbird UI components which are used across all Sunbird apps", "main": "gulpfile.js", "dependencies": {}, From 6ef9c6f3261d4d3f49d983ea1cb700f3276b3970 Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Thu, 7 Feb 2019 18:22:11 +0530 Subject: [PATCH 05/17] Issue #SB-10394 feat: css changes sunbird ui components --- dist/sb-components.css | 8 ++++---- package.json | 5 ++++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/dist/sb-components.css b/dist/sb-components.css index c151ef4..0ac83f9 100644 --- a/dist/sb-components.css +++ b/dist/sb-components.css @@ -1188,7 +1188,7 @@ input[type="button"].btn-block { display: flex; flex-direction: row-reverse; align-items: center; } - .sb-modal .ui.modal .sb-modal-fullscreen { + .sb-modal .ui.modal.sb-modal-fullscreen { top: 0; position: fixed; bottom: 0; @@ -1198,15 +1198,15 @@ input[type="button"].btn-block { margin: 0; overflow-y: auto; overflow-x: hidden; } - .sb-modal .ui.modal .sb-modal-fullscreen .sb-modal-header { + .sb-modal .ui.modal.sb-modal-fullscreen .sb-modal-header { height: 4rem; width: auto; border-radius: 0px; display: flex; justify-content: space-between; } - .sb-modal .ui.modal .sb-modal-fullscreen .sb-modal-content { + .sb-modal .ui.modal.sb-modal-fullscreen .sb-modal-content { height: calc(100vh - 120px); } - .sb-modal .ui.modal .small { + .sb-modal .ui.modal.small { color: #666; } .sb-modal .ui.modal.small { max-width: 300px; } diff --git a/package.json b/package.json index 100c676..cdbfec6 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,10 @@ "dependencies": {}, "devDependencies": {}, "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "build-patch": "gulp styles && npm version patch", + "build-minor": "gulp styles && npm version minor", + "build-major": "gulp styles && npm version major" }, "repository": { "type": "git", From 576bec3909f6acd5d3b949535ecd4ea6bf5d4ee1 Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Thu, 7 Feb 2019 18:23:52 +0530 Subject: [PATCH 06/17] Issue #SB-10394 feat: css changes sunbird ui components --- package.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/package.json b/package.json index cdbfec6..100c676 100644 --- a/package.json +++ b/package.json @@ -6,10 +6,7 @@ "dependencies": {}, "devDependencies": {}, "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "build-patch": "gulp styles && npm version patch", - "build-minor": "gulp styles && npm version minor", - "build-major": "gulp styles && npm version major" + "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", From da5faee8ab357a83e423d0b507514e6aa8a3cfbd Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Thu, 7 Feb 2019 18:24:17 +0530 Subject: [PATCH 07/17] 1.0.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 100c676..cd895d9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sunbird-ui-components", - "version": "1.0.2", + "version": "1.0.3", "description": "Repository of common Sunbird UI components which are used across all Sunbird apps", "main": "gulpfile.js", "dependencies": {}, From 2373f425a761c8ba64b3684c7c4c9c732fe1d745 Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Mon, 18 Feb 2019 13:23:17 +0530 Subject: [PATCH 08/17] Design system variables name changes --- _variables.scss | 311 +++++++++++++++++++++------------------- component/_modal.scss | 230 +++++++++++++++-------------- reusables/_buttons.scss | 151 +++++++++++++++++++ 3 files changed, 431 insertions(+), 261 deletions(-) diff --git a/_variables.scss b/_variables.scss index db7a8c9..a5112a9 100644 --- a/_variables.scss +++ b/_variables.scss @@ -1,177 +1,200 @@ // Variables -// Variables should follow the `$component-state-property-size` formula for -// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. -// Color system -// stylelint-disable -// Fonts -$font-stack-en: - 'Noto Sans', - 'Noto Sans Devanagari', - 'Noto Sans Tamil', - 'Noto Sans Bengali', - 'Noto Sans Malayalam', - 'Noto Sans Gurmukhi', - 'Noto Sans Gujarati', - 'Noto Sans Telugu', - 'Noto Sans Kannada', - 'Noto Sans Oriya', - 'Noto Nastaliq Urdu', - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen-Sans, - Ubuntu, - Cantarell, - 'Helvetica Neue', - sans-serif; -$font-stack-hi: - 'Noto Sans Devanagari', - 'Noto Sans', - 'Noto Sans Tamil', - 'Noto Sans Bengali', - 'Noto Sans Malayalam', - 'Noto Sans Gurmukhi', - 'Noto Sans Gujarati', - 'Noto Sans Telugu', - 'Noto Sans Kannada', - 'Noto Sans Oriya', - 'Noto Nastaliq Urdu', - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen-Sans, - Ubuntu, - Cantarell, - 'Helvetica Neue', - sans-serif; -$font-stack-ur: - 'Noto Sans', - 'Noto Nastaliq Urdu', - 'Noto Sans Devanagari', - 'Noto Sans Tamil', - 'Noto Sans Bengali', - 'Noto Sans Malayalam', - 'Noto Sans Gurmukhi', - 'Noto Sans Gujarati', - 'Noto Sans Telugu', - 'Noto Sans Kannada', - 'Noto Sans Oriya', - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen-Sans, - Ubuntu, - Cantarell, - 'Helvetica Neue', - sans-serif; +$font-stack-en: 'Noto Sans', +'Noto Sans Devanagari', +'Noto Sans Tamil', +'Noto Sans Bengali', +'Noto Sans Malayalam', +'Noto Sans Gurmukhi', +'Noto Sans Gujarati', +'Noto Sans Telugu', +'Noto Sans Kannada', +'Noto Sans Oriya', +'Noto Nastaliq Urdu', +-apple-system, +BlinkMacSystemFont, +'Segoe UI', +Roboto, +Oxygen-Sans, +Ubuntu, +Cantarell, +'Helvetica Neue', +sans-serif; +$font-stack-hi: 'Noto Sans Devanagari', +'Noto Sans', +'Noto Sans Tamil', +'Noto Sans Bengali', +'Noto Sans Malayalam', +'Noto Sans Gurmukhi', +'Noto Sans Gujarati', +'Noto Sans Telugu', +'Noto Sans Kannada', +'Noto Sans Oriya', +'Noto Nastaliq Urdu', +-apple-system, +BlinkMacSystemFont, +'Segoe UI', +Roboto, +Oxygen-Sans, +Ubuntu, +Cantarell, +'Helvetica Neue', +sans-serif; +$font-stack-ur: 'Noto Sans', +'Noto Nastaliq Urdu', +'Noto Sans Devanagari', +'Noto Sans Tamil', +'Noto Sans Bengali', +'Noto Sans Malayalam', +'Noto Sans Gurmukhi', +'Noto Sans Gujarati', +'Noto Sans Telugu', +'Noto Sans Kannada', +'Noto Sans Oriya', +-apple-system, +BlinkMacSystemFont, +'Segoe UI', +Roboto, +Oxygen-Sans, +Ubuntu, +Cantarell, +'Helvetica Neue', +sans-serif; // Base Colors -$blue: #024f9d; -$green: #008840; -$orange: #e55a28; -$red: #ff4558; -$white: #fff; -$indigo: #6610f2; -$purple: #6f42c1; -$pink: #e83e8c; -$yellow: #ffc107; -$teal: #20c997; -$cyan: #17a2b8; -$gray: #333333; +$blue: #024f9d; +$green: #008840; +$orange: #e55a28; +$red: #ff4558; +$white: #fff; +$indigo: #6610f2; +$purple: #6f42c1; +$pink: #e83e8c; +$yellow: #ffc107; +$teal: #20c997; +$cyan: #17a2b8; +$gray: #333333; // brand Colors -$primary-color: $blue; +$primary-color: $blue; $secondary-color: $green; -$tertiary-color: $orange; -// Status Colors -$info-color: $blue; -$success-color: $green; -$warning-color: $orange; -$danger-color: $red; +$tertiary-color: $orange; // Nuetral Colors -$white-color: $white; -$theme-colors: () !default; +$white-color: $white; // gray colors shades -$gray-800: $gray; // text color -$gray-0: lighten($gray-800,75%); // #f3f3f3; place holder active bg -$gray-100: lighten($gray-800,60%); // #cccccc; disable btn bg, icon color -$gray-200: lighten($gray-800,39%); // #979797; disable text, place holder text -$gray-300: lighten($gray-800,40%); // #999999; sub heading 2 -$gray-400: lighten($gray-800,20%); // #666666; sub heading, button bg, heading, table titles, links, toggles -// primary colors shades +$gray-0: lighten($gray, 75%); // place holder active bg +$gray-100: lighten($gray, 60%); // disable btn bg, icon color +$gray-200: lighten($gray, 40%); // disable text, place holder text +$gray-300: lighten($gray, 39%); // sub heading 2 +$gray-400: lighten($gray, 20%); // sub heading +$gray-800: $gray; // text color +/* +// primary colors shades $primary-0: lighten($primary-color,65%); // bg -$primary-100: lighten($primary-color,62%); // default button bg -$primary-200: lighten($primary-color,45%); // divider -$primary-300: lighten($primary-color,40%); // outline, focus fields +$primary-100: lighten($primary-color,15%); // default button bg +$primary-200: lighten($primary-color,10%); // divider +$primary-300: lighten($primary-color,5%); // outline, focus fields +$primary-400: $primary-color; // button bg, heading, table titles, links, toggles +$primary-600: darken($primary-color,15%); // on press +$primary-800: darken($primary-color,30%); // hover +*/ + +$primary-0: #F3F7FA; // bg +$primary-100: #EDF4F9; // default button bg +$primary-200: #80A7CE; // divider +$primary-300: #7AB4EE; // outline, focus fields $primary-400: $primary-color; // button bg, heading, table titles, links, toggles -$primary-600: darken($primary-color,10%); // on press -$primary-800: darken($primary-color,20%); // hover +$primary-600: #005391; // on press +$primary-800: #002E50; // hover +/* // secondary colors shades -$secondary-0: lighten($secondary-color,70%); // toast bg +$secondary-0: lighten($secondary-color,50%); // toast bg $secondary-100: lighten($secondary-color,15%); // buttong bg, toast $secondary-200: lighten($secondary-color,10%); // button hover $secondary-400: $secondary-color; // icon +*/ + +$secondary-0: #E1FFDF; // toast bg +$secondary-100: #00C786; // buttong bg, toast +$secondary-200: #07BC81; // button bg +$secondary-400: $secondary-color; // hover +/* // tertiary colors shades $tertiary-0: lighten($tertiary-color,50%); // toast bg $tertiary-100: lighten($tertiary-color,15%); // buttong bg, toast $tertiary-400: $tertiary-color; // icon, label, notification bg +*/ + +$tertiary-0: #FEEDD7; // toast bg +$tertiary-100: #FFA11D; // buttong bg, toast +$tertiary-400: $tertiary-color; // icon, label, notification bg +/* // red colors shades $red-0: lighten($red,50%); // toast bg $red-100: lighten($red,15%); // buttong bg, toast $red-400: $red; // icon color, lable, notification bg -$theme-colors: map-merge(( - "primary": $primary-color, - "secondary": $secondary-color, - "tertiary": $tertiary-color, - "success": $success-color, - "info": $info-color, - "warning": $warning-color, - "danger": $danger-color, - "light": $gray-100, - "dark": $gray-800 -), $theme-colors); +*/ + +$red-0: #FBCCD1; // toast bg +$red-100: #FF6979; // buttong bg, toast +$red-400: $red; // icon color, lable, notification bg + +// Status Colors +$info-color: $primary-400; +$success-color: $secondary-200; +$warning-color: $tertiary-100; +$danger-color: $red-100; // Settings for the `` element. -$bg-body: $primary-0; -$body-color: $gray-800; +$bg-body: $primary-0; +$body-color: $gray-800; +$theme-colors: () !default; +$theme-colors: map-merge(( "primary": $primary-color, "secondary": $secondary-color, "tertiary": $tertiary-color, "success": $success-color, "info": $info-color, "warning": $warning-color, "danger": $danger-color, "light": $gray-100, "dark": $gray), $theme-colors); // Style anchor elements. -$link-color: theme-color("primary"); -$link-decoration: none; -//$link-hover-color: darken($link-color, 15%); -$link-hover-decoration: underline; +$link-color: theme-color("primary"); +$link-decoration: none; +//$link-hover-color: darken($link-color, 15%); +$link-hover-decoration: underline; // Fonts // $font-default-size: 14px; $font-size-base: 14px; // Assumes the browser default, typically `16px` -$font-weight-light: 300; -$font-weight-normal: 400; -$font-weight-bold: 700; -$font-weight-base: $font-weight-normal; -$line-height-base: ($font-size-base + 8); -$h1-font-size: $font-size-base * 2.286; // 32px -$h2-font-size: $font-size-base * 2; // 28px -$h3-font-size: $font-size-base * 1.714; // 24px -$h4-font-size: $font-size-base * 1.429; // 20px -$h5-font-size: $font-size-base * 1.143; // 16px -$h6-font-size: $font-size-base * 1; // 14px -$font-size-lg: ($h3-font-size); //24px -$font-size-normal: ($h5-font-size); // 16px -$font-size-md: ($font-size-base * 1); // 14px -$font-size-sm: ($font-size-base * 0.8571); // 12px -$font-size-xs: ($font-size-base * 0.7143); // 10px -$p-font-size: $font-size-md; +$font-weight-light: 300; +$font-weight-normal: 400; +$font-weight-bold: 700; +$font-weight-base: $font-weight-normal; +$line-height-base: ($font-size-base + 8); +$h1-font-size: $font-size-base * 2.286; // 32px +$h2-font-size: $font-size-base * 2; // 28px +$h3-font-size: $font-size-base * 1.714; // 24px +$h4-font-size: $font-size-base * 1.429; // 20px +$h5-font-size: $font-size-base * 1.143; // 16px +$h6-font-size: $font-size-base * 1; // 14px +$font-size-lg: ($h4-font-size); //20px +$font-size-md: ($h5-font-size); // 16px +$font-size-normal: ($font-size-base * 1); // 14px +$font-size-sm: ($font-size-base * 0.8571); // 12px +$font-size-xs: ($font-size-base * 0.7143); // 10px +$p-font-size: $font-size-normal; // spaces $base-block-space: 8px; -$block-padding-y-x: ($base-block-space * 1) ($base-block-space * 3); // any block default spacing -$block-padding-xy: ($base-block-space * 3); // top right bottom left spacing -$block-padding-x: ($base-block-space * 3); // left right spacing -$block-padding-y: ($base-block-space * 1); // top bottom spacing -$block-margin-xl-minus: -($base-block-space * 3); // minus margin 24px left -$block-margin-xr-minus: -($base-block-space * 3); // minus margin 24px right +$block-padding-y-x: ($base-block-space * 1) ($base-block-space * 2); // any block default spacing 16px +$block-padding-xy: ($base-block-space * 2); // top right bottom left spacing +$block-padding-x: ($base-block-space * 2) ($base-block-space * 2); // left right spacing +$block-padding-y: ($base-block-space * 1) ($base-block-space * 1); // top bottom spacing +$block-margin-xl-minus: -($base-block-space * 2); // minus margin 16px left +$block-margin-xr-minus: -($base-block-space * 2); // minus margin 16px right +$block-margin-xr-minus: -($base-block-space * 2) -($base-block-space * 2); // minus margin 16px left & right // width heights -$base-btn-small-height: ($base-block-space * 3); +$base-btn-xs-height: ($base-block-space * 3); $base-btn-normal-height: ($base-block-space * 4); -$base-btn-big-height: ($base-block-space * 5); +$base-btn-sm-height: ($base-block-space * 5); +$base-btn-md-height: ($base-block-space * 6); +$base-btn-lg-height: ($base-block-space * 7); $base-btn-fluid: 100%; +// modal component +$sb-modal-header-bg: $primary-400; +$sb-modal-actions-bg: $white-color; +$sb-modal-header-bg-success: $secondary-200; +$sb-modal-header-bg-warning: $tertiary-400; +$sb-modal-header-bg-error: $red-400; +$sb-modal-header-fsize: $h5-font-size; +//button component // To clean $text-lightDark: #666; $text-gray: rgb(180, 171, 171); diff --git a/component/_modal.scss b/component/_modal.scss index 2e116e9..d8b2624 100644 --- a/component/_modal.scss +++ b/component/_modal.scss @@ -1,130 +1,126 @@ -// modal -.sb-modal{ +/* modal styles */ +.sb-modal { .ui.modal { - margin: 0 auto; - left: 0; - right: 0; - @include size(100%,auto); //bourbon - .sb-modal-header { - background-color: $primary-color; - color: $white-color; - font-weight: $font-weight-bold; - font-size: $h5-font-size; - padding: $block-padding-y-x; - border-bottom: 0 solid $gray-100; - //@include size(auto,($base-block-space * 5)); //bourbon - min-height: ($base-block-space * 5); - line-height: ($h5-font-size + 8); - } - - .sb-modal-content { - min-height: 100px; - padding:$block-padding-xy; - } - - .close { - color: $white-color; - top: 0; - right: 0; - font-size: $font-size-base; - padding: 0; - margin: 0; - @include size(($base-block-space * 5),($base-block-space * 5)); //bourbon - display: flex; - align-items: center; - justify-content: center; - } - - .sb-modal-actions { - padding:$block-padding-y-x; - background: $white-color; - border-top: 1px solid $gray-100; - min-height: ($base-block-space * 7); - display: flex; - flex-direction: row-reverse; - align-items: center; - } - - &.sb-modal-fullscreen { - top: 0; - position: fixed; - bottom: 0; - left: 0; - right: 0; - width: 100%; - margin: 0; - overflow-y: auto; - overflow-x: hidden; + @include margin(3.5rem auto 0 auto); + @include position(null, 0 0 null 0); //bourbon + @include size(100%, auto); //bourbon .sb-modal-header { - height: 4rem; - width: auto; - border-radius: 0px; - display: flex; - justify-content: space-between; + background-color: $sb-modal-header-bg; + color: $white-color; + font-weight: $font-weight-bold; + font-size: $sb-modal-header-fsize; + padding: $block-padding-y-x; + border-bottom: 0 solid $gray-100; //@include size(auto,($base-block-space * 5)); //bourbon + min-height: ($base-block-space * 5); + line-height: ($h5-font-size + 8); } .sb-modal-content { - height: calc(100vh - 120px); - } - } - &.small { - color: $text-lightDark; - } - - - &.small { - max-width: 300px; - } - - &.normal { - max-width: 720px; - .content { - max-height: 380px; + min-height: 100px; + padding: $block-padding-xy; } - } - - &.large { - max-width: 100%; - top: 0 !important; - - .content { - height: calc(100vh - 100px); + .close { + color: $white-color; + font-size: $font-size-base; + @include padding(0 0); //bourbon + @include margin(0 0); + @include size(($base-block-space * 5), ($base-block-space * 5)); //bourbon + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + @include position(absolute, 0 0 null null); //bourbon + } + .sb-modal-actions { + padding: $block-padding-y-x; + background: $sb-modal-actions-bg; + border-top: 1px solid $gray-100; + min-height: ($base-block-space * 7); + display: flex; + flex-direction: row-reverse; + align-items: center; + } + .sb-modal-fullscreen { + @include position(fixed, 0 0 0 0); //bourbon + width: 100%; + margin: 0; + overflow-y: auto; + overflow-x: hidden; + .sb-modal-header { + height: 4rem; + width: auto; + border-radius: 0px; + display: flex; + justify-content: space-between; + } + .sb-modal-content { + height: calc(100vh - 120px); + } + } + .small { + color: $text-lightDark; + } + &.small { + max-width: 480px; + } + &.normal { + max-width: 720px; + .content { + max-height: 380px; + } + } + &.large { + max-width: 900px; + .content { + height: calc(100vh - 100px); + } + } + } + // sb modal confirmation/alert styles + &.sb-warning .ui.modal{ + .sb-modal-header { + background-color: $sb-modal-header-bg-warning; + } + } + &.sb-success .ui.modal{ + .sb-modal-header { + background-color: $sb-modal-header-bg-success; + } + } + &.sb-error .ui.modal{ + .sb-modal-header { + background-color: $sb-modal-header-bg-error; } - } } } -[dir="rtl"] .sb-modal .ui.modal > .close{ +[dir="rtl"] .sb-modal .ui.modal>.close { right: auto; left: 0; } -.modals.dimmer .ui.scrolling.modal { - position: absolute!important; - margin: 0 !important; -} @include respond-below(sm) { .sb-modal { - .ui.modal { - position: absolute; - width: 95%; - margin: 0 auto !important; - top:50%; - transform: translate(0, -50%); - height:inherit; - .close { - top: 0 !important; - right: 0 !important; - } - .sb-modal-actions{ - padding:$block-padding-y-x; - } - } - .ui.modal .scrolling.content { - max-height: calc(100vh - 10rem); - overflow: auto; - } - .ui.page.dimmer { - display: flex !important; - align-items: center; - justify-content: center; - } - } - } \ No newline at end of file + .ui.modal { + position: absolute; + width: 95%; + margin: 0 auto !important; + top: 50%; + transform: translate(0, -50%); + height: inherit; + &>.close { + top: 0 !important; + right: 0 !important; + } + &>.sb-modal-actions { + padding: $block-padding-y-x; + } + } + .ui.modal .scrolling.content { + max-height: calc(100vh - 10rem); + overflow: auto; + } + .ui.page.dimmer { + display: flex !important; + align-items: center; + justify-content: center; + } + } +} diff --git a/reusables/_buttons.scss b/reusables/_buttons.scss index b52eb52..7a58ca1 100644 --- a/reusables/_buttons.scss +++ b/reusables/_buttons.scss @@ -1,3 +1,154 @@ +/* buttons sytle guide */ +// Specificity overrides +input[type="submit"], +input[type="reset"], +input[type="button"] { + &.btn-block { + width: 100%; + } +} + +// base button styles +.sb-btn { + -webkit-tap-highlight-color: transparent; + user-select: none; + outline: 0; + display: inline-block; + margin-left: 0.25rem; + border: 1px solid; + cursor:pointer; + color: $white-color; + @include margin(0px 0px 0px 8px); + min-width:($base-block-space * 8); + line-height: normal; + @include border-radius(3px); + text: { + transform: capitalize; + decoration: none; + } +} +// button lin +.sb-btn-link { + background:none; + border:0; + text-decoration: underline; + &:hover { + font-weight:$font-weight-bold; + } + +} +// button sizes +.sb-btn-xs, .sb-btn-normal, .sb-btn-sm,.sb-btn-md { + padding: ($base-block-space * 1) ($base-block-space * 2); +} +.sb-btn-xs { + height:($base-block-space * 3); + padding: ($base-block-space * 1); + font-size:$font-size-sm; +} +.sb-btn-normal { + height:$base-btn-normal-height; + padding: $block-padding-y-x; + font-size:$font-size-sm; + @include border-radius(4px); +} +.sb-btn-sm { + height:($base-block-space * 5); + font-size:$font-size-normal; +} +.sb-btn-md { + height:($base-block-space * 6); + font-size:$font-size-md; +} +.sb-btn-lg { + height:($base-block-space * 7); + padding: ($base-block-space * 3); + font-size:$font-size-lg; +} +// disabled button +.sb-btn-disabled { + background-color: $gray-100; + color:$gray-200; + border:1px solid $gray-100; + cursor: not-allowed; +} +.sb-btn-outline-disabled { + background-color: $white-color; + color:$gray-100; + border:1px solid $gray-100; + cursor: not-allowed; +} +// default outline colored btns +.sb-btn-outline-primary{ + @include btn-theme-bgwhite($primary-color); +} +.sb-btn-outline-secondary{ + @include btn-theme-bgwhite($secondary-200); +} +.sb-btn-outline-tertiary{ + @include btn-theme-bgwhite($tertiary-color); +} +// status outline buttons +.sb-btn-outline-info{ + @include btn-theme-bgwhite($primary-color); +} +.sb-btn-outline-success{ + @include btn-theme-bgwhite($secondary-200); +} +.sb-btn-outline-warning{ + @include btn-theme-bgwhite($tertiary-color); +} +.sb-btn-outline-error{ + @include btn-theme-bgwhite($red); +} +.sb-btn-outline-gray{ + @include btn-theme-bgwhite($gray-800); +} +// default colored btns +.sb-btn-primary,.sb-btn-info{ + @include btn-theme($primary-color); + &:hover,&:active { + background: $primary-800; + } +} +.sb-btn-secondary,.sb-btn-success{ + @include btn-theme($secondary-200); + &:hover,&:active { + background: $secondary-400; + } +} +.sb-btn-tertiary,.sb-btn-warning{ + @include btn-theme($tertiary-color); + &:hover,&:active { + background: $tertiary-400; + } +} +.sb-btn-success{ + @include btn-theme($success-color); + &:hover,&:active { + background: $secondary-400; + } +} +.sb-btn-info{ + @include btn-theme($info-color); + &:hover,&:active { + background: $primary-800; + } +} +.sb-btn-warning{ + @include btn-theme($warning-color); + &:hover,&:active { + background: $tertiary-400; + } +} +.sb-btn-error{ + @include btn-theme($danger-color); + &:hover,&:active { + background: $red-400; + } +} + +// to cleanup .ui.dodger-blue.basic.label { border: 1px solid $primary-color !important; border-radius: 4px; From 28ac5b23754554f44b3dfdd6eb66a3b37f7a012b Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Mon, 18 Feb 2019 13:25:07 +0530 Subject: [PATCH 09/17] 1.0.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cd895d9..a99e6ad 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sunbird-ui-components", - "version": "1.0.3", + "version": "1.0.4", "description": "Repository of common Sunbird UI components which are used across all Sunbird apps", "main": "gulpfile.js", "dependencies": {}, From a07a01e279e37770905634eb3ab92151e7690fe0 Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Mon, 18 Feb 2019 14:45:23 +0530 Subject: [PATCH 10/17] Design system variables name changes --- _variables.scss | 2 +- component/_buttons.scss | 164 ++++++++++++++++++--- dist/sb-components.css | 305 +++++++++++++++++++++++++++++----------- reusables/_buttons.scss | 151 -------------------- sb-components.scss | 2 +- 5 files changed, 370 insertions(+), 254 deletions(-) diff --git a/_variables.scss b/_variables.scss index a5112a9..2d455a4 100644 --- a/_variables.scss +++ b/_variables.scss @@ -208,4 +208,4 @@ $primary-border: 0.5px solid rgba(216, 216, 216, 0.5); $primary-background: rgba(216, 216, 216, 0.5); $card-label-border-color: rgba(2, 79, 157, 0.5); $dull-color: #b7d8f1; -$qr-btn: #edf4f9; \ No newline at end of file +$qr-btn: #edf4f9; diff --git a/component/_buttons.scss b/component/_buttons.scss index f7909c8..450dcce 100644 --- a/component/_buttons.scss +++ b/component/_buttons.scss @@ -1,4 +1,4 @@ -// buttons +/* buttons sytle guide */ // Specificity overrides input[type="submit"], input[type="reset"], @@ -7,19 +7,21 @@ input[type="button"] { width: 100%; } } + // base button styles .sb-btn { -webkit-tap-highlight-color: transparent; - -webkit-appearance: button; user-select: none; outline: 0; display: inline-block; margin-left: 0.25rem; border: 1px solid; - color:#fff; cursor:pointer; - margin:0px 0px 0px 8px; + color: $white-color; + @include margin(0px 0px 0px 8px); min-width:($base-block-space * 8); + line-height: normal; + @include border-radius(3px); text: { transform: capitalize; decoration: none; @@ -36,11 +38,13 @@ input[type="button"] { } // button sizes -.sb-btn-small { - height:$base-btn-small-height; - padding: ($base-block-space * .5) ($base-block-space * 2); - font-size:$font-size-xs; - @include border-radius(2px); +.sb-btn-xs, .sb-btn-normal, .sb-btn-sm,.sb-btn-md { + padding: ($base-block-space * 1) ($base-block-space * 2); +} +.sb-btn-xs { + height:($base-block-space * 3); + padding: ($base-block-space * 1); + font-size:$font-size-sm; } .sb-btn-normal { height:$base-btn-normal-height; @@ -48,11 +52,18 @@ input[type="button"] { font-size:$font-size-sm; @include border-radius(4px); } -.sb-btn-big { - height:$base-btn-big-height; - padding: $block-padding-y-x; - font-size:$font-size-normal; - @include border-radius(6px); +.sb-btn-sm { + height:($base-block-space * 5); + font-size:$font-size-normal; +} +.sb-btn-md { + height:($base-block-space * 6); + font-size:$font-size-md; +} +.sb-btn-lg { + height:($base-block-space * 7); + padding: ($base-block-space * 3); + font-size:$font-size-lg; } // disabled button .sb-btn-disabled { @@ -72,7 +83,7 @@ input[type="button"] { @include btn-theme-bgwhite($primary-color); } .sb-btn-outline-secondary{ - @include btn-theme-bgwhite($secondary-color); + @include btn-theme-bgwhite($secondary-200); } .sb-btn-outline-tertiary{ @include btn-theme-bgwhite($tertiary-color); @@ -82,7 +93,7 @@ input[type="button"] { @include btn-theme-bgwhite($primary-color); } .sb-btn-outline-success{ - @include btn-theme-bgwhite($secondary-color); + @include btn-theme-bgwhite($secondary-200); } .sb-btn-outline-warning{ @include btn-theme-bgwhite($tertiary-color); @@ -94,24 +105,135 @@ input[type="button"] { @include btn-theme-bgwhite($gray-800); } // default colored btns -.sb-btn-primary{ +.sb-btn-primary,.sb-btn-info{ @include btn-theme($primary-color); + &:hover,&:active { + background: $primary-800; + } } -.sb-btn-secondary{ - @include btn-theme($secondary-color); +.sb-btn-secondary,.sb-btn-success{ + @include btn-theme($secondary-200); + &:hover,&:active { + background: $secondary-400; + } } -.sb-btn-tertiary{ +.sb-btn-tertiary,.sb-btn-warning{ @include btn-theme($tertiary-color); + &:hover,&:active { + background: $tertiary-400; + } } .sb-btn-success{ @include btn-theme($success-color); + &:hover,&:active { + background: $secondary-400; + } } .sb-btn-info{ @include btn-theme($info-color); + &:hover,&:active { + background: $primary-800; + } } .sb-btn-warning{ @include btn-theme($warning-color); + &:hover,&:active { + background: $tertiary-400; + } } .sb-btn-error{ @include btn-theme($danger-color); -} \ No newline at end of file + &:hover,&:active { + background: $red-400; + } +} + +// to cleanup +.ui.dodger-blue.basic.label { + border: 1px solid $primary-color !important; + border-radius: 4px; + color: $primary-color; + font-size: 1rem; + font-weight: 300; + padding: 4px 16px; + +} +.ui.semi-circular.dodger-blue.basic.label { + border: 1px solid $primary-color !important; + border-radius: 18.5px; + color: $primary-color; + font-size: 1.16rem; + padding: 10px 27px; +} + +.ui.semi-circular.dodger-blue.button { + border: 1px solid $primary-color; + border-radius: 18.5px; + background: $primary-color; + color: #fff; + font-size: 1rem; + font-weight: 100; + padding: 6px 27px; +} + +.circular-placeholder { + border: 6px solid #fff; + background-color: #fff; + box-shadow: 0 0 6px 0 rgba(0,0,0,0.38); + border-radius: 100%; + height: 92px; + width: 92px; +} +.ui.button.rounded{ + border-radius: 20px; +} +.ui.explore.blue.button { + background-color: $primary-color; + padding: 10px 30px; +} +.ui.explore.blue.button:hover { + opacity: 0.8; +} +.ui.explore.blue.button:active { + opacity: 0.9; +} +.ui.basic.explore.blue.button { + background-color: #fff; + border: 0.5px solid $primary-color; + box-shadow: none; + color: $primary-color; + font-weight: 700; + height:36px; + padding: 10px 30px; +} +.ui.basic.explore.blue.button:hover { + opacity: 0.8; +} +.ui.basic.explore.blue.button:active { + opacity: 0.9; +} +.ui.blue.button, +.ui.blue.buttons .button{ + background-color: $primary-color !important; + color: #fff !important; +} +.ui.primary.button, +.ui.primary.buttons .button{ + background-color: $primary-color !important; + color: #fff !important; +} +.ui.basic.primary.button, +.ui.basic.primary.buttons .button{ + color: $primary-color !important; + background: transparent !important; +} +.ui.basic.blue.button, +.ui.basic.blue.buttons .button{ + color: $primary-color !important; + background: transparent !important; +} +.ui.red.label, +.ui.red.labels .label{ + background: $danger-color !important; + border-color: $danger-color !important; +} diff --git a/dist/sb-components.css b/dist/sb-components.css index 0ac83f9..8e2fdfb 100644 --- a/dist/sb-components.css +++ b/dist/sb-components.css @@ -1,3 +1,32 @@ +/* +// primary colors shades +$primary-0: lighten($primary-color,65%); // bg +$primary-100: lighten($primary-color,15%); // default button bg +$primary-200: lighten($primary-color,10%); // divider +$primary-300: lighten($primary-color,5%); // outline, focus fields +$primary-400: $primary-color; // button bg, heading, table titles, links, toggles +$primary-600: darken($primary-color,15%); // on press +$primary-800: darken($primary-color,30%); // hover +*/ +/* +// secondary colors shades +$secondary-0: lighten($secondary-color,50%); // toast bg +$secondary-100: lighten($secondary-color,15%); // buttong bg, toast +$secondary-200: lighten($secondary-color,10%); // button hover +$secondary-400: $secondary-color; // icon +*/ +/* +// tertiary colors shades +$tertiary-0: lighten($tertiary-color,50%); // toast bg +$tertiary-100: lighten($tertiary-color,15%); // buttong bg, toast +$tertiary-400: $tertiary-color; // icon, label, notification bg +*/ +/* +// red colors shades +$red-0: lighten($red,50%); // toast bg +$red-100: lighten($red,15%); // buttong bg, toast +$red-400: $red; // icon color, lable, notification bg +*/ html, body { height: 100%; @@ -763,8 +792,8 @@ input[type=number]::-webkit-outer-spin-button { .ui.red.label, .ui.red.labels .label { - background: #ff4558 !important; - border-color: #ff4558 !important; } + background: #FF6979 !important; + border-color: #FF6979 !important; } .d-flex { display: flex !important; } @@ -951,6 +980,7 @@ a { .o-y-scroll { overflow-y: scroll !important; } +/* buttons sytle guide */ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block { @@ -958,16 +988,19 @@ input[type="button"].btn-block { .sb-btn { -webkit-tap-highlight-color: transparent; - -webkit-appearance: button; user-select: none; outline: 0; display: inline-block; margin-left: 0.25rem; border: 1px solid; - color: #fff; cursor: pointer; - margin: 0px 0px 0px 8px; + color: #fff; + margin: 0 0 0 8px !important; min-width: 64px; + line-height: normal; + border-radius: 3px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; text-transform: capitalize; text-decoration: none; } @@ -978,33 +1011,38 @@ input[type="button"].btn-block { .sb-btn-link:hover { font-weight: 700; } -.sb-btn-small { +.sb-btn-xs, .sb-btn-normal, .sb-btn-sm, .sb-btn-md { + padding: 8px 16px; } + +.sb-btn-xs { height: 24px; - padding: 4px 16px; - font-size: 10.0002px; - border-radius: 2px; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; } + padding: 8px; + font-size: 11.9994px; } .sb-btn-normal { height: 32px; - padding: 8px 24px; + padding: 8px 16px; font-size: 11.9994px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } -.sb-btn-big { +.sb-btn-sm { height: 40px; - padding: 8px 24px; - font-size: 16.002px; - border-radius: 6px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; } + font-size: 14px; } + +.sb-btn-md { + height: 48px; + font-size: 16.002px; } + +.sb-btn-lg { + height: 56px; + padding: 24px; + font-size: 20.006px; } .sb-btn-disabled { background-color: #cccccc; - color: #969696; + color: #999999; border: 1px solid #cccccc; cursor: not-allowed; } @@ -1025,14 +1063,14 @@ input[type="button"].btn-block { border-color: #013b75; } .sb-btn-outline-secondary { - border-color: #007e3b; + border-color: #07b27a; background-color: #fff; - color: #008840; } + color: #07BC81; } .sb-btn-outline-secondary:hover { font-weight: bold; - border-color: #007e3b; } + border-color: #07b27a; } .sb-btn-outline-secondary:active { - border-color: #005f2d; } + border-color: #069566; } .sb-btn-outline-tertiary { border-color: #e4531f; @@ -1055,14 +1093,14 @@ input[type="button"].btn-block { border-color: #013b75; } .sb-btn-outline-success { - border-color: #007e3b; + border-color: #07b27a; background-color: #fff; - color: #008840; } + color: #07BC81; } .sb-btn-outline-success:hover { font-weight: bold; - border-color: #007e3b; } + border-color: #07b27a; } .sb-btn-outline-success:active { - border-color: #005f2d; } + border-color: #069566; } .sb-btn-outline-warning { border-color: #e4531f; @@ -1094,37 +1132,45 @@ input[type="button"].btn-block { .sb-btn-outline-gray:active { border-color: #1f1f1f; } -.sb-btn-primary { +.sb-btn-primary, .sb-btn-info { border-color: #024f9d; background-color: #024f9d; } - .sb-btn-primary:hover { + .sb-btn-primary:hover, .sb-btn-info:hover { background-color: #02407f; } - .sb-btn-primary:active { + .sb-btn-primary:active, .sb-btn-info:active { background-color: #012951; } - -.sb-btn-secondary { - border-color: #008840; - background-color: #008840; } - .sb-btn-secondary:hover { - background-color: #006932; } - .sb-btn-secondary:active { - background-color: #003c1c; } - -.sb-btn-tertiary { + .sb-btn-primary:hover, .sb-btn-primary:active, .sb-btn-info:hover, .sb-btn-info:active { + background: #002E50; } + +.sb-btn-secondary, .sb-btn-success { + border-color: #07BC81; + background-color: #07BC81; } + .sb-btn-secondary:hover, .sb-btn-success:hover { + background-color: #069e6d; } + .sb-btn-secondary:active, .sb-btn-success:active { + background-color: #04724e; } + .sb-btn-secondary:hover, .sb-btn-secondary:active, .sb-btn-success:hover, .sb-btn-success:active { + background: #008840; } + +.sb-btn-tertiary, .sb-btn-warning { border-color: #e55a28; background-color: #e55a28; } - .sb-btn-tertiary:hover { + .sb-btn-tertiary:hover, .sb-btn-warning:hover { background-color: #d54b1a; } - .sb-btn-tertiary:active { + .sb-btn-tertiary:active, .sb-btn-warning:active { background-color: #ac3d15; } + .sb-btn-tertiary:hover, .sb-btn-tertiary:active, .sb-btn-warning:hover, .sb-btn-warning:active { + background: #e55a28; } .sb-btn-success { - border-color: #008840; - background-color: #008840; } + border-color: #07BC81; + background-color: #07BC81; } .sb-btn-success:hover { - background-color: #006932; } + background-color: #069e6d; } .sb-btn-success:active { - background-color: #003c1c; } + background-color: #04724e; } + .sb-btn-success:hover, .sb-btn-success:active { + background: #008840; } .sb-btn-info { border-color: #024f9d; @@ -1133,27 +1179,120 @@ input[type="button"].btn-block { background-color: #02407f; } .sb-btn-info:active { background-color: #012951; } + .sb-btn-info:hover, .sb-btn-info:active { + background: #002E50; } .sb-btn-warning { - border-color: #e55a28; - background-color: #e55a28; } + border-color: #FFA11D; + background-color: #FFA11D; } .sb-btn-warning:hover { - background-color: #d54b1a; } + background-color: #fd9400; } .sb-btn-warning:active { - background-color: #ac3d15; } + background-color: #d07900; } + .sb-btn-warning:hover, .sb-btn-warning:active { + background: #e55a28; } .sb-btn-error { - border-color: #ff4558; - background-color: #ff4558; } + border-color: #FF6979; + background-color: #FF6979; } .sb-btn-error:hover { - background-color: #ff263d; } + background-color: #ff4a5e; } .sb-btn-error:active { - background-color: #f80019; } + background-color: #ff1d35; } + .sb-btn-error:hover, .sb-btn-error:active { + background: #ff4558; } + +.ui.dodger-blue.basic.label { + border: 1px solid #024f9d !important; + border-radius: 4px; + color: #024f9d; + font-size: 1rem; + font-weight: 300; + padding: 4px 16px; } + +.ui.semi-circular.dodger-blue.basic.label { + border: 1px solid #024f9d !important; + border-radius: 18.5px; + color: #024f9d; + font-size: 1.16rem; + padding: 10px 27px; } + +.ui.semi-circular.dodger-blue.button { + border: 1px solid #024f9d; + border-radius: 18.5px; + background: #024f9d; + color: #fff; + font-size: 1rem; + font-weight: 100; + padding: 6px 27px; } + +.circular-placeholder { + border: 6px solid #fff; + background-color: #fff; + box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.38); + border-radius: 100%; + height: 92px; + width: 92px; } + +.ui.button.rounded { + border-radius: 20px; } + +.ui.explore.blue.button { + background-color: #024f9d; + padding: 10px 30px; } + +.ui.explore.blue.button:hover { + opacity: 0.8; } + +.ui.explore.blue.button:active { + opacity: 0.9; } +.ui.basic.explore.blue.button { + background-color: #fff; + border: 0.5px solid #024f9d; + box-shadow: none; + color: #024f9d; + font-weight: 700; + height: 36px; + padding: 10px 30px; } + +.ui.basic.explore.blue.button:hover { + opacity: 0.8; } + +.ui.basic.explore.blue.button:active { + opacity: 0.9; } + +.ui.blue.button, +.ui.blue.buttons .button { + background-color: #024f9d !important; + color: #fff !important; } + +.ui.primary.button, +.ui.primary.buttons .button { + background-color: #024f9d !important; + color: #fff !important; } + +.ui.basic.primary.button, +.ui.basic.primary.buttons .button { + color: #024f9d !important; + background: transparent !important; } + +.ui.basic.blue.button, +.ui.basic.blue.buttons .button { + color: #024f9d !important; + background: transparent !important; } + +.ui.red.label, +.ui.red.labels .label { + background: #FF6979 !important; + border-color: #FF6979 !important; } + +/* modal styles */ .sb-modal .ui.modal { - margin: 0 auto; - left: 0; + margin: 3.5rem auto 0 !important; + top: 0; right: 0; + left: 0; height: auto; width: 100%; } .sb-modal .ui.modal .sb-modal-header { @@ -1161,73 +1300,79 @@ input[type="button"].btn-block { color: #fff; font-weight: 700; font-size: 16.002px; - padding: 8px 24px; + padding: 8px 16px; border-bottom: 0 solid #cccccc; min-height: 40px; line-height: 24.002px; } .sb-modal .ui.modal .sb-modal-content { min-height: 100px; - padding: 24px; } + padding: 16px; } .sb-modal .ui.modal .close { color: #fff; - top: 0; - right: 0; font-size: 14px; - padding: 0; - margin: 0; + padding: 0 !important; + margin: 0 !important; height: 40px; width: 40px; display: flex; align-items: center; - justify-content: center; } + justify-content: center; + cursor: pointer; + position: absolute; + top: 0; + right: 0; } .sb-modal .ui.modal .sb-modal-actions { - padding: 8px 24px; + padding: 8px 16px; background: #fff; border-top: 1px solid #cccccc; min-height: 56px; display: flex; flex-direction: row-reverse; align-items: center; } - .sb-modal .ui.modal.sb-modal-fullscreen { - top: 0; + .sb-modal .ui.modal .sb-modal-fullscreen { position: fixed; + top: 0; + right: 0; bottom: 0; left: 0; - right: 0; width: 100%; margin: 0; overflow-y: auto; overflow-x: hidden; } - .sb-modal .ui.modal.sb-modal-fullscreen .sb-modal-header { + .sb-modal .ui.modal .sb-modal-fullscreen .sb-modal-header { height: 4rem; width: auto; border-radius: 0px; display: flex; justify-content: space-between; } - .sb-modal .ui.modal.sb-modal-fullscreen .sb-modal-content { + .sb-modal .ui.modal .sb-modal-fullscreen .sb-modal-content { height: calc(100vh - 120px); } - .sb-modal .ui.modal.small { + .sb-modal .ui.modal .small { color: #666; } .sb-modal .ui.modal.small { - max-width: 300px; } + max-width: 480px; } .sb-modal .ui.modal.normal { max-width: 720px; } .sb-modal .ui.modal.normal .content { max-height: 380px; } .sb-modal .ui.modal.large { - max-width: 100%; - top: 0 !important; } + max-width: 900px; } .sb-modal .ui.modal.large .content { height: calc(100vh - 100px); } +.sb-modal.sb-warning .ui.modal .sb-modal-header { + background-color: #e55a28; } + +.sb-modal.sb-success .ui.modal .sb-modal-header { + background-color: #07BC81; } + +.sb-modal.sb-error .ui.modal .sb-modal-header { + background-color: #ff4558; } + [dir="rtl"] .sb-modal .ui.modal > .close { right: auto; left: 0; } -.modals.dimmer .ui.scrolling.modal { - position: absolute !important; - margin: 0 !important; } - @media (max-width: 767px) { .sb-modal .ui.modal { position: absolute; @@ -1236,11 +1381,11 @@ input[type="button"].btn-block { top: 50%; transform: translate(0, -50%); height: inherit; } - .sb-modal .ui.modal .close { + .sb-modal .ui.modal > .close { top: 0 !important; right: 0 !important; } - .sb-modal .ui.modal .sb-modal-actions { - padding: 8px 24px; } + .sb-modal .ui.modal > .sb-modal-actions { + padding: 8px 16px; } .sb-modal .ui.modal .scrolling.content { max-height: calc(100vh - 10rem); overflow: auto; } diff --git a/reusables/_buttons.scss b/reusables/_buttons.scss index 7a58ca1..b52eb52 100644 --- a/reusables/_buttons.scss +++ b/reusables/_buttons.scss @@ -1,154 +1,3 @@ -/* buttons sytle guide */ -// Specificity overrides -input[type="submit"], -input[type="reset"], -input[type="button"] { - &.btn-block { - width: 100%; - } -} - -// base button styles -.sb-btn { - -webkit-tap-highlight-color: transparent; - user-select: none; - outline: 0; - display: inline-block; - margin-left: 0.25rem; - border: 1px solid; - cursor:pointer; - color: $white-color; - @include margin(0px 0px 0px 8px); - min-width:($base-block-space * 8); - line-height: normal; - @include border-radius(3px); - text: { - transform: capitalize; - decoration: none; - } -} -// button lin -.sb-btn-link { - background:none; - border:0; - text-decoration: underline; - &:hover { - font-weight:$font-weight-bold; - } - -} -// button sizes -.sb-btn-xs, .sb-btn-normal, .sb-btn-sm,.sb-btn-md { - padding: ($base-block-space * 1) ($base-block-space * 2); -} -.sb-btn-xs { - height:($base-block-space * 3); - padding: ($base-block-space * 1); - font-size:$font-size-sm; -} -.sb-btn-normal { - height:$base-btn-normal-height; - padding: $block-padding-y-x; - font-size:$font-size-sm; - @include border-radius(4px); -} -.sb-btn-sm { - height:($base-block-space * 5); - font-size:$font-size-normal; -} -.sb-btn-md { - height:($base-block-space * 6); - font-size:$font-size-md; -} -.sb-btn-lg { - height:($base-block-space * 7); - padding: ($base-block-space * 3); - font-size:$font-size-lg; -} -// disabled button -.sb-btn-disabled { - background-color: $gray-100; - color:$gray-200; - border:1px solid $gray-100; - cursor: not-allowed; -} -.sb-btn-outline-disabled { - background-color: $white-color; - color:$gray-100; - border:1px solid $gray-100; - cursor: not-allowed; -} -// default outline colored btns -.sb-btn-outline-primary{ - @include btn-theme-bgwhite($primary-color); -} -.sb-btn-outline-secondary{ - @include btn-theme-bgwhite($secondary-200); -} -.sb-btn-outline-tertiary{ - @include btn-theme-bgwhite($tertiary-color); -} -// status outline buttons -.sb-btn-outline-info{ - @include btn-theme-bgwhite($primary-color); -} -.sb-btn-outline-success{ - @include btn-theme-bgwhite($secondary-200); -} -.sb-btn-outline-warning{ - @include btn-theme-bgwhite($tertiary-color); -} -.sb-btn-outline-error{ - @include btn-theme-bgwhite($red); -} -.sb-btn-outline-gray{ - @include btn-theme-bgwhite($gray-800); -} -// default colored btns -.sb-btn-primary,.sb-btn-info{ - @include btn-theme($primary-color); - &:hover,&:active { - background: $primary-800; - } -} -.sb-btn-secondary,.sb-btn-success{ - @include btn-theme($secondary-200); - &:hover,&:active { - background: $secondary-400; - } -} -.sb-btn-tertiary,.sb-btn-warning{ - @include btn-theme($tertiary-color); - &:hover,&:active { - background: $tertiary-400; - } -} -.sb-btn-success{ - @include btn-theme($success-color); - &:hover,&:active { - background: $secondary-400; - } -} -.sb-btn-info{ - @include btn-theme($info-color); - &:hover,&:active { - background: $primary-800; - } -} -.sb-btn-warning{ - @include btn-theme($warning-color); - &:hover,&:active { - background: $tertiary-400; - } -} -.sb-btn-error{ - @include btn-theme($danger-color); - &:hover,&:active { - background: $red-400; - } -} - -// to cleanup .ui.dodger-blue.basic.label { border: 1px solid $primary-color !important; border-radius: 4px; diff --git a/sb-components.scss b/sb-components.scss index adf1ad5..dd2c2f2 100644 --- a/sb-components.scss +++ b/sb-components.scss @@ -2,8 +2,8 @@ @import "./global"; // base structure -@import "./reusables/reusables"; @import "./mixins/mixins"; +@import "./reusables/reusables"; @import "./base/base"; @import "./component/component"; @import "./helpers/helpers"; From 7cc389519b4d4ccafaea47b82dd1be1d547838eb Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Mon, 18 Feb 2019 14:45:47 +0530 Subject: [PATCH 11/17] 1.0.5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a99e6ad..c5fb09e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sunbird-ui-components", - "version": "1.0.4", + "version": "1.0.5", "description": "Repository of common Sunbird UI components which are used across all Sunbird apps", "main": "gulpfile.js", "dependencies": {}, From 63371182b40fc77fc6d0a3c6a387da01487ae992 Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Wed, 20 Feb 2019 14:26:01 +0530 Subject: [PATCH 12/17] Issue #SB-10394 feat: css changes sunbird ui components --- component/_buttons.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/component/_buttons.scss b/component/_buttons.scss index 450dcce..224a843 100644 --- a/component/_buttons.scss +++ b/component/_buttons.scss @@ -43,7 +43,7 @@ input[type="button"] { } .sb-btn-xs { height:($base-block-space * 3); - padding: ($base-block-space * 1); + padding:($base-block-space * 0) ($base-block-space * 1); font-size:$font-size-sm; } .sb-btn-normal { @@ -62,7 +62,7 @@ input[type="button"] { } .sb-btn-lg { height:($base-block-space * 7); - padding: ($base-block-space * 3); + padding: ($base-block-space * 0) ($base-block-space * 3); font-size:$font-size-lg; } // disabled button From 1559d606123bde8784bdc3827a4acd4da109a49d Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Wed, 20 Feb 2019 14:26:57 +0530 Subject: [PATCH 13/17] Issue #SB-10394 feat: css changes sunbird ui components --- dist/sb-components.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/sb-components.css b/dist/sb-components.css index 8e2fdfb..cab0be9 100644 --- a/dist/sb-components.css +++ b/dist/sb-components.css @@ -1016,7 +1016,7 @@ input[type="button"].btn-block { .sb-btn-xs { height: 24px; - padding: 8px; + padding: 0px 8px; font-size: 11.9994px; } .sb-btn-normal { @@ -1037,7 +1037,7 @@ input[type="button"].btn-block { .sb-btn-lg { height: 56px; - padding: 24px; + padding: 0px 24px; font-size: 20.006px; } .sb-btn-disabled { From c49777c8d63ee4b172d5ae6f846afc9447e4d6a8 Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Wed, 20 Feb 2019 14:27:35 +0530 Subject: [PATCH 14/17] 1.0.6 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c5fb09e..28f25ad 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sunbird-ui-components", - "version": "1.0.5", + "version": "1.0.6", "description": "Repository of common Sunbird UI components which are used across all Sunbird apps", "main": "gulpfile.js", "dependencies": {}, From f9f7facec36659bed1d0035d48bc70d3534916b2 Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Wed, 27 Feb 2019 14:10:31 +0530 Subject: [PATCH 15/17] Issue fix: modal issues fixed for fullscreen --- component/_modal.scss | 4 ++-- dist/sb-components.css | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/component/_modal.scss b/component/_modal.scss index d8b2624..b324403 100644 --- a/component/_modal.scss +++ b/component/_modal.scss @@ -39,10 +39,10 @@ flex-direction: row-reverse; align-items: center; } - .sb-modal-fullscreen { + &.sb-modal-fullscreen { @include position(fixed, 0 0 0 0); //bourbon width: 100%; - margin: 0; + margin: 0 !important; overflow-y: auto; overflow-x: hidden; .sb-modal-header { diff --git a/dist/sb-components.css b/dist/sb-components.css index cab0be9..e77a006 100644 --- a/dist/sb-components.css +++ b/dist/sb-components.css @@ -1329,23 +1329,23 @@ input[type="button"].btn-block { display: flex; flex-direction: row-reverse; align-items: center; } - .sb-modal .ui.modal .sb-modal-fullscreen { + .sb-modal .ui.modal.sb-modal-fullscreen { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; - margin: 0; + margin: 0 !important; overflow-y: auto; overflow-x: hidden; } - .sb-modal .ui.modal .sb-modal-fullscreen .sb-modal-header { + .sb-modal .ui.modal.sb-modal-fullscreen .sb-modal-header { height: 4rem; width: auto; border-radius: 0px; display: flex; justify-content: space-between; } - .sb-modal .ui.modal .sb-modal-fullscreen .sb-modal-content { + .sb-modal .ui.modal.sb-modal-fullscreen .sb-modal-content { height: calc(100vh - 120px); } .sb-modal .ui.modal .small { color: #666; } From 1457f6c78aae4fd5d8742a79d6428ff8c1ffd6fd Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Wed, 27 Feb 2019 14:12:30 +0530 Subject: [PATCH 16/17] 1.0.7 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 28f25ad..e62fb09 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sunbird-ui-components", - "version": "1.0.6", + "version": "1.0.7", "description": "Repository of common Sunbird UI components which are used across all Sunbird apps", "main": "gulpfile.js", "dependencies": {}, From 429f62a8a68b5024eb5fc2aab2c3174dbe5a67a3 Mon Sep 17 00:00:00 2001 From: prajwal88 Date: Wed, 27 Feb 2019 14:48:09 +0530 Subject: [PATCH 17/17] Issue fix: modal issues fixed for fullscreen --- component/_modal.scss | 4 ++++ dist/sb-components.css | 3 +++ 2 files changed, 7 insertions(+) diff --git a/component/_modal.scss b/component/_modal.scss index b324403..3f6d56d 100644 --- a/component/_modal.scss +++ b/component/_modal.scss @@ -46,6 +46,7 @@ overflow-y: auto; overflow-x: hidden; .sb-modal-header { + align-items: center; height: 4rem; width: auto; border-radius: 0px; @@ -55,6 +56,9 @@ .sb-modal-content { height: calc(100vh - 120px); } + .close { + position: relative; + } } .small { color: $text-lightDark; diff --git a/dist/sb-components.css b/dist/sb-components.css index e77a006..09cfa18 100644 --- a/dist/sb-components.css +++ b/dist/sb-components.css @@ -1340,6 +1340,7 @@ input[type="button"].btn-block { overflow-y: auto; overflow-x: hidden; } .sb-modal .ui.modal.sb-modal-fullscreen .sb-modal-header { + align-items: center; height: 4rem; width: auto; border-radius: 0px; @@ -1347,6 +1348,8 @@ input[type="button"].btn-block { justify-content: space-between; } .sb-modal .ui.modal.sb-modal-fullscreen .sb-modal-content { height: calc(100vh - 120px); } + .sb-modal .ui.modal.sb-modal-fullscreen .close { + position: relative; } .sb-modal .ui.modal .small { color: #666; } .sb-modal .ui.modal.small {