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