Commit e3684c0e authored by Pedro Eduardo Trujillo's avatar Pedro Eduardo Trujillo
Browse files

Retoca elementos relacionados con formulario 

Mejora comportamiento responsive de formularios, barras y botones
asociados.
parent bf65cc5d

src/Functions.styl

+0 −1
Original line number Diff line number Diff line
@@ -332,7 +332,6 @@ maximizeFont() 


flexible(orientacion, justificado, alineado)

	display flex

	flex-wrap nowrap

	if orientacion == h

		flex-direction row

	if orientacion == hr

src/layout/Dialog.styl

+26 −15
Original line number Diff line number Diff line
@@ -93,31 +93,42 @@ 
// Botonera



.keypad

	flexible h space-between center

	flexibleGrow 1

	display flex

	flex-flow row

	justify-content space-between

	align-items center

	flex-grow 1

	flex-wrap wrap

	noScroll()

	box-shadow $sombra-s rgba($white, $lowOpacity) !important

	border $borderType $color12

	fondo color $color5

	min-height 30px

	.left

		flexible h center center

		miniMargined h



	& > div

		display flex

		flex-flow row

		justify-content center

		align-items center

		miniMargined()



		.btnGroup

			flexible h left center

			display flex

			flex-flow row

			align-items center

			miniMargined h



	.left

		.btnGroup

			justify-content left



	.center

		flexible h center center

		miniMargined h

		.btnGroup

			flexible h center center

			miniMargined h

			justify-content center



	.right

		flexible h center center

		miniMargined h

		.btnGroup

			flexible h right center

			miniMargined h

			justify-content right





.backgroundNone

src/redmic-widgets/Map.styl

+3 −6
Original line number Diff line number Diff line 
.mapSearch

	height 15rem

	width 25rem

	height 12.75rem

	width 17rem

	margin 0

	border-radius 5px

	box-shadow 0 5px 10px rgba(0,0,0,0.2)
@@ -39,7 +39,4 @@ 


.mapSearchInput

	.leftContainer

		margin-top 5px

		align-items end

		label

			padding-top 2px
 
		align-self end

src/redmic/Containers.styl

+12 −5
Original line number Diff line number Diff line
@@ -310,7 +310,8 @@ body.uncollapsedSidebar 
		box-shadow 0 20px 10px -5px rgba(0,0,0,0.25)

		min-height 10rem



		.tabs, .right

		.tabs

		.right

			position absolute

			display flex

			right 5rem
@@ -355,7 +356,8 @@ body.uncollapsedSidebar 
		.right

			padding 0 1rem



			& > i, & > a

			& > i

			& > a

				color #fff

				margin 0 5px
@@ -369,7 +371,8 @@ body.uncollapsedSidebar 
			padding 6px

			border-radius 5px



			& > i, & > a

			& > i

			& > a

				color #fff

				padding 0 5px
@@ -429,7 +432,8 @@ body.uncollapsedSidebar 
			@extend .fHeight

			background linear-gradient(bottom, $colorGrayBlack, $color13)



		& > div, .moduleWindow

		& > div

		.moduleWindow

			display flex

			flex-direction column

			flex-grow 1
@@ -594,8 +598,11 @@ body.uncollapsedSidebar 
.marginBottomContainer

	margin-bottom 1rem



.compositeSearch, .compositeSearchInTooltip, .editorLayerStyle

.compositeSearch

.compositeSearchInTooltip

.editorLayerStyle

	@extend .fHeight

	display flex



.compositeSearchInTooltip

	max-width 30rem

src/redmic/Forms.styl

+78 −16
Original line number Diff line number Diff line
@@ -4,13 +4,17 @@ 




// Campos disabled

.dj_webkit .db .dijitTextBoxDisabled input, .dj_webkit .db textarea.dijitTextAreaDisabled

.dj_webkit .db .dijitTextBoxDisabled input

.dj_webkit .db textarea.dijitTextAreaDisabled

	color #8E8E8E



// Para ocultar los campos ocultos

.hiddenId

	noDisplay()



.formContainer

	max-height 100%



.formContainerWithKeypad

	display flex

	flex-direction column-reverse
@@ -21,7 +25,9 @@ 
	> div:last-child

		overflow auto

		display flex

		flex-flow column

		flex-grow 1

		height 100%



// Para todos los formularios

.form
@@ -33,20 +39,27 @@ 
	showScroll()

	padding 1rem

	width calc(100% - 2rem)

	display flex

	flex-flow column



	fieldset

		flex-grow 1

		width 100%

		noBorder()

		noPadding()

		margin-bottom $semi

		fondo none



	legend

		noBorder()

		fontSize $bigFontSize

		padding-left 10%

		color gold

		negrita()



		&:first-of-type

			padding-top $semi



	&.form-border

		border 1px solid #ccc
@@ -67,22 +80,33 @@ 
				label

					text-align right



.multiFieldsetForm

	flex-flow row

	flex-wrap wrap



	fieldset

		flex-basis 20rem



