css-to-radium conversion error

error.txt

Module parse failed: /Users/austinmao/Sites/aditive-frontend/src/components/Global/LeftMenu/navbar.style.js Line 2: Unexpected token :
[0] You may need an appropriate loader to handle this file type.
[0] | {
[0] | 	'.nav-bar-container:before, .nav-bar-container:after': {
[0] | 		content: '" "',
[0] | 		display: 'table'

navbar.css

.nav-bar-container:before,
.nav-bar-container:after {
  content: " ";
  display: table;
}
.nav-bar-container:after {
  clear: both;
}
.nav-menu {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 4;
  padding: 38px 0 27px 0;
  width: 80px;
  cursor: pointer;
}
.nav-menu .hamburger {
  width: 26px;
  height: 16px;
  position: relative;
  margin: 0 auto;
}
.nav-menu .hamburger .patty {
  position: absolute;
  left: 0;
  width: 26px;
  height: 3px;
  transform: translate3d(0, 0, 0);
  transition: all 300ms cubic-bezier(0.17, 0.67, 0.6, 1.3);
}
.nav-menu .hamburger .patty:nth-child(1) {
  top: -6px;
  left: -15px;
  opacity: 0;
  transition-delay: 300ms;
}
.nav-menu .hamburger .patty:nth-child(2) {
  top: 0;
  left: -15px;
  opacity: 0;
  transition-delay: 200ms;
}
.nav-menu .hamburger .patty:nth-child(3) {
  top: 6px;
  left: -15px;
  opacity: 0;
  transition-delay: 100ms;
}
.nav-menu .hamburger .patty:nth-child(4) {
  top: -6px;
  opacity: 1;
  transition-delay: 300ms;
}
.nav-menu .hamburger .patty:nth-child(5) {
  top: 0px;
  opacity: 1;
  transition-delay: 200ms;
}
.nav-menu .hamburger .patty:nth-child(6) {
  top: 6px;
  opacity: 1;
  transition-delay: 100ms;
}
.nav-menu:hover .patty {
  transform: translate3d(15px, 0, 0);
}
.nav-menu:hover .patty:nth-child(1) {
  opacity: 1;
  transition-delay: 100ms;
}
.nav-menu:hover .patty:nth-child(2) {
  opacity: 1;
  transition-delay: 200ms;
}
.nav-menu:hover .patty:nth-child(3) {
  opacity: 1;
  transition-delay: 300ms;
}
.nav-menu:hover .patty:nth-child(4) {
  opacity: 0;
  transition-delay: 100ms;
}
.nav-menu:hover .patty:nth-child(5) {
  opacity: 0;
  transition-delay: 200ms;
}
.nav-menu:hover .patty:nth-child(6) {
  opacity: 0;
  transition-delay: 300ms;
}
.nav-menu.active {
  z-index: 11;
}
.nav-menu.active .patty:nth-child(1) {
  opacity: 1;
  transform: rotateZ(45deg) translate(18px, -4px);
}
.nav-menu.active .patty:nth-child(3) {
  opacity: 1;
  transform: rotateZ(-45deg) translate(12px, 9px);
}
.nav-menu.active .patty:nth-child(2),
.nav-menu.active .patty:nth-child(4),
.nav-menu.active .patty:nth-child(5),
.nav-menu.active .patty:nth-child(6) {
  opacity: 0;
}
.nav-menu.active:hover .patty:nth-child(4),
.nav-menu.active:hover .patty:nth-child(5),
.nav-menu.active:hover .patty:nth-child(6) {
  opacity: 0;
}
.nav-menu.active.rotating .hamburger {
  animation: spin 800ms;
  transform-origin: 50% 30%;
}
.nav-menu.loading .patty {
  opacity: 0 !important;
}
.nav-menu.loading .patty:nth-child(5) {
  top: -11px;
  opacity: 1 !important;
  background-color: transparent;
  border: 3px solid #3e50b4;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  animation: spin 300ms infinite linear;
}
.nav-search {
  position: fixed;
  z-index: 4;
  top: 66px;
  left: 0;
  width: 80px;
  padding: 27px;
  cursor: pointer;
}
.nav-search .search {
  height: 26px;
  width: 26px;
  margin: 0 auto;
  display: block;
  position: relative;
  cursor: pointer;
}
.nav-search .search:before {
  transform-origin: 50% 50%;
  content: '';
  background: none;
  height: 18px;
  width: 18px;
  border: 3px solid transparent;
  border-radius: 100%;
  position: absolute;
  left: 2px;
  top: 2px;
  transition: 0.5s all cubic-bezier(0.17, 0.67, 0.6, 1.3);
}
.nav-search .search:after {
  transform-origin: 100% 100%;
  content: '';
  position: absolute;
  bottom: 0px;
  right: 0;
  left: 12px;
  transform: rotate(45deg);
  height: 3px;
  width: 12px;
  transition: 0.5s all cubic-bezier(0.17, 0.67, 0.6, 1.3);
}
.nav-search:active .search {
  transform: scale(0.8);
}
.nav-search.active {
  z-index: 11;
}
.nav-search.active .search:before {
  border-radius: 0;
  height: 3px;
  width: 26px;
  background: #fff;
  left: 0;
  right: 0;
  border: none;
  transform: rotate(135deg) translate3d(7px, -8px, 0);
}
.nav-search.active .search:after {
  transform-origin: 100% -35%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 26px;
  background: #fff;
}
.nav-search.active.rotating .search {
  animation: spin 800ms;
  transform-origin: 50% 50%;
}
.nav-user {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 80px;
  z-index: 4;
  cursor: pointer;
}
.nav-user .user {
  position: relative;
  display: block;
  padding: 15px;
  transition: 100ms transform cubic-bezier(0.17, 0.67, 0.6, 1.3);
  transform: scale(1);
}
.nav-user .user img {
  width: 50px;
  border-radius: 50%;
  transition: 500ms opacity cubic-bezier(0.17, 0.67, 0.6, 1.3);
}
.nav-user .user .badge {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 14px;
  border: 2px solid #fff;
  border-radius: 100%;
  background: #ff3829;
}
.nav-user .cross {
  position: absolute;
  left: 26px;
  bottom: 40px;
  transform: scale(0);
  transition: 0.3s transform cubic-bezier(0.17, 0.67, 0.6, 1.3);
}
.nav-user .cross .line {
  width: 26px;
  height: 3px;
  display: block;
  background: #fff;
  transition: 0.5s transform cubic-bezier(0.17, 0.67, 0.6, 1.3);
}
.nav-user:hover .user img {
  opacity: .8;
}
.nav-user:active .user {
  transform: scale(0.8);
}
.nav-user.active {
  z-index: 11;
}
.nav-user.active .user {
  transform: scale(0);
}
.nav-user.active .cross {
  transform: scale(1);
}
.nav-user.active .cross .line:nth-child(1) {
  transform: rotate(45deg) translate3d(4px, 2px, 0);
}
.nav-user.active .cross .line:nth-child(2) {
  transform: rotate(-45deg) translate3d(0px, 1px, 0);
}
.nav-user.active.rotating .cross {
  animation: spin 800ms;
  transform-origin: 50% 50%;
}
.nav-bar-border {
  position: fixed;
  left: 0;
  top: 0;
  width: 81px;
  height: 100%;
  background: #fff;
  border-right: 1px solid #f0f0f0;
}

navbar.style.js

{
	'.nav-bar-container:before, .nav-bar-container:after': {
		content: '" "',
		display: 'table'
	},
	'.nav-bar-container:after': {
		clear: 'both'
	},
	'.nav-menu': {
		position: 'fixed',
		left: 0,
		top: 0,
		zIndex: 4,
		padding: '38px 0 27px 0',
		width: 80,
		cursor: 'pointer'
	},
	'.nav-menu .hamburger': {
		width: 26,
		height: 16,
		position: 'relative',
		margin: '0 auto'
	},
	'.nav-menu .hamburger .patty': {
		position: 'absolute',
		left: 0,
		width: 26,
		height: 3,
		transform: 'translate3d(0, 0, 0)',
		transition: 'all 300ms cubic-bezier(0.17, 0.67, 0.6, 1.3)'
	},
	'.nav-menu .hamburger .patty:nth-child(1)': {
		top: -6,
		left: -15,
		opacity: 0,
		transitionDelay: '300ms'
	},
	'.nav-menu .hamburger .patty:nth-child(2)': {
		top: 0,
		left: -15,
		opacity: 0,
		transitionDelay: '200ms'
	},
	'.nav-menu .hamburger .patty:nth-child(3)': {
		top: 6,
		left: -15,
		opacity: 0,
		transitionDelay: '100ms'
	},
	'.nav-menu .hamburger .patty:nth-child(4)': {
		top: -6,
		opacity: 1,
		transitionDelay: '300ms'
	},
	'.nav-menu .hamburger .patty:nth-child(5)': {
		top: 0,
		opacity: 1,
		transitionDelay: '200ms'
	},
	'.nav-menu .hamburger .patty:nth-child(6)': {
		top: 6,
		opacity: 1,
		transitionDelay: '100ms'
	},
	'.nav-menu:hover .patty': {
		transform: 'translate3d(15px, 0, 0)'
	},
	'.nav-menu:hover .patty:nth-child(1)': {
		opacity: 1,
		transitionDelay: '100ms'
	},
	'.nav-menu:hover .patty:nth-child(2)': {
		opacity: 1,
		transitionDelay: '200ms'
	},
	'.nav-menu:hover .patty:nth-child(3)': {
		opacity: 1,
		transitionDelay: '300ms'
	},
	'.nav-menu:hover .patty:nth-child(4)': {
		opacity: 0,
		transitionDelay: '100ms'
	},
	'.nav-menu:hover .patty:nth-child(5)': {
		opacity: 0,
		transitionDelay: '200ms'
	},
	'.nav-menu:hover .patty:nth-child(6)': {
		opacity: 0,
		transitionDelay: '300ms'
	},
	'.nav-menu.active': {
		zIndex: 11
	},
	'.nav-menu.active .patty:nth-child(1)': {
		opacity: 1,
		transform: 'rotateZ(45deg) translate(18px, -4px)'
	},
	'.nav-menu.active .patty:nth-child(3)': {
		opacity: 1,
		transform: 'rotateZ(-45deg) translate(12px, 9px)'
	},
	'.nav-menu.active .patty:nth-child(2), .nav-menu.active .patty:nth-child(4), .nav-menu.active .patty:nth-child(5), .nav-menu.active .patty:nth-child(6)': {
		opacity: 0
	},
	'.nav-menu.active:hover .patty:nth-child(4), .nav-menu.active:hover .patty:nth-child(5), .nav-menu.active:hover .patty:nth-child(6)': {
		opacity: 0
	},
	'.nav-menu.active.rotating .hamburger': {
		animation: 'spin 800ms',
		transformOrigin: '50% 30%'
	},
	'.nav-menu.loading .patty': {
		opacity: 0
	},
	'.nav-menu.loading .patty:nth-child(5)': {
		top: -11,
		opacity: 1,
		backgroundColor: 'transparent',
		border: '3px solid #3e50b4',
		borderTopColor: 'transparent',
		borderLeftColor: 'transparent',
		borderRadius: '50%',
		width: 26,
		height: 26,
		animation: 'spin 300ms infinite linear'
	},
	'.nav-search': {
		position: 'fixed',
		zIndex: 4,
		top: 66,
		left: 0,
		width: 80,
		padding: 27,
		cursor: 'pointer'
	},
	'.nav-search .search': {
		height: 26,
		width: 26,
		margin: '0 auto',
		display: 'block',
		position: 'relative',
		cursor: 'pointer'
	},
	'.nav-search .search:before': {
		transformOrigin: '50% 50%',
		content: '\'\'',
		background: 'none',
		height: 18,
		width: 18,
		border: '3px solid transparent',
		borderRadius: '100%',
		position: 'absolute',
		left: 2,
		top: 2,
		transition: '0.5s all cubic-bezier(0.17, 0.67, 0.6, 1.3)'
	},
	'.nav-search .search:after': {
		transformOrigin: '100% 100%',
		content: '\'\'',
		position: 'absolute',
		bottom: 0,
		right: 0,
		left: 12,
		transform: 'rotate(45deg)',
		height: 3,
		width: 12,
		transition: '0.5s all cubic-bezier(0.17, 0.67, 0.6, 1.3)'
	},
	'.nav-search:active .search': {
		transform: 'scale(0.8)'
	},
	'.nav-search.active': {
		zIndex: 11
	},
	'.nav-search.active .search:before': {
		borderRadius: 0,
		height: 3,
		width: 26,
		background: '#fff',
		left: 0,
		right: 0,
		border: 'none',
		transform: 'rotate(135deg) translate3d(7px, -8px, 0)'
	},
	'.nav-search.active .search:after': {
		transformOrigin: '100% -35%',
		left: 0,
		right: 0,
		bottom: 0,
		width: 26,
		background: '#fff'
	},
	'.nav-search.active.rotating .search': {
		animation: 'spin 800ms',
		transformOrigin: '50% 50%'
	},
	'.nav-user': {
		position: 'fixed',
		bottom: 0,
		left: 0,
		width: 80,
		zIndex: 4,
		cursor: 'pointer'
	},
	'.nav-user .user': {
		position: 'relative',
		display: 'block',
		padding: 15,
		transition: '100ms transform cubic-bezier(0.17, 0.67, 0.6, 1.3)',
		transform: 'scale(1)'
	},
	'.nav-user .user img': {
		width: 50,
		borderRadius: '50%',
		transition: '500ms opacity cubic-bezier(0.17, 0.67, 0.6, 1.3)'
	},
	'.nav-user .user .badge': {
		position: 'absolute',
		right: 10,
		top: 10,
		fontSize: 14,
		border: '2px solid #fff',
		borderRadius: '100%',
		background: '#ff3829'
	},
	'.nav-user .cross': {
		position: 'absolute',
		left: 26,
		bottom: 40,
		transform: 'scale(0)',
		transition: '0.3s transform cubic-bezier(0.17, 0.67, 0.6, 1.3)'
	},
	'.nav-user .cross .line': {
		width: 26,
		height: 3,
		display: 'block',
		background: '#fff',
		transition: '0.5s transform cubic-bezier(0.17, 0.67, 0.6, 1.3)'
	},
	'.nav-user:hover .user img': {
		opacity: 0.8
	},
	'.nav-user:active .user': {
		transform: 'scale(0.8)'
	},
	'.nav-user.active': {
		zIndex: 11
	},
	'.nav-user.active .user': {
		transform: 'scale(0)'
	},
	'.nav-user.active .cross': {
		transform: 'scale(1)'
	},
	'.nav-user.active .cross .line:nth-child(1)': {
		transform: 'rotate(45deg) translate3d(4px, 2px, 0)'
	},
	'.nav-user.active .cross .line:nth-child(2)': {
		transform: 'rotate(-45deg) translate3d(0px, 1px, 0)'
	},
	'.nav-user.active.rotating .cross': {
		animation: 'spin 800ms',
		transformOrigin: '50% 50%'
	},
	'.nav-bar-border': {
		position: 'fixed',
		left: 0,
		top: 0,
		width: 81,
		height: '100%',
		background: '#fff',
		borderRight: '1px solid #f0f0f0'
	}
}