From 0e7202b57ad954598c20c1d04311a03175cce0fc Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 7 Jul 2014 13:41:25 -0400 Subject: [PATCH] Fixes modal variables for background color, border. Fixes missing background on modal actions, makes border radius more consistent for different content arrangements --- src/definitions/modules/modal.less | 36 +++++++++++-------- .../packages/default/modules/modal.variables | 11 ++++-- 2 files changed, 29 insertions(+), 18 deletions(-) diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less index c52e92991..2d42c6386 100755 --- a/src/definitions/modules/modal.less +++ b/src/definitions/modules/modal.less @@ -42,6 +42,15 @@ user-select: text; } +.ui.modal > :first-child { + border-top-left-radius: @borderRadius; + border-top-right-radius: @borderRadius; +} + +.ui.modal > :last-child { + border-bottom-left-radius: @borderRadius; + border-bottom-right-radius: @borderRadius; +} /******************************* Content @@ -83,10 +92,7 @@ font-size: @headerFontSize; font-weight: @headerFontWeight; - border-bottom: @headerBottomBorder; - - border-top-left-radius: @borderRadius; - border-top-right-radius: @borderRadius; + border-bottom: @headerBorder; } /*-------------- @@ -101,23 +107,19 @@ line-height: @contentLineHeight; padding: @contentPadding; background: @contentBackground; - - border-bottom-left-radius: @borderRadius; - border-bottom-right-radius: @borderRadius; -} -.ui.modal > .content:only-child { - border-radius: @borderRadius; } .ui.modal > .content > .image { display: table-cell; padding-right: @imagePadding; min-width: @imageMinWidth; + vertical-align: @imageVerticalAlign; } .ui.modal > .content > .description { display: table-cell; vertical-align: top; padding-left: @descriptionPadding; min-width: @descriptionMinWidth; + vertical-align: @descriptionVerticalAlign; } /*rtl:ignore*/ .ui.modal > .content > .image > i.icon { @@ -130,8 +132,10 @@ ---------------*/ .ui.modal .actions { + background: @actionBackground; padding: @actionPadding; - text-align: right; + border-top: @actionBorder; + text-align: @actionAlign; } .ui.modal .actions > .button { margin-left: @buttonDistance; @@ -217,15 +221,18 @@ .ui.basic.modal { background-color: transparent; border: none; + box-shadow: none; color: @basicModalColor; } +.ui.basic.modal > .header, +.ui.basic.modal > .content, +.ui.basic.modal > .actions { + background-color: transparent; +} .ui.basic.modal > .close { top: @basicModalCloseTop; right: @basicModalCloseRight; } -.ui.basic.modal .content { - background-color: transparent; -} /******************************* Variations @@ -237,7 +244,6 @@ margin-top: @scrollingTopMargin; } - /******************************* States *******************************/ diff --git a/src/themes/packages/default/modules/modal.variables b/src/themes/packages/default/modules/modal.variables index b55b2bd61..9b74c5fb5 100755 --- a/src/themes/packages/default/modules/modal.variables +++ b/src/themes/packages/default/modules/modal.variables @@ -27,25 +27,30 @@ @headerFontSize: 1.6em; @headerFontWeight: bold; @headerFontFamily: @headerFont; -@headerBottomBorder: none; +@headerBorder: 1px solid @borderColor; /* Content */ @contentFontSize: 1em; @contentPadding: 2rem; @contentLineHeight: 1.4; -@contentBackground: #F4F4F4; +@contentBackground: #FFFFFF; /* Left / Right */ @imageMinWidth: 25%; @imagePadding: 1em; - @imageIconSize: 8rem; +@imageVerticalAlign: top; @descriptionPadding: 1em; @descriptionMinWidth: ''; +@descriptionVerticalAlign: top; /* Modal Actions */ +@actionBorder: 1px solid @borderColor; +@actionBackground: #EFEFEF; @actionPadding: 1rem 2rem; +@actionAlign: right; + @buttonDistance: 0.75em; /* Mobile Positions */