.inputContainer

	display flex

	flex-wrap wrap



	.leftContainer, .rightContainer

	.leftContainer

	.rightContainer

		display flex

		align-items center

		padding 3px



	.leftContainer

		flex 1 2 15rem

		flex-flow row-reverse

		flex-grow 1

		flex-basis 12rem

		justify-content flex-end

		padding-right 7px



		label

			margin-bottom 0

			text-align right

			text-align left



		.containerDisableSwitch

			padding-right 1rem
@@ -93,7 +117,8 @@ 
			cursor pointer



	.rightContainer

		flex 4 1 20rem

		flex-grow 4

		flex-basis 18rem



	&.noWrap

		flex-wrap nowrap
@@ -104,9 +129,10 @@ 


.form-vertical

	display flex

	padding-top 0 !important



	.dijitArrowButton

		padding 5px 10px !important

	padding-top 0 !important



.embedded

	.inputContainer
@@ -135,6 +161,7 @@ 


.geographicCoordinate

	padding 0



	> div

		margin-right 5px
@@ -154,6 +181,7 @@ 
.timeInput

	display flex

	justify-content center



	.unitContent

		display flex

		width 2.5rem
@@ -168,6 +196,7 @@ 
			border-radius 5px

		i:hover

			background-color $blue



	.unitSeparator

		display flex

		align-items center
@@ -175,16 +204,17 @@ 
	&.disable

		cursor not-allowed

		opacity .65



		.unitContent

			i:hover

				background-color initial



.inputLittleWidth

	> div

		max-width 25rem

		max-width 16rem



.textBoxLittleWidth

	max-width 35rem

	max-width 16rem

	position relative



.textBoxModWidthExpand
@@ -204,7 +234,8 @@ 
		.contentIcon

			font-size 2rem



		.contentIcon, .contentClear

		.contentIcon

		.contentClear

			width 2.2rem

			display flex

			justify-content space-around
@@ -212,13 +243,16 @@ 


		.contentClear

			cursor pointer



			i:hover

				color $blue



	.disable

		opacity 0.4

		.contentClick, .contentClear

		.contentClick

		.contentClear

			cursor not-allowed



			&:hover

				background-color initial

				color white
@@ -228,12 +262,14 @@ 
		padding-right 5rem !important





.textBoxModWidthExpand, .multiSelect

.textBoxModWidthExpand

.multiSelect

	.contentClick

		width 3.3rem

		display flex

		justify-content space-around

		cursor pointer



		&:hover

			background-color $blue
@@ -243,18 +279,24 @@ 
		border-radius 5px

		border 1px solid rgba($white, 0.7)

		padding 0.6rem 1rem



	.active

		background-color rgba(4,156,219,0.5)



	.disable

		opacity 0.4

		cursor not-allowed



		&:hover

			background-color initial



.colorRampSelect, .colorSelect

.colorRampSelect

.colorSelect

	@extend .multiSelect



	.contentClick

		width 100%



		.value

			height 1rem

			width 100%
@@ -264,6 +306,7 @@ 
	flex-direction row !important

	flex-wrap wrap

	border-radius 3px



	.unitColor

		flex-grow 1

		height 1rem
@@ -272,6 +315,7 @@ 
.dateRange

	.dijitTextBox

		width 21rem



	.textBoxModWidthExpand

	.additionalOptionInput

		right 0
@@ -280,6 +324,7 @@ 
	padding 0

	display flex

	align-items flex-start



	.containerOptions

		display flex

		flex-direction column
@@ -303,6 +348,7 @@ 
				background-color $blue

				border-radius 2px

				font-weight bold



				&:hover

					color inherit
@@ -321,6 +367,7 @@ 
			display flex

			justify-content center

			flex-direction row



			@media (max-width $media-low-size)

				flex-direction column
@@ -358,26 +405,33 @@ 
	flex-grow 1

	display flex

	flex-direction column-reverse



	.form-horizontal

		flex-grow 1

		display flex

		justify-content center

		padding-top 1rem



		fieldset

			@extend .fWidth



.dojoxColorPicker

	background-color $color13

	color white



	.dojoxColorPickerPreview

		border 1px solid rgba(255,255,255,0.5)



.selectOnPopup

	position relative

	input, .dijitInputContainer, .dijitDisabled



	input

	.dijitInputContainer

	.dijitDisabled

		color white !important

		opacity 1 !important

		cursor pointer !important



	.cleanInput

		position absolute

		top 10px
@@ -391,22 +445,29 @@ 


.dijitCalendar

	width 18rem



	.dijitCalendarMonthContainer

		.dijitButtonNode

			padding 3px 5px



	.dijitCalendarDateTemplate

		padding 1px 4px

	.dijitCalendarDateLabel,

	.dijitCalendarDayLabel,

	.dijitCalendarNextYear,



	.dijitCalendarDateLabel

	.dijitCalendarDayLabel

	.dijitCalendarNextYear

	.dijitCalendarPreviousYear

		font-size 12px



	.dijitDownArrowButton

		font-size 13px



	.dijitCalendarSelectedYear

		font-size 16px



	.dijitCalendarYearLabel

		margin-top 4px



	.dijitCalendarDayLabel

		padding-bottom 4px

		padding-top 0px
@@ -422,6 +483,7 @@ 


.containerImageLayerEdit

	cursor pointer



	img

		margin-bottom 2rem

		border-radius 5px