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

Trabaja tamaño de topbar y sidebar 

Usa dimensiones relativas y variables con @media queries.
Retoca detalles internos de topbar y sidebar.
parent 64717c38

src/Variables.styl

+8 −2
Original line number Diff line number Diff line
@@ -88,8 +88,14 @@ $mediumOpacity = 0.5 
$highOpacity = 0.7

$fullOpacity = 1

$radio-esquinas = 5px

$topbar-size = 39px

$sidebar-size = 76px

$topbar-default-size = 4rem

$topbar-high-size = 4.3rem

$topbar-medium-size = 4.6rem

$topbar-low-size = 4.9rem

$sidebar-default-size = 5.4rem

$sidebar-high-size = 5.7rem

$sidebar-default-size = 6rem

$sidebar-low-size = 6.3rem

$sidebar-secondary-size = 200px

$notificationbar-size = 400px

$borderSize = $nano

src/redmic/Notification.styl

+1 −2
Original line number Diff line number Diff line
@@ -65,10 +65,9 @@ 
		border-radius 5px



.containerNotificationSidebar

	@extend .contentDisplacedByTopbar

	position absolute

	top $topbar-size

	right 0

	height "calc(100% - %s)" % $topbar-size

	width $notificationbar-size

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

		width $notificationbar-size * 0.9

src/redmic/Sidebar.styl

+13 −20
Original line number Diff line number Diff line
@@ -2,23 +2,18 @@ 
	Plantilla para controlar las barras laterales de navegación.

*/



$sidebar-size-high-factor = 0.85

$sidebar-size-medium-factor = 0.75

$sidebar-size-low-factor = 0.65



.sidebarWidthSizing

	width $sidebar-size

	width $sidebar-default-size

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

		width $sidebar-size * $sidebar-size-high-factor

		width $sidebar-high-size

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

		width $sidebar-size * $sidebar-size-medium-factor

		width $sidebar-medium-size

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

		width $sidebar-size * $sidebar-size-low-factor

		width $sidebar-low-size



.mainSidebar

	@extend .sidebarWidthSizing

	top $topbar-size !important

	height "calc(100% - %s)" % $topbar-size !important

	@extend .contentDisplacedByTopbar

	padding 0



.main-nav-list
@@ -64,10 +59,9 @@ $sidebar-size-low-factor = 0.65 
	nav.primarySidebar

		@extend .shadowBox

		@extend .sidebarWidthSizing

		@extend .contentDisplacedByTopbar

		position absolute

		top $topbar-size

		left 0

		height "calc(100% - %s)" % $topbar-size

		z-index 4

		flexible v space-between center

		background $color13
@@ -97,10 +91,9 @@ $sidebar-size-low-factor = 0.65 
					padding 0.1rem



	nav.secondarySidebar

		@extend .contentDisplacedByTopbar

		position absolute

		top $topbar-size

		z-index 3

		height "calc(100% - %s)" % $topbar-size

		width $sidebar-secondary-size

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

			width $sidebar-secondary-size * 0.9
@@ -122,6 +115,7 @@ $sidebar-size-low-factor = 0.65 
				text-decoration none

				display flex

				align-items center

				min-height 3rem



				&:focus

					outline none
@@ -140,19 +134,18 @@ $sidebar-size-low-factor = 0.65 
			transition left 0.5s ease-in 0s



		&.overall

			left $sidebar-size

			left $sidebar-default-size

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

				left $sidebar-size * $sidebar-size-high-factor

				left $sidebar-high-size

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

				left $sidebar-size * $sidebar-size-medium-factor

				left $sidebar-medium-size

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

				left $sidebar-size * $sidebar-size-low-factor

				left $sidebar-low-size

			transition left 0.4s ease-in 0s, z-index 0.05s ease 0.48s



.overlaySidebarBackground

	@extend .contentDisplacedByTopbar

	position absolute

	top $topbar-size

	height "calc(100% - %s)" % $topbar-size

	width 100%

	z-index 2

	background-color $black

src/redmic/Topbar.styl

+38 −10
Original line number Diff line number Diff line
@@ -9,15 +9,28 @@ 
	width 100% !important

	fondo degradado topbar

	flexible h space-between center

	height $topbar-size

	height $topbar-default-size

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

		height $topbar-high-size

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

		height $topbar-medium-size

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

		height $topbar-low-size

	noScroll()

	z-index 6

	padding 0 0.5rem



	.collapseSidebarButton

		@extend .fa

		fontSize 1.6rem

		padding 0 0.5rem

		display flex

		justify-content center

		width $sidebar-default-size

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

			width $sidebar-high-size

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

			width $sidebar-medium-size

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

			width $sidebar-low-size

		fontSize 2rem



		&:before

			@extend .fa-bars:before
@@ -27,11 +40,10 @@ 


	.topbarLogo

		flexible h center center

	min-width 115px

		user-select none



		img.logo

		width 115px

			width 3rem



.manager

	flexible h space-between center
@@ -87,3 +99,19 @@ 
.listMenu

	.flag

		height 1.5rem



.contentDisplacedByTopbar

	top $topbar-default-size !important

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

		top $topbar-high-size !important

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

		top $topbar-medium-size !important

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

		top $topbar-low-size !important

	height "calc(100% - %s)" % $topbar-default-size !important

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

		height "calc(100% - %s)" % $topbar-high-size !important

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

		height "calc(100% - %s)" % $topbar-medium-size !important

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

		height "calc(100% - %s)" % $topbar-low-size !important

src/redmic/index.styl

+1 −1
Original line number Diff line number Diff line
@@ -3,8 +3,8 @@ 
@import 'Containers'

@import 'Catalog'

@import 'Designs'

@import 'Sidebar'

@import 'Topbar'

@import 'Sidebar'

@import 'Forms'

@import 'Login'

@import 'Map'